/* =========================================================================
 * wemio-mozong.css — v2「苹果极简」设计语言(2026-06-12 重塑)
 *
 * 文件名保留(18 页 <link> + cache-bust 链路稳定),内容已从墨宗暗色靛紫
 * 全量重塑为 Apple 极简风:
 *   纯净浅底(#f5f5f7 画布 + #ffffff 卡面)  ·  黑色发丝线 rgba(0,0,0,.08)
 *   单一克制强调色(Apple 蓝 #0071e3,无渐变无 glow)  ·  系统字体栈(SF/PingFang)
 *   大留白 + 大圆角 + 极轻阴影  ·  毛玻璃白顶栏  ·  四级灰阶文字(#1d1d1f 系)
 *
 * 用法不变:在页面 inline <style> 之后 <link> 本文件(后加载→赢 cascade)。
 * 靠覆盖页面既用的 CSS 变量(--bg/--surface/--line/--accent/--text/--text-dim)
 * 整页重皮,再对关键组件做极简化增强。品牌 logo(金色 w 标)是独立内联 SVG,
 * 不受影响。所有 class 名/选择器与 v1 完全一致 —— 只换值,不动结构。
 * ========================================================================= */

/* ---- 设计 token 全量覆盖(苹果极简 · 浅色)--------------------------------
   选择器用 :root[data-theme=...](= claude-design-system 同特异性),
   本文件后加载 → 后者赢 cascade → light/dark/cinema 三主题统一翻苹果浅色。
   结构 token(--fs/--sp/--radius/--lh/--tracking/--transition/--shadow/
   --font-serif)不动 —— 它们与配色正交。 */
:root,
html[data-theme="cinema-dark"]:root,
html[data-theme="claude-dark"]:root,
html[data-theme="claude-light"]:root {
  /* 背景 / 面 */
  --bg:#f5f5f7; --bg2:#ffffff; --surface:#ffffff; --surface-2:#f5f5f7;
  --panel:#ffffff; --panel-2:#f5f5f7; --code-bg:#f6f6f8;
  --code-block-bg:#f6f6f8; --code-block-text:#1d1d1f; --code-block-line:rgba(0,0,0,.08);
  --status-dryrun-bg:#f5f5f7;
  /* 边框 / 发丝 */
  --line:rgba(0,0,0,.08); --line-strong:rgba(0,0,0,.14);
  --border:rgba(0,0,0,.08); --border-strong:rgba(0,0,0,.14);
  --hairline:rgba(0,0,0,.08);
  /* 文字四级灰阶(Apple #1d1d1f 系)*/
  --text:#1d1d1f; --text-strong:#000000; --text-dim:#6e6e73; --text-dim-2:#86868b;
  --text-mute:#86868b; --muted:#6e6e73; --muted-2:#86868b;
  /* 强调:单一 Apple 蓝。--accent 作 CTA(白字)+ 通用强调,无渐变。 */
  --accent:#0071e3; --accent-hover:#0077ed; --accent-fg:#ffffff;
  --accent-soft:rgba(0,113,227,.08); --accent-2:#0071e3;
  --ind:#0071e3; --vio:#0071e3; --pur:#5e5ce6;
  --grad:linear-gradient(135deg, #0077ed 0%, #0071e3 100%);
  /* 语义色(浅底版 · Apple system colors 调深到可读对比度)*/
  --high:#1f8a4c; --high-soft:rgba(52,199,89,.13);
  --med:#b25e09; --med-soft:rgba(255,159,10,.14);
  --low:#d70015; --low-soft:rgba(255,59,48,.10);
  --error:#d70015; --error-soft:rgba(255,59,48,.10);
  --warn:#b25e09; --warn-soft:rgba(255,159,10,.14);
  --notice-text:#0071e3; --bg-notice-soft:rgba(0,113,227,.07);
  --bg-success-soft:rgba(52,199,89,.10); --border-success:#34c759;
  --action-retry-soft:rgba(255,159,10,.14); --action-retry-text:#b25e09;
  /* 创作模式色(剧本/创意)→ Apple 蓝 / Apple 靛 */
  --path-brief:#0071e3; --path-creative:#5e5ce6;
  /* 遮罩(Apple 弹层:轻量暗化)*/
  --overlay-dark:rgba(0,0,0,.40); --overlay-darker:rgba(0,0,0,.55); --overlay-fg:#ffffff;
  /* 字体:系统栈(SF Pro / PingFang SC),不再外链 Google Fonts */
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}

/* ---- 全局底:纯净浅灰画布(无光晕)+ 字体 ------------------------------- */
html, body {
  background: #f5f5f7;
  color: #1d1d1f;
  font-family: var(--font-sans);
}
body {
  background: #f5f5f7;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.65;
}
::selection { background: rgba(0,113,227,.18); color: #1d1d1f; }

/* 细滚动条(浅) */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.18) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(0,0,0,.16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.28); background-clip: padding-box; }

/* ---- 顶栏:sticky 毛玻璃白(Apple nav)------------------------------------- */
.hdr {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 60;
}
.navlink { border-radius: 8px; transition: border-color .18s, color .18s, background .18s; }
.navlink:hover { border-color: transparent; color: var(--accent); background: rgba(0,113,227,.06); }

/* ---- 标题 ----------------------------------------------------------------- */
h1 { font-weight: 700; letter-spacing: -.022em; line-height: 1.3; }
h3 { letter-spacing: -.01em; line-height: 1.3; }
.sub { color: var(--text-dim); }

/* ---- 卡片:纯白面 + 发丝线 + 极轻阴影,hover 仅微提 ------------------------ */
.card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  transition: border-color .25s, transform .2s, box-shadow .25s;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }

/* ---- 输入:白底发丝框 + focus 蓝环 ----------------------------------------- */
textarea, input, select {
  background: #ffffff;
  border: 1px solid #d2d2d7;
  border-radius: 12px;
  color: var(--text);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
textarea:focus, input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(0,113,227,.15);
  background: #ffffff;
}
textarea::placeholder, input::placeholder { color: var(--text-mute); }
label { color: var(--text-dim); }

/* ---- 按钮:Apple 蓝实色,无 glow;ghost 白底发丝 ---------------------------- */
button {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: none;
  transition: transform .15s, box-shadow .25s, opacity .2s, filter .2s, background .2s;
}
button:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,113,227,.22); }
button:active:not(:disabled) { transform: translateY(0); }
button.ghost {
  background: #ffffff;
  color: var(--text);
  border: 1px solid #d2d2d7;
  box-shadow: none;
}
button.ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: rgba(0,113,227,.05); transform: none; }
button:disabled { opacity: .45; cursor: not-allowed; }

/* ---- 胶囊 / chip / 标签 ---------------------------------------------------- */
.pill { background: rgba(0,113,227,.08); color: var(--accent); border: 1px solid rgba(0,113,227,.22); }
.help-btn { transition: border-color .18s, color .18s, background .18s; }
.help-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,113,227,.06); }
.moat span { background: rgba(0,113,227,.06); border: 1px solid rgba(0,113,227,.20); color: var(--accent); }
.cost-pill { background: rgba(0,113,227,.10); color: var(--accent); }

/* ---- 进度器:Apple 蓝 ------------------------------------------------------ */
.mv-step.active .dot {
  border-color: var(--accent); color: var(--accent);
  background: rgba(0,113,227,.08);
  box-shadow: 0 0 0 4px rgba(0,113,227,.10);
  animation: mzPulse 2.2s ease-in-out infinite;
}
.mv-step.done .dot { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: none; }
.mv-step.done .line { background: var(--accent); }
@keyframes mzPulse { 0%,100% { box-shadow: 0 0 0 4px rgba(0,113,227,.10); } 50% { box-shadow: 0 0 0 8px rgba(0,113,227,.04); } }
.bar > i { background: var(--accent); }

/* ---- 项目库卡片 / 工具卡:白面 + hover 微提 ------------------------------- */
.proj {
  background: #ffffff;
  border: 1px solid var(--line); border-radius: 16px;
}
.proj:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }
.proj.sel { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,113,227,.18); }
.proj .selbox { accent-color: var(--accent); }

/* 状态徽标:浅底语义色 */
.badge.draft   { color: var(--text-dim); }
.badge.quote   { color: #b25e09; border-color: rgba(255,159,10,.40); background: rgba(255,159,10,.10); }
.badge.running { color: #0071e3; border-color: rgba(0,113,227,.35); background: rgba(0,113,227,.08); }
.badge.done    { color: #1f8a4c; border-color: rgba(52,199,89,.40); background: rgba(52,199,89,.10); }
.badge.failed  { color: #d70015; border-color: rgba(255,59,48,.35); background: rgba(255,59,48,.08); }

/* ---- tab / subtab(mv-tools 速创/去水印)----------------------------------- */
.ttab.on { color: var(--accent); border-bottom-color: var(--accent); }
.subtab.on { border-color: var(--accent); color: var(--accent); background: rgba(0,113,227,.06); }
.preset:hover { border-color: var(--accent); color: var(--accent); }

/* ---- onboarding / 参考模态:白面 + 蓝点 ----------------------------------- */
.ob-card, .ref-card { background: #ffffff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 64px rgba(0,0,0,.16); }
.ob-card .ob-sub { color: var(--accent); }
.ob-dots i.on { background: var(--accent); }
.ob-flow div { border: 1px solid var(--line); background: var(--surface-2); }
.ref-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.pchip:hover { border-color: var(--accent); color: var(--accent); }
.mtable td:last-child { color: var(--accent); }

/* ---- 资产面板:蓝点缀 ------------------------------------------------------ */
.concept-line { border-left: 2px solid var(--accent); }
.look-chip { background: var(--surface-2); border: 1px solid var(--line); }

/* ---- 流程面包屑:JS(_flow.js)未渲染时是带边框的空壳条 —— 暗色时代不可见,
   浅色下露馅(全宽空白圆角条)。空则整条隐藏,populated 后正常显示。 ---- */
.topvop-stage-breadcrumb:empty { display: none; }

/* ---- 开幕黑帘 → 浅色幕(claude-design-system .cinematic-open 是 #0E0C0A
   全屏黑帘 + 半屏黑 bar;苹果浅色系统下进站闪黑 2s 不可接受,同特异性
   后加载翻浅,动画/退场逻辑不动)。 ---- */
.cinematic-open { background: #f5f5f7; }
.cinematic-open .co-bar { background: #e8e8ed; }
.cinematic-open .co-logo { color: #1d1d1f; }
.cinematic-open .co-mark { color: rgba(0,113,227,.85); }

/* ---- 任务 banner:白面 + 蓝环 ---------------------------------------------- */
#task-banner { background: rgba(255,255,255,.95); border: 1px solid rgba(0,113,227,.35); box-shadow: 0 10px 32px rgba(0,0,0,.12); }
#task-banner .spin { border-color: rgba(0,113,227,.25); border-top-color: var(--accent); }
.spin { border-color: rgba(0,113,227,.25); border-top-color: var(--accent); }

/* =========================================================================
 * UX 范式(沿用骨架):① 选择创作模式(两张大卡决策)② 配置 selectable 卡片
 * ========================================================================= */
.mode-head { text-align:center; margin: 8px 0 12px; }
.mode-head h2 { margin:0 0 8px; font-size:32px; font-weight:700; letter-spacing:-.022em; line-height:1.2; color:var(--text-strong); }
.mode-head .mode-sub { color: var(--text-dim); font-size:14px; line-height:1.6; }
.mode-pick { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin:24px 0 8px; }
.mode-card {
  position:relative; cursor:pointer; border-radius:20px; padding:32px 32px 24px;
  background:#ffffff;
  border:1px solid var(--line);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
  transition:border-color .22s, transform .2s, box-shadow .25s, background .22s;
}
.mode-card:hover { transform:translateY(-3px); border-color:var(--line-strong); box-shadow:0 10px 28px rgba(0,0,0,.08); }
.mode-card.sel {
  border-color:var(--accent);
  background:#ffffff;
  box-shadow:0 0 0 3px rgba(0,113,227,.18), 0 10px 28px rgba(0,0,0,.06);
}
.mode-card .m-ico {
  width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:26px; margin-bottom:16px;
  background:rgba(0,113,227,.07);
  border:1px solid rgba(0,113,227,.12);
  transition:transform .25s;
}
.mode-card:hover .m-ico { transform:scale(1.06); }
.mode-card h3 { margin:0 0 8px; font-size:18px; font-weight:600; color:var(--text-strong); letter-spacing:-.01em; }
.mode-card .m-desc { color:var(--text-dim); font-size:13px; line-height:1.6; margin-bottom:16px; min-height:40px; }
.mode-card ul { list-style:none; margin:0; padding:0; }
.mode-card li { color:var(--text-dim); font-size:13px; line-height:2; padding-left:16px; position:relative; }
.mode-card li::before { content:"•"; position:absolute; left:2px; color:var(--accent); }
.mode-card .m-badge {
  position:absolute; top:18px; right:18px; font-size:11px; font-weight:600; padding:4px 12px; border-radius:999px;
  background:var(--accent); color:#fff; box-shadow:none;
}
.mode-hint { text-align:center; color:var(--text-dim); font-size:13px; padding:16px 0; }

/* 配置 selectable 卡/chip(风格预设·时长·比例)*/
.opt-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.opt-chip {
  cursor:pointer; user-select:none; font-size:13px; padding:8px 16px; border-radius:999px;
  background:#ffffff; border:1px solid #d2d2d7; color:var(--text-dim);
  transition:border-color .18s, color .18s, background .18s, transform .12s, box-shadow .18s;
}
.opt-chip:hover { border-color:var(--text-mute); color:var(--text); transform:translateY(-1px); }
.opt-chip.sel {
  border-color:var(--accent); color:#fff;
  background:var(--accent);
  box-shadow:none;
  transform:none;
}
.opt-chip:active { transform:scale(.97); }

/* 大主 CTA(Apple 蓝实色,胶囊感)*/
button.cta-lg { width:100%; padding:16px 24px; font-size:16px; border-radius:14px;
  letter-spacing:.01em; box-shadow:none; }
button.cta-lg:hover:not(:disabled){ box-shadow:0 6px 18px rgba(0,113,227,.25); }

/* =========================================================================
 * 工作台骨架:左侧竖向阶段导航栏 + 2 栏栅格([阶段栏 | 主区])
 * ========================================================================= */
.ws-grid { display:grid; grid-template-columns:240px minmax(0,1fr); gap:24px; align-items:start; }
@media (max-width:860px){ .ws-grid { grid-template-columns:1fr; } .stage-rail { position:static !important; } }

.stage-rail {
  position:sticky; top:80px;
  background:#ffffff;
  border:1px solid var(--line); border-radius:18px; padding:16px;
  display:flex; flex-direction:column; min-height:360px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.rail-back { font-size:12px; color:var(--text-dim); background:none; border:0; box-shadow:none;
  padding:4px 8px; text-align:left; cursor:pointer; transition:color .18s; }
.rail-back:hover { color:var(--accent); transform:none; box-shadow:none; background:none; }
.rail-proj { padding:8px 8px 12px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.rail-proj .rp-k { font-size:11px; color:var(--text-mute); letter-spacing:.14em; text-transform:uppercase; }
.rail-proj .rp-name { font-size:15px; color:var(--text-strong); font-weight:600; margin-top:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 竖向阶段(复用 #mv-steps 的 4 个 .mv-step + setMvStage 逻辑)*/
.stage-rail .mv-steps { display:flex; flex-direction:column; gap:2px; margin:0; }
.stage-rail .mv-step { flex:none; gap:12px; padding:12px; border-radius:12px;
  position:relative; transition:background .18s; }
.stage-rail .mv-step .line { display:none; }
.stage-rail .mv-step .txt b { font-size:13px; }
.stage-rail .mv-step .txt span { font-size:11px; }
.stage-rail .mv-step.active { background:rgba(0,113,227,.07); }
.stage-rail .mv-step.active::before { content:""; position:absolute; left:0; top:9px; bottom:9px;
  width:3px; border-radius:0 3px 3px 0; background:var(--accent); }

.rail-credits { margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-dim); }
.rail-credits b { color:var(--accent); font-weight:700; }
.rail-credits .rc-refresh { margin-left:auto; cursor:pointer; color:var(--text-mute);
  background:none; border:0; box-shadow:none; font-size:13px; padding:4px; }
.rail-credits .rc-refresh:hover { color:var(--accent); transform:none; box-shadow:none; background:none; }

/* 主区紧凑头 */
.ws-main h1 { font-size:28px; margin:0 0 8px; }
.ws-main .sub { margin-bottom:20px; }

/* =========================================================================
 * FOUNDATION(权威组件库 + 标准布局层)— v2 苹果极简皮
 *
 * 架构说明不变:不引入 CSS @layer;本区组件全部为 net-new class 或命名
 * 空间化,靠「本文件后加载 + 浅色 token 已覆盖」赢 cascade。测试锁定的
 * 原生控件(#s-model 等)走 .select-skin「贴皮」轨道:DOM/option/id 不动。
 * 所有页面套用:.topvop-shell(JS 注入)→ .page-shell → .page-header →
 * archetype 容器(.wb-3col / .dash-grid / .wizard-flow / .list-admin /
 * .detail-3col)。
 * ========================================================================= */

/* ---- Button:显式 .btn 基类 + 5 变体 + 3 尺寸(.cta-lg 已存在保留)-------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font:600 14px/1 var(--font-sans); border-radius:12px; padding:8px 16px;
  border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .15s, box-shadow .25s, filter .2s, background .2s, border-color .2s, color .2s;
}
.btn:active:not(:disabled) { transform:translateY(0) scale(.985); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-primary   { background:var(--accent); color:#fff; box-shadow:none; }
.btn-primary:hover:not(:disabled)   { background:var(--accent-hover); transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,113,227,.22); }
.btn-secondary { background:#ffffff; color:var(--text); border-color:#d2d2d7; }
.btn-secondary:hover:not(:disabled) { border-color:var(--text-mute); background:#fafafa; }
.btn-outline   { background:transparent; color:var(--accent); border-color:rgba(0,113,227,.45); }
.btn-outline:hover:not(:disabled)   { background:rgba(0,113,227,.06); border-color:var(--accent); }
.btn-ghost     { background:transparent; color:var(--text-dim); border-color:transparent; box-shadow:none; }
.btn-ghost:hover:not(:disabled)     { color:var(--accent); background:rgba(0,113,227,.06); }
.btn-danger    { background:#d70015; color:#fff; box-shadow:none; }
.btn-danger:hover:not(:disabled)    { background:#e3142a; transform:translateY(-1px); box-shadow:0 4px 14px rgba(255,59,48,.22); }
.btn-sm { padding:4px 12px; font-size:13px; border-radius:8px; }
.btn-md { padding:8px 16px; }
.btn-lg { padding:12px 24px; font-size:15px; border-radius:12px; }

/* ---- Form:field / label / control / error + check / radio / toggle ------- */
.form-field { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.form-field.row { display:grid; grid-template-columns:140px minmax(0,1fr); align-items:center; gap:12px; }
.form-label { font-size:13px; color:var(--text-dim); font-weight:500; }
.form-label .req { color:var(--low); margin-left:2px; }
.form-control { width:100%; }
.form-help { font-size:12px; color:var(--text-mute); letter-spacing:.01em; line-height:1.5; }
.form-error { font-size:12px; color:var(--low); }
.form-field.is-invalid .form-control { border-color:var(--low); box-shadow:0 0 0 3px var(--low-soft); }
.check, .radio { display:inline-flex; align-items:center; gap:8px; cursor:pointer; color:var(--text); font-size:14px; }
.check input, .radio input { accent-color:var(--accent); width:16px; height:16px; }
.toggle { position:relative; width:42px; height:26px; border-radius:999px; background:#e9e9eb;
  border:1px solid transparent; cursor:pointer; transition:background .2s, border-color .2s; flex:none; padding:0; box-shadow:none; }
.toggle[aria-checked="true"] { background:#34c759; border-color:transparent; }
.toggle::after { content:""; position:absolute; top:2px; left:2px; width:20px; height:20px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s; }
.toggle[aria-checked="true"]::after { transform:translateX(16px); }

/* ---- Select 双轨 --------------------------------------------------------- */
/* 轨道 A:原生 <select> 贴皮(测试锁定的 #s-model/#wp-model-id 等走这条:
   把 <select> 包一层 <span class="select-skin">,DOM/option/id 全不动)。 */
.select-skin { position:relative; display:inline-block; width:100%; }
.select-skin select { appearance:none; -webkit-appearance:none; width:100%; padding-right:38px; }
.select-skin::after { content:"▾"; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:var(--text-dim); font-size:12px; }
/* 轨道 B:全自定义富下拉(仅非锁定新场景:分组/图标/富内容)。JS 切 .open。 */
.dropdown { position:relative; }
.dropdown-menu { position:absolute; z-index:50; margin-top:8px; min-width:100%;
  background:#ffffff;
  border:1px solid var(--line); border-radius:14px; padding:8px;
  box-shadow:0 16px 44px rgba(0,0,0,.14); display:none; }
.dropdown.open .dropdown-menu { display:block; }
.dropdown-item { padding:8px 12px; border-radius:8px; color:var(--text); cursor:pointer; font-size:14px; }
.dropdown-item:hover, .dropdown-item[aria-selected="true"] { background:rgba(0,113,227,.07); color:var(--accent); }

/* ---- Modal(命名空间化,避开 claude .modal)------------------------------- */
.modal-overlay { position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:rgba(0,0,0,.40); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.modal-panel { width:min(560px,92vw); max-height:86vh; overflow:auto;
  background:#ffffff;
  border:1px solid var(--line); border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.22); }
.modal-head { padding:24px 24px 16px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; }
.modal-head h2, .modal-head h3 { margin:0; font-size:17px; font-weight:600; color:var(--text-strong); }
.modal-body { padding:24px; }
.modal-foot { padding:16px 24px 24px; display:flex; gap:12px; justify-content:flex-end; border-top:1px solid var(--line); }

/* ---- Table --------------------------------------------------------------- */
.table { width:100%; border-collapse:collapse; font-size:13px; }
.table thead th { text-align:left; padding:12px 16px; color:var(--text-mute);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--line-strong); font-weight:600; }
.table tbody td { padding:12px 16px; border-bottom:1px solid var(--line); color:var(--text); }
.table.stripe tbody tr:nth-child(even) { background:rgba(0,0,0,.015); }
.table tbody tr:hover { background:rgba(0,113,227,.04); }

/* ---- Breadcrumb / Tabs / Alert / Toast ----------------------------------- */
.breadcrumb { display:flex; gap:8px; align-items:center; font-size:12px; color:var(--text-mute); }
.breadcrumb a { color:var(--text-dim); text-decoration:none; }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb .sep::before { content:"/"; color:var(--line-strong); }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); }
.tab { padding:12px 16px; color:var(--text-dim); border-bottom:2px solid transparent; cursor:pointer; background:none; box-shadow:none; border-radius:0; font-weight:500; font-size:14px; }
.tab.on, .tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.alert { display:flex; gap:12px; padding:12px 16px; border-radius:12px; border:1px solid; font-size:13px; line-height:1.6; }
.alert-info    { background:var(--bg-notice-soft);  border-color:rgba(0,113,227,.30);  color:var(--notice-text); }
.alert-success { background:var(--bg-success-soft);  border-color:rgba(52,199,89,.45); color:var(--high); }
.alert-warn    { background:var(--med-soft);  border-color:rgba(255,159,10,.40); color:var(--warn); }
.alert-error   { background:var(--error-soft); border-color:rgba(255,59,48,.35); color:var(--error); }
.toast-stack { position:fixed; right:20px; bottom:20px; z-index:120; display:flex; flex-direction:column; gap:12px; }
.toast { min-width:240px; max-width:380px; box-shadow:0 12px 36px rgba(0,0,0,.16); animation:mzToastIn .25s ease; }
@keyframes mzToastIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* =========================================================================
 * 标准布局层:page-shell + page-header + archetype 容器(大留白)
 * ========================================================================= */
.page-shell { max-width:1200px; margin:0 auto; padding:32px 24px 64px; }
.page-shell.wide { max-width:1440px; }
.page-shell.narrow { max-width:840px; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:32px; flex-wrap:wrap; }
.page-header .ph-main { min-width:0; }
.page-header .ph-title { font-size:28px; font-weight:700; letter-spacing:-.022em; line-height:1.25; color:var(--text-strong); margin:0 0 8px; }
.page-header .ph-sub { color:var(--text-dim); font-size:14px; line-height:1.6; }
.page-header .ph-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* Archetype 容器(均 ≤960px 塌缩为单列)*/
.wb-3col     { display:grid; grid-template-columns:240px minmax(0,1fr) 320px; gap:20px; align-items:start; }
.dash-grid   { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.wizard-flow { max-width:880px; margin:0 auto; display:flex; flex-direction:column; gap:20px; }
.list-admin  { display:grid; grid-template-columns:1fr; gap:16px; }
.list-admin.split { grid-template-columns:380px minmax(0,1fr); align-items:start; }
.detail-3col { display:grid; grid-template-columns:300px minmax(0,1fr) 280px; gap:20px; align-items:start; }
@media (max-width:1100px){
  .wb-3col { grid-template-columns:216px minmax(0,1fr); }
  .detail-3col { grid-template-columns:280px minmax(0,1fr); }
}
@media (max-width:860px){
  .wb-3col, .detail-3col, .list-admin.split { grid-template-columns:1fr; }
}

/* 通用面板(archetype 内容块,纯白面,统一替代各页 bespoke .panel 外观)*/
.wpanel { background:#ffffff;
  border:1px solid var(--line); border-radius:16px; padding:24px;
  box-shadow:0 2px 12px rgba(0,0,0,.04); }
.wpanel-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.wpanel-head h3 { margin:0; font-size:17px; font-weight:600; color:var(--text-strong); letter-spacing:-.012em; line-height:1.3; }
.wpanel-head .wp-meta { font-size:12px; color:var(--text-dim); }