/* ==========================================================================
   成都零橙互娱科技有限公司 · 官网样式
   风格：简约大气 / 橙色品牌 / 暖中性色 / 响应式
   ========================================================================== */

:root {
  /* 品牌橙 */
  --brand: #ff6a00;
  --brand-dark: #e85c00;
  --brand-light: #ff8f3c;
  --brand-soft: #fff5ed;
  --brand-line: #ffdcc2;
  --brand-glow: rgba(255, 106, 0, .16);

  /* 暖中性（与品牌橙同温，避免冷灰打架） */
  --ink: #16120f;
  --ink-2: #3d3730;
  --muted: #79706a;
  --muted-2: #a79e96;

  --bg: #ffffff;
  --bg-soft: #faf7f4;
  --bg-warm: #f5f1ec;
  --bg-deep: #17120e;

  /* 面层：卡片 / 面板 / 输入框 / 弹窗（深色主题下整体换成深面） */
  --surface: #ffffff;
  --surface-2: #fdfcfa;
  --surface-3: #fffdfc;
  --hi: #ffffff;                 /* 顶部 1px 内高光 */

  --line: #eae4dd;
  --line-2: #f3efea;
  --line-strong: #dcd4ca;

  --ok: #16a34a;
  --warn: #d97706;
  --err: #dc2626;

  /* 思维导图分支配色：6 色循环，深色主题下整体提亮（见 html[data-theme="dark"]） */
  --mm-c1: #ff6a00;
  --mm-c2: #2f7de1;
  --mm-c3: #16a34a;
  --mm-c4: #0e9aa7;
  --mm-c5: #7b5cf0;
  --mm-c6: #d94f8a;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  --shadow-sm: 0 1px 2px rgba(28, 20, 12, .06), 0 1px 1px rgba(28, 20, 12, .02);
  --shadow: 0 2px 4px rgba(28, 20, 12, .04), 0 14px 32px -14px rgba(28, 20, 12, .18);
  --shadow-lg: 0 4px 10px rgba(28, 20, 12, .05), 0 36px 68px -30px rgba(28, 20, 12, .32);
  --shadow-brand: 0 14px 30px -16px rgba(255, 106, 0, .55);

  --max: 1180px;
  --header-h: 68px;

  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22, .68, .24, 1);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 移动端抽屉导航用 transform 移出视口，会被计入可滚动区域，这里裁掉横向溢出 */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 全局防横向溢出（clip 不产生滚动容器，不影响 position: sticky 页头） */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
/* [hidden] 全局守卫：img{display:block} 与 .btn{display:inline-flex} 等规则会覆盖
   hidden 的 UA 样式（曾导致「准备好了吗」弹窗加载即整屏可见）；元素显示一律走移除 hidden 属性 */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0; line-height: 1.24; font-weight: 600; letter-spacing: -.022em;
  text-wrap: balance;
}
p { margin: 0; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hidden { display: none !important; }

/* ---------- Buttons ----------
   层级：.btn 主按钮（品牌橙实心）/ .btn-ghost 次要按钮（描边）/ .btn-quiet 文字按钮（最低权重）
   三态：默认 → :hover 抬升 + 光泽扫过 → :active 按下沉 + 压深阴影（明确的「按下去了」反馈）
   加载态：.btn.is-busy → 转圈 + 禁点 + 文字透明占位（宽度不跳） */
.btn {
  --btn-lift: -1.5px;
  --btn-press: 1px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px;
  color: #fff; font-size: 14.5px; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
  background-image: linear-gradient(180deg, #ff8226, #ff5f00);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 2px rgba(168, 58, 0, .18), 0 10px 24px -16px rgba(255, 106, 0, .95);
  transition: background-image .2s var(--ease), transform .18s var(--ease), box-shadow .2s var(--ease),
    border-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease), filter .2s var(--ease);
}
/* hover：抬升 + 高光扫过（::after 光泽见「3. 按钮光泽扫过」与「5」周期性流转）
   注：位移不走 transform —— 磁吸效果占用独立 translate 属性，
   will-change:translate 的合成层下 transform 计算值不可靠（Chromium 实测恒 none）。
   故按压反馈以 scale + 背景 + 阴影三重差异实现，视觉更确定也更明显。 */
.btn:hover {
  background-image: linear-gradient(180deg, #ff9140, #f25700);
  transform: translateY(var(--btn-lift));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 2px 4px rgba(168, 58, 0, .2), 0 18px 32px -16px rgba(255, 106, 0, .95);
}
/* active：明确「按下」——缩进 + 阴影收紧变短 + 内高光熄灭，模拟物理键程 */
.btn:active {
  transform: translateY(var(--btn-press)) scale(.975);
  background-image: linear-gradient(180deg, #f26f14, #e04f00);
  box-shadow: inset 0 2px 5px rgba(122, 40, 0, .32), 0 1px 2px rgba(168, 58, 0, .16);
  transition-duration: .07s;
}
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* 次要按钮：描边弱化，与主按钮拉开视觉权重 */
.btn-ghost {
  background-image: none; background-color: var(--surface); color: var(--ink); border-color: var(--line-strong);
  box-shadow: inset 0 1px 0 var(--hi), 0 1px 2px rgba(28, 20, 12, .05);
}
.btn-ghost:hover {
  background-image: none; background-color: var(--surface); color: var(--brand-dark);
  border-color: var(--brand-line);
  box-shadow: 0 2px 4px rgba(28, 20, 12, .05), 0 14px 26px -18px rgba(28, 20, 12, .38);
}
.btn-ghost:active {
  background-image: none; background-color: var(--bg-soft); color: var(--brand-dark);
  border-color: var(--brand); box-shadow: inset 0 2px 4px rgba(28, 20, 12, .1);
  transform: scale(.975);
}

/* 文字按钮：最低权重，用于卡片角落等弱引导 */
.btn-quiet {
  background-image: none; background-color: transparent; color: var(--muted);
  box-shadow: none; padding: 0 12px; height: 34px; font-weight: 600;
}
.btn-quiet:hover { background-image: none; background-color: var(--brand-soft); color: var(--brand-dark); box-shadow: none; }
.btn-quiet:active { background-image: none; background-color: var(--brand-soft); color: var(--brand); box-shadow: none; }

.btn-dark { background-image: linear-gradient(180deg, #241d18, #17120f); }
.btn-dark:hover { background-image: linear-gradient(180deg, #2e251f, #1d1713); box-shadow: 0 16px 30px -18px rgba(23, 18, 15, .8); }
.btn-dark:active { background-image: linear-gradient(180deg, #150f0c, #0d0908); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5); }

/* 加载态：转圈 + 文字透明占位，避免按钮宽度塌陷 */
.btn.is-busy { cursor: progress; pointer-events: none; }
.btn.is-busy > * , .btn.is-busy { color: transparent !important; }
.btn.is-busy::before {
  content: ''; position: absolute; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .38); border-top-color: #fff;
  animation: btn-spin .7s linear infinite;
}
.btn-ghost.is-busy::before, .btn-quiet.is-busy::before { border-color: rgba(255, 106, 0, .28); border-top-color: var(--brand); }
@keyframes btn-spin { to { transform: rotate(360deg); } }

.btn-sm { height: 38px; padding: 0 17px; font-size: 13.5px; }
.btn-block { width: 100%; }

/* 点击动效：水波纹（ripple）——按下瞬间从触点扩散的圆形光晕，明确「被点了」。
   子元素 scale 动画（不占用按钮 transform），z-index:-1 落于按钮背景之上、文字之下，文字始终清晰；
   与三态 / hover 扫光互不冲突 */
.btn .ripple {
  position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; z-index: -1;
  background: rgba(255, 255, 255, .4);
  transform: scale(0); opacity: .55;
  animation: btn-ripple .5s cubic-bezier(.22, .61, .36, 1) forwards;
  will-change: transform, opacity;
}
.btn-ghost .ripple { background: rgba(255, 138, 43, .28); }
.btn-dark .ripple, .cta-dark .btn-ghost .ripple { background: rgba(255, 255, 255, .22); }
@keyframes btn-ripple {
  0% { transform: scale(0); opacity: .55; }
  100% { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn .ripple { display: none; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60; height: var(--header-h);
  background: rgba(255, 253, 251, .82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  /* 移动端抽屉 translateX(100%) 离屏待命时，靠页头裁剪其横向溢出，
     避免把文档撑出一倍宽（手机端可左右拖动） */
  overflow-x: clip;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(28, 20, 12, .02), 0 12px 28px -22px rgba(28, 20, 12, .55);
  background: rgba(255, 253, 251, .94);
}
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 20px; }

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s var(--ease);
}
.brand:hover .brand-mark { transform: rotate(-4deg) scale(1.04); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.brand-sub { font-size: 10px; color: var(--muted-2); letter-spacing: .14em; text-transform: uppercase; }
/* AI 区页头：品牌 logo 位替换为「网站官网」导航项（与主导航链接同风格，不显示 logo 图标） */
.brand-home {
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  padding: 8px 14px; margin-left: -14px; border-radius: 10px;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.brand-home:hover { color: var(--ink); background: var(--bg-soft); }

.main-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.main-nav a {
  position: relative; padding: 8px 14px; border-radius: 10px;
  font-size: 14.5px; color: var(--ink-2); font-weight: 500;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.main-nav a:hover { color: var(--ink); background: var(--bg-soft); }
.main-nav a.active { color: var(--brand); font-weight: 600; }
.main-nav a.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
  background-image: linear-gradient(90deg, var(--brand-light), var(--brand));
  border-radius: 2px;
}

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: 14px; flex: none; }
.nav-toggle {
  display: none; width: 40px; height: 40px; border: 1px solid var(--line); background: var(--surface);
  border-radius: 11px; cursor: pointer; padding: 0; align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 17px; height: 1.8px; background: var(--ink); border-radius: 2px; position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.8px; background: var(--ink); border-radius: 2px;
}
.nav-toggle span::before { top: -5.5px; }
.nav-toggle span::after { top: 5.5px; }

/* 站内搜索（页头） */
.header-search {
  display: flex; align-items: center; gap: 0; height: 38px; padding: 0 6px 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.header-search:focus-within { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-glow); }
.header-search-input {
  width: 150px; border: 0; background: transparent; color: var(--ink); font: 500 13px/1 system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  outline: none; padding: 0;
}
.header-search-input::placeholder { color: var(--muted-2); }
.header-search-btn {
  border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; padding: 4px 6px; border-radius: 50%;
}
.header-search-btn:hover { color: var(--brand-dark); }

/* user chip */
.user-chip {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.user-chip:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.user-avatar {
  position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700;
  overflow: visible; flex: none; box-shadow: inset 0 0 0 1px var(--brand-line);
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* 悬停头像出现的相机角标 = 点击直接更换头像 */
.user-avatar .ava-cam {
  position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.6); transition: opacity .15s var(--ease), transform .15s var(--ease);
  box-shadow: 0 0 0 2px var(--bg); cursor: pointer; pointer-events: auto; z-index: 2;
}
.user-chip:hover .ava-cam, .user-avatar:hover .ava-cam { opacity: 1; transform: scale(1); }
.user-chip .user-mail { font-size: 13px; color: var(--ink-2); max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .chev { padding: 0 8px 0 0; color: var(--muted-2); font-size: 11px; }

.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px; padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg); overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: top right;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s var(--ease);
}
/* 顶部品牌渐变发丝线 */
.dropdown-menu::before {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-light) 52%, transparent 96%);
}
.dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: none; }
.dd-body { padding: 7px; }
.dropdown-menu a, .dropdown-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: none;
  border-radius: 10px; font-size: 14px; color: var(--ink-2); cursor: pointer; text-align: left;
  transition: background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.dropdown-menu a .dd-ic, .dropdown-menu button .dd-ic { color: var(--muted); flex: none; transition: color .15s var(--ease); }
/* 悬停右侧小箭头 */
.dropdown-menu a::after, .dropdown-menu button::after {
  content: ""; width: 5px; height: 5px; margin-left: auto; flex: none;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: 0; transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.dropdown-menu a:hover, .dropdown-menu button:hover {
  background: var(--bg-soft); color: var(--ink); transform: translateX(2px);
}
.dropdown-menu a:hover::after, .dropdown-menu button:hover::after { opacity: .55; transform: rotate(45deg) translate(1px, -1px); }
.dropdown-menu a:hover .dd-ic, .dropdown-menu button:hover .dd-ic { color: var(--brand); }
/* 退出登录：红色警示语义 */
.dropdown-menu button.dd-danger:hover { background: var(--bg-soft); color: var(--err); }
.dropdown-menu button.dd-danger:hover .dd-ic { color: var(--err); }
.dropdown-menu .divider { height: 1px; background: var(--line-2); margin: 0; }
/* 头部：头像 + 昵称 + 身份徽标 + 邮箱 */
.dropdown-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--line-2); background: var(--surface-2);
}
.dropdown-head .dd-ava {
  width: 36px; height: 36px; border-radius: 50%; flex: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--brand-dark);
  background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-line);
}
.dropdown-head .dd-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.dropdown-head .dd-head-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dropdown-head .dh-name { font-size: 14px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; min-width: 0; }
.dropdown-head .dh-badge {
  font-style: normal; font-size: 10.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  color: var(--brand-dark); background: var(--brand-soft); border: 1px solid var(--brand-line);
  padding: 3px 7px; border-radius: 999px;
}
.dropdown-head .dh-mail {
  font-size: 12px; color: var(--muted); word-break: break-all;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(760px 440px at 6% -14%, rgba(255, 106, 0, .15), transparent 62%),
    radial-gradient(640px 400px at 98% 2%, rgba(255, 168, 84, .13), transparent 60%),
    radial-gradient(1000px 520px at 46% 122%, rgba(133, 96, 68, .09), transparent 68%),
    linear-gradient(180deg, #fffdfb 0%, #fbf8f5 100%);
  border-bottom: 1px solid var(--line);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(28, 20, 12, .038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 20, 12, .038) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(780px 430px at 44% 26%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(780px 430px at 44% 26%, #000 0%, transparent 76%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 62px; align-items: center; padding: 86px 0 80px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; height: 31px; padding: 0 14px;
  border-radius: 999px; background: var(--brand-soft); border: 1px solid var(--brand-line);
  color: var(--brand-dark); font-size: 12.5px; font-weight: 600; letter-spacing: .03em;
  box-shadow: inset 0 1px 0 var(--hi);
}
.eyebrow i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 106, 0, .16);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 106, 0, .16); }
  50% { box-shadow: 0 0 0 6px rgba(255, 106, 0, .05); }
}

.hero h1 {
  margin: 22px 0 0; font-size: clamp(31px, 4.5vw, 52px); font-weight: 700; letter-spacing: -.035em;
  line-height: 1.16;
}
.hero h1 em { font-style: normal; color: var(--brand); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 em {
    background-image: linear-gradient(98deg, #ff9a45 0%, #ff5f00 58%, #ef4d00 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.hero-lead { margin-top: 22px; font-size: 16.5px; color: var(--muted); max-width: 33em; line-height: 1.88; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero-stats { display: flex; gap: 40px; margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.hero-stats .hs-num {
  font-size: 28px; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.hero-stats .hs-num b { color: var(--brand); font-weight: 700; }
.hero-stats .hs-label { font-size: 12.5px; color: var(--muted); margin-top: 3px; letter-spacing: .01em; }

/* hero visual —— 作品拼贴 */
.hero-visual { position: relative; padding-bottom: 30px; }
.art-stack { position: relative; }

.art-main {
  position: relative; margin: 0; border-radius: 22px; overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--bg-deep);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), var(--shadow-lg);
}
.art-main img { width: 100%; height: 100%; object-fit: cover; }
.art-main::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, rgba(255, 255, 255, .07) 0%, transparent 42%),
    linear-gradient(0deg, rgba(12, 8, 6, .46) 0%, transparent 46%);
}

.art-sub {
  position: absolute; left: -34px; bottom: 6px; width: 44%; margin: 0;
  aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden;
  background: var(--bg-deep);
  box-shadow: 0 0 0 3px var(--bg), inset 0 0 0 1px rgba(255, 255, 255, .12), var(--shadow-lg);
  transform: rotate(-3.2deg);
  transition: transform .45s var(--ease);
}
.art-sub img { width: 100%; height: 100%; object-fit: cover; }
.art-stack:hover .art-sub { transform: rotate(-1.4deg) translateY(-4px); }

.art-ribbon {
  position: absolute; right: -12px; top: -16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px;
  border-radius: 999px; background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.art-ribbon .ar-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 106, 0, .14); flex: none;
}
.art-ribbon .ar-text { font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; white-space: nowrap; }

.hero-float {
  position: absolute; right: -18px; bottom: -14px; z-index: 2; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 15px 19px; min-width: 182px;
}
.hero-float .hf-label { font-size: 11.5px; color: var(--muted); letter-spacing: .02em; }
.hero-float .hf-val { font-size: 22px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hero-float .hf-val span { font-size: 13px; color: var(--muted-2); font-weight: 600; }

/* ---------- 能力关键词跑马灯 ---------- */
.marquee {
  position: relative; overflow: hidden; background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-soft) 12%, rgba(250, 247, 244, 0)); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg-soft) 12%, rgba(250, 247, 244, 0)); }
.marquee-track { display: flex; width: max-content; animation: mq 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.mq-half { display: flex; align-items: center; padding: 17px 0; }
.mq-item {
  padding: 0 26px; font-size: 13.5px; font-weight: 600; letter-spacing: .1em;
  color: var(--ink-2); white-space: nowrap;
}
.mq-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); opacity: .5; flex: none; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 组件：信息面板 / 管线指标 ---------- */
.hero-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-lg);
}
.hero-card .hc-top {
  display: flex; align-items: center; gap: 6px; padding: 14px 16px;
  border-bottom: 1px solid var(--line-2); background: var(--surface-2);
}
.hero-card .hc-dot { width: 9px; height: 9px; border-radius: 50%; background: #e8e2db; }
.hero-card .hc-dot:first-child { background: var(--brand-line); }
.hero-card .hc-title {
  margin-left: 8px; font-size: 11.5px; color: var(--muted-2);
  letter-spacing: .1em; text-transform: uppercase;
}
.hero-card .hc-body { padding: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hc-tile {
  border: 1px solid var(--line-2); border-radius: 13px; padding: 15px; background: var(--surface);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.hc-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand-line); }
.hc-tile .t-ico {
  width: 32px; height: 32px; border-radius: 10px;
  background-image: linear-gradient(150deg, var(--brand-soft), #ffe8d6);
  border: 1px solid var(--brand-line); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.hc-tile .t-name { margin-top: 11px; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.hc-tile .t-bar { margin-top: 10px; height: 5px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.hc-tile .t-bar i {
  display: block; height: 100%; border-radius: 3px;
  background-image: linear-gradient(90deg, var(--brand-light), var(--brand));
}

/* ---------- 组件：行动号召面板 ---------- */
.cta-panel {
  position: relative; overflow: hidden; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 62px 44px; background: var(--surface-3); box-shadow: var(--shadow);
}
.cta-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(640px 300px at 10% 0%, rgba(255, 106, 0, .12), transparent 62%),
    radial-gradient(640px 300px at 90% 100%, rgba(255, 168, 84, .14), transparent 62%);
}
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel.left { text-align: left; }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section.soft {
  background: var(--bg-soft);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.section.tight { padding: 68px 0; }

/* 首页快速入口 */
.quick-entry-sec { padding: 64px 0 88px; }
.quick-entry { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.quick-entry-card {
  display: flex; flex-direction: column; gap: 10px; padding: 30px 32px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface);
  text-decoration: none; color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.quick-entry-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.qe-ic { font-size: 30px; line-height: 1; }
.qe-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.qe-sub { font-size: 14px; color: var(--muted); line-height: 1.7; }
.qe-go { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--brand-dark); }
.qe-coop { background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, var(--surface)) 0%, var(--surface) 60%); }
.qe-talk { background: linear-gradient(135deg, color-mix(in srgb, #3b82f6 12%, var(--surface)) 0%, var(--surface) 60%); }
.qe-studio { background: linear-gradient(135deg, color-mix(in srgb, #8b5cf6 12%, var(--surface)) 0%, var(--surface) 60%); }
.qe-mall { background: linear-gradient(135deg, color-mix(in srgb, #10b981 12%, var(--surface)) 0%, var(--surface) 60%); }
@media (max-width: 1080px) {
  .quick-entry { grid-template-columns: repeat(2, 1fr); }
}

.sec-head { max-width: 660px; margin-bottom: 50px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 14px;
}
.sec-kicker::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background-image: linear-gradient(90deg, var(--brand-light), var(--brand));
}
.sec-head.center .sec-kicker::after {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background-image: linear-gradient(90deg, var(--brand), var(--brand-light));
}
.sec-head h2 { font-size: clamp(25px, 3.1vw, 36px); font-weight: 700; letter-spacing: -.03em; }
.sec-head p { margin-top: 15px; color: var(--muted); font-size: 15.5px; line-height: 1.85; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(28, 20, 12, .03);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  border-color: #e3d9cd;
  box-shadow: 0 3px 6px rgba(28, 20, 12, .04), 0 26px 48px -24px rgba(120, 68, 24, .4);
}
.card-media { position: relative; aspect-ratio: 16 / 9; background: var(--bg-warm); overflow: hidden; }
.card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.card:hover .card-media img { transform: scale(1.045); }
.card-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(12, 8, 6, .28) 0%, transparent 38%);
  opacity: 0; transition: opacity .3s var(--ease);
}
.card:hover .card-media::after { opacity: 1; }

.card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: 17px; font-weight: 650; }
.card-body .c-sub {
  margin-top: 7px; font-size: 12px; color: var(--brand); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.card-body .c-text { margin-top: 13px; font-size: 14px; color: var(--muted); line-height: 1.82; flex: 1; }
.card-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-link { font-size: 13.5px; font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: 6px; transition: gap .2s var(--ease); }
.card-link:hover { gap: 10px; }

.badge {
  display: inline-flex; align-items: center; height: 25px; padding: 0 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--brand-soft); color: var(--brand-dark);
  border: 1px solid var(--brand-line);
}
.badge.gray { background: var(--bg-warm); color: var(--muted); border-color: var(--line); }
.badge.ok { background: #ecfdf3; color: #15803d; border-color: #bbf7d0; }
.badge.warn { background: #fffbeb; color: #b45309; border-color: #fde68a; }
/* 资源下载：当前等级「下不了」的权限徽标（可下载态前置） */
.badge.is-need { background: #fff5ec; color: #c2410c; border-color: #fed7aa; }
html[data-theme="dark"] .badge.is-need { background: rgba(255, 106, 0, .14); color: #fdba74; border-color: rgba(255, 106, 0, .32); }

/* 资源下载：进度条与状态文案 */
.dl-prog { height: 8px; border-radius: 99px; background: var(--bg-warm); border: 1px solid var(--line); overflow: hidden; }
.dl-prog-bar { height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, #ff8f3c, #ff6a00); transition: width .18s ease; }
.dl-prog-txt { margin-top: 9px; font-size: 12.5px; color: var(--muted-2); }
.dl-prog-txt.is-err { color: #b91c1c; }
html[data-theme="dark"] .dl-prog-txt.is-err { color: #fca5a5; }

/* 后台上传预览里的体积标注 */
.up-size { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted-2); }

/* 资源下载：筛选行 / 加载更多 / 收藏星标 */
.dl-filters { flex-wrap: wrap; gap: 10px; }
.dl-fl { font-size: 12.5px; color: var(--muted-2); font-weight: 600; }
.dl-more { display: flex; justify-content: center; margin-top: 26px; }
.dl-fav {
  margin-left: auto; width: 34px; height: 34px; flex: none; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted-2);
  font-size: 16px; line-height: 1; cursor: pointer; transition: all .16s ease;
}
.dl-fav:hover { border-color: var(--brand-line); color: var(--brand); }
.dl-fav.is-on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
@media (max-width: 640px) {
  .dl-filters { gap: 8px; }
  .dl-fl { width: 100%; }
}

/* 资源下载：多附件勾选（P3 打包 ZIP） */
.dl-att { margin-top: 14px; display: grid; gap: 8px; max-height: 260px; overflow-y: auto; }
.dl-att-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 13.5px; cursor: pointer; background: var(--bg);
}
.dl-att-row:hover { border-color: var(--brand-line); }
.dl-att-row input { width: 16px; height: 16px; accent-color: var(--brand); flex: none; }
.dl-att-row span { word-break: break-all; }

.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 12.5px; color: var(--muted-2); }

/* feature list */
.feature-list { list-style: none; margin: 17px 0 0; padding: 0; display: grid; gap: 9px; }
.feature-list li { position: relative; padding-left: 23px; font-size: 13.5px; color: var(--ink-2); }
.feature-list li::before {
  content: ""; position: absolute; left: 3px; top: 8px; width: 7px; height: 7px; border-radius: 2px;
  background-image: linear-gradient(135deg, var(--brand-light), var(--brand));
  transform: rotate(45deg);
}

/* ---------- Page hero (inner pages) ---------- */
.page-head {
  position: relative; overflow: hidden;
  background:
    radial-gradient(800px 340px at 4% -40%, rgba(255, 106, 0, .13), transparent 62%),
    radial-gradient(600px 300px at 96% -10%, rgba(255, 168, 84, .1), transparent 60%),
    linear-gradient(180deg, #fdfbf9, #fff);
  border-bottom: 1px solid var(--line);
  padding: 66px 0 58px;
}
.page-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(28, 20, 12, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 20, 12, .03) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(680px 300px at 20% 0%, #000, transparent 74%);
  -webkit-mask-image: radial-gradient(680px 300px at 20% 0%, #000, transparent 74%);
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head .crumb { font-size: 13px; color: var(--muted-2); margin-bottom: 13px; }
.page-head .crumb a { transition: color .18s var(--ease); }
.page-head .crumb a:hover { color: var(--brand); }
.page-head h1 { font-size: clamp(27px, 3.5vw, 40px); font-weight: 700; letter-spacing: -.032em; }
.page-head p { margin-top: 15px; color: var(--muted); font-size: 15.5px; max-width: 62ch; line-height: 1.85; }

/* ---------- Lists / filters ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  height: 37px; padding: 0 17px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); font-size: 13.5px; cursor: pointer;
  transition: all .18s var(--ease);
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); box-shadow: var(--shadow-sm); }
.chip.active {
  background-image: linear-gradient(180deg, #241d18, #17120f);
  border-color: var(--ink); color: #fff; font-weight: 600;
  box-shadow: 0 10px 22px -14px rgba(23, 18, 15, .8);
}

.search-box { position: relative; margin-left: auto; }
.search-box input {
  width: 272px; height: 41px; padding: 0 14px 0 40px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); outline: none; font-size: 14px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.search-box input::placeholder { color: var(--muted-2); }
.search-box input:focus { border-color: var(--brand-line); box-shadow: 0 0 0 4px var(--brand-glow); }
.search-box svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted-2); }

/* ---------- News list ---------- */
.news-item {
  position: relative; display: grid; grid-template-columns: 96px 1fr auto; gap: 24px; align-items: center;
  padding: 24px 0; border-bottom: 1px solid var(--line-2);
}
.news-item:first-child { border-top: 1px solid var(--line-2); }
.news-item::before {
  content: ""; position: absolute; inset: 6px -18px; border-radius: 14px;
  background: transparent; transition: background .22s var(--ease); pointer-events: none;
}
.news-item:hover::before { background: rgba(255, 106, 0, .04); }
.news-item > * { position: relative; z-index: 1; }
.news-date { text-align: center; border-right: 1px solid var(--line-2); padding-right: 18px; }
.news-date .nd-d { font-size: 25px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.news-date .nd-m { font-size: 12px; color: var(--muted-2); letter-spacing: .04em; }
.news-item h3 { font-size: 16.5px; font-weight: 600; }
.news-item h3 a { transition: color .18s var(--ease); }
.news-item h3 a:hover { color: var(--brand); }
.news-item .ni-sum { margin-top: 7px; font-size: 13.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-item .ni-go { color: var(--muted-2); font-size: 13px; transition: color .18s var(--ease), transform .18s var(--ease); }
.news-item:hover .ni-go { color: var(--brand); }

/* ---------- About page ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.prose p { margin-bottom: 17px; color: var(--ink-2); font-size: 15.5px; line-height: 1.95; }
.prose strong { color: var(--ink); font-weight: 650; }

.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; background: var(--surface);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.stat-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(180px 90px at 100% 0%, rgba(255, 106, 0, .1), transparent 70%);
  opacity: 0; transition: opacity .28s var(--ease);
}
.stat-card:hover { transform: translateY(-4px); border-color: #e3d9cd; box-shadow: var(--shadow); }
.stat-card:hover::after { opacity: 1; }
.stat-card .sc-num {
  font-size: 32px; font-weight: 700; letter-spacing: -.035em; color: var(--brand);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.stat-card .sc-label { margin-top: 7px; font-size: 13.5px; color: var(--muted); }

.timeline { position: relative; margin-top: 8px; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px;
  background-image: linear-gradient(180deg, var(--brand-line), var(--line));
}
.tl-item { position: relative; padding: 0 0 34px 36px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--brand);
  box-shadow: 0 0 0 4px rgba(255, 106, 0, .1);
  transition: box-shadow .28s var(--ease);
}
.tl-item:hover::before { box-shadow: 0 0 0 7px rgba(255, 106, 0, .13); }
.tl-year { font-size: 13px; font-weight: 700; color: var(--brand); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.tl-item h4 { margin-top: 6px; font-size: 15.5px; font-weight: 650; }
.tl-item p { margin-top: 7px; font-size: 14px; color: var(--muted); line-height: 1.85; }

.value-card {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; background: var(--surface);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.value-card:hover { transform: translateY(-4px); border-color: #e3d9cd; box-shadow: var(--shadow); }
.value-card .vc-ico {
  width: 44px; height: 44px; border-radius: 13px;
  background-image: linear-gradient(150deg, var(--brand-soft), #ffe8d6);
  color: var(--brand); border: 1px solid var(--brand-line);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  box-shadow: inset 0 1px 0 var(--hi);
}
.value-card h3 { margin-top: 17px; font-size: 16.5px; }
.value-card p { margin-top: 11px; font-size: 14px; color: var(--muted); line-height: 1.85; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
/* 个人中心专用栅格：窄侧栏 + 宽主栏 */
.acc-grid { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 28px; align-items: start; }
.acc-grid .form-card, .acc-grid .value-card { padding: 28px; }
.acc-grid .info-item { padding: 14px 0; }
.acc-grid .form-card > h2 { font-size: 19px; }
#accOrders .empty { padding: 34px 16px; }
#accOrders .empty .e-ico { font-size: 30px; margin-bottom: 8px; }
@media (max-width: 1024px) { .acc-grid { grid-template-columns: 1fr; gap: 22px; } }
.info-list { display: grid; gap: 4px; }
.info-item { display: flex; gap: 16px; padding: 19px 0; border-bottom: 1px solid var(--line-2); }
.info-item .ii-ico {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  background-image: linear-gradient(150deg, var(--brand-soft), #ffe8d6);
  color: var(--brand); border: 1px solid var(--brand-line);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  box-shadow: inset 0 1px 0 var(--hi);
}
.info-item .ii-label { font-size: 12.5px; color: var(--muted-2); letter-spacing: .03em; }
.info-item .ii-val { font-size: 14.5px; font-weight: 500; margin-top: 3px; word-break: break-all; }

/* ---------- Forms ---------- */
.form-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; background: var(--surface);
  box-shadow: var(--shadow);
}
.field { margin-bottom: 19px; }
/* 个人中心资料表单分组标题 */
.pf-group-title { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; color: var(--brand); margin: 4px 0 14px; }
.pf-group-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

/* 资料待完善提醒卡（新注册账号引导） */
.pf-todo { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 13px 16px;
  border: 1px solid var(--brand-line); border-radius: var(--radius-sm, 10px); background: var(--brand-soft); }
.pf-todo-ico { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: #fff; }
.pf-todo-ico .ic { width: 20px; height: 20px; }
.pf-todo-txt { flex: 1; min-width: 0; }
.pf-todo-txt b { display: block; font-size: 14.5px; color: var(--brand-dark); }
.pf-todo-txt span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.pf-todo .btn { flex: none; }
@media (max-width: 560px) {
  .pf-todo { flex-wrap: wrap; }
  .pf-todo .btn { width: 100%; }
}
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; color: var(--ink-2); }
.field label .req { color: var(--err); margin-left: 3px; }
.input, .textarea, .select {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  padding: 12px 14px; outline: none; font-size: 14.5px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--line-strong); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--brand-line); box-shadow: 0 0 0 4px var(--brand-glow); }
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.textarea { min-height: 132px; resize: vertical; line-height: 1.78; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' fill='none' stroke='%23a79e96' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field-hint { margin-top: 7px; font-size: 12.5px; color: var(--muted-2); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.alert {
  display: flex; gap: 10px; padding: 13px 16px; border-radius: var(--radius-sm); font-size: 13.5px;
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink-2); margin-bottom: 18px;
  line-height: 1.75;
}
.alert.err { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.alert.ok { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.alert.warn { background: #fffbeb; border-color: #fde68a; color: #b45309; }

/* ---------- Auth pages ---------- */
.auth-wrap {
  position: relative; min-height: calc(100vh - var(--header-h) - 300px);
  display: flex; align-items: center; padding: 64px 0;
  background:
    radial-gradient(700px 380px at 8% -20%, rgba(255, 106, 0, .1), transparent 62%),
    radial-gradient(620px 340px at 96% 110%, rgba(255, 168, 84, .1), transparent 60%),
    linear-gradient(180deg, #fdfbf9, #fff);
}
.auth-card {
  width: 100%; max-width: 456px; margin: 0 auto; border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden;
}
.auth-head { padding: 32px 34px 0; }
.auth-head h1 { font-size: 23px; letter-spacing: -.028em; }
.auth-head p { margin-top: 10px; font-size: 13.5px; color: var(--muted); line-height: 1.8; }
.tabs { display: flex; gap: 4px; padding: 22px 34px 0; border-bottom: 1px solid var(--line); }
.tab {
  position: relative; padding: 10px 4px 13px; margin-right: 24px; border: 0; background: none;
  font-size: 14.5px; color: var(--muted); cursor: pointer; font-weight: 500;
  transition: color .18s var(--ease);
}
.tab:hover { color: var(--ink-2); }
.tab.active { color: var(--ink); font-weight: 650; }
.tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background-image: linear-gradient(90deg, var(--brand-light), var(--brand));
}
.auth-body { padding: 28px 34px 34px; }
.auth-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; font-size: 13px; }
.link { color: var(--brand); cursor: pointer; font-weight: 600; }
.link:hover { text-decoration: underline; }
.link-btn { border: 0; background: none; padding: 0; cursor: pointer; }

.otp-row { display: flex; gap: 10px; }
.otp-row .input { flex: 1; }
.otp-row .btn { flex: none; width: 122px; padding: 0 10px; }

/* ---------- Footer（v2：橙色主题 · 品牌光晕 + 水印） ---------- */
.site-footer {
  position: relative; background: var(--bg-warm); color: var(--muted); padding: 72px 0 0; overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background-image: linear-gradient(90deg, transparent, rgba(255, 106, 0, .9) 18%, #ffab5e 50%, rgba(255, 106, 0, .9) 82%, transparent);
}
.site-footer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(820px 360px at 8% 0%, rgba(255, 106, 0, .12), transparent 64%),
    radial-gradient(700px 320px at 96% 88%, rgba(255, 106, 0, .1), transparent 66%);
}
/* 底部超大品牌水印 */
.footer-mark {
  position: absolute; right: -1%; bottom: -26px; z-index: 0; pointer-events: none; user-select: none;
  font-size: clamp(64px, 11vw, 150px); font-weight: 800; letter-spacing: .06em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 106, 0, .1);
}
.site-footer .wrap { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.35fr .85fr .85fr 1.1fr 1fr; gap: 40px; padding-bottom: 54px; align-items: start; }
.footer-col h4 {
  font-size: 14px; color: var(--ink); margin-bottom: 17px; font-weight: 700; letter-spacing: .01em;
  display: flex; align-items: center; gap: 8px;
}
.footer-col h4::before {
  content: ""; width: 4px; height: 14px; border-radius: 2px; flex: 0 0 auto;
  background: linear-gradient(180deg, #ff8a2a, var(--brand));
  box-shadow: 0 0 8px rgba(255, 106, 0, .5);
}
.footer-about { margin-top: 20px; font-size: 13.5px; line-height: 1.9; color: var(--muted); max-width: 34ch; }
/* 品牌能力标签 */
.footer-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.footer-tags span {
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px; color: var(--ink-2);
  border: 1px solid var(--line-strong); background: rgba(255, 106, 0, .05);
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.footer-tags span:hover { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); }
.footer-col a, .footer-col p { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 11px; transition: color .18s var(--ease); }
.footer-col a:hover { color: var(--brand); }
/* 页脚重点链接：橙色胶囊徽标（「游戏美术服务 / 特效创新中心」强调位） */
.footer-col a.ft-hot {
  display: inline-flex; align-items: center; gap: 5px; margin: 0 6px 12px 0;
  padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: var(--brand) !important; border: 1px solid var(--brand-line); background: var(--brand-soft);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.footer-col a.ft-hot::before { content: "▸"; font-size: 11px; }
.footer-col a.ft-hot:hover {
  transform: translateY(-1px); background: rgba(255, 106, 0, .16);
  box-shadow: 0 4px 14px rgba(255, 106, 0, .22);
}
/* 联系方式行 */
.footer-col p.ft-line { display: flex; align-items: flex-start; gap: 6px; line-height: 1.7; }
.footer-cta {
  display: inline-flex !important; align-items: center; gap: 7px;
  margin-top: 8px; padding: 10px 20px; border-radius: 10px; font-weight: 700;
  color: #fff !important; border: 1px solid transparent;
  background: linear-gradient(135deg, #ff8a2a, var(--brand) 58%, #e85a00);
  box-shadow: 0 6px 18px rgba(255, 106, 0, .28);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.footer-cta i { font-style: normal; transition: transform .18s var(--ease); }
.footer-cta:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 10px 26px rgba(255, 106, 0, .38); }
.footer-cta:hover i { transform: translateX(3px); }
.site-footer .brand-name { color: var(--ink); }
.site-footer .brand-sub { color: var(--muted-2); }
.footer-bottom {
  border-top: 1px solid var(--line); padding: 20px 0; display: flex;
  justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted);
}
.footer-bottom a { transition: color .18s var(--ease); }
.footer-bottom a:hover { color: var(--ink); }
.footer-legal { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.icp-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--muted) !important; font-size: 12px;
}
.icp-pill:hover { color: var(--brand) !important; border-color: var(--brand-line); }

/* ---------- Back to top ----------
   右下角常驻：常显不隐藏，仅在导航抽屉打开时让位（见 body.nav-open 规则）。
   用 --btp-p（0~1 滚动进度）驱动 conic-gradient 进度环，无需额外 DOM。 */
.back-top {
  --btp-p: 0;
  position: fixed; right: 26px; bottom: 26px; z-index: 210;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .25s var(--ease), transform .25s var(--ease),
    color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), box-shadow .2s var(--ease);
}
/* 顶部时低调（半透明小一点），随滚动进度渐入为实心，提示「已经滚下来了」 */
.back-top:not(.scrolled) { opacity: .58; transform: scale(.92); }
.back-top:not(.scrolled):hover { opacity: 1; }
.back-top.scrolled { color: var(--ink); }
.back-top:hover {
  color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft);
  transform: scale(1.06); box-shadow: var(--shadow-lg);
}
.back-top:active { transform: scale(.94); transition-duration: .07s; }
.back-top:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.back-top svg { position: relative; z-index: 1; transition: transform .25s var(--ease); }
.back-top:hover svg { transform: translateY(-2px); }
/* 滚动进度环：仅滚动后显示，静止时不喧宾夺主 */
.back-top::before {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--btp-p) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 0 20px, #000 21px);
  mask: radial-gradient(circle, transparent 0 20px, #000 21px);
  opacity: 0; transition: opacity .25s var(--ease); pointer-events: none;
}
.back-top.scrolled::before { opacity: 1; }
/* 移动端导航抽屉打开时让位（≤1080 另有同规则，此处为桌面宽度下的兜底） */
body.nav-open .back-top { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- Toast ---------- */
/* 提示条在右下角，但须避开常驻的回到顶部按钮（46px + 26px 边距），
   否则 toast 会压住回顶按钮导致点不到 */
.toast-host { position: fixed; right: 22px; bottom: 84px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  min-width: 244px; max-width: 344px; padding: 14px 17px; border-radius: 14px;
  background: rgba(23, 18, 14, .96); color: #fff; font-size: 14px;
  box-shadow: var(--shadow-lg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; gap: 10px; align-items: flex-start; line-height: 1.65;
  animation: toast-in .24s var(--ease) both;
}
.toast.ok { background: rgba(12, 46, 30, .97); }
.toast.err { background: rgba(58, 17, 19, .97); }
.toast.warn { background: rgba(58, 45, 13, .97); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Modal ---------- */
.modal-host { position: fixed; inset: 0; z-index: 300; display: none; }
.modal-host.open { display: block; }
.modal-mask { position: absolute; inset: 0; background: rgba(23, 18, 14, .52); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal {
  position: relative; width: calc(100% - 40px); max-width: 620px; margin: 7vh auto 40px;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  max-height: 86vh; display: flex; flex-direction: column; overflow: hidden;
  animation: modal-in .26s var(--ease) both;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.984); } to { opacity: 1; transform: none; } }
.modal-head { padding: 23px 27px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; gap: 16px; }
.modal-head h3 { font-size: 17px; flex: 1; letter-spacing: -.02em; }
.modal-head .modal-x {
  width: 34px; height: 34px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px;
  cursor: pointer; color: var(--muted); font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.modal-head .modal-x:hover { color: var(--ink); border-color: var(--line-strong); background: var(--bg-soft); }
.modal-body { padding: 25px 27px; overflow-y: auto; }
.modal-foot { padding: 19px 27px; border-top: 1px solid var(--line-2); display: flex; justify-content: flex-end; gap: 10px; background: var(--surface-2); }

/* ---------- Empty / loading ---------- */
.empty { text-align: center; padding: 72px 20px; color: var(--muted-2); }
.empty .e-ico { font-size: 40px; opacity: .45; margin-bottom: 15px; }
.empty p { font-size: 14px; }
/* 网格中的空态：卡片化收拢，避免裸文字显得空旷 */
.grid .empty, .news-list .empty {
  border: 1px dashed var(--line-2); border-radius: var(--radius-lg); background: var(--surface);
  padding: 54px 20px;
}

.skeleton {
  background: linear-gradient(90deg, #f4f0ec 25%, #ebe5df 37%, #f4f0ec 63%);
  background-size: 400% 100%; animation: sk 1.4s ease infinite; border-radius: 10px;
}
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.sk-card { height: 272px; border-radius: var(--radius); }

.spinner {
  width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Reveal ---------- */
/* 滚动淡入：失败安全 —— 默认可见；仅当 html.js-reveal（JS 成功挂上观察器）时才隐藏待入场 */
html.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js-reveal .reveal.in { opacity: 1; transform: none; }
html.no-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 52px; padding: 62px 0 58px; }
  .hero-visual { max-width: 540px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .split { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 860px) {
  .main-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    /* 页头 backdrop-filter 会成为 fixed 后代的包含块，bottom:0 会相对 68px 高的页头
       解析、把抽屉压成几十像素；改用视口单位高度，两种包含块场景下都正确 */
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    flex-direction: column; align-items: stretch; gap: 2px; padding: 14px 20px 26px;
    background: var(--surface); border-top: 1px solid var(--line); overflow-y: auto;
    transform: translateX(100%); transition: transform .28s var(--ease); margin-left: 0;
  }
  body.nav-open .main-nav { transform: none; }
  .main-nav a { padding: 13px 12px; font-size: 15.5px; border-radius: 12px; }
  .main-nav a.active::after { display: none; }
  .main-nav a.active { background: var(--brand-soft); }
  /* ---- 抽屉「快速联系」区块（电话 / 邮箱 / 在线留言）---- */
  .main-nav .nav-mobile-extra {
    display: block; margin-top: 12px; padding-top: 16px;
    border-top: 1px dashed var(--line-2);
  }
  .nav-x-label {
    display: block; margin: 0 12px 9px; font-size: 11px; font-weight: 600;
    letter-spacing: .14em; color: var(--muted-2);
  }
  .main-nav .nav-x-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; margin-bottom: 6px; font-size: 15.5px;
    background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px;
  }
  .main-nav .nav-x-item:active { background: var(--brand-soft); border-color: var(--brand-line); }
  .nav-x-item .nx-ic { flex: none; color: var(--brand); }
  .nav-x-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .nav-x-txt b {
    font-size: 14px; font-weight: 650; color: var(--ink); letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nav-x-txt i { font-style: normal; font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }
  /* ---- 汉堡按钮 ↔ X 开关动画 ---- */
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    transition: transform .24s var(--ease), top .24s var(--ease), background .18s var(--ease);
  }
  body.nav-open .nav-toggle span { background: transparent; }
  body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
  body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }
  body.nav-open .back-top { opacity: 0; visibility: hidden; pointer-events: none; }
  .nav-toggle { display: flex; margin-left: auto; }
  .header-actions { margin-left: 0; flex: none; }
  .header-search { display: none; }
  /* 窄屏：品牌区可收缩并截断，避免把页头操作区挤出视口 */
  .site-header .wrap { gap: 12px; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-text { min-width: 0; }
  .brand-name, .brand-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .news-item { grid-template-columns: 62px 1fr; gap: 16px; }
  .news-item .ni-go { display: none; }
  .search-box { margin-left: 0; width: 100%; }
  .search-box input { width: 100%; }
  .art-sub { left: -18px; width: 46%; }
  .art-ribbon { right: -6px; top: -14px; }
  .hero-float { right: -8px; }
  /* 首屏间距收紧（承接 1024 单列布局） */
  .hero-grid { padding: 48px 0 44px; gap: 40px; }

  /* ---- 移动端 / 平板触控热区扩展：负外边距抵消padding，视觉布局不变、可点区域变大 ---- */
  .card-link { padding: 9px 12px; margin: -9px -12px; }
  .page-head .crumb a { display: inline-block; padding: 7px 6px; margin: -7px -6px; }
  .site-footer .footer-col a { padding: 8px 0; margin-bottom: 2px; }
  .footer-bottom a { display: inline-block; padding: 9px 2px; margin: -9px 0; }
  .link, .link-btn { display: inline-block; padding: 7px 2px; margin: -7px 0; }
  /* ---- 平板抽屉：链接行限宽居中，避免 768px 下右侧大片留空 ---- */
  .main-nav a, .nav-mobile-extra, .nav-cta { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
  /* ---- 抽屉底部登录入口（未登录时由 JS 移除 hidden）---- */
  .nav-cta:not([hidden]) {
    display: flex; align-items: center; justify-content: center;
    margin-top: auto; padding: 13px 20px; border-radius: 12px;
    background: linear-gradient(180deg, var(--brand), #f2760a); color: #fff;
    font-size: 15px; font-weight: 600; letter-spacing: .02em;
    box-shadow: 0 10px 22px -12px rgba(255, 122, 10, .55);
  }
}

@media (max-width: 620px) {
  .wrap { padding: 0 18px; }
  .section { padding: 46px 0; }
  .page-head { padding: 34px 0 30px; }
  .back-top { right: 18px; bottom: 18px; width: 42px; height: 42px; }
  /* 移动端同步上移提示条，避开回顶按钮 */
  .toast-host { bottom: 72px; }
  /* 静止态有 scale(.92)，故 42×0.92≈39px 为预期视觉值；hover/滚动后回到 42px */
  /* 尺寸变化后同步进度环内径，避免环被遮罩切错 */
  .back-top::before {
    -webkit-mask: radial-gradient(circle, transparent 0 18px, #000 19px);
    mask: radial-gradient(circle, transparent 0 18px, #000 19px);
  }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .quick-entry { grid-template-columns: 1fr; gap: 14px; }
  .stat-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-card { padding: 20px 17px; }
  .stat-card .sc-num { font-size: 25px; }
  /* ---- 首屏紧凑化：间距收紧 + 数据条面板化 ---- */
  .hero-grid { padding: 34px 0 40px; gap: 32px; }
  .hero h1 { margin-top: 15px; }
  .hero-lead { margin-top: 14px; font-size: 14.5px; line-height: 1.72; }
  .hero-cta { margin-top: 24px; gap: 10px; }
  .hero-cta .btn { flex: 1 1 44%; justify-content: center; }
  .hero-stats {
    gap: 12px 16px; margin-top: 26px; padding: 16px 15px 14px;
    justify-content: space-between;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--surface); box-shadow: var(--shadow-sm);
  }
  .hero-stats .hs-num { font-size: 23px; }
  .hero-stats .hs-label { font-size: 12px; white-space: nowrap; margin-top: 2px; }
  .hero-visual { max-width: 460px; margin-inline: auto; }
  .art-sub { left: -10px; bottom: 0; width: 50%; border-radius: 13px; }
  .art-ribbon { display: none; }
  .hero-float { position: static; margin-top: 16px; width: 100%; }
  .hero-visual { padding-bottom: 0; }
  .mq-item { padding: 0 16px; font-size: 12.5px; }
  .form-card { padding: 24px 18px; }
  .cta-panel { padding: 32px 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .field-row { grid-template-columns: 1fr; }
  .auth-head, .tabs, .auth-body { padding-left: 20px; padding-right: 20px; }
  .tab { margin-right: 16px; }
  .news-item { grid-template-columns: 54px 1fr; gap: 14px; padding: 18px 0; }
  .news-item::before { inset: 6px -12px; }
  /* ---- 手机端工具条按钮触控热区放大（w11：按钮放大，方便点击）---- */
  .fm-toolbar .btn { padding-top: 11px; padding-bottom: 11px; }
}

.nav-mobile-extra { display: none; }

/* 抽屉底部登录入口：仅 ≤860px 抽屉态且未登录时显示 */
.nav-cta { display: none; }

/* ---------- 降级动画偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  /* 跑马灯为持续滚动动画，按需求保留：!important 压过下方全局 .01ms 降级 */
  .marquee-track { animation: mq 42s linear infinite !important; }
  .eyebrow i { animation: none; }
  .skeleton { animation: none; }
  .btn:hover, .card:hover, .value-card:hover, .stat-card:hover { transform: none; }
  .card:hover .card-media img { transform: none; }
  .art-stack:hover .art-sub { transform: rotate(-3.2deg); }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- QQ 咨询 / QQ 邮箱补全 ---------- */
.qq-consult {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(240px 120px at 12% 0%, rgba(255,106,0,.08), transparent 60%),
    var(--surface, #fff);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.qq-consult:hover {
  border-color: rgba(255,106,0,.38);
  box-shadow: 0 6px 18px -8px rgba(255,106,0,.25);
  transform: translateY(-1px);
}
.qq-consult .qq-ico {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  font-size: 21px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff3e8, #ffe3cc);
}
.qq-consult .qq-txt { flex: 1; min-width: 0; }
.qq-consult .qq-txt strong { display: block; font-size: 14.5px; }
.qq-consult .qq-txt span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted, #6b7280); }
.qq-consult .qq-txt b { color: var(--brand, #ff6a00); font-variant-numeric: tabular-nums; }
.qq-consult.hidden, .qq-fill.hidden { display: none !important; }

.qq-fill {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .qq-consult { flex-wrap: wrap; }
  .qq-consult .btn { width: 100%; }
}

/* ==========================================================================
   商城中心 / 订单 / 支付
   ========================================================================== */

.goods-card .card-media img { aspect-ratio: 16 / 10; }

.price-row { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.price { color: var(--brand); font-weight: 750; font-size: 20px; letter-spacing: -.02em; }
.price-old { color: var(--muted-2); font-size: 13px; text-decoration: line-through; }
.sales-count { margin-left: auto; color: var(--muted-2); font-size: 12.5px; }

/* 下单弹窗 */
.buy-goods { display: flex; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--line-2); }
.buy-goods img { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; }
.pay-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px;
  padding-top: 12px; border-top: 1px dashed var(--line-strong); margin-top: 6px; color: var(--muted); }
.pay-total strong { font-size: 22px; color: var(--brand); font-weight: 750; }

/* 支付面板 */
.pay-amount { display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 16px; border-radius: 12px; background: var(--brand-soft); border: 1px solid var(--brand-line); }
.pay-amount span { color: var(--ink-2); font-size: 13.5px; }
.pay-amount strong { color: var(--brand); font-size: 26px; font-weight: 750; letter-spacing: -.02em; }
.pay-order-no { margin-top: 12px; font-size: 13px; color: var(--muted); }
.pay-order-no b { color: var(--ink-2); font-family: ui-monospace, monospace; letter-spacing: .02em; }
.pay-qr { text-align: center; margin-top: 16px; }
.pay-qr img { width: 190px; height: 190px; object-fit: contain; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); padding: 8px; }
.pay-qr p { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.pay-account { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--line-strong);
  border-radius: 10px; font-size: 13.5px; color: var(--ink-2); display: grid; gap: 6px; }
.pay-note { margin-top: 12px; font-size: 12.5px; color: var(--muted); line-height: 1.8; }

/* 订单行 */
.order-row { display: flex; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.order-row:last-child { border-bottom: none; }
.or-main { min-width: 0; flex: 1; }
.or-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-meta { font-size: 12px; color: var(--muted-2); margin-top: 4px; font-family: ui-monospace, monospace; }
.or-side { text-align: right; flex: none; }
.or-amount { font-size: 15px; font-weight: 700; color: var(--brand); margin-top: 4px; }

/* 页脚备案号 */
.icp-link { color: inherit; text-decoration: none; }
.icp-link:hover { color: var(--brand); }

/* ==========================================================================
   品牌徽标（logo）与二维码 / 简化版首页
   ========================================================================== */

/* 页头 / 页脚 / 后台的品牌位：用裁剪后的风车徽标 */
.brand-mark { overflow: hidden; }
.brand-mark img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
}

/* 首页简化版 Hero 视觉：品牌面板 */
.logo-panel {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 54px 40px;
  border-radius: 28px;
  background:
    radial-gradient(420px 300px at 78% 12%, rgba(255, 143, 60, .22), transparent 62%),
    radial-gradient(320px 240px at 12% 88%, rgba(255, 106, 0, .14), transparent 58%),
    linear-gradient(160deg, #1d150e 0%, #120d09 62%, #1a120b 100%);
  border: 1px solid rgba(255, 143, 60, .22);
  box-shadow: 0 34px 70px -38px rgba(28, 16, 4, .68), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.logo-panel::before {
  content: ''; position: absolute; inset: 10px; border-radius: 20px;
  border: 1px dashed rgba(255, 154, 84, .18); pointer-events: none;
}
.logo-panel .lp-mark {
  width: clamp(132px, 15vw, 176px); height: auto; border-radius: 22px;
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .8);
}
.logo-panel .lp-name { color: #fff7ef; font-size: clamp(22px, 2.6vw, 28px); font-weight: 750; letter-spacing: .12em; }
.logo-panel .lp-en { color: rgba(255, 190, 138, .66); font-size: 11.5px; letter-spacing: .34em; text-transform: uppercase; }

/* 页脚二维码（发光卡片） */
.footer-qr .qr-row { display: flex; gap: 16px; }
.qr-item { margin: 0; text-align: center; }
.qr-frame {
  display: block; padding: 5px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--surface);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.qr-item:hover .qr-frame {
  border-color: var(--brand-line); transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(255, 106, 0, .22);
}
.qr-item img {
  width: 88px; height: 88px; object-fit: cover; display: block; border-radius: 8px; background: #fff; padding: 4px;
}
.qr-item figcaption { margin-top: 8px; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.qr-tip { margin-top: 12px; font-size: 11.5px; color: var(--muted-2); line-height: 1.7; }

/* 联系页二维码卡片 */
.qr-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.qr-card {
  margin: 0; padding: 22px 18px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.qr-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(28, 16, 4, .4); }
.qr-card img {
  width: 96px; height: 96px; object-fit: cover; display: block; margin: 0 auto;
  border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); padding: 5px;
}
.qr-card figcaption { margin-top: 12px; display: grid; gap: 4px; }
.qr-card strong { font-size: 14px; color: var(--ink); }
.qr-card span { font-size: 12px; color: var(--muted); }

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   动效增强
   ========================================================================== */

html { scroll-behavior: smooth; }

/* ---------- 1. Hero 入场编排：文案自上而下错落浮现 ---------- */
.hero-copy > * {
  animation: hero-in .85s cubic-bezier(.22, .75, .3, 1) both;
}
.hero-copy > *:nth-child(1) { animation-delay: .05s; }
.hero-copy > *:nth-child(2) { animation-delay: .16s; }
.hero-copy > *:nth-child(3) { animation-delay: .27s; }
.hero-copy > *:nth-child(4) { animation-delay: .38s; }
.hero-copy > *:nth-child(5) { animation-delay: .49s; }
.hero-copy > *:nth-child(n+6) { animation-delay: .6s; }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* Hero 品牌面板：入场 + 轻微回弹 */
.hero-visual { animation: hero-panel 1.1s cubic-bezier(.2, .8, .25, 1.08) .3s both; }
@keyframes hero-panel {
  from { opacity: 0; transform: translateY(34px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* ---------- 2. 风车慢转 + 光晕呼吸（契合品牌符号） ---------- */
.logo-panel .lp-mark {
  animation:
    windmill 56s linear infinite,
    lp-glow 5.5s ease-in-out infinite;
  will-change: transform;
}
.logo-panel:hover .lp-mark {
  animation-duration: 10s, 2.6s;
}
@keyframes windmill { to { transform: rotate(360deg); } }
@keyframes lp-glow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 140, 40, .22)); }
  50% { filter: drop-shadow(0 0 26px rgba(255, 140, 40, .5)); }
}

/* ---------- 3. 按钮光泽扫过 ---------- */
.btn { position: relative; overflow: hidden; z-index: 0; }
.btn::after {
  content: ''; position: absolute; top: -2px; bottom: -2px; left: -75%; width: 46%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg); transition: left .55s ease; pointer-events: none;
}
.btn:hover::after { left: 128%; }
.btn-ghost::after {
  background: linear-gradient(105deg, transparent, rgba(255, 106, 0, .16), transparent);
}

/* ---------- 4. 卡片悬浮：橙色光圈 + 深阴影 ---------- */
.card { will-change: transform; }
.card:hover {
  border-color: rgba(255, 122, 26, .45);
  box-shadow:
    0 30px 60px -30px rgba(255, 106, 0, .26),
    0 0 0 1px rgba(255, 122, 26, .1);
}
.card-media img { transition: transform .7s cubic-bezier(.22, .75, .3, 1); }

/* ---------- 5. 导航链接下划线生长（active 已用 ::after，这里用 ::before） ---------- */
.main-nav a { position: relative; }
.main-nav a::before {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 7px; height: 2px;
  border-radius: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s var(--ease);
}
.main-nav a:hover::before { transform: scaleX(1); }
.main-nav a.active::before { transform: scaleX(1); opacity: .35; }
@media (max-width: 1024px) {
  .main-nav a::before { display: none; }
}

/* ---------- 6. 页脚链接箭头位移 ---------- */
.site-footer .footer-col a { transition: color .2s var(--ease), padding-left .2s var(--ease); }
.site-footer .footer-col a:hover { padding-left: 4px; }

/* ---------- 7. sec-kicker 入场微动 ---------- */
.sec-head .sec-kicker { display: inline-block; }
.reveal.in .sec-kicker { animation: kicker-pop .55s cubic-bezier(.2, .8, .3, 1.1) both; }
@keyframes kicker-pop {
  from { opacity: 0; transform: translateY(8px) scale(.94); }
  to { opacity: 1; transform: none; }
}

/* ---------- 动效减弱偏好：全部关闭 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-copy > *, .hero-visual, .logo-panel .lp-mark { animation: none !important; }
  .btn::after { display: none; }
  .main-nav a::before { transition: none; }
  .reveal.in .sec-kicker { animation: none; }
}

/* ==========================================================================
   科幻光标特效层（site.js → initSciFiFX）
   浅色主题下的轻量科幻感：指针光晕 + 四角瞄准环 + 移动粒子 + 卡片柔光 + 点击涟漪
   全部 pointer-events:none，层级 150（在吸顶页头之上、弹窗/提示之下）
   ========================================================================== */
.fx-layer {
  position: fixed; inset: 0; pointer-events: none;
  z-index: 150; overflow: hidden; contain: strict;
}

/* ① 指针光晕 */
.fx-aura {
  position: absolute; left: 0; top: 0; width: 230px; height: 230px; margin: -115px 0 0 -115px;
  border-radius: 50%; opacity: 0; transition: opacity .5s ease; will-change: transform;
  background: radial-gradient(circle,
    rgba(255, 106, 0, .11) 0%, rgba(255, 140, 45, .05) 40%, rgba(255, 106, 0, 0) 72%);
}
.fx-layer.is-on .fx-aura { opacity: 1; }

/* ② 四角瞄准环 */
.fx-reticle {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  opacity: 0; will-change: transform;
  transition: opacity .3s ease, width .25s var(--ease), height .25s var(--ease),
              margin .25s var(--ease);
}
.fx-layer.is-on .fx-reticle { opacity: 1; }
.fx-reticle i {
  position: absolute; width: 7px; height: 7px; border-radius: 1px;
  border: 1px solid rgba(30, 200, 220, .8); transition: border-color .25s var(--ease);
}
.fx-reticle i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.fx-reticle i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.fx-reticle i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.fx-reticle i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.fx-reticle::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: rgba(255, 106, 0, .85);
  transition: background .25s var(--ease);
}
/* 悬停可交互元素：瞄准环张开并转青色 */
.fx-reticle.on-link { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
.fx-reticle.on-link i { border-color: rgba(255, 106, 0, .9); }
.fx-reticle.on-link::after { background: rgba(30, 200, 220, .95); }

/* ③ 移动粒子 */
.fx-dot {
  position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform, opacity;
  background: #ff7a1a; box-shadow: 0 0 6px rgba(255, 122, 26, .4);
}
.fx-dot.cyan { background: #1ec8dc; box-shadow: 0 0 6px rgba(30, 200, 220, .36); }

/* ④ 点击涟漪 */
.fx-ring {
  position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; border: 1px solid rgba(255, 106, 0, .45);
  box-shadow: 0 0 14px rgba(255, 106, 0, .15); will-change: transform, opacity;
}

/* ⑤ 卡片柔光高光：跟随指针的冷调光斑（浅色底上仅作淡淡一层） */
.card, .form-card { position: relative; }
.card::after, .value-card::after, .form-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(230px circle at var(--fx-x, 50%) var(--fx-y, 50%),
    rgba(30, 200, 220, .095), rgba(255, 106, 0, .05) 45%, rgba(255, 106, 0, 0) 72%);
}
.card:hover::after, .value-card:hover::after, .form-card:hover::after { opacity: 1; }

/* 触摸设备 / 减弱动效偏好：整层不出现 */
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .fx-layer { display: none; }
  .card::after, .value-card::after, .form-card::after { display: none; }
}

/* ==========================================================================
   科幻界面氛围层（site.js → initAmbientFX）
   常驻的、不依赖鼠标的界面级科幻基底：
   ① 科技网格 ② 漂浮光斑 ③ 扫描光带 ④ HUD 角标 ⑤ 滚动进度 ⑥ 卡片四角角标
   层级：氛围层 z-index 0，正文抬到 1（氛围只做背景，绝不遮挡内容与交互）；进度条 160
   ========================================================================== */
main, .site-footer { position: relative; z-index: 1; }

.fx-amb { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* ① 科技网格：细格 + 每 5 格一条橙色主线（顶部略浓、四周渐隐） */
.amb-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(28, 20, 12, .029) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 20, 12, .029) 1px, transparent 1px),
    linear-gradient(rgba(255, 106, 0, .034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 106, 0, .034) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px, 230px 230px, 230px 230px;
  -webkit-mask-image: radial-gradient(135% 92% at 50% 0%, #000 0%, rgba(0, 0, 0, .62) 48%, rgba(0, 0, 0, .16) 82%, transparent 100%);
  mask-image: radial-gradient(135% 92% at 50% 0%, #000 0%, rgba(0, 0, 0, .62) 48%, rgba(0, 0, 0, .16) 82%, transparent 100%);
}

/* ② 漂浮光斑：暖橙 + 冷青，缓慢漂移 */
.amb-glow { position: absolute; border-radius: 50%; will-change: transform; }
.amb-glow-a {
  width: 640px; height: 640px; left: -160px; top: -190px;
  background: radial-gradient(circle, rgba(255, 106, 0, .09), rgba(255, 140, 60, .034) 44%, transparent 72%);
  animation: amb-drift-a 48s ease-in-out infinite;
}
.amb-glow-b {
  width: 560px; height: 560px; right: -140px; bottom: -170px;
  background: radial-gradient(circle, rgba(30, 200, 220, .075), rgba(30, 200, 220, .024) 44%, transparent 72%);
  animation: amb-drift-b 64s ease-in-out infinite;
}
@keyframes amb-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(130px, 96px, 0); }
}
@keyframes amb-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-120px, -84px, 0); }
}

/* ③ 扫描光带：一条极淡的橙色光带自上而下缓慢掠过 */
.amb-scan {
  position: absolute; left: 0; right: 0; top: -220px; height: 220px;
  background: linear-gradient(180deg, transparent, rgba(255, 106, 0, .034) 58%, rgba(255, 140, 60, .088) 90%, transparent);
  animation: amb-scan 15s linear infinite;
}
@keyframes amb-scan {
  0% { transform: translateY(0); }
  100% { transform: translateY(calc(100vh + 220px)); }
}

/* ④ HUD 角标：视口四角的科技刻度线 */
.amb-hud i {
  position: absolute; width: 30px; height: 30px;
  border: 1px solid rgba(255, 106, 0, .21);
}
.amb-hud i::after {
  content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 106, 0, .35); animation: amb-pulse 3.2s ease-in-out infinite;
}
.amb-hud i:nth-child(1) { left: 20px; top: calc(var(--header-h) + 16px); border-right: 0; border-bottom: 0; }
.amb-hud i:nth-child(1)::after { left: -2px; top: -2px; }
.amb-hud i:nth-child(2) { right: 20px; top: calc(var(--header-h) + 16px); border-left: 0; border-bottom: 0; }
.amb-hud i:nth-child(2)::after { right: -2px; top: -2px; animation-delay: .8s; }
.amb-hud i:nth-child(3) { left: 20px; bottom: 20px; border-right: 0; border-top: 0; }
.amb-hud i:nth-child(3)::after { left: -2px; bottom: -2px; animation-delay: 1.6s; }
.amb-hud i:nth-child(4) { right: 20px; bottom: 20px; border-left: 0; border-top: 0; }
.amb-hud i:nth-child(4)::after { right: -2px; bottom: -2px; animation-delay: 2.4s; }
@keyframes amb-pulse {
  0%, 100% { opacity: .25; transform: scale(.7); }
  50% { opacity: .9; transform: scale(1.15); }
}

/* ⑤ 滚动进度条：品牌橙 → 青，顶部 2px */
.fx-progress {
  position: fixed; left: 0; top: 0; height: 2px; width: 0; z-index: 160;
  pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: linear-gradient(90deg, var(--brand), var(--brand-light) 62%, #1ec8dc);
  box-shadow: 0 0 10px rgba(255, 106, 0, .34);
}
.fx-progress.on { opacity: 1; }

/* ⑥ 卡片四角科技角标：悬停时四角亮起（::after 已用于柔光，这里用 ::before） */
.card::before, .value-card::before, .form-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity .38s var(--ease); z-index: 2;
  background:
    linear-gradient(var(--brand), var(--brand)) left top / 15px 1.5px no-repeat,
    linear-gradient(var(--brand), var(--brand)) left top / 1.5px 15px no-repeat,
    linear-gradient(var(--brand), var(--brand)) right top / 15px 1.5px no-repeat,
    linear-gradient(var(--brand), var(--brand)) right top / 1.5px 15px no-repeat,
    linear-gradient(var(--brand), var(--brand)) left bottom / 15px 1.5px no-repeat,
    linear-gradient(var(--brand), var(--brand)) left bottom / 1.5px 15px no-repeat,
    linear-gradient(var(--brand), var(--brand)) right bottom / 15px 1.5px no-repeat,
    linear-gradient(var(--brand), var(--brand)) right bottom / 1.5px 15px no-repeat;
}
.card:hover::before, .value-card:hover::before, .form-card:hover::before { opacity: .85; }

/* ⑦ 眉标/小节的脉冲指示灯 */
.eyebrow i { animation: amb-pulse 2.6s ease-in-out infinite; }

/* 触摸设备：只留静态网格与光斑，去掉扫描带与 HUD（省电） */
@media (pointer: coarse) {
  .amb-scan, .amb-hud { display: none; }
  .amb-glow { animation: none; }
}

/* 减弱动效偏好：全部静态化 */
@media (prefers-reduced-motion: reduce) {
  .fx-amb { display: none; }
  .fx-progress { display: none; }
  .card::before, .value-card::before, .form-card::before { display: none; }
  .eyebrow i { animation: none; }
}

/* ==========================================================================
   全息交互特效（site.js → initHoloFX）—— 可交互的科幻层（仅桌面端）
   ① 光标推挤网格 + 点击冲击波（canvas 接管 .amb-grid 的绘制）
   ② 卡片 / 面板 3D 倾斜（跟随指针）   ③ 按钮磁吸（被指针轻微吸引）
   ④ 左下角系统 HUD 面板（实时数据，可点击折叠）  ⑤ 点击扫描读数标签
   停用：prefers-reduced-motion、纯触摸设备、窄屏（此时静态网格继续生效）
   ========================================================================== */

/* ① 交互网格 canvas：与 .amb-grid 同参数（46px 细格 / 230px 主线），同样的顶部渐隐遮罩 */
.fx-grid-cv {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(135% 92% at 50% 0%, #000 0%, rgba(0, 0, 0, .62) 48%, rgba(0, 0, 0, .16) 82%, transparent 100%);
  mask-image: radial-gradient(135% 92% at 50% 0%, #000 0%, rgba(0, 0, 0, .62) 48%, rgba(0, 0, 0, .16) 82%, transparent 100%);
}
html.fx-cv .amb-grid { opacity: 0; }

/* ② 3D 倾斜：JS 写入 --tilt-x / --tilt-y（选择器特异性高于 :hover，保留原有抬升） */
.card.is-tilt, .goods-card.is-tilt, .value-card.is-tilt, .info-item.is-tilt,
.hero-card.is-tilt, .logo-panel.is-tilt, .timeline.is-tilt {
  transform: perspective(1000px) translateY(-5px)
    rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1.006);
}

/* ③ 按钮磁吸：JS 写独立的 translate 属性，不干扰既有 transform 过渡 */
.btn, .chip, .theme-toggle { will-change: translate; }

/* 触摸设备 / 减弱动效偏好：整个交互层不出现 */
@media (pointer: coarse) {
  .fx-grid-cv { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-grid-cv { display: none; }
}

/* ==========================================================================
   深色主题（html[data-theme="dark"]）—— 夜间主题
   theme.js 按时间自动选择：白天(06:00–18:00)浅色，夜间深色；
   访客也可在页头按钮手动固定为浅色 / 深色（三态循环）
   ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;            /* 原生控件（滚动条 / 下拉 / 自动填充）跟随深色 */

  --brand: #ff7a1f;
  --brand-dark: #ff8f42;         /* 深底上作文字色，提亮保证对比度 */
  --brand-light: #ffa95c;
  --brand-soft: rgba(255, 122, 31, .13);
  --brand-line: rgba(255, 122, 31, .3);
  --brand-glow: rgba(255, 122, 31, .24);

  --mm-c1: #ff8f42;
  --mm-c2: #5fa8f5;
  --mm-c3: #4ecb8d;
  --mm-c4: #35c2ce;
  --mm-c5: #a08cf7;
  --mm-c6: #ef7ba9;

  --ink: #f6f1eb;
  --ink-2: #c9c0b7;
  --muted: #988f88;
  --muted-2: #726a63;

  --bg: #1f1c1a;
  --bg-soft: #26221f;
  --bg-warm: #2e2928;
  --bg-deep: #171615;

  --surface: #282421;
  --surface-2: #2e2928;
  --surface-3: #2a2623;
  --hi: rgba(255, 255, 255, .045);

  --line: #3b3531;
  --line-2: #322d2a;
  --line-strong: #4d453f;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .6);
  --shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 14px 32px -14px rgba(0, 0, 0, .8);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, .55), 0 36px 68px -30px rgba(0, 0, 0, .9);
  --shadow-brand: 0 14px 30px -16px rgba(255, 122, 31, .5);
}

/* 页头：深色毛玻璃 */
html[data-theme="dark"] .site-header { background: rgba(31, 28, 26, .8); }
html[data-theme="dark"] .site-header.is-stuck {
  background: rgba(31, 28, 26, .93);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 12px 28px -22px rgba(0, 0, 0, .9);
}

/* Hero：深色光晕 + 亮色网格 */
html[data-theme="dark"] .hero {
  background:
    radial-gradient(760px 440px at 6% -14%, rgba(255, 122, 31, .18), transparent 62%),
    radial-gradient(640px 400px at 98% 2%, rgba(255, 168, 84, .1), transparent 60%),
    radial-gradient(1000px 520px at 46% 122%, rgba(150, 102, 62, .14), transparent 68%),
    linear-gradient(180deg, #25201d 0%, #1f1c1a 100%);
}
html[data-theme="dark"] .hero::after {
  background-image: linear-gradient(rgba(255, 255, 255, .038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .038) 1px, transparent 1px);
}

/* 登录 / 注册页背景 */
html[data-theme="dark"] .auth-wrap {
  background:
    radial-gradient(700px 380px at 8% -20%, rgba(255, 122, 31, .12), transparent 62%),
    radial-gradient(620px 340px at 96% 110%, rgba(255, 168, 84, .1), transparent 60%),
    linear-gradient(180deg, #24201e, #1f1c1a);
}

/* 状态色：深底上改为暗色底 + 亮字 */
html[data-theme="dark"] .badge.ok,
html[data-theme="dark"] .alert.ok { background: rgba(22, 163, 74, .16); border-color: rgba(34, 197, 94, .32); color: #6ee7a0; }
html[data-theme="dark"] .badge.warn,
html[data-theme="dark"] .alert.warn { background: rgba(217, 119, 6, .16); border-color: rgba(245, 158, 11, .32); color: #fbbf24; }
html[data-theme="dark"] .alert.err { background: rgba(220, 38, 38, .16); border-color: rgba(248, 113, 113, .32); color: #fca5a5; }

/* 骨架屏 */
html[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #2f2a28 25%, #3b3431 37%, #2f2a28 63%);
  background-size: 400% 100%;
}

/* 弹窗遮罩加深 */
html[data-theme="dark"] .modal-mask { background: rgba(0, 0, 0, .7); }

/* 图片：深底上略降亮度，避免刺眼 */
html[data-theme="dark"] .card-media img { filter: brightness(.95) contrast(1.02); }

/* 页脚与页面分层 */
html[data-theme="dark"] .site-footer { background: var(--bg-deep); }

/* 科幻氛围层：网格改亮线、光斑略提亮 */
html[data-theme="dark"] .amb-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .032) 1px, transparent 1px),
    linear-gradient(rgba(255, 122, 31, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 122, 31, .05) 1px, transparent 1px);
}
html[data-theme="dark"] .amb-glow-a {
  background: radial-gradient(circle, rgba(255, 122, 31, .15), rgba(255, 140, 60, .05) 44%, transparent 72%);
}
html[data-theme="dark"] .amb-glow-b {
  background: radial-gradient(circle, rgba(30, 200, 220, .11), rgba(30, 200, 220, .034) 44%, transparent 72%);
}
html[data-theme="dark"] .amb-hud i { border-color: rgba(255, 122, 31, .3); }
html[data-theme="dark"] .amb-scan {
  background: linear-gradient(180deg, transparent, rgba(255, 122, 31, .042) 58%, rgba(255, 140, 60, .11) 90%, transparent);
}

/* 指针特效：深色下粒子/瞄准环略微提亮 */
html[data-theme="dark"] .fx-aura {
  background: radial-gradient(circle,
    rgba(255, 122, 31, .14) 0%, rgba(255, 140, 45, .062) 40%, rgba(255, 122, 31, 0) 72%);
}

/* 滚动条（Chromium / Edge / Safari） */
html[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #221f1e; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #433b35; border-radius: 6px; border: 3px solid #221f1e;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #564840; }

/* ---------- 主题切换按钮（页头右侧） ---------- */
.theme-toggle {
  width: 38px; height: 38px; flex: none; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.theme-toggle:hover { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
/* 图标随按钮状态切换：自动（半明半暗）/ 浅色（太阳）/ 深色（月亮） */
.theme-toggle .tt-auto, .theme-toggle .tt-sun, .theme-toggle .tt-moon { display: none; }
.theme-toggle[data-mode="auto"] .tt-auto,
.theme-toggle[data-mode="light"] .tt-sun,
.theme-toggle[data-mode="dark"] .tt-moon { display: block; }

/* 子页头部横幅（商城 / 服务 / 关于 / 资源 / 联系 / 账号） */
html[data-theme="dark"] .page-head {
  background:
    radial-gradient(800px 340px at 4% -40%, rgba(255, 122, 31, .17), transparent 62%),
    radial-gradient(600px 300px at 96% -10%, rgba(255, 168, 84, .11), transparent 60%),
    linear-gradient(180deg, #24201e, #1f1c1a);
}
html[data-theme="dark"] .page-head::after {
  background-image: linear-gradient(rgba(255, 255, 255, .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .032) 1px, transparent 1px);
}

/* 零散细节 */
html[data-theme="dark"] .hero-card .hc-dot { background: rgba(255, 255, 255, .18); }
html[data-theme="dark"] .qq-consult .qq-ico { background: linear-gradient(135deg, rgba(255, 122, 31, .28), rgba(255, 106, 0, .16)); }

/* ==========================================================================
   选择反馈（文本选中 / 键盘聚焦）
   ========================================================================== */
::selection { background: rgba(255, 122, 31, .26); color: inherit; }
html[data-theme="dark"] ::selection { background: rgba(255, 122, 31, .38); color: #fff; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

/* ==========================================================================
   选中物体交互 —— 选择特效（site.js → initObjectPicker）
   点击页面上的「物体」（卡片 / 图片 / 二维码 / 统计块 / 按钮）时，三段式选择反馈：
   A 预选：鼠标悬停在可选中物体上 → 青色虚线框 + 四角刻度 + 「点击选中」提示
   B 选中：点击瞬间 → 四角括号收拢 + 双层光波外扩 + 十字准线展开 + 粒子迸发
                    + 扫描线掠过 + 「已选中 · 类型」标签 + 右下角 W × H 读数
   C 常驻：弹窗打开期间 → 品牌橙常驻选中框（四角括号 + 呼吸描边 + 角标/尺寸），
                    随滚动与元素位移实时贴合，弹窗关闭或再次点击即释放
   层级 155 —— 在吸顶页头之上、弹窗(300)之下；pointer-events:none，绝不拦截点击
   ========================================================================== */
.pick-layer { position: fixed; inset: 0; z-index: 155; pointer-events: none; overflow: hidden; }

.pick-lock {
  position: absolute; border-radius: 6px; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(30, 200, 220, .42), 0 0 26px rgba(30, 200, 220, .12);
  animation: pk-in .3s var(--ease) both, pk-out .45s ease 1.05s forwards;
}
@keyframes pk-in { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
@keyframes pk-out { to { opacity: 0; } }

.pick-lock .pk-c {
  position: absolute; width: 15px; height: 15px; border: 1.5px solid var(--brand);
  animation: pk-corner .34s var(--ease) both;
}
@keyframes pk-corner { from { opacity: 0; transform: scale(2.4); } to { opacity: 1; transform: scale(1); } }
.pick-lock .pk-c1 { left: -3px; top: -3px; border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; }
.pick-lock .pk-c2 { right: -3px; top: -3px; border-left: 0; border-bottom: 0; border-radius: 0 5px 0 0; }
.pick-lock .pk-c3 { left: -3px; bottom: -3px; border-right: 0; border-top: 0; border-radius: 0 0 0 5px; }
.pick-lock .pk-c4 { right: -3px; bottom: -3px; border-left: 0; border-top: 0; border-radius: 0 0 5px 0; }

.pick-lock .pk-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(30, 200, 220, .85), transparent);
  box-shadow: 0 0 10px rgba(30, 200, 220, .45);
  animation: pk-scan .6s linear both;
}
@keyframes pk-scan { from { top: 0; opacity: 1; } to { top: calc(100% - 2px); opacity: .18; } }

/* 图片预览 / 物体详情弹窗内的排版 */
.obj-preview {
  border-radius: 12px; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; min-height: 150px; max-height: 56vh;
}
.obj-preview img { display: block; max-width: 100%; max-height: 56vh; object-fit: contain; }
.obj-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-top: 16px; }
.obj-meta > div { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; }
.obj-meta span { display: block; font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.obj-meta b { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 600; color: var(--ink); word-break: break-all; }
.obj-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.obj-desc { margin-top: 14px; color: var(--ink-2); line-height: 1.9; font-size: 14px; }
.obj-kind {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line);
}
.obj-kind::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ---------- 选择特效：点击选中的强化动效 ---------- */
/* 双层光波：沿选框形状外扩（青 + 橙） */
.pick-lock .pk-wave {
  --wv: 30, 200, 220;
  position: absolute; inset: 0; border-radius: 7px; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(var(--wv), .5);
  animation: pk-wave .8s cubic-bezier(.22, .61, .36, 1) both;
}
.pick-lock .pk-wave.w2 { --wv: 255, 122, 31; animation-delay: .14s; }
@keyframes pk-wave {
  0% { box-shadow: 0 0 0 0 rgba(var(--wv), .5); opacity: 1; }
  100% { box-shadow: 0 0 0 18px rgba(var(--wv), 0); opacity: .28; }
}
/* 十字准线：横向青色、纵向橙色，自中心展开 */
.pick-lock .pk-ch-x {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30, 200, 220, .7), transparent);
  animation: pk-ch-x .48s var(--ease) both;
}
@keyframes pk-ch-x { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
.pick-lock .pk-ch-y {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 122, 31, .55), transparent);
  animation: pk-ch-y .48s var(--ease) .04s both;
}
@keyframes pk-ch-y { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
/* 粒子迸发：8 颗沿固定方向飞散 */
.pick-lock .pk-sp {
  position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 8px currentColor; color: var(--brand);
  animation: pk-sp .62s ease-out both;
}
.pick-lock .pk-sp.alt { background: #1ec8dc; color: #1ec8dc; }
@keyframes pk-sp {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); }
}
/* 右下角 HUD 读数已按需求移除（2026-10-05） */

/* ---------- 选择特效 C：弹窗期间的常驻选中框 ---------- */
.pick-hold {
  position: absolute; border-radius: 9px; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 122, 31, .45), 0 0 26px rgba(255, 122, 31, .10);
  animation: phd-in .28s var(--ease) both;
}
@keyframes phd-in { from { opacity: 0; } to { opacity: 1; } }
.pick-hold .phd-c { position: absolute; width: 16px; height: 16px; border: 1.5px solid var(--brand); }
.pick-hold .phd-c1 { left: -3px; top: -3px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.pick-hold .phd-c2 { right: -3px; top: -3px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.pick-hold .phd-c3 { left: -3px; bottom: -3px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.pick-hold .phd-c4 { right: -3px; bottom: -3px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
/* 「已选中 · xx」标签与尺寸读数已按需求移除（2026-10-05） */
.pick-hold::after {
  content: ''; position: absolute; inset: 0; border-radius: 9px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 122, 31, .2);
  animation: phd-breathe 1.9s ease-in-out infinite;
}
@keyframes phd-breathe { 0%, 100% { opacity: .3; } 50% { opacity: .95; } }

@media (prefers-reduced-motion: reduce) {
  .pick-layer { display: none; }
}

/* ==========================================================================
   学习笔记（notes.html）—— 左列表 + 右编辑器；数据由行级安全隔离到本人
   ========================================================================== */
.notes-app { display: grid; grid-template-columns: 316px minmax(0, 1fr); gap: 20px; align-items: start; }

/* 左：笔记列表 */
.notes-side {
  position: sticky; top: calc(var(--header-h) + 18px);
  display: flex; flex-direction: column; gap: 12px;
  max-height: calc(100vh - var(--header-h) - 44px);
  padding: 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.notes-side-head { display: flex; align-items: center; gap: 10px; }
.notes-side-head .btn { flex: 1; }
.notes-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.notes-search { width: 100%; }
.notes-list { overflow-y: auto; margin: -2px; padding: 2px; }

.notes-list-empty { padding: 22px 12px; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 2; }
.notes-list-empty span { color: var(--muted-2); font-size: 12.5px; }

.note-item {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  padding: 11px 13px; margin-bottom: 8px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface-2);
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.note-item:hover { border-color: var(--brand-line); }
.note-item.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand-line) inset; }
.note-item .ni-title {
  display: block; font-size: 14px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.note-item .ni-ex {
  display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); line-height: 1.6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.note-item .ni-meta { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted-2); font-family: var(--font-num); }

/* 右：编辑器 */
.notes-main { min-height: 460px; }
.notes-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 460px; padding: 40px 24px; text-align: center;
  border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-2);
}
.notes-empty .ne-ico { font-size: 34px; }
.notes-empty h3 { margin-top: 14px; font-size: 17px; color: var(--ink); }
.notes-empty p { margin-top: 8px; font-size: 13.5px; color: var(--muted); line-height: 1.9; }

.note-editor {
  display: flex; flex-direction: column; min-height: 460px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden;
}
.note-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--line-2); background: var(--surface-2);
}
.note-title-input {
  flex: 1 1 220px; min-width: 0; font: inherit; font-size: 16px; font-weight: 600;
  color: var(--ink); background: transparent; border: 0; outline: none; padding: 4px 0;
}
.note-title-input::placeholder { color: var(--muted-2); font-weight: 500; }
.note-actions { display: flex; align-items: center; gap: 8px; }
.note-status { font-size: 12px; color: var(--muted); white-space: nowrap; }
.note-status.ok { color: var(--ok); }
.note-status.warn { color: var(--warn); }
.note-status.err { color: var(--err); }
.note-del { color: var(--err); border-color: var(--line); }

.note-body {
  flex: 1; width: 100%; min-height: 320px; resize: vertical;
  padding: 18px; border: 0; outline: none; font: inherit; font-size: 14.5px; line-height: 1.95;
  color: var(--ink); background: var(--surface); tab-size: 2;
}
.note-body::placeholder { color: var(--muted-2); }
.note-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--line-2); background: var(--surface-2);
  font-size: 12px; color: var(--muted); font-family: var(--font-num);
}
.note-tip { color: var(--muted-2); font-family: var(--font); }

@media (max-width: 900px) {
  .notes-app { grid-template-columns: minmax(0, 1fr); }
  .notes-side { position: static; max-height: none; }
  .notes-list { max-height: 320px; }
  .note-body, .notes-empty, .notes-main { min-height: 240px; }
  .note-editor { min-height: 240px; }
}

/* ==========================================================================
   思维导图笔记（notes.html · 导图模式）
   数据仍是 lc_notes 一行，导图树序列化后存 mind 字段；
   画布为手写 SVG，颜色在渲染时从 CSS 变量取，深浅主题切换自动重绘。
   ========================================================================== */

/* 笔记形式切换：文本 / 思维导图 */
.notes-side-tools { display: flex; align-items: center; gap: 8px; }
.notes-side-tools .notes-search { flex: 1 1 auto; min-width: 0; }
.notes-side-tools .notes-count { flex: 0 0 auto; }

.note-kind { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.nk-btn {
  height: 28px; padding: 0 13px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.nk-btn:hover { color: var(--ink); }
.nk-btn.on { background-image: linear-gradient(180deg, #ff8226, #ff5f00); color: #fff; box-shadow: 0 8px 18px -12px rgba(255, 106, 0, .95); }

/* 列表项：形式徽章 */
.note-item .ni-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.note-item .ni-top .ni-title { flex: 1 1 auto; min-width: 0; }
.note-item .ni-kind {
  flex: 0 0 auto; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
}
.note-item .ni-kind.mind { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-dark); }

/* 编辑器分栏容器 */
.note-pane { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.note-textbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--line-2); background: var(--surface-3);
  font-size: 12.5px; color: var(--muted);
}

/* 工具栏 */
.mind-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 12px; border-bottom: 1px solid var(--line-2); background: var(--surface-2);
}
.mind-tb {
  height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink-2); font-size: 12.5px; cursor: pointer; white-space: nowrap;
  transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.mind-tb:hover { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-dark); }
.mind-tb:active { transform: translateY(1px); }
.mind-sep { width: 1px; height: 18px; margin: 0 3px; background: var(--line); }
.mind-spacer { flex: 1 1 auto; }
.mind-zoom { min-width: 48px; text-align: center; color: var(--muted); font-family: var(--font-num); font-size: 12px; }

/* 大纲 + 画布 */
.mind-stage { display: grid; grid-template-columns: 300px minmax(0, 1fr); flex: 1; min-height: 520px; }
.mind-outline { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line-2); background: var(--surface-3); }
.mo-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 1px solid var(--line-2);
  color: var(--ink-2); font-size: 12.5px; font-weight: 600;
}
.mo-head .mo-tip { color: var(--muted-2); font-size: 10.5px; font-weight: 400; line-height: 1.6; }
.mo-list { flex: 1; overflow: auto; padding: 8px 8px 24px; }

.mo-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  padding: 2px 4px 2px calc(4px + var(--d, 0) * 15px);
  border-radius: 8px;
}
.mo-row.on { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-line); }
.mo-toggle {
  flex: 0 0 18px; width: 18px; height: 18px; border: 0; border-radius: 5px;
  background: transparent; color: var(--muted-2); font-size: 10px; line-height: 1; cursor: pointer;
}
.mo-toggle.leaf { cursor: default; }
.mo-toggle:hover { background: var(--surface-2); }
.mo-input {
  flex: 1 1 60px; min-width: 0; height: 28px; padding: 0 7px;
  border: 1px solid transparent; border-radius: 7px; background: transparent;
  color: var(--ink); font: inherit; font-size: 13.5px; outline: none;
}
.mo-input::placeholder { color: var(--muted-2); }
.mo-input:focus { border-color: var(--brand-line); background: var(--surface); }
.mo-nbtn {
  flex: 0 0 20px; width: 20px; height: 20px; border: 0; border-radius: 5px;
  background: transparent; color: var(--muted-2); font-size: 11px; cursor: pointer;
}
.mo-nbtn:hover { background: var(--surface-2); color: var(--ink-2); }
.mo-nbtn.on { color: var(--brand); }
.mo-note {
  flex: 1 0 100%; height: 26px; max-width: calc(100% - 22px); margin: 0 0 2px 22px; padding: 0 7px;
  border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface);
  color: var(--muted); font: inherit; font-size: 12.5px; outline: none;
}
.mo-note:focus { border-color: var(--brand-line); color: var(--ink); }

/* 画布 */
.mind-canvas {
  position: relative; overflow: hidden; touch-action: none; cursor: grab;
  background-color: var(--surface);
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 22px 22px;
}
.mind-canvas.grabbing { cursor: grabbing; }
.mind-canvas svg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.mind-tip {
  position: absolute; left: 12px; bottom: 10px; padding: 4px 10px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-2);
  color: var(--muted-2); font-size: 11px; pointer-events: none;
}
.mm-node { cursor: pointer; }
.mm-node:hover rect { filter: brightness(1.04); }
.mm-tg { cursor: pointer; }
.mm-tg:hover circle { stroke: var(--brand); }

@media (max-width: 900px) {
  .mind-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: 250px minmax(340px, 1fr); min-height: 0; }
  .mind-outline { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .mind-tip { display: none; }
}

/* ---------- 导图增强：工具栏 / 菜单 / 状态 / 专注模式 / 帮助 ---------- */

/* 工具栏补充：图标按钮、布局分段、查找框、更多菜单 */
.mind-tb.mind-ico { width: 30px; padding: 0; text-align: center; font-size: 14px; line-height: 1; }
.mind-tb:disabled { opacity: .36; cursor: not-allowed; }
.mind-tb:disabled:hover { border-color: var(--line); background: var(--surface); color: var(--ink-2); }
.mind-tb.on { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-dark); }

.mind-modes { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.mind-tb.mk { height: 24px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; font-size: 12px; }
.mind-tb.mk:hover { background: var(--brand-soft); }
.mind-tb.mk.on { background-image: linear-gradient(180deg, #ff8226, #ff5f00); color: #fff; }

.mind-findbox { position: relative; display: inline-flex; align-items: center; }
.mind-find {
  width: 156px; height: 30px; padding: 0 46px 0 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--ink); font: inherit; font-size: 12.5px; outline: none;
}
.mind-find:focus { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-glow); }
.mind-find-n {
  position: absolute; right: 9px; color: var(--muted-2); font-size: 11px;
  font-family: var(--font-num); pointer-events: none;
}
.mind-more { display: inline-flex; }

/* 下拉菜单（fixed 定位：卡片是 overflow:hidden，绝对定位会被裁掉） */
.mind-menu {
  position: fixed; z-index: 400; min-width: 226px; max-height: 70vh; overflow: auto;
  padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 1px;
}
.mind-menu.hidden { display: none; }
.mind-menu > button {
  height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: 13px; text-align: left; cursor: pointer; white-space: nowrap;
}
.mind-menu > button:hover { background: var(--brand-soft); color: var(--brand-dark); }
.mind-menu .mm-hr { height: 1px; margin: 5px 6px; background: var(--line-2); }

/* 节点右键菜单 */
.mind-ctx {
  position: fixed; z-index: 410; min-width: 222px; padding: 6px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 1px;
}
.mind-ctx.hidden { display: none; }
.mind-ctx button {
  height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: 13px; text-align: left; cursor: pointer; white-space: nowrap;
}
.mind-ctx button:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand-dark); }
.mind-ctx button:disabled { opacity: .36; cursor: not-allowed; }
.mind-ctx .mm-hr { height: 1px; margin: 5px 6px; background: var(--line-2); }
.mind-ctx .mm-lbl { padding: 4px 10px 2px; color: var(--muted-2); font-size: 11px; }
.mind-ctx .mm-swatches, .mind-ctx .mm-icons { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 9px 5px; }
.mm-dot {
  width: 22px; height: 22px; padding: 0; border: 2px solid transparent; border-radius: 50%;
  background: var(--dot, var(--line-strong)); cursor: pointer;
}
.mm-dot.auto {
  background: var(--surface-2); border-color: var(--line); color: var(--muted);
  font-size: 11px; font-weight: 700;
}
.mm-dot.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
.mm-ic {
  width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); color: var(--ink-2); font-size: 13px; line-height: 1; cursor: pointer;
}
.mm-ic.on { border-color: var(--brand-line); background: var(--brand-soft); }

/* 节点状态：选中 / 查找命中 / 拖拽落点（CSS 优先级高于 SVG 内联属性，可直接覆盖描边） */
.mm-node { cursor: grab; }
.mm-node.on rect { stroke: var(--brand); stroke-opacity: 1; stroke-width: 2; }
.mm-node.hit rect { stroke-opacity: 1; stroke-dasharray: 5 3; }
.mm-node.hit.cur rect { stroke: var(--brand); stroke-opacity: 1; stroke-width: 2.4; stroke-dasharray: none; }
.mm-node.drop rect { stroke: var(--brand); stroke-opacity: 1; stroke-width: 2.6; }
.mm-node.drop rect + text { fill: var(--brand-dark); }
.mm-node.dragging { opacity: .5; }

/* 大纲行：查找命中 */
.mo-row.hit { box-shadow: inset 0 0 0 1px var(--brand-line); }
.mo-row.hit.cur { background: var(--brand-soft); }

/* 全屏专注模式 */
body.mm-focus { overflow: hidden; }
body.mm-focus #paneMind {
  position: fixed; inset: 0; z-index: 320; padding: 10px 14px 14px;
  background: var(--bg); border: 0;
}
body.mm-focus .mind-stage { min-height: 0; }
body.mm-focus .mind-tip { display: none; }

/* 导入文件 + 快捷键面板 */
.mind-file { display: none; }
.mind-help {
  position: fixed; inset: 0; z-index: 420; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(24, 16, 8, .5);
}
.mind-help.hidden { display: none; }
html[data-theme="dark"] .mind-help { background: rgba(0, 0, 0, .64); }
.mh-card {
  display: flex; flex-direction: column; width: min(1000px, 100%); max-height: min(86vh, 780px);
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.mh-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line-2);
}
.mh-head b { font-size: 15px; }
.mh-x {
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--muted); cursor: pointer;
}
.mh-x:hover { border-color: var(--brand-line); color: var(--brand-dark); }
.mh-body {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
  padding: 18px; overflow: auto;
}
.mh-col h4 { margin: 0 0 8px; font-size: 13px; color: var(--brand-dark); }
.mh-col h4 + p { margin-top: 0; }
.mh-col dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; margin: 0; }
.mh-col dt { color: var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
.mh-col dd { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.mh-col p, .mh-col li { color: var(--muted); font-size: 12.5px; line-height: 1.75; }
.mh-col ul { margin: 6px 0 0; padding-left: 18px; }
.mh-col code {
  padding: 1px 5px; border-radius: 5px; background: var(--surface-2);
  color: var(--brand-dark); font-family: var(--font-num); font-size: 11.5px;
}

@media (max-width: 900px) {
  .mh-body { grid-template-columns: minmax(0, 1fr); }
  .mind-find { width: 112px; }
  .mind-bar { padding: 8px 10px; }
}

/* ---------- QQ 快捷登录 ---------- */
.qq-login { margin-top: 22px; }
.qq-login-or { position: relative; text-align: center; margin-bottom: 16px; }
.qq-login-or::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.qq-login-or span { position: relative; padding: 0 10px; background: var(--surface); color: var(--muted-2); font-size: 12.5px; }
.qq-btn {
  width: 100%; height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2);
  color: var(--ink); font: 500 14.5px/1 inherit; cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.qq-btn:hover { border-color: rgba(18, 183, 245, .55); box-shadow: 0 6px 18px -10px rgba(18, 183, 245, .5); transform: translateY(-1px); }
.qq-btn:disabled { opacity: .6; cursor: default; transform: none; }
.qq-btn-ico { font-size: 17px; line-height: 1; }
.qq-login-tip { margin-top: 10px; font-size: 12.5px; color: var(--muted-2); line-height: 1.75; text-align: center; }
.qq-state { display: inline-block; padding: 1px 8px; margin-right: 6px; border-radius: 999px; font-size: 12px; }
.qq-state.ok { background: rgba(22, 163, 74, .13); color: var(--ok); }
.qq-state.off { background: var(--surface-3); color: var(--muted); border: 1px solid var(--line); }

/* ---------- QQ 首次登录 · 绑定并登录面板 ---------- */
.qq-bind-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.qq-bind-ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-size: 20px; background: rgba(18, 183, 245, .12); border: 1px solid rgba(18, 183, 245, .28);
}
.qq-bind-txt strong { display: block; font-size: 15px; color: var(--ink); }
.qq-bind-txt p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--muted); }

/* ==========================================================
   个人中心 · 特效培训中心（lc- 前缀，全部走主题变量）
   ========================================================== */
.lc-hero {
  display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand-soft), var(--surface-2)); border: 1px solid var(--brand-line);
}
.lc-hero-ava {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  font-size: 22px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--brand), #ffa954); box-shadow: var(--shadow-brand);
}
.lc-hero-id { min-width: 0; }
.lc-hero-id h4 {
  margin: 0; font-size: 17px; color: var(--ink);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lc-hero-id p { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.lc-hero-id p.sub { margin-top: 3px; font-size: 12.5px; color: var(--muted-2); }

.lc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.lc-stat {
  padding: 12px 10px; border-radius: var(--radius-sm); text-align: center;
  background: var(--surface-2); border: 1px solid var(--line-2);
}
.lc-stat .k { display: block; font-size: 12px; color: var(--muted); }
.lc-stat .v {
  display: block; margin-top: 6px; font-size: 19px; font-weight: 700; line-height: 1.1;
  color: var(--ink); font-family: var(--font-num);
}
.lc-stat .v em {
  display: block; margin-top: 4px; font-style: normal; font-size: 11.5px; font-weight: 500;
  color: var(--muted-2); font-family: var(--font);
}
.lc-stat .v.ok { color: var(--ok); }
.lc-stat .v.warn { color: var(--warn); }

.lc-prog { margin-top: 16px; }
.lc-prog-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.lc-prog-top b { color: var(--ink); }
.lc-prog-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 7px; }
.lc-prog-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), #ffa954); transition: width .5s var(--ease);
}

.lc-tabs { display: flex; gap: 4px; margin-top: 18px; border-bottom: 1px solid var(--line); }
.lc-tab {
  appearance: none; border: 0; background: none; padding: 9px 12px; margin-bottom: -1px;
  font: 600 13.5px/1 var(--font); color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; transition: color .16s ease, border-color .16s ease;
}
.lc-tab:hover { color: var(--ink-2); }
.lc-tab.on { color: var(--brand); border-bottom-color: var(--brand); }
.lc-tab i { font-style: normal; font-size: 11.5px; color: var(--muted-2); margin-left: 5px; }

.lc-rows { padding-top: 4px; }
.lc-row {
  display: flex; gap: 10px; align-items: center; padding: 9px 2px; font-size: 13px;
  border-bottom: 1px dashed var(--line-2);
}
.lc-row:last-child { border-bottom: 0; }
.lc-row .d { flex: none; color: var(--muted-2); font-size: 12.5px; font-family: var(--font-num); }
.lc-row .t { flex: 1; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-row .n { flex: none; color: var(--muted); font-size: 12.5px; }
.lc-row .n.h { color: var(--ink-2); }
.lc-row .a { flex: none; font-weight: 700; color: var(--brand); font-family: var(--font-num); }

.lc-tag {
  flex: none; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; line-height: 1.6;
  background: var(--surface-3); border: 1px solid var(--line); color: var(--muted);
}
.lc-tag.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); font-weight: 600; }
.lc-tag.present { background: rgba(22, 163, 74, .12); border-color: rgba(22, 163, 74, .24); color: var(--ok); }
.lc-tag.late { background: rgba(217, 119, 6, .12); border-color: rgba(217, 119, 6, .24); color: var(--warn); }
.lc-tag.absent { background: rgba(220, 38, 38, .1); border-color: rgba(220, 38, 38, .22); color: var(--err); }
.lc-tag.makeup { background: rgba(47, 125, 225, .12); border-color: rgba(47, 125, 225, .24); color: #2f7de1; }

.lc-total, .lc-note {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2);
  font-size: 13px; color: var(--muted);
}
.lc-total b { color: var(--brand); font-size: 15px; }
.lc-note strong { display: block; color: var(--ink-2); font-weight: 600; margin-bottom: 5px; }
.lc-note p { margin: 0; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }

.lc-empty { padding: 22px 12px; text-align: center; font-size: 13px; color: var(--muted-2); }
.lc-guide {
  padding: 18px; border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px dashed var(--line-strong); font-size: 13.5px; color: var(--muted);
}
.lc-guide strong { color: var(--ink); font-weight: 600; }
.lc-guide b { color: var(--ink); font-weight: 600; }
.lc-guide p { margin: 8px 0 0; line-height: 1.9; }
.lc-more { text-align: center; padding: 10px 0 2px; }
.lc-more button {
  appearance: none; border: 0; background: none; color: var(--brand);
  font: 600 13px/1 var(--font); cursor: pointer; padding: 4px 8px;
}
.lc-more button:hover { color: var(--brand-dark); }

@media (max-width: 640px) {
  .lc-stats { grid-template-columns: repeat(2, 1fr); }
  .lc-row .n { display: none; }
}

/* ======================================================================
   特效培训中心 study.html（st- 前缀，仅学习用户可见）
   ====================================================================== */
.st-gate { padding: 40px 0 20px; }
.st-app { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 22px; align-items: start; }

/* 侧栏 */
.st-side { position: sticky; top: calc(var(--header-h) + 18px); display: flex; flex-direction: column; gap: 14px; }
.st-me { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line-2);
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.st-me-ava { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800; flex: none;
  border: 1px solid var(--brand-line); }
.st-me-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-me-id b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-me-id span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-nav { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--line-2);
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.st-nav button { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 600; cursor: pointer;
  text-align: left; transition: background .18s var(--ease), color .18s var(--ease); }
.st-nav button .i { width: 20px; text-align: center; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.st-nav button .i svg, .st-nav a .i svg { display: block; }
.st-nav button:hover { background: var(--surface-2); color: var(--ink); }
.st-nav button.on { background: var(--brand-soft); color: var(--brand); }
/* 侧栏外链（我的简历 / 我的学习笔记）：与按钮同款样式，带分隔线与外链角标 */
.st-nav .st-nav-sep { height: 1px; background: var(--line-2); margin: 5px 4px; flex: none; }
.st-nav a {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px;
  color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none;
  text-align: left; position: relative;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.st-nav a .i { width: 20px; text-align: center; font-size: 15px; }
.st-nav a .ext {
  margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted-2);
  opacity: 0; transform: translateX(-3px); transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.st-nav a:hover { background: var(--surface-2); color: var(--ink); }
.st-nav a:hover .ext { opacity: .8; transform: none; }
.st-side-tip { padding: 0 6px; font-size: 12px; line-height: 1.8; color: var(--muted-2); }

/* 侧栏昵称行 + 修改昵称按钮 */
.st-nick-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.st-nick-edit {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--muted-2);
  cursor: pointer; flex: none; padding: 0; transition: color .15s var(--ease), border-color .15s var(--ease);
}
.st-nick-edit:hover { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); }
.st-nick-input {
  width: 118px; height: 24px; padding: 0 7px; font-size: 13.5px; font-weight: 700; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--brand-line); border-radius: 7px; outline: none;
}
.st-nick-input:focus { border-color: var(--brand); }

/* 通用面板 */
.st-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* 板块面包屑 */
.st-crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted-2); }
.st-crumb .root { color: var(--muted); }
.st-crumb i { font-style: normal; color: var(--line-strong); }
.st-crumb b { color: var(--brand); font-weight: 700; font-size: 13px; }
.st-crumb em { font-style: normal; color: var(--muted); max-width: 46ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-crumb .d { color: var(--muted-2); }

/* 继续学习条 */
.st-resume { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--radius-lg); border: 1px solid var(--brand-line);
  background: linear-gradient(120deg, var(--brand-soft), var(--surface)); box-shadow: var(--shadow-sm); }
.st-resume .k { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; color: var(--brand); flex: none; }
.st-resume .main { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 5px; }
.st-resume .main b { font-size: 14.5px; }
.st-resume .main span { font-size: 12.5px; color: var(--muted); }
.st-resume .st-prog-bar { margin-top: 2px; }
.st-resume .btn { flex: none; }
.st-panel { border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: var(--shadow-sm); padding: 20px 22px; }
.st-panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.st-panel-h h4 { font-size: 16.5px; margin: 0; }
.st-panel-sub { font-size: 12.5px; color: var(--muted); }
.st-link { border: 0; background: none; color: var(--brand); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; }
.st-link:hover { text-decoration: underline; }
.st-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.st-none { padding: 22px 0; text-align: center; color: var(--muted); font-size: 13.5px; }
.st-empty { border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface);
  padding: 46px 26px; text-align: center; }
.st-empty b { font-size: 17px; }
.st-empty p { margin-top: 10px; color: var(--muted); font-size: 13.5px; line-height: 1.9; }

/* 提示条 */
.st-tip { display: flex; flex-direction: column; gap: 4px; padding: 13px 16px; border-radius: var(--radius);
  border: 1px solid var(--brand-line); background: var(--brand-soft); font-size: 13px; }
.st-tip b { color: var(--brand); font-size: 13.5px; }
.st-tip span { color: var(--muted); line-height: 1.7; }
.st-tip.warn { border-color: var(--warn); background: transparent; }
.st-tip.warn b { color: var(--warn); }
.st-tip.ok { border-color: var(--ok); background: transparent; }
.st-tip.ok b { color: var(--ok); }
.st-tip.admin { border-style: dashed; border-color: var(--line-strong); background: var(--surface-2); }
.st-tip.admin b { color: var(--ink-2); }

/* Hero */
.st-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 22px 24px; border-radius: var(--radius-lg); border: 1px solid var(--line-2);
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); box-shadow: var(--shadow-sm); }
.st-hero-l { display: flex; align-items: center; gap: 14px; }
.st-hi { font-size: 30px; }
.st-hero h3 { font-size: 19px; margin: 0; }
.st-hero p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.st-next { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border-radius: var(--radius);
  border: 1px solid var(--brand-line); background: var(--brand-soft); min-width: 230px; }
.st-next .k { font-size: 11.5px; font-weight: 700; color: var(--brand); letter-spacing: .06em; }
.st-next b { font-size: 14px; }
.st-next .v { font-size: 12.5px; color: var(--muted); }

/* 统计卡 */
.st-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.st-stat { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.st-stat .k { font-size: 12px; color: var(--muted); }
.st-stat .v { font-size: 21px; font-weight: 800; font-family: var(--font-num); color: var(--ink); }
.st-stat .v i { font-size: 13px; color: var(--muted); font-weight: 600; font-style: normal; }
.st-stat .v em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted-2); font-weight: 500; margin-top: 2px; }
.st-prog { margin-top: 4px; }
.st-prog-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 7px; }
.st-prog-top b { color: var(--brand); }
.st-prog-bar { height: 8px; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--line-2); overflow: hidden; }
.st-prog-bar i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand-dark), var(--brand)); box-shadow: var(--shadow-brand); transition: width .6s var(--ease); }

/* 迷你列表 / 评语 / 快捷入口 */
.st-mini-list { display: flex; flex-direction: column; }
.st-mini { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.st-mini:last-child { border-bottom: 0; }
.st-mini .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.st-mini .dot.run { background: var(--brand); box-shadow: 0 0 8px var(--brand-glow); }
.st-mini .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.st-mini .m { font-size: 12px; color: var(--muted); }
.st-quote { border-left: 3px solid var(--brand); padding: 4px 0 4px 14px; }
.st-quote-h { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; flex-wrap: wrap; }
.st-quote-h span { color: var(--muted); font-size: 12.5px; }
.st-quote p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.9; color: var(--ink-2); }
.st-score { font-style: normal; font-weight: 800; color: var(--brand); font-family: var(--font-num); font-size: 14px; }
.st-score.big { font-size: 26px; }
.st-pay-line { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.st-pay-line b { color: var(--ok); }
.st-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.st-quick-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-2);
  border-radius: var(--radius); background: var(--surface); text-decoration: none; transition: border-color .18s var(--ease), transform .18s var(--ease); }
.st-quick-item:hover { border-color: var(--brand-line); transform: translateY(-2px); }
.st-quick-item .i { font-size: 22px; }
.st-quick-item .t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.st-quick-item .t em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.st-quick-item .arr { color: var(--muted-2); }

/* 徽章 */
.st-tag { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 700;
  background: var(--surface-3); color: var(--muted); border: 1px solid var(--line-2); font-style: normal; vertical-align: 2px; }
.st-tag.on { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }
.tag { display: inline-block; padding: 2.5px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.p-urgent { background: rgba(220, 38, 38, .14); color: var(--err); }
.p-high { background: rgba(217, 119, 6, .14); color: var(--warn); }
.p-mid { background: var(--brand-soft); color: var(--brand); }
.p-low { background: var(--surface-3); color: var(--muted); }
.r-pending { background: rgba(217, 119, 6, .14); color: var(--warn); }
.r-passed { background: rgba(22, 163, 74, .14); color: var(--ok); }
.r-rework { background: rgba(220, 38, 38, .14); color: var(--err); }
.s-settled { color: var(--ok); }
.s-settling { color: var(--warn); }

/* 排课 */
.st-sch-day { display: grid; grid-template-columns: 86px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.st-sch-day:last-child { border-bottom: 0; }
.st-sch-day.today .d b { color: var(--brand); }
.st-sch-day .d { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 700; }
.st-sch-day .d span { font-size: 12px; color: var(--muted); font-weight: 500; }
.st-sch-day .rows { display: flex; flex-direction: column; gap: 8px; }
.st-sch { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line); }
.st-sch .time { display: flex; flex-direction: column; align-items: center; min-width: 48px; }
.st-sch .time b { font-size: 14px; font-family: var(--font-num); }
.st-sch .time i { font-style: normal; font-size: 11px; color: var(--muted-2); }
.st-sch .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-sch .body b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-sch .body i { font-style: normal; font-size: 12px; color: var(--muted); }
.badge { display: inline-block; padding: 2.5px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.k-lesson { background: var(--brand-soft); color: var(--brand); }
.k-practice { background: rgba(22, 163, 74, .14); color: var(--ok); }
.k-review { background: rgba(217, 119, 6, .14); color: var(--warn); }
.k-exam { background: rgba(220, 38, 38, .14); color: var(--err); }
.k-open { background: var(--surface-3); color: var(--muted); }
.k-done { background: var(--surface-3); color: var(--muted-2); }

/* 课程卡 */
.st-course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.st-course { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2);
  overflow: hidden; display: flex; flex-direction: column; transition: transform .2s var(--ease), border-color .2s var(--ease); }
.st-course:hover { transform: translateY(-3px); border-color: var(--brand-line); }
.st-course .cover { height: 108px; background-size: cover; background-position: center; position: relative; }
.st-course .cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--surface-2)); }
.st-course .lv { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 2px 10px; border-radius: 99px;
  font-size: 11px; font-weight: 700; background: rgba(0, 0, 0, .55); color: #fff; backdrop-filter: blur(4px); }
.st-course .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.st-course h5 { margin: 0; font-size: 14.5px; }
.st-course .meta { margin: 0; font-size: 12px; color: var(--muted); }
.st-course .sum { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.st-course .outline { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); line-height: 2; }
/* 课程卡进度 + 学习按钮 */
.st-course-prog { margin-top: 2px; display: flex; flex-direction: column; gap: 6px; }
.st-course-prog .st-prog-bar { height: 6px; }
.st-course-prog span { font-size: 11.5px; color: var(--muted-2); }
.st-course-act { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-course-act .btn { font-weight: 700; }
.st-course-act .n { font-size: 11.5px; color: var(--muted-2); }

/* 学员档案 */
.st-profile { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.st-profile .ava { width: 58px; height: 58px; border-radius: 16px; background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800;
  border: 1px solid var(--brand-line); flex: none; }
.st-profile .main { flex: 1; min-width: 200px; }
.st-profile h5 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-profile .main p { margin: 5px 0 0; font-size: 13px; color: var(--muted); }
.st-profile .main p.sub { font-size: 12.5px; color: var(--muted-2); }
.st-profile .prog { width: 200px; padding-top: 6px; }

/* 雷达图 */
.st-radar { width: 100%; max-width: 340px; display: block; margin: 0 auto; }
.rg-grid { fill: none; stroke: var(--line-2); stroke-width: 1; }
.rg-data { fill: var(--brand); fill-opacity: .18; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; }
.rg-dot { fill: var(--brand); }
.rg-label { fill: var(--muted); font-size: 11px; font-weight: 600; }
.rg-val { fill: var(--brand); font-size: 11px; font-weight: 800; font-family: var(--font-num); }
.st-skill-sum { display: flex; flex-direction: column; gap: 12px; }
.st-skill-sum .row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px dashed var(--line-2); font-size: 13.5px; }
.st-skill-sum .row .k { color: var(--muted); }
.st-skill-sum .sum { margin: 0; font-size: 13px; line-height: 1.9; color: var(--muted); }

/* 时间线（导师评语） */
.st-timeline { position: relative; padding-left: 18px; display: flex; flex-direction: column; gap: 16px; }
.st-timeline::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line-2); }
.st-tl-item { position: relative; }
.tl-dot { position: absolute; left: -18px; top: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--brand); }
.tl-body .h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.tl-body .h span { color: var(--muted); font-size: 12.5px; }
.tl-body .h time { margin-left: auto; font-size: 12px; color: var(--muted-2); }
.tl-body p { margin: 7px 0 0; font-size: 13.5px; line-height: 1.9; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); padding: 12px 14px; }

/* 作品 / 案例 */
.st-work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.st-work-grid.big { grid-template-columns: repeat(2, 1fr); }
.st-work, .st-case { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2);
  overflow: hidden; display: flex; flex-direction: column; transition: transform .2s var(--ease), border-color .2s var(--ease); }
.st-work:hover, .st-case:hover { transform: translateY(-3px); border-color: var(--brand-line); }
.st-work .cover, .st-case .cover { height: 150px; background-size: cover; background-position: center; position: relative; }
.st-work .cover::after, .st-case .cover::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .45)); }
.st-work .feat { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 3px 10px; border-radius: 99px;
  font-size: 11px; font-weight: 800; background: rgba(0, 0, 0, .55); color: var(--brand-light);
  border: 1px solid var(--brand-line); backdrop-filter: blur(4px); }
.st-work .cat, .st-case .cat { position: absolute; bottom: 10px; left: 12px; z-index: 1; padding: 2px 10px;
  border-radius: 99px; font-size: 11px; font-weight: 700; background: rgba(0, 0, 0, .5); color: #fff; backdrop-filter: blur(4px); }
.st-work .body, .st-case .body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.st-work h5, .st-case h5 { margin: 0; font-size: 14.5px; }
.st-work .meta, .st-case .meta { margin: 0; font-size: 12px; color: var(--muted); }
.st-work .meta b, .st-case .meta b { color: var(--brand); }
.st-work .sum, .st-case .sum { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--muted); }
.st-case .result { margin: auto 0 0; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12.5px;
  line-height: 1.7; background: var(--brand-soft); color: var(--ink-2); }
.st-case .result b { color: var(--brand); margin-right: 8px; }
.st-work .tags, .st-task .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
/* 作品卡：视频播放角标 / 待审核徽标 / 本人操作行 */
.st-panel-h > .btn { margin-left: auto; align-self: center; white-space: nowrap; }
.st-work .play { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 800; color: #fff;
  background: rgba(20, 16, 12, .62); backdrop-filter: blur(4px); cursor: pointer; }
.st-work .play i { font-style: normal; font-size: 9px; }
.st-work .cover:hover .play { background: var(--brand); }
.st-work .feat.pend { background: rgba(217, 119, 6, .92); }
.st-work .ops { display: flex; gap: 14px; margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--line-2); }
.st-work .ops .st-link { font-size: 12px; }
.st-work .ops .st-link.danger { color: var(--err); }
/* 作品视频弹层 */
.st-wv-box { max-width: 900px; }
.st-wv-stage { width: 100%; aspect-ratio: 16 / 9; background: #0e0c0a; display: flex; align-items: center; justify-content: center; }
.st-wv-stage video, .st-wv-stage iframe { width: 100%; height: 100%; border: 0; display: block; }
.st-wv-loading { color: rgba(255, 255, 255, .7); font-size: 13px; }
/* 上传 / 编辑弹窗 */
.st-wf-box { max-width: 520px; }
.st-wf-h { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--line-2); }
.st-wf-h b { font-size: 15px; }
.st-wf-x { border: 0; background: transparent; font-size: 15px; color: var(--muted); cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.st-wf-x:hover { background: var(--surface-2); color: var(--ink); }
.st-wf-b { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; max-height: 70vh; overflow-y: auto; }
.st-wf-b .f { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.st-wf-b .f i { color: var(--err); font-style: normal; }
.st-wf-b input[type="text"], .st-wf-b input:not([type]), .st-wf-b textarea {
  border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; font-size: 13px;
  font-family: inherit; color: var(--ink); background: var(--surface); outline: none; }
.st-wf-b input:focus, .st-wf-b textarea:focus { border-color: var(--brand); }
.st-wf-b input[type="file"] { font-size: 12px; color: var(--muted); }
.st-wf-tip { font-size: 12px; color: var(--muted-2); background: var(--surface-2); border-radius: 10px; padding: 9px 12px; line-height: 1.7; }
.st-wf-act { display: flex; justify-content: flex-end; }
.st-work .tags i { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 99px;
  background: var(--surface-3); color: var(--muted); border: 1px solid var(--line-2); }

/* 作品库 Tabs */
.st-lib-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.st-lib-tabs button { border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2);
  padding: 8px 16px; border-radius: 99px; font-size: 13px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 6px; transition: all .18s var(--ease); }
.st-lib-tabs button i { font-style: normal; font-size: 11px; color: var(--muted); }
.st-lib-tabs button.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.st-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* 素材 */
.st-asset-list { display: flex; flex-direction: column; gap: 10px; }
.st-asset { display: flex; align-items: center; gap: 14px; padding: 13px 15px; border: 1px solid var(--line-2);
  border-radius: var(--radius); background: var(--surface-2); }
.st-asset .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-3); font-size: 20px;
  display: flex; align-items: center; justify-content: center; flex: none; border: 1px solid var(--line-2); }
.st-asset .main { flex: 1; min-width: 0; }
.st-asset h5 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-asset p { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.st-asset p.sum { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* Kanban */
.st-proj-sum { margin: 0 0 10px; font-size: 13.5px; line-height: 1.85; color: var(--muted); }
.st-proj-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted-2); margin-bottom: 12px; }
.st-prog { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.st-prog .bar { flex: 1; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.st-prog .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), #f5a623); transition: width .4s var(--ease); }
.st-prog span { font-size: 12px; color: var(--muted-2); white-space: nowrap; font-family: var(--font-num); font-weight: 700; }
.st-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; }
.st-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 130px; }
.st-col-h { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 800; padding: 2px 4px 0; }
.st-col-h .lbl { display: flex; align-items: center; gap: 7px; }
.st-col-h .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--muted-2); flex: none; }
.col-todo .dot { background: #9aa3af; }
.col-doing .dot { background: var(--brand); }
.col-review .dot { background: var(--warn); }
.col-done .dot { background: var(--ok); }
.st-col-h em { font-style: normal; font-size: 11.5px; color: var(--muted); background: var(--surface-3);
  border-radius: 99px; padding: 1px 8px; font-family: var(--font-num); }
.st-col-body { display: flex; flex-direction: column; gap: 10px; max-height: 540px; overflow-y: auto;
  padding: 2px; margin: 0 -2px; scrollbar-width: thin; }
.st-col-body::-webkit-scrollbar { width: 4px; }
.st-col-body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }
.st-col-empty { font-size: 12px; color: var(--muted-2); text-align: center; padding: 20px 0;
  border: 1px dashed var(--line-2); border-radius: 10px; }
.st-task { border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); padding: 11px 12px;
  display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.st-task:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-line); }
.st-task.mine { border-color: var(--brand-line); }
.st-task .t { font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.st-task .d { font-size: 12px; color: var(--muted); line-height: 1.6; display: -webkit-box;
  -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.st-task .m { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); min-width: 0; }
.st-task .m .prio { width: 8px; height: 8px; border-radius: 99px; flex: none; display: inline-block; cursor: help; }
.st-task .m .prio.p-urgent { background: var(--err); }
.st-task .m .prio.p-high { background: #ea8a1f; }
.st-task .m .prio.p-mid { background: var(--line-2); }
.st-task .m .prio.p-low { background: var(--line); }
.st-task .due.dim { color: var(--muted-2); }
.st-task .due { white-space: nowrap; font-family: var(--font-num); flex: none; margin-right: auto; }
.st-task .m .tag { margin-left: 0; }
.st-task.overdue .due { color: var(--err); font-weight: 700; }
.st-task .note { font-size: 12px; color: var(--err); background: rgba(220, 38, 38, .08);
  border-radius: var(--radius-sm); padding: 7px 10px; line-height: 1.6; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.st-settle { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding: 13px 16px;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2); font-size: 13px; }
.st-settle span { color: var(--muted); font-weight: 700; }
.st-settle b { font-family: var(--font-num); }
.st-settle b.s-settled { color: var(--ok); }
.st-settle b.s-settling { color: var(--warn); }
.st-settle b.s-un { color: var(--muted); }
.st-settle i { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted-2); }

/* 响应式 */
@media (max-width: 1024px) {
  .st-app { grid-template-columns: 1fr; }
  .st-side { position: static; flex-direction: column; }
  .st-nav { flex-direction: row; overflow-x: auto; }
  .st-nav button, .st-nav a { white-space: nowrap; }
  .st-nav .st-nav-sep { width: 1px; height: auto; margin: 4px 5px; align-self: stretch; }
  .st-stats { grid-template-columns: repeat(2, 1fr); }
  .st-course-grid, .st-case-grid { grid-template-columns: repeat(2, 1fr); }
  .st-kanban { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .st-cols2, .st-work-grid, .st-quick { grid-template-columns: 1fr; }
  .st-course-grid, .st-case-grid, .st-kanban { grid-template-columns: 1fr; }
  .st-sch-day { grid-template-columns: 64px 1fr; }
  .st-asset { flex-wrap: wrap; }
}

/* ======================================================================
   特效培训中心 v2 模板增强（2026-10-07）
   ====================================================================== */

/* 面板标题：品牌色竖条 */
.st-panel-h h4 { position: relative; padding-left: 13px; }
.st-panel-h h4::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 15px; border-radius: 99px;
  background: linear-gradient(180deg, var(--brand), var(--brand-dark)); }

/* Hero：品牌光晕氛围 */
.st-hero { position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 55%, var(--brand-soft) 135%); }
.st-hero::after { content: ''; position: absolute; right: -70px; top: -80px; width: 240px; height: 240px;
  border-radius: 50%; background: radial-gradient(circle, var(--brand-glow) 0%, transparent 68%);
  pointer-events: none; }

/* 侧栏导航：当前项指示条 */
.st-nav button { position: relative; }
.st-nav button.on::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 99px; background: var(--brand); }

/* 侧栏培训进度环 */
.st-side-prog { display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.st-side-prog svg { flex: none; }
.st-side-prog .t { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 700; min-width: 0; }
.st-side-prog .t em { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 500; }
.ring-bg { fill: none; stroke: var(--surface-3); stroke-width: 5.5; }
.ring-fg { fill: none; stroke: var(--brand); stroke-width: 5.5; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .7s var(--ease); }
.ring-val { fill: var(--ink); font-size: 11.5px; font-weight: 800; font-family: var(--font-num); text-anchor: middle; dominant-baseline: middle; }

/* 培养目标 */
.st-goal { margin: 0; font-size: 14px; line-height: 2.05; color: var(--ink-2); }

/* 学习路线：四阶段 */
.st-road { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.st-road-item { position: relative; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--surface-2); padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 4px;
  transition: transform .2s var(--ease), border-color .2s var(--ease); }
.st-road-item:hover { transform: translateY(-3px); border-color: var(--brand-line); }
.st-road-item .no { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand);
  border: 1px solid var(--brand-line); display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; margin-bottom: 6px; }
.st-road-item .term { font-size: 11px; color: var(--brand); font-weight: 800; letter-spacing: .04em; }
.st-road-item h6 { margin: 0; font-size: 13.5px; }
.st-road-item p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--muted); flex: 1; }
.st-road-item .out { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-2);
  font-size: 12px; color: var(--ink-2); line-height: 1.7; }

/* 培训服务 */
.st-svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.st-svc { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-2);
  border-radius: var(--radius); background: var(--surface-2); }
.st-svc .i { font-size: 22px; line-height: 1.2; flex: none; }
.st-svc h6 { margin: 0; font-size: 13.5px; }
.st-svc p { margin: 5px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.75; }

/* 封面悬浮缩放 */
.st-course .cover, .st-work .cover, .st-case .cover { background-size: cover; background-position: center;
  transition: background-size .45s var(--ease); }
.st-course:hover .cover, .st-work:hover .cover, .st-case:hover .cover { background-size: 112% auto; }

/* 案例卡可播放态：指针 + ▶ 角标 */
.st-case.playable { cursor: pointer; }
.st-case .play { position: absolute; top: 10px; right: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 99px; font-size: 11px; font-weight: 800;
  background: rgba(0, 0, 0, .55); color: var(--brand-light); border: 1px solid var(--brand-line);
  backdrop-filter: blur(4px); opacity: .85; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.st-case .play i { font-style: normal; font-size: 9px; }
.st-case.playable:hover .play { opacity: 1; transform: scale(1.06); }

/* 案例播放界面 · 右侧信息面板 */
.st-case-info { padding: 6px 14px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.st-case-info p { margin: 0; display: flex; gap: 10px; }
.st-case-info p span { flex: 0 0 34px; color: var(--muted); font-size: 12px; padding-top: 1px; }
.st-case-info p.multi { display: block; }
.st-case-info p.multi span { display: block; margin-bottom: 4px; }
.st-case-info p.result { color: var(--ink-2); }
.st-case-info p.result span { color: var(--brand); font-weight: 700; }

/* 作品大图灯箱 */
.st-lb { position: fixed; inset: 0; z-index: 300; background: rgba(15, 13, 12, .78);
  backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center;
  padding: 32px; cursor: zoom-out; animation: stLbIn .18s var(--ease); }
@keyframes stLbIn { from { opacity: 0; } to { opacity: 1; } }
.st-lb-inner { max-width: 860px; width: 100%; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); cursor: default; }
.st-lb-img { width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; display: block; }
.st-lb-body { padding: 15px 20px 17px; }
.st-lb-body h5 { margin: 0; font-size: 16px; }
.st-lb-body p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.8; color: var(--muted); }

/* 响应式补充 */
@media (max-width: 1024px) {
  .st-road { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .st-road, .st-svc-grid { grid-template-columns: 1fr; }
  .st-lb { padding: 14px; }
}

/* ==========================================================================
   我的简历（resume.html）
   左栏编辑 + 右栏 A4 实时预览；打印时只输出简历纸面
   ========================================================================== */
.rs-section { padding-top: 4px; }

/* ---- 工具条 ---- */
.rs-bar {
  position: sticky; top: calc(var(--header-h) + 10px); z-index: 50;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 16px;
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.rs-bar-l { display: flex; align-items: center; gap: 14px; flex: 1 1 260px; min-width: 0; }
.rs-bar-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rs-prog { display: flex; align-items: center; gap: 10px; flex: 1 1 170px; max-width: 330px; min-width: 130px; }
.rs-prog-track { flex: 1; height: 7px; border-radius: 99px; background: var(--bg-warm); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-2); }
.rs-prog-track i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), var(--brand-dark)); transition: width .32s var(--ease); }
.rs-prog b { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-weight: 600; }
.rs-save { font-size: 12.5px; color: var(--muted-2); white-space: nowrap; }
.rs-save.ok { color: var(--ok); }
.rs-save.err { color: var(--err); }

/* ---- 两栏 ---- */
.rs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 24px; align-items: start; }
.rs-form { display: grid; gap: 16px; min-width: 0; }

.rs-panel {
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-sm); padding: 18px 20px 20px;
}
.rs-h { position: relative; padding-left: 13px; margin: 0 0 14px; font-size: 15.5px; }
.rs-h::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 15px; border-radius: 99px;
  background: linear-gradient(180deg, var(--brand), var(--brand-dark)); }
.rs-note { margin: 0 0 13px; font-size: 13px; color: var(--muted); line-height: 1.85; }

/* ---- 可重复经历 ---- */
.rs-list { display: grid; gap: 12px; }
.rs-row { position: relative; border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--surface-2); padding: 14px 16px 12px; }
.rs-row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rs-row-no { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700; font-family: var(--font-num);
  background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line); }
.rs-row-del { border: 0; background: none; cursor: pointer; color: var(--muted-2); font-size: 13px;
  padding: 3px 6px; border-radius: 8px; line-height: 1; }
.rs-row-del:hover { color: var(--err); background: var(--bg-warm); }
.rs-row-grid { display: grid; gap: 12px 14px; }
.rs-row-grid.c1 { grid-template-columns: 1fr; }
.rs-row-grid.c2 { grid-template-columns: 1fr 1fr; }
.rs-row-grid.c3 { grid-template-columns: 1fr 1fr 1fr; }
.rs-row-grid .field { margin-bottom: 0; }
.rs-row-grid.c1 { margin-top: 12px; }
.rs-row-grid .rs-full { grid-column: 1 / -1; }
.rs-row .field label { font-size: 12.5px; margin-bottom: 6px; }
.rs-blank { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 14px 16px;
  color: var(--muted-2); font-size: 13px; background: var(--surface-2); }
.rs-add { margin-top: 12px; }

/* ---- 技能标签 ---- */
.rs-chips { margin-top: 4px; }
.rs-chip { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.rs-chip-x { border: 0; background: none; cursor: pointer; color: var(--muted-2); font-size: 11px; padding: 0; line-height: 1; }
.rs-chip-x:hover { color: var(--err); }
.rs-quick { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.rs-quick .chip { font-size: 12px; padding: 4px 10px; cursor: pointer; }

/* ---- 开关 ---- */
.rs-switch { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13.5px; color: var(--ink-2); }
.rs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.rs-switch-ui { position: relative; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 99px;
  background: var(--bg-warm); border: 1px solid var(--line-strong); transition: background .2s var(--ease); margin-top: 1px; }
.rs-switch-ui::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .2s var(--ease); }
.rs-switch input:checked + .rs-switch-ui { background: var(--brand); border-color: var(--brand); }
.rs-switch input:checked + .rs-switch-ui::after { transform: translateX(16px); background: #fff; }
.rs-switch em { display: block; font-style: normal; font-size: 12px; color: var(--muted-2); margin-top: 2px; }

/* ---- 附件 ---- */
.rs-file { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line-2);
  border-radius: var(--radius); background: var(--surface-2); padding: 13px 15px; flex-wrap: wrap; }
.rs-file-ico { font-size: 22px; }
.rs-file-main { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rs-file-main b { font-size: 14px; }
.rs-file-main span { font-size: 12.5px; color: var(--muted-2); }
.rs-file-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* 识别并填充提示条 */
.rs-parse-tip { margin-top: 11px; padding: 10px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.7;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--muted); }
.rs-parse-tip.ok { border-color: color-mix(in srgb, var(--brand) 40%, transparent); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--ink-2); }
.rs-parse-tip.err { border-color: color-mix(in srgb, #e5484d 45%, transparent); background: color-mix(in srgb, #e5484d 9%, var(--surface)); color: #c93b40; }

/* ---- 预览纸面 ---- */
.rs-preview-wrap { position: sticky; top: calc(var(--header-h) + 84px); align-self: start; min-width: 0; }
.rs-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 9px; font-size: 12.5px; color: var(--muted); }
.rs-preview-tip { color: var(--muted-2); }
.rs-paper {
  border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow); padding: 30px 32px 26px; max-height: calc(100vh - var(--header-h) - 140px);
  overflow: auto; color: var(--ink);
}
.rs-p-blank { text-align: center; padding: 60px 20px; color: var(--muted-2); }
.rs-p-blank b { display: block; font-size: 16px; color: var(--ink-2); margin-bottom: 10px; }
.rs-p-blank p { font-size: 13.5px; line-height: 1.95; }

.rs-p-head { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 16px;
  border-bottom: 2px solid var(--brand-line); }
.rs-p-head-main { flex: 1; min-width: 0; }
.rs-p-head h2 { margin: 0; font-size: 25px; letter-spacing: .5px; }
.rs-p-job { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--brand); }
.rs-p-ava { width: 66px; height: 66px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line); }
.rs-p-contact { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px;
  font-size: 12.5px; color: var(--muted); }
.rs-p-sec { margin-top: 20px; }
.rs-p-sec h4 { position: relative; margin: 0 0 11px; padding-left: 11px; font-size: 14px; letter-spacing: .4px; }
.rs-p-sec h4::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 13px; border-radius: 99px; background: var(--brand); }
.rs-p-kvs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.rs-p-kv { display: flex; gap: 8px; font-size: 13px; min-width: 0; }
.rs-p-kv i { font-style: normal; color: var(--muted-2); flex: 0 0 auto; min-width: 56px; }
.rs-p-kv b { font-weight: 600; word-break: break-word; }
.rs-p-kv-full { grid-column: 1 / -1; }
.rs-p-link { color: var(--brand); word-break: break-all; }
.rs-p-item { margin-bottom: 13px; }
.rs-p-item:last-child { margin-bottom: 0; }
.rs-p-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rs-p-item-top b { font-size: 13.5px; }
.rs-p-period { font-size: 12px; color: var(--muted-2); font-family: var(--font-num); white-space: nowrap; }
.rs-p-item-sub { margin-top: 3px; font-size: 12.5px; color: var(--brand); }
.rs-p-item-desc { margin: 6px 0 0; font-size: 12.5px; line-height: 1.85; color: var(--ink-2); }
.rs-p-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.rs-p-tag { padding: 3px 10px; border-radius: 99px; font-size: 12px; color: var(--ink-2);
  background: var(--bg-warm); border: 1px solid var(--line); }
.rs-p-lines { margin: 0; padding-left: 17px; font-size: 12.5px; line-height: 1.95; color: var(--ink-2); }
.rs-p-sum { margin: 0; font-size: 12.5px; line-height: 1.95; color: var(--ink-2); }
.rs-p-foot { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line-2);
  font-size: 11.5px; color: var(--muted-2); text-align: center; }

/* ---- 响应式 ---- */
@media (max-width: 1080px) {
  .rs-grid { grid-template-columns: 1fr; }
  .rs-preview-wrap { position: static; }
  .rs-paper { max-height: none; }
}
@media (max-width: 640px) {
  .rs-row-grid.c2, .rs-row-grid.c3, .rs-p-kvs { grid-template-columns: 1fr; }
  .rs-paper { padding: 22px 18px; }
  .rs-bar { position: static; }
}

/* ---- 打印：只输出简历纸面 ---- */
@media print {
  @page { size: A4; margin: 14mm; }
  html, body { background: #fff !important; }
  body.rs-printing > *:not(main) { display: none !important; }
  body.rs-printing main > *:not(.rs-section) { display: none !important; }
  body.rs-printing .rs-section > .wrap > *:not(.rs-grid) { display: none !important; }
  body.rs-printing .rs-grid > *:not(.rs-preview-wrap) { display: none !important; }
  body.rs-printing .rs-preview-bar { display: none !important; }
  .rs-paper { max-height: none !important; overflow: visible !important; box-shadow: none !important;
    border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: #fff !important;
    color: #111 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rs-paper * { color: #222 !important; background: transparent !important; border-color: #ddd !important;
    box-shadow: none !important; }
  .rs-p-head { border-bottom-color: #ff7a1f !important; }
  .rs-p-head h2 { color: #111 !important; }
  .rs-p-job, .rs-p-item-sub, .rs-p-link { color: #d95a00 !important; }
  .rs-p-contact, .rs-p-period, .rs-p-kv i, .rs-p-foot { color: #666 !important; }
  .rs-p-sec h4::before { background: #ff7a1f !important; }
  .rs-p-tag { background: #f2f2f2 !important; color: #333 !important; border-color: #ddd !important; }
  .rs-p-sec { break-inside: avoid; }
  .rs-p-item { break-inside: avoid; }
}


/* ================= UI 动效增强（2026-10-08 矢量动效体系） ================= */
/* 1) 卡片悬停斜光扫过（品牌暖调，深浅主题通用） */
.card, .value-card, .stat-card, .st-work, .st-case, .st-course { position: relative; overflow: hidden; }
.card::after, .value-card::after, .stat-card::after, .st-work::after, .st-case::after, .st-course::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 2;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 170, 90, .10) 45%,
    rgba(255, 228, 196, .22) 50%, rgba(255, 170, 90, .10) 55%, transparent 68%);
  transform: translateX(-135%);
}
.card:hover::after, .value-card:hover::after, .stat-card:hover::after,
.st-work:hover::after, .st-case:hover::after, .st-course:hover::after { transform: translateX(135%); transition: transform .9s var(--ease); }

/* 2) 学习中心作品/案例封面：悬停缓慢放大（SVG 动图持续播放） */
.st-work .cover, .st-case .cover { transition: transform .8s cubic-bezier(.22, .75, .3, 1); }
.st-work:hover .cover, .st-case:hover .cover { transform: scale(1.05); }

/* 3) 首页品牌面板：Logo 悬浮 + 虚线轨道环旋转 */
.logo-panel { overflow: hidden; }
.logo-panel .lp-mark { animation: lp-float 6.5s ease-in-out infinite; }
@keyframes lp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.logo-panel::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: min(62%, 330px); aspect-ratio: 1 / 1;
  border: 1.5px dashed rgba(255, 160, 90, .22); border-radius: 50%;
  transform: translate(-50%, -50%); animation: lp-orbit 46s linear infinite; pointer-events: none;
}
@keyframes lp-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* 4) 空状态：动态矢量插图替代 emoji 图标 */
.empty .e-ico { display: none; }
.empty::before, .st-empty::before {
  content: ''; display: block; width: 150px; height: 112px; margin: 0 auto 12px;
  background: url('../img/anim/empty.svg') center / contain no-repeat;
}

/* 5) 主按钮：周期性光泽流转 */
.btn:not(.btn-ghost):not(.btn-dark)::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -34%; width: 26%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
  transform: skewX(-20deg); animation: btn-sheen 5.2s var(--ease) infinite; pointer-events: none;
}
@keyframes btn-sheen { 0%, 62% { left: -34%; } 86%, 100% { left: 118%; } }

/* 6) 动效可关（无障碍） */
@media (prefers-reduced-motion: reduce) {
  .card::after, .value-card::after, .stat-card::after, .st-work::after, .st-case::after,
  .st-course::after, .btn::after, .logo-panel::after, .empty::before, .st-empty::before { display: none; }
  /* 忙碌态转圈属于「状态指示」而非装饰，保留但降速，避免高频闪动 */
  .btn.is-busy::before { animation-duration: 1.4s; }
  .logo-panel .lp-mark { animation: none; }
}

/* ================= 课程学习界面（2026-10-08 点击课程卡进入） ================= */
.st-course { cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.st-course:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, .16); }
.st-course .st-link { pointer-events: none; }

.st-cd-hero {
  display: grid; grid-template-columns: 300px 1fr; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; background: var(--surface); margin-bottom: 18px;
}
.st-cd-hero .cover { min-height: 200px; background-size: cover; background-position: center; }
.st-cd-hero .main { padding: 18px 22px 20px; }
.st-cd-back {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted);
  font: 600 12.5px/1 inherit; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.st-cd-back:hover { color: var(--brand); border-color: var(--brand-line); }
.st-cd-hero h3 { font-size: 20px; margin: 12px 0 6px; }
.st-cd-hero .meta { font-size: 13px; color: var(--muted-2); margin-bottom: 8px; }
.st-cd-hero .sum { font-size: 13.5px; line-height: 1.75; }
.st-cd-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.st-cd-tags i {
  font-style: normal; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-dark); border: 1px solid var(--brand-line);
}
.st-cd-chapters { list-style: none; padding: 0; margin: 0; }
.st-cd-chapters li { display: flex; gap: 12px; align-items: center; padding: 11px 4px; border-bottom: 1px dashed var(--line); }
.st-cd-chapters li:last-child { border-bottom: 0; }
.st-cd-chapters .n {
  flex: none; width: 32px; height: 25px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--brand); border-radius: 8px;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
}
.st-cd-prog-note { font-size: 12.5px; color: var(--muted-2); margin-top: 10px; }
.badge.on { box-shadow: 0 0 0 3px rgba(255, 143, 60, .12); }
.st-empty.slim { padding: 18px; }
.st-empty.slim p { margin: 4px 0 0; }
.st-empty.slim .st-link { pointer-events: auto; cursor: pointer; }
@media (max-width: 860px) {
  .st-cd-hero { grid-template-columns: 1fr; }
  .st-cd-hero .cover { min-height: 150px; }
}

/* ================= 课程播放界面（2026-10-08） ================= */
.st-cd-act { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.st-cd-play { font-weight: 700; box-shadow: 0 6px 18px rgba(255, 143, 60, .28); }
.st-cd-play-hint { font-size: 12.5px; color: var(--muted-2); }

.st-cp-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.st-cp-head .t { flex: 1; min-width: 220px; }
.st-cp-head h3 { font-size: 17px; margin: 0 0 2px; }
.st-cp-head .t span { font-size: 12.5px; color: var(--muted-2); }
.st-cp-nav { display: flex; gap: 8px; }

.st-cp-body { display: grid; grid-template-columns: 1fr 280px; gap: 16px; align-items: start; }
.st-cp-video {
  width: 100%; aspect-ratio: 16 / 9; display: block; border: 0; border-radius: 12px;
  background: #000; box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}
.st-cp-novideo {
  aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface);
  text-align: center; padding: 20px;
}
.st-cp-novideo p { margin: 0; font-size: 13px; color: var(--muted-2); }

.st-cp-list { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.st-cp-list-h {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.st-cp-list-h b { font-size: 13.5px; }
.st-cp-list-h span { font-size: 12px; color: var(--muted-2); }
.st-cp-ch {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 14px; border: 0; border-bottom: 1px dashed var(--line);
  background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer;
  transition: background .16s var(--ease);
}
.st-cp-ch:last-child { border-bottom: 0; }
.st-cp-ch:hover { background: var(--surface-2); }
.st-cp-ch.on { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.st-cp-ch.seen:not(.on) .n { color: var(--ok); }
.st-cp-ch .n {
  flex: none; width: 30px; height: 24px; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; color: var(--brand); border-radius: 7px;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
}
.st-cp-ch .tt { flex: 1; line-height: 1.5; }
.st-cp-ch .dur { flex: none; font-size: 11px; color: var(--muted-2); }
.st-cp-ch .dur i {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok, #22c55e); margin-right: 4px;
}
.st-cp-ch .dur.none { opacity: .7; }
.st-cp-none { padding: 16px; font-size: 13px; color: var(--muted-2); margin: 0; }
.st-cp-tip { font-size: 12px; color: var(--muted-2); margin-top: 12px; }
@media (max-width: 900px) {
  .st-cp-body { grid-template-columns: 1fr; }
  .st-cp-list { order: 2; }
}

/* 网盘视频降级卡片（2026-10-08）：网盘禁止 iframe，改为跳转按钮 */
.st-cp-pan {
  aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  text-align: center; padding: 26px 22px;
}
.st-cp-pan .ic { font-size: 34px; line-height: 1; }
.st-cp-pan b { font-size: 15px; }
.st-cp-pan p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--muted-2); max-width: 470px; }
.st-cp-pan .pwd { font-size: 13.5px; }
.st-cp-pan .pwd b { color: var(--brand); letter-spacing: .6px; font-size: 15px; }
.st-cp-pan .tip { font-size: 12px; opacity: .85; }
.st-cp-pan .btn { margin-top: 4px; text-decoration: none; }

/* ---------- 合作客户墙（about，logo+名称） ---------- */
.client-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 12px; margin-top: 38px; }
.client-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  min-height: 88px; padding: 16px 12px 13px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease);
}
.client-chip img {
  height: 30px; max-width: 104px; object-fit: contain;
  filter: grayscale(1); opacity: .68;
  transition: filter .24s var(--ease), opacity .24s var(--ease);
}
.client-chip > span { font-size: 12.5px; font-weight: 560; color: var(--muted); letter-spacing: .02em; transition: color .24s var(--ease); }
.client-chip .mono { font-size: 15px; font-weight: 650; color: var(--ink-2); }
.client-chip:hover { transform: translateY(-3px); border-color: var(--brand-line); box-shadow: 0 10px 26px var(--brand-glow); }
.client-chip:hover img { filter: grayscale(0); opacity: 1; }
.client-chip:hover > span { color: var(--brand-dark); }
.client-note { margin-top: 20px; text-align: center; font-size: 12.5px; color: var(--muted-2); }
@media (max-width: 640px) { .client-wall { grid-template-columns: repeat(2, 1fr); gap: 10px; } .client-chip img { height: 26px; max-width: 88px; } }

/* ---------- 联系页地址条（浅色纸张纹理，深色主题自动切换） ---------- */
.map-paper {
  padding: 22px 20px;
  background:
    radial-gradient(400px 160px at 20% 0%, rgba(255, 106, 0, .10), transparent 60%),
    repeating-linear-gradient(0deg, #fafbfc, #fafbfc 23px, #f2f4f7 23px, #f2f4f7 24px),
    repeating-linear-gradient(90deg, #fafbfc, #fafbfc 23px, #f2f4f7 23px, #f2f4f7 24px);
}
html[data-theme="dark"] .map-paper {
  background:
    radial-gradient(400px 160px at 20% 0%, rgba(255, 106, 0, .12), transparent 60%),
    repeating-linear-gradient(0deg, #262220, #262220 23px, #2d2926 23px, #2d2926 24px),
    repeating-linear-gradient(90deg, #262220, #262220 23px, #2d2926 23px, #2d2926 24px);
}
html[data-theme="dark"] .map-paper #mapAddr { color: #b8aca0; }

/* ==========================================================================
   统一线性图标（icons.js）—— 所有界面图标共用一套 24×24 描边风格
   尺寸由 font-size 驱动（1em），颜色取 currentColor 自动适配深浅主题
   ========================================================================== */
.ic { display: inline-block; width: 1em; height: 1em; vertical-align: -.145em; flex: none; }
i.ic > svg { display: block; width: 100%; height: 100%; }
.ic-btn, .ic-lg { vertical-align: -.18em; }
/* 容器类图标位（原先用 emoji 字符）统一加大一点、颜色跟随容器 */
.ii-ico .ic, .vc-ico .ic, .q-ico .ic { width: 1em; height: 1em; }

/* ==========================================================================
   AI 创作工坊（ai-image.html）
   ========================================================================== */
.ai-layout {
  display: grid; grid-template-columns: 336px minmax(0, 1fr); gap: 26px; align-items: start;
}

/* ---------- 特效创新中心：工具网格卡片 · 构图模板版（20261022a） ----------
   模板构图：图标+标题同行 → 徽章 → 两行简介 → 底部「› + 去体验」胶囊 */
.ai-tool-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.ai-tool-card {
  position: relative; display: flex; flex-direction: column;
  padding: 22px 22px 18px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.ai-tool-card::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px;
  border-radius: 0 0 4px 4px; opacity: .7;
  background-image: linear-gradient(90deg, transparent, rgba(255, 122, 31, .55) 30%, rgba(255, 160, 80, .75) 50%, rgba(255, 122, 31, .55) 70%, transparent);
}
.ai-tool-card:hover { transform: translateY(-4px); border-color: var(--brand-line); box-shadow: var(--shadow-md); }
.ai-card-head { display: flex; align-items: center; gap: 12px; }
.ai-card-ico {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand);
}
.ai-card-ico svg { width: 22px; height: 22px; }
.ai-card-name { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
/* 徽章：本地运算工具用橙色实底突出，其余工具灰色描边 */
.ai-card-flag {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
  margin-top: 12px; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--ink-2); background: var(--bg-soft); border: 1px solid var(--line);
}
.ai-card-flag svg { width: 11px; height: 11px; }
.ai-card-flag-local {
  color: #fff; background: linear-gradient(135deg, var(--brand), #ff6a2b);
  border-color: transparent; box-shadow: 0 4px 10px rgba(255, 138, 43, .35);
}
/* 降噪：本地运算统一收敛为右上角小锁角标（替代原整行重复长徽标） */
.ai-card-lock {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 10px;
  color: #fff; background: linear-gradient(135deg, var(--brand), #ff6a2b);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 6px 14px -6px rgba(255, 106, 0, .75);
  cursor: help; transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ai-card-lock svg { width: 15px; height: 15px; }
.ai-tool-card:hover .ai-card-lock { transform: translateY(-1px) scale(1.05); box-shadow: 0 9px 18px -7px rgba(255, 106, 0, .9); }
.ai-card-desc { margin-top: 10px; font-size: 13.5px; color: var(--muted); line-height: 1.75; }
.ai-card-foot {
  margin-top: auto; padding-top: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ai-card-more { color: var(--muted-2); display: flex; align-items: center; transition: transform .18s var(--ease), color .18s var(--ease); }
.ai-card-more svg { width: 18px; height: 18px; }
.ai-card-cta {
  display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, #ff9330, #ff6a00);
  box-shadow: 0 8px 18px -8px rgba(255, 106, 0, .65);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.ai-tool-card:hover .ai-card-more { color: var(--brand); transform: translateX(3px); }
.ai-tool-card:hover .ai-card-cta { transform: translateX(2px); box-shadow: 0 10px 22px -8px rgba(255, 106, 0, .8); }
.ai-grid-note { max-width: 880px; margin: 22px auto 0; text-align: center; }
@media (max-width: 1080px) {
  .ai-tool-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ai-tool-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- AI 创新中心：分类区块 / 为你推荐 / 检索 / 新手引导（20261024c） ---------- */
.ai-tool-stack { display: flex; flex-direction: column; gap: 34px; }
.ai-cat-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.ai-cat-title { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.ai-cat-sub { font-size: 12.5px; color: var(--muted-2); }
.ai-empty { text-align: center; color: var(--muted-2); padding: 40px 0; }

.ai-rec { margin-bottom: 8px; }
.ai-rec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.ai-rec-title { font-size: 17px; font-weight: 800; color: var(--ink); }
.ai-rec-sub { font-size: 12.5px; color: var(--muted-2); }
.ai-rec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.ai-filter { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.ai-filter-box { display: flex; align-items: center; gap: 8px; flex: 1 1 280px; max-width: 460px; padding: 10px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.ai-filter-box:focus-within { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft); }
.ai-filter-ico { font-size: 14px; opacity: .6; }
.ai-filter-input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 14px; color: var(--ink); }
.ai-filter-input::placeholder { color: var(--muted-2); }
.ai-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ai-legend-dot { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), #ff6a2b); box-shadow: 0 0 0 3px rgba(255, 138, 43, .18); }

.ai-onboard { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(8, 10, 14, .62); }
.ai-onboard[hidden] { display: none; }
.ai-onboard-card { position: relative; width: min(440px, 100%); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); padding: 28px 26px 24px; }
.ai-onboard-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--bg-soft); color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.ai-onboard-close:hover { color: var(--ink); }
.ai-onboard-title { font-size: 21px; font-weight: 800; color: var(--ink); }
.ai-onboard-sub { margin: 6px 0 18px; font-size: 13px; color: var(--muted-2); }
.ai-onboard-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ai-onboard-list li { display: flex; gap: 12px; }
.ai-ob-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; background: var(--brand-soft); border: 1px solid var(--brand-line); }
.ai-onboard-list b { font-size: 14px; color: var(--ink); }
.ai-onboard-list p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.ai-onboard-go { width: 100%; justify-content: center; }

@media (max-width: 1080px) {
  .ai-rec-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ai-rec-grid { grid-template-columns: 1fr; }
  .ai-filter { gap: 10px; }
  .ai-legend { width: 100%; }
}

/* ---------- 左侧控制面板 ---------- */
.ai-panel {
  position: sticky; top: calc(var(--header-h) + 18px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px 20px 22px; box-shadow: var(--shadow-sm);
}
/* 面板头：标题加强层级 + 状态副标签 pill 化 + 底部分隔线；
   7 个 AI 工具页共用（ai-seq 的头内带模式切换 seg，靠 flex-wrap 自然换行） */
.ai-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 12px; flex-wrap: wrap;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.ai-panel-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.ai-panel-sub {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 11px; color: var(--muted-2); letter-spacing: .04em; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--line);
}
/* 状态圆点：品牌橙，示意「本地 / 实时」运行态 */
.ai-panel-sub::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand); flex: none;
}

/* 合并页模式切换（智能去背 / 分层抠图） */
.ai-subtabs {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px;
}
.ai-subtab {
  padding: 11px 24px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-soft); color: var(--muted); cursor: pointer;
  font-size: 14.5px; font-weight: 600; font-family: inherit; letter-spacing: .01em;
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.ai-subtab:hover { color: var(--ink); border-color: var(--line-strong); }
.ai-subtab.is-on {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2, #ff6a3d) 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 18px -8px rgba(255, 122, 38, .65);
}

.ai-field { margin-bottom: 15px; }
.ai-label {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px;
}
.ai-label-tip { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--muted-2); }

/* 分段控件 */
.ai-seg { display: flex; gap: 4px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 11px; padding: 3px; }
.ai-seg-btn {
  flex: 1; padding: 8px 4px; border: 0; border-radius: 8px; background: transparent;
  font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}
.ai-seg-btn:hover { color: var(--ink); }
.ai-seg-btn.is-on { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }

/* 纵横比 chips */
.ai-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-chip {
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft);
  font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer;
  transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.ai-chip:hover { color: var(--ink); border-color: var(--line-strong); }
.ai-chip.is-on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-dark); }

/* 输入 */
.ai-ta, .ai-input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--bg-soft); color: var(--ink); font-size: 13.5px; font-family: inherit;
  line-height: 1.7; resize: vertical;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.ai-ta:focus, .ai-input:focus { outline: none; border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft); }
.ai-ta::placeholder, .ai-input::placeholder { color: var(--muted-2); }

/* 示例词 */
.ai-ex-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ai-ex-label { font-size: 11.5px; color: var(--muted-2); }
.ai-ex {
  padding: 4px 10px; border: 1px dashed var(--line-2); border-radius: 999px; background: transparent;
  font-size: 11.5px; color: var(--muted); cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.ai-ex:hover { color: var(--brand); border-color: var(--brand-line); }

/* AI 优化结果预览条 */
.ai-opt {
  display: flex; align-items: baseline; gap: 8px; margin-top: 10px; padding: 9px 12px;
  border: 1px solid var(--brand-line); border-radius: 10px; background: var(--brand-soft);
  font-size: 12px; line-height: 1.65; color: var(--ink-2);
}
.ai-opt[hidden] { display: none; }
.ai-opt-k {
  flex: none; font-size: 11px; font-weight: 700; color: var(--brand);
  letter-spacing: .02em;
}
.ai-opt-t {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
}

/* 种子行 */
.ai-seed-row { display: flex; gap: 8px; }
.ai-seed-row .ai-input { flex: 1; }
.ai-seed-rand {
  flex: none; width: 38px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-soft);
  color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.ai-seed-rand:hover { color: var(--brand); border-color: var(--brand-line); }

/* 扩写开关 */
.ai-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; margin-bottom: 16px; }
.ai-check input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }

/* 生成按钮 */
.ai-gen-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 20px; border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, var(--brand), #f2760a); color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: .02em; font-family: inherit;
  box-shadow: 0 12px 26px -12px rgba(255, 122, 10, .6);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);
}
.ai-gen-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 30px -12px rgba(255, 122, 10, .68); }
.ai-gen-btn:disabled { opacity: .72; cursor: not-allowed; }
.ai-gen-spin {
  width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite; flex: none;
}
.ai-gen-status { min-height: 18px; margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.ai-gen-status.ok { color: #1a9e5c; }
.ai-gen-status.warn { color: #d97a06; }
.ai-gen-status.err { color: #e0452f; }
.ai-gen-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--muted-2); }

/* ---------- 右侧记录区 ---------- */
.ai-records { min-width: 0; }
.ai-records-head { display: flex; align-items: baseline; gap: 12px; margin: 2px 0 16px; flex-wrap: wrap; }
.ai-records-head h2 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.ai-records-count { font-size: 12.5px; color: var(--muted-2); }

/* 批量选择工具栏 */
.sq-rec-bar {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 10px; padding: 9px 12px;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  border-radius: var(--radius); flex-wrap: wrap;
}
.sq-rec-bar[hidden] { display: none; }
.sq-rec-selall { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); cursor: pointer; user-select: none; }
.sq-rec-selall input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.sq-rec-selcount { font-size: 13px; font-weight: 700; color: var(--brand-dark); }
.sq-rec-sep { flex: 0 0 1px; align-self: stretch; background: var(--brand-line); margin: 0 2px; }
.sq-rec-act {
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 6px 12px; cursor: pointer;
  transition: transform .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.sq-rec-act:hover { transform: translateY(-1px); border-color: var(--brand-line); color: var(--brand-dark); }
.sq-rec-act.danger { color: #d23b3b; border-color: rgba(210, 59, 59, .35); }
.sq-rec-act.danger:hover { background: rgba(210, 59, 59, .08); border-color: rgba(210, 59, 59, .6); }
.sq-rec-act.ghost { color: var(--muted); border-color: var(--line); }
.sq-rec-act.ghost:hover { color: var(--ink); border-color: var(--line-strong); }

/* 记录卡片多选 */
.ai-card { position: relative; }
.ai-card-pick {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  width: 22px; height: 22px; border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .82); border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .25); backdrop-filter: blur(2px);
}
.ai-card-pick input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; margin: 0; }
.ai-card.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft), var(--shadow-lg); }

/* 最新生成 hero 卡 */
.ai-latest-wrap { margin-bottom: 22px; }
.ai-latest {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px; box-shadow: var(--shadow-sm);
  animation: ai-pop .35s var(--ease);
}
@keyframes ai-pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ai-latest-img { border-radius: 13px; overflow: hidden; background: var(--bg-deep); aspect-ratio: 16 / 10; }
.ai-latest-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-latest-side { display: flex; flex-direction: column; align-items: flex-start; padding: 4px 2px; }
.ai-latest-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--brand);
  padding: 4px 10px; border-radius: 999px; background: var(--brand-soft); border: 1px solid var(--brand-line);
}
.ai-latest-prompt {
  margin: 12px 0 10px; font-size: 14px; line-height: 1.75; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ai-latest-saved { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: #1a9e5c; }
.ai-latest-saving { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.ai-latest-hint { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.ai-latest-acts { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; }

/* 记录网格 */
.ai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px; }
.ai-card {
  margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  animation: ai-pop .35s var(--ease);
}
.ai-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.ai-card-img { position: relative; aspect-ratio: 1 / 1; background: var(--bg-deep); }
.ai-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-card-tag {
  position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: #fff;
}
.ai-card-tag.warn { background: rgba(217, 122, 6, .92); }
.ai-card-tag.ok { background: rgba(26, 158, 92, .92); }
.ai-card figcaption { padding: 11px 12px 12px; }
.ai-card-prompt {
  margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em;
}
.ai-card-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.ai-card-name { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.ai-badge {
  padding: 1.5px 7px; border-radius: 6px; background: var(--bg-soft); border: 1px solid var(--line);
  font-size: 10.5px; color: var(--muted); white-space: nowrap;
}
.ai-badge.tag { color: var(--brand-dark); background: var(--brand-soft); border-color: var(--brand-line); }
.ai-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.ai-card-foot time { font-size: 11px; color: var(--muted-2); white-space: nowrap; }
.ai-card-acts { display: flex; gap: 4px; }
/* 分层记录卡：层清单按钮组（逐层下载） */
.ai-card-layers { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.ai-card-layers .ai-act { padding: 3px 8px; font-size: 11px; }
.ly-rec-head { margin-top: 30px; padding-top: 22px; border-top: 1px dashed var(--line); }
.ai-act {
  padding: 4px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft);
  font-size: 11.5px; color: var(--muted); cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.ai-act:hover { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); }
.ai-act.danger:hover { color: #e0452f; border-color: rgba(224, 69, 47, .4); background: rgba(224, 69, 47, .07); }
.ai-act.primary { color: #fff; background: var(--brand); border-color: var(--brand); font-weight: 600; }
.ai-act.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

.ai-more-wrap { text-align: center; margin-top: 22px; }
.ai-more {
  padding: 10px 30px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.ai-more:hover { border-color: var(--brand-line); color: var(--brand); }

/* ---------- AI 页响应式 ---------- */
/* 断点规则统一收敛到本文件末尾「AI 全站响应式」——
   必须置于全部 AI 基础规则之后：同特异性下后来者胜，写在前面会被基础规则反压
   （曾因写在 .efx-layout 基础规则之前导致平板横屏侧栏不收窄） */

/* ==========================================================================
   AI 抠图（ai-matting.html）
   ========================================================================== */
.mt-drop {
  border: 1.5px dashed var(--line-strong); border-radius: 13px;
  background: var(--bg-soft); padding: 26px 16px; text-align: center;
  cursor: pointer; transition: border-color .18s, background .18s;
}
.mt-drop:hover, .mt-drop:focus-visible, .mt-drop.is-drag {
  border-color: var(--brand); background: var(--brand-soft); outline: none;
}
.mt-drop-idle { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--muted-2); }
.mt-drop-t { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.mt-drop-s { font-size: 11px; color: var(--muted-2); }
.mt-drop-file { display: flex; align-items: center; gap: 10px; text-align: left; }
.mt-drop-file img { width: 46px; height: 46px; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); }
.mt-drop-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mt-drop-meta b {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px;
}
.mt-drop-meta i { font-style: normal; font-size: 11px; color: var(--muted-2); }
.mt-drop-x {
  margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1;
}
.mt-drop-x:hover { color: var(--brand); border-color: var(--brand-line); }
.mt-color-row { display: flex; align-items: center; gap: 9px; margin-top: 9px; font-size: 12.5px; color: var(--muted); }
.mt-color-row input[type="color"] {
  width: 34px; height: 30px; padding: 2px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer;
}
.mt-progress { margin-top: 12px; }
.mt-progress-bar {
  height: 7px; border-radius: 99px; background: var(--bg-soft);
  border: 1px solid var(--line); overflow: hidden;
}
.mt-progress-bar i {
  display: block; height: 100%; width: 2%; border-radius: 99px;
  background: var(--brand); transition: width .25s ease;
}
.mt-progress-t { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted-2); }
.mt-compare-wrap { margin-bottom: 26px; }
.mt-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mt-pane { margin: 0; min-width: 0; }
.mt-pane figcaption {
  font-size: 12px; font-weight: 600; color: var(--muted-2);
  margin-bottom: 7px; letter-spacing: .04em;
}
.mt-pane-img { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; }
.mt-pane-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mt-compare-acts { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
/* 透明底棋盘格（深浅主题通用，中性灰格） */
/* display:flex 元素的 [hidden] 守卫（同 .ai-opt[hidden] 惯例，防 display 覆盖 hidden） */
.mt-drop-idle[hidden], .mt-drop-file[hidden], .mt-color-row[hidden], .mt-progress[hidden] { display: none; }
.checker {
  background-image:
    linear-gradient(45deg, rgba(128, 128, 128, .18) 25%, transparent 25%, transparent 75%, rgba(128, 128, 128, .18) 75%),
    linear-gradient(45deg, rgba(128, 128, 128, .18) 25%, transparent 25%, transparent 75%, rgba(128, 128, 128, .18) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}
@media (max-width: 860px) {
  .mt-compare { grid-template-columns: 1fr; }
  .mt-pane-img { aspect-ratio: 1 / 1; }
}

/* ==========================================================================
   AI 页头部构图：标题区（工具子导航已上移至页头主导航，
   见 site.js NAV_AI + .site-header.nav-ai）
   ========================================================================== */
.page-head-ai { padding: 52px 0 34px; }
.page-head-ai h1 { font-size: clamp(26px, 3.2vw, 36px); }
.page-head-ai p { margin-top: 12px; font-size: 14px; line-height: 1.8; max-width: 76ch; color: var(--muted); }

/* 贴图工坊页头：价值主张 + 核心能力 chip + 本地渲染说明 */
.page-head-ai .tx-lead { margin-top: 12px; font-size: 15.5px; line-height: 1.75; max-width: 80ch; color: inherit; font-weight: 600; letter-spacing: -.01em; }
.page-head-ai .tx-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.page-head-ai .tx-chip { font-size: 12.5px; line-height: 1; padding: 7px 12px; border-radius: 999px; color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent); white-space: nowrap; }
.page-head-ai .tx-sign { margin-top: 12px; font-size: 12.5px; line-height: 1.7; color: var(--muted-2); max-width: 80ch; }

/* ==========================================================================
   特效贴图（ai-texture.html）：左深色预览舞台 + 右参数面板
   ========================================================================== */
.tx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 20px; align-items: start; }
.tx-stage {
  background: #14161a; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.tx-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 12px; }
.tx-stage-title { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.tx-stage-meta { font-size: 12px; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }
.tx-canvas-wrap { background: #000; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; position: relative; max-width: min(100%, 620px); margin: 0 auto; }
.tx-canvas-wrap canvas { width: 100%; height: 100%; display: block; }
/* Alpha 预览开启时，画布半透明，垫棋盘格以便看清透明区域（避免深色背景把半透明边缘压成黑边） */
.tx-canvas-wrap.alpha-vis {
  background-color: #2a2d33;
  background-image:
    linear-gradient(45deg, #3a3d44 25%, transparent 25%),
    linear-gradient(-45deg, #3a3d44 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #3a3d44 75%),
    linear-gradient(-45deg, transparent 75%, #3a3d44 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.tx-stage-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; background: #1b1e24; border-top: 1px solid rgba(255, 255, 255, .07); }
.tx-stage-bar .btn { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .16); }
.tx-stage-bar .btn:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .28); }
.tx-stage-bar .btn-ghost { background: transparent; }

/* 新手引导卡片（纯 CSS 关闭，无 JS） */
.tx-onboard { margin-bottom: 16px; }
.tx-onboard-x:checked ~ .tx-onboard-inner { display: none; }
.tx-onboard-inner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 9%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); font-size: 13.5px; line-height: 1.6; color: inherit; }
.tx-onboard-txt strong { color: var(--brand-dark); }
.tx-onboard-close { margin-left: auto; flex: none; cursor: pointer; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--muted-2); font-size: 18px; line-height: 1; transition: background .15s var(--ease), color .15s var(--ease); }
.tx-onboard-close:hover { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.tx-stage-tip { font-size: 11.5px; color: rgba(255, 255, 255, .5); margin-left: auto; }
.tx-stage-tip.ok { color: #7bd88f; }
.tx-stage-tip.err { color: #ff9a8a; }
.tx-stage-tip.warn { color: #ffd479; }

/* 贴图参数面板：两栏时吸附 + 限高 + 内部滚动（与 fxPanel 一致；移动端堆叠时复位） */
#txPanel {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  max-height: calc(100vh - var(--header-h) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
/* CPU 软件渲染回退徽标（浮于画布上方） */
.tx-cpu-badge {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  max-width: calc(100% - 20px); padding: 7px 12px;
  font-size: 11.5px; line-height: 1.5; color: #ffe9c4;
  background: rgba(28, 22, 8, .82); border: 1px solid rgba(255, 212, 121, .45);
  border-radius: 10px; backdrop-filter: blur(6px);
}
.tx-cpu-badge[hidden] { display: none; }
.tx-guide-p { font-size: 12.5px; line-height: 1.7; color: var(--ink-2, inherit); margin: 4px 0 8px; }
.tx-guide-ol { margin: 0 0 4px; padding-left: 20px; font-size: 12.5px; line-height: 1.8; color: var(--ink-2, inherit); }
.tx-guide-ol b { color: var(--brand); }

/* 可折叠参数组（复刻原版 Controls 分组） */
.tx-group { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); margin-bottom: 12px; overflow: hidden; }
.tx-group > summary {
  cursor: pointer; list-style: none; padding: 11px 14px;
  font-size: 13px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.tx-group > summary::-webkit-details-marker { display: none; }
.tx-group > summary::before {
  content: ''; width: 0; height: 0; flex: none;
  border-left: 5px solid var(--muted-2);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .16s var(--ease);
}
.tx-group[open] > summary::before { transform: rotate(90deg); }
.tx-group-sub { font-size: 11px; font-weight: 400; color: var(--muted-2); }
.tx-group-body { padding: 4px 14px 14px; }
.tx-group-body .ai-check:last-child { margin-bottom: 4px; }
.tx-reset {
  display: inline-block; margin: 2px 0 10px; padding: 5px 12px;
  font-size: 11.5px; font-family: inherit; cursor: pointer;
  color: var(--brand); background: var(--brand-soft);
  border: 1px solid var(--brand-line); border-radius: 999px;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.tx-reset:hover { background: var(--brand); color: #fff; }

/* ---------- #131 贴图页 UI 图标精修 ---------- */
/* 按钮内联图标（24 格线性 SVG） */
.btn-ic { width: 15px; height: 15px; flex: none; stroke-width: 2; opacity: .92; }
.tx-stage-bar .btn { height: 36px; padding: 0 14px; font-size: 12.5px; font-weight: 500; gap: 6px; border-radius: 10px; }
.tx-stage-bar .btn-ic { width: 14px; height: 14px; }

/* 折叠组箭头：三角块 → 圆角线性 V 形 */
.tx-group > summary::before {
  content: ''; width: 14px; height: 14px; flex: none;
  border: 0; background-color: var(--muted-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 5 16 12 9 19'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 5 16 12 9 19'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .18s var(--ease), background-color .18s var(--ease);
}
.tx-group > summary:hover::before { background-color: var(--brand); }
.tx-group[open] > summary::before { transform: rotate(90deg); }

/* 重置按钮：加回转箭头图标 */
.tx-reset { display: inline-flex; align-items: center; gap: 6px; }
.tx-reset::before {
  content: ''; width: 12px; height: 12px; flex: none; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 5 2 11 8 11'/%3E%3Cpath d='M4.6 15a8 8 0 1 0 1.9-8.4L2 11'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 5 2 11 8 11'/%3E%3Cpath d='M4.6 15a8 8 0 1 0 1.9-8.4L2 11'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 复选框：原生方块 → 圆角方形 + 橙色勾选 */
.ai-check input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; flex: none; margin: 0;
  border: 1.5px solid var(--line-strong); border-radius: 5px;
  background: var(--surface) center / 11px 11px no-repeat;
  cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.ai-check input[type="checkbox"]:hover { border-color: var(--brand); }
.ai-check input[type="checkbox"]:checked {
  background-color: var(--brand); border-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.ai-check input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }

/* 下拉框：原生箭头 → 细线性 chevron */
select.ai-input {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888f99' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px;
}
select.ai-input:hover { border-color: var(--line-strong); }

/* ==========================================================================
   AI 中心首页（ai.html）
   ========================================================================== */
.ai-center { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ai-tool-card {
  display: flex; flex-direction: column;
  padding: 26px 24px 24px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ai-tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.ai-tool-ico {
  width: 52px; height: 52px; border-radius: 15px; margin-bottom: 15px;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand); background: var(--brand-soft);
}
.ai-tool-ico svg { width: 26px; height: 26px; }
.ai-tool-card h2 { font-size: 19.5px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 9px; }
.ai-tool-card > p { font-size: 13.5px; line-height: 1.85; color: var(--ink-2); margin-bottom: 15px; }
.ai-tool-feats { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.ai-tool-feats li { position: relative; padding-left: 19px; font-size: 13px; color: var(--ink-2); }
.ai-tool-feats li::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--brand);
  transform: rotate(45deg);
}
/* 卡片是 flex 列：按钮沉底对齐，两张卡片视觉等高 */
.ai-tool-btn { margin-top: auto; align-self: flex-start; }

.ai-why-section { padding-top: 4px; }
.ai-why-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; text-align: center; margin-bottom: 24px; }
.ai-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ai-why-item { padding: 22px 18px; border-radius: 14px; text-align: center; background: var(--bg-soft); border: 1px solid var(--line); }
.ai-why-ico {
  width: 44px; height: 44px; border-radius: 13px; margin-bottom: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand); background: var(--brand-soft);
}
.ai-why-ico svg { width: 22px; height: 22px; }
.ai-why-item h3 { font-size: 15px; font-weight: 700; margin-bottom: 7px; }
.ai-why-item p { font-size: 12.5px; line-height: 1.8; color: var(--ink-2); }

/* 抠图记录卡上的「识别背景主色」色块 */
.mt-bg-badge { display: inline-flex; align-items: center; gap: 4px; }
.mt-bg-badge i {
  width: 9px; height: 9px; border-radius: 2px; display: inline-block;
  border: 1px solid rgba(0, 0, 0, .18);
}

@media (max-width: 860px) {
  .ai-center { grid-template-columns: 1fr; }
  .ai-why-grid { grid-template-columns: 1fr; }
  .ai-tool-card { padding: 20px 18px 20px; }
}

/* ---------- 序列图合成（ai-seq.html） ---------- */
.sq-cols-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sq-cols-row .ai-input { width: 78px; text-align: center; }
.sq-clear {
  margin-left: auto; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 12px; font-weight: 600; padding: 5px 12px;
  border-radius: 999px; cursor: pointer;
}
.sq-clear:hover { color: var(--brand); border-color: var(--brand-line); }
.sq-empty {
  padding: 26px 16px; text-align: center; font-size: 12.5px; line-height: 1.7;
  color: var(--muted-2); border: 1px dashed var(--line); border-radius: 13px; margin-bottom: 22px;
}
.sq-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; margin-bottom: 24px; }
.sq-item { position: relative; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--bg-soft); aspect-ratio: 1; }
.sq-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sq-item-n {
  position: absolute; left: 6px; top: 6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 6px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sq-item-x {
  position: absolute; right: 5px; top: 5px; width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 6px; background: rgba(0, 0, 0, .62); color: #fff;
  font-size: 11px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sq-item-x:hover { background: var(--brand); }
.sq-out-wrap { margin-top: 2px; }
.sq-out {
  border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: var(--bg-deep);
  padding: 16px; display: flex; justify-content: center; align-items: center; min-height: 120px;
}
.sq-out img { max-width: 100%; max-height: 54vh; display: block; }
.sq-out-acts { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.sq-out-tip { font-size: 12px; color: var(--muted-2); }

/* AI 中心页第三张工具卡（序列图合成）通栏展示 */
.ai-tool-card.is-wide { grid-column: 1 / -1; }
.ai-tool-card.is-wide .ai-tool-feats { flex-direction: row; flex-wrap: wrap; gap: 8px 26px; }
.ai-tool-card.is-wide .ai-tool-btn { align-self: flex-start; }

/* ==========================================================================
   AI 中心页新版式：左工具面板 + 右工具详情（对齐工具页两栏排版）
   ========================================================================== */
.ai-panel-head-l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-tool-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.ai-tool-opt {
  position: relative; display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft);
  cursor: pointer; font-family: inherit; overflow: hidden;
  transition: border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.ai-tool-opt:hover { border-color: var(--line-strong); transform: translateX(2px); }
.ai-tool-opt.is-on { background: var(--brand-soft); border-color: var(--brand-line); box-shadow: var(--shadow-sm); }
/* 选中态：左侧品牌竖条 */
.ai-tool-opt.is-on::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 24px; border-radius: 0 2px 2px 0; background: var(--brand);
}
.ai-tool-opt-ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.ai-tool-opt.is-on .ai-tool-opt-ico { color: var(--brand); border-color: var(--brand-line); }
.ai-tool-opt-ico svg { width: 20px; height: 20px; }
.ai-tool-opt-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ai-tool-opt-n { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ai-tool-opt-t { font-size: 11.5px; color: var(--muted-2); margin-top: 1px; }
/* 右侧箭头：hover / 选中时品牌色 + 右移微动效 */
.ai-tool-opt-x {
  margin-left: auto; flex: none; display: flex; color: var(--muted-2);
  transition: color .16s var(--ease), transform .16s var(--ease);
}
.ai-tool-opt-x svg { width: 16px; height: 16px; }
.ai-tool-opt:hover .ai-tool-opt-x { color: var(--brand); transform: translateX(2px); }
.ai-tool-opt.is-on .ai-tool-opt-x { color: var(--brand); }

/* ---------- 右侧详情卡 ---------- */
.ai-detail {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 28px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.ai-detail.ai-pop-run { animation: ai-pop .35s var(--ease); }
/* hero 横幅：负外边距出血到卡缘，渐变底 + 底部分隔线 */
.ai-detail-hero {
  display: flex; align-items: center; gap: 18px;
  margin: -26px -28px 22px; padding: 26px 28px 22px;
  background: linear-gradient(135deg, var(--brand-soft) 0%, rgba(255, 138, 43, 0) 72%);
  border-bottom: 1px solid var(--line);
}
.ai-detail-ico {
  flex: none; width: 64px; height: 64px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--brand-line); color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.ai-detail-ico svg { width: 32px; height: 32px; }
.ai-detail-hb { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ai-detail-name { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.ai-detail-tag { font-size: 12px; color: var(--muted-2); letter-spacing: .04em; }
/* 状态徽章：免费 / 本地处理 / 云端留存等 */
.ai-detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ai-detail-badge {
  padding: 2.5px 10px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--brand-line); color: var(--brand-dark);
  font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.ai-detail-desc { font-size: 14px; line-height: 1.9; color: var(--ink-2); margin-bottom: 18px; }
/* 桌面双列排布，宽屏更饱满 */
.ai-detail-feats {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px 22px;
}
.ai-detail-feats li { position: relative; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.ai-detail-feats li::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--brand); transform: rotate(45deg);
}
/* CTA 行：主按钮 + 免安装提示 */
.ai-tool-cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ai-tool-cta-note { font-size: 12px; color: var(--muted-2); }

/* ==========================================================================
   序列图拆分（ai-seq.html 拆分模式）
   ========================================================================== */
.sq-wh-row { display: flex; gap: 12px; margin-bottom: 10px; }
.sq-wh-item { flex: 1; min-width: 0; }
.sq-wh-item .ai-input { width: 100%; text-align: center; }
.sq-wh-presets { margin-top: 0; }

/* 拆分索引预览（上传后显示网格 + 序号） */
.sq-idx-wrap { margin-top: 12px; }
.sq-idx-box {
  display: flex; align-items: center; justify-content: center;
  max-height: 300px; overflow: auto;
  border: 1px solid var(--line); border-radius: 11px; background: var(--bg-deep); padding: 8px;
}
.sq-idx-box canvas { max-width: 100%; height: auto; display: block; border-radius: 6px; }
.sq-idx-meta { margin: 8px 2px 0; font-size: 12px; color: var(--muted-2); line-height: 1.5; }

/* 拆分结果网格 */
.sq-split-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.sq-split-item { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--surface); }
.sq-split-img {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background-color: var(--bg-deep);
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .05) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .05) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px;
}
.sq-split-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.sq-split-b { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; }
.sq-split-item-n { font-size: 11.5px; color: var(--muted-2); white-space: nowrap; }
.sq-split-dl { font-size: 11.5px; font-weight: 700; color: var(--brand); text-decoration: none; white-space: nowrap; }
.sq-split-dl:hover { text-decoration: underline; }

/* ---------- 序列图 20261030n：引导 / 间距 / 逐帧下载 / 拖拽排序 / 大图预览 ---------- */
.ai-unit { font-size: 12px; color: var(--muted-2); }
/* 逐帧下载角标（已选图片缩略图右下角） */
.sq-item-dl {
  position: absolute; right: 5px; bottom: 5px; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  border-radius: 6px; background: rgba(0, 0, 0, .62); color: #fff;
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.sq-item-dl:hover { background: var(--brand); transform: translateY(-1px); }
/* 拖拽排序 */
.sq-item[draggable="true"] { cursor: grab; }
.sq-item[draggable="true"]:active { cursor: grabbing; }
.sq-item.is-drag { opacity: .42; }
.sq-item.is-dragover { outline: 2px dashed var(--brand); outline-offset: -3px; }
.sq-item.is-dragover::after {
  content: ''; position: absolute; inset: 0; border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 10%, transparent); pointer-events: none;
}
/* 点击放大 */
.sq-zoom, .sq-split-img img { cursor: zoom-in; }
/* 结果操作条：滚动过长图时贴底常驻（实底 + 分隔线，避免浮层观感） */
.sq-out-wrap .sq-out-acts {
  position: sticky; bottom: 0; z-index: 3;
  padding: 12px 14px 10px; margin-top: 14px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-top: 1px solid var(--line); border-radius: 0 0 12px 12px;
}

/* 大图预览 */
.sq-lightbox {
  position: fixed; inset: 0; z-index: 1000; padding: 24px;
  display: flex; align-items: center; justify-content: center;
}
.sq-lightbox[hidden] { display: none; }
.sq-lightbox-mask { position: absolute; inset: 0; background: rgba(6, 8, 12, .82); }
.sq-lightbox-box { position: relative; max-width: min(92vw, 1200px); max-height: 90vh; }
.sq-lightbox-box img {
  max-width: 100%; max-height: 88vh; display: block; border-radius: 10px;
  box-shadow: 0 24px 64px -14px rgba(0, 0, 0, .72);
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, .06) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .06) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, .06) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .06) 75%);
  background-size: 18px 18px; background-position: 0 0, 9px 9px;
  background-color: #14161c;
}
.sq-lightbox-x {
  position: absolute; top: -14px; right: -14px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: var(--surface); color: var(--ink);
  font-size: 16px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-md);
}
.sq-lightbox-x:hover { color: var(--brand); }
@media (max-width: 560px) {
  .sq-lightbox { padding: 12px; }
  .sq-lightbox-x { top: 6px; right: 6px; }
}

/* ---------- 序列图 20261030o：视频抽帧 + 动画预览 ---------- */
.sq-vinfo { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--muted-2); }
.sq-vinfo b { color: var(--brand-dark); font-weight: 700; }

.sq-prev {
  margin-top: 14px; padding: 12px 14px 14px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--bg-soft);
}
.sq-prev-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.sq-prev-t { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.sq-prev-meta { font-size: 11.5px; color: var(--muted-2); }
.sq-prev-stage { min-height: 110px; display: flex; align-items: center; justify-content: center; }
.sq-prev-box { min-height: 0; padding: 10px; }
.sq-prev-box canvas { max-width: 100%; max-height: 32vh; display: block; }
.sq-prev-hint { margin: 0; font-size: 12.5px; color: var(--muted-2); text-align: center; }
.sq-prev-ctl { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; margin-top: 14px; }
.sq-prev-row { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) {
  .sq-prev-ctl { flex-direction: column; align-items: stretch; gap: 12px; }
  .sq-prev-row { justify-content: flex-start; }
}
.sq-prev-lb { font-size: 12px; color: var(--muted-2); }
.sq-prev-fps { width: 62px; text-align: center; }
.sq-prev-play { padding: 7px 16px; font-size: 12.5px; }

/* 曲线图 / 图表编辑器 */
.sq-curve-wrap { display: block; margin-top: 14px; }
.sq-curve-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.sq-curve { position: relative; width: 100%; max-width: 360px; }
.sq-curve svg {
  width: 100%; height: auto; display: block; aspect-ratio: 320 / 180;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  touch-action: none;
}
.sq-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .55; }
.sq-axis-lb { fill: var(--muted-2); font-size: 8px; font-family: var(--mono, monospace); }
.sq-curve-ref { stroke: var(--muted-2); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: .6; }
.sq-curve-path { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sq-curve-dot { fill: var(--brand-dark); stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sq-curve-h { fill: var(--brand-dark); stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: grab; }
.sq-curve-h:active { cursor: grabbing; }
.sq-curve-hl { stroke: var(--brand); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; opacity: .7; }
.sq-kf { fill: #fff; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: grab; }
.sq-kf:hover { fill: var(--brand-tint, #fff3ea); }
.sq-kf-end { fill: var(--muted-2); stroke: var(--muted-2); cursor: default; }
.sq-kf-sel { fill: var(--brand); stroke: var(--brand-dark); stroke-width: 2.5; r: 6; }
.sq-curve-reset {
  position: absolute; top: 6px; right: 6px;
  font-size: 11px; padding: 3px 9px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted-2);
  cursor: pointer;
}
.sq-curve-reset:hover { color: var(--ink); border-color: var(--brand); }
.sq-kf-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.sq-kf-read { font-size: 12px; color: var(--muted-2); font-family: var(--mono, monospace); }
.sq-kf-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sq-kf-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); cursor: pointer; font-size: 12px;
}
.sq-kf-row.is-sel { border-color: var(--brand); background: var(--brand-tint, #fff6ef); }
.sq-kf-idx { font-weight: 600; color: var(--brand); min-width: 18px; }
.sq-kf-xy { font-family: var(--mono, monospace); color: var(--muted-2); }
.sq-kf-ease { margin-left: auto; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); font-size: 12px; }
.sq-kf-del { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); color: var(--err, #d33); cursor: pointer; line-height: 1; }
.sq-kf-del:hover { border-color: var(--err, #d33); }
@media (max-width: 700px) {
  .sq-curve-wrap { align-items: stretch; }
  .sq-curve { max-width: 100%; }
}

/* 大图分步合成进度条 */
.sq-compose-bar {
  position: relative; height: 16px; margin: 8px 0 2px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line); overflow: hidden;
}
.sq-compose-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, var(--brand), var(--brand-dark));
  transition: width .12s linear;
}
.sq-compose-pct {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: var(--ink); font-family: var(--mono, monospace);
}

/* --- 序列图：P0 设计 token + 新组件（播放器 / 三视图 / 帧网格 / 对比） --- */
.ai-layout {
  --sq-radius: 14px;
  --sq-radius-sm: 10px;
  --sq-shadow: 0 10px 30px -18px rgba(20, 12, 4, .35);
  --sq-gap: 14px;
  --sq-ac: var(--brand);
  --sq-ac-d: var(--brand-dark);
  --sq-soft: rgba(255, 122, 10, .12);
}

/* 动画预览：播放器形态（单步 + 速度 + 区间） */
.sq-prev-step { display: inline-flex; gap: 6px; }
.sq-step-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--sq-radius-sm); cursor: pointer; font-size: 13px; line-height: 1;
  transition: all .15s ease;
}
.sq-step-btn:hover { border-color: var(--sq-ac); color: var(--sq-ac); background: var(--sq-soft); }
.sq-step-btn:active { transform: translateY(1px); }
.sq-prev-speed { width: 56px; text-align: center; }
.sq-prev-range { width: 52px; text-align: center; }

/* 结果区三视图 Tab */
.sq-tabs { display: flex; gap: 6px; margin: 4px 0 16px; flex-wrap: wrap; }
.sq-tab {
  padding: 7px 16px; font-size: 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer;
  transition: all .15s ease;
}
.sq-tab:hover { border-color: var(--sq-ac); color: var(--sq-ac); }
.sq-tab.is-on { background: var(--sq-ac); border-color: var(--sq-ac); color: #fff; font-weight: 600; }
.sq-tab-panel[hidden] { display: none; }

/* 帧网格视图 */
.sq-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.sq-fgrid-img {
  position: relative; border-radius: var(--sq-radius-sm); overflow: hidden;
  border: 1px solid var(--line); cursor: zoom-in;
}
.sq-fgrid-img img { display: block; width: 100%; height: auto; }
.sq-fgrid-n {
  position: absolute; left: 5px; top: 5px; font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(0, 0, 0, .55); padding: 1px 7px; border-radius: 999px;
}
.sq-fgrid-dl {
  position: absolute; right: 5px; top: 5px; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff; background: rgba(0, 0, 0, .5); border-radius: 7px;
  text-decoration: none; opacity: 0; transition: opacity .15s ease;
}
.sq-fgrid-img:hover .sq-fgrid-dl { opacity: 1; }

/* 抠像前后对比滑杆 */
.sq-cmp {
  position: relative; width: 100%; max-width: 440px; border-radius: var(--sq-radius-sm);
  overflow: hidden; border: 1px solid var(--line); background: var(--surface-2, #f3f1ee);
}
.sq-cmp-base { position: relative; }
.sq-cmp-base img { display: block; width: 100%; height: auto; }
.sq-cmp-top {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  clip-path: inset(0 50% 0 0);
}
.sq-cmp-top img { display: block; width: 100%; height: auto; }
.sq-cmp-tag {
  position: absolute; top: 6px; font-size: 11px; color: #fff;
  background: rgba(0, 0, 0, .55); padding: 2px 8px; border-radius: 999px;
}
.sq-cmp-tag.a { left: 6px; }
.sq-cmp-tag.b { right: 6px; }
.sq-cmp-range { width: 100%; margin-top: 8px; accent-color: var(--sq-ac); cursor: ew-resize; }

/* ============ 序列图：响应式（P1-3） ============ */
@media (max-width: 900px) {
  .ai-panel { position: static; }
  .sq-out img { max-height: 48vh; }
  .sq-prev-ctl { gap: 10px 16px; }
  .sq-prev-stage { min-height: 120px; }
}
@media (max-width: 560px) {
  .sq-out-acts { gap: 8px; }
  .sq-out-acts .btn, .sq-out-acts .sq-mini-btn { flex: 1 1 auto; min-width: 116px; justify-content: center; }
  .sq-fgrid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
  .sq-tabs { flex-wrap: wrap; }
  .sq-prev-row .ai-input { width: 60px; }
  .sq-cmp { max-width: 100%; }
  .sq-prev-row { flex-wrap: wrap; }
}

/* --- 序列图：视频变速 / 抠像去背 --- */
.sq-unit { font-size: 12px; color: var(--muted-2); white-space: nowrap; }
.sq-cols-row .ai-input[type="number"] { width: 68px; }
.sq-slider-row { display: flex; align-items: center; gap: 12px; padding-right: 4px; }
.sq-slider-row input[type="range"] { flex: 1 1 auto; min-width: 0; height: 22px; accent-color: var(--brand); cursor: pointer; }
.sq-slider-v { flex: 0 0 auto; min-width: 30px; padding-right: 2px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.sq-key-color { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sq-key-color input[type="color"] {
  width: 46px; height: 30px; padding: 2px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface-2, transparent); cursor: pointer;
}
.sq-mini-btn {
  padding: 5px 11px; font-size: 12px; border-radius: 7px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-2); cursor: pointer;
}
.sq-mini-btn:hover { border-color: var(--brand); color: var(--brand); }
.sq-key-sw {
  width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--line); display: inline-block; background: #00ff00;
}
.sq-key-hex { font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
#sqKeyOpts .ai-check { margin-bottom: 10px; }
.sq-key-color[hidden], .sq-mini-btn[hidden] { display: none; }

/* --- 序列图：视频预览 + 可视化调节时间轴 --- */
.sq-vp { margin-bottom: 24px; }
.sq-vp[hidden] { display: none; }
.sq-vp-stage {
  position: relative; min-height: 130px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px;
  background: #0b0d12;
  display: flex; align-items: center; justify-content: center;
}
.sq-vp-stage video { display: block; width: 100%; max-height: 44vh; background: #000; }
.sq-vp-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; color: var(--muted-2); pointer-events: none;
}
.sq-vp-ph[hidden] { display: none; }
.sq-vp-bar { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-top: 12px; }
.sq-vp-play { padding: 7px 16px; font-size: 12.5px; }
.sq-vp-time { font-size: 12.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.sq-vp-loop { margin: 0; }
.sq-scrub { margin-top: 14px; }
.sq-scrub-track {
  position: relative; height: 36px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2);
  touch-action: none;
}
.sq-scrub-sel {
  position: absolute; top: 0; bottom: 0; border-radius: 8px;
  background: var(--brand-soft); pointer-events: none;
}
.sq-scrub-prog {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 8px 0 0 8px;
  background: rgba(255, 255, 255, .10); border-right: 1px solid var(--brand);
  pointer-events: none;
}
.sq-scrub-ticks { position: absolute; inset: 0; pointer-events: none; }
.sq-tick {
  position: absolute; top: 6px; bottom: 6px; width: 2px; margin-left: -1px;
  background: var(--brand); opacity: .75; border-radius: 1px;
}
.sq-scrub-h {
  position: absolute; top: -4px; bottom: -4px; width: 20px; margin-left: -10px;
  cursor: ew-resize; display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.sq-scrub-h i {
  display: block; width: 8px; height: 100%; border-radius: 4px;
  background: var(--brand); box-shadow: 0 0 0 2px var(--surface);
}
.sq-scrub-h:hover i { background: var(--brand-dark); }
.sq-scrub-ax {
  display: flex; justify-content: space-between; margin-top: 5px;
  font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums;
}
.sq-vp-tip { margin: 8px 0 0; font-size: 12px; line-height: 1.7; color: var(--muted-2); }
@media (max-width: 700px) {
  .sq-vp-bar { gap: 8px; }
  .sq-vp-play { padding: 6px 13px; }
}

/* ==========================================================================
   特效模型（ai-effect.html）
   布局：左 3D 视口 + 右控制面板（参考工具站「网感出图」形态）
   ========================================================================== */
.efx-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 26px; align-items: start;
}
.efx-stage { min-width: 0; }
.efx-viewport {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: #0b0b10;
  aspect-ratio: 16 / 10; box-shadow: var(--shadow-sm);
}
.efx-viewport canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.efx-viewport canvas:active { cursor: grabbing; }
.efx-vp-hint {
  position: absolute; left: 12px; bottom: 10px; margin: 0;
  font-size: 11px; letter-spacing: .04em; color: rgba(255, 255, 255, .42);
  pointer-events: none; user-select: none;
}
.efx-stage-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.efx-res-select { width: auto; padding: 6px 8px; font-size: 12.5px; }
.efx-layer-btns { display: flex; gap: 6px; margin-top: 6px; }
.efx-layer-btns .btn { flex: 1; font-size: 12px; padding: 5px 8px; }
.efx-layer-btns .btn:disabled { opacity: .4; cursor: not-allowed; }

/* 快速上手引导 */
.efx-guide {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8, 8, 12, .62); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.efx-guide-card {
  max-width: 460px; width: 100%;
  background: var(--bg-soft); border: 1px solid var(--brand-line);
  border-radius: 16px; padding: 22px 24px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
}
.efx-guide-card h3 { margin: 0 0 12px; font-size: 17px; color: var(--brand); }
.efx-guide-card ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.efx-guide-card li { font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.efx-guide-card b { color: var(--ink-1); }
.efx-guide-btns { margin-top: 16px; display: flex; justify-content: flex-end; }
.efx-help-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: 6px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--bg-soft); color: var(--ink-2);
  font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: all .14s var(--ease);
}
.efx-help-btn:hover { border-color: var(--brand); color: var(--brand); }
.efx-stage-tip { font-size: 11.5px; color: var(--muted-2); margin-left: auto; }
.efx-stage-tip.ok { color: #1a9e5c; }
.efx-stage-tip.err { color: #e0452f; }

/* 控制面板：两栏布局下作为「吸附 + 限高 + 内部滚动」列，避免参数列表把整页拉到 3000+ px。
   （限高规则须在响应式堆叠查询中复位，否则移动端会被锁死在一屏内） */
#fxPanel {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  max-height: calc(100vh - var(--header-h) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

/* 创建形态结构 */
.efx-rebuild {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; margin-bottom: 16px;
  border: 1px dashed var(--brand-line); border-radius: 12px;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.efx-rebuild:hover { border-style: solid; transform: translateY(-1px); }
.efx-rebuild svg { flex: none; }
.efx-save { margin-bottom: 12px; border-color: var(--line-strong); background: var(--bg-soft); color: var(--ink-2); }
.efx-save:hover { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-dark); }

/* 特效收藏卡片（纯参数，无图） */
.efx-rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.efx-rec {
  padding: 13px 14px 12px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.efx-rec:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.efx-rec-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.efx-rec-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.efx-rec-foot time { font-size: 11px; color: var(--muted-2); white-space: nowrap; }

/* 参数滑块 */
.efx-range-row { display: flex; align-items: center; gap: 12px; }
.efx-range-row input[type="range"] { flex: 1; height: 22px; accent-color: var(--brand); cursor: pointer; }
.efx-range-row output {
  flex: none; min-width: 44px; text-align: right;
  font-size: 12.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums;
}

/* 配色 chips */
.efx-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  vertical-align: -1px; flex: none;
}
.efx-color-chip { display: inline-flex; align-items: center; gap: 4px; }
.efx-color-chip .efx-dot + .efx-dot { margin-left: -1px; }

/* ============ f 批新增：缩略图网格 / 参数分组 / UV / 变换 / 统计 ============ */
/* 视口统计徽章 */
.efx-stat {
  position: absolute; top: 10px; left: 12px; z-index: 2;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(10, 10, 16, .62); border: 1px solid rgba(255, 255, 255, .12);
  font-size: 11px; font-weight: 600; letter-spacing: .03em; color: rgba(255, 255, 255, .82);
  font-variant-numeric: tabular-nums; pointer-events: none; user-select: none;
  backdrop-filter: blur(6px);
}
.efx-stat[hidden] { display: none; }

/* 类型缩略图网格 */
.efx-thumb-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  max-height: 264px; overflow-y: auto; padding: 2px;
}
.efx-thumb {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 5px 4px 4px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-soft); cursor: pointer; font-family: inherit;
  transition: border-color .14s var(--ease), background .14s var(--ease), transform .14s var(--ease);
}
.efx-thumb:hover { border-color: var(--brand-line); transform: translateY(-1px); }
.efx-thumb.is-on { border-color: var(--brand); background: var(--brand-soft); }
.efx-thumb canvas { width: 100%; height: auto; display: block; border-radius: 6px; background: #0c0c12; }
.efx-thumb-label { font-size: 10.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.efx-thumb.is-on .efx-thumb-label { color: var(--brand-dark); }
.efx-thumb-fav {
  position: absolute; top: 3px; right: 4px; z-index: 2;
  font-size: 11px; line-height: 1; cursor: pointer; user-select: none;
  color: rgba(255,255,255,.55); text-shadow: 0 1px 2px rgba(0,0,0,.6);
  padding: 1px 2px;
}
.efx-thumb { position: relative; }
.efx-thumb-fav.is-on { color: #ffcf3a; }

/* 模型库工具栏：分类 / 搜索 / 收藏最近 / 列数 */
.efx-lib-bar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.efx-lib-tabs { display: flex; gap: 6px; }
.efx-lib-tab {
  flex: 1; padding: 6px 4px; font-size: 12px; font-weight: 600; font-family: inherit;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft);
  color: var(--ink-2); cursor: pointer; transition: all .14s var(--ease);
}
.efx-lib-tab:hover { border-color: var(--brand-line); }
.efx-lib-tab.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.efx-lib-search .ai-input { width: 100%; padding: 7px 10px; font-size: 13px; }
.efx-lib-cats { display: flex; flex-wrap: wrap; gap: 5px; }
.efx-cat {
  padding: 4px 9px; font-size: 11.5px; font-weight: 600; font-family: inherit;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft);
  color: var(--ink-2); cursor: pointer; transition: all .14s var(--ease);
}
.efx-cat:hover { border-color: var(--brand-line); }
.efx-cat.is-on { border-color: var(--brand); background: var(--brand); color: #fff; }
.efx-lib-cols { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.efx-lib-cols .ai-input { width: auto; padding: 4px 6px; }
.efx-lib-empty {
  grid-column: 1 / -1; padding: 24px 12px; text-align: center;
  font-size: 12.5px; color: var(--ink-3); line-height: 1.6;
}

/* 参数分组 */
.efx-param-group {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft);
}
.efx-group-title { font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: .02em; }

/* 形态开关行 */
.efx-flag-row { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; }
.efx-flag-row .ai-check { margin: 0; }
.efx-flag-row label[hidden] { display: none; }

/* 折叠区（变换 / UV / 纹理） */
.efx-xform { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); }
.efx-xform > summary {
  padding: 10px 12px; font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  cursor: pointer; list-style: none; user-select: none;
}
.efx-xform > summary::-webkit-details-marker { display: none; }
.efx-xform > summary::before { content: '▸ '; color: var(--muted-2); }
.efx-xform[open] > summary::before { content: '▾ '; }
.efx-xform > summary:hover { color: var(--brand-dark); }
.efx-xform-body { display: flex; flex-direction: column; gap: 12px; padding: 0 12px 12px; }
.efx-xform-body .efx-param-group { margin-bottom: 0; }

/* UV 预览画布 */
.efx-uv-canvas {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 10px; background: #0a0a10;
}

/* 断点统一收敛到「AI 页响应式」：≤1080 紧凑两栏（1fr + 300px 面板），≤860 单列 */
@media (max-width: 860px) {
  .efx-viewport { aspect-ratio: 4 / 3; }
  .efx-stage-tip { margin-left: 0; width: 100%; }
  .efx-thumb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 220px; }
}

/* ==========================================================================
   AI 分层抠图（ai-layer.html）
   布局沿用「左工具面板 + 右结果」两栏；右侧为对比区 + 图层网格
   ========================================================================== */
.ly-compare-wrap { margin-bottom: 24px; }
/* 结果区两个操作按钮：下载全部 PNG + 一键生成 PSD（品牌色实底，区分主次） */
.ly-psd-btn {
  margin-left: 0; color: #fff; background: var(--brand); border-color: transparent;
}
.ly-psd-btn:hover { background: var(--brand-dark); color: #fff; border-color: transparent; }
/* 「保存修改」：重新编辑载入后覆盖保存原记录（品牌实底，主操作） */
.ly-save-cloud { margin-left: 0; color: #fff; background: var(--brand); border-color: transparent; }
.ly-save-cloud:hover { background: var(--brand-dark); color: #fff; border-color: transparent; }
/* [hidden] 守卫（flex 子元素，防 display 覆盖 hidden） */
.ly-psd-btn[hidden], #lySavePng[hidden], #lySaveCloud[hidden] { display: none; }
/* 重新编辑载入（无原始文件）时，合成预览独占整行 */
.ly-compare-wrap.is-solo .mt-compare { grid-template-columns: 1fr; }

/* 图层网格 */
.ly-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px; margin-top: 4px;
}
.ly-item {
  margin: 0; min-width: 0;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.ly-item:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ly-item-img {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background-color: var(--bg-deep); border-bottom: 1px solid var(--line);
}
.ly-item-img canvas {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block;
}
.ly-item figcaption { padding: 10px 11px 11px; }
.ly-item-b { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ly-item-dot {
  flex: none; width: 10px; height: 10px; border-radius: 3px; display: inline-block;
  border: 1px solid rgba(0, 0, 0, .16);
}
.ly-item-b b { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.ly-item-b span {
  font-size: 10.5px; color: var(--muted-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ly-item-m { margin-top: 3px; font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.ly-item-dl {
  margin-top: 8px; width: 100%; padding: 6px 0;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft);
  font-size: 11.5px; font-weight: 700; color: var(--ink-2); font-family: inherit; cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.ly-item-dl:hover { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); }

/* 分层抠图：图层管理（显隐 / 重命名 / 排序 / 合并） + 示例库 */
.ly-item.is-hidden { opacity: .5; }
.ly-item.is-hidden .ly-item-img { filter: grayscale(.6); }
.ly-eye {
  flex: none; width: 24px; height: 24px; padding: 0; border: 1px solid var(--line);
  border-radius: 7px; background: var(--bg-soft); color: var(--ink-2); cursor: pointer;
  font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: all .16s var(--ease);
}
.ly-eye:hover { border-color: var(--brand-line); color: var(--brand); }
.ly-item-name {
  flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--ink);
  border: 1px solid transparent; border-radius: 7px; padding: 3px 6px; background: transparent;
  font-family: inherit; width: 100%;
}
.ly-item-name:hover { border-color: var(--line); background: var(--bg-soft); }
.ly-item-name:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.ly-item-acts { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.ly-act {
  flex: none; width: 30px; height: 28px; padding: 0; border: 1px solid var(--line);
  border-radius: 7px; background: var(--bg-soft); color: var(--ink-2); cursor: pointer;
  font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: all .16s var(--ease);
}
.ly-act:hover { border-color: var(--brand-line); color: var(--brand); background: var(--brand-soft); }
.ly-examples { display: flex; flex-wrap: wrap; gap: 8px; }
.ly-example {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  font-size: 12.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; transition: all .16s var(--ease);
}
.ly-example:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); }

@media (max-width: 860px) {
  .ly-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
}

/* ==========================================================================
   AI 全站响应式（ai.html + 五个工具页）
   置于全部 AI 基础规则之后——同特异性下后来者胜，防止被基础规则反压。
   桌面 >1080：两栏（侧栏 336px）；
   平板横屏 861–1080：紧凑两栏（侧栏 300px），AI 中心工具选择器回单列
     （300px 侧栏内双列每格仅 ~135px，标题/描述必折行；≤860 全宽双列不受影响，保留）；
   平板竖屏/手机横屏 ≤860：单列堆叠（工具选择器全宽双列网格）；
   手机 ≤620：AI 中心工具选择器回单列。
   ========================================================================== */
@media (max-width: 1080px) {
  /* 工具页：紧凑两栏 */
  .ai-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 18px; }
  .efx-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
  .tx-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
  .ai-latest { grid-template-columns: 1fr; }
  .ai-latest-img { aspect-ratio: 16 / 9; }
  .ai-panel { padding: 16px 16px 18px; }
  /* AI 中心工具选择器：双列网格只适合 ≤860 全宽构图（每格 ~330px）；
     本区间侧栏仅 300px，双列每格 ~135px 会把标题/描述挤折行，
     由下方 861–1080 range 块回退为单列横排条目。 */
  .ai-detail { padding: 22px; }
  .ai-detail-hero { margin: -22px -22px 18px; padding: 20px 22px 18px; gap: 14px; }
  .ai-detail-ico { width: 54px; height: 54px; border-radius: 15px; }
  .ai-detail-ico svg { width: 27px; height: 27px; }
  .ai-detail-name { font-size: 19px; }
  .ai-detail-feats { gap: 8px 16px; }
}

/* ---- AI 区页头：≤1080 即收汉堡抽屉 ----
   主导航在 AI 区是 7 个工具（项名最长「AI 分层抠图」），861–1080 区间内联会挤压换行，
   不如直接走抽屉（样式复用下方 ≤860 抽屉规则子集，.site-header 限定，
   不影响普通页在该区间继续内联）。放在基础规则与 ≤860 抽屉块之后，同特异性下后来者胜。 */
@media (max-width: 1080px) {
  .site-header .main-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    flex-direction: column; align-items: stretch; gap: 2px; padding: 14px 20px 26px;
    background: var(--surface); border-top: 1px solid var(--line); overflow-y: auto;
    transform: translateX(100%); transition: transform .28s var(--ease); margin-left: 0;
  }
  body.nav-open .site-header .main-nav { transform: none; }
  .site-header .main-nav a { padding: 13px 12px; font-size: 15.5px; border-radius: 12px; }
  .site-header .main-nav a.active::after { display: none; }
  .site-header .main-nav a.active { background: var(--brand-soft); }
  .site-header .main-nav .nav-mobile-extra {
    display: block; margin-top: 12px; padding-top: 16px;
    border-top: 1px dashed var(--line-2);
  }
  .site-header .nav-x-label {
    display: block; margin: 0 12px 9px; font-size: 11px; font-weight: 600;
    letter-spacing: .14em; color: var(--muted-2);
  }
  .site-header .main-nav .nav-x-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; margin-bottom: 6px; font-size: 15.5px;
    background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px;
  }
  .site-header .nav-x-item .nx-ic { flex: none; color: var(--brand); }
  .site-header .nav-x-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .site-header .nav-x-txt b {
    font-size: 14px; font-weight: 650; color: var(--ink); letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .site-header .nav-x-txt i { font-style: normal; font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }
  /* 汉堡 ↔ X 动画 + 抽屉链接限宽居中 + 底部登录入口 */
  .site-header .nav-toggle span,
  .site-header .nav-toggle span::before,
  .site-header .nav-toggle span::after {
    transition: transform .24s var(--ease), top .24s var(--ease), background .18s var(--ease);
  }
  body.nav-open .site-header .nav-toggle span { background: transparent; }
  body.nav-open .site-header .nav-toggle span::before { top: 0; transform: rotate(45deg); }
  body.nav-open .site-header .nav-toggle span::after { top: 0; transform: rotate(-45deg); }
  body.nav-open .back-top { opacity: 0; visibility: hidden; pointer-events: none; }
  .site-header .nav-toggle { display: flex; margin-left: auto; }
  .site-header .header-actions { margin-left: 0; }
  .site-header .main-nav a,
  .site-header .nav-mobile-extra,
  .site-header .nav-cta { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
  .site-header .nav-cta:not([hidden]) {
    display: flex; align-items: center; justify-content: center;
    margin-top: auto; padding: 13px 20px; border-radius: 12px;
    background: linear-gradient(180deg, var(--brand), #f2760a); color: #fff;
    font-size: 15px; font-weight: 600; letter-spacing: .02em;
    box-shadow: 0 10px 22px -12px rgba(255, 122, 10, .55);
  }
}

/* 861–1080 平板横屏：AI 中心工具选择器回单列横排条目（icon 左 + 文字右），
   侧栏 300px 内双列格子过窄必折行；≤860 起布局堆叠、容器全宽，仍走上方双列网格。 */
@media (min-width: 861px) and (max-width: 1080px) {
  .ai-tool-opts { display: flex; flex-direction: column; gap: 8px; }
  .ai-tool-opt-x { display: flex; }
}

@media (max-width: 860px) {
  .ai-layout, .efx-layout { grid-template-columns: 1fr; gap: 16px; }
  /* 堆叠为单列后，控制面板恢复常规文档流（取消吸附/限高/内滚） */
  #fxPanel { position: static; max-height: none; overflow: visible; top: auto; }
  #txPanel { position: static; max-height: none; overflow: visible; top: auto; }
  /* 布局堆叠后工具选择器容器全宽（~700px），双列网格每格 ~330px 横排条目，构图饱满 */
  .ai-tool-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ai-tool-opt-x { display: none; }
  .tx-layout { grid-template-columns: 1fr; gap: 16px; }
  .ai-panel { position: static; padding: 16px 15px 18px; }
  /* 窄屏：画布占满，导出按钮改单行横向滚动（不再换行挤压），隐藏冗余提示 */
  .tx-canvas-wrap { max-width: 100%; }
  .tx-stage-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 14px; -webkit-overflow-scrolling: touch; }
  .tx-stage-bar .btn { flex: 0 0 auto; }
  .tx-stage-tip { display: none; }
  .ai-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .ai-latest { padding: 12px; }
  .ai-records-head h2 { font-size: 17px; }
  .ai-gen-btn { padding: 12px 16px; font-size: 14.5px; }
  .ai-detail { padding: 20px 18px; }
  .ai-detail-hero { margin: -20px -18px 16px; padding: 18px 18px 16px; }
  .ai-detail-name { font-size: 19px; }
  .ai-detail-ico { width: 52px; height: 52px; }
  .ai-detail-ico svg { width: 27px; height: 27px; }
  .ai-detail-feats { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .ai-tool-opts { grid-template-columns: 1fr; }
  .ai-tool-opt-x { display: flex; }
  .ai-detail-name { font-size: 18px; }
  .ai-detail-badge { font-size: 10.5px; padding: 2px 8px; }
  .page-head-ai { padding: 42px 0 26px; }
}

/* ========== 动效节奏（ai-rhythm）预设 chips ========== */
.rh-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rh-preset {
  border: 1px solid var(--line, #e6ded6); background: transparent; border-radius: 10px;
  padding: 8px 4px; font: inherit; font-size: 12.5px; color: var(--ink-2, #3d3730);
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.rh-preset:hover { border-color: var(--brand, #ff6a00); color: var(--brand, #ff6a00); }
.rh-preset.is-on {
  border-color: var(--brand, #ff6a00); background: var(--brand-soft, #fff5ed);
  color: var(--brand, #ff6a00); font-weight: 600;
}
.rh-preset-group {
  grid-column: 1 / -1;
  font-size: 12px; font-weight: 600; letter-spacing: .5px;
  color: var(--muted-2, #8a8178); margin: 10px 0 6px;
}
.rh-preset-group:first-child { margin-top: 0; }
.ai-check-inline { margin-top: 8px; }
.efx-color-row { margin-top: 8px; align-items: center; gap: 10px; }
.efx-color-row input[type=color] {
  width: 46px; height: 32px; padding: 2px; border: 1px solid var(--line, #e6ded6);
  border-radius: 8px; background: transparent; cursor: pointer;
}
.efx-color-row input[type=color]:disabled { opacity: .4; cursor: not-allowed; }
.efx-color-row output { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted-2, #8a8178); }
/* 时间轴：起手/持续/收尾 = 时长滑块 + 缓动下拉 同行紧凑排列 */
.rh-tl-seg { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 15px; }
.rh-tl-seg .ai-field { flex: 1; min-width: 0; margin-bottom: 0; }
.rh-tl-seg .rh-tl-ease { flex: none; width: 92px; }
@media (max-width: 620px) {
  .rh-tl-seg { gap: 7px; }
  .rh-tl-seg .rh-tl-ease { width: 78px; }
}
/* 更多导出：按钮网格 */
.rh-export-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rh-export-grid .btn { width: 100%; }
@media (max-width: 620px) { .rh-export-grid { grid-template-columns: repeat(2, 1fr); } }
/* 云端预设：保存行 + 列表 */
.rh-cloud-save { display: flex; gap: 8px; align-items: center; }
.rh-cloud-save .ai-input { flex: 1; min-width: 0; }
.rh-cloud-save .btn { flex: none; }
.rh-cloud-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rh-cloud-item {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line, #e6ded6); border-radius: 10px;
  padding: 9px 12px; background: var(--surface, #fff);
}
.rh-cloud-name { font-weight: 600; font-size: 13.5px; }
.rh-cloud-meta { flex: 1; min-width: 0; font-size: 12px; color: var(--muted-2, #8a8178); }
.rh-cloud-item .btn { flex: none; }
@media (max-width: 620px) {
  .rh-cloud-save { flex-direction: column; align-items: stretch; }
  .rh-cloud-item { flex-wrap: wrap; }
  .rh-cloud-meta { flex-basis: 100%; }
}

/* ==========================================================================
   AI 区主导航：排版 + 动效（k 后批次，仅 .site-header.nav-ai、桌面 >1080）
   排版：当前项胶囊化（brand-soft 底 + 内描边）；动效：hover 微上浮 +
   下划线居中生长、当前项底部渐变条流光、入场逐项滑入（backwards 填充，
   结束后不锁 transform，hover 位移不受影响）；抽屉档（≤1080）不参与。
   ========================================================================== */
@media (min-width: 1081px) {
  .site-header.nav-ai .main-nav { gap: 3px; }
  .site-header.nav-ai .main-nav a {
    padding: 7px 13px; border-radius: 999px; letter-spacing: .01em;
    transition: color .18s var(--ease), background .18s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
  }
  .site-header.nav-ai .main-nav a:hover {
    color: var(--ink); background: var(--bg-soft);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -10px rgba(232, 92, 0, .45);
  }
  .site-header.nav-ai .main-nav a::before { transform-origin: center; }
  /* 当前工具：胶囊 + 流光下划线（::after 重定义） */
  .site-header.nav-ai .main-nav a.active {
    color: var(--brand-dark); background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px var(--brand-line);
  }
  .site-header.nav-ai .main-nav a.active::before { opacity: 0; } /* 胶囊内避免双下划线 */
  .site-header.nav-ai .main-nav a.active::after {
    left: 12px; right: 12px; bottom: 3px;
    background-image: linear-gradient(90deg, var(--brand-light), var(--brand), var(--brand-light));
    background-size: 200% 100%;
    animation: nav-shimmer 2.8s linear infinite;
  }
  @keyframes nav-shimmer {
    from { background-position: 0% 0; }
    to { background-position: 200% 0; }
  }
  /* 入场：7 个工具项自左向右逐个下滑淡入 */
  .site-header.nav-ai .main-nav a { animation: nav-item-in .45s cubic-bezier(.2, .8, .3, 1) backwards; }
  .site-header.nav-ai .main-nav a:nth-child(1) { animation-delay: .02s; }
  .site-header.nav-ai .main-nav a:nth-child(2) { animation-delay: .07s; }
  .site-header.nav-ai .main-nav a:nth-child(3) { animation-delay: .12s; }
  .site-header.nav-ai .main-nav a:nth-child(4) { animation-delay: .17s; }
  .site-header.nav-ai .main-nav a:nth-child(5) { animation-delay: .22s; }
  .site-header.nav-ai .main-nav a:nth-child(6) { animation-delay: .27s; }
  .site-header.nav-ai .main-nav a:nth-child(7) { animation-delay: .32s; }
  .site-header.nav-ai .main-nav a:nth-child(8) { animation-delay: .37s; }
  @keyframes nav-item-in {
    from { opacity: 0; transform: translateY(-7px); }
    to { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header.nav-ai .main-nav a { animation: none !important; transition: none; }
  .site-header.nav-ai .main-nav a.active::after { animation: none; }
  .site-header.nav-ai .main-nav a:hover { transform: none; }
}

/* ==========================================================================
   m 批（20261020）首页 UI 表现升级
   —— h1 马克笔强调 / 统计数字渐变 / 品牌面板呼吸光晕 /
      卡片媒体顶部渐变条 / CTA 深色面板（仅首页 cta-dark）/ 眉标流光
   ========================================================================== */

/* ---------- 1. Hero 主标题：渐变字底部加「马克笔」高亮 ---------- */
.hero h1 em { position: relative; z-index: 0; }
.hero h1 em::after {
  content: ""; position: absolute; left: 1%; right: 1%; bottom: .04em; height: .18em;
  border-radius: .12em; z-index: -1;
  background: linear-gradient(90deg, rgba(255, 138, 43, 0) 0%, rgba(255, 138, 43, .32) 18%, rgba(255, 138, 43, .32) 82%, rgba(255, 138, 43, 0) 100%);
}

/* ---------- 2. 统计数字：品牌橙渐变（单位 b 恢复实色） ---------- */
.hero-stats .hs-num {
  background-image: linear-gradient(115deg, #ff9a45 0%, #ff5f00 72%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-stats .hs-num b { -webkit-text-fill-color: var(--brand); color: var(--brand); }

/* ---------- 3. 品牌面板：呼吸光晕 + 顶部高光 ---------- */
.logo-panel {
  animation: panel-glow 6.5s ease-in-out infinite;
}
@keyframes panel-glow {
  0%, 100% {
    box-shadow: 0 34px 70px -38px rgba(28, 16, 4, .68), 0 0 0 1px rgba(255, 143, 60, .1), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  50% {
    box-shadow: 0 34px 70px -38px rgba(28, 16, 4, .68), 0 0 46px -8px rgba(255, 120, 20, .38), 0 0 0 1px rgba(255, 143, 60, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
}

/* ---------- 4. 卡片媒体：顶部品牌渐变条 hover 生长（全站卡片统一表现） ---------- */
.card-media::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background-image: linear-gradient(90deg, var(--brand-light), var(--brand));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s var(--ease);
}
.card:hover .card-media::before { transform: scaleX(1); }
.card-body h3 { transition: color .25s var(--ease); }
.card:hover .card-body h3 { color: var(--brand-dark); }

/* ---------- 5. CTA 深色面板（仅首页 .cta-dark；services 页 cta-panel 不受影响） ---------- */
.cta-panel.cta-dark {
  background:
    radial-gradient(560px 280px at 12% 0%, rgba(255, 120, 20, .22), transparent 60%),
    radial-gradient(560px 300px at 88% 100%, rgba(255, 150, 70, .16), transparent 60%),
    linear-gradient(155deg, #261b11 0%, #17100a 66%, #1e150c 100%);
  border-color: rgba(255, 143, 60, .28);
  box-shadow: 0 36px 84px -42px rgba(30, 14, 2, .62), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.cta-panel.cta-dark::after {
  content: ""; position: absolute; left: 7%; right: 7%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 176, 108, .6), transparent);
}
.cta-dark h2 { color: #fff7ef; }
.cta-dark p { color: rgba(255, 213, 178, .8); }
.cta-dark .btn-ghost {
  background-color: transparent; color: #ffe9d6;
  border-color: rgba(255, 190, 138, .42);
  box-shadow: none;
}
.cta-dark .btn-ghost:hover {
  background-color: rgba(255, 143, 60, .14);
  color: #fff2e2;
  border-color: rgba(255, 190, 138, .72);
  box-shadow: none;
}
/* 深色面板内次按钮的按下态：按压底色更实 + 边框转为品牌橙，与主按钮的按压逻辑对齐 */
.cta-dark .btn-ghost:active {
  background-color: rgba(255, 143, 60, .3);
  color: #fff;
  border-color: var(--brand-light);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .28);
}

/* ---------- 6. 跑马灯词条 hover 提亮 ---------- */
.mq-item { transition: color .25s var(--ease); }
.marquee .mq-item:hover { color: var(--brand); opacity: 1; }

/* ---------- 7. 区块眉标线条流光 ---------- */
.sec-kicker::before, .sec-head.center .sec-kicker::after {
  background-size: 200% 100%;
  animation: kicker-line 3.4s linear infinite;
}
@keyframes kicker-line {
  from { background-position: 0% 0; }
  to { background-position: -200% 0; }
}

/* ---------- 8. Hero 主按钮：常驻橙晕加深 ---------- */
.hero-cta .btn:not(.btn-ghost) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 2px rgba(168, 58, 0, .18), 0 14px 34px -14px rgba(255, 106, 0, .6);
}
.hero-cta .btn:not(.btn-ghost):hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 2px 4px rgba(168, 58, 0, .2), 0 20px 42px -16px rgba(255, 106, 0, .68);
}

/* 首屏「特效创新中心」入口：在两个次按钮之后，以品牌描边 + 星芒图标做专属识别，
   权重介于主按钮与普通次按钮之间——够醒目但不至于抢主 CTA */
.hero-cta-ai {
  border-color: var(--brand-line) !important;
  background-color: var(--brand-soft) !important;
  color: var(--brand-dark) !important;
}
.hero-cta-ai .btn-ic { color: var(--brand); transition: transform .25s var(--ease); }
.hero-cta-ai:hover {
  border-color: var(--brand) !important;
  box-shadow: 0 2px 4px rgba(28, 20, 12, .05), 0 16px 30px -18px rgba(255, 106, 0, .5) !important;
}
.hero-cta-ai:hover .btn-ic { transform: rotate(90deg) scale(1.08); }
.hero-cta-ai:active { background-color: #ffe9d6 !important; border-color: var(--brand) !important; }

/* ---------- 动效可关 ---------- */
@media (prefers-reduced-motion: reduce) {
  .logo-panel { animation: none; }
  .sec-kicker::before, .sec-head.center .sec-kicker::after { animation: none; }
  .card-media::before { transition: none; }
}

/* ==========================================================================
   n 批 · 特效论坛（forum.html）—— 参考 CGJoy 特效频道的双行工具条 +
   封面卡片网格；发表/编辑弹窗；详情弹窗
   ========================================================================== */
.fm-layout { display: flex; flex-direction: column; gap: 18px; }

/* ---------- 工具栏：排序 tabs + 搜索 + 发表 ---------- */
.fm-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.fm-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 999px;
}
.fm-tab {
  appearance: none; border: 0; cursor: pointer;
  padding: 7px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  background: transparent;
  transition: color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.fm-tab:hover { color: var(--ink); }
.fm-tab.is-on {
  color: var(--brand-dark); background: var(--surface);
  box-shadow: 0 2px 8px -4px rgba(232, 92, 0, .35), inset 0 0 0 1px var(--brand-line);
}
.fm-toolbar-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fm-search input {
  width: 230px; height: 38px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  font-size: 13.5px; outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.fm-search input:focus { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-glow); }
.fm-search input::placeholder { color: var(--muted-2); }
.fm-post-btn { white-space: nowrap; }

/* ---------- 分类 chips ---------- */
.fm-cats {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-bottom: 2px;
}
.fm-chip {
  appearance: none; cursor: pointer;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 12.5px; font-weight: 500; color: var(--muted);
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.fm-chip:hover { color: var(--ink); border-color: var(--line-strong); }
.fm-chip.is-on {
  color: var(--brand-dark); border-color: var(--brand-line);
  background: var(--brand-soft); font-weight: 600;
}

/* ---------- 标签系统（20261024j） ---------- */
.fm-tags {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 2px 0 4px;
}
.fm-tag {
  appearance: none; cursor: pointer;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 12px; font-weight: 500; color: var(--muted);
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.fm-tag:hover { color: var(--ink); border-color: var(--brand-line); }
.fm-tag.is-on {
  color: var(--brand-dark); border-color: var(--brand-line);
  background: var(--brand-soft); font-weight: 600;
}
.fm-card-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.fm-card-tag {
  font-size: 11px; font-weight: 600; color: var(--brand-dark);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  padding: 2px 8px; border-radius: 999px; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.fm-card-tag:hover { background: var(--brand-line); color: var(--brand-dark); }
.fm-tagpick { display: flex; flex-wrap: wrap; gap: 7px; }
.fm-tagpick-item {
  appearance: none; cursor: pointer;
  padding: 5px 12px; border-radius: 999px;
  border: 1px dashed var(--line-strong); background: var(--surface);
  font-size: 12.5px; font-weight: 500; color: var(--muted);
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.fm-tagpick-item:hover { color: var(--ink); border-color: var(--brand-line); border-style: solid; }
.fm-tagpick-item.is-sel {
  color: var(--brand-dark); border: 1px solid var(--brand-line); border-style: solid;
  background: var(--brand-soft); font-weight: 600;
}
.fp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 4px; }
.fp-tags-label { font-size: 12px; font-weight: 600; color: var(--muted-2); }
.fp-tag {
  font-size: 12.5px; font-weight: 600; color: var(--brand-dark);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  padding: 3px 11px; border-radius: 999px; text-decoration: none;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.fp-tag:hover { background: var(--brand-line); color: var(--brand-dark); }

/* ---------- 卡片网格 ---------- */
.fm-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
}
.fm-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.fm-card:hover, .fm-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--brand-line);
  box-shadow: 0 14px 30px -18px rgba(23, 18, 14, .28);
  outline: none;
}
.fm-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft); }
.fm-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.fm-card:hover .fm-card-media img { transform: scale(1.045); }
.fm-card-media::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--brand-light), var(--brand), var(--brand-light));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.fm-card:hover .fm-card-media::before, .fm-card:focus-visible .fm-card-media::before { transform: scaleX(1); }
.fm-card-cat {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(23, 18, 14, .62); color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  backdrop-filter: blur(4px);
}
.fm-card-feat {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  padding: 3px 10px; border-radius: 999px;
  background: linear-gradient(135deg, #ffb03a, #ff7a00); color: #fff;
  font-size: 11.5px; font-weight: 700;
  box-shadow: 0 4px 10px -6px rgba(255, 122, 0, .8);
}
/* ---------- 20261024k 美术论坛：官方置顶 + 作者等级 ---------- */
.fm-card-pin {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  padding: 3px 10px; border-radius: 999px;
  background: linear-gradient(135deg, #ff8a2b, #ff5a2b); color: #fff;
  font-size: 11.5px; font-weight: 700;
  box-shadow: 0 4px 10px -6px rgba(255, 90, 43, .8);
}
.fm-lv {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 8px; border-radius: 999px; margin-left: 8px;
  border: 1px solid var(--brand-line); background: var(--brand-soft);
  color: var(--brand-dark); font-size: 11px; font-weight: 700; white-space: nowrap;
}
.fm-lv-detail { font-size: 12px; padding: 2px 10px; }
.fm-detail-pin {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: linear-gradient(135deg, #ff8a2b, #ff5a2b); color: #fff;
  font-size: 12px; font-weight: 700; margin-right: 6px;
}
.fm-card-body { display: flex; flex-direction: column; gap: 8px; padding: 15px 16px 12px; flex: 1; }
.fm-card-title {
  margin: 0; font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .18s var(--ease);
}
.fm-card:hover .fm-card-title { color: var(--brand-dark); }
.fm-card-desc {
  margin: 0; font-size: 13px; color: var(--muted); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fm-card-meta {
  margin-top: auto; display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--muted-2);
}
.fm-card-author { color: var(--muted); font-weight: 600; }
.fm-card-stat { display: inline-flex; align-items: center; gap: 4px; }
.fm-card-att { display: inline-flex; align-items: center; gap: 3px; color: var(--brand); font-weight: 600; }
.fm-card-time { margin-left: auto; }
.fm-card-ops {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 0 16px 14px;
}
.fm-mini {
  appearance: none; cursor: pointer;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 12px; font-weight: 600; color: var(--muted);
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.fm-mini:hover { color: var(--ink); border-color: var(--line-strong); }
.fm-mini-danger:hover { color: var(--err); border-color: var(--err); }
.fm-empty { text-align: center; color: var(--muted); font-size: 14px; padding: 60px 0 20px; }
.fm-more-row { display: flex; justify-content: center; padding-top: 6px; }

/* ---------- 详情弹窗 ---------- */
.fm-detail { display: flex; flex-direction: column; gap: 14px; }
.fm-detail-cover { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.fm-detail-cover img { width: 100%; display: block; }
.fm-detail-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--muted-2);
}
.fm-detail-meta span:nth-child(2) { color: var(--muted); font-weight: 600; }
.fm-detail-cat {
  padding: 2px 10px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-dark);
  border: 1px solid var(--brand-line); font-weight: 600;
}
.fm-detail-feat {
  padding: 2px 10px; border-radius: 999px;
  background: linear-gradient(135deg, #ffb03a, #ff7a00); color: #fff; font-weight: 700;
}
.fm-detail-body {
  font-size: 14.5px; color: var(--ink-2); line-height: 1.95;
  white-space: normal; word-break: break-word;
}
.fm-detail-ops { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 14px; }
.fm-danger-btn { color: var(--err); }
.fm-danger-btn:hover { color: var(--err); border-color: var(--err); background: transparent; }

/* ---------- 发表 / 编辑表单 ---------- */
.fm-form { display: flex; flex-direction: column; gap: 14px; }
.fm-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.fm-field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.fm-field-row .fm-field { flex: 1 1 200px; }
.fm-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.fm-label i { font-style: normal; font-weight: 400; font-size: 12px; color: var(--muted-2); margin-left: 4px; }
.fm-textarea { resize: vertical; min-height: 140px; line-height: 1.8; padding: 10px 12px; }

/* ---------- 20261028a 美术论坛：富文本编辑器 ---------- */
.re-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.re-bar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 7px 10px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--brand) 5%, var(--card));
}
.re-tool {
  min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid transparent;
  border-radius: 7px; background: transparent; color: var(--fg);
  font-size: 13px; line-height: 1; cursor: pointer; transition: .15s;
}
.re-tool:hover { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-dark); }
.re-tool.re-b { font-weight: 700; }
.re-tool.re-i { font-style: italic; font-family: Georgia, serif; }
.re-tool.re-h { font-weight: 700; }
.re-bar-tip { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.re-body {
  min-height: 180px; max-height: 420px; overflow-y: auto;
  padding: 12px 14px; font-size: 14.5px; line-height: 1.85; outline: none;
}
.re-body:empty::before { content: attr(data-placeholder); color: var(--muted); }
.re-body:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 22%, transparent); }
.re-body h3 { margin: .9em 0 .45em; font-size: 17px; font-weight: 700; line-height: 1.5; }
.re-body h4 { margin: .8em 0 .4em; font-size: 15.5px; font-weight: 700; }
.re-body p { margin: 0 0 .7em; }
.re-body ul, .re-body ol { margin: 0 0 .7em; padding-left: 1.5em; }
.re-body li { margin: .2em 0; }
.re-body blockquote {
  margin: .6em 0; padding: 8px 14px; border-left: 3px solid var(--brand);
  background: var(--brand-soft); color: var(--fg-soft); border-radius: 0 8px 8px 0;
}
.re-body code {
  padding: 2px 6px; border-radius: 5px; font-size: 13px;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
}
.re-body a { color: var(--brand-dark); text-decoration: underline; }
.re-body img { max-width: 100%; border-radius: 8px; margin: .4em 0; }
.re-tool.re-u { text-decoration: underline; }
.re-tool.re-s { text-decoration: line-through; }
.re-tool.is-active { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-dark); }
.re-body figure { margin: .6em 0; }
.re-media { position: relative; display: inline-block; max-width: 280px; margin: .4em .6em .4em 0; vertical-align: top; }
.re-media-video { max-width: 360px; }
.re-media-el { display: block; max-width: 100%; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2, #f6f3ee); }
.re-media-x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: none; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; line-height: 1; }
.re-media:hover .re-media-x { display: flex; }
.re-media-x:hover { background: rgba(0,0,0,.85); }
.re-tok { display: none; }
.fm-form-err {
  margin: 0; font-size: 12.5px; color: var(--err);
  background: color-mix(in srgb, var(--err) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--err) 30%, transparent);
  border-radius: 8px; padding: 8px 12px;
}

/* 编辑器附件（视频 / GIF / 贴图） */
.fm-att { display: flex; flex-direction: column; gap: 8px; }
.fm-att-add {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 8px 14px; border: 1px dashed var(--brand-line); border-radius: 10px;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.fm-att-add:hover { border-style: solid; }
.fm-att-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fm-att-empty { font-size: 12.5px; color: var(--muted-2); }
.fm-att-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg-soft); font-size: 12.5px; color: var(--ink-2); max-width: 100%;
}
.fm-att-item i { font-style: normal; color: var(--muted-2); font-size: 11px; }
.fm-att-x {
  border: 0; background: transparent; color: var(--muted-2); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 2px 4px; border-radius: 5px;
}
.fm-att-x:hover { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }
.fm-att-tip { margin: 8px 0 0; font-size: 12px; line-height: 1.7; color: var(--muted-2); }

/* 封面图上传（替代原「封面图链接」文本输入框） */
.fm-cover { display: flex; gap: 12px; align-items: stretch; }
.fm-cover-empty {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
  flex: 1; min-height: 76px; padding: 12px 14px; border: 1px dashed var(--line-strong);
  border-radius: 12px; background: var(--bg-soft);
}
.fm-cover-btn {
  border: 0; background: var(--brand); color: #fff; font: 600 13.5px/1 system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  padding: 9px 16px; border-radius: 9px; cursor: pointer;
}
.fm-cover-btn:hover { filter: brightness(1.05); }
.fm-cover-tip { font-size: 11.5px; color: var(--muted-2); }
.fm-cover-has {
  position: relative; display: flex; align-items: center; gap: 10px; flex: 1;
  padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.fm-cover-has img { width: 116px; height: 65px; object-fit: cover; border-radius: 8px; background: var(--bg-soft); display: block; }
.fm-cover-meta { flex: 1; font-size: 12px; color: var(--muted); word-break: break-all; }
.fm-cover-rm {
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--err);
  font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.fm-cover-rm:hover { border-color: var(--err); background: color-mix(in srgb, var(--err) 10%, transparent); }
.fm-cover-uploading { display: flex; align-items: center; flex: 1; min-height: 76px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); color: var(--brand-dark); font-size: 13px; font-weight: 600; }

/* 正文内联插入工具栏 */
.fm-body-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fm-body-bar-tip { font-size: 12px; color: var(--muted-2); }
.fm-ins-btn {
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink-2);
  font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 8px; cursor: pointer;
}
.fm-ins-btn:hover { color: var(--brand-dark); border-color: var(--brand-line); background: var(--brand-soft); }

/* 正文内联媒体 */
.fp-body-media { max-width: 100%; border-radius: 12px; margin: 14px 0; display: block; }
.fp-body-img { box-shadow: var(--shadow-sm); }
.fp-body-video { width: 100%; background: #000; }

/* ---------- 站内搜索页 ---------- */
.ss-hero {
  display: flex; gap: 10px; margin-top: 20px; max-width: 620px;
}
.ss-hero-input { flex: 1; height: 48px; padding: 0 16px; font-size: 15px; }
.ss-hero-btn {
  flex: none; height: 48px; padding: 0 26px; border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2, #ff6a3d) 100%); color: #fff;
  font-size: 15px; font-weight: 700;
}
.ss-hero-btn:hover { filter: brightness(1.05); }
.ss-count { margin: 26px 0 8px; color: var(--muted); font-size: 14px; font-weight: 600; }
.ss-group { font-size: 17px; font-weight: 700; margin: 24px 0 14px; letter-spacing: -.01em; }
.ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ss-card {
  display: flex; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); text-decoration: none; color: inherit; transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.ss-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.ss-thumb { flex: none; width: 92px; height: 64px; border-radius: 9px; overflow: hidden; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; }
.ss-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-thumb-empty { font-size: 22px; color: var(--brand); }
.ss-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ss-type { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--bg-soft); color: var(--muted); }
.ss-type-post { background: var(--brand-soft); color: var(--brand-dark); }
.ss-type-goods { background: color-mix(in srgb, #3b82f6 14%, transparent); color: #2563eb; }
.ss-type-dl { background: color-mix(in srgb, #10b981 14%, transparent); color: #059669; }
.ss-title { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ss-desc { font-size: 12.5px; color: var(--muted-2); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-meta { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }
.ss-empty, .ss-loading { text-align: center; color: var(--muted); font-size: 14px; padding: 50px 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .fm-toolbar { flex-direction: column; align-items: stretch; }
  .fm-toolbar-r { justify-content: space-between; }
  .fm-search { flex: 1; }
  .fm-search input { width: 100%; }
  .fm-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
}
@media (max-width: 560px) {
  .fm-grid { grid-template-columns: 1fr; }
  .fm-post-btn { flex: 1; }
  /* 手机端筛选 chip 触控热区放大（w11：按钮放大，方便点击；须置于基础规则之后） */
  .fm-chip { padding: 11px 15px; }
}

/* ---------- 减弱动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .fm-card, .fm-card-media img, .fm-card-media::before, .fm-tab, .fm-chip { transition: none; }
  .fm-card:hover { transform: none; }
  .fm-card:hover .fm-card-media img { transform: none; }
}

/* ---------- 深色主题 ---------- */
html[data-theme="dark"] .fm-tabs { background: var(--bg-soft); }
html[data-theme="dark"] .fm-card-cat { background: rgba(0, 0, 0, .55); }

/* ==========================================================================
   o 批（20261020）全站排版优化
   —— ① 标题阶梯统一（区块主标题 / 副栏目标题 / 面板标题 三级）
      ② Hero 统计区层级强化
      ③ AI 中心详情面板等高拉伸 + CTA 贴底
      ④ 品牌面板比例微调
   ========================================================================== */

/* ---------- 1. 标题阶梯：终结各页内联 font-size（原 31/29/20/18 四档混用）----------
   层级：.sec-head h2（≤34）＞ .sub-title（≤26）＞ .panel-title（19）＞ 卡片标题（17） */
.sec-head h2 { font-size: clamp(25px, 3.1vw, 34px); }
.sub-title {
  font-size: clamp(21px, 2.6vw, 26px);
  font-weight: 700; letter-spacing: -.022em; line-height: 1.3;
}
/* 副栏目标题前的 kicker 间距与主区块一致 */
.sub-block .sec-kicker, .reveal > .sec-kicker { margin-bottom: 12px; }
.panel-title { font-size: 19px; font-weight: 700; letter-spacing: -.012em; line-height: 1.35; }
/* CTA 面板标题（首页深色版 + services 浅色版共用） */
.cta-panel h2 { font-size: clamp(22px, 2.8vw, 28px); font-weight: 700; letter-spacing: -.024em; }

/* ---------- 2. Hero 统计区：2×2 矩阵 + 横竖细分隔线（左栏 546px 放不下单行 4 项）---------- */
@media (min-width: 1025px) {
  .hero-stats {
    display: grid; grid-template-columns: 1fr 1fr;
    margin-top: 46px; padding-top: 28px;
  }
  .hero-stats > div { padding: 0 30px; }
  .hero-stats > div:nth-child(odd) { padding-left: 0; }
  .hero-stats > div:nth-child(even) { padding-right: 0; border-left: 1px solid var(--line); }
  .hero-stats > div:nth-child(n + 3) { border-top: 1px solid var(--line); padding-top: 26px; }
}
.hero-stats .hs-num { font-size: 34px; line-height: 1.1; }
.hero-stats .hs-label { font-size: 13px; margin-top: 6px; }

/* ---------- 3. AI 中心：详情面板与左侧工具面板等高，CTA 贴底 ---------- */
.ai-layout { align-items: stretch; }
.ai-records { display: flex; flex-direction: column; }
.ai-records .ai-detail { flex: 1; }
.ai-detail { display: flex; flex-direction: column; }
.ai-detail-feats { margin-top: 4px; }
.ai-tool-cta-row { margin-top: auto; padding-top: 24px; }

/* ---------- 4. 品牌面板：留白更沉稳 ---------- */
.logo-panel { padding: 58px 44px; }

/* ---------- 5. 页脚节奏微调 ---------- */
.site-footer .footer-bottom { padding-top: 26px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1015px) {
  /* 统计面板化（沿用既有面板样式），数字略放大 */
  .hero-stats .hs-num { font-size: 26px; }
}
@media (max-width: 860px) {
  .hero-stats .hs-num { font-size: 25px; }
  .hero-stats .hs-label { font-size: 12.5px; }
  .logo-panel { padding: 44px 34px; }
  .ai-detail-feats { grid-template-columns: 1fr; }
}

/* ---------- 减弱动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-stats .hs-num { transition: none; }
}

/* ==========================================================================
   p 批：特效贴图库（ai-texture.html）
   ========================================================================== */

/* ---------- 页头：标题 + 搜索框同行 ---------- */
.tx-head-row {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.tx-head-row h1 { margin: 0; }
.tx-head-search {
  position: relative; display: flex; align-items: center; gap: 8px;
  margin-left: auto; padding: 4px 4px 4px 36px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.tx-head-search:focus-within {
  border-color: var(--brand-line); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(232, 92, 0, .1);
}
.tx-head-search-ico {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; fill: none; stroke: var(--muted-2); stroke-width: 2;
  stroke-linecap: round; pointer-events: none;
}
.tx-head-search input {
  width: 250px; border: 0; background: transparent; outline: none;
  font-size: 13.5px; color: var(--ink); padding: 5px 0;
}
.tx-head-search input::placeholder { color: var(--muted-2); }
.tx-head-search-btn {
  border: 0; cursor: pointer; border-radius: 999px; padding: 6px 15px;
  font-size: 12.5px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--brand-light), var(--brand));
  transition: filter .18s var(--ease), transform .18s var(--ease);
}
.tx-head-search-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* ---------- 区块头 ---------- */
.tx-lib-sec { padding-top: 8px; }
.tx-lib-head {
  display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.tx-lib-head-l { min-width: 0; }
.tx-lib-head .sec-title { margin: 8px 0 0; }
.tx-lib-desc {
  margin-top: 10px; color: var(--muted); font-size: 13.5px;
  line-height: 1.8; max-width: 68ch;
}
.tx-lib-search {
  position: relative; display: flex; align-items: center; gap: 8px;
  margin-left: auto; padding: 4px 4px 4px 34px; min-width: 268px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.tx-lib-search:focus-within { border-color: var(--brand-line); box-shadow: 0 0 0 3px rgba(232, 92, 0, .1); }
.tx-lib-search-ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; fill: none; stroke: var(--muted-2); stroke-width: 2;
  stroke-linecap: round; pointer-events: none;
}
.tx-lib-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-size: 13px; color: var(--ink); padding: 6px 0;
}
.tx-lib-search input::placeholder { color: var(--muted-2); }
.tx-lib-search-btn {
  border: 0; cursor: pointer; border-radius: 7px; padding: 6px 14px;
  font-size: 12.5px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--brand-light), var(--brand));
  transition: filter .18s var(--ease);
}
.tx-lib-search-btn:hover { filter: brightness(1.07); }

/* ---------- 工具条 ---------- */
.tx-lib-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 0 18px;
}
.tx-lib-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-soft); border-radius: 999px; }
.tx-lib-tab {
  border: 0; cursor: pointer; background: transparent; border-radius: 999px;
  padding: 6px 16px; font-size: 12.5px; font-weight: 600; color: var(--muted);
  transition: color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.tx-lib-tab:hover { color: var(--ink); }
.tx-lib-tab.is-on {
  color: var(--brand-dark); background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand-line);
}
.tx-lib-meta { margin-left: auto; font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.tx-lib-meta b { color: var(--ink); font-weight: 700; }
.tx-lib-cpu-tip {
  margin: -6px 0 16px; padding: 9px 14px; border-radius: 9px;
  background: rgba(255, 196, 84, .12); border: 1px solid rgba(255, 196, 84, .34);
  color: #8a6412; font-size: 12.5px; line-height: 1.6;
}
.tx-lib-cpu-tip[hidden] { display: none; }
html[data-theme="dark"] .tx-lib-cpu-tip { background: rgba(255, 196, 84, .1); color: #ffd479; }

/* ---------- 两栏布局 ---------- */
.tx-lib-layout { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 24px; align-items: start; }

/* ---------- 左侧分类树 ---------- */
.tx-lib-side {
  position: sticky; top: 84px;
  max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain;
  padding-right: 4px;
}
.tx-lib-side::-webkit-scrollbar { width: 5px; }
.tx-lib-side::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.tx-lib-cat, .tx-lib-subitem {
  display: flex; align-items: center; gap: 6px; width: 100%;
  border: 0; cursor: pointer; background: transparent; text-align: left;
  border-radius: 8px; transition: background .16s var(--ease), color .16s var(--ease);
}
.tx-lib-cat { padding: 8px 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tx-lib-cat:hover { background: var(--bg-soft); color: var(--ink); }
.tx-lib-cat.is-on { background: var(--brand-soft); color: var(--brand-dark); }
.tx-lib-cat-arrow {
  width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s var(--ease); opacity: .55;
}
.tx-lib-catgrp.is-open > .tx-lib-cat .tx-lib-cat-arrow { transform: rotate(90deg); }
.tx-lib-cat-name { flex: 1; min-width: 0; }
.tx-lib-cat-n {
  flex: none; font-size: 11px; font-weight: 600; color: var(--muted-2);
  font-variant-numeric: tabular-nums; padding: 1px 6px;
  background: var(--bg-soft); border-radius: 999px;
}
.tx-lib-cat.is-on .tx-lib-cat-n { background: rgba(255, 255, 255, .6); color: var(--brand-dark); }
.tx-lib-sub { padding: 2px 0 6px 27px; }
.tx-lib-sub[hidden] { display: none; }
.tx-lib-subitem { padding: 5px 10px; font-size: 12.5px; color: var(--muted); }
.tx-lib-subitem:hover { background: var(--bg-soft); color: var(--brand-dark); }

/* ---------- 右侧网格 ---------- */
.tx-lib-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px;
  /* 与左侧分类栏对称：限高 + 内部滚动，避免 65 张缩略图把整页拉到近 5000px。
     IntersectionObserver 以视口为根，容器内滚动仍会正常触发缩略图懒渲染。 */
  max-height: calc(100vh - 150px);
  overflow-y: auto; overscroll-behavior: contain; align-content: start;
  padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.tx-lib-grid::-webkit-scrollbar { width: 7px; }
.tx-lib-grid::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.tx-lib-card {
  position: relative; display: block; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 11px; overflow: hidden;
  background: var(--surface); text-align: left;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.tx-lib-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--brand-light), var(--brand), var(--brand-light));
  transform: scaleX(0); transform-origin: left;
  transition: transform .26s var(--ease);
}
.tx-lib-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(0, 0, 0, .38); border-color: var(--brand-line); }
.tx-lib-card:hover::before { transform: scaleX(1); }
.tx-lib-card.is-on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.tx-lib-thumb {
  position: relative; display: block; aspect-ratio: 1 / 1;
  background: #0b0d11; overflow: hidden;
}
.tx-lib-thumb-ph {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #12151b 30%, #1c2029 48%, #12151b 66%);
  background-size: 220% 100%;
  animation: txl-shimmer 1.3s linear infinite;
}
@keyframes txl-shimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } }
.tx-lib-thumb img {
  position: relative; display: block; width: 100%; height: 100%;
  object-fit: cover; image-rendering: auto;
}
.tx-lib-name {
  display: block; padding: 8px 10px 2px; font-size: 12.5px; font-weight: 600;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tx-lib-tag {
  display: block; padding: 0 10px 9px; font-size: 10.5px; color: var(--muted-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tx-lib-empty {
  padding: 46px 0; text-align: center; color: var(--muted); font-size: 13.5px;
}
.tx-lib-empty[hidden] { display: none; }

/* ---------- 深色主题 ---------- */
html[data-theme="dark"] .tx-lib-search,
html[data-theme="dark"] .tx-head-search { background: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .tx-lib-tab.is-on { background: rgba(232, 92, 0, .18); }
html[data-theme="dark"] .tx-lib-thumb { background: #05070a; }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .tx-head-search { margin-left: 0; width: 100%; }
  .tx-head-search input { width: auto; flex: 1; }
  .tx-lib-search { margin-left: 0; width: 100%; }
}
@media (max-width: 900px) {
  .tx-lib-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tx-lib-side { position: static; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
  .tx-lib-grid { max-height: none; overflow: visible; padding-right: 0; }
  .tx-lib-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
}
@media (max-width: 560px) {
  .tx-lib-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
  .tx-lib-desc { font-size: 12.5px; }
}

/* ---------- 减弱动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .tx-lib-thumb-ph { animation: none; }
  .tx-lib-card, .tx-lib-card::before { transition: none; }
  .tx-lib-card:hover { transform: none; }
  .tx-head-search-btn:hover { transform: none; }
}


/* ==========================================================================
   r 批 · 论坛文章正文页（forum-post.html）
   ========================================================================== */
.fp-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px; align-items: start;
}
.fp-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 26px 30px 22px;
  box-shadow: 0 14px 34px -26px rgba(31, 22, 12, .28);
}
.fp-loading, .fp-missing {
  text-align: center; color: var(--muted); font-size: 14.5px; padding: 70px 0 50px;
}
.fp-missing p { margin: 0 0 16px; }
.fp-cover {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  margin-bottom: 18px; background: var(--surface-2, var(--line));
}
.fp-cover img { width: 100%; display: block; }
.fp-title {
  margin: 0 0 12px; font-size: 26px; font-weight: 800; color: var(--ink);
  line-height: 1.4; letter-spacing: .01em;
}
.fp-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--muted-2);
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.fp-meta .fm-detail-cat {
  padding: 2px 10px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-dark);
  border: 1px solid var(--brand-line); font-weight: 600;
}
.fp-meta .fm-detail-feat {
  padding: 2px 10px; border-radius: 999px;
  background: linear-gradient(135deg, #ffb03a, #ff7a00); color: #fff; font-weight: 700;
}
.fp-author { color: var(--muted); font-weight: 600; }
.fp-content {
  font-size: 15px; color: var(--ink-2); line-height: 2.05;
  word-break: break-word; overflow-wrap: anywhere;
}
.fp-content img { max-width: 100%; border-radius: 10px; }
.fp-ops {
  display: flex; gap: 8px; flex-wrap: wrap;
  border-top: 1px dashed var(--line); margin-top: 22px; padding-top: 16px;
}
.fp-backrow {
  border-top: 1px solid var(--line); margin-top: 24px; padding-top: 16px;
}
.fp-back {
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  text-decoration: none; transition: color .16s var(--ease);
}
.fp-back:hover { color: var(--brand-dark); }
.fp-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 86px; }
.fp-rel { display: flex; flex-direction: column; gap: 10px; }
.fp-rel-item {
  display: flex; gap: 12px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px; text-decoration: none;
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.fp-rel-item:hover {
  border-color: var(--brand-line); transform: translateY(-2px);
  box-shadow: 0 10px 24px -18px rgba(31, 22, 12, .35);
}
.fp-rel-thumb {
  flex: 0 0 96px; height: 62px; border-radius: 8px; overflow: hidden;
  background: var(--line); display: block;
}
.fp-rel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-rel-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fp-rel-txt b {
  font-size: 13px; color: var(--ink); line-height: 1.5; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fp-rel-item:hover .fp-rel-txt b { color: var(--brand-dark); }
.fp-rel-txt i {
  font-style: normal; font-size: 11.5px; color: var(--muted-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.fp-rel-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 24px 0; }

@media (max-width: 980px) {
  .fp-layout { grid-template-columns: minmax(0, 1fr); }
  .fp-side { position: static; }
}
@media (max-width: 560px) {
  .fp-card { padding: 20px 16px 16px; border-radius: 13px; }
  .fp-title { font-size: 21px; }
  .fp-comments { padding: 20px 16px 16px; border-radius: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-rel-item, .fp-back { transition: none; }
  .fp-rel-item:hover { transform: none; }
}

/* ---------- 附件区（#127 视频 / GIF / 贴图）---------- */
.fp-attachments {
  margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line);
}
.fp-att-title { font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 12px; }
.fp-att-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px;
}
.fp-att { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fp-att-img {
  display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--bg-soft);
}
.fp-att-img img { width: 100%; height: auto; display: block; }
.fp-att-video video {
  width: 100%; display: block; border-radius: 10px;
  border: 1px solid var(--line); background: #000;
}
.fp-att figcaption {
  font-size: 12px; color: var(--muted-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 源文件附件：下载卡（图标 + 名称/大小 + 下载按钮） */
.fp-att-file {
  flex-direction: row; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-soft);
}
.fp-att-file-ico { font-size: 26px; line-height: 1; flex: none; }
.fp-att-file-cap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fp-att-file-cap b {
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fp-att-file-cap i { font-style: normal; font-size: 11.5px; color: var(--muted-2); }
.fp-att-dl {
  align-self: flex-start; margin-top: 4px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border: none; border-radius: 999px; padding: 6px 16px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.fp-att-dl:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px var(--brand-glow); }

/* ---------- 评论区（#126）---------- */
.fp-comments {
  grid-column: 1; margin-top: 22px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 26px 30px 22px;
  box-shadow: 0 14px 34px -26px rgba(31, 22, 12, .28);
}
.fp-cmt-head h2 {
  margin: 0; font-size: 18px; font-weight: 700; color: var(--ink);
  display: flex; align-items: baseline; gap: 8px;
}
.fp-cmt-count { font-size: 13px; font-weight: 500; color: var(--muted-2); }
.fp-cmt-form { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; }
.fp-cmt-input { resize: vertical; min-height: 76px; line-height: 1.7; padding: 10px 12px; }
.fp-cmt-form-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fp-cmt-hint { font-size: 12.5px; color: var(--muted-2); }
.fp-cmt-list { display: flex; flex-direction: column; }
.fp-cmt { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fp-cmt:last-child { border-bottom: 0; }
.fp-cmt-avatar {
  flex: 0 0 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ffb03a, #ff7a00); color: #fff;
  font-size: 15px; font-weight: 700;
}
.fp-cmt-main { flex: 1; min-width: 0; }
.fp-cmt-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted-2); }
.fp-cmt-meta b { font-size: 13px; color: var(--ink); }
.fp-cmt-del {
  margin-left: auto; border: 0; background: transparent; color: var(--muted-2);
  cursor: pointer; font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 5px;
  opacity: .55; transition: opacity .16s var(--ease), color .16s var(--ease);
}
.fp-cmt:hover .fp-cmt-del { opacity: 1; }
.fp-cmt-del:hover { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }
.fp-cmt-body { margin-top: 5px; font-size: 14px; color: var(--ink-2); line-height: 1.75; word-break: break-word; }
.fp-cmt-loading, .fp-cmt-empty {
  text-align: center; color: var(--muted-2); font-size: 13px; padding: 26px 0;
}
@media (max-width: 560px) {
  .fp-att-grid { grid-template-columns: 1fr; }
  .fp-cmt-avatar { flex-basis: 30px; height: 30px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-cmt-del { transition: none; }
}

/* ==========================================================================
   w10/w11 移动端适配补强（20261019w）
   —— 手机端（≤620px）触控热区放大：以下规则置于所有基础规则之后，
      确保覆盖先生效；用负外边距 / 内边距扩展可点区域，视觉布局不变
   ========================================================================== */
@media (max-width: 620px) {
  /* 文章详情「返回」文字链接 */
  .fp-back { display: inline-block; padding: 9px 2px; margin: -9px 0; }
  /* AI 工具面板：分段控件 / 纵横比 chips / 提示词示例标签 */
  .ai-seg-btn { padding: 11px 4px; }
  .ai-chip { padding: 10px 14px; }
  .ai-ex { padding: 8px 12px; }
  /* 贴图库：重置标签 / 库分区 tab */
  .tx-reset { padding: 9px 14px; }
  .tx-lib-tab { padding: 9px 12px; }
  /* 复选开关：整行可点（负外边距保持视觉间距不变） */
  .ai-check { padding: 8px 0; margin: -8px 0 8px; }
  /* 贴图页搜索提交按钮：增高至触控友好尺寸 */
  .tx-head-search-btn, .tx-lib-search-btn { min-height: 38px; }
}

/* ==========================================================================
   页头导航排版修复（20261021）
   —— 根因：.wrap 上限 1180px → 页头内容可用宽仅 1132px，而页头自然宽度
      实测 1160px（普通页）/ 1181px（AI 页 8 项），缺口 28~49px；
      flex 收缩把中文栏目从末字折断成两行（"关于我/们"），且登录态再宽 102px。
   —— 修复：① 导航项 white-space: nowrap + flex:none，硬保证不折字；
            ② 收紧导航内边距 / 间距 / 搜索框宽度，腾出 80~100px 余量；
            ③ 登录态隐藏 chip 邮箱（信息仍在下拉面板内），再腾 132px；
            ④ 1081–1180 窄带先隐藏页头搜索框（抽屉态本就隐藏）。
   ========================================================================== */

/* 窄带（1181 以下）页头搜索框先让位给导航：抽屉态（≤1080）本就隐藏 */
@media (min-width: 1081px) and (max-width: 1180px) {
  .header-search { display: none; }
}

@media (min-width: 1081px) {
  /* 头部整体收紧：让出 20px 给导航 */
  .site-header .wrap { gap: 14px; }
  .header-actions { margin-left: 8px; }

  /* 导航：不可折行 + 不可压缩（flex:none 保持自然宽，宽度不足时也不折字） */
  .main-nav { gap: 2px; }
  .main-nav a {
    padding: 8px 11px;
    white-space: nowrap;
    flex: none;
  }
  /* AI 上下文导航（8 项）额外收紧一档 */
  .site-header.nav-ai .main-nav { gap: 2px; }
  .site-header.nav-ai .main-nav a { padding: 7px 10px; }

  /* 登录态：胶囊宽出 102px，隐藏邮箱（头像 + 下拉面板内信息仍在） */
  .site-header.hdr-user .user-chip .user-mail { display: none; }
}

/* 页头搜索框输入宽度收窄（150 → 130），为导航让出空间 */
.header-search-input { width: 130px; }

/* ==========================================================================
   特效创新中心首屏 · 构图模板版（20261022d）
   —— 黑底橙光展示带（浅/深主题一致）：左「橙渐变大标题 + 副题 + 胶囊双 CTA」，
      右「橙色机甲主视觉大图（左缘融入深色背景）」
   ========================================================================== */
.ai-hero {
  position: relative; padding: 42px 0 46px; overflow: hidden;
  background:
    radial-gradient(1000px 520px at 86% 18%, rgba(255, 122, 31, .30), transparent 60%),
    radial-gradient(760px 460px at 96% 92%, rgba(255, 138, 43, .18), transparent 58%),
    radial-gradient(620px 360px at 6% 100%, rgba(255, 122, 31, .10), transparent 60%),
    linear-gradient(160deg, #15100a 0%, #0f0b07 52%, #0a0806 100%);
}
/* 电路纹理：橙色正交细线，低透明度铺满右半区 */
.ai-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 138, 43, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 138, 43, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(760px 520px at 84% 42%, #000 0%, transparent 74%);
  mask-image: radial-gradient(760px 520px at 84% 42%, #000 0%, transparent 74%);
}
.ai-hero > .wrap { position: relative; z-index: 1; }
.ai-hero .crumb { margin-bottom: 24px; }
.ai-hero .crumb, .ai-hero .crumb a { color: rgba(255, 255, 255, .46); }
.ai-hero .crumb a:hover { color: var(--brand-light); }

.ai-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 40px; align-items: center;
}
/* 左栏文案贴模板构图：靠上放置，与右侧立绘顶部呼应 */
.ai-hero-copy { align-self: start; padding-top: clamp(6px, 3.5vw, 48px); }

/* ---------- 左栏 ---------- */
.ai-hero-title {
  font-size: clamp(40px, 5.2vw, 66px); line-height: 1.08;
  font-weight: 900; letter-spacing: -.02em;
  background-image: linear-gradient(100deg, #ffe6c8 0%, #ffb15e 34%, #ff7a1f 66%, #f25c02 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 8px 30px rgba(255, 106, 0, .28));
}
.ai-hero-sub {
  margin-top: 18px; font-size: clamp(15px, 1.5vw, 19px); font-weight: 500;
  color: rgba(255, 226, 200, .82); letter-spacing: .04em;
}
.ai-hero-cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 16px; }
.ai-hero-btn-main {
  height: 54px; padding: 0 34px; font-size: 15.5px; font-weight: 800; color: #fff;
  border-radius: 999px; border: none;
  background: linear-gradient(135deg, #ffb15e 0%, #ff7a1f 55%, #f25c02 100%);
  box-shadow: 0 16px 38px -12px rgba(255, 106, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.ai-hero-btn-main:hover { box-shadow: 0 20px 48px -12px rgba(255, 106, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .4); }
.ai-hero-btn-ghost {
  height: 54px; padding: 0 30px; font-size: 15px; font-weight: 600;
  border-radius: 999px;
  color: rgba(255, 255, 255, .92); background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 138, 43, .45);
}
.ai-hero-btn-ghost:hover { border-color: rgba(255, 163, 73, .8); color: #fff; background: rgba(255, 138, 43, .14); }

/* ---------- hero 工具快捷导航排（20261023j：按当前页高亮） ---------- */
.ai-hero-links {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.ai-hero-link {
  font-size: 14.5px; font-weight: 600; letter-spacing: .02em;
  color: rgba(255, 255, 255, .72); text-decoration: none;
  padding: 8px 15px; border-radius: 999px; white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.ai-hero-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.ai-hero-link.is-on {
  color: var(--brand-light);
  background: rgba(255, 138, 43, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 138, 43, .4);
}
@media (max-width: 760px) {
  .ai-hero-links {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-top: 20px; padding-top: 16px;
    -webkit-overflow-scrolling: touch;
  }
  .ai-hero-links::-webkit-scrollbar { display: none; }
  .ai-hero-link { font-size: 13.5px; padding: 7px 13px; }
}

/* ---------- 右栏：橙色机甲主视觉大图 ---------- */
.ai-hero-stage {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  min-height: 500px;
}
.ai-hero-art {
  display: block; width: 100%; height: auto;   /* 覆盖 HTML height 属性，按宽度和比例自适应 */
  max-width: 660px; aspect-ratio: 1200 / 752;
  object-fit: cover; object-position: 72% center;
  border-radius: 22px;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 18%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 0%, #000 18%, #000 100%);
  filter: drop-shadow(0 30px 70px rgba(0, 0, 0, .6));
}

/* 工具板块锚点：避开吸顶页头 */
#aiToolGrid { scroll-margin-top: 92px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .ai-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .ai-hero-stage { max-width: 600px; min-height: 0; margin: 0 auto; width: 100%; }
  .ai-hero-art { max-width: 100%; }
}
@media (max-width: 620px) {
  .ai-hero { padding: 30px 0 38px; }
  .ai-hero-cta { gap: 12px; }
  .ai-hero-btn-main, .ai-hero-btn-ghost { flex: 1 1 100%; height: 50px; }
}

/* ==========================================================================
   动作生成（ai-motion.html）· 动作库
   浏览体验对齐 Mixamo：页头搜索 + 类型 tabs + 分类 chips + 卡片网格 + 分页。
   预览图为深底程序化 GIF，故卡片媒体区固定深色，双主题下均成立。
   ========================================================================== */
.mo-head-row {
  display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
}
.mo-head-row h1 { margin: 0; }
.mo-head-search {
  display: flex; align-items: center; gap: 8px; flex: 1 1 320px; max-width: 460px;
  padding: 5px 6px 5px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.mo-head-search:focus-within { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-glow); }
.mo-head-search-ico { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--muted-2); stroke-width: 2; stroke-linecap: round; }
.mo-head-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: 13px; color: var(--ink); padding: 6px 0;
}
.mo-head-search input::placeholder { color: var(--muted-2); }
.mo-head-search-btn {
  border: 0; cursor: pointer; border-radius: 999px; padding: 7px 16px;
  font-size: 12.5px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--brand-light), var(--brand));
  transition: filter .18s var(--ease);
}
.mo-head-search-btn:hover { filter: brightness(1.07); }

/* ---------- 统计条 ---------- */
.mo-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.mo-stat {
  display: flex; flex-direction: column; gap: 2px; min-width: 118px;
  padding: 11px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); box-shadow: 0 1px 0 var(--hi) inset;
}
.mo-stat b {
  font-size: 21px; font-weight: 800; line-height: 1.15; color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
}
.mo-stat span { font-size: 11.5px; color: var(--muted); }

/* ---------- 工具条：类型 tabs + 排序 + 计数 ---------- */
.mo-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 4px 0 14px;
}
.mo-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-soft); border-radius: 999px; }
.mo-tab {
  border: 0; cursor: pointer; background: transparent; border-radius: 999px;
  padding: 6px 15px; font-size: 12.5px; font-weight: 600; color: var(--muted);
  transition: color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.mo-tab i { font-style: normal; font-size: 11px; opacity: .72; margin-left: 3px; font-variant-numeric: tabular-nums; }
.mo-tab:hover { color: var(--ink); }
.mo-tab.is-on { color: var(--brand-dark); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-line); }
.mo-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.mo-sort select {
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  color: var(--ink-2); font-size: 12.5px; padding: 7px 10px; cursor: pointer;
}
.mo-meta { margin-left: auto; font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.mo-meta b { color: var(--ink); font-weight: 700; }

/* ---------- 分类 chips（横向滚动） ---------- */
.mo-chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.mo-chips::-webkit-scrollbar { height: 5px; }
.mo-chips::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.mo-chip {
  flex: none; border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted);
  transition: color .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
}
.mo-chip i { font-style: normal; font-size: 11px; opacity: .66; margin-left: 4px; font-variant-numeric: tabular-nums; }
.mo-chip:hover { color: var(--ink); border-color: var(--line-strong); }
.mo-chip.is-on { color: var(--brand-dark); background: var(--brand-soft); border-color: var(--brand-line); }

/* ---------- 动作卡片网格 ---------- */
.mo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(198px, 1fr)); gap: 14px;
}
.mo-card {
  position: relative; display: block; padding: 0; cursor: pointer; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--surface);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.mo-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--brand-light), var(--brand), var(--brand-light));
  transform: scaleX(0); transform-origin: left;
  transition: transform .26s var(--ease);
}
.mo-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(0, 0, 0, .38); border-color: var(--brand-line); }
.mo-card:hover::before { transform: scaleX(1); }
.mo-card-media { position: relative; display: block; aspect-ratio: 16 / 9; background: #17110b; overflow: hidden; }
.mo-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mo-card-badge {
  position: absolute; top: 7px; left: 7px; z-index: 1;
  font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  color: #ffd9b8; background: rgba(23, 17, 11, .72); border: 1px solid rgba(255, 138, 43, .38);
  border-radius: 5px; padding: 2px 6px;
}
.mo-card-badge-pack { color: #bfe3ff; border-color: rgba(120, 180, 255, .4); }
.mo-card-badge-char { color: #ffe9b0; border-color: rgba(246, 198, 92, .45); }
.mo-card-body { display: block; padding: 10px 12px 12px; }
.mo-card-name {
  display: block; font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mo-card-desc {
  display: -webkit-box; margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: var(--muted-2);
  min-height: 2.2em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mo-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mo-tag {
  font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--muted);
  background: var(--bg-soft); border-radius: 6px; padding: 2px 7px;
}
.mo-tag-loop { color: var(--brand-dark); background: var(--brand-soft); }

.mo-empty { padding: 58px 0; text-align: center; color: var(--muted); font-size: 13.5px; }
.mo-empty[hidden] { display: none; }

/* ---------- 分页 ---------- */
.mo-pager { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 28px; }
.mo-page {
  min-width: 34px; border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  border-radius: 9px; padding: 7px 11px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  transition: color .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
}
.mo-page:hover:not(:disabled):not(.is-on) { border-color: var(--brand-line); color: var(--brand-dark); }
.mo-page.is-on { color: #fff; background: linear-gradient(135deg, var(--brand-light), var(--brand)); border-color: transparent; }
.mo-page:disabled { opacity: .45; cursor: not-allowed; }
.mo-page-gap { padding: 0 2px; color: var(--muted-2); font-size: 12.5px; }

/* ---------- 数据说明 ---------- */
.mo-note {
  margin-top: 28px; padding: 14px 18px; border-radius: 12px;
  background: var(--bg-soft); border: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.85; color: var(--muted);
}
.mo-note b { color: var(--ink-2); }

/* ---------- 详情弹窗 ---------- */
.mo-mt-img {
  display: block; width: 100%; max-width: 320px; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: 10px; border: 1px solid var(--line);
  background: #17110b; margin: 0 auto 14px;
}
.mo-mt-desc { margin: 0 0 14px; font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
.mo-mt-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0 0 16px; }
.mo-mt-meta > div { display: flex; gap: 8px; font-size: 12.5px; }
.mo-mt-meta dt { flex: none; color: var(--muted-2); }
.mo-mt-meta dd { margin: 0; color: var(--ink-2); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.mo-mt-meta code { font-size: 11px; color: var(--muted); font-weight: 400; }
.mo-mt-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mo-mt-tip { font-size: 11.5px; line-height: 1.6; color: var(--muted-2); flex: 1 1 200px; }

/* ---------- 响应式 ---------- */
@media (max-width: 620px) {
  .mo-head-row { gap: 12px; }
  .mo-head-search { flex: 1 1 100%; max-width: none; }
  .mo-stats { gap: 8px; }
  .mo-stat { min-width: calc(50% - 4px); padding: 9px 12px; }
  .mo-stat b { font-size: 18px; }
  .mo-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
  .mo-mt-meta { grid-template-columns: 1fr; }
}

/* ==========================================================================
   角色浏览 · 复刻 Mixamo 官网角色页构图（左名录网格 + 右预览展台）
   独立浅色面板（内嵌查看器）：双主题下均保持官网观感
   ========================================================================== */
.mo-sec.is-char #moChips,
.mo-sec.is-char #moGrid,
.mo-sec.is-char #moEmpty,
.mo-sec.is-char #moPager,
.mo-sec.is-char #moSort,
.mo-sec.is-char #moMeta { display: none; }

.mx-shell {
  --mx-bg: #ffffff;
  --mx-line: #e3e8ef;
  --mx-ink: #1e293b;
  --mx-muted: #64748b;
  --mx-muted-2: #94a3b8;
  --mx-soft: #f8fafc;
  display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 18px; align-items: start;
}
.mx-shell[hidden] { display: none; }
.mx-shell.is-wide { grid-template-columns: minmax(0, 1fr); }
.mx-shell.is-wide .mx-side { display: none; }

/* ---- 左栏工具栏（计数 / 每页数 / 排序 / 收起面板） ---- */
.mx-toolbar { display: flex; align-items: center; gap: 10px; padding: 2px 2px 12px; }
.mx-count { font-size: 12.5px; color: var(--mx-muted); font-variant-numeric: tabular-nums; }
.mx-count b { color: var(--mx-ink); font-weight: 700; }
.mx-per {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--mx-muted);
}
.mx-per select {
  border: 1px solid var(--mx-line); border-radius: 9px; background: var(--mx-bg);
  color: var(--mx-ink); font-size: 12.5px; padding: 7px 10px; cursor: pointer;
}
.mx-icobtn {
  width: 34px; height: 34px; flex: none; border: 1px solid var(--mx-line);
  background: var(--mx-bg); border-radius: 9px; cursor: pointer;
  color: var(--mx-ink); font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
}
.mx-icobtn:hover { border-color: var(--brand-line); color: var(--brand-dark); background: var(--brand-soft); }
.mx-icobtn.is-on { color: var(--brand-dark); background: var(--brand-soft); border-color: var(--brand-line); }

/* ---- 左栏名录网格（图上名下，仿官网） ---- */
.mx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.mx-card {
  position: relative; display: block; padding: 0; cursor: pointer; text-align: left;
  border: 1px solid var(--mx-line); border-radius: 12px; overflow: hidden;
  background: var(--mx-bg);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.mx-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -18px rgba(15, 23, 42, .45); border-color: #cbd5e1; }
.mx-card.is-on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-glow); }
.mx-card-img {
  display: block; aspect-ratio: 4 / 5; overflow: hidden;
  background: linear-gradient(180deg, #fbfcfe 0%, #edf1f7 100%);
}
.mx-card-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mx-card-name {
  display: block; padding: 8px 10px 10px; font-size: 12px; font-weight: 600;
  color: var(--mx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mx-empty { padding: 58px 0; text-align: center; color: var(--mx-muted); font-size: 13.5px; }
.mx-empty[hidden] { display: none; }
.mx-pager {
  display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 22px;
}

/* ---- 右栏：操作按钮列 ---- */
.mx-side { display: grid; gap: 12px; }
.mx-acts { display: grid; gap: 8px; }
.mx-dl {
  border: 0; cursor: pointer; border-radius: 8px; padding: 12px;
  background: linear-gradient(135deg, var(--brand-light), var(--brand));
  color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .1em;
  box-shadow: 0 12px 24px -14px rgba(255, 106, 0, .55);
  transition: filter .16s var(--ease), transform .12s var(--ease);
}
.mx-dl:hover { filter: brightness(1.07); }
.mx-dl:active { transform: translateY(1px); }
.mx-act {
  border: 1px solid var(--mx-line); background: var(--mx-bg); color: var(--mx-ink);
  border-radius: 8px; padding: 10px; font-size: 12px; font-weight: 700; letter-spacing: .07em;
  cursor: pointer; transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.mx-act:hover:not(:disabled) { border-color: var(--brand-line); color: var(--brand-dark); background: var(--brand-soft); }
.mx-act:disabled { opacity: .5; cursor: not-allowed; }

/* ---- 右栏：标题 + 预览展台 ---- */
.mx-side-name {
  margin: 2px 0 0; text-align: center; color: var(--mx-muted-2);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
}
.mx-side-name b { display: block; font-size: 15px; letter-spacing: .03em; color: var(--mx-ink); text-transform: none; font-weight: 800; }
.mx-side-name i { display: block; margin-top: 2px; font-style: normal; font-size: 10px; letter-spacing: .08em; }

.mx-stage {
  position: relative; height: 436px; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--mx-line);
  background: linear-gradient(180deg, #fdfefe 0%, #eef1f6 76%, #e5e9f0 100%);
  touch-action: none; cursor: grab; user-select: none;
}
.mx-stage:active { cursor: grabbing; }
.mx-floor {
  position: absolute; left: 50%; bottom: 7%; width: 190%; height: 46%;
  transform: translateX(-50%) perspective(460px) rotateX(64deg);
  transform-origin: bottom center; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(100, 116, 139, .22) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(100, 116, 139, .22) 0 1px, transparent 1px 46px);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .95), transparent 88%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, .95), transparent 88%);
}
.mx-holder { position: absolute; inset: 0; }
.mx-holder canvas { display: block; width: 100%; height: 100%; }
.mx-holder canvas[hidden] { display: none; }
.mx-holder img {
  position: absolute; left: 50%; bottom: 12%; width: 208px; margin-left: -104px;
  filter: drop-shadow(0 20px 14px rgba(15, 23, 42, .16));
  transition: transform .06s linear; transform-style: preserve-3d; will-change: transform;
}
.mx-ctrl {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px);
  border: 1px solid rgba(148, 163, 184, .38); border-radius: 10px; padding: 7px 10px;
}
.mx-ctrl button {
  border: 0; background: transparent; cursor: pointer; color: #475569;
  font-size: 12px; padding: 2px 5px; border-radius: 6px; line-height: 1;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.mx-ctrl button:hover { background: rgba(148, 163, 184, .2); color: #0f172a; }
#mxPlay { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
#mxPlay.is-on { color: var(--brand-dark); background: var(--brand-soft); }
.mx-deg { font-size: 11px; color: #64748b; font-variant-numeric: tabular-nums; flex: none; }
.mx-bar { flex: 1; height: 4px; border-radius: 3px; background: rgba(100, 116, 139, .25); overflow: hidden; }
.mx-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--brand-light), var(--brand)); }
.mx-zoom { display: flex; gap: 2px; flex: none; }
.mx-zoom button { width: 24px; height: 24px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.mx-side-tip { margin: 0; font-size: 11px; line-height: 1.7; color: var(--mx-muted-2); }
.mx-side-tip b { color: var(--mx-muted); }

/* 深色主题下给浅色内嵌面板加一点分离度 */
html[data-theme="dark"] .mx-card,
html[data-theme="dark"] .mx-stage { box-shadow: 0 22px 50px -28px rgba(0, 0, 0, .75); }

/* ---- 响应式 ---- */
@media (max-width: 1080px) {
  .mx-shell { grid-template-columns: 1fr; }
  .mx-side { order: -1; }
  .mx-stage { height: 360px; }
}
@media (max-width: 620px) {
  .mx-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
  .mx-stage { height: 300px; }
  .mx-holder img { width: 164px; margin-left: -82px; }
  .mx-toolbar { flex-wrap: wrap; }
}

/* 混合网格（全部 tab）中的角色卡：竖版 contain 展示 */
.mo-card-media-char { aspect-ratio: 4 / 5; background: linear-gradient(180deg, #fbfcfe 0%, #edf1f7 100%); }
.mo-card-media-char img { object-fit: contain; }
.mo-mt-img-char { aspect-ratio: 420 / 450; max-width: 236px; object-fit: contain; background: linear-gradient(180deg, #fbfcfe 0%, #edf1f7 100%); }

/* ==========================================================================
   面试模拟（ai-interview.html · 20261023a）
   三种模式卡 + 答题面板 + 全真模拟计时 + 完成复盘。复用 .mo-stats/.mo-chips。
   ========================================================================== */
.iv-sec { padding-top: 8px; }

/* ---- 模式选择卡 ---- */
.iv-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.iv-mode {
  position: relative; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 22px 20px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
  color: inherit; font: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.iv-mode:hover { transform: translateY(-2px); border-color: var(--brand-line); box-shadow: 0 16px 34px -20px var(--brand-glow); }
.iv-mode.is-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 16px 34px -20px var(--brand-glow); }
.iv-mode.is-on::after {
  content: '进行中'; position: absolute; top: 14px; right: 14px;
  font-size: 11px; letter-spacing: .08em; color: var(--brand);
}
.iv-mode-ico {
  width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand);
}
.iv-mode-ico svg { width: 22px; height: 22px; }
.iv-mode-name { font-size: 17px; font-weight: 700; }
.iv-mode-desc { font-size: 13px; line-height: 1.7; color: var(--muted); }

/* ---- 答题面板 ---- */
.iv-panel { margin-top: 22px; }
.iv-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.iv-mode-label { font-weight: 700; font-size: 15px; }
.iv-prog { font-size: 13px; color: var(--muted); }
.iv-timer {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px;
  padding: 4px 12px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
}
.iv-timer-low { background: rgba(220, 38, 38, .12); color: #dc2626; }
.iv-exit {
  margin-left: auto; cursor: pointer;
  font-size: 12.5px; color: var(--muted);
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; transition: color .15s, border-color .15s;
}
.iv-exit:hover { color: var(--brand); border-color: var(--brand-line); }

.iv-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 28px 24px;
}
.iv-tags { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.iv-cat-tag {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--brand); background: var(--brand-soft);
  border: 1px solid var(--brand-line); border-radius: 999px;
  padding: 3px 12px;
}
/* 非本岗位补充题：降饱和 + 虚线边框，提示「这题是相关专业/通用补充」 */
.iv-cat-tag.is-gen {
  color: var(--muted); background: transparent;
  border-style: dashed; border-color: var(--line);
}
.iv-lv { font-size: 12.5px; letter-spacing: .12em; color: var(--warn); }
.iv-q { margin: 0 0 18px; font-size: 21px; line-height: 1.6; }
.iv-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.iv-primary { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; }
.iv-nav {
  cursor: pointer; font-size: 13px; color: var(--muted);
  background: none; border: none; padding: 6px 2px;
}
.iv-nav:hover { color: var(--brand); }

.iv-points {
  margin-top: 20px; padding: 18px 20px 14px;
  border-radius: 14px;
  background: var(--bg-soft); border: 1px dashed var(--line-strong);
}
.iv-points h4 { margin: 0 0 10px; font-size: 13.5px; letter-spacing: .06em; color: var(--brand); }
.iv-points ol { margin: 0; padding-left: 20px; }
.iv-points li { font-size: 14px; line-height: 1.9; }
.iv-points-tip { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* ---- 完成复盘 ---- */
.iv-summary {
  margin-top: 8px; padding: 26px 28px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 18px;
}
.iv-sum-head { margin: 0 0 16px; font-size: 19px; }
.iv-sum-head span { font-size: 13.5px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.iv-sum-list { margin: 0 0 14px; padding: 0; list-style: none; }
.iv-sum-list li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 2px; border-bottom: 1px solid var(--line);
  font-size: 14px; line-height: 1.7;
}
.iv-sum-list li:last-child { border-bottom: none; }
.iv-sum-idx {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
  background: var(--brand-soft); color: var(--brand);
}
.iv-sum-cat { flex: none; font-size: 12px; color: var(--muted); }
.iv-sum-q { flex: 1; min-width: 0; }
.iv-sum-flag { flex: none; font-size: 11.5px; color: var(--ok); }
.iv-sum-flag.none { color: var(--muted); }
.iv-sum-tip { margin: 0 0 18px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.iv-sum-acts { padding-top: 4px; }

/* ====== 20261023j AI 面试复盘报告（分析语音回答 → 建议 → 评分 → 注意事项） ====== */
.iv-report {
  margin: 0 0 20px; padding: 20px 22px 18px;
  border: 1px solid var(--brand-line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--brand-soft), var(--surface) 42%);
  box-shadow: var(--shadow-sm);
}
.iv-report-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px dashed var(--brand-line);
}
.iv-report-title { margin: 0; font-size: 16.5px; font-weight: 800; letter-spacing: .01em; }
.iv-report-sub { font-size: 12px; color: var(--muted); }
.iv-report-body { font-size: 13.5px; }
.iv-report-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* 生成中骨架 */
.iv-rep-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 0 6px; font-size: 13.5px; color: var(--muted);
}
.iv-rep-spin {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--brand-line); border-top-color: var(--brand);
  animation: ivRepSpin .8s linear infinite;
}
@keyframes ivRepSpin { to { transform: rotate(360deg); } }

/* 未采集到回答的提示条 */
.iv-rep-empty {
  margin-bottom: 16px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(217, 119, 6, .08); border: 1px solid rgba(217, 119, 6, .28);
  font-size: 13px; line-height: 1.8; color: var(--warn);
}

/* 综合评分环 + 等级总评 */
.iv-rep-score { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.iv-rep-ring {
  flex: none; position: relative; width: 92px; height: 92px; border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--line) 0);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px -14px rgba(255, 106, 0, .6);
}
.iv-rep-ring::after {
  content: ''; position: absolute; inset: 8px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
}
.iv-rep-ring b {
  position: relative; z-index: 1; font-family: var(--font-num);
  font-size: 26px; font-weight: 800; color: var(--brand); line-height: 1;
}
.iv-rep-ring i { position: relative; z-index: 1; font-size: 11px; font-style: normal; color: var(--muted); margin-top: 3px; }
.iv-rep-score-txt { flex: 1; min-width: 220px; }
.iv-rep-level {
  display: inline-block; margin-bottom: 6px; padding: 3px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  background: var(--brand); color: #fff;
}
.iv-rep-level.lv-待提升 { background: var(--warn); }
.iv-rep-level.lv-需加强 { background: var(--err); }
.iv-rep-score-txt p { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--ink); }

/* 维度得分条 */
.iv-rep-dims { margin: 18px 0 4px; display: grid; gap: 10px; }
.iv-rep-dim { display: flex; align-items: center; gap: 12px; }
.iv-rep-dim .k { flex: none; width: 72px; font-size: 12.5px; color: var(--muted); }
.iv-rep-dim .bar { flex: 1; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.iv-rep-dim .bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-light), var(--brand));
}
.iv-rep-dim .v { flex: none; width: 30px; text-align: right; font-family: var(--font-num); font-size: 12.5px; font-weight: 700; }

/* 逐题分析 */
.iv-rep-h5 { margin: 20px 0 10px; font-size: 14px; font-weight: 800; }
.iv-rep-qa { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.iv-rep-qa li {
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--bg-soft); border: 1px solid var(--line);
}
.iv-rep-qa-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.iv-rep-qa-h b { flex: none; font-size: 12.5px; color: var(--brand); }
.iv-rep-qa-h .cat { flex: none; font-size: 11.5px; color: var(--muted); }
.iv-rep-qa-h .q { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
.iv-rep-ans {
  margin: 8px 0 0; padding: 8px 10px; border-radius: 8px;
  background: var(--surface); border: 1px dashed var(--line-strong);
  font-size: 12.5px; line-height: 1.75; color: var(--muted);
}
.iv-rep-qa-lines { display: grid; gap: 4px; margin-top: 8px; }
.iv-rep-qa-lines span { font-size: 12.5px; line-height: 1.7; }
.iv-rep-qa-lines .g { color: var(--ok); }
.iv-rep-qa-lines .b { color: var(--warn); }
.iv-rep-qa-lines .t { color: var(--ink); }

/* 建议 / 注意事项 双栏 */
.iv-rep-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.iv-rep-col { min-width: 0; }
.iv-rep-ul, .iv-rep-ul.warn { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.iv-rep-ul li {
  position: relative; padding-left: 16px; font-size: 13px; line-height: 1.8; color: var(--ink);
}
.iv-rep-ul li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}
.iv-rep-ul.warn li::before { background: var(--warn); }

/* 逐题录音回放 */
.iv-rep-audio {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 0; font-size: 12.5px; color: var(--muted);
}
.iv-rep-audio audio { height: 28px; max-width: 100%; }

/* ====== 20261023j 会议区作答区（手写作答 + 录音回听：手机 / 平板可用） ====== */
.iv-ans {
  margin: 0; padding: 12px 16px 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
}
.iv-ans-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.iv-ans-title { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .02em; }
.iv-ans-state { font-size: 11.5px; color: rgba(232, 235, 240, .62); }
.iv-ans-input {
  display: block; width: 100%; box-sizing: border-box; resize: vertical;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .14);
  color: #f2f4f8; font-family: inherit; font-size: 13.5px; line-height: 1.7;
}
.iv-ans-input::placeholder { color: rgba(232, 235, 240, .45); }
.iv-ans-input:focus { outline: none; border-color: rgba(255, 187, 120, .6); }
/* ====== 20261028c 关键词 chips：让候选人看到面试官「抓住」的术语 ====== */
.iv-kw { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.iv-kw[hidden] { display: none; }
.iv-kw-lead { font-size: 12px; color: rgba(255, 217, 168, .82); margin-right: 2px; white-space: nowrap; }
.iv-kw-chip {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  font-size: 12px; line-height: 1.4; font-family: inherit;
  background: rgba(255, 138, 43, .16); border: 1px solid rgba(255, 187, 120, .4); color: #ffd9a8;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.iv-kw-chip:hover { background: rgba(255, 138, 43, .3); border-color: rgba(255, 187, 120, .72); transform: translateY(-1px); }
.iv-kw-chip:active { transform: translateY(0); }
.iv-ans-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.iv-ans-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 138, 43, .18); border: 1px solid rgba(255, 187, 120, .45);
  color: #ffd9a8; font-size: 12.5px; font-family: inherit;
}
.iv-ans-btn:disabled { opacity: .5; cursor: not-allowed; }
.iv-ans-rec { font-size: 12px; color: #ffd9a8; }
.iv-ans-audio { height: 30px; max-width: 100%; }

/* ====== 20261023j 开始前确认：准备好了吗 ====== */
.iv-ready {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(20, 14, 10, .55); backdrop-filter: blur(3px);
}
/* [hidden] 守卫：display:flex 会覆盖 hidden 的 UA 样式，否则弹窗从页面加载起就整屏可见 */
.iv-ready[hidden], #ivReportRetry[hidden] { display: none; }
.iv-ready-card {
  width: 100%; max-width: 460px; padding: 24px 24px 20px;
  border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.iv-ready-title { margin: 0 0 6px; font-size: 19px; font-weight: 800; }
.iv-ready-sub { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.iv-ready-check { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.iv-ready-check li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.7; color: var(--ink);
}
.iv-ready-check li.no { color: var(--muted); }
.iv-ready-check li span { flex: none; }
/* 自检面板：试听语音结果反馈 */
.iv-ready-test {
  margin: -4px 0 16px; font-size: 13px; line-height: 1.65; color: var(--muted);
}
.iv-ready-test.is-ok { color: #16a34a; font-weight: 600; }
.iv-ready-test.is-bad { color: #d97706; font-weight: 600; }
.iv-ready-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.iv-ready-acts .btn { flex: 1; min-width: 130px; justify-content: center; }

/* 历史记录里的评分 */
.iv-hist-score {
  flex: none; display: inline-flex; align-items: baseline; gap: 1px;
  font-family: var(--font-num); font-size: 13px; font-weight: 800; color: var(--brand);
}
.iv-hist-score i { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--muted); }

@media (max-width: 620px) {
  .iv-report { padding: 16px 14px 14px; }
  .iv-rep-score { gap: 14px; }
  .iv-rep-ring { width: 78px; height: 78px; }
  .iv-rep-ring b { font-size: 22px; }
  .iv-rep-cols { grid-template-columns: 1fr; gap: 12px; }
  .iv-rep-dim .k { width: 60px; }
}

/* ---- 特效创新中心 Hub：10 张卡时末卡独占一行拉通 ---- */
.ai-tool-grid .ai-tool-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; }

/* ---- 响应式 ---- */
@media (max-width: 1080px) {
  .iv-modes { grid-template-columns: 1fr; }
  .iv-q { font-size: 19px; }
}
@media (max-width: 620px) {
  .iv-card { padding: 20px 18px; }
  .iv-summary { padding: 20px 16px; }
  .iv-q { font-size: 17px; }
  .iv-sum-list li { flex-wrap: wrap; }
}

/* ===== 20261023b 新增：视频面试会议风格 / 练习历史 ===== */

/* 3 个模式卡（视频面试 / 电话面试 / 全真模拟）：桌面 3 列 */
.iv-modes { grid-template-columns: repeat(3, 1fr); }

/* ---- 视频面试：会议风格通话区（深色，拟腾讯会议） ---- */
.iv-video { margin-top: 22px; }
.iv-call {
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #23272e 0%, #1b1e24 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 20px 46px -26px rgba(15, 23, 42, .55);
  color: #e8ebf0;
}
.iv-call-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px;
  background: rgba(255, 255, 255, .05);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.iv-call-title { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: #f2f4f8; min-width: 0; }
.iv-call-title b { font-weight: 700; white-space: nowrap; }
.iv-call-sub { font-size: 12.5px; font-weight: 400; color: rgba(232, 235, 240, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-call-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: .06em; color: #4ade80;
  background: rgba(74, 222, 128, .14); border: 1px solid rgba(74, 222, 128, .32);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.iv-call-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: ivLivePulse 1.6s ease-in-out infinite; }
@keyframes ivLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.iv-call-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.iv-call-prog { font-size: 12.5px; color: rgba(232, 235, 240, .75); font-variant-numeric: tabular-nums; }
.iv-call-dur { font-size: 13.5px; font-weight: 700; color: #f2f4f8; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.iv-call .iv-timer { background: rgba(255, 255, 255, .14); color: #ffd9a8; }
.iv-call .iv-timer-low { background: rgba(248, 113, 113, .2); color: #fca5a5; }
/* 语音环境异常提示（不支持合成/无中文语音包） */
.iv-call-warn {
  padding: 9px 18px; font-size: 12.5px; line-height: 1.6;
  color: #fde68a; background: rgba(250, 204, 21, .12);
  border-bottom: 1px solid rgba(250, 204, 21, .28);
}
.iv-call-warn[hidden] { display: none; }
/* 受限环境兜底：改用新窗口面试 */
.iv-call-warn--act {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  color: #bae6fd; background: rgba(56, 189, 248, .12);
  border-bottom-color: rgba(56, 189, 248, .3);
}
.iv-call-warn--act .btn {
  flex: none; border: 1px solid rgba(56, 189, 248, .5); background: rgba(56, 189, 248, .16);
  color: #e0f2fe; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.iv-call-warn--act .btn:hover { background: rgba(56, 189, 248, .28); }

/* 舞台：面试官大窗口 + 本人小窗（画中画） */
.iv-stage { position: relative; padding: 16px; }
.iv-interviewer {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 28px 22px; min-height: 320px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 138, 43, .16), rgba(255, 138, 43, 0) 62%),
    linear-gradient(160deg, #2b3038, #20242b);
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px; overflow: hidden;
}
.iv-iv-avatar {
  position: relative; width: 96px; height: 96px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .96), rgba(255, 217, 168, .85));
  box-shadow: 0 0 0 7px rgba(255, 138, 43, .16), 0 14px 34px -14px rgba(0, 0, 0, .5);
}
.iv-iv-face {
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #ffd9a8, var(--brand));
  box-shadow: 0 6px 18px -6px rgba(255, 138, 43, .5);
}
.iv-iv-wave {
  position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid rgba(255, 187, 120, .55);
  animation: ivPulse 1.8s ease-out infinite;
}
@keyframes ivPulse {
  0% { transform: scale(.9); opacity: .85; }
  70% { transform: scale(1.28); opacity: 0; }
  100% { opacity: 0; }
}
.iv-iv-name { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: .01em; }
.iv-iv-status {
  font-size: 12px; letter-spacing: .1em; color: #ffd9a8;
  background: rgba(255, 138, 43, .16); border: 1px solid rgba(255, 187, 120, .35);
  padding: 3px 12px; border-radius: 999px;
}

/* ---- 电话面试：纯语音通话（无摄像头画面，面试官居中大像） ---- */
.iv-stage--phone { display: flex; align-items: center; justify-content: center; }
.iv-interviewer--phone { min-height: 340px; }
.iv-iv-avatar--phone {
  width: 124px; height: 124px;
  box-shadow: 0 0 0 9px rgba(255, 138, 43, .14), 0 18px 40px -14px rgba(0, 0, 0, .55);
}
.iv-interviewer--phone .iv-iv-face { width: 58px; height: 58px; }
.iv-interviewer--phone .iv-iv-name { font-size: 18px; }
.iv-interviewer--phone .iv-iv-subtitle { font-size: 17px; line-height: 1.85; }
/* 拨号中的震铃提示 */
.iv-phone-ring {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: #ffd9a8; letter-spacing: .06em;
  background: rgba(255, 138, 43, .14); border: 1px solid rgba(255, 187, 120, .35);
  padding: 7px 18px; border-radius: 999px;
  animation: ivRingBlink 1s ease-in-out infinite;
}
.iv-phone-ring[hidden] { display: none; }
@keyframes ivRingBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
.iv-iv-subtitle {
  max-width: 94%; text-align: center; font-size: 16px; line-height: 1.85;
  color: rgba(232, 235, 240, .92); min-height: 1.85em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
/* 本人小窗（画中画，覆在面试官窗口右下角） */
.iv-self {
  position: absolute; right: 30px; bottom: 30px;
  width: 30%; max-width: 236px; min-width: 132px; aspect-ratio: 4 / 3;
  border-radius: 12px; overflow: hidden;
  background: #14171c; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6);
  display: flex; align-items: center; justify-content: center;
}
.iv-self video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scaleX(-1); /* 镜像，更贴近真实自拍视角 */
}
.iv-self-off { font-size: 12px; color: rgba(232, 235, 240, .66); text-align: center; padding: 0 12px; line-height: 1.6; }
/* 设备失败提示里的直链与小字（iOS / 微信 / iframe 受限场景） */
.iv-self-off .iv-link, .iv-ans-rec .iv-link { color: #ffb27a; text-decoration: underline; text-underline-offset: 2px; }
.iv-self-off .iv-tipx, .iv-ans-rec .iv-tipx { font-size: 11px; color: rgba(232, 235, 240, .5); }
.iv-self-name {
  position: absolute; left: 8px; bottom: 7px;
  font-size: 11px; color: rgba(255, 255, 255, .9);
  background: rgba(0, 0, 0, .45); border-radius: 6px; padding: 2px 8px;
}
/* 会议控制条（静音 / 转写 / 摄像头 / 翻转 / 语音 / 全屏 / 结束） */
.iv-call-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.iv-call-btn {
  cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 74px; padding: 10px 12px 9px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px; color: #e8ebf0;
  transition: background .15s, transform .15s, border-color .15s;
}
.iv-call-btn:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); }
.iv-call-btn:disabled { opacity: .45; cursor: default; transform: none; }
.iv-call-btn:disabled:hover { background: rgba(255, 255, 255, .09); transform: none; }
.iv-call-btn .iv-cbi { font-size: 19px; line-height: 1; }
.iv-call-btn small { font-size: 11.5px; color: rgba(232, 235, 240, .78); }
.iv-call-btn.is-off { background: rgba(248, 113, 113, .16); border-color: rgba(248, 113, 113, .4); color: #fca5a5; }
.iv-call-btn.is-off small { color: #fca5a5; }
.iv-call-btn.is-end { background: #e5484d; border-color: #e5484d; color: #fff; min-width: 92px; }
.iv-call-btn.is-end small { color: rgba(255, 255, 255, .92); }
.iv-call-btn.is-end:hover { background: #d13b40; }
/* 语音转写聆听中高亮 */
.iv-call-btn.is-on { background: rgba(56, 189, 248, .18); border-color: rgba(56, 189, 248, .45); color: #7dd3fc; }
.iv-call-btn.is-on small { color: #7dd3fc; }
/* 候选人语音实时转写区（模拟腾讯会议「我的字幕」） */
.iv-asr {
  margin: 12px 0 0; padding: 12px 16px 13px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
}
.iv-asr[hidden] { display: none; }
.iv-asr-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; letter-spacing: .06em; color: #7dd3fc;
}
.iv-asr-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #38bdf8;
  animation: ivLivePulse 1.4s ease-in-out infinite;
}
.iv-asr-text {
  margin: 7px 0 0; font-size: 15px; line-height: 1.8;
  color: rgba(232, 235, 240, .92); min-height: 1.8em;
}
.iv-asr-text:empty::before { content: '等待说话…'; color: rgba(232, 235, 240, .45); }
.iv-video-tip { margin: 14px 0 0; font-size: 12px; line-height: 1.7; color: var(--muted); }
/* 会议全屏最大化：舞台撑满、题卡贴底（Safari 需 -webkit- 前缀） */
#ivVideo:fullscreen, #ivPhone:fullscreen,
#ivVideo:-webkit-full-screen, #ivPhone:-webkit-full-screen {
  height: 100%; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  background: #14171c;
}
#ivVideo:fullscreen .iv-call, #ivPhone:fullscreen .iv-call,
#ivVideo:-webkit-full-screen .iv-call, #ivPhone:-webkit-full-screen .iv-call {
  flex: 1; min-height: 0; border: none; border-radius: 0;
  display: flex; flex-direction: column;
}
#ivVideo:fullscreen .iv-stage, #ivPhone:fullscreen .iv-stage,
#ivVideo:-webkit-full-screen .iv-stage, #ivPhone:-webkit-full-screen .iv-stage { flex: 1; min-height: 0; }
#ivVideo:fullscreen .iv-interviewer, #ivPhone:fullscreen .iv-interviewer,
#ivVideo:-webkit-full-screen .iv-interviewer, #ivPhone:-webkit-full-screen .iv-interviewer { flex: 1; min-height: 0; }
#ivVideo:fullscreen .iv-self, #ivPhone:fullscreen .iv-self,
#ivVideo:-webkit-full-screen .iv-self, #ivPhone:-webkit-full-screen .iv-self { max-width: 320px; }

/* ---- 练习历史面板 ---- */
.iv-history {
  margin-top: 22px; padding: 24px 26px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 18px;
}
.iv-history-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}
.iv-history-head h3 { margin: 0; font-size: 18px; }
.iv-history-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.iv-history-list { margin: 0; padding: 0; list-style: none; }
.iv-history-list li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.7;
}
.iv-history-list li:last-child { border-bottom: none; }
.iv-history-empty { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.iv-hist-entry { margin-top: 22px; }

/* ---- 响应式（覆盖上方 1080/620 断点） ---- */
@media (max-width: 1080px) {
  .iv-modes { grid-template-columns: repeat(2, 1fr); }
  .iv-interviewer { min-height: 260px; }
  .iv-self { width: 34%; right: 22px; bottom: 22px; }
}
@media (max-width: 620px) {
  .iv-modes { grid-template-columns: 1fr; }
  .iv-history { padding: 20px 16px; }
  .iv-hist-entry { margin-top: 18px; }
  /* 移动端：本人小窗从画中画改为舞台下方通栏，避免遮挡面试官 */
  .iv-stage { padding: 12px; }
  .iv-interviewer { min-height: 220px; }
  /* 移动端收紧面试官头像与字幕，避免小屏内容溢出窗口被裁切 */
  .iv-iv-avatar { width: 76px; height: 76px; box-shadow: 0 0 0 5px rgba(255, 138, 43, .16), 0 12px 26px -12px rgba(0, 0, 0, .5); }
  .iv-iv-face { width: 36px; height: 36px; }
  .iv-iv-wave { inset: -5px; }
  .iv-interviewer--phone .iv-iv-avatar { width: 88px; height: 88px; }
  .iv-interviewer--phone .iv-iv-face { width: 42px; height: 42px; }
  /* 会议顶栏紧凑化：标题与计时信息两行构图，压缩垂直占位 */
  .iv-call-top { padding: 10px 14px; gap: 8px; }
  .iv-call-title { font-size: 13.5px; gap: 7px; }
  .iv-call-sub { font-size: 11.5px; }
  .iv-call-live { font-size: 10.5px; padding: 2px 9px; }
  .iv-call-meta { gap: 8px; }
  .iv-call-prog { font-size: 11.5px; }
  .iv-call-dur { font-size: 12.5px; }
  .iv-call .iv-timer { font-size: 12.5px; padding: 3px 10px; }
  /* 控制条：7 钮两行构图，紧凑排版 */
  .iv-call-bar { gap: 8px; padding: 10px 12px 14px; }
  .iv-call-btn { min-width: 60px; padding: 8px 8px 7px; gap: 4px; border-radius: 12px; }
  .iv-call-btn .iv-cbi { font-size: 17px; }
  .iv-call-btn small { font-size: 11px; }
  .iv-call-btn.is-end { min-width: 84px; }
  .iv-iv-name { font-size: 16px; }
  .iv-iv-subtitle { font-size: 14px; line-height: 1.75; }
  .iv-asr { margin-top: 10px; padding: 10px 14px 11px; }
  .iv-asr-text { font-size: 14px; }
  .iv-self {
    /* 注意：必须保持定位上下文（relative），否则内部 video 的 inset:0
       会解析到 .iv-stage，摄像头画面将整个盖住面试官位；
       同时要清掉桌面端画中画的 right/bottom 偏移，否则通栏会被拉偏 */
    position: relative; right: auto; bottom: auto;
    width: auto; max-width: none; min-width: 0;
    aspect-ratio: 4 / 3; margin: 12px 0 0;
  }
  /* 移动端 + 全屏：舞台改弹性列布局，面试官窗弹性伸缩、本人小窗限高，
     避免固定内容高溢出舞台后被控制条盖住 */
  #ivVideo:fullscreen .iv-stage, #ivPhone:fullscreen .iv-stage,
  #ivVideo:-webkit-full-screen .iv-stage, #ivPhone:-webkit-full-screen .iv-stage {
    display: flex; flex-direction: column;
  }
  #ivVideo:fullscreen .iv-interviewer, #ivPhone:fullscreen .iv-interviewer,
  #ivVideo:-webkit-full-screen .iv-interviewer, #ivPhone:-webkit-full-screen .iv-interviewer {
    flex: 1; min-height: 0; justify-content: flex-start; overflow-y: auto;
    padding: 14px 14px; gap: 8px;
  }
  #ivVideo:fullscreen .iv-self, #ivPhone:fullscreen .iv-self,
  #ivVideo:-webkit-full-screen .iv-self, #ivPhone:-webkit-full-screen .iv-self {
    flex: none; height: 30%; min-height: 132px; max-height: 200px;
    margin: 10px 0 0; right: auto; bottom: auto;
  }
}

/* ====== 20261023c 选岗 / 强度 / 面试官 入口 ====== */
.iv-pos { margin-top: 6px; }
/* 配置区标题栏：标题 + 副标题（左） / 练习历史入口（右） */
.iv-pos-top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.iv-pos-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: .01em; }
.iv-pos-subtitle { margin: 5px 0 0; font-size: 13px; color: var(--muted); }
.iv-pos-top .btn { flex: none; }
/* 步骤标题：与配置区主标题（20px）拉开一级，形成 20 → 17 → 15/16 的字号阶梯 */
.iv-pos-head {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 17px; font-weight: 700; margin: 20px 0 12px;
}
.iv-pos-step {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; font-size: 14px; font-weight: 800;
  transform: translateY(2px);
}
.iv-pos-sub { font-size: 13px; font-weight: 500; color: var(--muted); }
.iv-pos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.iv-pos-card {
  position: relative; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 18px 18px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
  color: inherit; font: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.iv-pos-card:hover { transform: translateY(-2px); border-color: var(--brand-line); box-shadow: 0 16px 34px -20px var(--brand-glow); }
.iv-pos-card.is-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 16px 34px -20px var(--brand-glow); }
.iv-pos-card.is-on::after {
  content: '已选'; position: absolute; top: 12px; right: 12px;
  font-size: 11px; letter-spacing: .06em; color: var(--brand);
}
.iv-pos-ico { font-size: 30px; line-height: 1; }
.iv-pos-name { font-size: 16px; font-weight: 700; }
.iv-pos-desc { font-size: 12px; line-height: 1.6; color: var(--muted); }

.iv-pos-row { display: flex; gap: 12px; flex-wrap: wrap; }
.iv-seg {
  cursor: pointer; text-align: left; color: inherit; font: inherit;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 150px; flex: 1 1 150px;
  padding: 13px 16px; border-radius: 14px;
  background: var(--bg); border: 1px solid var(--line);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.iv-seg:hover { border-color: var(--brand-line); transform: translateY(-1px); }
.iv-seg.is-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 12px 28px -18px var(--brand-glow); }
.iv-seg b { font-size: 15px; font-weight: 700; }
.iv-seg small { font-size: 12px; color: var(--muted); }
.iv-seg-ico { font-size: 22px; line-height: 1; margin-bottom: 2px; }

/* ---- 20261028a 面试：简历表单 + 模拟公司 ---- */
.iv-resume { border: 1px dashed var(--line-strong); border-radius: 14px; padding: 16px 18px 12px; background: var(--bg-soft); }
.iv-resume-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 14px; }
.iv-resume-item { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.iv-resume-item.iv-resume-wide { grid-column: 1 / -1; }
.iv-resume-item input, .iv-resume-item textarea {
  font: inherit; color: var(--text); width: 100%;
  padding: 9px 12px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--line);
  resize: vertical; transition: border-color .15s ease;
}
.iv-resume-item input:focus, .iv-resume-item textarea:focus { outline: none; border-color: var(--brand); }
.iv-resume-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.iv-resume-foot span { font-size: 12px; color: var(--muted); }
.iv-co { min-width: 120px; flex: 1 1 120px; }

@media (max-width: 640px) {
  .iv-resume { padding: 12px; }
  .iv-resume-grid { grid-template-columns: 1fr; }
}

.iv-pos-actions { margin-top: 26px; padding-top: 20px; border-top: 1px dashed var(--line-strong); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.iv-pos-actions .btn.iv-primary { padding: 14px 30px; font-size: 16px; font-weight: 800; }
.iv-pos-actions .btn.iv-primary:disabled { opacity: 1; cursor: not-allowed; box-shadow: none; background: var(--bg-soft); color: var(--muted); border: 1px solid var(--line); }
.iv-pos-hint { font-size: 13px; color: var(--muted); }
.iv-pos-hint b { color: var(--brand); font-weight: 600; }

@media (max-width: 760px) {
  .iv-pos-grid { grid-template-columns: repeat(2, 1fr); }
  .iv-pos-head { font-size: 16px; margin: 18px 0 10px; }
  .iv-seg { min-width: 130px; flex-basis: 130px; }
}
@media (max-width: 460px) {
  .iv-pos-grid { grid-template-columns: 1fr; }
  .iv-pos-row { gap: 10px; }
  .iv-seg { flex-basis: 100%; }
}

/* ---- 20261023e 群面：提问人徽章 + 复盘标注 ---- */
.iv-iv-tag {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: #5b3df5; background: rgba(91, 61, 245, .09);
  border: 1px solid rgba(91, 61, 245, .28); border-radius: 999px;
  padding: 3px 12px; white-space: nowrap;
}
.iv-sum-iv {
  flex: none; font-size: 11px; font-weight: 600; color: #5b3df5;
  background: rgba(91, 61, 245, .09); border: 1px solid rgba(91, 61, 245, .24);
  border-radius: 999px; padding: 1px 9px; white-space: nowrap;
}
@media (max-width: 460px) {
  .iv-iv-tag, .iv-sum-iv { font-size: 11px; padding: 2px 8px; }
}

/* ====== 20261024b 面试模块优化：环境横幅 / 暂停计时 / 字幕字号 / 复盘增强 / 成长曲线 ====== */
/* 环境受限引导横幅（iframe / 微信 / 非 HTTPS） */
.iv-env-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 14px 18px;
  border: 1px solid rgba(217, 119, 6, .3);
  background: rgba(217, 119, 6, .08); border-radius: 14px;
}
.iv-env-banner[hidden] { display: none; }
.iv-env-ico { font-size: 20px; }
.iv-env-txt { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.iv-env-txt b { font-size: 14.5px; font-weight: 700; color: var(--warn); }
.iv-env-txt span { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.iv-env-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.iv-env-acts .btn { flex: none; }

/* 暂停思考计时（答题栏小钮） */
#ivPauseBtn {
  cursor: pointer; font-size: 12.5px; color: var(--muted);
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; transition: color .15s, border-color .15s;
}
#ivPauseBtn:hover { color: var(--brand); border-color: var(--brand-line); }
#ivPauseBtn.is-paused { color: var(--brand); border-color: var(--brand-line); }

/* 暂停思考计时（会议栏小圆钮） */
.iv-pause-btn {
  cursor: pointer; font: inherit;
  width: 34px; height: 30px; border-radius: 10px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .1);
  color: #e8ebf0; font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.iv-pause-btn:hover { background: rgba(255, 255, 255, .16); }
.iv-pause-btn.is-paused { background: rgba(255, 138, 43, .22); border-color: rgba(255, 187, 120, .5); color: #ffd9a8; }
.iv-timer-paused { opacity: .6; }

/* 字幕字号三档：作用于 .iv-call 容器，联动面试官字幕 + 实时转写文本 */
.iv-sub-lg .iv-iv-subtitle { font-size: 20px; line-height: 1.9; }
.iv-sub-lg .iv-asr-text { font-size: 17px; }
.iv-sub-xl .iv-iv-subtitle { font-size: 24px; line-height: 2; font-weight: 700; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .75); }
.iv-sub-xl .iv-asr-text { font-size: 19px; }

/* 复盘：雷达图 + 维度并排 */
.iv-rep-radar-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 16px 0 4px; }
.iv-rep-radar { flex: none; }
.iv-rep-radar-wrap .iv-rep-dims { flex: 1; min-width: 220px; }
/* 优先提升 / 弱项标签 */
.iv-rep-prio { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.iv-rep-prio li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--bg-soft); border: 1px solid var(--line); font-size: 13px;
}
.iv-rep-prio .cat { font-size: 11.5px; color: var(--muted); }
.iv-rep-prio-q { flex: 1; min-width: 0; font-weight: 600; }
.iv-prio-score { flex: none; font-family: var(--font-num); font-weight: 700; color: var(--warn); }
.iv-rep-weak { margin: 12px 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.iv-rep-privacy { margin: 14px 0 0; font-size: 12px; color: var(--muted); line-height: 1.7; }

/* 转化钩子 CTA（P3） */
.iv-rep-cta {
  margin: 16px 0 4px; padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,106,0,.10), rgba(255,106,0,.04));
  border: 1px solid rgba(255,106,0,.18);
}
.iv-rep-cta.lv-mid { background: linear-gradient(135deg, rgba(255,170,60,.10), rgba(255,170,60,.04)); border-color: rgba(255,170,60,.20); }
.iv-rep-cta.lv-low { background: linear-gradient(135deg, rgba(90,140,255,.10), rgba(90,140,255,.04)); border-color: rgba(90,140,255,.20); }
.iv-rep-cta-tt { font-weight: 700; font-size: 15px; color: var(--ink); }
.iv-rep-cta-sub { margin: 6px 0 12px; font-size: 13px; color: var(--muted); line-height: 1.7; }
.iv-rep-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.iv-rep-cta-btns .btn { padding: 9px 16px; font-size: 13px; border-radius: 9px; }
.iv-rep-cta-btns .btn-ghost { background: #fff; color: var(--orange); border: 1px solid rgba(255,106,0,.4); }

/* 能力看板（P3 本地聚合） */
.iv-dash { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 14px; }
.iv-dash[hidden] { display: none; }
.iv-dash-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.iv-dash-card .iv-rep-h5 { margin: 0 0 10px; padding: 0; }
.iv-dash-ivs { display: flex; flex-direction: column; gap: 9px; }
.iv-dash-iv { display: grid; grid-template-columns: 46px 1fr 30px; align-items: center; gap: 8px; font-size: 13px; }
.iv-dash-iv .k { color: var(--ink); font-weight: 600; }
.iv-dash-iv .bar { height: 8px; background: rgba(0,0,0,.05); border-radius: 6px; overflow: hidden; }
.iv-dash-iv .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), #ffb070); border-radius: 6px; }
.iv-dash-iv .v { text-align: right; color: var(--muted); }
.iv-dash-weak { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.iv-dash-weak li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.iv-dash-weak-avg { color: #e2562b; font-weight: 600; }
.iv-dash-weak-tip { color: var(--muted); font-size: 12px; margin-left: auto; }
.iv-dash-ok { margin: 0; color: #1f9d55; font-size: 13px; }
@media (max-width: 640px) { .iv-dash { grid-template-columns: 1fr; } }

/* 能力成长曲线 */
.iv-hist-chart-wrap { margin: 6px 0 14px; }
.iv-hist-chart { width: 100%; max-width: 520px; display: block; }
.iv-hist-chart[hidden] { display: none; }
.iv-hist-chart-note { font-size: 12.5px; color: var(--muted); line-height: 1.7; }

@media (max-width: 620px) {
  .iv-env-banner { padding: 12px 14px; gap: 10px; }
  .iv-rep-radar-wrap { gap: 12px; }
}

/* ==========================================================================
   AI 子工具深度优化组件（20261024d）
   1) .ai-cmp      前后对比滑块（matting 原图/结果、image 优化 A/B）
   2) .ai-upsell   会员软引导条 + 弹层
   3) .mt-cmp-tabs 对比模式切换（滑动 / 并排）
   ========================================================================== */

/* ---------- 1) 前后对比滑块 ----------
   结构：<div class="ai-cmp">
           <img class="ai-cmp-base">                    入流基准图（撑高度）
           <div class="ai-cmp-layer ai-cmp-after"><img></div>  覆盖层 clip-path 裁剪
           <i class="ai-cmp-bar"></i><button class="ai-cmp-grip">
           <span class="ai-cmp-tag is-a"> / <span class="ai-cmp-tag is-b">
   --x 由 JS 写入 0–100%；指针拖拽 + 键盘方向键均可调 */
.ai-cmp {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel, #14161c);
  user-select: none;
  touch-action: none;
  line-height: 0;
}
.ai-cmp img { display: block; width: 100%; height: auto; -webkit-user-drag: none; }
.ai-cmp .ai-cmp-base { max-height: 460px; object-fit: contain; width: 100%; }
.ai-cmp-layer {
  position: absolute;
  inset: 0;
  line-height: 0;
}
.ai-cmp-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ai-cmp-after { clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); }
.ai-cmp-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x, 50%);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 0 14px rgba(255, 255, 255, .35);
  pointer-events: none;
}
.ai-cmp-grip {
  position: absolute;
  top: 50%;
  left: var(--x, 50%);
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(20, 22, 28, .72);
  color: #fff;
  cursor: ew-resize;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  transition: background .15s ease;
}
.ai-cmp-grip:hover, .ai-cmp-grip:focus-visible { background: rgba(255, 138, 43, .88); outline: none; }
.ai-cmp-tag {
  position: absolute;
  top: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(12, 13, 18, .66);
  color: #fff;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.ai-cmp-tag.is-a { left: 10px; }
.ai-cmp-tag.is-b { right: 10px; }
.ai-cmp-hint {
  font-size: 12px;
  color: var(--muted-2);
  margin-top: 8px;
  line-height: 1.6;
}
/* 对比滑块外层区块 */
.ai-cmp-wrap { margin-bottom: 26px; }
.ai-cmp-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- 2) 会员软引导条（不锁功能，仅引导） ---------- */
.ai-upsell {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 138, 43, .45);
  background: linear-gradient(120deg, rgba(255, 138, 43, .10), rgba(255, 217, 168, .05));
}
.ai-upsell-ico {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 17px;
  background: linear-gradient(135deg, #ff8a2b, #ffb56b);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 138, 43, .35);
}
.ai-upsell-body { min-width: 0; flex: 1; display: grid; gap: 2px; }
.ai-upsell-body b { font-size: 13.5px; letter-spacing: .02em; }
.ai-upsell-body span { font-size: 12px; color: var(--muted-2); line-height: 1.55; }
.ai-upsell-btn {
  flex: none;
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #ff8a2b, #ff6a00);
  box-shadow: 0 3px 10px rgba(255, 106, 0, .3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ai-upsell-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(255, 106, 0, .4); }
/* 会员弹层内容 */
.ai-upsell-modal { display: grid; gap: 12px; }
.ai-upsell-modal p { font-size: 13px; color: var(--muted-2); line-height: 1.7; margin: 0; }
.ai-upsell-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ai-upsell-item {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.55;
}
.ai-upsell-item i { font-style: normal; flex: none; }
.ai-upsell-note { font-size: 11.5px; color: var(--muted-2); }

/* ---------- 3) 对比模式切换（滑动 / 并排） ---------- */
.mt-cmp-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel, #14161c); }
.mt-cmp-tab {
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-2);
}
.mt-cmp-tab.is-on { background: var(--accent, #ff8a2b); color: #fff; }
.mt-cmp-stage[hidden] { display: none; }
.mt-cmp-stage.is-slider .mt-compare { display: none; }
.mt-cmp-stage.is-side .ai-cmp-wrap { display: none; }

/* ---------- 4) motion 3D 引擎懒加载态 ---------- */
.mx-stage.is-loading .mx-holder { opacity: .35; }
.mx-stage .mx-loadtip {
  position: absolute;
  inset: auto 0 46%;
  text-align: center;
  font-size: 12px;
  color: var(--muted-2);
  letter-spacing: .06em;
}
.mx-stage .mx-loadtip[hidden] { display: none; }

@media (max-width: 620px) {
  .ai-upsell { flex-wrap: wrap; }
  .ai-upsell-btn { width: 100%; }
  .ai-upsell-grid { grid-template-columns: 1fr; }
  .ai-cmp .ai-cmp-base { max-height: 320px; }
}

/* ==========================================================================
   资源下载详情页（download-detail.html，20261024f）
   ========================================================================== */
.dd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 30px;
  align-items: start;
}
.dd-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 28px 22px;
}
.dd-loading, .dd-missing { text-align: center; padding: 70px 0; color: var(--muted-2); font-size: 14px; }
.dd-missing p { margin-bottom: 16px; }
.dd-gallery { margin-bottom: 20px; }
.dd-main {
  border-radius: 14px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--panel-2, #101218);
  line-height: 0;
}
.dd-main img { display: block; width: 100%; max-height: 460px; object-fit: contain; }
.dd-thumbs { display: flex; gap: 9px; margin-top: 10px; flex-wrap: wrap; }
.dd-thumbs[hidden] { display: none; }
.dd-thumb {
  width: 86px; height: 60px;
  padding: 0; border: 2px solid transparent; border-radius: 9px;
  overflow: hidden; cursor: pointer; background: var(--panel-2, #101218);
  line-height: 0; transition: border-color .15s ease;
}
.dd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dd-thumb.is-on, .dd-thumb:hover { border-color: var(--accent, #ff8a2b); }
.dd-title { font-size: 26px; font-weight: 750; letter-spacing: .01em; margin: 4px 0 10px; }
.dd-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12.5px; color: var(--muted-2); align-items: center; }
.dd-acts { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 6px; }
.dd-need {
  margin-top: 12px;
  font-size: 12.5px; line-height: 1.7;
  padding: 10px 13px; border-radius: 11px;
  border: 1px dashed rgba(255, 138, 43, .45);
  background: linear-gradient(120deg, rgba(255, 138, 43, .10), rgba(255, 217, 168, .05));
}
.dd-need[hidden] { display: none; }
.dd-desc { margin-top: 18px; font-size: 14px; line-height: 1.95; color: var(--ink-2); }
.dd-desc p { margin: 0 0 10px; }
.dd-backrow { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.dd-back { font-size: 13px; color: var(--muted-2); text-decoration: none; }
.dd-back:hover { color: var(--accent, #ff8a2b); }
.dd-side .ai-records-head h2 { font-size: 15px; }

/* ---- 详情页 P2：Tab / 更新日志 / lightbox / 吸顶侧栏 ---- */
.dd-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.dd-pane { padding-top: 16px; }
.dd-pane[hidden] { display: none; }

.dd-log-list { margin: 0; padding-left: 18px; }
.dd-log-list li { font-size: 13.5px; line-height: 1.9; color: var(--ink-2); margin-bottom: 6px; }
.dd-log-cur { margin-top: 12px; font-size: 12.5px; color: var(--muted-2); }

.dd-feedback {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}

.dd-side-inner { position: sticky; top: 88px; }

.dd-lightbox {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(8, 10, 14, .88);
  display: flex; align-items: center; justify-content: center;
}
.dd-lightbox[hidden] { display: none; }
.dd-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 10px; }
.dd-lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .12);
  color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
.dd-lb-btn:hover { background: rgba(255, 255, 255, .22); }
.dd-lb-prev { left: 18px; }
.dd-lb-next { right: 18px; }
.dd-lb-close { top: 22px; right: 22px; transform: none; font-size: 18px; }

@media (max-width: 900px) {
  .dd-layout { grid-template-columns: minmax(0, 1fr); }
  .dd-side-inner { position: static; }
}
@media (max-width: 640px) {
  .dd-lb-prev { left: 8px; } .dd-lb-next { right: 8px; }
  .dd-lb-btn { width: 38px; height: 38px; font-size: 18px; }
}
.dd-info[hidden] { display: none; }
.dd-info-list { margin: 0; display: grid; gap: 0; }
.dd-irow {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 2px; border-bottom: 1px dashed var(--line);
  font-size: 13px;
}
.dd-irow:last-child { border-bottom: none; }
.dd-irow dt { color: var(--muted-2); flex: none; }
.dd-irow dd { margin: 0; text-align: right; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.dd-rel { display: grid; gap: 10px; }
.dd-rel-empty { font-size: 12.5px; color: var(--muted-2); }
.dd-rel-card {
  display: flex; gap: 11px; align-items: center;
  padding: 9px; border-radius: 12px; border: 1px solid var(--line);
  text-decoration: none; transition: border-color .15s ease, transform .15s ease;
  background: var(--panel);
}
.dd-rel-card:hover { border-color: var(--accent, #ff8a2b); transform: translateY(-1px); }
.dd-rel-thumb { flex: none; width: 84px; height: 54px; border-radius: 8px; overflow: hidden; background: var(--panel-2, #101218); line-height: 0; }
.dd-rel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dd-rel-body { min-width: 0; }
.dd-rel-body b { display: block; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-rel-body span { font-size: 11.5px; color: var(--muted-2); }
@media (max-width: 900px) {
  .dd-layout { grid-template-columns: 1fr; }
  .dd-card { padding: 20px 18px 18px; }
  .dd-main img { max-height: 320px; }
}

/* ---------- 20261024g 特效贴图：参数历史 + 随机探索 + 拖入预设 ---------- */
.tx-hist-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tx-hist-actions .tx-reset { flex: 1; min-width: 0; }
.tx-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 240px; overflow: auto; }
.tx-hist-item {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--bg-2, #f6f3ee); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; cursor: pointer; font-size: 13px; color: inherit; text-align: left;
  transition: border-color .15s, background .15s;
}
.tx-hist-item:hover { border-color: var(--brand); background: var(--brand-soft); }
.tx-hist-item b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-hist-item span { color: var(--muted); font-size: 12px; flex: none; font-variant-numeric: tabular-nums; }
.tx-hist-empty { font-size: 12px; color: var(--muted); padding: 4px 2px; }
/* 历史项：回滚按钮 + 对比按钮同行 */
.tx-hist li:not(.tx-hist-empty) { display: flex; align-items: center; gap: 6px; }
.tx-hist-item { flex: 1; min-width: 0; }
.tx-hist-cmp-btn {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  color: var(--muted); font-size: 13px; cursor: pointer; line-height: 1; padding: 0;
}
.tx-hist-cmp-btn:hover { border-color: var(--brand); color: var(--brand); }
.tx-hist-cmp-btn.is-cmp-a, .tx-hist-cmp-btn.is-cmp-b { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
/* 一键对比面板 */
.tx-hist-cmp {
  margin: 8px 0 4px; padding: 10px; border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px; background: rgba(255, 255, 255, .03); font-size: 12px;
}
.tx-hist-cmp[hidden] { display: none; }
.tx-cmp-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; color: var(--muted); }
.tx-cmp-head b { color: var(--brand); }
.tx-cmp-head span { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 38%; }
.tx-cmp-close { margin-left: auto; background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 6px; }
.tx-cmp-close:hover { color: #fff; }
.tx-cmp-row { display: grid; grid-template-columns: 1fr auto 16px auto; align-items: center; gap: 6px; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.tx-cmp-k { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-cmp-v { font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 5px; }
.tx-cmp-old { color: var(--muted); background: rgba(255, 255, 255, .05); }
.tx-cmp-new { color: #fff; background: rgba(255, 106, 0, .16); }
.tx-cmp-arrow { color: var(--brand); text-align: center; }
.tx-cmp-same { color: var(--muted); padding: 4px 0; }
/* 导出栏「更多」菜单 */
.tx-more { position: relative; }
.tx-more-menu {
  position: absolute; right: 0; bottom: calc(100% + 8px);
  background: #23272e; border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px;
  min-width: 168px; z-index: 40; box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.tx-more-menu[hidden] { display: none; }
.tx-more-item { width: 100%; justify-content: flex-start; }
.tx-stage { position: relative; }
.tx-stage.tx-drag { outline: 2px dashed var(--brand); outline-offset: -12px; }
.tx-stage.tx-drag::after {
  content: '松开导入预设 JSON'; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; background: rgba(255, 138, 43, .14);
  color: var(--brand); font-weight: 700; font-size: 15px; pointer-events: none; z-index: 5;
}

/* ---------- 20261024i 美术论坛：点赞/收藏/分享 + 二级回复 ---------- */
.fp-actions { display: flex; gap: 10px; margin: 18px 0 6px; flex-wrap: wrap; }
.fp-act {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-2, #f6f3ee); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 16px; cursor: pointer;
  color: inherit; font-size: 14px; line-height: 1; transition: border-color .15s, background .15s, color .15s;
}
.fp-act:hover { border-color: var(--brand); }
.fp-act .fp-act-ico { font-size: 16px; line-height: 1; }
.fp-act .fp-act-cnt { font-variant-numeric: tabular-nums; font-weight: 600; }
.fp-act.is-active { border-color: var(--brand); background: var(--brand-soft, #fff1e0); color: var(--brand); }
.fp-act-share { margin-left: auto; }
/* 举报 / 审核（20261028a） */
.fp-act-report { color: var(--muted); }
.fp-act-report:hover { border-color: var(--err); color: var(--err); }
.fp-act-report.is-on { border-color: var(--err); color: var(--err); background: color-mix(in srgb, var(--err) 8%, transparent); }
.fp-act-hide { color: var(--muted); }
.fp-act-hide:hover { border-color: var(--brand); color: var(--brand); }
.fm-card-hidden {
  position: absolute; left: 10px; top: 62px; z-index: 2;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  color: #fff; background: linear-gradient(135deg, #6b7280, #374151);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.fp-reply-hint {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 13px; color: var(--brand); background: var(--brand-soft, #fff1e0);
  border: 1px solid var(--brand); border-radius: 8px; padding: 6px 10px;
}
.fp-reply-hint b { color: var(--brand); }
.fp-reply-cancel {
  margin-left: auto; border: none; background: transparent; color: var(--brand);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px;
}
.fp-cmt-replies { margin: 10px 0 0 26px; border-left: 2px solid var(--line); padding-left: 14px; display: grid; gap: 12px; }
.fp-cmt-reply-item .fp-cmt-avatar-sm { width: 26px; height: 26px; font-size: 12px; }
.fp-cmt-reply, .fp-cmt-del {
  border: none; background: transparent; cursor: pointer; font-size: 12px;
  color: var(--muted); padding: 2px 6px; border-radius: 6px;
}
.fp-cmt-reply:hover, .fp-cmt-del:hover { background: var(--bg-2, #f6f3ee); color: var(--brand); }

/* ============ 论坛⑥进阶（20261028a） ============ */

/* 全局通知铃铛 */
.notif-bell-wrap { position: relative; display: inline-flex; }
.notif-bell {
  position: relative; width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-1, #fff); color: var(--ink);
  font-size: 17px; line-height: 1; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center;
  transition: border-color .2s, background .2s, color .2s;
}
.notif-bell:hover { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); }
.notif-dot {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
  background: #ff4d4f; color: #fff; border-radius: 9px; font-size: 11px; font-weight: 600;
  line-height: 16px; text-align: center; border: 2px solid var(--bg-1, #fff); box-sizing: content-box;
}
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-width: 86vw;
  background: var(--bg-1, #fff); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.16); overflow: hidden; z-index: 120;
}
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 600;
}
.notif-markall { border: none; background: transparent; color: var(--brand); font-size: 12px; cursor: pointer; padding: 2px 4px; }
.notif-markall:hover { text-decoration: underline; }
.notif-list { max-height: 360px; overflow-y: auto; }
.notif-item {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px;
  text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); position: relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--brand-soft); }
.notif-ic {
  flex: none; width: 26px; height: 26px; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
  background: var(--brand-soft); color: var(--brand);
}
.notif-ic-reply { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; padding-right: 14px; }
.notif-line { font-size: 13px; line-height: 1.45; }
.notif-title { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-time { font-size: 11px; color: var(--muted); }
.notif-item.is-unread .notif-line { font-weight: 600; }
.notif-new { position: absolute; top: 12px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: #ff4d4f; }
.notif-empty { padding: 28px 14px; text-align: center; color: var(--muted); font-size: 13px; }

/* 草稿箱 */
.fm-draft-list { display: grid; gap: 10px; }
.fm-draft-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-1, #fff);
}
.fm-draft-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fm-draft-title { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.fm-draft-time { font-size: 12px; color: var(--muted); }
.fm-draft-ops { display: flex; gap: 6px; flex: none; }
.fm-mini {
  border: 1px solid var(--line); background: var(--bg-1, #fff); color: var(--ink);
  font-size: 12px; padding: 5px 10px; border-radius: 8px; cursor: pointer;
}
.fm-mini:hover { border-color: var(--brand-line); color: var(--brand); background: var(--brand-soft); }
.fm-mini-danger:hover { border-color: var(--err); color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }

/* 评论楼层 / 锚点高亮 / 引用 */
.fp-cmt-floor {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 600;
  color: var(--brand); background: var(--brand-soft); padding: 1px 8px; border-radius: 999px; margin-right: 6px;
}
.fp-cmt-quote {
  border: none; background: transparent; cursor: pointer; font-size: 12px;
  color: var(--muted); padding: 2px 6px; border-radius: 6px;
}
.fp-cmt-quote:hover { background: var(--bg-2, #f6f3ee); color: var(--brand); }
.fp-cmt-anchor { animation: fpAnchor 2.2s ease; }
@keyframes fpAnchor {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 60%, transparent); background: var(--brand-soft); }
  20%  { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 50%, transparent); background: var(--brand-soft); }
  100% { box-shadow: 0 0 0 0 transparent; background: transparent; }
}

@media (max-width: 640px) {
  .notif-panel { width: 300px; }
  .fm-draft-item { flex-direction: column; align-items: stretch; }
  .fm-draft-ops { justify-content: flex-end; }
}

/* ============ 贴图工坊（20261028a） ============ */
#tfCanvas { width: 100%; height: auto; display: block; border-radius: 12px; background: transparent; }
.tx-cpu-badge { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.6); color: #fff;
  font-size: 11px; padding: 3px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }

/* 内置样例 */
.tf-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-preset-btn { border: 1px solid var(--line); background: var(--bg-1, #fff); color: var(--ink);
  font-size: 12px; padding: 4px 9px; border-radius: 8px; cursor: pointer; }
.tf-preset-btn:hover { border-color: var(--brand-line); color: var(--brand); background: var(--brand-soft); }

/* 图层栈 */
.tf-layer-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.tf-layer-actions .ai-input { flex: 1; min-width: 120px; }
.tf-layer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tf-layer-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg-1, #fff); cursor: pointer; transition: border-color .15s, background .15s; }
.tf-layer-item.is-active { border-color: var(--brand); background: var(--brand-soft); }
.tf-layer-item.is-hidden { opacity: .55; }
.tf-layer-grip { color: var(--muted); font-size: 12px; }
.tf-layer-name { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-layer-mode { font-size: 11px; color: var(--muted); flex: none; }
.tf-layer-ops { display: flex; gap: 2px; flex: none; }
.tf-layer-ops button { border: none; background: transparent; cursor: pointer; font-size: 12px; width: 24px; height: 24px;
  border-radius: 6px; color: var(--muted); }
.tf-layer-ops button:hover { background: var(--bg-2, #f6f3ee); color: var(--brand); }

/* 色阶 / 调色板 */
.tf-palettes { margin: 6px 0 10px; }
.tf-palette-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tf-palette-btn { border: 1px solid var(--line); background: var(--bg-1, #fff); color: var(--ink);
  font-size: 11px; padding: 3px 7px; border-radius: 7px; cursor: pointer; }
.tf-palette-btn:hover { border-color: var(--brand-line); color: var(--brand); }
.tf-stops { display: grid; gap: 6px; margin-bottom: 8px; }
.tf-stop { display: flex; align-items: center; gap: 8px; }
.tf-stop input[type="range"] { flex: 1; }
.tf-stop input[type="color"] { width: 34px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.tf-stop button { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; width: 24px; height: 24px; border-radius: 6px; }
.tf-stop button:disabled { opacity: .3; cursor: not-allowed; }
.tf-stop button:hover:not(:disabled) { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); }

/* ---------- 贴图工坊：类型浏览器 / 视图控制 / 曲线编辑器 ---------- */
.tf-tb { display: grid; gap: 8px; margin-bottom: 10px; }
.tf-tb-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tf-chip {
  border: 1px solid var(--line); background: var(--bg-1, #fff); color: var(--ink);
  border-radius: 999px; padding: 4px 11px; font-size: 11.5px; cursor: pointer; line-height: 1.5;
}
.tf-chip:hover { border-color: var(--brand-line); color: var(--brand); background: var(--brand-soft); }
.tf-chip.is-on { border-color: var(--brand); background: var(--brand); color: #fff; font-weight: 600; }
.tf-empty { font-size: 12px; color: var(--muted-2); }

.tx-stage-bar .tf-zoom-btn { height: 30px; padding: 0 10px; font-size: 11.5px; border-radius: 8px; }
.tx-stage-bar .tf-zoom-btn.is-on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.tf-bar-check {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  color: rgba(255, 255, 255, .72); cursor: pointer; user-select: none;
}
.tf-bar-check input { accent-color: var(--brand, #ff6a00); }
.tx-stage-time {
  font-size: 11.5px; color: rgba(255, 255, 255, .55);
  font-variant-numeric: tabular-nums; padding: 0 2px;
}

.tf-curve-wrap { margin: 8px 0 10px; }
.tf-curve-canvas {
  display: block; width: 100%; height: auto; aspect-ratio: 256 / 150;
  border: 1px solid var(--line); border-radius: 10px; background: #12151a;
  touch-action: none; cursor: crosshair;
}
.tf-curve-hint { font-size: 11px; color: var(--muted-2); margin-top: 5px; line-height: 1.6; }
.tf-curve-ops { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

/* 刀光轮廓节点编辑器（对齐参考站插件） */
.tf-slash-curve { margin: 10px 0 4px; padding-top: 10px; border-top: 1px dashed var(--line); }
.tf-slash-curve #tfSlashCurve {
  display: block; width: 100%; height: auto; aspect-ratio: 300 / 180;
  border: 1px solid var(--line); border-radius: 10px; background: #12151a;
  touch-action: none; cursor: crosshair; margin: 6px 0;
}

/* 100% 缩放时允许画布滚动 */
.tx-canvas-wrap { overflow: auto; }
.tx-canvas-wrap.is-zoom { aspect-ratio: auto; }

@media (max-width: 620px) {
  .tx-stage-time { width: 100%; text-align: left; }
  .tf-curve-hint { font-size: 10.5px; }
}


/* ==========================================================================
   贴图工坊 · 深色工具界面（20261028a）
   完全复刻 texture-forge（VFX Mentor）排版：topbar 78 + toolbar 54
   + 四栏 workspace（图库 302 / 参数 322 / 舞台 / 图层 206 + 7px 分隔）+ dock 37
   ========================================================================== */
.txf-body {
  --tx-bg: #080b12; --tx-bg2: #0b111a; --tx-panel: #141c25; --tx-panel2: #1a2636;
  --tx-raise: #243242; --tx-line: #2b3849; --tx-line2: #34465e;
  --tx-tx: #edf0f4; --tx-tx2: #a5afbc; --tx-tx3: #8091a8;
  --tx-ac: #ff6a00; --tx-ac-d: #ff8a2b; --tx-ac-soft: rgba(255, 106, 0, .10);
  --tx-cyan: #88d5e3; --tx-ok: #3fb950; --tx-danger: #e5534b; --tx-r: 8px;
  --tx-font: Inter, "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --tx-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  margin: 0; height: 100vh; height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column;
  background: #2b3849; color: var(--tx-tx);
  font-family: var(--tx-font); font-size: 13px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.txf-body * { box-sizing: border-box; }
.txf-body button, .txf-body input, .txf-body select { font-family: inherit; }

/* ---------- 顶栏 78px ---------- */
.txf-topbar {
  flex: none; height: 78px; display: flex; align-items: center; gap: 28px;
  padding: 0 22px; background: #090d15; border-bottom: 1px solid #131c27;
}
.txf-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--tx-tx); }
.txf-brand-ic {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--tx-ac), #ff9a4d); color: #ffffff; font-size: 15px;
}
.txf-brand-tx { font-size: 15px; letter-spacing: -.01em; }
.txf-brand-tx b { font-weight: 800; }
.txf-brand-tx i { font-style: normal; color: var(--tx-tx3); font-weight: 500; margin-left: 2px; }
.txf-brand-sub {
  font-size: 9px; letter-spacing: .14em; color: var(--tx-tx3); border: 1px solid var(--tx-line2);
  border-radius: 4px; padding: 2px 5px; margin-left: 2px; text-transform: uppercase;
}
.txf-nav { display: flex; align-items: center; gap: 4px; height: 100%; }
.txf-nav a {
  display: inline-flex; align-items: center; height: 100%; padding: 0 13px;
  color: var(--tx-tx2); text-decoration: none; font-size: 13px; font-weight: 500;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.txf-nav a:hover { color: var(--tx-tx); }
.txf-nav a.is-on { color: var(--tx-ac); border-bottom-color: var(--tx-ac); font-weight: 650; }
.txf-topbar-r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.txf-topbtn {
  height: 38px; padding: 0 16px; border-radius: 11px; font-size: 13px; font-weight: 650;
  background: #192637; border: 1px solid #3b4e64; color: var(--tx-tx); cursor: pointer;
  display: inline-flex; align-items: center; text-decoration: none; transition: border-color .15s, background .15s;
}
.txf-topbtn:hover { border-color: var(--tx-ac); }
.txf-topbtn-ac { background: var(--tx-ac); border-color: var(--tx-ac); color: #ffffff; }
.txf-topbtn-ac:hover { background: var(--tx-ac-d); }

/* ---------- 工具条 54px ---------- */
.txf-toolbar {
  flex: none; min-height: 54px; display: flex; align-items: center; gap: 14px;
  padding: 0 16px; background: var(--tx-panel); border-bottom: 1px solid #101822;
}
.txf-tb-l { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.txf-tb-title { font-size: 15px; font-weight: 750; letter-spacing: -.01em; margin-right: 2px; }
.txf-tb-c { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.txf-tb-r { display: flex; align-items: center; gap: 8px; }
.txf-minibtn {
  height: 31px; padding: 0 11px; border-radius: 6px; font-size: 12px; font-weight: 400;
  background: var(--tx-panel2); border: 1px solid var(--tx-line2); color: var(--tx-tx2);
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.txf-minibtn:hover { color: var(--tx-tx); border-color: #45607f; }
.txf-minibtn-ac { color: #ffb27a; border-color: rgba(255, 106, 0, .35); }
.txf-minibtn-ac:hover { background: var(--tx-ac-soft); color: var(--tx-ac); }
.txf-sel { padding-right: 26px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238091a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 12px 12px; }
.txf-icobtn {
  width: 31px; height: 31px; border-radius: 6px; font-size: 15px; line-height: 1;
  background: var(--tx-panel2); border: 1px solid var(--tx-line2); color: var(--tx-tx2);
  cursor: pointer; display: inline-grid; place-items: center; transition: color .15s, border-color .15s;
}
.txf-icobtn:hover { color: var(--tx-ac); border-color: rgba(255, 106, 0, .4); }
.txf-icobtn:disabled { opacity: .35; cursor: default; }
.txf-icobtn:disabled:hover { color: var(--tx-tx2); border-color: var(--tx-line2); }
.txf-btn-ac {
  height: 38px; padding: 0 22px; border-radius: 11px; border: 1px solid var(--tx-ac);
  background: var(--tx-ac); color: #ffffff; font-size: 13px; font-weight: 750; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: background .15s;
}
.txf-btn-ac:hover { background: var(--tx-ac-d); }
/* 分段控件（背景三态 / 视图缩放） */
.txf-seg { display: inline-flex; align-items: center; background: var(--tx-panel2); border: 1px solid var(--tx-line2); border-radius: 6px; overflow: hidden; }
.txf-seg button {
  height: 29px; padding: 0 11px; border: 0; background: transparent; color: var(--tx-tx2);
  font-size: 12px; cursor: pointer; transition: color .15s, background .15s; white-space: nowrap;
}
.txf-seg button + button { border-left: 1px solid var(--tx-line2); }
.txf-seg button:hover { color: var(--tx-tx); }
.txf-seg button.is-on { background: var(--tx-ac-soft); color: var(--tx-ac); font-weight: 600; }
.txf-seg-sm button { height: 26px; padding: 0 10px; font-size: 11.5px; }

/* ---------- 四栏工作区 ---------- */
.txf-workspace { flex: 1 1 auto; display: flex; min-height: 0; background: #2b3849; }
.txf-rail { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--tx-panel); }
.txf-library { flex: 0 0 302px; }
.txf-params  { flex: 0 0 322px; }
/* 图层参数（刀光设置）默认隐藏：点击工具栏「刀光制作」弹出（20261030g 对齐参考站左右结构） */
.txf-params.is-hidden, .txf-resizer[data-resize="params"].is-hidden { display: none; }
.txf-minibtn.txf-docname { color: var(--tx-ac); border-color: rgba(255, 106, 0, .45); font-weight: 600; }
.txf-minibtn.txf-docname.is-on { background: var(--tx-ac-soft); }
.txf-stage   { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--tx-bg2); }
.txf-layers  { flex: 0 0 206px; }
.txf-resizer { flex: 0 0 7px; cursor: col-resize; background: var(--tx-bg2); position: relative; }
.txf-resizer::after {
  content: ""; position: absolute; inset: 0 2px; border-radius: 2px; background: transparent; transition: background .15s;
}
.txf-resizer:hover::after, .txf-resizer.is-drag::after { background: rgba(255, 106, 0, .5); }

/* 面板头 / 体 / 脚 */
.txf-panel-hd {
  flex: none; min-height: 40px; display: flex; align-items: center; gap: 8px;
  padding: 0 10px 0 12px; border-bottom: 1px solid #101822;
}
.txf-panel-title { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.txf-panel-count { font-size: 11.5px; color: var(--tx-tx3); font-variant-numeric: tabular-nums; }
.txf-panel-fold, .txf-panel-act, .txf-panel-help, .txf-lib-reopen {
  border: 0; background: transparent; color: var(--tx-tx3); font-size: 11.5px; cursor: pointer;
  padding: 4px 6px; border-radius: 5px; transition: color .15s, background .15s; white-space: nowrap;
}
.txf-panel-fold:hover, .txf-panel-act:hover, .txf-panel-help:hover, .txf-lib-reopen:hover { color: var(--tx-ac); background: var(--tx-ac-soft); }
.txf-panel-fold { margin-left: auto; }
.txf-panel-help {
  width: 17px; height: 17px; padding: 0; border: 1px solid var(--tx-line2); border-radius: 50%;
  display: inline-grid; place-items: center; font-size: 10px; color: var(--tx-tx3);
}
.txf-panel-help:hover { color: var(--tx-ac); border-color: var(--tx-ac); }
.txf-panel-bd { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 9px; min-height: 0; }
.txf-panel-bd::-webkit-scrollbar { width: 9px; }
.txf-panel-bd::-webkit-scrollbar-thumb { background: #2c3a4c; border-radius: 5px; border: 2px solid var(--tx-panel); }
.txf-panel-bd::-webkit-scrollbar-track { background: transparent; }
.txf-panel-ft {
  flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 9px; border-top: 1px solid #101822;
}
.txf-panel-ft .txf-minibtn { justify-content: center; height: 29px; }
.txf-panel-ft .txf-minibtn:last-child { grid-column: 1 / -1; }
.txf-lib-reopen { display: inline-flex; align-items: center; gap: 5px; margin: 8px auto; }
.txf-library.is-fold .txf-panel-bd { display: none; }

/* ---------- 左栏：类型浏览器 ---------- */
.txf-inp {
  width: 100%; height: 31px; padding: 0 10px; border-radius: 6px; font-size: 12px;
  background: var(--tx-panel2); border: 1px solid var(--tx-line2); color: var(--tx-tx);
  outline: none; transition: border-color .15s;
}
.txf-inp::placeholder { color: var(--tx-tx3); }
.txf-inp:focus { border-color: var(--tx-ac); }
.txf-tb-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 9px; }
.txf-tb-chips .tf-chip {
  height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11.5px;
  background: var(--tx-panel2); border: 1px solid var(--tx-line2); color: var(--tx-tx2); cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.txf-tb-chips .tf-chip:hover { color: var(--tx-tx); }
.txf-tb-chips .tf-chip.is-on { background: var(--tx-ac-soft); border-color: rgba(255, 106, 0, .45); color: var(--tx-ac); font-weight: 600; }
/* 浏览器模式切换：类型（385 生成器）/ 预设（574 中文组合） */
.txf-mode-switch { display: flex; gap: 4px; margin: 0 0 8px; padding: 3px; background: var(--tx-panel2); border: 1px solid var(--tx-line2); border-radius: 8px; }
.txf-mode-switch .tf-mode-btn {
  flex: 1; height: 26px; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  color: var(--tx-tx2); font-size: 12px; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: color .15s, background .15s;
}
.txf-mode-switch .tf-mode-btn:hover { color: var(--tx-tx); }
.txf-mode-switch .tf-mode-btn.is-on { background: var(--tx-ac-soft); color: var(--tx-ac); font-weight: 600; }
.txf-mode-switch .tf-mode-n { font-size: 10.5px; opacity: .7; font-variant-numeric: tabular-nums; }
.txf-thumb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.txf-thumb-grid .tf-empty { grid-column: 1 / -1; font-size: 12px; color: var(--tx-tx3); text-align: center; padding: 24px 0; }
/* 缩略图卡片 88×108（86×86 预览底 + 名称 + 收藏星） */
.txf-thumb {
  position: relative; height: 108px; border-radius: 8px; overflow: hidden; cursor: pointer;
  background: var(--tx-panel2); border: 1px solid var(--tx-line); padding: 0; text-align: left;
  display: flex; flex-direction: column; transition: border-color .15s, transform .15s;
  user-select: none; -webkit-user-select: none; color: var(--tx-tx2); font-family: inherit;
}
.txf-thumb:focus-visible { outline: 2px solid var(--tx-ac); outline-offset: 1px; }
.txf-thumb:hover { border-color: #4a6076; transform: translateY(-1px); }
.txf-thumb.is-on { border-color: var(--tx-ac); }
.txf-thumb .tb-img {
  display: block; width: 100%; height: 86px; background: #0a0d11; border-bottom: 1px solid var(--tx-line);
  object-fit: cover; image-rendering: auto;
}
.txf-thumb .tb-img.is-loading { opacity: .35; }
.txf-thumb .tb-name {
  display: block; padding: 3px 6px 0; font-size: 11px; line-height: 1.35; color: var(--tx-tx2);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;
}
.txf-thumb:hover .tb-name, .txf-thumb.is-on .tb-name { color: var(--tx-tx); }
.txf-thumb .tb-star {
  position: absolute; top: 4px; right: 4px; width: 17px; height: 17px; border-radius: 4px;
  background: rgba(10, 14, 19, .66); border: 0; color: var(--tx-tx3); font-size: 10px; line-height: 1;
  cursor: pointer; display: grid; place-items: center; padding: 0;
}
.txf-thumb .tb-star:hover { color: var(--tx-ac); }
.txf-thumb .tb-star.is-on { color: var(--tx-ac); }
/* 「动」徽章：带 speed 动画参数的类型（对齐源站绿色右上角小标） */
.txf-thumb .tb-anim {
  position: absolute; top: 4px; left: 4px; font-style: normal; font-size: 9px; line-height: 1;
  padding: 2px 3px; border-radius: 3px; color: #0a0d11; background: #7fe07f; font-weight: 600;
}

/* ---------- 快速工作流与画布工具 ---------- */
.txf-quickbar { flex: none; display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 5px 12px; background: #0d141d; border-bottom: 1px solid #101822; color: var(--tx-tx3); }
.txf-quick-label { font-size: 11px; color: var(--tx-tx3); margin-right: 2px; }
.txf-quick { height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--tx-line2); background: var(--tx-panel2); color: var(--tx-tx2); cursor: pointer; font-size: 11.5px; transition: .15s; }
.txf-quick:hover { color: var(--tx-tx); border-color: #607383; }
.txf-quick.is-on { color: #ffffff; background: var(--tx-ac); border-color: var(--tx-ac); font-weight: 700; }
.txf-quick-hint { margin-left: auto; font-size: 10.5px; color: var(--tx-tx3); }
.txf-canvas-tools { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--tx-line2); border-radius: 7px; background: var(--tx-panel2); }
.txf-tool { width: 25px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--tx-tx2); cursor: pointer; font-size: 15px; line-height: 1; }
.txf-tool:hover { color: var(--tx-tx); background: var(--tx-line); }
.txf-tool.is-on { color: #ffffff; background: var(--tx-ac); }
.txf-layer-opacity { grid-column: 2; width: 100%; height: 12px; accent-color: var(--tx-ac); cursor: ew-resize; }
.txf-layer-opacity-out { color: var(--tx-ac); font-family: var(--tx-mono); font-variant-numeric: tabular-nums; }

/* ---------- 中栏：画布舞台 ---------- */
.txf-stage-bar {
  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  min-height: 44px; padding: 6px 12px; border-bottom: 1px solid #131c27;
}
.txf-bar-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tx-tx2); cursor: pointer; user-select: none; }
.txf-bar-check input { accent-color: var(--tx-ac); width: 14px; height: 14px; cursor: pointer; }
.txf-bar-check:hover { color: var(--tx-tx); }
.txf-stage-time { font-size: 12px; color: var(--tx-tx2); font-variant-numeric: tabular-nums; font-family: var(--tx-mono); }
.txf-stage-meta { font-size: 11.5px; color: var(--tx-tx3); font-variant-numeric: tabular-nums; margin-left: auto; }
.txf-stage-ms { color: var(--tx-cyan); }
.txf-canvas-wrap {
  flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 20px; position: relative; overflow: auto;
  /* 透明棋盘格对齐源站 on-transparent：底 #141a21 + 格 #1c242e，16px 四向渐变 */
  /* 默认橙底（站点主题色 #ff6a00 渐变）；透明棋盘格与黑白底由状态类覆盖 */
  background-color: #d95700;
  background-image:
    radial-gradient(120% 120% at 50% 0%, #ff8a2a 0%, #ff6a00 46%, #e05a00 100%);
}
.txf-canvas-wrap.bg-theme {
  background-color: #d95700;
  background-image:
    radial-gradient(120% 120% at 50% 0%, #ff8a2a 0%, #ff6a00 46%, #e05a00 100%);
}
.txf-canvas-wrap.bg-trans {
  background-color: #141a21;
  background-image:
    linear-gradient(45deg, #1c242e 25%, transparent 25%),
    linear-gradient(-45deg, #1c242e 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1c242e 75%),
    linear-gradient(-45deg, transparent 75%, #1c242e 75%);
  background-size: 16px 16px, 16px 16px, 16px 16px, 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.txf-canvas-wrap.bg-black { background-color: #000; background-image: none; }
.txf-canvas-wrap.bg-white { background-color: #fff; background-image: none; }
.txf-canvas-wrap canvas { display: block; max-width: 100%; max-height: 100%; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.txf-canvas-wrap.is-zoom { align-items: flex-start; justify-content: flex-start; }

/* ---------- 平铺预览弹窗（四方连续检查） ---------- */
.txf-modal {
  position: fixed; inset: 0; z-index: 260; display: flex; align-items: center; justify-content: center;
  background: rgba(6, 8, 12, .78); backdrop-filter: blur(6px); padding: 24px;
}
.txf-modal-box {
  width: min(860px, 96vw); max-height: 92vh; overflow: auto;
  background: var(--panel, #14181f); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.txf-modal-hd {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-bottom: 1px solid var(--line); font-weight: 700; color: var(--ink);
}
.txf-modal-hd > span:first-child { margin-right: auto; }
.txf-modal-close {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
  background: transparent; color: var(--ink-2); font-size: 17px; cursor: pointer; line-height: 1;
}
.txf-modal-close:hover { color: var(--brand); border-color: var(--brand-line); }
.txf-modal-bd { padding: 18px; display: flex; justify-content: center; background: #0d1015; }
.txf-modal-bd canvas { width: 100%; max-width: 640px; height: auto; border-radius: 8px; }
.txf-modal-ft { padding: 10px 18px 14px; border-top: 1px solid var(--line); }

/* ---------- 右栏：图层卡 ---------- */
.txf-layer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.txf-layer-card {
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; gap: 2px 8px;
  padding: 7px; border-radius: 8px; cursor: pointer; position: relative;
  background: var(--tx-panel2); border: 1px solid var(--tx-line); transition: border-color .15s;
}
.txf-layer-card:hover { border-color: #4a6076; }
.txf-layer-card.is-active { border-color: var(--tx-ac); }
.txf-layer-card.is-hidden { opacity: .5; }
.txf-layer-thumb {
  grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 6px; background: #0a0d11;
  border: 1px solid var(--tx-line); object-fit: cover;
}
.txf-layer-name { font-size: 12px; font-weight: 600; color: var(--tx-tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.txf-layer-mode { font-size: 10.5px; color: var(--tx-tx3); }
.txf-layer-card .txf-layer-ops { position: absolute; top: 5px; right: 5px; display: flex; gap: 3px; }
.txf-layer-ops button {
  width: 19px; height: 19px; border-radius: 4px; border: 0; padding: 0; cursor: pointer;
  background: rgba(10, 14, 19, .7); color: var(--tx-tx3); font-size: 10px; line-height: 1; display: grid; place-items: center;
}
.txf-layer-ops button:hover { color: var(--tx-ac); }
.txf-layer-ops button.is-danger:hover { color: var(--tx-danger); }

/* ---------- 底部 dock 37px ---------- */
.txf-dock {
  flex: none; min-height: 37px; display: flex; align-items: center; gap: 14px;
  padding: 0 12px; background: var(--tx-panel); border-top: 1px solid #101822;
}
.txf-dock-hd { display: flex; align-items: center; gap: 4px; }
.txf-dock-btn {
  border: 0; background: transparent; color: var(--tx-tx3); font-size: 11.5px; cursor: pointer;
  padding: 4px 8px; border-radius: 5px; transition: color .15s, background .15s; white-space: nowrap;
}
.txf-dock-btn:hover { color: var(--tx-ac); background: var(--tx-ac-soft); }
.txf-dock-body { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.txf-dock-label { font-size: 11px; color: var(--tx-tx3); }
.txf-dock-res { display: flex; align-items: center; gap: 3px; background: var(--tx-panel2); border: 1px solid var(--tx-line2); border-radius: 6px; padding: 2px; }
.txf-dock-res button {
  border: 0; background: transparent; color: var(--tx-tx2); font-size: 11px; cursor: pointer;
  padding: 2px 8px; border-radius: 4px; font-variant-numeric: tabular-nums; transition: color .15s, background .15s;
}
.txf-dock-res button:hover { color: var(--tx-tx); }
.txf-dock-res button.is-on { background: var(--tx-ac-soft); color: var(--tx-ac); font-weight: 650; }
.txf-dock-collapse { margin-left: 4px; }

/* ==========================================================================
   参数编辑器深色化（buildEditor 产出的结构在 .txf-body 下复盖既有浅色样式）
   ========================================================================== */
.txf-body .tf-group { border: 1px solid var(--tx-line); border-radius: var(--tx-r); background: var(--tx-panel2); margin-bottom: 8px; overflow: hidden; }
.txf-body .tf-group > summary {
  display: flex; align-items: center; gap: 7px; padding: 9px 11px; cursor: pointer; list-style: none;
  font-size: 12.5px; font-weight: 650; color: var(--tx-tx); user-select: none; transition: color .15s;
}
.txf-body .tf-group > summary::-webkit-details-marker { display: none; }
.txf-body .tf-group > summary::before {
  content: "▸"; font-size: 9px; color: var(--tx-tx3); transition: transform .18s, color .15s; flex: none;
}
.txf-body .tf-group[open] > summary::before { transform: rotate(90deg); color: var(--tx-ac); }
.txf-body .tf-group > summary:hover { color: var(--tx-ac); }
.txf-body .tf-group-sub { font-size: 11px; font-weight: 400; color: var(--tx-tx3); margin-left: auto; }
.txf-body .tf-group-body { padding: 2px 11px 11px; }
.txf-body .ai-field { margin: 0 0 9px; }
.txf-body .ai-label { display: block; font-size: 11.5px; color: var(--tx-tx2); margin-bottom: 4px; }
.txf-body .ai-label-tip { font-style: normal; color: var(--tx-tx3); font-size: 10.5px; margin-left: 4px; }
.txf-body .ai-input, .txf-body input[type="text"].ai-input {
  width: 100%; height: 31px; padding: 0 10px; border-radius: 6px; font-size: 12px;
  background: var(--tx-panel); border: 1px solid var(--tx-line2); color: var(--tx-tx); outline: none;
}
.txf-body select.ai-input {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238091a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px;
}
.txf-body .ai-input:focus { border-color: var(--tx-ac); }
.txf-body .ai-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--tx-tx2); cursor: pointer; margin: 2px 0 6px; }
.txf-body .ai-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 15px; height: 15px; border-radius: 4px; cursor: pointer;
  background: var(--tx-panel); border: 1px solid var(--tx-line2); position: relative; transition: border-color .15s, background .15s;
}
.txf-body .ai-check input[type="checkbox"]:checked { background: var(--tx-ac); border-color: var(--tx-ac); }
.txf-body .ai-check input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.txf-body .ai-check:hover { color: var(--tx-tx); }
.txf-body .efx-range-row { display: flex; align-items: center; gap: 9px; }
.txf-body .efx-range-row input[type="range"] { flex: 1 1 auto; min-width: 0; }
.txf-body .efx-range-row output {
  flex: none; min-width: 42px; text-align: right; font-size: 11.5px; color: var(--tx-ac);
  font-family: var(--tx-mono); font-variant-numeric: tabular-nums;
}
/* 自定义滑块：细轨道 + 黄绿圆拇指 */
.txf-body input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 16px; background: transparent; cursor: pointer; margin: 0;
}
.txf-body input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--tx-raise); }
.txf-body input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--tx-ac);
  margin-top: -4.5px; border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.txf-body input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--tx-raise); }
.txf-body input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--tx-ac); border: 0; }
.txf-body input[type="range"]:hover::-webkit-slider-thumb { background: var(--tx-ac-d); }
.txf-body .tx-reset {
  display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 10px; margin: 2px 5px 5px 0;
  border-radius: 6px; font-size: 11.5px; background: var(--tx-panel); border: 1px solid var(--tx-line2);
  color: var(--tx-tx2); cursor: pointer; transition: color .15s, border-color .15s;
}
.txf-body .tx-reset:hover { color: var(--tx-ac); border-color: rgba(255, 106, 0, .45); }
.txf-body .ai-gen-note { font-size: 11px; line-height: 1.7; color: var(--tx-tx3); margin: 6px 0; }
.txf-body .ai-gen-note b { color: var(--tx-tx2); }

/* 曲线编辑器 */
.txf-body .tf-curve-wrap { margin: 4px 0 8px; }
.txf-body .tf-curve-canvas {
  width: 100%; height: 150px; display: block; border-radius: 6px;
  background: #0a0d11; border: 1px solid var(--tx-line2); cursor: crosshair; touch-action: none;
}
.txf-body .tf-curve-hint { font-size: 10.5px; color: var(--tx-tx3); margin-top: 5px; line-height: 1.5; }
.txf-body .tf-curve-ops { display: flex; gap: 6px; margin: 2px 0 6px; }

/* 全局后处理（16 项） */
.txf-body .tf-post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; margin: 6px 0 2px; }
.txf-body .tf-post-sw { margin: 0; }
.txf-body .tf-post-sec { border-top: 1px dashed var(--tx-line2); margin-top: 9px; padding-top: 8px; }
.txf-body .tf-post-sec > b { display: block; font-size: 12px; font-weight: 600; color: var(--tx-tx2); margin-bottom: 4px; }
.txf-body .tf-post-quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 6px; margin: 4px 0; }
@media (max-width: 620px) {
  .txf-body .tf-post-grid { grid-template-columns: minmax(0, 1fr); }
  .txf-body .tf-post-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 色标 / 调色板 */
.txf-body .tf-palettes { margin: 6px 0 4px; }
.txf-body .tf-palette-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.txf-body .tf-palette-btn {
  height: 24px; padding: 0 9px; border-radius: 5px; font-size: 11px;
  background: var(--tx-panel); border: 1px solid var(--tx-line2); color: var(--tx-tx2); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.txf-body .tf-palette-btn:hover { color: var(--tx-ac); border-color: rgba(255, 106, 0, .45); }
.txf-body .tf-stops { display: flex; flex-direction: column; gap: 5px; margin: 6px 0 2px; }
.txf-body .tf-stop { display: flex; align-items: center; gap: 6px; }
.txf-body .tf-stop input[type="range"] { flex: 1 1 auto; }
.txf-body .tf-stop input[type="color"] {
  width: 30px; height: 24px; flex: none; padding: 0; border: 1px solid var(--tx-line2);
  border-radius: 5px; background: var(--tx-panel); cursor: pointer;
}
.txf-body .tf-stop button {
  width: 22px; height: 22px; flex: none; border-radius: 5px; border: 1px solid var(--tx-line2);
  background: var(--tx-panel); color: var(--tx-tx3); cursor: pointer; font-size: 11px; line-height: 1;
  display: grid; place-items: center; padding: 0;
}
.txf-body .tf-stop button:hover { color: var(--tx-danger); border-color: rgba(229, 83, 75, .5); }
.txf-body .efx-color-row { display: flex; align-items: center; gap: 8px; }
.txf-body .efx-color-row input[type="color"] {
  width: 44px; height: 30px; flex: none; padding: 0; border: 1px solid var(--tx-line2);
  border-radius: 6px; background: var(--tx-panel); cursor: pointer;
}
.txf-body .efx-color-row output { font-size: 11.5px; color: var(--tx-ac); font-family: var(--tx-mono); }

/* 页面级覆盖：本页不使用全站浅色容器 */
.txf-body .btn { border-radius: 8px; }
.txf-body .btn-ghost { background: transparent; }

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
  .txf-library { flex-basis: 250px; }
  .txf-params { flex-basis: 280px; }
  .txf-layers { flex-basis: 186px; }
  .txf-nav a { padding: 0 9px; }
}
@media (max-width: 900px) {
  .txf-body { height: auto; min-height: 100dvh; overflow: visible; }
  .txf-workspace { flex-direction: column; }
  .txf-resizer { display: none; }
  .txf-library, .txf-params, .txf-layers { flex: none; width: 100%; }
  .txf-library .txf-panel-bd { max-height: 46vh; }
  .txf-params .txf-panel-bd { max-height: none; overflow: visible; }
  .txf-layers { order: -1; }
  .txf-layers .txf-panel-bd { max-height: 30vh; }
  .txf-stage { min-height: 56vh; }
  .txf-tb-c { margin-left: 0; }
  .txf-toolbar { flex-wrap: wrap; padding: 8px 12px; }
  .txf-topbar { height: auto; min-height: 60px; padding: 10px 14px; flex-wrap: wrap; gap: 10px 16px; }
  .txf-nav a { height: 34px; }
}
@media (max-width: 620px) {
  .txf-thumb-grid { grid-template-columns: repeat(2, 1fr); }
  .txf-dock-body { width: 100%; justify-content: flex-end; }
  .txf-dock { flex-wrap: wrap; padding: 6px 10px; }
}

/* ---------- 导出菜单（20261028a） ---------- */
.txf-export { position: relative; }
.txf-export > summary { list-style: none; cursor: pointer; user-select: none; }
.txf-export > summary::-webkit-details-marker { display: none; }
.txf-export-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 196px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--tx-panel); border: 1px solid var(--tx-line2); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.txf-export-list button {
  height: 32px; padding: 0 10px; border: 0; border-radius: 6px; text-align: left; cursor: pointer;
  background: transparent; color: var(--tx-tx2); font-size: 12.5px; display: flex; align-items: center; gap: 7px;
  transition: color .15s, background .15s;
}
.txf-export-list button:hover { color: var(--tx-ac); background: var(--tx-ac-soft); }
.txf-export-str {
  display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 7px 10px 3px;
  border-top: 1px solid var(--tx-line); font-size: 11.5px; color: var(--tx-tx3);
}
.txf-export-str input[type="range"] { flex: 1 1 auto; min-width: 0; }
.txf-export-str output { flex: none; min-width: 26px; text-align: right; font-family: var(--tx-mono); color: var(--tx-ac); font-variant-numeric: tabular-nums; }
/* 拖拽导入图片高亮 */
.txf-workspace.is-drop { outline: 2px dashed var(--tx-ac); outline-offset: -6px; }
.txf-workspace.is-drop .txf-stage::after {
  content: "松开鼠标即导入为图层"; position: absolute; inset: auto 0 50% 0; z-index: 50;
  text-align: center; font-size: 14px; font-weight: 650; color: var(--tx-ac); pointer-events: none;
}
.txf-stage { position: relative; }

/* ==========================================================================
   美术服务中心（services.html）
   ========================================================================== */

/* ---------- 页头：文案 + 关键信息速览 ---------- */
.svc-hero { padding: 72px 0 64px; }
.svc-hero .crumb { margin-bottom: 18px; }
.svc-hero h1 { margin-top: 4px; }
.svc-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px; align-items: center;
}
.svc-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.svc-facts {
  display: grid; grid-template-columns: repeat(2, minmax(150px, 176px));
  gap: 12px;
}
.svc-fact {
  padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.svc-fact:hover { border-color: var(--brand-line); transform: translateY(-2px); box-shadow: var(--shadow); }
.svc-fact b {
  display: block; font-size: 24px; font-weight: 750; letter-spacing: -.02em;
  color: var(--ink); line-height: 1.2; font-variant-numeric: tabular-nums;
}
.svc-fact b i { font-style: normal; font-size: 15px; font-weight: 700; color: var(--brand); margin-left: 2px; }
.svc-fact span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }

/* ---------- 吸顶筛选栏 ---------- */
.svc-filter {
  position: sticky; top: calc(var(--header-h) + 10px); z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-bottom: 28px; padding: 12px 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}
.svc-filter .toolbar { flex: 1 1 auto; margin-bottom: 0; gap: 10px; }
.svc-filter .search-box { margin-left: auto; }
.svc-filter .search-box input { width: 232px; height: 37px; }
.svc-result { flex: none; font-size: 12.5px; color: var(--muted-2); white-space: nowrap; }

/* ---------- 服务卡片网格 ---------- */
.svc-grid { gap: 26px; }
.svc-grid .card { height: 100%; }
.svc-grid .card-media::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2;
  background-image: linear-gradient(90deg, var(--brand), var(--brand-light));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.svc-grid .card:hover .card-media::before { transform: scaleX(1); }
.svc-grid .card-body h3 { font-size: 17.5px; }
.svc-grid .feature-list li { font-size: 13px; color: var(--ink-2); }

/* ---------- 合作流程：连线步骤 ---------- */
.svc-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: svcstep; }
.svc-step {
  position: relative; padding: 26px 24px 24px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.svc-step:hover { transform: translateY(-4px); border-color: var(--brand-line); box-shadow: var(--shadow); }
.svc-step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  color: var(--brand); font-size: 15px; font-weight: 750; letter-spacing: .02em;
  font-family: var(--font-num);
}
.svc-step h3 { margin-top: 15px; font-size: 16.5px; }
.svc-step p { margin-top: 9px; font-size: 13.5px; color: var(--muted); line-height: 1.8; }
/* 步骤间连线（桌面端）：从编号徽标右侧延伸到下一张卡片 */
@media (min-width: 1025px) {
  .svc-step:not(:last-child)::after {
    content: ""; position: absolute; top: 45px; left: calc(100% - 12px); width: 24px; height: 2px;
    background-image: linear-gradient(90deg, var(--brand-line), var(--brand));
    border-radius: 2px;
  }
  .svc-step:not(:last-child)::before {
    content: ""; position: absolute; top: 41px; right: -19px; z-index: 1;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow);
  }
}

/* ---------- 定制方案 CTA ---------- */
.svc-cta {
  padding: 52px 56px;
  border: 1px solid var(--brand-line); border-radius: var(--radius-lg);
  background:
    radial-gradient(560px 280px at 88% -20%, var(--brand-glow), transparent 65%),
    var(--surface);
  box-shadow: var(--shadow);
}
.svc-cta-split { gap: 56px; }
.svc-cta h2 { font-size: clamp(23px, 2.6vw, 30px); }
.svc-cta-lead { margin-top: 14px; color: var(--muted); font-size: 15px; line-height: 1.9; max-width: 46ch; }
.svc-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.svc-cta-note {
  display: flex; align-items: center; gap: 8px;
  margin-top: 20px; font-size: 13px; color: var(--muted-2);
}
.svc-cta-note::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent);
}
.svc-cap {
  padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft);
}
.svc-cap-title { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.svc-cap-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 13px; }
.svc-cap-list li { display: flex; align-items: flex-start; gap: 12px; }
.svc-cap-list i {
  flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: var(--brand-soft); border: 1px solid var(--brand-line); position: relative;
}
.svc-cap-list i::before {
  content: ""; position: absolute; left: 6px; top: 4px;
  width: 6px; height: 10px; border: solid var(--brand); border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.svc-cap-list b { display: block; font-size: 14px; font-weight: 650; color: var(--ink); }
.svc-cap-list span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted-2); }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .svc-hero { padding: 48px 0 52px; }
  .svc-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .svc-facts { grid-template-columns: repeat(2, 1fr); width: 100%; max-width: 560px; }
  .svc-flow { grid-template-columns: repeat(2, 1fr); }
  .svc-cta { padding: 40px 36px; }
  .svc-cta-split { gap: 36px; }
  .svc-filter { position: static; }
}
@media (max-width: 640px) {
  .svc-hero { padding: 40px 0 44px; }
  .svc-facts { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .svc-fact { padding: 14px 16px; }
  .svc-fact b { font-size: 20px; }
  .svc-flow { grid-template-columns: 1fr; }
  .svc-cta { padding: 30px 22px; }
  .svc-filter .toolbar { flex-direction: column; align-items: stretch; }
  .svc-filter .search-box { margin-left: 0; }
  .svc-filter .search-box input { width: 100%; }
  .svc-result { white-space: normal; }
}

/* ==========================================================================
   AI 创新中心（ai.html）— 场景胶囊 / 工作流 / 作品墙 / 移动端兜底
   ========================================================================== */

/* ---------- 场景分类胶囊 ---------- */
.ai-scene-bar {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin: 4px 0 26px;
}
.ai-scene {
  appearance: none; cursor: pointer;
  padding: 8px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 650; letter-spacing: .01em;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line);
  transition: color .18s var(--ease), border-color .18s var(--ease),
    background .18s var(--ease), transform .18s var(--ease);
}
.ai-scene:hover { color: var(--ink); border-color: var(--brand-line); transform: translateY(-1px); }
.ai-scene.is-on {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--brand), #ff6a2b);
  box-shadow: 0 6px 16px rgba(255, 138, 43, .32);
}

/* ---------- 一条龙生产工作流 ---------- */
.ai-flow-sec { padding-top: 8px; }
.ai-flow {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 14px 6px;
  margin-top: 8px;
}
.ai-flow-node {
  flex: 1 1 200px; min-width: 168px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 22px 20px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.ai-flow-node:hover { transform: translateY(-4px); border-color: var(--brand-line); box-shadow: var(--shadow); }
.ai-flow-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  color: var(--brand); font-size: 15px; font-weight: 800; font-family: var(--font-num);
}
.ai-flow-node b { font-size: 16px; font-weight: 750; letter-spacing: -.01em; margin-top: 4px; }
.ai-flow-node span:last-child { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.ai-flow-node:hover span:last-child { color: var(--brand); }
.ai-flow-arrow {
  align-self: center; flex: 0 0 auto;
  font-size: 22px; font-weight: 700; color: var(--brand);
  opacity: .65; margin: 0 2px;
}
.ai-flow-note {
  display: flex; align-items: center; gap: 10px;
  margin-top: 24px; font-size: 13.5px; color: var(--muted); line-height: 1.8;
}
.ai-flow-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow);
}

/* ---------- 作品墙 ---------- */
.ai-gallery-sec { padding-top: 8px; }
.ai-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 8px;
}
.ai-gal-card {
  display: flex; flex-direction: column; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.ai-gal-card:hover { transform: translateY(-4px); border-color: var(--brand-line); box-shadow: var(--shadow); }
.ai-gal-media {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--bg-soft);
}
.ai-gal-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s var(--ease);
}
.ai-gal-card:hover .ai-gal-media img { transform: scale(1.05); }
.ai-gal-media-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.ai-gal-media-split img { object-fit: cover; }
.ai-gal-body {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px 4px;
}
.ai-gal-body b { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.ai-gal-body span { font-size: 12px; color: var(--muted-2); }
.ai-gal-go {
  padding: 8px 16px 15px; font-size: 13px; font-weight: 700; color: var(--brand);
  transition: letter-spacing .2s var(--ease);
}
.ai-gal-card:hover .ai-gal-go { letter-spacing: .03em; }

/* ---------- 移动端「建议桌面使用」兜底横幅 ---------- */
.ai-mobile-suggest {
  display: none;
  align-items: center; gap: 12px; margin: 18px 0 4px;
  padding: 14px 18px; border-radius: var(--radius);
  border: 1px solid var(--brand-line);
  background: var(--brand-soft); color: var(--ink);
}
.ai-mobile-suggest b { font-size: 13.5px; font-weight: 700; }
.ai-mobile-suggest span { flex: 1; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.ai-mobile-suggest button {
  flex: none; cursor: pointer; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--brand-line);
  background: var(--surface); color: var(--brand);
  font-size: 12.5px; font-weight: 700;
  transition: background .18s var(--ease);
}
.ai-mobile-suggest button:hover { background: var(--brand-soft); }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .ai-gallery { grid-template-columns: repeat(2, 1fr); }
  .ai-flow-arrow { display: none; }
  .ai-flow { gap: 14px; }
  .ai-flow-node { flex: 1 1 calc(50% - 14px); }
}
@media (max-width: 640px) {
  .ai-gallery { grid-template-columns: 1fr; gap: 16px; }
  .ai-scene { padding: 7px 13px; font-size: 12.5px; }
  .ai-flow-node { flex: 1 1 100%; }
  .ai-flow-note { font-size: 12.5px; }
}

/* 贴图工坊（深色 App 语境）内的移动端兜底横幅配色覆盖 */
.txf-body .ai-mobile-suggest {
  margin: 0; border-radius: 0; border-left: 0; border-right: 0;
  background: var(--tx-panel); border-color: var(--tx-line2); color: var(--tx-tx);
}
.txf-body .ai-mobile-suggest span { color: var(--tx-tx2); }
.txf-body .ai-mobile-suggest button {
  background: var(--tx-panel2); border-color: var(--tx-line2); color: var(--tx-ac);
}
.txf-body .ai-mobile-suggest button:hover { background: var(--tx-raise); }

/* 移动端兜底横幅：仅在窄屏且未隐藏时显示 */
@media (max-width: 860px) {
  .ai-mobile-suggest:not([hidden]) { display: flex; }
}

/* ==========================================================================
   面试模拟（ai-interview.html）20261029c：预设 / 作品集 / 追问 / 迭代 / 错题本
   ========================================================================== */
.iv-presets { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; }
.iv-preset {
  cursor: pointer; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font-size: 13.5px; font-weight: 650; letter-spacing: .01em;
  transition: color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), background .18s var(--ease);
}
.iv-preset:hover { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); transform: translateY(-1px); }
.iv-followup {
  display: flex; align-items: center; gap: 8px; margin: 16px 0 4px;
  font-size: 13px; color: var(--muted); cursor: pointer;
}
.iv-followup input { accent-color: var(--brand); width: 15px; height: 15px; }
.iv-followup b { color: var(--ink); }
.iv-works { margin-top: 14px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--bg-soft); }
.iv-works-head { display: flex; align-items: center; gap: 12px; }
.iv-works-head b { font-size: 13.5px; color: var(--ink); }
.iv-works-add {
  cursor: pointer; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: var(--brand); border: 1px solid var(--brand-line); background: var(--brand-soft);
  transition: background .18s var(--ease);
}
.iv-works-add:hover { background: var(--brand-glow); }
.iv-works-add input { display: none; }
.iv-works-tip { margin-top: 8px; font-size: 12px; color: var(--muted-2); }
.iv-works-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.iv-work-thumb { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.iv-work-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iv-work-x {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; line-height: 18px; cursor: pointer;
}
.iv-mobile-suggest {
  display: flex; gap: 12px; align-items: flex-start; margin: 10px 0 0; padding: 12px 16px;
  border: 1px solid var(--brand-line); border-radius: var(--radius);
  background: var(--brand-soft); color: var(--ink); font-size: 13px; line-height: 1.7;
}
.iv-mobile-suggest > span { font-size: 18px; }
.iv-iterate { margin-top: 16px; padding: 20px 22px; border: 1px solid var(--brand-line); border-radius: var(--radius); background: var(--surface); }
.iv-iterate-title { margin: 0 0 10px; font-size: 15px; }
.iv-iterate-q { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); line-height: 1.8; }
.iv-iterate .iv-acts { margin-top: 12px; }
.iv-iterate-out { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--bg-soft); }
.iv-iter-head { font-size: 14px; margin-bottom: 10px; }
.iv-iter-head b { font-size: 20px; color: var(--brand); }
.iv-iter-up { color: var(--ok); font-weight: 700; }
.iv-iter-down { color: #e05252; font-weight: 700; }
.iv-wrong { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.iv-wrong-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.iv-wrong-head h4 { margin: 0; font-size: 14.5px; }
.iv-wrong-count b { color: var(--brand); font-size: 17px; }
.iv-wrong-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.iv-wrong-list li { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.iv-wrong-list .iv-sum-idx { flex: none; color: #e05252; font-weight: 750; font-size: 12.5px; min-width: 44px; }
.iv-wrong-list .iv-sum-cat { flex: none; color: var(--muted-2); }
.iv-wrong-list .iv-sum-q { color: var(--ink-2); line-height: 1.6; }
.iv-wrong-empty { color: var(--muted-2); }
@media (max-width: 640px) {
  .iv-presets { gap: 7px; }
  .iv-preset { padding: 7px 12px; font-size: 12.5px; }
  .iv-works-head { flex-wrap: wrap; }
  .iv-wrong-head { flex-wrap: wrap; }
}

/* ==========================================================================
   贴图工坊 v2（20261027）：底坞五面板 / 浏览器筛选 / 导出菜单 / 画布浮层工具
   ========================================================================== */

/* ---- 底部坞改为纵向五面板（覆盖旧行式布局） ---- */
.txf-dock { flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 12px 10px; }
.txf-dock-hd { gap: 4px; }
.txf-dock-badge { font-size: 10px; color: var(--tx-ac); background: var(--tx-ac-soft); border-radius: 8px; padding: 1px 6px; margin-left: 2px; font-variant-numeric: tabular-nums; }
.txf-dock-status { font-size: 11px; color: var(--tx-tx3); font-variant-numeric: tabular-nums; }
.txf-dock-body { display: block; margin: 0; }
.txf-dock-pane {
  max-height: 250px; overflow: auto; padding: 10px 12px;
  background: var(--tx-panel2); border: 1px solid var(--tx-line); border-radius: var(--tx-r);
}
.txf-dock.is-fold .txf-dock-hd { margin-bottom: 0; }
.dk-block { margin-bottom: 12px; }
.dk-block:last-child { margin-bottom: 2px; }
.dk-t { display: block; font-size: 12px; font-weight: 700; color: var(--tx-tx); margin-bottom: 7px; }
.dk-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dk-l { flex: none; width: 76px; font-size: 11.5px; color: var(--tx-tx3); }
.dk-row input[type="range"] { flex: 1; min-width: 90px; }
.dk-v { flex: none; width: 52px; text-align: right; font-size: 11px; color: var(--tx-tx2); font-variant-numeric: tabular-nums; }
.dk-row .txf-sel { flex: 1; }
.dk-chk { margin: 4px 0; }
.dk-chk span { font-size: 11.5px; color: var(--tx-tx2); }
.dk-pane-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dk-note { font-size: 11px; color: var(--tx-tx3); margin-bottom: 8px; }
.dk-hint { font-size: 11px; color: var(--tx-tx3); margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.dk-go { height: 30px; padding: 0 16px; }
.dk-page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 7px; }
.dk-page-card {
  position: relative; padding: 8px 26px 8px 10px; border: 1px solid var(--tx-line); border-radius: 8px;
  background: var(--tx-panel); cursor: pointer; transition: border-color .15s;
}
.dk-page-card:hover { border-color: var(--tx-ac); }
.dk-page-card b { display: block; font-size: 12px; color: var(--tx-tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-page-card span { font-size: 10.5px; color: var(--tx-tx3); }
.dk-page-del {
  position: absolute; top: 6px; right: 6px; border: 0; background: transparent; color: var(--tx-tx3);
  cursor: pointer; font-size: 11px; line-height: 1; padding: 3px;
}
.dk-page-del:hover { color: var(--tx-danger); }
.dk-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
.dk-quick-card {
  text-align: left; border: 1px solid var(--tx-line); border-radius: 8px; background: var(--tx-panel);
  padding: 9px 10px; cursor: pointer; transition: border-color .15s, background .15s;
}
.dk-quick-card:hover { border-color: var(--tx-ac); background: var(--tx-ac-soft); }
.dk-quick-card b { display: block; font-size: 12px; color: var(--tx-tx); margin-bottom: 2px; }
.dk-quick-card span { font-size: 10.5px; color: var(--tx-tx3); }

/* ---- 画布工具组：浮层在画布右上角（对齐源站） ---- */
.txf-canvas-wrap { position: relative; }
.txf-canvas-tools {
  position: absolute; top: 10px; right: 10px; z-index: 6;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.txf-bar-gap { flex: 1; }
.txf-sel-xs { height: 24px; font-size: 11px; padding: 0 6px; }

/* ---- 导出菜单：主标题 + 描述两行（对齐源站） ---- */
.txf-export { position: relative; }
.txf-export-list {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30; min-width: 250px;
  background: var(--tx-panel2); border: 1px solid var(--tx-line2); border-radius: 10px;
  padding: 6px; display: none; flex-direction: column; gap: 2px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.txf-export[open] .txf-export-list { display: flex; }
.txf-export-list > button {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 7px 10px; border-radius: 7px; cursor: pointer; transition: background .15s;
}
.txf-export-list > button:hover { background: var(--tx-ac-soft); }
.txf-export-list > button b { display: block; font-size: 12.5px; color: var(--tx-tx); font-weight: 650; }
.txf-export-list > button i { display: block; font-style: normal; font-size: 10.5px; color: var(--tx-tx3); margin-top: 1px; }
.txf-export-list .txf-export-str { padding: 6px 10px; }

/* ---- 图层面板底栏：2 列网格（对齐源站 上移|下移 / 复制|删除 / 内置样例） ---- */
.txf-ft-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.txf-ft-grid .txf-minibtn { justify-content: center; height: 28px; }
.txf-ft-grid .txf-ft-full { grid-column: 1 / -1; }

/* ---- 帮助 / 反馈弹窗 ---- */
.txf-help-bd h4 { font-size: 13px; color: var(--tx-ac); margin: 12px 0 6px; }
.txf-help-bd h4:first-child { margin-top: 0; }
.txf-help-bd p { font-size: 12px; color: var(--tx-tx2); margin: 0 0 7px; line-height: 1.7; }
.txf-help-bd b { color: var(--tx-tx); }
.txf-modal-box .txf-inp { width: 100%; margin: 4px 0 10px; background: var(--tx-panel); border: 1px solid var(--tx-line2); border-radius: 7px; color: var(--tx-tx); padding: 8px 10px; font-size: 12.5px; }
.txf-modal-box .ai-label { display: block; font-size: 11.5px; color: var(--tx-tx3); }
.txf-modal-ft { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

/* ---- 舞台条：徽章不重复 ---- */
.txf-stage-ms { margin-left: 6px; }

/* ---- 舞台条防换行 ---- */
.txf-stage-bar { flex-wrap: nowrap; overflow: hidden; }
.txf-stage-bar .txf-stage-meta { margin-left: 0; }
.txf-stage-bar .txf-stage-time { margin-left: 8px; }

/* ==========================================================================
   AI 抠图 P0（20261030m）：页头主张 / 面板分区 / 蒙版视图 / 卡片裁切修正
   ========================================================================== */

/* ---- 左面板：分区卡（<details> 纯 HTML 折叠）+ sticky 限高滚动 ---- */
.mt-group {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); margin-bottom: 11px; overflow: hidden;
}
.mt-group > .mt-group-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 12px; cursor: pointer; list-style: none;
  font-size: 12.5px; color: var(--muted-2); user-select: none;
}
.mt-group > .mt-group-head::-webkit-details-marker { display: none; }
.mt-group > .mt-group-head b { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.mt-group > .mt-group-head i {
  font-style: normal; font-size: 11.5px; color: var(--muted-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mt-group > .mt-group-head::after {
  content: '⌄'; margin-left: auto; font-size: 14px; color: var(--muted-2);
  transition: transform .18s var(--ease); line-height: 1;
}
.mt-group[open] > .mt-group-head::after { transform: rotate(180deg); }
.mt-group[open] > .mt-group-head { border-bottom: 1px solid var(--line); }
.mt-group > .mt-group-body { padding: 12px; }
.mt-group > .mt-group-body > .ai-field:last-child { margin-bottom: 0; }
.mt-group-note > .mt-group-body { padding: 10px 12px 12px; }
.mt-group-note .ai-gen-note { margin-top: 0; }
.mt-group-note .ai-gen-note b { color: var(--brand-dark); }
@media (min-width: 861px) {
  /* 长面板下滚后按钮不消失（与 #txPanel 同一套：sticky + 限高 + 内部滚动） */
  #mtPanel {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    max-height: calc(100vh - var(--header-h) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
}

/* ---- 蒙版视图（结果区第三个 Tab）---- */
.mt-mask-pane { display: none; }
.mt-cmp-stage.is-mask .mt-mask-pane { display: block; }
.mt-cmp-stage.is-mask .ai-cmp-wrap,
.mt-cmp-stage.is-mask .mt-compare { display: none; }
.mt-mask-cv-wrap {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #000; display: flex; justify-content: center;
}
.mt-mask-cv-wrap canvas { display: block; max-width: 100%; height: auto; }

/* ---- 记录卡片：抠图结果多为非方形，cover 会把主体裁掉 → contain ---- */
#mtGrid .ai-card-img img,
#lyRecGrid .ai-card-img img { object-fit: contain; padding: 6px; }
.ai-card-dim {
  position: absolute; left: 7px; bottom: 7px; z-index: 1;
  padding: 2px 7px; border-radius: 999px;
  font-size: 10.5px; line-height: 1.5; color: #fff;
  background: rgba(0, 0, 0, .55); font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ---- 并排对比：容器比例跟随图片，避免宽图被压进 4:3 ---- */
.mt-compare .mt-pane-img { aspect-ratio: auto; }
.mt-compare .mt-pane-img img { height: auto; max-height: 440px; object-fit: contain; }
@media (max-width: 860px) {
  .mt-compare .mt-pane-img { aspect-ratio: auto; }
  .mt-compare .mt-pane-img img { max-height: 300px; height: auto; }
}

/* ==========================================================================
   AI 抠图 P1-A（20261030n）：边缘优化滑块
   ========================================================================== */
.mt-range-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.mt-range {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 4px; background: var(--line-strong);
  outline: none; cursor: pointer;
}
.mt-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); cursor: pointer; transition: transform .12s var(--ease, ease);
}
.mt-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.mt-range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand); border: 2px solid #fff; cursor: pointer;
}
.mt-range-val {
  min-width: 22px; text-align: right; font-size: 12px;
  color: var(--muted-2); font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   AI 抠图 P1-B（20261030p）：批量队列面板
   ========================================================================== */
.mt-batch-wrap {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 18px;
}
.mt-batch-wrap .ai-records-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mt-batch-wrap .ai-records-head h2 { font-size: 15px; margin: 0; }
.mt-batch-wrap .ai-records-count { color: var(--muted-2); font-size: 12.5px; }
.mt-batch-x {
  margin-left: auto; width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted-2);
  cursor: pointer; font-size: 13px; line-height: 1;
}
.mt-batch-x:hover { color: var(--ink); border-color: var(--line-strong); }
.mt-batch-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mt-batch-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); font-size: 12px;
}
.mt-batch-item img { width: 38px; height: 38px; object-fit: contain; border-radius: 6px; background: #f3f0ec; flex: none; }
.mt-batch-item.is-done { border-color: var(--brand-line); background: var(--brand-soft); }
.mt-batch-item.is-run { border-color: var(--brand); }
.mt-batch-item.is-err { border-color: #e8a0a0; }
.mt-batch-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.mt-batch-st { color: var(--muted-2); flex: none; }
.mt-batch-item.is-done .mt-batch-st a { color: var(--brand); font-weight: 600; text-decoration: none; }
.mt-batch-item.is-done .mt-batch-st a:hover { text-decoration: underline; }

/* ==========================================================================
   AI 抠图 P2-2（20261030r）：修补画笔面板
   ========================================================================== */
.mt-inpaint { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.mt-inpaint-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.mt-inpaint-bar > b { font-size: 13px; color: var(--ink); }
.mt-inpaint-tools { display: flex; gap: 6px; }
.mt-inpaint-bar .ai-gen-btn { margin-left: auto; padding: 6px 14px; font-size: 12.5px; }
.mt-inpaint-bar .ai-ex { padding: 6px 10px; font-size: 12px; }
.mt-inpaint-brush { margin: 0; }
.mt-inpaint-stage { background: #1c1c1f; display: flex; justify-content: center; padding: 12px; min-height: 120px; }
.mt-inpaint-stage.checker { background-color: #2a2a2e; background-image:
  linear-gradient(45deg, #3a3a3f 25%, transparent 25%),
  linear-gradient(-45deg, #3a3a3f 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #3a3a3f 75%),
  linear-gradient(-45deg, transparent 75%, #3a3a3f 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
.mt-inpaint-stage canvas { max-width: 100%; height: auto; max-height: 460px; cursor: crosshair; touch-action: none; box-shadow: 0 2px 12px rgba(0,0,0,.3); }

/* ==========================================================================
   AI 抠图：记录管理 + lightbox（20261030s）
   ========================================================================== */
/* lightbox 覆盖层：点击卡片放大，支持上一张 / 下一张 / Esc / ← → */
.mt-lightbox {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(8, 10, 14, .86);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.mt-lightbox[hidden] { display: none; }
.mt-lb-stage {
  max-width: min(92vw, 1100px); max-height: 84vh;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5);
  background-color: #14161b; background-image:
    linear-gradient(45deg, #1c1f26 25%, transparent 25%),
    linear-gradient(-45deg, #1c1f26 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1c1f26 75%),
    linear-gradient(-45deg, transparent 75%, #1c1f26 75%);
  background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.mt-lb-stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: 84vh; object-fit: contain; }
.mt-lb-btn {
  position: absolute; z-index: 2; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  background: rgba(20,22,28,.62); color: #fff; font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.mt-lb-btn:hover { background: var(--brand); transform: scale(1.06); }
.mt-lb-close { top: 18px; right: 18px; }
.mt-lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.mt-lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.mt-lb-prev:hover, .mt-lb-next:hover { transform: translateY(-50%) scale(1.06); }
.mt-lb-cap {
  position: absolute; left: 0; right: 0; bottom: 18px;
  text-align: center; color: rgba(255,255,255,.86);
  font-size: 12.5px; pointer-events: none; padding: 0 24px;
}
/* 卡片：名称行 + 管理按钮（重命名 / 置顶 / 删除） */
.ai-card-name { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 8px; line-height: 1.4; word-break: break-all; }
.ai-card-name-input {
  width: 100%; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--ink);
  border: 1px solid var(--brand); border-radius: 7px; padding: 4px 7px;
  background: var(--surface); outline: none;
}
.ai-card-img { cursor: zoom-in; }
.ai-card-zoom {
  position: absolute; right: 7px; top: 7px; z-index: 2;
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5); color: #fff; font-size: 14px;
  opacity: 0; transition: opacity .16s var(--ease); pointer-events: none;
}
.ai-card-img:hover .ai-card-zoom { opacity: 1; }
.ai-card-acts { flex-wrap: wrap; row-gap: 4px; }
.ai-card-tag.pin { background: rgba(255, 106, 0, .92); }
.ai-card-tag.fav { background: #e8a200; }
.ai-act.is-on { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand); }
/* 收藏高亮：卡片加金边 + 名称前的星 */
.ai-card.is-fav .ai-card-img { box-shadow: inset 0 0 0 2px #e8a200; }
.ai-card.is-fav .ai-card-name::before { content: '★ '; color: #e8a200; }

/* 记录区「仅看收藏」筛选按钮 */
.ai-records-filter {
  margin-left: auto; padding: 5px 12px; font-size: 12.5px; font-weight: 700;
  color: var(--ink-2); background: var(--surface); cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; transition: all .16s var(--ease);
}
.ai-records-filter:hover { border-color: var(--brand); color: var(--brand-dark); }
.ai-records-filter.is-on { background: #e8a200; border-color: #e8a200; color: #221a00; }



/* ==========================================================================
   贴图工坊 · Texture Forge 工作台（2026-10-31）
   深色全屏编辑器：类型浏览器 / 图层参数 / 舞台 / 图层 / 底部 dock
   ========================================================================== */
.tf-body { background: #0a0a0d; }
.tf-shell {
  --tf-ac: #ff6a00;
  --tf-bg: #0a0a0d;
  --tf-panel: #141419;
  --tf-panel-2: #191920;
  --tf-line: #26262f;
  --tf-line-2: #33333e;
  --tf-txt: #d9d9e0;
  --tf-dim: #8a8a97;
  --tf-hi: #ffffff;
  display: flex; flex-direction: column;
  height: calc(100vh - 64px); min-height: 620px;
  background: var(--tf-bg); color: var(--tf-txt);
  font-size: 13px; overflow: hidden;
}
.tf-shell *, .tf-shell *::before, .tf-shell *::after { box-sizing: border-box; }
.tf-shell button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.tf-shell select, .tf-shell input[type="text"], .tf-shell input[type="search"],
.tf-shell input[type="number"] {
  font: inherit; color: var(--tf-txt); background: #0f0f13;
  border: 1px solid var(--tf-line); border-radius: 6px; padding: 4px 6px; outline: none;
}
.tf-shell select:focus, .tf-shell input:focus { border-color: var(--tf-ac); }
.tf-shell ::-webkit-scrollbar { width: 8px; height: 8px; }
.tf-shell ::-webkit-scrollbar-thumb { background: #2f2f3a; border-radius: 8px; }
.tf-shell ::-webkit-scrollbar-track { background: transparent; }

/* ---------- 顶栏 ---------- */
.tf-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; background: #101014; border-bottom: 1px solid var(--tf-line);
  position: relative; z-index: 6;
}
.tf-tb-left, .tf-tb-right { display: flex; align-items: center; gap: 8px; }
.tf-tb-right { margin-left: auto; flex-wrap: wrap; }
.tf-tb-title { display: flex; align-items: baseline; gap: 8px; }
.tf-tb-title h1 { margin: 0; font-size: 15px; font-weight: 700; color: var(--tf-hi); letter-spacing: .5px; }
.tf-draft { font-size: 11px; color: var(--tf-dim); }
.tf-tb-sep { width: 1px; height: 18px; background: var(--tf-line); }
.tf-field { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tf-dim); }
.tf-seg { display: inline-flex; background: #0f0f13; border: 1px solid var(--tf-line); border-radius: 7px; overflow: hidden; }
.tf-seg button { padding: 4px 9px; font-size: 12px; color: var(--tf-dim); }
.tf-seg button.on { background: #2a2a33; color: var(--tf-hi); }
.tf-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; font-size: 12px; color: var(--tf-txt);
  background: #1a1a21; border: 1px solid var(--tf-line); border-radius: 7px;
  text-decoration: none; white-space: nowrap; transition: background .14s, border-color .14s;
}
.tf-btn:hover { background: #23232c; border-color: var(--tf-line-2); }
.tf-btn.icon { padding: 5px 8px; min-width: 28px; justify-content: center; }
.tf-btn.primary { background: var(--tf-ac); border-color: var(--tf-ac); color: #1a0d00; font-weight: 600; }
.tf-btn.primary:hover { filter: brightness(1.08); }
.tf-btn.xs { padding: 3px 7px; font-size: 11px; border-radius: 6px; }
.tf-btn.on { background: #2b2b35; border-color: var(--tf-ac); color: var(--tf-hi); }
.tf-menu-wrap { position: relative; }
.tf-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 200px; padding: 5px; background: #17171d; border: 1px solid var(--tf-line-2);
  border-radius: 9px; box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.tf-menu button { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 7px 9px; border-radius: 6px; font-size: 12px; text-align: left; }
.tf-menu button:hover { background: #24242d; }
.tf-menu button span { color: var(--tf-dim); font-size: 11px; }

/* ---------- 工作区 ---------- */
.tf-workspace {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: 210px 246px minmax(0, 1fr) 196px;
  gap: 1px; background: var(--tf-line);
}
.tf-rail { display: flex; flex-direction: column; min-height: 0; background: var(--tf-panel); }
.tf-rail-hd {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 7px 9px; border-bottom: 1px solid var(--tf-line); background: var(--tf-panel-2);
  font-size: 12px;
}
.tf-rail-title { font-weight: 600; color: var(--tf-hi); }
.tf-rail-title b { font-weight: 400; color: var(--tf-dim); font-size: 11px; margin-left: 4px; }
.tf-density { display: inline-flex; gap: 1px; margin-left: auto; }
.tf-density button { width: 17px; height: 17px; font-size: 10px; color: var(--tf-dim); border-radius: 4px; }
.tf-density button.on { background: #2d2d38; color: var(--tf-hi); }
.tf-collapse { font-size: 11px; color: var(--tf-dim); }

/* 类型浏览器 */
.tf-lib-bd { display: flex; flex-direction: column; min-height: 0; padding: 8px; gap: 7px; }
.tf-search { width: 100%; font-size: 12px; padding: 5px 8px !important; }
.tf-tabs { display: flex; gap: 4px; }
.tf-tabs button {
  flex: 1; padding: 4px 0; font-size: 11px; color: var(--tf-dim);
  background: #101015; border: 1px solid transparent; border-radius: 6px;
}
.tf-tabs button.on { color: var(--tf-hi); background: #24242d; border-color: var(--tf-line-2); }
.tf-tabs i { font-style: normal; opacity: .7; }
.tf-cats { display: flex; flex-wrap: wrap; gap: 4px; max-height: 118px; overflow: auto; padding-right: 2px; }
.tf-cat {
  padding: 3px 7px; font-size: 11px; color: var(--tf-dim);
  background: #12121a; border: 1px solid var(--tf-line); border-radius: 999px;
}
.tf-cat i { font-style: normal; opacity: .45; margin-left: 3px; font-size: 10px; }
.tf-cat.on { color: #1a0d00; background: var(--tf-ac); border-color: var(--tf-ac); font-weight: 600; }
.tf-cat.on i { opacity: .6; }
.tf-thumbs {
  flex: 1; min-height: 0; overflow: auto;
  display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 6px; padding: 2px; align-content: start;
}
.tf-thumb {
  position: relative; padding: 0; border-radius: 8px; overflow: hidden;
  background: #0e0e13; border: 1px solid var(--tf-line);
  display: flex; flex-direction: column;
}
.tf-thumb:hover { border-color: var(--tf-line-2); }
.tf-thumb.sel { border-color: var(--tf-ac); box-shadow: 0 0 0 1px var(--tf-ac) inset; }
.tf-thumb-img { display: block; aspect-ratio: 1; background: #08080b; }
.tf-thumb-img canvas { width: 100%; height: 100%; display: block; }
.tf-thumb-name {
  display: block; padding: 2px 3px 3px; font-size: 9.5px; line-height: 1.2;
  color: var(--tf-dim); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tf-thumb.fav .tf-thumb-name { color: var(--tf-ac); }
.tf-thumb-star {
  position: absolute; top: 2px; right: 3px; font-size: 11px; color: #fff;
  opacity: 0; text-shadow: 0 1px 3px rgba(0,0,0,.9); background: none; border: 0; padding: 0;
}
.tf-thumb:hover .tf-thumb-star, .tf-thumb.fav .tf-thumb-star { opacity: 1; }
.tf-lib-empty { font-size: 11px; color: var(--tf-dim); text-align: center; padding: 16px 6px; }
.tf-lib.folded { display: none; }

/* 图层参数 */
.tf-params-bd { flex: 1; min-height: 0; overflow: auto; padding: 6px 8px 24px; }
.tf-group { border-bottom: 1px solid var(--tf-line); }
.tf-group-hd {
  display: flex; align-items: center; gap: 5px; padding: 7px 2px;
  font-size: 11.5px; font-weight: 600; color: #b9b9c6; cursor: pointer; list-style: none;
}
.tf-group-hd::-webkit-details-marker { display: none; }
.tf-arrow { font-size: 9px; color: var(--tf-dim); transition: transform .15s; }
.tf-group[open] .tf-arrow { transform: rotate(90deg); }
.tf-group-bd { padding: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
.tf-prow { display: flex; flex-direction: column; gap: 2px; }
.tf-prow-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--tf-dim); }
.tf-num {
  width: 62px; text-align: right; font-size: 11px; padding: 2px 5px !important;
  background: #0e0e13 !important; border-radius: 5px !important;
}
.tf-range { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; background: transparent; }
.tf-range::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: #2c2c36; }
.tf-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px; margin-top: -4px;
  border-radius: 50%; background: var(--tf-ac); border: 0;
}
.tf-range::-moz-range-track { height: 3px; background: #2c2c36; border-radius: 3px; }
.tf-range::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--tf-ac); }
.tf-check-row, .tf-select-row {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 11.5px; color: var(--tf-dim);
}
.tf-check-row { justify-content: flex-start; cursor: pointer; }
.tf-check-row input { accent-color: var(--tf-ac); }
.tf-select-row select { flex: 1; max-width: 150px; font-size: 11.5px; }
.tf-btn-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.tf-curve { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--tf-line); display: block; cursor: crosshair; touch-action: none; }
.tf-curve-meta { font-size: 10.5px; color: var(--tf-dim); }
.tf-stops { display: flex; flex-direction: column; gap: 5px; }
.tf-stops-bar {
  position: relative; height: 22px; border-radius: 5px; border: 1px solid var(--tf-line-2); cursor: copy;
}
.tf-stop {
  position: absolute; top: -3px; width: 9px; height: 16px; margin-left: -4.5px;
  border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px #000, 0 1px 3px rgba(0,0,0,.6);
  cursor: grab;
}
.tf-stop.on { outline: 1px solid var(--tf-ac); outline-offset: 2px; }
.tf-stops-meta { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--tf-dim); flex-wrap: wrap; }
.tf-stop-color { width: 26px; height: 20px; padding: 0; border: 1px solid var(--tf-line-2); border-radius: 4px; background: none; }
.tf-tip { font-size: 10.5px; color: var(--tf-dim); line-height: 1.55; margin: 2px 0; }
.tf-empty { font-size: 11.5px; color: var(--tf-dim); text-align: center; padding: 20px 6px; }

/* 舞台 */
.tf-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #0d0d11; }
.tf-stage-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 5px 9px; border-bottom: 1px solid var(--tf-line); background: var(--tf-panel-2);
  font-size: 11px; color: var(--tf-dim);
}
.tf-stage-left, .tf-stage-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tf-stage-right { margin-left: auto; }
.tf-check { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 11px; }
.tf-check input { accent-color: var(--tf-ac); }
.tf-zoom { min-width: 34px; text-align: center; }
.tf-time b { color: var(--tf-hi); font-variant-numeric: tabular-nums; }
.tf-info { color: #6e6e7c; font-variant-numeric: tabular-nums; }
.tf-stage-bd { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.tf-canvas-wrap {
  flex: 1; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center;
  padding: 12px; overflow: hidden;
  background-color: #1b1b20;
  background-image:
    linear-gradient(45deg, #232329 25%, transparent 25%),
    linear-gradient(-45deg, #232329 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #232329 75%),
    linear-gradient(-45deg, transparent 75%, #232329 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.tf-canvas-wrap[data-bg="black"] { background: #000; }
.tf-canvas-wrap[data-bg="white"] { background: #fff; }
.tf-canvas-wrap canvas { display: block; box-shadow: 0 12px 40px rgba(0,0,0,.55); image-rendering: auto; }
.tf-tools {
  position: absolute; top: 10px; right: 10px; display: flex; gap: 2px;
  background: rgba(16,16,20,.86); border: 1px solid var(--tf-line); border-radius: 7px; padding: 2px;
  backdrop-filter: blur(6px);
}
.tf-tools button { width: 22px; height: 22px; display: grid; place-items: center; font-size: 11px; color: var(--tf-dim); border-radius: 5px; }
.tf-tools button.on { background: var(--tf-ac); color: #1a0d00; }
.tf-model {
  width: 42%; max-width: 460px; min-width: 240px; display: flex; flex-direction: column;
  border-left: 1px solid var(--tf-line); background: #0a0a0e; position: relative;
}
.tf-model canvas { flex: 1; width: 100%; height: 100%; object-fit: contain; touch-action: none; }
.tf-model-hd {
  position: absolute; top: 8px; left: 8px; right: 8px; display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--tf-dim);
}
.tf-model-hd select { font-size: 11px; }
.tf-model-hd .tf-btn { margin-left: auto; }

/* 图层 */
.tf-layer-list { flex: 1; min-height: 0; overflow: auto; padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.tf-layer-item {
  display: flex; gap: 5px; padding: 6px 6px 5px; border-radius: 8px;
  background: #101016; border: 1px solid var(--tf-line); cursor: pointer;
}
.tf-layer-item.sel { border-color: var(--tf-ac); background: #16161d; }
.tf-layer-item.is-hidden { opacity: .45; }
.tf-eye { width: 18px; flex: none; font-size: 11px; color: var(--tf-dim); padding-top: 2px; }
.tf-layer-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tf-layer-name-line { display: flex; align-items: center; gap: 4px; }
.tf-lname {
  flex: 1; min-width: 0; font-size: 11.5px; color: var(--tf-hi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tf-lname-input { width: 100%; font-size: 11.5px !important; padding: 1px 4px !important; }
.tf-layer-del { font-size: 12px; color: var(--tf-dim); padding: 0 2px; }
.tf-layer-blend { width: 100%; font-size: 11px; padding: 2px 4px; }
.tf-layer-op { display: flex; align-items: center; gap: 4px; }
.tf-layer-op .tf-range { flex: 1; height: 12px; }
.tf-layer-op span { font-size: 10px; color: var(--tf-dim); min-width: 30px; text-align: right; }
.tf-layers-ft {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px;
  border-top: 1px solid var(--tf-line);
}
.tf-layers-ft button {
  padding: 5px 0; font-size: 11.5px; color: var(--tf-txt);
  background: #16161d; border: 1px solid var(--tf-line); border-radius: 6px;
}
.tf-layers-ft button:hover { background: #20202a; }
.tf-layers-ft button:last-child { grid-column: span 2; }

/* 底部 dock */
.tf-dock { border-top: 1px solid var(--tf-line); background: var(--tf-panel); flex: none; }
.tf-dock-hd { display: flex; align-items: center; gap: 10px; padding: 0 10px; height: 34px; }
.tf-dock-tabs { display: flex; gap: 2px; overflow: auto; }
.tf-dock-tabs button {
  padding: 5px 10px; font-size: 11.5px; color: var(--tf-dim); border-radius: 6px; white-space: nowrap;
}
.tf-dock-tabs button.on { background: #26262f; color: var(--tf-hi); }
.tf-dock-tabs i { font-style: normal; opacity: .55; font-size: 10px; }
.tf-dock-toggle { margin-left: auto; font-size: 11px; color: var(--tf-dim); }
.tf-dock-bd { padding: 10px 12px 14px; border-top: 1px solid var(--tf-line); max-height: 210px; overflow: auto; }
.tf-pane { display: none; gap: 28px; }
.tf-pane.on { display: flex; flex-wrap: wrap; }
.tf-pane-col { display: flex; flex-direction: column; gap: 8px; min-width: 200px; flex: 1; }
.tf-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--tf-dim); }
.tf-row input[type="number"] { width: 74px; }
.tf-row-check { justify-content: flex-start; cursor: pointer; }
.tf-row-check input { accent-color: var(--tf-ac); }
.tf-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 7px; width: 100%; }
.tf-post-item { padding: 6px 8px; border: 1px solid var(--tf-line); border-radius: 7px; background: #101016; }
.tf-post-hd { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--tf-dim); cursor: pointer; }
.tf-post-hd input { accent-color: var(--tf-ac); }
.tf-post-item .tf-range { margin-top: 2px; }
.tf-steps { margin: 0; padding-left: 16px; font-size: 11.5px; color: var(--tf-dim); line-height: 1.9; }
.tf-accent-row { display: flex; gap: 5px; }
.tf-accent-row button {
  width: 20px; height: 20px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 1px #000 inset;
}
.tf-accent-row button.on { outline: 2px solid #fff; outline-offset: 2px; }
.tf-seo {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; opacity: 0; pointer-events: none;
}

/* 弹窗 / 提示 */
.tf-modal {
  position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
  background: rgba(4,4,7,.82); padding: 24px; backdrop-filter: blur(3px);
}
.tf-modal-box {
  max-width: min(92vw, 1080px); max-height: 92vh; overflow: auto;
  background: #101016; border: 1px solid var(--tf-line-2); border-radius: 12px; padding: 14px;
}
.tf-modal-hd { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--tf-dim); margin-bottom: 10px; }
.tf-modal-x { margin-left: auto; font-size: 18px; line-height: 1; color: var(--tf-dim); }
.tf-toast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 14px);
  z-index: 950; padding: 8px 16px; border-radius: 999px;
  background: rgba(20,20,26,.96); border: 1px solid var(--tf-line-2); color: var(--tf-txt);
  font-size: 12px; opacity: 0; pointer-events: none; transition: all .22s;
}
.tf-toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1280px) {
  .tf-workspace { grid-template-columns: 190px 220px minmax(0, 1fr) 176px; }
}
@media (max-width: 1100px) {
  .tf-workspace { grid-template-columns: 176px minmax(0, 1fr) 168px; }
  .tf-params { display: none; }
}
@media (max-width: 860px) {
  .tf-shell { height: auto; min-height: 0; }
  .tf-workspace { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .tf-lib, .tf-layers { max-height: 320px; }
  .tf-stage { min-height: 420px; }
  .tf-tb-right { width: 100%; }
}

/* 贴图工坊 · 对齐参考站补丁（2026-10-31b） */
.tf-shell { --tf-param-tools-h: 34px; }
.tf-params-tools {
  display: flex; align-items: center; gap: 6px; padding: 6px 9px;
  border-bottom: 1px solid var(--tf-line); background: var(--tf-panel-2);
}
.tf-params-tools .tf-search { flex: 1; min-width: 0; font-size: 11.5px; padding: 3px 7px !important; }
.tf-params-tools .tf-btn { flex: none; white-space: nowrap; }
.tf-cols { font-size: 11px; padding: 2px 4px !important; max-width: 62px; }
.tf-search::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ==========================================================================
   模型工坊 · Model Workshop（2026-10-31b）
   深色全屏 3D 工作台：顶栏 / 左侧类型与参数 / 中间视口 / 右侧 UV 与图层 / 底部时间轴
   ========================================================================== */
.mw-body { background: #0b1018; }
.mw-app {
  --mw-ac: #ff6a00;
  --mw-bg: #0b1018;
  --mw-panel: #141c26;
  --mw-panel-2: #1a2532;
  --mw-line: #293747;
  --mw-line-2: #3a4a5e;
  --mw-txt: #e7edf3;
  --mw-dim: #8b9aac;
  --mw-hi: #fff;
  display: flex; flex-direction: column;
  height: calc(100vh - 64px); min-height: 640px; overflow: hidden;
  background: var(--mw-bg); color: var(--mw-txt); font-size: 12px;
}
.mw-app *, .mw-app *::before, .mw-app *::after { box-sizing: border-box; }
/* reset 用 :where() 降为 0 特异性，避免覆盖后续更具体的按钮/下拉外观 */
:where(.mw-app button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(.mw-app select, .mw-app input[type="text"], .mw-app input[type="search"], .mw-app input[type="number"]) {
  font: inherit; color: var(--mw-txt); background: #111823;
  border: 1px solid var(--mw-line); border-radius: 6px; padding: 4px 6px; outline: none;
}
.mw-app select:focus, .mw-app input:focus { border-color: var(--mw-ac); }
.mw-app ::-webkit-scrollbar { width: 8px; height: 8px; }
.mw-app ::-webkit-scrollbar-thumb { background: #2f2f3a; border-radius: 8px; }
.mw-app ::-webkit-scrollbar-track { background: transparent; }

/* ---------- 顶栏 ---------- */
.mw-app-header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 7px 12px; background: #141c26; border-bottom: 1px solid var(--mw-line);
}
.mw-model-actions { display: flex; align-items: center; gap: 8px; }
.mw-project-title { display: flex; align-items: baseline; gap: 8px; }
.mw-proj-name {
  width: 150px; font-size: 13.5px; font-weight: 600; color: var(--mw-hi);
  background: transparent !important; border: 1px solid transparent !important;
}
.mw-proj-name:hover { border-color: var(--mw-line) !important; }
.mw-project-count { font-size: 11px; color: var(--mw-dim); white-space: nowrap; }
.mw-save-status { font-size: 11px; color: #4ec97e; }
.mw-history-controls { display: flex; gap: 4px; }
.mw-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.mw-divider { width: 1px; height: 18px; background: var(--mw-line); }
.mw-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 12px;
  color: var(--mw-txt); background: #243542; border: 1px solid #3a5163;
  border-radius: 7px; white-space: nowrap; transition: background .14s;
}
.mw-btn:hover { background: #2c3d4d; border-color: var(--mw-line-2); }
.mw-btn.icon { min-width: 28px; justify-content: center; }
.mw-btn.subtle { background: transparent; color: var(--mw-dim); }
.mw-btn.subtle:hover { background: #1f1f27; color: var(--mw-txt); }
.mw-btn.primary { background: var(--mw-ac); border-color: var(--mw-ac); color: #1a0d00; font-weight: 600; }
.mw-btn.primary:hover { filter: brightness(1.08); }
.mw-btn.xs { padding: 3px 7px; font-size: 11px; border-radius: 6px; }
.mw-menu-wrap { position: relative; }
.mw-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 240px;
  padding: 5px; background: #18222d; border: 1px solid var(--mw-line-2); border-radius: 9px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.mw-menu button {
  display: flex; justify-content: space-between; gap: 12px; width: 100%;
  padding: 7px 9px; border-radius: 6px; font-size: 12px; text-align: left;
}
.mw-menu button:hover { background: #2c3d4d; }
.mw-menu button span { color: var(--mw-dim); font-size: 11px; }

/* ---------- 工作区 ---------- */
.mw-workspace { flex: 1; min-height: 0; display: flex; }
.mw-panel-splitter { width: 4px; flex: none; cursor: col-resize; background: var(--mw-line); }
.mw-panel-splitter:hover { background: var(--mw-ac); }
.mw-splitter-vertical { cursor: col-resize; }

/* 左侧栏 */
.mw-sidebar {
  width: 268px; flex: none; display: flex; flex-direction: column; min-height: 0;
  background: var(--mw-panel); border-right: 1px solid var(--mw-line); overflow: hidden;
}
.mw-model-types { border-bottom: 1px solid var(--mw-line); display: flex; flex-direction: column; flex: 0 0 auto; max-height: 46%; min-height: 190px; }
.mw-model-types[hidden] { display: none; }
.mw-model-types-heading {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  background: var(--mw-panel-2); border-bottom: 1px solid var(--mw-line);
}
.mw-mod-title { font-size: 13px; font-weight: 700; color: var(--mw-hi); }
.mw-text-btn { margin-left: auto; font-size: 11px; color: var(--mw-dim); }
.mw-text-btn:hover { color: var(--mw-ac); }
.mw-model-types-body { padding: 8px; overflow: auto; min-height: 0; flex: 1; }
/* 类型网格区在面板内独立滚动，避免挤压下方参数检查器 */
.mw-model-browser { display: flex; flex-direction: column; min-height: 0; }
.mw-model-type-grid { flex: 1; min-height: 0; overflow: auto; padding-right: 2px; }
.mw-model-module-switch { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.mw-model-module-switch button {
  padding: 3px 8px; font-size: 11px; color: var(--mw-dim);
  background: #131b25; border: 1px solid var(--mw-line); border-radius: 999px;
}
.mw-model-module-switch button.active { color: #1a0d00; background: var(--mw-ac); border-color: var(--mw-ac); font-weight: 600; }
.mw-search { width: 100%; font-size: 11.5px; padding: 4px 8px !important; margin-bottom: 7px; }
.mw-cat-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.mw-cat {
  padding: 3px 7px; font-size: 11px; color: var(--mw-dim);
  background: #131b25; border: 1px solid var(--mw-line); border-radius: 999px;
}
.mw-cat i { font-style: normal; opacity: .45; font-size: 10px; margin-left: 3px; }
.mw-cat.on { color: #1a0d00; background: var(--mw-ac); border-color: var(--mw-ac); font-weight: 600; }
.mw-cat.on i { opacity: .6; }
.mw-model-type-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
}
.mw-type-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px;
  background: #111823; border: 1px solid var(--mw-line); border-radius: 8px; overflow: hidden;
}
.mw-type-card:hover { border-color: var(--mw-ac); }
.mw-type-icon { display: block; width: 100%; }
.mw-type-icon canvas { width: 100%; height: auto; display: block; border-radius: 5px; }
.mw-type-name { font-size: 10.5px; color: var(--mw-dim); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mw-lib-empty { font-size: 11.5px; color: var(--mw-dim); text-align: center; padding: 14px 6px; }
.mw-mod-box { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.mw-mod-note { font-size: 11px; color: var(--mw-dim); line-height: 1.6; margin: 0; }

/* 检查器 */
.mw-inspector { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mw-inspector-title {
  display: flex; align-items: center; gap: 7px; padding: 7px 9px;
  background: var(--mw-panel-2); border-bottom: 1px solid var(--mw-line);
}
.mw-tiny-label { font-size: 10.5px; color: var(--mw-dim); letter-spacing: .3px; }
.mw-layer-name {
  flex: 1; min-width: 0; font-size: 12px; color: var(--mw-hi);
  background: transparent !important; border: 1px solid transparent !important;
}
.mw-layer-name:hover, .mw-layer-name:focus { border-color: var(--mw-line) !important; }
.mw-model-kind { font-size: 10.5px; color: var(--mw-ac); white-space: nowrap; }
.mw-inspector-body { flex: 1; min-height: 0; overflow: auto; padding: 8px 9px 20px; }
.mw-inspector-module-title { font-size: 12px; font-weight: 700; color: #bcc8d6; padding: 4px 0 6px; }
.mw-param-sub { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.mw-sub-head { font-size: 10.5px; color: #6f6f7d; padding-top: 4px; border-top: 1px dashed var(--mw-line); }
.mw-row { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mw-dim); }
.mw-row-label { min-width: 66px; flex: none; }
.mw-row .mw-val { min-width: 50px; text-align: right; color: var(--mw-hi); font-variant-numeric: tabular-nums; }
.mw-row select { flex: 1; min-width: 0; font-size: 11.5px; }
.mw-row input[type="range"] { flex: 1; min-width: 0; }
.mw-app input[type="range"] { -webkit-appearance: none; appearance: none; height: 14px; background: transparent; }
.mw-app input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: #2f3a49; }
.mw-app input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px; margin-top: -4px; border-radius: 50%;
  background: var(--mw-ac); border: 0;
}
.mw-app input[type="range"]::-moz-range-track { height: 3px; background: #2f3a49; border-radius: 3px; }
.mw-app input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--mw-ac); }
.mw-kf-btn { width: 18px; height: 18px; flex: none; font-size: 10px; color: #5a5a68; border-radius: 4px; }
.mw-kf-btn:hover { color: var(--mw-ac); background: #202b3a; }
.mw-row-check { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--mw-dim); margin: 0; }
.mw-row-check input { accent-color: var(--mw-ac); }
.mw-btn-row { display: flex; gap: 6px; flex-wrap: wrap; }
.mw-texture-image-wrap { display: flex; align-items: center; gap: 8px; }
.mw-texture-image-wrap canvas { width: 46px; height: 46px; border: 1px solid var(--mw-line); border-radius: 6px; background: #0d0d12; }
.mw-texture-image-status { font-size: 11px; color: var(--mw-dim); }
.mw-texture-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.mw-sidebar-footer {
  display: flex; align-items: center; gap: 6px; padding: 6px 9px; font-size: 10.5px;
  color: var(--mw-dim); border-top: 1px solid var(--mw-line);
}
.mw-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ec97e; box-shadow: 0 0 6px #4ec97e; }
.mw-inline-uv-heading { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: #bcc8d6; padding: 6px 0 4px; }
.mw-param-module, .mw-texture-settings { border-top: 1px solid var(--mw-line); padding-bottom: 8px; }

/* 舞台 */
.mw-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #0d0d11; }
.mw-stage-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 12px;
  background: #17232e; border-bottom: 1px solid var(--mw-line);
}
.mw-inspection-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mw-inspection-group { display: flex; align-items: center; gap: 6px; }
.mw-inspection-group-label { font-size: 11px; color: var(--mw-dim); }
.mw-inspection-select { font-size: 11.5px; padding: 3px 6px; min-width: 96px; }
.mw-wire-menu { position: relative; }
.mw-wire-menu-toggle { padding: 3px 7px; font-size: 11px; color: var(--mw-txt); background: #243542; border: 1px solid #3a5163; border-radius: 6px; }
.mw-wire-menu-panel {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: 190px; padding: 8px;
  background: #18222d; border: 1px solid var(--mw-line-2); border-radius: 9px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.mw-wire-mode-options { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.mw-wire-mode-options button { padding: 5px 8px; font-size: 11.5px; color: var(--mw-dim); border-radius: 6px; text-align: left; }
.mw-wire-mode-options button.on { color: var(--mw-hi); background: #293747; }
.mw-wire-opacity-control { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--mw-dim); }
.mw-wire-opacity-control input[type="range"] { flex: 1; }
.mw-wire-opacity-control span { min-width: 32px; text-align: right; }
.mw-inspection-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--mw-dim); cursor: pointer; }
.mw-inspection-toggle input { accent-color: var(--mw-ac); }
.mw-inspection-button { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 8px; font-size: 11px; color: #bcd0df; background: #243542; border: 1px solid #3a5163; border-radius: 6px; }
.mw-inspection-button:hover { background: #2c3d4d; }
.mw-button-chevron { font-size: 9px; opacity: .7; }
.mw-camera-group { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.mw-fit-button { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 8px; font-size: 11px; color: #bcd0df; background: #243542; border: 1px solid #3a5163; border-radius: 6px; }
.mw-key { font-size: 10px; color: var(--mw-dim); border: 1px solid var(--mw-line); border-radius: 3px; padding: 0 3px; }
.mw-view-switch, .mw-projection-toggle { display: flex; gap: 2px; }
.mw-view-switch button, .mw-projection-toggle button {
  padding: 3px 8px; font-size: 11px; color: var(--mw-dim); background: #243542; border: 1px solid #3a5163; border-radius: 6px;
}
.mw-view-switch button:hover, .mw-projection-toggle button:hover { background: #2c3d4d; color: var(--mw-txt); }

.mw-viewport { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.mw-viewport canvas { display: block; width: 100%; height: 100%; }
.mw-preview-info {
  position: absolute; top: 9px; left: 10px; display: flex; gap: 10px; pointer-events: none;
  font-size: 11px; color: var(--mw-dim); text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.mw-orientation { position: absolute; bottom: 34px; left: 12px; display: flex; gap: 8px; pointer-events: none; }
.mw-axis { font-size: 10px; font-weight: 700; opacity: .75; }
.mw-axis-x { color: #ff6a6a; } .mw-axis-y { color: #7ee787; } .mw-axis-z { color: #6aa9ff; }
.mw-viewport-hint { position: absolute; bottom: 9px; left: 12px; margin: 0; font-size: 10.5px; color: #6c7f94; pointer-events: none; }
.mw-empty-stage {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-size: 13px; color: #6c7f94;
}
.mw-environment-panel {
  position: absolute; top: 8px; right: 8px; width: 250px; padding: 10px; z-index: 20;
  background: rgba(20,20,26,.96); border: 1px solid var(--mw-line-2); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 8px;
}
.mw-environment-heading { display: flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--mw-hi); }
.mw-modal-x { margin-left: auto; font-size: 18px; line-height: 1; color: var(--mw-dim); }
.mw-environment-field, .mw-environment-slider { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mw-dim); }
.mw-environment-field select { flex: 1; }
.mw-environment-slider { flex-direction: column; align-items: stretch; gap: 3px; }
.mw-environment-slider span { color: var(--mw-hi); font-variant-numeric: tabular-nums; }
.mw-environment-checks { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--mw-dim); }
.mw-environment-checks label { display: flex; align-items: center; gap: 5px; }
.mw-environment-checks input { accent-color: var(--mw-ac); }
.mw-custom-environment { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--mw-dim); }
.mw-environment-footer { border-top: 1px solid var(--mw-line); padding-top: 8px; }

/* 右侧 UV + 图层 */
.mw.uv-dock { width: 214px; flex: none; display: flex; flex-direction: column; min-height: 0; background: var(--mw-panel); border-left: 1px solid var(--mw-line); }
.mw-inline-uv { padding: 8px; border-bottom: 1px solid var(--mw-line); }
.mw-uv-canvas-wrap { display: flex; justify-content: center; }
#mwUvCanvas { width: 100%; max-width: 190px; height: auto; border-radius: 6px; border: 1px solid var(--mw-line); cursor: crosshair; touch-action: none; }
.mw-uv-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 7px; }
.mw-uv-tools button { padding: 4px 0; font-size: 11px; color: var(--mw-dim); background: #17212c; border: 1px solid var(--mw-line); border-radius: 6px; }
.mw-uv-tools button.on { color: #1a0d00; background: var(--mw-ac); border-color: var(--mw-ac); font-weight: 600; }
.mw-layers { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mw-layer-actions { margin-left: auto; display: flex; gap: 4px; }
.mw-layers-count { margin-left: 4px; font-size: 11px; color: var(--mw-dim); }
.mw-layer-list { flex: 1; min-height: 0; overflow: auto; padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.mw-layer-item {
  display: flex; align-items: center; gap: 5px; padding: 5px 6px;
  background: #141c26; border: 1px solid var(--mw-line); border-radius: 8px; cursor: pointer;
}
.mw-layer-item.sel { border-color: var(--mw-ac); background: #17171e; }
.mw-layer-item.is-hidden { opacity: .45; }
.mw-layer-eye { width: 16px; flex: none; font-size: 11px; color: var(--mw-dim); }
.mw-layer-name { flex: 1; min-width: 0; font-size: 11.5px; color: var(--mw-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-layer-name-input { width: 100%; font-size: 11.5px !important; padding: 1px 4px !important; }
.mw-layer-stat { font-size: 10px; color: #5f5f6c; font-variant-numeric: tabular-nums; }
.mw-layer-del { font-size: 13px; color: var(--mw-dim); padding: 0 2px; }
.mw-layer-del:hover { color: #ff6b6b; }
.mw-layers-foot { padding: 6px; border-top: 1px solid var(--mw-line); display: flex; flex-direction: column; gap: 5px; }
.mw-layer-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mw-layer-btns button { padding: 4px 0; font-size: 11px; color: var(--mw-txt); background: #17212c; border: 1px solid var(--mw-line); border-radius: 6px; }
.mw-layer-btns button:hover { background: #202b3a; }

/* 底部：动画 */
.mw-keyframe-mode-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 5px 12px; background: #141c26; border-top: 1px solid var(--mw-line);
}
.mw-keyframe-mode-toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 11.5px;
  color: var(--mw-txt); background: #243542; border: 1px solid #3a5163; border-radius: 999px;
}
.mw-keyframe-mode-toggle.on { color: #1a0d00; background: var(--mw-ac); border-color: var(--mw-ac); }
.mw-keyframe-mode-light { width: 7px; height: 7px; border-radius: 50%; background: #4a5a6e; }
.mw-keyframe-mode-toggle.on .mw-keyframe-mode-light { background: #1a0d00; box-shadow: 0 0 6px rgba(255,255,255,.6); }
.mw-keyframe-mode-state { font-size: 11.5px; color: var(--mw-hi); }
.mw-keyframe-mode-note { font-size: 11px; color: var(--mw-dim); }
.mw-fracture-timeline { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.mw-fx-transport-heading { font-size: 11px; font-weight: 700; color: #bcc8d6; }
.mw-fx-view-modes { display: flex; gap: 2px; }
.mw-fx-view-modes button { padding: 3px 8px; font-size: 11px; color: var(--mw-dim); background: #243542; border: 1px solid #3a5163; border-radius: 6px; }
.mw-fx-view-modes button.on { color: #1a0d00; background: var(--mw-ac); border-color: var(--mw-ac); }
.mw-fx-job-status { font-size: 11px; color: var(--mw-dim); min-width: 80px; }

.mw-keyframe-timeline { padding: 8px 12px 10px; background: var(--mw-panel); border-top: 1px solid var(--mw-line); display: flex; flex-direction: column; gap: 7px; }
.mw-keyframe-heading { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--mw-dim); }
.mw-kf-field { display: inline-flex; align-items: center; gap: 5px; }
.mw-kf-field input { width: 62px; }
.mw-keyframe-transport { display: flex; align-items: center; gap: 5px; }
.mw-keyframe-transport button {
  padding: 4px 9px; font-size: 11.5px; color: var(--mw-txt); background: #1a2532;
  border: 1px solid var(--mw-line); border-radius: 6px;
}
.mw-keyframe-transport button.on { color: #1a0d00; background: var(--mw-ac); border-color: var(--mw-ac); }
.mw-keyframe-transport .mw-play { min-width: 74px; justify-content: center; }
.mw-keyframe-sheet { display: flex; flex-direction: column; gap: 4px; }
.mw-keyframe-overview, .mw-keyframe-track {
  position: relative; height: 22px; background: #141c26;
  border: 1px solid var(--mw-line); border-radius: 6px; overflow: hidden;
}
.mw-keyframe-rail { position: absolute; inset: 0; cursor: pointer; }
.mw-keyframe-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--mw-ac); pointer-events: none; }
.mw-keyframe-markers i, .mw-kf-marker { position: absolute; top: 7px; width: 7px; height: 7px; margin-left: -3.5px; background: var(--mw-ac); transform: rotate(45deg); }
.mw-kf-diamond { position: absolute; top: 6px; width: 8px; height: 8px; margin-left: -4px; background: var(--mw-ac); transform: rotate(45deg); border-radius: 1px; }
.mw-keyframe-track { height: 20px; cursor: pointer; }
.mw-keyframe-empty { font-size: 11px; color: var(--mw-dim); margin: 0; }

/* 弹窗 */
.mw-modal { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: rgba(4,4,7,.82); padding: 24px; backdrop-filter: blur(3px); }
.mw-modal-box { max-width: min(92vw, 760px); max-height: 90vh; overflow: auto; background: #141c26; border: 1px solid var(--mw-line-2); border-radius: 12px; padding: 14px; }
.mw-modal-hd { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--mw-dim); margin-bottom: 10px; }
.mw-modal-body-inner { display: flex; flex-direction: column; gap: 10px; }
.mw-export-col { display: flex; flex-direction: column; gap: 6px; }
.mw-export-label { font-size: 11.5px; font-weight: 700; color: #bcc8d6; }
.mw-export-col select[size] { padding: 4px; font-size: 12px; }
.mw-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.mw-preset-card { display: flex; flex-direction: column; gap: 3px; padding: 8px; background: #17212c; border: 1px solid var(--mw-line); border-radius: 8px; text-align: left; }
.mw-preset-card:hover { border-color: var(--mw-ac); }
.mw-preset-name { font-size: 12px; color: var(--mw-hi); }
.mw-preset-meta { font-size: 10.5px; color: var(--mw-dim); }
.mw-steps { margin: 0; padding-left: 18px; font-size: 12px; color: var(--mw-dim); line-height: 1.9; }
.mw-toast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 14px); z-index: 950;
  padding: 8px 16px; border-radius: 999px; background: rgba(20,20,26,.96);
  border: 1px solid var(--mw-line-2); color: var(--mw-txt); font-size: 12px;
  opacity: 0; pointer-events: none; transition: all .22s;
}
.mw-toast.on { opacity: 1; transform: translate(-50%, 0); }
.mw-seo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; pointer-events: none; }

/* ---- 类型浏览器：列数 / 筛选标签 / 分类 / 数量 / 收藏 ---- */
.mw-cols-select { font-size: 11px; padding: 2px 5px; min-width: 64px; }
.mw-browser-filter-tabs { display: flex; gap: 4px; margin: 2px 0 7px; }
.mw-browser-filter-tabs button {
  flex: 1; padding: 4px 0; font-size: 11px; color: var(--mw-dim);
  background: #17212c; border: 1px solid var(--mw-line); border-radius: 6px;
}
.mw-browser-filter-tabs button.active { color: #1a0d00; background: var(--mw-ac); border-color: var(--mw-ac); font-weight: 600; }
.mw-type-select-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.mw-type-select-row .mw-tiny-label { flex: none; }
.mw-type-select-row select { flex: 1; min-width: 0; font-size: 11.5px; }
.mw-browser-count { font-size: 11px; color: var(--mw-dim); margin: 2px 0 7px; }
.mw-cat-row { display: none; }  /* 已改为 select，保留兼容 */
.mw-type-card { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 5px; background: #111823; border: 1px solid var(--mw-line); border-radius: 8px; text-align: center; }
.mw-type-card:hover { border-color: var(--mw-ac); }
.mw-type-fav { position: absolute; top: 3px; right: 4px; font-size: 11px; line-height: 1; color: #4a5a6e; opacity: .8; cursor: pointer; z-index: 2; }
.mw-type-fav.on { color: #ff5d8f; opacity: 1; }

/* ---- 视口工具栏：坐标轴 / 顶点色 ---- */
.mw-axis-system { display: inline-flex; align-items: center; gap: 4px; }
.mw-axis-system select { font-size: 11px; padding: 2px 5px; }
.mw-inspection-button.on { color: #1a0d00; background: var(--mw-ac); border-color: var(--mw-ac); font-weight: 600; }

/* ---- 参数面板：内联数字框 ---- */
.mw-num-inline { width: 52px; font-size: 11px; padding: 1px 4px; text-align: right; }
.mw-row label.mw-num-inline { min-width: 52px; }

/* ---- UV 设置：选区 ---- */
.mw-uv-select-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--mw-dim); }
.mw-uv-select-row select { flex: 1; min-width: 0; font-size: 11px; }

/* ---- 材质与贴图通道 ---- */
.mw-tex-channels { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.mw-tex-channel-head { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: #bcc8d6; font-weight: 600; }
.mw-tex-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 6px; background: #141c26; border: 1px solid var(--mw-line); border-radius: 8px; }
.mw-tex-slot-name { font-size: 11.5px; color: var(--mw-hi); min-width: 52px; }
.mw-tex-slot-uv { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--mw-dim); }
.mw-tex-slot-uv select { font-size: 11px; padding: 1px 4px; }
.mw-tex-add-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.mw-tex-add-row select { font-size: 11px; padding: 2px 5px; flex: 1; min-width: 90px; }

/* ---- 顶部新按钮高亮态 ---- */
.mw-btn.subtle.on { color: var(--mw-ac); }

/* ---- UV 编辑器（浮窗 / Dock 通用，对齐参考范例） ---- */
.mw-uv-dock-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mw-uv-editor { display: flex; flex-direction: column; gap: 8px; color: var(--mw-txt); font-size: 12px; }
.mw-uv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.mw-uv-selmode, .mw-uv-toolbar select { font-size: 11px; padding: 3px 5px; background: #141c26; color: var(--mw-txt); border: 1px solid var(--mw-line); border-radius: 6px; }
.mw-uv-selcount { font-size: 11px; color: var(--mw-dim); min-width: 30px; }
.mw-uv-toolbtns { display: inline-flex; gap: 3px; }
.mw-uv-toolbtns button, .mw-btn.xs { font-size: 11px; padding: 3px 8px; background: #16202b; color: var(--mw-txt); border: 1px solid var(--mw-line); border-radius: 6px; cursor: pointer; }
.mw-uv-toolbtns button.on, .mw-btn.xs.on { background: var(--mw-ac); color: #fff; border-color: var(--mw-ac); }
.mw-uv-canvas-wrap { background: #0b0d12; border: 1px solid var(--mw-line); border-radius: 8px; overflow: hidden; }
.mw-uv-canvas-wrap canvas { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; }
.mw-uv-panels { display: flex; flex-direction: column; gap: 4px; }
.mw-uv-panel { border: 1px solid var(--mw-line); border-radius: 8px; background: #111823; }
.mw-uv-panel > summary { cursor: pointer; padding: 5px 9px; font-size: 11.5px; color: var(--mw-hi); font-weight: 600; list-style: none; }
.mw-uv-panel > summary::-webkit-details-marker { display: none; }
.mw-uv-panel > summary::before { content: "▸"; margin-right: 6px; color: var(--mw-dim); }
.mw-uv-panel[open] > summary::before { content: "▾"; }
.mw-uv-panel > div, .field-grid { padding: 6px 9px 9px; display: flex; flex-direction: column; gap: 6px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.mw-row { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.mw-row-label { flex: 1; color: var(--mw-dim); white-space: nowrap; }
.mw-row input[type=range] { flex: 1.4; min-width: 0; }
.mw-val { width: 34px; text-align: right; color: var(--mw-hi); font-variant-numeric: tabular-nums; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
.quick-grid button, .uv-action-row button { font-size: 11px; padding: 5px 6px; background: #16202b; color: var(--mw-txt); border: 1px solid var(--mw-line); border-radius: 6px; cursor: pointer; }
.uv-action-row { display: flex; gap: 5px; margin-top: 6px; }
.uv-action-row button.on { background: var(--mw-ac); color: #fff; border-color: var(--mw-ac); }
.uv-channel-panel { padding: 6px 9px 9px; display: flex; flex-direction: column; gap: 8px; }
.uv-channel-row { display: flex; align-items: center; gap: 6px; }
.uv-channel-row label { font-size: 11px; color: var(--mw-dim); }
.uv-channel-row select { flex: 1; font-size: 11px; padding: 3px 5px; background: #141c26; color: var(--mw-txt); border: 1px solid var(--mw-line); border-radius: 6px; }
.uv-projection-options { display: flex; flex-wrap: wrap; gap: 10px; }
.uv-projection-options label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--mw-dim); }
.uv-projection-options select { font-size: 11px; padding: 3px 5px; background: #141c26; color: var(--mw-txt); border: 1px solid var(--mw-line); border-radius: 6px; }

/* 浮窗 */
.uv-floating-window { position: fixed; z-index: 90; min-width: 320px; min-height: 260px; background: #0e141d; border: 1px solid var(--mw-line); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; overflow: hidden; }
.uv-window-heading { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #16202b; border-bottom: 1px solid var(--mw-line); cursor: move; user-select: none; }
.uv-window-grip { width: 12px; height: 12px; border-radius: 3px; background: var(--mw-ac); opacity: .8; flex: 0 0 auto; }
.uv-floating-window h2 { font-size: 12.5px; margin: 0; color: var(--mw-hi); flex: 1; }
.uv-floating-window [data-uv-window-status] { font-size: 11px; color: var(--mw-dim); }
.uv-window-body { flex: 1; overflow: auto; padding: 10px; }
.uv-window-resize { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, var(--mw-dim) 50%, var(--mw-dim) 60%, transparent 60%, transparent 75%, var(--mw-dim) 75%, var(--mw-dim) 85%, transparent 85%); border: none; }

/* PNG 导出对话框 */
.uv-png-dialog { border: 1px solid var(--mw-line); border-radius: 12px; background: #0e141d; color: var(--mw-txt); max-width: 720px; padding: 0; }
.uv-png-dialog::backdrop { background: rgba(0,0,0,.55); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--mw-line); }
.dialog-heading h2 { margin: 0; font-size: 14px; color: var(--mw-hi); }
.uv-png-layout { display: flex; gap: 14px; padding: 14px; flex-wrap: wrap; }
.uv-png-preview { flex: 1 1 320px; min-width: 280px; background: #fff; border: 1px solid var(--mw-line); border-radius: 8px; overflow: hidden; }
.uv-png-preview canvas { display: block; width: 100%; height: auto; }
.uv-png-options { flex: 0 0 220px; display: flex; flex-direction: column; gap: 8px; }
.dialog-field { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--mw-dim); }
.dialog-field select, .dialog-field input { font-size: 12px; padding: 4px 6px; background: #141c26; color: var(--mw-txt); border: 1px solid var(--mw-line); border-radius: 6px; }
.png-dimensions { display: flex; gap: 8px; }
.png-dimensions label { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--mw-dim); }

@media (max-width: 1280px) {
  .mw-sidebar { width: 240px; }
  .mw.uv-dock { width: 190px; }
}
@media (max-width: 1024px) {
  .mw.uv-dock { display: none; }
  .mw-splitter-vertical { display: none; }
}
@media (max-width: 860px) {
  .mw-app { height: auto; min-height: 0; }
  .mw-workspace { flex-direction: column; }
  .mw-sidebar { width: 100%; max-height: none; border-right: 0; border-bottom: 1px solid var(--mw-line); }
  .mw-stage { min-height: 460px; }
  .mw-header-actions { width: 100%; margin-left: 0; }
}