/* 门店系统统一设计令牌 + 基础组件 + 兼容兜底层（2026-09-19 优化版） 全站引入：（根相对；静态根在 /opt/yuzai/app/public，勿写 /public/ 前缀，否则 404） 设计原则：单一令牌源、浅色为主（[data-theme="dark"] 覆盖即深色）、组件只写一次。 真实页只需引入本文件并统一 --brand，HTML 结构尽量不动；本文件的「LEGACY 兼容层」 负责兜底各页历史使用的扁平类（.hd/.tab/.btn.p/.selbar/.secnav/.pChip 等）。 */ /* ============ 设计令牌（浅色基准） ============ */ :root{ /* 品牌橙（统一取代 #e8632a / #c94e1c 两值；后续页 --brand-d 等改用衍生档） */ --brand:#E8632A; --brand-50:#FDEFE6; --brand-100:#FBD9C4; --brand-200:#F6B58C; --brand-300:#F29A66; --brand-400:#EE8A4E; --brand-500:#E8632A; --brand-600:#E8632A; --brand-700:#C9551F; --brand-800:#C94E1C; --brand-900:#A33D15; --brand-d:var(--brand-700); /* 兼容老页 .selbar 深色条 */ /* 中性灰阶（z229：底色统一到 #F2F4F8，与工作台 z171 口径一致，全站一底） */ --bg:#F2F4F8; --surface:#FFFFFF; --surface-2:#F7F9FC; --surface-3:#EEF2F7; --line:#E6EAEF; --line-2:#D8DEE6; --ink:#1F2430; --ink-2:#3C4456; --ink-3:#6B7280; --ink-4:#9AA3AF; --ink-5:#C2C9D2; --ink2:var(--ink-2); --ink3:var(--ink-3); /* 兼容老页 --ink2/--ink3 */ --card:var(--surface); --card2:var(--surface-2); --txt:var(--ink); --sub:var(--ink-3); /* 兼容暗色页命名 */ /* 语义 / 状态（柔和不刺眼） */ --success:#0F7A5F; --success-bg:#E3F6EF; --success-fg:#0F7A5F; --danger:#C0392B; --danger-bg:#FCEBE9; --danger-fg:#C0392B; --warning:#B7791F; --warning-bg:#FBF1DE; --warning-fg:#B7791F; --info:#1F6FB2; --info-bg:#E7F1FB; --info-fg:#1F6FB2; /* 间距 */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; /* 圆角（形状统一） */ --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-full:999px; /* 阴影层级（更柔和） */ --sh-1:0 1px 2px rgba(16,24,40,.05); --sh-2:0 2px 8px rgba(16,24,40,.06); --sh-3:0 8px 24px rgba(16,24,40,.08); --sh-pop:0 12px 32px rgba(16,24,40,.14); /* 字体（中文优先系统栈） */ --font-sans:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:28px; --fw-5:500; --fw-6:600; --fw-7:700; --lh-tight:1.35; --lh-base:1.6; /* 过渡 */ --tr:160ms ease; /* 尺寸（点击区 ≥44 友好） */ --nav-h:56px; --tab-h:58px; --hdr-h:52px; } *{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--ink); font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-base); -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased} h1{font-size:var(--fs-xl);font-weight:var(--fw-6);margin:0;line-height:var(--lh-tight)} h2{font-size:var(--fs-lg);font-weight:var(--fw-6);margin:0;line-height:var(--lh-tight)} h3{font-size:var(--fs-md);font-weight:var(--fw-6);margin:0;line-height:var(--lh-tight)} a{color:var(--brand-600);text-decoration:none} a:hover{color:var(--brand-800)} /* ============ 布局 ============ */ .wrap{max-width:1480px;margin:0 auto;padding:var(--sp-4)} .grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .row{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap} /* 页面头部 / 页头（兼容老页 .hd） */ .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3); margin-bottom:var(--sp-4);flex-wrap:wrap} .page-head .sub{color:var(--ink-3);font-size:var(--fs-sm);margin-top:2px} /* 🔴 z229：.hd 只保留「涂装」（底色/字色/投影），**不再写 display/padding/position 等结构属性** —— admin（标题/账户/页签三段堆叠）与 up.html（蓝色圆角头）都有自己的 .hd 布局， 之前这里强加 display:flex 把 admin 页签压成一行窄条（文字折行）、up 头部横排，全是隐性破坏。 ops.html 自带完整 flex 行头不受影响。 */ .hd{background:var(--brand);color:#fff;box-shadow:var(--sh-2)} .hd h1,.hd .t{font-size:var(--fs-lg);font-weight:var(--fw-6)} .hd .who{font-size:var(--fs-xs);font-weight:400;opacity:.85} /* ============ 卡片（z229：对齐工作台 z171 语言——纯白无边框 + 两层柔影，圆角全站一个节奏） ============ */ .card{background:var(--surface);border:0;border-radius:14px; box-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 16px rgba(16,24,40,.05); padding:var(--sp-4);transition:box-shadow var(--tr)} .card:hover{box-shadow:0 2px 4px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.08)} .card-h{font-size:var(--fs-md);font-weight:var(--fw-6);margin:0 0 var(--sp-3)} .card-b{color:var(--ink-2)} /* ============ 按钮（统一品牌橙；兼容老页 .btn.p/.btn.s/.btn.bad/.btn.sec/.btn.sm） ============ */ .btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px; border-radius:10px;border:1px solid transparent;font-size:var(--fs-base);font-weight:var(--fw-5); cursor:pointer;min-width:44px;min-height:44px;transition:background var(--tr),border-color var(--tr),color var(--tr);line-height:1} .btn-primary,.btn.p{background:var(--brand);color:#fff;border-color:var(--brand)} .btn-primary:hover,.btn.p:hover{background:var(--brand-700);border-color:var(--brand-700)} .btn-ghost,.btn.sec{background:var(--surface);border-color:var(--line);color:var(--ink-2)} .btn-ghost:hover,.btn.sec:hover{border-color:var(--brand);color:var(--brand)} .btn-danger,.btn.bad{background:var(--danger);color:#fff;border-color:var(--danger)} .btn-danger:hover,.btn.bad:hover{filter:brightness(.94)} .btn-text{background:none;color:var(--brand);min-height:44px} .btn-sm,.btn.sm{height:32px;padding:0 12px;font-size:var(--fs-xs);min-height:32px} button{cursor:pointer} /* ============ z229 全站质感层：滚动条 / 选区 / 焦点态 ============ */ *{scrollbar-width:thin;scrollbar-color:#C7D0DB transparent} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:#C7D0DB;border-radius:5px;border:2px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:#A9B6C4;border:2px solid transparent;background-clip:content-box} ::-webkit-scrollbar-track{background:transparent} ::selection{background:var(--brand-100)} :focus-visible{outline:2px solid var(--brand-300);outline-offset:2px} [data-theme="dark"] *{scrollbar-color:#3A445C transparent} [data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3A445C} /* ============ 表单（统一输入框；兼容原生 input/select/textarea 与老页 .sm） ============ */ .input,.select{height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-md); background:var(--surface);color:var(--ink);font-size:var(--fs-base);min-height:40px;font-family:var(--font-sans);transition:border-color var(--tr),box-shadow var(--tr)} .input:focus,.select:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-100)} .field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-3)} .field label{font-size:var(--fs-sm);color:var(--ink-3)} input,select,textarea{padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-md); background:var(--surface);color:var(--ink);font-size:var(--fs-base);font-family:var(--font-sans);transition:border-color var(--tr)} .sm{height:34px;padding:0 10px;font-size:var(--fs-sm);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink)} /* ============ 状态标签 ============ */ .tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-full); font-size:var(--fs-xs);font-weight:var(--fw-5);line-height:1} .tag-success{background:var(--success-bg);color:var(--success-fg)} .tag-warning{background:var(--warning-bg);color:var(--warning-fg)} .tag-danger{background:var(--danger-bg);color:var(--danger-fg)} .tag-info{background:var(--info-bg);color:var(--info-fg)} /* ============ 表格（桌面）/ 行卡片（移动） ============ */ .table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)} .table th,.table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)} .table th{color:var(--ink-3);font-weight:var(--fw-6);background:var(--surface-2);white-space:nowrap} .table tbody tr:hover{background:var(--surface-2)} table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)} th,td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left} th{background:var(--surface-2);color:var(--ink-3);font-weight:var(--fw-6);font-size:var(--fs-xs);letter-spacing:.02em} .row-card{display:none;border:1px solid var(--line);border-radius:var(--r-md); padding:var(--sp-3);margin-bottom:var(--sp-2);background:var(--surface)} .row-card .rc-k{color:var(--ink-3);font-size:var(--fs-xs)} .row-card .rc-v{font-size:var(--fs-base);margin-bottom:4px} /* ============ 空态 / 加载 / 错误 ============ */ .empty,.loading,.error{padding:var(--sp-8);text-align:center;color:var(--ink-3); border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--surface-2)} .error{color:var(--danger-fg);border-color:var(--danger-bg);background:var(--danger-bg)} /* ============ 导航：桌面顶部 / 移动底部 Tab ============ */ .topnav{display:flex;align-items:center;gap:var(--sp-4);height:var(--nav-h); padding:0 var(--sp-4);background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20} .topnav .logo{font-weight:var(--fw-6);color:var(--brand)} .topnav a{color:var(--ink-2);padding:6px 4px} .topnav a.on{color:var(--brand);border-bottom:2px solid var(--brand)} .bottom-tab{display:none} @media(max-width:768px){ .topnav{display:none} .bottom-tab{display:flex;position:fixed;left:0;right:0;bottom:0;height:var(--tab-h); background:var(--surface);border-top:1px solid var(--line);z-index:30;justify-content:space-around;align-items:center} .bottom-tab a{display:flex;flex-direction:column;align-items:center;gap:2px; font-size:11px;color:var(--ink-3);min-width:44px;min-height:44px;justify-content:center} .bottom-tab a.on{color:var(--brand)} .wrap{padding:var(--sp-3);padding-bottom:calc(var(--tab-h) + var(--sp-3))} .table{display:none} .row-card{display:block} } /* ============ Tabs（兼容老页 .tab/.tab.on） ============ */ .tab{display:inline-flex;align-items:center;height:36px;padding:0 16px;border:1px solid var(--line); border-radius:var(--r-md);background:var(--surface);color:var(--ink-2);cursor:pointer;font-size:var(--fs-sm);min-height:40px} .tab.on{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:var(--fw-6)} /* ============ 筛选栏 / 栏目导航（兼容老页 .selbar/.secnav） ============ */ .selbar{background:var(--brand-d);padding:8px 12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .secnav{display:flex;gap:8px;flex-wrap:wrap} .secnav a{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1px solid var(--line); border-radius:var(--r-md);background:var(--surface);color:var(--ink-2);cursor:pointer;font-size:var(--fs-sm);min-height:40px} .secnav a:hover{border-color:var(--brand);color:var(--brand)} .secnav a.on{background:var(--brand-50);border-color:var(--brand-600);color:var(--brand-800);font-weight:var(--fw-6)} /* ============ 日期筛选控件（与共享 date-filter.js 配合；覆盖式兼容 board/admin 同名类） ============ 2026-09-23 全站统一标准（z159 同款，李拍板）：控件一行（‹ 盒 › ＋ 粒度）。 2026-09-25 李改版（z206）：「数据范围：起-止」不再单独一行居中，**并入控件行「按月」右侧** （窄屏放不下时随 pRow flex-wrap 自然折行）。类 .dfRange 不变，由 date-filter.js perRender 渲染。 🔴 此格式即全站日期控件唯一标准——新增/改动任何日期组件都禁止再写第二套； 旧 .pfCap 静态标题已弃用。 🔴 board/admin/index 三页各自还带一份同名旧 CSS，但本文件在它们之后加载 → 同权重下本文件胜出；**改这一处即全站生效**，不要再去改页内那份。 */ .pfCap{display:block;margin:0 0 8px;font-size:var(--fs-md);font-weight:var(--fw-7);color:var(--ink); letter-spacing:.2px;line-height:1.2} /* /board 的筛选条是橙底（--brand-d）：深字压橙上不够，改浅色；它在 flex 行里，margin 收掉 */ .selbar .pfCap{margin:0;color:#ffe9dd} /* .selbar 深色橙条：board.html 页内 :root 自己声明的是 --brand-d:#a83f14，但本文件 （后加载）的 :root{--brand-d:var(--brand-700)}＝#C9551F 把它盖浅了 —— 而 #C9551F 上 的浅色字（#ffe9dd / #fff）对比度只有 3.7~4.4:1，15px 粗体达不到 4.5。这里把该条 自己的令牌钉回页内原本的深档，条内所有用 --brand-d 的地方一起回到深色。 */ .selbar{--brand-d:#a83f14} .per{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap} /* 全站日期控件统一结构（z206 定稿）：pWrap＝单行（控件＋数据范围同行），pRow 居中可折行 */ .per .pWrap{display:flex;flex-direction:column;align-items:center;gap:4px} .per .pRow{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center} /* z206：.dfRange 改行内（按月右侧）；.per 前缀提特异性，压掉各页内旧的同名块级规则 */ .per .dfRange{display:inline;width:auto;margin:0;font-size:var(--fs-sm);color:var(--ink-3); text-align:left;letter-spacing:.2px;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap} /* z160：/board 橙底筛选条（.selbar #a83f14）上灰字 #6B7280 对比度仅 ~1.7 —— 副标题改浅色（同旧 .pfCap 口径）； 写在 .per .dfRange 之后（同特异性后写者胜） */ .selbar .dfRange{color:#ffe9dd} .pChip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px; padding:0 16px;border:1px solid var(--line-2);border-radius:11px;background:var(--surface); color:var(--ink);cursor:pointer;transition:border-color var(--tr)} .pChip:hover{border-color:var(--brand)} .pChip:active{background:#FFF7F2} .pChip b{font-size:var(--fs-xl);font-weight:var(--fw-7);color:var(--ink);letter-spacing:.2px; white-space:nowrap;font-variant-numeric:tabular-nums} .pChip svg{color:var(--ink-4);flex:0 0 auto} .pChip .pIn{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;cursor:pointer} .pChip .pIn:focus{outline:0} .pIn{border:none;background:transparent;font-size:var(--fs-base);color:var(--ink);outline:none} /* 三个盒子拼一行：‹ 盒 | 中间只留两根细分隔线 | › 盒，再接粒度按钮 */ .pGrp{display:inline-flex;align-items:center;gap:4px} .pGrp .pChip{border:0;border-left:1px solid #EDF0F3;border-right:1px solid #EDF0F3;border-radius:0; background:transparent;padding:0 14px} .pGrp .pRange{border:0;border-left:1px solid #EDF0F3;border-right:1px solid #EDF0F3;border-radius:0} .pNav{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0; border:1px solid var(--line-2);border-radius:11px;background:var(--surface);color:#5B6470;cursor:pointer; font-family:inherit;transition:border-color var(--tr),color var(--tr),background var(--tr)} .pNav:hover{border-color:var(--brand);color:var(--brand);background:#FFF7F2} .pNav:active{background:#FDEFE6} .pNav svg{display:block} .pMode{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 16px;border:1px solid var(--line-2); border-radius:11px;background:var(--surface);color:var(--ink);cursor:pointer;font-family:inherit; font-size:var(--fs-md);font-weight:var(--fw-6); transition:border-color var(--tr),background var(--tr),color var(--tr)} .pMode:hover{border-color:var(--brand);color:var(--brand)} .pMode.on{background:var(--brand-50);color:var(--brand-800);border-color:var(--brand-600);font-weight:var(--fw-6)} .pMode svg{transition:transform .16s} .pMode.on svg{transform:rotate(180deg)} .pMode.pOne{cursor:default;color:var(--ink-3)} .pMode.pOne:hover{border-color:var(--line-2);color:var(--ink-3)} .pRange{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid var(--line-2); border-radius:11px;background:var(--surface)} .pRange input{width:auto;border:0;background:transparent;padding:0;margin:0;font-size:var(--fs-md); font-weight:var(--fw-6);height:auto;color:var(--ink);font-family:inherit} .pRange input:focus{outline:0} .pRange .muted{color:var(--ink-4)} .pIt{padding:8px 14px;cursor:pointer;border-radius:var(--r-sm);font-size:var(--fs-sm)} .pIt:hover{background:var(--surface-2)} .pIt.on{background:var(--brand);color:#fff} .pMenu{position:fixed;z-index:120;min-width:132px;background:var(--surface);border:1px solid var(--line); border-radius:12px;box-shadow:var(--sh-pop);padding:6px;display:none} .pMenu.on{display:block} .pMenu .pIt{padding:9px 16px;border-radius:99px;text-align:center;color:var(--ink-2);white-space:nowrap} .pMenu .pIt:hover{background:var(--surface-2)} .pMenu .pIt.on{background:var(--brand);color:#fff;font-weight:var(--fw-7)} /* 窄屏：主显示与翻页盒各收一档，保证「‹ 2026-09-01 › ＋ 按月」一行放得下（不压到 13px 以下） */ @media(max-width:420px){ .per{gap:8px} .pChip{padding:0 10px} .pGrp .pChip{padding:0 10px} .pChip b{font-size:17px} .pNav{width:40px} .pMode{padding:0 12px;font-size:var(--fs-sm)} } .muted{color:var(--ink-4);font-size:var(--fs-sm)} /* ============ 复选框 / 折叠（兼容老页 .chk/.rpSec） ============ */ .chk{width:18px;height:18px;accent-color:var(--brand)} .rpSec>summary{cursor:pointer;font-weight:var(--fw-6);padding:8px 0;list-style:none} .rpSec>summary:before{content:"▸ ";color:var(--brand);font-weight:var(--fw-7)} /* ============ 日期筛选 · 移动端底部弹层（2026-09-23 对齐收银系统「点开的状态」） ============ Tab 行（按日 / 按周(所在周) / 按月 / 按年 / 自定义）右端钉「完成」； 下方滚轮：年→「2026年」、月→「9月、日→「23日、周→「第39周(09-21至09-27)」； 选中行＝整宽浅灰条。 🔴 「完成」必须钉在 Tab 行右端、不随 Tab 横滚（早期版本把它挤出过屏幕）→ .dfTabSc 单独横滚。 */ .dfMask{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:90} .dfSheet{position:fixed;left:0;right:0;bottom:0;z-index:91;background:var(--surface); border-radius:var(--r-2xl) var(--r-2xl) 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.14); padding:0 0 calc(env(safe-area-inset-bottom,0px))} .dfTabs{display:flex;align-items:stretch;padding:0 var(--sp-3);border-bottom:1px solid var(--line)} .dfTabSc{display:flex;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none} .dfTabSc::-webkit-scrollbar{display:none} .dfTab{flex:1 0 auto;display:flex;align-items:center;justify-content:center;white-space:nowrap; padding:12px 8px;font-size:var(--fs-sm);color:var(--ink-3);cursor:pointer; border-bottom:2px solid transparent;min-height:46px} .dfTab.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:var(--fw-6)} .dfOk{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:56px;min-height:46px; padding:0 4px;border:0;border-bottom:2px solid transparent;background:none;color:var(--brand); font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-7);cursor:pointer} .dfCols{position:relative;display:flex;height:220px} .dfCols::after{content:'';position:absolute;left:0;right:0;top:89px;height:42px; background:var(--surface-3);pointer-events:none;z-index:0} .dfCol{flex:1;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none;position:relative;z-index:1} .dfCol::-webkit-scrollbar{display:none} .dfColIn{padding:89px 0} .dfIt{height:42px;line-height:42px;text-align:center;font-size:16px;color:var(--ink-4); scroll-snap-align:center;cursor:pointer;transition:color var(--tr);white-space:nowrap;overflow:hidden} .dfIt.sm{font-size:13px} .dfIt.on{color:var(--ink);font-weight:var(--fw-6)} .dfCustom{display:flex;gap:var(--sp-3);padding:var(--sp-4)} .dfCustom label{flex:1;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);color:var(--ink-3)} .dfCustom input{height:44px;border:1px solid var(--line);border-radius:var(--r-md); padding:0 12px;font-size:15px;color:var(--ink);background:var(--surface);font-family:var(--font-sans)} .dfCustom input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-100)} /* ============ 深色主题（[data-theme="dark"] 覆盖；供 profit 暗色页统一到同一令牌体系） ============ */ [data-theme="dark"]{ --bg:#0F1420; --surface:#1A2030; --surface-2:#222A3D; --surface-3:#2A3349; --line:#2C3548; --line-2:#3A445C; --ink:#E8EDF6; --ink-2:#C3CEE0; --ink-3:#9AA7BD; --ink-4:#6E7B93; --ink-5:#4B566E; --brand:#E8632A; --brand-50:#3A2418; --brand-100:#5A3A24; --brand-200:#7A4A2A; --brand-300:#9A5A30; --brand-400:#B86A38; --brand-500:#E8632A; --brand-600:#E8632A; --brand-700:#C9551F; --brand-800:#C94E1C; --brand-900:#A33D15; --success:#3FBE95; --success-bg:#14342B; --success-fg:#3FBE95; --danger:#F0736A; --danger-bg:#3A1F1D; --danger-fg:#F0736A; --warning:#E0A23E; --warning-bg:#3A2E18; --warning-fg:#E0A23E; --info:#5AA8E0; --info-bg:#16283A; --info-fg:#5AA8E0; --card:var(--surface); --card2:var(--surface-2); --txt:var(--ink); --sub:var(--ink-3); --sh-1:0 1px 2px rgba(0,0,0,.3); --sh-2:0 2px 8px rgba(0,0,0,.32); --sh-3:0 8px 24px rgba(0,0,0,.4); --sh-pop:0 12px 32px rgba(0,0,0,.5); } /* ============================================================================ z120 · 触控尺寸 与 横屏适配（**纯增量**，桌面端零变化） ---------------------------------------------------------------------------- 为什么写在这里：本系统老板用电脑看总览、店长店员用手机作业，手机是主战场。 实测多个可点击元素只有 23~34px（index.html 的 header .sBtn≈23px、 nav.secs button=32px；ops.html 的 .del 删除键≈26px 且紧邻输入行）。 苹果 HIG / 安卓 Material 都要求触控目标 ≥44px，否则极易误触 —— 「删除」键误触的代价是真实数据被删。 两个关键手法： ① `(hover:none) and (pointer:coarse)` 精准命中**触屏设备**。 桌面鼠标环境完全不命中 → 电脑端的紧凑布局一点不变（这是"无缝切换"的前提）。 ② 选择器加 `html body` 前缀提升特异性。theme.css 是 引入的， 各页内联