/* Make It Viral v4 - modern UI */
:root{
  /* dark "space" theme: deep navy, electric blue, a little starlight */
  color-scheme:dark;
  --bg:#070a12; --paper:#0d1220; --paper2:#141b2d; --ink:#eef2fb; --ink2:#9ba6bd; --ink3:#5c6780; --line:#1e2740;
  --accent:#3b82f6; --accent2:#8b5cf6; --accent3:#22d3ee; --accent-soft:#11203d; --accent-ink:#fff;
  --grad:linear-gradient(135deg,#f43f5e 0%,#f97316 55%,#facc15 100%);
  --grad2:linear-gradient(135deg,#6366f1,#8b5cf6 55%,#ec4899);
  --hot:linear-gradient(135deg,#2563eb 0%,#3b82f6 50%,#6366f1 100%);
  --good:#4ade80; --good-soft:#0e2a1d; --bad:#f87171; --bad-soft:#2c1218; --warn:#fbbf24; --warn-soft:#2a2210;
  --blue:#6ea0ff; --chip:#161e32; --heat:59,130,246;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset;
  --shadow2:0 20px 50px -24px rgba(0,0,0,.9),0 0 0 1px rgba(110,160,255,.04);
  --r:16px; --side:236px;
  --font:Inter,Mukta,"Nirmala UI","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:radial-gradient(1200px 600px at 75% -10%,#1b2a6b55,transparent 60%),radial-gradient(900px 500px at 10% 110%,#3b1d6b44,transparent 60%),var(--bg);background-attachment:fixed;color:var(--ink);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline}
small{font-weight:400;color:var(--ink2);font-size:.82em}
.muted{color:var(--ink2)} .small{font-size:13px}
.hidden{display:none!important}
.num,.n{font-variant-numeric:tabular-nums}
::selection{background:#3b82f655}
/* faint stars */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1px 1px at 12% 18%,#fff9,transparent),radial-gradient(1px 1px at 28% 72%,#fff7,transparent),
  radial-gradient(1.5px 1.5px at 44% 32%,#cfe0ff,transparent),radial-gradient(1px 1px at 63% 84%,#fff6,transparent),
  radial-gradient(1px 1px at 77% 22%,#fff8,transparent),radial-gradient(1.5px 1.5px at 88% 58%,#d9c8ff,transparent),
  radial-gradient(1px 1px at 52% 6%,#fff7,transparent),radial-gradient(1px 1px at 6% 52%,#fff6,transparent),
  radial-gradient(1px 1px at 94% 92%,#fff6,transparent),radial-gradient(1px 1px at 36% 94%,#fff5,transparent);
  background-size:520px 520px}

/* ---------- app shell: sidebar + content ---------- */
.side{position:fixed;inset:0 auto 0 0;width:var(--side);background:rgba(9,13,24,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:20;padding:14px 12px}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 14px;color:inherit}
.brand img{height:34px;width:34px;border-radius:10px}
.brand b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em}
.brand span{display:block;font-size:11.5px;color:var(--ink2);margin-top:-2px}
.tabs{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
.tabs .sec{font-size:11px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;padding:14px 10px 4px}
.tabs button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:8px 10px;border-radius:10px;font:inherit;font-size:14px;font-weight:500;color:var(--ink2);cursor:pointer;text-align:left;width:100%}
.tabs button svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabs button small{display:none}
.tabs button:hover{background:var(--paper2);color:var(--ink)}
.tabs button.on{background:linear-gradient(90deg,#1d2b4f,#141b2d);color:var(--ink);font-weight:650;box-shadow:inset 2px 0 0 var(--accent)}
.tabs button.on svg{stroke:var(--accent)}
.tabs button .new{margin-left:auto;font-size:10px;font-weight:700;padding:1px 6px;border-radius:20px;background:var(--grad);color:#fff}
.side-foot{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.switcher select{width:100%;font-size:13px;padding:8px 10px;border-radius:10px}

.shell{margin-left:var(--side);min-height:100vh}
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;padding:10px 28px;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.top .mob-brand{display:none}
.quota{flex:1;max-width:360px;margin-left:auto;cursor:pointer}
.qbar{height:6px;border-radius:6px;background:var(--chip);overflow:hidden}
.qbar i{display:block;height:100%;width:0;background:var(--good);transition:width .4s;border-radius:6px}
.qtxt{font-size:12px;color:var(--ink2);margin-top:4px}
.auth{display:flex;gap:8px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:4px 10px;border-radius:20px;background:var(--good-soft);color:var(--good);font-weight:600;white-space:nowrap}
.pill.off{background:var(--chip);color:var(--ink2)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.avatar{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--grad2);color:#fff!important;font-weight:700;text-decoration:none!important}

main{max-width:1180px;margin:0 auto;padding:26px 28px 80px}
.tab{display:none;animation:fade .25s ease}.tab.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.bar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.bar h2{margin:0;font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.bar h2 small{display:block;font-size:14px;font-weight:400;letter-spacing:0;margin-top:4px}
.ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------- cards ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 12px;font-size:16px;font-weight:700;letter-spacing:-.01em}
.card h3 small{font-weight:400}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2>.card,.grid3>.card{margin-bottom:0}
.span2{grid-column:span 2}
@media(max-width:960px){.grid2,.grid3{grid-template-columns:1fr}.span2{grid-column:auto}}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0}
input,select,textarea{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:9px 12px;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--ink3);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}
input{flex:1;min-width:200px}
textarea{width:100%;resize:vertical;line-height:1.5}
.lbl{display:block;font-size:13px;color:var(--ink2);margin:10px 0 4px;font-weight:500}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:14px;font-weight:600;padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;text-decoration:none!important;white-space:nowrap;transition:transform .08s,background .15s,border-color .15s,box-shadow .15s}
.btn:hover{background:var(--paper2);border-color:var(--ink3)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{background:#2563eb;border-color:#2563eb}
.btn.hot{background:var(--hot);color:#fff;border:0;box-shadow:0 8px 24px -8px #3b82f6aa}
.btn.hot:hover{filter:brightness(1.1);box-shadow:0 10px 28px -8px #3b82f6dd}
.btn.danger{color:var(--bad)}
.btn.ghost{border-color:transparent;background:none}
.btn.tiny{font-size:12.5px;padding:5px 10px;border-radius:8px}
.btn.big{font-size:15px;padding:12px 20px;border-radius:12px}
.btn:disabled{opacity:.55;cursor:wait}
.btn .cost{font-style:normal;font-size:11px;font-weight:500;opacity:.65;padding:1px 6px;border-radius:6px;background:color-mix(in srgb,currentColor 10%,transparent)}
.btn.file{position:relative;overflow:hidden}
.btn.file input{position:absolute;inset:0;opacity:0;cursor:pointer;min-width:0}

/* ---------- stat tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.tile .k{font-size:12.5px;color:var(--ink2);font-weight:500}
.tile .v{font-size:26px;font-weight:800;letter-spacing:-.03em;margin-top:2px;font-variant-numeric:tabular-nums}
.tile .v.sm{font-size:16px;font-weight:700;letter-spacing:0}
.tile .d{font-size:12.5px;margin-top:2px}
.up{color:var(--good)} .down{color:var(--bad)}

/* ---------- banners ---------- */
.banner{border-radius:12px;padding:12px 14px;background:var(--paper2);border:1px solid var(--line);margin:0 0 14px;font-size:14px}
.banner.err{background:var(--bad-soft);border-color:transparent;color:var(--bad)}
.banner.ok{background:var(--good-soft);border-color:transparent;color:var(--good)}
.banner.warn{background:var(--warn-soft);border-color:transparent}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;margin:0 -4px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:12px;font-weight:600;color:var(--ink2);cursor:pointer;white-space:nowrap;user-select:none;background:var(--paper)}
th.r,td.r{text-align:right;font-variant-numeric:tabular-nums}
td{white-space:nowrap}
th.sorted::after{content:" ↓"} th.sorted.asc::after{content:" ↑"}
tr.click{cursor:pointer} tr.click:hover td{background:var(--paper2)}
td .th{width:96px;height:54px;object-fit:cover;border-radius:8px;display:block}
td.t{white-space:normal;min-width:260px;max-width:440px}
td.t a{color:var(--ink);font-weight:600}
td.t a:hover{color:var(--accent)}
.tag{display:inline-block;font-size:11px;font-weight:600;padding:1px 7px;border-radius:6px;background:var(--chip);color:var(--ink2);margin-left:6px}
.score{display:inline-block;font-weight:800;font-size:12.5px;padding:2px 8px;border-radius:8px;background:var(--chip);color:var(--ink)}
.s1{background:var(--chip)} .s3{background:#3a2f0e;color:#fcd34d} .s5{background:#3d2310;color:#fdba74} .s10{background:var(--grad);color:#fff}

/* ---------- chips & segmented controls ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chip{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s}
.chip:hover{border-color:var(--ink3)}
.chip b{font-size:11px;color:var(--ink2);font-weight:600}
.chip.pick.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip.pick.on b{color:inherit;opacity:.7}
.seg{display:inline-flex;background:var(--paper2);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{font:inherit;font-size:13.5px;font-weight:600;border:0;background:none;color:var(--ink2);padding:6px 12px;border-radius:9px;cursor:pointer}
.seg button.on{background:var(--paper);color:var(--ink);box-shadow:var(--shadow2)}
.seg.big button{padding:8px 14px}
.seg .cost{font-style:normal;font-size:11px;opacity:.6;margin-left:4px}
.filters{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:14px 0 4px}
.filters label{display:flex;gap:6px;align-items:center;font-size:13.5px;color:var(--ink2)}

/* ---------- competitor cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin-bottom:16px}
.cc{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);transition:box-shadow .2s,transform .2s}
.cc:hover{box-shadow:var(--shadow2);transform:translateY(-2px)}
.cc .hd{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.cc .hd img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--chip)}
.cc .hd b{display:block;font-size:15px;line-height:1.25}
.cc .hd b a{color:var(--ink)}
.cc .hd span{font-size:12.5px;color:var(--ink2)}
.cc .x{position:absolute;top:10px;right:10px;border:0;background:none;color:var(--ink3);font-size:18px;cursor:pointer;border-radius:8px;width:28px;height:28px}
.cc .x:hover{background:var(--paper2);color:var(--bad)}
.cc .stats{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:13px;color:var(--ink2)}
.cc .stats b{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.cc .chips .chip{font-size:12px;padding:3px 9px}
.found{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.found img{width:36px;height:36px;border-radius:50%}
.found div{flex:1}

/* ---------- video cards ---------- */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.vc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .2s,transform .2s;display:flex;flex-direction:column}
.vc:hover{box-shadow:var(--shadow2);transform:translateY(-2px)}
.vc .im{position:relative;display:block;aspect-ratio:16/9;background:var(--chip)}
.vc .im img{width:100%;height:100%;object-fit:cover;display:block}
.vc .im .score{position:absolute;top:8px;left:8px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.vc .im .dur{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.78);color:#fff;font-size:11.5px;font-weight:600;padding:1px 6px;border-radius:6px}
.vc .bd{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.vc .bd a.tt{color:var(--ink);font-weight:650;font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vc .bd .m{font-size:12.5px;color:var(--ink2)}
.vc .bd .acts{margin-top:auto;padding-top:6px}

/* ---------- charts & heatmap ---------- */
.chart svg{width:100%;height:auto;display:block}
.chart text{font-size:11px;fill:var(--ink2)}
.heat{border-collapse:separate;border-spacing:3px;font-size:12px;width:100%}
.heat td,.heat th{border:0;padding:6px 4px;text-align:center;border-radius:6px}
.heat th{font-size:11px;color:var(--ink2);cursor:default}
.heat td{background:var(--paper2);min-width:38px}
.heat td.has{font-weight:700}
.best{margin:10px 0 4px;font-size:14px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);margin:8px 0}
.legend i{display:inline-block;width:12px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}

/* ---------- titles list ---------- */
.titles{padding-left:22px;margin:8px 0}
.titles li{padding:8px 0;border-bottom:1px solid var(--line)}
.titles .tt{font-weight:650}
.titles .why{display:block;font-size:12.5px;color:var(--ink2)}
.titles .len{font-size:11.5px;color:var(--ink2);margin:0 8px}
.titles .len.long{color:var(--bad)}
.titles button{font:inherit;font-size:12px;border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:2px 8px;cursor:pointer;color:var(--ink)}

/* ---------- settings steps ---------- */
.step h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.step .num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--accent);color:#fff;font-size:13px;font-weight:700}

/* ---------- modal & toast ---------- */
.modal{position:fixed;inset:0;background:rgba(3,5,12,.72);backdrop-filter:blur(4px);z-index:50;display:grid;place-items:center;padding:20px;animation:fade .2s}
.mbox{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:20px;max-width:760px;width:100%;max-height:88vh;overflow:auto;padding:24px 26px;box-shadow:0 30px 80px -20px rgba(0,0,0,.45)}
.mbox.wide{max-width:1040px}
.mbox .x{position:absolute;top:12px;right:12px;border:0;background:var(--paper2);width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;color:var(--ink)}
.mbox h2{margin:0 0 6px;font-size:22px;letter-spacing:-.02em}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:#1d2b4f;color:var(--ink);border:1px solid #2c3d68;padding:10px 16px;border-radius:12px;font-size:14px;z-index:60;opacity:0;pointer-events:none;transition:all .25s;max-width:min(560px,92vw);box-shadow:var(--shadow2)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--bad);color:#fff}
.empty{color:var(--ink2);text-align:center;padding:26px 12px;font-size:14px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
.skel{background:linear-gradient(90deg,var(--paper2),var(--chip),var(--paper2));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:10px}
@keyframes sk{to{background-position:-200% 0}}

/* ---------- home ---------- */
.hero{text-align:center;padding:34px 0 10px;position:relative}
.hero::before{content:"";position:absolute;inset:-40px 10% auto;height:260px;background:radial-gradient(closest-side,#3b82f630,transparent),radial-gradient(closest-side at 70% 40%,#8b5cf630,transparent);filter:blur(10px);z-index:-1}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink2)}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px var(--good-soft)}
.hero h1{margin:16px 0 8px;font-size:clamp(32px,5vw,52px);font-weight:850;letter-spacing:-.045em;line-height:1.05}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 span{display:block;font-size:16px;font-weight:500;color:var(--ink2);letter-spacing:0;margin-top:10px}
.askbox{max-width:760px;margin:22px auto 14px;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:10px 10px 8px 16px;box-shadow:var(--shadow2);text-align:left;transition:border-color .2s,box-shadow .2s}
.askbox:focus-within{border-color:var(--ink3);box-shadow:var(--shadow2),0 0 0 5px color-mix(in srgb,var(--accent) 10%,transparent)}
.askbox textarea{border:0;background:none;font-size:16px;padding:8px 2px;resize:none;box-shadow:none!important}
.askrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.askrow .seg{background:var(--paper2)}
.askrow #ask-hint{flex:1;min-width:180px;font-size:12.5px}
.chips.center{justify-content:center;max-width:860px;margin:6px auto 0}
.chip.big{font-size:14px;padding:8px 14px;font-weight:500;background:var(--paper)}
.chip.big:hover{background:var(--paper2)}
#home-results{max-width:980px;margin:22px auto 0}
.today{max-width:980px;margin:22px auto 0}
.today-hd{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.today-hd h3{margin:0}
.idea-title{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:10px 0 4px;line-height:1.3}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.meta span{font-size:12.5px;padding:3px 10px;border-radius:999px;background:var(--paper2);color:var(--ink2)}
.idea-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;margin-top:10px}
@media(max-width:860px){.idea-grid{grid-template-columns:1fr}}
.idea-grid h4{margin:14px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
blockquote{margin:0;padding:10px 14px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 10px 10px 0}
.thumbbox{border:1px dashed var(--line);border-radius:12px;padding:12px}
.thumbbox .big{font-size:22px;font-weight:850;letter-spacing:-.02em}
.prompt{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:var(--paper2);border-radius:8px;padding:8px 10px;margin-top:8px;white-space:pre-wrap}
.src{display:grid;gap:8px}
.src a{display:flex;gap:10px;align-items:center;color:var(--ink);font-size:13px}
.src img{width:90px;border-radius:8px;aspect-ratio:16/9;object-fit:cover}
.msg{margin:12px 0;display:flex}
.msg.user{justify-content:flex-end}
.msg.user div{background:var(--ink);color:var(--bg);padding:9px 14px;border-radius:16px 16px 4px 16px;max-width:80%}
.msg.ai{display:block;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px 18px;box-shadow:var(--shadow)}
.md h4{margin:12px 0 4px;font-size:16px} .md p{margin:6px 0} .md code{background:var(--paper2);padding:1px 5px;border-radius:5px}
.used{font-size:12px;color:var(--ink2);margin-top:10px;border-top:1px solid var(--line);padding-top:8px}

/* connect call-to-action */
.cta{position:relative;overflow:hidden;border-radius:22px;padding:26px 28px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow2);display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center;max-width:980px;margin:26px auto 0}
.cta::after{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;background:var(--grad2);opacity:.22;filter:blur(30px)}
.cta h3{font-size:22px;letter-spacing:-.02em;margin:0 0 6px}
.cta ul{margin:10px 0 16px;padding:0;list-style:none;display:grid;gap:6px;font-size:14px}
.cta li::before{content:"✓";color:var(--good);font-weight:800;margin-right:8px}
.cta .steps{display:grid;gap:10px;font-size:13.5px}
.cta .steps div{display:flex;gap:10px;align-items:flex-start;background:var(--paper2);border-radius:12px;padding:10px 12px}
.cta .steps b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:7px;background:var(--accent);color:#fff;font-size:12px}
.cta.two{grid-template-columns:1fr auto}
@media(max-width:860px){.cta,.cta.two{grid-template-columns:1fr}}

/* ---------- insights ---------- */
.ins-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.ins-head img{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--chip);border:3px solid var(--paper);box-shadow:0 0 0 2px var(--accent)}
.ins-head h2{margin:0;font-size:26px;letter-spacing:-.03em}
.ring{--p:0;width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c,var(--good)) calc(var(--p)*1%),var(--chip) 0);flex:none}
.ring div{width:96px;height:96px;border-radius:50%;background:var(--paper);display:grid;place-items:center;text-align:center}
.ring b{font-size:30px;font-weight:850;letter-spacing:-.04em;line-height:1}
.ring span{font-size:11px;color:var(--ink2);display:block}
.niche-name{font-size:24px;font-weight:850;letter-spacing:-.03em;background:var(--grad2);-webkit-background-clip:text;background-clip:text;color:transparent;margin:4px 0}
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;font-size:14px;margin-top:8px}
.kv span{color:var(--ink2)}
.ideas{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.idea{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.idea:hover{transform:translateY(-2px);box-shadow:var(--shadow2)}
.idea .tt{font-size:16.5px;font-weight:750;letter-spacing:-.015em;line-height:1.35}
.idea .why{font-size:13.5px;color:var(--ink2)}
.idea .gap{font-size:13px;background:var(--accent-soft);border-radius:10px;padding:6px 10px}
.idea .acts{display:flex;gap:6px;margin-top:auto;padding-top:6px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--chip);color:var(--ink2);text-transform:uppercase;letter-spacing:.04em}
.badge.ai{background:var(--grad2);color:#fff}
.simgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.sim{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--paper)}
.sim .hd{display:flex;gap:10px;align-items:center}
.sim img{width:40px;height:40px;border-radius:50%;background:var(--chip)}
.sim b{display:block;font-size:14px;line-height:1.25}
.sim .m{font-size:12.5px;color:var(--ink2)}
.sim .best{font-size:12.5px;margin:0;color:var(--ink2)}

/* ---------- fix & edit ---------- */
.issue{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.issue:last-child{border-bottom:0}
.lvl{flex:none;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 7px;border-radius:6px;margin-top:2px}
.lvl.high{background:var(--bad-soft);color:var(--bad)} .lvl.med{background:var(--warn-soft);color:var(--warn)} .lvl.low{background:var(--chip);color:var(--ink2)}
.fixv{display:grid;grid-template-columns:132px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.fixv:last-child{border-bottom:0}
.fixv img{width:132px;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:var(--chip)}
.fixv .t{font-weight:650;line-height:1.35}
.fixv .iss{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.fixv .iss span{font-size:11.5px;padding:2px 8px;border-radius:999px;background:var(--chip);color:var(--ink2)}
.fixv .iss span.high{background:var(--bad-soft);color:var(--bad)} .fixv .iss span.med{background:var(--warn-soft);color:var(--warn)}
.vs{font-weight:800;font-size:13px;padding:4px 9px;border-radius:9px;text-align:center;min-width:46px}
.vs.g{background:var(--good-soft);color:var(--good)} .vs.m{background:var(--warn-soft);color:var(--warn)} .vs.b{background:var(--bad-soft);color:var(--bad)}
@media(max-width:700px){.fixv{grid-template-columns:96px 1fr}.fixv img{width:96px}.fixv>.ctl{grid-column:1/-1}}
.editor{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.editor{grid-template-columns:1fr}}
.editor .col h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);display:flex;justify-content:space-between;align-items:center}
.counter{font-size:12px;color:var(--ink2);text-align:right;margin-top:2px}
.counter.bad{color:var(--bad)}
.sugg{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;background:var(--paper2);font-size:14px}
.sugg .row{margin:6px 0 0}
.diff{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:13.5px}
.diff div{border-radius:10px;padding:10px 12px;white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto}
.diff .old{background:var(--bad-soft)} .diff .new{background:var(--good-soft)}
.thumbprev{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:var(--chip);display:block}
.hist{font-size:13.5px}
.hist div{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}

/* ---------- trending wall ---------- */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:12px}
.wt{position:relative;border-radius:14px;overflow:hidden;cursor:pointer;border:2px solid transparent;background:var(--paper);transition:border-color .15s,transform .15s}
.wt:hover{transform:translateY(-2px)}
.wt.on{border-color:var(--accent)}
.wt img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.wt .cap{padding:8px 10px;font-size:12.5px}
.wt .cap b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.35;margin-bottom:2px}
.wt .vpd{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.78);color:#fff;font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:7px}
.wt .ck{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.5);color:transparent;display:grid;place-items:center;font-weight:800}
.wt.on .ck{background:var(--accent);color:#fff}
.pat{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:10px 0}
.pat .box{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--paper)}
.pat h4{margin:0 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.pat ul{margin:0;padding-left:18px;font-size:13.5px}

/* ---------- video inspector / channel study ---------- */
.vhead{display:grid;grid-template-columns:320px 1fr;gap:18px;margin-bottom:14px}
.vhead img{width:100%;border-radius:14px;aspect-ratio:16/9;object-fit:cover}
@media(max-width:760px){.vhead{grid-template-columns:1fr}}
.chhead{display:flex;gap:12px;align-items:center}
.chhead img{width:52px;height:52px;border-radius:50%}

/* ---------- unit-limit popup ---------- */
.lim-hero{text-align:center;padding:4px 0 12px}
.lim-hero .ico{font-size:40px}
.optgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.optgrid{grid-template-columns:1fr}}
.opt{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--paper2)}
.opt.main{background:var(--paper);box-shadow:0 0 0 2px var(--accent)}
.opt ol{padding-left:20px;margin:8px 0;font-size:13.5px}
.opt ol li{margin:3px 0}

details summary{cursor:pointer;font-weight:600}
details ol{margin:8px 0;padding-left:20px}
body.mode-local .cloud-only{display:none!important}
body.mode-cloud .local-only{display:none!important}
body:not(.mode-cloud):not(.mode-local) .cloud-only{display:none!important}

/* ---------- phones: sidebar becomes a bottom bar ---------- */
@media(max-width:860px){
  .side{inset:auto 0 0 0;width:auto;height:64px;flex-direction:row;padding:0 4px;border-right:0;border-top:1px solid var(--line);background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(12px)}
  .side .brand,.side-foot,.tabs .sec,.tabs .opt-m{display:none}
  .tabs{flex-direction:row;overflow-x:auto;gap:0;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex-direction:column;gap:2px;font-size:10.5px;padding:8px 10px;min-width:64px;align-items:center;border-radius:12px}
  .tabs button .new{display:none}
  .shell{margin-left:0;padding-bottom:70px}
  .top{padding:10px 14px;gap:10px}
  .top .mob-brand{display:flex;align-items:center;gap:8px;font-weight:800}
  .top .mob-brand img{width:28px;height:28px;border-radius:8px}
  .quota{max-width:none;min-width:0}
  .qtxt{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  main{padding:18px 14px 40px}
  .bar h2{font-size:23px}
  .card{padding:14px}
  .cta{padding:20px}
  .mbox{padding:20px 16px;border-radius:18px}
  .auth .pill{display:none}
}

/* inputs on dark */
input,select,textarea{background:var(--paper2);color:var(--ink);border:1px solid var(--line)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #3b82f633}
.askbox:focus-within{border-color:#3b82f6aa;box-shadow:0 0 0 4px #3b82f622,var(--shadow2)}
.card,.cta,.askbox,.mbox{background:linear-gradient(180deg,#0f1526,#0c111e)}

/* ---------- video editor: now vs suggested ---------- */
.ed-head{display:flex;gap:14px;align-items:center;margin:0 34px 14px 0}
.ed-head img{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:10px;flex:none;background:var(--chip)}
.ed-head h2{margin:0 0 2px}
.ed-trend{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:12px;background:var(--paper2)}
.ed-load{color:var(--ink2);font-size:14px;display:flex;gap:8px;align-items:center}
.ed-sum{background:var(--accent-soft);border:1px solid #23407a;border-radius:10px;padding:8px 12px;font-size:14px;margin-bottom:10px}
.tv-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);gap:10px;overflow-x:auto;padding:6px 0 2px}
.tv{display:block;color:inherit;text-decoration:none!important;border-radius:10px;padding:6px;border:1px solid transparent}
.tv:hover{border-color:var(--line);background:var(--paper)}
.tv img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:var(--chip);display:block}
.tv-t{font-size:13px;font-weight:600;line-height:1.3;margin:6px 0 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cmp{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:12px;background:var(--paper)}
.cmp-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.cmp-hd b{font-size:15px}
.cmp .pill{background:var(--chip);color:var(--ink2)} .cmp .pill.on{background:var(--accent-soft);color:var(--blue)}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cmp-lbl{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);margin-bottom:6px}
.cmp-lbl.hot{color:var(--blue)}
.cmp-text{background:var(--paper2);border-radius:10px;padding:10px 12px;font-size:14px;white-space:pre-wrap;word-break:break-word}
.cmp-text.long{max-height:190px;overflow:auto;font-size:13.5px}
.cmp-text.sug{background:#0f2238;border:1px solid #1f3d66}
.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:6px;cursor:pointer;font-size:14px}
.opt:hover{border-color:#2c4a80}
.opt.on{border-color:var(--accent);background:#0f2238}
.opt input{margin-top:4px;accent-color:var(--accent)}
.why{font-size:12.5px;color:var(--ink2);margin-top:4px}
.tchips{display:flex;flex-wrap:wrap;gap:5px}
.tchip{font-size:12.5px;padding:2px 9px;border-radius:999px;background:var(--chip);border:1px solid var(--line)}
.tchip.add{background:var(--good-soft);border-color:#1e5a3a;color:var(--good)}
.tchip.gone{background:var(--bad-soft);border-color:#5a1e26;color:var(--bad);text-decoration:line-through}
.cmp-act{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.seg.sm button{font-size:12.5px;padding:5px 10px}
.seg button.on{background:var(--accent);color:#fff}
.cmp-edit{margin-top:8px}
.cmp-edit textarea,.cmp-edit input{width:100%;font:inherit;font-size:14px;padding:9px 11px;border-radius:10px}
.ed-bar{position:sticky;bottom:-24px;display:flex;gap:10px;align-items:center;justify-content:flex-end;padding:12px 0 2px;margin-top:4px;background:linear-gradient(180deg,transparent,#0c111e 30%)}
.ed-bar #ed-count{margin-right:auto;font-size:14px}
.btn.hot:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:760px){.cmp-grid{grid-template-columns:1fr}.ed-head img{width:84px}}
input[type=radio],input[type=checkbox]{flex:none;min-width:0;width:auto;padding:0;box-shadow:none}

/* ---------- profile menu ---------- */
.me{position:relative}
button.avatar{border:0;cursor:pointer;font:inherit;font-weight:700;padding:0}
button.avatar:hover{box-shadow:0 0 0 3px #3b82f655}
.me-menu{position:absolute;right:0;top:44px;width:270px;background:#0f1526;border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 24px 60px -16px rgba(0,0,0,.9);z-index:40;animation:fade .15s}
.me-hd{display:flex;gap:10px;align-items:center;padding:8px 8px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.me-hd b{display:block;font-size:14.5px}
.me-hd .small{word-break:break-all}
.me-u{padding:2px 8px 8px}
.me-menu a{display:block;padding:8px 10px;border-radius:9px;color:var(--ink);font-size:14px;text-decoration:none!important}
.me-menu a:hover{background:var(--paper2)}
.me-menu a.out{color:var(--bad);border-top:1px solid var(--line);margin-top:6px;border-radius:0 0 9px 9px}
.me-side{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;background:var(--paper2);border:1px solid var(--line)}
.avatar.sm{width:28px;height:28px;font-size:13px;flex:none}
.me-side-t{min-width:0;flex:1}
.me-side-t b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-side-t span{display:block;font-size:11px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-out{font-size:16px;color:var(--ink2);padding:4px 6px;border-radius:8px;text-decoration:none!important}
.me-out:hover{background:var(--bad-soft);color:var(--bad)}

/* ---------- free units: visual ---------- */
.qup{border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:700;color:#fff;background:var(--hot);padding:7px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 18px -6px #3b82f6aa;animation:qglow 2.6s ease-in-out infinite}
.qup:hover{filter:brightness(1.12)}
@keyframes qglow{50%{box-shadow:0 6px 24px -4px #6366f1dd}}
.quota.trial .qtxt b{color:var(--good)}
.batt{position:relative;width:64px;height:28px;border:2px solid var(--ink3);border-radius:7px;padding:2px;display:inline-block;vertical-align:middle}
.batt::after{content:"";position:absolute;right:-6px;top:8px;width:4px;height:8px;border-radius:0 2px 2px 0;background:var(--ink3)}
.batt i{display:block;height:100%;border-radius:4px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.batt span{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000a}
.batt.big{width:150px;height:62px;border-width:3px;border-radius:14px;padding:4px}
.batt.big::after{right:-10px;top:19px;width:7px;height:18px}
.batt.big i{border-radius:9px;box-shadow:0 0 24px -2px currentColor}
.batt.big span{font-size:20px}
.ucard{display:grid;grid-template-columns:.8fr 1.3fr 1fr;gap:22px;max-width:980px;margin:26px auto 0;padding:22px 24px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,#0f1526,#0c111e);box-shadow:var(--shadow2);position:relative;overflow:hidden}
.ucard::before{content:"";position:absolute;left:-60px;bottom:-90px;width:260px;height:260px;border-radius:50%;background:#22c55e;opacity:.08;filter:blur(40px)}
.u-col{position:relative}
.u-left{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid var(--line);padding-right:18px}
.u-big{font-size:15px;margin-top:10px}.u-big b{font-size:30px;font-weight:850;letter-spacing:-.03em}
.u-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);margin-bottom:10px}
.u-costs{display:grid;gap:6px}
.u-costs.wide{grid-template-columns:repeat(3,1fr)}
.uc{display:flex;align-items:center;gap:9px;background:var(--paper2);border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:13.5px}
.uc .ui{font-size:16px}.uc .ut{flex:1}
.uc .up{font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;background:#1c2a4a;color:var(--blue);white-space:nowrap}
.uc .up.free{background:var(--good-soft);color:var(--good)}
.u-cmp .lbl2{display:flex;justify-content:space-between;font-size:13px;color:var(--ink2);margin-top:8px}
.u-cmp .lbl2 b{color:var(--ink)}
.bar1{height:12px;border-radius:999px;background:var(--paper2);border:1px solid var(--line);overflow:hidden;margin-top:4px}
.bar1 i{display:block;height:100%;background:var(--ink3);border-radius:999px}
.bar1 i.hot{background:var(--hot);box-shadow:0 0 16px #3b82f6}
.u-x{text-align:center;font-size:26px;font-weight:850;letter-spacing:-.03em;margin:10px 0;background:var(--hot);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:900px){.ucard{grid-template-columns:1fr}.u-left{border-right:0;border-bottom:1px solid var(--line);padding:0 0 16px}.u-costs.wide{grid-template-columns:1fr 1fr}}
/* guide modal */
.ug-hero{text-align:center;padding:6px 10px 4px}
.ug-hero h2{margin:16px 0 6px;font-size:24px}
.ug-hero p{max-width:600px;margin:0 auto}
.ug-hero.win{padding:20px}.ug-boom{font-size:44px;margin-bottom:10px;animation:pop .5s}
@keyframes pop{from{transform:scale(.3);opacity:0}}
.ug-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:20px}
.ug-c{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--paper2);display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.ug-c p{margin:2px 0 10px;flex:1}
.ug-c.main{background:linear-gradient(180deg,#13254a,#0f1a33);border-color:#2e5bb8;box-shadow:0 0 0 1px #3b82f655,0 20px 40px -20px #3b82f6aa;transform:scale(1.03)}
.ug-i{font-size:28px}
.ug-c .badge{position:absolute;margin:-28px 0 0}
.ug-c.main{position:relative}
.ug-top{display:flex;justify-content:space-between;align-items:center;margin:0 36px 12px 0}
.ug-prog{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:18px}
.ug-prog div{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:var(--paper2);border:1px solid var(--line);color:var(--ink3);font-size:13px}
.ug-prog span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--chip);font-weight:800;font-size:12px;flex:none}
.ug-prog em{font-style:normal;font-weight:600}
.ug-prog .on{border-color:var(--accent);color:var(--ink);background:#10203f}
.ug-prog .on span{background:var(--accent);color:#fff}
.ug-prog .done{color:var(--good)} .ug-prog .done span{background:var(--good-soft);color:var(--good)}
.ug-step{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center}
.ug-txt h2{font-size:24px;margin:0 0 8px}
.ug-txt p{font-size:15.5px;color:var(--ink2);margin:0 0 16px}
.ug-tip{margin-top:16px;font-size:13.5px;background:var(--warn-soft);color:#fde68a;border:1px solid #4a3a12;border-radius:10px;padding:9px 12px}
.ug-mock{border-radius:14px;border:1px solid #2a3554;background:#f8fafc;color:#202124;overflow:hidden;box-shadow:0 30px 60px -30px #000}
.mk-bar{display:flex;gap:5px;align-items:center;background:#e8eaed;padding:7px 10px}
.mk-bar i{width:9px;height:9px;border-radius:50%;background:#c4c7cc}
.mk-bar span{margin-left:8px;font-size:11px;color:#5f6368;background:#fff;border-radius:6px;padding:2px 10px}
.mk-body{padding:18px 18px 14px;min-height:150px}
.mk-t{font-size:17px;font-weight:600;margin-bottom:12px}
.mk-s{font-size:12px;color:#5f6368}
.mk-f span{font-size:11px;color:#5f6368}
.mk-in{border:2px solid #1a73e8;border-radius:6px;padding:7px 10px;font-size:14px;margin-top:3px}
.mk-row{display:flex;gap:8px;margin-top:14px}
.mk-b{font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:6px;background:#1a73e8;color:#fff}
.mk-b.ghost{background:none;color:#1a73e8}
.mk-b.sm{padding:4px 10px}
.hl{animation:hlp 1.4s ease-in-out infinite}
@keyframes hlp{0%,100%{box-shadow:0 0 0 0 #fbbf24}50%{box-shadow:0 0 0 6px #fbbf2499}}
.mk-api{display:flex;gap:12px;align-items:center}
.mk-logo{width:44px;height:44px;border-radius:10px;background:#ff0000;color:#fff;display:grid;place-items:center;font-size:18px}
.mk-menu{margin-top:6px;width:190px;border-radius:8px;box-shadow:0 4px 14px #0003;background:#fff;font-size:13px;overflow:hidden}
.mk-menu div{padding:7px 12px}
.mk-menu .hl2{background:#e8f0fe;color:#1a73e8;font-weight:600;outline:2px solid #fbbf24}
.mk-key{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;border:1px solid #dadce0;border-radius:8px;padding:6px 8px}
.mk-key code{font-size:12px;color:#202124}
.mk-cap{font-size:11.5px;color:#5f6368;background:#eef1f5;padding:6px 12px;text-align:center}
.ug-mock.done{background:var(--paper2);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:16px;padding:30px 14px;border-color:var(--line)}
.ug-before{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;color:var(--ink2)}
.ug-before b{font-size:20px;color:var(--ink)}
.ug-arrow{font-size:26px;color:var(--blue)}
.ug-nav{display:flex;justify-content:space-between;margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
#ug-key{flex:1;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace}
@media(max-width:760px){.ug-step{grid-template-columns:1fr}.ug-prog em{display:none}.ug-prog div{justify-content:center}.ug-c.main{transform:none}.u-costs.wide{grid-template-columns:1fr}.qup{padding:6px 9px;font-size:12px}}
.ug-hero.win .btn{margin-top:18px}
.mob{display:none}
@media(max-width:860px){.dsk{display:none}.mob{display:inline}.qup{padding:6px 10px}.auth .cbtn{padding:7px 12px;font-size:13px}.switcher{flex:1 1 90px;min-width:80px}.switcher select{min-width:0}.quota.trial{display:none}}

/* ---------- upload helper (home) ---------- */
.up-card{max-width:980px;margin:26px auto 0;padding:24px 26px;border-radius:22px;border:1px solid #23345e;background:radial-gradient(600px 220px at 85% 0%,#1d3a7a55,transparent 70%),linear-gradient(180deg,#0f1628,#0c111e);box-shadow:var(--shadow2);position:relative}
.up-hd h2{margin:8px 0 4px;font-size:26px;letter-spacing:-.02em}
.up-hd p{margin:0 0 16px;max-width:640px}
.up-eye{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;padding:4px 10px;border-radius:999px;background:#13244a;color:var(--blue);border:1px solid #23407a}
.up-q{font-size:15px;font-weight:700;margin:4px 0 10px}
.up-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.up-choice{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;font:inherit;color:var(--ink);cursor:pointer;padding:18px;border-radius:16px;border:1px solid var(--line);background:var(--paper2);transition:transform .12s,border-color .15s,box-shadow .15s}
.up-choice:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 18px 40px -20px #3b82f6aa}
.up-choice b{font-size:17px}
.up-choice span{color:var(--ink2);font-size:14px}
.up-choice em{font-style:normal;color:var(--blue);font-weight:700;font-size:14px;margin-top:4px}
.up-ic{font-size:30px;line-height:1}
.up-choice .up-ic{font-size:32px;color:inherit}
.up-back{margin:-6px 0 6px -8px}
.up-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:2px}
.up-vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.up-vid{font:inherit;color:var(--ink);text-align:left;cursor:pointer;border:1px solid var(--line);background:var(--paper2);border-radius:12px;padding:6px}
.up-vid:hover{border-color:var(--accent)}
.up-vid img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:var(--chip);display:block}
.up-vhead{display:flex;gap:12px;align-items:center;margin:4px 0 12px}
.up-vhead img{width:110px;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:var(--chip)}
.up-vhead b{font-size:16px}
.up-sec{border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:12px;background:var(--paper)}
.up-sh{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:15px}
.up-n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:800}
.up-now{font-size:13.5px;color:var(--ink2);margin-bottom:8px}.up-now span{font-weight:700;color:var(--ink3);text-transform:uppercase;font-size:11px;letter-spacing:.06em;margin-right:6px}
.up-t{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-bottom:6px;background:var(--paper2)}
.up-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.up-th{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--paper2);display:flex;flex-direction:column;gap:4px}
.up-mock{aspect-ratio:16/9;border-radius:10px;background:radial-gradient(circle at 70% 40%,#5b3a1a,#1a1208 70%);display:flex;align-items:flex-end;padding:12px;margin-bottom:6px;overflow:hidden}
.up-mock span{font-size:26px;font-weight:900;line-height:1.05;color:#fde047;text-shadow:0 3px 0 #000,0 0 18px #000;letter-spacing:-.01em}
.up-foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
@media(max-width:760px){.up-choices{grid-template-columns:1fr}.up-card{padding:18px 16px}.up-hd h2{font-size:22px}.up-vids{grid-template-columns:1fr 1fr}}

/* units popup */
.mbox .ucard{margin:14px 0 0;box-shadow:none}
.uw-hd{text-align:center;padding:0 30px}
.uw-hd h2{font-size:24px;margin:0 0 6px}
.uw-hd p{margin:0 auto;max-width:620px}
.uw-foot{display:flex;justify-content:center;margin-top:16px}
.modal.locked{background:rgba(3,5,12,.9)}
/* locked tools (no key yet) */
body.is-locked .tabs button:not([data-tab=home]):not([data-tab=mychannel]):not([data-tab=settings])::after{content:"🔒";margin-left:auto;font-size:11px;opacity:.75}
body.is-locked .tabs button .new{display:none}
.ug-lock{font-size:46px;line-height:1;filter:drop-shadow(0 6px 18px #3b82f688)}
.ug-unlocks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 4px}
.ug-unlocks div{display:flex;gap:9px;align-items:center;font-size:13.5px;background:var(--paper2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.ug-unlocks span{font-size:17px}
.ug-later{display:flex;justify-content:center;margin-top:12px}
.ug-big{font-size:34px}
.uw-steps{display:grid;gap:12px;margin:18px 0 0}
.uw-s{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--paper2);opacity:.8}
.uw-s.on{opacity:1;border-color:#2e5bb8;background:linear-gradient(180deg,#13254a,#0f1a33);box-shadow:0 0 0 1px #3b82f655}
.uw-s.done{opacity:1}
.uw-s b{font-size:16px}
.uw-s p{margin:3px 0 10px}
.uw-n{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--chip);font-weight:800}
.uw-s.on .uw-n{background:var(--accent);color:#fff}
.uw-s.done .uw-n{background:var(--good-soft);color:var(--good)}
@media(max-width:760px){.ug-unlocks{grid-template-columns:1fr}}

/* ---------- settings: step by step ---------- */
#tab-settings{max-width:900px;margin:0 auto}
.st-progress{border:1px solid #23345e;border-radius:18px;padding:16px 18px;margin-bottom:16px;background:radial-gradient(500px 160px at 90% 0%,#1d3a7a44,transparent 70%),linear-gradient(180deg,#0f1628,#0c111e)}
.stp-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.stp-top b{font-size:17px}
.stp-bar{flex:0 1 260px;height:10px;border-radius:999px;background:var(--paper2);border:1px solid var(--line);overflow:hidden}
.stp-bar i{display:block;height:100%;background:var(--hot);border-radius:999px;transition:width .6s}
.stp-steps{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.stp-steps a{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 7px;border-radius:999px;border:1px solid var(--line);background:var(--paper2);color:var(--ink2);font-size:13.5px;font-weight:600;text-decoration:none!important}
.stp-steps a span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--chip);font-size:13px}
.stp-steps a em{font-style:normal;font-weight:500;font-size:11px;color:var(--ink3)}
.stp-steps a.on{border-color:var(--accent);color:var(--ink);background:#10203f}
.stp-steps a.on span{background:var(--accent);color:#fff}
.stp-steps a.done{color:var(--good)} .stp-steps a.done span{background:var(--good-soft);color:var(--good);font-weight:800}
.stp-line{flex:0 0 18px;height:2px;background:var(--line)}
.st-card{border:1px solid var(--line);border-radius:18px;padding:16px 18px;margin-bottom:12px;background:linear-gradient(180deg,#0f1526,#0c111e)}
.st-card.current{border-color:#2e5bb8;box-shadow:0 0 0 1px #3b82f655,0 20px 40px -24px #3b82f6aa}
.st-head{display:flex;gap:14px;align-items:flex-start}
.st-n{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--chip);font-weight:800;font-size:15px}
.st-card.current .st-n{background:var(--accent);color:#fff}
.st-card.done .st-n{background:var(--good-soft);color:var(--good)}
.st-ht{flex:1;min-width:0}
.st-ht h3{margin:4px 0 2px;font-size:17px}
.st-ht p{margin:0;color:var(--ink2);font-size:14px}
.st-opt{font-size:11px;font-weight:700;color:var(--ink3);border:1px solid var(--line);border-radius:999px;padding:1px 8px;vertical-align:middle;margin-left:6px}
.st-badge{display:flex;gap:6px;align-items:center;flex:none}
.st-body{margin:14px 0 0 50px}
.st-card.done .st-body{display:none}
.st-card.done.open .st-body{display:block}
.st-ok{display:flex;align-items:center;gap:12px;background:var(--good-soft);border:1px solid #1e5a3a;border-radius:12px;padding:10px 12px;margin-bottom:12px}
.st-ok>div{flex:1}
.st-status .st-ok{margin:12px 0 0 50px}
.st-emoji{font-size:26px}
.st-big{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid #2e5bb8;background:linear-gradient(180deg,#13254a,#0f1a33);border-radius:14px;padding:14px;margin-bottom:14px}
.st-bigl{display:flex;gap:12px;align-items:center}
.st-tips{display:grid;gap:6px;margin:14px 0 8px}
.st-tips div{display:flex;gap:10px;align-items:center;font-size:13.5px;background:var(--paper2);border-radius:10px;padding:8px 10px}
.st-tips div>b:first-child,.st-m b{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:7px;background:var(--accent);color:#fff;font-size:12px}
.st-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 12px}
.st-m{display:flex;gap:8px;align-items:center;font-size:13.5px;background:var(--paper2);border:1px solid var(--line);border-radius:10px;padding:9px 10px;color:var(--ink);text-decoration:none!important}
a.st-m:hover{border-color:var(--accent)}
.st-sec{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);margin:24px 4px 10px}
.st-card.flat{background:var(--paper)}
.st-chs{display:grid;gap:8px}
.st-ch{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--paper2)}
.st-ch.on{border-color:var(--accent);background:#10203f}
.st-cht{flex:1;min-width:0}.st-cht .ok{color:var(--good)}
.st-edit{margin-top:12px}
.st-acct{display:flex;gap:12px;align-items:center}
.st-danger{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.st-danger summary,.st-more summary{cursor:pointer;font-weight:600}
.st-danger summary{color:var(--bad);font-size:13.5px}
.btn.danger{color:var(--bad);border-color:#5a1e26}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
@media(max-width:760px){.st-body{margin-left:0}.st-status .st-ok{margin-left:0}.st-mini{grid-template-columns:1fr}.stp-line{display:none}.st-head{flex-wrap:wrap}.st-badge{width:100%;padding-left:50px}}