/* Geist + Geist Mono (variabile 100-900) - self-hosted ca sa ramana CSP `font-src 'self'`.
   Subseturi: latin + latin-ext (diacritice romanesti). */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/geist-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/geistmono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/geistmono-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --bg: #eef2f0;
  --surface: #fbfcfb;
  --surface-strong: #ffffff;
  --ink: #121514;
  /* Cu doua trepte mai inchis decat inainte (#68716e), ca textul mic sa treaca pragul de
     4.5:1 SI pe panourile usor colorate, nu doar pe alb. Diferenta nu se vede cu ochiul. */
  --muted: #656e6b;
  --line: #dce3df;
  /* Bordura controalelor interactive (input/select/textarea/button-clone) e alt token fata de
     `--line`: cele decorative nu au nevoie de 3:1 WCAG 1.4.11, dar butoanele si campurile da -
     borderRatio masurat 1.16-1.35 pe `--line`, sub prag. #758380 pe fundalurile reale ale
     controalelor (~#fbfcfb..#ffffff) da minimum 3.22:1, verificat cu clasifica_borduri.mjs. */
  --control-border: #758380;
  /* Muchia fisei pe masa. Pe `--line` masuram 1,01:1 fata de masa - adica o muchie inexistenta,
     iar fisa se deosebea doar prin 1,29:1 de umplutura. Fisele se apasa (P/X/Space), deci intra
     sub WCAG 1.4.11 si au nevoie de 3:1. Valoarea e accentul spatiului apropiat de masa cat se
     poate fara sa scada sub prag: cea mai blanda linie care inca trece. Masurat 3,2:1. */
  --line-fisa: #398a73;
  /* Folosite de `.delete-status-card`, `.delete-status-code` si `.an-bench`, dar nedefinite
     pana pe 12 aug 2026 - deci cele trei ramaneau fara fundal si cu bordura de 0px, inclusiv
     pagina publica de stergere a datelor. Legate la tokenii existenti, ca sa urmeze si tema. */
  --cc-light: var(--surface);
  --cc-border: var(--line);
  /* Accent desaturat sub 80% (un singur accent, saturatie < 80%). #16785c ~ 69% saturatie,
     pastreaza contrastul 4.5:1 pe alb si pe panouri. */
  --accent: #16785c;
  --accent-dark: #105c46;
  --accent-soft: #d7ede3;
  /* Bordura pastilelor de accent. Era literalul var(--accent-line) in opt locuri, deci nu urma nici tema,
     nici spatiul - in Personal ramanea verde peste violet. Acum e un token ca oricare altul. */
  --accent-line: #b6ddcc;
  /* Textul asezat PESTE accent. In tema luminoasa accentul e inchis, deci textul e alb; in
     Atelier accentul e viu, deci textul devine aproape-negru. Un singur token, doua valori. */
  --accent-ink: #ffffff;
  /* A patra treapta de suprafata (Linear: fundal -> card -> panou -> popover). Fara ea orice
     tema intunecata arata plat, fiindca doua trepte nu fac o ierarhie. */
  --surface-top: #ffffff;
  /* Muchia de sus a unui control: linia de lumina de 1px care il face sa para ridicat. Reteta
     Raycast - costa 0 KB si nu se anima niciodata. */
  --line-top: rgb(255 255 255 / 0.75);
  /* Culoarea umbrelor, ca triplet RGB ca sa i se poata pune alfa la fiecare folosire. E
     DELIBERAT alta variabila decat accentul: o umbra colorata in accent devine aureola, iar in
     Atelier ar fi o aureola smaraldie sub fiecare card. In tema intunecata elevatia se face din
     suprafata mai deschisa, deci umbra e negru curat si practic dispare. */
  --umbra: 11 122 91;
  --warn: #9f5b16;
  --danger: #9a2f2f;
  /* Umbre: aproape deloc. Ierarhia o tine bordura de 1px plus un inset subtire; asa ramane
     lizibila si in tema intunecata, unde "mai sus" inseamna mai DESCHIS, nu umbra mai mare. */
  --shadow: inset 0 1px 0 rgb(255 255 255 / 0.6);
  --shadow-lg: inset 0 1px 0 rgb(255 255 255 / 0.7);
  /* Colturi: 6px la controale, 12px la carduri, 16px la containere mari, rotund complet doar
     la insigne. Doua scari de pill pe acelasi ecran nu se amesteca. */
  /* Tracking-ul titlurilor. Business strange literele, Personal le lasa sa respire: aceeasi
     familie de litere, alt ritm. E singurul lucru din tipografie care se schimba intre spatii. */
  --tracking-titlu: -0.014em;
  --radius-control: 6px;
  --radius: 12px;
  --radius-shell: 16px;
  /* Spatiere, baza 4. Padding de card 24 (16 pe mobil), gutter 24. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --card-pad: 24px;
  --gutter: 24px;
  /* Miscare: hover/focus scurt, panou mai lung. Nimic in bucla, nicio cifra animata. */
  --t-rapid: 120ms cubic-bezier(0.2, 0, 0, 1);
  --t-panou: 220ms cubic-bezier(0.2, 0, 0, 1);
  /* Vocabularul scenei, in patru timpi. Cu doua durate nu se poate spune o poveste, iar
     fiecare ecran isi inventa alta cifra (130ms, 200ms, .4s, .45s, .6s). De aici incolo:
       armare  - ce era iese si cadrul se strange la 0.97
       sosire  - ce vine urca inapoi la 1, cu un pas intre straturi
       confirm - o singura pulsatie pe muchie, apoi liniste
     Curbele sunt cele din Carbon: nimic nu foloseste ease-in, care porneste lenes si pare rupt. */
  --t-armare: 120ms;
  --t-sosire: 220ms;
  --t-confirm: 160ms;
  --t-pas: 40ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-intrare: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-iesire: cubic-bezier(0.2, 0, 1, 0.9);
}

* {
  box-sizing: border-box;
}

/* Aplicatia ascunde totul prin atributul `hidden` (69 de locuri, zero style.display).
   Dar orice componenta cu `display: grid/flex` bate atributul, iar elementul ramane pe ecran
   desi codul il crede ascuns - asa aparea insigna Gmail cu 0, banda de carusel goala si
   butoanele copertii inainte sa existe coperta. Aici stabilim ca `hidden` castiga mereu. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  /* Fundal plat. Cele doua bloburi radiale erau al treilea strat de culoare pe un ecran a
     carui treaba e sa arate cifre - sapte griuri si UN accent nu lasa loc de decor. */
  background: var(--bg);
  color: var(--ink);
  font-family:
    "Geist", "Aptos", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* Placeholder-urile foloseau gri implicit al browserului (#757575), sub 4.5:1 in ambele teme
   (4.48:1 in light, 4.02:1 in dark - masurat). var(--muted) e deja calibrat pt 4.5:1 pe
   suprafetele obisnuite si trece cu rezerva pe ambele. */
input::placeholder,
textarea::placeholder {
  color: var(--muted);
}

button {
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Feedback tactil: apasare fizica (Rule 5 - interactive states). */
button:active:not(:disabled) {
  transform: scale(0.97);
}

.app-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100dvh;
}


/* ===== Pagina publica delete-status (GDPR) ===== */
.app-shell.delete-status-only { display: block; }
.delete-status { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 32px 20px; }
.delete-status-card { max-width: 480px; width: 100%; text-align: center; background: var(--cc-light); border: 1px solid var(--cc-border); border-radius: 16px; padding: 40px 32px; }
.delete-status-check { width: 56px; height: 56px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--accent-ink); background: var(--accent); border-radius: 50%; }
/* Gasit de harness, ecran neatins pana acum: alb pe verdele de succes (#30d158, fix - nu tine
   de tema, aceeasi valoare in ambele) da 2.02:1, sub pragul de 3:1 pt elemente de interfata.
   Fundalul e literal in ambele teme, deci si remediul trebuie literal, nu var() (var(--accent-dark)
   ar deveni portocaliu #fb923c in dark si ar cadea si mai jos, 1.12:1 - verificat).
   #105c46 e deja in paleta (--accent-dark din tema luminoasa), reluat ca literal: 3.94:1 randat,
   pe ambele teme, fiindca fundalul verde nu se schimba. Hook-ul e cel scris deja de app.js
   (`card.dataset.state = stareId`) pt starea fara clasa proprie ("sters" -> doar clasa de baza). */
#deleteStatusCard[data-state="sters"] .delete-status-check { color: #105c46; }
.delete-status-card h2 { margin: 0 0 12px; }
.delete-status-lead { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.delete-status-code { margin: 0 auto 12px; padding: 14px 16px; background: var(--bg); border: 1px dashed var(--cc-border); border-radius: 10px; display: flex; flex-direction: column; gap: 4px; }
.delete-status-code span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.delete-status-code strong { font-size: 14px; font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; }
.delete-status-note { margin: 0 0 20px; font-size: 12px; color: var(--muted); }
/* Starile in care NU s-a sters nimic. Verdele de mai sus e doar pentru stergerea reala. */
.delete-status-check.is-neutral { background: var(--muted); }
.delete-status-check.is-warn { background: var(--warn); }
.delete-status-check.is-error { background: var(--danger); }

.side {
  position: sticky;
  top: 0;
  height: 100dvh;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: opacity var(--t-rapid);
}
.brand:hover { opacity: 0.82; }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--sp-2);
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--surface-strong);
  font-weight: 590;
  font-size: 12px;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.brand strong,
.brand span {
  display: block;
}

.brand span,
.kicker,
label,
.meta,
.status {
  color: var(--muted);
}

/* Cinci intrari, atat. Ce se atinge zilnic e in bara; restul a intrat in Setari. */
.nav {
  display: grid;
  gap: 2px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--muted);
  text-decoration: none;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-control);
  font-size: 13px;
  font-weight: 510;
  letter-spacing: 0;
  transition: color var(--t-rapid), background var(--t-rapid);
}

.nav-link:hover {
  color: var(--ink);
  background: var(--surface-strong);
}

.nav-link.active {
  color: var(--ink);
  background: var(--surface-strong);
  font-weight: 590;
}

.panel,
.output-card {
  border: 1px solid var(--line);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}

main {
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: var(--gutter);
  display: grid;
  /* Acelasi motiv ca la `.app-shell` de mai jos, un nivel mai adanc: coloana implicita a unui
     grid are `min-width: auto`, deci nu coboara sub latimea minima a continutului. Cand
     `#analytics` devine vizibil pe telefon, sectiunea se dilata peste latimea lui `main` si
     pagina capata banda laterala. Reparatia doar pe `.app-shell` a mutat cifra de la 408 la
     392, fiindca al doilea grid o tinea mai departe. Ambele au nevoie de `minmax(0, 1fr)`. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
}

.grid-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr);
  gap: 22px;
}

.panel {
  border-radius: var(--radius);
  padding: var(--card-pad);
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.panel h2,
.panel p,
.kicker {
  margin: 0;
}

.panel h2,
.setari-sectiune h2 {
  font-size: 20px;
  line-height: 1.25;
  font-weight: 590;
  letter-spacing: var(--tracking-titlu);
}

/* Eticheta: mica, stinsa, cu tracking POZITIV - sub 16px, negativul o face ilizibila. */
.kicker {
  font-size: 11px;
  font-weight: 590;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

label {
  display: grid;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 14px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--control-border);
  border-radius: 14px;
  background: var(--surface-strong);
  color: var(--ink);
  padding: 12px 13px;
  outline: none;
}

textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.45;
}

/* Inelul de focus urmeaza accentul spatiului activ. Era verde literal, deci in Personal ramanea
   verde peste violet - singurul loc din care se mai vedea vechea paleta. */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

.inline-fields {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
}

.button-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.primary-btn,
.ghost-btn,
.copy-btn,
.mini-btn {
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  min-height: 36px;
  padding: 0 var(--sp-3);
  font-weight: 510;
  font-size: 13px;
  letter-spacing: 0;
  white-space: nowrap;
  /* Niciodata `all`: aici sunt exact proprietatile care se schimba la hover si la apasare. */
  transition: background var(--t-rapid), border-color var(--t-rapid), color var(--t-rapid),
    transform var(--t-rapid), box-shadow var(--t-rapid);
}

.primary-btn {
  background: var(--accent);
  color: var(--accent-ink);
  /* Muchia de lumina de 1px: butonul pare ridicat de pe panou, fara nicio umbra. */
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22);
}

.primary-btn:hover {
  background: var(--accent-dark);
}

.ghost-btn,
.copy-btn,
.mini-btn {
  background: var(--surface-strong);
  color: var(--ink);
  border-color: var(--control-border);
}

.ghost-btn:hover,
.copy-btn:hover,
.mini-btn:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

/* Apasarea: un `scale` foarte mic, nu o coborare de 1px. E tiparul Linear si e singurul semn
   tactil de care are nevoie un buton - se simte apasat fara sa se mute din rand. */
.primary-btn:active,
.ghost-btn:active,
.copy-btn:active,
.mini-btn:active {
  transform: scale(0.97);
}

.pillars,
.output-grid {
  display: grid;
  gap: 12px;
}

/* "Creierul tau" avea douasprezece campuri intr-o coloana neintrerupta. Trei grupuri, cu titlu. */
.brain-grup {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 16px 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgb(255 255 255 / 0.5);
}

.brain-grup legend {
  padding: 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-dark);
}

.brain-salvat {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  transition: color 160ms ease;
}
.brain-salvat.e-salvat {
  color: var(--accent-dark);
  font-weight: 700;
}

/* Perechea de esec a lui `.e-salvat`. Aceeasi pozitie in pagina, culoare de avertizare:
   daca salvarea in cont pica, indicatorul nu mai are voie sa arate ca o confirmare. */
.brain-salvat.e-eroare {
  color: var(--danger, #b42318);
  font-weight: 700;
}

.pillar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 15px 16px;
  border-radius: 14px;
  background: rgb(217 239 232 / 0.34);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
}
/* Tenta verde-deschisa e gandita pt tema luminoasa; fara pereche dark, se compunea peste
   fundalul intunecat intr-un gri-verzui spalacit (#565e5d masurat) in loc de suprafata
   inchisa - textul mostenit (var(--ink)/var(--accent-dark)) cadea sub prag pe el. */
[data-theme="dark"] .pillar {
  background: var(--surface-strong);
}

.pillar > .mini-btn {
  align-self: start;
}

.pillar-edit {
  display: grid;
  gap: 10px;
}

.pillar-edit label {
  margin: 0;
  color: var(--accent-dark);
}

.pillar-edit input,
.pillar-edit textarea {
  border-color: #4c9174;
}

.pillar-edit textarea {
  min-height: 68px;
}

.generator {
  overflow: hidden;
}

.hint {
  margin: -6px 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}






.output-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 10px;
}

.output-card {
  border-radius: 18px;
  padding: 16px;
  display: grid;
  gap: 12px;
  min-height: 300px;
}

.fb-schedule {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
}
.fb-schedule > label { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.fb-schedule-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fb-schedule-row input[type="datetime-local"] {
  flex: 1 1 190px;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.fb-schedule-note { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* Redactie AI */
.nr-label { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.nr-label textarea { width: 100%; margin-top: 8px; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--control-border); background: var(--surface); color: var(--ink); font: inherit; resize: vertical; min-height: 150px; line-height: 1.5; }
.nr-issue { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.nr-issue input { width: 92px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--control-border); background: var(--surface); color: var(--ink); font: inherit; }
.nr-status { margin-top: 12px; font-size: 13px; color: var(--muted); min-height: 18px; }
.nr-canvas-wrap { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #000; aspect-ratio: 4 / 5; }
.nr-canvas-wrap canvas { width: 100%; height: 100%; display: block; }
.nr-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.nr-actions .ghost-btn { flex: 1; }
/* Banda cu paginile caruselului (miniaturi sub coperta) */
.nr-pages { margin-top: 14px; }
.nr-pages-note { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.nr-pages-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.nr-pages-strip img { width: 76px; height: 95px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); flex: 0 0 auto; }
.nr-caps { margin-top: 26px; display: grid; gap: 14px; }
.nr-cap { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-strong); overflow: hidden; }
.nr-cap-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.nr-cap-txt { width: 100%; border: none; background: transparent; color: var(--ink); font: inherit; font-size: 14px; line-height: 1.5; padding: 13px 14px; resize: vertical; min-height: 120px; }
.nr-cap-txt:focus { outline: none; }
.nr-feed { border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); padding: 16px 18px; margin-bottom: 22px; }
.nr-feed-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.nr-feed-head h3 { margin: 0; font-size: 17px; }
.nr-feed-count { color: var(--muted); font-weight: 500; font-size: 14px; }
.nr-feed-hint { margin: 6px 0 14px; font-size: 12.5px; color: var(--muted); }
.nr-feed-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-height: 340px; overflow-y: auto; }
@media (max-width: 809px) { .nr-feed-list { grid-template-columns: 1fr; } }
/* In bara Studioului (sub 300px) doua coloane taie butoanele, la orice latime de fereastra. */
/* Galeria din bara, in Personal: pozele tale, la un clic distanta de scena. Pana acum stateau
   intr-un dialog, deci nu se vedeau decat daca stiai sa-l deschizi. */
.rail-galerie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  max-height: 380px;
  overflow-y: auto;
}
.rail-galerie .gol { grid-column: 1 / -1; }
.rail-poza {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-strong);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  transition: border-color var(--t-rapid), transform var(--t-rapid);
}
.rail-poza img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rail-poza:hover,
.rail-poza:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.rail-poza:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skeleton.sk-poza { aspect-ratio: 3 / 4; border-radius: var(--radius-control); }

.nr-feed-empty { grid-column: 1 / -1; color: var(--muted); font-size: 14px; padding: 14px 4px; }

/* Studio - comutator de sursa (Stire din robot / Ideea mea) + coperta cinematica comuna */
.src-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-strong); }
.src-btn { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 700; font-size: 13.5px; padding: 9px 16px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; }
.src-btn:hover { color: var(--ink); }
.src-btn.is-on { background: var(--accent); color: #fff; }
.studio-cover { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
/* Specificitate mare: .command-center * pune max-width:100% pe tot; fortam coperta la 440px. */
#studioCover .studio-cover-inner { max-width: 440px; }
#studioCover .nr-canvas-wrap { max-width: 440px; }
.studio-cover-btn { margin-top: 0; }
@media (max-width: 809px) { .src-switch { width: 100%; } .src-btn { flex: 1; } }
/* Feed de stiri robot - carduri premium */
.nr-news { display: flex; flex-direction: column; gap: 10px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .15s, box-shadow .15s, transform .15s; }
.nr-news:hover { border-color: var(--accent); box-shadow: 0 8px 22px rgba(0,0,0,.06); transform: translateY(-1px); }
.nr-news-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nr-news-score { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); }
.nr-news.heat-hot .nr-news-score { color: #b3402a; border-color: rgba(179,64,42,.35); background: rgba(179,64,42,.09); }
/* heat-warm pe var(--warn): literalul vechi (#b5771a) cadea si in light (3.29:1), nu doar in
   dark - var(--warn) e deja calibrat per tema (9f5b16 light, fbbf24 dark) si trece pe ambele. */
.nr-news.heat-warm .nr-news-score { color: var(--warn); border-color: rgba(181,119,26,.35); background: rgba(181,119,26,.09); }
/* Titlurile de pe GitHub vin cu cuvinte lungi, fara spatii (anything2explainer:). Fara asta
   cuvantul iese din card in loc sa treaca pe randul urmator. */
.nr-news-title { overflow-wrap: anywhere; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nr-news-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nr-news-age { font-size: 11.5px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-news-age a { color: var(--muted); text-decoration: underline; }
.nr-use-btn { flex-shrink: 0; border: 1px solid var(--accent); background: var(--accent); color: #fff; font: inherit; font-weight: 700; font-size: 12.5px; padding: 7px 15px; border-radius: 9px; cursor: pointer; transition: background .15s, transform .15s; }
.nr-use-btn:hover { background: var(--accent-dark); }
.nr-use-btn:active { transform: translateY(1px); }

/* Filtre pe sursa (chips-uri). */
.nr-feed-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.nr-chip { font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--control-border); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.nr-chip:hover { border-color: var(--accent); color: var(--accent-dark); }
.nr-chip.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }

/* Badge sursa - identitate per sursa (desaturat, merge si in dark). */
.nr-src { font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.src-hn { color: #9a3412; background: rgb(234 88 12 / .1); border-color: rgb(234 88 12 / .28); }
.src-reddit { color: #9a3412; background: rgb(234 88 12 / .1); border-color: rgb(234 88 12 / .28); }
.src-gnews { color: #166534; background: rgb(22 101 52 / .1); border-color: rgb(22 101 52 / .28); }
.src-github { color: #334155; background: rgb(51 65 85 / .1); border-color: rgb(51 65 85 / .28); }
.src-other { color: var(--muted); background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .src-hn, [data-theme="dark"] .src-reddit { color: #fdba74; background: rgb(234 88 12 / .14); border-color: rgb(234 88 12 / .4); }
[data-theme="dark"] .src-gnews { color: #86efac; background: rgb(22 101 52 / .16); border-color: rgb(34 197 94 / .4); }
[data-theme="dark"] .src-github { color: #cbd5e1; background: rgb(51 65 85 / .2); border-color: rgb(100 116 139 / .4); }

/* Scor cu flacara + bara de caldura. */
.nr-news-score { display: inline-flex; align-items: center; gap: 5px; }
.nr-flame { width: 8px; height: 11px; background: currentColor; clip-path: polygon(50% 0, 100% 60%, 100% 100%, 0 100%, 0 60%); opacity: .85; }
.nr-news-heat { height: 3px; border-radius: 999px; background: var(--line); overflow: hidden; }
.nr-news-heat span { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .6s cubic-bezier(0.16, 1, 0.3, 1); }
.nr-news.heat-hot .nr-news-heat span { background: #c2410c; }
.nr-news.heat-warm .nr-news-heat span { background: #d97706; }
.nr-news.heat-mild .nr-news-heat span { background: var(--accent); }

/* Scurta descriere sub titlu (2 randuri, clamp). */
.nr-news-summary { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Skeleton-uri in feed (stagger la randare, aceeasi cascada ca la carduri). */
.nr-skel { display: grid; gap: 10px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.nr-skel.compact { padding: 12px 14px; }

/* Scor pe panoul de Acasa (badge mic cu heat). */
.home-news-heat { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.home-news-heat.heat-hot { color: #c2410c; }
.home-news-heat.heat-warm { color: var(--warn); }
.home-news-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.home-news-item .nr-src { padding: 2px 8px; }

/* Feedback la publicare - anti-confuzie (mai ales carusel lent) */
@keyframes nrPulse { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
.mini-btn.is-busy { opacity: .85; cursor: progress; animation: nrPulse 1s ease-in-out infinite; }
.mini-btn.is-done { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Memoria (Cunostinte) pe toata latimea in ecranul Creierul tau */
.grid-two .brain-memory { grid-column: 1 / -1; }
.home-news { display: grid; gap: 10px; }
.home-news-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.home-news-rank { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-dark); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.home-news-body { flex: 1; min-width: 0; }
.home-news-title { margin: 0 0 3px; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-news-meta { margin: 0; font-size: 12px; color: var(--muted); }
.home-news-item .mini-btn { flex-shrink: 0; }

.output-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.output-card h3 {
  margin: 0;
  font-size: 18px;
}

.status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 5px 9px;
  background: var(--surface-strong);
  font-size: 12px;
  font-weight: 800;
}

.status.auto {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.status.manual {
  color: var(--warn);
  background: #fff2df;
  border-color: #f0d2a8;
}

.post-text {
  min-height: 148px;
  white-space: pre-wrap;
  line-height: 1.48;
  color: #232826;
  background: #f6f8f7;
  border-radius: 14px;
  padding: 12px;
}
.output-edit {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--ink);
}



.empty {
  padding: var(--sp-5);
  border-radius: var(--radius);
  border: 1px dashed #bcc8c3;
  color: var(--muted);
  background: rgb(255 255 255 / 0.52);
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 13px;
}

/* Skeleton shimmer - stari de incarcare (Rule 5: loading states, fara spinneri). */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--line);
  border-radius: 10px;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.65), transparent);
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}
.skeleton-wrap {
  display: grid;
  gap: 12px;
}
.sk-line {
  height: 13px;
}
.sk-line.w60 {
  width: 60%;
}
.sk-title {
  height: 18px;
  width: 42%;
}
.sk-card {
  height: 150px;
}

/* Punct Zero - roluri */
.roles-note {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.roles-note .kicker {
  margin: 0 0 8px;
}

.role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.role-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

/* Memorie */
.memory-list {
  display: grid;
  gap: 10px;
}

.memory-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 15px 16px;
  background: rgb(255 255 255 / 0.72);
}

.memory-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.memory-card-head strong {
  font-size: 14px;
  letter-spacing: 0;
}

.mem-status {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--muted);
}

.mem-status.st-approved {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-dark);
}

.mem-status.st-pending {
  background: #fff2df;
  border-color: #f0d2a8;
  color: var(--warn);
}

.mem-status.st-rejected {
  background: #fbe9e9;
  border-color: #f0c2c2;
  color: var(--danger);
}

.memory-preview {
  margin: 0 0 8px;
  line-height: 1.5;
  color: var(--ink);
  font-size: 13.5px;
}

.memory-meta {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}


/* ===== Benchmark pane in Analize ===== */
.an-bench { margin-bottom: 20px; padding: 16px 18px; background: var(--cc-light); border-radius: 14px; border: 1px solid var(--cc-border); }
.an-bench-kicker { margin: 0 0 12px; }
.an-bench-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.an-bench-item { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--bg); border-radius: 10px; }
.an-bench-label { font-size: 12px; color: var(--muted); }
.an-bench-bar-wrap { height: 6px; background: var(--cc-border); border-radius: 3px; overflow: hidden; }
.an-bench-bar { height: 100%; border-radius: 3px; transition: width 0.4s; }
.an-bench-bar.above { background: var(--accent); }
.an-bench-bar.below { background: var(--warn); }
.an-bench-compare { font-size: 11.5px; color: var(--muted); }

/* ===== Crestere (sistem 0-100k + analize + trenduri) ===== */
.growth-system {
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
  margin-bottom: 22px;
}
.gs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.gs-stage { font-weight: 800; font-size: 18px; letter-spacing: 0; }
.gs-focus { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 640px; }
.gs-badge {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 800;
  font-size: 12.5px;
  white-space: nowrap;
}
.gs-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  overflow: hidden;
  margin: 16px 0 10px;
}
.gs-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}
.gs-meta { margin: 0; font-size: 12.5px; color: var(--muted); }
.gs-actions { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.gs-actions ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.gs-actions li { font-size: 13.5px; line-height: 1.45; }

.growth-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 24px 0 12px;
}
.growth-head h3 { margin: 2px 0 0; font-size: 18px; letter-spacing: 0; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.stat-card {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgb(255 255 255 / 0.74);
  text-align: center;
}
.stat-card strong { font-size: 24px; font-weight: 590; letter-spacing: -0.016em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-card span { font-size: 12px; font-weight: 400; color: var(--muted); }

.report-card {
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgb(255 255 255 / 0.78);
}
.report-summary { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.report-sec { margin-top: 12px; }
.report-sec > span {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; color: var(--muted);
}
.report-sec ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 5px; }
.report-sec li { font-size: 13.5px; line-height: 1.45; }
.report-sec ul.ok li::marker { color: var(--accent-dark); }
.report-sec ul.warn li::marker { color: var(--warn); }

.trends-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
/* Mesajul gol (fara direcții) ocupă tot rândul, ca să nu stea pe jumătate lângă blocul de semnale. */
.trends-grid > .empty { grid-column: 1 / -1; }
.trend-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgb(255 255 255 / 0.74);
  box-shadow: 0 14px 34px -30px rgb(var(--umbra) / 0.35);
}
.trend-card h4 { margin: 0; font-size: 15.5px; letter-spacing: 0; }
.trend-format {
  justify-self: start;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-dark);
}
.trend-why { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.trend-hook { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); font-style: italic; }

.insight-stamp {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--muted);
}

/* G9: semnale reale din nisa sub directiile radarului, rankuite dupa engagement. Sursele nu se
   enumera aici - se schimba des si sunt decise doar in backend; vezi comentariul de la
   `renderNicheSignals` in app.js. Scorul si bara refolosesc limbajul din feedul de stiri: aceleasi
   clase heat-hot / heat-warm / heat-mild si aceleasi nuante pentru primele doua. Treapta de jos
   difera - vezi motivul la .niche-item.heat-hot. */
.niche-signals {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px dashed var(--line);
  background: rgb(255 255 255 / 0.55);
}
.niche-signals h5 {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted);
}
.niche-signals ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.niche-item { display: grid; gap: 5px; min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--ink); --heat: var(--muted); }
.niche-item a { color: var(--accent-dark); text-decoration: none; }
.niche-item a:hover { text-decoration: underline; }
.niche-src { font-weight: 700; color: var(--muted); margin-right: 4px; }
/* Titlurile de GitHub vin ca `org/repo - descriere`, taiate abia la 200 de caractere - de trei ori
   cat un titlu de stire. Clamp la 2 randuri (ca .nr-news-title) + `anywhere`, ca un nume lung fara
   spatii sa se rupa in loc sa impinga blocul in afara pe 360px. */
.niche-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.niche-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Bara e plafonata la 140px, nu intinsa pe toata latimea blocului: pe ecran lat o bara cat randul
   se citeste ca linie despartitoare intre semnale, nu ca masura. Aceeasi greutate ca in feedul de stiri. */
.niche-heat { flex: 0 1 140px; min-width: 24px; height: 3px; border-radius: 999px; background: var(--line); overflow: hidden; }
.niche-heat > span { display: block; height: 100%; border-radius: 999px; background: var(--heat); transition: width .6s cubic-bezier(0.16, 1, 0.3, 1); }
.niche-score { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--heat); }
/* Confirmare cross-sursa. NEEXERCITATA PE DATE REALE: gruparea pe URL canonic n-a produs niciun
   cluster in trei rulari instrumentate, deci regula asta nu s-a aplicat inca in productie - vezi nota
   de la `nrSurse` in app.js. Stilul e verificat doar cu date injectate.
   Apare rar, deci nu tipa: text, nu insigna. Se desparte de vechime doar
   prin greutate si printr-un punct, acelasi separator ca in .nr-news-foot. Punctul e pus din CSS pe
   vecin, deci exista numai cand exista ambele - un separator scris in HTML ar fi ramas orfan exact
   ca la vechimea fara `published_at`. */
.niche-confirm { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.niche-confirm + .niche-age::before { content: "·"; margin-right: 8px; }
.niche-age { flex: 0 0 auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
/* Aceleasi doua nuante ca la scorul stirilor (.nr-news-score). Mild ramane pe --muted, NU pe --accent
   ca in feedul de stiri: acolo cardurile stau separat, aici cele trei trepte stau una sub alta si se
   compara direct - verdele de accent ar spune "bun", iar in tema inchisa accentul e chiar portocaliu,
   deci semnalul cel mai slab ar fi aratat cel mai fierbinte. Gri neutru = putin, fara echivoc. */
.niche-item.heat-hot { --heat: #b3402a; }
/* Gasit de harness, ecran neatins pana acum: #b5771a pe fundalul cardului (aproape alb) da
   3.69:1 in light, sub 4.5. Acelasi bug si acelasi remediu ca la .nr-news.heat-warm (mai sus in
   fisier) si .home-news-heat.heat-warm: var(--warn) e calibrat pt 4.5:1 pe suprafete obisnuite,
   verificat randat 5.5:1 aici. Nu atinge dark - vezi regula de mai jos, are deja alta valoare. */
.niche-item.heat-warm { --heat: var(--warn); }
/* Pe fundal inchis #b3402a scade la 3,3:1, sub AA. Aceeasi familie, luminozitate ridicata - ambele
   valori exista deja in paleta portocalie: #fb923c (8,7:1) si #fbbf24 (11,2:1). */
[data-theme="dark"] .niche-item.heat-hot { --heat: #fb923c; }
[data-theme="dark"] .niche-item.heat-warm { --heat: #fbbf24; }

/* OUTREACH CALD - oameni care au comentat la postarile tale. */
.outreach-note { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.outreach-list { display: grid; gap: 12px; }
.outreach-card {
  display: grid; gap: 8px; padding: 16px; border-radius: 16px;
  border: 1px solid var(--line); background: rgb(255 255 255 / 0.74);
}
.outreach-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.outreach-top strong { font-size: 15px; }
.outreach-meta { font-size: 11.5px; color: var(--muted); }
/* Gasit de harness, ecran neatins pana acum: --orange nu e definit nicaieri (ca --green de la
   delete-status), deci fallback-ul #ff9f0a se citea direct pe propriul fundal, tot portocaliu
   (rgba(255,159,10,.12) peste cardul deschis) - 1.87:1 in light. In dark, acelasi #ff9f0a cade pe
   fundalul mult mai inchis al cardului si trece deja (7.39:1 randat) - de-aia valoarea de baza
   ramane cea corecta pt dark, iar var(--warn) (calibrat pt text pe suprafete deschise) o
   inlocuieste doar in light. Suprascrierea de mai jos, in blocul dark, pastreaza exact valoarea
   veche - zero schimbare vizuala acolo. */
.outreach-urgent { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--warn); background: rgba(255,159,10,.12); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.outreach-said { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); font-style: italic; }
.outreach-post { margin: 0; font-size: 11.5px; color: var(--muted); }
.outreach-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.outreach-actions .ghost-btn { text-decoration: none; display: inline-flex; align-items: center; }
.outreach-draft {
  margin-top: 4px; padding: 12px 14px; border-radius: 12px;
  border: 1px dashed var(--line); background: var(--accent-soft);
  display: grid; gap: 8px; justify-items: start;
}
/* `display: grid` invinge atributul `hidden`, deci cutia goala s-ar vedea ca o bara colorata. */
.outreach-msg { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
/* Gasit de harness, ecran neatins pana acum: .outreach-draft sta pe var(--accent-soft) in light
   (fundal deschis, tentat) - var(--muted) da 4.28:1, sub 4.5. Acelasi tipar ca la .ai-result
   (mai sus in fisier): var(--accent-dark) e perechea calibrata pt var(--accent-soft), 6.48:1 aici.
   In dark, .outreach-draft trece pe var(--surface) (regula de mai jos in fisier, neutra, nu
   accent-soft), unde var(--muted) trecea deja pragul - suprascrierea dark de mai jos pastreaza
   exact acea valoare. */
.outreach-why { margin: 0; font-size: 11.5px; color: var(--accent-dark); }
.outreach-wait { margin: 0; font-size: 12.5px; color: var(--muted); }

@media (max-width: 809px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trends-grid { grid-template-columns: 1fr; }
}
@media (max-width: 809px) {
  .gs-head { flex-direction: column; }
  .growth-head { flex-direction: column; align-items: stretch; }
}

.memory-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.knowledge-add {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.knowledge-add input,
.knowledge-add textarea {
  width: 100%;
}

.knowledge-add textarea {
  min-height: 82px;
}

.knowledge-add .primary-btn {
  justify-self: start;
}

/* Rezultatul echipei AI */
.team-result {
  margin: 14px 0 4px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.9), var(--accent-soft));
  box-shadow: var(--shadow);
}

.team-block {
  margin-top: 14px;
}

.team-block > span {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--muted);
}

.team-block ul {
  margin: 6px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

.team-block li {
  font-size: 13.5px;
  line-height: 1.45;
}

/* Zona de poza: tinta mare, cu trage-si-lasa + lipire din clipboard. */
.image-drop {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 268px;
  padding: 22px 18px;
  border-radius: 18px;
  border: 1.5px dashed #c3cfc9;
  background: var(--surface);
  color: var(--muted);
  text-align: center;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.image-drop:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.drop-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--accent);
  box-shadow: 0 12px 26px -20px rgb(var(--umbra) / 0.9);
  transition: transform 140ms ease;
}

.drop-icon svg {
  width: 24px;
  height: 24px;
}

.drop-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.drop-hint {
  font-size: 12.5px;
  color: var(--muted);
}

.image-drop.is-dragging {
  border-color: var(--accent);
  border-style: solid;
  background: #eefaf5;
  transform: translateY(-1px);
}

/* Doua surse pentru poza: din calculator sau din Media (Galeria foto = baza noastra). */
.drop-sources {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.drop-source {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--control-border);
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: 140ms ease;
}
.drop-source svg { width: 18px; height: 18px; }
.drop-source:hover { border-color: var(--accent); transform: translateY(-1px); }
.drop-source.is-media {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.drop-source.is-media:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* Selectorul "Din Media" - grila de poze din galerie intr-un dialog. */
.media-picker-card { width: min(680px, 92vw); max-height: 82vh; display: flex; flex-direction: column; }
.media-picker-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.media-picker-head h3 { margin: 2px 0 0; }
.media-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 12px;
  overflow-y: auto;
  padding: 2px;
}
.media-pick {
  position: relative;
  padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--bg); cursor: pointer; transition: 140ms ease;
}
.media-pick img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.media-pick:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.media-pick:hover::after {
  content: "Alege"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgb(7 91 69 / 0.55); color: #fff; font-weight: 800; font-size: 13px;
}
.media-picker-empty {
  grid-column: 1 / -1; text-align: center; padding: 40px 20px;
  color: var(--muted); border: 1px dashed var(--line); border-radius: 14px;
}
.media-picker-empty strong { display: block; color: var(--ink); margin-bottom: 6px; }

.image-drop.is-dragging .drop-icon {
  transform: scale(1.06);
}

/* Previzualizarea arata EXACT fisierul care pleaca pe Instagram: aceleasi proportii,
   aceleasi margini albe daca exista. Fara aspect-ratio impus, ca sa nu minta. */
/* Rama se strange EXACT pe fisierul care pleaca: fara spatiu mort in lateral, iar
   conturul inchis la culoare face vizibile marginile albe daca poza are asa ceva. */
.preview-frame {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: 0 20px 44px -30px rgb(var(--umbra) / 0.7);
}

.preview-frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 340px;
}

.frame-choice {
  display: inline-flex;
  padding: 3px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: #f1f4f2;
}


.frame-btn {
  padding: 6px 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  transition: background 130ms ease, color 130ms ease;
}

.frame-btn:hover { color: var(--ink); }

.frame-btn.is-on {
  background: var(--surface-strong);
  color: var(--accent-dark);
  box-shadow: 0 6px 14px -10px rgb(var(--umbra) / 0.6);
}

/* Ce a ales incadrarea automata si cat costa. Fapt scurt, nu explicatie. */
.preview-note {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.preview-note:empty { display: none; }

.preview-size {
  /* Impinsa la dreapta si cand nota lipseste (nota e ascunsa daca e goala). */
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Cand nota e prezenta, ea preia impingerea la dreapta si stau lipite. */
.preview-note:not(:empty) + .preview-size { margin-left: 0; }

.preview-actions {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
}

.glass-btn {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.28);
  background: rgb(12 24 20 / 0.62);
  backdrop-filter: blur(10px);
  color: #f2fbf7;
  font-size: 12.5px;
  font-weight: 700;
  transition: background 130ms ease, border-color 130ms ease;
}

.glass-btn:hover {
  background: rgb(12 24 20 / 0.82);
  border-color: rgb(255 255 255 / 0.5);
}

.glass-btn.is-danger:hover {
  background: rgb(122 34 34 / 0.8);
  border-color: rgb(255 190 190 / 0.5);
}

/* ===== Centrul de comanda social media ===== */
.command-center {
  overflow: visible;
  background: var(--surface);
}
.command-center,
.command-center * {
  max-width: 100%;
}

.command-center textarea,
.command-center input {
  min-width: 0;
}

.command-center .button-row {
  flex-wrap: wrap;
}

.command-center .ghost-btn,
.command-center .primary-btn,
.command-center .copy-btn {
  white-space: normal;
}

.section-lead {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.step-tag {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

#seedIdea {
  min-height: 96px;
  resize: vertical;
}

.stage-header h3,
.results-head h3 {
  margin: 2px 0 0;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0;
}

.stage-header,
.results-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.mini-badge,
.stage-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.platform-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 9px;
}

.plat-tile {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 14px 8px 11px;
  border-radius: 15px;
  border: 1px solid var(--control-border);
  background: var(--surface-strong);
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: border-color 130ms ease, background 130ms ease, transform 130ms ease, box-shadow 130ms ease;
}

.plat-tile:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 14px 30px -24px rgb(var(--umbra) / 0.7);
}

.plat-tile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.plat-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #f1f4f2;
  color: #96a09c;
  transition: background 130ms ease, color 130ms ease;
}

.plat-icon svg {
  width: 19px;
  height: 19px;
}

.plat-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
}

.plat-state {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Selectat: iese in fata cu culoarea reala a platformei, doar pe iconita. */
.plat-tile:has(input:checked) {
  border-color: #3d8a70;
  background: #eefaf5;
  box-shadow: 0 12px 26px -20px rgb(var(--umbra) / 0.75);
}

.plat-tile:has(input:checked) .plat-state,
.plat-tile.is-fixed .plat-state {
  color: var(--accent-dark);
}

.plat-tile:has(input:checked) .plat-icon,
.plat-tile.is-fixed .plat-icon {
  color: #fff;
}

.plat-tile.is-fixed {
  cursor: default;
  border-color: #7cc7ae;
  background: linear-gradient(160deg, #f2fbf7, #e6f6ef);
  box-shadow: 0 14px 30px -22px rgb(var(--umbra) / 0.8);
}

.plat-tile.is-fixed:hover {
  transform: none;
}

.plat-tile[data-plat="instagram"] .plat-icon {
  background: linear-gradient(135deg, #f9ce34, #ee2a7b 52%, #6228d7);
  color: #fff;
}

.plat-tile[data-plat="facebook"]:has(input:checked) .plat-icon { background: #1877f2; }
.plat-tile[data-plat="tiktok"]:has(input:checked) .plat-icon { background: #101014; }
.plat-tile[data-plat="threads"]:has(input:checked) .plat-icon { background: #101014; }

.plat-tile:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Ce publicam pe Instagram: postare, story sau amandoua. Formele mici arata raportul
   real al fiecaruia, ca sa se vada dintr-o privire ca sunt doua formate diferite. */
.ig-format {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.ig-firstcomment {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 11px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.ig-firstcomment input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex: 0 0 auto;
}

.carousel-strip {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.carousel-head { display: flex; flex-direction: column; gap: 2px; }
.carousel-head strong { font-size: 13px; }
.carousel-head span { font-size: 12px; color: var(--muted); }
.carousel-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.carousel-thumb {
  position: relative;
  width: 62px;
  height: 78px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.carousel-thumb.is-main { outline: 2px solid var(--accent); outline-offset: -2px; }
.carousel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-badge {
  position: absolute;
  left: 4px;
  top: 4px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 5px;
}
.carousel-del {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-del:hover { background: #e5484d; }
.carousel-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.fmt-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 13px;
  border: 1px solid var(--control-border);
  background: var(--surface-strong);
  color: var(--muted);
  text-align: left;
  transition: border-color 130ms ease, background 130ms ease, color 130ms ease, box-shadow 130ms ease;
}

.fmt-chip:hover { border-color: var(--accent); color: var(--ink); }

.fmt-shape {
  flex-shrink: 0;
  border-radius: 4px;
  border: 1.5px solid currentColor;
  opacity: 0.55;
}

.fmt-post { width: 16px; height: 20px; }
.fmt-story { width: 12px; height: 21px; }

.fmt-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.fmt-ratio {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.fmt-chip.is-on {
  border-color: #3d8a70;
  background: #eefaf5;
  color: var(--accent-dark);
  box-shadow: 0 10px 22px -18px rgb(var(--umbra) / 0.75);
}

.fmt-chip.is-on .fmt-shape { opacity: 1; }
.fmt-chip.is-on .fmt-name { color: var(--accent-dark); }

.fmt-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mm-start {
  min-height: 52px;
  font-size: 15px;
  padding: 14px 22px;
  border-radius: 16px;
}

/* Placa echipei: acelasi limbaj vizual ca restul aplicatiei. Sta PLIATA la pornire si sub
   rezultate, ca postarile sa fie primul lucru pe care il vezi dupa ce apesi butonul. */
.command-stage {
  position: relative;
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.stage-header > div { min-width: 0; }

.stage-toggle {
  margin-left: auto;
  white-space: nowrap;
}

.mastermind {
  position: relative;
  border-radius: 16px;
  padding: 22px 16px 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}

.wire-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.mm-tier {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 18px;
  margin: 22px 0;
}

.mm-tier-core {
  margin: 4px 0 26px;
}

.mm-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: min(132px, 42vw);
  min-height: 76px;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  color: var(--ink);
  text-align: center;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, opacity 220ms ease;
}

.mm-node .mm-name {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0;
}

.mm-node .mm-job {
  max-width: 100%;
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0;
}

.mm-tier-label {
  position: relative;
  z-index: 2;
  margin: 2px 0 -8px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Acelasi tratament ca la iconitele din ecranul Agenti: pastila usor tonata cu culoarea
   agentului. Nu e doar de frumusete - pe fundalul plachii, portocaliul si turcoazul cadeau
   sub pragul de contrast puse direct pe gri; pe pastila lor tonata trec confortabil. */
.mm-node .mm-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: var(--agent, var(--accent));
  background: color-mix(in srgb, var(--agent, var(--accent)) 13%, white);
  border: 1px solid color-mix(in srgb, var(--agent, var(--accent)) 26%, transparent);
}
.mm-node .mm-icon svg { width: 16px; height: 16px; }

.mm-node .mm-state {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted);
}
.mm-node .mm-detail {
  max-width: 100%;
  font-size: 9.5px;
  line-height: 1.3;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Agent care nu intra in joc la rularea curenta (fara poza, platforma nebifata, mod Rapid). */
.mm-agent.is-off {
  opacity: 0.45;
  border-style: dashed;
}
.mm-agent.is-off .mm-dot { background: #b3bcb8; }
.mm-agent.is-work .mm-state { color: var(--warn); }
.mm-agent.is-done .mm-state { color: var(--accent); }
.mm-agent.is-problem .mm-state { color: var(--danger); }

.mm-core {
  width: 132px;
  min-height: 104px;
  border-radius: 18px;
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

.mm-core .mm-name { color: var(--accent-dark); }
.mm-core .mm-job { color: var(--accent-dark); opacity: 0.75; }

.mm-core svg {
  width: 31px;
  height: 31px;
  color: var(--accent);
}

.mm-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #c3ccc8;
  transition: 220ms ease;
}

.mm-agent.is-ready .mm-dot { background: var(--accent); }
.mm-agent.is-ready { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.mm-agent.is-work { transform: translateY(-2px); border-color: var(--warn); background: rgb(159 91 22 / 0.07); }
.mm-agent.is-work .mm-dot { background: var(--warn); animation: mmPulse 1s ease-in-out infinite; }
.mm-agent.is-problem { border-color: var(--danger); background: rgb(154 47 47 / 0.06); }
.mm-agent.is-problem .mm-dot { background: var(--danger); }
.mm-agent.is-done .mm-dot,
.mm-agent.is-skip .mm-dot { background: #9aa5a1; }
.mm-agent.is-done { opacity: 0.8; }
.mm-agent.is-skip { opacity: 0.5; }

.results-head {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.command-center .output-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.command-center .output-card {
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgb(255 255 255 / 0.78);
  box-shadow: 0 18px 42px -30px rgb(var(--umbra) / 0.35);
}

@keyframes mmPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}

/* Firele arata cine raspunde in fata nucleului. Linie subtire, fara stralucire - se ingroasa
   si curge doar pe agentul care lucreaza chiar acum, ca sa se vada unde s-a ajuns. */
.wire-layer .wire { fill: none; stroke: var(--line); stroke-width: 1.2; }
.wire-layer .wire.is-ready { stroke: color-mix(in srgb, var(--accent) 40%, transparent); }
.wire-layer .wire.is-work { stroke: var(--warn); stroke-width: 1.8; stroke-dasharray: 5 9; animation: mmFlow 0.7s linear infinite; }
.wire-layer .wire.is-problem { stroke: var(--danger); }
.wire-layer .wire.is-done { stroke: var(--line); }

@keyframes mmFlow { to { stroke-dashoffset: -28; } }

@media (prefers-reduced-motion: reduce) {
  .mm-agent.is-work .mm-dot { animation: none; }
  .wire-layer .wire.is-work { animation: none; }
}

/* ===== Ecranul Agenti ===== */
.mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 4px 0 20px;
}

.mode-btn {
  display: grid;
  gap: 5px;
  text-align: left;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--control-border);
  background: var(--surface-strong);
  cursor: pointer;
  transition: 180ms ease;
}

.mode-btn:hover { border-color: var(--accent); }

.mode-btn.is-active {
  border-color: #3d8a70;
  background: #eefaf5;
  box-shadow: 0 12px 28px -20px rgb(var(--umbra) / 0.7);
}

.mode-title { font-weight: 800; font-size: 15px; color: var(--ink); }
.mode-btn.is-active .mode-title { color: var(--accent-dark); }
.mode-note { font-size: 12.5px; line-height: 1.4; color: var(--muted); }

.agents-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.agent-card {
  --agent: #14b8a6;
  position: relative;
  display: grid;
  gap: 11px;
  padding: 18px 18px 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgb(255 255 255 / 0.78);
  box-shadow: 0 18px 44px -32px rgb(var(--umbra) / 0.36);
  overflow: hidden;
}
.agent-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--agent), color-mix(in srgb, var(--agent) 25%, transparent));
}
/* Culoarea fiecarui agent, definita O SINGURA DATA. O folosesc si cardurile din ecranul
   Agenti, si nodurile de pe placa din Studio - acelasi agent, aceeasi culoare peste tot. */
.brand-eye { --agent: #0d9488; }
.brand-radar { --agent: #0891b2; }
.brand-compass { --agent: #4f46e5; }
.brand-ig { --agent: #d6337d; }
.brand-fb { --agent: #1877f2; }
/* Turcoazul si portocaliul erau prea deschise: 2.9:1 si 2.8:1 pe pastila lor, sub pragul de
   3:1. Cu o treapta mai inchise trec la 4.5:1 si 4.0:1, si arata la fel de bine. */
.brand-tt { --agent: #0e7490; }
.brand-th { --agent: #1f2937; }
.brand-prism { --agent: #b45309; }
.brand-shield { --agent: #dc2626; }
.brand-chisel { --agent: #059669; }
/* Threads e aproape negru/alb ca marca (#1f2937) - pe fundal inchis devine text-aproape-negru
   pe negru, deci --agent tot are nevoie de o valoare proprie pt dark. var(--ink) (aproape alb,
   #f2efe9) parea solutia simpla si chiar repara .agent-codename (are pereche dark, mai jos),
   dar strica tot ce deriva FUNDALUL din acelasi --agent: .agent-spec (pastila 11%+alb devine
   ea insasi aproape alba, iar textul 80%+negru pe ea cade la 1.81:1) si iconul (fundal 13%+alb,
   glif = --agent brut, 1.13:1 - practic invizibil). Gasit de paznic din pixelii randati, nu
   din calcul - sonda veche sarea peste aceste noduri (color-mix se serializeaza color(srgb...),
   nu rgb(), vezi contrast_probe.js).
   Cauza reala: celelalte 9 marci au luminozitate HSL medie (~30-59%) si merg neschimbate in
   ambele teme; #1f2937 e un outlier, aproape negru (~17%). Solutia nu e sa imprumute --ink
   (extrema alba), ci o valoare proprie, cu aceeasi nuanta gri-albastruie, adusa la o
   luminozitate medie ca a celorlalte marci: color-mix(in srgb, #1f2937 70%, white) = #626973.
   Verificat randat pe toate cele patru consumatoare ale lui --agent in dark: .agent-codename/
   .agent-modified/.agent-reset (70%+alb pe fundalul cardului) 6.24:1, .agent-spec (80%+negru
   pe pastila 11%+alb) 6.59:1, iconul (brut pe pastila 13%+alb) 4.66:1 - toate peste prag, cu
   marja comparabila celorlalte 9 marci (5.24-7.57:1 in acelasi tabel). */
[data-theme="dark"] .brand-th { --agent: #626973; }

.agent-card-head {
  display: flex;
  align-items: center;
  gap: 13px;
}
.agent-icon {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--agent);
  background: color-mix(in srgb, var(--agent) 13%, white);
  border: 1px solid color-mix(in srgb, var(--agent) 26%, transparent);
}
.agent-icon svg { width: 23px; height: 23px; }
.agent-id { display: grid; gap: 1px; min-width: 0; }
.agent-step {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.agent-card-head h3 { margin: 0; font-size: 16.5px; letter-spacing: 0; line-height: 1.2; }
/* Cele 10 culori de brand (mai sus) sunt alegere de identitate - nu se ating. Dar text pe
   3:1 din nuanta bruta a fiecareia, direct pe fundalul cardului, masurat sub 4.5:1 pt noua
   din zece in cel putin o tema (Atlas 2.95, Ritm 3.46, Prisma 3.69, Vama 3.84, Nova 4.09,
   Puls 4.38 in dark; Radar 3.66, Vizor 3.72, Cizel 3.75, Puls 4.21 in light).
   O singura solutie pt toate zece, calculata din chiar hue-ul lor: color-mix pastreaza
   nuanta (identitatea ramane vizibila si recognoscibila), doar ii schimba luminozitatea -
   mai inchisa pe fundalul deschis, mai deschisa pe cel intunecat. Verificat pe toate cele 10:
   minim 5.24:1 in light (80% agent + negru), minim 5.46:1 in dark (70% agent + alb).
   Gasit de reviewer: .agent-modified si .agent-reset aveau exact acelasi tipar (color:
   var(--agent) brut, direct pe fundalul cardului) si aceleasi cifre - nefixate pana acum
   fiindca stau in alt bloc, nu in cel de mai sus. Aceeasi solutie unica, nu una noua. */
.agent-codename,
.agent-spec,
.agent-modified,
.agent-reset {
  color: color-mix(in srgb, var(--agent) 80%, black);
}
.agent-codename {
  font-size: 12px;
  font-weight: 700;
}
.agent-spec {
  justify-self: start;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--agent) 11%, white);
  border: 1px solid color-mix(in srgb, var(--agent) 22%, transparent);
}
.agent-desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

.agent-prompt-field { display: grid; gap: 6px; }
/* Cauza reala a celui mai numeros defect din audit (10 noduri, 1.26:1 in dark): --text nu
   e definit nicaieri in fisier (grep confirmat), deci se folosea mereu rezerva #1f2937 - pe
   toate cele 10 carduri de agent, indiferent de brand. Nu are legatura cu Threads/.brand-th
   (vezi comentariul de la [data-theme="dark"] .brand-th, ramas necesar pt alt selector).
   var(--ink) e tokenul corect pt o eticheta obisnuita, la fel ca .nr-label mai sus in fisier. */
.agent-prompt-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.agent-modified {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}
.agent-card textarea {
  min-height: 128px;
  resize: vertical;
  width: 100%;
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: 12px;
  border: 1px solid var(--control-border);
  background: rgb(255 255 255 / 0.7);
  padding: 11px 12px;
}
.agent-card textarea:focus {
  outline: none;
  border-color: var(--agent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent) 18%, transparent);
}
.agent-reset {
  justify-self: start;
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 809px) {
  .mode-switch,
  .agents-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 809px) {
  .image-drop {
    min-height: 190px;
  }

  .preview-frame img {
    max-height: 340px;
  }
}

@media (max-width: 809px) {
  .command-center {
    margin-inline: 0;
    overflow: hidden;
  }

  .command-center .section-lead {
    overflow-wrap: anywhere;
  }
  .results-head {
    flex-direction: column;
    align-items: stretch;
  }

  /* Capul plachii pe telefon: titlul si pastila de stare isi pastreaza latimea lor (altfel
     pastila se intindea cat ecranul si arata ca un buton), iar "Vezi echipa" ramane lat -
     e singura actiune de aici si asa se apasa usor cu degetul. */
  .stage-header {
    align-items: center;
  }
  .stage-header > div { flex: 1 1 100%; }
  .stage-pill { flex: 0 0 auto; }

  .command-center .output-grid {
    grid-template-columns: 1fr;
  }

  .platform-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .command-stage {
    padding: 14px;
    border-radius: 18px;
  }

  .mastermind {
    min-height: 300px;
    padding: 22px 10px;
  }

  .mm-tier {
    gap: 10px;
    margin: 18px 0;
  }

  .mm-node {
    width: min(124px, 44vw);
    min-height: 74px;
    padding: 10px 9px;
  }

  .mm-core {
    width: 126px;
    min-height: 94px;
  }
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 13px 16px;
  border-radius: 14px;
  background: var(--ink);
  color: white;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: 180ms ease;
  z-index: 20;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

dialog {
  border: 0;
  padding: 0;
  width: min(720px, calc(100vw - 28px));
  background: transparent;
}

dialog::backdrop {
  background: rgb(18 21 20 / 0.54);
  backdrop-filter: blur(6px);
}

.dialog-card {
  padding: 22px;
  border-radius: 22px;
  background: var(--surface-strong);
  box-shadow: 0 28px 80px rgb(0 0 0 / 0.24);
}

.dialog-card p {
  color: var(--muted);
  line-height: 1.5;
}

#dialogCopy {
  min-height: 170px;
  margin: 12px 0;
}

.account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
}

/* Pe telefon butonul Iesi se intindea pe jumatate din cutie, langa un email deja taiat.
   Textul ia spatiul liber, butonul exact cat ii trebuie. */
.account .ghost-btn { flex: 0 0 auto; }
.account-info {
  flex: 1 1 auto;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--muted);
}

.account-info strong {
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account .ghost-btn {
  min-height: 34px;
  padding: 0 13px;
  font-size: 12.5px;
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 30rem),
    radial-gradient(circle at 90% 8%, rgb(20 45 80 / 0.16), transparent 26rem),
    rgb(18 21 20 / 0.82);
  backdrop-filter: blur(10px);
}

.auth-card {
  width: min(420px, 100%);
  padding: 30px 30px 26px;
  border-radius: 24px;
  background: var(--surface-strong);
  box-shadow: 0 30px 90px rgb(0 0 0 / 0.4);
  display: grid;
  gap: 4px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.auth-brand strong {
  display: block;
}

.auth-brand span {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
}

.auth-card h2 {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
}

.auth-lead {
  color: var(--muted);
  line-height: 1.5;
  margin: 4px 0 14px;
}

#authForm label {
  margin-bottom: 12px;
}

.auth-msg {
  min-height: 18px;
  margin: 2px 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--danger);
  line-height: 1.4;
}

.auth-msg.ok {
  color: var(--accent-dark);
}

#authForm .primary-btn {
  width: 100%;
  min-height: 44px;
}

.auth-switch {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.linklike {
  background: none;
  border: 0;
  padding: 0 2px;
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 13px;
}

.linklike:hover {
  text-decoration: underline;
}

.is-busy {
  opacity: 0.7;
  pointer-events: none;
}

@media (max-width: 1199px) {
  .app-shell {
    /* `1fr` are `min-width: auto`, deci coloana nu se poate micsora sub latimea minima a
       continutului. Pe Analize, canvasul de grafic isi ia intai dimensiunea bruta (900px) si
       abia apoi Chart.js ii pune `style.width` - dar primul layout a inghetat deja latimea
       minima a coloanei la 408px. Rezultat: pagina se misca lateral pe telefon (408 fata de
       390 sau 360). `minmax(0, 1fr)` lasa coloana sa coboare sub continut, si banda dispare. */
    grid-template-columns: minmax(0, 1fr);
  }

  .side {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav {
    /* Cate linkuri are spatiul, atatea coloane, toate pe un rand. Cu un numar fix de coloane,
       Personal (3 linkuri) lasa doua celule goale, iar cu auto-fit ramanea un link singur pe
       randul doi. Legaturile ascunse nu ocupa coloana, fiindca atributul hidden le scoate din layout. */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .nav-link {
    justify-content: center;
  }

  .grid-two {
    grid-template-columns: 1fr;
  }

  .output-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 809px) {
  main,
  .side {
    padding: 16px;
  }

  .panel {
    padding: var(--sp-4);
  }

  .nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inline-fields,
  .output-grid {
    grid-template-columns: 1fr;
  }

  .panel-head {
    display: grid;
  }

  .button-row {
    width: 100%;
  }

  .primary-btn,
  .ghost-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}


.mfa-panel {
  display: grid;
  gap: 12px;
}

.mfa-qr {
  display: grid;
  place-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-strong);
}

.mfa-qr img {
  width: min(230px, 100%);
  height: auto;
  display: block;
}



#mfaCode {
  text-align: center;
  letter-spacing: 0;
  font-weight: 800;
  font-size: 22px;
}

#mfaSubmit,
#mfaCancel {
  width: 100%;
}


.ai-btn {
  /* Butonul cel mai important al Studioului. Culoarea lui e accentul spatiului, nu un negru fix:
     altfel in Personal iesea negru peste violet, iar in tema luminoasa nu urma deloc tema. */
  background: var(--accent);
  color: var(--accent-ink);
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--muted);
}

.nav-link.active .nav-icon,
.nav-link:hover .nav-icon {
  color: var(--ink);
}

.nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@keyframes badge-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}





/* Pagina Gmail full-screen */
.gmail-page {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--bg);
}

.gmail-page-inner {
  display: flex;
  height: 100dvh;
}

.gmail-side {
  width: 244px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 16px;
  border-right: 1px solid var(--line);
  background: rgb(255 255 255 / 0.72);
  backdrop-filter: blur(18px);
}

.gmail-side-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 8px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 120ms ease;
}

.gmail-side-back:hover {
  color: var(--ink);
  background: var(--surface-strong);
}

.gmail-side-back svg {
  width: 17px;
  height: 17px;
}

.gmail-compose {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 6px 0 14px;
  padding: 12px 16px;
  border: none;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgb(var(--umbra) / 0.7);
  transition: 140ms ease;
}

.gmail-compose:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}

.gmail-compose svg {
  width: 18px;
  height: 18px;
}

.gmail-folders {
  display: grid;
  gap: 3px;
}

.folder-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  transition: 120ms ease;
}

.folder-link svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-shrink: 0;
}

.folder-link:hover {
  background: var(--surface-strong);
}

.folder-link.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.folder-link.active svg {
  color: var(--accent-dark);
}

.folder-count {
  margin-left: auto;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.folder-link.active .folder-count {
  background: var(--accent-dark);
}

.gmail-side-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.conn-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 6px;
}

.conn-row .status-dot {
  width: 11px;
  height: 11px;
  box-shadow: none;
}

.conn-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.status-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--muted);
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.6);
}

.status-dot.dot-green {
  background: var(--accent);
}

.status-dot.dot-red {
  background: var(--danger);
}

.status-dot.dot-orange {
  background: var(--warn);
}

.status-dot.conn-off {
  background: #c3c9c6;
}

/* Jurnal de erori in Generator: ce a picat, cand si de ce. */
.err-log {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgb(239 68 68 / 0.28);
  background: rgb(239 68 68 / 0.06);
}
.err-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
/* Pastelurile de mai jos (#f7d9d9, #9fc9b8, #fca5a5, #e3efe9) mergeau doar din intamplare -
   fundalul lui .err-item e o suprapunere translucenta de negru (rgb(0 0 0/.22)) fara pereche
   [data-theme], deci in light se compune intr-un gri mediu (~#c3bcbb masurat), pe care doar
   text aproape-negru trece pragul. Valoarea de baza devine cea corecta pt light (var(--ink)/
   var(--danger)); dark isi pastreaza exact pastelurile de dinainte, explicit mai jos. */
.err-log-head strong { font-size: 14px; color: var(--danger); }
.err-log-list { display: grid; gap: 8px; max-height: 260px; overflow-y: auto; }
.err-item {
  padding: 9px 11px;
  border-radius: 11px;
  background: rgb(0 0 0 / 0.22);
  border: 1px solid rgb(255 255 255 / 0.07);
}
.err-item-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.err-where { color: var(--ink); }
.err-item p {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}
[data-theme="dark"] .err-log-head strong { color: #f7d9d9; }
[data-theme="dark"] .err-item-head { color: #9fc9b8; }
[data-theme="dark"] .err-where { color: #fca5a5; }
[data-theme="dark"] .err-item p { color: #e3efe9; }

/* Stare "nu stim sigur" / "necesita reconectare" - nu o dam drept conectat. */
.status-dot.dot-warn {
  background: var(--warn);
}

/* Publicarea e ireversibila: butonul cere o a doua apasare, fara dialog de sistem. */
.primary-btn.is-confirm,
.mini-btn.is-confirm,
.ghost-btn.is-confirm {
  background: var(--warn);
  border-color: var(--warn);
  color: #1f1300;
}

.conn-hint {
  display: inline-block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-dark);
}

/* Grila de conexiuni (pagina Platforme) */
.conn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.conn-tile {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgb(255 255 255 / 0.78);
  box-shadow: 0 14px 36px -30px rgb(var(--umbra) / 0.34);
  min-height: 148px;
}
.conn-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.conn-tile-title { display: flex; align-items: center; gap: 10px; }
.conn-tile-title svg { width: 24px; height: 24px; color: var(--ink); flex-shrink: 0; }
.conn-tile h3 { margin: 0; font-size: 15.5px; letter-spacing: 0; }
.conn-tile p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.conn-tile .mini-btn { justify-self: start; margin-top: auto; }
.conn-tile .conn-hint { margin-top: auto; }

/* ===== Acasa: categorii platforme (premium, pe brand) ===== */
.home-plat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 16px; }
.home-plat {
  position: relative; overflow: hidden;
  display: grid; gap: 8px; align-content: start; min-height: 168px;
  padding: 20px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--surface-strong);
  box-shadow: 0 18px 44px -30px rgb(var(--umbra) / 0.42);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.home-plat:not(.is-on) { opacity: 0.92; }
.home-plat.is-on { cursor: pointer; }
.home-plat.is-on:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: 0 24px 52px -28px rgb(var(--umbra) / 0.52); }

.home-plat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.home-plat-badge {
  width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center;
  color: #fff; box-shadow: 0 12px 24px -12px rgb(0 0 0 / 0.4);
}
.home-plat-badge svg { width: 26px; height: 26px; color: #fff; }
.home-plat-badge.badge-ig { background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); }
.home-plat-badge.badge-fb { background: linear-gradient(135deg, #2a8bff, #0a5bd3); }
.home-plat-badge.badge-th { background: linear-gradient(135deg, #3a3a3a, #000); }
.home-plat-badge.badge-tt { background: linear-gradient(135deg, #25f4ee, #111 48%, #fe2c55); }

.home-plat-status { flex-shrink: 0; font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0; }
.home-plat-status.on { background: var(--accent-soft); color: var(--accent-dark); border: 1px solid var(--accent-line); }
.home-plat-status.soon { background: var(--surface-strong); color: var(--muted); border: 1px solid var(--line); }
.home-plat h3 { margin: 2px 0 0; font-size: 17px; letter-spacing: 0; }
.home-plat p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.home-plat-cta { margin-top: auto; padding-top: 6px; font-size: 13.5px; font-weight: 800; color: var(--accent-dark); }
.home-plat-fol { margin: 4px 0 2px; font-size: 12px; color: var(--muted); }
.home-plat-fol strong { display: block; font-size: 22px; font-weight: 800; color: var(--accent-dark); line-height: 1.1; letter-spacing: -0.01em; }

/* ===== Statistici / grafice ===== */
.an-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.an-chart-card { padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: rgb(255 255 255 / 0.78); }
.an-chart-head h3 { margin: 0 0 10px; font-size: 15px; }
.an-chart-wrap { position: relative; height: 260px; }
.an-posts { display: grid; gap: 14px; margin-top: 12px; }
.an-post { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: rgb(255 255 255 / 0.78); }
.an-post-media { width: 96px; height: 96px; border-radius: 12px; overflow: hidden; background: var(--surface-strong); }
.an-post-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-noimg { display: grid; place-items: center; height: 100%; font-size: 11px; color: var(--muted); }
.an-post-caption { margin: 0 0 4px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.an-post-date { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.an-post-date a { color: var(--accent-dark); }
.an-metrics { display: grid; gap: 6px; }
.an-metric { display: grid; grid-template-columns: 76px 1fr 48px; align-items: center; gap: 10px; }
.an-metric-label { font-size: 11.5px; color: var(--muted); }
.an-metric-val { font-size: 12.5px; font-weight: 800; text-align: right; }
.an-bar { height: 8px; border-radius: 999px; background: var(--surface-strong); overflow: hidden; }
.an-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f58529, #dd2a7b); }
@media (max-width: 809px) {
  .an-summary { grid-template-columns: repeat(2, 1fr); }
  .an-post { grid-template-columns: 72px 1fr; }
  .an-post-media { width: 72px; height: 72px; }
}

.gmail-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 30px 34px;
}

.gmail-page-head {
  max-width: 780px;
  margin: 0 auto 6px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.gmail-page-head h2 {
  margin: 2px 0 0;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: 0;
}

.gmail-refresh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 9px 14px;
  border: 1px solid var(--control-border);
  border-radius: 11px;
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 120ms ease;
}

.gmail-refresh:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.gmail-refresh svg {
  width: 16px;
  height: 16px;
}

.gmail-main .hint {
  max-width: 780px;
  margin: 0 auto 18px;
}

#gmailFolderView {
  max-width: 780px;
  margin: 0 auto;
}

.mail-list {
  display: grid;
  gap: 8px;
}

.mail-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  box-shadow: 0 1px 2px rgb(15 34 28 / 0.04);
  transition: 130ms ease;
}

.mail-row:hover {
  border-color: #cfe6dc;
  box-shadow: 0 8px 22px -14px rgb(var(--umbra) / 0.5);
  transform: translateY(-1px);
}

.mail-row-main {
  min-width: 0;
  cursor: pointer;
  display: grid;
  gap: 4px;
}

.mail-row-top {
  display: flex;
  align-items: center;
  gap: 9px;
}

.mail-from {
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}

.mail-row.unread .mail-from {
  position: relative;
  padding-left: 16px;
}

.mail-row.unread .mail-from::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}

/* REGRESIE reparata: cand .mail-row a trecut la var(--surface-strong) (#fff -> #191920 in
   dark), cele doua culori literale de mai jos au ramas gandite doar pt fundalul alb vechi.
   Masurat: #4a5b54 pe #191920 = 2.43:1 (era 7.20:1 pe alb). var(--muted) e deja token-ul
   folosit pt "text citit/estompat" (vezi .mail-snippet chiar mai jos) si trece in ambele teme
   (5.26:1 light, 6.49:1 dark) - unifica si vizual cele trei linii ale unui mail citit. */
.mail-row:not(.unread) .mail-from {
  color: var(--muted);
}

.mail-date {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  margin-left: auto;
}

.mail-subject-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 700;
  margin: 2px 0 0;
  color: var(--ink);
}

/* Aceeasi regresie ca la .mail-from de mai sus: #3a4a44 pe #191920 = 1.87:1 (era 9.36:1 pe
   alb). Acelasi remediu, var(--muted). */
.mail-row:not(.unread) .mail-subject-line {
  font-weight: 600;
  color: var(--muted);
}

.mail-snippet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-weight: 400;
  font-size: 12.5px;
  margin: 3px 0 0;
}

.triage-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 800;
  margin-right: 8px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--muted);
}

.triage-badge.important {
  background: #fbe9e9;
  border-color: #f0c2c2;
  color: var(--danger);
}

.triage-badge.notificare {
  background: #fff2df;
  border-color: #f0d2a8;
  color: var(--warn);
}

.triage-badge.personal {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-dark);
}

.mail-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mail-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--muted);
  display: grid;
  place-items: center;
}

.mail-icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.mail-icon-btn svg {
  width: 16px;
  height: 16px;
}

.mail-check {
  display: grid;
  place-items: center;
  align-self: center;
  cursor: pointer;
}

.mail-check input,
.mail-select-all input {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  cursor: pointer;
  accent-color: var(--accent);
}

.mail-row.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 8px 22px -14px rgb(var(--umbra) / 0.5);
}

.mail-select-bar {
  max-width: 780px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
}

.mail-select-all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-dark);
  cursor: pointer;
}

.mail-select-actions {
  display: flex;
  gap: 8px;
}

.mail-select-actions .ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  font-size: 13px;
}

.mail-select-actions .ghost-btn svg {
  width: 16px;
  height: 16px;
}

.danger-btn {
  color: var(--danger);
  border-color: #e6c6c6;
}

.danger-btn:hover {
  border-color: var(--danger);
  background: #fbecec;
  color: var(--danger);
}

.gmail-load-more {
  max-width: 780px;
  margin: 16px auto 0;
  justify-content: center;
}

.mail-read-card {
  width: min(720px, 100%);
}

.ai-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 14px;
}

.ai-actions .ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ai-actions svg {
  width: 15px;
  height: 15px;
}

/* Gasit de harness, neraportat pana acum - traieste in #mailReadDialog, ecran neatins in
   trecerile anterioare. #1c3f33 era gandit pt var(--accent-soft) din light (#d7ede3); in dark
   accent-soft devine #382313 (portocaliu inchis) si acelasi text cade la 1.28:1.
   A doua problema, gasita abia la verificarea randata (nu din matematica pe hex): culoarea
   de mai jos nu castiga niciodata cascada. #mailAiResult e un <p>, singurul descendent al lui
   .dialog-card din tot fisierul, iar .dialog-card p { color: var(--muted); } (mai sus in fisier)
   are specificitate mai mare (clasa+element) decat .ai-result singur (doar clasa) - indiferent
   de ordine, var(--muted) castiga mereu. Asta inseamna ca #1c3f33 nu s-a randat NICIODATA;
   valoarea reala era deja var(--muted), care trece in dark (5.50:1) dar pica strans in light
   (4.28:1, sub 4.5). Reparat din radacina: .dialog-card .ai-result (doua clase) bate
   .dialog-card p indiferent de ordine, si var(--accent-dark) e perechea corecta pt
   var(--accent-soft) in ambele teme (acelasi tipar ca la .nr-news-src): 6.48:1 in light,
   6.54:1 in dark - verificat randat, nu doar calculat. */
.dialog-card .ai-result {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-dark);
  line-height: 1.5;
  font-size: 13.5px;
}

.mail-body {
  margin: 10px 0;
  min-height: 140px;
  max-height: 50vh;
  overflow-y: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
}

.mail-body iframe {
  width: 100%;
  min-height: 300px;
  border: 0;
  display: block;
}

.mail-body pre {
  margin: 0;
  padding: 14px;
  white-space: pre-wrap;
  font-family: inherit;
  line-height: 1.5;
}

@media (max-width: 809px) {
  .gmail-page-inner {
    flex-direction: column;
  }

  .gmail-side {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .gmail-compose {
    margin: 0;
    padding: 10px 14px;
  }

  .gmail-folders {
    order: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }

  .folder-link {
    width: auto;
    padding: 8px 12px;
  }

  .gmail-side-foot {
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
  }

  .gmail-main {
    padding: 18px;
  }

  .gmail-page-head {
    flex-direction: column;
    gap: 10px;
  }

  .mail-row {
    grid-template-columns: auto 1fr auto;
  }

  .mail-from {
    max-width: 48vw;
  }

  .mail-select-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .mail-select-actions {
    width: 100%;
  }

  .mail-select-actions .ghost-btn {
    flex: 1;
    justify-content: center;
    width: auto;
  }
}

/* Generator output metadata stays compact and never adds another card layer. */
.output-card .output-type {
  display: inline-flex;
  margin-top: 5px;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* Previzualizarea din cardul postarii: EXACT poza care pleaca, ca sa vezi cum va arata. */
.output-preview {
  margin: 12px 0 4px;
}
.output-preview img {
  display: block;
  width: 100%;
  max-width: 320px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg);
}

.cost-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
/* Cele trei grafice de cost: primul lat, urmatoarele doua alaturate. */
.cost-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cost-charts .an-chart-card:first-child { grid-column: 1 / -1; }
.cost-table { margin-top: 14px; }
@media (max-width: 809px) { .cost-charts { grid-template-columns: 1fr; } }

/* Tabel de date (costuri): acelasi limbaj vizual ca restul cardurilor. */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.7);
}
.table-scroll table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 420px; }
.table-scroll th, .table-scroll td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.table-scroll thead th {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.table-scroll tbody tr:last-child td { border-bottom: 0; }
.table-scroll td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============ GALERIE FOTO - tunelul telefon -> web (22 iul 2026) ============ */

.gal-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Codul de imperechere. Mare si monospatiat: se citeste de pe ecran si se tasteaza pe telefon,
   deci fiecare caracter trebuie sa fie limpede si egal ca latime. */
.pair-box {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 18px 0 4px;
  padding: 20px 22px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.pair-code {
  font-family: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 9px;
  color: var(--accent-dark);
  padding-right: 9px;
  white-space: nowrap;
}
.pair-text { flex: 1; min-width: 220px; }
.pair-lead { margin: 0 0 4px; color: var(--ink); }
.pair-timer { margin: 0; font-size: 13px; color: var(--muted); }
.pair-timer.is-gone { color: var(--danger); }

.gal-devices {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 16px 0 2px;
}
.gal-device {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 8px 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  font-size: 13px;
  color: var(--muted);
}
.gal-device strong { color: var(--ink); font-weight: 600; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.photo-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-strong);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.photo-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: var(--bg);
}
/* Poza intreaga e un buton: click pe ea o duce direct in Generator. */
.photo-shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.photo-shot img { transition: transform 220ms ease; }
.photo-shot:hover img { transform: scale(1.04); }
.photo-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  background: linear-gradient(to top, rgb(7 91 69 / 0.72), rgb(7 91 69 / 0) 55%);
  opacity: 0;
  transition: opacity 200ms ease;
}
.photo-shot:hover .photo-hover,
.photo-shot:focus-visible .photo-hover { opacity: 1; }
.photo-hover-txt {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: rgb(7 91 69 / 0.9);
  padding: 6px 12px;
  border-radius: 999px;
}
.photo-meta {
  padding: 9px 11px 4px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
/* Doua randuri: butonul principal lat (incape textul intreg si pe carduri inguste de mobil),
   iar Sterge dedesubt, discret. */
.photo-actions { display: flex; flex-direction: column; gap: 6px; padding: 8px 9px 9px; }
.photo-actions button { white-space: normal; }
.photo-actions .is-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.photo-actions .is-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.photo-actions .is-ghost { min-height: 34px; font-size: 12.5px; color: var(--muted); }

.gal-empty {
  grid-column: 1 / -1;
  padding: 46px 24px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
}
.gal-empty strong { display: block; color: var(--ink); margin-bottom: 6px; font-size: 15px; }

@media (max-width: 809px) {
  .pair-code { font-size: 32px; letter-spacing: 6px; }
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

.photo-lipsa {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-size: 12px;
  color: var(--muted);
  background: var(--bg);
}

/* Stare telefoane conectate in Galerie foto */
.gal-devices-titlu {
  width: 100%; margin: 0 0 2px;
  font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.gal-dot {
  width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto;
  display: inline-block;
}
.gal-dot.verde { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.gal-dot.gri { background: var(--muted); }
.gal-device-when { color: var(--muted); font-size: 12px; }

/* ===== Fabrica de postari (plan pe zile din Media) ===== */
.plan-auto {
  margin: 20px 0 26px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}
.plan-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.plan-head h3 { margin: 0 0 4px; }
.plan-note { margin: 0; font-size: 13px; color: var(--muted); }
.plan-controls { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.plan-controls label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.plan-controls input {
  width: 92px; min-height: 38px; padding: 0 10px;
  border: 1px solid var(--control-border); border-radius: 10px; background: var(--bg); color: var(--ink);
}
.plan-explica {
  margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted);
  padding-top: 12px; border-top: 1px solid var(--line);
}
.plan-progres {
  margin-top: 12px; padding: 10px 14px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-dark); font-size: 13px; font-weight: 700;
}
/* ===== Calendarul inteligent (apesi ziua, alegi poza) ===== */
.cal {
  margin-top: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}
.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-nav h3 {
  margin: 0; min-width: 168px; text-align: center;
  font-size: 17px; text-transform: capitalize;
}
.cal-sageata {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--control-border); border-radius: 999px;
  background: var(--bg); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer; transition: 140ms ease;
}
.cal-sageata:hover { border-color: var(--accent); color: var(--accent-dark); }

.cal-capete, .cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
}
.cal-capete {
  margin-bottom: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--muted); text-align: center;
}

.cal-zi {
  position: relative; overflow: hidden;
  min-height: 96px; padding: 8px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  border: 1px solid var(--control-border); border-radius: 12px;
  background: var(--surface-strong); color: var(--ink);
  cursor: pointer; text-align: left; transition: 140ms ease;
}
.cal-zi.is-goala { border: none; background: none; cursor: default; min-height: 0; }
.cal-zi:not(.is-goala):not(:disabled):hover {
  border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow);
}
/* Zi trecuta si fara postare: sterasa, punctata, nu se poate apasa. */
.cal-zi:disabled {
  cursor: default; opacity: 0.38;
  background: transparent; border-style: dashed;
}
/* Zi trecuta CU postare: ramane apasabila (istoric), doar putin mai potolita. */
/* 0.82 stergea bordura sub 3:1 (2.93 light / 2.68 dark, masurat cu opacitatea reala compusa in
   sonda). 0.94 pastreaza aspectul "trecut, mai potolit" si trece pragul cu marja (3.57 / 3.12). */
.cal-zi.is-trecut.are-postare { opacity: 0.94; }
.cal-zi.is-azi { border-color: var(--accent); border-width: 2px; }

.cal-numar { position: relative; z-index: 2; font-size: 13px; font-weight: 800; }
.cal-zi.is-azi .cal-numar { color: var(--accent-dark); }

.cal-poza {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.9;
}
/* Alb doar cand chiar exista o poza dedesubt (:has), nu doar cand ziua are o postare -
   fara poza (camp optional, app.js) fundalul ramane var(--surface-strong) si albul
   necondiționat devenea invizibil pe el (1:1 masurat in light). Fara poza, .cal-numar
   ramane pe culoarea mostenita (var(--ink)), corecta in ambele teme. */
.cal-zi.are-postare:has(.cal-poza) .cal-numar {
  color: #fff; text-shadow: 0 1px 4px rgb(0 0 0 / 0.7);
}

.cal-pastila {
  position: relative; z-index: 2; margin-top: auto;
  max-width: 100%; padding: 3px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  background: rgb(255 255 255 / 0.92); color: var(--ink);
}
.cal-pastila.e-programata { background: rgb(255 255 255 / 0.92); color: var(--accent-dark); }
.cal-pastila.e-telegram { background: var(--accent); color: #fff; }
.cal-pastila.e-publicata { background: #123f31; color: #fff; }
.cal-pastila.e-ratata { background: rgb(255 255 255 / 0.92); color: #8a5a2b; }

.cal-plus {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 300; color: var(--muted); opacity: 0; transition: opacity 140ms ease;
}
.cal-zi:hover .cal-plus { opacity: 0.85; }

.cal-legenda {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
}

/* Dialogul unei zile */
.cal-zi-card { width: min(420px, 92vw); }
.cal-zi-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.cal-zi-head h3 { margin: 2px 0 0; text-transform: capitalize; }
.cal-zi-poza {
  width: 100%; max-width: 240px; border-radius: 14px;
  border: 1px solid var(--line); display: block;
}
.cal-zi-text {
  margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink);
  white-space: pre-wrap;
}
/* Corpul dialogului unei zile: cate o postare pe rand, cu aer intre ele. Nu avea nicio regula,
   deci cand o zi avea doua postari stateau lipite una de alta. */
.cal-zi-corp { display: grid; gap: var(--sp-3); }
.cal-zi-corp:empty { display: none; }
.cal-zi-actiuni { margin-top: 16px; }
.cal-zi-nota { font-size: 12.5px; color: var(--muted); }
/* O zi poate avea mai multe postari - fiecare cu blocul si actiunile ei */
.cal-zi-post { padding: 14px 0; border-top: 1px solid var(--line); }
.cal-zi-post:first-child { border-top: none; padding-top: 0; }
.cal-zi-meta { margin: 0 0 10px; font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal-zi-butoane { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cal-muta-row { margin-top: 10px; }
.mini-btn.is-danger { border-color: var(--danger); color: var(--danger); }
.mini-btn.is-danger:hover { background: rgb(160 60 40 / 0.08); }

@media (max-width: 809px) {
  .cal { padding: 14px; }
  .cal-capete, .cal-grid { gap: 5px; }
  .cal-zi { min-height: 64px; padding: 5px; border-radius: 9px; }
  .cal-numar { font-size: 11.5px; }
  .cal-nav h3 { min-width: 128px; font-size: 15px; }
  /* Pe telefon nu incape text in casuta zilei -> starea devine o bulina colorata.
     Detaliile intregi le vezi apasand ziua. */
  .cal-pastila {
    width: 11px; height: 11px; padding: 0; border-radius: 999px;
    font-size: 0; overflow: hidden; align-self: flex-start;
    border: 1.5px solid rgb(255 255 255 / 0.92);
  }
  .cal-pastila.e-programata { background: #fff; border-color: var(--accent); }
  .cal-pastila.e-telegram { background: var(--accent); }
  .cal-pastila.e-publicata { background: #123f31; }
  /* Gasit de harness, neraportat: pe mobil fundalul devine solid (#c9884f), dar culoarea
     textului ramane cea gandita pt fundalul aproape-alb din desktop (#8a5a2b, mostenita din
     regula de baza .cal-pastila.e-ratata) - 1.99:1. Doar in light: in dark, regula
     necontextuala [data-theme="dark"] .cal-pastila.e-ratata are deja propria culoare
     (var(--warn)) si o specificitate mai mare, deci ramane neatinsa de randul de mai jos.
     var(--ink) pe #c9884f = 6.23:1. */
  .cal-pastila.e-ratata { background: #c9884f; color: var(--ink); }
}


/* Punctul de "viu" din etichete. Fara ping perpetuu: nu are ce sa anunte la fiecare 2 secunde. */
.live-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2dd4a0;
  flex-shrink: 0;
}
.live-dot.hot { background: var(--accent); }
.kicker .live-dot {
  display: inline-block;
  vertical-align: -1px;
  margin-right: 6px;
  width: 7px;
  height: 7px;
}

/* Cascade de intrare (waterfall) - fill backwards ca hover-ul sa nu fie anulat. */
@keyframes tile-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Platform cards: stagger la randare + hover lift. */
.home-plat { animation: tile-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.home-plat:nth-child(2) { animation-delay: 0.05s; }
.home-plat:nth-child(3) { animation-delay: 0.1s; }
.home-plat:nth-child(4) { animation-delay: 0.15s; }
.home-plat:nth-child(5) { animation-delay: 0.2s; }
.home-plat:nth-child(6) { animation-delay: 0.25s; }
.home-plat {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}
.home-plat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.home-plat-status.on { display: inline-flex; align-items: center; gap: 6px; }
.home-plat-status.on::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Stiri: waterfall + hover cu rank accentuat. */
.home-news-item { animation: tile-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.home-news-item {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease, background 0.22s ease;
}
.home-news-item:hover {
  transform: translateX(3px);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: rgb(255 255 255 / 0.95);
}
.home-news-rank { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.home-news-item:hover .home-news-rank { transform: scale(1.08); }

/* ===== Mod întunecat (design taste v1) ===== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--control-border);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-icon { width: 16px; height: 16px; flex-shrink: 0; }
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }
[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }

/* Valorile temei intunecate (culori, umbre, color-scheme) sunt definite o singura data,
   mai jos, la "Tema intunecata: negru + portocaliu". Pana la aceasta reparatie, selectorul
   `[data-theme="dark"]` aparea de doua ori in fisier cu aceeasi specificitate - acesta era
   primul, cu o paleta verde care nu se mai vedea niciodata (al doilea bloc, mai jos, castiga
   intotdeauna fiindca vine ultimul). --shadow si --shadow-lg nu erau suprascrise in al doilea
   bloc, deci valorile lor s-au mutat neschimbate acolo; la fel color-scheme: dark. */

[data-theme="dark"] body { background: var(--bg); }

/* Panouri cu alb hardcodat -> suprafete inchise (acelasi limbaj, doar valori). */
[data-theme="dark"] .panel,
[data-theme="dark"] .output-card,
[data-theme="dark"] .home-plat,
[data-theme="dark"] .conn-tile,
[data-theme="dark"] .brain-grup,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .memory-card,
[data-theme="dark"] .report-card,
[data-theme="dark"] .trend-card,
[data-theme="dark"] .niche-signals,
[data-theme="dark"] .outreach-card,
[data-theme="dark"] .agent-card,
[data-theme="dark"] .gmail-side,
[data-theme="dark"] .an-chart-card,
[data-theme="dark"] .an-post,
[data-theme="dark"] .table-scroll,
[data-theme="dark"] .empty,
[data-theme="dark"] .outreach-draft {
  background: var(--surface);
}
/* Restaureaza exact valorile vechi, corecte deja in dark - vezi comentariile de la regulile de
   baza (.outreach-urgent, .outreach-why, mai sus in fisier) unde var(--warn)/var(--accent-dark)
   au fost introduse doar pt light. */
[data-theme="dark"] .outreach-urgent { color: #ff9f0a; }
[data-theme="dark"] .outreach-why { color: var(--muted); }
[data-theme="dark"] .agent-card textarea { background: var(--surface-strong); }
[data-theme="dark"] .home-news-item:hover { background: var(--surface-strong); }

/* Marca: var(--ink) devine deschis in dark -> inverseaza culorile. */
[data-theme="dark"] .brand-mark {
  background: var(--surface-strong);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* Pasteluri de stare -> tonuri inchise cu aceleasi nuante. */
[data-theme="dark"] .status.manual,
[data-theme="dark"] .mem-status.st-pending {
  background: #2e2415;
  border-color: #5d4524;
}
[data-theme="dark"] .mem-status.st-rejected,
[data-theme="dark"] .triage-badge.important {
  background: #2c1a1a;
  border-color: #5e2b2b;
}
[data-theme="dark"] .image-drop.is-dragging,
[data-theme="dark"] .plat-tile:has(input:checked),
[data-theme="dark"] .fmt-chip.is-on,
[data-theme="dark"] .mode-btn.is-active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
[data-theme="dark"] .plat-tile.is-fixed {
  background: linear-gradient(160deg, var(--accent-soft), var(--bg));
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
[data-theme="dark"] .frame-choice,
[data-theme="dark"] .plat-icon {
  background: var(--surface-strong);
}
[data-theme="dark"] .plat-icon { color: var(--muted); }

/* Calendar: pastilele albe -> inchise; ziua curenta pastreaza accentul. */
[data-theme="dark"] .cal-pastila {
  background: var(--surface-strong);
  color: var(--ink);
}
[data-theme="dark"] .cal-pastila.e-programata { color: var(--accent-dark); }
[data-theme="dark"] .cal-pastila.e-ratata { color: var(--warn); }
[data-theme="dark"] .cal-pastila.e-telegram { background: var(--accent); color: #fff; }
[data-theme="dark"] .cal-pastila.e-publicata { background: #123f31; color: #fff; }
@media (max-width: 809px) {
  [data-theme="dark"] .cal-pastila { border-color: var(--line); }
  [data-theme="dark"] .cal-pastila.e-programata { background: var(--accent); border-color: var(--accent); }
}

/* Pagina publica delete-status (GDPR). */
[data-theme="dark"] .delete-status-card {
  background: var(--surface-strong);
  border-color: var(--line);
}
[data-theme="dark"] .delete-status-code { border-color: var(--line); }
/* Pe dark, --warn e galben deschis: semnul de exclamare alb aproape dispare. */
[data-theme="dark"] .delete-status-check.is-warn { color: var(--bg); }
/* Acelasi bug ca la .is-warn de mai sus, ramas nereparat pana acum - ecranul n-a fost randat
   niciodata: --muted (2.69:1) si --danger (2.77:1) devin deschise in dark, iar iconul alb
   mostenit de la .delete-status-check cade sub 3:1 pe amandoua. var(--bg) e acelasi remediu,
   verificat randat: 7.8:1 pe is-neutral, 7.6:1 pe is-error. */
[data-theme="dark"] .delete-status-check.is-neutral,
[data-theme="dark"] .delete-status-check.is-error { color: var(--bg); }


/* ===== View Transitions (design taste v1, fara dependente) =====
   Rulele ::view-transition-* sunt ignorate de browserele fara suport;
   in JS exista fallback (comutare instant). */
::view-transition-old(root) {
  animation: vt-out 0.22s ease both;
}
::view-transition-new(root) {
  animation: vt-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes vt-out {
  to { opacity: 0; transform: scale(0.985); }
}
@keyframes vt-in {
  from { opacity: 0; transform: scale(0.985) translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}


/* "Postare de zi cu zi": lista de fisiere urcate, in inspector. */
.pr-drop { min-height: 208px; cursor: pointer; }
.pr-explica { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.pr-lista { display: grid; gap: 8px; margin-top: 12px; }
.pr-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
}
.pr-cadru {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.pr-vizual { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Randul unui fisier respins: n-are ce previzualiza, doar semnul si motivul de alaturi. */
.pr-gol { display: grid; place-items: center; width: 100%; height: 100%; color: var(--danger); font-size: 20px; font-weight: 800; }
.pr-durata {
  position: absolute;
  left: 3px;
  bottom: 3px;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgb(0 0 0 / .62);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}
.pr-info { display: grid; gap: 4px; min-width: 0; flex: 1; }
.pr-nume {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-stare { font-size: 11.5px; color: var(--muted); }
.pr-stare.is-ok { color: var(--accent-dark); }
.pr-stare.is-danger { color: var(--danger); white-space: normal; line-height: 1.45; }
/* Bara de urcare: un clip de 50 MB tine minute bune, iar procentul e singura dovada ca se misca. */
.pr-bara { display: block; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pr-bara i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 120ms linear; }
.pr-scoate {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid var(--control-border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.pr-scoate:hover { border-color: var(--danger); color: var(--danger); }

.pr-rezultat {
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
}
.pr-titlu { margin: 0 0 12px; font-size: 19px; line-height: 1.25; }
.pr-texte { display: grid; gap: 12px; }
@media (min-width: 981px) {
  .pr-texte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pr-text {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
}
.pr-text h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pr-text p { margin: 0; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.pr-hashtags { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--accent-dark); word-break: break-word; }
.pr-nota { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }

/* Ciornele proprii de dinainte: fiecare isi poarta butonul de clip si cutia de stare. */
.pr-ciorne {
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
}
.pr-ciorna {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
}
.pr-ciorna + .pr-ciorna { margin-top: 12px; }
.pr-ciorna h4 { margin: 0; font-size: 14.5px; line-height: 1.3; }
.pr-ciorna .pr-nota { margin: 4px 0 0; }
.pr-ciorna-text { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); white-space: pre-wrap; }

/* live-dot pe "Stiri proaspete". */
.nr-feed-head .live-dot {
  display: inline-block;
  vertical-align: -1px;
  margin-right: 6px;
  width: 7px;
  height: 7px;
}

/* Waterfall pe fluxul de stiri (stagger la randare, cascada continua prin --i). */
.nr-news { animation: tile-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.nr-skel { animation: tile-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }

/* Ideea mea: coloanele pasilor 01-03 intra in cascada. */

/* Coperta cinematica: apare cu un reveal lin dupa generare. */
.studio-cover { animation: tile-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; }


/* ===== Analytics Bento (design taste v1) ===== */
/* Skeleton-uri pentru incarcarea lenta (primul fetch pe edge function). */
.sk-stat { height: 58px; border-radius: 14px; }
.sk-anpost { height: 108px; border-radius: 16px; }

/* Waterfall la randarea datelor - consistent cu Acasa. */
.an-summary .stat-card { animation: tile-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.an-summary .stat-card:nth-child(2) { animation-delay: 0.05s; }
.an-summary .stat-card:nth-child(3) { animation-delay: 0.1s; }
.an-summary .stat-card:nth-child(4) { animation-delay: 0.15s; }
.an-summary .stat-card:nth-child(5) { animation-delay: 0.2s; }
.an-posts .an-post { animation: tile-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.an-posts .an-post:nth-child(2) { animation-delay: 0.06s; }
.an-posts .an-post:nth-child(3) { animation-delay: 0.12s; }
.an-posts .an-post:nth-child(4) { animation-delay: 0.18s; }
.an-posts .an-post:nth-child(5) { animation-delay: 0.24s; }
.an-posts .an-post:nth-child(6) { animation-delay: 0.3s; }
.an-bench-item { animation: tile-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.an-bench-item:nth-child(2) { animation-delay: 0.05s; }
.an-bench-item:nth-child(3) { animation-delay: 0.1s; }
.an-bench-item:nth-child(4) { animation-delay: 0.15s; }
.an-chart-card { animation: tile-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; }


/* ===== Tema intunecata „Atelier": carbon verde + smarald viu =====
   Bloc unic pentru `[data-theme="dark"]` (anterior definit de doua ori in fisier, la aceeasi
   specificitate - acesta era al doilea si castiga mereu). Paleta luminoasa din :root ramane
   neschimbata si trece mai departe AA.

   DE CE s-a schimbat negru+portocaliu in carbon+smarald (24 sep 2026): editoarele video sunt
   intunecate dintr-un motiv - singurul lucru colorat de pe ecran trebuie sa fie previzualizarea.
   Verdele ramane marca lui Vali, doar impins din calm (#16785c pe alb) in energic (#2ee6a8 pe
   carbon). Adancimea vine din PATRU trepte de suprafata + bordura de 1px + o muchie de lumina,
   reteta Linear/Raycast - nu din umbre si nu din 3D. Costa 0 KB.

   Contraste masurate cu unealta antislop, pe treapta cea mai defavorabila:
     ink #e9f1ec pe bg #0b100e ........ 16.68:1
     muted #8ba398 pe surface-top ..... 5.30:1  (pe bg: 7.12:1)
     accent #2ee6a8 pe surface ........ 11.16:1
     accent-ink #04140f pe accent ..... 11.69:1  (text pe butonul primar)
     accent-dark #5cefc0 pe accent-soft  9.52:1
     control-border #6b8478 pe surface-top 3.54:1 (prag 3:1 pt controale, WCAG 1.4.11) */
[data-theme="dark"] {
  color-scheme: dark;
  /* Patru trepte, pasi mici si egali. Sub doua trepte orice tema intunecata arata plat. */
  --bg: #0b100e;
  --surface: #111815;
  --surface-strong: #18211d;
  --surface-top: #212d27;
  --ink: #e9f1ec;
  --muted: #8ba398;
  --line: #22302a;
  --line-top: rgb(255 255 255 / 0.055);
  /* Vezi comentariul din :root - acelasi motiv, valoare calibrata separat pentru fundalurile
     inchise (#0b100e..#212d27): #6b8478 da minimum 3.54:1 pe treapta cea mai deschisa. */
  --control-border: #6b8478;
  /* Vezi `--line-fisa` din :root. Aici masa e aproape neagra (10,15,13), deci linia urca din
     accent spre masa pana la prag, nu coboara. Masurat 3,2:1. */
  --line-fisa: #1a7053;
  --accent: #2ee6a8;
  /* Mai DESCHIS decat accentul, fiindca aici e text pe fundal inchis, nu fundal. */
  --accent-dark: #5cefc0;
  --accent-soft: #123328;
  --accent-line: #1e4c3b;
  /* Accentul e viu, deci textul de pe el e aproape-negru, nu alb. */
  --accent-ink: #04140f;
  /* Starile raman familii separate de accent: altfel „gata" si „atentie" arata la fel. */
  --umbra: 0 0 0;
  --warn: #f5b544;
  --danger: #ff8f8f;
  /* In tema intunecata elevatia nu e umbra, ci lumina: cardul de deasupra e mai deschis.
     Insetul alb de la tema luminoasa ar albi marginea, deci aici e aproape invizibil. */
  --shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
  --shadow-lg: inset 0 1px 0 rgb(255 255 255 / 0.06);
}
[data-theme="dark"] .live-dot { background: var(--accent); }

/* Auth gate (ecranul de login): doua spoturi in culoarea spatiului activ, nu doua literale. */
[data-theme="dark"] .auth-gate {
  background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 30rem),
    radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 26rem),
    color-mix(in srgb, var(--bg) 86%, transparent);
}

/* Bordurile de accent urmeaza spatiul: verde in Business, violet in Personal. */
[data-theme="dark"] .image-drop.is-dragging,
[data-theme="dark"] .plat-tile:has(input:checked),
[data-theme="dark"] .fmt-chip.is-on,
[data-theme="dark"] .mode-btn.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
[data-theme="dark"] .plat-tile.is-fixed {
  background: linear-gradient(160deg, var(--accent-soft), var(--bg));
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* =====================================================================
   SPATIUL ACTIV ISI SCHIMBA CULOAREA
   Vali a spus ca butonul Business/Personal „nu face nimic". Facea - dar
   ambele spatii aratau identic, deci nu se vedea. De aici incolo se vede
   din prima secunda: alt accent, alt carbon sub el, alte ecrane in bara.
   Business = smarald pe carbon verde. Personal = violet pe carbon rece.
   Doua familii de culoare cat se poate de departate, ca sa nu te intrebi
   niciodata unde esti.
   Ordinea si specificitatea contin tot: `:root` (0,1,0) da lumina de
   Business, `[data-theme=dark]` (0,1,0, mai jos) o inlocuieste cu Atelier,
   `[data-nisa=personal]` (0,1,0, si mai jos) da lumina de Personal, iar
   `[data-theme=dark][data-nisa=personal]` (0,2,0) castiga peste tot.
   Ultimele doua definesc ACELEASI chei, altfel una ar lasa pe masa o
   valoare a celeilalte.
   ===================================================================== */

/* Personal, tema luminoasa. Alb pe #5b4bd6 = 6.14:1 (masurat). */
/* ---- MATERIALUL SPATIULUI ----
   Culorile sunt deja altele. Ce lipsea era ATINGEREA: Business e dens si sobru, cu colturi
   stranse si miscare scurta; Personal respira - colturi moi, mai mult aer intre lucruri, litere
   mai relaxate si un tempo cu o treapta mai lent. Aceiasi tokeni, alte valori. Zero culori noi,
   zero reguli duplicate: tot ce foloseste --radius, --card-pad sau --t-rapid se schimba singur.
   Geometria scenei ramane a ei (34/33/28 sunt literali): platoul e acelasi, doar lumina difera. */
[data-nisa="personal"] {
  --radius-control: 10px;
  --radius: 18px;
  --radius-shell: 24px;
  --card-pad: 28px;
  --gutter: 28px;
  --tracking-titlu: -0.006em;
  --t-rapid: 160ms cubic-bezier(0.2, 0, 0, 1);
  --t-panou: 280ms cubic-bezier(0.2, 0, 0, 1);
}

[data-nisa="personal"] {
  --bg: #efeef7;
  --surface: #fcfcfe;
  --surface-strong: #ffffff;
  --surface-top: #ffffff;
  --ink: #131228;
  /* 6.18:1 pe alb (masurat). Controalele au nevoie doar de 3:1 (WCAG 1.4.11): #7b75a2 da 4.28:1. */
  --muted: #635e77;
  --line: #dcd8ee;
  --line-top: rgb(255 255 255 / 0.75);
  --control-border: #7b75a2;
  /* Vezi `--line-fisa` din :root, cu violetul Personalului pe masa lui (225,224,232). 3,2:1. */
  --line-fisa: #796dda;
  --accent: #5b4bd6;
  --accent-dark: #4334ad;
  --accent-soft: #e6e2fb;
  --accent-line: #c3bcf0;
  --accent-ink: #ffffff;
  --umbra: 52 40 138;
}

/* Personal, tema Atelier. Contraste masurate: accent #9b8cff pe surface #14131d = 6.51:1,
   accent-dark #bdb2ff pe accent-soft #221f38 = 8.86:1, accent-ink #0a0714 pe accent = 7.20:1. */
[data-theme="dark"][data-nisa="personal"] {
  --bg: #0c0b13;
  --surface: #14131d;
  --surface-strong: #1c1a28;
  --surface-top: #252235;
  --ink: #edeaf6;
  --muted: #9c95b4;
  --line: #2a2740;
  --line-top: rgb(255 255 255 / 0.06);
  --control-border: #7a7499;
  /* Vezi `--line-fisa` din :root, pe masa intunecata a Personalului (11,10,18). 3,2:1. */
  --line-fisa: #6158a0;
  --accent: #9b8cff;
  --accent-dark: #bdb2ff;
  --accent-soft: #221f38;
  --accent-line: #3b3560;
  --accent-ink: #0a0714;
  --umbra: 0 0 0;
}
[data-theme="dark"] .theme-toggle:hover { border-color: var(--accent); }
[data-theme="dark"] .cal-pastila.e-publicata { background: var(--accent-soft); }


/* .agent-codename, .agent-modified si .agent-reset se citesc direct pe fundalul cardului
   (.agent-card, var(--surface) in dark) - opusul lui .agent-spec, care are propria pastila
   mereu mixata cu alb (neschimbata de tema), deci ii ajunge formula unica de mai sus. Aici
   trebuie inversat sensul mixului pt fundalul intunecat, altfel cele noua nuante ramase
   inchise sub prag pe negru. Nu se repeta pt .agent-spec - text mai deschis pe pastila lui,
   tot alba in dark, ar cadea invers.
   .agent-modified si .agent-reset adaugate aici de reviewer - acelasi tipar, acelasi remediu,
   stateau doar in alt selector decat .agent-codename. */
[data-theme="dark"] .agent-codename,
[data-theme="dark"] .agent-modified,
[data-theme="dark"] .agent-reset {
  color: color-mix(in srgb, var(--agent) 70%, white);
}

/* Scor "fierbinte" (heat-hot) pe stiri: #b3402a/#c2410c sunt gandite pt tema luminoasa (~5.5:1
   acolo) si cad la 3.06-3.58:1 in dark, fara pereche. Acelasi remediu ca la .niche-item.heat-hot
   (radarul de nisa, deja reparat): var(--accent-dark) = #fb923c in dark, 7-8:1 masurat. */
[data-theme="dark"] .nr-news.heat-hot .nr-news-score,
[data-theme="dark"] .home-news-heat.heat-hot {
  color: var(--accent-dark);
}

/* ===== Contrast pe tema Atelier (WCAG AA) =====
   Pe tema luminoasa accentul e inchis si textul de pe el e alb. Pe Atelier accentul e VIU
   (#2ee6a8 smarald, #9b8cff violet), deci alb pe el ar da 1,5-3:1 - ilizibil. Solutia nu e o a
   doua nuanta de accent, ci inversarea textului: aproape-negru pe accent, exact ce fac Linear si
   Raycast. Masurat: #04140f pe #2ee6a8 = 11.69:1, #0a0714 pe #9b8cff = 7.20:1.
   Hover-ul urca pe --accent-dark, care e mai deschis; textul ramane acelasi inchis, deci creste.
   `--accent-ink` tine valoarea, ca regula sa nu stie in ce spatiu e. */
[data-theme="dark"] .primary-btn,
[data-theme="dark"] .src-btn.is-on,
[data-theme="dark"] .nr-use-btn,
[data-theme="dark"] .mini-btn.is-done,
[data-theme="dark"] .drop-source.is-media,
[data-theme="dark"] .nav-badge,
[data-theme="dark"] .folder-count,
[data-theme="dark"] .folder-link.active .folder-count,
[data-theme="dark"] .gmail-compose,
[data-theme="dark"] .photo-actions .is-primary,
[data-theme="dark"] .cal-pastila.e-telegram {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
[data-theme="dark"] .primary-btn:hover,
[data-theme="dark"] .src-btn.is-on:hover,
[data-theme="dark"] .nr-use-btn:hover,
[data-theme="dark"] .drop-source.is-media:hover,
[data-theme="dark"] .photo-actions .is-primary:hover,
[data-theme="dark"] .gmail-compose:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--accent-ink);
}
[data-theme="dark"] .cal-pastila.e-telegram:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
@media (max-width: 809px) {
  [data-theme="dark"] .cal-pastila.e-programata {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
  }
}


/* =====================================================================
   Tablou de bord v2 - doua spatii, cinci ecrane, o cifra pe Acasa.
   Principii, pe scurt: sapte griuri si UN accent (paleta ramane cea
   calibrata pe contrast a aplicatiei, nu una imprumutata), umbre aproape
   deloc, colturi 6/12/16, spatiere pe baza 4, miscare doar la hover si la
   deschiderea unui panou. Nicio cifra animata, nimic in bucla.
   ===================================================================== */

/* ---- Comutatorul de spatiu: Business / Personal ---- */
.nisa-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--sp-2);
  background: var(--bg);
}

.nisa-btn {
  min-height: 28px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 510;
  letter-spacing: 0;
  transition: color var(--t-rapid), background var(--t-rapid);
}

.nisa-btn:hover { color: var(--ink); }

.nisa-btn.is-on {
  background: var(--surface-strong);
  color: var(--ink);
  font-weight: 590;
  box-shadow: var(--shadow);
}

.nisa-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---- Utilitarele din josul barei: Gmail, tema, contul ---- */
.side-jos {
  margin-top: auto;
  display: grid;
  gap: var(--sp-2);
}

.side-util {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 510;
  transition: color var(--t-rapid), background var(--t-rapid);
}

.side-util:hover { color: var(--ink); background: var(--surface-strong); }
.side-util.active { color: var(--ink); background: var(--surface-strong); }
.side-util svg { width: 16px; height: 16px; flex-shrink: 0; }
.side-util .nav-badge { margin-left: auto; }

/* ---- Acasa: o cifra mare si o lista ---- */
/* Eticheta 13px/400 stinsa, cifra 48px/590 in culoarea primara: raportul de marime e 3,7x.
   Cifra NU se animeaza - un count-up doar intarzie citirea. */
.ac-cifra {
  padding: var(--sp-8) var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-shell);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}

.ac-eticheta {
  margin: 0 0 var(--sp-2);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

.ac-numar {
  margin: 0;
  font-size: clamp(38px, 5vw, 48px);
  font-weight: 590;
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ac-bara {
  height: 4px;
  margin: var(--sp-5) 0 var(--sp-3);
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}

.ac-bara span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width var(--t-panou);
}

.ac-drum {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.ac-lista .home-news { gap: var(--sp-2); }
.ac-platforme .panel-head { margin-bottom: var(--sp-4); }

/* ---- Setari: patru foste ecrane si costurile, ca sectiuni ---- */
.setari {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}

.setari-cap h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 590;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.setari-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.setari-tab {
  min-height: 32px;
  padding: 0 var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 510;
  transition: color var(--t-rapid), background var(--t-rapid);
}

.setari-tab:hover { color: var(--ink); background: var(--surface); }

.setari-tab.is-on {
  background: var(--surface-strong);
  border-color: var(--line);
  color: var(--ink);
  font-weight: 590;
}

.setari-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.setari-corp { display: grid; gap: var(--gutter); }

/* Sectiunea deschisa intra scurt, o singura data - nu la fiecare redesenare. */
.setari-sectiune:not([hidden]) {
  animation: setari-intra var(--t-panou) backwards;
}

@keyframes setari-intra {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Stare goala: ce e locul asta, un singur buton, nicio scuza ---- */
.gol {
  display: grid;
  justify-items: start;
  gap: var(--sp-2);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.gol-titlu {
  margin: 0;
  font-size: 16px;
  font-weight: 590;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.gol-rand {
  margin: 0;
  max-width: 46ch;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}

.gol .primary-btn { margin-top: var(--sp-2); }

.stat-grid > .gol { grid-column: 1 / -1; }
.cal-gol { margin-bottom: var(--sp-4); }

/* ---- Cardurile de platforma, la scara noua ---- */
.home-plat {
  min-height: 0;
  padding: var(--sp-5);
  border-radius: var(--radius);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
  transition: border-color var(--t-rapid), background var(--t-rapid);
}

.home-plat.is-on:hover {
  transform: none;
  border-color: var(--control-border);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}

.home-plat-badge {
  width: 34px;
  height: 34px;
  border-radius: var(--sp-2);
  box-shadow: none;
}

.home-plat-badge svg { width: 19px; height: 19px; }
.home-plat h3 { font-size: 15px; font-weight: 590; letter-spacing: 0; }
.home-plat-fol strong { font-size: 24px; font-weight: 590; letter-spacing: -0.016em; color: var(--ink); font-variant-numeric: tabular-nums; }
.home-plat-cta { font-size: 13px; font-weight: 510; }
.home-plat-status { font-weight: 590; letter-spacing: 0.04em; }

/* ---- Tema intunecata: ce e "mai sus" e mai DESCHIS, nu are umbra mai mare ---- */
[data-theme="dark"] .side { background: var(--surface); }
[data-theme="dark"] .nisa-switch { background: var(--bg); }
[data-theme="dark"] .nisa-btn.is-on,
[data-theme="dark"] .side-util:hover,
[data-theme="dark"] .side-util.active,
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active,
[data-theme="dark"] .setari-tab.is-on,
[data-theme="dark"] .ac-cifra,
[data-theme="dark"] .home-plat { background: var(--surface-strong); }
[data-theme="dark"] .setari-tab:hover { background: var(--surface); }
[data-theme="dark"] .gol { background: var(--surface); }
[data-theme="dark"] .ac-bara { background: var(--bg); }

/* Pictograma utilitarului urmeaza culoarea randului, nu pe cea din .nav-icon. */
.side-util:hover svg,
.side-util.active svg { color: currentColor; }

/* ---- Marca si contul, la latimea de 240 a barei ---- */
.brand strong {
  font-size: 13px;
  font-weight: 590;
  letter-spacing: -0.006em;
  color: var(--ink);
}

.brand span {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
}

.account {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-control);
  background: var(--surface-strong);
}

.account-label { font-size: 10px; font-weight: 590; letter-spacing: 0.06em; }
.account .ghost-btn { min-height: 28px; padding: 0 var(--sp-2); font-size: 12px; width: auto; }

[data-theme="dark"] .account { background: var(--surface-strong); }

/* =====================================================================
   ATELIER - relieful si carcasa studioului (24 septembrie 2026)

   Ce cere Vali: „il vreau mai dinamic, poate mai mult 3d... vreau sa faci
   din studio un studio adevarat".

   Ce NU s-a facut si de ce: fara three.js (206-235 KB gzip, nu se curata
   la build), fara Spline (1-2 secunde de pornire chiar cu scena goala),
   fara Lottie si fara Rive (60-200 KB de runtime, si Lottie incinge
   procesorul peste ~5 animatii simultane). Laptopul are 4 nuclee.

   Ce s-a facut in loc: adancimea vine din PATRU trepte de suprafata, o
   bordura de 1px si o muchie de lumina interioara - exact ce fac Linear
   si Raycast in aplicatie, unde nu exista 3D deloc. Singurul 3D real e
   inclinarea la mouse pe cele 7 cartonase de stil, unde e si decizia
   ecranului. Costa 0 KB.

   Regulile de miscare, fara exceptii:
     - nimic nu porneste singur in afara de fundalul scenei GOALE;
     - tranzitiile sunt 120-220ms, pe `transform` si `opacity`, niciodata `all`;
     - `will-change` se pune si se scoate din JS, pe elementul de sub cursor;
     - tot ce e bucla se taie sub `prefers-reduced-motion`.
   ===================================================================== */

/* ---- Relief: muchia de lumina de 1px pe suprafetele ridicate ---- */
.panel,
.output-card,
.nr-feed,
.insp-grup {
  box-shadow: inset 0 1px 0 var(--line-top);
}

/* ---- Carcasa studioului: surse stanga, scena centru, inspector dreapta ----
   Proportii: ~19% / 1fr / ~24%. Cifrele exacte nu le publica niciun produs;
   raportul e cel observabil peste tot (CapCut, Descript, Kapwing, Clipchamp). */


.rail-cap h2 { margin: 2px 0 0; }
.rail-titlu {
  margin: 0;
  font-size: 11px;
  font-weight: 590;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Comutatorul de sursa: coloana, cu glif si cu o linie care spune ce e fiecare.
   Trei cuvinte inghesuite intr-un rand orizontal nu spuneau nimic despre alegere. */
.studio .src-switch {
  display: grid;
  gap: var(--sp-1);
  padding: 0;
  border: 0;
  background: transparent;
}

.studio .src-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-weight: 510;
  font-size: 13px;
  transition: background var(--t-rapid), color var(--t-rapid), border-color var(--t-rapid);
}

.studio .src-btn:hover {
  background: var(--surface-strong);
  color: var(--ink);
}

/* Sursa activa nu se marcheaza doar cu un fundal cu o treapta mai sus - diferenta aia e sub 1.3:1
   si nu e un indicator. Primeste o muchie aprinsa in accent, care trece lejer pragul de 3:1
   (WCAG 1.4.11), plus glifa colorata. */
.studio .src-btn.is-on {
  background: var(--surface-strong);
  border-color: var(--accent-line);
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--accent), inset 0 1px 0 var(--line-top);
}

.studio .src-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.src-glif {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--sp-2);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  transition: color var(--t-rapid), border-color var(--t-rapid), background var(--t-rapid);
}
.src-glif svg { width: 16px; height: 16px; }
.studio .src-btn.is-on .src-glif {
  color: var(--accent-dark);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.src-text { display: grid; gap: 1px; min-width: 0; }
.src-text strong { font-weight: 590; font-size: 13px; color: inherit; }
.src-text em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.3;
}

.studio .nr-feed {
  margin-bottom: 0;
  padding: var(--sp-3);
  border-radius: var(--radius);
  background: var(--surface-strong);
}
/* O singura zona care deruleaza in stanga, nu doua una in alta: bara scroleaza, lista nu. */
.studio .nr-feed-list { grid-template-columns: 1fr; max-height: none; overflow-y: visible; }
.studio .nr-feed-head h3 { font-size: 13px; font-weight: 590; }
.studio .nr-feed-hint { font-size: 11.5px; line-height: 1.45; }


/* =====================================================================
   SCENA: o nisa cu o podea si o singura sursa de lumina.
   Podeaua si orizontul sunt straturi de `background` pe panza insasi - zero
   elemente, zero straturi de compositor. Orizontul e o muchie de lumina de 1px
   peste o linie de --line de 1px: in tema luminoasa se vede muchia, in Atelier
   se vede linia. Fiecare tema isi ia partea ei, fara niciun token nou.
   ===================================================================== */
.scena-panza {
  position: relative;
  display: grid;
  /* Coloana e mereu plina, deci morfarea cadrului nu recentreaza raftul de sub el. */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  gap: var(--sp-5);
  container-type: inline-size;
  isolation: isolate;
  min-height: min(620px, 70vh);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-shell);
  overflow: hidden;
  --podea-1: 8%;
  --podea-2: 24%;
  --umbra-op: 0.34;
  background:
    linear-gradient(to bottom,
      transparent 0 calc(56% - 1px),
      var(--line-top) calc(56% - 1px) 56%,
      var(--line) 56% calc(56% + 1px),
      transparent calc(56% + 1px)),
    linear-gradient(to bottom,
      transparent 56%,
      color-mix(in srgb, var(--surface-top) var(--podea-1), transparent) 74%,
      color-mix(in srgb, var(--surface-top) var(--podea-2), transparent) 100%),
    color-mix(in srgb, var(--bg) 94%, #000);
  box-shadow:
    inset 0 1px 0 var(--line-top),
    inset 0 24px 48px -34px rgb(0 0 0 / 0.45);
}
/* In Atelier nu exista treapta sub --bg, deci nisa se face invers: podeaua urca.
   `--umbra` e `0 0 0` acolo, deci umbra de contact are nevoie de o podea mai
   luminoasa ca s-o poata ocluza. */
[data-theme="dark"] .scena-panza { --podea-1: 20%; --podea-2: 60%; --umbra-op: 0.62; }

.scena-panza > * { min-width: 0; max-width: 100%; }

/* Starea goala: „un atelier care asteapta", nu o pagina stricata. Un rand care spune ce e locul
   asta si UN buton care il umple. Ascunderea NU e in JS: daca ecranul are deja continut vizibil,
   starea goala dispare singura. Un singur loc hotaraste. */
.scena-gol {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  max-width: 44ch;
  text-align: center;
}
/* Fisele au coborat in `#scenaEcran`, deci garzile se uita la copiii LUI. Cu vechile selectoare
   (copii directi ai panzei) starea goala ar fi ramas vizibila sub poza. */
.scena-ecran:has(> .image-preview:not([hidden])) > .scena-gol,
.scena-ecran:has(> .studio-cover:not([hidden])) > .scena-gol,
.scena-panza:has(> .stil-scena:not([hidden])) .scena-gol {
  display: none;
}

.scena-gol-rand {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* SINGURUL lucru care se misca de la sine pe tot ecranul, si doar cat timp scena e goala si nu
   lucreaza nimeni: doua spoturi mutate cu `translate3d` (deci pe compositor), foarte lent, plus
   un strat de zgomot STATIC, sub un kilobyte, niciodata animat. */
.scena-panza::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -30%;
  pointer-events: none;
  background:
    radial-gradient(38% 38% at 28% 26%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    radial-gradient(32% 32% at 74% 70%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity var(--t-panou);
}
/* `:not([data-faza])` opreste lumina de veghe cat timp scena lucreaza: altfel ar pluti peste o
   generare pornita pe ecran gol, adica exact peste coregrafie. */
.scena-panza:has(.image-preview[hidden]):has(.studio-cover[hidden]):has(> .stil-scena[hidden]):not([data-faza])::before {
  opacity: 1;
  animation: atelier-lumina 34s ease-in-out infinite alternate;
}

.scena-panza::after {
  content: "";
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  /* feTurbulence inline: sub 1 KB, zero cereri de retea, randat o singura data. Niciodata animat -
     zgomotul in miscare se recalculeaza per pixel la fiecare cadru. `numOctaves` peste 3 costa
     paint real, deci se opreste la 3. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes atelier-lumina {
  from { transform: translate3d(-3%, -2%, 0); }
  to { transform: translate3d(3%, 2%, 0); }
}

/* ---- Lumina de duba: al doilea far. Se aprinde doar cat lucreaza echipa si vine din coltul
   OPUS, ca sa se schimbe DIRECTIA luminii, nu doar cantitatea. „Mai luminos" e ambiguu, „alta
   lumina montata pe platou" nu e. ---- */
.scena-duba {
  position: absolute;
  z-index: 1;
  inset: -22%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: opacity var(--t-sosire) var(--ease-standard);
  background:
    radial-gradient(38% 34% at 26% 18%,
      color-mix(in srgb, var(--surface-top) 34%, transparent) 0, transparent 66%),
    radial-gradient(34% 30% at 84% 88%,
      color-mix(in srgb, var(--accent) 15%, transparent) 0, transparent 70%);
}
.scena-panza[data-faza="asteptare"] .scena-duba { opacity: 1; }

/* ---- Obiectul: sase straturi, toate statice ---- */
.scena-cadru {
  --ecran-h: min(clamp(300px, 54vh, 560px), calc(100cqi * 1.25));
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  /* Morfarea raportului nu murdareste restul coloanei. */
  contain: layout style;
}

/* Umbra de CONTACT, nu de card: gradient radial, fara `filter: blur` - un strat mai putin pe un
   laptop cu patru nuclee. */
.scena-umbra {
  position: absolute;
  z-index: 0;
  left: 8%;
  right: 8%;
  bottom: -13px;
  block-size: 28px;
  pointer-events: none;
  border-radius: 50%;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity var(--t-sosire) var(--ease-standard),
              transform var(--t-sosire) var(--ease-standard);
  background: radial-gradient(50% 50% at 50% 50%,
    rgb(var(--umbra) / var(--umbra-op)) 0, transparent 72%);
}

/* Strat 1 - TESITURA de 1px. E `padding`, nu `border`, ca sa poata fi degrade. In tema luminoasa
   lucreaza capatul de jos, in Atelier capatul de sus. Fiecare tema isi ia muchia ei.
   `inline-size: auto` plus `block-size` fix e conditia ca `aspect-ratio` sa fie ANIMABIL. */
.scena-cadru-corp {
  position: relative;
  z-index: 1;
  block-size: var(--ecran-h);
  inline-size: auto;
  aspect-ratio: var(--ar, 4 / 5);
  max-inline-size: 100%;
  padding: 1px;
  border-radius: 34px;
  overflow: hidden;
  background: linear-gradient(148deg,
    color-mix(in srgb, #fff 34%, var(--surface-top)) 0,
    var(--surface-strong) 42%,
    color-mix(in srgb, var(--line) 70%, var(--surface-strong)) 100%);
  box-shadow: 0 0 0 1px rgb(var(--umbra) / 0.14);
  transition: aspect-ratio var(--t-sosire) var(--ease-standard),
              transform var(--t-sosire) var(--ease-intrare);
}

/* Strat 2 - CARCASA, 5px. Raza interioara = raza exterioara minus padding: 34 - 1 = 33. */
.scena-cadru-carcasa {
  block-size: 100%;
  padding: 5px;
  border-radius: 33px;
  background: linear-gradient(148deg,
    var(--surface-top) 0, var(--surface-strong) 46%, var(--surface-strong) 100%);
}

/* Strat 3 - ECRANUL. Raza 33 - 5 = 28. Fundul NU urmeaza tema: un ecran stins e intunecat in
   orice tema. Un singur literal, tentat 7% cu accentul spatiului - smarald in Business, violet
   in Personal. Alb 72% pe el da 9,48-9,93:1 in toate patru combinatiile. */
.scena-ecran {
  --ecran-ink: rgb(255 255 255 / 0.88);
  --ecran-text: rgb(255 255 255 / 0.72);
  position: relative;
  isolation: isolate;
  display: grid;
  block-size: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 7%, #0b0d0c);
  color: var(--ecran-ink);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.55), inset 0 0 4px 2px rgb(0 0 0 / 0.4);
}
.scena-ecran > .scena-gol { grid-area: 1 / 1; z-index: 1; }
.scena-ecran > .image-preview { grid-area: 1 / 1; z-index: 2; }
.scena-ecran > .studio-cover { grid-area: 1 / 1; z-index: 3; }
.scena-ecran > .scena-schelet { grid-area: 1 / 1; z-index: 4; }
.scena-ecran > .image-preview,
.scena-ecran > .studio-cover {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  place-items: center;
}

/* Strat 4 - LUCIUL MOALE, din coltul de sus, 3px inauntru. */
.scena-ecran::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 5;
  pointer-events: none;
  border-radius: 25px;
  background: radial-gradient(120% 82% at 6% -8%, rgb(255 255 255 / 0.13), transparent 58%);
  transition: opacity var(--t-armare) var(--ease-iesire);
}

/* Strat 5 - LUCIUL TARE. Doua opriri IDENTICE la 35% = muchie dreapta. Asta e singura diferenta
   intre „sticla" si „o pata alba": orice mockup generat automat foloseste degrade lin, si de aia
   arata a plastic. Stratul e la -25% si taiat de corp, deci dunga trece sub acelasi unghi si la
   4:5, si la 9:16. */
.scena-luciu {
  position: absolute;
  inset: -25%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(118deg,
    transparent 0 35%,
    rgb(255 255 255 / 0.10) 35%,
    rgb(255 255 255 / 0.10) 47%,
    transparent 47%);
  transition: opacity var(--t-armare) var(--ease-iesire);
}
/* Peste pixelii care chiar pleaca pe Instagram, reflexia scade. Sticla ramane, minciuna nu:
   previzualizarea arata EXACT fisierul. */
.scena-ecran:has(> .image-preview:not([hidden])) ~ .scena-luciu,
.scena-ecran:has(> .studio-cover:not([hidden])) ~ .scena-luciu { opacity: 0.30; }

/* Strat 6 - zgomotul e deja pe `.scena-panza::after` si acopera tot, inclusiv obiectul. */

/* Inelul de confirmare sta pe `.scena-cadru`, nu pe corp: corpul are `overflow: hidden` si l-ar
   taia. Umbra e FIXA, se anima doar opacitatea. */
.scena-cadru::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: -2px;
  border-radius: 36px;
  pointer-events: none;
  box-shadow: 0 0 0 1px var(--accent);
  opacity: 0;
}
.scena-panza.e-confirmat .scena-cadru::after {
  animation: scena-confirma var(--t-confirm) var(--ease-standard) 1;
}
@keyframes scena-confirma {
  0% { opacity: 0; }
  45% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* ---- Continutul mutat: rama in rama se stinge. Ancorate pe ID fiindca regulile vechi de la
   `#studioCover .studio-cover-inner` au specificitate de ID: o regula de clasa ar pierde
   indiferent de ordinea din fisier. ---- */
#scenaEcran .scena-gol {
  align-content: center;
  max-width: none;
  padding: var(--sp-5);
}
#scenaEcran .scena-gol-rand { color: var(--ecran-text); }

#scenaEcran .preview-frame {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  place-items: center;
}
#scenaEcran .preview-frame img {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  max-block-size: none;
  /* NICIODATA `cover`: previzualizarea nu minte despre incadrare. */
  object-fit: contain;
}

#scenaEcran .studio-cover,
#scenaEcran .studio-cover-inner,
#scenaEcran .nr-canvas-wrap {
  inline-size: 100%;
  block-size: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  aspect-ratio: auto;
  animation: none;
}
#scenaEcran #nrCanvas {
  inline-size: 100%;
  block-size: 100%;
  /* 1080x1350 nu se intinde la 9:16. */
  object-fit: contain;
}

/* Actiunile de pe sticla se retrag: obiectul e eroul. Nu dispar - tac, si revin intregi la mouse
   SI la tastatura. */
#scenaEcran .preview-actions {
  z-index: 6;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t-armare) var(--ease-standard),
              transform var(--t-armare) var(--ease-standard);
}
.scena-cadru:hover .preview-actions,
.scena-cadru:focus-within .preview-actions { opacity: 1; transform: none; }
@media (hover: none) {
  #scenaEcran .preview-actions { opacity: 1; transform: none; }
}

/* Poza SI coperta in acelasi timp (modul „Ideea mea"): in ecran s-ar suprapune, iar Schimba/Scoate
   ar dispărea sub coperta - singura cale catre ele. Poza coboara intr-un colt, cu butoanele ei. */
#scenaEcran:has(> .image-preview:not([hidden])):has(> .studio-cover:not([hidden])) > .image-preview {
  place-self: end start;
  inline-size: 96px;
  block-size: auto;
  margin: var(--sp-3);
  z-index: 5;
  border-radius: var(--radius-control);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.22);
}
#scenaEcran:has(> .studio-cover:not([hidden])) .preview-frame img { max-block-size: 120px; }

/* ---- Scheletul, in forma continutului real. Procentele vin din panza 1080x1350 a copertei, deci
   cand textul soseste nu sare nimic. Fara shimmer si fara pulsatie: singurul lucru viu e
   platoul. ---- */
.scena-schelet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 1.1%;
  padding: 0 5.56% 6.2%;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-armare) var(--ease-iesire);
}
.scena-panza[data-faza="asteptare"] .scena-schelet { opacity: 1; }
.scena-schelet span { display: block; background: rgb(255 255 255 / 0.09); border-radius: 3px; }
.scena-schelet .sk-kicker { inline-size: 11%; block-size: 1.5%; }
.scena-schelet .sk-bara { inline-size: 6.7%; block-size: 0.3%; background: color-mix(in srgb, var(--accent) 55%, transparent); margin-block-start: 1.2%; }
.scena-schelet .sk-t1 { inline-size: 88.9%; block-size: 5.2%; margin-block-start: 1.5%; }
.scena-schelet .sk-t2 { inline-size: 82%; block-size: 5.2%; }
.scena-schelet .sk-t3 { inline-size: 52%; block-size: 5.2%; }
.scena-schelet .sk-sub { inline-size: 78%; block-size: 2.2%; margin-block-start: 1.3%; }
.scena-schelet .sk-sursa { inline-size: 34%; block-size: 1.3%; margin-block-start: 1.2%; opacity: 0.6; }
.scena-schelet .sk-plin { inline-size: 100%; block-size: 100%; border-radius: var(--radius); align-self: stretch; }
.scena-schelet:has(.sk-plin) { padding: 6%; }

/* ---- Bara de lucru. Nimic pana la 2 secunde. Intre 2 si 10: nedeterminat. De la 10: procent
   ADEVARAT, numarat din agentii care chiar au terminat. Fara total real nu apare nicio cifra. ---- */
.scena-rail {
  position: absolute;
  z-index: 7;
  inset: auto 0 0 0;
  block-size: 2px;
  overflow: hidden;
  opacity: 0;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  transition: opacity var(--t-armare) var(--ease-standard);
}
.scena-panza.rail-pornit .scena-rail { opacity: 1; }
.scena-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(var(--prog, 0));
  transform-origin: left center;
  transition: transform var(--t-sosire) var(--ease-standard),
              opacity var(--t-armare) var(--ease-standard);
}
.scena-panza.rail-exact .scena-rail::before { opacity: 1; }
.scena-rail::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -28%;
  inline-size: 28%;
  background: var(--accent);
  animation: scena-cursa 1.1s var(--ease-standard) infinite;
}
.scena-panza.rail-exact .scena-rail::after { display: none; }
@keyframes scena-cursa {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(460%, 0, 0); }
}

/* ---- Cei patru timpi ---- */
/* T1 ARMARE, 120ms: ce era pe ecran iese, cadrul se strange. */
.scena-panza[data-faza="armare"] .scena-ecran > .scena-gol,
.scena-panza[data-faza="armare"] .scena-ecran > .image-preview,
.scena-panza[data-faza="armare"] .scena-ecran > .studio-cover,
.scena-panza[data-faza="asteptare"] .scena-ecran > .scena-gol,
.scena-panza[data-faza="asteptare"] .scena-ecran > .image-preview,
.scena-panza[data-faza="asteptare"] .scena-ecran > .studio-cover {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity var(--t-armare) var(--ease-iesire),
              transform var(--t-armare) var(--ease-iesire);
}
.scena-panza[data-faza="armare"]::before { opacity: 0.55; }
.scena-panza[data-faza="armare"] .scena-luciu,
.scena-panza[data-faza="asteptare"] .scena-luciu { opacity: 0.35; }

/* T2 ASTEPTARE: lumina cheie urca, duba se aprinde, obiectul se ridica un pic fiindca vine
   lumina si de jos. */
.scena-panza[data-faza="asteptare"]::before { opacity: 1; }
.scena-panza[data-faza="asteptare"] .scena-cadru-corp { transform: scale(0.97); }
.scena-panza[data-faza="asteptare"] .scena-umbra {
  opacity: 0.55;
  transform: translate3d(0, -2px, 0) scale(0.94);
}

/* T3 SOSIRE, 220ms, cu un pas de 40ms intre grupuri. */
.scena-panza[data-faza="sosire"] .scena-ecran > *:not([hidden]) {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-sosire) var(--ease-intrare),
              transform var(--t-sosire) var(--ease-intrare);
}
.scena-panza[data-faza="sosire"] .scena-cadru-corp { transform: none; }
.scena-panza[data-faza="sosire"] .scena-umbra {
  opacity: 1;
  transform: none;
  transition-delay: var(--t-pas);
}
.scena-panza[data-faza="sosire"] .scena-raft > *:not([hidden]) {
  animation: scena-vine var(--t-sosire) var(--ease-intrare) calc(var(--t-pas) * 2) backwards;
}
.scena-panza[data-faza="sosire"] .scena-duba { opacity: 0; }
@keyframes scena-vine {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ---- Raftul: controalele monitorului, aliniate la latimea obiectului. ---- */
.scena-raft {
  --ecran-h: min(clamp(300px, 54vh, 560px), calc(100cqi * 1.25));
  z-index: 2;
  display: grid;
  gap: var(--sp-3);
  inline-size: min(100%, max(320px, calc(var(--ecran-h) * 0.8)));
}
/* Fara coperta nu exista raft. Doua garzi: una semantica, una care se autoadministreaza cand
   `#nrActions` ramane aprins dupa o schimbare de sursa. */
.scena-panza:has(#studioCover[hidden]) .scena-raft,
.scena-raft:not(:has(> *:not([hidden]))) { display: none; }

.studio .studio-cover {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Modul „Clip din poze": obiectul pleaca de pe platou, podeaua si lumina raman. Aici se plateste
   singur orizontul: `perspective` de pe grila inclina azi cele sapte cartonase intr-un spatiu
   fara referinta. Cu o linie de orizont si lumina venind din acelasi colt, aceeasi inclinare de
   7 grade capata un plan sub ea. Acelasi cod, prima oara credibil. */
/* Linia de orizont are sens sub UN obiect. Peste o grila de sapte cartonase taie prin ele si
   arata a defect, deci in modul „Clip din poze" ramane doar podeaua, fara muchia de 1px. */
.scena-panza:has(> .stil-scena:not([hidden])) {
  background:
    linear-gradient(to bottom,
      transparent 56%,
      color-mix(in srgb, var(--surface-top) var(--podea-1), transparent) 74%,
      color-mix(in srgb, var(--surface-top) var(--podea-2), transparent) 100%),
    color-mix(in srgb, var(--bg) 94%, #000);
}
.scena-panza:has(> .stil-scena:not([hidden])) > .scena-cadru,
.scena-panza:has(> .stil-scena:not([hidden])) > .scena-raft,
.scena-panza:has(> .stil-scena:not([hidden])) > .scena-duba { display: none; }
.scena-panza > .stil-scena {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  justify-items: center;
}

/* Spatiul isi alege raportul: Business traieste in 4:5 (coperta e 1080x1350), Personal in 9:16
   (acolo se fac Reels). JS scrie `--ar` doar cand STIE raportul fisierului, si il STERGE la
   reset, ca sa revina asta. */
[data-nisa="personal"] .scena-cadru { --ar: 9 / 16; }

/* Uneltele scenei: ce format previzualizezi si cum se incadreaza. */
.scena-unelte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  min-height: 34px;
}


/* =====================================================================
   MASA: o coala, un banc, un sertar.
   Ecranul Studio nu mai are trei coloane (surse | scena | inspector), ci trei
   benzi: capul mesei sus, masa in mijloc, bancul jos. Tot ce iese dintr-o
   generare aterizeaza PE masa, unul langa altul - coperta si textele pentru
   fiecare retea - nu intr-o rama si sub ea. Reglajele care nu trebuie sa stea
   mereu la vedere intra in sertar, un popover nativ care se inchide cu Escape.
   Cifra care se bate: 27 de controale vizibile deodata inainte, sub 12 acum.
   ===================================================================== */
.studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
  background: var(--surface);
  /* FARA `overflow: hidden` aici: un stramos cu overflow ascuns face `position: sticky` sa nu
     mai lipeasca nimic, iar capul mesei si bancul depind amandoua de sticky. */
}

/* ---- Capul mesei: un rand, lipit sus. Titlul, sursele si sertarul. ---- */
.masa-cap {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface-top);
  box-shadow: inset 0 1px 0 var(--line-top);
}
.masa-cap .rail-cap { display: grid; gap: 0; min-width: 0; }
.masa-cap .rail-cap .kicker { margin-bottom: 0; }
.masa-cap .rail-cap h2 { margin: 0; font-size: 16px; line-height: 1.2; white-space: nowrap; }
/* Sursele stau pe un rand, nu pe o coloana: patru butoane scurte, nu o lista. */
.masa-cap .src-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-strong);
}
.masa-cap .src-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 12px 6px 8px;
  border-radius: calc(var(--radius-control) - 2px);
}
/* Butonul de sursa mostenea latimea intreaga din bara veche si punea cele trei surse una sub
   alta. Pe un rand, fiecare ia cat ii trebuie. */
.masa-cap .src-btn { width: auto; }
.masa-cap .src-btn .src-text { display: grid; gap: 0; }
.masa-cap .src-btn .src-text strong { font-size: 13px; }
.masa-cap .src-btn .src-text em { display: none; }
.masa-cap-dreapta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
}
.masa-socoteala {
  margin: 0;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.masa-socoteala:empty { display: none; }
/* Sectiunea mostenea `overflow: hidden` de la `.generator` (si sub 810px de la `.command-center`),
   iar un stramos cu overflow ascuns face `position: sticky` sa nu mai lipeasca NIMIC: capul si
   bancul stateau in josul paginii, nu pe ecran. `clip` taie la fel colturile, dar nu creeaza un
   container de derulare. Doua clase, ca sa bata ambele reguli indiferent de ordinea din fisier. */
.studio.masa { overflow: clip; }
/* Butonul de comparat apare cand are ce compara (doua fise pastrate). Un buton dezactivat
   care sta mereu pe ecran e inca un lucru de citit, si Vali a cerut mai putine. */
#masaFataBtn:disabled { display: none; }
/* Pe masa nu incapea o explicatie; in sertar incape, si acolo omul chiar cauta de unde vin stirile. */
.masa .scena-panza .nr-feed-hint { display: none; }
/* Butonul sertarului dispare cand sertarul n-ar avea nimic de aratat pentru sursa activa:
   un sertar gol e mai rau decat niciun sertar. */
/* `:has()` nu se poate imbrica in alt `:has()` - selectorul e invalid, iar browserul arunca
   TOATA regula, tacut. Forma echivalenta, valida, tine `:has` la nivel de varf, in `:not`. */
.masa:not(:has(#sertar .studio-mode:not([hidden]))) #masaSertarBtn { display: none; }

/* ---- Masa: aceeasi panza, aceeasi lumina, alta asezare. ---- */
.masa-corp {
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  min-width: 0;
  background: var(--bg);
}
.masa .scena-panza {
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  align-content: start;
  justify-items: stretch;
  gap: var(--sp-4);
  min-height: min(420px, 52vh);
}
.masa .scena-panza > * { min-width: 0; max-width: none; }

/* Cadrul telefonului nu mai e eroul: devine o fisa din lot, cat o coloana. `--ecran-h` era legat
   de latimea panzei (100cqi), care acum e toata masa - deci se fixeaza pe inaltimea fisei. */
.masa .scena-cadru { --ecran-h: 320px; justify-self: start; }
/* Raftul (Alt fundal / Descarca / Adauga in calendar) sta pe acelasi rand cu coperta, in dreapta
   ei: altfel primul rand ramanea trei sferturi gol. Pe o singura coloana coboara sub ea. */
.masa .scena-raft { --ecran-h: 320px; inline-size: 100%; grid-column: 2 / -1; align-self: start; }
.masa .scena-raft .nr-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* Cand n-are nimic de aratat, cadrul nu sta gol pe masa. Apare in clipa in care porneste o
   generare (`studioCover.hidden = false` vine inaintea armarii) sau cand intra o poza. */
.masa .scena-panza:has(#studioCover[hidden]):has(#imagePreview[hidden]) > .scena-cadru { display: none; }

/* Starea goala e o fisa a mesei, pe toata latimea. Dispare cand masa are orice altceva. */
.masa .scena-panza > .scena-gol {
  grid-column: 1 / -1;
  justify-self: center;
  align-content: center;
  min-height: 220px;
}
.masa .scena-panza:has(> .scena-cadru:not([hidden])) > .scena-gol,
.masa .scena-panza:has(#studioCover:not([hidden])) > .scena-gol,
.masa .scena-panza:has(#imagePreview:not([hidden])) > .scena-gol,
.masa .scena-panza:has(> .output-grid > *) > .scena-gol,
.masa .scena-panza:has(> .pr-rezultat:not([hidden])) > .scena-gol,
.masa .scena-panza:has(> .pr-ciorne:not([hidden])) > .scena-gol,
.masa .scena-panza:has(> .studio-mode[data-mode="news"]:not([hidden])) > .scena-gol { display: none; }

/* Ce iese din generare devine fise pe masa. Stirile isi scriu textele in #nrCaps (un card pe
   retea), ideea in #outputs: amandoua se dizolva (`display: contents`), deci fiecare card e o
   fisa, cu `data-out-card` neatins - cele opt functii de publicare il citesc mai departe. Restul
   raman blocuri intregi, pe toata latimea. */
.masa .scena-panza > .output-grid,
.masa .scena-panza > .nr-caps { display: contents; }
.masa .scena-panza > .output-grid > *,
.masa .scena-panza > .nr-caps > * { min-width: 0; }
.masa .scena-panza > .team-result,
.masa .scena-panza > .pr-rezultat,
.masa .scena-panza > .pr-ciorne,
.masa .scena-panza > .carousel-strip,
.masa .scena-panza > .stil-scena { grid-column: 1 / -1; }
/* Stirile stau in sertar, deci rama proprie nu mai e o rama in rama: sertarul e deja o cutie. */
.masa #sertar .nr-feed {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.masa #sertar .nr-feed-head { flex-wrap: wrap; }
.masa #sertar .nr-feed-list {
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--sp-4);
  max-height: min(46vh, 420px);
  overflow-y: auto;
}
.masa .nr-news { min-width: 0; }

/* Pe masa ramane doar capul echipei: cine lucreaza si la ce. Placa s-a mutat in sertar. */
.masa-corp > .command-stage { margin: 0; }

/* Placa in sertar: aceeasi placa, pe o coloana de 400px in loc de o pagina intreaga. Nodurile se
   string ca sa intre trei pe rand; altfel s-ar aseza unul sub altul si placa ar creste la 1176px,
   adica mai inalta decat ecranul, cu firele intinse peste o derulare. */
.masa #sertar .mastermind { padding: 16px 10px 14px; }
.masa #sertar .mm-tier { gap: 8px 10px; margin: 14px 0; }
.masa #sertar .mm-tier-core { margin: 2px 0 16px; }
.masa #sertar .mm-node {
  width: min(112px, 30vw);
  min-height: 64px;
  gap: 2px;
  padding: 8px 8px;
}
.masa #sertar .mm-node .mm-icon { width: 24px; height: 24px; border-radius: 8px; }
.masa #sertar .mm-node .mm-icon svg { width: 13px; height: 13px; }
.masa #sertar .mm-node .mm-name { font-size: 12.5px; }
.masa #sertar .mm-node .mm-job { font-size: 9.5px; }
.masa #sertar .mm-node .mm-state { font-size: 9.5px; }
.masa #sertar .mm-tier-label { margin: 0 0 -6px; }

/* ---- Bancul: un camp si un buton, pe toata latimea, lipit jos. ---- */
.banc {
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface-top);
  box-shadow: inset 0 1px 0 var(--line-top);
}
.banc-rand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: var(--sp-3) var(--sp-4);
  align-items: end;
}
/* Campul isi pierde cutia si titlul: pe banc e doar campul. */
.banc .insp-grup { padding: 0; border: 0; border-radius: 0; background: transparent; gap: var(--sp-2); }
.banc .insp-titlu,
.banc .nr-label,
.banc .pr-explica { display: none; }
.banc #nrTopic,
.banc #seedIdea,
.banc #prIdeea { min-height: 48px; }
.banc textarea {
  min-height: 48px;
  max-height: 160px;
  field-sizing: content;
  resize: vertical;
}
.banc .nr-issue { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 12px; color: var(--muted); }
.banc .nr-issue input { width: 72px; }
.banc .banc-rand > .studio-mode:last-child { display: grid; gap: var(--sp-2); }
.banc .primary-btn,
.banc .start-row .mm-start { width: 100%; }
.banc .start-row { display: grid; gap: var(--sp-2); }
.banc .nr-status { margin: 0; }
.banc .insp-nota { margin: 0; font-size: 12px; }
.banc .limba-alege { justify-content: space-between; }

/* ---- Sertarul: popover nativ, in stratul de sus, zero JavaScript. ---- */
.sertar {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(440px, 94vw);
  height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 1px 0 0 var(--line-top);
  overflow-y: auto;
}
.sertar:popover-open { display: grid; align-content: start; gap: 0; }
.sertar::backdrop { background: rgb(0 0 0 / 0.42); }
.sertar-cap {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--surface-top);
}
.sertar-cap strong { font-size: 14px; font-weight: 590; }
.sertar-corp {
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  padding: var(--sp-5);
}
.sertar-corp > .studio-mode { display: grid; gap: var(--sp-4); }
.sertar .rail-galerie { max-height: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---- Triajul pe masă. Starea e pe `data-triaj`, o singură sursă de adevăr. ---- */
.masa .output-card,
.masa .nr-cap,
.masa .stil-card {
  position: relative;
  outline: none;
  /* Muchia fisei nemarcate: pe `--line` nu se vedea (1,01:1 fata de masa). Sta in ACEEASI regula
     ca restul, nu intr-una mai adanca: altfel ar bate `[data-triaj]` de mai jos si fisele
     pastrate si-ar pierde culoarea. Aici se hotaraste doar starea „inca n-am ales". */
  border-color: var(--line-fisa);
  transition: opacity var(--t-rapid), border-color var(--t-rapid), box-shadow var(--t-rapid);
}
.masa .output-card:focus-visible,
.masa .nr-cap:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
/* Coperta intra si ea in ordinea de tab, ca sa se poata mari cu Space. Fara inelul asta ar primi
   focusul fara sa se vada nicaieri - exact felul de „merge, dar nu se vede" pe care il reparam. */
.masa .studio-cover:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); border-radius: var(--radius); }
.masa [data-triaj="pastrat"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* Ce arunci nu dispare: se stinge, ca să-l poți întoarce cu U. */
.masa [data-triaj="aruncat"] { opacity: 0.34; border-color: var(--danger); }
.masa [data-triaj="aruncat"]:hover,
.masa [data-triaj="aruncat"]:focus-within { opacity: 0.7; }
.masa [data-triaj]::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.masa [data-triaj="aruncat"]::before { background: var(--danger); }

/* Inelul de caractere rămase: un arc de 16px în colț, umplut cât din limita rețelei s-a folosit.
   Cifra apare doar sub 20% rămase - până atunci e zgomot. `--umplut` vine din JS. */
.masa .output-card[data-prag],
.masa .nr-cap[data-prag] { --inel: var(--muted); }
.masa [data-prag="aproape"] { --inel: var(--warn); }
.masa [data-prag="peste"] { --inel: var(--danger); }
.masa [data-prag]::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background:
    conic-gradient(var(--inel) calc(var(--umplut, 0) * 360deg), transparent 0),
    radial-gradient(circle, var(--surface-strong) 0 5px, transparent 5px);
  -webkit-mask: radial-gradient(circle, transparent 0 5px, #000 5px);
  mask: radial-gradient(circle, transparent 0 5px, #000 5px);
  opacity: 0.9;
}
.masa [data-prag="aproape"]::after,
.masa [data-prag="peste"]::after { opacity: 1; }
/* Sub 20% ramase, eticheta retelei spune si asta, in cuvinte: cifra exacta sta pe `data-ramase`
   pentru cine o vrea (fata in fata, la valul 3). */
.masa .nr-cap[data-prag="aproape"] .nr-cap-head span::after {
  content: " · aproape de limită";
  font-size: 11.5px;
  color: var(--inel);
}
.masa .nr-cap[data-prag="peste"] .nr-cap-head span::after {
  content: " · peste limită";
  font-size: 11.5px;
  color: var(--inel);
}

/* ---- Piesa mărită: adâncimea a treia. Rețeta dialogului de calendar, mai lată. ---- */
.piesa-mare {
  inline-size: min(880px, 94vw);
  max-block-size: 92dvh;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-shell);
  background: var(--surface-top);
  color: var(--ink);
  box-shadow: inset 0 1px 0 var(--line-top), 0 24px 64px -32px rgb(var(--umbra) / 0.6);
  overflow: hidden;
}
.piesa-mare::backdrop { background: rgb(0 0 0 / 0.5); }
.piesa-mare-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.piesa-mare-cap strong { font-size: 15px; font-weight: 590; }
.piesa-mare-corp {
  display: grid;
  justify-items: center;
  padding: var(--sp-5);
  max-block-size: calc(92dvh - 64px);
  overflow: auto;
}
.piesa-mare-corp > img { max-inline-size: 100%; max-block-size: 78dvh; border-radius: var(--radius); }
.piesa-mare-corp > .output-card,
.piesa-mare-corp > .nr-cap { inline-size: 100%; max-inline-size: 640px; }
.piesa-mare-corp > .output-card::before,
.piesa-mare-corp > .output-card::after,
.piesa-mare-corp > .nr-cap::before,
.piesa-mare-corp > .nr-cap::after { display: none; }
/* Copia e o privire, nu un loc de lucru. Butoanele ei n-au ascultatori - i-ar fi ramas
   originalului - deci nu stau pe ecran ca si cum ar face ceva. Limbajul e acelasi ca la
   „Fata in fata": ce nu poate face nimic, nu se arata. */
.piesa-mare-corp button { display: none; }
.piesa-mare-corp textarea { resize: none; cursor: default; }

/* ---- Patru infatisari ale copertei, ca fise pe masa. Butoane radio: se aleg, nu se triaza. ---- */
.masa .scena-panza > .masa-variante { display: contents; }
.varianta {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--line-top);
  transition: border-color var(--t-rapid), color var(--t-rapid);
}
.varianta img { display: block; inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--radius) - 4px); }
.varianta-nume {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12px;
  font-weight: 590;
}
/* Accentul copertei, ca bulina: se vede de ce difera varianta fara sa citesti. */
.varianta-nume::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent-varianta, var(--accent)); }
.varianta:hover,
.varianta:focus-visible { border-color: var(--accent); color: var(--ink); }
.varianta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.varianta.is-on { border-color: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }

/* ---- Fata in fata: doua fise si, intre ele, doar fapte masurate. ---- */
.fata {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  inline-size: 100%;
}
.fata > .output-card,
.fata > .nr-cap { inline-size: 100%; }
.fata > .output-card::before,
.fata > .output-card::after,
.fata > .nr-cap::before,
.fata > .nr-cap::after { display: none; }
.fata-fapte {
  display: grid;
  gap: var(--sp-2);
  align-self: center;
  min-inline-size: 180px;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
}
.fata-rand {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-2);
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.fata-rand span:first-child { text-align: right; font-weight: 590; color: var(--ink); }
.fata-rand span:last-child { font-weight: 590; color: var(--ink); }
.fata-rand em { font-style: normal; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 860px) {
  .fata { grid-template-columns: minmax(0, 1fr); }
  .fata-fapte { order: -1; }
}

/* Cât durează morfarea fișei, tranziția de pagină tace - altfel ar acoperi-o. */
.vt-masa::view-transition-old(root),
.vt-masa::view-transition-new(root) { animation: none; }
::view-transition-old(fisa),
::view-transition-new(fisa) { animation-duration: var(--t-sosire); animation-timing-function: var(--ease-standard); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(fisa),
  ::view-transition-new(fisa) { animation: none; }
}

@media (max-width: 860px) {
  /* Capul: titlul fara eticheta de deasupra, sursele pe un singur rand care se trage cu
     degetul, iar butoanele isi pastreaza latimea lor. Regula generala de sub 810px intinde
     orice buton la toata latimea - aici ar fi pus Material si Fata in fata pe un rand fiecare. */
  .masa-cap { position: static; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .masa-cap .rail-cap .kicker { display: none; }
  .masa-cap .rail-cap { flex: 1 1 auto; }
  .masa-cap .src-switch {
    order: 3;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .masa-cap .src-switch::-webkit-scrollbar { display: none; }
  .masa-cap .src-btn { flex: 0 0 auto; white-space: nowrap; }
  .masa-cap-dreapta { margin-left: auto; }
  .masa-cap .ghost-btn { width: auto; }
  .masa-socoteala { display: none; }
  .masa-corp { padding: var(--sp-4); }
  .masa .scena-panza { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .masa .scena-cadru { --ecran-h: 280px; }
  .masa .scena-raft { grid-column: 1 / -1; }
  .banc { position: sticky; padding: var(--sp-2) var(--sp-3) var(--sp-3); }
  .banc-rand { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .banc #nrTopic,
  .banc #seedIdea,
  .banc #prIdeea { min-height: 44px; }
  .banc textarea { field-sizing: fixed; height: 52px; max-height: 96px; resize: none; }
  .banc .insp-grup { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .banc .nr-issue { font-size: 0; }
  .banc .nr-issue input { width: 64px; font-size: 14px; }
  .banc .banc-rand > .studio-mode:last-child { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .banc .limba-alege > span { display: none; }
  .banc .nr-status:empty { display: none; }
  .banc .nr-status { grid-column: 1 / -1; }
  .sertar { width: 100vw; border-left: 0; }
  .sertar .rail-galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}



.insp-grup {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
}

.insp-titlu {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: 13px;
  font-weight: 590;
  letter-spacing: 0;
  color: var(--ink);
}
.insp-titlu .step-tag { margin-left: auto; }

.insp-nota {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}


/* Selectorul de limba: langa butonul de generare, fiindca alegerea priveste ce iese din el. */
.limba-alege {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: 12px;
  font-weight: 510;
  color: var(--muted);
}
.limba-alege select {
  width: auto;
  min-height: 32px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-control);
  border: 1px solid var(--control-border);
  background: var(--surface);
  color: var(--ink);
  font-weight: 510;
}
.limba-alege select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Inspectorul pastreaza campurile de dinainte, doar la alta latime. Eticheta casetei de stire a
   devenit `<label for>` langa camp, nu in jurul lui: asa se poate aseza altfel pe verticala. */
.studio .nr-label { font-size: 11px; font-weight: 590; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.studio .nr-issue { flex-direction: row; align-items: center; gap: var(--sp-2); }
.studio .image-drop { padding: var(--sp-4); }
.studio .platform-picker { gap: var(--sp-2); }

/* ---- Cele 7 stiluri de clip. Singurul loc din aplicatie cu 3D real. ---- */
.stil-scena { width: 100%; }

.stil-grila {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: var(--sp-3);
  width: 100%;
  /* `perspective` pe parinte, nu pe fiecare card: o singura piramida de proiectie pentru toate
     sapte, deci cartonasele se inclina in acelasi spatiu, nu fiecare in al lui. */
  perspective: 900px;
}

.stil-card {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: border-color var(--t-rapid), background var(--t-rapid), box-shadow var(--t-rapid),
    transform var(--t-panou);
  box-shadow: inset 0 1px 0 var(--line-top);
}
/* Sub cursor rotatia vine din JS si trebuie sa raspunda pe loc, nu sa urmareasca o tranzitie. */
.stil-card:hover { transition: border-color var(--t-rapid), background var(--t-rapid), box-shadow var(--t-rapid); }

.stil-card:hover,
.stil-card:focus-visible {
  border-color: var(--accent-line);
  background: var(--surface-strong);
}
.stil-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.stil-card.is-on {
  border-color: var(--accent);
  background: var(--surface-strong);
  /* Cardul ales primeste muchie luminoasa si ridicare, nu o bifa intr-un colt. */
  box-shadow: inset 0 1px 0 var(--line-top), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Posterul: un telefon mic, 9:16, cu trei cadre stivuite. Static pana treci cursorul peste el. */
.stil-poster {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: var(--sp-2);
  overflow: hidden;
  background: linear-gradient(165deg, var(--surface-top), var(--bg));
  border: 1px solid var(--line);
  transform: translateZ(18px);
}

.stil-cadru {
  position: absolute;
  inset: 8% 10%;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 75%);
}
.stil-c2 { inset: 16% 18% 24% 18%; opacity: 0.66; }
.stil-c3 { inset: 26% 26% 40% 26%; opacity: 0.4; }

.stil-blitz {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
}

.stil-nume { font-size: 13px; font-weight: 590; line-height: 1.2; }
.stil-cand { font-size: 11px; line-height: 1.35; color: var(--muted); }
.stil-cifre {
  font-size: 10.5px;
  font-weight: 590;
  letter-spacing: 0.03em;
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}

/* Ritmul se arata DOAR sub cursor si la focus de tastatura - tiparul Canva. Fiecare stil isi
   joaca propria taietura, deci alegi dupa cum se misca, nu dupa nume. */
.stil-card:hover .stil-cadru,
.stil-card:focus-visible .stil-cadru { animation-iteration-count: infinite; }

.stil-card:hover [data-demo="taietura"] .stil-cadru,
.stil-card:focus-visible [data-demo="taietura"] .stil-cadru { animation: stil-taietura 1.05s steps(1) infinite; }
.stil-card:hover [data-demo="taietura"] .stil-c2,
.stil-card:focus-visible [data-demo="taietura"] .stil-c2 { animation-delay: 0.35s; }
.stil-card:hover [data-demo="taietura"] .stil-c3,
.stil-card:focus-visible [data-demo="taietura"] .stil-c3 { animation-delay: 0.7s; }

.stil-card:hover [data-demo="apropiere"] .stil-c1,
.stil-card:focus-visible [data-demo="apropiere"] .stil-c1 { animation: stil-apropiere 4s ease-in-out infinite alternate; }

.stil-card:hover [data-demo="flash"] .stil-cadru,
.stil-card:focus-visible [data-demo="flash"] .stil-cadru { animation: stil-taietura 0.34s steps(1) infinite; }
.stil-card:hover [data-demo="flash"] .stil-c2,
.stil-card:focus-visible [data-demo="flash"] .stil-c2 { animation-delay: 0.11s; }
.stil-card:hover [data-demo="flash"] .stil-c3,
.stil-card:focus-visible [data-demo="flash"] .stil-c3 { animation-delay: 0.22s; }
.stil-card:hover [data-demo="flash"] .stil-blitz,
.stil-card:focus-visible [data-demo="flash"] .stil-blitz { animation: stil-blitz 1.36s steps(1) infinite; }

.stil-card:hover [data-demo="vraf"] .stil-cadru,
.stil-card:focus-visible [data-demo="vraf"] .stil-cadru { animation: stil-vraf 2.4s ease-out infinite; }
.stil-card:hover [data-demo="vraf"] .stil-c2,
.stil-card:focus-visible [data-demo="vraf"] .stil-c2 { animation-delay: 0.4s; }
.stil-card:hover [data-demo="vraf"] .stil-c3,
.stil-card:focus-visible [data-demo="vraf"] .stil-c3 { animation-delay: 0.8s; }

.stil-card:hover [data-demo="lista"] .stil-cadru,
.stil-card:focus-visible [data-demo="lista"] .stil-cadru { animation: stil-lista 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.stil-card:hover [data-demo="lista"] .stil-c2,
.stil-card:focus-visible [data-demo="lista"] .stil-c2 { animation-delay: 0.73s; }
.stil-card:hover [data-demo="lista"] .stil-c3,
.stil-card:focus-visible [data-demo="lista"] .stil-c3 { animation-delay: 1.46s; }

.stil-card:hover [data-demo="stergere"] .stil-c2,
.stil-card:focus-visible [data-demo="stergere"] .stil-c2 { animation: stil-stergere 2.2s ease-in-out infinite; }

.stil-card:hover [data-demo="vant"] .stil-cadru,
.stil-card:focus-visible [data-demo="vant"] .stil-cadru { animation: stil-vant 2.6s ease-in-out infinite; }
.stil-card:hover [data-demo="vant"] .stil-c2,
.stil-card:focus-visible [data-demo="vant"] .stil-c2 { animation-delay: 0.85s; }
.stil-card:hover [data-demo="vant"] .stil-c3,
.stil-card:focus-visible [data-demo="vant"] .stil-c3 { animation-delay: 1.7s; }

/* Cele patru stiluri din cercetarea pe 2025-2026. Fiecare isi arata exact ce-l deosebeste: la
   „Carlig intai" primul cadru sta mult si restul trec repede; la „Bucla" ultimul cadru e primul,
   deci desenul se inchide in el insusi; la „Text pe bataie" cadrele nu se misca si pulseaza textul.
   „Photo-dump" e taietura obisnuita, doar mai deasa - deci isi imprumuta cinstit desenul. */
.stil-card:hover [data-demo="dump"] .stil-cadru,
.stil-card:focus-visible [data-demo="dump"] .stil-cadru { animation: stil-taietura 0.72s steps(1) infinite; }
.stil-card:hover [data-demo="dump"] .stil-c2,
.stil-card:focus-visible [data-demo="dump"] .stil-c2 { animation-delay: 0.24s; }
.stil-card:hover [data-demo="dump"] .stil-c3,
.stil-card:focus-visible [data-demo="dump"] .stil-c3 { animation-delay: 0.48s; }

.stil-card:hover [data-demo="carlig"] .stil-cadru,
.stil-card:focus-visible [data-demo="carlig"] .stil-cadru { animation: stil-carlig 2.4s steps(1) infinite; }
.stil-card:hover [data-demo="carlig"] .stil-c2,
.stil-card:focus-visible [data-demo="carlig"] .stil-c2 { animation: stil-carlig-scurt 2.4s steps(1) infinite; animation-delay: 1.5s; }
.stil-card:hover [data-demo="carlig"] .stil-c3,
.stil-card:focus-visible [data-demo="carlig"] .stil-c3 { animation: stil-carlig-scurt 2.4s steps(1) infinite; animation-delay: 1.95s; }

.stil-card:hover [data-demo="bucla"] .stil-cadru,
.stil-card:focus-visible [data-demo="bucla"] .stil-cadru { animation: stil-bucla 2.8s ease-in-out infinite; }
.stil-card:hover [data-demo="bucla"] .stil-c2,
.stil-card:focus-visible [data-demo="bucla"] .stil-c2 { animation-delay: 0.93s; }
.stil-card:hover [data-demo="bucla"] .stil-c3,
.stil-card:focus-visible [data-demo="bucla"] .stil-c3 { animation-delay: 1.86s; }

.stil-card:hover [data-demo="text"] .stil-c2,
.stil-card:focus-visible [data-demo="text"] .stil-c2 { animation: stil-text 0.86s steps(1) infinite; }
.stil-card:hover [data-demo="text"] .stil-c3,
.stil-card:focus-visible [data-demo="text"] .stil-c3 { animation: stil-text 0.86s steps(1) infinite; animation-delay: 0.43s; }

@keyframes stil-taietura { 0%, 32% { opacity: 1; } 33%, 100% { opacity: 0; } }
/* Primul cadru tine 62% din ciclu; urmatoarele doua se imbuca in restul. */
@keyframes stil-carlig { 0%, 62% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes stil-carlig-scurt { 0%, 17% { opacity: 1; } 18%, 100% { opacity: 0; } }
/* Se intoarce de unde a plecat: capetele sunt identice, deci reluarea nu are cusatura. */
@keyframes stil-bucla {
  0% { opacity: 1; transform: scale(1); }
  40% { opacity: 0.25; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
/* Cadrul nu se misca; se aprinde doar bucata de text. */
@keyframes stil-text {
  0%, 44% { opacity: 1; transform: scaleX(1); }
  45%, 100% { opacity: 0.12; transform: scaleX(0.72); }
}
@keyframes stil-apropiere { from { transform: scale(1); } to { transform: scale(1.14); } }
@keyframes stil-blitz { 0%, 92% { opacity: 0; } 93%, 100% { opacity: 0.55; } }
@keyframes stil-vraf {
  0% { opacity: 0; transform: translate3d(0, -16%, 0) rotate(-9deg); }
  22%, 100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-3deg); }
}
@keyframes stil-lista {
  0% { opacity: 0; transform: scale(1.16); }
  14%, 30% { opacity: 1; transform: scale(1); }
  34%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes stil-stergere {
  0%, 12% { clip-path: inset(0 100% 0 0); }
  48%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes stil-vant {
  0% { opacity: 0; transform: translate3d(26%, 0, 0); filter: blur(3px); }
  12%, 30% { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
  36%, 100% { opacity: 0; transform: translate3d(-18%, 0, 0); filter: blur(3px); }
}

/* Fisa stilului ales, in inspector. */
.stil-fisa { display: grid; gap: var(--sp-2); }
.stil-fisa-nume { font-size: 15px; font-weight: 590; }
.stil-fisa-desc { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.stil-fisa-cifre { display: flex; gap: var(--sp-4); margin: 0; }
.stil-fisa-cifre div { display: grid; gap: 2px; }
.stil-fisa-cifre dt { font-size: 10px; font-weight: 590; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.stil-fisa-cifre dd { margin: 0; font-size: 13px; font-weight: 590; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- Ecranul Clipuri (numai in Personal) ---- */
.clip-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-4);
}

/* Ultima celula din perete: de aici pleaca urmatorul clip. Aceeasi inaltime ca un clip, ca
   randul sa ramana drept. */
.clip-nou {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sp-2);
  min-height: 220px;
  padding: var(--sp-5);
  border: 1px dashed var(--control-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-rapid), color var(--t-rapid);
}
.clip-nou:hover,
.clip-nou:focus-visible { border-color: var(--accent); color: var(--ink); }
.clip-nou:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.clip-nou-semn { font-size: 22px; line-height: 1; color: var(--accent); }
.clip-nou strong { font-size: 14px; font-weight: 590; color: var(--ink); }
.clip-nou span { font-size: 12.5px; }

.clip-card {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--line-top);
  transition: border-color var(--t-rapid), transform var(--t-rapid);
}
.clip-card:hover { border-color: var(--accent-line); transform: translateY(-2px); }

.clip-ecran {
  display: grid;
  place-items: center;
  aspect-ratio: 9 / 16;
  border-radius: var(--sp-2);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg);
}
.clip-ecran video { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-asteapta { font-size: 12px; font-weight: 590; color: var(--muted); }

.clip-meta { display: grid; gap: 2px; }
.clip-meta strong { font-size: 13px; font-weight: 590; }
.clip-meta span { font-size: 11.5px; color: var(--muted); }
.clip-card[data-stare="gata"] .clip-meta strong { color: var(--accent-dark); }
.clip-card[data-stare="esuat"] .clip-meta strong { color: var(--danger); }
.clip-eroare { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--danger); }

.clip-galerie { margin-top: var(--sp-8); }
.clip-galerie .panel-head { margin-bottom: var(--sp-4); }
.clip-galerie h3 { margin: 0; font-size: 16px; font-weight: 590; }

.clip-poze {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--sp-2);
}
.clip-poza {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--sp-2);
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
  aspect-ratio: 4 / 5;
  transition: border-color var(--t-rapid), transform var(--t-rapid);
}
.clip-poza img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-poza:hover { border-color: var(--accent); transform: translateY(-2px); }
.clip-poza:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


@media (max-height: 820px) {
  .scena-cadru,
  .scena-raft { --ecran-h: min(clamp(270px, 44vh, 420px), calc(100cqi * 1.25)); }
  .scena-unelte { inline-size: min(100%, calc(clamp(270px, 44vh, 420px) * 0.8)); }
  .scena-panza { min-height: min(520px, 62vh); }
}

@media (max-width: 860px) {
  .scena-cadru,
  .scena-raft { --ecran-h: min(clamp(240px, 42vh, 360px), calc(100cqi * 1.25)); }
  .scena-panza { min-height: 0; padding: var(--sp-4); --podea-1: 6%; }
  .scena-cadru-corp { border-radius: 28px; }
  .scena-cadru-carcasa { padding: 4px; border-radius: 27px; }
  .scena-ecran { border-radius: 23px; }
  .scena-ecran::before { border-radius: 20px; }
  .scena-cadru::after { border-radius: 30px; }
}

/* ---- Miscare redusa: tot ce ruleaza in bucla se opreste. Raman doar tranzitiile de stare,
   care sunt raspuns la o actiune a omului, nu decor. WCAG 2.1, criteriul 2.3.3. ---- */
@media (prefers-reduced-motion: reduce) {
  .scena-panza::before { animation: none; }
  .scena-cadru-corp { transition: none; }
  .scena-panza[data-faza="asteptare"] .scena-cadru-corp,
  .scena-panza[data-faza="sosire"] .scena-cadru-corp { transform: none; }
  .scena-panza[data-faza] .scena-ecran > * { transform: none; }
  .scena-umbra,
  .scena-panza[data-faza="asteptare"] .scena-umbra,
  .scena-panza[data-faza="sosire"] .scena-umbra {
    transform: none;
    transition: opacity var(--t-sosire) var(--ease-standard);
  }
  .scena-panza[data-faza="sosire"] .scena-raft > *:not([hidden]) { animation: none; }
  #scenaEcran .preview-actions { transform: none; }
  .scena-rail::after { animation: none; inset-inline-start: 0; inline-size: 100%; opacity: 0.34; }
  .stil-card { transform: none; transition: border-color var(--t-rapid), background var(--t-rapid); }
  .stil-card:hover .stil-cadru,
  .stil-card:focus-visible .stil-cadru,
  .stil-card:hover .stil-blitz,
  .stil-card:focus-visible .stil-blitz {
    animation: none;
  }
  .clip-card:hover,
  .clip-poza:hover { transform: none; }
}

/* ---- MATERIALUL: casa Personalului, pe zile. ----
   Alta asezare decat masa Businessului, nu aceeasi forma vopsita altfel: aici nu exista sertar
   si nu exista coada, ci un teanc de zile si un singur rand de fapta jos. */
.mat-zile { display: grid; gap: var(--sp-6); }

.mat-zi {
  border: 1px solid var(--line);
  border-radius: var(--radius-shell);
  background: var(--surface);
  padding: var(--sp-4);
}
.mat-zi-cap {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.mat-zi-cap h3 { margin: 0; font-size: 16px; font-weight: 590; }
.mat-zi-cifre { margin: 0; flex: 1; font-size: 12.5px; color: var(--muted); }
/* Cate poze n-au intrat inca in niciun clip: singura cifra care spune ce ai de facut. */
.mat-nou { color: var(--accent-dark); font-weight: 590; }

.mat-grila {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--sp-2);
}
.mat-poza {
  position: relative;
  padding: 0;
  border: 1px solid var(--line-fisa);
  border-radius: var(--sp-2);
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
  /* Personalul iese vertical; pana si provizoriul de aici sta in forma clipului. */
  aspect-ratio: 9 / 16;
  transition: border-color var(--t-rapid), transform var(--t-rapid), box-shadow var(--t-rapid);
}
.mat-poza img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mat-poza:hover { transform: translateY(-2px); }
.mat-poza:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Aleasa: inel plin, ca fisa pastrata de pe masa. Acelasi limbaj in tot produsul. */
.mat-poza.is-aleasa { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
/* Folosita deja intr-un clip: se stinge, nu dispare - o poti alege din nou daca vrei. */
.mat-poza.e-folosita:not(.is-aleasa) img { opacity: 0.45; }
.mat-poza.e-folosita:not(.is-aleasa)::after {
  content: "";
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 6px;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.mat-ora {
  position: absolute;
  inset-block-end: 4px;
  inset-inline-start: 6px;
  font-size: 10.5px;
  font-weight: 590;
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.65);
  pointer-events: none;
}

/* Bancul Materialului: acelasi gest ca bancul Studioului - un rand jos, lipit, cu o singura
   fapta - dar cu alt continut, fiindca aici nu scrii, ci alegi. */
.mat-banc {
  position: sticky;
  inset-block-end: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-shell);
  background: var(--surface-top);
  box-shadow: inset 0 1px 0 var(--line-top);
}
.mat-socoteala { margin: 0; flex: 1; min-width: 160px; font-size: 13px; font-weight: 590; }
.mat-stil-et { font-size: 12.5px; color: var(--muted); }
.mat-stil {
  padding: 6px 10px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

@media (max-width: 860px) {
  .mat-grila { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .mat-banc { gap: var(--sp-2); }
  .mat-socoteala { flex-basis: 100%; }
}

/* ---- CONDUCTA SAPTAMANII: casa Businessului. ----
   Sapte celule pe un rand, nu un teanc de zile ca in Personal: Businessul citeste o saptamana
   dintr-o privire, Personalul rasfoieste inapoi cat vrea. Aceeasi paleta, alta asezare. */
.ac-conducta { margin-bottom: var(--sp-6); }
.ac-conducta .panel-head { margin-bottom: var(--sp-4); }

.cond-zile {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-2);
}
.cond-zi {
  display: grid;
  gap: 2px;
  padding: var(--sp-3) var(--sp-2);
  text-align: start;
  border: 1px solid var(--line-fisa);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  transition: border-color var(--t-rapid), transform var(--t-rapid);
}
.cond-zi:hover { transform: translateY(-2px); }
.cond-zi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cond-nume { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cond-data { font-size: 20px; font-weight: 640; line-height: 1.1; }
.cond-stare { font-size: 11.5px; color: var(--muted); }

/* Starea zilei se citeste din muchie, nu dintr-o pastila in plus: o saptamana intreaga de
   etichete ar fi exact inghesuiala pe care o evitam. */
.cond-zi.e-programata { border-color: var(--accent); }
.cond-zi.e-programata .cond-stare { color: var(--accent-dark); font-weight: 590; }
.cond-zi.e-plecata { opacity: 0.72; }
.cond-zi.e-oprita { border-color: var(--danger); }
.cond-zi.e-oprita .cond-stare { color: var(--danger); font-weight: 590; }
/* Ziua goala nu e o eroare, e un loc liber: se vede ca lipsa, nu ca alarma. */
.cond-zi.e-goala { border-style: dashed; }
.cond-zi.e-goala .cond-data { color: var(--muted); }
/* Planul inca necitit: zi neutra, fara muchia punctata a zilei libere. Nu stim ce e pe ea. */
.cond-zi.e-necitita .cond-stare { color: var(--muted); }

@media (max-width: 860px) {
  .cond-zile { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cond-data { font-size: 17px; }
}

/* Verbul Personalului pe un clip gata: il pastrezi, nu il trimiti nicaieri. */
.clip-actiuni { display: flex; justify-content: flex-end; padding: 0 var(--sp-3) var(--sp-3); }
.clip-actiuni .mini-btn { text-decoration: none; }

/* Cartonasul de filmare: fara previzualizare, fiindca bucketul nu se poate citi din browser.
   O eticheta cu durata spune ce e, in loc de un cadru gol care ar minti. */
.mat-poza.e-film { display: grid; place-items: center; background: var(--surface-strong); }
.mat-film { display: grid; gap: 6px; justify-items: center; color: var(--muted); }
.mat-film-semn {
  inline-size: 0; block-size: 0;
  border-inline-start: 13px solid currentColor;
  border-block-start: 8px solid transparent;
  border-block-end: 8px solid transparent;
  margin-inline-start: 3px;
}
.mat-film-durata { font-size: 11.5px; font-weight: 590; }
.mat-poza.e-film.is-aleasa .mat-film { color: var(--accent-dark); }