:root{
  --ink-0:#1D1D1F; --ink-1:#3A3A3C; --ink-2:#6E6E73; --ink-3:#86868B; --ink-4:#AEAEB2; --ink-5:#C7C7CC;
  --accent:#0071E3; --accent-2:#0A84FF; --accent-deep:#0064C8; --accent-glow:rgba(0,113,227,0.18);
  --ok:#34C759; --ok-bg:rgba(52,199,89,0.16); --warn:#FF9F0A; --err:#FF3B30;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", system-ui, sans-serif;
  --r-card:16px; --r-mid:12px; --r-in:8px;
  --ease:cubic-bezier(0.4,0,0.2,1); --snap:cubic-bezier(0.22,1,0.36,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{font-family:var(--font);color:var(--ink-1);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}

.bg{position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(120% 80% at 12% 6%, #DCE8FF 0%, transparent 52%),
    radial-gradient(95% 70% at 90% 96%, #ECE4FF 0%, transparent 50%),
    linear-gradient(165deg, #F5F8FD 0%, #EEF1F7 52%, #F3EFFB 100%);}
.orb{position:fixed;border-radius:50%;filter:blur(72px);z-index:-1;pointer-events:none;}
.orb.b1{width:340px;height:340px;background:#7FB0FF;opacity:.30;top:-60px;right:7%;}
.orb.b2{width:300px;height:300px;background:#C7B6FF;opacity:.26;bottom:-60px;left:5%;}

.glass-1{background:rgba(255,255,255,0.55);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border:1px solid rgba(255,255,255,0.7);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 1px 1px rgba(20,30,60,0.04);}
.glass-2{background:rgba(255,255,255,0.6);backdrop-filter:blur(22px) saturate(185%);-webkit-backdrop-filter:blur(22px) saturate(185%);border:1px solid rgba(255,255,255,0.75);border-radius:var(--r-card);box-shadow:inset 0 1px 0 rgba(255,255,255,0.95),0 10px 36px rgba(20,30,60,0.08);}
.glass-3{background:rgba(255,255,255,0.72);backdrop-filter:blur(22px) saturate(190%);-webkit-backdrop-filter:blur(22px) saturate(190%);border:1px solid rgba(255,255,255,0.85);border-radius:var(--r-card);box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 10px 36px rgba(20,30,60,0.10);}
.inset{background:rgba(255,255,255,0.5);border:1px solid rgba(0,0,0,0.06);border-radius:var(--r-mid);}
.pill{border-radius:9999px;background:rgba(255,255,255,0.62);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border:1px solid rgba(255,255,255,0.8);box-shadow:inset 0 1px 0 rgba(255,255,255,0.95);color:var(--ink-1);}
.cta{border-radius:9999px;background:linear-gradient(180deg,var(--accent-2),var(--accent));border:1px solid rgba(255,255,255,0.35);box-shadow:0 4px 16px rgba(0,113,227,0.32),inset 0 1px 0 rgba(255,255,255,0.4);color:#fff;}

.topbar{position:sticky;top:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;z-index:10;}
.brand{display:flex;align-items:center;gap:12px;}
.logo{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#fff;font-size:17px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);}
.brand .name{font-size:15px;font-weight:500;color:var(--ink-0);letter-spacing:-0.01em;}
.steps{display:flex;align-items:center;gap:6px;}
.step{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-4);padding:7px 14px;border-radius:9999px;cursor:pointer;transition:color .1s var(--ease),background .2s var(--ease);}
.step .dot{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;border:1px solid var(--ink-4);color:var(--ink-4);transition:all .18s var(--snap);}
.step.done{color:var(--ink-2);}
.step.done .dot{border-color:transparent;background:var(--ok-bg);color:var(--ok);}
.step.current{color:var(--accent);background:rgba(0,113,227,0.10);border:1px solid rgba(0,113,227,0.30);box-shadow:0 0 0 3px var(--accent-glow);}
.step.current .dot{background:var(--accent);border-color:transparent;color:#fff;font-weight:500;}
.steps .sep{width:14px;height:1px;background:rgba(0,0,0,0.10);flex:0 0 auto;}
.userpill{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;font-size:13px;color:var(--ink-1);max-width:46vw;min-width:0;flex-shrink:1;}
.userpill .uname{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom;}
.uava{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#8AB6FF,#6E8BD6);flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600;}

.stage{max-width:1200px;margin:0 auto;padding:52px 48px 60px;}
.screen{display:none;animation:fade .4s var(--ease);}
.screen.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;}
.h-stage{font-size:34px;font-weight:500;letter-spacing:-0.02em;line-height:1.2;color:var(--ink-0);margin-bottom:6px;}
.sub-stage{font-size:13px;color:var(--ink-2);line-height:1.6;margin-bottom:30px;max-width:560px;}
.grid{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:start;}
.card{padding:24px;}
.card-label{font-size:12px;font-weight:500;letter-spacing:0.05em;color:var(--ink-3);text-transform:uppercase;margin-bottom:14px;}

textarea,input[type=text]{width:100%;font-family:var(--font);font-size:14px;color:var(--ink-0);background:transparent;border:none;outline:none;resize:none;line-height:1.6;}
textarea::placeholder,input::placeholder{color:var(--ink-4);}
.field{padding:16px;margin-bottom:16px;}
.field.big{min-height:150px;}

.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.chip{padding:8px 15px;font-size:13px;cursor:pointer;transition:all .12s var(--ease);}
.chip.on{background:rgba(0,113,227,0.10);border-color:rgba(0,113,227,0.35);color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.linkbtn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;font-size:13px;cursor:pointer;color:var(--ink-1);}

.analyze .row{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid rgba(0,0,0,0.06);font-size:13px;}
.analyze .row:last-child{border-bottom:none;}
.analyze .k{color:var(--ink-3);}
.analyze .v{color:var(--ink-0);font-weight:500;}

.seg{padding:14px 16px;margin-bottom:10px;display:flex;gap:12px;background:rgba(255,255,255,0.5);border:1px solid rgba(0,0,0,0.05);border-radius:var(--r-mid);transition:border .12s var(--ease);}
.seg:hover{border-color:rgba(0,113,227,0.30);}
.seg .no{font-size:12px;color:var(--accent);font-weight:500;min-width:18px;padding-top:2px;}
.seg .tx{font-size:14px;color:var(--ink-0);line-height:1.65;flex:1;}
.seg .tools{display:flex;gap:6px;opacity:0;transition:opacity .12s var(--ease);}
.seg:hover .tools{opacity:1;}
@media(hover:none){.seg .tools{opacity:1;}}
.iconbtn{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--ink-2);cursor:pointer;border:1px solid transparent;}
.iconbtn:hover{background:rgba(0,113,227,0.08);color:var(--accent);}
.toolbar{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;}

.metric{padding:14px 16px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;}
.metric .k{font-size:13px;color:var(--ink-3);}
.metric .v{font-size:18px;color:var(--ink-0);font-weight:500;}

.ava-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:26px;}
.ava{position:relative;aspect-ratio:3/4;border-radius:var(--r-mid);overflow:hidden;border:1px solid rgba(255,255,255,0.7);cursor:pointer;box-shadow:0 2px 8px rgba(20,30,60,0.06);transition:transform .12s var(--ease);}
.ava:hover{transform:translateY(-2px);}
.ava .ph{position:absolute;inset:0;}
.ava .nm{position:absolute;left:0;right:0;bottom:0;padding:14px 10px 8px;font-size:12px;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.45));}
.ava.sel{border:2px solid var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.ava .chk{position:absolute;top:7px;right:7px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);}
.ava.clone{display:flex;align-items:center;justify-content:center;border:1px dashed rgba(0,0,0,0.18);background:rgba(255,255,255,0.4);color:var(--ink-3);font-size:13px;flex-direction:column;gap:6px;box-shadow:none;}
.ava.clone i{font-size:20px;}

.voices{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;}
.voice{display:flex;align-items:center;gap:8px;padding:9px 14px;font-size:13px;cursor:pointer;}
.voice .pi{font-size:15px;color:var(--ink-2);}
.voice.on{background:rgba(0,113,227,0.10);border-color:rgba(0,113,227,0.35);color:var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,0.8),0 0 0 3px var(--accent-glow);}
.voice.on .pi{color:var(--accent);}
.speed{display:flex;align-items:center;gap:14px;}
.speed .lab{font-size:12px;color:var(--ink-3);}
.track{flex:1;height:4px;border-radius:9999px;background:rgba(0,0,0,0.10);position:relative;}
.track .fill{position:absolute;left:0;top:0;bottom:0;border-radius:9999px;background:var(--accent);}
.track .thumb{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,0.25);}
.speed .val{font-size:13px;color:var(--ink-1);min-width:34px;}

.prev{display:flex;flex-direction:column;align-items:center;gap:16px;}
.nine{height:430px;aspect-ratio:9/16;border-radius:var(--r-card);overflow:hidden;position:relative;border:1px solid rgba(255,255,255,0.7);background:linear-gradient(160deg,#aab6c8,#7d8aa0);box-shadow:0 10px 30px rgba(20,30,60,0.14);}
.nine .pose{position:absolute;inset:0;background:radial-gradient(78% 56% at 50% 34%, rgba(255,240,225,0.55), transparent 62%);}
.nine .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:21px;color:#fff;background:rgba(255,255,255,0.22);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.5);}
.nine .badge{position:absolute;top:12px;left:12px;font-size:11px;padding:5px 10px;color:var(--ink-1);}
.nine .cap{position:absolute;left:0;right:0;bottom:54px;display:flex;justify-content:center;}
.nine .cap span{font-size:15px;font-weight:500;color:#fff;background:rgba(0,0,0,0.4);padding:6px 12px;border-radius:8px;text-shadow:0 1px 3px rgba(0,0,0,0.8);}
.nine .ctrl{position:absolute;left:10px;right:10px;bottom:12px;height:28px;display:flex;align-items:center;gap:10px;padding:0 10px;}
.nine .ctrl .bar{flex:1;height:3px;border-radius:9999px;background:rgba(255,255,255,0.4);position:relative;}
.nine .ctrl .bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:35%;background:#fff;border-radius:9999px;}
.meta{display:flex;gap:18px;font-size:12px;color:var(--ink-3);}
.meta b{color:var(--ink-1);font-weight:500;}
.cta-row{display:flex;gap:10px;width:100%;}
.btn{height:46px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:500;cursor:pointer;padding:0 22px;border-radius:9999px;transition:transform .1s var(--ease);}
.btn:active{transform:scale(0.98);}
.btn.full{flex:1;}
.btn.sec{color:var(--ink-1);}
.ghost{height:46px;width:46px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--ink-1);cursor:pointer;border-radius:9999px;}

.progress-wrap{padding:28px;margin-bottom:24px;}
.pbar{height:6px;border-radius:9999px;background:rgba(0,0,0,0.08);position:relative;overflow:hidden;margin-bottom:10px;}
.pbar .pf{position:absolute;left:0;top:0;bottom:0;border-radius:9999px;background:linear-gradient(90deg,#30B85A,#34C759);box-shadow:0 0 10px rgba(52,199,89,0.5);}
.ptop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;}
.ptop .pct{font-size:24px;font-weight:500;color:var(--ink-0);}
.ptop .pst{font-size:13px;color:var(--ink-2);}
.stages{display:flex;flex-direction:column;gap:2px;}
.srow{display:flex;align-items:center;gap:12px;padding:12px 4px;font-size:14px;}
.srow .si{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;}
.srow.done{color:var(--ink-1);} .srow.done .si{background:var(--ok-bg);color:var(--ok);}
.srow.run{color:var(--ink-0);} .srow.run .si{background:rgba(0,113,227,0.12);color:var(--accent);}
.srow.wait{color:var(--ink-4);} .srow.wait .si{border:1px solid var(--ink-4);color:var(--ink-4);}
.spin{animation:spin 1s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}}

.pubrow{display:flex;align-items:center;gap:10px;padding:12px 0;font-size:13px;border-bottom:1px solid rgba(0,0,0,0.06);}
.pubrow .chico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;background:rgba(0,113,227,0.10);color:var(--accent);}
.toggle{width:42px;height:25px;border-radius:9999px;background:rgba(0,0,0,0.12);position:relative;cursor:pointer;transition:background .2s var(--ease);}
.toggle.on{background:var(--accent);}
.toggle .kn{position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.25);transition:left .2s var(--snap);}
.toggle.on .kn{left:19px;}
.tag{padding:6px 12px;font-size:12px;display:inline-flex;align-items:center;gap:6px;}

/* 玻璃风提示条（替代原生 alert） */
#toastwrap{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;}
.toast{display:flex;align-items:center;gap:9px;max-width:min(90vw,440px);padding:12px 18px;border-radius:14px;font-size:13.5px;line-height:1.45;white-space:pre-line;
  background:rgba(255,255,255,0.72);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,0.6);box-shadow:0 8px 30px rgba(20,40,80,0.16);color:var(--ink-0);
  opacity:0;transform:translateY(-12px);transition:opacity .28s var(--ease),transform .28s var(--snap);}
.toast.in{opacity:1;transform:translateY(0);}
.toast i{font-size:17px;flex-shrink:0;}
.toast.ok i{color:var(--ok);} .toast.err i{color:#FF3B30;} .toast.info i{color:var(--accent);}

/* 移动端响应式断点统一放到文件末尾(必须在 .sidebar / .topbar margin 等基础规则之后,
   否则同特异性下基础规则按源码顺序后置会盖掉媒体查询里的 display:none / margin-left:0) */

/* 左侧工作台导航 */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:148px;padding:18px 10px;display:flex;flex-direction:column;gap:3px;
  background:rgba(255,255,255,0.55);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  border-right:1px solid rgba(255,255,255,0.5);z-index:60;}
.sidebar .sbrand{display:flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--ink-0);padding:4px 10px 16px;}
.sidebar .sbrand i{color:var(--accent);font-size:19px;}
.sidebar .nav{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:14px;color:var(--ink-2);cursor:pointer;transition:background .15s;}
.sidebar .nav i{font-size:18px;}
.sidebar .nav:hover{background:rgba(0,113,227,0.07);color:var(--ink-0);}
.sidebar .nav.on{background:rgba(0,113,227,0.12);color:var(--accent);font-weight:500;}
.topbar,.stage{margin-left:148px;}

/* ===== 移动端底部 Tab 导航(默认隐藏;移动断点或 .force-mobile 时显示) ===== */
.mtab{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  height:calc(60px + env(safe-area-inset-bottom));
  padding:0 4px env(safe-area-inset-bottom);
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  border-top:1px solid rgba(255,255,255,0.6);box-shadow:0 -1px 8px rgba(20,30,60,0.06);}
.mtab .nav{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:11px;color:var(--ink-3);cursor:pointer;min-height:44px;border-radius:12px;}
.mtab .nav i{font-size:21px;}
.mtab .nav.on{color:var(--accent);}
@media(max-width:768px){ .mtab{display:flex;} }

/* ===== in-app WebView(头条/抖音)兜底:viewport meta 被无视、纯 CSS 断点不触发时,
   由 app.js 用 UA+innerWidth 判断后给 <html> 加 .force-mobile,强制移动布局 ===== */
.force-mobile .mtab{display:flex;}
.force-mobile .sidebar{display:none;}
.force-mobile .topbar,.force-mobile .stage{margin-left:0;}
.force-mobile .topbar{flex-wrap:wrap;height:auto;padding:10px 16px;row-gap:8px;}
.force-mobile .grid{grid-template-columns:1fr;}
.force-mobile #ipBtn,.force-mobile #worksBtn{display:none;}
.force-mobile .userpill{margin-left:auto;}
.force-mobile body{padding-bottom:calc(60px + env(safe-area-inset-bottom));}

/* ========== 移动端响应式断点(置于全部基础规则之后,确保按源码顺序生效) ========== */
/* 中屏(641-900):救回 topbar 横向溢出 + 双列压成单列 */
@media(max-width:900px){
  .topbar{flex-wrap:wrap;height:auto;padding:10px 16px;row-gap:8px;}
  .grid{grid-template-columns:1fr;}
  #ipBtn,#worksBtn{font-size:12px;padding:6px 12px;}
}
/* 移动布局总开关:隐藏左侧 sidebar,启用底部 Tab */
@media(max-width:768px){
  .sidebar{display:none;}
  .topbar,.stage{margin-left:0;}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom));}
  .topbar .steps{order:3;width:100%;justify-content:flex-start;overflow-x:auto;}
  #ipBtn,#worksBtn{display:none!important;}  /* 行内 display 需 !important 盖过;入口改走底部 Tab */
  .userpill{margin-left:auto;}
}
/* 手机专属:字号/触摸/弹窗/步骤条/预览/表格 */
@media(max-width:640px){
  .stage{padding:18px 14px;}
  .sub-stage{font-size:14px;} .h-stage{font-size:25px;}
  textarea,input,select{font-size:16px;}     /* ≥16px 防 iOS 聚焦自动放大 */
  .userpill .uname{display:none;}            /* 手机端只留头像首字母+余额 */
  .ava-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .cta-row{flex-wrap:wrap;}
  .pubrow{flex-wrap:wrap;}
  .seg{flex-wrap:wrap;}
  .chip{padding:9px 15px;} .iconbtn{width:34px;height:34px;}
  /* 5 步步骤条压成圆点:步骤文字是裸文本节点(非 span),用 font-size:0 隐藏文字、dot 复原 */
  .topbar .steps .step{font-size:0;padding:5px;gap:0;}
  .topbar .steps .step .dot{font-size:11px;}
  .steps .sep{display:none;}
  /* 弹窗收边(覆盖内联 padding 需 !important) */
  [id$=Modal]{padding:12px!important;align-items:flex-start!important;}
  [id$=Modal] .card{padding:18px!important;max-height:92vh;overflow:auto;}
  [data-close],#aiClose,.modalX{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  /* 9:16 预览框自适应,不锁死 430px 占满首屏 */
  .nine{height:auto;width:100%;max-width:260px;margin:0 auto;}
  .meta{flex-wrap:wrap;gap:10px;justify-content:center;}
  /* 钱包/后台表格:整表横向滚动(不删列,数据不丢) */
  .led,.tb{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
}
/* 极窄机:结果网格降列 */
@media(max-width:480px){
  .ava-grid{grid-template-columns:1fr;}
  #worksGrid,#aiResults,#lookResults{grid-template-columns:repeat(2,1fr)!important;}
}