/*!
 * ads.codex — sistemul de design (documentul 04 §4–§5). Toate culorile sunt tokeni; componentele nu au culori
 * scrise direct. Teme: data-theme="light" | "dark" | "system" pe <html> (scriptul din <head> evită „flash-ul”).
 * Fonturile IBM Plex sunt găzduite local (GDPR, viteză); licența SIL OFL 1.1 în /fonts/plex/.
 */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex/ibm-plex-sans-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plex/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plex/ibm-plex-sans-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plex/ibm-plex-sans-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plex/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plex/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plex/ibm-plex-sans-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex/ibm-plex-mono-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* ─── 4.1 / 4.2 Tokeni de culoare ─────────────────────────────────────────── */
:root, [data-theme="light"] {
  color-scheme: light;
  --canvas: #F4F6F5; --surface: #FFFFFF; --subtle: #EBEFED; --line: #DCE3E0; --line-strong: #C3CDC9;
  /* field-border: marginea câmpurilor de formular, ≥ 3:1 (WCAG 1.4.11); line-strong (doc. 04) avea 1,6:1. */
  --field-border: #84918B;
  --ink: #14211D; --ink-2: #3F4D47; --ink-3: #5C6A64;
  --brand: #0B7A67; --brand-hover: #096453; --brand-soft: #E3F3EF; --on-brand: #FFFFFF;
  --spend: #2F55D4; --spend-soft: #EAF0FE;
  --success: #237A32; --success-soft: #E5F3E7; --warning: #9A5B00; --warning-soft: #FFF2D9; --danger: #B32E25; --danger-soft: #FDECEA;
  --shadow-float: 0 6px 20px rgb(0 0 0 / .10); --shadow-modal: 0 16px 48px rgb(0 0 0 / .18);
}
[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0D1412; --surface: #141D1A; --subtle: #1B2723; --line: #28362F; --line-strong: #3A4A43;
    --field-border: #5A6A63;
  --ink: #E8EFEC; --ink-2: #B3C0BA; --ink-3: #8A9A93;
  --brand: #3CC4A3; --brand-hover: #55D3B4; --brand-soft: #12332C; --on-brand: #062019;
  --spend: #86A2FF; --spend-soft: #1A2445;
  --success: #6FD283; --success-soft: #12301A; --warning: #F2B84B; --warning-soft: #33270D; --danger: #FF8F86; --danger-soft: #3A1714;
}
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    color-scheme: dark;
    --canvas: #0D1412; --surface: #141D1A; --subtle: #1B2723; --line: #28362F; --line-strong: #3A4A43;
    --field-border: #5A6A63;
    --ink: #E8EFEC; --ink-2: #B3C0BA; --ink-3: #8A9A93;
    --brand: #3CC4A3; --brand-hover: #55D3B4; --brand-soft: #12332C; --on-brand: #062019;
    --spend: #86A2FF; --spend-soft: #1A2445;
    --success: #6FD283; --success-soft: #12301A; --warning: #F2B84B; --warning-soft: #33270D; --danger: #FF8F86; --danger-soft: #3A1714;
  }
}

/* ─── 4.3 Tipografie, 4.4 spațiere și raze ────────────────────────────────── */
:root { --r-field: 6px; --r-panel: 10px; --r-modal: 16px; --r-pill: 999px; --ease: cubic-bezier(.2, .8, .2, 1); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 400 15px/24px 'IBM Plex Sans', system-ui, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--ink); font-weight: 600; margin: 0 0 12px; }
h1 { font-size: 28px; line-height: 34px; margin-bottom: 16px; }
h2 { font-size: 20px; line-height: 28px; }
h3 { font-size: 16px; line-height: 24px; }
@media (max-width: 639px) { h1 { font-size: 24px; line-height: 30px; } h2 { font-size: 18px; line-height: 26px; } }
p { margin: 0 0 12px; }
a { color: var(--brand); text-underline-offset: 2px; }
a:hover { color: var(--brand-hover); }
code, pre, kbd, .mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
pre { background: var(--subtle); border: 1px solid var(--line); border-radius: var(--r-field); padding: 12px 14px; overflow-x: auto; line-height: 20px; }
:not(pre) > code { background: var(--subtle); border-radius: 4px; padding: 1px 5px; }
.muted, small { color: var(--ink-3); font-size: 13px; line-height: 18px; }
.lead { font-size: 18px; line-height: 28px; color: var(--ink-2); max-width: 68ch; }
.tabular, table, .money, .kpi { font-variant-numeric: tabular-nums; }
.money { font-weight: 500; } .money .currency { font-weight: 400; color: var(--ink-3); }
.kpi { font-size: 30px; line-height: 36px; font-weight: 500; }
.money-xl { font-size: 40px; line-height: 44px; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 639px) { .kpi { font-size: 26px; line-height: 32px; } .money-xl { font-size: 32px; line-height: 36px; } }
.money-in { color: var(--brand); } .money-out { color: var(--spend); }

/* Focus vizibil pe toate elementele interactive (4.4) */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
a:focus-visible, button:focus-visible, .btn:focus-visible { border-radius: var(--r-field); }

/* ─── Layout ──────────────────────────────────────────────────────────────── */
.wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }
@media (min-width: 768px) { .wrap { padding: 32px 24px 64px; } }
.wrap-wide { max-width: 1280px; }
.narrow { max-width: 440px; margin: 40px auto; }
.row { display: flex; gap: 16px; flex-wrap: wrap; } .row > * { flex: 1 1 220px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.topbar > strong:first-child { font-size: 20px; line-height: 28px; font-weight: 600; }
.scroll { overflow-x: auto; }

/* ─── 5.5 Panou ───────────────────────────────────────────────────────────── */
.card, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 20px; margin-bottom: 16px; }
.card > h2:first-child, .panel > h2:first-child { font-size: 16px; line-height: 24px; }
@media (max-width: 639px) { .card, .panel { padding: 16px; } }

/* ─── 5.1 Buton ───────────────────────────────────────────────────────────── */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
  margin-top: 16px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-field);
  background: var(--brand); color: var(--on-brand); font: 500 15px/1 'IBM Plex Sans', system-ui, sans-serif;
  cursor: pointer; text-decoration: none; transition: background-color 120ms var(--ease), border-color 120ms var(--ease);
}
button:hover, .btn:hover { background: var(--brand-hover); color: var(--on-brand); }
.btn-light, .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--field-border); }
.btn-light:hover, .btn-secondary:hover { background: var(--subtle); color: var(--ink); }
.btn-quiet { background: transparent; color: var(--brand); border-color: transparent; }
.btn-quiet:hover { background: var(--brand-soft); color: var(--brand-hover); }
.btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { background: var(--danger); filter: brightness(.92); color: #fff; }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 14px; } .btn-lg { min-height: 48px; padding: 0 22px; font-size: 16px; }
button:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
@media (max-width: 639px) { button, .btn { min-height: 44px; } }

/* ─── 5.2 Câmpuri de formular ─────────────────────────────────────────────── */
label { display: block; color: var(--ink); font-weight: 500; font-size: 14px; line-height: 20px; margin: 14px 0 6px; }
input, select, textarea {
  width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--field-border); border-radius: var(--r-field);
  background: var(--surface); color: var(--ink); font: 400 15px/22px 'IBM Plex Sans', system-ui, sans-serif;
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
textarea { min-height: 96px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
input[type="checkbox"], input[type="radio"] { width: 20px; min-height: 20px; height: 20px; padding: 0; margin: 0 8px 0 0; accent-color: var(--brand); flex: none; }
label.inline, .inline { display: flex; align-items: center; font-weight: 400; gap: 0; }
/* Ținta de atingere (WCAG 2.2, 2.5.8): rândurile cu căsuțe de bifat au cel puțin 28 px, deci căsuțele vecine nu se apropie sub 24 px. */
label.inline:has(> input[type="checkbox"]), label.inline:has(> input[type="radio"]) { min-height: 28px; }
input[type="file"] { padding: 6px; }
@media (max-width: 639px) { input, select, textarea { min-height: 44px; font-size: 16px; } }

/* ─── 5.6 Tabel ───────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
th { text-align: left; font-weight: 500; color: var(--ink-2); background: var(--subtle); padding: 10px 12px; border-bottom: 1px solid var(--line); }
td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }
.scroll > table, .card > table { margin: 0; }

/* ─── 5.3 Badge de stare ──────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--subtle); color: var(--ink-2); font-size: 13px; line-height: 20px; font-weight: 500; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--spend-soft); color: var(--spend); }
.badge-brand { background: var(--brand-soft); color: var(--brand); }

/* ─── 5.11 Alerte ─────────────────────────────────────────────────────────── */
.errors, .status, .alert, .notice {
  border-radius: var(--r-panel); padding: 12px 16px; margin-bottom: 16px; border: 1px solid transparent; font-size: 14px; line-height: 20px;
}
.errors, .alert-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.status, .alert-success { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 25%, transparent); }
.alert-warning { background: var(--warning-soft); color: var(--warning); }
.alert-info, .notice { background: var(--spend-soft); color: var(--ink); border-left: 4px solid var(--spend); }

/* ─── 5.17 Bară de buget ──────────────────────────────────────────────────── */
.budget-bar { height: 6px; border-radius: var(--r-pill); background: var(--subtle); overflow: hidden; }
.budget-bar > span { display: block; height: 100%; background: var(--spend); }
.budget-bar.is-warning > span { background: var(--warning); } .budget-bar.is-danger > span { background: var(--danger); }

/* ─── Benzi de sistem (impersonare, sandbox) ──────────────────────────────── */
.impersonation { background: var(--warning); color: #fff; padding: 8px 16px; text-align: center; font-size: 14px; }
.impersonation button { margin: 0 0 0 12px; min-height: 28px; padding: 0 10px; background: #fff; color: var(--warning); }
.sandbox-ribbon { background: #5B3CC4; color: #fff; padding: 6px 16px; text-align: center; font-size: 14px; }
.sandbox-ribbon a { color: #fff; }

/* ─── Subsolul ecranelor din aplicație: limbă și temă (5.19) ─────────────── */
.app-footer { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 32px; font-size: 13px; color: var(--ink-3); }
.app-footer a { color: var(--ink-3); text-decoration: none; } .app-footer a.on { color: var(--ink); font-weight: 600; }
.theme-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px; background: var(--surface); }
.theme-switch button { margin: 0; min-height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: transparent; color: var(--ink-3); font-size: 13px; }
.theme-switch button[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand); }
@media (max-width: 639px) { .theme-switch button { min-height: 36px; } }
.temp { display: none; }
.lang { text-align: center; } .lang a { margin: 0 6px; color: var(--ink-3); } .lang a.on { color: var(--ink); font-weight: 600; text-decoration: none; }

/* ─── Paginile publice (8.1) ──────────────────────────────────────────────── */
.public header { background: var(--surface); border-bottom: 1px solid var(--line); }
.public .wrap { max-width: 1120px; padding-top: 0; padding-bottom: 0; }
.public header .wrap { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.public nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px; }
.public nav a { color: var(--ink-2); text-decoration: none; } .public nav a:hover { color: var(--ink); }
.public .brand { font-weight: 600; font-size: 20px; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.public .langs a { margin-left: 10px; font-size: 14px; color: var(--ink-3); text-decoration: none; } .public .langs a[aria-current] { color: var(--ink); font-weight: 600; }
.public main { padding: 48px 0 64px; }
.public main h1 { font-size: 48px; line-height: 52px; letter-spacing: -0.02em; max-width: 22ch; }
@media (max-width: 639px) { .public main h1 { font-size: 34px; line-height: 38px; } }
.public main h2 { margin-top: 40px; }
.public .cta { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: var(--r-field); background: var(--brand); color: var(--on-brand); text-decoration: none; font-weight: 500; margin: 8px 8px 0 0; }
.public .cta:hover { background: var(--brand-hover); color: var(--on-brand); }
.public .cta.light { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.public .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 24px; }
.public footer { border-top: 1px solid var(--line); padding: 24px 0; font-size: 14px; color: var(--ink-3); background: var(--surface); }
.public footer a { margin-right: 16px; color: var(--ink-2); }

/* ─── 4.7 Mișcare redusă ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ─── 8.3 Shell-ul aplicației: bară laterală 264 px, bară de sus, conținut ─── */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--surface); color: var(--ink); padding: 8px 12px; border-radius: var(--r-field); box-shadow: var(--shadow-float); }
.skip-link:focus { left: 8px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--brand); font-weight: 600; font-size: 18px; }
.logo > span { color: var(--ink); letter-spacing: -0.01em; }
.auth-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding-top: 40px; }
.auth-logo { text-decoration: none; }
.auth-shell .wrap { width: 100%; }
.auth-shell .narrow { margin-top: 24px; }
.admin-band { background: var(--ink); color: var(--canvas); text-align: center; font-size: 13px; line-height: 20px; padding: 4px 16px; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 264px; flex: none; background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 16px; padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; }
.sidebar-logo { text-decoration: none; }
.sidebar-close { display: none; }
.icon-btn { margin: 0; min-height: 40px; min-width: 40px; padding: 0; }
.role-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--subtle); border-radius: var(--r-field); }
.role-switch form { margin: 0; display: contents; }
.role-switch a, .role-switch button {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; margin: 0; padding: 0 6px;
  border-radius: 4px; font-size: 13px; font-weight: 500; color: var(--ink-2); background: transparent; text-decoration: none; border: 0;
}
.role-switch a[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.role-switch .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.role-switch .role-advertiser .dot { background: var(--spend); }
.role-switch .role-activate { color: var(--ink-3); } .role-switch .role-activate:hover { background: var(--surface); color: var(--ink); }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a {
  display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 12px; border-radius: var(--r-field);
  color: var(--ink-2); text-decoration: none; font-size: 15px; border-left: 3px solid transparent;
}
.sidebar-nav a:hover { background: var(--subtle); color: var(--ink); }
.sidebar-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); border-left-color: var(--brand); font-weight: 500; }
.nav-count { min-width: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--warning-soft); color: var(--warning); font-size: 12px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding: 12px 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.sidebar-foot a { color: var(--ink-2); text-decoration: none; padding: 4px 0; } .sidebar-foot a:hover { color: var(--ink); }
.sidebar-user { color: var(--ink-3); font-size: 13px; padding-top: 4px; }
.sidebar-foot form { margin: 0; } .sidebar-foot .btn-quiet { margin: 0; min-height: 32px; padding: 0; justify-content: flex-start; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 0 32px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px);
}
.topbar-spacer { flex: 1; }
.menu-btn { display: none; }
.balance { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.balance-label { color: var(--ink-3); }
.balance .money { font-size: 15px; }
.balance .btn { margin: 0; }
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; color: var(--ink-2); border-radius: var(--r-field); }
.bell:hover { background: var(--subtle); color: var(--ink); }
.bell-count { position: absolute; top: 4px; right: 2px; min-width: 18px; padding: 0 4px; border-radius: var(--r-pill); background: var(--danger); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.app-content { flex: 1; }
.app-content .wrap { max-width: 1080px; margin: 0; padding: 32px; }
.mode-admin .app-content .wrap { max-width: 1280px; }
.app-main .app-footer { margin: 0; padding: 16px 32px 32px; justify-content: flex-start; }
.drawer-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / .4); z-index: 40; }

@media (max-width: 1023px) {
  .sidebar { position: fixed; z-index: 50; left: 0; top: 0; width: 85%; max-width: 320px; transform: translateX(-100%); transition: transform 200ms var(--ease); box-shadow: var(--shadow-modal); }
  .sidebar.is-open { transform: none; }
  .sidebar-close, .menu-btn { display: inline-flex; }
  .app-topbar { padding: 0 16px; gap: 8px; }
  .app-content .wrap { padding: 24px 16px 48px; }
  .app-main .app-footer { padding: 16px; }
}
@media (max-width: 639px) {
  .balance-label { display: none; }
  .balance .btn { min-height: 36px; }
}

/* Aliasuri pentru ecranele vechi care folosesc numele de culori din layoutul temporar (până la refacerea lor). */
:root { --accent: var(--brand); --ok: var(--success); --muted: var(--ink-3); --card: var(--surface); --text: var(--ink); --bg: var(--canvas); }

/* ─── 5.9 „Urma leului”: noduri legate printr-o linie; verde = intră, albastru = ies, comision neutru; punctat = în așteptare ─── */
.trail { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
.trail-node { position: relative; padding: 18px 16px 4px 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trail-node::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; border-top: 2px solid var(--trail-line, var(--line-strong)); }
.trail-node::after { content: ""; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--trail-line, var(--line-strong)); }
.trail-node:last-child::before { right: auto; width: 12px; }
.trail-node.tone-in { --trail-line: var(--brand); } .trail-node.tone-out { --trail-line: var(--spend); } .trail-node.tone-neutral { --trail-line: var(--ink-2); }
.trail-node.is-dashed::before { border-top-style: dashed; }
.trail-node.is-dashed::after { border-style: dashed; }
.trail-label { font-size: 13px; line-height: 18px; color: var(--ink-2); font-weight: 500; }
.trail-amount { font-size: 22px; line-height: 28px; font-weight: 500; overflow-wrap: anywhere; }
.tone-in .trail-amount .amount { color: var(--brand); } .tone-out .trail-amount .amount { color: var(--spend); }
.trail-caption { font-size: 12px; line-height: 16px; color: var(--ink-3); }
@media (max-width: 767px) {
  .trail { grid-auto-flow: row; grid-auto-columns: auto; }
  .trail-node { padding: 0 0 16px 28px; }
  .trail-node::before { top: 12px; bottom: 0; left: 5px; right: auto; border-top: 0; border-left: 2px solid var(--trail-line, var(--line-strong)); }
  .trail-node.is-dashed::before { border-left-style: dashed; }
  .trail-node:last-child::before { display: none; }
  .trail-node::after { top: 2px; }
}

/* ─── Antetul paginii (8.3): h1 + descriere + acțiunea primară în dreapta ─── */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1 { margin-bottom: 4px; } .page-head p { margin: 0; } .page-head .btn { margin: 0; }
.section-title { margin: 40px 0 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.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; }

/* ─── 5.4 Indicator ───────────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat-label { font-size: 13px; line-height: 18px; color: var(--ink-3); }
.stat-value { overflow-wrap: anywhere; } .stat-value .currency { font-size: 14px; font-weight: 400; color: var(--ink-3); }
.stat-change { font-size: 13px; line-height: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ─── 4.6 Grafic ──────────────────────────────────────────────────────────── */
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.chart { width: 100%; height: 160px; display: block; margin: 8px 0; }
.chart .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .line-current { stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.chart-impressions .line-current { stroke: var(--spend); }
.chart .line-previous { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.chart-legend { font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .key { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--brand); margin-left: 8px; }
.chart-impressions ~ * .key-current, .panel .key-current { border-top-color: var(--spend); }
.chart-legend .key-previous { border-top: 2px dashed var(--ink-3); }
.chart-table summary { cursor: pointer; color: var(--brand); font-size: 14px; }

/* ─── Prezentarea: cont nou, atenție, coloane ────────────────────────────── */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.choice form { margin: 0; } .choice .btn, .choice button { margin-top: 8px; }
.steps { margin: 0; padding-left: 20px; } .steps li { margin: 6px 0; }
.getting-started ol { margin: 0; padding-left: 20px; } .getting-started li { margin: 6px 0; }
.dash-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.dash-columns .panel { margin-bottom: 0; }
.attention ul { margin: 0; padding-left: 18px; } .attention li { margin: 6px 0; }

/* ─── 5.6b Stare goală ────────────────────────────────────────────────────── */
.empty { text-align: center; padding: 24px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.empty h3 { margin: 8px 0 0; } .empty p { max-width: 40ch; } .empty .btn { margin-top: 8px; }

/* ─── 5.6 Tabel de date: numere la dreapta; pe telefon fiecare rând devine un card ─── */
.panel-flush { padding: 0; overflow: hidden; }
.panel-flush > .empty { padding: 32px 16px; }
table.data { width: 100%; }
table.data thead th { white-space: nowrap; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--subtle) 50%, transparent); }
table.data td { vertical-align: middle; }
table.data td.actions { text-align: right; white-space: nowrap; } table.data td.actions .btn { margin: 0; }
table.data .primary a { font-weight: 500; text-decoration: none; } table.data .primary a:hover { text-decoration: underline; }
@media (max-width: 639px) {
  table.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
  table.data tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  table.data tr:last-child { border-bottom: 0; }
  table.data td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: right; }
  table.data td::before { content: attr(data-label); color: var(--ink-3); font-size: 13px; text-align: left; flex: none; }
  table.data td.primary { display: block; text-align: left; padding-bottom: 6px; }
  table.data td.primary::before, table.data td.actions::before { content: none; }
  table.data td.actions { justify-content: flex-start; padding-top: 8px; }
  table.data td.actions .btn { width: 100%; }
}

/* ─── 5.7 Stepper ─────────────────────────────────────────────────────────── */
.stepper { list-style: none; display: flex; gap: 8px; margin: 0 0 20px; padding: 0; overflow-x: auto; }
.stepper li { flex: 1 1 0; min-width: 110px; }
.stepper a, .stepper li > span { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 3px solid var(--line); color: var(--ink-3); text-decoration: none; font-size: 14px; }
.stepper .step-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--field-border); font-size: 13px; flex: none; }
.stepper .is-done a, .stepper .is-done > span { border-top-color: var(--brand); color: var(--ink-2); }
.stepper .is-done .step-num { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.stepper .is-current > span, .stepper .is-current a { border-top-color: var(--brand); color: var(--ink); font-weight: 500; }
.stepper .is-current .step-num { border-color: var(--brand); color: var(--brand); }
@media (max-width: 639px) { .stepper .step-name { display: none; } .stepper .is-current .step-name { display: inline; } .stepper li { min-width: 0; } .stepper li.is-current { flex: 3 1 0; } }

/* ─── Asistentul: formular + rezumat lipicios (≥ 1024 px), rezumat sub formular pe ecrane mici ─── */
.wizard { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.wizard-summary { position: sticky; top: 80px; }
@media (max-width: 1023px) { .wizard { grid-template-columns: minmax(0, 1fr); } .wizard-summary { position: static; } }
.wizard-summary .preview { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.wizard-summary .preview img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--subtle); }
.summary-list { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.summary-list > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; }
.summary-list dt { color: var(--ink-3); } .summary-list dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.wizard-summary .alert { margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.wizard-summary .alert .btn { margin: 0; }
.checklist { margin: 12px 0 0; padding-left: 20px; font-size: 14px; } .checklist li { margin: 4px 0; }
.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.radio-card { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid var(--field-border); border-radius: var(--r-panel); font-weight: 400; cursor: pointer; margin: 0; }
.radio-card:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.radio-card input { margin-top: 3px; } .radio-card > span { display: flex; flex-direction: column; gap: 2px; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .presets button { margin: 0; }
.summary-section { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.summary-section .btn { margin: 0; } .summary-value { font-weight: 500; overflow-wrap: anywhere; }
label.accept { margin-top: 16px; }
.final-url code { overflow-wrap: anywhere; }

/* ─── W01 Pagina principală ───────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 899px) { .hero { grid-template-columns: minmax(0, 1fr); } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; } .hero-actions .cta { margin: 0; }
.calculator h2 { font-size: 16px; } .calc-result { margin: 16px 0 8px; font-size: 15px; } .calc-result .money-xl { color: var(--spend); }
.band { margin-top: 56px; } .band > h2 { margin-bottom: 16px; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.api-band { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .api-band h2 { margin: 0 0 4px; }
.faq { border-bottom: 1px solid var(--line); padding: 12px 0; } .faq summary { cursor: pointer; font-weight: 500; } .faq p { margin: 8px 0 0; color: var(--ink-2); }
.final-cta { text-align: center; padding: 40px 16px; background: var(--brand-soft); border-radius: var(--r-panel); } .final-cta .hero-actions { justify-content: center; }

/* ─── 5.12 Tab-uri ────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 16px; overflow-x: auto; }
.tabs[hidden] { display: none; }
.tabs [role="tab"] { margin: 0; min-height: 44px; padding: 0 16px; border-radius: 0; background: transparent; color: var(--ink-2); border: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs [role="tab"]:hover { background: var(--subtle); color: var(--ink); }
.tabs [role="tab"][aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
[role="tabpanel"][hidden] { display: none; }

/* ─── A04 / A11: detaliul campaniei, tabelul bannerelor ──────────────────── */
.head-actions { display: flex; flex-wrap: wrap; gap: 8px; } .head-actions form { margin: 0; } .head-actions .btn, .head-actions button { margin: 0; }
.page-head h1 .badge { vertical-align: middle; margin-left: 8px; font-size: 13px; }
.panel-title { font-size: 16px; padding: 16px 16px 0; margin: 0 0 8px; }
.banners-table td.thumb { width: 72px; } .banners-table td.thumb img { display: block; max-width: 64px; max-height: 48px; border: 1px solid var(--line); border-radius: 4px; background: var(--subtle); }
.row-alert { margin-top: 6px; padding: 6px 10px; border-radius: var(--r-field); background: var(--danger-soft); color: var(--danger); font-size: 13px; line-height: 18px; }
.danger-zone { margin-top: 24px; text-align: right; } .danger-zone form { margin: 0; } .danger-zone .btn-quiet { color: var(--danger); }
@media (max-width: 639px) { .banners-table td.thumb { display: none; } }