/* 带货视频智能体 · 方向 A「电影海报感」定稿（2026-09-12）
   设计令牌与全部客户页面样式。CSP 禁内联样式，画板里的 inline style 全部收在这里。
   深色为默认，浅色模式本期不做。 */

@font-face{
  font-family:"Studio Serif";
  src:url("assets/studio-serif-900.woff2") format("woff2");
  font-weight:900;font-style:normal;font-display:swap;
}

:root{
  --bg:#0E0D0B;
  --surface:rgba(243,238,228,0.05);
  --surface-2:#1A1714;
  --surface-3:#12110E;
  --line:rgba(243,238,228,0.12);
  --line-soft:rgba(243,238,228,0.08);
  --ink:#F3EEE4;
  --muted:rgba(243,238,228,0.55);
  --faint:rgba(243,238,228,0.38);
  --gold:#E6C36A;
  --gold-soft:rgba(230,195,106,0.35);
  --cta:#C1362A;
  --cta-ink:#FFF6EA;
  --error:#E8695C;
  --error-bg:rgba(193,54,42,0.1);
  --serif:"Studio Serif","Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif;
  --sans:-apple-system,"PingFang SC","Microsoft YaHei","Source Han Sans SC","Noto Sans SC",sans-serif;
  --shadow-card:0 24px 48px rgba(0,0,0,0.5);
  --shadow-float:0 30px 60px rgba(0,0,0,0.6);
  --radius-card:16px;
  --radius-input:10px;
  --nav-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;min-height:100vh}
img,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--gold);text-decoration:none}
h1,h2,h3{margin:0;font-weight:900}
.serif{font-family:var(--serif);font-weight:900}
.gold{color:var(--gold)}
[hidden]{display:none!important}

/* ---------- 头部 ---------- */
.site-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--nav-h);padding:0 64px;border-bottom:1px solid var(--line-soft);background:var(--bg)}
.brand{display:flex;align-items:baseline;min-height:44px;gap:10px;font-family:var(--serif);font-weight:900;font-size:20px;letter-spacing:0.06em;color:var(--ink);white-space:nowrap}
.brand-name:empty{display:none}
.brand-name{color:var(--gold)}
#studio-nav-slot{display:flex;align-items:center;flex:1;justify-content:center}
#studio-nav-slot .studio-runtime{display:contents}
.studio-runtime nav{display:flex;align-items:center;gap:32px;margin:0;padding:0}
.studio-runtime nav button{height:36px;padding:4px 0;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--muted);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap}
.studio-runtime nav button:hover{color:var(--ink)}
.studio-runtime nav button[data-nav="create"]{color:var(--ink);border-bottom-color:var(--gold)}
.studio-runtime nav button[data-nav="login"]{height:44px;padding:0 20px;border:1px solid var(--gold-soft);border-radius:999px;color:var(--gold)}
.studio-runtime nav button[data-nav="logout"]{font-size:13px;color:var(--faint)}
.studio-runtime>p[role=status]{position:absolute;left:0;right:0;top:100%;margin:0;padding:6px 64px;font-size:12px;color:var(--muted);background:var(--bg);border-bottom:1px solid var(--line-soft)}
.header-right{display:flex;align-items:center;gap:12px}
.balance-pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid var(--gold-soft);border-radius:999px;font-size:13px;color:var(--gold)}
.balance-pill b{font-weight:700;font-size:15px}
.balance-pill span{color:rgba(230,195,106,0.75)}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#8B2E22,#C9A84C);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--bg)}

/* ---------- 首屏 ---------- */
.page{width:100%;max-width:1440px;margin:0 auto}
/* 首屏样片撤掉后单列，创作条限宽居左 */
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:72px 64px 48px;align-items:start}
.hero-copy{display:flex;flex-direction:column;gap:32px;padding-top:24px;min-width:0}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:0.18em;color:var(--gold);text-transform:uppercase}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
.headline{font-family:var(--serif);font-weight:900;font-size:92px;line-height:1.08;letter-spacing:0.01em;color:var(--ink)}
.headline .gold{color:var(--gold)}
.sub{font-size:17px;line-height:1.8;color:rgba(243,238,228,0.68);max-width:560px;margin:0}
.hero-cost{font-size:12px;color:var(--faint);margin:0}

/* 创意输入区（作曲器模块外观） */
#composer-host{margin-top:8px}
#composer-host .ca-composer,#composer-host .ca-composer.composer{position:relative;display:flex;flex-direction:column;padding:0;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,0.45);color:var(--ink)}
#composer-host .composer-upper{display:flex;flex-direction:column;gap:0;min-height:0}
#composer-host textarea{margin:0;padding:22px 24px 8px;min-height:96px;font-size:16px}
#composer-host .ca-composer textarea{width:100%;min-height:96px;padding:22px 24px 8px;border:0;background:transparent;color:var(--ink);font-size:16px;line-height:1.7;resize:vertical;outline:none}
#composer-host .ca-composer textarea::placeholder{color:rgba(243,238,228,0.42)}
#composer-host .ca-assets{display:flex;flex-wrap:wrap;gap:8px;padding:12px 24px 0}
.ca-assets:empty{display:none}
#composer-host .ca-asset{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--muted)}
.ca-asset img{width:22px;height:22px;object-fit:cover;border-radius:4px}
.ca-asset button{border:0;background:none;color:var(--faint);cursor:pointer}
.ca-empty{display:none}
#composer-host .ca-toolbar{display:flex;align-items:center;gap:8px;padding:12px 16px 16px 20px}
#composer-host .ca-toolbar>button{height:34px;padding:0 12px;border:1px solid rgba(243,238,228,0.14);border-radius:999px;background:transparent;color:rgba(243,238,228,0.8);font-size:13px;cursor:pointer}
/* 2026-09-13 用户纠正「换皮不能减功能」：＋素材 / @引用 / 清空 全部可见 */
#composer-host .ca-toolbar>button:not(.ca-submit){display:inline-flex;align-items:center;justify-content:center;gap:6px}
#composer-host .ca-toolbar>button[aria-label="添加素材"],#composer-host .ca-toolbar>button[aria-label="引用商品或角色"]{width:34px;padding:0;font-size:17px;font-weight:600}
#composer-host .ca-toolbar>button:not(.ca-submit):hover{border-color:var(--gold);color:var(--gold)}
#composer-host .composer-clear{border-color:transparent;color:var(--faint)}
/* 「商品+ / 角色+」槽位：仿照原版面放在文本框上方，方块样式 */
#composer-host .composer-upper{padding:20px 24px 0}
#composer-host .composer-primary-assets{display:flex;gap:12px;margin-bottom:6px}
#composer-host .composer-slot{position:relative;display:inline-flex;align-items:center;justify-content:center;width:96px;height:96px;padding:0;border:1px dashed rgba(230,195,106,0.45);border-radius:14px;background:rgba(243,238,228,0.04);color:var(--gold);cursor:pointer}
#composer-host .composer-slot:hover{border-color:var(--gold);background:rgba(230,195,106,0.08)}
.composer-slot-label{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;background:rgba(14,13,11,0.85);color:var(--ink);font-size:11px;font-weight:600}
.composer-slot-plus{color:var(--gold);font-size:26px;line-height:1}
#composer-host .ca-composer textarea{padding:14px 0 8px}
#composer-host .ca-assets{padding:0 24px}
/* 创意 / 智能匹配 / 创作偏好 胶囊：可见、可用（创意选模板，创作偏好里的分辨率会带进下单表单） */
#composer-host .ca-settings-slot,#composer-host .pills{display:flex;align-items:center;gap:8px}
#composer-host .msettings-entries{display:flex;gap:8px}
#composer-host .msettings-entry{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border:1px solid rgba(243,238,228,0.14);border-radius:999px;background:transparent;color:rgba(243,238,228,0.8);font-size:13px;cursor:pointer}
#composer-host .msettings-entry:hover{border-color:var(--gold);color:var(--gold)}
/* 模块自带的弹层是浅色底，在深色主题里统一成深色 */
.ca-dialog,.msettings-dialog{background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:16px}
.ca-dialog input,.msettings-dialog input{background:rgba(243,238,228,0.06);color:var(--ink);border:1px solid var(--line)}
.ca-dialog button,.msettings-dialog button{color:var(--ink)}
.ca-dialog .ca-primary,.msettings-dialog .msettings-primary{background:var(--gold);color:var(--bg)}
.ca-dialog::backdrop,.msettings-dialog::backdrop{background:rgba(0,0,0,0.6)}
.ca-settings-slot:empty{display:none}
#composer-host .ca-toolbar>.ca-submit,#composer-host .ca-toolbar .ca-submit{width:auto;min-width:0;writing-mode:horizontal-tb;display:inline-flex;align-items:center;gap:10px;margin-left:auto;height:44px;padding:0 22px;border:0;border-radius:999px;background:var(--cta);color:var(--cta-ink);font-size:15px;font-weight:700;letter-spacing:0.04em;cursor:pointer}
#composer-host .ca-toolbar .ca-submit::after{content:"→"}
#composer-host .ca-toolbar .ca-submit:hover{filter:brightness(1.08)}
#composer-host .ca-status{margin:0;padding:0 24px 14px;font-size:12px;color:var(--faint)}
#composer-host .ca-status-error{color:var(--error)}
.composer-primary-assets[hidden]{display:none!important}
/* 设置胶囊（画质/时长），保留但按次要样式呈现 */
.pills .ms-pill,.ca-settings-slot button{height:30px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font-size:12px}

/* 成片展示位 9:16 */
.hero-clip{position:relative;width:400px;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:var(--surface-2);box-shadow:0 40px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(230,195,106,0.25);justify-self:center}
.hero-clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--surface-2)}
.hero-clip .clip-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,13,11,0) 55%,rgba(14,13,11,0.85) 100%);pointer-events:none;transition:opacity .3s}
.hero-clip .clip-badge{position:absolute;top:20px;left:20px;display:flex;align-items:center;gap:8px;height:28px;padding:0 10px;border-radius:6px;background:rgba(14,13,11,0.6);font-size:11px;letter-spacing:0.12em;color:var(--gold);pointer-events:none}
.hero-clip .clip-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cta)}
.hero-clip .clip-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border:0;border-radius:50%;background:rgba(243,238,228,0.92);color:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.hero-clip .clip-play svg{width:22px;height:22px}
.hero-clip .clip-meta{position:absolute;left:24px;right:24px;bottom:24px;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.hero-clip .clip-title{font-family:var(--serif);font-weight:900;font-size:26px;line-height:1.2;color:var(--ink)}
.hero-clip .clip-sub{font-size:12px;letter-spacing:0.1em;color:rgba(243,238,228,0.65)}
.hero-clip.playing .clip-shade,.hero-clip.playing .clip-play,.hero-clip.playing .clip-meta,.hero-clip.playing .clip-badge{opacity:0;pointer-events:none}

/* ---------- 模板陈列 ---------- */
.templates-section{display:flex;flex-direction:column;gap:28px;padding:24px 64px 96px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-top:1px solid rgba(243,238,228,0.1);padding-top:32px}
.section-title{font-family:var(--serif);font-weight:900;font-size:34px;color:var(--ink)}
.section-sub{font-size:14px;color:var(--muted);margin:6px 0 0}
#templates-host .marketing-templates{display:flex;flex-direction:column;gap:24px}
.mt-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.mt-categories{display:flex;gap:8px;flex-wrap:wrap}
.mt-category{height:34px;padding:0 16px;border:1px solid rgba(243,238,228,0.18);border-radius:999px;background:transparent;color:rgba(243,238,228,0.75);font-size:13px;cursor:pointer}
.mt-category[aria-pressed="true"]{background:var(--ink);color:var(--bg);font-weight:700;border-color:var(--ink)}
.mt-search{display:none}
.mt-notice{margin:0;font-size:13px;color:var(--gold)}
.mt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.mt-card{position:relative;aspect-ratio:9/16;border-radius:var(--radius-card);overflow:hidden;background:var(--surface-2);box-shadow:var(--shadow-card);isolation:isolate}
.mt-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,13,11,0) 50%,rgba(14,13,11,0.9) 100%);pointer-events:none;z-index:1}
.mt-card[data-hot="true"]{box-shadow:0 0 0 1px rgba(230,195,106,0.5),var(--shadow-card)}
.mt-card[data-hot="true"]::before{content:"热门";position:absolute;top:16px;left:16px;z-index:3;height:24px;padding:0 8px;border-radius:4px;background:var(--gold);color:var(--bg);font-size:11px;font-weight:700;letter-spacing:0.1em;display:flex;align-items:center}
.mt-preview{position:absolute;inset:0;margin:0;padding:0;border:0;background:none;cursor:pointer}
.mt-card-images{position:absolute;inset:0}
.mt-image-slot{position:absolute;inset:0}
.mt-image-slot:not(:first-child){display:none}
.mt-image{width:100%;height:100%;object-fit:cover}
.mt-image-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#1F1B17;color:rgba(230,195,106,0.45);font-size:12px}
.mt-card-body{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.mt-card-title{font-family:var(--serif);font-weight:900;font-size:24px;line-height:1.2;color:var(--ink)}
.mt-card-description{margin:0;font-size:13px;line-height:1.6;color:rgba(243,238,228,0.7)}
.mt-card-use{pointer-events:auto;align-self:flex-start;margin-top:4px;height:44px;padding:0 16px;border:1px solid var(--gold-soft);border-radius:999px;background:rgba(14,13,11,0.5);color:var(--gold);font-size:12px;font-weight:700;cursor:pointer}
.mt-card-use:disabled{opacity:.5;cursor:not-allowed}
.mt-empty{color:var(--muted);font-size:14px}
/* 预览弹层 */
.mt-modal-layer{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(14,13,11,0.85)}
.mt-modal{width:min(880px,100%);max-height:90vh;overflow:auto;padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-float)}
.mt-modal-title{font-family:var(--serif);font-weight:900;font-size:24px}
.mt-modal-description{color:var(--muted);font-size:14px}
.mt-modal-images{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0}
.mt-modal-images img,.mt-modal-video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px;background:var(--surface-3)}
.mt-modal-caption{font-size:12px;color:var(--faint)}
.mt-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.mt-button{height:44px;padding:0 20px;border:1px solid rgba(243,238,228,0.25);border-radius:999px;background:transparent;color:var(--ink);font-size:14px;font-weight:500;cursor:pointer}
.mt-button-primary{background:var(--cta);border-color:var(--cta);color:var(--cta-ink);font-weight:700}
.mt-close{border:0;background:none;color:var(--muted);font-size:20px;cursor:pointer}

/* ---------- 工作台抽屉（登录 / 注册 / 等待开通 / 下单 / 订单 / 个人中心） ---------- */
.studio-drawer{width:min(720px,94vw);max-height:90vh;overflow:auto;padding:28px 28px 32px;border:1px solid var(--line);border-radius:20px;background:var(--surface-2);color:var(--ink);font:15px/1.6 var(--sans);box-shadow:var(--shadow-float)}
.studio-drawer::backdrop{background:rgba(14,13,11,0.75);backdrop-filter:blur(6px)}
.studio-drawer h2{font-family:var(--serif);font-weight:900;font-size:24px;line-height:1.35;margin:0 0 14px}
.studio-drawer h3{font-size:16px;font-weight:700;margin:0}
.studio-drawer p{margin:0 0 10px;color:var(--muted);font-size:14px;line-height:1.7}
.studio-drawer ul{margin:0 0 12px;padding-left:18px;color:var(--muted);font-size:14px}
.studio-drawer form{display:grid;gap:16px;margin-top:8px}
.studio-drawer label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.studio-drawer input,.studio-drawer select,.studio-drawer textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid rgba(243,238,228,0.14);border-radius:var(--radius-input);background:rgba(243,238,228,0.06);color:var(--ink);font-size:15px;outline:none}
.studio-drawer input:focus,.studio-drawer select:focus,.studio-drawer textarea:focus{border-color:var(--gold)}
.studio-drawer input:user-invalid{border:1.5px solid var(--cta);background:var(--error-bg)}
.studio-drawer input::placeholder,.studio-drawer textarea::placeholder{color:rgba(243,238,228,0.4)}
.studio-drawer select{appearance:none;background-image:url("assets/icons/chevron.svg");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.studio-drawer select option{background:var(--surface-2);color:var(--ink)}
.studio-drawer textarea{min-height:96px;resize:vertical;line-height:1.6}
.studio-drawer details{border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:14px}
.studio-drawer summary{cursor:pointer;color:var(--gold);font-weight:500}
.studio-drawer details p{margin:6px 0 0}
/* 按钮 */
.studio-drawer button,.studio-runtime .studio-drawer button{height:44px;padding:0 18px;border:1px solid rgba(243,238,228,0.25);border-radius:999px;background:transparent;color:var(--ink);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap}
.studio-drawer button:hover{border-color:rgba(243,238,228,0.45)}
.studio-drawer button:disabled{opacity:.45;cursor:not-allowed}
.studio-drawer button.primary,.studio-drawer button[type=submit]{background:var(--cta);border-color:var(--cta);color:var(--cta-ink);font-weight:700;letter-spacing:0.04em;height:52px;padding:0 24px}
.studio-drawer button.gold{border-color:var(--gold);color:var(--gold)}
.studio-drawer button.quiet{border-color:transparent;color:var(--muted);height:44px;padding:0 10px}
.studio-drawer .studio-actions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
/* 反馈 */
.studio-drawer [role=alert]{margin:0 0 12px;padding:12px 14px;border:1px solid var(--cta);border-radius:10px;background:var(--error-bg);color:var(--error);font-size:14px;line-height:1.6}
.studio-drawer [role=status].flash,.studio-drawer>p[role=status]{padding:10px 14px;border-radius:10px;background:var(--ink);color:var(--bg);font-weight:500}
/* 下单表单：三段式 */
.studio-step{display:flex;align-items:baseline;gap:10px;margin:14px 0 2px;padding-top:14px;border-top:1px solid var(--line-soft)}
.studio-step:first-of-type{border-top:0;padding-top:0;margin-top:4px}
.studio-step b{font-family:var(--serif);font-weight:900;font-size:22px;color:var(--gold)}
.studio-step span{font-size:16px;font-weight:700;color:var(--ink)}
.studio-step small{font-size:12px;color:rgba(243,238,228,0.45)}
.studio-upload-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.studio-upload-grid label{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;text-align:center;font-size:12px;color:rgba(243,238,228,0.7)}
.studio-upload-grid label::before{content:"上传";display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:3/4;border:1.5px dashed rgba(243,238,228,0.25);border-radius:10px;color:rgba(243,238,228,0.55);font-size:12px;order:-1}
.studio-upload-grid label.filled::before{content:"已选择 ✓";border:1px solid rgba(230,195,106,0.6);color:var(--gold);background:rgba(230,195,106,0.08)}
.studio-upload-grid input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;min-height:0;padding:0}
.studio-estimate{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid rgba(230,195,106,0.3);border-radius:14px;background:linear-gradient(160deg,rgba(230,195,106,0.16),rgba(230,195,106,0.04));color:var(--ink)}
.studio-estimate .est-label{font-size:13px;letter-spacing:0.1em;color:var(--gold)}
.studio-estimate .est-big{display:flex;align-items:baseline;gap:8px}
.studio-estimate .est-big b{font-family:var(--serif);font-weight:900;font-size:44px;line-height:1}
.studio-estimate .est-big span{font-size:14px;color:rgba(243,238,228,0.7)}
.studio-estimate .est-line{padding-top:12px;border-top:1px solid rgba(230,195,106,0.25);font-size:14px;color:rgba(243,238,228,0.75)}
.studio-estimate.short{border-color:var(--cta);background:var(--error-bg)}
.studio-estimate.short .est-line{color:var(--error);font-weight:700}
p.studio-estimate:empty{display:none}
/* 订单卡 */
.studio-order{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);display:grid;gap:8px}
.studio-order h3{font-size:16px;font-weight:700}
.studio-order p{margin:0;font-size:13px;color:var(--muted);word-break:break-all;overflow-wrap:anywhere}
.studio-order video,.studio-first-frame{width:min(100%,240px);aspect-ratio:9/16;object-fit:cover;border-radius:10px;background:var(--surface-3)}
.studio-order a{color:var(--gold);margin-right:10px}
.studio-order button{height:44px;padding:0 14px;font-size:13px}
.studio-order button.primary{height:44px}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;font-size:11px;vertical-align:middle;margin-left:4px}
.tag-wait{border:1px solid rgba(230,195,106,0.5);color:var(--gold)}
.tag-active{background:var(--gold);color:var(--bg);font-weight:700}
.tag-done{background:var(--ink);color:var(--bg);font-weight:700}
.tag-error{border:1px solid var(--cta);color:var(--error)}
.tag-muted{border:1px solid rgba(243,238,228,0.25);color:var(--muted)}
/* 个人中心 */
.studio-lib{margin:18px 0 0;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.studio-lib h3{margin:0 0 8px;font-size:15px}
.studio-lib>p{margin:0 0 8px;font-size:13px;color:var(--muted)}
.studio-lib-row{padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:13px;line-height:1.6;color:var(--muted)}
.studio-lib-row:last-child{border-bottom:0}
.studio-lib-row strong{color:var(--ink)}
.studio-lib-row a{margin-left:10px}
.studio-balance{display:flex;align-items:baseline;gap:8px;margin:4px 0 10px}
.studio-balance b{font-family:var(--serif);font-weight:900;font-size:44px;line-height:1;color:var(--ink)}
.studio-balance span{font-size:14px;color:rgba(243,238,228,0.7)}
.studio-lib.wallet{border-color:rgba(230,195,106,0.3);background:linear-gradient(160deg,rgba(230,195,106,0.18),rgba(230,195,106,0.04))}
.studio-plans .studio-lib-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.studio-plans button{margin-left:auto;height:44px;padding:0 14px;font-size:13px}
/* 等待开通 */
.studio-qr{display:block;width:176px;height:176px;margin:12px auto;padding:8px;border-radius:10px;background:#F3EEE4}
.studio-contact{margin:10px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.studio-contact p{margin:3px 0;font-size:14px;color:var(--ink)}
/* 开发中 / 已隔离功能：管理员可见 */
.studio-dev-admin{border:2px dashed var(--gold);border-radius:10px;padding:12px 14px;margin:14px 0;background:repeating-linear-gradient(135deg,rgba(230,195,106,.06) 0 10px,rgba(230,195,106,.12) 10px 20px)}
.studio-dev-admin>p:first-child{margin:0 0 8px;font-weight:600;color:var(--gold)}
.studio-feature-off{border:1px solid rgba(243,238,228,.18);border-radius:10px;padding:10px 12px;margin:4px 0;background:rgba(243,238,228,.03)}
.studio-feature-off>p:first-child{margin:0 0 6px;font-weight:600;color:var(--faint)}
.studio-feature-off textarea[disabled]{opacity:.5;cursor:not-allowed}
.studio-feature-off p{color:var(--faint);font-size:.92em}
.studio-feature-off.studio-feature-on{border-color:transparent;background:transparent;padding:0}
.studio-feature-off.studio-feature-on p{color:inherit}

/* ---------- 页脚 ---------- */
.site-footer{padding:24px 64px 40px;text-align:center;font-size:11px;letter-spacing:0.06em;color:rgba(243,238,228,0.3)}

/* ---------- 原型遗留区域：对终端用户隐藏，不删除（page-1.js 仍依赖这些节点） ---------- */
.legacy{display:none!important}

/* ---------- 手机（≤ 767px） ---------- */
@media (max-width:767px){
  :root{--nav-h:56px}
  body{padding-bottom:88px}
  .site-header{padding:0 20px;gap:10px}
  .brand{font-size:18px}
  .studio-runtime>p[role=status]{padding:6px 20px}
  .header-right .avatar{display:none}
  .balance-pill{height:32px;padding:0 12px;font-size:12px}
  .balance-pill b{font-size:14px}
  /* 底部三栏导航 */
  #studio-nav-slot{position:fixed;left:0;right:0;bottom:0;z-index:50;height:72px;padding-bottom:8px;border-top:1px solid rgba(243,238,228,0.1);background:var(--bg)}
  .studio-runtime nav{width:100%;height:100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0}
  .studio-runtime nav button{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;border:0!important;border-radius:0;font-size:11px;color:var(--muted);background:none}
  .studio-runtime nav button[data-nav="create"]{color:var(--gold)}
  .studio-runtime nav button[data-nav="login"]{color:var(--gold)}
  .studio-runtime nav button::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
  .studio-runtime nav button[data-nav="create"]{--icon:url("assets/icons/nav-create.svg")}
  .studio-runtime nav button[data-nav="orders"]{--icon:url("assets/icons/nav-orders.svg")}
  .studio-runtime nav button[data-nav="account"]{--icon:url("assets/icons/nav-account.svg")}
  .studio-runtime nav button[data-nav="login"]{--icon:url("assets/icons/nav-login.svg")}
  .studio-runtime nav button[data-nav="logout"]{--icon:url("assets/icons/nav-logout.svg")}
  .hero{grid-template-columns:1fr;gap:20px;padding:16px 20px 0}
  .hero-copy{gap:20px;padding-top:0}
  .eyebrow{font-size:11px;letter-spacing:0.16em}
  .eyebrow::before{width:20px}
  .headline{font-size:38px;line-height:1.2}
  .sub{font-size:14px}
  .hero-clip{width:100%;max-width:335px;border-radius:18px;margin:0 auto}
  .hero-clip .clip-title{font-size:22px}
  .hero-clip .clip-play{width:56px;height:56px}
  .ca-composer{border-radius:14px}
  .ca-composer textarea{min-height:80px;padding:16px 18px 6px;font-size:15px}
  .ca-toolbar{flex-wrap:wrap;padding:8px 12px 12px}
  .ca-toolbar .ca-submit{width:100%;justify-content:center;height:52px;margin:6px 0 0;font-size:16px}
  .hero-cost{text-align:center}
  .templates-section{gap:16px;padding:32px 20px 40px}
  .section-head{align-items:baseline;border-top:0;padding-top:0}
  .section-title{font-size:24px}
  .section-sub{font-size:12px}
  .mt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .mt-card{border-radius:12px;box-shadow:none}
  .mt-card[data-hot="true"]{box-shadow:0 0 0 1px rgba(230,195,106,0.5)}
  .mt-card[data-hot="true"]::before{top:10px;left:10px;height:22px;font-size:10px}
  .mt-card-body{left:12px;right:12px;bottom:12px;gap:4px}
  .mt-card-title{font-size:17px}
  .mt-card-description{font-size:11px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mt-card-use{height:44px;padding:0 14px;font-size:12px}
  .mt-modal-layer{padding:0;align-items:flex-end}
  .mt-modal{max-height:92vh;border-radius:20px 20px 0 0}
  /* 抽屉在手机上是全屏页 */
  .studio-drawer{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:16px 20px 120px;border:0;border-radius:0;background:var(--bg)}
  .studio-drawer h2{font-size:22px;padding-right:80px}
  .studio-drawer>button:first-of-type{position:fixed;top:8px;right:8px;z-index:2;height:44px;padding:0 12px;border-color:transparent;color:var(--muted);background:var(--bg)}
  .studio-drawer button{height:44px}
  .studio-drawer button.primary,.studio-drawer button[type=submit]{width:100%;height:52px}
  .studio-upload-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .studio-order video,.studio-first-frame{width:100%;max-width:240px}
  .site-footer{padding:24px 20px 32px}
}

/* ---------- 中等宽度（768–1099px） ---------- */
@media (min-width:768px) and (max-width:1099px){
  .site-header{padding:0 32px}
  .hero{grid-template-columns:1fr;gap:0;padding:48px 32px 40px}
  .headline{font-size:64px}
  .hero-clip{width:320px}
  .templates-section{padding:24px 32px 72px}
  .mt-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .studio-runtime nav{gap:20px}
}

/* 估算卡在第一次「查看估算」之前不显示 */
.studio-estimate:not(.ready){display:none}

/* 模板卡：压过模块自带样式（templates.css 用 :where，特异性为零，这里只是保险） */
#templates-host .mt-card{background:var(--surface-2);border:0}
#templates-host .mt-card-images{display:block;position:absolute;inset:0;height:100%;padding:0;gap:0}
#templates-host .mt-image-slot:first-child{position:absolute;inset:0;height:100%;aspect-ratio:auto;border-radius:0;background:var(--surface-2)}
#templates-host .mt-card-description{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#templates-host .mt-card-use{position:static;opacity:1;pointer-events:auto}

/* 手机端最小点击目标 44px：分类胶囊 */
@media (max-width:767px){.mt-category{height:44px;padding:0 18px}.mt-categories{gap:10px}}

/* 第八轮 R8-1 / R8-7 / 上传预览 */
.studio-drawer,.studio-runtime{font-variant-numeric:tabular-nums}
.studio-drawer summary{display:flex;align-items:center;min-height:44px}
.studio-order a,.studio-lib-row a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.studio-upload-grid label{overflow:hidden}
.studio-upload-preview{position:absolute;left:0;top:0;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;pointer-events:none}

.studio-upload-grid label.invalid::before{content:"只能上传图片";border-color:var(--cta);color:var(--error);background:var(--error-bg)}

/* 注册验证码行、未开通置灰、弹窗内成功横幅（2026-09-13） */
.studio-code-row{display:flex;gap:8px}
.studio-code-row input{flex:1;min-width:0}
.studio-code-row button{flex:0 0 auto;height:48px;padding:0 14px;white-space:nowrap}
.studio-runtime nav button.pending{opacity:.45;cursor:not-allowed}
.studio-drawer p.flash{padding:10px 14px;border-radius:10px;background:var(--ink);color:var(--bg);font-weight:500}

/* 法律页面链接与注册勾选（2026-09-14） */
.footer-links{display:flex;justify-content:center;gap:20px;margin-bottom:8px}
.footer-links a{color:var(--muted);min-height:44px;display:inline-flex;align-items:center}
.studio-agree{display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.6;color:var(--muted)}
.studio-agree input{width:18px;height:18px;min-height:0;margin:2px 0 0;padding:0;accent-color:var(--gold);flex:0 0 18px}
.studio-agree a{color:var(--gold)}

@media(max-width:640px){#composer-host .composer-upper{padding:14px 16px 0}#composer-host .composer-slot{width:72px;height:72px}#composer-host .ca-toolbar{flex-wrap:wrap}}
/* composer.css 给非空设置槽加了上边框和间距，深色版面里是一条多余的横线 */
#composer-host .ca-settings-slot:not(:empty){margin-top:0;border-top:0;padding-top:0}

/* ---------- 深色主题：创作条与偏好设置的弹层（模块自带浅色样式整体压成深色，第十四轮 R14-2） ---------- */
.ca-dialog,.msettings-dialog{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
.ca-dialog h2,.msettings-dialog h2,.msettings-dialog h3,.msettings-columns>section>h3,.msettings-plan-info h3{color:var(--ink)}
.ca-dialog .ca-empty,.msettings-notice,.msettings-hint,.msettings-empty,.msettings-selection-hint,.msettings-choice small,.msettings-radio small{color:var(--muted)}
.ca-composer .ca-dialog button{background:rgba(243,238,228,0.06);color:var(--ink);border:1px solid var(--line)}
.ca-composer .ca-dialog button:hover{background:rgba(243,238,228,0.12)}
.ca-composer .ca-dialog [aria-pressed=true]{background:rgba(230,195,106,0.18);border-color:var(--gold);color:var(--gold)}
.ca-composer .ca-dialog .ca-primary{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.ca-composer .ca-dialog .ca-primary:disabled{opacity:.45}
.ca-composer .ca-dialog .ca-close{background:transparent;border:0;color:var(--muted)}
.ca-dialog input{background:rgba(243,238,228,0.06);color:var(--ink);border:1px solid var(--line)}
.ca-dialog .ca-material-menu hr{border-top-color:var(--line)}
.msettings-close,.msettings-scroll-next{background:rgba(243,238,228,0.1);color:var(--ink)}
.msettings-search,.msettings-field select{background:rgba(243,238,228,0.06);color:var(--ink);border-color:var(--line)}
.msettings-card{border-color:var(--line)}
.msettings-card:has([aria-checked=true]){border-color:var(--gold)}
.msettings-choice{background:rgba(243,238,228,0.04);color:var(--ink)}
.msettings-choice[aria-checked=true]{background:rgba(230,195,106,0.18);color:var(--gold)}
.msettings-preview-button{background:transparent;border-top-color:var(--line);color:var(--muted)}
.msettings-preview,.msettings-plan-description{background:rgba(243,238,228,0.06);color:var(--ink)}
.msettings-footer{border-top-color:var(--line)}
.msettings-primary{background:var(--gold);color:var(--bg)}
.msettings-secondary{background:rgba(243,238,228,0.1);color:var(--ink)}
.msettings-group{border-bottom-color:var(--line)}
.msettings-models{border-color:var(--line)}
.msettings-radio{background:rgba(243,238,228,0.04);color:var(--ink);border-color:var(--line)}
.msettings-radio[aria-checked=true]{background:rgba(230,195,106,0.18);border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold)}
.msettings-filter,.msettings-category{background:rgba(243,238,228,0.04);color:var(--ink);border-color:var(--line)}
.msettings-filter[aria-pressed=true],.msettings-category[aria-pressed=true]{background:rgba(230,195,106,0.18);border-color:var(--gold);color:var(--gold)}
.msettings-plan{border-color:var(--line)}
.msettings-plan:has([data-select][aria-pressed=true]){border-color:var(--gold)}
.msettings-thumbnail{background:rgba(243,238,228,0.08);color:var(--muted)}
.msettings-expand,.msettings-select{background:rgba(243,238,228,0.06);color:var(--ink);border-color:var(--line)}
.msettings-select[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:var(--bg)}

/* ---------- 2026-09-13 首页逻辑重构：创意 chip、样片卡、一步式确认单 ---------- */
#composer-host .composer-upper-row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
#composer-host .composer-creative{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;background:rgba(243,238,228,0.06);border:1px solid var(--line);font-size:13px;color:var(--muted)}
#composer-host .composer-creative b{color:var(--ink);font-weight:600}
#composer-host .composer-creative.chosen{border-color:rgba(230,195,106,0.5);background:rgba(230,195,106,0.1)}
#composer-host .composer-creative.chosen b{color:var(--gold)}
#composer-host .composer-creative-hint{color:var(--faint);font-size:12px}
#composer-host .ca-composer textarea{min-height:120px;white-space:pre-wrap}
/* 模板卡样片层 */
.mt-card .mt-sample{position:absolute;inset:0;z-index:0;pointer-events:none}
.mt-sample-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--surface-2)}
.mt-sample button{pointer-events:auto;position:absolute;z-index:3;border:0;cursor:pointer;font:inherit}
.mt-sample-play{left:50%;top:44%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(243,238,228,0.92);color:var(--bg);font-size:20px;display:flex;align-items:center;justify-content:center;padding:0 0 0 4px;transition:opacity .2s}
.mt-sample.playing .mt-sample-play{opacity:0;pointer-events:none}
.mt-sample-sound,.mt-sample-replicate{top:14px;height:28px;padding:0 10px;border-radius:999px;background:rgba(14,13,11,0.7);color:var(--ink);font-size:12px;backdrop-filter:blur(4px)}
.mt-sample-sound{right:14px}
.mt-sample-sound[aria-pressed="true"]{background:var(--gold);color:var(--bg);font-weight:700}
.mt-sample-replicate{right:14px;top:50px;border:1px solid rgba(230,195,106,0.6);color:var(--gold)}
.mt-sample-replicate:hover{background:var(--gold);color:var(--bg)}
.mt-card[data-hot="true"] .mt-sample-sound,.mt-card[data-hot="true"] .mt-sample-replicate{top:14px}
.mt-card[data-hot="true"] .mt-sample-replicate{top:50px}
.mt-sample-pending{position:absolute;top:16px;right:16px;z-index:3;height:24px;padding:0 8px;border-radius:4px;background:rgba(14,13,11,0.7);color:var(--muted);font-size:11px;display:inline-flex;align-items:center;pointer-events:none}
/* 一步式确认单 */
.quick-create .qc-summary{display:flex;flex-direction:column;gap:4px;padding:12px 14px;margin:0 0 12px;border-radius:10px;background:rgba(230,195,106,0.1);border:1px solid rgba(230,195,106,0.35)}
.quick-create .qc-summary b{color:var(--gold);font-size:15px}
.quick-create .qc-summary span{font-size:12px;color:var(--muted)}
.quick-create textarea{width:100%;min-height:64px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:rgba(243,238,228,0.06);color:var(--ink);font:inherit;resize:vertical}
.qc-done h3{font-family:var(--serif);font-weight:900;font-size:22px;margin:8px 0}
.qc-done p{color:var(--muted);line-height:1.7}
@media (max-width:767px){.mt-sample-play{width:44px;height:44px;font-size:16px}.mt-sample-sound,.mt-sample-replicate{height:26px;font-size:11px;top:10px;right:10px}.mt-sample-replicate{top:42px}.mt-card[data-hot="true"] .mt-sample-sound{top:10px}.mt-card[data-hot="true"] .mt-sample-replicate{top:42px}}

/* 下载页按钮 */
.legal .button-cta{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:999px;background:var(--cta);color:var(--cta-ink);font-weight:700;font-size:15px}

/* 样片声音按钮：小喇叭图标，静音态打叉 */
.mt-sample-sound{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.mt-sample-sound svg{display:block}

/* ---------- 2026-09-14 布局校正（用户）：首屏居中、创作条与模板区等宽、页头标题居中 ---------- */
.hero{padding:56px 64px 40px}
.hero-copy{max-width:none;align-items:center;text-align:center}
.hero-copy .eyebrow{justify-content:center}
.hero-copy .eyebrow::after{content:"";width:28px;height:1px;background:var(--gold)}
.hero-copy .headline{margin-left:auto;margin-right:auto}
.hero-copy .sub{max-width:720px;margin-left:auto;margin-right:auto}
#composer-host{width:100%;text-align:left}
.hero-cost{text-align:center}
/* 页头：标题绝对居中，导航靠右；平板宽度会重叠，退回左对齐 */
@media (min-width:1100px){
  .site-header{position:sticky;justify-content:flex-end}
  .site-header .brand{position:absolute;left:50%;transform:translateX(-50%)}
  #studio-nav-slot{flex:0 0 auto;justify-content:flex-end}
}
@media (max-width:767px){
  .site-header{justify-content:flex-end}
  .site-header .brand{position:absolute;left:50%;transform:translateX(-50%)}
  .hero{padding:24px 20px 0}
  .hero-copy .sub{font-size:14px}
}

/* 手机页头：标题居中时与右侧积分胶囊不能重叠——标题略小，胶囊只留数字 */
@media (max-width:767px){
  .site-header .brand{font-size:16px;letter-spacing:0.04em}
  .balance-pill{height:30px;padding:0 10px;gap:4px}
  .balance-pill span{display:none}
  .balance-pill b{font-size:13px}
}

.studio-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:100;padding:10px 16px;border-radius:999px;background:rgba(243,238,228,0.92);color:var(--bg);font-size:13px}

/* ---------- 2026-09-14 首页控件布局与字号校正（用户：「有些字比较小」「重新优化首页控件的布局」） ---------- */
/* 字号下限 13px：把 11–12px 的说明文字统一抬高，正文与导航略放大 */
.studio-runtime nav button{font-size:15px}
.eyebrow{font-size:13px}
.sub{font-size:18px}
.hero-cost{font-size:14px;color:var(--muted)}
#composer-host .ca-status{font-size:13px;color:var(--muted);line-height:1.6}
#composer-host .ca-toolbar>button{font-size:14px;height:36px}
#composer-host .composer-creative{height:34px;font-size:14px}
#composer-host .composer-creative-hint{font-size:13px}
.composer-slot-label{height:22px;font-size:12px}
.mt-category{height:36px;font-size:14px}
.mt-card-use{font-size:13px}
.mt-sample-sound,.mt-sample-replicate{font-size:13px}
.mt-sample-pending{font-size:12px}
.mt-card[data-hot="true"]::before{font-size:12px}
.site-footer{font-size:13px}
.studio-agree{font-size:13px}
.quick-create .qc-summary span{font-size:13px}
/* 登录/开通状态提示：PC 居中显示在页头正下方，不再贴在左上角 */
.studio-runtime>p[role=status]{text-align:center;font-size:13px;padding:8px 64px}
@media (max-width:767px){
  /* 手机：提示原先被定位到底部导航之下，用户根本看不到；改为贴在底部导航上方 */
  .studio-runtime>p[role=status]{position:absolute;top:auto;bottom:100%;left:0;right:0;padding:8px 20px;font-size:13px;line-height:1.45;border-bottom:0;border-top:1px solid rgba(243,238,228,0.1)}
  body{padding-bottom:128px}
  .studio-runtime nav button{font-size:12px}
  .eyebrow{font-size:12px}
  .hero-copy .sub{font-size:16px}
  .hero-cost{font-size:13px}
  .section-sub{font-size:13px}
  .mt-card-description{font-size:12px}
  .mt-card-use{font-size:13px}
  /* 输入框：占位示例有三行，原高度装不下会出现滚动条 */
  #composer-host .ca-composer textarea{min-height:136px;font-size:15px}
  /* 工具栏：第一行「+ @ …… 清空」，第二行创意与偏好，最后一行整宽的「开始生成」 */
  #composer-host .ca-toolbar{gap:8px 8px;padding:10px 14px 14px}
  #composer-host .ca-toolbar>.composer-clear{order:2;margin-left:auto}
  #composer-host .ca-toolbar>.ca-settings-slot{order:3;width:100%;margin:0}
  #composer-host .ca-toolbar>.ca-submit,#composer-host .ca-toolbar .ca-submit{order:9;width:100%;justify-content:center;height:52px;margin:4px 0 0;font-size:16px}
}
/* 创意胶囊：文字放大后在窄屏会把「创意：」拆成两行，改为整体可换行、词内不断行 */
#composer-host .composer-creative{height:auto;min-height:34px;padding:5px 12px;flex-wrap:wrap;row-gap:2px}
#composer-host .composer-creative>*{white-space:nowrap}
/* 创作条与下方模板区等宽对齐：覆盖 composer-integration.css 里的 margin:0 97px / 5%（用户 2026-09-14：「拉到和下面的分区一样宽」） */
.hero-copy #composer-host,#composer-host{margin:8px 0 0;width:100%;max-width:none}
@media (max-width:1300px){.hero-copy #composer-host,#composer-host{margin:8px 0 0}}
/* 创作条内部字号与页面正文对齐（用户 2026-09-14：「对话框里的文字字体有点小」）：PC 档输入 18px、按钮 15px、说明 14px */
@media (min-width:768px){
  #composer-host .ca-composer textarea,#composer-host textarea{min-height:128px;padding:24px 28px 12px;font-size:18px;line-height:1.7}
  #composer-host .ca-assets{padding:20px 28px 0}
  #composer-host .composer-slot{width:108px;height:108px}
  .composer-slot-label{height:24px;padding:0 8px;font-size:13px}
  #composer-host .composer-creative{min-height:38px;padding:6px 14px;font-size:15px}
  #composer-host .composer-creative-hint{font-size:14px}
  #composer-host .ca-toolbar{gap:10px;padding:14px 24px 18px 28px}
  #composer-host .ca-toolbar>button{height:40px;padding:0 16px;font-size:15px}
  #composer-host .ca-toolbar>button[aria-label="添加素材"],#composer-host .ca-toolbar>button[aria-label="引用商品或角色"]{width:40px;font-size:19px}
  #composer-host .ca-toolbar>.ca-submit,#composer-host .ca-toolbar .ca-submit{height:50px;padding:0 28px;font-size:17px}
  #composer-host .ca-status{padding:0 28px 18px;font-size:14px}
  .hero-cost{font-size:15px}
}
/* 模板区文字同步放大（用户 2026-09-14：「这些文字也有一点小」） */
@media (min-width:768px){
  .section-title{font-size:36px}
  .section-sub{font-size:16px;margin-top:8px}
  .mt-category{height:40px;padding:0 20px;font-size:15px}
  .mt-categories{gap:10px}
  .mt-card-title{font-size:26px}
  .mt-card-description{font-size:14px;line-height:1.6}
  .mt-card-use{height:46px;padding:0 20px;font-size:14px}
  .mt-sample-sound,.mt-sample-replicate{font-size:14px;height:30px}
  .mt-sample-pending,.mt-card[data-hot="true"]::before{font-size:13px;height:26px}
  .site-footer{font-size:14px}
  .footer-links{gap:28px}
}

/* 启动遮罩（R20-1）：冷启动后脚本挂载前页面看似就绪但点击无效，用遮罩挡住并明示「加载中」；就绪后由 studio-workspace 撤掉，最长 8 秒兜底 */
.boot-veil{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;gap:12px;background:rgba(14,13,11,0.82);color:var(--muted);font-size:15px;backdrop-filter:blur(2px)}
.boot-spinner{width:22px;height:22px;border-radius:50%;border:2px solid rgba(230,195,106,0.25);border-top-color:var(--gold);animation:boot-spin 0.9s linear infinite}
@keyframes boot-spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   2026-09-13 UI 设计师 · 首页版式与字号整体优化（PC / 平板 / 手机）
   原则：功能控件一个不增不减；只在 theme.css 末尾用同级或更高优先级覆盖；
   字号统一走令牌（PC 一套、手机一套），方便以后整体调档。
   ========================================================================== */
:root{
  --fs-display:clamp(64px,5.5vw,88px); /* 首屏大标题 */
  --fs-h2:32px;      /* 版块标题 */
  --fs-lead:18px;    /* 副标 / 引导句 */
  --fs-input:17px;   /* 输入框正文 */
  --fs-ui:15px;      /* 胶囊、分类、导航、次要按钮 */
  --fs-cta:17px;     /* 主按钮 */
  --fs-note:14px;    /* 说明、状态、页脚 */
  --fs-min:13px;     /* 下限：槽位标签、角标 */
  --pad-x:64px;      /* 页面左右留白 */
}
@media (min-width:768px) and (max-width:1099px){
  :root{--fs-display:60px;--fs-h2:30px;--fs-lead:17px;--pad-x:32px}
}
@media (max-width:767px){
  :root{--fs-display:38px;--fs-h2:26px;--fs-lead:16px;--fs-input:16px;--fs-ui:14px;--fs-cta:16px;--fs-note:13px;--fs-min:12px;--pad-x:20px}
}

/* ---- 页头 ---- */
.site-header{padding:0 var(--pad-x)}
.studio-runtime nav button{font-size:var(--fs-ui)}
.balance-pill{font-size:var(--fs-note)}
/* 标题居中只在 ≥1400 保留；1100–1399 登录后右侧有 4 项导航 + 积分 + 头像，居中会与标题重叠，退回左对齐 */
@media (min-width:1100px) and (max-width:1399px){
  .site-header{justify-content:space-between}
  .site-header .brand{position:static;transform:none}
  #studio-nav-slot{flex:1 1 auto;justify-content:flex-end}
}
/* PC 状态提示：从整宽横条改成页头正下方的小标签，不再占一整行 */
@media (min-width:768px){
  .studio-runtime>p[role=status]{left:50%;right:auto;width:max-content;max-width:calc(100% - 2*var(--pad-x));transform:translateX(-50%);padding:7px 18px;border:1px solid var(--line-soft);border-top:0;border-radius:0 0 12px 12px;background:var(--surface-2);font-size:var(--fs-note);line-height:1.5;color:var(--muted);text-align:center}
}

/* ---- 首屏文案 ---- */
.hero{padding:40px var(--pad-x) 40px}
.hero-copy{gap:24px}
.eyebrow{font-size:13px}
.headline{font-size:var(--fs-display);line-height:1.1}
.sub,.hero-copy .sub{font-size:var(--fs-lead);line-height:1.75;max-width:760px}
.hero-cost{font-size:var(--fs-note);color:var(--muted);line-height:1.6}

/* ---- 创作条 ---- */
/* index.html 没有加载 composer-integration.css，composer.css 的 max-width:960px 一直生效，
   上一轮只改了外边距所以没真正拉宽；这里把卡片拉到与模板网格等宽 */
.hero-copy #composer-host,#composer-host{margin:8px 0 0;width:100%;max-width:none}
#composer-host .ca-composer,#composer-host .ca-composer.composer{width:100%;max-width:none;margin:0}
/* 第一行：商品 / 角色槽位 + 创意胶囊（同一组、垂直居中），下面一条细线与输入框分开 */
#composer-host .composer-upper{padding:24px 28px 0}
#composer-host .composer-upper-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line-soft)}
#composer-host .composer-primary-assets{display:flex;gap:12px;margin:0}
#composer-host .composer-slot{width:100px;height:100px;border-radius:14px}
.composer-slot-label{height:24px;padding:0 8px;font-size:var(--fs-min)}
#composer-host .composer-creative{min-height:44px;padding:8px 18px;border-radius:999px;font-size:var(--fs-ui);line-height:1.4}
#composer-host .composer-creative-hint{font-size:var(--fs-note)}
/* 输入框：文字与槽位左对齐（原来多缩进了 28px） */
#composer-host .ca-composer textarea,#composer-host textarea{min-height:120px;padding:18px 0 10px;font-size:var(--fs-input);line-height:1.7}
#composer-host .ca-assets{padding:12px 28px 0}
/* 工具栏三组：[＋][@]  [创意▾][智能匹配|创作偏好▾]  ……  清空 [开始生成 →] */
#composer-host .ca-toolbar{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;padding:14px 28px 18px}
#composer-host .ca-toolbar>button{height:40px;padding:0 16px;font-size:var(--fs-ui)}
#composer-host .ca-toolbar>button[aria-label="添加素材"],#composer-host .ca-toolbar>button[aria-label="引用商品或角色"]{width:40px;padding:0;font-size:19px}
#composer-host .ca-toolbar>.ca-settings-slot{margin:0 0 0 8px}
#composer-host .msettings-entry{height:40px;padding:0 16px;font-size:var(--fs-ui)}
#composer-host [data-entry=settings]{padding:0}
#composer-host [data-entry=settings] span{padding:0 14px}
#composer-host .ca-toolbar>.composer-clear{margin:0 8px 0 auto;border-color:transparent;color:var(--muted)}
#composer-host .ca-toolbar>.composer-clear:hover{color:var(--gold)}
#composer-host .ca-toolbar>.ca-submit,#composer-host .ca-toolbar .ca-submit{margin:0;height:50px;padding:0 28px;font-size:var(--fs-cta)}
#composer-host .ca-status{padding:0 28px 20px;font-size:var(--fs-note);line-height:1.6;color:var(--muted)}

/* ---- 模板区 ---- */
.templates-section{gap:20px;padding:32px var(--pad-x) 72px}
.section-head{padding-top:40px}
.section-title{font-size:var(--fs-h2);line-height:1.25}
.section-sub{font-size:var(--fs-ui);margin-top:8px}
#templates-host .marketing-templates{gap:20px}
/* 分类胶囊左对齐、紧贴标题下方，不再靠右孤立 */
.mt-toolbar{justify-content:flex-start;margin:0}
.mt-categories{gap:8px}
.mt-category{height:40px;padding:0 18px;font-size:var(--fs-ui)}
.mt-grid{gap:24px}
.mt-card-body{gap:8px}
.mt-card-title{font-size:24px}
.mt-card-description{font-size:var(--fs-note);line-height:1.6}
.mt-card-use{height:44px;padding:0 18px;font-size:var(--fs-note)}
.mt-sample-pending,.mt-card[data-hot="true"]::before{font-size:var(--fs-min)}
@media (min-width:1100px) and (max-width:1299px){
  .mt-grid{gap:20px}
  .mt-card-title{font-size:22px}
}
/* 平板：四张卡一行放下（卡片尺寸与手机两列相同），避免三列孤行 */
@media (min-width:768px) and (max-width:1099px){
  .mt-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .mt-card-body{left:14px;right:14px;bottom:14px;gap:6px}
  .mt-card-title{font-size:19px}
  .mt-card-description{font-size:13px;line-height:1.5}
  .mt-card-use{height:44px;padding:0 14px;font-size:13px}
}

/* ---- 页脚 ---- */
.site-footer{padding:32px var(--pad-x) 48px;border-top:1px solid var(--line-soft);font-size:var(--fs-note);letter-spacing:0.04em}
.footer-links{gap:28px;margin-bottom:6px}
.footer-links a{font-size:var(--fs-note)}
.site-footer>div{font-size:13px}

/* ---- 手机（≤767）：同一套结构，只换令牌与内距；工具栏三行、开始生成整宽 ---- */
@media (max-width:767px){
  .studio-runtime nav button{font-size:12px}
  .hero{padding:24px var(--pad-x) 0}
  .hero-copy{gap:18px}
  .eyebrow{font-size:12px}
  .headline{line-height:1.2}
  #composer-host .composer-upper{padding:16px 16px 0}
  #composer-host .composer-upper-row{gap:12px;padding-bottom:14px}
  #composer-host .composer-slot{width:80px;height:80px}
  #composer-host .composer-creative{width:100%;min-height:40px;padding:6px 14px;border-radius:10px;font-size:var(--fs-ui)}
  #composer-host .ca-composer textarea,#composer-host textarea{min-height:120px;padding:14px 0 8px;font-size:var(--fs-input);line-height:1.65}
  #composer-host .ca-assets{padding:12px 16px 0}
  #composer-host .ca-toolbar{flex-wrap:wrap;gap:8px;padding:10px 16px 16px}
  #composer-host .ca-toolbar>button{height:40px;padding:0 14px;font-size:var(--fs-ui)}
  #composer-host .ca-toolbar>button[aria-label="添加素材"],#composer-host .ca-toolbar>button[aria-label="引用商品或角色"]{width:40px;font-size:18px}
  #composer-host .ca-toolbar>.ca-settings-slot{order:3;width:100%;margin:0}
  #composer-host .msettings-entry{height:40px;padding:0 14px;font-size:var(--fs-ui)}
  #composer-host [data-entry=settings]{padding:0}
  #composer-host [data-entry=settings] span{padding:0 12px}
  #composer-host .ca-toolbar>.composer-clear{order:2;margin:0 0 0 auto}
  #composer-host .ca-toolbar>.ca-submit,#composer-host .ca-toolbar .ca-submit{order:9;width:100%;justify-content:center;height:52px;margin:4px 0 0;padding:0;font-size:var(--fs-cta)}
  #composer-host .ca-status{padding:0 16px 16px;font-size:var(--fs-note)}
  .hero-cost{font-size:var(--fs-note)}
  .templates-section{gap:16px;padding:28px var(--pad-x) 48px}
  .section-head{border-top:1px solid rgba(243,238,228,0.1);padding-top:24px}
  .section-sub{font-size:var(--fs-note)}
  /* 分类胶囊一行放下（390 宽），更窄的机型允许换行，不隐藏 */
  .mt-categories{gap:8px;flex-wrap:wrap}
  .mt-category{height:44px;padding:0 14px;font-size:var(--fs-ui)}
  .mt-grid{gap:12px}
  .mt-card-body{left:12px;right:12px;bottom:12px;gap:6px}
  .mt-card-title{font-size:18px}
  .mt-card-description{font-size:var(--fs-note);line-height:1.5}
  .mt-card-use{height:44px;padding:0 14px;font-size:var(--fs-note)}
  .mt-card[data-hot="true"]::before{font-size:12px}
  .site-footer{padding:24px var(--pad-x) 32px}
  .footer-links{gap:18px}
}

/* 2026-09-13 UI 设计师 · 自验后补充：引导句两行均衡断行；手机输入框装得下五行占位；窄屏播放键上移避开标题 */
.sub,.hero-copy .sub{text-wrap:balance}
@media (max-width:767px){#composer-host .ca-composer textarea,#composer-host textarea{min-height:156px}}
@media (max-width:1099px){.mt-sample-play{top:34%}}
/* 360 级小屏：两列卡只有 154px 宽，标题 18px 会折成两行，降一档 */
@media (max-width:400px){.mt-card-title{font-size:16px}.mt-card-body{left:10px;right:10px;bottom:10px}.mt-card-use{padding:0 12px}}
/* 2026-09-14 按主开发同步收口：全站不出现 13px 以下文字；创作条输入回到 18px、四列卡标题回到 26px（用户已认可的字号不缩） */
:root{--fs-input:18px}
@media (min-width:1300px){.mt-card-title{font-size:26px}}
@media (max-width:767px){:root{--fs-min:13px}.eyebrow{font-size:13px}.studio-runtime nav button{font-size:13px}.mt-card[data-hot="true"]::before{font-size:13px}.mt-sample-sound,.mt-sample-replicate,.mt-sample-pending{font-size:13px}}
.mt-image-fallback{font-size:13px}
/* 手机 eyebrow 抬到 13px 后一行放不下：收窄字距与两侧短线 */
@media (max-width:767px){.eyebrow{letter-spacing:0.06em;gap:8px}.hero-copy .eyebrow::before,.hero-copy .eyebrow::after{width:12px;flex:0 0 12px}}

/* 槽位缩略图（R21-5）：选图后在槽内回显最近一张 + 「n/3」计数 */
#composer-host .composer-slot{overflow:hidden}
#composer-host .composer-slot.filled{border-style:solid;border-color:rgba(230,195,106,0.7)}
#composer-host .composer-slot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#composer-host .composer-slot-count{position:absolute;right:6px;bottom:6px;z-index:1;height:20px;padding:0 6px;border-radius:6px;background:rgba(14,13,11,0.85);color:var(--gold);font-size:12px;font-weight:700;line-height:20px}
#composer-host .composer-slot .composer-slot-label{z-index:1}

/* 槽内移除按钮（替代下方文件名 chip）；确认单里的可选上传位标灰 */
#composer-host .composer-slot-remove{position:absolute;top:6px;right:6px;z-index:2;width:22px;height:22px;border-radius:50%;background:rgba(14,13,11,0.85);color:var(--ink);font-size:15px;line-height:22px;text-align:center;cursor:pointer}
#composer-host .composer-slot-remove:hover{background:var(--cta);color:var(--cta-ink)}
.studio-upload-grid label.optional::before{content:"可选";border-style:dotted;color:rgba(243,238,228,0.4)}

/* 2026-09-15 用户定：没有样片的模板置灰并标「即将上线」；有样片的排最前 */
.mt-card.mt-card-soon .mt-preview{filter:grayscale(1) brightness(.42)}
.mt-card.mt-card-soon .mt-card-title,.mt-card.mt-card-soon .mt-card-description{opacity:.6}
#templates-host .mt-card.mt-card-soon .mt-card-use:disabled,.mt-card.mt-card-soon .mt-card-use:disabled{opacity:1;background:rgba(243,238,228,0.10);border:1px solid rgba(243,238,228,0.18);color:rgba(243,238,228,0.5);box-shadow:none;cursor:not-allowed}
.mt-card.mt-card-soon .mt-sample-pending{top:50%;right:auto;left:50%;transform:translate(-50%,-50%);height:auto;min-width:8.5em;justify-content:center;padding:10px 24px;border-radius:999px;border:1px solid rgba(230,195,106,0.55);background:rgba(14,13,11,0.94);color:var(--gold);font-size:var(--fs-note,15px);font-weight:600;letter-spacing:.12em;white-space:nowrap}
@media (max-width:767px){.mt-card.mt-card-soon .mt-sample-pending{top:30%;font-size:14px;padding:7px 16px}}

/* 2026-09-17 品牌「合之」定稿：头部组合标（设计会话规范：文件自带留白，桌面高 40px、手机 34px≈印面 32/28；说明文字 13px rgba(243,238,228,0.55)） */
.brand{align-items:center;gap:12px;min-height:44px}
.brand-logo{height:40px;width:auto;display:block;flex:none}
.brand-text{font-family:var(--serif);font-weight:500;font-size:13px;letter-spacing:0.04em;color:rgba(243,238,228,0.55)}
@media (max-width:767px){.brand-logo{height:34px}.brand-text{font-size:12px}.site-header .brand{gap:6px}}
/* 登录 / 注册 / 重置密码 / 等待开通弹窗顶部：组合标高 40px，原标题在其下方 */
.studio-drawer .dialog-brand{height:48px;width:auto;display:block;margin:0 0 10px}