/* ══════════════════════════════════════════════════════════════════
   蜕藏 TUIZANG · 自然志工作室 — 单文件系统样式
   层次：:root seed tokens → 语义 token（var / color-mix 派生）→ 组件
   视觉：博物馆档案风（羊皮纸 / 墨色 / 档案红 / 铜绿 / 旧金），
   控制台密度参考 cloudscape 风格的表优先结构。
   所有字面颜色只允许出现在 --seed-* 声明行。
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* — seed 层 · 亮色（唯一允许写颜色字面量的地方） — */
  --seed-bg:#F7F3EA;
  --seed-surface:#FFFFFF;
  --seed-fg:#1E1C18;
  --seed-primary:#8E2F2F;
  --seed-accent:#4E7464;
  --seed-gold:#B28A3E;
  /* — seed 层 · 非颜色 — */
  --seed-radius:4px;
  --seed-density:1;
  --seed-typescale:1;
  --seed-motion:1;
  --seed-rule:1;
  /* — 字体 — */
  --font-display:"Canela","Iowan Old Style","Palatino Linotype","Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC","SimSun",serif;
  --font-body:"Avenir Next","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular","Menlo","Consolas","Courier New",monospace;
  /* — 语义层（全部由 seed 派生） — */
  --color-bg:var(--seed-bg);
  --color-surface:var(--seed-surface);
  --color-surface-2:color-mix(in srgb,var(--seed-surface) 42%,var(--seed-bg));
  --color-ink:var(--seed-fg);
  --color-muted:color-mix(in srgb,var(--seed-fg) 60%,var(--seed-bg));
  --color-faint:color-mix(in srgb,var(--seed-fg) 38%,var(--seed-bg));
  --color-border:color-mix(in srgb,var(--seed-fg) calc(15% * var(--seed-rule)),var(--seed-bg));
  --color-border-strong:color-mix(in srgb,var(--seed-fg) calc(30% * var(--seed-rule)),var(--seed-bg));
  --color-hover:color-mix(in srgb,var(--seed-fg) 5%,var(--seed-surface));
  --color-primary:var(--seed-primary);
  --color-primary-deep:color-mix(in srgb,var(--seed-primary) 76%,var(--seed-fg));
  --color-primary-soft:color-mix(in srgb,var(--seed-primary) 10%,var(--seed-surface));
  --color-primary-line:color-mix(in srgb,var(--seed-primary) 36%,var(--seed-bg));
  --color-on-primary:var(--seed-bg);
  --color-accent:var(--seed-accent);
  --color-accent-deep:color-mix(in srgb,var(--seed-accent) 74%,var(--seed-fg));
  --color-accent-soft:color-mix(in srgb,var(--seed-accent) 12%,var(--seed-surface));
  --color-accent-line:color-mix(in srgb,var(--seed-accent) 38%,var(--seed-bg));
  --color-gold:var(--seed-gold);
  --color-gold-deep:color-mix(in srgb,var(--seed-gold) 72%,var(--seed-fg));
  --color-gold-soft:color-mix(in srgb,var(--seed-gold) 15%,var(--seed-surface));
  --color-gold-line:color-mix(in srgb,var(--seed-gold) 42%,var(--seed-bg));
  --color-focus:color-mix(in srgb,var(--seed-primary) 82%,var(--seed-fg));
  --ring:0 0 0 3px color-mix(in srgb,var(--seed-primary) 26%,transparent);
  --shadow-1:0 1px 2px color-mix(in srgb,var(--seed-fg) 7%,transparent);
  --shadow-2:0 10px 30px color-mix(in srgb,var(--seed-fg) 16%,transparent);
  --scrim:color-mix(in srgb,var(--seed-fg) 42%,transparent);
  /* — 间距（随密度缩放） — */
  --sp-1:calc(4px * var(--seed-density));
  --sp-2:calc(8px * var(--seed-density));
  --sp-3:calc(12px * var(--seed-density));
  --sp-4:calc(16px * var(--seed-density));
  --sp-5:calc(20px * var(--seed-density));
  --sp-6:calc(24px * var(--seed-density));
  --sp-8:calc(32px * var(--seed-density));
  --sp-10:calc(40px * var(--seed-density));
  --sp-12:calc(56px * var(--seed-density));
  /* — 字号（随字阶缩放） — */
  --fs-xs:calc(11.5px * var(--seed-typescale));
  --fs-sm:calc(13px * var(--seed-typescale));
  --fs-md:calc(15px * var(--seed-typescale));
  --fs-lg:calc(17px * var(--seed-typescale));
  --fs-xl:calc(21px * var(--seed-typescale));
  --fs-2xl:calc(26px * var(--seed-typescale));
  --fs-3xl:calc(34px * var(--seed-typescale));
  --fs-display:clamp(38px,5.2vw,calc(58px * var(--seed-typescale)));
  /* — 圆角（随圆角 seed 缩放） — */
  --r-1:calc(var(--seed-radius) * 0.5);
  --r-2:var(--seed-radius);
  --r-3:calc(var(--seed-radius) * 1.75);
  /* — 动效 — */
  --dur-1:calc(120ms * var(--seed-motion));
  --dur-2:calc(240ms * var(--seed-motion));
  --ease:cubic-bezier(.2,.7,.3,1);
  /* — 布局尺寸 — */
  --rail-w:236px;
  --wb-h:58px;
  --z-rail:40; --z-head:50; --z-scrim:60; --z-drawer:70; --z-modal:80; --z-toast:90;
}
/* ———————————————— 基础 ———————————————— */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-ink);font-family:var(--font-body);font-size:var(--fs-md);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.2;letter-spacing:-0.01em}
h1{font-size:var(--fs-3xl)}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-lg);letter-spacing:0}
h4{font-size:var(--fs-md);letter-spacing:0}
p{margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-1)}
::selection{background:color-mix(in srgb,var(--seed-gold) 32%,transparent);color:var(--seed-fg)}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
hr{border:none;border-top:1px solid var(--color-border);margin:var(--sp-5) 0}
.mono{font-family:var(--font-mono);font-size:.92em;letter-spacing:0}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0;font-size:.94em}
.serif{font-family:var(--font-display)}
.muted{color:var(--color-muted)}
.faint{color:var(--color-faint)}
.small{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.strong{font-weight:600}
.measure{max-width:64ch}
.caps{letter-spacing:.08em;text-transform:uppercase;font-size:var(--fs-xs)}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:var(--fs-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--color-primary-deep);font-weight:560}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--color-primary-line)}
.skip-link{position:absolute;left:var(--sp-4);top:-60px;z-index:var(--z-toast);background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--r-2);padding:8px 14px;font-size:var(--fs-sm);transition:top var(--dur-1) var(--ease)}
.skip-link:focus{top:calc(var(--sp-3))}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hidden{display:none !important}
/* ———————————————— 按钮 ———————————————— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:var(--r-2);padding:8px 14px;font-size:var(--fs-sm);font-weight:550;letter-spacing:.01em;white-space:nowrap;transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn::after{content:none}
.btn-primary{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}
.btn-primary:hover{background:var(--color-primary-deep);border-color:var(--color-primary-deep)}
.btn-ghost{background:var(--color-surface);border-color:var(--color-border-strong);color:var(--color-ink)}
.btn-ghost:hover{background:var(--color-hover)}
.btn-quiet{border-color:transparent;color:var(--color-muted)}
.btn-quiet:hover{color:var(--color-ink);background:var(--color-hover)}
.btn-line{background:transparent;border-color:var(--color-primary-line);color:var(--color-primary-deep)}
.btn-line:hover{background:var(--color-primary-soft)}
.btn-sm{padding:4px 10px;font-size:var(--fs-xs)}
.btn-lg{padding:11px 22px;font-size:var(--fs-md)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.44;cursor:not-allowed;transform:none}
.btn-group{display:inline-flex;gap:var(--sp-2);flex-wrap:wrap}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--color-border-strong);border-radius:var(--r-2);background:var(--color-surface);color:var(--color-muted);transition:all var(--dur-1) var(--ease);position:relative}
.icon-btn:hover{color:var(--color-ink);background:var(--color-hover)}
.badge-dot{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--color-primary);color:var(--color-on-primary);font-size:10px;line-height:16px;text-align:center;font-family:var(--font-mono)}
/* ———————————————— 徽标 / 标签 ———————————————— */
.pill{display:inline-flex;align-items:center;gap:5px;padding:1px 9px 2px;border-radius:999px;border:1px solid;font-size:var(--fs-xs);font-weight:520;line-height:1.5;white-space:nowrap}
.pill .pt{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.pill-ok{background:var(--color-accent-soft);border-color:var(--color-accent-line);color:var(--color-accent-deep)}
.pill-warn{background:var(--color-gold-soft);border-color:var(--color-gold-line);color:var(--color-gold-deep)}
.pill-danger{background:var(--color-primary-soft);border-color:var(--color-primary-line);color:var(--color-primary-deep)}
.pill-info{background:var(--color-surface-2);border-color:var(--color-border-strong);color:var(--color-muted)}
.pill-plain{background:transparent;border-color:var(--color-border-strong);color:var(--color-muted)}
.tag{display:inline-flex;align-items:center;gap:5px;padding:1px 7px;border:1px solid var(--color-border);border-radius:var(--r-1);font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-muted);background:var(--color-surface)}
.tag-strong{border-color:var(--color-border-strong);color:var(--color-ink)}
.kbd{display:inline-block;padding:0 5px;border:1px solid var(--color-border-strong);border-bottom-width:2px;border-radius:var(--r-1);font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-muted);background:var(--color-surface)}
/* ———————————————— 卡片 / 面板 ———————————————— */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-2);box-shadow:var(--shadow-1)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--color-border)}
.card-head h3{font-size:var(--fs-md);font-weight:600}
.card-body{padding:var(--sp-4)}
.card-foot{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.panel-plain{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-2)}
.note{font-size:var(--fs-sm);color:var(--color-muted);border-top:1px dashed var(--color-border-strong);padding-top:var(--sp-2);margin-top:var(--sp-2)}
.callout{display:flex;gap:10px;padding:var(--sp-3) var(--sp-4);border:1px solid var(--color-border-strong);border-left:3px solid var(--color-gold);border-radius:var(--r-2);background:var(--color-gold-soft);font-size:var(--fs-sm)}
.callout-danger{border-left-color:var(--color-primary);background:var(--color-primary-soft)}
.callout-info{border-left-color:var(--color-accent);background:var(--color-accent-soft)}
.callout .ct{font-weight:600}
/* ———————————————— 栅格 / 堆叠 ———————————————— */
.grid{display:grid;gap:var(--sp-4)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g23{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g32{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.row{display:flex;align-items:center;gap:var(--sp-2)}
.row.wrap{flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:var(--sp-2)}
.stack-3{gap:var(--sp-3)}
.stack-4{gap:var(--sp-4)}
.spacer{flex:1 1 auto}
/* ———————————————— 弹层内逐行录入 ———————————————— */
.fb-row,.wo-matrow,.rc-row,.sr-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.fb-row>*,.wo-matrow>*{flex:1 1 140px;min-width:0}
.rc-row>*{flex:1 1 108px;min-width:0}
.sr-row>*{flex:1 1 130px;min-width:0}
.fb-row>.rnum,.rc-row>.rnum{flex:0 0 30px;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-faint)}
.fb-row>.delx,.wo-matrow>.delx{flex:0 0 30px}
.delx{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--color-border);border-radius:var(--r-1);color:var(--color-muted);background:var(--color-surface);font-size:var(--fs-md);line-height:1}
.delx:hover{color:var(--color-primary-deep);border-color:var(--color-primary-line);background:var(--color-primary-soft)}
.po-row,.sp-row,.pu-row,.mr-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.po-row>*,.sp-row>*{flex:1 1 120px;min-width:0}
.pu-row>*,.mr-row>*{flex:1 1 110px;min-width:0}
.po-row>.rnum,.sp-row>.rnum,.pu-row>.rnum,.mr-row>.rnum{flex:0 0 30px;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-faint)}
.po-row>.delx,.sp-row>.delx,.pu-row>.delx{flex:0 0 30px}
.pu-row .pu-tcell{display:flex;flex-direction:column;gap:4px;min-width:0}
.pu-tcell select,.pu-tcell input{width:100%}
.po-row>.po-qty,.po-row>.po-price,.sp-row>.sp-qty,.sp-row>.sp-price{flex:0 1 88px}
.rc-line,.sr-group{border:1px solid var(--color-border);border-radius:var(--r-2);padding:var(--sp-3);margin-bottom:var(--sp-3);background:var(--color-surface-2)}
.rc-line-head,.sr-group-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:8px}
.rc-line-head .mini,.sr-group-head .mini{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--color-muted)}
.rc-line-head .mini input,.sr-group-head .mini input{width:76px}
.rc-pet,.sr-item{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.rc-pet>*,.sr-item>*{flex:1 1 108px;min-width:0}
.rc-pet>.rnum,.sr-item>.rnum{flex:0 0 30px;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-faint)}
.rc-up{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border:1px dashed var(--color-border-strong);border-radius:var(--r-1);font-size:var(--fs-xs);color:var(--color-muted);cursor:pointer}
.rc-up:hover{border-color:var(--color-primary-line);color:var(--color-primary-deep)}
/* ———————————————— KPI ———————————————— */
.kpi{display:flex;flex-direction:column;gap:2px;padding:var(--sp-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-2)}
.kpi .klabel{font-size:var(--fs-xs);color:var(--color-muted);letter-spacing:.05em;display:flex;justify-content:space-between;align-items:center;gap:8px}
.kpi .kval{font-family:var(--font-display);font-size:var(--fs-2xl);line-height:1.15;font-weight:600}
.kpi .kval small{font-size:.55em;font-family:var(--font-body);color:var(--color-muted);font-weight:500;margin-left:4px}
.kpi .kdelta{font-size:var(--fs-xs);color:var(--color-muted);display:flex;gap:6px;align-items:center}
.kpi .up{color:var(--color-accent-deep)}
.kpi .down{color:var(--color-primary-deep)}
.kpi.bare{background:transparent;border:none;padding:0}
/* ———————————————— 图表 ———————————————— */
figure.chart{margin:0}
.chart svg{width:100%;height:auto}
.chart .axis{stroke:var(--color-border);stroke-width:1}
.chart .axis-strong{stroke:var(--color-border-strong);stroke-width:1}
.chart .s-primary{stroke:var(--color-primary)}
.chart .f-primary{fill:var(--color-primary)}
.chart .s-accent{stroke:var(--color-accent)}
.chart .f-accent{fill:var(--color-accent)}
.chart .f-accent-deep{fill:var(--color-accent-deep)}
.chart .s-gold{stroke:var(--color-gold)}
.chart .f-gold{fill:var(--color-gold)}
.chart .f-faint{fill:var(--color-faint)}
.chart .f-band{fill:color-mix(in srgb,var(--seed-primary) 10%,transparent)}
.chart text{font-family:var(--font-mono);font-size:10px;fill:var(--color-muted)}
.chart .tv{font-size:10px;fill:var(--color-ink)}
.chart figcaption{font-size:var(--fs-xs);color:var(--color-muted);margin-top:var(--sp-2)}
.legend{display:flex;gap:var(--sp-4);flex-wrap:wrap;font-size:var(--fs-xs);color:var(--color-muted)}
.legend .sw{display:inline-block;width:16px;height:0;border-top:2px solid var(--color-primary);vertical-align:middle;margin-right:6px}
.legend .sw.a{border-top-color:var(--color-accent)}
.legend .sw.g{border-top-color:var(--color-gold)}
.legend .sw.dash{border-top-style:dashed}
/* ———————————————— 表格 ———————————————— */
.tbl-wrap{overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--r-2);background:var(--color-surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:660px}
.tbl caption{text-align:left}
.tbl th{text-align:left;font-weight:560;color:var(--color-muted);background:var(--color-surface-2);padding:9px 12px;border-bottom:1px solid var(--color-border-strong);letter-spacing:.05em;font-size:var(--fs-xs);white-space:nowrap}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--color-border);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--color-hover)}
.tbl .is-click{cursor:pointer}
.tbl .r{text-align:right}
.tbl .c{text-align:center}
.tbl tr.is-alert td:first-child{box-shadow:inset 3px 0 0 var(--color-primary)}
.tbl tr.is-hit td{background:var(--color-accent-soft)}
.tbl tr.rep-row:hover td{background:var(--color-hover)}
.tbl tr.rep-pick td{background:var(--color-primary-soft)}
.tbl .sub{display:block;font-size:var(--fs-xs);color:var(--color-muted);margin-top:1px}
.tbl-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--color-border);font-size:var(--fs-xs);color:var(--color-muted);flex-wrap:wrap}
/* ———————————————— 选项卡 / 筛选 ———————————————— */
.tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--color-border);overflow-x:auto}
.tab{padding:8px 14px;font-size:var(--fs-sm);color:var(--color-muted);border-bottom:2px solid transparent;white-space:nowrap;font-weight:520}
.tab:hover{color:var(--color-ink)}
.tab[aria-pressed="true"]{color:var(--color-ink);border-bottom-color:var(--color-primary);font-weight:600}
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.chip{padding:4px 12px;border:1px solid var(--color-border-strong);border-radius:999px;font-size:var(--fs-xs);color:var(--color-muted);background:var(--color-surface);transition:all var(--dur-1) var(--ease)}
.chip:hover{color:var(--color-ink)}
.chip[aria-pressed="true"]{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-bg)}
.tabs-panels .pane{display:none}
.tabs-panels .pane.is-on{display:block}
/* ———————————————— 表单 ———————————————— */
.field{display:flex;flex-direction:column;gap:5px}
.field>span{font-size:var(--fs-xs);color:var(--color-muted);letter-spacing:.03em}
.field input,.field select,.field textarea{background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--r-2);padding:8px 11px;font-size:var(--fs-sm);transition:border-color var(--dur-1) var(--ease)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--color-faint)}
.field textarea{resize:vertical;min-height:72px}
.field .hint{font-size:var(--fs-xs);color:var(--color-faint)}
.field-req>span::after{content:" · 必填";color:var(--color-primary-deep);font-size:.92em}
.search{position:relative;display:flex;align-items:center}
.search input{background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--r-2);padding:7px 12px 7px 32px;font-size:var(--fs-sm);width:100%}
.search::before{content:"";position:absolute;left:11px;width:12px;height:12px;border:1.5px solid var(--color-faint);border-radius:50%}
.search::after{content:"";position:absolute;left:21px;top:56%;width:5px;height:1.5px;background:var(--color-faint);transform:rotate(45deg)}
.checkline{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-sm);color:var(--color-muted)}
.checkline input{margin-top:4px}
.form-grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.form-grid .span2{grid-column:1 / -1}
/* ———————————————— 空 / 状态 ———————————————— */
.empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--color-muted)}
.empty .mark{font-family:var(--font-display);font-size:var(--fs-2xl);color:var(--color-faint)}
.is-busy{opacity:.55;transition:opacity var(--dur-2) var(--ease)}
/* ———————————————— 弹层骨架 ———————————————— */
[hidden]{display:none !important}
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-scrim);opacity:0;transition:opacity var(--dur-2) var(--ease)}
.scrim.is-on{opacity:1}
.overlay-host{position:fixed;inset:0;z-index:var(--z-modal);display:none;align-items:center;justify-content:center;padding:var(--sp-4)}
.overlay-host.is-on{display:flex}
.modal{width:min(560px,100%);max-height:min(86vh,760px);overflow:auto;background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--r-3);box-shadow:var(--shadow-2);transform:translateY(8px);opacity:0;transition:all var(--dur-2) var(--ease)}
.overlay-host.is-on .modal{transform:none;opacity:1}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--color-border)}
.modal-head h3{font-size:var(--fs-lg)}
.modal-body{padding:var(--sp-5)}
.modal-foot{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--color-border);background:var(--color-surface-2);flex-wrap:wrap}
.drawer-host{position:fixed;inset:0;z-index:var(--z-drawer);display:none}
.drawer-host.is-on{display:block}
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(520px,94vw);background:var(--color-bg);border-left:1px solid var(--color-border-strong);box-shadow:var(--shadow-2);transform:translateX(24px);opacity:0;transition:all var(--dur-2) var(--ease);display:flex;flex-direction:column;z-index:1}
.drawer-host.is-on .drawer{transform:none;opacity:1}
.overlay-host .scrim,.drawer-host .scrim{position:absolute;inset:0;z-index:0}
.overlay-host .modal{z-index:1}
.sp-glyph{font-family:var(--font-display);font-size:46px;line-height:1;letter-spacing:-0.02em}
.sp-glyph-sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--color-faint);text-transform:uppercase;margin-top:6px}
/* ———————————————— 图片（构建期内嵌 / 本地上传） ———————————————— */
.art-img{width:100%;height:100%;object-fit:cover;display:block}
.art-img.art-contain{object-fit:contain}
.art-duo{display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:minmax(0,100%);gap:2px;width:100%;height:100%;background:var(--color-border)}
.art-duo img{width:100%;height:100%;object-fit:cover;display:block;min-height:0}
.art-duo img.art-contain{object-fit:contain}
.pet-thumb{display:inline-block;width:52px;height:38px;border:1px solid var(--color-border);border-radius:var(--r-1);overflow:hidden;background:var(--color-surface-2);vertical-align:middle}
.pet-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pet-thumb .ph{display:grid;place-items:center;width:100%;height:100%;font-family:var(--font-display);font-size:15px;color:var(--color-faint)}
.gal{border:1px solid var(--color-border);border-radius:var(--r-2);overflow:hidden;background:var(--color-surface-2)}
.gal>img{width:100%;height:216px;object-fit:cover;display:block}
.gal>img.gal-contain{object-fit:contain}
.gal-empty{border-style:dashed}
.gal-thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.gal-thumbs button{width:58px;height:44px;border:1px solid var(--color-border-strong);border-radius:var(--r-1);overflow:hidden;background:var(--color-surface);padding:0}
.gal-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.gal-thumbs button.is-on{border-color:var(--color-primary);box-shadow:var(--ring)}
.chain{display:flex;flex-direction:column}
.chain-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--color-border);font-size:var(--fs-sm)}
.chain-row:last-child{border-bottom:none}
.chain-row .cico{flex:none;width:22px;height:22px;border:1px solid var(--color-border-strong);border-radius:var(--r-1);display:grid;place-items:center;font-size:11px;color:var(--color-muted);background:var(--color-surface)}
.edit-photos{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.eph{position:relative;width:74px;height:58px;border:1px solid var(--color-border-strong);border-radius:var(--r-1);overflow:hidden;background:var(--color-surface-2)}
.eph img{width:100%;height:100%;object-fit:cover;display:block}
.eph .eph-none{display:grid;place-items:center;width:100%;height:100%;font-size:10px;color:var(--color-faint)}
.eph button{position:absolute;top:2px;right:2px;width:17px;height:17px;border-radius:50%;background:var(--scrim);color:var(--color-bg);font-size:11px;line-height:1;display:grid;place-items:center}
.edit-photos .eph-empty{display:flex;align-items:center;justify-content:center;width:auto;min-width:150px;padding:0 12px;color:var(--color-faint);font-size:var(--fs-xs);border-style:dashed}
.tph-list{display:inline-flex;gap:4px;flex-wrap:wrap;align-items:center;vertical-align:middle}
.tph{position:relative;width:36px;height:36px;border:1px solid var(--color-border-strong);border-radius:4px;overflow:hidden;background:var(--color-surface)}
.tph img{width:100%;height:100%;object-fit:cover;display:block}
.tph button{position:absolute;top:0;right:0;width:14px;height:14px;border-radius:50%;background:var(--scrim);color:var(--color-bg);font-size:10px;line-height:1;display:grid;place-items:center}
.mat-thumb{width:44px;height:34px;border:1px solid var(--color-border-strong);border-radius:4px;overflow:hidden;display:inline-block;vertical-align:middle;background:var(--color-surface-2)}
.mat-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mat-thumb .none{display:grid;place-items:center;width:100%;height:100%;font-size:10px;color:var(--color-faint)}
button.mat-thumb-btn{padding:0;font:inherit;cursor:pointer;transition:border-color var(--dur-1) var(--ease)}
button.mat-thumb-btn:hover{border-color:var(--color-accent-line)}
button.mat-thumb-btn:hover .none{color:var(--color-accent-deep)}
.modal.modal-lg{width:min(800px,100%)}
/* ———————————————— 门户客服：悬浮按钮与联络弹层 ———————————————— */
.contact-fab{display:none;position:fixed;right:var(--sp-5);bottom:var(--sp-5);z-index:var(--z-head);align-items:center;gap:8px;padding:11px 18px;border-radius:999px;background:var(--color-primary);color:var(--color-on-primary);font-size:var(--fs-sm);font-weight:560;box-shadow:var(--shadow-2);transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.contact-fab:hover{background:var(--color-primary-deep);transform:translateY(-1px)}
body[data-area="portal"] .contact-fab{display:inline-flex}
.contact-list{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--r-2);overflow:hidden;background:var(--color-surface)}
.contact-row{display:flex;align-items:center;gap:var(--sp-3);padding:10px var(--sp-4);border-bottom:1px solid var(--color-border)}
.contact-row:last-child{border-bottom:none}
.contact-row .cbody{flex:1;min-width:0}
.contact-row .cbody b{display:block;font-weight:560;font-size:var(--fs-sm)}
.contact-row .cbody .cv{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--color-primary-deep);word-break:break-all}
.contact-row .cico{flex:none;width:30px;height:30px;border:1px solid var(--color-border-strong);border-radius:var(--r-1);display:grid;place-items:center;font-size:13px;color:var(--color-muted);background:var(--color-surface-2)}
.type-glyph{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--color-ink)}
.type-glyph .cn{font-family:var(--font-display);font-size:34px;line-height:1.1}
.type-glyph .en{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.22em;color:var(--color-faint);text-transform:uppercase}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--color-border);background:var(--color-surface)}
.drawer-body{padding:var(--sp-5);overflow-y:auto;flex:1}
.drawer-foot{padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--color-border);background:var(--color-surface);display:flex;gap:var(--sp-2);justify-content:flex-end;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);z-index:var(--z-toast);background:var(--color-ink);color:var(--color-bg);padding:10px 18px;border-radius:var(--r-2);font-size:var(--fs-sm);box-shadow:var(--shadow-2);opacity:0;pointer-events:none;transition:all var(--dur-2) var(--ease);max-width:min(560px,92vw)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast .tk{font-family:var(--font-mono);color:var(--color-gold)}
/* ---------- 客服对话（对话窗 · 双端消息互通） ---------- */
.chat-log{display:flex;flex-direction:column;gap:8px;padding:var(--sp-3);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--r-2);min-height:140px}
.chat-log .msg{max-width:82%;padding:8px 12px;border-radius:10px;font-size:var(--fs-sm);line-height:1.65;overflow-wrap:anywhere}
.chat-log .msg b.mwho{display:block;font-size:var(--fs-xs);font-weight:600;margin-bottom:2px;color:var(--color-muted)}
.chat-log .msg .mt{display:block;font-size:var(--fs-xs);color:var(--color-faint);margin-top:3px}
.chat-log .msg-guest{align-self:flex-end;background:var(--color-primary);color:var(--color-on-primary)}
.chat-log .msg-guest b.mwho{color:color-mix(in srgb,var(--color-on-primary) 80%,transparent)}
.chat-log .msg-guest .mt{color:color-mix(in srgb,var(--color-on-primary) 66%,transparent)}
.chat-log .msg-agent{align-self:flex-start;background:var(--color-surface);border:1px solid var(--color-border-strong)}
.chat-log .msg-auto{align-self:flex-start;background:var(--color-accent-soft);border:1px dashed var(--color-accent-line)}
.chat-row{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}
.chat-row input{flex:1;min-width:0;background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--r-2);padding:8px 11px;font-size:var(--fs-sm)}
.chat-row input:focus-visible{border-radius:var(--r-1)}
.quick-qs{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-2)}
/* ---------- 我的订单（门户侧列表行） ---------- */
.ord-my-row{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);padding:11px 0;border-bottom:1px dashed var(--color-border)}
.ord-my-row:last-child{border-bottom:0}
.ord-my-row .mo-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.ord-my-row .mo-main .mono{font-size:var(--fs-sm)}
.ord-my-row .mo-side{display:flex;align-items:center;gap:var(--sp-3);flex:none}
.ord-my-row .mo-side .sub{font-size:var(--fs-xs);color:var(--color-muted)}
.ord-my-row .mo-logi{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ord-my-row .mo-logi .ml-no{font-weight:600;user-select:all}
.ord-my-row .mo-logi .sub{font-size:var(--fs-xs);color:var(--color-muted)}
/* ══════════════════════════════════════════════════════════════════
   门户（Portal）
   ══════════════════════════════════════════════════════════════════ */
.site-head{position:sticky;top:0;z-index:var(--z-head);background:color-mix(in srgb,var(--seed-bg) 88%,transparent);backdrop-filter:saturate(1.1);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:var(--sp-5);padding:0 var(--sp-6);height:64px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand .mono-mark{width:34px;height:34px;border:1px solid var(--color-ink);border-radius:var(--r-1);display:grid;place-items:center;font-family:var(--font-display);font-size:19px;background:var(--color-surface)}
.brand .wordmark{display:flex;flex-direction:column;line-height:1.15}
.brand .wordmark b{font-family:var(--font-display);font-size:var(--fs-lg);letter-spacing:.02em;font-weight:600}
.brand .wordmark span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-muted)}
.site-nav{display:flex;gap:var(--sp-1);align-items:center;margin-left:var(--sp-4);overflow-x:auto}
.site-nav a{padding:7px 13px;font-size:var(--fs-sm);color:var(--color-muted);border-radius:var(--r-2);white-space:nowrap}
.site-nav a:hover{color:var(--color-ink);background:var(--color-hover)}
.site-nav a.active{color:var(--color-ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--color-primary)}
.site-actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
main{min-height:60vh}
.view{display:none;scroll-margin-top:76px}
.view.is-on{display:block}
.portal-main{max-width:1240px;margin:0 auto;padding:0 var(--sp-6) var(--sp-12)}
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-10);align-items:center;padding:var(--sp-12) 0 var(--sp-10);border-bottom:1px solid var(--color-border)}
.hero h1{font-size:var(--fs-display);letter-spacing:-0.02em;margin:var(--sp-4) 0 var(--sp-5)}
.hero .lead{font-size:var(--fs-lg);color:var(--color-muted);max-width:56ch;line-height:1.7}
.hero .actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-6);flex-wrap:wrap}
.hero-note{margin-top:var(--sp-5);font-size:var(--fs-xs);color:var(--color-faint)}
.plate{position:relative;border:1px solid var(--color-border-strong);background:var(--color-surface);padding:var(--sp-5);border-radius:var(--r-2);box-shadow:var(--shadow-1);background-image:repeating-linear-gradient(0deg,color-mix(in srgb,var(--seed-fg) 3%,transparent) 0 1px,transparent 1px 26px)}
.plate::before,.plate::after{content:"";position:absolute;width:10px;height:10px;border:1px solid var(--color-border-strong)}
.plate::before{left:6px;top:6px;border-right:none;border-bottom:none}
.plate::after{right:6px;bottom:6px;border-left:none;border-top:none}
.plate .plate-art{display:grid;place-items:center;padding:var(--sp-4) 0;color:var(--color-ink)}
.plate .plate-cap{display:flex;justify-content:space-between;gap:var(--sp-3);border-top:1px solid var(--color-border);padding-top:var(--sp-3);font-size:var(--fs-xs);color:var(--color-muted)}
.plate .plate-cap b{display:block;font-family:var(--font-display);font-size:var(--fs-sm);color:var(--color-ink);font-weight:600}
.sec{padding:var(--sp-12) 0 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-6);flex-wrap:wrap}
.sec-head h2{letter-spacing:-0.015em}
.sec-head .sub{color:var(--color-muted);font-size:var(--fs-sm);margin-top:6px;max-width:62ch}
.biz-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.biz-card{position:relative;border:1px solid var(--color-border-strong);background:var(--color-surface);border-radius:var(--r-2);padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.biz-card:hover{border-color:var(--color-faint);box-shadow:var(--shadow-1)}
.biz-card h3{font-size:var(--fs-xl)}
.biz-card .idx{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-faint);letter-spacing:.1em}
.biz-card ul{margin:0;padding-left:1.1em;color:var(--color-muted);font-size:var(--fs-sm);line-height:1.9}
.biz-card .go{margin-top:auto;font-size:var(--fs-sm);color:var(--color-primary-deep);font-weight:560}
.stat-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);border:1px solid var(--color-border);border-radius:var(--r-2);background:var(--color-surface);padding:var(--sp-5) var(--sp-6)}
.stat-strip .st b{display:block;font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:600;line-height:1.2}
.stat-strip .st span{font-size:var(--fs-xs);color:var(--color-muted)}
.species-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.sp-card{display:flex;flex-direction:column;border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--r-2);overflow:hidden;transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);text-align:left}
.sp-card:hover{border-color:var(--color-faint);box-shadow:var(--shadow-1)}
.sp-card .sp-art{height:152px;display:grid;grid-template-rows:minmax(0,100%);place-items:center;background:var(--color-surface-2);border-bottom:1px solid var(--color-border);color:var(--color-ink);overflow:hidden}
.sp-card .sp-body{padding:var(--sp-4);display:flex;flex-direction:column;gap:6px;flex:1}
.sp-card .sp-latin{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-faint);letter-spacing:.02em}
.sp-card h3{font-size:var(--fs-lg)}
.sp-card .sp-meta{font-size:var(--fs-xs);color:var(--color-muted);display:flex;gap:10px;flex-wrap:wrap}
.sp-card .sp-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--color-border);font-size:var(--fs-xs)}
.sp-card .sp-foot .pr{font-family:var(--font-mono);color:var(--color-primary-deep)}
.mall-toolbar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.p-card{display:flex;flex-direction:column;border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--r-2);overflow:hidden;transition:box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.p-card:hover{box-shadow:var(--shadow-1);border-color:var(--color-faint)}
.p-card .p-art{height:128px;display:grid;grid-template-rows:minmax(0,100%);place-items:center;border-bottom:1px solid var(--color-border);background:var(--color-surface-2);overflow:hidden}
.p-card .p-body{padding:var(--sp-4);display:flex;flex-direction:column;gap:7px;flex:1}
.p-card h3{font-size:var(--fs-md);font-weight:600}
.p-card .p-desc{font-size:var(--fs-xs);color:var(--color-muted);line-height:1.6}
.p-card .p-links{display:flex;gap:6px;flex-wrap:wrap}
.p-card .p-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:10px;border-top:1px solid var(--color-border)}
.p-card .price{font-family:var(--font-mono);font-size:var(--fs-md);font-weight:600}
.p-card .price small{font-size:.72em;color:var(--color-muted);font-family:var(--font-body)}
.sp-link{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--color-accent-deep);border-bottom:1px dashed var(--color-accent-line);cursor:pointer}
.sp-link:hover{color:var(--color-ink);border-color:var(--color-border-strong)}
.merch-band{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--sp-4)}
.farewell{border:1px solid var(--color-border-strong);border-radius:var(--r-2);background:var(--color-surface);padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3)}
.farewell h3{font-size:var(--fs-xl)}
.foot{border-top:1px solid var(--color-border);margin-top:var(--sp-12);padding:var(--sp-8) 0 var(--sp-6);color:var(--color-muted);font-size:var(--fs-sm)}
.foot .cols{display:grid;grid-template-columns:1.9fr 1fr 1fr 1.3fr 1.8fr;gap:var(--sp-6)}
.foot h4{font-size:var(--fs-sm);color:var(--color-ink);margin-bottom:var(--sp-2)}
.foot .legal{border-top:1px solid var(--color-border);margin-top:var(--sp-6);padding-top:var(--sp-4);font-size:var(--fs-xs);display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
/* ══════════════════════════════════════════════════════════════════
   运营台（Console）
   ══════════════════════════════════════════════════════════════════ */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail-w);background:var(--color-surface);border-right:1px solid var(--color-border-strong);display:none;flex-direction:column;z-index:var(--z-rail)}
.rail-head{padding:var(--sp-4) var(--sp-4) var(--sp-3);border-bottom:1px solid var(--color-border)}
.rail-head .brand .wordmark b{font-size:var(--fs-md)}
.rail-nav{flex:1;overflow-y:auto;padding:var(--sp-3) var(--sp-3) var(--sp-4)}
.rail-group{margin:var(--sp-3) 0 var(--sp-1);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-faint);padding:0 var(--sp-2)}
.rail-link{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-2);color:var(--color-muted);font-size:var(--fs-sm);width:100%;text-align:left;transition:all var(--dur-1) var(--ease);position:relative}
.rail-link:hover{color:var(--color-ink);background:var(--color-hover)}
.rail-link[aria-current="page"]{color:var(--color-ink);background:var(--color-surface-2);font-weight:600}
.rail-link[aria-current="page"]::before{content:"";position:absolute;left:-3px;top:6px;bottom:6px;width:2.5px;background:var(--color-primary);border-radius:2px}
.rail-link .ic{flex:none;width:22px;height:22px;border:1px solid var(--color-border-strong);border-radius:var(--r-1);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--color-muted);background:var(--color-surface)}
.rail-link[aria-current="page"] .ic{border-color:var(--color-primary-line);color:var(--color-primary-deep)}
.rail-link .soon{margin-left:auto;font-size:10px;color:var(--color-faint);border:1px solid var(--color-border);border-radius:3px;padding:0 4px}
.rail-foot{padding:var(--sp-3);border-top:1px solid var(--color-border);display:flex;gap:var(--sp-2);align-items:center}
.workbar{position:fixed;top:0;left:var(--rail-w);right:0;height:var(--wb-h);background:color-mix(in srgb,var(--seed-bg) 90%,transparent);border-bottom:1px solid var(--color-border-strong);display:none;align-items:center;gap:var(--sp-4);padding:0 var(--sp-6);z-index:var(--z-head)}
.workbar h2{font-size:var(--fs-lg);font-family:var(--font-body);font-weight:600;letter-spacing:0}
.workbar .crumb{font-size:var(--fs-xs);color:var(--color-faint);letter-spacing:.06em}
.workbar .tools{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
.wb-search{width:230px}
.avatar{width:34px;height:34px;border-radius:50%;border:1px solid var(--color-border-strong);display:grid;place-items:center;font-family:var(--font-display);font-size:var(--fs-sm);background:var(--color-surface)}
body[data-area="cons"] .rail{display:flex}
body[data-area="cons"] .workbar{display:flex}
body[data-area="cons"] .site-head{display:none}
body[data-area="cons"] main{margin-left:var(--rail-w);padding-top:calc(var(--wb-h) + var(--sp-6));padding-bottom:var(--sp-12)}
.work-page,#view-members,#view-content,#view-pos,#view-env,#view-loss,#view-compliance,#view-sop,#view-data,#view-studio,#view-finance,#view-registry,#view-ledger{padding:0 var(--sp-6);max-width:1460px}
.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.view-head .sub{color:var(--color-muted);font-size:var(--fs-sm);margin-top:4px;max-width:74ch}
.view-head .acts{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.filterbar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.filterbar .grow{flex:1 1 220px;min-width:180px}
.pane{padding-top:var(--sp-4)}
.kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
/* 财务：月报条 / 应收应付 */
.fin-bar{display:grid;grid-template-columns:82px 1fr auto auto;gap:var(--sp-2);align-items:center;margin:6px 0;font-size:var(--fs-xs)}
.fin-bar .fb-lbl{color:var(--color-muted);white-space:nowrap}
.fin-bar .fb-track{height:8px;border-radius:4px;background:var(--color-surface-2);overflow:hidden;border:1px solid var(--color-border)}
.fin-bar .fb-fill{display:block;height:100%;background:var(--color-accent);border-radius:4px}
.fin-bar .fb-val{font-family:var(--font-mono)}
.fin-bar .fb-pct{min-width:34px;text-align:right;color:var(--color-faint)}
.arap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
.arap-col{border:1px solid var(--color-border);border-radius:var(--r-2);padding:var(--sp-2) var(--sp-3)}
.arap-col h4{font-size:var(--fs-sm);display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;font-family:var(--font-body)}
.arap-col h4 .amt{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-primary-deep)}
.arap-row{display:flex;justify-content:space-between;gap:var(--sp-2);width:100%;text-align:left;padding:5px 0;border:none;border-bottom:1px dashed var(--color-border);background:none;cursor:pointer;color:inherit;font:inherit;font-size:var(--fs-xs);align-items:baseline}
.arap-row:last-child{border-bottom:none}
.arap-row:hover .r-id{color:var(--color-primary-deep)}
.arap-row .r-id{font-family:var(--font-mono)}
.arap-row .r-sub{display:block;color:var(--color-faint);font-size:10.5px}
.arap-row .r-amt{font-family:var(--font-mono);color:var(--color-ink);white-space:nowrap}
.arap-empty{color:var(--color-faint);font-size:var(--fs-xs);padding:4px 0;margin:0}
/* 财务：会计账簿（复式记账） */
.led-rule{display:grid;grid-template-columns:118px 1fr;gap:3px var(--sp-3);font-size:var(--fs-xs);padding:8px 0;border-bottom:1px dashed var(--color-border);align-items:baseline}
.led-rule:last-child{border-bottom:none}
.led-rule .lr-t{font-weight:600;color:var(--color-ink)}
.led-rule .lr-d{color:var(--color-muted)}
.led-rule .lr-d .mono{color:var(--color-primary-deep);font-size:11px}
.vch-row{cursor:pointer}
.vch-row:hover td{background:var(--color-surface-2)}
.led-an-row{cursor:pointer}
.led-an-row:hover td{background:var(--color-surface-2)}
.led-an-row.is-on td{background:var(--color-accent-soft)}
.led-an-row.is-on td:first-child{box-shadow:inset 2px 0 0 var(--color-accent)}
.led-an-na td{color:var(--color-faint)}
.led-dr{display:inline-block;min-width:14px;text-align:center;font-family:var(--font-mono);font-size:10px;padding:0 4px;border-radius:3px;border:1px solid var(--color-border);color:var(--color-muted);line-height:16px}
.led-dr.dr{color:var(--color-primary-deep);border-color:var(--color-primary)}
.led-sec td{padding-top:var(--sp-3);font-weight:600;color:var(--color-muted);font-size:var(--fs-xs)}
.led-sec:first-child td{padding-top:0}
.led-sum td{font-weight:600;border-top:1px solid var(--color-border-strong)}
.split{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--sp-4)}
.split-even{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4)}
.todo-list{display:flex;flex-direction:column}
.todo{display:flex;gap:var(--sp-3);align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--color-border)}
.todo:last-child{border-bottom:none}
.todo .tick{flex:none;width:16px;height:16px;margin-top:4px;border:1.5px solid var(--color-border-strong);border-radius:var(--r-1)}
.alert-list{display:flex;flex-direction:column}
.alert-row{display:flex;gap:var(--sp-3);align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--color-border)}
.alert-row:last-child{border-bottom:none}
.alert-row .sev{flex:none;width:4px;align-self:stretch;border-radius:2px;background:var(--color-gold)}
.alert-row.sev-high .sev{background:var(--color-primary)}
.alert-row.sev-low .sev{background:var(--color-accent)}
.alert-row .abody{flex:1;min-width:0}
.alert-row .abody b{font-weight:600;font-size:var(--fs-sm)}
.alert-row .abody p{font-size:var(--fs-xs);color:var(--color-muted);margin-top:1px}
.quick-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
.quick-acts .btn{justify-content:flex-start}
/* 详情 / 时间线 / 工序 */
.dl{display:grid;grid-template-columns:auto 1fr;gap:6px var(--sp-4);font-size:var(--fs-sm)}
.dl dt{color:var(--color-faint);white-space:nowrap}
.dl dd{margin:0;color:var(--color-ink)}
.dl .span2{grid-column:1 / -1}
.hr{border:none;border-top:1px dashed var(--color-border-strong);margin:var(--sp-3) 0}
.tl{position:relative;padding-left:18px}
.tl::before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:1px;background:var(--color-border-strong)}
.tl-item{position:relative;padding:0 0 var(--sp-4)}
.tl-item::before{content:"";position:absolute;left:-17px;top:4px;width:7px;height:7px;border-radius:50%;background:var(--color-surface);border:1.5px solid var(--color-border-strong)}
.tl-item.done::before{background:var(--color-primary);border-color:var(--color-primary)}
.tl-item .tt{font-size:var(--fs-sm);font-weight:560}
.tl-item .td{font-size:var(--fs-xs);color:var(--color-muted)}
.steps{display:flex;gap:0;align-items:center;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--color-faint);padding:2px 0}
.step .dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--color-border-strong);background:var(--color-surface)}
.step.done{color:var(--color-muted)}
.step.done .dot{background:var(--color-accent);border-color:var(--color-accent)}
.step.now{color:var(--color-ink);font-weight:600}
.step.now .dot{background:var(--color-primary);border-color:var(--color-primary)}
.step .bar{width:22px;height:1px;background:var(--color-border-strong);margin:0 7px}
/* POS */
.pos-wrap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--sp-4);align-items:start}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-3)}
.pos-key{border:1px solid var(--color-border-strong);background:var(--color-surface);border-radius:var(--r-2);padding:10px 12px;text-align:left;display:flex;flex-direction:column;gap:3px;transition:all var(--dur-1) var(--ease)}
.pos-key:hover{border-color:var(--color-primary-line);background:var(--color-primary-soft)}
.pos-key b{font-size:var(--fs-sm);font-weight:600}
.pos-key span{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-primary-deep)}
.pos-key[disabled]{opacity:.45;cursor:not-allowed}
.pos-cell{display:flex;gap:8px;align-items:stretch}
.pos-cell .pos-key{flex:1}
.pos-main{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.pos-thumb{width:48px;height:48px;flex:none;border:1px solid var(--color-border);border-radius:var(--r-2);object-fit:cover;background:var(--color-surface-2)}
.pos-thumb-fallback{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:20px;color:var(--color-faint)}
.pos-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 2px}
.pos-code{font-family:var(--font-mono);font-size:10px;line-height:17px;padding:0 5px;border:1px solid var(--color-border-strong);border-radius:4px;color:var(--color-muted);white-space:nowrap}
.pos-ticket{position:sticky;top:calc(var(--wb-h) + var(--sp-4))}
.ticket-line{display:flex;justify-content:space-between;gap:var(--sp-2);align-items:center;padding:8px 0;border-bottom:1px dashed var(--color-border);font-size:var(--fs-sm)}
.cart-item{display:flex;align-items:center;gap:10px;min-width:0}
.cart-thumb{width:52px;height:52px;flex:none;border-radius:var(--r-2);overflow:hidden;border:1px solid var(--color-border);background:var(--color-surface-2);display:grid;place-items:center}
.cart-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cart-thumb .tt{font-family:var(--font-display);font-size:var(--fs-xl);line-height:1;color:var(--color-faint)}
.cart-item .cart-txt{min-width:0}
.qty{display:inline-flex;align-items:center;gap:2px}
.qty button{width:22px;height:22px;border:1px solid var(--color-border-strong);border-radius:var(--r-1);font-size:12px;line-height:1;display:grid;place-items:center;color:var(--color-muted)}
.qty button:hover{color:var(--color-ink);background:var(--color-hover)}
.qty .qv{min-width:26px;text-align:center;font-family:var(--font-mono);font-size:var(--fs-sm)}
.pay-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
.pay-methods .chip{justify-content:center;padding:8px 0;text-align:center}
.pay-ordno{display:flex;align-items:center;gap:var(--sp-2);padding:8px 10px;border:1px dashed var(--color-border-strong);border-radius:var(--r-2);background:var(--color-surface-2)}
.pay-ordno .mono{flex:1;font-weight:600;user-select:all;overflow-wrap:anywhere}
.pay-qr-tip{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:9px 12px;border:1px solid var(--color-gold-line);border-radius:var(--r-2);background:var(--color-gold-soft);font-size:var(--fs-sm)}
.pay-qr-tip b{user-select:all}
.pay-qr-body{margin-top:var(--sp-2);display:grid;place-items:center;gap:var(--sp-2);padding:var(--sp-4);border:1px solid var(--color-border);border-radius:var(--r-2);background:var(--color-surface)}
.pay-qr-body img{width:min(230px,68vw);height:auto;border-radius:var(--r-2);border:1px solid var(--color-border);background:#fff;padding:8px}
.pay-qr-body .sub{font-size:var(--fs-xs);color:var(--color-muted);text-align:center}
.pay-qr-alt{padding:var(--sp-4);border:1px dashed var(--color-border-strong);border-radius:var(--r-2);font-size:var(--fs-sm);color:var(--color-muted);text-align:center}
/* 环境监控 */
.env-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.env-card{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4);border:1px solid var(--color-border);border-radius:var(--r-2);background:var(--color-surface)}
.env-card.is-alarm{border-color:var(--color-primary-line);background:var(--color-primary-soft)}
.env-card .zone{display:flex;justify-content:space-between;align-items:center;gap:8px}
.env-card .reading{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:600}
.env-card .reading small{font-size:.5em;color:var(--color-muted);font-family:var(--font-body);font-weight:500}
.env-card .env-meta{font-size:var(--fs-xs);color:var(--color-muted)}
.gauge{position:relative}
/* 内容日历 */
.cal-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--sp-2)}
.cal-day{border:1px solid var(--color-border);border-radius:var(--r-2);background:var(--color-surface);padding:8px 9px;min-height:84px;display:flex;flex-direction:column;gap:4px}
.cal-day .dd{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-faint)}
.cal-day .ev{font-size:11px;line-height:1.45;border-radius:var(--r-1);padding:2px 5px;background:var(--color-surface-2);border:1px solid var(--color-border);color:var(--color-muted)}
.cal-day .ev.hot{background:var(--color-primary-soft);border-color:var(--color-primary-line);color:var(--color-primary-deep)}
.cal-day.today{border-color:var(--color-ink)}
/* 财务 */
.ledger-neg{color:var(--color-primary-deep)}
.ledger-pos{color:var(--color-accent-deep)}
.seg{display:inline-flex;border:1px solid var(--color-border-strong);border-radius:var(--r-2);overflow:hidden;background:var(--color-surface)}
.seg button{padding:6px 13px;font-size:var(--fs-xs);color:var(--color-muted);border-right:1px solid var(--color-border)}
.seg button:last-child{border-right:none}
.seg button[aria-pressed="true"]{background:var(--color-ink);color:var(--color-bg)}
.comm-rule{font-size:var(--fs-xs);color:var(--color-muted);margin-top:2px}
/* v11 台账时间区间筛选（通用组件） */
.tf-mount{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.filterbar .tf-mount,.card-head .tf-mount{margin-bottom:0}
.tf-range{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.tf-range input[type="date"]{width:150px}
/* ══════════════════════════════════════════════════════════════════
   响应式
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:1199px){
  :root{--rail-w:66px}
  .rail-link .lbl,.rail-link .soon,.rail-group,.rail-head .wordmark{display:none}
  .rail-head{padding:var(--sp-3) var(--sp-2);display:flex;justify-content:center}
  .rail-link{justify-content:center;padding:8px 6px}
  .rail-foot{flex-direction:column}
  .species-grid,.product-grid,.env-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpi-row,.stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{grid-template-columns:1fr;gap:var(--sp-8)}
  .foot .cols{grid-template-columns:1fr 1fr}
  .split,.split-even,.pos-wrap,.merch-band{grid-template-columns:minmax(0,1fr)}
  .split>*,.split-even>*,.pos-wrap>*,.merch-band>*{min-width:0}
  .pos-ticket{position:static}
}
@media (max-width:900px){
  .site-head{gap:10px;padding:8px var(--sp-4);height:auto;min-height:56px;flex-wrap:wrap;align-content:center}
  .site-nav{order:9;width:100%;margin-left:0;padding:2px 0 6px}
  .view{scroll-margin-top:120px}
  .wb-search{width:150px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g23,.g32{grid-template-columns:1fr}
}
@media (max-width:767px){
  body[data-area="cons"] .rail{display:none}
  body[data-area="cons"] .workbar{left:0;padding:0 var(--sp-4);gap:var(--sp-2)}
  .workbar>div:first-child{display:none}
  .workbar #wbDate{display:none}
  .workbar .avatar{display:none}
  .workbar .tools{gap:var(--sp-1)}
  body[data-area="cons"] main{margin-left:0}
  .portal-main{padding:0 var(--sp-4) var(--sp-10)}
  .work-page,#view-members,#view-content,#view-pos,#view-env,#view-loss,#view-compliance,#view-sop,#view-data,#view-studio,#view-finance,#view-registry,#view-ledger{padding:0 var(--sp-4)}
  .biz-cards,.g2{grid-template-columns:1fr}
  .species-grid,.product-grid,.env-grid,.kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cal-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot .cols{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .hero{padding-top:var(--sp-8)}
  .wb-search{display:none}
  .mobile-nav{display:inline-flex !important}
  .overlay-host{padding:var(--sp-2)}
  .modal-foot{justify-content:stretch}
  .modal-foot .btn{flex:1}
  .ord-my-row{flex-direction:column;align-items:stretch;gap:var(--sp-2)}
  .ord-my-row .mo-side{flex-wrap:wrap;justify-content:flex-start;gap:var(--sp-2) var(--sp-3)}
}
@media (max-width:479px){
  .species-grid,.product-grid,.env-grid,.kpi-row,.cal-strip{grid-template-columns:1fr}
}
/* 三列版式（桌面三列）：窄屏随断点收敛为两列 / 单列 */
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:767px){.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.cols-3{grid-template-columns:1fr}}
.mobile-nav{display:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important}
}
/* ══════════════════════════════════════════════════════════════════
   暗色主题（仅覆写 seed 值；“暗房模式”）
   ══════════════════════════════════════════════════════════════════ */
[data-theme="dark"]{
  --seed-bg:#17140F;
  --seed-surface:#201B15;
  --seed-fg:#EFE8D8;
  --seed-primary:#C2705E;
  --seed-accent:#8FAE9C;
  --seed-gold:#CBA35A;
}
[data-theme="dark"] .plate{background-image:repeating-linear-gradient(0deg,color-mix(in srgb,var(--seed-fg) 5%,transparent) 0 1px,transparent 1px 26px)}

/* ===== #22 移动端响应式适配 ===== */
@media (max-width: 768px) {
  /* 侧边栏收起，顶栏适配 */
  .rail { width: 52px; }
  .rail .lbl { display: none; }
  .work-area { margin-left: 52px; }
  .topbar .title { font-size: 14px; }
  .topbar .tools > *:not(.mobile-nav-btn) { display: none; }

  /* 网格改为单列 */
  .grid.g2, .grid.g3, .grid.g4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span2 { grid-column: span 1; }

  /* 表格横向滚动 */
  .card-body table { display: block; overflow-x: auto; white-space: nowrap; }

  /* 模态框全屏 */
  .modal { width: 95vw; max-height: 90vh; margin: 5vh auto; }
  .modal-lg { width: 95vw; }

  /* KPI 卡片 */
  .kpi { padding: 12px; }
  .kpi-v { font-size: 20px; }

  /* 看板图表高度 */
  #chartSales, #chartStock { height: 200px; }

  /* 按钮文字缩小 + 触控目标 ≥44px（WCAG 2.5.5） */
  .btn { font-size: 13px; padding: 6px 10px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .rail-link, .site-nav a, .topbar a, .topbar button { min-height: 44px; display: inline-flex; align-items: center; }
  .chip, .tab, .pill { min-height: 32px; }
  .icon-btn, button[aria-label] { min-width: 44px; min-height: 44px; }

  /* 物种图鉴网格 */
  .wiki-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .wiki-grid { grid-template-columns: 1fr; }
  .modal { width: 100vw; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; }
  .topbar { padding: 8px 12px; }
}