/* =============================================================================
   LI-NK — fundația CSS, partea 2: EXCEPȚIILE care nu se pot obține prin variabile (agent „found").
   Încărcat după base.css (remaparea variabilelor Tailwind) și înaintea foilor de zonă (chrome, home, auth,
   blog, pages, dashboard, dashboard-pages). Sursa: claude-design/00 - Fundație.dc.html + README „Componente".

   CASCADA: CSS-ul nostru e nestratificat, deci BATE orice utilitar Tailwind (care e în @layer), indiferent de
   specificitate. Atenție: la fel bate și utilitarele de culoare puse intenționat pe un element — de aceea
   regulile de element (h1…h6, a) exclud clasele de culoare. Față de componentele upstream scrise de mână
   (.alert, .page-item, .content-body, checkbox, comutatoare) se aplică specificitate apoi ordine.

   ZONE (decide :has() pe foaia principală încărcată de layout):
     B = site + dashboard · S = doar site (style.css) · D = doar dashboard (dashboard.css).
   Pagina bio publică și adminul nu se potrivesc cu nicio zonă. Sintaxă: CSS nesting (suportat oriunde merge :has()).
   Schema întunecată: `&.dark …` = html.dark.

   TEXTUL PE FUNDAL PRIMAR: întotdeauna var(--ln-primary-fg) (decizia Alex 2026-10-01: navy, nu alb).
   ============================================================================= */

/* ===================== B — site + dashboard ===================== */
:where(html:has(link[href*="/static/style.css"]), html:has(link[href*="/static/dashboard.css"])) {

  /* ---------- 0. Global: focus, selecție, defilare, cifre ---------- */
  & ::selection { background: color-mix(in oklab, var(--ln-primary) 30%, transparent); color: inherit; }
  & { scrollbar-color: var(--ln-border-strong) transparent !important; }   /* upstream le resetează cu `unset !important` pe html/body */
  & :focus-visible { outline: 2px solid var(--ln-primary-ring); outline-offset: 2px; }
  & :is(input, select, textarea):focus-visible { outline: 0; }          /* câmpurile au bordură de focus proprie */
  & :is(td, th, time, output, .tabular-nums, .text-2xl, .text-3xl, .text-4xl) { font-variant-numeric: tabular-nums; }

  /* ---------- 1. Text: ierarhia text / text-2 / text-3 ----------
     Upstream scrie ierarhia cu opacități peste negru/alb (text-black/60). Le legăm de tokenii designului
     (contrast mai bun: text-3 #6b7280 = 4,83:1, în loc de ~2,5:1 la text-black/40). */
  & :is(.text-black\/70, .text-black\/65, .text-black\/60, .text-black\/55) { color: var(--ln-text-2); }
  & :is(.text-black\/50, .text-black\/45, .text-black\/40, .text-black\/35) { color: var(--ln-text-3); }
  & :is(.placeholder\:text-black\/35, .placeholder\:text-black\/40, .placeholder\:text-black\/30)::placeholder { color: var(--ln-text-3); }
  & :is(.hover\:text-black:hover, .focus\:text-black:focus) { color: var(--ln-text); }
  &.dark :is(.dark\:text-white\/70, .dark\:text-white\/60, .dark\:text-white\/55) { color: var(--ln-text-2); }
  &.dark :is(.dark\:text-white\/50, .dark\:text-white\/45, .dark\:text-white\/40, .dark\:text-white\/35) { color: var(--ln-text-3); }
  &.dark :is(.dark\:placeholder\:text-white\/35, .dark\:placeholder\:text-white\/40, .dark\:placeholder\:text-white\/30)::placeholder { color: var(--ln-text-3); }

  /* titluri = navy (--ln-heading) în schema luminoasă; în cea întunecată e alb = culoarea textului.
     Nu atinge titlurile cu clasă de culoare proprie; pe suprafețe întunecate (.text-white) tokenul se resetează la alb. */
  & .text-white, & .text-white\/80 { --ln-heading: #ffffff; }
  & :where(h1, h2, h3, h4, h5):not([class*="text-white"], [class*="text-black"], [class*="text-red"], [class*="text-emerald"],
        [class*="text-green"], [class*="text-amber"], [class*="text-blue"], [class*="text-sky"], [class*="text-neutral"],
        [class*="text-inherit"], [class*="text-current"], [class*="text-orange"], [class*="text-primary"], [class*="text-["]) {
    color: var(--ln-heading);
  }
  & :is(h1, h2, h3, h4, h5).text-black { color: var(--ln-heading); }
  & :is(a, button, label).text-black { color: var(--ln-text); }

  /* ---------- 2. Borduri, separatoare ---------- */
  & :is(.border-black\/5, .border-black\/7, .border-black\/10) { border-color: var(--ln-border); }
  & :is(.divide-black\/5, .divide-black\/10, .lg\:divide-black\/10) > :not(:last-child) { border-color: var(--ln-border); }
  & :is(.lg\:border-black\/5, .border-b.border-black\/5) { border-color: var(--ln-border); }
  & :is(.\[\&_td\]\:border-black\/5 td, .\[\&_th\]\:border-black\/5 th) { border-color: var(--ln-border); }
  & :is(.border-black\/15, .border-black\/20, .border-black\/25, .border-black\/30) { border-color: var(--ln-border-strong); }
  & :is(.border-black:not(.bg-black), .border-t-black, .peer-checked\:border-black, .has-\[\:checked\]\:border-black) { border-color: var(--ln-primary); }
  &.dark :is(.dark\:border-white\/15, .dark\:border-white\/20, .dark\:border-white\/25, .dark\:border-white\/30) { border-color: var(--ln-border-strong); }
  &.dark :is(.dark\:border-white:not(.dark\:bg-white), .dark\:border-t-white, .dark\:peer-checked\:border-white, .dark\:has-\[\:checked\]\:border-white) { border-color: var(--ln-primary); }
  & hr { border-color: var(--ln-border); }

  /* ---------- 3. Buton principal ----------
     Upstream: `bg-black text-white dark:bg-white dark:text-black hover:bg-black/85`. Un singur rol primar (README):
     cyan, text --ln-primary-fg, hover --ln-primary-alt. Se aplică oricărui `.bg-black` opac; suprafețele mari (panou,
     secțiune, articol) sunt reluate la §3b. Cum CSS-ul nostru bate stratul utilitar, regula acoperă și varianta
     `dark:bg-white` din întuneric, fără selectori separați. */
  & .bg-black { background-color: var(--ln-primary); }
  & .bg-black.text-white { color: var(--ln-primary-fg); }
  & :is(.hover\:bg-black\/85, .hover\:bg-black\/90, .hover\:bg-black):hover { background-color: var(--ln-primary-hover); }
  & :is(a, button, label, input[type=submit], input[type=button]).bg-black:is(.rounded-lg, .rounded-md, .rounded-xl) { border-radius: var(--ln-r-pill); }
  & :is(a, button, input[type=submit]).bg-black[class*="px-"]:is(.py-2, .py-2\.5, .py-3) { min-height: 44px; font-weight: 600; box-shadow: var(--ln-shadow-1); }
  & :is(a, button, input[type=submit]).bg-black:is(.px-8, .px-6).py-3 { min-height: 48px; }
  & :is(a, button, input[type=submit]).bg-black.text-xs[class*="px-"] { min-height: 32px; }
  & :is(a, button).bg-black[class*="px-"]:is(.border, .border-black\/10, .border-black) { border-color: transparent; }
  /* dezactivat */
  & :is(a, button, input[type=submit]).bg-black:is(:disabled, [disabled], .disabled, [aria-disabled=true]) {
    background-color: var(--ln-border); color: var(--ln-text-3); cursor: not-allowed; box-shadow: none;
  }
  /* periculos: roșu plin = confirmarea distructivă (#dc2626); aceeași formă ca butonul principal */
  & :is(a, button, input[type=submit]).bg-red-600:is(.rounded-lg, .rounded-md, .rounded-xl)[class*="px-"] { border-radius: var(--ln-r-pill); min-height: 44px; font-weight: 600; }
  & :is(a, button).bg-red-600:hover, & :is(a, button).hover\:bg-red-700:hover { background-color: #b91c1c; }

  /* ---------- 3b. Suprafețe întunecate mari (panou, secțiune, articol cu `bg-black`) ----------
     Designul: suprafață accentuată navy (gradient), text alb în ambele scheme. În interior, tokenii de text se
     resetează local la valorile din schema întunecată (hex = valorile --ln-text-2/-3 din html.dark), iar
     perechile `dark:text-black/NN` (upstream inversează panoul în întuneric) devin variantele deschise. */
  & :is(section, article, aside, div, li).bg-black:not([class*="rounded"], [class*="size-"], .absolute, .h-full) {
    background: var(--ln-surface-accent); color: #ffffff;
    --ln-heading: #ffffff; --ln-text: #ffffff; --ln-text-2: #d3dbef; --ln-text-3: #a6b6de; --ln-border: rgba(255, 255, 255, .1);
    --ln-primary-alt: oklch(0.735 0.148 233);
  }
  & :is(section, article, aside, div, li).bg-black:not([class*="rounded"], [class*="size-"], .absolute, .h-full) :is(.text-white\/40, .text-white\/45, .text-white\/50) { color: #a6b6de; }
  & :is(section, article, aside, div, li).bg-black:not([class*="rounded"], [class*="size-"], .absolute, .h-full) :is(.text-white\/60, .text-white\/70, .text-white\/80) { color: #d3dbef; }
  &.dark :is(section, article, aside, div, li).bg-black:not([class*="rounded"], [class*="size-"], .absolute, .h-full) :is(.dark\:text-black\/40, .dark\:text-black\/45, .dark\:text-black\/50) { color: #a6b6de; }
  &.dark :is(section, article, aside, div, li).bg-black:not([class*="rounded"], [class*="size-"], .absolute, .h-full) :is(.dark\:text-black\/60, .dark\:text-black\/70) { color: #d3dbef; }
  &.dark :is(section, article, aside, div, li).bg-black:not([class*="rounded"], [class*="size-"], .absolute, .h-full) .dark\:text-black { color: #ffffff; }
  /* butoane/etichete albe în panou (în upstream: alb pe negru, invers în întuneric) = rolul primar */
  & :is(section, article, aside, div, li).bg-black:not([class*="rounded"], [class*="size-"], .absolute, .h-full) :is(a, button, span).bg-white {
    background-color: var(--ln-primary); color: var(--ln-primary-fg);
  }
  & :is(section, article, aside, div, li).bg-black:not([class*="rounded"], [class*="size-"], .absolute, .h-full) :is(a, button).bg-white:is(.rounded-lg, .rounded-md, .rounded-xl) { border-radius: var(--ln-r-pill); }
  & :is(section, article, aside, div, li).bg-black:not([class*="rounded"], [class*="size-"], .absolute, .h-full) :is(a, button).bg-white:is(.py-2, .py-2\.5, .py-3) { min-height: 44px; font-weight: 600; }
  & :is(section, article, aside, div, li).bg-black:not([class*="rounded"], [class*="size-"], .absolute, .h-full) :is(a, button).bg-white:hover { background-color: var(--ln-primary-alt); }
  /* carduri albe în interiorul unui panou (ex. mock-ul din hero, în lumină): tokenii de text revin la valorile din schema luminoasă */
  &:not(.dark) :is(section, article, aside, div, li).bg-black:not([class*="rounded"], [class*="size-"], .absolute, .h-full) .bg-white:not(a, button, span) {
    --ln-heading: #142973; --ln-text: #111827; --ln-text-2: #4b5563; --ln-text-3: #6b7280; --ln-border: #e5e7eb;
  }
  /* chip-uri/butoane `bg-black` (acum primare) cu text alb în interior (span/p cu text-white, text-white/60) -> text pe primar */
  & .bg-black:is([class*="rounded"], [class*="size-"], .absolute, .h-full) .text-white { color: var(--ln-primary-fg); }
  & .bg-black:is([class*="rounded"], [class*="size-"], .absolute, .h-full) :is(.text-white\/40, .text-white\/50, .text-white\/60, .text-white\/70, .text-white\/80) {
    color: color-mix(in oklab, var(--ln-primary-fg) 85%, transparent);
  }
  & pre.bg-black { background: #0a1440; color: #e5e9f6; border-radius: var(--ln-r-lg); }

  /* ---------- 4. Buton neutru (contur 2 px) ----------
     Upstream: `rounded-lg border border-black/5 [bg-white] px-4 py-2 text-sm font-semibold hover:bg-black/5`.
     Se recunoaște după combinația bordură + padding orizontal + greutate + mărime text (nu atinge elementele de meniu,
     paginare sau câmpurile, care nu o au). */
  & :is(a, button):is(.rounded-lg, .rounded-md, .rounded-xl).border:is(.border-black\/5, .border-black\/10)[class*="px-"]:is(.py-1\.5, .py-2, .py-2\.5, .py-3):is(.text-sm, .text-xs):is(.font-semibold, .font-medium):not(.bg-black, .bg-red-600, .bg-primary) {
    border-radius: var(--ln-r-pill); border-color: var(--ln-border-strong); color: var(--ln-text); min-height: 32px;
  }
  & :is(a, button):is(.rounded-lg, .rounded-md, .rounded-xl).border:is(.border-black\/5, .border-black\/10)[class*="px-"]:is(.py-2, .py-2\.5, .py-3).text-sm:not(.bg-black, .bg-red-600, .bg-primary) { min-height: 44px; }
  & :is(a, button):is(.rounded-lg, .rounded-md, .rounded-xl).border:is(.border-black\/5, .border-black\/10)[class*="px-"]:is(.py-1\.5, .py-2, .py-2\.5, .py-3):is(.text-sm):is(.font-semibold, .font-medium):not(.bg-black, .bg-red-600, .bg-primary) { border-width: 2px; }
  & :is(a, button):is(.rounded-lg, .rounded-md, .rounded-xl).border:is(.border-black\/5, .border-black\/10)[class*="px-"]:is(.py-1\.5, .py-2, .py-2\.5, .py-3):is(.text-sm, .text-xs):is(.font-semibold, .font-medium):not(.bg-black, .bg-red-600, .bg-primary):hover { border-color: var(--ln-text-3); }
  & :is(a, button).bg-white.border[class*="px-"]:is(.py-1\.5, .py-2, .py-2\.5, .py-3):is(.text-sm, .text-xs):is(.font-semibold, .font-medium):not(.bg-black) { background-color: transparent; }
  &.dark :is(a, button).border.dark\:bg-neutral-900:is(.rounded-lg, .rounded-md, .rounded-xl)[class*="px-"]:is(.py-1\.5, .py-2, .py-2\.5, .py-3):is(.text-sm, .text-xs):is(.font-semibold, .font-medium):not(.bg-black) { background-color: transparent; }

  /* ---------- 5. Câmpuri de formular ---------- */
  & :is(input, select, textarea).border:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden], [type=submit], [type=button]) {
    border-color: var(--ln-border-strong); background-color: var(--ln-input-bg); color: var(--ln-text);
    border-radius: var(--ln-r-md);
  }
  & :is(input, select, textarea).border:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden], [type=submit], [type=button]):focus,
  & :is(input, select, textarea).border:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden]):focus-visible {
    border-color: var(--ln-primary-ring); box-shadow: 0 0 0 1px var(--ln-primary-ring); outline: 0;
  }
  & :is(input, textarea)::placeholder { color: var(--ln-text-3); opacity: 1; }
  & :is(input, select, textarea):disabled { background-color: var(--ln-bg-2); color: var(--ln-text-3); cursor: not-allowed; }
  /* eroare: #f87171 + inel de 1 px */
  & :is(input, select, textarea).border:is(.border-red-500, .border-red-600, .is-invalid, [aria-invalid=true]) {
    border-color: var(--ln-field-error); box-shadow: 0 0 0 1px var(--ln-field-error);
  }
  & select.border:not([multiple], [size]) {
    appearance: none; -webkit-appearance: none; padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 18px 18px;
  }
  &.dark select.border:not([multiple], [size]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a6b6de' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
  }
  &.dark select option { background-color: var(--ln-card); color: var(--ln-text); }
  &.dark :is(input, select, textarea) { color-scheme: dark; }
  & .ns-trigger { border-color: var(--ln-border-strong); border-radius: var(--ln-r-md); }
  & .ns-root.is-open .ns-trigger { border-color: var(--ln-primary-ring); box-shadow: 0 0 0 1px var(--ln-primary-ring); }
  & :is(input[type=radio]) { accent-color: var(--ln-primary); }
  & input[type=range] { accent-color: var(--ln-primary); }

  /* checkbox 18 px, rază 5; bifa navy pe primar */
  &:root input[type=checkbox]:not(.sr-only, [data-binary=true], [data-toggle=togglefield]) {
    width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--ln-border-strong); background-color: var(--ln-input-bg);
  }
  &:root input[type=checkbox]:not(.sr-only, [data-binary=true], [data-toggle=togglefield]):hover { border-color: var(--ln-text-3); }
  &:root input[type=checkbox]:not(.sr-only, [data-binary=true], [data-toggle=togglefield]):checked {
    background-color: var(--ln-primary); border-color: var(--ln-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.25 8.25 6.5 11.5 12.75 4.75' stroke='%230a1440' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 12px 12px;
  }
  &:root input[type=checkbox]:not(.sr-only, [data-binary=true], [data-toggle=togglefield]):indeterminate {
    background-color: var(--ln-primary); border-color: var(--ln-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8h9' stroke='%230a1440' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  &:root input[type=checkbox]:not(.sr-only):focus-visible { outline: 2px solid var(--ln-primary-ring); outline-offset: 2px; box-shadow: none; }

  /* comutator 44×26 (upstream: input[data-binary] și .bio-switch; ambele hand-written, cu fundal hex) */
  &:root input[type=checkbox]:is([data-binary=true], [data-toggle=togglefield]):not(.sr-only) {
    width: 44px; height: 26px; background-color: var(--ln-border-strong); border-color: transparent;
  }
  &:root input[type=checkbox]:is([data-binary=true], [data-toggle=togglefield]):not(.sr-only)::after { width: 20px; height: 20px; left: 3px; background-color: #ffffff; }
  &:root input[type=checkbox]:is([data-binary=true], [data-toggle=togglefield]):not(.sr-only):checked { background-color: var(--ln-primary); border-color: transparent; }
  &:root input[type=checkbox]:is([data-binary=true], [data-toggle=togglefield]):not(.sr-only):checked::after { left: calc(100% - 23px); background-color: #ffffff; }
  &:root .bio-switch { width: 44px; height: 26px; background-color: var(--ln-border-strong); border-color: transparent; }
  &:root .bio-switch::after { width: 20px; height: 20px; left: 3px; background-color: #ffffff; }
  &:root .peer:is(:checked) ~ .bio-switch, &:root .peer:is(:checked) + .bio-switch { background-color: var(--ln-primary); border-color: transparent; }
  &:root .peer:is(:checked) ~ .bio-switch::after, &:root .peer:is(:checked) + .bio-switch::after { left: calc(100% - 23px); background-color: #ffffff; }
  &.dark :is(.bio-switch, input[type=checkbox]:is([data-binary=true], [data-toggle=togglefield]):not(.sr-only)) { background-color: var(--ln-border-strong); }
  &.dark .peer:is(:checked) ~ .bio-switch, &.dark .peer:is(:checked) + .bio-switch,
  &.dark input[type=checkbox]:is([data-binary=true], [data-toggle=togglefield]):not(.sr-only):checked { background-color: var(--ln-primary); }
  /* comutatoare scrise cu utilitare: input.peer.sr-only + span (pistă) + span (buton) — user/settings.php etc. */
  & .peer ~ span.absolute.inset-0.rounded-full { background-color: var(--ln-border-strong); }
  & .peer:checked ~ span.absolute.inset-0.rounded-full { background-color: var(--ln-primary); }
  & .peer ~ span.rounded-full.bg-white { background-color: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); --tw-ring-color: transparent; }
  & .peer:focus-visible ~ span.absolute.inset-0.rounded-full { box-shadow: 0 0 0 2px var(--ln-bg), 0 0 0 4px var(--ln-primary-ring); }
  & .qr-range { accent-color: var(--ln-primary); }

  /* ---------- 6. Alerte / mesaje flash ---------- */
  &:root .alert {
    border-radius: var(--ln-r-lg); padding: 14px 16px; font-size: 14px; line-height: 20px; border: 1px solid transparent;
  }
  &:root .alert.alert-success { background: var(--ln-success-soft); border-color: var(--ln-success); color: var(--ln-success); }
  &:root .alert:is(.alert-danger, .alert-error) { background: var(--ln-danger-soft); border-color: var(--ln-danger); color: var(--ln-danger); }
  &:root .alert.alert-warning { background: var(--ln-warning-soft); border-color: rgba(247, 177, 26, .6); color: var(--ln-warning); }
  &:root .alert.alert-info { background: var(--ln-primary-soft); border-color: transparent; color: var(--ln-primary-alt); }
  &:root .alert :is(strong, b) { font-weight: 600; }
  &:root .alert a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
  &.dark .alert.alert-success { background: var(--ln-success-soft); color: var(--ln-success); }
  &.dark .alert:is(.alert-danger, .alert-error) { background: var(--ln-danger-soft); color: var(--ln-danger); }
  &.dark .alert.alert-warning { background: var(--ln-warning-soft); color: var(--ln-warning); }
  &.dark .alert.alert-info { background: var(--ln-primary-soft); color: var(--ln-primary-alt); }
  /* bg-success/warning/danger/info = chip-uri de stare ale aplicației (dashboard.css) */
  & .bg-success { background-color: var(--ln-success-soft); color: var(--ln-success); }
  & .bg-warning { background-color: var(--ln-warning-soft); color: var(--ln-warning); }
  & .bg-danger { background-color: var(--ln-danger-soft); color: var(--ln-danger); }
  & .bg-info { background-color: var(--ln-primary-soft); color: var(--ln-primary-alt); }
  &:root .alert.bg-success { background: var(--ln-success-soft); }
  &:root .alert.bg-danger { background: var(--ln-danger-soft); }
  &:root .alert.bg-warning { background: var(--ln-warning-soft); }
  &:root .alert.bg-info { background: var(--ln-primary-soft); }
  & [data-notify=container] { border-radius: var(--ln-r-lg) !important; box-shadow: var(--ln-shadow-3) !important; }

  /* ---------- 7. Badge-uri (pilule 12/600) ---------- */
  & :is(span, small, div):is(.rounded-md, .rounded-lg).bg-emerald-500\/15,
  & :is(span, small, div):is(.rounded-md, .rounded-lg).bg-red-500\/15,
  & :is(span, small, div):is(.rounded-md, .rounded-lg).bg-amber-500\/15,
  & :is(span, small, div):is(.rounded-md, .rounded-lg).bg-blue-500\/15,
  & :is(span, small, div):is(.rounded-md, .rounded-lg).bg-emerald-500\/20,
  & :is(span, small, div):is(.rounded-md, .rounded-lg).bg-red-500\/20,
  & :is(span, small, div):is(.rounded-md, .rounded-lg).bg-amber-500\/20 { border-radius: var(--ln-r-pill); font-weight: 600; }
  /* punctul de stare dinaintea textului (6 px, culoarea textului) — doar pe chip-urile de stare (verde/roșu/chihlimbar) */
  & :is(span, small):is(.bg-emerald-500\/15, .bg-emerald-500\/20, .bg-red-500\/15, .bg-red-500\/20, .bg-amber-500\/15, .bg-amber-500\/20).rounded-md {
    display: inline-flex; align-items: center; gap: 6px;
  }
  & :is(span, small):is(.bg-emerald-500\/15, .bg-emerald-500\/20, .bg-red-500\/15, .bg-red-500\/20, .bg-amber-500\/15, .bg-amber-500\/20).rounded-md::before {
    content: ""; width: 6px; height: 6px; border-radius: 9999px; background: currentColor; flex: none;
  }
  & :is(.bg-emerald-500\/15, .bg-emerald-500\/20) { background-color: var(--ln-success-soft); }
  & :is(.bg-red-500\/15, .bg-red-500\/20, .bg-red-500\/10) { background-color: var(--ln-danger-soft); }
  & :is(.bg-amber-500\/15, .bg-amber-500\/20, .bg-amber-500\/10) { background-color: var(--ln-warning-soft); }
  & :is(.bg-blue-500\/15, .bg-blue-500\/10) { background-color: var(--ln-primary-soft); }
  /* culorile de text din lumină (emerald-700/800, red-600…800, amber-800) vin deja din variabilele remapate în base.css și au
     contrast mai bun decât --ln-success (#16a34a pe #f0fdf4 = 3,15:1). Aici doar întunericul, unde tokenii deschiși sunt cei buni. */
  & :is(.text-blue-800, .text-blue-700) { color: var(--ln-primary-alt); }
  &.dark :is(.dark\:text-emerald-400, .dark\:text-emerald-300) { color: var(--ln-success); }
  &.dark :is(.text-green-600, .text-emerald-600, .text-green-700, .text-emerald-700):not([class*="dark:text-"]) { color: var(--ln-success); }
  &.dark :is(.text-red-600, .text-red-500, .text-red-700):not([class*="dark:text-"]) { color: var(--ln-danger); }
  &.dark :is(.dark\:text-red-400, .dark\:text-red-200) { color: var(--ln-danger); }
  &.dark :is(.dark\:text-amber-400, .dark\:text-amber-300, .dark\:text-amber-200) { color: var(--ln-warning); }
  &.dark :is(.dark\:text-blue-400, .dark\:text-blue-200) { color: var(--ln-primary-alt); }

  /* ---------- 8. Card, rând de listă, dropdown, modal ---------- */
  & :is(div, article, section, form, details, ul).rounded-2xl.border.bg-white { border-radius: var(--ln-r-xl); }
  & :is(div, article, section, form, details).rounded-xl.border.bg-white.shadow-sm { box-shadow: var(--ln-shadow-1); }
  &.dark .dark\:bg-neutral-900\/20 { background-color: var(--ln-card); }   /* upstream: 20 % din culoarea cardului = invizibil pe navy; designul vrea cardul plin */
  & .shadow-card { box-shadow: var(--ln-shadow-2); }
  &.dark .shadow-card { box-shadow: var(--ln-shadow-1); }
  /* dropdown: 16 px rază, umbră 3, elemente 40 px, rază 10 */
  & [data-dropdown-menu] { border-radius: var(--ln-r-lg); box-shadow: var(--ln-shadow-3); border-color: var(--ln-border); background-color: var(--ln-card); }
  & [data-dropdown-menu] :is(a, button) { border-radius: 10px; min-height: 40px; align-items: center; }
  & [data-dropdown-menu] :is(a, button):hover { background-color: var(--ln-primary-soft); color: var(--ln-primary-alt); }
  & [data-dropdown-menu] :is(a, button):is(.text-red-600, .text-red-500):hover { background-color: var(--ln-danger-soft); color: var(--ln-danger); }
  /* modal: 24 px rază, umbră 3 */
  & .fixed.inset-0 > .relative > .pointer-events-auto.rounded-xl { border-radius: var(--ln-r-xl); box-shadow: var(--ln-shadow-3); border-color: var(--ln-border); }
  & [data-sidebar-backdrop], & .fixed.inset-0.bg-black\/40, & .fixed.inset-0.bg-black\/50 { background-color: rgba(10, 20, 64, .55); }

  /* ---------- 9. Paginare (Helper::pagination: .page-item > .page-link) ---------- */
  &:root .page-link { border-radius: var(--ln-r-pill); min-width: 36px; height: 36px; background-color: transparent; border-color: transparent; color: var(--ln-text-2); }
  &:root .page-item:first-child .page-link, &:root .page-item:last-child .page-link { border-color: var(--ln-border); }
  &:root .page-item:not(.active) .page-link:hover { background-color: var(--ln-primary-soft); color: var(--ln-primary-alt); }
  &:root .page-item.active .page-link { background-color: var(--ln-primary); color: var(--ln-primary-fg); border-color: transparent; font-weight: 600; }
  &:root .page-item.disabled .page-link { color: var(--ln-text-3); opacity: .6; }

  /* ---------- 10. Segment (.btn-stack) și tab-uri ---------- */
  &:root .btn-stack { background: var(--ln-bg-2); border: 1px solid var(--ln-border); border-radius: var(--ln-r-md); padding: 3px; gap: 2px; }
  &:root .btn-stack :is(label, a) { border-radius: 9px; }
  &:root .btn-stack label.active, &:root .btn-stack a.active { background-color: var(--ln-card); color: var(--ln-heading); box-shadow: var(--ln-shadow-1); border-color: transparent; font-weight: 600; }
  &.dark .btn-stack label.active, &.dark .btn-stack a.active { background-color: var(--ln-card); color: var(--ln-heading); }

  /* ---------- 11. Tabele ---------- */
  & :is(thead th, th) { color: var(--ln-text-3); }
  & :is(tbody tr):hover { background-color: color-mix(in oklab, var(--ln-bg-2) 70%, transparent); }

  /* ---------- 12. Cookie (cookieconsent v2) — variabilele --cc-* sunt în base.css; aici forma ---------- */
  & #cm { box-shadow: var(--ln-shadow-3); border: 1px solid var(--ln-border); border-radius: 24px; padding: 20px; font-family: var(--ln-font); max-width: 28rem; }
  & #cm .c-bn { border-radius: 9999px; min-height: 44px; padding: 0 22px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
  & #cm .c-bn.c_link, & #cm #c-s-bn { border: 2px solid var(--ln-border-strong); background: transparent; color: var(--ln-text); }
  & #cm #c-p-bn, & #cm #c-p-bn .c-bn { background: var(--ln-primary); color: var(--ln-primary-fg); }
  & #cm #c-ttl { color: var(--ln-heading); font-size: 14px; }
  & #cm #c-txt { font-size: 14px; line-height: 20px; color: var(--ln-text-2); }
  & #cm .cc-link, & #cc_div .cc-link { color: var(--ln-primary-alt); font-weight: 600; }
  & #s-inr { border-radius: 24px; box-shadow: var(--ln-shadow-3); }

  /* ---------- 13. Tipografie articol: .content-body (blog, pagini, ajutor) ---------- */
  & .content-body { color: var(--ln-text-2); font-size: 16px !important; line-height: 26px !important; }
  & .content-body p { margin: 0 0 20px !important; line-height: 26px !important; }
  & .content-body a { color: var(--ln-primary-alt); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ln-primary-ring); }
  & .content-body a:hover { color: var(--ln-primary); }
  & .content-body :is(h1, h2, h3, h4, h5, h6) { color: var(--ln-heading) !important; letter-spacing: -.02em; }
  & .content-body h2 { font-size: 28px !important; line-height: 34px !important; margin: 40px 0 16px !important; }
  & .content-body h3 { font-size: 22px !important; line-height: 28px !important; margin: 32px 0 12px !important; font-weight: 600 !important; }
  & .content-body h4 { font-size: 16px !important; line-height: 22px !important; margin: 24px 0 8px !important; font-weight: 600 !important; }
  & .content-body li { line-height: 26px !important; margin: 4px 0 !important; }
  & .content-body ol li::marker { font-variant-numeric: tabular-nums; }
  & .content-body ul { padding-left: 20px !important; }
  & .content-body ol { padding-left: 22px !important; }
  & .content-body img { border-radius: 16px; }
  &:root .content-body blockquote { border-left: 3px solid var(--ln-primary); color: var(--ln-text); }
  &:root .content-body hr { border-top-color: var(--ln-border); }
  &:root .content-body :is(code, kbd) { font-family: var(--ln-font-mono); font-size: 14px; background: var(--ln-bg-2); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--ln-border); }
  &:root .content-body pre { background: var(--ln-bg-2); border: 1px solid var(--ln-border); border-radius: 16px; }
  &:root .content-body pre code { background: none; border: 0; padding: 0; }
  &:root .content-body :is(th, td) { border-color: var(--ln-border); }
  & .content-body th { background: var(--ln-bg-2); color: var(--ln-heading); font-weight: 600; }
  & .content-body :is(h1, h2, h3, h4) strong { font-weight: inherit; }
  &.dark .content-body { color: var(--ln-text-2); }
}

/* ===================== S — doar site ===================== */
:where(html:has(link[href*="/static/style.css"])) {
  & body { background-color: var(--ln-bg); background-image: var(--ln-page-bg); background-repeat: no-repeat; }
  & .code-area { border-radius: var(--ln-r-lg); background: #0a1440; }
  &:root .alert { margin-bottom: 16px; }
}

/* ===================== D — doar dashboard ===================== */
:where(html:has(link[href*="/static/dashboard.css"])) {
  & body { background-color: var(--ln-bg-dashboard); }
  & :is(a, button).bg-black[class*="px-"]:is(.py-2, .py-2\.5, .py-3).text-sm { min-height: 40px; }
  & :is(a, button):is(.rounded-lg, .rounded-md, .rounded-xl).border:is(.border-black\/5, .border-black\/10)[class*="px-"]:is(.py-2, .py-2\.5, .py-3).text-sm:not(.bg-black, .bg-red-600, .bg-primary) { min-height: 40px; }
}

/* ===================== B+ — selecturi în schema întunecată (8.1) =====================
   Upstream 8.1 a adăugat reguli ne-stratificate `html.dark select` (0,1,2) și `html.dark .ns-trigger` (0,2,1) cu
   fundal #171717 / #0a0a0a. Regulile noastre de câmp stăteau sub `:where()` (specificitate 0) sau pe `.au-input` (0,1,0),
   deci pierdeau față de ele: selectul nativ (checkout) și declanșatorul `.ns-trigger` (Setări, editoare) ieșeau aproape
   negre pe fundal navy, în timp ce inputurile rămâneau navy. Aici specificitatea e (0,2,1), egală cu cea mai tare
   regulă upstream, iar foaia noastră vine după → câștigăm. Light nu are nevoie: acolo bate deja `:where()` + @layer. */
html.dark:where(:has(link[href*="/static/style.css"]), :has(link[href*="/static/dashboard.css"])) :is(select, .ns-trigger) {
  background-color: var(--ln-input-bg);
  color: var(--ln-text);
}
html.dark:where(:has(link[href*="/static/style.css"]), :has(link[href*="/static/dashboard.css"])) select option,
html.dark:where(:has(link[href*="/static/style.css"]), :has(link[href*="/static/dashboard.css"])) select optgroup {
  background-color: var(--ln-card);
  color: var(--ln-text);
}