/* ============================================================
   ChainOne · 保健养生用品连锁
   设计基调：药感绿 + 暖金，信息密度适中，老年模式一键放大
   ============================================================ */
:root {
    --bg: #f3f6f5;
    --surface: #ffffff;
    --surface-2: #f7faf9;
    --ink: #172422;
    --ink-2: #40524f;
    /* 次要文字：对 #fff / #f7faf9 的对比度 >= 4.9:1（12px 表头也满足 WCAG AA）。
       旧值 #7b8c89 只有 3.4:1，表头、字段提示、卡片副标题普遍发灰看不清。 */
    --muted: #5f706d;
    --line: #e2e9e7;
    --line-strong: #cfdad7;
    --brand: #0f5f57;
    --brand-2: #0e7c6f;
    --brand-dark: #0b4e47; /* 主按钮 hover / active，由各主题分别覆盖 */
    --brand-soft: #e6f2ef;
    --gold: #b98a3e;
    --gold-light: #d9b26d;
    --gold-dark: #a3762f;
    /* 浅底上的金色文字：--gold(#b98a3e) 只有 3.1:1，这里压深到 5.3:1 */
    --gold-text: #8a6326;
    /* 金色按钮底色：白字需要 4.5:1，故比 --gold 深一档 */
    --gold-btn: #96691f;
    --gold-btn-hover: #7f5719;
    --gold-soft: #f7efdf;
    --danger: #b33a3a;
    --danger-soft: #fbeaea;
    --warn: #955d0f;
    --warn-soft: #fdf3e2;
    --ok: #217a4b;
    --ok-soft: #e7f5ed;
    --radius: 16px;
    --radius-sm: 10px;
    /* 圆角只用 5 档：8 小标签 / 10 按钮与输入 / 12 内嵌块 / 16 卡片 / 999 胶囊。
       不再出现 6/7/9/11/13/15px 混排，避免"每个块的圆角都不一样"。 */
    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-pill: 999px;
    /* 控件高度：同一行的按钮与输入框必须等高，否则会错位 1~2px。 */
    --h-ctl: 38px;
    --h-ctl-sm: 32px;
    --shadow: 0 1px 2px rgba(15, 40, 36, .04), 0 8px 24px rgba(15, 40, 36, .05);
    --sidebar-w: 236px;
    /* 全站统一字体栈：中文优先苹方 / 雅黑，西文回落到系统 UI 字体 */
    /* 字重只用 4 档：400 正文 / 500 次要强调 / 600 标题 / 700 数字。
       中文非可变字体没有 550、650，写出来会被浏览器凑整，
       于是「同样是标题，粗细却不一样」，所以一律只用 4 档。 */
    --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    /* 全站统一字号阶（8 档，只许用变量，禁止再写 px / 小数 / 13.5 之类中间值）
       12 元信息｜14 正文｜16 卡片标题｜20 页面标题｜24 KPI｜28 大数字｜32 首屏｜48 错误码
       —— 相邻档位至少差 2px，避免出现 13 与 14 这种"看着像又不一样"的抖动。 */
    --fs-2xs: 12px;  /* 角标 / 表头 / 辅助说明（最小可读档，不再用 10/11px） */
    --fs-xs: 12px;   /* 兼容旧样式，等同 2xs */
    --fs-sm: 12px;   /* 元信息 */
    --fs-base: 14px; /* 正文：表格 / 按钮 / 表单 / 提示 */
    --fs-md: 14px;   /* 兼容旧样式，等同 base */
    --fs-lg: 16px;   /* 卡片标题 / 区块标题 */
    --fs-xl: 18px;   /* 强调数字 / 价格 */
    --fs-2xl: 20px;  /* 页面标题 */
    --fs-3xl: 24px;  /* KPI 主数字 */
    --fs-4xl: 28px;
    --fs-5xl: 32px;  /* 收银总价 / 大屏 */
    --fs-6xl: 48px;  /* 错误码 */
    --fs-h1: 20px;   /* 页面级标题，与 2xl 同档 */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--fs-md);
    line-height: 1.6;
}
a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }
/* 表单控件默认继承全站字体，避免 Chrome 默认 13.333px 与页面字号不一致 */
button, input, select, textarea, optgroup { font-family: inherit; font-size: inherit; line-height: inherit; }
button { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
p { margin: 0; }
table { border-collapse: collapse; width: 100%; }
img { max-width: 100%; }

/* ------------------------------ 布局 ------------------------------ */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: linear-gradient(178deg, #113a35 0%, #0d2c28 78%, #0a2421 100%);
    color: #dfece9;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}
.brand {
    display: flex; align-items: center; gap: 12px;
    padding: 22px 20px 18px;
    color: #fff; text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-mark {
    width: 38px; height: 38px; border-radius: 12px;
    background: linear-gradient(140deg, var(--gold-light), var(--gold));
    color: #1b2a27; font-weight: 700; font-size: var(--fs-lg);
    display: grid; place-items: center; letter-spacing: -.02em;
    box-shadow: 0 4px 14px rgba(185, 138, 62, .35);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { font-size: var(--fs-xl); letter-spacing: .02em; }
.brand-text small { color: #9fb8b3; font-size: var(--fs-sm); margin-top: 3px; }
.nav { flex: 1; overflow-y: auto; padding: 4px 10px 20px; }
.nav::-webkit-scrollbar { width: 4px; }
.nav::-webkit-scrollbar-thumb { background: #2b4f4a; border-radius: 4px; }
.nav-group { margin-top: 14px; }
/* 导航字号阶：一级（分组标签）12px < 二级（菜单项）14px，保证层级从大到小、不反转 */
.nav-group-title {
    font-size: var(--fs-sm); font-weight: 600; letter-spacing: .06em; color: #86a29c;
    padding: 0 12px 8px; text-transform: uppercase;
}
.nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 10px;
    color: #c6d8d4; font-size: var(--fs-md);
    margin-bottom: 2px; text-decoration: none;
    transition: background .16s, color .16s;
}
.nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.nav-link.active {
    background: linear-gradient(90deg, rgba(185, 138, 62, .26), rgba(185, 138, 62, .06));
    color: #fff; font-weight: 600;
    box-shadow: inset 2px 0 0 var(--gold-light);
}
.nav-icon { width: 18px; text-align: center; opacity: .85; font-size: var(--fs-base); }
.nav-blank { margin-left: auto; font-size: var(--fs-sm); opacity: .5; }
.nav-link:hover .nav-blank { opacity: .9; }
.sidebar-foot {
    padding: 12px 18px 16px; border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: var(--fs-xs); color: #93b0ab; line-height: 1.55;
}
.sidebar-version { margin-top: 4px; color: #8aa9a3; }
.sidebar-copyright { margin-top: 6px; }
/* 侧栏版权链接：深绿底上用 #7f9d97 只有 3.4:1，跟侧栏页脚统一到可读灰绿 */
.sidebar-foot .foot-copyright,
.sidebar-foot .foot-official,
.sidebar-foot .foot-sep { color: #93b0ab; }
.sidebar-foot .foot-copyright:hover,
.sidebar-foot .foot-official:hover { color: var(--gold-light); }
.foot-copyright {
    color: #7f9d97; text-decoration: none; border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
}
.app-foot .foot-copyright, .app-foot .foot-official { color: #526360; }
.app-foot .foot-copyright:hover, .app-foot .foot-official:hover { color: var(--brand); border-bottom-color: rgba(217, 178, 109, .5); }
.foot-copyright:hover { color: var(--gold-light); border-bottom-color: rgba(217, 178, 109, .5); }
.foot-official {
    color: #7f9d97; text-decoration: none; border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
}
.foot-official:hover { color: var(--gold-light); border-bottom-color: rgba(217, 178, 109, .5); }
/* 登录页：官网 / 预约演示入口 */
.login-official { color: #bfe4dd; text-decoration: none; border-bottom: 1px solid rgba(191, 228, 221, .35); }
.login-official:hover { color: var(--gold-light); border-bottom-color: rgba(217, 178, 109, .55); }

/* 演示水印：极浅、不可交互、打印时隐藏 */
.page-watermark {
    position: fixed; inset: 0; z-index: 9000; pointer-events: none;
    opacity: .045; background-repeat: repeat; background-size: 320px 200px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200'%3E%3Ctext x='50%25' y='50%25' fill='%230f5f57' font-family='Microsoft YaHei,PingFang SC,sans-serif' font-size='12.5' font-weight='500' text-anchor='middle' dominant-baseline='middle' transform='rotate(-24 160 100)'%3E%E4%B8%8A%E6%B5%B7%E6%80%9D%E6%89%AC%E4%BF%A1%E6%81%AF%20%C2%B7%20%E7%AE%97%E6%95%B0%E7%A7%91%E6%8A%80%20%C2%B7%20%E6%BC%94%E7%A4%BA%E4%BD%BF%E7%94%A8%20%C2%B7%2018016313342%3C/text%3E%3C/svg%3E");
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    height: 62px; background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 26px; position: sticky; top: 0; z-index: 30;
}
.topbar-left { display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); color: var(--ink-2); }
.topbar-store { font-weight: 600; color: var(--ink); }
.topbar-divider { color: var(--muted); }
.topbar-role { color: var(--muted); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.content { padding: 24px 26px 40px; flex: 1; }
.app-foot {
    padding: 14px 26px; border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    font-size: var(--fs-sm); color: var(--muted);
}
.app-foot-right { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.app-foot-right .foot-sep { margin: 0 4px; opacity: .7; }
.app-foot-right .foot-phone { color: var(--ink-2); text-decoration: none; }
.app-foot-right .foot-phone:hover { color: var(--brand); text-decoration: underline; }

/* ------------------------------ 通用组件 ------------------------------ */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: var(--fs-h1); }
.page-sub { margin-top: 4px; color: var(--muted); font-size: var(--fs-base); max-width: 760px; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* 页头操作区必须等高：过去「新增」是 38px、「导出 / 打印」是 32px 的 btn-sm，
   挤在同一行会明显高低错落。这里统一成标准控件高度，移动端再整体压到 32px。 */
.page-actions .btn-sm { height: var(--h-ctl); padding: 0 14px; border-radius: var(--r-md); }
.section { margin-bottom: 22px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 12px; }
.section-title { font-size: var(--fs-lg); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.section-title .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

.card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px;
}
.card-tight { padding: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-title { font-size: var(--fs-lg); font-weight: 600; }
.card-sub { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; line-height: 1.5; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* 网格子项默认 min-width:auto 会被内部图表/表格的最小内容宽度撑开，
   导致窄屏整页横向滚动；这里放开收缩，宽内容交给各自的滚动容器。 */
.grid > *, .split > * { min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-base); }
.tiny { font-size: var(--fs-sm); }
.mono { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; }
.w-100 { width: 100%; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-danger { color: var(--danger); }
.text-warn { color: var(--warn); }
.text-ok { color: var(--ok); }
.text-gold { color: var(--gold-text); }
.hr { height: 1px; background: var(--line); margin: 14px 0; border: 0; }

/* KPI：数字 24px / 文字类 20px，标签与脚注统一 12px，卡片等高 */
.kpi { display: flex; flex-direction: column; gap: 3px; }
.kpi-label { font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.kpi-value { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.kpi-value.is-text { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: 0; font-variant-numeric: normal; }
.kpi-value.is-text-sm { font-size: var(--fs-xl); font-weight: 600; letter-spacing: 0; font-variant-numeric: normal; }
.kpi-value small { font-size: var(--fs-md); font-weight: 500; color: var(--muted); margin-left: 3px; }
.kpi-foot { font-size: var(--fs-sm); color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; line-height: 1.5; }
.trend-up { color: var(--ok); } .trend-down { color: var(--danger); }

/* KPI 卡片：整卡可点（拉伸链接，避免 <a> 嵌套 <a> 导致 DOM 断裂） */
.kpi-card { position: relative; display: flex; transition: border-color .15s, box-shadow .15s, transform .15s; }
.kpi-card .kpi { flex: 1; min-height: 80px; justify-content: space-between; }
.kpi-stretch { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.kpi-card:hover { border-color: var(--brand-2); box-shadow: 0 8px 22px rgba(15, 40, 36, .08); transform: translateY(-1px); }
.kpi-card:hover .drill { text-decoration: underline; }
.kpi-foot-link { position: relative; z-index: 2; color: var(--brand-2); }
.kpi-foot-link:hover { text-decoration: underline; }

/* 14 天迷你柱状图：数值 / 柱 / 日期三段对齐 */
.sparkbars { display: flex; align-items: flex-end; gap: 8px; height: 200px; }
.spark-col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; color: inherit; text-decoration: none; min-width: 0; }
.spark-col:hover { text-decoration: none; }
.spark-val { font-size: var(--fs-sm); line-height: 1.2; color: var(--muted); font-variant-numeric: tabular-nums; }
.spark-bar { width: 100%; display: block; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--brand-2), var(--brand)); }
.spark-bar.is-today { background: linear-gradient(180deg, var(--gold-light), var(--gold)); }
.spark-lab { font-size: var(--fs-sm); line-height: 1.2; color: var(--muted); white-space: nowrap; }
.spark-col:hover .spark-val, .spark-col:hover .spark-lab { color: var(--ink); }
@media (max-width: 720px) {
    .sparkbars { overflow-x: auto; padding-bottom: 4px; }
    .spark-col { min-width: 30px; }
    .kpi-card .kpi { min-height: 72px; }
}

/* 按钮 */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: var(--h-ctl); padding: 0 14px; border-radius: var(--r-md);
    border: 1px solid var(--line-strong); background: #fff; color: var(--ink);
    font-family: inherit; font-size: var(--fs-base); font-weight: 500; cursor: pointer;
    transition: all .15s; white-space: nowrap; text-decoration: none;
}
.btn:hover { border-color: #b8c7c3; background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-gold { background: var(--gold-btn); border-color: var(--gold-btn); color: #fff; }
.btn-gold:hover { background: var(--gold-btn-hover); border-color: var(--gold-btn-hover); color: #fff; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #9a2f2f; color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line); }
.btn-sm { height: var(--h-ctl-sm); padding: 0 10px; font-size: var(--fs-base); border-radius: var(--r-sm); }
.btn-lg { height: 46px; padding: 0 22px; font-size: var(--fs-lg); border-radius: 10px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* 注意：这里不能写 font: inherit —— 简写会把 font-size 一起重置，
   让「link-btn tiny」这类组合失效（.tiny 的 12px 被吃掉）。 */
.link-btn { border: 0; background: none; color: var(--brand-2); font-family: inherit; font-weight: inherit; line-height: inherit; cursor: pointer; padding: 0; }
.link-btn:hover { text-decoration: underline; }

/* 表单 */
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 500; }
.field-hint { font-size: var(--fs-sm); color: var(--muted); }
.input, .select, .textarea {
    width: 100%; height: var(--h-ctl); padding: 0 11px;
    border: 1px solid var(--line-strong); border-radius: 10px;
    background: #fff; color: var(--ink); font-family: inherit; font-size: var(--fs-md);
    transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; min-height: 92px; padding: 9px 11px; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus {
    outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(14, 124, 111, .12);
}
.input-sm { height: var(--h-ctl-sm); font-size: var(--fs-base); }
.select-sm { height: var(--h-ctl-sm); font-size: var(--fs-base); padding-top: 4px; padding-bottom: 4px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .span-2 { grid-column: span 2; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-base); color: var(--ink-2); }
.check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--brand); }
.search-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.search-bar .input, .search-bar .select { width: auto; min-width: 170px; }
.inline-form { display: inline-flex; margin: 0; }

/* 表格 */
.table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.table { font-size: var(--fs-base); }
.table th {
    text-align: left; font-weight: 600; font-size: var(--fs-sm); letter-spacing: .03em;
    color: var(--muted); background: var(--surface-2);
    padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fafcfb; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .strong { font-weight: 600; }
.table-compact td, .table-compact th { padding: 7px 10px; }
.table-link { font-weight: 500; }

/* 徽标 / 标签 */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    height: 22px; padding: 0 8px; border-radius: 999px;
    font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
}
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-muted { background: #eef2f1; color: var(--muted); }
.badge-info { background: var(--brand-soft); color: var(--brand); }
.badge-gold { background: var(--gold-soft); color: var(--gold-text); }
.tag { display: inline-block; padding: 1px 7px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); margin-right: 4px; }
.pill-note { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: var(--fs-sm); }

/* 提示 / 空状态 */
.alert { padding: 11px 14px; border-radius: 10px; margin-bottom: 14px; font-size: var(--fs-base); border: 1px solid transparent; }
.alert-success { background: var(--ok-soft); color: #1c6b42; border-color: #c9e8d5; }
.alert-error { background: var(--danger-soft); color: #8f2f2f; border-color: #f2cccc; }
.alert-warn { background: var(--warn-soft); color: #855413; border-color: #f0dcb8; }
.alert-info { background: var(--brand-soft); color: var(--brand); border-color: #cfe5e1; }
.empty { padding: 34px 16px; text-align: center; color: var(--muted); font-size: var(--fs-base); }
.empty-icon { font-size: var(--fs-4xl); display: block; margin-bottom: 8px; opacity: .5; }

/* 分栏 / 信息列表 */
.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; }
.info-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.info-item { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.info-label { font-size: var(--fs-sm); color: var(--muted); }
.info-value { font-size: var(--fs-md); font-weight: 500; }
.info-list.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 兼容别名：部分详情页沿用 info-grid 命名 */
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.info-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 审批流程步骤 */
.flow-steps { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.flow-step { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); min-width: 150px; }
.flow-step + .flow-step::before { content: '→'; position: relative; left: -12px; color: var(--muted); }
.flow-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; background: #e6e9ee; color: var(--muted); }
.flow-step.is-done { border-color: #c9e8d5; background: var(--ok-soft); }
.flow-step.is-done .flow-dot { background: var(--ok); color: #fff; }
.flow-step.is-active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.flow-step.is-active .flow-dot { background: var(--brand); color: #fff; }
@media (max-width: 720px) { .flow-steps { flex-direction: column; } .flow-step + .flow-step::before { content: '↓'; left: 0; } }

/* 描述列表 / 行列表 / 提示面板 */
.desc-list { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 9px 12px; margin: 0; font-size: var(--fs-base); }
.desc-list dt { color: var(--muted); font-size: var(--fs-sm); }
.desc-list dd { margin: 0; font-weight: 500; }

/* ?????????????????????? */
.rel-list { display: flex; flex-direction: column; gap: 8px; }
.rel-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: inherit; transition: border-color .15s, background .15s; }
.rel-item:hover { border-color: var(--brand-2); background: var(--brand-soft); }
.rel-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rel-label { font-size: var(--fs-base); font-weight: 600; }
.rel-meta { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.rel-arrow { color: var(--brand-2); flex: 0 0 auto; }
.list-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.list-row:last-child { border-bottom: 0; }
.panel { border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 12px 14px; }
.panel-title { font-weight: 600; font-size: var(--fs-lg); margin-bottom: 8px; }
/* 卡片内的次级小标题（14px），用于比 card-title 低一档的分组 */
.sub-title { font-size: var(--fs-md); font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.panel-warn { background: var(--warn-soft); border-color: #f0dcb8; }
.gate-list { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-base); color: var(--ink-2); line-height: 1.65; }
.gate-list strong { margin-right: 6px; color: var(--ink); }
.form-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.form-inline .select { flex: 1; }
.input-lg { height: 46px; font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.quick-amounts { display: flex; gap: 6px; flex-wrap: wrap; }
.grow { flex: 1; }
.strong { font-weight: 600; }
.link { color: var(--brand-2); text-decoration: none; }
.link:hover { text-decoration: underline; }
.text-success { color: var(--ok); }

/* tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tab {
    padding: 9px 14px; border: 0; background: none; color: var(--muted);
    font: inherit; font-size: var(--fs-base); cursor: pointer; border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--brand); border-bottom-color: var(--gold); font-weight: 600; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* 时间线 */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-2); margin-top: 7px; flex: 0 0 8px; }
.timeline-body { flex: 1; }
.timeline-time { font-size: var(--fs-sm); color: var(--muted); }

/* 进度条 */
.bar { height: 7px; border-radius: 999px; background: #eef2f1; overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-2), #45a392); }
.bar.gold > span { background: linear-gradient(90deg, var(--gold-light), var(--gold)); }

/* 趋势柱状图 */
.chart-bars { display: flex; align-items: flex-end; gap: 5px; height: 188px; padding-top: 10px; overflow-x: auto; }
.chart-col { flex: 1 0 22px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; min-width: 22px; }
.chart-bar { width: 100%; max-width: 26px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--brand-2), var(--brand)); min-height: 2px; transition: opacity .15s; }
.chart-col:hover .chart-bar { opacity: .75; }
.chart-label { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }

/* 登录 */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; background: #f2f6f5; }
.login-visual {
    background: radial-gradient(1200px 600px at 20% 10%, #1d6b5f 0%, #123b36 48%, #0a2622 100%);
    color: #eaf3f0; padding: 54px 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.login-visual::after {
    content: ""; position: absolute; right: -120px; bottom: -160px; width: 520px; height: 520px;
    border-radius: 50%; border: 1px solid rgba(217, 178, 109, .18); box-shadow: 0 0 0 60px rgba(217, 178, 109, .05), 0 0 0 140px rgba(217, 178, 109, .03);
}
.login-brand { display: flex; align-items: center; gap: 14px; }
.login-brand .brand-mark { width: 46px; height: 46px; font-size: var(--fs-xl); }
.login-brand strong { font-size: var(--fs-h1); letter-spacing: .02em; }
.login-brand small { display: block; color: #a9c4be; font-size: var(--fs-sm); margin-top: 2px; }
.login-hero { max-width: 480px; position: relative; z-index: 1; }
.login-hero h1 { color: #fff; font-size: var(--fs-5xl); line-height: 1.3; letter-spacing: -.02em; }
.login-hero h1 em { font-style: normal; color: var(--gold-light); }
.login-hero p { color: #b7cdc8; margin-top: 16px; font-size: var(--fs-md); line-height: 1.8; }
.login-points { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.login-point { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-base); color: #c8dad6; }
.login-point i { color: var(--gold-light); font-style: normal; }
.login-meta { font-size: var(--fs-sm); color: #7f9d97; position: relative; z-index: 1; }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.login-card { width: min(400px, 100%); }
.login-card h2 { font-size: var(--fs-3xl); }
.login-card .page-sub { margin-bottom: 24px; }
.login-card .field { margin-bottom: 14px; }
.login-card .input { height: 46px; font-size: var(--fs-lg); }
.login-accounts { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.login-accounts-title { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 8px; letter-spacing: .04em; }
.login-account-list { display: flex; flex-wrap: wrap; gap: 6px; }
.login-account {
    border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 4px 9px;
    font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; font-family: inherit;
}
.login-account:hover { border-color: var(--brand-2); color: var(--brand); }

/* POS 收银台 */
.pos-shell { min-height: 100vh; display: flex; flex-direction: column; background: #eef3f2; }
.pos-topbar {
    height: 58px; background: #10362f; color: #eaf3f0; display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; gap: 14px; flex-wrap: wrap;
}
.pos-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.pos-brand .brand-mark { width: 32px; height: 32px; border-radius: 10px; font-size: var(--fs-base); }
.pos-top-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pos-top-actions .btn { height: 32px; font-size: var(--fs-base); }
.pos-top-actions .btn-ghost { color: #cfe0dc; }
.pos-top-actions .btn-ghost:hover { background: rgba(255, 255, 255, .08); border-color: transparent; color: #fff; }
.pos-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 386px; gap: 14px; padding: 14px; min-height: 0; }
.pos-left { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.pos-search { display: flex; gap: 8px; }
.pos-search .input { height: 44px; font-size: var(--fs-lg); }
.pos-search .input--filter { max-width: 200px; }
.pos-search .btn { height: 44px; }
.pos-products { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; align-content: start; padding-right: 2px; }
.pos-product {
    background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px;
    cursor: pointer; transition: all .14s; text-align: left; font-family: inherit;
    display: flex; flex-direction: column; gap: 5px; position: relative;
}
.pos-product:hover { border-color: var(--brand-2); box-shadow: 0 4px 14px rgba(15, 95, 87, .12); transform: translateY(-1px); }
.pos-product .name { font-weight: 600; font-size: var(--fs-md); line-height: 1.35; }
.pos-product .spec { font-size: var(--fs-sm); color: var(--muted); }
.pos-product .price { font-size: var(--fs-xl); font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.pos-product .price small { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.pos-product .stock { font-size: var(--fs-sm); color: var(--muted); }
.pos-product .badge { position: absolute; top: 8px; right: 8px; }
.pos-cart { background: #fff; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.pos-cart-head { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.pos-holds { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pos-holds summary { padding: 8px 16px; cursor: pointer; color: var(--ink-2); }
.pos-holds-list { padding: 0 16px 8px; display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow-y: auto; }
.pos-hold-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.pos-points { border-bottom: 1px solid var(--line); background: #fff; }
.pos-points .input-sm { margin: 3px 0; }
.pos-member { padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pos-member-empty { font-size: var(--fs-base); color: var(--muted); }
.pos-member-card { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.pos-member-name { font-weight: 600; font-size: var(--fs-md); }
.pos-member-meta { font-size: var(--fs-sm); color: var(--muted); }
.pos-cart-items { flex: 1; overflow-y: auto; padding: 4px 8px; min-height: 120px; }
.pos-line { display: flex; align-items: center; gap: 8px; padding: 9px 6px; border-bottom: 1px dashed var(--line); }
.pos-line:last-child { border-bottom: 0; }
.pos-line-name { flex: 1; font-size: var(--fs-base); line-height: 1.35; }
.pos-line-price { font-size: var(--fs-sm); color: var(--muted); }
.qty { display: flex; align-items: center; gap: 4px; }
.qty button { width: 24px; height: 24px; border-radius: 8px; border: 1px solid var(--line-strong); background: #fff; cursor: pointer; font-size: var(--fs-md); line-height: 1; }
.qty span { min-width: 22px; text-align: center; font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.pos-line-amount { width: 64px; text-align: right; font-size: var(--fs-base); font-weight: 600; font-variant-numeric: tabular-nums; }
.pos-cart-foot { padding: 14px 16px; border-top: 1px solid var(--line); background: #fff; }
.pos-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.pos-total .label { font-size: var(--fs-sm); color: var(--muted); }
.pos-total .value { font-size: var(--fs-4xl); font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.pos-pay-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.pay-type { position: relative; }
.pay-type input { position: absolute; opacity: 0; pointer-events: none; }
.pay-type span {
    display: flex; align-items: center; justify-content: center; height: 36px; border: 1px solid var(--line-strong);
    border-radius: 10px; font-size: var(--fs-base); cursor: pointer; background: #fff; color: var(--ink-2);
}
.pay-type input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.pos-elder-tip { font-size: var(--fs-sm); color: var(--warn); background: var(--warn-soft); border-radius: 8px; padding: 7px 9px; margin-bottom: 9px; line-height: 1.5; }
.pos-receipt { max-width: 560px; margin: 30px auto; }
.receipt { background: #fff; border-radius: 12px; padding: 28px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.receipt-head { text-align: center; border-bottom: 1px dashed var(--line-strong); padding-bottom: 16px; margin-bottom: 16px; }
.receipt-head h2 { font-size: var(--fs-2xl); }
.receipt-lines { width: 100%; font-size: var(--fs-base); }
.receipt-lines td { padding: 5px 0; }
.receipt-total { border-top: 1px dashed var(--line-strong); margin-top: 12px; padding-top: 12px; font-size: var(--fs-lg); font-weight: 700; }
.receipt-foot { text-align: center; color: var(--muted); font-size: var(--fs-sm); margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 12px; }

/* 会员卡 */
.member-hero { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.member-avatar {
    width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(140deg, var(--brand-2), var(--brand));
    color: #fff; display: grid; place-items: center; font-size: var(--fs-h1); font-weight: 600; flex: 0 0 54px;
}
.member-title { display: flex; flex-direction: column; gap: 3px; }
.member-title h1 { font-size: var(--fs-h1); }
.member-title .meta { color: var(--muted); font-size: var(--fs-sm); display: flex; gap: 10px; flex-wrap: wrap; }
.member-stats { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.member-stat { text-align: right; }
.member-stat .v { font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.member-stat .k { font-size: var(--fs-sm); color: var(--muted); }
.user-card { border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; background: #fff; }
.user-card.is-default { border-color: #cfe5e1; background: #fbfdfc; }
.user-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.user-card-name { font-weight: 600; font-size: var(--fs-md); }
.user-health { margin-top: 8px; font-size: var(--fs-sm); color: var(--ink-2); display: flex; flex-direction: column; gap: 3px; }
.user-health b { color: var(--muted); font-weight: 500; }

/* 卡片视觉（储值卡） */
.sv-card {
    border-radius: 16px; padding: 18px; color: #fff; position: relative; overflow: hidden;
    background: linear-gradient(135deg, #15594f, #0c3733 68%, #092a26);
    box-shadow: 0 10px 24px rgba(12, 55, 51, .18);
}
.sv-card::after { content: ""; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(217, 178, 109, .3); box-shadow: 0 0 0 26px rgba(217, 178, 109, .06); }
.sv-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.sv-card-brand { font-size: var(--fs-sm); letter-spacing: .12em; color: #cfe0dc; }
.sv-card-type { font-size: var(--fs-sm); border: 1px solid rgba(217, 178, 109, .5); color: #e8c98f; padding: 2px 8px; border-radius: 999px; }
.sv-card-no { font-size: var(--fs-lg); letter-spacing: .12em; margin-top: 18px; font-variant-numeric: tabular-nums; }
.sv-card-balance { font-size: var(--fs-4xl); font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
.sv-card-balance small { font-size: var(--fs-sm); font-weight: 500; color: #b7cdc8; margin-right: 4px; }
.sv-card-foot { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: #a9c4be; margin-top: 12px; }

/* 合规 */
.alert-item { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px dashed var(--line); align-items: flex-start; }
.alert-item:last-child { border-bottom: 0; }
.alert-level { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: 0 0 8px; background: var(--warn); }
.alert-level.serious { background: var(--danger); }
.alert-body { flex: 1; }
.alert-title { font-weight: 600; font-size: var(--fs-md); line-height: 1.45; }
.alert-meta { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; line-height: 1.5; }
.gate-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gate { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface-2); }
.gate .num { font-size: var(--fs-sm); color: var(--gold-text); font-weight: 700; letter-spacing: .08em; }
.gate .name { font-size: var(--fs-base); font-weight: 600; margin: 2px 0 4px; }
.gate .desc { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }

/* 错误页 */
.error-page { display: grid; place-items: center; min-height: 100vh; background: var(--bg); }
.error-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 42px; text-align: center; max-width: 460px; box-shadow: var(--shadow); }
.error-code { font-size: var(--fs-6xl); font-weight: 700; color: var(--gold); line-height: 1; }
.error-card h1 { margin: 8px 0 6px; }
.error-card .btn { margin-top: 18px; }

/* 打印 */
@media print {
    .sidebar, .topbar, .app-foot, .page-actions, .btn, .page-watermark { display: none !important; }
    .content { padding: 0; }
    body { background: #fff; }
    .card { box-shadow: none; border-color: #ddd; }
}

/* 大字 / 适老化模式 */
body.elder-mode { font-size: var(--fs-xl); }
body.elder-mode .sidebar { --sidebar-w: 252px; }
body.elder-mode .nav-link { font-size: var(--fs-lg); padding: 12px 12px; }
body.elder-mode .nav-group-title { font-size: var(--fs-md); }
body.elder-mode .topbar { height: 72px; }
body.elder-mode .topbar-left { font-size: var(--fs-lg); }
body.elder-mode .content { padding: 26px 28px 48px; }
body.elder-mode .page-head h1 { font-size: var(--fs-4xl); }
body.elder-mode .page-sub { font-size: var(--fs-lg); }
body.elder-mode .card { padding: 24px; }
body.elder-mode .kpi-value { font-size: var(--fs-5xl); }
body.elder-mode .kpi-label { font-size: var(--fs-md); }
body.elder-mode .table { font-size: var(--fs-lg); }
body.elder-mode .table th { font-size: var(--fs-base); padding: 12px; }
body.elder-mode .table td { padding: 13px 12px; }
body.elder-mode .btn { height: 46px; padding: 0 18px; font-size: var(--fs-lg); }
body.elder-mode .btn-sm { height: 38px; font-size: var(--fs-md); }
body.elder-mode .btn-lg { height: 56px; font-size: var(--fs-xl); }
body.elder-mode .input, body.elder-mode .select { height: 48px; font-size: var(--fs-lg); }
body.elder-mode .textarea { font-size: var(--fs-lg); }
body.elder-mode .field-label { font-size: var(--fs-md); }
body.elder-mode .badge { height: 25px; font-size: var(--fs-base); padding: 0 10px; }
body.elder-mode .info-label { font-size: var(--fs-base); }
body.elder-mode .info-value { font-size: var(--fs-lg); }
body.elder-mode .pos-product .name { font-size: var(--fs-lg); }
body.elder-mode .pos-product .price { font-size: var(--fs-2xl); }
body.elder-mode .pay-type span { height: 46px; font-size: var(--fs-lg); }
body.elder-mode .pos-total .value { font-size: var(--fs-5xl); }
body.elder-mode .sv-card-balance { font-size: var(--fs-5xl); }
body.elder-mode .hint-row, body.elder-mode .tiny-hide { display: none; }

/* 响应式 */
@media (max-width: 1240px) {
    .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .split { grid-template-columns: 1fr; }
    .gate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pos-main { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 900px) {
    .app-shell { flex-direction: column; }
    .sidebar { width: 100%; flex: none; height: auto; position: static; }
    .nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 12px; }
    .nav-group { margin-top: 6px; }
    .nav-group-title { display: none; }
    .nav-link { padding: 7px 10px; font-size: var(--fs-base); }
    .sidebar-foot { display: none; }
    .login-wrap { grid-template-columns: 1fr; }
    .login-visual { padding: 34px 28px; }
    .login-hero h1 { font-size: var(--fs-4xl); }
    .login-meta { display: none; }
    .pos-main { grid-template-columns: 1fr; }
    .pos-cart { min-height: 320px; }
    .grid-3, .grid-2, .form-grid { grid-template-columns: 1fr; }
    .form-grid .span-2 { grid-column: span 1; }
    .content { padding: 16px; }
    .topbar { padding: 0 16px; }
    .member-stats { margin-left: 0; width: 100%; justify-content: space-between; }
    .info-list.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .grid-4, .grid-5 { grid-template-columns: 1fr; }
    .kpi-value { font-size: var(--fs-h1); }
    .page-head h1 { font-size: var(--fs-2xl); }
    .table { font-size: var(--fs-sm); }
    .table th, .table td { padding: 8px; }
    .topbar-store, .topbar-divider { display: none; }
    .pos-pay-types { grid-template-columns: repeat(2, 1fr); }
    .gate-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   v1.13 平台化：主题 / 密度 / 折叠导航 / 顶栏 / 抽屉 / 移动端
   ============================================================ */

/* 主题皮肤：只换配色，不换结构 */
body.theme-teal { --brand:#0d4f6b; --brand-2:#0f7b9e; --brand-dark:#0a3f56; --brand-soft:#e4f2f7; --gold:#b98a3e; }
body.theme-gold { --brand:#6b4a12; --brand-2:#96691f; --brand-dark:#553a0e; --brand-soft:#f8f1e2; --gold:#b98a3e; }
body.theme-slate { --brand:#2f3d4a; --brand-2:#4a6076; --brand-dark:#232e38; --brand-soft:#e9eef3; --gold:#b0894a; }
body.theme-teal .sidebar { background:linear-gradient(178deg,#0f3346 0%,#0a2735 78%,#071e29 100%); }
body.theme-gold .sidebar { background:linear-gradient(178deg,#3b2b12 0%,#2a1f0d 78%,#1f1609 100%); }
body.theme-slate .sidebar { background:linear-gradient(178deg,#232d36 0%,#1a222a 78%,#131920 100%); }

/* 信息密度 */
body.density-compact .card { padding:14px; }
body.density-compact .content { padding:16px 20px 32px; }
body.density-compact .table td, body.density-compact .table th { padding:7px 10px; }
body.density-compact .page-head { margin-bottom:14px; }
body.density-loose .card { padding:24px; }
body.density-loose .content { padding:28px 30px 48px; }
body.density-loose .table td { padding:14px 12px; }

/* 折叠导航 */
.sidebar { transition: width .18s ease, flex-basis .18s ease; }
.sidebar-head { display:flex; align-items:center; gap:6px; }
.sidebar-head .brand { flex:1; min-width:0; }
.sidebar-collapse { border:0; background:rgba(255,255,255,.06); color:#a9c4be; width:24px; height:24px; border-radius: 8px; cursor:pointer; font-size: var(--fs-sm); line-height:1; margin-right:10px; }
.sidebar-collapse:hover { background:rgba(255,255,255,.14); color:#fff; }
body.sidebar-collapsed .sidebar { width:64px; flex:0 0 64px; }
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .nav-text,
body.sidebar-collapsed .nav-group-title,
body.sidebar-collapsed .sidebar-foot { display:none; }
body.sidebar-collapsed .brand { justify-content:center; padding:18px 8px; }
body.sidebar-collapsed .nav { padding:4px 8px 16px; }
body.sidebar-collapsed .nav-link { justify-content:center; padding:10px 0; }
body.sidebar-collapsed .nav-icon { width:auto; font-size: var(--fs-lg); }
body.sidebar-collapsed .sidebar-collapse { transform:rotate(180deg); margin-right:4px; }
body.sidebar-collapsed .nav-group { margin-top:8px; border-top:1px solid rgba(255,255,255,.05); padding-top:4px; }
body.sidebar-collapsed .nav-group:first-child { border-top:0; }

/* 导航分组折叠 */
.nav-group > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
.nav-group > summary::-webkit-details-marker { display:none; }
.nav-group > summary::after { content:"›"; font-size: var(--fs-sm); color:#8aa9a3; margin-right:10px; transition:transform .15s; }
.nav-group[open] > summary::after { transform:rotate(90deg); }
.nav-group > summary:hover { color:#a9c4be; }
.nav-group .nav-link { margin-left:0; }

/* 顶栏细化 */
.topbar { gap:12px; }
.topbar-left { min-width:0; flex:0 1 auto; }
.crumbs { display:flex; align-items:center; gap:6px; min-width:110px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crumb-root { color:var(--muted); }
.crumb-group { color:var(--ink-2); }
.crumb-current { font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; max-width: 240px; min-width: 56px; }
.crumb-sep { color:var(--muted); }
.back-btn { flex:0 0 auto; }
.topbar-search { flex:0 8 280px; max-width:420px; min-width:170px; display:flex; align-items:center; gap:0; background:var(--surface-2); border:1px solid var(--line); border-radius: 10px; padding:0 4px 0 10px; height:32px; }
.topbar-search input { flex:1; min-width:0; border:0; background:transparent; font:inherit; font-size: var(--fs-base); outline:none; color:var(--ink); }
.topbar-search button { border:0; background:none; color:var(--muted); cursor:pointer; font-size: var(--fs-md); padding:0 6px; }
.topbar-search:focus-within { border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(14,124,111,.1); }
.icon-btn { position:relative; display:inline-grid; place-items:center; width:32px; height:32px; border-radius: 8px; border:1px solid transparent; background:transparent; color:var(--ink-2); cursor:pointer; text-decoration:none; }
.icon-btn:hover { background:var(--surface-2); border-color:var(--line); text-decoration:none; }
.dot-badge { position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--danger); box-shadow:0 0 0 2px #fff; }
.only-mobile { display:none; }
.quick-menu { position:relative; }
.quick-trigger { list-style:none; }
.quick-trigger::-webkit-details-marker { display:none; }
.quick-badge { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; margin-left:4px; border-radius: 999px; background:var(--danger); color:#fff; font-size: var(--fs-sm); line-height:1; }
.quick-panel { position:absolute; right:0; top:calc(100% + 8px); width:300px; background:#fff; border:1px solid var(--line); border-radius: 12px; box-shadow:0 18px 44px rgba(15,40,36,.16); padding:10px; z-index:80; }
.quick-panel-head { display:flex; justify-content:space-between; align-items:center; padding:2px 6px 8px; border-bottom:1px solid var(--line); }
.quick-row { display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius: 8px; color:var(--ink); font-size: var(--fs-base); }
.quick-row:hover { background:var(--surface-2); text-decoration:none; }
.quick-icon { width:22px; text-align:center; color:var(--brand-2); }
.quick-panel-foot { display:flex; justify-content:space-between; gap:8px; border-top:1px solid var(--line); margin-top:6px; padding:8px 8px 2px; font-size: var(--fs-sm); }
.role-switch-form { display:flex; }
.role-switch { max-width:190px; }

/* 账号菜单（顶栏右上）：主题切换 + 个人入口 + 退出。
   之前这几个类没有样式，下拉面板会退化成透明文本压在页面内容上，所以必须成块定义。 */
.account-menu { position: relative; }
.account-chip {
    display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 8px 0 4px;
    border:1px solid transparent; border-radius: 10px; cursor:pointer; list-style:none;
    transition:background .16s, border-color .16s;
}
.account-chip::-webkit-details-marker { display:none; }
.account-chip:hover, .account-menu[open] .account-chip { background:var(--surface-2); border-color:var(--line); }
.account-avatar {
    width:26px; height:26px; border-radius: 8px; display:grid; place-items:center; flex:none;
    background:var(--brand-soft); color:var(--brand); font-weight:700; font-size: var(--fs-base);
}
.account-name { font-size: var(--fs-base); color:var(--ink); max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-chip .caret { font-size: var(--fs-2xs); color:var(--muted); }
.account-panel {
    position:absolute; right:0; top:calc(100% + 8px); width:276px; padding:12px;
    background:#fff; border:1px solid var(--line); border-radius: 12px;
    box-shadow:0 18px 44px rgba(15,40,36,.16); z-index:90;
}
.account-panel-head { display:flex; flex-direction:column; gap:2px; padding:2px 6px 10px; border-bottom:1px solid var(--line); }
.account-panel-head strong { font-size: var(--fs-md); font-weight: 600; color:var(--ink); }
.account-panel-meta { font-size: var(--fs-sm); color:var(--muted); }
.account-panel-org { font-size: var(--fs-sm); color:var(--ink-2); }
.account-section-title {
    display:flex; align-items:baseline; justify-content:space-between; gap:8px;
    padding:10px 6px 6px; font-size: var(--fs-sm); font-weight:600; color:var(--ink-2); letter-spacing:.02em;
}
.account-section-title span { font-size: var(--fs-2xs); font-weight:400; color:var(--muted); }
.account-reset { border:0; background:none; padding:0; font:inherit; font-size: var(--fs-2xs); font-weight:400; color:var(--brand-2); cursor:pointer; }
.account-reset:hover { text-decoration:underline; }
.theme-row { display:flex; gap:6px; padding:0 2px 2px; }
.theme-swatch {
    flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:7px 4px 6px; border:1px solid var(--line); border-radius: 10px; background:#fff;
    color:var(--ink-2); font:inherit; font-size: var(--fs-2xs); cursor:pointer;
    transition:border-color .16s, background .16s, box-shadow .16s;
}
.theme-swatch i { width:15px; height:15px; border-radius:50%; background:#0f5f57; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55); }
.theme-swatch[data-theme="teal"] i { background:#0d6b86; }
.theme-swatch[data-theme="gold"] i { background:#96691f; }
.theme-swatch[data-theme="slate"] i { background:#3c4a57; }
.theme-swatch span { line-height:1.2; white-space:nowrap; }
.theme-swatch:hover { background:var(--surface-2); border-color:var(--line-strong); color:var(--ink); }
.theme-swatch.is-on { border-color:var(--brand-2); background:#fff; color:var(--ink); font-weight:600; box-shadow:0 0 0 2px rgba(14,124,111,.14); }
.account-links { display:flex; flex-direction:column; gap:2px; padding:8px 0; margin-top:4px; border-top:1px solid var(--line); }
.account-links a { display:block; padding:7px 8px; border-radius: 8px; font-size: var(--fs-base); color:var(--ink); }
.account-links a:hover { background:var(--surface-2); text-decoration:none; }
.account-actions { display:flex; flex-direction:column; gap:2px; padding-top:6px; border-top:1px solid var(--line); }
.account-action-form { margin:0; }
.account-action {
    display:block; width:100%; text-align:left; padding:7px 8px; border:0; border-radius: 8px;
    background:none; color:var(--ink-2); font:inherit; font-size: var(--fs-base); cursor:pointer;
}
.account-action:hover { background:var(--surface-2); color:var(--ink); }
.account-action-danger { color:var(--danger); }
.account-action-danger:hover { background:var(--danger-soft); color:var(--danger); }

/* 说明抽屉 */
.help-drawer { position:fixed; top:0; right:0; bottom:0; width:min(380px,92vw); background:#fff; border-left:1px solid var(--line); box-shadow:-18px 0 44px rgba(15,40,36,.14); transform:translateX(102%); transition:transform .22s ease; z-index:120; display:flex; flex-direction:column; }
.help-drawer.open { transform:none; }
.help-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:18px 18px 12px; border-bottom:1px solid var(--line); }
.help-kicker { font-size: var(--fs-sm); letter-spacing:.14em; color:var(--gold-text); text-transform:uppercase; margin-bottom:3px; }
.help-body { padding:16px 18px 24px; overflow-y:auto; flex:1; }
.help-text { font-size: var(--fs-base); color:var(--ink-2); line-height:1.8; }
.help-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); }
.help-meta { margin-top:14px; }
.drawer-overlay { position:fixed; inset:0; background:rgba(15,32,28,.32); opacity:0; pointer-events:none; transition:opacity .2s; z-index:110; }
.drawer-overlay.open { opacity:1; pointer-events:auto; }

/* 列表工具条（JS 注入到页头） */
.tool-group { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; padding:3px; border:1px dashed var(--line-strong); border-radius: 10px; background:var(--surface-2); }
.tool-group .btn { background:#fff; }
/* 工具条按钮取 32px，加上 3px 内边距后整组正好 38px，与页头按钮齐平 */
.page-actions .tool-group .btn { height: var(--h-ctl-sm); border-radius: var(--r-sm); }
.bulk-all-label { display:inline-flex; align-items:center; gap:4px; padding:0 6px; }
.bulk-check { width:15px; height:15px; accent-color:var(--brand); cursor:pointer; }
.table .bulk-cell { width:34px; text-align:center; }
.table .bulk-cell input { margin:0; }
tr.row-selected { background:#f2faf7 !important; }

/* 分页 */
.pager { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:12px; }
.pager-info { font-size: var(--fs-sm); color:var(--muted); }
.pager-links { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.pager-num { display:inline-grid; place-items:center; min-width:28px; height:28px; border-radius: 8px; border:1px solid var(--line); background:#fff; font-size: var(--fs-sm); color:var(--ink-2); text-decoration:none; padding:0 6px; }
.pager-num:hover { border-color:var(--brand-2); color:var(--brand); text-decoration:none; }
.pager-num.active { background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }
.pager .btn[aria-disabled="true"] { opacity:.45; pointer-events:none; }

/* 弹层 / 面板最大化 */
.card { position:relative; }
.card-max-btn { position:absolute; top:10px; right:10px; z-index:5; width:24px; height:24px; border-radius: 8px; border:1px solid transparent; background:rgba(255,255,255,.86); color:var(--muted); cursor:pointer; font-size: var(--fs-sm); line-height:1; opacity:0; transition:opacity .15s; }
.card:hover > .card-max-btn, .card-max-btn:focus { opacity:1; }
.card-max-btn:hover { border-color:var(--line-strong); color:var(--ink); }
.card.card-max { position:fixed; inset:18px; z-index:140; margin:0; overflow:auto; box-shadow:0 30px 80px rgba(15,40,36,.28); padding:22px; }
.card.card-max .card-max-btn { opacity:1; }
body.has-card-max { overflow:hidden; }
.modal, .dialog, .modal-backdrop { }
.modal { position:fixed; inset:0; z-index:150; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(12,30,26,.4); }
.modal.open { display:flex; }
.modal-card { position:relative; background:#fff; border-radius: 16px; border:1px solid var(--line); box-shadow:0 30px 80px rgba(15,40,36,.3); width:min(720px,100%); max-height:88vh; display:flex; flex-direction:column; padding:0; }
.modal-card.max { width:98vw; max-height:96vh; height:96vh; }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); }
.modal-body { padding:16px 18px 20px; overflow:auto; }
.modal-foot { padding:12px 18px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px; }
.modal-actions { display:flex; align-items:center; gap:4px; }
.modal-actions button { border:0; background:transparent; color:var(--muted); cursor:pointer; width:26px; height:26px; border-radius: 8px; font-size: var(--fs-base); }
.modal-actions button:hover { background:var(--surface-2); color:var(--ink); }

/* 权限矩阵 */
.perm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; }
.perm-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius: 10px; background:#fff; font-size: var(--fs-base); cursor:pointer; }
.perm-item.on { border-color:#cfe5e1; background:#f6fbfa; }
.perm-item em { margin-left:auto; color:var(--muted); font-style:normal; font-size: var(--fs-xs); }
.perm-item input { width:15px; height:15px; accent-color:var(--brand); }

/* 统计卡片链接 */
.stat-link { display:block; color:inherit; text-decoration:none; transition:border-color .15s, transform .15s; }
.stat-link:hover { border-color:var(--brand-2); transform:translateY(-1px); text-decoration:none; }
.qr-box { border:1px dashed var(--line-strong); border-radius: 12px; padding:12px; background:#fff; text-align:center; }
.qr-box img { display:block; border-radius: 8px; }

/* 表单校验 */
.input.is-invalid, .select.is-invalid { border-color:var(--danger); box-shadow:0 0 0 3px rgba(179,58,58,.1); }
.field-error { color:var(--danger); font-size: var(--fs-sm); }

/* 骨架屏 */
.skeleton { position:relative; overflow:hidden; background:#eef2f1; border-radius: 8px; color:transparent !important; }
.skeleton::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation:sk 1.2s infinite; }
@keyframes sk { 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } }

/* 移动端底栏（桌面隐藏） */
.mobile-tabbar { display:none; }

/* ---------------- 移动端 / H5 ---------------- */
body.m-body { background:var(--bg); padding-bottom:72px; }
.m-topbar { position:sticky; top:0; z-index:40; height:54px; display:flex; align-items:center; gap:10px; padding:0 12px; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.m-title { flex:1; text-align:center; font-weight: 600; font-size: var(--fs-lg); }
.m-icon-btn { width:34px; height:34px; display:grid; place-items:center; border-radius: 10px; border:1px solid var(--line); background:#fff; color:var(--ink-2); text-decoration:none; font-size: var(--fs-md); }
.m-content { padding:14px 14px 24px; max-width:760px; margin:0 auto; }
.m-hero { background:linear-gradient(140deg,#15594f,#0c3733 70%); color:#fff; border-radius: 16px; padding:18px; box-shadow:0 12px 28px rgba(12,55,51,.18); }
.m-hero-store { font-size: var(--fs-sm); color:#a9c4be; letter-spacing:.04em; }
.m-hero-hi { font-size: var(--fs-base); margin-top:2px; color:#dfece9; }
.m-hero-kpi { display:flex; gap:22px; margin-top:16px; flex-wrap:wrap; }
.m-hero-kpi span { display:block; font-size: var(--fs-sm); color:#a9c4be; }
.m-hero-kpi strong { display:block; font-size: var(--fs-3xl); font-variant-numeric:tabular-nums; margin-top:2px; }
.m-hero-kpi small { font-size: var(--fs-sm); color:#c8dad6; }
.m-quickgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.m-quick { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 6px; background:#fff; border:1px solid var(--line); border-radius: 12px; color:var(--ink); font-size: var(--fs-sm); text-decoration:none; }
.m-quick:active { transform:scale(.98); }
.m-quick-icon { font-size: var(--fs-2xl); color:var(--brand-2); }
.m-statrow { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.m-stat { background:#fff; border:1px solid var(--line); border-radius: 12px; padding:10px 8px; text-align:center; color:inherit; text-decoration:none; }
.m-stat strong { display:block; font-size: var(--fs-xl); color:var(--brand); }
.m-stat span { font-size: var(--fs-sm); color:var(--muted); }
.m-card { background:#fff; border:1px solid var(--line); border-radius: 12px; padding:12px 14px; margin-top:12px; box-shadow:0 1px 2px rgba(15,40,36,.03); }
.m-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.m-card-head a { font-size: var(--fs-sm); }
.m-list-row { display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px dashed var(--line); color:inherit; text-decoration:none; }
.m-list-row:last-child { border-bottom:0; }
.m-list-title { font-size: var(--fs-md); font-weight:600; }
.m-list-meta { font-size: var(--fs-sm); color:var(--muted); margin-top:2px; }
.m-chevron { color:var(--line-strong); font-size: var(--fs-lg); }
.m-avatar { width:38px; height:38px; border-radius: var(--r-md); background:linear-gradient(140deg, var(--brand-2), var(--brand)); color:#fff; display:grid; place-items:center; font-weight:600; flex:0 0 38px; }
.m-avatar-lg { width:52px; height:52px; border-radius: 16px; font-size: var(--fs-2xl); }
.m-search { display:flex; gap:8px; }
.m-search .input { height:42px; }
.m-hint { font-size: var(--fs-sm); color:var(--muted); margin:10px 2px; }
.m-hint.center { text-align:center; }
.m-profile { display:flex; gap:12px; align-items:center; background:#fff; border:1px solid var(--line); border-radius: 12px; padding:14px; }
.m-profile-name { font-size: var(--fs-xl); font-weight:700; }
.m-form-card { background:#fff; border:1px solid var(--line); border-radius: 16px; padding:16px; }
.m-form-intro { font-size: var(--fs-base); color:var(--muted); margin-bottom:14px; line-height:1.7; }
.m-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.m-form-card .field-label { font-size: var(--fs-base); }
.m-form-card .input, .m-form-card .select { height:44px; font-size: var(--fs-lg); }
.req { color:var(--danger); font-style:normal; }
.m-actions { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.m-done { text-align:center; padding:36px 20px; background:#fff; border:1px solid var(--line); border-radius: 16px; }
.m-done-icon { width:64px; height:64px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; background:var(--ok-soft); color:var(--ok); font-size: var(--fs-5xl); }
.m-bottomnav { position:fixed; left:0; right:0; bottom:0; z-index:70; display:grid; grid-template-columns:repeat(5,1fr); background:rgba(255,255,255,.97); backdrop-filter:blur(12px); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.m-nav-item { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px 7px; font-size: var(--fs-sm); color:var(--muted); text-decoration:none; }
.m-nav-item.active { color:var(--brand); font-weight:600; }
.m-nav-icon { font-size: var(--fs-xl); }
.m-foot { text-align:center; font-size: var(--fs-sm); color:var(--muted); padding:10px 14px 76px; }
.m-foot .foot-copyright { color:var(--muted); }

/* 桌面 / 移动端切换 */
/* 面包屑优先：搜索框先收缩，右侧操作不压缩，避免整页横向滚动 */
.topbar-actions { flex: 0 0 auto; }
@media (max-width: 1500px) {
    /* 官网在页脚已有入口，手机填报在侧栏「移动端」有入口，宽屏先收起这两个 */
    .topbar-actions .btn-official,
    .topbar-actions .btn-mobile-entry { display: none; }
}
@media (max-width: 1380px) {
    .topbar-actions .btn-screen-entry { display: none; }
}
@media (max-width: 1180px) {
    .topbar-search { max-width:280px; }
    .role-switch { max-width:150px; }
}
@media (max-width: 1280px) {
    /* 1280 一档：数据大屏 / AI 能力侧栏已有入口，先收起，给面包屑留空间 */
    .topbar-actions .btn-screen-entry,
    .topbar-actions .ai-topbar-btn { display:none; }
    .topbar-actions { gap:8px; }
}
@media (max-width: 1160px) {
    /* 窄桌面（1024 一类）：再收「说明」与面包屑前缀，顶栏不挤压、不横向滚动 */
    .topbar-actions .help-trigger { display:none; }
    .crumb-root, .crumb-sep { display:none; }
    .crumbs { font-size: var(--fs-sm); }
    .topbar { padding: 0 18px; }
    .topbar-search { min-width: 120px; }
}
@media (max-width: 900px) {
    body { font-size: var(--fs-md); }
    .app-shell { display:block; }
    .sidebar { position:fixed; left:0; top:0; bottom:0; width:272px; flex:none; height:100vh; z-index:130; transform:translateX(-104%); transition:transform .22s ease; }
    body.sidebar-open .sidebar { transform:none; }
    body.sidebar-collapsed .sidebar { width:272px; flex-basis:auto; }
    body.sidebar-collapsed .nav-text,
    body.sidebar-collapsed .nav-group-title,
    body.sidebar-collapsed .brand-text,
    body.sidebar-collapsed .sidebar-foot { display:block; }
    body.sidebar-collapsed .nav-link { justify-content:flex-start; padding:9px 12px; }
    body.sidebar-collapsed .brand { justify-content:flex-start; padding:22px 20px 18px; }
    .sidebar-collapse { display:none; }
    .only-mobile { display:inline-grid; }
    .sidebar-overlay { position:fixed; inset:0; background:rgba(12,30,26,.42); z-index:125; opacity:0; pointer-events:none; transition:opacity .2s; }
    body.sidebar-open .sidebar-overlay { opacity:1; pointer-events:auto; }
    .topbar { height:56px; padding:0 12px; gap:8px; }
    .topbar-search { display:none; }
    .btn-screen-entry { display:none; }
    /* 手机上顶栏只留高频入口（待办 / 消息 / 账号），
       否则「AI 能力 + 说明 + 官网」把顶栏撑到 450px，整页横向滚动。 */
    .topbar-actions { gap:6px; min-width:0; }
    .topbar-actions .ai-topbar-btn,
    .topbar-actions .btn-official,
    .topbar-actions .help-trigger { display:none; }
    .topbar-actions .quick-trigger { padding:0 8px; }
    .crumbs { font-size: var(--fs-sm); }
    .crumb-root, .crumb-sep:first-of-type, .crumb-group { display:none; }
    .role-switch-form, .account-name, .help-trigger span { display:none; }
    .content { padding:14px 14px 86px; }
    .page-head { margin-bottom:14px; }
    .page-head h1 { font-size: var(--fs-2xl); }
    .page-sub { font-size: var(--fs-sm); }
    .page-actions { width:100%; }
    .mobile-tabbar { display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:100; background:rgba(255,255,255,.97); backdrop-filter:blur(12px); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
    .mobile-tab { display:flex; flex-direction:column; align-items:center; gap:1px; padding:7px 2px 6px; font-size: var(--fs-sm); color:var(--muted); text-decoration:none; }
    .mobile-tab span { font-size: var(--fs-xl); }
    .mobile-tab.active { color:var(--brand); font-weight:600; }
    .app-foot { padding-bottom:80px; }
    .help-drawer { width:min(360px,94vw); }
    .quick-panel { width:min(320px,88vw); }
    .card.card-max { inset:0; border-radius:0; padding:14px; }
    .tool-group { width:100%; }
}
@media (max-width: 560px) {
    .m-quickgrid { grid-template-columns:repeat(3,1fr); }
    .m-statrow { grid-template-columns:repeat(2,1fr); }
    .m-form-grid { grid-template-columns:1fr; }
    .page-actions .btn { height:32px; font-size: var(--fs-sm); padding:0 10px; }
    .card { padding:14px; border-radius: 12px; }
    .table { font-size: var(--fs-sm); }
    .table th, .table td { padding:7px 8px; }
}
@media print {
    .mobile-tabbar, .help-drawer, .drawer-overlay, .quick-panel, .topbar-search, .tool-group { display:none !important; }
}


/* 数据穿透：可点击 KPI / 列表行 / 预警行 */
.card-link { display:block; color:inherit; text-decoration:none; transition:border-color .15s, box-shadow .15s, transform .15s; }
.card-link:hover { border-color:var(--brand-2); box-shadow:0 8px 22px rgba(15,40,36,.08); transform:translateY(-1px); text-decoration:none; }
.drill { font-size: var(--fs-sm); color:var(--brand-2); font-weight:500; letter-spacing:0; }
.card-link:hover .drill { text-decoration:underline; }
.alert-link { color:inherit; text-decoration:none; border-radius: 8px; }
.alert-link:hover { background:var(--surface-2); text-decoration:none; }
tr.row-link { cursor:pointer; }
tr.row-link:hover { background:var(--surface-2); }
.tool-group .btn[aria-disabled="true"] { opacity:.5; }

/* ---------- 排班与人效（M35） ---------- */
.sched-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:0 0 12px; }
.sched-weeknav { display:flex; align-items:center; gap:8px; }
.sched-weeknav strong { font-size: var(--fs-base); }
.sched-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sched-actions form { margin:0; }
.sched-conflicts { display:flex; flex-direction:column; gap:6px; padding:0 0 12px; }
.sched-conflict { display:flex; align-items:flex-start; gap:8px; font-size: var(--fs-base); line-height:1.6; padding:7px 10px; border-radius: 10px; border:1px solid var(--line); background:#fff; }
.sched-conflict.is-danger { background:var(--danger-soft); border-color:#f2cccc; color:#7f2a2a; }
.sched-conflict.is-warn { background:var(--warn-soft); border-color:#f0dcb8; color:#7a5212; }
.sched-conflict .badge { flex:0 0 auto; }
.sched-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.sched-table td { vertical-align:top; }
.sched-table tr.is-today td { background:#fffdf5; }
.sched-table tr.sched-empty-row td { background:#fbfcfc; }
.sched-rules { display:grid; gap:10px; }
.sched-rules > div { display:flex; flex-direction:column; gap:2px; padding:9px 11px; border-radius: 10px; background:var(--surface-2); border:1px solid var(--line); }
.sched-rules strong { font-size: var(--fs-base); }
.sched-rules span { font-size: var(--fs-sm); color:var(--muted); line-height:1.6; }
@media (max-width: 900px) {
  .sched-table { font-size: var(--fs-sm); }
  .sched-toolbar { flex-direction:column; align-items:flex-start; }
  .sched-actions .btn { width:100%; }
  .sched-actions form { width:100%; }
  .sched-actions form .btn { width:100%; }
}

/* 移动端「我的班表」 */
.m-shift-list { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.m-shift-row { display:flex; gap:10px; align-items:flex-start; padding:7px 9px; border-radius: 10px; background:var(--surface-2); }
.m-shift-row.is-today { background:var(--gold-soft); }
.m-shift-day { flex:0 0 58px; font-size: var(--fs-sm); font-variant-numeric:tabular-nums; }
.m-shift-day em { display:block; font-style:normal; font-size: var(--fs-sm); color:var(--muted); }
.m-shift-body { display:flex; flex-wrap:wrap; gap:4px; }
.m-shift-body .tag { margin-right:0; }

/* ---------- H5 收银开单（M36） ---------- */
.mpos { padding-bottom: 78px; }
.mpos-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.mpos-store { flex:1; font-weight: 600; font-size: var(--fs-lg); }
.mpos-store em { display:block; font-style:normal; font-weight:400; font-size: var(--fs-sm); color:var(--muted); }
.mpos-member-btn { border:1px solid var(--line); background:#fff; color:var(--brand-2); border-radius: 999px; padding:7px 14px; font-size: var(--fs-base); }
.mpos-search { display:flex; gap:8px; }
.mpos-search .input { flex:1; }
.mpos-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:12px; }
.mpos-item { position:relative; display:flex; flex-direction:column; gap:3px; text-align:left; padding:11px 11px 9px; border:1px solid var(--line); border-radius: 12px; background:#fff; color:var(--ink); min-height:86px; }
.mpos-item:active { transform:scale(.985); }
.mpos-item.is-in { border-color:var(--brand-2); box-shadow:0 0 0 1px var(--brand-2) inset; }
.mpos-item-name { font-size: var(--fs-base); font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mpos-item-spec { font-size: var(--fs-sm); color:var(--muted); }
.mpos-item-foot { margin-top:auto; display:flex; align-items:baseline; justify-content:space-between; gap:6px; }
.mpos-item-foot b { color:var(--brand); font-size: var(--fs-md); }
.mpos-item-foot em { font-style:normal; font-size: var(--fs-sm); color:var(--muted); }
.mpos-item-badge { position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; line-height:20px; border-radius: 10px; background:var(--brand-2); color:#fff; font-size: var(--fs-sm); text-align:center; padding:0 5px; }
.mpos-empty { text-align:center; color:var(--muted); font-size: var(--fs-base); padding:28px 0; }
.mpos-bar { position:fixed; left:0; right:0; bottom:58px; z-index:35; display:flex; align-items:center; gap:12px; padding:9px 14px; background:rgba(255,255,255,.97); border-top:1px solid var(--line); backdrop-filter:blur(10px); }
.mpos-bar[hidden] { display:none; }
.mpos-cart-entry { position:relative; width:44px; height:44px; border-radius:50%; border:0; background:#fff; box-shadow:0 2px 10px rgba(15,60,52,.12); font-size: var(--fs-xl); color:var(--brand); }
.mpos-cart-count { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; line-height:18px; border-radius: 10px; background:#d7443e; color:#fff; font-size: var(--fs-sm); padding:0 4px; }
.mpos-bar-total { flex:1; }
.mpos-bar-total em { font-style:normal; font-size: var(--fs-sm); color:var(--muted); display:block; }
.mpos-bar-total strong { font-size: var(--fs-2xl); color:var(--brand); }
.mpos-bar-pay { border:0; border-radius: 10px; background:var(--brand); color:#fff; font-size: var(--fs-lg); font-weight:600; padding:12px 26px; }
.mpos-bar-pay:active { opacity:.9; }
.mpos-sheet { position:fixed; inset:0; z-index:60; visibility:hidden; pointer-events:none; }
.mpos-sheet.open { visibility:visible; pointer-events:auto; }
.mpos-sheet-mask { position:absolute; inset:0; background:rgba(12,30,26,.42); opacity:0; transition:opacity .2s; }
.mpos-sheet.open .mpos-sheet-mask { opacity:1; }
.mpos-sheet-panel { position:absolute; left:0; right:0; bottom:0; max-height:82vh; display:flex; flex-direction:column; background:#fff; border-radius:18px 18px 0 0; transform:translateY(102%); transition:transform .24s ease; padding-bottom:env(safe-area-inset-bottom); }
.mpos-sheet.open .mpos-sheet-panel { transform:translateY(0); }
.mpos-sheet-tall { max-height:92vh; }
.mpos-sheet-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 16px 10px; border-bottom:1px solid var(--line); }
.mpos-sheet-head strong { font-size: var(--fs-lg); }
.mpos-sheet-actions { display:flex; gap:6px; }
.mpos-cart-list { overflow:auto; padding:4px 16px 18px; }
.mpos-cart-row { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px dashed var(--line); }
.mpos-cart-name { font-size: var(--fs-md); font-weight:600; }
.mpos-cart-meta { font-size: var(--fs-sm); color:var(--muted); }
.mpos-stepper { display:flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius: 10px; overflow:hidden; }
.mpos-stepper button { width:30px; height:30px; border:0; background:#f6f8f7; font-size: var(--fs-lg); color:var(--brand); }
.mpos-stepper span { min-width:26px; text-align:center; font-size: var(--fs-base); font-variant-numeric:tabular-nums; }
.mpos-cart-amount { min-width:62px; text-align:right; font-size: var(--fs-md); }
.mpos-empty-cart { text-align:center; color:var(--muted); font-size: var(--fs-base); padding:34px 0; }
.mpos-pay-body { overflow:auto; padding:12px 16px 4px; }
.mpos-member-box { border:1px dashed var(--line); border-radius: 12px; padding:10px 12px; }
.mpos-member-empty { font-size: var(--fs-sm); color:var(--muted); }
.mpos-member-head { display:flex; align-items:center; gap:8px; }
.mpos-member-head strong { font-size: var(--fs-lg); }
.mpos-member-head .btn { margin-left:auto; }
.mpos-member-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:5px; font-size: var(--fs-sm); color:var(--muted); }
.mpos-field { margin-top:13px; }
.mpos-field > label { display:block; font-size: var(--fs-sm); color:var(--muted); margin-bottom:6px; }
.mpos-paytabs { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.mpos-paytabs button { border:1px solid var(--line); background:#fff; border-radius: 10px; padding:10px 4px; font-size: var(--fs-base); color:var(--ink); }
.mpos-paytabs button.is-active { border-color:var(--brand-2); background:var(--gold-soft, #fdf6e8); color:var(--brand); font-weight:600; }
.mpos-point-row { display:flex; gap:8px; }
.mpos-point-row .input { flex:1; }
.mpos-tip { font-size: var(--fs-sm); color:var(--muted); margin-top:5px; line-height:1.5; }
.mpos-paysum { margin-top:14px; border-radius: 12px; background:#f7f9f8; padding:11px 13px; }
.mpos-paysum div { display:flex; align-items:center; justify-content:space-between; font-size: var(--fs-base); padding:3px 0; }
.mpos-paysum span { color:var(--muted); }
.mpos-paysum-final { margin-top:5px; padding-top:8px !important; border-top:1px solid var(--line); }
.mpos-paysum-final b { font-size: var(--fs-xl); color:var(--brand); }
.mpos-pay-foot { display:flex; gap:9px; padding:12px 16px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.mpos-pay-foot .btn-ghost { flex:0 0 34%; }
.mpos-confirm { flex:1; }
.mpos-member-search { display:flex; gap:8px; padding:12px 16px 0; }
.mpos-member-search .input { flex:1; }
.mpos-member-result { padding:6px 16px 20px; overflow:auto; }
.mpos-member-hit { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:#fff; border:1px solid var(--line); border-radius: 12px; padding:11px 12px; margin-top:9px; color:inherit; }
.mpos-toast { position:fixed; left:50%; bottom:120px; transform:translate(-50%,8px); background:rgba(16,38,32,.92); color:#fff; font-size: var(--fs-base); padding:9px 16px; border-radius: 10px; z-index:99; opacity:0; transition:all .2s; max-width:80vw; text-align:center; }
.mpos-toast.show { opacity:1; transform:translate(-50%,0); }
.mpos-toast.is-error { background:#b3352f; }
body.mpos-lock { overflow:hidden; }
body:has(.mpos) .m-bottomnav { display:none; }
body:has(.mpos) .mpos-bar { bottom:0; padding-bottom:calc(9px + env(safe-area-inset-bottom)); }
body:has(.mpos) .m-content { padding-bottom:96px; }

/* 宽屏浏览 H5 收银：按手机画布居中，避免右侧大片空白 */
@media (min-width:820px) {
    body:has(.mpos) { background:#e8eeec; }
    body:has(.mpos) .m-topbar,
    body:has(.mpos) .m-content,
    body:has(.mpos) .m-foot, .mpos { width:100%; max-width:760px; margin-left:auto; margin-right:auto; }
    body:has(.mpos) .m-topbar { background:#fff; }
    body:has(.mpos) .m-content { background:#fff; min-height:calc(100vh - 54px); box-shadow:0 0 0 1px var(--line); }
    .mpos .mpos-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .mpos-bar { left:50%; right:auto; transform:translateX(-50%); width:100%; max-width:760px; }
    .mpos-sheet-panel { left:50%; right:auto; transform:translate(-50%,102%); width:100%; max-width:760px; }
    .mpos-sheet.open .mpos-sheet-panel { transform:translate(-50%,0); }
}

.region-picker { display:flex; gap:8px; flex-wrap:wrap; }
.region-picker .region-col { flex:1 1 140px; min-width:0; }
.region-picker .region-select { width:100%; }
.region-picker .region-select:disabled { opacity:.55; cursor:not-allowed; }
@media (max-width:640px) {
    .region-picker { gap:6px; }
    .region-picker .region-col { flex:1 1 30%; }
    .region-picker .region-select { padding:8px 6px; font-size: var(--fs-base); }
}