/* =============================================================================
   LI-NK — dashboard: EDITARE LINK, STATISTICI LINK, SETĂRI, FACTURARE / PLANURI  (agent „dash-b")
   Sursa: claude-design/C - Dashboard.dc.html (Editare link, Statistici link, Setări, Facturare).
   Încărcat de functions.php (SHEETS) DUPĂ dashboard.css și tokens.css, nestratificat → bate utilitarele Tailwind.
   Documentație: analize/DASHBOARD-PAGINI.md

   CUM E SCOPAT (diferit de restul foilor, de explicat):
   - Paginile din zona asta nu au clasă proprie pe <html>/<body>, dar fiecare are un element UNIC în șablon.
     Rădăcina fiecărui bloc e `:where(html:has(<marcaj>))` (specificitate 0), deci regulile se aplică NUMAI pe pagina
     care conține marcajul — fără să atingă Panoul / lista de Linkuri (zona „dash-a") sau site-ul:
       EDIT  = form[action*="/links/"][action$="/update"]           user/edit.php
       SET   = #settings-form                                       user/settings.php
       PLANS = .pricing-container                                   user/plans.php
       BILL  = .lg\:grid-cols-12 > .lg\:col-span-8                  user/billing.php (Panoul folosește col-span-7)
       STATS = nav.overflow-x-auto a[href$="/stats"] (+ sub-pagini) stats/*.php (în ambele layout-uri: dashboard și stats)
   - Sintaxă: CSS nesting „relaxat" (Chrome 120+, Safari 17.2+, Firefox 117+) — aceeași generație de browsere ca :has().
     În browsere mai vechi regulile se ignoră → paginile arată ca upstream (degradare, nu rupere).
   - Tokeni: DOAR `--ln-*` (tokens.css). Text pe cyan: ÎNTOTDEAUNA `var(--ln-primary-fg)` (decizie Alex 2026-10-01).
   - Păstrat: name/id/data-* și clasele de care depinde JS-ul upstream (nu se redenumește nimic).
   ============================================================================= */

/* ---------------------------------------------------------------------------
   0. COMUN — doar ce NU face deja fundația (components.css: butoane, câmpuri, comutatoare, badge-uri, ierarhia
   de text, borduri, tabele). Aici: șasiul cardurilor de pagină, selectul îmbunătățit (.ns-*) și finisaje de formular.
   --------------------------------------------------------------------------- */
:where(html:has(
  form[action*="/links/"][action$="/update"],
  #settings-form,
  .pricing-container,
  .lg\:grid-cols-12 > .lg\:col-span-8,
  nav.overflow-x-auto a[href$="/stats"]
)) {
  /* --- bară de titlu a paginii (h1 + acțiuni) — doar dacă pagina o are --- */
  & .border-b:has(> .min-w-0 > h1) { border-color: transparent; padding-block: 28px 8px; }
  & h1 { letter-spacing: -.02em; font-weight: 700; }

  /* --- carduri: 24 px rază, antet cu titlu de 16/600 (nu majuscule mici) --- */
  & .shadow-card.shadow-card { background: var(--ln-card); border: 1px solid var(--ln-border); border-radius: 20px; color: var(--ln-text); overflow: visible; }  /* visible: dropdown-urile .ns-* nu se taie; 20 px = ca la Panou */
  & .shadow-card > div.border-b:first-child { border-color: var(--ln-border); padding: 20px 24px; }
  & .shadow-card > div.border-b:first-child > .px-3 { padding-inline: 0; }
  & .shadow-card h2.uppercase { text-transform: none; letter-spacing: 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ln-heading); }
  & .shadow-card > div:is(.p-3, .p-4, .flex-auto):not(.border-b) { padding: 24px; }
  @media (max-width: 639px) {
    & .shadow-card > div.border-b:first-child { padding: 16px 20px; }
    & .shadow-card > div:is(.p-3, .p-4, .flex-auto):not(.border-b) { padding: 20px; }
  }

  /* --- etichete și câmpuri --- */
  & label.font-semibold, & label.font-bold { font-weight: 600; color: var(--ln-text); }
  & :is(input, select, textarea).border:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden], [type=submit], [type=button], .sr-only),
  & button.ns-trigger { padding: 12px 16px; min-height: 44px; font-size: 14px; line-height: 20px; box-shadow: none; }
  & textarea.border { min-height: 96px; }
  & button.ns-trigger { padding: 8px 12px 8px 16px; background-color: var(--ln-input-bg); color: var(--ln-text); }
  & button.ns-trigger[aria-expanded="true"] { border-color: var(--ln-primary-ring); box-shadow: 0 0 0 1px var(--ln-primary-ring); outline: 0; }

  /* --- selectul îmbunătățit (native-select → .ns-*) --- */
  & .ns-caret { color: var(--ln-text-3); }
  & .ns-chip { background: var(--ln-primary-soft); color: var(--ln-primary-alt); border-radius: var(--ln-r-pill); padding: 2px 4px 2px 10px; font-weight: 600; font-size: 12px; line-height: 20px; }
  & .ns-chip-remove { color: var(--ln-primary-alt); }
  & .ns-dropdown { background: var(--ln-card); border: 1px solid var(--ln-border); border-radius: var(--ln-r-lg); box-shadow: var(--ln-shadow-3); color: var(--ln-text); }
  & .ns-search { border-bottom-color: var(--ln-border); color: var(--ln-text); }
  & .ns-option { border-radius: 10px; min-height: 40px; color: var(--ln-text); }
  & .ns-option:hover { background: var(--ln-bg-2); }
  & .ns-option.bg-black { background: var(--ln-primary-soft); color: var(--ln-primary-alt); font-weight: 600; }
  & .ns-group { color: var(--ln-text-3); }

  /* --- comutatoare din utilitare (label > input.peer.sr-only + 2×span): 44×26, pista oprită = border-strong --- */
  & label.relative:has(> input.peer) { height: 26px; width: 44px; }
  & input.peer:not(:checked) + span { background: var(--ln-border-strong); }
  & input.peer + span { border-radius: var(--ln-r-pill); }
  & input.peer + span + span { width: 20px; height: 20px; top: 3px; left: 3px; background: #fff; box-shadow: var(--ln-shadow-1); border: 0; }
  & input.peer:checked + span + span { translate: 18px 0; background: #fff; }
  & input.peer:focus-visible + span { outline: 2px solid var(--ln-primary-ring); outline-offset: 2px; box-shadow: none; }

  /* --- tabele --- */
  & table th { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--ln-border); background: transparent; }
  & table td { border-bottom: 1px solid var(--ln-border); color: var(--ln-text-2); }
  & table tbody tr:last-child td { border-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   1. EDITARE LINK  (user/edit.php) — macheta „Editare link 1440 / 375"
   --------------------------------------------------------------------------- */
:where(html:has(form[action*="/links/"][action$="/update"])) {
  /* bara de titlu: h1 + [statistici] [export] [Salvează] */
  & form[action$="/update"] > div:first-of-type { align-items: center; gap: 16px; }
  & form[action$="/update"] h1 { font-size: 28px; line-height: 34px; }
  & form[action$="/update"] a.size-10 {
    width: 44px; height: 44px; border-radius: var(--ln-r-pill);
    border: 2px solid var(--ln-border-strong); background: transparent; color: var(--ln-text); box-shadow: none;
  }
  & form[action$="/update"] a.size-10:hover { background: var(--ln-primary-soft); border-color: var(--ln-primary-ring); }
  & form[action$="/update"] > div:first-of-type button[type="submit"] { min-height: 44px; padding-inline: 28px; font-size: 15px; }

  /* grila: coloanele nu se lățesc după conținut (fila de tab-uri e nowrap) */
  & form[action$="/update"] .grid > *, & form[action$="/update"] .space-y-5 > * { min-width: 0; }
  @media (max-width: 639px) {
    & form[action$="/update"] > div:first-of-type { flex-wrap: wrap; padding-inline: 16px; }
    & form[action$="/update"] > div:first-of-type > .min-w-0 { flex: 1 1 100%; }
    & form[action$="/update"] h1 { font-size: 22px; line-height: 28px; }
    & form[action$="/update"] > div:first-of-type > div:last-child { width: 100%; }
    & form[action$="/update"] > div:first-of-type button[type="submit"] { flex: 1; }
    & form[action$="/update"] > div.px-3, & form[action$="/update"] > div.sm\:px-6 { padding-inline: 16px; }
  }

  /* grila: coloana de câmpuri (flexibilă) + coloana de previzualizare (360 px, ca în machetă) */
  & form[action$="/update"] .lg\:grid-cols-3 { gap: 24px; }
  @media (min-width: 1024px) {
    & form[action$="/update"] .lg\:grid-cols-3 { grid-template-columns: minmax(0, 1fr) 360px; }
    & form[action$="/update"] .lg\:grid-cols-3 > .lg\:col-span-2 { grid-column: 1; }
  }
  & form[action$="/update"] .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 24px; }

  /* sub-titluri de card: „Adaugă" = acțiune text, nu buton plin */
  & a[data-trigger="addmore"][class] {
    background: transparent; border: 0; color: var(--ln-primary-alt); box-shadow: none;
    font-size: 14px; font-weight: 600; min-height: 36px; padding-inline: 12px;
  }
  & a[data-trigger="addmore"][class]:hover { background: var(--ln-primary-soft); color: var(--ln-primary-alt); }
  & a[data-trigger="addmore"][class] i { color: inherit; }
  & a[data-trigger="deletemore"][class] {
    background: transparent; border: 0; color: var(--ln-danger); min-height: 32px; padding-inline: 12px;
    font-size: 13px; font-weight: 600; text-decoration: none;
  }
  & a[data-trigger="deletemore"][class]:hover { background: var(--ln-danger-soft); color: var(--ln-danger); }
  & [data-toggle="addable"].hidden { display: none; }
  & [data-toggle="addable"], & #geo > .grid, & #device > .grid, & #language > .grid, & #advanced > .grid,
  & #abtesting > .grid, & #parameters > .grid { column-gap: 16px; row-gap: 12px; }

  /* previzualizare (Facebook / WhatsApp / X) — segment pilulă în antet */
  & .shadow-card[data-meta-preview] { overflow: hidden; }   /* upstream îl are; regula comună pune overflow:visible pe .shadow-card */
  & [data-meta-preview] > div:first-child { padding: 16px 24px; border-color: var(--ln-border); }
  & [data-meta-preview] h2[class] { text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 600; color: var(--ln-heading); }
  & [data-meta-preview] [role="tablist"] {
    background: var(--ln-bg-2); border-radius: var(--ln-r-pill); padding: 4px; gap: 2px; border: 0;
  }
  & [data-meta-preview] [data-meta-preview-tab] {
    border-radius: var(--ln-r-pill); color: var(--ln-text-3); font-size: 12px; font-weight: 600; padding: 6px 12px;
    background: transparent;
  }
  & [data-meta-preview] [data-meta-preview-tab][aria-selected="true"] { background: var(--ln-card); color: var(--ln-heading); box-shadow: var(--ln-shadow-1); }
  & [data-meta-preview] [data-meta-preview-panel] > div { border-radius: var(--ln-r-lg); }

  /* câmpul URL: pictograma site-ului + câmp, într-un singur grup */
  & #url { border-radius: 0 var(--ln-r-md) var(--ln-r-md) 0; }
  & #url:focus { position: relative; z-index: 1; }
  & span.inline-flex:has(+ #url) { border-color: var(--ln-border-strong); background: var(--ln-bg-2); border-radius: var(--ln-r-md) 0 0 var(--ln-r-md); padding-inline: 12px; }

  /* card QR + linkuri scurte */
  & form[action$="/update"] [data-clipboard-text] {
    color: var(--ln-primary-alt); font-weight: 600; background: transparent;
  }
  & form[action$="/update"] [data-href] { color: var(--ln-text); }

  /* câmpul „personalizat" (alias): wrapper pregătit pentru prefixul „domeniu/" injectat de js/dashboard-pages.js */
  & .lnk-prefix-wrap { position: relative; }
  & .lnk-prefix-wrap > .lnk-prefix {
    position: absolute; left: 16px; bottom: 0; height: 44px; display: flex; align-items: center;
    color: var(--ln-text-3); font-size: 14px; pointer-events: none; max-width: 55%; overflow: hidden; white-space: nowrap;
  }
  & .lnk-prefix-wrap > input[name] { padding-left: var(--lnk-prefix-w, 16px); }

  /* bara fixă de jos (buton „Actualizează linkul") — vizibilă pe mobil, discretă pe desktop */
  & .sticky.bottom-4 > div > div {
    background: color-mix(in oklab, var(--ln-card) 92%, transparent);
    border: 1px solid var(--ln-border); border-radius: 20px; box-shadow: var(--ln-shadow-3);
    backdrop-filter: blur(8px);
  }
  & .sticky.bottom-4 button[type="submit"] { min-height: 48px; }

  /* file: banner meta — zona de încărcare */
  & #metatags label[for="metaimage"] img { border-radius: var(--ln-r-lg); border: 1px dashed var(--ln-border-strong); background: var(--ln-bg-2); }

  /* --- file de tab-uri (generate de js/dashboard-pages.js; fără JS rămân cardurile suprapuse) --- */
  & .lnk-etabs {
    display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
    background: var(--ln-card); border: 1px solid var(--ln-border); border-bottom: 0;
    border-radius: 20px 20px 0 0; padding: 0 12px; margin: 0;
    box-shadow: var(--ln-shadow-2);
  }
  & .lnk-etabs::-webkit-scrollbar { display: none; }
  & .lnk-etabs button {
    appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
    padding: 18px 12px 14px; font: 500 14px/20px var(--ln-font); color: var(--ln-text-3); margin-bottom: -1px;
  }
  & .lnk-etabs button:hover { color: var(--ln-text); }
  & .lnk-etabs button[aria-selected="true"] { color: var(--ln-primary-alt); border-bottom-color: var(--ln-primary); font-weight: 600; }
  & .lnk-etabs button:focus-visible { outline: 2px solid var(--ln-primary-ring); outline-offset: -2px; border-radius: 8px; }
  & .lnk-etabs button.has-error::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ln-danger-solid); margin-left: 6px; vertical-align: middle; }
  /* primul card vizibil se lipește de bara de tab-uri */
  & .lnk-etabs + .shadow-card, & .lnk-etabs ~ .shadow-card.lnk-etab-first {
    margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: var(--ln-shadow-2);
  }
  & .lnk-etabs ~ .shadow-card.lnk-etab-first { border-top: 0; margin-top: 0 !important; }
  & .lnk-etabs ~ .shadow-card:not(.lnk-etab-first) { margin-top: 24px; }
  & [data-lnk-hidden] { display: none !important; }
}

/* ---------------------------------------------------------------------------
   2. STATISTICI LINK  (stats/*.php) — macheta „Statistici link"
   --------------------------------------------------------------------------- */
:where(html:has(nav.overflow-x-auto a[href$="/stats"])) {
  /* aici nu există dropdown-uri în carduri: colțurile rotunjite taie barele și rândurile cu hover */
  & .shadow-card.shadow-card { overflow: hidden; }
  /* layout-ul `stats` (vizitatori) randează partials.stats_nav DIRECT sub <main>, iar pagina o randează încă o dată în conținut:
     fila din layout dublează navigarea — o ascundem (în dashboard fila nu e copil direct al <main>) */
  & main > nav.overflow-x-auto { display: none; }

  /* antet: pictogramă + titlu + buton „Deschide linkul" */
  & .border-b.py-4:has(h1) { border-color: transparent; padding-block: 8px 20px; }
  & .border-b.py-4 h1 { font-size: 28px; line-height: 34px; color: var(--ln-heading); }
  & .border-b.py-4 h1 a { color: inherit; }
  & .border-b.py-4 p { color: var(--ln-text-3); }
  & .border-b.py-4 > div > img, & .border-b.py-4 > div > span.inline-flex {
    border-radius: var(--ln-r-md); background: var(--ln-card); border-color: var(--ln-border); color: var(--ln-primary-alt);
  }
  & .border-b.py-4 span.uppercase { color: var(--ln-primary-alt); letter-spacing: .1em; font-size: 12px; font-weight: 600; }
  & .border-b.py-4 > a, & .border-b.py-4 > a:hover {
    border: 2px solid var(--ln-border-strong); border-radius: var(--ln-r-pill); font-weight: 600; min-height: 44px; padding-inline: 24px;
    color: var(--ln-text); background: transparent;
  }
  & .border-b.py-4 > a:hover { background: var(--ln-primary-soft); }

  /* file de navigare = tab-uri cu subliniere */
  & nav.overflow-x-auto {
    background: transparent; border: 0; border-bottom: 1px solid var(--ln-border); border-radius: 0; padding: 0;
  }
  & nav.overflow-x-auto > ul { gap: 4px; }
  & nav.overflow-x-auto a {
    border-radius: 0; background: transparent; color: var(--ln-text-3); padding: 12px 16px 14px;
    border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; font-size: 14px;
  }
  & nav.overflow-x-auto a:hover { background: transparent; color: var(--ln-text); }
  & nav.overflow-x-auto a[class~="bg-black"] { background: transparent; color: var(--ln-primary-alt); border-bottom-color: var(--ln-primary); font-weight: 600; }
  /* fundația dă `.bg-black` formă de buton (pilulă, 44 px, umbră): pe file se anulează explicit */
  & nav.overflow-x-auto a { border-radius: 0 !important; min-height: 0 !important; box-shadow: none !important; }
  & nav.overflow-x-auto a:focus-visible { border-radius: 8px !important; }

  /* ordinea ca în machetă: antet → file → carduri KPI → rest (doar CSS: `display: contents` pe învelișul antetului) */
  & .mx-auto.w-full:has(> div.mb-5 > nav.overflow-x-auto) { display: flex; flex-direction: column; }
  & .mx-auto.w-full:has(> div.mb-5 > nav.overflow-x-auto) > div:first-child { display: contents; }
  & .mx-auto.w-full:has(> div.mb-5 > nav.overflow-x-auto) > div:first-child > .border-b { order: -3; }
  & .mx-auto.w-full:has(> div.mb-5 > nav.overflow-x-auto) > div.mb-5:has(> nav) { order: -2; margin-bottom: 8px; }
  & .mx-auto.w-full:has(> div.mb-5 > nav.overflow-x-auto) > div:first-child > .grid { order: -1; }
  & nav.overflow-x-auto a svg { display: none; }
  & nav.overflow-x-auto a:focus-visible { outline: 2px solid var(--ln-primary-ring); outline-offset: -2px; border-radius: 8px; }

  /* Editorul de bio publice (bio/edit.php) conține și el `nav.overflow-x-auto a[href$="/stats"]` (fila „Statistici"), deci intră
     în blocul de mai sus și primește file cu subliniere de 16 px pe lateral → 6 file = 684 px, mai mult decât coloana (636 px la
     1440) sau ecranul (349 px la 375), iar bara de defilare e ascunsă: ultima filă părea tăiată, fără nicio indicație.
     Aici: file mai strânse (12 px) ca să încapă pe desktop, iar când tot nu încap (mobil, limbi cu etichete lungi) bara
     defilează pe orizontală cu „umbre de defilare" doar în CSS: o umbră apare pe marginea cu conținut ascuns și dispare
     când s-a ajuns la capăt (`local` = acoperire care defilează cu conținutul, `scroll` = umbra fixă). */
  & nav[data-bio-nav] {
    gap: 0; scrollbar-width: none;
    background:
      linear-gradient(to right, var(--ln-card) 30%, transparent) left center / 32px 100% no-repeat local,
      linear-gradient(to left, var(--ln-card) 30%, transparent) right center / 32px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, color-mix(in oklab, var(--ln-primary) 45%, transparent), transparent) left center / 14px 70% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, color-mix(in oklab, var(--ln-primary) 45%, transparent), transparent) right center / 14px 70% no-repeat scroll;
  }
  & nav[data-bio-nav] a { flex-shrink: 0; padding-inline: 12px; white-space: nowrap; }

  /* carduri KPI (clickuri, unice, țară, referrer) */
  & .grid.lg\:grid-cols-4 { gap: 16px; padding-block: 8px 16px; }
  & .grid.lg\:grid-cols-4 > .shadow-card { border-radius: 20px; }
  & .grid.lg\:grid-cols-4 > .shadow-card > p:first-child {
    border: 0; padding: 20px 24px 0; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ln-text-3);
  }
  & .grid.lg\:grid-cols-4 > .shadow-card > p:nth-child(2) {
    margin: 0; padding: 4px 24px 22px; color: var(--ln-heading); font-weight: 700; letter-spacing: -.01em;
    font-size: 32px; line-height: 40px; font-variant-numeric: tabular-nums;
  }
  & .grid.lg\:grid-cols-4 > .shadow-card > div:nth-child(2) { padding: 8px 24px 22px; color: var(--ln-heading); font-size: 22px; line-height: 40px; }
  & .grid.lg\:grid-cols-4 > .shadow-card > p:nth-child(2):is(.sm\:text-lg) { font-size: 22px; }
  & .grid.lg\:grid-cols-4 > .shadow-card .text-black\/45 { color: var(--ln-text-3); }

  /* sub-pagini (Țări, Platforme, Browsere, Limbi, Referreri): titluri de secțiune */
  & h2.text-base { color: var(--ln-heading); font-size: 18px; line-height: 24px; font-weight: 600; }

  /* selector de interval */
  & label:has(> input[name="customreport"]) {
    background: var(--ln-input-bg); border: 1px solid var(--ln-border-strong); border-radius: var(--ln-r-pill); height: 40px; padding-inline: 16px;
  }
  & label:has(> input[name="customreport"]):focus-within { border-color: var(--ln-primary-ring); box-shadow: 0 0 0 1px var(--ln-primary-ring); }
  & input[name="customreport"] { color: var(--ln-text); font-weight: 500; }
  & label:has(> input[name="customreport"]) svg { color: var(--ln-text-3); }

  /* liste cu bare (top țări / dispozitive / referreri…) */
  & li.relative.overflow-hidden > span.absolute { background: var(--ln-primary-soft); }
  & li.relative.overflow-hidden .font-bold { color: var(--ln-text-2); font-variant-numeric: tabular-nums; }
  & li.relative.overflow-hidden .font-semibold { color: var(--ln-text); }
  /* liste randate de charts.js (țări / orașe / platforme…): li.relative > div.absolute (bara) + div.relative (conținutul) */
  & ul[id^="top-"] > li { border-color: var(--ln-border); font-size: 14px; font-weight: 500; margin: 0; padding: 0; color: var(--ln-text); }
  & ul[id^="top-"] > li > div.absolute { background: var(--ln-primary-soft); border-radius: 8px; top: 0; height: 100%; min-height: 0; }
  & ul[id^="top-"] > li > div.relative { padding: 6px 10px; min-height: 36px; display: flex; align-items: center; gap: 8px; }
  & ul[id^="top-"] > li > div.relative > img { margin: 0; width: 20px; height: auto; border-radius: 3px; flex: none; }
  & ul[id^="top-"] > li > div.relative > .align-middle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  & ul[id^="top-"] > li > div.relative > .float-end, & ul[id^="top-"] > li > div.relative > .float-right { float: none; }
  & ul[id^="top-"] > li .font-bold { font-weight: 600; font-size: 13px; color: var(--ln-text-2); font-variant-numeric: tabular-nums; }

  /* „Vezi tot" */
  & .shadow-card a.group { color: var(--ln-primary-alt); font-weight: 600; }
  & .shadow-card a.group:hover { color: var(--ln-primary-alt); text-decoration: underline; }

  /* activitate recentă */
  & .shadow-card .rounded-full[class*="bg-black/5"] { background: var(--ln-primary-soft); color: var(--ln-primary-alt); }
  & .shadow-card [class*="text-black/45"], & .shadow-card [class*="text-black/40"] { color: var(--ln-text-3); }

  /* stare goală */
  & .shadow-card .py-10.text-center, & .shadow-card .py-12.text-center { color: var(--ln-text-3); }

  /* grafice: containerul (culorile barelor se setează în JS — vezi js/dashboard-pages.js) */
  & canvas[data-trigger="chart"] { max-width: 100%; }
  & #visitor-map { border-radius: var(--ln-r-lg); }
  & div.jvm-tooltip { background: var(--ln-heading); color: var(--ln-bg); border-radius: 8px; box-shadow: var(--ln-shadow-3); font-family: var(--ln-font); }
  & .jvm-container .jvm-zoom-btn { background: var(--ln-card); color: var(--ln-text); border: 1px solid var(--ln-border-strong); border-radius: 8px; width: 28px; height: 28px; padding: 6px; line-height: 14px; box-shadow: var(--ln-shadow-1); left: 12px; }
  & .jvm-container .jvm-zoom-btn.jvm-zoomin { top: 12px; }
  & .jvm-container .jvm-zoom-btn.jvm-zoomout { top: 46px; }

  /* comutator Țări / Orașe */
  & [data-toggle="multibuttons"] { background: var(--ln-bg-2); border-radius: var(--ln-r-pill); padding: 4px; }
  & [data-toggle="multibuttons"] a { border-radius: var(--ln-r-pill); color: var(--ln-text-3); font-weight: 600; border: 0; background: transparent; box-shadow: none; }
  & [data-toggle="multibuttons"] a.active { background: var(--ln-primary-soft); color: var(--ln-primary-alt); }

  /* AI Insights (dacă e activ) rămâne cu accentul lui, dar pe suprafața cardului */
  & [data-ai-insights] .rounded-xl { background: var(--ln-bg-2); border-color: var(--ln-border); color: var(--ln-text-2); }
}

/* ---------------------------------------------------------------------------
   3. SETĂRI  (user/settings.php) — macheta „Setări"
   --------------------------------------------------------------------------- */
:where(html:has(#settings-form)) {
  & .grid.lg\:grid-cols-3 { gap: 24px; }
  & #settings-form .shadow-card + .shadow-card { margin-top: 24px; }
  & #settings-form .mb-6:has(> input, > select, > textarea, > .relative) { margin-bottom: 20px; }

  /* avatar */
  & #avatar-preview {
    border-radius: var(--ln-r-pill); width: 80px; min-width: 80px; height: 80px; object-fit: cover; border: 0; box-shadow: none;
  }
  & #settings-form .mb-6.flex.items-center { gap: 16px; }
  & #settings-form .mb-6.flex.items-center > div:first-child { flex: none; margin-right: 0; }

  /* butoane „Salvează" — dreapta jos în card, ca în machetă */
  & #settings-form .shadow-card > div > button[type="submit"],
  & #settings-form > .shadow-card button[type="submit"] { margin-left: auto; display: flex; }

  /* coloana din dreapta: 2FA / cheie API / ștergere cont */
  & .grid.lg\:grid-cols-3 > div:not(.lg\:col-span-2) > .shadow-card + .shadow-card { margin-top: 24px; }
  & .shadow-card:has(a[href*="delete"], button[data-target*="delete" i], [data-target*="deleteModal"]) {
    border-color: color-mix(in oklab, var(--ln-danger) 55%, transparent);
    background: color-mix(in oklab, var(--ln-danger-soft) 40%, var(--ln-card));
  }
  & .shadow-card:has(a[href*="delete"], [data-target*="deleteModal"]) h2 { color: var(--ln-danger); }

  /* coloana din dreapta: acțiunile = contur primar (secundar), ștergerea = distructiv */
  & .grid.lg\:grid-cols-3 > div:not(.lg\:col-span-2) a.w-full.border {
    border: 2px solid var(--ln-primary); color: var(--ln-primary-alt); background: transparent; box-shadow: none;
    border-radius: var(--ln-r-pill); min-height: 44px; font-weight: 600;
  }
  & .grid.lg\:grid-cols-3 > div:not(.lg\:col-span-2) a.w-full.border:hover { background: var(--ln-primary-soft); }
  & .grid.lg\:grid-cols-3 > div:not(.lg\:col-span-2) a.w-full.border[data-target="#deleteModal"] { border-color: var(--ln-danger); color: var(--ln-danger); }
  & .grid.lg\:grid-cols-3 > div:not(.lg\:col-span-2) a.w-full.border[data-target="#deleteModal"]:hover { background: var(--ln-danger-solid); border-color: var(--ln-danger-solid); color: #fff; }

  /* avertisment „alegeți un nume de utilizator" */
  & .custom-alert {
    background: var(--ln-warning-soft); border: 1px solid color-mix(in oklab, var(--ln-warning) 40%, transparent);
    border-radius: var(--ln-r-lg); color: var(--ln-warning); margin-bottom: 24px; padding: 14px 18px;
  }
  & .custom-alert i { color: var(--ln-warning); }

  /* rânduri cu comutator (Preferințe): separatoare, ca în machetă */
  & #settings-form .flex.items-start.gap-3 { align-items: center; }
  & #settings-form .grid.gap-4.mb-2 > div > .mb-6:has(> .flex.items-start) { margin-bottom: 0; padding-block: 16px; border-top: 1px solid var(--ln-border); }
  & #settings-form .grid.gap-4.mb-2:not(.sm\:grid-cols-2) { margin-bottom: 20px !important; }
}

/* ---------------------------------------------------------------------------
   4. FACTURARE  (user/billing.php) — macheta „Facturare / planuri"
   Plan curent pe suprafață accentuată; istoric plăți ca tabel de facturi.
   `display: contents` pe cele două coloane lasă cardurile să se așeze direct în grilă (fără a modifica șablonul).
   --------------------------------------------------------------------------- */
:where(html:has(.lg\:grid-cols-12 > .lg\:col-span-8)) {
  & .shadow-card.shadow-card { overflow: hidden; }
  /* coloanele devin transparente pentru grilă: planul curent urcă primul (și pe mobil), istoricul coboară */
  & .lg\:grid-cols-12:has(> .lg\:col-span-8) { gap: 24px; align-items: start; }
  & .lg\:grid-cols-12 > .lg\:col-span-8, & .lg\:grid-cols-12 > .lg\:col-span-4 { display: contents; }
  & .lg\:grid-cols-12 > .lg\:col-span-4 > .shadow-card:first-child { order: -2; }
  & .lg\:grid-cols-12 > .lg\:col-span-4 > .shadow-card:not(:first-child) { order: -1; }
  @media (min-width: 1024px) {
    /* planul curent pe tot rândul; dacă există și carduri laterale (voucher, administrare): 7 + 5 coloane */
    & .lg\:grid-cols-12 > .lg\:col-span-4 > .shadow-card:first-child { grid-column: 1 / -1; grid-row: 1; }
    & .lg\:grid-cols-12:has(> .lg\:col-span-4 > .shadow-card:nth-child(2)) > .lg\:col-span-4 > .shadow-card:first-child { grid-column: 1 / span 7; }
    & .lg\:grid-cols-12 > .lg\:col-span-4 > .shadow-card:not(:first-child) { grid-column: 8 / span 5; }
    /* istoric: toată lățimea, dedesubt */
    & .lg\:grid-cols-12 > .lg\:col-span-8 > .shadow-card { grid-column: 1 / -1; grid-row: 3; }
    & .lg\:grid-cols-12 > .lg\:col-span-8 > .shadow-card:first-child:not(:last-child) { grid-row: 2; }
  }
  @media (max-width: 639px) {
    & .lg\:col-span-8 table td, & .lg\:col-span-8 table th { padding: 12px 10px; }
    & .lg\:col-span-8 table td:first-child { word-break: break-all; font-size: 12px; }
    & .lg\:col-span-8 table td a[class~="bg-black"] { padding-inline: 12px; white-space: nowrap; }
  }

  /* planul curent = suprafață accentuată */
  & .lg\:grid-cols-12 > .lg\:col-span-4 > .shadow-card:first-child:has(a[href$="/user/plans"]) {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--ln-surface-accent); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--ln-r-2xl); color: #fff; box-shadow: var(--ln-shadow-3);
  }
  & .lg\:grid-cols-12 > .lg\:col-span-4 > .shadow-card:first-child:has(a[href$="/user/plans"])::before,
  & .lg\:grid-cols-12 > .lg\:col-span-4 > .shadow-card:first-child:has(a[href$="/user/plans"])::after {
    content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; border-radius: 50%; filter: blur(64px); pointer-events: none;
  }
  & .lg\:grid-cols-12 > .lg\:col-span-4 > .shadow-card:first-child:has(a[href$="/user/plans"])::before { background: var(--ln-blob-1); top: -90px; right: -60px; }
  & .lg\:grid-cols-12 > .lg\:col-span-4 > .shadow-card:first-child:has(a[href$="/user/plans"])::after { background: var(--ln-blob-2); bottom: -110px; left: -70px; }
  & .shadow-card:has(a[href$="/user/plans"]) > div.border-b:first-child { border-color: rgba(255, 255, 255, .12); padding-bottom: 12px; }
  & .shadow-card:has(a[href$="/user/plans"]) h2.uppercase {
    color: #a6b6de; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  }
  & .shadow-card:has(a[href$="/user/plans"]) .text-center { text-align: left; margin-bottom: 20px !important; }
  & .shadow-card:has(a[href$="/user/plans"]) h5 { color: #fff; font-size: 32px; line-height: 38px; letter-spacing: -.02em; font-weight: 700; margin: 0 0 4px; }
  & .shadow-card:has(a[href$="/user/plans"]) .text-center p { color: #d3dbef; }
  & .shadow-card:has(a[href$="/user/plans"]) .rounded-xl.border {
    border: 0; padding: 0; background: transparent;
  }
  /* lista de funcții: doar cele incluse, ca etichete pe 2–3 coloane */
  & .shadow-card:has(a[href$="/user/plans"]) ul {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0;
  }
  & .shadow-card:has(a[href$="/user/plans"]) ul > li {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--ln-r-pill);
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: #ffffff; font-size: 13px; line-height: 18px;
  }
  & .shadow-card:has(a[href$="/user/plans"]) ul > li:has(.fa-times-circle) { display: none; }
  & .shadow-card:has(a[href$="/user/plans"]) ul > li:nth-child(-n+3) {      /* adresele, click-urile, retenția = cifrele-cheie */
    flex: 1 1 30%; flex-direction: column; align-items: flex-start; border-radius: var(--ln-r-lg); padding: 12px 16px;
    background: rgba(255, 255, 255, .1); font-weight: 600; font-size: 14px;
  }
  & .shadow-card:has(a[href$="/user/plans"]) ul i.fa-check-circle { color: var(--ln-chart-4); font-size: 12px; }
  & .shadow-card:has(a[href$="/user/plans"]) ul > li:nth-child(-n+3) i { display: none; }
  & .shadow-card:has(a[href$="/user/plans"]) a[href$="/user/plans"] {
    width: auto; display: inline-flex; margin-top: 24px; min-height: 48px; padding-inline: 28px;
  }

  /* istoric plăți = „Facturi" */
  & .lg\:col-span-8 table td:first-child { font-family: var(--ln-font-mono); font-weight: 600; color: var(--ln-heading); font-size: 13px; }
  & .lg\:col-span-8 table td a[class~="bg-black"] { min-height: 32px; padding-inline: 14px; font-size: 12px; }
}

/* ---------------------------------------------------------------------------
   5. PLANURI  (user/plans.php)
   --------------------------------------------------------------------------- */
:where(html:has(.pricing-container)) {
  & .shadow-card.shadow-card { overflow: hidden; }
  & .pricing-container article.shadow-card {
    border-radius: 20px; padding: 28px; transition: box-shadow .2s, transform .2s;
  }
  & .pricing-container article.shadow-card:hover { box-shadow: var(--ln-shadow-3); }
  & .pricing-container article.shadow-card[class*="border-black "],
  & .pricing-container article.shadow-card.border-black { border: 2px solid var(--ln-primary); }
  & .pricing-container article h3 { color: var(--ln-text-3); letter-spacing: .1em; font-size: 12px; font-weight: 600; }
  & .pricing-container article .price { color: var(--ln-heading); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  & .pricing-container article ul li > span:first-child { color: var(--ln-text-2); }
  & .pricing-container article ul li .font-semibold { color: var(--ln-heading); }
  & .pricing-container article ul { gap: 0; }
  & .pricing-container article ul > li { padding-block: 6px; border-bottom: 1px solid var(--ln-border); }
  & .pricing-container article ul > li:last-child { border-bottom: 0; }

  /* fără preț (pro=0 în producție, sau preț nesetat): „La ofertă" în loc de „/lună" orfan */
  & .pricing-container article .price:empty::before { content: "La ofertă"; font-size: 22px; line-height: 36px; letter-spacing: -.01em; }
  & .pricing-container article .price:empty + [data-toggle="pricingterm"] { display: none; }

  /* plan curent (bandă de sus) */
  & .pricing-container > .shadow-card:first-child {
    border-radius: 20px; padding: 20px 24px;
  }
  & .pricing-container > .shadow-card:first-child > div > p:first-child { color: var(--ln-text-3); letter-spacing: .1em; font-size: 11px; }
  & .pricing-container > .shadow-card:first-child > div > p.font-semibold { color: var(--ln-heading); font-size: 18px; }

  /* comutator perioadă (Lunar / Anual): segment pilulă */
  & .pricing-container [role="group"] {
    background: var(--ln-bg-2); border: 1px solid var(--ln-border); border-radius: var(--ln-r-pill); padding: 4px; gap: 2px;
  }
  & .pricing-container [role="group"] > button { border-radius: var(--ln-r-pill); font-weight: 600; background: transparent; color: var(--ln-text-3); box-shadow: none; }
  & .pricing-container [role="group"] > button[data-active="true"] {
    background: var(--ln-primary-soft); color: var(--ln-primary-alt);
  }
  & .pricing-container [role="group"] + p { color: var(--ln-success); }

  /* tabelul de comparare */
  & .pricing-container table { font-size: 14px; }
  & .pricing-container table td, & .pricing-container table th { padding-block: 14px; }
  & .pricing-container table tr > td:first-child { color: var(--ln-text); font-weight: 600; }
  & .pricing-container thead th { color: var(--ln-heading); text-transform: none; letter-spacing: 0; font-size: 14px; }
  & .pricing-container tbody tr:hover td { background: transparent; }
  & .pricing-container tbody td[colspan], & .pricing-container tbody th[colspan] { background: var(--ln-bg-2); color: var(--ln-text-3); letter-spacing: .1em; font-size: 11px; text-transform: uppercase; font-weight: 600; }
  & .pricing-container i.fa-check-circle { color: var(--ln-success); }
  & .pricing-container i.fa-times-circle { color: var(--ln-text-3); opacity: .55; }

  /* CTA „Contactează echipa de vânzări" + FAQ */
  & .pricing-container details, & .pricing-container [data-faq] { border-color: var(--ln-border); }
}