/* Design tokens — docs/editorial/business_blueprint/v1.0 §02 + foaia Design_System (DEC-179).
   Pilotul (M6) e prima aplicare reala a acestor tokens, nu un placeholder de revopsit la M7. */
:root {
  /* culoare — valorile exacte din blueprint, cu rolul lor declarat */
  --color-midnight: #0B1220; /* header, footer, titluri, incredere */
  --color-blue: #2563EB;     /* CTA principal, linkuri, stari active */
  --color-teal: #14B8A6;     /* match bun, furnizori, confirmari */
  --color-amber: #F59E0B;    /* oportunitati si atentionari non-critice */
  --color-red: #DC2626;      /* alerte juridice/fiscale critice, erori */
  --color-cloud: #F7FAFC;    /* fundal general */
  --color-white: #FFFFFF;    /* carduri si suprafete */
  --color-slate: #334155;    /* text principal */
  --color-slate-muted: #64748B; /* text secundar, derivat din Slate — nu e valoare din sursa */

  --bg: var(--color-cloud);
  --surface: var(--color-white);
  --ink: var(--color-slate);
  --ink-on-dark: var(--color-cloud);
  --muted: var(--color-slate-muted);
  --line: #E2E8F0;
  --accent: var(--color-blue);
  --accent-hover: #1D4ED8;
  --accent2: var(--color-teal);
  --amber: var(--color-amber);
  --danger: var(--color-red);

  /* tipografie */
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-size-body: 1rem;      /* 16-18px, blueprint §02 */
  --line-height-body: 1.55;
  color-scheme: light;

  /* spatiere — baza 8px (Design_System: Spacing/Base) */
  --space-unit: 8px;

  /* raza — Design_System: Radius/Cards 14-18px, CTA 10-12px */
  --radius-card: 16px;
  --radius-cta: 12px;

  /* umbra — Design_System: Shadow/Card "foarte discreta", fara glassmorphism */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .05);

  /* miscare — Design_System: Motion/Micro 150-250ms, transform/opacity */
  --motion-micro: 180ms;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.site-header {
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1rem, 5vw, 5rem);
  background: var(--color-midnight);
  color: var(--ink-on-dark);
  position: relative;
  z-index: 2;
}

/* Sigla unificata cu landing (mandat proprietar 2026-09-17, constatare
   post-deploy): app folosea o varianta TEXT ("B2B" alb + "IN" albastru,
   fara glob) - inconsistenta cu sigla completa de pe landing. Acelasi
   fisier sursa (`logo.webp`, sincronizat manual din
   deploy/landing/assets/logo.webp - cele doua proprietati sunt servite
   de infrastructuri diferite, un singur fisier fizic nu poate acoperi
   ambele; orice modificare viitoare a siglei se face in fisierul sursa
   de pe landing, apoi se re-copiaza aici, byte-identic, verificat prin
   sha256). Regula identica cu `.brand` din deploy/landing/assets/site.css. */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; height: 2.5rem; width: auto; }

/* Sigla + tara (mandat proprietar 2026-09-17, identic cu deploy/landing/
   assets/site.css): "ROMANIA" static, tricolor fix pe litere, fara nicio
   animatie. Aliniat la aceeasi inaltime ca sigla (imaginea .brand img,
   2.5rem/40px). Pragul existent de 760px (nav-toggle, DEC-324) verificat
   suficient si pentru clusterul marit brand+tara - la 800px, gap real
   masurat 56.7px fata de navigatia completa autentificata (Preturi/
   Panou/Prospectare/Liste salvate/Invitatii/Membri) - nicio ajustare de
   breakpoint necesara. */
.brand-country { display: inline-flex; align-items: center; gap: .6rem; }
.brand-country .divider { width: 1px; height: 1.8rem; background: rgba(247, 250, 252, .25); }
.brand-country .country-flag {
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 1.35rem;
  background-image: linear-gradient(90deg,
    #002B7F 0%, #002B7F 33.3%, #FCD116 33.3%, #FCD116 66.6%, #CE1126 66.6%, #CE1126 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--ink-on-dark);
  -webkit-text-fill-color: transparent;
}

/* Meniu hamburger pe mobil (DEC-324) - ascuns implicit (desktop), afișat
   doar sub 760px. `.site-nav` grupează cele două `<nav>`-uri existente
   într-un singur container, colapsabil pe mobil (js/nav_toggle.js). */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 5px;
  /* DEC-404 (raport CfC de emulare mobil, M1): 36x36 - sub pragul de 44x44
     (WCAG 2.2 SC 2.5.8), cea mai atinsă țintă tactilă de pe telefon. */
  width: 2.75rem;
  height: 2.75rem;
  padding: .5rem;
  border: none;
  background: transparent;
  cursor: pointer;
}
.nav-toggle-bar { display: block; height: 2px; background: var(--ink-on-dark); border-radius: 1px; }
.site-nav { display: flex; align-items: center; gap: 1.25rem; }
/* K2 (mandat corecturi homepage, 2026-09-24): lipsea `display:flex` pe
   `<nav>`-urile din interiorul `.site-nav` la desktop (exista doar sub
   media query-ul mobil, care presupunea o regula de baza inexistenta) -
   copiii se aliniau pe `vertical-align:baseline` implicit (inline), deci
   link-ul text "Autentificare" (fara padding) parea cu ~14px mai sus
   decat butonul "Creează cont" (44px inalt) de langa el. */
.site-nav nav { display: flex; align-items: center; gap: 1.25rem; }

nav { display: flex; gap: 1.25rem; }
nav a { color: #B9C2D6; text-decoration: none; }
nav a:hover { color: var(--ink-on-dark); }
/* feedback pilot sesiunea 2: .text-link mostenea culoarea gri deschisa
   gandita pentru header-ul intunecat - pe fundal alb (ex. panoul de start)
   citea ca link dezactivat, nu ca link functional. Stil propriu, pe
   fundal alb: culoarea de actiune + subliniere, ca orice link obisnuit. */
.text-link { color: var(--accent); text-decoration: underline; }
.text-link:hover { color: var(--accent-hover); }

/* DEC-491: badge "ai un raspuns" pe link-ul de navigatie Feedback -
   trebuie sa fie gasit, nu doar sa existe (cerinta explicita proprietar). */
.nav-badge { color: var(--amber); font-size: .7rem; vertical-align: super; }

.page-shell {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) 0;
  position: relative;
  z-index: 1;
}

.page-heading, .hero-card, .auth-card, .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
}
.page-heading, .hero-card, .auth-card { padding: clamp(1.5rem, 4vw, 3rem); margin-bottom: 1.5rem; }
.auth-card { max-width: 620px; margin-inline: auto; }
/* U1 (mandat lot UX, `DEC-535`): antetul dashboard-ului comprimat la o
   linie - padding/margine reduse fata de `.hero-card` obisnuit, ca sa
   lase loc casetei de cautare imediat dedesubt, fara derulare pe un
   laptop 1366x768. */
.hero-card-compact { padding: 1rem clamp(1.5rem, 4vw, 3rem); margin-bottom: .75rem; }
.hero-card-compact h1 { margin: 0; font-size: 1.4rem; }
.hero-card-compact .notice { margin: .5rem 0 0; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 800;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 4rem); /* 36-64px, Design_System H1 */
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: .25rem 0 1rem;
  color: var(--color-midnight);
}
h2 { margin-top: 0; }

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.5fr);
  gap: 1.25rem;
}
.panel { padding: 1.5rem; }
.panel-wide { min-width: 0; }

.stack-form { display: grid; gap: 1rem; }
/* CfC Partea A v2, MINOR 11: selectorul viza doar `> div` (randare
   `form.as_div`), dar majoritatea formularelor din `.stack-form` folosesc
   `form.as_p` (randare `<p>`) - regula nu se aplica deloc acolo, eticheta
   si campul cadeau pe randare implicita browser (inline, aliniere pe
   baseline) - cel mai vizibil pe un `<textarea>` inalt ("Descriere:"
   aparea lipita jos-stanga de caseta). Acum ambele randari primesc
   acelasi stivuit vertical. */
.stack-form > div,
.stack-form > p { display: grid; gap: .35rem; }
label { font-weight: 700; }

/* feedback pilot sesiunea 2, runda de scriere: campurile obligatorii nu
   aveau niciun marcaj vizibil - Django adauga class="required" pe eticheta
   (label_tag/as_p/as_div) cand Form.required_css_class = "required" e setat,
   fara nicio schimbare de sablon la campurile deja randate manual. */
label.required::after { content: " *"; color: var(--danger); }

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: .8rem 1rem;
  border-radius: .6rem;
  font: inherit;
}
/* DEC-399 (raport CfC §6.5): regulă globală lipsă - navigarea cu
   tastatura se baza doar pe `:focus` (declanșează și la click de mouse,
   nu doar la tastatură) cu contrast slab (.28 alpha albastru, aproape
   invizibil pe antetul întunecat `--color-midnight`). `:focus-visible`
   (suport modern universal) + contrast crescut. */
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .6);
  outline-offset: 2px;
}
/* Antetul e întunecat (`--color-midnight`) - conturul albastru standard
   nu are contrast suficient acolo; alb, cu offset mai mare, se vede clar
   pe fundal închis. */
.site-header a:focus-visible,
.site-header button:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 3px;
}

/* Defect vizual sistematic (verificare CfC onboarding, DEC-202): regula
   `input { width: 100% }` de mai sus se aplica si la checkbox/radio, care
   devin astfel late cat tot randul - textul etichetei e impins pe randul
   urmator, in loc sa stea langa patratel/buline. Fix o singura data pentru
   tot fluxul (pasii 3, 5, 6): checkbox/radio revin la marimea lor naturala,
   iar label-ul care le contine devine un rand flex (control + text aliniate
   pe aceeasi linie de baza). */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}
form label:has(> input[type="checkbox"]),
form label:has(> input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 400;
}

/* Rand-card intreg clicabil, cu stare vizuala clara pe selectat -
   reutilizat identic pe pasul 3 (CAEN) si pasul 5 (preferinte, DEC-204,
   acelasi tratament, cerut explicit la re-verificarea CfC). Doi
   containere posibile: `#id_caen_code_ids` (auto-generat de Django din
   numele campului, contine DOAR optiunile, fara eticheta proprie a
   grupului - de-asta ramane pe ID acolo, in loc sa invaluim tot
   `{{ form.as_p }}`, care ar amesteca grid-ul cu label-ul/erorile
   campului) si `.choice-card-list` (wrapper propriu, scris manual in
   template pentru preferinte, care nu are un id Django echivalent).
   `label:has(> input)` (nu doar `label`) exclude orice eticheta fara
   input direct inauntru - relevant daca vreodata containerul include si
   alt text. */
#id_caen_code_ids, .choice-card-list {
  display: grid;
  gap: .6rem;
}
#id_caen_code_ids label:has(> input),
.choice-card-list label:has(> input) {
  display: flex;
  align-items: center;
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  border-radius: .6rem;
  cursor: pointer;
}
#id_caen_code_ids label:has(input:checked),
.choice-card-list label:has(input:checked) {
  border-color: var(--accent);
  background: rgba(37, 99, 235, .06);
}

/* Erorile de formular (Django as_p implicit: <ul class="errorlist">) nu
   aveau nicio culoare distinctă de textul normal - acelasi tipar vizual
   ca .notice-error (verificare CfC, DEC-204). */
.errorlist {
  list-style: none;
  padding: .6rem .9rem;
  margin: 0 0 .5rem;
  border: 1px solid rgba(220, 38, 38, .35);
  background: rgba(220, 38, 38, .06);
  color: var(--danger);
  border-radius: .5rem;
  font-size: .9rem;
}
.errorlist li { margin: 0; }

.button, button[type="submit"], button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-cta);
  padding: .8rem 1.1rem;
  /* DEC-404 (raport CfC de emulare mobil, cost mic): 41-43px măsurat,
     sub pragul de 44px (WCAG 2.2 SC 2.5.8) - garantat explicit, nu doar
     rezultat implicit din padding+line-height. */
  min-height: 44px;
  background: var(--accent);
  color: var(--color-white);
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-micro) ease, transform var(--motion-micro) ease;
}
.button:hover, button[type="submit"]:hover, button:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
.button-secondary {
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent);
}
.button-secondary:hover { background: #EFF4FF; }
.button-quiet, .link-button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}
/* feedback Dashboard: `button[type="submit"]` (element+atribut, specificitate
   0,1,1) bate `.button-quiet` (o singura clasa, 0,1,0), indiferent de ordinea
   din foaia de stil - Deconectare aparea albastru, la fel de proeminent ca
   actiunile principale, desi avea deja clasa `.button-quiet`. Selector cu
   specificitate garantat mai mare decat regula de baza. */
button[type="submit"].button-quiet {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}
/* DEC-397 (raport CfC §6.4, /cont/ v2, P2): EXACT același bug de
   specificitate, niciodată reparat pentru `.button-secondary` - "Acceptă"
   și "Refuză" pe ecranul de răspuns la invitație aveau deja clase diferite
   în markup (`button`/`button-secondary`), dar `button[type="submit"]`
   (0,1,1) bătea `.button-secondary` (0,1,0), deci "Refuză" ieșea la fel
   de albastru și plin ca acțiunea constructivă - bug real, nu doar o
   clasă lipsă din markup. */
button[type="submit"].button-secondary {
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent);
}
button[type="submit"].button-secondary:hover {
  background: #EFF4FF;
}

/* TOTP - bloc de ghidaj "Nu ai o aplicatie de autentificare?" (colapsabil
   nativ, fara JS nou pentru starea deschis/inchis). */
details summary { cursor: pointer; font-weight: 600; margin-bottom: .5rem; }
.totp-help { padding: .5rem 0 1rem; }
.totp-help p { margin: 0 0 .5rem; }
.link-button { padding: .45rem .7rem; border-radius: .6rem; cursor: pointer; }

.action-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.notice {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: var(--color-cloud);
  color: var(--ink);
  margin-bottom: 1rem;
}
.notice-success { border-color: rgba(20, 184, 166, .35); background: rgba(20, 184, 166, .08); color: #0F766E; }
.notice-error { border-color: rgba(220, 38, 38, .35); background: rgba(220, 38, 38, .06); color: var(--danger); }

/* Triaj CfC final, item 1(d): contorul de locuri devine si vizual. */
.seat-counter--at-limit { color: #B45309; font-weight: 600; }
.seat-counter--over-limit { color: var(--danger); font-weight: 600; }

code { overflow-wrap: anywhere; color: var(--accent); }

.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .8rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-size: .8rem; text-transform: uppercase; }

.status {
  display: inline-flex;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: #EEF2F8;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 800;
}
.status-accepted { background: rgba(20, 184, 166, .12); color: #0F766E; }
.status-declined, .status-revoked, .status-cancelled { background: rgba(220, 38, 38, .1); color: #B91C1C; }

/* IDEA-011/M16 - insigna "Firma verificata". */
.badge-verified {
  display: inline-flex;
  align-items: center;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: rgba(20, 184, 166, .12);
  color: #0F766E;
  font-size: .78rem;
  font-weight: 800;
  cursor: help;
}

/* Dashboard de business v2 (§8.5 v2, DEC-304/331) - panoul de alerte
   permanent (sus, culoare pe nivel), grafic sparkline SVG/CSS pur (fara
   librarii) si actiunile pe rand din tabelul de utilizatori/facturare. */
.bd-alerts { margin-bottom: 1.5rem; }
.bd-alert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.bd-alert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  border-radius: .7rem;
  background: var(--color-cloud);
}
.bd-alert-dot { width: .7rem; height: .7rem; border-radius: 50%; margin-top: .3rem; flex: 0 0 auto; }
.bd-alert-body { display: flex; flex-direction: column; gap: .15rem; }
.bd-alert-body span:last-child { color: var(--muted); font-size: .9rem; }
.bd-alert-ok .bd-alert-dot { background: var(--accent2); }
.bd-alert-warning .bd-alert-dot { background: var(--amber); }
.bd-alert-warning { border-color: rgba(245, 158, 11, .35); }
.bd-alert-critical .bd-alert-dot { background: var(--danger); }
.bd-alert-critical { border-color: rgba(220, 38, 38, .35); background: rgba(220, 38, 38, .05); }

/* DEC-490: cardul "Feedback utilizatori" - evidentiat cand exista mesaje
   necitite, ca sa nu se piarda intre celelalte carduri de statistici. */
.bd-card-highlight { border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .05); }
.bd-badge-warning { color: var(--amber); font-size: 1.1rem; }
.bd-row-unread { background: rgba(245, 158, 11, .06); font-weight: 600; }

/* DEC-491: firul de conversatie feedback - bule simple, diferentiate doar
   prin aliniere si o dunga stanga colorata (owner vs utilizator). */
.bd-thread { display: flex; flex-direction: column; gap: .75rem; margin: 1rem 0 1.5rem; }
.bd-thread-message { border: 1px solid var(--line); border-radius: .6rem; padding: .75rem 1rem; max-width: 640px; }
.bd-thread-message-meta { margin: 0 0 .3rem; font-size: .8rem; color: var(--muted); }
.bd-thread-message-user { border-left: 3px solid var(--accent); }
.bd-thread-message-owner { border-left: 3px solid var(--accent2); align-self: flex-end; background: var(--color-cloud); }

.bd-chart { color: var(--accent); margin-bottom: 1rem; }
.sparkline { width: 100%; height: 60px; display: block; }

/* M20 Dashboard Business v2 (DEC-570, Felia 3) - fata unica a
   proprietarului; reutilizeaza tokenii existenti (:root), nu o paleta
   noua - machetă aprobată e specificație de continut/ordine, nu fisier
   vizual de copiat literal (mandat: "se construieste curat in stack-ul
   existent"). */
.bdv2-header { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.bdv2-header h1 { margin: 0; font-size: 1.6rem; }
.bdv2-owner-badge {
  padding: .25rem .6rem;
  border-radius: 999px;
  background: var(--color-midnight);
  color: var(--color-white);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bdv2-header-actions { margin-left: auto; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.bdv2-month-form { display: flex; gap: .4rem; align-items: center; }
.bdv2-section { margin-bottom: 1.25rem; }
.bdv2-section-title { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: 0 0 1rem; }
.bdv2-section-title h2 { margin: 0; font-size: 1.05rem; }
.bdv2-section-subtitle { font-size: .8rem; color: var(--muted); }
.bdv2-proposal-badge {
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, .14);
  color: #9A5B04;
  font-size: .7rem;
  font-weight: 700;
}

.bdv2-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1.25rem; }
.bdv2-kpi { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; }
.bdv2-kpi-label { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.bdv2-kpi-value { font-size: 1.7rem; font-weight: 800; color: var(--color-midnight); }
.bdv2-kpi-sub { font-size: .78rem; color: var(--ink); }

.bdv2-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.bdv2-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }

.bdv2-stat-tile { padding: .85rem 1rem; background: var(--color-cloud); border: 1px solid var(--line); border-radius: .7rem; }
.bdv2-stat-tile-label { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.bdv2-stat-tile-value { font-size: 1.3rem; font-weight: 800; color: var(--color-midnight); }

.bdv2-revenue-chart { display: flex; align-items: flex-end; gap: 1.3rem; height: 140px; padding: 0 .4rem; }
.bdv2-revenue-col { flex-grow: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.bdv2-revenue-bar { width: 100%; max-width: 56px; background: var(--accent); border-radius: .3rem .3rem 0 0; }
.bdv2-revenue-value { font-size: .72rem; font-weight: 700; color: var(--ink); }
.bdv2-revenue-month { font-size: .72rem; color: var(--muted); }

.bdv2-callout { padding: .75rem .9rem; background: var(--color-cloud); border: 1px solid var(--line); border-radius: .6rem; font-size: .85rem; }

.bdv2-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.bdv2-table th, .bdv2-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); text-align: left; }
.bdv2-table th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }

.bdv2-consumption-bars { display: flex; flex-direction: column; gap: .5rem; }
.bdv2-consumption-row { display: flex; align-items: center; gap: .75rem; }
.bdv2-consumption-name { width: 200px; flex-shrink: 0; font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bdv2-consumption-track { flex-grow: 1; height: .6rem; background: var(--line); border-radius: .4rem; }
.bdv2-consumption-fill { height: .6rem; background: var(--accent); border-radius: .4rem; }
.bdv2-consumption-numbers { width: 150px; flex-shrink: 0; font-size: .78rem; color: var(--muted); text-align: right; }

.bdv2-trend-chart { display: flex; align-items: flex-end; gap: 2px; height: 90px; }
.bdv2-trend-bar { flex-grow: 1; min-height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; }

.bdv2-admin-link {
  padding: .9rem 1rem;
  background: var(--color-cloud);
  border: 1px solid var(--line);
  border-radius: .7rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  color: inherit;
}
.bdv2-admin-link strong { color: var(--color-midnight); font-size: .9rem; }
.bdv2-admin-link span { font-size: .78rem; color: var(--muted); }

.bdv2-provider-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; background: var(--color-cloud); font-size: .78rem; font-weight: 600; }
.bdv2-provider-pill-nonzero { background: rgba(220, 38, 38, .08); color: var(--danger); }

@media (max-width: 760px) {
  .bdv2-kpis { grid-template-columns: 1fr 1fr; }
  .bdv2-grid-2, .bdv2-grid-3 { grid-template-columns: 1fr; }
  .bdv2-consumption-name, .bdv2-consumption-numbers { width: auto; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* AI-0.2 (mandat coordonator, 2026-10-01) - sloefuire UI chat, stil
   mesagerie: bule stanga/dreapta, iconite, separatoare de zi, ora pe
   fiecare bula. Reutilizeaza tokenii existenti (:root), nicio culoare
   noua hardcodata. */
.chat-history { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }
.chat-day-separator {
  text-align: center;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  margin: 1rem 0 .25rem;
}
.chat-row { display: flex; align-items: flex-end; gap: .5rem; max-width: 100%; }
.chat-row-user { flex-direction: row-reverse; align-self: flex-end; }
.chat-row-assistant { align-self: flex-start; }
.chat-avatar {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
}
.chat-avatar-user { background: var(--accent); color: var(--color-white); }
.chat-avatar-assistant { background: var(--color-cloud); border: 1px solid var(--line); color: var(--accent); }
.chat-message {
  max-width: 75%;
  border-radius: 1rem;
  padding: .6rem .9rem;
}
.chat-message > :first-child { margin-top: 0; }
.chat-message > :last-child { margin-bottom: 0; }
.chat-message-user {
  background: rgba(37, 99, 235, .12);
  color: var(--ink);
  border-bottom-right-radius: .25rem;
}
.chat-message-assistant {
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-left-radius: .25rem;
}
.chat-message-error {
  background: rgba(220, 38, 38, .08);
  border: 1px solid rgba(220, 38, 38, .35);
  color: var(--danger);
  border-bottom-left-radius: .25rem;
}
.chat-message-time {
  display: block;
  margin-top: .3rem;
  font-size: .68rem;
  color: var(--muted);
  text-align: right;
}
.chat-message-error .chat-message-time { color: inherit; opacity: .75; }
.chat-message-tool-note {
  align-self: flex-start;
  margin-left: 2.25rem;
  color: var(--muted);
  font-size: .82rem;
  font-style: italic;
}
/* Tabelele Markdown au voie sa depaseasca latimea bulei - scroll
   orizontal, nu inghesuite la 75% (mandat explicit). */
.chat-message-assistant table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

@media (max-width: 760px) {
  .chat-message { max-width: 85%; }
}

.bd-row-actions { display: flex; flex-direction: column; gap: .4rem; }
.bd-row-actions form { margin: 0; }
.bd-row-actions button { font-size: .8rem; padding: .4rem .7rem; }

.card-list { display: grid; gap: 1rem; }
.transfer-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.transfer-card h3 { margin: .5rem 0 .1rem; }
.transfer-card p { color: var(--muted); margin: .2rem 0 1rem; }
.transfer-card form { display: flex; gap: .5rem; align-items: center; }
.transfer-card input { width: 13rem; }

/* rezultate de cautare — cel mai apropiat de "cardul recomandare" existent azi
   in pilot; stiluri consecvente cu standardul de card (M6B_CAEN_RECOMMENDATIONS_DESIGN.md §8) */
.result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.result-item {
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: .3rem;
}
.score-explanation { color: var(--muted); font-size: .9rem; margin: .3rem 0 0; }
/* feedback pilot sesiunea 2: distinct vizual de .score-explanation - altfel
   "de ce" si "sursa/incredere" arata ca aceeasi propozitie repetata. */
.suggestion-meta { color: var(--muted); font-size: .78rem; margin: .15rem 0 0; }

/* CRM-1.2 (micro-fix post-CfC, 2026-09-26) - `.result-item` (grid) întindea
   orice copil direct de tip bloc pe toată lățimea rândului ("bandă"), inclusiv
   `<a class="button">` (Adaugă în CRM). `.result-item-actions` grupează
   acțiunile perechi (Adaugă în listă / Adaugă în CRM) într-un rând flex -
   fiecare control își păstrează dimensiunea naturală, ca la restul aplicației. */
.result-item-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .3rem;
}
/* Indicator „În CRM ✓" - puțin mai vizibil decât `.suggestion-meta` generic
   (gri neutru), fără să devină o acțiune (rămâne text, nu buton). */
.crm-status-badge { color: var(--accent); font-weight: 700; font-size: .85rem; }

/* Carduri "Administrare"/"Contul tău" (raport CfC `raport_cont_vizual_
   20260908.md` §1.3, DEC-391) - bug real măsurat: intrările erau `<div>`
   fără fundal/cursor/hover, cu ținta de click de 22px înălțime (sub
   pragul WCAG 2.2 SC 2.5.8 de 24×24px) și doar 11-41% din casetă
   clicabilă - descrierea, exact textul care convinge la click, nu făcea
   nimic. Ierarhia rămâne intenționat diferită de butoanele primare
   ("Caută firme"/"Liste salvate" rămân `.button` plin) - cardurile sunt
   a doua treaptă, nu o a treia variantă de buton. */
.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
}
/* DEC-404 (raport CfC de emulare mobil, cosmetic): sub ~900px,
   `auto-fill`/`minmax(220px, 1fr)` poate cădea la 1 coloană înainte de
   ~600px lățime utilă (padding-ul panoului scade spațiul disponibil) -
   2 coloane garantate explicit pe acest interval, desktopul (auto-fill,
   3-5 coloane) rămâne neatins. */
@media (min-width: 600px) and (max-width: 899px) {
  .admin-cards { grid-template-columns: repeat(2, 1fr); }
}
.admin-card {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  min-height: 64px;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.admin-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}
.admin-card:focus-visible {
  /* DEC-399: aliniat la contrastul global crescut */
  outline: 3px solid rgba(37, 99, 235, .6);
  outline-offset: 2px;
}
.admin-card__icon {
  flex-shrink: 0;
  color: var(--accent);
  line-height: 0;
}
.admin-card__title { font-weight: 700; display: block; }
.admin-card__meta { color: var(--muted); font-size: .85rem; display: block; margin-top: .15rem; }
@media (prefers-reduced-motion: reduce) {
  .admin-card { transition: none; }
  .admin-card:hover { transform: none; }
}

/* Combobox CAEN "pe înțeles" (DEC-395, `static/js/caen-search.js`) - listă
   de sugestii live, poziționată direct sub câmp (nu popover complex, fără
   librărie - relative/absolute simplu, pe tokenii casei). */
.caen-combobox__listbox {
  position: relative;
  z-index: 5;
  margin: -0.4rem 0 0.6rem;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  max-height: 16rem;
  overflow-y: auto;
}
.caen-combobox__option {
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.caen-combobox__option:last-child { border-bottom: none; }
.caen-combobox__option.is-active,
.caen-combobox__option:hover {
  /* DEC-404 (raport CfC combobox+P2, D5): fundalul vechi (`--bg`) era
     aproape identic cu fundalul listei (`--surface`) - contrast 1,04:1,
     opțiunea activă practic invizibilă la navigare cu tastatura. Fundal
     albastru pal + bară de accent pe stânga (`box-shadow inset`, nu
     `border` - nu împinge textul, fără reflow). */
  background: #dbeafe;
  box-shadow: inset 3px 0 0 var(--accent);
}
.caen-combobox__option mark {
  background: none;
  color: var(--accent);
  font-weight: 700;
}
.caen-combobox__selected:empty { display: none; }
.caen-combobox__empty {
  padding: 0.6rem 0.8rem;
  color: var(--muted);
  cursor: default;
}

/* Căutare CAEN în limbaj liber (DEC-496, `static/js/caen-free-text-
   search.js`) - reutilizează `.caen-combobox__listbox`/`__option` de mai
   sus, adaugă doar blocul de mesaj/prompt (necombinabil cu o opțiune). */
.caen-free-text-search { position: relative; }
.caen-free-text-search__listbox { max-height: 20rem; }
.caen-free-text-search__message {
  padding: 0.6rem 0.8rem;
  color: var(--muted);
  cursor: default;
  border-bottom: 1px solid var(--line);
}
.caen-free-text-search__message:last-child { border-bottom: none; }
.caen-free-text-search__message strong { color: inherit; font-weight: 700; }
.caen-free-text-search__option .suggestion-meta { display: block; margin-top: 0.15rem; }
.caen-free-text-search__note { font-style: italic; }
.caen-free-text-search__hint {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.25rem 0 0.75rem;
}

.inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
/* Indicator de progres onboarding (finisaj, verificare CfC DEC-202) */
.step-indicator {
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 .3rem;
}

@media (max-width: 760px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  /* Antetul (DEC-324, raport CfC): deficit ~97px la 375px fara meniu
     mobil - brandul se rupea pe doua randuri, "Prețuri" se suprapunea,
     "Invitații" iesea din banda. Randul ramane compact (brand + buton
     hamburger), navigatia colapseaza intr-un panou desfasurabil. */
  .site-header { padding-inline: 1rem; height: auto; min-height: 4.75rem; }
  .nav-toggle { display: flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    /* CfC Partea A v2, MINOR 7: gap:0 pe container + margin-top:1rem doar
       intre grupurile <nav> dadea spatiere inegala ("Prețuri"/"Panou"
       lipite, restul cu spatii mai mari) - un singur `gap` uniform, pe
       container ȘI in interiorul fiecarui <nav>, elimina diferenta. */
    gap: .75rem;
    background: var(--color-midnight);
    padding: 1rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .25);
  }
  .site-nav.is-open { display: flex; }
  .site-nav nav { flex-direction: column; align-items: stretch; gap: .25rem; }
  /* DEC-404 (raport CfC de emulare mobil, M2): ~25px înălțime pe link
     (doar textul, fără padding) - zona tactilă reală era mult sub linia
     vizibilă a rândului. Padding vertical pe tot rândul, nu doar pe text. */
  .site-nav nav a {
    display: block;
    padding: 12px 0;
  }
  .transfer-card form { align-items: stretch; flex-direction: column; }
  .transfer-card input { width: 100%; }
  /* Footer (DEC-320) - coloanele se stivuiesc, banda de jos rămâne
     compactă (fără margin-left:auto pe copyright, care ar lăsa spațiu
     gol pe o singură coloană îngustă). */
  .footer-columns { flex-direction: column; gap: calc(var(--space-unit) * 3); }
  .footer-bottom { gap: calc(var(--space-unit) * 2); }
  .footer-copyright { margin-left: 0; }

  /* DEC-404 (raport CfC de emulare mobil, M3): cardul de rezultat avea
     ~569px pe 375px lățime (20 firme = 37 ecrane de scroll) - cea mai
     mare parte venea din nota de consum repetată pe fiecare card (mutată
     o singură dată în antetul listei, `search.html`) + explicația lungă
     de scor, redundantă cu badge-ul „Potrivire N%" deja vizibil. Padding
     redus + explicația colapsată - ținta: 2-3 rezultate vizibile/ecran. */
  #search-results .result-item { padding: .6rem .75rem; gap: .15rem; }
  #search-results .result-item .score-explanation { display: none; }
}

@media (max-width: 480px) {
  /* Sub 480px, doua sub-coloane de linkuri Juridic ar taia textele mai
     lungi ("De ce apare un contact") - o singura coloana verticala. */
  .footer-col-nav-split { columns: 1; }
}

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

.htmx-indicator { opacity: 0; transition: opacity .15s ease; }
.htmx-request.htmx-indicator, .htmx-request .htmx-indicator { opacity: 1; }

/* Pagini legale — publicate v1.0/24 august 2026 (mandat proprietar,
   DEC-216), validate de avocat. Reutilizeaza tokenii existenti in loc sa
   redeclare font-family/box-sizing (deja globale pe :root/body) sau
   introduca o paleta noua - un singur loc, nu 7 <style> identice repetate
   pe fiecare pagina (asa cum veneau fragmentele originale). */
.legal-page { max-width: 820px; margin: 0 auto; padding: 40px 20px; line-height: 1.65; color: var(--ink); }
.legal-page h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.08; color: var(--color-midnight); margin: 0 0 8px; }
.legal-page .updated { color: var(--muted); margin-bottom: 32px; }
.legal-page h2 { font-size: 22px; line-height: 1.25; color: var(--color-midnight); margin: 34px 0 10px; }
.legal-page p { margin: 0 0 12px; }
.legal-page table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 14px; }
.legal-page th, .legal-page td { border: 1px solid var(--line); padding: 10px; vertical-align: top; }
.legal-page th { background: var(--color-midnight); color: var(--color-white); text-align: left; }
.legal-page a { color: var(--accent); }

/* Pagina publica de preturi (DEC-303) - 4 planuri, grid responsive, cate
   un card per plan (reutilizeaza .panel, nu redeclara padding/border). */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.pricing-card { display: flex; flex-direction: column; gap: .5rem; }
.pricing-card h2 { margin: 0; font-size: 1.15rem; }
.pricing-card .price { font-size: 1.6rem; font-weight: 700; color: var(--color-midnight); margin: .25rem 0; }
.pricing-card .price small { font-size: .95rem; font-weight: 400; color: var(--muted); }
.pricing-card .price-annual { font-size: .85rem; color: var(--muted); margin: -.25rem 0 .5rem; }
/* K3 (mandat corecturi homepage, 2026-09-24): `flex:1` (creste sa umple
   spatiul ramas cand cardul e intins la inaltimea celui mai inalt card
   din rand) + `display:grid` fara `align-content` explicit inseamna
   randurile grilei se intind implicit (`stretch`) sa umple acel spatiu -
   vizibil pe cardul Gratuit, cu mai putine beneficii decat planurile
   platite. Randurile raman compacte, sus. */
.pricing-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; flex: 1; align-content: start; }
.pricing-card li { padding-left: 1.1rem; position: relative; }
.pricing-card li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); }
.pricing-note { color: var(--muted); font-size: .9rem; margin-top: 1.5rem; }
.pricing-launch-offer { background: var(--color-cloud); border-left: 4px solid var(--accent); padding: 14px 16px; margin: 18px 0; }
.price-strike { color: var(--muted); font-weight: 400; text-decoration: line-through; font-size: 1.1rem; margin-right: .4rem; white-space: nowrap; }
/* DEC-404 (raport CfC de emulare mobil, cosmetic): "999 lei" se rupea
   între cifră și unitate pe ecran îngust - suma și unitatea rămân
   mereu pe același rând. */
.price-current { white-space: nowrap; }

/* Comutator lunar/anual, doar CSS (fara JS) - `.pricing-toggle` (parintele
   radio-urilor) trebuie sa fie fratele dinaintea `.pricing-grid` in DOM;
   `:has()` leaga starea radio-ului de interiorul containerului cu starea
   `.pricing-grid`-ului de langa el (DEC-306, suport larg in browsere 2026). */
.pricing-toggle { display: flex; gap: .5rem; align-items: center; margin: 1rem 0; }
.pricing-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pricing-toggle label { padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; font-size: .9rem; }
.pricing-toggle input:checked + label { background: var(--color-midnight); color: var(--color-white); border-color: var(--color-midnight); }
.pricing-toggle .badge { font-size: .75rem; opacity: .85; }
.price-cycle-annual { display: none; }
.pricing-toggle:has(#cycle-annual:checked) ~ .pricing-grid .price-cycle-monthly { display: none; }
.pricing-toggle:has(#cycle-annual:checked) ~ .pricing-grid .price-cycle-annual { display: block; }
.legal-note { background: var(--color-cloud); border-left: 4px solid var(--accent); padding: 14px 16px; margin: 18px 0; }

/* Footer global — link-uri permanente catre paginile legale pe toate
   paginile platformei (mandat proprietar 2026-08-24, DEC-216); pana acum
   erau accesibile doar din formularul de onboarding. */
.site-footer {
  margin-top: clamp(2rem, 6vw, 4rem);
  padding: 1.5rem clamp(1rem, 5vw, 5rem) 2rem;
  background: var(--color-midnight);
  color: var(--ink-on-dark);
}
.site-footer nav { flex-wrap: wrap; gap: .5rem 1.25rem; }
.site-footer a { color: #B9C2D6; text-decoration: none; font-size: .85rem; }
.site-footer a:hover { color: var(--ink-on-dark); }

/* Reorganizare pe coloane (DEC-320, mandat proprietar - "aglomerat,
   neaerisit") - Platformă / Juridic / Firmă, plus banda de jos separată
   (SAL + Netopia + copyright), pe tokenii casei. */
.footer-columns { display: flex; flex-wrap: wrap; gap: calc(var(--space-unit) * 5); }
.footer-col { flex: 1 1 180px; min-width: 160px; }
.footer-col-legal { flex: 1 1 300px; }
.footer-col h3 {
  margin: 0 0 calc(var(--space-unit) * 1.5);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-on-dark);
  opacity: .65;
}
.footer-col-nav { flex-direction: column; align-items: flex-start; gap: calc(var(--space-unit) * 1); }
/* Coloana Juridic revine la toate cele 10 pagini (proprietarul a revenit
   asupra reducerii la 6, verificare vizuala CfC 2026-09-02) - doua
   sub-coloane pentru aerisire, nu o lista lunga verticala. */
.footer-col-nav-split {
  display: block;
  columns: 2;
  column-gap: calc(var(--space-unit) * 3);
}
.footer-col-nav-split a { display: block; margin-bottom: calc(var(--space-unit) * 1); break-inside: avoid; }
.footer-company { margin: 0; line-height: 1.6; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--space-unit) * 3);
  margin-top: calc(var(--space-unit) * 4);
  padding-top: calc(var(--space-unit) * 2.5);
  border-top: 1px solid rgba(247, 250, 252, .12);
}
.footer-sal { display: flex; align-items: center; gap: calc(var(--space-unit) * 1); margin: 0; }
.footer-sal img { height: 32px; width: auto; }
.footer-copyright { margin: 0 0 0 auto; opacity: .6; font-size: .8rem; }
/* Sigla NETOPIA (DEC-313) - varianta alba (np-white-0.svg), aliniata cu
   restul benzii de subsol. */
.footer-netopia-logo { height: 30px; width: auto; vertical-align: middle; }

/* DEC-405 (lot Invitații) - link/cod/mesaj gata de trimis, la generare
   ȘI în istoric cât timp invitația e Pending. */
.invitation-reveal {
  display: grid;
  gap: .75rem;
  margin: .75rem 0;
}
.invitation-reveal__item {
  display: grid;
  gap: .3rem;
  padding: .75rem;
  background: var(--bg);
  border-radius: .6rem;
}
.invitation-reveal__label { font-weight: 700; font-size: .85rem; }
.invitation-reveal__value {
  word-break: break-all;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}
.invitation-reveal__message {
  white-space: pre-wrap;
  font-family: inherit;
  margin: 0;
  word-break: break-word;
}

/* DEC-405 (lot Invitații + onboarding) - cerințele de parolă, vizibile
   înainte de tastare, cu bifă live (`.is-met`) pe cele verificabile. */
.password-requirements { list-style: none; margin: .3rem 0 1rem; padding: 0; display: grid; gap: .25rem; }
.password-requirements li { color: var(--muted); font-size: .85rem; }
.password-requirements li[data-requirement]::before { content: "○ "; }
.password-requirements li[data-requirement].is-met { color: var(--color-teal); }
.password-requirements li[data-requirement].is-met::before { content: "✓ "; }
.password-requirements__static { font-size: .78rem; }

/* DEC-485 (sprint de conformitate checkout, raport CfC final 2026-09-21):
   rezumatul comenzii (R2) + checkbox-urile obligatorii de consimțământ
   (R1), inainte de "Continua spre plata". */
.checkout-summary-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.checkout-consent { display: grid; gap: .5rem; margin: 1rem 0; }
.checkbox-field { margin: 0; }
.checkbox-field label { display: flex; align-items: flex-start; gap: .5rem; font-weight: normal; }
.checkbox-field input[type="checkbox"] { margin-top: .2rem; flex-shrink: 0; }
.checkbox-field.field-error { color: var(--danger); }