:root{
    --c-primary-50:#E7F4EF; --c-primary-100:#C7E6DA; --c-primary-300:#6FB89E;
    --c-primary-500:#0E7C5A; --c-primary-600:#0A6248; --c-primary-700:#084E39;
    --c-accent-500:#D98E04; --c-accent-600:#B67403;
    --c-success:#16A34A; --c-warning:#D97706; --c-danger:#DC2626; --c-info:#2563EB;
    --c-ink:#101923; --c-text:#1F2937; --c-sub:#4B5563; --c-muted:#6B7280;
    --c-border:#E5E7EB; --c-border-strong:#D1D5DB;
    --c-bg:#F4F6F8; --c-surface:#FFFFFF; --c-side:#0B3D2E; --c-side-2:#0E4A37;
    --radius:10px; --radius-sm:7px;
    --shadow:0 1px 3px rgba(16,25,35,.08),0 1px 2px rgba(16,25,35,.04);
    --shadow-lg:0 8px 28px rgba(16,25,35,.12);
    --font:"PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --side-w:256px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;height:100%;font-family:var(--font);font-size:14px;line-height:1.6;color:var(--c-text);}
  body{display:flex;background:var(--c-bg)}
  a{color:inherit;text-decoration:none}
  h1,h2,h3,h4{margin:0;font-weight:600}
  ::-webkit-scrollbar{width:8px;height:8px}
  ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}
  #sidebar{width:var(--side-w);flex-shrink:0;background:var(--c-side);color:#EAF6F0;display:flex;flex-direction:column;height:100vh;position:sticky;top:0;overflow-y:auto;box-shadow:2px 0 12px rgba(0,0,0,.12);z-index:40}
  #sidebar .brand{padding:16px 16px 14px;border-bottom:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:10px}
  #sidebar .brand b{display:block;font-size:17px;color:#fff;letter-spacing:.5px}
  #sidebar .brand span{font-size:12px;color:#9FD3C1}
  #sidebar .brand .logo{width:30px;height:30px;border-radius:8px;background:#fff;padding:3px;object-fit:contain;flex-shrink:0}
  #sidebar .brand div{display:flex;flex-direction:column}
  #sidebar .menu{flex:1;padding:14px 14px}
  #sidebar .grp{margin-bottom:8px}
  #sidebar .gt{font-size:15.5px;font-weight:700;color:#8FCBB6;letter-spacing:.4px;padding:8px 12px 7px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none}
  #sidebar .gt:hover{color:#BFE6D6}
  #sidebar .gt .caret{transition:transform .2s ease;display:inline-flex;color:inherit;opacity:.75;transform-origin:center}
  #sidebar .gt .caret svg{display:block}
  #sidebar .gt:hover .caret{opacity:1}
  #sidebar a{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:9px;color:#DCEFE7;font-size:15.5px;line-height:1.6;margin-bottom:4px;transition:.15s}
  #sidebar a:hover,#sidebar a.active{background:var(--c-side-2);color:#fff;font-weight:600}
  #sidebar a .dot{width:7px;height:7px;border-radius:2px;background:var(--c-accent-500);flex-shrink:0}
  #sidebar .sidefoot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:#9FD3C1}
  /* 侧边栏整体隐藏后的「滑出抽屉」：脱离文档流覆盖在内容之上，不再 display:none，主区可真正占满整屏 */
  #sidebar.flyout{position:fixed;top:0;bottom:0;left:0;z-index:60;transform:translateX(-100%);transition:transform .22s ease;box-shadow:3px 0 28px rgba(0,0,0,.28)}
  #sidebar.flyout.show{transform:translateX(0)}
  /* 左缘常驻细触发条：隐藏态下始终可见，悬停即弹出抽屉，移开自动收回；点击则彻底展开 */
  .side-trigger{position:fixed;top:0;bottom:0;left:0;width:16px;z-index:55;background:linear-gradient(180deg,var(--c-side),var(--c-primary-600));opacity:.2;cursor:pointer;transition:opacity .2s}
  .side-trigger:hover{opacity:.92}
  .side-trigger::after{content:"\2630";position:absolute;top:18px;left:1px;color:#fff;font-size:11px}
  #sidebar .org{border:1px solid rgba(255,255,255,.22);border-radius:7px;padding:6px 10px;font-size:12px;color:#fff;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between}
  #main{flex:1;min-width:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
  #main .inner{max-width:1320px;width:100%;margin:0 auto;padding:24px 26px 60px}
  .g-topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--c-border);padding:12px 26px;display:flex;align-items:center;gap:16px}
  .g-topbar .crumb{display:flex;align-items:center;flex-wrap:wrap;gap:2px;color:var(--c-muted);font-size:13px}
  .g-topbar .crumb .ck{display:inline-flex;align-items:center;gap:4px;color:var(--c-sub);transition:.15s}
  .g-topbar .crumb .ck .hi{flex-shrink:0;opacity:.85}
  .g-topbar .crumb .ck.lk{color:var(--c-primary-600);cursor:pointer;text-decoration:none}
  .g-topbar .crumb .ck.lk:hover{color:var(--c-primary-700);text-decoration:underline}
  .g-topbar .crumb .ck:not(.lk){color:var(--c-text);font-weight:600}
  .g-topbar .crumb .sep-i{color:var(--c-border-strong);margin:0 3px;user-select:none;font-weight:700}
  [data-theme="dark"] .g-topbar .crumb .ck.lk{color:#6FB89E}
  [data-theme="dark"] .g-topbar .crumb .ck.lk:hover{color:#9FD3C1}
  .g-topbar .sep{flex:1}
  .g-topbar .search{border:1px solid var(--c-border-strong);border-radius:20px;padding:7px 14px;font-size:13px;background:#fff;min-width:200px;color:var(--c-sub)}
  .g-topbar .av{width:34px;height:34px;border-radius:50%;background:var(--c-primary-100);color:var(--c-primary-700);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
  .g-topbar .hbtn{width:34px;height:34px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--c-sub);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.18s;flex-shrink:0}
  .g-topbar .hbtn:hover{color:var(--c-primary-600);background:var(--c-primary-50);border-color:var(--c-primary-100)}
  .g-topbar .hbtn:active{transform:scale(.94)}
  .g-topbar .hbtn svg{display:block}
  .g-topbar .theme-sel{border:1px solid var(--c-border-strong);border-radius:8px;padding:6px 10px;font-size:12.5px;background:#fff;color:var(--c-text);font-family:inherit;cursor:pointer;flex-shrink:0;transition:.15s}
  .g-topbar .theme-sel:hover{border-color:var(--c-primary-500)}


  .topband{background:linear-gradient(120deg,var(--c-side),var(--c-primary-600));color:#fff;padding:26px 28px;border-radius:14px;box-shadow:var(--shadow-lg);margin-bottom:22px}
  .topband h1{font-size:23px;letter-spacing:.5px}
  .topband p{margin:8px 0 0;color:#CDE7DB;font-size:13px;max-width:880px}
  .pill{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#EAF6F0;font-size:12px;padding:3px 11px;border-radius:999px;margin:10px 8px 0 0}
  .legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:18px 0 10px;color:var(--c-sub);font-size:12.5px}
  .swatch{width:14px;height:14px;border-radius:4px;display:inline-block;vertical-align:-2px;margin-right:6px}
  .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
  .col12{grid-column:span 12}.col9{grid-column:span 9}.col8{grid-column:span 8}.col6{grid-column:span 6}
  .col5{grid-column:span 5}.col4{grid-column:span 4}.col3{grid-column:span 3}.col7{grid-column:span 7}
  .card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
  .card h3{font-size:15px;margin-bottom:4px}
  .card .sub{color:var(--c-muted);font-size:12.5px;margin-bottom:14px}
  .kpi{display:flex;flex-direction:column;gap:4px}
  .kpi .v{font-size:26px;font-weight:700;color:var(--c-ink);letter-spacing:.3px}
  .kpi .l{font-size:12.5px;color:var(--c-sub)}
  .kpi .d{font-size:12px;color:var(--c-success)}
  .kpi .d.down{color:var(--c-danger)}
  .btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--c-border-strong);background:#fff;color:var(--c-text);padding:7px 14px;border-radius:var(--radius-sm);font-size:13px;cursor:pointer;font-family:inherit}
  .btn.primary{background:var(--c-primary-500);border-color:var(--c-primary-500);color:#fff}
  .btn.primary:hover{background:var(--c-primary-600)}
  .btn.gold{background:var(--c-accent-500);border-color:var(--c-accent-500);color:#fff}
  .btn.danger{background:var(--c-danger);border-color:var(--c-danger);color:#fff}
  .btn.sm{padding:5px 10px;font-size:12px}
  .btn.link{padding:2px 6px;border:none;background:transparent;color:var(--c-primary-600);font-size:12px;cursor:pointer;font-family:inherit}
  .btn.link.danger{color:var(--c-danger)}
  table{width:100%;border-collapse:collapse;font-size:12.8px}
  th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--c-border)}
  th{color:var(--c-muted);font-weight:600;background:#FBFCFD;font-size:12px}
  tbody tr:hover{background:#FAFCFA}
  /* ---- 宽表容器与列样式钩子（配合 Table 组件的 cls / col.cls / rowCls）----
     商品档案多达 13 列，窄屏下必须能横向滚动，否则最右侧的「操作」列会被挤出
     视口且点不到。列钩子让「编码等宽、金额右对齐、停售行整行变灰」有地方表达，
     不必给每个列表页再写一套 <table>。 */
  .tbl-wrap{overflow-x:auto;padding-bottom:2px}
  /* 商品表 15 列（2026-09-12 加「品牌」「产地」两列后）合计约 1690px：
     最小宽度要跟上，否则列会被挤到换行而不是触发横向滚动。 */
  .tbl-wrap table.prod-table{min-width:1700px}
  th.num,td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  th.mid,td.mid{text-align:center;white-space:nowrap}
  th.nw,td.nw{white-space:nowrap}
  th.ops,td.ops{text-align:right;white-space:nowrap}
  tbody tr.off td{color:var(--c-muted)}
  tbody tr.off td b{color:var(--c-sub)}
  .tag{display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:999px;font-weight:600}
  .tag.green{background:var(--c-primary-50);color:var(--c-primary-700)}
  .tag.gold{background:#FBF1DC;color:var(--c-accent-600)}
  .tag.red{background:#FDECEC;color:var(--c-danger)}
  .tag.blue{background:#E8F0FE;color:var(--c-info)}
  .tag.gray{background:#EEF1F4;color:var(--c-sub)}
  .tag.orange{background:#FEF0DB;color:var(--c-warning)}
  .screen{background:var(--c-surface);border:1px solid var(--c-border);border-radius:14px;box-shadow:var(--shadow);margin-bottom:24px;overflow:hidden;scroll-margin-top:70px}
  .screen-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--c-border);background:linear-gradient(180deg,#fff,#FAFBFC)}
  .screen-hd .tt{display:flex;align-items:center;gap:12px}
  .modno{background:var(--c-primary-500);color:#fff;font-size:12px;font-weight:700;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;letter-spacing:.5px}
  .modno.g{background:var(--c-accent-500)}
  .screen-hd h2{font-size:16.5px}
  .screen-hd .meta{color:var(--c-muted);font-size:12px}
  .toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--c-border);background:#FCFDFE}
  .toolbar .sep{flex:1}
  .input,.select{border:1px solid var(--c-border-strong);border-radius:var(--radius-sm);padding:7px 10px;font-size:13px;font-family:inherit;background:#fff;color:var(--c-text)}
  .screen-bd{padding:18px 20px}
  .topapp{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--c-border);background:#FBFCFD}
  .topapp .cr{font-size:12px;color:var(--c-muted)}
  .topapp .sp{margin-left:auto;display:flex;gap:10px;align-items:center}
  .topapp .av{width:30px;height:30px;border-radius:50%;background:var(--c-primary-100);color:var(--c-primary-700);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
  .chartbar{display:flex;align-items:flex-end;gap:10px;height:150px;padding:8px 4px 0}
  .chartbar .b{flex:1;background:linear-gradient(180deg,var(--c-primary-300),var(--c-primary-500));border-radius:6px 6px 0 0;position:relative}
  .chartbar .b small{position:absolute;top:-18px;left:0;right:0;text-align:center;font-size:11px;color:var(--c-sub)}
  .chartbar .b b{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:11px;color:var(--c-muted)}
  .donut{width:160px;height:160px;border-radius:50%;background:conic-gradient(var(--c-primary-500) 0 42%,var(--c-accent-500) 42% 63%,var(--c-info) 63% 82%,#C9CFD6 82% 100%);position:relative;margin:6px auto}
  .donut::after{content:"";position:absolute;inset:30px;background:#fff;border-radius:50%}
  .donut .c{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:2}
  .donut .c b{font-size:20px;color:var(--c-ink)}
  .donut .c span{font-size:11px;color:var(--c-muted)}
  .steps{display:flex;gap:8px;flex-wrap:wrap;padding:0;margin:0;list-style:none}
  .steps li{background:#F1F5F3;border:1px solid var(--c-border);border-radius:8px;padding:8px 12px;font-size:12.5px;color:var(--c-sub)}
  .steps li b{color:var(--c-primary-700)}
  .note{background:var(--c-primary-50);border-left:3px solid var(--c-primary-500);padding:12px 14px;border-radius:0 8px 8px 0;color:var(--c-text);font-size:12.8px;margin-top:12px}
  .note.gold{background:#FBF1DC;border-left-color:var(--c-accent-500)}
  .note.red{background:#FDECEC;border-left-color:var(--c-danger)}
  .row{display:flex;gap:12px;flex-wrap:wrap}
  .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:6px}
  .stat{background:#FAFBFC;border:1px solid var(--c-border);border-radius:9px;padding:12px 14px}
  .stat .v{font-size:20px;font-weight:700;color:var(--c-ink)}
  .stat .l{font-size:12px;color:var(--c-sub)}
  .fusion{display:flex;gap:18px;align-items:stretch;flex-wrap:wrap}
  .phone{width:384px;background:#0E3322;border-radius:34px;padding:12px;box-shadow:var(--shadow-lg);border:1px solid #0E3322;flex-shrink:0}
  .pin{background:#fff;border-radius:24px;overflow:hidden;height:760px;display:flex;flex-direction:column}
  .pda-top{background:linear-gradient(135deg,var(--c-side),var(--c-primary-600));color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 12px rgba(11,61,46,.28)}
  .pda-top b{font-size:15px}
  .pda-top .w{font-size:11px;color:#9FD3C1}
  .pda-body{flex:1;overflow:auto;padding:14px}
  .pda-tabs{display:flex;background:#F1F5F3;border-radius:10px;padding:4px;margin-bottom:12px}
  .pda-tabs span{flex:1;text-align:center;padding:8px 0;font-size:13px;border-radius:8px;color:var(--c-sub)}
  .pda-tabs span.on{background:var(--c-primary-500);color:#fff;font-weight:600;box-shadow:0 2px 8px rgba(14,124,90,.32)}
  /* 通用标签页（采购模块 Tab 切换等） */
  .tabs{display:flex;background:#F1F5F3;border-radius:10px;padding:4px;margin-bottom:14px}
  .tabs span{flex:1;text-align:center;padding:8px 0;font-size:13px;border-radius:8px;color:var(--c-sub);cursor:pointer;user-select:none}
  .tabs span.on{background:var(--c-primary-500);color:#fff;font-weight:600}
  .pda-scan{background:linear-gradient(165deg,#0E3322,#0E7C5A);border-radius:14px;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#EAF6F0;margin-bottom:14px;position:relative;box-shadow:0 8px 22px rgba(14,51,34,.3)}
  .pda-scan .ic{font-size:42px}
  .pda-scan .t{font-size:13px;margin-top:8px}
  .pda-scan .s{font-size:11px;color:#BFE0D3;margin-top:3px}
  .pda-scan .frame{position:absolute;width:120px;height:120px;border:2px dashed rgba(255,255,255,.5);border-radius:10px}
  .pda-card{background:#F8FAF9;border:1px solid var(--c-border);border-top:3px solid var(--c-accent-500);border-radius:12px;padding:12px;margin-bottom:12px;box-shadow:0 2px 10px rgba(11,61,46,.06)}
  .pda-card .nm{font-size:15px;font-weight:700;color:var(--c-primary-700)}
  .pda-card .ln{display:flex;justify-content:space-between;font-size:12.5px;color:var(--c-sub);margin-top:6px}
  .pda-card .exp{color:var(--c-warning);font-weight:600}
  .pda-qty{display:flex;align-items:center;gap:10px;margin:8px 0 14px}
  .pda-qty label{font-size:12.5px;color:var(--c-sub)}
  .pda-qty input{flex:1;border:1px solid var(--c-border-strong);border-radius:8px;padding:11px 12px;font-size:18px;font-family:inherit;text-align:center;font-weight:700;transition:.15s}
  .pda-qty input:focus{outline:none;border-color:var(--c-primary-500);box-shadow:0 0 0 3px rgba(14,124,90,.16)}
  .pda-submit{background:linear-gradient(135deg,#E7C887,var(--c-accent-500));color:#3a2c0c;border:none;border-radius:12px;padding:15px;width:100%;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;box-shadow:0 6px 18px rgba(217,142,4,.32);transition:.15s}
  .pda-submit:hover{filter:brightness(1.04);box-shadow:0 8px 22px rgba(217,142,4,.4)}
  .pda-submit:active{transform:scale(.98)}
  .pda-offline{background:#FEF0DB;border:1px solid #F4D199;color:var(--c-warning);font-size:11.5px;border-radius:8px;padding:8px 10px;margin-bottom:12px;display:flex;gap:8px;align-items:center}
  .pda-nav{display:flex;border-top:1px solid var(--c-border);background:#fff}
  .pda-nav div{flex:1;text-align:center;padding:10px 0 12px;font-size:11px;color:var(--c-muted);border-top:2px solid transparent}
  .pda-nav div.on{color:var(--c-accent-600);border-top-color:var(--c-accent-500);font-weight:600}
  .pda-nav div .i{font-size:18px;display:block;margin-bottom:2px}
  .phone-side{flex:1;min-width:300px}
  .phone-side .dn{background:#fff;border:1px solid var(--c-border);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
  .phone-side .dn h3{font-size:15px;margin-bottom:10px;color:var(--c-primary-700)}
  .phone-side ul{margin:0;padding-left:18px;color:var(--c-sub);font-size:13px}
  .phone-side ul li{margin-bottom:9px}
  .phone-side ul li b{color:var(--c-ink)}
  .phone-side .flow{display:flex;align-items:center;gap:8px;margin:14px 0;flex-wrap:wrap}
  .phone-side .flow .st{background:var(--c-primary-50);border:1px solid var(--c-primary-100);color:var(--c-primary-700);border-radius:8px;padding:8px 12px;font-size:12.5px;font-weight:600}
  .phone-side .flow .ar{color:var(--c-accent-500);font-weight:700}
  .side2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
  .side2 .b{background:#FAFBFC;border:1px solid var(--c-border);border-radius:9px;padding:12px}
  .side2 .b .v{font-size:18px;font-weight:700;color:var(--c-ink)}
  .side2 .b .l{font-size:11.5px;color:var(--c-sub)}
  .footer{padding:22px 26px;color:var(--c-muted);font-size:12px;border-top:1px solid var(--c-border);background:#fff}
  .footer b{color:var(--c-sub)}
  details{margin-top:10px}
  details summary{cursor:pointer;color:var(--c-primary-600);font-size:13px;font-weight:600}
  .tokgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
  .tok{background:#FAFBFC;border:1px solid var(--c-border);border-radius:8px;padding:10px;text-align:center}
  .tok .sw{height:42px;border-radius:6px;margin-bottom:6px}
  .tok .nm{font-size:11.5px;color:var(--c-sub)}
  .tok .cd{font-size:11px;color:var(--c-muted);font-family:ui-monospace,Menlo,monospace}
  .devhand{background:#0B1418;color:#E6F0EC;border-radius:10px;padding:14px 16px;font-family:ui-monospace,Menlo,monospace;font-size:12px;overflow:auto;margin-top:12px}
  .devhand .k{color:#7FD3B0}.devhand .c{color:#9AA7A0}.devhand .s{color:#E9C46A}
  .map{display:flex;gap:18px;flex-wrap:wrap}
  .map .col{flex:1;min-width:220px}
  .map .col h4{font-size:13px;color:var(--c-primary-700);margin-bottom:8px;border-bottom:2px solid var(--c-primary-100);padding-bottom:6px}
  .map .col a{display:block;padding:6px 8px;border-radius:7px;font-size:12.8px;color:var(--c-sub)}
  .map .col a:hover{background:#F1F5F3;color:var(--c-ink)}
  .map .col a .n{color:var(--c-accent-600);font-weight:700;margin-right:6px}
  .empty{text-align:center;color:var(--c-muted);font-size:13px;padding:26px 0}
  /* 分页器：沿用设计 Token（深茶绿主色 #0E7C5A + 7px 圆角 + 浅灰描边） */
  .pager{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--c-border)}
  .pager .pf{font-size:12.5px;color:var(--c-muted);flex-shrink:0}
  .pager .pf b{color:var(--c-ink)}
  .pager .nums{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
  .pager .pg{min-width:30px;height:30px;padding:0 9px;border:1px solid var(--c-border-strong);border-radius:var(--radius-sm);background:#fff;color:var(--c-text);font-size:12.5px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;transition:.15s}
  .pager .pg:hover{border-color:var(--c-primary-500);color:var(--c-primary-600);background:var(--c-primary-50)}
  .pager .pg.on{background:var(--c-primary-500);border-color:var(--c-primary-500);color:#fff;font-weight:600}
  .pager .pg.dis{opacity:.45;cursor:not-allowed}
  .pager .pg.dis:hover{border-color:var(--c-border-strong);color:var(--c-text);background:#fff}
  .pager .gap{color:var(--c-muted);padding:0 2px}
  .pager .sz{flex-shrink:0}
  .pager .sz select{border:1px solid var(--c-border-strong);border-radius:var(--radius-sm);padding:5px 8px;font-size:12.5px;font-family:inherit;background:#fff;color:var(--c-text)}
  /* 卡片内嵌筛选条（M14 审计日志等）：比 toolbar 更紧凑 */
  .audit-filter{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
  .audit-filter .select.sm,.audit-filter .input.sm{padding:5px 8px;font-size:12.5px;min-width:0}
  .audit-filter .input.sm{flex:1;min-width:110px}
  /* 弹窗内明细行编辑器（M3 销售单等） */
  .items{margin-top:14px;border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:10px 12px;background:#FCFDFE}
  .items-hd{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--c-muted);margin-bottom:8px}
  .items-hd .amt b{color:var(--c-primary-500);font-size:14px}
  .items table.mini{width:100%;border-collapse:collapse}
  .items table.mini th{text-align:left;font-size:12px;color:var(--c-muted);font-weight:600;padding:4px 6px;border-bottom:1px solid var(--c-border)}
  .items table.mini td{padding:4px 6px;border-bottom:1px solid var(--c-border)}
  .items table.mini td select,.items table.mini td input{width:100%;border:1px solid var(--c-border-strong);border-radius:var(--radius-sm);padding:5px 7px;font-size:12.5px;font-family:inherit;background:#fff;color:var(--c-text)}
  .items table.mini td input.hot{background:#FFF5F2;border-color:var(--c-danger);color:var(--c-danger);font-weight:600}
  .overlay{position:fixed;inset:0;background:rgba(16,25,35,.45);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
  .overlay.show{display:flex}
  .modal{background:#fff;border-radius:14px;width:580px;max-width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg)}
  .modal-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--c-border)}
  .modal-hd h3{font-size:16px}
  .modal-hd .x{cursor:pointer;border:none;background:transparent;font-size:22px;color:var(--c-muted);line-height:1}
  .modal-bd{padding:18px 20px}
  .modal-ft{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--c-border)}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
  .form-row .full{grid-column:span 2}
  .field label{display:block;font-size:12.5px;color:var(--c-sub);margin-bottom:5px}
  .field input,.field select{width:100%;border:1px solid var(--c-border-strong);border-radius:var(--radius-sm);padding:9px 11px;font-size:13px;font-family:inherit;background:#fff;color:var(--c-text)}
  .field input:disabled{background:#F3F4F6;color:var(--c-muted)}
  .confirm-box{background:#fff;border-radius:14px;width:400px;max-width:100%;padding:24px;text-align:center;box-shadow:var(--shadow-lg)}
  .confirm-box .ic{font-size:34px;margin-bottom:8px}
  .confirm-box p{color:var(--c-sub);font-size:13.5px;margin:0 0 18px}
  .confirm-box .ft{display:flex;gap:10px;justify-content:center}
  @media(max-width:1100px){.grid{gap:12px}.col3,.col4,.col5,.col6,.col7,.col8,.col9{grid-column:span 12}.fusion{flex-direction:column}.phone{margin:0 auto}.form-row{grid-template-columns:1fr}}
  @media(max-width:900px){:root{--side-w:0px}#sidebar{display:none}#main{height:auto}.g-topbar{position:static}}
  #root{display:flex;flex:1;min-width:0;height:100%}

  /* ============================================================ 主题风格切换
     基础 Token 在 :root 定义（茶绿默认）。下列 [data-theme] 仅覆盖需要变化的色板，
     其余沿用默认值，保证切换成本最低、风格一致。 */
  /* 经典蓝（Ant Design 风） */
  [data-theme="blue"]{
    --c-primary-50:#E6F4FF; --c-primary-100:#BAE0FF; --c-primary-300:#69B1FF;
    --c-primary-500:#1677FF; --c-primary-600:#0958D9; --c-primary-700:#003EB3;
    --c-accent-500:#FA8C16; --c-accent-600:#D46B08;
    --c-side:#001529; --c-side-2:#002140;
    --c-success:#52C41A; --c-info:#1677FF;
  }
  /* 中国红（企业红 / 政务红） */
  [data-theme="red"]{
    --c-primary-50:#FFF1F0; --c-primary-100:#FFCCC7; --c-primary-300:#FF9C8F;
    --c-primary-500:#D4380D; --c-primary-600:#AD2F0C; --c-primary-700:#871D0A;
    --c-accent-500:#FAAD14; --c-accent-600:#D48806;
    --c-side:#7A1414; --c-side-2:#9A1B1B;
    --c-success:#389E0D; --c-info:#D4380D;
  }
  /* 科技紫 */
  [data-theme="purple"]{
    --c-primary-50:#F9F0FF; --c-primary-100:#EFDBFF; --c-primary-300:#C49BFF;
    --c-primary-500:#722ED1; --c-primary-600:#531DAB; --c-primary-700:#391085;
    --c-accent-500:#F759AB; --c-accent-600:#C41D7F;
    --c-side:#1A103C; --c-side-2:#2A1A5E;
    --c-success:#389E0D; --c-info:#722ED1;
  }
  /* 暗夜（深色模式：同步压暗背景/卡片/文字/边框） */
  [data-theme="dark"]{
    --c-bg:#171A1F; --c-surface:#1F242C; --c-text:#E6E8EB; --c-sub:#AAB2BD; --c-muted:#8B94A0;
    --c-border:#2E353E; --c-border-strong:#3A434E; --c-ink:#F2F4F7;
    --c-primary-50:#16233A; --c-primary-100:#1E3A66; --c-primary-300:#4096FF;
    --c-primary-500:#1668DC; --c-primary-600:#0958D9; --c-primary-700:#003EB3;
    --c-accent-500:#FAAD14; --c-accent-600:#D48806;
    --c-side:#0E1116; --c-side-2:#1C2330;
    --c-success:#49AA19; --c-warning:#D89614; --c-danger:#DC2626; --c-info:#1668DC;
  }
  /* 暗夜下修正浅底组件，避免白块 */
  [data-theme="dark"] .g-topbar{background:rgba(31,36,44,.92)}
  [data-theme="dark"] .screen-hd,[data-theme="dark"] .toolbar,[data-theme="dark"] .topapp,[data-theme="dark"] th{background:#23272E}
  [data-theme="dark"] .screen-hd{background:linear-gradient(180deg,#23272E,#1F242C)}
  [data-theme="dark"] tbody tr:hover{background:#262B33}
  [data-theme="dark"] .btn{background:#2A2F38;color:#E6E8EB;border-color:#3A434E}
  [data-theme="dark"] .input,[data-theme="dark"] .select,[data-theme="dark"] .search,[data-theme="dark"] .theme-sel,[data-theme="dark"] .pager .pg,[data-theme="dark"] .pager .sz select{background:#23272E;color:#E6E8EB;border-color:#3A434E}
  [data-theme="dark"] .field input,[data-theme="dark"] .field select{background:#23272E;color:#E6E8EB;border-color:#3A434E}
  [data-theme="dark"] .note{background:#16233A;color:#E6E8EB}
  [data-theme="dark"] .modal,[data-theme="dark"] .confirm-box{background:#1F242C;color:#E6E8EB}
  [data-theme="dark"] .overlay{background:rgba(0,0,0,.6)}

  /* ============================================================ 登录页 */
  .login-wrap{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--c-side) 0%,var(--c-primary-600) 100%);padding:24px}
  .login-card{width:100%;max-width:380px;background:var(--c-surface);border-radius:14px;
    padding:32px 30px 26px;box-shadow:var(--shadow-lg)}
  .login-card .brand2{text-align:center;margin-bottom:18px}
  .login-card .brand2 .logo{display:block;width:46px;height:46px;margin:0 auto 8px;border-radius:10px;background:#fff;padding:4px;object-fit:contain}
  .login-card .brand2 b{display:block;font-size:19px;color:var(--c-ink);letter-spacing:.5px}
  .login-card .brand2 span{font-size:12px;color:var(--c-muted)}
  .login-card h2{margin:0 0 4px;font-size:20px;text-align:center;color:var(--c-ink)}
  .login-card .sub{text-align:center;color:var(--c-muted);font-size:12.5px}
  .login-card .field{margin-bottom:14px}
  .login-card .field label{display:block;font-size:12.5px;color:var(--c-sub);margin-bottom:6px}
  .login-card .field input{width:100%;padding:10px 12px;font-size:14px}
  .btn.block{width:100%;justify-content:center;padding:10px 14px;font-size:14px;margin-top:6px}
  .btn:disabled{opacity:.65;cursor:not-allowed}
  .login-err{background:#FEF2F2;border:1px solid #FECACA;color:var(--c-danger);
    border-radius:var(--radius-sm);padding:8px 12px;font-size:12.5px;margin-bottom:12px}
  .login-card .note{margin-top:14px;font-size:12px}

  /* ============================================================ 顶栏用户区 / 卡片头 / 行操作 */
  .g-topbar .usermenu{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}
  .g-topbar .usermenu .uname{font-size:12.5px;color:var(--c-sub);font-weight:600;
    background:var(--c-primary-50);border-radius:20px;padding:4px 12px}
  .card-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
  .card-hd .searchbox{display:flex;align-items:center;gap:6px;flex-shrink:0}
  .card-hd .searchbox .input{width:170px;padding:6px 10px;font-size:12.5px}
  .row-ops{display:inline-flex;align-items:center;gap:2px}
  .role-chk{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius-sm);
    cursor:pointer;font-size:13px}
  .role-chk:hover{background:var(--c-primary-50)}
  .role-chk input{cursor:pointer}
  .role-chk em{font-style:normal;color:var(--c-muted);font-size:12px}

  /* ---- 等宽代码片段（表格里的编码列 / 说明文案） ---- */
  code{font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:12px;
    color:var(--c-sub);background:var(--c-bg);border-radius:4px;padding:1px 6px}
  /* 只读字段（如自动生成的组织编码）：灰底 + 禁用光标，明确不可改 */
  .field input:disabled{background:#F3F4F6;color:var(--c-muted);cursor:not-allowed}

  [data-theme="dark"] .login-card{background:#1F242C;color:#E6E8EB}
  [data-theme="dark"] .login-card h2,[data-theme="dark"] .login-card .brand2 b{color:#F2F4F7}
  [data-theme="dark"] .login-card .field input{background:#23272E;color:#E6E8EB;border-color:#3A434E}
  [data-theme="dark"] .login-err{background:#2A1A1C;border-color:#5C2A2E;color:#FF7875}
  [data-theme="dark"] .g-topbar .usermenu .uname{background:#16233A;color:#E6E8EB}
  [data-theme="dark"] .role-chk:hover{background:#232B36}
  [data-theme="dark"] code{background:#23272E;color:#C7CDD4}
  [data-theme="dark"] .field input:disabled{background:#262A31;color:#7C8794}

  /* ============================================================ 分段切换（列表 / 层级）
     左侧「列表 / 层级」小分段控件，沿用主色与 7px 圆角，与筛选框同高 */
  .seg{display:inline-flex;border:1px solid var(--c-border-strong);border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0}
  .seg .seg-b{border:none;background:#fff;color:var(--c-sub);font-family:inherit;font-size:12.5px;
    padding:6px 13px;cursor:pointer;transition:.15s;line-height:1.5}
  .seg .seg-b+.seg-b{border-left:1px solid var(--c-border-strong)}
  .seg .seg-b:hover{background:var(--c-primary-50);color:var(--c-primary-600)}
  .seg .seg-b.on{background:var(--c-primary-500);color:#fff;font-weight:600}
  .seg .seg-b.on:hover{background:var(--c-primary-600);color:#fff}

  /* ============================================================ 组织层级树
     纯 DOM 嵌套（无 table），缩进表达层级；行内右侧悬停显示操作按钮 */
  .orgtree{border:1px solid var(--c-border);border-radius:var(--radius-sm);overflow:hidden;background:var(--c-surface)}
  .orgtree .orow{display:flex;align-items:center;gap:8px;padding:9px 12px;
    border-bottom:1px solid var(--c-border);font-size:12.8px;transition:.12s}
  .orgtree .orow:last-child{border-bottom:none}
  .orgtree .orow:hover{background:#FAFCFA}
  .orgtree .org-tg{border:none;background:transparent;cursor:pointer;color:var(--c-muted);
    font-size:12px;line-height:1;padding:2px 3px;width:18px;flex-shrink:0;font-family:inherit}
  .orgtree .org-tg:hover{color:var(--c-primary-600)}
  .orgtree .org-nm b{color:var(--c-ink)}
  .orgtree .org-muted{color:var(--c-muted);font-size:12px}
  .orgtree .org-ops{margin-left:auto;display:inline-flex;gap:2px;opacity:0;transition:.15s}
  .orgtree .orow:hover .org-ops{opacity:1}
  [data-theme="dark"] .seg .seg-b{background:#23272E;color:var(--c-sub)}
  [data-theme="dark"] .seg .seg-b:hover{background:#16233A;color:#E6E8EB}
  [data-theme="dark"] .seg .seg-b.on{background:var(--c-primary-500);color:#fff}
  [data-theme="dark"] .orgtree{background:var(--c-surface)}
  [data-theme="dark"] .orgtree .orow:hover{background:#262B33}
  /* 「所属组织」树状选择器（账号弹窗内）：复用 .orgtree 外观，行本身可点选 */
  .orgtree.pick{max-height:208px;overflow:auto}
  .orgtree.pick .orow{cursor:pointer;user-select:none}
  .orgtree.pick .orow:hover{background:#F4F8F5}
  .orgtree.pick .orow.on{background:var(--c-primary-50)}
  .orgtree.pick .orow.on .org-nm b{color:var(--c-primary-700)}
  .orgtree.pick .orow.on::after{content:'当前归属';margin-left:auto;font-size:11px;font-weight:600;color:var(--c-primary-600)}
  .orgtree.pick .org-pick-id{color:var(--c-muted);font-size:11.5px;flex-shrink:0}
  /* 深层级（测试公司 → 生产部 → 一车间 → A小队）缩进后名称要能截断，否则把行撑破 */
  .orgtree.pick .org-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .org-pick-cur{margin-bottom:7px;font-size:12.5px;color:var(--c-sub)}
  .org-pick-cur b{color:var(--c-ink)}
  .role-tags{display:inline-flex;flex-wrap:wrap;gap:4px}
  [data-theme="dark"] .orgtree.pick .orow:hover{background:#2A3139}
  [data-theme="dark"] .orgtree.pick .orow.on{background:#16233A}
  /* 「所属部门」树选择器（员工弹窗内）：外观完全复用上面的 .orgtree.pick，
     只把选中标记文案从「当前归属」换成「当前部门」，并补一条查看态（整树不可点）。
     选择结果提示放在树的**下方**（部门名可能很长，放上面会把树挤下去）。 */
  .orgtree.pick.dept .orow.on::after{content:'当前部门'}
  .orgtree.pick.dept.dis{opacity:.6;pointer-events:none}
  /* 「上级品类」树选择器（品类弹窗内）。与 .dept 同一套外观，只换选中标记文案 ——
     这里选的不是「自己属于哪个节点」，而是「自己挂在哪个节点下」，措辞要跟得上。 */
  .orgtree.pick.cat .orow.on::after{content:'当前上级'}
  .orgtree.pick.cat.dis{opacity:.6;pointer-events:none}
  .tree-picked{margin-top:6px;font-size:12.5px;color:var(--c-sub)}
  .tree-picked b{color:var(--c-ink)}

  /* ============================================================ 角色「功能权限」配置弹窗 */
  .perm-all{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:var(--radius-sm);
    background:#FBF1DC;border:1px solid #F4D199;cursor:pointer;font-size:13px;margin-bottom:12px}
  .perm-all input{cursor:pointer}
  .perm-all em{font-style:normal;color:var(--c-accent-600);font-size:12px}
  .perm-grp{border:1px solid var(--c-border);border-radius:var(--radius-sm);margin-bottom:10px;overflow:hidden}
  .perm-grp-hd{display:flex;align-items:center;gap:8px;padding:8px 11px;background:#FBFCFD;
    border-bottom:1px solid var(--c-border);font-size:13px}
  .perm-grp-hd b{color:var(--c-ink)}
  .perm-grp-hd .perm-cnt{font-size:11.5px;color:var(--c-muted);background:var(--c-bg);
    border-radius:999px;padding:1px 8px}
  .perm-grp-hd .btn{margin-left:auto}
  .perm-items{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;padding:6px}
  [data-theme="dark"] .perm-all{background:#2E2415;border-color:#4A3A1B}
  [data-theme="dark"] .perm-all em{color:#FAAD14}
  [data-theme="dark"] .perm-grp-hd{background:#23272E}
  [data-theme="dark"] .perm-grp-hd .perm-cnt{background:#1A1E24}

  /* ============================================================ 无可用功能（权限全空）
     登录成功但角色一个权限键都没配时的兜底页，避免出现白屏 */
  .noroute{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;
    background:var(--c-bg);padding:24px}
  .noroute-box{max-width:520px;width:100%;background:var(--c-surface);border:1px solid var(--c-border);
    border-radius:14px;box-shadow:var(--shadow);padding:34px 32px;text-align:center}
  .noroute-box .ic{font-size:40px;margin-bottom:6px}
  .noroute-box h2{font-size:18px;color:var(--c-ink);margin-bottom:12px}
  .noroute-box p{color:var(--c-text);font-size:13.5px;margin:0 0 10px}
  .noroute-box p.sub{color:var(--c-muted);font-size:12.8px}
  .noroute-box .btn{margin-top:10px}
  [data-theme="dark"] .noroute{background:var(--c-bg)}

  /* ---------------------------------------------- 客户维护页（联系人与区划）
     .modal 默认 580px：客户表单要放「基本信息 + 财务信息 + N 张联系人卡片」，
     两列布局在这个宽度下每列只剩 ~250px，开票名称这类字段会被截断。 */
  .modal.wide{width:960px}
  .sec-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin:22px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--c-border);
    font-size:13.5px;font-weight:700;color:var(--c-primary-700)}
  .sec-hd:first-child{margin-top:0}
  .contact-card{border:1px solid var(--c-border);border-radius:12px;
    padding:14px 16px 2px;margin-bottom:12px;background:#FCFDFC}
  .contact-card.primary{border-color:var(--c-primary-300);background:var(--c-primary-50)}
  .contact-card .cc-hd{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .contact-card .cc-no{font-size:12.5px;font-weight:700;color:var(--c-sub)}
  .contact-card .cc-ops{margin-left:auto;display:flex;gap:6px}
  .region-pick .rp-row{display:grid;grid-template-columns:0.8fr 1fr 1fr 1fr;gap:8px}
  .region-pick .rp-path{margin-top:6px;font-size:12px;color:var(--c-muted)}
  [data-theme="dark"] .sec-hd{border-color:#3A434E;color:#8FB39A}
  [data-theme="dark"] .contact-card{background:#242A32;border-color:#3A434E}
  [data-theme="dark"] .contact-card.primary{background:#16233A;border-color:#2C3E5C}

  /* ---------------------------------------------- 条码模板段编辑器（条码规则页）
     规则是一串「段」，每段一行：序号 + 类型 + 参数 + 取值来源 + 排序操作。
     用竖排列而不是表格：行内控件加排序按钮在窄屏会挤成一团，而「段」天生是
     有序列表，竖排正好表达这个先后关系。 */
  .bc-tpl code{font-size:12.5px;padding:2px 8px;letter-spacing:.3px}
  .bc-segs{border:1px solid var(--c-border);border-radius:var(--radius-sm);margin-top:4px;overflow:hidden}
  .bc-segs-hd{padding:8px 11px;background:#FBFCFD;border-bottom:1px solid var(--c-border);
    font-size:12.5px;font-weight:700;color:var(--c-sub)}
  .bc-seg{display:grid;grid-template-columns:26px 118px 1fr auto;gap:9px;align-items:start;
    padding:10px 11px;border-bottom:1px solid var(--c-border)}
  .bc-seg:last-child{border-bottom:none}
  .bc-seg-no{width:22px;height:22px;margin-top:3px;border-radius:50%;background:var(--c-primary-50);
    color:var(--c-primary-700);font-size:11.5px;font-weight:700;
    display:flex;align-items:center;justify-content:center}
  .bc-seg .select{font-size:12.5px;padding:5px 8px}
  /* 参数列固定 148px、说明列吃剩余宽度：说明必须一直可见 ——
     它就是用户判断「这段的值从哪来」的唯一线索。 */
  .bc-seg-arg{display:grid;grid-template-columns:148px 1fr;gap:9px;align-items:center;min-width:0}
  .bc-seg-arg > .input,.bc-seg-arg > .select{width:100%;font-size:12.5px;padding:5px 8px}
  .bc-seg-note{grid-column:2;font-size:12px;line-height:1.5;color:var(--c-muted)}
  .bc-seg-ops{display:flex;align-items:center;gap:2px;padding-top:3px;white-space:nowrap}
  .bc-seg-ops .btn.link[disabled]{opacity:.35;cursor:not-allowed}
  .bc-seg-add{display:grid;grid-template-columns:1fr auto;gap:9px;padding:10px 11px;background:#FBFCFD}
  .bc-seg-add .select{font-size:12.5px}
  /* 生成结果是这一页的「结论」：用最大字号 + 等宽字体 + 字距，方便和 PDA /
     扫描枪上的实际值逐位对读（位数不对时最先要看出来的就是这里）。 */
  .bc-result{margin-top:14px;padding:14px 16px;border-radius:var(--radius-sm);
    background:var(--c-primary-50);border-left:3px solid var(--c-primary-500)}
  .bc-result-lb{font-size:12.5px;color:var(--c-sub);margin-bottom:4px}
  .bc-result-val{font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:24px;
    font-weight:700;letter-spacing:2px;color:var(--c-primary-700);word-break:break-all;line-height:1.35}
  .bc-result-sub{margin-top:5px;font-size:12px;color:var(--c-muted)}
  /* 逐段展开表：沿用全站 table 外观，只把行高压紧（弹窗里要一屏放得下） */
  .bc-parts{margin-top:12px}
  .bc-parts th,.bc-parts td{padding:7px 9px;font-size:12.5px}
  .bc-parts td.sub{color:var(--c-muted);font-size:12px}
  [data-theme="dark"] .bc-segs-hd,[data-theme="dark"] .bc-seg-add{background:#23272E}
  [data-theme="dark"] .bc-seg-no{background:#16233A;color:#4096FF}
  [data-theme="dark"] .bc-result{background:#16233A;border-left-color:#1668DC}
  [data-theme="dark"] .bc-result-val{color:#4096FF}

  /* 溯源码二维码卡片（造码页生成结果） */
  .qr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:14px}
  .qr-card{border:1px solid var(--c-border);border-radius:var(--radius);padding:12px;text-align:center;background:var(--c-surface)}
  .qr-card img{width:124px;height:124px;image-rendering:pixelated;background:#fff;border-radius:4px}
  .qr-code{font-family:monospace;font-size:12px;margin:8px 0 6px;word-break:break-all;color:var(--c-text)}
  .qr-hint{margin-top:10px;font-size:12px;color:var(--c-muted)}

  /* ---------------------------------------------- 测算器（组织与系统 › 测算器，2026-10-11 新增）
     把「楚云牵熟茶测算器.xlsx」原样搬进系统。黄底=可输入、绿底=自动计算**沿用 Excel 的视觉语义** ——
     用户已经靠颜色建立了「哪里能改、哪里是算出来的」的认知，换掉反而要重新学一遍。
     纯前端计算，不依赖后端接口、不建表（它不是业务单据，是算账工具）。
     右栏结果用 sticky：造价与售价是这一页的结论，滚到任何输入区都要看得见。 */
  .calc-in{background:#FFF8E6;border-color:#E8CE84;text-align:right;font-weight:600}
  .calc-in:focus{background:#fff}
  .calc-ro{background:#F1F7F3;border:1px solid #D8E8DE;border-radius:var(--radius-sm);
    padding:6px 10px;font-size:13px;text-align:right;font-weight:600;color:var(--c-ink);
    white-space:nowrap;font-variant-numeric:tabular-nums}
  .calc-ro.sumline{background:#EEF3FA;border-color:#D3DEEE}
  .calc-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .calc-row .lb{flex:1;font-size:13.5px;color:var(--c-sub)}
  .calc-row .ctl{width:130px;flex-shrink:0}
  .calc-row .u{width:50px;font-size:11.5px;color:var(--c-muted);flex-shrink:0}
  .calc-bar{display:flex;height:22px;border-radius:6px;overflow:hidden;
    border:1px solid var(--c-border);margin:10px 0 8px}
  .calc-bar i{display:block;height:100%}
  .calc-lg{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--c-sub)}
  .calc-lg span{display:inline-flex;align-items:center;gap:5px}
  .calc-lg i{width:10px;height:10px;border-radius:3px;display:inline-block}
  .calc-price{border:1px solid var(--c-primary-100);border-radius:var(--radius);padding:13px 15px;
    background:linear-gradient(180deg,#fff,#F7FBF8);margin-bottom:12px}
  .calc-price .lb{font-size:12.5px;color:var(--c-muted);display:flex;align-items:center;justify-content:space-between}
  .calc-price .v{font-size:25px;font-weight:700;color:var(--c-ink);letter-spacing:.3px;
    line-height:1.35;font-variant-numeric:tabular-nums}
  .calc-price .sub{font-size:12px;color:var(--c-muted);margin:2px 0 0}
  .calc-price.hi{border-color:var(--c-accent-500);background:linear-gradient(180deg,#FFFDF7,#FFF8E8)}
  .calc-price.hi .v{color:var(--c-accent-600)}
  .calc-stat{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--radius-sm);
    font-size:13px;font-weight:600;line-height:1.5}
  .calc-stat.ok{background:var(--c-primary-50);color:var(--c-primary-700);border:1px solid var(--c-primary-100)}
  .calc-stat.err{background:#FDECEC;color:var(--c-danger);border:1px solid #F6CFCF}
  .calc-warn{background:#FEF0DB;border:1px solid #F6D9A8;color:var(--c-warning);
    border-radius:var(--radius-sm);padding:9px 12px;font-size:12.5px;margin-bottom:14px;line-height:1.6}
  .calc-sticky{position:sticky;top:66px}
  .calc-kv{display:flex;justify-content:space-between;font-size:13px;gap:10px}
  .calc-kv .k{color:var(--c-muted)}
  [data-theme="dark"] .calc-in{background:#3A3524;border-color:#5A5238}
  [data-theme="dark"] .calc-ro{background:#1E3327;border-color:#2E4A38}
  [data-theme="dark"] .calc-ro.sumline{background:#1D2A3D;border-color:#2C3E5C}
  [data-theme="dark"] .calc-price{background:#242A32;border-color:#3A434E}
  [data-theme="dark"] .calc-price.hi{background:#332B1C}
  [data-theme="dark"] .calc-warn{background:#33291A;border-color:#5A4A22;color:#E8B866}
  [data-theme="dark"] .calc-stat.err{background:#3A2020;border-color:#5A3030;color:#FF9B9B}