/* Sellmiro v2 — simple, calm, one thing at a time (Derja, RTL). Brand: forest green on warm sand, no orange. */
:root{
  --paper:#f4f1e8; --panel:#fffdf8; --sunk:#ece7da; --line:#e0d9c8; --line-2:#cbc2ad;
  --ink:#1b211e; --ink-2:#56605a; --ink-3:#8a928c;
  --accent:#1f6f55; --accent-2:#2c8a6a; --accent-ink:#fff; --accent-soft:#dcece3; --leaf:#8fbf6a; --sun:#e8c547;
  --bad:#c0392b; --bad-soft:#f8e1dd; --ok:#1f8a4c;
  --r:18px; --r-sm:12px; --shadow:0 1px 2px rgba(30,40,30,.06),0 8px 24px rgba(30,40,30,.07);
  --font:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0f1512; --panel:#151d19; --sunk:#1c2621; --line:#26332c; --line-2:#3a4a41;
  --ink:#e9efea; --ink-2:#a9b5ad; --ink-3:#77837b; --accent:#3fa37e; --accent-2:#4cb58e; --accent-soft:#17352a;
  --bad:#e06b5e; --bad-soft:#3a1d1a; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0f1512; --panel:#151d19; --sunk:#1c2621; --line:#26332c; --line-2:#3a4a41;
  --ink:#e9efea; --ink-2:#a9b5ad; --ink-3:#77837b; --accent:#3fa37e; --accent-2:#4cb58e; --accent-soft:#17352a;
  --bad:#e06b5e; --bad-soft:#3a1d1a; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--accent)}
.hidden{display:none!important}
.muted{color:var(--ink-3)}
.small{font-size:13px}
.mono{font-family:ui-monospace,Consolas,monospace;direction:ltr;unicode-bidi:isolate}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 20px;
  background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:19px;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.brand i{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--leaf));display:inline-block}
.brand small{font-size:11px;font-weight:700;padding:2px 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent)}
.top nav{display:flex;gap:4px;margin-inline-start:14px}
.top nav a{padding:7px 12px;border-radius:99px;text-decoration:none;color:var(--ink-2);font-weight:600}
.top nav a.on,.top nav a:hover{background:var(--sunk);color:var(--ink)}
.top .sp{flex:1}
.chip-cost{font-size:13px;padding:5px 10px;border-radius:99px;background:var(--sunk);color:var(--ink-2)}
.me{position:relative}
.me>button{width:34px;height:34px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);font-weight:800;cursor:pointer}
.menu{position:absolute;inset-inline-end:0;top:42px;min-width:210px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:var(--shadow);padding:6px;display:none}
.menu.open{display:block}
.menu button,.menu a{display:block;width:100%;text-align:start;padding:9px 10px;border:0;background:none;border-radius:8px;cursor:pointer;text-decoration:none;color:var(--ink)}
.menu button:hover,.menu a:hover{background:var(--sunk)}

main{max-width:1180px;margin:0 auto;padding:24px 20px 120px;overflow-x:clip}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:999px;border:1.5px solid var(--line-2);
  background:var(--panel);cursor:pointer;font-weight:700;transition:transform .08s,background .15s,box-shadow .15s;white-space:nowrap;text-decoration:none;color:var(--ink);
  box-shadow:0 1px 0 var(--line),0 2px 6px rgba(30,40,30,.06);min-height:40px}
.btn:hover{background:var(--sunk)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 30%,transparent)}
.btn.primary:hover{background:var(--accent-2)}
.btn.big{padding:15px 26px;font-size:17px}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--sunk)}
.btn.sm{padding:7px 12px;font-size:13px}
.btn.danger{color:var(--bad)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn.loading{pointer-events:none;opacity:.8}
.btn.loading::before{content:"";width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.price{font-size:12px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--sunk);color:var(--ink-2)}
.btn.primary .price{background:rgba(255,255,255,.2);color:#fff}

/* ---------- cards & form ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.card+.card{margin-top:16px}
h1{font-size:28px;line-height:1.25;margin:0 0 6px;letter-spacing:-.01em}
h2{font-size:19px;margin:0 0 4px}
h3{font-size:15px;margin:0 0 8px}
.lead{color:var(--ink-2);margin:0 0 20px;font-size:16px}
label.f{display:block;font-weight:700;margin:16px 0 6px}
label.f small{font-weight:400;color:var(--ink-3)}
input.in,textarea.in,select.in{width:100%;border:1px solid var(--line-2);background:var(--paper);border-radius:var(--r-sm);padding:11px 13px;outline:none;transition:border .15s,box-shadow .15s}
input.in:focus,textarea.in:focus,select.in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea.in{min-height:110px;resize:vertical;line-height:1.7}
textarea.script{min-height:220px;font-size:16px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hint{font-size:13px;color:var(--ink-3);margin:6px 0 0}
.note{padding:10px 14px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--ink);font-size:14px;margin-top:12px}
.note.bad{background:var(--bad-soft)}

/* chips (single choice) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{padding:8px 14px;border-radius:99px;border:1px solid var(--line-2);background:var(--panel);cursor:pointer;font-weight:600;font-size:14px}
.chips button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chips button:hover:not(.on){background:var(--sunk)}

/* toggle */
.tog{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;background:var(--paper)}
.tog+.tog{margin-top:8px}
.tog input{appearance:none;flex:none;width:40px;height:24px;border-radius:99px;background:var(--line-2);position:relative;cursor:pointer;margin:2px 0 0;transition:background .15s}
.tog input::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:inset-inline-start .15s}
.tog input:checked{background:var(--accent)}
.tog input:checked::after{inset-inline-start:19px}
.tog b{display:block}
.tog small{color:var(--ink-3)}

/* ---------- auth ---------- */
.auth{min-height:calc(100vh - 140px);display:grid;place-items:center}
.auth .card{width:min(420px,100%);padding:28px}
.auth h1{text-align:center}
.auth .lead{text-align:center}
.auth .tabs2{display:flex;background:var(--sunk);border-radius:99px;padding:4px;margin-bottom:6px}
.auth .tabs2 button{flex:1;border:0;background:none;padding:8px;border-radius:99px;font-weight:700;cursor:pointer;color:var(--ink-2)}
.auth .tabs2 button.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}

/* ---------- home ---------- */
.hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px;border-radius:24px;margin-bottom:26px;
  background:radial-gradient(120% 140% at 100% 0%,var(--accent-soft),transparent 60%),var(--panel);border:1px solid var(--line)}
.hero h1{font-size:30px}
.hero p{margin:0;color:var(--ink-2);font-size:16px;max-width:560px}
.crew{display:flex;gap:6px;font-size:26px;margin-top:12px}
.sec-t{display:flex;align-items:baseline;justify-content:space-between;margin:26px 0 12px}
.sec-t h2{font-size:18px}
.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:transform .12s,box-shadow .12s;text-align:start;padding:0}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.pcard .cv{aspect-ratio:4/3;background:var(--sunk) center/cover no-repeat;display:grid;place-items:center;font-size:34px;color:var(--ink-3)}
.pcard .b{padding:12px 14px}
.pcard b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard small{color:var(--ink-3)}
.badge-run{display:inline-block;font-size:11px;padding:2px 8px;border-radius:99px;background:var(--sun);color:#3a2f00;font-weight:700;margin-inline-start:6px}
.empty{padding:40px;text-align:center;color:var(--ink-3);border:2px dashed var(--line);border-radius:var(--r)}

/* videos grid */
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.vcard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;cursor:pointer;padding:0;text-align:start}
.vcard .cv{aspect-ratio:9/16;background:#111 center/cover no-repeat;display:grid;place-items:center;color:#fff;font-size:13px}
.vcard .b{padding:8px 10px}
.vcard b{display:block;font-size:13px;line-height:1.4;max-height:2.8em;overflow:hidden}
.vcard small{color:var(--ink-3);font-size:12px}
.vcard .st{position:absolute;top:8px;inset-inline-start:8px;font-size:11px;padding:2px 8px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff}
.vcard .x{position:absolute;top:6px;inset-inline-end:6px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;opacity:0;transition:opacity .15s}
.vcard:hover .x{opacity:1}
.tabs-h{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}

/* ---------- wizard ---------- */
.wiz{max-width:820px;margin:0 auto}
/* wizard: small steps — a scrollable bar (up to 10 steps), the current one always in view */
.wtop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.steps{display:flex;gap:6px;margin:0 0 22px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.steps::-webkit-scrollbar{display:none}
.steps button{flex:1 0 auto;min-width:76px;border:0;background:none;padding:0;cursor:pointer;text-align:start;color:var(--ink-3)}
.steps button i{display:block;height:5px;border-radius:99px;background:var(--line);margin-bottom:7px;transition:background .2s}
.steps button span{font-size:12.5px;font-weight:700;white-space:nowrap}
.steps button em{font-style:normal}
.steps button.done i,.steps button.on i{background:var(--accent)}
.steps button.on{color:var(--ink)}
.steps button[disabled]{cursor:default}
.wbar{position:fixed;left:0;right:0;bottom:0;z-index:15;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.wbar .in{max-width:820px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:12px}
.wbar .sp{flex:1}
.wbar .why{font-size:13px;color:var(--ink-3)}

/* drop zone + media */
.drop{display:flex;align-items:center;gap:16px;padding:26px;border:2px dashed var(--line-2);border-radius:var(--r);cursor:pointer;background:var(--paper);transition:border .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop .ic{font-size:30px}
.drop b{display:block;font-size:16px}
.drop small{color:var(--ink-3)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:14px}
.th{position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:var(--sunk)}
.th img,.th video{width:100%;height:100%;object-fit:cover;display:block}
.th .k{position:absolute;bottom:5px;inset-inline-start:5px;font-size:10px;padding:1px 6px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff}
.th .x{position:absolute;top:5px;inset-inline-end:5px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;line-height:1}

/* mode cards */
.modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.mode{position:relative;text-align:start;padding:16px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--panel);cursor:pointer;transition:border .15s,transform .1s}
.mode:hover{border-color:var(--line-2)}
.mode.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.mode .e{font-size:26px}
.mode b{display:block;font-size:15px;margin:4px 0 2px}
.mode small{display:block;color:var(--ink-2);font-size:13px;line-height:1.5}
.mode .p{position:absolute;top:14px;inset-inline-end:14px;font-size:11px;font-weight:700;color:var(--ink-3)}
.mode.on::after{content:"✓";position:absolute;bottom:12px;inset-inline-end:14px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:13px;display:grid;place-items:center}

/* the product understanding card */
.sheet{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line);margin-bottom:16px}
.sheet .a{font-size:24px}
.sheet ul{margin:6px 0 0;padding-inline-start:18px;color:var(--ink-2);font-size:13px}
.facts label{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:6px 0;cursor:pointer}
.facts small{color:var(--ink-3)}

/* segmented tabs */
.seg{display:inline-flex;background:var(--sunk);border-radius:99px;padding:4px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:8px 16px;border-radius:99px;font-weight:700;cursor:pointer;color:var(--ink-2)}
.seg button.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}

/* voices */
.voices{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px}
.vp{display:flex;align-items:center;gap:10px;padding:10px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--panel);cursor:pointer;text-align:start}
.vp.on{border-color:var(--accent);background:var(--accent-soft)}
.vp .av{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff}
.vp .av.f{background:linear-gradient(135deg,#b06aa8,#e08aa0)}
.vp .av.m{background:linear-gradient(135deg,#3f6fa8,#5fb0c8)}
.vp b{display:block;font-size:14px}
.vp small{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.35}
.vp .pl{margin-inline-start:auto;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);background:var(--paper);cursor:pointer;flex:none;font-size:11px}
.player{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:var(--r-sm);background:var(--accent-soft)}
.player audio{flex:1;height:36px;min-width:0}
.counter{font-size:12.5px;color:var(--ink-3);margin-top:4px}
.counter.warn{color:var(--bad)}
.rec{display:flex;align-items:center;gap:10px}
.rec .dot{width:10px;height:10px;border-radius:50%;background:var(--bad);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}

/* faces */
.faces{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.face{width:84px;aspect-ratio:3/4;border-radius:var(--r-sm);overflow:hidden;border:2px solid transparent;cursor:pointer;padding:0;background:var(--sunk)}
.face img{width:100%;height:100%;object-fit:cover;display:block}
.face.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.face.add{display:grid;place-items:center;font-size:24px;color:var(--ink-3);border:2px dashed var(--line-2)}

/* review */
.kv{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border:0}
.kv span{color:var(--ink-3)}
.kv b{text-align:end}
.est{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-radius:var(--r-sm);background:var(--paper);margin-top:14px}
.est b{font-size:22px}
details.adv{margin-top:16px}
details.adv summary{cursor:pointer;font-weight:700;color:var(--ink-2)}

/* ---------- progress ---------- */
.prog{max-width:640px;margin:20px auto;text-align:center}
.prog .big{font-size:56px;line-height:1}
.prog h1{margin-top:12px}
.bar{height:10px;border-radius:99px;background:var(--sunk);overflow:hidden;margin:18px 0 8px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--leaf));border-radius:99px;transition:width .6s}
.stages{display:flex;justify-content:space-between;gap:6px;margin:20px 0;text-align:center}
.stages div{flex:1;font-size:12px;color:var(--ink-3)}
.stages div i{display:block;font-size:24px;font-style:normal;filter:grayscale(1);opacity:.45;transition:all .3s}
.stages div.on{color:var(--ink);font-weight:700}
.stages div.on i,.stages div.done i{filter:none;opacity:1}
.stages div.on i{animation:bob 1.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px)}}
.log{max-height:160px;overflow:auto;text-align:start;font-size:12.5px;color:var(--ink-3);background:var(--paper);border-radius:var(--r-sm);padding:10px 12px;white-space:pre-wrap;margin-top:14px}
.gens{display:flex;gap:8px;overflow-x:auto;padding:6px 0;margin-top:10px}
.gens img{height:120px;border-radius:10px;flex:none}

/* ---------- studio ---------- */
.studio{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:24px;align-items:start}
.studio>*{min-width:0}
.stage{position:sticky;top:76px;min-width:0}
.phone{position:relative;margin:0 auto;border-radius:26px;overflow:hidden;background:#000;box-shadow:0 20px 50px rgba(0,0,0,.25);border:6px solid #111}
.phone video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.phone .ov{position:absolute;inset:0}
.phone .tag{position:absolute;top:10px;inset-inline-start:10px;z-index:3;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--sun);color:#3a2f00}
.ctrl{display:flex;align-items:center;gap:8px;margin-top:10px;direction:ltr}
.ctrl input[type=range]{flex:1;accent-color:var(--accent)}
.side h1{font-size:22px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}
.ptabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:16px;scrollbar-width:none}
.ptabs button{border:0;background:none;padding:10px 14px;font-weight:700;color:var(--ink-3);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.ptabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.dirty{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--sun) 30%,var(--panel));margin-bottom:14px}
.dirty .sp{flex:1}
.chat{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto;padding:4px}
.msg{max-width:88%;padding:10px 14px;border-radius:16px;background:var(--sunk);white-space:pre-wrap}
.msg.me{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-end-end-radius:4px}
.msg.ai{align-self:flex-start;border-end-start-radius:4px}
.msg .ops{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.ask{display:flex;gap:8px;margin-top:12px}
.ask textarea{min-height:52px;flex:1}
.ideas{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.ideas button{font-size:12.5px;padding:6px 11px;border-radius:99px;border:1px solid var(--line-2);background:var(--panel);cursor:pointer}
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.theme{padding:12px;border-radius:var(--r-sm);border:1.5px solid var(--line);cursor:pointer;text-align:center;font-weight:800;color:#fff;min-height:64px;display:grid;place-items:center}
.theme.on{outline:3px solid var(--accent);outline-offset:2px}
.hl{display:grid;grid-template-columns:32px 1fr 110px 34px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.hl .n{font-size:12px;color:var(--ink-3);text-align:center}
.hl input,.hl select{padding:8px 10px}
.hooks label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);margin-top:8px;cursor:pointer}
.hooks small{display:block;color:var(--ink-3)}

/* toast + dialog */
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:99px;font-weight:600;box-shadow:var(--shadow);max-width:calc(100% - 32px);text-align:center;animation:up .2s}
.toast.bad{background:var(--bad);color:#fff}
@keyframes up{from{transform:translate(-50%,10px);opacity:0}}
.dlg{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px}
.dlg .card{width:min(440px,100%)}
.lb{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.85);display:grid;place-items:center;padding:20px;cursor:zoom-out}
.lb img,.lb video{max-width:100%;max-height:90vh;border-radius:12px}

@media (max-width:900px){
  .studio{grid-template-columns:minmax(0,1fr)}
  .stage{position:static}
  .phone{max-width:min(340px,100%)!important}
}
@media (max-width:640px){
  .phone{max-width:min(250px,100%)!important;border-width:4px;border-radius:20px}
}
@media (max-width:640px){
  main{padding:16px 16px 120px}
  .top{padding:10px 16px}
  .top nav{display:none}
  .hero{flex-direction:column;align-items:flex-start;padding:22px}
  .grid2{grid-template-columns:1fr}
  .themes{grid-template-columns:repeat(2,1fr)}
  .hl{grid-template-columns:26px 1fr 34px}
  .hl select{grid-column:2}
  h1{font-size:24px}
}

/* changed scene shown before the export, picture/clip previews in the chat, versions */
.phone .mov{position:absolute;inset:0;z-index:1;background:#000}
.phone .mov img,.phone .mov video{width:100%;height:100%;object-fit:cover;display:block}
.phone .ov{z-index:2}
.phone .tag{z-index:3}
.pv{margin-top:10px}
.pv img,.pv video{display:block;max-width:220px;max-height:300px;border-radius:12px;cursor:zoom-in;box-shadow:var(--shadow)}
.vers{display:flex;flex-direction:column;gap:8px}
.ver{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
.ver>span{flex:1;min-width:0;font-size:14px}
.ver.cur{border-color:var(--accent);background:var(--accent-soft)}
.ver .vn{font-size:18px}

/* the timeline of scenes + the scene panel */
.tlwrap{margin-top:12px;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.tlhead{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.tl{position:relative;display:flex;gap:4px;overflow-x:auto;padding-bottom:6px;direction:ltr}
.tlb{position:relative;height:84px;border:2px solid transparent;border-radius:10px;overflow:hidden;padding:0;cursor:pointer;background:var(--sunk)}
.tlb img{width:100%;height:100%;object-fit:cover;display:block}
.tlb .n{position:absolute;top:4px;left:4px;font-size:11px;font-weight:700;padding:1px 6px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff}
.tlb .d{position:absolute;bottom:4px;right:4px;font-size:10px;padding:1px 5px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff}
.tlb .k{position:absolute;bottom:4px;left:4px;font-size:10px;color:#fff;text-shadow:0 0 3px #000}
.tlb.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tlb.chg::after{content:"";position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 2px #fff}
.tl .ph{position:absolute;top:0;bottom:6px;width:2px;background:var(--bad);pointer-events:none;left:0}
.scm{margin-top:10px}
.scm img,.scm video{display:block;max-width:100%;max-height:260px;border-radius:12px;background:#000}
#scLib .th{border:2px solid transparent;cursor:pointer;padding:0}
#scLib .th.cur{border-color:var(--accent)}

/* ---- the montage editor (CapCut-like): video | inspector, multi-track timeline below ---- */
.studio.ed-on{grid-template-columns:minmax(0,1fr) minmax(320px,470px);grid-template-areas:"stage side" "ed ed";
  grid-template-rows:calc(100vh - 390px) auto;gap:12px}
main:has(.ed-on){max-width:1500px;padding-bottom:24px}
.ed-on .stage{grid-area:stage;position:static;display:flex;justify-content:center;align-items:flex-start;min-height:0;height:100%}
.ed-on .phone{height:100%;width:auto;max-width:100%;border-width:5px;border-radius:20px}
.ed-on .side{grid-area:side;overflow:auto;min-height:0;height:100%;padding-inline-end:6px}
.ed{grid-area:ed;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;min-width:0}
.edbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.edbar .sep{width:1px;height:22px;background:var(--line)}
.edbar .sp{flex:1}
.edtl{display:flex;direction:ltr}
.edlabels{flex:none;width:84px;font-size:11.5px;color:var(--ink-2)}
.edlabels div{display:flex;align-items:center;border-bottom:1px solid var(--line);padding-left:4px;box-sizing:border-box}
.edscroll{flex:1;overflow-x:auto;overflow-y:hidden;position:relative;min-width:0}
.edin{position:relative;user-select:none;touch-action:none}
.ruler{position:relative;border-bottom:1px solid var(--line);cursor:pointer}
.ruler i{position:absolute;bottom:0;width:1px;height:7px;background:var(--line-2)}
.ruler b{position:absolute;top:3px;font-size:10px;font-weight:400;color:var(--ink-3);transform:translateX(3px)}
.trk{position:relative;border-bottom:1px solid var(--line);box-sizing:border-box}
.blk{position:absolute;top:3px;bottom:3px;border-radius:6px;overflow:hidden;font-size:11px;white-space:nowrap;cursor:grab;
  box-sizing:border-box;border:1.5px solid rgba(0,0,0,.18);padding:0 7px;display:flex;align-items:center;color:#fff;direction:rtl}
.blk.v{background-size:auto 100%;background-repeat:repeat-x;background-color:#222;padding:0}
.blk.h{background:#7a5af5}
.blk.e{background:#f0b429;color:#2a2000;bottom:auto}
.blk.c{background:#2f6fd6}
.blk.on{border:2px solid #fff;box-shadow:0 0 0 2px var(--accent);z-index:3}
.blk.drag{opacity:.75;z-index:5;cursor:grabbing}
.blk .n{position:absolute;top:2px;left:3px;font-size:10px;font-weight:700;padding:0 5px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff}
.blk .k,.blk .k2{position:absolute;bottom:2px;left:4px;font-size:10px;text-shadow:0 0 3px #000}
.blk .k2{left:auto;right:12px}
.blk .hr,.blk .hl{position:absolute;top:0;bottom:0;width:9px;cursor:ew-resize;background:rgba(255,255,255,.45)}
.blk .hr{right:0}
.blk .hl{left:0}
.blk.v .hr{background:rgba(255,255,255,.85);width:6px}
.trk.au{background-repeat:no-repeat;background-position:0 center;background-color:var(--sunk)}
.sfxm{position:absolute;top:2px;font-size:13px;font-weight:700;color:#c47f00;transform:translateX(-50%)}
.edph{position:absolute;top:0;bottom:0;width:2px;background:var(--bad);pointer-events:none;left:0;z-index:6}
.edph::before{content:"";position:absolute;top:0;left:-5px;border:6px solid transparent;border-top-color:var(--bad)}
@media (max-width:900px){
  .studio.ed-on{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "ed" "side";grid-template-rows:auto}
  .ed-on .stage{height:auto}
  .ed-on .phone{height:auto;width:min(260px,100%)}
  .ed-on .side{height:auto;overflow:visible}
}

/* scene panel: the prompt right away */
.sch{display:flex;gap:10px;align-items:flex-start}
.scthumb{flex:none;width:64px;aspect-ratio:9/16;border-radius:8px;overflow:hidden;background:#000}
.scthumb img,.scthumb video{width:100%;height:100%;object-fit:cover;display:block}
.scinfo{flex:1;min-width:0;font-size:14px}
.scsaid{font-size:12.5px;color:var(--ink-2);line-height:1.45;max-height:2.9em;overflow:hidden;margin-top:2px}
.scprompt{margin-top:10px;padding:10px;border-radius:var(--r-sm);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.scprompt textarea{min-height:58px;font-size:14px;background:var(--panel)}
.scbtns{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.scbtns .btn{flex:1;justify-content:center}
.sclib-h{display:flex;align-items:center;gap:8px;margin-top:12px}
.sclib-h .btn{margin-inline-start:auto}
.sclib{display:flex;gap:6px;overflow-x:auto;padding:6px 0}
.sclib .th{flex:none;width:58px;aspect-ratio:1;border:2px solid transparent;border-radius:8px;cursor:pointer;padding:0}
.sclib .th.cur{border-color:var(--accent)}
.sclib .th .k{font-size:9px;padding:0 4px}
.scset{margin-top:8px}
.scset summary{cursor:pointer;font-size:13px;color:var(--ink-2)}
.ed-on .side .ptabs{margin-bottom:10px}
.ed-on .side .ptabs button{padding:8px 10px;font-size:13px}
.ed-on .dirty{padding:8px 10px;margin:8px 0}
.pv img,.pv video{max-width:160px;max-height:220px}

.gprompt{display:flex;gap:8px;align-items:center;margin-bottom:8px;padding:6px 8px;border-radius:var(--r-sm);background:var(--accent-soft)}
.gprompt span{font-size:18px}
.gprompt .in{flex:1;padding:9px 12px;background:var(--panel)}

.adr{margin:-6px 0 16px;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel)}
.adr .tog{background:transparent;border:0;padding:0}
.adrs{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
.adrs summary{cursor:pointer;font-weight:700;font-size:13.5px}
.adri{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:6px 0;cursor:pointer;line-height:1.5}
.adri a{text-decoration:none}

.enhbox{padding:0 4px 4px}
.enhbox .chips button{font-size:12.5px;padding:6px 10px}

.known{display:flex;gap:10px;align-items:center;padding:10px 12px;margin-bottom:10px;border-radius:12px;
  background:color-mix(in srgb,var(--accent,#2f7d5b) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent,#2f7d5b) 30%,transparent)}
.known>span{font-size:22px}

.plib{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.plib summary{cursor:pointer;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.plib-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;max-height:260px;overflow-y:auto}
.plib-g .th{position:relative;aspect-ratio:1;border:2px solid transparent;border-radius:9px;padding:0;overflow:hidden;cursor:pointer;background:var(--sunk)}
.plib-g .th img{width:100%;height:100%;object-fit:cover;display:block}
.plib-g .th .k{position:absolute;bottom:3px;inset-inline-start:3px;font-size:12px;background:#0008;color:#fff;border-radius:6px;padding:0 4px}
.plib-g .th .ok{position:absolute;top:3px;inset-inline-end:3px;background:var(--accent);color:var(--accent-ink);border-radius:50%;width:20px;height:20px;
  display:grid;place-items:center;font-size:12px;font-weight:700}
.plib-g .th.on{border-color:var(--accent)}
.plib-g .th.ld{opacity:.5}
.briefs{margin:4px 0 8px}
.briefs .chips button{font-size:12.5px;padding:5px 10px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* step 1 media: two sources, project picker, chosen tray */
.srcs{display:grid;grid-template-columns:1fr;gap:10px}
.srcs.two{grid-template-columns:1fr 1fr}
.src{display:flex;align-items:center;gap:12px;padding:18px;border:2px dashed var(--line-2);border-radius:var(--r);background:var(--paper);
  cursor:pointer;text-align:start;font:inherit;color:inherit;transition:border .15s,background .15s}
button.src{border-style:solid;border-color:var(--line)}
.src:hover,.src.on,.src.over{border-color:var(--accent);background:var(--accent-soft)}
.src .ic{font-size:28px}.src b{display:block;font-size:15.5px}.src small{color:var(--ink-3);font-size:12.5px}
.plib{margin-top:10px;border:2px solid var(--accent);border-radius:var(--r);padding:12px;background:var(--panel)}
.plib-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.plib-h select{flex:1;min-width:180px;width:auto}
.plib-f{margin:10px 0;flex-wrap:wrap}
.plib-f i{font-style:normal;opacity:.6;font-size:12px}
.plib-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;max-height:300px;overflow-y:auto;padding:2px}
.pa{position:relative;aspect-ratio:1;border:3px solid transparent;border-radius:10px;padding:0;overflow:hidden;cursor:pointer;background:var(--sunk)}
.pa img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .15s}
.pa:hover img{transform:scale(1.05)}
.pa .play{position:absolute;inset:0;margin:auto;width:30px;height:30px;border-radius:50%;background:#000a;color:#fff;display:grid;place-items:center;font-size:12px}
.pa .tag{position:absolute;bottom:4px;inset-inline-start:4px;font-size:10.5px;background:#000b;color:#fff;border-radius:6px;padding:1px 6px}
.pa .sel{position:absolute;top:5px;inset-inline-end:5px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:#0004;
  color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.pa.on{border-color:var(--accent)}
.pa.on img{opacity:.85}
.pa.on .sel{background:var(--accent)}
.pa.ld{opacity:.5}
.plib-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.picked{margin-top:12px}
.picked-h{display:flex;gap:8px;align-items:baseline}
.picked .thumbs{margin-top:8px}
.bcards{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.bcard{flex:none;width:220px;text-align:start;border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--paper);
  cursor:pointer;font:inherit;color:inherit}
.bcard b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcard small{display:block;color:var(--ink-3);font-size:11.5px;line-height:1.5;margin-top:2px}
.bcard:hover,.bcard.on{border-color:var(--accent);background:var(--accent-soft)}
@media (max-width:560px){.srcs.two{grid-template-columns:1fr}}

/* face picker: chosen face big, ✓ and 🔍 on tiles */
.facecur{margin-top:6px}
.facecur:has(.fc-img){display:flex;gap:14px;align-items:center;padding:12px;border:2px solid var(--accent);border-radius:var(--r);background:var(--accent-soft)}
.fc-img{position:relative;width:110px;aspect-ratio:3/4;border-radius:10px;overflow:hidden;cursor:zoom-in;flex:none;box-shadow:0 4px 14px #0002}
.fc-img img{width:100%;height:100%;object-fit:cover;display:block}
.fc-img span{position:absolute;bottom:5px;inset-inline-end:5px;background:#000a;color:#fff;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-size:13px}
.fc-t b{font-size:15px}
.fc-empty{padding:12px;border:2px dashed var(--line-2);border-radius:var(--r);color:var(--ink-3);font-size:13.5px}
.face{position:relative}
.face .fok{position:absolute;top:5px;inset-inline-end:5px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-size:12px;font-weight:700;border:2px solid #fff}
.face .fzoom{position:absolute;bottom:5px;inset-inline-start:5px;width:26px;height:26px;border-radius:50%;border:0;background:#000a;color:#fff;
  font-size:12px;cursor:zoom-in;opacity:.85;display:grid;place-items:center;padding:0}
.face .fzoom:hover{opacity:1;transform:scale(1.1)}
.face.on{transform:translateY(-2px)}
.face.add{flex-direction:column;gap:2px}
.face.add span{font-size:24px}.face.add small{font-size:10.5px}

/* scene library: what the seller made in the editor first, 🆕 while unused */
.sclib .th{position:relative}
.sclib .th.made{box-shadow:0 0 0 1px var(--accent-soft)}
.sclib .th .nw{position:absolute;top:2px;inset-inline-end:2px;font-size:12px;line-height:1}

/* the AI's design for this video (plan.look) */
.lookbox{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);margin:0 0 12px;background:var(--panel)}
.lookbox .lk-sw{width:34px;height:34px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px #fff5}

.hint.warn{color:#b45309}.hint.ok{color:#15803d}

.rulesbox{margin-top:12px;border:1px dashed var(--line-2);border-radius:var(--r);padding:8px 12px}
.rulesbox summary{cursor:pointer;font-weight:700}
.rulesbox textarea{margin-top:8px}

.healthbar{position:sticky;top:0;z-index:50;background:#fff4d6;color:#7a4b00;border-bottom:1px solid #f0d58a;padding:8px 14px;
  font-size:13.5px;display:flex;gap:10px;align-items:center;justify-content:center}

.adv2 summary{cursor:pointer;font-weight:700}

/* big choice cards (who writes, improve photos) */
.choice3,.choice2{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.choice2{grid-template-columns:repeat(2,1fr)}
.choice3 button,.choice2 button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:start;padding:18px 16px;
  border:1.5px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink);cursor:pointer;font:inherit;transition:border .15s,transform .1s,box-shadow .15s}
.choice3 button:hover,.choice2 button:hover{border-color:var(--line-2);transform:translateY(-1px)}
.choice3 button.on,.choice2 button.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.choice3 .e,.choice2 .e{font-size:28px}
.choice3 b,.choice2 b{font-size:16px}
.choice3 small,.choice2 small{color:var(--ink-2);line-height:1.55}
.choice3 .tag{margin-top:auto;font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:99px;padding:3px 10px}
@media (max-width:640px){.choice3,.choice2{grid-template-columns:1fr}}
/* loading skeletons */
.skel{background:linear-gradient(90deg,var(--sunk) 25%,var(--line) 50%,var(--sunk) 75%);background-size:200% 100%;animation:skel 1.2s infinite;border-radius:var(--r-sm)}
.skel-steps{height:22px;margin-bottom:22px}.skel-h{height:34px;width:55%;margin-bottom:14px}.skel-card{height:260px;border-radius:var(--r)}
@keyframes skel{to{background-position:-200% 0}}
/* 🎞️ scenario: one card per scene */
.sbhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 2px 10px}
.shots{display:grid;gap:10px}
.shot{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.shot .pv{position:relative;aspect-ratio:9/16;border-radius:var(--r-sm);background:var(--sunk) center/cover no-repeat;cursor:zoom-in;display:grid;place-items:center;color:var(--ink-3)}
.shot .pv.empty{cursor:default;font-size:22px}
.shot .pv .anim{position:absolute;top:6px;inset-inline-end:6px;background:var(--panel);border-radius:99px;padding:1px 6px;font-size:13px}
.shot .said{font-size:14px;line-height:1.6;margin-bottom:8px}
.shot .said b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-size:12px;margin-inline-end:6px}
.shot select.in{width:auto;max-width:100%;padding:8px 10px}
.shot textarea.in{margin-top:6px;min-height:0}
.mini{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;color:var(--ink-2)}
@media (max-width:560px){.shot{grid-template-columns:72px 1fr}}

/* ui-ux-pro-max checklist: visible keyboard focus, reduced motion */
.btn:focus-visible,.choice3 button:focus-visible,.choice2 button:focus-visible,.mode:focus-visible,.steps button:focus-visible,
.chips button:focus-visible,.seg button:focus-visible,.vp:focus-visible,.in:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.skel{animation:none}.choice3 button,.choice2 button,.mode{transition:none}
  .choice3 button:hover,.choice2 button:hover{transform:none}}

/* buttons must LOOK like buttons (owner, Nov 5: «🎭 بدّل صوتي moch dhahra eli heya btn») */
.wbar #back{border-color:var(--line-2);background:var(--panel)}
.btn.ghost{box-shadow:none}
.btn[disabled]{box-shadow:none;background:var(--sunk);color:var(--ink-3);border-color:var(--line)}
.btn.primary[disabled]{background:var(--sunk);color:var(--ink-3);border-color:var(--line)}
.choice2 .tag{margin-top:auto;font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:99px;padding:3px 10px}
/* every voice made is kept: the seller picks one */
.takes{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:10px;display:grid;gap:8px}
.takes-h{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 4px}
.take{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px;padding:8px 10px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--panel)}
.take.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.take audio{width:100%;height:36px;min-width:0}
.take .pick{border:1.5px solid var(--line-2);background:var(--panel);border-radius:99px;padding:6px 12px;font:inherit;font-weight:700;cursor:pointer;color:var(--ink);min-height:36px}
.take.on .pick{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
@media (max-width:560px){.take{grid-template-columns:auto 1fr auto}.take audio{grid-column:1/-1}}

/* 🎁 recipes */
.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:26px}
.preset{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:start;padding:18px 16px 16px;min-height:150px;
  border:1.5px solid var(--line);border-radius:var(--r);background:linear-gradient(160deg,var(--pc,var(--sunk)),var(--panel) 70%);color:var(--ink);
  cursor:pointer;font:inherit;transition:transform .12s,box-shadow .15s,border-color .15s}
.preset:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-2)}
.preset:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.preset .pe{font-size:30px}.preset b{font-size:16px}.preset small{color:var(--ink-2);line-height:1.55}
.preset .pp{margin-top:auto;font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:99px;padding:3px 10px}
:root[data-theme="dark"] .preset{background:var(--panel)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .preset{background:var(--panel)}}
.pchip{font-size:12px;font-weight:700;background:var(--accent-soft);color:var(--accent);border-radius:99px;padding:4px 10px}
@media (prefers-reduced-motion:reduce){.preset{transition:none}.preset:hover{transform:none}}
.pdet{margin:4px 0 20px}.pdet summary{cursor:pointer;font-weight:700;margin-bottom:12px}
.shot .direct{display:grid;grid-template-columns:auto 1fr;gap:6px;margin-top:8px;padding:8px;border-radius:var(--r-sm);background:var(--accent-soft)}
@media (max-width:560px){.shot .direct{grid-template-columns:1fr}}
/* 🎞️ scenario studio (.sbst, not .studio = the editor) — dark like a film studio (Artlist), whatever the page theme: the pictures read better on black */
.sbst{width:100%;box-sizing:border-box;--s-bg:#0f1110;--s-panel:#171a19;--s-line:#2a2f2d;--s-ink:#eef2ef;--s-ink2:#a3aca7;margin-top:18px;background:var(--s-bg);color:var(--s-ink);
  border-radius:22px;padding:14px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.sbst .muted{color:var(--s-ink2)}
.st-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:2px 4px 12px}
.st-main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start;width:100%}
.st-view{position:relative;aspect-ratio:9/16;max-height:62vh;margin:0 auto;width:100%;max-width:380px;border-radius:16px;overflow:hidden;background:#000;
  display:grid;place-items:center}
.st-view img,.st-view video{width:100%;height:100%;object-fit:cover;display:block}
.st-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px;text-align:center;color:var(--s-ink2)}
.st-empty span{font-size:42px}.st-empty b{color:var(--s-ink)}
.st-said{position:absolute;inset-inline:10px;bottom:10px;padding:8px 12px;border-radius:12px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);
  font-size:14px;line-height:1.55;color:#fff}
.st-tags{position:absolute;top:10px;inset-inline-start:10px;display:flex;gap:6px}
.st-tags span{background:rgba(0,0,0,.6);color:#fff;border-radius:99px;padding:3px 9px;font-size:12px;font-weight:700}
.st-panel{background:var(--s-panel);border:1px solid var(--s-line);border-radius:16px;padding:12px}
.st-panel .f{color:var(--s-ink)}.st-panel .f small,.st-panel .hint{color:var(--s-ink2)}
.st-panel .in{background:#0c0e0d;color:var(--s-ink);border-color:var(--s-line)}
.st-panel .seg{background:#0c0e0d;display:flex}.st-panel .seg button{flex:1;color:var(--s-ink2)}
.st-panel .seg button.on{background:var(--s-ink);color:#111}
.st-panel .btn{background:#222826;color:var(--s-ink);border-color:var(--s-line);box-shadow:none}
.st-panel .btn.primary{background:#f2f5f3;color:#111;border-color:#f2f5f3}
.st-panel .btn.wide{width:100%;margin-top:10px}
.st-panel .mini{color:var(--s-ink2)}
.st-strip{display:flex;gap:8px;overflow-x:auto;margin-top:14px;padding:4px 2px 6px;scrollbar-width:thin}
.st-shot{position:relative;flex:0 0 88px;aspect-ratio:9/14;border-radius:12px;border:2px solid transparent;background:#1d2220 center/cover no-repeat;
  cursor:pointer;color:#fff;font:inherit;display:grid;place-items:center;transition:border-color .15s,transform .1s}
.st-shot:hover{transform:translateY(-2px)}
.st-shot.on{border-color:#f2f5f3}
.st-shot i{font-style:normal;font-size:22px;opacity:.7}
.st-shot em{position:absolute;top:5px;inset-inline-end:5px;font-style:normal;font-size:12px;background:rgba(0,0,0,.6);border-radius:99px;padding:1px 5px}
.st-shot span{position:absolute;inset-inline:0;bottom:0;padding:14px 6px 5px;font-size:11.5px;background:linear-gradient(transparent,rgba(0,0,0,.75));
  border-radius:0 0 10px 10px;text-align:start}
.st-shot:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:760px){.st-main{grid-template-columns:1fr}.st-view{max-height:52vh}}
@media (prefers-reduced-motion:reduce){.st-shot{transition:none}.st-shot:hover{transform:none}}
.st-panel .btn.primary .price{background:#d9dfdb;color:#111}.st-panel .btn .price{color:var(--s-ink)}

/* =====================================================================================================
   Sellmiro v3 — black & white, Arcads-like (Nov 6; terracotta tried and dropped). Maquettes: design/v3-*.html. Owner: «coleur mzien… pro w unique», «ma n7ebch
   app todher AI ma5douma» (Arcads-like: calm neutrals, one warm Tunisian accent, a grotesque Arabic + one Amiri word).
   This layer overrides the v2 tokens/components; class names stay the same so app.js is untouched.
   ===================================================================================================== */
:root{
  --paper:#F2F2F0; --panel:#FFFFFF; --sunk:#ECECEA; --line:#E3E3E0; --line-2:#D3D3CF;
  --ink:#0E1014; --ink-2:#4A505C; --ink-3:#6F7480;
  --accent:#111214; --accent-2:#2C2D30; --accent-ink:#fff; --accent-soft:#ECECEA; --accent-txt:#111214; --leaf:#2C2D30;
  --ok:#16794A; --ok-soft:#E3F2EA;
  --r:16px; --r-sm:12px; --shadow:0 1px 2px rgba(14,16,20,.05),0 8px 24px rgba(14,16,20,.06);
  --font:"IBM Plex Sans Arabic","Inter Tight","Segoe UI",Tahoma,sans-serif; --serif:"Amiri",serif; --side:232px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0E0F11; --panel:#16171A; --sunk:#1E2023; --line:#2A2C30; --line-2:#3A3D42;
  --ink:#F2F2F0; --ink-2:#B9BBC0; --ink-3:#8D9097; --accent:#F2F2F0; --accent-2:#FFFFFF; --accent-ink:#111214; --accent-soft:#25272B; --accent-txt:#F2F2F0;
  --ok-soft:#173326; --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.3)}}
:root[data-theme="dark"]{
  --paper:#0E0F11; --panel:#16171A; --sunk:#1E2023; --line:#2A2C30; --line-2:#3A3D42;
  --ink:#F2F2F0; --ink-2:#B9BBC0; --ink-3:#8D9097; --accent:#F2F2F0; --accent-2:#FFFFFF; --accent-ink:#111214; --accent-soft:#25272B; --accent-txt:#F2F2F0;
  --ok-soft:#173326; --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.3)}
html,body{font-family:var(--font)}
*{letter-spacing:0!important}  /* Arabic letters are never spaced: it breaks their joining */
h1{font-weight:600}
em.s{font-family:var(--serif);font-style:normal;font-weight:700;font-size:1.18em;line-height:1}  /* the one serif word of a title */
svg.ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- shell: side bar (desktop) / bottom bar (phone) ---------- */
.top{display:none}
.appside{position:fixed;top:0;bottom:0;inset-inline-start:0;width:var(--side);z-index:30;display:flex;flex-direction:column;gap:4px;
  padding:18px 12px;background:var(--panel);border-inline-end:1px solid var(--line)}
.appside .brand{display:flex;align-items:center;gap:10px;font:700 18px/1 "Inter Tight",var(--font);color:var(--ink);text-decoration:none;padding:4px 8px 18px}
.appside .brand i{width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-style:normal;font:700 15px "Inter Tight"}
.appside nav{display:flex;flex-direction:column;gap:2px}
.appside nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--ink-2);text-decoration:none;font-weight:500}
.appside nav a:hover{background:var(--sunk);color:var(--ink)}
.appside nav a.on{background:var(--sunk);color:var(--ink);font-weight:600}
.appside nav a.on svg{color:var(--accent)}
.appside .sp{flex:1}
.appside .chip-cost{margin:0 4px 8px;text-align:center}
.appside .me{display:flex;align-items:center;gap:10px;padding:10px 8px;border-top:1px solid var(--line)}
.appside .me>button{width:34px;height:34px;border-radius:10px;border:0;background:var(--accent-soft);color:var(--accent-txt);font-weight:700;cursor:pointer;flex:none}
.appside .me-name{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appside .menu{top:auto;bottom:54px;inset-inline-start:0;inset-inline-end:auto}
.menu button{display:flex;align-items:center;gap:8px}
body{padding-inline-start:var(--side)}
.wbar{inset-inline-start:var(--side)}
@media (max-width:900px){
  body{padding-inline-start:0;padding-bottom:64px}
  .appside{top:auto;width:auto;inset-inline:0;height:64px;flex-direction:row;align-items:center;padding:6px 10px;
    border-inline-end:0;border-top:1px solid var(--line);gap:6px}
  .appside .brand span,.appside .me-name,.appside .chip-cost{display:none}
  .appside .brand{padding:0 4px}
  .appside nav{flex-direction:row;flex:1;justify-content:center;gap:6px}
  .appside nav a{flex-direction:column;gap:2px;font-size:11.5px;padding:6px 14px}
  .appside .sp{display:none}
  .appside .me{border-top:0;padding:0}
  .appside .menu{bottom:56px;inset-inline-start:auto;inset-inline-end:0}
  .wbar{inset-inline-start:0;bottom:64px}
}

/* ---------- components ---------- */
.btn{border-radius:12px;border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(27,26,25,.05);font-weight:600}
.btn.sm{border-radius:10px}
.btn.primary{background:linear-gradient(180deg,var(--accent-2),var(--accent));border-color:color-mix(in srgb,var(--accent) 85%,#000);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px color-mix(in srgb,var(--accent) 28%,transparent)}
.btn.primary:hover{background:var(--accent-2)}
.btn.ghost{box-shadow:none}
.card{border-radius:var(--r);border-color:var(--line);box-shadow:var(--shadow)}
.price{background:var(--accent-soft);color:var(--accent-txt)}
.chips button.on,.seg button.on{background:var(--accent-soft);color:var(--accent-txt);border-color:var(--accent)}
.in:focus,textarea:focus,select:focus{outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:1px;border-color:var(--accent)}
a{color:var(--accent-txt)}

/* ---------- home v3 ---------- */
.hero3{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:6px 0 30px}
.hero3 h1{font-size:34px;line-height:1.25;margin:0}
.hero3 p{color:var(--ink-2);margin:6px 0 0;max-width:560px}
.sec-t h2{font-size:20px;font-weight:600}
.presets{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.presets{grid-template-columns:repeat(2,1fr)}}
.preset .pv{aspect-ratio:16/11!important}
.preset{padding:0;overflow:hidden;background:var(--panel)!important;border:1px solid var(--line);box-shadow:var(--shadow);min-height:0;gap:0}
.preset .pv{display:block;width:100%;aspect-ratio:4/4.4;background:var(--sunk) center/cover;position:relative}
.preset .pv .tag{position:absolute;top:10px;inset-inline-start:10px;background:rgba(27,26,25,.68);color:#fff;font-size:11.5px;font-weight:600;border-radius:7px;padding:2px 8px}
.preset .pt{display:flex;flex-direction:column;gap:3px;padding:12px 14px 14px;align-items:flex-start;width:100%}
.preset .pt b{font-size:15.5px}.preset .pt small{color:var(--ink-2);font-size:12.5px;line-height:1.5}
.preset .pp{margin-top:6px;background:var(--accent-soft);color:var(--accent-txt)}
.preset:hover{transform:translateY(-2px);border-color:var(--line-2)}
.empty3{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px;border:1.5px dashed var(--line-2);border-radius:var(--r);background:var(--panel);text-align:center}
.empty3 b{font-size:17px}

/* ---------- wizard v3: numbered stepper, calm titles ---------- */
.wiz h1{font-size:28px;line-height:1.3;margin:0 0 4px}
.wiz .lead{color:var(--ink-2);margin:0 0 18px}
.steps{gap:0;align-items:center;margin-bottom:26px}
.steps button{flex:0 0 auto;min-width:0;display:flex;align-items:center;gap:7px;padding:0 4px;color:var(--ink-3)}
.steps button+button:before{content:"";width:18px;height:1.5px;background:var(--line-2);margin-inline-end:6px;flex:none}
.steps button .n{width:24px;height:24px;border-radius:99px;display:grid;place-items:center;font:700 11.5px "Inter Tight",var(--font);
  border:1.5px solid var(--line-2);background:var(--panel);color:var(--ink-3);flex:none}
.steps button.done .n{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.steps button.on{color:var(--ink)}
.steps button.on .n{border-color:var(--accent);color:var(--accent-txt);box-shadow:0 0 0 4px var(--accent-soft)}
.steps button span{font-size:12.5px;font-weight:500}.steps button.on span{font-weight:600}
.steps button i{display:none}
.wtop .btn{border-radius:10px}
.choice3 button.on,.choice2 button.on,.mode.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.choice3 .tag,.choice2 .tag{color:var(--accent-txt);background:var(--accent-soft)}

/* icons in the choice cards (no emoji) */
.mode .e,.choice3 .e,.choice2 .e{width:42px;height:42px;border-radius:12px;background:var(--sunk);color:var(--ink-2);display:grid;place-items:center;font-size:0}
.mode .e svg,.choice3 .e svg,.choice2 .e svg{width:22px;height:22px}
.mode.on .e,.choice3 button.on .e,.choice2 button.on .e{background:var(--accent-soft);color:var(--accent)}
.mode .p{color:var(--accent-txt);background:var(--accent-soft)}
/* timeline tracks in the v3 palette (each lane is also labelled: colour is never the only cue) */
.blk.h{background:#2C2D30;color:#fff}
.blk.e{background:#C9CAC4;color:#111214}
.blk.c{background:#6F7480;color:#fff}

/* ---------- login v3 (maquette J1) ---------- */
body.guest{padding-inline-start:0;padding-bottom:0}
body.guest .appside{display:none}
body.guest main{max-width:none;padding:0}
.auth3{display:grid;grid-template-columns:minmax(360px,1fr) 1.1fr;min-height:100vh}
.auth3 .af{display:grid;place-items:center;padding:30px;background:var(--panel)}
.auth3 .card{width:min(380px,100%);box-shadow:none;border:0;padding:0;background:none}
.auth3 .alogo{display:flex;align-items:center;gap:10px;font:700 18px "Inter Tight",var(--font);margin-bottom:26px}
.auth3 .alogo i{width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-style:normal}
.auth3 h1{font-size:30px;margin:0}.auth3 .lead{color:var(--ink-2);margin:4px 0 18px}
.auth3 .tabs2{display:flex;background:var(--sunk);border-radius:12px;padding:4px;margin-bottom:6px}
.auth3 .tabs2 button{flex:1;border:0;background:none;padding:8px;border-radius:9px;font-weight:600;cursor:pointer;color:var(--ink-2)}
.auth3 .tabs2 button.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
/* the art side: 3 ad screens at (about) their real size — one stretched 357 px picture looked blurry */
.auth3 .aart{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,5vh,48px);
  padding:40px 34px;background:radial-gradient(120% 80% at 50% 35%,#26262b 0%,#111114 60%,#0b0b0d 100%)}
.auth3 .phones{display:flex;justify-content:center;align-items:center;gap:clamp(10px,1.6vw,22px);direction:ltr}
.auth3 .ph{margin:0;position:relative;width:clamp(120px,13vw,190px);aspect-ratio:9/16;border-radius:22px;overflow:hidden;
  background:#1b1b1f;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 50px -18px rgba(0,0,0,.7)}
.auth3 .ph.m{width:clamp(140px,15.5vw,224px);z-index:1;box-shadow:0 30px 70px -20px rgba(0,0,0,.85)}
.auth3 .ph.s{transform:rotate(-4deg) translateY(14px)}.auth3 .ph.e{transform:rotate(4deg) translateY(14px)}
.auth3 .ph img{width:100%;height:100%;object-fit:cover;display:block}
.auth3 .ph:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.65))}
.auth3 .ph figcaption{position:absolute;inset-inline:10px;bottom:10px;z-index:1;direction:rtl;color:#fff;font-size:12px;font-weight:600;
  background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border-radius:999px;padding:4px 10px;width:max-content;max-width:calc(100% - 20px);margin-inline:auto}
.auth3 blockquote{position:relative;margin:0 auto;max-width:460px;text-align:center;color:#fff;font-size:24px;font-weight:600;line-height:1.45}
.auth3 blockquote small{display:block;font-size:14px;font-weight:400;opacity:.8;margin-top:8px}
@media (max-width:860px){.auth3{grid-template-columns:1fr}.auth3 .aart{display:none}}
/* «continue with Google», «forgot password», the new-password page */
.auth3.solo{grid-template-columns:1fr}
.auth3 .gwrap{margin:12px 0 2px}
.auth3 .gbtn{min-height:44px;display:flex;justify-content:center}
.auth3 .aor{display:flex;align-items:center;gap:10px;color:var(--ink-3,var(--ink-2));font-size:12.5px;margin:14px 0 2px}
.auth3 .aor:before,.auth3 .aor:after{content:"";flex:1;height:1px;background:var(--line,rgba(127,127,127,.25))}
.auth3 .alink{background:none;border:0;padding:4px 0;margin-top:8px;color:var(--ink-2);font:inherit;font-size:13px;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.auth3 .alink:hover{color:var(--ink)}
.auth3 .anote{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:var(--sunk);color:var(--ink);font-size:14px;line-height:1.6}
/* ---------- progress v3 (maquette J4) ---------- */
.prog .ring{--p:0;width:128px;height:128px;border-radius:99px;margin:10px auto 16px;display:grid;place-items:center;
  background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--sunk) 0);transition:background .4s}
.prog .ring b{width:102px;height:102px;border-radius:99px;background:var(--paper);display:grid;place-items:center;font:700 26px "Inter Tight",var(--font)}
.prog h1{font-size:24px}
.stages3{display:flex;flex-direction:column;gap:8px;width:min(360px,100%);margin:18px auto;text-align:start}
.stages3 div{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);font-size:14px;color:var(--ink-3)}
.stages3 i{width:24px;height:24px;border-radius:99px;display:grid;place-items:center;font:700 11.5px "Inter Tight";font-style:normal;border:1.5px solid var(--line-2);flex:none}
.stages3 .done{color:var(--ink-2)}.stages3 .done i{background:var(--ok);border-color:var(--ok);color:#fff}
.stages3 .on{color:var(--ink);font-weight:600;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.stages3 .on i{border-color:var(--accent);animation:spin3 1.2s linear infinite;border-top-color:transparent}
@keyframes spin3{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.stages3 .on i{animation:none}}
.prog .ficon{width:64px;height:64px;border-radius:18px;background:var(--bad-soft);color:var(--bad);display:grid;place-items:center;margin:10px auto}
.prog .ficon svg{width:30px;height:30px}
/* ---------- review: the price box (maquette J2 · step 6), dialogs, toasts ---------- */
.est{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:18px}
.est .muted{color:color-mix(in srgb,var(--paper) 65%,transparent)}
.est b{font:700 28px "Inter Tight",var(--font)}
.dlg .card{border-radius:18px;padding:22px}
.toast{background:var(--ink);color:var(--paper);border-radius:12px;font-weight:500;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.toast.bad{background:var(--bad);color:#fff}
.note{border-radius:12px}
.chip-cost{background:var(--sunk);color:var(--ink-2);border-radius:8px}
.menu{border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.14)}

/* ---------- icon slots that used to hold emoji (v3) ---------- */
.src .ic,.drop .ic{width:44px;height:44px;border-radius:12px;background:var(--sunk);color:var(--ink-2);display:grid;place-items:center;font-size:0;flex:none}
.src .ic svg,.drop .ic svg{width:22px;height:22px}
.drop .ic{margin:0 auto 6px}
.sheet .a,.known>span{width:40px;height:40px;border-radius:12px;background:var(--sunk);color:var(--ink);display:grid;place-items:center;font-size:0;flex:none}
.sheet .a svg,.known>span svg{width:20px;height:20px}
.sheet .a svg{animation:pulse3 1.4s ease-in-out infinite}
@keyframes pulse3{50%{opacity:.35}}
.player>span svg,.ver .vn svg{width:20px;height:20px;color:var(--ok)}
.gprompt>span svg{width:18px;height:18px;color:var(--ink-2)}
.st-empty span svg{width:40px;height:40px;color:var(--ink-3)}
.btn svg.ico,.fzoom svg.ico{width:16px;height:16px}
.av svg{width:18px;height:18px;color:#fff}
@media (prefers-reduced-motion:reduce){.sheet .a svg{animation:none}}
.steps button+button:before{width:12px;margin-inline-end:4px}
.steps button{gap:6px;padding:0 3px}
@media (max-width:1100px){.steps button:not(.on) span{display:none}}
/* voices: monochrome avatars (v3) */
.vp .av.f{background:#2C2D30}
.vp .av.m{background:#6F7480}

/* ---------- project page v3 (maquette J5) ---------- */
.phead3{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.phead3 .crumb{color:var(--ink-3);font-size:13px;text-decoration:none}.phead3 .crumb:hover{color:var(--ink)}
.phead3 h1{font-size:28px;margin:4px 0 2px}
.phead3 .btn svg.ico{width:16px;height:16px}
.tabs3{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:14px 0 18px;overflow-x:auto}
.tabs3 button{border:0;background:none;padding:10px 0;font:500 14px var(--font);color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs3 button small{font:600 11px "Inter Tight";color:var(--ink-3);background:var(--sunk);border-radius:99px;padding:1px 7px;margin-inline-start:4px}
.tabs3 button.on{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.videos{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));align-items:start}
.vcard .b small{display:flex;align-items:center;gap:6px}
.vcard .b .ang{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink-3);margin-top:3px}
.pill3{font:600 11px var(--font);border-radius:99px;padding:1px 8px;background:var(--ok-soft);color:var(--ok)}
.pill3.run{background:var(--sunk);color:var(--ink-2)}.pill3.bad{background:var(--bad-soft);color:var(--bad)}
.vcard.vnew{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:9/16;border:1.5px dashed var(--line-2);
  background:none;color:var(--ink-3);text-decoration:none;border-radius:var(--r)}
.vcard.vnew:hover{color:var(--ink);border-color:var(--ink-3)}
.vcard.vnew svg{width:26px;height:26px}
.tabs3{overflow-y:hidden;scrollbar-width:none}.tabs3::-webkit-scrollbar{display:none}
/* editor v3: the voice waveform in grey, calmer toolbar */
.trk.au{background-blend-mode:luminosity;filter:grayscale(1) contrast(.9)}

/* ================= the studio (editor) as the maquette «الإستوديو (غامق)» =================
   dark whatever the page theme; areas (RTL): rail | inspector | preview, timeline under, top bar over */
body.instudio{padding:0!important;background:#0E0F11}
body.instudio .appside{display:none}
body.instudio main{max-width:none!important;padding:0!important;margin:0}
.studio.ed-on{--paper:#0E0F11;--panel:#16171A;--sunk:#1E2023;--line:#2A2C30;--line-2:#3A3D42;--ink:#F2F2F0;--ink-2:#B9BBC0;--ink-3:#8D9097;
  --accent:#F2F2F0;--accent-2:#fff;--accent-ink:#111214;--accent-soft:#25272B;--accent-txt:#F2F2F0;--ok-soft:#173326;--bad-soft:#3A1E1E;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.3);color-scheme:dark;
  background:var(--paper);color:var(--ink);height:100vh;gap:0;
  grid-template-columns:60px minmax(320px,400px) minmax(0,1fr);grid-template-rows:58px minmax(0,1fr) auto;
  grid-template-areas:"top top top" "rail side stage" "ed ed ed"}
.ed-on .in,.ed-on input,.ed-on textarea,.ed-on select{background:var(--sunk);color:var(--ink);border-color:var(--line)}
/* top bar */
.stop{grid-area:top;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--line);min-width:0}
.stop .sp{flex:1}
.stt{display:flex;flex-direction:column;min-width:0}
.stt b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.stt small{font-size:12px;color:var(--ink-3)}
.ic1{width:34px;height:34px;padding:0!important;justify-content:center;font-size:16px}
.stop .btn svg.ico{width:16px;height:16px}
.stop .chip-cost{background:var(--sunk);color:var(--ink-2)}
.ed-on .dirty{display:flex;margin:0;padding:4px 4px 4px 10px;gap:6px;border-radius:12px;background:var(--sunk);font-size:12.5px;color:var(--ink-2)}
.ed-on .dirty.hidden{display:none}
.ed-on .btn{background:var(--sunk);border-color:var(--line);color:var(--ink)}
.ed-on .btn.ghost{background:none;border-color:transparent}
.ed-on .btn.ghost:hover{background:var(--sunk)}
.ed-on .btn.primary{background:#F2F2F0;color:#111214;border-color:#F2F2F0}
/* icon rail */
.rail{grid-area:rail;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0;border-inline-start:1px solid var(--line);overflow-y:auto;scrollbar-width:none}
.rail button{width:48px;padding:7px 0 5px;border:0;border-radius:12px;background:none;color:var(--ink-3);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px}
.rail button svg{width:20px;height:20px}
.rail button span{font-size:10px;line-height:1.1}
.rail button:hover{color:var(--ink);background:var(--sunk)}
.rail button.on{color:var(--ink);background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line-2)}
/* inspector */
.ed-on .side{grid-area:side;overflow:auto;min-height:0;height:auto;padding:16px;border-inline-start:1px solid var(--line);background:var(--panel)}
.ed-on .side .note{margin-top:0}
.ed-on .scprompt{background:var(--sunk);border-color:var(--line)}
.ed-on .scprompt textarea{background:var(--panel)}
/* preview + its controls */
.ed-on .stage{grid-area:stage;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;min-height:0;height:auto;position:relative}
.ed-on .phone{height:auto;flex:1 1 auto;min-height:0;max-height:100%;width:auto;border:0;border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.pctl{position:relative;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 10px;border-radius:14px;background:rgba(30,32,35,.92);border:1px solid var(--line);direction:ltr;flex:none}
.pctl .mono{font:500 12.5px "Inter Tight",monospace;color:var(--ink)}.pctl .tot{color:var(--ink-3);margin-inline-end:6px}
.pctl .ic2{width:32px;height:32px;border:0;border-radius:9px;background:none;color:var(--ink-2);display:grid;place-items:center;cursor:pointer}
.pctl .ic2:hover{background:var(--sunk);color:var(--ink)}
.pctl .ic2 svg{width:17px;height:17px}
.pctl .play{width:36px;height:36px;border:0;border-radius:10px;background:#F2F2F0;color:#111214;font-size:13px;cursor:pointer;display:grid;place-items:center}
.addm{position:absolute;bottom:calc(100% + 8px);left:0;z-index:20;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:6px;min-width:230px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.5);direction:rtl}
.addm.hidden{display:none}
.addm button{border:0;background:none;color:var(--ink);text-align:start;padding:8px 10px;border-radius:9px;cursor:pointer;font:500 13px var(--font)}
.addm button:hover{background:var(--sunk)}
/* timeline */
.ed-on .ed{grid-area:ed;background:var(--paper);border:0;border-top:1px solid var(--line);border-radius:0;padding:8px 14px 10px}
.edrow{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.edrow .gprompt{flex:1;margin:0;background:var(--sunk);padding:4px 6px}
.edrow .gprompt .in{background:var(--panel);border-color:var(--line)}
.edrow .edbar{margin:0;flex-wrap:nowrap}
.ed-on .edlabels{color:var(--ink-3)}
.ed-on .edlabels div,.ed-on .trk,.ed-on .ruler{border-color:transparent}
.ed-on .ruler b{color:var(--ink-3)}
.ed-on .ruler i{background:var(--line-2)}
.ed-on .blk{border-radius:8px;border-color:rgba(255,255,255,.08)}
.ed-on .blk.v{background-color:#000}
.ed-on .blk.h{background:#2A2C33;border-color:#45484F;color:#E7E7EA}
.ed-on .blk.c{background:#24262B;border-color:#3A3D44;color:#D5D6DA}
.ed-on .blk.e{background:#C9CAC4;color:#111214}
.ed-on .blk.on{border:2px solid #F2F2F0;box-shadow:none}
.ed-on .trk.au{background-color:transparent;filter:grayscale(1) brightness(1.3)}
.ed-on .edph{background:#F2F2F0}
.ed-on .edph::before{border-top-color:#F2F2F0}
.ed-on .gprompt>span svg{color:var(--ink-3)}
@media (max-width:900px){
  .studio.ed-on{height:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"top" "stage" "rail" "ed" "side"}
  .rail{flex-direction:row;justify-content:flex-start;overflow-x:auto;padding:6px 10px;border:0;border-bottom:1px solid var(--line)}
  .rail button{flex:none}
  .ed-on .stage{height:auto}
  .ed-on .phone{width:min(260px,100%);height:auto;flex:none}
  .stop .chip-cost,.stop a[download$=".zip"],.stt small{display:none}
  .edrow{flex-wrap:wrap}
}
.studio.ed-on{overflow:hidden}
.ed-on .stage{display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-items:center;overflow:hidden}
.ed-on .phone{height:100%;max-height:100%;width:auto;max-width:100%;flex:none;min-height:0}
@media (max-width:900px){.studio.ed-on{overflow:visible}.ed-on .stage{display:flex}.ed-on .phone{height:auto;width:min(260px,100%)}}
.studio.ed-on{align-items:stretch}
.ed-on .stage,.ed-on .side,.rail{min-height:0;height:auto;align-self:stretch}
.ed-on .stage{position:relative;top:auto}
/* a price on the accent button: readable on light AND dark accents */
.btn.primary .price{background:color-mix(in srgb,var(--accent-ink) 14%,transparent);color:var(--accent-ink)}
.ed-on .btn.primary .price{background:rgba(17,18,20,.12);color:#111214}
.ed-on .est{background:var(--sunk);color:var(--ink);border:1px solid var(--line)}
.ed-on .est .muted{color:var(--ink-3)}
.ed-on .phone .tag{background:rgba(17,18,20,.75);color:#F2F2F0;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.15)}
.ed-on input[type=range]{accent-color:#F2F2F0}
input[type=range]{accent-color:var(--accent)}

/* ================= the creation (wizard) + progress in the studio's look ================= */
.dk{--paper:#0E0F11;--panel:#16171A;--sunk:#1E2023;--line:#2A2C30;--line-2:#3A3D42;--ink:#F2F2F0;--ink-2:#B9BBC0;--ink-3:#8D9097;
  --accent:#F2F2F0;--accent-2:#fff;--accent-ink:#111214;--accent-soft:#25272B;--accent-txt:#F2F2F0;--ok-soft:#173326;--bad-soft:#3A1E1E;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.3);color-scheme:dark;color:var(--ink)}
.dk .in,.dk input,.dk textarea,.dk select{background:var(--sunk);color:var(--ink);border-color:var(--line)}
.dk .btn{background:var(--sunk);border-color:var(--line);color:var(--ink)}
.dk .btn.ghost{background:none;border-color:transparent}
.dk .btn.primary{background:#F2F2F0;color:#111214;border-color:#F2F2F0}
.dk .btn.primary .price{background:rgba(17,18,20,.12);color:#111214}
.dk .card{background:var(--panel);border-color:var(--line);box-shadow:none}
.dk .est{background:var(--sunk);color:var(--ink);border:1px solid var(--line)}
.dk input[type=range]{accent-color:#F2F2F0}
body.instudio{min-height:100vh}
/* grid (RTL): steps rail | the step | summary */
.wiz3{display:grid;height:100vh;max-width:none;margin:0;padding:0;background:var(--paper);
  grid-template-columns:220px minmax(0,1fr) 290px;grid-template-rows:58px minmax(0,1fr);grid-template-areas:"top top top" "rail main sum"}
.wiz3 .stop{position:relative}
.wprog{position:absolute;inset-inline:0;bottom:-1px;height:2px;background:transparent}
.wprog i{display:block;height:100%;background:#F2F2F0;transition:width .4s;margin-inline-start:0}
.wrail{grid-area:rail;display:flex;flex-direction:column;gap:2px;padding:14px 10px;border-inline-start:1px solid var(--line);overflow-y:auto}
.wrail button{display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;border-radius:12px;background:none;color:var(--ink-3);
  font:500 14px var(--font);cursor:pointer;text-align:start;position:relative}
.wrail button:not(:last-child):after{content:"";position:absolute;inset-inline-start:21px;top:36px;height:12px;width:1.5px;background:var(--line-2)}
.wrail .n{width:24px;height:24px;flex:none;border-radius:99px;display:grid;place-items:center;font:700 11.5px "Inter Tight",var(--font);border:1.5px solid var(--line-2)}
.wrail button.done{color:var(--ink-2)}
.wrail button.done .n{background:#F2F2F0;border-color:#F2F2F0;color:#111214}
.wrail button.on{background:var(--sunk);color:var(--ink);font-weight:600}
.wrail button.on .n{border-color:#F2F2F0;color:#F2F2F0;box-shadow:0 0 0 3px rgba(242,242,240,.12)}
.wrail button:hover:not([disabled]){background:var(--sunk)}
.wrail button.locked{opacity:.45;cursor:not-allowed}
.wmain{grid-area:main;overflow-y:auto;padding:26px 28px 120px}
.wmain #stepBody{max-width:780px;margin:0 auto}
.wsum{grid-area:sum;border-inline-end:1px solid var(--line);padding:18px 16px 110px;overflow-y:auto;background:var(--panel)}
.wsum .sh{font-weight:700;font-size:15px;margin-bottom:10px}
.spics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.spics img,.spics video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:#000;display:block}
.sempty{grid-column:1/-1;aspect-ratio:3/1;border:1.5px dashed var(--line-2);border-radius:12px;display:grid;place-items:center;color:var(--ink-3)}
.snote{font-size:12.5px;color:var(--ink-3);line-height:1.6;margin:10px 0 0}
.srows{margin-top:14px;border-top:1px solid var(--line)}
.sr{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:13px}
.sr span{color:var(--ink-3)}.sr b{font-weight:600;color:var(--ink-2);text-align:end}
.sr.ok b{color:var(--ink)}.sr.on span{color:var(--ink);font-weight:600}
.sface{width:28px;height:28px;border-radius:99px;object-fit:cover;display:block}
.shint{font-size:12px;color:var(--ink-3);margin-top:14px}
/* the bottom bar sits under the step only */
body.instudio .wbar{inset-inline-start:220px;inset-inline-end:290px;background:rgba(14,15,17,.92);border-color:#2A2C30;bottom:0}
body.instudio .wbar .in{max-width:780px}
body.instudio .wbar #back{background:#1E2023;border-color:#2A2C30;color:#F2F2F0}
body.instudio .wbar .btn.primary{background:#F2F2F0;color:#111214;border-color:#F2F2F0}
body.instudio .wbar .why{color:#8D9097}
/* the progress page, dark */
.prog.dk{max-width:none;min-height:100vh;margin:0;padding:40px 20px;background:var(--paper)}
.prog.dk>*{max-width:560px;margin-inline:auto}
.prog.dk .ring b{background:var(--paper)}
.prog.dk .stages3 .done i{background:#F2F2F0;border-color:#F2F2F0;color:#111214}
.prog.dk .stages3 .on{border-color:#F2F2F0;box-shadow:0 0 0 3px rgba(242,242,240,.1)}
.prog.dk .stages3 .on i{border-color:#F2F2F0;border-top-color:transparent}
.prog.dk .ring{background:conic-gradient(#F2F2F0 calc(var(--p)*1%),var(--sunk) 0)}
@media (max-width:1100px){.wiz3{grid-template-columns:200px minmax(0,1fr);grid-template-areas:"top top" "rail main"}.wsum{display:none}
  body.instudio .wbar{inset-inline-end:0;inset-inline-start:200px}}
@media (max-width:760px){
  .wiz3{height:auto;min-height:100vh;grid-template-columns:minmax(0,1fr);grid-template-rows:58px auto auto;grid-template-areas:"top" "rail" "main"}
  .wrail{flex-direction:row;overflow-x:auto;border:0;border-bottom:1px solid var(--line);padding:8px 10px;scrollbar-width:none}
  .wrail button{flex:none}.wrail button:not(.on) span{display:none}.wrail button:after{display:none}
  .wmain{overflow:visible;padding:18px 16px 110px}
  body.instudio .wbar{inset-inline:0}
}
.dk .est .muted,.dk .est small,.dk .est span{color:var(--ink-3)}
.dk .est b{color:var(--ink)}
.prog.dk .gens{justify-content:center;display:flex;flex-wrap:wrap;gap:8px}

/* ---------- the on/off switch: readable in light AND dark (the knob takes the opposite colour) ---------- */
.tog input{background:var(--line-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.tog input::after{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tog input:checked{background:var(--accent)}
.tog input:checked::after{background:var(--accent-ink)}
.dk .tog input{background:#2A2C30;box-shadow:inset 0 0 0 1px #4A4D55}
.dk .tog input::after{background:#8D9097}
.dk .tog input:checked{background:#F2F2F0;box-shadow:none}
.dk .tog input:checked::after{background:#111214}
.tog:has(input:checked){border-color:var(--ink-3)}
/* ---------- voice samples: play / stop ---------- */
.vp .pl{width:32px;height:32px;border:0;border-radius:99px;background:var(--sunk);color:var(--ink);display:grid;place-items:center;font-size:0;transition:background .15s}
.vp .pl svg{width:14px;height:14px}
.vp .pl .is{display:none}
.vp .pl:hover{background:var(--line-2)}
.vp .pl.playing{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 4px var(--accent-soft)}
.vp .pl.playing .ip{display:none}.vp .pl.playing .is{display:block}
.vp.on{border-color:var(--ink);box-shadow:0 0 0 3px var(--accent-soft)}
/* ---------- the scenes: one clear list ---------- */
.scn{margin-top:20px}
.scn-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.scn-h b{font-size:17px;display:block}.scn-h small{color:var(--ink-3);font-size:13px}
.sc-ok{font-size:13px;color:var(--ok);font-weight:600}
.scl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sc{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.sc-pic{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:var(--sunk);align-self:start}
.sc-pic img,.sc-pic video{width:100%;height:100%;object-fit:cover;display:block}
.sc-pic img{cursor:zoom-in}
.sc-n{position:absolute;top:6px;inset-inline-start:6px;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:rgba(0,0,0,.65);color:#fff;
  font:700 11.5px "Inter Tight",var(--font);display:grid;place-items:center}
.sc-pic em{position:absolute;bottom:6px;inset-inline-start:6px;width:24px;height:24px;border-radius:8px;background:rgba(0,0,0,.65);color:#fff;display:grid;place-items:center}
.sc-pic em svg{width:14px;height:14px}
.sc-empty,.sc-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink-3)}
.sc-empty svg{width:26px;height:26px}.sc-empty small,.sc-load small{font-size:11.5px}
.spin3{width:22px;height:22px;border-radius:99px;border:2px solid var(--line-2);border-top-color:var(--ink);animation:spin3 .9s linear infinite}
.sc-b{min-width:0;display:flex;flex-direction:column;gap:8px}
.sc-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sc-top b{font-size:15px}.sc-top .sp{flex:1}
.sc-top select.in{width:auto;max-width:210px;padding:6px 10px;font-size:13px}
.sc-tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--accent-soft);color:var(--ink)}
.sc-said{margin:0;padding:8px 12px;border-radius:10px;background:var(--sunk);font-size:14px;line-height:1.6}
.sc-said span{color:var(--ink-3);font-size:12px;margin-inline-end:4px}
.sc-l{font-size:13px;font-weight:600;color:var(--ink-2)}.sc-l small{font-weight:400;color:var(--ink-3)}
.sc textarea.in{min-height:0;font-size:14px}
.sc-act{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sc-act .btn.on{background:var(--accent-soft);border-color:var(--ink-3)}
.sc-mv{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;border:1px dashed var(--line-2)}
.sc-hint{font-size:12.5px;color:var(--ink-3);margin:0}
.sc.busy{border-color:var(--ink-3)}
@media (max-width:600px){.sc{grid-template-columns:86px minmax(0,1fr);gap:10px;padding:10px}.sc-top select.in{max-width:100%}}
@media (prefers-reduced-motion:reduce){.spin3{animation:none}}
/* full-screen pages fit under a banner (fal.ai balance…) instead of overflowing it */
@media (min-width:761px){
  body.instudio{display:flex;flex-direction:column;height:100vh;overflow:hidden}
  body.instudio main{flex:1;min-height:0;overflow:auto}
  body.instudio .wiz3,body.instudio .studio.ed-on{height:100%}
}

.pick-note{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-3);padding:6px 12px;border-radius:99px;background:var(--sunk);margin-bottom:4px}
.pick-note b{color:var(--ink)}
.linkb{border:0;background:none;color:var(--ink);text-decoration:underline;cursor:pointer;font:inherit;padding:0}

/* ---------- scenes one by one: the strip of scenes + the approve bar ---------- */
.sc-cnt{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.sc-nav{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none}
.sc-dot{position:relative;flex:none;width:52px;aspect-ratio:9/16;border-radius:10px;border:1.5px solid var(--line-2);background:var(--sunk);
  cursor:pointer;overflow:hidden;padding:0;display:grid;place-items:center;color:var(--ink-2)}
.sc-dot i{position:absolute;inset:0;background:center/cover;opacity:.55}
.sc-dot b{position:relative;min-width:22px;height:22px;padding:0 5px;border-radius:99px;display:grid;place-items:center;font:700 11.5px "Inter Tight",var(--font);
  background:rgba(0,0,0,.6);color:#fff}
.sc-dot.ok{border-color:var(--ok)}.sc-dot.ok b{background:var(--ok)}.sc-dot.ok i{opacity:1}
.sc-dot.on{border-color:var(--ink);box-shadow:0 0 0 3px var(--accent-soft)}.sc-dot.on i{opacity:1}
.sc-dot.lock{opacity:.35;cursor:not-allowed}
.sc-ok-bar{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.sc-ok-bar .sp{flex:1}
.scl .sc{grid-template-columns:minmax(150px,220px) minmax(0,1fr)}
@media (max-width:600px){.scl .sc{grid-template-columns:1fr}.scl .sc-pic{max-width:220px;margin:0 auto;width:100%}}

/* ---------- scenes: the 3-step guide, the optional move block, the nudge ---------- */
.sc-guide{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3)}
.sc-guide li{display:flex;align-items:center;gap:6px}
.sc-guide li+li:before{content:"";width:14px;height:1.5px;background:var(--line-2);margin-inline-end:2px}
.sc-guide i{width:20px;height:20px;border-radius:99px;display:grid;place-items:center;font:700 11px "Inter Tight",var(--font);font-style:normal;border:1.5px solid var(--line-2)}
.sc-guide li.now{color:var(--ink);font-weight:600}.sc-guide li.now i{border-color:var(--ink);box-shadow:0 0 0 3px var(--accent-soft)}
.sc-guide li.done{color:var(--ink-2)}.sc-guide li.done i{background:var(--ok);border-color:var(--ok);color:#fff}
.sc-guide small{font-weight:400;color:var(--ink-3)}
.sc-move{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--sunk);border:1px solid var(--line-2)}
.sc-move .e{width:36px;height:36px;border-radius:10px;background:var(--panel);display:grid;place-items:center;flex:none;color:var(--ink)}
.sc-move .e svg{width:18px;height:18px}
.sc-move div{flex:1;min-width:0}.sc-move b{display:block;font-size:14px}.sc-move small{font-size:12.5px;color:var(--ink-3)}
.sc-callout{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:12px;border-radius:12px;font-size:14px;line-height:1.6;
  background:color-mix(in srgb,#E2B45C 16%,var(--panel));border:1px solid color-mix(in srgb,#E2B45C 55%,transparent);color:var(--ink);scroll-margin-top:16px}
.sc-callout svg{width:20px;height:20px;flex:none;color:#E2B45C;margin-top:2px}
.btn.nudge,.in.nudge{animation:nudge3 .8s ease-in-out 3;box-shadow:0 0 0 4px rgba(226,180,92,.55)!important}
@keyframes nudge3{50%{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.btn.nudge,.in.nudge{animation:none}}

/* ---------- scene: zoom + its takes ---------- */
.sc-left{display:flex;flex-direction:column;gap:8px;min-width:0;align-self:start}
.sc-zoom{position:absolute;top:6px;inset-inline-end:6px;width:32px;height:32px;border:0;border-radius:9px;background:rgba(0,0,0,.6);color:#fff;
  display:grid;place-items:center;cursor:zoom-in;backdrop-filter:blur(4px)}
.sc-zoom svg{width:16px;height:16px}.sc-zoom:hover{background:rgba(0,0,0,.8)}
.sc-takes small{display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:5px}
.sc-takes>div{display:flex;gap:6px;flex-wrap:wrap}
.sc-take{position:relative;width:44px;aspect-ratio:9/16;padding:0;border:1.5px solid var(--line-2);border-radius:8px;overflow:hidden;background:#000;cursor:pointer}
.sc-take img,.sc-take video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.sc-take i{position:absolute;inset:0;display:grid;place-items:center;color:#fff}.sc-take i svg{width:14px;height:14px;filter:drop-shadow(0 1px 2px #000)}
.sc-take b{position:absolute;bottom:2px;inset-inline-start:2px;font:700 10px "Inter Tight";color:#fff;background:rgba(0,0,0,.6);border-radius:99px;padding:0 5px}
.sc-take.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-soft)}

/* the story step: one card per kind of ad */
.stories{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.stories button{display:flex;flex-direction:column;gap:4px;text-align:start;padding:14px;border:1.5px solid var(--line);border-radius:14px;
  background:var(--panel);color:var(--ink);cursor:pointer;font:inherit}
.stories button b{font-size:15px}.stories button small{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.stories button:hover{border-color:var(--line-2)}
.stories button.on{border-color:var(--ink);box-shadow:0 0 0 3px var(--accent-soft)}

/* recipes without pictures (owner, Nov 6: «na7i les images ici») */
.preset .pt{padding:16px}
.preset .ptag{font-size:11.5px;font-weight:600;color:var(--ink-3);background:var(--sunk);border-radius:7px;padding:2px 8px;margin-bottom:6px}

/* ---------- the film shown before it is made ---------- */
.film-ask{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.film-ask>div{flex:1;min-width:240px}.film-ask b{display:block;font-size:15px}.film-ask small{color:var(--ink-3);font-size:13px;line-height:1.6}
.film{margin-top:14px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.film-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.film-h b{display:block;font-size:17px}.film-h small{color:var(--ink-3);font-size:12.5px}
.film-chars{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.fchar{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:99px;background:var(--sunk)}
.fchar .av{width:30px;height:30px;border-radius:99px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}
.fchar .av.f{background:#2C2D30}.fchar .av.m{background:#6F7480}
.fchar b{display:block;font-size:13.5px}.fchar small{font-size:11.5px;color:var(--ink-3)}
.film-scenes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.film-scenes li{display:flex;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px}
.film-scenes .fn{width:28px;height:28px;flex:none;border-radius:99px;background:var(--sunk);display:grid;place-items:center;font:700 12px "Inter Tight",var(--font)}
.film-scenes .fb{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ftop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fseen{margin:0;font-size:14px;line-height:1.6}
.fl{font-size:12.5px;color:var(--ink-3)}

/* 4 video types (Nov 6): 2 × 2 cards, the options of the chosen type under them */
.modes.types4{grid-template-columns:repeat(2,minmax(0,1fr))}
.type-opts{margin-top:14px}
.type-opts .tog+.tog{margin-top:8px}
@media (max-width:600px){.modes.types4{grid-template-columns:1fr}}

/* ---------- ⚡ tokens: the balance chip, the wallet page ---------- */
.chip-cost.bal{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:8px 12px;border-radius:12px;text-decoration:none;color:var(--ink)}
.chip-cost.bal b{font:700 18px "Inter Tight",var(--font)}.chip-cost.bal span{font-size:11.5px;color:var(--ink-3)}
.chip-cost.bal.low b{color:var(--bad)}
.chip-cost.bal.hidden{display:none}
.wallet{max-width:860px}
.wbal{display:flex;align-items:baseline;gap:10px;padding:22px;border-radius:18px;background:var(--ink);color:var(--paper);margin:6px 0 22px}
.wbal b{font:700 44px "Inter Tight",var(--font)}.wbal span{opacity:.75}
.wh{font-size:18px;margin:22px 0 10px}
.packs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pack{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.pk-n{font-weight:600}.pk-t{font:700 24px "Inter Tight",var(--font)}.pk-p{color:var(--ink-2);margin-bottom:8px}
.pk-b{position:absolute;top:12px;inset-inline-end:12px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--ok-soft);color:var(--ok)}
.ptable{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px}
.ptable div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.ledger{display:flex;flex-direction:column}
.lg{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.lg-t{color:var(--ink-3);font-size:12px}.lg b{font:700 14px "Inter Tight",var(--font)}.lg b.plus{color:var(--ok)}.lg b.minus{color:var(--ink-2)}
.admtop{display:grid;grid-template-columns:2fr 1fr 1fr 2fr auto;gap:8px;margin:10px 0}
.accts{display:flex;flex-direction:column;gap:6px}
.acct{display:grid;grid-template-columns:2fr auto 3fr auto auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.acct small{display:block;color:var(--ink-3);font-size:12px}
@media (max-width:760px){.packs{grid-template-columns:repeat(2,minmax(0,1fr))}.ptable{grid-template-columns:1fr}
  .admtop,.acct{grid-template-columns:1fr}}

/* buying ⚡ with any amount of dollars (Nov 6) */
.buy{display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.buy-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.buy-in{display:flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.buy-in span{font:700 26px "Inter Tight",var(--font);color:var(--ink-2)}
.buy-in input{width:130px;border:0;background:transparent;font:700 30px "Inter Tight",var(--font);color:var(--ink);outline:none}
.buy-out{display:flex;align-items:center;gap:10px}.buy-out b{font:700 30px "Inter Tight",var(--font)}
.buy-out .pk-b{position:static}
.buy input[type=range]{width:100%;accent-color:var(--ink)}
.buy-picks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.buy-picks button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border:1px solid var(--line);border-radius:12px;
  background:transparent;color:var(--ink);cursor:pointer;font:inherit}
.buy-picks button b{font:700 16px "Inter Tight",var(--font)}.buy-picks button small{color:var(--ink-3);font-size:11px}
.buy-picks button.on{border-color:var(--ink);background:var(--paper)}
.ptable b small{font-weight:500;font-size:11px}
.admtop{grid-template-columns:2fr 1fr 1fr 1fr 2fr auto}
@media (max-width:760px){.buy-picks{grid-template-columns:repeat(3,minmax(0,1fr))}.admtop{grid-template-columns:1fr}}