/* 数字商品成交系统 — 界面样式 v2 (手机优先 / 单文件 / 无框架无字体下载)
   速度预算：一个 CSS 文件、系统字体、只用 transform/opacity、一个阴影令牌。 */

:root{
  /* 中性色 */
  --bg:#f3f5f8;--surface:#fff;--surface-2:#f7f9fc;
  --border:#e4e8ee;--border-strong:#cfd6e0;
  --ink:#1a2432;--ink-2:#44505f;--muted:#67707e;
  --topbar:#0f1826;
  /* 主色：沉稳钢蓝（白字约 5.6:1） */
  --primary:#1b6ca8;--primary-strong:#155a8e;--primary-active:#124d78;
  --primary-50:#eef4fa;--primary-100:#dbe8f4;
  /* 金额 / 成功：填充色 与 可作正文的深色 分开 */
  --success:#127a42;--success-ink:#0f6b3a;--success-50:#e8f5ec;
  /* 危险：只用于真正的错误 / 删除 */
  --danger:#c62f37;--danger-ink:#a3232b;--danger-50:#fdecec;
  /* 警告：低库存 */
  --warn-ink:#9a6410;--warn-50:#fbf3e2;
  /* 圆角 */
  --radius-sm:8px;--radius:10px;--radius-lg:14px;--radius-pill:999px;
  /* 间距（4px 节奏） */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  /* 阴影 + 焦点环（廉价合成，blur<=8） */
  --shadow-1:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --shadow-2:0 4px 6px rgba(16,24,40,.06),0 8px 16px rgba(16,24,40,.08);
  --ring:0 0 0 3px rgba(27,108,168,.35);
  /* 字号 */
  --fs-xs:12px;--fs-sm:13px;--fs-base:15px;--fs-lg:18px;--fs-xl:22px;--fs-2xl:28px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 var(--fs-base)/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Microsoft YaHei',Arial,sans-serif;
  color:var(--ink);background:var(--bg);font-synthesis:none;-webkit-font-smoothing:antialiased}
/* 金额与数字统一等宽等高，成列不抖动 */
.num,.metric,.amount,.badge,.stock-box,.table td,.table th,input,.amount-field{
  font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
a{color:var(--primary)}
h2{font-size:var(--fs-xl);font-weight:700;margin:0 0 var(--sp-4)}
h3{font-size:var(--fs-lg);font-weight:700;margin:0 0 var(--sp-3)}
p{margin:var(--sp-3) 0}

/* 顶栏 */
.topbar{height:56px;background:var(--topbar);color:#fff;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--sp-4);position:sticky;top:0;z-index:20;box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}
.brand{font-weight:700;letter-spacing:.2px}
.user{font-size:var(--fs-sm);color:#c7cfdb}
.user a{color:#fff;margin-left:var(--sp-3);text-decoration:none;opacity:.9}
.user a:hover{opacity:1;text-decoration:underline}

/* 布局 + 侧栏 */
.layout{display:flex;align-items:flex-start}
.sidebar{width:210px;flex:none;background:var(--surface);min-height:calc(100vh - 56px);border-right:1px solid var(--border);
  padding:var(--sp-3);position:sticky;top:56px}
.sidebar a{display:block;padding:11px var(--sp-3);margin:var(--sp-1) 0;color:var(--ink-2);text-decoration:none;
  border-radius:var(--radius-sm);border-left:3px solid transparent;font-size:var(--fs-base)}
.sidebar a:hover{background:var(--primary-50);color:var(--primary-strong)}
.sidebar a[aria-current=page]{background:var(--primary-50);color:var(--primary-strong);border-left-color:var(--primary);font-weight:700}
.main{flex:1;min-width:0;padding:var(--sp-5)}

/* 底部导航（客服端，仅手机显示） */
.bottomnav{display:none}

/* 卡片 + 指标 */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-5);
  margin-bottom:var(--sp-4);box-shadow:var(--shadow-1)}
a.card{display:block;text-decoration:none;color:inherit;transition:transform .12s ease,box-shadow .12s ease}
a.card:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.metric{font-size:var(--fs-2xl);font-weight:700;margin-top:var(--sp-1);color:var(--ink)}
.metric.money{color:var(--success-ink)}
.muted{color:var(--muted);font-size:var(--fs-sm)}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 var(--sp-4);
  border:0;background:var(--primary);color:#fff;border-radius:var(--radius-sm);text-decoration:none;cursor:pointer;
  font-size:var(--fs-base);font-weight:700;line-height:1.2;transition:background .12s ease,transform .06s ease}
.btn:hover{background:var(--primary-strong)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.btn.small{min-height:36px;padding:0 var(--sp-3);font-size:var(--fs-sm)}
.btn.block{display:flex;width:100%}
.btn.lg{min-height:56px;font-size:var(--fs-lg)}
.btn.green{background:var(--success)}
.btn.green:hover{background:var(--success-ink)}
.btn.red{background:var(--danger)}
.btn.red:hover{background:var(--danger-ink)}
.btn.gray{background:var(--surface);color:var(--ink-2);border:1px solid var(--border-strong)}
.btn.gray:hover{background:var(--surface-2)}

/* 表单 */
label{display:block;margin:var(--sp-3) 0 var(--sp-1);font-weight:400;font-size:var(--fs-sm);color:var(--ink-2)}
input,select,textarea{width:100%;min-height:44px;padding:10px var(--sp-3);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:16px;font-family:inherit}
textarea{min-height:96px;line-height:1.6}
/* 复选框/单选框不受上面的整宽·大高度规则影响 */
input[type=checkbox],input[type=radio]{width:auto;min-height:0;height:auto;padding:0;accent-color:var(--primary)}
.table input[type=checkbox]{width:20px;height:20px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
/* 兼容旧 X5/微信 内核：无 :focus-visible 时退回 :focus */
input:focus,select:focus,textarea:focus{border-color:var(--primary)}
a:focus-visible,.btn:focus-visible,summary:focus-visible,.sidebar a:focus-visible,.bottomnav a:focus-visible{outline:none;box-shadow:var(--ring)}
.form-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}

/* 成交金额字段（提货页主控件） */
.amount-wrap{display:flex;align-items:center;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--radius);padding:0 var(--sp-4);min-height:56px}
.amount-wrap:focus-within{border-color:var(--primary);box-shadow:var(--ring)}
.amount-cur{font-size:var(--fs-xl);font-weight:700;color:var(--muted)}
.amount-field{flex:1;min-height:54px;border:0;background:transparent;padding:0 0 0 var(--sp-2);
  font-size:var(--fs-2xl);font-weight:700;color:var(--ink)}
.amount-field:focus{border:0}
.amount-field:focus-visible{outline:none;box-shadow:none}

/* 折叠区（更多信息） */
.disclosure{border:1px solid var(--border);border-radius:var(--radius);margin-top:var(--sp-4);background:var(--surface);overflow:hidden}
.disclosure>summary{list-style:none;min-height:44px;display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);cursor:pointer;font-weight:700;color:var(--ink-2)}
.disclosure>summary::-webkit-details-marker{display:none}
.disclosure>summary::before{content:"\25B8";color:var(--muted);display:inline-block;transition:transform .12s ease}
.disclosure[open]>summary::before{transform:rotate(90deg)}
.disclosure-body{padding:0 var(--sp-4) var(--sp-4)}

/* 表格 */
.table{width:100%;border-collapse:collapse;background:var(--surface)}
.table th,.table td{border-bottom:1px solid var(--border);padding:var(--sp-3);text-align:left;vertical-align:top}
.table th{background:var(--surface-2);font-weight:700;color:var(--ink-2);white-space:nowrap}
.table tr:last-child td{border-bottom:0}
.table .amt{text-align:right;white-space:nowrap}
.table tr.total td{font-weight:700;background:var(--surface-2)}

/* 提示条 */
.alert{position:relative;padding:var(--sp-3) 40px var(--sp-3) var(--sp-4);border-radius:var(--radius);margin-bottom:var(--sp-4);
  font-size:var(--fs-base);border:1px solid transparent}
.alert.success{background:var(--success-50);color:var(--success-ink);border-color:#c9e7d3}
.alert.error{background:var(--danger-50);color:var(--danger-ink);border-color:#f4cdcf}
.alert-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);height:32px;width:32px;padding:0;line-height:1;
  background:transparent;border:0;color:inherit;font-size:20px;cursor:pointer;opacity:.6}
.alert-x:hover{opacity:1}

/* 徽章 / 状态 */
.badge{display:inline-block;padding:3px var(--sp-2);border-radius:var(--radius-pill);font-size:var(--fs-xs);line-height:1.5;
  background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border);margin:2px 2px 2px 0}
.badge.success{background:var(--success-50);color:var(--success-ink);border-color:transparent}
.badge.danger{background:var(--danger-50);color:var(--danger-ink);border-color:transparent}
.badge.warn{background:var(--warn-50);color:var(--warn-ink);border-color:transparent}
.badge.muted{background:var(--surface-2);color:var(--muted)}
.badge.primary{background:var(--primary-50);color:var(--primary-strong);border-color:transparent}

/* 杂项 */
.actions{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.search{display:flex;gap:var(--sp-3);align-items:end;flex-wrap:wrap}
.search label{margin-top:0}
.search .btn{align-self:end}
.login{max-width:420px;margin:8vh auto}
.amount{color:var(--success-ink);font-weight:700}
.stock-box{white-space:pre-wrap;word-break:break-all;background:#0f1826;color:#eef2f7;border-radius:var(--radius);
  padding:var(--sp-3);line-height:1.6;font-size:16px}
.hint{color:var(--muted);font-size:var(--fs-sm);margin-top:var(--sp-2)}
.cta-row{margin:var(--sp-4) 0}
.empty{color:var(--muted);text-align:center;padding:var(--sp-5)}

/* 大屏看板 */
.board{max-width:760px;margin:0 auto;padding:var(--sp-4)}
.board .rank{font-weight:700;color:var(--ink)}
.board table{width:100%;border-collapse:collapse}
.board th,.board td{padding:var(--sp-3);border-bottom:1px solid var(--border);text-align:left}
.board tr:last-child td{border-bottom:0}
.board .total td{font-weight:700;background:var(--surface-2)}
.board .amt{text-align:right}

/* ============ 手机端 ============ */
@media(max-width:800px){
  .layout{display:block}
  .main{padding:var(--sp-3)}
  .card{padding:var(--sp-4)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-row{grid-template-columns:1fr}
  /* 宽表在自己的卡片里横向滚动，页面主体不再左右乱滑 */
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table{min-width:560px;font-size:var(--fs-sm)}
  .table .actions{flex-direction:column}
  .table .actions .btn{display:flex;width:100%;margin:var(--sp-1) 0}
  /* 管理端：侧栏变成吸顶横向条 */
  .sidebar{width:auto;min-height:auto;position:sticky;top:56px;z-index:15;display:flex;gap:var(--sp-1);
    overflow-x:auto;border-right:0;border-bottom:1px solid var(--border);padding:var(--sp-2)}
  .sidebar a{white-space:nowrap;border-left:0;border-bottom:3px solid transparent;margin:0;padding:10px var(--sp-3)}
  .sidebar a[aria-current=page]{border-left:0;border-bottom-color:var(--primary)}
  /* 客服端：隐藏侧栏，改用底部标签栏，主操作永远一指可达 */
  body.role-worker .layout{display:block}
  body.role-worker .sidebar{display:none}
  body.role-worker .main{padding-bottom:78px}
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);
    border-top:1px solid var(--border);box-shadow:0 -1px 3px rgba(16,24,40,.06);padding-bottom:env(safe-area-inset-bottom)}
  .bottomnav a{flex:1;min-height:56px;display:flex;align-items:center;justify-content:center;text-align:center;
    color:var(--muted);text-decoration:none;font-size:var(--fs-sm);font-weight:700}
  .bottomnav a[aria-current=page]{color:var(--primary-strong)}
  .bottomnav a.bn-cta{color:#fff;background:var(--success);margin:6px;border-radius:var(--radius-sm)}
}

/* 尊重系统“减少动态效果”设置 */
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}