/* PeiPao 内容工厂 v5
   外壳：深色玻璃（和 ETF / gofo-web / MC 面板一个家族），可切浅色。
   内容预览：还原真实成品——小红书那格是手机里的笔记，博客那格是博客站的奶油纸面，两种主题下都不变。
   布局：顶栏两个大板块切换；下面左列表、右预览；手机上一次只显示一栏。 */

:root {
  --bg: #0a0e1a;
  --bg-elev: #0f1424;
  --glass: rgba(255,255,255,.045);
  --glass-strong: rgba(255,255,255,.07);
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.15);
  --text: #eef2f9;
  --text-2: #b8c1d4;
  --muted: #8290a8;
  --accent: #8b5cf6;
  --accent-2: #14b8a6;
  --accent-soft: rgba(139,92,246,.16);
  --pos: #34d399; --pos-soft: rgba(52,211,153,.13);
  --warn: #fbbf24; --warn-soft: rgba(251,191,36,.13);
  --neg: #f87171; --neg-soft: rgba(248,113,113,.13);
  --xhs: #ff2e4d;
  --brick: #c0634a;
  --mesh-a: #6366f1; --mesh-b: #14b8a6; --mesh-c: #ec4899; --mesh-o: .42;
  --shadow: 0 0 0 1px rgba(255,255,255,.03), 0 10px 36px rgba(0,0,0,.45);
  --overlay: rgba(4,6,12,.62);
  --s-a: #f0abfc; --s-a-bg: rgba(240,171,252,.12);
  --s-b: #93c5fd; --s-b-bg: rgba(147,197,253,.12);
  --s-c: #fdba74; --s-c-bg: rgba(253,186,116,.12);
  --s-d: #86efac; --s-d-bg: rgba(134,239,172,.12);
  --s-e: #fde68a; --s-e-bg: rgba(253,230,138,.13);
  /* 成品预览：两种主题下一个样 */
  --paper: #fbf6ec; --paper-2: #f3e9d6; --paper-line: #e6dcc8; --ink: #2a1f14; --ink-2: #6b5a4a; --paper-accent: #b45642;
  --phone-bg: #ffffff; --phone-ink: #222222; --phone-mute: #8a8a8a; --phone-tag: #13386c; --phone-line: #f0f0f0;
  --f-ui: 'Inter', -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --f-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --f-serif: 'Source Serif 4', 'Noto Serif SC', 'Songti SC', serif;
  --f-serif-zh: 'Noto Serif SC', 'Songti SC', 'Source Serif 4', serif;
  --r-sm: 8px; --r: 14px; --r-lg: 20px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f5fa; --bg-elev: #ffffff; --glass: rgba(255,255,255,.72); --glass-strong: rgba(255,255,255,.95);
    --line: rgba(15,23,42,.08); --line-strong: rgba(15,23,42,.16);
    --text: #0f172a; --text-2: #334155; --muted: #64748b;
    --accent: #7c3aed; --accent-2: #0d9488; --accent-soft: rgba(124,58,237,.1);
    --pos: #059669; --pos-soft: rgba(5,150,105,.1); --warn: #b45309; --warn-soft: rgba(217,119,6,.1);
    --neg: #dc2626; --neg-soft: rgba(220,38,38,.09); --xhs: #e8203d; --brick: #a8513a; --mesh-o: .14;
    --shadow: 0 1px 2px rgba(15,23,42,.05), 0 12px 32px rgba(15,23,42,.07); --overlay: rgba(15,23,42,.38);
    --s-a: #a21caf; --s-a-bg: rgba(162,28,175,.09); --s-b: #1d4ed8; --s-b-bg: rgba(29,78,216,.08);
    --s-c: #c2410c; --s-c-bg: rgba(194,65,12,.08); --s-d: #15803d; --s-d-bg: rgba(21,128,61,.08);
    --s-e: #a16207; --s-e-bg: rgba(161,98,7,.09);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f4f5fa; --bg-elev: #ffffff; --glass: rgba(255,255,255,.72); --glass-strong: rgba(255,255,255,.95);
  --line: rgba(15,23,42,.08); --line-strong: rgba(15,23,42,.16);
  --text: #0f172a; --text-2: #334155; --muted: #64748b;
  --accent: #7c3aed; --accent-2: #0d9488; --accent-soft: rgba(124,58,237,.1);
  --pos: #059669; --pos-soft: rgba(5,150,105,.1); --warn: #b45309; --warn-soft: rgba(217,119,6,.1);
  --neg: #dc2626; --neg-soft: rgba(220,38,38,.09); --xhs: #e8203d; --brick: #a8513a; --mesh-o: .14;
  --shadow: 0 1px 2px rgba(15,23,42,.05), 0 12px 32px rgba(15,23,42,.07); --overlay: rgba(15,23,42,.38);
  --s-a: #a21caf; --s-a-bg: rgba(162,28,175,.09); --s-b: #1d4ed8; --s-b-bg: rgba(29,78,216,.08);
  --s-c: #c2410c; --s-c-bg: rgba(194,65,12,.08); --s-d: #15803d; --s-d-bg: rgba(21,128,61,.08);
  --s-e: #a16207; --s-e-bg: rgba(161,98,7,.09);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.55 var(--f-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); }
.muted { color: var(--muted); }

.mesh { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.mesh i { position: absolute; border-radius: 50%; filter: blur(110px); opacity: var(--mesh-o); }
.mesh i:nth-child(1) { width: 640px; height: 640px; background: radial-gradient(circle, var(--mesh-a), transparent 62%); top: -260px; left: -200px; animation: drift1 30s ease-in-out infinite; }
.mesh i:nth-child(2) { width: 560px; height: 560px; background: radial-gradient(circle, var(--mesh-b), transparent 62%); bottom: -260px; right: -160px; animation: drift2 34s ease-in-out infinite; }
.mesh i:nth-child(3) { width: 420px; height: 420px; background: radial-gradient(circle, var(--mesh-c), transparent 62%); top: 40%; left: 45%; opacity: calc(var(--mesh-o) * .55); animation: drift1 40s ease-in-out infinite reverse; }
@keyframes drift1 { 50% { transform: translate(80px, 60px) scale(1.08); } }
@keyframes drift2 { 50% { transform: translate(-70px, -50px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .mesh i, .spin, .shimmer { animation: none !important; } }

/* ===== 顶栏 ===== */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mark { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font: 700 16px var(--f-serif-zh); color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 18px var(--accent-soft); flex: none; }
.brand b { font-size: 15px; letter-spacing: -.01em; white-space: nowrap; display: block; }
.brand small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; }
.boards { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); margin-left: 8px; }
.board { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; color: var(--text-2); font-weight: 600; white-space: nowrap; }
.board .dot { width: 7px; height: 7px; border-radius: 50%; }
.board[data-board="xhs"] .dot { background: var(--xhs); }
.board[data-board="blog"] .dot { background: var(--brick); }
.board .cnt { font: 500 11px var(--f-mono); padding: 1px 7px; border-radius: 99px; background: var(--glass-strong); color: var(--muted); }
.board[aria-selected="true"] { background: var(--glass-strong); color: var(--text); box-shadow: var(--shadow); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.worker { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--glass); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.worker .led { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.worker[data-state="online"] .led { background: var(--pos); box-shadow: 0 0 0 3px var(--pos-soft); }
.worker[data-state="busy"] .led { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: pulse 1.4s ease-in-out infinite; }
.worker[data-state="offline"] .led { background: var(--neg); box-shadow: 0 0 0 3px var(--neg-soft); }
@keyframes pulse { 50% { opacity: .35; } }
.iconbtn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--glass); color: var(--text-2); flex: none; }
.iconbtn:hover { background: var(--glass-strong); color: var(--text); }
.iconbtn svg { width: 17px; height: 17px; }

/* ===== 工作台 ===== */
.bench { display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: 18px; padding: 18px 20px 28px; max-width: 1440px; margin: 0 auto; align-items: start; }
.pane { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pane.master { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; scrollbar-width: thin; padding-bottom: 4px; }
[data-view] { display: none; }
body[data-board="xhs"] [data-view="xhs"], body[data-board="blog"] [data-view="blog"] { display: contents; }

.card { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-lg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow); }
.card-h { display: flex; align-items: center; gap: 8px 10px; padding: 14px 16px 10px; flex-wrap: wrap; }
.card-h h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.card-h .aside { margin-left: auto; font-size: 12px; color: var(--muted); }
.card-b { padding: 0 16px 16px; }
.hint { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent); font-size: 12px; font-weight: 600; }
.linkbtn:hover { text-decoration: underline; }

.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--glass); border: 1px solid var(--line); }
.seg button { border: 0; background: transparent; padding: 5px 11px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--glass-strong); color: var(--text); }
.seg .n { font: 500 11px var(--f-mono); margin-left: 4px; opacity: .8; }

.field { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--glass); outline: none; }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
select.field { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
select.field option { background: var(--bg-elev); color: var(--text); }
textarea.field { resize: vertical; min-height: 64px; line-height: 1.6; }
textarea.field.tall { min-height: 340px; font-family: var(--f-ui); }
label.lbl { display: block; font-size: 12px; color: var(--muted); margin: 0 0 5px; }
label.lbl .cnt { float: right; font-family: var(--f-mono); }
label.lbl .cnt.bad { color: var(--neg); }
.row { display: flex; gap: 8px; align-items: center; }
.row > .field { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--glass-strong); font-weight: 600; font-size: 13px; white-space: nowrap; text-decoration: none; }
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn.primary { border: 0; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-2))); box-shadow: 0 6px 18px var(--accent-soft); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--text-2); }
.btn.danger { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 35%, transparent); background: var(--neg-soft); }
.btn.ok { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 35%, transparent); background: var(--pos-soft); }
.btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn svg { width: 15px; height: 15px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 8px; }
.chip { border: 1px solid var(--line); background: transparent; color: var(--text-2); padding: 4px 10px; border-radius: 99px; font-size: 12px; white-space: nowrap; }
.chip b { font-weight: 600; }
.chip .n { font: 500 11px var(--f-mono); color: var(--muted); margin-left: 3px; }
.chip[aria-pressed="true"] { border-color: transparent; background: var(--accent-soft); color: var(--text); }

.tag { display: inline-flex; align-items: center; gap: 4px; font: 600 10.5px var(--f-mono); letter-spacing: .02em; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.s-A { color: var(--s-a); background: var(--s-a-bg); } .s-B { color: var(--s-b); background: var(--s-b-bg); }
.s-C { color: var(--s-c); background: var(--s-c-bg); } .s-D { color: var(--s-d); background: var(--s-d-bg); }
.s-E { color: var(--s-e); background: var(--s-e-bg); } .s-x { color: var(--muted); background: var(--glass-strong); }

.list { display: flex; flex-direction: column; max-height: 340px; overflow: auto; margin: 0 -8px; padding: 0 8px; scrollbar-width: thin; }
.topic { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 8px; border-radius: 10px; }
.topic:hover { background: var(--glass-strong); }
.topic p { margin: 0; min-width: 0; font-size: 13px; }
.beat { color: var(--muted); font: 11px var(--f-mono); white-space: nowrap; }

.drafts { display: flex; flex-direction: column; gap: 4px; }
.draft { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; border: 1px solid transparent; background: transparent; text-align: left; width: 100%; }
button.draft:hover { background: var(--glass-strong); }
.draft[aria-current="true"] { background: var(--glass-strong); border-color: var(--line-strong); }
.draft > div { min-width: 0; }
.thumb { width: 44px; aspect-ratio: 3/4; border-radius: 7px; background: var(--paper-2) center/cover; box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; color: var(--ink-2); font-size: 10px; }
.draft .t { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft .m { display: flex; gap: 6px; align-items: center; margin-top: 3px; font-size: 11.5px; color: var(--muted); min-width: 0; flex-wrap: wrap; }
.draft .err { font-size: 11.5px; color: var(--neg); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status { font: 600 10.5px var(--f-mono); padding: 3px 8px; border-radius: 99px; white-space: nowrap; display: inline-flex; gap: 5px; align-items: center; }
.st-pend { color: var(--warn); background: var(--warn-soft); }
.st-pub { color: var(--pos); background: var(--pos-soft); }
.st-dis { color: var(--muted); background: var(--glass-strong); }
.st-run { color: var(--accent); background: var(--accent-soft); }
.st-err { color: var(--neg); background: var(--neg-soft); }
.spin { width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: rot .8s linear infinite; flex: none; }
@keyframes rot { to { transform: rotate(360deg); } }
.shimmer { background: linear-gradient(100deg, var(--glass) 30%, var(--glass-strong) 50%, var(--glass) 70%); background-size: 200% 100%; animation: sh 1.6s linear infinite; }
@keyframes sh { to { background-position: -200% 0; } }
.empty { text-align: center; padding: 26px 12px; color: var(--muted); font-size: 13px; }
.empty b { display: block; color: var(--text-2); font-size: 14px; margin-bottom: 4px; }

/* ===== 详情 ===== */
.detail-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-h h1 { margin: 0; font-size: 18px; letter-spacing: -.01em; min-width: 0; text-wrap: balance; }
.back { display: none; }
.stage { display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr); gap: 18px; align-items: start; }
.side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kv { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px 12px; font-size: 13px; margin: 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.actions .wide { grid-column: 1 / -1; }

/* 手机里的小红书 */
.phone { width: 100%; max-width: 390px; border-radius: 42px; padding: 11px; background: #121212; box-shadow: 0 30px 60px rgba(0,0,0,.35), inset 0 0 0 1.5px rgba(255,255,255,.1); }
.screen { border-radius: 32px; overflow: hidden; background: var(--phone-bg); color: var(--phone-ink); height: 720px; max-height: 78vh; display: flex; flex-direction: column; }
.sbar { display: flex; justify-content: space-between; padding: 12px 24px 6px; font: 600 13px -apple-system, var(--f-ui); }
.xbar { display: flex; align-items: center; gap: 10px; padding: 6px 14px 10px; border-bottom: 1px solid var(--phone-line); }
.xbar .av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #f4dfbf, #e6b98f); display: grid; place-items: center; font: 700 12px var(--f-serif-zh); color: #6a3a1c; }
.xbar b { font-size: 13.5px; }
.xbar .follow { margin-left: auto; border: 1px solid var(--xhs); color: var(--xhs); border-radius: 99px; padding: 3px 14px; font-size: 12.5px; font-weight: 600; }
.scroll { overflow: auto; flex: 1; scrollbar-width: none; }
.cover { width: 100%; aspect-ratio: 3/4; background: var(--paper-2) center/cover; display: grid; place-items: center; color: var(--ink-2); font-size: 13px; text-align: center; padding: 20px; }
.dots { display: flex; gap: 5px; justify-content: center; padding: 8px 0 2px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: #ddd; } .dots i:first-child { background: var(--xhs); }
.note { padding: 8px 16px 22px; }
.note h3 { margin: 4px 0 10px; font-size: 17px; line-height: 1.4; }
.note .body { white-space: pre-wrap; font-size: 15px; line-height: 1.72; overflow-wrap: anywhere; }
.note .tags { margin-top: 10px; color: var(--phone-tag); font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.note .when { margin-top: 12px; font-size: 12px; color: var(--phone-mute); }

/* 博客纸面 */
.checks { display: flex; gap: 6px; flex-wrap: wrap; }
.ck { font: 500 11.5px var(--f-mono); padding: 3px 9px; border-radius: 99px; color: var(--pos); background: var(--pos-soft); white-space: nowrap; }
.ck.bad { color: var(--neg); background: var(--neg-soft); white-space: normal; }
.paper-wrap { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.paper-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #ece3d1; color: #7a6552; font: 12px var(--f-mono); }
.paper-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d8c8ad; flex: none; }
.paper-bar span, .paper-bar a { margin-left: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.paper { background: var(--paper); color: var(--ink); padding: 44px clamp(18px, 6vw, 64px) 56px; }
.paper article { max-width: 680px; margin: 0 auto; }
.paper .eyebrow { font: 600 12px var(--f-ui); letter-spacing: .12em; color: var(--paper-accent); text-transform: uppercase; }
.paper h1 { font: 700 clamp(24px, 3.2vw, 32px)/1.3 var(--f-serif-zh); margin: 10px 0 12px; text-wrap: balance; }
.paper[lang="en"] h1 { font-family: var(--f-serif); font-weight: 600; }
.paper .lede { font: 17px/1.7 var(--f-serif); color: var(--ink-2); margin: 0 0 18px; }
.paper .ptags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--paper-line); }
.paper .ptags span { font: 12px var(--f-ui); padding: 2px 9px; border-radius: 99px; background: #efe5d2; color: #7a6552; }
.paper .md { font: 17px/1.85 var(--f-serif); overflow-wrap: anywhere; }
.paper .md h2 { font: 700 21px/1.4 var(--f-serif-zh); margin: 34px 0 12px; }
.paper .md h3 { font: 700 18px/1.4 var(--f-serif-zh); margin: 26px 0 10px; }
.paper[lang="en"] .md h2, .paper[lang="en"] .md h3 { font-family: var(--f-serif); font-weight: 600; }
.paper .md p { margin: 0 0 16px; }
.paper .md ol, .paper .md ul { margin: 0 0 16px; padding-left: 1.4em; }
.paper .md li { margin: 4px 0; }
.paper .md strong { color: var(--paper-accent); font-weight: 600; }
.paper .md blockquote { margin: 0 0 16px; padding: 4px 0 4px 16px; border-left: 3px solid var(--paper-line); color: var(--ink-2); }
.paper .md a { color: var(--paper-accent); }
.paper .faq { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--paper-line); }
.paper .faq h2 { font: 700 19px var(--f-serif-zh); margin: 0 0 12px; }
.paper .faq dt { font: 600 15px var(--f-ui); margin-top: 12px; }
.paper .faq dd { margin: 4px 0 0; font: 15px/1.7 var(--f-serif); color: var(--ink-2); }
.paper .cta { margin-top: 30px; padding: 18px 20px; border-radius: 14px; background: var(--paper-2); font: 15px/1.6 var(--f-ui); }
.paper .cta b { color: var(--paper-accent); }

/* 库存 */
.stock { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: end; }
.stock .big { font: 600 26px var(--f-mono); letter-spacing: -.02em; }
.stock .big small { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 4px; font-family: var(--f-ui); }
.stepper { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 9px; padding: 2px; }
.stepper button { width: 24px; height: 24px; border: 0; background: transparent; border-radius: 7px; color: var(--text-2); }
.stepper button:hover { background: var(--glass-strong); }
.stepper b { min-width: 22px; text-align: center; font: 600 13px var(--f-mono); }
.meter { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--glass-strong); overflow: hidden; position: relative; }
.meter span { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .3s; }
.bulk { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--neg-soft); color: var(--neg); font-size: 12.5px; margin-bottom: 8px; }
.bulk .btn { margin-left: auto; }
.post { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 8px; border-radius: 12px; border: 1px solid transparent; }
.post:hover { background: var(--glass-strong); }
.post[aria-current="true"] { background: var(--glass-strong); border-color: var(--line-strong); }
.post input[type="checkbox"] { margin-top: 3px; accent-color: var(--accent); width: 15px; height: 15px; }
.post > button { all: unset; cursor: pointer; min-width: 0; display: block; }
.post > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.post .t { font-size: 13px; font-weight: 600; line-height: 1.45; }
.post .e { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post .m { display: flex; gap: 8px; align-items: center; margin-top: 5px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.cat { font: 600 10.5px var(--f-mono); padding: 2px 7px; border-radius: 6px; color: var(--brick); background: color-mix(in srgb, var(--brick) 14%, transparent); }

/* ===== 弹层 ===== */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px 16px; background: var(--overlay); backdrop-filter: blur(4px); }
.modal .panel { width: min(720px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.modal .panel.narrow { width: min(460px, 100%); }
.modal header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; background: var(--bg-elev); border-bottom: 1px solid var(--line); }
.modal header h2 { margin: 0; font-size: 15px; }
.modal header .iconbtn { margin-left: auto; }
.modal .body { padding: 16px 18px; }
.modal footer { position: sticky; bottom: 0; display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 12px 18px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; background: var(--bg-elev); }
.pool-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.pool-item:last-child { border-bottom: 0; }
.pool-item p { margin: 0; font-size: 13px; min-width: 0; }
.pool-item.used p { color: var(--muted); }
.pool-item .ops { display: flex; gap: 6px; }
.tones { display: flex; gap: 8px; flex-wrap: wrap; }
.tone { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: transparent; font-size: 12.5px; }
.tone i { width: 18px; height: 18px; border-radius: 5px; }
.tone[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: .25s; padding: 10px 16px; border-radius: 12px; background: var(--bg-elev); border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-size: 13px; z-index: 60; max-width: calc(100% - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: color-mix(in srgb, var(--neg) 50%, transparent); color: var(--neg); }

.dock { display: none; }

@media (max-width: 1180px) { .stage { grid-template-columns: 1fr; } .phone { margin: 0 auto; } }
@media (max-width: 820px) {
  .top { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .brand small, .worker .txt { display: none; }
  .boards { order: 3; width: 100%; margin: 0; }
  .board { flex: 1; justify-content: center; }
  .top-right { gap: 8px; }
  .bench { grid-template-columns: 1fr; padding: 14px 16px 96px; }
  .pane.master { position: static; max-height: none; overflow: visible; }
  body:not(.detail) .pane.detail { display: none; }
  body.detail .pane.master { display: none; }
  .back { display: inline-flex; }
  .screen { height: auto; max-height: none; }
  .scroll { overflow: visible; }
  .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--line); display: flex; gap: 8px; }
  .dock .btn { flex: 1; }
  .desk-only { display: none !important; }
  .list { max-height: 50vh; }
}
@media (max-width: 480px) { .topic .tag .nm, .draft .tag .nm { display: none; } }

/* ===== 登录页 ===== */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login .card { width: min(360px, 100%); padding: 28px 24px 24px; }
.login h1 { margin: 16px 0 4px; font-size: 18px; }
.login p { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.login form { display: flex; flex-direction: column; gap: 10px; }
.login .error { min-height: 18px; font-size: 12.5px; color: var(--neg); }