/* 由 design/tokens.json 自动生成，不要手改 */

:root {
  --space-2xs: 4px;
  --space-xs: 6px;
  --space-sm: 8px;
  --space-md: 10px;
  --space-row: 12px;
  --space-row-pad: 14px;
  --space-card: 16px;
  --space-page: 20px;
  --space-top: 56px;
  --nav-height: 84px;
  --radius-mark: 3px;
  --radius-pill: 8px;
  --radius-control: 10px;
  --radius-input: 12px;
  --radius-button: 14px;
  --radius-card: 16px;
  --radius-dialog: 20px;
  --radius-sheet: 24px;
  --radius-full: 999px;
  --touch-min: 44px;
  --button-height: 50px;
  --input-height: 46px;
  --small-button-height: 36px;
  --chip-height: 34px;
  --tag-size: 34px;
  --fab-size: 52px;
  --icon-size: 24px;
  --phone-width: 390px;
  --font-sans: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
}

:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #17191C;
  --surface: #202226;
  --surface-2: #282A2F;
  --sheet: #1C1E22;
  --border: #2E3136;
  --border-strong: #3D4046;
  --text: #F2F0EA;
  --text-2: #ADABA4;
  --text-3: #94918A;
  --accent: #D4B880;
  --accent-fill: #CDB07A;
  --on-accent: #17191C;
  --accent-line: #665739;
  --deco: #CDB07A;
  --tag-bg: #202226;
  --danger: #F97066;
  --danger-line: #5E2C28;
  --danger-bg: rgba(249,112,102,0.09);
  --ok: #6CC9A1;
  --ok-line: #264A3C;
  --info-text: #E6CD99;
  --info-bg: rgba(205,176,122,0.09);
  --mark-bg: rgba(212,184,128,0.32);
  --mark-text: #FBEBC8;
  --overlay: rgba(0,0,0,0.5);
  --nav-bg: rgba(23,25,28,0.96);
  --toast-bg: #F2F0EA;
  --toast-text: #17191C;
  --dialog-bg: #282A2F;
  --dialog-text: #DCD9D2;
  --skeleton: #24262A;
  --knob: #F2F0EA;
  --switch-off: #3D4046;
  --bar-bg: #2E3136;
  --seg-on: #35383E;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
  color-scheme: light;
  --bg: #F4F3EF;
  --surface: #FFFFFF;
  --surface-2: #F7F6F2;
  --sheet: #FAF9F6;
  --border: #E4E1D9;
  --border-strong: #D2CEC4;
  --text: #1B1A18;
  --text-2: #63605A;
  --text-3: #6F6C66;
  --accent: #2A6EBD;
  --accent-fill: #2D77CB;
  --on-accent: #FFFFFF;
  --accent-line: #B7D0EE;
  --deco: #5A9BE0;
  --tag-bg: #DCE8F7;
  --danger: #B42318;
  --danger-line: #EFC3BD;
  --danger-bg: #FDF0EE;
  --ok: #1F7A55;
  --ok-line: #B8DAC9;
  --info-text: #1C5A9E;
  --info-bg: #DCE8F7;
  --mark-bg: #DCE8F7;
  --mark-text: #1C4F8A;
  --overlay: rgba(27,26,24,0.32);
  --nav-bg: rgba(250,249,246,0.96);
  --toast-bg: #1B1A18;
  --toast-text: #FFFFFF;
  --dialog-bg: #FFFFFF;
  --dialog-text: #3A3834;
  --skeleton: #E9E6DF;
  --knob: #FFFFFF;
  --switch-off: #D2CEC4;
  --bar-bg: #ECE9E2;
  --seg-on: #ECE9E2;
  }
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F3EF;
  --surface: #FFFFFF;
  --surface-2: #F7F6F2;
  --sheet: #FAF9F6;
  --border: #E4E1D9;
  --border-strong: #D2CEC4;
  --text: #1B1A18;
  --text-2: #63605A;
  --text-3: #6F6C66;
  --accent: #2A6EBD;
  --accent-fill: #2D77CB;
  --on-accent: #FFFFFF;
  --accent-line: #B7D0EE;
  --deco: #5A9BE0;
  --tag-bg: #DCE8F7;
  --danger: #B42318;
  --danger-line: #EFC3BD;
  --danger-bg: #FDF0EE;
  --ok: #1F7A55;
  --ok-line: #B8DAC9;
  --info-text: #1C5A9E;
  --info-bg: #DCE8F7;
  --mark-bg: #DCE8F7;
  --mark-text: #1C4F8A;
  --overlay: rgba(27,26,24,0.32);
  --nav-bg: rgba(250,249,246,0.96);
  --toast-bg: #1B1A18;
  --toast-text: #FFFFFF;
  --dialog-bg: #FFFFFF;
  --dialog-text: #3A3834;
  --skeleton: #E9E6DF;
  --knob: #FFFFFF;
  --switch-off: #D2CEC4;
  --bar-bg: #ECE9E2;
  --seg-on: #ECE9E2;
}

/* 经营工作台 组件样式 —— 与已确认的原型逐条一致，颜色、间距、圆角全部来自 tokens */
.wb{background:var(--bg);color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;font-size:15px}
.wb button,.wb input,.wb textarea{font-family:inherit}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--text-2)}
.h1{margin:0;font-size:28px;font-weight:600}
.h2{margin:0;font-size:17px;font-weight:600}
.t15{font-size:15px;font-weight:500}
.t12{font-size:12.5px;color:var(--text-2);margin-top:2px}
.grow{flex:1;min-width:0}
.right{text-align:right;flex:none}

/* 卡片与 kv 行 */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card)}
.pad{padding:var(--space-card)}
.kv{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--border);font-size:14.5px;gap:12px}
.kv:last-child{border-bottom:none}

/* 列表行 */
.rowbtn{width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);color:var(--text);cursor:pointer;display:flex;align-items:center;gap:var(--space-row);padding:var(--space-row-pad);box-sizing:border-box;font-size:15px}
.rowbtn:active,.rowbtn.is-pressed{background:var(--surface-2)}

/* 待办标签、N 编号、状态标签 */
.tag{width:34px;height:34px;border-radius:17px;border:1px solid var(--accent-line);background:var(--tag-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex:none}
.nbadge{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:28px;box-sizing:border-box;font-size:13px;font-weight:600;color:var(--accent);border:1px solid var(--accent-line);border-radius:var(--radius-pill);padding:0 6px;font-variant-numeric:tabular-nums;flex:none}
.pill{display:inline-block;font-size:11.5px;padding:3px 8px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);color:var(--text-2);white-space:nowrap}
.pill.gold{border-color:var(--accent-line);color:var(--accent)}
.pill.red{border-color:var(--danger-line);color:var(--danger)}
.pill.green{border-color:var(--ok-line);color:var(--ok)}

/* 按钮 */
.btn{height:50px;border-radius:var(--radius-button);border:none;background:var(--accent-fill);color:var(--on-accent);font-size:16px;font-weight:600;cursor:pointer;padding:0 18px;flex:1}
.btn2{height:50px;border-radius:var(--radius-button);border:1px solid var(--border-strong);background:none;color:var(--text);font-size:16px;font-weight:500;cursor:pointer;padding:0 18px;flex:1}
.btnsm{height:36px;border-radius:var(--radius-control);border:1px solid var(--accent-line);background:none;color:var(--accent);font-size:13.5px;font-weight:500;cursor:pointer;padding:0 12px;flex:none}
.btnsm.quiet{border-color:var(--border-strong);color:var(--text-2)}
.btndanger{height:48px;border-radius:var(--radius-button);border:1px solid var(--danger-line);background:none;color:var(--danger);font-size:15px;font-weight:500;cursor:pointer;padding:0 18px;width:100%}
.link{background:none;border:none;color:var(--accent);font-size:15px;font-weight:500;cursor:pointer;height:44px;padding:0 4px}
.back{background:none;border:none;color:var(--accent);font-size:16px;cursor:pointer;height:44px;padding:0;text-align:left}
.iconbtn{width:44px;height:44px;border-radius:22px;border:1px solid var(--border);background:var(--surface);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer}
.fab{width:52px;height:52px;border-radius:26px;background:var(--accent-fill);color:var(--on-accent);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
.del{width:44px;height:44px;border:none;background:none;color:var(--text-2);font-size:22px;cursor:pointer;flex:none}

/* 选项、分段 */
.chips{display:flex;gap:var(--space-sm);overflow-x:auto;padding-bottom:2px}
.wrapchips{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.chip{height:34px;padding:0 14px;border-radius:17px;border:1px solid var(--border-strong);background:none;color:var(--text-2);font-size:13.5px;cursor:pointer;flex:none;white-space:nowrap}
.chip.on{background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill);font-weight:600}
.chip.sm{height:32px;padding:0 12px;font-size:13px}
.seg,.seg3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-input);padding:3px}
.seg3{grid-template-columns:repeat(3,minmax(0,1fr))}
.segb{height:36px;border:none;border-radius:9px;background:none;color:var(--text-2);font-size:14px;cursor:pointer}
.segb.on{background:var(--seg-on);color:var(--text);font-weight:600}

/* 表单 */
.field{display:flex;flex-direction:column;gap:var(--space-xs)}
.label{font-size:12.5px;color:var(--text-2)}
.input{height:46px;border-radius:var(--radius-input);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:16px;padding:0 12px;box-sizing:border-box;width:100%}
.input:focus,.input.is-focus{outline:none;border-color:var(--accent)}
.input::placeholder{color:var(--text-3)}
.input.is-error{border-color:var(--danger)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md)}
.sw{width:51px;height:31px;border-radius:16px;background:var(--switch-off);border:none;position:relative;cursor:pointer;flex:none;padding:0}
.sw.on{background:var(--deco)}
.knob{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:14px;background:var(--knob);transition:left .2s}
.sw.on .knob{left:22px}

/* 提示 */
.err{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger);border-radius:var(--radius-input);padding:12px;font-size:13.5px;line-height:1.5}
.info{background:var(--info-bg);border:1px solid var(--accent-line);color:var(--info-text);border-radius:var(--radius-input);padding:12px;font-size:13.5px;line-height:1.5}
.voidbar{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger);border-radius:var(--radius-input);padding:12px;font-size:13.5px;line-height:1.5}
.toast{background:var(--toast-bg);color:var(--toast-text);border-radius:var(--radius-button);padding:14px 16px;font-size:14.5px;font-weight:500;text-align:center;line-height:1.45}
.mark{background:var(--mark-bg);color:var(--mark-text);border-radius:var(--radius-mark);padding:0 1px}

/* 浮层 */
.backdrop{background:var(--overlay)}
.sheet{background:var(--sheet);border-top:1px solid var(--border);border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;padding:10px 20px 34px;box-sizing:border-box}
.grab{width:36px;height:5px;border-radius:3px;background:var(--border-strong);margin:0 auto 10px}
.sheetfoot{padding:12px 20px 30px;border-top:1px solid var(--border);display:flex;gap:10px;background:var(--sheet)}
.dialog{background:var(--dialog-bg);border:1px solid var(--border);border-radius:var(--radius-dialog);padding:22px 20px 18px;display:flex;flex-direction:column;gap:12px}
.dialog-body{font-size:14.5px;line-height:1.55;color:var(--dialog-text);white-space:pre-line}
.prow{width:100%;height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:none;border:none;border-bottom:1px solid var(--border);color:var(--text);font-size:15.5px;cursor:pointer;box-sizing:border-box}
.prow:last-child{border-bottom:none}
.ck{color:var(--accent);font-weight:600}

/* 导航 */
.tabbar{height:84px;background:var(--nav-bg);border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;padding-top:8px;box-sizing:border-box}
.tabbtn{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-2);font-size:11px;padding:4px 0;cursor:pointer}
.tabbtn.on{color:var(--accent);font-weight:600}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.stepb{height:40px;border-radius:var(--radius-control);border:1px solid var(--border);background:var(--surface);color:var(--text-2);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 4px}
.stepb.on{border-color:var(--accent);color:var(--accent);font-weight:600}
.stepn{width:18px;height:18px;border-radius:9px;border:1px solid currentColor;font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex:none}

/* 数据展示 */
.tl{display:flex;gap:12px}
.dot{width:9px;height:9px;border-radius:5px;background:var(--deco);margin-top:5px;flex:none}
.bar{height:3px;background:var(--bar-bg);border-radius:2px;margin-top:10px}
.barin{height:3px;border-radius:2px;background:var(--deco)}
.skel{background:var(--skeleton);border-radius:var(--radius-input);animation:wbpulse 1.2s ease-in-out infinite}
@keyframes wbpulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}.knob{transition:none}}

/* 页面布局：在设计规范组件样式之外，适配真实 iPhone（刘海、底部横条） */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; font-size: 15px; }
#root { min-height: 100%; }
button { font-family: inherit; }
a { color: var(--accent); }

.wb { min-height: 100%; background: var(--bg); color: var(--text); transition: background .25s, color .25s; }
.page { max-width: 560px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 20px) var(--space-page) calc(84px + env(safe-area-inset-bottom) + 24px); display: flex; flex-direction: column; gap: var(--space-page); }
.has-banner .page { padding-top: calc(env(safe-area-inset-top) + 48px); }
.page.solo { padding-bottom: calc(env(safe-area-inset-bottom) + 32px); min-height: 100dvh; }
.page > * { flex-shrink: 0; }

.testbar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding: calc(env(safe-area-inset-top) + 4px) 16px 5px; background: var(--accent-fill); color: var(--on-accent); font-size: 12px; font-weight: 600; text-align: center; letter-spacing: 1px; }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: auto; padding-bottom: max(env(safe-area-inset-bottom), 8px); }
.tabbar .fab { margin-top: -4px; }

.hdr { display: flex; align-items: center; justify-content: space-between; }
.date { font-size: 13px; color: var(--text-2); letter-spacing: 1px; }
.hero { text-align: left; border: none; background: none; padding: 0; display: flex; flex-direction: column; gap: 8px; color: var(--text); width: 100%; }
.hero-label { font-size: 13px; color: var(--accent); letter-spacing: 1px; }
.hero-num { font-size: 52px; line-height: 1.05; font-weight: 300; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.hero-sub { display: flex; justify-content: space-between; width: 100%; font-size: 12.5px; color: var(--text-2); }
.rule { height: 1px; background: var(--border); }
.snap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; column-gap: 16px; }
.snap-label { font-size: 12.5px; color: var(--text-2); }
.snap-num { font-size: 20px; font-weight: 500; margin-top: 4px; font-variant-numeric: tabular-nums; }
.sec { display: flex; justify-content: space-between; align-items: baseline; }

.overlay { position: fixed; inset: 0; z-index: 50; }
.overlay .backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: none; cursor: pointer; }
.overlay .sheet { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; padding-bottom: calc(env(safe-area-inset-bottom) + 24px); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { flex-direction: column; align-items: flex-start; gap: 4px; }
.tile.off { opacity: .55; }

.toastwrap { position: fixed; left: 20px; right: 20px; bottom: calc(env(safe-area-inset-bottom) + 100px); z-index: 60; max-width: 520px; margin: 0 auto; }

.auth { max-width: 420px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 16px; padding-top: 8vh; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 44px; height: 44px; border-radius: 12px; }
.brand-name { font-size: 22px; font-weight: 600; }
.code-input { font-size: 26px; letter-spacing: 8px; text-align: center; font-variant-numeric: tabular-nums; height: 56px; }
.secret { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 16px; letter-spacing: 1px; word-break: break-all; line-height: 1.6; }
.steps-lite { display: flex; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.steps-lite .on { color: var(--accent); font-weight: 600; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--text-2); word-break: break-all; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.table th { text-align: left; font-weight: 500; color: var(--text-2); font-size: 12px; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.table td { padding: 8px 4px; border-bottom: 1px solid var(--border); }
.table td.r, .table th.r { text-align: right; }
.scrollx { overflow-x: auto; }