/* StrokeVideo 站点样式 — 设计规范沿用 toksift.com:
   IBM Plex 自托管字体 / 带蓝的中性灰刻度 / 深靛蓝品牌色 / 浅色为主并支持深色模式 /
   半透明吸顶导航 / 圆角卡片 / :focus-visible 焦点环。视频画幅本身保留暖纸色。 */

@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

*{box-sizing:border-box}
:root{
  color-scheme:light dark;
  /* 中性灰: 带一点蓝, 与品牌色同色系 */
  --n50:#f9fafc; --n100:#f5f7fa; --n200:#e2e6ee; --n300:#cbd1de; --n400:#8b91a1; --n500:#6b7280;
  --n600:#5a6070; --n700:#40454f; --n800:#262c38; --n900:#14161c; --n950:#0d0f14;
  /* 品牌: 深靛蓝 */
  --b50:#f4f3fd; --b100:#eeedfb; --b200:#d9d7f5; --b300:#b6b2ea; --b500:#4a45c9; --b600:#3b37b8; --b700:#2f2c93; --b800:#26246f;
  --b-light:#8b85ff;
  /* 语义 */
  --bg:#ffffff; --bg-2:var(--n50); --panel:#ffffff; --line:var(--n200); --line-2:var(--n300);
  --fg:var(--n900); --fg-2:var(--n600); --dim:var(--n500);
  --brand:var(--b600); --brand-hover:var(--b700); --brand-soft:var(--b100); --brand-fg:#fff; --brand-ring:var(--b600);
  --paper:#f6f1e3; --paper-ui:#f6f1e3;
  --ok:#15803d; --warn:#b45309; --bad:#be123c; --info:#3b37b8;
  --shadow:0 1px 2px rgba(20,22,28,.05),0 8px 24px -12px rgba(20,22,28,.15);
  --radius:12px; --radius-sm:8px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:var(--n950); --bg-2:var(--n900); --panel:var(--n900); --line:var(--n800); --line-2:var(--n700);
    --fg:var(--n100); --fg-2:var(--n300); --dim:var(--n400);
    --brand:var(--b-light); --brand-hover:#a5a0ff; --brand-soft:rgba(139,133,255,.14); --brand-fg:var(--n950); --brand-ring:var(--b-light);
    --ok:#4ade80; --warn:#fbbf24; --bad:#fb7185; --info:#8b85ff;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
    --paper-ui:var(--n800);
  }
}

html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;
  font:15px/1.6 "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Hiragino Kaku Gothic ProN","Microsoft YaHei","Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji"}
a{color:inherit;text-decoration:none}
h1,h2,h3{letter-spacing:-.02em;font-weight:600;margin:0}
code,pre,.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
:focus-visible{outline:2px solid var(--brand-ring);outline-offset:2px}
summary::-webkit-details-marker{display:none}
.wrap{max-width:1152px;margin:0 auto;padding:0 20px}

/* ---------- 导航 */
.nav{display:flex;align-items:center;gap:20px;height:64px;padding:0 20px;position:sticky;top:0;z-index:20;
  border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px)}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:17px;letter-spacing:-.01em}
.brand .mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--brand);color:var(--brand-fg);font-size:12px;font-weight:700;letter-spacing:0}
.brand span{color:var(--brand)}
.nav nav{display:flex;gap:4px;margin-right:auto;font-size:14px;flex-wrap:wrap}
.nav nav a{padding:7px 11px;border-radius:8px;color:var(--fg-2)}
.nav nav a:hover{color:var(--fg);background:var(--bg-2)}
.nav-right{display:flex;align-items:center;gap:8px;margin-left:auto}
#lang-switch{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;font-size:13px;cursor:pointer}
@media(max-width:900px){.nav nav{display:none}.brand .word{display:none}.nav{gap:10px}}

/* ---------- 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--panel);
  color:var(--fg);padding:9px 16px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;transition:.15s;white-space:nowrap}
.btn:hover{border-color:var(--line-2);background:var(--bg-2)}
.btn.primary{background:var(--brand);color:var(--brand-fg);border-color:var(--brand)}
.btn.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn.primary[disabled]{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 12px;font-size:13px}

/* ---------- 首屏 */
.hero{max-width:1152px;margin:0 auto;padding:64px 20px 32px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px;align-items:start}
.hero h1{font-size:44px;line-height:1.12;margin:0 0 16px;font-weight:700;letter-spacing:-.025em}
.sub{color:var(--fg-2);font-size:17px;line-height:1.6;margin:0 0 28px;max-width:560px}
.hero-preview{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper);box-shadow:var(--shadow);aspect-ratio:3/2}
.hero-preview video,.hero-preview img{width:100%;height:100%;object-fit:cover;display:block}
.hero-preview .tag{position:absolute;left:12px;top:12px;background:color-mix(in srgb,var(--n950) 72%,transparent);color:#fff;font-size:12px;padding:4px 9px;border-radius:999px;backdrop-filter:blur(6px)}
.hero.compact{padding:52px 20px 20px;text-align:center}
.hero.compact h1{font-size:36px}
.hero.compact .sub{margin-left:auto;margin-right:auto}
.hero.compact .composer{max-width:820px;margin:0 auto;text-align:left}
@media(max-width:960px){.hero-grid{grid-template-columns:minmax(0,1fr)}.stage{order:-1;max-width:640px}}   /* 1fr 的最小值是 min-content, 窄屏下会被内容顶到 810px 撑破页面; minmax(0,1fr) 才真的能缩 */
@media(min-width:961px){.stage{position:sticky;top:80px}}
@media(max-width:640px){.hero{padding-top:36px}.hero h1{font-size:31px}.hero.compact h1{font-size:28px}}

/* ---------- 生成器 */
.composer{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px 16px;text-align:left;box-shadow:var(--shadow)}
.tabs{display:flex;gap:4px;margin-bottom:10px;background:var(--bg-2);padding:3px;border-radius:9px;width:max-content;max-width:100%}
.tab{background:transparent;border:0;color:var(--fg-2);padding:6px 12px;border-radius:7px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit}
.tab.active{background:var(--panel);color:var(--fg);box-shadow:0 1px 2px rgba(20,22,28,.08)}
textarea{width:100%;background:transparent;border:0;color:var(--fg);font:inherit;resize:vertical;padding:8px 4px 12px;outline:none;font-size:15px}
textarea::placeholder{color:var(--n400)}
.charcount{margin:4px 0 0;text-align:right;font-size:12px;color:var(--dim);
 font-variant-numeric:tabular-nums;min-height:16px}
.charcount.warn{color:#b45309}
.charcount.over{color:#b91c1c;font-weight:600}
/* 主输入框要有自己的框: 画风卡片挪到它正下方之后, 没有边框就和卡片区糊成一片 */
#input{box-sizing:border-box;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
 padding:12px 14px;min-height:96px;transition:border-color .15s,box-shadow .15s}
#input:hover{border-color:var(--line-2)}
#input:focus{background:var(--panel);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;border-top:1px solid var(--line);padding-top:14px}
.ctl{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--dim);font-weight:500}
.ctl select{background:var(--bg-2);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;font-size:13px;font-weight:400;outline:none}
.ctl.check{flex-direction:row;align-items:center;gap:7px;font-size:13px;color:var(--fg-2);border:1px solid var(--line);border-radius:8px;padding:8px 11px;cursor:pointer;font-weight:400}
.ctl.check input{accent-color:var(--brand)}
.controls .btn.primary{margin-left:auto;padding:10px 20px}
.hint{color:var(--dim);font-size:12.5px;margin:12px 2px 0}
.hint.err{color:var(--bad)}

/* 画面指令 (可选) */
.instr{margin:10px 0 0;border-top:1px solid var(--line);padding-top:8px}
.instr summary{cursor:pointer;font-size:12.5px;color:var(--fg-2);list-style:none;display:flex;align-items:center;gap:6px;font-weight:500}
.instr summary::before{content:"+";display:inline-block;width:14px;text-align:center;color:var(--dim)}
.instr[open] summary::before{content:"\2013"}
.instr textarea{margin-top:8px;font-size:13.5px;min-height:44px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.chip{background:var(--bg-2);color:var(--fg-2);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font:inherit;font-size:12px;cursor:pointer}
.chip:hover{color:var(--brand);border-color:var(--b300);background:var(--brand-soft)}

/* ---------- 任务卡 */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:left;box-shadow:var(--shadow)}
.job-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.bar{height:6px;background:var(--bg-2);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;width:0;background:var(--brand);border-radius:99px;transition:width .5s}
.job-meta{display:flex;justify-content:space-between;color:var(--dim);font-size:13px;margin-top:9px}
.log[hidden]{display:none}
.log{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;color:var(--dim);font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.55;max-height:150px;overflow:auto;padding:10px 12px;margin:14px 0 0;white-space:pre-wrap}
#job-result video{width:100%;border-radius:10px;margin:16px 0 12px;background:var(--paper);display:block}
.row{display:flex;gap:10px}
details{margin-top:14px;color:var(--fg-2);font-size:13px}
details pre{white-space:pre-wrap;color:var(--fg-2);font:inherit;margin:8px 0 0}

/* ---------- 区块 */
section.steps,section.examples,section.library{max-width:1152px;margin:0 auto;padding:56px 20px}
section h2{font-size:26px;margin:0 0 8px;letter-spacing:-.02em}
section .lead{color:var(--fg-2);margin:0 0 24px;font-size:15.5px}
section.steps h2,section.examples h2,section.library h2{margin-bottom:24px}
.steps ol{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.steps li{counter-increment:s;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.steps li::before{content:counter(s,decimal-leading-zero);color:var(--brand);font-size:12px;font-weight:600;font-family:"IBM Plex Mono",ui-monospace,monospace;display:block;margin-bottom:10px}
.steps b{display:block;margin-bottom:6px;font-weight:600}
.steps span{color:var(--fg-2);font-size:13.5px;line-height:1.55}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.grid figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.grid video{width:100%;aspect-ratio:3/2;background:var(--paper);display:block;cursor:pointer}
/* 视频墙的空框: 静态 HTML 里就有, 慢网先看到格子和骨架底纹, 缩略图和视频再往里填 */
.grid .frame{position:relative;display:block;width:100%;aspect-ratio:3/2;background:var(--paper);overflow:hidden;cursor:pointer}
.grid .frame:not(.ready)::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--paper) 28%,var(--bg-2) 48%,var(--paper) 68%);background-size:220% 100%;animation:sk 1.5s linear infinite}
@keyframes sk{to{background-position:-220% 0}}
.grid .frame img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.grid .frame .play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--n950) 62%,transparent);backdrop-filter:blur(4px);transition:.15s}
.grid .frame .play::before{content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.grid .frame:hover .play,.grid .frame:focus-visible .play{background:var(--brand);transform:translate(-50%,-50%) scale(1.08)}
.grid .frame:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
@media(prefers-reduced-motion:reduce){.grid .frame:not(.ready)::after{animation:none}}
.grid figcaption{color:var(--fg-2);font-size:13.5px;padding:10px 14px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.style-tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--brand-soft);color:var(--brand)}

.list{display:flex;flex-direction:column;gap:10px}
.item{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:13px 16px;cursor:pointer;transition:.15s}
.item:hover{border-color:var(--line-2);background:var(--bg-2)}
.item .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.item .s{color:var(--dim);font-size:12.5px;font-family:"IBM Plex Mono",ui-monospace,monospace}
.item .s.q{color:var(--warn);font-weight:600}
.dot{width:8px;height:8px;border-radius:99px;background:var(--n400);flex:none}
.dot.done{background:var(--ok)}.dot.running{background:var(--warn)}.dot.failed{background:var(--bad)}.dot.queued{background:var(--info)}
.empty{color:var(--dim)}

/* ---------- 内容页 */
.body{max-width:760px;margin:0 auto;padding:8px 20px 20px}
.prose{padding:26px 0;border-top:1px solid var(--line)}
.prose h2{font-size:21px;margin:0 0 10px}
.prose p{color:var(--fg-2);margin:0;font-size:15.5px;line-height:1.7}
.faq{max-width:760px;margin:0 auto;padding:40px 20px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:0 0 10px;color:var(--fg)}
.faq details[open]{border-color:var(--line-2)}
.faq summary{cursor:pointer;font-weight:550;font-size:15px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--dim);font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq details p{color:var(--fg-2);margin:10px 0 0;font-size:14.5px;line-height:1.65}
.related{max-width:1152px;margin:0 auto;padding:40px 20px}
.rel-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
a.rel{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;transition:.15s}
a.rel:hover{border-color:var(--b300);box-shadow:var(--shadow)}
a.rel b{display:block;margin-bottom:6px;font-size:15px}
a.rel span{color:var(--fg-2);font-size:13.5px;line-height:1.5}

/* ---------- 页脚 */
.site-footer{border-top:1px solid var(--line);background:var(--bg-2);margin-top:64px;padding:52px 20px 28px}
.fcols{max-width:1152px;margin:0 auto;display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.fcols h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);margin:0 0 12px;font-weight:600}
.fcols a{display:block;color:var(--fg-2);font-size:13.5px;padding:3px 0}
.fcols a:hover{color:var(--fg)}
.fcols .langs a{display:inline-block;margin:0 12px 4px 0}
.fbot{max-width:1152px;margin:34px auto 0;color:var(--dim);font-size:12.5px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer{color:var(--dim);font-size:13px}

/* ---------- 登录 */
.auth{display:flex;align-items:center;gap:.5rem}
.btn.google{display:inline-flex;align-items:center;gap:.45rem;background:var(--panel);color:var(--fg);border:1px solid var(--line);padding:.42rem .7rem;font-weight:600}
.btn.google:hover{background:var(--bg-2)}
.btn.small{padding:.3rem .6rem;font-size:.82rem}
.auth .who{display:flex;align-items:center;gap:.4rem;max-width:11rem}
.auth .who img,.auth .who .ini{width:28px;height:28px;border-radius:50%;flex:0 0 auto}
.auth .who .ini{display:grid;place-items:center;background:var(--brand);color:var(--brand-fg);font-size:.78rem;font-weight:700}
.auth .who .nm{font-size:.86rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:860px){.auth .who .nm{display:none}}

/* ---------- RTL / 移动端 */
[dir="rtl"] .nav nav,[dir="rtl"] .controls{flex-direction:row-reverse}
[dir="rtl"] .controls .btn.primary{margin-left:0;margin-right:auto}
[dir="rtl"] .hero,[dir="rtl"] .body,[dir="rtl"] .faq{text-align:right}
@media(max-width:640px){.controls .btn.primary{margin-left:0;width:100%}.nav-right .btn.ghost{display:none}}

/* ---------- 作品页 */
.gallery-first{padding-top:8px}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.filter .chip{font-size:13px;padding:6px 12px}
.filter .chip i{font-style:normal;color:var(--dim);margin-left:4px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px}
.filter .chip.active{background:var(--brand);color:var(--brand-fg);border-color:var(--brand)}
.filter .chip.active i{color:inherit;opacity:.8}
.hero.compact + .gallery-first{padding-top:0}


/* ---- 支付: 套餐卡片 / 回跳页 */
.packs{max-width:1120px;margin:0 auto;padding:1.5rem 1.25rem 0}
.packs .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.pack{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;background:var(--panel);display:flex;flex-direction:column;gap:.35rem}
.pack.popular{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.pack .tag{position:absolute;top:-.7rem;left:1.25rem;background:var(--brand);color:#fff;font-size:.72rem;font-weight:600;padding:.2rem .6rem;border-radius:999px;letter-spacing:.02em}
.pack h3{margin:0;font-size:1.05rem}
.pack .price{font-size:2.2rem;font-weight:700;margin:.2rem 0 0;letter-spacing:-.02em}
.pack .mins{margin:0;color:var(--fg)}
.pack .mins b{font-size:1.2rem}
.pack .per{margin:0 0 .8rem;color:var(--fg-2);font-size:.9rem}
.pack .btn{margin-top:auto}
.packs .note{color:var(--fg-2);font-size:.9rem;max-width:760px;margin:1.2rem auto 0;text-align:center}
.packs .balance{text-align:center;color:var(--fg);font-weight:600;margin:0 0 1rem}
.billing{max-width:560px;margin:2rem auto 3rem;padding:2rem 1.25rem;text-align:center}
.billing h2{font-size:1.6rem;margin:0 0 .6rem}
.billing p{color:var(--fg-2);line-height:1.6}
.billing #bill-balance{display:inline-block;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.5rem 1rem;color:var(--fg);font-weight:600}
.billing .actions{display:flex;gap:.6rem;justify-content:center;margin-top:1.4rem}
.nav .who .bal{margin-left:.5rem;font-size:.8rem;font-weight:600;color:var(--brand);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.1rem .5rem}

/* ---- 视频页 / 指南索引 */
.video-page{max-width:960px;margin:0 auto;padding:1rem 1.25rem 0}
.video-page video{width:100%;border-radius:var(--radius);border:1px solid var(--line);background:#000;aspect-ratio:3/2}
.video-page .meta{display:flex;gap:1.5rem;color:var(--fg-2);margin:.8rem 0 0;font-size:.92rem}
.video-page .made{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;color:var(--fg-2);margin:.6rem 0 0}
.guide-list{max-width:1120px;margin:0 auto;padding:1rem 1.25rem 0}
.guide-list h2{font-size:1.1rem;color:var(--fg-2);margin:0 0 .8rem}
.community{max-width:760px;margin:1.5rem auto 0;padding:0 1.25rem;text-align:center;color:var(--fg-2)}
.community p{display:flex;gap:.8rem;align-items:center;justify-content:center;flex-wrap:wrap}
.community.top{max-width:1120px;margin:.5rem auto 0}
.community.top p{background:var(--brand-soft);border:1px solid var(--line);border-radius:var(--radius);padding:.8rem 1.2rem;color:var(--fg)}
.nav nav a.tg{color:var(--brand);font-weight:600}

.nav .brand .mark{width:28px;height:28px;padding:0;background:none;border-radius:7px;overflow:hidden;display:inline-flex}
.nav .brand .mark svg{width:100%;height:100%;display:block}
.hero-logo{display:flex;align-items:center;gap:.7rem;margin:0 0 1.1rem}
.hero-logo svg{width:56px;height:56px;border-radius:13px}
.hero-logo .word{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--fg)}
.hero-logo .word span{color:var(--brand)}
.video-page.sample{margin-top:1.5rem}.video-page.sample h2{font-size:1.1rem;margin:0 0 .6rem;color:var(--fg-2)}.video-page.sample .meta a{margin-left:auto}

.feedback{margin:6px 0 4px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--paper-ui)}
.feedback .fb-q{margin:0 0 6px;font-weight:600}.feedback .stars{display:flex;gap:4px}
.feedback .star{font-size:28px;line-height:1;background:none;border:0;cursor:pointer;color:#c9c7d6;padding:0 2px;transition:color .1s,transform .1s}
.feedback .star.on{color:#f5a623}@media(hover:hover){.feedback .star:hover,.feedback .star:hover~.star{color:#f5a623}.feedback .stars:hover .star{color:#f5a623}.feedback .stars .star:hover~.star{color:#c9c7d6}}
.feedback .fb-label{margin:2px 0 8px;font-size:.85rem;color:var(--fg-2);min-height:1.2em}
.feedback textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;background:#fff;color:inherit;resize:vertical}
.feedback .row{margin-top:8px;gap:8px}.feedback.done .fb-q{color:var(--fg-2)}.btn.sm{padding:6px 12px;font-size:.9rem}

.glance{max-width:960px;margin:1.2rem auto 0;padding:1rem 1.25rem}.glance h2{font-size:1rem;color:var(--fg-2);margin:0 0 .6rem}
.glance dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.6rem 1.4rem;margin:0;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:12px;background:var(--paper-ui)}
.glance dl>div{margin:0}.glance dt{font-size:.8rem;color:var(--fg-2);margin:0}.glance dd{margin:.1rem 0 0;font-size:.95rem}
.cmp{max-width:960px;margin:1.5rem auto 0;padding:0 1.25rem}.tscroll{overflow-x:auto}.cmp table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:640px}
.cmp th,.cmp td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left;vertical-align:top}.cmp thead th{background:var(--paper-ui)}.cmp tbody th{font-weight:600;white-space:nowrap}
.cmp tbody td:nth-child(2){background:rgba(59,55,184,.06)}.updated{max-width:960px;margin:.2rem auto 0;padding:0 1.25rem;font-size:.85rem;color:var(--fg-2)}
.hint.long{color:#9a5b00;background:#fff6e5;border:1px solid #f5d9a8;border-radius:8px;padding:.5rem .7rem}.linkbtn{background:none;border:0;color:var(--brand,#3b37b8);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.hint.over{color:#b4232a;font-weight:600}

.faddr{max-width:1152px;margin:10px auto 0;color:var(--dim);font-size:12px;line-height:1.6}
.faddr b{color:inherit;font-weight:600}
.body.legal .prose p{white-space:pre-line}
/* 手机宽度: 顶栏只留 logo / 语言 / 登录图标 / 主按钮, 不再把页面撑宽 (英文和从右到左的语言都会超出) */
@media(max-width:640px){.nav{padding:0 12px;gap:8px}.nav-right{gap:6px;min-width:0}.auth .btn.google span{display:none}.auth .btn.google{padding:7px 9px}#lang-switch{max-width:96px}.nav .btn.primary{padding:8px 12px;white-space:nowrap}.nav .who .bal{display:none}}

/* 手机端: 进度日志里的长路径和按钮行不能把面板撑宽 (实测 375 宽屏面板被撑到 481) */
#job,#job-result,.composer,.hero-copy,.stage,.controls,.spick{min-width:0;max-width:100%}
#job-log{white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;max-width:100%}
#job-result .row{flex-wrap:wrap}
#job-result video{max-width:100%}

/* 竖屏成片: 不撑满宽度, 按高度限制并居中 */
#job-result.portrait video{aspect-ratio:9/16;height:72vh;width:auto;max-width:100%;margin-left:auto;margin-right:auto}

.announce{display:flex;justify-content:center;align-items:center;gap:.6rem;padding:.55rem 1rem;background:#ff6154;color:#fff;font-weight:600;font-size:.95rem;text-decoration:none;text-align:center}
.announce:hover{background:#e5493d;color:#fff}
.announce .tag{background:#fff;color:#ff6154;border-radius:999px;padding:.1rem .6rem;font-size:.8rem;letter-spacing:.02em}

/* 提交前的「要不要进公开画廊」弹窗 */
.modal[hidden]{display:none}   /* 作者样式的 display 会盖掉浏览器默认的 [hidden]{display:none}, 必须显式写回来 */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;
 background:color-mix(in srgb,var(--n950) 55%,transparent);backdrop-filter:blur(3px)}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 24px 60px rgba(0,0,0,.28);
 max-width:460px;width:100%;padding:24px}
.modal-card h3{margin:0 0 8px;font-size:18px;line-height:1.35}
.modal-card p{margin:0 0 16px;color:var(--fg-2);font-size:13.5px;line-height:1.6}
.modal-card .opt{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;
 padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:.15s}
.modal-card .opt:hover{border-color:var(--b300);background:var(--brand-soft)}
.modal-card .opt:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.modal-card .opt input{accent-color:var(--brand);width:16px;height:16px;flex:none}
.modal-act{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
@media(max-width:520px){.modal-act{flex-direction:column-reverse}.modal-act .btn{width:100%}}

/* 「我的视频」卡片墙 */
.lib-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:0 0 18px}
.lib-bar .filter{margin:0}
.lib-bar input[type=search]{flex:1 1 220px;max-width:320px;background:var(--panel);color:var(--fg);
 border:1px solid var(--line);border-radius:999px;padding:8px 14px;font:inherit;font-size:13.5px}
.lib-bar input[type=search]:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.vgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.vgrid .empty{grid-column:1/-1}
.vcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
 border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.15s}
.vcard:hover{border-color:var(--line-2);transform:translateY(-2px)}
.vthumb{position:relative;aspect-ratio:3/2;background:var(--paper);cursor:pointer;overflow:hidden;display:block}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vthumb.portrait img{object-fit:contain}
.vthumb .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
 background:color-mix(in srgb,var(--n950) 58%,transparent);backdrop-filter:blur(4px);transition:.15s}
.vthumb .play::before{content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);
 border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff}
.vthumb:hover .play{background:var(--brand);transform:translate(-50%,-50%) scale(1.08)}
.vthumb:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.vratio{position:absolute;right:8px;bottom:8px;background:color-mix(in srgb,var(--n950) 62%,transparent);
 color:#fff;font-size:11px;padding:2px 7px;border-radius:999px;backdrop-filter:blur(4px)}
.vthumb.state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;background:var(--paper-ui)}   /* 深色模式下别再用米色纸底, 文字看不清 */
.vthumb.state .vmsg{color:var(--fg);font-size:14px;font-weight:600;line-height:1.5}
.vthumb.failed .vmsg{color:var(--danger,#c0392b)}
.vbar{width:70%;height:6px;border-radius:999px;background:color-mix(in srgb,var(--fg) 14%,transparent);overflow:hidden}
.vbar i{display:block;height:100%;background:var(--brand);transition:width .4s}
.vbody{padding:12px 14px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.vtitle{margin:0;font-size:14.5px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vwhen{margin:0;color:var(--dim);font-size:12px}
.vchips{display:flex;flex-wrap:wrap;gap:6px}
.vchip{background:var(--bg-2);color:var(--fg-2);border:1px solid var(--line);border-radius:999px;padding:2px 9px;font-size:11.5px}
.vact{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:4px}
.vact .btn{flex:1}
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;
 background:var(--bg-2);color:var(--fg-2);border:1px solid var(--line);border-radius:9px;
 font-size:13px;line-height:1;cursor:pointer;text-decoration:none;transition:.15s}
.ibtn:hover{color:var(--brand);border-color:var(--b300);background:var(--brand-soft)}
@media(max-width:520px){.vgrid{grid-template-columns:1fr}.lib-bar input[type=search]{max-width:none}}

/* 顶栏登录态: 静态 HTML 里两套都有, 由 <head> 内联脚本按 wb_in 提示 cookie 选一套, 消除「先未登录再登录」的闪烁 */
.in-only{display:none}
.wb-in .out-only{display:none}
.wb-in .in-only{display:inline-flex}
.wskel{align-items:center;gap:8px}
.sk-av{width:28px;height:28px;border-radius:50%;background:var(--line);display:block}
.sk-nm{width:56px;height:10px;border-radius:999px;background:var(--line);display:block}
.wskel .sk-av,.wskel .sk-nm{animation:skp 1.2s ease-in-out infinite}
@keyframes skp{50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.wskel .sk-av,.wskel .sk-nm{animation:none}}

/* ---------- 右栏舞台: 空闲时放样片, 提交后放生成面板 (照竞品) */
.hero-preview[hidden],#job[hidden],.toast[hidden],.btn[hidden],.share[hidden]{display:none}   /* 作者样式的 display 会盖掉 [hidden], 逐个写回 */
.stage #job{padding:16px 18px 18px}
.job-head{gap:10px}
.job-head strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
.job-act{display:flex;gap:8px;flex:none}
.jdot{width:10px;height:10px;border-radius:50%;background:var(--dim);flex:none}
.jdot.queued,.jdot.running{background:#f59e0b;animation:jd 1.2s ease-in-out infinite}
.jdot.done{background:#22c55e}.jdot.failed{background:#ef4444}
@keyframes jd{50%{opacity:.35}}
.stage .log{max-height:200px}
.stage #job-result video{margin:4px 0 12px;border-radius:10px;background:#111}
.stage #job-result.portrait video{height:min(72vh,640px)}
#job-result .row{display:flex;align-items:center;gap:8px}
.share{display:inline-flex;gap:6px;margin-left:auto}
.sbtn{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;transition:.15s}
.sbtn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.sbtn.tw{background:#0f1419}.sbtn.fb{background:#1877f2}.sbtn.in{background:#0a66c2}
/* 生成中锁住生成器 */
.composer.locked{opacity:.55;pointer-events:none;user-select:none}
/* 左下角提示条 */
.toast{position:fixed;left:20px;bottom:20px;z-index:70;display:flex;align-items:center;gap:12px;max-width:380px;
 background:var(--panel);color:var(--fg);border:1px solid var(--line);border-left:4px solid #22c55e;border-radius:12px;
 padding:12px 10px 12px 16px;box-shadow:0 14px 40px rgba(0,0,0,.22);animation:tin .35s ease-out}
@keyframes tin{from{transform:translateY(16px);opacity:0}}
.toast .tk{width:24px;height:24px;border-radius:50%;background:#22c55e;color:#fff;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.toast .tbody{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.toast .tbody b{font-size:14px}.toast .tbody span{font-size:12.5px;color:var(--fg-2)}
.toast .x{background:none;border:0;color:var(--dim);font-size:20px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:8px}
.toast .x:hover{background:var(--bg-2);color:var(--fg)}
@media(max-width:520px){.toast{left:12px;right:12px;bottom:12px;max-width:none}}
/* 「我的视频」只给登录用户看, 未登录时整段不占位 (登录态由 <head> 内联脚本按 wb_in 提示 cookie 判断) */
html:not(.wb-in) #library{display:none}
section.library{padding-top:8px}

/* 账号菜单: 退出登录收进头像下拉 */
.auth{position:relative}
.auth .who{background:none;border:0;padding:4px 8px 4px 4px;border-radius:999px;cursor:pointer;font:inherit;color:inherit}
.auth .who:hover,.auth .who[aria-expanded="true"]{background:var(--bg-2)}
.auth .who::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--dim);margin-left:2px}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
 box-shadow:0 16px 40px rgba(0,0,0,.18);padding:6px;z-index:80;animation:tin .15s ease-out}
.acct-menu[hidden]{display:none}
.acct-id{padding:8px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;display:flex;flex-direction:column;gap:2px;min-width:0}
.acct-id b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-id span{font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-menu a{display:block;padding:8px 12px;border-radius:8px;color:var(--fg);text-decoration:none;font-size:13.5px}
.acct-menu a:hover{background:var(--bg-2)}
.acct-menu a.out{color:var(--danger,#c0392b);border-top:1px solid var(--line);margin-top:4px;border-radius:0 0 8px 8px}
@media(max-width:640px){.auth .who .nm{display:none}.auth .who::after{display:none}}

/* 评过分之后收成一行: 星星只读 + 「谢谢, 已记录」+ 改评价; 不再摆着表单让人重复提交 */
.feedback .fb-edit{display:none}
#feedback.done textarea,#feedback.done .row{display:none}
.feedback.done .stars{pointer-events:none}
.feedback.done .fb-label{display:inline;margin-right:10px}
.feedback.done .fb-edit{display:inline;font-size:12.5px;color:var(--dim);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.feedback.done .fb-edit:hover{color:var(--brand)}

/* 播放弹层 */
.pmodal[hidden]{display:none}
.pmodal{position:fixed;inset:0;z-index:65;display:flex;align-items:center;justify-content:center;padding:20px;
 background:color-mix(in srgb,var(--n950) 82%,transparent);backdrop-filter:blur(4px);animation:tin .15s ease-out}
.pm-box{width:min(1100px,96vw);max-height:94vh;display:flex;flex-direction:column;gap:10px}
.pm-head{display:flex;align-items:center;gap:12px;color:#fff}
.pm-head strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.pm-act{display:flex;align-items:center;gap:8px}
.pm-head .btn.ghost{color:#fff;border-color:rgba(255,255,255,.35);background:transparent}
.pm-head .btn.ghost:hover{background:rgba(255,255,255,.12)}
.pm-x{background:none;border:0;color:#fff;font-size:30px;line-height:1;cursor:pointer;padding:0 6px;opacity:.85}
.pm-x:hover{opacity:1}
#pm-video{width:100%;aspect-ratio:3/2;max-height:calc(94vh - 52px);background:#000;border-radius:12px;outline:none}   /* 先按 3:2 占位, 元数据没到也不会是 0 高 */
/* 竖屏: 盒子宽度由可用高度按 9:16 反推, 标题行也被约束在盒子里 (之前 width:auto 让长标题把盒子撑到 550px) */
.pmodal.portrait .pm-box{width:min(96vw,calc((94vh - 52px) * 0.5625))}
.pmodal.portrait #pm-video{width:100%;height:auto;aspect-ratio:9/16;max-height:calc(94vh - 52px)}

/* 播放弹层里的评分框 */
.pmodal.fb #pm-video{max-height:calc(94vh - 300px)}
.pmodal .feedback{margin:0}

/* ---------- 手机触控目标: 一律 ≥ 40px (用户要求所有改版兼顾手机) */
/* 触控目标 ≥40px。断点用 900 而不是 640: 平板 (iPad 竖屏 768) 也是手指操作,
   只靠 (pointer:coarse) 不保险 —— 而且它在无头测试里模拟不出来, 等于没有验证。 */
@media(max-width:900px),(hover:none) and (pointer:coarse){
  .tab{min-height:40px;padding:9px 14px}
  .chip{min-height:40px;padding:9px 14px;display:inline-flex;align-items:center}
  #style-open{min-height:40px;padding:9px 6px}
  #acct-btn{min-height:40px}
  .ibtn{width:40px;height:40px;font-size:15px}
  .btn.sm,.btn.small{min-height:40px;padding-top:9px;padding-bottom:9px}
  .vact .btn{min-height:40px}
  .filter .chip,#lib-bar .chip{min-height:40px;padding:8px 14px}
  .sbtn{width:40px;height:40px}
  #feedback .star{width:40px;height:40px;font-size:26px;line-height:40px;padding:0}
  .toast{bottom:max(12px,env(safe-area-inset-bottom))}
  .toast .x{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .pm-x{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .pm-head .btn{min-height:40px}
  .job-act .btn{min-height:40px}
  #job-result .row .btn{min-height:40px}
  .modal-act .btn{min-height:44px}
  .acct-menu a{padding:11px 12px;min-height:44px;display:flex;align-items:center}
  .auth .who{min-height:40px}
  .acct-menu{position:fixed;left:12px;right:12px;top:64px;min-width:0}   /* 头像不在最右了, 菜单改贴视口 */
  .grid .frame .play{width:56px;height:56px}
}

/* ================= 手机版布局 (≤640px) ================= */
.mnav-btn{display:none}
.mnav{display:none}
.more-opts{display:none}   /* 桌面端不折叠, 按钮只在手机上出现 */
@media(max-width:640px){
  /* 顶栏: logo · 头像 · 生成 · ☰ ; 语言下拉搬进菜单 */
  .nav-right #lang-switch{display:none}
  .mnav-btn{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:40px;height:40px;border:0;background:none;padding:0 9px;cursor:pointer;border-radius:8px}
  .mnav-btn span{display:block;height:2px;border-radius:2px;background:var(--fg);transition:.2s}
  .mnav-btn.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .mnav-btn.open span:nth-child(2){opacity:0}
  .mnav-btn.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .mnav[hidden]{display:none}
  .mnav{display:block;position:fixed;left:0;right:0;top:64px;bottom:0;z-index:19;background:var(--bg);padding:12px 16px 24px;overflow:auto;animation:tin .15s ease-out}
  .mnav nav{display:flex;flex-direction:column}
  .mnav nav a{display:block;padding:14px 12px;border-bottom:1px solid var(--line);color:var(--fg);font-size:16px;text-decoration:none}
  .mnav nav a.tg{color:var(--brand);font-weight:600}
  .mnav-lang{padding:18px 12px 0}
  .mnav-lang select{width:100%;font-size:15px;padding:10px 12px}
  .announce{font-size:13px;padding:8px 12px}
  .announce .tag{display:none}
  /* 首屏: 先是标题和输入框, 样片排到生成器后面; 有任务时结果面板回到最上面 */
  .hero{padding-top:20px}
  .hero-logo{display:none}
  .hero h1{font-size:26px;line-height:1.2;margin-bottom:10px}
  .hero .sub{font-size:15px;line-height:1.55;margin-bottom:16px}
  .stage{order:2;margin-top:20px;max-width:none;position:static}
  .stage.active{order:-1;margin:0 0 16px}
  /* 生成器: 只露输入框 + 语言/画风/时长 + 生成, 其余折叠 */
  .composer{padding:12px 12px 14px}
  .composer:not(.more) .ctl.adv{display:none}
  .more-opts{display:block;width:100%;background:none;border:1px dashed var(--line);border-radius:8px;color:var(--fg-2);font:inherit;font-size:13px;padding:9px;margin:2px 0 8px;cursor:pointer}
  .more-opts::after{content:" ▾"}
  .composer.more .more-opts::after{content:" ▴"}
  /* 我的视频: 横排紧凑卡片 */
  .lib-bar{gap:8px}
  .lib-bar .filter{gap:6px}
  .vgrid{gap:12px}
  .vcard{flex-direction:row;align-items:stretch}
  .vcard .vthumb{width:38%;flex:none;aspect-ratio:3/2;align-self:flex-start;border-radius:0}
  .vcard .vthumb .play{width:38px;height:38px}
  .vcard .vthumb .play::before{border-width:6px 0 6px 10px}
  .vthumb .vratio{right:6px;bottom:6px;font-size:10px;padding:1px 6px}
  .vthumb .vdur{position:absolute;left:6px;bottom:6px;background:color-mix(in srgb,var(--n950) 62%,transparent);color:#fff;font-size:10px;padding:1px 6px;border-radius:999px}
  .vthumb.state .vmsg{font-size:12.5px}
  .vthumb.state{padding:10px;gap:6px}
  .vbar{width:80%;height:5px}
  .vbody{padding:10px 12px;gap:4px;min-width:0}
  .vtitle{font-size:13.5px;line-height:1.35}
  .vwhen{font-size:11.5px}
  .vchips{display:none}
  .vact{gap:6px;padding-top:6px}
  .vact .btn{min-height:40px;padding:8px 10px;font-size:13px}
  .vact .ibtn{width:40px;height:40px}
  .vact .ibtn:last-child,.vact .ibtn[download][href$=".srt"]{display:none}   /* 手机上只留 下载 + 复制链接 */
  .vgrid .show-all{width:100%;min-height:44px;margin-top:4px}
  /* 样片墙: 两列, 首页只露前 6 条 */
  .grid{gap:10px;grid-template-columns:1fr 1fr}
  .grid figcaption{font-size:12px;padding:8px 10px 10px;gap:5px}
  .grid .frame .play{width:40px;height:40px}
  .examples:not(.gallery-first) #example-grid figure:nth-child(n+7){display:none}
  section.steps,section.examples,section.library{padding:32px 16px}
  section.examples h2,section.library h2{font-size:22px;margin-bottom:14px}
}
.vthumb .vdur{display:none}
@media(max-width:640px){.vthumb .vdur{display:inline-block}}
.more-link{text-align:center;margin:18px 0 0}
@media(min-width:641px){.more-link{display:none}}

/* 每日免费额度: 事前提示 + 用完弹窗 */
.quota[hidden]{display:none}
.quota{margin:2px 0 0;font-size:12.5px;color:var(--fg-2);display:flex;align-items:center;gap:6px}
.quota::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none}
.quota.warn{color:#b45309;font-weight:600}
.quota.warn::before{background:#f59e0b}
.quota.out{color:#b91c1c;font-weight:600}
.quota.out::before{background:#ef4444}
#quota-modal .modal-card{text-align:center}
#quota-modal .qmark{font-size:40px;line-height:1;margin-bottom:10px}
#quota-modal h3{margin:0 0 8px}
#quota-modal p{margin:0 0 16px}
.qmore{background:var(--brand-soft);border:1px solid var(--line);border-radius:10px;padding:12px 14px;text-align:left;display:flex;flex-direction:column;gap:3px}
.qmore b{font-size:13.5px}
.qmore span{font-size:12.5px;color:var(--fg-2);line-height:1.5}
#quota-modal .modal-act{justify-content:center}

/* 画风选择: 一行横滑缩略图 + 「全部 N 种」打开大图选择器 */
.spick-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 6px}
.pick-label{font-size:12px;color:var(--fg-2)}
.ctl.sel-hidden{display:none}
.spick{margin:0 0 14px}
.scards{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity;
 scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.scards::-webkit-scrollbar{height:6px}
.scards::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.scard{position:relative;flex:0 0 132px;scroll-snap-align:start;padding:0;border:2px solid var(--line);border-radius:10px;
 overflow:hidden;background:var(--paper);cursor:pointer;display:flex;flex-direction:column;transition:.15s;font:inherit;color:inherit;text-align:left}
.scard img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.scard span{padding:6px 8px;font-size:11.5px;line-height:1.3;color:var(--fg-2);background:var(--panel);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scard:hover{border-color:var(--b300)}
.scard.on{border-color:var(--brand)}
.scard.on span{color:var(--brand);font-weight:600;background:var(--brand-soft)}
.scard.on::after{content:"✓";position:absolute;right:6px;top:6px;width:20px;height:20px;border-radius:50%;
 background:var(--brand);color:var(--brand-fg);font-size:12px;line-height:20px;text-align:center;font-weight:700}
.smore{border:0;background:none;color:var(--brand);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
 padding:4px 2px;white-space:nowrap;border-radius:6px}
.smore:hover{text-decoration:underline}
/* 大图选择器 */
.smodal .modal-card{max-width:1040px;width:100%;max-height:88dvh;display:flex;flex-direction:column;padding:0;text-align:left}
.smodal-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.smodal-head h3{margin:0;font-size:17px;flex:1}
.smodal-head .pm-x{color:var(--fg-2);font-size:26px;min-width:40px;min-height:40px}
.smodal-head .pm-x:hover{color:var(--fg)}
.smodal-body{overflow:auto;padding:8px 20px 20px}
.sgroup{margin:14px 0 8px;font-size:12px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.sbig{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.scard.big{flex:none;width:auto}
.scard.big span{font-size:12.5px;padding:8px 10px}
@media(max-width:640px){
  .scard{flex:0 0 124px}
  .smore{min-height:40px;padding:8px 4px}
  .smodal .modal-card{width:100%;max-width:none;height:92dvh;max-height:none;border-radius:14px 14px 0 0}   /* 用 100% 而不是 100vw: vw 在部分环境按视觉视口算, 会把卡片顶出屏幕 */
  .smodal{align-items:flex-end;padding:0}
  .sbig{grid-template-columns:1fr 1fr;gap:10px}
  .smodal-body{padding:4px 14px 20px}
  .smodal-head .sall{display:none}      /* 弹窗里已经是全部画风了, 手机上这个链接只会把标题挤成两行 */
  .smodal-head{padding:14px 16px}
}
/* 画风对比页 */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.sfig{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
.sfig img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.sfig figcaption{padding:9px 12px;font-size:13px;color:var(--fg-2)}
@media(max-width:640px){.sgrid{grid-template-columns:1fr 1fr;gap:10px}.sfig figcaption{font-size:11.5px;padding:7px 9px}}