/* =============================================================
   LIQUID GLASS — SUPERFICI ("liquid glass dosato")
   Spec: docs/kb/specs/2026-08-02-liquid-glass-design-system.md §4
   Layer: surfaces — deviazioni per learning space, admin, portal

   Regola: il vetro resta solo sul chrome di navigazione/contenimento
   (navbar, sidebar, pannelli fluttuanti, dropdown, modal, toast,
   badge/chip, auth panel, footer). Le superfici di CONTENUTO
   (card corso, card dashboard, curriculum, player, recensioni)
   diventano solide: stessa famiglia cromatica, zero backdrop-filter.

   Attivo solo sotto [data-ds="lg"] — vedi lg-tokens.css.

   NOTA CASCADE: i CSS legacy (liquid-courses-v321, liquid-dashboards-v500,
   liquid-design-system-v103, liquid-learn-v321) NON usano @layer, e le
   regole non-layerate vincono su quelle layerate a parita' di origine.
   Le proprieta' di materiale che devono battere quei file portano quindi
   !important: e' deliberato e circoscritto a questo layer di deviazioni.
   ============================================================= */

@layer surfaces {

  /* ── Shared chrome bridge ─────────────────────────────────
     These declarations intentionally use the lg gate and a narrow set of
     important properties: the legacy files are unlayered and otherwise win
     over the new layered system. */
  :root[data-ds="lg"] .lp-navbar {
    background: var(--lp-surface-strong) !important;
    backdrop-filter: blur(var(--lg-3)) saturate(var(--lg-sat)) !important;
    -webkit-backdrop-filter: blur(var(--lg-3)) saturate(var(--lg-sat)) !important;
    border-bottom: 1px solid var(--lp-border) !important;
    box-shadow: 0 1px 0 var(--lg-spec-bottom), 0 12px 34px rgba(0,0,0,.20) !important;
  }

  :root[data-ds="lg"] .lp-navbar-link,
  :root[data-ds="lg"] .lp-navbar-dropdown > button {
    color: var(--lp-muted) !important;
    border-radius: var(--lg-r-pill) !important;
    transition: color var(--lg-fast) var(--lg-ease), background-color var(--lg-fast) var(--lg-ease), border-color var(--lg-fast) var(--lg-ease) !important;
  }

  :root[data-ds="lg"] .lp-navbar-link:hover,
  :root[data-ds="lg"] .lp-navbar-link--active,
  :root[data-ds="lg"] .lp-navbar-dropdown > button:hover,
  :root[data-ds="lg"] .lp-navbar-dropdown > button[aria-expanded="true"] {
    color: var(--lp-text) !important;
    background: var(--lg-control-hover) !important;
    border-color: var(--lp-border-strong) !important;
  }

  :root[data-ds="lg"] .lp-navbar-dropdown-panel {
    background: var(--lp-surface-overlay) !important;
    backdrop-filter: blur(var(--lg-4)) saturate(var(--lg-sat)) !important;
    -webkit-backdrop-filter: blur(var(--lg-4)) saturate(var(--lg-sat)) !important;
    border: 1px solid var(--lp-border-strong) !important;
    border-radius: var(--lg-r-panel) !important;
    box-shadow: var(--lg-shadow-4) !important;
  }

  :root[data-ds="lg"] .lp-navbar-dropdown-item:hover,
  :root[data-ds="lg"] .lp-navbar-dropdown-item:focus-visible {
    background: var(--lg-control-hover) !important;
  }

  :root[data-ds="lg"] .lp-navbar-mobile-panel {
    background: var(--lp-surface-overlay) !important;
    backdrop-filter: blur(var(--lg-4)) saturate(var(--lg-sat)) !important;
    -webkit-backdrop-filter: blur(var(--lg-4)) saturate(var(--lg-sat)) !important;
    border-bottom-color: var(--lp-border) !important;
  }

  /* Content surfaces are calm and opaque. Glass is reserved for chrome,
     overlays and transient controls, which keeps dense learning screens
     readable and closer to mature European learning products. */
  :root[data-ds="lg"] :is(.hm-course-card, .lc-card, .course-card-premium, .card, .course-card, .category-card, .plan-card, .instructor-card) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--lg-content) !important;
    border: 1px solid var(--lg-content-edge) !important;
    border-radius: var(--lg-r-card) !important;
    box-shadow: var(--lg-shadow-2) !important;
  }

  :root[data-ds="lg"] :is(.hm-course-card, .lc-card, .course-card-premium, .card, .course-card, .category-card, .plan-card, .instructor-card):hover {
    border-color: rgba(255, 138, 73, 0.42) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.34), 0 0 0 1px rgba(255,138,73,.08) !important;
  }

  :root[data-ds="lg"] :is(.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
    background: var(--lg-control) !important;
    border-color: var(--lp-border) !important;
    color: var(--lp-text) !important;
    border-radius: var(--lg-r-chip) !important;
  }

  :root[data-ds="lg"] :is(.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus {
    border-color: var(--lg-focus) !important;
    box-shadow: 0 0 0 3px rgba(255, 178, 127, 0.18) !important;
    outline: none !important;
  }

  :root[data-ds="lg"] :focus-visible {
    outline: 2px solid var(--lg-focus) !important;
    outline-offset: 3px;
  }

  /* Stati applicativi condivisi: 403/404/loading/fatal mantengono lo stesso
     linguaggio visivo senza esporre eccezioni o ricorrere a stili inline. */
  .app-state {
    width: min(560px, calc(100% - 2rem));
    min-height: 280px;
    margin: clamp(5rem, 14vh, 9rem) auto;
    padding: clamp(1.5rem, 5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    text-align: center;
    color: var(--lp-text);
    background: var(--lg-content, #101522);
    border: 1px solid var(--lp-border-strong);
    border-radius: var(--lg-r-panel, 24px);
    box-shadow: var(--lg-shadow-3);
  }
  .app-state h1 {
    margin: 0;
    color: var(--lp-text);
    font-size: clamp(1.55rem, 4vw, 2.15rem);
    line-height: 1.15;
  }
  .app-state p {
    max-width: 48ch;
    margin: 0 0 .65rem;
    color: var(--lp-muted);
    line-height: 1.6;
  }
  .app-state__code {
    color: var(--lp-brand, #e87c2a);
    font: 750 clamp(2.5rem, 8vw, 4rem)/1 var(--lp-font-display, sans-serif);
    letter-spacing: -.04em;
  }
  .app-state__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #ffc2c2;
    background: rgba(229, 72, 77, .14);
    border: 1px solid rgba(229, 72, 77, .34);
  }
  .app-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
  }
  .app-state__action {
    min-height: 44px;
    padding: .7rem 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #7c5cff;
    border-radius: 999px;
    background: #7c5cff;
    color: #fff;
    font: 700 .92rem/1 var(--lp-font-body, sans-serif);
    text-decoration: none;
    cursor: pointer;
  }
  .app-state__action:hover { background: #927bff; border-color: #927bff; }
  .app-state__action--secondary {
    background: transparent;
    border-color: var(--lp-border-strong);
    color: var(--lp-text);
  }
  .app-state--loading { min-height: 220px; }
  .app-state__spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(246, 248, 255, .18);
    border-top-color: #7c5cff;
    border-radius: 50%;
    animation: app-state-spin .8s linear infinite;
  }
  @keyframes app-state-spin { to { transform: rotate(1turn); } }

  @media (max-width: 640px) {
    .app-state { min-height: 240px; margin-block: 5.25rem 2rem; }
    .app-state__actions,
    .app-state__action { width: 100%; }
  }
  @media (max-width: 1023px) {
    .breadcrumb a.breadcrumb-item,
    a.breadcrumb-item {
      min-width: 44px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .app-state__spinner { animation: none; border-top-color: currentColor; }
  }
  @media (prefers-reduced-transparency: reduce) {
    :root[data-ds="lg"] .blazored-toast { backdrop-filter: none; -webkit-backdrop-filter: none; }
  }
  @media (forced-colors: active) {
    .app-state,
    .app-state__action { border: 1px solid CanvasText; }
  }

  /* ── Superfici solide di contenuto ─────────────────────────
     Classi reali dal markup (verificate sui Razor, v4.4.0):
       .lp-card, .lp-content-panel  -> pannelli DS (Pricing, FAQ, AIAssistant…)
       .lc-card                     -> card corso nel catalogo (Courses/Index)
       .course-card-premium         -> Components/CourseCard
       .stat-card, .section-card,
       .course-item                 -> Pages/Dashboard
       .review-card                 -> Pages/Courses/Detail
       .ll-curr-item                -> curriculum (Pages/Learn)
       .ll-player-wrap              -> player video (Pages/Learn)
       .ll-ai-bubble                -> pannello AI tutor (Pages/Learn) */
  :root[data-ds="lg"] :is(
    .lp-card, .lp-content-panel, .lc-card, .course-card-premium,
    .stat-card, .section-card, .course-item, .review-card,
    .ll-curr-item, .ll-player-wrap, .ll-ai-bubble
  ) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: var(--lg-surface) !important;
    border: 1px solid var(--lg-surface-edge) !important;
    box-shadow: var(--lg-shadow-2) !important;
  }

  /* Raggio concentrico solo sulle card vere e proprie (§4):
     le righe di curriculum e il player tengono il proprio raggio. */
  :root[data-ds="lg"] :is(
    .lp-card, .lp-content-panel, .lc-card, .course-card-premium,
    .stat-card, .section-card, .review-card
  ) {
    border-radius: var(--lg-r-card) !important;
  }

  /* Niente lensing ereditato da lg-components sulle card di contenuto:
     il ::before rifrattivo resta solo sul chrome di navigazione. */
  :root[data-ds="lg"] :is(
    .lp-card, .lp-content-panel, .lc-card, .course-card-premium,
    .stat-card, .section-card, .course-item, .review-card,
    .ll-curr-item, .ll-player-wrap, .ll-ai-bubble
  )::before {
    content: none;
  }

  /* ── Chrome che RESTA vetro ────────────────────────────────
     lg-components copre gia' .lp-navbar, .lp-panel, .lp-auth-panel,
     .lp-dropdown, .lp-modal, .lp-toast, .lp-badge: non si toccano.
     Qui si estende la taglia lg-3 a .auth-card, la classe reale
     usata da Pages/Login.razor (non passa per AuthFormTemplate). */
  :root[data-ds="lg"] .auth-card {
    position: relative;
    backdrop-filter: blur(var(--lg-3)) saturate(var(--lg-sat)) !important;
    -webkit-backdrop-filter: blur(var(--lg-3)) saturate(var(--lg-sat)) !important;
    background-color: var(--lg-fill) !important;
    border: 1px solid var(--lg-edge) !important;
    border-radius: var(--lg-r-panel) !important;
    box-shadow:
      inset 0 1px 0 var(--lg-spec-top),
      inset 0 -1px 0 var(--lg-spec-bottom),
      var(--lg-shadow-3) !important;
  }

  /* ── Area admin ────────────────────────────────────────────
     Solo sfondo di base coerente col tema dark (--admin-bg-base e'
     gia' #06090D in admin-liquid-v501.css: qui si copre il wrapper,
     senza !important cosi' le superfici admin esistenti vincono).
     Il footer dell'area admin e' lavoro Razor di una fase successiva. */
  :root[data-ds="lg"] .lp-shell-unified[data-route-kind="admin"] {
    background-color: var(--lg-surface);
    background-color: #06090D;
  }

  /* ── CTA primaria: testo scuro su arancio (mockup liquid-glass-v2) ──
     Bianco su --c-orange (#E87C2A) e' ~2.8:1, sotto WCAG AA; il testo
     scuro #1A0F06 sale a 6.6:1. Vale per tutte le CTA primarie del sito
     (hero, navbar "Accedi", buy-box, form auth) sotto data-ds=lg. */
  :root[data-ds="lg"] .btn-primary {
    color: #1A0F06 !important;
    font-weight: 700;
  }

  /* ── Unificazione v4.4.9: superfici solide di contenuto ─────
     Review Liquid Glass su tutte le pagine (staging liquid-web):
     le classi di contenuto sotto — markup marketing, admin, app,
     devconsole, learning, portal — ricevono lo stesso materiale
     solido delle card gia' migrate, senza toccare i Razor.
     neutralizza anche i vetri legacy non governati: .nl-card
     (liquid-pages-v1 blur 20px), .af-card/.af-tab-bar (audience-first
     blur 12px), .ils-* (life-stages blur 12px), .lp-course-card
     (portal blur 14px). */
  :root[data-ds="lg"] :is(
    /* marketing warm + campagne */
    .ev-card, .cm-card, .gd-card, .gb-card, .gs-card, .zi-card,
    .rd-card, .ac-card, .acd-flow-card, .aga-card, .cai-card,
    .cg-card, .tl-card, .tl-panel, .wfr-panel, .wfr-bridge-card,
    .sgh-card, .sgh-bridge-card, .isp-card, .ipp-card, .az-stat-card,
    .b2b-card, .guide-card, .hm-cat-tile, .benefit-card, .step-card,
    .story-card, .cp-esco-card, .cp-b2b-card, .ilc-banner-card,
    .nl-card,
    /* pagine AI e app */
    .agd-card, .alc-panel, .alc-diff-card, .sgr-panel, .sgd-card,
    .sgd-bridge-card, .sgd-panel, .sgd-kpi, .lh-card, .ll-card,
    .ll-panel, .db-rec-card, .ilck-panel, .asc-panel, .asc-course-card,
    .mb-card,
    /* catalogo/portal: vetro legacy portato a solido */
    .af-card, .af-tab-bar, .ils-hero-card, .ils-course-card,
    .ils-courses-panel, .ils-tabs, .lp-course-card, .lp-cat-card,
    .lp-cat-feat, .lp-cat-stats,
    /* learning space */
    .ll-qa-panel, .ai-takeaways-panel, .student-notes-panel,
    .ll-exercise-files-panel, .ls-contents-panel, .transcript-panel,
    .il-feedback-card, .note-card, .enrollment-card,
    /* dashboard app, account, commerce */
    .content-card, .clean-card, .form-card, .kpi-card, .al-kpi,
    .stats-card, .stat-box, .ic-stat, .ic-course-card, .rv-stat-card,
    .rating-distribution, .id-stat-card, .mc-card, .metric-card,
    .user-summary-card, .report-type-card, .serp-card, .pod-metric-card,
    .new-transcription-card, .prometheus-metrics-card,
    .translation-progress-card, .analytics-card, .settings-card,
    .profile-sidebar-card, .profile-content-card, .security-card,
    .wallet-card, .certificate-card, .wishlist-card, .confirmation-card,
    .short-card, .pli-aside-card, .tpp-aside-card, .aidata-card,
    .aidata-list-card,
    /* admin */
    .al-card, .admin-panel, .chart-card, .ab-card, .ab-kpi, .at-phase,
    .transcript-job-card,
    /* devconsole + developers */
    .dc-card, .dc-kpi-card, .dc-info-card, .dc-webhook-card,
    .dc-empty-card, .dc-plan-card, .dc-table, .dc-logs-table-wrap,
    .sdk-rest-card, .dp-quick-card, .dp-topic-card, .dp-info-card,
    .qs-success-card
  ) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: var(--lg-surface) !important;
    border: 1px solid var(--lg-surface-edge) !important;
    box-shadow: var(--lg-shadow-2) !important;
  }

  /* Raggio concentrico (§4) sulle card vere del gruppo sopra;
     pannelli, tabelle e wrapper tengono il proprio. */
  :root[data-ds="lg"] :is(
    .ev-card, .cm-card, .gd-card, .gb-card, .gs-card, .zi-card,
    .rd-card, .ac-card, .acd-flow-card, .aga-card, .cai-card,
    .cg-card, .tl-card, .sgh-card, .sgh-bridge-card, .isp-card,
    .ipp-card, .az-stat-card, .b2b-card, .guide-card, .benefit-card,
    .step-card, .story-card, .cp-esco-card, .cp-b2b-card,
    .ilc-banner-card, .nl-card, .agd-card, .sgd-card, .sgd-bridge-card,
    .lh-card, .ll-card, .db-rec-card, .asc-course-card, .mb-card,
    .af-card, .ils-hero-card, .ils-course-card, .lp-course-card,
    .lp-cat-card, .lp-cat-feat, .il-feedback-card, .note-card,
    .enrollment-card, .content-card, .clean-card, .form-card,
    .kpi-card, .al-kpi, .stats-card, .ic-course-card, .rv-stat-card,
    .id-stat-card, .mc-card, .metric-card, .user-summary-card,
    .report-type-card, .serp-card, .pod-metric-card,
    .new-transcription-card, .translation-progress-card,
    .analytics-card, .settings-card, .profile-sidebar-card,
    .profile-content-card, .security-card, .wallet-card,
    .certificate-card, .wishlist-card, .confirmation-card, .short-card,
    .pli-aside-card, .tpp-aside-card, .aidata-card, .aidata-list-card,
    .al-card, .chart-card, .ab-card, .at-phase, .dc-card, .dc-kpi-card,
    .dc-info-card, .dc-webhook-card, .dc-empty-card, .dc-plan-card,
    .sdk-rest-card, .dp-quick-card, .dp-topic-card, .dp-info-card,
    .qs-success-card
  ) {
    border-radius: var(--lg-r-card) !important;
  }

  /* Nessun lensing ereditato sulle nuove superfici solide. */
  :root[data-ds="lg"] :is(
    .ev-card, .cm-card, .gd-card, .dc-card, .content-card, .al-card,
    .kpi-card, .mc-card, .wishlist-card, .certificate-card,
    .confirmation-card, .nl-card, .af-card, .lp-course-card
  )::before {
    content: none;
  }

  /* Wrapper di pagina che portano un fondo proprio duplicando lo
     shell: sotto lg tornano trasparenti e lasciano parlare il canvas. */
  :root[data-ds="lg"] :is(.dc-page, .at-page, .at-container, .sgd-page) {
    background: transparent !important;
  }

  /* ── Chrome dello learning space e mobile ─────────────────────
     blur artigianali (16/18px) portati sulla taglia lg-3 con i
     fallback del materiale; il resto degli stili (posizione, altezze)
     resta dove sta. */
  :root[data-ds="lg"] :is(.learn-topbar, .mobile-bottom-nav, .mobile-sticky-cta) {
    background: var(--lp-surface-strong) !important;
    backdrop-filter: blur(var(--lg-3)) saturate(var(--lg-sat)) !important;
    -webkit-backdrop-filter: blur(var(--lg-3)) saturate(var(--lg-sat)) !important;
    border-color: var(--lp-border) !important;
  }
  /* Scrim del player: overlay funzionale, taglia lg-4. */
  :root[data-ds="lg"] .il-feedback-scrim {
    background: var(--lp-surface-overlay) !important;
    backdrop-filter: blur(var(--lg-4)) saturate(var(--lg-sat)) !important;
    -webkit-backdrop-filter: blur(var(--lg-4)) saturate(var(--lg-sat)) !important;
  }

  /* ── Modali unificati (admin, devconsole, app) ────────────────
     Sei varianti artigianali + Bootstrap: stesso materiale lg-4,
     stessa leggibilita'. La sfocatura qui segnala che il fondo e'
     inerte, come da spec §4. */
  :root[data-ds="lg"] :is(
    .modal-content, .dc-modal, .aidata-modal, .response-modal,
    .delete-confirm-modal, .session-timeout-modal, .short-modal,
    .admin-cmd-modal
  ) {
    position: relative;
    backdrop-filter: blur(var(--lg-4)) saturate(var(--lg-sat)) !important;
    -webkit-backdrop-filter: blur(var(--lg-4)) saturate(var(--lg-sat)) !important;
    background: var(--lp-surface-overlay) !important;
    border: 1px solid var(--lp-border-strong) !important;
    border-radius: var(--lg-r-modal) !important;
    box-shadow:
      inset 0 1px 0 var(--lg-spec-top),
      inset 0 -1px 0 var(--lg-spec-bottom),
      var(--lg-shadow-4) !important;
    color: var(--lp-text) !important;
  }
  :root[data-ds="lg"] :is(.modal-body, .dc-modal-body) {
    color: var(--lp-text) !important;
  }
  :root[data-ds="lg"] :is(.modal-header, .modal-footer,
    .dc-modal-header, .dc-modal-footer) {
    border-color: var(--lp-border) !important;
    color: var(--lp-text) !important;
  }
  :root[data-ds="lg"] :is(.modal-title, .modal-header h3,
    .dc-modal-header h3, .dc-modal-header h2) {
    color: var(--lp-text) !important;
  }
  :root[data-ds="lg"] :is(.modal-close, .dc-modal-close) {
    color: var(--lp-muted) !important;
  }
  :root[data-ds="lg"] .dc-toast {
    background: var(--lp-surface-overlay) !important;
    border: 1px solid var(--lp-border-strong) !important;
    border-radius: var(--lg-r-panel) !important;
    box-shadow: var(--lg-shadow-3) !important;
    color: var(--lp-text) !important;
  }

  /* ── Fallback: come lg-material/lg-components ────────────── */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root[data-ds="lg"] .auth-card {
      background-color: rgba(12, 16, 30, 0.92) !important;
    }
  }
  @media (prefers-reduced-transparency: reduce) {
    :root[data-ds="lg"] .auth-card {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background-color: rgba(12, 16, 30, 0.94) !important;
    }
  }
  @media (forced-colors: active) {
    :root[data-ds="lg"] :is(
      .lp-card, .lp-content-panel, .lc-card, .course-card-premium,
      .stat-card, .section-card, .course-item, .review-card,
      .ll-curr-item, .ll-player-wrap, .ll-ai-bubble, .auth-card
    ) {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background-color: Canvas !important;
      border: 1px solid CanvasText !important;
      box-shadow: none !important;
    }
    /* Gruppo unificazione v4.4.9 (subset rappresentativo). */
    :root[data-ds="lg"] :is(
      .dc-card, .dc-kpi-card, .dc-modal, .content-card, .clean-card,
      .form-card, .kpi-card, .al-card, .admin-panel, .mc-card,
      .wishlist-card, .certificate-card, .confirmation-card,
      .nl-card, .af-card, .lp-course-card, .ev-card, .cm-card,
      .gd-card, .sgd-card, .modal-content
    ) {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background-color: Canvas !important;
      border: 1px solid CanvasText !important;
      box-shadow: none !important;
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root[data-ds="lg"] :is(.lp-navbar, .lp-navbar-dropdown-panel, .lp-navbar-mobile-panel) {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background: var(--lp-surface-overlay) !important;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    :root[data-ds="lg"] :is(.lp-navbar, .lp-navbar-dropdown-panel, .lp-navbar-mobile-panel) {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background: var(--lp-surface-overlay) !important;
    }
  }

  /* Fallback del chrome learning/mobile e dei modali unificati v4.4.9. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root[data-ds="lg"] :is(
      .learn-topbar, .mobile-bottom-nav, .mobile-sticky-cta,
      .il-feedback-scrim, .modal-content, .dc-modal, .aidata-modal,
      .response-modal, .delete-confirm-modal, .session-timeout-modal,
      .short-modal, .admin-cmd-modal
    ) {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background: var(--lp-surface-overlay) !important;
    }
  }
  @media (prefers-reduced-transparency: reduce) {
    :root[data-ds="lg"] :is(
      .learn-topbar, .mobile-bottom-nav, .mobile-sticky-cta,
      .il-feedback-scrim, .modal-content, .dc-modal, .aidata-modal,
      .response-modal, .delete-confirm-modal, .session-timeout-modal,
      .short-modal, .admin-cmd-modal
    ) {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background: var(--lp-surface-overlay) !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root[data-ds="lg"] .lp-navbar-dropdown-panel,
    :root[data-ds="lg"] :is(.hm-course-card, .lc-card, .course-card-premium) {
      animation: none !important;
      transition: none !important;
    }
  }
}

/* Blazored.Toast viene emesso in un foglio non layerizzato caricato dopo i
   layer LG. Questo bridge resta quindi deliberatamente fuori da @layer e usa
   una specificity maggiore, senza aggiungere debito !important. */
:root[data-ds="lg"] body .blazored-toast {
  background: var(--lp-surface-overlay, rgba(15, 22, 37, .96));
  border: 1px solid var(--lp-border-strong, rgba(250, 247, 240, .2));
  color: var(--lp-text, #f5f7fb);
  box-shadow: var(--lg-shadow-4, 0 18px 44px rgba(0, 0, 0, .42));
}
:root[data-ds="lg"] body .blazored-toast-close { color: var(--lp-muted, #aab3c5); }

/* Contenitore editoriali: la classe .lp-container e' usata dagli
   articoli blog (Pages/BlogPosts) ma non era mai stata definita in
   nessun CSS. Non gated: il bug esiste in entrambi i design system. */
.lp-container {
  width: min(1180px, calc(100% - 2rem));
  margin-inline: auto;
}

/* Utility e superfici delle pagine stub dell'area riservata
   (/account/subscription, /billing): classi presenti nel markup ma
   mai definite in nessun CSS, quindi rese senza stile. Non gated:
   il bug esiste in entrambi i design system. Sotto lg il materiale
   di .lp-panel resta il vetro governato da lg-components (regola
   gated su :root[data-ds="lg"], quindi piu' specifica). */
.lp-main {
  display: block;
  width: 100%;
}

.lp-section {
  padding-block: clamp(2rem, 6vh, 4rem);
}

.lp-container--narrow {
  max-width: 720px;
}

.lp-text-center {
  text-align: center;
}

.lp-eyebrow {
  margin: 0 0 .75rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lp-color-accent);
}

.lp-lead {
  max-width: 46ch;
  margin: 0 auto 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--lp-color-text-muted);
}

.lp-panel {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--lg-r-panel, 26px);
}

.lp-panel > h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.2;
  color: var(--lp-color-text);
}

/* Rollback legacy: senza il gate lg il pannello era una scatola
   trasparente senza bordo. La base solida usa la famiglia scura dei
   token fantasma, cosi' la pagina resta leggibile anche in ?ds=legacy. */
:root:not([data-ds="lg"]) .lp-panel {
  background-color: var(--lp-color-surface);
  border: 1px solid var(--lp-color-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
}

/* Stato di apertura condiviso: una comunicazione chiara su tutte le
   superfici pubbliche, compatta e leggibile anche su mobile. */
.lp-launch-banner {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .75rem;
  width: min(1180px, calc(100% - 2rem));
  /* La navbar è fixed: il banner deve iniziare sotto la sua altezza. */
  margin: 88px auto 0;
  padding: .7rem 1rem;
  border: 1px solid rgba(232,124,42,.32);
  border-radius: 12px;
  color: rgba(245,247,250,.9);
  background: linear-gradient(100deg, rgba(232,124,42,.16), rgba(24,37,58,.72));
  box-shadow: 0 8px 24px rgba(0,0,0,.16), inset 0 1px 0 var(--lg-spec-bottom);
  font-size: .82rem;
  line-height: 1.35;
}
.lp-launch-banner__label { flex: 0 0 auto; color: #ffc18f; font-size: .75rem; font-weight: 800; letter-spacing: .1em; }
.lp-launch-banner a {
  margin-left: auto; flex: 0 0 auto; color: #ffd2ad; font-weight: 700; text-decoration: none; white-space: nowrap;
  display: inline-block; padding-block: 13px; margin-block: -13px;
}
.lp-launch-banner a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .lp-launch-banner { align-items: flex-start; flex-wrap: wrap; gap: .35rem .6rem; margin-top: 80px; }
  .lp-launch-banner a { margin-left: 0; width: 100%; }
}

/* Quando il banner occupa il primo blocco della pagina, il contenuto non deve
   aggiungere anche l'offset completo della navbar. Le route app/admin, che non
   mostrano il banner, conservano il comportamento standard. */
.lp-shell-unified--public .lp-main-content { padding-top: 24px; }

/* Touch-first composition is isolated behind data-mobile so desktop and the
   mobile legacy rollback keep their existing geometry. */
.mobile-footer-sections { display:none; }
@layer surfaces {
  @media (max-width: 1023px) {
    :root[data-mobile="next"] .lp-shell-unified {
      min-width: 0;
      overflow-x: clip;
    }
    :root[data-mobile="next"] .lp-main-content {
      min-width: 0;
      padding-top: calc(64px + env(safe-area-inset-top));
      padding-bottom: 2rem;
    }
    :root[data-mobile="next"] .lp-shell-unified--public .lp-main-content { padding-top: 1rem; }
    :root[data-mobile="next"] .lp-launch-banner {
      width: calc(100% - 2rem);
      margin-top: calc(76px + env(safe-area-inset-top));
    }
    :root[data-mobile="next"] footer.liquid-footer {
      position: relative !important;
      inset: auto !important;
      z-index: 20;
      padding: 1.25rem max(1rem,env(safe-area-inset-right)) max(1.25rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
      transform: none !important;
      opacity: 1 !important;
    }
    :root[data-mobile="next"] .liquid-footer-row { align-items:flex-start; flex-direction:column; gap:1rem; }
    :root[data-mobile="next"] .liquid-footer-nav { display:none; }
    :root[data-mobile="next"] .liquid-footer-nav a { display:flex; align-items:center; min-height:44px; }
    :root[data-mobile="next"] .liquid-footer-meta { width:100%; justify-content:space-between; }
    :root[data-mobile="next"] .mobile-footer-sections { display:grid; width:100%; gap:.35rem; }
    :root[data-mobile="next"] .mobile-footer-sections details { border-top:1px solid var(--lp-border); }
    :root[data-mobile="next"] .mobile-footer-sections summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:700; }
    :root[data-mobile="next"] .mobile-footer-sections a { min-height:44px; display:flex; align-items:center; color:var(--lp-muted); text-decoration:none; }

    :root[data-mobile="next"] :is(button,a,input,select,textarea,[role="button"]) { scroll-margin-top:5rem; }
    :root[data-mobile="next"] :is(
      button,[role="button"],select,textarea,
      input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])
    ) { min-height:44px !important; }
    :root[data-mobile="next"] :is(nav a[href],a.breadcrumb-item,.quick-nav-link) {
      display:inline-flex;
      align-items:center;
      min-height:44px !important;
    }
    :root[data-mobile="next"] input[type="color"] { min-width:44px; }
    :root[data-mobile="next"] label:has(> input:is([type="checkbox"],[type="radio"])) {
      display:inline-flex;
      align-items:center;
      min-width:44px;
      min-height:44px;
    }
    :root[data-mobile="next"] :is(.row,.form-row,.settings-grid,.dashboard-grid,.stats-grid,.course-detail-layout) { min-width:0; }
    :root[data-mobile="next"] table { max-width:100%; }
    :root[data-mobile="next"] :is(.table-responsive,.admin-table-container,.data-table-container,.data-table-wrapper) {
      max-width:100%;
      overflow-x:auto;
      overscroll-behavior-inline:contain;
      -webkit-overflow-scrolling:touch;
    }
    :root[data-mobile="next"] :is(img,video,canvas,svg) { max-width:100%; }
    :root[data-mobile="next"] :is(input,select,textarea) { max-width:100%; font-size:max(1rem,16px); }
  }

  @media (max-width: 767px) {
    :root[data-mobile="next"] :is(.dashboard-grid,.stats-grid,.settings-grid,.course-grid,.courses-grid,.features-grid) { grid-template-columns:minmax(0,1fr) !important; }
    :root[data-mobile="next"] :is(.form-row,.checkout-layout,.billing-layout,.profile-layout,.course-detail-layout) { display:grid !important; grid-template-columns:minmax(0,1fr) !important; }
    :root[data-mobile="next"] :is(.modal-content,.dc-modal,.aidata-modal,.response-modal,.delete-confirm-modal) {
      width:calc(100% - 1rem) !important;
      max-height:calc(100dvh - 1rem);
      margin:max(.5rem,env(safe-area-inset-top)) auto max(.5rem,env(safe-area-inset-bottom));
      overflow:auto;
    }
    :root[data-mobile="next"] table[data-mobile-table="cards"] { display:block; width:100%; }
    :root[data-mobile="next"] table[data-mobile-table="cards"] thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
    :root[data-mobile="next"] table[data-mobile-table="cards"] :is(tbody,tr,td) { display:block; width:100%; }
    :root[data-mobile="next"] table[data-mobile-table="cards"] tbody { display:grid; gap:.75rem; }
    :root[data-mobile="next"] table[data-mobile-table="cards"] tr {
      padding:.75rem;
      border:1px solid var(--lp-border);
      border-radius:var(--lg-r-card);
      background:var(--lp-surface,rgba(12,16,30,.82));
    }
    :root[data-mobile="next"] table[data-mobile-table="cards"] td {
      display:grid;
      grid-template-columns:minmax(7rem,40%) minmax(0,1fr);
      gap:.75rem;
      align-items:center;
      min-height:44px;
      padding:.45rem 0;
      border:0;
      overflow-wrap:anywhere;
    }
    :root[data-mobile="next"] table[data-mobile-table="cards"] td::before { content:attr(data-label); color:var(--lp-muted); font-size:.78rem; font-weight:700; }
    /* Tabelle con colspan/rowspan non possono diventare card senza perdere la
       relazione fra intestazioni e celle. In assenza di un wrapper esplicito la
       tabella stessa diventa quindi il contenitore di scorrimento. */
    :root[data-mobile="next"] table[data-mobile-table="scroll"] {
      display:block;
      width:100%;
      max-width:100%;
      overflow-x:auto;
      overscroll-behavior-inline:contain;
      -webkit-overflow-scrolling:touch;
      scrollbar-gutter:stable;
    }
  }

  @media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
    :root[data-mobile="next"] .mobile-menu-sheet { animation:lg-mobile-sheet-in var(--lg-normal) var(--lg-ease) both; }
  }
  @keyframes lg-mobile-sheet-in { from { opacity:0; transform:translateX(1rem); } to { opacity:1; transform:none; } }

  @media (max-width: 767px), (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) {
    :root[data-mobile="next"] :is(#bg-canvas,.liquid-mesh-bg-layer) { display:none !important; }
    :root[data-mobile="next"] .liquid-hero-vignette { opacity:.35; }
  }
  /* Save-Data, memoria/core ridotti e preferenze di accessibilita' devono
     spegnere anche il costo WebGL sui tablet, non soltanto il blur delle card. */
  :root[data-mobile-performance="low"] :is(#bg-canvas,.liquid-mesh-bg-layer) {
    display:none !important;
  }
  :root[data-mobile-performance="low"] .liquid-hero-vignette { opacity:.24 !important; }
  :root[data-mobile-performance="low"][data-ds="lg"] :is(
    .lg,.lp-card,.lp-panel,.lp-navbar,.lp-auth-panel,.lp-modal,.lp-dropdown,.lp-toast,
    .auth-card,.mobile-shell-header,.mobile-menu-sheet,footer.liquid-footer,.maestro-preview
  ) {
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    box-shadow:0 8px 24px rgba(0,0,0,.24) !important;
  }
  :root[data-mobile-performance="low"][data-ds="lg"] :is(
    .lg,.lp-card,.lp-panel,.lp-navbar,.lp-auth-panel,.lp-modal,.lp-dropdown,.lp-toast,
    .auth-card,.mobile-shell-header,.mobile-menu-sheet,footer.liquid-footer,.maestro-preview
  )::before { display:none !important; }
}