/* ═══ 老板混剪 Web 工作台 · 设计令牌(与设计提案 V1 同源,继承移动端体系)═══ */
:root{
  --paper:#FBF5F1; --card:#FFFFFF;
  --ink:#2E1B14; --ink2:#8C7266; --ink3:#B7A197; --line:#EFE1D8;
  --brand:#DC2626; --brand-deep:#B91C1C; --brand-wash:#FDECEC;
  --ok:#1A7F37; --ok-wash:#E6F4EA;
  --run:#B45309; --run-wash:#FCF3E3;
  --bad:#BA1A1A; --bad-wash:#FBEAEA;      /* 语义错误红 ≠ 主色红(仓库纪律) */
  --tip:#5B4A8A; --tip-wash:#EFEBFA;
  --shadow:0 1px 2px rgba(46,27,20,.05),0 8px 28px -12px rgba(46,27,20,.14);
  --r-lg:16px; --r-md:12px; --r-full:999px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#1B1310; --card:#261B16; --ink:#F4EAE4; --ink2:#B79E92; --ink3:#7E685D;
    --line:#3B2C24; --brand:#E23B3B; --brand-deep:#F16A6A; --brand-wash:#3A1D1B;
    --ok:#4CC38A; --ok-wash:#15301F; --run:#E0A34E; --run-wash:#332512;
    --bad:#F07A7A; --bad-wash:#3A1A1A; --tip:#A794D9; --tip-wash:#292039;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -12px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:15px/1.7 "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button{font:inherit;color:inherit}
input,textarea,select{font:inherit;color:var(--ink)}
::placeholder{color:var(--ink3)}

/* ── 应用壳:左导航 + 主区 + 小票栏 ── */
#app{display:flex;min-height:100vh}
.nav{width:216px;background:var(--card);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:2px;flex-shrink:0;position:sticky;top:0;height:100vh}
.logo{display:flex;align-items:center;gap:9px;padding:6px 10px 18px}
.logo .mark{width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:900;font-size:15px}
.logo b{font-size:15.5px;font-weight:900}
.nav .item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:var(--ink2);font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;border:0;background:none;text-align:left;width:100%}
.nav .item svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.nav .item.on{background:var(--brand-wash);color:var(--brand);font-weight:800}
.nav .item:hover{background:var(--paper)}
.nav .item:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.nav .grow{flex:1}
.nav .me{display:flex;align-items:center;gap:10px;padding:12px 10px 4px;border-top:1px solid var(--line);margin-top:8px;font-size:13px}
.nav .ava{width:30px;height:30px;border-radius:50%;background:var(--run-wash);color:var(--run);display:grid;place-items:center;font-size:12.5px;font-weight:800;flex-shrink:0}
.nav .me small{display:block;color:var(--ink3);font-size:11.5px;line-height:1.35}

.main{flex:1;padding:26px 30px;min-width:0}
.main-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.main-head h1{font-size:21px;font-weight:900;margin:0}
.main-head .sub{color:var(--ink2);font-size:13px}
.main-head .sp{flex:1}

/* ── 通用组件 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:var(--r-full);font-weight:800;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:background .12s,border-color .12s}
.btn-pri{background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;padding:7px 16px;font-size:12px;font-weight:700}
.btn-pri:hover{background:linear-gradient(135deg,var(--brand-deep),var(--brand-deep))}
.btn-pri:disabled{opacity:.5;cursor:not-allowed}
.btn-sec{background:var(--card);border-color:var(--line);color:var(--ink);padding:7px 16px;font-size:12px;font-weight:700}
.btn-sec:hover{border-color:var(--ink3)}
.btn-ghost{color:var(--ink2);padding:7px 16px;font-size:12px;font-weight:700;background:#fff;border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--card);color:var(--ink);padding:8px 16px;font-size:13.5px;font-weight:600;cursor:pointer}
.chip:hover{border-color:var(--ink3)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:800}
.chip.dis{opacity:.42;cursor:not-allowed}
.chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-full);padding:3px 11px;font-size:12px;font-weight:800;white-space:nowrap}
.b-ok{background:var(--ok-wash);color:var(--ok)}
.b-run{background:var(--run-wash);color:var(--run)}
.b-bad{background:var(--bad-wash);color:var(--bad)}
.b-tip{background:var(--tip-wash);color:var(--tip)}
.b-brand{background:var(--brand-wash);color:var(--brand)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.card h5{font-size:15px;font-weight:800;margin:0 0 3px}
.card .hint{font-size:12.5px;color:var(--ink2);margin:0 0 14px}
.note{font-size:13px;color:var(--ink2);line-height:1.75}
.input{width:100%;background:var(--card);border:1.6px solid var(--line);border-radius:var(--r-md);padding:11px 14px;font-size:14.5px;outline:none}
.input:focus{border-color:var(--brand)}
textarea.input{resize:vertical;min-height:64px}

/* 工作台 */
.stat-strip{display:flex;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:18px;overflow:hidden}
.stat{flex:1;padding:16px 22px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat span{font-size:12.5px;color:var(--ink2)}
.prod{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1100px){.prod{grid-template-columns:1fr}}
.p-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;position:relative;transition:transform .15s,box-shadow .15s;cursor:pointer;text-align:left}
.p-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.p-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px}
.p-ico svg{width:22px;height:22px;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;fill:none}
.p-card h5{font-size:16.5px;font-weight:900;margin:0 0 4px}
.p-card p{font-size:13px;color:var(--ink2);margin:0 0 16px;min-height:40px}
.p-meta{font-size:12px;color:var(--ink3)}

/* 出片小票栏 */
.rail{width:312px;border-left:1px solid var(--line);background:var(--card);padding:20px 18px;flex-shrink:0;overflow-y:auto;position:sticky;top:0;height:100vh}
.rail h6{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--ink2);margin:0 0 14px;display:flex;align-items:center;gap:8px}
.rail h6 .dot{width:7px;height:7px;border-radius:50%;background:var(--run)}
.ticket{border:1px solid var(--line);border-radius:10px;padding:13px 14px;margin-bottom:12px;position:relative;background:var(--paper)}
.ticket::before,.ticket::after{content:"";position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--card);border:1px solid var(--line);transform:translateY(-50%)}
.ticket::before{left:-7px}
.ticket::after{right:-7px}
.t-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.t-name{font-size:13px;font-weight:800;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-meta{display:flex;justify-content:space-between;align-items:center;font:11.5px ui-monospace,Consolas,monospace;color:var(--ink3);border-top:1px dashed var(--line);padding-top:7px;margin-top:9px;font-variant-numeric:tabular-nums;gap:8px}
.t-err{font-size:12px;color:var(--bad);margin-top:7px;line-height:1.55}
.pbar{height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:8px}
.pbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--brand),var(--run));transition:width .6s}

/* ── 向导步骤卡片 (设计稿版) ── */
.steps{display:flex;align-items:center;margin-bottom:24px}
.step{
  background:#fff;border:1px solid #EFE1D8;border-radius:12px;
  padding:20px 24px;margin-bottom:16px;position:relative;
}
.step-num{
  position:absolute;top:-12px;left:20px;
  background:linear-gradient(135deg,#DC2626,#991B1B);color:#fff;
  font-weight:800;font-size:11px;padding:3px 12px;border-radius:999px;
  letter-spacing:.08em;box-shadow:0 2px 6px rgba(220,38,38,.3);
}
.step-title{font-size:18px;font-weight:900;margin:8px 0 4px}
.step-sub{font-size:12px;color:#B7A197;margin-bottom:16px}
.wizard{display:flex;gap:24px;align-items:flex-start}
.wiz-form{flex:1;min-width:0;max-width:760px;display:flex;flex-direction:column;gap:16px}
.wiz-side{width:300px;flex-shrink:0;position:sticky;top:20px}
@media (max-width:1100px){.wizard{flex-direction:column}.wiz-side{width:100%;position:static}}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.seg .s{border:1.6px solid var(--line);border-radius:var(--r-md);padding:12px 6px;text-align:center;cursor:pointer;background:var(--card)}
.seg .s b{display:block;font-size:17px;font-weight:900}
.seg .s span{font-size:11.5px;color:var(--ink2)}
.seg .s.on{border-color:var(--brand);background:var(--brand-wash)}
.seg .s.on b{color:var(--brand)}
.row-sw{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line)}
.row-sw:last-child{border-bottom:0}
.row-sw .tx{flex:1}
.row-sw .tx b{display:block;font-size:14px;font-weight:700}
.row-sw .tx span{font-size:12px;color:var(--ink2)}
.sw-ui{width:40px;height:23px;border-radius:var(--r-full);background:var(--brand);position:relative;flex-shrink:0;cursor:pointer;border:0}
.sw-ui::after{content:"";position:absolute;top:2.5px;right:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .12s,right .12s}
.sw-ui.off{background:var(--line)} .sw-ui.off::after{right:auto;left:2.5px}
.kv{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-bottom:1px dashed var(--line);gap:12px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--ink2);white-space:nowrap} .kv .v{font-weight:700;text-align:right}

/* ── 设计稿样式：comp / card-block / layout ── */
.layout{display:grid;gap:10px}
.layout.two-col{grid-template-columns:1fr 300px}
.comp{
  background:#FBF5F1;border:1px solid #EFE1D8;border-radius:8px;
  padding:10px 14px;font-size:13px;color:#6B4A3B;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.comp b{color:#2E1B14;font-weight:700}
.comp .tag{
  background:#FEE2E2;color:#DC2626;font-weight:700;
  padding:2px 8px;border-radius:999px;font-size:11px;
}
.comp .tag.acc{background:#EDE9FE;color:#7C3AED}
.comp .tag.ok{background:#D1FAE5;color:#059669}
.comp .tag.run{background:#FEF3C7;color:#D97706}
.card-block{
  background:#fff;border:1px solid #EFE1D8;border-radius:10px;padding:14px 18px;margin:0;
}
.card-block + .card-block{margin-top:12px}
.grid .card-block{margin:0}
.card-block .card-title{font-size:14px;font-weight:800;color:#2E1B14;margin-bottom:2px}
.card-block .card-sub{font-size:11.5px;color:#B7A197;margin-bottom:10px}
.section-label{font-size:11px;font-weight:700;color:#B7A197;text-transform:uppercase;letter-spacing:.05em;margin:8px 0 4px}
.field-label{font-size:11.5px;color:#B7A197;margin-bottom:4px;font-weight:600}
.field-input{
  width:100%;padding:8px 12px;border:1px solid #EFE1D8;border-radius:6px;
  font-size:14px;background:#fff;color:#2E1B14;outline:none;
}
.field-input:focus{border-color:#DC2626}
.card-block .chip{margin:0}
.two-col-asym{grid-template-columns:1fr 300px}
@media (max-width: 1100px){
  .layout.two-col, .layout.two-col-asym{grid-template-columns:1fr}
}

/* 上传/照片 */
.drop{border:2px dashed var(--line);border-radius:var(--r-lg);padding:44px 20px;text-align:center;background:var(--card);cursor:pointer}
.drop svg{width:34px;height:34px;stroke:var(--brand);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.drop:hover,.drop.over{border-color:var(--brand)}
.drop b{display:block;font-size:15.5px;margin:10px 0 4px}
.drop span{font-size:12.5px;color:var(--ink2)}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
.ph{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);aspect-ratio:3/4;background:var(--paper)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph .st{position:absolute;left:6px;bottom:6px;right:6px;display:flex;justify-content:space-between;align-items:center}
.ph .rm{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;background:rgba(20,10,8,.55);color:#fff;border:0;cursor:pointer;font-size:12px;line-height:1}
.ph .veil{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.55);font-size:12px;font-weight:700;color:var(--ink2)}

/* ── 设计稿:上传区域 (Step 1) ── */
.drop{
  border:2px dashed #EFE1D8;border-radius:12px;padding:36px 20px;text-align:center;
  background:#FEF2F2;color:#6B4A3B;cursor:pointer;
}
.drop svg{width:34px;height:34px;stroke:#DC2626;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.drop:hover,.drop.over{border-color:#DC2626}
.drop b{display:block;font-size:15px;color:#2E1B14;margin-bottom:4px}
.drop span{font-size:12px;color:#B7A197}

/* ── 设计稿:照片网格 ── */
.grid{display:grid;gap:8px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}

/* ── 设计稿:照片项 ── */
.photo{
  aspect-ratio:3/4;background:#FEF2F2;border:1px solid #EFE1D8;border-radius:8px;
  display:grid;place-items:center;color:#B7A197;font-size:24px;position:relative;overflow:hidden;
}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo .role{
  position:absolute;bottom:4px;left:4px;font-size:10px;font-weight:700;
  padding:2px 6px;border-radius:4px;
}
.photo .role.main{background:#FEE2E2;color:#DC2626}
.photo .role.det{background:#EDE9FE;color:#7C3AED}
.photo .role.none{background:#FEF3C7;color:#D97706}
.photo .veil{
  position:absolute;inset:0;background:rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;z-index:10;
}
.photo .progress-bar{
  background:rgba(255,255,255,.3);border-radius:4px;
  height:6px;overflow:hidden;
}
.photo .progress-fill{
  background:linear-gradient(90deg,var(--brand),var(--brand-deep));
  height:100%;border-radius:4px;transition:width .2s ease;
}

/* ── 设计稿:列表组件 (Step 2) ── */
.list{display:flex;flex-direction:column;gap:6px}
.list-item{
  display:flex;align-items:center;gap:10px;
  background:#FBF5F1;border:1px solid #EFE1D8;border-radius:8px;
  padding:10px 12px;font-size:12.5px;color:#2E1B14;line-height:1.5;
}
.list-item.checked{background:#FEE2E2;border-color:#DC2626}
.list-item .chk{
  width:18px;height:18px;border-radius:4px;flex-shrink:0;
  background:#fff;border:1.6px solid #EFE1D8;
  display:grid;place-items:center;font-size:10px;color:#fff;font-weight:800;
}
.list-item.checked .chk{background:#DC2626;border-color:#DC2626}
.list-item .list-text{flex:1;min-width:0;word-break:break-word}
.list-item .del{
  flex-shrink:0;width:24px;height:24px;border-radius:6px;
  display:grid;place-items:center;color:#B7A197;font-size:11px;cursor:pointer;
}
.list-item .del:hover{background:#FEF2F2;color:#DC2626}
.list-item.simple{padding:10px 12px}
.list-item.add{
  background:#FBF5F1;border-style:dashed;color:#B7A197;
  justify-content:center;font-weight:600;cursor:pointer;
}
.list-item.add:hover{border-color:#DC2626;color:#DC2626;background:#FEF2F2}

/* ── 设计稿:警告/提示 ── */
.warn{
  background:#FEF3C7;border:1px solid #D97706;border-radius:8px;
  padding:10px 14px;font-size:12px;color:#92400E;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.warn-inline{
  background:#FEF3C7;border:1px solid #D97706;border-radius:8px;
  padding:8px 12px;font-size:12px;color:#92400E;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}

/* ── 设计稿:侧边栏 (Step 3) ── */
.side{
  background:#FEF2F2;border:1px dashed #DC2626;border-radius:8px;
  padding:14px;font-size:12px;color:#6B4A3B;
}
.side b{display:block;font-size:14px;color:#2E1B14;margin-bottom:10px;font-weight:800}
.side .row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dashed #EFE1D8;gap:8px}
.side .row:last-child{border:0}
.side .row b{font-size:12px;font-weight:700;display:inline;margin:0}

/* ── 设计稿:摘要卡片 (Step 5) ── */
.summary{
  background:#fff;border:2px solid #DC2626;border-radius:12px;
  padding:20px;font-size:13px;
}
.summary h3{font-size:16px;font-weight:900;margin-bottom:14px}
.summary .bal{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed #EFE1D8;gap:12px}
.summary .bal:last-of-type{border:0}
.summary .bal b{font-weight:700}
.summary .price{font-size:22px;font-weight:900;color:#DC2626}
.summary .price small{font-size:12px;color:#B7A197;font-weight:400}
.summary .ok{color:#059669;font-weight:700}

/* ── 设计稿:导演卡片 (Step 4) ── */
.director{
  background:#FBF5F1;border:1px solid #EFE1D8;border-radius:8px;
  padding:10px 14px;display:flex;align-items:center;gap:10px;font-size:12px;
}
.director .badge{
  background:#FEF3C7;color:#D97706;font-weight:800;font-size:11px;
  padding:2px 8px;border-radius:999px;
}

/* ── 分镜 (Step 4) ── */
.shot{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px}
.shot-thumb{
  width:78px;height:106px;border-radius:9px;
  background:linear-gradient(160deg,var(--run-wash),var(--brand-wash));
  flex-shrink:0;display:grid;place-items:center;color:var(--ink3);font-size:11px;overflow:hidden;
}
.shot-thumb img{width:100%;height:100%;object-fit:cover}
.shot-body{flex:1;min-width:0}
.shot-body b{font-size:13.5px;font-weight:700}
.shot-body .meta{font-size:11px;color:var(--ink2);margin:4px 0}
.shot-body p{font-size:12.5px;color:var(--ink2);margin:0 0 8px;line-height:1.65}
.shot-line{
  background:var(--paper);border:1px dashed var(--line);border-radius:9px;
  padding:8px 12px;font-size:13px;display:flex;gap:8px;align-items:center;cursor:text;
}
.shot-line:hover,.shot-line:focus-within{border-color:var(--brand)}
.shot-line input{flex:1;border:0;background:none;outline:none;font-size:13px}

/* ── 分镜列表 (Step 4) ── */
.shots-list{display:flex;flex-direction:column;gap:10px}
.shot-footer{
  display:flex;justify-content:space-between;align-items:center;margin-top:16px;
}

/* 作品库 */
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
/* 作品库 Tab:徽章 Chip 风格(选中实心红+计数徽章) */
.works-tabs{display:flex;gap:8px;margin:14px 0 18px}
.works-tab{display:inline-flex;align-items:center;gap:6px;padding:7px 18px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--card);color:var(--ink2);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s}
.works-tab:hover{border-color:var(--ink3);color:var(--ink)}
.works-tab.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:800}
.works-tab .cnt{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-full);display:inline-grid;place-items:center;font-size:12px;font-weight:700;font-style:normal;line-height:1}
.works-tab.on .cnt{background:rgba(255,255,255,.26);color:#fff}
.works-tab:not(.on) .cnt{background:var(--brand-wash);color:var(--brand)}
.work{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--card);cursor:pointer;transition:transform .15s}
.work:hover{transform:translateY(-2px)}
.work .cover{aspect-ratio:9/16;background:linear-gradient(165deg,var(--run-wash),var(--brand-wash));position:relative}
.work .cover video{width:100%;height:100%;object-fit:cover;display:block}
.work .cover .aigc{position:absolute;left:7px;top:7px;background:rgba(20,10,8,.5);color:#fff;font-size:9.5px;border-radius:4px;padding:1.5px 5px;letter-spacing:.05em;z-index:2}
.work .w-m{padding:9px 11px}
.work .w-m b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work .w-m span{font-size:11px;color:var(--ink3)}

/* 作品卡片悬停操作层(模板同款:整卡遮罩 + 圆形图标按钮,hover 才出现) */
.cover-actions{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:8px;padding:8px 10px;z-index:3;
  background:rgba(0,0,0,.4);opacity:0;transition:opacity .18s;
}
.work:hover .cover-actions{opacity:1}
.wk-rbtn{
  width:34px;height:34px;border-radius:50%;border:none;background:#fff;color:#2E1B14;
  display:inline-grid;place-items:center;font-size:14px;cursor:pointer;text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .12s,background .15s;
}
.wk-rbtn:hover{transform:scale(1.08)}
.wk-rbtn.danger{color:#BA1A1A}
.wk-rbtn.danger:hover{background:#FBEAEA}
.wk-edit{
  display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:999px;border:none;
  background:var(--brand);color:#fff;font-size:12px;font-weight:700;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.3);transition:background .15s;
}
.wk-edit:hover{background:var(--brand-deep)}
/* 视频时长角标(右下角) */
.wk-dur{position:absolute;right:7px;bottom:7px;background:rgba(0,0,0,.6);color:#fff;font-size:10.5px;font-weight:600;border-radius:4px;padding:1px 5px;z-index:2}
/* 卡片底部元信息行:类型标签 + 时间 + 状态点 */
.w-meta{display:flex;align-items:center;gap:7px;margin-top:5px;font-size:11px;color:var(--ink3)}
.w-tag{padding:1px 7px;border-radius:4px;font-size:10.5px;font-weight:700}
.w-tag.p2v{background:var(--brand-wash);color:var(--brand)}
.w-tag.dh{background:var(--tip-wash);color:var(--tip)}
.w-status{margin-left:auto;display:inline-flex;align-items:center;gap:4px}
.w-status i{width:6px;height:6px;border-radius:50%;background:var(--ok);display:inline-block}
.w-link{display:block;font-size:11px;color:var(--ink3);margin-top:4px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.w-link:hover{color:var(--brand)}
/* 空状态圆形图标 */
.empty-ico{width:64px;height:64px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-size:26px;margin:0 auto 14px}

/* ── 数字人口播(对齐设计模板:左右两列卡片 + 底部操作栏 + 底板宫格弹窗) ── */
.dh-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
@media (max-width:1100px){.dh-grid{grid-template-columns:1fr}}
.dh-card{padding:20px;border-radius:var(--r-md);display:flex;flex-direction:column;height:100%}
.dh-card-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.dh-card-head h5{margin:0}
.dh-ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:16px;flex-shrink:0}
.dh-ico.purple{background:var(--tip-wash)}
.dh-ico.red{background:var(--brand-wash)}
/* 左卡空态:虚线框 + 圆形图标 */
.dh-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;border:2px dashed var(--line);border-radius:var(--r-md);background:var(--paper);min-height:260px}
.dh-empty-ico{width:64px;height:64px;border-radius:50%;background:var(--brand-wash);display:grid;place-items:center;font-size:28px;margin-bottom:12px}
/* 左卡已选底板预览:方图 + 底部名称条 */
.dh-base-prev{position:relative;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--paper);aspect-ratio:1/1;max-height:280px}
.dh-base-prev img,.dh-base-prev video{width:100%;height:100%;object-fit:cover;display:block}
.dh-base-prev-bar{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 右卡预估便签 */
.dh-note{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--ink2);background:var(--paper);border-radius:8px;padding:12px;margin-top:12px;line-height:1.6}
/* 底部操作栏:左合规提示,右生成按钮 */
.dh-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--card);margin-top:20px;flex-wrap:wrap}
/* 头部余额胶囊 */
.dh-credits{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--card);font-size:13px;font-weight:600}
/* 底板选择弹窗:4:5 宫格卡片 */
.dh-base-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin-top:12px}
.dh-base-card{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;background:var(--card);transition:border-color .15s}
.dh-base-card:hover{border-color:var(--brand)}
.dh-base-thumb{aspect-ratio:4/5;background:var(--paper);display:grid;place-items:center;overflow:hidden}

/* 登录（简单版：兼容老结构 + 营销页结构同时使用） */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login{width:400px;max-width:100%}
.login .card{padding:34px 30px;position:relative;overflow:hidden}
.login h1{font-size:24px;font-weight:900;margin:14px 0 4px}
.login .row{display:flex;gap:10px}

/* ═══════════════════════════════════════════════════════════
 * 老板混剪 Web 端 · 营销化登录页样式（2026-07-29 新版）
 *  仅作用于 .mkt-page 下的 DOM，不影响登录后工作台壳样式
 * ═══════════════════════════════════════════════════════════ */
.mkt-page{
  width:100%;background:
    radial-gradient(1200px 520px at 10% -4%, rgba(220,38,38,.12), transparent 60%),
    radial-gradient(900px 500px at 92% 0%, rgba(180,83,9,.10), transparent 55%),
    var(--paper);
  color:var(--ink);
  overflow-x:hidden;
}
.mkt-wrap{width:min(1180px,92%);margin:0 auto;position:relative;z-index:1}

/* —— 顶部信任条 —— */
.mkt-topbar{
  background:linear-gradient(90deg,var(--brand) 0%, #E11D48 60%, var(--run) 100%);
  color:#fff;font-size:13px;font-weight:600;
}
.mkt-topbar-inner{display:flex;align-items:center;justify-content:space-between;height:40px;gap:14px}
.mkt-topbar-left{display:flex;align-items:center;gap:8px}
.mkt-dot{display:inline-block;animation:mktPulse 1.5s ease-in-out infinite;color:#FDE68A;font-size:10px}
@keyframes mktPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.82)}}
.mkt-topbar-app{
  background:rgba(255,255,255,.18);backdrop-filter:blur(8px);
  color:#fff;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:700;
  text-decoration:none;border:1px solid rgba(255,255,255,.3);
  transition:background .15s;white-space:nowrap;
}
.mkt-topbar-app:hover{background:rgba(255,255,255,.32)}

/* —— HERO —— */
.mkt-hero{padding:56px 0 44px;position:relative}
.mkt-hero-inner{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center}
.mkt-hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.mkt-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:700;border:1px solid var(--line);background:var(--card)}
.mkt-badge-ok{background:var(--ok-wash);color:var(--ok);border-color:transparent}
.mkt-badge-run{background:var(--run-wash);color:var(--run);border-color:transparent}
.mkt-badge-brand{background:var(--brand-wash);color:var(--brand);border-color:transparent}

.mkt-hero-title{font-size:44px;font-weight:950;line-height:1.18;margin:0 0 16px;letter-spacing:-.015em}
.mkt-accent{background:linear-gradient(90deg,var(--brand) 0%, #E11D48 55%, var(--run) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.mkt-hero-sub{font-size:16.5px;color:var(--ink2);line-height:1.9;margin:0 0 28px}
.mkt-hero-points{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mkt-point{display:flex;gap:11px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 13px}
.mkt-point-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:20px;flex-shrink:0}
.mkt-point b{display:block;font-size:14.5px;font-weight:800}
.mkt-point small{display:block;font-size:12px;color:var(--ink2);margin-top:2px;line-height:1.5}
.mkt-p1{background:var(--brand-wash)} .mkt-p2{background:var(--tip-wash)} .mkt-p3{background:var(--run-wash)}

/* HERO 产品 MOCK 卡片 */
.mkt-hero-mock{position:relative}
.mkt-mock-card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;
  box-shadow:0 24px 60px -24px rgba(46,27,20,.28), 0 2px 6px rgba(46,27,20,.05);
  transform:rotate(1.2deg);
}
.mkt-mock-card::before{
  content:"";position:absolute;inset:-10px -14px -14px -10px;z-index:-1;
  border-radius:24px;
  background:linear-gradient(135deg,var(--brand-wash) 0%, transparent 40%),linear-gradient(225deg,var(--run-wash),transparent 40%);
  opacity:.9;
}
.mkt-mock-head{display:flex;gap:12px;align-items:center;padding:3px 2px 14px;border-bottom:1px dashed var(--line);margin-bottom:14px}
.mkt-mock-avatar{
  width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,var(--brand),var(--run));
  color:#fff;display:grid;place-items:center;font-weight:900;font-size:17px;flex-shrink:0;
}
.mkt-mock-title{display:block;font-size:15.5px;font-weight:850}
.mkt-mock-sub{display:block;font-size:12px;color:var(--ink2);margin-top:2px}
.mkt-mock-shots{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.mkt-shot{display:flex;gap:11px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.mkt-shot-n{
  width:26px;height:26px;border-radius:8px;background:var(--brand-wash);color:var(--brand);
  display:grid;place-items:center;font-weight:900;font-size:12.5px;flex-shrink:0;
}
.mkt-shot-body{flex:1;min-width:0}
.mkt-shot-body b{display:block;font-size:13px;font-weight:700;line-height:1.4}
.mkt-shot-body small{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px;font-variant-numeric:tabular-nums}
.mkt-mock-foot{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.mkt-mock-tag{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--ink2)}
.mkt-tag-ok{background:var(--ok-wash);color:var(--ok);border-color:transparent}

/* —— 数据墙 —— */
.mkt-trust{background:linear-gradient(180deg,transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mkt-trust-inner{display:grid;grid-template-columns:repeat(4,1fr);padding:22px 0}
.mkt-stat{text-align:center;padding:6px 8px}
.mkt-stat b{display:block;font-size:28px;font-weight:950;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mkt-stat span{display:block;font-size:13px;color:var(--ink2);margin-top:4px;font-weight:600}

/* —— 通用 section 标题 —— */
.mkt-section{padding:74px 0;position:relative}
.mkt-sec-bg{background:
  linear-gradient(180deg,rgba(251,245,241,.0) 0%, rgba(255,255,255,.55) 30%, rgba(255,255,255,.55) 70%, rgba(251,245,241,0) 100%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.mkt-sec-head{text-align:center;max-width:760px;margin:0 auto 44px}
.mkt-sec-kicker{
  display:inline-block;font-size:11.5px;font-weight:900;letter-spacing:.18em;
  color:var(--brand);background:var(--brand-wash);padding:5px 13px;border-radius:999px;margin-bottom:14px;
}
.mkt-sec-head h2{font-size:32px;font-weight:950;line-height:1.25;margin:0 0 12px;letter-spacing:-.01em}
.mkt-sec-sub{font-size:15.5px;color:var(--ink2);line-height:1.85;margin:0}

/* —— 3 大卖点 —— */
.mkt-features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mkt-feature{
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 24px;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.mkt-feature:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand)}
.mkt-feature-ico{
  width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:26px;margin-bottom:16px;
}
.mkt-ico-1{background:linear-gradient(135deg,var(--brand-wash),#FEE2E2)}
.mkt-ico-2{background:linear-gradient(135deg,var(--tip-wash),#EDE9FE)}
.mkt-ico-3{background:linear-gradient(135deg,var(--run-wash),#FEF3C7)}
.mkt-feature h3{font-size:18px;font-weight:850;margin:0 0 9px;line-height:1.4}
.mkt-feature p{font-size:13.5px;color:var(--ink2);line-height:1.85;margin:0}

/* —— 4 步流程 —— */
.mkt-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.mkt-step{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 18px;text-align:center;
}
.mkt-step-top{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:6px;margin-bottom:14px}
.mkt-step-ico{
  width:58px;height:58px;border-radius:17px;background:linear-gradient(135deg,var(--brand),var(--run));
  display:grid;place-items:center;font-size:26px;box-shadow:0 10px 22px -10px rgba(220,38,38,.45);
}
.mkt-step-n{
  position:absolute;top:-6px;right:calc(50% - 44px);width:26px;height:26px;border-radius:50%;
  background:#fff;color:var(--brand);border:2px solid var(--brand);
  display:grid;place-items:center;font-size:12px;font-weight:950;
}
.mkt-step h4{font-size:16px;font-weight:850;margin:0 0 6px}
.mkt-step p{font-size:12.5px;color:var(--ink2);line-height:1.7;margin:0}
.mkt-step-arrow{
  position:absolute;top:calc(50% - 18px);right:-18px;font-size:28px;color:var(--brand);font-weight:900;z-index:2;
  text-shadow:0 0 0 4px var(--paper);
}

/* —— 行业场景 —— */
.mkt-scenes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mkt-scene{
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 18px;
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;
}
.mkt-scene:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.mkt-scene-ico{
  width:54px;height:54px;border-radius:15px;background:var(--paper);
  display:grid;place-items:center;font-size:26px;margin-bottom:14px;border:1px solid var(--line);
}
.mkt-scene h4{font-size:16.5px;font-weight:850;margin:0 0 6px}
.mkt-scene p{font-size:12.5px;color:var(--ink2);line-height:1.75;margin:0 0 14px;flex:1}
.mkt-scene-foot{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px dashed var(--line);font-size:12px}
.mkt-scene-foot span{color:var(--ink3);font-weight:600}
.mkt-scene-foot b{color:var(--brand);font-weight:900;font-size:13px;font-variant-numeric:tabular-nums}

/* —— 用户证言 —— */
.mkt-testis{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mkt-testi{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px 22px 22px;
}
.mkt-testi-quote{
  position:absolute;top:8px;left:16px;font-size:56px;color:var(--brand);font-family:Georgia,serif;line-height:1;opacity:.22;
}
.mkt-testi-body{font-size:14px;line-height:1.9;color:var(--ink);margin:0 0 18px;position:relative;z-index:1}
.mkt-testi-user{display:flex;align-items:center;gap:11px;padding-top:14px;border-top:1px dashed var(--line)}
.mkt-testi-ava{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--run));color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:15px;flex-shrink:0;
}
.mkt-testi-user b{display:block;font-size:13.5px;font-weight:800}
.mkt-testi-user small{display:block;font-size:11.5px;color:var(--ink2);margin-top:2px}

/* —— FAQ —— */
.mkt-faq-wrap{max-width:860px}
.mkt-faq{display:flex;flex-direction:column;gap:12px}
.mkt-faq-item{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 20px;
  transition:border-color .15s;
}
.mkt-faq-item[open]{border-color:var(--brand);box-shadow:0 4px 14px -6px rgba(220,38,38,.2)}
.mkt-faq-item>summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
  list-style:none;padding:16px 0;font-size:15px;font-weight:800;line-height:1.6;
}
.mkt-faq-item>summary::-webkit-details-marker{display:none}
.mkt-faq-plus{
  color:var(--brand);font-weight:900;font-size:22px;flex-shrink:0;width:28px;height:28px;
  display:grid;place-items:center;border-radius:8px;background:var(--brand-wash);transition:transform .2s;
}
.mkt-faq-item[open] .mkt-faq-plus{transform:rotate(45deg)}
.mkt-faq-a{font-size:14px;color:var(--ink2);line-height:1.9;margin:0 0 18px;padding-top:2px}

/* —— 底部 CTA —— */
.mkt-cta{
  padding:58px 0;margin-top:10px;
  background:
    radial-gradient(700px 260px at 10% 30%, rgba(220,38,38,.16), transparent 60%),
    radial-gradient(500px 260px at 90% 70%, rgba(180,83,9,.14), transparent 60%),
    linear-gradient(135deg, var(--ink) 0%, #43291F 100%);
  color:#fff;
}
.mkt-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.mkt-cta-left h2{font-size:30px;font-weight:950;margin:0 0 10px;line-height:1.3;letter-spacing:-.01em}
.mkt-cta-left h2 .mkt-accent{background:linear-gradient(90deg,#FCA5A5,#FDE68A);-webkit-background-clip:text;background-clip:text;color:transparent}
.mkt-cta-left p{margin:0;font-size:14.5px;opacity:.82;line-height:1.8}
.mkt-cta-tag{
  display:inline-block;background:rgba(252,211,77,.16);color:#FDE68A;
  padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:800;
  border:1px solid rgba(252,211,77,.32);
}

/* —— 页脚 —— */
.mkt-foot{background:var(--ink);color:rgba(255,255,255,.75);padding:48px 0 0;margin-top:0}
.mkt-foot-inner{display:grid;grid-template-columns:1.1fr 2fr;gap:50px;padding-bottom:40px}
.mkt-foot-logo{display:flex;flex-direction:column;gap:10px}
.mkt-foot-mark{
  width:40px;height:40px;border-radius:12px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:950;font-size:19px;
}
.mkt-foot-logo b{font-size:17px;font-weight:900;color:#fff}
.mkt-foot-logo small{font-size:13px;color:rgba(255,255,255,.55);line-height:1.7}
.mkt-foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mkt-foot-cols>div{display:flex;flex-direction:column;gap:10px}
.mkt-foot-cols b{font-size:13.5px;font-weight:850;color:#fff;margin-bottom:4px}
.mkt-foot-cols a,.mkt-foot-cols span{font-size:13px;color:rgba(255,255,255,.6);text-decoration:none;line-height:1.8}
.mkt-foot-cols a:hover{color:var(--brand)}
.mkt-foot-bottom{
  border-top:1px solid rgba(255,255,255,.08);padding:20px 0;font-size:12px;
  color:rgba(255,255,255,.45);
}
.mkt-foot-bottom-inner{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;
  line-height:1.8;
}
.mkt-foot-bottom-inner a{color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s}
.mkt-foot-bottom-inner a:hover{color:#fff}
.mkt-foot-sep{color:rgba(255,255,255,.2);user-select:none}

/* ═══════════════════════════════════════════════════════
 *  ★ 登录 Modal 弹窗 + Hero CTA 按钮
 * ═══════════════════════════════════════════════════════ */

/* —— 登录遮罩层 —— */
.mkt-modal-overlay{
  position:fixed;inset:0;background:rgba(30,15,10,.58);
  display:none;align-items:center;justify-content:center;
  z-index:80;padding:20px;backdrop-filter:blur(6px);
  opacity:0;transition:opacity .22s ease;
}
.mkt-modal-overlay.mkt-modal-show{opacity:1}

/* —— Modal 内容容器（带滑入动画）—— */
.mkt-modal-dialog{
  position:relative;width:430px;max-width:100%;
  transform:translateY(20px) scale(.96);
  opacity:0;transition:transform .28s cubic-bezier(.2,.9,.3,1.2),opacity .22s;
}
.mkt-modal-overlay.mkt-modal-show .mkt-modal-dialog{
  transform:translateY(0) scale(1);opacity:1;
}

/* —— 关闭按钮 —— */
.mkt-modal-close{
  position:absolute;top:-14px;right:-14px;z-index:2;
  width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.18);
  font-size:14px;font-weight:800;color:var(--ink2);
  display:grid;place-items:center;transition:transform .15s,color .15s;
}
.mkt-modal-close:hover{transform:rotate(90deg);color:var(--brand)}

/* —— Modal 内登录卡片样式优化 —— */
.mkt-modal-dialog .login{width:100%}
.mkt-modal-dialog .login .card{
  border-radius:20px;padding-top:52px;
  box-shadow:0 28px 60px -20px rgba(220,38,38,.28),0 10px 30px -10px rgba(46,27,20,.18);
  border:1px solid rgba(220,38,38,.12);
}

.mkt-login-ribbon{
  position:absolute;top:0;left:0;right:0;
  background:linear-gradient(90deg,var(--brand),var(--run));color:#fff;
  font-size:12.5px;font-weight:800;padding:9px 18px;text-align:center;letter-spacing:.02em;
}
.mkt-login-features{
  margin-top:16px;padding:13px 12px 0;border-top:1px dashed var(--line);
  display:flex;flex-direction:column;gap:7px;
  font-size:12px;color:var(--ink2);font-weight:600;line-height:1.55;
}

/* —— HERO CTA 按钮区 —— */
.mkt-hero-ctas{display:flex;align-items:center;gap:16px;margin-top:26px;flex-wrap:wrap}
.mkt-cta-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--brand),#E11D48);color:#fff;
  padding:15px 36px;border-radius:999px;border:none;cursor:pointer;
  font-size:16px;font-weight:850;letter-spacing:.01em;
  box-shadow:0 12px 28px -8px rgba(220,38,38,.48),0 2px 4px rgba(220,38,38,.2);
  transition:transform .15s,box-shadow .15s;
  text-decoration:none;
}
.mkt-cta-btn:hover{transform:translateY(-2px);box-shadow:0 18px 36px -10px rgba(220,38,38,.55)}
.mkt-cta-btn:active{transform:translateY(0)}
.mkt-hero-secondary{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--ink2);font-size:14px;font-weight:700;text-decoration:none;
  padding:12px 20px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--card);transition:border-color .15s,color .15s;
}
.mkt-hero-secondary:hover{border-color:var(--brand);color:var(--brand)}

/* —— 顶部导航栏登录按钮 —— */
.mkt-topbar-right{display:flex;align-items:center;gap:10px}
.mkt-topbar-login{
  background:#fff;color:var(--brand);
  padding:6px 16px;border-radius:999px;font-size:12.5px;font-weight:800;
  border:2px solid rgba(255,255,255,.6);cursor:pointer;transition:background .15s;
  white-space:nowrap;
}
.mkt-topbar-login:hover{background:rgba(255,255,255,.9)}

/* —— 底部 CTA 区域按钮 —— */
.mkt-cta-btns{margin-top:18px}
.mkt-cta-btns .mkt-cta-btn{
  background:linear-gradient(135deg,#fff,#FDECEC);color:var(--brand);
  padding:13px 30px;font-size:15.5px;
  box-shadow:0 8px 24px -6px rgba(255,255,255,.35);
}
.mkt-cta-btns .mkt-cta-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(255,255,255,.5)}

/* ═══════════════════════════════════════════════════════
 *   响应式：平板/手机端（让营销页友好）
 * ═══════════════════════════════════════════════════════ */
@media (max-width:1200px){
  .mkt-hero-title{font-size:38px}
  .mkt-sec-head h2{font-size:28px}
  .mkt-cta-left h2{font-size:26px}
}
@media (max-width:1060px){
  .mkt-hero-inner{grid-template-columns:1fr;gap:30px}
  .mkt-hero-text{max-width:760px}
  .mkt-hero-mock{max-width:520px;margin:0 auto}
  .mkt-mock-card{transform:none}
  .mkt-hero-points{grid-template-columns:repeat(3,1fr)}
  .mkt-trust-inner{grid-template-columns:repeat(2,1fr);gap:16px 0;padding:18px 0}
  .mkt-features{grid-template-columns:1fr;gap:14px;max-width:560px;margin:0 auto}
  .mkt-flow{grid-template-columns:repeat(2,1fr);gap:14px}
  .mkt-step-arrow{display:none}
  .mkt-scenes{grid-template-columns:repeat(2,1fr)}
  .mkt-testis{grid-template-columns:1fr;gap:14px;max-width:560px;margin:0 auto}
  .mkt-foot-inner{grid-template-columns:1fr;gap:30px}
  .mkt-foot-cols{grid-template-columns:repeat(3,1fr)}
  .mkt-cta-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .mkt-topbar{height:auto;padding:8px 0}
  .mkt-topbar-inner{flex-direction:column;align-items:flex-start;height:auto;gap:6px;padding:4px 0}
  .mkt-hero{padding:32px 0 24px}
  .mkt-hero-badges{margin-bottom:12px}
  .mkt-hero-title{font-size:28px}
  .mkt-hero-sub{font-size:14.5px}
  .mkt-hero-points{grid-template-columns:1fr}
  .mkt-section{padding:50px 0}
  .mkt-sec-head h2{font-size:22px}
  .mkt-sec-sub{font-size:14px}
  .mkt-flow{grid-template-columns:1fr 1fr}
  .mkt-scenes{grid-template-columns:1fr 1fr}
  .mkt-step-arrow{display:none}
  .mkt-stat b{font-size:22px}
  .mkt-foot-cols{grid-template-columns:1fr 1fr;gap:18px}
  .mkt-cta-left h2{font-size:22px}
  .mkt-hero-ctas{flex-direction:column;align-items:flex-start;gap:12px}
  .mkt-cta-btn{width:100%;justify-content:center}
  .mkt-hero-secondary{width:100%;justify-content:center}
  .mkt-modal-dialog{width:calc(100% - 24px)}
}
@media (max-width:420px){
  .mkt-flow{grid-template-columns:1fr}
  .mkt-scenes{grid-template-columns:1fr}
  .mkt-foot-cols{grid-template-columns:1fr}
}

/* 弹层 */
.mask{position:fixed;inset:0;background:rgba(30,15,10,.45);display:grid;place-items:center;z-index:50;padding:20px}
.modal{background:var(--card);border-radius:var(--r-lg);padding:26px;width:720px;max-width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow)}
.modal h5{font-size:16.5px;font-weight:900;margin:0 0 6px}
.modal .hint{font-size:13px;color:var(--ink2);margin:0 0 16px}

/* toast */
#toasts{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:99;align-items:center}
.toast{background:var(--ink);color:var(--paper);border-radius:var(--r-full);padding:10px 22px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow);max-width:80vw}
.toast.err{background:var(--bad);color:#fff}

.empty{padding:56px 20px;text-align:center;color:var(--ink3);font-size:14px;line-height:1.9}
.spin{width:18px;height:18px;border:2.5px solid var(--line);border-top-color:var(--brand);border-radius:50%;display:inline-block;vertical-align:-4px}
@media (prefers-reduced-motion: no-preference){.spin{animation:sp .8s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}}
@media (max-width:1250px){.rail{display:none}}

/* ═══ 切换视图按钮(左上角 logo 旁) ═══ */
.logo .view-toggle{
  margin-left:auto;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);
  background:var(--paper);font-size:16px;cursor:pointer;display:grid;place-items:center;
  transition:all .15s;padding:0;
}
.logo .view-toggle:hover{background:var(--brand-wash);border-color:var(--brand)}

/* ═══ H5 手机模拟器 (1:1 复刻 Flutter 移动端) ═══ */
/* AppTheme 对配色板 */
.phone-sim-wrap{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  min-height:100vh;padding:20px;gap:12px;
  background:radial-gradient(ellipse at 30% 0%,#3a3a3c 0%,#1c1c1e 60%,#0a0a0c 100%);
}
.phone-sim-toolbar{
  display:flex;align-items:center;gap:12px;width:100%;max-width:420px;
  padding:8px 16px;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);
  border-radius:12px;border:1px solid rgba(255,255,255,.1);
}
.phone-sim-label{font-size:12px;font-weight:600;color:rgba(255,255,255,.7)}
.phone-sim-back{
  margin-left:auto;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);
  border-radius:8px;padding:5px 12px;font-size:11px;color:rgba(255,255,255,.8);cursor:pointer;
}
.phone-sim-back:hover{background:rgba(255,255,255,.12)}

/* ── 真实手机外框 (iPhone 14 风格) ── */
.phone-frame{
  position:relative;width:390px;height:844px;background:#000;border-radius:55px;
  box-shadow:
    0 0 0 2px #2a2a2c,
    0 0 0 12px #1c1c1e,
    0 30px 80px -10px rgba(0,0,0,.6),
    0 50px 120px -20px rgba(220,38,38,.08);
  padding:0;flex-shrink:0;overflow:hidden;
}
/* 动态岛 */
.phone-dynamic-island{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:125px;height:37px;background:#000;border-radius:20px;z-index:100;
}
/* 屏幕 */
.phone-screen{
  position:absolute;inset:0;border-radius:55px;overflow:hidden;
  background:#FEF2F2;display:flex;flex-direction:column;
}
/* 状态栏 */
.phone-status-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 32px 0;height:54px;flex-shrink:0;
  font-size:15px;font-weight:600;color:#450A0A;
}
.phone-status-bar .ph-time{font-variant-numeric:tabular-nums}
.phone-status-bar .ph-icons{display:flex;gap:5px;align-items:center;font-size:13px}
/* Home Indicator */
.phone-home-indicator{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  width:134px;height:5px;background:#450A0A;border-radius:3px;opacity:.2;z-index:100;
}

/* ── AppTheme 色板 ── */
:root{
  --app-primary:#DC2626;
  --app-primary-light:#FEE2E2;
  --app-bg:#FEF2F2;
  --app-surface:#FFFFFF;
  --app-surface-variant:#F9FAFB;
  --app-text-primary:#450A0A;
  --app-text-secondary:#64748B;
  --app-text-muted:#94A3B8;
  --app-text-on-primary:#FFFFFF;
  --app-gray100:#F3F4F6;
  --app-gray200:#E5E7EB;
  --app-gray300:#D1D5DB;
  --app-gray400:#9CA3AF;
  --app-success:#16A34A;
  --app-warning:#F59E0B;
  --app-accent:#A16207;
  --app-accent-light:#FEF3C7;
}

/* ── Tab 内容区 ── */
.phone-tab-content{
  flex:1;overflow-y:auto;display:flex;flex-direction:column;
  background:var(--app-bg);
  -webkit-overflow-scrolling:touch;
}
.phone-tab-content::-webkit-scrollbar{width:0;display:none}

/* 假 AppBar (52px 高,左对齐大标题,无 Material AppBar) */
.phone-appbar{
  height:52px;padding:0 16px;display:flex;align-items:center;flex-shrink:0;
}
.phone-appbar h1{font-size:22px;font-weight:700;color:var(--app-text-primary);margin:0;line-height:1}
.phone-appbar .ph-actions{margin-left:auto;display:flex;gap:8px}
.phone-appbar .ph-import-btn{
  display:flex;align-items:center;gap:4px;background:var(--app-primary);color:#fff;
  border:0;border-radius:8px;padding:0 14px;height:36px;font-size:14px;font-weight:600;cursor:pointer;
}

/* ── 内容区通用 ── */
.phone-content{padding:0 16px 16px;display:flex;flex-direction:column;gap:12px}
.phone-content-pad{padding:16px}

/* 分区标题 */
.phone-section-title{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 0 6px;font-size:15px;font-weight:700;color:var(--app-text-primary);
}
.phone-section-title .ph-link{font-size:13px;font-weight:500;color:var(--app-primary);text-decoration:none;cursor:pointer}
.phone-section-title .ph-link:hover{text-decoration:underline}

/* ── 工作台 ── */
/* 「今天要出片吗」渐变卡 */
.phone-hero-card{
  background:linear-gradient(135deg,#DC2626 0%,#F97316 100%);
  border-radius:18px;padding:16px;display:flex;align-items:center;gap:12px;
  cursor:pointer;color:#fff;
}
.phone-hero-card .ph-hero-text{flex:1}
.phone-hero-card .ph-hero-text b{font-size:16px;font-weight:700;display:block}
.phone-hero-card .ph-hero-text small{font-size:13px;color:rgba(255,224,224,.9);display:block;margin-top:2px}
.phone-hero-card .ph-hero-arrow{font-size:18px;color:#fff}

/* 「生成朋友圈推广图」白卡 */
.phone-promo-card{
  background:var(--app-surface);border:1px solid var(--app-gray200);border-radius:16px;
  padding:14px;display:flex;align-items:center;gap:12px;cursor:pointer;
}
.phone-promo-card .ph-promo-ico{
  width:40px;height:40px;border-radius:10px;background:var(--app-primary-light);
  display:grid;place-items:center;color:var(--app-primary);font-size:20px;flex-shrink:0;
}
.phone-promo-card .ph-promo-text{flex:1}
.phone-promo-card .ph-promo-text b{font-size:15px;font-weight:700;color:var(--app-text-primary)}
.phone-promo-card .ph-promo-text small{font-size:12px;color:var(--app-text-secondary);display:block;margin-top:1px}
.phone-promo-card .ph-promo-arrow{color:var(--app-text-muted);font-size:16px}

/* 「帮我写」紫色渐变卡 */
.phone-p2v-card{
  background:linear-gradient(135deg,#8B5CF6 0%,#7C3AED 100%);
  border-radius:16px;padding:16px;display:flex;align-items:center;gap:12px;
  cursor:pointer;color:#fff;
  box-shadow:0 4px 12px rgba(124,58,237,.25);
}
.phone-p2v-card .ph-p2v-ico{
  width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.2);
  display:grid;place-items:center;font-size:22px;flex-shrink:0;
}
.phone-p2v-card .ph-p2v-text{flex:1}
.phone-p2v-card .ph-p2v-text b{font-size:15px;font-weight:800;display:block}
.phone-p2v-card .ph-p2v-text small{font-size:12px;color:rgba(255,255,255,.8);display:block;margin-top:1px}

/* 横滑卡片列表 */
.phone-h-scroll{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.phone-h-scroll::-webkit-scrollbar{display:none}

/* 素材分类小卡 (78x66) */
.phone-cat-card{
  width:78px;height:66px;background:var(--app-surface);border:1px solid var(--app-gray200);
  border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;flex-shrink:0;cursor:pointer;
}
.phone-cat-card b{font-size:20px;font-weight:700;color:var(--app-primary)}
.phone-cat-card span{font-size:11px;color:var(--app-text-secondary)}

/* 素材空态卡 */
.phone-cat-empty{
  height:66px;background:var(--app-surface);border:1px solid var(--app-gray200);
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--app-text-muted);flex:1;gap:6px;cursor:pointer;
}

/* 最近作品横滑卡 (9:16) */
.phone-recent-work{
  width:90px;aspect-ratio:9/16;border-radius:12px;overflow:hidden;
  background:var(--app-gray100);position:relative;flex-shrink:0;cursor:pointer;
}
.phone-recent-work .ph-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:30px;color:rgba(255,255,255,.7);
}

/* ── 素材库 ── */
/* 全宽按钮 */
.phone-full-btn{
  display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;
  border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;border:0;
}
.phone-full-btn.pri{background:var(--app-primary);color:#fff}
.phone-full-btn.out{background:var(--app-surface);border:1px solid var(--app-gray200);color:var(--app-text-primary)}
.phone-full-btn .ph-btn-ico{font-size:18px}

/* 搜索框 */
.phone-search{
  display:flex;align-items:center;gap:8px;background:var(--app-surface);
  border:1px solid var(--app-gray200);border-radius:12px;padding:0 12px;height:44px;
}
.phone-search input{
  flex:1;border:0;outline:0;background:none;font-size:14px;color:var(--app-text-primary);
}
.phone-search .ph-search-ico{color:var(--app-text-muted);font-size:18px}

/* 分类筛选 Wrap */
.phone-cat-chips{display:flex;gap:8px;flex-wrap:wrap}
.phone-cat-chip{
  padding:6px 14px;border-radius:20px;font-size:13px;font-weight:500;
  background:var(--app-surface);border:1px solid var(--app-gray200);
  color:var(--app-text-secondary);cursor:pointer;transition:all .15s;
}
.phone-cat-chip.on{background:var(--app-primary);color:#fff;border-color:var(--app-primary)}

/* 素材网格 (3 列) */
.phone-clip-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.phone-clip-tile{
  aspect-ratio:9/16;border-radius:12px;overflow:hidden;
  background:var(--app-gray100);position:relative;cursor:pointer;
}
.phone-clip-tile .ph-clip-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:32px;color:rgba(255,255,255,.6);
}
.phone-clip-tile .ph-clip-badge{
  position:absolute;top:4px;left:4px;background:var(--app-primary);color:#fff;
  font-size:9px;padding:2px 5px;border-radius:4px;font-weight:600;
}
.phone-clip-tile .ph-clip-time{
  position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.54);color:#fff;
  font-size:9px;padding:2px 5px;border-radius:4px;
}

/* ── 出片配置 ── */
/* 身份+模板卡 */
.phone-identity-card{
  background:var(--app-primary-light);border:1px solid var(--app-primary);
  border-radius:16px;padding:16px;display:flex;align-items:center;gap:12px;
}
.phone-identity-card .ph-id-ico{
  width:48px;height:48px;border-radius:12px;background:var(--app-primary);
  display:grid;place-items:center;font-size:24px;color:#fff;flex-shrink:0;
}
.phone-identity-card .ph-id-text{flex:1}
.phone-identity-card .ph-id-text b{font-size:16px;font-weight:700;color:var(--app-primary)}
.phone-identity-card .ph-id-text small{font-size:13px;color:var(--app-text-secondary);display:block;margin-top:1px}
.phone-identity-card .ph-id-actions{display:flex;align-items:center;gap:8px}
.phone-identity-card .ph-id-btn{font-size:14px;font-weight:600;color:var(--app-primary);background:none;border:0;cursor:pointer}
.phone-identity-card .ph-id-sep{width:1px;height:14px;background:var(--app-gray300)}

/* 来源切换分段控件 */
.phone-seg{
  display:flex;background:var(--app-surface-variant);border:1px solid var(--app-gray200);
  border-radius:12px;padding:4px;gap:4px;
}
.phone-seg button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px;border-radius:10px;border:0;cursor:pointer;font-size:13px;font-weight:500;
  background:none;color:var(--app-text-secondary);transition:all .15s;
}
.phone-seg button.on{background:var(--app-primary);color:#fff}
.phone-seg button .ph-seg-ico{font-size:16px}

/* 文案三入口 */
.phone-script-row{display:flex;gap:8px}
.phone-script-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 8px;border-radius:24px;cursor:pointer;
  background:var(--app-surface);border:1px solid var(--app-gray200);
  font-size:12px;font-weight:500;color:var(--app-text-secondary);transition:all .15s;
}
.phone-script-btn .ph-script-ico{font-size:20px}
.phone-script-btn.on{border-color:var(--app-primary);background:var(--app-primary-light);color:var(--app-primary)}

/* 加工方式网格 */
.phone-proc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.phone-proc-card{
  background:var(--app-surface);border:1px solid var(--app-gray200);border-radius:12px;
  padding:12px;display:flex;align-items:center;gap:10px;cursor:pointer;
}
.phone-proc-card .ph-proc-ico{font-size:20px;color:var(--app-primary);flex-shrink:0}
.phone-proc-card .ph-proc-text{flex:1;min-width:0}
.phone-proc-card .ph-proc-text b{font-size:14px;font-weight:600;color:var(--app-text-primary)}
.phone-proc-card .ph-proc-text small{font-size:11px;color:var(--app-text-secondary);display:block;margin-top:1px}
.phone-proc-card .ph-proc-arrow{color:var(--app-text-muted);font-size:14px}

/* 出片数量 */
.phone-count-row{display:flex;align-items:center;gap:12px}
.phone-count-row .ph-count-label{font-size:15px;font-weight:600;color:var(--app-text-primary)}
.phone-count-row .ph-count-slider{flex:1;height:4px;background:var(--app-gray200);border-radius:2px;position:relative}
.phone-count-row .ph-count-slider .ph-fill{height:100%;background:var(--app-primary);border-radius:2px}
.phone-count-row .ph-count-val{
  background:var(--app-primary-light);border-radius:12px;padding:6px 14px;
  font-size:18px;font-weight:700;color:var(--app-primary);
}

/* 底部 CTA */
.phone-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:52px;border-radius:26px;border:0;cursor:pointer;
  font-size:18px;font-weight:500;
}
.phone-cta.pri{background:var(--app-primary);color:#fff}
.phone-cta.dis{background:var(--app-gray200);color:var(--app-text-muted);cursor:default}

/* ── 作品库 ── */
/* 状态条 */
.phone-works-bar{
  display:flex;align-items:center;gap:8px;background:var(--app-primary-light);
  border-radius:12px;padding:8px 12px;font-size:13px;color:var(--app-text-primary);
}
.phone-works-bar .ph-ok-ico{color:var(--app-success);font-size:18px}
.phone-works-bar .ph-bar-link{margin-left:auto;font-size:13px;color:var(--app-primary);font-weight:500;cursor:pointer;background:none;border:0}

/* 作品网格 (2 列) */
.phone-works-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.phone-work-item{display:flex;flex-direction:column;gap:6px;cursor:pointer}
.phone-work-cover{
  aspect-ratio:9/16;border-radius:12px;overflow:hidden;
  background:var(--app-gray100);position:relative;
}
.phone-work-cover .ph-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:40px;color:rgba(255,255,255,.7);
}
.phone-work-cover .ph-new-tag{
  position:absolute;bottom:6px;right:6px;background:var(--app-primary);color:#fff;
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;
  display:flex;align-items:center;gap:3px;
}
.phone-work-name{font-size:12px;font-weight:600;color:var(--app-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 空态 */
.phone-works-empty{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:60px 20px;
}
.phone-works-empty .ph-empty-ico{font-size:48px;color:var(--app-gray300)}
.phone-works-empty b{font-size:15px;color:var(--app-text-secondary);font-weight:400}
.phone-works-empty small{font-size:13px;color:var(--app-text-muted)}
.phone-works-empty button{
  margin-top:8px;background:var(--app-primary);color:#fff;border:0;border-radius:26px;
  padding:12px 24px;font-size:15px;font-weight:500;cursor:pointer;
}

/* ── 我的 ── */
.phone-id-section-title{
  display:flex;align-items:center;justify-content:space-between;
  font-size:17px;font-weight:700;color:var(--app-text-primary);padding:0 0 8px;
}
.phone-id-section-title .ph-add-link{
  display:flex;align-items:center;gap:4px;font-size:14px;font-weight:500;
  color:var(--app-primary);background:none;border:0;cursor:pointer;
}

/* 身份卡 */
.phone-id-card{
  border-radius:12px;padding:14px;display:flex;align-items:center;gap:12px;
  background:var(--app-surface);border:1px solid var(--app-gray200);margin-bottom:8px;
}
.phone-id-card.active{background:var(--app-primary-light);border:1.5px solid var(--app-primary)}
.phone-id-card .ph-id-avatar{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-size:22px;
}
.phone-id-card.active .ph-id-avatar{background:var(--app-primary);color:#fff}
.phone-id-card:not(.active) .ph-id-avatar{background:var(--app-gray200);color:var(--app-text-secondary)}
.phone-id-card .ph-id-name{font-size:15px;font-weight:700;color:var(--app-text-primary)}
.phone-id-card .ph-id-sub{font-size:12px;color:var(--app-text-secondary);margin-top:1px}
.phone-id-card .ph-id-current{
  background:var(--app-primary);color:#fff;font-size:10px;font-weight:600;
  padding:2px 6px;border-radius:6px;margin-left:8px;
}

/* 同步到电脑卡 */
.phone-sync-card{
  background:var(--app-primary-light);border:1px solid rgba(220,38,38,.3);
  border-radius:14px;padding:14px;display:flex;align-items:center;gap:12px;cursor:pointer;
}
.phone-sync-card .ph-sync-ico{
  width:44px;height:44px;border-radius:12px;background:var(--app-primary);
  display:grid;place-items:center;font-size:24px;color:#fff;flex-shrink:0;
}
.phone-sync-card .ph-sync-text{flex:1}
.phone-sync-card .ph-sync-text b{font-size:16px;font-weight:700;color:var(--app-text-primary)}
.phone-sync-card .ph-sync-text small{font-size:12px;color:var(--app-text-secondary);display:block;margin-top:1px}
.phone-sync-card .ph-sync-arrow{color:var(--app-primary);font-size:16px}

/* 菜单列表 */
.phone-menu-list{display:flex;flex-direction:column;gap:8px}
.phone-menu-tile{
  background:var(--app-surface);border:1px solid var(--app-gray200);border-radius:12px;
  padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;
}
.phone-menu-tile .ph-menu-ico{font-size:20px;color:var(--app-primary);flex-shrink:0}
.phone-menu-tile .ph-menu-text{flex:1;min-width:0}
.phone-menu-tile .ph-menu-text b{font-size:15px;font-weight:600;color:var(--app-text-primary)}
.phone-menu-tile .ph-menu-text small{font-size:12px;color:var(--app-text-secondary);display:block;margin-top:1px}
.phone-menu-tile .ph-menu-arrow{color:var(--app-text-muted);font-size:16px}
.phone-menu-tile.danger .ph-menu-ico{color:var(--app-primary)}
.phone-menu-tile.danger .ph-menu-text b{color:var(--app-primary)}

/* 版本号 */
.phone-version{text-align:center;font-size:12px;color:var(--app-text-muted);padding:16px 0 8px}

/* ── 悬浮胶囊 TabBar (复刻 PillTabBar) ── */
.phone-tabbar-wrap{
  padding:0 21px 21px;flex-shrink:0;background:var(--app-bg);
}
.phone-tabbar{
  display:flex;height:62px;background:var(--app-surface);
  border:1px solid var(--app-gray200);border-radius:36px;padding:4px;gap:0;
}
.phone-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:none;border:0;cursor:pointer;padding:6px 0;
  border-radius:26px;transition:all .15s;
}
.phone-tab.on{background:var(--app-primary)}
.phone-tab .ph-tab-ico{font-size:18px;transition:transform .15s}
.phone-tab .ph-tab-lbl{font-size:10px;font-weight:500}
.phone-tab:not(.on) .ph-tab-ico{filter:grayscale(.3)}
.phone-tab:not(.on){color:var(--app-text-secondary)}
.phone-tab.on{color:#fff}
.phone-tab.on .ph-tab-ico{transform:scale(1.15)}

/* ── 手机子页面(功能在手机内完成) ── */
.phone-sub-view{
  flex:1;display:flex;flex-direction:column;overflow:hidden;
  background:var(--app-bg);
}
.phone-sub-header{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;background:var(--app-bg);border-bottom:1px solid var(--app-gray200);
  flex-shrink:0;
}
.phone-sub-header h2{margin:0;font-size:15px;font-weight:700;color:var(--app-text-primary);flex:1;text-align:center}
.phone-sub-back{
  background:var(--app-primary-light);color:var(--app-primary);border:0;border-radius:16px;
  padding:5px 12px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.phone-sub-back:hover{background:var(--app-primary);color:#fff}
.phone-sub-spacer{width:60px}
.phone-sub-content{
  flex:1;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.phone-sub-content::-webkit-scrollbar{width:0;display:none}

/* ── 手机子页面作用域:将旧 PC 变量映射到 AppTheme 手机配色
      这样 wizard/dh/works/account 等 pageXxx 页在手机屏内自动对齐移动端配色 ── */
.phone-sub-content,
.phone-sub-content *{
  --paper:var(--app-bg);
  --card:var(--app-surface);
  --ink:var(--app-text-primary);
  --ink2:var(--app-text-secondary);
  --ink3:var(--app-text-muted);
  --line:var(--app-gray200);
  --brand:var(--app-primary);
  --brand-deep:#B91C1C;
  --brand-wash:var(--app-primary-light);
  --ok:var(--app-success);
  --ok-wash:#DCFCE7;
  --run:var(--app-warning);
  --run-wash:var(--app-accent-light);
}

/* ── 手机屏内 pageXxx 页面适配(缩小 padding、限制宽度) ── */
.phone-sub-content{padding:8px 10px;max-width:100%;overflow-x:hidden;background:var(--app-bg)}
.phone-sub-content .main{padding:8px 10px;max-width:100%;background:var(--app-bg)}
/* wizard 手机端 pw-wrap 需要撑满，不受外层 padding 干扰 */
.phone-sub-content .pw-wrap{margin:-8px -10px;padding:0;width:calc(100% + 20px)}
.phone-sub-content .main-head{display:none} /* 用手机子页 header, 隐藏页面自带标题 */
.phone-sub-content .main-head h1{font-size:16px}
.phone-sub-content .main-head .sub{font-size:11px}
.phone-sub-content .card{max-width:100%;border-radius:12px;padding:10px 12px;margin-bottom:10px;background:var(--app-surface);border-color:var(--app-gray200)}
.phone-sub-content .card h5{font-size:14px}
.phone-sub-content .card p{font-size:12px;margin:4px 0 10px}
.phone-sub-content .chip{font-size:12px;padding:4px 10px}
.phone-sub-content .btn{font-size:13px;padding:8px 16px}
.phone-sub-content .btn-pri{font-size:13px;padding:8px 18px}
.phone-sub-content .btn-sec{font-size:13px;padding:7px 14px}
.phone-sub-content .works .work{width:calc(50% - 6px)}
.phone-sub-content .works{gap:10px}
.phone-sub-content .kv{padding:5px 0;font-size:12px}
.phone-sub-content input[type=text],
.phone-sub-content input:not([type]),
.phone-sub-content textarea{font-size:14px}
.phone-sub-content .input{font-size:14px;padding:9px 12px;border-radius:10px}

/* wizard 步骤条适配 */
.phone-sub-content .steps{gap:2px;margin-bottom:12px}
.phone-sub-content .step{font-size:11px;gap:4px}
.phone-sub-content .step .n{width:18px;height:18px;font-size:10px}
.phone-sub-content .step-line{margin:0 6px}

/* wizard 向导布局:单列(移动端不用双栏) */
.phone-sub-content .wizard{flex-direction:column;gap:12px}
.phone-sub-content .wiz-form{max-width:100%}
.phone-sub-content .wiz-side{width:100%;position:static}
.phone-sub-content .wiz-side .card{position:static}

/* wizard 上传区 */
.phone-sub-content .drop{padding:24px 14px}
.phone-sub-content .drop b{font-size:14px}
.phone-sub-content .drop span{font-size:12px}
.phone-sub-content .photos{grid-template-columns:repeat(3,1fr);gap:8px}
.phone-sub-content .ph{aspect-ratio:3/4}
.phone-sub-content .ph img{object-fit:cover}

/* wizard 分镜卡片 */
.phone-sub-content .shot{flex-direction:column;gap:8px;padding:10px 12px}
.phone-sub-content .shot .thumb{width:100%;height:120px}

/* wizard segmented controls */
.phone-sub-content .seg{grid-template-columns:repeat(4,1fr);gap:6px}
.phone-sub-content .seg .s{padding:8px 4px}
.phone-sub-content .seg .s b{font-size:14px}
.phone-sub-content .seg .s span{font-size:10px}

/* dh 底板/语音选择适配 */
.phone-sub-content .dh-avatar{width:48px;height:48px}
.phone-sub-content .voice-row{gap:4px}

/* 通用:隐藏不需要的 PC 元素 */
.phone-sub-content .rail{display:none}

/* wizard 的 row-sw 在手机上更紧凑 */
.phone-sub-content .row-sw{padding:8px 0;gap:8px}
.phone-sub-content .row-sw .tx b{font-size:13px}
.phone-sub-content .row-sw .tx span{font-size:11px}

/* wizard 照片角色标注 */
.phone-sub-content .photos .ph .st{font-size:10px}

/* wizard 脚本步骤按钮(全宽) */
.phone-sub-content .wizard .wiz-form .btn-pri{width:100%;justify-content:center}

/* 账号页大号数字适配 */
.phone-sub-content .card h5{font-size:14px}
.phone-sub-content .card .hint{font-size:12px}

/* 作品库网格在手机上 2 列 */
.phone-sub-content .works{grid-template-columns:repeat(2,1fr);gap:10px}
.phone-sub-content .work .cover{aspect-ratio:9/16}
.phone-sub-content .work .w-m{padding:7px 9px}
.phone-sub-content .work .w-m b{font-size:12px}

/* modal 在手机上更紧凑 */
.phone-sub-content .modal{width:calc(100% - 20px);padding:18px;border-radius:14px}

/* 模特选择弹层 */
.mp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px}
.mp-card{display:flex;flex-direction:column;align-items:stretch;padding:10px;border-radius:14px;border:1px solid var(--line);background:var(--card);cursor:pointer;transition:all .15s;text-align:left;font:inherit;color:inherit}
.mp-card:hover{border-color:var(--brand);background:var(--brand-wash)}
.mp-card.sel{border:2px solid var(--brand);background:var(--brand-wash);box-shadow:0 0 0 3px rgba(217,90,68,.15)}
.mp-thumb{width:100%;aspect-ratio:2/3;display:flex;align-items:flex-start;justify-content:center;background:var(--bg);border-radius:10px;overflow:hidden;margin-bottom:8px}
.mp-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center}
.mp-info{display:flex;flex-direction:row;gap:6px;padding:0 2px 2px;justify-content:center;align-items:center;flex-wrap:wrap}
.mp-name{font-size:14px;font-weight:700;color:var(--ink);line-height:1.2;white-space:nowrap}
.mp-meta{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.mp-gender{font-size:12px;color:var(--ink2)}
.mp-tag{font-size:12px;color:var(--ink2);background:var(--bg);padding:1px 6px;border-radius:8px}

/* 选择卡片(系统/自定义模特、系统/克隆声音共用) */
.pick-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);cursor:pointer;transition:all .15s}
.pick-card:hover{border-color:var(--brand);background:var(--brand-wash)}
.pick-card.sel{border:2px solid var(--brand);background:var(--brand-wash);box-shadow:0 0 0 3px rgba(220,38,38,.12)}

/* 数字人页面适配 */
.phone-sub-content .card{padding:10px 12px}
.phone-sub-content .row-sw{flex-wrap:wrap}
.phone-sub-content .row-sw .tx{min-width:140px}

/* toast 在手机上更紧凑 */
.phone-sub-content .toast{font-size:12px;padding:8px 16px}

/* ═══════════════════════════════════════════════════
   手机端 wizard(p2v向导) App 同款 UI
   与 Flutter: p2v_wizard_screen.dart _photosNarrow 逐字对齐
   ═══════════════════════════════════════════════════ */
.pw-wrap{display:flex;flex-direction:column;height:100%;background:var(--app-bg)}
.pw-scroll{
  flex:1;overflow-y:auto;padding:16px 16px 12px;
  -webkit-overflow-scrolling:touch;
}
.pw-scroll::-webkit-scrollbar{width:0;display:none}

/* 1. 进度头:左「商品照片」+ 右「已选 N/至少 3 张」 + 下进度条 */
.pw-prog-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.pw-prog-head b{font-size:17px;font-weight:800;color:var(--app-text-primary)}
.pw-prog-head span{font-size:12.5px;font-weight:700;color:var(--app-text-muted)}
.pw-prog-head span.ok{color:var(--app-success)}
.pw-prog-bar{
  height:7px;background:var(--app-gray200);border-radius:999px;overflow:hidden;margin-bottom:14px;
}
.pw-prog-bar > i{
  display:block;height:100%;background:var(--app-primary);border-radius:999px;
  transition:width .25s ease;
}
.pw-prog-bar > i.ok{background:var(--app-success)}

/* 2. 空态上传区: 浅粉底 + 相机白方图标 + 文案 + 3 个占位格 */
.pw-empty{
  background:var(--app-primary-light);border-radius:18px;padding:24px 16px;margin-bottom:14px;
  border:1.5px solid rgba(220,38,38,0.28);cursor:pointer;
}
.pw-empty-ico{
  width:54px;height:54px;border-radius:16px;background:#fff;margin:0 auto 10px;
  display:grid;place-items:center;border:1px solid rgba(220,38,38,0.25);
}
.pw-empty-ico svg{width:26px;height:26px;stroke:var(--app-primary);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pw-empty-title{
  text-align:center;font-size:16px;font-weight:800;color:var(--app-primary);margin:0 0 4px;
}
.pw-empty-sub{
  text-align:center;font-size:12px;color:var(--app-text-secondary);margin:0 0 14px;
}
.pw-empty-slots{display:flex;gap:8px}
.pw-slot{
  flex:1;aspect-ratio:1/1;background:#fff;border:1px solid var(--app-gray200);border-radius:12px;
  display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--app-text-muted);
}

/* 2b. 已选照片网格 */
.pw-photos{
  display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px;
}
.pw-photo{
  aspect-ratio:3/4;border-radius:13px;overflow:hidden;position:relative;background:var(--app-gray100);
}
.pw-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pw-photo-idx{position:absolute;left:6px;top:6px;z-index:2;background:rgba(0,0,0,.55);color:#fff;
  border-radius:7px;padding:1px 7px;font-size:11px;font-weight:700;line-height:1.6}
.pw-photo .rm{
  position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.54);border:0;color:#fff;font-size:13px;font-weight:700;
  display:grid;place-items:center;cursor:pointer;padding:0;line-height:1;
}
.pw-add{
  background:var(--app-primary-light);border:1px solid rgba(220,38,38,0.28);
  border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;cursor:pointer;color:var(--app-primary);
}
.pw-add b{font-size:24px;font-weight:700;line-height:1}
.pw-add span{font-size:12px;font-weight:700}
.pw-add.main{background:var(--app-primary-light);border:1.5px dashed var(--app-primary)}
.pw-rol{position:absolute;left:5px;right:5px;bottom:5px;border:0;border-radius:6px;padding:3px 6px;
  background:rgba(0,0,0,.54);color:#fff;font-size:11px;font-weight:700;cursor:pointer}
.pw-veil{
  position:absolute;inset:0;background:rgba(255,255,255,.72);display:grid;place-items:center;
}

/* 3. Tips 卡(白卡绿勾) */
.pw-tips{
  background:var(--app-surface);border:1px solid var(--app-gray200);border-radius:14px;
  padding:13px;margin-bottom:12px;
}
.pw-tips h6{
  margin:0 0 8px;font-size:13px;font-weight:800;color:var(--app-text-primary);
}
.pw-tip{display:flex;gap:7px;align-items:flex-start;margin-bottom:6px}
.pw-tip:last-child{margin-bottom:0}
.pw-tip i{
  flex-shrink:0;color:var(--app-success);font-style:normal;font-size:15px;line-height:1.2;
}
.pw-tip span{flex:1;font-size:12.5px;color:var(--app-text-secondary);line-height:1.45}

/* 4. 警告卡(琥珀色) */
.pw-warn{
  background:#FCF3E2;border:1px solid #EBD6A8;border-radius:12px;padding:12px;
  display:flex;gap:6px;align-items:flex-start;margin-bottom:12px;
}
.pw-warn i{flex-shrink:0;font-style:normal}
.pw-warn span{font-size:12px;color:#7A4A12;line-height:1.5}

/* 5. 底部吸底 CTA(白卡顶部分隔 + 副文案灰字 + 大红圆角按钮) */
.pw-bottom{
  flex-shrink:0;background:var(--app-surface);
  border-top:1px solid var(--app-gray200);padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.pw-bottom-sub{
  text-align:center;font-size:12px;color:var(--app-text-muted);margin:0 0 6px;
}
.pw-bottom-btn{
  width:100%;height:52px;border-radius:26px;border:0;cursor:pointer;
  font-size:18px;font-weight:500;color:#fff;background:var(--app-primary);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.pw-bottom-btn[disabled]{background:var(--app-gray200);color:var(--app-text-muted);cursor:not-allowed}

/* 6. 通用 card 样式(其他 step 复用) */
.pw-card{
  background:var(--app-surface);border:1px solid var(--app-gray200);border-radius:14px;
  padding:14px;margin-bottom:12px;
}
.pw-card h6{
  margin:0 0 6px;font-size:14px;font-weight:800;color:var(--app-text-primary);
}
.pw-card .hint{margin:0 0 12px;font-size:12px;color:var(--app-text-secondary)}
.pw-card p.hint{margin:0 0 12px;font-size:12px;color:var(--app-text-secondary)}
.pw-card .note{font-size:12px;color:var(--app-text-secondary);margin:2px 0}
.pw-card .kv{padding:5px 0;font-size:12px;display:flex;gap:8px}
.pw-card .kv .k{color:var(--app-text-secondary);flex-shrink:0}
.pw-card .kv .v{color:var(--app-text-primary);flex:1;min-width:0}
.pw-row-btn{display:flex;gap:8px;margin-top:12px}
.pw-row-btn .grow{flex:1}
.pw-btn{
  border-radius:26px;height:44px;padding:0 18px;font-size:14px;font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;
}
.pw-btn.sec{background:var(--app-gray100);color:var(--app-text-primary)}
.pw-btn.pri{background:var(--app-primary);color:#fff}
.pw-btn.pri[disabled]{background:var(--app-gray200);color:var(--app-text-muted);cursor:not-allowed}
.pw-chip-row{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 14px}
.pw-chip{
  padding:8px 16px;border-radius:20px;background:var(--app-surface);
  border:1px solid var(--app-gray200);font-size:14px;font-weight:500;
  color:var(--app-text-primary);cursor:pointer;
}
.pw-chip.on{background:var(--app-primary-light);color:var(--app-primary);border-color:var(--app-primary)}
.pw-photo-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pw-pr-card{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--app-gray100)}
.pw-pr-card img{width:100%;height:100%;object-fit:cover}
.pw-pr-card .st{
  position:absolute;left:4px;bottom:4px;font-size:10px;font-weight:700;padding:2px 6px;border-radius:999px;
}
.pw-pr-card .st.b-brand{background:var(--app-primary);color:#fff}
.pw-pr-card .st.b-run{background:var(--app-warning);color:#fff}
.pw-pr-card .st.b-bad{background:var(--app-primary);color:#fff}
.pw-input{
  width:100%;border:1px solid var(--app-gray200);background:var(--app-surface);border-radius:12px;
  padding:12px 14px;font-size:14px;color:var(--app-text-primary);outline:none;box-sizing:border-box;
}
.pw-input:focus{border-color:var(--app-primary);border-width:2px;padding:11px 13px}

/* 滚动条隐藏(手机屏不需要) */
.phone-sub-content::-webkit-scrollbar{width:0;display:none}
.phone-sub-content *::-webkit-scrollbar{width:0;display:none}

/* ═══════════════════════════════════════════════════════
   PC Web 重设计样式 (工作台 / 用户中心 / 投流视频)
   ═══════════════════════════════════════════════════════ */

/* ── 工作台 ── */
.dash-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.dash-topbar-title{font-size:18px;font-weight:900}
.dash-topbar-actions{display:flex;align-items:center;gap:12px}
.dash-credit-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--brand-wash);color:var(--brand);
  padding:6px 14px;border-radius:999px;font-size:14px;font-weight:800;
}
.dash-credit-badge .dash-credit-ico{font-size:14px}
.dash-credit-badge b{font-variant-numeric:tabular-nums}

.dash-greet{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.dash-greet h1{font-size:24px;font-weight:900;margin:0}
.dash-greet-sub{font-size:14px;color:var(--ink2);margin-top:2px}

.dash-cards{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:16px;margin-bottom:24px}
@media(max-width:900px){.dash-cards{grid-template-columns:1fr 1fr}}
.dc-card{border-radius:16px;padding:20px;border:1px solid var(--line);background:var(--card);position:relative;overflow:hidden}
.dc-card.primary{background:linear-gradient(135deg,#DC2626 0%,#991B1B 100%);color:#fff;border:none}
.dc-card.primary::after{content:'';position:absolute;right:-20px;top:-20px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.08)}
.dc-label{font-size:13px;opacity:.8;margin-bottom:6px}
.dc-card.primary .dc-label{opacity:.85}
.dc-num{font-size:28px;font-weight:900;font-variant-numeric:tabular-nums}
.dc-card.primary .dc-num{font-size:32px}
.dc-unit{font-size:13px;opacity:.7;margin-left:3px}
.dc-actions{display:flex;gap:8px;margin-top:12px}
.dc-btn{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);color:#fff;padding:5px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none}
.dc-btn.solid{background:#fff;color:var(--brand);border-color:#fff}
.dc-btn:hover{text-decoration:none;opacity:.9}
.dc-icon{font-size:0;margin-bottom:6px}
.dc-icon svg{width:28px;height:28px;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;fill:none}

.dash-section-title{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:12px}

.dash-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
@media(max-width:900px){.dash-features{grid-template-columns:1fr}}
.df-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 20px;cursor:pointer;position:relative;transition:transform .15s,box-shadow .15s;text-align:left;border-style:solid}
.df-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.df-card-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.df-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.df-icon svg{width:24px;height:24px;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;fill:none}
.df-title{font-size:17px;font-weight:800;color:var(--ink)}
.df-desc{font-size:13px;color:var(--ink2);line-height:1.5}
.df-tag{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;flex-shrink:0}
.df-tag.hot{background:var(--brand);color:#fff}
.df-tag.member{background:var(--tip-wash);color:var(--tip)}
.df-tag.local{background:var(--ok-wash);color:var(--ok)}
.df-meta{font-size:12px;color:var(--ink3);margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}

.dash-table{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.dash-table-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:0}
.dash-table-head h5{font-size:16px;font-weight:800;margin:0}
.dash-table-more{font-size:13px;color:var(--ink3);text-decoration:none}
.dash-table-more:hover{color:var(--brand)}
.dash-table-row-head{display:flex;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);gap:16px;background:var(--paper)}
.dash-table-row-head > div:first-child{flex:1;font-size:13px;font-weight:800;color:var(--ink2)}
.dash-table-row-head > div:not(:first-child){width:80px;font-size:13px;font-weight:800;color:var(--ink2)}
.dash-row{display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--paper)}
.dash-row:last-child{border-bottom:none}
.dash-row-name{flex:1;display:flex;align-items:center;gap:12px;min-width:0}
.dash-row-name b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-row-thumb{width:40px;height:40px;border-radius:8px;background:var(--paper);display:grid;place-items:center;font-size:18px;flex-shrink:0;overflow:hidden}
.dash-row-meta{width:80px;font-size:12px;color:var(--ink3);flex-shrink:0}
.dash-row-status{font-size:12px;font-weight:700;padding:4px 10px;border-radius:6px;flex-shrink:0}
.dash-row-status.done{background:var(--ok-wash);color:var(--ok)}
.dash-row-status.running{background:var(--brand-wash);color:var(--brand)}

/* ── 用户中心 ── */
.uc-profile{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:28px;display:flex;align-items:center;gap:24px;margin-bottom:20px;
  position:relative;overflow:hidden;
}
.uc-profile::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:6px;
  background:linear-gradient(180deg,var(--brand),var(--tip));
}
.uc-profile-avatar{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--tip));
  color:#fff;display:grid;place-items:center;font-size:30px;font-weight:800;flex-shrink:0;
}
.uc-profile-info{flex:1}
.uc-profile-name{font-size:22px;font-weight:900;color:var(--ink)}
.uc-profile-tags{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.uc-tag{font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px}
.uc-tag.member{background:var(--run-wash);color:var(--run)}
.uc-tag.member.off{background:var(--paper);color:var(--ink3)}
.uc-tag.phone{background:var(--paper);color:var(--ink2)}
.uc-profile-recharge{
  background:var(--brand);color:#fff;border:none;
  padding:12px 28px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;
  flex-shrink:0;
}
.uc-profile-recharge:hover{background:var(--brand-deep)}

.uc-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:20px;margin-bottom:20px}
@media(max-width:900px){.uc-grid{grid-template-columns:1fr}}
.uc-panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.uc-panel-title{font-size:16px;font-weight:800;margin-bottom:16px}
.uc-panel-title .hint{font-size:12px;color:var(--ink3);font-weight:400;float:right}

.uc-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.uc-stat-item{background:var(--paper);border-radius:12px;padding:16px;text-align:center}
.uc-stat-item .uc-stat-num,.uc-stat-item b{display:block;font-size:24px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
.uc-stat-item .uc-stat-label,.uc-stat-item span:not(.uc-stat-num){display:block;font-size:12px;color:var(--ink3);margin-top:4px}

.uc-pack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:700px){.uc-pack-grid{grid-template-columns:repeat(2,1fr)}}
.uc-pack{border:2px solid var(--line);border-radius:12px;padding:16px 8px;text-align:center;cursor:pointer;transition:border-color .2s;background:var(--card)}
.uc-pack:hover{border-color:var(--brand)}
.uc-pack.hot{border-color:var(--brand);background:var(--brand-wash)}
.uc-pack .uc-pack-credit,.uc-pack b{display:block;font-size:20px;font-weight:900;color:var(--ink)}
.uc-pack .uc-pack-price,.uc-pack .uc-pack-price{font-size:13px;color:var(--ink2);margin-top:4px}
.uc-pack-tag{display:inline-block;background:var(--run);color:#fff;font-size:9px;padding:2px 6px;border-radius:4px;margin-bottom:4px;font-weight:600}
.uc-pack-tip{font-size:12px;color:var(--ink3);margin-top:12px;text-align:right}

.uc-menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:700px){.uc-menu-grid{grid-template-columns:1fr}}
.uc-menu-card{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:box-shadow .2s;
}
.uc-menu-card:hover{box-shadow:0 2px 12px rgba(0,0,0,.06)}
.uc-menu-ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:20px;flex-shrink:0;background:var(--paper)}
.uc-menu-text b{font-size:14px;font-weight:700;display:block}
.uc-menu-text small{font-size:12px;color:var(--ink3);display:block;margin-top:2px}

/* ═══════════════════════════════════════════════════════
 * 投流视频向导 · 设计稿样式 (与 wizard_design_preview.html 对齐)
 * ═══════════════════════════════════════════════════════ */

/* ── Step 容器 ── */
.step{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:20px 24px;margin-bottom:16px;position:relative;
}
.step-num{
  position:absolute;top:-12px;left:20px;
  background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;
  font-weight:800;font-size:11px;padding:3px 12px;border-radius:999px;
  letter-spacing:.08em;box-shadow:0 2px 6px rgba(220,38,38,.3);
}
.step-title{font-size:18px;font-weight:900;margin:8px 0 4px}
.step-sub{font-size:12px;color:var(--ink3);margin-bottom:16px}
.arrow{text-align:center;color:var(--ink3);font-size:20px;margin:6px 0;line-height:1}

/* ── Layout ── */
.layout{display:grid;gap:10px}
.layout.two-col{grid-template-columns:1fr 300px}
.grid{display:grid;gap:8px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}

/* ── Comp block (组件块) ── */
.comp{
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:10px 14px;font-size:13px;color:var(--ink2);display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.comp b{color:var(--ink);font-weight:700}
.comp .tag{
  background:var(--brand-wash);color:var(--brand);font-weight:700;
  padding:2px 8px;border-radius:999px;font-size:11px;
}
.comp .tag.acc{background:var(--tip-wash);color:var(--tip)}
.comp .tag.ok{background:var(--ok-wash);color:var(--ok)}
.comp .tag.run{background:var(--run-wash);color:var(--run)}

/* ── Side panel ── */
.side{
  background:#FEF2F2;border:1px dashed var(--brand);border-radius:8px;
  padding:14px;font-size:12px;color:var(--ink2);
}
.side b{display:block;font-size:14px;color:var(--ink);margin-bottom:10px;font-weight:800}
.side .row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dashed var(--line);gap:8px}
.side .row:last-child{border:0}
.side .row b{font-size:12px;font-weight:700;display:inline}

/* ── List items (卖点/特性/人群/场景) ── */
.list{display:flex;flex-direction:column;gap:6px}
.list-item{
  display:flex;align-items:center;gap:10px;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;font-size:12.5px;color:var(--ink);line-height:1.5;
}
.list-item.checked{background:#FEE2E2;border-color:var(--brand)}
.list-item .chk{
  width:18px;height:18px;border-radius:4px;flex-shrink:0;
  background:#fff;border:1.6px solid var(--line);
  display:grid;place-items:center;font-size:10px;color:#fff;font-weight:800;
}
.list-item.checked .chk{background:var(--brand);border-color:var(--brand)}
.list-item .list-text{flex:1;min-width:0;word-break:break-word}
.list-item .del{
  flex-shrink:0;width:24px;height:24px;border-radius:6px;
  display:grid;place-items:center;color:var(--ink3);font-size:11px;cursor:pointer;
}
.list-item .del:hover{background:#FEF2F2;color:var(--brand)}
.list-item.simple{padding:10px 12px}
.list-item.add{
  background:var(--paper);border-style:dashed;color:var(--ink3);
  justify-content:center;font-weight:600;cursor:pointer;
}
.list-item.add:hover{border-color:var(--brand);color:var(--brand);background:#FEF2F2}

/* ── Chip list (可删除的标签) ── */
.chip-list{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip-list .chip{
  position:relative;padding:6px 28px 6px 12px;font-size:12px;font-weight:600;
  display:inline-flex;align-items:center;gap:4px;cursor:pointer;
}
.chip-list .chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.chip-list .chip .chip-x{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:11px;color:inherit;opacity:.5;font-weight:400;
}
.chip-list .chip.on .chip-x{opacity:.7}
.chip-list .chip.add{
  background:var(--paper);border-style:dashed;color:var(--ink3);font-weight:600;
}
.chip-list .chip.add:hover{border-color:var(--brand);color:var(--brand)}

/* ── Form fields ── */
.field-label{font-size:11.5px;color:var(--ink3);margin-bottom:4px;font-weight:600}
.field-input{
  width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:6px;
  font-size:14px;background:#fff;color:var(--ink);outline:none;
}
.field-input:focus{border-color:var(--brand)}

/* ── Card block ── */
.card-block{
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin:0;
}
.card-block + .card-block{margin-top:12px}
.grid .card-block{margin:0}
.card-block .card-title{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:2px}
.card-block .card-sub{font-size:11.5px;color:var(--ink3);margin-bottom:10px}

/* ── Section label ── */
.section-label{font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;margin:8px 0 4px}

/* ── Chip 覆盖 (在 card-block 内) ── */
.card-block .chip{margin:0}

/* ── Warn / Warn inline ── */
.warn{
  background:var(--run-wash);border:1px solid var(--run);border-radius:8px;
  padding:10px 14px;font-size:12px;color:var(--run);margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.warn-inline{
  background:var(--run-wash);border:1px solid var(--run);border-radius:8px;
  padding:8px 12px;font-size:12px;color:var(--run);margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}

/* ── Drop zone ── */
.drop{
  border:2px dashed #EFE1D8;border-radius:12px;padding:36px 20px;text-align:center;
  background:#FEF2F2;color:#6B4A3B;cursor:pointer
}
.drop svg{width:34px;height:34px;stroke:#DC2626;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.drop:hover,.drop.over{border-color:#DC2626}
.drop b{display:block;font-size:15px;color:#2E1B14;margin-bottom:4px}
.drop span{font-size:12px;color:#B7A197}

/* ── Director badge ── */
.director{
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:10px 14px;display:flex;align-items:center;gap:10px;font-size:12px;
}
.director .badge{
  background:var(--run-wash);color:var(--run);font-weight:800;font-size:11px;
  padding:2px 8px;border-radius:999px;
}

/* ── Shot cards ── */
.shot{
  display:flex;gap:10px;background:var(--paper);border:1px solid var(--line);
  border-radius:8px;padding:12px;
}
.shot-thumb{
  width:54px;height:72px;background:linear-gradient(135deg,#FEE2E2,#FEF3C7);
  border-radius:6px;flex-shrink:0;display:grid;place-items:center;font-size:22px;
}
.shot-body{flex:1;font-size:12px;color:var(--ink2)}
.shot-body b{color:var(--ink);display:block;margin-bottom:3px;font-size:13px}
.shot-body .meta{font-size:11px;color:var(--ink3);margin-bottom:4px}
.shot-line{
  background:#fff;border:1px dashed var(--brand);border-radius:6px;
  padding:6px 10px;font-size:12px;color:var(--ink);margin-top:4px;
  display:flex;align-items:center;gap:6px;
}

/* ── Photo with role ── */
.photo{
  aspect-ratio:3/4;background:#FEF2F2;border:1px solid var(--line);border-radius:8px;
  display:grid;place-items:center;color:var(--ink3);font-size:24px;position:relative;
}
.photo .role{
  position:absolute;bottom:4px;left:4px;font-size:10px;font-weight:700;
  padding:2px 6px;border-radius:4px;
}
.photo .role.main{background:#FEE2E2;color:var(--brand)}
.photo .role.det{background:var(--tip-wash);color:var(--tip)}
.photo .role.none{background:var(--run-wash);color:var(--run)}

/* ── Summary (Step 5) ── */
.summary{
  background:#fff;border:2px solid var(--brand);border-radius:12px;
  padding:20px;font-size:13px;
}
.summary h3{font-size:16px;font-weight:900;margin-bottom:14px}
.summary .bal{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line);gap:12px}
.summary .bal:last-of-type{border:0}
.summary .bal b{font-weight:700}
.summary .price{font-size:22px;font-weight:900;color:var(--brand)}
.summary .price small{font-size:12px;color:var(--ink3);font-weight:400}
.summary .ok{color:var(--ok);font-weight:700}

/* ── 按钮别名 (wizard.js 用 class="btn ghost") ── */
.btn.ghost{background:#fff;color:var(--ink2);border:1px solid var(--line);padding:7px 16px;font-size:12px;font-weight:700}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand)}

/* ── 上传区 (Step 1) ── */
.wiz-upload-zone{
  border:2px dashed var(--line);border-radius:12px;padding:36px 20px;text-align:center;
  background:#fff;color:var(--ink2);cursor:pointer;transition:border-color .15s,background .15s;
}
.wiz-upload-zone:hover,.wiz-upload-zone.dragover{border-color:var(--brand);background:#FEF2F2}
.wiz-upload-zone .up-ico{font-size:36px;color:var(--brand);margin-bottom:10px}
.wiz-upload-zone b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px}
.wiz-upload-zone span{font-size:12px;color:var(--ink3)}

/* ── Wizard 步骤进度 (设计稿版) ── */
.wiz-progress{
  display:flex;align-items:center;gap:0;margin-bottom:20px;
  flex-wrap:wrap;
}
.wiz-progress .wp-step{
  display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--ink3);
  white-space:nowrap;flex-shrink:0;
}
.wiz-progress .wp-step .wp-num{
  width:20px;height:20px;border-radius:50%;border:2px solid var(--line);
  display:grid;place-items:center;font-size:10px;font-weight:800;background:#fff;flex-shrink:0;
}
.wiz-progress .wp-step.active{color:var(--brand)}
.wiz-progress .wp-step.active .wp-num{border-color:var(--brand);background:var(--brand);color:#fff}
.wiz-progress .wp-step.done{color:var(--ok)}
.wiz-progress .wp-step.done .wp-num{border-color:var(--ok);background:var(--ok-wash);color:var(--ok)}
.wiz-progress .wp-line{flex:1;height:2px;background:var(--line);margin:0 4px;min-width:8px;flex-shrink:0}

/* ── Wizard 整体布局 ── */
.wizard{display:flex;gap:24px;align-items:flex-start}
.wiz-form{flex:1;min-width:0;max-width:760px;display:flex;flex-direction:column;gap:16px}
.wiz-side{width:300px;flex-shrink:0;position:sticky;top:20px}
@media (max-width:1100px){.wizard{flex-direction:column}.wiz-side{width:100%;position:static}}

/* ── 分镜卡片 (Step 4) ── */
.shot-card{
  display:flex;gap:12px;background:var(--paper);border:1px solid var(--line);
  border-radius:10px;padding:14px;
}
.shot-card .shot-thumb{
  width:54px;height:72px;background:linear-gradient(135deg,#FEE2E2,#FEF3C7);
  border-radius:8px;flex-shrink:0;display:grid;place-items:center;font-size:22px;
}
.shot-card .shot-body{flex:1;font-size:12.5px}
.shot-card .shot-body b{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.shot-card .shot-meta{font-size:11px;color:var(--ink3);margin:4px 0}
.shot-card .shot-desc{color:var(--ink2);line-height:1.6}
.shot-card .shot-line{
  background:#fff;border:1px dashed var(--brand);border-radius:6px;
  padding:6px 10px;font-size:12px;color:var(--ink);margin-top:8px;
  display:flex;align-items:center;gap:6px;
}
.shot-card .shot-line input{flex:1;border:0;background:transparent;outline:none;font-size:12px;color:var(--ink)}

/* ── AI 一句话分析 (Step 2) ── */
.ai-analysis{
  background:#FEF2F2;border:1px solid var(--brand);border-radius:10px;padding:14px 18px;
}
.ai-analysis b{font-size:14px;font-weight:800;color:var(--brand)}
.ai-analysis .sub{font-size:11.5px;color:var(--ink3);margin-bottom:6px}
.ai-analysis p{font-size:13px;color:var(--ink2);line-height:1.7}

/* ── 分镜管理 (Step 4) ── */
.shots-list{display:flex;flex-direction:column;gap:10px}
.shot-footer{
  display:flex;justify-content:space-between;align-items:center;margin-top:16px;
  font-size:12px;color:var(--ink3);
}
.shot-footer .btns{display:flex;gap:8px}

/* ── 确认页 (Step 5) ── */
.confirm-summary{
  background:#fff;border:2px solid var(--brand);border-radius:14px;
  padding:22px;font-size:13px;max-width:480px;margin:0 auto;
}
.confirm-summary h3{font-size:16px;font-weight:900;margin-bottom:14px}
.confirm-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line);gap:12px}
.confirm-row:last-of-type{border:0}
.confirm-row b{font-weight:700}
.confirm-row .price{font-size:22px;font-weight:900;color:var(--brand)}
.confirm-row .price small{font-size:12px;color:var(--ink3);font-weight:400}
.confirm-row .ok{color:var(--ok);font-weight:700}
.confirm-divider{border-top:2px solid var(--line);margin:10px 0;padding-top:10px}
.confirm-note{font-size:12px;color:var(--ink3);padding:10px 0;line-height:1.7}
.confirm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}

/* ═══════════════════════════════════════════════════════
 * 封面编辑器 (Cover Editor)
 * ═══════════════════════════════════════════════════════ */
/* 适配 modal 容器：扩展到视口大小，不滚动 */
/* 提高 specificity,确保覆盖 .modal 默认规则(720px width, padding:26px, max-height:90vh) */
.modal.modal.cover-editor-modal.cover-editor-modal {
  width:80vw!important;max-width:80vw!important;
  height:80vh!important;max-height:80vh!important;
  padding:0!important;overflow:hidden!important;
}
.cover-editor{
  display:flex;flex-direction:column;width:100%;height:100%;
  background:var(--card);border-radius:var(--r-lg);overflow:hidden;
}

/* Header */
.ce-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;border-bottom:1px solid var(--line);
}
.ce-title{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:700}
.ce-back{
  width:36px;height:36px;border-radius:8px;border:1px solid var(--line);
  background:var(--card);cursor:pointer;font-size:16px;
  display:grid;place-items:center;transition:all .15s;
}
.ce-back:hover{background:var(--brand-wash);border-color:var(--brand)}
.ce-header-actions{display:flex;gap:8px}

/* Body */
.ce-body{display:flex;flex:1;overflow:hidden;min-height:0;align-items:stretch}

/* Left Panel - 宽版 */
.ce-left-panel{
  width:255px;border-right:1px solid var(--line);padding:10px 0;
  display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex-shrink:0;
  background:#FBF5F1;height:100%;
}
.ce-section-title{
  font-size:12px;font-weight:700;color:#6B4A3B;
  text-align:left;margin-bottom:2px;
}
.ce-section-title-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;font-weight:700;color:var(--ink3);
  margin-bottom:4px;
}

/* 封面标题选择器 */
.ce-cover-title-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.ce-cover-title-card{
  display:flex;flex-direction:column;gap:2px;
  padding:8px 10px;border-radius:6px;
  border:1.5px solid var(--line);background:#fff;
  cursor:pointer;transition:all .15s;
}
.ce-cover-title-card:hover{border-color:var(--brand);background:#FFF8F0}
.ce-cover-title-card.selected{border-color:var(--brand);background:#FFF0E0;box-shadow:0 0 0 1px var(--brand)}
.ce-cover-title-main{font-size:13px;font-weight:700;color:var(--ink);line-height:1.3}
.ce-cover-title-sub{font-size:11px;color:var(--ink3);line-height:1.3}

/* 底图帧列表 - 垂直排列 */
.ce-frame-list{display:flex;flex-direction:column;gap:6px;align-items:center}
.ce-frame-item{
  position:relative;width:220px;max-width:90%;height:auto;
  border:2px solid transparent;border-radius:6px;overflow:hidden;
  cursor:pointer;background:linear-gradient(135deg,#2a2a3e,#1a1a2e);
}
.ce-frame-item.active{border-color:var(--brand)}
.ce-frame-item img{width:100%;height:auto;display:block}
.ce-frame-tag{
  position:absolute;top:3px;left:3px;
  background:rgba(0,0,0,.6);color:#fff;font-size:9px;
  padding:1px 4px;border-radius:3px;
}
.ce-frame-text{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.7));
  padding:4px 3px 3px;color:#fff;font-size:9px;line-height:1.2;
}

/* 操作按钮 - 底部 */
.ce-action-list{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.ce-action-btn{
  display:flex;align-items:center;justify-content:center;gap:4px;
  width:100%;padding:8px 6px;border-radius:6px;border:1px solid var(--line);
  background:#fff;cursor:pointer;font-size:12px;font-weight:600;
  color:var(--ink);transition:all .15s;
}
.ce-action-btn:hover{background:var(--brand-wash);border-color:var(--brand);color:var(--brand)}
.ce-action-ico{font-size:14px}

/* Canvas - 9:16 竖屏,高度优先自适应宽度 */
.ce-canvas-area{
  flex:1 1 calc((100% - 130px) / 3);
  display:flex;align-items:center;justify-content:center;
  padding:12px;background:#f5f5f7;overflow:hidden;min-width:0;min-height:0;
}
.ce-canvas-box{
  position:relative;
  border-radius:12px;overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,.15);
  background:#1a1a2e;flex-shrink:0;
}
.ce-bg-layer{position:absolute;inset:0;overflow:hidden}
.ce-bg-layer img{width:100%;height:100%;object-fit:cover;display:block}
.ce-text-layer{position:absolute;inset:0;pointer-events:none}

/* AI生成标签 */
.ce-ai-tag{
  position:absolute;top:12px;right:12px;
  background:rgba(0,0,0,.6);color:#fff;font-size:11px;
  padding:4px 10px;border-radius:4px;z-index:3;
}

/* Right Panel - 画布:右栏=1:2,右栏占2/3剩余宽度 */
.ce-right-panel{
  flex:2 1 calc((100% - 130px) * 2 / 3);
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;flex-shrink:0;background:#fff;min-width:0;
}
.ce-tabs{
  display:flex;border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.ce-tab{
  flex:1;padding:12px 0;text-align:center;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--ink3);
  background:transparent;border:0;border-bottom:2px solid transparent;
  transition:all .15s;
}
.ce-tab:hover{color:var(--ink)}
.ce-tab.active{color:var(--brand);border-bottom-color:var(--brand)}
.ce-tab-content{flex:1;overflow-y:auto;padding:10px;min-height:0}

/* Template Tab - 4列2行,强制分行留缝隙,卡片占满网格单元 */
.ce-template-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:1fr 1fr;
  row-gap:16px;
  column-gap:10px;
  width:100%;height:100%;
}
.ce-template-card{
  position:relative;border:2px solid var(--line);border-radius:8px;overflow:hidden;
  cursor:pointer;transition:all .15s;background:#fff;
  width:100%;height:100%;
}
.ce-template-card:hover{border-color:var(--ink3)}
.ce-template-card.active{border-color:var(--brand)}
.ce-template-check{
  position:absolute;top:4px;right:4px;z-index:2;
  width:20px;height:20px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:11px;
  display:grid;place-items:center;
}
.ce-template-preview{
  position:relative;overflow:hidden;width:100%;height:100%;
}
.ce-template-preview img{width:100%;height:100%;object-fit:cover;display:block}
.ce-template-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;padding:6px;
}
.ce-template-overlay .tpl-main{
  font-size:13px;font-weight:900;color:#fff;
  text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;
  line-height:1.2;margin-bottom:2px;
}
.ce-template-overlay .tpl-sub{
  font-size:9px;font-weight:600;color:#fff;
  text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;
  line-height:1.2;
}
.ce-template-name{
  position:absolute;bottom:4px;left:4px;
  background:rgba(0,0,0,.75);color:#fff;font-size:10px;
  font-weight:600;padding:2px 6px;border-radius:3px;
  line-height:1.3;
}
.ce-template-ai-tag{
  position:absolute;top:3px;left:3px;z-index:2;
  background:rgba(0,0,0,.6);color:#fff;font-size:8px;
  padding:1px 4px;border-radius:2px;
}
.ce-template-label{
  font-size:12px;font-weight:600;color:var(--ink);
  text-align:center;padding:8px 4px;
}

/* Text Tab */
.ce-text-tab{display:flex;flex-direction:column;gap:10px}
.ce-text-section{display:flex;flex-direction:column;gap:8px}
.ce-text-item{
  display:flex;align-items:center;gap:8px;
  border:1.5px solid var(--line);border-radius:8px;
  padding:8px 12px;background:var(--card);cursor:pointer;
  transition:all .15s;
}
.ce-text-item.active{border-color:var(--brand);background:var(--brand-wash)}
.ce-text-prefix{
  width:24px;height:24px;border-radius:6px;background:var(--brand);
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px;
  flex-shrink:0;
}
.ce-text-input{
  flex:1;border:0;background:transparent;outline:none;
  font-size:14px;color:var(--ink);
}
.ce-text-btns{display:flex;gap:6px}
.ce-text-btn{
  flex:1;padding:8px;border:1px solid var(--line);border-radius:6px;
  background:var(--card);cursor:pointer;font-size:12px;font-weight:600;
  color:var(--brand);transition:all .15s;
}
.ce-text-btn:hover{background:var(--brand-wash);border-color:var(--brand)}
.ce-chips{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding-bottom:4px}
.ce-chip{
  padding:6px 12px;border-radius:16px;border:1px solid var(--line);
  background:var(--card);cursor:pointer;font-size:12px;font-weight:500;
  color:var(--ink2);transition:all .15s;
}
.ce-chip:hover{border-color:var(--ink3)}
.ce-chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.ce-text-input-full{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);outline:none;font-size:14px;color:var(--ink);
}
.ce-text-input-full:focus{border-color:var(--brand)}

/* 文字块卡片 */
.ce-text-blocks{display:flex;flex-direction:column;gap:6px;margin-bottom:2px}
.ce-text-block{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);
}
/* 主标题块 - 红色边框高亮 */
.ce-text-block-title{border-color:var(--brand);border-width:1.5px}
/* 选中的文字块 - 红框+浅红底+左侧金色色条,非常醒目 */
.ce-text-block.selected{
  border-color:var(--brand);
  border-width:2px;
  background:var(--brand-wash,#FEF2F2);
  box-shadow:inset 3px 0 0 #FFD700, 0 2px 8px rgba(220,38,38,.15);
}
/* 主标题内联输入框 */
.ce-title-inline-input{
  width:100%;font-size:14px;font-weight:600;
  border:1px solid var(--line);border-radius:6px;
  padding:5px 8px;background:var(--bg,#fff);color:var(--text,#222);
  outline:none;
}
.ce-title-inline-input:focus{border-color:var(--brand);box-shadow:0 0 0 2px rgba(220,38,38,.12)}
/* 标题行合并布局 */
.ce-title-row{flex-wrap:nowrap;gap:6px;padding:8px 10px}
.ce-title-row .ce-text-block-body{min-width:0;flex:1}
.ce-title-row .ce-text-block-add{padding:4px 10px;font-size:11px;white-space:nowrap;flex-shrink:0}
.ce-text-block-head{flex-shrink:0}
.ce-text-block-icon{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:6px;
  background:var(--brand);color:#fff;font-size:13px;font-weight:700;
  font-style:italic;
}
/* 标题块内容区(标题+描述) */
.ce-text-block-body{flex:1;min-width:0}
.ce-text-block-title-text{
  font-size:15px;font-weight:700;color:var(--ink);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ce-text-block-title-desc{
  font-size:12px;color:var(--ink3);margin-top:2px;line-height:1.2;
}
.ce-text-block-input{
  flex:1;border:0;background:transparent;outline:none;
  font-size:15px;font-weight:600;color:var(--ink);
  min-width:0;
}
.ce-text-block-label{
  flex-shrink:0;font-size:11px;color:var(--ink3);font-weight:500;
}
.ce-text-block-addrow{display:flex;gap:6px;margin-top:2px}
.ce-text-block-add{
  padding:6px 14px;border:1.5px dashed var(--line);border-radius:16px;
  background:transparent;cursor:pointer;font-size:12px;font-weight:600;
  color:var(--brand);transition:all .15s;
}
.ce-text-block-add:hover{border-color:var(--brand);background:var(--brand-wash)}
/* 红色实线按钮(+副标题/+角标) */
.ce-text-block-add-solid{
  border:1.5px solid var(--brand);border-radius:16px;
  padding:5px 14px;font-size:12px;font-weight:600;
  color:var(--brand);background:transparent;cursor:pointer;
}
.ce-text-block-add-solid:hover{background:var(--brand-wash)}

/* 改标题输入 - 圆角边框 */
.ce-text-edit-input{
  width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);outline:none;font-size:14px;color:var(--ink);
}
.ce-text-edit-input:focus{border-color:var(--brand)}

/* 角度行标签 */
.ce-angle-row{display:flex;justify-content:space-between;align-items:center;margin-top:0}
.ce-angle-label{font-size:12px;color:var(--ink3)}
.ce-angle-reset{font-size:12px;color:var(--brand);cursor:pointer;font-weight:600}
.ce-angle-reset:hover{text-decoration:underline}

/* 紧凑行控件 */
.ce-compact-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ce-compact-label{font-size:12px;font-weight:600;color:var(--ink2);min-width:36px;flex-shrink:0}

/* 字号+角度+位置 合并行 */
.ce-controls-row{display:flex;align-items:center;gap:12px}
.ce-pos-inline{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;height:90px;justify-content:center}
.ce-sliders-col{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;height:90px;justify-content:center}
.ce-sliders-col .ce-compact-row{margin-bottom:0}
.ce-position-grid-sm{
  display:grid;grid-template-columns:repeat(3,22px);grid-template-rows:repeat(3,22px);gap:4px;
  width:74px;flex-shrink:0;
}
.ce-position-grid-sm .ce-pos-cell{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}
.ce-position-grid-sm .ce-pos-cell:hover{border-color:var(--ink3)}
.ce-position-grid-sm .ce-pos-cell.active{background:var(--brand);border-color:var(--brand)}
.ce-position-grid-sm .ce-pos-cell.active::after{content:'';width:5px;height:5px;border-radius:50%;background:#fff}

/* 位置九宫格区域 */
.ce-pos-section{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.ce-position-grid{
  display:grid;grid-template-columns:repeat(3,28px);grid-template-rows:repeat(3,28px);gap:6px;
  width:96px;
}
.ce-pos-cell{
  width:28px;height:28px;border-radius:50%;
  border:1.5px solid var(--line);
  background:var(--card);cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;
}
.ce-pos-cell:hover{border-color:var(--ink3)}
.ce-pos-cell.active{background:var(--brand);border-color:var(--brand)}
.ce-pos-cell.active::after{
  content:'';width:6px;height:6px;border-radius:50%;background:#fff;
}

/* 小号滑块 */
.ce-range-sm{height:3px}
.ce-range-sm::-webkit-slider-thumb{width:10px;height:10px}
.ce-font-grid{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.ce-font-card{
  border:1.5px solid var(--line);border-radius:8px;padding:6px 10px;
  cursor:pointer;transition:all .15s;background:var(--card);
  position:relative;min-height:36px;flex-shrink:0;min-width:80px;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
}
.ce-font-card:hover{border-color:var(--ink3)}
.ce-font-card.active{border-color:var(--brand);background:var(--brand-wash)}
.ce-font-card.downloading{border-color:var(--brand);opacity:.85;pointer-events:none}
.ce-font-card b{display:block;font-size:12px;font-weight:800;color:var(--ink);line-height:1.2}
.ce-font-card .ce-font-sub{display:block;font-size:10px;color:var(--ink3);font-weight:500;line-height:1.2}
.ce-font-dl{
  position:absolute;top:8px;right:10px;
  font-size:13px;color:var(--ink3);font-weight:700;
  line-height:1;opacity:.7;
}
.ce-font-card:hover .ce-font-dl{opacity:1;color:var(--brand)}
.ce-font-spinner{
  position:absolute;top:10px;right:10px;
  width:12px;height:12px;border:2px solid var(--line);
  border-top-color:var(--brand);border-radius:50%;
  animation:ce-spin 0.8s linear infinite;
}
@keyframes ce-spin{to{transform:rotate(360deg)}}
.ce-range{
  width:100%;height:6px;-webkit-appearance:none;appearance:none;
  background:var(--line);border-radius:3px;outline:none;
}
.ce-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;
  border-radius:50%;background:var(--brand);cursor:pointer;
}
.ce-range-val{font-size:12px;font-weight:600;color:var(--brand)}
.ce-angle-btns{display:flex;gap:6px;margin-top:4px}
.ce-angle-btn{
  flex:1;padding:6px;border:1px solid var(--line);border-radius:6px;
  background:var(--card);cursor:pointer;font-size:12px;font-weight:600;
  color:var(--ink2);transition:all .15s;
}
.ce-angle-btn:hover{border-color:var(--brand)}
.ce-angle-btn.on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* Effect Tab */
.ce-effect-tab{display:flex;flex-direction:column;gap:12px}
.ce-effect-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:6px;
}
.ce-effect-card{
  border:1.5px solid var(--line);border-radius:6px;overflow:hidden;
  cursor:pointer;transition:all .15s;background:var(--card);
}
.ce-effect-card:hover{border-color:var(--ink3)}
.ce-effect-card.active{border-color:var(--brand);background:var(--brand-wash)}
.ce-effect-preview{
  height:44px;display:flex;align-items:center;justify-content:center;
  padding:3px;
}
.ce-effect-preview span{
  font-size:9px;font-weight:700;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.ce-effect-label{
  font-size:10px;font-weight:600;color:var(--ink);
  text-align:center;padding:3px 1px;
}

/* Footer */
.ce-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;border-top:1px solid var(--line);
  background:var(--card);flex-shrink:0;
}
.ce-hint{font-size:12px;color:var(--ink3)}
.ce-footer-actions{display:flex;gap:8px}

/* Responsive */
@media (max-width:1100px){
  .cover-editor{height:80vh}
  .ce-left-panel{width:220px}
  .ce-right-panel{width:280px}
  .ce-canvas{width:320px;height:560px}
}
@media (max-width:768px){
  .ce-body{flex-direction:column}
  .ce-left-panel{width:100%;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
  .ce-thumbs{flex-direction:row}
  .ce-thumb{width:80px;flex-shrink:0}
  .ce-left-actions{flex-direction:row}
  .ce-action-btn{width:auto;flex-shrink:0}
  .ce-right-panel{width:100%;border-left:0;border-top:1px solid var(--line)}
}

/* ═══ 新增样式 ═══ */

/* 空状态提示 */
.ce-empty-small{
  font-size:11px;color:var(--ink3);
  padding:8px;margin-bottom:4px;
  text-align:center;
}

/* 颜色选择网格 */
.ce-color-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
}
.ce-color-cell{
  aspect-ratio:1;border-radius:6px;cursor:pointer;
  border:2px solid transparent;transition:all .15s;
}
.ce-color-cell:hover{transform:scale(1.05)}
.ce-color-cell.active{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-wash)}

/* 渐变选择网格 */
.ce-gradient-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
}
.ce-gradient-cell{
  aspect-ratio:1;border-radius:6px;cursor:pointer;
  border:2px solid transparent;transition:all .15s;
}
.ce-gradient-cell:hover{transform:scale(1.05)}
.ce-gradient-cell.active{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-wash)}

/* 模板预览 canvas */
.ce-template-preview{
  display:flex;align-items:center;justify-content:center;
  padding:4px;
}
.ce-template-canvas{
  width:100%;height:auto;display:block;border-radius:6px;
}

/* 特效预览容器 */
.ce-effect-preview{
  display:flex;align-items:center;justify-content:center;
  padding:4px;
}

/* 特效卡片预览内容 */
.ce-effect-preview > div{
  width:100%;height:100%;
}

/* 特效卡片标签 */
.ce-effect-label{
  font-size:10px;font-weight:600;color:var(--ink);
  text-align:center;padding:3px 1px;
}

/* 清除按钮 */
.ce-clear-btn{
  font-size:11px;color:var(--brand);background:none;
  border:0;cursor:pointer;padding:0;
}
.ce-clear-btn:hover{text-decoration:underline}

/* 模板标签覆盖旧样式 */

/* 响应式更新 */
@media (max-width:1100px){
  .ce-canvas-area{padding:12px}
  .ce-canvas-area canvas{width:320px!important;height:560px!important}
}

/* 文字特效样式 */
.ce-effect-preview span{
  display:inline-block;
}

/* 画布区域文字层样式 */
.ce-text-layer span{
  display:block;
}

/* AI排版按钮 */
.ce-header-actions .btn-pri{
  padding:7px 16px;
}

/* 画布区域占位提示文字 */
.ce-canvas-box > div > div:only-child span{
  opacity:0.4;
}

/* 标题栏样式 */
.ce-title .ce-back{
  border-radius:8px;
}

/* 画布加载状态 */
.ce-canvas-area.loading::after{
  content:'视频帧加载中...';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  color:var(--ink3);
  font-size:14px;
  z-index:10;
}

/* 帧选择区域图片加载状态 */
.ce-frame-item img{
  background:linear-gradient(135deg,#2a2a3e,#1a1a2e);
}

/* 模板卡片选中态增强 */
.ce-template-card.active .ce-template-label{
  color:var(--brand);
  font-weight:800;
}

/* 特效卡片文字 */
.ce-effect-label{
  font-size:10px;
}

/* 字号滑块实时显示 */
.ce-range-val{
  min-width:40px;
  text-align:right;
}

/* 字体卡片样式优化 */
.ce-font-card{
  text-align:center;
}

/* 芯片快速填充 */
.ce-chip{
  user-select:none;
}

/* 画布区域悬停效果 */
.ce-canvas-box:hover{
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}

/* 响应式:更宽屏幕 */
@media (min-width:1400px){
  .ce-left-panel{width:200px}
  .ce-right-panel{width:400px}
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark){
  .ce-canvas-area{background:#2a2a3e}
  .ce-canvas-box{background:#1a1a2e}
  .ce-frame-item{background:#2a2a3e}
  .ce-template-card{background:#2a2a3e}
  .ce-effect-card{background:#2a2a3e}
  .ce-font-card{background:#2a2a3e}
  .ce-color-cell{border-color:#3a3a4e}
  .ce-gradient-cell{border-color:#3a3a4e}
}