:root{color-scheme:dark;--bg:#08090d;--panel:#141820;--panel2:#1d2430;--line:#2f3848;--text:#f7f7fb;--muted:#9ba8ba;--red:#ff2938;--yellow:#ffd029;--cyan:#2fe6d0;--green:#53e88b;--pink:#ff4f94;--shadow:0 24px 80px rgba(0,0,0,.36)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;max-width:100%;min-height:100%;overflow-x:hidden}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);letter-spacing:0}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app-shell{width:min(1180px,100%);margin:0 auto;padding:12px 12px 28px;overflow-x:hidden}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:64px;padding:8px 0;background:linear-gradient(180deg,#08090d 72%,rgba(8,9,13,0));backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:9px;border:0;background:transparent;color:var(--text);min-width:0;text-align:left}
.brand strong,.brand small{display:block}.brand strong{font-weight:950}.brand small{color:var(--muted);font-size:.72rem}
.brand-mark{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),var(--pink) 54%,var(--yellow));box-shadow:0 12px 30px rgba(255,41,56,.3)}
.brand-mark span{width:18px;height:18px;border-radius:5px;background:#08090d;position:relative}.brand-mark span:after{content:"";position:absolute;left:6px;top:4px;border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}
.topnav{display:flex;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(20,24,32,.84);min-width:0}
.topnav button{border:0;border-radius:7px;background:transparent;color:var(--muted);font-weight:900;min-height:36px;padding:0 10px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}.topnav button.is-active{background:var(--text);color:#10131a}
.view,.step-panel{display:none}.view{max-width:100%;overflow-x:hidden}.view.is-active,.step-panel.is-active{display:block}
.hero{position:relative;min-height:calc(100svh - 94px);display:grid;align-items:end;padding:30px 0 26px;overflow:hidden;max-width:100%}
.hero-media{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center;justify-items:center;opacity:.72;filter:saturate(1.12)}
.before-phone,.after-phone{position:relative;width:min(42vw,250px);aspect-ratio:9/16;border:1px solid rgba(255,255,255,.18);border-radius:26px;overflow:hidden;background:#111;box-shadow:0 30px 90px rgba(255,41,56,.22)}
.before-phone{transform:rotate(-4deg) translateY(34px);opacity:.55}.after-phone{transform:rotate(5deg) translateY(-18px);border-color:rgba(255,41,56,.45)}
.before-phone>span,.after-phone>span{position:absolute;z-index:2;top:12px;left:12px;letter-spacing:.18em;font-size:.66rem;color:rgba(255,255,255,.72);font-weight:900}
.avatar-scene{position:absolute;inset:0;background:radial-gradient(circle at 50% 25%,#ff6c7b 0 4%,transparent 5%),linear-gradient(180deg,#301017,#151820 44%,#090b0f)}
.avatar-scene:before{content:"";position:absolute;left:50%;top:31%;transform:translateX(-50%);width:38%;aspect-ratio:1;border-radius:50%;background:linear-gradient(#f5c2a4,#8f563f);box-shadow:0 92px 0 45px #222b35}
.avatar-scene.edited:after{content:"";position:absolute;left:0;right:0;bottom:0;height:48%;background:linear-gradient(0deg,rgba(255,41,56,.24),transparent)}
.avatar-scene b{position:absolute;left:10px;right:10px;top:16%;z-index:3;text-align:center;font-size:.86rem;line-height:1.05;color:#2fe6d0;text-shadow:0 3px 0 #000,0 0 16px rgba(47,230,208,.9)}
.avatar-scene em{position:absolute;left:12px;right:12px;bottom:20%;z-index:3;text-align:center;font-style:normal;font-weight:950;color:#fff;text-shadow:0 3px 0 #000}
.hero-copy{position:relative;z-index:4;max-width:760px;padding-top:42svh}.hero-copy *{max-width:100%}.eyebrow{color:var(--cyan);font-weight:950;text-transform:uppercase;font-size:.76rem;letter-spacing:.12em}
h1{margin:0;font-size:clamp(2.4rem,7.2vw,5.8rem);line-height:.94;max-width:900px}h2{margin:0;font-size:1.12rem;line-height:1.15}
.hero-copy p:not(.eyebrow){max-width:650px;color:#c8d0dd;font-size:1.05rem;line-height:1.55;overflow-wrap:anywhere}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.primary-action,.secondary-action,.ghost-action{min-height:48px;border-radius:8px;font-weight:950;border:0;padding:0 16px}.primary-action{background:var(--red);color:white;box-shadow:0 16px 35px rgba(255,41,56,.26)}.primary-action:disabled{opacity:.48;cursor:not-allowed}.secondary-action{background:#202734;color:var(--text);border:1px solid var(--line)}.ghost-action{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.16)}
.feature-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 22px}.feature-band article,.panel,.preview-stage,.timeline-panel,.wizard-card,.campaign-preview{border:1px solid rgba(255,255,255,.09);border-radius:8px;background:rgba(20,24,32,.92);box-shadow:var(--shadow)}.feature-band article{padding:16px}.feature-band strong,.feature-band span{display:block}.feature-band span{color:var(--muted);font-size:.9rem;margin-top:7px;line-height:1.4}
.stepper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:10px 0 12px;padding:5px;border-radius:8px;background:#10131a;border:1px solid rgba(255,255,255,.09)}.step{border:0;border-radius:7px;background:transparent;color:var(--muted);min-height:42px;font-weight:900}.step span{display:block;font-size:.68rem}.step.is-active{background:#fff;color:#111820}
.panel{padding:14px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.badge{display:inline-flex;align-items:center;min-height:30px;padding:0 9px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#202633;color:var(--muted);font-size:.75rem;font-weight:900;white-space:nowrap}
.dropzone{display:grid;place-items:center;text-align:center;min-height:250px;border:1px dashed rgba(255,255,255,.22);border-radius:8px;background:linear-gradient(140deg,rgba(255,41,56,.1),rgba(47,230,208,.08));padding:20px}.dropzone input{position:absolute;width:1px;height:1px;opacity:0}.upload-icon{width:50px;height:50px;border-radius:8px;background:#0e1118;border:1px solid var(--line);position:relative}.upload-icon:before{content:"";position:absolute;left:18px;top:13px;border-bottom:16px solid var(--yellow);border-left:8px solid transparent;border-right:8px solid transparent}.dropzone strong{margin-top:12px}.dropzone small{color:var(--muted)}
.analysis-screen{min-height:70svh;display:grid;align-content:center;justify-items:center;text-align:center;gap:16px}.scan-phone{position:relative;width:min(72vw,270px);aspect-ratio:9/16;border:8px solid #05070a;border-radius:26px;overflow:hidden;background:#121721}.scan-phone video{width:100%;height:100%;object-fit:cover}.scan-line{position:absolute;left:0;right:0;height:2px;top:18%;background:var(--red);box-shadow:0 0 24px var(--red);animation:scan 2.2s ease-in-out infinite}.progress{width:min(270px,80vw);height:5px;border-radius:999px;background:#2b313d;overflow:hidden}.progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--red),var(--cyan));transition:width .3s ease}@keyframes scan{50%{top:82%}}
.analysis-grid,.editor-grid,.ads-wizard{display:grid;gap:12px}.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.metrics div{padding:12px;border-radius:8px;background:var(--panel2)}.metrics small,.field span{display:block;color:var(--muted);font-size:.74rem;font-weight:850}.metrics strong{display:block;margin-top:4px}.transcript{color:#c8d0dd;line-height:1.5;margin-bottom:0}
.hook-list{display:grid;gap:8px}.hook-card{border:1px solid var(--line);background:#10151f;color:var(--text);border-radius:8px;min-height:76px;padding:10px;text-align:left}.hook-card.is-selected{border-color:var(--red);background:rgba(255,41,56,.12)}.hook-card strong,.hook-card small{display:block}.hook-card small{color:var(--muted);margin-top:5px}
.field{display:grid;gap:7px;margin-top:11px}textarea,select,input[type=text],input[type=number],input[type=url]{width:100%;border:1px solid var(--line);border-radius:8px;background:#0d1118;color:var(--text);min-height:43px;padding:10px}textarea{resize:vertical;line-height:1.35}
.preview-stage{padding:14px;display:grid;gap:12px;justify-items:center}.phone-frame{position:relative;width:min(100%,300px);aspect-ratio:9/16;border:8px solid #05070a;border-radius:26px;overflow:hidden;background:#10141c;box-shadow:0 24px 70px rgba(0,0,0,.48)}.phone-frame video{width:100%;height:100%;object-fit:cover}.preview-overlay{position:absolute;inset:0;display:grid;align-content:start;padding:22px 12px;pointer-events:none}.preview-overlay strong{text-align:center;color:#fff;text-shadow:0 3px 0 #000,0 0 18px rgba(255,41,56,.75);font-size:1rem;line-height:1.05}.preview-overlay span{position:absolute;left:12px;right:12px;bottom:18%;text-align:center;font-weight:950;color:var(--cyan);text-shadow:0 3px 0 #000,0 0 16px rgba(47,230,208,.85);font-size:1.15rem}
.controls-panel{align-self:start}.toggle-row{display:grid;gap:9px;margin:12px 0}.toggle-row label{display:flex;gap:8px;align-items:center;color:#d4dbea;font-weight:850}.timeline-panel{margin-top:12px;padding:12px}.timeline{display:grid;gap:8px}.timeline-item{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;min-height:46px;padding:9px;border-radius:8px;background:#10151f;border:1px solid var(--line)}.timeline-item time{color:var(--cyan);font-weight:950;font-size:.78rem}.timeline-item small{color:var(--muted)}.sticky-action{width:100%;margin-top:12px}
.export-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.export-card{min-height:88px;border:1px solid var(--line);background:#10151f;color:var(--text);border-radius:8px;text-align:left;padding:12px}.export-card span{display:block;margin-top:10px;color:var(--green);font-weight:900;font-size:.8rem}.export-card.is-selected{border-color:var(--yellow);background:rgba(255,208,41,.1)}.export-card.wide{grid-column:1/-1}.process-result{margin-top:12px;border-radius:8px;border:1px solid var(--line);background:#111720;padding:12px}.process-result.is-error{border-color:var(--pink)}.process-result small{display:block;color:var(--muted);margin-top:4px}.download-button{display:flex;align-items:center;justify-content:center;min-height:42px;margin-top:10px;border-radius:8px;background:var(--green);color:#06110a;text-decoration:none;font-weight:950}.download-button[hidden]{display:none}
.dev-banner{display:inline-flex;margin:8px 0 12px;padding:8px 10px;border-radius:999px;background:rgba(255,208,41,.12);border:1px solid rgba(255,208,41,.35);color:var(--yellow);font-weight:950}.ads-wizard{grid-template-columns:minmax(0,1fr)}.wizard-card,.campaign-preview{padding:14px}.wizard-options{display:grid;gap:9px}.wizard-option{border:1px solid var(--line);background:#10151f;color:var(--text);border-radius:8px;min-height:56px;text-align:left;padding:11px}.wizard-option.is-selected{border-color:var(--cyan);background:rgba(47,230,208,.1)}.wizard-fields{display:grid;gap:10px}.wizard-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.campaign-preview{align-self:start}.campaign-preview h2{margin-bottom:12px}.summary-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08)}.summary-row span{color:var(--muted);font-size:.78rem}.summary-row strong{text-align:right}
@media(min-width:820px){.app-shell{padding:18px 18px 34px}.hero{min-height:760px}.hero-copy{padding-top:270px}.analysis-grid{grid-template-columns:1fr 1.15fr}.editor-grid{grid-template-columns:minmax(330px,1fr) 360px}.ads-wizard{grid-template-columns:minmax(0,1fr) 320px}.option-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.app-shell{padding-left:10px;padding-right:10px}.topbar{display:grid;grid-template-columns:1fr;align-items:start}.topnav{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden}.topnav button{font-size:.76rem;padding:0 5px}.feature-band{grid-template-columns:1fr}.hero-media{grid-template-columns:1fr;justify-items:end;opacity:.42}.before-phone{display:none}.after-phone{width:min(52vw,198px);transform:rotate(5deg) translateY(-70px) translateX(8px)}.hero-copy{padding-top:42svh;width:100%;max-width:100%}h1{font-size:2rem;line-height:1.02;overflow-wrap:break-word}.hero-copy p:not(.eyebrow){font-size:.96rem}.hero-actions{display:grid}.stepper{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics{grid-template-columns:1fr}.export-grid{grid-template-columns:1fr}.wizard-actions{grid-template-columns:1fr}}