/* ============================================================
   模块级样式：登录 / 作品 / 流量 / 赛道 / 创作 / 账号 / 互动 / 拆解
   ============================================================ */

/* ============================================================
   扫码登录
   ============================================================ */
.login{
  min-height:100vh; display:grid; grid-template-columns:1.08fr .92fr;
  position:relative; overflow:hidden;
}
.login::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(720px 620px at 18% 30%, rgba(254,44,85,.15), transparent 62%),
    radial-gradient(620px 520px at 88% 78%, rgba(37,244,238,.09), transparent 60%);
  pointer-events:none;
}
.login-left{
  position:relative; padding:56px 60px; display:flex; flex-direction:column;
  justify-content:space-between; gap:40px;
  border-right:1px solid var(--line);
}
.login-brand{ display:flex; align-items:center; gap:11px; }
.login-brand .brand-mark{ width:40px; height:40px; border-radius:13px; }
.login-brand .brand-mark svg{ width:22px; height:22px; }
.login-hero h1{
  font-size:38px; line-height:1.24; font-weight:680; letter-spacing:-1.2px; margin:0 0 16px;
}
.login-hero h1 em{
  font-style:normal;
  background:linear-gradient(96deg, #FF6B85, #FE2C55 45%, #25F4EE);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.login-hero p{ font-size:13.5px; color:var(--text-2); max-width:430px; line-height:1.85; }
.login-feats{ display:flex; flex-direction:column; gap:14px; margin-top:30px; }
.login-feat{ display:flex; align-items:flex-start; gap:12px; }
.login-feat-ico{
  width:32px; height:32px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center;
  background:rgba(255,255,255,.045); border:1px solid var(--line); color:var(--brand-2);
}
.login-feat-t{ font-size:12.5px; font-weight:600; }
.login-feat-d{ font-size:11.5px; color:var(--text-3); margin-top:1px; }
.login-stats{
  display:flex; gap:36px; padding-top:24px; border-top:1px solid var(--line);
}
.login-stat b{ display:block; font-size:21px; font-weight:660; letter-spacing:-.6px; }
.login-stat span{ font-size:10.5px; color:var(--text-3); letter-spacing:.4px; }

.login-right{
  position:relative; display:grid; place-items:center; padding:40px;
}
.qr-card{
  width:372px; max-width:100%;
  background:linear-gradient(180deg, rgba(22,25,34,.96), rgba(12,14,19,.98));
  border:1px solid var(--line-2); border-radius:24px;
  box-shadow:0 40px 100px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.06) inset;
  padding:30px 28px 24px; text-align:center; position:relative; overflow:hidden;
}
.qr-card::before{
  content:""; position:absolute; top:-60px; left:50%; transform:translateX(-50%);
  width:280px; height:120px; background:radial-gradient(ellipse, rgba(254,44,85,.25), transparent 70%);
  pointer-events:none;
}
.qr-title{ font-size:16px; font-weight:640; letter-spacing:-.2px; }
.qr-desc{ font-size:11.5px; color:var(--text-3); margin-top:5px; }
.qr-box{
  width:216px; height:216px; margin:22px auto 0; position:relative;
  border-radius:16px; background:#F6F7FA; padding:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1);
  transition:filter .3s;
}
.qr-box svg{ width:100%; height:100%; border-radius:6px; }
.qr-box .qr-logo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:12px; background:#fff;
  display:grid; place-items:center; box-shadow:0 0 0 4px #fff;
}
.qr-box .qr-logo i{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(140deg,#FE2C55,#D9163F);
}
.qr-box .qr-logo svg{ width:19px; height:19px; }
.qr-box.dead{ filter:grayscale(1) blur(2.5px) brightness(.75); }
.qr-overlay{
  position:absolute; inset:0; border-radius:16px; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:rgba(9,10,15,.78); backdrop-filter:blur(2px);
  color:#fff; z-index:3; text-align:center; padding:16px;
}
.qr-box.dead .qr-overlay{ display:flex; }
.qr-overlay .ic{ width:26px; height:26px; color:var(--text-2); }
.qr-overlay p{ font-size:12px; color:var(--text-2); }

.qr-status{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:20px; padding:6px 13px; border-radius:99px;
  font-size:12px; font-weight:550; border:1px solid var(--line-2);
  background:rgba(255,255,255,.04); color:var(--text-2);
  transition:all .25s var(--ease);
}
.qr-status .pulse{ width:6px; height:6px; border-radius:50%; background:var(--warn); box-shadow:0 0 10px var(--warn); animation:pulse 1.6s infinite; }
.qr-status.ok{ color:#5FE3BC; border-color:rgba(34,211,155,.3); background:rgba(34,211,155,.08); }
.qr-status.ok .pulse{ background:var(--down); box-shadow:0 0 10px var(--down); }
.qr-status.err{ color:#FFC95C; border-color:rgba(255,176,32,.3); background:rgba(255,176,32,.08); }
.qr-status.err .pulse{ background:var(--warn); box-shadow:0 0 10px var(--warn); animation:none; }
.qr-hint{ font-size:10.5px; color:var(--text-4); margin-top:10px; letter-spacing:.2px; }
.qr-demo{
  display:flex; gap:6px; justify-content:center; margin-top:16px;
  padding-top:14px; border-top:1px dashed rgba(255,255,255,.1);
}
.qr-demo .btn{ flex:1; }
.qr-demo-label{
  font-size:9.5px; color:var(--text-4); letter-spacing:1.2px; text-transform:uppercase;
  margin-top:12px;
}
.login-foot{ font-size:10.5px; color:var(--text-4); margin-top:18px; line-height:1.7; }
.login-foot a{ color:var(--text-3); border-bottom:1px solid var(--line-2); }

/* 扫描中：手机滑入 */
.scan-phone{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.95); color:#111; border-radius:99px;
  padding:4px 10px 4px 4px; font-size:10px; font-weight:600;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
  animation:slideUp .4s var(--ease-out);
  z-index:4;
}
.scan-phone .av{ width:20px; height:20px; font-size:10px; border-color:rgba(0,0,0,.1); }
.scan-line{
  position:absolute; left:8px; right:8px; height:2px; z-index:2;
  background:linear-gradient(90deg, transparent, #FE2C55, transparent);
  box-shadow:0 0 12px rgba(254,44,85,.8);
  animation:scanMove 2.2s ease-in-out infinite;
  border-radius:2px;
}
@keyframes scanMove{ 0%{top:12px; opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{top:calc(100% - 14px); opacity:0} }

/* 同步进度 */
.sync-panel{ text-align:center; padding:6px 0 4px; }
.sync-ring{
  width:74px; height:74px; margin:0 auto 18px; position:relative;
}
.sync-ring svg{ width:74px; height:74px; transform:rotate(-90deg); }
.sync-ring .pct{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:15px; font-weight:660; font-variant-numeric:tabular-nums;
}
.sync-list{ margin-top:20px; text-align:left; display:flex; flex-direction:column; gap:2px; }
.sync-step{
  display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:8px;
  font-size:12px; color:var(--text-3); transition:all .3s var(--ease);
}
.sync-step .st-ico{
  width:16px; height:16px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-2); flex:0 0 auto;
}
.sync-step .st-ico .ic{ width:10px; height:10px; }
.sync-step.active{ background:rgba(254,44,85,.08); color:var(--text); }
.sync-step.active .st-ico{ border-color:var(--brand); background:rgba(254,44,85,.18); }
.sync-step.done{ color:var(--text-2); }
.sync-step.done .st-ico{ border-color:rgba(34,211,155,.5); background:rgba(34,211,155,.15); color:var(--down); }

/* ============================================================
   作品分析
   ============================================================ */
.filterbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 20px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.012);
}
.searchbox{
  display:flex; align-items:center; gap:7px; height:30px; padding:0 10px;
  border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.03);
  color:var(--text-3); min-width:180px; transition:border-color .16s, background .16s;
}
.searchbox:focus-within{ border-color:var(--line-3); background:rgba(255,255,255,.05); }
.searchbox input{
  border:0; background:none; outline:none; width:100%; font-size:12px; color:var(--text);
}
.searchbox input::placeholder{ color:var(--text-4); }
.searchbox .ic{ width:14px; height:14px; }
.sel{
  height:30px; padding:0 26px 0 10px; border-radius:8px; font-size:11.5px;
  border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--text-2);
  outline:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236A7286' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center;
}
.sel:hover{ border-color:var(--line-2); color:var(--text); }
.sel option{ background:#15171F; color:var(--text); }

/* 移动端作品卡片 */
.work-cards{ display:none; flex-direction:column; }
.wcard{
  display:flex; gap:11px; padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.045);
  transition:background .14s; cursor:pointer;
}
.wcard:active{ background:rgba(255,255,255,.04); }
.wcard .cover{ width:58px; height:76px; font-size:24px; }
.wcard-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.wcard-title{ font-size:12.5px; font-weight:560; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wcard-metrics{ display:flex; align-items:center; gap:12px; }
.wcard-m{ display:flex; flex-direction:column; }
.wcard-m b{ font-size:12.5px; font-weight:620; font-variant-numeric:tabular-nums; }
.wcard-m span{ font-size:9.5px; color:var(--text-4); }
.wcard-foot{ display:flex; align-items:center; gap:6px; margin-top:1px; }

/* 详情抽屉 */
.dh-cover{
  width:64px; height:84px; border-radius:10px; flex:0 0 auto;
  display:grid; place-items:center; font-size:28px; position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}
.dh-title{ font-size:15.5px; font-weight:640; line-height:1.45; letter-spacing:-.2px; }
.dh-meta{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:6px; font-size:11px; color:var(--text-3); }
.dh-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.dh-kpi{ background:#12141B; padding:12px 14px; }
.dh-kpi b{ display:block; font-size:17px; font-weight:640; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.dh-kpi span{ font-size:10px; color:var(--text-3); }
.dh-section{ margin-top:22px; }
.dh-section-hd{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.dh-section-t{ font-size:12.5px; font-weight:600; }
.dh-section-sub{ font-size:10.5px; color:var(--text-4); }
.dh-insight{
  display:flex; gap:10px; padding:12px 14px; border-radius:11px;
  background:linear-gradient(90deg, rgba(254,44,85,.08), rgba(254,44,85,.01));
  border:1px solid rgba(254,44,85,.16); font-size:12px; line-height:1.7; color:var(--text-2);
}
.dh-insight .ic{ color:var(--brand-2); flex:0 0 auto; margin-top:2px; }
.dh-insight b{ color:var(--text); font-weight:600; }
.retention-legend{ display:flex; gap:14px; margin-top:8px; font-size:10.5px; color:var(--text-3); }
.retention-legend i{ display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:4px; }

/* 来源条 */
.src-list{ display:flex; flex-direction:column; gap:10px; }
.src-row{ display:flex; align-items:center; gap:10px; }
.src-name{ width:52px; font-size:11.5px; color:var(--text-2); flex:0 0 auto; }
.src-bar{ flex:1; }
.src-val{ width:46px; text-align:right; font-size:11.5px; font-weight:560; font-variant-numeric:tabular-nums; }

/* ============================================================
   流量分析
   ============================================================ */
.donut-wrap{ display:flex; align-items:center; gap:20px; }
.donut-wrap .chart{ flex:0 0 172px; width:172px; }
.donut-legend{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dl-row{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.dl-row:last-child{ border-bottom:0; }
.dl-dot{ width:8px; height:8px; border-radius:2.5px; flex:0 0 auto; }
.dl-name{ font-size:11.5px; color:var(--text-2); flex:1; }
.dl-val{ font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.dl-pct{ width:44px; text-align:right; font-size:11px; color:var(--text-3); font-variant-numeric:tabular-nums; }

/* 热力图 */
.heat{ display:grid; gap:3px; }
.heat-row{ display:grid; grid-template-columns:34px repeat(12, 1fr); gap:3px; align-items:center; }
.heat-label{ font-size:9.5px; color:var(--text-4); }
.heat-cell{
  aspect-ratio:1.9/1; border-radius:4px; background:rgba(255,255,255,.04);
  transition:transform .12s, box-shadow .12s; cursor:default;
}
.heat-cell:hover{ transform:scale(1.14); box-shadow:0 0 0 1px rgba(255,255,255,.3); z-index:2; }
.heat-axis{ display:grid; grid-template-columns:34px repeat(12, 1fr); gap:3px; margin-top:6px; }
.heat-axis span{ font-size:9px; color:var(--text-4); text-align:center; }
.heat-scale{ display:flex; align-items:center; gap:6px; font-size:9.5px; color:var(--text-4); }
.heat-scale .box{ width:9px; height:9px; border-radius:2px; }

/* 性别 / 年龄 */
.gender-bar{ display:flex; height:9px; border-radius:99px; overflow:hidden; gap:2px; }
.gender-bar i{ display:block; height:100%; }
.age-list{ display:flex; flex-direction:column; gap:9px; }
.age-row{ display:grid; grid-template-columns:44px 1fr 42px; align-items:center; gap:10px; }
.age-name{ font-size:11px; color:var(--text-2); }
.age-val{ font-size:11px; color:var(--text-3); text-align:right; font-variant-numeric:tabular-nums; }
.mini-kv{ display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:11.5px; }
.mini-kv:last-child{ border-bottom:0; }
.mini-kv .k{ color:var(--text-2); display:flex; align-items:center; gap:6px; }
.mini-kv .v{ font-weight:560; font-variant-numeric:tabular-nums; }

/* 漏斗 */
.funnel{ display:flex; flex-direction:column; gap:0; padding:4px 0; }
.fn-step{ position:relative; }
.fn-bar-wrap{ display:flex; justify-content:center; }
.fn-bar{
  height:30px; border-radius:6px;
  font-size:12px; font-weight:600; color:#fff; position:relative;
  background:linear-gradient(90deg, rgba(254,44,85,.85), rgba(254,44,85,.45));
  clip-path:polygon(0 0, 100% 0, 96.5% 100%, 3.5% 100%);
  transition:filter .16s;
  min-width:6px;
}
.fn-bar:hover{ filter:brightness(1.15); }
.fn-step:nth-child(1) .fn-bar{ background:linear-gradient(90deg, rgba(37,244,238,.55), rgba(37,244,238,.28)); }
.fn-step:nth-child(2) .fn-bar{ background:linear-gradient(90deg, rgba(91,140,255,.6), rgba(91,140,255,.3)); }
.fn-step:nth-child(3) .fn-bar{ background:linear-gradient(90deg, rgba(160,120,255,.6), rgba(160,120,255,.3)); }
.fn-step:nth-child(4) .fn-bar{ background:linear-gradient(90deg, rgba(255,120,90,.65), rgba(255,120,90,.32)); }
.fn-step:nth-child(5) .fn-bar{ background:linear-gradient(90deg, rgba(254,44,85,.8), rgba(254,44,85,.4)); }
.fn-step:nth-child(6) .fn-bar{ background:linear-gradient(90deg, rgba(34,211,155,.7), rgba(34,211,155,.35)); }
.fn-meta{
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 2px 0; font-size:10.5px; color:var(--text-3);
}
.fn-meta b{ color:var(--text); font-weight:560; font-variant-numeric:tabular-nums; }
.fn-rate{
  display:flex; align-items:center; gap:5px; justify-content:center;
  padding:3px 0; font-size:9.5px; color:var(--text-4);
}
.fn-rate .v{ color:var(--up); font-weight:600; }
.fn-rate .line{ width:1px; height:10px; background:var(--line-2); }

/* ============================================================
   赛道分析
   ============================================================ */
.niche-hero{ display:grid; grid-template-columns:1.35fr 1fr; gap:16px; }
.niche-score{ display:flex; align-items:center; gap:22px; }
.score-ring{ position:relative; width:104px; height:104px; flex:0 0 auto; }
.score-ring .v{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.score-ring .v b{ font-size:26px; font-weight:680; letter-spacing:-1px; line-height:1; }
.score-ring .v span{ font-size:9.5px; color:var(--text-3); margin-top:3px; }
.niche-meta{ flex:1; min-width:0; }
.niche-name{ font-size:18px; font-weight:660; letter-spacing:-.4px; display:flex; align-items:center; gap:8px; }
.niche-tags{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.niche-nums{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.niche-num b{ display:block; font-size:16px; font-weight:640; letter-spacing:-.4px; }
.niche-num span{ font-size:10px; color:var(--text-3); }

.acct-row{ display:flex; align-items:center; gap:11px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.045); }
.acct-row:last-child{ border-bottom:0; }
.acct-row .av{ border:1px solid rgba(255,255,255,.14); }
.ar-main{ flex:1; min-width:0; }
.ar-name{ font-size:12.5px; font-weight:570; display:flex; align-items:center; gap:5px; }
.ar-sub{ font-size:10.5px; color:var(--text-3); margin-top:2px; }
.ar-metric{ text-align:right; min-width:56px; }
.ar-metric b{ display:block; font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.ar-metric span{ font-size:9.5px; color:var(--text-4); }
.sim-bar{ width:52px; }

.topic-row{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.045); }
.topic-row:last-child{ border-bottom:0; }
.topic-name{ font-size:12.5px; font-weight:550; }
.topic-sub{ font-size:10px; color:var(--text-3); margin-top:2px; display:flex; align-items:center; gap:6px; }
.topic-heat{ text-align:right; min-width:62px; }
.topic-heat b{ font-size:12.5px; font-weight:620; font-variant-numeric:tabular-nums; display:block; }
.topic-heat span{ font-size:10px; }

.opp-card{
  padding:14px 16px; border-radius:12px; border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(37,244,238,.05), rgba(255,255,255,.012));
  display:flex; flex-direction:column; gap:8px;
}
.opp-card h4{ font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:6px; }
.opp-card p{ font-size:11px; color:var(--text-3); line-height:1.65; }
.opp-metrics{ display:flex; gap:14px; padding-top:8px; border-top:1px solid var(--line); }
.opp-metrics div{ font-size:10px; color:var(--text-4); }
.opp-metrics b{ display:block; font-size:12.5px; color:var(--text); font-weight:620; margin-top:1px; }

/* ============================================================
   创作指引
   ============================================================ */
.ai-banner{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  border:1px solid rgba(254,44,85,.22);
  background:
    radial-gradient(600px 200px at 88% 20%, rgba(254,44,85,.16), transparent 70%),
    linear-gradient(120deg, #1A1119, #12141C 55%, #0F1118);
  padding:20px 22px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.ai-banner-t{ font-size:15px; font-weight:640; display:flex; align-items:center; gap:8px; }
.ai-banner-d{ font-size:11.5px; color:var(--text-2); margin-top:4px; line-height:1.7; max-width:520px; }
.ai-banner .btn{ margin-left:auto; }
.ai-spark{
  width:38px; height:38px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center;
  background:linear-gradient(140deg, rgba(254,44,85,.25), rgba(37,244,238,.12));
  border:1px solid rgba(254,44,85,.28); color:#fff;
  box-shadow:0 0 26px rgba(254,44,85,.25);
}

.idea-card{
  padding:15px 16px; border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,.02); display:flex; flex-direction:column; gap:9px;
  transition:border-color .18s, background .18s, transform .18s;
}
.idea-card:hover{ border-color:var(--line-3); background:rgba(255,255,255,.04); transform:translateY(-1px); }
.idea-top{ display:flex; align-items:flex-start; gap:8px; }
.idea-t{ font-size:13px; font-weight:600; line-height:1.5; flex:1; }
.idea-desc{ font-size:11px; color:var(--text-3); line-height:1.65; }
.idea-metrics{ display:flex; align-items:center; gap:12px; padding-top:9px; border-top:1px solid var(--line); }
.idea-m{ font-size:10px; color:var(--text-4); }
.idea-m b{ display:block; font-size:12px; color:var(--text); font-weight:620; margin-top:1px; font-variant-numeric:tabular-nums; }

.title-item{
  display:flex; align-items:flex-start; gap:10px; padding:11px 12px; border-radius:10px;
  border:1px solid transparent; transition:all .16s; cursor:pointer;
}
.title-item:hover{ background:rgba(255,255,255,.035); border-color:var(--line); }
.title-idx{ font-size:10px; font-weight:700; color:var(--text-4); width:14px; flex:0 0 auto; margin-top:2px; }
.title-txt{ flex:1; font-size:12.5px; line-height:1.6; }
.title-txt mark{ background:rgba(254,44,85,.18); color:#FF9DAF; padding:0 2px; border-radius:2px; }
.title-copy{ opacity:0; transition:opacity .15s; color:var(--text-3); }
.title-item:hover .title-copy{ opacity:1; }
.title-copy .ic{ width:14px; height:14px; }

.tag-cloud{ display:flex; flex-wrap:wrap; gap:7px; }
.tag-pill{
  display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 11px;
  border-radius:99px; font-size:11.5px; border:1px solid var(--line);
  background:rgba(255,255,255,.03); color:var(--text-2); cursor:pointer;
  transition:all .16s;
}
.tag-pill:hover{ border-color:rgba(254,44,85,.4); color:#fff; background:rgba(254,44,85,.1); }
.tag-pill .n{ font-size:9.5px; color:var(--text-4); }

.slot-row{ display:grid; grid-template-columns:64px 1fr 52px; align-items:center; gap:10px; padding:7px 0; }
.slot-time{ font-size:11.5px; color:var(--text-2); font-variant-numeric:tabular-nums; }
.slot-val{ font-size:11px; text-align:right; color:var(--text-3); font-variant-numeric:tabular-nums; }
.slot-row.best .slot-time{ color:#fff; font-weight:600; }
.slot-row.best .slot-val{ color:var(--brand-2); font-weight:600; }

.struct-step{ display:flex; gap:11px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.045); }
.struct-step:last-child{ border-bottom:0; }
.struct-no{
  width:22px; height:22px; border-radius:6px; flex:0 0 auto; display:grid; place-items:center;
  font-size:10px; font-weight:700; background:rgba(254,44,85,.12); color:#FF8FA3;
  border:1px solid rgba(254,44,85,.2);
}
.struct-t{ font-size:12px; font-weight:560; display:flex; align-items:center; gap:6px; }
.struct-d{ font-size:11px; color:var(--text-3); margin-top:2px; line-height:1.6; }

/* ============================================================
   账号优化
   ============================================================ */
.health-wrap{ display:flex; align-items:center; gap:20px; }
.health-left{ flex:0 0 auto; }
.health-meta{ flex:1; min-width:0; }
.health-grade{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:8px;
  font-size:11px; font-weight:600; background:rgba(255,176,32,.1);
  border:1px solid rgba(255,176,32,.25); color:#FFC95C;
}
.dim-list{ display:flex; flex-direction:column; gap:10px; }
.dim-row{ display:grid; grid-template-columns:58px 1fr 30px; align-items:center; gap:9px; }
.dim-name{ font-size:11px; color:var(--text-2); }
.dim-val{ font-size:11px; text-align:right; font-weight:560; font-variant-numeric:tabular-nums; }

.diag{
  display:flex; gap:11px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.045);
}
.diag:last-child{ border-bottom:0; }
.diag-sev{
  width:3px; border-radius:99px; flex:0 0 auto; align-self:stretch;
  background:var(--brand);
}
.diag-sev.mid{ background:var(--warn); }
.diag-sev.low{ background:var(--info); }
.diag-main{ flex:1; min-width:0; }
.diag-t{ font-size:12.5px; font-weight:570; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.diag-d{ font-size:11px; color:var(--text-3); margin-top:4px; line-height:1.65; }
.diag-act{
  margin-top:8px; font-size:11px; color:var(--text-2); display:flex; align-items:flex-start; gap:6px;
  padding:7px 10px; border-radius:8px; background:rgba(255,255,255,.028); border:1px solid var(--line);
}
.diag-act .ic{ width:12px; height:12px; color:var(--down); flex:0 0 auto; margin-top:2px; }
.diag-r{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }

.task-row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.045); }
.task-row:last-child{ border-bottom:0; }
.task-row.done .task-t{ color:var(--text-4); text-decoration:line-through; }
.task-t{ font-size:12px; flex:1; }
.task-x{ font-size:10px; color:var(--text-4); }

/* ============================================================
   AI 互动 / 评论
   ============================================================ */
.auto-panel{ display:flex; flex-direction:column; gap:2px; }
.setting-row{
  display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.045);
}
.setting-row:last-child{ border-bottom:0; }
.setting-main{ flex:1; min-width:0; }
.setting-t{ font-size:12.5px; font-weight:550; display:flex; align-items:center; gap:6px; }
.setting-d{ font-size:10.5px; color:var(--text-3); margin-top:2px; line-height:1.55; }

.rate-slider{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:99px;
  background:linear-gradient(90deg, var(--brand) 0%, var(--brand) var(--fill,40%), rgba(255,255,255,.1) var(--fill,40%));
  outline:none; margin:10px 0 4px;
}
.rate-slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:#fff; border:3px solid var(--brand); box-shadow:0 0 0 4px rgba(254,44,85,.15); cursor:pointer;
}
.rate-slider::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--brand); cursor:pointer;
}

.cmt{
  display:flex; gap:11px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.045);
  transition:background .15s; position:relative;
}
.cmt:hover{ background:rgba(255,255,255,.018); }
.cmt.good{ background:linear-gradient(90deg, rgba(254,44,85,.045), transparent 60%); }
.cmt.good::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:2px;
  background:linear-gradient(180deg, var(--brand), transparent); border-radius:99px;
}
.cmt-main{ flex:1; min-width:0; }
.cmt-hd{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.cmt-user{ font-size:12px; font-weight:570; }
.cmt-time{ font-size:10px; color:var(--text-4); margin-left:auto; }
.cmt-text{ font-size:12.5px; line-height:1.7; color:var(--text); margin-top:5px; }
.cmt-src{ font-size:10px; color:var(--text-4); margin-top:5px; display:flex; align-items:center; gap:5px; }
.cmt-reply{
  margin-top:9px; padding:10px 12px; border-radius:10px;
  background:linear-gradient(135deg, rgba(37,244,238,.05), rgba(255,255,255,.02));
  border:1px solid rgba(37,244,238,.16);
}
.cmt-reply-hd{ display:flex; align-items:center; gap:6px; font-size:10px; color:#8FF9F5; margin-bottom:5px; letter-spacing:.3px; }
.cmt-reply-hd .ic{ width:11px; height:11px; }
.cmt-reply-txt{
  font-size:12px; line-height:1.7; color:var(--text-2); outline:none;
  border:0; background:none; width:100%; resize:none; font-family:inherit;
}
.cmt-reply-txt:focus{ color:var(--text); }
.cmt-acts{ display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap; }
.cmt-sent{ display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--down); }

.score-pill{
  display:inline-flex; align-items:center; gap:3px; height:18px; padding:0 6px;
  border-radius:5px; font-size:9.5px; font-weight:600;
  background:rgba(254,44,85,.12); color:#FF8FA3; border:1px solid rgba(254,44,85,.2);
}
.score-pill.mid{ background:rgba(255,176,32,.1); color:#FFC95C; border-color:rgba(255,176,32,.2); }
.score-pill.low{ background:rgba(255,255,255,.05); color:var(--text-3); border-color:var(--line); }

/* ============================================================
   作品拆解
   ============================================================ */
.teardown-input{ display:flex; gap:8px; flex-wrap:wrap; }
.input-wrap{
  flex:1; min-width:220px; display:flex; align-items:center; gap:8px; height:40px;
  padding:0 12px; border-radius:10px; border:1px solid var(--line-2);
  background:rgba(255,255,255,.03); transition:border-color .16s;
}
.input-wrap:focus-within{ border-color:rgba(254,44,85,.45); box-shadow:0 0 0 3px rgba(254,44,85,.08); }
.input-wrap .ic{ color:var(--text-3); width:15px; height:15px; }
.input-wrap input{ flex:1; border:0; background:none; outline:none; font-size:12.5px; min-width:0; }
.input-wrap input::placeholder{ color:var(--text-4); }

.td-hero{ display:flex; gap:14px; align-items:flex-start; }
.td-cover{ width:64px; height:84px; border-radius:10px; display:grid; place-items:center; font-size:26px; flex:0 0 auto; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.1); }
.td-title{ font-size:14.5px; font-weight:620; line-height:1.45; }
.td-meta{ font-size:11px; color:var(--text-3); margin-top:5px; display:flex; gap:7px; flex-wrap:wrap; align-items:center; }

.hook-box{
  padding:14px 16px; border-radius:12px; position:relative; overflow:hidden;
  background:linear-gradient(120deg, rgba(254,44,85,.1), rgba(254,44,85,.02));
  border:1px solid rgba(254,44,85,.2);
}
.hook-box::after{
  content:"“"; position:absolute; right:12px; top:-14px; font-size:70px;
  color:rgba(254,44,85,.16); font-family:Georgia, serif; line-height:1;
}
.hook-q{ font-size:13px; font-weight:560; line-height:1.7; color:#fff; position:relative; z-index:1; }
.hook-tags{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; position:relative; z-index:1; }

.rhythm{ display:flex; flex-direction:column; gap:0; }
.rh-step{ display:flex; gap:11px; }
.rh-axis{ width:44px; flex:0 0 auto; text-align:right; padding-top:2px; }
.rh-time{ font-size:10px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.rh-line{ width:1px; background:var(--line-2); position:relative; flex:0 0 auto; margin:6px 0; }
.rh-line::before{
  content:""; position:absolute; left:-3px; top:0; width:7px; height:7px; border-radius:50%;
  background:var(--surface); border:2px solid var(--brand);
}
.rh-body{ flex:1; padding:0 0 16px 0; }
.rh-t{ font-size:12px; font-weight:570; }
.rh-d{ font-size:11px; color:var(--text-3); margin-top:2px; line-height:1.65; }
.rh-step:last-child .rh-body{ padding-bottom:0; }

.shot-tbl td{ font-size:11.5px; text-align:left !important; }
.shot-tbl th{ text-align:left !important; }
.shot-tbl td:first-child{ width:44px; }
.shot-tbl .shot-no{
  width:20px; height:20px; border-radius:5px; display:grid; place-items:center;
  font-size:9.5px; font-weight:700; background:rgba(254,44,85,.12); color:#FF8FA3;
}
.shot-tbl .shot-dur{ color:var(--text-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.shot-tbl tbody tr:hover{ background:rgba(255,255,255,.02); cursor:default; }
.shot-tbl td:last-child{ color:var(--text-3); }

.transcript{
  padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.025);
  border:1px solid var(--line); font-size:12.5px; line-height:1.95; color:var(--text-2);
  white-space:pre-wrap; position:relative; max-height:280px; overflow:auto;
}
.transcript em{ font-style:normal; color:#FF9DAF; background:rgba(254,44,85,.1); padding:0 2px; border-radius:2px; }

.sell-list{ display:flex; flex-direction:column; gap:8px; }
.sell-item{ display:flex; gap:8px; align-items:flex-start; font-size:11.5px; color:var(--text-2); line-height:1.65; }
.sell-item .ic{ width:13px; height:13px; color:var(--down); flex:0 0 auto; margin-top:2px; }

/* 剧本 */
.script-head{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px 20px; border-radius:var(--r-lg);
  background:linear-gradient(120deg, rgba(254,44,85,.09), rgba(255,255,255,.015));
  border:1px solid rgba(254,44,85,.18);
}
.script-meta{ display:flex; gap:22px; margin-left:auto; flex-wrap:wrap; }
.script-meta div{ text-align:right; }
.script-meta b{ display:block; font-size:15px; font-weight:640; font-variant-numeric:tabular-nums; }
.script-meta span{ font-size:10px; color:var(--text-3); }
.script-tbl td:nth-child(3){ font-size:11.5px; color:var(--text); line-height:1.7; }
.script-tbl td:nth-child(2){ color:var(--text-2); line-height:1.7; }
.script-tbl tbody tr{ cursor:default; }

/* 生成中的遮罩 */
.gen-mask{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding:44px 20px; color:var(--text-3); font-size:12px;
}
.gen-spin{
  width:34px; height:34px; border-radius:50%;
  border:2px solid rgba(255,255,255,.1); border-top-color:var(--brand);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{transform:rotate(360deg)} }