:root{
    --bg:#eef2f8;
    --panel:#ffffff;
    --ink:#16202e;
    --ink2:#41526b;
    --muted:#7c8aa0;
    --line:#e4e9f2;
    --accent:#0b5cad;
    --accent2:#2f8bfd;
    --soft:#eaf2fd;
    --ok:#0f9d58;
    --warn:#b8791a;
    --danger:#d64545;
    --radius:14px;
    --shadow:0 1px 2px rgba(16,24,40,.05), 0 12px 30px -22px rgba(16,24,40,.45);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:linear-gradient(180deg,#f7f9fd 0%,#eef2f8 45%,#e9eef6 100%);
    color:var(--ink);
    font-family:"Microsoft YaHei","PingFang SC",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:14px;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  /* ---------- header ---------- */
  .head{
    position:sticky;top:0;z-index:20;
    background:rgba(255,255,255,.88);
    backdrop-filter:saturate(1.4) blur(10px);
    border-bottom:1px solid var(--line);
  }
  .head-in{
    max-width:1400px;margin:0 auto;padding:12px 20px;
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  }
  .logo{
    width:38px;height:38px;border-radius:11px;flex:0 0 auto;
    background:linear-gradient(140deg,#0b5cad,#2f8bfd);
    color:#fff;display:grid;place-items:center;
    font-weight:700;font-size:15px;letter-spacing:.5px;
    box-shadow:0 6px 14px -6px rgba(11,92,173,.7);
  }
  .ttl{display:flex;flex-direction:column;gap:2px;line-height:1.25}
  .ttl b{font-size:16px;letter-spacing:.3px}
  .ttl span{font-size:12px;color:var(--muted)}
  .head-right{margin-left:auto;display:flex;align-items:center;gap:8px}
  .pill{
    font-size:12px;color:var(--accent);background:var(--soft);
    border:1px solid #d6e6fb;border-radius:999px;padding:5px 11px;white-space:nowrap;
  }
  .pill b{font-variant-numeric:tabular-nums}
  .pill.act{cursor:pointer}
  .pill.act:hover{filter:brightness(.97)}
  .pill.warn{background:#fff6e8;border-color:#f3e2c4;color:#b8791a}
  /* ---------- layout ---------- */
  .wrap{
    max-width:1400px;margin:0 auto;padding:18px 20px 40px;
    display:grid;grid-template-columns:430px minmax(0,1fr);gap:16px;align-items:start;
  }
  .card{
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);
  }
  .card-hd{
    padding:13px 16px;border-bottom:1px solid var(--line);
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  }
  .card-hd h2{margin:0;font-size:14px;font-weight:700;letter-spacing:.3px}
  .card-hd .sub{font-size:12px;color:var(--muted)}
  .card-bd{padding:14px 16px 16px}
  /* ---------- paste ---------- */
  .paste-box{position:relative}
  textarea#paste{
    width:100%;min-height:176px;resize:vertical;
    padding:13px 14px;border-radius:12px;
    border:1.5px dashed #c9d7ea;background:#fbfdff;
    color:var(--ink);font-size:13.5px;line-height:1.75;
    font-family:inherit;outline:none;transition:.18s;
  }
  textarea#paste::placeholder{color:#a8b6c9}
  textarea#paste:focus{border-color:var(--accent2);background:#fff;box-shadow:0 0 0 4px rgba(47,139,253,.11)}
  .paste-tip{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    margin-top:8px;font-size:11.5px;color:var(--muted);flex-wrap:wrap;
  }
  .scan{display:flex;gap:6px;flex-wrap:wrap;min-height:18px}
  .chip{
    font-size:11px;padding:2px 8px;border-radius:999px;
    background:#eef4ff;color:#2c6cc0;border:1px solid #dbe8fb;
  }
  .chip.miss{background:#fff6e8;color:var(--warn);border-color:#f3e2c4}
  /* ---------- form ---------- */
  .form{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .fld{display:flex;flex-direction:column;gap:5px;min-width:0}
  .fld.full{grid-column:1/-1}
  .fld label{font-size:11.5px;color:var(--muted);letter-spacing:.4px}
  .fld input,.fld textarea,.fld select{
    width:100%;padding:9px 11px;border-radius:9px;border:1px solid var(--line);
    background:#fff;color:var(--ink);font-size:13.5px;font-family:inherit;outline:none;transition:.16s;
  }
  .fld select{
    appearance:none;-webkit-appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237c8aa0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 11px center;padding-right:28px;
  }
  .fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(47,139,253,.1)}
  .fld input.bad{border-color:#eec3c3;background:#fffafa}
  .fld textarea{resize:vertical;min-height:38px;max-height:120px}
  .time-row{display:flex;gap:8px;align-items:center}
  .time-row input{flex:1 1 auto}
  .time-row .btn{flex:0 0 auto;white-space:nowrap;padding:9px 12px}
  .actions{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
  button{font-family:inherit;cursor:pointer;transition:.16s;border:none;background:none;color:inherit}
  .btn{
    padding:10px 16px;border-radius:10px;font-size:13.5px;font-weight:600;
    display:inline-flex;align-items:center;gap:6px;
  }
  .btn-primary{background:linear-gradient(150deg,#0b5cad,#2b83f0);color:#fff;box-shadow:0 8px 18px -10px rgba(11,92,173,.9)}
  .btn-primary:hover{filter:brightness(1.06)}
  .btn-primary:active{transform:translateY(1px)}
  .btn-ghost{background:#f2f5fa;color:var(--ink2);border:1px solid var(--line)}
  .btn-ghost:hover{background:#e9eff8}
  .btn-sm{padding:6px 11px;border-radius:8px;font-size:12px;font-weight:600}
  .btn-danger-ghost{background:#fff;color:var(--danger);border:1px solid #f0d6d6}
  .btn-danger-ghost:hover{background:#fff4f4}
  .switch{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink2);cursor:pointer;user-select:none}
  .switch input{display:none}
  .track{width:36px;height:20px;border-radius:999px;background:#cfd9e6;position:relative;transition:.2s}
  .track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}
  .switch input:checked + .track{background:var(--accent2)}
  .switch input:checked + .track::after{transform:translateX(16px)}
  /* ---------- right ---------- */
  .toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)}
  .search{
    flex:1 1 190px;min-width:150px;position:relative;
  }
  .search input{
    width:100%;padding:9px 11px 9px 32px;border-radius:10px;border:1px solid var(--line);
    font-size:13px;font-family:inherit;outline:none;background:#fbfcfe;color:var(--ink);
  }
  .search input:focus{background:#fff;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(47,139,253,.1)}
  .search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.45}
  .seg{display:inline-flex;background:#f1f4f9;border-radius:10px;padding:3px;border:1px solid var(--line)}
  .seg button{padding:6px 13px;border-radius:8px;font-size:12.5px;color:var(--ink2);font-weight:600}
  .seg button.on{background:#fff;color:var(--accent);box-shadow:0 1px 3px rgba(16,24,40,.13)}
  .mini-select{
    padding:8px 26px 8px 10px;border-radius:10px;border:1px solid var(--line);background-color:#fbfcfe;
    font-size:12.5px;color:var(--ink2);font-family:inherit;cursor:pointer;outline:none;
    appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237c8aa0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 9px center;
  }
  .mini-select:focus{border-color:var(--accent2);background-color:#fff}
  .st{
    display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
    font-size:12px;font-weight:600;border:1px solid transparent;white-space:nowrap;
  }
  .st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
  .st.wait{background:#fff6e6;color:#b8791a;border-color:#f2e2c0}
  .st.done{background:#e9f8ef;color:#0f9d58;border-color:#c9ebd7}
  .st:hover{filter:brightness(.96)}
  .c-settle{white-space:nowrap}
  /* ---------- 确认弹窗 ---------- */
  .modal-mask{
    position:fixed;inset:0;z-index:80;padding:20px;display:none;
    align-items:center;justify-content:center;
    background:rgba(16,24,40,.44);
  }
  .modal-mask.on{display:flex}
  .modal{
    width:min(392px,100%);background:#fff;border-radius:16px;overflow:hidden;
    box-shadow:0 30px 70px -28px rgba(16,24,40,.65);
    animation:pop .16s ease-out;
  }
  @keyframes pop{from{transform:scale(.96);opacity:.4}to{transform:scale(1);opacity:1}}
  .modal-hd{padding:17px 18px 0;font-size:15px;font-weight:700;color:var(--ink)}
  .modal-bd{padding:10px 18px 2px;font-size:13px;color:var(--ink2);line-height:1.95}
  .modal-bd .kv{display:flex;gap:6px}
  .modal-bd .kv span:first-child{color:var(--muted);flex:0 0 52px}
  .modal-bd .kv span:last-child{font-weight:600;color:var(--ink)}
  .modal-flag{
    display:block;margin-top:10px;padding:8px 11px;border-radius:9px;
    background:#fff7ea;color:#b8791a;font-size:12.5px;line-height:1.6;
  }
  .modal-flag.ok{background:#eef8f2;color:#0f9d58}
  .modal-ft{display:flex;gap:8px;justify-content:flex-end;padding:14px 18px 16px}
  .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:14px 16px 4px}
  .stat{
    background:linear-gradient(160deg,#fbfdff,#f4f8fe);
    border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  }
  .stat .k{font-size:11.5px;color:var(--muted)}
  .stat .v{font-size:21px;font-weight:700;letter-spacing:.5px;margin-top:2px;font-variant-numeric:tabular-nums}
  .stat .v small{font-size:11px;font-weight:500;color:var(--muted);margin-left:3px}
  .table-wrap{padding:10px 16px 16px;overflow:auto;max-height:calc(100vh - 300px)}
  table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
  thead th{
    position:sticky;top:0;z-index:2;background:#f7f9fd;text-align:left;
    font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.4px;
    padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;
  }
  thead th:first-child{border-top-left-radius:9px}
  thead th:last-child{border-top-right-radius:9px;text-align:right}
  tbody td{padding:10px;border-bottom:1px solid #f0f3f9;vertical-align:middle;color:var(--ink2)}
  tbody tr:hover td{background:#fafcff}
  tbody tr.new td{animation:flash 1.6s ease-out}
  @keyframes flash{0%{background:#e7f2ff}100%{background:transparent}}
  .c-name{font-weight:600;color:var(--ink)}
  .mono{font-variant-numeric:tabular-nums;letter-spacing:.4px}
  .tag{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--soft);color:#2c6cc0;font-size:12px;font-weight:600}
  .c-store{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .c-time{color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
  .c-act{text-align:right;white-space:nowrap}
  .c-act button{padding:4px 8px;border-radius:7px;font-size:12px;color:var(--muted)}
  .c-act button:hover{background:#eef4ff;color:var(--accent)}
  .c-act button.del:hover{background:#fff2f2;color:var(--danger)}
  .empty{text-align:center;padding:44px 10px;color:var(--muted)}
  .empty svg{opacity:.5;margin-bottom:10px}
  .empty p{margin:0;font-size:13px}
  .empty span{font-size:12px;opacity:.75}
  .data-note{padding:0 16px 14px;font-size:11.5px;color:var(--muted);line-height:1.6}
  /* ---------- toast ---------- */
  .toast{
    position:fixed;left:50%;bottom:26px;transform:translate(-50%,26px);
    background:#1d2937;color:#fff;padding:11px 16px;border-radius:11px;
    font-size:13px;box-shadow:0 14px 34px -12px rgba(16,24,40,.6);
    display:flex;align-items:center;gap:12px;max-width:90vw;
    opacity:0;pointer-events:none;transition:.22s;z-index:60;
  }
  .toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
  .toast .undo{color:#7db9ff;font-weight:700;font-size:12.5px}
  .toast .undo:hover{text-decoration:underline}
  @media (max-width:1080px){
    .wrap{grid-template-columns:1fr}
    .table-wrap{max-height:none}
    .stats{grid-template-columns:repeat(3,1fr)}
  }
  @media (max-width:560px){
    .form{grid-template-columns:1fr}
    .wrap{padding:12px 12px 30px}
    .head-in{padding:10px 12px}
    .c-store{max-width:110px}
  }

/* ---------- 登录 ---------- */
.login-mask{
  position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(165deg,#f7fafd 0%,#e8f0fa 55%,#e2eaf5 100%);
}
.login-mask.on{display:flex}
.login-card{
  width:min(356px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 30px 60px -30px rgba(16,24,40,.45);padding:26px 24px 22px;text-align:center;
}
.login-card .logo{width:44px;height:44px;font-size:17px;margin:0 auto 12px;border-radius:13px}
.login-card h1{margin:0 0 5px;font-size:17px;letter-spacing:.3px}
.login-card p{margin:0 0 18px;font-size:12.5px;color:var(--muted)}
.login-card input{
  width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--line);
  font-size:14px;font-family:inherit;outline:none;margin-bottom:10px;background:#fbfcfe;transition:.16s;
}
.login-card input:focus{border-color:var(--accent2);background:#fff;box-shadow:0 0 0 3px rgba(47,139,253,.12)}
.login-card .btn{width:100%;justify-content:center;margin-top:4px}
.login-err{color:var(--danger);font-size:12.5px;min-height:18px;margin-bottom:4px}
.login-foot{margin-top:14px;font-size:11.5px;color:var(--muted)}

/* ---------- 其它 ---------- */
.pill.danger{background:#fff1f1;border-color:#f3d3d3;color:#c0392b;cursor:pointer}
.pill.danger:hover{background:#ffe8e8}
.loading-row{text-align:center;padding:26px 10px;color:var(--muted);font-size:12.5px}
@media (max-width:560px){
  .head-right{width:100%;justify-content:flex-start}
}