/* 生鲜供应链配送系统 · 企业级清新主题 */
:root{
  --brand:#15a05a; --brand-2:#22c55e; --brand-d:#0b6e3e;
  --side:#0e3a2b; --side-2:#12503a;
  --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb; --bg:#f4f6f8; --card:#fff;
  --ok:#16a34a; --warn:#f59e0b; --danger:#ef4444; --info:#3b82f6; --purple:#8b5cf6;
  --radius:12px; --shadow:0 4px 16px rgba(15,58,43,.07);
  --wrap:1920px;   /* 内容区宽度上限：绝大多数屏自适应满屏，仅超宽屏留边 */
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;font-size:14px;line-height:1.6;}
a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select,textarea{font-family:inherit;font-size:14px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;outline:none;background:#fff;width:100%;}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(21,160,90,.12);}
::-webkit-scrollbar{width:9px;height:9px;} ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:6px;}

/* 布局 */
.layout{display:flex;min-height:100vh;}
.sidebar{width:220px;flex:0 0 220px;background:linear-gradient(180deg,var(--side) 0%,var(--side-2) 100%);color:#dbeee4;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;}
.brand{display:flex;align-items:center;gap:10px;padding:18px 18px;font-size:17px;font-weight:800;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);}
.brand .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--brand-2),var(--brand));display:grid;place-items:center;font-size:20px;overflow:hidden;}
.brand .logo.has-img{background:transparent;border:1px solid rgba(255,255,255,.12);}
.brand .logo img{width:100%;height:100%;object-fit:cover;display:block;}
.brand small{display:block;font-size:11px;font-weight:500;color:#9fd9bf;letter-spacing:1px;}
.nav{padding:10px 10px;flex:1;}
.nav-group{font-size:11px;color:#7fae9a;padding:12px 10px 4px;letter-spacing:1px;display:flex;align-items:center;gap:6px;}
.nav-group .gic{font-size:14px;width:18px;text-align:center;display:inline-flex;align-items:center;justify-content:center;}
.nav-group .gic img{width:14px;height:14px;object-fit:contain;border-radius:3px;}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:#cfe9dc;font-size:13.5px;margin:2px 0;transition:.15s;}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff;}
.nav a.active{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;font-weight:600;box-shadow:0 4px 10px rgba(21,160,90,.3);}
.nav a .ic{font-size:16px;width:20px;text-align:center;}
/* ---- 手风琴：默认全部收缩，点一级才展开；点一级同时打开其第一个二级 ----
 * 关键：.nav-group 原本是「分组小标题」用的 display:flex，会让一级(.nav-top)与
 * 二级容器(.nav-sub-wrap)横向并排，把二级挤成右侧一条窄柱。这里必须覆盖为 block。 */
.nav .nav-group{display:block;margin:2px 0;padding:0;letter-spacing:0;font-size:inherit;color:inherit;}
.nav .nav-top{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:#e6f5ec;font-size:14px;font-weight:600;margin:0;transition:.15s;}
.nav .nav-top:hover{background:rgba(255,255,255,.09);color:#fff;}
.nav .nav-group.open > .nav-top{background:rgba(255,255,255,.10);color:#fff;}
/* 单子项分组：一级即页面，用「选中高亮」而不是「展开底色」，让用户一眼区分 */
.nav .nav-top.leaf.active{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;font-weight:600;box-shadow:0 4px 10px rgba(21,160,90,.3);}
.nav .nav-group.leaf{margin:2px 0;}
.nav .nav-ic{font-size:17px;width:22px;text-align:center;flex:0 0 22px;}
.nav .nav-ic img{width:18px;height:18px;object-fit:contain;border-radius:4px;}
.nav .nav-tt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nav .caret{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid rgba(255,255,255,.55);flex:0 0 auto;transition:transform .18s;margin-right:2px;}
.nav .caret.open{transform:rotate(180deg);}
/* 二级容器：块级独占一行，左侧缩进 + 竖线体现层级 */
.nav .nav-sub-wrap{display:block;padding:2px 0 6px;margin:0 0 0 22px;border-left:1px solid rgba(255,255,255,.16);}
.nav .nav-sub-wrap[hidden]{display:none;}
.nav .nav-sub{display:flex;align-items:center;gap:8px;width:100%;padding:7px 12px;font-size:13px;font-weight:400;border-radius:8px;margin:1px 0;color:#bfe0d1;position:relative;}
.nav .nav-sub:hover{background:rgba(255,255,255,.08);color:#fff;}
.nav .nav-sub.active{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;font-weight:600;box-shadow:0 4px 10px rgba(21,160,90,.3);}
.nav .nav-sub .ic{font-size:13px;width:16px;flex:0 0 16px;text-align:center;}
.nav .nav-sub .ic img{width:14px;height:14px;object-fit:contain;border-radius:3px;}
.side-foot{padding:14px 18px;font-size:11px;color:#7fae9a;border-top:1px solid rgba(255,255,255,.08);}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{height:60px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:20;}
.topbar h1{font-size:18px;margin:0;font-weight:700;}
.topbar .sub{font-size:12px;color:var(--muted);}
.topbar-right{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px;}
.topbar-right .pill{background:#ecfdf3;color:var(--brand-d);padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;}

.content{padding:22px 24px 60px;max-width:var(--wrap);width:100%;margin:0 auto;}
/* 内容区自适应：宽屏时铺满可用宽度（不留大片空白），窄屏保持边距 */
.content{max-width:100%;}
@media (min-width:1921px){.content{max-width:1920px;}}

/* 卡片与栅格 */
/* 栅格布局类：自带 display:grid，调用方即使漏写 grid 也能正常排列 */
.grid{display:grid;gap:16px;}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);}
.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start;}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);}
.card h3{margin:0 0 14px;font-size:15px;display:flex;align-items:center;gap:8px;}
.card .card-sub{font-size:12px;color:var(--muted);font-weight:400;}
.kpi{padding:12px;display:flex;align-items:stretch;}
.kpi-box{border:1px dashed #cbd5e1;border-radius:10px;padding:16px 10px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:110px;}
.kpi .label{font-size:12.5px;color:var(--muted);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;background:transparent;border:none;padding:0;overflow:visible;}
.kpi .ic{font-size:16px;}
.kpi .num{font-size:27px;font-weight:800;letter-spacing:.5px;text-align:center;line-height:1.2;margin-top:8px;}
.kpi .num small{font-size:13px;color:var(--muted);font-weight:600;margin-left:3px;}
.kpi.green .num{color:var(--brand-d);} .kpi.blue .num{color:var(--info);} .kpi.amber .num{color:var(--warn);} .kpi.red .num{color:var(--danger);} .kpi.purple .num{color:var(--purple);}

/* 设置页 tab */
.tabs{background:#f8fafc;border-bottom:1px solid var(--line);display:flex;}
.tabs .tab{padding:12px 22px;border:none;background:transparent;cursor:pointer;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;transition:.15s;}
.tabs .tab:hover{color:var(--ink);}
.tabs .tab.active{color:var(--brand-d);border-bottom-color:var(--brand-d);font-weight:600;}

/* 按钮 */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;background:#f1f5f9;color:var(--ink);border:1px solid var(--line);transition:.15s;}
.btn:hover{background:#e9eef3;}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:none;box-shadow:0 3px 9px rgba(21,160,90,.28);}
.btn-primary:hover{filter:brightness(0.92);}
.auth-submit{font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.18);}
.auth-submit:hover{background:var(--brand-d);filter:none;}
.btn-sm{padding:5px 10px;font-size:12px;}
.btn-danger{background:#fef2f2;color:var(--danger);border-color:#fecaca;}
.btn-danger:hover{background:#fee2e2;}
.btn-ghost{background:transparent;border:1px solid var(--brand);color:var(--brand-d);}
.btn-ghost:hover{background:#ecfdf3;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;}

/* 表格 */
.table-wrap{overflow-x:auto;border-radius:var(--radius);}
table.tb{width:100%;border-collapse:collapse;font-size:13px;background:#fff;}
.tb th{background:#f8fafc;text-align:left;padding:11px 12px;font-weight:600;color:#475569;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:3;}
.tb td{padding:10px 12px;border-bottom:1px solid #f1f5f9;vertical-align:middle;}
.tb tr:hover td{background:#f9fdfb;}
.tb .num{font-variant-numeric:tabular-nums;text-align:right;}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:#475569;}
/* ---- 表格防换行：日期/状态/操作等短列必须同行显示（窄屏时整表横向滚动，不压缩单元格） ---- */
.tb-nowrap td{white-space:nowrap;}
.tb-nowrap td.tb-grow{white-space:normal;}
.tb-nowrap .btn-row{flex-wrap:nowrap;}
.tb-nowrap .btn-row .btn{white-space:nowrap;flex:0 0 auto;}

/* 徽标 */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap;}
.b-normal{background:#ecfdf3;color:var(--brand-d);} .b-low{background:#fef2f2;color:var(--danger);} .b-over{background:#fff7ed;color:#c2410c;}
.b-pending{background:#fffbeb;color:#b45309;} .b-confirmed{background:#eff6ff;color:#1d4ed8;}
.b-sorting,.b-doing{background:#faf5ff;color:#7c3aed;} .b-sorted{background:#ecfdf3;color:var(--brand-d);}
.b-dispatching{background:#eff6ff;color:#1d4ed8;} .b-delivering{background:#f0fdfa;color:#0f766e;}
.b-delivered{background:#dcfce7;color:#166534;} .b-cancelled{background:#f1f5f9;color:#94a3b8;}
.b-waiting{background:#f1f5f9;color:#64748b;} .b-done{background:#dcfce7;color:#166534;}
.b-draft{background:#f1f5f9;color:#64748b;} .b-ordered{background:#fffbeb;color:#b45309;} .b-received{background:#dcfce7;color:#166534;} .b-active{background:#dcfce7;color:#166534;}

/* 工具栏 */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.toolbar .spacer{flex:1;}
.toolbar input,.toolbar select{width:auto;min-width:140px;}
.search input{width:220px;}

/* 弹窗 */
.mask{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:flex-start;justify-content:center;z-index:100;padding:40px 16px;overflow:auto;}
.mask.show{display:flex;}
.modal{background:#fff;border-radius:14px;width:100%;max-width:560px;box-shadow:0 20px 50px rgba(0,0,0,.25);animation:pop .18s ease;}
.modal.wide{max-width:760px;}
@keyframes pop{from{transform:translateY(-10px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);}
.modal-head h3{margin:0;font-size:16px;}
.modal-head .x{cursor:pointer;font-size:22px;color:#94a3b8;line-height:1;}
.modal-body{padding:20px;max-height:70vh;overflow:auto;}
/* 弹窗底部按钮栏：右对齐 + 间距，与正文之间有分隔线 */
.modal-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--line);background:#fafbfc;border-radius:0 0 14px 14px;flex-wrap:wrap;}
.modal-foot .btn{min-width:76px;justify-content:center;}
.modal-foot:empty{display:none;}
.modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field{display:flex;flex-direction:column;gap:5px;}
.field.full{grid-column:1/-1;}
.field label{font-size:12.5px;color:#475569;font-weight:600;}
.field .hint{font-size:11.5px;color:var(--muted);}

/* ---------- Logo 设置 ---------- */
.logo-edit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.logo-edit .logo-pv{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;display:grid;place-items:center;font-size:20px;overflow:hidden;}
.logo-edit .logo-pv.has-img{background:transparent;border:1px solid var(--line);}
.logo-edit .logo-pv img{width:100%;height:100%;object-fit:cover;display:block;}
.logo-edit input{flex:1;min-width:150px;}
.logo-edit .logo-state{font-size:11.5px;color:var(--muted);width:100%;}

/* 图表 */
.chart svg{width:100%;height:auto;display:block;}
.legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:12px;font-size:12px;color:#475569;}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:middle;}

/* 列表/明细 */
.list-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#fff;}
.list-row .grow{flex:1;min-width:0;}
.bar{height:8px;border-radius:6px;background:#e5e7eb;overflow:hidden;margin-top:5px;}
.bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2));}

/* 空态/提示 */
.empty{padding:40px;text-align:center;color:var(--muted);font-size:14px;}
.toast{position:fixed;left:50%;top:24px;transform:translateX(-50%);background:#0f172a;color:#fff;padding:10px 18px;border-radius:10px;font-size:13.5px;z-index:200;opacity:0;transition:.25s;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.25);}
.toast.show{opacity:1;top:28px;}

/* 状态条/进度 */
.steps{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0;}
.step{font-size:11.5px;padding:3px 9px;border-radius:14px;background:#f1f5f9;color:#64748b;}
.step.on{background:var(--brand);color:#fff;}

.section-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px;}
.section-title h2{font-size:17px;margin:0;}
.muted{color:var(--muted);} .right{text-align:right;}
.nowrap{white-space:nowrap;} .scroll-y{max-height:340px;overflow:auto;}
.tag{display:inline-block;font-size:11px;background:#f1f5f9;color:#475569;padding:1px 7px;border-radius:6px;margin:1px;}
@media(max-width:1080px){.kpis{grid-template-columns:repeat(2,1fr);}.two-col{grid-template-columns:1fr;}.cards-3,.cards-2{grid-template-columns:1fr;}}

/* ---------- 分拣标签打印 ---------- */
#printArea{display:none;}
.label{box-sizing:border-box;background:#fff;color:#111;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  border:1px dashed #cbd5e1;padding:calc(4px*var(--s)) calc(5px*var(--s));}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:4px;}
.lb-cust{font-weight:800;font-size:calc(13px*var(--s));color:#0b6e3e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.lb-mid{font-size:calc(15px*var(--s));font-weight:800;line-height:1.12;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;}
.lb-spec{font-size:calc(9px*var(--s));color:#777;font-weight:500;}
.lb-qty{text-align:right;line-height:1;color:#111;}
.lb-qty b{font-size:calc(26px*var(--s));font-weight:800;}
.lb-qty span{font-size:calc(11px*var(--s));margin-left:2px;color:#444;}
.lb-foot{display:flex;flex-direction:column;gap:1px;}
.lb-date{font-size:calc(9px*var(--s));color:#444;}
.lb-bar{width:100%;height:calc(18px*var(--s));}
.lb-code{font-size:calc(8px*var(--s));letter-spacing:1px;text-align:center;font-family:ui-monospace,Consolas,monospace;color:#111;}

/* 卷纸连续打印：每张标签占满一页 */
.lbl-roll .label{width:100%!important;height:100%!important;border:none;page-break-after:always;}
/* A4 多列排版 */
.lbl-a4{display:flex;flex-wrap:wrap;gap:3mm;align-content:flex-start;}
.lbl-a4 .label{page-break-inside:avoid;}

@media print{
  @page{margin:0;}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  body{background:#fff!important;}
  body>*:not(#printArea):not(#pageStyle){display:none!important;}
  #printArea{display:block!important;position:static!important;}
}

/* ---------- 电子秤对接面板 ---------- */
.scale-box{border:1px solid var(--line);border-radius:10px;padding:14px;background:linear-gradient(180deg,#f0fdf4,#fff);margin-bottom:4px;}
.scale-head{font-weight:700;font-size:13px;color:var(--brand-d);display:flex;justify-content:space-between;align-items:center;}
.scale-live{font-family:ui-monospace,Consolas,monospace;text-align:center;font-weight:800;color:#0b3d2c;line-height:1;margin:8px 0;font-size:40px;}
.scale-live .scale-unit{font-size:16px;color:#64748b;margin-left:4px;font-weight:600;}
.scale-btns{display:flex;gap:8px;justify-content:center;}
.scale-wedge-wrap{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.6;}
.scale-wedge{border:1px dashed var(--brand);border-radius:6px;padding:6px 8px;width:100%;margin-top:4px;font-family:ui-monospace,Consolas,monospace;}
.pill.off{background:#fef2f2;color:#ef4444;}
.pill.on{background:#ecfdf3;color:#15a05a;}
/* 打印机状态胶囊：warn=部分在线；可点击查看详情 */
.pill.warn{background:#fff7ed;color:#c2410c;}
.pill[data-click]{cursor:pointer;}
.pill[data-click]:hover{filter:brightness(0.96);box-shadow:0 0 0 2px rgba(21,160,90,.18);}

/* ---------- AI 智能录单 ---------- */
.ai-tabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:10px;}
.ai-tab{flex:1;padding:9px 10px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:13px;cursor:pointer;color:var(--muted);}
.ai-tab.on{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600;}
.ai-text{width:100%;min-height:130px;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:14px;line-height:1.7;outline:none;font-family:inherit;resize:vertical;}
.ai-text:focus{border-color:var(--brand);}
.ai-tip{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.85;background:#f8fafb;border-left:3px solid var(--brand);padding:9px 12px;border-radius:0 8px 8px 0;}
.ai-warn{margin-top:10px;font-size:12.5px;color:#b45309;background:#fff7ed;border:1px solid #fed7aa;padding:9px 12px;border-radius:8px;line-height:1.7;}
.ai-preview{margin:10px 0;}
.ai-img{max-width:100%;max-height:220px;border:1px solid var(--line);border-radius:8px;display:block;}
.ai-sum{margin-top:10px;text-align:right;font-size:14px;padding:8px 12px;background:#f8fafb;border-radius:8px;}
.ai-success{text-align:center;padding:14px 4px;}
.ai-success h3{margin:8px 0 4px;font-size:17px;}
.ai-success p{margin:0;color:var(--muted);font-size:13px;}

/* ---------- 登录 / 认证 ---------- */
.auth-mask{position:fixed;inset:0;z-index:9999;background:linear-gradient(135deg,#eaf6ef,#f4f9f6 40%,#eaf1fb);display:none;align-items:center;justify-content:center;padding:24px;}
.auth-mask.show{display:flex;}
.auth-card{width:820px;max-width:100%;background:#fff;border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.18);display:grid;grid-template-columns:1fr 1fr;overflow:hidden;min-height:430px;}
.auth-left{background:linear-gradient(160deg,#15a05a,#0b7a41);color:#fff;padding:38px 34px;display:flex;flex-direction:column;justify-content:center;}
.auth-logo{font-size:52px;margin-bottom:12px;width:64px;height:64px;border-radius:14px;background:rgba(255,255,255,.14);display:grid;place-items:center;overflow:hidden;}
.auth-logo img{width:100%;height:100%;object-fit:cover;display:block;}
.auth-brand{font-size:24px;font-weight:800;letter-spacing:.5px;}
.auth-slogan{margin-top:14px;font-size:13px;line-height:1.9;opacity:.9;}
.auth-right{padding:34px 34px;display:flex;flex-direction:column;}
.auth-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:18px;}
.auth-tab{padding:9px 12px;font-size:13.5px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:600;}
.auth-tab.on{color:var(--brand);border-bottom-color:var(--brand);}
.auth-msg{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:12.5px;padding:8px 11px;border-radius:8px;margin-bottom:12px;}
.auth-submit{width:100%;margin-top:16px;padding:11px;font-size:15px;}
.auth-tip{margin-top:auto;padding-top:16px;font-size:11.5px;color:var(--muted);border-top:1px dashed var(--line);line-height:1.7;}
.auth-right .field{margin-bottom:12px;}
.wx-box{display:flex;gap:18px;align-items:center;}
/* 二维码：固定 180×180 圆角白框，内部 SVG 上下左右严格居中 */
.wx-qr{width:180px;height:180px;flex:0 0 180px;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;display:flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden;}
.wx-qr svg{width:100%;height:100%;max-width:100%;max-height:100%;display:block;margin:auto;}
.wx-info{flex:1;font-size:13px;}
.wx-info b{font-size:14px;}

/* ---------- 顶栏用户区 ---------- */
.user-chip{position:relative;display:flex;align-items:center;gap:8px;background:#f1f5f9;border-radius:20px;padding:4px 12px 4px 5px;cursor:pointer;font-size:13px;}
.user-chip .uc-av{width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;}
.user-chip .uc-name{display:flex;flex-direction:column;line-height:1.2;font-weight:600;}
.user-chip .uc-name small{font-weight:500;color:var(--muted);font-size:11px;}
.user-chip .uc-menu{display:none;position:absolute;top:110%;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(15,23,42,.13);min-width:150px;overflow:hidden;z-index:50;}
.user-chip:hover .uc-menu{display:block;}
.user-chip .uc-menu a{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:13px;color:var(--ink);cursor:pointer;}
.user-chip .uc-menu a:hover{background:#ecfdf3;color:var(--brand);}
.user-chip .uc-ic{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex:0 0 14px;}
.user-chip .uc-ic svg{display:block;width:100%;height:100%;}

/* ---------- 日志结果标记 ---------- */
.st.s-ok{color:var(--brand);} .st.s-no{color:var(--danger);} .st.s-mut{color:var(--muted);}

/* ---------- 平台层（系统供应商） ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;}
.svc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.svc-name{font-size:16px;font-weight:800;color:var(--ink);}
.svc .svc-price{font-size:26px;font-weight:800;color:var(--brand-d);margin:10px 0 6px;letter-spacing:.5px;}
.svc .svc-price small{font-size:13px;color:var(--muted);font-weight:600;margin-left:2px;}
.chips{margin:8px 0 10px;line-height:1.9;max-height:82px;overflow:auto;}
.chip{display:inline-block;padding:3px 9px;border-radius:20px;background:#f1f5f9;color:#64748b;font-size:11.5px;margin:0 5px 5px 0;white-space:nowrap;}
.chip.on{background:#ecfdf3;color:var(--brand-d);font-weight:600;}
.kpi .num.mini{font-size:21px;}
.mod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 14px;}
.mod-grid label{display:flex;align-items:center;gap:7px;font-size:13px;color:#475569;cursor:pointer;}
.mod-grid input[type=checkbox]{width:auto;}
.days-ok{color:var(--brand-d);} .days-warn{color:var(--warn);} .days-bad{color:var(--danger);}
.tsel{background:#eef2ff!important;color:#4338ca!important;gap:6px;}
.tsel.cur{background:#fff7ed!important;color:#c2410c!important;}
.tsel select{border:none;background:transparent;color:inherit;font-weight:700;font-size:12px;padding:0 2px;width:auto;max-width:190px;}
.tsel .mut{opacity:.75;font-weight:600;}
@media (max-width:1100px){ .tsel .mut{display:none;} }

/* ---------- 左侧导航栏设置 ---------- */
.navset-list{display:flex;flex-direction:column;gap:14px;}
.navset-group{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.navset-group-head{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#f8fafc;border-bottom:1px solid var(--line);}
.navset-group-head .check input,.navset-item .check input{width:auto;height:18px;}
.navset-items{padding:8px 12px 12px;display:flex;flex-direction:column;gap:6px;}
.navset-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px dashed #e2e8f0;border-radius:8px;background:#fff;}
.navset-item:hover,.navset-group-head:hover{background:#f1f5f9;}
.navset-icon-wrap{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.navset-pv{width:28px;height:28px;border-radius:6px;background:#ecfdf3;display:grid;place-items:center;font-size:15px;overflow:hidden;}
.navset-pv img{width:100%;height:100%;object-fit:cover;}
.navset-group-head .navset-icon-wrap input,.navset-item .navset-icon-wrap input{width:120px;font-size:12px;padding:5px 7px;}
.navset-group-head > input[type="text"],.navset-item > input[type="text"]{flex:1;min-width:100px;}
.navset-group-head > input[type="number"],.navset-item > input[type="number"]{width:70px;}
.navset-group-head .drag,.navset-item .drag{color:#94a3b8;cursor:grab;font-size:12px;user-select:none;}
.btn-xs{padding:3px 8px;font-size:11px;border-radius:5px;background:#f1f5f9;color:#475569;border:1px solid var(--line);}
.btn-xs:hover{background:#e2e8f0;}
/* 导航设置：工具条 + 三种排序（箭头/数字/拖动） */
.navset-bar{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:12px 14px;background:#f8fafc;border:1px solid var(--line);border-radius:var(--radius);}
.navset-bar .btn{white-space:nowrap;flex:0 0 auto;}
.navset-move{display:inline-flex;gap:4px;flex:0 0 auto;}
.navset-item.is-dragging,.navset-group.is-dragging{opacity:.45;border-style:dashed;}
.navset-item.is-over{outline:2px solid var(--brand);outline-offset:1px;}
.navset-group.is-over{outline:2px solid var(--brand);outline-offset:1px;}
.navset-item.is-over>.navset-move,.navset-group.is-over>.navset-group-head>.navset-move{background:#ecfdf3;}
@media (max-width:900px){
  .navset-item{flex-wrap:wrap;}
  .navset-icon-wrap{flex:1 1 100%;}
  .navset-bar{flex-wrap:wrap;}
}

/* ---------- 生日登记组件 ----------
 * 需求：年月日支持「下拉选择」+「手动输入年份」两种方式，年份非必填；
 *旁边明确标注「阳历 / 农历」且必选其一。 */
.bd-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.bd-row select,.bd-row input{padding:6px 8px;font-size:13px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);height:32px;}
.bd-row select.bdy{width:104px;}
.bd-row input.bd-y-in{width:110px;}
.bd-row select.bdm,.bd-row select.bdd{width:88px;}
.bd-sep{font-size:12.5px;color:var(--muted);flex:0 0 auto;}
.bd-cal{display:flex;align-items:center;gap:14px;margin-top:9px;padding:8px 11px;background:#f8fafc;border:1px dashed var(--line);border-radius:8px;flex-wrap:wrap;}
.bd-cal-label{font-size:12.5px;color:#475569;font-weight:600;}
.bd-radio{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink);font-weight:400;cursor:pointer;}
.bd-radio input{width:auto;height:15px;}
.bd-hint{font-size:12px;color:var(--muted);margin-left:auto;}
.req{font-weight:400;color:var(--muted);font-size:11.5px;}
.bd-badge{display:inline-block;padding:2px 9px;border-radius:20px;background:#fff7ed;color:#c2410c;font-size:11.5px;font-weight:600;white-space:nowrap;}
/* 导航设置：图标输入框的「清空」按钮 —— Emoji 组合字符难以框选删除，给一键清空 */
.navset-icon-wrap .btn-xs[title^="清空图标"]{padding:3px 6px;color:#ef4444;}
.navset-icon-wrap .btn-xs[title^="清空图标"]:hover{background:#fef2f2;}
/* 导航设置：图标被显式清空后的预览框 —— 虚线空框，明确表示「不显示图标」而非漏渲染 */
.navset-pv.is-clear{border:1px dashed #cbd5e1;background:#f8fafc;}
.navset-pv.is-clear::after{content:"无";font-size:11px;color:#94a3b8;}
/* 导航设置：图标被显式清空后的预览框 —— 虚线空框，明确表示「不显示图标」而非漏渲染 */
.navset-pv.is-clear{border:1px dashed #cbd5e1;background:#f8fafc;}
.navset-pv.is-clear::after{content:"无";font-size:11px;color:#94a3b8;}
/* 导航设置面板：分组折叠态 */
.navset-group-head.collapsed{background:#f1f5f9;border-bottom-color:transparent;}
.navset-group-head.collapsed .navset-fold{transform:rotate(-90deg);}
.navset-fold{transition:transform .18s;color:#64748b;flex:0 0 auto;}
.navset-fold:hover{background:#e2e8f0;}

/* ---------- 通用分页 + 批量选择组件 ---------- */
.pager-bar{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:10px 14px;background:#f8fafc;border:1px solid var(--line);border-top:none;border-radius:0 0 10px 10px;flex-wrap:nowrap;overflow-x:auto;}
.pager-left,.pager-right{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;white-space:nowrap;}
/* 「每页」标签 + 下拉：强制同行，绝不折行 */
.pager-lbl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#475569;white-space:nowrap;flex-wrap:nowrap;flex:0 0 auto;margin-left:6px;}
.pager-chk-all{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#475569;white-space:nowrap;flex-wrap:nowrap;flex:0 0 auto;}
.pager-size{padding:5px 8px;font-size:12.5px;border:1px solid var(--line);border-radius:6px;background:#fff;height:30px;flex:0 0 auto;width:84px;}
.pager-info{font-size:12.5px;color:var(--muted);}
.pager-info b,.pager-page b{color:var(--ink);}
.pager-page{font-size:12.5px;color:var(--muted);padding:0 4px;}
.pager-tb{border:1px solid var(--line);border-radius:0;}
.pager-tb th.pager-chk,.pager-tb td.pager-chk{text-align:center;width:44px;}
.pager-tb input[type="checkbox"]{width:16px;height:16px;cursor:pointer;}
.pager-tb tbody tr.is-picked{background:#f0fdf4;}
.pager-tb tbody tr.is-picked:hover{background:#dcfce7;}
/* 批量操作条 */
.pager-actions{display:flex;align-items:center;gap:10px;padding:9px 14px;background:#fff;border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:10px 10px 0 0;flex-wrap:wrap;}
.pager-gap{flex:1 1 auto;min-width:0;}
.pager-actions.on{background:#ecfdf3;border-color:#a7f3d0;}
.pager-sel{font-size:12.5px;color:#475569;white-space:nowrap;flex:0 0 auto;}
.pager-sel b{color:var(--brand-d);font-size:14px;}
@media (max-width:760px){
  .pager-bar{flex-wrap:wrap;justify-content:flex-start;}
  .pager-right{width:100%;flex-wrap:wrap;white-space:normal;}
}

/* ---------- 增强模式：包裹层（原表格被组件接管） ---------- */
.pager-wrap{width:100%;}
.pager-wrap .pager-bar{border-radius:0 0 10px 10px;}
.pager-wrap .pager-tb th:first-child,.pager-wrap .pager-tb td:first-child{position:sticky;left:0;background:#fff;z-index:2;}
.pager-wrap .pager-tb thead th:first-child{background:#f8fafc;}
.pager-wrap .pager-tb tbody tr.is-picked td:first-child{background:#f0fdf4;}
.pager-wrap .pager-tb tbody tr:hover td:first-child{background:#f8fafc;}
.pager-wrap .pager-actions{border-radius:10px 10px 0 0;}

/* ---------- 页面工具区吸顶（工具栏 + 提示卡 + 批量操作条） ---------- */
/* topbar 本身是 position:sticky; top:0; height:60px，所以这里从 60px 开始吸 */
.sticky-tools{position:sticky;top:60px;z-index:15;background:var(--bg,#f6f8f7);padding-bottom:10px;margin-bottom:0;}
.sticky-tools .toolbar{margin-bottom:10px;}
.sticky-tools .sticky-tip{border-left:4px solid var(--info);margin-bottom:0;box-shadow:0 2px 8px rgba(15,23,42,.05);}
/* 挂进吸顶区后的批量操作条：上下都要圆角，与吸顶容器视觉成一体 */
.sticky-tools.has-pager-actions > .pager-actions{margin-top:10px;border-radius:10px;border-bottom:1px solid var(--line);box-shadow:0 2px 8px rgba(15,23,42,.08);background:#fff;}
/* 吸顶容器必须完全不透明，否则滚动内容会从下方透出 */
.sticky-tools{background:var(--bg,#f5f7f6);}
/* 表格卡与吸顶区保持间距 */
.sticky-tools + .card.table-wrap{margin-top:0;}
@media (max-width:900px){
  .sticky-tools{position:static;}
}

/* ---------- 冻结表头：给分页表格一个视口内的滚动视口 ---------- */
/* .table-wrap 上的 overflow-x:auto 会接管 sticky 的包含块，导致 th 的 top:0 永不触发；
   所以外层再包一个 .pager-scroll：它同时具备纵向滚动与横向滚动，th 的 sticky 才有意义。 */
.pager-scroll{max-height:calc(100vh - 320px);min-height:220px;overflow:auto;border:1px solid var(--line);border-top:none;border-radius:0;background:#fff;margin-top:0;}
.pager-scroll > .table-wrap{border:0;border-radius:0;overflow:visible;}
/* 表头在滚动容器内冻结 */
.pager-scroll .tb th{position:sticky;top:0;z-index:3;background:#f8fafc;box-shadow:inset 0 -1px 0 var(--line);}
/* 勾选列（横向冻结）与表头纵向冻结叠加时，交叉处需要更高层级 */
.pager-scroll .pager-tb th:first-child,.pager-scroll .pager-tb td:first-child{position:sticky;left:0;z-index:4;background:#f8fafc;}
.pager-scroll .pager-tb tbody tr td:first-child{z-index:2;background:#fff;}
.pager-scroll .pager-tb tbody tr.is-picked td:first-child{background:#f0fdf4;}
.pager-scroll .pager-tb tbody tr:hover td:first-child{background:#f8fafc;}
/* 滚动条样式（与系统一致） */
.pager-scroll::-webkit-scrollbar{width:11px;height:11px;}
.pager-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:6px;border:3px solid #fff;}
.pager-scroll::-webkit-scrollbar-thumb:hover{background:#94a3b8;}
.pager-scroll::-webkit-scrollbar-track{background:#f8fafc;}
/* 极矮窗口时给一个最小高度，避免表格被压扁 */
@media (max-height:560px){
  .pager-scroll{max-height:calc(100vh - 210px);min-height:160px;}
}

/* 分页表格所在的外层卡片不再自带边框（边框已由 .pager-scroll 提供），避免双层线 */
.pager-wrap{padding:0;}
.card > .pager-wrap{border:none;}

/* ---------- 订单卡：主信息行 + 进度条行 ---------- */
/* 需求：竖线只保留最左侧 1 根；横线延伸到卡片右边界；操作按钮在上下两条横线之间居中 */
.pager-tb .ord-main > td{
  border-top:1px solid var(--line);
  border-left:none; border-right:none; border-bottom:none;   /* 列间不画竖线 */
  background:#fff; padding:7px 10px;                            /* 压缩纵向间距 */
}
.pager-tb .ord-main > td:first-child{border-left:1px solid var(--line);}   /* 唯一的竖线：最左侧 */
/* 进度条行：左边线对齐；下横线延伸到右边界 */
.pager-tb .ord-steps > td{
  border-top:none; border-left:1px solid var(--line); border-right:none;
  border-bottom:1px solid var(--line); background:#fcfdfe;
  position:relative; padding:1px 10px 3px;
}
/* 关键：colspan 单元格的 border 只画到自身内容宽度，遇到 rowspan 的操作列会被压断。
   用绝对定位的伪元素画一条「贯穿两行、直到卡片最右缘」的竖线，横线因此也能被它收口。 */
.pager-tb tr.ord-main > td.ord-ops{position:relative;}
.pager-tb tr.ord-main > td.ord-ops::after{
  content:""; position:absolute; right:0; top:0; bottom:0;
  width:1px; background:var(--line); pointer-events:none;
}
.pager-tb tr.ord-main > td.ord-ops::before{
  content:""; position:absolute; right:0; left:0; top:0;
  height:1px; background:var(--line); pointer-events:none;
}
.pager-tb tr.ord-main > td.ord-ops{border-right:none;vertical-align:middle;}
/* 圆角：整卡四角 */
.pager-tb .ord-main > td:first-child{border-top-left-radius:9px;}
.pager-tb .ord-main > td:last-child{border-top-right-radius:9px;}
.pager-tb .ord-steps > td{border-bottom-left-radius:9px;border-bottom-right-radius:9px;}
/* 相邻两卡之间不重复画上边框（上一张卡的进度行已有下边框） */
.pager-tb .ord-steps + .ord-main > td{border-top:none;border-top-left-radius:0;border-top-right-radius:0;}
/* 但每组第一张卡要保留完整上边框 */
.pager-tb tbody > tr:first-child.ord-main > td{border-top:1px solid var(--line);border-top-left-radius:9px;border-top-right-radius:9px;}
/* 卡片间距用进度行单元格的下内边距给出，比额外空行更省空间 */
.pager-tb .ord-steps > td{padding-bottom:7px;}
.pager-tb .ord-steps .steps{margin:4px 0 0;gap:5px;}
.pager-tb .ord-steps .step{padding:2px 8px;font-size:11px;}
/* 操作按钮区：rowspan 单元格内上下留白均分，视觉居中 */
.pager-tb .ord-ops{padding-top:7px;padding-bottom:7px;}

/* hover / 勾选：整卡同步 */
.pager-tb .ord-main:hover > td{background:#f9fdfb;}
.pager-tb .ord-steps:hover > td{background:#f2f9f5;}
.pager-tb tr.is-picked > td,.pager-tb tr.is-picked + tr.ord-steps > td{background:#f0fdf4;}

/* ---------- 自适应满屏：表格与栅格跟随内容宽度 ---------- */
/* 表格默认按内容撑开并铺满容器；列少时让单元格吃掉多余空间，列多时横向滚动 */
.pager-scroll > .table-wrap > table.pager-tb{width:100%;table-layout:auto;}
.pager-scroll > .table-wrap > table.pager-tb td,
.pager-scroll > .table-wrap > table.pager-tb th{white-space:nowrap;}
/* 栅格类自适应：列数固定但整行铺满 */
.grid,.kpis,.cards-2,.cards-3,.two-col{width:100%;}

/* 顶栏内容铺满，与内容区对齐 */
.topbar{padding:0 24px;}
@media (min-width:1921px){.topbar{padding:0 max(24px,calc((100vw - 220px - 1920px)/2 + 24px));}}

/* 顶栏内容铺满，与内容区对齐 */
.topbar{padding:0 24px;}
@media (min-width:1921px){.topbar{padding:0 max(24px,calc((100vw - 220px - 1920px)/2 + 24px));}}

/* 进度条行的横线：用伪元素画到最右缘，确保被 rowspan 操作列截断的部分也补上 */
.pager-tb tr.ord-steps > td::after{
  content:""; position:absolute; right:0; left:0; bottom:0;
  height:1px; background:var(--line); pointer-events:none;
  border-bottom-right-radius:9px;
}

/* ---------- 列表页标题：独立于表格容器，避免被 enhance 接管后挤到表格左侧 ---------- */
.pg-head{
  font-size:15px; font-weight:700; color:var(--ink);
  padding:14px 16px 10px; margin:0;
  background:var(--card); border:1px solid var(--line); border-bottom:none;
  border-radius:var(--radius) var(--radius) 0 0;
  display:flex; align-items:center; gap:8px;
}
.pg-head + .card.table-wrap{border-radius:0 0 var(--radius) var(--radius);margin-top:0;}
.pg-head + .pager-wrap{border-radius:0 0 var(--radius) var(--radius);}

/* ---------- 冻结表头：彻底封住"表头上方缝隙" ---------- */
/* 问题：批量操作条与表头之间若出现 margin/圆角缺口，向下滚动时表格内容会从缺口漏出。
   对策：① 各块之间零 margin；② 滚动容器上方补一条实线；③ 吸顶容器与操作条均为不透明底。 */
.pager-wrap{margin:0;}
.pager-wrap > .pager-actions{margin:0;}
.pager-wrap > .pager-scroll{margin:0;}
/* 操作条下方补一条 1px 实线（与滚动容器上边框重合，形成连续边界） */
.pager-wrap > .pager-actions::after{
  content:""; display:block; position:absolute; left:0; right:0; bottom:-1px;
  height:1px; background:var(--line);
}
.pager-actions{position:relative;}
/* 表头加一层向下的浅阴影，进一步遮挡滚动时从缝隙透出的内容 */
.pager-scroll .tb th{box-shadow:inset 0 -1px 0 var(--line), 0 2px 4px rgba(15,23,42,.06);}
/* 吸顶容器：紧贴其下的表格，之间不留缝 */
.sticky-tools{padding-bottom:0;}
.sticky-tools + .card.table-wrap,
.sticky-tools + .pager-wrap{margin-top:10px;}

/* ---------- 冻结表头：彻底封住"表头上方缝隙" ---------- */
/* 问题：批量操作条与表头之间若出现 margin/圆角缺口，向下滚动时表格内容会从缺口漏出。
   对策：① 各块之间零 margin；② 滚动容器上方补一条实线；③ 吸顶容器与操作条均为不透明底。 */
.pager-wrap{margin:0;}
.pager-wrap > .pager-actions{margin:0;}
.pager-wrap > .pager-scroll{margin:0;}
/* 操作条下方补一条 1px 实线（与滚动容器上边框重合，形成连续边界） */
.pager-wrap > .pager-actions::after{
  content:""; display:block; position:absolute; left:0; right:0; bottom:-1px;
  height:1px; background:var(--line);
}
.pager-actions{position:relative;}
/* 表头加一层向下的浅阴影，进一步遮挡滚动时从缝隙透出的内容 */
.pager-scroll .tb th{box-shadow:inset 0 -1px 0 var(--line), 0 2px 4px rgba(15,23,42,.06);}
/* 吸顶容器：紧贴其下的表格，之间不留缝 */
.sticky-tools{padding-bottom:0;}
.sticky-tools + .card.table-wrap,
.sticky-tools + .pager-wrap{margin-top:10px;}

/* ============================================================
 *  新建订单（整页表单）
 *  参考蔬东坡「新增订单」布局：工具条 + 4 个可折叠分区 + 明细表格 + 底部动作条
 * ============================================================ */
.of-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.of-card{padding:0;margin-bottom:12px;overflow:hidden;}
.of-sec{display:flex;align-items:center;gap:8px;padding:11px 16px;background:#f8fafc;border-bottom:1px solid var(--line);font-size:14px;}
.of-sec-no{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:4px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;flex:0 0 18px;}
.of-sec b{flex:1;font-weight:700;color:var(--ink);}
.of-sec-fold{width:22px;height:22px;border:1px solid var(--line);background:#fff;border-radius:5px;color:#64748b;cursor:pointer;font-size:13px;line-height:1;padding:0;}
.of-sec-fold:hover{background:#eef2f7;}
.of-sec-body{padding:14px 16px;}
/* 表单 */
.of-card .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 16px;}
.of-card .field.full{grid-column:1 / -1;}
.of-radio{display:flex;align-items:center;gap:16px;height:34px;font-size:13px;color:var(--ink);}
.of-radio label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-weight:400;}
.of-radio input{width:auto;height:15px;}
/* 订单标签 chips */
.of-chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip-check{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--line);border-radius:16px;background:#fff;font-size:12.5px;color:#475569;cursor:pointer;font-weight:400;}
.chip-check:hover{border-color:var(--brand);color:var(--brand-d);}
.chip-check input{width:14px;height:14px;}
.chip-check:has(input:checked){background:#ecfdf3;border-color:var(--brand);color:var(--brand-d);font-weight:600;}
/* 商品清单工具条 */
.of-goods-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.of-goods-bar .spacer{flex:1 1 auto;}
/* 明细表格 */
.of-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;}
.of-tb{min-width:1180px;}
.of-tb th{white-space:nowrap;}
.of-tb td{vertical-align:middle;padding:6px 8px;}
.of-tb input,.of-tb select{height:32px;font-size:12.5px;padding:4px 8px;}
.of-tb .of-prod{min-width:190px;}
.of-tb .of-qty,.of-tb .of-price{width:82px;text-align:right;}
.of-tb .of-unit,.of-tb .of-desc,.of-tb .of-bremark{width:100%;}
.of-tb .of-sub{color:var(--brand-d);font-weight:700;}
.of-tb tr.filled{background:#f0fdf4;}
.of-imgcell{text-align:center;}
.of-imgph{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:6px;background:#f1f5f9;color:#94a3b8;font-size:15px;overflow:hidden;}
.of-imgcell img{width:32px;height:32px;object-fit:cover;border-radius:6px;}
.of-del{padding:2px 8px;color:#94a3b8;}
.of-del:hover{color:#ef4444;background:#fef2f2;}
/* 全屏模式：表格铺满可视区 */
.of-table-wrap.of-full{position:fixed;inset:60px 0 0 0;z-index:60;max-width:none;border-radius:0;background:#fff;display:flex;flex-direction:column;}
.of-table-wrap.of-full .of-tb{flex:1;min-height:0;}
/* 合计条 */
.of-tfoot{display:flex;align-items:center;gap:10px;padding:9px 4px 0;font-size:12.5px;color:#475569;flex-wrap:wrap;}
.of-tfoot .spacer{flex:1 1 auto;}
.of-tfoot b{color:var(--ink);}
.of-tfoot .of-sum{color:#ef4444;font-size:15px;font-weight:800;}
/* 底部动作条 */
.of-actions{position:sticky;bottom:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 -2px 10px rgba(15,23,42,.06);margin-top:4px;}
.of-actions .btn{min-width:88px;}
.of-right{text-align:right;font-size:12px;margin-top:4px;}
@media (max-width:760px){
  .of-card .form-grid{grid-template-columns:1fr;}
  .of-tfoot{flex-direction:column;align-items:flex-start;}
}