/* ============================================================
   Axlol 5 · 群聊工作台样式
   布局：点头像打开的左侧抽屉｜中间群聊（仿 IG / 微信）｜右侧工作台面板
   ============================================================ */
:root { --fs: 1; }
:root[data-fs="s"] { --fs: .9; }
:root[data-fs="l"] { --fs: 1.15; }
:root[data-fs="xl"] { --fs: 1.3; }
:root {
  --bg: #f7f6f8;
  --side: #f1eff3;
  --panel: #fbfafc;
  --surface: #ffffff;
  --surface-2: #f3f1f5;
  --surface-3: #ebe8ee;
  --line: #e7e4ea;
  --line-2: #d8d4de;
  --fg: #1d1a22;
  --fg-2: #4d4856;
  --fg-3: #7a7486;
  --accent: #e5447d;
  --accent-ink: #bf2a60;
  --accent-soft: #fdecf3;
  --on-accent: #ffffff;
  --ok: #188f60; --ok-soft: #e5f5ee;
  --warn: #a8701a; --warn-soft: #fbf2e2;
  --err: #cf3b45; --err-soft: #fcecee;
  --info: #3b72e8; --info-soft: #ebf1fe;
  --code-bg: #f6f4f8;
  --bubble: #efedf2;
  --bubble-me: linear-gradient(135deg, #ff6fa3 0%, #e5447d 60%, #c94f9e 100%);
  --at: #6a4ee8;
  --overlay: rgba(24, 18, 30, .38);
  --shadow-1: 0 1px 2px rgba(30, 20, 40, .06), 0 0 0 1px rgba(30, 20, 40, .02);
  --shadow-2: 0 10px 30px -10px rgba(30, 20, 40, .22), 0 2px 8px rgba(30, 20, 40, .06);
  --shadow-3: 0 24px 60px -12px rgba(30, 20, 40, .32);
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SF Mono", "Cascadia Code", "Fira Code", Menlo, Consolas, "Liberation Mono", monospace;
  --r-sm: 6px; --r: 9px; --r-lg: 14px; --r-xl: 18px;
    --panel-w: 480px;
  --top-h: 48px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141217; --side: #100f13; --panel: #17151b; --surface: #1d1b22; --surface-2: #24212a; --surface-3: #2c2833;
    --line: #2a2731; --line-2: #3a3642; --fg: #f1eff5; --fg-2: #bfb9ca; --fg-3: #958ea4;
    --accent: #f25f99; --accent-ink: #ff8ab6; --accent-soft: rgba(242, 95, 153, .14); --on-accent: #ffffff;
    --ok: #3ec68b; --ok-soft: rgba(62, 198, 139, .13); --warn: #e0a54a; --warn-soft: rgba(224, 165, 74, .13);
    --err: #f06a72; --err-soft: rgba(240, 106, 114, .13); --info: #6f9cff; --info-soft: rgba(111, 156, 255, .13);
    --code-bg: #19171d; --overlay: rgba(0, 0, 0, .55); --bubble: #27242d; --bubble-me: linear-gradient(135deg, #ff6fa3 0%, #e5447d 60%, #b74fa6 100%); --at: #a993ff; 
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 10px 30px -10px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04); --shadow-3: 0 24px 60px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .05);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141217; --side: #100f13; --panel: #17151b; --surface: #1d1b22; --surface-2: #24212a; --surface-3: #2c2833;
  --line: #2a2731; --line-2: #3a3642; --fg: #f1eff5; --fg-2: #bfb9ca; --fg-3: #958ea4;
  --accent: #f25f99; --accent-ink: #ff8ab6; --accent-soft: rgba(242, 95, 153, .14); --on-accent: #ffffff;
  --ok: #3ec68b; --ok-soft: rgba(62, 198, 139, .13); --warn: #e0a54a; --warn-soft: rgba(224, 165, 74, .13);
  --err: #f06a72; --err-soft: rgba(240, 106, 114, .13); --info: #6f9cff; --info-soft: rgba(111, 156, 255, .13);
  --code-bg: #19171d; --overlay: rgba(0, 0, 0, .55); --bubble: #27242d; --bubble-me: linear-gradient(135deg, #ff6fa3 0%, #e5447d 60%, #b74fa6 100%); --at: #a993ff; 
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 10px 30px -10px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04); --shadow-3: 0 24px 60px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .05);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overscroll-behavior: none; }
/* 微信、iPhone 横屏时不要自己把字放大（App 有自己的字体大小设置）：放大会让整页重新排版，一进来就抖一下 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--bg); color: var(--fg); font: calc(15px * var(--fs))/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow: hidden; }
#app { height: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ico { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle; }
.mono { font-family: var(--mono); }
.muted { color: var(--fg-3); }
.small { font-size: calc(13.5px * var(--fs)); }
.grow { flex: 1; }
kbd { font: calc(11px * var(--fs)) var(--mono); color: var(--fg-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--fg-3); }
::-webkit-scrollbar-track { background: transparent; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; } }

/* ---------- 启动 ---------- */
.boot { height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--fg-3); }
.boot-logo { width: 64px; height: 64px; border-radius: 18px; box-shadow: var(--shadow-2); animation: bob 1.6s ease-in-out infinite; }
.boot-name { font-weight: 700; font-size: calc(18px * var(--fs)); color: var(--fg); letter-spacing: .5px; }
@keyframes bob { 50% { transform: translateY(-4px); } }


/* ---------- 外壳 ---------- */
.shell { --dr-w: 340px; display: grid; grid-template-columns: 0 minmax(0, 1fr) 0 0; height: 100%; position: relative; }
.shell.panel-on { grid-template-columns: 0 minmax(0, 1fr) 0 var(--panel-w); }
.shell.drawer-pinned { grid-template-columns: var(--dr-w) minmax(0, 1fr) 0 0; }
.shell.drawer-pinned.panel-on { grid-template-columns: var(--dr-w) minmax(0, 1fr) 0 var(--panel-w); }
.shell.resizing { cursor: col-resize; user-select: none; }
.shell.resizing iframe { pointer-events: none; }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); grid-column: 2; }
.panel { display: none; background: var(--panel); border-left: 1px solid var(--line); min-width: 0; min-height: 0; flex-direction: column; grid-column: 4; }
.panel-on .panel { display: flex; }
.panel-resizer { position: relative; z-index: 5; grid-column: 3; }
.panel-on .panel-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: -4px; width: 8px; cursor: col-resize; }
.panel-on .panel-resizer:hover::after { background: linear-gradient(90deg, transparent 3px, var(--accent) 3px 5px, transparent 5px); }

/* 头像 */
.av { display: inline-flex; border-radius: 50%; overflow: hidden; flex: none; width: 36px; height: 36px; background: var(--surface-2); }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.lg { width: 52px; height: 52px; }
.av.xl { width: 88px; height: 88px; }
.av.all { align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-ink); }
/* 群头像：一团大小不一的泡泡，底下垫一块不规则的渐变色块 */
.av-team { position: relative; flex: none; display: inline-block; width: var(--s); height: var(--s); }
.av-team::before { content: ""; position: absolute; inset: 6%; border-radius: 58% 42% 55% 45% / 46% 58% 42% 54%; background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #ffb1cd 0%, #d6c2ff 52%, #a9ecd9 100%); rotate: -8deg; }
:root[data-theme="dark"] .av-team::before { background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #6a2c52 0%, #3d3478 52%, #1d5a52 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .av-team::before { background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #6a2c52 0%, #3d3478 52%, #1d5a52 100%); } }
.av-team img { position: absolute; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 max(1px, calc(var(--s) * .025)) var(--surface), 0 1px 4px -1px rgba(0, 0, 0, .25); }
/* 欢迎页、群资料里的大头像：泡泡各自轻轻浮动 */
.welcome > .av-team img, .ci-head .av-team img { animation: atBob 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
@keyframes atBob { 50% { translate: 0 calc(var(--s) * -.025); } }
@media (prefers-reduced-motion: reduce) { .av-team img { animation: none !important; } }
.av-btn { border-radius: 50%; display: inline-flex; }

/* ---------- 左侧抽屉 ---------- */
.drawer { position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: var(--dr-w); max-width: 88vw; background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; transform: translateX(-102%); transition: transform .24s cubic-bezier(.3, .8, .3, 1); box-shadow: var(--shadow-3); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); }
.drawer-open .drawer { transform: none; }
.drawer-pinned .drawer { position: relative; grid-column: 1; grid-row: 1; transform: none; box-shadow: none; max-width: none; z-index: 1; }
.drawer-back { display: none; }
.drawer-open:not(.drawer-pinned) .drawer-back { display: block; position: fixed; inset: 0; z-index: 55; background: var(--overlay); animation: fade .2s; }
.dr-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 56px; padding: 8px 10px 4px 22px; }
.dr-head .dr-brand { font-size: calc(16px * var(--fs)); gap: 9px; }
.dr-head .dr-brand img { width: 26px; height: 26px; border-radius: 8px; box-shadow: 0 4px 12px -6px rgba(224, 69, 123, .6); }
.dr-head-acts { display: flex; gap: 2px; }
/* 底部固定的「我」 */
.dr-foot { flex: none; display: flex; align-items: center; gap: 4px; padding: 8px 10px 10px; border-top: 1px solid var(--line); background: var(--side); }
.dr-me { flex: 1; display: flex; align-items: center; gap: 11px; padding: 7px 10px 7px 8px; border-radius: var(--r-lg); text-align: left; min-width: 0; transition: background .15s; }
.dr-me:hover { background: var(--surface-2); }
.dr-me:active { transform: scale(.98); }
.dr-me .av { width: 40px; height: 40px; box-shadow: 0 0 0 2px var(--side), 0 0 0 3.5px var(--accent); }
.dr-me-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.dr-me-text b { font-size: calc(16.5px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-me-st { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13px * var(--fs)); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-me-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-3); flex: none; }
.dr-me-st.ok i { background: var(--ok); }
.dr-me-st.busy { color: var(--accent-ink); }
.dr-me-st.busy i { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.dr-me-st.off i { background: var(--err); }
.dr-me-st.wait i { background: var(--warn); animation: pulse 1.2s infinite; }
.dr-edit { width: 15px; height: 15px; color: var(--fg-3); flex: none; }
@keyframes pulse { 50% { opacity: .35; } }
.dr-scroll { flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 8px; }
.dr-sec { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 6px 22px; font-size: calc(13px * var(--fs)); color: var(--fg-3); font-weight: 600; letter-spacing: .5px; }
.dr-search { padding: 0 12px 6px; }
.chat-list { display: grid; gap: 2px; padding: 0 8px; }
.chat-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-lg); text-align: left; width: 100%; min-width: 0; }
.chat-row:hover { background: var(--surface-2); }
.chat-row.active { background: var(--surface); box-shadow: var(--shadow-1); }
.cr-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cr-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cr-top b { font-weight: 600; font-size: calc(16.5px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-top em { font-style: normal; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); margin-left: auto; white-space: nowrap; }
.cr-pin { width: 13px; height: 13px; color: var(--fg-3); }
.cr-last { font-size: calc(14px * var(--fs)); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.cr-last.busy { color: var(--accent-ink); }
.dot-busy { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; animation: pulse 1.2s infinite; }
.dr-nav { display: grid; gap: 1px; padding: 0 8px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r); color: var(--fg); text-align: left; width: 100%; font-size: calc(16px * var(--fs)); font-weight: 500; }
.nav-item:hover { background: var(--surface-2); }
.nav-item.active { background: var(--surface); box-shadow: var(--shadow-1); font-weight: 600; }
.nav-item > .ico:first-child { width: 20px; height: 20px; color: var(--fg-2); }
.nav-item > span:first-of-type { flex: 1; }
.nav-chev { width: 15px; height: 15px; color: var(--fg-3); }
.nav-badge { font-size: calc(12px * var(--fs)); min-width: 18px; text-align: center; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; }
.nav-avs { display: inline-flex; flex: none !important; }
.nav-avs img { width: 20px; height: 20px; border-radius: 50%; margin-left: -6px; box-shadow: 0 0 0 1.5px var(--side); }

/* ---------- 顶栏（群聊） ---------- */
.topbar { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px; min-width: 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); position: relative; z-index: 4; }
.topbar.is-chat { height: 68px; }
.topbar.is-page { height: 56px; }
.head-me { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 3px 3px 3px 11px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1); color: var(--fg-2); transition: transform .1s, background .15s; }
.head-me:hover { background: var(--surface-2); color: var(--fg); }
.head-me:active { transform: scale(.96); }
.head-me .hm-menu { width: 19px; height: 19px; stroke-width: 1.9; }
.head-me .av { width: 38px; height: 38px; }
.head-me .av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.hm-dot { position: absolute; left: 20px; top: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font: 700 calc(10px * var(--fs))/16px var(--font, inherit); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.head-me.sm { height: 38px; padding: 2px 2px 2px 9px; gap: 5px; }
.head-me.sm .av { width: 34px; height: 34px; }
.head-me.sm .hm-menu { width: 17px; height: 17px; }
.head-chat { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 8px 4px 4px; border-radius: var(--r-lg); text-align: left; }
.head-chat:hover { background: var(--surface-2); }
.hc-text { display: grid; min-width: 0; }
.hc-name { display: flex; align-items: center; gap: 2px; min-width: 0; }
.hc-name b { font-size: calc(16.5px * var(--fs)); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-name .ico { width: 16px; height: 16px; color: var(--fg-3); flex: none; }
.hc-sub { font-size: calc(13.5px * var(--fs)); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.typing-sub { color: var(--accent-ink); }
.typing-sub i { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; margin-left: 2px; animation: dot 1.2s infinite; vertical-align: middle; }
.typing-sub i:nth-child(2) { animation-delay: .15s; } .typing-sub i:nth-child(3) { animation-delay: .3s; }
.head-acts { display: flex; align-items: center; gap: 10px; }
.round-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); display: inline-flex; align-items: center; justify-content: center; color: var(--fg); transition: transform .1s, background .15s; flex: none; }
.round-btn .ico { width: 22px; height: 22px; stroke-width: 1.6; }
.round-btn:hover { background: var(--surface-2); }
.round-btn:active { transform: scale(.94); }
.round-btn.on { background: var(--fg); color: var(--bg); }
.round-btn em { position: absolute; top: -2px; right: -2px; font-style: normal; font-size: calc(11.5px * var(--fs)); min-width: 17px; height: 17px; line-height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff; box-shadow: 0 0 0 2px var(--bg); }
.head-back { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center; }
.head-back:hover { background: var(--surface-2); }
.head-back .ico { width: 22px; height: 22px; }
.head-title { font-size: calc(16.5px * var(--fs)); }

/* ---------- 群聊 ---------- */
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-scroll { flex: 1; overflow-y: auto; min-height: 0; overscroll-behavior: contain; overflow-anchor: none; -webkit-overflow-scrolling: touch; }
.chat-inner { width: min(860px, 100%); margin: 0 auto; padding: 12px 20px 16px; display: flex; flex-direction: column; }
.example-banner { display: flex; align-items: flex-start; gap: 8px; font-size: calc(13.5px * var(--fs)); color: var(--fg-2); background: var(--info-soft); padding: 9px 12px; border-radius: var(--r); margin: 8px 0 4px; }
.example-banner .ico { color: var(--info); width: 16px; height: 16px; margin-top: 2px; }
.date-sep { align-self: center; font-size: calc(13px * var(--fs)); color: var(--fg-3); margin: 20px 0 6px; font-variant-numeric: tabular-nums; }
.date-sep span, .sys span { display: inline-block; padding: 3px 10px; border-radius: 99px; }
.sys { align-self: center; font-size: calc(13px * var(--fs)); color: var(--fg-3); margin: 10px 0 2px; text-align: center; max-width: 90%; }
.sys span { background: var(--surface-2); }
.welcome { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 8px 12px; gap: 6px; }
.welcome h2 { margin: 10px 0 0; font-size: calc(20px * var(--fs)); }
.welcome p { margin: 0 0 12px; color: var(--fg-2); max-width: 30em; font-size: calc(14.5px * var(--fs)); }
.wl-mems { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; width: min(560px, 100%); margin-bottom: 14px; }
.wl-mem { display: grid; justify-items: center; gap: 3px; padding: 8px 2px; border-radius: var(--r-lg); }
.wl-mem:hover { background: var(--surface-2); }
.wl-mem .av { width: 46px; height: 46px; }
.wl-mem b { font-size: calc(14px * var(--fs)); font-weight: 600; }
.wl-mem em { font-style: normal; font-size: calc(12px * var(--fs)); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wl-quick { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chip-av { width: 18px; height: 18px; border-radius: 50%; }

.row { display: flex; align-items: flex-end; gap: 8px; margin-top: 2px; min-width: 0; }
.row.first { margin-top: 12px; }
.row-av { width: 40px; flex: none; display: flex; }
.row-av .av { width: 40px; height: 40px; }
.row.me { justify-content: flex-end; }
.row-body { display: flex; flex-direction: column; gap: 3px; max-width: min(78%, 620px); min-width: 0; position: relative; }
.row.other.wide .row-body { width: min(78%, 620px); }
.row.other .row-body { align-items: flex-start; }
.row.me .row-body { align-items: flex-end; }
.sender { display: flex; align-items: baseline; gap: 6px; font-size: calc(13.5px * var(--fs)); color: var(--fg-3); padding-left: 12px; }
.sender em { font-style: normal; font-size: calc(12px * var(--fs)); padding: 0 6px; border-radius: 5px; background: color-mix(in srgb, var(--c, var(--fg-3)) 14%, transparent); color: color-mix(in srgb, var(--c, var(--fg-3)) 85%, var(--fg)); }
.bubble { padding: 9px 14px; background: var(--bubble); color: var(--fg); font-size: calc(16.5px * var(--fs)); line-height: 1.6; max-width: 100%; overflow-wrap: anywhere; min-width: 0; border-radius: 6px 20px 20px 6px; }
.bubble.b-top { border-top-left-radius: 20px; }
.bubble.b-bot { border-bottom-left-radius: 20px; }
.row.me .bubble { border-radius: 20px 6px 6px 20px; }
.row.me .bubble.b-top { border-top-right-radius: 20px; }
.row.me .bubble.b-bot { border-bottom-right-radius: 20px; }
.row.me .bubble { background: var(--bubble-me); color: #fff; }
.bubble.md { font-size: calc(16.5px * var(--fs)); }
.bubble.md p { margin: 0 0 8px; }
.bubble.md > :last-child { margin-bottom: 0; }
.bubble.md ul, .bubble.md ol { margin: 2px 0 8px; padding-left: 20px; }
.bubble.md code { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.bubble.md .code-block, .bubble.md .table-wrap { background: var(--surface); margin: 6px 0 8px; }
.bubble.md .table-wrap table { font-size: calc(14px * var(--fs)); }
.at { color: var(--at); font-weight: 500; }
.row.me .at { color: inherit; font-weight: inherit; background: none; padding: 0; }
.bubble.typing { display: inline-flex; gap: 5px; padding: 14px 16px; }
.bubble.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-3); opacity: .45; animation: dot 1.2s infinite; }
.bubble.typing i:nth-child(2) { animation-delay: .15s; } .bubble.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 30% { opacity: 1; transform: translateY(-3px); } }
.quote-ref { display: flex; align-items: center; gap: 5px; font-size: calc(13px * var(--fs)); color: var(--fg-3); background: var(--surface-2); padding: 4px 10px; border-radius: 12px; max-width: 100%; }
.quote-ref .ico { width: 13px; height: 13px; flex: none; }
.quote-ref span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-ref { display: flex; align-items: flex-start; gap: 8px; font-size: calc(13.5px * var(--fs)); color: var(--fg-2); padding: 7px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--c); max-width: 100%; }
.task-ref .ico { width: 15px; height: 15px; color: var(--c); margin-top: 2px; flex: none; }
.task-ref b { display: block; color: var(--fg); font-weight: 600; font-size: calc(13px * var(--fs)); }
.msg-meta { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); padding: 0 12px; opacity: 0; transition: opacity .15s; font-variant-numeric: tabular-nums; }
.row:hover .msg-meta, .row:focus-within .msg-meta { opacity: 1; }
.msg-err { display: flex; align-items: center; gap: 6px; font-size: calc(13.5px * var(--fs)); color: var(--warn); background: var(--warn-soft); padding: 5px 12px; border-radius: 14px; max-width: 100%; }
.msg-err .ico { width: 15px; height: 15px; flex: none; }
.msg-err > span { min-width: 0; }
.msg-note { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13px * var(--fs)); color: var(--fg-3); padding: 0 12px; }
.msg-note .ico { width: 14px; height: 14px; }
.msg-note.warn { color: var(--warn); }
.msg-note.loop { color: var(--accent-ink); }
.hover-bar { position: absolute; top: -16px; display: flex; gap: 1px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 2px; box-shadow: var(--shadow-1); opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 2; }
.row.other .hover-bar { right: -8px; transform: translateX(100%); top: auto; bottom: 2px; }
.row.me .hover-bar { left: -8px; transform: translateX(-100%); top: auto; bottom: 2px; }
.row:hover .hover-bar { opacity: 1; pointer-events: auto; }
.typing-row .row-body { gap: 4px; }

/* 派活卡、工作卡片 */
.assign { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); max-width: 100%; flex-wrap: wrap; }
.assign .av { width: 28px; height: 28px; }
.as-main { display: grid; min-width: 0; flex: 1; font-size: calc(13.5px * var(--fs)); color: var(--fg-3); }
.as-main b { font-size: calc(14px * var(--fs)); color: var(--fg); font-weight: 600; }
.as-main > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-st { display: inline-flex; align-items: center; gap: 4px; font-size: calc(13px * var(--fs)); color: var(--fg-3); white-space: nowrap; }
.as-st .ico { width: 14px; height: 14px; }
.assign.ok .as-st { color: var(--ok); }
/* 没做成、被拦下：黄色，不用红色 */
.assign.pend, .assign.skip { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.assign.pend .as-st, .assign.skip .as-st { color: var(--warn); }
.assign.spin { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.assign.spin .as-st { color: var(--accent-ink); }
.as-err { flex-basis: 100%; font-size: calc(13px * var(--fs)); color: var(--warn); padding-left: 38px; }
/* 一条消息的全部步骤合成一张卡片：收起时一行，展开是紧凑的步骤列表 */
.work { width: 100%; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.work.live { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.work.todo { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.work-head { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 12px; text-align: left; font-size: calc(13.5px * var(--fs)); line-height: 1.4; min-width: 0; }
.work-head:hover { background: var(--surface-2); }
.work-head .spinner { color: var(--accent); width: 12px; height: 12px; }
.wk-ico { width: 15px; height: 15px; color: var(--ok); flex: none; }
.wk-ico.pend { color: var(--warn); }
.wk-t { font-weight: 600; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
.wk-s { flex: 1; min-width: 0; color: var(--fg-3); font-size: calc(13px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-todo { flex: none; white-space: nowrap; color: var(--warn); font-size: calc(13px * var(--fs)); font-weight: 550; }
.work-head .chev { width: 14px; height: 14px; color: var(--fg-3); transition: transform .15s; flex: none; margin-left: auto; }
.work.open .work-head .chev { transform: rotate(180deg); }
.work-body { border-top: 1px solid var(--line); padding: 4px; display: grid; gap: 1px; background: var(--panel); }
.work > .approval { border-top: 1px solid var(--line); }
.wk-more { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; border-radius: 10px; text-align: left; color: var(--fg-3); font-size: calc(12.5px * var(--fs)); }
.wk-more:hover { background: var(--surface-2); color: var(--fg-2); }
.wk-more .ico { width: 13px; height: 13px; flex: none; }
/* 步骤列表里的每一步：没有边框，一行一步 */
.work-body .tool, .sub-body .tool { border: 0; border-radius: 10px; background: transparent; }
.work-body .tool-head, .sub-body .tool-head { padding: 4px 8px; gap: 7px; font-size: calc(13px * var(--fs)); line-height: 1.4; border-radius: 10px; }
.work-body .tool-ico, .sub-body .tool-ico { width: 20px; height: 20px; }
.work-body .tool-ico .ico, .sub-body .tool-ico .ico { width: 13px; height: 13px; }
.work-body .tool-head .tool-label, .sub-body .tool-head .tool-label { flex: none; font-weight: 500; }
.work-body .tool-sum, .sub-body .tool-sum { display: block; font-size: calc(12px * var(--fs)); }
.work-body .tool-state, .sub-body .tool-state { font-size: calc(12px * var(--fs)); }
.work-body .tool-state .ico, .sub-body .tool-state .ico { width: 13px; height: 13px; }
.work-body .tool-head .chev, .sub-body .tool-head .chev { width: 12px; height: 12px; flex: none; }
.work-body .tool.pend, .work-body .tool.skip, .sub-body .tool.pend, .sub-body .tool.skip { background: color-mix(in srgb, var(--warn-soft) 70%, transparent); }
.work-body .tool.open, .sub-body .tool.open { background: var(--surface); box-shadow: 0 0 0 1px var(--line); margin: 3px 0; }
.work-body .tool-detail, .sub-body .tool-detail { border-top-color: color-mix(in srgb, var(--line) 70%, transparent); border-radius: 0 0 10px 10px; padding: 4px 8px 8px; }
.todo-av { width: 18px; height: 18px; border-radius: 50%; margin-left: auto; }
.sub { border: 1px dashed var(--line-2); border-radius: 16px; background: color-mix(in srgb, var(--surface) 90%, transparent); max-width: 100%; }
.sub.open { width: 100%; }
.sub.pend, .sub.skip { border-color: color-mix(in srgb, var(--warn) 45%, var(--line-2)); }
.sub.pend .sub-main b, .sub.skip .sub-main b { color: var(--warn); }
.sub-main b em { font-style: normal; font-weight: 400; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); margin-left: 6px; }
.sub-head { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 8px 10px; text-align: left; font-size: calc(14px * var(--fs)); }
.sub-head > .ico:first-child { width: 16px; height: 16px; color: var(--fg-2); margin-top: 2px; }
.sub-main { flex: 1; display: grid; min-width: 0; }
.sub-main span { font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.sub-head .chev { width: 14px; height: 14px; color: var(--fg-3); }
.sub-body { padding: 4px 6px 8px; display: grid; gap: 1px; }
.sub-body .bubble { font-size: calc(14.5px * var(--fs)); }

/* 交付卡 */
.deliver { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; }
/* 员工做好的文件：表格、文档、数据……在群里列出来，能打开、能下载 */
.out-files { width: min(420px, 100%); border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); padding: 10px 12px; display: grid; gap: 4px; }
.of-h { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: calc(13px * var(--fs)); color: var(--fg-2); padding: 2px 2px 6px; }
.of-h .ico { width: 16px; height: 16px; }
.of-row { display: flex; align-items: center; gap: 8px; padding: 8px 2px; border-top: 1px solid var(--line); }
.of-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.of-ico .ico { width: 18px; height: 18px; }
.of-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.of-meta { flex: 1; min-width: 0; display: grid; }
.of-fw { color: var(--accent); }
/* 手机上：名字一行，「下载」「转发」两个大按钮在下面一行 */
@media (max-width: 520px) { .of-row { flex-wrap: wrap; } .of-open { flex-basis: 100%; } .of-row > .btn { flex: 1; justify-content: center; } }
/* 没做成的步骤：让员工接着弄 */
.wk-fix { padding: 0 10px 10px; }
.wk-fix .btn { color: var(--warn); }
.msg-refund { display: block; font-style: normal; margin-top: 2px; font-size: .92em; opacity: .85; }
.of-meta b { font-size: calc(14px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.of-meta span { font-size: calc(12px * var(--fs)); color: var(--fg-3); }
.of-row .btn { flex: none; }
.of-more { justify-self: start; padding: 6px 2px; }
.deliver-card { width: min(320px, 100%); border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.dl-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; position: relative; background: #fff; border-bottom: 1px solid var(--line); }
.dl-thumb iframe { width: 400%; height: 400%; transform: scale(.25); transform-origin: 0 0; border: 0; pointer-events: none; background: #fff; }
.dl-meta { display: grid; padding: 10px 12px 2px; min-width: 0; }
.dl-meta b { font-size: calc(15px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-meta span { font-size: calc(13px * var(--fs)); color: var(--fg-3); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-acts { display: flex; gap: 6px; padding: 8px 12px 12px; flex-wrap: wrap; }

/* ---------- 输入栏 ---------- */
.banner { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: var(--r-lg); background: var(--warn-soft); margin-bottom: 14px; width: 100%; }
.banner > .ico { color: var(--warn); width: 20px; height: 20px; }
.banner div { flex: 1; display: grid; font-size: calc(14px * var(--fs)); color: var(--fg-2); }
.banner b { color: var(--fg); }
.composer-dock { position: relative; width: min(860px, 100%); margin: 0 auto; padding: 6px 20px 12px; }
.composer-dock .banner { margin-bottom: 8px; }
.composer { display: flex; align-items: flex-end; gap: 6px; background: var(--surface-2); border-radius: 28px; padding: 6px 8px 6px 6px; border: 1px solid transparent; transition: border-color .15s, background .15s; }
.composer:focus-within { border-color: var(--line-2); background: var(--surface); }
.composer.drag { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.composer textarea { flex: 1; min-width: 0; border: 0; background: transparent; resize: none; padding: 10px 6px 10px 12px; min-height: 42px; max-height: 200px; line-height: 1.5; font-size: calc(16.5px * var(--fs)); }
.composer textarea:focus { outline: 0; }
.composer textarea::placeholder { color: var(--fg-3); }
.c-icons { display: flex; align-items: center; gap: 2px; padding-bottom: 3px; }
.c-ico { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--fg); }
.c-ico .ico { width: 24px; height: 24px; stroke-width: 1.6; }
.c-ico:hover { background: var(--surface-3); }
.c-ico.rec { background: var(--err); color: #fff; animation: pulse 1.2s infinite; }
.c-send { display: none; height: 38px; padding: 0 12px; margin-bottom: 2px; border-radius: 19px; color: var(--accent-ink); font-weight: 650; font-size: calc(16px * var(--fs)); }
.c-send:hover { background: var(--accent-soft); }
/* 打了字也能发图片、视频、按住说话（以前一打字这几个按钮就全藏起来了）；只收起表情 */
.composer.has-text .c-ico[data-act="quick-menu"] { display: none; }
.composer.has-text .c-send { display: inline-flex; align-items: center; }
.c-stop { width: 38px; height: 38px; border-radius: 50%; background: var(--fg); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 2px; flex: none; }
.c-stop .ico { width: 14px; height: 14px; }
.c-hint { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); padding: 6px 18px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-hint span { color: var(--fg-2); }
.c-hint b { color: var(--accent-ink); font-weight: 500; }
.quote-bar { display: flex; align-items: center; gap: 8px; font-size: calc(13.5px * var(--fs)); color: var(--fg-2); background: var(--surface); border: 1px solid var(--line); padding: 6px 8px 6px 12px; border-radius: 14px; margin-bottom: 6px; }
.quote-bar > .ico { width: 15px; height: 15px; color: var(--accent); }
.quote-bar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-list { display: flex; flex-wrap: wrap; gap: 6px; }
.att-list.cbar { margin-bottom: 6px; }
.att { display: inline-flex; align-items: center; gap: 4px; font-size: calc(13px * var(--fs)); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 3px 5px 3px 7px; }
.row.me .att { background: var(--surface); }
.att .ico { width: 13px; height: 13px; }
.att button { display: inline-flex; color: var(--fg-3); }
.at-picker { position: absolute; left: 20px; right: 20px; bottom: calc(100% - 4px); max-height: min(380px, 60vh); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-3); padding: 6px; z-index: 20; animation: pop .15s; }
.ap-head { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); padding: 6px 10px 4px; font-weight: 600; }
.ap-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: var(--r); text-align: left; }
.ap-item.on, .ap-item:hover { background: var(--surface-2); }
.ap-main { flex: 1; display: grid; min-width: 0; }
.ap-main b { font-size: calc(15px * var(--fs)); }
.ap-main span { font-size: calc(13px * var(--fs)); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-item em { font-style: normal; font-size: calc(12px * var(--fs)); color: var(--ok); }
.ap-item em.busy { color: var(--accent-ink); }
.emoji-row { display: flex; gap: 2px; padding: 4px 4px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.emoji-row button { width: 34px; height: 34px; border-radius: 8px; font-size: calc(19px * var(--fs)); }
.emoji-row button:hover { background: var(--surface-2); }
.mi-av { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.switch.sm { width: 30px; height: 18px; }
.switch.sm i { width: 14px; height: 14px; }
.switch.sm.on i { transform: translateX(12px); }

/* 名片、群资料、我的资料 */
.card-hero { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-xl); background: color-mix(in srgb, var(--c) 12%, var(--surface)); margin-bottom: 12px; }
.card-hero img { width: 72px; height: 72px; border-radius: 22px; box-shadow: var(--shadow-2); }
.card-hero div { display: grid; }
.card-hero b { font-size: calc(19px * var(--fs)); }
.card-hero span { font-size: calc(14px * var(--fs)); color: var(--fg-2); }
.card-intro { margin: 0 0 10px; color: var(--fg-2); font-size: calc(14.5px * var(--fs)); }
.skill-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.card-model { display: flex; align-items: center; gap: 6px; font-size: calc(13.5px * var(--fs)); color: var(--fg-3); margin-top: 12px; }
.card-model .ico { width: 15px; height: 15px; }
.ci-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ci-head div { display: grid; }
.ci-head b { font-size: calc(16px * var(--fs)); }
.ci-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.ci-mem { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 7px 9px; border-radius: var(--r); border: 1px solid var(--line); opacity: .6; transition: opacity .12s, border-color .12s; }
.ci-mem.on { opacity: 1; border-color: var(--accent); background: var(--accent-soft); }
.ci-mem .av { width: 32px; height: 32px; grid-row: span 2; }
.ci-mem b { font-size: calc(14.5px * var(--fs)); color: var(--fg); }
.ci-mem em { font-style: normal; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); grid-column: 2; }
.ci-check { grid-row: span 2; grid-column: 3; grid-row-start: 1; width: 16px; height: 16px; color: var(--accent-ink); }
.ci-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ci-danger { display: flex; gap: 18px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.pf-av { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.pf-av-acts { display: grid; gap: 6px; }
.addr-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 6px; }

/* 员工页 */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 18px; }
.staff-card { display: flex; flex-direction: column; text-align: left; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow-1); transition: transform .15s, box-shadow .15s; }
.staff-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.sc-img { display: block; aspect-ratio: 16 / 10; max-width: 100%; background: var(--c); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sc-img img { height: 100%; width: auto; }
.sc-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 14px 14px; }
.sc-body > b { font-size: calc(16px * var(--fs)); display: flex; align-items: center; gap: 6px; }
.sc-role { font-size: calc(13.5px * var(--fs)); color: var(--fg-3); }
.sc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.sc-model { display: inline-flex; align-items: center; gap: 4px; font-size: calc(13px * var(--fs)); color: var(--fg-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-model .ico { width: 14px; height: 14px; flex: none; }
.sc-model span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lead-tag { font-style: normal; font-size: calc(12px * var(--fs)); font-weight: 500; padding: 1px 7px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); }
.staff-hero { display: flex; align-items: center; gap: 20px; padding: 20px; border-radius: var(--r-xl); background: color-mix(in srgb, var(--c) 13%, var(--surface)); margin-bottom: 16px; }
.staff-hero img { width: 112px; height: 112px; border-radius: 32px; box-shadow: var(--shadow-2); flex: none; }
.staff-hero h1 { margin: 0; font-size: calc(24px * var(--fs)); display: flex; align-items: center; gap: 8px; }
.staff-hero p { margin: 2px 0 12px; color: var(--fg-2); }
.sh-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.custom-model { padding: 4px 0 8px; }
.panel .team-grid { grid-template-columns: 1fr; }
.tm-card { text-align: left; align-items: center; }
.tm-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-main b em { white-space: nowrap; }
.tm-card .av { width: 40px; height: 40px; }
.kb-owner img { width: 16px; height: 16px; border-radius: 50%; }
.kb-owner { color: var(--fg-2) !important; }
.dev-av { width: 18px; height: 18px; border-radius: 50%; }

/* ---------- 基础控件 ---------- */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-sm); color: var(--fg-2); transition: background .12s, color .12s; flex: none; }
.icon-btn:hover { background: var(--surface-2); color: var(--fg); }
.icon-btn.on { color: var(--accent-ink); background: var(--accent-soft); }
.icon-btn.sm { width: 30px; height: 30px; }
.icon-btn.xs { width: 24px; height: 24px; border-radius: 5px; }
.icon-btn.xs .ico { width: 15px; height: 15px; }
.icon-btn.rec { color: var(--on-accent); background: var(--err); animation: pulse 1.2s infinite; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--r); font-weight: 500; white-space: nowrap; transition: background .12s, border-color .12s, transform .08s; border: 1px solid transparent; text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn .ico { width: 16px; height: 16px; }
.btn.sm { height: 30px; padding: 0 10px; font-size: calc(14px * var(--fs)); border-radius: var(--r-sm); }
.btn.primary { background: var(--fg); color: var(--bg); }
.btn.primary:hover { opacity: .9; }
.btn.ghost { background: var(--surface); border-color: var(--line); color: var(--fg); }
.btn.ghost:hover { border-color: var(--line-2); background: var(--surface-2); }
.btn.danger { background: var(--err); color: #fff; }
.danger-text { color: var(--err) !important; }
.link-btn { color: var(--accent-ink); font-size: calc(13.5px * var(--fs)); }
.link-btn:hover { text-decoration: underline; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); font-size: calc(13.5px * var(--fs)); white-space: nowrap; transition: border-color .12s, background .12s, color .12s; max-width: 100%; }
.chip span { overflow: hidden; text-overflow: ellipsis; }
.chip .ico { width: 15px; height: 15px; }
.chip .ico:last-child:not(:first-child) { width: 13px; height: 13px; color: var(--fg-3); }
.chip:hover { border-color: var(--line-2); color: var(--fg); }
.chip.on { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.chip.ghost { border-color: transparent; background: transparent; }
.chip.ghost:hover { background: var(--surface-2); }
.seg { display: inline-flex; background: var(--surface-2); border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.seg button { height: 26px; min-width: 28px; padding: 0 6px; border-radius: 5px; color: var(--fg-3); display: inline-flex; align-items: center; justify-content: center; }
.seg button .ico { width: 16px; height: 16px; }
.seg button.on { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-1); }
.seg.text button { padding: 0 10px; font-size: calc(13.5px * var(--fs)); }
.switch { width: 36px; height: 21px; border-radius: 99px; background: var(--line-2); position: relative; transition: background .18s; flex: none; }
.switch i { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .18s; }
.switch.on { background: var(--accent); }
.switch.on i { transform: translateX(15px); }
.input, .select { width: 100%; height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .12s, box-shadow .12s; }
textarea.input { height: auto; padding: 9px 11px; resize: vertical; line-height: 1.55; }
.input.sm, .select.sm { height: 30px; font-size: calc(14px * var(--fs)); border-radius: var(--r-sm); }
.input:focus, .select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%), linear-gradient(135deg, var(--fg-3) 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.field { display: grid; gap: 6px; margin-bottom: 14px; font-size: calc(14px * var(--fs)); color: var(--fg-2); }
.field > span { font-weight: 500; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tag { display: inline-flex; align-items: center; gap: 3px; font-size: calc(12.5px * var(--fs)); padding: 1px 7px; border-radius: 5px; background: var(--surface-2); color: var(--fg-2); white-space: nowrap; }
.tag .ico { width: 12px; height: 12px; }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.err { background: var(--err-soft); color: var(--err); }
.spinner { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; vertical-align: -2px; opacity: .8; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.notice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); background: var(--info-soft); color: var(--fg-2); font-size: calc(14px * var(--fs)); margin-bottom: 14px; }
.notice .ico { color: var(--info); }
.notice span { flex: 1; }
.notice.warn { background: var(--warn-soft); }
.notice.warn .ico { color: var(--warn); }

/* ---------- 菜单 / 弹层 / 提示 ---------- */
.menu { position: fixed; z-index: 100; min-width: 200px; max-width: min(340px, calc(100vw - 16px)); max-height: 70vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: 5px; opacity: 0; transform: translateY(-3px) scale(.98); transition: opacity .12s, transform .12s; }
.menu.wide { min-width: 270px; }
.menu.in { opacity: 1; transform: none; }
.menu-head { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); padding: 6px 10px 4px; font-weight: 500; }
.menu-sep { height: 1px; background: var(--line); margin: 4px 6px; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 10px; border-radius: var(--r-sm); color: var(--fg); }
.menu-item:hover, .menu-item:focus { background: var(--surface-2); outline: 0; }
.menu-item.active { color: var(--accent-ink); }
.menu-item.danger { color: var(--err); }
.menu-item .ico { width: 16px; height: 16px; color: var(--fg-3); }
.menu-item.danger .ico { color: var(--err); }
.mi-main { flex: 1; display: grid; min-width: 0; }
.mi-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-desc { font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.mi-check { color: var(--accent) !important; }
#modal-root { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; padding: 16px; }
#modal-root.open { display: grid; }
.modal-back { position: absolute; inset: 0; background: var(--overlay); backdrop-filter: blur(2px); animation: fade .15s; }
.modal { position: relative; width: min(560px, 100%); max-height: calc(100% - 24px); display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-3); animation: pop .18s cubic-bezier(.2, .9, .3, 1.2); }
.modal.sm { width: min(420px, 100%); }
@keyframes pop { from { transform: translateY(8px) scale(.97); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px 20px; }
.modal-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: calc(16.5px * var(--fs)); }
.modal-title .ico { color: var(--accent); }
.modal-body { padding: 8px 20px 12px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.modal-body p { margin: 0 0 10px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; }
.toast-root { position: fixed; z-index: 120; left: 50%; top: calc(58px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px; background: var(--fg); color: var(--bg); font-size: calc(14.5px * var(--fs)); box-shadow: var(--shadow-2); opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s; max-width: 100%; }
.toast span { overflow: hidden; text-overflow: ellipsis; }
.toast .ico { width: 16px; height: 16px; }
.toast.in { opacity: 1; transform: none; }


/* ---------- 代码、思考、工具卡片 ---------- */
/* Markdown */
.md { font-size: calc(15.5px * var(--fs)); line-height: 1.72; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 10px; }
.md h2, .md h3, .md h4, .md h5 { margin: 18px 0 8px; line-height: 1.35; text-wrap: balance; }
.md h2 { font-size: calc(18px * var(--fs)); } .md h3 { font-size: calc(16px * var(--fs)); } .md h4, .md h5 { font-size: calc(15.5px * var(--fs)); }
.md ul, .md ol { margin: 0 0 10px; padding-left: 22px; }
.md li { margin: 3px 0; }
.md li > ul, .md li > ol { margin: 2px 0; }
.md code { font: calc(12.5px * var(--fs)) var(--mono); background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.md blockquote { margin: 0 0 10px; padding: 2px 0 2px 14px; border-left: 3px solid var(--line-2); color: var(--fg-2); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.md img { max-width: 100%; border-radius: var(--r); }
.md strong { font-weight: 650; }
.table-wrap { overflow-x: auto; margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--r); }
.md table { border-collapse: collapse; width: 100%; font-size: calc(14.5px * var(--fs)); }
.md th, .md td { padding: 7px 11px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.md th { background: var(--surface-2); font-weight: 600; }
.md tr:last-child td { border-bottom: 0; }
.task-check { display: inline-block; width: 14px; height: 14px; border: 1.5px solid var(--line-2); border-radius: 4px; margin-right: 6px; vertical-align: -2px; flex: none; }
.task-check.done { background: var(--ok); border-color: var(--ok); box-shadow: inset 0 0 0 2px var(--surface); }
.task-check.doing { border-color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.code-block { margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--code-bg); }
.code-head { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px 5px 12px; font: calc(11.5px * var(--fs)) var(--mono); color: var(--fg-3); border-bottom: 1px solid var(--line); }
.code-copy { font: calc(11.5px * var(--fs)) var(--font); color: var(--fg-3); padding: 2px 6px; border-radius: 4px; }
.code-copy:hover { background: var(--surface-3); color: var(--fg); }
.code-block pre, pre.code { margin: 0; padding: 10px 12px; overflow-x: auto; font: calc(12.5px * var(--fs))/1.6 var(--mono); }
pre.code { background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--r-sm); }
pre.code.sm { font-size: calc(13px * var(--fs)); max-height: 320px; overflow: auto; }
pre.code.result { white-space: pre-wrap; word-break: break-word; }
.code-block pre code, pre.code code { font: inherit; background: none; padding: 0; }
.tk-k { color: #b4387a; } .tk-s { color: #2f7d4f; } .tk-c { color: var(--fg-3); font-style: italic; } .tk-n { color: #b56a12; } .tk-a { color: #3a63c4; }
:root[data-theme="dark"] .tk-k { color: #ff8ab6; } :root[data-theme="dark"] .tk-s { color: #7fd6a2; } :root[data-theme="dark"] .tk-n { color: #f0b36a; } :root[data-theme="dark"] .tk-a { color: #8fb1ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tk-k { color: #ff8ab6; } :root:not([data-theme="light"]) .tk-s { color: #7fd6a2; } :root:not([data-theme="light"]) .tk-n { color: #f0b36a; } :root:not([data-theme="light"]) .tk-a { color: #8fb1ff; } }

/* 思考 */
.think { border-radius: var(--r); }
.think-head { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-3); font-size: calc(14px * var(--fs)); padding: 3px 6px 3px 2px; border-radius: var(--r-sm); }
.think-head:hover { color: var(--fg); }
.think-head .ico { width: 16px; height: 16px; }
.think-head .chev { width: 14px; height: 14px; transition: transform .15s; }
.think.open .chev { transform: rotate(180deg); }
.think.live .think-head span { background: linear-gradient(90deg, var(--fg-3) 30%, var(--fg) 50%, var(--fg-3) 70%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.think-body { margin: 4px 0 2px 8px; padding: 2px 0 2px 14px; border-left: 2px solid var(--line); color: var(--fg-3); font-size: calc(14px * var(--fs)); white-space: pre-wrap; max-height: 260px; overflow-y: auto; }
.thinking-dots { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-3); font-size: calc(14px * var(--fs)); padding: 4px 0; }
.thinking-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .3; animation: dot 1.2s infinite; }
.thinking-dots i:nth-child(2) { animation-delay: .15s; } .thinking-dots i:nth-child(3) { animation-delay: .3s; }
.thinking-dots span { margin-left: 6px; }
.thinking-dots.sm { padding: 0 0 0 4px; }
@keyframes dot { 30% { opacity: 1; transform: translateY(-2px); } }

/* 工具卡片 */
.tool { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; transition: border-color .15s; }
.tool-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; text-align: left; min-width: 0; font-size: calc(14px * var(--fs)); }
.tool-head:hover { background: var(--surface-2); }
.tool-ico { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--fg-2); flex: none; }
.tool-ico .ico { width: 14px; height: 14px; }
.tool-label { font-weight: 550; white-space: nowrap; }
.tool-sum { flex: 1; min-width: 0; color: var(--fg-3); font-family: var(--mono); font-size: calc(13px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-state { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-3); font-size: calc(13px * var(--fs)); white-space: nowrap; }
.tool-state .ico { width: 15px; height: 15px; }
.tool-state em { font-style: normal; font-variant-numeric: tabular-nums; }
.tool.ok .tool-state .ico { color: var(--ok); }
/* 待处理、已跳过：黄色，不用红色 */
.tool.pend, .tool.skip { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.tool.pend .tool-state, .tool.skip .tool-state { color: var(--warn); }
.tool.pend .tool-ico, .tool.skip .tool-ico { color: var(--warn); background: var(--warn-soft); }
.tool.spin .tool-ico { color: var(--accent); background: var(--accent-soft); }
.tool.wait { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.tool.wait .tool-state { color: var(--warn); }
.tool-head .chev { width: 14px; height: 14px; color: var(--fg-3); transition: transform .15s; }
.tool.open .tool-head .chev { transform: rotate(180deg); }
.tool-detail { padding: 4px 10px 10px; display: grid; gap: 6px; border-top: 1px solid var(--line); background: var(--panel); }
.td-label { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); font-weight: 500; margin-top: 4px; }
.td-file { display: flex; align-items: center; gap: 10px; font-size: calc(13.5px * var(--fs)); padding-top: 6px; flex-wrap: wrap; }
.td-file > span:first-child { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); }
.td-file .ico { width: 14px; height: 14px; }
.td-err { display: flex; gap: 6px; align-items: flex-start; color: var(--warn); font-size: calc(13px * var(--fs)); background: var(--warn-soft); padding: 6px 10px; border-radius: var(--r-sm); white-space: pre-wrap; word-break: break-word; }
.td-err .ico { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.td-review { display: flex; gap: 6px; align-items: flex-start; font-size: calc(13.5px * var(--fs)); padding: 6px 10px; border-radius: var(--r-sm); }
.td-review .ico { width: 15px; height: 15px; margin-top: 2px; }
.td-review.ok { background: var(--ok-soft); color: var(--ok); }
.td-review.warn { background: var(--warn-soft); color: var(--warn); }
.diff { display: grid; gap: 4px; margin-top: 4px; }
.diff pre { margin: 0; padding: 8px 10px; font: calc(12px * var(--fs))/1.55 var(--mono); border-radius: var(--r-sm); white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; }
.diff .del { background: var(--surface-2); color: var(--fg-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--fg-3) 60%, transparent); }
.diff .add { background: var(--ok-soft); color: var(--fg); }
.term-out { margin: 6px 0 0; padding: 10px 12px; background: #16131a; color: #e6e2ec; border-radius: var(--r-sm); font: calc(12px * var(--fs))/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow: auto; }
.term-out .prompt, .term .prompt { color: #f58bb3; }
.todo-mini { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: calc(14px * var(--fs)); }
.todo-mini li { display: flex; align-items: center; }
.todo-mini li.completed { color: var(--fg-3); text-decoration: line-through; }
.todo-mini em { font-style: normal; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); margin-left: auto; padding-left: 10px; }
.approval { padding: 10px 12px; border-top: 1px solid var(--line); background: var(--warn-soft); display: grid; gap: 8px; }
.ap-q code { font: calc(12px * var(--fs)) var(--mono); background: color-mix(in srgb, var(--fg) 7%, transparent); padding: 1px 5px; border-radius: 5px; word-break: break-all; }
.ap-q { display: flex; align-items: center; gap: 8px; font-size: calc(14.5px * var(--fs)); font-weight: 500; flex-wrap: wrap; }
.ap-why { display: flex; align-items: center; gap: 6px; font-size: calc(13.5px * var(--fs)); color: var(--warn); }
.ap-why .ico { width: 15px; height: 15px; }
.ap-acts { display: flex; gap: 6px; flex-wrap: wrap; }


/* ---------- 面板 ---------- */
.panel-tabs { height: var(--top-h); flex: none; display: flex; align-items: center; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior: contain; scrollbar-width: none; }
.panel-tabs::-webkit-scrollbar { display: none; }
.ptab { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--r-sm); color: var(--fg-3); white-space: nowrap; font-size: calc(14px * var(--fs)); }
.ptab .ico { width: 16px; height: 16px; }
.ptab:hover { color: var(--fg); background: var(--surface-2); }
.ptab.active { color: var(--fg); background: var(--surface-3); font-weight: 500; }
.ptab em { font-style: normal; font-size: calc(12px * var(--fs)); min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); text-align: center; }
.ptab em.err { background: var(--err-soft); color: var(--err); }
.panel-close { margin-left: auto; display: none; }
.panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.p-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); min-width: 0; flex: none; }
.p-toolbar .chip { min-width: 0; }
.p-title { font-weight: 600; font-size: calc(14.5px * var(--fs)); display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.p-title em { font-style: normal; font-weight: 400; font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.p-title.mono { font-family: var(--mono); font-size: calc(13.5px * var(--fs)); }
.p-img { flex: 1; min-height: 0; display: grid; place-items: center; padding: 16px; overflow: auto; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 20px 20px; }
.p-img img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: var(--shadow-1); }
.p-empty { margin: auto; padding: 32px 28px; display: grid; justify-items: center; gap: 8px; text-align: center; max-width: 340px; color: var(--fg-3); font-size: calc(14px * var(--fs)); }
.p-empty > .ico { width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: var(--surface-2); color: var(--fg-2); margin-bottom: 4px; }
.p-empty b { color: var(--fg); font-size: calc(15px * var(--fs)); }
.p-empty.sm { padding: 24px 20px; }
.p-empty .btn { margin-top: 6px; }
.live-badge { display: inline-flex; align-items: center; gap: 5px; font-size: calc(12.5px * var(--fs)); color: var(--accent-ink); background: var(--accent-soft); padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.live-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1s infinite; }
.p-toolbar .seg { margin-left: auto; }
.pv-errors { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--err-soft); font-size: calc(13.5px * var(--fs)); border-bottom: 1px solid var(--line); }
.pv-errors > div { flex: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 6px; min-width: 0; color: var(--err); }
.pv-errors .ico { width: 15px; height: 15px; grid-row: span 2; margin-top: 2px; }
.pv-errors span { color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-stage { flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: center; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--panel) 0 50%) 0 0 / 16px 16px; }
.pv-frame-wrap { width: 100%; height: 100%; background: #fff; }
.pv-frame-wrap iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.pv-stage.tablet { padding: 16px; }
.pv-stage.tablet .pv-frame-wrap { width: 768px; max-width: 100%; border-radius: 14px; box-shadow: var(--shadow-2); overflow: hidden; }
.pv-stage.phone { padding: 16px; align-items: flex-start; }
.pv-stage.phone .pv-frame-wrap { width: 390px; max-width: 100%; height: min(844px, 100%); border-radius: 28px; box-shadow: var(--shadow-2), 0 0 0 8px var(--fg); overflow: hidden; margin: 8px; }
.f-list { flex: 1; overflow-y: auto; padding: 6px; }
.f-row { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; padding: 6px 8px 6px calc(8px + var(--lv) * 16px); border-radius: var(--r-sm); font-size: calc(14px * var(--fs)); color: var(--fg-2); }
.f-row:hover { background: var(--surface-2); color: var(--fg); }
.f-row .ico { width: 15px; height: 15px; color: var(--fg-3); }
.f-row .f-chev { width: 13px; height: 13px; }
.f-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: calc(13.5px * var(--fs)); }
.f-row.dir span { font-family: var(--font); font-weight: 500; font-size: calc(14px * var(--fs)); }
.f-row em { font-style: normal; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.editor { flex: 1; min-height: 0; display: grid; grid-template-columns: auto 1fr; background: var(--code-bg); }
.gutter { margin: 0; padding: 12px 8px 12px 12px; text-align: right; color: var(--fg-3); font: calc(12.5px * var(--fs))/1.6 var(--mono); user-select: none; overflow: hidden; border-right: 1px solid var(--line); min-width: 42px; }
.editor textarea { border: 0; resize: none; padding: 12px; font: calc(12.5px * var(--fs))/1.6 var(--mono); background: transparent; white-space: pre; overflow: auto; tab-size: 2; }
.editor textarea:focus { outline: 0; }
.term { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #16131a; color: #e6e2ec; font: calc(12.5px * var(--fs))/1.6 var(--mono); cursor: text; }
.term .term-out { flex: 1; margin: 0; max-height: none; border-radius: 0; padding: 12px 14px 4px; overflow-y: auto; background: transparent; }
.tl { white-space: pre-wrap; word-break: break-word; }
.tl.sys { color: #9a92a8; margin-bottom: 6px; }
.t-err { color: #ff8f97; }
.term-in { display: flex; align-items: center; gap: 8px; padding: 6px 14px 12px; }
.term-in input { flex: 1; background: transparent; border: 0; color: inherit; font: inherit; min-width: 0; }
.term-in input:focus { outline: 0; }
.kb-progress { height: 4px; background: var(--surface-2); margin: 10px 12px 0; border-radius: 4px; overflow: hidden; }
.kb-progress i { display: block; height: 100%; background: var(--ok); border-radius: 4px; transition: width .3s; }
.kanban { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 8px; padding: 12px; align-items: start; }
.kb-col { background: var(--surface-2); border-radius: var(--r); padding: 8px; display: grid; gap: 6px; }
.kb-head { display: flex; justify-content: space-between; font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--fg-2); padding: 0 2px 2px; }
.kb-head em { font-style: normal; color: var(--fg-3); font-weight: 400; }
.kb-col.in_progress .kb-head span { color: var(--accent-ink); }
.kb-col.completed .kb-head span { color: var(--ok); }
.kb-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 9px; display: grid; gap: 6px; box-shadow: var(--shadow-1); }
.kb-card p { margin: 0; font-size: calc(13.5px * var(--fs)); line-height: 1.5; }
.kb-col.completed .kb-card p { color: var(--fg-3); }
.kb-idx { font: calc(11px * var(--fs)) var(--mono); color: var(--fg-3); }
.kb-owner { display: inline-flex; align-items: center; gap: 4px; font-size: calc(12.5px * var(--fs)); color: var(--role); justify-self: start; }
.kb-owner .ico { width: 13px; height: 13px; }
.team-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; padding: 8px 12px 12px; align-content: start; }
.tm-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); position: relative; }
.tm-main { flex: 1; display: grid; min-width: 0; font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.tm-main b { font-size: calc(14.5px * var(--fs)); color: var(--fg); display: flex; gap: 6px; align-items: baseline; }
.tm-main b em { font-style: normal; font-weight: 400; font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.tm-main p { margin: 4px 0 0; display: flex; gap: 5px; align-items: center; font-size: calc(13px * var(--fs)); }
.tm-now { color: var(--accent-ink); }
.tm-last { color: var(--ok); }
.tm-last .ico { width: 13px; height: 13px; }
.tm-st { font-size: calc(12px * var(--fs)); padding: 1px 7px; border-radius: 99px; background: var(--surface-2); color: var(--fg-3); white-space: nowrap; }
.tm-st.busy { background: var(--accent-soft); color: var(--accent-ink); }
.team-note { display: flex; gap: 8px; margin: 0 12px 12px; padding: 10px 12px; border-radius: var(--r); background: var(--surface-2); font-size: calc(13.5px * var(--fs)); color: var(--fg-2); }
.team-note .ico { width: 16px; height: 16px; color: var(--fg-3); margin-top: 2px; }
.dev-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.dev-list { display: grid; gap: 4px; }
.dev-item { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; }
/* 调用记录里没做成的一条：和工作流一样是黄色的「待处理」，不用红色 */
.dev-item.err { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.dev-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; text-align: left; font-size: calc(13.5px * var(--fs)); color: var(--fg-2); }
.dev-row:hover { background: var(--surface-2); }
.dev-row .mono { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.dev-item.err .dev-row .mono:nth-last-child(2) { color: var(--warn); }
.dev-json { margin: 0 8px 8px; max-height: 420px; white-space: pre-wrap; word-break: break-word; }
.dev-body > .dev-json { margin: 0; max-height: none; flex: 1; }
.dev-acts { display: flex; align-items: center; gap: 6px; }
.hook-row { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; padding: 5px 8px; border-bottom: 1px solid var(--line); font-size: calc(13px * var(--fs)); }
.hook-row .mono { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.hook-row code { font: calc(11.5px * var(--fs)) var(--mono); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hook-ev { font: calc(11px * var(--fs)) var(--mono); padding: 1px 6px; border-radius: 4px; background: var(--surface-2); color: var(--fg-2); }
.hook-ev.PreToolUse, .hook-ev.PostToolUse { background: var(--info-soft); color: var(--info); }
.hook-ev.PermissionRequest, .hook-ev.AutoReview { background: var(--warn-soft); color: var(--warn); }
.hook-ev.SubagentStart, .hook-ev.SubagentStop { background: var(--accent-soft); color: var(--accent-ink); }
.hook-ev.Stop, .hook-ev.UserPromptSubmit { background: var(--ok-soft); color: var(--ok); }

/* ---------- 页面 ---------- */
/* 除了群聊（自己管滚动），所有页面都能上下滑 */
.view:not(.view-chat) { overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.page { width: min(1080px, 100%); margin: 0 auto; padding: 32px 32px 56px; }
.page.narrow { width: min(820px, 100%); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.page-head h1 { font-size: calc(22px * var(--fs)); margin: 0 0 4px; font-weight: 650; letter-spacing: .3px; }
.page-head p { margin: 0; color: var(--fg-3); font-size: calc(14px * var(--fs)); display: flex; align-items: center; gap: 4px; }
.info-dot { display: inline-flex; color: var(--fg-3); cursor: help; }
.info-dot .ico { width: 14px; height: 14px; }
.sec-label { display: flex; align-items: center; gap: 6px; font-size: calc(14px * var(--fs)); font-weight: 600; color: var(--fg-2); margin: 22px 0 10px; }
.sec-label:first-of-type { margin-top: 0; }
.sec-label em { font-style: normal; font-weight: 400; color: var(--fg-3); }
.sec-label .muted { font-weight: 400; font-size: calc(13.5px * var(--fs)); }
.plug-list { display: grid; gap: 2px; }
.plug { border-radius: var(--r-lg); transition: background .15s; }
.plug:hover, .plug.open { background: var(--surface); }
.plug.open { box-shadow: var(--shadow-1); }
.plug-row { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; }
.plug-main { flex: 1; display: flex; align-items: center; gap: 14px; padding: 10px; text-align: left; min-width: 0; }
.plug-ico { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.plug-ico .ico { width: 20px; height: 20px; }
.t-violet .ico { color: #7c5cfa; } .t-blue .ico { color: #3b72e8; } .t-slate .ico { color: #5d6b84; } .t-teal .ico { color: #0e9aa7; }
.t-ink .ico { color: var(--fg); } .t-rose .ico { color: var(--accent); } .t-amber .ico { color: #c47f17; } .t-green .ico { color: #188f60; }
.plug-text { display: grid; min-width: 0; gap: 1px; }
.plug-text b { font-weight: 600; font-size: calc(15px * var(--fs)); }
.plug-text > span { color: var(--fg-3); font-size: calc(13.5px * var(--fs)); }
.plug-warn { font-style: normal; font-size: calc(13px * var(--fs)); color: var(--warn); display: inline-flex; gap: 4px; align-items: center; }
.plug-warn .ico { width: 13px; height: 13px; }
.plug:not(.on) .plug-ico { opacity: .55; }
.plug-r { display: flex; align-items: center; gap: 4px; }
.plug-r .chev { width: 15px; height: 15px; transition: transform .15s; }
.plug.open .plug-r .chev { transform: rotate(180deg); }
.plug-cfg { padding: 2px 16px 14px 68px; display: grid; gap: 8px; }
.cfg-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: calc(14px * var(--fs)); color: var(--fg-2); }
.cfg-row .select { width: 220px; height: 32px; font-size: calc(14px * var(--fs)); }
.empty-line { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--fg-3); font-size: calc(14px * var(--fs)); }
.empty-big { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 56px 24px; border: 1px dashed var(--line-2); border-radius: var(--r-xl); color: var(--fg-3); font-size: calc(14.5px * var(--fs)); }
.empty-big > .ico { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); color: var(--accent); margin-bottom: 6px; }
.empty-big b { color: var(--fg); font-size: calc(16.5px * var(--fs)); }
.empty-big > span { max-width: 32em; }
.empty-big .btn { margin-top: 8px; }
.empty-ex { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.auto-list { display: grid; gap: 10px; }
.auto-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; display: grid; gap: 8px; box-shadow: var(--shadow-1); }
.auto-card.off { opacity: .7; }
.auto-top { display: flex; align-items: center; gap: 12px; }
.auto-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.auto-main { flex: 1; display: grid; min-width: 0; }
.auto-main b { font-size: calc(15.5px * var(--fs)); }
.auto-main span { font-size: calc(13.5px * var(--fs)); color: var(--fg-3); }
.auto-prompt { margin: 0; font-size: calc(14px * var(--fs)); color: var(--fg-2); background: var(--surface-2); padding: 8px 10px; border-radius: var(--r-sm); }
.auto-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: calc(13.5px * var(--fs)); }
.auto-hist { display: flex; align-items: center; gap: 4px; }
.auto-hist em { font-style: normal; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); margin-left: 4px; }
.hist-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--line-2); }
/* 自动化没跑完的一次是黄点（旁边写的是「待处理」），不用红色 */
.hist-dot.done { background: var(--ok); } .hist-dot.error { background: var(--warn); } .hist-dot.running { background: var(--accent); }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.lib-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-1); transition: box-shadow .15s, transform .15s; }
.lib-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.lib-thumb { position: relative; display: block; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; background: #fff; border-bottom: 1px solid var(--line); }
.lib-thumb iframe { width: 400%; height: 400%; transform: scale(.25); transform-origin: 0 0; border: 0; pointer-events: none; background: #fff; }
.lib-pub { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: calc(12.5px * var(--fs)); background: var(--fg); color: var(--bg); padding: 2px 8px; border-radius: 99px; }
.lib-pub .ico { width: 13px; height: 13px; }
.lib-meta { padding: 10px 12px 4px; display: grid; min-width: 0; }
.lib-meta b { font-size: calc(15px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-meta span { font-size: calc(13px * var(--fs)); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-acts { display: flex; gap: 6px; padding: 8px 12px 12px; flex-wrap: wrap; }
.doc-list { display: grid; gap: 4px; }
.doc-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); text-align: left; }
.doc-row:hover { border-color: var(--line-2); }
.doc-row .ico { color: var(--fg-3); }
.doc-row span { display: grid; min-width: 0; }
.doc-row b { font: 500 calc(13px * var(--fs)) var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-row em { font-style: normal; font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.set-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.set-tabs::-webkit-scrollbar { display: none; }
.set-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; color: var(--fg-3); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.set-tabs button .ico { width: 16px; height: 16px; }
.set-tabs button:hover { color: var(--fg); }
.set-tabs button.on { color: var(--fg); border-bottom-color: var(--accent); font-weight: 500; }
.set-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 4px 16px; margin-bottom: 14px; box-shadow: var(--shadow-1); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-text { display: grid; min-width: 0; }
.set-text b { font-weight: 550; font-size: calc(14.5px * var(--fs)); }
.set-text span { font-size: calc(13.5px * var(--fs)); color: var(--fg-3); }
.set-ctl { display: flex; gap: 6px; align-items: center; flex: none; }
.set-ctl .input, .set-ctl .select { width: 260px; }
.set-sub { font-size: calc(14px * var(--fs)); color: var(--fg-2); padding: 12px 0 8px; }
.set-foot { display: flex; gap: 8px; padding: 12px 0; }
.radio-list { display: grid; gap: 6px; padding-bottom: 12px; }
.radio-card { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r); text-align: left; transition: border-color .12s, background .12s; }
.radio-card:hover { border-color: var(--line-2); }
.radio-card.on { border-color: var(--accent); background: var(--accent-soft); }
.radio-card > i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: none; margin-top: 2px; background: var(--surface); }
.radio-card.on > i { border: 5px solid var(--accent); }
.radio-card > span { display: grid; gap: 1px; }
.radio-card b { font-weight: 550; display: flex; gap: 8px; align-items: center; }
.radio-card b em { font-style: normal; font-weight: 400; font-size: calc(12.5px * var(--fs)); padding: 0 6px; border-radius: 4px; }
.radio-card b em.ok { background: var(--ok-soft); color: var(--ok); }
.radio-card b em.off { background: var(--surface-2); color: var(--fg-3); }
.radio-card > span > span { font-size: calc(13.5px * var(--fs)); color: var(--fg-3); }
.risk-table { display: grid; gap: 2px; padding-bottom: 8px; }
.risk-row { display: grid; grid-template-columns: 20px 90px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; font-size: calc(14px * var(--fs)); border-bottom: 1px solid var(--line); }
.risk-row .ico { width: 16px; height: 16px; color: var(--fg-3); }
.risk-row b { font-weight: 500; }
.risk-row code { font: calc(12px * var(--fs)) var(--mono); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; }
.shop-card { padding: 14px 16px 6px; }
.shop-card .field { margin-bottom: 12px; }
.shop-tip { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r); background: var(--accent-soft); color: var(--fg-2); line-height: 1.55; }
.shop-tip .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent); }
.set-card.about { display: flex; align-items: center; gap: 14px; padding: 16px; }
.about-logo { width: 48px; height: 48px; border-radius: 14px; }
.set-card.about div { display: grid; }
.set-card.about b { font-size: calc(16px * var(--fs)); }
.set-card.about span { color: var(--fg-3); font-size: calc(14px * var(--fs)); }
.target-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
.target { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; text-align: left; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r); transition: border-color .12s, background .12s; }
.target:hover:not(:disabled) { border-color: var(--line-2); }
.target.on { border-color: var(--accent); background: var(--accent-soft); }
.target .ico { grid-row: span 2; width: 20px; height: 20px; margin-top: 1px; color: var(--fg-2); }
.target.on .ico { color: var(--accent-ink); }
.target b { font-weight: 550; font-size: calc(14.5px * var(--fs)); }
.target span { font-size: calc(13px * var(--fs)); color: var(--fg-3); line-height: 1.45; }
.share-box { display: grid; gap: 8px; padding: 12px; border-radius: var(--r); background: var(--ok-soft); margin-bottom: 12px; }
.share-box > span { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-size: calc(14px * var(--fs)); font-weight: 500; }
.share-url { display: flex; gap: 6px; }
.share-qr { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.sq-code { flex: none; width: 112px; height: 112px; padding: 6px; border-radius: 10px; background: #fff; box-shadow: var(--shadow-1); }
.sq-code svg { display: block; width: 100%; height: 100%; }
.share-qr > div { display: grid; gap: 4px; min-width: 0; }
.share-qr b { font-size: calc(15px * var(--fs)); color: var(--fg); }
.share-qr > div > span { font-size: calc(13px * var(--fs)); color: var(--fg-2); line-height: 1.5; }
.share-qr .btn { justify-self: start; margin-top: 4px; }
.share-url .input { height: 30px; font-size: calc(13.5px * var(--fs)); }


/* ---------- 窄屏 ---------- */
@media (max-width: 1180px) {
  .shell.panel-on { --panel-w: min(420px, 42vw) !important; }
}
@media (max-width: 900px) {
  .shell, .shell.panel-on, .shell.drawer-pinned, .shell.drawer-pinned.panel-on { grid-template-columns: 0 minmax(0, 1fr) 0 0; }
  .drawer { width: min(340px, 88vw); }
  .hide-mobile { display: none !important; }
  .panel-resizer { display: none; }
  .panel-on .panel { display: none; }
  .panel-mobile .panel { display: flex; position: fixed; z-index: 70; inset: 0; border: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); animation: slideup .22s ease; }
  @keyframes slideup { from { transform: translateY(16px); opacity: 0; } }
  .panel-close { display: inline-flex; }
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar.is-chat { height: 62px; }
  .head-me { height: 40px; padding: 3px 3px 3px 10px; gap: 5px; }
  .head-me .av { width: 34px; height: 34px; }
  .head-acts { gap: 8px; }
  .round-btn { width: 40px; height: 40px; }
  .round-btn .ico { width: 20px; height: 20px; }
  .hc-name b { font-size: calc(16.5px * var(--fs)); }
  .chat-inner { padding: 8px 12px 12px; }
  .row-body { max-width: 84%; }
  .row.other.wide .row-body { width: 84%; }
  .row-av, .row-av .av { width: 38px !important; }
  .row-av .av { height: 38px !important; }
  .hover-bar { display: none; }
  .msg-meta { display: none; }
  .composer-dock { padding: 4px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .composer textarea { font-size: calc(16px * var(--fs)); }
  .c-ico { width: 36px; height: 36px; }
  .at-picker { left: 10px; right: 10px; }
  .wl-mems { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page { padding: 20px 16px 48px; }
  .page-head { flex-direction: column; }
  .plug-cfg { padding: 2px 14px 14px 14px; }
  .cfg-row { flex-direction: column; align-items: stretch; gap: 4px; }
  .cfg-row .select { width: 100%; }
  .set-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .set-ctl { flex-wrap: wrap; }
  .set-ctl .input, .set-ctl .select { width: 100%; }
  .target-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: 1fr; }
  .risk-row { grid-template-columns: 20px 80px 1fr auto; }
  .tool-sum { display: none; }
  .tool-head .tool-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
  .staff-hero { flex-direction: column; text-align: center; }
  .staff-hero h1 { justify-content: center; }
  .sh-acts { justify-content: center; }
  .staff-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sc-body { padding: 10px 12px 12px; }
  .sc-body .skill-chips { display: none; }
}
@media (max-width: 420px) {
  .c-icons .c-ico[data-act="quick-menu"] { display: none; }
  .head-acts .round-btn[data-act="open-board"] { display: none; }
}


/* ---------- v6 打磨：动效、回应、未读、背景 ---------- */
.bubble.typing { padding: 12px 15px; gap: 4px; }
.bubble.typing i { width: 7px; height: 7px; background: var(--fg-3); opacity: .5; animation: typing 1.3s infinite ease-in-out; }
.bubble.typing i:nth-child(2) { animation-delay: .16s; } .bubble.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.bubble { transition: filter .15s; }
.row.other .bubble:not(.typing):active { filter: brightness(.96); }

.jump { position: absolute; right: max(20px, calc((100% - 860px) / 2 + 20px)); bottom: 108px; z-index: 6; display: inline-flex; align-items: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 11px; border-radius: 99px; background: var(--surface); color: var(--fg); box-shadow: var(--shadow-2); font-size: calc(14px * var(--fs)); font-weight: 600; animation: pop .2s ease; }
.jump .ico { width: 18px; height: 18px; }
.jump.has-n { background: var(--fg); color: var(--bg); }
.jump span:empty { display: none; }
.chat { position: relative; }

.chat-row.unread .cr-top b { font-weight: 700; }
.chat-row.unread .cr-last { color: var(--fg); font-weight: 500; }
.cr-last > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.cr-badge { font-style: normal; flex: none; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: calc(12px * var(--fs)); font-weight: 600; text-align: center; }
.dr-brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: calc(15px * var(--fs)); }
.dr-brand img { width: 20px; height: 20px; border-radius: 6px; }
.dr-brand em { font-style: normal; font-weight: 400; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }

/* 收起状态的工作记录是一颗小胶囊，不打断聊天 */
.work { transition: border-color .15s; }
.work:not(.open):not(.ask) { width: auto; max-width: 100%; align-self: flex-start; border-radius: 99px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.work:not(.open):not(.ask) .work-head { padding: 6px 12px; border-radius: 99px; gap: 6px; font-size: calc(13.5px * var(--fs)); }
.work:not(.open):not(.ask) .wk-t { font-weight: 550; }
.work:not(.open):not(.ask) .wk-s { max-width: 34ch; }
/* 干活中的那张占满一行宽（行也变宽了）：每步文字长短不一，胶囊不跟着忽宽忽窄 */
.work.live:not(.open):not(.ask) { width: 100%; }
.work.live:not(.open):not(.ask) .wk-s { max-width: none; }
.work.ask { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.assign { border-radius: 18px; padding: 7px 12px 7px 7px; background: color-mix(in srgb, var(--surface) 90%, transparent); }
.task-ref { align-items: center; padding: 6px 12px 6px 6px; border-radius: 16px; border-left-width: 1px; }
.task-ref img { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.sender { padding-left: 13px; margin-bottom: 1px; }
.sender em { font-size: calc(11.5px * var(--fs)); padding: 0 5px; }
.card-persona { display: flex; gap: 6px; align-items: flex-start; font-size: calc(14px * var(--fs)); color: var(--fg-2); background: var(--surface-2); padding: 8px 10px; border-radius: var(--r); margin: 0 0 10px; }
.card-persona .ico { width: 15px; height: 15px; color: var(--accent); margin-top: 2px; flex: none; }
.dl-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 70%, rgba(0, 0, 0, .06)); pointer-events: none; }
.deliver-card { transition: transform .15s, box-shadow .15s; }
.deliver-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }

/* 聊天背景 */
.chat.has-wall .date-sep span { background: color-mix(in srgb, var(--surface) 72%, transparent); color: var(--fg-2); }
.chat.has-wall .sys span { background: color-mix(in srgb, var(--surface) 72%, transparent); }
.chat.has-wall .sender { color: var(--fg-2); }
.chat.has-wall .msg-meta { color: var(--fg-2); }
.chat.has-wall .composer { background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow-2); }
.chat.has-wall .c-hint { color: var(--fg-2); }
.chat.has-wall .example-banner { background: color-mix(in srgb, var(--surface) 80%, transparent); }
.chat.wall-ink-light .date-sep span, .chat.wall-ink-light .sys span { background: rgba(0, 0, 0, .28); color: rgba(255, 255, 255, .92); }
.chat.wall-ink-light .sender, .chat.wall-ink-light .msg-meta, .chat.wall-ink-light .c-hint, .chat.wall-ink-light .c-hint span { color: rgba(255, 255, 255, .85); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.chat.wall-ink-light .welcome h2, .chat.wall-ink-light .welcome p, .chat.wall-ink-light .wl-mem b, .chat.wall-ink-light .wl-mem em { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.chat.wall-ink-light .sender em { background: rgba(255, 255, 255, .18); color: #fff; }
.wall-dim { display: grid; gap: 6px; font-size: calc(14px * var(--fs)); color: var(--fg-2); padding-bottom: 12px; }
.wall-dim input { width: 100%; accent-color: var(--accent); }

/* 顶栏更轻 */
.topbar { border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }
.round-btn { box-shadow: 0 0 0 1px var(--line); }
.composer { border-color: var(--line); background: var(--surface); }
.composer:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); }
@media (max-width: 900px) {
  .jump { right: 14px; bottom: 96px; }
}


/* ---------- v6.1：消息特效、手势、侧边栏员工 ---------- */
/* 左滑回复 */
.row .row-body { transition: transform .28s cubic-bezier(.2, .9, .3, 1.2); }
.row.swiping::after { content: "↩"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%) scale(calc(.5 + var(--sw, 0) * .5)); opacity: var(--sw, 0); width: 30px; height: 30px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); display: flex; align-items: center; justify-content: center; font-size: calc(16px * var(--fs)); color: var(--accent-ink); }
.row { position: relative; }
.drawer-dragging .drawer { transition: none !important; }
.drawer-dragging .drawer-back { display: block; position: fixed; inset: 0; z-index: 55; background: var(--overlay); }

/* 侧边栏：新建群聊、员工私聊 */
.dr-new { display: flex; align-items: center; gap: 12px; margin: 4px 12px 2px; padding: 10px 12px; border-radius: var(--r-lg); background: linear-gradient(135deg, color-mix(in srgb, #ff6fa3 14%, var(--surface)), color-mix(in srgb, #8b6cf0 14%, var(--surface))); border: 1px solid var(--line); text-align: left; width: calc(100% - 24px); transition: transform .12s; }
.dr-new:active { transform: scale(.98); }
.dr-new > .ico:first-child { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: linear-gradient(135deg, #ff7ba9, #e5447d 55%, #8b6cf0); color: #fff; }
.dr-new > span { flex: 1; display: grid; }
.dr-new b { font-size: calc(15.5px * var(--fs)); }
.dr-new em { font-style: normal; font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.dr-new > .ico:last-child { width: 18px; height: 18px; color: var(--fg-3); }
.dr-empty { font-size: calc(13.5px * var(--fs)); color: var(--fg-3); padding: 4px 14px 8px; }
.dr-sec .link-btn { font-size: calc(13px * var(--fs)); font-weight: 500; letter-spacing: 0; }
.staff-list { display: grid; gap: 1px; padding: 0 8px; }
.staff-row { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: var(--r-lg); text-align: left; width: 100%; min-width: 0; }
.staff-row:hover { background: var(--surface-2); }
.staff-row.active { background: var(--surface); box-shadow: var(--shadow-1); }
.av-wrap { position: relative; flex: none; }
.av-wrap .av { width: 40px; height: 40px; }
.presence { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2.5px var(--side); }
.presence.busy { background: var(--accent); animation: pulse 1.2s infinite; }
.sr-main { flex: 1; display: grid; min-width: 0; }
.sr-main b { font-size: calc(15px * var(--fs)); font-weight: 600; display: flex; align-items: baseline; gap: 6px; }
.sr-main b em { font-style: normal; font-weight: 400; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.sr-main > span { font-size: calc(13.5px * var(--fs)); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 新建群聊 */
.nc-preview { display: flex; align-items: center; justify-content: center; min-height: 64px; margin-bottom: 10px; }
.nc-preview img { width: 52px; height: 52px; border-radius: 50%; margin-left: -14px; box-shadow: 0 0 0 3px var(--surface); position: relative; }
.nc-preview img.in { animation: ncIn .42s cubic-bezier(.2, 1.5, .3, 1) both; }
.nc-preview img.out { animation: ncOut .22s ease-in forwards; }
@keyframes ncIn { from { transform: translateY(26px) scale(.3); opacity: 0; } }
@keyframes ncOut { to { transform: scale(.3); opacity: 0; width: 0; margin-left: 0; box-shadow: none; } }
.nc-preview img:first-child { margin-left: 0; }
.nc-preview span { font-size: calc(14px * var(--fs)); color: var(--fg-3); padding: 18px 0; }
.nc-label { display: flex; align-items: center; gap: 8px; }
.nc-label em { font-style: normal; font-weight: 400; font-size: calc(13px * var(--fs)); color: var(--accent-ink); }
.nc-label .link-btn { margin-left: auto; }
.nc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.nc-mem { position: relative; display: grid; justify-items: center; gap: 2px; padding: 12px 6px 10px; border-radius: var(--r-lg); border: 1.5px solid var(--line); transition: border-color .15s, background .15s, transform .12s; }
.nc-mem:active { transform: scale(.96); }
.nc-mem .av { width: 48px; height: 48px; margin-bottom: 4px; transition: transform .2s cubic-bezier(.2, 1.4, .3, 1); }
.nc-mem b { font-size: calc(14.5px * var(--fs)); color: var(--fg); }
.nc-mem em { font-style: normal; font-size: calc(12px * var(--fs)); color: var(--fg-3); }
.nc-mem.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--surface)); }
.nc-mem.on .av { transform: scale(1.06); }
.nc-tick { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: #fff; background: var(--surface); }
.nc-tick .ico { width: 13px; height: 13px; stroke-width: 2.6; opacity: 0; }
.nc-mem.on .nc-tick { background: var(--c); border-color: var(--c); animation: reactPop .3s cubic-bezier(.2, 1.4, .3, 1); }
.nc-mem.on .nc-tick .ico { opacity: 1; }


/* ---------- v7：IG 式消息动效、长按菜单、头像长按 @ ---------- */
/* 新消息：轻轻淡入、往上浮一点就停（10.30 起不再缩放回弹：配置一般的手机掉帧时，回弹看着像在抽搐） */
.enter { animation: popIn .32s both; }
.date-sep.enter, .sys.enter { animation: fade .3s ease both; }
.bubble.typing.enter { animation: fade .25s ease both; }
.row.me .bubble.enter { animation: sendIn .3s both; }
.row.other .sender.enter, .row.other .task-ref.enter { animation: fade .3s ease both; }
@keyframes popIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sendIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes typingIn { from { opacity: 0; } to { opacity: 1; } }
.bubble.md.enter, .row.me .bubble.enter { will-change: transform, opacity; }

/* 手机上长按不选字、不弹系统图片菜单 */
.chat-scroll img, .drawer img, .topbar img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.av-btn { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .18s; }
.av-btn.pressed { transform: scale(.88); }
@media (hover: none) {
  .chat-scroll .bubble, .chat-scroll .sender { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
  .row.other .bubble:not(.typing):active { filter: none; }
}
.bubble.mm-src { visibility: hidden; }
.composer.flash { animation: cFlash .5s ease; }
@keyframes cFlash { 30% { box-shadow: 0 0 0 4px var(--accent-soft); } }

@keyframes reactPop { from { transform: scale(.3); opacity: 0; } }

/* 长按消息：背景模糊，消息浮起，下面操作菜单 */
.mm { position: fixed; inset: 0; z-index: 150; -webkit-user-select: none; user-select: none; }
.mm-back { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 45%, transparent); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); opacity: 0; transition: opacity .2s ease; }
.mm.in .mm-back { opacity: 1; }
/* 过渡只在 .in / .out 时开，避免先量尺寸、后设 --dy 时被过渡吃掉起点 */
.mm-msg { position: fixed; transform: translate(var(--dx, 0px), var(--dy, 0px)); transform-origin: 0 50%; pointer-events: none; }
.mm.in .mm-msg, .mm.out .mm-msg { transition: transform .28s cubic-bezier(.2, .9, .3, 1); }
.mm.mine .mm-msg { transform-origin: 100% 50%; }
.mm.in .mm-msg { transform: none; }
.mm.out .mm-msg { transition-duration: .22s; }
.mm.out { pointer-events: none; }
.mm-msg .bubble { box-shadow: 0 8px 28px rgba(0, 0, 0, .14); max-width: none; height: 100%; overflow: hidden; }
.mm-msg.cut .bubble { -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.mm.mine .mm-msg .bubble { background: var(--bubble-me); color: #fff; }
.mm.mine .mm-msg .at { color: inherit; font-weight: inherit; }
.mm-acts { position: fixed; min-width: 210px; padding: 6px 0; border-radius: 16px; background: var(--surface); box-shadow: 0 8px 30px rgba(0, 0, 0, .18); opacity: 0; transform: translateY(-6px) scale(.96); transform-origin: 50% 0; transition: opacity .18s, transform .22s cubic-bezier(.2, .9, .3, 1); }
.mm.mine .mm-acts { transform-origin: 100% 0; }
.mm.in .mm-acts { opacity: 1; transform: none; }
.mm-time { font-size: calc(13px * var(--fs)); color: var(--fg-3); padding: 6px 16px 6px; }
.mm-acts button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px; font-size: calc(16px * var(--fs)); text-align: left; color: var(--fg); -webkit-tap-highlight-color: transparent; }
.mm-acts button:active, .mm-acts button:hover { background: var(--surface-2); }
.mm-acts button .ico { width: 20px; height: 20px; }
.mm-acts button.danger { color: var(--err); }
.mm.in .mm-acts button { animation: actIn .22s ease-out both; animation-delay: calc(var(--i) * 18ms + 30ms); }
@keyframes actIn { from { opacity: 0; transform: translateY(-3px); } }

/* 删除消息：收起 */
.row.leaving { overflow: hidden; opacity: 0; transition: height .22s ease, opacity .18s ease, margin .22s ease; margin-top: 0 !important; }

/* 转发 */
.fw-list { display: grid; gap: 2px; max-height: 60vh; overflow-y: auto; margin: 0 -6px; }
.fw-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-lg); text-align: left; width: 100%; }
.fw-item:hover { background: var(--surface-2); }
.fw-item > span:not(.av):not(.av-team) { flex: 1; display: grid; min-width: 0; }
.fw-item b { font-size: calc(15.5px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-item em { font-style: normal; font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.fw-item > .ico { width: 18px; height: 18px; color: var(--fg-3); }

@media (prefers-reduced-motion: reduce) { .enter, .mm-acts button { animation: none !important; } .mm-msg, .mm-acts { transition: none !important; } }

/* ---------- 7.1：设置 → API 密钥 ---------- */
.key-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.key-wrap .input { padding-right: 36px; width: 100%; }
.key-wrap .icon-btn { position: absolute; right: 4px; }
.set-ctl .key-wrap { width: min(280px, 100%); }
.key-ok { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-style: normal; font-size: calc(12.5px * var(--fs)); color: var(--ok); font-weight: 500; }
.key-ok .ico { width: 13px; height: 13px; }
.key-list { display: grid; gap: 6px; }
.key-item { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.key-item.open { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); box-shadow: 0 4px 18px color-mix(in srgb, var(--c) 14%, transparent); }
.key-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; }
.key-head .av { width: 40px; height: 40px; flex: none; }
.kh-main { flex: 1; display: grid; min-width: 0; gap: 1px; }
.kh-main b { font-size: calc(15.5px * var(--fs)); display: flex; align-items: baseline; gap: 6px; }
.kh-main b em { font-style: normal; font-weight: 400; font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.kh-main > span { font-size: calc(13.5px * var(--fs)); color: var(--fg-3); display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot-ok { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.key-head .chev { width: 18px; height: 18px; color: var(--fg-3); transition: transform .2s; }
.key-item.open .key-head .chev { transform: rotate(180deg); }
.key-body { padding: 2px 14px 14px; display: grid; gap: 10px; animation: fade .2s ease; }
.key-body .field > span em { font-style: normal; font-weight: 400; color: var(--fg-3); margin-left: 6px; font-size: calc(12.5px * var(--fs)); }
.preset-row { display: flex; flex-wrap: wrap; gap: 6px; }
.preset-chip { height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface-2); font-size: calc(14px * var(--fs)); color: var(--fg-2); transition: background .15s, color .15s, border-color .15s, transform .1s; }
.preset-chip:active { transform: scale(.96); }
.preset-chip.on { background: color-mix(in srgb, var(--c, var(--accent)) 16%, var(--surface)); border-color: var(--c, var(--accent)); color: var(--fg); font-weight: 600; }
.key-body .set-foot { padding: 0; }
.key-body .field { margin-bottom: 0; }
@media (max-width: 520px) { .key-body .field-row { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- 7.2：聊天主题（canvas 背景） ---------- */
.chat > canvas.chat-wall, .wall-live > canvas.chat-wall { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
canvas.chat-wall.in { animation: wallIn .6s ease both; }
@keyframes wallIn { from { opacity: 0; } }
.chat > .chat-scroll, .chat > .composer-dock { position: relative; z-index: 1; }
/* 有主题背景时，别人的气泡用半透明的白（深色用半透明的深灰），像 IG 的聊天主题 */
.chat.has-wall, .wall-live.has-wall { --bubble: rgba(255, 255, 255, .86); }
:root[data-theme="dark"] .chat.has-wall, :root[data-theme="dark"] .wall-live.has-wall { --bubble: rgba(36, 33, 42, .86); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chat.has-wall, :root:not([data-theme="light"]) .wall-live.has-wall { --bubble: rgba(36, 33, 42, .86); } }
.chat.has-wall .row.other .bubble:not(.typing), .chat.has-wall .bubble.typing { box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px 10px; padding: 4px 0 12px; }
.wall-tile { display: grid; gap: 7px; justify-items: center; font-size: calc(13.5px * var(--fs)); color: var(--fg-2); -webkit-tap-highlight-color: transparent; }
.wt-prev { position: relative; width: 100%; aspect-ratio: 9 / 15; border-radius: 16px; overflow: hidden; background: var(--bg); box-shadow: 0 0 0 1px var(--line) inset, var(--shadow-1); transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), box-shadow .2s; }
.wt-prev canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wall-tile:hover .wt-prev { transform: translateY(-2px); }
.wall-tile:active .wt-prev { transform: scale(.95); }
.wall-tile.on .wt-prev { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); transform: scale(1.02); }
.wall-tile.on .wt-n { color: var(--accent-ink); font-weight: 600; }
.wt-prev.custom { background: var(--surface-2); border: 1.5px dashed var(--line-2); box-shadow: none; display: flex; align-items: center; justify-content: center; color: var(--fg-3); }
.wt-b1, .wt-b2, .wt-b3 { position: absolute; height: 11px; border-radius: 6px; z-index: 1; }
.wt-b1 { left: 9%; top: 42%; width: 50%; background: var(--bubble); }
.wt-b2 { left: 9%; top: 52%; width: 34%; background: var(--bubble); }
.wt-b3 { right: 9%; top: 65%; width: 46%; background: var(--bubble-me); }
.wall-live { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 26px 16px; border-radius: var(--r-xl); margin: 2px 0 16px; background: var(--bg); box-shadow: 0 0 0 1px var(--line) inset; min-height: 170px; justify-content: center; }
.wl-bubble { position: relative; z-index: 1; max-width: 70%; padding: 8px 14px; border-radius: 20px; font-size: calc(15px * var(--fs)); }
.wl-bubble.other { background: var(--bubble); color: var(--fg); align-self: flex-start; }
.wl-bubble.other + .wl-bubble.other { border-top-left-radius: 6px; }
.wl-bubble.other:has(+ .wl-bubble.other) { border-bottom-left-radius: 6px; }
.wl-bubble.me { background: var(--bubble-me); color: #fff; align-self: flex-end; margin-top: 8px; }

/* ---------- 7.2：动效节奏（慢一点、有弹性，像 iOS / Instagram） ---------- */
:root { --ease-ios: cubic-bezier(.32, .72, 0, 1); --ease-spring: cubic-bezier(.2, .9, .3, 1.12); }
/* 侧边栏：更从容的滑入，遮罩淡入淡出（关的时候也有过程） */
.drawer { transition: transform .46s var(--ease-ios); }
.drawer-back { display: block !important; position: fixed; inset: 0; z-index: 55; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity .42s ease; }
.drawer-open:not(.drawer-pinned) .drawer-back { opacity: 1; pointer-events: auto; animation: none; }
.drawer-pinned .drawer-back { opacity: 0 !important; pointer-events: none !important; }
.drawer-dragging .drawer-back { transition: none; pointer-events: auto; }
/* 关着的时候遮罩和侧边栏都不参与渲染（visibility: hidden，等收起动画播完再藏）：新版 iPhone Safari 会拿顶上的固定元素给状态栏取色，
   以前遮罩一直铺满全屏、只是 opacity 0，状态栏就被染成了灰色（顶部的色差） */
.drawer-back { visibility: hidden; transition: opacity .42s ease, visibility 0s linear .42s; }
.drawer-open:not(.drawer-pinned) .drawer-back { visibility: visible; transition: opacity .42s ease, visibility 0s; }
.drawer-dragging .drawer-back { visibility: visible; transition: none; }
.drawer-pinned .drawer-back { visibility: hidden !important; }
.drawer { visibility: hidden; transition: transform .46s var(--ease-ios), visibility 0s linear .46s; }
.drawer-open .drawer, .drawer-pinned .drawer { visibility: visible; transition: transform .46s var(--ease-ios), visibility 0s; }
.drawer-dragging .drawer { visibility: visible; }
/* 状态栏后面露出来的是 html 的底色：和页面一样；手机上顶栏用不透明的底色，状态栏取色和顶栏一致 */
html { background: var(--bg); }
@media (max-width: 900px) { .topbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* 页面切换：往里走从右边推进来，返回从左边回来，换群聊轻轻淡入 */
.view.v-push { animation: vPush .5s var(--ease-ios) both; }
.view.v-pop { animation: vPop .5s var(--ease-ios) both; }
.view.v-fade { animation: vFade .42s var(--ease-ios) both; }
@keyframes vPush { from { opacity: 0; transform: translateX(42px); } }
@keyframes vPop { from { opacity: 0; transform: translateX(-30px); } }
@keyframes vFade { from { opacity: 0; transform: scale(.985); } }
/* 下拉菜单：从按钮那一侧弹开，关的时候淡出 */
.menu { transform: scale(.92); transition: opacity .2s ease, transform .32s var(--ease-spring); }
.menu.in { transform: none; }
.menu.out { opacity: 0; transform: scale(.96); transition: opacity .15s ease, transform .15s ease; pointer-events: none; }
/* 弹层：电脑上柔和放大，手机上是从底部升起的面板 */
.modal-back { backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1); animation: fade .32s ease both; }
.modal { animation: modalIn .42s var(--ease-spring) both; }
#modal-root.closing .modal { animation: modalOut .26s ease both; }
#modal-root.closing .modal-back { animation: fadeOut .28s ease both; }
#modal-root.closing { pointer-events: none; }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@keyframes modalOut { to { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes fadeOut { to { opacity: 0; } }
@media (max-width: 600px) {
  #modal-root { place-items: end stretch; padding: 0; }
  .modal, .modal.sm { width: 100%; max-height: 90vh; border-radius: 24px 24px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation: sheetUp .52s var(--ease-ios) both; }
  .modal::before { content: ""; display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 8px auto 0; flex: none; }
  #modal-root.closing .modal { animation: sheetDown .3s cubic-bezier(.4, 0, 1, 1) both; }
}
@keyframes sheetUp { from { transform: translateY(100%); } }
@keyframes sheetDown { to { transform: translateY(100%); } }
/* 提示条：从上方弹下来 */
.toast { transform: translateY(-14px) scale(.96); transition: opacity .3s ease, transform .46s var(--ease-spring); }
.toast.in { transform: none; }
/* 设置页切换分栏时内容淡入 */
.tab-in { animation: vFade .36s var(--ease-ios) both; }
/* 按下的回弹 */
.btn, .chip, .round-btn, .icon-btn, .c-ico, .nav-item, .chat-row, .staff-row { transition: transform .22s var(--ease-spring), background .15s, color .15s, border-color .15s, box-shadow .15s; }
.btn:active, .chip:active, .round-btn:active, .c-ico:active, .nav-item:active, .chat-row:active, .staff-row:active { transform: scale(.97); }
@media (max-width: 900px) { .panel-mobile .panel { animation: sheetUp .5s var(--ease-ios); } }
@media (prefers-reduced-motion: reduce) { .view.v-push, .view.v-pop, .view.v-fade, .modal, .tab-in, .enter { animation: none !important; } .drawer, .menu, .toast { transition: none !important; } }

/* 回复引用：像 IG，小标签 + 半透明的原消息，压在自己的气泡下面 */
.row.me .quote-ref { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; background: none; padding: 0; margin-bottom: -14px; max-width: 100%; }
.qr-label { display: inline-flex; align-items: center; gap: 4px; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); padding-right: 4px; }
.qr-label .ico { width: 13px; height: 13px; }
.qr-bubble { display: block; max-width: min(100%, 280px); padding: 8px 13px 20px; border-radius: 18px; background: var(--bubble); color: var(--fg-2); font-size: calc(14px * var(--fs)); line-height: 1.45; opacity: .78; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.row.me .quote-ref + .bubble { position: relative; z-index: 1; }
.chat.wall-ink-light .qr-label { color: rgba(255, 255, 255, .8); }

/* ---------- 7.3：记忆 ---------- */
.mem-add { display: flex; gap: 8px; margin-bottom: 10px; }
.mem-add .input { flex: 1; min-width: 0; }
.mem-list, .mem-emp { display: grid; gap: 6px; }
.mem-emp { margin-bottom: 12px; }
.mem-emp > b { display: flex; align-items: center; gap: 6px; font-size: calc(14px * var(--fs)); margin: 4px 0 2px; }
.mem-emp > b img { width: 20px; height: 20px; border-radius: 50%; }
.mem-item { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 8px; padding: 9px 8px 8px 12px; border-radius: var(--r); background: var(--surface-2); animation: fade .25s ease; }
.mem-text { font-size: calc(15px * var(--fs)); color: var(--fg); line-height: 1.5; }
.mem-meta { grid-row: 2; display: flex; align-items: center; gap: 4px; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); margin-top: 2px; }
.mem-meta img { width: 14px; height: 14px; border-radius: 50%; }
.mem-item .icon-btn { grid-row: 1 / span 2; grid-column: 2; align-self: center; }

/* ---------- 7.3：招聘新员工 ---------- */
.hire-card { border: 1.5px dashed var(--line-2); background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; min-height: 200px; }
.hire-card .sc-body { align-items: center; text-align: center; }
.hc-stack { display: inline-flex; align-items: center; }
.hc-stack img, .hc-stack .hc-plus { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface); }
.hc-stack > * + * { margin-left: -12px; }
.hc-plus { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ff7ba9, #e5447d 55%, #8b6cf0); color: #fff; position: relative; }
.hc-plus .ico { width: 22px; height: 22px; }
.hire-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 2px 0 12px; }
.hire-hero img { width: 88px; height: 88px; border-radius: 50%; box-shadow: var(--shadow-2); animation: reactPop .35s cubic-bezier(.2, 1.4, .3, 1); }
.hh-n { font-size: calc(13.5px * var(--fs)); color: var(--fg-2); font-weight: 600; }
.hr-looks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hr-look { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 6px; border-radius: 14px; transition: transform .15s, background .15s; -webkit-tap-highlight-color: transparent; }
.hr-look img { width: 52px; height: 52px; border-radius: 50%; transition: transform .2s cubic-bezier(.2, 1.4, .3, 1); }
.hr-look span { font-size: calc(13px * var(--fs)); color: var(--fg-2); }
.hr-look i { position: absolute; top: 4px; right: 4px; font-style: normal; font-size: calc(11px * var(--fs)); padding: 1px 5px; border-radius: 8px; background: var(--surface-2, rgba(0,0,0,.06)); color: var(--fg-3); }
.hr-look.on { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent) inset; }
.hr-look.on img { transform: scale(1.08); }
.hr-look.on span { color: var(--fg); font-weight: 600; }
.hr-look:active img { transform: scale(.92); }
.hr-personas { display: flex; flex-wrap: wrap; gap: 6px; }
.hr-groups { display: grid; gap: 6px; }
.hr-g { display: flex; align-items: center; gap: 8px; font-size: calc(15px * var(--fs)); color: var(--fg); }
.hr-g input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---------- 7.3：图片消息 ---------- */
.photo-grid { display: grid; gap: 3px; border-radius: 20px; overflow: hidden; max-width: min(280px, 100%); }
.photo-grid.n1 { grid-template-columns: 1fr; }
.photo-grid.n2 { grid-template-columns: 1fr 1fr; }
.photo-grid.n3, .photo-grid.n4 { grid-template-columns: 1fr 1fr; }
.photo-grid.n3 .photo:first-child { grid-column: span 2; }
.photo { display: block; position: relative; background: var(--surface-2); overflow: hidden; -webkit-tap-highlight-color: transparent; }
.photo-grid:not(.n1) .photo { aspect-ratio: 1; }
.photo-grid.n1 .photo { max-height: 340px; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--ease-ios, ease); }
.photo:active img { transform: scale(.97); }
.photo-grid.out { border-radius: 18px; max-width: min(300px, 100%); }
.photo.svg { background: #fff; padding: 10px; }
.photo.svg img { object-fit: contain; aspect-ratio: auto; max-height: 260px; }
.att-img { position: relative; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; flex: none; }
.att-img img { width: 100%; height: 100%; object-fit: cover; }
.att-img button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.att-img button .ico { width: 12px; height: 12px; }
/* 看大图 */
.pv-ov { position: fixed; inset: 0; z-index: 160; }
.pv-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .92); opacity: 0; transition: opacity .3s ease; }
.pv-ov.in .pv-back { opacity: 1; }
.pv-ov img { position: fixed; object-fit: contain; border-radius: 6px; transition: transform .38s var(--ease-ios, ease); }
.pv-ov.out .pv-back { opacity: 0; }
.pv-ov.out img { opacity: 0; transform: scale(.92); transition: transform .3s ease, opacity .25s ease; }

/* ---------- 7.3：账号 ---------- */
.acct-off, .acct-form { text-align: center; display: grid; justify-items: center; gap: 6px; }
.acct-form .field, .acct-form .set-foot { width: min(360px, 100%); text-align: left; }
.acct-form .set-foot { justify-content: space-between; align-items: center; }
.acct-ico { width: 54px; height: 54px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ff7ba9, #e5447d 55%, #8b6cf0); color: #fff; margin-bottom: 4px; }
.acct-ico .ico { width: 26px; height: 26px; }
.acct-off p { max-width: 460px; }
.acct-me { display: flex; align-items: center; gap: 12px; }
.acct-me .av { width: 46px; height: 46px; }
.acct-me b { font-size: calc(16px * var(--fs)); display: block; }
.acct-me span:not(.av) { display: inline-flex; align-items: center; gap: 4px; font-size: calc(13.5px * var(--fs)); color: var(--ok); }
.acct-me span.err { color: var(--err); }
.acct-me span .ico { width: 14px; height: 14px; }
.dr-sync { display: flex; align-items: center; gap: 12px; margin: 4px 12px 2px; padding: 9px 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-align: left; width: calc(100% - 24px); }
.dr-sync > .ico:first-child { width: 22px; height: 22px; color: var(--accent-ink); }
.dr-sync > span { flex: 1; display: grid; }
.dr-sync b { font-size: calc(15px * var(--fs)); }
.dr-sync em { font-style: normal; font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.dr-sync > .ico:last-child { width: 16px; height: 16px; color: var(--fg-3); }

/* ---------- 7.3：按住说话 ---------- */
.c-mic { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ptt { position: fixed; inset: 0; z-index: 140; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); background: rgba(0, 0, 0, 0); pointer-events: none; transition: background .25s ease; }
.ptt.in { background: rgba(10, 8, 14, .62); }
.ptt-card { width: min(300px, calc(100vw - 48px)); min-height: 120px; padding: 18px 18px 14px; border-radius: 22px; background: linear-gradient(135deg, #ff7aa8, #e5447d 60%, #c94f9e); color: #fff; box-shadow: 0 12px 40px rgba(229, 68, 125, .35); display: flex; flex-direction: column; gap: 12px; transform: translateY(24px) scale(.9); opacity: 0; transition: transform .35s var(--ease-spring, ease), opacity .2s ease, background .2s ease, box-shadow .2s ease; }
.ptt.in .ptt-card { transform: none; opacity: 1; }
.ptt-text { font-size: calc(16px * var(--fs)); line-height: 1.5; max-height: 30vh; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.ptt:not(.heard) .ptt-text { opacity: .75; }
.ptt-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 26px; }
.ptt-wave i { width: 3px; height: 6px; border-radius: 2px; background: rgba(255, 255, 255, .9); animation: pttWave 1s ease-in-out infinite; }
.ptt-wave i:nth-child(3n) { animation-delay: .15s; } .ptt-wave i:nth-child(3n+1) { animation-delay: .3s; } .ptt-wave i:nth-child(4n) { animation-delay: .45s; } .ptt-wave i:nth-child(5n) { animation-delay: .6s; }
@keyframes pttWave { 50% { height: 24px; } }
.ptt-hint { margin-top: 14px; padding: 5px 12px; border-radius: 99px; background: rgba(0, 0, 0, .45); font-size: calc(14px * var(--fs)); color: #fff; opacity: 0; transition: opacity .2s; }
.ptt.in .ptt-hint { opacity: 1; }
.ptt-cancel { position: fixed; left: 50%; bottom: calc(220px + env(safe-area-inset-bottom, 0px) + 140px); transform: translateX(-50%) scale(.8); width: 58px; height: 58px; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: transform .25s var(--ease-spring, ease), opacity .2s, background .2s; }
.ptt.in .ptt-cancel { opacity: 1; }
.ptt-cancel .ico { width: 26px; height: 26px; }
.ptt.cancel .ptt-card { background: linear-gradient(135deg, #6b6570, #4a4450); box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.ptt.cancel .ptt-wave i { animation-play-state: paused; }
.ptt.cancel .ptt-cancel { background: #eb4d5c; transform: translateX(-50%) scale(1.15); }
.ptt.out { background: rgba(0, 0, 0, 0); }
.ptt.out .ptt-card { transform: translateY(-20px) scale(.96); opacity: 0; }

/* ---------- 7.3：用量与花费 ---------- */
:root { --chart: #E5447D; }
:root[data-theme="dark"] { --chart: #EE4F87; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chart: #EE4F87; } }
.view-usage { position: relative; }
.u-range { margin-bottom: 14px; }
.u-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.u-tile { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.u-tile span { font-size: calc(13.5px * var(--fs)); color: var(--fg-3); }
.u-tile b { font-size: calc(26px * var(--fs)); font-weight: 650; color: var(--fg); letter-spacing: -.5px; }
.u-tile.hero b { font-size: calc(34px * var(--fs)); }
.u-tile em { font-style: normal; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-head { display: flex; align-items: baseline; justify-content: space-between; }
.u-chart { display: grid; grid-template-columns: 38px 1fr; height: 190px; margin-top: 8px; padding-bottom: 22px; }
.u-y { position: relative; }
.u-y span { position: absolute; right: 8px; transform: translateY(50%); font-size: calc(12px * var(--fs)); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.u-plot { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: end; border-bottom: 1px solid var(--line-2); }
.u-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.u-col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; padding: 0 1px; -webkit-tap-highlight-color: transparent; }
.u-col i { display: block; width: min(24px, 70%); background: var(--chart); border-radius: 4px 4px 0 0; min-height: 0; transition: height .5s var(--ease-ios, ease), opacity .15s; }
.u-col:hover i, .u-col:focus-visible i { opacity: .8; }
.u-col em { position: absolute; top: 100%; margin-top: 5px; font-style: normal; font-size: calc(12px * var(--fs)); color: var(--fg-3); white-space: nowrap; }
.u-emps { display: grid; gap: 10px; }
.u-emp { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; }
.u-who { display: flex; align-items: center; gap: 7px; font-size: calc(14.5px * var(--fs)); color: var(--fg); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-who img { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.u-bar { height: 14px; display: flex; }
.u-bar i { display: block; height: 100%; background: var(--chart); border-radius: 0 4px 4px 0; min-width: 2px; }
.u-val { font-size: calc(14px * var(--fs)); color: var(--fg); font-variant-numeric: tabular-nums; text-align: right; display: grid; }
.u-val em { font-style: normal; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.u-table { width: 100%; border-collapse: collapse; font-size: calc(14px * var(--fs)); }
.u-table th, .u-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.u-table th { color: var(--fg-3); font-weight: 500; font-size: calc(13px * var(--fs)); }
.u-price { width: 80px; }
.u-def { font-style: normal; font-size: calc(12px * var(--fs)); color: var(--fg-3); margin-left: 6px; }
.u-tip { position: absolute; z-index: 5; max-width: 260px; padding: 6px 10px; border-radius: 8px; background: var(--fg); color: var(--bg); font-size: calc(13.5px * var(--fs)); pointer-events: none; box-shadow: var(--shadow-2); }
@media (max-width: 700px) { .u-tiles { grid-template-columns: 1fr 1fr; } .u-tile.hero { grid-column: span 2; } .u-emp { grid-template-columns: 76px 1fr auto; } }

/* ---------- 7.3：搜索、置顶、工作动态、上手引导 ---------- */
.pin-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 4px; margin: 8px 12px 0; padding: 4px 6px 4px 4px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-1); animation: popIn .4s both; transform-origin: 50% 0; }
.pin-main { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 6px; text-align: left; }
.pin-main > .ico { width: 16px; height: 16px; color: var(--accent-ink); flex: none; }
.pin-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(14px * var(--fs)); color: var(--fg-2); }
.pin-txt b { color: var(--accent-ink); font-weight: 600; margin-right: 6px; }
.row.flash .row-body { animation: rowFlash 1.6s ease; }
@keyframes rowFlash { 0%, 60% { filter: drop-shadow(0 0 0 transparent); transform: scale(1.02); } 20% { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 60%, transparent)); } 100% { transform: none; } }
.modal.search { width: min(560px, 100%); }
.sr-top { display: grid; gap: 8px; margin-bottom: 8px; }
.sr-list { display: grid; gap: 2px; max-height: min(60vh, 520px); overflow-y: auto; margin: 0 -6px; }
.sr-n { font-size: calc(13px * var(--fs)); color: var(--fg-3); padding: 2px 8px 6px; }
.sr-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: var(--r); text-align: left; width: 100%; }
.sr-item:hover { background: var(--surface-2); }
.sr-item > img { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.sr-item > span { display: grid; gap: 2px; min-width: 0; }
.sr-item b { font-size: calc(14px * var(--fs)); display: flex; gap: 6px; align-items: baseline; }
.sr-item b em, .sr-item b i { font-style: normal; font-weight: 400; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.sr-item > span > span { font-size: calc(14.5px * var(--fs)); color: var(--fg-2); line-height: 1.45; }
.sr-item mark { background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--fg); border-radius: 3px; padding: 0 1px; }
.feed { display: grid; gap: 12px; }
.feed-day { font-size: calc(13.5px * var(--fs)); font-weight: 600; color: var(--fg-3); margin: 10px 2px 0; }
.feed-card { border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); padding: 14px; display: grid; gap: 10px; animation: popIn .45s both; }
.feed-card header { display: flex; align-items: center; gap: 10px; font-size: calc(14.5px * var(--fs)); color: var(--fg-2); }
.feed-card header img { width: 34px; height: 34px; border-radius: 50%; }
.feed-card header span { flex: 1; min-width: 0; }
.feed-card header b { color: var(--fg); }
.feed-card time { font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.feed-card p { margin: 0; font-size: calc(15px * var(--fs)); color: var(--fg); line-height: 1.55; }
.feed-thumb { display: block; position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.feed-thumb iframe { width: 400%; height: 400%; transform: scale(.25); transform-origin: 0 0; border: 0; pointer-events: none; }
.feed-thumb.svg { display: flex; align-items: center; justify-content: center; padding: 12px; }
.feed-thumb.svg img { max-width: 100%; max-height: 100%; }
.feed-files { display: flex; flex-wrap: wrap; gap: 6px; }
.feed-card footer { display: flex; justify-content: flex-end; }
.ob { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 20px; background: rgba(12, 10, 16, 0); transition: background .35s ease; }
.ob.in { background: rgba(12, 10, 16, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ob.out { background: rgba(12, 10, 16, 0); backdrop-filter: none; }
.ob-card { position: relative; width: min(380px, 100%); padding: 28px 24px 20px; border-radius: 28px; background: var(--surface); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); text-align: center; transform: translateY(30px) scale(.94); opacity: 0; transition: transform .5s var(--ease-spring, ease), opacity .3s; }
.ob.in .ob-card { transform: none; opacity: 1; }
.ob.out .ob-card { transform: translateY(16px) scale(.97); opacity: 0; }
.ob-skip { position: absolute; top: 14px; right: 16px; font-size: calc(14px * var(--fs)); color: var(--fg-3); }
.ob-art { height: 150px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; animation: vFade .5s var(--ease-ios, ease) both; }
.ob-avs { display: flex; }
.ob-avs img { width: 50px; height: 50px; border-radius: 50%; margin-left: -12px; box-shadow: 0 0 0 3px var(--surface); animation: popIn .6s both; animation-delay: calc(var(--i) * 70ms); }
.ob-avs img:first-child { margin-left: 0; }
.ob-chat { display: grid; gap: 5px; width: 240px; }
.ob-chat i { font-style: normal; justify-self: start; padding: 7px 12px; border-radius: 16px; background: var(--bubble); font-size: calc(14px * var(--fs)); animation: popIn .55s both; }
.ob-chat i:nth-child(2) { animation-delay: .5s; } .ob-chat i:nth-child(3) { animation-delay: 1.2s; }
.ob-chat i.me { justify-self: end; background: var(--bubble-me); color: #fff; animation-name: sendIn; }
.ob-icons { display: flex; gap: 18px; }
.ob-icons .ico { width: 54px; height: 54px; padding: 13px; border-radius: 18px; background: var(--accent-soft); color: var(--accent-ink); animation: popIn .5s both; }
.ob-icons .ico:nth-child(2) { animation-delay: .12s; } .ob-icons .ico:nth-child(3) { animation-delay: .24s; }
.ob-card h2 { margin: 6px 0 8px; font-size: calc(20px * var(--fs)); }
/* 新手：挑一件小事让员工马上做 */
.ob-picks { display: grid; gap: 8px; margin: 0 0 14px; text-align: left; }
.ob-pick { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); color: inherit; font: inherit; cursor: pointer; }
.ob-pick:active { transform: scale(.98); }
.ob-pick img { width: 42px; height: 42px; border-radius: 50%; flex: none; }
.ob-pick span { flex: 1; display: grid; }
.ob-pick b { font-size: calc(16px * var(--fs)); }
.ob-pick em { font-style: normal; font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.ob-pick > .ico { color: var(--fg-3); }
.ob-card p { margin: 0 0 16px; font-size: calc(15.5px * var(--fs)); color: var(--fg-2); line-height: 1.65; }
.ob-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; }
.ob-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line-2); transition: width .3s, background .3s; }
.ob-dots i.on { width: 18px; background: var(--accent); }
.ob-foot { display: flex; gap: 8px; justify-content: center; }
.ob-foot .btn { min-width: 120px; }

/* ---------- 8.2：声音之外的交互动效 ---------- */
/* 撒花 */
.fx-burst { position: fixed; z-index: 400; width: 0; height: 0; pointer-events: none; }
.fx-burst i { position: absolute; left: -4px; top: -3px; width: 8px; height: 5px; border-radius: 2px; animation: fxFly var(--d, 800ms) cubic-bezier(.15, .7, .3, 1) forwards; }
.fx-burst i.dot { width: 7px; height: 7px; border-radius: 50%; }
@keyframes fxFly {
  0% { transform: translate(0, 0) rotate(0) scale(.4); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 70px)) rotate(var(--rot)) scale(1); opacity: 0; }
}
/* 数字、按钮弹一下 */
.fx-bump { display: inline-block; animation: fxBump .32s var(--ease-spring); }
@keyframes fxBump { 40% { transform: scale(1.18); } }
.fx-ready { animation: fxReady .5s var(--ease-spring); }
@keyframes fxReady { 30% { transform: scale(1.08); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); } }
.btn.primary { transition: background .2s, opacity .2s, transform .15s, box-shadow .2s; }
/* 选成员：选中的头像跳一下，取消的缩一下 */
.nc-mem.just.on .av { animation: avHop .42s cubic-bezier(.2, 1.5, .3, 1); }
.nc-mem.just:not(.on) .av { animation: avSquish .3s ease; }
@keyframes avHop { 0% { transform: scale(1); } 35% { transform: translateY(-6px) scale(1.14); } 100% { transform: scale(1.06); } }
@keyframes avSquish { 40% { transform: scale(.86, .8); } }
.nc-tick { transition: background .18s, border-color .18s; }
/* 选动物：跳一下 */
.hr-look.just img { animation: avHop .42s cubic-bezier(.2, 1.5, .3, 1); }
.hire-hero img { animation: heroPop .45s cubic-bezier(.2, 1.4, .3, 1); }
@keyframes heroPop { from { transform: scale(.55) rotate(-8deg); opacity: 0; } }
/* 员工页：卡片一张张浮上来；进入详情时头像飞过去，其他内容随后淡入 */
.v-push .staff-card, .v-pop .staff-card, .v-fade .staff-card { animation: cardIn .5s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.v-flip .staff-hero { animation: heroBg .45s ease both; }
.v-flip .staff-hero > div > * { animation: upIn .45s var(--ease-spring) both; }
.v-flip .staff-hero > div > :nth-child(2) { animation-delay: .05s; }
.v-flip .staff-hero > div > :nth-child(3) { animation-delay: .1s; }
.v-flip .set-card { animation: upIn .5s var(--ease-spring) both; animation-delay: .14s; }
.v-flip .set-card + .set-card { animation-delay: .2s; }
.v-push .staff-hero img, .v-fade .staff-hero img { animation: heroPop .5s cubic-bezier(.2, 1.4, .3, 1) both; }
.staff-hero img { position: relative; z-index: 2; }
@keyframes heroBg { from { background: transparent; } }
@keyframes upIn { from { opacity: 0; transform: translateY(14px); } }
/* 新群欢迎页：群头像落下来，成员一个个弹出来 */
.welcome > .av, .welcome > .av-team { animation: heroPop .5s cubic-bezier(.2, 1.4, .3, 1) both; }
.welcome h2, .welcome p { animation: upIn .45s var(--ease-spring) both; animation-delay: .08s; }
.wl-mem { animation: wlIn .45s cubic-bezier(.2, 1.4, .3, 1) both; animation-delay: calc(.16s + var(--i, 0) * 55ms); }
@keyframes wlIn { from { opacity: 0; transform: translateY(14px) scale(.6); } }
.wl-quick .chip { animation: upIn .4s var(--ease-spring) both; animation-delay: .4s; }
.wl-quick .chip:nth-child(2) { animation-delay: .45s; }
.wl-quick .chip:nth-child(3) { animation-delay: .5s; }
.wl-quick .chip:nth-child(4) { animation-delay: .55s; }
/* 弹层里的内容跟着面板依次浮上来 */
#modal-root.open:not(.closing) .modal-body > * { animation: upIn .42s var(--ease-spring) both; }
#modal-root.open:not(.closing) .modal-body > :nth-child(2) { animation-delay: .03s; }
#modal-root.open:not(.closing) .modal-body > :nth-child(3) { animation-delay: .06s; }
#modal-root.open:not(.closing) .modal-body > :nth-child(4) { animation-delay: .09s; }
#modal-root.open:not(.closing) .modal-body > :nth-child(5) { animation-delay: .12s; }
#modal-root.open:not(.closing) .modal-body > :nth-child(n+6) { animation-delay: .15s; }
/* 提示条里的图标弹一下 */
.toast.in .ico { animation: reactPop .42s cubic-bezier(.2, 1.4, .3, 1) .05s both; }
/* 开关：滑块带回弹，按住时像 iOS 一样拉长 */
.switch i { transition: transform .32s var(--ease-spring), width .18s ease; }
.switch:active i { width: 21px; }
.switch.on:active i { transform: translateX(11px); }
.switch.sm:active i { width: 17px; }
.switch.sm.on:active i { transform: translateX(9px); }
/* 卡片类按下去都有一点回弹 */
.staff-card:active { transform: scale(.97); transition-duration: .08s; }
.fw-item:active, .wl-mem:active, .mem-item:active, .feed-card:active { transform: scale(.97); }
.fw-item, .wl-mem, .feed-card { transition: transform .18s var(--ease-spring); }
@media (prefers-reduced-motion: reduce) {
  .fx-burst, .v-push .staff-card, .v-pop .staff-card, .v-fade .staff-card, .welcome > *, .wl-mem, .wl-quick .chip, #modal-root .modal-body > * { animation: none !important; }
}

/* ---------- 9.0：软键盘弹起时应用高度跟随可视区域 ---------- */
html.kb-open, html.kb-open body { height: var(--app-h, 100%); overflow: hidden; }
html.kb-open #app { height: var(--app-h, 100%); }
html.kb-open .composer-dock { padding-bottom: 6px; }

/* ---------- 9.0：手机号登录 ---------- */
.lg > .seg, .lg > .field, .lg > .lg-agree, .lg > .lg-go, .lg > .lg-row { width: min(360px, 100%); text-align: left; }
.lg-seg { display: grid; grid-template-columns: 1fr 1fr; margin: 6px 0 2px; }
.lg-seg button { height: 32px; font-size: calc(14.5px * var(--fs)); }
.lg-phone, .lg-code { display: flex; gap: 8px; align-items: stretch; }
.lg-phone em { font-style: normal; display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--r); background: var(--surface-2); color: var(--fg-2); font-size: calc(15px * var(--fs)); flex: none; }
.lg-phone .input, .lg-code .input { flex: 1; min-width: 0; font-size: calc(16px * var(--fs)); letter-spacing: .02em; }
.lg-code .input { letter-spacing: .3em; }
.lg-code .btn { flex: none; min-width: 108px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lg-row { display: flex; justify-content: flex-end; }
.lg-row.center { justify-content: center; }
.lg-agree { display: flex; align-items: flex-start; gap: 8px; font-size: calc(13.5px * var(--fs)); color: var(--fg-3); margin: 4px 0 2px; line-height: 1.6; }
.lg-agree input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.lg-agree .link-btn { font-size: calc(13.5px * var(--fs)); padding: 0; }
.lg-go { height: 44px; font-size: calc(16.5px * var(--fs)); margin-top: 6px; border-radius: 12px; }
.lg-tip { margin: 0; }
.fx-shake { animation: fxShake .42s ease; }
@keyframes fxShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.legal p { margin: 0 0 10px; font-size: calc(14.5px * var(--fs)); color: var(--fg-2); }
.acct-me b .icon-btn { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.acct-me .acct-phone { color: var(--fg-2) !important; }
.acct-me .acct-phone .link-btn { font-size: calc(13.5px * var(--fs)); }
.acct-wallet { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-lg); background: linear-gradient(135deg, color-mix(in srgb, #ff7ba9 16%, var(--surface)), color-mix(in srgb, #8b6cf0 14%, var(--surface))); text-align: left; transition: transform .15s; }
.acct-wallet:active { transform: scale(.98); }
.acct-wallet > .ico:first-child { color: var(--accent); width: 22px; height: 22px; }
.acct-wallet span { flex: 1; font-size: calc(14px * var(--fs)); color: var(--fg-2); }
.acct-wallet span b { font-size: calc(20px * var(--fs)); color: var(--fg); font-variant-numeric: tabular-nums; }
.acct-wallet em { font-style: normal; font-size: calc(14px * var(--fs)); color: var(--accent-ink); font-weight: 600; }
.nav-badge.soft { background: var(--surface-2); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.banner.soft { background: var(--surface-2); }
.banner > .ico { flex: none; }
.msg-err.has-fix { flex-wrap: wrap; row-gap: 6px; }
.msg-err .btn.sm { height: 26px; }

/* ---------- 9.0：积分页 ---------- */
.w-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 20px; border-radius: 22px; margin-bottom: 14px; color: #fff; background: linear-gradient(135deg, #ff7ba9 0%, #e5447d 45%, #8b6cf0 100%); box-shadow: 0 16px 40px -18px rgba(229, 68, 125, .7); }
.w-hero::after { content: ''; position: absolute; right: -40px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.w-hero div { display: grid; gap: 2px; position: relative; z-index: 1; }
.w-hero span { font-size: calc(14px * var(--fs)); opacity: .85; }
.w-hero b { font-size: calc(40px * var(--fs)); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.w-hero em { font-style: normal; font-size: calc(13px * var(--fs)); opacity: .8; }
.w-hero img { width: 76px; height: 76px; border-radius: 22px; position: relative; z-index: 1; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); transform: rotate(6deg); }
.w-pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.w-pkg { position: relative; display: grid; justify-items: center; gap: 0; padding: 16px 8px 12px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); transition: border-color .18s, background .18s, transform .15s; animation: cardIn .45s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 40ms); }
.w-pkg:active { transform: scale(.96); }
.w-pkg b { font-size: calc(22px * var(--fs)); font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums; }
.w-pkg span { font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.w-pkg em { font-style: normal; margin-top: 8px; font-size: calc(15px * var(--fs)); font-weight: 600; color: var(--fg-2); }
.w-pkg i { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: calc(12px * var(--fs)); font-weight: 600; padding: 1px 8px; border-radius: 99px; background: var(--surface-2); color: var(--fg-2); }
.w-pkg.hot i { background: linear-gradient(90deg, #ff7ba9, #e5447d); color: #fff; }
.w-pkg.on { border-color: var(--accent); background: var(--accent-soft); }
.w-pkg.on em { color: var(--accent-ink); }
.w-pkg.just b { animation: fxBump .32s var(--ease-spring); }
.w-methods { display: grid; gap: 8px; margin-bottom: 14px; }
.w-method { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); text-align: left; transition: border-color .18s, background .18s; }
.w-method svg { width: 28px; height: 28px; flex: none; }
.w-method span { flex: 1; font-size: calc(15.5px * var(--fs)); font-weight: 600; color: var(--fg); }
.w-method span em { font-style: normal; font-weight: 400; font-size: calc(12px * var(--fs)); margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); color: var(--fg-3); }
.w-radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: none; transition: border .18s, background .18s; position: relative; }
.w-method.on { border-color: var(--mc); background: color-mix(in srgb, var(--mc) 7%, var(--surface)); }
.w-method.on .w-radio { border: 6px solid var(--mc); }
.w-method.just .w-radio { animation: reactPop .3s cubic-bezier(.2, 1.4, .3, 1); }
.w-pay { width: 100%; height: 48px; font-size: calc(16px * var(--fs)); border-radius: 14px; }
.w-fine { margin: 10px 0 0; text-align: center; }
/* 转发 */
.fw { display: grid; gap: 10px; }
.fw-sys { width: 100%; justify-content: center; height: 48px; font-size: calc(16px * var(--fs)); }
.fw-link > .btn { width: 100%; justify-content: center; }
.fw-wait { display: flex; align-items: center; gap: 8px; color: var(--fg-2); padding: 8px 0; }
.fw-ok { display: grid; gap: 10px; }
.fw-qrrow { display: flex; gap: 12px; align-items: center; }
.fw-qr { flex: none; width: 112px; height: 112px; background: #fff; border-radius: 10px; padding: 4px; }
.fw-qr svg { width: 100%; height: 100%; display: block; }
.fw-qrrow p { margin: 0; }
/* 联系客服买兑换码（没开在线支付时） */
.w-kefu { margin-top: 4px; padding: 14px; border-radius: 14px; background: var(--surface-2); display: grid; gap: 10px; }
.w-kefu > p { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: calc(14px * var(--fs)); line-height: 1.55; color: var(--fg-2); }
.w-kefu > p .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.w-kefu-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); }
.w-kefu-row span { color: var(--fg-3); font-size: calc(13px * var(--fs)); min-width: 2.5em; }
.w-kefu-row b { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: calc(16px * var(--fs)); }
.w-rates summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: calc(15px * var(--fs)); font-weight: 600; color: var(--fg); }
.w-rates summary::-webkit-details-marker { display: none; }
.w-rates summary .ico { width: 16px; height: 16px; color: var(--fg-3); transition: transform .2s; }
.w-rates[open] summary .ico:last-child { transform: rotate(180deg); }
.w-rate { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: calc(14px * var(--fs)); }
.w-rate b { grid-row: span 2; align-self: center; min-width: 6em; }
.w-rate span { color: var(--fg-2); }
.w-rate em { font-style: normal; color: var(--fg-3); font-size: calc(13px * var(--fs)); }
.w-rg .w-rate { grid-template-columns: minmax(0, 46%) 1fr; }
.w-rg-h { margin-top: 12px; font-weight: 700; font-size: calc(13px * var(--fs)); color: var(--fg-2); }
.w-rate b { font-weight: 600; }
/* 起步价角标：板块工具的「开始」、剪视频的「AI 写脚本」按钮里 */
.bd-price { font-style: normal; font-weight: 600; font-size: .78em; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .2); white-space: nowrap; }
.w-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 8px; }
.w-tabs button { height: 30px; }
.w-day { padding: 12px 0; border-bottom: 1px solid var(--line); }
.w-day:last-child { border-bottom: 0; }
.w-day-h { display: flex; align-items: baseline; gap: 8px; }
.w-day-h span { flex: 1; font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.w-day-h em, .w-top em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.w-day-h em { color: var(--fg-2); }
.w-by { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; }
.w-by span { display: inline-flex; align-items: center; gap: 4px; font-size: calc(13px * var(--fs)); color: var(--fg-2); }
.w-by img { width: 18px; height: 18px; border-radius: 50%; }
.w-top { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.w-top:last-child { border-bottom: 0; }
.w-top > div { flex: 1; display: grid; min-width: 0; }
.w-top b { font-size: calc(15px * var(--fs)); }
.w-top span { font-size: calc(13px * var(--fs)); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-top em { color: var(--ok); }
.w-top em.neg { color: var(--fg-2); }
.w-top-ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.w-top-ico svg { width: 34px; height: 34px; }
.w-top-ico.gift { background: var(--accent-soft); color: var(--accent); }
.w-top-ico.gift .ico { width: 18px; height: 18px; }
.w-empty { text-align: center; padding: 18px 0; margin: 0; }
.w-skel { height: 46px; border-radius: 10px; margin: 8px 0; background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }

/* ---------- 9.0：扫码支付 ---------- */
.pay { display: grid; justify-items: center; text-align: center; gap: 4px; padding-bottom: 4px; }
.pay-amt { font-size: calc(38px * var(--fs)); font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.1; }
.pay-amt span { font-size: calc(20px * var(--fs)); margin-right: 2px; }
.pay-sub { font-size: calc(14px * var(--fs)); color: var(--fg-3); margin-bottom: 12px; }
.pay-qr { position: relative; width: 216px; height: 216px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 10px 30px -12px rgba(0, 0, 0, .25); }
.pay-qr > svg { width: 100%; height: 100%; display: block; transition: filter .3s, opacity .3s; }
.pay-mini { width: 100%; height: 100%; display: grid; place-items: center; transition: filter .3s, opacity .3s; }
.pay-mini > svg { width: 96px; height: 96px; animation: pay-breathe 2.4s ease-in-out infinite; }
@keyframes pay-breathe { 50% { transform: scale(.92); opacity: .8; } }
.pay.ok .pay-mini, .pay.dead .pay-mini { opacity: .25; }
.w-copy-site { width: 100%; margin-top: 10px; }
.pay-done { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px; background: rgba(255, 255, 255, .92); opacity: 0; transform: scale(.9); transition: opacity .25s, transform .4s var(--ease-spring); }
.pay-done svg { width: 84px; height: 84px; }
.pay-done circle { fill: var(--mc); }
.pay-done path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.pay.ok .pay-done { opacity: 1; transform: none; }
.pay.ok .pay-done path { animation: payTick .45s .15s ease forwards; }
@keyframes payTick { to { stroke-dashoffset: 0; } }
.pay.dead .pay-qr > svg { filter: blur(3px); opacity: .35; }
.pay-hint { margin-top: 12px; font-size: calc(15px * var(--fs)); font-weight: 600; color: var(--mc); }
.pay-st { display: inline-flex; align-items: center; gap: 8px; font-size: calc(13.5px * var(--fs)); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.pay-st .ico { width: 15px; height: 15px; }
.pay.ok .pay-st { color: var(--ok); font-weight: 600; font-size: calc(15px * var(--fs)); }
.pay.dead .pay-st { color: var(--err); }
.pay-st .dots { display: inline-flex; gap: 3px; }
.pay-st .dots b { width: 5px; height: 5px; border-radius: 50%; background: var(--mc); animation: typing 1.2s infinite; }
.pay-st .dots b:nth-child(2) { animation-delay: .15s; }
.pay-st .dots b:nth-child(3) { animation-delay: .3s; }
.pay-mock { margin-top: 8px; }
.pay.ok .pay-mock { display: none; }
.pay p { margin: 8px 0 0; }

/* ---------- 9.1：运营公告、兑换码 ---------- */
.notice-bar { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; margin: 8px 12px 0; padding: 9px 8px 9px 12px; border-radius: 16px; background: color-mix(in srgb, var(--info-soft) 70%, var(--surface)); box-shadow: var(--shadow-1); animation: popIn .4s both; transform-origin: 50% 0; }
.notice-bar > .ico { color: var(--info); flex: none; }
.notice-bar.warn { background: color-mix(in srgb, var(--warn-soft) 80%, var(--surface)); }
.notice-bar.warn > .ico { color: var(--warn); }
.notice-bar.promo { background: linear-gradient(135deg, color-mix(in srgb, #ff7ba9 18%, var(--surface)), color-mix(in srgb, #8b6cf0 16%, var(--surface))); }
.notice-bar.promo > .ico { color: var(--accent); }
.notice-bar > div { flex: 1; min-width: 0; display: grid; }
.notice-bar b { font-size: calc(14.5px * var(--fs)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice-bar span { font-size: calc(13px * var(--fs)); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice-bar .btn.sm { flex: none; height: 28px; }
.w-redeem .lg-code .input { letter-spacing: .08em; text-transform: uppercase; font-family: var(--mono); font-size: calc(16px * var(--fs)); }

/* ---------- 账号：举报与反馈、注销 ---------- */
.acct-deleting { align-items: center; }
.acct-deleting .btn { margin-left: auto; flex-shrink: 0; }
.acct-more { padding: 4px 0; }
.acct-link { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; text-align: left; border-radius: var(--r-sm); transition: background .15s; }
.acct-link + .acct-link { border-top: 1px solid var(--line); border-radius: 0; }
.acct-link:active { background: var(--surface-2); }
.acct-link > .ico:first-child { width: 20px; height: 20px; color: var(--fg-2); flex-shrink: 0; }
.acct-link > span { flex: 1; display: grid; gap: 1px; min-width: 0; }
.acct-link b { font-size: calc(15px * var(--fs)); font-weight: 600; }
.acct-link em { font-style: normal; font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.acct-link > .ico:last-child { width: 16px; height: 16px; color: var(--fg-3); }
.acct-link.danger b, .acct-link.danger > .ico:first-child { color: var(--err); }
.del-list { font-size: calc(14.5px * var(--fs)); line-height: 1.7; }
.del-list ul { margin: 6px 0 10px; padding-left: 18px; }
.del-list li { margin: 2px 0; }
.rp-quote { font-size: calc(14px * var(--fs)); color: var(--fg-2); background: var(--surface-2); border-left: 3px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; max-height: 96px; overflow: hidden; white-space: pre-wrap; }
.rp-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-reasons .chip-btn { height: 30px; padding: 0 12px; border-radius: 999px; font-size: calc(14px * var(--fs)); background: var(--surface-2); color: var(--fg-2); transition: background .15s, color .15s, transform .15s; }
.rp-reasons .chip-btn:active { transform: scale(.95); }
.rp-reasons .chip-btn.on { background: var(--fg); color: var(--bg); }
.rp-support { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.rp-support .ico { width: 14px; height: 14px; flex-shrink: 0; }
.rp-list { display: grid; gap: 10px; }
.rp-item { padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: calc(14px * var(--fs)); }
.rp-item p { margin: 4px 0; color: var(--fg-2); }
.rp-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rp-reply { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--fg); }
.rp-reply .ico { width: 14px; height: 14px; margin-top: 3px; flex-shrink: 0; color: var(--accent); }
.msg-err.mod { background: var(--warn-soft); color: var(--warn); }
.msg-flag { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 4px; font-size: calc(12.5px * var(--fs)); color: var(--warn); }
.msg-flag .ico { width: 13px; height: 13px; }

/* ---------- 登录页（全屏，像微信 / 支付宝的登录页） ---------- */
html.gated, html.gated body { overflow: hidden; }
.gate { position: fixed; inset: 0; z-index: 80; background: var(--bg); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; opacity: 0; transition: opacity .28s ease; }
.gate.in { opacity: 1; }
.gate.out { opacity: 0; pointer-events: none; transition-duration: .32s; }
.gate.out .g-page { transform: translateY(-10px); transition: transform .32s ease; }
.g-splash { min-height: 100%; display: grid; place-content: center; justify-items: center; gap: 12px; }
.g-splash img { width: 72px; height: 72px; border-radius: 20px; animation: gateBreath 1.6s ease-in-out infinite; }
.g-splash b { font-size: calc(18px * var(--fs)); letter-spacing: .5px; }
@keyframes gateBreath { 50% { transform: scale(.94); opacity: .75; } }
.g-page { box-sizing: border-box; min-height: 100%; max-width: 420px; margin: 0 auto; padding: calc(10px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; }
.g-top { height: 44px; display: flex; align-items: center; margin: 0 -10px; }
.g-back { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--fg); }
.g-back .ico { width: 24px; height: 24px; }
.g-back:active { background: var(--surface-2); }
.g-brand { display: flex; align-items: center; gap: 10px; margin: 18px 0 26px; }
.g-brand img { width: 44px; height: 44px; border-radius: 13px; box-shadow: 0 6px 18px -8px rgba(224, 69, 123, .55); }
.g-brand span { font-size: calc(17px * var(--fs)); font-weight: 700; letter-spacing: .3px; }
.g-page h1 { margin: 0; font-size: calc(27px * var(--fs)); font-weight: 700; letter-spacing: .5px; }
.g-sub { margin: 8px 0 26px; font-size: calc(15px * var(--fs)); color: var(--fg-3); line-height: 1.6; }
.g-msg { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; margin: -10px 0 18px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-size: calc(14px * var(--fs)); line-height: 1.55; }
.g-msg .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.g-rows { display: grid; }
.g-row { display: flex; align-items: center; gap: 10px; min-height: 58px; border-bottom: 1px solid var(--line); transition: border-color .2s; }
.g-row:focus-within { border-bottom-color: var(--accent); }
.g-lab { flex: none; width: 66px; font-size: calc(16.5px * var(--fs)); color: var(--fg); }
.g-cc { flex: none; font-style: normal; font-size: calc(16.5px * var(--fs)); color: var(--fg-2); padding-right: 8px; border-right: 1px solid var(--line); }
.g-row input { flex: 1 1 0; width: 0; min-width: 0; height: 56px; border: 0; outline: 0; background: transparent; color: var(--fg); font-size: calc(16px * var(--fs)); padding: 0; }
.g-row input::placeholder { color: var(--fg-3); }
.g-eye { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--fg-3); }
.g-eye .ico { width: 19px; height: 19px; }
.g-eye.on { color: var(--accent); }
.g-send { flex: none; font-size: calc(15.5px * var(--fs)); color: var(--accent); font-weight: 600; padding: 8px 2px; white-space: nowrap; }
.g-send:disabled { color: var(--fg-3); font-weight: 400; }
.g-agree { display: flex; align-items: flex-start; gap: 8px; margin: 18px 0 0; font-size: calc(13.5px * var(--fs)); color: var(--fg-3); line-height: 1.6; }
.g-agree input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.g-link { color: var(--accent); font-size: inherit; padding: 0; }
.g-go { margin-top: 24px; height: 50px; border-radius: 14px; background: var(--accent); color: #fff; font-size: calc(17px * var(--fs)); font-weight: 600; letter-spacing: 2px; display: grid; place-items: center; transition: opacity .2s, transform .12s; }
.g-go:disabled { opacity: .38; }
.g-go:not(:disabled):active { transform: scale(.985); }
.g-spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: gateSpin .8s linear infinite; }
@keyframes gateSpin { to { transform: rotate(360deg); } }
.g-links { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 22px; }
.g-links button { font-size: calc(15.5px * var(--fs)); color: var(--fg-2); padding: 6px 2px; }
.g-links i { width: 1px; height: 12px; background: var(--line); }
.g-foot { margin-top: auto; padding-top: 36px; display: grid; justify-items: center; gap: 8px; }
.g-foot button { font-size: calc(14px * var(--fs)); color: var(--fg-3); padding: 6px; }
.g-foot span { font-size: calc(13px * var(--fs)); color: var(--fg-3); }
@media (prefers-reduced-motion: reduce) { .g-splash img { animation: none; } }

/* ---------- 侧边栏：积分卡 ---------- */
.dr-wallet { display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); margin: 2px 12px 10px; padding: 12px 14px; border-radius: var(--r-lg); text-align: left; color: #fff; background: linear-gradient(120deg, #ff6f9f 0%, #e5447d 45%, #8b6cf0 100%); box-shadow: 0 10px 24px -14px rgba(229, 68, 125, .75); position: relative; overflow: hidden; transition: transform .12s; }
.dr-wallet::after { content: ""; position: absolute; right: -24px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.dr-wallet:active { transform: scale(.985); }
.dr-wallet.off { background: var(--surface); color: var(--fg); border: 1px dashed var(--line-2); box-shadow: none; }
.dr-wallet.off::after { display: none; }
.dr-wallet.low { background: linear-gradient(120deg, #ff9a5a, #e5447d); }
.dw-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .2); }
.dr-wallet.off .dw-ico { background: var(--surface-2); color: var(--accent); }
.dw-ico .ico { width: 21px; height: 21px; }
.dw-main { flex: 1; min-width: 0; display: grid; gap: 1px; position: relative; z-index: 1; }
.dw-main em { font-style: normal; font-size: calc(12.5px * var(--fs)); opacity: .85; }
.dw-main b { font-size: calc(22px * var(--fs)); line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.dw-main span { font-size: calc(12.5px * var(--fs)); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-wallet.off .dw-main em, .dr-wallet.off .dw-main span { color: var(--fg-3); opacity: 1; }
.dw-go { flex: none; position: relative; z-index: 1; height: 30px; padding: 0 13px; border-radius: 999px; background: #fff; color: #d63b72; font-size: calc(14px * var(--fs)); font-weight: 600; display: inline-flex; align-items: center; }
.dr-wallet.off .dw-go { background: var(--surface-2); color: var(--fg-2); }

/* ---------- 侧边栏：私聊（总管）+ 员工板块 ---------- */
.staff-row.lead { margin: 0 12px; width: calc(100% - 24px); padding: 8px 12px; background: var(--surface); box-shadow: var(--shadow-1); }
.staff-row .sr-go { width: 18px; height: 18px; color: var(--fg-3); flex: none; }
.bd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 12px; }
.bd-tile { position: relative; display: grid; gap: 2px; padding: 11px 12px 12px; border-radius: var(--r-lg); text-align: left; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, var(--surface)), var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line)); min-width: 0; transition: transform .12s, border-color .15s; animation: upIn .4s var(--ease-spring) both; animation-delay: calc(var(--i) * 35ms); }
.bd-tile:active { transform: scale(.97); }
.bd-tile.active { border-color: var(--c); }
.bd-tile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.bd-tile .av { width: 34px; height: 34px; box-shadow: 0 0 0 2px var(--surface); }
.bd-tile b { font-size: calc(14.5px * var(--fs)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-tile > span:last-child { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-tile .dot-busy { margin: 0; }

/* 板块页头图里共用的小零件（光标、胶片孔、时间线、胶带、柱状图） */
.tt-cur { display: inline-block; width: 6px; height: 11px; margin-left: 3px; vertical-align: -2px; background: #f3c37a; animation: ttBlink 1s steps(1) infinite; }
@keyframes ttBlink { 50% { opacity: 0; } }
.tf-holes { flex: none; height: 9px; background: radial-gradient(circle at 6px 4.5px, #2d2440 2.4px, transparent 2.9px) 0 0 / 14px 9px repeat-x; opacity: .9; }
.tf-rec { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ff4d6d; margin-right: 4px; animation: ttBlink 1.4s steps(1) infinite; }
.tf-track { position: relative; align-self: center; display: flex; gap: 3px; height: 22px; padding: 3px; border-radius: 6px; background: #241c33; }
.tf-track i { display: block; border-radius: 3px; }
.tf-track .c1 { flex: 3; background: linear-gradient(90deg, #8B6CF0, #a68cff); }
.tf-track .c2 { flex: 2; background: linear-gradient(90deg, #F95E94, #ff86ae); }
.tf-track .c3 { flex: 4; background: linear-gradient(90deg, #F3A53C, #ffc673); }
.tf-track .c4 { flex: 2; background: linear-gradient(90deg, #25B3A4, #4fd3c4); }
.tf-track .tf-head { position: absolute; top: -4px; bottom: -4px; left: 6%; width: 2px; background: #fff; border-radius: 1px; box-shadow: 0 0 6px rgba(255, 255, 255, .8); animation: tfPlay 4s linear infinite; }
.tf-track .tf-head::before { content: ""; position: absolute; top: -3px; left: -3px; border: 4px solid transparent; border-top-color: #fff; }
@keyframes tfPlay { from { left: 4%; } to { left: 96%; } }
.tn-tape { position: absolute; top: -4px; left: 50%; width: 54px; height: 16px; margin-left: -27px; background: rgba(58, 160, 239, .35); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

/* ---------- 员工板块页 ---------- */
.bd-page { max-width: 960px; container-type: inline-size; }
.bd-hero { display: flex; align-items: center; gap: 18px; padding: 22px; margin-bottom: 18px; border-radius: var(--r-xl); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c) 26%, var(--surface)), var(--surface) 65%); border: 1px solid color-mix(in srgb, var(--c) 25%, var(--line)); }
.bd-hero .av.xl { width: 76px; height: 76px; box-shadow: 0 10px 26px -12px var(--c); }
.bd-hero h1 { margin: 0 0 4px; font-size: calc(24px * var(--fs)); letter-spacing: .3px; }
.bd-hero p { margin: 2px 0; font-size: calc(14.5px * var(--fs)); }
.bd-sec { margin-bottom: 22px; }
.bd-sec h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px 2px; font-size: calc(16px * var(--fs)); }
.bd-sec h2 > .h2t { flex: none; white-space: nowrap; }
.bd-sec h2 em { font-style: normal; font-weight: 400; font-size: calc(13px * var(--fs)); color: var(--fg-3); display: inline-flex; align-items: center; gap: 4px; }
.bd-sec h2 em .ico { width: 13px; height: 13px; }
.bd-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bd-tool.odd-last { grid-column: span 2; }
@container (min-width: 700px) {
  .bd-tools { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bd-tools > .bd-tool, .bd-tools > .bd-tool.odd-last { grid-column: span var(--sp, 3); }
}
.bd-tool { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 3px; align-items: start; padding: 14px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); text-align: left; transition: transform .12s, box-shadow .15s; animation: upIn .42s var(--ease-spring) both; animation-delay: calc(var(--i) * 30ms); }
.bd-tool:hover { box-shadow: var(--shadow-1), 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent); }
.bd-tool:active { transform: scale(.98); }
.bd-ico { grid-row: span 2; align-self: start; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 15%, var(--surface)); }
.bd-ico .ico { width: 22px; height: 22px; }
.bd-ico.sm { width: 36px; height: 36px; border-radius: 11px; grid-row: auto; }
.bd-ico.sm .ico { width: 18px; height: 18px; }
.bd-tool b { font-size: calc(15.5px * var(--fs)); font-weight: 600; }
.bd-tool > span:last-child { font-size: calc(13.5px * var(--fs)); color: var(--fg-3); line-height: 1.45; }
.bd-empty { padding: 18px; border-radius: var(--r-lg); border: 1px dashed var(--line-2); color: var(--fg-3); font-size: calc(14px * var(--fs)); text-align: center; }
.bd-foot { text-align: center; margin: 4px 0 24px; }
@media (max-width: 900px) {
  .bd-hero { padding: 16px; gap: 14px; }
  .bd-hero .av.xl { width: 62px; height: 62px; }
  .bd-hero h1 { font-size: calc(20px * var(--fs)); }
  .bd-tools { gap: 8px; }
  .bd-tool { grid-template-columns: 1fr; grid-template-rows: none; align-content: start; padding: 12px; }
  .bd-ico { grid-row: auto; width: 38px; height: 38px; border-radius: 11px; margin-bottom: 6px; }
  .bd-ico .ico { width: 20px; height: 20px; }
}

/* ---------- 板块页：每位员工自己的头图和工具卡片 ---------- */
.bd-hero2 { margin-bottom: 20px; animation: upIn .45s var(--ease-spring) both; }
.bd-hero2 h1 { margin: 0 0 4px; font-size: calc(24px * var(--fs)); letter-spacing: .3px; }
.bd-hero2 p { margin: 2px 0; font-size: calc(14.5px * var(--fs)); }
.bd-hero2 .av.xl { width: 76px; height: 76px; flex: none; }
.bd-page .bd-sec h2::before { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; font-size: calc(14px * var(--fs)); color: var(--c); }
.bd-page.th-ide .bd-sec h2::before { content: "{ }"; color: #f3a53c; }
.bd-page.th-note .bd-sec h2 { font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif; font-weight: 900; font-size: calc(18px * var(--fs)); letter-spacing: .08em; }
.bd-page.th-note .bd-sec h2::before { content: "✎"; font-size: calc(16px * var(--fs)); }
.bd-page.th-sheet .bd-sec h2::before { content: "▦"; font-size: calc(15px * var(--fs)); color: #1f9d5c; }
.bd-page.th-audit .bd-sec h2::before { content: "§"; font-family: Georgia, serif; font-size: calc(17px * var(--fs)); color: #5cc8ff; }

/* 阿犸：代码编辑器（文件标签、行号、语法高亮、状态栏） */
.hi-ide { border-radius: 16px; overflow: hidden; background: #1e1c19; color: #ebdbb2; font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; border: 1px solid #3a342c; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .75); }
.hi-tabs { display: flex; height: 38px; background: #151412; border-bottom: 1px solid #2e2a24; font-size: calc(12.5px * var(--fs)); }
.hi-tabs > span { display: flex; align-items: center; gap: 7px; padding: 0 14px; color: #8a8072; border-right: 1px solid #2a2621; white-space: nowrap; }
.hi-tabs > span.on { background: #1e1c19; color: #ebdbb2; box-shadow: inset 0 2px 0 #f3a53c; }
.fdot { width: 8px; height: 8px; border-radius: 2px; flex: none; background: #f3a53c; }
.fdot.js { background: #fabd2f; } .fdot.md { background: #83a598; } .fdot.sql { background: #d3869b; } .fdot.html { background: #fe8019; } .fdot.wxml { background: #07c160; }
.hi-main { position: relative; padding: 16px 0 18px; background: linear-gradient(90deg, #191714 0 44px, transparent 44px); }
.hi-code { counter-reset: ln; padding: 0 112px 0 56px; font-size: calc(14px * var(--fs)); line-height: calc(27px * var(--fs)); }
.hi-code > * { position: relative; }
.hi-code > *::before { counter-increment: ln; content: counter(ln); position: absolute; left: -52px; width: 34px; text-align: right; color: #5d554a; font: 400 calc(12.5px * var(--fs))/calc(27px * var(--fs)) ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; letter-spacing: 0; }
.hi-ide .hi-code p { margin: 0; font-size: calc(14px * var(--fs)); overflow-wrap: anywhere; }
.hi-code .i1 { padding-left: 2.3em; }
.hi-ide .hi-code h1 { margin: 2px 0; font-family: inherit; font-size: calc(23px * var(--fs)); line-height: calc(36px * var(--fs)); color: #fbf1c7; letter-spacing: 0; }
.hi-code h1::before { line-height: calc(36px * var(--fs)); }
.hi-ide .k { color: #fe8019; } .hi-ide .f { color: #fabd2f; } .hi-ide .s { color: #b8bb26; } .hi-ide .c { color: #928374; font-style: italic; }
.hi-av { position: absolute; right: 20px; top: 16px; display: grid; justify-items: center; gap: 6px; }
.hi-av .av.xl { border-radius: 18px; box-shadow: 0 0 0 2px #f3a53c, 0 0 28px -6px rgba(243, 165, 60, .6); }
.hi-av em { font-style: normal; font-size: calc(11.5px * var(--fs)); color: #8ec07c; }
.hi-status { display: flex; gap: 16px; align-items: center; height: 27px; padding: 0 14px; background: #f3a53c; color: #2a1d08; font-size: calc(12px * var(--fs)); font-weight: 700; }
.hi-status .r { margin-left: auto; }
/* 工具卡片：一个个代码文件 */
.bd-page.th-ide .bd-tool { display: flex; flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; border-radius: 12px; background: #1e1c19; color: #ebdbb2; font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; border: 1px solid #3a342c; box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .7); }
.bd-page.th-ide .bd-tool:hover { border-color: #f3a53c; }
.ti-tab { display: flex; align-items: center; gap: 7px; height: 31px; padding: 0 12px; background: #151412; border-bottom: 1px solid #2e2a24; font-size: calc(12.5px * var(--fs)); color: #a89984; }
.ti-tab em { margin-left: auto; font-style: normal; color: #5d554a; }
.ti-src { counter-reset: ln; display: grid; align-content: start; gap: 2px; padding: 11px 12px 2px 38px; font-size: calc(13.5px * var(--fs)); line-height: calc(22px * var(--fs)); background: linear-gradient(90deg, #191714 0 28px, transparent 28px); font-variant-ligatures: none; }
.ti-src > span { position: relative; }
.ti-src > span::before { counter-increment: ln; content: counter(ln); position: absolute; left: -34px; width: 22px; text-align: right; color: #5d554a; font-size: calc(12px * var(--fs)); }
.bd-page.th-ide .bd-tool .ti-src b { font-weight: 700; font-size: calc(15px * var(--fs)); color: #fabd2f; }
.ti-src .k { color: #fe8019; }
.ti-doc { color: #928374; font-style: italic; overflow-wrap: anywhere; }
.bd-page.th-ide .bd-tool > span.ti-run { margin: 8px 12px 12px 38px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 6px; background: rgba(243, 165, 60, .14); color: #f3a53c; font-size: calc(12.5px * var(--fs)); font-weight: 700; line-height: 1.5; box-shadow: inset 0 0 0 1px rgba(243, 165, 60, .45); transition: background .15s, color .15s; }
.ti-run .ico { width: 13px; height: 13px; }
.th-ide .bd-tool:hover .ti-run { background: #f3a53c; color: #1e1c19; }

/* 耳朵：胶片 + 时间线 */
.hf-strip { border-radius: 16px; overflow: hidden; padding: 5px 0; background: #17121f; color: #efe9ff; box-shadow: 0 18px 38px -22px rgba(23, 18, 31, .8); }
.hf-strip > .tf-holes { height: 14px; background: radial-gradient(circle at 10px 7px, #2d2440 3.6px, transparent 4.2px) 0 0 / 22px 14px repeat-x; }
.hf-body { display: flex; align-items: center; gap: 18px; padding: 14px 22px 10px; }
.hf-body .av.xl { border-radius: 14px; box-shadow: 0 0 0 2px #8B6CF0, 0 10px 26px -10px #8B6CF0; }
.hf-strip h1 { color: #fff; }
.hf-strip p b { color: #fff; }
.hf-tc { font: 600 calc(12px * var(--fs))/1.6 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 1px; color: #ff8aa2; }
.hf-strip .hf-dim { color: #b3a8cc; }
.tf-track.big { height: 36px; margin: 6px 22px 12px; padding: 4px; gap: 4px; border-radius: 8px; }
.bd-page.th-film .bd-tool { display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 10px 10px 14px; border-radius: 14px; background: #17121f; color: #efe9ff; box-shadow: 0 12px 24px -16px rgba(23, 18, 31, .8); }
.bd-page.th-film .bd-tool:hover { transform: translateY(-2px); box-shadow: 0 0 0 1.5px #8B6CF0, 0 12px 24px -16px rgba(23, 18, 31, .8); }
.tfc-frame { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; margin-bottom: 8px; border-radius: 8px; overflow: hidden; color: #fff; background: linear-gradient(135deg, #8B6CF0, #F95E94); }
.th-film .bd-tool:nth-child(4n+2) .tfc-frame { background: linear-gradient(135deg, #F95E94, #F3A53C); }
.th-film .bd-tool:nth-child(4n+3) .tfc-frame { background: linear-gradient(135deg, #25B3A4, #3AA0EF); }
.th-film .bd-tool:nth-child(4n+4) .tfc-frame { background: linear-gradient(135deg, #F3A53C, #8B6CF0); }
.tfc-frame::before, .tfc-frame::after { content: ""; position: absolute; left: 0; right: 0; height: 7px; background: radial-gradient(circle at 6px 3.5px, rgba(23, 18, 31, .55) 2px, transparent 2.5px) 0 0 / 12px 7px repeat-x; }
.tfc-frame::before { top: 2px; }
.tfc-frame::after { bottom: 2px; }
.tfc-frame .ico { width: 28px; height: 28px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
.tfc-frame em { position: absolute; right: 6px; bottom: 11px; padding: 1px 5px; border-radius: 4px; font: 600 calc(10px * var(--fs))/1.4 ui-monospace, "SF Mono", Menlo, monospace; font-style: normal; background: rgba(0, 0, 0, .45); }
.bd-page.th-film .bd-tool b { color: #fff; padding: 0 2px; }
.bd-page.th-film .bd-tool > span:last-child { color: #b3a8cc; padding: 0 2px; }
/* 手机上单数时最后一张占整行：胶片格别跟着变高（AI 生图按分类筛出 3 个时） */
@container (max-width: 699.98px) { .bd-page.th-film .bd-tool.odd-last .tfc-frame { aspect-ratio: 32 / 9; } }

/* 嘟嘟：文学杂志风的笔记本（宋体大标题、荧光笔、印章、竖排小字）+ 便利贴 */
.hn-paper { position: relative; padding: 30px 22px 28px 58px; border-radius: 6px 6px 22px 6px; color: #2d3a4a; background-color: #fff8e3; background-image: linear-gradient(90deg, transparent 38px, rgba(239, 90, 90, .4) 38px 40px, transparent 40px), repeating-linear-gradient(180deg, transparent 0 27px, rgba(58, 160, 239, .18) 27px 28px); box-shadow: 0 14px 28px -18px rgba(80, 60, 20, .55); rotate: -.4deg; }
.hn-paper .tn-tape { top: -8px; width: 96px; height: 24px; margin-left: -48px; }
.hn-body { position: relative; display: flex; align-items: center; gap: 20px; padding-right: 44px; }
.hn-body .av.xl { box-shadow: 0 0 0 4px #fff, 0 8px 16px -8px rgba(0, 0, 0, .35); rotate: 3deg; }
.hn-kicker { display: block; margin-bottom: 4px; font: italic calc(13.5px * var(--fs))/1.4 Georgia, "Times New Roman", serif; letter-spacing: .1em; color: #b0566f; }
.hn-paper h1 { margin: 0 0 6px; font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif; font-weight: 900; font-size: calc(32px * var(--fs)); letter-spacing: .12em; color: #1f2733; }
.hn-paper h1 .mk { padding: 0 .1em; margin: 0 -.05em; border-radius: .5em .25em .6em .3em; background: linear-gradient(104deg, rgba(255, 196, 40, 0) .9%, rgba(255, 196, 40, .85) 2.4%, rgba(255, 210, 80, .6) 5.8%, rgba(255, 210, 80, .5) 93%, rgba(255, 210, 80, .75) 96%, rgba(255, 210, 80, 0) 98%) 0 70% / 100% 55% no-repeat; }
.hn-paper .hn-quote { margin: 0 0 6px; font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif; font-size: calc(17px * var(--fs)); line-height: 1.75; color: #3a4656; }
.hn-paper .hn-by { font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif; font-size: calc(14px * var(--fs)); color: #7a8494; letter-spacing: .04em; }
.hn-by b { color: inherit; }
.hn-vert { position: absolute; right: 24px; top: 26px; writing-mode: vertical-rl; padding-left: 6px; border-left: 1px solid rgba(150, 160, 175, .5); font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif; font-size: calc(15px * var(--fs)); letter-spacing: .4em; color: #8f98a6; }
.hn-seal { position: absolute; right: 22px; bottom: 16px; display: grid; place-items: center; text-align: center; width: 34px; height: 52px; box-sizing: border-box; border-radius: 5px; background: #c8372f; color: #fff4ec; font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif; font-weight: 900; font-size: calc(18px * var(--fs)); line-height: 1.05; letter-spacing: .06em; rotate: -6deg; opacity: .9; box-shadow: inset 0 0 0 2px rgba(255, 244, 236, .55), 0 2px 6px -2px rgba(140, 20, 20, .4); }
.bd-page.th-note .bd-tools { gap: 18px 14px; padding: 8px 2px 4px; }
.bd-page.th-note .bd-tool { position: relative; overflow: visible; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 20px 16px 18px; border-radius: 3px 3px 18px 3px; color: #3a3320; background: #fff1a3; box-shadow: 0 10px 16px -12px rgba(80, 60, 20, .6); rotate: -1.2deg; transition: transform .12s, box-shadow .15s, rotate .25s var(--ease-spring); --mk: rgba(255, 166, 0, .38); }
.bd-page.th-note .bd-tool:nth-child(4n+2) { background: #ffd9e4; rotate: 1deg; --mk: rgba(255, 80, 130, .3); }
.bd-page.th-note .bd-tool:nth-child(4n+3) { background: #d6efff; rotate: -.6deg; --mk: rgba(30, 130, 255, .26); }
.bd-page.th-note .bd-tool:nth-child(4n+4) { background: #dcf5d2; rotate: 1.4deg; --mk: rgba(50, 170, 80, .3); }
.bd-page.th-note .bd-tool:hover { rotate: 0deg; box-shadow: 0 14px 22px -12px rgba(80, 60, 20, .6); }
.tn-pin { position: absolute; top: -7px; left: 50%; width: 15px; height: 15px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9a9a, #d93a3a 70%); box-shadow: 0 2px 3px rgba(0, 0, 0, .3); }
.th-note .bd-tool:nth-child(3n+2) .tn-pin { background: radial-gradient(circle at 35% 35%, #9ad0ff, #2a7fd0 70%); }
.th-note .bd-tool:nth-child(3n+3) .tn-pin { background: radial-gradient(circle at 35% 35%, #ffe08a, #e0a012 70%); }
.tnn-no { font: italic 700 calc(13px * var(--fs))/1 Georgia, "Times New Roman", serif; letter-spacing: .08em; color: rgba(58, 51, 32, .5); }
.bd-page.th-note .bd-tool b { font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif; font-weight: 900; font-size: calc(19px * var(--fs)); line-height: 1.35; letter-spacing: .04em; color: #2a2416; }
.bd-page.th-note .bd-tool b span { padding: 0 2px; background: linear-gradient(transparent 58%, var(--mk) 58%, var(--mk) 90%, transparent 90%); }
.bd-page.th-note .bd-tool > span:last-child { font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif; font-size: calc(15px * var(--fs)); line-height: 1.65; color: #5a5038; }

/* 甲甲：电子表格 + 图表（工作簿标题栏、公式栏、行列号、数据条、涨跌色、柱状图） */
.hs-book { overflow: hidden; border-radius: 18px; background: var(--surface); border: 1px solid color-mix(in srgb, #1f9d5c 26%, var(--line)); box-shadow: 0 18px 36px -24px rgba(20, 90, 50, .5); }
.hs-head { display: flex; align-items: center; gap: 18px; padding: 18px 20px 16px; color: #fff; background: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.4px) 0 0 / 14px 14px, linear-gradient(120deg, #127443, #21a262 62%, #5cc489); }
.hs-head .av.xl { border-radius: 18px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .5), 0 10px 22px -10px rgba(0, 0, 0, .4); }
.hs-file { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 2px 9px 2px 3px; border-radius: 6px; background: rgba(255, 255, 255, .18); font-size: calc(12px * var(--fs)); font-weight: 600; }
.hs-file i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 4px; background: #fff; color: #127443; font: 900 calc(11px * var(--fs))/1 Arial, sans-serif; font-style: normal; }
.hs-book h1 { color: #fff; font-weight: 800; letter-spacing: .04em; }
.hs-book .hs-head p { color: rgba(255, 255, 255, .92); }
.hs-head p b { color: #fff; }
.hs-book .hs-head .hs-tag { color: rgba(255, 255, 255, .82); }
.hs-formula { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); font: calc(12.5px * var(--fs)) ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; color: var(--fg-2); }
.hs-formula em { min-width: 34px; padding: 2px 6px; border-radius: 4px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-style: normal; text-align: center; color: var(--fg); }
.hs-formula i { font: italic 700 calc(14px * var(--fs)) Georgia, serif; color: #1f9d5c; }
.hs-formula code { color: var(--fg); font: inherit; }
.hs-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px; }
.hs-sheet { overflow: hidden; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.hs-sheet table { width: 100%; border-collapse: collapse; table-layout: fixed; font: calc(12.5px * var(--fs))/1.2 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.hs-sheet th, .hs-sheet td { height: 27px; padding: 0 8px; border: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-sheet th { width: 26px; padding: 0; background: var(--surface-2); color: var(--fg-3); font-size: calc(11px * var(--fs)); font-weight: 500; text-align: center; }
.hs-sheet thead th { width: auto; height: 22px; }
.hs-sheet thead th:first-child { width: 26px; }
.hs-sheet td { color: var(--fg-2); text-align: right; }
.hs-sheet td:nth-child(2) { text-align: left; font-family: var(--font); }
.hs-sheet tbody tr:first-child td { color: var(--fg); font-family: var(--font); font-weight: 700; background: color-mix(in srgb, #1f9d5c 9%, var(--surface)); }
.hs-bar { position: relative; }
.hs-bar::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: calc(var(--w) - 6px); border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, #22a463 34%, transparent), color-mix(in srgb, #22a463 12%, transparent)); }
.hs-bar span { position: relative; }
.hs-sheet .up { color: #1f9d5c; }
.hs-sheet .dn { color: #e0524c; }
.hs-sum td { color: var(--fg); font-weight: 700; background: color-mix(in srgb, #1f9d5c 5%, var(--surface)); }
.hs-sheet .hs-sel { position: relative; box-shadow: inset 0 0 0 2px #1f9d5c; }
.hs-sel::after { content: ""; position: absolute; right: 0; bottom: 0; width: 6px; height: 6px; background: #1f9d5c; box-shadow: 0 0 0 1px var(--surface); }
.hs-chart { padding: 12px 12px 10px; border-radius: 12px; background: var(--surface); box-shadow: 0 14px 30px -18px rgba(20, 90, 50, .55), inset 0 0 0 1px var(--line); }
.hs-ct { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.hs-ct b { font-size: calc(13.5px * var(--fs)); }
.hs-ct em { font-style: normal; font-size: calc(12px * var(--fs)); font-weight: 700; color: #1f9d5c; white-space: nowrap; }
.hs-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.hs-chart .g line { stroke: var(--line-2); stroke-dasharray: 2 3; }
.hs-chart .b rect { fill: color-mix(in srgb, #22a463 50%, var(--surface)); transform-box: fill-box; transform-origin: bottom; animation: hsGrow .9s var(--ease-spring) both; }
.hs-chart .b rect:nth-child(2) { animation-delay: .06s; } .hs-chart .b rect:nth-child(3) { animation-delay: .12s; } .hs-chart .b rect:nth-child(4) { animation-delay: .18s; } .hs-chart .b rect:nth-child(5) { animation-delay: .24s; } .hs-chart .b rect:nth-child(6) { animation-delay: .3s; fill: #1f9d5c; }
@keyframes hsGrow { from { transform: scaleY(0); } }
.hs-chart .l { fill: none; stroke: #f3a53c; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 240; animation: hsDraw 1.3s ease .45s both; }
@keyframes hsDraw { from { stroke-dashoffset: 240; } }
.hs-chart .d circle { fill: var(--surface); stroke: #f3a53c; stroke-width: 1.5; }
.hs-chart .x text { fill: var(--fg-3); font-size: calc(7.5px * var(--fs)); text-anchor: middle; font-family: var(--font); }
.hs-kpi { display: flex; gap: 8px; margin-top: 8px; }
.hs-kpi span { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); }
.hs-kpi em { font-style: normal; font-size: calc(11px * var(--fs)); color: var(--fg-3); }
.hs-kpi b { font-size: calc(14px * var(--fs)); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 工具卡片：上面是这个工具产出的东西的样子 */
.bd-page.th-sheet .bd-tool { display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 0 0 14px; overflow: hidden; border: 1px solid color-mix(in srgb, #1f9d5c 20%, var(--line)); }
.bd-page.th-sheet .bd-tool:hover { transform: translateY(-3px); box-shadow: var(--shadow-1), 0 16px 28px -18px rgba(20, 90, 50, .6); }
.bd-page.th-sheet .bd-tool > b { padding: 10px 14px 0; font-size: calc(16px * var(--fs)); }
.bd-page.th-sheet .bd-tool > span:last-child { padding: 0 14px; }
.tsv { position: relative; height: 104px; display: flex; align-items: center; justify-content: center; padding: 30px 14px 12px; box-sizing: border-box; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, #22a463 10%, var(--surface)), color-mix(in srgb, #22a463 3%, var(--surface))); border-bottom: 1px solid color-mix(in srgb, #1f9d5c 14%, var(--line)); }
.tsv > em { position: absolute; top: 8px; right: 8px; padding: 1px 7px; border-radius: 4px; background: #1f9d5c; color: #fff; font: 800 calc(10.5px * var(--fs))/1.6 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; font-style: normal; letter-spacing: .04em; }
.v-sheet { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; width: 84%; border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); background: var(--surface); box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .35); }
.v-sheet i { position: relative; height: 14px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.v-sheet i.h { background: color-mix(in srgb, #1f9d5c 22%, var(--surface)); }
.v-sheet i.b::before { content: ""; position: absolute; left: 2px; top: 3px; bottom: 3px; width: calc(var(--w) - 4px); border-radius: 1px; background: color-mix(in srgb, #22a463 45%, transparent); }
.v-sheet i.s { box-shadow: inset 0 0 0 1.5px #1f9d5c; z-index: 1; }
.v-sigma { position: absolute; left: 12px; bottom: 10px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #f3a53c; color: #fff; font: 700 calc(15px * var(--fs))/1 Georgia, serif; box-shadow: 0 4px 10px -4px rgba(243, 165, 60, .7); }
.v-money { position: relative; z-index: 1; align-self: flex-start; display: grid; gap: 0; margin-right: auto; }
.v-money em { font-style: normal; font-size: calc(11px * var(--fs)); color: var(--fg-3); }
.v-money b { font-size: calc(20px * var(--fs)); line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.v-money i { font-style: normal; font-size: calc(11.5px * var(--fs)); font-weight: 700; color: #1f9d5c; }
.v-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30%; }
.v-spark path { fill: color-mix(in srgb, #22a463 16%, transparent); }
.v-spark polyline { fill: none; stroke: #1f9d5c; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.v-chart { width: auto; height: 100%; max-width: 88%; overflow: visible; }
.tsv:has(.v-money) { padding-top: 14px; }
.v-chart rect { fill: color-mix(in srgb, #22a463 50%, var(--surface)); }
.v-chart rect:last-of-type { fill: #1f9d5c; }
.v-chart polyline { fill: none; stroke: #f3a53c; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.v-survey { display: grid; gap: 7px; width: 100%; }
.v-survey i { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 2.4em; align-items: center; gap: 6px; font-style: normal; }
.v-survey b { font-size: calc(11px * var(--fs)); font-weight: 600; color: var(--fg-2); }
.v-survey span { position: relative; height: 9px; border-radius: 99px; background: color-mix(in srgb, var(--fg) 9%, transparent); overflow: hidden; }
.v-survey span::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 99px; background: #1f9d5c; }
.v-survey i:nth-child(2) span::before { background: #f3a53c; }
.v-survey i:nth-child(3) span::before { background: #e0524c; }
.v-survey em { font-style: normal; font-size: calc(11px * var(--fs)); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.v-rows { display: grid; gap: 4px; width: 100%; padding: 6px 8px; border-radius: 8px; background: var(--surface); box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--line); }
.v-rows i { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-style: normal; }
.v-rows b { font-size: calc(11.5px * var(--fs)); font-weight: 600; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-rows em { font-style: normal; font-size: calc(11.5px * var(--fs)); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-rows em.lo { color: #e0524c; } .v-rows em.mid { color: #d98a1c; } .v-rows em.ok { color: #1f9d5c; }
.v-calc i:last-child { padding-top: 3px; border-top: 1px dashed var(--line-2); }
.v-dash { position: relative; z-index: 1; align-self: flex-start; display: flex; gap: 5px; width: 100%; }
.v-dash i { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 5px 6px; border-radius: 7px; background: var(--surface); box-shadow: 0 4px 10px -8px rgba(0, 0, 0, .4), inset 0 0 0 1px var(--line); font-style: normal; }
.v-dash em { font-style: normal; font-size: calc(10px * var(--fs)); color: var(--fg-3); }
.v-dash b { font-size: calc(13px * var(--fs)); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 雪团：检测报告（报告编号、评分环、核验章、逐项状态） */
.ha-report { position: relative; overflow: hidden; border-radius: 18px; color: #dfe6f5; background: linear-gradient(rgba(120, 150, 255, .05) 1px, transparent 1px) 0 0 / 100% 26px, linear-gradient(90deg, rgba(120, 150, 255, .05) 1px, transparent 1px) 0 0 / 26px 100%, linear-gradient(160deg, #111a30, #0a1121 70%); border: 1px solid rgba(120, 150, 255, .22); box-shadow: 0 20px 40px -24px rgba(5, 10, 30, .85); }
.ha-top { display: flex; justify-content: space-between; gap: 10px; padding: 10px 18px; border-bottom: 1px dashed rgba(120, 150, 255, .28); font: 600 calc(11.5px * var(--fs))/1.4 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; letter-spacing: .14em; color: #7f8fb8; }
.ha-top b { color: #5cc8ff; letter-spacing: .06em; }
.ha-main { display: flex; align-items: center; gap: 18px; padding: 20px 18px 14px; }
.ha-id { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; }
.ha-id .av.xl { border-radius: 16px; box-shadow: 0 0 0 1px rgba(92, 200, 255, .55), 0 0 0 6px rgba(92, 200, 255, .08); }
.ha-report h1 { color: #fff; font-weight: 800; letter-spacing: .06em; }
.ha-report p b { color: #fff; }
.ha-report .ha-dim { color: #94a3c4; }
.ha-score { position: relative; flex: none; width: 94px; height: 94px; display: grid; place-items: center; text-align: center; }
.ha-score svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.ha-score circle { fill: none; stroke-width: 6; }
.ha-score .bg { stroke: rgba(120, 150, 255, .16); }
.ha-score .fg { stroke: #3ddc97; stroke-linecap: round; stroke-dasharray: 251.3; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px rgba(61, 220, 151, .6)); animation: haRing 1.4s var(--ease-spring) .2s both; }
@keyframes haRing { from { stroke-dashoffset: 251.3; } }
.ha-score b { display: block; font: 800 calc(25px * var(--fs))/1 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; color: #fff; }
.ha-score em { display: block; margin-top: 4px; font-style: normal; font-size: calc(11px * var(--fs)); color: #8fa0c6; }
.ha-checks { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 240px 18px 18px; }
.ha-checks span { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 6px; background: rgba(120, 150, 255, .08); border: 1px solid rgba(120, 150, 255, .18); font-size: calc(12.5px * var(--fs)); color: #c9d3ea; }
.ha-checks span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 8px #3ddc97; }
.ha-checks span.warn::before { background: #f5b748; box-shadow: 0 0 8px #f5b748; }
.ha-stamp { position: absolute; right: 130px; bottom: 14px; padding: 5px 10px; border: 2px solid rgba(61, 220, 151, .75); border-radius: 8px; color: rgba(61, 220, 151, .9); font-weight: 900; font-size: calc(15px * var(--fs)); line-height: 1.2; letter-spacing: .24em; text-align: center; rotate: -9deg; }
.ha-stamp em { display: block; font: 700 calc(9px * var(--fs))/1.3 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; font-style: normal; letter-spacing: .28em; }
/* 工具卡片：检查项（编号、交付物、三步流程） */
.bd-page.th-audit .bd-tool { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px 14px 14px 17px; color: #dfe6f5; background: linear-gradient(160deg, #121b31, #0c1324); border: 1px solid rgba(120, 150, 255, .2); box-shadow: inset 3px 0 0 #5cc8ff, 0 12px 24px -16px rgba(5, 10, 30, .85); }
.bd-page.th-audit .bd-tool:hover { border-color: rgba(92, 200, 255, .6); }
.ta-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.ta-head em { white-space: nowrap; font: 700 calc(12.5px * var(--fs))/1 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; font-style: normal; letter-spacing: .1em; color: #5cc8ff; }
.ta-pill { padding: 2px 8px; border-radius: 99px; background: rgba(61, 220, 151, .12); color: #5fe3a8; font-size: calc(11.5px * var(--fs)); font-weight: 700; white-space: nowrap; }
.bd-page.th-audit .bd-tool b { color: #fff; font-size: calc(16px * var(--fs)); }
.bd-page.th-audit .bd-tool .ta-desc { font-size: calc(13.5px * var(--fs)); line-height: 1.55; color: #9fadcc; }
.bd-page.th-audit .bd-tool > span.ta-steps { display: flex; align-items: center; margin-top: auto; padding-top: 12px; font-size: calc(12px * var(--fs)); line-height: 1.4; color: #8b9ac0; }
.ta-steps i { flex: 1; min-width: 6px; height: 1px; margin: 0 6px; background: rgba(120, 150, 255, .35); }
.ta-steps span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ta-steps span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid #5cc8ff; }
.ta-steps span:last-child { color: #5fe3a8; }
.ta-steps span:last-child::before { background: #3ddc97; border-color: #3ddc97; }

@media (max-width: 900px) {
  .bd-hero2 h1 { font-size: calc(20px * var(--fs)); }
  .bd-hero2 .av.xl { width: 60px; height: 60px; }
  .hn-body { gap: 14px; }
  .hf-body { padding: 12px 16px 8px; gap: 14px; }
  .tf-track.big { margin: 4px 16px 10px; height: 28px; }
  .hs-head { padding: 16px; gap: 14px; }
  .hs-body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; padding: 10px; }
  .hs-sheet .hs-d { display: none; }
  .hs-sheet table { font-size: calc(11px * var(--fs)); }
  .hs-sheet th, .hs-sheet td { height: 24px; padding: 0 5px; }
  .hs-sheet th, .hs-sheet thead th:first-child { width: 18px; padding: 0; }
  .hs-chart { padding: 10px 8px 8px; }
  .hs-ct b { font-size: calc(12px * var(--fs)); }
  .hs-kpi { flex-direction: column; gap: 5px; }
  .hs-kpi span { padding: 4px 7px; }
  .tsv { height: 98px; padding: 28px 12px 10px; }
  .bd-page.th-film .bd-tool { padding: 8px 8px 12px; }
  .hi-code { padding: 0 74px 0 44px; font-size: calc(13px * var(--fs)); line-height: calc(24px * var(--fs)); }
  .hi-main { background: linear-gradient(90deg, #191714 0 34px, transparent 34px); }
  .hi-code > *::before { left: -42px; width: 28px; line-height: calc(24px * var(--fs)); font-size: calc(11.5px * var(--fs)); }
  .hi-ide .hi-code p { font-size: calc(13px * var(--fs)); }
  .hi-ide .hi-code h1 { font-size: calc(19px * var(--fs)); line-height: calc(32px * var(--fs)); }
  .hi-code h1::before { line-height: calc(32px * var(--fs)); }
  .hi-av { right: 12px; top: 14px; }
  .hi-av .av.xl { width: 50px; height: 50px; border-radius: 14px; }
  .hi-tabs > span:nth-child(3) { display: none; }
  .hn-paper { padding: 26px 16px 30px 50px; }
  .hn-paper h1 { font-size: calc(27px * var(--fs)); }
  .hn-body { padding-right: 26px; }
  .hn-vert { display: none; }
  .hn-seal { top: 20px; right: 12px; bottom: auto; width: 30px; height: 46px; font-size: calc(16px * var(--fs)); }
  .bd-page.th-note .bd-tool { padding: 18px 13px 16px; }
  .bd-page.th-note .bd-tool b { font-size: calc(17.5px * var(--fs)); }
  .ha-top { padding: 9px 14px; font-size: calc(10.5px * var(--fs)); letter-spacing: .08em; }
  .ha-main { padding: 16px 14px 12px; gap: 12px; align-items: flex-start; }
  .ha-id { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ha-score { width: 78px; height: 78px; }
  .ha-score b { font-size: calc(21px * var(--fs)); }
  .ha-checks { padding: 0 92px 16px 14px; }
  .ha-stamp { right: 12px; bottom: 14px; font-size: calc(13px * var(--fs)); padding: 4px 8px; }
  .bd-page.th-audit .bd-tool { padding: 12px 12px 12px 15px; }
}


/* ---------- 员工主页：顶栏下面的「对话 / 工作台」标签 ---------- */
.subbar { display: none; flex: none; position: relative; z-index: 3; justify-content: center; padding: 6px 16px 8px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.subbar.on { display: flex; }
.emp-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 380px); padding: 3px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.emp-tabs::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 11px; background: var(--surface); box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .2), 0 0 0 1px color-mix(in srgb, var(--c) 32%, transparent); transition: translate .38s var(--ease-spring); }
.emp-tabs[data-on="board"]::before { translate: 100% 0; }
.emp-tabs button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 11px; font-size: calc(15px * var(--fs)); font-weight: 600; color: var(--fg-3); transition: color .2s; -webkit-tap-highlight-color: transparent; }
.emp-tabs button .ico { width: 17px; height: 17px; transition: color .2s; }
.emp-tabs button.on { color: var(--fg); }
.emp-tabs button.on .ico { color: var(--c); }
.emp-tabs button:active { scale: .97; }
.emp-tabs em { min-width: 18px; padding: 0 6px; border-radius: 99px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-size: calc(11.5px * var(--fs)); font-style: normal; font-weight: 700; line-height: 18px; text-align: center; }

/* 工作台上的对话框：员工最近说的话、试试这样说、直接发 */
.bd-talk { position: relative; margin: -4px 0 24px; padding: 16px 16px 14px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-1), 0 0 0 1px color-mix(in srgb, var(--c) 20%, var(--line)); animation: upIn .45s var(--ease-spring) .06s both; }
.bt-row { display: flex; align-items: flex-start; gap: 10px; }
.bt-row .av { width: 38px; height: 38px; flex: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--c) 65%, transparent); }
.bt-bubble { min-width: 0; padding: 10px 14px; border-radius: 4px 18px 18px 18px; background: color-mix(in srgb, var(--c) 11%, var(--surface-2)); color: var(--fg); font-size: calc(15.5px * var(--fs)); line-height: 1.6; overflow-wrap: anywhere; }
.bt-typing { display: inline-flex; gap: 4px; padding: 6px 2px; }
.bt-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); opacity: .5; animation: dot 1.2s infinite; }
.bt-typing i:nth-child(2) { animation-delay: .15s; } .bt-typing i:nth-child(3) { animation-delay: .3s; }
.bt-say { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 12px 48px; }
.bt-say em { width: 100%; font-style: normal; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.bt-say .chip { height: auto; min-height: 30px; padding: 4px 11px; border-color: color-mix(in srgb, var(--c) 30%, var(--line)); color: var(--fg); white-space: normal; text-align: left; }
.bt-say .chip:hover { border-color: var(--c); }
.bt-form { display: flex; align-items: flex-end; gap: 8px; padding: 5px 5px 5px 15px; border-radius: 24px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s, background .15s; }
.bt-form:focus-within { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--c), 0 6px 18px -10px var(--c); }
.bt-form textarea { flex: 1; min-width: 0; min-height: 24px; max-height: 150px; padding: 7px 0; border: 0; outline: 0; resize: none; background: transparent; color: var(--fg); font: inherit; font-size: calc(16px * var(--fs)); line-height: 1.5; }
.bt-send { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: #fff; box-shadow: 0 6px 14px -6px var(--c); transition: transform .12s; }
.bt-send:active { transform: scale(.92); }
.bt-send .ico { width: 19px; height: 19px; }
.bt-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.bt-shop { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: calc(13.5px * var(--fs)); color: var(--fg-2); }
.bt-shop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-shop .ico { width: 15px; height: 15px; flex: none; }
.bt-shop.empty { padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, var(--c) 12%, var(--surface-2)); color: var(--fg); }
.bt-shop:hover { color: var(--fg); }
.bt-open { display: flex; align-items: center; gap: 6px; margin: 0 0 0 auto; font-size: calc(13.5px * var(--fs)); color: var(--fg-2); }
.bt-open .ico { width: 15px; height: 15px; }
.bt-open:hover { color: var(--fg); }
.bd-tile .cr-badge { margin: 0; }
.bd-new { font-style: normal; font-weight: 600; color: var(--accent-ink); }
.wl-quick .wl-board { border-style: dashed; }
@media (max-width: 900px) {
  .subbar { padding: 5px 12px 7px; }
  .bd-talk { padding: 14px 12px 12px; }
  .bt-say { margin-left: 0; }
}

/* 我的作品：做出来的网页缩小了放在卡片上，像作品墙 */
.bw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.bw-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); text-align: left; transition: transform .15s var(--ease-spring), box-shadow .2s; animation: upIn .42s var(--ease-spring) both; animation-delay: calc(var(--i) * 40ms); }
.bw-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1), 0 14px 26px -18px color-mix(in srgb, var(--c) 70%, transparent); }
.bw-card:active { transform: scale(.98); }
.bw-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--c) 22%, var(--surface)), color-mix(in srgb, var(--c) 8%, var(--surface-2))); border-bottom: 1px solid var(--line); }
.bw-thumb iframe { position: absolute; left: 0; top: 0; width: 400%; height: 400%; transform: scale(.25); transform-origin: 0 0; border: 0; pointer-events: none; background: #fff; }
.bw-thumb .bd-ico { width: 52px; height: 52px; border-radius: 16px; }
.bw-thumb .tag { position: absolute; top: 8px; left: 8px; z-index: 1; box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .25); }
.bw-meta { display: grid; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
.bw-meta b { font-size: calc(15px * var(--fs)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-meta span { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .bw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* ---------- 任务表单 ---------- */
.bd-form .bd-who { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 14px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--c) 10%, var(--surface-2)); font-size: calc(14px * var(--fs)); color: var(--fg-2); }
.bd-form .bd-who .av { width: 30px; height: 30px; }
.bd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-chips .chip-btn { height: 32px; padding: 0 13px; border-radius: 999px; font-size: calc(14px * var(--fs)); background: var(--surface-2); color: var(--fg-2); border: 1px solid transparent; transition: background .15s, color .15s, transform .12s; }
.bd-chips .chip-btn:active { transform: scale(.95); }
.bd-chips .chip-btn.on { background: color-mix(in srgb, var(--c) 16%, var(--surface)); border-color: var(--c); color: var(--fg); font-weight: 600; }
.bd-file { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: var(--r-lg); border: 1.5px dashed var(--line-2); color: var(--fg-3); font-size: calc(14px * var(--fs)); cursor: pointer; transition: border-color .15s, background .15s; }
.bd-file .ico { width: 20px; height: 20px; flex: none; }
.bd-file.on { border-style: solid; border-color: var(--c); color: var(--fg); background: color-mix(in srgb, var(--c) 8%, var(--surface)); }
/* 文件名、多张图片的说明可能很长：最多两行，不能把弹窗撑宽 */
.bd-file span { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; padding: 6px 0; overflow-wrap: anywhere; }

/* ---------- 聊天里的任务卡片 ---------- */
.task-card { width: min(340px, 86%); padding: 12px 14px; border-radius: 18px 18px 6px 18px; background: var(--surface); box-shadow: var(--shadow-1); border: 1px solid var(--line); margin-left: auto; }
.tc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tc-ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.tc-ico .ico { width: 16px; height: 16px; }
.tc-head b { font-size: calc(15px * var(--fs)); }
.task-card dl { margin: 0; display: grid; gap: 5px; }
.task-card dl div { display: grid; grid-template-columns: 58px 1fr; gap: 8px; font-size: calc(14px * var(--fs)); }
.task-card dt { color: var(--fg-3); }
.task-card dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.task-card details { margin-top: 8px; font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.task-card summary { cursor: pointer; }
.tc-full { margin-top: 6px; line-height: 1.6; max-height: 220px; overflow: auto; }
.hc-sub .hc-back { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }

/* ---------- 视频工作室 ---------- */
html.vs-open, html.vs-open body { overflow: hidden; }
.vs { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 16px; background: rgba(12, 10, 16, .48); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
.vs.in { opacity: 1; }
.vs-panel { width: min(640px, 100%); max-height: min(860px, 100%); display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--bg); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5); overflow: hidden; transform: translateY(14px) scale(.98); transition: transform .32s var(--ease-spring); }
.vs.in .vs-panel { transform: none; }
.vs-head { display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 10px; border-bottom: 1px solid var(--line); flex: none; }
.vs-head b { font-size: calc(16px * var(--fs)); }
.vs-body { flex: 1; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
.vs-foot { flex: none; display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.vs-foot .vs-go { flex: 1; height: 46px; font-size: calc(16.5px * var(--fs)); }
.vs-who { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 14px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--c) 11%, var(--surface-2)); font-size: calc(14px * var(--fs)); color: var(--fg-2); line-height: 1.55; }
.vs-who .av { width: 32px; height: 32px; }
.vs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vs-chips .chip-btn { height: 32px; padding: 0 13px; border-radius: 999px; font-size: calc(14px * var(--fs)); background: var(--surface-2); color: var(--fg-2); border: 1px solid transparent; transition: background .15s, color .15s, transform .12s; }
.vs-chips .chip-btn:active { transform: scale(.95); }
.vs-chips .chip-btn.on { background: color-mix(in srgb, var(--c) 16%, var(--surface)); border-color: var(--c); color: var(--fg); font-weight: 600; }
.vs-work { display: grid; justify-items: center; gap: 12px; padding: 26px 0 10px; text-align: center; }
.vs-stage { width: 72px; height: 72px; display: grid; place-items: center; }
.vs-spin { width: 46px; height: 46px; border-radius: 50%; border: 3.5px solid color-mix(in srgb, var(--c) 25%, transparent); border-top-color: var(--c); animation: gateSpin .9s linear infinite; }
.vs-bar { width: min(420px, 100%); height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.vs-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--c), var(--accent)); transition: width .3s; }
.vs-status { margin: 0; font-size: calc(15px * var(--fs)); font-variant-numeric: tabular-nums; }
.vs-done { display: grid; gap: 12px; justify-items: center; text-align: center; }
.vs-out { width: 100%; max-height: 52vh; border-radius: var(--r-lg); background: #000; }
.vs-stats { font-size: calc(14.5px * var(--fs)); color: var(--fg-2); }
.vs-dl { width: 100%; height: 46px; font-size: calc(16.5px * var(--fs)); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.vs input[type="range"] { width: 100%; accent-color: var(--c); height: 26px; }
.vs-hint { display: block; margin-top: 6px; font-style: normal; font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.vs-need { flex: 1; align-self: center; font-size: calc(13.5px * var(--fs)); color: var(--fg-3); }
.vs-foot .vs-need + .vs-go { flex: none; padding: 0 20px; }
.vs-done .vs-dl + .vs-dl { margin-top: -4px; }
.vs .icon-btn.xs.on { color: var(--danger, #e5484d); background: color-mix(in srgb, var(--danger, #e5484d) 12%, transparent); }
@media (max-width: 900px) {
  .vs { padding: 0; place-items: end stretch; }
  .vs-panel { width: 100%; max-height: calc(100% - 28px); border-radius: 20px 20px 0 0; transform: translateY(40px); }
}

/* ---------- 耳朵的板块：快速获客、准备素材、做视频、AI 生图 ---------- */
.hf-cta { display: flex; align-items: center; gap: 12px; width: calc(100% - 44px); margin: 2px 22px 10px; padding: 12px 16px; border-radius: 14px; text-align: left; color: #fff; background: linear-gradient(120deg, #8B6CF0, #F95E94 60%, #F3A53C); box-shadow: 0 12px 26px -14px #F95E94; transition: transform .15s var(--ease-spring), filter .15s; }
.hf-cta:hover { filter: brightness(1.06); }
.hf-cta:active { transform: scale(.98); }
.hf-cta > .ico:first-child { width: 22px; height: 22px; padding: 8px; box-sizing: content-box; border-radius: 12px; background: rgba(255, 255, 255, .2); flex: none; }
.hf-cta > span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.hf-cta b { font-size: calc(17px * var(--fs)); font-weight: 800; letter-spacing: .5px; color: #fff; }
.hf-cta em { font-style: normal; font-size: calc(12.5px * var(--fs)); opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-cta > .ico:last-child { width: 20px; height: 20px; flex: none; }
.bd-badge { font-style: normal; font-size: calc(11.5px * var(--fs)); font-weight: 700; line-height: 1.5; padding: 0 7px; border-radius: 6px; color: #fff; background: linear-gradient(135deg, #F95E94, #8B6CF0); }

/* ---------- 耳朵板块：和头图一样的胶片 / 剪辑台质感（深色片子、齿孔、时间码、轨道） ---------- */
.bd-page.th-film { --fm: #17121f; --fm-line: rgba(255, 255, 255, .07); --fm-fg: #efe9ff; --fm-dim: #b3a8cc; --fm-tc: #ff8aa2; --fm-grad: linear-gradient(120deg, #8B6CF0, #F95E94 60%, #F3A53C); }
.bd-page.th-film .bd-sec h2::before { content: "▶"; font-size: calc(11px * var(--fs)); color: #F95E94; text-shadow: 0 0 10px rgba(249, 94, 148, .65); }

/* 快速获客：第一张是取景器，后面两张是小时间线 */
.pr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pr-card { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 150px; padding: 14px; border-radius: 16px; text-align: left; color: var(--fm-fg); background: radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--a) 32%, transparent), transparent 62%), var(--fm); border: 1px solid var(--fm-line); box-shadow: 0 16px 30px -22px rgba(23, 18, 31, .9); transition: transform .15s var(--ease-spring), box-shadow .15s; animation: upIn .42s var(--ease-spring) both; animation-delay: calc(var(--i) * 40ms); }
.pr-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--a) 70%, transparent), 0 18px 32px -22px var(--a); }
.pr-card:active { transform: scale(.98); }
.pr-card > .tf-holes { position: absolute; left: 0; right: 0; height: 12px; background: radial-gradient(circle at 9px 6px, #2d2440 3px, transparent 3.6px) 0 0 / 20px 12px repeat-x; opacity: .95; }
.pr-card > .tf-holes:first-child { top: 3px; }
.pr-card > .tf-holes:last-child { bottom: 3px; }
.pr-card.big { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t v" "c v"; column-gap: 14px; row-gap: 12px; align-items: start; min-height: 0; padding: 24px 18px; background: radial-gradient(90% 130% at 100% 50%, color-mix(in srgb, var(--a) 38%, transparent), transparent 62%), var(--fm); }
.pr-card.big .pr-txt { grid-area: t; }
.pr-card.big .pr-view { grid-area: v; align-self: center; }
.pr-card.big .pr-cta { grid-area: c; align-self: end; justify-self: start; margin: 0; }
.pr-txt { position: relative; z-index: 1; display: grid; gap: 6px; justify-items: start; align-content: start; width: 100%; min-width: 0; }
.pr-tc { display: inline-flex; align-items: center; font: 600 calc(11.5px * var(--fs))/1.5 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 1px; color: var(--fm-tc); }
.pr-txt b { font-size: calc(16px * var(--fs)); font-weight: 800; line-height: 1.3; color: #fff; }
.pr-card.big .pr-txt b { font-size: calc(21px * var(--fs)); letter-spacing: .5px; }
.pr-txt > span:last-child { font-size: calc(13px * var(--fs)); color: var(--fm-dim); line-height: 1.45; }
.pr-hot { font-style: normal; font-size: calc(13px * var(--fs)); font-weight: 900; letter-spacing: 1px; padding: 2px 8px; border-radius: 6px; color: #fff; background: linear-gradient(135deg, #ff4d4f, #ff9a3d); transform: rotate(-2deg); box-shadow: 0 4px 12px -4px #ff4d4f; }
.pr-cta { position: relative; z-index: 1; margin-top: auto; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 14px; border-radius: 99px; font-size: calc(13.5px * var(--fs)); font-weight: 700; color: #fff; background: var(--fm-grad); box-shadow: 0 8px 18px -10px #F95E94; }
.pr-cta .ico { width: 14px; height: 14px; }
/* 取景器：9:16 的画面，四角取景框、附近、热度、播放进度 */
.pr-view { position: relative; z-index: 1; width: 100px; aspect-ratio: 9 / 16; border-radius: 13px; overflow: hidden; color: #fff; background: radial-gradient(80% 55% at 50% 38%, color-mix(in srgb, var(--a) 80%, #ffd27a), transparent 72%), linear-gradient(165deg, color-mix(in srgb, var(--a) 65%, #2a0f12), #140c1c); box-shadow: 0 0 0 2px rgba(255, 255, 255, .08), 0 16px 30px -14px var(--a); transform: rotate(3deg); }
.pv-c { position: absolute; inset: 8px; opacity: .85; background:
  linear-gradient(#fff, #fff) left top / 10px 1.5px no-repeat, linear-gradient(#fff, #fff) left top / 1.5px 10px no-repeat,
  linear-gradient(#fff, #fff) right top / 10px 1.5px no-repeat, linear-gradient(#fff, #fff) right top / 1.5px 10px no-repeat,
  linear-gradient(#fff, #fff) left bottom / 10px 1.5px no-repeat, linear-gradient(#fff, #fff) left bottom / 1.5px 10px no-repeat,
  linear-gradient(#fff, #fff) right bottom / 10px 1.5px no-repeat, linear-gradient(#fff, #fff) right bottom / 1.5px 10px no-repeat; }
.pv-pin { position: absolute; left: 12px; top: 14px; display: inline-flex; align-items: center; gap: 2px; padding: 0 5px; border-radius: 99px; font-size: calc(9.5px * var(--fs)); font-weight: 700; line-height: 1.7; background: rgba(0, 0, 0, .38); white-space: nowrap; }
.pv-pin .ico { width: 9px; height: 9px; }
.pv-heat { position: absolute; right: 11px; bottom: 28px; display: grid; justify-items: center; gap: 1px; font: 700 calc(9.5px * var(--fs))/1 ui-monospace, monospace; }
.pv-heat .ico { width: 15px; height: 15px; color: #ffd27a; filter: drop-shadow(0 0 6px rgba(255, 210, 122, .8)); }
.pv-ico { position: absolute; left: 50%; top: 44%; translate: -50% -50%; display: grid; place-items: center; animation: pvBeat 1.6s ease-in-out infinite; }
.pv-ico .ico { width: 34px; height: 34px; filter: drop-shadow(0 0 12px rgba(255, 255, 255, .7)); }
.pv-bar { position: absolute; left: 11px; right: 11px; bottom: 15px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.pv-bar i { display: block; height: 100%; width: 40%; border-radius: 2px; background: #fff; animation: pvPlay 6s linear infinite; }
@keyframes pvPlay { from { width: 4%; } to { width: 100%; } }
@keyframes pvBeat { 50% { scale: 1.08; } }
/* 小卡片上的时间线：智能排序 = 一条轨道 + 魔棒；生同款 = 爆款和你的两条轨道对齐 */
.pr-tl { position: relative; z-index: 1; order: -1; display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px; border-radius: 10px; background: #241c33; }
.pr-tl > span { flex: 1; display: flex; align-items: center; gap: 3px; height: 26px; min-width: 0; }
.pr-tl i { flex: 1; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--a), color-mix(in srgb, var(--a) 55%, #fff)); }
.pr-tl i:nth-of-type(2) { flex: 1.6; opacity: .85; }
.pr-tl i:nth-of-type(3) { flex: .8; opacity: .7; }
.pr-tl i:nth-of-type(4) { flex: 1.3; opacity: .55; }
.pr-tl b { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--fm-grad); box-shadow: 0 6px 12px -6px #F95E94; }
.pr-tl b .ico { width: 15px; height: 15px; }
.pr-tl.two { flex-direction: column; align-items: stretch; gap: 4px; }
.pr-tl.two > span { height: 13px; }
.pr-tl.two em { flex: none; width: 26px; font: 600 calc(9.5px * var(--fs))/1 ui-monospace, monospace; font-style: normal; color: var(--fm-dim); }
.pr-tl.two > span:last-child i { background: linear-gradient(90deg, #14b8a6, #5eead4); }
@container (min-width: 700px) {
  .pr-grid { grid-template-columns: 2fr 1fr 1fr; }
  .pr-card.big { grid-column: auto; }
}

/* 准备素材：两个素材箱 */
.lb-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lb-tile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "i t g" "i e g"; align-items: center; column-gap: 10px; row-gap: 3px; min-width: 0; padding: 12px; border-radius: 14px; text-align: left; color: var(--fm-fg); background: var(--fm); border: 1px solid var(--fm-line); box-shadow: 0 12px 24px -18px rgba(23, 18, 31, .85); transition: transform .15s var(--ease-spring), box-shadow .15s; animation: upIn .42s var(--ease-spring) both; animation-delay: calc(var(--i) * 30ms); }
.lb-tile:hover { transform: translateY(-1px); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--lc, #8B6CF0) 70%, transparent), 0 12px 24px -18px rgba(23, 18, 31, .85); }
.lb-tile:active { transform: scale(.97); }
.lb-ico { grid-area: i; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--lc, #8B6CF0), color-mix(in srgb, var(--lc, #8B6CF0) 55%, #F95E94)); box-shadow: 0 8px 16px -8px var(--lc, #8B6CF0); }
.lb-tile:nth-child(2) { --lc: #F3A53C; }
.lb-ico .ico { width: 21px; height: 21px; }
.lb-txt { grid-area: t; display: grid; gap: 1px; min-width: 0; }
.lb-txt b { font-size: calc(15px * var(--fs)); font-weight: 800; color: #fff; }
.lb-txt span { font-size: calc(12px * var(--fs)); color: var(--fm-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-tile em { grid-area: e; justify-self: start; font: 600 calc(11px * var(--fs))/1.7 ui-monospace, "SF Mono", Menlo, monospace; font-style: normal; color: var(--fm-tc); padding: 0 7px; border-radius: 99px; background: rgba(255, 138, 162, .12); white-space: nowrap; }
.lb-tile em:empty { display: none; }
.lb-go { grid-area: g; width: 16px; height: 16px; color: var(--fm-dim); }

/* 做视频：一段段片子（时间码、发光的画面、一小段轨道） */
.bd-page.th-film .bd-tool.st-card { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; grid-template-areas: "t a" "d a" "k k"; column-gap: 10px; row-gap: 6px; min-height: 128px; padding: 14px; border-radius: 16px; color: var(--fm-fg); background: radial-gradient(110% 90% at 100% 100%, color-mix(in srgb, var(--a) 30%, transparent), transparent 60%), var(--fm); border: 1px solid var(--fm-line); box-shadow: 0 14px 26px -20px rgba(23, 18, 31, .9); }
.bd-page.th-film .bd-tool.st-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--a) 70%, transparent), 0 16px 28px -20px var(--a); }
.stc-tc { grid-area: k; justify-self: end; align-self: center; font: 600 calc(10.5px * var(--fs))/1.5 ui-monospace, "SF Mono", Menlo, monospace; font-style: normal; letter-spacing: .5px; color: var(--fm-tc); }
.st-card:has(.stc-tag) .stc-tc { display: none; }
.bd-page.th-film .st-card .stc-t { grid-area: t; padding: 0; color: #fff; font-size: calc(15.5px * var(--fs)); font-weight: 800; line-height: 1.3; }
.bd-page.th-film .st-card .stc-d { grid-area: d; padding: 0; color: var(--fm-dim); font-size: calc(12.5px * var(--fs)); line-height: 1.45; }
.bd-page.th-film .st-card .stc-art { grid-area: a; align-self: end; position: relative; width: 50px; height: 64px; display: grid; place-items: center; padding: 0; border-radius: 14px; color: #fff; background: linear-gradient(160deg, var(--a), color-mix(in srgb, var(--a) 55%, #1d1a22)); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .1), 0 12px 22px -10px var(--a); transform: rotate(4deg); }
.stc-art > .ico { width: 26px; height: 26px; }
.stc-play { position: absolute; left: 50%; bottom: -8px; width: 22px; height: 22px; margin-left: -11px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--a); box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
.stc-play .ico { width: 10px; height: 10px; margin-left: 1px; }
.stc-track { grid-area: k; align-self: center; display: flex; gap: 3px; width: calc(100% - 64px); height: 6px; }
.stc-track i { flex: 1; border-radius: 2px; background: var(--a); }
.stc-track i:nth-child(2) { flex: 1.8; opacity: .6; }
.stc-track i:nth-child(3) { flex: .7; opacity: .35; }
.stc-tag { position: absolute; right: 10px; top: 9px; display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; border-radius: 6px; font-style: normal; font-size: calc(11px * var(--fs)); line-height: 1.6; color: var(--fm-dim); background: rgba(255, 255, 255, .08); }
.stc-tag .ico { width: 11px; height: 11px; }

/* 分类标签（AI 生图）：选中的是一段渐变 */
.gl-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 10px; padding-bottom: 2px; scrollbar-width: none; }
.gl-tabs::-webkit-scrollbar { display: none; }
.gl-tabs .chip { flex: none; height: 30px; padding: 0 12px; font-size: calc(13.5px * var(--fs)); }
.gl-tabs .chip.on { background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: var(--fg); font-weight: 700; border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.bd-page.th-film .gl-tabs .chip.on { background: var(--fm-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 14px -8px #F95E94; }


.bw-video .bw-thumb { background: #15121b; }
.bw-video .bw-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bw-dur { position: absolute; right: 8px; bottom: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; border-radius: 99px; font-style: normal; font-size: calc(12px * var(--fs)); line-height: 1.7; color: #fff; background: rgba(0, 0, 0, .55); font-variant-numeric: tabular-nums; }
.bw-dur .ico { width: 10px; height: 10px; }
.bw-videos + .bw-grid, .bw-videos + .bd-empty { margin-top: 12px; }
@media (max-width: 900px) {
  .hf-cta { width: calc(100% - 28px); margin: 2px 14px 10px; padding: 10px 12px; }
  .pr-card.big { padding: 22px 14px; column-gap: 10px; }
  .pr-card.big .pr-txt b { font-size: calc(18px * var(--fs)); }
  .pr-view { width: 84px; }
  .bd-page.th-film .bd-tool.st-card { min-height: 0; padding: 12px; }
  .bd-page.th-film .st-card .stc-art { width: 42px; height: 54px; border-radius: 11px; }
  .stc-art > .ico { width: 20px; height: 20px; }
  .stc-play { width: 18px; height: 18px; margin-left: -9px; bottom: -6px; }
  .lb-tile { padding: 10px; column-gap: 8px; }
  .lb-ico { width: 38px; height: 38px; border-radius: 12px; }
  .lb-txt span { display: none; }
}

/* ---------- 金宝：AI 创作台（极光头图、创作框、创作卡片、风格、灵感广场、最近生成） ---------- */
.bd-page.th-ai { --ai: #0c1224; --ai-line: rgba(255, 255, 255, .08); --ai-fg: #eaf4ff; --ai-dim: #9fb2c8; --ai-hi: #7ff3e3; --ai-grad: linear-gradient(120deg, #25B3A4, #3d7bff 55%, #8b6cf0); }
.bd-page.th-ai .bd-sec h2::before { content: "✦"; font-size: calc(13px * var(--fs)); color: #25B3A4; text-shadow: 0 0 10px rgba(37, 179, 164, .7); }
.bd-page.th-ai .bd-badge { background: linear-gradient(135deg, #25B3A4, #3d7bff); }
.ai-hero { position: relative; overflow: hidden; isolation: isolate; padding: 18px 18px 16px; border-radius: 22px; color: var(--ai-fg); background: var(--ai); box-shadow: 0 22px 46px -28px rgba(12, 18, 36, .95); }
.ai-aurora { position: absolute; inset: -30%; z-index: -1; filter: blur(44px); opacity: .85; pointer-events: none; }
.ai-aurora i { position: absolute; width: 55%; height: 55%; border-radius: 50%; animation: aiDrift 18s ease-in-out infinite alternate; }
.ai-aurora i:nth-child(1) { left: 6%; top: 10%; background: radial-gradient(circle, rgba(37, 179, 164, .9), transparent 65%); }
.ai-aurora i:nth-child(2) { right: 2%; top: 2%; background: radial-gradient(circle, rgba(139, 108, 240, .8), transparent 65%); animation-delay: -6s; }
.ai-aurora i:nth-child(3) { left: 32%; bottom: 0; background: radial-gradient(circle, rgba(244, 114, 182, .5), transparent 65%); animation-delay: -12s; }
@keyframes aiDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(9%, 7%) scale(1.14); } }
.ai-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.3px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 62%); mask-image: linear-gradient(180deg, #000, transparent 62%); }
.ai-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.bd-hero2 .ai-top .av.xl { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 0 0 2px rgba(37, 179, 164, .9), 0 0 26px -2px rgba(37, 179, 164, .75); }
.ai-top h1 { color: #fff; }
.ai-top p b { color: #fff; }
.ai-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 2px; font: 600 calc(11.5px * var(--fs))/1.6 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .8px; color: var(--ai-hi); }
.ai-dot { width: 7px; height: 7px; border-radius: 50%; background: #8a93a6; flex: none; }
.ai-dot.on { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); animation: aiPulse 2.2s ease-in-out infinite; }
@keyframes aiPulse { 50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); } }
.bd-hero2 .ai-dim { color: var(--ai-dim); font-size: calc(13.5px * var(--fs)); }

/* 创作框 */
.ai-box { position: relative; padding: 10px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ai-box.flash { animation: aiFlash 1.2s ease-out; }
@keyframes aiFlash { 0% { box-shadow: 0 0 0 0 rgba(37, 179, 164, .75); } 100% { box-shadow: 0 0 0 16px rgba(37, 179, 164, 0); } }
.ai-modes { display: flex; gap: 4px; padding: 3px; margin-bottom: 10px; border-radius: 12px; background: rgba(0, 0, 0, .3); }
.ai-modes button { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 36px; border-radius: 9px; color: var(--ai-dim); font-size: calc(14px * var(--fs)); font-weight: 700; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.ai-modes button .ico { width: 16px; height: 16px; flex: none; }
/* 字大（大号、特大、长辈模式）放不下一行：图标放到字上面，字可以折行 */
:root[data-fs="l"] .ai-modes button, :root[data-fs="xl"] .ai-modes button, html.elder .ai-modes button { flex-direction: column; gap: 2px; height: auto; min-height: 44px; padding: 5px 0; font-size: calc(12px * var(--fs)); letter-spacing: -.03em; white-space: normal; line-height: 1.2; text-align: center; }
.ai-modes button.on { color: #fff; background: rgba(255, 255, 255, .15); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 16px -8px rgba(37, 179, 164, .9); }
.ai-tip { display: flex; align-items: center; gap: 6px; margin: -2px 2px 8px; font-size: calc(13px * var(--fs)); color: var(--ai-hi); }
.ai-tip .ico { width: 14px; height: 14px; flex: none; }
.ai-input { padding: 10px; border-radius: 14px; background: rgba(5, 8, 18, .5); border: 1px solid rgba(255, 255, 255, .06); }
.ai-seg { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 8px; }
.ai-seg::-webkit-scrollbar { display: none; }
.ai-seg button { flex: none; height: 28px; padding: 0 10px; border-radius: 8px; font-size: calc(13px * var(--fs)); color: var(--ai-dim); transition: background .2s, color .2s; }
.ai-seg button.on { color: #fff; font-weight: 700; background: rgba(37, 179, 164, .22); box-shadow: inset 0 0 0 1px rgba(37, 179, 164, .55); }
.ai-tipline { margin: -2px 0 8px; font-size: calc(12px * var(--fs)); line-height: 1.5; color: var(--ai-dim); }
.ai-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 8px; margin-bottom: 8px; padding-top: 6px; }
.ai-slot { position: relative; flex: none; width: 70px; height: 70px; display: grid; place-items: center; align-content: center; gap: 1px; padding: 0 4px; border-radius: 12px; border: 1.5px dashed rgba(255, 255, 255, .28); color: var(--ai-dim); background: rgba(255, 255, 255, .03); text-align: center; transition: border-color .2s, background .2s; }
.ai-slot:hover { border-color: rgba(37, 179, 164, .8); background: rgba(37, 179, 164, .08); }
.ai-slot > .ico { width: 18px; height: 18px; }
.ai-slot b { font-size: calc(12px * var(--fs)); color: #fff; }
.ai-slot em { font-style: normal; font-size: calc(10px * var(--fs)); line-height: 1.2; opacity: .85; }
.ai-slot.has { border-style: solid; border-color: rgba(255, 255, 255, .22); }
.ai-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.ai-x { position: absolute; right: -7px; top: -7px; z-index: 1; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #0c1224; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .45); }
.ai-x .ico { width: 11px; height: 11px; }
.ai-arrow { display: grid; place-items: center; color: var(--ai-dim); }
.ai-arrow .ico { width: 16px; height: 16px; }
#ai-prompt { display: block; width: 100%; min-height: 78px; padding: 2px; border: 0; outline: 0; resize: none; background: transparent; color: #fff; font: inherit; font-size: calc(15px * var(--fs)); line-height: 1.55; }
#ai-prompt::placeholder { color: rgba(234, 244, 255, .42); }
#ai-prompt:disabled { opacity: .6; }
.ai-tools { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.ai-tool { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 99px; font-size: calc(12.5px * var(--fs)); color: #d6ecff; background: rgba(255, 255, 255, .08); transition: background .15s; }
.ai-tool:hover { background: rgba(255, 255, 255, .15); }
.ai-tool:disabled { opacity: .5; }
.ai-tool .ico { width: 13px; height: 13px; }
.ai-tool .spinner { width: 11px; height: 11px; }
.ai-count { margin-left: auto; font: calc(11px * var(--fs))/1 ui-monospace, "SF Mono", Menlo, monospace; font-style: normal; color: var(--ai-dim); }
.ai-pills { display: flex; gap: 6px; overflow-x: auto; margin-top: 10px; padding: 0 18px 2px 0; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }
.ai-pills::-webkit-scrollbar { display: none; }
.ai-pill { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 99px; color: var(--ai-fg); font-size: calc(13px * var(--fs)); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); transition: background .15s, border-color .15s; }
.ai-pill > .ico { width: 14px; height: 14px; }
.ai-pill .ai-caret { width: 12px; height: 12px; opacity: .6; transition: transform .2s; }
.ai-pill.open { background: rgba(37, 179, 164, .2); border-color: rgba(37, 179, 164, .6); }
.ai-pill.open .ai-caret { transform: rotate(180deg); }
.ai-ri { display: inline-block; flex: none; border: 1.5px solid currentColor; border-radius: 2px; }
.ai-sw { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.ai-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding: 8px; border-radius: 12px; background: rgba(5, 8, 18, .5); animation: aiOpen .2s ease-out; }
@keyframes aiOpen { from { opacity: 0; transform: translateY(-4px); } }
.ai-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 3px 12px; border-radius: 10px; color: #dbeafe; font-size: calc(13.5px * var(--fs)); background: rgba(255, 255, 255, .06); border: 1px solid transparent; transition: background .15s, border-color .15s; }
.ai-chip:hover { background: rgba(255, 255, 255, .11); }
.ai-chip span { display: grid; line-height: 1.15; text-align: left; }
.ai-chip em { font-style: normal; font-size: calc(10.5px * var(--fs)); color: var(--ai-dim); margin-left: 4px; }
.ai-chip span em { margin-left: 0; }
.ai-chip.on { color: #fff; font-weight: 700; border-color: #25B3A4; background: rgba(37, 179, 164, .2); }
.ai-go-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ai-need { flex: 1; min-width: 0; font-size: calc(12.5px * var(--fs)); line-height: 1.4; color: var(--ai-dim); }
.ai-go { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 22px; border-radius: 99px; font-size: calc(16px * var(--fs)); font-weight: 800; color: #fff; background: var(--ai-grad); box-shadow: 0 10px 24px -10px rgba(61, 123, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .15s var(--ease-spring), filter .15s, opacity .15s; }
.ai-go:hover { filter: brightness(1.08); }
.ai-go:active { transform: scale(.97); }
.ai-go:disabled { opacity: .42; box-shadow: none; filter: grayscale(.3); }
.ai-go .ico { width: 18px; height: 18px; }
.ai-go .spinner { width: 15px; height: 15px; }

/* 最近生成（头图下面）和我的作品 */
.ai-recent-sec { margin-top: -6px; }
.ai-recent-sec h2 .link-btn { margin-left: auto; }
.ai-strip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
.ai-strip::-webkit-scrollbar { display: none; }
.ai-strip .ai-work { flex: none; width: 148px; scroll-snap-align: start; }
.ai-work { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; text-align: left; color: #eaf4ff; background: #0c1224; border: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 12px 24px -18px rgba(12, 18, 36, .9); transition: transform .15s var(--ease-spring); animation: upIn .4s var(--ease-spring) both; }
button.ai-work:hover { transform: translateY(-2px); }
.ai-work-th { position: relative; display: grid; place-items: center; aspect-ratio: var(--ar, 1 / 1); max-height: 250px; overflow: hidden; color: #9fb2c8; background: #131c33; }
.ai-work-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ai-work-th > .ico { width: 28px; height: 28px; }
.ai-work-k { position: absolute; right: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; border-radius: 99px; font: 600 calc(11px * var(--fs))/1.7 ui-monospace, "SF Mono", Menlo, monospace; font-style: normal; color: #fff; background: rgba(0, 0, 0, .5); }
.ai-work-k .ico { width: 10px; height: 10px; }
.ai-mark { position: absolute; left: 7px; top: 7px; z-index: 1; padding: 0 6px; border-radius: 5px; font-style: normal; font-size: calc(10.5px * var(--fs)); line-height: 1.7; letter-spacing: .5px; color: #fff; background: rgba(0, 0, 0, .45); }
.ai-work-meta { display: grid; gap: 2px; min-width: 0; padding: 8px 10px 10px; }
.ai-work-meta b { font-size: calc(13.5px * var(--fs)); font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-work-meta > span { font-size: calc(12px * var(--fs)); color: #9fb2c8; }
.ai-work-meta .err { color: #fcd38a; line-height: 1.4; }
.ai-work-acts { display: flex; gap: 14px; margin-top: 2px; }
.ai-work-acts .link-btn { font-size: calc(12.5px * var(--fs)); color: #7ff3e3; }
.ai-job .ai-work-th img { opacity: .45; filter: blur(1px); }
.ai-job.run .ai-shimmer { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .16) 50%, transparent 70%) 150% 0 / 220% 100% no-repeat; animation: aiShim 1.6s linear infinite; }
@keyframes aiShim { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.ai-job-st { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; padding: 8px; text-align: center; font-size: calc(12px * var(--fs)); color: #eaf4ff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); font-variant-numeric: tabular-nums; }
.ai-job-st .ico { width: 22px; height: 22px; }
.ai-job.bad .ai-job-st { color: #fde2a8; }
.ai-continue { margin: -8px 0 16px; }
.ai-cont { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 14px; text-align: left; color: #fff; background: linear-gradient(120deg, #1f9d90, #3d7bff); box-shadow: 0 10px 22px -14px rgba(61, 123, 255, .9); transition: transform .15s var(--ease-spring); }
.ai-cont:active { transform: scale(.98); }
.ai-cont > span { flex: 1; min-width: 0; display: grid; }
.ai-cont b { font-size: calc(15px * var(--fs)); }
.ai-cont em { font-style: normal; font-size: calc(12.5px * var(--fs)); opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-cont > .ico { width: 20px; height: 20px; flex: none; }
.bw-grid.ai-works { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-items: start; }
.ai-works + .bw-grid, .ai-works + .bd-empty { margin-top: 12px; }

/* 创作卡片 */
.ai-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container (min-width: 700px) { .ai-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ai-story .ai-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ai-card { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 16px; text-align: left; color: #eaf4ff; background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--a) 28%, transparent), transparent 62%), #0c1224; border: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 14px 28px -20px rgba(12, 18, 36, .95); transition: transform .15s var(--ease-spring), box-shadow .15s; animation: upIn .42s var(--ease-spring) both; animation-delay: calc(var(--i) * 35ms); }
.ai-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--a) 70%, transparent), 0 16px 30px -20px var(--a); }
.ai-card:active { transform: scale(.98); }
.ai-card-art { position: relative; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 50%, #0c1224)); box-shadow: 0 10px 20px -10px var(--a); }
.ai-card-art > .ico { width: 22px; height: 22px; }
.ai-glow { position: absolute; inset: -5px; z-index: -1; border-radius: 18px; background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--a) 70%, #fff), transparent 45%); filter: blur(5px); opacity: 0; transition: opacity .2s; }
.ai-card:hover .ai-glow { opacity: .85; animation: aiSpin 3s linear infinite; }
@keyframes aiSpin { to { transform: rotate(1turn); } }
.ai-play { position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--a); background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
.ai-play .ico { width: 9px; height: 9px; margin-left: 1px; }
.ai-card-txt { display: grid; gap: 3px; min-width: 0; }
.ai-card-tag { justify-self: start; padding: 0 6px; border-radius: 5px; font: 600 calc(10.5px * var(--fs))/1.7 ui-monospace, "SF Mono", Menlo, monospace; color: color-mix(in srgb, var(--a) 55%, #fff); background: color-mix(in srgb, var(--a) 18%, transparent); }
.ai-card-txt b { font-size: calc(15.5px * var(--fs)); font-weight: 800; color: #fff; }
.ai-card-txt > span:last-child { font-size: calc(12.5px * var(--fs)); line-height: 1.45; color: #9fb2c8; }

/* 风格 */
.ai-style-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
.ai-style-row::-webkit-scrollbar { display: none; }
.ai-style { flex: none; width: 76px; display: grid; justify-items: center; gap: 6px; scroll-snap-align: start; animation: upIn .4s var(--ease-spring) both; animation-delay: calc(var(--i) * 25ms); }
.ai-style-art { position: relative; width: 76px; height: 76px; overflow: hidden; border-radius: 18px; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 10px 20px -14px var(--g2); transition: transform .15s var(--ease-spring), box-shadow .15s; }
.ai-style-art i { position: absolute; inset: 0; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .55), transparent 40%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 6px, transparent 6px 12px); }
.ai-style:active .ai-style-art { transform: scale(.95); }
.ai-style b { font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--fg-2); }
.ai-style.on .ai-style-art { transform: scale(1.03); box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4.5px #25B3A4; }
.ai-style.on b { color: var(--fg); font-weight: 800; }

/* 灵感广场：瀑布流 */
.bd-page.th-ai .gl-tabs .chip.on { background: linear-gradient(120deg, #25B3A4, #3d7bff); color: #fff; border-color: transparent; box-shadow: 0 6px 14px -8px #3d7bff; }
.ai-feed { columns: 2; column-gap: 10px; }
@container (min-width: 700px) { .ai-feed { columns: 4; } }
.ai-shot { display: inline-flex; flex-direction: column; width: 100%; margin: 0 0 10px; overflow: hidden; break-inside: avoid; border-radius: 14px; text-align: left; color: #eaf4ff; background: #0c1224; border: 1px solid rgba(255, 255, 255, .07); transition: transform .15s var(--ease-spring); animation: upIn .4s var(--ease-spring) both; animation-delay: calc(var(--i) * 25ms); }
.ai-shot:hover { transform: translateY(-2px); }
.ai-shot:active { transform: scale(.98); }
.ai-shot-art { position: relative; display: block; aspect-ratio: var(--ar, 3 / 4); max-height: 320px; overflow: hidden; background: radial-gradient(120% 80% at 20% 10%, rgba(255, 255, 255, .3), transparent 55%), linear-gradient(160deg, var(--g1), var(--g2)); }
.ai-shot-art::after { content: ""; position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); }
.ai-shot-ic { position: absolute; left: 50%; top: 38%; translate: -50% -50%; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ai-shot-ic .ico { width: 22px; height: 22px; }
.ai-shot-k { position: absolute; right: 8px; top: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; border-radius: 99px; font: 600 calc(11px * var(--fs))/1.7 ui-monospace, "SF Mono", Menlo, monospace; font-style: normal; color: #fff; background: rgba(0, 0, 0, .4); }
.ai-shot-k .ico { width: 10px; height: 10px; }
.ai-shot-p { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: calc(12px * var(--fs)); line-height: 1.45; color: rgba(255, 255, 255, .92); }
.ai-shot-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px 10px; }
.ai-shot-meta b { min-width: 0; font-size: calc(13.5px * var(--fs)); font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-shot-meta i { flex: none; font-style: normal; font-size: calc(12.5px * var(--fs)); font-weight: 700; color: #7ff3e3; }

/* 看一个作品 */
.ai-view-media { position: relative; display: grid; place-items: center; overflow: hidden; margin-bottom: 10px; border-radius: 14px; background: #0c1224; }
.ai-view-media img, .ai-view-media video { display: block; max-width: 100%; max-height: 50vh; }
.ai-view-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ai-view-facts span { padding: 0 8px; border-radius: 99px; font-size: calc(12px * var(--fs)); line-height: 1.9; color: var(--fg-2); background: var(--surface-2); }
.ai-view-save { display: inline-flex; flex: 1; justify-content: center; align-items: center; gap: 8px; min-height: 46px; font-size: calc(16px * var(--fs)); }
.ai-view-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }

/* 一句话成片的分镜 */
.sb .vs-panel { width: min(720px, 100%); }
.sb-shots { display: grid; gap: 10px; margin-bottom: 10px; }
.sb-shot { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid transparent; transition: border-color .2s; }
.sb-shot.running { border-color: color-mix(in srgb, #25B3A4 55%, transparent); }
.sb-shot.done { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.sb-shot.failed { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.sb-th { position: relative; align-self: start; width: 72px; aspect-ratio: 9 / 16; overflow: hidden; display: grid; place-items: center; border-radius: 10px; color: #fff; font: 800 calc(20px * var(--fs))/1 ui-monospace, "SF Mono", Menlo, monospace; background: linear-gradient(160deg, #25B3A4, #0c1224); }
.sb-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-th em { position: absolute; left: 4px; bottom: 4px; display: inline-flex; align-items: center; gap: 2px; padding: 0 5px; border-radius: 99px; font: 600 calc(10px * var(--fs))/1.7 ui-monospace, "SF Mono", Menlo, monospace; font-style: normal; color: #fff; background: rgba(0, 0, 0, .5); }
.sb-th em .ico { width: 9px; height: 9px; }
.sb-run { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4px; font: 600 calc(11px * var(--fs))/1 ui-monospace, "SF Mono", Menlo, monospace; background: rgba(12, 18, 36, .6); }
.sb-main { display: grid; gap: 6px; min-width: 0; }
.sb-main textarea.input { min-height: 66px; font-size: calc(14px * var(--fs)); line-height: 1.5; }
.sb-main input.input { height: 36px; font-size: calc(14px * var(--fs)); }
.sb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sb-row .vs-chips { gap: 4px; }
.sb-row .vs-chips .chip-btn { height: 28px; padding: 0 10px; font-size: calc(12.5px * var(--fs)); }
.sb-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; }
.sb-acts .link-btn { font-size: calc(13px * var(--fs)); }
.sb .link-btn { color: #1f9d90; }
.sb .link-btn.danger-text { color: var(--err); }
.sb-err { font-style: normal; font-size: calc(12px * var(--fs)); color: var(--warn); }
/* 聊天里金宝写的画面描述：放进创作框 */
.ai-chat { display: grid; gap: 6px; max-width: 520px; margin-top: 6px; padding: 8px; border-radius: 14px; background: color-mix(in srgb, #25B3A4 8%, var(--surface)); border: 1px solid color-mix(in srgb, #25B3A4 30%, var(--line)); }
.ai-chat-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ai-chat-k { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; border-radius: 99px; font-size: calc(12px * var(--fs)); font-weight: 700; line-height: 1.8; color: #fff; background: linear-gradient(135deg, #25B3A4, #3d7bff); }
.ai-chat-k .ico { width: 12px; height: 12px; }
.ai-chat-t { flex: 1; min-width: 0; font-size: calc(13px * var(--fs)); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-chat .btn { flex: none; }
@media (max-width: 900px) {
  .ai-hero { padding: 14px 12px 12px; border-radius: 20px; }
  .bd-hero2 .ai-top .av.xl { width: 52px; height: 52px; border-radius: 15px; }
  .ai-top { gap: 12px; margin-bottom: 12px; }
  .ai-modes button { font-size: calc(13.5px * var(--fs)); gap: 4px; }
  .ai-go { height: 42px; padding: 0 18px; }
  .ai-strip .ai-work { width: 132px; }
  .ai-card { padding: 12px; }
  .ai-card-art { width: 42px; height: 42px; border-radius: 13px; }
}

/* ---------- 耳朵的「做视频」面板（studio.js） ---------- */
.st .vs-panel { width: min(720px, 100%); }
.st-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: calc(12px * var(--fs)); color: var(--ok); background: var(--ok-soft); }
.st-badge .ico { width: 12px; height: 12px; }
.st-sec { margin: 0 0 14px; padding: 14px 14px 4px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.st-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: calc(16px * var(--fs)); }
.st-sec h3 i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: calc(12.5px * var(--fs)); font-weight: 800; color: #fff; background: var(--c); }
.req { font-style: normal; color: var(--err); margin-left: 2px; }
.st-slot { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l th" "b th"; align-items: center; gap: 8px 12px; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; border: 1.5px dashed color-mix(in srgb, var(--c) 40%, var(--line-2)); background: color-mix(in srgb, var(--c) 4%, var(--surface)); }
.st-slot.has { border-style: solid; border-color: var(--line); }
.st-slot-l { grid-area: l; display: grid; gap: 2px; min-width: 0; }
.st-slot-l b { font-size: calc(14.5px * var(--fs)); }
.st-slot-l em { font-style: normal; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.st-slot-btns { grid-area: b; display: flex; flex-wrap: wrap; gap: 6px; }
.st-slot > .st-th { grid-area: th; }
.st-th { position: relative; display: block; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--surface-2); flex: none; }
.st-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-th em { position: absolute; left: 4px; bottom: 4px; padding: 0 5px; border-radius: 99px; font-style: normal; font-size: calc(11px * var(--fs)); line-height: 1.6; color: #fff; background: rgba(0, 0, 0, .55); font-variant-numeric: tabular-nums; }
.st-noth { width: 100%; height: 100%; display: grid; place-items: center; color: var(--fg-3); }
.st-x, .st-up { position: absolute; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .55); }
.st-x { right: 3px; top: 3px; }
.st-up { right: 3px; bottom: 3px; }
.st-x .ico, .st-up .ico { width: 13px; height: 13px; }
.st-no { position: absolute; left: 4px; top: 4px; z-index: 1; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 99px; font-style: normal; font-size: calc(11px * var(--fs)); font-weight: 800; color: #fff; background: var(--c); }
.st-mats { margin-bottom: 10px; }
.st-mats-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 8px; font-size: calc(14.5px * var(--fs)); }
.st-mats-h span { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.st-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-bottom: 8px; }
.st-mgrid .st-th { width: auto; height: auto; aspect-ratio: 1; }
.st-mats-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.st label.btn { cursor: pointer; }
.st-refinfo { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: calc(13px * var(--fs)); color: var(--fg-2); }
.st-refinfo .ico { width: 15px; height: 15px; color: var(--c); flex: none; }
.st-shop { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; margin-bottom: 14px; border-radius: 12px; text-align: left; font-size: calc(13.5px * var(--fs)); color: var(--fg-2); background: var(--surface-2); }
.st-shop > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-shop .ico { width: 16px; height: 16px; flex: none; color: var(--c); }
.st-shop.empty { color: var(--warn); background: var(--warn-soft); }
.st-shop.empty .ico { color: var(--warn); }
.st-cloud { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.st-cloud .ico { width: 14px; height: 14px; flex: none; }
.st-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.st-aibtn { height: 42px; padding: 0 18px; font-size: calc(15.5px * var(--fs)); }
.st-err { margin: 4px 0 8px; font-size: calc(13.5px * var(--fs)); color: var(--err); }
.st-scenes { display: grid; gap: 8px; margin-bottom: 10px; }
.st-scene { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.st-sth { position: relative; display: block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.st-sth img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-sth.card { display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.st-sc-main { display: grid; gap: 3px; min-width: 0; }
.st-sc-main .input { min-height: 56px; resize: vertical; padding: 7px 10px; line-height: 1.45; }
.st-shot { font-style: normal; font-size: calc(12px * var(--fs)); color: var(--fg-3); }
.st-sc-side { display: grid; gap: 4px; justify-items: center; }
.st-sec-btn { height: 26px; padding: 0 8px; border-radius: 8px; font-size: calc(12.5px * var(--fs)); font-variant-numeric: tabular-nums; color: var(--fg-2); background: var(--surface-2); }
.st-sc-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.st-recs { display: grid; gap: 6px; margin-bottom: 8px; }
.st-rec { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--surface-2); font-size: calc(13.5px * var(--fs)); }
.st-rec em { flex: none; width: 18px; font-style: normal; font-weight: 700; color: var(--fg-3); text-align: center; }
.st-rec span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-rec.ok em { color: var(--ok); }
.st-rec.live { background: color-mix(in srgb, var(--err) 12%, var(--surface)); box-shadow: 0 0 0 1.5px var(--err); }
.st-rec.live span { white-space: normal; font-weight: 600; }
.st-rec-d { flex: none; font-style: normal; font-size: calc(12px * var(--fs)); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.st-rec .btn { flex: none; }
.st-vfile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.st-vfile > span { display: inline-flex; align-items: center; gap: 4px; font-size: calc(13.5px * var(--fs)); color: var(--fg-2); }
.st-vfile > span .ico { width: 15px; height: 15px; color: var(--c); }
.st-mrow { display: flex; gap: 6px; margin: -6px 0 14px; }
.st-asr { margin: -6px 0 14px; }
.st-work .vs-out { max-height: 50vh; }
@media (max-width: 900px) {
  .st-sec { padding: 12px 12px 2px; }
  .st-scene { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .st-sth { width: 48px; height: 48px; }
}

/* ---------- 素材库（medialib.js）：管理和挑选 ---------- */
.ml { --c: #8B6CF0; }
.ml-tip { margin: 0 0 12px; font-size: calc(13.5px * var(--fs)); color: var(--fg-2); line-height: 1.55; }
.ml-add { display: grid; justify-items: center; gap: 4px; padding: 18px 12px; margin-bottom: 12px; border-radius: var(--r-lg); border: 1.5px dashed color-mix(in srgb, var(--c) 40%, var(--line-2)); background: color-mix(in srgb, var(--c) 5%, var(--surface)); cursor: pointer; text-align: center; }
.ml-add .ico { width: 24px; height: 24px; color: var(--c); }
.ml-add b { font-size: calc(15px * var(--fs)); }
.ml-add span { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.ml-add.sm { grid-auto-flow: column; justify-content: center; align-items: center; gap: 8px; padding: 10px; }
.ml-add.sm span { display: none; }
.ml-add.busy { opacity: .6; pointer-events: none; }
.ml-filter { margin-bottom: 10px; }
.ml-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.ml-tile { display: grid; align-content: start; gap: 4px; text-align: left; min-width: 0; }
.ml-th { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s; }
.ml-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-noth { width: 100%; height: 100%; display: grid; place-items: center; color: var(--fg-3); }
.ml-noth .ico { width: 26px; height: 26px; }
.ml-dur { position: absolute; left: 5px; bottom: 5px; display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: 99px; font-style: normal; font-size: calc(11.5px * var(--fs)); line-height: 1.7; color: #fff; background: rgba(0, 0, 0, .55); font-variant-numeric: tabular-nums; }
.ml-dur .ico { width: 10px; height: 10px; }
.ml-check { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: transparent; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 2px #fff; transition: background .15s; }
.ml-check .ico { width: 14px; height: 14px; }
.ml-tile.on .ml-check { color: #fff; background: var(--c); box-shadow: none; }
.ml-tile.on .ml-th { box-shadow: 0 0 0 2.5px var(--c); }
.ml-name { font-size: calc(12.5px * var(--fs)); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-tag { justify-self: start; padding: 0 6px; border-radius: 5px; font-size: calc(11px * var(--fs)); color: var(--fg-3); background: var(--surface-2); }
.ml-empty { display: grid; justify-items: center; gap: 6px; padding: 26px 12px; color: var(--fg-3); font-size: calc(13.5px * var(--fs)); text-align: center; }
.ml-empty .ico { width: 28px; height: 28px; }
.ml-view { margin-top: 14px; padding: 12px; border-radius: var(--r-lg); background: var(--surface-2); }
.ml-pv { display: grid; place-items: center; margin-bottom: 10px; }
.ml-pv img, .ml-pv video { max-width: 100%; max-height: 46vh; border-radius: 10px; background: #000; }
.ml-pv audio { width: 100%; }
.ml-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-acts .btn { text-decoration: none; }
.ml-note { display: flex; align-items: flex-start; gap: 6px; margin: 14px 0 0; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); line-height: 1.5; }
.ml-note .ico { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.ml .notice { margin-top: 14px; }
.ml-tabs { display: flex; gap: 4px; padding: 3px; margin-bottom: 12px; border-radius: 12px; background: var(--surface-2); }
.ml-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 34px; border-radius: 9px; font-size: calc(14px * var(--fs)); color: var(--fg-2); }
.ml-tabs button.on { background: var(--surface); color: var(--fg); font-weight: 600; box-shadow: var(--shadow-1); }
.ml-tabs .ico { width: 15px; height: 15px; }
.ml-count { flex: 1; align-self: center; font-size: calc(13.5px * var(--fs)); color: var(--fg-3); }
.st-work .vs-out, .ml-pv video { background: #000; }

/* 手机上输入框的字不能小于 16px，不然 iPhone 一点输入框整页就放大 */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: max(16px, 1em) !important; }
}

/* ---------------- 收件箱（作品页里顾客提交的表单） ---------------- */
.ib-list { display: grid; gap: 8px; }
.ib-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-align: left; transition: transform .15s, border-color .15s, box-shadow .15s; }
.ib-row:active { transform: scale(.985); }
.ib-row.new { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
.ib-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
.ib-ico .ico { width: 22px; height: 22px; }
.ib-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ib-text b { font-weight: 600; font-size: calc(15px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-text em { font-style: normal; color: var(--fg-3); font-size: calc(13px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-side { flex: none; display: grid; justify-items: end; gap: 4px; }
.ib-side i { font-style: normal; color: var(--fg-3); font-size: calc(12px * var(--fs)); }
.ib-count { color: var(--fg-3); font-size: calc(12px * var(--fs)); font-variant-numeric: tabular-nums; }
.ib-badge, .nav-badge.hot { min-width: 20px; padding: 1px 6px; border-radius: 10px; background: #ef4444; color: #fff; font-size: calc(12px * var(--fs)); text-align: center; font-variant-numeric: tabular-nums; }
.ib-tip, .ib-err { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface-2); color: var(--fg-2); font-size: calc(13.5px * var(--fs)); line-height: 1.55; }
.ib-tip .ico, .ib-err .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
.ib-err { margin: 0 0 14px; background: color-mix(in srgb, #ef4444 9%, var(--surface)); }
.ib-err .ico { color: #ef4444; }
.ib-entries { display: grid; gap: 10px; }
.ib-card { padding: 12px 14px 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); animation: ib-in .35s var(--ease-out, cubic-bezier(.2, .8, .2, 1)) both; }
.ib-card.new { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ib-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ib-card-h time { flex: 1; color: var(--fg-3); font-size: calc(12.5px * var(--fs)); font-variant-numeric: tabular-nums; }
.ib-tag { padding: 2px 8px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); font-size: calc(12.5px * var(--fs)); font-weight: 600; }
.ib-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: calc(14.5px * var(--fs)); }
.ib-card dt { color: var(--fg-3); }
.ib-card dd { margin: 0; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.ib-card dd a { color: var(--accent); text-decoration: none; font-weight: 600; }
@keyframes ib-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .ib-card { animation: none; } }

/* ---------------- 店铺资料 → 品牌套件 ---------------- */
.brand-card { display: grid; gap: 14px; margin-bottom: 14px; }
.brand-head { display: grid; gap: 2px; }
.brand-head b { font-size: calc(15.5px * var(--fs)); }
.brand-row { display: flex; gap: 14px; align-items: flex-start; }
.brand-logo { flex: none; width: 92px; height: 92px; border-radius: 20px; border: 1.5px dashed var(--line-2); display: grid; place-items: center; align-content: center; gap: 4px; color: var(--fg-3); font-size: calc(12.5px * var(--fs)); background: var(--surface-2); overflow: hidden; transition: transform .15s, border-color .15s; }
.brand-logo:active { transform: scale(.96); }
.brand-logo .ico { width: 24px; height: 24px; }
.brand-logo.on { border-style: solid; border-color: var(--line); background: repeating-conic-gradient(#0000 0 25%, #8881 0 50%) 0 0 / 14px 14px, var(--surface); }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.brand-colors { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.brand-sw { position: relative; display: grid; justify-items: center; gap: 4px; cursor: pointer; font-size: calc(12px * var(--fs)); color: var(--fg-3); }
.brand-sw input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.brand-sw i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed var(--line-2); color: var(--fg-3); background: var(--c); transition: transform .2s var(--ease-out, ease); }
.brand-sw i .ico { width: 16px; height: 16px; }
.brand-sw.on i { border: 3px solid var(--surface); box-shadow: 0 0 0 1.5px var(--line-2), 0 4px 12px color-mix(in srgb, var(--c) 40%, transparent); }
.brand-sw.on i .ico { display: none; }
.brand-sw:active i { transform: scale(.92); }
.brand-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.brand-quick { flex-basis: 100%; display: flex; gap: 8px; }
.brand-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2); }
.brand-dot:active { transform: scale(.9); }
.brand-card-pv { --b1: #e86a5a; --b2: #e86a5a; position: relative; overflow: hidden; border-radius: 16px; padding: 18px 18px 16px; color: #fff; background: linear-gradient(135deg, var(--b1), color-mix(in srgb, var(--b2) 75%, #000)); box-shadow: 0 10px 28px color-mix(in srgb, var(--b1) 30%, transparent); aspect-ratio: 1.75; max-width: 360px; display: flex; flex-direction: column; justify-content: space-between; }
.brand-card-pv::after { content: ''; position: absolute; right: -30%; top: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.bc-top { display: flex; gap: 12px; align-items: center; position: relative; z-index: 1; }
.bc-top img, .bc-mark { width: 46px; height: 46px; border-radius: 12px; background: #fff; object-fit: contain; padding: 4px; flex: none; }
.bc-mark { display: grid; place-items: center; color: var(--b1); font-weight: 800; font-size: calc(22px * var(--fs)); }
.bc-top b { display: block; font-size: calc(18px * var(--fs)); letter-spacing: .5px; }
.bc-top em { font-style: normal; opacity: .85; font-size: calc(13px * var(--fs)); }
.bc-info { display: grid; gap: 2px; font-size: calc(12.5px * var(--fs)); opacity: .92; position: relative; z-index: 1; }
.share-qr .sq-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* ---------------- 经营日历 + 一键项目 ---------------- */
.pj-ind { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin: -6px 0 14px; scrollbar-width: none; }
.pj-ind::-webkit-scrollbar { display: none; }
.pj-ind .chip-btn { flex: none; }
.pj-cal { display: grid; gap: 8px; }
.pj-node { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.pj-node.due { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface) 60%); }
.pj-node.done { opacity: .72; }
.pj-date { flex: none; width: 52px; display: grid; justify-items: center; line-height: 1.05; }
.pj-date b { font-size: calc(24px * var(--fs)); font-weight: 750; font-variant-numeric: tabular-nums; color: var(--fg); }
.pj-node.due .pj-date b { color: var(--accent); }
.pj-date em { font-style: normal; font-size: calc(11.5px * var(--fs)); color: var(--fg-3); margin-top: 3px; }
.pj-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pj-main b { font-size: calc(15.5px * var(--fs)); font-weight: 650; display: flex; align-items: center; gap: 6px; }
.pj-main > span { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.pj-main p { margin: 2px 0 0; font-size: calc(13px * var(--fs)); color: var(--fg-2); line-height: 1.45; }
.pj-due { font-style: normal; color: var(--accent); font-weight: 600; }
.pj-mine { font-style: normal; font-size: calc(11px * var(--fs)); font-weight: 600; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); color: var(--fg-2); }
.pj-node .btn { flex: none; }
.pj-mydates { display: grid; gap: 6px; margin: 16px 0 6px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface-2); }
.pj-mydates > b { font-size: calc(14px * var(--fs)); }
.pj-md-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pj-md { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: calc(13px * var(--fs)); }
.pj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .pj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pj-tpl { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: transform .15s, box-shadow .15s, border-color .15s; }
.pj-tpl:hover { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.pj-tpl:active { transform: scale(.97); }
.pj-tpl > .ico { width: 34px; height: 34px; padding: 7px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); margin-bottom: 4px; }
.pj-tpl b { font-size: calc(15px * var(--fs)); font-weight: 650; }
.pj-tpl > span:not(.pj-avs) { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); line-height: 1.4; }
.pj-avs { display: flex; margin-top: 6px; }
.pj-avs img { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface); margin-left: -6px; background: var(--surface-2); }
.pj-avs img:first-child { margin-left: 0; }
.pj-who { display: flex; align-items: center; margin-bottom: 12px; }
.pj-who .av { width: 30px; height: 30px; margin-left: -8px; border: 2px solid var(--surface); }
.pj-who .av:first-child { margin-left: 0; }
.pj-who em { font-style: normal; margin-left: 10px; font-size: calc(13px * var(--fs)); color: var(--fg-2); }
.pj-steps { margin: 14px 0 0; padding: 12px 14px 12px 32px; border-radius: var(--r-lg); background: var(--surface-2); display: grid; gap: 6px; font-size: calc(13px * var(--fs)); color: var(--fg-2); line-height: 1.45; }
.pj-steps b { color: var(--fg); margin-right: 6px; }
.dr-propose { display: flex; align-items: center; gap: 2px; margin: 4px 8px 6px; padding: 2px 2px 2px 0; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); animation: ib-in .4s cubic-bezier(.2, .8, .2, 1) both; }
.dr-propose > button:first-child { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; text-align: left; font-size: calc(13px * var(--fs)); color: var(--fg); }
.dr-propose > button:first-child .ico { flex: none; width: 16px; height: 16px; color: var(--accent); }
.nav-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; margin-left: auto; }
.load-more { display: flex; justify-content: center; padding: 6px 0 10px; }
.load-more .link-btn { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13px * var(--fs)); color: var(--fg-3); padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.load-more .ico { width: 14px; height: 14px; }

/* ---------------- 性能：屏幕外的卡片先不排版、不绘制（滚到附近再画），长列表打开更快 ---------------- */
.chat-list .chat-row { content-visibility: auto; contain-intrinsic-size: auto 64px; }
.bw-card, .lib-card { content-visibility: auto; contain-intrinsic-size: auto 230px; }
.feed-card { content-visibility: auto; contain-intrinsic-size: auto 320px; }
.ib-card, .pj-node { content-visibility: auto; contain-intrinsic-size: auto 120px; }
.pj-ind .chip-btn { height: 32px; padding: 0 13px; border-radius: 999px; font-size: calc(14px * var(--fs)); background: var(--surface-2); color: var(--fg-2); border: 1px solid transparent; transition: background .15s, color .15s, transform .12s; }
.pj-ind .chip-btn:active { transform: scale(.95); }
.pj-ind .chip-btn.on { background: var(--fg); color: var(--bg); font-weight: 600; }

/* ---------------- 体验打磨 ---------------- */
/* 手机上工作台面板：标签可以横滑，关闭按钮固定在右边不被挤出去 */
.panel-tabbar { height: var(--top-h); flex: none; display: flex; align-items: center; border-bottom: 1px solid var(--line); padding-right: 4px; }
.panel-tabbar .panel-tabs { flex: 1; min-width: 0; height: 100%; border-bottom: 0; }
.panel-tabbar .panel-close { flex: none; margin-left: 2px; }
/* 设置的标签在手机上排成两行，不藏起来 */
@media (max-width: 600px) { .set-tabs { flex-wrap: wrap; overflow: visible; touch-action: auto; } .set-tabs button { padding: 8px 10px; } }
/* 甲甲头图里的表格是插画：不跟着字号变，不然数字会被截断 */
.hs-body, .hs-formula { --fs: 1; }
/* 必填项 */
.field .req { color: #ef4444; font-style: normal; margin-left: 3px; }
.set-card.brand-card { padding: 16px; }
/* 发布弹窗：手机上链接占一整行，按钮放下面 */
@media (max-width: 600px) { .share-url { flex-wrap: wrap; } .share-url .input { flex: 1 1 100%; min-width: 0; } }
/* 手指点的设备：小按钮、开关、标签的点击区域至少 36px */
@media (pointer: coarse) {
  .btn.sm { min-height: 36px; }
  .chip, .chip-btn { min-height: 34px; }
  .switch::before { content: ''; position: absolute; inset: -9px -6px; }
  .icon-btn.sm, .link-btn { position: relative; }
  .icon-btn.sm::after, .link-btn::after { content: ''; position: absolute; inset: -6px; }
}

/* ============================================================
   爆款视频拆解（耳朵板块）：深色胶片的标题栏和播放区，报告跟着浅色 / 深色主题
   ============================================================ */
html.vb-open, html.vb-open body { overflow: hidden; }
.vb { --fm: #17121f; --fm-2: #0f0b16; --fm-fg: #efe9ff; --fm-dim: #b3a8cc; --fm-tc: #ff8aa2; --fm-grad: linear-gradient(120deg, #8B6CF0, #F95E94 60%, #F3A53C);
  position: fixed; inset: 0; z-index: 84; display: grid; place-items: center; padding: 16px; background: rgba(12, 10, 16, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
.vb.in { opacity: 1; }
.vb-panel { position: relative; width: min(1280px, 100%); height: min(920px, 100%); display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--bg); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55); overflow: hidden; transform: translateY(14px) scale(.985); transition: transform .32s var(--ease-spring); }
.vb.in .vb-panel { transform: none; }
.vb-head { flex: none; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 12px; background: var(--surface); color: var(--fg); border-bottom: 1px solid var(--line); }
.vb-head .icon-btn { color: var(--fg-2); }
.vb-head .icon-btn:hover { background: var(--surface-2); color: var(--fg); }
.vb-logo { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--fg); color: var(--bg); }
.vb-logo .ico { width: 17px; height: 17px; }
.vb-hsub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--line); font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.vb-crumb { flex: none; padding: 4px 6px; border-radius: 6px; font-size: calc(14px * var(--fs)); color: var(--fg-3); }
.vb-crumb:hover { background: var(--surface-2); color: var(--fg); }
.vb-crumb-sep { flex: none; font-style: normal; color: var(--line-2); }
.vb-htag { flex: none; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); font-size: calc(12px * var(--fs)); color: var(--fg-2); }
.vb-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(16px * var(--fs)); font-weight: 700; color: var(--fg); }
.vb-act { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px; border-radius: 9px; font-size: calc(13.5px * var(--fs)); color: var(--fg-2); background: transparent; border: 1px solid var(--line); transition: background .15s, transform .15s; }
.vb-act:hover { background: var(--surface-2); color: var(--fg); }
.vb-act:active { transform: scale(.96); }
.vb-act.danger:hover { background: var(--err-soft); color: var(--err); }
.vb-act .ico { width: 16px; height: 16px; }
.vb-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; overflow-wrap: anywhere; }
.vb-tip { position: absolute; z-index: 6; transform: translate(-50%, -100%); padding: 5px 9px; border-radius: 7px; background: #000; color: #fff; font-size: calc(12.5px * var(--fs)); pointer-events: none; white-space: nowrap; }

/* 首页：导入 + 拆解记录 */
.vb-home { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px 22px; align-items: start; padding: 20px 22px 28px; }
.vb-home.one { grid-template-columns: minmax(0, 660px); justify-content: center; }
.vb-intro { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px 28px; align-items: center; padding: 20px 22px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.vb-intro-l { display: grid; gap: 6px; }
.vb-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: f; }
.vb-flow li { position: relative; display: grid; gap: 3px; padding: 12px; border-radius: 10px; background: var(--surface-2); }
.vb-flow li + li::before { content: ""; position: absolute; left: -9px; top: 50%; width: 8px; height: 1px; background: var(--line-2); }
.vb-flow i { width: 22px; height: 22px; display: grid; place-items: center; margin-bottom: 2px; border-radius: 6px; background: var(--fg); color: var(--bg); font-style: normal; font-size: 12px; font-weight: 700; }
.vb-flow b { font-size: calc(14px * var(--fs)); }
.vb-flow span { font-size: calc(12.5px * var(--fs)); line-height: 1.5; color: var(--fg-3); }
.vb-card { padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.vb-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 12px; }
.vb-sec-h b { font-size: calc(15px * var(--fs)); }
.vb-sec-h em { font-style: normal; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.vb-caps-w { margin-top: 4px; }
.vb-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vb-cap { display: flex; gap: 10px; padding: 11px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.vb-cap-i { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--c) 12%, var(--surface-2)); color: var(--c); }
.vb-cap-i .ico { width: 16px; height: 16px; }
.vb-cap > span:last-child { display: grid; gap: 2px; min-width: 0; }
.vb-cap b { font-size: calc(13.5px * var(--fs)); }
.vb-cap em { font-style: normal; font-size: calc(12px * var(--fs)); line-height: 1.45; color: var(--fg-3); }



.vb-intro h2 { margin: 0; font-size: calc(20px * var(--fs)); color: var(--fg); letter-spacing: .2px; }
.vb-intro-sub { margin: 0; font-size: calc(13.5px * var(--fs)); line-height: 1.7; color: var(--fg-2); }



.vb-col { display: grid; gap: 12px; min-width: 0; }
.vb-drop { display: grid; justify-items: center; gap: 6px; padding: 28px 18px; border-radius: 12px; border: 1.5px dashed var(--line-2); background: var(--surface-2); text-align: center; cursor: pointer; transition: border-color .15s, background .15s, transform .15s var(--ease-spring); }
.vb-drop:hover, .vb-drop.over { border-color: var(--c); background: color-mix(in srgb, var(--c) 6%, var(--surface)); }
.vb-drop.over { transform: scale(1.012); }
.vb-drop-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--surface)); }
.vb-drop-ico .ico { width: 22px; height: 22px; }
.vb-drop b { font-size: calc(15px * var(--fs)); }
.vb-drop > span:last-child { font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.vb-import.off .vb-drop { opacity: .5; cursor: not-allowed; }
.vb-link { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 5px 5px 5px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-2); }
.vb-link:focus-within { border-color: var(--c); }
.vb-link .input { flex: 1; min-width: 0; height: 36px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.vb-link-ico { display: grid; color: var(--fg-3); }
.vb-link-ico .ico { width: 18px; height: 18px; }
.vb-hint { display: flex; gap: 6px; margin: 8px 2px 0; font-size: calc(12.5px * var(--fs)); line-height: 1.55; color: var(--fg-3); }
.vb-hint .ico { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.vb-off, .vb-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: calc(13.5px * var(--fs)); line-height: 1.6; }
.vb-off { background: var(--err-soft); }
.vb-off b { display: block; }
.vb-off .ico { color: var(--err); }
.vb-note { background: var(--surface-2); color: var(--fg-2); }
.vb-off .ico, .vb-note .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.vb-err { display: flex; gap: 6px; margin: 0; font-size: calc(13.5px * var(--fs)); color: var(--warn); }
.vb-err .ico { width: 16px; height: 16px; flex: none; }
.vb-login { display: grid; justify-items: center; gap: 8px; padding: 30px 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.vb-login > .ico { width: 34px; height: 34px; color: var(--c); }
.vb-login p { margin: 0 0 6px; font-size: calc(14px * var(--fs)); color: var(--fg-2); }

/* 上传卡片 */
.vb-up { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: center; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); animation: upIn .3s var(--ease-spring) both; }
.vb-up.fail { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.vb-up.ready { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.vb-uth, .vb-ith { position: relative; flex: none; display: grid; place-items: center; overflow: hidden; background: var(--fm); }
.vb-uth { width: 76px; aspect-ratio: 3 / 4; border-radius: 10px; }
.vb-uth img, .vb-ith img { width: 100%; height: 100%; object-fit: cover; }
.vb-uth em, .vb-ith em { position: absolute; right: 4px; bottom: 4px; padding: 0 5px; border-radius: 5px; background: rgba(0, 0, 0, .6); font: 600 10.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace; font-style: normal; color: #fff; }
.vb-noth { display: grid; }
.vb-noth .ico { width: 22px; height: 22px; color: var(--fm-dim); }
.vb-utx { display: grid; gap: 4px; min-width: 0; }
.vb-utx b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-utx > span { font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.vb-ubar { display: block; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.vb-ubar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #8B6CF0, #F95E94); transition: width .3s; }
.vb-ust { font-size: calc(13px * var(--fs)); font-variant-numeric: tabular-nums; color: var(--fg-2); }
.vb-same, .vb-uerr { display: flex; gap: 5px; font-style: normal; font-size: calc(13px * var(--fs)); line-height: 1.5; }
.vb-same { color: var(--ok); }
.vb-uerr { color: var(--warn); }
.vb-same .ico, .vb-uerr .ico { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.vb-up-btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.vb-up-btns:empty { display: none; }
.vb-up-btns .btn.primary, .vb-job-btns .btn.primary { flex: 1; }
.vb-pts { margin-left: 8px; padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .22); font-style: normal; font-size: .85em; font-weight: 600; }

/* 拆解记录 */
.vb-hist-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.vb-hist-h h3 { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: calc(15px * var(--fs)); }
.vb-hist-h h3 i { padding: 0 7px; border-radius: 99px; background: var(--surface-2); font-style: normal; font-size: calc(12px * var(--fs)); font-weight: 600; line-height: 20px; color: var(--fg-2); }
.vb-hist-h em { font-style: normal; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.vb-list { display: grid; gap: 8px; }
.vb-item { display: flex; align-items: center; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.vb-list.anim .vb-item { animation: upIn .35s var(--ease-spring) both; animation-delay: calc(var(--i) * 30ms); }
.vb-item-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; text-align: left; transition: background .15s; }
.vb-item-main:hover { background: var(--surface-2); }
.vb-ith { width: 54px; height: 72px; border-radius: 9px; }
.vb-ith.big { width: 84px; height: 112px; border-radius: 12px; }
.vb-itx { flex: 1; min-width: 0; display: grid; gap: 3px; }
.vb-itx b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(15px * var(--fs)); }
.vb-ist { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.vb-ist.done { color: var(--ok); }
.vb-ist.failed { color: var(--warn); }
.vb-ist.running, .vb-ist.queued { color: var(--c); }
.vb-ist .spinner { width: 12px; height: 12px; }
.vb-iform, .vb-idate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12px * var(--fs)); color: var(--fg-2); }
.vb-idate { color: var(--fg-3); }
.vb-iform i { margin: 0 4px; font-style: normal; color: var(--fg-3); }
.vb-isc { flex: none; display: grid; justify-items: center; min-width: 52px; padding: 5px 6px; border-radius: 9px; background: var(--surface-2); }
.vb-isc.hi { background: var(--ok-soft); color: var(--ok); }
.vb-isc.mid { background: color-mix(in srgb, var(--c) 12%, var(--surface-2)); color: var(--c); }
.vb-isc.lo { background: var(--warn-soft); color: var(--warn); }
.vb-isc b { font-size: calc(18px * var(--fs)); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vb-isc em { font-style: normal; font-size: calc(11px * var(--fs)); color: var(--fg-3); }
.vb-idel { margin-right: 8px; color: var(--fg-3); }
.vb-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 30px; color: var(--fg-3); }
.vb-loading.big { min-height: 60vh; }
.vb-empty { display: grid; justify-items: center; gap: 8px; padding: 28px 16px; border-radius: 14px; border: 1px dashed var(--line-2); text-align: center; color: var(--fg-3); }
.vb-empty .ico { width: 28px; height: 28px; }

/* 处理中 */
.vb-job { display: grid; gap: 16px; max-width: 860px; margin: 0 auto; padding: 22px; }
.vb-job-top { display: flex; align-items: center; gap: 14px; }
.vb-job-top > div { display: grid; gap: 4px; min-width: 0; }
.vb-job-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(17px * var(--fs)); }
.vb-job-top > div > span:not(.vb-ist) { font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.vb-hold { font-style: normal; font-size: calc(12.5px * var(--fs)); color: var(--fg-2); }
.vb-stages { display: grid; gap: 2px; margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.vb-stages.flat { padding: 0; border: 0; border-radius: 0; background: none; }
.vb-pipe { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.vb-pipe-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vb-pipe-h b { font-size: calc(15px * var(--fs)); }
.vb-pipe-h span { font-size: calc(13px * var(--fs)); font-variant-numeric: tabular-nums; color: var(--fg-3); }
.vb-ubar.big { height: 6px; }
.vb-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vb-lane { display: grid; align-content: start; gap: 4px; padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid transparent; transition: border-color .2s, background .2s; }
.vb-lane.run { border-color: color-mix(in srgb, var(--c) 35%, transparent); background: color-mix(in srgb, var(--c) 5%, var(--surface)); }
.vb-lane.done { background: color-mix(in srgb, var(--ok) 6%, var(--surface)); }
.vb-lane-h { display: flex; align-items: center; gap: 6px; padding: 2px 4px 4px; font-size: calc(12.5px * var(--fs)); color: var(--fg-2); }
.vb-lane-h .ico { width: 15px; height: 15px; }
.vb-lane .vb-stages li { padding: 7px 4px; }
.vb-pipe-note { display: flex; gap: 6px; margin: 0; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.vb-pipe-note .ico { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.vb-stages li { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 10px; transition: background .2s; }
.vb-stages li.now { background: color-mix(in srgb, var(--c) 9%, transparent); }
.vb-sti { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--fg-3); }
.vb-sti .ico { width: 15px; height: 15px; }
.vb-stages li.done .vb-sti { background: var(--ok-soft); color: var(--ok); }
.vb-stages li.fail .vb-sti { background: var(--warn-soft); color: var(--warn); }
.vb-stages li.run .vb-sti { color: var(--c); }
.vb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3); opacity: .5; }
.vb-stx { flex: 1; min-width: 0; display: grid; gap: 5px; padding-top: 3px; }
.vb-stx b { font-size: calc(14.5px * var(--fs)); font-weight: 600; }
.vb-stages li.todo .vb-stx b { font-weight: 500; color: var(--fg-3); }
.vb-stx em { font-style: normal; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.vb-stages li.fail .vb-stx em { color: var(--warn); }
.vb-stms { padding-top: 4px; font-size: calc(12px * var(--fs)); font-variant-numeric: tabular-nums; color: var(--fg-3); }
.vb-fail { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--warn-soft); font-size: calc(14px * var(--fs)); line-height: 1.6; }
.vb-fail.ok { background: var(--surface-2); }
.vb-fail .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--warn); }
.vb-fail.ok .ico { color: var(--fg-3); }
.vb-fail em { font-style: normal; color: var(--fg-3); font-size: calc(13px * var(--fs)); }
.vb-job-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* 报告：左边播放器和时间轴（深色），右边标签页 */
.vb-rep { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr); min-height: 100%; }
.vb-left { background: var(--fm-2); color: var(--fm-fg); }
.vb-left-in { position: sticky; top: 0; display: grid; gap: 10px; padding: 16px; }
.vb-player { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: #000; }
.vb-player video { display: block; width: 100%; max-height: 50vh; background: #000; }
.vb-player.tall video { width: auto; max-width: 100%; max-height: 54vh; }
.vb-gone { display: grid; justify-items: center; gap: 8px; padding: 10px; }
.vb-gone img { max-width: 100%; max-height: 44vh; border-radius: 8px; }
.vb-gone p, .vb-verr { display: flex; gap: 6px; margin: 0; font-size: calc(13px * var(--fs)); line-height: 1.5; color: var(--fm-dim); }
.vb-gone .ico, .vb-verr .ico { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.vb-verr { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, .75); color: #fff; }
.vb-tl { position: relative; display: grid; gap: 4px; padding: 6px 0; border-radius: 10px; background: #1a1424; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.vb-tl-row { position: relative; height: 20px; margin: 0 8px; }
.vb-tl-row.segs { height: 26px; }
.vb-tl-row.wave { height: 24px; }
.vb-seg { position: absolute; top: 0; bottom: 0; display: flex; font-style: normal; align-items: center; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; background-clip: padding-box; overflow: hidden; transition: filter .15s, box-shadow .15s; }
.vb-seg.c1 { background-image: linear-gradient(90deg, #8B6CF0, #a68cff); }
.vb-seg.c2 { background-image: linear-gradient(90deg, #F95E94, #ff86ae); }
.vb-seg.c3 { background-image: linear-gradient(90deg, #F3A53C, #ffc673); }
.vb-seg.c4 { background-image: linear-gradient(90deg, #25B3A4, #4fd3c4); }
.vb-seg span { font-size: 11px; font-weight: 700; white-space: nowrap; color: rgba(20, 12, 30, .92); }
.vb-seg.now { z-index: 1; box-shadow: 0 0 0 2px #fff; }
.vb-tl:hover .vb-seg:not(.now) { filter: saturate(.85); }
.vb-tl-row.cuts i { position: absolute; top: 1px; bottom: 1px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--fm-tc); }
.vb-tl-row.cuts b { position: absolute; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #8d82a6; }
.vb-wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.vb-wave polyline { fill: none; stroke: #a68cff; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.vb-wave polygon { fill: rgba(166, 140, 255, .14); }
.vb-tl-row.wave i { position: absolute; bottom: 0; height: 3px; border-radius: 2px; background: #F3A53C; }
.vb-tl-hook { position: absolute; left: 8px; top: 0; bottom: 0; border-radius: 4px 0 0 4px; background: rgba(255, 138, 162, .1); border-right: 1px solid rgba(255, 138, 162, .55); pointer-events: none; }
.vb-ph { position: absolute; top: 0; bottom: 0; left: 8px; width: 2px; margin-left: -1px; border-radius: 1px; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .8); pointer-events: none; }
.vb-ticks { position: relative; height: 16px; margin: 0 8px; font: 10.5px/16px ui-monospace, "SF Mono", Menlo, monospace; color: #8d82a6; }
.vb-ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.vb-ticks span:nth-child(2) { transform: none; }
.vb-ticks span:last-child { transform: translateX(-100%); }
.vb-ticks .vb-hk { left: 0; top: 16px; transform: none; display: none; }
.vb-frames { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: #3a2f50 transparent; }
.vb-fr { position: relative; flex: none; width: 60px; overflow: hidden; border-radius: 7px; opacity: .78; outline: 2px solid transparent; outline-offset: -2px; transition: opacity .15s, outline-color .15s; }
.vb-rep.wide .vb-fr { width: 92px; }
.vb-fr img { display: block; width: 100%; aspect-ratio: var(--ar, 9 / 16); object-fit: cover; background: #241c33; }
.vb-fr em { position: absolute; left: 3px; bottom: 3px; padding: 0 4px; border-radius: 4px; background: rgba(0, 0, 0, .65); font: 600 9.5px/1.45 ui-monospace, "SF Mono", Menlo, monospace; font-style: normal; color: #fff; }
.vb-fr:hover, .vb-fr.now { opacity: 1; }
.vb-fr.now { outline-color: #fff; }
.vb-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: calc(11.5px * var(--fs)); color: #8d82a6; }
.vb-legend i { display: inline-block; width: 12px; height: 8px; margin-right: 5px; border-radius: 2px; vertical-align: middle; }
.vb-legend .k-seg { background: linear-gradient(90deg, #8B6CF0, #F95E94); }
.vb-legend .k-cut { width: 2px; height: 10px; background: var(--fm-tc); }
.vb-legend .k-wave { background: rgba(166, 140, 255, .55); }
.vb-legend .k-line { height: 3px; background: #F3A53C; }
.vb-right { min-width: 0; padding: 0 22px 32px; }
.vb-tabs { position: sticky; top: 0; z-index: 3; display: flex; gap: 4px; margin: 0 -22px; padding: 0 22px; overflow-x: auto; scrollbar-width: none; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.vb-tabs::-webkit-scrollbar { display: none; }
.vb-tabs button { flex: none; position: relative; display: inline-flex; align-items: center; gap: 5px; height: 46px; padding: 0 12px; border-radius: 0; font-size: calc(14px * var(--fs)); color: var(--fg-3); transition: color .15s; }
.vb-tabs button:hover { color: var(--fg); }
.vb-tabs button.on { color: var(--fg); font-weight: 700; }
.vb-tabs button.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--fg); }
.vb-tabs em { padding: 0 6px; border-radius: 99px; background: var(--fm-grad); font-style: normal; font-size: 11px; line-height: 17px; color: #fff; }
.vb-pane { display: grid; gap: 14px; padding-top: 16px; animation: fade .2s; }
.vb-pane > div { display: grid; gap: 14px; min-width: 0; }

/* 报告里的通用小件 */
.vb-sec { display: grid; gap: 10px; min-width: 0; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.vb-sec > h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: calc(15px * var(--fs)); }
.vb-sec > h3 > .ico { width: 17px; height: 17px; color: var(--c); }
.vb-sec > h3 .link-btn { margin-left: auto; font-size: calc(13px * var(--fs)); }
.vb-sec.vb-warn { background: var(--warn-soft); }
.vb-kv { display: grid; gap: 4px; min-width: 0; }
.vb-kv > span { font-size: calc(12.5px * var(--fs)); font-weight: 700; letter-spacing: .3px; color: var(--fg-3); }
.vb-kv > p { margin: 0; font-size: calc(14.5px * var(--fs)); line-height: 1.7; }
.vb-pane > div > .vb-kv { padding: 0 4px; }
.vb-ul { display: grid; gap: 5px; margin: 0; padding-left: 1.2em; font-size: calc(14.5px * var(--fs)); line-height: 1.65; }
.vb-ul.tips li::marker { color: var(--c); }
.vb-none { margin: 0; font-size: calc(13.5px * var(--fs)); color: var(--fg-3); }
.vb-small { display: flex; align-items: flex-start; gap: 5px; margin: 0; font-style: normal; font-size: calc(12.5px * var(--fs)); line-height: 1.55; color: var(--fg-3); }
.vb-small .ico { flex: none; width: 13px; height: 13px; margin-top: 2px; }
.vb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vb-chips span { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 99px; background: color-mix(in srgb, var(--c) 11%, var(--surface-2)); font-size: calc(13px * var(--fs)); }
.vb-chips.big span { height: 34px; font-size: calc(14px * var(--fs)); }
.vb-chips .ico { width: 14px; height: 14px; color: var(--c); }
.vb-guess { display: inline-block; margin-right: 5px; padding: 0 6px; border-radius: 5px; background: var(--warn-soft); font-size: 11px; font-weight: 700; line-height: 18px; vertical-align: 1px; color: var(--warn); }
.vb-ts { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 7px; background: var(--fg); color: var(--bg); font: 600 calc(12px * var(--fs))/1 ui-monospace, "SF Mono", Menlo, monospace; white-space: nowrap; vertical-align: middle; transition: transform .12s, opacity .15s; }
.vb-ts .ico { width: 10px; height: 10px; }
.vb-ts:hover { opacity: .86; }
.vb-ts:active { transform: scale(.95); }
.vb-shot { display: block; width: 100%; aspect-ratio: var(--ar, 9 / 16); object-fit: cover; border-radius: 8px; background: var(--fm); }
.vb-shot.sm { flex: none; width: 54px; }
.vb-rep.wide .vb-shot.sm, .vb-print.wide .vb-shot.sm { width: 96px; }
.vb-sc { flex: none; min-width: 40px; padding: 2px 8px; border-radius: 7px; background: var(--fg); color: var(--bg); text-align: center; font-size: calc(14px * var(--fs)); font-weight: 800; font-variant-numeric: tabular-nums; }
.vb-sc.none { background: var(--surface-2); color: var(--fg-3); font-weight: 600; }
.vb-cp { position: absolute; top: 8px; right: 8px; color: var(--fg-3); }
.vb-lab { display: inline-block; margin-right: 6px; font-style: normal; font-size: calc(11px * var(--fs)); font-weight: 700; color: var(--fg-3); }

/* 总览 */
.vb-ov-top, .vb-sc-top, .vb-hook-top { display: grid; align-items: center; gap: 16px; padding: 16px; border-radius: 16px; background: var(--fm); color: var(--fm-fg); border: 1px solid rgba(255, 255, 255, .05); }
.vb-ov-top { grid-template-columns: minmax(0, 1fr) 270px; }
.vb-big { display: grid; gap: 3px; }
.vb-big b { font-size: calc(54px * var(--fs)); font-weight: 800; line-height: 1; letter-spacing: -1px; color: #fff; font-variant-numeric: tabular-nums; }
.vb-big span { font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--fm-fg); }
.vb-big em { font-style: normal; font-size: calc(12px * var(--fs)); line-height: 1.55; color: var(--fm-dim); }
.vb-big em b { font-size: inherit; letter-spacing: 0; color: #fff; }
.vb-rtitle { margin: 4px 0 0; font-size: calc(20px * var(--fs)); }
.vb-sum { margin: 0; font-size: calc(15px * var(--fs)); line-height: 1.7; color: var(--fg-2); }
.vb-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); overflow: hidden; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.vb-stats span { display: grid; gap: 2px; padding: 10px 12px; margin: 0 -1px -1px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vb-stats em { font-style: normal; font-size: calc(12px * var(--fs)); color: var(--fg-3); }
.vb-stats b { font-size: calc(15px * var(--fs)); font-weight: 700; font-variant-numeric: tabular-nums; }
.vb-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vb-formula span { display: inline-flex; align-items: center; height: 32px; padding: 0 13px 0 11px; border-radius: 9px; background: var(--fm); color: #fff; font-size: calc(14px * var(--fs)); font-weight: 700; box-shadow: inset 3px 0 0 var(--k, #8B6CF0); }
.vb-formula span.c2 { --k: #F95E94; }
.vb-formula span.c3 { --k: #F3A53C; }
.vb-formula span.c4 { --k: #25B3A4; }
.vb-formula i { font-style: normal; color: var(--fg-3); }
.vb-bars { display: grid; gap: 4px; }
.vb-bar { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 8px; text-align: left; font-size: calc(13.5px * var(--fs)); }
.vb-bar:hover { background: var(--surface-2); }
.vb-bar > i, .vb-meter { display: block; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.vb-bar > i b, .vb-meter b { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #8B6CF0, #F95E94); }
.vb-segs { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.vb-segs li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: calc(14px * var(--fs)); }
.vb-segs li b { flex: none; }
.vb-segs li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); }
.vb-models { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0 4px; font-size: calc(12px * var(--fs)); color: var(--fg-3); }
.vb-models .ico { width: 13px; height: 13px; }

/* 雷达图（一组数据：描边 2px、10% 的填充、细网格、带底色圈的点）和分数环 */
.vb-radar { display: block; width: 100%; height: auto; overflow: visible; }
.vb-radar .g { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 1; }
.vb-radar .d { fill: rgba(249, 94, 148, .14); stroke: #F95E94; stroke-width: 2; stroke-linejoin: round; }
.vb-radar .m { fill: #F95E94; stroke: var(--fm); stroke-width: 2; }
.vb-radar .m.none { fill: var(--fm); stroke: #8d82a6; stroke-width: 1.5; }
.vb-radar .l { fill: var(--fm-fg); font-size: 11.5px; font-weight: 600; }
.vb-radar.big .l { font-size: 12.5px; }
.vb-radar .v { fill: #fff; font-weight: 800; }
.vb-radar .hit { fill: transparent; cursor: pointer; }
.vb-ring { position: relative; flex: none; width: 92px; height: 92px; display: grid; place-items: center; }
.vb-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.vb-ring .bg { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 7; }
.vb-ring .fg { fill: none; stroke: #F95E94; stroke-width: 7; stroke-linecap: round; }
.vb-ring b { margin-top: -10px; font-size: 26px; font-weight: 800; line-height: 1; color: #fff; }
.vb-ring em { position: absolute; bottom: 21px; font-style: normal; font-size: 10.5px; color: var(--fm-dim); }

/* 前 3 秒 */
.vb-hook-top { grid-template-columns: auto minmax(0, 1fr); }
.vb-hook-top .vb-chips span { background: rgba(255, 255, 255, .08); color: var(--fm-fg); }
.vb-hook-top .vb-small { margin-top: 6px; color: var(--fm-dim); }
.vb-h3 { margin: 0 0 8px; font-size: calc(17px * var(--fs)); color: #fff; }
.vb-first { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; }
.vb-rep.wide .vb-first { grid-template-columns: 180px minmax(0, 1fr); }
.vb-first button { position: relative; overflow: hidden; border-radius: 10px; }
.vb-first em { position: absolute; left: 6px; bottom: 6px; padding: 0 5px; border-radius: 5px; background: rgba(0, 0, 0, .6); font: 600 10.5px/1.5 ui-monospace, monospace; font-style: normal; color: #fff; }
.vb-first p { margin: 0; font-size: calc(14.5px * var(--fs)); line-height: 1.7; }
.vb-pts-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.vb-pts-list li { display: flex; align-items: flex-start; gap: 12px; }
.vb-pts-list li > div { display: grid; justify-items: start; gap: 5px; min-width: 0; }
.vb-pts-list p { margin: 0; font-size: calc(14.5px * var(--fs)); line-height: 1.65; }
.vb-alts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.vb-alt { position: relative; display: grid; align-content: start; gap: 6px; padding: 12px 40px 12px 12px; border-radius: 12px; background: var(--surface-2); }
.vb-alt-n { font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--fg-3); }
.vb-quote { margin: 0; font-size: calc(15px * var(--fs)); font-weight: 600; line-height: 1.6; }

/* 分镜表：电脑上是表格，手机上每段一张卡片 */
.vb-table { display: grid; overflow: hidden; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.vb-tr { display: grid; grid-template-columns: 92px minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 12px; border-top: 1px solid var(--line); font-size: calc(13.5px * var(--fs)); line-height: 1.6; transition: background .2s; }
.vb-rep.wide .vb-tr { grid-template-columns: 120px minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr); }
.vb-tr:first-child { border-top: 0; }
.vb-th { padding-top: 9px; padding-bottom: 9px; background: var(--surface-2); font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--fg-3); }
.vb-tr.now { background: color-mix(in srgb, var(--c) 9%, var(--surface)); }
.vb-tr p { margin: 0 0 4px; }
.vb-tr > span > b { display: block; margin-bottom: 4px; font-size: calc(14.5px * var(--fs)); }
.vb-td-shot { display: grid; align-content: start; justify-items: start; gap: 6px; }
.vb-td-shot button { position: relative; width: 100%; overflow: hidden; border-radius: 8px; }
.vb-td-shot em { position: absolute; left: 4px; top: 4px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border-radius: 5px; background: rgba(0, 0, 0, .6); font-style: normal; font-size: 11px; font-weight: 800; color: #fff; }
.vb-td-shot .vb-ts { font-size: 10.5px; padding: 0 6px; }
.vb-dur { font-size: calc(11.5px * var(--fs)); color: var(--fg-3); }
.vb-line { color: var(--fg-2); }
.vb-tr-lines { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.vb-tr-lines li { display: flex; align-items: baseline; gap: 10px; padding: 3px 4px; border-radius: 6px; font-size: calc(14px * var(--fs)); line-height: 1.6; transition: background .2s; }
.vb-tr-lines li.now { background: color-mix(in srgb, var(--c) 11%, transparent); }

/* 受众、评分、原因、建议 */
.vb-banner { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--info-soft, rgba(111, 156, 255, .13)); font-size: calc(13.5px * var(--fs)); line-height: 1.6; }
.vb-banner .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--info, #3c6fd8); }
.vb-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vb-sc-top { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
.vb-sc-radar { width: 100%; max-width: 360px; justify-self: center; }
.vb-dim { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); transition: box-shadow .3s; scroll-margin-top: 70px; }
.vb-dim.flash { box-shadow: 0 0 0 2px var(--c); }
.vb-dim-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vb-dim-h b { font-size: calc(15.5px * var(--fs)); }
.vb-dim-h > span:not(.vb-sc) { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.vb-end-top { display: flex; align-items: center; gap: 12px; }
.vb-end-top > div { display: grid; justify-items: start; gap: 8px; }
.vb-sug { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.vb-sug li { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.vb-sug li > div { display: grid; justify-items: start; gap: 5px; min-width: 0; }
.vb-sug b { font-size: calc(14.5px * var(--fs)); }
.vb-sug p { margin: 0; font-size: calc(14.5px * var(--fs)); line-height: 1.65; }
.vb-pri { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-3); font-size: 13px; font-weight: 800; color: var(--fg-2); }
.vb-sug li.p0 .vb-pri { background: var(--err-soft); color: var(--err); }
.vb-sug li.p1 .vb-pri { background: var(--warn-soft); color: var(--warn); }

/* 智能仿创 */
.vb-rx-intro { display: flex; gap: 10px; padding: 14px; border-radius: 14px; background: var(--fm); color: var(--fm-fg); border: 1px solid rgba(255, 255, 255, .05); font-size: calc(14px * var(--fs)); line-height: 1.65; }
.vb-rx-intro .ico { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--fm-tc); }
.vb-rx-intro b { color: #fff; }
.vb-rx-form { display: grid; gap: 14px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.vb-rx-form .field { margin: 0; }
.vb-rx-h { display: flex; align-items: center; gap: 6px; margin: 0; font-size: calc(15px * var(--fs)); }
.vb-rx-h .ico { width: 16px; height: 16px; color: var(--c); }
.vb-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.vb-chiprow .chip-btn { height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid transparent; background: var(--surface-2); font-size: calc(14px * var(--fs)); color: var(--fg-2); transition: background .15s, color .15s, transform .12s; }
.vb-chiprow .chip-btn:active { transform: scale(.95); }
.vb-chiprow .chip-btn.on { background: color-mix(in srgb, var(--c) 16%, var(--surface)); border-color: var(--c); color: var(--fg); font-weight: 600; }
.vb-check { display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--fs)); cursor: pointer; }
.vb-check input { width: 18px; height: 18px; accent-color: var(--c); }
.vb-rx-mats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.vb-rx-mat { position: relative; width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: var(--surface-2); }
.vb-rx-mat img { width: 100%; height: 100%; object-fit: cover; }
.vb-rx-mat em { position: absolute; left: 3px; top: 3px; min-width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px; background: rgba(0, 0, 0, .6); font-style: normal; font-size: 10.5px; font-weight: 800; color: #fff; }
.vb-x { position: absolute; right: 2px; top: 2px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; }
.vb-x .ico { width: 12px; height: 12px; }
.vb-rx-add { width: 64px; height: 64px; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 10px; border: 1.5px dashed var(--line-2); font-size: 11px; color: var(--fg-3); }
.vb-rx-add .ico { width: 18px; height: 18px; }
.vb-rx-add:hover { border-color: var(--c); color: var(--c); }
.vb-rx-go { height: 48px; font-size: calc(16px * var(--fs)); }
.vb-rx-busy { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 12px; background: color-mix(in srgb, var(--c) 9%, var(--surface)); font-size: calc(14px * var(--fs)); line-height: 1.55; }
.vb-rx-list { display: grid; gap: 10px; }
.vb-rx-list > h3 { margin: 4px 0 0; font-size: calc(16px * var(--fs)); }
.vb-rx-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.vb-rx-tabs button { flex: none; max-width: 230px; display: grid; gap: 2px; padding: 9px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-align: left; }
.vb-rx-tabs button.on { border-color: var(--c); box-shadow: 0 0 0 1px var(--c); }
.vb-rx-tabs b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(14px * var(--fs)); }
.vb-rx-tabs span { font-size: calc(12px * var(--fs)); color: var(--fg-3); }
.vb-plan { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.vb-plan-h { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vb-plan-h h3 { margin: 0 0 2px; font-size: calc(18px * var(--fs)); }
.vb-plan-h span { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.vb-plan-h .vb-cover-txt { padding: 4px 10px; border-radius: 8px; background: var(--fg); color: var(--bg); font-size: calc(13px * var(--fs)); font-weight: 700; }
.vb-script { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: calc(14.5px * var(--fs)); line-height: 1.65; }
.vb-ptable { display: grid; gap: 8px; }
.vb-pshot { display: flex; gap: 12px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.vb-pshot.warn { box-shadow: inset 3px 0 0 var(--warn); }
.vb-pn { flex: none; width: 40px; display: grid; justify-items: center; align-content: start; gap: 2px; font-size: 18px; font-weight: 800; }
.vb-pn em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--fg-3); }
.vb-pshot > div { display: grid; gap: 4px; min-width: 0; font-size: calc(13.5px * var(--fs)); line-height: 1.6; }
.vb-pshot p { margin: 0; }
.vb-pshot .vb-ptext { font-size: calc(15px * var(--fs)); font-weight: 700; }
.vb-ptext mark { background: none; color: inherit; box-shadow: inset 0 -.45em 0 color-mix(in srgb, #F95E94 35%, transparent); }
.vb-pmeta { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.vb-pmeta:empty { display: none; }
.vb-simwarn { display: flex; gap: 5px; font-size: calc(12.5px * var(--fs)); color: var(--warn); }
.vb-simwarn .ico { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.vb-tags { color: var(--fg-3); }
.vb-plan-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.vb-plan-btns .btn.primary { flex: 1; }
.vb-modal-p { margin: 0 0 8px; line-height: 1.7; }
.vb-print { display: none; }

/* 只管屏幕：打印 A4 竖版也只有七百多像素宽，不能用手机的排法 */
@media screen and (max-width: 900px) {
  .vb { padding: 0; place-items: stretch; }
  .vb-panel { width: 100%; height: 100%; border-radius: 0; transform: translateY(30px); }
  .vb-head { height: calc(52px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 6px 0; gap: 6px; }
  .vb-rec { display: none; }
  .vb-act { padding: 0 9px; }
  .vb-act span { display: none; }
  .vb-home { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px 14px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .vb-intro { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .vb-flow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .vb-flow li { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 10px; }
  .vb-flow li + li::before { display: none; }
  .vb-flow i { grid-row: span 2; margin: 0; }
  .vb-hsub { display: none; }
  .vb-lanes { grid-template-columns: minmax(0, 1fr); }
  .vb-caps { grid-template-columns: minmax(0, 1fr); }
  .vb-intro-in { padding: 10px 16px 8px; }
  .vb-intro h2 { font-size: calc(18px * var(--fs)); }
  .vb-drop { padding: 24px 14px; }
  .vb-job { padding: 16px 14px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .vb-rep { grid-template-columns: minmax(0, 1fr); }
  .vb-left-in { position: static; padding: 12px; }
  .vb-player video { max-height: 46vh; }
  .vb-player.tall video { max-height: 52vh; }
  .vb-right { padding: 0 14px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .vb-tabs { margin: 0 -14px; padding: 8px 14px; }
  .vb-ov-top, .vb-sc-top { grid-template-columns: minmax(0, 1fr); }
  .vb-ov-radar { width: 100%; max-width: 270px; justify-self: center; }
  .vb-grid2 { grid-template-columns: minmax(0, 1fr); }
  .vb-th { display: none; }
  .vb-tr, .vb-rep.wide .vb-tr { grid-template-columns: 76px minmax(0, 1fr); }
  .vb-rep.wide .vb-tr { grid-template-columns: 110px minmax(0, 1fr); }
  .vb-tr > span:nth-child(n+3) { grid-column: 2; }
  .vb-tr > .vb-td-shot { grid-row: span 4; }
  .vb-first, .vb-rep.wide .vb-first { grid-template-columns: 96px minmax(0, 1fr); }
  .vb-alts { grid-template-columns: minmax(0, 1fr); }
}

/* 打印 / 存 PDF：只打印报告（所有标签页按顺序排开），浅色、不要播放器 */
@media print {
  html.vb-printing, html.vb-printing body { overflow: visible !important; height: auto !important; background: #fff !important; }
  html.vb-printing body > *:not(.vb) { display: none !important; }
  html.vb-printing .vb { position: static; display: block; padding: 0; opacity: 1; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  html.vb-printing .vb-panel { width: auto; height: auto; max-height: none; overflow: visible; border-radius: 0; box-shadow: none; transform: none; background: #fff; }
  html.vb-printing .vb-head, html.vb-printing .vb-rep, html.vb-printing .vb-tip { display: none !important; }
  html.vb-printing .vb-body { overflow: visible; }
  html.vb-printing .vb-print { display: block; color: #111; -webkit-print-color-adjust: exact; print-color-adjust: exact; --bg: #fff; --surface: #fff; --surface-2: #f3f1f5; --surface-3: #e9e6ee; --line: #ddd8e3; --fg: #111; --fg-2: #333; --fg-3: #666; }
  .vb-pr-head h1 { margin: 0 0 4px; font-size: 22px; }
  .vb-pr-head p { margin: 0 0 14px; color: #666; font-size: 12px; }
  .vb-pr-sec { break-inside: auto; margin-bottom: 18px; }
  .vb-pr-sec > h2 { margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 2px solid #111; font-size: 17px; break-after: avoid; }
  .vb-print .vb-sec, .vb-print .vb-dim, .vb-print .vb-tr, .vb-print .vb-pshot, .vb-print .vb-alt, .vb-print .vb-sug li { break-inside: avoid; }
  .vb-print .vb-pane, .vb-print section > div { display: grid; gap: 10px; }
  .vb-print .vb-ts { background: #eee; color: #111; }
  .vb-print .vb-ts .ico, .vb-print .vb-cp, .vb-print .vb-plan-btns, .vb-print .link-btn, .vb-print .vb-rx-form, .vb-print .vb-rx-tabs { display: none !important; }
  .vb-print .vb-tr { grid-template-columns: 70px 1.4fr .9fr 1fr 1fr; }
}

/* 一键生成二维码 */
.qm-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.qm-row .chip { height: 32px; padding: 0 12px; }
.qm-prev { display: grid; place-items: center; min-height: 200px; padding: 14px; border-radius: 14px; background: var(--surface-2); text-align: center; }
.qm-prev img { display: block; max-width: 100%; max-height: 340px; border-radius: 8px; box-shadow: var(--shadow-1); background: #fff; }

/* 视频封面上的播放标 */
.ph-vid { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px 0 5px; border-radius: 11px; background: rgba(0, 0, 0, .55); color: #fff; font-style: normal; pointer-events: none; }
.ph-vid .ico { width: 13px; height: 13px; }
.ph-vid em { font-style: normal; font-size: 12px; font-variant-numeric: tabular-nums; }
.att-img .ph-vid { left: 3px; bottom: 3px; height: 18px; padding: 0 4px; }

/* 板块顶上的「一句话开工」（阿犸、嘟嘟、甲甲、雪团）：选类型 + 写一句 + 开始，直接开一个任务 */
.qk { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.qk-hint { margin: 0; font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.qk-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; }
.qk-chips::-webkit-scrollbar { display: none; }
.qk-chip { flex: none; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); background: var(--surface); color: var(--fg-2); font-size: calc(13.5px * var(--fs)); font-family: var(--font); transition: background .15s, color .15s, border-color .15s; }
.qk-chip.on { background: var(--c); border-color: var(--c); color: #fff; font-weight: 650; }
.qk-row { display: flex; gap: 8px; align-items: flex-end; }
.qk-in { flex: 1; min-width: 0; resize: none; min-height: 46px; max-height: 160px; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: calc(15px * var(--fs))/1.5 var(--font); }
.qk-in::placeholder { color: var(--fg-3); }
.qk-in:focus { outline: 0; border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.qk-go { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 46px; padding: 0 16px; border-radius: 14px; background: var(--c); color: #fff; font: 700 calc(15px * var(--fs)) var(--font); box-shadow: 0 8px 18px -10px var(--c); }
.qk-go .ico { width: 18px; height: 18px; }
.qk-go:active { transform: scale(.97); }
.qk-file { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 14px; border: 1.5px dashed color-mix(in srgb, var(--c) 45%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--c) 6%, var(--surface)); color: var(--fg-2); font-size: calc(14px * var(--fs)); cursor: pointer; }
.qk-file .ico { width: 18px; height: 18px; color: var(--c); flex: none; }
.qk-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qk-file.on { border-style: solid; color: var(--fg); }
/* 阿犸：代码编辑器里的输入框 */
.hi-qk { padding: 4px 18px 0 56px; }
.th-ide .qk-hint { color: #8b8072; font-family: inherit; }
.th-ide .qk-chip { background: rgba(255, 255, 255, .05); border-color: #3a342c; color: #d5c4a1; font-family: inherit; }
.th-ide .qk-chip.on { background: #f3a53c; border-color: #f3a53c; color: #1e1c19; }
.th-ide .qk-in { background: #141210; border-color: #3a342c; color: #fbf1c7; font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; font-size: calc(14px * var(--fs)); }
.th-ide .qk-in::placeholder { color: #6f675b; }
.th-ide .qk-go { background: #f3a53c; color: #1e1c19; font-family: inherit; }
/* 嘟嘟：便签纸上 */
.th-note .qk { margin-top: 18px; padding-right: 26px; }
.th-note .qk-in { background: rgba(255, 255, 255, .7); border-color: rgba(45, 58, 74, .18); color: #2d3a4a; }
.th-note .qk-chip { background: rgba(255, 255, 255, .6); border-color: rgba(45, 58, 74, .18); color: #2d3a4a; }
.th-note .qk-hint { color: #6b7686; }
.th-note .qk-chip.on { background: var(--c); border-color: var(--c); color: #fff; }
/* 甲甲：表格里 */
.th-sheet .qk { padding: 14px; }
/* 雪团：检查报告里 */
.th-audit .qk { padding: 0 18px 20px; }
.th-audit .qk-hint { color: #9aa6c2; }
.th-audit .qk-chip { background: rgba(255, 255, 255, .06); border-color: rgba(150, 170, 230, .25); color: #dfe6f5; }
.th-audit .qk-chip.on { background: #7aa2ff; border-color: #7aa2ff; color: #0f1630; }
.th-audit .qk-in { background: rgba(10, 16, 40, .55); border-color: rgba(150, 170, 230, .25); color: #eef2fb; }
.th-audit .qk-in::placeholder { color: #7f8bab; }
.th-audit .qk-go { background: #7aa2ff; color: #0f1630; }
@media (max-width: 640px) {
  .hi-qk { padding: 2px 12px 0 44px; }
  .th-note .qk { padding-right: 4px; }
  .th-audit .qk { padding: 0 14px 16px; }
  .qk-go { padding: 0 13px; }
}

/* 同款广场：耳朵板块「同城爆流视频」「一键生同款」点进来的短视频（两列卡片，点封面看，点「生成同款」照着做） */
html.sq-open, html.sq-open body { overflow: hidden; }
.sq { position: fixed; inset: 0; z-index: 83; display: grid; place-items: center; padding: 16px; background: rgba(12, 10, 16, .5); opacity: 0; transition: opacity .25s; }
.sq.in { opacity: 1; }
.sq-panel { position: relative; width: min(980px, 100%); height: min(920px, 100%); display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--bg); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55); overflow: hidden; transform: translateY(14px); transition: transform .32s var(--ease-spring); }
.sq.in .sq-panel { transform: none; }
.sq-head { flex: none; display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--bg); }
.sq-ht { min-width: 0; display: grid; }
.sq-ht b { font-size: calc(17px * var(--fs)); }
.sq-ht span { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-inds { flex: none; display: flex; gap: 6px; padding: 10px 14px 4px; overflow-x: auto; scrollbar-width: none; }
.sq-inds::-webkit-scrollbar { display: none; }
.sq-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 14px calc(20px + env(safe-area-inset-bottom, 0px)); }
.sq-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sq-card { display: flex; flex-direction: column; min-width: 0; border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); animation: upIn .4s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 30ms); text-align: left; }
.sq-cov { position: relative; display: block; aspect-ratio: 3 / 4; background: #15121a; overflow: hidden; }
.sq-cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sq-nocov { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .5); }
.sq-play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .88); color: var(--c); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.sq-play .ico { width: 20px; height: 20px; margin-left: 2px; }
.sq-dur, .sq-made { position: absolute; bottom: 8px; padding: 2px 7px; border-radius: 9px; background: rgba(0, 0, 0, .55); color: #fff; font-style: normal; font-size: calc(11.5px * var(--fs)); font-variant-numeric: tabular-nums; }
.sq-dur { right: 8px; }
.sq-made { left: 8px; }
.sq-body { display: grid; gap: 6px; padding: 10px; }
.sq-t { font-size: calc(14.5px * var(--fs)); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sq-cat { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.sq-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.sq-tags i { font-style: normal; font-size: calc(11.5px * var(--fs)); padding: 1px 6px; border-radius: 5px; background: var(--surface-2); color: var(--fg-2); }
.sq-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 18px; background: var(--c); color: #fff; font-weight: 700; font-size: calc(14px * var(--fs)); }
.sq-go[disabled] { opacity: .65; }
.sq-go .spinner { border-color: rgba(255, 255, 255, .4); border-top-color: #fff; }
.sq-own { align-items: center; justify-content: center; gap: 6px; padding: 20px 12px; min-height: 240px; border-style: dashed; border-width: 1.5px; background: color-mix(in srgb, var(--c) 5%, var(--surface)); color: var(--fg-2); text-align: center; }
.sq-own b { color: var(--fg); font-size: calc(14.5px * var(--fs)); }
.sq-own span { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.sq-plus { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); color: var(--c); margin-bottom: 4px; }
.sq-empty { display: grid; justify-items: center; gap: 10px; padding: 60px 20px; color: var(--fg-3); text-align: center; }
.sq-tip { margin: 16px 4px 0; color: var(--fg-3); font-size: calc(13px * var(--fs)); text-align: center; }
.sq-player { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; background: #000; }
.sq-player video { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: #000; }
.sq-x { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; color: #fff; background: rgba(0, 0, 0, .45); }
.sq-pbar { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); background: #0c0a10; color: #fff; }
.sq-pbar div { flex: 1; min-width: 0; display: grid; }
.sq-pbar b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-pbar span { font-size: calc(12.5px * var(--fs)); color: rgba(255, 255, 255, .6); }
.sq-go.big { height: 44px; padding: 0 18px; border-radius: 22px; flex: none; }
@media (max-width: 900px) {
  .sq { padding: 0; }
  .sq-panel { width: 100%; height: 100%; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); }
  .sq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sq-player { padding-top: env(safe-area-inset-top, 0px); }
}

/* ============ AI 自动化工作流（assets/js/flow.js） ============ */
html.fl-open, html.fl-open body { overflow: hidden; }
.fl { position: fixed; inset: 0; z-index: 86; display: grid; place-items: center; padding: 16px; background: rgba(12, 10, 16, .5); opacity: 0; transition: opacity .25s; }
.fl.in { opacity: 1; }
.fl-panel { position: relative; width: min(1040px, 100%); height: min(940px, 100%); display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--bg); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55); overflow: hidden; transform: translateY(14px); transition: transform .32s var(--ease-spring); }
.fl-panel.ed { width: min(1480px, 100%); height: 100%; }
.fl.in .fl-panel { transform: none; }
.fl-head, .fl-top { flex: none; display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--bg); }
.fl-ht { min-width: 0; display: grid; }
.fl-ht b { font-size: calc(17px * var(--fs)); }
.fl-ht span { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.fl .grow { flex: 1; }
.fl-empty { display: grid; justify-items: center; gap: 10px; padding: 60px 20px; color: var(--fg-3); text-align: center; }
.fl-empty.sm { padding: 26px 14px; font-size: calc(13.5px * var(--fs)); }
.fl-gen { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%), var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.fl-gen-t { display: flex; align-items: center; gap: 12px; }
.fl-gen-t > div { display: grid; gap: 2px; }
.fl-gen-t b { font-size: calc(16px * var(--fs)); }
.fl-gen-t span { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.fl-chain { flex: none; display: flex; align-items: center; gap: 0; }
.fl-chain i { width: 14px; height: 14px; border-radius: 4px; background: var(--c); opacity: .9; }
.fl-chain i + i { margin-left: 10px; position: relative; opacity: .65; }
.fl-chain i + i::before { content: ""; position: absolute; right: 100%; top: 6px; width: 10px; height: 2px; background: color-mix(in srgb, var(--c) 60%, transparent); }
.fl-chain i:last-child { opacity: .4; }
.fl-task { resize: vertical; min-height: 78px; font-size: calc(15px * var(--fs)); line-height: 1.5; }
.fl-gen-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fl-attach { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 7px 12px; border-radius: 10px; border: 1px dashed var(--line-2); color: var(--fg-2); font-size: calc(13px * var(--fs)); cursor: pointer; background: var(--surface); }
.fl-attach span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-attach.on { border-style: solid; border-color: color-mix(in srgb, var(--c) 50%, var(--line)); color: var(--fg); }
.fl-attach .ico { flex: none; width: 16px; height: 16px; color: var(--c); }
.fl-mock { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13px * var(--fs)); color: var(--fg-2); cursor: pointer; white-space: nowrap; }
.fl-mock input { accent-color: var(--c); width: 16px; height: 16px; }
.fl-go { background: var(--c); border-color: var(--c); }
.fl-ex { display: flex; flex-wrap: wrap; gap: 6px; }
.fl-sec-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 22px 2px 10px; }
.fl-sec-h b { font-size: calc(15.5px * var(--fs)); }
.fl-search { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--fg-3); }
.fl-search input { border: 0; outline: 0; background: none; width: 110px; color: var(--fg); font-size: calc(13px * var(--fs)); }
.fl-search .ico { width: 15px; height: 15px; }
.fl .input.sm { height: 32px; padding: 0 8px; font-size: calc(13px * var(--fs)); }
.fl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fl-card { display: flex; align-items: stretch; min-width: 0; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); animation: upIn .38s var(--ease-spring) both; animation-delay: calc(var(--i) * 30ms); }
.fl-card-main { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px; text-align: left; }
.fl-card-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--c); }
.fl-card-t { min-width: 0; display: grid; gap: 2px; }
.fl-card-t b { font-size: calc(14.5px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-card-t span { font-size: calc(12.5px * var(--fs)); color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fl-card-t em { font-style: normal; font-size: calc(11.5px * var(--fs)); color: var(--fg-3); }
.fl-card-act { flex: none; display: flex; flex-direction: column; justify-content: center; padding: 4px; gap: 2px; border-left: 1px solid var(--line); }
.fl-runs { display: grid; gap: 4px; }
.fl-run-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); text-align: left; font-size: calc(13.5px * var(--fs)); }
.fl-run-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-run-row span { color: var(--fg-2); }
.fl-run-row em { font-style: normal; color: var(--fg-3); font-size: calc(12px * var(--fs)); }
.fl-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); vertical-align: middle; margin: 0 4px; }
.fl-dot.running, .fl-dot.queued { background: var(--c); animation: flPulse 1.1s ease-in-out infinite; }
.fl-dot.success { background: var(--ok); }
.fl-dot.failed, .fl-dot.partial { background: var(--warn); }
.fl-dot.cancelled, .fl-dot.skipped { background: var(--fg-3); opacity: .55; }
@keyframes flPulse { 50% { opacity: .35; transform: scale(.8); } }

/* 编辑器 */
.fl-name { min-width: 60px; max-width: 280px; flex: 0 1 auto; height: 36px; padding: 0 8px; border-radius: 8px; border: 1px solid transparent; background: none; font-weight: 700; font-size: calc(16px * var(--fs)); color: var(--fg); }
.fl-name:hover, .fl-name:focus { border-color: var(--line); background: var(--surface); outline: 0; }
.fl-dirty { flex: none; font-style: normal; font-size: calc(11.5px * var(--fs)); color: var(--warn); background: var(--warn-soft); padding: 2px 7px; border-radius: 7px; }
.fl-tools { display: inline-flex; gap: 2px; }
.fl-tools .flip .ico { transform: scaleX(-1); }
.fl-stop { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.fl-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr) 340px; }
.fl-pal { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--panel, var(--bg)); }
.fl-pal-h { flex: none; display: grid; grid-template-columns: 1fr auto; padding: 12px 12px 6px; gap: 2px; }
.fl-pal-h b { font-size: calc(14px * var(--fs)); }
.fl-pal-h span { grid-column: 1; font-size: calc(11.5px * var(--fs)); color: var(--fg-3); }
.fl-pal-h .icon-btn { grid-row: 1 / 3; grid-column: 2; }
.fl-pal-s { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 16px; overscroll-behavior: contain; }
.fl-cat { display: grid; gap: 4px; margin-top: 10px; }
.fl-cat > em { font-style: normal; font-size: calc(11.5px * var(--fs)); color: var(--fg-3); font-weight: 700; letter-spacing: .5px; padding: 0 4px; }
.fl-pi { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border-radius: 10px; text-align: left; border: 1px solid transparent; }
.fl-pi:hover { background: var(--surface); border-color: var(--line); }
.fl-pi > .ico { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 8px; background: var(--surface-2); color: var(--fg-2); }
.fl-pi.ai > .ico { background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--c); }
.fl-pi > span { min-width: 0; display: grid; gap: 1px; }
.fl-pi b { font-size: calc(13px * var(--fs)); }
.fl-pi b i { font-style: normal; font-weight: 500; font-size: calc(10.5px * var(--fs)); margin-left: 6px; padding: 1px 5px; border-radius: 5px; background: var(--surface-2); color: var(--fg-3); }
.fl-pi span span { font-size: calc(11.5px * var(--fs)); color: var(--fg-3); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fl-pi.off { opacity: .6; cursor: help; }
.fl-cv { position: relative; min-width: 0; min-height: 0; overflow: hidden; touch-action: none; cursor: grab; outline: 0; background-color: var(--bg); background-image: radial-gradient(circle, color-mix(in srgb, var(--fg) 14%, transparent) 1px, transparent 1.2px); background-size: 22px 22px; }
.fl-cv:active { cursor: grabbing; }
.fl-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.fl-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.fe { fill: none; stroke: color-mix(in srgb, var(--fg) 30%, transparent); stroke-width: 2; }
.fe.live { stroke: var(--ok); }
.fe.sel { stroke: var(--c); stroke-width: 3; }
.fe.bad { stroke: var(--warn); stroke-dasharray: 6 4; }
.fe.tmp { stroke: var(--c); stroke-dasharray: 5 4; }
.fe-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.fn { position: absolute; width: 210px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 13px; background: var(--surface); border: 1.5px solid var(--line); box-shadow: 0 6px 16px -10px rgba(20, 10, 30, .35); cursor: pointer; user-select: none; -webkit-user-select: none; transition: border-color .15s, box-shadow .15s; }
.fn:hover { border-color: var(--line-2); }
.fn.sel { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent), 0 6px 16px -10px rgba(20, 10, 30, .35); }
.fn.bad { border-color: color-mix(in srgb, var(--warn) 60%, var(--line)); }
.fn.s-running { border-color: var(--c); }
.fn.s-success { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); }
.fn.s-failed { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); }
.fn.s-skipped, .fn.s-cancelled { opacity: .55; }
.fn-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--fg-2); }
.fn.ai .fn-ico { background: color-mix(in srgb, var(--c) 15%, var(--surface)); color: var(--c); }
.fn-ico .ico { width: 17px; height: 17px; }
.fn-t { min-width: 0; flex: 1; display: grid; gap: 1px; }
.fn-t b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-t span { font-size: 11.5px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-spin { position: absolute; right: 8px; top: 8px; width: 12px; height: 12px; border-width: 2px; }
.fn-ok, .fn-warn { position: absolute; right: 7px; top: 6px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.fn-ok { background: var(--ok); }
.fn-warn { background: var(--warn); }
.fn-ok .ico, .fn-warn .ico { width: 10px; height: 10px; }
.fp { position: absolute; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--surface); border: 2px solid color-mix(in srgb, var(--fg) 35%, transparent); z-index: 1; }
.fp::after { content: ""; position: absolute; inset: -10px; }
.fp.in { left: -8px; }
.fp.out { right: -8px; cursor: crosshair; border-color: var(--c); }
.fp.out:hover, .fp.in.hot { background: var(--c); border-color: var(--c); transform: scale(1.25); }
.fp-l { position: absolute; font-style: normal; font-size: 10.5px; color: var(--fg-3); pointer-events: none; }
.fp-l.in { left: 10px; }
.fp-l.out { right: 12px; }
.fl-cv-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--fg-3); text-align: center; padding: 20px; }
.fl-cv-empty > .ico { width: 34px; height: 34px; color: var(--c); }
.fl-cv-empty b { color: var(--fg); font-size: calc(15px * var(--fs)); }
.fl-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.fl-zoom span { min-width: 40px; text-align: center; font-size: 12px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.fl-note { position: absolute; left: 12px; right: 12px; top: 12px; max-width: 560px; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 11px; background: color-mix(in srgb, var(--c) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); font-size: calc(13px * var(--fs)); box-shadow: var(--shadow-1); }
.fl-note > .ico { flex: none; color: var(--c); width: 16px; height: 16px; }
.fl-note span { flex: 1; }
.fl-side { min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--panel, var(--bg)); }
.fl-tabs { flex: none; display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.fl-tabs > button:not(.icon-btn) { height: 32px; padding: 0 12px; border-radius: 9px; font-size: calc(13.5px * var(--fs)); color: var(--fg-2); display: inline-flex; align-items: center; }
.fl-tabs > button.on { background: var(--surface); color: var(--fg); font-weight: 700; box-shadow: var(--shadow-1); }
.fl-side-s { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 24px; overscroll-behavior: contain; }
.fl-form { display: grid; gap: 12px; }
.fl-form .field { display: grid; gap: 5px; margin: 0; }
.fl-form .field > span { font-size: calc(12.5px * var(--fs)); color: var(--fg-2); font-weight: 600; }
.fl-form .req { color: var(--c); font-style: normal; }
.fl-form textarea.input { resize: vertical; line-height: 1.45; padding-top: 8px; }
.fl-ph { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 4px; }
.fl-ph > div { display: grid; gap: 2px; }
.fl-ph b { font-size: calc(15px * var(--fs)); }
.fl-ph span { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.fl-chk { display: flex; align-items: center; gap: 8px; font-size: calc(13.5px * var(--fs)); cursor: pointer; }
.fl-chk input { accent-color: var(--c); width: 16px; height: 16px; }
.fl-list { display: grid; gap: 6px; justify-items: start; }
.fl-li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 4px; width: 100%; }
.fl-adv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.fl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fl-stat { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.fl-help { margin: 0; font-size: calc(12px * var(--fs)); color: var(--fg-3); line-height: 1.55; }
.fl-help .ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; color: var(--c); }
.fl-issues { display: grid; gap: 6px; }
.fl-issues > b { font-size: calc(13px * var(--fs)); }
.fl-issue { display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px; border-radius: 10px; font-size: calc(12.5px * var(--fs)); line-height: 1.45; text-align: left; background: var(--warn-soft); color: var(--fg); }
.fl-issue.warn { background: var(--surface-2); }
.fl-issue .ico { flex: none; width: 15px; height: 15px; color: var(--warn); margin-top: 1px; }
.fl-issue.warn .ico { color: var(--fg-3); }
.fl-ok { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); font-size: calc(13px * var(--fs)); }
.fl-ok .ico { width: 15px; height: 15px; }
.fl-last { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: calc(13px * var(--fs)); }
.fl-last > em, .fl-res > b, .fl-steps > b { font-style: normal; font-weight: 700; font-size: calc(12.5px * var(--fs)); color: var(--fg-2); margin-top: 4px; }
.fl-why { margin: 0; padding: 7px 9px; border-radius: 9px; background: var(--warn-soft); color: var(--fg); font-size: calc(12.5px * var(--fs)); line-height: 1.5; }
.fl-why .ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: var(--warn); }
.fl-tb-wrap { max-width: 100%; overflow: auto; max-height: 320px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.fl-tb { border-collapse: collapse; font-size: calc(12px * var(--fs)); width: max-content; min-width: 100%; }
.fl-tb th, .fl-tb td { padding: 5px 9px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.fl-tb th { position: sticky; top: 0; background: var(--surface-2); font-weight: 700; }
.fl-tb-n { font-size: calc(11.5px * var(--fs)); color: var(--fg-3); }
.fl-pre { margin: 0; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; padding: 9px 11px; border-radius: 9px; background: var(--surface-2); font-family: inherit; font-size: calc(12.5px * var(--fs)); line-height: 1.55; }
.fl-file { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 11px; background: color-mix(in srgb, var(--c) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); text-align: left; }
.fl-file > .ico { flex: none; width: 20px; height: 20px; color: var(--c); }
.fl-file > span { display: grid; min-width: 0; }
.fl-file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-file span span { font-size: calc(12px * var(--fs)); color: var(--fg-3); }
.fl-logs { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: calc(12px * var(--fs)); color: var(--fg-2); }
.fl-logs li em { font-style: normal; color: var(--fg-3); margin-right: 6px; font-variant-numeric: tabular-nums; }
.fl-logs li.warn, .fl-logs li.error { color: var(--warn); }
.fl-run { display: grid; gap: 10px; }
.fl-run-h { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); }
.fl-run-h > .ico, .fl-run-h > .spinner { flex: none; width: 22px; height: 22px; }
.fl-run-h.success > .ico { color: var(--ok); }
.fl-run-h.failed > .ico, .fl-run-h.partial > .ico { color: var(--warn); }
.fl-run-h > div { display: grid; gap: 2px; min-width: 0; }
.fl-run-h b { font-size: calc(15px * var(--fs)); }
.fl-run-h span { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.fl-mock-b { font-style: normal; font-weight: 600; font-size: calc(11px * var(--fs)); margin-left: 8px; padding: 2px 7px; border-radius: 7px; background: var(--surface-2); color: var(--fg-2); vertical-align: 2px; }
.fl-bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.fl-bar i { display: block; height: 100%; border-radius: 3px; background: var(--c); transition: width .4s ease; }
.fl-bar-t { font-size: calc(12px * var(--fs)); color: var(--fg-3); margin-top: -4px; }
.fl-res { display: grid; gap: 8px; }
.fl-res-i { display: grid; gap: 6px; }
.fl-res-i > em { font-style: normal; font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.fl-steps { display: grid; gap: 4px; }
.fl-step { display: flex; gap: 6px; align-items: flex-start; padding: 7px 8px; border-radius: 9px; text-align: left; }
.fl-step:hover { background: var(--surface); }
.fl-step .fl-dot { margin-top: 6px; }
.fl-step > span { display: grid; gap: 2px; min-width: 0; font-size: calc(12.5px * var(--fs)); }
.fl-step > span > span { color: var(--fg-3); }
.fl-step b { font-size: calc(13px * var(--fs)); }
.fl-logbox summary { cursor: pointer; font-size: calc(12.5px * var(--fs)); color: var(--fg-2); padding: 4px 0; }
.fl-ask { display: grid; gap: 12px; }
.fl-ask .field { display: grid; gap: 5px; }
.fl .show-sm { display: none !important; }
.fl-mbar { position: absolute; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; gap: 6px; padding: 5px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.fl-mbar .fl-dot { margin-right: 0; }
@media (max-width: 1100px) { .fl-body { grid-template-columns: 210px minmax(0, 1fr) 300px; } }
@media (max-width: 900px) {
  .fl { padding: 0; }
  .fl-panel, .fl-panel.ed { width: 100%; height: 100%; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); }
  .fl-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .fl .show-sm { display: inline-flex !important; }
  .fl .hide-sm { display: none; }
  .fl-top { gap: 2px; padding: 6px; }
  .fl-top .fl-mock span { display: none; }
  .fl-tools .icon-btn[data-fl="redo"] { display: none; }
  .fl-name { max-width: 34vw; font-size: calc(15px * var(--fs)); }
  .fl-body { display: block; position: relative; }
  .fl-cv { position: absolute; inset: 0; }
  .fl-zoom { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .fl-pal, .fl-side { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: min(68%, 560px); border: 0; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -20px 40px -20px rgba(0, 0, 0, .35); transform: translateY(105%); transition: transform .3s var(--ease-spring); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--bg); }
  .fl-pal.open, .fl-side.open { transform: none; }
  .fl-li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fl-adv { grid-template-columns: 1fr; }
}
/* 快速获客里的工作流卡：一整行，画一小段流程 */
.pr-card.wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t v" "c v"; column-gap: 14px; row-gap: 10px; min-height: 0; }
.pr-card.wide .pr-txt { grid-area: t; }
.pr-card.wide .pr-cta { grid-area: c; align-self: end; justify-self: start; margin: 0; }
.pr-card.wide .pr-tl { grid-area: v; align-self: center; order: 0; width: 140px; }
@media (max-width: 380px) { .pr-card.wide .pr-tl { width: 110px; } }
.pr-flow { grid-area: v; align-self: center; display: flex; align-items: center; gap: 0; }
.pr-flow i { width: 38px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: var(--fm-fg); }
.pr-flow i .ico { width: 16px; height: 16px; }
.pr-flow i + i { margin-left: 16px; position: relative; }
.pr-flow i + i::before { content: ""; position: absolute; right: 100%; top: 50%; width: 16px; height: 2px; margin-top: -1px; background: linear-gradient(90deg, rgba(255, 255, 255, .15), var(--a)); }
.pr-flow i:nth-child(2) { border-color: var(--a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 25%, transparent); }
@media (max-width: 520px) { .pr-flow i { width: 30px; height: 26px; } .pr-flow i + i { margin-left: 10px; } .pr-flow i + i::before { width: 10px; } .pr-flow i:nth-child(4) { display: none; } }

/* ============ 爆款拆解「综合评分」（assets/js/bdscore.js） ============ */
.sc { display: grid; gap: 14px; min-width: 0;
  --sc-1: #2a78d6; --sc-2: #eb6834; --sc-3: #1baf7a; --sc-4: #eda100; --sc-bar: #2a78d6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sc { --sc-1: #3987e5; --sc-2: #d95926; --sc-3: #199e70; --sc-4: #c98500; --sc-bar: #3987e5; } }
:root[data-theme="dark"] .sc { --sc-1: #3987e5; --sc-2: #d95926; --sc-3: #199e70; --sc-4: #c98500; --sc-bar: #3987e5; }
.sc h4 { margin: 4px 0 0; font-size: calc(13.5px * var(--fs)); color: var(--fg-2); }
.sc-hero { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--c) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 25%, var(--line)); }
.sc-hero.none > b { font-size: 40px; color: var(--fg-3); }
.sc-num { display: flex; align-items: baseline; gap: 4px; flex: none; }
.sc-num b { font-size: calc(46px * var(--fs)); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.sc-num em { font-style: normal; color: var(--fg-3); font-size: calc(14px * var(--fs)); }
.sc-hero > div:last-child { display: grid; gap: 4px; min-width: 0; }
.sc-hero strong { display: flex; align-items: center; gap: 8px; font-size: calc(16px * var(--fs)); }
.sc-hero span { font-size: calc(12.5px * var(--fs)); color: var(--fg-2); line-height: 1.5; }
.sc-grade { font-style: normal; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--c); color: #fff; font-size: 14px; font-weight: 800; }
.sc-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sc-part { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.sc-part-h { display: flex; justify-content: space-between; align-items: baseline; }
.sc-part-h span { font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-meter { display: block; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.sc-meter b { display: block; height: 100%; border-radius: 4px; background: var(--c); }
.sc-meter.data b { background: var(--sc-bar); }
.sc-dims { display: flex; flex-wrap: wrap; gap: 4px; }
.sc-dims span { font-size: calc(12px * var(--fs)); padding: 2px 8px; border-radius: 7px; background: var(--surface); color: var(--fg-2); }
.sc-dims b { margin-left: 4px; color: var(--fg); }
.sc-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sc-items li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: calc(13px * var(--fs)); }
.sc-items em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-items small { grid-column: 1 / -1; font-size: calc(11.5px * var(--fs)); color: var(--fg-3); line-height: 1.45; }
.sc-kind { display: inline-block; flex: none; font-style: normal; font-size: calc(11px * var(--fs)); font-weight: 700; padding: 1px 6px; border-radius: 6px; margin-right: 6px; vertical-align: 1px; white-space: nowrap; }
.sc-kind.ai { background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--c); }
.sc-kind.fact { background: var(--ok-soft); color: var(--ok); }
.sc-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sc-btns.end { justify-content: flex-end; }
.sc-btns label.btn { cursor: pointer; }
.sc-btns label.btn.disabled { opacity: .55; pointer-events: none; }
.sc-busy { display: flex; align-items: center; gap: 8px; margin: 0; font-size: calc(13px * var(--fs)); color: var(--fg-2); }
.sc-srcs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: calc(12px * var(--fs)); color: var(--fg-3); }
.sc-srcs span { padding: 2px 8px; border-radius: 7px; background: var(--surface-2); }
.sc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sc-tile { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.sc-tile span { font-size: calc(12px * var(--fs)); color: var(--fg-3); }
.sc-tile b { font-size: calc(18px * var(--fs)); font-variant-numeric: tabular-nums; }
.sc-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sc-search { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--fg-3); }
.sc-search input { border: 0; outline: 0; background: none; width: 110px; color: var(--fg); font-size: calc(13px * var(--fs)); }
.sc-search .ico { width: 15px; height: 15px; }
.sc .input.sm { height: 32px; padding: 0 8px; font-size: calc(13px * var(--fs)); }
.sc-only { margin: 0; }
.sc-tb-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; }
.sc-tb { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--fs)); }
.sc-tb th, .sc-tb td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.sc-tb th { background: var(--surface-2); font-size: calc(12px * var(--fs)); color: var(--fg-2); white-space: nowrap; }
.sc-tb tr:last-child td { border-bottom: 0; }
.sc-tb tr.chk td { background: color-mix(in srgb, var(--warn) 6%, transparent); }
.sc-tb tr.na td { color: var(--fg-3); }
.sc-tb small { display: block; font-size: calc(11.5px * var(--fs)); color: var(--fg-3); line-height: 1.4; margin-top: 2px; }
.sc-tb td .input.sm { width: 120px; }
.sc-raw { font-variant-numeric: tabular-nums; }
.sc-parsed, .sc-conf, .sc-other { display: block; font-style: normal; font-size: calc(11.5px * var(--fs)); color: var(--fg-3); }
.sc-act { white-space: nowrap; text-align: right !important; }
.sc-act .btn.xs { height: 26px; padding: 0 8px; font-size: 12px; }
.sc-chip { display: inline-block; font-size: calc(11.5px * var(--fs)); font-weight: 700; padding: 1px 7px; border-radius: 6px; white-space: nowrap; }
.sc-chip.chk { background: var(--warn-soft); color: var(--warn); }
.sc-chip.ok { background: var(--ok-soft); color: var(--ok); }
.sc-src { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: calc(12px * var(--fs)); color: var(--fg-2); }
.sc-src em { font-style: normal; color: var(--fg-3); }
.sc-t { display: inline-flex; align-items: center; gap: 2px; padding: 0 5px; border-radius: 5px; background: var(--surface-2); color: var(--c); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sc-t .ico { width: 10px; height: 10px; }
.sc-ck { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: var(--fg-2); cursor: pointer; }
.sc-ck input { accent-color: var(--c); }
.sc-fig { margin: 0; display: grid; gap: 8px; }
.sc-fig + .sc-fig { margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--line); }
.sc-fig figcaption { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--fg-2); }
.sc-bars { display: grid; gap: 7px; }
.sc-bar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 58px; align-items: center; gap: 8px; font-size: calc(12.5px * var(--fs)); }
.sc-bar span { color: var(--fg-2); }
.sc-bar i { display: block; height: 14px; border-radius: 0 4px 4px 0; background: var(--surface-2); }
.sc-bar i b { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--sc-bar); }
.sc-bar:hover i b { filter: brightness(1.08); }
.sc-bar em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: var(--fg); }
.sc-stack { display: flex; gap: 2px; height: 18px; border-radius: 4px; overflow: hidden; }
.sc-stack i { min-width: 3px; }
.sc-stack i:hover { filter: brightness(1.1); }
.sc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: calc(12.5px * var(--fs)); color: var(--fg-2); }
.sc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sc-legend i { width: 10px; height: 10px; border-radius: 3px; }
.sc-legend b { color: var(--fg); }
.sc .s1 { background: var(--sc-1); } .sc .s2 { background: var(--sc-2); } .sc .s3 { background: var(--sc-3); } .sc .s4 { background: var(--sc-4); }
.sc-line { width: 100%; height: auto; overflow: visible; }
.sc-line text { font-size: 11px; fill: var(--fg-3); }
.sc-line .g { stroke: var(--line); stroke-width: 1; }
.sc-line .ln { fill: none; stroke: var(--sc-bar); stroke-width: 2; stroke-linejoin: round; }
.sc-line .dt { fill: var(--sc-bar); stroke: var(--surface); stroke-width: 2; }
.sc-line .hit { fill: transparent; cursor: pointer; }
.sc-line .hit:hover + .dt, .sc-line .dt:hover { r: 6; }
.sc-table { display: grid; gap: 8px; }
.sc-table + .sc-table { margin-top: 10px; }
.sc-table-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-table-h .icon-btn { margin-left: auto; }
.sc-finds, .sc-tips { margin: 0; padding: 0 0 0 2px; list-style: none; display: grid; gap: 8px; }
.sc-tips { counter-reset: t; }
.sc-finds li, .sc-tips li { display: grid; gap: 4px; padding: 10px 12px; border-radius: 11px; background: var(--surface-2); font-size: calc(13.5px * var(--fs)); line-height: 1.55; }
.sc-finds li > .sc-kind { justify-self: start; }
.sc-tips li em { font-style: normal; justify-self: start; font-size: calc(11.5px * var(--fs)); font-weight: 700; color: var(--c); }
.sc-basis { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: calc(11.5px * var(--fs)); color: var(--fg-3); }
.sc-basis i { font-style: normal; padding: 1px 6px; border-radius: 5px; background: var(--surface); color: var(--fg-2); }
.sc-p { margin: 0; font-size: calc(13.5px * var(--fs)); line-height: 1.6; }
.sc-stale { display: flex; gap: 6px; align-items: center; margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--warn-soft); font-size: calc(12.5px * var(--fs)); }
.sc-stale .ico { color: var(--warn); width: 15px; height: 15px; }
.sc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-form .field { display: grid; gap: 4px; margin: 0; }
.sc-custom { display: grid; gap: 8px; margin-top: 14px; }
.sc-crow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media (max-width: 700px) {
  .sc-parts, .sc-form { grid-template-columns: 1fr; }
  .sc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-num b { font-size: calc(38px * var(--fs)); }
  .sc-bar { grid-template-columns: 78px minmax(0, 1fr) 52px; }
  .sc-tb th, .sc-tb td { padding: 7px 8px; }
}
.sc-part .vb-small { display: block; }
.sc-part .vb-small .link-btn { margin-left: 4px; }
.sc-tools select.input { width: auto; flex: none; }
.sc-tb.der td:nth-child(2), .sc-tb td:nth-child(2) b, .sc-raw, .sc-name b { white-space: nowrap; }
/* 手机上数据明细一行一张卡：名字和数在上，来源、状态、按钮在下 */
@media (max-width: 700px) {
  .sc-tb.mt thead { display: none; }
  .sc-tb.mt, .sc-tb.mt tbody { display: block; }
  .sc-tb.mt tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .sc-tb.mt tr:last-child { border-bottom: 0; }
  .sc-tb.mt td { padding: 0; border: 0; }
  .sc-tb.mt td:nth-child(2) { text-align: right; }
  .sc-tb.mt td:nth-child(3) { grid-column: 1; }
  .sc-tb.mt td:nth-child(4) { grid-column: 2; text-align: right; }
  .sc-tb.mt td.sc-act { grid-column: 1 / -1; text-align: left !important; }
}

/* ---------- 在线客服（积分页进来） ---------- */
.view-kefu { overflow: hidden !important; }
.w-kefu-go { position: relative; justify-self: start; }
.w-kefu > .w-kefu-go { justify-self: stretch; height: 44px; font-size: calc(15px * var(--fs)); }
.w-kefu-or { margin: 2px 0 -4px; }
.w-kefu-line { margin-top: 10px; }
.kfu-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-style: normal; font-size: 11px; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.dw-dot { position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); flex: none; }
.kfu { flex: 1; min-height: 0; display: flex; flex-direction: column; width: min(820px, 100%); margin: 0 auto; }
.kfu-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex: none; }
.kfu-top-av, .kfu-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, #ff7ba9, #e5447d 55%, #8b6cf0); }
.kfu-top-av .ico, .kfu-av .ico { width: 18px; height: 18px; }
.kfu-av { width: 32px; height: 32px; }
.kfu-top-t { min-width: 0; }
.kfu-top-t b { display: block; font-size: calc(15.5px * var(--fs)); }
.kfu-top-t span { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.kfu-msgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
#kfu-list { display: flex; flex-direction: column; gap: 12px; }
.kfu-msg { display: flex; gap: 8px; align-items: flex-start; max-width: 86%; }
.kfu-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.kfu-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.kfu-msg.me .kfu-col { align-items: flex-end; }
.kfu-b { padding: 10px 13px; border-radius: 6px 18px 18px 18px; background: var(--surface-2); font-size: calc(15px * var(--fs)); line-height: 1.55; max-width: 100%; }
.kfu-msg.me .kfu-b { border-radius: 18px 6px 18px 18px; background: var(--accent); color: #fff; }
.kfu-msg.pending .kfu-b { opacity: .6; }
.kfu-b p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.kfu-b img { display: block; max-width: min(240px, 100%); max-height: 300px; border-radius: 12px; margin: 1px 0; cursor: zoom-in; }
.kfu-b img + p { margin-top: 6px; }
.kfu-gone { font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.kfu-msg em { font-style: normal; font-size: calc(11.5px * var(--fs)); color: var(--fg-3); margin: 4px 4px 0; }
.kfu-code { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); min-width: min(260px, 64vw); }
.kfu-code-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft, rgba(229, 68, 125, .12)); color: var(--accent); flex: none; }
.kfu-code > div { flex: 1; min-width: 0; }
.kfu-code b { display: block; font-size: calc(15px * var(--fs)); }
.kfu-code span { font-size: calc(12px * var(--fs)); color: var(--fg-3); letter-spacing: .3px; }
.kfu-bar { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--surface); }
.kfu-bar textarea { flex: 1; min-height: 40px; max-height: 120px; padding: 9px 12px; resize: none; line-height: 1.45; font: inherit; font-size: calc(15px * var(--fs)); border-radius: 20px; }
.kfu-bar .icon-btn { flex: none; height: 40px; width: 40px; }
.kfu-send { flex: none; height: 40px; border-radius: 20px; }
html.kb-open .kfu-bar { padding-bottom: 10px; }
@media (max-width: 560px) { .kfu-send span { display: none; } .kfu-send { width: 40px; padding: 0; } .kfu-msg { max-width: 92%; } }

/* 用户协议、隐私政策（内置的，在弹窗里看） */
.legal-frame { display: block; width: 100%; height: min(64vh, 620px); border: 0; border-radius: 12px; background: #fbfaf8; }

/* ---------- 这次用了多少积分 ---------- */
.msg-cost { display: inline-flex; align-items: center; gap: 4px; margin: 2px 12px 0; font-size: calc(12px * var(--fs)); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.msg-cost .ico { width: 13px; height: 13px; color: #c98500; }

/* ---------- 可以这样问我：输入框上面的例句，点一下就发 ---------- */
.ask-row { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 0 12px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ask-row::-webkit-scrollbar { display: none; }
.ask-row em { flex: none; font-style: normal; font-size: calc(12px * var(--fs)); color: var(--fg-3); }
.chip.ask { flex: none; display: inline-flex; align-items: center; gap: 4px; max-width: 78vw; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(0, 0, 0, .04); }
.chip.ask span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.ask .ico { width: 14px; height: 14px; color: var(--accent); flex: none; }
.composer-dock:has(.composer.has-text) .ask-row { display: none; }

/* ---------- 我的作品 ---------- */
.wk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.wk-tabs { flex: 1; min-width: 0; }
.wk-tabs .chip em { font-style: normal; opacity: .6; margin-left: 2px; }
.wk-search { position: relative; display: inline-flex; align-items: center; }
.wk-search .ico { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--fg-3); pointer-events: none; }
.wk-search .input { padding-left: 32px; width: 200px; }
.wk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.wk-card { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); overflow: hidden; }
.wk-thumb { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.wk-thumb iframe { position: absolute; left: 0; top: 0; width: 400%; height: 400%; transform: scale(.25); transform-origin: 0 0; border: 0; pointer-events: none; background: #fff; }
.wk-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-ico { display: grid; place-items: center; color: var(--accent); }
.wk-ico .ico { width: 40px; height: 40px; stroke-width: 1.4; }
.k-sheet .wk-ico { color: #1baf7a; } .k-doc .wk-ico { color: #2a78d6; } .k-other .wk-ico { color: var(--fg-3); }
.wk-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; }
.wk-play .ico { width: 20px; height: 20px; }
.wk-meta { padding: 10px 12px 4px; min-width: 0; }
.wk-meta b { display: block; font-size: calc(14.5px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-meta span { display: block; font-size: calc(12px * var(--fs)); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-acts { display: flex; gap: 6px; padding: 8px 12px 12px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .wk-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .wk-search, .wk-search .input { width: 100%; }
  .wk-acts .btn { flex: 1; padding: 0 6px; }
  .wk-acts .btn .ico { display: none; }
}

/* ---------- 长辈模式：大字、大按钮、按住说话更显眼 ---------- */
.msg-speak { display: inline-flex; align-items: center; gap: 6px; margin: 6px 12px 0; padding: 0 14px; height: 40px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; font-size: calc(15px * var(--fs)); }
.msg-speak .ico { width: 20px; height: 20px; }
html.elder .c-ico { width: 48px; height: 48px; }
html.elder .c-ico .ico { width: 28px; height: 28px; }
html.elder .c-send { height: 48px; padding: 0 18px; border-radius: 24px; }
html.elder .c-mic { width: auto; padding: 0 14px; border-radius: 24px; gap: 6px; background: var(--accent); color: #fff; }
html.elder .c-mic::after { content: "按住说话"; font-weight: 650; font-size: calc(14px * var(--fs)); }
html.elder .composer.has-text .c-mic::after { content: none; }
html.elder .chip, html.elder .btn.sm { min-height: 40px; }
html.elder .btn { min-height: 44px; }
html.elder .msg-meta { opacity: 1; }
/* 输入框单独占一行，下面一排大按钮：「按住说话」不挤输入框 */
html.elder .composer { flex-wrap: wrap; }
html.elder .composer #composer-input { flex: 1 0 100%; }
html.elder .composer .c-icons { flex: 1; justify-content: flex-start; }
html.elder .composer [data-act="quick-menu"] { display: none; }

/* 没填 / 填错的框：红框 + 左右抖一下（APP.invalid）。输入框染边框，别的（选项、上传区）外面套一圈红 */
.ax-bad { animation: axShake .45s cubic-bezier(.36, .07, .19, .97) both; box-shadow: 0 0 0 2px var(--err), 0 0 0 6px var(--err-soft) !important; }
input.ax-bad, textarea.ax-bad, select.ax-bad { border-color: var(--err) !important; box-shadow: 0 0 0 3px var(--err-soft) !important; }
.field.ax-bad, label.ax-bad, .vs-chips.ax-bad, .st-mats.ax-bad, .st-ai.ax-bad, .st-vfile.ax-bad, .st-recs.ax-bad { border-radius: 10px; }
@keyframes axShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
@media (prefers-reduced-motion: reduce) { .ax-bad { animation: none !important; } }
#ai-prompt.ax-bad { box-shadow: 0 0 0 2px var(--err), 0 0 0 6px var(--err-soft) !important; border-radius: 8px; }
/* 做视频：做好的步骤圆圈变绿勾；底部「还差什么」点一下跳过去 */
.st-sec h3.ok i { background: var(--ok); }
button.vs-need { display: inline-flex; align-items: center; gap: 2px; min-width: 0; padding: 0; border: 0; background: none; text-align: left; font: inherit; font-size: calc(13.5px * var(--fs)); color: var(--fg-3); cursor: default; }
button.vs-need.go { color: var(--warn, #c98a1a); font-weight: 600; cursor: pointer; }
button.vs-need .ico { flex: none; width: 14px; height: 14px; }

/* ============================================================
   抖音爆款搜索（耳朵板块对话框下面的卡片 + 整页；assets/js/hotsearch.js）
   ============================================================ */
.dyh-sec { margin-top: -8px; }
.dyh-card { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
.dyh-card-h { display: flex; align-items: center; gap: 12px; }
.dyh-card-h > div { display: grid; gap: 2px; min-width: 0; }
.dyh-card-h b { font-size: calc(16px * var(--fs)); }
.dyh-card-h em { font-style: normal; font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.dyh-dy, .dyh-logo { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #25f4ee -10%, #161823 45%, #fe2c55 110%); }
.dyh-dy .ico, .dyh-logo .ico { width: 20px; height: 20px; }
.dyh-logo { width: 30px; height: 30px; border-radius: 8px; }
.dyh-logo .ico { width: 16px; height: 16px; }
.dyh-bar { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); transition: border-color .15s, background .15s; }
.dyh-bar:focus-within { border-color: var(--fg-3); background: var(--surface); }
.dyh-bar-i { display: grid; color: var(--fg-3); }
.dyh-bar-i .ico { width: 18px; height: 18px; }
.dyh-bar .input { flex: 1; min-width: 0; height: 38px; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: calc(15px * var(--fs)); }
.dyh-bar .input::-webkit-search-cancel-button { display: none; }
.dyh-bar .btn { flex: none; height: 38px; padding: 0 18px; border-radius: 9px; }
.dyh-bar.big .input, .dyh-bar.big .btn { height: 42px; }
.dyh-words { display: flex; flex-wrap: wrap; gap: 6px; }
.dyh-word { height: 30px; padding: 0 12px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); font-size: calc(13px * var(--fs)); color: var(--fg-2); transition: background .15s, color .15s; }
.dyh-word:hover { background: var(--surface); color: var(--fg); border-color: var(--line-2); }
.dyh-card-f { display: flex; justify-content: flex-start; }
.dyh-card-f .link-btn { display: inline-flex; align-items: center; gap: 4px; font-size: calc(13px * var(--fs)); }
.dyh-card-f .ico { width: 15px; height: 15px; }

html.dyh-open, html.dyh-open body { overflow: hidden; }
.dyh { position: fixed; inset: 0; z-index: 83; display: grid; place-items: center; padding: 16px; background: rgba(12, 10, 16, .5); opacity: 0; transition: opacity .25s; }
.dyh.in { opacity: 1; }
.dyh-panel { position: relative; width: min(1180px, 100%); height: min(920px, 100%); display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--bg); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55); overflow: hidden; transform: translateY(14px); transition: transform .32s var(--ease-spring); }
.dyh.in .dyh-panel { transform: none; }
.dyh-head { flex: none; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.dyh-head b { font-size: calc(16px * var(--fs)); }
.dyh-hsub { padding-left: 10px; border-left: 1px solid var(--line); font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.dyh-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.dyh-top { position: sticky; top: 0; z-index: 2; display: grid; gap: 10px; padding: 14px 18px 12px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.dyh-tabs { display: flex; gap: 4px; }
.dyh-tabs button { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: 9px; font-size: calc(14px * var(--fs)); color: var(--fg-3); }
.dyh-tabs button:hover { background: var(--surface-2); color: var(--fg); }
.dyh-tabs button.on { background: var(--fg); color: var(--bg); font-weight: 700; }
.dyh-tabs .ico { width: 15px; height: 15px; }
.dyh-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.dyh-chips { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--surface-2); }
.dyh-chips button { height: 28px; padding: 0 10px; border-radius: 7px; font-size: calc(12.5px * var(--fs)); color: var(--fg-2); }
.dyh-chips button.on { background: var(--surface); color: var(--fg); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.dyh-only { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13px * var(--fs)); color: var(--fg-2); cursor: pointer; }
.dyh-note { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.dyh-sum { padding: 14px 18px 0; font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.dyh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; padding: 12px 18px 18px; }
.dyh-item { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); animation: upIn .35s var(--ease-spring) both; animation-delay: calc(var(--i) * 25ms); }
.dyh-cov { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #111; }
.dyh-cov img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.dyh-cov:hover img { transform: scale(1.03); }
.dyh-nocov { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .5); }
.dyh-cov::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); pointer-events: none; }
.dyh-badge, .dyh-dur, .dyh-likes { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-weight: 700; color: #fff; }
.dyh-badge { left: 8px; top: 8px; padding: 2px 7px; border-radius: 6px; font-size: calc(11.5px * var(--fs)); background: #fe2c55; }
.dyh-badge.low { background: linear-gradient(120deg, #ff7a18, #fe2c55); }
.dyh-badge.warm { background: rgba(0, 0, 0, .55); }
.dyh-badge .ico { width: 12px; height: 12px; }
.dyh-dur { right: 8px; top: 8px; padding: 1px 6px; border-radius: 5px; background: rgba(0, 0, 0, .55); font: 600 11px/1.5 ui-monospace, "SF Mono", Menlo, monospace; }
.dyh-likes { left: 8px; bottom: 8px; font-size: calc(15px * var(--fs)); text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.dyh-likes .ico { width: 16px; height: 16px; }
.dyh-info { flex: 1; display: grid; align-content: start; gap: 8px; padding: 10px 12px 12px; }
.dyh-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; min-height: 2.9em; font-size: calc(13.5px * var(--fs)); line-height: 1.45; font-weight: 600; }
.dyh-au { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: calc(12.5px * var(--fs)); color: var(--fg-2); }
.dyh-au img, .dyh-au i { flex: none; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.dyh-au span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dyh-au em { flex: none; font-style: normal; color: var(--fg-3); }
.dyh-st { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: calc(12px * var(--fs)); font-variant-numeric: tabular-nums; color: var(--fg-3); }
.dyh-st span { display: inline-flex; align-items: center; gap: 3px; }
.dyh-st .ico { width: 13px; height: 13px; }
.dyh-at { margin-left: auto; }
.dyh-acts { display: flex; gap: 6px; }
.dyh-acts .btn { flex: 1; }
.dyh-acts .icon-btn { flex: none; border: 1px solid var(--line); }
.dyh-more { display: flex; justify-content: center; padding: 0 18px 22px; }
.dyh-empty { display: grid; justify-items: center; gap: 8px; margin: 40px 18px; padding: 30px 16px; border-radius: 14px; border: 1px dashed var(--line-2); text-align: center; color: var(--fg-2); }
.dyh-empty > .ico { width: 28px; height: 28px; color: var(--fg-3); }
.dyh-empty span { font-size: calc(13px * var(--fs)); color: var(--fg-3); }
.dyh-item.skel { animation: none; }
/* 10.24：板块上的搜索卡片，和「快速获客」一个风格（胶片底、等宽小字、斜叠的竖屏小卡片） */
.dyh-sec .dyh-card { --fmx: var(--fm, #17121f); --tc: var(--fm-tc, #ff8aa2); --grad: var(--fm-grad, linear-gradient(120deg, #8B6CF0, #F95E94 60%, #F3A53C));
  position: relative; overflow: hidden; isolation: isolate; gap: 14px; padding: 26px 18px 24px; border-radius: 18px; color: var(--fm-fg, #efe9ff);
  background: radial-gradient(70% 90% at 100% 0%, rgba(249, 94, 148, .30), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(37, 244, 238, .14), transparent 60%), var(--fmx);
  border: 1px solid var(--fm-line, rgba(255, 255, 255, .07)); box-shadow: 0 18px 34px -24px rgba(23, 18, 31, .95); }
.dyh-sec .dyh-card > .tf-holes { position: absolute; left: 0; right: 0; height: 12px; background: radial-gradient(circle at 9px 6px, #2d2440 3px, transparent 3.6px) 0 0 / 20px 12px repeat-x; opacity: .95; pointer-events: none; }
.dyh-sec .dyh-card > .tf-holes:first-child { top: 3px; }
.dyh-sec .dyh-card > .tf-holes:last-child { bottom: 3px; }
.dyh-sec .dyh-card-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.dyh-sec .dyh-card-t { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.dyh-tc { display: inline-flex; align-items: center; font: 600 calc(11.5px * var(--fs))/1.5 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 1px; color: var(--tc); }
.dyh-sec .dyh-card-t b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: calc(21px * var(--fs)); font-weight: 800; letter-spacing: .5px; line-height: 1.3; color: #fff; }
.dyh-hot { font-style: normal; font-size: calc(12.5px * var(--fs)); font-weight: 900; letter-spacing: 1px; padding: 2px 8px; border-radius: 6px; color: #fff; background: linear-gradient(135deg, #ff4d4f, #ff9a3d); transform: rotate(-2deg); box-shadow: 0 4px 12px -4px #ff4d4f; }
.dyh-sec .dyh-card-t em { font-style: normal; font-size: calc(13px * var(--fs)); line-height: 1.45; color: var(--fm-dim, #b3a8cc); }
.dyh-art { position: relative; width: 118px; height: 104px; flex: none; }
.dyh-art-c { position: absolute; top: 4px; width: 56px; aspect-ratio: 9 / 16; border-radius: 9px; overflow: hidden; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .1), 0 12px 22px -10px rgba(0, 0, 0, .8); }
.dyh-art-c .pv-c { inset: 5px; opacity: .6; }
.dyh-art-c.a { left: 31px; z-index: 3; top: 0; background: radial-gradient(70% 50% at 50% 40%, #ffb36b, transparent 72%), linear-gradient(165deg, #fe2c55, #2a0f1d); transform: rotate(2deg); }
.dyh-art-c.b { left: 0; z-index: 2; background: radial-gradient(70% 50% at 50% 40%, #a68cff, transparent 72%), linear-gradient(165deg, #6b4fd8, #160f2a); transform: rotate(-9deg); }
.dyh-art-c.c { left: 62px; z-index: 1; background: radial-gradient(70% 50% at 50% 40%, #7ff3ea, transparent 72%), linear-gradient(165deg, #1aa9a0, #0b1c22); transform: rotate(10deg); }
.dyh-art-c em { position: absolute; left: 5px; bottom: 6px; display: inline-flex; align-items: center; gap: 2px; font: 700 calc(9.5px * var(--fs))/1 ui-monospace, "SF Mono", Menlo, monospace; font-style: normal; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.dyh-art-c em .ico { width: 10px; height: 10px; }
.dyh-art-c.a em { font-size: calc(10.5px * var(--fs)); }
.dyh-sec .dyh-card .dyh-src { width: max-content; justify-self: start; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.dyh-sec .dyh-card .dyh-src button { height: 30px; padding: 0 14px; color: var(--fm-dim, #b3a8cc); }
.dyh-sec .dyh-card .dyh-src button.on { color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.dyh-sec .dyh-card .dyh-bar { padding: 5px 5px 5px 14px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.dyh-sec .dyh-card .dyh-bar:focus-within { background: rgba(255, 255, 255, .09); border-color: color-mix(in srgb, #F95E94 60%, transparent); box-shadow: 0 0 0 3px rgba(249, 94, 148, .18); }
.dyh-sec .dyh-card .dyh-bar-i { color: var(--fm-dim, #b3a8cc); }
.dyh-sec .dyh-card .dyh-bar .input { color: #fff; }
.dyh-sec .dyh-card .dyh-bar .input::placeholder { color: rgba(239, 233, 255, .42); }
.dyh-sec .dyh-card .dyh-bar .btn { display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 18px; border: 0; border-radius: 10px; font-weight: 800; color: #fff; background: var(--grad); box-shadow: 0 8px 18px -10px #F95E94; }
.dyh-sec .dyh-card .dyh-bar .btn .ico { width: 16px; height: 16px; }
.dyh-sec .dyh-card .dyh-words { gap: 7px; }
.dyh-sec .dyh-card .dyh-word { display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 12px; border-radius: 99px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); color: #e4dcf7; }
.dyh-sec .dyh-card .dyh-word:hover { background: rgba(255, 255, 255, .11); color: #fff; border-color: rgba(255, 255, 255, .16); }
.dyh-hash { font-style: normal; font-weight: 800; color: var(--tc, #ff8aa2); }
.dyh-sec .dyh-card .dyh-word.rec { border-color: rgba(255, 138, 162, .28); }
.dyh-sec .dyh-card .dyh-word.rec .ico { color: var(--tc); }
.dyh-sec .dyh-card .dyh-word.clr { background: transparent; border-style: dashed; color: var(--fm-dim, #b3a8cc); }
.dyh-sec .dyh-card .dyh-card-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dyh-sec .dyh-card .dyh-card-f .link-btn { color: var(--tc); font-weight: 700; }
.dyh-sec .dyh-card .dyh-card-f > span { font: 600 calc(11px * var(--fs))/1.4 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .5px; color: rgba(179, 168, 204, .7); }
@media (max-width: 560px) {
  .dyh-sec .dyh-card { padding: 24px 14px 22px; }
  .dyh-sec .dyh-card-h { grid-template-columns: minmax(0, 1fr) 92px; gap: 8px; align-items: start; }
  .dyh-art { width: 118px; height: 104px; transform: scale(.78); transform-origin: left top; margin-bottom: -22px; }
  .dyh-sec .dyh-card-t b { font-size: calc(19px * var(--fs)); }
  .dyh-sec .dyh-card .dyh-src { width: 100%; }
  .dyh-sec .dyh-card .dyh-src button { flex: 1; justify-content: center; }
  .dyh-sec .dyh-card .dyh-bar .btn { padding: 0 14px; }
}
/* 10.23：抖音 / 视频号切换、最近搜过的词、视频号的结果 */
.dyh-card-h > div:not(.dyh-src) { flex: 1; }
.dyh-card-h > .dyh-src { display: inline-flex; gap: 2px; }
.dyh-src { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); justify-self: start; }
.dyh-src button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; font-size: calc(13.5px * var(--fs)); color: var(--fg-2); transition: background .15s, color .15s; }
.dyh-src button i { width: 8px; height: 8px; border-radius: 50%; background: #fe2c55; box-shadow: -2px 0 0 #25f4ee; }
.dyh-src button.sph i { background: #fa9d3b; box-shadow: none; }
.dyh-src button.on { background: var(--surface); color: var(--fg); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.dyh-top > .dyh-src { width: max-content; }
.dyh[data-src="sph"] .dyh-logo, .dyh-card[data-src="sph"] .dyh-dy { background: linear-gradient(135deg, #ffc86b -10%, #fa9d3b 50%, #f2711c 110%); }
.dyh-word.rec { display: inline-flex; align-items: center; gap: 4px; }
.dyh-word.rec .ico { width: 13px; height: 13px; color: var(--fg-3); }
.dyh-word.clr { display: inline-flex; align-items: center; gap: 3px; border-style: dashed; background: transparent; color: var(--fg-3); }
.dyh-word.clr .ico { width: 12px; height: 12px; }
.dyh-info { grid-template-columns: minmax(0, 1fr); }
.dyh-acts .btn { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dyh-acts .btn small { margin-left: 4px; font-size: calc(11px * var(--fs)); font-weight: 500; opacity: .75; }
.dyh-item.sph .dyh-badge:not(.low):not(.warm) { background: #f2711c; }
div.dyh-cov { cursor: default; }
@media (max-width: 560px) {
  .dyh-card-h { flex-wrap: wrap; }
  .dyh-card-h > .dyh-src { order: 3; width: 100%; }
  .dyh-card-h > .dyh-src button { flex: 1; justify-content: center; }
}

.dyh-item.skel .dyh-cov, .dyh-item.skel span { background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.dyh-item.skel .dyh-l1, .dyh-item.skel .dyh-l2 { display: block; height: 12px; margin: 10px 12px 0; border-radius: 6px; }
.dyh-item.skel .dyh-l2 { width: 60%; margin-bottom: 14px; }
.dyh-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--surface); font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.dyh-foot > span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.dyh-foot .ico { width: 14px; height: 14px; }
@media screen and (max-width: 700px) {
  .dyh { padding: 0; }
  .dyh-panel { width: 100%; height: 100%; border-radius: 0; }
  .dyh-hsub, .dyh-legal { display: none; }
  .dyh-top { padding: 10px 12px; }
  .dyh-filters { gap: 6px 8px; }
  .dyh-chips { flex: none; }
  .dyh-only { flex: none; }
  .dyh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px 12px 16px; }
  .dyh-info { padding: 8px 9px 10px; gap: 6px; }
  .dyh-st span:nth-child(3) { display: none; }
  .dyh-foot { padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
}

/* ============ 10.24：视频审核和综合评分（assets/js/vreview.js） ============ */
.modal.vr-modal { width: min(680px, 100%); }
.vr { display: grid; gap: 16px; }
.vr-busy { display: grid; justify-items: center; gap: 16px; padding: 24px 8px 12px; text-align: center; }
.vr-scan { position: relative; width: 84px; height: 84px; display: grid; place-items: center; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #8B6CF0, #F95E94 60%, #F3A53C); box-shadow: 0 16px 30px -14px #F95E94; overflow: hidden; }
.vr-scan span .ico { width: 38px; height: 38px; }
.vr-scan i { position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(transparent, rgba(255, 255, 255, .45), transparent); animation: vrScan 1.6s ease-in-out infinite; }
@keyframes vrScan { 0% { top: -30%; } 100% { top: 100%; } }
.vr-busy ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; text-align: left; }
.vr-busy li { display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--fs)); color: var(--fg-3); }
.vr-busy li.on { color: var(--fg); font-weight: 600; }
.vr-busy li.done { color: var(--fg-2); }
.vr-busy li .ico { width: 16px; height: 16px; color: var(--ok); }
.vr-dot { width: 8px; height: 8px; margin: 0 4px; border-radius: 50%; background: var(--line-2); }
/* 分数 */
.vr-hero { display: flex; align-items: center; gap: 18px; padding: 18px; border-radius: 18px; color: #efe9ff; background: radial-gradient(80% 120% at 100% 0%, rgba(249, 94, 148, .32), transparent 60%), radial-gradient(70% 100% at 0% 100%, rgba(139, 108, 240, .3), transparent 60%), #17121f; }
.vr-ring { --p: 80; --deg: 0deg; flex: none; position: relative; width: 112px; height: 112px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: conic-gradient(from -90deg, #F3A53C, #F95E94 calc(var(--deg) * .55), #8B6CF0 var(--deg), rgba(255, 255, 255, .1) 0); transition: --deg 1s; }
.vr-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #17121f; }
.vr-ring.in { --deg: calc(var(--p) * 3.6deg); }
@property --deg { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.vr-ring b, .vr-ring span { position: relative; }
.vr-ring b { font: 800 calc(38px * var(--fs))/1 ui-monospace, "SF Mono", Menlo, monospace; color: #fff; }
.vr-ring span { margin-top: 4px; font-size: calc(11.5px * var(--fs)); color: #b3a8cc; letter-spacing: 1px; }
.vr-hero-t { display: grid; gap: 8px; min-width: 0; }
.vr-hero-t p { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vr-grade { font-style: normal; font-size: calc(18px * var(--fs)); font-weight: 900; color: #fff; }
.vr-hero.top .vr-grade { background: linear-gradient(120deg, #ffd27a, #ff8aa2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vr-verdict { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 99px; font-style: normal; font-size: calc(12px * var(--fs)); font-weight: 700; }
.vr-verdict .ico { width: 13px; height: 13px; }
.vr-verdict.ok { color: #7de3b0; background: rgba(46, 190, 120, .16); }
.vr-verdict.warn, .vr-verdict.risk { color: #ffc46b; background: rgba(243, 165, 60, .18); }
.vr-sum { font-size: calc(13.5px * var(--fs)); line-height: 1.6; color: #d9d0ee; }
.vr-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.vr-strip span { position: relative; flex: none; width: 56px; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: #111; }
.vr-strip img { width: 100%; height: 100%; object-fit: cover; }
.vr-strip em { position: absolute; left: 3px; bottom: 3px; padding: 0 4px; border-radius: 4px; font: 600 10px/1.5 ui-monospace, monospace; font-style: normal; color: #fff; background: rgba(0, 0, 0, .55); }
.vr-sec { display: grid; gap: 10px; }
.vr-sec h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: calc(15px * var(--fs)); }
.vr-sec h4 .ico { width: 17px; height: 17px; color: var(--accent); }
.vr-dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vr-dim { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: var(--surface-2); animation: upIn .4s var(--ease-spring) both; animation-delay: calc(var(--i) * 50ms); }
.vr-dim p { display: flex; justify-content: space-between; align-items: baseline; margin: 0; }
.vr-dim p em { font: 800 calc(18px * var(--fs))/1 ui-monospace, "SF Mono", Menlo, monospace; font-style: normal; }
.vr-bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.vr-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8B6CF0, #F95E94 70%, #F3A53C); }
.vr-dc { font-size: calc(12.5px * var(--fs)); line-height: 1.55; color: var(--fg-2); }
.vr-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vr-list li { display: flex; gap: 8px; align-items: flex-start; font-size: calc(13.5px * var(--fs)); line-height: 1.55; }
.vr-list li .ico { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.vr-list.good .ico { color: var(--ok); }
.vr-list.weak .ico, .vr-list.tip .ico { color: var(--warn); }
.vr-fixes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: fx; }
.vr-fixes li { position: relative; display: grid; gap: 2px; padding: 10px 12px 10px 40px; border-radius: 12px; background: var(--surface-2); font-size: calc(13.5px * var(--fs)); line-height: 1.55; counter-increment: fx; }
.vr-fixes li::before { content: counter(fx); position: absolute; left: 12px; top: 10px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: 11.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #8B6CF0, #F95E94); }
.vr-fixes li span { color: var(--fg-2); }
.vr-p { margin: 0; font-size: calc(13.5px * var(--fs)); line-height: 1.6; color: var(--fg-2); }
.vr-risks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vr-risk { display: flex; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.vr-risk.high { border-color: color-mix(in srgb, #e8892b 55%, transparent); background: color-mix(in srgb, #e8892b 8%, var(--surface)); }
.vr-risk.mid { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 6%, var(--surface)); }
.vr-risk img { flex: none; width: 46px; height: 82px; object-fit: cover; border-radius: 8px; }
.vr-risk > div { display: grid; gap: 4px; min-width: 0; }
.vr-risk p { margin: 0; font-size: calc(13px * var(--fs)); line-height: 1.55; }
.vr-rh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vr-rh b { font-size: calc(14px * var(--fs)); }
.vr-sev { padding: 1px 7px; border-radius: 6px; font-style: normal; font-size: calc(11.5px * var(--fs)); font-weight: 800; color: #fff; background: #c9a227; }
.vr-sev.high { background: #e8892b; }
.vr-sev.mid { background: var(--warn); }
.vr-sev.low { color: var(--fg-2); background: var(--surface-3); }
.vr-t, .vr-w { display: inline-flex; align-items: center; gap: 2px; font-size: calc(12px * var(--fs)); color: var(--fg-3); }
.vr-t .ico { width: 12px; height: 12px; }
.vr-q { color: var(--fg-2); }
.vr-why { color: var(--fg-3); }
.vr-fix { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; background: var(--ok-soft); }
.vr-fix > .ico { width: 14px; height: 14px; color: var(--ok); }
.vr-fix span { flex: 1; min-width: 0; }
.vr-titles { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vr-titles li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-weight: 600; }
.vr-titles li span { flex: 1; min-width: 0; }
.vr-post { display: grid; gap: 8px; justify-items: start; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.vr-post p { margin: 0; white-space: pre-wrap; font-size: calc(13.5px * var(--fs)); line-height: 1.6; }
.vr-banner { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--warn-soft); }
.vr-banner > .ico { flex: none; width: 22px; height: 22px; color: var(--warn); }
.vr-banner.ok { background: var(--ok-soft); }
.vr-banner.ok > .ico { color: var(--ok); }
.vr-banner.risk { background: color-mix(in srgb, #e8892b 14%, var(--surface)); }
.vr-banner.risk > .ico { color: #e8892b; }
.vr-banner > div { display: grid; gap: 2px; }
.vr-banner span { font-size: calc(13px * var(--fs)); color: var(--fg-2); line-height: 1.55; }
.vr-note { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: calc(12px * var(--fs)); color: var(--fg-3); line-height: 1.5; }
.vr-note .ico { flex: none; width: 13px; height: 13px; margin-top: 2px; }
.btn.xs { height: 26px; padding: 0 8px; font-size: calc(12px * var(--fs)); gap: 3px; }
.btn.xs .ico { width: 13px; height: 13px; }
/* 入口：剪好的视频、AI 作品下面那张卡 */
.vr-cta { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; text-align: left; color: #efe9ff; background: radial-gradient(90% 140% at 100% 0%, rgba(249, 94, 148, .35), transparent 60%), #17121f; border: 1px solid rgba(255, 255, 255, .08); }
.vr-cta > .ico:first-child { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #8B6CF0, #F95E94 60%, #F3A53C); }
.vr-cta span { display: grid; gap: 1px; flex: 1; min-width: 0; }
.vr-cta b { font-size: calc(14.5px * var(--fs)); color: #fff; }
.vr-cta em { font-style: normal; font-size: calc(12px * var(--fs)); color: #b3a8cc; }
.vr-cta > .ico:last-child { width: 18px; height: 18px; color: #b3a8cc; }
@media (max-width: 560px) {
  .vr-hero { flex-direction: column; text-align: center; }
  .vr-hero-t p { justify-content: center; }
  .vr-dims { grid-template-columns: minmax(0, 1fr); }
}
.dyh-art-c.b em, .dyh-art-c.c em { display: none; }

/* 10.24.3：做好的网页、文件在聊天里展开看（不再跳出全屏面板） */
.dl-tap { position: absolute; right: 8px; bottom: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; font-style: normal; font-size: calc(12px * var(--fs)); font-weight: 600; color: #fff; background: rgba(0, 0, 0, .55); pointer-events: none; }
.dl-tap .ico { width: 13px; height: 13px; }
.deliver-card.open { width: min(560px, 100%); }
.dl-live { height: min(62vh, 560px); background: #fff; border-bottom: 1px solid var(--line); overflow: hidden; }
.dl-live iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.of-peek { margin: 2px 0 8px; border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.of-peek pre { margin: 0; max-height: 300px; overflow: auto; padding: 10px 12px; font: calc(12px * var(--fs))/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; color: var(--fg-2); }
.of-peek.img { display: grid; place-items: center; padding: 8px; }
.of-peek.img img { max-width: 100%; max-height: 360px; border-radius: 8px; }
.of-peek p { margin: 0; padding: 10px 12px; }
.of-row { flex-wrap: wrap; }
.of-row > .of-peek { flex-basis: 100%; }
/* 金宝创作框的小按钮：字不换行，放不下就整行换行 */
.ai-tools { flex-wrap: wrap; row-gap: 6px; }
.ai-tool { flex: none; white-space: nowrap; }
.ai-count { margin-left: auto; }

/* ============ 10.30 简洁聊天（像豆包）：员工的话不套气泡，直接是正文；头像和名字在上面一行；老板的话是浅色圆角气泡 ============ */
.chat .row.other .row-body, .chat .row.other.wide .row-body { max-width: 100%; width: 100%; }
.chat .row.other .row-body { gap: 7px; }
.chat .row.me .row-body { max-width: min(82%, 560px); }
.chat .row.first { margin-top: 18px; }
.chat .row.other.first { margin-top: 22px; }
.chat .sender { display: flex; align-items: center; gap: 8px; padding-left: 0; margin-bottom: 0; font-size: calc(14.5px * var(--fs)); color: var(--fg-2); }
.chat .sender b { font-weight: 650; color: var(--fg); }
.chat.wall-ink-light .sender b { color: #fff; }
.chat .sender .av-btn { display: flex; flex: none; padding: 0; border: 0; background: none; border-radius: 50%; }
.chat .sender .av { width: 34px; height: 34px; }
.chat .bubble.md { line-height: 1.75; }
.chat .msg-meta { padding: 0 2px; }
.chat:not(.has-wall) .row.other .bubble.md { background: none; padding: 0 2px; border-radius: 0; box-shadow: none; }
.chat:not(.has-wall) .row.other .bubble.typing { background: none; padding: 10px 2px; }
.chat:not(.has-wall) .row.other .bubble:not(.typing):active { filter: none; }
.chat:not(.has-wall) .row.me .bubble { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--fg); border-radius: 20px; padding: 10px 16px; }
.chat:not(.has-wall) .row.me .bubble .at { color: var(--accent-ink); }
.chat:not(.has-wall) .date-sep span, .chat:not(.has-wall) .sys span { background: none; padding: 2px 0; }
.chat .date-sep { margin: 22px 0 2px; font-size: calc(12.5px * var(--fs)); }
.chat .sys { font-size: calc(12.5px * var(--fs)); }
/* 电脑上鼠标移上去的小工具条：正文占满一行了，放在右上角 */
.chat .row.other .hover-bar { right: 0; transform: none; top: 0; bottom: auto; }

/* ============ 10.30 耳朵「快速获客」：三张一样大的整行大卡，各有自己的颜色和手机画面 ============ */
.pr-smart .pr-hot { background: linear-gradient(135deg, #8b6cf0, #ff7bc2); }
.pr-same .pr-hot { background: linear-gradient(135deg, #0fa89a, #6fdc9f); }
.pr-card.big .pr-tc .tf-rec { background: color-mix(in srgb, var(--a) 75%, #fff); }
.pr-view.smart { transform: rotate(-3deg); }
.pv-stack { position: absolute; left: 50%; top: 40%; translate: -50% -50%; width: 66px; height: 66px; }
.pv-stack i { position: absolute; left: 50%; top: 50%; width: 32px; height: 42px; margin: -21px 0 0 -16px; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, .85); background: linear-gradient(160deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .08)); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .55); }
.pv-stack i:nth-child(1) { transform: translateX(-13px) rotate(-16deg); }
.pv-stack i:nth-child(2) { transform: translateX(13px) rotate(13deg); }
.pv-stack i:nth-child(3) { transform: translateY(-4px); background: linear-gradient(160deg, color-mix(in srgb, var(--a) 55%, #fff), rgba(255, 255, 255, .15)); }
.pv-stack b { position: absolute; right: -2px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--a); box-shadow: 0 0 14px rgba(255, 255, 255, .7); animation: pvBeat 1.6s ease-in-out infinite; }
.pv-stack b .ico { width: 15px; height: 15px; }
.pv-beat { position: absolute; left: 9px; right: 9px; top: 44%; translate: 0 -50%; display: grid; gap: 7px; }
.pv-beat > span { display: flex; align-items: center; gap: 2px; height: 15px; }
.pv-beat em { flex: none; width: 21px; font: 700 calc(8px * var(--fs))/1 ui-monospace, monospace; font-style: normal; opacity: .85; }
.pv-beat i { flex: 1; height: 100%; border-radius: 3px; background: rgba(255, 255, 255, .88); animation: pvBeat 1.2s ease-in-out infinite; }
.pv-beat i:nth-of-type(2) { flex: 1.6; animation-delay: .3s; }
.pv-beat i:nth-of-type(3) { flex: .8; animation-delay: .6s; }
.pv-beat i:nth-of-type(4) { flex: 1.3; animation-delay: .9s; }
.pv-beat > span:last-child i { background: #5eead4; }
.pv-beat::after { content: ""; position: absolute; top: -5px; bottom: -5px; left: 23px; width: 2px; border-radius: 1px; background: #fff; box-shadow: 0 0 8px #fff; animation: pvScan 2.4s linear infinite; }
@keyframes pvScan { from { left: 23px; } to { left: calc(100% - 2px); } }
@container (min-width: 700px) {
  .pr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pr-card.big { grid-column: auto; padding: 22px 14px; column-gap: 10px; }
  .pr-card.big .pr-txt b { font-size: calc(18px * var(--fs)); }
  .pr-card.big .pr-view { width: 84px; }
}

/* ============ 10.32 电脑上更宽、更舒展（老板：电脑端不够大气） ============ */
@media (min-width: 1200px) {
  .chat-inner, .composer-dock { width: min(1120px, 100%); padding-left: 32px; padding-right: 32px; }
  .chat .row.me .row-body { max-width: min(72%, 760px); }
  .page { width: min(1240px, 100%); padding-left: 40px; padding-right: 40px; }
  .page.narrow { width: min(920px, 100%); }
  .bd-page { max-width: 1200px; }
}
@media (min-width: 1600px) {
  .chat-inner, .composer-dock { width: min(1240px, 100%); }
  .page { width: min(1360px, 100%); }
  .bd-page { max-width: 1320px; }
}
/* 做视频的脚本：「AI 写 / 自己写」随时切换 */
.st-mode { display: inline-flex; gap: 3px; padding: 3px; margin-bottom: 12px; border-radius: 12px; background: var(--surface-2); }
.st-mode button { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 14px; border-radius: 9px; font-size: calc(14px * var(--fs)); font-weight: 600; color: var(--fg-2); transition: background .15s, color .15s, box-shadow .15s; }
.st-mode button .ico { width: 15px; height: 15px; }
.st-mode button.on { color: var(--fg); background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.st-mode button.on:first-child { color: var(--accent-ink); }
.st-mode button:disabled { opacity: .7; }
/* 一键智能成片：「剪辑风格和需求」下面的快捷词；做完以后的「换一换」 */
.st-hints { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.st-hints .chip { display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 11px; font-size: calc(13px * var(--fs)); }
.st-hints .chip .ico { width: 12px; height: 12px; opacity: .6; }
.st-redo { margin: 12px 0; padding: 14px; border-radius: 16px; background: var(--surface-2); text-align: left; }
.st-redo-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.st-redo-h .ico { width: 17px; height: 17px; color: var(--accent-ink); }
.st-redo-h b { font-size: calc(15.5px * var(--fs)); }
.st-redo-h span { font-size: calc(12.5px * var(--fs)); color: var(--fg-3); }
.st-redo .st-mrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ml-noth { align-content: center; gap: 4px; }
.ml-noth em { font-style: normal; font-size: calc(11px * var(--fs)); color: var(--warn); }
.ml-fix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.ml-fix span { flex: 1 1 220px; }

/* ============ 10.34 快速获客只剩两张大卡（同城爆流拿掉了）；一键生同款：贴链接、原文案、改写好的文案 ============ */
@container (min-width: 700px) {
  .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-card.big { padding: 24px 18px; column-gap: 14px; }
  .pr-card.big .pr-txt b { font-size: calc(20px * var(--fs)); }
  .pr-card.big .pr-view { width: 96px; }
}
.st-reflink { display: block; }
.st-reflink .st-slot-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.st-link { display: flex; gap: 8px; width: 100%; margin: 8px 0 2px; }
.st-link .input { flex: 1; min-width: 0; }
.st-link .btn { flex: none; }
.st-orig { margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: var(--bg-soft, rgba(127, 127, 127, .08)); font-size: calc(13px * var(--fs)); }
.st-orig summary { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; color: var(--muted, inherit); }
.st-orig summary .ico { width: 14px; height: 14px; }
.st-orig p { margin: 8px 0 2px; line-height: 1.6; white-space: pre-wrap; }
.st-copy { line-height: 1.7; }
.st-sq { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 0; border: 0; background: none; font-size: calc(13px * var(--fs)); color: var(--accent, #8b6cf0); cursor: pointer; }
.st-sq .ico { width: 14px; height: 14px; }

/* ============ 10.36 嘟嘟板块最上面的醒目大卡（爆款拆解仿写）；快速获客只剩一张时占满一行 ============ */
.ft-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 18px; border-radius: 18px; text-align: left; cursor: pointer; color: var(--fg-1, inherit);
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--a) 22%, transparent), transparent 60%), color-mix(in srgb, var(--a) 7%, var(--surface, #fff));
  border: 1.5px solid color-mix(in srgb, var(--a) 55%, transparent); box-shadow: 0 14px 30px -22px var(--a); transition: transform .15s var(--ease-spring, ease), box-shadow .15s; animation: upIn .42s var(--ease-spring, ease) both; }
.ft-card:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -20px var(--a); }
.ft-card:active { transform: scale(.985); }
.ft-ico { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 60%, #ff7a59)); box-shadow: 0 10px 20px -10px var(--a); }
.ft-ico .ico { width: 26px; height: 26px; }
.ft-txt { flex: 1 1 220px; min-width: 0; display: grid; gap: 4px; }
.ft-txt b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: calc(18px * var(--fs)); font-weight: 800; line-height: 1.3; }
.ft-txt > span { font-size: calc(13.5px * var(--fs)); color: var(--fg-3, #777); line-height: 1.45; }
.ft-hot { font-style: normal; font-size: calc(12px * var(--fs)); font-weight: 900; letter-spacing: 1px; padding: 1px 8px; border-radius: 6px; color: #fff; background: linear-gradient(135deg, #ff4d4f, #ff9a3d); transform: rotate(-2deg); }
.ft-go { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 14px; border-radius: 99px; font-size: calc(14px * var(--fs)); font-weight: 700; color: #fff; background: var(--a); }
.ft-go .ico { width: 15px; height: 15px; }
.ft-card { flex-wrap: wrap; }
.ft-go { margin-left: auto; }
@media (max-width: 560px) { .ft-txt { flex-basis: calc(100% - 70px); } .ft-go { margin-left: 66px; } }
.pr-grid > .pr-card.big:only-child { grid-column: 1 / -1; }

/* ============ 10.38 金宝（品牌设计）、耳朵（人事与培训）的简单头图 ============ */
/* 10.38 群聊里「让团队一起干」：团队项目的快捷入口 */
.team-row em { display: inline-flex; align-items: center; gap: 4px; }
.team-row em .ico { width: 13px; height: 13px; }
.chip.ask.team { border-color: color-mix(in srgb, var(--accent, #F95E94) 45%, var(--line)); background: color-mix(in srgb, var(--accent, #F95E94) 8%, var(--surface)); font-weight: 600; }
.chip.ask.team.more { font-weight: 500; background: var(--surface); }

/* ---------- 金宝（销售与推广）：销售作战室 + 优惠券工具卡（10.40） ---------- */
.bd-page.th-sales .bd-sec h2::before { content: "¥"; font-weight: 900; font-size: calc(16px * var(--fs)); color: #e0a021; }
.hm-board { position: relative; overflow: hidden; margin-bottom: 18px; border-radius: 18px; color: #fff; background: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1.4px) 0 0 / 16px 16px, radial-gradient(120% 120% at 100% 0%, rgba(255, 205, 90, .35), transparent 55%), linear-gradient(135deg, #0f7d72, #1aa596 58%, #3cc2a4); box-shadow: 0 20px 40px -24px rgba(10, 90, 80, .75); }
.hm-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px dashed rgba(255, 255, 255, .3); font: 700 calc(11.5px * var(--fs))/1.4 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; letter-spacing: .12em; color: rgba(255, 255, 255, .85); }
.hm-live { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; background: rgba(255, 210, 90, .22); color: #ffe39a; letter-spacing: .06em; }
.hm-live i { width: 7px; height: 7px; border-radius: 50%; background: #ffd25a; box-shadow: 0 0 8px #ffd25a; animation: hmPulse 1.6s ease-in-out infinite; }
@keyframes hmPulse { 50% { opacity: .35; } }
.hm-main { display: flex; align-items: center; gap: 18px; padding: 20px 18px 14px; }
.hm-id { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; }
.hm-id .av.xl { border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .7), 0 0 0 7px rgba(255, 210, 90, .35); }
.hm-board h1 { color: #fff; font-weight: 900; letter-spacing: .04em; }
.hm-board p { color: rgba(255, 255, 255, .92); }
.hm-board p b { color: #fff; }
.hm-board .hm-tag { color: rgba(255, 255, 255, .8); }
.hm-funnel { flex: none; width: 150px; display: grid; justify-items: center; gap: 5px; }
.hm-funnel span { display: flex; align-items: center; justify-content: center; gap: 6px; width: var(--w); height: 30px; border-radius: 6px; background: linear-gradient(90deg, #ffd25a, #ffb23f); color: #6b3d00; font-weight: 800; font-size: calc(13px * var(--fs)); box-shadow: 0 6px 14px -8px rgba(120, 70, 0, .7); transform-origin: center; animation: hmGrow .7s var(--ease-spring) both; }
.hm-funnel span:nth-child(2) { animation-delay: .08s; background: linear-gradient(90deg, #ffe08a, #ffc455); }
.hm-funnel span:nth-child(3) { animation-delay: .16s; background: linear-gradient(90deg, #fff0bf, #ffd98a); }
.hm-funnel em { font: 700 calc(10px * var(--fs)) ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-style: normal; opacity: .65; }
@keyframes hmGrow { from { transform: scaleX(.4); opacity: 0; } }
.th-sales .hm-board .qk { padding: 0 18px 20px; }
.th-sales .qk-hint { color: rgba(255, 255, 255, .85); }
.th-sales .qk-chip { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); color: #fff; }
.th-sales .qk-chip.on { background: #ffd25a; border-color: #ffd25a; color: #5a3300; }
.th-sales .qk-in { background: rgba(255, 255, 255, .96); border-color: transparent; color: #1d2a28; }
.th-sales .qk-in::placeholder { color: #7a8a87; }
.th-sales .qk-go { background: #ffd25a; color: #5a3300; box-shadow: 0 8px 18px -10px rgba(120, 70, 0, .8); }
.bd-page.th-sales .bd-tool { position: relative; display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 14px; background: var(--surface); border: 1px solid color-mix(in srgb, #1aa596 22%, var(--line)); box-shadow: 0 10px 22px -18px rgba(10, 90, 80, .6); }
.bd-page.th-sales .bd-tool:hover { border-color: color-mix(in srgb, #1aa596 55%, var(--line)); }
.tm-stub { position: relative; flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 4px; color: #fff; background: linear-gradient(160deg, #1aa596, #0f7d72); }
.tm-stub .ico { width: 22px; height: 22px; }
.tm-stub em { font-style: normal; font-weight: 800; font-size: calc(12.5px * var(--fs)); letter-spacing: .12em; color: #ffe39a; }
.tm-stub::before, .tm-stub::after { content: ""; position: absolute; right: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, #1aa596 22%, var(--line)); }
.tm-stub::before { top: -7px; } .tm-stub::after { bottom: -7px; }
.tm-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 13px 14px 13px 16px; border-left: 2px dashed color-mix(in srgb, #1aa596 35%, var(--line)); }
.bd-page.th-sales .bd-tool b { font-size: calc(16px * var(--fs)); color: var(--fg); }
.tm-body > span { font-size: calc(13.5px * var(--fs)); line-height: 1.55; color: var(--fg-3); }
@media (max-width: 560px) {
  .hm-top { padding: 9px 14px; font-size: calc(10.5px * var(--fs)); letter-spacing: .06em; }
  .hm-main { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 14px 12px; }
  .hm-funnel { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .hm-funnel span { width: 100%; height: 28px; clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 12% 50%); border-radius: 0; }
  .hm-funnel span:first-child { clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%); }
  .th-sales .hm-board .qk { padding: 0 14px 16px; }
  .tm-stub { width: 52px; } .tm-body { padding: 11px 11px 11px 13px; }
}

/* ---------- 耳朵（产品研发）：新品企划 + 产品企划卡（10.40） ---------- */
.bd-page.th-rd .bd-sec h2::before { content: "✦"; font-size: calc(15px * var(--fs)); color: #8b6cf0; }
.hr-plan { position: relative; overflow: hidden; margin-bottom: 18px; border-radius: 20px; color: #fff; background: radial-gradient(90% 120% at 100% 0%, rgba(255, 170, 220, .45), transparent 60%), radial-gradient(70% 90% at 0% 100%, rgba(120, 200, 255, .28), transparent 60%), linear-gradient(135deg, #5b3fd6, #7d5cf0 55%, #a27cff); box-shadow: 0 22px 44px -26px rgba(70, 40, 170, .8); }
.hr-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 18px; border-bottom: 1px solid rgba(255, 255, 255, .18); font: 700 calc(11.5px * var(--fs))/1.4 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; letter-spacing: .14em; color: rgba(255, 255, 255, .85); }
.hr-new { padding: 2px 9px; border-radius: 99px; background: #fff; color: #6a4fe0; font-weight: 900; letter-spacing: .1em; }
.hr-main { display: flex; align-items: center; gap: 16px; padding: 20px 18px 14px; }
.hr-main > div { flex: 1; min-width: 0; }
.hr-main .av.xl { border-radius: 22px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .75), 0 12px 24px -12px rgba(30, 10, 90, .7); }
.hr-plan h1 { color: #fff; font-weight: 900; letter-spacing: .04em; }
.hr-plan p { color: rgba(255, 255, 255, .92); }
.hr-plan p b { color: #fff; }
.hr-plan .hr-tag { color: rgba(255, 255, 255, .8); }
.hr-cards { position: relative; flex: none; width: 96px; height: 84px; }
.hr-cards i { position: absolute; inset: 6px 14px 6px 14px; border-radius: 12px; background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .35); }
.hr-cards i:nth-child(1) { rotate: -12deg; translate: -10px 2px; }
.hr-cards i:nth-child(2) { rotate: 8deg; translate: 10px 0; }
.hr-cards i:nth-child(3) { display: grid; place-items: center; align-content: center; gap: 4px; background: #fff; border: 0; color: #7d5cf0; box-shadow: 0 12px 22px -10px rgba(30, 10, 90, .6); animation: hrFloat 3.2s ease-in-out infinite; }
.hr-cards em { font-style: normal; font: 900 calc(11px * var(--fs))/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .12em; color: #e05aa0; }
.hr-cards .ico { width: 24px; height: 24px; }
@keyframes hrFloat { 50% { translate: 0 -4px; } }
.hr-road { display: flex; align-items: center; margin: 0 18px 16px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); }
.hr-road span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 750; font-size: calc(13px * var(--fs)); }
.hr-road span .ico { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: #fff; color: #6a4fe0; }
.hr-road span:last-child .ico { background: #ffd56b; color: #6b4300; }
.hr-road em { font-style: normal; }
.hr-road i { flex: 1; min-width: 10px; height: 2px; margin: 0 8px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .3)); }
.th-rd .hr-plan .qk { padding: 0 18px 20px; }
.th-rd .qk-hint { color: rgba(255, 255, 255, .85); }
.th-rd .qk-chip { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); color: #fff; }
.th-rd .qk-chip.on { background: #fff; border-color: #fff; color: #5b3fd6; }
.th-rd .qk-in { background: rgba(255, 255, 255, .96); border-color: transparent; color: #241d3a; }
.th-rd .qk-in::placeholder { color: #8a82a6; }
.th-rd .qk-go { background: #ffd56b; color: #5a3a00; box-shadow: 0 8px 18px -10px rgba(90, 50, 0, .7); }
.bd-page.th-rd .bd-tool { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px; overflow: hidden; border-radius: 16px; background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, #8b6cf0 10%, transparent), transparent 60%), var(--surface); border: 1px solid color-mix(in srgb, #8b6cf0 20%, var(--line)); box-shadow: 0 12px 24px -20px rgba(70, 40, 170, .6); }
.bd-page.th-rd .bd-tool:hover { border-color: color-mix(in srgb, #8b6cf0 55%, var(--line)); }
.tr-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.tr-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #6a4fe0, #a27cff); box-shadow: 0 8px 16px -10px rgba(90, 60, 220, .9); }
.tr-ico .ico { width: 20px; height: 20px; }
.tr-pill { padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, #8b6cf0 13%, var(--surface)); color: color-mix(in srgb, #6a4fe0 85%, var(--fg)); font-size: calc(11.5px * var(--fs)); font-weight: 700; white-space: nowrap; }
.bd-page.th-rd .bd-tool b { font-size: calc(16px * var(--fs)); color: var(--fg); }
.bd-page.th-rd .bd-tool .tr-desc { font-size: calc(13.5px * var(--fs)); line-height: 1.55; color: var(--fg-3); }
.bd-page.th-rd .bd-tool > span.tr-dots { display: flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 12px; }
.tr-dots i { width: 18px; height: 5px; border-radius: 3px; background: color-mix(in srgb, #8b6cf0 18%, var(--line)); }
.tr-dots i.on { background: linear-gradient(90deg, #6a4fe0, #a27cff); }
.tr-dots em { margin-left: 4px; font-style: normal; font-size: calc(11.5px * var(--fs)); color: var(--fg-3); }
@media (max-width: 560px) {
  .hr-top { padding: 9px 14px; font-size: calc(10.5px * var(--fs)); letter-spacing: .08em; }
  .hr-main { padding: 16px 14px 12px; gap: 12px; }
  .hr-cards { width: 70px; height: 66px; }
  .hr-road { margin: 0 14px 14px; padding: 8px 10px; }
  .hr-road span { flex-direction: column; gap: 3px; font-size: calc(12px * var(--fs)); }
  .hr-road i { margin: 0 4px 16px; }
  .th-rd .hr-plan .qk { padding: 0 14px 16px; }
  .bd-page.th-rd .bd-tool { padding: 12px; }
}

/* ---------- 10.44：工作台（预览 / 文件）右上角醒目的红色关闭按钮，电脑和手机都显示（老板 2026-10-24） ---------- */
.panel-tabbar .panel-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; margin: 0 6px 0 8px; border-radius: 50%; background: #ff3b30; color: #fff; box-shadow: 0 4px 14px rgba(255, 59, 48, .45), 0 0 0 3px rgba(255, 59, 48, .18); }
.panel-tabbar .panel-close:hover { background: #e62e24; color: #fff; }
.panel-tabbar .panel-close:active { transform: scale(.92); }
.panel-tabbar .panel-close .ico { width: 22px; height: 22px; stroke-width: 2.8; }
@media (max-width: 900px) { .panel-tabbar .panel-close { width: 44px; height: 44px; margin-right: 8px; } .panel-tabbar .panel-close .ico { width: 24px; height: 24px; } }

/* ---------- 10.44.2：输入框和聊天背景拉开对比（老板 2026-10-29：背景和输入框一个颜色，看不出哪里能打字） ----------
   以前浅色是白底配 #f7f6f8 的背景、深色是 #1d1b22 配 #141217，边框也几乎看不见。
   现在输入框像一张浮起来的卡片：边框加粗、带一点品牌粉，底下一圈柔和的阴影；深色主题里输入框比背景亮一截。 */
:root {
  --composer-bg: #ffffff;
  --composer-line: color-mix(in srgb, var(--accent) 28%, #cfc8d6);
  --composer-shadow: 0 8px 22px -8px rgba(229, 68, 125, .22), 0 2px 6px rgba(40, 24, 56, .08);
}
:root[data-theme="dark"] {
  --composer-bg: #302b38;
  --composer-line: color-mix(in srgb, var(--accent) 34%, #4d4756);
  --composer-shadow: 0 10px 28px -8px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --composer-bg: #302b38;
    --composer-line: color-mix(in srgb, var(--accent) 34%, #4d4756);
    --composer-shadow: 0 10px 28px -8px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
}
.composer, .composer:focus-within { background: var(--composer-bg); border: 1.5px solid var(--composer-line); box-shadow: var(--composer-shadow); }
.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 70%, var(--composer-line)); box-shadow: var(--composer-shadow), 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.chat.has-wall .composer { background: color-mix(in srgb, var(--composer-bg) 96%, transparent); border-color: var(--composer-line); box-shadow: var(--composer-shadow); }
.composer textarea::placeholder { color: color-mix(in srgb, var(--fg-3) 85%, var(--fg)); }

/* ---------- 10.44.3：员工的话也有底框（老板 2026-10-29：员工发出来的消息和背景一个颜色，看不出是一条消息） ----------
   10.30 起员工的话不套气泡、直接是正文；现在改回浅色卡片：浅色主题白底 + 细边框 + 很淡的阴影，深色主题比背景亮一截。
   头像和名字还在上面一行，第一段的左上角收成小圆角指向名字；老板的话还是粉色气泡；选了背景图的照旧用原来的气泡。 */
:root { --bubble-ai: #ffffff; --bubble-ai-line: #e4dfe9; --bubble-ai-shadow: 0 1px 2px rgba(40, 24, 56, .05), 0 6px 16px -10px rgba(40, 24, 56, .22); }
:root[data-theme="dark"] { --bubble-ai: #26222d; --bubble-ai-line: #3a3442; --bubble-ai-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bubble-ai: #26222d; --bubble-ai-line: #3a3442; --bubble-ai-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
}
.chat:not(.has-wall) .row.other .bubble.md, .chat:not(.has-wall) .row.other .bubble.typing { background: var(--bubble-ai); border: 1px solid var(--bubble-ai-line); box-shadow: var(--bubble-ai-shadow); border-radius: 20px; }
.chat:not(.has-wall) .row.other .bubble.md { padding: 11px 16px; }
.chat:not(.has-wall) .row.other .bubble.typing { padding: 12px 16px; }
.chat:not(.has-wall) .row.other .bubble.b-top { border-top-left-radius: 6px; }
.chat:not(.has-wall) .row.other .bubble.md .code-block, .chat:not(.has-wall) .row.other .bubble.md .table-wrap { background: var(--code-bg); }

/* 备案号（10.45.2）：登录页、启动页、设置「关于」最下面，小字灰色，点了打开工信部备案网站 */
.beian { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; padding: 14px 16px 4px; font-size: calc(12px * var(--fs)); }
.beian a { color: var(--fg-3); text-decoration: none; }
.beian a:hover { text-decoration: underline; }
.boot .beian { position: fixed; left: 0; right: 0; bottom: max(12px, env(safe-area-inset-bottom)); }

/* ---------- 10.46：聊天背景更有层次、输入框改成中性色（老板 2026-10-31：背景太单调，粉色输入框改正常一些） ----------
   没选背景图时：浅色是带一点品牌粉、淡紫、薄荷的柔光渐变，叠一层很淡的点阵；深色是同样的柔光、压暗。
   输入框：灰色细边框、柔和阴影，点进去时边框稍微加深，不再是粉色。选了背景图的照旧。 */
:root {
  --chat-bg-light: radial-gradient(rgba(70, 50, 100, .05) 1px, transparent 1.4px) 0 0 / 22px 22px,
    radial-gradient(62% 46% at 0% 0%, rgba(255, 158, 196, .26), transparent 72%),
    radial-gradient(56% 42% at 100% 16%, rgba(170, 150, 255, .22), transparent 72%),
    radial-gradient(70% 48% at 18% 100%, rgba(120, 214, 214, .18), transparent 72%),
    radial-gradient(50% 38% at 100% 100%, rgba(255, 200, 160, .16), transparent 72%),
    linear-gradient(180deg, #fbfafd 0%, #f3f1f8 100%);
  --chat-bg-dark: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.4px) 0 0 / 22px 22px,
    radial-gradient(62% 46% at 0% 0%, rgba(249, 94, 148, .17), transparent 72%),
    radial-gradient(56% 42% at 100% 16%, rgba(124, 92, 255, .17), transparent 72%),
    radial-gradient(70% 48% at 18% 100%, rgba(42, 178, 190, .10), transparent 72%),
    linear-gradient(180deg, #17151c 0%, #121016 100%);
  --chat-bg: var(--chat-bg-light);
  --composer-line: #dbd6e2;
  --composer-shadow: 0 6px 18px -8px rgba(30, 20, 50, .2), 0 1px 3px rgba(30, 20, 50, .06);
  --composer-focus: #b9b2c4;
}
:root[data-theme="dark"] { --chat-bg: var(--chat-bg-dark); --composer-line: #48424f; --composer-shadow: 0 10px 28px -8px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05); --composer-focus: #6a6374; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --chat-bg: var(--chat-bg-dark); --composer-line: #48424f; --composer-shadow: 0 10px 28px -8px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05); --composer-focus: #6a6374; }
}
.chat:not(.has-wall) { background: var(--chat-bg); }
.composer:focus-within { border-color: var(--composer-focus); box-shadow: var(--composer-shadow), 0 0 0 3px rgba(120, 110, 140, .12); }

/* 10.46 登录页右上角「先不登录」；添加到主屏幕引导 */
.g-close { margin-left: auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--fg-3); }
.g-close .ico { width: 22px; height: 22px; }
.g-close:active { background: var(--surface-2); }
.a2hs p { margin: 0 0 12px; line-height: 1.6; }
.a2hs-tip { padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--fg); }
.a2hs-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.a2hs-steps li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.55; }
.a2hs-steps b { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--accent); color: #fff; }
.a2hs-steps em { font-style: normal; font-weight: 600; color: var(--fg); }

/* ---------- 10.47 每日签到卡片（老板给的样式：白卡片、两排圆圈打勾、黑色按钮、下面一个关闭圈） ---------- */
.ck-mask { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 20px; background: rgba(20, 16, 28, .42); opacity: 0; transition: opacity .25s ease; }
.ck-mask.in { opacity: 1; }
.ck-card { position: relative; width: min(340px, 100%); padding: 22px 18px 18px; border-radius: 24px; background: #fff; color: #18151d; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .45); overflow: hidden; transform: translateY(16px) scale(.96); transition: transform .3s cubic-bezier(.2, .9, .3, 1.2); }
.ck-mask.in .ck-card { transform: none; }
.ck-deco { position: absolute; right: -14px; top: -10px; width: 92px; height: 92px; border-radius: 26px; transform: rotate(14deg); opacity: .9; filter: drop-shadow(0 8px 16px rgba(249, 94, 148, .35)); }
.ck-card h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; }
.ck-card p { margin: 0 0 26px; font-size: 15px; color: #6f6878; }
.ck-card p em { font-style: normal; color: var(--accent); font-weight: 600; margin: 0 2px; }
.ck-row { display: flex; justify-content: center; align-items: flex-start; margin-bottom: 20px; }
.ck-item { display: grid; justify-items: center; gap: 8px; width: 46px; }
.ck-item i { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #ddd8e3; display: grid; place-items: center; color: #fff; }
.ck-item i .ico { width: 18px; height: 18px; stroke-width: 2.6; }
.ck-item span { font-size: 14px; color: #a39cab; font-variant-numeric: tabular-nums; }
.ck-item.on i { background: var(--accent); border-color: var(--accent); }
.ck-item.on span { color: var(--accent); font-weight: 600; }
.ck-item.now i { animation: ck-pop .6s .25s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes ck-pop { 0% { transform: scale(.4); opacity: .3; } 60% { transform: scale(1.18); } 100% { transform: none; opacity: 1; } }
.ck-dots { flex: none; width: 22px; height: 30px; background: radial-gradient(circle, #d6d1dc 1.1px, transparent 1.4px) 0 50% / 5px 3px repeat-x; }
.ck-go { width: 100%; height: 50px; margin-top: 6px; border-radius: 14px; background: #18151d; color: #fff; font-size: 17px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 4px; }
.ck-go .ico { width: 20px; height: 20px; }
.ck-go:active { transform: scale(.98); }
.ck-x { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); color: #fff; display: grid; place-items: center; background: transparent; }
.ck-x .ico { width: 22px; height: 22px; }
.w-ck { float: right; display: inline-flex; align-items: center; gap: 6px; margin: -48px 0 12px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; color: var(--fg); }
.w-ck .ico { width: 18px; height: 18px; color: var(--accent); }