/* ============================================================
   木华云科 · 高端主题覆盖层 v4「深空指挥舱 · 三栏布局」
   ------------------------------------------------------------
   v4 布局重设计（不改应用功能代码）：
     · 三栏平台壳：左 Dock(60px) + 中内容 + 右任务面板(280px)
     · 工作台顶栏（div.sticky.top-0.z-30）玻璃化 + 渐变发丝线
     · Hero 指挥横幅卡化；统计条 → 4 格仪表卡
     · 项目库区块标题（main::before）+ 空态三步引导
     · 登录页左右分屏（52vw 品牌视觉面板）
   真实 DOM 锚点（已探测）：
     顶栏 #app-root .sticky.top-0.z-30   宽度 max-w-[1320px]
     Hero  [class*="items-stretch"][class*="max-w-[1320px]"]
     统计条 [class*="rounded-[10px]"][class*="items-stretch"]
     登录容器 body.mh-login #app-root > div.relative.flex.min-h-screen
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root,:host {
  --color-bg: oklch(14.2% .016 275);
  --color-bg-grad-a: oklch(17.8% .024 278);
  --color-bg-grad-b: oklch(12% .014 268);
  --color-surface-2: oklch(23.5% .022 275);
  --color-ink-800: oklch(24% .022 275);

  --color-hairline: oklch(62% .04 290 / .22);
  --color-hairline-strong: oklch(66% .04 290 / .42);
  --color-hairline-soft: oklch(62% .04 290 / .12);

  --color-text: oklch(98.2% .006 280);
  --color-text-2: oklch(88% .014 280);
  --color-text-3: oklch(71% .018 280);
  --color-text-4: oklch(57% .018 280);

  --color-accent: oklch(74% .16 297);
  --color-accent-2: oklch(87% .09 299);
  --color-accent-soft: oklch(74% .16 297 / .2);
  --color-accent-dim: oklch(74% .16 297 / .11);
  --color-accent-glow: oklch(74% .16 297 / .42);

  --font-sans: "Inter", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, ui-monospace, monospace;
  --font-editorial: "Instrument Serif", "Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
}

/* ---------- 2. 全局氛围 ---------- */
body { background:
  radial-gradient(1100px 560px at 12% -12%, oklch(30% .09 296 / .30), transparent 60%),
  radial-gradient(900px 520px at 96% 108%, oklch(26% .07 268 / .28), transparent 60%),
  radial-gradient(700px 420px at 78% -6%, oklch(24% .06 320 / .16), transparent 60%),
  linear-gradient(180deg, oklch(15.5% .016 276), oklch(13% .013 272));
}
#app-root { position: relative; z-index: 1; }

/* 坐标网格 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(oklch(70% .06 295 / .045) 1px, transparent 1px),
    linear-gradient(90deg, oklch(70% .06 295 / .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(1200px 800px at 50% 0%, oklch(100% 0 0 / .9), oklch(100% 0 0 / .25) 55%, transparent 85%);
  -webkit-mask-image: radial-gradient(1200px 800px at 50% 0%, oklch(100% 0 0 / .9), oklch(100% 0 0 / .25) 55%, transparent 85%);
}
/* 胶片颗粒 */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  opacity: .026; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
/* 顶部渐变基线 */
#mh-baseline {
  position: fixed; top: 0; left: 0; right: 0; height: 1px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, oklch(74% .16 297 / .45) 16%, oklch(82% .13 318 / .62) 50%, oklch(74% .16 297 / .45) 84%, transparent 100%);
}

/* ---------- 3. 环境光效层 ---------- */
#mh-aurora { position: fixed; inset: -20%; z-index: 0; pointer-events: none; overflow: hidden; }
#mh-aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(90px); will-change: transform; }
#mh-aurora i:nth-child(1) { width: 620px; height: 620px; left: -6%; top: -12%; background: radial-gradient(circle, oklch(46% .13 297 / .30), transparent 66%); animation: mh-drift-a 34s ease-in-out infinite alternate; }
#mh-aurora i:nth-child(2) { width: 540px; height: 540px; right: -8%; bottom: -14%; background: radial-gradient(circle, oklch(42% .11 268 / .26), transparent 66%); animation: mh-drift-b 42s ease-in-out infinite alternate; }
#mh-aurora i:nth-child(3) { width: 420px; height: 420px; left: 42%; top: 8%; background: radial-gradient(circle, oklch(44% .10 320 / .16), transparent 66%); animation: mh-drift-c 50s ease-in-out infinite alternate; }
@keyframes mh-drift-a { to { transform: translate(120px, 90px) scale(1.12); } }
@keyframes mh-drift-b { to { transform: translate(-140px, -70px) scale(1.08); } }
@keyframes mh-drift-c { to { transform: translate(-90px, 120px) scale(.92); } }
#mh-spot {
  position: fixed; left: 0; top: 0; width: 760px; height: 760px; margin: -380px 0 0 -380px;
  z-index: 2; pointer-events: none; will-change: transform;
  background: radial-gradient(circle, oklch(74% .16 297 / .075), oklch(74% .16 297 / .028) 42%, transparent 68%);
}

/* ---------- 4. 布局壳：三栏 ---------- */
body.mh-has-rail { padding-left: 60px; }
body.mh-wide { padding-right: 308px; }

/* ---- 4.1 顶栏（div.sticky 或 header，两个页面都命中） ---- */
#app-root .sticky.top-0.z-30, #app-root header.sticky {
  background: linear-gradient(180deg, oklch(15.5% .018 276 / .92), oklch(14% .015 274 / .82)) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .05);
  border-bottom-color: transparent !important;
  position: relative;
}
#app-root .sticky.top-0.z-30::after, #app-root header.sticky::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, oklch(74% .16 297 / .32) 30%, oklch(82% .13 318 / .38) 50%, oklch(74% .16 297 / .32) 70%, transparent);
}
/* 品牌 LOGO 徽章底 */
#app-root .sticky.top-0.z-30 .flex.items-center.gap-2\.5 > svg,
#app-root .sticky.top-0.z-30 .flex.items-center.gap-2\.5 > img {
  filter: drop-shadow(0 0 14px oklch(74% .16 297 / .5));
}
/* 搜索框升级 */
#app-root .sticky.top-0.z-30 label[class*="rounded-lg"] {
  background: oklch(100% 0 0 / .035);
  border-color: oklch(62% .04 290 / .2);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#app-root .sticky.top-0.z-30 label[class*="rounded-lg"]:focus-within {
  border-color: oklch(74% .16 297 / .5);
  box-shadow: 0 0 0 3px var(--color-accent-dim), 0 0 24px -6px var(--color-accent-glow);
  background: oklch(100% 0 0 / .05);
}

/* ---- 4.2 Hero 指挥横幅 ---- */
#app-root [class*="max-w-[1320px]"][class*="items-stretch"] {
  position: relative;
  margin-top: 18px;
  padding: 26px 28px;
  border-radius: 18px;
  border: 1px solid oklch(62% .04 290 / .22);
  background:
    linear-gradient(120deg, oklch(74% .16 297 / .07), transparent 42%),
    linear-gradient(180deg, oklch(18.5% .022 277 / .85), oklch(15.5% .017 274 / .8));
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / .07),
    0 24px 60px -30px oklch(0% 0 0 / .9);
  overflow: hidden;
}
/* 横幅右上角装饰网格 */
#app-root [class*="max-w-[1320px]"][class*="items-stretch"]::before {
  content: ""; position: absolute; right: -40px; top: -40px; width: 260px; height: 200px;
  pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(oklch(74% .16 297 / .14) 1px, transparent 1px),
    linear-gradient(90deg, oklch(74% .16 297 / .14) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(closest-side, oklch(100% 0 0 / .8), transparent);
  -webkit-mask-image: radial-gradient(closest-side, oklch(100% 0 0 / .8), transparent);
}
/* 左缘光柱 */
#app-root [class*="max-w-[1320px]"][class*="items-stretch"]::after {
  content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, oklch(76% .14 298 / .85), transparent);
  box-shadow: 0 0 22px oklch(74% .16 297 / .55);
}

/* ---- 4.3 统计条 → 4 格仪表 ---- */
#app-root [class*="rounded-[10px]"][class*="items-stretch"] {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  border: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border-radius: 0;
}
#app-root [class*="rounded-[10px]"][class*="items-stretch"] > * {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 10px 13px;
  border-radius: 11px;
  border: 1px solid oklch(62% .04 290 / .2);
  background: linear-gradient(180deg, oklch(19% .022 277 / .75), oklch(16% .017 274 / .6));
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .05);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
#app-root [class*="rounded-[10px]"][class*="items-stretch"] > *:hover {
  border-color: oklch(74% .16 297 / .4);
  box-shadow: 0 8px 26px -12px var(--color-accent-glow);
  transform: translateY(-2px);
}
#app-root [class*="rounded-[10px]"][class*="items-stretch"] > * [class*="font-mono"],
#app-root [class*="rounded-[10px]"][class*="items-stretch"] > * [class*="text-lg"],
#app-root [class*="rounded-[10px]"][class*="items-stretch"] > * [class*="text-xl"] {
  text-shadow: 0 0 16px oklch(74% .16 297 / .35);
}

/* ---------- 5. 排版 ---------- */
#app-root [class*="uppercase"][class*="tracking-"] {
  color: oklch(78% .1 300 / .85);
  letter-spacing: .2em;
  text-shadow: 0 0 20px oklch(74% .16 297 / .22);
}
h1.font-editorial {
  background: linear-gradient(115deg, oklch(99% .004 280) 25%, oklch(93% .028 300) 70%, oklch(86% .05 298) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 22px oklch(74% .16 297 / .16));
}
.font-editorial { letter-spacing: -.008em; }

/* ---------- 6. 项目库区块 ---------- */
/* 区块标题（main::before，按页面名） */
body.mh-page-projects main::before,
body.mh-page-assets main::before {
  content: "";
  display: flex; align-items: center; gap: 12px;
  margin: 4px 2px 16px;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .22em;
  color: oklch(80% .09 298 / .9);
  text-shadow: 0 0 18px oklch(74% .16 297 / .3);
}
body.mh-page-projects main::before { content: "◆ 项目库 · PROJECT LIBRARY"; }
body.mh-page-assets main::before { content: "◆ 素材资产 · ASSET LIBRARY"; }

/* 卡片 + HUD 角括号 */
button[class*="rounded-[12px]"],
a[class*="rounded-[12px]"],
[class*="group"][class*="rounded-[12px]"] {
  position: relative;
  transition: transform .26s cubic-bezier(.2, .8, .2, 1), box-shadow .26s cubic-bezier(.2, .8, .2, 1),
              border-color .26s ease, background-color .26s ease;
  will-change: transform;
}
button[class*="rounded-[12px]"]:hover,
a[class*="rounded-[12px]"]:hover {
  transform: translateY(-3px);
  box-shadow:
    0 20px 44px -24px oklch(0% 0 0 / .85),
    0 0 0 1px oklch(74% .16 297 / .22),
    0 12px 44px -20px var(--color-accent-glow);
}
button[class*="rounded-[12px]"]::before, button[class*="rounded-[12px]"]::after,
a[class*="rounded-[12px]"]::before, a[class*="rounded-[12px]"]::after {
  content: ""; position: absolute; width: 14px; height: 14px; opacity: 0;
  transition: opacity .24s ease, transform .24s ease; pointer-events: none; z-index: 2;
}
button[class*="rounded-[12px]"]::before, a[class*="rounded-[12px]"]::before {
  left: -1px; top: -1px;
  border-left: 1.5px solid oklch(82% .12 300 / .9); border-top: 1.5px solid oklch(82% .12 300 / .9);
  transform: translate(5px, 5px);
}
button[class*="rounded-[12px]"]::after, a[class*="rounded-[12px]"]::after {
  right: -1px; bottom: -1px;
  border-right: 1.5px solid oklch(82% .12 300 / .9); border-bottom: 1.5px solid oklch(82% .12 300 / .9);
  transform: translate(-5px, -5px);
}
button[class*="rounded-[12px]"]:hover::before, button[class*="rounded-[12px]"]:hover::after,
a[class*="rounded-[12px]"]:hover::before, a[class*="rounded-[12px]"]:hover::after { opacity: 1; transform: translate(0, 0); }
button[class*="rounded-[12px]"] img, a[class*="rounded-[12px]"] img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
button[class*="rounded-[12px]"]:hover img, a[class*="rounded-[12px]"]:hover img { transform: scale(1.04); }

/* 空态卡：三步引导 */
[class*="border-dashed"] { transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease; }
[class*="border-dashed"]:hover {
  border-color: var(--color-accent-glow) !important;
  background-color: oklch(74% .16 297 / .05) !important;
  box-shadow: inset 0 0 60px -20px oklch(74% .16 297 / .18);
}
button[class*="min-h-[380px]"]::after {
  content: "① 新建项目 → ② 导入剧本 ZIP → ③ 生成分镜与成片";
  position: absolute; left: 0; right: 0; bottom: 14px;
  text-align: center;
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: .12em;
  color: oklch(76% .09 296 / .95);
  text-shadow: 0 0 14px oklch(74% .16 297 / .45);
  pointer-events: none;
  z-index: 3;
}
@keyframes mh-orbit { 0% { transform: scale(.92); opacity: .55; } 70% { transform: scale(1.22); opacity: 0; } 100% { transform: scale(1.22); opacity: 0; } }
[class*="border-dashed"] > [class*="rounded-full"][class*="bg-accent-dim"] {
  position: relative;
  background: radial-gradient(circle at 35% 30%, oklch(74% .16 297 / .55), oklch(74% .16 297 / .12) 72%);
  box-shadow: 0 0 0 1px oklch(74% .16 297 / .3), 0 0 44px -8px var(--color-accent-glow);
  color: oklch(93% .05 300) !important;
}
[class*="border-dashed"] > [class*="rounded-full"][class*="bg-accent-dim"]::after {
  content: ""; position: absolute; inset: -14px; border-radius: 9999px;
  border: 1px solid oklch(74% .16 297 / .28);
  animation: mh-orbit 3.4s cubic-bezier(.2, .8, .2, 1) infinite; pointer-events: none;
}

/* ---------- 7. 按钮 ---------- */
button.bg-accent:not(:disabled):not([aria-disabled="true"]), a.bg-accent, [role="button"].bg-accent {
  background-image: linear-gradient(140deg, oklch(79% .12 294) 0%, oklch(71% .18 305) 55%, oklch(65% .2 313) 100%);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .28), 0 6px 24px -6px var(--color-accent-glow);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
button.bg-accent:hover:not(:disabled):not([aria-disabled="true"]), a.bg-accent:hover, [role="button"].bg-accent:hover {
  filter: brightness(1.08); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .32), 0 10px 34px -6px var(--color-accent-glow);
}
button.bg-accent:active:not(:disabled), a.bg-accent:active, [role="button"].bg-accent:active { transform: translateY(0); filter: brightness(.97); }
button[class*="border"]:not(.bg-accent):not([aria-selected="true"]):not(:disabled):hover,
a[class*="border"]:not(.bg-accent):hover {
  border-color: var(--color-hairline-strong);
  background-color: oklch(74% .16 297 / .06);
}
button[class*="p-1.5"]:not(:disabled):hover, button[class*="p-2"]:not(:disabled):hover {
  background-color: oklch(74% .16 297 / .08); color: var(--color-text);
}
:focus-visible { outline: 1px solid oklch(74% .16 297 / .7); outline-offset: 2px; }
button[role="tab"][aria-selected="true"] {
  background-image: linear-gradient(140deg, oklch(76% .13 295), oklch(66% .19 310));
  border-color: transparent !important; color: oklch(99% .005 285) !important;
  box-shadow: 0 4px 20px -6px var(--color-accent-glow), inset 0 1px 0 oklch(100% 0 0 / .22);
}
button[role="tab"]:not([aria-selected="true"]):hover { border-color: var(--color-hairline-strong); background-color: oklch(74% .16 297 / .07); }

/* ---------- 8. 表单 / 弹窗 / 入场 ---------- */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  box-shadow: 0 0 0 3px var(--color-accent-dim), 0 0 20px -4px var(--color-accent-glow);
}
@keyframes mh-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
[class*="rounded-[14px]"] {
  box-shadow: 0 40px 90px -40px oklch(0% 0 0 / .9), inset 0 1px 0 oklch(100% 0 0 / .06);
  animation: mh-rise .28s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes mh-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
main > * { animation: mh-fade-up .45s cubic-bezier(.2, .8, .2, 1) both; }
main > *:nth-child(2) { animation-delay: .05s; }
main > *:nth-child(3) { animation-delay: .09s; }

::selection { background: oklch(74% .16 297 / .34); color: oklch(99% .005 280); }
* { scrollbar-width: thin; scrollbar-color: oklch(34% .025 282) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, oklch(33% .03 285), oklch(26% .022 280)); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: oklch(46% .05 292); background-clip: padding-box; }

/* ============================================================
   9. 壳层部件（muhua-shell.js 注入）
   ============================================================ */

/* ---- 9.1 左侧 Dock ---- */
#mh-rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: 60px; z-index: 45;
  display: flex; flex-direction: column; align-items: center; padding: 14px 0 12px;
  background: linear-gradient(180deg, oklch(16% .02 277 / .88), oklch(13% .015 273 / .92));
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-right: 1px solid oklch(62% .04 290 / .16);
  box-shadow: inset -1px 0 0 oklch(100% 0 0 / .03), 8px 0 32px -18px oklch(0% 0 0 / .8);
  animation: mh-fade-up .4s cubic-bezier(.2, .8, .2, 1) both;
}
#mh-rail .mh-rail-logo {
  width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 14px;
  border-radius: 10px; border: 1px solid oklch(74% .16 297 / .30);
  background: radial-gradient(circle at 35% 28%, oklch(74% .16 297 / .22), oklch(74% .16 297 / .05) 75%);
  box-shadow: 0 0 22px -6px var(--color-accent-glow);
  color: oklch(88% .07 300); font: 600 13px/1 var(--font-sans); letter-spacing: .02em; user-select: none;
  cursor: pointer;
}
#mh-rail .mh-rail-sep { width: 26px; height: 1px; margin: 10px 0; background: linear-gradient(90deg, transparent, oklch(62% .04 290 / .3), transparent); }
#mh-rail button {
  position: relative; width: 40px; height: 40px; display: grid; place-items: center; margin: 3px 0;
  border-radius: 11px; border: 1px solid transparent; background: transparent;
  color: oklch(64% .02 280); cursor: pointer; transition: all .2s ease;
}
#mh-rail button:hover { color: oklch(92% .03 285); background: oklch(74% .16 297 / .09); border-color: oklch(62% .04 290 / .2); }
#mh-rail button.mh-active {
  color: oklch(88% .07 300);
  background: linear-gradient(140deg, oklch(74% .16 297 / .20), oklch(74% .16 297 / .08));
  border-color: oklch(74% .16 297 / .34);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .12), 0 4px 18px -6px var(--color-accent-glow);
}
#mh-rail button.mh-active::before {
  content: ""; position: absolute; left: -11px; top: 50%; width: 2px; height: 18px;
  transform: translateY(-50%); border-radius: 2px;
  background: linear-gradient(180deg, oklch(82% .13 300), oklch(70% .16 310));
  box-shadow: 0 0 12px oklch(74% .16 297 / .8);
}
#mh-rail button .mh-tip {
  position: absolute; left: 52px; top: 50%; transform: translateY(-50%) translateX(-4px);
  padding: 5px 10px; border-radius: 8px; white-space: nowrap;
  font: 500 12px/1 var(--font-sans); color: oklch(94% .01 280);
  background: oklch(20% .02 276 / .96); border: 1px solid oklch(62% .04 290 / .28);
  box-shadow: 0 10px 28px -10px oklch(0% 0 0 / .9);
  opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 50;
}
#mh-rail button .mh-tip b { display: block; margin-top: 3px; font: 400 10px/1 var(--font-mono); color: oklch(64% .03 290 / .8); letter-spacing: .08em; }
#mh-rail button:hover .mh-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
#mh-rail .mh-rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; color: oklch(57% .018 280); }
#mh-rail .mh-rail-dot { width: 7px; height: 7px; border-radius: 50%; background: oklch(78% .17 155); box-shadow: 0 0 10px oklch(78% .17 155 / .8); animation: mh-pulse 2.6s ease-in-out infinite; }
@keyframes mh-pulse { 50% { opacity: .45; } }
#mh-rail .mh-rail-ver { font: 500 9px/1 var(--font-mono); letter-spacing: .1em; writing-mode: vertical-rl; opacity: .6; }

/* ---- 9.2 右侧任务面板 ---- */
#mh-aside {
  position: fixed; right: 16px; top: 76px; bottom: 16px; width: 276px; z-index: 38;
  display: none; flex-direction: column; gap: 12px;
  padding: 16px 14px; overflow-y: auto;
  border-radius: 18px;
  background: linear-gradient(180deg, oklch(17.5% .02 277 / .88), oklch(14.5% .015 274 / .9));
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid oklch(62% .04 290 / .2);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .06), -14px 0 44px -24px oklch(0% 0 0 / .85);
  animation: mh-fade-up .45s cubic-bezier(.2, .8, .2, 1) both;
}
body.mh-wide #mh-aside { display: flex; }
#mh-aside .mh-a-title {
  display: flex; align-items: center; gap: 8px;
  font: 600 10px/1 var(--font-mono); letter-spacing: .2em;
  color: oklch(78% .1 300 / .85);
  text-shadow: 0 0 16px oklch(74% .16 297 / .25);
  margin: 2px 2px 10px;
}
#mh-aside .mh-a-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, oklch(62% .04 290 / .3), transparent); }
#mh-aside .mh-a-sec { margin-bottom: 6px; }
/* 实时概览 2x2 */
#mh-aside .mh-live { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#mh-aside .mh-cell {
  padding: 11px 12px; border-radius: 12px;
  border: 1px solid oklch(62% .04 290 / .2);
  background: linear-gradient(180deg, oklch(19.5% .022 277 / .7), oklch(16% .017 274 / .55));
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .05);
  transition: border-color .2s ease, transform .2s ease;
}
#mh-aside .mh-cell:hover { border-color: oklch(74% .16 297 / .4); transform: translateY(-1px); }
#mh-aside .mh-cell b {
  display: block; font: 600 22px/1 var(--font-mono); color: oklch(96% .02 282);
  text-shadow: 0 0 18px oklch(74% .16 297 / .4);
}
#mh-aside .mh-cell span {
  display: block; margin-top: 6px;
  font: 500 8.5px/1.3 var(--font-mono); letter-spacing: .14em; color: oklch(64% .03 290 / .9);
}
/* 快捷操作 */
#mh-aside .mh-act {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; margin: 4px 0; border-radius: 10px; border: 1px solid oklch(62% .04 290 / .16);
  background: transparent; color: var(--color-text-2);
  font: 500 12.5px/1 var(--font-sans); text-align: left; cursor: pointer;
  transition: all .16s ease;
}
#mh-aside .mh-act svg { color: oklch(70% .05 292); flex: none; }
#mh-aside .mh-act .mh-kbd {
  margin-left: auto; font: 500 9px/1 var(--font-mono); color: oklch(58% .02 280);
  border: 1px solid oklch(62% .04 290 / .24); border-radius: 5px; padding: 2.5px 5px; letter-spacing: .05em;
}
#mh-aside .mh-act:hover {
  background: linear-gradient(140deg, oklch(74% .16 297 / .14), oklch(74% .16 297 / .05));
  border-color: oklch(74% .16 297 / .35); color: oklch(97% .01 282);
  transform: translateX(2px);
}
#mh-aside .mh-act:hover svg { color: oklch(84% .1 298); }
/* 系统脚注 */
#mh-aside .mh-a-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid oklch(62% .04 290 / .14); }
#mh-aside .mh-sys {
  display: flex; align-items: center; gap: 8px;
  font: 500 10px/1 var(--font-mono); letter-spacing: .1em; color: oklch(60% .02 282);
}
#mh-aside .mh-sys i {
  width: 6px; height: 6px; border-radius: 50%;
  background: oklch(78% .17 155); box-shadow: 0 0 9px oklch(78% .17 155 / .8);
  animation: mh-pulse 2.6s ease-in-out infinite;
}
#mh-aside .mh-src {
  display: inline-block; margin-top: 9px; font: 400 9.5px/1 var(--font-mono);
  color: oklch(55% .02 280); letter-spacing: .08em; cursor: pointer;
}
#mh-aside .mh-src:hover { color: oklch(78% .1 300); }

/* ---- 9.3 ⌘K 命令面板 ---- */
#mh-cmdk {
  position: fixed; inset: 0; z-index: 2147482000; display: none;
  align-items: flex-start; justify-content: center; padding-top: 16vh;
  background: oklch(10% .018 275 / .55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#mh-cmdk.mh-open { display: flex; animation: mh-fade-up .18s ease both; }
#mh-cmdk .mh-cmdk-panel {
  width: min(580px, calc(100vw - 40px)); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, oklch(19% .022 277 / .98), oklch(15.5% .018 274 / .98));
  border: 1px solid oklch(66% .05 292 / .3);
  box-shadow: 0 50px 120px -30px oklch(0% 0 0 / .95), 0 0 0 1px oklch(74% .16 297 / .08), 0 0 80px -20px oklch(74% .16 297 / .3), inset 0 1px 0 oklch(100% 0 0 / .07);
  animation: mh-cmdk-in .22s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes mh-cmdk-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
#mh-cmdk .mh-cmdk-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid oklch(62% .04 290 / .16); }
#mh-cmdk .mh-cmdk-head svg { color: oklch(74% .16 297); flex: none; }
#mh-cmdk input {
  flex: 1; border: 0 !important; outline: 0 !important; background: transparent !important;
  box-shadow: none !important; color: var(--color-text); font: 400 15px/1.4 var(--font-sans);
}
#mh-cmdk input::placeholder { color: oklch(57% .018 280); }
#mh-cmdk .mh-cmdk-esc {
  flex: none; padding: 3px 7px; border-radius: 6px; border: 1px solid oklch(62% .04 290 / .26);
  font: 500 10px/1 var(--font-mono); color: oklch(64% .02 280); letter-spacing: .06em;
}
#mh-cmdk .mh-cmdk-list { padding: 8px; max-height: 320px; overflow-y: auto; }
#mh-cmdk .mh-cmdk-group { padding: 8px 12px 4px; font: 500 10px/1 var(--font-mono); letter-spacing: .18em; color: oklch(66% .07 296 / .75); }
#mh-cmdk .mh-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
  border: 0; border-radius: 10px; background: transparent; color: var(--color-text-2);
  font: 400 13.5px/1.3 var(--font-sans); text-align: left; cursor: pointer; transition: background .12s ease;
}
#mh-cmdk .mh-item svg { flex: none; color: oklch(70% .04 290); }
#mh-cmdk .mh-item .mh-hint { margin-left: auto; font: 400 10.5px/1 var(--font-mono); color: oklch(57% .018 280); letter-spacing: .04em; }
#mh-cmdk .mh-item.mh-sel, #mh-cmdk .mh-item:hover {
  background: linear-gradient(140deg, oklch(74% .16 297 / .16), oklch(74% .16 297 / .07));
  color: oklch(97% .01 282);
}
#mh-cmdk .mh-item.mh-sel svg { color: oklch(82% .1 298); }
#mh-cmdk .mh-empty { padding: 26px 0 30px; text-align: center; color: oklch(57% .018 280); font: 400 13px/1.4 var(--font-sans); }
#mh-cmdk .mh-cmdk-foot {
  display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid oklch(62% .04 290 / .14);
  font: 400 10px/1 var(--font-mono); color: oklch(52% .015 280); letter-spacing: .06em;
}

/* ---- 9.4 登录页官网门面（参考巨日禄式 Hero） ---- */
/* 流体渐变巨幅背景：品红 × 深蓝 */
body.mh-login {
  background:
    radial-gradient(1300px 760px at 16% 30%, oklch(46% .21 356 / .50), transparent 62%),
    radial-gradient(1100px 680px at 84% 16%, oklch(38% .18 266 / .52), transparent 62%),
    radial-gradient(950px 620px at 72% 88%, oklch(44% .20 330 / .38), transparent 60%),
    radial-gradient(700px 480px at 40% 78%, oklch(40% .16 300 / .30), transparent 62%),
    linear-gradient(160deg, oklch(13.5% .028 292), oklch(10.5% .018 276));
}
body.mh-login #mh-aurora i:nth-child(1) { background: radial-gradient(circle, oklch(52% .22 356 / .42), transparent 66%); }
body.mh-login #mh-aurora i:nth-child(2) { background: radial-gradient(circle, oklch(42% .19 266 / .42), transparent 66%); }
body.mh-login #mh-aurora i:nth-child(3) { background: radial-gradient(circle, oklch(50% .20 330 / .30), transparent 66%); }
body.mh-login::before {
  background-image:
    linear-gradient(oklch(80% .1 340 / .05) 1px, transparent 1px),
    linear-gradient(90deg, oklch(80% .1 340 / .05) 1px, transparent 1px);
}

/* 顶导航 */
#mh-topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 46; display: none;
  align-items: center; justify-content: space-between; padding: 16px 34px;
  animation: mh-fade-up .4s cubic-bezier(.2, .8, .2, 1) both;
}
body.mh-login #mh-topnav { display: flex; }
#mh-topnav .mh-nav-brand { display: flex; align-items: center; gap: 11px; }
#mh-topnav .mh-nav-logo {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px;
  border: 1px solid oklch(78% .14 350 / .4);
  background: linear-gradient(140deg, oklch(52% .2 356 / .55), oklch(38% .18 266 / .55));
  box-shadow: 0 0 26px -6px oklch(52% .22 356 / .6), inset 0 1px 0 oklch(100% 0 0 / .25);
  color: oklch(97% .02 340); font: 600 15px/1 var(--font-sans);
}
#mh-topnav .mh-nav-brand b { font: 600 16px/1 var(--font-sans); color: oklch(98% .01 300); letter-spacing: .02em; }
#mh-topnav .mh-nav-brand i {
  font: 500 8.5px/1 var(--font-mono); font-style: normal; letter-spacing: .3em;
  color: oklch(75% .08 340 / .75); margin-top: 3px;
}
#mh-topnav .mh-nav-links { display: flex; align-items: center; gap: 12px; }
#mh-topnav .mh-nav-ghost {
  padding: 8px 16px; border-radius: 999px; border: 1px solid oklch(80% .09 340 / .3);
  background: oklch(100% 0 0 / .05); color: oklch(92% .03 330);
  font: 500 13px/1 var(--font-sans); cursor: pointer; transition: all .18s ease;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#mh-topnav .mh-nav-ghost:hover { border-color: oklch(80% .12 350 / .55); background: oklch(100% 0 0 / .1); }
#mh-topnav .mh-nav-cta {
  padding: 9px 20px; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(140deg, oklch(64% .22 356), oklch(56% .24 330));
  color: oklch(99% .012 340); font: 600 13px/1 var(--font-sans); letter-spacing: .02em;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .3), 0 6px 26px -6px oklch(52% .22 356 / .7);
  transition: all .18s ease;
}
#mh-topnav .mh-nav-cta:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: inset 0 1px 0 oklch(100% 0 0 / .34), 0 10px 34px -6px oklch(52% .22 356 / .8); }

/* Hero 面板（左侧） */
#mh-login-art { display: none; }
body.mh-login #mh-login-art {
  display: flex; flex-direction: column; justify-content: center;
  position: fixed; left: 0; top: 0; bottom: 190px; width: 54vw; z-index: 2;
  padding: 40px 4vw 0 7vw;
  animation: mh-fade-up .55s cubic-bezier(.2, .8, .2, 1) both;
}
body.mh-login #app-root > div.relative.flex.min-h-screen {
  justify-content: flex-end !important;
  padding-right: 7vw;
  background: transparent !important;
}
#mh-login-art .mh-la-badge {
  width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 22px;
  border-radius: 16px; border: 1px solid oklch(78% .14 350 / .45);
  background: linear-gradient(140deg, oklch(52% .2 356 / .5), oklch(38% .18 266 / .5));
  box-shadow: 0 0 40px -6px oklch(52% .22 356 / .65), inset 0 1px 0 oklch(100% 0 0 / .25);
  color: oklch(96% .03 340); font: 600 24px/1 var(--font-sans);
}
#mh-login-art .mh-la-en {
  margin: 0 0 14px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .34em;
  color: oklch(80% .09 340 / .85);
}
#mh-login-art .mh-la-h1 {
  margin: 0; font: 800 clamp(30px, 3.4vw, 52px)/1.25 var(--font-sans);
  letter-spacing: .01em; color: oklch(99% .006 310);
  text-shadow: 0 4px 40px oklch(46% .21 356 / .45);
}
#mh-login-art .mh-pill {
  display: inline-block; margin-left: 6px; padding: .08em .5em .12em; border-radius: 999px;
  background: linear-gradient(135deg, oklch(60% .24 356), oklch(50% .24 300) 60%, oklch(46% .2 266));
  box-shadow: 0 8px 34px -8px oklch(52% .22 356 / .8), inset 0 1px 0 oklch(100% 0 0 / .35);
  color: oklch(99% .015 340); vertical-align: .06em;
}
#mh-login-art .mh-la-desc {
  margin: 20px 0 0; font: 400 14.5px/1.8 var(--font-sans);
  color: oklch(88% .02 320 / .92); max-width: 460px;
}
#mh-login-art .mh-la-cta { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
#mh-login-art .mh-la-cta button { pointer-events: auto; }
#mh-login-art .mh-cta-main {
  padding: 13px 30px; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(140deg, oklch(64% .23 356), oklch(54% .24 322) 62%, oklch(46% .2 276));
  color: oklch(99% .015 340); font: 600 15px/1 var(--font-sans); letter-spacing: .04em;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .32), 0 10px 40px -8px oklch(52% .22 356 / .8);
  transition: all .2s ease;
}
#mh-login-art .mh-cta-main:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: inset 0 1px 0 oklch(100% 0 0 / .36), 0 16px 50px -8px oklch(52% .22 356 / .9); }
#mh-login-art .mh-cta-ghost {
  padding: 12px 26px; border-radius: 999px; border: 1px solid oklch(82% .08 340 / .35);
  background: oklch(100% 0 0 / .05); color: oklch(92% .03 330);
  font: 500 14px/1 var(--font-sans); cursor: pointer; transition: all .2s ease;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#mh-login-art .mh-cta-ghost:hover { border-color: oklch(82% .12 350 / .6); background: oklch(100% 0 0 / .1); transform: translateY(-2px); }
#mh-login-art .mh-la-foot {
  margin-top: 42px; font: 500 9.5px/1 var(--font-mono); letter-spacing: .26em;
  color: oklch(70% .04 320 / .7);
}

/* 海报墙（底部，作品展示） */
#mh-posters { display: none; }
body.mh-login #mh-posters {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1;
  pointer-events: none;
}
#mh-posters .mh-p-row {
  display: flex; gap: 16px; justify-content: center; align-items: flex-end;
  padding: 0 3vw 20px;
}
#mh-posters .mh-pcard {
  position: relative; flex: none; width: clamp(108px, 9.6vw, 152px); aspect-ratio: 9 / 14.4;
  border-radius: 13px; overflow: hidden; pointer-events: auto;
  border: 1px solid oklch(85% .07 340 / .22);
  box-shadow: 0 22px 54px -20px oklch(0% 0 0 / .9), 0 0 0 1px oklch(100% 0 0 / .04);
  transform: translateY(14px) rotate(var(--mh-tilt, 0deg));
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
  animation: mh-poster-in .6s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(.08s * var(--mh-i) + .25s);
}
@keyframes mh-poster-in { from { opacity: 0; transform: translateY(34px) rotate(var(--mh-tilt, 0deg)); } to { opacity: 1; transform: translateY(14px) rotate(var(--mh-tilt, 0deg)); } }
#mh-posters .mh-pcard:nth-child(1) { --mh-tilt: -3.2deg; }
#mh-posters .mh-pcard:nth-child(2) { --mh-tilt: -1.8deg; }
#mh-posters .mh-pcard:nth-child(3) { --mh-tilt: -0.6deg; }
#mh-posters .mh-pcard:nth-child(4) { --mh-tilt: 0.8deg; }
#mh-posters .mh-pcard:nth-child(5) { --mh-tilt: 2.2deg; }
#mh-posters .mh-pcard:nth-child(6) { --mh-tilt: 3.4deg; }
#mh-posters .mh-pcard:hover {
  transform: translateY(-6px) scale(1.07) rotate(0deg); z-index: 5;
  box-shadow: 0 34px 70px -22px oklch(0% 0 0 / .95), 0 0 0 1px oklch(85% .1 350 / .5), 0 12px 50px -12px oklch(52% .22 356 / .55);
}
#mh-posters .mh-pcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
#mh-posters .mh-p-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, oklch(12% .03 300 / .82) 82%, oklch(10% .03 300 / .95));
}
#mh-posters .mh-p-badge {
  position: absolute; top: 9px; left: 9px; padding: 3.5px 9px; border-radius: 999px;
  background: linear-gradient(135deg, oklch(60% .22 356 / .92), oklch(48% .2 300 / .92));
  border: 1px solid oklch(90% .06 350 / .4);
  font: 600 9px/1 var(--font-sans); letter-spacing: .06em; color: oklch(99% .015 340);
  box-shadow: 0 4px 14px -4px oklch(52% .22 356 / .8);
}
#mh-posters .mh-p-title {
  position: absolute; left: 0; right: 0; bottom: 9px; padding: 0 10px;
  font: 600 11.5px/1.3 var(--font-sans); color: oklch(97% .02 340); text-align: center;
  text-shadow: 0 2px 10px oklch(0% 0 0 / .9);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#mh-posters::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 76px; pointer-events: none;
  background: linear-gradient(180deg, transparent, oklch(10% .02 290 / .55));
}
@media (max-height: 800px) { body.mh-login #mh-posters { display: none; } body.mh-login #mh-login-art { bottom: 0; } }
@media (max-width: 1100px) {
  body.mh-login #app-root > div.relative.flex.min-h-screen { justify-content: center !important; padding-right: 0; }
  #mh-login-art, #mh-posters { display: none !important; }
  body.mh-login #mh-topnav { padding: 14px 20px; }
}

/* ---------- 10. 无障碍 / 窄屏兜底 ---------- */
@media (prefers-reduced-motion: reduce) {
  body::after, #mh-aurora, #mh-spot { display: none; }
  main > *, [class*="rounded-[14px]"], #mh-rail, #mh-aside { animation: none !important; }
  [class*="border-dashed"] > [class*="rounded-full"][class*="bg-accent-dim"]::after { animation: none; }
  button[class*="rounded-[12px]"] { transition: none; }
  #mh-aurora i { animation: none !important; }
}
@media (max-width: 1180px) {
  body.mh-has-rail { padding-left: 0; }
  #mh-rail { display: none; }
}
@media (max-width: 1360px) {
  body.mh-wide { padding-right: 0; }
  #mh-aside { display: none !important; }
}

/* ---------- v5.1 品牌徽标：云朵 Logo 图 ---------- */
#mh-rail .mh-rail-logo img,
#mh-topnav .mh-nav-logo img,
#mh-login-art .mh-la-badge img {
  width: 82%; height: 82%; object-fit: contain; display: block;
  filter: drop-shadow(0 0 10px oklch(70% .12 220 / .45));
}
#mh-login-art .mh-la-badge img { width: 84%; height: 84%; }

/* ============================================================
   木华云科 · v7 同源配套升级「品红协议」
   工作台与登录门面同源：品红 × 深蓝 流体渐变
   ============================================================ */

/* ---- T1. 设计令牌换轴：紫罗兰 → 品红 ---- */
:root,:host {
  --color-accent: oklch(76% .15 349);
  --color-accent-2: oklch(87% .08 344);
  --color-accent-soft: oklch(76% .15 349 / .2);
  --color-accent-dim: oklch(76% .15 349 / .12);
  --color-accent-glow: oklch(60% .22 356 / .46);
  --color-hairline: oklch(66% .06 340 / .22);
  --color-hairline-strong: oklch(70% .07 344 / .44);
  --color-hairline-soft: oklch(66% .06 340 / .12);
  --color-bg-grad-a: oklch(17.8% .026 320);
  --color-bg-grad-b: oklch(12% .016 266);
}

/* ---- T2. 全局氛围：品红从左上涌入，深蓝在右下托底 ---- */
body:not(.mh-login) { background:
  radial-gradient(1100px 560px at 10% -12%, oklch(32% .11 352 / .26), transparent 60%),
  radial-gradient(900px 520px at 98% 110%, oklch(28% .1 266 / .30), transparent 62%),
  radial-gradient(700px 420px at 76% -6%, oklch(26% .08 330 / .14), transparent 60%),
  linear-gradient(160deg, var(--color-bg-grad-a), var(--color-bg-grad-b)) !important; }
body:not(.mh-login)::before {
  background-image:
    linear-gradient(oklch(85% .09 344 / .045) 1px, transparent 1px),
    linear-gradient(90deg, oklch(85% .09 344 / .045) 1px, transparent 1px) !important;
}
body:not(.mh-login) #mh-aurora i:nth-child(1) { background: radial-gradient(circle, oklch(44% .19 356 / .20), transparent 66%); }
body:not(.mh-login) #mh-aurora i:nth-child(2) { background: radial-gradient(circle, oklch(38% .17 266 / .24), transparent 66%); }
body:not(.mh-login) #mh-aurora i:nth-child(3) { background: radial-gradient(circle, oklch(46% .16 330 / .12), transparent 66%); }
#mh-baseline { background: linear-gradient(90deg, transparent, oklch(60% .2 356 / .3) 30%, oklch(50% .18 280 / .34) 55%, transparent) !important; }

/* ---- T3. 顶栏：品红流光分隔线 + 品牌辉光 ---- */
#app-root .sticky.top-0.z-30::after, #app-root header.sticky::after {
  background: linear-gradient(90deg, transparent, oklch(60% .22 356 / .30) 30%, oklch(72% .14 320 / .40) 50%, oklch(50% .2 266 / .32) 72%, transparent) !important;
}
#app-root .sticky.top-0.z-30 .flex.items-center.gap-2\.5 > img,
#app-root .sticky.top-0.z-30 .flex.items-center.gap-2\.5 > svg {
  filter: drop-shadow(0 0 14px oklch(60% .22 356 / .55)) !important;
}
#app-root .sticky.top-0.z-30 .flex.items-center.gap-2\.5 > span.font-sans {
  background: linear-gradient(100deg, oklch(97% .02 340), oklch(88% .08 344) 55%, oklch(80% .1 300));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#app-root .sticky.top-0.z-30 label[class*="rounded-lg"] { border-color: oklch(66% .06 340 / .2) !important; }
#app-root .sticky.top-0.z-30 label[class*="rounded-lg"]:focus-within {
  border-color: oklch(70% .16 350 / .55) !important;
}

/* ---- T4. 问候横幅：登录 Hero 同款流体渐变 ---- */
#app-root [class*="max-w-[1320px]"][class*="items-stretch"] {
  border-color: oklch(66% .06 340 / .24) !important;
  background:
    radial-gradient(620px 320px at 6% -8%, oklch(46% .2 356 / .22), transparent 62%),
    radial-gradient(560px 340px at 100% 116%, oklch(40% .18 266 / .26), transparent 60%),
    linear-gradient(180deg, oklch(18.5% .024 320 / .85), oklch(15.5% .018 274 / .82)) !important;
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / .07),
    0 24px 60px -30px oklch(0% 0 0 / .9),
    0 0 90px -40px oklch(52% .22 356 / .35) !important;
}
#app-root [class*="max-w-[1320px]"][class*="items-stretch"]::before {
  background-image:
    linear-gradient(oklch(82% .12 348 / .14) 1px, transparent 1px),
    linear-gradient(90deg, oklch(82% .12 348 / .14) 1px, transparent 1px) !important;
}
#app-root [class*="max-w-[1320px]"][class*="items-stretch"]::after {
  background: linear-gradient(180deg, transparent, oklch(64% .22 356 / .9), oklch(52% .2 300 / .6), transparent) !important;
  box-shadow: 0 0 22px oklch(60% .22 356 / .6) !important;
}
/* 衬线第二行 → 品红×深蓝渐变字（与登录页 CTA 同源） */
#app-root [class*="max-w-[1320px]"] h1.font-editorial > span > span:last-child {
  background: linear-gradient(100deg, oklch(84% .12 344) 8%, oklch(70% .2 352) 48%, oklch(62% .17 288) 92%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 26px oklch(52% .22 356 / .35));
}

/* ---- T5. 统计条 & 区块标记 ---- */
#app-root [class*="rounded-[10px]"][class*="items-stretch"] {
  background: linear-gradient(180deg, oklch(21% .026 330 / .55), oklch(16.5% .018 274 / .5)) !important;
}
#app-root [class*="rounded-[10px]"][class*="items-stretch"] > *:hover {
  background: oklch(70% .16 350 / .07) !important;
}
body.mh-page-projects main::before,
body.mh-page-assets main::before {
  color: oklch(82% .11 346 / .92) !important;
  text-shadow: 0 0 18px oklch(60% .22 356 / .4) !important;
}

/* ---- T6. 卡片 HUD 角括号 & 悬停辉光 → 品红 ---- */
button[class*="rounded-[12px]"]:hover, a[class*="rounded-[12px]"]:hover {
  box-shadow:
    0 20px 44px -24px oklch(0% 0 0 / .85),
    0 0 0 1px oklch(70% .18 350 / .26),
    0 12px 44px -20px var(--color-accent-glow) !important;
}
button[class*="rounded-[12px]"]::before, a[class*="rounded-[12px]"]::before {
  border-color: oklch(84% .13 348 / .9) !important;
}
button[class*="rounded-[12px]"]::after, a[class*="rounded-[12px]"]::after {
  border-color: oklch(84% .13 348 / .9) !important;
}

/* ---- T7. 空态卡：品红呼吸 ---- */
[class*="border-dashed"]:hover {
  border-color: var(--color-accent-glow) !important;
  background-color: oklch(70% .16 350 / .05) !important;
  box-shadow: inset 0 0 60px -20px oklch(60% .22 356 / .2) !important;
}
button[class*="min-h-[380px]"]::after {
  color: oklch(80% .1 346 / .95) !important;
  text-shadow: 0 0 14px oklch(60% .22 356 / .5) !important;
}
[class*="border-dashed"] > [class*="rounded-full"][class*="bg-accent-dim"] {
  background: radial-gradient(circle at 35% 30%, oklch(70% .18 350 / .55), oklch(60% .2 356 / .12) 72%) !important;
  box-shadow: 0 0 0 1px oklch(70% .18 350 / .32), 0 0 44px -8px var(--color-accent-glow) !important;
  color: oklch(94% .05 344) !important;
}
[class*="border-dashed"] > [class*="rounded-full"][class*="bg-accent-dim"]::after {
  border-color: oklch(70% .18 350 / .3) !important;
}

/* ---- T8. 主按钮：登录 CTA 同款品红→深蓝渐变 ---- */
button.bg-accent:not(:disabled):not([aria-disabled="true"]), a.bg-accent, [role="button"].bg-accent {
  background-image: linear-gradient(140deg, oklch(64% .23 356) 0%, oklch(54% .24 322) 62%, oklch(46% .2 276) 100%) !important;
  color: oklch(99% .015 340) !important;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .32), 0 8px 30px -6px oklch(52% .22 356 / .7) !important;
}
button.bg-accent:hover:not(:disabled):not([aria-disabled="true"]), a.bg-accent:hover, [role="button"].bg-accent:hover {
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .36), 0 12px 40px -6px oklch(52% .22 356 / .85) !important;
}
button[class*="border"]:not(.bg-accent):not([aria-selected="true"]):not(:disabled):hover,
a[class*="border"]:not(.bg-accent):hover {
  background-color: oklch(70% .16 350 / .06) !important;
}
button[role="tab"][aria-selected="true"] {
  background-image: linear-gradient(140deg, oklch(66% .2 352), oklch(52% .22 300)) !important;
  color: oklch(99% .012 340) !important;
}
:focus-visible { outline-color: oklch(70% .16 350 / .7) !important; }

/* ---- T9. 左 Dock：品红激活态 ---- */
#mh-rail .mh-rail-logo {
  border-color: oklch(72% .18 350 / .32) !important;
  background: radial-gradient(circle at 35% 28%, oklch(60% .2 356 / .24), oklch(60% .2 356 / .05) 75%) !important;
}
#mh-rail button:hover { background: oklch(70% .16 350 / .1); border-color: oklch(66% .06 340 / .22); }
#mh-rail button.mh-active {
  color: oklch(90% .06 344) !important;
  background: linear-gradient(140deg, oklch(70% .18 350 / .22), oklch(60% .2 356 / .08)) !important;
  border-color: oklch(70% .18 350 / .36) !important;
}
#mh-rail button.mh-active::before {
  background: linear-gradient(180deg, oklch(84% .12 344), oklch(62% .2 320)) !important;
  box-shadow: 0 0 12px oklch(60% .22 356 / .8) !important;
}

/* ---- T10. 右面板：品红细节 ---- */
#mh-aside { border-color: oklch(66% .06 340 / .22) !important; }
#mh-aside .mh-a-title {
  color: oklch(80% .11 344 / .88) !important;
  text-shadow: 0 0 16px oklch(60% .22 356 / .3) !important;
}
#mh-aside .mh-a-title::after { background: linear-gradient(90deg, oklch(66% .06 340 / .34), transparent) !important; }
#mh-aside .mh-cell:hover { border-color: oklch(70% .18 350 / .42) !important; }
#mh-aside .mh-cell b { text-shadow: 0 0 18px oklch(60% .22 356 / .45) !important; }
#mh-aside .mh-act svg { color: oklch(74% .1 344); }
#mh-aside .mh-act:hover {
  background: linear-gradient(140deg, oklch(70% .18 350 / .16), oklch(60% .2 356 / .05)) !important;
  border-color: oklch(70% .18 350 / .38) !important;
}
#mh-aside .mh-act:hover svg { color: oklch(86% .1 344) !important; }
#mh-aside .mh-src:hover { color: oklch(80% .1 344) !important; }

/* ---- T11. 选区 / 滚动条 ---- */
::selection { background: oklch(70% .18 350 / .36) !important; }
* { scrollbar-color: oklch(34% .04 330) transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, oklch(34% .045 335), oklch(26% .03 320)) !important; }
::-webkit-scrollbar-thumb:hover { background: oklch(46% .08 345) !important; background-clip: padding-box; }

/* ============================================================
   木华云科 · v8 工作台 Hero 门面「巨日禄式」
   居中大标题 + 渐变胶囊 + CTA 三连 + 液态流体 + 海报墙
   ============================================================ */

/* ---- H1. 横幅容器 → 巨幅居中 Hero ---- */
#app-root .mh-dh {
  flex-direction: column !important; align-items: center !important; justify-content: center !important;
  text-align: center; gap: 0; padding: 46px 28px 0 !important;
  min-height: clamp(480px, 58vh, 600px); overflow: hidden;
}
#app-root .mh-dh > div:first-child {
  display: flex; flex-direction: column; align-items: center; width: 100%;
}
/* 原 h1 / p 隐藏（问候语已进 eyebrow） */
#app-root .mh-dh h1, #app-root .mh-dh > div:first-child > p { display: none !important; }
/* 右列（日期 + 统计）水平居中一行 */
#app-root .mh-dh > div:nth-child(2) {
  flex-direction: row !important; align-items: center !important; justify-content: center !important;
  gap: 20px; margin-top: 24px; width: 100%;
}
#app-root .mh-dh > div:nth-child(2) > div:first-child { margin-top: 0; }

/* ---- H2. 液态流体纹理层（深色液环，同巨日禄） ---- */
#app-root .mh-dh-flux {
  position: absolute; inset: -1px; z-index: 0; pointer-events: none;
  background:
    repeating-radial-gradient(ellipse 920px 500px at 50% 122%,
      transparent 0 44px, oklch(7% .03 296 / .55) 44px 50px, transparent 50px 98px),
    radial-gradient(640px 360px at 50% 118%, oklch(40% .2 340 / .38), transparent 66%),
    radial-gradient(520px 300px at 12% -18%, oklch(42% .2 356 / .30), transparent 62%),
    radial-gradient(520px 320px at 94% -22%, oklch(38% .18 266 / .38), transparent 62%);
  mask-image: linear-gradient(180deg, oklch(0% 0 0 / .9), oklch(0% 0 0 / .55) 55%, oklch(0% 0 0 / .95));
  -webkit-mask-image: linear-gradient(180deg, oklch(0% 0 0 / .9), oklch(0% 0 0 / .55) 55%, oklch(0% 0 0 / .95));
  animation: mh-flux-breathe 9s ease-in-out infinite alternate;
}
@keyframes mh-flux-breathe {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.05) translateY(-8px); }
}
#app-root .mh-dh > *:not(.mh-dh-flux) { position: relative; z-index: 1; }

/* ---- H3. Hero 核心：eyebrow + 大标题 + CTA ---- */
#app-root .mh-dh-core {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  margin-top: 6px;
}
#app-root .mh-dh-eyebrow {
  font: 500 11px/1 var(--font-mono); letter-spacing: .32em;
  color: oklch(86% .08 344 / .85); text-shadow: 0 0 18px oklch(60% .22 356 / .4);
}
#app-root .mh-dh-title {
  font: 800 clamp(30px, 3.4vw, 52px)/1.22 var(--font-sans); letter-spacing: .01em;
  color: oklch(99% .006 310); text-shadow: 0 4px 40px oklch(46% .21 356 / .5);
}
#app-root .mh-dh-title .mh-pill {
  display: inline-block; margin-left: 8px; padding: .06em .5em .1em; border-radius: 999px;
  background: linear-gradient(135deg, oklch(62% .24 266), oklch(54% .24 300) 60%, oklch(50% .22 330));
  box-shadow: 0 8px 34px -8px oklch(48% .22 300 / .85), inset 0 1px 0 oklch(100% 0 0 / .35);
  color: oklch(99% .015 340); vertical-align: .06em;
}
#app-root .mh-dh-cta { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
#app-root .mh-dh-btn {
  padding: 11px 24px; border-radius: 999px; cursor: pointer;
  border: 1px solid oklch(82% .08 340 / .35); background: oklch(100% 0 0 / .05);
  color: oklch(92% .03 330); font: 500 13.5px/1 var(--font-sans); letter-spacing: .03em;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: all .2s ease;
}
#app-root .mh-dh-btn:hover { border-color: oklch(82% .12 350 / .6); background: oklch(100% 0 0 / .1); transform: translateY(-2px); }
#app-root .mh-dh-btn.mh-dh-main {
  border: 0;
  background: linear-gradient(140deg, oklch(64% .23 356), oklch(54% .24 322) 62%, oklch(46% .2 276));
  color: oklch(99% .015 340); font-weight: 600; letter-spacing: .04em;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .32), 0 10px 40px -8px oklch(52% .22 356 / .8);
}
#app-root .mh-dh-btn.mh-dh-main:hover { filter: brightness(1.1); box-shadow: inset 0 1px 0 oklch(100% 0 0 / .36), 0 16px 50px -8px oklch(52% .22 356 / .9); }

/* ---- H4. Hero 内海报墙 ---- */
#app-root .mh-dh-posters {
  display: flex; gap: 14px; justify-content: center; align-items: flex-end;
  width: 100%; margin-top: 26px; pointer-events: none;
}
#app-root .mh-dh-pc {
  position: relative; flex: none; width: clamp(86px, 7.2vw, 118px); aspect-ratio: 9 / 14.4;
  border-radius: 11px; overflow: hidden; pointer-events: auto;
  border: 1px solid oklch(85% .07 340 / .2);
  box-shadow: 0 18px 44px -18px oklch(0% 0 0 / .9);
  transform: translateY(12px) rotate(var(--mh-tilt, 0deg));
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
  animation: mh-poster-in .55s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(.07s * var(--mh-i) + .15s);
}
#app-root .mh-dh-pc:nth-child(1) { --mh-tilt: -3deg; }
#app-root .mh-dh-pc:nth-child(2) { --mh-tilt: -1.7deg; }
#app-root .mh-dh-pc:nth-child(3) { --mh-tilt: -.5deg; }
#app-root .mh-dh-pc:nth-child(4) { --mh-tilt: .7deg; }
#app-root .mh-dh-pc:nth-child(5) { --mh-tilt: 2deg; }
#app-root .mh-dh-pc:nth-child(6) { --mh-tilt: 3.2deg; }
#app-root .mh-dh-pc:hover {
  transform: translateY(-8px) scale(1.08) rotate(0deg); z-index: 5;
  box-shadow: 0 30px 64px -20px oklch(0% 0 0 / .95), 0 0 0 1px oklch(85% .1 350 / .5), 0 12px 50px -12px oklch(52% .22 356 / .55);
}
#app-root .mh-dh-pc img { width: 100%; height: 100%; object-fit: cover; display: block; }
#app-root .mh-dh-badge {
  position: absolute; top: 7px; left: 7px; padding: 3px 8px; border-radius: 999px;
  background: linear-gradient(135deg, oklch(60% .22 356 / .92), oklch(48% .2 300 / .92));
  border: 1px solid oklch(90% .06 350 / .4);
  font: 600 8.5px/1 var(--font-sans); letter-spacing: .06em; color: oklch(99% .015 340);
}
/* 窄屏/矮屏降级 */
@media (max-width: 1360px) { #app-root .mh-dh-pc:nth-child(n+6) { display: none; } }
@media (max-width: 1100px) { #app-root .mh-dh-pc:nth-child(n+5) { display: none; } #app-root .mh-dh { min-height: 420px; } }
@media (max-height: 760px) { #app-root .mh-dh { min-height: 400px; } #app-root .mh-dh-posters { display: none; } }

/* ---- H5. Hero 之下项目库标题间距 ---- */
body.mh-page-projects main::before { margin-top: 10px; }

/* ---- H6. Dock 版本号：改横排，修竖排挤压乱码 ---- */
#mh-rail .mh-rail-ver {
  writing-mode: horizontal-tb !important;
  font: 500 8.5px/1 var(--font-mono) !important;
  letter-spacing: .14em !important;
  margin-top: 4px;
}

/* ============================================================
   木华云科 · v9 工作台 Hero 重构「Studio Deck」
   左欢迎区 + 竖排遥测栏 + 海报扇形叠放（专业创作平台格式）
   ============================================================ */

/* ---- D1. 容器：三栏横排 ---- */
#app-root .mh-dh {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left;
  gap: 26px;
  padding: 40px 46px 32px !important;
  min-height: 380px;
}
#app-root .mh-dh > div:first-child {
  flex: 1 1 auto; min-width: 0;
  align-items: flex-start !important;
  justify-content: center;
}

/* ---- D2. 左栏：左对齐编辑式排版 ---- */
#app-root .mh-dh-eyebrow {
  display: flex; align-items: center; gap: 9px;
  letter-spacing: .26em !important;
}
#app-root .mh-dh-eyebrow .mh-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: oklch(74% .19 356);
  box-shadow: 0 0 10px oklch(60% .22 356 / .9);
  animation: mh-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes mh-dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
#app-root .mh-dh-title {
  font-size: clamp(34px, 3.6vw, 54px) !important;
  line-height: 1.16 !important;
  text-align: left !important;
  margin-top: 4px;
}
#app-root .mh-dh-title .mh-dh-br { display: block; height: 4px; }
#app-root .mh-dh-title .mh-pill {
  margin-left: 0 !important;
  padding: .08em .55em .12em !important;
  font-size: .84em;
  background: linear-gradient(120deg, oklch(60% .23 356), oklch(50% .22 306) 55%, oklch(44% .2 268)) !important;
}
#app-root .mh-dh-sub {
  margin-top: 16px;
  font: 400 13.5px/1.7 var(--font-sans);
  letter-spacing: .08em;
  color: oklch(80% .03 330 / .68);
}
#app-root .mh-dh-cta { margin-top: 24px !important; }

/* ---- D3. 中栏：竖排遥测栏（日期 + 四格统计） ---- */
#app-root .mh-dh > div:nth-child(2) {
  flex: 0 0 174px;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center;
  gap: 8px;
  width: auto !important;
  margin: 0 !important;
  padding-left: 24px;
  border-left: 1px solid oklch(66% .06 340 / .22);
}
#app-root .mh-dh > div:nth-child(2) > div:first-child {
  font: 500 9.5px/1.8 var(--font-mono);
  letter-spacing: .18em;
  color: oklch(78% .06 344 / .58);
  margin-top: 0 !important;
  padding-bottom: 2px;
}
#app-root .mh-dh > div:nth-child(2) > div:last-child {
  display: flex; flex-direction: column; gap: 7px; width: 100%;
}
#app-root .mh-dh > div:nth-child(2) > div:last-child > * {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 12px 9px;
  border-radius: 9px;
  border: 1px solid oklch(66% .06 340 / .18) !important;
  background: linear-gradient(180deg, oklch(22% .03 330 / .5), oklch(17% .02 274 / .45)) !important;
  transition: border-color .2s ease;
}
#app-root .mh-dh > div:nth-child(2) > div:last-child > *:hover { border-color: oklch(70% .18 350 / .4) !important; }
#app-root .mh-dh > div:nth-child(2) > div:last-child > * > :first-child {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .22em;
  color: oklch(76% .05 344 / .6);
}
#app-root .mh-dh > div:nth-child(2) > div:last-child > * > :last-child {
  font: 700 20px/1.15 var(--font-sans);
  color: oklch(96% .02 340);
  text-shadow: 0 0 16px oklch(60% .22 356 / .35);
}

/* ---- D4. 右栏：海报扇形叠放 ---- */
#app-root .mh-dh-posters {
  flex: 0 0 auto;
  margin: 0 !important;
  align-items: center;
  padding-right: 8px;
}
#app-root .mh-dh-pc {
  width: clamp(108px, 9.6vw, 136px) !important;
  margin-left: -32px;
  transform: none !important;
  animation: none !important;
  box-shadow: 0 24px 54px -20px oklch(0% 0 0 / .92), 0 0 0 1px oklch(85% .07 340 / .14);
  border-radius: 12px;
}
#app-root .mh-dh-pc:nth-child(1) { margin-left: 0; z-index: 1; transform: rotate(-7deg) translateY(8px) !important; }
#app-root .mh-dh-pc:nth-child(2) { z-index: 2; transform: rotate(-2.5deg) translateY(-6px) !important; }
#app-root .mh-dh-pc:nth-child(3) { z-index: 3; transform: rotate(2.5deg) translateY(5px) !important; }
#app-root .mh-dh-pc:nth-child(4) { z-index: 4; transform: rotate(7deg) translateY(-5px) !important; }
#app-root .mh-dh-pc:nth-child(n+5) { display: none; }
#app-root .mh-dh-pc:hover {
  transform: translateY(-16px) scale(1.07) rotate(0deg) !important;
  z-index: 9;
}
@media (max-width: 1420px) { #app-root .mh-dh-pc:nth-child(4) { display: none; } }
@media (max-width: 1280px) { #app-root .mh-dh-pc:nth-child(3) { display: none; } }
@media (max-width: 1120px) {
  #app-root .mh-dh > div:nth-child(2) { display: none; }
  #app-root .mh-dh { min-height: 320px; }
}

/* ---- D5. 角标装饰 + 水印 ---- */
#app-root .mh-dh-deco { position: absolute; inset: 0; pointer-events: none; }
#app-root .mh-dh-deco i {
  position: absolute; width: 15px; height: 15px;
  border: 1px solid oklch(84% .12 348 / .5);
}
#app-root .mh-dh-deco i.tl { top: 13px; left: 13px; border-right: 0; border-bottom: 0; }
#app-root .mh-dh-deco i.tr { top: 13px; right: 13px; border-left: 0; border-bottom: 0; }
#app-root .mh-dh-deco i.bl { bottom: 13px; left: 13px; border-right: 0; border-top: 0; }
#app-root .mh-dh-deco i.br { bottom: 13px; right: 13px; border-left: 0; border-top: 0; }
#app-root .mh-dh-deco em {
  position: absolute; right: 20px; bottom: 16px;
  font: 500 8.5px/1 var(--font-mono);
  font-style: normal; letter-spacing: .3em;
  color: oklch(82% .06 344 / .38);
}

/* ---- D5b. 装饰层定位保底（压过 v8 通配规则） ---- */
#app-root .mh-dh > .mh-dh-deco { position: absolute !important; inset: 0; pointer-events: none; z-index: 2; }
#app-root .mh-dh > .mh-dh-flux { z-index: 0; }

/* ---- D6. Studio Deck 布局修正（实测：海报容器 v8 width:100% 挤压 / 统计条为 grid） ---- */
#app-root .mh-dh > div:first-child { flex: 1 1 0% !important; min-width: 0 !important; }
#app-root .mh-dh > .mh-dh-posters { width: auto !important; flex: 0 0 auto !important; }
#app-root .mh-dh > div:nth-child(2) { flex: 0 0 178px !important; min-width: 0 !important; }
#app-root .mh-dh > div:nth-child(2) > div:last-child {
  display: flex !important; flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 7px; width: 100%;
}
#app-root .mh-dh > div:nth-child(2) > div:last-child > * { min-width: 0; }
#app-root .mh-dh-core { align-items: flex-start !important; }
#app-root .mh-dh-cta { justify-content: flex-start; }
#app-root .mh-dh-btn { white-space: nowrap; }

/* ============================================================
   木华云科 · v10 剧本工坊 + 创作助理悬浮球
   ============================================================ */

/* ---------- A. 通用按钮 ---------- */
.mh-btn-primary, .mh-btn-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 15px; border-radius: 9px; cursor: pointer;
  font: 500 12.5px/1 var(--font-sans); letter-spacing: .03em;
  transition: all .18s ease; white-space: nowrap;
}
.mh-btn-primary {
  border: 0; color: oklch(99% .015 340);
  background-image: linear-gradient(140deg, oklch(64% .23 356), oklch(54% .24 322) 62%, oklch(46% .2 276));
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .3), 0 8px 26px -8px oklch(52% .22 356 / .75);
}
.mh-btn-primary:hover { filter: brightness(1.09); }
.mh-btn-ghost {
  border: 1px solid oklch(66% .06 340 / .26); background: oklch(100% 0 0 / .04);
  color: oklch(90% .03 330);
}
.mh-btn-ghost:hover { border-color: oklch(72% .14 350 / .5); background: oklch(100% 0 0 / .08); }
.mh-btn-primary:focus-visible, .mh-btn-ghost:focus-visible { outline: 2px solid oklch(74% .18 350 / .8); outline-offset: 2px; }

/* ---------- B. 剧本工坊 ---------- */
#mh-studio {
  position: fixed; inset: 0; z-index: 92; display: none;
  background: oklch(8% .014 292 / .72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#mh-studio.mh-open { display: block; animation: mh-fade .22s ease both; }
@keyframes mh-fade { from { opacity: 0; } to { opacity: 1; } }
.mh-st-shell {
  position: absolute; inset: 22px; display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden;
  border: 1px solid oklch(68% .07 342 / .3);
  background:
    radial-gradient(900px 460px at 4% -10%, oklch(34% .12 352 / .3), transparent 62%),
    radial-gradient(760px 420px at 100% 118%, oklch(30% .11 266 / .32), transparent 60%),
    linear-gradient(160deg, oklch(15.5% .02 316), oklch(11% .014 268));
  box-shadow: 0 40px 120px -40px oklch(0% 0 0 / .95), inset 0 1px 0 oklch(100% 0 0 / .06);
  animation: mh-shell-in .3s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes mh-shell-in { from { transform: translateY(14px) scale(.995); opacity: 0; } to { transform: none; opacity: 1; } }
.mh-st-top {
  display: flex; align-items: center; gap: 16px; padding: 15px 20px;
  border-bottom: 1px solid oklch(68% .07 342 / .2);
}
.mh-st-brand { display: flex; align-items: center; gap: 9px; color: oklch(92% .05 344); }
.mh-st-brand b { font: 600 14px/1 var(--font-sans); letter-spacing: .04em; }
.mh-st-brand i { font: 500 9px/1 var(--font-mono); font-style: normal; letter-spacing: .3em; color: oklch(80% .06 344 / .5); }
.mh-st-steps { display: flex; gap: 8px; margin-left: auto; }
.mh-st-steps span {
  font: 500 10px/1 var(--font-mono); letter-spacing: .16em; padding: 6px 10px; border-radius: 999px;
  border: 1px solid oklch(66% .06 340 / .2); color: oklch(78% .05 344 / .55);
}
.mh-st-steps span.on { color: oklch(92% .07 346); border-color: oklch(72% .16 350 / .5); background: oklch(70% .18 350 / .12); }
.mh-st-x {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid oklch(66% .06 340 / .22); background: oklch(100% 0 0 / .04); color: oklch(88% .04 330);
}
.mh-st-x:hover { border-color: oklch(72% .16 350 / .5); color: oklch(96% .04 344); }
.mh-st-body { flex: 1; display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); min-height: 0; }
.mh-st-in { padding: 18px 20px; border-right: 1px solid oklch(68% .07 342 / .18); display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.mh-st-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mh-st-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mh-st-field.mh-st-grow { flex: 1; min-height: 190px; }
.mh-st-field label { font: 500 10px/1 var(--font-mono); letter-spacing: .18em; color: oklch(80% .06 344 / .6); text-transform: uppercase; }
.mh-st-field label em { font-style: normal; letter-spacing: .04em; color: oklch(76% .06 344 / .42); }
#mh-studio input[type=text], #mh-studio input[type=number], #mh-studio select, #mh-studio textarea {
  width: 100%; background: oklch(100% 0 0 / .045); color: oklch(94% .02 340);
  border: 1px solid oklch(66% .06 340 / .22); border-radius: 9px; padding: 9px 11px;
  font: 400 12.5px/1.5 var(--font-sans); outline: none; transition: border-color .18s ease;
}
#mh-studio textarea { flex: 1; resize: none; font-size: 12.5px; line-height: 1.7; }
#mh-studio input:focus, #mh-studio select:focus, #mh-studio textarea:focus { border-color: oklch(72% .16 350 / .6); }
#mh-studio select option { background: oklch(18% .02 300); color: oklch(94% .02 340); }
.mh-st-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mh-st-hint { font: 400 10.5px/1.6 var(--font-mono); color: oklch(78% .05 344 / .42); letter-spacing: .04em; }
.mh-st-out { display: flex; flex-direction: column; min-height: 0; }
.mh-st-tabs { display: flex; gap: 4px; padding: 14px 20px 0; }
.mh-st-tabs button {
  padding: 8px 14px; border-radius: 9px 9px 0 0; cursor: pointer; border: 1px solid transparent; border-bottom: 0;
  background: transparent; color: oklch(80% .05 344 / .6); font: 500 12px/1 var(--font-sans);
}
.mh-st-tabs button:hover { color: oklch(92% .05 344); }
.mh-st-tabs button.on {
  color: oklch(96% .05 346); border-color: oklch(70% .16 350 / .4);
  background: linear-gradient(180deg, oklch(70% .18 350 / .18), transparent);
}
.mh-st-meta {
  padding: 10px 20px; border-top: 1px solid oklch(68% .07 342 / .18); border-bottom: 1px solid oklch(68% .07 342 / .18);
  font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em; color: oklch(82% .08 344 / .7);
}
.mh-st-panes { flex: 1; overflow: auto; padding: 16px 20px 20px; min-height: 0; }
.mh-st-empty { padding: 60px 20px; text-align: center; color: oklch(80% .05 344 / .5); font: 400 13px/1.9 var(--font-sans); }
.mh-st-empty small { color: oklch(78% .05 344 / .34); font-size: 11px; }
.mh-st-export { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid oklch(68% .07 342 / .18); }

/* 角色表 */
.mh-st-char {
  border: 1px solid oklch(66% .06 340 / .2); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
  background: linear-gradient(180deg, oklch(21% .028 330 / .5), oklch(17% .018 274 / .45));
}
.mh-st-char-hd { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.mh-st-char-hd b { font: 600 14px/1 var(--font-sans); color: oklch(96% .03 344); }
.mh-st-role {
  font: 500 9.5px/1 var(--font-mono); letter-spacing: .14em; padding: 4px 8px; border-radius: 999px;
  color: oklch(92% .07 346); background: linear-gradient(120deg, oklch(62% .22 356 / .8), oklch(50% .2 300 / .8));
}
.mh-st-num { margin-left: auto; font: 500 10px/1 var(--font-mono); color: oklch(80% .05 344 / .55); letter-spacing: .1em; }
.mh-st-char-bd p { font: 400 12.5px/1.8 var(--font-sans); color: oklch(88% .03 336 / .82); }
.mh-st-char-bd p em { font-style: normal; font: 500 10px/1 var(--font-mono); letter-spacing: .14em; color: oklch(82% .09 346 / .8); margin-right: 8px; }
.mh-st-char-bd i.warn { color: oklch(80% .12 62 / .9); font-style: normal; }
.mh-st-q { color: oklch(90% .06 346) !important; }

/* 剧本 */
.mh-st-pre {
  margin: 0; padding: 16px 18px; border-radius: 12px; overflow: auto;
  border: 1px solid oklch(66% .06 340 / .18); background: oklch(9% .012 280 / .6);
  font: 400 12.5px/1.95 var(--font-mono); color: oklch(92% .03 336); white-space: pre-wrap; word-break: break-word;
}

/* 分镜表 */
.mh-st-board { display: flex; flex-direction: column; gap: 6px; }
.mh-st-shot {
  display: grid; grid-template-columns: 42px 88px minmax(0, 1.5fr) minmax(0, 1fr) 168px;
  gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px;
  border: 1px solid oklch(66% .06 340 / .16); background: oklch(100% 0 0 / .03);
  font: 400 12px/1.5 var(--font-sans); color: oklch(90% .03 336 / .9);
}
.mh-st-shot:hover { border-color: oklch(70% .16 350 / .38); background: oklch(70% .16 350 / .06); }
.mh-st-no { font: 600 11px/1 var(--font-mono); color: oklch(84% .12 348 / .9); }
.mh-st-size { font: 500 10px/1 var(--font-mono); letter-spacing: .08em; color: oklch(88% .08 344); }
.mh-st-who { color: oklch(94% .07 346); font-weight: 600; }
.mh-st-attr { color: oklch(78% .05 344 / .6); font-style: normal; }
.mh-st-line { color: oklch(92% .05 344); }
.mh-st-dur { font: 500 10px/1 var(--font-mono); color: oklch(78% .05 344 / .55); letter-spacing: .05em; text-align: right; }

/* 体检 · 合规 */
.mh-st-score { display: flex; align-items: baseline; gap: 8px; padding: 10px 2px 14px; }
.mh-st-score b { font: 700 30px/1 var(--font-sans); color: oklch(88% .14 348); text-shadow: 0 0 22px oklch(60% .22 356 / .5); }
.mh-st-score span { font: 500 11px/1 var(--font-mono); color: oklch(80% .05 344 / .6); }
.mh-st-score i { margin-left: auto; font: 500 10px/1 var(--font-mono); font-style: normal; letter-spacing: .24em; color: oklch(80% .06 344 / .5); }
.mh-st-diag { display: flex; gap: 11px; padding: 10px 12px; border-radius: 10px; margin-bottom: 7px; border: 1px solid oklch(66% .06 340 / .18); }
.mh-st-diag.ok { background: oklch(100% 0 0 / .03); }
.mh-st-diag.bad { border-color: oklch(76% .14 40 / .42); background: oklch(76% .14 40 / .07); }
.mh-st-diag > b { flex: 0 0 44px; font: 600 10px/1.5 var(--font-mono); letter-spacing: .1em; color: oklch(82% .1 350); }
.mh-st-diag.bad > b { color: oklch(84% .13 40); }
.mh-st-diag strong { font: 600 12.5px/1.6 var(--font-sans); color: oklch(94% .03 336); }
.mh-st-diag p { font: 400 12px/1.7 var(--font-sans); color: oklch(86% .03 336 / .75); }
.mh-st-diag p.fix { color: oklch(86% .08 344 / .9); }
.mh-st-h4 { margin: 16px 0 8px; font: 500 10px/1 var(--font-mono); letter-spacing: .22em; color: oklch(82% .09 346 / .8); }
.mh-st-comp { padding: 9px 12px; border-radius: 10px; margin-bottom: 6px; border: 1px solid oklch(66% .06 340 / .16); }
.mh-st-comp.bad { border-color: oklch(76% .14 40 / .4); background: oklch(76% .14 40 / .06); }
.mh-st-comp b { font: 600 12px/1.6 var(--font-sans); color: oklch(94% .03 336); margin-right: 8px; }
.mh-st-comp span { font: 500 10px/1 var(--font-mono); color: oklch(82% .08 344 / .7); }
.mh-st-comp p { font: 400 11.5px/1.7 var(--font-sans); color: oklch(84% .03 336 / .68); margin-top: 4px; }
.mh-st-tips { margin: 0; padding-left: 18px; }
.mh-st-tips li { font: 400 12px/1.9 var(--font-sans); color: oklch(86% .03 336 / .8); }

@media (max-width: 1080px) {
  .mh-st-shell { inset: 10px; }
  .mh-st-body { grid-template-columns: 1fr; }
  .mh-st-in { border-right: 0; border-bottom: 1px solid oklch(68% .07 342 / .18); max-height: 46vh; }
  .mh-st-shot { grid-template-columns: 34px 74px minmax(0, 1fr); }
  .mh-st-line, .mh-st-dur { display: none; }
}

/* ---------- C. 创作助理悬浮球 ---------- */
#mh-agent-orb {
  position: fixed; right: 26px; bottom: 26px; z-index: 94;
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: grab;
  display: grid; place-items: center; padding: 0;
  background: radial-gradient(circle at 34% 28%, oklch(66% .24 356), oklch(48% .22 306) 58%, oklch(34% .16 268));
  box-shadow: 0 16px 40px -12px oklch(48% .22 320 / .85), inset 0 1px 0 oklch(100% 0 0 / .3);
  color: oklch(99% .015 340);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, opacity .2s ease;
  touch-action: none;
}
#mh-agent-orb:hover { transform: translateY(-3px) scale(1.04); }
#mh-agent-orb:focus-visible { outline: 2px solid oklch(80% .14 350 / .9); outline-offset: 3px; }
#mh-agent-orb.mh-orb-dim { opacity: .25; }
.mh-orb-core { display: grid; place-items: center; }
.mh-orb-ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid oklch(76% .18 350 / .5);
  animation: mh-orb-pulse 3.2s ease-out infinite;
}
@keyframes mh-orb-pulse {
  0% { transform: scale(.9); opacity: .8; }
  70% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
.mh-orb-tip {
  position: absolute; right: 70px; top: 50%; transform: translateY(-50%);
  padding: 6px 11px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  font: 500 11px/1 var(--font-sans); letter-spacing: .05em; color: oklch(94% .03 336);
  background: oklch(16% .02 300 / .94); border: 1px solid oklch(68% .07 342 / .3);
  opacity: 0; transition: opacity .18s ease;
}
#mh-agent-orb:hover .mh-orb-tip { opacity: 1; }

#mh-agent {
  position: fixed; right: 26px; bottom: 96px; z-index: 95;
  width: 388px; max-width: calc(100vw - 32px); height: min(560px, calc(100vh - 140px));
  display: none; flex-direction: column; overflow: hidden;
  border-radius: 16px; border: 1px solid oklch(68% .07 342 / .32);
  background:
    radial-gradient(520px 260px at 100% -10%, oklch(34% .13 352 / .28), transparent 62%),
    linear-gradient(165deg, oklch(16% .022 316 / .98), oklch(11% .014 268 / .98));
  box-shadow: 0 34px 90px -34px oklch(0% 0 0 / .95), inset 0 1px 0 oklch(100% 0 0 / .06);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#mh-agent.mh-open { display: flex; animation: mh-ag-in .26s cubic-bezier(.2,.8,.2,1) both; }
@keyframes mh-ag-in { from { transform: translateY(12px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
.mh-ag-hd { display: flex; align-items: center; padding: 13px 14px; border-bottom: 1px solid oklch(68% .07 342 / .2); }
.mh-ag-id { display: flex; align-items: center; gap: 8px; }
.mh-ag-id b { font: 600 13px/1 var(--font-sans); color: oklch(96% .03 344); letter-spacing: .03em; }
.mh-ag-id span { font: 500 8.5px/1 var(--font-mono); letter-spacing: .26em; color: oklch(80% .06 344 / .45); }
.mh-ag-dot { width: 7px; height: 7px; border-radius: 50%; background: oklch(78% .18 350); box-shadow: 0 0 10px oklch(62% .22 356 / .9); }
.mh-ag-hd-act { margin-left: auto; display: flex; gap: 4px; }
.mh-ag-ico {
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: grid; place-items: center;
  border: 1px solid transparent; background: transparent; color: oklch(84% .04 336 / .7);
}
.mh-ag-ico:hover { border-color: oklch(66% .06 340 / .3); color: oklch(96% .04 344); background: oklch(100% 0 0 / .05); }
.mh-ag-log { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.mh-ag-row { display: flex; }
.mh-ag-me { justify-content: flex-end; }
.mh-ag-bubble {
  max-width: 86%; padding: 9px 12px; border-radius: 12px;
  font: 400 12.5px/1.75 var(--font-sans); color: oklch(92% .03 336);
  border: 1px solid oklch(66% .06 340 / .2); background: oklch(100% 0 0 / .045);
}
.mh-ag-me .mh-ag-bubble {
  border-color: oklch(72% .16 350 / .35); color: oklch(98% .02 340);
  background: linear-gradient(140deg, oklch(58% .2 356 / .5), oklch(46% .2 300 / .42));
}
.mh-ag-bubble b { color: oklch(97% .05 346); font-weight: 600; }
.mh-ag-bubble code { font: 500 11.5px/1 var(--font-mono); padding: 1px 5px; border-radius: 5px; background: oklch(100% 0 0 / .09); }
.mh-ag-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.mh-ag-act {
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid oklch(72% .16 350 / .4); background: oklch(70% .18 350 / .1);
  color: oklch(94% .06 346); font: 500 11.5px/1 var(--font-sans);
}
.mh-ag-act:hover { background: oklch(70% .18 350 / .2); }
.mh-ag-typing { display: flex; gap: 4px; align-items: center; }
.mh-ag-typing i { width: 5px; height: 5px; border-radius: 50%; background: oklch(80% .12 348); animation: mh-ag-blink 1.1s infinite; }
.mh-ag-typing i:nth-child(2) { animation-delay: .16s; }
.mh-ag-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes mh-ag-blink { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
.mh-ag-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.mh-ag-chip {
  padding: 6px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid oklch(66% .06 340 / .26); background: oklch(100% 0 0 / .04);
  color: oklch(88% .04 336 / .85); font: 500 11px/1 var(--font-sans);
}
.mh-ag-chip:hover { border-color: oklch(72% .16 350 / .5); color: oklch(96% .05 346); }
.mh-ag-in { display: flex; gap: 8px; padding: 10px 14px 6px; border-top: 1px solid oklch(68% .07 342 / .2); }
#mh-ag-input {
  flex: 1; min-width: 0; height: 38px; padding: 0 12px; border-radius: 10px; outline: none;
  border: 1px solid oklch(66% .06 340 / .26); background: oklch(100% 0 0 / .05); color: oklch(94% .02 340);
  font: 400 12.5px/1 var(--font-sans);
}
#mh-ag-input:focus { border-color: oklch(72% .16 350 / .6); }
#mh-ag-input::placeholder { color: oklch(80% .05 344 / .42); }
.mh-ag-send {
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer; border: 0; display: grid; place-items: center;
  color: oklch(99% .015 340);
  background-image: linear-gradient(140deg, oklch(64% .23 356), oklch(50% .22 306));
  box-shadow: 0 8px 22px -8px oklch(52% .22 356 / .8);
}
.mh-ag-send:hover { filter: brightness(1.1); }
.mh-ag-ft {
  display: flex; justify-content: space-between; gap: 10px; padding: 6px 14px 11px;
  font: 500 9.5px/1 var(--font-mono); letter-spacing: .1em; color: oklch(78% .05 344 / .42);
}

@media (prefers-reduced-motion: reduce) {
  #mh-agent-orb .mh-orb-ring, .mh-ag-typing i { animation: none; }
  #mh-studio.mh-open, #mh-agent.mh-open, .mh-st-shell { animation: none; }
}
@media (max-width: 640px) {
  #mh-agent { right: 12px; left: 12px; width: auto; bottom: 88px; }
  #mh-agent-orb { right: 16px; bottom: 16px; }
}

/* ---- D7. Hero 第四颗 CTA（剧本工坊）与自定义模型接口样式 ---- */
#app-root .mh-dh-cta { flex-wrap: wrap; }
#app-root .mh-dh-btn.mh-dh-ghost {
  border-color: oklch(74% .16 350 / .45) !important;
  background: linear-gradient(120deg, oklch(60% .22 356 / .16), oklch(48% .2 296 / .12)) !important;
  color: oklch(94% .06 346) !important;
}
#app-root .mh-dh-btn.mh-dh-ghost:hover {
  border-color: oklch(78% .18 350 / .75) !important;
  background: linear-gradient(120deg, oklch(60% .22 356 / .26), oklch(48% .2 296 / .18)) !important;
}