/* TVLab 全站样式 v2（2026-10-27 改版：苹果式排版 + 毛玻璃 + 彩色图标）
   颜色全部走变量；深色模式：跟随系统，或 <html data-theme="dark|light"> 手动指定。 */

:root {
  --bg: #F5F5F7;
  --surface: #FFFFFF;
  --surface-2: #FBFBFD;
  --fill: rgba(0, 0, 0, .045);
  --fill-2: rgba(0, 0, 0, .08);
  --ink: #1D1D1F;
  --ink-2: #424245;
  --muted: #6E6E73;
  --line: rgba(0, 0, 0, .08);
  --line-soft: rgba(0, 0, 0, .05);
  --primary: #0071E3;
  --primary-ink: #0066CC;
  --primary-weak: rgba(0, 113, 227, .10);
  --on-primary: #FFFFFF;
  --glass: rgba(255, 255, 255, .72);
  --glass-card: rgba(255, 255, 255, .62);
  --glass-line: rgba(255, 255, 255, .7);
  --hdr-line: rgba(0, 0, 0, .08);
  --shadow: 0 2px 10px rgba(0, 0, 0, .04), 0 8px 28px rgba(0, 0, 0, .05);
  --shadow-h: 0 4px 14px rgba(0, 0, 0, .06), 0 18px 48px rgba(0, 0, 0, .10);
  --glow-1: rgba(0, 113, 227, .20);
  --glow-2: rgba(175, 82, 222, .18);
  --glow-3: rgba(255, 55, 95, .14);
  --glow-4: rgba(52, 199, 89, .12);
  /* 图标底色（苹果系统色）与对应的文字色 */
  --c-short: #FF375F; --t-short: #C4003A;
  --c-drama: #AF52DE; --t-drama: #8A2BB9;
  --c-tools: #30B0C7; --t-tools: #0A6E80;
  --c-ask:   #FF9500; --t-ask:   #A65400;
  --c-edu:   #007AFF; --t-edu:   #0057B8;
  --c-fun:   #FFB800; --t-fun:   #845A00;
  --c-sus:   #5856D6; --t-sus:   #3F3DB8;
  --c-cry:   #FF2D55; --t-cry:   #C2003C;
  --c-fresh: #34C759; --t-fresh: #1F7A36;
  --c-gray:  #8E8E93;
  --vote: #FF6B00;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --surface: #1C1C1E; --surface-2: #161618;
    --fill: rgba(255, 255, 255, .07); --fill-2: rgba(255, 255, 255, .12);
    --ink: #F5F5F7; --ink-2: #D2D2D7; --muted: #98989D;
    --line: rgba(255, 255, 255, .10); --line-soft: rgba(255, 255, 255, .06);
    --primary: #2997FF; --primary-ink: #64B5FF; --primary-weak: rgba(41, 151, 255, .16); --on-primary: #FFFFFF;
    --glass: rgba(22, 22, 24, .72); --glass-card: rgba(44, 44, 46, .55); --glass-line: rgba(255, 255, 255, .08); --hdr-line: rgba(255, 255, 255, .08);
    --shadow: 0 2px 10px rgba(0, 0, 0, .3); --shadow-h: 0 10px 40px rgba(0, 0, 0, .5);
    --glow-1: rgba(41, 151, 255, .22); --glow-2: rgba(191, 90, 242, .20); --glow-3: rgba(255, 55, 95, .14); --glow-4: rgba(48, 209, 88, .10);
    --t-short: #FF6482; --t-drama: #DA8FFF; --t-tools: #70D7EA; --t-ask: #FFB340;
    --t-edu: #64B5FF; --t-fun: #FFD60A; --t-sus: #9D9BFF; --t-cry: #FF6482; --t-fresh: #63DA7E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --surface: #1C1C1E; --surface-2: #161618;
  --fill: rgba(255, 255, 255, .07); --fill-2: rgba(255, 255, 255, .12);
  --ink: #F5F5F7; --ink-2: #D2D2D7; --muted: #98989D;
  --line: rgba(255, 255, 255, .10); --line-soft: rgba(255, 255, 255, .06);
  --primary: #2997FF; --primary-ink: #64B5FF; --primary-weak: rgba(41, 151, 255, .16); --on-primary: #FFFFFF;
  --glass: rgba(22, 22, 24, .72); --glass-card: rgba(44, 44, 46, .55); --glass-line: rgba(255, 255, 255, .08); --hdr-line: rgba(255, 255, 255, .08);
  --shadow: 0 2px 10px rgba(0, 0, 0, .3); --shadow-h: 0 10px 40px rgba(0, 0, 0, .5);
  --glow-1: rgba(41, 151, 255, .22); --glow-2: rgba(191, 90, 242, .20); --glow-3: rgba(255, 55, 95, .14); --glow-4: rgba(48, 209, 88, .10);
  --t-short: #FF6482; --t-drama: #DA8FFF; --t-tools: #70D7EA; --t-ask: #FFB340;
  --t-edu: #64B5FF; --t-fun: #FFD60A; --t-sus: #9D9BFF; --t-cry: #FF6482; --t-fresh: #63DA7E;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; letter-spacing: -0.003em; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary); }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.015em; }
p { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
svg { flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--primary-weak); outline-offset: 2px; border-radius: 8px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ---------- 图标方块（彩色圆角底 + 白色线条图标） ---------- */
.ic { --c: var(--c-gray); width: 40px; height: 40px; border-radius: 11px; background: var(--c); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .06); }
.ic svg { width: 22px; height: 22px; }
.ic.sm { width: 28px; height: 28px; border-radius: 8px; }
.ic.sm svg { width: 16px; height: 16px; }
.ic.lg { width: 56px; height: 56px; border-radius: 15px; }
.ic.lg svg { width: 30px; height: 30px; }
.ic.fun { color: #3A2A00; }
.k-short { --c: var(--c-short); --t: var(--t-short); } .k-drama { --c: var(--c-drama); --t: var(--t-drama); }
.k-tools { --c: var(--c-tools); --t: var(--t-tools); } .k-ask { --c: var(--c-ask); --t: var(--t-ask); }
.k-edu { --c: var(--c-edu); --t: var(--t-edu); } .k-fun { --c: var(--c-fun); --t: var(--t-fun); }
.k-sus { --c: var(--c-sus); --t: var(--t-sus); } .k-cry { --c: var(--c-cry); --t: var(--t-cry); }
.k-fresh { --c: var(--c-fresh); --t: var(--t-fresh); }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--t, var(--muted)); }
.tag svg { width: 14px; height: 14px; }
.pill-sample { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--fill); padding: 2px 8px; border-radius: 999px; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--fill); color: var(--t, var(--ink-2)); }
.b-short { --t: var(--t-short); } .b-drama { --t: var(--t-drama); } .b-tools { --t: var(--t-tools); } .b-ask { --t: var(--t-ask); }
.b-partner { --t: var(--t-ask); background: rgba(255, 149, 0, .12); }

/* ---------- 毛玻璃页头 ---------- */
.tv-hdr { position: sticky; top: 0; z-index: 50; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: .5px solid var(--hdr-line); }
.tv-hdr-in { max-width: 1200px; margin: 0 auto; padding: 0 22px; height: 56px; display: flex; align-items: center; gap: 8px 22px; }
.tv-logo { display: flex; align-items: center; gap: 7px; flex-shrink: 0; color: var(--ink); }
.tv-logo:hover { color: var(--ink); }
.tv-logo svg { width: 26px; height: 26px; }
.tv-logo b { font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.tv-nav { display: flex; gap: 2px; font-size: 14px; font-weight: 500; overflow-x: auto; scrollbar-width: none; }
.tv-nav::-webkit-scrollbar { display: none; }
.tv-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; white-space: nowrap; color: var(--ink-2); }
.tv-nav a svg { width: 16px; height: 16px; opacity: .85; }
.tv-nav a:hover { color: var(--ink); background: var(--fill); }
.tv-nav a[aria-current="page"] { color: var(--ink); background: var(--fill-2); }
.tv-search { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; position: relative; }
.tv-search svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.tv-search input { flex: 1; min-width: 0; font-size: 14px; padding: 9px 14px 9px 34px; border: none; border-radius: 999px; background: var(--fill); outline: none; }
.tv-search input:focus { background: var(--surface); box-shadow: 0 0 0 3px var(--primary-weak); }
.tv-hdr-act { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.tv-icon-btn { width: 36px; height: 36px; border-radius: 999px; border: none; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-2); }
.tv-icon-btn:hover { background: var(--fill); }
.tv-icon-btn svg { width: 19px; height: 19px; }
.tv-menu-btn { display: none; }

/* ---------- 按钮 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 500; border-radius: 999px; padding: 9px 18px; min-height: 40px; border: none; cursor: pointer; white-space: nowrap; transition: background .15s, transform .15s; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { color: var(--on-primary); background: var(--primary-ink); }
.btn-line { background: var(--fill); color: var(--ink); }
.btn-line:hover { background: var(--fill-2); color: var(--ink); }
.btn-soft { background: var(--primary-weak); color: var(--primary-ink); }
.btn-soft:hover { color: var(--primary-ink); filter: brightness(.97); }
.btn-white { background: #FFFFFF; color: #1D1D1F; }
.btn-white:hover { color: #1D1D1F; background: #F2F2F4; }
.btn-block { display: flex; width: 100%; }
.btn-sm { font-size: 13px; padding: 6px 13px; min-height: 32px; }
.link { color: var(--primary); display: inline-flex; align-items: center; gap: 3px; font-weight: 500; }
.link svg { width: 14px; height: 14px; }

/* ---------- 版式 ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 22px; }
.section { padding: 44px 0 0; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 16px; margin-bottom: 18px; }
.sec-head h2 { font-size: 28px; font-weight: 700; }
.sec-head p { margin-top: 4px; color: var(--muted); font-size: 15px; }
.card { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
a.card:hover, .card.hov:hover { transform: translateY(-2px); box-shadow: var(--shadow-h); color: inherit; }
.layout { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.col-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.col-right { flex: 1 1 300px; max-width: 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.col-left { display: none; }
.panel { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); padding: 20px; }
.panel-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.panel-h h2 { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.list > * { display: block; padding: 11px 0; border-top: .5px solid var(--line); }
.list > *:first-child { border-top: none; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); padding-top: 18px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--primary); }
.crumbs svg { width: 12px; height: 12px; opacity: .6; }
.crumbs span[aria-current] { color: var(--ink); }

/* ---------- 首页大标题（光晕 + 毛玻璃） ---------- */
.hero { position: relative; overflow: hidden; padding: 76px 0 40px; text-align: center; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 140%; z-index: -1;
  background:
    radial-gradient(38% 46% at 22% 30%, var(--glow-1), transparent 70%),
    radial-gradient(34% 42% at 78% 22%, var(--glow-2), transparent 70%),
    radial-gradient(30% 40% at 62% 78%, var(--glow-3), transparent 70%),
    radial-gradient(28% 36% at 30% 86%, var(--glow-4), transparent 70%); }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--glass-card); border: .5px solid var(--glass-line); padding: 6px 14px; border-radius: 999px; box-shadow: var(--shadow); }
.eyebrow svg { width: 15px; height: 15px; color: var(--c-drama); }
.hero h1 { margin-top: 18px; font-size: clamp(36px, 6vw, 60px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, #0071E3, #AF52DE 55%, #FF375F); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .sub { margin: 16px auto 0; max-width: 640px; font-size: clamp(17px, 2vw, 21px); color: var(--muted); line-height: 1.5; }
.hero-search { margin: 28px auto 0; max-width: 620px; display: flex; align-items: center; gap: 8px; background: var(--glass-card); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border: .5px solid var(--glass-line); border-radius: 999px; padding: 7px 7px 7px 20px; box-shadow: var(--shadow-h); }
.hero-search svg { width: 20px; height: 20px; color: var(--muted); }
.hero-search input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 17px; padding: 10px 4px; outline: none; }
.quick { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; padding: 7px 14px; border-radius: 999px; background: var(--glass-card); border: .5px solid var(--glass-line); color: var(--ink-2); }
.chip svg { width: 15px; height: 15px; color: var(--t, var(--muted)); }
.chip:hover { color: var(--ink); background: var(--surface); }
.chip.on, .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.tiles { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; text-align: left; }
.tile { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 22px; background: var(--glass-card); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border: .5px solid var(--glass-line); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); color: inherit; }
.tile b { font-size: 20px; font-weight: 700; }
.tile span { font-size: 14px; color: var(--muted); line-height: 1.5; }
.tile .link { margin-top: auto; font-size: 14px; }

/* ---------- 海报横滑带 ---------- */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(168px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 18px; margin: 0 -4px; scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }
.pcard { display: block; }
.poster-box { position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); color: #FFFFFF; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; transition: transform .25s, box-shadow .25s; }
.poster-box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .55)); }
.poster-box > * { position: relative; z-index: 1; }
.poster-box .play { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 999px; background: rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 2; }
.poster-box .play svg { width: 16px; height: 16px; }
.poster-box b { font-size: 17px; font-weight: 700; line-height: 1.3; text-shadow: 0 1px 8px rgba(0, 0, 0, .3); }
.poster-box small { font-size: 12px; opacity: .85; }
.pcard:hover .poster-box { transform: translateY(-3px) scale(1.01); box-shadow: var(--shadow-h); }
.pcard .pmeta { margin-top: 10px; }
.pcard .pmeta b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.pcard .pmeta span { font-size: 13px; color: var(--muted); }
.poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 22px 16px; }

/* ---------- 剧情灵感卡 ---------- */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.idea { display: flex; flex-direction: column; padding: 22px; gap: 12px; }
.idea-top { display: flex; align-items: center; gap: 10px; }
.idea-top .tag { font-size: 13px; }
.idea-top .fmt { margin-left: auto; font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.idea-top .fmt svg { width: 13px; height: 13px; }
.idea h3 { font-size: 21px; font-weight: 700; }
.quote { position: relative; font-size: 16px; line-height: 1.65; color: var(--ink); padding: 14px 16px 14px 42px; background: var(--fill); border-radius: 14px; }
.quote svg { position: absolute; left: 14px; top: 15px; width: 18px; height: 18px; color: var(--t, var(--muted)); }
.idea-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.idea-foot .acts { display: flex; gap: 6px; }

/* ---------- 题材 / 市场格 ---------- */
.genre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.genre { display: flex; align-items: center; gap: 12px; padding: 14px; }
.genre b { font-size: 15px; font-weight: 600; }
.region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.region { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.region .code { width: 40px; height: 40px; border-radius: 11px; background: var(--fill-2); color: var(--ink); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; letter-spacing: .02em; }
.region b { font-size: 16px; }
.region span { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ---------- 动态流 ---------- */
.feed-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--fill); }
.seg button { font-size: 14px; font-weight: 500; border: none; border-radius: 999px; padding: 7px 15px; min-height: 34px; background: transparent; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg button svg { width: 15px; height: 15px; }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.post { display: flex; gap: 16px; padding: 20px; }
.post[hidden] { display: none; }
.post-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.post-meta .dot { opacity: .5; }
.post h3 { font-size: 19px; font-weight: 700; line-height: 1.35; }
.post-ex { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.post-act { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 13px; color: var(--muted); }
.post-act .st { display: inline-flex; align-items: center; gap: 5px; }
.post-act .st svg { width: 16px; height: 16px; }
.post-act .st.up svg { color: var(--vote); }
.post-act .btn { margin-left: auto; }
/* 首页“最新动态”紧凑版：去掉金句框、摘要两行截断、缩略图变小；一次显示 8 条，“展开更多”再加 */
.feed-compact { display: flex; flex-direction: column; gap: 10px; }
.feed-compact .post { padding: 14px 16px; gap: 14px; }
.feed-compact .post-main { gap: 6px; }
.feed-compact .post h3 { font-size: 16.5px; line-height: 1.4; }
.feed-compact .post .quote { display: none; }
.feed-compact .post-ex { font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed-compact .post-meta { font-size: 12.5px; gap: 6px; }
.feed-compact .post-meta .ic.sm { width: 22px; height: 22px; border-radius: 7px; }
.feed-compact .post-meta .ic.sm svg { width: 13px; height: 13px; }
.feed-compact .post-act { font-size: 12.5px; }
.feed-compact .post-act .btn-sm { min-height: 28px; padding: 4px 12px; font-size: 12.5px; }
.feed-compact .thumb { width: 60px; border-radius: 10px; font-size: 0; padding: 0; }
.feed-more { align-self: center; margin-top: 4px; }
.feed-more[hidden] { display: none; }
.feed-more svg { transform: rotate(90deg); }
.thumb { width: 92px; flex-shrink: 0; aspect-ratio: 9 / 16; align-self: flex-start; border-radius: 12px; color: #FFFFFF; display: flex; align-items: flex-end; padding: 8px; font-size: 11px; font-weight: 700; line-height: 1.3; position: relative; overflow: hidden; }
.thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .5)); }
.thumb span { position: relative; z-index: 1; }

/* 右栏 */
.rank-row { display: grid !important; grid-template-columns: 22px 42px minmax(0, 1fr); gap: 12px; align-items: center; }
.rank-row .n { font-weight: 700; color: var(--muted); font-size: 15px; }
.rank-row .n.top { color: var(--vote); }
.mini-poster { width: 42px; aspect-ratio: 9 / 16; border-radius: 8px; display: block; }
.promo { position: relative; overflow: hidden; border-radius: 22px; padding: 24px; color: #FFFFFF; background: #1D1D1F; }
.promo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 85% 10%, rgba(41, 151, 255, .55), transparent 70%), radial-gradient(50% 60% at 10% 100%, rgba(191, 90, 242, .45), transparent 70%); }
.promo > * { position: relative; }
.promo .k { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .75); }
.promo .k svg { width: 14px; height: 14px; }
.promo h2 { margin-top: 8px; font-size: 22px; font-weight: 700; }
.promo p { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .78); line-height: 1.55; }
.promo .btn { margin-top: 16px; }

/* ---------- 频道页头 ---------- */
.ch-hero { position: relative; overflow: hidden; padding: 40px 0 26px; }
.ch-hero::before { content: ""; position: absolute; inset: -40% -10% auto; height: 180%; z-index: -1; background: radial-gradient(36% 50% at 15% 30%, var(--glow, var(--glow-1)), transparent 70%), radial-gradient(30% 40% at 85% 10%, var(--glow-2), transparent 70%); }
.ch-hero.k-short { --glow: rgba(255, 55, 95, .18); } .ch-hero.k-drama { --glow: rgba(175, 82, 222, .20); } .ch-hero.k-tools { --glow: rgba(48, 176, 199, .22); }
.ch-hero-in { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ch-hero h1 { font-size: clamp(30px, 4.5vw, 44px); font-weight: 700; letter-spacing: -0.025em; }
.ch-hero p { margin-top: 6px; color: var(--muted); font-size: 17px; max-width: 680px; }
.ch-tabs { margin-top: 22px; }

/* ---------- 短剧详情 ---------- */
.show-hero { position: relative; overflow: hidden; border-radius: 28px; padding: 28px; display: flex; flex-wrap: wrap; gap: 28px; color: #FFFFFF; background: var(--pc, #2C2F5A); box-shadow: var(--shadow-h); margin-top: 14px; }
.show-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 90% 0%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .45)); }
.show-hero > * { position: relative; }
.show-hero .poster-box { flex: 0 0 220px; width: 220px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.show-info { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.show-info h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 700; }
.glass-row { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.gpill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: .5px solid rgba(255, 255, 255, .25); color: #FFFFFF; }
.gpill svg { width: 14px; height: 14px; }
.gpill:hover { color: #FFFFFF; background: rgba(255, 255, 255, .26); }
.score { display: flex; align-items: center; gap: 12px; }
.score b { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; }
.score .stars { display: flex; gap: 2px; color: #FFD60A; }
.score .stars svg { width: 16px; height: 16px; fill: currentColor; }
.lede { font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .9); max-width: 640px; }
.watch { display: flex; flex-wrap: wrap; gap: 10px; }
.watch .btn { background: rgba(255, 255, 255, .92); color: #1D1D1F; }
.watch .btn.dis { background: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .8); cursor: default; }
.likeit { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 22px; }
.likeit p { color: var(--muted); font-size: 14px; margin-top: 4px; }
.tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--fill); margin: 18px 20px 0; }
.tabs button { font-size: 14px; font-weight: 500; background: none; border: none; border-radius: 999px; padding: 8px 16px; min-height: 36px; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tabs button svg { width: 15px; height: 15px; }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.tabpanel { padding: 18px 20px 22px; }
.tabpanel[hidden] { display: none; }
.ep { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: .5px solid var(--line); }
.ep:first-of-type { border-top: none; }
.ep .ic { --c: var(--fill-2); color: var(--ink); width: 34px; height: 34px; font-size: 13px; font-weight: 700; }
.ep b { font-size: 15px; }
.ep p { margin-top: 3px; font-size: 14px; color: var(--ink-2); }

/* ---------- 剧情：连载 ---------- */
.grid-novels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.novel { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.novel .t { font-family: var(--serif); font-size: 24px; font-weight: 700; }
.novel .meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.bar { height: 5px; border-radius: 999px; background: var(--fill-2); overflow: hidden; }
.bar i { display: block; height: 5px; background: linear-gradient(90deg, var(--c-drama), var(--c-short)); border-radius: 999px; }
.row-link { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.trope-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.trope { display: flex; gap: 12px; align-items: center; padding: 16px; }
.trope .n { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.trope b { display: block; font-size: 15px; }
.trope span { font-size: 13px; color: var(--muted); }

/* 灵感卡详情 */
.hook-box { position: relative; overflow: hidden; border-radius: 22px; padding: 24px; color: #FFFFFF; background: #1D1D1F; }
.hook-box::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 80% at 100% 0%, rgba(175, 82, 222, .5), transparent 70%); }
.hook-box > * { position: relative; }
.hook-box small { font-family: var(--mono); font-size: 12px; color: rgba(255, 255, 255, .7); display: inline-flex; gap: 6px; align-items: center; }
.hook-box small svg { width: 14px; height: 14px; }
.hook-box p { margin-top: 10px; font-size: 22px; font-weight: 600; line-height: 1.5; }
.shots { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 680px; }
.shots th { text-align: left; color: var(--muted); font-size: 12px; font-weight: 600; padding: 12px 14px; border-bottom: .5px solid var(--line); }
.shots td { border-top: .5px solid var(--line-soft); padding: 13px 14px; vertical-align: top; line-height: 1.6; }
.shots td:first-child { font-family: var(--mono); color: var(--c-drama); font-weight: 600; }
.shots td:nth-child(2) { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.scroll-x { overflow-x: auto; }

/* ---------- 工具 ---------- */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.tool { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.tool-top { display: flex; gap: 14px; align-items: center; }
.tool-logo { width: 52px; height: 52px; border-radius: 14px; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; flex-shrink: 0; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .1); }
.tool-top h3 { font-size: 19px; font-weight: 700; }
.tool-top .score-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 15px; }
.tool-top .score-pill svg { width: 15px; height: 15px; color: #FFB800; fill: currentColor; }
.tool p.one { font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.pc { display: grid; gap: 8px; font-size: 14px; }
.pc div { display: flex; gap: 8px; align-items: flex-start; line-height: 1.55; }
.pc svg { width: 17px; height: 17px; margin-top: 2px; }
.pc .g svg { color: var(--c-fresh); } .pc .b svg { color: var(--c-ask); }
.tool-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.steps li { display: flex; gap: 12px; font-size: 14px; align-items: flex-start; }
.steps li b { display: block; font-size: 15px; }

/* ---------- 文章页 ---------- */
.doc { max-width: 760px; margin: 22px auto 0; padding: 34px; }
.doc h1 { font-size: 32px; font-weight: 700; }
.doc h2 { margin-top: 26px; font-size: 20px; font-weight: 700; }
.doc p { margin-top: 10px; line-height: 1.85; color: var(--ink-2); }

/* ---------- 页脚 ---------- */
.tv-foot { margin-top: 56px; background: var(--surface-2); border-top: .5px solid var(--line); }
.tv-foot-in { max-width: 1200px; margin: 0 auto; padding: 26px 22px 34px; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 12px; color: var(--muted); align-items: center; }
.tv-foot-in a { color: var(--ink-2); }
.tv-foot-in a:hover { color: var(--primary); }
.tv-foot-in .sp { flex: 1; }
.tv-foot-in .brand { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; font-size: 13px; }
.tv-foot-in .brand svg { width: 18px; height: 18px; }
.notice { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); background: var(--fill); padding: 8px 16px; text-align: center; }
.notice svg { width: 15px; height: 15px; color: var(--primary); }

/* ---------- 手机 ---------- */
@media (max-width: 900px) {
  .tv-hdr-in { flex-wrap: wrap; height: auto; padding: 8px 16px; }
  .tv-search { order: 5; flex-basis: 100%; }
  .tv-nav { order: 6; flex-basis: 100%; margin: 0 -4px; }
  .tv-hdr-act .btn-line { display: none; }
  .col-right { max-width: none; }
  .show-hero .poster-box { flex-basis: 150px; width: 150px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .hero { padding: 48px 0 28px; }
  .hero-search input { font-size: 16px; }
  .section { padding-top: 34px; }
  .sec-head h2 { font-size: 23px; }
  .post { padding: 16px; gap: 12px; }
  .thumb { width: 64px; }
  .show-hero { padding: 20px; border-radius: 22px; }
  .rail { grid-auto-columns: 42%; }
  .poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- 短剧页 v3（真实封面、详情分区） ---------- */
.poster-box > img.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.show-hero { background-color: #1D1D1F; }
.show-hero::before { background: radial-gradient(70% 90% at 90% 0%, rgba(255, 255, 255, .12), transparent 60%); }
.show-hero .en-title { margin-top: -6px; font-size: 15px; opacity: .72; letter-spacing: .01em; }
.prose { padding: 26px 28px; }
.prose h2 { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; }
.prose h2 svg { width: 20px; height: 20px; color: var(--t-short, var(--primary)); }
.prose p { margin-top: 12px; font-size: 16px; line-height: 1.85; color: var(--ink-2); }
.prose .trope b { color: var(--ink); }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 14px; }
.bd-item { background: var(--fill); border-radius: 16px; padding: 16px; }
.bd-item small { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.bd-item small svg { width: 15px; height: 15px; }
.bd-item p { margin-top: 8px; font-size: 15px; line-height: 1.75; }
details.faq { border-top: .5px solid var(--line); padding: 14px 0; }
details.faq:first-of-type { margin-top: 8px; }
details.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform .2s; }
details.faq[open] summary svg { transform: rotate(90deg); }
details.faq p { margin-top: 8px; font-size: 15px; }
dl.facts { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px 12px; margin-top: 14px; font-size: 14px; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; color: var(--ink); word-break: break-word; }
@media (max-width: 640px) { .prose { padding: 20px; } }

/* ---------- 短剧页 v2：豆瓣、烂番茄结构 ---------- */
.rate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.rate-n { font-size: 20px; font-weight: 700; }
.rate-s { display: inline-flex; gap: 2px; opacity: .35; }
.rate-s svg { width: 16px; height: 16px; }
.rate .small { opacity: .7; }
.prose h2.db::after { content: "· · · · · ·"; margin-left: 6px; color: var(--muted); font-weight: 400; font-size: 14px; letter-spacing: .08em; }
.verdict-card { padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.verdict-card .vk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.verdict-card .vk svg { width: 15px; height: 15px; }
.verdict-card .vq { font-size: 21px; line-height: 1.6; font-weight: 600; color: var(--ink); text-wrap: pretty; }
.pc2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pc2 > div { background: var(--fill); border-radius: 16px; padding: 14px 16px; min-width: 0; }
.pc2 b { font-size: 14px; }
.pc2 b.g { color: #1F8A4C; } .pc2 b.b { color: #C2410C; }
.pc-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.pc-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.pc-list svg { width: 16px; height: 16px; margin-top: 4px; }
.pc-list.g svg { color: #1F8A4C; } .pc-list.b svg { color: #C2410C; }
[data-theme="dark"] .pc2 b.g, [data-theme="dark"] .pc-list.g svg { color: #4ADE80; }
[data-theme="dark"] .pc2 b.b, [data-theme="dark"] .pc-list.b svg { color: #FB923C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pc2 b.g, :root:not([data-theme="light"]) .pc-list.g svg { color: #4ADE80; }
  :root:not([data-theme="light"]) .pc2 b.b, :root:not([data-theme="light"]) .pc-list.b svg { color: #FB923C; } }
.lr h3 { margin-top: 14px; font-family: var(--serif); font-size: 21px; font-weight: 700; line-height: 1.45; }
.lr .by { margin-top: 4px !important; font-size: 13px !important; color: var(--muted) !important; }
@media (max-width: 640px) { .verdict-card { padding: 20px; } .verdict-card .vq { font-size: 18px; } }
/* v2 详情页：剧情简介放右栏“剧集信息”下；窄屏时右栏整体提到正文前（剧集信息 → 简介 → 编辑结论），新收录列表隐藏 */
.side-syn p { margin-top: 10px; font-size: 15px; line-height: 1.85; color: var(--ink-2); }
.side-more { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) {
  .show-v2 > .col-right { order: -1; }
  .show-v2 .side-more { display: none; }
}
.whom p { font-size: 16px; }
/* 右栏常用标签：豆瓣式紧凑小标签 */
.side-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.side-tags a { font-size: 13px; line-height: 1; padding: 6px 10px; border-radius: 8px; background: var(--fill); color: var(--ink-2); }
.side-tags a:hover { background: var(--fill-2); color: var(--ink); }
/* 详情页头部：不可点的信息（地区、集数、时长）用纯文字，不做成胶囊，免得像按钮；只有链接才用胶囊并有悬停效果 */
.gpill:hover { background: rgba(255, 255, 255, .16); }
a.gpill:hover { background: rgba(255, 255, 255, .3); }
.fact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 14px; color: rgba(255, 255, 255, .82); }
.fact { display: inline-flex; align-items: center; gap: 6px; }
.fact svg { width: 15px; height: 15px; opacity: .75; }

/* ---------- /go/ 离站跳转页 ---------- */
.go-body { min-height: 100vh; min-height: 100dvh; background: #0B0B0D; color: #F5F5F7; position: relative; overflow-x: hidden; }
.go-bg { position: fixed; inset: 0; background-size: cover; background-position: center 25%; transform: scale(1.08); opacity: .55; }
.go-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 20%, rgba(11, 11, 13, .35), rgba(11, 11, 13, .92) 70%), linear-gradient(180deg, rgba(11, 11, 13, .2), #0B0B0D 85%); }
.go-wrap { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; padding: max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 48px max(18px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 22px; }
.go-logo { display: inline-flex; align-items: center; gap: 7px; color: #F5F5F7; align-self: flex-start; }
.go-logo svg { width: 26px; height: 26px; } .go-logo b { font-size: 19px; letter-spacing: -.02em; }
.go-card { background: rgba(28, 28, 30, .72); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border: .5px solid rgba(255, 255, 255, .12); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.go-k { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .6); }
.go-k svg { width: 15px; height: 15px; }
.go-show { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: center; }
.go-show img { width: 104px; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.go-show h1 { font-size: clamp(22px, 4.4vw, 28px); line-height: 1.3; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.go-meta { margin-top: 8px; font-size: 13px; color: rgba(255, 255, 255, .62); }
.go-host { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 13px; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .08); padding: 6px 10px; border-radius: 10px; }
.go-host svg { width: 14px; height: 14px; }
.go-badge { font-family: var(--font); font-size: 11px; font-weight: 600; color: #0B0B0D; background: #FFD60A; border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.go-count { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(255, 255, 255, .85); }
.go-count svg { width: 40px; height: 40px; transform: rotate(-90deg); flex: none; }
.go-count circle { fill: none; stroke-width: 3; stroke: rgba(255, 255, 255, .14); }
.go-count .go-arc { stroke: #2997FF; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.go-count.stopped .go-arc { stroke: rgba(255, 255, 255, .3); }
.go-count b { font-variant-numeric: tabular-nums; }
.go-stop { margin-left: auto; background: none; border: 0; color: rgba(255, 255, 255, .6); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.go-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.go-acts .btn { padding: 12px 20px; font-size: 15px; }
.go-acts .btn-line { color: #F5F5F7; border-color: rgba(255, 255, 255, .25); background: transparent; }
.go-acts .btn-line:hover { background: rgba(255, 255, 255, .08); }
.go-note { font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, .55); border-top: .5px solid rgba(255, 255, 255, .1); padding-top: 14px; }
.go-more { display: flex; flex-direction: column; gap: 12px; }
.go-more h2 { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .8); }
.go-more .muted, .go-more .small { color: rgba(255, 255, 255, .55); }
.go-recs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.go-rec { display: flex; flex-direction: column; gap: 6px; color: #F5F5F7; }
.go-rec img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; transition: transform .2s; }
.go-rec:hover img { transform: translateY(-3px); }
.go-rec b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.go-rec span { font-size: 12px; color: rgba(255, 255, 255, .55); }
@media (max-width: 480px) { .go-card { padding: 22px; border-radius: 22px; } .go-show { grid-template-columns: 84px minmax(0, 1fr); } .go-show img { width: 84px; } .go-acts .btn { flex: 1 1 auto; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .go-count .go-arc, .go-rec img { transition: none; } }
/* 跳转页倒计时：数字放在圆环正中 */
.go-ring { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; }
.go-ring svg { position: absolute; inset: 0; width: 44px; height: 44px; }
.go-ring b { position: relative; font-size: 17px; font-weight: 700; color: #F5F5F7; }
.go-count.stopped .go-ring b { color: rgba(255, 255, 255, .45); }
/* 视频灵感栏目（/inspiration/）配色：绿色系 */
:root { --c-insp: #34C759; --t-insp: #1F7A36; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --t-insp: #63DA7E; } }
:root[data-theme="dark"] { --t-insp: #63DA7E; }
.k-insp { --c: var(--c-insp); --t: var(--t-insp); }
.ch-hero.k-insp { --glow: rgba(52, 199, 89, .18); }
.badge.b-insp { background: rgba(52, 199, 89, .14); color: var(--t-insp); }

/* ---------- 短剧评分组件（详情页头部，深色背景上） ---------- */
.rate { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.rate-n { font-size: 30px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; color: #FFFFFF; transition: transform .25s; }
.rate-stars { position: relative; display: inline-block; cursor: pointer; touch-action: none; padding: 4px 0; border-radius: 8px; outline: none; }
.rate-stars:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.rate-stars .rs-base, .rate-stars .rs-fill { display: flex; gap: 4px; white-space: nowrap; }
.rate-stars svg { width: 24px; height: 24px; flex: none; }
.rate-stars .rs-base svg { color: rgba(255, 255, 255, .28); fill: currentColor; stroke: none; }
.rate-stars .rs-fill { position: absolute; left: 0; top: 4px; overflow: hidden; pointer-events: none; transition: width .12s; }
.rate-stars .rs-fill svg { color: #FFD60A; fill: currentColor; stroke: none; filter: drop-shadow(0 0 6px rgba(255, 214, 10, .45)); }
.rate-src { font-size: 12px; color: rgba(255, 255, 255, .62); border: .5px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: 2px 9px; }
.rate-talk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: rgba(255, 255, 255, .88); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .35); }
.rate-talk svg { width: 14px; height: 14px; }
.rate-talk:hover { color: #FFFFFF; text-decoration-color: #FFFFFF; }
.rate-ui { flex-basis: 100%; display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, .85); }
.rate-ui[hidden] { display: none; }
.rate-go { background: #FFD60A !important; color: #1D1D1F !important; border: 0; font-weight: 600; }
.rate-go:hover { background: #FFE14D !important; }
.rate-fx { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.rfx-p { position: absolute; left: 0; top: 0; font-style: normal; font-size: 13px; color: #FFD60A; text-shadow: 0 0 8px rgba(255, 214, 10, .8); transform: translate(-50%, -50%); animation: rfx-fly .95s cubic-bezier(.15, .7, .3, 1) forwards; }
.rfx-p.big { font-size: 19px; color: #FFF3B0; }
.rfx-ring { position: absolute; left: 0; top: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid rgba(255, 214, 10, .9); animation: rfx-ring .7s ease-out forwards; }
@keyframes rfx-fly { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.4) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.1) rotate(var(--r)); } }
@keyframes rfx-ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(7); } }
.rate.pop .rate-n { animation: rate-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.rate.pop .rs-fill svg { animation: rate-shine .8s ease-out; }
@keyframes rate-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: #FFD60A; } 100% { transform: scale(1); } }
@keyframes rate-shine { 0% { filter: drop-shadow(0 0 0 rgba(255, 214, 10, 0)); } 40% { filter: drop-shadow(0 0 14px rgba(255, 214, 10, 1)); } 100% { filter: drop-shadow(0 0 6px rgba(255, 214, 10, .45)); } }
@media (prefers-reduced-motion: reduce) { .rfx-p, .rfx-ring, .rate.pop .rate-n, .rate.pop .rs-fill svg { animation: none; } }

/* 列表翻页条 */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin-top: 28px; }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 38px; height: 38px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pager a { background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow); }
.pager a:hover { color: var(--ink); background: var(--surface-2); }
.pager a[aria-current="page"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.pager .pg-nums { display: inline-flex; gap: 6px; padding: 0; min-width: 0; height: auto; }
.pager .pg-gap { min-width: 20px; padding: 0; color: var(--muted); }
.pager .pg-step svg { width: 14px; height: 14px; }
.pager a.pg-step:first-child svg { transform: rotate(180deg); }
.pager .pg-step.off { color: var(--muted); opacity: .5; }
@media (max-width: 560px) { .pager .pg-nums a:not([aria-current]):not(:first-child):not(:last-child) { display: none; } }

/* ---------- 中文断行（10-28 全站自查后加）----------
   标题和短文案：只在标点、空格处换行，不把一个词或短语从中间切开；实在放不下才允许任意处断（overflow-wrap: anywhere）。
   长段落：正常逐字换行，但用 text-wrap: pretty 避免最后一行只剩一两个字。 */
h1, h2, h3, h4, summary,
.ch-hero p, .hero .sub, .lede, .vq, .sec-head p, .tile b, .tile span, .pmeta b, .pmeta span, .idea h3, .quote, .post h3,
.insp-card h2, .insp-card p, .insp-lead, .insp-lead-small, .insp-related b, .insp-explain-grid h3, .insp-explain-grid p,
.go-show h1, .go-note, .go-rec b, .rate-talk, .pc-list span, .promo h2, .promo p, .lr h3, .whom p, .tool .one, .tool .pc span,
.list a span, .rank-row b, .row-link b, .crumbs, .faq summary, .novel .t, .trope span, .tile, .chip, .btn, .gpill, .fact,
.empty, .doc h1, .doc h2, .bd-item small, .side-tags a, .ch-tabs a {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}
p, li, dd, .prose p, .bd-item p, .side-syn p { text-wrap: pretty; }
/* 标题类：一行放不下时两行尽量等长，避免最后一行只剩一两个字（没有标点可断的长剧名也能均分） */
h1, h2, h3, .pmeta b, .idea h3, .post h3, .insp-card h2, .row-link b, .go-show h1, .go-rec b, .lr h3, .rank-row b, .novel .t { text-wrap: balance; }
.pmeta b, .go-rec b, .rank-row b, .idea h3, .insp-card h2 { word-break: normal; }
/* 剧情页“经典改编”等行式列表：手机上右侧说明换到标题下面，不再把标题挤成一两个字一行 */
@media (max-width: 640px) {
  .row-link { grid-template-columns: 40px minmax(0, 1fr) !important; }
  .row-link > :nth-child(3) { grid-column: 2; }
}
/* 手机上：引用、卡片摘要这类多行短段落改回逐字换行（窄栏里按标点断反而会硬切），只防最后一行孤字；豆瓣式标题点线手机上收起 */
@media (max-width: 640px) {
  .quote, .insp-card p, .pc-list span, .promo p, .tool .one, .post-ex { word-break: normal; text-wrap: pretty; }
  .prose h2.db::after { display: none; }
}
/* 带标点的卡片标题优先在标点处断（“先聊了半天，/ 才发现她骑的是鸡”）；纯剧名（没有标点）仍按等长折行 */
.insp-card h2, .idea h3, .post h3 { word-break: keep-all; }
/* 宽屏不必要的换行（10-28 用户指出）：栏目导语、首页副标题、详情页看点不再限死 640–680px，按容器实际宽度排 */
.ch-hero-in > div { flex: 1 1 260px; min-width: 0; }
.ch-hero p { max-width: none; }
.hero .sub { max-width: 880px; }
.lede { max-width: none; }

/* ---------- 搜索页 ---------- */
.srch-box { margin-top: 20px; max-width: 760px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 999px;
  background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border: .5px solid var(--line); box-shadow: var(--shadow); }
.srch-box svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.srch-box input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 17px; color: var(--ink); outline: none; padding: 8px 0; }
.srch-box .btn { flex: none; }
.srch-tabs { margin-top: 16px; }
.srch-tabs[hidden] { display: none; }
.srch-tabs .chip { cursor: pointer; font: inherit; font-size: 14px; }
.srch-wrap { padding-bottom: 40px; }
.srch-sec { margin-top: 26px; }
.srch-sec h2 { display: inline-flex; align-items: baseline; gap: 8px; }
.srch-n { font-size: 14px; font-weight: 600; color: var(--muted); }
.srch-more { background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px; }
.srch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 12px; }
.srch-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); transition: transform .15s, box-shadow .15s; }
.srch-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-h); }
.srch-row .ic::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #FFFFFF; opacity: .9; }
.srch-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.srch-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.srch-body b { font-size: 16px; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.srch-ex { font-size: 14px; color: var(--ink-2); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.srch-out mark, .srch-idle mark { background: rgba(255, 214, 10, .45); color: inherit; border-radius: 3px; padding: 0 1px; }
.srch-empty { padding: 28px; margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.srch-empty p { color: var(--ink-2); }
.srch-idle { margin-top: 26px; }
.srch-idle[hidden] { display: none; }
.srch-idle .chips { margin-top: 12px; }
.badge.b-short { background: rgba(255, 55, 95, .12); color: var(--t-short); }
.badge.b-drama { background: rgba(175, 82, 222, .12); color: var(--t-drama); }
.badge.b-tools { background: rgba(48, 176, 199, .14); color: var(--t-tools); }
@media (max-width: 640px) { .srch-box input { font-size: 16px; } .srch-list { grid-template-columns: minmax(0, 1fr); } }

/* 首页“新收录短剧”：网格不横滑，“换一批”随机换（2026-10-28 用户要求）。桌面 6×2，平板 4×2，手机 3×2 */
.sec-acts { display: flex; align-items: center; gap: 14px; }
.btn-swap { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--fill-2);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.btn-swap svg { width: 16px; height: 16px; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.btn-swap:hover { border-color: var(--primary); color: var(--primary); }
.btn-swap.spin svg { transform: rotate(360deg); }
.btn-swap:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.home-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 16px; }
.home-grid > .pcard[hidden] { display: none; }
.home-grid > .pcard.fade-in { animation: swapIn .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes swapIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) { .home-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .home-grid > .pcard:nth-child(n+9) { display: none; } }
@media (max-width: 640px) { .home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; } .home-grid > .pcard:nth-child(n+7) { display: none; }
  .home-grid .pcard .pmeta b { font-size: 14px; } .btn-swap { height: 32px; padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .home-grid > .pcard.fade-in, .btn-swap svg { animation: none; transition: none; } }

/* 工具目录 v2（2026-10-29）：筛选区、截图卡片、详情页 */
.tf { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.tf-row { display: flex; gap: 12px; align-items: flex-start; }
.tf-k { flex: 0 0 auto; font-size: 13px; color: var(--muted); padding-top: 8px; min-width: 2em; }
.tf .chips { flex: 1 1 auto; }
.tf .chip small, .ch-tabs .chip small { margin-left: 4px; font-size: 12px; opacity: .6; font-weight: 500; }
.tf-more { display: contents; }
.tf-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 14px; color: var(--primary); }
.tf-more > summary::-webkit-details-marker { display: none; }
.tf-more > summary svg { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .2s; }
.tf-more[open] > summary svg { transform: rotate(-90deg); }
.tf-more > .chips { flex-basis: 100%; margin-top: 8px; }
.tool { overflow: hidden; }
.tool-shot { display: block; margin: -22px -22px 0; aspect-ratio: 16 / 10; background: var(--fill); border-bottom: 1px solid var(--line-soft); overflow: hidden; }
.tool-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.tool:hover .tool-shot img { transform: scale(1.03); }
.tool-top h3 a { color: inherit; }
.tool-top h3 a:hover { color: var(--primary); }
.tool-top a.tag { text-decoration: none; }
.tool-logo.img { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.tool-logo.img img { width: 70%; height: 70%; object-fit: contain; }
.tool-logo.lg { width: 72px; height: 72px; border-radius: 18px; font-size: 30px; }
.tool-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-tags a { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--fill); color: var(--ink-2); }
.tool-tags a:hover { background: var(--primary-weak); color: var(--primary); }
.tool-acts { display: inline-flex; align-items: center; gap: 12px; }
.tool-grid-sm { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tool-hero { padding: 26px; display: grid; gap: 22px; }
.tool-hero.has-shot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
.th-head { display: flex; gap: 18px; align-items: flex-start; }
.th-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.th-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.th-title h1 { font-size: 32px; font-weight: 700; line-height: 1.2; }
.th-title .score-pill { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 16px; }
.th-title .score-pill svg { width: 16px; height: 16px; color: #FFB800; fill: currentColor; }
.tool-hero .en-title { color: var(--muted); margin-top: -6px; }
.tool-hero .lede { font-size: 17px; color: var(--ink-2); line-height: 1.6; }
.tool-hero .glass-row .gpill { background: var(--fill); color: var(--ink-2); }
.th-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.th-shot { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--fill); box-shadow: var(--shadow); }
.th-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.th-shot figcaption { font-size: 12px; color: var(--muted); padding: 7px 12px; border-top: 1px solid var(--line-soft); }
.feat-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 4px; }
.feat-list li { padding: 14px 16px; border-radius: 14px; background: var(--fill); display: flex; flex-direction: column; gap: 4px; }
.feat-list li b { font-size: 15px; }
.feat-list li span { font-size: 14px; color: var(--ink-2); line-height: 1.65; }
.voice { margin: 0 0 12px; padding: 14px 16px 12px; border-left: 3px solid var(--primary); background: var(--fill); border-radius: 0 12px 12px 0; }
.voice p { margin: 0; line-height: 1.75; }
.voice cite { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: var(--muted); }
.voice cite a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pc-wide { display: grid; gap: 10px; }
@media (max-width: 900px) { .tool-hero.has-shot { grid-template-columns: minmax(0, 1fr); } .th-title h1 { font-size: 26px; } }
@media (max-width: 560px) { .tool-hero { padding: 18px; } .th-head { gap: 12px; } .tool-logo.lg { width: 56px; height: 56px; font-size: 24px; } .tf-row { flex-direction: column; gap: 6px; } .tf-k { padding-top: 0; } }

/* ======================= 剧情栏目 v2（2026-10-29） ======================= */
/* 灵感卡分镜条 */
.shot-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.ss-cell { background: var(--fill); border-radius: 8px; padding: 6px 7px; font-size: 11.5px; line-height: 1.35; color: var(--ink-2); min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ss-cell i { display: block; font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--muted); margin-bottom: 2px; }
/* 套路卡片墙 */
.trope-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.trope-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; min-width: 0; }
.trope-card b { font-size: 18px; font-weight: 700; color: var(--ink); }
.trope-card > span:not(.tc-posters):not(.link) { font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.tc-posters { display: flex; gap: 6px; }
.tc-posters .mini-poster { width: 38px; }
/* 钩子卡 */
.hook-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.hook-grid.one { grid-template-columns: 1fr; }
.hook-card { position: relative; background: var(--surface); border-radius: 16px; padding: 16px 16px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.prose .hook-card, .tool-tile .hook-card, .dice-box .hook-card { background: var(--fill); box-shadow: none; }
.hook-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.hook-meta .tag { font-size: 12px; }
.hook-t { font-size: 16px; line-height: 1.7; color: var(--ink); font-weight: 600; margin: 0 !important; }
.hook-t.small-t { font-size: 14.5px; font-weight: 500; }
.hook-shot { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0 !important; }
.hook-shot svg { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.copy-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; }
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn.done { color: var(--t-fresh); }
/* 节奏表 */
ol.rhythm { list-style: none; padding: 0; margin: 14px 0 0 6px; display: flex; flex-direction: column; border-left: 2px solid var(--line); }
ol.rhythm li { position: relative; padding: 0 0 18px 20px; }
ol.rhythm li:last-child { padding-bottom: 2px; }
ol.rhythm li::before { content: ""; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-drama); box-shadow: 0 0 0 3px var(--surface); }
.rh-n { font-weight: 700; color: var(--ink); font-size: 16px; }
.rh-ep { margin-left: 10px; font-size: 12px; color: var(--muted); font-family: var(--mono); }
ol.rhythm li p { margin-top: 4px !important; }
.sub-h { margin-top: 18px; font-size: 16px; font-weight: 700; }
ul.pits { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); line-height: 1.75; }
/* 本周主题 */
.theme-card { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; margin-top: 8px; padding: 26px; border-radius: 26px; color: #FFFFFF;
  background: radial-gradient(90% 120% at 100% 0%, rgba(255, 255, 255, .18), transparent 60%), linear-gradient(135deg, #5B2A86, #C4003A); box-shadow: var(--shadow-h); }
.theme-card > div:first-child { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.theme-card h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: #FFFFFF; }
.theme-card p { color: rgba(255, 255, 255, .88); line-height: 1.7; }
.theme-card .btn { background: rgba(255, 255, 255, .92); color: #1D1D1F; }
.theme-posters { display: grid; grid-template-columns: repeat(3, 92px); gap: 10px; }
.theme-posters .pmeta { display: none; }
.theme-posters .poster-box { padding: 8px; }
/* 钩子库 + 骰子并排 */
.duo-tools { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.tool-tile { padding: 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dice-tile { align-items: flex-start; }
.dice-tile h2 { font-size: 22px; font-weight: 700; }
.dice-tile p { color: var(--ink-2); line-height: 1.7; }
.dice-sample { font-family: var(--serif); font-size: 16px; color: var(--ink) !important; background: var(--fill); border-radius: 14px; padding: 12px 14px; }
@media (max-width: 760px) { .duo-tools { grid-template-columns: 1fr; } .theme-posters { grid-template-columns: repeat(3, 80px); } }
/* 灵感骰子 */
.dice-box { padding: 24px; margin-top: 14px; display: flex; flex-direction: column; gap: 18px; }
.dice-ctl { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.dice-sel select { margin-left: 8px; font: inherit; padding: 6px 10px; border-radius: 10px; border: .5px solid var(--line); background: var(--surface); color: var(--ink); }
.reels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.reel { background: var(--fill); border-radius: 16px; padding: 14px; min-height: 96px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.reel small { font-size: 12px; color: var(--muted); font-weight: 600; }
.reel b { font-size: 16px; line-height: 1.5; color: var(--ink); font-weight: 600; }
.reel.spin b { animation: reel-spin .09s linear infinite; }
@keyframes reel-spin { 0% { transform: translateY(-40%); opacity: .25; } 100% { transform: translateY(40%); opacity: .25; } }
.reel.land b { animation: reel-land .35s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes reel-land { 0% { transform: translateY(-30%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.seed { font-family: var(--serif); font-size: clamp(18px, 2.4vw, 22px); line-height: 1.7; color: var(--ink); min-height: 1.7em; }
.dice-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.dice-out[hidden] { display: none; }
.dice-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.dice-roll svg { width: 18px; height: 18px; }
ul.dice-ex { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); line-height: 1.7; }
@media (max-width: 760px) { .reels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .reel.spin b, .reel.land b { animation: none; } }
/* 连载 */
.serial-card .logline { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.serial-hero { margin-top: 14px; padding: 30px; border-radius: 28px; color: #FFFFFF; box-shadow: var(--shadow-h);
  background: radial-gradient(80% 120% at 100% 0%, rgba(255, 255, 255, .2), transparent 60%), linear-gradient(135deg, var(--sh, #2C2F5A), #111216); }
.serial-hero > div { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; max-width: 860px; }
.serial-hero h1 { font-family: var(--serif); font-size: clamp(30px, 4.5vw, 44px); font-weight: 700; color: #FFFFFF; }
.serial-hero p, .serial-hero .fact-row, .serial-hero .glass-row { color: rgba(255, 255, 255, .86); }
.ep-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 12px; }
.ep-row { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--fill); color: var(--ink); }
a.ep-row:hover { background: var(--fill-2); }
.ep-n { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.ep-row b { font-size: 15px; font-weight: 600; }
ul.cast { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
ul.cast li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; font-size: 15px; line-height: 1.7; }
ul.cast b { color: var(--ink); }
ul.cast span { color: var(--ink-2); }
.reader-wrap { max-width: 860px; }
.reader { padding: clamp(22px, 4vw, 44px); margin-top: 14px; }
.reader h1 { font-family: var(--serif); font-size: clamp(26px, 3.6vw, 34px); margin-top: 6px; }
.reader-text p { margin-top: 1.1em; font-family: var(--serif); font-size: 18px; line-height: 2; color: var(--ink); text-indent: 2em; }
.ep-end { margin-top: 26px; display: flex; gap: 8px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--fill); font-weight: 600; color: var(--ink); }
.ep-end svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--c-short); }
.ep-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.reader-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 640px) { ul.cast li { grid-template-columns: 1fr; gap: 2px; } .reader-text p { font-size: 17px; } }
/* 每周挑战 */
.challenge h1 { font-size: clamp(26px, 3.6vw, 36px); margin-top: 10px; }
.lede-dark { font-size: 17px; line-height: 1.8; color: var(--ink-2); margin-top: 10px; }
.prose .hook-grid { margin-top: 12px; }
/* 新组件同样走中文断行规则 */
.trope-card b, .trope-card span, .hook-t, .hook-shot, .reel b, .theme-card h2, .theme-card p, .ep-row b, .ep-end, .dice-tile p, .rh-n, ul.cast span { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.seed, .reader-text p, .lede-dark, .serial-card .logline, .hook-t, .trope-card span, .theme-card p { text-wrap: pretty; }

/* 分类标签（10-29 SEO 整改）：有聚合页的是链接，没有的显示成不可点的纯标签，不能看着像链接 */
.chip.plain, .chip.plain:hover { background: transparent; border: .5px dashed var(--line); color: var(--muted); cursor: default; }
.side-tags span.plain { font-size: 13px; line-height: 1; padding: 6px 10px; border-radius: 8px; border: .5px dashed var(--line); color: var(--muted); }
.gpill.plain, .gpill.plain:hover { background: transparent; border-style: dashed; }
a.tag:hover { text-decoration: underline; text-underline-offset: 3px; }
.serial-hero .fact-row { margin-top: -2px; }
.b-feat { color: #fff; background: linear-gradient(135deg, #FF375F, #FF9F0A); font-weight: 600; }
.tool:has(.b-feat) { box-shadow: 0 0 0 1.5px rgba(255, 55, 95, .45), var(--shadow); }

/* 工具目录排版 v2.1（10-29 用户：太挤、标题要和截图顶端对齐） */
.tf-card { margin-top: 6px; padding: 18px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--shadow); }
.tf-card .tf { gap: 14px; margin: 0; }
.tf-card .tf-row { gap: 16px; align-items: baseline; }
.tf-card .tf-k { min-width: 2.4em; padding-top: 0; font-weight: 600; color: var(--ink-2); }
.tf-card .chips { gap: 8px 8px; }
.tf-card .chip { padding: 5px 12px; font-size: 13.5px; background: var(--fill); border: 0; }
.tf-card .chip:hover { background: var(--fill-2); }
.tf-card .chip.on { background: var(--ink); color: var(--surface); }
.tf-card .chip svg { width: 14px; height: 14px; }
.tf-card .tf-row + .tf-row { padding-top: 14px; border-top: 1px dashed var(--line); }
.tf-card .tf-more > summary { height: 30px; padding: 0 8px; font-size: 13.5px; }
.tools-layout { margin-top: 24px; }
.ch-hero.k-tools p { max-width: 720px; line-height: 1.7; }
.tool-grid { gap: 20px; }
.tool { gap: 12px; }
.tool-tags { margin-top: 2px; }

.crumbs + .tool-hero { margin-top: 18px; }
.tool-hero { padding: 32px; gap: 40px; }
.tool-hero.has-shot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
.th-head { display: block; }
.th-main { gap: 18px; }
.th-title { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 16px; }
.tool-logo.md { width: 60px; height: 60px; border-radius: 16px; font-size: 26px; flex: 0 0 auto; }
.th-name { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.th-h1row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.th-h1row h1 { font-size: 32px; font-weight: 700; line-height: 1.15; margin: 0; }
.th-h1row .score-pill { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 16px; }
.th-h1row .score-pill svg { width: 16px; height: 16px; color: #FFB800; fill: currentColor; }
.th-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.th-badges:empty { display: none; }
.tool-hero .en-title { margin: 0; font-size: 14px; }
.tool-hero .lede { font-size: 17px; line-height: 1.7; margin: 0; }
.tool-hero .glass-row { gap: 8px; }
.tool-hero .glass-row .gpill { padding: 5px 12px; font-size: 13.5px; }
.th-acts { gap: 12px; margin-top: 4px; }
.th-main > .small { margin: 0; }
.th-shot { margin-top: 2px; }
@media (max-width: 900px) { .tool-hero { padding: 22px; gap: 24px; } .th-h1row h1 { font-size: 26px; } }
@media (max-width: 560px) { .tf-card { padding: 14px 14px; } .tf-card .tf-row { flex-direction: column; gap: 8px; } .tool-logo.md { width: 48px; height: 48px; font-size: 22px; } .tool-hero { padding: 18px; } }
/* 工具跳出页 */
.go-tool { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.go-tool h1 { font-size: clamp(22px, 4.4vw, 28px); line-height: 1.3; font-weight: 700; text-wrap: balance; }
.go-tool .tool-logo.img { background: #fff; }
.go-trecs { display: grid; gap: 10px; }
.go-trec { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); color: #F5F5F7; }
.go-trec:hover { background: rgba(255, 255, 255, .1); }
.go-trec .tool-logo { width: 40px; height: 40px; border-radius: 11px; font-size: 18px; }
.go-trec b { display: block; font-size: 15px; }
.go-trec small { display: block; font-size: 13px; color: rgba(255, 255, 255, .6); margin-top: 2px; }
.b-fire { color: #fff; background: linear-gradient(135deg, #FF3B30, #FF6B00); font-weight: 600; }

/* 短剧详情“相关标签”（10-29） */
.rel-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; padding-top: 14px; border-top: .5px solid var(--line); }
.rel-tags .chips { gap: 6px; }
.rel-tags .chip { font-size: 13px; padding: 5px 11px; }
/* 连载封面（10-29） */
.serial-hero.has-cover { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 30px; align-items: center; }
.sh-cover { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); display: block; }
@media (max-width: 640px) { .serial-hero.has-cover { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 20px; } .serial-hero h1 { font-size: 26px; } }
.serial-card.has-cover { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
.sc-cover { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; display: block; }
.sc-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rd-cover { float: right; width: 72px; margin: 0 0 10px 16px; }
.rd-cover img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; display: block; }
.ep-next { display: flex; align-items: center; gap: 6px; }
.ep-next svg { width: 15px; height: 15px; flex: none; }
/* 说明小字里的行内图标统一尺寸（10-29 发现灵感卡“改编自”图标被撑满整行） */
p.small > svg, p.muted > svg { width: 15px; height: 15px; flex: none; }

/* 连载卡片 v2（10-29 用户嫌三列太挤）：首页单列横卡，连载总页两列 */
.serial-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.serial-grid.wide { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.serial-grid .serial-card { padding: 18px; }
.serial-grid .serial-card.has-cover { grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: center; }
.serial-grid .sc-body { gap: 7px; }
.serial-grid .serial-card .meta { flex-wrap: nowrap; gap: 12px; white-space: nowrap; }
.serial-grid .serial-card .meta > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.serial-grid .serial-card .t { font-size: 22px; line-height: 1.3; word-break: keep-all; }
.serial-grid .serial-card .logline { font-size: 14.5px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.serial-grid .serial-card .link { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.serial-grid .serial-card .link svg { vertical-align: -2px; margin-right: 4px; }
@media (max-width: 520px) { .serial-grid.wide { grid-template-columns: 1fr; } .serial-grid .serial-card.has-cover { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; } .serial-grid .serial-card .t { font-size: 19px; } }

/* 连载分镜脚本（10-29） */
.sb-head { padding: 24px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; }
.sb-head h1 { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 34px); margin-top: 6px; }
.sb-head > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sb-mini { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; display: block; }
.sb-cta { display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; gap: 10px; align-items: center; margin-top: 22px; padding: 14px 16px; border-radius: 14px;
  background: var(--primary-weak); color: var(--ink); }
.sb-cta > svg { width: 20px; height: 20px; color: var(--primary); }
.sb-cta > svg:last-child { width: 16px; height: 16px; }
.sb-cta:hover { color: var(--ink); filter: brightness(.98); }
.sb .insp-table td { vertical-align: top; font-size: 14px; line-height: 1.65; }
.sb .insp-table td:first-child { white-space: nowrap; }
@media (max-width: 640px) { .sb-head { grid-template-columns: 1fr; } .sb-mini { display: none; } }
/* 分镜表四列：镜号、景别、画面（最宽）、对白与声音；覆盖视频灵感三列表的列宽 */
.sb .insp-table { table-layout: fixed; min-width: 640px; }
.sb .insp-table th:nth-child(1), .sb .insp-table td:nth-child(1) { width: 74px; }
.sb .insp-table th:nth-child(2), .sb .insp-table td:nth-child(2) { width: 112px; }
.sb .insp-table th:nth-child(3), .sb .insp-table td:nth-child(3) { width: auto; }
.sb .insp-table th:nth-child(4), .sb .insp-table td:nth-child(4) { width: 34%; }
.sb .insp-table td { padding: 12px 10px; }