:root{
  --bg:#080a14;
  --ink:#f2f7ff;
  --ink-dim:rgba(220,233,255,.62);
  --ink-soft:rgba(220,233,255,.4);
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.28);
  --glass:rgba(16,22,44,.55);
  --glass-hi:rgba(255,255,255,.12);
  --accent:#7cc7ff;
  --accent-2:#b49dff;
  --accent-3:#ff9ce0;
  --danger:#ff7d8a;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"PingFang SC","HarmonyOS Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg) url("/static/bg.jpg") center center / cover no-repeat fixed;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.2px;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 12% -10%, rgba(70,125,225,.34), transparent 62%),
    radial-gradient(900px 620px at 88% 4%, rgba(200,105,200,.24), transparent 62%),
    linear-gradient(180deg, rgba(6,8,22,.58), rgba(6,8,22,.66) 45%, rgba(4,4,12,.82));
}
body::after{
  content:"";position:fixed;inset:-15%;z-index:0;pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(120,190,255,.28), transparent 70%) 15% 18%/46% 46% no-repeat,
    radial-gradient(closest-side, rgba(255,150,220,.22), transparent 70%) 84% 15%/50% 50% no-repeat;
  filter:blur(60px);animation:float 26s ease-in-out infinite alternate;
}
@keyframes float{from{transform:translate3d(-1%,-1%,0) scale(1)}to{transform:translate3d(1.6%,1.4%,0) scale(1.07)}}

.glass{
  background:linear-gradient(150deg, rgba(255,255,255,.07), rgba(8,11,26,.80) 42%, rgba(8,11,26,.72));
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  box-shadow:0 16px 44px rgba(2,5,18,.45), inset 0 1px 0 rgba(255,255,255,.42);
  position:relative;
}

/* ---------------- 登录 ---------------- */
.login-wrap{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:min(390px,100%);padding:36px 32px 28px;border-radius:24px;background:linear-gradient(150deg, rgba(255,255,255,.12), rgba(8,11,26,.82) 45%, rgba(8,11,26,.76))}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.brand-mark{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(140deg, rgba(124,199,255,.9), rgba(180,157,255,.85) 55%, rgba(255,156,224,.85));
  box-shadow:0 8px 24px rgba(110,160,255,.45), inset 0 1px 0 rgba(255,255,255,.6);
}
.brand-mark svg{width:22px;height:22px;stroke:#0a1024}
.brand h1{font-size:20px;margin:0;letter-spacing:.06em;font-weight:600}
.brand span{font-size:12px;color:var(--ink-dim);letter-spacing:.18em}
.login-card p.sub{margin:12px 0 26px;font-size:13px;color:var(--ink-dim)}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:7px;letter-spacing:.08em}
.field input{
  width:100%;padding:12px 14px;border-radius:12px;color:var(--ink);font-size:14px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);outline:none;
  transition:.25s;font-family:inherit;
}
.field input:focus{border-color:rgba(140,200,255,.6);background:rgba(255,255,255,.09);box-shadow:0 0 0 3px rgba(100,170,255,.15)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:12px;border:1px solid var(--line-strong);
  background:rgba(255,255,255,.09);color:var(--ink);font-size:13.5px;font-family:inherit;
  cursor:pointer;transition:.22s;white-space:nowrap;user-select:none;
}
.btn:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{
  background:linear-gradient(135deg, rgba(124,199,255,.95), rgba(180,157,255,.92) 60%, rgba(255,156,224,.9));
  color:#0b1022;border:none;font-weight:600;
  box-shadow:0 10px 26px rgba(110,160,255,.35), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--danger);border-color:rgba(255,125,138,.35)}
.btn.block{width:100%;padding:13px}
.alert{
  margin-bottom:16px;padding:10px 12px;border-radius:10px;font-size:12.5px;
  background:rgba(255,125,138,.12);border:1px solid rgba(255,125,138,.35);color:#ffc2c8;
}
.tip{margin-top:18px;font-size:11.5px;color:var(--ink-soft);text-align:center;letter-spacing:.06em}

/* ---------------- 主界面 ---------------- */
.app{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;gap:14px;width:100%;max-width:1280px;margin:0 auto;padding:20px clamp(14px,2.4vw,28px) 26px}
.topbar{display:flex;align-items:center;gap:18px;padding:12px 18px;border-radius:18px}
.topbar .brand h1{font-size:16px}
.topbar .brand span{display:none}
.tabs{display:flex;gap:6px;margin-left:auto;margin-right:auto;background:rgba(255,255,255,.05);padding:4px;border-radius:12px;border:1px solid var(--line)}
.tab{padding:8px 18px;border-radius:9px;font-size:13px;color:var(--ink-dim);cursor:pointer;transition:.2s;border:none;background:transparent;font-family:inherit}
.tab.active{background:linear-gradient(135deg, rgba(124,199,255,.22), rgba(180,157,255,.2));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.userbox{display:flex;align-items:center;gap:12px;margin-left:auto;font-size:12.5px;color:var(--ink-dim)}
.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;color:#0b1022;
  background:linear-gradient(140deg,#9ad8ff,#c0aaff 60%,#ffb2e4)}

.panel{flex:1;display:flex;flex-direction:column;padding:14px 16px 16px;min-height:0}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.crumbs{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-dim);flex:1;min-width:240px;overflow:hidden;white-space:nowrap}
.crumbs a{color:var(--ink-dim);text-decoration:none;padding:4px 8px;border-radius:8px;transition:.18s}
.crumbs a:hover{background:rgba(255,255,255,.08);color:#fff}
.crumbs .sep{color:rgba(255,255,255,.25)}
.crumbs .cur{color:#fff;font-weight:500;padding:4px 8px}
.search{margin-left:auto;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:7px 11px;min-width:180px}
.search input{background:none;border:none;outline:none;color:var(--ink);font-size:12.5px;width:100%;font-family:inherit}
.search svg{width:14px;height:14px;stroke:var(--ink-soft)}

.dropzone{
  margin-top:12px;border:1px dashed rgba(255,255,255,.22);border-radius:14px;padding:18px;
  text-align:center;color:var(--ink-dim);font-size:12.5px;transition:.2s;cursor:pointer;
}
.dropzone:hover,.dropzone.over{border-color:rgba(140,200,255,.65);background:rgba(120,180,255,.08);color:#fff}

.list{flex:1;margin-top:6px;overflow:auto;min-height:0}
.list-head{
  display:grid;grid-template-columns:34px minmax(0,1fr) 92px 150px 112px;gap:12px;
  padding:8px 10px;margin-top:10px;font-size:11px;letter-spacing:.12em;color:var(--ink-soft);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.list-head span:nth-child(3),.list-head span:nth-child(4){text-align:right}
.list-head span:last-child{text-align:right}
.row{
  display:grid;grid-template-columns:34px minmax(0,1fr) 92px 150px 112px;align-items:center;gap:12px;
  padding:7px 10px;border-radius:11px;transition:.16s;border:1px solid transparent;min-height:46px;
}
.row:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.09)}
.row .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.row .ic svg{width:17px;height:17px;stroke:var(--accent)}
.row .ic.dir svg{stroke:#ffd479}
.row .nm{font-size:13.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.row .nm:hover{text-decoration:underline;text-underline-offset:3px}
.row .meta{font-size:11.5px;color:var(--ink-soft);text-align:right;font-variant-numeric:tabular-nums}
.row .acts{display:flex;gap:2px;opacity:0;transition:.18s;justify-content:flex-end}
.row:hover .acts{opacity:1}
.iconbtn{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:transparent;border:1px solid transparent;cursor:pointer;color:var(--ink-dim)}
.iconbtn:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.15)}
.iconbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}
.iconbtn.del:hover{color:var(--danger)}

.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:60px 0;color:var(--ink-soft);font-size:13px}
.empty svg{width:44px;height:44px;stroke:rgba(255,255,255,.18)}

.statrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.stat{padding:10px 16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);min-width:120px}
.stat b{display:block;font-size:19px;font-weight:600;letter-spacing:.02em}
.stat span{font-size:11.5px;color:var(--ink-soft);letter-spacing:.1em}

.badge{font-size:10.5px;padding:2px 7px;border-radius:6px;background:rgba(124,199,255,.16);border:1px solid rgba(124,199,255,.3);color:#bfe6ff;margin-left:8px}

/* ---------------- 弹窗 ---------------- */
.mask{position:fixed;inset:0;z-index:50;background:rgba(4,6,16,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px}
.mask.show{display:flex}
.modal{width:min(520px,100%);border-radius:20px;padding:22px 24px;animation:pop .22s ease}
.modal.wide{width:min(900px,100%)}
@keyframes pop{from{transform:translateY(10px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal h3{margin:0 0 6px;font-size:16px;font-weight:600}
.modal p{margin:0 0 16px;font-size:12.5px;color:var(--ink-dim);word-break:break-all}
.modal input,.modal textarea{
  width:100%;padding:11px 13px;border-radius:11px;background:rgba(255,255,255,.06);
  border:1px solid var(--line);color:var(--ink);font-size:13.5px;outline:none;font-family:inherit;
}
.modal textarea{min-height:320px;resize:vertical;line-height:1.6;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
.modal .foot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);z-index:99;padding:11px 18px;border-radius:12px;
  background:rgba(16,24,46,.9);border:1px solid var(--line-strong);font-size:13px;opacity:0;transition:.3s;pointer-events:none;
  box-shadow:0 12px 34px rgba(0,0,0,.45);backdrop-filter:blur(16px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{border-color:rgba(255,125,138,.5);color:#ffc9cf}

.drop-overlay{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  background:rgba(6,10,24,.72);backdrop-filter:blur(8px);font-size:15px;letter-spacing:.1em}
.drop-overlay.show{display:flex}
.drop-overlay div{padding:36px 54px;border:1px dashed rgba(150,205,255,.6);border-radius:22px;background:rgba(120,180,255,.08)}

@media (max-width:820px){
  .topbar{flex-wrap:wrap;gap:10px}
  .tabs{order:3;margin:0;width:100%;justify-content:center}
  .row{grid-template-columns:auto 1fr auto;row-gap:6px}
  .row .meta{display:none}
  .row .acts{opacity:1}
  .crumb .search{display:none}
}

/* ---------------- 访客配对码页 ---------------- */
.pickup{width:min(430px,100%)}
.pickup-card{padding:32px 28px 24px;text-align:center;border-radius:24px}
.pickup-card .brand{margin-bottom:0}
.pickup-title{font-size:22px;margin:14px 0 6px;font-weight:600;letter-spacing:.12em}
.pickup-sub{margin:0 0 22px;font-size:12.5px;color:var(--ink-dim)}
.code-input{
  width:100%;text-align:center;font-size:34px;font-weight:600;letter-spacing:.42em;
  padding:12px 0 12px .42em;border-radius:16px;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid var(--line);outline:none;
  font-variant-numeric:tabular-nums;font-family:inherit;transition:.22s;
}
.code-input::placeholder{color:rgba(255,255,255,.16);letter-spacing:.42em}
.code-input:focus{border-color:rgba(140,200,255,.65);background:rgba(255,255,255,.09);box-shadow:0 0 0 4px rgba(100,170,255,.14)}
.pickup-msg{min-height:18px;margin-top:10px;font-size:12.5px;color:#ffc2c8;opacity:0;transition:.2s}
.pickup-msg.show{opacity:1}
.result-card{padding:22px 22px 18px;border-radius:22px}
.result-head{display:flex;align-items:center;gap:12px;text-align:left}
.result-head svg{width:34px;height:34px;stroke:var(--accent);flex:none;
  filter:drop-shadow(0 3px 12px rgba(150,205,255,.5))}
.result-name{font-size:14.5px;font-weight:600;word-break:break-all;line-height:1.4}
.result-meta{font-size:11.5px;color:var(--ink-soft);margin-top:4px}
.result-note{margin-top:12px;padding:9px 12px;border-radius:10px;font-size:12px;
  color:var(--ink-dim);background:rgba(255,255,255,.05);border:1px solid var(--line);
  text-align:left;line-height:1.6;display:none}
.pickup-foot{margin-top:20px;text-align:center;font-size:12px;color:rgba(220,233,255,.5);line-height:2}
.pickup-foot .group-no{font-size:12.5px;color:rgba(220,233,255,.62)}
.pickup-foot b{color:#eaf2ff;font-weight:600;letter-spacing:.08em}

/* ---------------- 配对码表格 ---------------- */
.code-cell{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;letter-spacing:.18em;color:#bfe6ff}
.tag{display:inline-block;font-size:10.5px;padding:2px 7px;border-radius:6px;margin-left:6px;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--ink-soft)}
.tag.off{background:rgba(255,125,138,.12);border-color:rgba(255,125,138,.3);color:#ffc2c8}
.tag.ok{background:rgba(124,199,255,.14);border-color:rgba(124,199,255,.3);color:#bfe6ff}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
.form-grid label{display:block;font-size:11.5px;color:var(--ink-soft);margin-bottom:6px;letter-spacing:.08em}
.form-grid input,.form-grid select,.form-grid textarea{
  width:100%;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.06);
  border:1px solid var(--line);color:var(--ink);font-size:13px;outline:none;font-family:inherit;
}
.form-grid select option{background:#111a30;color:#fff}
.form-grid textarea{min-height:64px;resize:vertical}
@media (max-width:820px){.form-grid{grid-template-columns:1fr}}

.code-head{grid-template-columns:110px minmax(0,1fr) 90px 160px 96px}
.code-row{grid-template-columns:110px minmax(0,1fr) 90px 160px 96px}
.code-row .nm{display:flex;flex-direction:column;gap:2px}
.code-row .nm .sub{font-size:11px;color:var(--ink-soft);font-weight:400}
.big-code{
  text-align:center;font-size:52px;font-weight:700;letter-spacing:.3em;padding:18px 0 6px;
  background:linear-gradient(92deg,#9fe8ff,#c9b8ff 48%,#ffb3e6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}

/* ---------- 四格配对码 ---------- */
.code-boxes{display:flex;gap:10px;justify-content:center;margin-top:4px}
.code-digit{
  width:64px;height:74px;text-align:center;font-size:30px;font-weight:600;color:#fff;
  border-radius:16px;border:1px solid rgba(255,255,255,.16);outline:none;
  background:linear-gradient(150deg, rgba(255,255,255,.12), rgba(8,11,26,.58) 58%, rgba(8,11,26,.46));
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 6px 18px rgba(3,6,22,.32);
  transition:transform .22s, border-color .22s, box-shadow .22s, background .22s;
  font-family:inherit;font-variant-numeric:tabular-nums;caret-color:#9fe8ff;
}
.code-digit:focus{
  border-color:rgba(150,210,255,.72);
  transform:translateY(-3px);
  box-shadow:0 0 0 4px rgba(100,170,255,.16), inset 0 1px 0 rgba(255,255,255,.62), 0 12px 28px rgba(60,120,255,.30);
}
.code-digit.filled{
  border-color:rgba(180,222,255,.48);
  background:linear-gradient(150deg, rgba(255,255,255,.20), rgba(24,34,66,.60) 58%, rgba(14,20,44,.52));
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(3px)}
}
.code-digit.shake{animation:shake .38s ease}
@media (max-width:420px){.code-digit{width:56px;height:66px;font-size:26px}}