/* ============================================================
   蜂小满WMS系统 — 设计系统
   左侧导航 + 卡片式内容区，浅色/深色跟随系统
   ============================================================ */
:root{
  --brand:#2563eb;
  --brand-2:#7c3aed;
  --brand-soft:#eff4ff;
  --brand-ink:#1d4ed8;
  /* 按钮上的文字色。**别写死白色** —— 深色主题的强调色很亮，
     白字对比度只有 2.5:1，读不清。这是老配色的实打实的 bug。 */
  --on-brand:#ffffff;

  --bg:#f5f6f8;
  --card:#ffffff;
  --sidebar:#ffffff;
  --ink:#0f172a;
  --ink-2:#334155;
  --muted:#607087;      /* 4.66:1 于页面底 —— 原来的 #64748b 只有 4.40:1，差一点点不合规 */
  --line:#e5e8ec;        /* 装饰性分隔线，可以很淡 */
  --field-line:#8a90a0;  /* 输入框边框：WCAG 1.4.11 要求能标识控件边界的线 ≥3:1 */
  --hover:#f1f5f9;

  --ok:#047857;      --ok-bg:#ecfdf5;   --ok-line:#a7f3d0;
  --warn:#b45309;    --warn-bg:#fffbeb; --warn-line:#fde68a;
  --err:#be123c;     --err-bg:#fff1f2;  --err-line:#fecdd3;
  --info:#0369a1;    --info-bg:#f0f9ff;

  --sh-1:0 1px 2px rgba(15,23,42,.05);
  --sh-2:0 4px 16px -4px rgba(15,23,42,.10), 0 1px 3px rgba(15,23,42,.05);
  --sh-3:0 12px 32px -8px rgba(15,23,42,.16);
  --r:14px; --r-sm:10px;
  --sidebar-w:240px;
}
@media (prefers-color-scheme: dark){
  :root{
    --brand:#60a5fa; --brand-2:#a78bfa; --brand-soft:#1e293b; --brand-ink:#93c5fd;
    --bg:#0b1120; --card:#111a2e; --sidebar:#0e1626;
    --ink:#e8eef8; --ink-2:#cbd5e1; --muted:#8b9bb4; --line:#1f2c44; --hover:#182338;
    --field-line:#5b6b85; --on-brand:#0b1120;
    --ok:#34d399; --ok-bg:#052e2b; --ok-line:#134e4a;
    --warn:#fbbf24; --warn-bg:#2e2410; --warn-line:#5a4310;
    --err:#fb7185; --err-bg:#3b1220; --err-line:#6b1d33;
    --info:#7dd3fc; --info-bg:#0c2537;
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 4px 16px -4px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
    --sh-3:0 12px 32px -8px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{letter-spacing:-.01em}

/* ── 骨架 ───────────────────────────────────────────── */
.app{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:var(--sidebar);border-right:1px solid var(--line);
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;z-index:30;
}
.sidebar .brand{display:flex;align-items:center;gap:11px;padding:20px 18px 18px;font-weight:700;font-size:15px}
.brand-mark{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:none;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:var(--sh-2);
}
.sidebar .brand small{display:block;font-weight:500;font-size:11.5px;color:var(--muted);letter-spacing:.02em}

.nav{padding:6px 10px;flex:1;overflow-y:auto}
.nav-label{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--muted);padding:14px 12px 6px;text-transform:uppercase}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 12px;margin-bottom:2px;
  border-radius:var(--r-sm);color:var(--ink-2);font-weight:500;font-size:14.5px;
  transition:background .14s,color .14s;position:relative;
}
.nav-item:hover{background:var(--hover);color:var(--ink);text-decoration:none}
.nav-item.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.nav-item.on::before{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--brand)}
.nav-item svg{width:19px;height:19px;flex:none;opacity:.85}
.nav-item.on svg{opacity:1}
.nav-badge{
  margin-left:auto;font-size:11.5px;font-weight:700;min-width:20px;text-align:center;
  padding:1px 7px;border-radius:999px;background:var(--err-bg);color:var(--err);
}
.sidebar-foot{padding:12px 18px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.sidebar-foot .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}
/* 当前登录人 + 退出。窄屏只留头像和退出图标（见响应式段落）。 */
.who{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.who .avatar{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  font-style:normal;font-size:12.5px;font-weight:700;color:#fff;
  background:linear-gradient(var(--brand),var(--brand-2))}
.who .who-text{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.who .who-text b{font-size:12.5px;color:var(--ink);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .who-text small{font-size:11px;color:var(--muted)}
.who .logout{margin-left:auto;flex:none;display:grid;place-items:center;width:26px;height:26px;
  border-radius:8px;color:var(--muted);border:1px solid transparent}
.who .logout:hover{color:var(--err);border-color:var(--err-line);background:var(--err-bg)}

.content{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:62px;flex:none;display:flex;align-items:center;gap:14px;padding:0 26px;
  border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--card) 82%,transparent);
  backdrop-filter:saturate(180%) blur(12px);position:sticky;top:0;z-index:20;
}
.topbar h1{font-size:17px;margin:0;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.topbar .sub{color:var(--muted);font-size:13px;font-weight:400;margin-left:2px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.menu-btn{display:none;background:none;border:0;color:var(--ink);padding:6px;border-radius:8px;cursor:pointer}
main{padding:24px 26px 44px;max-width:1440px;width:100%}

/* ── 卡片 / 排版 ──────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:16px;box-shadow:var(--sh-1)}
.card.tight{padding:0;overflow:hidden}
.card-head{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.card-head h2{margin:0;font-size:15px;font-weight:650}
.card-head .muted{margin-left:auto;font-size:13px}
h2{font-size:15.5px;margin:26px 0 11px;font-weight:650}
h2:first-child{margin-top:0}
.muted{color:var(--muted)}
.small{font-size:13px}
.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:13.5px;letter-spacing:-.01em}

/* ── 统计卡 ───────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-bottom:18px}
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
  box-shadow:var(--sh-1);transition:transform .16s,box-shadow .16s;position:relative;overflow:hidden;
}
.stat:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.stat::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--muted);opacity:.5}
.stat.ok::after{background:var(--ok);opacity:1}
.stat.warn::after{background:var(--warn);opacity:1}
.stat.err::after{background:var(--err);opacity:1}
.stat.accent::after{background:linear-gradient(var(--brand),var(--brand-2));opacity:1}
.stat .n{font-size:30px;font-weight:720;line-height:1.15;letter-spacing:-.025em}
.stat .l{color:var(--muted);font-size:12.5px;margin-top:3px;font-weight:500}
.stat.ok .n{color:var(--ok)} .stat.warn .n{color:var(--warn)} .stat.err .n{color:var(--err)}
.stat .sub{font-size:11.5px;color:var(--muted);margin-top:6px}

/* ── 表格 ─────────────────────────────────────────── */
.tablewrap{overflow-x:auto;border-radius:var(--r)}
table{width:100%;border-collapse:collapse;background:var(--card);font-size:14px}
th,td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{background:color-mix(in srgb,var(--hover) 60%,var(--card));font-size:11.5px;color:var(--muted);
  font-weight:650;white-space:nowrap;letter-spacing:.04em;text-transform:uppercase;position:sticky;top:0;z-index:1}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--hover)}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
tfoot th{background:color-mix(in srgb,var(--brand-soft) 70%,var(--card));color:var(--ink);
  font-size:13.5px;text-transform:none;letter-spacing:0;border-top:1px solid var(--line);position:static}
.empty{padding:36px 16px;text-align:center;color:var(--muted)}

/* ── 标签页 / 药丸 ────────────────────────────────── */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tabs a{
  display:flex;align-items:center;gap:7px;padding:7px 14px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);color:var(--ink-2);font-size:14px;font-weight:500;
  transition:all .14s;box-shadow:var(--sh-1);
}
.tabs a:hover{border-color:var(--brand);color:var(--brand);text-decoration:none;transform:translateY(-1px)}
.tabs a.on{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;color:#fff;box-shadow:var(--sh-2)}
.tabs a .cnt{font-weight:700;font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;padding:2px 9px;border-radius:999px;font-size:12px;
  font-weight:600;background:var(--hover);color:var(--muted);border:1px solid transparent}
.pill.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.pill.err{background:var(--err-bg);color:var(--err);border-color:var(--err-line)}
.pill.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}

/* ── 表单 ─────────────────────────────────────────── */
/* 用「排除法」而不是逐个列举类型 —— 之前漏了 input[type=email]，
   结果登录页的邮箱框完全没吃到样式，比密码框窄一大截。

   **外面必须套 :where()。** 裸写 :not([type=x]) 时，括号里的属性选择器
   会计入特异性 —— 五个 :not() 就是 (0,5,1)，直接压过 .field-group input (0,1,1)，
   把登录页那套连体输入框的样式全盖掉（表现为两个独立的框，不是苹果那种一体的）。
   :where() 的特异性恒为 0，套上之后整条规则降回普通元素选择器 (0,0,1)，
   任何带类名的规则都能正常覆盖它。这个坑踩过一次。 */
input:where(:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden])){
  padding:10px 13px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:15px;
  background:var(--card);color:var(--ink);width:100%;font-family:inherit;transition:border-color .14s,box-shadow .14s;
}
select{
  padding:10px 13px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:15px;
  background:var(--card);color:var(--ink);font-family:inherit;max-width:100%;
}
select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
input::placeholder{color:var(--muted)}
button{
  padding:10px 18px;border:0;border-radius:var(--r-sm);font-size:14.5px;font-weight:600;cursor:pointer;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--on-brand);box-shadow:var(--sh-1);
  transition:transform .12s,box-shadow .12s,opacity .12s;font-family:inherit;white-space:nowrap;
}
button:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
button:active{transform:translateY(0)}
button:disabled{opacity:.55;cursor:not-allowed;transform:none}
button.ghost{background:var(--card);color:var(--ink-2);border:1px solid var(--line);box-shadow:none;font-weight:500}
button.ghost:hover{border-color:var(--brand);color:var(--brand)}
button.tiny{padding:5px 11px;font-size:12.5px}
form.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
form.row .grow{flex:1;min-width:220px}

/* ── 提示条 ───────────────────────────────────────── */
.banner{padding:13px 15px;border-radius:var(--r-sm);margin-bottom:14px;font-size:14px;border:1px solid transparent;line-height:1.6}
.banner.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.banner.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.banner.err{background:var(--err-bg);color:var(--err);border-color:var(--err-line)}
.banner a{color:inherit;text-decoration:underline}

/* ── 扫码页 ───────────────────────────────────────── */
.scanbox{
  font-size:27px !important;padding:22px 20px !important;text-align:center;letter-spacing:1.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600;
  border-width:2px !important;border-radius:var(--r) !important;
}
.scanbox::placeholder{font-size:17px;letter-spacing:0;font-weight:400;font-family:inherit}
.scanbox:focus{box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 15%,transparent) !important}
#feedback{
  margin-top:16px;border-radius:var(--r);padding:26px 20px;text-align:center;min-height:112px;
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  background:var(--hover);color:var(--muted);border:1px solid var(--line);
  transition:background .2s,color .2s,border-color .2s;
}
#feedback.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
#feedback.err{background:var(--err-bg);color:var(--err);border-color:var(--err-line)}
#feedback.dup{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
#feedback .big{font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
#feedback .small{font-size:14.5px;opacity:.92}
@keyframes pop{0%{transform:scale(.96);opacity:.4}100%{transform:scale(1);opacity:1}}
#feedback.hit{animation:pop .22s ease-out}
@keyframes slidein{from{background:var(--brand-soft)}to{background:transparent}}
tr.fresh{animation:slidein 1.1s ease-out}

/* ── 进度条 ───────────────────────────────────────── */
.progress{background:var(--hover);border-radius:999px;height:9px;overflow:hidden}
.progress > div{background:linear-gradient(90deg,var(--brand),var(--brand-2));height:100%;width:0;transition:width .2s;border-radius:999px}

/* ── 登录 / 注册 / 找回密码 ────────────────────────────
   照苹果登录页：没有 logo、没有卡片、没有阴影、没有渐变。
   一个大号粗体标题 + 一个圆角输入框 + 框内一个圆形箭头，其余全是留白。
   ──────────────────────────────────────────────────── */
/* 登录/注册/找回：**强制浅色**，不跟随系统也不跟随主题。
   理由：这几个页面在登录之前，服务端还不知道用户的主题偏好；
   而且用户明确要求白色。整套 token 就地覆盖，比逐条改样式干净。 */
/* 布局部分：登录页和提示页（403 / 到期）共用 */
body.login,body.notice{
  display:grid;place-items:center;min-height:100vh;padding:40px 24px;
  background:var(--card);color:var(--ink);
}

/* **只有登录/注册/找回**强制浅色：登录前服务端不知道用户偏好，且用户要白色。
   403 / 到期页是给已登录的人看的 —— 那些页面要跟随他选的主题，
   不然深色主题下撞到一个雪白的 403，很像系统出错了。 */
body.login{
  color-scheme:light;
  --bg:#ffffff; --card:#ffffff; --sidebar:#ffffff;
  --ink:#1a1a1c; --ink-2:#43454d; --muted:#6a6d78;
  --line:#e6e7ea; --field-line:#8b8e98; --hover:#f4f5f7;
  --brand:#2563eb; --brand-2:#4f46e5; --brand-soft:#eff4ff; --on-brand:#ffffff;
  --err:#c0203f; --err-bg:#fff1f3; --err-line:#f8ccd5;
  --sh-1:0 1px 2px rgba(15,23,42,.05);
  --sh-2:0 4px 16px -4px rgba(15,23,42,.10);
  --sh-3:0 12px 32px -8px rgba(15,23,42,.16);
  background:#ffffff;
}
body.login .card,body.notice .card{
  width:min(420px,100%);margin:0;padding:0;text-align:center;
  background:none;border:0;box-shadow:none;border-radius:0;
}
body.login .brand-mark,body.notice .brand-mark{display:none}      /* 标题本身就是标识，不再要图标 */

body.login h1,body.notice h1{
  font-size:30px;font-weight:700;letter-spacing:-.028em;line-height:1.25;
  margin:0;color:var(--ink);
}
body.login h1 + .muted,body.notice h1 + .muted{margin:12px 0 0;font-size:14.5px}

/* 输入框组：连成一体，中间发丝线 */
body.login form,body.notice form{margin-top:44px;text-align:left}
.field-group{
  border:1px solid var(--field-line);
  border-radius:14px;overflow:hidden;background:transparent;
  transition:border-color .15s,box-shadow .15s;
}
.field-group:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 1px var(--brand);      /* 苹果聚焦时边框变粗变蓝 */
}
.field-group input{
  width:100%;height:60px;padding:0 18px;font-size:16px;
  border:0;border-radius:0;background:transparent;color:var(--ink);
  box-shadow:none;outline:none;margin:0;
}
.field-group input:focus{box-shadow:none;outline:none;border:0}
.field-group input::placeholder{color:var(--muted)}
.field-group .field-row + .field-row,
.field-group input + input{border-top:1px solid var(--field-line)}
.field-group .field-row{position:relative}
.field-group .field-row input{padding-right:62px}

/* 框内的圆形箭头 —— 苹果是灰边圆圈，不是实心蓝按钮 */
.go{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;padding:0;border-radius:50%;flex:none;
  background:transparent;color:var(--muted);box-shadow:none;
  border:1px solid var(--field-line);
  display:grid;place-items:center;
}
.go:hover{transform:translateY(-50%);border-color:var(--brand);color:var(--brand);box-shadow:none}
.go:active{transform:translateY(-50%) scale(.93)}

/* 多字段页面（注册 / 找回）：同样的圆角高度，平铺 */
body.login form.stack,body.notice form.stack{display:flex;flex-direction:column;gap:12px}
body.login form.stack input,body.notice form.stack input{
  height:56px;padding:0 18px;font-size:16px;border-radius:14px;margin:0;text-align:left;
  border:1px solid var(--field-line);background:transparent;
}
body.login form.stack input:focus,body.notice form.stack input:focus{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
body.login form.stack > button[type=submit],body.notice form.stack > button[type=submit]{
  width:100%;height:56px;margin-top:8px;font-size:16px;font-weight:500;border-radius:14px;
  background:var(--brand);box-shadow:none;
}
body.login form.stack > button[type=submit]:hover,body.notice form.stack > button[type=submit]:hover{opacity:.88;transform:none;box-shadow:none}

/* 底部：只有蓝色文字链接，没有第二个大按钮 */
body.login .links,body.notice .links{margin-top:52px;font-size:15px;line-height:2.2}
body.login .links a,body.notice .links a{color:var(--brand);text-decoration:none}
body.login .links a:hover,body.notice .links a:hover{text-decoration:underline}
body.login .foot,body.notice .foot{margin:34px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted)}
body.login .err,body.notice .err{margin:18px 0 0;font-size:14px}

/* 403 / 到期页 */
body.login .card > p > a > button,body.notice .card > p > a > button{
  width:100%;height:52px;border-radius:14px;background:var(--brand);box-shadow:none;margin-top:24px;
}

/* ── 响应式：窄屏收成图标栏，手机变顶部抽屉 ───────── */
@media (max-width:1100px){
  :root{--sidebar-w:64px}
  .brand span,.brand small,.nav-item span,.nav-label,.sidebar-foot span{display:none}
  .brand{justify-content:center;padding:20px 0}
  .nav-item{justify-content:center;padding:11px 0;margin:2px 6px}
  .nav-badge{position:absolute;top:3px;right:6px;margin:0;min-width:16px;padding:0 5px;font-size:10px}
  .sidebar-foot{text-align:center;padding:12px 0}
  .who{justify-content:center;gap:6px;margin-bottom:0}
  .who .logout{margin-left:0}
}
@media (max-width:720px){
  :root{--sidebar-w:0px}
  .sidebar{position:fixed;left:0;top:0;width:230px;flex-basis:230px;
    transform:translateX(-100%);transition:transform .22s;box-shadow:var(--sh-3)}
  .sidebar.open{transform:none}
  .brand span,.brand small,.nav-item span,.nav-label,.sidebar-foot span{display:inline}
  .brand{justify-content:flex-start;padding:20px 18px}
  .nav-item{justify-content:flex-start;padding:9px 12px;margin-bottom:2px}
  .nav-badge{position:static;margin-left:auto;min-width:20px;padding:1px 7px;font-size:11.5px}
  .menu-btn{display:grid;place-items:center}
  main{padding:18px 16px 40px}
  .topbar{padding:0 16px}
  .stat .n{font-size:26px}
  .topbar .sub{display:none}
  .topbar h1{font-size:16px}
  th,td{padding:9px 11px}
  td.small{white-space:nowrap}
  .card-head{flex-wrap:wrap;gap:4px}
  .card-head .muted{margin-left:0;flex-basis:100%}
  .scanbox{font-size:21px !important;letter-spacing:1px}
  #feedback .big{font-size:22px}
}

/* ── 批量导入运单号（扫码页）─────────────────────── */
.dropzone{
  border:2px dashed var(--line);border-radius:var(--r);padding:26px 18px;text-align:center;
  color:var(--muted);transition:border-color .16s,background .16s,transform .16s;cursor:default;
  display:flex;flex-direction:column;align-items:center;gap:5px;outline:none;
}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--brand);background:var(--brand-soft)}
.dropzone.over{border-color:var(--brand);background:var(--brand-soft);transform:scale(1.008)}
.dropzone svg{opacity:.55;margin-bottom:2px}
.dropzone.over svg{opacity:1;color:var(--brand)}
.dz-title{font-size:15.5px;font-weight:600;color:var(--ink)}
.dz-sub{font-size:13px}
.pastebox{
  width:100%;margin-top:12px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink);font-size:14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  resize:vertical;transition:border-color .14s,box-shadow .14s;
}
.pastebox:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.pastebox::placeholder{font-family:inherit;color:var(--muted)}

/* 统计卡可点击：整卡是链接 */
a.stat{display:block;color:inherit;text-decoration:none}
a.stat:hover{text-decoration:none;border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
a.stat:active{transform:translateY(0)}
a.stat.current{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent),var(--sh-1)}
a.stat.current .l{color:var(--brand-ink);font-weight:650}


/* ── 平台控制台：跨租户视图，左侧子导航 + 内容区 ───── */
body.console{padding:0;display:block;background:var(--bg);color:var(--ink);min-height:100vh}
.console-shell{display:flex;min-height:100vh}

.console-nav{
  width:216px;flex:none;background:var(--sidebar);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:20px 0;
}
.console-brand{padding:0 18px 16px;border-bottom:1px solid var(--line);margin-bottom:12px}
.console-brand b{display:block;font-size:15px;letter-spacing:-.01em}
.console-brand small{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.console-nav nav{flex:1;padding:0 8px}
.cn-item{
  display:block;padding:9px 12px;margin-bottom:2px;border-radius:var(--r-sm);
  text-decoration:none;color:var(--ink-2);transition:background .14s,color .14s;
}
.cn-item:hover{background:var(--hover);color:var(--ink);text-decoration:none}
.cn-item.on{background:var(--brand-soft);color:var(--brand-ink)}
.cn-item b{display:block;font-size:14px;font-weight:550}
.cn-item small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.cn-item.on small{color:var(--brand-ink);opacity:.75}
.console-foot{padding:14px 18px 0;border-top:1px solid var(--line);display:flex;
  flex-direction:column;gap:8px;font-size:12.5px}
.console-foot a{color:var(--muted);text-decoration:none}
.console-foot a:hover{color:var(--brand)}

.console-main{flex:1;min-width:0;padding:26px 28px 60px;max-width:1200px}
.console-head{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
.console-head h1{font-size:20px;margin:0;flex:1;letter-spacing:-.015em}
body.console h2{font-size:14.5px;font-weight:650;margin:24px 0 10px}
body.console h2:first-of-type{margin-top:0}
body.console input[type=number]{text-align:center}

@media (max-width:820px){
  .console-shell{flex-direction:column}
  .console-nav{width:auto;border-right:0;border-bottom:1px solid var(--line);padding:14px 0}
  .console-nav nav{display:flex;gap:6px;overflow-x:auto;padding:0 12px}
  .cn-item{white-space:nowrap}
  .cn-item small{display:none}
  .console-foot{flex-direction:row;padding:12px 18px 0}
  .console-main{padding:18px 16px 50px}
}

body.console table.inner{background:transparent}
body.console table.inner th{font-size:11.5px;padding:4px 8px}
body.console table.inner td{padding:5px 8px;border-bottom:0}
body.console .subrow>td{background:var(--hover)}

/* 验证码输入行：输入框 + 发送按钮并排 */
.codefield{display:flex;gap:10px}
.codefield input{margin:0;flex:1;min-width:0}
.codefield button{flex:none;width:auto;height:56px;padding:0 18px;font-size:14px;
  white-space:nowrap;border-radius:14px}
.codehint{margin:2px 0 0;min-height:17px;text-align:left;padding-left:2px}

/* ── 主题选择器 ───────────────────────────────────── */
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.theme-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;
  padding:14px;border-radius:var(--r-sm);cursor:pointer;
  background:var(--card);border:1px solid var(--line);color:var(--ink);
  box-shadow:none;font-weight:400;white-space:normal;
  transition:border-color .15s,transform .12s;
}
.theme-card:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:var(--sh-1)}
.theme-card.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.theme-card b{font-size:14px;font-weight:600}
.theme-card small{font-size:11.5px;color:var(--muted);line-height:1.5}
/* 色卡：三块色 = 卡片底 / 页面底 / 强调色，一眼看出这套配色长什么样 */
.theme-card .swatch{display:flex;width:100%;height:34px;border-radius:7px;overflow:hidden;
  border:1px solid var(--line)}
.theme-card .swatch i{flex:1;display:block}

/* 扫码输入行：输入框 + 录入按钮 */
.scanrow{display:flex;gap:10px;align-items:stretch}
.scanrow .scanbox{flex:1;min-width:0}
.scanrow button{flex:none;padding:0 22px;font-size:15px}
#scanhint{margin-top:8px;min-height:18px}
#scanhint.warn{color:var(--warn);font-weight:500}