/* DLX AI Studio — shared shell: feed + floating composer + popovers + lightbox.
   Identity: deeplegacyx.com void/cyan. Layout pattern: generation feed behind,
   composer docked bottom-center (Higgsfield-style interaction, DLX skin). */

@font-face{font-family:'Inter';font-style:normal;font-weight:200;font-display:swap;src:url(/fonts/inter-200.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/inter-300.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrainsmono-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrainsmono-500.woff2) format('woff2')}

:root{
  --void:#05070C; --void-2:#070A11; --panel:#0A0E16; --panel-2:#0C1220;
  --cyan:#39E6FF; --cyan-deep:#0E90A8; --violet:#8B6BFF;
  --chrome:#CDD6E4; --chrome-dim:#9AA6BA; --muted:#6B7688; --faint:#3D4759;
  --hair:rgba(205,214,228,.10); --hair-2:rgba(205,214,228,.06);
  --cyan-glow:rgba(57,230,255,.55);
  --err:#FF5D73; --ok:#4BE8A8;
  /* AMBAR = te asteapta ceva pe tine. ROSU = a esuat. Erau amestecate:
     No BACK anchor iesea ROSU pe 4 din 6 rinduri din lista de persone, adica
     alarma era starea NORMALA a unei persone noi. Cind totul e urgent, nimic nu
     mai e — chiar principiul scris mai jos, la slotul gol. Rosul e acum rezervat:
     poza inutilizabila, stergere, eroare de server. */
  --warn:#F5C36B;
  --term-bg:#020604; --term-green:#3DFF85; --term-green-dim:#1E9451; --term-hair:rgba(61,255,133,.14);
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --composer-w:min(980px,calc(100vw - 32px));
  --ease:cubic-bezier(.22,.61,.36,1);
  /* SCARA DE RAZĂ — 5 trepte. Înainte erau 12 valori ad-hoc (2,3,4,5,6,7,8,9,10,
     14,100,999), inclusiv DOUĂ valori pentru aceeași pilulă. Nu e o scară, e
     acumulare; de acolo venea senzația de „asamblat" chiar dacă nicio pagină nu
     arăta greșit. Orice rază nouă alege o treaptă, nu inventează una. */
  --r-1:4px; --r-2:8px; --r-3:10px; --r-4:14px; --r-pill:999px;
  /* Înălțimea REALĂ a antetului, scrisă de JS la fiecare randare/redimensionare
     (`hd.js` / `studio.js`). Valoarea de aici e doar plasa până rulează scriptul.
     Antetul e `position:fixed` și se RUPE pe mai multe rânduri sub 900px: 55px pe
     desktop, 110px la 390px. Offset-ul conținutului era codat de două ori cu
     valorile de desktop (82px pe `.pmain`, 56px pe `.feed-wrap`) și nu avea niciun
     override pe mobil — deci pe telefon titlul fiecărei pagini stătea sub bară:
     „Gallery" și „Identity Swap" ascunse COMPLET, „Persona" 28 din 40px. Cifra
     corectă exista deja în fișier (`.nav-menu{top:112px}` la ≤900px) dar fusese
     folosită doar pentru dropdown. Acum offset-ul se DERIVĂ din antet, nu se ghicește. */
  --hd-h:55px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--void);color:var(--chrome);font-family:var(--f-body);font-size:15px;
  line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(57,230,255,.28);color:#fff}
button{font-family:inherit;color:inherit}
a:focus-visible,button:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:var(--r-1)}
/* ---------- STAREA DE APĂSAT ----------
   Măsurat 2026-07-26: 58 de reguli `:hover`, iar `:active` apărea de ZERO ori în
   TOT produsul (studio.css, index/prices/train/login/signup.html). Pe desktop
   hover-ul acoperă intenția, dar pe telefon hover NU EXISTĂ — deci o atingere nu
   confirma absolut nimic până răspundea rețeaua, iar generările durează secunde.
   O apăsare trebuie să se simtă în momentul în care se întâmplă, nu când se termină.
   Deplasare de 1px + micșorare de 1,5%: suficient cât să fie citit ca „a luat", prea
   mic cât să mute layout-ul. `transform` e proprietate de compozitor, deci nu
   declanșează reflow. */
/* DOUA CAPCANE, prinse de review-ul adversarial inainte de deploy:
   (1) `transform` nu se ADAUGA, INLOCUIESTE. Sagetile din lightbox sint centrate cu
       `.lb .lb-nav{top:50%;transform:translateY(-50%)}`, deci un `transform` de apasare
       le-ar fi sters centrarea: butonul sarea ~22px la pointerdown, cursorul ieseau de
       pe el si clickul nu mai pornea deloc. Orice element care isi tine pozitia cu
       `transform` are nevoie de varianta lui de `:active`, nu de cea globala.
   (2) `.chip` sint <span>-uri de metadate, nu controale (studio.js:2094). Se apasau
       vizual fara sa faca nimic — afordanta falsa. Selectorul cere acum un buton/link. */
button:active:not(:disabled),
a.btn:active,.btn:active:not(:disabled),.btn-gen:active:not(:disabled),
.wiz-btn:active:not(:disabled),.btn-logout:active,.gpcell:active:not(:disabled),
button.chip:active,a.chip:active,.tools-nav a:active{transform:translateY(1px) scale(.985)}
.lb .lb-nav:active:not(:disabled){transform:translateY(-50%) scale(.94)}
.btn-gen:active:not(:disabled),.btn.p:active:not(:disabled),
.wiz-btn.primary:active:not(:disabled){
  box-shadow:0 0 0 1px rgba(57,230,255,.9),0 5px 14px -10px var(--cyan-glow)}
@media (prefers-reduced-motion:reduce){
  button:active:not(:disabled),a.btn:active,.btn:active:not(:disabled),
  .btn-gen:active:not(:disabled),.wiz-btn:active:not(:disabled),.btn-logout:active,
  .gpcell:active:not(:disabled),button.chip:active,a.chip:active,
  .tools-nav a:active{transform:none}
  /* aici NU `none` — ar scoate centrarea sagetii, nu doar animatia */
  .lb .lb-nav:active:not(:disabled){transform:translateY(-50%)}
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 80% at 50% -10%,rgba(57,230,255,.05),transparent 55%),
    radial-gradient(90% 60% at 100% 110%,rgba(139,107,255,.04),transparent 60%)}

/* ============ HEADER ============ */
.hd{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(5,7,12,.82);
  backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--hair)}
.hd-inner{max-width:1500px;margin:0 auto;padding:11px 16px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;letter-spacing:.3em;font-size:11.5px;
  font-family:var(--f-mono);text-transform:uppercase;color:#E6ECF5;white-space:nowrap;flex:0 0 auto}
.brand .mark{width:24px;height:24px}
.brand .prod{color:var(--cyan)}
.tools-nav{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.tools-nav::-webkit-scrollbar{display:none}
.tools-nav a{font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);padding:8px 9px;border-radius:var(--r-1);white-space:nowrap;transition:color .25s,background .25s,transform .08s ease}
.tools-nav a:hover{color:var(--chrome)}
.tools-nav a.on{color:var(--cyan);background:rgba(57,230,255,.08)}
.hd-right{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.hd-credits{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);border:1px solid rgba(57,230,255,.3);border-radius:var(--r-pill);padding:5px 12px;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.hd-credits .dot{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.btn-logout{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--hair);background:transparent;padding:7px 12px;border-radius:var(--r-1);
  color:var(--chrome-dim);cursor:pointer;transition:.3s}
.btn-logout:hover{border-color:var(--cyan);color:#fff}

/* ============ FEED — edge-to-edge uniform grid (Higgsfield-style) ============ */
.feed-wrap{position:relative;z-index:2;padding:calc(var(--hd-h) + 1px) 0 240px;max-width:none;margin:0}
.feed-head{display:flex;align-items:baseline;gap:14px;margin:14px 16px 12px}
.feed-head h1{font-weight:300;font-size:20px;letter-spacing:-.01em;color:#EDF2FA;margin:0}
.feed-head .sub{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:3px}
.feed-empty{grid-column:1/-1;border:1px dashed var(--hair);border-radius:var(--r-2);padding:60px 30px;text-align:center;
  color:var(--muted);font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0 16px}
.card{margin:0;border:0;border-radius:0;overflow:hidden;background:var(--panel);position:relative}
.card .img{display:block;width:100%;aspect-ratio:3/4;cursor:zoom-in;background:var(--panel)}
.card .img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card .img video{width:100%;height:100%;object-fit:cover}
.card .img .vplay{position:absolute;top:10px;left:10px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(4,6,10,.65);
  color:var(--cyan);pointer-events:none}
.card .img .vplay svg{width:13px;height:13px}
.ref-thumb.audio-chip{display:flex;align-items:center;justify-content:center;background:rgba(57,230,255,.06)}
.ref-thumb.audio-chip .anote{font-family:var(--f-mono);font-size:10px;color:var(--cyan);letter-spacing:.05em}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;z-index:300;
  background:rgba(10,16,26,.95);border:1px solid rgba(57,230,255,.35);border-radius:var(--r-2);color:#EDF2FA;
  font-size:13px;padding:10px 16px;transition:all .3s;max-width:min(480px,90vw)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.card:hover .img img{transform:scale(1.02)}
.card .ov{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;
  padding:26px 10px 8px;background:linear-gradient(180deg,transparent,rgba(5,7,12,.85));
  opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover .ov,.card:focus-within .ov{opacity:1;pointer-events:auto}
.chip{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--hair);border-radius:var(--r-pill);padding:3px 8px;color:var(--chrome-dim);
  background:rgba(5,7,12,.72);white-space:nowrap}
.chip.match{color:var(--cyan);border-color:rgba(57,230,255,.4)}
.chip.engine{color:var(--violet);border-color:rgba(139,107,255,.4)}
.card .ov .dl{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border:1px solid var(--hair);border-radius:var(--r-pill);background:rgba(5,7,12,.72);
  color:var(--chrome-dim);cursor:pointer;transition:.25s}
.card .ov .dl:hover{border-color:var(--cyan);color:#fff}
.card .ov .dl svg{width:12px;height:12px}

/* live job card — same cell footprint as images */
.card.live{box-shadow:inset 0 0 0 1px rgba(57,230,255,.35);min-height:0;display:flex}
.card.live .body{padding:16px;width:100%;overflow-y:auto;max-height:100%;scrollbar-width:thin}
.card.live{aspect-ratio:3/4}
.jstat-line{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.jstat-line .spin{width:11px;height:11px;border:1.5px solid var(--faint);border-top-color:var(--cyan);
  border-radius:50%;animation:spin .9s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.jstat-line.err{color:var(--err)}
.jstat-line .jid{color:var(--muted);letter-spacing:.1em;margin-left:auto}
.ministeps{display:flex;gap:5px;margin-top:12px}
.ministeps span{flex:1;height:2px;border-radius:var(--r-1);background:var(--faint);transition:background .3s}
.ministeps span.done{background:var(--term-green-dim)}
.ministeps span.on{background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow)}
.ministeps span.err{background:var(--err)}
.jmeta{margin-top:10px;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;color:var(--muted);
  display:flex;gap:10px;flex-wrap:wrap}
.jlog-toggle{margin-top:12px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--term-green-dim);background:none;border:0;cursor:pointer;padding:0}
.jlog-toggle:hover{color:var(--term-green)}
.jlog{display:none;margin-top:10px;max-height:220px;overflow-y:auto;background:var(--term-bg);
  border:1px solid var(--term-hair);border-radius:var(--r-1);padding:10px 12px;font-family:var(--f-mono);
  font-size:10.5px;line-height:1.7;color:var(--term-green);white-space:pre-wrap;word-break:break-word;
  scrollbar-width:thin;scrollbar-color:var(--term-green-dim) transparent}
.jlog.show{display:block}
.jlog .tl{display:block}
.jlog .tl::before{content:"> ";color:var(--term-green-dim)}
.jerr{margin-top:10px;font-size:12px;color:var(--err);border:1px solid rgba(255,93,115,.3);
  border-radius:var(--r-1);background:rgba(255,93,115,.06);padding:8px 10px;word-break:break-word}

/* ============ COMPOSER ============ */
.composer{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:70;
  width:var(--composer-w);border:1px solid rgba(205,214,228,.14);border-radius:var(--r-4);
  background:rgba(9,13,21,.92);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.95),0 0 0 1px rgba(57,230,255,.05);padding:12px 14px}
/* Referințele stau pe UN SINGUR RÂND, deasupra promptului, pe toată lățimea
   (referință: Higgsfield). Înainte erau flex-wrap într-un max-width de 300px,
   deci 14 referințe deveneau un bloc 4×4 care înălța composerul și strivea
   textul într-o casetă cu scroll intern. */
.comp-top{display:flex;flex-direction:column;gap:8px;align-items:stretch}
/* Referințele CURG pe rândul următor, nu derulează orizontal (Sebi 2026-07-25):
   cu plafonul ridicat la 16, un rând cu bară de derulare ascundea jumătate din
   poze și cerea o interacțiune în plus ca să le vezi. */
.refs{display:flex;gap:8px;flex:0 0 auto;flex-wrap:wrap;max-width:100%;
  row-gap:8px;padding-bottom:0}
.refs:empty{display:none}
.ref-add{width:56px;height:56px;border:1px dashed rgba(205,214,228,.25);border-radius:var(--r-2);
  background:transparent;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;transition:.25s;flex:0 0 auto}
.ref-add:hover{border-color:rgba(57,230,255,.5);color:var(--cyan)}
.ref-add svg{width:16px;height:16px}
.ref-add .lbl{font-family:var(--f-mono);font-size:7.5px;letter-spacing:.08em;text-transform:uppercase}
.ref-thumb{position:relative;width:56px;height:56px;border:1px solid var(--hair);border-radius:var(--r-2);
  overflow:hidden;flex:0 0 auto}
.ref-thumb img{width:100%;height:100%;object-fit:cover}
.ref-thumb .rx{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;
  border:0;background:rgba(5,7,12,.85);color:var(--chrome-dim);font-size:10px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.ref-thumb .rx:hover{color:#fff;background:var(--err)}
/* eticheta pe care se dă click ca să se insereze @Image N în prompt */
/* apăsabilă = inserează @Image N în prompt. Fundal OPAC, nu translucid: peste o
   poză deschisă un fundal semi-transparent făcea textul ilizibil. */
.ref-thumb .tag.tap{cursor:pointer;background:rgba(5,7,12,.9);color:var(--cyan)}
.ref-thumb .tag.tap:hover{background:var(--cyan);color:#05070C}
.ref-thumb img{cursor:zoom-in}
/* previzualizare mărită a unei referințe — separată de lightbox-ul feed-ului */
.ref-lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:12px;background:rgba(3,5,9,.93);cursor:zoom-out;padding:24px}
.ref-lb img{max-width:92vw;max-height:80vh;object-fit:contain;border-radius:var(--r-3);
  border:1px solid var(--hair);box-shadow:0 40px 120px -30px #000}
.ref-lb .cap{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan)}
/* Eticheta trebuie CITITĂ, nu ghicită (Sebi 2026-07-25: „nu se distinge deloc").
   Era 7px cu spațiere de literă pe fundal semi-transparent. Acum: 10px, bold,
   fundal opac, fără letter-spacing (mânca lățimea la „IMAGE 10"). */
.ref-thumb .tag{position:absolute;left:0;right:0;bottom:0;font-family:var(--f-mono);
  font-size:10px;font-weight:600;line-height:1.35;letter-spacing:0;text-transform:none;
  color:#EDF2FA;background:rgba(5,7,12,.9);
  padding:1px 2px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prompt-box{flex:1;min-width:0;position:relative}
/* Oglinda de evidențiere pentru @Image N. Stă exact sub casetă și trebuie să
   aibă IDENTIC font, line-height, padding și box-sizing cu textarea, altfel
   marcajul se decalează de text. Caseta e transparentă deasupra. */
.prompt-hl{position:absolute;left:0;right:0;top:0;pointer-events:none;overflow:hidden;
  box-sizing:border-box;border:0;padding:6px 4px;
  font-family:var(--f-body);font-size:14px;line-height:1.5;
  white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;color:transparent}
.prompt-hl mark.mn{background:rgba(57,230,255,.15);color:transparent;border-radius:var(--r-1);
  box-shadow:0 0 0 1px rgba(57,230,255,.4)}
/* token care nu mai are poză în spate (referința a fost ștearsă) */
.prompt-hl mark.mn.bad{background:rgba(255,90,90,.16);box-shadow:0 0 0 1px rgba(255,90,90,.5)}
/* Textul CREȘTE caseta în sus, nu derulează intern. Composerul e
   position:fixed cu bottom fix, deci mărirea înălțimii îl împinge în sus
   singură. JS-ul setează height = scrollHeight (vezi growPrompt). */
.prompt-box textarea{width:100%;min-height:56px;max-height:40vh;resize:none;overflow-y:auto;
  background:transparent;box-sizing:border-box;
  border:0;color:#EDF2FA;font-family:var(--f-body);font-size:14px;line-height:1.5;padding:6px 4px;
  /* aceeași bară subțire ca în popoverul Advanced (.pop), nu cea implicită a browserului */
  scrollbar-width:thin;scrollbar-color:var(--faint) transparent}
.prompt-box textarea::-webkit-scrollbar{width:6px}
.prompt-box textarea::-webkit-scrollbar-track{background:transparent}
.prompt-box textarea::-webkit-scrollbar-thumb{background:var(--faint);border-radius:var(--r-1)}
.prompt-box textarea::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.prompt-box textarea:focus{outline:none}
.prompt-box textarea::placeholder{color:var(--faint)}
/* deasupra oglinzii de evidențiere, fundal transparent ca marcajul să se vadă */
.prompt-box textarea{position:relative;z-index:1}
/* Generate pe ACELAȘI rând cu pilulele (referință: Higgsfield). Înainte
   `flex-wrap:wrap` îl împingea pe un rând separat de îndată ce pilulele umpleau
   lățimea. Acum rândul nu se rupe; pe ecrane înguste pilulele derulează
   orizontal, iar butonul rămâne fixat în dreapta. */
.comp-row{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:nowrap;min-width:0}
.comp-pills{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--faint) transparent}
.comp-pills::-webkit-scrollbar{height:4px}
.comp-pills::-webkit-scrollbar-thumb{background:var(--faint);border-radius:var(--r-1)}
.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--hair);border-radius:var(--r-pill);
  background:rgba(5,7,12,.55);padding:7px 11px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.06em;color:var(--chrome);cursor:pointer;transition:border-color .25s;white-space:nowrap}
.pill:hover{border-color:rgba(57,230,255,.45)}
/* Etichetele text (QUALITY/RES/AR/BATCH) sunt ascunse peste tot — se afișează
   doar valoarea, ca la Higgsfield (Sebi 2026-07-25). Rămân în DOM pentru
   cititoarele de ecran. */
.pill .k{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.pill .v{color:#EDF2FA}
.pill .cost{color:var(--cyan);font-size:10px}
.pill svg{width:10px;height:10px;color:var(--muted)}
.pill.stepper{gap:10px}
.pill.stepper button{border:0;background:none;color:var(--chrome-dim);cursor:pointer;font-size:14px;
  padding:0 2px;line-height:1}
.pill.stepper button:disabled{color:var(--faint);cursor:default}
.pill.stepper button:not(:disabled):hover{color:var(--cyan)}
.comp-spacer{flex:1}
.btn-gen{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;padding:10px 14px;border-radius:var(--r-3);cursor:pointer;white-space:nowrap;
  border:1px solid transparent;color:#02121A;background:linear-gradient(180deg,#7FF0FF,#39E6FF);
  box-shadow:0 0 0 1px rgba(57,230,255,.5),0 16px 44px -16px var(--cyan-glow);
  transition:box-shadow .3s,opacity .3s,transform .08s ease;position:relative;overflow:hidden}
.btn-gen:hover{box-shadow:0 0 0 1px rgba(57,230,255,.85),0 20px 55px -14px var(--cyan-glow)}
.btn-gen:disabled{opacity:.72;cursor:default}
.btn-gen .gcost{font-size:inherit;font-weight:500;background:transparent;
  border-radius:0;padding:0;letter-spacing:.04em}
.btn-gen.running::after{content:"";position:absolute;top:0;bottom:0;width:45%;left:-45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:btnscan 1.1s linear infinite}
@keyframes btnscan{to{left:110%}}
.comp-err{display:none;margin-top:9px;font-size:12.5px;color:var(--err);border:1px solid rgba(255,93,115,.3);
  border-radius:var(--r-2);background:rgba(255,93,115,.06);padding:8px 11px}
.comp-err.show{display:block}

/* ============ POPOVERS ============ */
.pop{position:fixed;z-index:90;min-width:210px;max-width:330px;max-height:min(430px,60vh);overflow-y:auto;
  background:#0A0F19;border:1px solid rgba(205,214,228,.16);border-radius:var(--r-3);
  box-shadow:0 26px 70px -18px rgba(0,0,0,.95);padding:6px;scrollbar-width:thin;
  scrollbar-color:var(--faint) transparent}
.pop .ph{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);padding:8px 10px 5px}
.pop .item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-radius:var(--r-2);
  background:none;padding:9px 10px;cursor:pointer;font-size:13px;color:var(--chrome);transition:background .2s}
.pop .item:hover{background:rgba(57,230,255,.07)}
.pop .item.sel{background:rgba(57,230,255,.1)}
.pop .item .nm{flex:1;min-width:0}
.pop .item .nm .d{display:block;font-size:10.5px;color:var(--muted);margin-top:1px}
.pop .item .mk{color:var(--cyan);font-size:12px;visibility:hidden}
.pop .item.sel .mk{visibility:visible}
.pop .item .pc{font-family:var(--f-mono);font-size:10px;color:var(--cyan)}
.pop .grp{border-top:1px solid var(--hair-2);margin-top:4px;padding-top:4px}
/* popoverul de @mention: thumbnail + „Image N", ca la Higgsfield */
.pop.mention-pop{min-width:180px;max-width:240px}
.pop .mention-item{gap:8px}
.pop .mention-item img{width:28px;height:28px;border-radius:var(--r-1);object-fit:cover;
  border:1px solid var(--hair);flex:0 0 auto}
.pop .mention-item .nm{font-size:12.5px}
.pop .mention-item .mk{display:none}
.pop .ctl{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px}
.pop .ctl label{font-size:12px;color:var(--chrome-dim)}
.pop .ctl select,.pop .ctl input[type=number],.pop .ctl input[type=text]{background:rgba(5,7,12,.7);
  border:1px solid var(--hair);border-radius:var(--r-1);color:#EDF2FA;font-family:var(--f-mono);font-size:12px;
  padding:6px 8px;width:120px}
.pop .ctl select:focus,.pop .ctl input:focus{outline:none;border-color:rgba(57,230,255,.55)}
.pop .note{font-family:var(--f-mono);font-size:9.5px;color:var(--muted);padding:2px 10px 8px;line-height:1.5}
/* toggle */
.tgl{position:relative;width:38px;height:20px;border-radius:var(--r-pill);border:1px solid var(--hair);
  background:rgba(5,7,12,.6);cursor:pointer;transition:.25s;flex:0 0 auto;padding:0}
.tgl::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--muted);transition:left .22s var(--ease),background .25s}
.tgl[aria-checked="true"]{border-color:rgba(57,230,255,.5);background:rgba(57,230,255,.08)}
.tgl[aria-checked="true"]::after{left:20px;background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow)}

/* dataset prompt picker */
.pop.wide{max-width:440px;min-width:min(440px,92vw)}
.dsp-actions{display:flex;gap:8px;padding:4px 10px 8px}
.dsp-actions button{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--hair);border-radius:var(--r-pill);background:none;color:var(--chrome-dim);
  padding:4px 10px;cursor:pointer}
.dsp-actions button:hover{border-color:var(--cyan);color:#fff}
.dsp-grp{padding:2px 0}
.dsp-grp .gh{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);padding:8px 10px 3px;cursor:pointer;border:0;background:none;width:100%}
.dsp-grp .gh .cnt{color:var(--muted);margin-left:auto;letter-spacing:.06em}
.dsp-item{display:flex;align-items:center;gap:9px;padding:5px 10px;font-size:12.5px;color:var(--chrome);cursor:pointer;border-radius:var(--r-1)}
.dsp-item:hover{background:rgba(57,230,255,.06)}
.dsp-item input{accent-color:var(--cyan);width:14px;height:14px;flex:0 0 auto}
.dsp-item .pv{color:var(--muted);font-size:10px;font-family:var(--f-mono);margin-left:auto;flex:0 0 auto}

/* ============ LIGHTBOX ============ */
.lb{position:fixed;inset:0;z-index:100;display:none;background:rgba(3,5,9,.9);backdrop-filter:blur(10px)}
.lb.show{display:flex}
.lb .lb-in{margin:auto;display:flex;gap:0;max-width:min(1240px,94vw);max-height:92vh;
  border:1px solid var(--hair);border-radius:var(--r-3);overflow:hidden;background:#070B12}
.lb .lb-img{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;background:#04060A}
.lb .lb-img img{max-width:100%;max-height:92vh;object-fit:contain}
.lb .lb-img video{max-width:100%;max-height:92vh;object-fit:contain}
.lb aside{width:280px;flex:0 0 auto;padding:18px;overflow-y:auto;border-left:1px solid var(--hair);
  scrollbar-width:thin;scrollbar-color:var(--faint) transparent}
.lb aside h3{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 12px;font-weight:500}
.lb .drow{display:flex;justify-content:space-between;gap:10px;padding:5px 0;
  border-bottom:1px dashed var(--hair-2);font-family:var(--f-mono);font-size:11px}
.lb .drow dt{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:9.5px;padding-top:2px}
.lb .drow dd{margin:0;color:var(--chrome);text-align:right;word-break:break-all}
.lb .lb-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.lb .lb-actions a,.lb .lb-actions button{flex:1;display:inline-flex;align-items:center;justify-content:center;
  line-height:1;text-align:center;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--hair);border-radius:var(--r-1);
  background:none;color:var(--chrome-dim);padding:9px 10px;cursor:pointer;transition:.25s}
.lb .lb-actions a:hover{border-color:var(--cyan);color:#fff}
.lb .lb-actions button.danger:hover{border-color:var(--err);color:#fff}
.lb .lb-x{position:absolute;top:18px;right:22px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--hair);background:rgba(5,7,12,.7);color:var(--chrome-dim);font-size:17px;
  cursor:pointer;z-index:2}
.lb .lb-x:hover{color:#fff;border-color:var(--cyan)}
.lb .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  border:1px solid var(--hair);background:rgba(5,7,12,.7);color:var(--chrome-dim);font-size:18px;cursor:pointer}
.lb .lb-nav:hover{color:#fff;border-color:var(--cyan)}
.lb .lb-prev{left:18px}.lb .lb-next{right:18px}

/* gallery tabs */
.gtabs{display:flex;gap:4px;margin:6px 4px 16px}
.gtabs button{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);background:none;border:1px solid transparent;border-radius:var(--r-pill);padding:7px 16px;cursor:pointer;transition:.25s}
.gtabs button:hover{color:var(--chrome)}
.gtabs button.on{color:var(--cyan);border-color:rgba(57,230,255,.35);background:rgba(57,230,255,.07)}
.load-more{display:block;margin:26px auto 0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;border:1px solid var(--hair);border-radius:var(--r-pill);background:none;
  color:var(--chrome-dim);padding:10px 26px;cursor:pointer;transition:.25s}
.load-more:hover{border-color:var(--cyan);color:#fff}

/* ============ RESPONSIVE ============ */
@media(max-width:760px){
  .brand .tool-name{display:none}
  .feed{grid-template-columns:repeat(2,1fr)}
  .feed-wrap{padding-bottom:300px}
  .refs{max-width:100%}
  .composer{bottom:8px}
  .lb .lb-in{flex-direction:column;overflow-y:auto}
  .lb aside{width:100%;border-left:0;border-top:1px solid var(--hair)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ============ Grouped topbar nav (option A — approved 2026-07-23) ============ */
.tools-nav{overflow:visible}
.nav-grp{position:relative}
.nav-grp>button{font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);padding:8px 10px;border-radius:var(--r-1);white-space:nowrap;background:none;border:0;cursor:pointer;
  transition:color .25s,background .25s;display:inline-flex;align-items:center;gap:6px}
.nav-grp>button .car{font-size:7px;opacity:.65;transition:transform .25s}
.nav-grp>button:hover{color:var(--chrome)}
.nav-grp.on>button{color:var(--cyan);background:rgba(57,230,255,.08)}
.nav-grp:hover>button .car,.nav-grp:focus-within>button .car{transform:translateY(1px)}
.nav-menu{position:absolute;top:100%;left:0;padding-top:6px;display:none;z-index:60}
.nav-menu .nav-menu-in{min-width:172px;background:#0A0E16;border:1px solid var(--hair);border-radius:var(--r-2);
  padding:6px;display:flex;flex-direction:column;gap:1px;box-shadow:0 14px 40px rgba(0,0,0,.55)}
.nav-grp:hover .nav-menu,.nav-grp:focus-within .nav-menu,.nav-grp.open .nav-menu{display:block}
.nav-menu a{display:block;padding:8px 11px;border-radius:var(--r-1)}
@media (max-width: 900px){
  .hd-inner{flex-wrap:wrap;row-gap:0}
  .tools-nav{order:3;flex-basis:100%;overflow-x:auto}
  .hd-right{margin-left:auto}
  .nav-menu{position:fixed;left:12px;right:12px;top:calc(var(--hd-h) + 2px);padding-top:0}
  .nav-menu .nav-menu-in{min-width:0}
}

/* MOBIL + TABLETĂ (≤1024px): Generate pe rând propriu, lățime completă — exact layout-ul
   Higgsfield pe telefon ȘI pe iPad (capturi Sebi 2026-07-25). Măsurat la 768px:
   cu butonul pe același rând, pilulele aveau deficit de 167px pe GPT (6 pilule)
   și 15px chiar și pe Nano Banana. Motivul original: cu butonul pe același
   rând îi rămâneau 167px din 473 necesari pilulelor, iar prețul era ilizibil
   într-un chip de 10px. Pe desktop rămâne pe acelaşi rând, cum a cerut. */
@media (max-width:1024px){
  .comp-row{flex-wrap:wrap;row-gap:10px}
  .comp-pills{flex:1 1 100%;order:1}
  .btn-gen{order:2;width:100%;justify-content:center;padding:13px 16px;font-size:12px;gap:8px}
  .pill{padding:7px 10px}
}

/* contor de caractere pe prompt — discret, apare doar aproape de limită */
.prompt-count{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;color:var(--muted);
  text-align:right;padding:0 4px;min-height:0}
.prompt-count.near{color:var(--warn,#E0B354)}
.prompt-count.at{color:var(--err)}
/* nota afişată când s-a atins plafonul de referinţe */
.refs-cap{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;color:var(--muted);
  align-self:center;padding:0 4px;white-space:nowrap}

/* ============ JOB INSPECTOR (/job?id=…) ============
   Ce s-a TRIMIS / ce s-a ÎNTORS / cât a COSTAT, pentru un singur job.
   Reia paleta și tipografia shell-ului; singurul element nou e secțiunea cu
   antet monospace, ca să se poată citi cele patru blocuri de la distanță. */
.ji-wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.ji-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:18px 0 6px}
.ji-head h1{font-weight:300;font-size:20px;letter-spacing:-.01em;color:#EDF2FA;margin:0}
.ji-head .jid{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}
.ji-sub{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:20px}
.ji-sub a{color:var(--chrome-dim);border-bottom:1px solid var(--hair)}
.ji-sub a:hover{color:var(--cyan);border-color:var(--cyan)}
.ji-status{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--hair);border-radius:var(--r-pill);padding:3px 10px;color:var(--chrome-dim)}
.ji-status.done{color:var(--ok);border-color:rgba(75,232,168,.35)}
.ji-status.error{color:var(--err);border-color:rgba(255,93,115,.35)}
.ji-status.live{color:var(--cyan);border-color:rgba(57,230,255,.35)}
.ji-sec{border:1px solid var(--hair);border-radius:var(--r-2);background:var(--panel);
  padding:16px 18px;margin-bottom:14px}
.ji-sec>h2{font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 14px;font-weight:500}
.ji-sec>h2 .n{color:var(--muted);letter-spacing:.1em;margin-left:8px}
.ji-note{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.05em;color:var(--muted);
  line-height:1.6;margin:10px 0 0}
.ji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px 18px}
.ji-grid .drow{display:flex;justify-content:space-between;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--hair-2);font-size:12.5px}
.ji-grid .drow dt{font-family:var(--f-mono);color:var(--muted);letter-spacing:.08em;
  text-transform:uppercase;font-size:9.5px;padding-top:2px}
.ji-grid .drow dd{margin:0;color:var(--chrome);text-align:right;word-break:break-word}
.ji-grid .drow dd.mono{font-family:var(--f-mono);font-size:11px}
.ji-sub-h{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 8px}
.ji-prompt{position:relative;font-size:13px;color:var(--chrome-dim);line-height:1.65;
  white-space:pre-wrap;word-break:break-word;max-height:230px;overflow-y:auto;margin:0;
  background:var(--void-2);border:1px solid var(--hair-2);border-radius:var(--r-2);padding:12px 14px}
.ji-copy{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--hair);background:transparent;border-radius:var(--r-2);padding:7px 12px;
  cursor:pointer;color:var(--chrome-dim);margin-top:8px}
.ji-copy:hover{border-color:var(--cyan);color:#fff}
.ji-refs{display:flex;gap:8px;flex-wrap:wrap}
.ji-refs img{width:64px;height:64px;object-fit:cover;border-radius:var(--r-2);border:1px solid var(--hair)}
.ji-outs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.ji-out{border:1px solid var(--hair);border-radius:var(--r-2);overflow:hidden;background:var(--void-2)}
.ji-out .th{display:block;aspect-ratio:3/4;background:#04060A}
.ji-out .th img,.ji-out .th video{width:100%;height:100%;object-fit:cover}
.ji-out .meta{padding:10px 12px}
.ji-out .meta .drow{display:flex;justify-content:space-between;gap:8px;padding:3px 0;font-size:11.5px}
.ji-out .meta .drow dt{font-family:var(--f-mono);color:var(--muted);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
.ji-out .meta .drow dd{margin:0;color:var(--chrome);text-align:right;font-family:var(--f-mono);
  font-size:10.5px;word-break:break-all}
.ji-cost{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-end}
.ji-cost .big{font-size:30px;font-weight:200;color:#EDF2FA;line-height:1.1}
.ji-cost .big .u{font-size:12px;color:var(--muted);font-family:var(--f-mono);letter-spacing:.16em;
  margin-left:6px;text-transform:uppercase}
.ji-cost .lbl{font-family:var(--f-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.ji-log{max-height:460px;overflow-y:auto;background:var(--term-bg);border:1px solid var(--term-hair);
  border-radius:var(--r-2);padding:12px 14px;font-family:var(--f-mono);font-size:10.5px;line-height:1.85;
  color:var(--term-green);white-space:pre-wrap;word-break:break-word}
.ji-log .tl{display:block}
.ji-log .tl::before{content:"> ";color:var(--term-green-dim)}
.ji-log .tl.bad{color:var(--err)}
.ji-err{font-size:13px;color:var(--err);border:1px solid rgba(255,93,115,.35);
  background:rgba(255,93,115,.06);border-radius:var(--r-2);padding:14px 16px;margin-bottom:14px;
  white-space:pre-wrap;word-break:break-word}
.ji-err strong{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:6px}
.ji-empty{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted)}
/* link discret spre inspector din feed — aceeași greutate ca „status log" */
.jlink{display:inline-block;margin-top:12px;margin-left:14px;font-family:var(--f-mono);
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.jlink:hover{color:var(--cyan)}
@media (max-width:700px){
  .ji-cost{gap:18px}
  .ji-cost .big{font-size:24px}
}

/* ============ ADMIN DASHBOARD (/admin) ============
   Toate generările, ale tuturor userilor, cu COST (al nostru) · TAXAT (clientul)
   · MARJĂ. Reia paleta shell-ului; codul de culoare al celor trei cifre e
   consecvent peste tot în pagină, ca ochiul să nu le confunde niciodată:
     violet = costul NOSTRU   ·   cyan = ce a plătit clientul   ·   verde = marja
   „—" (muted) înseamnă DATE LIPSĂ, niciodată zero. */
.ad-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:12px}
.ad-tile{border:1px solid var(--hair);border-radius:var(--r-2);background:var(--void-2);padding:14px 16px;
  display:flex;flex-direction:column;gap:10px;min-width:0}
.ad-tile .lbl{font-family:var(--f-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted)}
.ad-tile .sub{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;color:var(--chrome-dim)}
.ad-tile .cov{font-family:var(--f-mono);font-size:9px;letter-spacing:.04em;color:var(--muted);
  line-height:1.5;border-top:1px solid var(--hair-2);padding-top:8px}
/* acoperirea zero e un AVERTISMENT, nu o notă de subsol — cifrele de deasupra lipsesc */
.ad-tile .cov.none{color:#C89A3C}
.ad-three{display:flex;flex-direction:column;gap:7px}
.ad-n{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ad-n .k{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.ad-n .v{font-family:var(--f-mono);font-size:15px;color:#EDF2FA;text-align:right;word-break:break-word}
.ad-n.ours .v{color:var(--violet)}
.ad-n.charged .v{color:var(--cyan)}
.ad-n.mrg .v{color:var(--ok)}
.ad-note{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.02em;color:var(--muted);
  line-height:1.75;margin:14px 0 0;border-top:1px solid var(--hair-2);padding-top:12px}
.ad-note b{color:var(--chrome-dim)}

/* defalcări */
/* `min(440px,100%)` — nu doar 440px: pe un ecran de 390px un minmax fix de 440
   forțează coloana peste viewport și întreaga PAGINĂ capătă scroll orizontal.
   Cu min() lățimea minimă nu poate depăși containerul, iar tabelul lat scrollează
   în cutia lui (.ad-bd-scroll), cum trebuie. */
.ad-bds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));
  gap:14px;margin-top:16px}
.ad-bd{border:1px solid var(--hair-2);border-radius:var(--r-2);background:var(--void-2);padding:12px 14px;min-width:0}
.ad-bd h3{font-family:var(--f-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--chrome-dim);margin:0 0 10px;font-weight:500}
/* tabelele pot depăși coloana pe ecrane mici — scroll în CONTAINERUL lor,
   niciodată scroll orizontal pe pagină */
.ad-bd-scroll{max-height:260px;overflow:auto;scrollbar-width:thin;
  scrollbar-color:var(--faint) transparent}
.ad-bd table{width:100%;min-width:390px;border-collapse:collapse;font-size:11.5px}
.ad-bd th{position:sticky;top:0;background:var(--void-2);font-family:var(--f-mono);font-size:8.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;
  text-align:left;padding:4px 6px;border-bottom:1px solid var(--hair)}
.ad-bd td{padding:4px 6px;border-bottom:1px solid var(--hair-2);color:var(--chrome)}
/* Prima coloană poartă chei lungi (email-uri, „nano-banana-pro"). Fără asta,
   `word-break` le rupea în mijlocul cuvântului („vide/o", „crea/te") — ilizibil.
   Se taie cu elipsă, iar textul integral rămâne în `title`. */
.ad-bd td:first-child{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-bd th:first-child{white-space:nowrap}
.ad-bd th.num,.ad-bd td.num{text-align:right;white-space:nowrap}
.ad-bd td.mono{font-family:var(--f-mono);font-size:10.5px}
.ad-bd td.ours{color:var(--violet)}
.ad-bd td.charged{color:var(--cyan)}
.ad-bd td.mrg{color:var(--ok)}
.ad-bd td.cov{color:var(--muted);font-size:9.5px}
.ad-bd td.cov.none{color:#C89A3C}

/* filtre */
.ad-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px 12px;
  align-items:end}
.ad-filters label{display:flex;flex-direction:column;gap:5px;min-width:0}
.ad-filters label>span{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.ad-filters select,.ad-filters input{width:100%;background:var(--void-2);color:var(--chrome);
  border:1px solid var(--hair);border-radius:var(--r-1);padding:7px 9px;font-family:var(--f-mono);
  font-size:11px;min-width:0}
.ad-filters select:focus,.ad-filters input:focus{border-color:var(--cyan);outline:none}
.ad-filter-btns{display:flex;align-items:flex-end}
.ad-filter-btns .ji-copy{margin-top:0}

/* lista de generări */
.ad-row{display:grid;
  grid-template-columns:64px minmax(130px,1.25fr) minmax(84px,.85fr) minmax(112px,1.05fr)
                        minmax(76px,.75fr) minmax(100px,.9fr) repeat(3,minmax(84px,.8fr));
  gap:10px;align-items:center;padding:9px 8px;border-bottom:1px solid var(--hair-2);
  color:var(--chrome);transition:background .18s}
a.ad-row:hover{background:rgba(57,230,255,.045)}
.ad-head{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--hair);padding-bottom:8px}
.ad-head:hover{background:none}
.ad-c{display:flex;flex-direction:column;gap:2px;min-width:0}
.ad-c b{font-weight:400;font-size:12px;color:var(--chrome);overflow-wrap:anywhere}
.ad-c .sub{font-family:var(--f-mono);font-size:9px;letter-spacing:.04em;color:var(--muted);
  overflow-wrap:anywhere}
/* „partial n/m" trebuie să sară în ochi — e singurul indiciu că cifra de lângă
   acoperă doar o parte din job */
.ad-c .sub.warn{color:#C89A3C}
.ad-c .mono{font-family:var(--f-mono);font-size:10.5px}
.ad-user b{color:#EDF2FA}
.ad-num{text-align:right;align-items:flex-end}
.ad-num.ours b{color:var(--violet);font-family:var(--f-mono)}
.ad-num.charged b{color:var(--cyan);font-family:var(--f-mono)}
.ad-num.mrg b{color:var(--ok);font-family:var(--f-mono)}
.ad-status{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--hair);border-radius:var(--r-pill);padding:2px 8px;color:var(--chrome-dim);
  align-self:flex-start;white-space:nowrap}
.ad-status.ok{color:var(--ok);border-color:rgba(75,232,168,.35)}
.ad-status.err{color:var(--err);border-color:rgba(255,93,115,.35)}
.ad-status.live{color:var(--cyan);border-color:rgba(57,230,255,.35)}
.ad-err{grid-column:1/-1;font-family:var(--f-mono);font-size:9.5px;line-height:1.5;color:var(--err);
  background:rgba(255,93,115,.06);border-left:2px solid rgba(255,93,115,.4);
  padding:6px 10px;border-radius:0 var(--r-1) var(--r-1) 0;overflow-wrap:anywhere}

/* miniatura: imagine = WebP mic; video = primul cadru, FĂRĂ autoplay */
.ad-th{width:64px;height:64px;border-radius:var(--r-2);overflow:hidden;background:#04060A;
  border:1px solid var(--hair);position:relative;flex:0 0 auto}
.ad-th img,.ad-th video{width:100%;height:100%;object-fit:cover;display:block}
.ad-th .vbadge{position:absolute;right:3px;bottom:3px;font-size:8px;color:#fff;
  background:rgba(5,7,12,.75);border-radius:var(--r-1);padding:1px 4px;line-height:1.4}
.ad-th .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:8.5px;letter-spacing:.12em;color:var(--faint)}

/* paginare */
.ad-pager{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--hair-2)}
.ad-pager .ji-copy{margin-top:0}
.ad-pager .ji-copy:disabled{opacity:.35;cursor:not-allowed;border-color:var(--hair)}
.ad-pinfo{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.05em;color:var(--muted);
  flex:1 1 auto;min-width:0;overflow-wrap:anywhere}

/* Sub 1000px rândul-grilă devine card stivuit: fiecare celulă își poartă eticheta
   din data-l. Așa dispare nevoia de scroll orizontal pe pagină. */
@media (max-width:1000px){
  .ad-row{grid-template-columns:64px 1fr;gap:8px 12px;padding:12px 6px;align-items:start}
  .ad-head{display:none}
  .ad-th{grid-row:span 8}
  .ad-c{flex-direction:row;justify-content:space-between;align-items:baseline;gap:10px;
    text-align:left}
  .ad-num{text-align:left;align-items:baseline}
  .ad-c::before{content:attr(data-l);font-family:var(--f-mono);font-size:8.5px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:0 0 auto}
  .ad-c[data-l=""]::before{content:none}
  .ad-err{grid-column:2}
  .ad-c b,.ad-c .sub,.ad-c .mono{text-align:right}
}
@media (max-width:520px){
  .ad-row{grid-template-columns:48px 1fr}
  .ad-th{width:48px;height:48px}
  .ad-n .v{font-size:13.5px}
}

/* ---------- Walkthrough /dataset (Sebi 2026-07-26: „nu inteleg deloc cum
   sa-l folosesc, userii cu atat mai putin"). Fluxul e secvential prin natura
   lui — personaj, ancore, pachet, confirmare — iar bara densa de pilule il
   ascundea. Pasii il fac explicit: la fiecare moment se vede UN singur lucru
   de facut si de ce conteaza. */
.wiz{display:flex;flex-direction:column;gap:10px}
.wiz-steps{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.wiz-step{display:flex;align-items:center;gap:7px;padding:5px 10px;border-radius:var(--r-pill);
  border:1px solid var(--hair);color:var(--muted);font-size:12px;white-space:nowrap;
  background:rgba(255,255,255,.02);cursor:pointer;transition:.18s var(--ease)}
.wiz-step .n{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:var(--r-pill);border:1px solid var(--hair);font-family:var(--f-mono);font-size:11px}
.wiz-step.on{color:var(--chrome);border-color:rgba(57,230,255,.45);background:rgba(57,230,255,.07)}
.wiz-step.on .n{border-color:var(--cyan);color:var(--cyan)}
.wiz-step.done{color:var(--chrome-dim)}
.wiz-step.done .n{border-color:rgba(75,232,168,.5);color:var(--ok)}
.wiz-step.lock{opacity:.45;cursor:not-allowed}
.wiz-body{display:flex;flex-direction:column;gap:9px;min-height:96px;max-height:44vh;overflow:auto;
  padding:2px 1px}
.wiz-h{font-size:14px;color:var(--chrome)}
.wiz-sub{font-size:12px;color:var(--muted);line-height:1.45}
.wiz-nav{display:flex;gap:8px;align-items:center;justify-content:space-between}
.wiz-nav .sp{flex:1}
.wiz-btn{padding:8px 16px;border-radius:var(--r-3);border:1px solid var(--hair);background:rgba(255,255,255,.03);
  color:var(--chrome);font-size:13px;cursor:pointer;transition:.18s var(--ease)}
.wiz-btn:hover{border-color:rgba(57,230,255,.4)}
.wiz-btn[disabled]{opacity:.4;cursor:not-allowed}
.wiz-btn.primary{background:linear-gradient(180deg,#7FF0FF,#39E6FF);border-color:transparent;
  color:#02121A;font-weight:600;
  box-shadow:0 0 0 1px rgba(57,230,255,.5),0 12px 32px -14px var(--cyan-glow)}
.wiz-btn.primary:hover{border-color:transparent;
  box-shadow:0 0 0 1px rgba(57,230,255,.85),0 18px 46px -14px var(--cyan-glow)}
/* lista de personaje / ancore */
.wiz-list{display:flex;flex-direction:column;gap:5px}
.wiz-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-3);
  border:1px solid var(--hair);background:rgba(255,255,255,.02);cursor:pointer}
.wiz-row:hover{border-color:rgba(57,230,255,.35)}
.wiz-row.sel{border-color:rgba(57,230,255,.55);background:rgba(57,230,255,.07)}
.wiz-row .nm{flex:1;font-size:13px;color:var(--chrome)}
.wiz-row .d{font-size:11px;color:var(--muted);margin-left:8px}
.wiz-row .x{border:none;background:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 6px}
.wiz-row .x:hover{color:var(--err)}
/* grila de ancore, cu miniaturi — textul singur nu spune nimic despre o poza */
.wiz-anchors{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.wiz-anchor{position:relative;border-radius:var(--r-3);overflow:hidden;border:1px solid var(--hair);
  aspect-ratio:3/4;background:var(--panel-2)}
.wiz-anchor img{width:100%;height:100%;object-fit:cover;display:block}
.wiz-anchor .cap{position:absolute;left:0;right:0;bottom:0;padding:4px 6px;font-size:10px;
  color:var(--chrome);background:linear-gradient(transparent,rgba(0,0,0,.85));line-height:1.25}
.wiz-anchor .x{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:var(--r-pill);
  border:none;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;font-size:12px;line-height:1}
.wiz-miss{display:flex;flex-wrap:wrap;gap:6px}
.wiz-tag{padding:4px 9px;border-radius:var(--r-pill);font-size:11px;border:1px solid var(--hair);color:var(--muted)}
.wiz-tag.need{border-color:rgba(255,93,115,.45);color:var(--err)}
.wiz-tag.have{border-color:rgba(75,232,168,.45);color:var(--ok)}
.wiz-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wiz-form select,.wiz-form input[type=text]{background:var(--panel-2);border:1px solid var(--hair);
  color:var(--chrome);border-radius:var(--r-2);padding:7px 9px;font-size:12px;font-family:inherit}
.wiz-sum{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--chrome-dim)}
.wiz-sum b{color:var(--chrome);font-weight:600}

/* ---------- pagina Persona ---------- */
/* antetul e `position:fixed`, deci pagina trebuie sa inceapa sub el —
   altfel titlul intra sub bara si se taie */
.pmain{max-width:1180px;margin:0 auto;padding:calc(var(--hd-h) + 27px) 22px 90px}
.ph1{font-size:26px;margin:0 0 6px;letter-spacing:-.02em}
.psub{font-size:13px;color:var(--muted);margin:0 0 22px;max-width:78ch;line-height:1.55}
.persona-page .prow{align-items:flex-start}
.persona-page .pmeta{padding-top:2px}
.warnline.warn-amber{color:var(--warn);border-color:rgba(245,195,107,.35);background:rgba(245,195,107,.06)}
/* Butonul care REPARA problema era cel mai sters element din banner: mesajul
   striga, solutia soptea. Acum el e cel care se vede. */
.warnline .btn.xs{border-color:rgba(205,214,228,.22);color:var(--chrome);background:rgba(255,255,255,.05)}
.warnline .btn.xs:hover:not(:disabled){border-color:rgba(122,229,255,.55);color:#fff}
.warnline .gb{color:var(--muted);font-style:normal}
.wiz-anchor.pend{border-color:rgba(245,195,107,.45)}
.wiz-anchor .approve{position:absolute;left:6px;bottom:6px;right:6px}
.wiz-anchor .vbad{position:absolute;top:6px;left:6px;font-size:9px;padding:2px 6px;border-radius:var(--r-pill);
  background:rgba(255,93,115,.9);color:#fff}
/* ---------- slotul gol ----------
   Era ROȘU, cu ramă roșie, la aceeași mărime ca o poză reală. Rezultatul, văzut
   pe pagina live 2026-07-26: 16 cutii roșii goale dominau ecranul, pozele
   adevărate se pierdeau printre ele, iar roșul nu mai însemna nimic — dacă
   totul e urgent, nimic nu e. (Sebi: „nu inteleg nimic din butoanele alea".)

   Acum: golul e GOL — stins, secundar, mai mic. Roșul e păstrat pentru un
   singur lucru, cel care chiar strică setul: ancora de spate care lipsește. */
/* Cardurile cu poza incep cu o imagine 3:4; cele goale incepeau direct cu titlul,
   deci grila amesteca doua forme de card (Sebi, 2026-07-26: „nu pui si un placeholder
   pe cardurile care nu au poza generata ca sa aiba toate acelasi design?"). Acum golul
   are aceeasi cutie de imagine, ocupata de o silueta cu chenar de INCADRARE — vezi CE
   decupaj lipseste, nu doar ca lipseste ceva. Padding-ul trece de pe card pe text, ca
   placeholder-ul sa fie lipit de margini exact ca o poza. */
.wiz-anchor.gapc{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  gap:4px;border-style:dashed;border-color:var(--hair);padding:0 0 8px;text-align:center;background:none}
.wiz-anchor.gapc:hover{border-color:rgba(122,229,255,.4)}
.wiz-anchor.gapc .ghost{width:100%;aspect-ratio:3/4;display:block;flex:none;
  border-radius:var(--r-3) var(--r-3) 0 0;background:rgba(255,255,255,.015);margin-bottom:4px}
.wiz-anchor.gapc .ghost .gf{fill:none;stroke:var(--faint);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.wiz-anchor.gapc .ghost .gc{fill:rgba(57,230,255,.05);stroke:var(--cyan-deep);stroke-width:1.2;
  stroke-dasharray:3.5 2.5}
.wiz-anchor.gapc:hover .ghost .gc{stroke:var(--cyan)}
.wiz-anchor.gapc .gt{font-size:11.5px;color:var(--chrome-dim);font-weight:600;letter-spacing:-.01em;
  padding:0 8px}
.wiz-anchor.gapc .gw{font-size:9.5px;color:var(--muted);line-height:1.35;padding:0 8px}
.wiz-anchor.gapc .gp{font-family:var(--f-mono);font-size:9px;color:var(--muted);opacity:.7;
  letter-spacing:.04em;padding:0 8px}
.wiz-anchor.gapc .gb{font-size:9px;color:var(--muted);opacity:.75;font-style:italic;padding:0 8px}
/* slotul care ÎNCĂ nu se poate genera: se vede că e în așteptare, nu că e stricat */
.wiz-anchor.gapc.later{opacity:.55}
.wiz-anchor.gapc.later:hover{opacity:.8}
/* SINGURUL gol care merită roșu: fără el, tot setul iese cu fața la cameră */
.wiz-anchor.gapc.critical{border-color:rgba(255,93,115,.45);background:rgba(255,93,115,.04)}
.wiz-anchor.gapc.critical .gt{color:var(--err)}
/* chenarul de incadrare urmeaza starea cardului — pe singurul gol care merita rosu */
.wiz-anchor.gapc.critical .ghost .gc{stroke:var(--err);fill:rgba(255,93,115,.06)}
.wiz-anchor.gapc.critical:hover .ghost .gc{stroke:var(--err)}
/* Ștergerea nu se ascunde, dar nici nu concurează cu acțiunea principală:
   stinsă până o atingi, roșie când o atingi. */
.btn.danger{color:var(--muted);border-color:transparent}
.btn.danger:hover{color:var(--err);border-color:var(--err)}
.wiz-anchor.gapc .ga{display:flex;flex-direction:column;gap:4px;margin-top:3px;padding:0 8px}
/* Bara de acțiuni: acțiunea principală trebuie să ARATE principală, iar textul
   explicativ să treacă pe rândul lui în loc să înghesuie butoanele. */
.wiz-form{align-items:flex-start}
.wiz-form .hint{font-size:11px;color:var(--muted);flex-basis:100%;line-height:1.5}
/* `.btn.p` își poartă singur pielea acum (vezi „UN SINGUR buton principal").
   Supradefinirile de aici re-puneau cyan-ul PLAT și, având specificitate mai mare,
   câștigau — deci butonul principal arăta altfel în bara de sub ancore decât în
   restul paginii. Rămâne doar ce ține de AȘEZARE, nu de piele. */
.wiz-form .btn.p{flex:0 0 auto}
/* „Keep" e o confirmare, nu o acțiune ștearsă — se vede ce apeși.
   Stătea peste etichetă: ambele ancorate la `bottom`, deci „Keep" și
   „Full body · back" se suprapuneau ilizibil (văzut pe pagina live). Eticheta
   urcă deasupra butonului pe pozele în așteptare. */
.wiz-anchor .approve{background:rgba(75,232,168,.14);border-color:rgba(75,232,168,.5);color:var(--ok)}
.wiz-anchor .approve:hover{background:rgba(75,232,168,.24)}
/* `.pend .cap{bottom:32px}` a DISPĂRUT de aici. Era peticul care ridica eticheta
   ca să nu stea peste butonul „Keep" — ambele erau ancorate la `bottom` și se
   suprapuneau ilizibil. Odată ce eticheta și acțiunile au ieșit din poziționarea
   absolută (vezi „cardul de ancoră"), nu mai există suprapunere de reparat.
   Regula rămâne doar pentru cardurile din AFARA paginii /persona, care încă țin
   eticheta peste imagine. */
.wiz-anchor.pend .cap{bottom:32px}
/* Ierarhie între grupuri: „ce ai" contează mai mult decât „ce lipsește" */
.group + .group{margin-top:26px}
.ghead{display:flex;align-items:baseline;gap:9px;margin-bottom:11px;flex-wrap:wrap}
.ghead .t{font-size:15px;font-weight:600;letter-spacing:-.01em}
.ghead .c{font-family:var(--f-mono);font-size:10px;color:var(--muted);
  border:1px solid var(--hair);border-radius:var(--r-pill);padding:1px 7px}
/* ADNOTAREA STA SUB TITLUL EI. Era `margin-left:auto; text-align:right`, deci
   plutea la marginea din dreapta a unei pagini de 1440px, la ~300px de titlul pe
   care il explica, aliniata invers fata de tot restul paginii. Un text explicativ
   care nu atinge lucrul pe care il explica nu e citit. Trece pe rindul lui, sub
   titlu, aliniat la stinga ca restul; `flex-basis:100%` il rupe pe rind nou in
   antetul flex fara sa schimbe markup-ul. */
.ghead{flex-wrap:wrap}
.ghead .why{font-size:11.5px;color:var(--muted);flex-basis:100%;margin:2px 0 0;
  text-align:left;max-width:64ch;line-height:1.5}
/* rândul de alegeri (înălțime / siluetă) — chips, nu butoane înghesuite */
.chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.chips + .chips{margin-top:7px}
.chips .hint{flex-basis:auto;min-width:52px}
/* indicatia despre ce poza sa urci — se citeste inainte de a alege fisierul,
   nu dupa ce i-l refuzam */
.prow .phelp{font-size:11px;color:var(--muted);line-height:1.55;max-width:64ch;margin-top:2px}
/* ---------- banda „se genereaza acum" ----------
   Inainte, singurul semn ca s-a intamplat ceva era un toast de 4 secunde. Dupa
   ce disparea, ecranul era mut: nu stiai ce se genereaza, nici daca mai traieste
   ceva. (Sebi, 2026-07-26.) Banda sta pana cand jobul chiar se termina. */
.genbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;
  padding:11px 14px;border-radius:var(--r-3);border:1px solid rgba(122,229,255,.28);
  background:rgba(122,229,255,.05)}
.genbar .gdot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--cyan);flex:0 0 auto;
  animation:genpulse 1.4s ease-in-out infinite}
@keyframes genpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.genbar .gtx{font-size:13px;color:#fff;font-weight:600;letter-spacing:-.01em}
.genbar .gsub{font-size:11px;color:var(--muted)}
.genbar .btn{margin-left:auto;text-decoration:none}
/* slotul care e chiar acum in lucru */
.wiz-anchor.gapc.working{border-color:rgba(122,229,255,.5);background:rgba(122,229,255,.05);opacity:1}
.wiz-anchor.gapc.working .gb{color:var(--cyan);font-style:normal;opacity:1}
/* „ce am cerut" vs „ce a iesit" — semnalul sta PE placa, nu intr-un jurnal */
.wiz-anchor .vmm{position:absolute;top:6px;left:6px;right:26px;font-size:9px;padding:2px 6px;
  border-radius:var(--r-pill);background:rgba(245,195,107,.92);color:#231a06;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* poza mare: placile au 150px, iar pe ele nu poti judeca o generare */
.plb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:10px;padding:28px;background:rgba(4,8,14,.92);cursor:zoom-out;
  backdrop-filter:blur(3px)}
.plb img{max-width:100%;max-height:88vh;border-radius:var(--r-3);box-shadow:0 30px 90px -20px #000}
.plbcap{font-family:var(--f-mono);font-size:11px;color:var(--muted);letter-spacing:.06em}
/* selectorul de galerie: alegi o poza EXISTENTA pentru un slot anume */
/* `.plb` e flex cu `justify-content:center`. Cu un copil mai INALT decat
   containerul, centrarea taie overflow-ul la AMBELE capete si nu mai poti derula
   pana la inceput — capul selectorului ramanea invizibil (vazut pe live).
   Deci aici NU folosim flex: un bloc care se deruleaza normal. */
.plb.gpick{display:block;cursor:default;padding:34px 22px;overflow-y:auto}
/* Corectia sta in vizualizarea MARE, nu pe placa: pe 140px nu incap un cimp de
   text si un buton, si oricum nu poti judeca o generare la marimea aia. */
.plbredo{width:100%;max-width:640px;display:flex;flex-direction:column;gap:6px;cursor:default}
.plbrow{display:flex;gap:7px}
.plbrow input{flex:1;min-width:0;background:var(--panel-2);border:1px solid var(--hair);
  border-radius:var(--r-2);color:#fff;font:inherit;font-size:12.5px;padding:9px 12px}
.plbrow input:focus{outline:none;border-color:var(--cyan)}
.plbrow input::placeholder{color:var(--muted)}
.plbmsg{font-size:11px;color:var(--muted);line-height:1.5}
/* ---------- crop pe o ancora ----------
   Imaginea sta intr-un container pozitionat ca selectia sa se poata desena peste
   ea. `.plb img` n-are `object-fit`, deci cutia elementului E imaginea si
   conversia in fractii nu trebuie sa ghiceasca benzi. */
.plbstage{position:relative;display:flex;align-items:center;justify-content:center;
  max-width:100%;min-height:0;cursor:default}
.plbstage img{display:block;touch-action:none;-webkit-user-select:none;user-select:none}
.plbsel{position:absolute;border:1.5px solid var(--cyan);border-radius:var(--r-1);pointer-events:none;
  box-shadow:0 0 0 9999px rgba(4,8,14,.55);background:rgba(34,211,238,.06)}
.plbcropbar{width:100%;max-width:640px;display:flex;flex-direction:column;gap:6px;cursor:default}
.plb.gpick .gpbox{max-height:none}
/* capul rimane vizibil cat derulezi prin poze */
.gpbox .gph,.gpbox .gpnote{position:sticky;left:0;background:var(--panel);z-index:1}
.gpbox .gph{top:-18px;padding-top:18px}
.gpbox .gpnote{top:6px;padding-bottom:11px;margin-bottom:2px}
.gpbox{width:100%;max-width:820px;margin:0 auto;background:var(--panel);border:1px solid var(--hair);
  border-radius:var(--r-4);padding:18px}
.gph{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:5px}
.gpnote{font-size:11px;color:var(--muted);margin-bottom:13px;line-height:1.5}
.gpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.gpcell{padding:0;border:1px solid var(--hair);border-radius:var(--r-2);overflow:hidden;background:var(--panel-2);
  cursor:pointer;aspect-ratio:3/4;transition:border-color .15s ease}
.gpcell:hover:not(:disabled){border-color:var(--cyan)}
.gpcell:disabled{opacity:.4;cursor:default}
.gpcell img{width:100%;height:100%;object-fit:cover;display:block}
.chead h2{margin:0 0 3px;font-size:20px;letter-spacing:-.01em}

/* ---------- lista de Persone (portat din mockup-ul aprobat) ---------- */
.plist{display:flex;flex-direction:column;gap:11px}
.prow{display:flex;align-items:center;gap:16px;padding:13px 15px;border:1px solid var(--hair);
  border-radius:var(--r-4);background:var(--panel)}
.prow .pav{width:62px;height:78px;border-radius:var(--r-3);overflow:hidden;flex:0 0 auto;background:var(--panel-2)}
.prow .pav img{width:100%;height:100%;object-fit:cover;display:block}
.prow .pmeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.prow .pn{font-size:16px;font-weight:600;letter-spacing:-.01em}
.prow .ps{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);letter-spacing:.03em}
.sets{display:flex;flex-direction:column;gap:5px}
.set{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--r-2);
  border:1px solid var(--hair);background:rgba(255,255,255,.02)}
.set .sn{font-size:12.5px;color:var(--chrome);min-width:88px}
.set .sc{font-family:var(--f-mono);font-size:10px;color:var(--muted);flex:1}
/* Bordura INTRERUPTA e conventia pentru zona unde tragi un fisier. Pe un mesaj de
   stare nu spune nimic, doar face zgomot — doua cutii punctate pe fiecare rind.
   Solida, subtire, calma: mesajul se citeste, nu se zbate. */
.warnline{font-size:12px;color:var(--chrome-dim);display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:7px 10px;border-radius:var(--r-2);border:1px solid var(--hair);background:rgba(255,255,255,.02)}
/* ---------- BUTOANELE ----------
   AICI era cauza reală a lui „nu inteleg nimic din butoanele alea" (Sebi,
   2026-07-26): clasa `.btn` nu era definită NICĂIERI. Existau `.btn.xs`,
   `.btn.p`, `.btn.danger` — variante ale unei baze care nu exista. Deci fiecare
   buton de pe /persona se desena ca buton implicit de browser: gri deschis, text
   deschis pe el, fără stare de hover, pe o pagină întunecată. Nu era o problemă
   de gust, era text aproape ilizibil pe fundal aproape alb.
   Baza urmează limbajul deja folosit de `.wiz-btn`, ca pagina să arate ca restul. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 14px;border-radius:var(--r-2);border:1px solid var(--hair);
  background:rgba(255,255,255,.03);color:var(--chrome-dim);
  font-family:inherit;font-size:12px;line-height:1.2;cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease,
    box-shadow .25s ease,transform .08s ease}
.btn:hover:not(:disabled){border-color:rgba(122,229,255,.45);color:#fff}
.btn:disabled{opacity:.4;cursor:not-allowed}
/* UN SINGUR buton principal în tot produsul.
   Existau TREI dialecte pentru „acțiunea principală": `.btn-primary` de pe landing
   (mono, tracking .16em, gradient+glow), `.btn-gen` din bara de compunere (mono,
   gradient+glow) și `.btn.p` de aici (Inter, cyan PLAT, fără glow). Trei limbaje
   pentru același înțeles — de asta ușa din față și produsul se simțeau ca două
   produse. Acum toate trei împart aceeași PIELE (umplere, glow, culoare de text);
   ce diferă rămâne doar contextul tipografic (mono compact în bară, Inter în pagină).
   `filter:brightness(1.08)` de la hover era în plus insesizabil — 8% pe un cyan deja
   luminos. Hover-ul e acum inelul de glow, adică același semnal ca la `.btn-gen`. */
.btn.p{background:linear-gradient(180deg,#7FF0FF,#39E6FF);border-color:transparent;
  color:#02121A;font-weight:600;
  box-shadow:0 0 0 1px rgba(57,230,255,.5),0 12px 32px -14px var(--cyan-glow)}
.btn.p:hover:not(:disabled){color:#02121A;border-color:transparent;
  box-shadow:0 0 0 1px rgba(57,230,255,.85),0 18px 46px -14px var(--cyan-glow)}
.btn.p:disabled{background:none;color:var(--muted);border-color:var(--hair);
  font-weight:400;opacity:.5;box-shadow:none}
.btn.xs{font-size:10.5px;padding:4px 9px;border-radius:var(--r-2)}
.pacts{flex:0 0 auto;display:flex;gap:8px;align-items:center}
.prow.new{border-style:dashed;color:var(--muted)}
.prow.new .plus{width:62px;height:78px;border-radius:var(--r-3);border:1px solid var(--hair);
  display:grid;place-items:center;font-size:22px;color:var(--cyan);flex:0 0 auto}
/* inelul de acoperire — aceleași clase ca în mockup */
.ring{position:relative;flex:0 0 auto}
.ring svg{display:block;transform:rotate(-90deg)}
.ring .mid{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-mono);
  font-size:10px;color:var(--chrome-dim)}
/* Segmentul de SPATE era rosu, deci la 0/8 inelul arata un singur arc rosu si se
   citea eroare, nu mai ai de adaugat spatele. Ambar = de completat. */
.seg-on{stroke:var(--cyan)} .seg-off{stroke:rgba(205,214,228,.13)} .seg-warn{stroke:var(--warn)}
/* ---------- cardul de ancoră: acțiunile IES de pe fotografie ----------
   Măsurat pe pagina live 2026-07-26, la 1440px. „Keep" era `position:absolute`
   PESTE poză, cu `background:rgba(75,232,168,.14)` — adică 86% transparent. Deci
   contrastul textului nu era ales de noi, îl alegea FOTOGRAFIA userului. Pe cele 8
   carduri din primul rând am măsurat: 1,05 · 1,10 · 1,10 · 1,14 · 1,67 · 2,13 ·
   2,87 · 3,15. Pragul citibil e 4,5 — niciunul nu trecea, patru erau practic
   invizibile pe fond de studio deschis. Nicio ajustare de paletă nu repară asta,
   fiindcă fundalul nu e al nostru. Și avea 22,6px înălțime, sub orice țintă
   rezonabilă, pentru SINGURA acțiune care decide dacă o poză intră în model.

   Blocul `@media (max-width:520px)` rezolvase deja corect problema pe telefon:
   cardul devine o coloană, poza își ține forma, acțiunile trec sub ea pe fundal
   OPAC. Deci varianta bună exista — doar că trăia numai pe mobil. Urcă aici, ca
   purtare implicită; media query-ul păstrează doar mărimile de atins.
   `aspect-ratio` rămâne pe IMAGINE, nu pe card: un card cu formă fixă se bate cu
   conținut care crește (lecția din 2026-07-26). */
.persona-page .wiz-anchors{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
.persona-page .wiz-anchor{position:relative;display:flex;flex-direction:column;
  border-radius:var(--r-3);overflow:hidden;border:1px solid var(--hair);
  aspect-ratio:auto;height:auto;background:var(--panel-2)}
.persona-page .wiz-anchor img{aspect-ratio:3/4;width:100%;height:auto;object-fit:cover;display:block;
  border-radius:var(--r-3) var(--r-3) 0 0;flex:none}
.persona-page .wiz-anchor .cap{position:static;padding:6px 8px 0;font-size:10.5px;
  color:var(--chrome-dim);background:none;line-height:1.3}
/* acțiunile stau pe suprafața cardului, nu pe poză — contrast previzibil */
.persona-page .wiz-anchor .approve{position:static;left:auto;right:auto;bottom:auto}
.persona-page .wiz-anchor .btn.xs{margin:5px 8px 0;min-height:30px;font-size:11px}
.persona-page .wiz-anchor .btn.xs:last-child{margin-bottom:8px}
.persona-page .wiz-anchor .x{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:var(--r-pill);
  border:none;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;font-size:12px;line-height:1;padding:0}
.persona-page .group{margin-bottom:20px}
.persona-page .ghead{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.persona-page .ghead .t{font-size:14px;font-weight:600}
.persona-page .ghead .c{font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.persona-page .ghead{flex-wrap:wrap}
.persona-page .ghead .why{font-size:11.5px;color:var(--muted);flex-basis:100%;
  margin:2px 0 0;text-align:left;max-width:64ch;line-height:1.5}
.persona-page .chead{display:flex;align-items:center;gap:18px;padding:14px 16px;border:1px solid var(--hair);
  border-radius:var(--r-4);background:var(--panel);margin-bottom:18px}
.persona-page .chead .who{flex:1}
.persona-page .wiz-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.persona-page .wiz-form input[type=text]{background:var(--panel-2);border:1px solid var(--hair);
  color:var(--chrome);border-radius:var(--r-2);padding:8px 10px;font-size:12.5px;font-family:inherit;min-width:220px}

/* ---------- Look pe cardul cadrului ----------
   Exemplele de atribut stau pe cadrul pe care ACTIONEAZA, nu intr-o secțiune
   separata: „asa stiu si userii la ce folosesc pozele alea" (Sebi, 2026-07-26).

   Selectoarele sint prefixate cu `.persona-page` si stau la SFIRSITUL fisierului,
   ca regula paginii. Motivul e masurat, nu stilistic: `.persona-page .wiz-anchor
   img` (linia ~892) forteaza `width/height:100%`, are specificitate 0,2,1 si bate
   un `.lookchip img` simplu — miniatura chip-ului ieșea 131×174px in loc de 18×18,
   iar rindul creștea la 229px pe telefon. Verificat in DOM-ul randat la 375px. */
.persona-page .lookrow{display:flex;flex-wrap:wrap;gap:4px;padding:5px 6px 0;align-items:center}
.persona-page .lookchip{position:relative;display:flex;align-items:center;gap:4px;
  padding:2px 5px 2px 2px;border:1px solid var(--hair);border-radius:var(--r-2);
  background:var(--panel-2);font-size:10px;color:var(--muted);line-height:1;max-width:100%}
.persona-page .lookchip img{width:18px;height:18px;min-width:18px;object-fit:cover;
  border-radius:var(--r-1);display:block}
.persona-page .lookchip > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.persona-page .lookchip .x{position:static;width:14px;height:14px;font-size:9px;line-height:14px;
  opacity:.55;background:none;border:none;flex:none}
.persona-page .lookchip .x:hover{opacity:1;color:var(--err)}
/* pe cadrele unde atributul doar ACTIONEAZA, chip-ul e informativ: se vede ce
   intra in cadru, dar se editeaza de pe cardul lui */
.persona-page .lookchip.ro{opacity:.62;border-style:dashed}
/* Butoanele de Look stau INTR-UN `.lookrow` care e el insusi in `.wiz-anchor`, deci
   regula de actiuni-de-card (`.persona-page .wiz-anchor .btn.xs`) le prindea si pe ele:
   primeau marginile si inaltimea minima ale actiunilor mari, iar ultimul primea si
   marginea de jos — rind decalat si rupt prea devreme. Resetul trebuie sa fie MAI
   SPECIFIC decit regula de card, nu doar mai jos in fisier. */
.persona-page .btn.xs.look{font-size:10px;padding:2px 6px;border-style:dashed;color:var(--muted)}
.persona-page .btn.xs.look:hover{border-style:solid;color:#fff}
.persona-page .wiz-anchor .lookrow .btn.xs.look,
.persona-page .wiz-anchor .lookrow .btn.xs.look:last-child{margin:0;min-height:0}

/* ---------- ZONA CAP (fluxul nou al lui Sebi, E3 — 2026-07-26) ----------
   Cardul in stinga, panoul de Edit in dreapta, plansele dedesubt. Cardul e MARE
   deliberat: e singura poza pe care userul o aduce el si din care se copiaza tot
   restul, deci a judeca-o pe o placuta de 96px (cit are grila de ancore) inseamna
   a nu o judeca deloc.
   `minmax(0,…)` pe amindoua coloanele, nu `1fr`: podeaua `min-content` a lui `1fr`
   e capcana deja platita pe pagina asta — un rind lung din panou ar fi impins
   grila peste latimea ecranului in loc sa se rupa. */
.persona-page .hzrow{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);
  gap:16px;align-items:start}
.persona-page .hzcard{position:relative;border-radius:var(--r-4);overflow:hidden;
  border:1px solid var(--hair);background:var(--panel-2);aspect-ratio:3/4;cursor:pointer;
  transition:.18s var(--ease)}
.persona-page .hzcard:hover{border-color:rgba(122,229,255,.45)}
.persona-page .hzcard.open{border-color:rgba(57,230,255,.7);
  box-shadow:0 0 0 1px rgba(57,230,255,.25),0 16px 42px -20px var(--cyan-glow)}
.persona-page .hzcard img{width:100%;height:100%;object-fit:cover;display:block}
.persona-page .hzcap{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  background:linear-gradient(transparent,rgba(0,0,0,.86))}
.persona-page .hzcap .n{font-size:13px;font-weight:600;color:#fff;letter-spacing:-.01em}
.persona-page .hzcap .w{font-size:10px;color:var(--warn)}
.persona-page .hzhint{position:absolute;top:8px;left:8px;font-size:9.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--chrome-dim);background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);padding:3px 8px}
/* golul: aceeasi forma, dar cu actiunile in el — un gol din care nu poti actiona
   e o reclamatie, nu o unealta (regula lui Sebi, aplicata si aici) */
.persona-page .hzcard.empty{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;aspect-ratio:auto;min-height:230px;padding:16px 12px;
  border-style:dashed;border-color:rgba(255,93,115,.4);background:rgba(255,93,115,.04);
  text-align:center;cursor:default}
.persona-page .hzcard.empty .ghost{width:74px;aspect-ratio:3/4;opacity:.75}
.persona-page .hzcard.empty .ghost .gf{fill:none;stroke:var(--faint);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.persona-page .hzcard.empty .ghost .gc{fill:rgba(255,93,115,.06);stroke:var(--err);stroke-width:1.2}
.persona-page .hzcap2{font-size:13px;font-weight:600;color:var(--err)}
.persona-page .hzwhy{font-size:10.5px;color:var(--muted);line-height:1.4;max-width:34ch}
.persona-page .hzedit{border:1px solid var(--hair);border-radius:var(--r-4);
  background:var(--panel);padding:14px;min-height:230px;display:flex;flex-direction:column;gap:10px}
.persona-page .hzedit.open{border-color:rgba(57,230,255,.3)}
/* Panoul inchis nu dispare: coloana goala ar face layout-ul sa sara la fiecare
   click, iar userul n-ar afla ce se afla inauntru. */
.persona-page .hzshut{margin:auto;text-align:center;font-size:12px;color:var(--muted);
  max-width:38ch;line-height:1.5}
.persona-page .hzeh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.persona-page .hzeh .t{font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--chrome)}
.persona-page .hzsub{font-size:11.5px;color:var(--muted);line-height:1.5}
.persona-page .hzattrs{display:flex;flex-direction:column;gap:7px}
.persona-page .hzattr{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;
  align-items:center;padding:7px 8px;border:1px solid var(--hair);border-radius:var(--r-3);
  background:var(--panel-2)}
.persona-page .hzattr.has{border-color:rgba(122,229,255,.28)}
.persona-page .hzth img{width:44px;height:44px;object-fit:cover;border-radius:var(--r-2);
  display:block;cursor:zoom-in}
.persona-page .hzthx{width:44px;height:44px;border:1px dashed var(--hair);border-radius:var(--r-2);
  display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:14px}
.persona-page .hzmid .l{font-size:12.5px;color:var(--chrome);font-weight:600;letter-spacing:-.01em}
.persona-page .hzmid .w{font-size:10.5px;color:var(--muted);line-height:1.35;margin-top:2px}
.persona-page .hzacts{display:flex;gap:6px;align-items:center}
.persona-page .hzcrop{border-top:1px dashed var(--hair);padding-top:11px;margin-top:2px}
.persona-page .hzcrop .t{font-size:12.5px;font-weight:600;color:var(--chrome)}
.persona-page .hzcrop .s{font-size:10.5px;color:var(--muted);line-height:1.45;margin:3px 0 8px}
.persona-page .hzbtns{display:flex;gap:7px;flex-wrap:wrap}
.persona-page .hznote{font-size:10px;color:var(--muted);opacity:.8;font-style:italic;line-height:1.4}
.persona-page .hzsheets{margin-top:16px;border-top:1px solid var(--hair);padding-top:14px}
.persona-page .hzsh{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.persona-page .hzsh .t{font-size:13px;font-weight:600;color:var(--chrome);letter-spacing:-.01em}
.persona-page .hzsh .w{font-size:11px;color:var(--muted);flex-basis:100%;line-height:1.45}
/* Sub 760px cele doua coloane nu mai incap una linga alta: cardul ar cobori sub
   200px si panoul ar deveni o coloana de cuvinte taiate. Se pun una sub alta,
   cardul limitat ca sa nu ocupe tot ecranul pe verticala. */
@media (max-width: 760px) {
  .persona-page .hzrow{grid-template-columns:minmax(0,1fr)}
  .persona-page .hzcard{max-width:230px}
  .persona-page .hzedit{min-height:0}
}
@media (max-width: 520px) {
  /* aceeasi ergonomie de atingere ca restul paginii: tinte de 36px */
  .persona-page .hzattr{grid-template-columns:40px minmax(0,1fr);row-gap:8px}
  .persona-page .hzacts{grid-column:1/-1;justify-content:flex-end}
  .persona-page .hzattr .btn.xs,.persona-page .hzbtns .btn.xs{min-height:36px;padding:8px 12px;font-size:12px}
  .persona-page .hzth img,.persona-page .hzthx{width:40px;height:40px}
}

/* ---------- /persona pe TELEFON (Sebi, 2026-07-26: „fă pagina /persona mobile friendly") ----------
   Măsurat ÎNAINTE de a schimba ceva, la 375px: documentul NU depășea lățimea
   (360 < 375), deci layout-ul era în regulă. Problema era ergonomia — 85 de ținte
   de atins sub 30px: butoanele din carduri aveau 23px înălțime, iar ✕ era 20×20.
   Pe deasupra, „Keep" e poziționat ABSOLUT peste imagine, iar de când au apărut
   Save / ← Back / Forward → butoanele se suprapuneau cu el.
   Deci pe ecran mic acțiunile ies din poziționarea absolută și devin un rând
   normal, cu ținte de 36px. Cardurile rămân pe două coloane, ca să poți scana. */
@media (max-width: 520px) {
  .persona-page .wiz-anchors { gap: 10px }
  /* Structura cardului — coloană, formă pe IMAGINE, acțiuni sub poză — NU mai stă
     aici. A urcat ca purtare IMPLICITĂ, fiindcă desktopul avea aceeași problemă în
     formă mai gravă: „Keep" transparent 14% peste fotografie, contrast măsurat
     1,05-3,15 pe 8 carduri. Varianta bună fusese scrisă aici și lăsată doar pentru
     telefon. Rămâne în media query doar ce e cu adevărat specific atingerii:
     ținte mai mari.
     FĂRĂ `width:100%` pe butoane: cardul e flex pe coloană, deci `stretch`
     (implicit) le întinde deja pe toată lățimea MINUS marginile. Cu `width:100%`
     PLUS margini laterale ieșeau 12px în afara cutiei, iar `overflow:hidden` le tăia. */
  .persona-page .wiz-anchor .btn.xs { min-height: 36px; margin: 4px 6px 0;
    padding: 8px 10px; font-size: 12px }
  .persona-page .wiz-anchor .btn.xs:last-child { margin-bottom: 6px }
  /* ✕ rămâne peste poză (acolo îi e locul), dar la o mărime pe care o poți atinge */
  .persona-page .wiz-anchor .x { position: absolute; width: 30px; height: 30px;
    line-height: 30px; font-size: 13px; top: 5px; right: 5px }
  /* Look: chip-urile și butoanele lor de adăugare, la fel */
  .persona-page .lookrow { padding: 6px 6px 0; gap: 6px }
  .persona-page .lookchip { padding: 4px 7px 4px 4px; font-size: 11px }
  .persona-page .lookchip img { width: 22px; height: 22px; min-width: 22px }
  .persona-page .lookchip .x { position: static; width: 22px; height: 22px; line-height: 22px; font-size: 11px }
  .persona-page .btn.xs.look { width: auto; padding: 6px 10px }
  .persona-page .wiz-anchor .lookrow .btn.xs.look,
  .persona-page .wiz-anchor .lookrow .btn.xs.look:last-child { margin: 0; min-height: 32px }
  /* sloturile lipsă: butoanele lor de acțiune, aceeași ergonomie */
  .persona-page .wiz-anchor.gapc .ga { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 6px }
  .persona-page .wiz-anchor.gapc .ga .btn.xs { width: auto; flex: 1 1 auto; margin: 0 }
}

/* ---------- construirea unui set, ÎN pagina personei (Sebi, 2026-07-26) ----------
   „Eu am zis unite și nu mai există dataset deloc." Corect — cele două pagini nu
   erau două lucruri, era același flux tăiat în două fiindcă generarea trăia în
   carcasa comună `studio.js`, iar Persona e o aplicație separată. */
.persona-page .setbuild { margin-top: 10px; padding: 12px; border: 1px solid var(--hair);
  border-radius:var(--r-3); background: var(--panel-2); display: flex; flex-direction: column; gap: 9px }
.persona-page .setlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 4px 12px; max-height: 320px; overflow-y: auto; padding: 2px }
.persona-page .setopt { display: flex; align-items: center; gap: 7px; font-size: 12px;
  color: var(--chrome-dim); cursor: pointer; padding: 4px 2px; line-height: 1.3 }
.persona-page .setopt input { accent-color: var(--cyan); width: 15px; height: 15px; flex: none }
.persona-page .setopt:hover { color: #fff }
@media (max-width: 520px) {
  /* aceeași ergonomie ca restul paginii: ținte de atins, nu de nimerit */
  .persona-page .setlist { grid-template-columns: 1fr; max-height: 260px }
  .persona-page .setopt { padding: 9px 2px; font-size: 12.5px }
  .persona-page .setopt input { width: 20px; height: 20px }
  .persona-page .setbuild .btn.p { min-height: 42px }
}

/* ---------- lista de persone pe TELEFON ----------
   Sebi mi-a trimis capturi de pe telefonul lui și arăta rupt: numele acoperit de
   butonul „Open", textul rupt CÂTE UN CUVÂNT PE RÂND, „Delete" tăiat în afara
   ecranului. Măsurat la 390px: `.pmeta` avea lățimea **0** și `.pacts` ajungea la
   457px pe un ecran de 390 — 67px în afară.
   Cauza: `.prow` e flex `nowrap`, iar `.pacts` e `flex:0 0 auto` (nu se strânge
   niciodată). Cu avatar + inel + 3 butoane nu mai rămânea nimic pentru text, iar
   `min-width:0` de pe `.pmeta` i-a permis să ajungă la zero — de acolo și cuvânt
   pe rând, și textul care se revarsă peste butoane.
   LECȚIA, plătită tot azi și repetată aici: verificasem view-ul de DETALIU, nu
   ecranul pe care userul ATERIZEAZĂ. Am testat ce am schimbat, nu ce vede el. */
@media (max-width: 520px) {
  .persona-page .prow { flex-wrap: wrap; gap: 10px 12px; align-items: center }
  .persona-page .prow .pav { flex: 0 0 auto }
  .persona-page .prow .ring { flex: 0 0 auto }
  /* textul trece pe rândul lui, pe toată lățimea — deci nu mai poate ajunge la 0 */
  .persona-page .prow .pmeta { flex: 1 1 100%; order: 3; min-width: 100% }
  .persona-page .prow .pacts { flex: 1 1 100%; order: 4; flex-wrap: wrap; gap: 8px }
  .persona-page .prow .pacts .btn { flex: 1 1 auto; min-height: 40px }
  /* „Delete" nu se întinde: e distructiv, nu-l vrei mare și ușor de atins din greșeală */
  .persona-page .prow .pacts .btn.danger { flex: 0 0 auto; min-width: 84px }
  .persona-page .prow .warnline { flex-wrap: wrap }
  /* rândul „New persona" NU face excepție: conține un formular întreg (nume,
     alegere de poză, ajutor), iar `nowrap` — pe care îl pusesem crezând că e doar
     un rând scurt — îl împingea 21px în afara ecranului. Măsurat, nu presupus. */
  .persona-page .prow.new .pmeta { flex: 1 1 100%; min-width: 100% }
  .persona-page .prow.new .wiz-form { flex-wrap: wrap; gap: 8px }
  .persona-page .prow.new .wiz-form input { flex: 1 1 100%; min-width: 0 }
  .persona-page .prow.new .phelp { max-width: 100% }
}

/* ---------- acțiunile de pe cardul de rezultat, pe TELEFON ----------
   Măsurat pe /gallery la 390px: `.card .ov` e un flex `nowrap` de 186px al cărui
   conținut are 236px, iar butoanele `.dl` (descarcă / șterge) ajungeau la 413-425px
   — în afara cardului, care are `overflow:hidden`. Deci existau, dar erau TĂIATE:
   invizibile și neatingibile. 27 de butoane pe o singură pagină.
   Aceeași marcă `.card .ov` e pe feed-ul de rezultate al TUTUROR uneltelor, deci
   regula e globală, nu doar pentru galerie. (Sebi, 2026-07-26: „vezi să fie totul
   clickable și să se vadă.") */
@media (max-width: 520px) {
  .card .ov { flex-wrap: wrap; gap: 4px; row-gap: 4px }
  /* eticheta lungă (numele motorului / promptul) se strânge, nu împinge butoanele */
  .card .ov .chip { min-width: 0; max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap }
  .card .ov .dl { flex: 0 0 auto; width: 30px; height: 30px }
  .card .ov .dl:first-of-type { margin-left: auto }
}

/* ---------- controale de formular care nu se strâng ----------
   Măsurat pe /train la 390px: `#upName` și `#upFile` erau 457px, `#upEngine` 264px,
   iar pagina se derula lateral 102px. Un input fără `max-width` își ia lățimea din
   atributul `size` sau din conținut, nu din ecran — deci pe telefon iese afară.
   Regula e globală fiindcă e o clasă de defect, nu o pagină: orice formular nou
   ar fi repetat-o. `box-sizing` intră în ecuație pentru că un `width:100%` cu
   padding tot depășește fără el. */
@media (max-width: 520px) {
  input, select, textarea, button { max-width: 100% }
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=file], select, textarea { width: 100%; box-sizing: border-box }
  /* butoanele de formular rămân la o înălțime pe care o poți atinge */
  .wiz-form .btn, form .btn { min-height: 40px }
}

/* ===== PERSONA V2 ===== */
/* Macheta aprobată rămâne izolată complet de /persona prin prefixul paginii. */
.persona2-page #app{position:relative;z-index:2;margin-top:var(--hd-h);min-height:calc(100dvh - var(--hd-h))}
/* Macheta a fost desenată într-un cadru de telefon de 390x844 — acela era SCHELĂ
   de prezentare, nu regulă de layout. Copiat literal, bloca conținutul într-o
   coloană de 390px în mijlocul unui ecran de desktop, cu bare de derulare proprii
   înăuntru (raportat de Sebi, 2026-07-29, captură de pe PC).
   Acum: o coloană centrată care crește până la 720px, iar pagina derulează normal.
   Fără înălțime fixă și fără `overflow` propriu — bara de acțiune stă lipită jos
   prin `sticky`, ceea ce merge identic pe telefon și pe desktop. */
.persona2-page .p2-screen{width:min(100%,720px);min-height:calc(100dvh - var(--hd-h));
  position:relative;background:var(--void);margin:0 auto;display:flex;flex-direction:column;
  border-left:1px solid var(--hair-2);border-right:1px solid var(--hair-2)}

/* Banda de trepte păstrează forma machetei, dar arată toate treptele mașinii de stare. */
.persona2-page .p2-rail{flex:0 0 auto;display:flex;gap:0;padding:12px 10px 0;border-bottom:1px solid var(--hair-2)}
.persona2-page .p2-st{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;padding-bottom:11px;min-width:0}
.persona2-page .p2-st::before{content:"";position:absolute;left:-50%;right:50%;top:6px;height:1px;background:var(--hair)}
.persona2-page .p2-st:first-child::before{display:none}
.persona2-page .p2-st .p2-dot{width:13px;height:13px;border-radius:50%;border:1px solid var(--faint);background:var(--void);
  display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:7px;color:var(--faint);
  position:relative;z-index:1}
.persona2-page .p2-st .p2-lb{font-family:var(--f-mono);font-size:7px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);max-width:100%;overflow:hidden;text-overflow:ellipsis}
.persona2-page .p2-st.done .p2-dot{border-color:rgba(75,232,168,.45);color:var(--ok)}
.persona2-page .p2-st.done .p2-lb{color:var(--muted)}
.persona2-page .p2-st.done::before{background:rgba(75,232,168,.28)}
.persona2-page .p2-st.now .p2-dot{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 0 3px rgba(57,230,255,.12)}
.persona2-page .p2-st.now .p2-lb{color:var(--cyan)}
.persona2-page .p2-st.now::before{background:rgba(57,230,255,.35)}

/* Corpul și bara lipită jos reproduc structura fiecărui ecran din machetă. */
.persona2-page .p2-body{flex:1 1 auto;padding:20px 16px 16px}
.persona2-page .p2-body h1{font-weight:300;font-size:21px;letter-spacing:-.012em;color:#EDF2FA;margin:0 0 5px}
.persona2-page .p2-kick{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 4px}
.persona2-page .p2-lead{font-size:13px;color:var(--chrome-dim);margin:0 0 18px;line-height:1.5}
.persona2-page .p2-lead b{color:var(--chrome);font-weight:500}
.persona2-page .p2-act{flex:0 0 auto;position:sticky;bottom:0;z-index:3;border-top:1px solid var(--hair);
  background:linear-gradient(180deg,rgba(5,7,12,.86),var(--void-2));backdrop-filter:blur(6px);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px}
.persona2-page .p2-hint{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);line-height:1.4}
.persona2-page .p2-push{margin-left:auto}
.persona2-page .p2-btn-gen{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--f-mono);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:12px 16px;border-radius:var(--r-3);cursor:pointer;
  border:1px solid transparent;color:#02121A;background:linear-gradient(180deg,#7FF0FF,#39E6FF);
  box-shadow:0 0 0 1px rgba(57,230,255,.5),0 16px 44px -16px var(--cyan-glow);
  position:relative;overflow:hidden;white-space:nowrap}
.persona2-page .p2-btn-gen[disabled]{opacity:.3;box-shadow:none;background:var(--panel-2);color:var(--muted);border-color:var(--hair);cursor:not-allowed}
.persona2-page .p2-btn-gen .p2-gcost{opacity:.72;font-weight:500}
.persona2-page .p2-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--f-mono);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:12px 14px;border-radius:var(--r-3);
  cursor:pointer;border:1px solid var(--hair);background:transparent;color:var(--chrome-dim);white-space:nowrap}
.persona2-page .p2-btn-ghost:hover{border-color:rgba(57,230,255,.4);color:#fff}

/* Lista de personaje. */
.persona2-page .p2-plist{display:flex;flex-direction:column;gap:1px;background:var(--hair-2);border-radius:var(--r-3);overflow:hidden}
.persona2-page .p2-prow{display:flex;width:100%;align-items:center;gap:12px;padding:13px 14px;background:var(--panel);
  border:0;text-align:left;cursor:pointer}
.persona2-page .p2-prow:hover{background:var(--panel-2)}
.persona2-page .p2-av{width:44px;height:56px;border-radius:var(--r-2);object-fit:cover;flex:0 0 auto;
  background:var(--panel-2);border:1px solid var(--hair)}
.persona2-page .p2-av-empty{display:flex;align-items:center;justify-content:center;color:var(--faint);
  font-family:var(--f-mono);font-size:16px}
.persona2-page .p2-nm{flex:1;min-width:0;display:flex;flex-direction:column}
.persona2-page .p2-n{font-size:14.5px;color:#EDF2FA;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.persona2-page .p2-m{font-family:var(--f-mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.persona2-page .p2-go{color:var(--faint);font-size:18px;line-height:1}
.persona2-page .p2-bar{display:block;height:2px;border-radius:2px;background:var(--hair);margin-top:7px;overflow:hidden;max-width:150px}
.persona2-page .p2-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan-deep),var(--cyan))}
.persona2-page .p2-newp{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-bottom:16px;
  border:1px dashed rgba(57,230,255,.35);background:rgba(57,230,255,.04);color:var(--cyan);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:15px;border-radius:var(--r-3);cursor:pointer}
.persona2-page .p2-dotpulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);
  flex:0 0 auto;box-shadow:0 0 0 3px rgba(245,195,107,.14);vertical-align:middle;margin-right:5px}
.persona2-page .p2-list-note{margin-top:18px}
.persona2-page .p2-empty{border:1px dashed var(--hair);border-radius:var(--r-3);padding:22px 15px;text-align:center;
  color:var(--muted);font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}

/* Numele și controalele de formular. */
.persona2-page .p2-field{display:block;margin-bottom:8px}
.persona2-page .p2-fl{font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:7px}
.persona2-page .p2-field input{width:100%;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-3);
  color:#EDF2FA;font-family:var(--f-body);font-size:16px;padding:14px;outline:none}
.persona2-page .p2-field input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(57,230,255,.1)}
.persona2-page .p2-fhelp{font-size:11.5px;color:var(--muted);margin-top:7px}

/* Grila pozelor urcate, inclusiv reordonarea prin tragere și săgețile de rezervă. */
.persona2-page .p2-upl{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}
.persona2-page .p2-up{position:relative;aspect-ratio:3/4;border-radius:var(--r-2);overflow:hidden;
  background:var(--panel-2);border:1px solid var(--hair)}
.persona2-page .p2-up[draggable=true]{cursor:grab}
.persona2-page .p2-up.dragging{opacity:.45;border-color:var(--cyan)}
.persona2-page .p2-up img{width:100%;height:100%;object-fit:cover}
.persona2-page .p2-up a{display:block;width:100%;height:100%}
.persona2-page .p2-up .p2-n{position:absolute;top:5px;left:5px;font-family:var(--f-mono);font-size:8px;
  letter-spacing:.08em;background:rgba(2,4,8,.8);border-radius:var(--r-1);padding:2px 5px;color:var(--chrome-dim)}
.persona2-page .p2-up.ref{border-color:rgba(57,230,255,.6);box-shadow:0 0 0 1px rgba(57,230,255,.25)}
.persona2-page .p2-up.ref .p2-n{color:var(--cyan);background:rgba(2,10,14,.9)}
.persona2-page .p2-up.bad{border-color:rgba(255,93,115,.5)}
.persona2-page .p2-up.bad img{opacity:.28;filter:grayscale(1)}
.persona2-page .p2-up .p2-why{position:absolute;left:0;right:0;bottom:0;padding:5px 6px;background:rgba(20,4,8,.9);
  font-family:var(--f-mono);font-size:7.5px;letter-spacing:.05em;color:var(--err);line-height:1.35}
.persona2-page .p2-up.add{display:flex;align-items:center;justify-content:center;border-style:dashed;color:var(--faint);
  font-size:22px;font-weight:200;cursor:pointer}
.persona2-page .p2-ord-controls{position:absolute;right:4px;bottom:4px;display:flex;gap:3px;opacity:0;transition:opacity .18s}
.persona2-page .p2-up:hover .p2-ord-controls,
.persona2-page .p2-up:focus-within .p2-ord-controls{opacity:1}
.persona2-page .p2-ord-controls button{width:24px;height:24px;border-radius:var(--r-1);border:1px solid var(--hair);
  background:rgba(2,4,8,.86);color:var(--chrome-dim);cursor:pointer;padding:0}

/* Notele și stările de validare folosesc exact semantica cromatică a site-ului. */
.persona2-page .p2-note{border:1px solid var(--hair);border-left:2px solid var(--cyan-deep);border-radius:var(--r-2);
  background:rgba(57,230,255,.035);padding:11px 12px;font-size:12px;color:var(--chrome-dim);margin-bottom:16px;line-height:1.5}
.persona2-page .p2-note.p2-w{border-left-color:var(--warn);background:rgba(245,195,107,.05)}
.persona2-page .p2-note b{color:var(--chrome);font-weight:500}
.persona2-page .p2-chip-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.persona2-page .p2-chip{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--hair);border-radius:var(--r-pill);padding:3px 8px;color:var(--chrome-dim);
  background:rgba(5,7,12,.72);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.persona2-page .p2-chip.p2-ok{color:var(--ok);border-color:rgba(75,232,168,.35)}
.persona2-page .p2-chip.p2-err{color:var(--err);border-color:rgba(255,93,115,.35)}
.persona2-page .p2-chip.p2-cy{color:var(--cyan);border-color:rgba(57,230,255,.4)}
.persona2-page .p2-failure{border:1px solid rgba(255,93,115,.4);border-left:2px solid var(--err);
  border-radius:var(--r-2);background:rgba(255,93,115,.05);padding:12px;font-size:12px;color:var(--err);line-height:1.5}

/* Ecranul de progres descrie jobul întreg, nu panouri imaginare. */
.persona2-page .p2-prog-frame{position:relative;aspect-ratio:1/1;border-radius:var(--r-3);overflow:hidden;
  background:var(--panel-2);border:1px solid var(--hair);margin-bottom:16px}
.persona2-page .p2-prog-frame .p2-scan{position:absolute;left:0;right:0;height:34%;
  background:linear-gradient(180deg,transparent,rgba(57,230,255,.13),rgba(57,230,255,.03),transparent);
  animation:p2-sweep 2.4s var(--ease) infinite}
@keyframes p2-sweep{0%{top:-34%}100%{top:100%}}
.persona2-page .p2-prog-frame .p2-mesh{position:absolute;inset:0;
  background-image:linear-gradient(var(--hair-2) 1px,transparent 1px),linear-gradient(90deg,var(--hair-2) 1px,transparent 1px);
  background-size:33.33% 33.33%}
.persona2-page .p2-prog-frame .p2-ctr{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px}
.persona2-page .p2-working{font-family:var(--f-mono);font-size:24px;font-weight:300;color:#EDF2FA;letter-spacing:.04em}
.persona2-page .p2-el{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.persona2-page .p2-stg{display:flex;gap:6px;margin-bottom:14px}
.persona2-page .p2-stg .p2-s{flex:1;padding:8px 5px;border:1px solid var(--hair);border-radius:var(--r-2);
  background:var(--panel);font-family:var(--f-mono);font-size:7.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);text-align:center}
.persona2-page .p2-stg .p2-s.done{color:var(--ok);border-color:rgba(75,232,168,.3)}
.persona2-page .p2-stg .p2-s.now{color:var(--cyan);border-color:rgba(57,230,255,.45);background:rgba(57,230,255,.05)}
.persona2-page .p2-term{background:var(--term-bg);border:1px solid var(--term-hair);border-radius:var(--r-2);
  padding:10px 11px;font-family:var(--f-mono);font-size:9.5px;line-height:1.75;color:var(--term-green-dim);
  max-height:120px;overflow:hidden}
.persona2-page .p2-term .p2-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.persona2-page .p2-term .p2-l.hot{color:var(--term-green)}
.persona2-page .p2-term .p2-t{color:#1a6b3c}

/* Rezultatul de acceptat. */
.persona2-page .p2-res{border-radius:var(--r-3);overflow:hidden;border:1px solid var(--hair);
  margin-bottom:12px;background:var(--panel)}
.persona2-page .p2-res img{width:100%;display:block}
.persona2-page .p2-res .p2-meta{display:flex;align-items:center;gap:6px;padding:9px 10px;
  border-top:1px solid var(--hair);flex-wrap:wrap}
.persona2-page .p2-prior{max-height:260px}
.persona2-page .p2-prior img{max-height:215px;object-fit:cover}

/* Selectorul de rezoluție. */
.persona2-page .p2-resw{display:flex;align-items:center;gap:8px;margin-bottom:13px}
.persona2-page .p2-rl{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.persona2-page .p2-seg{display:flex;margin-left:auto;border:1px solid var(--hair);border-radius:var(--r-pill);overflow:hidden}
.persona2-page .p2-seg button{font-family:var(--f-mono);font-size:9.5px;font-weight:400;letter-spacing:.08em;
  padding:6px 13px;color:var(--muted);background:transparent;border:0;cursor:pointer}
.persona2-page .p2-seg button.on{color:#02121A;background:linear-gradient(180deg,#7FF0FF,#39E6FF);font-weight:500}

/* Selectorul de scene. */
.persona2-page .p2-tabs{display:flex;gap:0;border-bottom:1px solid var(--hair);margin-bottom:14px}
.persona2-page .p2-tab{flex:1;text-align:center;padding:10px 0;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);border:0;border-bottom:1px solid transparent;
  margin-bottom:-1px;background:transparent;cursor:pointer}
.persona2-page .p2-tab.on{color:var(--cyan);border-bottom-color:var(--cyan)}
.persona2-page .p2-tab[disabled]{cursor:not-allowed;opacity:.65}
.persona2-page .p2-lock{color:var(--violet);font-size:8px}
.persona2-page .p2-srch{width:100%;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-3);
  color:#EDF2FA;font-size:13px;padding:10px 12px;outline:none;margin-bottom:14px;font-family:var(--f-body)}
.persona2-page .p2-grp{margin-bottom:15px}
.persona2-page .p2-gh{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.persona2-page .p2-gt{font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--chrome-dim)}
.persona2-page .p2-gc{font-family:var(--f-mono);font-size:8.5px;color:var(--faint);margin-left:auto}
.persona2-page .p2-sc{display:flex;width:100%;align-items:center;gap:10px;padding:9px 11px;
  border:1px solid var(--hair);border-radius:var(--r-2);background:var(--panel);margin-bottom:5px;cursor:pointer;text-align:left}
.persona2-page .p2-sc[hidden]{display:none}
.persona2-page .p2-bx{width:16px;height:16px;border-radius:var(--r-1);border:1px solid var(--faint);
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--void)}
.persona2-page .p2-sc.on{border-color:rgba(57,230,255,.4);background:rgba(57,230,255,.05)}
.persona2-page .p2-sc.on .p2-bx{background:var(--cyan);border-color:var(--cyan)}
.persona2-page .p2-slb{font-size:13px;color:var(--chrome)}
.persona2-page .p2-sc.on .p2-slb{color:#EDF2FA}
.persona2-page .p2-k{font-family:var(--f-mono);font-size:8px;color:var(--faint);margin-left:auto}

/* Starea veche este ambră: cere o decizie, nu raportează un eșec. */
.persona2-page .p2-stale{border:1px solid rgba(245,195,107,.35);background:rgba(245,195,107,.05);
  border-radius:var(--r-3);padding:12px 13px;margin-bottom:14px}
.persona2-page .p2-stale .p2-h{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.persona2-page .p2-stale .p2-ttl{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--warn)}
.persona2-page .p2-stale p{margin:0;font-size:12px;color:var(--chrome-dim);line-height:1.5}
.persona2-page .p2-mini{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:11px}
.persona2-page .p2-mini .p2-m{aspect-ratio:1/1;border-radius:var(--r-1);background:var(--panel-2);
  border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);
  font-size:7px;color:var(--faint);text-align:center;line-height:1.3;padding:3px}
.persona2-page .p2-mini .p2-m.old{border-color:rgba(245,195,107,.35);color:var(--warn)}
.persona2-page .p2-mini .p2-m.cur{border-color:rgba(75,232,168,.3);color:var(--ok)}

@media (hover:none) {
  .persona2-page .p2-ord-controls{opacity:1}
}
@media (max-width:520px) {
  .persona2-page .p2-screen{border-left:0;border-right:0}
  .persona2-page .p2-btn-gen,
  .persona2-page .p2-btn-ghost{min-height:42px}
  .persona2-page .p2-ord-controls button{width:30px;height:30px}
}
@media (prefers-reduced-motion:reduce) {
  .persona2-page .p2-prog-frame .p2-scan{animation:none;top:33%}
}

/* ---- Perdea de lucru (Sebi, 2026-07-29) --------------------------------------
   Verificarea Grok și generarea durează zeci de secunde. Fără nimic pe ecran,
   userul crede că butonul n-a mers și apasă din nou — adică plătește de două ori.
   Textul spune „Our AI Agent", nu numele furnizorului: aceeași regulă ca la
   jurnalul jobului, userul nu vede cu ce model lucrăm. */
.persona2-page .p2-busy{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;background:rgba(3,5,9,.86);
  backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .22s var(--ease)}
.persona2-page .p2-busy.on{opacity:1;pointer-events:auto}
.persona2-page .p2-busy .ring{width:34px;height:34px;border-radius:50%;
  border:2px solid rgba(57,230,255,.18);border-top-color:var(--cyan);animation:p2spin .85s linear infinite}
@keyframes p2spin{to{transform:rotate(360deg)}}
.persona2-page .p2-busy .msg{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan);text-align:center;padding:0 28px;line-height:1.6}
.persona2-page .p2-busy .sub{font-size:12px;color:var(--muted);margin-top:-8px;text-align:center;padding:0 32px}
@media (prefers-reduced-motion:reduce){
  .persona2-page .p2-busy .ring{animation-duration:2.4s}
  .persona2-page .p2-busy{transition:none}
}