/* Adminul (layout "admin"): tot ce e aici e sub :is(body.admin, body.platform), ca sa nu atinga vitrina.
   Sistemul de design P12, contractul in docs/ADMIN-UI.md. CSS simplu, fara dependinte. Structura si spatierea sunt aici;
   culorile, fontul, razele si umbrele sunt doar in admin-theme.css (directia vizuala, ADMIN-UI.md 14). */

:is(body.admin, body.platform) {
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem;
  --sidebar-width: 15.5rem;
  --topbar-height: 3.25rem;
  --content-width: 72rem;
  --z-topbar: 20; --z-skip: 30;
  --transition: 150ms ease;

  font: 400 1rem/1.5 var(--font-sans);
  color: var(--color-text);
}
body.admin { background: var(--color-page); margin: 0; }
:is(body.admin, body.platform) a { color: var(--color-accent); text-underline-offset: .15em; }
:is(body.admin, body.platform) a:hover { color: var(--color-accent-hover); }
:is(body.admin, body.platform) h1, :is(body.admin, body.platform) h2, :is(body.admin, body.platform) h3 { line-height: 1.25; text-wrap: balance; margin: 0 0 var(--space-3); }
:is(body.admin, body.platform) h1 { font-size: 1.625rem; font-weight: 650; letter-spacing: -.01em; }
:is(body.admin, body.platform) h2 { font-size: 1.125rem; font-weight: 600; }
:is(body.admin, body.platform) h3 { font-size: 1rem; font-weight: 600; }
:is(body.admin, body.platform) p { margin: 0 0 var(--space-3); max-width: 70ch; }
:is(body.admin, body.platform) code, :is(body.admin, body.platform) pre { font-family: var(--font-mono); font-size: .9em; }

/* Focusul vizibil. Campurile de data si ora primesc focusul pe segmentele lor interne, unde :focus-visible nu se
   potriveste pe input (auditul P9). */
:is(body.admin, body.platform) a:focus-visible, :is(body.admin, body.platform) button:focus-visible, :is(body.admin, body.platform) input:focus-visible, :is(body.admin, body.platform) select:focus-visible,
:is(body.admin, body.platform) textarea:focus-visible, :is(body.admin, body.platform) summary:focus-visible, :is(body.admin, body.platform) input[type="date"]:focus-within,
:is(body.admin, body.platform) input[type="datetime-local"]:focus-within, :is(body.admin, body.platform) input[type="time"]:focus-within, :is(body.admin, body.platform) [tabindex="-1"]:focus {
  outline: 3px solid var(--color-focus); outline-offset: 2px;
}
body.admin .skip-link { position: absolute; left: -999px; }
body.admin .skip-link:focus { left: var(--space-4); top: var(--space-4); background: var(--color-surface); padding: var(--space-2) var(--space-3); z-index: var(--z-skip); }

/* Layout: bara de sus, bara laterala, continutul. Pe ecrane late bara laterala sta fixa in stanga. */
body.admin .admin-shell { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "topbar" "nav" "main"; min-height: 100dvh; }
body.admin .topbar {
  grid-area: topbar; display: flex; align-items: center; gap: var(--space-3); min-height: var(--topbar-height);
  padding: var(--space-2) var(--space-4); box-sizing: border-box; background: var(--top-bg); color: var(--top-fg);
  border-bottom: 1px solid var(--top-border); position: sticky; top: 0; z-index: var(--z-topbar);
}
body.admin .topbar-shop { font-weight: 650; color: var(--top-fg); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.admin .topbar-user { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
body.admin .topbar-email { color: var(--top-field-fg); font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Specificitate peste `.btn` (care vine mai jos si pune display), ca „Meniu” sa nu apara pe desktop (gasit de P1). */
body.admin .topbar .nav-toggle { display: none; }
body.admin .sidebar-nav { grid-area: nav; background: var(--side-bg); color: var(--side-fg); border-bottom: 1px solid var(--side-border); padding: var(--space-3) var(--space-3) var(--space-5); }
body.admin .admin-main { grid-area: main; width: 100%; max-width: var(--content-width); margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-7); box-sizing: border-box; min-width: 0; }

body.admin .nav-group { margin-bottom: var(--space-3); }
body.admin .nav-group ul { list-style: none; margin: 0; padding: 0; }
body.admin .nav-group-title { font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--side-fg-2); margin: var(--space-3) var(--space-3) var(--space-1); }
body.admin .nav-zone {
  font-size: .75rem; font-weight: 600; color: var(--tone-warning-fg); background: var(--tone-warning-bg);
  border-radius: var(--radius-small); padding: var(--space-1) var(--space-3); margin: var(--space-5) 0 var(--space-2);
}
body.admin .nav-link {
  display: block; min-height: 24px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-small);
  color: var(--side-fg); text-decoration: none; transition: background-color var(--transition);
}
body.admin .nav-link:hover { background: var(--side-hover); color: var(--side-fg); }
body.admin .nav-link[aria-current="page"] { background: var(--side-active-bg); color: var(--side-active-fg); font-weight: 600; box-shadow: inset 3px 0 0 var(--side-mark); }

@media (min-width: 60rem) {
  body.admin .admin-shell { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "topbar topbar" "nav main"; }
  body.admin .sidebar-nav {
    border-bottom: 0; border-right: 1px solid var(--side-border); position: sticky; top: var(--topbar-height);
    align-self: start; max-height: calc(100dvh - var(--topbar-height)); overflow-y: auto; box-sizing: border-box;
  }
  body.admin .admin-main { padding: var(--space-6) var(--space-6) var(--space-7); }
}
/* Pe telefon, meniul se ascunde doar dupa ce a pornit JavaScript-ul (admin-nav); fara el ramane deasupra continutului. */
@media (max-width: 59.99rem) {
  body.admin .admin-shell[data-nav-ready] .nav-toggle { display: inline-flex; }
  body.admin .admin-shell[data-nav-ready] .sidebar-nav { display: none; }
  body.admin .admin-shell[data-nav-ready][data-nav-open] .sidebar-nav { display: block; }
  body.admin .topbar-email { display: none; }
}

/* Antetul paginii (ADMIN-UI.md 2). */
:is(body.admin, body.platform) .page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-5); }
/* Baza fixa, nu latimea textului: un subtitlu lung nu mai impinge actiunile sub el pe desktop (gasit de QA pe GDPR); pe telefon
   20rem plus actiunile nu incap pe un rand, deci actiunile trec dedesubt, ca pana acum. */
:is(body.admin, body.platform) .page-heading { min-width: 0; flex: 1 1 20rem; }
:is(body.admin, body.platform) .page-heading h1 { margin: 0; }
:is(body.admin, body.platform) .page-subtitle { color: var(--color-text-muted); margin: var(--space-1) 0 0; }
:is(body.admin, body.platform) .page-back { display: inline-block; min-height: 24px; padding: var(--space-1) 0; margin-bottom: var(--space-1); font-size: .875rem; }
:is(body.admin, body.platform) .page-back::before { content: "\2190\00a0"; }
:is(body.admin, body.platform) .page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
:is(body.admin, body.platform) .page-actions form, :is(body.admin, body.platform) .button-form { display: inline; margin: 0; }

/* Butoane (ADMIN-UI.md 3). `.button` e numele vechi, aratat ca butonul secundar. */
:is(body.admin, body.platform) .btn, :is(body.admin, body.platform) .button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 2.5rem;
  padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  background: var(--color-surface); color: var(--color-text); font: 500 .9375rem/1.2 var(--font-sans);
  text-decoration: none; cursor: pointer; box-sizing: border-box; transition: background-color var(--transition), border-color var(--transition);
}
:is(body.admin, body.platform) .btn:hover, :is(body.admin, body.platform) .button:hover { background: var(--color-page); color: var(--color-text); }
:is(body.admin, body.platform) .btn:active, :is(body.admin, body.platform) .button:active { transform: translateY(1px); }
:is(body.admin, body.platform) .btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
:is(body.admin, body.platform) .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); }
:is(body.admin, body.platform) .btn-danger { background: var(--color-surface); border-color: var(--color-danger); color: var(--color-danger); }
:is(body.admin, body.platform) .btn-danger:hover { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
:is(body.admin, body.platform) .btn-link { border-color: transparent; background: transparent; color: var(--color-accent); padding-inline: var(--space-2); text-decoration: underline; text-underline-offset: .15em; }
:is(body.admin, body.platform) .btn-link:hover { background: var(--color-accent-soft); color: var(--color-accent-hover); }
:is(body.admin, body.platform) .btn-small { min-height: 2rem; padding: var(--space-1) var(--space-3); font-size: .875rem; }
:is(body.admin, body.platform) .btn[disabled], :is(body.admin, body.platform) .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

/* Formulare (ADMIN-UI.md 4). */
:is(body.admin, body.platform) label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
:is(body.admin, body.platform) input[type=checkbox] + label, :is(body.admin, body.platform) input[type=radio] + label { display: inline; font-weight: 500; }
:is(body.admin, body.platform) input, :is(body.admin, body.platform) select, :is(body.admin, body.platform) textarea, :is(body.admin, body.platform) button { font: inherit; }
:is(body.admin, body.platform) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]), :is(body.admin, body.platform) select, :is(body.admin, body.platform) textarea {
  padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-small);
  background: var(--color-surface); color: var(--color-text); min-height: 2.5rem;
}
:is(body.admin, body.platform) textarea { min-height: 6rem; width: 100%; }
:is(body.admin, body.platform) .field { margin-bottom: var(--space-4); max-width: 36rem; }
:is(body.admin, body.platform) .field input:not([type="checkbox"]):not([type="radio"]), :is(body.admin, body.platform) .field select { width: 100%; }
:is(body.admin, body.platform) .field > small { display: block; color: var(--color-text-muted); font-size: .875rem; margin-top: var(--space-1); }
:is(body.admin, body.platform) .field-hint { color: var(--color-text-muted); font-size: .875rem; margin: 0 0 var(--space-1); }
:is(body.admin, body.platform) .field-error, :is(body.admin, body.platform) .error { color: var(--tone-danger-fg); font-size: .875rem; font-weight: 500; margin: var(--space-1) 0 0; }
/* Controlul nu se ingusteaza langa o eticheta lunga si sta pe primul ei rand (doua casute una sub alta raman aliniate). */
:is(body.admin, body.platform) .field-check { display: flex; gap: var(--space-2); align-items: flex-start; }
:is(body.admin, body.platform) .field-check > :is(input[type="checkbox"], input[type="radio"]) { flex: none; margin: 0; }
:is(body.admin, body.platform) .field-check label { margin: 0; font-weight: 500; }
:is(body.admin, body.platform) input[aria-invalid=true], :is(body.admin, body.platform) select[aria-invalid=true], :is(body.admin, body.platform) textarea[aria-invalid=true] { border: 2px solid var(--color-danger); }
:is(body.admin, body.platform) fieldset, :is(body.admin, body.platform) .fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); min-width: 0; }
:is(body.admin, body.platform) legend { font-weight: 600; padding: 0 var(--space-1); }
:is(body.admin, body.platform) .form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
:is(body.admin, body.platform) .filters fieldset > div, :is(body.admin, body.platform) .awb-form fieldset > div { display: inline-block; margin: 0 var(--space-4) var(--space-2) 0; vertical-align: top; }
:is(body.admin, body.platform) .filters { margin-bottom: var(--space-4); }
/* „Șterge filtrele” din bara de filtre dispare cand urmeaza starea goala, care il are deja (ADMIN-UI.md 8). Serverul nu il
   randeaza pe lista goala; regula acopera filtrarea in cadrul Turbo, care inlocuieste doar lista, nu si bara. */
:is(body.admin, body.platform) .filters:has(~ .empty-state, ~ turbo-frame .empty-state) .filters-clear { display: none; }

/* Tabele (ADMIN-UI.md 5). Regulile pe `table` raman pentru ecranele netrecute inca. */
:is(body.admin, body.platform) table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; background: var(--color-surface); }
:is(body.admin, body.platform) caption { text-align: left; font-weight: 600; padding: var(--space-2) 0; }
:is(body.admin, body.platform) th, :is(body.admin, body.platform) td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: top; }
:is(body.admin, body.platform) thead th { background: var(--color-page); font-size: .8125rem; font-weight: 600; color: var(--color-text-muted); }
:is(body.admin, body.platform) .data-table { border: 1px solid var(--color-border); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
:is(body.admin, body.platform) .data-table tbody tr:last-child td { border-bottom: 0; }
:is(body.admin, body.platform) .data-table tbody tr:hover { background: var(--color-page); }
:is(body.admin, body.platform) .num { text-align: right; font-variant-numeric: tabular-nums; }
:is(body.admin, body.platform) .row-actions { white-space: nowrap; text-align: right; }
:is(body.admin, body.platform) .table-scroll { overflow-x: auto; margin: var(--space-4) 0; border-radius: var(--radius); }
:is(body.admin, body.platform) .table-scroll:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
:is(body.admin, body.platform) .table-scroll table { margin: 0; }
:is(body.admin, body.platform) .pager { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-4); }

/* Insigne de stare (ADMIN-UI.md 6). `.badge` simplu = info. */
:is(body.admin, body.platform) .badge { display: inline-block; padding: .125rem var(--space-2); border-radius: var(--radius-small); background: var(--tone-info-bg); color: var(--tone-info-fg); font-size: .8125rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
:is(body.admin, body.platform) .badge-neutral { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); }
:is(body.admin, body.platform) .badge-info { background: var(--tone-info-bg); color: var(--tone-info-fg); }
:is(body.admin, body.platform) .badge-success { background: var(--tone-success-bg); color: var(--tone-success-fg); }
:is(body.admin, body.platform) .badge-warning { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
:is(body.admin, body.platform) .badge-danger { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }

/* Carduri, cifre, lista de pasi (ADMIN-UI.md 7). */
:is(body.admin, body.platform) .card { background: var(--color-surface); border: 1px solid var(--card-border-color); border-radius: var(--radius-large); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-4); box-shadow: var(--shadow-card); }
:is(body.admin, body.platform) .card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
:is(body.admin, body.platform) .card-header h2 { margin: 0; }
:is(body.admin, body.platform) .card-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
:is(body.admin, body.platform) .card-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); margin-bottom: var(--space-4); }
:is(body.admin, body.platform) .card-grid > .card { margin: 0; }
:is(body.admin, body.platform) ul.card-grid { list-style: none; padding: 0; }
/* Un fieldset direct intr-un card nu mai deseneaza a doua margine. */
:is(body.admin, body.platform) .card fieldset { border: 0; padding: 0; margin: 0; }
/* Legenda dintr-un card e un subgrup sub titlul cardului (h2), deci mai mica decat el; un fieldset care e chiar cardul
   se numeste prin aria-labelledby spre h2, fara legenda repetata. */
:is(body.admin, body.platform) .card legend { font-size: .9375rem; font-weight: 650; padding: 0; margin-bottom: var(--space-2); }
:is(body.admin, body.platform) .card fieldset + fieldset { margin-top: var(--space-4); }
:is(body.admin, body.platform) .stats { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); margin: 0 0 var(--space-4); }
:is(body.admin, body.platform) .stat { background: var(--color-surface); border: 1px solid var(--card-border-color); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
:is(body.admin, body.platform) .stat-label { font-size: .8125rem; color: var(--color-text-muted); }
:is(body.admin, body.platform) .stat-value { margin: var(--space-1) 0 0; font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; }
:is(body.admin, body.platform) .checklist { list-style: none; margin: 0; padding: 0; counter-reset: step; }
:is(body.admin, body.platform) .checklist-item { counter-increment: step; display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
:is(body.admin, body.platform) .checklist-item:last-child { border-bottom: 0; }
:is(body.admin, body.platform) .checklist-item::before {
  content: counter(step); flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--color-border-strong);
  display: inline-grid; place-items: center; font-size: .75rem; font-weight: 600; box-sizing: border-box;
}
:is(body.admin, body.platform) .checklist-item.is-done::before { content: "\2713"; background: var(--tone-success-bg); border-color: var(--tone-success-fg); color: var(--tone-success-fg); }
:is(body.admin, body.platform) .checklist-item.is-done .checklist-text { color: var(--color-text-muted); }
/* Un pas cu continut (Primii pasi): textul ia tot randul, actiunile pasului fara linia de final de formular. */
:is(body.admin, body.platform) .checklist-text { flex: 1; min-width: 0; }
:is(body.admin, body.platform) .checklist-text > h3 { margin: 0 0 var(--space-1); font-size: 1rem; }
:is(body.admin, body.platform) .checklist-text > .form-actions { margin-top: var(--space-3); padding-top: 0; border-top: 0; }
:is(body.admin, body.platform) .facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0; }
:is(body.admin, body.platform) .facts dt { font-weight: 600; }
:is(body.admin, body.platform) .facts dd { margin: 0; min-width: 0; }

/* Starea goala (ADMIN-UI.md 8). */
:is(body.admin, body.platform) .empty-state { background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-large); padding: var(--space-6) var(--space-5); text-align: center; margin: var(--space-4) 0; }
:is(body.admin, body.platform) .empty-state h2 { margin-bottom: var(--space-2); }
:is(body.admin, body.platform) .empty-state p { color: var(--color-text-muted); margin: 0 auto var(--space-4); }
:is(body.admin, body.platform) .empty-state-action { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); }
/* Starea goala dintr-un card nu mai e a doua cutie: cardul e chenarul (QA P15, lotul 7; macheta, `.empty-inline`). Un
   `role=status` vechi in jurul ei nu o mai pune pe fondul verde al mesajelor; ramane cutia ei. */
:is(body.admin, body.platform) .card .empty-state { border: 0; background: none; box-shadow: none; padding: var(--space-5) var(--space-4); }
:is(body.admin, body.platform) .card .empty-state h2 { font-size: 1rem; font-weight: 600; }
:is(body.admin, body.platform) [role=status]:has(> .empty-state) { background: none; color: inherit; padding: 0; }

/* Mesaje (ADMIN-UI.md 9). `[role=status]` si `[role=alert]` simple raman pentru ecranele netrecute. */
:is(body.admin, body.platform) .flash, :is(body.admin, body.platform) [role=status], :is(body.admin, body.platform) [role=alert] { padding: var(--space-3) var(--space-4); border-radius: var(--radius); margin: 0 0 var(--space-4); }
:is(body.admin, body.platform) .flash-notice, :is(body.admin, body.platform) [role=status] { background: var(--tone-success-bg); color: var(--tone-success-fg); }
:is(body.admin, body.platform) .flash-alert, :is(body.admin, body.platform) [role=alert] { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
:is(body.admin, body.platform) .callout { border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); border-left: 4px solid currentColor; }
:is(body.admin, body.platform) .callout-title { font-size: 1rem; margin-bottom: var(--space-1); }
:is(body.admin, body.platform) .callout > :last-child { margin-bottom: 0; }
:is(body.admin, body.platform) .callout ul { margin: 0; padding-left: var(--space-5); }
:is(body.admin, body.platform) .callout-neutral { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); }
:is(body.admin, body.platform) .callout-info { background: var(--tone-info-bg); color: var(--tone-info-fg); }
:is(body.admin, body.platform) .callout-success { background: var(--tone-success-bg); color: var(--tone-success-fg); }
:is(body.admin, body.platform) .callout-warning { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
:is(body.admin, body.platform) .callout-danger { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
:is(body.admin, body.platform) .callout a, :is(body.admin, body.platform) .flash a { color: inherit; }

/* Filele (ADMIN-UI.md 12): `nav.tabs` (si numele vechi `.subnav`), linkul curent cu aria-current="page". */
:is(body.admin, body.platform) :is(.tabs, .subnav) { margin: 0 0 var(--space-5); border-bottom: 1px solid var(--color-border); overflow-x: auto; }
:is(body.admin, body.platform) :is(.tabs, .subnav) ul { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
:is(body.admin, body.platform) :is(.tabs, .subnav) a { display: block; min-height: 24px; padding: var(--space-2) var(--space-3); color: var(--color-text-muted); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; }
:is(body.admin, body.platform) :is(.tabs, .subnav) a:hover { color: var(--color-text); }
:is(body.admin, body.platform) :is(.tabs, .subnav) a[aria-current="page"] { color: var(--color-accent-hover); border-bottom-color: var(--color-accent); font-weight: 600; }

/* Restul claselor existente. */
:is(body.admin, body.platform) .actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
:is(body.admin, body.platform) .actions form { margin: 0; }
/* Cronologia comenzii (macheta, pagina comenzii): zilele ca antete, evenimentele pe o linie verticala, ora la dreapta;
   evenimentele importante (bani, livrare, anulare) cu punct plin. */
:is(body.admin, body.platform) .timeline { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
:is(body.admin, body.platform) .timeline::before { content: ""; position: absolute; left: 12px; top: 6px; bottom: 6px; width: 2px; background: var(--color-border); }
:is(body.admin, body.platform) .tl-day { font-size: .8125rem; font-weight: 600; color: var(--color-text-muted); margin: var(--space-4) 0 var(--space-2) -26px; padding-left: 26px; }
:is(body.admin, body.platform) .tl-day:first-child { margin-top: 0; }
:is(body.admin, body.platform) .tl-event { position: relative; padding: 8px 0 8px 18px; display: flex; gap: var(--space-3); align-items: flex-start; }
:is(body.admin, body.platform) .tl-event::before { content: ""; position: absolute; left: -19px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border-strong); }
:is(body.admin, body.platform) .tl-event.is-key::before { background: var(--chart); border-color: var(--chart); }
:is(body.admin, body.platform) .tl-body { flex: 1; min-width: 0; }
:is(body.admin, body.platform) .tl-body p { margin: 0; font-size: .875rem; }
:is(body.admin, body.platform) .tl-body .tl-meta { color: var(--color-text-muted); font-size: .8125rem; overflow-wrap: anywhere; }
:is(body.admin, body.platform) .tl-time { font-size: .8125rem; color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
:is(body.admin, body.platform) .note-form { margin: 0 0 var(--space-3); }
:is(body.admin, body.platform) .note-form textarea { width: 100%; }
:is(body.admin, body.platform) .note-body { margin: var(--space-1) 0 0; white-space: pre-line; overflow-wrap: anywhere; }
:is(body.admin, body.platform) .tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
:is(body.admin, body.platform) .tag-item { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 12px; border-radius: var(--radius-pill); background: var(--color-surface-2); font-size: .875rem; }
:is(body.admin, body.platform) .tag-remove { display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
:is(body.admin, body.platform) .tag-remove:hover { background: var(--color-border); }
:is(body.admin, body.platform) .tl-body .note-body { margin-top: 6px; padding: 10px 12px; border: 1px solid var(--card-border-color); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow-card); }
:is(body.admin, body.platform) .card .actions:not(:last-child) { margin-bottom: var(--space-3); }
@media (max-width: 40rem) { :is(body.admin, body.platform) .facts { grid-template-columns: 1fr; } }

/* Adaugate de S2 (auditul S4, 23.10.2026): reflow la 320px si tinte de cel putin 24px (WCAG 2.2, 1.4.10 si 2.5.8). */
:is(body.admin, body.platform) code { overflow-wrap: anywhere; }
:is(body.admin, body.platform) input[type="checkbox"], :is(body.admin, body.platform) input[type="radio"] { width: 1.5rem; height: 1.5rem; }
/* Tinta minima de 24px (WCAG 2.2, 2.5.8) pentru linkurile care nu stau intr-o fraza: filtre, paginare, navigari din pagina, Renunta. */
:is(body.admin, body.platform) .filters a, :is(body.admin, body.platform) nav[aria-label="Paginare"] a, :is(body.admin, body.platform) .subnav a, :is(body.admin, body.platform) main nav a, :is(body.admin, body.platform) .action-link { display: inline-block; min-height: 24px; padding: .25rem 0; }
:is(body.admin, body.platform) .visually-hidden, :is(body.admin, body.platform) .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Reflow la 320px pe textul preformatat (auditul P9, WCAG 2.2, 1.4.10): adresele, JSON-ul si mesajele lungi se rup pe randuri. */
:is(body.admin, body.platform) pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Reflow la 320px pe controalele formularelor (reauditul S4): nimic nu iese din latimea paginii. */
:is(body.admin, body.platform) input:not([type="checkbox"]):not([type="radio"]), :is(body.admin, body.platform) select, :is(body.admin, body.platform) textarea { max-width: 100%; box-sizing: border-box; }
:is(body.admin, body.platform) form > *, :is(body.admin, body.platform) fieldset > div, :is(body.admin, body.platform) .filters div { min-width: 0; max-width: 100%; }

/* Autentificarea (layout "auth"): un card centrat, pe toata latimea la 390px. */
body.admin .auth-shell { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-5) var(--space-4); box-sizing: border-box; }
body.admin .auth-card { width: 100%; max-width: 26rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-large); box-shadow: var(--shadow-card); padding: var(--space-6) var(--space-5); box-sizing: border-box; }
body.admin .auth-brand { font-weight: 650; color: var(--color-text-muted); margin-bottom: var(--space-4); }
body.admin .auth-lead { color: var(--color-text-muted); }
body.admin .auth-card .field { max-width: none; }
body.admin .auth-actions { justify-content: space-between; border-top: 0; padding-top: 0; margin-top: var(--space-4); }
body.admin .totp-steps { padding-left: var(--space-5); }
body.admin .totp-steps li { margin-bottom: var(--space-3); }
body.admin .totp-qr { max-width: 14rem; margin: var(--space-2) 0; background: #fff; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius); }
body.admin .otp-input { font-family: var(--font-mono); font-size: 1.25rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; }

/* Banda impersonarii (P3): vizibila deasupra navigarii, contrast peste 7:1 (WCAG 2.2, 1.4.3). */
body.admin .impersonation-banner { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; background: #fff4d6; color: #3b2a00; border: 2px solid #8a5a00; padding: .5rem 1rem; margin: 0; }
body.admin .impersonation-banner p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  :is(body.admin, body.platform) *, :is(body.admin, body.platform) *::before { transition: none !important; }
  :is(body.admin, body.platform) .btn:active, :is(body.admin, body.platform) .button:active { transform: none; }
}
/* Randarea de proba a unei sectiuni Liquid (P4), intr-un iframe izolat. */
body.admin .liquid-preview { width: 100%; min-height: 12rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
/* Previzualizarea pe dispozitive (P4): aceleasi valori ca stilurile din pagina de dinainte. */
body.admin .device-previews { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
body.admin .device-preview { margin: 0; max-width: 100%; }
body.admin .device-preview-wide { flex: 1; min-width: 0; }
body.admin .device-frame { border: 1px solid var(--color-border); max-width: 100%; }
body.admin .device-scaled { width: 100%; overflow: hidden; }
body.admin .device-frame-desktop { transform: scale(0.6); transform-origin: 0 0; width: 1280px; height: 900px; max-width: none; }
/* Editorul de produs propriu (P4): coloana laterala pe ecran lat, o singura coloana pe telefon. */

/* ---------- Piesele comune ambelor directii ale machetei (P12, ADMIN-UI.md 13-19) ---------- */

/* Iconitele (13): sprite-ul din layout e ascuns; `svg.i` mosteneste culoarea textului. */
body.admin .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:is(body.admin, body.platform) svg.i { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; }
:is(body.admin, body.platform) svg.i-sm { width: 1rem; height: 1rem; vertical-align: -.15em; }
:is(body.admin, body.platform) .btn svg.i { margin-right: var(--space-1); }

/* Contoarele (13, 17): pe intrari, file si actiuni. */
:is(body.admin, body.platform) .count { display: inline-block; min-width: 1.5em; padding: 0 .45em; border-radius: 999px; background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); font-size: .8125rem; font-weight: 600; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums; }

/* Bara laterala cu iconite: pe titlul grupului sau pe intrarea unui grup cu o singura intrare. */
body.admin .nav-group-title { display: flex; align-items: center; gap: var(--space-2); }
body.admin .nav-group-title svg.i { width: 1rem; height: 1rem; color: var(--side-fg-2); }
body.admin .nav-link { display: flex; align-items: center; gap: var(--space-2); }
body.admin .nav-link .nav-text { flex: 1; min-width: 0; }
body.admin .nav-link svg.i { color: var(--side-fg-2); }
body.admin .nav-link[aria-current="page"] svg.i { color: var(--side-mark); }
body.admin .nav-link .count { background: var(--side-hover); color: var(--side-fg); }
body.admin .nav-link[aria-current="page"] .count { background: var(--color-surface); color: var(--side-active-fg); }

/* Cautarea din bara de sus (16): pe ecrane late in mijlocul barei, pe telefon pe un rand al ei, sub nume. */
body.admin .topbar { flex-wrap: wrap; }
body.admin .top-search { order: 3; flex: 1 1 100%; position: relative; display: block; }
body.admin .top-search form { margin: 0; }
body.admin .top-search svg.i { position: absolute; left: var(--space-3); top: 50%; translate: 0 -50%; color: var(--top-field-fg); pointer-events: none; }
/* Por id: regula generala a campurilor are cinci :not() si ar castiga pe specificitate. */
body.admin .top-search #top_q { width: 100%; box-sizing: border-box; min-height: 2.5rem; padding: 0 4.5rem 0 2.5rem; border: 1px solid var(--top-field-border); border-radius: var(--radius); background: var(--top-field-bg); color: var(--top-fg); font: inherit; font-size: .9375rem; }
body.admin .top-search #top_q::placeholder { color: var(--top-field-fg); opacity: 1; }
body.admin .top-search-key { position: absolute; right: var(--space-3); top: 50%; translate: 0 -50%; font: 500 .75rem/1 var(--font-sans); color: var(--top-field-fg); border: 1px solid var(--top-field-border); border-radius: var(--radius-small); padding: .25rem .375rem; }
@media (min-width: 60rem) {
  body.admin .topbar { flex-wrap: nowrap; }
  body.admin .top-search { order: 0; flex: 1 1 auto; max-width: 35rem; margin: 0 auto; }
}
@media (hover: none) { body.admin .top-search-key { display: none; } }

/* Rezultatele cautarii (16). */
:is(body.admin, body.platform) .result-list { list-style: none; margin: 0; padding: 0; }
:is(body.admin, body.platform) .result-list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
:is(body.admin, body.platform) .result-list li:last-child { border-bottom: 0; }
:is(body.admin, body.platform) .result-meta { display: block; color: var(--color-text-muted); font-size: .875rem; }

/* Bara de salvare (15): lipita de marginea de jos cat formularul e pe ecran. */
:is(body.admin, body.platform) .savebar { position: sticky; bottom: var(--space-4); z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); border-radius: var(--radius-large); background: var(--savebar-bg); color: var(--savebar-fg); box-shadow: var(--shadow-savebar); }
:is(body.admin, body.platform) .savebar-message { flex: 1 1 12rem; margin: 0; font-weight: 600; }
:is(body.admin, body.platform) .savebar .btn-secondary { background: transparent; color: var(--savebar-fg); border-color: var(--savebar-border); }
:is(body.admin, body.platform) .savebar .btn-secondary:hover { background: var(--savebar-hover); color: var(--savebar-fg); }
:is(body.admin, body.platform) .savebar .btn-primary { background: var(--savebar-fg); color: var(--savebar-bg); border-color: var(--savebar-fg); }
:is(body.admin, body.platform) .savebar :focus-visible { outline-color: var(--savebar-fg); }

/* Filele de stare (17): filele obisnuite (12), cu contorul in fila. */
:is(body.admin, body.platform) .status-tabs a { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }

/* Actiunile in masa (18). */
:is(body.admin, body.platform) .bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius); }
:is(body.admin, body.platform) .bulkbar-count { margin: 0 var(--space-2) 0 0; font-weight: 600; font-size: .875rem; }
:is(body.admin, body.platform) .checkbox { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--color-primary); }
:is(body.admin, body.platform) .col-check { width: 2.5rem; }

/* Randurile stivuite pe telefon (19): `table.data-table.is-stacked`, cu `data-label` pe celule. Antetul ramane in pagina
   pentru cititoarele de ecran (ascuns vizual, nu display:none), iar fiecare celula isi arata eticheta. */
@media (max-width: 39.99rem) {
  :is(body.admin, body.platform) .data-table.is-stacked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  :is(body.admin, body.platform) .data-table.is-stacked tr { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
  :is(body.admin, body.platform) .data-table.is-stacked :is(th, td) { display: flex; gap: var(--space-3); justify-content: space-between; border: 0; padding: var(--space-1) var(--space-3); text-align: left; }
  :is(body.admin, body.platform) .data-table.is-stacked td[data-label]::before { content: attr(data-label); color: var(--color-text-muted); font-weight: 600; }
  :is(body.admin, body.platform) .data-table.is-stacked td.num { text-align: right; }
  :is(body.admin, body.platform) .data-table.is-stacked td.col-check { justify-content: flex-start; }
  :is(body.admin, body.platform) .data-table.is-stacked td.row-actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* ---------- Stratul de layout al directiei C „Modern” (P12, ADMIN-UI.md 22), o singura data ----------
   Panourile plutitoare (bara laterala si panoul de lucru, pe un fundal care se vede printre ele), pastila neagra in meniu,
   bara de sus in pastile, titlurile in Newsreader, butoanele si filele rotunde, cardurile de cifre si cardul inchis.
   Culorile vin din admin-theme.css; sticla de pe rama, din admin-glass.css. Fara sticla (rezervele), arata la fel, opac. */
body.admin { background: var(--frame-bg); }
:is(body.admin, body.platform) { font-family: var(--font-sans); }
:is(body.admin, body.platform) h1 { font-family: var(--font-display); font-weight: 500; font-size: 2.125rem; letter-spacing: -.012em; line-height: 1.15; }
:is(body.admin, body.platform) .page-subtitle { color: var(--color-text-muted); }

/* Panourile: pe ecrane late, bara laterala plutitoare in stanga, iar bara de sus si continutul un singur panou rotunjit. */
@media (min-width: 60rem) {
  body.admin .admin-shell { --shell-gap: 14px; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "nav topbar" "nav main"; padding: var(--shell-gap); column-gap: var(--shell-gap); box-sizing: border-box; }
  body.admin .sidebar-nav {
    position: sticky; top: var(--shell-gap); height: calc(100dvh - 2 * var(--shell-gap)); max-height: none; align-self: start; overflow-y: auto;
    border: 0; border-radius: var(--radius-panel); padding: 18px 14px 16px; box-shadow: var(--shadow-card);
    scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent;
  }
  body.admin .topbar { position: static; min-height: 4.75rem; padding: 18px 28px 6px 36px; border: 0; border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
  body.admin .admin-main { max-width: none; margin: 0; padding: 28px 36px 96px; background: var(--color-page); border-radius: 0 0 var(--radius-panel) var(--radius-panel); }
  body.admin .topbar-shop { display: none; }
  body.admin .top-search { max-width: 27.5rem; margin: 0; }
}
:is(body.admin) { --sidebar-width: 16.75rem; }

/* Numele magazinului sus in bara laterala, cu marca rotunda. */
body.admin .side-inner { display: flex; flex-direction: column; flex: 1 0 auto; }
body.admin .side-brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 18px; margin-bottom: 12px; border-bottom: 1px solid var(--color-border); color: var(--side-fg); text-decoration: none; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; }
body.admin .side-brand:hover { color: var(--side-fg); }
body.admin .brand-mark { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--side-active-bg); color: var(--side-active-fg); font-weight: 700; }
@media (max-width: 59.99rem) { body.admin .side-brand { display: none; } }

/* Meniul: pastila neagra pe intrarea curenta, linie verticala la intrarile unui grup, contoare rotunde. */
body.admin .nav-group { margin-bottom: var(--space-2); }
body.admin .nav-group-title { font-size: .875rem; font-weight: 600; letter-spacing: 0; color: var(--side-fg); margin: var(--space-2) var(--space-2) var(--space-1); padding: 0 8px; min-height: 2.25rem; }
body.admin .nav-group-title svg.i { width: 1.25rem; height: 1.25rem; color: var(--side-fg-2); }
body.admin .nav-group-title + ul { position: relative; padding-left: 30px; }
body.admin .nav-group-title + ul::before { content: ""; position: absolute; left: 27px; top: 4px; bottom: 4px; width: 1px; background: var(--side-fg); }
body.admin .nav-link { min-height: 2.5rem; padding: 0 16px; border-radius: var(--radius-pill); box-shadow: none; }
body.admin .nav-group-title + ul .nav-link { padding-left: 18px; color: var(--side-fg-2); font-size: .9375rem; }
body.admin .nav-link[aria-current="page"], body.admin .nav-group-title + ul .nav-link[aria-current="page"] { background: var(--side-active-bg); color: var(--side-active-fg); box-shadow: none; }
body.admin .nav-link .count { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--side-count-bg); color: var(--side-count-fg); box-sizing: border-box; }
body.admin .nav-link[aria-current="page"] .count { background: var(--side-active-fg); color: var(--side-active-bg); }
body.admin .nav-zone { border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); }

/* Bara de sus: pastile. */
body.admin .top-search svg.i { left: 16px; }
body.admin .top-search #top_q { min-height: 2.875rem; border-radius: var(--radius-pill); padding-left: 44px; box-shadow: var(--shadow-control); }
body.admin .top-search-key { right: 14px; border-radius: var(--radius-pill); padding: .25rem .5rem; }
body.admin .topbar-user { padding: 4px 6px 4px 16px; border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--shadow-control); }

/* Componentele: rotunde. */
:is(body.admin, body.platform) .btn, :is(body.admin, body.platform) .button { min-height: 2.625rem; padding: 0 1.25rem; border-radius: var(--radius-pill); font-weight: 600; }
:is(body.admin, body.platform) :is(.btn, .button):not(.btn-primary, .btn-danger, .btn-link) { border-color: var(--color-border); box-shadow: var(--shadow-control); }
:is(body.admin, body.platform) .btn-small { min-height: 2.25rem; padding: 0 .875rem; }
:is(body.admin, body.platform) .btn-link { text-decoration: underline; text-underline-offset: .2em; box-shadow: none; }
:is(body.admin, body.platform) .badge { border-radius: var(--radius-pill); padding: .25rem .75rem; font-weight: 600; }
:is(body.admin, body.platform) .card { border-radius: var(--radius-large); padding: 24px; }
:is(body.admin, body.platform) .card-header h2 { font-size: 1.0625rem; font-weight: 700; }
:is(body.admin, body.platform) .empty-state { border-radius: var(--radius-large); }
:is(body.admin, body.platform) .data-table thead th { background: var(--color-surface-2); border-bottom: 0; }
:is(body.admin, body.platform) .data-table thead th:first-child { border-radius: var(--radius) 0 0 var(--radius); }
:is(body.admin, body.platform) .data-table thead th:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
:is(body.admin, body.platform) :is(.tabs, .subnav) { border-bottom: 0; }
:is(body.admin, body.platform) :is(.tabs, .subnav) ul { gap: 6px; }
:is(body.admin, body.platform) :is(.tabs, .subnav) a { border-radius: var(--radius-pill); border-bottom: 0; padding: 9px 16px; font-weight: 600; }
:is(body.admin, body.platform) :is(.tabs, .subnav) a[aria-current="page"] { background: var(--color-primary); color: var(--color-on-primary); }
:is(body.admin, body.platform) :is(.tabs, .subnav) a[aria-current="page"] .count { background: var(--color-on-primary); color: var(--color-primary); }
:is(body.admin, body.platform) .bulkbar { border: 0; border-radius: var(--radius-pill); padding: 8px 8px 8px 20px; background: var(--color-primary); color: var(--color-on-primary); }
:is(body.admin, body.platform) .bulkbar .btn-secondary { background: var(--color-surface); color: var(--color-text); }
:is(body.admin, body.platform) .savebar { border-radius: var(--radius-pill); padding: 10px 10px 10px 24px; }

/* Cardurile de cifre (.stats): carduri separate, primul inchis, celelalte pe pasteluri, cu iconita in pastila si
   mini-graficul ultimelor 14 zile. Iconita sta in <dt>, graficul in <dd> (intr-un <dl>, randul are doar dt si dd). */
:is(body.admin, body.platform) .stats { gap: 14px; }
:is(body.admin, body.platform) .stat { position: relative; overflow: hidden; border: 0; border-radius: var(--radius-large); padding: 20px 20px 16px; background: var(--color-surface); box-shadow: var(--shadow-card); }
:is(body.admin, body.platform) .stats .stat:nth-child(1) { background: var(--ink-card); color: var(--ink-text); box-shadow: var(--shadow-feature); }
:is(body.admin, body.platform) .stats .stat:nth-child(2) { background: var(--pastel-lav); }
:is(body.admin, body.platform) .stats .stat:nth-child(3) { background: var(--pastel-mint); }
:is(body.admin, body.platform) .stats .stat:nth-child(4) { background: var(--pastel-cream); }
:is(body.admin, body.platform) .stat-label { padding-right: 48px; font-size: .875rem; font-weight: 600; color: inherit; }
:is(body.admin, body.platform) .stat-value { font-size: 1.875rem; margin: 10px 0 4px; }
:is(body.admin, body.platform) .stat-unit { font-size: .55em; font-weight: 500; }
:is(body.admin, body.platform) .stat a { color: inherit; }
:is(body.admin, body.platform) .kpi-icon { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--pastel-chip); color: var(--color-text); }
:is(body.admin, body.platform) .stats .stat:nth-child(1) .kpi-icon { background: var(--ink-chip); color: var(--ink-text); }
:is(body.admin, body.platform) .stat-spark { margin: 0; }
:is(body.admin, body.platform) .kpi-spark { display: block; width: 100%; height: 40px; margin-top: 12px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Cardul inchis (.card-feature): informatia principala a unui ecran. */
:is(body.admin, body.platform) .card-feature { background: var(--ink-card); color: var(--ink-text); box-shadow: var(--shadow-feature); }
:is(body.admin, body.platform) .card-feature :is(h2, h3, a, dt) { color: var(--ink-text); }
:is(body.admin, body.platform) .card-feature :is(.page-subtitle, .field-hint, .result-meta, small) { color: var(--ink-muted); }
:is(body.admin, body.platform) .card-feature :is(td, th, .result-list li) { border-color: var(--ink-line); }
:is(body.admin, body.platform) .card-feature .btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-surface); }

/* Telefon: panourile lipite de margini; meniul deschis e un sertar plutitor peste pagina. */
@media (max-width: 59.99rem) {
  body.admin .topbar { min-height: 4.125rem; padding: 10px 12px; gap: 8px; }
  body.admin .admin-main { padding: 20px 14px 96px; background: var(--color-page); }
  body.admin h1 { font-size: 1.875rem; }
  /* Meniul deschis sta in pagina, sub bara de sus, ca un card plutitor; nu se suprapune peste continut, deci nimic din
     pagina nu ajunge sub el cand primeste focusul (WCAG 2.4.11, gasit de auditul P9 pe telefon). */
  body.admin .admin-shell[data-nav-ready][data-nav-open] .sidebar-nav {
    margin: 8px; border-radius: 26px; padding: 18px 14px 16px; box-shadow: var(--shadow-feature); border-bottom: 0;
  }
  :is(body.admin, body.platform) .card { border-radius: 20px; padding: 18px; }
  :is(body.admin, body.platform) .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  :is(body.admin, body.platform) .stat { padding: 16px 14px 12px; border-radius: 20px; }
  :is(body.admin, body.platform) .kpi-icon { width: 34px; height: 34px; top: 12px; right: 12px; }
  :is(body.admin, body.platform) .kpi-icon svg.i { width: 18px; height: 18px; }
  :is(body.admin, body.platform) .stat-label { padding-right: 36px; font-size: .84375rem; }
  :is(body.admin, body.platform) .stat-value { font-size: 1.375rem; }
  :is(body.admin, body.platform) .btn { min-height: 2.75rem; }
  :is(body.admin, body.platform) .savebar { padding: 8px 8px 8px 16px; }
}

/* ---------- Panoul directiei C (P12, ADMIN-UI.md 23) ---------- */
:is(body.admin, body.platform) .dash-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 72rem) { :is(body.admin, body.platform) .dash-grid { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); } }
:is(body.admin, body.platform) :is(.dash-main, .dash-side) > .card { margin-bottom: 16px; }
:is(body.admin, body.platform) .card-hint { color: var(--color-text-muted); font-size: .875rem; }
:is(body.admin, body.platform) .cell-meta { display: block; color: var(--color-text-muted); font-size: .8125rem; font-weight: 400; }
:is(body.admin, body.platform) .cell-nowrap { display: block; white-space: nowrap; }
/* Perechile cheie-valoare dintr-o celula de tabel (limitele planului): fara buline, strans, cifrele aliniate. */
:is(body.admin, body.platform) .facts-compact { gap: 2px var(--space-3); margin: 0; font-size: .875rem; }
:is(body.admin, body.platform) .facts-compact dt { font-weight: 500; color: var(--color-text-muted); }
:is(body.admin, body.platform) .facts-compact dd { min-width: auto; white-space: nowrap; }
/* Randul de moderare al recenziilor: controalele pe aceeasi inaltime, formularul de respingere se rupe intreg pe telefon. */
:is(body.admin, body.platform) .moderation-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-2); }
:is(body.admin, body.platform) .moderation-reject { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-2); flex: 1 1 32rem; margin: 0; }
:is(body.admin, body.platform) .moderation-reject select { flex: 1 1 14rem; width: auto; }
:is(body.admin, body.platform) .moderation-reject input { flex: 1 1 10rem; width: auto; min-width: 0; }

/* Schimbarea fata de perioada dinainte, sub cifra, pe randul ei; mini-graficul dedesubt. */
:is(body.admin, body.platform) .stat-delta { margin: 0; }
:is(body.admin, body.platform) .stat-sub { margin: 6px 0 0; font-size: .8125rem; font-variant-numeric: tabular-nums; }
:is(body.admin, body.platform) .stats .stat:nth-child(1) .stat-sub { color: var(--ink-muted); }
:is(body.admin, body.platform) .delta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .8125rem; font-weight: 600; }
:is(body.admin, body.platform) .delta span { font-weight: 400; }
:is(body.admin, body.platform) .delta-up { color: var(--delta-up); }
:is(body.admin, body.platform) .delta-down { color: var(--delta-down); }
:is(body.admin, body.platform) .stats .stat:nth-child(1) .delta-up { color: var(--ink-delta-up); }
:is(body.admin, body.platform) .stats .stat:nth-child(1) .delta-down { color: var(--ink-delta-down); }
:is(body.admin, body.platform) .stats .stat:nth-child(1) .delta span, :is(body.admin, body.platform) .stats .stat:nth-child(1) .delta-flat { color: var(--ink-muted); }

/* Graficul: SVG desenat pe server, care se scaleaza pe latimea cardului. */
:is(body.admin, body.platform) .chart-frame { display: grid; grid-template-columns: 64px minmax(0, 1fr); }
:is(body.admin, body.platform) .chart-y { grid-column: 1; grid-row: 1; display: block; overflow: visible; }
/* Inaltimea suprafetei = HEIGHT - PAD[:bottom] din Admin::ChartHelper (192), ca axa valorilor sa cada pe liniile grilei. */
:is(body.admin, body.platform) .chart { grid-column: 2; grid-row: 1; display: block; width: 100%; height: 192px; overflow: visible; }
:is(body.admin, body.platform) .chart-x { grid-column: 2; grid-row: 2; display: block; width: 100%; overflow: visible; }
:is(body.admin, body.platform) .chart-grid { stroke: var(--color-border); stroke-width: 1; }
:is(body.admin, body.platform) .chart-axis { fill: var(--color-text-muted); font-size: 12px; font-weight: 500; font-family: var(--font-sans); }
:is(body.admin, body.platform) .chart-area { fill: var(--chart-soft); stroke: none; }
:is(body.admin, body.platform) .chart-line { fill: none; stroke: var(--chart); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
:is(body.admin, body.platform) .chart-prev { fill: none; stroke: var(--chart-prev); stroke-width: 1.5; stroke-dasharray: 4 4; }
:is(body.admin, body.platform) .chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: .8125rem; color: var(--color-text-muted); }
:is(body.admin, body.platform) .chart-legend span::before { content: ""; display: inline-block; width: 16px; margin-right: 6px; vertical-align: middle; border-top: 2px solid var(--chart); }
:is(body.admin, body.platform) .chart-legend .legend-previous::before { border-top: 2px dashed var(--chart-prev); }
:is(body.admin, body.platform) .chart-data { margin-top: var(--space-3); }
:is(body.admin, body.platform) .chart-data summary { cursor: pointer; font-size: .875rem; font-weight: 600; min-height: 24px; }

/* De rezolvat: randuri-link, cu iconita in pastila pe tonul ei. */
:is(body.admin, body.platform) .todo-list { list-style: none; margin: 0 -12px; padding: 0; }
:is(body.admin, body.platform) .todo-list a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 18px; color: var(--color-text); text-decoration: none; }
:is(body.admin, body.platform) .todo-list a:hover { background: var(--color-surface-hover); }
:is(body.admin, body.platform) .todo-list a > svg.i:last-child { color: var(--color-text-muted); }
:is(body.admin, body.platform) .todo-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; color: var(--color-text); }
:is(body.admin, body.platform) .todo-warn { background: var(--pastel-cream); }
:is(body.admin, body.platform) .todo-info { background: var(--pastel-lav); }
:is(body.admin, body.platform) .todo-danger { background: var(--pastel-rose); }
:is(body.admin, body.platform) .todo-text { flex: 1; min-width: 0; display: grid; }
:is(body.admin, body.platform) .todo-text span { color: var(--color-text-muted); font-size: .875rem; }

/* Cele mai vandute si listele de linkuri. */
:is(body.admin, body.platform) .top-products { list-style: none; margin: 0; padding: 0; }
:is(body.admin, body.platform) .top-products li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
:is(body.admin, body.platform) .top-products li:last-child { border-bottom: 0; }
:is(body.admin, body.platform) .tp-text { flex: 1; min-width: 0; display: grid; }
:is(body.admin, body.platform) .tp-text strong { font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
:is(body.admin, body.platform) .tp-text span { color: var(--color-text-muted); font-size: .8125rem; }
:is(body.admin, body.platform) .thumb { flex: none; width: 48px; height: 48px; border-radius: var(--radius-small); object-fit: cover; background: var(--color-surface-2); }
:is(body.admin, body.platform) .thumb-empty { display: grid; place-items: center; color: var(--color-text-muted); }
:is(body.admin, body.platform) .link-list { list-style: none; margin: 0 -12px; padding: 0; }
:is(body.admin, body.platform) .link-list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); color: var(--color-text); text-decoration: none; font-weight: 500; }
:is(body.admin, body.platform) .link-list a > span:first-of-type { flex: 1; }
:is(body.admin, body.platform) .link-list a:hover { background: var(--color-surface-hover); }

/* ---------- Lista de produse a directiei C (P12, ADMIN-UI.md 24) ---------- */
:is(body.admin, body.platform) .index-card { padding: 16px; }
:is(body.admin, body.platform) .index-card .status-tabs { margin-bottom: var(--space-3); }
/* Filele de stare se rup pe randuri in loc sa defileze: pe telefon o fila ascunsa la dreapta nu se vede (QA P14). */
:is(body.admin, body.platform) .status-tabs { overflow: visible; }
:is(body.admin, body.platform) .status-tabs ul { flex-wrap: wrap; }
:is(body.admin, body.platform) .filters.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin: 0 0 var(--space-3); }
:is(body.admin, body.platform) .filters.toolbar .field { margin: 0; }
:is(body.admin, body.platform) .filters.toolbar .form-actions { margin: 0; }
:is(body.admin, body.platform) .toolbar-search { position: relative; flex: 1 1 16rem; max-width: 26rem; }
:is(body.admin, body.platform) .toolbar-search svg.i { position: absolute; left: 15px; top: 50%; translate: 0 -50%; color: var(--color-text-muted); pointer-events: none; }
:is(body.admin, body.platform) .toolbar-search #q { width: 100%; padding-left: 42px; border-radius: var(--radius-pill); }
:is(body.admin, body.platform) .filters.toolbar select { border-radius: var(--radius-pill); padding-inline: 14px; }
:is(body.admin, body.platform) .cell-product { display: flex; align-items: center; gap: 14px; min-width: 14rem; }
:is(body.admin, body.platform) .cell-title { font-weight: 600; color: var(--color-text); }
:is(body.admin, body.platform) .products-table td { vertical-align: middle; }
/* Filele-pastila nu au nevoie de defilare verticala; cea orizontala ramane pe telefon, subtire. */
:is(body.admin, body.platform) :is(.tabs, .subnav) { overflow-y: hidden; padding-block: 3px; scrollbar-width: thin; }
:is(body.admin, body.platform) .filters.toolbar .form-actions { border-top: 0; padding-top: 0; }
/* ---------- Pagina comenzii a directiei C (P12, ADMIN-UI.md 25) ---------- */
:is(body.admin, body.platform) .order-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: calc(-1 * var(--space-3)) 0 var(--space-5); color: var(--color-text-muted); font-size: .875rem; }
:is(body.admin, body.platform) .order-meta span { display: inline-flex; align-items: center; gap: 6px; }
:is(body.admin, body.platform) .layout-2 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 72rem) { :is(body.admin, body.platform) .layout-2 { grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); } }
:is(body.admin, body.platform) :is(.layout-main, .layout-side) > .card { margin-bottom: 16px; }
:is(body.admin, body.platform) .line-items { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
:is(body.admin, body.platform) .line-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
:is(body.admin, body.platform) .li-text { display: grid; min-width: 0; }
:is(body.admin, body.platform) .li-text strong { font-weight: 600; overflow-wrap: anywhere; }
:is(body.admin, body.platform) .li-meta, :is(body.admin, body.platform) .li-qty { color: var(--color-text-muted); font-size: .875rem; }
:is(body.admin, body.platform) .li-total { font-weight: 600; }
@media (max-width: 39.99rem) {
  :is(body.admin, body.platform) .line-item { grid-template-columns: 48px minmax(0, 1fr) auto; }
  :is(body.admin, body.platform) .line-item .li-qty { grid-column: 2; }
  :is(body.admin, body.platform) .line-item .li-total { grid-column: 3; grid-row: 1; }
}
:is(body.admin, body.platform) .totals { margin: 0; }
:is(body.admin, body.platform) .totals div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
:is(body.admin, body.platform) .totals dd { margin: 0; font-variant-numeric: tabular-nums; }
:is(body.admin, body.platform) .totals .total { border-top: 1px solid var(--ink-line); margin-top: 6px; padding-top: 12px; font-weight: 700; font-size: 1.0625rem; }
:is(body.admin, body.platform) .totals .paid { color: var(--ink-muted); }
:is(body.admin, body.platform) .layout-side h3 { font-size: .875rem; margin: var(--space-3) 0 var(--space-1); }
:is(body.admin, body.platform) .contact-line { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; overflow-wrap: anywhere; }
:is(body.admin, body.platform) .layout-side address { font-style: normal; }
:is(body.admin, body.platform) .customer-name { display: grid; font-weight: 600; }
/* ---------- Editorul de produs propriu, pe macheta „Editor” (P13, ADMIN-UI.md 26) ---------- */
/* Bara de salvare lipicioasa nu acopera campul care primeste focusul (WCAG 2.4.11): pagina defileaza cu loc pentru ea. */
html:has(:is(body.admin, body.platform) .savebar) { scroll-padding-bottom: 6.5rem; }
@media (max-width: 39.99rem) { html:has(:is(body.admin, body.platform) .savebar) { scroll-padding-bottom: 10rem; } }
/* In editor bara se lipeste de marginea de jos abia dupa prima modificare (macheta: „apare doar cand ceva s-a schimbat”);
   pana atunci, si fara JavaScript, sta la capatul formularului, cu acelasi buton de salvare. Asa nu acopera la incarcare
   campurile de la marginea ecranului (axe target-size, gasit pe /admin/produse-proprii/new). */
:is(body.admin, body.platform) .product-editor .savebar:not(.is-dirty) { position: static; }
:is(body.admin, body.platform) .product-editor .field { max-width: none; }
:is(body.admin, body.platform) .field-row { display: grid; gap: 0 var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
:is(body.admin, body.platform) .option-row { display: grid; gap: 0 var(--space-4); grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
:is(body.admin, body.platform) .option-row + .option-row { border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
@media (max-width: 39.99rem) { :is(body.admin, body.platform) .option-row { grid-template-columns: minmax(0, 1fr); } }
/* Pozele: prima, principala, ocupa doua coloane si doua randuri, ca in macheta. */
:is(body.admin, body.platform) .media-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(4, minmax(0, 1fr)); }
:is(body.admin, body.platform) .media { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-1); min-width: 0; }
:is(body.admin, body.platform) .media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-surface-2); }
:is(body.admin, body.platform) .media-main { grid-column: span 2; grid-row: span 2; }
:is(body.admin, body.platform) .media-tag { position: absolute; left: 8px; top: 8px; background: rgb(255 255 255 / .94); color: #111111; font-size: .75rem; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-pill); }
:is(body.admin, body.platform) .media-remove { display: flex; align-items: center; gap: var(--space-2); font-size: .8125rem; }
:is(body.admin, body.platform) .media-remove label { font-weight: 500; }
:is(body.admin, body.platform) .media-add { display: grid; align-content: center; justify-items: center; gap: var(--space-2); min-height: 9rem; padding: var(--space-3); text-align: center; border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text-muted); }
:is(body.admin, body.platform) .media-add label { color: var(--color-accent); font-weight: 600; }
:is(body.admin, body.platform) .media-add { grid-template-columns: minmax(0, 1fr); }
:is(body.admin, body.platform) .media-add input[type=file] { width: 100%; min-width: 0; box-sizing: border-box; font-size: .8125rem; }
:is(body.admin, body.platform) .media-add small { font-size: .75rem; }
:is(body.admin, body.platform) .media-add-only { grid-column: 1 / -1; }
:is(body.admin, body.platform) .media-add:focus-within { border-color: var(--color-focus); }
@media (max-width: 39.99rem) {
  :is(body.admin, body.platform) .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(body.admin, body.platform) .media-add { grid-column: 1 / -1; }
}
/* Variantele grupate dupa culoare: randul grupului, apoi variantele lui, cu stocul editabil. */
:is(body.admin, body.platform) .variant-table :is(th, td) { padding-top: 8px; padding-bottom: 8px; vertical-align: middle; }
:is(body.admin, body.platform) .variant-table input { min-height: 36px; }
:is(body.admin, body.platform) .variant-table .w-price input { width: 7rem; }
:is(body.admin, body.platform) .variant-table .w-stock input { width: 6rem; }
:is(body.admin, body.platform) .variant-table .w-sku input { width: 9rem; }
:is(body.admin, body.platform) .variant-table tbody th { font-weight: 500; white-space: nowrap; }
:is(body.admin, body.platform) .variant-row.is-grouped th { padding-left: 52px; }
:is(body.admin, body.platform) .input-affix { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
:is(body.admin, body.platform) .input-affix > span { color: var(--color-text-muted); font-size: .875rem; }
:is(body.admin, body.platform) .group-row td { background: var(--color-surface-2); }
:is(body.admin, body.platform) .data-table tbody tr.group-row:hover { background: transparent; }
:is(body.admin, body.platform) .group-line { display: flex; align-items: center; gap: var(--space-3); }
:is(body.admin, body.platform) .group-name { font-weight: 600; }
:is(body.admin, body.platform) .group-name small { display: block; font-weight: 500; font-size: .8125rem; color: var(--color-text-muted); }
:is(body.admin, body.platform) .group-toggle { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
:is(body.admin, body.platform) .group-toggle[hidden] { display: none; }
:is(body.admin, body.platform) .group-toggle svg.i { transition: rotate var(--transition); }
:is(body.admin, body.platform) .group-toggle[aria-expanded="true"] svg.i { rotate: 90deg; }
@media (prefers-reduced-motion: reduce) { :is(body.admin, body.platform) .group-toggle svg.i { transition: none; } }
/* Cardurile care se deschid (GPSR, detaliile variantelor): titlul e rezumatul, cu starea alaturi. */
:is(body.admin, body.platform) details.card-details > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); min-height: 32px; font-weight: 700; font-size: 1.0625rem; }
:is(body.admin, body.platform) details.card-details > summary::-webkit-details-marker { display: none; }
:is(body.admin, body.platform) details.card-details > summary span { font-weight: 500; font-size: .875rem; color: var(--color-text-muted); }
:is(body.admin, body.platform) details.card-details > summary svg.i { margin-left: auto; color: var(--color-text-muted); transition: rotate var(--transition); }
:is(body.admin, body.platform) details.card-details[open] > summary { margin-bottom: var(--space-3); }
:is(body.admin, body.platform) details.card-details[open] > summary svg.i { rotate: 90deg; }
/* Previzualizarea in Google si stocul pe depozite. */
:is(body.admin, body.platform) .seo-preview { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4); background: var(--color-surface-2); overflow-wrap: anywhere; }
:is(body.admin, body.platform) .seo-url { font-size: .8125rem; color: var(--color-text-muted); }
:is(body.admin, body.platform) .seo-title { color: #1a3fa3; font-size: 1.125rem; margin: 4px 0 2px; }
:is(body.admin, body.platform) .seo-preview p { margin: 0; font-size: .875rem; color: var(--color-text-muted); }
:is(body.admin, body.platform) .big-number { margin: 0; font-size: 1.75rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:is(body.admin, body.platform) .stock-places { list-style: none; margin: var(--space-2) 0 0; padding: 0; font-size: .875rem; }
:is(body.admin, body.platform) .stock-places li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 8px 0; }
:is(body.admin, body.platform) .stock-places li + li { border-top: 1px solid var(--color-border); }
:is(body.admin, body.platform) .visibility-state { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
:is(body.admin, body.platform) .visibility-gaps { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
/* Comutatorul „Apare în magazin” (casuta cu role=switch) si meniul „Mai multe” (pe <details>), ca in macheta. */
:is(body.admin, body.platform) .switch-row { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-2); }
:is(body.admin, body.platform) input.switch { appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 1px 0 0; border: 0; border-radius: 13px; background: #6f6c66; cursor: pointer; transition: background var(--transition); }
:is(body.admin, body.platform) input.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: translate var(--transition); }
:is(body.admin, body.platform) input.switch:checked { background: #23824a; }
:is(body.admin, body.platform) input.switch:checked::after { translate: 18px 0; }
:is(body.admin, body.platform) .card-feature input.switch { background: #77746d; }
:is(body.admin, body.platform) .card-feature input.switch:checked { background: #5fc48a; }
:is(body.admin, body.platform) .card-feature input.switch:focus-visible { outline-color: var(--ink-text); }
@media (prefers-reduced-motion: reduce) { :is(body.admin, body.platform) input.switch, :is(body.admin, body.platform) input.switch::after { transition: none; } }
:is(body.admin, body.platform) .switch-text label { display: block; font-weight: 600; }
:is(body.admin, body.platform) .switch-text small { display: block; font-size: .875rem; }
:is(body.admin, body.platform) .menu-wrap { position: relative; }
:is(body.admin, body.platform) .menu-wrap > summary { list-style: none; cursor: pointer; }
:is(body.admin, body.platform) .menu-wrap > summary::-webkit-details-marker { display: none; }
:is(body.admin, body.platform) .menu-wrap > summary svg.i { margin: 0 0 0 var(--space-1); }
:is(body.admin, body.platform) .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 15; min-width: 14rem; padding: 8px; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); box-shadow: 0 12px 28px rgb(0 0 0 / .14); }
:is(body.admin, body.platform) .menu form { margin: 0; }
:is(body.admin, body.platform) .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: var(--color-text); font-size: .875rem; text-align: left; cursor: pointer; }
:is(body.admin, body.platform) .menu-item:hover { background: var(--color-surface-hover); }
/* Ordinea pozelor (P13): tras cu mouse-ul sau mutat cu butoanele de sub poza. */
:is(body.admin, body.platform) .media[draggable="true"] { cursor: grab; }
:is(body.admin, body.platform) .media.is-dragging { opacity: .5; }
:is(body.admin, body.platform) .media-move { display: flex; gap: var(--space-1); }
:is(body.admin, body.platform) .media-move[hidden] { display: none; }
:is(body.admin, body.platform) .media-move .btn { min-width: 32px; min-height: 32px; padding: 0 8px; }
:is(body.admin, body.platform) .media-move .btn svg.i { margin: 0; }

/* Controalele native in limbajul directiei C (QA P14, ADMIN-UI.md 4): casutele si butoanele radio pe culoarea primara, nu
   albastrul browserului; select-ul cu sageata proprie (chevron Tabler, culoarea textului secundar, 7:1 pe alb, peste
   3:1 cerut de WCAG 1.4.11); butonul campului de fisier ca pastila secundara. Textul acelui buton il da browserul, in
   limba interfetei lui; pagina nu il poate schimba. */
:is(body.admin, body.platform) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--color-primary); }
:is(body.admin, body.platform) select:not([multiple]):not([size]) {
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355534e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.875rem center; background-size: 1rem;
}
:is(body.admin, body.platform) input[type="file"]::file-selector-button {
  margin-right: var(--space-3); padding: 8px 16px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: 600; cursor: pointer;
}
:is(body.admin, body.platform) input[type="file"]::file-selector-button:hover { background: var(--color-surface-hover); }
/* Campul de fisier cu buton in romana (admin_file_pick): campul real, transparent, acopera randul; focusul se vede pe pastila. */
:is(body.admin, body.platform) .file-pick { position: relative; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
:is(body.admin, body.platform) .file-pick .file-pick-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; padding: 0; border: 0; }
:is(body.admin, body.platform) .file-pick:has(.file-pick-input:focus-visible) .file-pick-button { outline: 2px solid var(--color-focus); outline-offset: 2px; }
:is(body.admin, body.platform) .file-pick-name { color: var(--color-text-muted); font-size: .875rem; overflow-wrap: anywhere; }

/* Paginarea (QA P15, lotul 9): linkurile ca pastile secundare mici, pagina curenta ca text intre ele (ca in macheta, la
   subsolul listei). `nav.pager a` bate regula de tinta minima `nav[aria-label="Paginare"] a`, care ramane indeplinita (36px). */
:is(body.admin, body.platform) .pager { flex-wrap: wrap; gap: var(--space-2); font-size: .875rem; color: var(--color-text-muted); }
:is(body.admin, body.platform) nav.pager a {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .875rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); font-weight: 600;
  text-decoration: none; box-shadow: var(--shadow-control);
}
:is(body.admin, body.platform) nav.pager a:hover { background: var(--color-surface-hover); }
/* Mostrele de culoare (P13): cerc SVG cu inel gri (3:1 pe alb), gol si punctat cand valoarea nu are culoare. */
:is(body.admin, body.platform) svg.swatch { flex: none; vertical-align: middle; }
:is(body.admin, body.platform) svg.swatch circle { stroke: #6f6c66; stroke-width: 1.5; }
:is(body.admin, body.platform) svg.swatch circle.is-empty { stroke-dasharray: 3 2; }
:is(body.admin, body.platform) .swatch-fields { grid-column: 1 / -1; border: 0; padding: 0; margin: 0 0 var(--space-3); }
:is(body.admin, body.platform) .swatch-fields legend { font-weight: 600; padding: 0; margin-bottom: var(--space-1); }
:is(body.admin, body.platform) .swatch-field { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 var(--space-4) var(--space-2) 0; }
:is(body.admin, body.platform) .swatch-field label { font-weight: 500; }
:is(body.admin, body.platform) .swatch-field input[type=text] { width: 7rem; font-family: var(--font-mono); }
:is(body.admin, body.platform) .swatch-field input[type=color] { width: 32px; height: 32px; padding: 0; border: 1px solid var(--color-border-strong); border-radius: 8px; background: none; cursor: pointer; }
:is(body.admin, body.platform) .swatch-field input[type=color][hidden] { display: none; }