/* 一桌好菜 · 暗色固定主题
   色值只在这里定义，模板里只用 var(--x)，禁止硬编码同类色。 */
:root{
  --canvas:#0B0F14;
  --surface:#121A23;
  --raised:#1A2431;
  --line:#26313F;
  --line-soft:#1E2833;
  --fg:#E7EEF6;
  --fg-soft:#AAB8C7;
  --muted:#77869A;
  --accent:#2E9BF0;
  --accent-dim:#1D5F94;
  --good:#2FBF71;
  --warn:#E0A63A;
  --bad:#E0596B;
  --radius:12px;
  --tab-h:60px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--canvas);color:var(--fg);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
#app{min-height:100%}
.boot{display:flex;align-items:center;justify-content:center;height:100vh;color:var(--muted)}

/* ---------- 布局 ---------- */
.shell{display:flex;flex-direction:column;min-height:100vh}
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  height:54px;padding:0 14px;background:rgba(11,15,20,.92);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line-soft);
  padding-top:env(safe-area-inset-top);
}
.topbar h1{font-size:16px;font-weight:600;margin:0;flex:1;letter-spacing:.3px}
.topbar .back{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;
  background:var(--raised);color:var(--fg-soft);border:1px solid var(--line);cursor:pointer;font-size:16px}
.content{flex:1;padding:14px 14px calc(var(--tab-h) + 28px);max-width:1080px;width:100%;margin:0 auto}
.content.no-tab{padding-bottom:28px}

/* ---------- 底部导航 ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  height:calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(18,26,35,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);
}
.tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);text-decoration:none;font-size:11px;letter-spacing:.2px;
}
.tabbar a.on{color:var(--accent)}
.tabbar .ico{font-size:18px;line-height:1}

/* ---------- 卡片 / 通用 ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px}
.card.tight{padding:0;overflow:hidden}
.card-h{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.card-h h2{font-size:13px;font-weight:600;margin:0;flex:1;color:var(--fg-soft);letter-spacing:.4px}
.sec-title{font-size:12px;color:var(--muted);margin:18px 0 8px;letter-spacing:.5px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--line);
  background:var(--raised);color:var(--fg);font-size:14px;font-weight:500;
  cursor:pointer;white-space:nowrap;font-family:inherit;
}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#04121D;font-weight:600}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad);border-color:#3A2430}
.btn.sm{height:32px;padding:0 11px;font-size:12.5px;border-radius:8px}
.btn.block{width:100%}
.btn:disabled{opacity:.45;pointer-events:none}
.row{display:flex;gap:8px;align-items:center}
.row.wrap{flex-wrap:wrap}
.spacer{flex:1}

/* 表单 */
.field{margin-bottom:12px}
.field > label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;letter-spacing:.3px}
.field .req{color:var(--bad);margin-left:2px}
input,select,textarea{
  width:100%;height:42px;padding:0 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--canvas);color:var(--fg);
  font-size:15px;font-family:inherit;outline:none;
}
textarea{height:auto;min-height:64px;padding:10px 12px;line-height:1.5;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent-dim);box-shadow:0 0 0 3px rgba(46,155,240,.12)}
input::placeholder{color:#4E5C6D}
select{appearance:none;background-image:none}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}

/* 指标 */
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 13px}
.kpi .k{font-size:11.5px;color:var(--muted);letter-spacing:.3px}
.kpi .v{font-size:21px;font-weight:600;margin-top:5px;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.kpi .v small{font-size:12px;font-weight:400;color:var(--muted);margin-left:3px}
.kpi.warn .v{color:var(--warn)}
.kpi.bad .v{color:var(--bad)}
.kpi.good .v{color:var(--good)}

/* 列表 */
.list{display:flex;flex-direction:column}
.item{
  display:flex;gap:10px;align-items:center;padding:12px 14px;
  border-bottom:1px solid var(--line-soft);
}
.item:last-child{border-bottom:none}
.item .main{flex:1;min-width:0}
.item .t1{font-size:14.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .t2{font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .amt{font-size:15px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tap{cursor:pointer}
.tap:active{background:var(--raised)}

/* 表格 */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
table.tbl th,table.tbl td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line-soft);white-space:nowrap}
table.tbl th{color:var(--muted);font-weight:500;font-size:11.5px;letter-spacing:.3px;background:var(--surface);position:sticky;top:0}
table.tbl td.num,table.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
table.tbl tbody tr:active{background:var(--raised)}
/* 手机端紧凑表：不强制最小宽度，允许产品名换行，四列也能看全 */
table.tbl.compact{min-width:0;font-size:12.5px}
table.tbl.compact th,table.tbl.compact td{padding:9px 6px;white-space:normal}
table.tbl.compact th:first-child,table.tbl.compact td:first-child{padding-left:2px}
table.tbl.compact th:last-child,table.tbl.compact td:last-child{padding-right:2px}

/* 徽章 */
.badge{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;
  font-size:11px;font-weight:500;letter-spacing:.2px;white-space:nowrap}
.badge.b-blue{background:#0C2C44;color:#7CC4F5;border:1px solid #17496B}
.badge.b-green{background:#0D2C1E;color:#6ED9A0;border:1px solid #1B4F35}
.badge.b-amber{background:#33260C;color:#E8BE6E;border:1px solid #5C451A}
.badge.b-red{background:#331A1E;color:#EFA0AA;border:1px solid #5C2A31}
.badge.b-gray{background:#1B2431;color:#98A6B6;border:1px solid #2C3847}

/* 空态 */
.empty{text-align:center;padding:44px 16px;color:var(--muted)}
.empty .e1{font-size:30px;opacity:.35;margin-bottom:8px}
.empty .e2{font-size:13px}

/* 提示条 */
.hint{display:flex;gap:8px;padding:10px 12px;border-radius:10px;background:#0C2C44;
  border:1px solid #17496B;color:#9ACDF0;font-size:12.5px;line-height:1.55;margin-bottom:12px}
.hint.warn{background:#33260C;border-color:#5C451A;color:#EBC98A}
.hint.bad{background:#331A1E;border-color:#5C2A31;color:#EFA8B2}
.hint.ok{background:#0D2C1E;border-color:#1B4F35;color:#8CE0B0}

/* 弹层
   🔴 高度一律走 --app-vh（由 app.js 写入 window.innerHeight 实测值）。
   移动端浏览器地址栏未收纳时 100vh 会大于可视区，直接用 vh 会让底部弹窗落到屏幕外。 */
.mask{position:fixed;top:0;left:0;right:0;height:100vh;height:var(--app-vh,100vh);
  z-index:50;background:rgba(0,0,0,.62);display:flex;align-items:flex-end;justify-content:center}
.mask.center{align-items:center}
/* 弹窗打开时锁住背景滚动，否则手指一划页面跟着跑、弹窗纹丝不动 */
body:has(.mask){overflow:hidden}
.sheet{
  width:100%;max-width:560px;
  max-height:92vh;max-height:calc(var(--app-vh,92vh) - 16px);
  overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:var(--surface);border-radius:18px 18px 0 0;
  border-top:1px solid var(--line);padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  animation:up .22s ease-out;
}
.mask.center .sheet{border-radius:16px;border:1px solid var(--line);max-width:440px}
/* 宽屏（平板横屏 / 桌面）：弹窗居中，四边留 24px。
   🔴 贴底只适合手机；桌面窗口高度大，贴底会挤在窗口最下面、上方大片空白，
      看起来像「只露出下半截」，而内容完整时又滚不动，更像卡死。
   🔴 必须放在 .sheet 主定义【之后】，否则 max-height 会被上面的 -16px 覆盖。 */
@media (min-width:768px){
  .mask{align-items:center;padding:24px 16px}
  .mask .sheet{border-radius:18px;border:1px solid var(--line);
    max-height:calc(var(--app-vh,100vh) - 48px)}
}
@keyframes up{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}
.sheet-h{display:flex;align-items:center;margin-bottom:14px}
.sheet-h h3{font-size:15px;font-weight:600;margin:0;flex:1}
.sheet-h .x{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;
  background:var(--raised);color:var(--fg-soft);border:1px solid var(--line);cursor:pointer}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 22px);transform:translateX(-50%);
  z-index:80;background:#1E2A38;color:var(--fg);border:1px solid var(--line);
  padding:10px 16px;border-radius:10px;font-size:13px;max-width:86vw;text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4)}
.toast.bad{border-color:#5C2A31;color:#EFA8B2}

/* 登录 */
.login{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 24px 60px;max-width:420px;margin:0 auto}
.login .brand{text-align:center;margin-bottom:26px}
.login .brand .t{font-size:23px;font-weight:600;letter-spacing:1px}
.login .brand .s{font-size:12px;color:var(--muted);margin-top:6px;letter-spacing:2px}
.login .tabs{display:flex;gap:6px;margin-bottom:18px;background:var(--surface);padding:4px;border-radius:11px;border:1px solid var(--line)}
.login .tabs button{flex:1;height:34px;border:none;background:transparent;color:var(--muted);
  font-size:13.5px;border-radius:8px;cursor:pointer;font-family:inherit}
.login .tabs button.on{background:var(--raised);color:var(--fg)}

/* 对账单纸面（浅色，打印用） */
/* A4 定宽纸面 + 等比缩放：手机上能一眼看全，导出长图按 794px 原尺寸渲染 */
.paper-fit{position:relative;overflow:hidden;border-radius:8px;background:#fff}
.paper-scaler{width:794px;transform-origin:top left;transition:none}
.paper{
  width:794px;box-sizing:border-box;
  background:#fff;color:#1A1A1A;border-radius:8px;padding:22px 20px;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
}
.paper .p-title{font-size:20px;font-weight:700;color:#1F3864;text-align:center;letter-spacing:3px}
.paper .p-brand{font-size:11px;color:#7C8A99;text-align:center;letter-spacing:7px;margin-top:5px;font-weight:600}
.paper .p-rule{height:3px;background:#2E5C8A;margin:8px 0 12px}
.paper .p-meta{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:3px 8px;font-size:11px;align-items:center}
.paper .p-meta .lab{color:#6E7B8B;font-weight:700;white-space:nowrap}
.paper .p-meta .val{color:#1A1A1A}
.paper .p-meta .val.big{font-size:13px;font-weight:700}
.paper table{width:100%;border-collapse:collapse;font-size:10.5px;margin-top:10px;table-layout:fixed}
.paper table th{background:#2E5C8A;color:#fff;font-weight:700;padding:6px 4px;text-align:center;border:1px solid #fff;font-size:10px;line-height:1.25}
.paper table td{padding:5px 4px;border:1px solid #C9D3DF;vertical-align:middle}
.paper table td.c{text-align:center}
.paper table td.r{text-align:right;font-variant-numeric:tabular-nums}
.paper table td.sub{color:#6E7B8B}
.paper table tr:nth-child(even) td{background:#F7F9FC}
.paper table tr.total td{background:#E8EEF6;font-weight:700;color:#1F3864}
.paper .settle{margin-top:10px}
.paper .settle .ln{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:8px;
  padding:5px 8px;background:#E8EEF6;font-size:11px;border:1px solid #C9D3DF;border-bottom:none}
.paper .settle .ln.grand{background:#1F3864;color:#fff;font-size:13px;font-weight:700;padding:9px 8px}
.paper .settle .ln.grand .v{font-size:15px}
.paper .settle .ln .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.paper .upper{margin-top:8px;background:#FFF4D6;border:2px solid #1F3864;
  padding:7px;text-align:center;font-size:12px;font-weight:700}
.paper .notes{margin-top:12px;font-size:9.5px;color:#3C4654;line-height:1.7}
.paper .notes .h{font-weight:700;color:#1F3864;font-size:10.5px;margin-bottom:3px}
.paper .sign{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px;font-size:10px;color:#6E7B8B}
.paper .sign .lbl{font-weight:700;margin-bottom:20px}
.paper .sign .ln{border-bottom:1px solid #9AA7B4;height:1px;margin-bottom:4px}
.paper .foot{margin-top:14px;text-align:center;font-size:8.5px;color:#9AA7B4}
.paper .qr{display:flex;gap:12px;align-items:center;justify-content:flex-end;margin-top:10px;font-size:10px;color:#3C4654}
.paper .qr img{width:104px;height:104px;object-fit:contain;border:1px solid #C9D3DF;border-radius:4px}

/* 桌面适配 */
@media (min-width:900px){
  .tabbar{display:none}
  .content{padding-bottom:32px}
  .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .side{position:fixed;left:0;top:0;bottom:0;width:200px;border-right:1px solid var(--line);padding:18px 12px;background:var(--surface)}
  .side a{display:block;padding:9px 12px;border-radius:9px;color:var(--fg-soft);text-decoration:none;font-size:13.5px;margin-bottom:3px}
  .side a.on{background:var(--raised);color:var(--fg);font-weight:500}
  .shell{padding-left:200px}
  .topbar{padding-left:18px}
}
@media (max-width:899px){ .side{display:none} }

/* ---------- 全部功能（手机端抽屉，桌面有侧栏故隐藏按钮） ---------- */
.menu-btn{font-size:17px;padding:0 9px;line-height:1}
.drawer-sec{font-size:11.5px;color:var(--faint);margin:2px 0 8px}
.drawer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}
.drawer-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:62px;padding:10px 6px;background:var(--raised);border:1px solid var(--line);
  border-radius:10px;color:var(--fg-soft);font-size:12.5px;text-decoration:none;cursor:pointer;text-align:center;
}
.drawer-item.on{color:var(--accent);border-color:var(--accent-dim);background:#132435}
.drawer-item .ico{font-size:17px;line-height:1}
@media (min-width:900px){ .menu-btn{display:none} }

/* ---------- 备案信息页脚（2026-11-04 加 · 江苏管局硬要求） ---------- */
.sitemeta{
  text-align:center;
  font-size:11.5px;
  line-height:1.9;
  color:var(--muted);
  padding:16px 14px calc(var(--tab-h) + 16px);
}
.sitemeta.no-tab{padding-bottom:16px}
.sitemeta a{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--line)}
.sitemeta a:hover{color:var(--fg-soft)}
.sitemeta .org{display:block}