/* Shared text roles. Reading and touch fields are local roles, never page-wide scaling. */
:root{
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  --text-page:23px; --text-section:16px; --text-name:14px;
  --text-body:13px; --text-meta:12px; --text-count:11px;
  --text-reading:17px; --text-intro:16px; --text-metric:28px; --text-touch:16px;
  --weight-regular:400; --weight-medium:500; --weight-name:600; --weight-heading:650;
  --leading-page:1.4; --leading-section:1.5; --leading-name:1.5;
  --leading-body:1.6; --leading-meta:1.65; --leading-reading:1.85; --leading-intro:1.75;
}

/* 工作台 v4 — 参考 QClay Finance Dashboard：浅灰外框、白色大圆角卡片、珊瑚橙唯一强调色、黑色胶囊主按钮 */
:root,:root[data-theme="light"]{
  --bg:#E9E9E9; --canvas:#F6F6F6; --surface:#FFFFFF; --surface-2:#F5F5F5; --surface-3:#EEEEEE;
  --ink:#141414; --ink-soft:#3B3B3B; --muted:#6B6B6B; --faint:#858585;
  --line:#E4E4E4; --line-soft:#EFEFEF;
  --accent:#E5603C; --accent-soft:#FCEBE5; --accent-line:#F4C3B4;
  --solid:#141414; --solid-ink:#FFFFFF;
  --ok:#2F8A6E;
  --shadow-pop:0 12px 32px -8px rgba(20,20,20,.18), 0 2px 6px rgba(20,20,20,.06);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B0B0C; --canvas:#151517; --surface:#1B1B1E; --surface-2:#222226; --surface-3:#2A2A2F;
    --ink:#F2F2F2; --ink-soft:#D2D2D4; --muted:#ABABB2; --faint:#8E8E96;
    --line:#2D2D32; --line-soft:#25252A;
    --accent:#F27E5A; --accent-soft:#3A231C; --accent-line:#6B3A2C;
    --solid:#F2F2F2; --solid-ink:#141414;
    --ok:#5FC2A2;
    --shadow-pop:0 14px 36px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B0B0C; --canvas:#151517; --surface:#1B1B1E; --surface-2:#222226; --surface-3:#2A2A2F;
  --ink:#F2F2F2; --ink-soft:#D2D2D4; --muted:#ABABB2; --faint:#8E8E96;
  --line:#2D2D32; --line-soft:#25252A;
  --accent:#F27E5A; --accent-soft:#3A231C; --accent-line:#6B3A2C;
  --solid:#F2F2F2; --solid-ink:#141414;
  --ok:#5FC2A2;
  --shadow-pop:0 14px 36px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg)}
body{font-family:var(--font-sans);
  color:var(--ink);font-size:var(--text-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;transition:background .15s,color .15s,border-color .15s,opacity .15s}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:disabled{opacity:.5;cursor:wait}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 外框 ---------- */
.wrap{max-width:1440px;margin:24px auto;background:var(--surface);border-radius:36px;overflow:hidden;min-height:calc(100vh - 48px)}
.band{background:var(--canvas);padding:26px 40px 34px}

/* 顶栏 */
.topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);margin-right:8px}
.brand-mark{width:46px;height:46px;border-radius:50%;background:var(--solid);color:var(--solid-ink);display:grid;place-items:center;font-weight:var(--weight-heading);font-size:var(--text-section);letter-spacing:0}
.brand-text{display:flex;flex-direction:column;line-height:var(--leading-section);font-size:var(--text-section)}
.brand-text b{font-weight:var(--weight-name)}.brand-text span{color:var(--muted)}