@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Components/AiSkillsCoachPanel.razor.rz.scp.css */
/* Stile estratto dal blocco <style> inline della pagina (2026-08-20):
   CSS isolation di Blazor invece dell'iniezione globale al render. */

.asc-panel[b-86k80kzz5m] {
    background: rgba(8,12,24,0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 1px solid rgba(108,60,225,0.7);
    border-radius: 12px;
    padding: var(--space-5);
    box-shadow: 0 8px 28px rgba(0,0,0,0.30);
    color: #FAF7F0;
}

/* Loading skeleton */
.asc-loading[b-86k80kzz5m] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.asc-loading-pulse[b-86k80kzz5m] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(108,60,225,0.25);
    animation: asc-pulse-b-86k80kzz5m 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.asc-loading-lines[b-86k80kzz5m] { flex: 1; display: flex; flex-direction: column; gap: 8px; }

.asc-loading-line[b-86k80kzz5m] {
    height: 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    animation: asc-shimmer-b-86k80kzz5m 1.5s ease-in-out infinite;
}

.asc-loading-line:nth-child(2)[b-86k80kzz5m] { animation-delay: 0.15s; }
.asc-loading-line:nth-child(3)[b-86k80kzz5m] { animation-delay: 0.30s; }

@keyframes asc-pulse-b-86k80kzz5m {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

@keyframes asc-shimmer-b-86k80kzz5m {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* Empty state */
.asc-empty[b-86k80kzz5m] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.asc-empty-icon[b-86k80kzz5m] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(108,60,225,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #9b7ee0;
    flex-shrink: 0;
}

.asc-empty-content h4[b-86k80kzz5m] {
    margin: 0 0 4px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #FAF7F0;
}

.asc-empty-content p[b-86k80kzz5m] {
    margin: 0 0 var(--space-3) 0;
    font-size: 0.875rem;
    color: rgba(246,248,255,0.6);
    line-height: 1.5;
}

.asc-cta-link[b-86k80kzz5m] {
    font-size: 0.875rem;
    color: #9b7ee0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.asc-cta-link:hover[b-86k80kzz5m] { color: #b89fe8; text-decoration: underline; }

.asc-radar-link[b-86k80kzz5m] {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.asc-links[b-86k80kzz5m] {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Header */
.asc-header[b-86k80kzz5m] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-4);
}

.asc-header-left[b-86k80kzz5m] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.asc-icon-wrap[b-86k80kzz5m] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6C3CE1, #9b7ee0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    flex-shrink: 0;
    /* Ombra neutra: non e' un elemento interattivo, non deve brillare. */
    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}

.asc-title[b-86k80kzz5m] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #FAF7F0;
}

.asc-subtitle[b-86k80kzz5m] {
    margin: 2px 0 0 0;
    font-size: 0.75rem;
    color: rgba(246,248,255,0.5);
}

/* Badges */
.asc-badges[b-86k80kzz5m] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.asc-badge[b-86k80kzz5m] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 20px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.asc-badge--eu[b-86k80kzz5m] {
    background: rgba(0,123,255,0.12);
    border: 1px solid rgba(0,123,255,0.25);
    color: #6baaff;
}

.asc-badge--gdpr[b-86k80kzz5m] {
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.25);
    color: #5ccaa0;
}

/* Gaps */
.asc-gaps[b-86k80kzz5m] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.asc-gaps-label[b-86k80kzz5m] {
    font-size: 0.75rem;
    color: rgba(246,248,255,0.5);
    white-space: nowrap;
}

.asc-gaps-list[b-86k80kzz5m] { display: flex; gap: 8px; flex-wrap: wrap; }

.asc-gap-pill[b-86k80kzz5m] {
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(232,124,42,0.12);
    border: 1px solid rgba(232,124,42,0.25);
    color: rgba(232,124,42,0.9);
    font-weight: 500;
}

.asc-gap-pill--more[b-86k80kzz5m] {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.10);
    color: rgba(246,248,255,0.5);
}

/* Suggestion */
.asc-suggestion[b-86k80kzz5m] { margin-bottom: var(--space-4); }

.asc-suggestion-label[b-86k80kzz5m] {
    font-size: 0.75rem;
    color: rgba(246,248,255,0.5);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: 4px;
}

.asc-suggestion-label i[b-86k80kzz5m] { color: #9b7ee0; }

.asc-course-card[b-86k80kzz5m] {
    background: rgba(108,60,225,0.08);
    border: 1px solid rgba(108,60,225,0.2);
    border-radius: 10px;
    padding: var(--space-4);
}

.asc-course-category[b-86k80kzz5m] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9b7ee0;
    font-weight: 600;
    margin-bottom: 4px;
}

.asc-course-title[b-86k80kzz5m] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #FAF7F0;
    margin-bottom: var(--space-2);
    line-height: 1.35;
}

.asc-course-price[b-86k80kzz5m] {
    font-size: 0.85rem;
    color: rgba(246,248,255,0.55);
    margin-bottom: var(--space-3);
}

.asc-course-btn[b-86k80kzz5m] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
    /* Accento caldo di marca con inchiostro scuro (~6.6:1): il viola
       precedente con testo bianco scendeva a ~2.8:1 sotto ?ds=lg. */
    background: var(--lp-accent-warm, #e87c2a);
    color: #1a0f06;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}

.asc-course-btn:hover[b-86k80kzz5m] {
    transform: translateY(-1px);
    box-shadow: 0 0 40px rgba(232,124,42,0.28), 0 6px 20px rgba(0,0,0,0.6);
}

/* Reasoning toggle */
.asc-reasoning-wrap[b-86k80kzz5m] { border-top: 1px solid rgba(255,255,255,0.06); padding-top: var(--space-3); }

.asc-reasoning-toggle[b-86k80kzz5m] {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(246,248,255,0.5);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    width: 100%;
    text-align: left;
    transition: color 0.15s;
}

.asc-reasoning-toggle:hover[b-86k80kzz5m] { color: rgba(246,248,255,0.85); }

.asc-chevron[b-86k80kzz5m] { margin-left: auto; transition: transform 0.2s; }

.asc-reasoning-body[b-86k80kzz5m] {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
}

.asc-reasoning-body p[b-86k80kzz5m] {
    margin: 0 0 var(--space-2) 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: rgba(246,248,255,0.7);
}

.asc-reasoning-body p:last-child[b-86k80kzz5m] { margin-bottom: 0; }

.asc-data-usage[b-86k80kzz5m] {
    color: rgba(92,202,160,0.7) !important;
    font-size: 0.75rem !important;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.asc-data-usage i[b-86k80kzz5m] { margin-top: 2px; flex-shrink: 0; }

/* Piano di crescita */
.asc-plan[b-86k80kzz5m] {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid rgba(108,60,225,0.28);
    border-radius: 10px;
    background: rgba(108,60,225,0.07);
}

.asc-plan-label[b-86k80kzz5m] {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9b7ee0;
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.asc-plan-metrics[b-86k80kzz5m] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: 0.8rem;
    color: rgba(246,248,255,0.65);
    margin-bottom: var(--space-3);
}

.asc-plan-metrics strong[b-86k80kzz5m] {
    color: #FAF7F0;
    font-size: 1.05rem;
    font-weight: 700;
    margin-right: 4px;
}

.asc-plan-btn[b-86k80kzz5m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    color: #9b7ee0;
}

.asc-plan-btn:hover[b-86k80kzz5m] { text-decoration: underline; }
/* /Components/CookieConsentWall.razor.rz.scp.css */
/* ============================================================
   Cookie Consent — barra slim glass conforme (liquid-web)
   Scoped CSS (.razor.css) — valori hex literali per robustezza
   cross-layout (non dipende da liquid-portal-v6.css :root vars).
   Palette ground truth: dark #0A0E13 · glass · arancio #E87C2A · cream #FAF7F0
   ============================================================ */

/* Wrapper: fixed, non bloccante. Nessun overlay che copre la pagina. */
.ilck-root[b-w1795p9rij] {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9000;
    display: flex;
    justify-content: center;
    padding: 0 16px 18px;
    pointer-events: none; /* solo i figli sono interattivi → pagina usabile */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
}
.ilck-root.ilck-hidden[b-w1795p9rij] { display: none; }

/* ---------- Layer 1: barra slim ---------- */
.ilck-bar[b-w1795p9rij] {
    pointer-events: auto;
    position: relative;
    width: min(1080px, 100%);
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 15px 22px;
    color: #FAF7F0;
    background: rgba(10, 14, 19, 0.78);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(250, 247, 240, 0.08);
    border-radius: 18px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 50px rgba(0, 0, 0, 0.55);
}
.ilck-bar[b-w1795p9rij]::before {
    content: "";
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, #E87C2A, #F89B4D);
}
.ilck-ico[b-w1795p9rij] { font-size: 22px; line-height: 1; flex-shrink: 0; margin-left: 6px; }
.ilck-txt[b-w1795p9rij] { flex: 1; min-width: 240px; font-size: 13.5px; line-height: 1.5; color: rgba(250, 247, 240, 0.78); }
.ilck-txt b[b-w1795p9rij] { color: #FAF7F0; font-weight: 600; }
.ilck-txt a[b-w1795p9rij] {
    color: #F89B4D; text-decoration: none; border-bottom: 1px solid rgba(248, 155, 77, 0.4);
    display: inline-block; padding-block: 13px; margin-block: -13px;
}
.ilck-txt a:hover[b-w1795p9rij] { color: #FAF7F0; }

.ilck-actions[b-w1795p9rij] { display: flex; gap: 10px; flex-wrap: wrap; }

/* Equiprominenza: Accetta e Rifiuta IDENTICI (no Accetta evidenziato). */
.ilck-btn[b-w1795p9rij] {
    font-size: 13px; font-weight: 600;
    padding: 10px 18px; border-radius: 11px;
    cursor: pointer; white-space: nowrap;
    border: 1px solid rgba(250, 247, 240, 0.16);
    background: rgba(250, 247, 240, 0.04);
    color: #FAF7F0;
    transition: border-color .18s ease, background .18s ease, transform .12s ease;
    display: inline-flex; align-items: center; gap: 7px;
}
.ilck-btn:hover[b-w1795p9rij] { border-color: #E87C2A; background: rgba(232, 124, 42, 0.10); }
.ilck-btn:active[b-w1795p9rij] { transform: translateY(1px); }
.ilck-btn .ilck-bico[b-w1795p9rij] { font-size: 12px; opacity: .85; }
/* Personalizza: terziario (più quieto, non compete con le due scelte primarie) */
.ilck-btn.ilck-tertiary[b-w1795p9rij] { border-color: transparent; background: transparent; color: rgba(250, 247, 240, 0.56); font-weight: 500; }
.ilck-btn.ilck-tertiary:hover[b-w1795p9rij] { color: #FAF7F0; background: rgba(250, 247, 240, 0.04); }

/* ---------- Layer 2: pannello Personalizza ---------- */
.ilck-panel[b-w1795p9rij] {
    pointer-events: auto;
    width: min(680px, 100%);
    max-height: min(80vh, 660px);
    overflow-y: auto;
    color: #FAF7F0;
    background: rgba(10, 14, 19, 0.82);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    border: 1px solid rgba(250, 247, 240, 0.08);
    border-radius: 20px;
    padding: 24px 26px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 70px rgba(0, 0, 0, 0.6);
}
.ilck-panel-head[b-w1795p9rij] { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.ilck-panel-logo[b-w1795p9rij] { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(232,124,42,.92), rgba(248,155,77,.92)); }
.ilck-panel-logo img[b-w1795p9rij] { width: 24px; height: 24px; }
.ilck-panel h2[b-w1795p9rij] { font-size: 19px; margin: 0; }
.ilck-panel .ilck-sub[b-w1795p9rij] { font-size: 13px; color: rgba(250, 247, 240, 0.56); margin: 8px 0 18px; line-height: 1.5; }
.ilck-panel .ilck-sub b[b-w1795p9rij] { color: rgba(250, 247, 240, 0.78); }

.ilck-cat[b-w1795p9rij] { display: flex; align-items: flex-start; gap: 14px; padding: 15px 0; border-top: 1px solid rgba(250, 247, 240, 0.08); }
.ilck-cat-ic[b-w1795p9rij] { font-size: 20px; margin-top: 2px; flex-shrink: 0; }
.ilck-cat-body[b-w1795p9rij] { flex: 1; }
.ilck-cat-body h3[b-w1795p9rij] { font-size: 14px; margin: 0 0 3px; }
.ilck-cat-body p[b-w1795p9rij] { font-size: 12px; color: rgba(250, 247, 240, 0.56); line-height: 1.45; margin: 0; }
.ilck-cat-body .ilck-detail[b-w1795p9rij] { margin-top: 6px; font-size: 12px; color: rgba(250, 247, 240, 0.36); }

/* toggle */
.ilck-sw[b-w1795p9rij] { position: relative; width: 44px; height: 24px; flex-shrink: 0; margin-top: 2px; }
.ilck-sw input[b-w1795p9rij] { position: absolute; opacity: 0; width: 0; height: 0; }
.ilck-sl[b-w1795p9rij] { position: absolute; inset: 0; cursor: pointer; background: rgba(250, 247, 240, 0.12); border: 1px solid rgba(250, 247, 240, 0.08); border-radius: 999px; transition: .2s; }
.ilck-sl[b-w1795p9rij]::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: rgba(250, 247, 240, 0.56); border-radius: 50%; transition: .2s; }
.ilck-sw input:checked + .ilck-sl[b-w1795p9rij] { background: linear-gradient(135deg, #E87C2A, #F89B4D); border-color: transparent; }
.ilck-sw input:checked + .ilck-sl[b-w1795p9rij]::before { transform: translateX(20px); background: #1a0f06; }
.ilck-sw input:disabled + .ilck-sl[b-w1795p9rij] { opacity: .55; cursor: not-allowed; }

.ilck-panel-actions[b-w1795p9rij] { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.ilck-panel-actions .ilck-btn[b-w1795p9rij] { flex: 1; justify-content: center; text-align: center; }

/* ---------- Policy modals (Privacy / Cookie) ---------- */
.ilck-policy-overlay[b-w1795p9rij] {
    position: fixed; inset: 0; z-index: 9100;
    display: none; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(6, 9, 13, 0.72);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ilck-policy-overlay.ilck-show[b-w1795p9rij] { display: flex; }
/* Liquid Glass modal — iOS 26 principles adattati al web:
   reflection highlight (::before), backdrop blur-saturate, shadow a strati */
.ilck-policy[b-w1795p9rij] {
    position: relative;
    width: min(680px, 100%); max-height: 86vh; display: flex; flex-direction: column;
    color: #FAF7F0;
    background: rgba(10, 14, 19, 0.88);
    backdrop-filter: blur(32px) saturate(1.6) brightness(1.04);
    -webkit-backdrop-filter: blur(32px) saturate(1.6) brightness(1.04);
    border: 1px solid rgba(250, 247, 240, 0.12);
    border-radius: 22px;
    overflow: hidden;
    /* Multi-layer shadow: ambient + direct + colored glow */
    box-shadow:
        0 0 0 0.5px rgba(250,247,240,0.06) inset,
        0 1px 0 rgba(250,247,240,0.10) inset,   /* top reflection highlight */
        0 8px 24px rgba(0, 0, 0, 0.45),
        0 24px 64px rgba(0, 0, 0, 0.60),
        0 0 80px rgba(232, 124, 42, 0.06);      /* ambient orange glow */
    animation: ilck-modal-in-b-w1795p9rij 0.22s cubic-bezier(0.32, 0.72, 0, 1) both;
}
/* Reflection highlight pseudo-element (glass specular reflection) */
.ilck-policy[b-w1795p9rij]::before {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.25) 30%,
        rgba(255,255,255,0.35) 50%,
        rgba(255,255,255,0.25) 70%,
        transparent 100%);
    z-index: 10;
}
/* Entry animation: scale from 96% + fade — like iOS glass spring */
@keyframes ilck-modal-in-b-w1795p9rij {
    from { opacity: 0; transform: scale(0.96) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
/* Policy modal header — gradient accent + kicker pill */
.ilck-policy-head[b-w1795p9rij] {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(232,124,42,0.10), rgba(10,14,19,0));
    border-bottom: 1px solid rgba(232, 124, 42, 0.18);
}
.ilck-policy-head-inner[b-w1795p9rij] { display: flex; flex-direction: column; gap: 5px; }
.ilck-policy-head h2[b-w1795p9rij] { font-size: 17px; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
.ilck-policy-kicker[b-w1795p9rij] {
    display: inline-block;
    font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: #E87C2A;
    background: rgba(232, 124, 42, 0.12);
    border: 1px solid rgba(232, 124, 42, 0.28);
    border-radius: 999px; padding: 2px 9px;
}
.ilck-policy-close[b-w1795p9rij] {
    width: 34px; height: 34px; flex-shrink: 0; margin-top: 2px;
    border: none; border-radius: 50%; cursor: pointer;
    background: rgba(250, 247, 240, 0.06); color: #FAF7F0; font-size: 20px; line-height: 1;
}
.ilck-policy-close:hover[b-w1795p9rij] { background: rgba(232, 124, 42, 0.18); }

/* Policy modal body — rich typography matching Liquid Portal legal pages */
.ilck-policy-body[b-w1795p9rij] {
    padding: 18px 24px; overflow-y: auto;
    font-size: 13.5px; line-height: 1.65; color: rgba(250, 247, 240, 0.75);
}
.ilck-policy-meta[b-w1795p9rij] { font-size: 12px; color: rgba(250, 247, 240, 0.42); margin-bottom: 14px; }
.ilck-policy-body h2[b-w1795p9rij] {
    font-size: 13.5px; font-weight: 700; color: #FAF7F0;
    margin: 18px 0 7px; padding-left: 12px; position: relative;
}
.ilck-policy-body h2[b-w1795p9rij]::before {
    content: "";
    position: absolute; left: 0; top: 1px; bottom: 1px;
    width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, #E87C2A, #F89B4D);
}
.ilck-policy-body h3[b-w1795p9rij] { font-size: 13px; color: rgba(250,247,240,.88); margin: 12px 0 4px; }
.ilck-policy-body ul[b-w1795p9rij] { margin: 6px 0 8px 18px; }
.ilck-policy-body li[b-w1795p9rij] { margin-bottom: 5px; }
.ilck-policy-body p[b-w1795p9rij] { margin-bottom: 10px; }
.ilck-policy-body a[b-w1795p9rij] { color: #F89B4D; text-decoration: none; border-bottom: 1px solid rgba(248,155,77,0.35); }
.ilck-policy-body a:hover[b-w1795p9rij] { color: #FAF7F0; border-bottom-color: rgba(250,247,240,0.5); }
.ilck-policy-body strong[b-w1795p9rij] { color: #FAF7F0; }

/* Prominent "full policy" link at top of modal body */
.ilck-policy-full-link[b-w1795p9rij] {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12.5px; font-weight: 600; color: #F89B4D;
    background: rgba(232, 124, 42, 0.08);
    border: 1px solid rgba(232, 124, 42, 0.22);
    border-radius: 10px; padding: 9px 14px;
    margin-bottom: 16px; text-decoration: none;
    transition: background .15s, border-color .15s;
}
.ilck-policy-full-link:hover[b-w1795p9rij] {
    background: rgba(232, 124, 42, 0.15); border-color: rgba(232, 124, 42, 0.4);
    color: #FAF7F0; border-bottom: 1px solid rgba(232, 124, 42, 0.4);
}

.ilck-policy-scroll[b-w1795p9rij] { text-align: center; font-size: 12px; color: rgba(250, 247, 240, 0.38); padding: 6px; }
.ilck-policy-scroll.ilck-hidden[b-w1795p9rij] { display: none; }
.ilck-policy-foot[b-w1795p9rij] {
    padding: 14px 24px; border-top: 1px solid rgba(250, 247, 240, 0.07);
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
.ilck-policy-link-btn[b-w1795p9rij] { text-decoration: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .ilck-root[b-w1795p9rij] { padding: 0 10px 12px; }
    .ilck-bar[b-w1795p9rij] { padding: 14px 16px; gap: 12px; }
    .ilck-actions[b-w1795p9rij] { width: 100%; }
    .ilck-actions .ilck-btn[b-w1795p9rij] { flex: 1; justify-content: center; }
    .ilck-panel[b-w1795p9rij] { padding: 20px 18px; }
}

/* Riduci motion */
@media (prefers-reduced-motion: reduce) {
    .ilck-btn[b-w1795p9rij], .ilck-sl[b-w1795p9rij], .ilck-sl[b-w1795p9rij]::before { transition: none; }
}
/* /Components/CourseCard.razor.rz.scp.css */
/* CourseCard — Fase 3 Week 3 preview-on-intent overlay.
   Additivo: non sostituisce le classi .course-*-premium esistenti, solo
   aggiunge il layer preview video sopra il thumbnail. */

.course-card-premium[b-w83t4zt3ju] {
    position: relative;
    /* Card uniformi in altezza nelle griglie (mockup liquid-glass-v2):
       il contenuto e' gia' flex-column nel CSS condiviso e il prezzo
       resta ancorato in fondo via margin-top:auto. */
    height: 100%;
    transition: transform var(--duration-normal) var(--ease-out-expo),
                box-shadow var(--duration-normal) var(--ease-out-expo);
}

.course-card-premium:hover[b-w83t4zt3ju],
.course-card-premium:focus-visible[b-w83t4zt3ju] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.course-card-premium:focus-visible[b-w83t4zt3ju] {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.course-thumbnail-premium[b-w83t4zt3ju] {
    position: relative;
    overflow: hidden;
}

/* Preview video layer: assoluto sopra il PictureImg, stessa aspect ratio.
   Renderizzato solo quando _showPreview=true, con fade-in breve per evitare
   pop visivo. Video e' aria-hidden perche' decorativo. */
.course-preview-video[b-w83t4zt3ju] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    animation: course-preview-fade-in-b-w83t4zt3ju var(--duration-normal) var(--ease-out-expo) forwards;
    pointer-events: none;
}

@keyframes course-preview-fade-in-b-w83t4zt3ju {
    to { opacity: 1; }
}

/* z-index stacking: .course-card-premium:hover applica transform e crea nuovo
   stacking context. Video (z:1) e overlay (z:2) vivono nello stesso context
   figlio — gerarchia corretta. NOTA: aggiungere un z-index su
   .course-thumbnail-premium romperebbe l'ordine. Non farlo. */

/* Stato "is-previewing": il play-btn resta visibile al primo livello,
   sopra il video, come indicatore hover. Il badge di durata si sposta
   leggermente per non sovrapporsi al video. */
.course-card-premium.is-previewing .course-overlay-premium[b-w83t4zt3ju] {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgb(0 0 0 / 0.2) 70%,
        rgb(0 0 0 / 0.4) 100%
    );
    z-index: 2;
}

/* Reduced motion: il video non arriva nemmeno nel DOM (gate C#), ma per
   sicurezza disabilitiamo anche la transizione card. */
@media (prefers-reduced-motion: reduce) {
    .course-card-premium[b-w83t4zt3ju],
    .course-card-premium:hover[b-w83t4zt3ju],
    .course-card-premium:focus-visible[b-w83t4zt3ju] {
        transform: none !important;
        transition: box-shadow var(--duration-fast) linear !important;
    }
    .course-preview-video[b-w83t4zt3ju] {
        animation: none !important;
    }
}

/* ── Rifacimento catalogo (mockup liquid-glass-v2/courses.html) ──────────
   Thumbnail 16:9 gia' garantita dal CSS condiviso (site-v31420b); qui si
   rinsaldano le righe "meta" inline: rating + n. recensioni e meta corso
   (lezioni/durata) su una sola riga con wrap pulito su schermi stretti.
   NOTA: il mockup mostra anche "n. studenti" inline — il componente non
   riceve EnrollmentCount come parametro, quindi il dato non e' mostrato
   qui (vedi report; nel catalogo /courses e' presente nella card lc-card). */
.course-rating-premium[b-w83t4zt3ju] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.course-meta-premium[b-w83t4zt3ju] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.course-lesson-count-premium[b-w83t4zt3ju],
.course-duration-premium[b-w83t4zt3ju] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Prezzo: corrente in evidenza, barrato attenuato, badge sconto allineato */
.course-price-premium[b-w83t4zt3ju] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.original-price-premium[b-w83t4zt3ju] {
    text-decoration: line-through;
    opacity: 0.6;
    font-weight: 400;
}
/* /Components/Design/AmbientGlow.razor.rz.scp.css */
/* AmbientGlow — CSS isolation (Fase 3 Week 7, 2026-04-21)
   Usa CSS custom properties --ambient-l / --ambient-c / --ambient-h scritte
   dal worker ambient-glow.worker.js via ambient-glow.js. Se il worker non e'
   attivo, le var non sono definite e il fallback oklch() cade su var defaults. */

/* Le @property dichiarano i tipi delle CSS var: senza, `transition: background`
   su radial-gradient non anima in Safari < 17.2 / Chrome < 117. Con @property,
   i browser che supportano interpolano le var individuali e il gradient segue. */
@supports (background: paint(something)) {} /* placeholder per raggruppare feature support */

@property --ambient-l {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 40%;
}
@property --ambient-c {
    syntax: '<number>';
    inherits: true;
    initial-value: 0.08;
}
@property --ambient-h {
    syntax: '<number>';
    inherits: true;
    initial-value: 260;
}

.ambient-glow[b-jm7a7ku0aq] {
    position: relative;
    /* Default: colore neutro quando il worker non e' ancora partito o e'
       disabilitato. Il worker lo sovrascrive a 4 Hz con il colore dominante. */
    --ambient-radius: 32px;
}

.ambient-glow__halo[b-jm7a7ku0aq] {
    position: absolute;
    inset: calc(var(--ambient-radius) * -1);
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
        ellipse at center,
        oklch(var(--ambient-l) var(--ambient-c) var(--ambient-h) / 0.45) 0%,
        oklch(var(--ambient-l) var(--ambient-c) var(--ambient-h) / 0.15) 50%,
        transparent 70%
    );
    filter: blur(var(--ambient-radius));
    /* Con @property i browser che supportano interpolano le var: Chrome 85+,
       Safari 16.4+, Firefox 128+. I browser senza supporto @property snappano
       tra i colori senza animazione fluida — accettabile (non peggiora la UX
       rispetto a nessuna transition). */
    transition: --ambient-l var(--duration-slow) var(--ease-out-expo),
                --ambient-c var(--duration-slow) var(--ease-out-expo),
                --ambient-h var(--duration-slow) var(--ease-out-expo);
    will-change: background;
}

.ambient-glow__content[b-jm7a7ku0aq] {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .ambient-glow__halo[b-jm7a7ku0aq] {
        transition: none !important;
        /* Mantiene il colore neutro: niente update dinamico (il JS si auto-disabilita
           ma una protezione CSS-side e' ridondante gratis). */
        background: oklch(40% 0.08 260 / 0.2);
    }
}
/* /Components/Design/HeroCinematic.razor.rz.scp.css */
/* HeroCinematic — CSS isolation (Fase 3 Week 4, 2026-04-21)
   e riusa le keyframes/recipes da motion.css (il-hero-cinematic__title,
   il-pulse-cta, il-press, il-fade-rise).

   Architettura layer (bottom-up):
     1. <video> o <div.hero-cinematic-gradient>   (background, aria-hidden)
     2. <div.hero-cinematic-scrim>                 (overlay scuro per contrasto)
     3. <div.hero-cinematic-content>               (testo + CTA, interattivo)
*/

.hero-cinematic-layout[b-6u8n028unj] {
    position: relative;
    width: 100%;
    min-height: 540px;
    height: 90vh;
    max-height: 900px;
    overflow: hidden;
    color: var(--color-text-on-brand);
    border-radius: 0; /* full-bleed di default; il consumer puo' override con --radius-xl */
    isolation: isolate;
}

/* === Layer 1: background ============================================= */

.hero-cinematic-video[b-6u8n028unj],
.hero-cinematic-gradient[b-6u8n028unj] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-cinematic-video[b-6u8n028unj] {
    object-fit: cover;
}

.hero-cinematic-gradient[b-6u8n028unj] {
    background:
        radial-gradient(circle at 20% 30%, var(--color-brand-500) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, var(--color-accent-500) 0%, transparent 50%),
        linear-gradient(135deg, var(--color-brand-900) 0%, var(--color-brand-700) 100%);
    /* background-size applicato a tutti e 3 i layer per animare coerentemente
       background-position; senza la forma plurale solo l'ultimo layer (linear)
       si muoveva e il drift effect era invisibile sui due radial. */
    background-size: 200% 200%, 200% 200%, 200% 200%;
    animation: hero-gradient-drift-b-6u8n028unj 30s linear infinite;
}

/* Quando il video e' soppresso (Save-Data), il gradient e' la sola fonte
   visuale di sfondo: manteniamo tutta l'opacita'. Quando il video e' attivo,
   il gradient passa sotto il video e funge da colore di fondo durante
   il caricamento del poster. */
.hero--video-suppressed .hero-cinematic-gradient[b-6u8n028unj] {
    opacity: 1;
}

@keyframes hero-gradient-drift-b-6u8n028unj {
    0%   { background-position: 0% 0%,     100% 100%, 0% 0%; }
    50%  { background-position: 50% 50%,   50% 50%,   100% 100%; }
    100% { background-position: 0% 0%,     100% 100%, 0% 0%; }
}

/* === Layer 2: scrim =================================================== */

.hero-cinematic-scrim[b-6u8n028unj] {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgb(0 0 0 / 0.15) 0%,
        rgb(0 0 0 / 0.35) 60%,
        rgb(0 0 0 / 0.55) 100%
    );
    pointer-events: none;
}

/* === Layer 3: content ================================================= */

.hero-cinematic-content[b-6u8n028unj] {
    position: relative;
    z-index: 2;
    max-width: 52rem;
    margin: 0 auto;
    padding: var(--space-24) var(--space-6) var(--space-16);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-4);
}

.hero-cinematic-eyebrow[b-6u8n028unj] {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-accent-300);
    margin: 0;
}

.hero-cinematic-title[b-6u8n028unj] {
    font-size: var(--text-5xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: 800;
    margin: 0;
    max-width: 20ch;
    /* text-shadow per leggibilita' su video con contenuti chiari */
    text-shadow: 0 2px 24px rgb(0 0 0 / 0.3);
}

.hero-cinematic-subtitle[b-6u8n028unj] {
    font-size: var(--text-xl);
    font-weight: 400;
    line-height: var(--leading-normal);
    margin: 0;
    max-width: 42ch;
    color: oklch(96% 0.02 260);
    text-shadow: 0 1px 12px rgb(0 0 0 / 0.3);
}

.hero-cinematic-cta[b-6u8n028unj] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-8);
    font-size: var(--text-lg);
    font-weight: 600;
    text-decoration: none;
    background: var(--color-accent-500);
    color: var(--color-neutral-900);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lg);
    transition: background var(--duration-fast) var(--ease-out-expo),
                transform var(--duration-fast) var(--ease-out-expo);
    margin-top: var(--space-4);
}

.hero-cinematic-cta:hover[b-6u8n028unj],
.hero-cinematic-cta:focus-visible[b-6u8n028unj] {
    background: var(--color-accent-300);
    transform: translateY(-2px);
}

.hero-cinematic-cta:focus-visible[b-6u8n028unj] {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 4px;
}

.hero-cinematic-cta-icon[b-6u8n028unj] {
    display: inline-block;
    transition: transform var(--duration-fast) var(--ease-out-expo);
}

.hero-cinematic-cta:hover .hero-cinematic-cta-icon[b-6u8n028unj] {
    transform: translateX(4px);
}

.hero-cinematic-cta-secondary[b-6u8n028unj] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-3) var(--space-6);
    color: var(--color-text-on-brand);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    font-weight: 500;
    transition: text-decoration-color var(--duration-fast) var(--ease-out-expo);
}

.hero-cinematic-cta-secondary:hover[b-6u8n028unj] {
    text-decoration-color: var(--color-accent-300);
}

/* === Responsive ======================================================= */

@media (max-width: 48rem) {
    .hero-cinematic-layout[b-6u8n028unj] {
        height: 70vh;
        min-height: 440px;
    }
    .hero-cinematic-content[b-6u8n028unj] {
        padding: var(--space-16) var(--space-4) var(--space-12);
    }
    .hero-cinematic-title[b-6u8n028unj] {
        font-size: var(--text-4xl);
    }
    .hero-cinematic-subtitle[b-6u8n028unj] {
        font-size: var(--text-base);
    }
}

/* === Reduced motion & Save-Data ======================================= */

@media (prefers-reduced-motion: reduce) {
    .hero-cinematic-gradient[b-6u8n028unj] {
        animation: none !important;
    }
    .hero-cinematic-cta:hover[b-6u8n028unj] {
        transform: none !important;
    }
    .hero-cinematic-cta-icon[b-6u8n028unj] {
        transition: none !important;
    }
    /* Il <video> autoplay e' un'animazione continua: gli utenti con reduced
       motion meritano un'opzione di pausa. In MVP restiamo sul render del
       video (muted, aria-hidden) perche' e' sfondo decorativo, ma una Fase
       successiva dovrebbe aggiungere un bottone pause. */
}
/* /Components/Design/InstantSearch.razor.rz.scp.css */
/* InstantSearch — CSS isolation (Fase 3 Week 5, 2026-04-21) */

.instant-search[b-q1hosxnc80] {
    position: relative;
    width: 100%;
    max-width: 36rem;
    font-family: var(--font-sans);
}

.instant-search-input-wrapper[b-q1hosxnc80] {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-pill);
    transition: border-color var(--duration-fast) var(--ease-out-expo),
                box-shadow var(--duration-fast) var(--ease-out-expo);
}

.instant-search.is-open .instant-search-input-wrapper[b-q1hosxnc80],
.instant-search-input-wrapper:focus-within[b-q1hosxnc80] {
    border-color: var(--color-focus-ring);
    box-shadow: 0 0 0 3px oklch(62% 0.18 260 / 0.15);
}

.instant-search-icon[b-q1hosxnc80] {
    padding: 0 var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    pointer-events: none;
}

.instant-search-input[b-q1hosxnc80] {
    flex: 1;
    padding: var(--space-3) 0;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--text-base);
    outline: none;
}

.instant-search-input[b-q1hosxnc80]::placeholder {
    color: var(--color-text-secondary);
}

.instant-search-clear[b-q1hosxnc80] {
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-pill);
    transition: background var(--duration-fast) var(--ease-out-expo);
}

.instant-search-clear:hover[b-q1hosxnc80] {
    background: var(--color-surface-2);
    color: var(--color-text-primary);
}

/* === Dropdown ========================================================= */

.instant-search-dropdown[b-q1hosxnc80] {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    background: var(--color-surface-0);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: instant-search-appear-b-q1hosxnc80 var(--duration-fast) var(--ease-out-expo);
}

@keyframes instant-search-appear-b-q1hosxnc80 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.instant-search-status[b-q1hosxnc80] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.instant-search-spinner[b-q1hosxnc80] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-border-subtle);
    border-top-color: var(--color-brand-500);
    border-radius: 50%;
    animation: instant-search-spin-b-q1hosxnc80 0.6s linear infinite;
}

@keyframes instant-search-spin-b-q1hosxnc80 {
    to { transform: rotate(360deg); }
}

.instant-search-list[b-q1hosxnc80] {
    list-style: none;
    margin: 0;
    padding: var(--space-1);
    max-height: 24rem;
    overflow-y: auto;
}

.instant-search-item[b-q1hosxnc80] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--duration-instant) linear;
}

.instant-search-item.is-highlighted[b-q1hosxnc80],
.instant-search-item:hover[b-q1hosxnc80] {
    background: var(--color-surface-1);
}

.instant-search-item-title[b-q1hosxnc80] {
    font-weight: 500;
    color: var(--color-text-primary);
    font-size: var(--text-base);
}

.instant-search-item-meta[b-q1hosxnc80] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.instant-search-see-all[b-q1hosxnc80] {
    display: block;
    width: 100%;
    padding: var(--space-3);
    background: var(--color-surface-1);
    border: none;
    border-top: 1px solid var(--color-border-subtle);
    color: var(--color-brand-500);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    font-size: var(--text-sm);
    transition: background var(--duration-instant) linear;
}

.instant-search-see-all:hover[b-q1hosxnc80] {
    background: var(--color-surface-2);
}

@media (prefers-reduced-motion: reduce) {
    .instant-search-dropdown[b-q1hosxnc80],
    .instant-search-spinner[b-q1hosxnc80] {
        animation: none !important;
    }
}
/* /Components/Design/MicrolessonBadge.razor.rz.scp.css */
.micro-badge[b-izr1fzvl23] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
}

.micro-badge-icon[b-izr1fzvl23] {
    font-size: 0.75rem;
    line-height: 1;
}

.micro-badge-text[b-izr1fzvl23] {
    text-transform: uppercase;
}

/* Versione compatta per spazi ristretti */
.micro-badge.compact .micro-badge-text[b-izr1fzvl23] {
    display: none;
}
/* /Components/Design/MiniPlayer.razor.rz.scp.css */
/* MiniPlayer — CSS isolation (Fase 3 Week 6, 2026-04-21) */

.mini-player[b-ree3gm6tic] {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    width: 22rem;
    max-width: calc(100vw - var(--space-8));
    background: var(--color-surface-0);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    z-index: var(--z-toast);
    display: grid;
    grid-template-rows: auto auto;
    font-family: var(--font-sans);
}

.mini-player-video-wrapper[b-ree3gm6tic] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-neutral-900);
}

.mini-player-video[b-ree3gm6tic] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.mini-player-info[b-ree3gm6tic] {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
}

.mini-player-title[b-ree3gm6tic] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-player-subtitle[b-ree3gm6tic] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-player-actions[b-ree3gm6tic] {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: flex;
    gap: var(--space-1);
    z-index: 2;
}

.mini-player-btn[b-ree3gm6tic] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 0.5);
    color: var(--color-neutral-0);
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: var(--text-base);
    transition: background var(--duration-fast) var(--ease-out-expo);
    backdrop-filter: blur(6px);
}

.mini-player-btn:hover[b-ree3gm6tic],
.mini-player-btn:focus-visible[b-ree3gm6tic] {
    background: rgb(0 0 0 / 0.75);
}

.mini-player-btn:focus-visible[b-ree3gm6tic] {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

@media (max-width: 48rem) {
    .mini-player[b-ree3gm6tic] {
        width: calc(100vw - var(--space-4));
        right: var(--space-2);
        bottom: var(--space-2);
    }
}

/* Nascondi visualmente ma mantiene <video> nel DOM: necessario quando la
   finestra PiP e' attiva. Rimuovere l'elemento romperebbe il PiP (spec W3C). */
.mini-player--pip-hidden[b-ree3gm6tic] {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    clip-path: inset(50%);
}
/* /Components/Design/ProgressRing.razor.rz.scp.css */
/* ProgressRing — CSS isolation (Fase 3 Week 8, 2026-04-21) */

.progress-ring[b-5hwq5d4dt5] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
}

.progress-ring svg[b-5hwq5d4dt5] {
    display: block;
}

.progress-ring-track[b-5hwq5d4dt5] {
    stroke: var(--color-surface-2);
    stroke-width: 8;
}

.progress-ring-fill[b-5hwq5d4dt5] {
    /* Gradient SVG non implementato nel template (MVP usa tinta piatta brand).
       Per il futuro: aggiungere <defs><linearGradient id="progress-gradient">
       nel componente SVG e scrivere `stroke: url(#progress-gradient) var(--color-brand-500);`. */
    stroke: var(--color-brand-500);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset var(--duration-slow) var(--ease-out-expo);
}

.progress-ring-content[b-5hwq5d4dt5] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.progress-ring-percent[b-5hwq5d4dt5] {
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    font-weight: 800;
    color: var(--color-text-primary);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
}

.progress-ring-label[b-5hwq5d4dt5] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    text-align: center;
    max-width: 70%;
}

@media (prefers-reduced-motion: reduce) {
    .progress-ring-fill[b-5hwq5d4dt5] {
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Design/StreakCounter.razor.rz.scp.css */
/* StreakCounter — CSS isolation (Fase 3 Week 8, 2026-04-21) */

.streak-counter[b-1sxfg620qg] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5, var(--space-4));
    background: var(--color-surface-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-fast) var(--ease-out-expo),
                box-shadow var(--duration-fast) var(--ease-out-expo);
}

.streak-counter:hover[b-1sxfg620qg] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.streak-flame[b-1sxfg620qg] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.streak-flame svg[b-1sxfg620qg] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.streak-flame-path[b-1sxfg620qg] {
    fill: var(--color-neutral-400);
    transition: fill var(--duration-normal) var(--ease-out-expo);
}

.streak-aura[b-1sxfg620qg] {
    fill: none;
    stroke: var(--color-accent-500);
    stroke-width: 1.5;
    stroke-dasharray: 6 6;
    opacity: 0.6;
    transform-origin: center;
    animation: streak-aura-rotate-b-1sxfg620qg 12s linear infinite;
}

@keyframes streak-aura-rotate-b-1sxfg620qg {
    to { transform: rotate(360deg); }
}

.streak-content[b-1sxfg620qg] {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.streak-number[b-1sxfg620qg] {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-text-primary);
    letter-spacing: var(--tracking-tight);
}

.streak-label[b-1sxfg620qg] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.streak-milestone[b-1sxfg620qg] {
    margin-left: auto;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--color-accent-500);
    color: var(--color-neutral-900);
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* === Milestone states ================================================= */

.streak--warm .streak-flame-path[b-1sxfg620qg] {
    fill: var(--color-brand-500);
    filter: drop-shadow(0 0 4px oklch(62% 0.18 260 / 0.4));
}

.streak--hot .streak-flame-path[b-1sxfg620qg] {
    fill: var(--color-accent-500);
    filter: drop-shadow(0 0 6px oklch(78% 0.17 50 / 0.5));
    animation: streak-flame-flicker-b-1sxfg620qg 1.6s ease-in-out infinite;
}

.streak--legendary .streak-flame-path[b-1sxfg620qg] {
    fill: var(--color-accent-500);
    filter: drop-shadow(0 0 8px oklch(78% 0.17 50 / 0.6));
    animation: streak-flame-flicker-b-1sxfg620qg 1.2s ease-in-out infinite;
}

@keyframes streak-flame-flicker-b-1sxfg620qg {
    0%, 100% { transform: scale(1)   rotate(0deg); }
    25%      { transform: scale(1.04) rotate(-1deg); }
    75%      { transform: scale(0.98) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
    .streak-aura[b-1sxfg620qg],
    .streak--hot .streak-flame-path[b-1sxfg620qg],
    .streak--legendary .streak-flame-path[b-1sxfg620qg] {
        animation: none !important;
    }
    .streak-counter:hover[b-1sxfg620qg] {
        transform: none !important;
    }
}
/* /Components/FoundingMembers/FoundingInstructorBadge.razor.rz.scp.css */
.founding-badge[b-5zs7mifnkl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    color: var(--lp-accent-warm);
    background: color-mix(in srgb, var(--lp-accent-warm) 12%, var(--lp-surface));
    border: 1px solid color-mix(in srgb, var(--lp-accent-warm) 45%, var(--lp-border));
    border-radius: var(--lp-radius-pill, 999px);
    font-size: var(--lp-text-xs, 12px);
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.2;
    white-space: nowrap;
}

.founding-badge svg[b-5zs7mifnkl] {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

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

@media (forced-colors: active) {
    .founding-badge[b-5zs7mifnkl] {
        border-color: CanvasText;
        color: CanvasText;
    }
}
/* /Components/Gamification/BadgesPanel.razor.rz.scp.css */
/*
    BadgesPanel.razor.css — stile del pannello badge gamification.

    Nel tree canonico queste classi non avevano alcun CSS: per gli utenti con
    badge il pannello si accumulava senza stile nella sidebar del profilo.
    Il pannello vive dentro card contenitore (sidebar profilo, dashboard),
    quindi si presenta come sezione con separatore, non come card annidata.
*/

.badges-panel[b-1yj98x6gdx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
}

.badges-panel-title[b-1yj98x6gdx] {
    margin: 0;
    font-size: var(--lp-text-xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
}

.badges-grid[b-1yj98x6gdx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
}

.badge-card[b-1yj98x6gdx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    text-align: center;
    min-width: 0;
}

.badge-card.unlocked[b-1yj98x6gdx] {
    background: rgba(255, 255, 255, 0.06);
}

.badge-icon[b-1yj98x6gdx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    font-size: 1rem;
}

.badge-name[b-1yj98x6gdx] {
    max-width: 100%;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--lp-text, #faf7f0);
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.badge-earned[b-1yj98x6gdx] {
    font-size: 0.75rem;
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
}
/* /Components/InstructorCard.razor.rz.scp.css */
/* InstructorCard — blocco docente nella scheda del corso
   -----------------------------------------------------
   .instructor-card e .instructor-avatar sono vestite dai fogli globali, ma la
   struttura interna (header, bio, dettagli, azioni) no: e' CSS scoped di un
   componente figlio, quindi Detail.razor.css non la raggiunge. */

.instructor-header[b-u8fnkrjxx3] {
    display: flex;
    align-items: flex-start;
    gap: var(--lg-2, 12px);
    min-width: 0;
}

.instructor-info[b-u8fnkrjxx3] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.instructor-bio[b-u8fnkrjxx3] {
    margin: 0;
    max-width: 68ch;
    color: var(--lp-muted, rgba(225, 235, 246, 0.72));
    font-size: 0.9375rem;
    line-height: 1.65;
}

/* Il testo di ripiego non deve leggersi come una biografia vera. */
.instructor-bio.placeholder[b-u8fnkrjxx3] {
    color: var(--lp-faint, rgba(225, 235, 246, 0.52));
    font-style: italic;
}

.instructor-details[b-u8fnkrjxx3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: var(--lg-2, 12px);
    color: var(--lp-faint, rgba(225, 235, 246, 0.52));
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.instructor-actions[b-u8fnkrjxx3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--lg-3, 20px);
}

.instructor-actions .btn[b-u8fnkrjxx3] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 640px) {
    .instructor-header[b-u8fnkrjxx3] {
        flex-direction: column;
        align-items: stretch;
    }

    .instructor-actions .btn[b-u8fnkrjxx3] { width: 100%; justify-content: center; }
}
/* /Components/LearningSpace/AIChatPanel.razor.rz.scp.css */
/*
    AIChatPanel.razor.css — assistente AI del learning space.
    Tema scuro coerente con il Liquid Glass: superfici solide
    (il vetro resta sul chrome della pagina), accento caldo di marca.
*/

.aichat-root[b-rs7fbrw295] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 480px;
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.18));
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--lp-color-text, #eef3ff);
    overflow: hidden;
}

.aichat-loading[b-rs7fbrw295] {
    opacity: 0.75;
}

/* ── Header ── */
.aichat-header[b-rs7fbrw295] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.18));
    background: rgba(255, 255, 255, 0.03);
}

.aichat-id[b-rs7fbrw295] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.aichat-avatar[b-rs7fbrw295] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(232, 124, 42, 0.18);
    color: var(--lp-color-accent, #e87c2a);
}

.aichat-avatar-sm[b-rs7fbrw295] {
    width: 26px;
    height: 26px;
}

.aichat-avatar-user[b-rs7fbrw295] {
    background: rgba(103, 216, 238, 0.16);
    color: #67d8ee;
}

.aichat-id-text[b-rs7fbrw295] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.aichat-name[b-rs7fbrw295] {
    font-size: 0.875rem;
    font-weight: 700;
}

.aichat-status[b-rs7fbrw295] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--lp-color-text-muted, #8a97b5);
}

.aichat-status-dot[b-rs7fbrw295] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lp-color-text-muted, #8a97b5);
}

.aichat-status-on .aichat-status-dot[b-rs7fbrw295] {
    background: var(--lp-color-success, #22c55e);
}

.aichat-clear[b-rs7fbrw295] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--lp-color-text-muted, #8a97b5);
    cursor: pointer;
}

.aichat-clear:hover[b-rs7fbrw295] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--lp-color-text, #eef3ff);
}

.aichat-clear:focus-visible[b-rs7fbrw295],
.aichat-chip:focus-visible[b-rs7fbrw295],
.aichat-suggestion:focus-visible[b-rs7fbrw295],
.aichat-ts-link:focus-visible[b-rs7fbrw295],
.aichat-msg-action:focus-visible[b-rs7fbrw295],
.aichat-send:focus-visible[b-rs7fbrw295],
.aichat-error-close:focus-visible[b-rs7fbrw295] {
    outline: 2px solid var(--lg-focus, #ffb27f);
    outline-offset: 2px;
}

/* ── Messages ── */
.aichat-messages[b-rs7fbrw295] {
    flex: 1;
    overflow-y: auto;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.aichat-welcome[b-rs7fbrw295] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 0.75rem;
    gap: 0.35rem;
}

.aichat-welcome-icon[b-rs7fbrw295] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 0.5rem;
    border-radius: 50%;
    background: rgba(232, 124, 42, 0.14);
    color: var(--lp-color-accent, #e87c2a);
}

.aichat-welcome-title[b-rs7fbrw295] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.aichat-welcome-sub[b-rs7fbrw295] {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--lp-color-text-muted, #8a97b5);
}

.aichat-suggestions[b-rs7fbrw295] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

.aichat-suggestion[b-rs7fbrw295] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.22));
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--lp-color-text, #eef3ff);
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.aichat-suggestion:hover[b-rs7fbrw295] {
    border-color: rgba(232, 124, 42, 0.45);
    background: rgba(232, 124, 42, 0.07);
}

.aichat-suggestion-icon[b-rs7fbrw295] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(232, 124, 42, 0.14);
    color: var(--lp-color-accent, #e87c2a);
}

.aichat-msg-row[b-rs7fbrw295] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.aichat-msg-row-user[b-rs7fbrw295] {
    justify-content: flex-end;
}

.aichat-msg-col[b-rs7fbrw295] {
    display: flex;
    flex-direction: column;
    max-width: 82%;
    min-width: 0;
}

.aichat-bubble[b-rs7fbrw295] {
    padding: 0.55rem 0.75rem;
    border-radius: 13px;
    font-size: 0.875rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.aichat-bubble-user[b-rs7fbrw295] {
    background: rgba(232, 124, 42, 0.16);
    border: 1px solid rgba(232, 124, 42, 0.3);
}

.aichat-bubble-assistant[b-rs7fbrw295] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.18));
}

/* Markdown reso da FormatMessage */
.aichat-bubble :deep(.aichat-md-pre)[b-rs7fbrw295] {
    margin: 0.35rem 0;
    padding: 0.5rem 0.65rem;
    border-radius: 9px;
    background: rgba(3, 10, 18, 0.75);
    color: #a7f3d0;
    font-size: 0.75rem;
    overflow-x: auto;
}

.aichat-bubble :deep(.aichat-md-code)[b-rs7fbrw295] {
    padding: 0.05rem 0.3rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.09);
    font-size: 0.8125rem;
}

.aichat-bubble :deep(.aichat-md-list)[b-rs7fbrw295] {
    margin: 0.3rem 0;
    padding-left: 1.15rem;
}

.aichat-bubble :deep(.aichat-md-list-ordered)[b-rs7fbrw295] {
    list-style-type: decimal;
}

.aichat-bubble :deep(.aichat-md-list li)[b-rs7fbrw295] {
    margin: 0.15rem 0;
}

.aichat-msg-badge[b-rs7fbrw295] {
    margin-top: 0.25rem;
}

.aichat-msg-meta[b-rs7fbrw295] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.25rem;
    padding: 0 0.15rem;
}

.aichat-ts-link[b-rs7fbrw295] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: none;
    background: transparent;
    padding: 0;
    color: var(--lp-color-accent, #e87c2a);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.aichat-ts-link:hover[b-rs7fbrw295] {
    text-decoration: underline;
}

.aichat-msg-time[b-rs7fbrw295],
.aichat-msg-gen[b-rs7fbrw295] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: var(--lp-color-text-muted, #8a97b5);
}

.aichat-msg-action[b-rs7fbrw295] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--lp-color-text-muted, #8a97b5);
    cursor: pointer;
}

.aichat-msg-action:hover[b-rs7fbrw295] {
    background: rgba(255, 255, 255, 0.07);
    color: var(--lp-color-text, #eef3ff);
}

.aichat-typing[b-rs7fbrw295] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--lp-color-text-muted, #8a97b5);
}

.aichat-spin[b-rs7fbrw295] {
    animation: aichat-rotate-b-rs7fbrw295 1s linear infinite;
}

.aichat-typing-time[b-rs7fbrw295] {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

@keyframes aichat-rotate-b-rs7fbrw295 {
    to {
        transform: rotate(360deg);
    }
}

/* ── Quick actions ── */
.aichat-chips[b-rs7fbrw295] {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.18));
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.02);
}

.aichat-chip[b-rs7fbrw295] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    padding: 0.35rem 0.7rem;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--lp-color-text-muted, #b8c2d8);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.aichat-chip:hover[b-rs7fbrw295] {
    background: rgba(232, 124, 42, 0.16);
    color: var(--lp-color-accent, #e87c2a);
}

/* ── Context ── */
.aichat-context[b-rs7fbrw295] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-top: 1px solid rgba(232, 124, 42, 0.25);
    background: rgba(232, 124, 42, 0.08);
    color: var(--lp-color-accent, #e87c2a);
    font-size: 0.8125rem;
}

/* ── Input ── */
.aichat-input-area[b-rs7fbrw295] {
    padding: 0.65rem 0.75rem 0.5rem;
    border-top: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.18));
    background: rgba(255, 255, 255, 0.02);
}

.aichat-input-wrap[b-rs7fbrw295] {
    display: flex;
    align-items: flex-end;
    gap: 0.45rem;
    padding: 0.3rem;
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.28));
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    transition: border-color 160ms ease;
}

.aichat-input-wrap:focus-within[b-rs7fbrw295] {
    border-color: var(--lp-color-accent, #e87c2a);
}

.aichat-input[b-rs7fbrw295] {
    flex: 1;
    min-height: 44px;
    max-height: 128px;
    padding: 0.55rem 0.65rem;
    border: none;
    background: transparent;
    color: var(--lp-color-text, #eef3ff);
    font: inherit;
    font-size: 0.875rem;
    resize: none;
}

.aichat-input[b-rs7fbrw295]::placeholder {
    color: var(--lp-color-text-muted, #8a97b5);
}

.aichat-input:focus[b-rs7fbrw295] {
    outline: none;
}

.aichat-send[b-rs7fbrw295] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 11px;
    background: var(--lp-color-accent, #e87c2a);
    color: #1a0f06;
    cursor: pointer;
    transition: filter 160ms ease;
}

.aichat-send:hover:not(:disabled)[b-rs7fbrw295] {
    filter: brightness(1.08);
}

.aichat-send:disabled[b-rs7fbrw295] {
    opacity: 0.45;
    cursor: default;
}

.aichat-input-hints[b-rs7fbrw295] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.4rem;
    padding: 0 0.15rem;
}

.aichat-hint[b-rs7fbrw295] {
    font-size: 0.75rem;
    color: var(--lp-color-text-muted, #8a97b5);
}

.aichat-kbd[b-rs7fbrw295] {
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.3));
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.75rem;
}

.aichat-count[b-rs7fbrw295] {
    font-size: 0.75rem;
    color: var(--lp-color-text-muted, #8a97b5);
    font-variant-numeric: tabular-nums;
}

.aichat-count-warn[b-rs7fbrw295] {
    color: var(--lp-color-accent, #e87c2a);
    font-weight: 600;
}

/* ── Error toast ── */
.aichat-error[b-rs7fbrw295] {
    position: absolute;
    bottom: 4.5rem;
    left: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.12);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

.aichat-error-icon[b-rs7fbrw295] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
}

.aichat-error-text[b-rs7fbrw295] {
    flex: 1;
    font-size: 0.8125rem;
    color: #fca5a5;
}

.aichat-error-close[b-rs7fbrw295] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #fca5a5;
    cursor: pointer;
}

.aichat-error-close:hover[b-rs7fbrw295] {
    background: rgba(239, 68, 68, 0.18);
}

/* ── Motion ── */
@media (prefers-reduced-motion: reduce) {
    .aichat-suggestion[b-rs7fbrw295],
    .aichat-chip[b-rs7fbrw295],
    .aichat-input-wrap[b-rs7fbrw295],
    .aichat-send[b-rs7fbrw295],
    .aichat-clear[b-rs7fbrw295],
    .aichat-msg-action[b-rs7fbrw295] {
        transition: none;
    }

    .aichat-spin[b-rs7fbrw295] {
        animation-duration: 2.5s;
    }
}
/* /Components/LearningSpace/LessonInfo.razor.rz.scp.css */
/*
    LessonInfo.razor.css — testata della lezione nel learning space.
    Prima il componente usava token --ll-* definiti solo nel bundle admin
    (fallback chiari stile LinkedIn): qui temi scuri propri e coerenti
    con il Liquid Glass.
*/

.lesson-info[b-i06ikxplde] {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.18));
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--lp-color-text, #eef3ff);
}

.lesson-info-header[b-i06ikxplde] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* ── Avatar docente ── */
.li-instructor[b-i06ikxplde] {
    flex-shrink: 0;
}

.li-avatar[b-i06ikxplde] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--lp-color-border, rgba(126, 138, 166, 0.28));
}

.li-avatar-placeholder[b-i06ikxplde] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    color: var(--lp-color-text-muted, #8a97b5);
    font-size: 20px;
}

/* ── Meta lezione ── */
.li-meta[b-i06ikxplde] {
    flex: 1;
    min-width: 0;
}

.li-title[b-i06ikxplde] {
    margin: 0 0 0.4rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.li-subtitle[b-i06ikxplde] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--lp-color-text-muted, #8a97b5);
}

.li-subtitle-item[b-i06ikxplde] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.li-divider[b-i06ikxplde] {
    color: var(--lp-color-text-muted, #8a97b5);
    opacity: 0.6;
}

.li-instructor-link[b-i06ikxplde] {
    color: var(--lp-color-accent, #e87c2a);
    text-decoration: none;
    font-weight: 600;
}

.li-instructor-link:hover[b-i06ikxplde] {
    text-decoration: underline;
}

.li-cc-badge[b-i06ikxplde] {
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.75rem;
}

.li-auto-badge[b-i06ikxplde] {
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--lp-color-accent, #e87c2a);
    color: #1a0f06;
    font-size: 0.75rem;
    font-weight: 700;
}

/* ── Progresso corso ── */
.li-progress[b-i06ikxplde] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.li-progress-bar[b-i06ikxplde] {
    flex: 1;
    max-width: 220px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.li-progress-fill[b-i06ikxplde] {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #e87c2a, #f89b4d);
}

.li-progress-text[b-i06ikxplde] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--lp-color-accent, #e87c2a);
    font-variant-numeric: tabular-nums;
}

/* ── Azioni ── */
.li-actions[b-i06ikxplde] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.li-action-btn[b-i06ikxplde] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 40px;
    height: 40px;
    padding: 0 0.5rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--lp-color-text-muted, #8a97b5);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.li-action-btn:hover[b-i06ikxplde] {
    background: rgba(255, 255, 255, 0.07);
    color: var(--lp-color-text, #eef3ff);
}

.li-action-btn:focus-visible[b-i06ikxplde] {
    outline: 2px solid var(--lg-focus, #ffb27f);
    outline-offset: 2px;
}

.li-action-btn.active[b-i06ikxplde] {
    color: var(--lp-color-accent, #e87c2a);
}

.li-action-btn.active:hover[b-i06ikxplde] {
    background: rgba(232, 124, 42, 0.14);
}

.li-action-count[b-i06ikxplde] {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* ── Dropdown ── */
.li-action-dropdown[b-i06ikxplde] {
    position: relative;
}

.li-dropdown-menu[b-i06ikxplde] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    min-width: 200px;
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.22));
    border-radius: 11px;
    background: var(--lg-surface, #0e1524);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    z-index: 100;
}

.li-dropdown-item[b-i06ikxplde] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.875rem;
    color: var(--lp-color-text, #eef3ff);
    cursor: pointer;
    transition: background-color 150ms ease;
}

.li-dropdown-item:hover[b-i06ikxplde] {
    background: rgba(255, 255, 255, 0.06);
}

.li-dropdown-item i[b-i06ikxplde] {
    width: 16px;
    color: var(--lp-color-text-muted, #8a97b5);
}

/* ── Banner corso ── */
.li-course-banner[b-i06ikxplde] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.18));
}

.li-course-banner-info[b-i06ikxplde] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.li-course-label[b-i06ikxplde] {
    font-size: 0.875rem;
    color: var(--lp-color-text-muted, #8a97b5);
}

.li-course-link[b-i06ikxplde] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lp-color-accent, #e87c2a);
    text-decoration: none;
}

.li-course-link:hover[b-i06ikxplde] {
    text-decoration: underline;
}

.li-category-badge[b-i06ikxplde] {
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.75rem;
    color: var(--lp-color-text-muted, #b8c2d8);
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .lesson-info[b-i06ikxplde] {
        padding: 1rem;
    }

    .lesson-info-header[b-i06ikxplde] {
        flex-direction: column;
        align-items: stretch;
    }

    .li-instructor[b-i06ikxplde] {
        display: flex;
        align-items: center;
    }

    .li-title[b-i06ikxplde] {
        font-size: 1.125rem;
    }

    .li-actions[b-i06ikxplde] {
        justify-content: flex-start;
        margin-top: 0.5rem;
    }

    .li-course-banner[b-i06ikxplde] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .li-action-btn[b-i06ikxplde],
    .li-dropdown-item[b-i06ikxplde] {
        transition: none;
    }
}
/* /Components/LearningSpace/QuizPanel.razor.rz.scp.css */
/* QuizPanel — quiz list surface inside the learning space (dark Liquid Glass palette) */
.quiz-panel[b-ut2u344fwg] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.quiz-panel-item[b-ut2u344fwg] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
    color: #FAF7F0;
    cursor: pointer;
    text-align: left;
    font-size: 0.875rem;
    min-height: 44px;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.quiz-panel-item:hover[b-ut2u344fwg] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(232, 124, 42, 0.35);
}

.quiz-panel-item:focus-visible[b-ut2u344fwg] {
    outline: 2px solid #E87C2A;
    outline-offset: 2px;
}

.quiz-panel-item-icon[b-ut2u344fwg] {
    color: #E87C2A;
    flex-shrink: 0;
}

.quiz-panel-item-body[b-ut2u344fwg] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.quiz-panel-item-title[b-ut2u344fwg] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-panel-this-lesson[b-ut2u344fwg] {
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(232, 124, 42, 0.12);
    color: #E87C2A;
    border: 1px solid rgba(232, 124, 42, 0.3);
}

.quiz-panel-item-meta[b-ut2u344fwg] {
    font-size: 0.78rem;
    color: #8a8580;
}

.quiz-panel-chevron[b-ut2u344fwg] {
    color: #5a5550;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.quiz-badge[b-ut2u344fwg] {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.quiz-badge-pass[b-ut2u344fwg] {
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    .quiz-panel-item[b-ut2u344fwg] {
        transition: none;
    }
}
/* /Components/LearningSpace/StudentNotesPanel.razor.rz.scp.css */
/*
    StudentNotesPanel.razor.css — pannello note del learning space.

    Le classi del componente esistevano solo in bundle-admin-learning-v2.css,
    caricato esclusivamente sotto AdminLayout: nel learning space il
    pannello veniva reso quasi senza stile. Qui il foglio scoped completo.
*/

.student-notes-panel[b-5cwgghyt7k] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--lp-color-text, #eef3ff);
}

/* ── Header ── */
.notes-header[b-5cwgghyt7k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.notes-title[b-5cwgghyt7k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.notes-title .icon[b-5cwgghyt7k] {
    font-size: 1rem;
}

.btn-new-note[b-5cwgghyt7k] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    min-height: 36px;
    border: 1px solid rgba(232, 124, 42, 0.4);
    border-radius: 999px;
    background: rgba(232, 124, 42, 0.12);
    color: var(--lp-color-accent, #e87c2a);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 160ms ease;
}

.btn-new-note:hover[b-5cwgghyt7k] {
    background: rgba(232, 124, 42, 0.2);
}

.btn-new-note:focus-visible[b-5cwgghyt7k] {
    outline: 2px solid var(--lg-focus, #ffb27f);
    outline-offset: 2px;
}

/* ── Editor ── */
.note-editor[b-5cwgghyt7k] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem;
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.18));
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.editor-header[b-5cwgghyt7k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.editor-title[b-5cwgghyt7k] {
    font-size: 0.875rem;
    font-weight: 700;
}

.timestamp-badge[b-5cwgghyt7k] {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(232, 124, 42, 0.14);
    color: var(--lp-color-accent, #e87c2a);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.note-textarea[b-5cwgghyt7k] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.8rem;
    border-radius: 10px;
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.25));
    background: rgba(255, 255, 255, 0.04);
    color: var(--lp-color-text, #eef3ff);
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
    resize: vertical;
}

.note-textarea[b-5cwgghyt7k]::placeholder {
    color: var(--lp-color-text-muted, #8a97b5);
}

.note-textarea:focus[b-5cwgghyt7k] {
    outline: none;
    border-color: var(--lp-color-accent, #e87c2a);
}

.note-textarea:focus-visible[b-5cwgghyt7k] {
    outline: 2px solid var(--lg-focus, #ffb27f);
    outline-offset: 1px;
}

.editor-options[b-5cwgghyt7k] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.checkbox-label[b-5cwgghyt7k] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    color: var(--lp-color-text-muted, #b8c2d8);
    cursor: pointer;
}

.checkbox-label input[b-5cwgghyt7k] {
    accent-color: var(--lp-color-accent, #e87c2a);
    width: 16px;
    height: 16px;
}

.editor-actions[b-5cwgghyt7k] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.btn-cancel[b-5cwgghyt7k] {
    padding: 0.45rem 0.9rem;
    min-height: 36px;
    border-radius: 999px;
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.25));
    background: transparent;
    color: var(--lp-color-text-muted, #b8c2d8);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-cancel:hover[b-5cwgghyt7k] {
    background: rgba(255, 255, 255, 0.05);
}

/* .btn-save e' gia' definita globalmente; qui solo il minimo per
   coerenza se mancasse nel contesto. */
.editor-actions .btn-save[b-5cwgghyt7k] {
    padding: 0.45rem 0.9rem;
    min-height: 36px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--lp-color-accent, #e87c2a);
    color: #1a0f06;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
}

.editor-actions .btn-save:hover[b-5cwgghyt7k] {
    filter: brightness(1.08);
}

/* ── Tabs ── */
.notes-tabs[b-5cwgghyt7k] {
    display: flex;
    gap: 0.35rem;
    padding: 4px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.18));
}

.tab-button[b-5cwgghyt7k] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    min-height: 38px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--lp-color-text-muted, #8a97b5);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.tab-button:hover[b-5cwgghyt7k] {
    color: var(--lp-color-text, #eef3ff);
    background: rgba(255, 255, 255, 0.05);
}

.tab-button.active[b-5cwgghyt7k] {
    background: var(--lp-color-accent, #e87c2a);
    color: #1a0f06;
}

.tab-button:focus-visible[b-5cwgghyt7k] {
    outline: 2px solid var(--lg-focus, #ffb27f);
    outline-offset: -2px;
}

/* ── Loading ── */
.student-notes-panel .loading-state[b-5cwgghyt7k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.5rem 0;
    color: var(--lp-color-text-muted, #8a97b5);
    font-size: 0.875rem;
}

.student-notes-panel .spinner[b-5cwgghyt7k] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(238, 243, 255, 0.15);
    border-top-color: var(--lp-color-accent, #e87c2a);
    animation: notes-panel-spin-b-5cwgghyt7k 0.7s linear infinite;
}

@keyframes notes-panel-spin-b-5cwgghyt7k {
    to {
        transform: rotate(360deg);
    }
}

/* ── Lista note ── */
.notes-list[b-5cwgghyt7k] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.note-card[b-5cwgghyt7k] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem;
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.18));
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.note-card.bookmarked[b-5cwgghyt7k] {
    border-color: rgba(232, 124, 42, 0.35);
}

.note-card.shared[b-5cwgghyt7k] {
    background: rgba(103, 216, 238, 0.04);
}

.note-card-header[b-5cwgghyt7k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.timestamp-link[b-5cwgghyt7k] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.55rem;
    border: none;
    border-radius: 999px;
    background: rgba(232, 124, 42, 0.14);
    color: var(--lp-color-accent, #e87c2a);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.timestamp-link:hover[b-5cwgghyt7k] {
    background: rgba(232, 124, 42, 0.24);
}

.timestamp-link:focus-visible[b-5cwgghyt7k] {
    outline: 2px solid var(--lg-focus, #ffb27f);
    outline-offset: 2px;
}

.note-actions[b-5cwgghyt7k] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.badge[b-5cwgghyt7k] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.bookmark-badge[b-5cwgghyt7k] {
    background: rgba(232, 124, 42, 0.14);
}

.shared-badge[b-5cwgghyt7k] {
    background: rgba(103, 216, 238, 0.14);
    color: #67d8ee;
}

.note-text[b-5cwgghyt7k] {
    font-size: 0.9375rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.note-card-footer[b-5cwgghyt7k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.note-date[b-5cwgghyt7k] {
    font-size: 0.75rem;
    color: var(--lp-color-text-muted, #8a97b5);
}

.note-author[b-5cwgghyt7k] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--lp-color-text-muted, #b8c2d8);
}

.note-buttons[b-5cwgghyt7k] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-icon[b-5cwgghyt7k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 0.875rem;
    cursor: pointer;
    opacity: 0.7;
    transition: background-color 160ms ease, opacity 160ms ease;
}

.btn-icon:hover[b-5cwgghyt7k] {
    background: rgba(255, 255, 255, 0.07);
    opacity: 1;
}

.btn-icon:focus-visible[b-5cwgghyt7k] {
    outline: 2px solid var(--lg-focus, #ffb27f);
    outline-offset: 1px;
}

.btn-icon.active[b-5cwgghyt7k] {
    opacity: 1;
}

.btn-icon.btn-delete:hover[b-5cwgghyt7k] {
    background: rgba(239, 68, 68, 0.14);
}

/* ── Empty state ── */
.student-notes-panel .empty-state[b-5cwgghyt7k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.75rem 1rem;
    text-align: center;
    border: 1px dashed var(--lp-color-border, rgba(126, 138, 166, 0.25));
    border-radius: 12px;
}

.student-notes-panel .empty-state .icon[b-5cwgghyt7k] {
    font-size: 1.5rem;
}

.student-notes-panel .empty-state p[b-5cwgghyt7k] {
    margin: 0;
    font-weight: 600;
}

.student-notes-panel .empty-state small[b-5cwgghyt7k] {
    color: var(--lp-color-text-muted, #8a97b5);
}

@media (prefers-reduced-motion: reduce) {
    .btn-new-note[b-5cwgghyt7k],
    .tab-button[b-5cwgghyt7k],
    .timestamp-link[b-5cwgghyt7k],
    .btn-icon[b-5cwgghyt7k] {
        transition: none;
    }

    .student-notes-panel .spinner[b-5cwgghyt7k] {
        animation-duration: 2s;
    }
}
/* /Components/Liquid/AudienceShowcase.razor.rz.scp.css */
/* AudienceShowcase — card sulla superficie di vetro del design system (token
   --lp-*), accento ambra del brand. Nessun blur: la vetrina compare dentro
   sezioni già traslucide, un secondo livello di vetro costerebbe solo GPU su mobile. */

.aud-showcase[b-ci8bbxgbg4] {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.aud-head[b-ci8bbxgbg4] {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}

.aud-title[b-ci8bbxgbg4] {
    font-family: var(--lp-font-display);
    font-size: var(--lp-text-xl);
    line-height: 1.35;
    color: var(--lp-text);
    margin: 0 0 8px;
    font-weight: 700;
}

.aud-sub[b-ci8bbxgbg4] {
    color: var(--lp-muted);
    font-size: var(--lp-text-sm);
    line-height: 1.6;
    margin: 0;
}

.aud-grid[b-ci8bbxgbg4] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 900px) {
    .aud-grid[b-ci8bbxgbg4] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .aud-grid[b-ci8bbxgbg4] { grid-template-columns: 1fr; }
}

.aud-grid > li[b-ci8bbxgbg4] { display: flex; }

.aud-card[b-ci8bbxgbg4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 152px;
    padding: 24px;
    border-radius: var(--lp-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--lp-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color .22s ease, transform .22s ease;
}

.aud-card:hover[b-ci8bbxgbg4],
.aud-card:focus-visible[b-ci8bbxgbg4] {
    border-color: rgba(var(--lp-accent-rgb), .5);
    transform: translateY(-2px);
}

.aud-card:focus-visible[b-ci8bbxgbg4] {
    outline: 2px solid var(--lp-accent-warm);
    outline-offset: 2px;
}

.aud-card--skeleton[b-ci8bbxgbg4] {
    animation: aud-pulse-b-ci8bbxgbg4 1.4s ease-in-out infinite;
}

@keyframes aud-pulse-b-ci8bbxgbg4 {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

.aud-card-cat[b-ci8bbxgbg4] {
    font-family: var(--lp-font-mono);
    font-size: var(--lp-text-xs);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lp-accent-warm);
}

.aud-card-title[b-ci8bbxgbg4] {
    font-size: var(--lp-text-lg);
    line-height: 1.35;
    font-weight: 600;
    color: var(--lp-text);
}

.aud-card-desc[b-ci8bbxgbg4] {
    font-size: var(--lp-text-sm);
    line-height: 1.6;
    color: var(--lp-muted);
}

.aud-card-meta[b-ci8bbxgbg4] {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: var(--lp-text-xs);
    color: rgba(246, 248, 255, 0.47);
}

.aud-note[b-ci8bbxgbg4] {
    text-align: center;
    color: var(--lp-muted);
    font-size: var(--lp-text-sm);
    line-height: 1.6;
    margin: 0;
}

.aud-note a[b-ci8bbxgbg4],
.aud-landing a[b-ci8bbxgbg4],
.aud-quote-course a[b-ci8bbxgbg4] {
    color: var(--lp-accent-warm);
    font-weight: 600;
    text-decoration: none;
}

.aud-note a:hover[b-ci8bbxgbg4],
.aud-note a:focus-visible[b-ci8bbxgbg4],
.aud-landing a:hover[b-ci8bbxgbg4],
.aud-landing a:focus-visible[b-ci8bbxgbg4],
.aud-quote-course a:hover[b-ci8bbxgbg4],
.aud-quote-course a:focus-visible[b-ci8bbxgbg4] {
    text-decoration: underline;
}

.aud-voices[b-ci8bbxgbg4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.aud-voices .aud-title[b-ci8bbxgbg4],
.aud-voices > .aud-sub[b-ci8bbxgbg4] {
    text-align: center;
}

.aud-voices-grid[b-ci8bbxgbg4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.aud-quote[b-ci8bbxgbg4] {
    margin: 0;
    padding: 24px;
    border-radius: var(--lp-radius-lg);
    border: 1px solid rgba(var(--lp-accent-rgb), .24);
    background: var(--lp-surface);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.aud-quote blockquote[b-ci8bbxgbg4] {
    margin: 0;
    font-size: var(--lp-text-base);
    line-height: 1.6;
    color: var(--lp-text);
}

.aud-quote figcaption[b-ci8bbxgbg4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--lp-text-sm);
    color: var(--lp-muted);
}

.aud-quote-author[b-ci8bbxgbg4] {
    color: var(--lp-text);
    font-weight: 600;
}

.aud-quote-rating[b-ci8bbxgbg4] {
    color: var(--lp-accent-warm);
    letter-spacing: .08em;
}

.aud-landing[b-ci8bbxgbg4] {
    text-align: center;
    margin: 0;
    font-size: var(--lp-text-sm);
}

@media (prefers-reduced-motion: reduce) {
    .aud-card[b-ci8bbxgbg4] { transition: none; }
    .aud-card:hover[b-ci8bbxgbg4],
    .aud-card:focus-visible[b-ci8bbxgbg4] { transform: none; }
    .aud-card--skeleton[b-ci8bbxgbg4] { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
    .aud-card[b-ci8bbxgbg4],
    .aud-quote[b-ci8bbxgbg4] { background: var(--lp-surface-strong); }
}

@media (forced-colors: active) {
    .aud-card[b-ci8bbxgbg4],
    .aud-quote[b-ci8bbxgbg4] { border: 1px solid CanvasText; }
    .aud-card:focus-visible[b-ci8bbxgbg4] { outline: 2px solid Highlight; }
}
/* /Components/Liquid/CareerNextStep.razor.rz.scp.css */
.career-journey-controls[b-po7i07e3xp] { display: grid; gap: .75rem; margin-block: 1.5rem; }
select[b-po7i07e3xp] { width: 100%; min-height: 44px; color: var(--lp-text); background: var(--lp-surface); border: 1px solid var(--lp-border); }
select:focus-visible[b-po7i07e3xp], a:focus-visible[b-po7i07e3xp], button:focus-visible[b-po7i07e3xp] { outline: 2px solid currentColor; outline-offset: 3px; }
li[b-po7i07e3xp] { margin-block: .75rem; overflow-wrap: anywhere; }
@media (min-width: 768px) { .career-journey-controls[b-po7i07e3xp] { grid-template-columns: auto 1fr auto 1fr; align-items: center; } }
@media (forced-colors: active) { select[b-po7i07e3xp] { color: CanvasText; background: Canvas; border-color: CanvasText; } }
/* /Components/Liquid/CourseFinder.razor.rz.scp.css */
.course-finder[b-zjzuls7wi4] { padding-block: 2rem; color: var(--lp-text); }
.finder-profiles[b-zjzuls7wi4] { display: flex; flex-wrap: wrap; gap: .75rem; }
.finder-profiles button[b-zjzuls7wi4] { min-height: 44px; cursor: pointer; }
.finder-profiles button[aria-pressed="true"][b-zjzuls7wi4] { border: 2px solid var(--lp-accent-warm); }
.course-finder a:focus-visible[b-zjzuls7wi4], .course-finder button:focus-visible[b-zjzuls7wi4] { outline: 3px solid var(--lp-accent-warm); outline-offset: 4px; }
.finder-results[b-zjzuls7wi4] { padding-inline-start: 1.25rem; }
.finder-results li[b-zjzuls7wi4] { padding-block: .75rem; overflow-wrap: anywhere; }
.finder-campaign[b-zjzuls7wi4] { padding: 1.25rem; margin-block: 1rem; }
@media (forced-colors: active) { .finder-profiles button[aria-pressed="true"][b-zjzuls7wi4] { outline: 2px solid Highlight; } }
/* /Components/Liquid/CourseOrientationQuiz.razor.rz.scp.css */
.cq[b-h367hrhb2x]{padding:52px 0 40px;}
.cq-head[b-h367hrhb2x]{text-align:center;max-width:720px;margin:0 auto 36px;}
.cq-head .eyebrow[b-h367hrhb2x]{display:inline-flex;align-items:center;gap:8px;font-family:var(--lp-font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:rgba(250,247,240,.62);margin-bottom:12px;font-weight:500;}
.cq-head h2[b-h367hrhb2x]{font-size:clamp(26px,3.8vw,38px);line-height:1.18;color:#faf7f0;margin:0 0 12px;}
.cq-head h2 .accent[b-h367hrhb2x]{ color: #e87c2a; }
.cq-head p[b-h367hrhb2x]{color:rgba(250,247,240,.70);font-size:16px;line-height:1.52;margin:0;}
.cq-wrap[b-h367hrhb2x]{max-width:760px;margin:0 auto;border-radius:24px;border:1px solid rgba(250,247,240,.10);background:linear-gradient(180deg,rgba(250,247,240,.045),rgba(250,247,240,.015));overflow:hidden;}
/* progress */
.cq-progress[b-h367hrhb2x]{height:3px;background:rgba(250,247,240,.08);}
.cq-progress-fill[b-h367hrhb2x]{height:100%;background:linear-gradient(90deg,#e87c2a,#f89b4d);transition:width .4s cubic-bezier(.32,.72,0,1);}
/* step */
.cq-step[b-h367hrhb2x]{padding:32px 36px 28px;}
@media(max-width:600px){.cq-step[b-h367hrhb2x]{padding:24px 20px 20px;}}
.cq-step-meta[b-h367hrhb2x]{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.cq-step-num[b-h367hrhb2x]{font-family:var(--lp-font-mono);font-size:12px;color:rgba(250,247,240,.50);letter-spacing:.12em;text-transform:uppercase;}
.cq-step-back[b-h367hrhb2x]{display:inline-flex;align-items:center;gap:8px;background:none;border:none;color:rgba(250,247,240,.54);font-size:14px;cursor:pointer;padding:4px 8px;border-radius:8px;transition:color .2s;font-family:inherit;}
.cq-step-back:hover[b-h367hrhb2x]{color:rgba(250,247,240,.88);}
.cq-step-back svg[b-h367hrhb2x]{width:14px;height:14px;}
.cq-step-back--hidden[b-h367hrhb2x]{visibility:hidden;pointer-events:none;}
.cq-q[b-h367hrhb2x]{font-size:clamp(19px,2.8vw,24px);line-height:1.3;color:#faf7f0;margin:0 0 24px;font-weight:600;}
/* answers */
.cq-answers[b-h367hrhb2x]{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:520px){.cq-answers[b-h367hrhb2x]{grid-template-columns:1fr;}}
.cq-ans[b-h367hrhb2x]{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;border-radius:14px;border:1px solid rgba(250,247,240,.12);background:rgba(250,247,240,.03);cursor:pointer;text-align:left;width:100%;transition:border-color .22s ease,background .22s ease,transform .18s ease;font-family:inherit;color:inherit;}
.cq-ans:hover[b-h367hrhb2x]{border-color:rgba(232,124,42,.40);background:rgba(232,124,42,.07);transform:translateY(-1px);}
.cq-ans--selected[b-h367hrhb2x]{border-color:rgba(232,124,42,.70)!important;background:linear-gradient(135deg,rgba(232,124,42,.14),rgba(232,124,42,.06))!important;box-shadow:0 0 0 1px rgba(232,124,42,.25),0 4px 16px rgba(232,124,42,.10);}
.cq-ans-icon[b-h367hrhb2x]{font-size:24px;line-height:1;flex-shrink:0;margin-top:1px;}
.cq-ans-label[b-h367hrhb2x]{font-size:16px;font-weight:600;color:#faf7f0;line-height:1.2;display:block;}
.cq-ans-sub[b-h367hrhb2x]{font-size:12px;color:rgba(250,247,240,.62);margin-top:4px;line-height:1.35;display:block;}
/* step footer */
.cq-step-foot[b-h367hrhb2x]{margin-top:24px;display:flex;align-items:center;justify-content:flex-end;}
.cq-btn-next[b-h367hrhb2x]{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;border:none;background:linear-gradient(135deg,#e87c2a,#f89b4d);color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:opacity .2s,transform .15s;font-family:inherit;}
.cq-btn-next:hover:not(:disabled)[b-h367hrhb2x]{transform:translateY(-1px);}
.cq-btn-next:disabled[b-h367hrhb2x]{opacity:.35;cursor:not-allowed;}
.cq-btn-next svg[b-h367hrhb2x]{width:16px;height:16px;}
/* result */
.cq-result[b-h367hrhb2x]{padding:36px;}
@media(max-width:600px){.cq-result[b-h367hrhb2x]{padding:24px 20px;}}
.cq-result-eyebrow[b-h367hrhb2x]{display:inline-flex;align-items:center;gap:8px;font-family:var(--lp-font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:rgba(232,124,42,.88);font-weight:600;margin-bottom:12px;}
.cq-result-title[b-h367hrhb2x]{font-size:clamp(22px,3vw,28px);line-height:1.2;color:#faf7f0;margin:0 0 12px;font-weight:700;}
.cq-result-desc[b-h367hrhb2x]{color:rgba(250,247,240,.72);font-size:16px;line-height:1.58;margin:0 0 20px;}
.cq-result-meta[b-h367hrhb2x]{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:28px;}
.cq-badge[b-h367hrhb2x]{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:999px;font-family:var(--lp-font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.10em;}
.cq-badge--level[b-h367hrhb2x]{border:1px solid rgba(232,124,42,.35);background:rgba(232,124,42,.12);color:#fbcfa3;}
.cq-badge--time[b-h367hrhb2x]{border:1px solid rgba(250,247,240,.18);background:rgba(250,247,240,.06);color:rgba(250,247,240,.78);}
.cq-badge--pace[b-h367hrhb2x]{border:1px solid rgba(124,175,232,.32);background:rgba(124,175,232,.10);color:#bcdcfb;}
.cq-badge svg[b-h367hrhb2x]{width:11px;height:11px;}
.cq-result-actions[b-h367hrhb2x]{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.cq-btn-go[b-h367hrhb2x]{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:999px;background:linear-gradient(135deg,#e87c2a,#f89b4d);color:#fff;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .2s;font-family:inherit;border:none;}
.cq-btn-go:hover[b-h367hrhb2x]{transform:translateY(-1px);box-shadow:0 6px 24px rgba(232,124,42,.28);}
.cq-btn-go svg[b-h367hrhb2x]{width:15px;height:15px;}
.cq-btn-reset[b-h367hrhb2x]{background:none;border:none;color:rgba(250,247,240,.52);font-size:14px;cursor:pointer;font-family:inherit;padding:4px 8px;border-radius:6px;transition:color .2s;}
.cq-btn-reset:hover[b-h367hrhb2x]{color:rgba(250,247,240,.80);}
/* /Components/Liquid/EnrollmentCountdownBanner.razor.rz.scp.css */
/* EnrollmentCountdownBanner — token del design system (DESIGN.md): testo
   --lp-text/--lp-muted, ambra --lp-accent-warm, mono --lp-font-mono, scala
   --lp-text-*, raggi --lg-r-*. Nessuna animazione: cambiano solo le cifre,
   quindi niente da ridurre sotto prefers-reduced-motion. */

.ecb[b-2eb755nqak] {
    padding: 28px 0 8px;
}

.ecb-inner[b-2eb755nqak] {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 24px 28px;
    border-radius: var(--lg-r-card);
    border: 1px solid rgba(var(--lp-accent-rgb, 232, 124, 42), .38);
    background: linear-gradient(135deg, rgba(var(--lp-accent-rgb, 232, 124, 42), .13), transparent);
}

.ecb-eyebrow[b-2eb755nqak] {
    font-family: var(--lp-font-mono);
    font-size: var(--lp-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--lp-accent-light);
}

.ecb-title[b-2eb755nqak] {
    margin: 8px 0;
    font-size: var(--lp-text-2xl);
    line-height: 1.2;
    color: var(--lp-text);
}

.ecb-msg[b-2eb755nqak] {
    margin: 0 0 8px;
    font-size: var(--lp-text-base);
    line-height: 1.5;
    color: var(--lp-text);
}

.ecb-free[b-2eb755nqak],
.ecb-deadline[b-2eb755nqak] {
    margin: 0;
    font-size: var(--lp-text-sm);
    color: var(--lp-muted);
}

.ecb-deadline[b-2eb755nqak] {
    margin-bottom: 12px;
}

.ecb-units[b-2eb755nqak] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.ecb-units li[b-2eb755nqak] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 4px;
    border-radius: var(--lg-r-chip);
    border: 1px solid var(--lg-surface-edge, rgba(255, 255, 255, .12));
    background: var(--lp-bg-elevated);
}

.ecb-num[b-2eb755nqak] {
    font-family: var(--lp-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--lp-text-2xl);
    font-weight: 700;
    line-height: 1;
    color: var(--lp-text);
}

.ecb-unit[b-2eb755nqak] {
    margin-top: 4px;
    font-size: var(--lp-text-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--lp-muted);
}

/* Inchiostro scuro sull'ambra (DESIGN.md: 7,05:1; il bianco darebbe 2,86:1). */
.ecb-cta[b-2eb755nqak] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--lg-r-pill);
    background: var(--lp-accent-warm);
    color: var(--lp-bg);
    font-size: var(--lp-text-base);
    font-weight: 700;
    text-decoration: none;
}

.ecb-cta:hover[b-2eb755nqak] {
    background: var(--lp-accent-light);
}

.ecb-cta:focus-visible[b-2eb755nqak] {
    outline: 2px solid var(--lp-text);
    outline-offset: 3px;
}

.ecb-cta svg[b-2eb755nqak] {
    width: 16px;
    height: 16px;
}

@media (max-width: 760px) {
    .ecb-inner[b-2eb755nqak] {
        grid-template-columns: 1fr;
        padding: 20px;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .ecb-inner[b-2eb755nqak] {
        background: var(--lp-bg-elevated);
    }
}

@media (forced-colors: active) {
    .ecb-inner[b-2eb755nqak],
    .ecb-units li[b-2eb755nqak] {
        border-color: CanvasText;
    }

    .ecb-cta[b-2eb755nqak] {
        border: 1px solid ButtonText;
    }
}
/* /Components/Liquid/LiquidNavbar.razor.rz.scp.css */
/*
    LiquidNavbar.razor.css — aggiunte scoped (mockup liquid-glass-v2, 2026-08).
    Copre SOLO il bottone ricerca icon-only (.lp-navbar-search): tutto il resto
    della navbar resta nei CSS condivisi (liquid-navbar-footer-v100.css).
    Vetro "dosato": lg-1 (blur 4px) — il controllo fa parte del chrome vetro.
*/

.lp-navbar-search[b-ndaoa3ae13] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
    text-decoration: none;
    backdrop-filter: blur(var(--lg-1, 4px)) saturate(var(--lg-sat, 180%));
    -webkit-backdrop-filter: blur(var(--lg-1, 4px)) saturate(var(--lg-sat, 180%));
    background: var(--lg-fill, rgba(255, 255, 255, 0.055));
    border: 1px solid var(--lg-edge, rgba(255, 255, 255, 0.14));
    transition: color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(.22, 1, .36, 1)),
                border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(.22, 1, .36, 1));
}

.lp-navbar-search:hover[b-ndaoa3ae13] {
    color: var(--lp-text, #faf7f0);
    border-color: rgba(255, 255, 255, 0.24);
}

.lp-navbar-search:focus-visible[b-ndaoa3ae13] {
    outline: 2px solid var(--lp-accent-warm, #e87c2a);
    outline-offset: 2px;
}

/* Sotto i 640px brand + azioni + burger sono gia' stretti:
   la ricerca resta disponibile come voce "Cerca" nel pannello mobile. */
@media (max-width: 640px) {
    .lp-navbar-search[b-ndaoa3ae13] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-navbar-search[b-ndaoa3ae13] {
        transition: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .lp-navbar-search[b-ndaoa3ae13] {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--lg-surface, #0e1524);
    }
}

.audience-nav[b-ndaoa3ae13] { position: relative; flex-shrink: 0; }
.audience-nav summary[b-ndaoa3ae13] { cursor: pointer; padding: .75rem; }
.audience-nav summary:focus-visible[b-ndaoa3ae13] { outline: 2px solid currentColor; outline-offset: 2px; }
.audience-nav > div[b-ndaoa3ae13] { position: absolute; top: 100%; inset-inline-start: 0; min-width: 15rem; z-index: 20; }

@media (max-width: 1024px) { .audience-nav[b-ndaoa3ae13] { display: none; } }

/* Selettore lingua: nella barra da 641px in su; sotto, la riga a 390px e' gia'
   piena (vedi liquid-navbar-footer, misura 2026-08-18) e il selettore vive in
   testa al pannello mobile, con la lista in flusso invece che sovrapposta. */
.lp-navbar-lang[b-ndaoa3ae13] { display: flex; align-items: center; }
.lp-navbar-mobile-lang[b-ndaoa3ae13] { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: .5rem; }
/* Nel pannello mobile la lista sta nel flusso (due colonne), non sovrapposta:
   un dropdown assoluto qui si ancorerebbe al pannello e finirebbe fuori vista. */
.lp-navbar-mobile-lang[b-ndaoa3ae13] { flex-wrap: wrap; padding-inline: var(--lp-space-4, 16px); }
.lp-navbar-mobile-lang .lp-navbar-mobile-group-label[b-ndaoa3ae13] { padding-inline: 0; }
.lp-navbar-mobile-lang[b-ndaoa3ae13]  .language-selector { display: contents; }
.lp-navbar-mobile-lang[b-ndaoa3ae13]  .language-btn { height: 44px; min-width: 64px; }
.lp-navbar-mobile-lang[b-ndaoa3ae13]  .language-dropdown {
    position: static; flex-basis: 100%; grid-template-columns: 1fr 1fr;
    max-height: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.lp-navbar-mobile-lang[b-ndaoa3ae13]  .language-option { min-height: 44px; }

@media (max-width: 640px) { .lp-navbar-lang[b-ndaoa3ae13] { display: none; } }

/* CTA di registrazione su telefono: le traduzioni ("COMMENCER GRATUITEMENT",
   "KOSTENLOS STARTEN") spingevano il burger fuori schermo a 390px (probe staging
   4.4.137, fr). Sotto 640px etichetta corta; sotto 480px "Accedi" resta solo nel
   pannello mobile, cosi' CTA e burger stanno sempre nella riga. */
.lp-cta-short[b-ndaoa3ae13] { display: none; }
@media (max-width: 640px) {
    .lp-cta-long[b-ndaoa3ae13] { display: none; }
    .lp-cta-short[b-ndaoa3ae13] { display: inline; }
}
@media (max-width: 480px) {
    .lp-navbar-login[b-ndaoa3ae13] { display: none; }
}

/* Menu "Altro": sta a destra della pill, vicino alle azioni: il pannello si apre
   verso sinistra per non uscire dal viewport a 1025-1280px. */
.more-nav > div[b-ndaoa3ae13] { inset-inline-start: auto; inset-inline-end: 0; }

/* La pill non si restringe: con overflow-x:auto nascondeva le ultime voci mentre
   c'era spazio libero (misura 28/09: a 1280px spariva tutto dopo Percorsi). Lo
   spazio si recupera dal resto, a soglie misurate con le etichette tedesche/russe
   (le piu' lunghe): sotto 1800px niente "Scegli il tuo percorso" (resta in home e
   nel pannello mobile) e CTA corta; sotto 1200px solo il logo, senza testo. */
.lp-navbar-links[b-ndaoa3ae13] { flex-shrink: 0; }
@media (max-width: 1799px) {
    .audience-nav:not(.more-nav)[b-ndaoa3ae13] { display: none; }
    .lp-cta-long[b-ndaoa3ae13] { display: none; }
    .lp-cta-short[b-ndaoa3ae13] { display: inline; }
}
@media (max-width: 1199px) {
    .lp-navbar-brand-text[b-ndaoa3ae13] { display: none; }
}

/* Header in tre zone: la pillola dei link sta sull'asse della viewport.
   Prima era un flex con margin auto: la pillola si centrava fra due gruppi di larghezza
   diversa (marchio da un lato, "Altro" + azioni dall'altro) e scivolava di 60-70px.
   Con minmax(max-content, 1fr) le due colonne laterali sono uguali finche' c'e' spazio e
   nessuna zona viene mai compressa o sovrapposta quando non ce n'e'. */
.lp-navbar-start[b-ndaoa3ae13],
.lp-navbar-end[b-ndaoa3ae13] {
    display: flex;
    align-items: center;
    gap: var(--lp-space-6);
}

@media (min-width: 1025px) {
    .lp-navbar-inner[b-ndaoa3ae13] {
        display: grid;
        grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
        align-items: center;
        column-gap: var(--lp-space-6);
    }
    .lp-navbar-start[b-ndaoa3ae13] { justify-self: start; }
    .lp-navbar-end[b-ndaoa3ae13] { justify-self: end; }
    .lp-navbar-links[b-ndaoa3ae13] { margin-inline: 0; }
}

/* Da 1800px compare anche "Scegli il tuo percorso": la zona iniziale diventa piu' larga di
   quella finale, e dentro 1440px la pillola non puo' restare al centro. */
@media (min-width: 1800px) {
    .lp-navbar-inner[b-ndaoa3ae13] { max-width: 1680px; }
}

/* 1025-1439px: le due colonne laterali devono restare uguali anche quando la zona finale
   (Altro + ricerca + lingua + Accedi + CTA, ~380px) e' piu' larga di quella iniziale
   (marchio, ~30-300px): con minmax(max-content,1fr) la colonna piu' larga vinceva e la
   pillola scivolava a sinistra (misurato: 31px a 1280, 121px a 1100). Qui "Altro" passa
   nella colonna iniziale, accanto alla pillola, e le azioni restano da sole nella finale:
   le colonne sono 1fr/1fr per davvero e la pillola sta sull'asse della viewport. Le zone
   sono dichiarate cella per cella, perche' l'auto-placement le sposterebbe in una seconda riga. */
@media (min-width: 1025px) and (max-width: 1439px) {
    .lp-navbar-inner[b-ndaoa3ae13] { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .lp-navbar-end[b-ndaoa3ae13] { display: contents; }
    .lp-navbar-start[b-ndaoa3ae13] { grid-column: 1; grid-row: 1; }
    .lp-navbar-links[b-ndaoa3ae13] { grid-column: 2; grid-row: 1; }
    .lp-navbar-end .more-nav[b-ndaoa3ae13] { grid-column: 1; grid-row: 1; justify-self: end; }
    .lp-navbar-end .lp-navbar-actions[b-ndaoa3ae13] { grid-column: 3; grid-row: 1; justify-self: end; }
}
@media (min-width: 1025px) and (max-width: 1339px) {
    .lp-navbar-brand-text[b-ndaoa3ae13] { display: none; }
}

@media (max-width: 1024px) {
    .lp-navbar-end[b-ndaoa3ae13] { margin-left: auto; }
}

/* Telefono: stessa spaziatura di prima fra azioni e burger (il gap della riga era space-2). */
@media (max-width: 640px) {
    .lp-navbar-start[b-ndaoa3ae13],
    .lp-navbar-end[b-ndaoa3ae13] { gap: var(--lp-space-2); }
}
/* /Components/Liquid/MobileAppShell.razor.rz.scp.css */
.mobile-shell-header[b-q53sfo8x8p] { align-items:center; justify-content:space-between; min-height:64px; padding:max(.65rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) .65rem max(1rem,env(safe-area-inset-left)); }
.mobile-shell-brand[b-q53sfo8x8p] { display:flex; align-items:center; min-height:44px; gap:.6rem; color:var(--lp-text); font-weight:800; text-decoration:none; }
.mobile-shell-brand img[b-q53sfo8x8p] { border-radius:7px; }
.mobile-shell-brand span span[b-q53sfo8x8p] { color:var(--lp-accent-warm); }
.mobile-shell-actions[b-q53sfo8x8p] { display:flex; gap:.4rem; }
.mobile-shell-icon[b-q53sfo8x8p] { display:inline-grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--lp-border); border-radius:50%; background:var(--lg-control-hover,rgba(255,255,255,.08)); color:var(--lp-text); text-decoration:none; font-size:1.7rem; }
.mobile-shell-icon:focus-visible[b-q53sfo8x8p],.mobile-menu-link:focus-visible[b-q53sfo8x8p] { outline:2px solid var(--lp-accent-warm); outline-offset:2px; }
.mobile-burger[b-q53sfo8x8p],.mobile-burger[b-q53sfo8x8p]::before,.mobile-burger[b-q53sfo8x8p]::after { display:block; width:18px; height:2px; border-radius:2px; background:currentColor; content:""; }
.mobile-burger[b-q53sfo8x8p]::before { transform:translateY(-6px); }.mobile-burger[b-q53sfo8x8p]::after { transform:translateY(4px); }
.mobile-menu-backdrop[b-q53sfo8x8p] { position:fixed; inset:0; z-index:10020; border:0; background:rgba(0,0,0,.64); }
.mobile-menu-sheet[b-q53sfo8x8p] { position:fixed!important; inset:max(.5rem,env(safe-area-inset-top)) max(.5rem,env(safe-area-inset-right)) max(.5rem,env(safe-area-inset-bottom)) auto; z-index:10021; width:min(92vw,27rem); overflow:auto; padding:1rem; border-radius:var(--lg-r-modal)!important; }
.mobile-menu-sheet>header[b-q53sfo8x8p] { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.25rem .25rem 1rem; }
.mobile-menu-sheet h2[b-q53sfo8x8p] { margin:.2rem 0 0; font-size:1.5rem; }.mobile-menu-kicker[b-q53sfo8x8p] { color:var(--lp-accent-warm); font-size:0.75rem; font-weight:800; letter-spacing:.14em; }
.mobile-menu-sheet nav[b-q53sfo8x8p] { display:grid; gap:.35rem; }
.mobile-menu-divider[b-q53sfo8x8p] { height:1px; margin:.6rem 0; background:var(--lp-border); }
/* Ricalca .mobile-menu-link, che vive nello scope di MobileLink e non e'
   raggiungibile da qui. Con data-mobile="next" la navbar e' nascosta: questo
   bottone e' l'unica uscita dell'utente autenticato su mobile. */
.mobile-menu-logout[b-q53sfo8x8p] { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:52px; padding:.7rem .9rem; border:1px solid transparent; border-radius:calc(var(--lg-r-card) - var(--lg-pad-card)); background:transparent; color:var(--lp-accent-danger,#e5484d); font:inherit; font-weight:650; text-align:left; cursor:pointer; }
.mobile-menu-logout:hover[b-q53sfo8x8p] { border-color:rgba(229,72,77,.32); background:rgba(229,72,77,.12); }
.mobile-menu-logout:focus-visible[b-q53sfo8x8p] { outline:2px solid var(--lp-accent-danger,#e5484d); outline-offset:2px; }
.mobile-menu-logout[disabled][b-q53sfo8x8p] { opacity:.6; cursor:progress; }
@media (max-width:480px) { .mobile-menu-sheet[b-q53sfo8x8p] { inset:max(.35rem,env(safe-area-inset-top)) max(.35rem,env(safe-area-inset-right)) max(.35rem,env(safe-area-inset-bottom)) max(.35rem,env(safe-area-inset-left)); width:auto; } }
@media (prefers-reduced-motion:reduce) { .mobile-menu-backdrop[b-q53sfo8x8p],.mobile-menu-sheet[b-q53sfo8x8p] { animation:none!important; transition:none!important; } }
@media (forced-colors:active) { .mobile-shell-header[b-q53sfo8x8p],.mobile-menu-sheet[b-q53sfo8x8p] { border:1px solid CanvasText; background:Canvas; } }
/* /Components/Liquid/MobileLink.razor.rz.scp.css */
.mobile-menu-link[b-ulp7glclxm] { display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:.7rem .9rem; border:1px solid transparent; border-radius:calc(var(--lg-r-card) - var(--lg-pad-card)); color:var(--lp-text); font-weight:650; text-decoration:none; }
.mobile-menu-link:hover[b-ulp7glclxm] { border-color:var(--lp-border); background:var(--lg-control-hover,rgba(255,255,255,.08)); }
.mobile-menu-link--primary[b-ulp7glclxm] { background:var(--lp-accent-warm); color:#1a0f06; }
/* /Components/Liquid/Templates/ComplianceHubTemplate.razor.rz.scp.css */
.ch-deadline-card[b-mvatpvoqxs],
.ch-advisor-card[b-mvatpvoqxs] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ch-deadline-label[b-mvatpvoqxs],
.ch-advisor-label[b-mvatpvoqxs] {
    font-weight: 600;
    font-size: 1rem;
}

.ch-deadline-note[b-mvatpvoqxs],
.ch-advisor-desc[b-mvatpvoqxs] {
    font-size: 1rem;
    opacity: 0.8;
}

.ch-advisor-kind[b-mvatpvoqxs] {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.65;
}

.ch-deadline-state[b-mvatpvoqxs] {
    align-self: flex-start;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    opacity: 0.85;
}

.ch-deadline-state--ok[b-mvatpvoqxs] { color: var(--lp-accent-success, #3fb27f); }
.ch-deadline-state--due[b-mvatpvoqxs] { color: var(--lp-accent-warning, #d69a2f); }
.ch-deadline-state--missing[b-mvatpvoqxs] { color: var(--lp-accent-danger, #d1544f); }

.ch-disclosure[b-mvatpvoqxs] {
    margin-top: 1rem;
    font-size: 0.85rem;
    opacity: 0.7;
}
/* /Components/Liquid/Templates/ExploreByGoalTemplate.razor.rz.scp.css */
.eg-area-card[b-k509nzb6qn],
.eg-resource-card[b-k509nzb6qn] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-decoration: none;
    color: inherit;
}

.eg-area-card-label[b-k509nzb6qn],
.eg-resource-card-label[b-k509nzb6qn] {
    font-weight: 600;
    font-size: 1rem;
}

.eg-area-card-desc[b-k509nzb6qn],
.eg-resource-card-desc[b-k509nzb6qn] {
    font-size: 1rem;
    opacity: 0.8;
}

.eg-resource-card-kind[b-k509nzb6qn] {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.65;
}
/* /Components/Liquid/Templates/StudyFromScratchTemplate.razor.rz.scp.css */
.sfs-section[b-lnnihv4anx] {
    max-width: 46rem;
}

.sfs-text[b-lnnihv4anx] {
    font-size: 1rem;
    color: var(--lp-muted, currentColor);
    line-height: 1.6;
}
/* /Components/OfflineDownloadActions.razor.rz.scp.css */
.offline-download-actions[b-6utuxvrsru] { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-block:.75rem; }
.offline-download-button[b-6utuxvrsru] { min-height:44px; padding:.6rem 1rem; border:1px solid var(--lp-border); border-radius:999px; background:var(--lg-control-hover,rgba(255,255,255,.08)); color:var(--lp-text); font:inherit; font-weight:700; }
.offline-download-button:focus-visible[b-6utuxvrsru] { outline:2px solid var(--lp-accent-warm); outline-offset:2px; }
.offline-download-button:disabled[b-6utuxvrsru] { opacity:.6; }
.offline-download-message[b-6utuxvrsru] { flex-basis:100%; color:var(--lp-muted); font-size:.85rem; }
@media (max-width:480px) { .offline-download-button[b-6utuxvrsru] { flex:1 1 auto; } }
/* /Components/Portal/EnergyNode.razor.rz.scp.css */
/* EnergyNode.razor.css — scoped */

.en-wrap[b-4h24h6o79s] {
    will-change: transform, opacity;
}

.en-inner[b-4h24h6o79s] {
    padding: 1.1rem 1.5rem;
    /* Transizioni CSS — opacity e blur animate via OnParametersSet */
    transition: opacity  var(--liquid-dur-base, 550ms) var(--liquid-ease, ease),
                filter   var(--liquid-dur-base, 550ms) var(--liquid-ease, ease),
                transform var(--liquid-dur-fast, 280ms) var(--liquid-ease-spring, ease);
    transform-origin: center top;
}

/* Stato: hidden (default) */
.en-hidden[b-4h24h6o79s] {
    pointer-events: none;
    transform: scale(0.92) translateY(8px);
}

/* Stato: soft (parzialmente visibile) */
.en-soft[b-4h24h6o79s] {
    pointer-events: auto;
    transform: scale(0.97) translateY(3px);
}

/* Stato: revealed (leggibile) */
.en-revealed[b-4h24h6o79s] {
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

/* Hover sul revealed: lieve elevazione */
.en-revealed:hover .en-inner[b-4h24h6o79s],
.en-inner.en-revealed:hover[b-4h24h6o79s] {
    transform: scale(1.01) translateY(-1px);
}

.en-label[b-4h24h6o79s] {
    margin-bottom: 0.45rem;
}

.en-title[b-4h24h6o79s] {
    margin-bottom: 0.45rem;
}

.en-body[b-4h24h6o79s] {
    margin-bottom: 0;
}

.en-content[b-4h24h6o79s] {
    margin-top: 0.75rem;
}

.en-hint[b-4h24h6o79s] {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: rgba(201, 169, 110, 0.42);
    font-family: -apple-system, system-ui, sans-serif;
    opacity: 0;
    animation: en-hint-fade-b-4h24h6o79s 0.4s 0.3s ease forwards;
}

@keyframes en-hint-fade-b-4h24h6o79s {
    to { opacity: 1; }
}

/* prefers-reduced-motion: no transizioni, solo opacity */
@media (prefers-reduced-motion: reduce) {
    .en-inner[b-4h24h6o79s] {
        transition: opacity 150ms ease !important;
        transform: none !important;
    }
}
/* /Components/Portal/IntentBar.razor.rz.scp.css */
/* IntentBar.razor.css — scoped, non impatta il sito */

.ib-wrap[b-ikwxhhnmep] {
    display: flex;
    gap: .45rem;
    align-items: center;
    flex-wrap: wrap;
}

.ib-btn[b-ikwxhhnmep] {
    font-family: -apple-system, 'SF Pro Display', system-ui, sans-serif;
    font-size: .76rem;
    letter-spacing: .01em;
    background: rgba(3, 2, 9, .78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .08);
    color: rgba(240, 236, 228, .42);
    padding: .46rem 1.05rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--liquid-dur-fast, 280ms) ease,
                color      var(--liquid-dur-fast, 280ms) ease,
                box-shadow var(--liquid-dur-fast, 280ms) ease;
    display: flex;
    align-items: center;
    gap: .35rem;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.ib-btn:hover[b-ikwxhhnmep] {
    border-color: rgba(255, 255, 255, .16);
    color: rgba(240, 236, 228, .7);
}

.ib-btn.ib-active[b-ikwxhhnmep] {
    background: var(--liquid-gold, #E87C2A);
    color: #030209;
    border-color: var(--liquid-gold, #E87C2A);
    box-shadow: 0 0 26px var(--liquid-gold-glow, rgba(232,124,42,.42));
}

.ib-icon[b-ikwxhhnmep] {
    font-size: .9rem;
    line-height: 1;
}

.ib-label[b-ikwxhhnmep] {
    line-height: 1;
}

/* Variant: compatta (solo icone, senza label) */
.ib-compact .ib-label[b-ikwxhhnmep] { display: none; }
.ib-compact .ib-btn[b-ikwxhhnmep]   { padding: .46rem .65rem; }
/* /Components/Portal/LiquidCanvas.razor.rz.scp.css */
/* LiquidCanvas.razor.css — scoped
   Il canvas occupa tutto il contenitore padre.
   Il layout che ospita il componente decide posizionamento e z-index. */

.lc-canvas[b-hted5a2tsk] {
    display: block;
    width: 100%;
    height: 100%;
}

/* Variante fullscreen (usata dal portal) */
.lc-fullscreen[b-hted5a2tsk] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
}

/* Variante inline (per hero sections nelle pagine reali — Fase 2) */
.lc-inline[b-hted5a2tsk] {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 24px;
    overflow: hidden;
}
/* /Components/Portal/LiquidLayout.razor.rz.scp.css */
/* LiquidLayout.razor.css — scoped */

/* Shell: contiene canvas + nodi + barra */
.ll-shell[b-8wsqskprvz] {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: var(--liquid-void, #030209);
    overflow: hidden;
}

/* Layer nodi: overlay trasparente sopra il canvas */
.ll-nodes[b-8wsqskprvz] {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

/* Intent bar posizionata in alto a sinistra */
.ll-bar[b-8wsqskprvz] {
    position: fixed;
    top: 1.4rem;
    left: 1.4rem;
    z-index: 30;
    pointer-events: auto;
}

/* Overlay custom (es. player video) sopra tutto */
.ll-overlay[b-8wsqskprvz] {
    position: fixed;
    inset: 0;
    z-index: 25;
    pointer-events: none;
}
.ll-overlay > *[b-8wsqskprvz] {
    pointer-events: auto;
}
/* /Components/Quiz/QuizRunner.razor.rz.scp.css */
/* QuizRunner — Liquid Glass surface (dark learning-space palette, accent #E87C2A) */
.quiz-runner[b-7moq20ntig] {
    display: block;
    color: #FAF7F0;
    font-size: 0.875rem;
}

.quiz-title[b-7moq20ntig] {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #FAF7F0;
}

.quiz-description[b-7moq20ntig] {
    margin: 0 0 0.75rem;
    color: #b0aaa4;
    line-height: 1.5;
}

.quiz-meta[b-7moq20ntig] {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: #8a8580;
}

.quiz-meta i[b-7moq20ntig] {
    width: 1rem;
    color: #E87C2A;
}

.quiz-state[b-7moq20ntig] {
    padding: 1.25rem;
    text-align: center;
    color: #b0aaa4;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.quiz-error i[b-7moq20ntig] {
    color: #f87171;
    font-size: 1.25rem;
    display: block;
    margin-bottom: 0.5rem;
}

.quiz-spinner[b-7moq20ntig] {
    width: 28px;
    height: 28px;
    margin: 0 auto 0.5rem;
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-top-color: #E87C2A;
    border-radius: 50%;
    animation: quiz-spin-b-7moq20ntig 0.8s linear infinite;
}

.quiz-spinner-sm[b-7moq20ntig] {
    width: 14px;
    height: 14px;
    margin: 0;
    display: inline-block;
    vertical-align: -2px;
}

@keyframes quiz-spin-b-7moq20ntig {
    to { transform: rotate(360deg); }
}

.quiz-btn[b-7moq20ntig] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.1rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    min-height: 44px;
    transition: background-color 150ms ease, opacity 150ms ease;
}

.quiz-btn:disabled[b-7moq20ntig] {
    opacity: 0.45;
    cursor: not-allowed;
}

.quiz-btn-primary[b-7moq20ntig] {
    background: #E87C2A;
    color: #0a0a0a;
}

.quiz-btn-primary:hover:not(:disabled)[b-7moq20ntig] {
    background: #f08c3e;
}

.quiz-btn-outline[b-7moq20ntig] {
    background: rgba(255, 255, 255, 0.06);
    color: #b0aaa4;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.quiz-btn-outline:hover:not(:disabled)[b-7moq20ntig] {
    background: rgba(255, 255, 255, 0.1);
    color: #FAF7F0;
}

.quiz-btn:focus-visible[b-7moq20ntig],
.quiz-option input:focus-visible[b-7moq20ntig] {
    outline: 2px solid #E87C2A;
    outline-offset: 2px;
}

.quiz-actions[b-7moq20ntig] {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.quiz-blocked[b-7moq20ntig] {
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    border-radius: 10px;
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.25);
    color: #fca5a5;
}

.quiz-history[b-7moq20ntig] {
    margin-top: 1.25rem;
}

.quiz-history-title[b-7moq20ntig] {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a8580;
}

.quiz-history-list[b-7moq20ntig] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.quiz-history-item[b-7moq20ntig] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.quiz-history-date[b-7moq20ntig] {
    flex: 1;
    color: #8a8580;
    font-size: 0.8rem;
}

.quiz-history-score[b-7moq20ntig] {
    font-weight: 700;
    color: #FAF7F0;
}

.quiz-badge[b-7moq20ntig] {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.quiz-badge-pass[b-7moq20ntig] {
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.3);
}

.quiz-badge-fail[b-7moq20ntig] {
    background: rgba(248, 113, 113, 0.1);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.3);
}

.quiz-progress[b-7moq20ntig] {
    color: #8a8580;
    margin: 0 0 0.75rem;
}

.quiz-question[b-7moq20ntig] {
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

fieldset.quiz-question[b-7moq20ntig] {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.quiz-question-text[b-7moq20ntig] {
    font-weight: 600;
    color: #FAF7F0;
    margin: 0 0 0.6rem;
    line-height: 1.45;
}

legend.quiz-question-text[b-7moq20ntig] {
    padding: 0;
}

.quiz-question-points[b-7moq20ntig] {
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #E87C2A;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.quiz-options[b-7moq20ntig] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.quiz-option[b-7moq20ntig] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    min-height: 44px;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.quiz-option:hover[b-7moq20ntig] {
    background: rgba(255, 255, 255, 0.05);
}

.quiz-option-selected[b-7moq20ntig] {
    border-color: rgba(232, 124, 42, 0.55);
    background: rgba(232, 124, 42, 0.1);
}

.quiz-option input[b-7moq20ntig] {
    accent-color: #E87C2A;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.quiz-option-text[b-7moq20ntig] {
    color: #d0cbc4;
}

.quiz-confirm[b-7moq20ntig] {
    padding: 1.25rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.quiz-confirm p[b-7moq20ntig] {
    color: #b0aaa4;
}

.quiz-result-header[b-7moq20ntig] {
    text-align: center;
    padding: 1.25rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    border: 1px solid;
}

.quiz-result-header i[b-7moq20ntig] {
    font-size: 1.75rem;
    display: block;
    margin-bottom: 0.4rem;
}

.quiz-result-passed[b-7moq20ntig] {
    background: rgba(52, 211, 153, 0.08);
    border-color: rgba(52, 211, 153, 0.3);
}

.quiz-result-passed i[b-7moq20ntig],
.quiz-result-passed .quiz-result-score[b-7moq20ntig] {
    color: #34d399;
}

.quiz-result-failed[b-7moq20ntig] {
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.3);
}

.quiz-result-failed i[b-7moq20ntig],
.quiz-result-failed .quiz-result-score[b-7moq20ntig] {
    color: #f87171;
}

.quiz-result-score[b-7moq20ntig] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0.25rem 0;
}

.quiz-result-detail[b-7moq20ntig] {
    color: #8a8580;
    margin: 0;
}

.quiz-review-correct[b-7moq20ntig] {
    border-left: 1px solid #34d399;
}

.quiz-review-wrong[b-7moq20ntig] {
    border-left: 1px solid #f87171;
}

.quiz-review-options[b-7moq20ntig] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.quiz-review-option[b-7moq20ntig] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    color: #b0aaa4;
    background: rgba(255, 255, 255, 0.02);
}

.quiz-review-option-correct[b-7moq20ntig] {
    color: #34d399;
    background: rgba(52, 211, 153, 0.08);
}

.quiz-review-option-wrong[b-7moq20ntig] {
    color: #f87171;
    background: rgba(248, 113, 113, 0.08);
}

.quiz-your-answer[b-7moq20ntig] {
    margin-left: auto;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.quiz-explanation[b-7moq20ntig] {
    margin: 0.6rem 0 0;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background: rgba(232, 124, 42, 0.07);
    border: 1px solid rgba(232, 124, 42, 0.2);
    color: #d0cbc4;
}

.quiz-explanation i[b-7moq20ntig] {
    color: #E87C2A;
}

@media (prefers-reduced-motion: reduce) {
    .quiz-spinner[b-7moq20ntig] {
        animation: none;
    }

    .quiz-btn[b-7moq20ntig],
    .quiz-option[b-7moq20ntig] {
        transition: none;
    }
}

@media (prefers-contrast: more) {
    .quiz-question[b-7moq20ntig],
    .quiz-state[b-7moq20ntig],
    .quiz-confirm[b-7moq20ntig] {
        border-color: rgba(255, 255, 255, 0.35);
    }

    .quiz-option-text[b-7moq20ntig],
    .quiz-description[b-7moq20ntig] {
        color: #FAF7F0;
    }
}
/* /Components/Retention/AIHint.razor.rz.scp.css */
/* AIHint — suggerimenti progressivi: tono da tutor ("prova a ragionare su…"),
   mai la soluzione al primo colpo. La spiegazione e' visivamente distinta. */

.ai-hints[b-iye6dexegy] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-hint[b-iye6dexegy] {
    padding: 14px 16px;
    border-radius: var(--lp-radius-sm);
    border: 1px solid color-mix(in srgb, var(--lp-accent) 30%, transparent);
    border-left-width: 3px;
    background: color-mix(in srgb, var(--lp-accent) 12%, transparent);
}

.ai-hint-explanation[b-iye6dexegy] {
    border-color: color-mix(in srgb, var(--lp-accent-2) 35%, transparent);
    border-left-width: 3px;
    background: color-mix(in srgb, var(--lp-accent-2) 12%, transparent);
}

.ai-hint-label[b-iye6dexegy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--lp-accent-text);
}

.ai-hint-explanation .ai-hint-label[b-iye6dexegy] {
    color: var(--lp-accent-2);
}

.ai-hint-text[b-iye6dexegy] {
    margin: 6px 0 0;
    font-size: var(--lp-text-base);
    line-height: 1.55;
    color: var(--lp-text);
}

@media (forced-colors: active) {
    .ai-hint[b-iye6dexegy] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}
/* /Components/Retention/AttemptInput.razor.rz.scp.css */
/* AttemptInput — textarea ampia, focus ben visibile, invio disabilitato
   finche' il campo e' vuoto. */

.attempt-input[b-y3neppnute] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.attempt-label[b-y3neppnute] {
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--lp-muted);
}

.attempt-textarea[b-y3neppnute] {
    width: 100%;
    min-height: 110px;
    padding: 14px 16px;
    border-radius: var(--lp-radius-sm);
    border: 1px solid var(--lp-border-strong);
    background: var(--lp-border);
    color: var(--lp-text);
    font-size: var(--lp-text-base);
    line-height: 1.55;
    font-family: inherit;
    resize: vertical;
    transition: border-color var(--lp-motion-fast) ease;
}

.attempt-textarea[b-y3neppnute]::placeholder {
    color: var(--lp-faint);
}

.attempt-textarea:focus-visible[b-y3neppnute] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 1px;
    border-color: var(--lp-accent-warm);
}

.attempt-textarea:disabled[b-y3neppnute] {
    opacity: 0.6;
}

.attempt-actions[b-y3neppnute] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.attempt-note[b-y3neppnute] {
    font-size: var(--lp-text-xs);
    color: var(--lp-muted);
}

.attempt-spinner[b-y3neppnute] {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 6px;
    vertical-align: -2px;
    border: 2px solid var(--lp-faint);
    border-top-color: var(--lp-on-accent);
    border-radius: 50%;
    animation: attempt-spin-b-y3neppnute 0.8s linear infinite;
}

@keyframes attempt-spin-b-y3neppnute {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .attempt-textarea[b-y3neppnute] {
        transition: none;
    }

    .attempt-spinner[b-y3neppnute] {
        animation: none;
    }
}

@media (forced-colors: active) {
    .attempt-textarea[b-y3neppnute] {
        border-color: CanvasText;
        background: Field;
        color: FieldText;
    }
}
/* /Components/Retention/ConfidencePicker.razor.rz.scp.css */
/* ConfidencePicker — tre chip a scelta singola, opzionale. Stessa palette di
   AttemptInput (superficie scura, focus ambra), mai solo colore: la selezione
   ha bordo pieno + icona + aria-checked. */

.confidence-picker[b-vb1h6dyb13] {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.confidence-legend[b-vb1h6dyb13] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0;
    margin-bottom: 8px;
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--lp-muted);
}

.confidence-optional[b-vb1h6dyb13] {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--lp-faint);
}

.confidence-options[b-vb1h6dyb13] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.confidence-option[b-vb1h6dyb13] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: var(--lp-radius-sm);
    border: 1px solid var(--lp-border-strong);
    background: var(--lp-border);
    color: var(--lp-text);
    font: inherit;
    font-size: var(--lp-text-sm);
    cursor: pointer;
    transition: border-color var(--lp-motion-fast) ease, background-color var(--lp-motion-fast) ease;
}

.confidence-option:hover:not(:disabled)[b-vb1h6dyb13] {
    border-color: var(--lp-border-strong);
    background: var(--lp-border);
}

.confidence-option:focus-visible[b-vb1h6dyb13] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 1px;
}

.confidence-option.is-selected[b-vb1h6dyb13] {
    border-color: var(--lp-accent-warm);
    background: color-mix(in srgb, var(--lp-accent-warm) 16%, transparent);
    color: var(--lp-text);
}

.confidence-option:disabled[b-vb1h6dyb13] {
    opacity: 0.6;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .confidence-option[b-vb1h6dyb13] {
        transition: none;
    }
}

@media (forced-colors: active) {
    .confidence-option[b-vb1h6dyb13] {
        border-color: ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }

    .confidence-option.is-selected[b-vb1h6dyb13] {
        border-width: 3px;
    }
}
/* /Components/Retention/DailySessionCard.razor.rz.scp.css */
/* DailySessionCard — CTA principale della coppia di widget: solida, con
   accento caldo come il "continua da dove eri" della dashboard. */

.dsc[b-59cxnfhfdb] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--lp-accent-warm) 30%, transparent);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
    padding: 24px;
}

.dsc-kicker[b-59cxnfhfdb] {
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lp-accent-warm);
}

.dsc-title[b-59cxnfhfdb] {
    margin: 0;
    font-size: var(--lp-text-xl);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--lp-text);
}

.dsc-meta[b-59cxnfhfdb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    font-size: var(--lp-text-sm);
    color: var(--lp-muted);
}

.dsc-meta i[b-59cxnfhfdb] {
    margin-right: 6px;
    color: var(--lp-muted);
}

.dsc-skills[b-59cxnfhfdb] {
    margin: 0;
    font-size: var(--lp-text-xs);
    color: var(--lp-muted);
}

.dsc-cta[b-59cxnfhfdb] {
    margin-top: 6px;
}

.dsc-cta:focus-visible[b-59cxnfhfdb] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
}

@media (forced-colors: active) {
    .dsc[b-59cxnfhfdb] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}
/* /Components/Retention/ForgettingRadarCard.razor.rz.scp.css */
/* ForgettingRadarCard — vista sui concetti in avvicinamento alla finestra di
   ripasso (design doc §8). Superficie solida, due gruppi temporali. */

.frc[b-s3mjkccunw] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
}

.frc-title[b-s3mjkccunw] {
    margin: 0;
    font-size: var(--lp-text-lg);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--lp-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.frc-title i[b-s3mjkccunw] {
    color: var(--lp-accent-2);
}

.frc-empty[b-s3mjkccunw] {
    margin: 0;
    font-size: var(--lp-text-base);
    line-height: 1.55;
    color: var(--lp-muted);
}

.frc-group[b-s3mjkccunw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.frc-group-title[b-s3mjkccunw] {
    margin: 0;
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--lp-muted);
}

.frc-list[b-s3mjkccunw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.frc-row[b-s3mjkccunw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-radius: var(--lp-radius-sm);
    background: var(--lp-border);
    border: 1px solid var(--lp-border);
}

.frc-name[b-s3mjkccunw] {
    font-size: var(--lp-text-base);
    font-weight: 600;
    color: var(--lp-text);
}

.frc-meta[b-s3mjkccunw] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.frc-when[b-s3mjkccunw] {
    font-size: var(--lp-text-xs);
    font-weight: 600;
    color: var(--lp-muted);
    white-space: nowrap;
}

@media (forced-colors: active) {
    .frc[b-s3mjkccunw],
    .frc-row[b-s3mjkccunw] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}
/* /Components/Retention/KnowledgeAtRiskRow.razor.rz.scp.css */
/* KnowledgeAtRiskRow — fino a 3 card delle skill piu' urgenti. Superfici
   solide, accenti caldi coerenti con la dashboard. */

.kar[b-482g1tecbg] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.kar-title[b-482g1tecbg] {
    margin: 0;
    font-size: var(--lp-text-lg);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--lp-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.kar-title i[b-482g1tecbg] {
    color: var(--lp-accent-warm);
}

.kar-grid[b-482g1tecbg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.kar-card[b-482g1tecbg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
}

.kar-name[b-482g1tecbg] {
    font-size: var(--lp-text-base);
    font-weight: 700;
    color: var(--lp-text);
}

.kar-unverified[b-482g1tecbg] {
    font-size: var(--lp-text-sm);
    font-weight: 600;
    color: var(--lp-muted);
}

.kar-foot[b-482g1tecbg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
}

.kar-link[b-482g1tecbg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px; /* pavimento touch target di prodotto */
    font-size: var(--lp-text-xs);
    font-weight: 700;
    color: var(--lp-accent-warm);
    text-decoration: none;
}

.kar-link:hover[b-482g1tecbg] {
    text-decoration: underline;
}

.kar-link:focus-visible[b-482g1tecbg] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
    border-radius: var(--lp-radius-pill);
}

@media (forced-colors: active) {
    .kar-card[b-482g1tecbg] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}
/* /Components/Retention/KnowledgeHealthCard.razor.rz.scp.css */
/* KnowledgeHealthCard — superficie solida (come .section-card della dashboard):
   niente vetro decorativo, gerarchia tipografica e spazio generoso. */

.khc[b-5upphd79j6] {
    display: flex;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
    padding: 24px;
}

.khc-main[b-5upphd79j6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.khc-kicker[b-5upphd79j6] {
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lp-accent-warm);
}

.khc-counts[b-5upphd79j6] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    font-size: var(--lp-text-sm);
    color: var(--lp-muted);
}

.khc-counts strong[b-5upphd79j6] {
    color: var(--lp-text);
    font-weight: 700;
}

.khc-link[b-5upphd79j6] {
    font-size: var(--lp-text-sm);
    font-weight: 600;
    color: var(--lp-accent-2);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px; /* pavimento touch target di prodotto */
}

.khc-link:hover[b-5upphd79j6] {
    text-decoration: underline;
}

.khc-link:focus-visible[b-5upphd79j6] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
    border-radius: var(--lp-radius-pill);
}

/* Empty state */
.khc-empty[b-5upphd79j6] {
    align-items: flex-start;
    gap: 16px;
}

.khc-empty-icon[b-5upphd79j6] {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--lp-radius);
    background: color-mix(in srgb, var(--lp-accent-warm) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--lp-accent-warm) 30%, transparent);
    color: var(--lp-accent-warm);
    font-size: var(--lp-text-lg);
}

.khc-empty-body h2[b-5upphd79j6] {
    margin: 0 0 6px;
    font-size: var(--lp-text-lg);
    font-weight: 700;
    color: var(--lp-text);
}

.khc-empty-body p[b-5upphd79j6] {
    margin: 0 0 12px;
    font-size: var(--lp-text-sm);
    line-height: 1.55;
    color: var(--lp-muted);
    max-width: 52ch;
}

.khc-empty-actions[b-5upphd79j6] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.khc-empty-actions a:focus-visible[b-5upphd79j6] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
}

@media (forced-colors: active) {
    .khc[b-5upphd79j6],
    .khc-empty-icon[b-5upphd79j6] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}
/* /Components/Retention/MasteryScore.razor.rz.scp.css */
/* MasteryScore — barra di padronanza misurata (arancio, come le progress
   della dashboard: e' un dato osservato, non una stima). */

.mastery-score[b-ee32oymi3y] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

.score-head[b-ee32oymi3y] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.score-label[b-ee32oymi3y] {
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--lp-muted);
}

.score-value[b-ee32oymi3y] {
    font-size: var(--lp-text-sm);
    font-weight: 700;
    color: var(--lp-accent-warm);
}

.score-bar[b-ee32oymi3y] {
    height: 6px;
    border-radius: var(--lp-radius-pill);
    background: var(--lp-border);
    overflow: hidden;
}

.score-bar-fill[b-ee32oymi3y] {
    height: 100%;
    border-radius: var(--lp-radius-pill);
    background: linear-gradient(90deg, var(--lp-accent-warm), var(--lp-accent-warm));
    transition: width var(--lg-base) var(--lg-ease);
}

.score-note[b-ee32oymi3y] {
    font-size: var(--lp-text-xs);
    color: var(--lp-muted);
}

@media (prefers-reduced-motion: reduce) {
    .score-bar-fill[b-ee32oymi3y] {
        transition: none;
    }
}

@media (forced-colors: active) {
    .score-bar[b-ee32oymi3y] {
        border: 1px solid CanvasText;
    }

    .score-bar-fill[b-ee32oymi3y] {
        background: CanvasText;
    }
}
/* /Components/Retention/NextActionCard.razor.rz.scp.css */
/* NextActionCard — la singola azione consigliata (design doc §4). Accento
   caldo come la CTA principale, spiegazione espandibile "Perché?". */

.nac[b-8g4yan0r22] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 22px;
    border: 1px solid color-mix(in srgb, var(--lp-accent-warm) 30%, transparent);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
}

.nac-kicker[b-8g4yan0r22] {
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lp-accent-warm);
}

.nac-title[b-8g4yan0r22] {
    margin: 0;
    font-size: var(--lp-text-lg);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--lp-text);
}

.nac-text[b-8g4yan0r22] {
    margin: 0;
    font-size: var(--lp-text-base);
    line-height: 1.6;
    color: var(--lp-text);
    max-width: 62ch;
}

.nac-actions[b-8g4yan0r22] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.nac-cta:focus-visible[b-8g4yan0r22] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
}

.nac-why-btn[b-8g4yan0r22] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px; /* pavimento touch target di prodotto */
    padding: 2px 0;
    border: none;
    background: none;
    font-size: var(--lp-text-xs);
    font-weight: 600;
    color: var(--lp-accent-2);
    cursor: pointer;
}

.nac-why-btn:hover[b-8g4yan0r22] {
    text-decoration: underline;
}

.nac-why-btn:focus-visible[b-8g4yan0r22] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
    border-radius: var(--lp-radius-pill);
}

.nac-why[b-8g4yan0r22] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--lp-radius-sm);
    border: 1px solid color-mix(in srgb, var(--lp-accent-2) 25%, transparent);
    background: color-mix(in srgb, var(--lp-accent-2) 8%, transparent);
}

.nac-why-text[b-8g4yan0r22] {
    margin: 0;
    font-size: var(--lp-text-sm);
    line-height: 1.55;
    color: var(--lp-text);
}

.nac-why-grid[b-8g4yan0r22] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 0;
}

.nac-why-grid dt[b-8g4yan0r22] {
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--lp-muted);
}

.nac-why-grid dd[b-8g4yan0r22] {
    margin: 2px 0 0;
    font-size: var(--lp-text-base);
    font-weight: 700;
    color: var(--lp-text);
}

@media (forced-colors: active) {
    .nac[b-8g4yan0r22],
    .nac-why[b-8g4yan0r22] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}
/* /Components/Retention/PassportPublicView.razor.rz.scp.css */
/* PassportPublicView — identica in anteprima e pagina pubblica. Token --lp-*. */

.ppv[b-gx2sonlf7z] {
    display: grid;
    gap: 14px;
    padding: 20px 22px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
}

.ppv-preview[b-gx2sonlf7z] {
    border-style: dashed;
}

.ppv-header[b-gx2sonlf7z] {
    display: grid;
    gap: 6px;
}

.ppv-kicker[b-gx2sonlf7z] {
    font-family: var(--lp-font-mono);
    font-size: var(--lp-text-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lp-accent-warm);
}

.ppv-title[b-gx2sonlf7z] {
    margin: 0;
    font-family: var(--lp-font-display);
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--lp-text);
}

.ppv-sub[b-gx2sonlf7z],
.ppv-foot[b-gx2sonlf7z],
.ppv-empty[b-gx2sonlf7z] {
    margin: 0;
    font-size: var(--lp-text-sm);
    color: var(--lp-muted);
    max-width: 68ch;
}

.ppv-foot[b-gx2sonlf7z] {
    color: var(--lp-faint);
}

.ppv-counts[b-gx2sonlf7z] {
    margin: 0;
    display: flex;
    gap: 8px;
    font-size: var(--lp-text-sm);
    color: var(--lp-muted);
}

.ppv-counts strong[b-gx2sonlf7z] {
    color: var(--lp-text);
}

.ppv-list[b-gx2sonlf7z] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.ppv-row[b-gx2sonlf7z] {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    background: var(--lp-surface-strong);
}

.ppv-row-head[b-gx2sonlf7z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ppv-name[b-gx2sonlf7z] {
    font-weight: 700;
    color: var(--lp-text);
}

.ppv-area[b-gx2sonlf7z] {
    font-size: var(--lp-text-xs);
    color: var(--lp-faint);
}

.ppv-band[b-gx2sonlf7z] {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: var(--lp-radius-pill);
    font-size: var(--lp-text-xs);
    font-weight: 600;
    border: 1px solid var(--lp-border-strong);
    color: var(--lp-muted);
}

.ppv-band-solid[b-gx2sonlf7z] {
    background: var(--lp-accent-success);
    color: var(--lp-on-success);
    border-color: transparent;
}

.ppv-row-body[b-gx2sonlf7z] {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(160px, 1fr) 2fr;
    align-items: center;
}

.ppv-evidence[b-gx2sonlf7z] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.ppv-evidence div[b-gx2sonlf7z] {
    display: grid;
}

.ppv-evidence dt[b-gx2sonlf7z] {
    font-family: var(--lp-font-mono);
    font-size: var(--lp-text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-faint);
}

.ppv-evidence dd[b-gx2sonlf7z] {
    margin: 0;
    font-weight: 600;
    color: var(--lp-text);
}

@media (max-width: 640px) {
    .ppv-row-body[b-gx2sonlf7z] {
        grid-template-columns: 1fr;
    }
}

@media (forced-colors: active) {
    .ppv[b-gx2sonlf7z],
    .ppv-row[b-gx2sonlf7z],
    .ppv-band[b-gx2sonlf7z] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}
/* /Components/Retention/PracticeCard.razor.rz.scp.css */
/* PracticeCard — superficie solida, gerarchia: chip tipo → skill → prompt →
   risposta → esito. Niente vetro: la leggibilita' del prompt viene prima. */

.practice-card[b-yuocw0nlic] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
    padding: 24px;
}

.pc-head[b-yuocw0nlic] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pc-type[b-yuocw0nlic] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--lg-r-pill);
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--lp-accent-text);
    background: color-mix(in srgb, var(--lp-accent) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--lp-accent) 35%, transparent);
}

.pc-skill[b-yuocw0nlic] {
    font-size: var(--lp-text-xs);
    font-weight: 600;
    color: var(--lp-muted);
}

.pc-prompt[b-yuocw0nlic] {
    margin: 0;
    font-size: var(--lp-text-xl);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--lp-text);
}

/* Opzioni MultipleChoice */
.pc-choices[b-yuocw0nlic] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pc-choice[b-yuocw0nlic] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--lp-radius-sm);
    border: 1px solid var(--lp-border);
    background: var(--lp-border);
    cursor: pointer;
    transition: border-color var(--lp-motion-fast) ease, background var(--lp-motion-fast) ease;
}

.pc-choice:hover[b-yuocw0nlic] {
    background: var(--lp-border);
}

.pc-choice:has(input:focus-visible)[b-yuocw0nlic] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
}

.pc-choice:has(input:disabled)[b-yuocw0nlic] {
    cursor: default;
    opacity: 0.72;
}

.pc-choice-selected[b-yuocw0nlic] {
    border-color: var(--lp-accent-warm);
    background: color-mix(in srgb, var(--lp-accent-warm) 12%, transparent);
}

.pc-choice input[b-yuocw0nlic] {
    margin-top: 3px;
    accent-color: var(--lp-accent-warm);
}

.pc-choice-text[b-yuocw0nlic] {
    font-size: var(--lp-text-base);
    line-height: 1.5;
    color: var(--lp-text);
}

/* Indicazione multi-select (AllowMultipleSelection) */
.pc-multi-hint[b-yuocw0nlic] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--lp-text-xs);
    font-weight: 600;
    color: var(--lp-muted);
}

.pc-multi-hint i[b-yuocw0nlic] {
    color: var(--lp-accent-warm);
}

/* Esito */
.pc-result[b-yuocw0nlic] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--lp-radius-sm);
    font-size: var(--lp-text-base);
    line-height: 1.5;
}

.pc-result > i[b-yuocw0nlic] {
    margin-top: 2px;
    font-size: var(--lp-text-lg);
}

.pc-result p[b-yuocw0nlic] {
    margin: 4px 0 0;
    color: var(--lp-muted);
}

.pc-result strong[b-yuocw0nlic] {
    color: var(--lp-text);
}

.pc-result-correct[b-yuocw0nlic] {
    background: color-mix(in srgb, var(--lp-accent-success) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--lp-accent-success) 32%, transparent);
}

.pc-result-correct > i[b-yuocw0nlic] {
    color: var(--lp-accent-success);
}

.pc-result-wrong[b-yuocw0nlic] {
    background: color-mix(in srgb, var(--lp-accent-danger) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--lp-accent-warm) 32%, transparent);
}

.pc-result-wrong > i[b-yuocw0nlic] {
    color: var(--lp-accent-warm);
}

.pc-result-pending[b-yuocw0nlic] {
    background: color-mix(in srgb, var(--lp-accent-warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--lp-accent-warm) 30%, transparent);
}

.pc-result-pending > i[b-yuocw0nlic] {
    color: var(--lp-accent-warning);
}

.pc-mastery[b-yuocw0nlic] {
    font-size: var(--lp-text-sm);
}

.pc-mastery-from[b-yuocw0nlic] {
    font-weight: 600;
    color: var(--lp-muted);
}

.pc-mastery-to[b-yuocw0nlic] {
    font-weight: 700;
    color: var(--lp-accent-warm);
}

.pc-mastery i[b-yuocw0nlic] {
    margin: 0 6px;
    font-size: var(--lp-text-xs);
    color: var(--lp-muted);
}

/* Azioni */
.pc-actions[b-yuocw0nlic] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pc-hint-btn:focus-visible[b-yuocw0nlic] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
}

.pc-hint-note[b-yuocw0nlic] {
    font-size: var(--lp-text-xs);
    color: var(--lp-muted);
}

.pc-hint-spinner[b-yuocw0nlic] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--lp-faint);
    border-top-color: var(--lp-accent-warm);
    border-radius: 50%;
    animation: pc-spin-b-yuocw0nlic 0.8s linear infinite;
}

@keyframes pc-spin-b-yuocw0nlic {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pc-choice[b-yuocw0nlic] {
        transition: none;
    }

    .pc-hint-spinner[b-yuocw0nlic] {
        animation: none;
    }
}

@media (forced-colors: active) {
    .practice-card[b-yuocw0nlic],
    .pc-choice[b-yuocw0nlic],
    .pc-type[b-yuocw0nlic],
    .pc-result[b-yuocw0nlic] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}
/* /Components/Retention/RecentProgressCard.razor.rz.scp.css */
/* RecentProgressCard — delta di padronanza nella finestra recente. Il delta
   e' sempre freccia + testo, mai solo colore. */

.rpc[b-t6ytve3dxy] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
}

.rpc-title[b-t6ytve3dxy] {
    margin: 0;
    font-size: var(--lp-text-lg);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--lp-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.rpc-title i[b-t6ytve3dxy] {
    color: var(--lp-accent-success);
}

.rpc-list[b-t6ytve3dxy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rpc-row[b-t6ytve3dxy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-radius: var(--lp-radius-sm);
    background: var(--lp-border);
    border: 1px solid var(--lp-border);
}

.rpc-name[b-t6ytve3dxy] {
    font-size: var(--lp-text-base);
    font-weight: 600;
    color: var(--lp-text);
}

.rpc-delta-row[b-t6ytve3dxy] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.rpc-scores[b-t6ytve3dxy] {
    font-size: var(--lp-text-sm);
    color: var(--lp-muted);
    white-space: nowrap;
}

.rpc-scores strong[b-t6ytve3dxy] {
    color: var(--lp-accent-warm);
}

.rpc-scores i[b-t6ytve3dxy] {
    margin: 0 6px;
    font-size: var(--lp-text-xs);
    color: var(--lp-muted);
}

.rpc-delta[b-t6ytve3dxy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--lp-text-xs);
    font-weight: 700;
    white-space: nowrap;
}

.rpc-delta-up[b-t6ytve3dxy] {
    color: var(--lp-accent-success);
}

.rpc-delta-down[b-t6ytve3dxy] {
    color: var(--lp-accent-warm);
}

@media (forced-colors: active) {
    .rpc[b-t6ytve3dxy],
    .rpc-row[b-t6ytve3dxy] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}
/* /Components/Retention/RetentionScore.razor.rz.scp.css */
/* RetentionScore — barra di ritenzione PREVISTA. Tinte fredde (azzurro) per
   distinguerla sempre dalla padronanza misurata (arancio): la previsione
   non deve mai sembrare un dato osservato (design doc §7/§13). */

.retention-score[b-5dbl1qopp5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

.score-head[b-5dbl1qopp5] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.score-label[b-5dbl1qopp5] {
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--lp-muted);
}

.score-value[b-5dbl1qopp5] {
    font-size: var(--lp-text-sm);
    font-weight: 700;
    color: var(--lp-accent-2);
}

.score-value-none[b-5dbl1qopp5] {
    color: var(--lp-muted);
}

.score-bar[b-5dbl1qopp5] {
    height: 6px;
    border-radius: var(--lp-radius-pill);
    background: var(--lp-border);
    overflow: hidden;
}

.score-bar-fill[b-5dbl1qopp5] {
    height: 100%;
    border-radius: var(--lp-radius-pill);
    background: linear-gradient(90deg, var(--lp-accent-2), var(--lp-accent-2));
    transition: width var(--lg-base) var(--lg-ease);
}

.score-bar-empty[b-5dbl1qopp5] {
    background: repeating-linear-gradient(
        90deg,
        var(--lp-border) 0 6px,
        var(--lp-border) 6px 12px);
}

.score-note[b-5dbl1qopp5] {
    font-size: var(--lp-text-xs);
    color: var(--lp-muted);
}

@media (prefers-reduced-motion: reduce) {
    .score-bar-fill[b-5dbl1qopp5] {
        transition: none;
    }
}

@media (forced-colors: active) {
    .score-bar[b-5dbl1qopp5] {
        border: 1px solid CanvasText;
    }

    .score-bar-fill[b-5dbl1qopp5] {
        background: CanvasText;
    }
}
/* /Components/Retention/RiskBadge.razor.rz.scp.css */
/* RiskBadge — chip di fascia di rischio. Colori distinti MA mai solo colore:
   ogni badge porta icona + testo (accessibilita', design doc §13). */

.risk-badge[b-49omy6e9w6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--lg-r-pill);
    font-size: var(--lp-text-xs);
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}

.risk-badge-stable[b-49omy6e9w6] {
    color: var(--lp-accent-success);
    background: color-mix(in srgb, var(--lp-accent-success) 16%, transparent);
    border-color: color-mix(in srgb, var(--lp-accent-success) 35%, transparent);
}

.risk-badge-warning[b-49omy6e9w6] {
    color: var(--lp-accent-warning);
    background: color-mix(in srgb, var(--lp-accent-warning) 14%, transparent);
    border-color: color-mix(in srgb, var(--lp-accent-warm) 35%, transparent);
}

.risk-badge-danger[b-49omy6e9w6] {
    color: var(--lp-accent-warm);
    background: color-mix(in srgb, var(--lp-accent-danger) 16%, transparent);
    border-color: color-mix(in srgb, var(--lp-accent-warm) 38%, transparent);
}

.risk-badge-unknown[b-49omy6e9w6] {
    color: var(--lp-muted);
    background: var(--lp-border);
    border-color: var(--lp-border-strong);
}

@media (forced-colors: active) {
    .risk-badge[b-49omy6e9w6] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}
/* /Components/Retention/SkillGraph.razor.rz.scp.css */
/* SkillGraph — grafo SVG dei prerequisiti. Colore SOLO come fascia di ritenzione
   (stati DESIGN.md), sempre accompagnato dall'etichetta scritta sotto il nodo. */

.sg[b-mb1gj1kejk] {
    display: grid;
    gap: 10px;
}

.sg-canvas[b-mb1gj1kejk] {
    position: relative;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    background: var(--lp-bg-elevated);
    overflow: hidden;
    touch-action: none;
}

.sg-svg[b-mb1gj1kejk] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    cursor: grab;
}

.sg-svg:active[b-mb1gj1kejk] {
    cursor: grabbing;
}

.sg-arrow[b-mb1gj1kejk] {
    fill: var(--lp-muted);
    opacity: 0.55;
}

.sg-edge[b-mb1gj1kejk] {
    fill: none;
    stroke: var(--lp-muted);
    stroke-opacity: 0.4;
    stroke-width: 1.5;
}

.sg-edge-weak[b-mb1gj1kejk] {
    stroke: var(--lp-accent-warning);
    stroke-opacity: 0.9;
    stroke-dasharray: 4 3;
}

.sg-node[b-mb1gj1kejk] {
    cursor: pointer;
    outline: none;
}

.sg-node circle[b-mb1gj1kejk] {
    stroke-width: 1.5;
    fill: var(--lp-surface-strong);
    stroke: var(--lp-border-strong);
}

.sg-node-stable circle[b-mb1gj1kejk] {
    stroke: var(--lp-accent-success);
    fill: color-mix(in srgb, var(--lp-accent-success) 22%, transparent);
}

.sg-node-warning circle[b-mb1gj1kejk] {
    stroke: var(--lp-accent-warning);
    fill: color-mix(in srgb, var(--lp-accent-warning) 22%, transparent);
}

.sg-node-danger circle[b-mb1gj1kejk] {
    stroke: var(--lp-accent-danger);
    fill: color-mix(in srgb, var(--lp-accent-danger) 22%, transparent);
}

.sg-node-unknown circle[b-mb1gj1kejk] {
    stroke-dasharray: 3 3;
}

.sg-node-selected circle[b-mb1gj1kejk],
.sg-node:focus-visible circle[b-mb1gj1kejk] {
    stroke: var(--lp-accent-2);
    stroke-width: 3;
}

.sg-name[b-mb1gj1kejk] {
    fill: var(--lp-text);
    font-family: var(--lp-font-body);
    font-size: var(--lp-text-xs);
    text-anchor: middle;
    pointer-events: none;
}

.sg-band[b-mb1gj1kejk] {
    fill: var(--lp-muted);
    font-family: var(--lp-font-mono);
    font-size: var(--lp-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-anchor: middle;
    pointer-events: none;
}

.sg-controls[b-mb1gj1kejk] {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    gap: 6px;
}

.sg-ctrl[b-mb1gj1kejk] {
    width: 44px;
    height: 44px;
    border-radius: var(--lp-radius-sm);
    border: 1px solid var(--lp-border-strong);
    background: var(--lp-surface-strong);
    color: var(--lp-text);
    font: inherit;
    font-size: var(--lp-text-lg);
    line-height: 1;
    cursor: pointer;
}

.sg-ctrl:focus-visible[b-mb1gj1kejk] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
}

.sg-legend[b-mb1gj1kejk] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: var(--lp-text-xs);
    color: var(--lp-muted);
}

.sg-legend-note[b-mb1gj1kejk] {
    color: var(--lp-faint);
}

.sg-dot[b-mb1gj1kejk] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--lp-radius-pill);
    margin-right: 6px;
    vertical-align: -1px;
    border: 1.5px solid currentColor;
}

.sg-dot-stable[b-mb1gj1kejk] { color: var(--lp-accent-success); }
.sg-dot-warning[b-mb1gj1kejk] { color: var(--lp-accent-warning); }
.sg-dot-danger[b-mb1gj1kejk] { color: var(--lp-accent-danger); }
.sg-dot-unknown[b-mb1gj1kejk] { color: var(--lp-faint); border-style: dashed; }

@media (prefers-reduced-motion: no-preference) {
    .sg-node circle[b-mb1gj1kejk] {
        transition: stroke-width var(--lp-motion-fast) ease;
    }
}

@media (forced-colors: active) {
    .sg-canvas[b-mb1gj1kejk],
    .sg-ctrl[b-mb1gj1kejk] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }

    .sg-node circle[b-mb1gj1kejk] {
        fill: Canvas;
        stroke: CanvasText;
    }

    .sg-node-selected circle[b-mb1gj1kejk],
    .sg-node:focus-visible circle[b-mb1gj1kejk] {
        stroke: Highlight;
    }

    .sg-edge[b-mb1gj1kejk],
    .sg-arrow[b-mb1gj1kejk] {
        stroke: CanvasText;
        fill: CanvasText;
    }

    .sg-name[b-mb1gj1kejk],
    .sg-band[b-mb1gj1kejk] {
        fill: CanvasText;
    }
}
/* /Components/Shared/AIConsentModal.razor.rz.scp.css */
/* AIConsentModal — livello cromatico
   ---------------------------------
   Il componente e' scritto con utility Tailwind di un tema chiaro (bg-white,
   text-gray-900/600/700, bg-gray-50, bg-green-50) ma vive dentro un prodotto
   notturno: sul fondo scuro il testo dell'informativa misurava 1,13:1 e il
   pulsante di rifiuto 1,76:1 — sotto ogni soglia leggibile, su una superficie
   che copre l'aula e chiede una decisione GDPR.

   Qui si corregge SOLO il colore. Il markup e la logica del consenso non si
   toccano: e' un flusso con conferma di eta' e registrazione, e riscriverlo
   per ragioni cromatiche sarebbe rischio gratuito. Il CSS scoped vince sulle
   utility perche' porta in piu' l'attributo di scope. */

/* ---- superficie del modale ---- */

.bg-white[b-qkapqdrnro] {
    background: var(--lp-surface-overlay, rgba(12, 23, 36, 0.97)) !important;
    border: 1px solid var(--lg-edge, rgba(255, 255, 255, 0.14));
    backdrop-filter: blur(var(--lg-3, 20px)) saturate(var(--lg-sat, 180%));
    -webkit-backdrop-filter: blur(var(--lg-3, 20px)) saturate(var(--lg-sat, 180%));
}

/* ---- testo ---- */

.text-gray-900[b-qkapqdrnro] { color: var(--lp-text, #f5f8fc) !important; }
.text-gray-700[b-qkapqdrnro],
.text-gray-600[b-qkapqdrnro] { color: var(--lp-muted, rgba(225, 235, 246, 0.72)) !important; }

/* Il link "Scopri di piu'". Qui NON si usa var(--lp-accent): quel token risolve
   a #6C3CE1, che su questo fondo scuro da' 2,90:1 — sotto la soglia quanto il
   viola di partenza. Il viola chiaro esplicito da' 6,52:1. */
.text-purple-600[b-qkapqdrnro] { color: #9b8cff !important; }

.text-red-500[b-qkapqdrnro] { color: var(--state-danger, #f87171) !important; }

/* ---- riquadro dell'informativa (era verde su verde chiaro) ---- */

.bg-green-50[b-qkapqdrnro] {
    background: rgba(52, 211, 153, 0.10) !important;
    border-color: rgba(52, 211, 153, 0.28) !important;
}

.text-green-800[b-qkapqdrnro] { color: #6ee7b7 !important; }

/* ---- riquadro della conferma di eta' e pulsante di rifiuto ---- */

.bg-gray-50[b-qkapqdrnro],
.bg-gray-100[b-qkapqdrnro] {
    background: var(--lg-fill, rgba(255, 255, 255, 0.055)) !important;
    border: 1px solid var(--lg-edge, rgba(255, 255, 255, 0.14));
}

.bg-gray-100:hover[b-qkapqdrnro] {
    background: var(--lg-fill-strong, rgba(255, 255, 255, 0.09)) !important;
}

/* ---- controlli: area di tocco e messa a fuoco ---- */

button[b-qkapqdrnro] {
    min-height: 44px;
}

input[type="checkbox"][b-qkapqdrnro] {
    width: 20px;
    height: 20px;
    accent-color: var(--lp-accent, #9b8cff);
    flex-shrink: 0;
}

button:focus-visible[b-qkapqdrnro],
input:focus-visible[b-qkapqdrnro],
a:focus-visible[b-qkapqdrnro] {
    outline: 2px solid var(--lg-focus, #ffb27f);
    outline-offset: 2px;
}
/* /Components/Shared/AIFeatureGate.razor.rz.scp.css */
/* AIFeatureGate — superfici di attesa e di rifiuto
   -----------------------------------------------
   Prima erano classi Tailwind di un tema chiaro (bg-gray-50/100,
   text-gray-600, text-purple-600) dentro un prodotto notturno: il pannello
   compariva come un rettangolo pallido con testo sotto la soglia di
   leggibilita'. Qui usano i token del design system. */

.ai-gate-skeleton[b-bi7xxffrp6] {
    min-height: 128px;
    border: 1px solid var(--lg-edge, rgba(255, 255, 255, 0.14));
    border-radius: var(--lg-r-card, 20px);
    background: linear-gradient(
        100deg,
        var(--lg-fill, rgba(255, 255, 255, 0.055)) 30%,
        var(--lg-fill-strong, rgba(255, 255, 255, 0.09)) 50%,
        var(--lg-fill, rgba(255, 255, 255, 0.055)) 70%
    );
    background-size: 220% 100%;
    animation: ai-gate-sheen-b-bi7xxffrp6 1.4s var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)) infinite;
}

@keyframes ai-gate-sheen-b-bi7xxffrp6 {
    from { background-position: 120% 0; }
    to   { background-position: -20% 0; }
}

.ai-gate-notice[b-bi7xxffrp6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--lg-edge, rgba(255, 255, 255, 0.14));
    border-radius: var(--lg-r-card, 20px);
    background: var(--lg-fill, rgba(255, 255, 255, 0.055));
    text-align: center;
}

.ai-gate-notice p[b-bi7xxffrp6] {
    margin: 0;
    color: var(--lp-muted, rgba(225, 235, 246, 0.72));
    font-size: 0.875rem;
}

.ai-gate-link[b-bi7xxffrp6] {
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--lg-edge, rgba(255, 255, 255, 0.14));
    border-radius: var(--lg-r-pill, 999px);
    background: transparent;
    color: var(--lp-accent, #9b8cff);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.ai-gate-link:hover[b-bi7xxffrp6] {
    border-color: var(--lp-accent, #9b8cff);
    background: var(--lp-glow, rgba(155, 140, 255, 0.25));
}

.ai-gate-link:focus-visible[b-bi7xxffrp6] {
    outline: 2px solid var(--lg-focus, #ffb27f);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ai-gate-skeleton[b-bi7xxffrp6] { animation: none; }
    .ai-gate-link[b-bi7xxffrp6] { transition: none; }
}
/* /Components/Shared/LanguageSelector.razor.rz.scp.css */
/* Selettore lingua — chrome del navbar Liquid: stesso vetro "dosato" (lg-1) del
   bottone ricerca accanto. Solo token --lp-*/--lg-*: i vecchi --bg-color/--text-color
   non esistono nel mondo Liquid e davano un pannello bianco sul navbar scuro. */
.language-selector[b-1zspn4htnx] {
    position: relative;
}

.language-btn[b-1zspn4htnx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 36px;
    min-width: 36px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--lp-muted, rgba(232, 236, 241, 0.72));
    background: var(--lg-fill, rgba(255, 255, 255, 0.055));
    border: 1px solid var(--lg-edge, rgba(255, 255, 255, 0.14));
    backdrop-filter: blur(var(--lg-1, 4px)) saturate(var(--lg-sat, 180%));
    -webkit-backdrop-filter: blur(var(--lg-1, 4px)) saturate(var(--lg-sat, 180%));
    font: inherit;
    cursor: pointer;
    transition: color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(.22, 1, .36, 1)),
                border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(.22, 1, .36, 1));
}

.language-btn:hover[b-1zspn4htnx],
.language-btn[aria-expanded="true"][b-1zspn4htnx] {
    color: var(--lp-text, #e8ecf1);
    border-color: var(--lp-border-strong, rgba(255, 255, 255, 0.24));
}

.language-code[b-1zspn4htnx] {
    font-size: var(--lp-text-xs, 12px);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.language-dropdown[b-1zspn4htnx] {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 1000;
    display: grid;
    gap: 2px;
    min-width: 200px;
    max-height: min(70vh, 26rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    background: var(--lp-surface-overlay, rgba(15, 20, 38, 0.94));
    border: 1px solid var(--lp-border-strong, rgba(255, 255, 255, 0.22));
    border-radius: var(--lp-radius-md, 14px);
    box-shadow: var(--lp-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.55));
    backdrop-filter: blur(var(--lg-2, 12px)) saturate(var(--lg-sat, 180%));
    -webkit-backdrop-filter: blur(var(--lg-2, 12px)) saturate(var(--lg-sat, 180%));
}

.language-option[b-1zspn4htnx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--lp-radius-sm, 8px);
    background: transparent;
    color: var(--lp-text, #e8ecf1);
    font: inherit;
    font-size: var(--lp-text-sm, 14px);
    text-align: start;
    cursor: pointer;
}

.language-option .language-code[b-1zspn4htnx] {
    color: var(--lp-muted, rgba(232, 236, 241, 0.72));
}

.language-option:hover[b-1zspn4htnx] {
    background: rgba(255, 255, 255, 0.06);
}

/* Attiva: inchiostro pieno + barra d'accento, non viola su vetro (<4,5:1, DESIGN.md). */
.language-option.active[b-1zspn4htnx] {
    font-weight: 600;
    background: rgba(108, 60, 225, 0.18);
    box-shadow: inset 3px 0 0 var(--lp-accent, #6C3CE1);
}

.language-btn:focus-visible[b-1zspn4htnx],
.language-option:focus-visible[b-1zspn4htnx] {
    outline: 2px solid var(--lp-accent-warm, #e87c2a);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .language-btn[b-1zspn4htnx] { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
    .language-btn[b-1zspn4htnx],
    .language-dropdown[b-1zspn4htnx] {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .language-btn[b-1zspn4htnx] { background: var(--lg-surface, #0e1524); }
}
/* /Components/ShortsForYouPanel.razor.rz.scp.css */
/* ShortsForYouPanel — wayfinder #148. `.section-card`/`.db-extras` non hanno
   stile di base nel repo (verificato: nessuna regola li definisce fuori dalla
   variante liquid-glass condizionale), quindi il pannello è completamente
   auto-contenuto: non dipende da chrome ambientale che potrebbe non esserci. */

.sfy-panel[b-sq07rvkj7g] {
    padding: 22px 24px;
    border-radius: var(--lp-radius-lg, 18px);
    border: 1px solid var(--lp-border);
    background: var(--lp-surface);
}

.sfy-head[b-sq07rvkj7g] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sfy-head h2[b-sq07rvkj7g] {
    margin: 0;
    font-size: var(--lp-text-lg, 18px);
    font-weight: 700;
    color: var(--lp-text);
}

.sfy-head h2 i[b-sq07rvkj7g] {
    color: var(--lp-accent-warm, #e87c2a);
    margin-right: 8px;
}

.sfy-viewall[b-sq07rvkj7g] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--lp-text-sm, 13px);
    font-weight: 600;
    color: var(--lp-accent-warm, #e87c2a);
    text-decoration: none;
    white-space: nowrap;
}

.sfy-viewall:hover[b-sq07rvkj7g] {
    text-decoration: underline;
}

.sfy-sub[b-sq07rvkj7g] {
    margin: 6px 0 18px;
    font-size: var(--lp-text-sm, 13px);
    color: var(--lp-muted);
}

.sfy-grid[b-sq07rvkj7g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.sfy-card[b-sq07rvkj7g] {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.sfy-thumb[b-sq07rvkj7g] {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: var(--lp-radius-sm);
    overflow: hidden;
    border: 1px solid var(--lp-border);
    background: linear-gradient(168deg, var(--lp-surface) 0%, var(--lp-bg, #0d0b09) 100%);
    transition: border-color 0.25s;
}

.sfy-card:hover .sfy-thumb[b-sq07rvkj7g] {
    border-color: var(--lp-accent-warm, #e87c2a);
}

.sfy-thumb img[b-sq07rvkj7g] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sfy-play[b-sq07rvkj7g] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lp-accent-warm, #e87c2a);
    box-shadow: var(--lp-shadow-sm);
    opacity: 0.92;
}

.sfy-play svg[b-sq07rvkj7g] {
    width: 13px;
    height: 13px;
    margin-left: 1px;
    fill: #14110f;
}

.sfy-topic[b-sq07rvkj7g] {
    margin-top: 10px;
    display: inline-block;
    width: fit-content;
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-accent-warm, #e87c2a);
    background: color-mix(in srgb, var(--lp-accent-warm, #e87c2a) 14%, transparent);
    padding: 3px 8px;
    border-radius: 999px;
}

.sfy-source-badge[b-sq07rvkj7g] {
    margin-top: 4px;
    display: inline-block;
    width: fit-content;
    font-size: var(--lp-text-xs);
    font-weight: 500;
    color: var(--lp-muted);
}

.sfy-card h3[b-sq07rvkj7g] {
    margin: 8px 0 0;
    font-size: var(--lp-text-xs);
    line-height: 1.3;
    font-weight: 600;
    color: var(--lp-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .sfy-thumb[b-sq07rvkj7g] {
        transition: none;
    }
}
/* /Layout/AdminLayout.razor.rz.scp.css */
/* AdminLayout — scoped CSS
   Il footer liquid (position:fixed bottom:0, z 200) copre la fine del contenuto
   admin: la riserva standard di liquid-navbar-footer-v100.css agisce solo su
   .lp-shell-unified .lp-main-content, mentre qui il main è .admin-content.
   Replico la stessa riserva (72px desktop / 140px mobile — sotto i 760px la
   nav del footer è nascosta e brand+meta si impilano) SOMMATA al padding-base
   di admin-shell-v401.css (--admin-sp-5). Selettore .admin-shell .admin-content per
   vincere la specificity dello shell senza !important. */

.admin-shell .admin-content[b-5zahfh5zgv] {
    padding-bottom: calc(var(--admin-sp-5, 24px) + 72px);
}

@media (max-width: 760px) {
    .admin-shell .admin-content[b-5zahfh5zgv] {
        padding-bottom: calc(var(--admin-sp-3, 16px) + 140px);
    }
}
/* /Layout/LiquidPortalLayout.razor.rz.scp.css */
/* LiquidPortalLayout — nessuna griglia, nessun box visibile.
   Il canvas WebGL occupa tutto. Il layout Blazor è un overlay trasparente. */

.lp-shell[b-om328wa204] {
    position: fixed;
    inset: 0;
    background: #030209;
    overflow: hidden;
    font-family: -apple-system, 'SF Pro Display', system-ui, sans-serif;
}

#lp-canvas[b-om328wa204] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Intent bar */
.lp-bar[b-om328wa204] {
    position: fixed;
    top: 1.4rem;
    left: 1.4rem;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: .5rem;
    pointer-events: auto;
}

.lp-back[b-om328wa204] {
    color: rgba(240,236,228,.35);
    text-decoration: none;
    font-size: 1rem;
    padding: .45rem .6rem;
    border-radius: 8px;
    transition: color .2s;
}
.lp-back:hover[b-om328wa204] { color: #E87C2A; }

.lp-divider[b-om328wa204] {
    width: 1px;
    height: 1.2rem;
    background: rgba(255,255,255,.1);
    margin: 0 .15rem;
}

.lp-intent[b-om328wa204] {
    font-family: inherit;
    font-size: .76rem;
    background: rgba(3,2,9,.78);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(240,236,228,.38);
    padding: .46rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all .35s ease;
    letter-spacing: .01em;
}
.lp-intent.active[b-om328wa204] {
    background: #E87C2A;
    color: #030209;
    border-color: #E87C2A;
    box-shadow: 0 0 26px rgba(232,124,42,.42);
}

.lp-badge[b-om328wa204] {
    font-size: 0.75rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(232,124,42,.5);
    padding: .3rem .7rem;
    border: 1px solid rgba(232,124,42,.15);
    border-radius: 999px;
    margin-left: .25rem;
}

/* Floating content area (overlay sul WebGL) */
.lp-content[b-om328wa204] {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

/* Settling indicator */
.lp-settle-ui[b-om328wa204] {
    position: fixed;
    top: 1.35rem;
    right: 1.5rem;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 0.75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(232,124,42,.0);
    transition: color .6s ease;
    pointer-events: none;
}
.lp-settle-ui.active[b-om328wa204] { color: rgba(232,124,42,.65); }

.lp-settle-ring[b-om328wa204] {
    font-size: 1rem;
    transition: transform .8s ease;
}
.lp-settle-ui.active .lp-settle-ring[b-om328wa204] { transform: rotate(90deg); }
/* /Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   MainLayout — Scoped Blazor CSS
   Mobile-first layout shell for InsightLearn
   ========================================================================== */

/* Full-height flex column so the footer is always pushed to the bottom */
.page[b-0q6sklxopc] {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
    /* iOS Safari dynamic viewport unit — real-time toolbar adjustment */
    min-height: 100dvh;
}

main[b-0q6sklxopc] {
    -webkit-flex: 1;
    flex: 1;
    /* Prevent horizontal scroll caused by wide child elements */
    overflow-x: hidden;
    /* Default top padding for the fixed header (64px).
       Safe-area-aware override is in the index.html critical inline CSS. */
    padding-top: 64px;
}

/* Skip link — visible only on keyboard focus (accessibility) */
[b-0q6sklxopc] .skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 100000;
    padding: 0.75rem 1.25rem;
    background: #6C3CE1;
    color: #fff;
    border-radius: 0 0 0.5rem 0.5rem;
    font-weight: 700;
    text-decoration: none;
    -webkit-transition: top 0.2s ease;
    transition: top 0.2s ease;
    /* Respect safe area in case header is under the notch */
    top: calc(-100% + env(safe-area-inset-top, 0px));
}

[b-0q6sklxopc] .skip-link:focus {
    top: env(safe-area-inset-top, 0px);
}

/* ==========================================================================
   Chatbot FAB — safe area bottom offset on iOS
   ========================================================================== */
[b-0q6sklxopc] .chatbot-fab {
    /* Shift the FAB above the iPhone home indicator */
    right: calc(24px + env(safe-area-inset-right, 0px)) !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    /* Minimum touch target */
    min-width: 56px;
    min-height: 56px;
    /* Tap highlight override */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

@media (max-width: 768px) {
    [b-0q6sklxopc] .chatbot-fab {
        right: calc(16px + env(safe-area-inset-right, 0px)) !important;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        width: 48px !important;
        height: 48px !important;
    }
}

/* ==========================================================================
   Mobile — reduce content padding on xs screens
   ========================================================================== */
@media (max-width: 575px) {
    main[b-0q6sklxopc] {
        padding-top: 56px; /* header is slightly shorter on xs */
    }
}

/* ==========================================================================
   Header grid — xs: logo + hamburger only (hide search/nav links)
   ========================================================================== */
@media (max-width: 575px) {
    [b-0q6sklxopc] .header-search-section,
    [b-0q6sklxopc] .desktop-only {
        display: none !important;
    }

    [b-0q6sklxopc] .main-header-container {
        grid-template-columns: 1fr auto !important;
    }
}

/* ==========================================================================
   Header grid — sm/md: hide text labels, keep icons
   ========================================================================== */
@media (min-width: 576px) and (max-width: 991px) {
    [b-0q6sklxopc] .header-search-section {
        display: none;
    }

    [b-0q6sklxopc] .main-header-container {
        grid-template-columns: auto 1fr !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* ==========================================================================
   NavMenu — Scoped Blazor CSS
   Sidebar navigation styles for InsightLearn (used in legacy sidebar views)
   The primary navigation in v3.x is the top header in MainLayout.razor.
   This file retains backward-compatible styles for any pages that still
   render a NavMenu sidebar, while fixing mobile & Safari issues.
   ========================================================================== */

/* Sidebar brand header */
.sidebar-header[b-es2zvr9ud4] {
    padding: 1.25rem 1rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-brand[b-es2zvr9ud4] {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.brand-icon[b-es2zvr9ud4] {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 0.5rem;
    font-size: 1rem;
    color: #fff;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.brand-tagline[b-es2zvr9ud4] {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.25rem;
    padding-left: 0.125rem;
}

/* Scrollable sidebar nav */
.sidebar-nav[b-es2zvr9ud4] {
    overflow-y: auto;
    overflow-x: hidden;
    /* iOS momentum scrolling */
    -webkit-overflow-scrolling: touch;
    height: calc(100vh - 5rem);
    height: calc(100dvh - 5rem);
    padding: 0.5rem 0;
}

/* Nav sections */
.nav-section[b-es2zvr9ud4] {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-section:last-child[b-es2zvr9ud4] {
    border-bottom: none;
}

.nav-section-title[b-es2zvr9ud4] {
    padding: 0.625rem 1rem 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
}

.nav-list[b-es2zvr9ud4] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Nav items — generous touch target */
.nav-item[b-es2zvr9ud4] {
    padding: 0;
    font-size: 0.9375rem;
}

.nav-item[b-es2zvr9ud4]  a,
.nav-item[b-es2zvr9ud4]  .nav-link {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    /* Apple HIG: minimum 44px touch target */
    min-height: 44px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    border-radius: 0.5rem;
    margin: 0 0.5rem;
    -webkit-transition: background 0.15s ease, color 0.15s ease;
    transition: background 0.15s ease, color 0.15s ease;
    /* Remove 300ms iOS tap delay */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.nav-item[b-es2zvr9ud4]  a:hover,
.nav-item[b-es2zvr9ud4]  .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.nav-item[b-es2zvr9ud4]  a.active,
.nav-item[b-es2zvr9ud4]  .nav-link.active {
    background: rgba(108, 60, 225, 0.35);
    color: #fff;
    font-weight: 600;
}

.nav-icon[b-es2zvr9ud4] {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 1.25rem;
    min-width: 1.25rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.55);
}

.nav-item[b-es2zvr9ud4]  a.active .nav-icon,
.nav-item[b-es2zvr9ud4]  .nav-link.active .nav-icon {
    color: #c4b5fd;
}

/* Auth section CTA styles */
.nav-auth-section .nav-link-primary[b-es2zvr9ud4]  a,
.nav-auth-section[b-es2zvr9ud4]  a.nav-link-primary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.nav-auth-section .nav-link-cta[b-es2zvr9ud4]  a,
.nav-auth-section[b-es2zvr9ud4]  a.nav-link-cta {
    background: #6C3CE1;
    color: #fff;
    font-weight: 700;
}

/* Footer section */
.nav-footer[b-es2zvr9ud4] {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.5rem;
    /* iPhone home indicator safe area */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==========================================================================
   Responsive — sidebar hidden on mobile (header hamburger used instead)
   ========================================================================== */

@media (max-width: 767px) {
    .sidebar-nav[b-es2zvr9ud4] {
        /* On mobile the sidebar is not visible — navigation is via the
           MainLayout hamburger menu panel. This hides any legacy sidebar
           component that may be rendered inside admin pages. */
        height: calc(100dvh - 4rem);
    }
}

@media (min-width: 768px) {
    .sidebar-nav[b-es2zvr9ud4] {
        height: calc(100vh - 5rem);
        height: calc(100dvh - 5rem);
    }
}

/* Legacy Blazor scaffold — kept for backward compatibility with any page
   that still imports these class names via Bootstrap or Blazor template */
.navbar-toggler[b-es2zvr9ud4] {
    background-color: rgba(255, 255, 255, 0.1);
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.top-row[b-es2zvr9ud4] {
    height: 3.5rem;
    background-color: rgba(0, 0, 0, 0.4);
}

.navbar-brand[b-es2zvr9ud4] {
    font-size: 1.1rem;
}

/* nav-scrollable — legacy sidebar scroll container */
.nav-scrollable[b-es2zvr9ud4] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Use dvh so the scrollable area adjusts when iOS toolbar appears */
    height: calc(100dvh - 3.5rem);
}

@media (min-width: 641px) {
    .navbar-toggler[b-es2zvr9ud4] {
        display: none;
    }

    .collapse[b-es2zvr9ud4] {
        display: block;
    }

    .nav-scrollable[b-es2zvr9ud4] {
        height: calc(100vh - 3.5rem);
        height: calc(100dvh - 3.5rem);
    }
}
/* /Layout/PublicStatusLayout.razor.rz.scp.css */
.status-shell[b-lueymngb5b] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--lp-bg, #06090d);
    color: var(--lp-text, #f6f8ff);
}

.status-header[b-lueymngb5b] {
    padding: var(--lp-space-4, 16px) var(--lp-space-5, 24px);
    border-bottom: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
}

.status-header__brand[b-lueymngb5b] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--lp-text, #f6f8ff);
}

.status-header__brand .accent[b-lueymngb5b] {
    color: var(--lp-accent, #6c3ce1);
}

.status-header__brand .brand-tld[b-lueymngb5b] {
    opacity: 0.55;
    font-weight: 400;
}

.status-main[b-lueymngb5b] {
    flex: 1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--lp-space-6, 32px) var(--lp-space-5, 24px);
}

.status-footer[b-lueymngb5b] {
    padding: var(--lp-space-4, 16px) var(--lp-space-5, 24px);
    text-align: center;
    border-top: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
}

.status-footer a[b-lueymngb5b] {
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
    text-decoration: none;
    font-size: var(--lp-text-sm, 14px);
}

.status-footer a:hover[b-lueymngb5b] {
    color: var(--lp-text, #f6f8ff);
}
/* /Pages/Account/AIData.razor.rz.scp.css */
/*
    AIData.razor.css — stile della pagina /account/ai-data.

    Estratto dal blocco <style> inline nel Razor. Il materiale delle
    superfici (.aidata-card, .aidata-list-card, .aidata-modal) sotto
    ?ds=lg e' governato da lg-surfaces.css (card solide, modale vetro):
    qui le regole di superficie valgono solo nel rollback legacy.
    La palette calda (#FAF7F0 / #E87C2A) e' quella del tema Liquid ed
    e' mantenuta tale e quale per non snaturare la pagina.
*/

.aidata-page[b-gz837qhfy5] {
    max-width: 56rem;
    margin: 0 auto;
    padding: 2.5rem 1rem;
    color: #FAF7F0;
}

.aidata-header[b-gz837qhfy5] { margin-bottom: 2rem; }
.aidata-header h1[b-gz837qhfy5] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #FAF7F0;
    margin: 0;
}
.aidata-header p[b-gz837qhfy5] {
    color: rgba(250, 247, 240, 0.62);
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
}
.aidata-header a[b-gz837qhfy5] { color: var(--lp-color-accent, #E87C2A); text-decoration: none; }
.aidata-header a:hover[b-gz837qhfy5] { text-decoration: underline; }
.aidata-header a:focus-visible[b-gz837qhfy5] {
    outline: 2px solid var(--lg-focus, #ffb27f);
    outline-offset: 2px;
}

/* ── Summary grid ── */
.aidata-summary-grid[b-gz837qhfy5] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (min-width: 768px) {
    .aidata-summary-grid[b-gz837qhfy5] { grid-template-columns: repeat(3, 1fr); }
}

/* Superficie: solo rollback legacy. Sotto lg vince lg-surfaces. */
:root:not([data-ds="lg"]) .aidata-card[b-gz837qhfy5] {
    background: rgba(8, 12, 24, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}
.aidata-card[b-gz837qhfy5] {
    padding: 1.25rem;
}
.aidata-card-head[b-gz837qhfy5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.aidata-icon[b-gz837qhfy5] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.aidata-icon svg[b-gz837qhfy5] { width: 1.25rem; height: 1.25rem; }
.aidata-icon-accent[b-gz837qhfy5] { background: rgba(232, 124, 42, 0.16); color: var(--lp-color-accent, #E87C2A); }
.aidata-icon-ok[b-gz837qhfy5]     { background: rgba(34, 197, 94, 0.16);  color: #4ade80; }
.aidata-icon-warn[b-gz837qhfy5]   { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
.aidata-icon-info[b-gz837qhfy5]   { background: rgba(56, 189, 248, 0.16); color: #38bdf8; }
.aidata-icon-danger[b-gz837qhfy5] { background: rgba(239, 68, 68, 0.16);  color: #f87171; }

.aidata-card-label[b-gz837qhfy5] {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(250, 247, 240, 0.62);
}
.aidata-card-value[b-gz837qhfy5] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #FAF7F0;
    margin: 0;
}
.aidata-card-status[b-gz837qhfy5] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #FAF7F0;
    margin: 0;
}
.aidata-card-status.is-ok[b-gz837qhfy5]   { color: #4ade80; }
.aidata-card-status.is-warn[b-gz837qhfy5] { color: #fbbf24; }
.aidata-card-sub[b-gz837qhfy5] {
    font-size: 0.75rem;
    color: rgba(250, 247, 240, 0.42);
    margin: 0.125rem 0 0;
}

/* ── Bottoni ── */
.aidata-actions[b-gz837qhfy5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
}
.aidata-btn[b-gz837qhfy5],
.aidata-btn-sm[b-gz837qhfy5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.625rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.aidata-btn[b-gz837qhfy5] { padding: 0.5rem 1rem; font-size: 0.875rem; }
.aidata-btn-sm[b-gz837qhfy5] { padding: 0.375rem 0.75rem; font-size: 0.75rem; }
.aidata-btn svg[b-gz837qhfy5], .aidata-btn-sm svg[b-gz837qhfy5] { width: 1rem; height: 1rem; }
.aidata-btn:disabled[b-gz837qhfy5], .aidata-btn-sm:disabled[b-gz837qhfy5] { opacity: 0.6; cursor: default; }
.aidata-btn:focus-visible[b-gz837qhfy5], .aidata-btn-sm:focus-visible[b-gz837qhfy5] {
    outline: 2px solid var(--lg-focus, #ffb27f);
    outline-offset: 2px;
}

.aidata-btn-accent[b-gz837qhfy5] { background: var(--lp-color-accent, #E87C2A); color: #fff; }
.aidata-btn-accent:hover:not(:disabled)[b-gz837qhfy5] { background: #d96e1f; }

.aidata-btn-danger[b-gz837qhfy5] { background: #dc2626; color: #fff; }
.aidata-btn-danger:hover:not(:disabled)[b-gz837qhfy5] { background: #b91c1c; }

.aidata-btn-ghost[b-gz837qhfy5] {
    background: transparent;
    color: rgba(250, 247, 240, 0.82);
    border-color: rgba(255, 255, 255, 0.18);
}
.aidata-btn-ghost:hover:not(:disabled)[b-gz837qhfy5] { background: rgba(255, 255, 255, 0.06); }

.aidata-btn-outline-danger[b-gz837qhfy5] {
    background: transparent;
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.4);
}
.aidata-btn-outline-danger:hover:not(:disabled)[b-gz837qhfy5] { background: rgba(239, 68, 68, 0.12); }

/* ── Spinner ── */
.aidata-spin[b-gz837qhfy5] { width: 1rem; height: 1rem; animation: aidata-spin-b-gz837qhfy5 0.7s linear infinite; }
.aidata-spin-sm[b-gz837qhfy5] { width: 0.875rem; height: 0.875rem; }
.aidata-spin-track[b-gz837qhfy5] { opacity: 0.25; }
.aidata-spin-head[b-gz837qhfy5]  { opacity: 0.75; }
@keyframes aidata-spin-b-gz837qhfy5 { to { transform: rotate(360deg); } }

/* ── List card ── */
:root:not([data-ds="lg"]) .aidata-list-card[b-gz837qhfy5] {
    background: rgba(8, 12, 24, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}
.aidata-list-card[b-gz837qhfy5] {
    overflow: hidden;
}
.aidata-list-head[b-gz837qhfy5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.aidata-list-head h2[b-gz837qhfy5] {
    font-size: 1rem;
    font-weight: 600;
    color: #FAF7F0;
    margin: 0;
}
.aidata-list-count[b-gz837qhfy5] {
    font-size: 0.75rem;
    color: rgba(250, 247, 240, 0.42);
}

.aidata-empty[b-gz837qhfy5] { padding: 3rem 1.25rem; text-align: center; }
.aidata-empty-icon[b-gz837qhfy5] {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(250, 247, 240, 0.42);
}
.aidata-empty-icon svg[b-gz837qhfy5] { width: 1.5rem; height: 1.5rem; }
.aidata-empty p[b-gz837qhfy5] { color: rgba(250, 247, 240, 0.62); font-size: 0.875rem; margin: 0; }

.aidata-conv-item[b-gz837qhfy5] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    transition: background-color 0.15s ease;
}
.aidata-conv-item:first-child[b-gz837qhfy5] { border-top: none; }
.aidata-conv-item:hover[b-gz837qhfy5] { background: rgba(255, 255, 255, 0.03); }
.aidata-conv-main[b-gz837qhfy5] { flex: 1; min-width: 0; }
.aidata-conv-meta[b-gz837qhfy5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.aidata-conv-date[b-gz837qhfy5] {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(250, 247, 240, 0.82);
}
.aidata-conv-badge[b-gz837qhfy5] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    background: rgba(232, 124, 42, 0.14);
    color: var(--lp-color-accent, #E87C2A);
}
.aidata-conv-preview[b-gz837qhfy5] {
    font-size: 0.875rem;
    color: rgba(250, 247, 240, 0.62);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aidata-conv-preview.is-empty[b-gz837qhfy5] {
    color: rgba(250, 247, 240, 0.42);
    font-style: italic;
}

/* ── Skeleton ── */
.aidata-skeleton[b-gz837qhfy5] { animation: aidata-pulse-b-gz837qhfy5 1.5s ease-in-out infinite; }
.aidata-skel-card[b-gz837qhfy5],
.aidata-skel-block[b-gz837qhfy5] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}
.aidata-skel-card[b-gz837qhfy5] { height: 6rem; }
.aidata-skel-block[b-gz837qhfy5] { height: 12rem; margin-top: 1.5rem; }
@keyframes aidata-pulse-b-gz837qhfy5 { 50% { opacity: 0.5; } }

/* ── Errore ── */
.aidata-error[b-gz837qhfy5] {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 14px;
    padding: 1.25rem;
}
.aidata-error-title[b-gz837qhfy5] { font-weight: 600; color: #fca5a5; margin: 0 0 0.25rem; }
.aidata-error-msg[b-gz837qhfy5] { color: rgba(252, 165, 165, 0.85); font-size: 0.875rem; margin: 0 0 0.75rem; }

/* ── Modale ──
   Sotto lg il materiale (vetro lg-4) arriva da lg-surfaces; qui la
   geometria e la base solida per il rollback legacy. */
.aidata-modal-overlay[b-gz837qhfy5] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.55);
}
:root:not([data-ds="lg"]) .aidata-modal[b-gz837qhfy5] {
    background: rgba(10, 15, 30, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.aidata-modal[b-gz837qhfy5] {
    max-width: 28rem;
    width: 100%;
    padding: 1.5rem;
    color: #FAF7F0;
}
.aidata-modal-head[b-gz837qhfy5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.aidata-modal-head h3[b-gz837qhfy5] { font-size: 1rem; font-weight: 600; margin: 0; color: #FAF7F0; }
.aidata-modal-body[b-gz837qhfy5] { font-size: 0.875rem; color: rgba(250, 247, 240, 0.78); margin: 0 0 0.5rem; }
.aidata-modal-note[b-gz837qhfy5] { font-size: 0.75rem; color: rgba(250, 247, 240, 0.42); margin: 0 0 1.5rem; }
.aidata-modal-actions[b-gz837qhfy5] { display: flex; gap: 0.75rem; justify-content: flex-end; }

/* ── Motion ── */
@media (prefers-reduced-motion: reduce) {
    .aidata-skeleton[b-gz837qhfy5] { animation: none; }
    .aidata-spin[b-gz837qhfy5] { animation-duration: 2s; }
    .aidata-btn[b-gz837qhfy5],
    .aidata-btn-sm[b-gz837qhfy5],
    .aidata-conv-item[b-gz837qhfy5] {
        transition: none;
    }
}
/* /Pages/Account/CompleteRegistration.razor.rz.scp.css */
/* ============================================================
   CompleteRegistration — Liquid Glass v2 (scoped)
   Same auth flow as Login/Register: .auth-card is already lg-3 glass
   via wwwroot/css/lg-surfaces.css (background, border, radius 26px,
   shadow-3). Here: layout, progress/step chrome, solid controls.
   Palette and structure copied from Login.razor.css/Register.razor.css
   (the corrected reference for this flow) rather than the retired
   --il-* tokens. Scale 8pt · --lg-ease.
   Nota: ::deep sugli elementi renderizzati da EditForm/InputText/
   InputSelect/InputTextArea/InputDate/InputCheckbox/ValidationMessage
   (componenti figli, niente attributo di scope sul root element).
   ============================================================ */

/* ── Layout: una sola card. La centratura verticale arriva dal
   layout sulle route auth (liquid-design-system-v103.css:
   .lp-shell-unified[data-route-kind="auth"] .lp-main-content,
   grid place-items:center + min-height 100dvh) — qui non si
   duplica, altrimenti i due meccanismi si sommano. ─────────── */
.auth-container[b-22oo6n4xe7] {
    display: flex;
    width: 100%;
    padding: 16px;
}

.auth-card[b-22oo6n4xe7] {
    width: 100%;
    max-width: 640px;
    margin: auto;
    overflow: hidden;
}

/* ── Header ───────────────────────────────────────────────── */
.cr-card-header[b-22oo6n4xe7] {
    padding: 32px 32px 0;
    text-align: center;
}

.cr-card-title[b-22oo6n4xe7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #FAF7F0;
}

.cr-header-icon[b-22oo6n4xe7] {
    color: #F89B4D;
}

.cr-card-subtitle[b-22oo6n4xe7] {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(250, 247, 240, 0.56);
}

/* ── Body ─────────────────────────────────────────────────── */
.cr-card-body[b-22oo6n4xe7] {
    padding: 24px 32px 32px;
}

.cr-loading[b-22oo6n4xe7] {
    text-align: center;
    padding: 48px 0;
}

.cr-spinner[b-22oo6n4xe7] {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(250, 247, 240, 0.12);
    border-top-color: #F89B4D;
    border-radius: 50%;
    animation: cr-spin-b-22oo6n4xe7 0.8s linear infinite;
    margin: 0 auto 16px;
}

.cr-loading-text[b-22oo6n4xe7] {
    margin: 0;
    color: rgba(250, 247, 240, 0.56);
}

.cr-alert-danger[b-22oo6n4xe7] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 90, 70, 0.12);
    border: 1px solid rgba(255, 90, 70, 0.35);
    color: #ffb4a8;
    font-size: 0.9rem;
}

.cr-alert-icon[b-22oo6n4xe7] {
    flex-shrink: 0;
}

/* ── Progress ─────────────────────────────────────────────── */
.cr-progress-section[b-22oo6n4xe7] {
    margin-bottom: 24px;
}

.cr-progress-track[b-22oo6n4xe7] {
    height: 6px;
    background: rgba(250, 247, 240, 0.09);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.cr-progress-fill[b-22oo6n4xe7] {
    height: 100%;
    background: #F89B4D;
    border-radius: 3px;
    transition: width var(--lg-base, 280ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.cr-progress-labels[b-22oo6n4xe7] {
    display: flex;
    justify-content: space-between;
}

.cr-step-label[b-22oo6n4xe7] {
    font-size: 0.8125rem;
    color: rgba(250, 247, 240, 0.56);
}

.cr-step-active[b-22oo6n4xe7] {
    color: #F89B4D;
    font-weight: 700;
}

/* ── Step content ─────────────────────────────────────────── */
.cr-step-title[b-22oo6n4xe7] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    font-size: 1.125rem;
    font-weight: 600;
    color: #FAF7F0;
}

.cr-step-icon[b-22oo6n4xe7] {
    color: #F89B4D;
}

/* ── Form ─────────────────────────────────────────────────── */
.cr-row[b-22oo6n4xe7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cr-form-group[b-22oo6n4xe7] {
    margin-bottom: 16px;
}

.cr-label[b-22oo6n4xe7] {
    display: block;
    margin-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(250, 247, 240, 0.78);
}

/* Input: superficie SOLIDA (mai vetro dentro la card) */
.cr-card-body[b-22oo6n4xe7]  .cr-input,
.cr-card-body[b-22oo6n4xe7]  .cr-select,
.cr-card-body[b-22oo6n4xe7]  .cr-textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 13px 16px;
    border-radius: 14px;
    background: #182230;
    border: 1px solid rgba(250, 247, 240, 0.09);
    color: #FAF7F0;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                box-shadow var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                background var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.cr-card-body[b-22oo6n4xe7]  .cr-input:focus,
.cr-card-body[b-22oo6n4xe7]  .cr-select:focus,
.cr-card-body[b-22oo6n4xe7]  .cr-textarea:focus {
    background: #1C2736;
    border-color: var(--lp-accent, #6C3CE1);
    outline: none;
    box-shadow: 0 0 0 3px var(--lp-glow, rgba(108, 60, 225, 0.34));
}

.cr-card-body[b-22oo6n4xe7]  .cr-input::placeholder,
.cr-card-body[b-22oo6n4xe7]  .cr-textarea::placeholder {
    color: rgba(250, 247, 240, 0.36);
}

.cr-card-body[b-22oo6n4xe7]  .cr-textarea {
    min-height: 0;
    resize: vertical;
}

.cr-card-body[b-22oo6n4xe7]  .cr-validation {
    display: block;
    margin-top: 6px;
    font-size: 0.8125rem;
    color: #ff9b8a;
}

.cr-checkbox-group[b-22oo6n4xe7] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
}

.cr-card-body[b-22oo6n4xe7]  .cr-checkbox {
    margin-top: 4px;
    accent-color: #E87C2A;
    cursor: pointer;
}

.cr-checkbox-label[b-22oo6n4xe7] {
    margin: 0;
    font-size: 0.9375rem;
    color: #FAF7F0;
    cursor: pointer;
}

.cr-terms-label[b-22oo6n4xe7] {
    font-size: 0.8125rem;
    color: rgba(250, 247, 240, 0.56);
}

.cr-link[b-22oo6n4xe7] {
    color: #F89B4D;
    font-weight: 500;
    text-decoration: none;
}

.cr-link:hover[b-22oo6n4xe7] {
    color: #ffb874;
    text-decoration: underline;
}

/* ── Navigation ───────────────────────────────────────────── */
.cr-nav-buttons[b-22oo6n4xe7] {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(250, 247, 240, 0.08);
}

/* CTA: viola d'azione pieno, pillola, inchiostro bianco (La Regola dei
   Due Registri / dell'Inchiostro Misurato, DESIGN.md riga 227-229: "un
   pulsante non e' mai ambra"). Niente gradiente, nessun alone a riposo
   -- coerente con OAuthCallback/SignupComplete/EmailVerified.razor.css. */
.cr-btn-primary[b-22oo6n4xe7],
.cr-btn-success[b-22oo6n4xe7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 13px 24px;
    border: none;
    border-radius: var(--lg-r-pill, 999px);
    background: var(--lp-accent, #6C3CE1);
    color: var(--lp-on-accent, #ffffff);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                filter var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.cr-btn-primary:hover:not(:disabled)[b-22oo6n4xe7],
.cr-btn-success:hover:not(:disabled)[b-22oo6n4xe7] {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

/* Anello di focus ciano sui pulsanti (DESIGN.md Don't: "contorno ciano 2px
   sui pulsanti"), stesso doppio-anello di sc-btn-primary/ev-btn-primary. */
.cr-btn-primary:focus-visible[b-22oo6n4xe7],
.cr-btn-success:focus-visible[b-22oo6n4xe7],
.cr-btn-outline:focus-visible[b-22oo6n4xe7] {
    outline: none;
    box-shadow: 0 0 0 2px var(--lp-bg, #06090D), 0 0 0 4px var(--lp-accent-2, #67d8ee);
}

.cr-btn-success:disabled[b-22oo6n4xe7] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.cr-btn-outline[b-22oo6n4xe7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 13px 24px;
    background: transparent;
    color: rgba(250, 247, 240, 0.56);
    border: 1px solid rgba(250, 247, 240, 0.14);
    border-radius: var(--lg-r-pill, 999px);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.cr-btn-outline:hover[b-22oo6n4xe7] {
    background: rgba(250, 247, 240, 0.06);
    border-color: rgba(250, 247, 240, 0.24);
    color: #FAF7F0;
}

.cr-btn-icon[b-22oo6n4xe7] {
    font-size: 0.875rem;
}

.cr-btn-spinner[b-22oo6n4xe7] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: cr-spin-b-22oo6n4xe7 0.7s linear infinite;
}

.cr-terms-section[b-22oo6n4xe7] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(250, 247, 240, 0.08);
}

@keyframes cr-spin-b-22oo6n4xe7 {
    to { transform: rotate(360deg); }
}

/* ── Responsive ≤600px ────────────────────────────────────── */
@media (max-width: 600px) {
    .cr-card-body[b-22oo6n4xe7] {
        padding: 20px 24px 24px;
    }

    .cr-row[b-22oo6n4xe7] {
        grid-template-columns: 1fr;
    }

    .cr-nav-buttons[b-22oo6n4xe7] {
        flex-direction: column;
        gap: 12px;
    }

    .cr-btn-primary[b-22oo6n4xe7],
    .cr-btn-outline[b-22oo6n4xe7],
    .cr-btn-success[b-22oo6n4xe7] {
        width: 100%;
        justify-content: center;
    }
}

/* ── Mobile: tocco e leggibilita' (stesso fix di Login/Register,
   misurato 2026-08-18 a 390x844 — campi sotto 16px fanno zoomare
   Safari iOS al focus, la spunta termini era sotto il minimo di
   tocco). L'aspetto non cambia: cresce l'area, non il disegno. */
@media (max-width: 768px) {
    .cr-card-body[b-22oo6n4xe7]  .cr-input,
    .cr-card-body[b-22oo6n4xe7]  .cr-select,
    .cr-card-body[b-22oo6n4xe7]  .cr-textarea {
        font-size: 16px;
    }

    .cr-card-body[b-22oo6n4xe7]  .cr-checkbox {
        width: 24px;
        height: 24px;
        min-width: 24px;
        flex-shrink: 0;
    }

    .cr-checkbox-group[b-22oo6n4xe7] {
        min-height: 44px;
        align-items: center;
    }
}
/* /Pages/Account/EmailVerified.razor.rz.scp.css */
/* ============================================================
   EmailVerified — Liquid Glass v2 (scoped)
   Stessa struttura di Login.razor.css: .auth-card e' gia' vetro lg-3
   via wwwroot/css/lg-surfaces.css (background, border, radius 26px,
   shadow-3). Qui: layout e contenuto della card di esito verifica.
   Sostituisce l'ex-token morto --il-* (bundle-design-system-v337.css,
   rimosso nel commit 82377499) con i token reali del sistema.
   ============================================================ */

/* ── Layout: una sola card, centrata in modo sicuro ───────── */
.auth-container[b-ycxecdifde] {
    min-height: calc(100vh - 140px);
    display: flex;
    padding: 48px 16px 64px;
}

.auth-card[b-ycxecdifde] {
    width: 100%;
    max-width: 480px;
    margin: auto;
    overflow: hidden;
    text-align: center;
}

.ev-header[b-ycxecdifde] {
    padding: 48px 32px 24px;
}

.ev-icon-circle[b-ycxecdifde] {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Stato: solo per esito/diagnosi (La Regola della Rarità), mai a
   riposo altrove sulla pagina — vetro tinto, come .error-message di
   Login.razor.css. */
.ev-icon-circle.success[b-ycxecdifde] {
    background: rgba(52, 211, 153, 0.14);
    border: 1px solid rgba(52, 211, 153, 0.35);
}

.ev-icon-circle.success i[b-ycxecdifde] {
    font-size: 2.5rem;
    color: var(--lp-accent-success, #34d399);
}

.ev-icon-circle.error[b-ycxecdifde] {
    background: rgba(248, 113, 113, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.35);
}

.ev-icon-circle.error i[b-ycxecdifde] {
    font-size: 2.5rem;
    color: var(--lp-accent-danger, #f87171);
}

.ev-title[b-ycxecdifde] {
    margin: 0 0 12px;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--lp-text, #f6f8ff);
}

.ev-subtitle[b-ycxecdifde] {
    margin: 0;
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
    font-size: 1rem;
    line-height: 1.5;
}

.ev-actions[b-ycxecdifde] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 32px 40px;
}

/* CTA primaria: viola d'azione pieno, pillola, inchiostro bianco
   (La Regola dei Due Registri / dell'Inchiostro Misurato). Niente
   gradiente su testo o pulsanti. */
.ev-btn-primary[b-ycxecdifde] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 15px 32px;
    background: var(--lp-accent, #6C3CE1);
    color: var(--lp-on-accent, #ffffff);
    border: none;
    border-radius: var(--lg-r-pill, 999px);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                filter var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.ev-btn-primary:hover[b-ycxecdifde] {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.ev-btn-primary:focus-visible[b-ycxecdifde] {
    outline: none;
    box-shadow: 0 0 0 2px var(--lp-bg, #06090D), 0 0 0 4px var(--lp-accent-2, #00d4ff);
}

/* Secondaria: fantasma di vetro, bordo di luce, testo viola su vetro */
.ev-btn-secondary[b-ycxecdifde] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 13px 32px;
    background: transparent;
    color: var(--lp-accent-text, #8660e1);
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--lg-r-pill, 999px);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.ev-btn-secondary:hover[b-ycxecdifde] {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--lp-border-strong, rgba(255, 255, 255, 0.22));
}

.ev-btn-secondary:focus-visible[b-ycxecdifde] {
    outline: none;
    box-shadow: 0 0 0 2px var(--lp-bg, #06090D), 0 0 0 4px var(--lp-accent-2, #00d4ff);
}

.ev-btn-icon[b-ycxecdifde] {
    font-size: 0.9em;
}

/* ── Responsive ≤480px ─────────────────────────────────────── */
@media (max-width: 480px) {
    .auth-container[b-ycxecdifde] {
        padding: 24px 12px 48px;
    }

    .ev-header[b-ycxecdifde] {
        padding: 32px 24px 16px;
    }

    .ev-actions[b-ycxecdifde] {
        padding: 0 24px 32px;
    }
}
/* /Pages/Account/ForgotPassword.razor.rz.scp.css */
/* ============================================================
   ForgotPassword — Liquid Glass v2 (scoped)
   Stessa struttura di Login.razor.css: .auth-card e' gia' vetro lg-3 via
   wwwroot/css/lg-surfaces.css (background, border, radius 26px, shadow-3).
   Qui: layout, campo email SOLIDO (mai vetro dentro la card), bottone
   d'azione, stato di successo — tutti sui token reali di DESIGN.md
   (--lp-text, --lp-muted, --lp-accent, --lp-accent-text, --lp-accent-danger,
   --lp-accent-success), non piu' sulla famiglia --il-* morta rimossa con
   bundle-design-system-v337.css.
   Nota: ::deep sugli elementi renderizzati da InputText/ValidationMessage
   (componenti figli, niente attributo di scope sul root element).
   ============================================================ */

.auth-container[b-usikx9mgcn] {
    min-height: calc(100vh - 140px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px 64px;
}

.auth-card[b-usikx9mgcn] {
    max-width: 400px;
    width: 100%;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
}

.fp-accent[b-usikx9mgcn] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #e87c2a, #f89b4d);
}

.fp-header[b-usikx9mgcn] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.fp-icon-circle[b-usikx9mgcn] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #e87c2a, #f89b4d);
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #ffffff;
}

.fp-title[b-usikx9mgcn] {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--lp-text, #f6f8ff);
    margin-bottom: 0.5rem;
}

.fp-subtitle[b-usikx9mgcn] {
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
    font-size: 1rem;
    margin: 0;
}

.fp-error[b-usikx9mgcn] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(248, 113, 113, 0.15);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: #fca5a5;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: 0.875rem;
}

.fp-form-group[b-usikx9mgcn] {
    margin-bottom: 1rem;
}

.fp-label[b-usikx9mgcn] {
    display: block;
    font-weight: 600;
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.auth-card[b-usikx9mgcn]  .fp-input {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1rem;
    background: #182230;
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    border-radius: 14px;
    font-size: 1rem;
    color: var(--lp-text, #f6f8ff);
    transition: border-color 160ms var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                box-shadow 160ms var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                background 160ms var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
    box-sizing: border-box;
}

.auth-card[b-usikx9mgcn]  .fp-input::placeholder { color: rgba(246, 248, 255, 0.38); }

.auth-card[b-usikx9mgcn]  .fp-input:focus {
    outline: none;
    background: #1c2736;
    border-color: var(--lp-accent, #6C3CE1);
    box-shadow: 0 0 0 3px rgba(108, 60, 225, 0.35);
}

.auth-card[b-usikx9mgcn]  .fp-validation {
    display: block;
    color: var(--lp-accent-danger, #f87171);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

.fp-actions[b-usikx9mgcn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.fp-btn-primary[b-usikx9mgcn] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: var(--lp-accent, #6C3CE1);
    color: var(--lp-on-accent, #ffffff);
    border: none;
    border-radius: var(--lg-r-pill, 999px);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 160ms var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                filter 160ms var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.fp-btn-primary:hover:not(:disabled)[b-usikx9mgcn] {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.fp-btn-primary:focus-visible[b-usikx9mgcn] {
    outline: none;
    box-shadow: 0 0 0 2px var(--lp-bg, #06090D), 0 0 0 4px var(--lp-accent-2, #00d4ff);
}

.fp-btn-primary:disabled[b-usikx9mgcn] {
    opacity: 0.6;
    cursor: not-allowed;
}

.fp-btn-outline[b-usikx9mgcn] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: transparent;
    color: var(--lp-text, #f6f8ff);
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--lg-r-pill, 999px);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 160ms var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.fp-btn-outline:hover[b-usikx9mgcn] { background: rgba(255, 255, 255, 0.06); }

.fp-btn-ghost[b-usikx9mgcn] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: transparent;
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
    border: none;
    border-radius: var(--lg-r-pill, 999px);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 160ms var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                color 160ms var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.fp-btn-ghost:hover[b-usikx9mgcn] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--lp-text, #f6f8ff);
}

.fp-btn-icon[b-usikx9mgcn] {
    font-size: 0.875rem;
}

.fp-btn-loading[b-usikx9mgcn] {
    opacity: 0.7;
}

.fp-footer[b-usikx9mgcn] {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
}

.fp-back-link[b-usikx9mgcn] {
    color: var(--lp-accent-text, #8660e1);
    text-decoration: none;
    font-weight: 500;
    transition: color 160ms var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.fp-back-link:hover[b-usikx9mgcn] {
    color: var(--lp-text, #f6f8ff);
}

.fp-link-icon[b-usikx9mgcn] {
    margin-right: 0.5rem;
}

.fp-alert-success[b-usikx9mgcn] {
    background: rgba(52, 211, 153, 0.15);
    border: 1px solid rgba(52, 211, 153, 0.35);
    border-radius: 12px;
    padding: 1rem;
}

.fp-alert-title[b-usikx9mgcn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #6ee7b7;
    font-size: 1rem;
}

.fp-alert-icon[b-usikx9mgcn] {
    font-size: 1.25rem;
}

.fp-alert-text[b-usikx9mgcn] {
    margin-top: 0.5rem;
    margin-bottom: 0;
    color: var(--lp-text, #f6f8ff);
    font-size: 0.9375rem;
}

.fp-info-box[b-usikx9mgcn] {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--lg-fill, rgba(255, 255, 255, 0.055));
    border-radius: 12px;
    text-align: center;
}

.fp-info-title[b-usikx9mgcn] {
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.fp-info-text[b-usikx9mgcn] {
    color: var(--lp-faint, rgba(246, 248, 255, 0.47));
    margin: 0;
    font-size: 0.8125rem;
}

/* ── Mobile: campi a 16px cosi' Safari iOS non forza lo zoom al focus
   (stesso vincolo documentato in Login.razor.css). ───────────────── */
@media (max-width: 768px) {
    .auth-card[b-usikx9mgcn]  .fp-input {
        font-size: 16px;
    }
}
/* /Pages/Account/Login.razor.rz.scp.css */
/* ============================================================
   Login — Liquid Glass v2 (scoped)
   Una sola card auth centrata: .auth-card è già vetro lg-3 via
   wwwroot/css/lg-surfaces.css (background, border, radius 26px,
   shadow-3). Qui: layout, campi SOLIDI, bottoni OAuth coerenti.
   Scala spaziature 8pt · ease --lg-ease · 160/280ms.
   Nota: ::deep sugli elementi renderizzati da EditForm/InputText/
   InputCheckbox/ValidationMessage (componenti figli, niente
   attributo di scope sul root element).
   ============================================================ */

/* ── Layout: una sola card, centrata in modo sicuro ───────── */
.auth-container[b-5jie6sso58] {
    min-height: calc(100vh - 140px);
    display: flex;
    padding: 48px 16px 64px;
}

/* margin:auto su figlio flex = centratura verticale senza
   clipping quando la card è più alta del viewport */
.auth-card[b-5jie6sso58] {
    width: 100%;
    max-width: 420px;
    margin: auto;
    overflow: hidden;
}

/* ── Header ───────────────────────────────────────────────── */
.auth-card-header[b-5jie6sso58] {
    padding: 32px 32px 0;
    text-align: center;
}

/* Logo dentro la card (mockup login): stesso markup di Register */
.auth-logo[b-5jie6sso58] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #FAF7F0;
    text-decoration: none;
}

.auth-logo:hover[b-5jie6sso58] { color: #FAF7F0; }

.auth-logo:focus-visible[b-5jie6sso58] {
    outline: none;
    border-radius: 8px;
    box-shadow: 0 0 0 3px rgba(232, 124, 42, 0.45);
}

.auth-logo-icon[b-5jie6sso58] {
    font-size: 28px;
    color: #F89B4D;
}

.auth-card-header h1[b-5jie6sso58] {
    margin: 16px 0 8px;
    font-size: 1.375rem; /* 22px */
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #FAF7F0;
}

.auth-card-header p[b-5jie6sso58],
.auth-card-header .text-muted[b-5jie6sso58] {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(250, 247, 240, 0.56);
}

/* ── Body: ritmo verticale uniforme 24px ──────────────────── */
.auth-card-body[b-5jie6sso58] {
    padding: 24px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Bottoni OAuth/SSO: solidi, tutti uguali ──────────────── */
.oauth-buttons[b-5jie6sso58] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sso-signin-btn[b-5jie6sso58],
.social-btn[b-5jie6sso58] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 14px;
    background: #182230;
    border: 1px solid rgba(250, 247, 240, 0.09);
    color: #FAF7F0;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.sso-signin-btn:hover:not(:disabled)[b-5jie6sso58],
.social-btn:hover:not(:disabled)[b-5jie6sso58] {
    background: #1C2736;
    border-color: rgba(250, 247, 240, 0.16);
}

.sso-signin-btn:focus-visible[b-5jie6sso58],
.social-btn:focus-visible[b-5jie6sso58] {
    outline: none;
    border-color: rgba(232, 124, 42, 0.55);
    box-shadow: 0 0 0 3px rgba(232, 124, 42, 0.15);
}

.sso-signin-btn:disabled[b-5jie6sso58],
.social-btn:disabled[b-5jie6sso58] {
    opacity: 0.6;
    cursor: not-allowed;
}

.sso-signin-btn .microsoft-icon[b-5jie6sso58] { flex: 0 0 auto; }

/* Spinner SSO (su bottone scuro) */
.sso-spinner[b-5jie6sso58] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-spin-b-5jie6sso58 0.7s linear infinite;
    flex: 0 0 auto;
}

@keyframes auth-spin-b-5jie6sso58 { to { transform: rotate(360deg); } }

/* ── Divider ──────────────────────────────────────────────── */
.auth-divider[b-5jie6sso58] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(250, 247, 240, 0.36);
}

.auth-divider[b-5jie6sso58]::before,
.auth-divider[b-5jie6sso58]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(250, 247, 240, 0.08);
}

/* ── Form arioso ──────────────────────────────────────────── */
.auth-card-body[b-5jie6sso58]  .auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group[b-5jie6sso58] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-5jie6sso58],
.auth-card label.form-label[b-5jie6sso58] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(250, 247, 240, 0.78);
}

/* Input: superficie SOLIDA (mai vetro dentro la card) */
.auth-card[b-5jie6sso58]  .form-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 13px 16px;
    border-radius: 14px;
    background: #182230;
    border: 1px solid rgba(250, 247, 240, 0.09);
    color: #FAF7F0;
    font-size: 0.95rem;
    transition: border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                box-shadow var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                background var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.auth-card[b-5jie6sso58]  .form-input:focus {
    background: #1C2736;
    border-color: rgba(232, 124, 42, 0.55);
    outline: none;
    box-shadow: 0 0 0 3px rgba(232, 124, 42, 0.15);
}

.auth-card[b-5jie6sso58]  .form-input::placeholder {
    color: rgba(250, 247, 240, 0.36);
}

/* Password: toggle ancorato dentro l'input */
.password-input-container[b-5jie6sso58] { position: relative; }

.password-input-container[b-5jie6sso58]  .form-input { padding-right: 48px; }

.password-toggle-btn[b-5jie6sso58] {
    position: absolute;
    top: 0;
    right: 4px;
    height: 100%;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: rgba(250, 247, 240, 0.56);
    cursor: pointer;
    transition: color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.password-toggle-btn:hover[b-5jie6sso58] { color: #FAF7F0; }

.password-toggle-btn:focus-visible[b-5jie6sso58] {
    outline: none;
    color: #FAF7F0;
    box-shadow: 0 0 0 2px rgba(232, 124, 42, 0.45);
}

/* Messaggi di validazione (ValidationMessage → ::deep) */
.auth-card[b-5jie6sso58]  .field-validation-error {
    margin: 0;
    font-size: 0.78rem;
    color: #ff9b8a;
}

/* Riga "Ricordami" + "Password dimenticata" (pattern mockup) */
.form-options-row[b-5jie6sso58] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.form-check-label[b-5jie6sso58] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(250, 247, 240, 0.56);
    cursor: pointer;
}

.form-check-label .checkmark[b-5jie6sso58] { display: none; }

.auth-card[b-5jie6sso58]  .form-check-input {
    width: 14px;
    height: 14px;
    min-height: 0;
    margin: 0;
    flex: 0 0 auto;
    accent-color: #E87C2A;
    cursor: pointer;
}

.forgot-link[b-5jie6sso58] {
    font-size: 0.8rem;
    font-weight: 600;
}

.remember-me-hint[b-5jie6sso58] {
    margin: -8px 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: rgba(250, 247, 240, 0.36);
}

/* Banner errore */
.error-message[b-5jie6sso58] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 90, 70, 0.12);
    border: 1px solid rgba(255, 90, 70, 0.35);
    color: #ffb4a8;
    font-size: 0.85rem;
}

/* ── CTA submit: gradient brand arancio, pill full-width ──── */
.auth-submit-btn[b-5jie6sso58] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 15px 16px;
    border: none;
    border-radius: var(--lg-r-pill, 999px);
    background: linear-gradient(135deg, #E87C2A 0%, #F89B4D 100%);
    color: #1A0F06;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(232, 124, 42, 0.35);
    transition: transform var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                filter var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                box-shadow var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.auth-submit-btn:hover:not(:disabled)[b-5jie6sso58] {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.auth-submit-btn:focus-visible[b-5jie6sso58] {
    outline: none;
    box-shadow: 0 8px 24px rgba(232, 124, 42, 0.35),
                0 0 0 3px rgba(232, 124, 42, 0.45);
}

.auth-submit-btn:disabled[b-5jie6sso58],
.auth-submit-btn.loading[b-5jie6sso58] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Spinner del submit: scuro su gradient arancio (contrasto) */
.auth-submit-btn .spinner[b-5jie6sso58] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(26, 15, 6, 0.35);
    border-top-color: #1A0F06;
    border-radius: 50%;
    animation: auth-spin-b-5jie6sso58 0.7s linear infinite;
    flex: 0 0 auto;
}

/* ── Link footer ──────────────────────────────────────────── */
.auth-signup[b-5jie6sso58] {
    margin: 0;
    text-align: center;
}

.auth-signup p[b-5jie6sso58] {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(250, 247, 240, 0.56);
}

.auth-link[b-5jie6sso58],
.auth-link-primary[b-5jie6sso58],
.auth-card a:not(.social-btn):not(.sso-signin-btn):not(.auth-logo)[b-5jie6sso58] {
    color: #F89B4D;
    font-weight: 500;
    text-decoration: none;
}

.auth-link-primary[b-5jie6sso58] { font-weight: 700; }

.auth-link:hover[b-5jie6sso58],
.auth-link-primary:hover[b-5jie6sso58],
.auth-card a:not(.social-btn):not(.sso-signin-btn):not(.auth-logo):hover[b-5jie6sso58] {
    color: #ffb874;
    text-decoration: underline;
}

/* ── Responsive ≤768px / ≤480px ───────────────────────────── */
@media (max-width: 768px) {
    .auth-container[b-5jie6sso58] {
        min-height: calc(100vh - 120px);
        padding: 32px 16px 48px;
    }
}

@media (max-width: 480px) {
    .auth-container[b-5jie6sso58] { padding: 24px 12px 48px; }
    .auth-card-header[b-5jie6sso58] { padding: 24px 24px 0; }
    .auth-card-body[b-5jie6sso58] { padding: 20px 24px 24px; gap: 20px; }

    .form-options-row[b-5jie6sso58] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ── Mobile: tocco e leggibilita' (misurato 2026-08-18 a 390x844) ─────────
   Tre difetti veri, non estetici:
   1. i campi erano a 15,2px e Safari iOS ingrandisce la pagina al focus di
      ogni input sotto i 16px — l'utente si ritrova la form fuori schermo;
   2. la spunta dei termini era 14-16px: il controllo che sblocca la
      registrazione era il bersaglio piu' piccolo della pagina;
   3. i link legali e il mostra-password stavano fra i 16 e i 20px di altezza,
      sotto il minimo di tocco che PRODUCT.md dichiara come requisito.
   L'aspetto non cambia: cresce l'area, non il disegno. */
@media (max-width: 768px) {
    .auth-card[b-5jie6sso58]  .form-input,
    .auth-card[b-5jie6sso58]  input,
    .auth-card[b-5jie6sso58]  select,
    .auth-card[b-5jie6sso58]  textarea {
        font-size: 16px;
    }

    .auth-card[b-5jie6sso58]  .form-check-input {
        width: 24px;
        height: 24px;
        min-width: 24px;
        flex-shrink: 0;
    }

    .auth-card[b-5jie6sso58]  .form-check-label,
    .auth-card[b-5jie6sso58]  .auth-checkbox-row {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .password-toggle-btn[b-5jie6sso58] {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    /* padding per il dito, margine negativo perche' il ritmo verticale
       resti quello disegnato */
    .auth-link[b-5jie6sso58],
    .auth-link-primary[b-5jie6sso58] {
        display: inline-block;
        padding-block: 12px;
        margin-block: -12px;
    }
}
/* /Pages/Account/OAuthCallback.razor.rz.scp.css */
/* ============================================================
   OAuthCallback — Liquid Glass v2 (scoped)
   Stessa struttura di Login.razor: .auth-card è già vetro lg-3 via
   wwwroot/css/lg-surfaces.css (blur, bordo, radius var(--lg-r-panel),
   shadow-3). Il layout fornisce già il fondo WebGL — nessun background
   qui, a differenza della vecchia card bianca su token --il-* morti.
   Scala spaziature 8pt · ease --lg-ease · 160/280ms.
   ============================================================ */

/* ── Layout: una sola card, centrata in modo sicuro ───────── */
.auth-container[b-lmov7mhp0p] {
    min-height: calc(100vh - 140px);
    display: flex;
    padding: 48px 16px 64px;
}

.auth-card[b-lmov7mhp0p] {
    width: 100%;
    max-width: 480px;
    margin: auto;
    overflow: hidden;
}

.oauth-callback-body[b-lmov7mhp0p] {
    padding: 40px 32px;
    text-align: center;
}

/* ── Titoli e testo di stato ───────────────────────────────── */
.oauth-processing h2[b-lmov7mhp0p],
.oauth-error h2[b-lmov7mhp0p],
.oauth-success h2[b-lmov7mhp0p] {
    margin: 0 0 12px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--lp-text, #f6f8ff);
}

.oauth-status-text[b-lmov7mhp0p],
.oauth-error-message[b-lmov7mhp0p],
.oauth-success p[b-lmov7mhp0p] {
    margin: 0 0 20px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
}

/* ── Spinner (elaborazione) ────────────────────────────────── */
.oauth-spinner-large[b-lmov7mhp0p] {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
}

.spinner-ring[b-lmov7mhp0p] {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 58px;
    height: 58px;
    margin: 7px;
    border: 6px solid transparent;
    border-top-color: var(--lp-accent, #6C3CE1);
    border-radius: 50%;
    animation: oauth-spin-b-lmov7mhp0p 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spinner-ring:nth-child(1)[b-lmov7mhp0p] { animation-delay: -0.45s; }
.spinner-ring:nth-child(2)[b-lmov7mhp0p] { animation-delay: -0.3s; }
.spinner-ring:nth-child(3)[b-lmov7mhp0p] { animation-delay: -0.15s; }
.spinner-ring:nth-child(4)[b-lmov7mhp0p] { animation-delay: 0s; }

.oauth-progress-bar[b-lmov7mhp0p] {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.oauth-progress-fill[b-lmov7mhp0p] {
    height: 100%;
    background: var(--lp-accent, #6C3CE1);
    border-radius: 2px;
    transition: width 0.3s var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* ── Icone di stato (glyph decorativo: aria-hidden nel markup) ─ */
.oauth-error-icon[b-lmov7mhp0p],
.oauth-success-icon[b-lmov7mhp0p] {
    font-size: 3.5rem;
    margin-bottom: 16px;
}

.oauth-error-icon[b-lmov7mhp0p] {
    color: var(--lp-accent-danger, #f87171);
}

.oauth-success-icon[b-lmov7mhp0p] {
    color: var(--lp-accent-success, #34d399);
    animation: oauth-checkmark-enter-b-lmov7mhp0p 0.5s var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* ── Azioni errore: pillola viola primaria + ghost secondaria ── */
.oauth-error-actions[b-lmov7mhp0p] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.oauth-btn[b-lmov7mhp0p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 13px 24px;
    border-radius: var(--lg-r-pill, 999px);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                background-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                box-shadow var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Il viola d'azione e' l'unico accento scuro del sistema e prende
   l'inchiostro bianco (6.23:1) — DESIGN.md, Regola dell'Inchiostro
   Misurato. L'inchiostro scuro qui darebbe 3.23:1, sotto AA. */
.oauth-btn-primary[b-lmov7mhp0p] {
    background: var(--lp-accent, #6C3CE1);
    color: var(--lp-on-accent, #ffffff);
}

.oauth-btn-primary:hover[b-lmov7mhp0p] {
    transform: translateY(-1px);
    box-shadow: 0 0 40px rgba(108, 60, 225, 0.34), 0 6px 20px rgba(0, 0, 0, 0.6);
}

.oauth-btn-primary:focus-visible[b-lmov7mhp0p] {
    outline: none;
    box-shadow: 0 0 0 2px var(--lp-bg, #06090D), 0 0 0 4px var(--lp-accent-2, #00d4ff);
}

.oauth-btn-secondary[b-lmov7mhp0p] {
    background: transparent;
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
    border-color: var(--lp-border, rgba(255, 255, 255, 0.12));
}

.oauth-btn-secondary:hover[b-lmov7mhp0p] {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--lp-border-strong, rgba(255, 255, 255, 0.22));
    color: var(--lp-text, #f6f8ff);
}

.oauth-btn-secondary:focus-visible[b-lmov7mhp0p] {
    outline: none;
    border-color: var(--lp-border-strong, rgba(255, 255, 255, 0.22));
    box-shadow: 0 0 0 2px var(--lp-bg, #06090D), 0 0 0 4px var(--lp-accent-2, #00d4ff);
}

/* ── Animazioni ─────────────────────────────────────────────── */
@keyframes oauth-spin-b-lmov7mhp0p {
    to { transform: rotate(360deg); }
}

@keyframes oauth-checkmark-enter-b-lmov7mhp0p {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .spinner-ring[b-lmov7mhp0p] { animation: none; border-top-color: transparent; border-color: var(--lp-accent, #6C3CE1); }
    .oauth-success-icon[b-lmov7mhp0p] { animation: none; }
    .oauth-progress-fill[b-lmov7mhp0p] { transition: none; }
}

/* ── Responsive ≤768px / ≤480px ─────────────────────────────── */
@media (max-width: 768px) {
    .auth-container[b-lmov7mhp0p] {
        min-height: calc(100vh - 120px);
        padding: 32px 16px 48px;
    }
}

@media (max-width: 480px) {
    .auth-container[b-lmov7mhp0p] { padding: 24px 12px 48px; }
    .oauth-callback-body[b-lmov7mhp0p] { padding: 32px 24px; }

    .oauth-error-actions[b-lmov7mhp0p] { flex-direction: column; }
    .oauth-btn[b-lmov7mhp0p] { width: 100%; }
}
/* /Pages/Account/Profile.razor.rz.scp.css */
/*
    Profile.razor.css — foglio di stile della pagina /profile.

    La pagina era l'unica del gruppo account senza un CSS proprio: su 68 classi
    non-utility, 46 non avevano alcuna regola in tutto il repo. I sintomi
    ("elementi accatastati, input file grezzo") venivano da li' e dalla griglia
    Bootstrap, assente dal pod di produzione.

    Questo file copre SOLO cio' che manca. Restano ai CSS condivisi
    (liquid-dashboards-v500.css / lg-surfaces.css) e non vanno duplicati qui:
    superficie e padding di .stat-box / .preference-item / .profile-sidebar-card
    / .profile-content-card / .security-card / .wallet-card, .btn* , .breadcrumb*,
    .spinner, .toggle-switch/.toggle-slider, .loading-state, .section-header,
    .stat-icon-wrapper, .stat-number, .stat-text, .pref-label.
*/

/* ============================================================
   1. Impalcatura di pagina (sostituisce la griglia Bootstrap)
   ============================================================ */

.profile-shell[b-blq12np130] {
    width: 100%;
    max-width: var(--lp-container, 1200px);
    margin: 0 auto;
    padding: 0 24px;
}

.profile-breadcrumb[b-blq12np130] {
    margin-bottom: var(--lp-space-4, 1.5rem);
}

.profile-grid[b-blq12np130] {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: var(--lp-space-4, 1.5rem);
    align-items: start;
}

.profile-col-side[b-blq12np130],
.profile-col-main[b-blq12np130] {
    min-width: 0;
}

@media (max-width: 991px) {
    .profile-grid[b-blq12np130] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .profile-shell[b-blq12np130] {
        padding: 0 16px;
    }
}

/* ============================================================
   2. Card laterale — avatar, identita', ruolo
   ============================================================ */

.profile-sidebar-card[b-blq12np130] {
    display: flex;
    flex-direction: column;
    gap: var(--lp-space-4, 1.5rem);
    padding: 24px 20px;
    position: sticky;
    top: 88px;
}

@media (max-width: 991px) {
    .profile-sidebar-card[b-blq12np130] {
        position: static;
    }
}

.profile-avatar-section[b-blq12np130] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.profile-avatar-wrapper[b-blq12np130] {
    position: relative;
    width: 96px;
    height: 96px;
    margin-bottom: 6px;
}

.profile-avatar[b-blq12np130],
.profile-avatar-placeholder[b-blq12np130] {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 2px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    display: block;
}

.profile-avatar[b-blq12np130] {
    object-fit: cover;
}

.profile-avatar-placeholder[b-blq12np130] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--lp-accent-warm, #e87c2a), var(--lp-accent, #3ba9c9));
}

.avatar-initials[b-blq12np130] {
    color: var(--lp-on-warm, #1a0f06);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Il file input nativo non e' stilabile: si nasconde e si clicca la label.
   Non con display:none pero' — toglierebbe l'elemento dalla tabulazione.
   Resta sovrapposto alla label, invisibile ma focusabile. */
.avatar-upload-btn[b-blq12np130] {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lp-accent-warm, #e87c2a);
    color: var(--lp-on-warm, #1a0f06);
    border: 2px solid var(--lp-bg, #0b0d12);
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--lp-motion-fast, 160ms) var(--lp-ease-out, cubic-bezier(.22, 1, .36, 1));
}

.avatar-upload-btn:hover[b-blq12np130] {
    transform: scale(1.08);
}

.avatar-upload-btn:focus-within[b-blq12np130] {
    outline: 2px solid var(--lp-accent, #3ba9c9);
    outline-offset: 2px;
}

.avatar-upload-btn[b-blq12np130]  .avatar-upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.profile-name[b-blq12np130] {
    margin: 0;
    font-family: var(--lp-font-display, 'Space Grotesk', system-ui, sans-serif);
    font-size: var(--lp-text-lg, 1.125rem);
    font-weight: 700;
    color: var(--lp-text, #faf7f0);
    overflow-wrap: anywhere;
}

.profile-email[b-blq12np130] {
    margin: 0;
    font-size: var(--lp-text-sm, 0.875rem);
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
    overflow-wrap: anywhere;
}

.role-badge[b-blq12np130] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 12px;
    border-radius: var(--lp-radius-pill, 999px);
    font-size: var(--lp-text-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
}

/* GetRoleBadgeColor() emette il suffisso: danger/warning/primary/success/secondary. */
.role-badge-danger[b-blq12np130] {
    background: rgba(229, 72, 77, 0.14);
    border-color: rgba(229, 72, 77, 0.34);
    color: var(--lp-accent-danger, #e5484d);
}

.role-badge-warning[b-blq12np130] {
    background: rgba(232, 124, 42, 0.14);
    border-color: rgba(232, 124, 42, 0.34);
    color: var(--lp-accent-warm, #e87c2a);
}

.role-badge-primary[b-blq12np130] {
    background: rgba(59, 169, 201, 0.14);
    border-color: rgba(59, 169, 201, 0.34);
    color: var(--lp-accent, #3ba9c9);
}

.role-badge-success[b-blq12np130] {
    background: rgba(47, 191, 113, 0.14);
    border-color: rgba(47, 191, 113, 0.32);
    color: var(--lp-accent-success, #2fbf71);
}

.role-badge-secondary[b-blq12np130] {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--lp-border, rgba(255, 255, 255, 0.12));
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
}

/* ============================================================
   3. Statistiche
   ============================================================ */

.profile-stats-grid[b-blq12np130] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* La superficie arriva da liquid-dashboards-v500, ma il suo
   `.stat-box { padding: 20px 22px !important }` non regge in sidebar: 300px
   meno il padding della card e il gap lasciano ~125px per box, e 44px di
   padding ne lascerebbero 81 per icona + gap + "Completed" — testo fuori dal
   bordo. Serve un selettore piu' specifico e a sua volta !important.
   Disposizione verticale: a questa larghezza affiancare icona e testo non sta. */
.profile-stats-grid .stat-box[b-blq12np130] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 14px 12px !important;
}

.profile-stats-grid .stat-box[role="button"][b-blq12np130] {
    cursor: pointer;
}

.profile-stats-grid .stat-box[role="button"]:focus-visible[b-blq12np130] {
    outline: 2px solid var(--lp-accent-warm, #e87c2a);
    outline-offset: 2px;
}

.stat-icon-wrapper[b-blq12np130] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 0.875rem;
}

.stat-teal[b-blq12np130]   { background: rgba(45, 212, 191, 0.16); color: #2dd4bf; }
.stat-green[b-blq12np130]  { background: rgba(47, 191, 113, 0.16); color: #2fbf71; }
.stat-purple[b-blq12np130] { background: rgba(167, 139, 250, 0.16); color: #a78bfa; }
.stat-yellow[b-blq12np130] { background: rgba(232, 161, 58, 0.16); color: #e8a13a; }

.stat-info[b-blq12np130] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    line-height: 1.15;
}

/* "Completed" a questa larghezza e' al limite: che vada a capo invece di
   sforare il bordo della card. */
.stat-info .stat-number[b-blq12np130],
.stat-info .stat-text[b-blq12np130] {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* ============================================================
   4. Navigazione rapida e info iscrizione
   ============================================================ */

.profile-quick-nav[b-blq12np130] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-title[b-blq12np130] {
    margin: 0 0 8px;
    font-size: var(--lp-text-xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
}

.quick-nav-link[b-blq12np130] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--lp-radius-sm, 8px);
    color: var(--lp-text, #faf7f0);
    font-size: var(--lp-text-sm, 0.875rem);
    text-decoration: none;
    transition: background-color var(--lp-motion-fast, 160ms) var(--lp-ease-out, cubic-bezier(.22, 1, .36, 1));
}

.quick-nav-link:hover[b-blq12np130] {
    background: rgba(255, 255, 255, 0.07);
}

.quick-nav-link:focus-visible[b-blq12np130] {
    outline: 2px solid var(--lp-accent-warm, #e87c2a);
    outline-offset: -2px;
}

/* la prima icona colora, l'ultima e' il chevron e va spinto a destra */
.quick-nav-link > i:first-child[b-blq12np130] {
    width: 16px;
    flex-shrink: 0;
    text-align: center;
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
}

.quick-nav-link > span[b-blq12np130] {
    flex: 1;
    min-width: 0;
}

.quick-nav-link > i:last-child[b-blq12np130] {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--lp-faint, rgba(250, 247, 240, 0.45));
}

.nav-badge[b-blq12np130] {
    flex-shrink: 0;
    min-width: 20px;
    padding: 2px 6px;
    border-radius: var(--lp-radius-pill, 999px);
    background: var(--lp-accent-danger, #e5484d);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.member-info[b-blq12np130] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
}

.info-row[b-blq12np130] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--lp-text-xs, 0.75rem);
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
}

.info-row i[b-blq12np130] {
    width: 14px;
    flex-shrink: 0;
    text-align: center;
}

/* ============================================================
   5. Tab
   ============================================================ */

.profile-tabs-wrapper[b-blq12np130] {
    margin-bottom: var(--lp-space-3, 1rem);
    overflow-x: auto;
    scrollbar-width: none;
}

.profile-tabs-wrapper[b-blq12np130]::-webkit-scrollbar {
    display: none;
}

.profile-tabs[b-blq12np130] {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 4px;
    list-style: none;
    width: max-content;
    min-width: 100%;
    border-radius: var(--lp-radius, 12px);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
}

.profile-tabs li[b-blq12np130] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--lp-radius-sm, 8px);
    white-space: nowrap;
    font-size: var(--lp-text-sm, 0.875rem);
    font-weight: 600;
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
    cursor: pointer;
    transition: background-color var(--lp-motion-fast, 160ms) var(--lp-ease-out, cubic-bezier(.22, 1, .36, 1)),
                color var(--lp-motion-fast, 160ms) var(--lp-ease-out, cubic-bezier(.22, 1, .36, 1));
}

.profile-tabs li:hover[b-blq12np130] {
    color: var(--lp-text, #faf7f0);
    background: rgba(255, 255, 255, 0.05);
}

.profile-tabs li:focus-visible[b-blq12np130] {
    outline: 2px solid var(--lp-accent-warm, #e87c2a);
    outline-offset: -2px;
}

.profile-tabs li.active[b-blq12np130] {
    background: var(--lp-accent-warm, #e87c2a);
    color: var(--lp-on-warm, #1a0f06);
}

/* L'etichetta e' uno <span>, e liquid-dark-bridge.css ha
   `.lp-shell-unified span { color: var(--lp-text) }` con specificita' (0,1,1):
   una regola esplicita batte l'ereditarieta', quindi lo span tornava quasi
   bianco sull'ambra — 1,78:1 — mentre la riga qui sopra dichiarava gia'
   l'inchiostro giusto. `inherit` lo riporta a prendere il colore del genitore. */
.profile-tabs li.active span[b-blq12np130] {
    color: inherit;
}

/* ============================================================
   6. Contenuto del tab
   ============================================================ */

.profile-content-card[b-blq12np130] {
    padding: 24px;
}

.tab-content-section[b-blq12np130] {
    display: flex;
    flex-direction: column;
    gap: var(--lp-space-4, 1.5rem);
}

.section-header[b-blq12np130] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.section-header h3[b-blq12np130] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-family: var(--lp-font-display, 'Space Grotesk', system-ui, sans-serif);
    font-size: var(--lp-text-lg, 1.125rem);
    font-weight: 700;
}

.section-header p[b-blq12np130] {
    margin: 0;
    font-size: var(--lp-text-sm, 0.875rem);
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
}

.btn-edit[b-blq12np130] {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    color: var(--lp-text, #faf7f0);
}

.btn-edit:hover[b-blq12np130] {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--lp-border-strong, rgba(255, 255, 255, 0.2));
}

/* ============================================================
   7. Form
   ============================================================ */

.profile-form[b-blq12np130] {
    display: flex;
    flex-direction: column;
    gap: var(--lp-space-3, 1rem);
}

.form-row[b-blq12np130] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lp-space-3, 1rem);
}

@media (max-width: 640px) {
    .form-row[b-blq12np130] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.form-group[b-blq12np130] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.form-label[b-blq12np130] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--lp-text-sm, 0.875rem);
    font-weight: 600;
    color: var(--lp-text, #faf7f0);
}

.form-label i[b-blq12np130] {
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
}

.form-input[b-blq12np130],
.form-textarea[b-blq12np130],
.form-select-mini[b-blq12np130] {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--lp-radius-sm, 8px);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    color: var(--lp-text, #faf7f0);
    font: inherit;
    font-size: var(--lp-text-sm, 0.875rem);
    transition: border-color var(--lp-motion-fast, 160ms) var(--lp-ease-out, cubic-bezier(.22, 1, .36, 1));
}

.form-textarea[b-blq12np130] {
    resize: vertical;
    min-height: 96px;
    line-height: var(--lp-leading-body, 1.6);
}

.form-select-mini[b-blq12np130] {
    width: auto;
    min-width: 140px;
    flex-shrink: 0;
    cursor: pointer;
}

.form-input[b-blq12np130]::placeholder,
.form-textarea[b-blq12np130]::placeholder {
    color: var(--lp-faint, rgba(250, 247, 240, 0.45));
}

.form-input:focus[b-blq12np130],
.form-textarea:focus[b-blq12np130],
.form-select-mini:focus[b-blq12np130] {
    outline: none;
    border-color: var(--lp-accent-warm, #e87c2a);
}

.form-input:focus-visible[b-blq12np130],
.form-textarea:focus-visible[b-blq12np130],
.form-select-mini:focus-visible[b-blq12np130] {
    outline: 2px solid var(--lp-accent-warm, #e87c2a);
    outline-offset: 1px;
}

/* .readonly e' applicata anche ai campi disabled: stesso trattamento. */
.form-input.readonly[b-blq12np130],
.form-textarea.readonly[b-blq12np130],
.form-input:disabled[b-blq12np130],
.form-textarea:disabled[b-blq12np130] {
    background: rgba(255, 255, 255, 0.02);
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
    cursor: default;
}

.input-with-badge[b-blq12np130] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.input-with-badge .form-input[b-blq12np130] {
    flex: 1;
    min-width: 0;
}

.verified-badge[b-blq12np130] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: var(--lp-radius-pill, 999px);
    background: rgba(47, 191, 113, 0.14);
    border: 1px solid rgba(47, 191, 113, 0.32);
    color: var(--lp-accent-success, #2fbf71);
    font-size: var(--lp-text-xs, 0.75rem);
    font-weight: 600;
    white-space: nowrap;
}

.form-hint[b-blq12np130] {
    font-size: var(--lp-text-xs, 0.75rem);
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
}

.form-hint-row[b-blq12np130] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.char-count[b-blq12np130] {
    flex-shrink: 0;
    font-size: var(--lp-text-xs, 0.75rem);
    color: var(--lp-faint, rgba(250, 247, 240, 0.45));
    font-variant-numeric: tabular-nums;
}

.validation-error[b-blq12np130] {
    font-size: var(--lp-text-xs, 0.75rem);
    color: var(--lp-accent-danger, #e5484d);
}

.form-actions[b-blq12np130] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 6px;
    flex-wrap: wrap;
}

/* ============================================================
   8. Sicurezza
   ============================================================ */

.security-card[b-blq12np130] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    flex-wrap: wrap;
}

.security-icon[b-blq12np130] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(232, 124, 42, 0.14);
    color: var(--lp-accent-warm, #e87c2a);
}

.security-icon.info[b-blq12np130] {
    background: rgba(59, 169, 201, 0.14);
    color: var(--lp-accent, #3ba9c9);
}

.security-info[b-blq12np130] {
    flex: 1;
    min-width: 180px;
}

.security-info h4[b-blq12np130] {
    margin: 0 0 2px;
    font-size: var(--lp-text-sm, 0.875rem);
    font-weight: 700;
}

.security-info p[b-blq12np130] {
    margin: 0;
    font-size: var(--lp-text-xs, 0.75rem);
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
}

/* ============================================================
   9. Preferenze
   ============================================================ */

.preference-group[b-blq12np130] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preference-group h4[b-blq12np130] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: var(--lp-text-xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
}

.preference-item[b-blq12np130] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.pref-info[b-blq12np130] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 180px;
}

.pref-desc[b-blq12np130] {
    font-size: var(--lp-text-xs, 0.75rem);
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
}

/* ============================================================
   10. Billing e referral
   ============================================================ */

.wallet-card[b-blq12np130] {
    padding: 20px 22px;
}

.wallet-info[b-blq12np130] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wallet-label[b-blq12np130] {
    font-size: var(--lp-text-xs, 0.75rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
}

.wallet-amount[b-blq12np130] {
    font-family: var(--lp-font-display, 'Space Grotesk', system-ui, sans-serif);
    font-size: var(--lp-text-2xl, 1.75rem);
    font-weight: 700;
    color: var(--lp-text, #faf7f0);
    font-variant-numeric: tabular-nums;
}

.transactions-section[b-blq12np130] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.transactions-section h4[b-blq12np130] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--lp-text-sm, 0.875rem);
    font-weight: 700;
}

.billing-hint[b-blq12np130] {
    margin: 0;
    font-size: var(--lp-text-sm, 0.875rem);
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
}

.view-all-link[b-blq12np130] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    font-size: var(--lp-text-sm, 0.875rem);
    font-weight: 600;
    color: var(--lp-accent-warm, #e87c2a);
    text-decoration: none;
}

.view-all-link:hover[b-blq12np130] {
    text-decoration: underline;
}

.view-all-link:focus-visible[b-blq12np130] {
    outline: 2px solid var(--lp-accent-warm, #e87c2a);
    outline-offset: 2px;
}

/* Link di invito: e' un URL lungo, deve andare a capo senza sfondare. */
.referral-link[b-blq12np130] {
    overflow-wrap: anywhere;
}

/* Pulsante "Copia link": riusa l'aspetto di .view-all-link su un <button>. */
.copy-link-button[b-blq12np130] {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
}

/* ============================================================
   11. Spinner
   La forma di .spinner/.spinner-sm sta in bundle-admin-learning-v2.css e
   site-v31420b.css, nessuno dei due linkato da index.html: senza queste
   regole i due indicatori sono elementi vuoti e invisibili.
   liquid-dashboards-v500 li ricolora soltanto.
   ============================================================ */

.spinner[b-blq12np130],
.spinner-sm[b-blq12np130] {
    display: inline-block;
    flex-shrink: 0;
    border-radius: 50%;
    border-style: solid;
    border-color: rgba(250, 247, 240, 0.18);
    border-top-color: var(--lp-accent-warm, #e87c2a);
    animation: profile-spin-b-blq12np130 0.7s linear infinite;
}

.spinner[b-blq12np130] {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

.spinner-sm[b-blq12np130] {
    width: 14px;
    height: 14px;
    border-width: 2px;
    vertical-align: -2px;
}

@keyframes profile-spin-b-blq12np130 {
    to { transform: rotate(360deg); }
}

/* ============================================================
   12. Motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .avatar-upload-btn[b-blq12np130],
    .quick-nav-link[b-blq12np130],
    .profile-tabs li[b-blq12np130],
    .form-input[b-blq12np130],
    .form-textarea[b-blq12np130],
    .form-select-mini[b-blq12np130] {
        transition: none;
    }

    .avatar-upload-btn:hover[b-blq12np130] {
        transform: none;
    }

    /* lo spinner comunica attesa: rallentato, non fermato */
    .spinner[b-blq12np130],
    .spinner-sm[b-blq12np130] {
        animation-duration: 2s;
    }
}
/* /Pages/Account/Register.razor.rz.scp.css */
/* ============================================================
   Register — Liquid Glass v2 (scoped)
   Una sola card auth centrata: .auth-card è già vetro lg-3 via
   wwwroot/css/lg-surfaces.css (background, border, radius 26px,
   shadow-3). Qui: layout, campi SOLIDI, bottoni OAuth coerenti,
   role selector, strength indicator. Scala 8pt · --lg-ease.
   Nota: ::deep sugli elementi renderizzati da EditForm/InputText/
   ValidationMessage (componenti figli, niente attributo di scope
   sul root element). Checkbox/radio sono HTML puro: scope normale.
   ============================================================ */

/* ── Layout: una sola card, centrata in modo sicuro ───────── */
.auth-container[b-bmmoaq60tb] {
    min-height: calc(100vh - 140px);
    display: flex;
    padding: 48px 16px 64px;
}

/* margin:auto su figlio flex = centratura verticale senza
   clipping quando la card è più alta del viewport */
.auth-card[b-bmmoaq60tb] {
    width: 100%;
    max-width: 520px;
    margin: auto;
    overflow: hidden;
}

/* ── Header (logo dentro la card, come da mockup) ─────────── */
.auth-card-header[b-bmmoaq60tb] {
    padding: 32px 32px 0;
    text-align: center;
}

.auth-logo[b-bmmoaq60tb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #FAF7F0;
    text-decoration: none;
}

.auth-logo:hover[b-bmmoaq60tb] { color: #FAF7F0; }

.auth-logo-icon[b-bmmoaq60tb] {
    font-size: 28px;
    color: #F89B4D;
}

.auth-card-header h1[b-bmmoaq60tb] {
    margin: 16px 0 8px;
    font-size: 1.375rem; /* 22px */
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #FAF7F0;
}

.auth-subtitle[b-bmmoaq60tb] {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(250, 247, 240, 0.56);
}

/* ── Body: ritmo verticale uniforme 24px ──────────────────── */
.auth-card-body[b-bmmoaq60tb] {
    padding: 24px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Bottoni social OAuth: solidi, coerenti ───────────────── */
.social-login-buttons[b-bmmoaq60tb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.social-btn[b-bmmoaq60tb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 14px;
    background: #182230;
    border: 1px solid rgba(250, 247, 240, 0.09);
    color: #FAF7F0;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.social-btn:hover:not(:disabled)[b-bmmoaq60tb] {
    background: #1C2736;
    border-color: rgba(250, 247, 240, 0.16);
}

.social-btn:focus-visible[b-bmmoaq60tb] {
    outline: none;
    border-color: rgba(232, 124, 42, 0.55);
    box-shadow: 0 0 0 3px rgba(232, 124, 42, 0.15);
}

.social-btn:disabled[b-bmmoaq60tb] {
    opacity: 0.6;
    cursor: not-allowed;
}

.social-btn .social-icon[b-bmmoaq60tb] { flex: 0 0 auto; }

.github-btn i[b-bmmoaq60tb] { font-size: 1.1rem; }

/* ── Divider ──────────────────────────────────────────────── */
.auth-divider[b-bmmoaq60tb] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(250, 247, 240, 0.36);
}

.auth-divider[b-bmmoaq60tb]::before,
.auth-divider[b-bmmoaq60tb]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(250, 247, 240, 0.08);
}

/* ── Form arioso ──────────────────────────────────────────── */
.auth-card-body[b-bmmoaq60tb]  .auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group[b-bmmoaq60tb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-row[b-bmmoaq60tb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-label[b-bmmoaq60tb],
.auth-card label.form-label[b-bmmoaq60tb] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(250, 247, 240, 0.78);
}

.form-label i[b-bmmoaq60tb] {
    margin-right: 8px;
    color: rgba(250, 247, 240, 0.36);
}

/* Input: superficie SOLIDA (mai vetro dentro la card) */
.auth-card[b-bmmoaq60tb]  .form-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 13px 16px;
    border-radius: 14px;
    background: #182230;
    border: 1px solid rgba(250, 247, 240, 0.09);
    color: #FAF7F0;
    font-size: 0.95rem;
    transition: border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                box-shadow var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                background var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.auth-card[b-bmmoaq60tb]  .form-input:focus {
    background: #1C2736;
    border-color: rgba(232, 124, 42, 0.55);
    outline: none;
    box-shadow: 0 0 0 3px rgba(232, 124, 42, 0.15);
}

.auth-card[b-bmmoaq60tb]  .form-input::placeholder {
    color: rgba(250, 247, 240, 0.36);
}

/* Password: toggle ancorato dentro l'input */
.password-input-container[b-bmmoaq60tb] { position: relative; }

.password-input-container[b-bmmoaq60tb]  .form-input { padding-right: 48px; }

.password-toggle-btn[b-bmmoaq60tb] {
    position: absolute;
    top: 0;
    right: 4px;
    height: 100%;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: rgba(250, 247, 240, 0.56);
    cursor: pointer;
    transition: color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.password-toggle-btn:hover[b-bmmoaq60tb] { color: #FAF7F0; }

.password-toggle-btn:focus-visible[b-bmmoaq60tb] {
    outline: none;
    color: #FAF7F0;
    box-shadow: 0 0 0 2px rgba(232, 124, 42, 0.45);
}

/* Messaggi di validazione (ValidationMessage → ::deep) */
.auth-card[b-bmmoaq60tb]  .field-validation-error {
    margin: 0;
    font-size: 0.78rem;
    color: #ff9b8a;
}

/* ── Password Strength Indicator ──────────────────────────── */
.password-strength[b-bmmoaq60tb] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.strength-bars[b-bmmoaq60tb] {
    display: flex;
    gap: 4px;
    flex: 1;
}

.strength-bar[b-bmmoaq60tb] {
    height: 4px;
    flex: 1;
    background: rgba(250, 247, 240, 0.12);
    border-radius: 2px;
    transition: background var(--lg-base, 280ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.strength-bar.active.weak[b-bmmoaq60tb]   { background: #ef4444; }
.strength-bar.active.fair[b-bmmoaq60tb]   { background: #f59e0b; }
.strength-bar.active.good[b-bmmoaq60tb]   { background: #3b82f6; }
.strength-bar.active.strong[b-bmmoaq60tb] { background: #10b981; }

.strength-text[b-bmmoaq60tb] {
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 50px;
    text-align: right;
}

.strength-text.weak[b-bmmoaq60tb]   { color: #f87171; }
.strength-text.fair[b-bmmoaq60tb]   { color: #fbbf24; }
.strength-text.good[b-bmmoaq60tb]   { color: #60a5fa; }
.strength-text.strong[b-bmmoaq60tb] { color: #34d399; }

/* Password match / mismatch */
.password-match[b-bmmoaq60tb],
.password-mismatch[b-bmmoaq60tb] {
    margin-top: 4px;
    font-size: 0.8125rem;
}

.password-match[b-bmmoaq60tb]    { color: #4ade80; }
.password-mismatch[b-bmmoaq60tb] { color: #f87171; }

/* ── Role Selector: card solide, accento brand arancio ────── */
.role-selector[b-bmmoaq60tb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.role-option[b-bmmoaq60tb] {
    position: relative;
    cursor: pointer;
}

.role-option input[type="radio"][b-bmmoaq60tb] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.role-content[b-bmmoaq60tb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: #182230;
    border: 1px solid rgba(250, 247, 240, 0.09);
    border-radius: 14px;
    transition: background var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                box-shadow var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.role-option:hover .role-content[b-bmmoaq60tb] {
    border-color: rgba(232, 124, 42, 0.4);
    background: #1C2736;
}

.role-option.selected .role-content[b-bmmoaq60tb] {
    border-color: rgba(232, 124, 42, 0.65);
    background: rgba(232, 124, 42, 0.10);
    box-shadow: 0 0 0 3px rgba(232, 124, 42, 0.15);
}

/* Focus da tastiera sul radio nascosto */
.role-option input[type="radio"]:focus-visible + .role-content[b-bmmoaq60tb] {
    border-color: rgba(232, 124, 42, 0.55);
    box-shadow: 0 0 0 3px rgba(232, 124, 42, 0.15);
}

.role-content i[b-bmmoaq60tb] {
    font-size: 1.5rem;
    color: rgba(250, 247, 240, 0.56);
    transition: color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.role-option.selected .role-content i[b-bmmoaq60tb] { color: #F89B4D; }

.role-title[b-bmmoaq60tb] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #FAF7F0;
}

.role-desc[b-bmmoaq60tb] {
    font-size: 0.75rem;
    color: rgba(250, 247, 240, 0.56);
    text-align: center;
}

/* ── Terms & Conditions ───────────────────────────────────── */
.form-check-container[b-bmmoaq60tb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-check-label[b-bmmoaq60tb] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}

.form-check-label .checkmark[b-bmmoaq60tb] { display: none; }

.form-check-input[b-bmmoaq60tb] {
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: #E87C2A;
    cursor: pointer;
}

.terms-text[b-bmmoaq60tb] {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(250, 247, 240, 0.56);
}

.terms-text a[b-bmmoaq60tb] {
    color: #F89B4D;
    font-weight: 500;
    text-decoration: none;
}

.terms-text a:hover[b-bmmoaq60tb] { text-decoration: underline; }

/* ── CTA submit: gradient brand arancio, pill full-width ──── */
.auth-submit-btn[b-bmmoaq60tb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 15px 16px;
    border: none;
    border-radius: var(--lg-r-pill, 999px);
    background: linear-gradient(135deg, #E87C2A 0%, #F89B4D 100%);
    color: #1A0F06;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(232, 124, 42, 0.35);
    transition: transform var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                filter var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                box-shadow var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.auth-submit-btn:hover:not(:disabled)[b-bmmoaq60tb] {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.auth-submit-btn:focus-visible[b-bmmoaq60tb] {
    outline: none;
    box-shadow: 0 8px 24px rgba(232, 124, 42, 0.35),
                0 0 0 3px rgba(232, 124, 42, 0.45);
}

.auth-submit-btn:disabled[b-bmmoaq60tb],
.auth-submit-btn.loading[b-bmmoaq60tb] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Spinner del submit: scuro su gradient arancio (contrasto) */
.auth-submit-btn .spinner[b-bmmoaq60tb] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(26, 15, 6, 0.35);
    border-top-color: #1A0F06;
    border-radius: 50%;
    animation: auth-spin-b-bmmoaq60tb 0.7s linear infinite;
    flex: 0 0 auto;
}

/* Banner errore */
.error-message[b-bmmoaq60tb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 90, 70, 0.12);
    border: 1px solid rgba(255, 90, 70, 0.35);
    color: #ffb4a8;
    font-size: 0.85rem;
}

/* ── Link footer ──────────────────────────────────────────── */
.auth-signup[b-bmmoaq60tb] {
    margin: 0;
    text-align: center;
}

.auth-signup p[b-bmmoaq60tb] {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(250, 247, 240, 0.56);
}

.auth-link[b-bmmoaq60tb],
.auth-link-primary[b-bmmoaq60tb],
.auth-card a:not(.social-btn):not(.auth-logo)[b-bmmoaq60tb] {
    color: #F89B4D;
    font-weight: 500;
    text-decoration: none;
}

.auth-link-primary[b-bmmoaq60tb] { font-weight: 700; }

.auth-link:hover[b-bmmoaq60tb],
.auth-link-primary:hover[b-bmmoaq60tb],
.auth-card a:not(.social-btn):not(.auth-logo):hover[b-bmmoaq60tb] {
    color: #ffb874;
    text-decoration: underline;
}

/* ── Enterprise SSO (B2B): link discreto sotto il form ────── */
.enterprise-sso-section[b-bmmoaq60tb] {
    padding-top: 16px;
    border-top: 1px solid rgba(250, 247, 240, 0.08);
    text-align: center;
}

.enterprise-sso-link[b-bmmoaq60tb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: 10px;
    color: rgba(250, 247, 240, 0.56);
    font-size: 0.85rem;
    cursor: pointer;
    transition: color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                background var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.enterprise-sso-link:hover:not(:disabled)[b-bmmoaq60tb] {
    color: #F89B4D;
    background: rgba(232, 124, 42, 0.08);
}

.enterprise-sso-link:focus-visible[b-bmmoaq60tb] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(232, 124, 42, 0.15);
}

.enterprise-sso-link:disabled[b-bmmoaq60tb] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Spinner SSO (su superficie scura) */
.sso-spinner[b-bmmoaq60tb] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-spin-b-bmmoaq60tb 0.7s linear infinite;
    flex: 0 0 auto;
}

@keyframes auth-spin-b-bmmoaq60tb { to { transform: rotate(360deg); } }

/* ── Responsive ≤768px / ≤480px ───────────────────────────── */
@media (max-width: 768px) {
    .auth-container[b-bmmoaq60tb] {
        min-height: calc(100vh - 120px);
        padding: 32px 16px 48px;
    }

    .form-row[b-bmmoaq60tb] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .role-content[b-bmmoaq60tb] { padding: 12px; }
    .role-content i[b-bmmoaq60tb] { font-size: 1.25rem; }
    .role-title[b-bmmoaq60tb] { font-size: 0.85rem; }
    .role-desc[b-bmmoaq60tb] { display: none; }
}

@media (max-width: 480px) {
    .auth-container[b-bmmoaq60tb] { padding: 24px 12px 48px; }
    .auth-card-header[b-bmmoaq60tb] { padding: 24px 24px 0; }
    .auth-card-body[b-bmmoaq60tb] { padding: 20px 24px 24px; gap: 20px; }

    .strength-text[b-bmmoaq60tb] { display: none; }
}

/* ── Mobile: tocco e leggibilita' (misurato 2026-08-18 a 390x844) ─────────
   Tre difetti veri, non estetici:
   1. i campi erano a 15,2px e Safari iOS ingrandisce la pagina al focus di
      ogni input sotto i 16px — l'utente si ritrova la form fuori schermo;
   2. la spunta dei termini era 14-16px: il controllo che sblocca la
      registrazione era il bersaglio piu' piccolo della pagina;
   3. i link legali e il mostra-password stavano fra i 16 e i 20px di altezza,
      sotto il minimo di tocco che PRODUCT.md dichiara come requisito.
   L'aspetto non cambia: cresce l'area, non il disegno. */
@media (max-width: 768px) {
    .auth-card[b-bmmoaq60tb]  .form-input,
    .auth-card[b-bmmoaq60tb]  input,
    .auth-card[b-bmmoaq60tb]  select,
    .auth-card[b-bmmoaq60tb]  textarea {
        font-size: 16px;
    }

    .auth-card[b-bmmoaq60tb]  .form-check-input {
        width: 24px;
        height: 24px;
        min-width: 24px;
        flex-shrink: 0;
    }

    .auth-card[b-bmmoaq60tb]  .form-check-label,
    .auth-card[b-bmmoaq60tb]  .auth-checkbox-row {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .password-toggle-btn[b-bmmoaq60tb] {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    /* padding per il dito, margine negativo perche' il ritmo verticale
       resti quello disegnato */
    .auth-link[b-bmmoaq60tb],
    .auth-link-primary[b-bmmoaq60tb] {
        display: inline-block;
        padding-block: 12px;
        margin-block: -12px;
    }
}
/* /Pages/Account/ResendVerification.razor.rz.scp.css */
/* ============================================================
   ResendVerification — Liquid Glass v2 (scoped)
   Stessa struttura di Login.razor.css: .auth-card e' gia' vetro lg-3 via
   wwwroot/css/lg-surfaces.css (background, border, radius 26px, shadow-3).
   Il file originale era un tema chiaro completo (card bianca, testo grigio
   scuro): qui riconvertito sui token reali di DESIGN.md (--lp-text,
   --lp-muted, --lp-accent, --lp-accent-text, --lp-accent-danger,
   --lp-accent-success), non piu' sulla famiglia --il-* morta rimossa con
   bundle-design-system-v337.css.
   Nota: ::deep sugli elementi renderizzati da InputText/ValidationMessage
   (componenti figli, niente attributo di scope sul root element).
   ============================================================ */

.auth-container[b-a7zdwbatt3] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 140px);
    padding: 48px 16px 64px;
}

.auth-card[b-a7zdwbatt3] {
    max-width: 480px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.rv-accent[b-a7zdwbatt3] {
    height: 4px;
    background: linear-gradient(90deg, var(--lp-accent, #6C3CE1), #a78bfa);
}

.rv-header[b-a7zdwbatt3] {
    padding: 3rem 2rem 1.5rem;
    text-align: center;
}

.rv-icon-circle[b-a7zdwbatt3] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(108, 60, 225, 0.18);
    border: 1px solid rgba(108, 60, 225, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.rv-icon-circle i[b-a7zdwbatt3] {
    font-size: 1.75rem;
    color: var(--lp-text, #f6f8ff);
}

.rv-title[b-a7zdwbatt3] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lp-text, #f6f8ff);
    margin-bottom: 0.5rem;
}

.rv-subtitle[b-a7zdwbatt3] {
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.rv-form[b-a7zdwbatt3] {
    padding: 0 2rem;
}

.rv-form-group[b-a7zdwbatt3] {
    margin-bottom: 1.25rem;
}

.rv-label[b-a7zdwbatt3] {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
    margin-bottom: 0.5rem;
}

.auth-card[b-a7zdwbatt3]  .rv-input {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1rem;
    background: #182230;
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    border-radius: 14px;
    font-size: 0.95rem;
    color: var(--lp-text, #f6f8ff);
    transition: border-color 160ms var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                box-shadow 160ms var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                background 160ms var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
    box-sizing: border-box;
}

.auth-card[b-a7zdwbatt3]  .rv-input::placeholder {
    color: rgba(246, 248, 255, 0.38);
}

.auth-card[b-a7zdwbatt3]  .rv-input:focus {
    outline: none;
    background: #1c2736;
    border-color: var(--lp-accent, #6C3CE1);
    box-shadow: 0 0 0 3px rgba(108, 60, 225, 0.35);
}

.auth-card[b-a7zdwbatt3]  .rv-input:disabled {
    background: rgba(255, 255, 255, 0.03);
    cursor: not-allowed;
}

.auth-card[b-a7zdwbatt3]  .rv-validation {
    display: block;
    color: var(--lp-accent-danger, #f87171);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.rv-actions[b-a7zdwbatt3] {
    padding: 0.5rem 0 1.5rem;
}

.rv-btn-primary[b-a7zdwbatt3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 2rem;
    background: var(--lp-accent, #6C3CE1);
    color: var(--lp-on-accent, #ffffff);
    border: none;
    border-radius: var(--lg-r-pill, 999px);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: filter 160ms var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                transform 160ms var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.rv-btn-primary:hover:not(:disabled)[b-a7zdwbatt3] {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.rv-btn-primary:focus-visible[b-a7zdwbatt3] {
    outline: none;
    box-shadow: 0 0 0 2px var(--lp-bg, #06090D), 0 0 0 4px var(--lp-accent-2, #00d4ff);
}

.rv-btn-primary:disabled[b-a7zdwbatt3] {
    opacity: 0.7;
    cursor: not-allowed;
}

.rv-btn-link[b-a7zdwbatt3] {
    display: inline-flex;
}

.rv-btn-loading[b-a7zdwbatt3] {
    opacity: 0.7;
}

.rv-btn-icon[b-a7zdwbatt3] {
    font-size: 0.9em;
}

.rv-footer[b-a7zdwbatt3] {
    padding: 1rem 2rem 2rem;
    text-align: center;
}

.rv-back-link[b-a7zdwbatt3] {
    color: var(--lp-accent-text, #8660e1);
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 160ms var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.rv-back-link:hover[b-a7zdwbatt3] {
    color: var(--lp-text, #f6f8ff);
}

.rv-link-icon[b-a7zdwbatt3] {
    font-size: 0.8em;
}

.rv-success[b-a7zdwbatt3] {
    padding: 1rem 2rem 2.5rem;
    text-align: center;
}

.rv-success-icon[b-a7zdwbatt3] {
    margin-bottom: 1rem;
}

.rv-success-icon i[b-a7zdwbatt3] {
    font-size: 3rem;
    color: var(--lp-accent-success, #34d399);
}

.rv-success h2[b-a7zdwbatt3] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lp-text, #f6f8ff);
    margin-bottom: 0.75rem;
}

.rv-success p[b-a7zdwbatt3] {
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

@media (max-width: 480px) {
    .auth-container[b-a7zdwbatt3] {
        padding: 24px 12px 48px;
    }

    .rv-header[b-a7zdwbatt3] {
        padding: 2rem 1.5rem 1rem;
    }

    .rv-form[b-a7zdwbatt3],
    .rv-footer[b-a7zdwbatt3] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ── Mobile: campi a 16px cosi' Safari iOS non forza lo zoom al focus
   (stesso vincolo documentato in Login.razor.css). ───────────────── */
@media (max-width: 768px) {
    .auth-card[b-a7zdwbatt3]  .rv-input {
        font-size: 16px;
    }
}
/* /Pages/Account/ResetPassword.razor.rz.scp.css */
/* ============================================================
   ResetPassword — Liquid Glass v2 (scoped)
   Same auth flow as Login/Register: .auth-card is already lg-3 glass
   via wwwroot/css/lg-surfaces.css (background, border, radius 26px,
   shadow-3). Here: layout, alert states, solid controls. Palette and
   structure copied from Login.razor.css/Register.razor.css (the
   corrected reference for this flow) rather than the retired --il-*
   tokens. Scale 8pt · --lg-ease.
   Nota: ::deep sugli elementi renderizzati da EditForm/InputText/
   ValidationMessage (componenti figli, niente attributo di scope
   sul root element).
   ============================================================ */

/* ── Layout: una sola card, centrata in modo sicuro ───────── */
.auth-container[b-khdm3con8g] {
    min-height: calc(100vh - 140px);
    display: flex;
    padding: 48px 16px 64px;
}

.auth-card[b-khdm3con8g] {
    width: 100%;
    max-width: 450px;
    margin: auto;
    padding: 32px;
    position: relative;
    overflow: hidden;
}

/* Barra d'accento: viola d'azione pieno, mai ambra ne' gradiente
   (DESIGN.md, La Regola dei Due Registri). */
.rp-accent[b-khdm3con8g] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--lp-accent, #6C3CE1);
}

/* ── Header ───────────────────────────────────────────────── */
.rp-header[b-khdm3con8g] {
    text-align: center;
    margin-bottom: 24px;
}

.rp-icon-circle[b-khdm3con8g] {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lp-accent, #6C3CE1);
    color: var(--lp-on-accent, #ffffff);
    font-size: 32px;
}

.rp-title[b-khdm3con8g] {
    margin: 0 0 8px;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #FAF7F0;
}

.rp-subtitle[b-khdm3con8g] {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(250, 247, 240, 0.56);
}

/* ── Inline error banner (invalid form submit) ───────────── */
.rp-inline-error[b-khdm3con8g] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 90, 70, 0.12);
    border: 1px solid rgba(255, 90, 70, 0.35);
    color: #ffb4a8;
    font-size: 0.875rem;
}

.rp-inline-error-icon[b-khdm3con8g] {
    flex-shrink: 0;
}

/* ── Form ─────────────────────────────────────────────────── */
.rp-form-group[b-khdm3con8g] {
    margin-bottom: 16px;
}

.rp-label[b-khdm3con8g] {
    display: block;
    margin-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(250, 247, 240, 0.78);
}

/* Input: superficie SOLIDA (mai vetro dentro la card). Copre sia il campo
   email nativo (disabled, plain <input>) sia i campi renderizzati da
   InputText (child component -> serve ::deep). */
.auth-card .rp-input[b-khdm3con8g],
.auth-card[b-khdm3con8g]  .rp-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 13px 16px;
    border-radius: 14px;
    background: #182230;
    border: 1px solid rgba(250, 247, 240, 0.09);
    color: #FAF7F0;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                box-shadow var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                background var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.auth-card .rp-input:focus[b-khdm3con8g],
.auth-card[b-khdm3con8g]  .rp-input:focus {
    background: #1C2736;
    border-color: var(--lp-accent, #6C3CE1);
    outline: none;
    box-shadow: 0 0 0 3px var(--lp-glow, rgba(108, 60, 225, 0.34));
}

.auth-card .rp-input[b-khdm3con8g]::placeholder,
.auth-card[b-khdm3con8g]  .rp-input::placeholder {
    color: rgba(250, 247, 240, 0.36);
}

.rp-input-disabled[b-khdm3con8g] {
    background: #141b26;
    color: rgba(250, 247, 240, 0.56);
}

.auth-card[b-khdm3con8g]  .rp-validation {
    display: block;
    margin-top: 6px;
    font-size: 0.8125rem;
    color: #ff9b8a;
}

.rp-hint[b-khdm3con8g] {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: rgba(250, 247, 240, 0.36);
}

/* ── Actions ──────────────────────────────────────────────── */
.rp-actions[b-khdm3con8g] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

/* CTA: viola d'azione pieno, pillola, inchiostro bianco (La Regola dei
   Due Registri / dell'Inchiostro Misurato, DESIGN.md riga 227-229: "un
   pulsante non e' mai ambra"). Niente gradiente, nessun alone a riposo. */
.rp-btn-primary[b-khdm3con8g] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 14px 24px;
    border: none;
    border-radius: var(--lg-r-pill, 999px);
    background: var(--lp-accent, #6C3CE1);
    color: var(--lp-on-accent, #ffffff);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                filter var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.rp-btn-primary:hover:not(:disabled)[b-khdm3con8g] {
    transform: translateY(-1px);
    filter: brightness(1.08);
    color: var(--lp-on-accent, #ffffff);
}

/* Anello di focus ciano sui pulsanti (DESIGN.md Don't: "contorno ciano 2px
   sui pulsanti"), stesso doppio-anello di sc-btn-primary/ev-btn-primary. */
.rp-btn-primary:focus-visible[b-khdm3con8g] {
    outline: none;
    box-shadow: 0 0 0 2px var(--lp-bg, #06090D), 0 0 0 4px var(--lp-accent-2, #00d4ff);
}

.rp-btn-primary:disabled[b-khdm3con8g] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.rp-btn-ghost[b-khdm3con8g] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 14px 24px;
    background: transparent;
    color: rgba(250, 247, 240, 0.56);
    border: 1px solid rgba(250, 247, 240, 0.14);
    border-radius: var(--lg-r-pill, 999px);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.rp-btn-ghost:hover[b-khdm3con8g] {
    background: rgba(250, 247, 240, 0.06);
    border-color: rgba(250, 247, 240, 0.24);
    color: #FAF7F0;
}

.rp-btn-ghost:focus-visible[b-khdm3con8g] {
    outline: none;
    box-shadow: 0 0 0 2px var(--lp-bg, #06090D), 0 0 0 4px var(--lp-accent-2, #00d4ff);
}

.rp-btn-icon[b-khdm3con8g] {
    font-size: 0.875rem;
}

.rp-btn-loading[b-khdm3con8g] {
    opacity: 0.7;
}

/* ── Footer ───────────────────────────────────────────────── */
.rp-footer[b-khdm3con8g] {
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(250, 247, 240, 0.08);
}

.rp-back-link[b-khdm3con8g] {
    color: #F89B4D;
    text-decoration: none;
    font-weight: 500;
}

.rp-back-link:hover[b-khdm3con8g] {
    color: #ffb874;
    text-decoration: underline;
}

.rp-link-icon[b-khdm3con8g] {
    margin-right: 8px;
}

/* ── Alerts (invalid link / success) ─────────────────────── */
.rp-alert-success[b-khdm3con8g],
.rp-alert-danger[b-khdm3con8g] {
    padding: 16px;
    border-radius: 14px;
}

.rp-alert-success[b-khdm3con8g] {
    background: rgba(65, 217, 140, 0.12);
    border: 1px solid rgba(65, 217, 140, 0.35);
}

.rp-alert-danger[b-khdm3con8g] {
    background: rgba(255, 90, 70, 0.12);
    border: 1px solid rgba(255, 90, 70, 0.35);
}

.rp-alert-title[b-khdm3con8g] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1rem;
}

.rp-alert-success .rp-alert-title[b-khdm3con8g] {
    color: #4ade80;
}

.rp-alert-danger .rp-alert-title[b-khdm3con8g] {
    color: #ffb4a8;
}

.rp-alert-icon[b-khdm3con8g] {
    font-size: 1.25rem;
}

.rp-alert-text[b-khdm3con8g] {
    margin: 8px 0 0;
    font-size: 0.9375rem;
}

.rp-alert-success .rp-alert-text[b-khdm3con8g] {
    color: rgba(250, 247, 240, 0.78);
}

.rp-alert-danger .rp-alert-text[b-khdm3con8g] {
    color: rgba(250, 247, 240, 0.78);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 480px) {
    .auth-container[b-khdm3con8g] { padding: 24px 12px 48px; }
    .auth-card[b-khdm3con8g] { padding: 24px; }
}

/* ── Mobile: tocco e leggibilita' (stesso fix di Login/Register,
   misurato 2026-08-18 a 390x844 — campi sotto 16px fanno zoomare
   Safari iOS al focus). L'aspetto non cambia: cresce l'area, non
   il disegno. */
@media (max-width: 768px) {
    .auth-card .rp-input[b-khdm3con8g],
    .auth-card[b-khdm3con8g]  .rp-input {
        font-size: 16px;
    }
}
/* /Pages/Account/Settings.razor.rz.scp.css */
/*
    Settings.razor.css — stile della pagina /settings.

    La pagina nasceva su Bootstrap puro senza alcun adattamento al tema:
    i tab .nav-tabs apparivano bianchi/blu sul vetro scuro, gli spinner
    .spinner-border erano invisibili (definiti solo in bundle non caricati)
    e la Danger Zone usava il rosso grezzo di Bootstrap. Questo foglio
    porta la superficie sul tema scuro in entrambi i design system.
*/

.settings-page[b-uh9uhokomo] {
    color: var(--lp-color-text, #eef3ff);
}

.settings-title[b-uh9uhokomo] {
    margin-bottom: 1.5rem;
    color: var(--lp-color-text, #eef3ff);
}

/* ============================================================
   Tab (nav-tabs Bootstrap → tema scuro)
   ============================================================ */

.settings-page .nav-tabs.settings-tabs[b-uh9uhokomo] {
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.18));
    flex-wrap: wrap;
}

.settings-page .nav-tabs .nav-link[b-uh9uhokomo] {
    padding: 0.6rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px 10px 0 0;
    background: transparent;
    color: var(--lp-color-text-muted, #8a97b5);
    font-weight: 600;
    font-size: 0.9375rem;
}

.settings-page .nav-tabs .nav-link i[b-uh9uhokomo] {
    margin-right: 0.4rem;
}

.settings-page .nav-tabs .nav-link:hover[b-uh9uhokomo] {
    color: var(--lp-color-text, #eef3ff);
    background: rgba(255, 255, 255, 0.05);
    border-color: transparent;
}

.settings-page .nav-tabs .nav-link:focus-visible[b-uh9uhokomo] {
    outline: 2px solid var(--lg-focus, #ffb27f);
    outline-offset: 2px;
}

.settings-page .nav-tabs .nav-link.active[b-uh9uhokomo] {
    color: var(--lp-color-text, #eef3ff);
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--lp-color-border, rgba(126, 138, 166, 0.18));
    border-bottom-color: transparent;
}

/* ============================================================
   Card e testo
   Le superfici arrivano da liquid-dark-bridge (legacy) e lg-surfaces
   (lg): qui si governano solo header, testi e bordi.
   ============================================================ */

.settings-page .card-header[b-uh9uhokomo] {
    border-bottom: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.18));
    background: rgba(255, 255, 255, 0.03);
}

.settings-page .card-header h2[b-uh9uhokomo] {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--lp-color-text, #eef3ff);
}

.settings-page .card-body h3[b-uh9uhokomo] {
    font-size: 1rem;
    color: var(--lp-color-text, #eef3ff);
}

.settings-page .form-label[b-uh9uhokomo] {
    color: var(--lp-color-text, #eef3ff);
    font-weight: 600;
    font-size: 0.875rem;
}

.settings-page .form-text[b-uh9uhokomo] {
    color: var(--lp-color-text-muted, #8a97b5);
}

.settings-muted[b-uh9uhokomo] {
    display: block;
    color: var(--lp-color-text-muted, #8a97b5);
    line-height: 1.55;
}

.settings-check-desc[b-uh9uhokomo] {
    font-size: 0.875rem;
    font-weight: 400;
}

.settings-page .form-check-label strong[b-uh9uhokomo] {
    color: var(--lp-color-text, #eef3ff);
}

.settings-page .form-check-input[b-uh9uhokomo] {
    accent-color: var(--lp-color-accent, #e87c2a);
    background-color: rgba(255, 255, 255, 0.06);
    border-color: var(--lp-color-border, rgba(126, 138, 166, 0.35));
}

.settings-page .form-check-input:checked[b-uh9uhokomo] {
    background-color: var(--lp-color-accent, #e87c2a);
    border-color: var(--lp-color-accent, #e87c2a);
}

.settings-page .form-check-input:focus-visible[b-uh9uhokomo] {
    outline: 2px solid var(--lg-focus, #ffb27f);
    outline-offset: 2px;
}

.settings-link[b-uh9uhokomo] {
    color: var(--lp-color-accent, #e87c2a);
    font-weight: 600;
}

.settings-link:hover[b-uh9uhokomo] {
    text-decoration: underline;
}

/* ============================================================
   Zona pericolosa
   ============================================================ */

.settings-page .settings-danger-card[b-uh9uhokomo] {
    border-color: rgba(239, 68, 68, 0.4);
}

.settings-page .settings-danger-header[b-uh9uhokomo] {
    background: rgba(239, 68, 68, 0.12);
}

.settings-page .settings-danger-header h2[b-uh9uhokomo] {
    color: #fca5a5;
}

.settings-danger-text[b-uh9uhokomo] {
    color: #fca5a5;
}

/* ============================================================
   Liste preferenze AI
   ============================================================ */

.settings-ai-list[b-uh9uhokomo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.settings-ai-row[b-uh9uhokomo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.18));
    border-radius: 10px;
    color: var(--lp-color-text, #eef3ff);
    cursor: pointer;
}

.settings-ai-row:hover[b-uh9uhokomo] {
    background: rgba(255, 255, 255, 0.03);
}

/* ============================================================
   Azioni e avvisi
   ============================================================ */

.settings-actions[b-uh9uhokomo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.settings-page .alert-success[b-uh9uhokomo] {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #86efac;
}

.settings-page .alert-danger[b-uh9uhokomo] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.settings-page .validation-message[b-uh9uhokomo] {
    color: #fca5a5;
    font-size: 0.8125rem;
}

/* ============================================================
   Spinner
   .spinner-border/.spinner-border-sm esistono solo in bundle non
   caricati da index.html: senza queste regole sono elementi vuoti.
   ============================================================ */

.settings-page .spinner-border[b-uh9uhokomo],
.settings-page .spinner-border-sm[b-uh9uhokomo] {
    display: inline-block;
    vertical-align: -0.125em;
    border-radius: 50%;
    border-style: solid;
    border-color: rgba(238, 243, 255, 0.2);
    border-top-color: var(--lp-color-accent, #e87c2a);
    animation: settings-spin-b-uh9uhokomo 0.7s linear infinite;
}

.settings-page .spinner-border[b-uh9uhokomo] {
    width: 2rem;
    height: 2rem;
    border-width: 0.2em;
}

.settings-page .spinner-border-sm[b-uh9uhokomo] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

@keyframes settings-spin-b-uh9uhokomo {
    to { transform: rotate(360deg); }
}

/* ============================================================
   Modale
   La superficie arriva da dark-bridge/lg-surfaces; qui la croce di
   chiusura (pensata per temi chiari) e il testo.
   ============================================================ */

.settings-page .btn-close[b-uh9uhokomo] {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.settings-page .modal-body[b-uh9uhokomo],
.settings-page .modal-footer[b-uh9uhokomo] {
    color: var(--lp-color-text, #eef3ff);
}

/* ============================================================
   Mobile
   I cinque tab non devono comprimersi in una riga né sovrapporsi ai
   contenuti. Le azioni principali diventano larghe e facilmente toccabili.
   ============================================================ */

@media (max-width: 767px) {
    .settings-page[b-uh9uhokomo] {
        width: 100%;
        padding-inline: 1rem;
        padding-top: 5.25rem !important;
    }

    .settings-title[b-uh9uhokomo] {
        margin-bottom: 1rem;
        font-size: clamp(1.65rem, 8vw, 2rem);
    }

    .settings-page .nav-tabs.settings-tabs[b-uh9uhokomo] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        margin-bottom: 1rem;
        border: 0;
    }

    .settings-page .settings-tabs .nav-item[b-uh9uhokomo],
    .settings-page .settings-tabs .nav-link[b-uh9uhokomo] {
        width: 100%;
        min-width: 0;
    }

    .settings-page .nav-tabs .nav-link[b-uh9uhokomo] {
        min-height: 48px;
        padding: 0.65rem 0.75rem;
        justify-content: center;
        border: 1px solid var(--lp-color-border, rgba(126, 138, 166, 0.18));
        border-radius: 12px;
        line-height: 1.2;
    }

    .settings-page .nav-tabs .nav-link.active[b-uh9uhokomo] {
        border-color: var(--lp-color-accent, #7c5cff);
        background: rgba(124, 92, 255, 0.14);
    }

    .settings-page .card-header[b-uh9uhokomo],
    .settings-page .card-body[b-uh9uhokomo] {
        padding: 1rem;
    }

    .settings-page .card-body > form > .btn[b-uh9uhokomo],
    .settings-page .settings-actions[b-uh9uhokomo],
    .settings-page .settings-actions .btn[b-uh9uhokomo] {
        width: 100%;
    }

    .settings-ai-row[b-uh9uhokomo] {
        min-height: 56px;
        padding-inline: 0.75rem;
    }
}

/* ============================================================
   Motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .settings-page .nav-tabs .nav-link[b-uh9uhokomo],
    .settings-ai-row[b-uh9uhokomo] {
        transition: none;
    }

    .settings-page .spinner-border[b-uh9uhokomo],
    .settings-page .spinner-border-sm[b-uh9uhokomo] {
        animation-duration: 2s;
    }
}
/* /Pages/Account/SignupComplete.razor.rz.scp.css */
/* ============================================================
   SignupComplete — Liquid Glass v2 (scoped)
   Stessa struttura di Login.razor.css: .auth-card e' gia' vetro lg-3
   via wwwroot/css/lg-surfaces.css (background, border, radius 26px,
   shadow-3). Qui: layout e contenuto della card di conferma.
   Sostituisce l'ex-token morto --il-* (bundle-design-system-v337.css,
   rimosso nel commit 82377499) con i token reali del sistema.
   ============================================================ */

/* ── Layout: una sola card, centrata in modo sicuro ───────── */
.auth-container[b-j8ktjepape] {
    min-height: calc(100vh - 140px);
    display: flex;
    padding: 48px 16px 64px;
}

.auth-card[b-j8ktjepape] {
    width: 100%;
    max-width: 480px;
    margin: auto;
    overflow: hidden;
}

.sc-body[b-j8ktjepape] {
    padding: 48px 40px 40px;
    text-align: center;
}

.sc-icon-wrap[b-j8ktjepape] {
    margin-bottom: 24px;
}

.sc-success-icon[b-j8ktjepape] {
    font-size: 4rem;
    color: var(--lp-accent-success, #34d399);
}

.sc-title[b-j8ktjepape] {
    margin: 0 0 12px;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--lp-text, #f6f8ff);
}

.sc-text[b-j8ktjepape] {
    margin: 0 0 24px;
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
    font-size: 1rem;
    line-height: 1.6;
}

/* Riquadro "Next Steps": vetro neutro, mai un velo colorato a riposo
   (La Regola del Glow Reattivo) — l'accento resta sull'icona e sui punti. */
.sc-info-box[b-j8ktjepape] {
    margin-bottom: 24px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    border-radius: 14px;
    text-align: left;
}

.sc-info-header[b-j8ktjepape] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--lp-text, #f6f8ff);
}

.sc-info-header i[b-j8ktjepape] {
    color: var(--lp-accent-text, #8660e1);
}

.sc-steps-list[b-j8ktjepape] {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
    font-size: 0.9375rem;
}

.sc-steps-list li[b-j8ktjepape] {
    padding: 2px 0;
}

.sc-steps-list li[b-j8ktjepape]::before {
    content: "\2022";
    margin-right: 8px;
    color: var(--lp-accent-text, #8660e1);
}

.sc-actions[b-j8ktjepape] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* CTA primaria: viola d'azione pieno, pillola, inchiostro bianco
   (La Regola dei Due Registri / dell'Inchiostro Misurato). Niente
   gradiente su testo o pulsanti. */
.sc-btn-primary[b-j8ktjepape] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 15px 24px;
    background: var(--lp-accent, #6C3CE1);
    color: var(--lp-on-accent, #ffffff);
    border: none;
    border-radius: var(--lg-r-pill, 999px);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                filter var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.sc-btn-primary:hover[b-j8ktjepape] {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.sc-btn-primary:focus-visible[b-j8ktjepape] {
    outline: none;
    box-shadow: 0 0 0 2px var(--lp-bg, #06090D), 0 0 0 4px var(--lp-accent-2, #00d4ff);
}

/* Secondaria: fantasma di vetro, bordo di luce, testo viola su vetro */
.sc-btn-outline[b-j8ktjepape] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 15px 24px;
    background: transparent;
    color: var(--lp-accent-text, #8660e1);
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--lg-r-pill, 999px);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.sc-btn-outline:hover[b-j8ktjepape] {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--lp-border-strong, rgba(255, 255, 255, 0.22));
}

.sc-btn-outline:focus-visible[b-j8ktjepape] {
    outline: none;
    box-shadow: 0 0 0 2px var(--lp-bg, #06090D), 0 0 0 4px var(--lp-accent-2, #00d4ff);
}

.sc-btn-icon[b-j8ktjepape] {
    font-size: 0.875rem;
}

.sc-footer[b-j8ktjepape] {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
}

.sc-footer-text[b-j8ktjepape] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
    font-size: 0.8125rem;
}

/* ── Responsive ≤480px ─────────────────────────────────────── */
@media (max-width: 480px) {
    .auth-container[b-j8ktjepape] {
        padding: 24px 12px 48px;
    }

    .sc-body[b-j8ktjepape] {
        padding: 32px 24px 28px;
    }
}
/* /Pages/Admin/FoundingMembersReview.razor.rz.scp.css */
.fm-admin[b-nwct7i82ma] {
    display: grid;
    gap: var(--lp-space-4);
    padding: var(--lp-space-6);
}

.fm-admin-header h1[b-nwct7i82ma] {
    margin: 0 0 var(--lp-space-2);
    font-size: var(--lp-text-2xl);
}

.fm-admin-header p[b-nwct7i82ma],
.fm-admin-meta[b-nwct7i82ma] {
    margin: 0;
    color: var(--lp-muted);
    font-size: var(--lp-text-sm);
}

.fm-admin-filters[b-nwct7i82ma] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lp-space-2);
}

.fm-admin-filter[b-nwct7i82ma] {
    padding: var(--lp-space-1) var(--lp-space-4);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-pill);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.fm-admin-filter.is-active[b-nwct7i82ma] {
    border-color: var(--lp-accent-warm);
    background: color-mix(in srgb, var(--lp-accent-warm) 14%, transparent);
    font-weight: 600;
}

.fm-admin-alert[b-nwct7i82ma] {
    margin: 0;
    padding: var(--lp-space-2) var(--lp-space-4);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-md);
}

.fm-admin-alert--error[b-nwct7i82ma] {
    border-color: var(--lp-accent-danger);
}

.fm-admin-list[b-nwct7i82ma] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--lp-space-3);
}

.fm-admin-item[b-nwct7i82ma] {
    display: grid;
    gap: var(--lp-space-2);
    padding: var(--lp-space-4);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
}

.fm-admin-item p[b-nwct7i82ma] {
    margin: 0;
}

.fm-admin-item-head[b-nwct7i82ma] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--lp-space-3);
}

.fm-admin-item-head h2[b-nwct7i82ma] {
    margin: 0;
    font-size: var(--lp-text-lg);
}

.fm-admin-status[b-nwct7i82ma] {
    padding: 2px var(--lp-space-2);
    border: 1px solid currentColor;
    border-radius: var(--lp-radius-pill);
    font-size: var(--lp-text-xs);
    font-weight: 600;
}

.fm-admin-status--approved[b-nwct7i82ma] { color: var(--lp-accent-success); }
.fm-admin-status--rejected[b-nwct7i82ma] { color: var(--lp-accent-danger); }
.fm-admin-status--pending[b-nwct7i82ma] { color: var(--lp-accent-warning); }

.fm-admin-motivation[b-nwct7i82ma] {
    white-space: pre-line;
}

.fm-admin-note-label[b-nwct7i82ma] {
    font-size: var(--lp-text-xs);
    font-weight: 500;
}

.fm-admin-note[b-nwct7i82ma] {
    width: 100%;
    padding: var(--lp-space-2);
    color: inherit;
    background: transparent;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    font: inherit;
}

.fm-admin-actions[b-nwct7i82ma] {
    display: flex;
    gap: var(--lp-space-2);
}

/* Pulsanti outline: i colori di stato di DESIGN.md sono sotto AA come riempimento. */
.fm-admin-btn[b-nwct7i82ma] {
    padding: var(--lp-space-2) var(--lp-space-4);
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--lp-radius-sm);
    font-weight: 600;
    cursor: pointer;
}

.fm-admin-btn:disabled[b-nwct7i82ma] {
    opacity: .5;
    cursor: not-allowed;
}

.fm-admin-btn--approve[b-nwct7i82ma] {
    color: var(--lp-accent-success);
}

.fm-admin-btn--reject[b-nwct7i82ma] {
    color: var(--lp-accent-danger);
}

.fm-admin-btn:focus-visible[b-nwct7i82ma],
.fm-admin-filter:focus-visible[b-nwct7i82ma],
.fm-admin-note:focus-visible[b-nwct7i82ma] {
    outline: 2px solid var(--lp-accent-warm);
    outline-offset: 2px;
}
/* /Pages/AI/AICoachPlanPage.razor.rz.scp.css */
/* Stile estratto dal blocco <style> inline della pagina (2026-08-20):
   CSS isolation di Blazor invece dell'iniezione globale al render. */

.acp-wrap[b-0bfv8kkzab]{max-width:920px;margin:0 auto;padding:48px 20px 80px;color:#faf7f0;}
.acp-eyebrow[b-0bfv8kkzab]{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#f89b4d;font-weight:600;}
.acp-title[b-0bfv8kkzab]{font-size:clamp(28px,4vw,42px);font-weight:700;margin:10px 0 14px;line-height:1.15;}
.acp-lead[b-0bfv8kkzab]{font-size:16px;line-height:1.6;color:rgba(250,247,240,.72);max-width:640px;margin:0 0 22px;}
.acp-badges[b-0bfv8kkzab]{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px;}
.acp-badge[b-0bfv8kkzab]{font-size:13px;color:rgba(250,247,240,.7);border:1px solid rgba(250,247,240,.14);border-radius:999px;padding:7px 14px;display:inline-flex;align-items:center;gap:8px;}
.acp-badge i[b-0bfv8kkzab]{width:7px;height:7px;border-radius:50%;background:#58c99b;flex:none;}

.acp-panel[b-0bfv8kkzab]{border:1px solid rgba(250,247,240,.12);border-radius:18px;background:linear-gradient(180deg,rgba(232,124,42,.06),rgba(250,247,240,.02) 60%);padding:30px 30px 34px;margin-bottom:28px;}
@media(max-width:640px){.acp-panel[b-0bfv8kkzab]{padding:22px 18px 26px;}.acp-wrap[b-0bfv8kkzab]{padding:32px 16px 64px;}}
.acp-h2[b-0bfv8kkzab]{font-size:20px;font-weight:600;margin:0 0 18px;}
.acp-h2--section[b-0bfv8kkzab]{margin:8px 0 18px;}
.acp-p[b-0bfv8kkzab]{font-size:15px;line-height:1.6;color:rgba(250,247,240,.72);margin:0 0 20px;}

.acp-skeleton .acp-sk-line[b-0bfv8kkzab]{height:12px;border-radius:6px;background:rgba(250,247,240,.08);margin-bottom:12px;animation:acp-pulse-b-0bfv8kkzab 1.4s ease-in-out infinite;}
.acp-skeleton .acp-sk-line:nth-child(2)[b-0bfv8kkzab]{animation-delay:.15s;}
.acp-skeleton .acp-sk-line:nth-child(3)[b-0bfv8kkzab]{animation-delay:.3s;}
@keyframes acp-pulse-b-0bfv8kkzab{0%,100%{opacity:.35;}50%{opacity:.7;}}

.acp-metrics[b-0bfv8kkzab]{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;}
@media(max-width:600px){.acp-metrics[b-0bfv8kkzab]{grid-template-columns:1fr;}}
.acp-metric[b-0bfv8kkzab]{border:1px solid rgba(250,247,240,.1);border-radius:13px;padding:18px;background:rgba(250,247,240,.03);}
.acp-metric-value[b-0bfv8kkzab]{display:block;font-size:30px;font-weight:700;color:#f89b4d;line-height:1.1;}
.acp-metric-label[b-0bfv8kkzab]{display:block;font-size:13px;color:rgba(250,247,240,.62);margin-top:6px;}

.acp-pace[b-0bfv8kkzab]{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:4px;}
.acp-pace-label[b-0bfv8kkzab]{font-size:14px;color:rgba(250,247,240,.7);}
.acp-pace-btn[b-0bfv8kkzab]{font:inherit;font-size:13px;color:rgba(250,247,240,.8);border:1px solid rgba(250,247,240,.14);background:rgba(250,247,240,.03);border-radius:999px;padding:7px 14px;cursor:pointer;transition:border-color .2s,background .2s;}
.acp-pace-btn:hover[b-0bfv8kkzab]{border-color:rgba(232,124,42,.6);}
.acp-pace-btn.is-active[b-0bfv8kkzab]{border-color:#e87c2a;background:rgba(232,124,42,.16);color:#faf7f0;}
.acp-pace-out[b-0bfv8kkzab]{font-size:14px;font-weight:600;color:#f89b4d;}

.acp-note[b-0bfv8kkzab]{font-size:13px;line-height:1.55;color:rgba(250,247,240,.55);margin:18px 0 0;}
.acp-note--data[b-0bfv8kkzab]{border-top:1px solid rgba(250,247,240,.1);padding-top:16px;margin-top:22px;}

.acp-steps[b-0bfv8kkzab]{margin-bottom:28px;}
.acp-step[b-0bfv8kkzab]{display:flex;gap:18px;border:1px solid rgba(250,247,240,.12);border-radius:16px;background:rgba(250,247,240,.03);padding:22px 24px;margin-bottom:14px;}
@media(max-width:600px){.acp-step[b-0bfv8kkzab]{padding:18px 16px;gap:12px;}}
.acp-step-num[b-0bfv8kkzab]{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid rgba(232,124,42,.5);color:#f89b4d;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;}
.acp-step-cat[b-0bfv8kkzab]{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(250,247,240,.55);}
.acp-step-title[b-0bfv8kkzab]{font-size:17px;font-weight:600;margin:6px 0 10px;line-height:1.35;}
.acp-step-meta[b-0bfv8kkzab]{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:rgba(250,247,240,.6);margin-bottom:12px;}
.acp-step-why[b-0bfv8kkzab]{font-size:14px;line-height:1.6;color:rgba(250,247,240,.75);margin:0 0 12px;}
.acp-step-why strong[b-0bfv8kkzab]{color:#faf7f0;}
.acp-step-link[b-0bfv8kkzab]{font-size:14px;color:#f89b4d;text-decoration:none;font-weight:600;}
.acp-step-link:hover[b-0bfv8kkzab]{text-decoration:underline;}

.acp-factors[b-0bfv8kkzab]{list-style:none;padding:0;margin:0 0 8px;}
.acp-factor[b-0bfv8kkzab]{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid rgba(250,247,240,.08);}
.acp-factor:last-child[b-0bfv8kkzab]{border-bottom:none;}
.acp-factor strong[b-0bfv8kkzab]{display:block;font-size:14px;font-weight:600;margin-bottom:3px;}
.acp-factor-detail[b-0bfv8kkzab]{font-size:13px;line-height:1.55;color:rgba(250,247,240,.62);}
.acp-factor-weight[b-0bfv8kkzab]{flex:none;min-width:88px;text-align:center;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;border-radius:999px;padding:5px 10px;margin-top:2px;}
.acp-factor-weight--high[b-0bfv8kkzab]{background:rgba(232,124,42,.18);color:#f89b4d;}
.acp-factor-weight--mid[b-0bfv8kkzab]{background:rgba(250,247,240,.09);color:rgba(250,247,240,.8);}
.acp-factor-weight--low[b-0bfv8kkzab]{background:rgba(250,247,240,.05);color:rgba(250,247,240,.6);}
.acp-factor-weight--none[b-0bfv8kkzab]{background:rgba(88,201,155,.14);color:#58c99b;}

.acp-excluded[b-0bfv8kkzab]{margin-top:22px;padding-top:18px;border-top:1px solid rgba(250,247,240,.1);}
.acp-excluded-label[b-0bfv8kkzab]{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(250,247,240,.55);margin-bottom:12px;}
.acp-excluded-list[b-0bfv8kkzab]{display:flex;gap:8px;flex-wrap:wrap;}
.acp-excluded-pill[b-0bfv8kkzab]{font-size:13px;color:rgba(250,247,240,.68);border:1px dashed rgba(250,247,240,.2);border-radius:999px;padding:6px 13px;}

.acp-actions[b-0bfv8kkzab]{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;}
.acp-btn[b-0bfv8kkzab]{font-size:14px;font-weight:600;text-decoration:none;border-radius:999px;padding:11px 20px;border:1px solid rgba(250,247,240,.16);color:rgba(250,247,240,.85);transition:border-color .2s,background .2s;}
.acp-btn:hover[b-0bfv8kkzab]{border-color:rgba(232,124,42,.6);background:rgba(232,124,42,.08);}
.acp-btn--primary[b-0bfv8kkzab]{background:#e87c2a;border-color:#e87c2a;color:#1a1207;}
.acp-btn--primary:hover[b-0bfv8kkzab]{background:#f89b4d;border-color:#f89b4d;}
/* /Pages/Compliance/ComplianceHub.razor.rz.scp.css */
/* Compliance Hub: profilo di rischio, formazioni assegnate con scadenza, advisor AI. */

.compliance-page[b-167o104y24] {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 20px 64px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.compliance-header[b-167o104y24] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.compliance-kicker[b-167o104y24] {
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lp-accent-warm);
}

.compliance-title[b-167o104y24] {
    margin: 0;
    font-size: var(--lp-text-2xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lp-text);
}

.compliance-subtitle[b-167o104y24] {
    margin: 0;
    font-size: var(--lp-text-base);
    line-height: 1.6;
    color: var(--lp-muted);
    max-width: 62ch;
}

.compliance-loading[b-167o104y24] {
    padding: 24px;
    text-align: center;
    color: var(--lp-muted);
}

.compliance-alert[b-167o104y24] {
    padding: 12px 16px;
    border-radius: var(--lp-radius-sm);
    font-size: var(--lp-text-sm);
}

.compliance-alert-error[b-167o104y24] {
    border: 1px solid color-mix(in srgb, var(--lp-accent-danger) 40%, transparent);
    background: color-mix(in srgb, var(--lp-accent-danger) 12%, transparent);
    color: var(--lp-text);
}

.compliance-section[b-167o104y24] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: var(--lp-radius-lg);
    border: 1px solid var(--lp-border);
    background: var(--lp-surface);
}

.compliance-section-title[b-167o104y24] {
    margin: 0;
    font-size: var(--lp-text-lg);
    font-weight: 700;
    color: var(--lp-text);
}

.compliance-form[b-167o104y24] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.compliance-field[b-167o104y24] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.compliance-field label[b-167o104y24] {
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--lp-muted);
}

.compliance-field select[b-167o104y24],
.compliance-field input[b-167o104y24],
.compliance-field textarea[b-167o104y24] {
    padding: 10px 12px;
    border-radius: var(--lp-radius-sm);
    border: 1px solid var(--lp-border-strong);
    background: var(--lp-border);
    color: var(--lp-text);
    font-size: var(--lp-text-base);
    font-family: inherit;
}

.compliance-field textarea[b-167o104y24] {
    resize: vertical;
}

.compliance-field select:focus-visible[b-167o104y24],
.compliance-field input:focus-visible[b-167o104y24],
.compliance-field textarea:focus-visible[b-167o104y24] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 1px;
}

.compliance-profile-summary[b-167o104y24] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: var(--lp-text-sm);
    color: var(--lp-text);
}

.compliance-edit-btn[b-167o104y24] {
    margin-left: auto;
}

.compliance-empty[b-167o104y24] {
    margin: 0;
    color: var(--lp-muted);
    font-size: var(--lp-text-sm);
}

.compliance-assignment-list[b-167o104y24] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.compliance-assignment-card[b-167o104y24] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border-radius: var(--lp-radius-sm);
    border: 1px solid var(--lp-border);
    background: color-mix(in srgb, var(--lp-surface) 92%, transparent);
}

.compliance-assignment-main[b-167o104y24] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.compliance-assignment-title[b-167o104y24] {
    font-weight: 700;
    color: var(--lp-text);
}

.compliance-assignment-meta[b-167o104y24] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: var(--lp-text-sm);
    color: var(--lp-muted);
}

.compliance-cert-link[b-167o104y24] {
    color: var(--lp-accent-warm);
    text-decoration: none;
    font-weight: 700;
}

.compliance-cert-link:hover[b-167o104y24] {
    text-decoration: underline;
}

.compliance-cert-link:focus-visible[b-167o104y24] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 3px;
    border-radius: var(--lp-radius-sm);
}

.compliance-badge[b-167o104y24] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--lg-r-pill);
    font-size: var(--lp-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.compliance-badge-pending[b-167o104y24] {
    color: var(--lp-accent-warm);
    background: color-mix(in srgb, var(--lp-accent-warm) 14%, transparent);
}

.compliance-badge-completed[b-167o104y24] {
    color: var(--lp-accent-2);
    background: color-mix(in srgb, var(--lp-accent-2) 14%, transparent);
}

.compliance-badge-expired[b-167o104y24] {
    color: var(--lp-accent-danger);
    background: color-mix(in srgb, var(--lp-accent-danger) 14%, transparent);
}

.compliance-advisor-intro[b-167o104y24] {
    margin: 0;
    font-size: var(--lp-text-sm);
    line-height: 1.55;
    color: var(--lp-muted);
}

.compliance-advisor-answer[b-167o104y24] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: var(--lp-radius-sm);
    border: 1px solid var(--lp-border);
    background: color-mix(in srgb, var(--lp-surface) 92%, transparent);
}

.compliance-advisor-answer-text[b-167o104y24] {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.6;
    color: var(--lp-text);
}

.compliance-advisor-disclaimer[b-167o104y24] {
    margin: 0;
    font-size: var(--lp-text-xs);
    color: var(--lp-muted);
    font-style: italic;
}

@media (max-width: 640px) {
    .compliance-page[b-167o104y24] {
        padding: 20px 14px 48px;
    }

    .compliance-edit-btn[b-167o104y24] {
        margin-left: 0;
    }
}

@media (forced-colors: active) {
    .compliance-section[b-167o104y24],
    .compliance-assignment-card[b-167o104y24],
    .compliance-advisor-answer[b-167o104y24],
    .compliance-alert[b-167o104y24] {
        border: 1px solid CanvasText;
        background: Canvas;
        color: CanvasText;
    }

    .compliance-badge[b-167o104y24],
    .compliance-cert-link[b-167o104y24] {
        forced-color-adjust: auto;
        color: LinkText;
    }
}
/* /Pages/Courses/Detail.razor.rz.scp.css */
/* =================================================================
   COURSE DETAIL — Liquid Glass v2 (scoped CSS di Pages/Courses/Detail.razor)
   Migrato dal blocco <style> inline della pagina (v1.5.0, "courses-v31419.css
   orfano"). Allineato al mockup mockup/liquid-glass-v2/course-detail.html:

     · Vetro SOLO sul chrome (mobile sticky CTA, badge): le superfici di
       contenuto (sezioni, buy-box, accordion curriculum, recensioni) sono
       SOLIDE — token --lg-surface / --lg-surface-edge / --lg-shadow-2 /
       --lg-r-card con fallback letterali se data-ds="lg" non e' attivo.
     · Le regole per i componenti FIGLI (che non ricevono l'attributo di
       scope) usano ::deep agganciato a .cd-root:
         - .ll-*            → Components/CourseCurriculum.razor
                              (le stesse regole esistono in
                              wwwroot/css/bundle-admin-learning-v2.css, caricato
                              solo da AdminLayout: senza queste copie il
                              progress ring SVG esplode a larghezza container
                              e i circle senza fill rendono dischi neri)
         - .enrollment-card → Components/EnrollmentCard.razor (buy-box sticky)
         - .instructor-section → Components/InstructorCard.razor (usa la
                              classe .section ma e' markup del figlio)
   ================================================================= */

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.breadcrumb[b-8s01zudl3r] {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1rem 0;
}
.breadcrumb .container[b-8s01zudl3r] {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.875rem; color: rgba(240, 236, 228, 0.55);
}
.breadcrumb a[b-8s01zudl3r] { color: rgba(240, 236, 228, 0.75); text-decoration: none; }
.breadcrumb a:hover[b-8s01zudl3r] { color: #e87c2a; }
.breadcrumb .separator[b-8s01zudl3r] { color: rgba(240, 236, 228, 0.30); }
.breadcrumb .current[b-8s01zudl3r] { color: #f0ece4; font-weight: 500; }

/* ── Header corso (mockup: crumbs → badge → H1 → sub → meta → autore) ──
   La thumbnail del corso resta come backdrop CSS-safe: la custom property
   --hero-thumb e' costruita da HeroThumbStyle() nel @code (sanitizzazione
   anti CSS-injection su ThumbnailUrl dal DB). */
.cd-header[b-8s01zudl3r] {
    position: relative;
    overflow: hidden;
    color: #f0ece4;
    background: #06090D;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cd-header[b-8s01zudl3r]::before {
    content: "";
    position: absolute; inset: 0;
    background-image: var(--hero-thumb);
    background-size: cover;
    background-position: center;
    opacity: 0.28;
    filter: saturate(0.85) blur(2px);
}
.cd-header[b-8s01zudl3r]::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6, 9, 13, 0.55) 0%, rgba(6, 9, 13, 0.78) 55%, #06090D 100%);
}
.cd-header-inner[b-8s01zudl3r] {
    position: relative; z-index: 1;
    max-width: 1240px; margin: 0 auto;
    padding: 2.5rem 1.5rem 2rem;
}
.cd-cat-row[b-8s01zudl3r] { margin-bottom: 0.75rem; }
.cd-title[b-8s01zudl3r] {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
    margin: 0 0 0.75rem; color: #f0ece4;
    max-width: 820px;
}
.cd-sub[b-8s01zudl3r] {
    font-size: 1rem; line-height: 1.5;
    color: rgba(240, 236, 228, 0.78);
    margin: 0 0 1rem; max-width: 640px;
}
.cd-meta[b-8s01zudl3r] {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.5rem 1.125rem;
    font-size: 0.875rem; color: rgba(240, 236, 228, 0.56);
}
.cd-meta-item[b-8s01zudl3r] { display: inline-flex; align-items: center; gap: 0.4rem; }
.cd-meta-rating[b-8s01zudl3r] { display: inline-flex; align-items: center; gap: 0.4rem; }
.cd-meta-rating .stars[b-8s01zudl3r] { display: inline-flex; gap: 2px; color: rgba(240, 236, 228, 0.25); }
.cd-meta-rating .stars .filled[b-8s01zudl3r] { color: #E87C2A; }
.cd-meta-rating strong[b-8s01zudl3r] { color: #f0ece4; font-weight: 700; }
.cd-meta-rating .nrev[b-8s01zudl3r] { color: #e87c2a; }
.badge-new[b-8s01zudl3r] {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #e87c2a, #f89b4d);
    /* Testo scuro su arancio: #fff e' ~2.8:1, sotto WCAG AA;
       #1A0F06 sale a 6.6:1 (stessa regola di .btn-primary in lg-surfaces). */
    color: #1A0F06; padding: 4px 12px; border-radius: 999px;
    font-size: 0.85rem; font-weight: 700;
    box-shadow: 0 4px 12px rgba(232, 124, 42, 0.35);
}
.cd-author[b-8s01zudl3r] {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0.875rem 0 0;
    font-size: 0.875rem; color: rgba(240, 236, 228, 0.56);
}
.cd-author strong[b-8s01zudl3r] { color: #e87c2a; font-weight: 600; }
.cd-author img[b-8s01zudl3r] {
    width: 32px; height: 32px; border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(232, 124, 42, 0.5);
}
.instructor-initials[b-8s01zudl3r] {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #e87c2a, #f89b4d);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.8rem; flex-shrink: 0;
}

/* ── Anteprima video (collage CoursePreviewCollage): superficie solida ── */
.cd-preview[b-8s01zudl3r] {
    max-width: 720px;
    margin-bottom: 1.5rem;
    border-radius: var(--lg-r-card, 20px);
    overflow: hidden;
}

/* ── Layout contenuto + buy-box (mockup: 1fr 360px, gap scala 8px) ── */
.course-detail-container[b-8s01zudl3r] { background: transparent; }
.course-detail-layout[b-8s01zudl3r] {
    max-width: 1240px; margin: 0 auto;
    padding: 2rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr minmax(300px, 360px);
    gap: 3rem;
    align-items: start;
}

/* ── Sezioni di contenuto: SOLIDE (niente backdrop-filter) ── */
.section[b-8s01zudl3r] {
    background: var(--lg-surface, #0e1524);
    border: 1px solid var(--lg-surface-edge, rgba(255, 255, 255, 0.08));
    border-radius: var(--lg-r-card, 20px);
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--lg-shadow-2, 0 8px 24px rgba(0, 0, 0, 0.38));
    color: #f0ece4;
}
.section h2[b-8s01zudl3r] {
    font-size: 1.4rem; font-weight: 800;
    margin: 0 0 1rem; color: #f0ece4;
    letter-spacing: -0.01em;
}
.section h3[b-8s01zudl3r], .section h4[b-8s01zudl3r] { color: #f0ece4; }
.section p[b-8s01zudl3r], .section li[b-8s01zudl3r] { color: rgba(240, 236, 228, 0.78); }

/* Inline CTA — accento brand SOLIDO (nessun vetro) */
.section.inline-cta[b-8s01zudl3r] {
    background: rgba(232, 124, 42, 0.08);
    border: 1px solid rgba(232, 124, 42, 0.25);
    text-align: center;
}
.inline-cta h3[b-8s01zudl3r] { margin: 0 0 0.5rem; color: #f0ece4; }
.inline-cta p[b-8s01zudl3r] { color: rgba(240, 236, 228, 0.75); margin: 0 0 1.5rem; }

/* ── "Cosa imparerai": griglia 2 colonne dentro la card (mockup) ── */
.learning-outcomes[b-8s01zudl3r] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1.5rem;
}
.outcome-item[b-8s01zudl3r] {
    display: flex; align-items: flex-start; gap: 0.625rem;
    font-size: 0.9rem; color: rgba(240, 236, 228, 0.78);
    line-height: 1.45;
}
.outcome-item i[b-8s01zudl3r] {
    color: #e87c2a; flex-shrink: 0;
    margin-top: 0.15rem;
}

/* ── Contenuto del corso: riga riepilogo sopra l'accordion ── */
.content-summary[b-8s01zudl3r] {
    font-size: 0.875rem;
    color: rgba(240, 236, 228, 0.56);
    margin-bottom: 1rem;
}

/* ── Requisiti ── */
.requirements-list[b-8s01zudl3r] {
    list-style: disc;
    padding-left: 1.25rem; margin: 0;
}
.requirements-list li[b-8s01zudl3r] { padding: 0.25rem 0; }
.requirements-list li[b-8s01zudl3r]::marker { color: #e87c2a; }

/* ── Descrizione espandibile ── */
.description-content[b-8s01zudl3r] { line-height: 1.7; }
.description-content.collapsed[b-8s01zudl3r] {
    max-height: 180px; overflow: hidden; position: relative;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
    mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.section.description .btn-ghost[b-8s01zudl3r] {
    margin-top: 1rem;
    display: inline-flex; align-items: center; gap: 0.5rem;
}

/* ── Recensioni: card solide impilate (mockup) ── */
.reviews-grid[b-8s01zudl3r] {
    display: grid;
    gap: 1rem;
}
.review-card[b-8s01zudl3r] {
    background: var(--lg-surface, #0e1524);
    border: 1px solid var(--lg-surface-edge, rgba(255, 255, 255, 0.08));
    border-radius: var(--lg-r-card, 20px);
    padding: 1.5rem;
    box-shadow: var(--lg-shadow-2, 0 8px 24px rgba(0, 0, 0, 0.38));
}
.review-header[b-8s01zudl3r] {
    display: flex; align-items: center; gap: 0.75rem;
}
.reviewer-avatar[b-8s01zudl3r] {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.875rem; color: #1a0f06;
    background: linear-gradient(135deg, #e87c2a, #f89b4d);
    flex-shrink: 0;
}
.reviewer-info[b-8s01zudl3r] { min-width: 0; }
.reviewer-name[b-8s01zudl3r] {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.3rem 0.625rem;
    font-weight: 700; font-size: 0.9rem; color: #f0ece4;
}
.review-rating[b-8s01zudl3r] { display: inline-flex; gap: 2px; font-size: 0.8rem; }
.review-rating i[b-8s01zudl3r] { color: rgba(240, 236, 228, 0.22); }
.review-rating i.filled[b-8s01zudl3r] { color: #f89b4d; }
.review-date[b-8s01zudl3r] { font-size: 0.78rem; color: rgba(240, 236, 228, 0.45); }
.review-comment[b-8s01zudl3r] {
    margin: 0.75rem 0 0;
    font-size: 0.9rem; line-height: 1.6;
    color: rgba(240, 236, 228, 0.78);
}

/* ── Corsi correlati ── */
.related-courses-grid[b-8s01zudl3r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

/* ── Sidebar buy-box: sticky sotto la navbar (mockup: top 96px) ── */
.course-sidebar[b-8s01zudl3r] { position: sticky; top: 96px; }

/* ── Buy-box (EnrollmentCard, ::deep): SOLIDA ── */
.cd-root[b-8s01zudl3r]  .enrollment-card {
    background: var(--lg-surface, #0e1524);
    border: 1px solid var(--lg-surface-edge, rgba(255, 255, 255, 0.08));
    border-radius: var(--lg-r-card, 20px);
    padding: 1.5rem;
    box-shadow: var(--lg-shadow-3, 0 12px 40px rgba(0, 0, 0, 0.45));
    color: #f0ece4;
}
.cd-root[b-8s01zudl3r]  .enrollment-card .card-header { margin-bottom: 1.25rem; }
.cd-root[b-8s01zudl3r]  .price-section {
    display: flex; align-items: baseline; gap: 0.75rem;
    flex-wrap: wrap; margin-bottom: 0.5rem;
}
.cd-root[b-8s01zudl3r]  .current-price {
    font-size: 1.9rem; font-weight: 800;
    letter-spacing: -0.02em; color: #f0ece4;
}
.cd-root[b-8s01zudl3r]  .original-price {
    font-size: 1rem; color: rgba(240, 236, 228, 0.40);
    text-decoration: line-through;
}
.cd-root[b-8s01zudl3r]  .discount-badge {
    background: linear-gradient(135deg, #e87c2a, #f89b4d);
    color: #1a0f06;
    font-size: 0.8rem; font-weight: 800;
    padding: 3px 10px; border-radius: var(--lg-r-chip, 10px);
}
.cd-root[b-8s01zudl3r]  .urgency-banner {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem; margin-top: 0.75rem;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.30);
    border-radius: 8px; color: #f59e0b;
    font-size: 0.875rem; font-weight: 600;
}
.cd-root[b-8s01zudl3r]  .card-actions {
    display: flex; flex-direction: column; gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.cd-root[b-8s01zudl3r]  .card-actions .btn { width: 100%; }
.cd-root[b-8s01zudl3r]  .card-includes {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1rem; margin-bottom: 1.25rem;
}
.cd-root[b-8s01zudl3r]  .card-includes h4 {
    font-size: 0.875rem; font-weight: 800;
    margin: 0 0 0.625rem; color: #f0ece4;
}
.cd-root[b-8s01zudl3r]  .card-includes ul { list-style: none; padding: 0; margin: 0; }
.cd-root[b-8s01zudl3r]  .card-includes li {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.3rem 0; color: rgba(240, 236, 228, 0.78);
    font-size: 0.875rem;
}
.cd-root[b-8s01zudl3r]  .card-includes i { color: #f89b4d; width: 18px; text-align: center; }
.cd-root[b-8s01zudl3r]  .card-guarantee {
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    color: rgba(240, 236, 228, 0.56);
    font-size: 0.8rem; font-weight: 500;
    text-align: center;
}
.cd-root[b-8s01zudl3r]  .card-guarantee i { color: #e87c2a; }

/* ── InstructorCard (figlio): usa la classe .section ma non riceve
   l'attributo di scope — gli diamo la stessa superficie solida. ── */
.cd-root[b-8s01zudl3r]  .instructor-section {
    background: var(--lg-surface, #0e1524);
    border: 1px solid var(--lg-surface-edge, rgba(255, 255, 255, 0.08));
    border-radius: var(--lg-r-card, 20px);
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--lg-shadow-2, 0 8px 24px rgba(0, 0, 0, 0.38));
    color: #f0ece4;
}

/* ── Curriculum ll-* (CourseCurriculum + sidebar di CourseLayout, ::deep)
   Copia locale delle regole di bundle-admin-learning-v2.css (caricato solo da
   AdminLayout). Accordion SOLIDO: una card, separatori --c-border. ── */
.cd-root[b-8s01zudl3r]  .ll-sidebar-content {
    color: #f0ece4;
    background: var(--lg-surface, #0e1524);
    border: 1px solid var(--lg-surface-edge, rgba(255, 255, 255, 0.08));
    border-radius: var(--lg-r-card, 20px);
    padding: 0.5rem 1rem;
}
.cd-root[b-8s01zudl3r]  .ll-sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.cd-root[b-8s01zudl3r]  .ll-sidebar-title { font-size: 1rem; font-weight: 600; color: #f0ece4; }
/* Titolo interno soppresso (HideTitle): la pagina mostra gia' l'h2 di sezione;
   la % completamento resta allineata a destra. */
.cd-root[b-8s01zudl3r]  .ll-sidebar-header--no-title { justify-content: flex-end; }
.cd-root[b-8s01zudl3r]  .ll-sidebar-progress { font-size: 0.85rem; color: rgba(240, 236, 228, 0.55); }
.cd-root[b-8s01zudl3r]  .ll-section { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.cd-root[b-8s01zudl3r]  .ll-section:last-child { border-bottom: none; }
.cd-root[b-8s01zudl3r]  .ll-section-header {
    display: flex; align-items: center; gap: 0.75rem;
    width: 100%; padding: 1rem 0.5rem;
    background: transparent; border: none; cursor: pointer;
    text-align: left; color: #f0ece4;
    transition: background var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.cd-root[b-8s01zudl3r]  .ll-section-header:hover { background: rgba(250, 247, 240, 0.03); border-radius: 8px; }
.cd-root[b-8s01zudl3r]  .ll-section-expand {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex-shrink: 0;
    color: rgba(240, 236, 228, 0.45);
    transition: transform var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.cd-root[b-8s01zudl3r]  .ll-section-header.expanded .ll-section-expand { transform: rotate(90deg); }
.cd-root[b-8s01zudl3r]  .ll-section-info { flex: 1; min-width: 0; }
.cd-root[b-8s01zudl3r]  .ll-section-title { font-size: 0.95rem; font-weight: 700; color: #f0ece4; margin-bottom: 0.15rem; }
.cd-root[b-8s01zudl3r]  .ll-section-meta { font-size: 0.8rem; color: rgba(240, 236, 228, 0.45); }
.cd-root[b-8s01zudl3r]  .ll-section-separator { margin: 0 0.35rem; color: rgba(240, 236, 228, 0.30); }
.cd-root[b-8s01zudl3r]  .ll-section-complete-badge {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: rgba(74, 222, 128, 0.15); color: #4ade80; font-size: 0.75rem;
}
.cd-root[b-8s01zudl3r]  .ll-section-content { display: none; }
.cd-root[b-8s01zudl3r]  .ll-section-content.expanded { display: block; }
.cd-root[b-8s01zudl3r]  .ll-lesson-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.6rem 0.5rem 0.6rem 1.75rem; min-height: 48px;
    border-left: 3px solid transparent;
    border-top: 1px solid rgba(250, 247, 240, 0.05);
    transition: background var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.cd-root[b-8s01zudl3r]  .ll-lesson-item.clickable { cursor: pointer; }
.cd-root[b-8s01zudl3r]  .ll-lesson-item.clickable:hover { background: rgba(250, 247, 240, 0.03); }
.cd-root[b-8s01zudl3r]  .ll-lesson-item.active { background: rgba(232, 124, 42, 0.08); border-left-color: #e87c2a; }
.cd-root[b-8s01zudl3r]  .ll-lesson-item.completed { opacity: 0.8; }
.cd-root[b-8s01zudl3r]  .ll-lesson-item.locked { opacity: 0.55; cursor: not-allowed; }
.cd-root[b-8s01zudl3r]  .ll-progress-circle {
    width: 32px; height: 32px;
    position: relative; flex-shrink: 0;
}
.cd-root[b-8s01zudl3r]  .ll-progress-circle svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.cd-root[b-8s01zudl3r]  .ll-progress-circle-bg { fill: none; stroke: rgba(240, 236, 228, 0.20); stroke-width: 2; }
.cd-root[b-8s01zudl3r]  .ll-progress-circle-fill {
    fill: none; stroke: #e87c2a; stroke-width: 2; stroke-linecap: round;
    transition: stroke-dashoffset 400ms ease;
}
.cd-root[b-8s01zudl3r]  .ll-progress-circle.completed .ll-progress-circle-fill { stroke: #4ade80; }
.cd-root[b-8s01zudl3r]  .ll-progress-circle-check,
.cd-root[b-8s01zudl3r]  .ll-progress-number,
.cd-root[b-8s01zudl3r]  .ll-progress-playing {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem; line-height: 1;
}
.cd-root[b-8s01zudl3r]  .ll-progress-circle-check { color: #4ade80; }
.cd-root[b-8s01zudl3r]  .ll-progress-number { color: rgba(240, 236, 228, 0.70); font-weight: 600; }
.cd-root[b-8s01zudl3r]  .ll-progress-playing { color: #e87c2a; }
.cd-root[b-8s01zudl3r]  .ll-lesson-lock {
    width: 32px; height: 32px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(240, 236, 228, 0.40); font-size: 0.85rem;
}
.cd-root[b-8s01zudl3r]  .ll-lesson-info { flex: 1; min-width: 0; }
.cd-root[b-8s01zudl3r]  .ll-lesson-title {
    font-size: 0.9rem; color: #f0ece4; line-height: 1.35;
    margin-bottom: 0.15rem;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.cd-root[b-8s01zudl3r]  .ll-lesson-item.active .ll-lesson-title { color: #e87c2a; font-weight: 500; }
.cd-root[b-8s01zudl3r]  .ll-lesson-duration {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; color: rgba(240, 236, 228, 0.45);
}
.cd-root[b-8s01zudl3r]  .ll-free-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.1rem 0.5rem; border-radius: 6px; cursor: pointer;
    background: rgba(232, 124, 42, 0.15); color: #e87c2a;
    font-size: 0.75rem; font-weight: 700;
}
.cd-root[b-8s01zudl3r]  .ll-lesson-status { flex-shrink: 0; }
.cd-root[b-8s01zudl3r]  .ll-now-playing-badge { color: #e87c2a; font-size: 0.8rem; }
.cd-root[b-8s01zudl3r]  .ll-empty-section,
.cd-root[b-8s01zudl3r]  .ll-empty-curriculum {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    padding: 1.5rem; text-align: center; color: rgba(240, 236, 228, 0.55);
}
.cd-root[b-8s01zudl3r]  .ll-empty-curriculum h4 { color: #f0ece4; margin: 0; }
.cd-root[b-8s01zudl3r]  .ll-empty-curriculum p { margin: 0; font-size: 0.875rem; }

/* ── Footer liquid e' position:fixed (design v0.4.8.1): respiro in fondo
   per non coprire l'ultima sezione a fine scroll ── */
.course-detail-container[b-8s01zudl3r] { padding-bottom: 120px; }

/* ── Mobile sticky CTA (M1-2): barra chrome → il vetro qui e' ammesso ── */
.mobile-sticky-cta[b-8s01zudl3r] {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 210;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 0.75rem 1.25rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: rgba(6, 9, 13, 0.92);
    backdrop-filter: blur(var(--lg-3, 20px)) saturate(var(--lg-sat, 180%));
    -webkit-backdrop-filter: blur(var(--lg-3, 20px)) saturate(var(--lg-sat, 180%));
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* Visibile solo quando il layout è a una colonna (<=1024px): sopra, la buy-box è già in vista. */
.mobile-sticky-cta--compact-only[b-8s01zudl3r] { display: none; }
.mobile-sticky-cta .sticky-price[b-8s01zudl3r] { font-size: 1.25rem; font-weight: 700; color: #f0ece4; }

/* ── Focus visibile coerente su tutta la pagina ── */
.cd-root a:focus-visible[b-8s01zudl3r],
.cd-root button:focus-visible[b-8s01zudl3r],
.cd-root[b-8s01zudl3r]  button:focus-visible,
.cd-root[b-8s01zudl3r]  a:focus-visible {
    outline: 2px solid #e87c2a;
    outline-offset: 2px;
    border-radius: 6px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .mobile-sticky-cta--compact-only[b-8s01zudl3r] { display: flex; }
    /* minmax(0, 1fr), non 1fr: il minimo automatico di una traccia e' il
       min-content dei suoi elementi, e su 390px la colonna principale
       diventava 417px trascinando fuori schermo 106 elementi (misurato
       2026-08-19). min-width:0 fa lo stesso lavoro sugli elementi. */
    .course-detail-layout[b-8s01zudl3r] { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .course-main-content[b-8s01zudl3r],
    .course-sidebar[b-8s01zudl3r] { min-width: 0; }
    .course-sidebar[b-8s01zudl3r] { position: static; }
}

@media (max-width: 768px) {
    .cd-header-inner[b-8s01zudl3r] { padding: 1.75rem 1.25rem 1.5rem; }
    .cd-preview[b-8s01zudl3r] { max-width: none; }
    .section[b-8s01zudl3r] { padding: 1.25rem; }
    .cd-root[b-8s01zudl3r]  .instructor-section { padding: 1.25rem; }
    .cd-root[b-8s01zudl3r]  .ll-sidebar-content { padding: 0.25rem 0.5rem; }
    .cd-root[b-8s01zudl3r]  .ll-lesson-item { padding-left: 0.5rem; }
}

@media (max-width: 640px) {
    .learning-outcomes[b-8s01zudl3r] { grid-template-columns: 1fr; }
    .related-courses-grid[b-8s01zudl3r] { grid-template-columns: 1fr; }
    .cd-meta[b-8s01zudl3r] { gap: 0.4rem 0.875rem; }
}

/* ── Prossime sessioni live del corso ── */
.live-sessions-list[b-8s01zudl3r] { display: flex; flex-direction: column; gap: 0.625rem; }
.live-session-row[b-8s01zudl3r] {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: 0.75rem 1rem; border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.03);
}
.live-session-info[b-8s01zudl3r] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.live-session-info strong[b-8s01zudl3r] { color: #f0ece4; font-size: 0.9rem; }
.live-session-info span[b-8s01zudl3r] { color: rgba(240, 236, 228, 0.62); font-size: 0.78rem; }
/* /Pages/Courses/Index.razor.rz.scp.css */
/* ==========================================================================
   Courses/Index — Catalogo corsi (scoped)
   Rifacimento impaginazione guidato da mockup/liquid-glass-v2/courses.html.

   - Barra filtri orizzontale SOLIDA sopra la griglia risultati (gruppi
     Categoria/Livello/Prezzo affiancati con wrap).
   - Su mobile (≤900px) la barra diventa drawer laterale in vetro lg-4 con
     scrim (gruppi impilati): il vetro è consentito perché il drawer è chrome.
   - Card uniformi con thumbnail 16:9, titolo a 2 righe max, rating +
     n. recensioni + n. studenti inline, footer durata + prezzo/barrato.
   - Solo override/addizioni: le superfici solide delle .lc-card arrivano da
     css/lg-surfaces.css (data-ds="lg"); il backdrop-filter si usa solo per
     il drawer filtri mobile (chrome), mai per le superfici contenuto.
   - Token lg usati con fallback per robustezza fuori da data-ds="lg".
   ========================================================================== */

/* ── Layout catalogo: barra filtri orizzontale sopra i risultati ────────── */
.lcc-catalog[b-8120lsakxb] {
    display: block;
}

/* ── Barra filtri: superficie SOLIDA (come .lc-card, vedi lg-surfaces),
     gruppi affiancati in riga con wrap sugli schermi stretti ────────────── */
.lcc-filters[b-8120lsakxb] {
    background: var(--lg-surface, #0e1524);
    border: 1px solid var(--lg-surface-edge, rgba(255, 255, 255, 0.08));
    border-radius: var(--lg-r-card, 20px);
    box-shadow: var(--lg-shadow-2, 0 8px 24px rgba(0, 0, 0, 0.38));
    padding: 16px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
    margin-bottom: 24px;
}

.lcc-filters-head[b-8120lsakxb] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 0;
}

.lcc-filters-head h2[b-8120lsakxb] {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #faf7f0;
}

.lcc-reset[b-8120lsakxb] {
    background: none;
    border: none;
    padding: 4px 0;
    font: 600 12px 'Inter', system-ui, sans-serif;
    color: #f89b4d;
    cursor: pointer;
    transition: color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.lcc-reset:hover[b-8120lsakxb] {
    color: #e87c2a;
    text-decoration: underline;
}

.lcc-reset:focus-visible[b-8120lsakxb] {
    outline: 2px solid #e87c2a;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Bottone chiusura drawer: visibile solo su mobile (≤900px) */
.lcc-filters-close[b-8120lsakxb] {
    display: none;
    background: none;
    border: none;
    padding: 4px 6px;
    font-size: 16px;
    line-height: 1;
    color: rgba(250, 247, 240, 0.78);
    cursor: pointer;
    transition: color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.lcc-filters-close:hover[b-8120lsakxb] {
    color: #faf7f0;
}

.lcc-filters-close:focus-visible[b-8120lsakxb] {
    outline: 2px solid #e87c2a;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Scrim del drawer mobile: nascosto su desktop */
.lcc-scrim[b-8120lsakxb] {
    display: none;
}

.lcc-fgroup[b-8120lsakxb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 0;
}

/* Separatore verticale fra i gruppi affiancati (solo desktop) */
.lcc-fgroup + .lcc-fgroup[b-8120lsakxb] {
    border-left: 1px solid rgba(250, 247, 240, 0.08);
    padding-left: 24px;
}

.lcc-fgroup h3[b-8120lsakxb] {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(250, 247, 240, 0.56);
}

.lcc-fopt[b-8120lsakxb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    margin-bottom: 0;
    font-size: 13.5px;
    color: rgba(250, 247, 240, 0.78);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.lcc-fopt:hover[b-8120lsakxb] {
    color: #faf7f0;
}

.lcc-fopt input[b-8120lsakxb] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #e87c2a;
    flex-shrink: 0;
}

.lcc-fopt input:focus-visible[b-8120lsakxb] {
    outline: 2px solid #e87c2a;
    outline-offset: 2px;
}

/* ── Toolbar sopra la griglia: n. risultati + ordinamento ───────────────── */
.lcc-toolbar[b-8120lsakxb] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.lcc-nres[b-8120lsakxb] {
    font-size: 14px;
    color: rgba(250, 247, 240, 0.56);
    white-space: nowrap;
}

.lcc-nres strong[b-8120lsakxb] {
    color: #faf7f0;
    font-weight: 700;
}

/* Bottone "Filtri" nella toolbar: nascosto su desktop, apre il drawer mobile */
.lcc-filters-open[b-8120lsakxb] {
    display: none;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    background: var(--lg-surface, #0e1524);
    border: 1px solid rgba(250, 247, 240, 0.08);
    border-radius: var(--lg-r-chip, 10px);
    color: #faf7f0;
    font: 500 13px 'Inter', system-ui, sans-serif;
    padding: 9px 14px;
    cursor: pointer;
    transition: border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.lcc-filters-open:hover[b-8120lsakxb] {
    border-color: rgba(250, 247, 240, 0.16);
}

.lcc-filters-open:focus-visible[b-8120lsakxb] {
    outline: none;
    border-color: #e87c2a;
    box-shadow: 0 0 0 2px rgba(232, 124, 42, 0.35);
}

.lcc-sortsel[b-8120lsakxb] {
    margin-left: auto;
    background: var(--lg-surface, #0e1524);
    border: 1px solid rgba(250, 247, 240, 0.08);
    border-radius: var(--lg-r-chip, 10px);
    color: #faf7f0;
    font: 500 13px 'Inter', system-ui, sans-serif;
    padding: 9px 14px;
    outline: none;
    cursor: pointer;
    transition: border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.lcc-sortsel:hover[b-8120lsakxb] {
    border-color: rgba(250, 247, 240, 0.16);
}

.lcc-sortsel:focus-visible[b-8120lsakxb] {
    border-color: #e87c2a;
    box-shadow: 0 0 0 2px rgba(232, 124, 42, 0.35);
}

.lcc-sortsel option[b-8120lsakxb] {
    background: #0e1524;
    color: #faf7f0;
}

/* ── Card corso: thumb 16:9 uniforme, corpo a colonna con footer in fondo ──
   Override mirati su liquid-courses-v321.css (le regole scoped hanno
   specificita' maggiore grazie all'attributo di isolamento). */
.lc-card[b-8120lsakxb] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                box-shadow var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.lc-card:hover[b-8120lsakxb] {
    transform: translateY(-3px);
    box-shadow: var(--lg-shadow-3, 0 12px 40px rgba(0, 0, 0, 0.45));
}

.lc-card:focus-visible[b-8120lsakxb] {
    outline: 2px solid #e87c2a;
    outline-offset: 2px;
}

.lc-card-thumb[b-8120lsakxb] {
    aspect-ratio: 16 / 9;
    height: auto;
    flex-shrink: 0;
}

.lc-card-body[b-8120lsakxb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    padding: 16px;
}

/* Categoria come etichetta testuale uppercase (mockup .cc-cat):
   il colore per hue resta quello delle regole condivise data-hue. */
.lc-cat-tag[b-8120lsakxb] {
    background: transparent;
    padding: 0;
    border-radius: 0;
    /* 12px e' il pavimento dichiarato in PRODUCT.md: questa regola scoped
       riduceva a 11 il valore gia' corretto di liquid-courses-v321.css, ed e'
       l'etichetta che compare su ogni card del catalogo. */
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.lc-card-title[b-8120lsakxb] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: #faf7f0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lc-card-instructor[b-8120lsakxb] {
    font-size: 13px;
    color: rgba(250, 247, 240, 0.56);
}

/* Rating + recensioni + studenti inline */
.lc-card-meta[b-8120lsakxb] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    color: rgba(250, 247, 240, 0.56);
}

.lc-card-rating[b-8120lsakxb] {
    color: #f89b4d;
    font-weight: 700;
}

.lc-card-sep[b-8120lsakxb] {
    color: rgba(250, 247, 240, 0.36);
}

.lc-card-footer[b-8120lsakxb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.lc-card-hours[b-8120lsakxb] {
    font-size: 12.5px;
    color: rgba(250, 247, 240, 0.36);
    white-space: nowrap;
}

.lc-card-price[b-8120lsakxb] {
    font-size: 16px;
    font-weight: 800;
    color: #faf7f0;
    margin-left: auto;
}

.lc-card-price .lc-price-original[b-8120lsakxb] {
    font-size: 13px;
    font-weight: 400;
    color: rgba(250, 247, 240, 0.36);
    margin-left: 6px;
}

/* Skeleton di caricamento: stessa silhouette della card reale */
.lc-card:empty[b-8120lsakxb] {
    min-height: 280px;
    animation: lcc-skeleton-pulse-b-8120lsakxb 1.4s ease-in-out infinite;
}

@keyframes lcc-skeleton-pulse-b-8120lsakxb {
    50% { opacity: 0.55; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Mobile: la sidebar diventa un drawer laterale in VETRO lg-4 (mockup
   liquid-glass-v2/courses.html): il vetro qui è consentito perché il drawer
   è chrome, non superficie contenuto. Apertura via bottone "Filtri" della
   toolbar (.lcc-filters-open), chiusura via scrim, tasto ✕, Escape o
   selezione di un filtro. */
@media (max-width: 900px) {
    .lcc-filters-open[b-8120lsakxb] {
        display: inline-flex;
    }

    /* Nel drawer i gruppi tornano impilati in verticale */
    .lcc-filters[b-8120lsakxb] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(340px, 88vw);
        z-index: 1000;
        margin: 0;
        padding: 24px;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--lg-fill, rgba(255, 255, 255, 0.055));
        -webkit-backdrop-filter: blur(var(--lg-4, 40px)) saturate(var(--lg-sat, 180%));
        backdrop-filter: blur(var(--lg-4, 40px)) saturate(var(--lg-sat, 180%));
        border: 1px solid var(--lg-edge, rgba(255, 255, 255, 0.14));
        border-radius: var(--lg-r-modal, 32px);
        box-shadow: var(--lg-shadow-4, 0 24px 64px rgba(0, 0, 0, 0.55));
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform var(--lg-base, 280ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                    visibility 0s linear var(--lg-base, 280ms);
    }

    .lcc-filters.lcc-open[b-8120lsakxb] {
        transform: translateX(0);
        visibility: visible;
        transition: transform var(--lg-base, 280ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                    visibility 0s;
    }

    .lcc-filters-close[b-8120lsakxb] {
        display: inline-flex;
        margin-left: auto;
    }

    .lcc-scrim[b-8120lsakxb] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(4, 6, 9, 0.6);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--lg-base, 280ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
    }

    .lcc-scrim.lcc-open[b-8120lsakxb] {
        opacity: 1;
        pointer-events: auto;
    }

    .lcc-filters-head[b-8120lsakxb] {
        margin-bottom: 8px;
    }

    .lcc-fgroup[b-8120lsakxb] {
        display: block;
        padding: 12px 0;
        border-top: 1px solid rgba(250, 247, 240, 0.08);
    }

    .lcc-fgroup + .lcc-fgroup[b-8120lsakxb] {
        border-left: none;
        padding-left: 0;
    }

    .lcc-fgroup h3[b-8120lsakxb] {
        margin: 0 0 12px;
    }

    .lcc-fopt[b-8120lsakxb] {
        margin-bottom: 6px;
        white-space: normal;
    }
}

@media (max-width: 640px) {
    .lcc-toolbar[b-8120lsakxb] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .lcc-sortsel[b-8120lsakxb] {
        margin-left: 0;
        width: 100%;
    }
}

/* ── Motion ridotto ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lc-card[b-8120lsakxb],
    .lc-card:hover[b-8120lsakxb] {
        transform: none;
        transition: none;
    }

    .lc-card:empty[b-8120lsakxb] {
        animation: none;
    }

    .lcc-filters[b-8120lsakxb],
    .lcc-scrim[b-8120lsakxb] {
        transition: none;
    }
}

/* ── Trasparenza ridotta: il drawer rinuncia al vetro, resta solido ─────── */
@media (max-width: 900px) and (prefers-reduced-transparency: reduce) {
    .lcc-filters[b-8120lsakxb] {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--lg-surface, #0e1524);
        border-color: var(--lg-surface-edge, rgba(255, 255, 255, 0.08));
    }
}
/* /Pages/Dashboard/Dashboard.razor.rz.scp.css */
/* ==========================================================================
   Dashboard learner — Liquid Glass v2 (rif. mockup/liquid-glass-v2/dashboard.html)
   Vetro SOLO sulla chip "In progress" (lg-1). Tutte le superfici di contenuto
   sono SOLIDE: .section-card / .stat-card / .course-item sono già mappate come
   solide da css/lg-surfaces.css; .db-rec-card è solida per definizione locale.
   Token: --lg-* da css/lg-tokens.css (fallback inclusi per sicurezza).
   ========================================================================== */

/* ── Saluto (unica H1 della pagina) ─────────────────────────────────────── */
.db-greet[b-hqvrhhocn7] {
    padding: 8px 0 24px;
}

.db-greet h1[b-hqvrhhocn7] {
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    color: #FAF7F0;
}

.db-greet p[b-hqvrhhocn7] {
    color: rgba(250, 247, 240, 0.56);
    font-size: 0.9375rem;
    margin: 6px 0 0;
}

/* ── Learning Retention OS: Knowledge Health + sessione di oggi ─────────── */
.db-retention[b-hqvrhhocn7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 20px;
    margin-bottom: 24px;
}

.db-retention:has(> :only-child)[b-hqvrhhocn7] {
    grid-template-columns: 1fr;
}

@media (max-width: 900px) {
    .db-retention[b-hqvrhhocn7] {
        grid-template-columns: 1fr;
    }
}

/* ── La tua Skill Map: anteprima top 5 per padronanza (redesign §4) ──────── */
.db-skillmap[b-hqvrhhocn7] {
    padding-top: 0;
    margin-bottom: 8px;
}

.db-skillmap-list[b-hqvrhhocn7] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.db-skillmap-row[b-hqvrhhocn7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border: 1px solid rgba(220, 235, 255, 0.12);
    border-radius: var(--lg-r-card, 20px);
    background: rgba(14, 21, 36, 0.72);
}

.db-skillmap-name[b-hqvrhhocn7] {
    font-size: 1rem;
    font-weight: 700;
    color: #faf7f0;
}

.db-skillmap-scores[b-hqvrhhocn7] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

@media (forced-colors: active) {
    .db-skillmap-row[b-hqvrhhocn7] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}

/* ── Continua da dove eri — card orizzontale SOLIDA ─────────────────────── */
.section-card.db-continue[b-hqvrhhocn7] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 0;
    overflow: hidden;
    padding: 0;
    margin-bottom: 24px;
}

.db-continue-thumb[b-hqvrhhocn7] {
    min-height: 170px;
    display: flex;
    align-items: flex-end;
    padding: 12px;
}

/* Chip "In progress" — unico elemento vetro della sezione (blur --lg-1). */
.db-chip[b-hqvrhhocn7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--lg-r-chip, 10px);
    font-size: 12px;
    font-weight: 600;
    color: #FAF7F0;
    background: rgba(10, 14, 20, 0.45);
    backdrop-filter: blur(var(--lg-1, 4px));
    -webkit-backdrop-filter: blur(var(--lg-1, 4px));
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.db-continue-body[b-hqvrhhocn7] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-kicker[b-hqvrhhocn7] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #F89B4D;
}

.db-continue-body h2[b-hqvrhhocn7] {
    font-size: 1.1875rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
    color: #FAF7F0;
}

.db-continue-meta[b-hqvrhhocn7] {
    font-size: 0.8125rem;
    color: rgba(250, 247, 240, 0.56);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-progress-row[b-hqvrhhocn7] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    flex-wrap: wrap;
}

.db-resume[b-hqvrhhocn7] {
    margin-left: auto;
}

/* ── Progress bar (condivisa tra continue card e righe corsi) ───────────── */
.db-pbar[b-hqvrhhocn7] {
    flex: 1;
    min-width: 140px;
    height: 6px;
    border-radius: 3px;
    background: rgba(250, 247, 240, 0.10);
    overflow: hidden;
}

.db-pbar-fill[b-hqvrhhocn7] {
    height: 100%;
    background: linear-gradient(90deg, #E87C2A, #F89B4D);
    border-radius: 3px;
    transition: width var(--lg-base, 280ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.db-pct[b-hqvrhhocn7] {
    font-size: 12.5px;
    font-weight: 700;
    color: #F89B4D;
    white-space: nowrap;
}

/* ── Sezioni (header + contenuto, senza pannello contenitore) ───────────── */
.db-sec[b-hqvrhhocn7] {
    padding-top: 16px;
}

.db-sec-head[b-hqvrhhocn7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.db-sec-head h2[b-hqvrhhocn7] {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    color: #FAF7F0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.db-sec-head h2 i[b-hqvrhhocn7] {
    color: #E87C2A;
}

/* ── I miei corsi — righe SOLIDE (.course-item → solida via lg-surfaces) ── */
.db-mylist[b-hqvrhhocn7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.course-item.db-myrow[b-hqvrhhocn7] {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    border-radius: calc(var(--lg-r-card, 20px) - 6px);
}

.db-mythumb[b-hqvrhhocn7] {
    width: 96px;
    height: 60px;
    border-radius: 10px;
}

.db-myinfo h3[b-hqvrhhocn7] {
    font-size: 0.90625rem;
    font-weight: 700;
    margin: 0;
    color: #FAF7F0;
}

.db-mymeta[b-hqvrhhocn7] {
    font-size: 12px;
    color: rgba(250, 247, 240, 0.36);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-myprog[b-hqvrhhocn7] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

/* ── Consigliati per te — card corso SOLIDE ─────────────────────────────── */
.db-rec-grid[b-hqvrhhocn7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.db-rec-card[b-hqvrhhocn7] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--lg-surface, #0e1524);
    border: 1px solid var(--lg-surface-edge, rgba(255, 255, 255, 0.08));
    border-radius: var(--lg-r-card, 20px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30);
    color: inherit;
    text-decoration: none;
    transition: transform var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                box-shadow var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.db-rec-card:hover[b-hqvrhhocn7] {
    transform: translateY(-3px);
    box-shadow: var(--lg-shadow-2, 0 8px 24px rgba(0, 0, 0, 0.38));
    border-color: rgba(250, 247, 240, 0.16);
}

.db-rec-card:focus-visible[b-hqvrhhocn7] {
    outline: 2px solid #F89B4D;
    outline-offset: 2px;
}

.db-rec-thumb[b-hqvrhhocn7] {
    aspect-ratio: 16 / 9;
    position: relative;
}

.db-rec-thumb img[b-hqvrhhocn7],
.db-rec-thumb-fallback[b-hqvrhhocn7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.db-rec-body[b-hqvrhhocn7] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.db-rec-cat[b-hqvrhhocn7] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #F89B4D;
}

.db-rec-body h3[b-hqvrhhocn7] {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    color: #FAF7F0;
}

.db-rec-author[b-hqvrhhocn7] {
    font-size: 0.8125rem;
    color: rgba(250, 247, 240, 0.56);
    margin: 0;
}

.db-rec-meta[b-hqvrhhocn7] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: rgba(250, 247, 240, 0.56);
}

.db-rec-stars[b-hqvrhhocn7] {
    color: #F89B4D;
    font-weight: 700;
}

.db-rec-foot[b-hqvrhhocn7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.db-rec-hours[b-hqvrhhocn7] {
    font-size: 12.5px;
    color: rgba(250, 247, 240, 0.36);
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-rec-price[b-hqvrhhocn7] {
    font-size: 1rem;
    font-weight: 800;
    color: #FAF7F0;
}

.db-rec-price s[b-hqvrhhocn7] {
    font-size: 0.8125rem;
    font-weight: 400;
    color: rgba(250, 247, 240, 0.36);
    margin-left: 6px;
}

/* ── Sezioni extra (AI Skills Coach + Achievements) ─────────────────────── */
.dashboard-sections.db-extras[b-hqvrhhocn7] {
    margin-top: 40px;
    padding-bottom: 24px;
}

.db-extras .section-card h2[b-hqvrhhocn7] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.db-extras .section-card h2 i[b-hqvrhhocn7] {
    color: #E87C2A;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .db-rec-grid[b-hqvrhhocn7] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .section-card.db-continue[b-hqvrhhocn7] {
        grid-template-columns: 1fr;
    }

    .db-continue-thumb[b-hqvrhhocn7] {
        min-height: 120px;
    }
}

@media (max-width: 640px) {
    .db-greet h1[b-hqvrhhocn7] {
        font-size: 1.5rem;
    }

    .db-rec-grid[b-hqvrhhocn7] {
        grid-template-columns: 1fr;
    }

    /* Deviazione dal mockup (che nasconde il bottone): il bottone "Continue"
       resta disponibile su mobile per non perdere funzionalità — va a capo. */
    .course-item.db-myrow[b-hqvrhhocn7] {
        grid-template-columns: 72px 1fr;
    }

    .db-mythumb[b-hqvrhhocn7] {
        width: 72px;
        height: 48px;
    }

    .db-mybtn[b-hqvrhhocn7] {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* ── Estratto dal blocco <style> inline (2026-08-20) ── */

/* Dashboard Container */
.dashboard-container[b-hqvrhhocn7] {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-6);
}

/* Loading State */
.dashboard-loading[b-hqvrhhocn7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: var(--space-4);
}

.dashboard-loading p[b-hqvrhhocn7] { color: rgba(246,248,255,0.6); }

.loading-spinner[b-hqvrhhocn7] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255,255,255,0.12);
    border-top-color: #E87C2A;
    border-radius: 50%;
    animation: spin-b-hqvrhhocn7 1s linear infinite;
}

@keyframes spin-b-hqvrhhocn7 {
    to { transform: rotate(360deg); }
}

/* Dashboard Header */
.dashboard-header[b-hqvrhhocn7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6);
    border-radius: 16px;
    margin-bottom: var(--space-6);
    color: white;
}

.admin-header[b-hqvrhhocn7],
.instructor-header[b-hqvrhhocn7],
.student-header[b-hqvrhhocn7] {
    background: rgba(8,12,24,0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 8px 28px rgba(0,0,0,0.30);
    color: #FAF7F0;
}
/* Accent strip per ruolo (arancio brand) */
.admin-header[b-hqvrhhocn7] { border-left: 1px solid #E87C2A; }
.instructor-header[b-hqvrhhocn7] { border-left: 1px solid #00C9DB; }
.student-header[b-hqvrhhocn7] { border-left: 3px solid #E87C2A; }

.header-content h1[b-hqvrhhocn7] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.header-subtitle[b-hqvrhhocn7] {
    margin: var(--space-2) 0 0 0;
    opacity: 0.9;
    font-size: 1rem;
}

.header-actions .btn[b-hqvrhhocn7] {
    background: linear-gradient(135deg, #e87c2a, #f89b4d);
    /* Testo scuro su arancio (~6.6:1): il bianco era ~2.8:1, sotto AA. */
    color: #1a0f06;
    border: 1px solid transparent;
    box-shadow: 0 6px 18px rgba(232,124,42,0.32);
}

.header-actions .btn:hover[b-hqvrhhocn7] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(232,124,42,0.42);
}

/* Stats Grid */
.stats-grid[b-hqvrhhocn7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.stat-card[b-hqvrhhocn7] {
    background: rgba(8,12,24,0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    box-shadow: 0 8px 28px rgba(0,0,0,0.30);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.stat-card:hover[b-hqvrhhocn7] {
    transform: translateY(-2px);
    border-color: rgba(232,124,42,0.35);
    box-shadow: 0 14px 38px rgba(0,0,0,0.45);
}

.stat-card.clickable[b-hqvrhhocn7] {
    cursor: pointer;
}

.stat-card.clickable:hover[b-hqvrhhocn7] {
    transform: translateY(-4px);
    border-color: rgba(232,124,42,0.45);
    box-shadow: 0 16px 42px rgba(0,0,0,0.50);
}

.stat-card.clickable:active[b-hqvrhhocn7] {
    transform: translateY(-2px);
}

.stat-icon[b-hqvrhhocn7] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.stat-purple .stat-icon[b-hqvrhhocn7] { background: linear-gradient(135deg, var(--lp-accent, #6C3CE1), var(--lp-accent-2, #00d4ff)); }
.stat-blue .stat-icon[b-hqvrhhocn7] { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.stat-green .stat-icon[b-hqvrhhocn7] { background: linear-gradient(135deg, #10b981, #059669); }
.stat-orange .stat-icon[b-hqvrhhocn7] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.stat-teal .stat-icon[b-hqvrhhocn7] { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.stat-yellow .stat-icon[b-hqvrhhocn7] { background: linear-gradient(135deg, #eab308, #ca8a04); }

.stat-content[b-hqvrhhocn7] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-hqvrhhocn7] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #FAF7F0;
    line-height: 1.2;
}

.stat-label[b-hqvrhhocn7] {
    font-size: 0.875rem;
    color: rgba(246,248,255,0.6);
    margin-top: 2px;
}

/* Dashboard Sections */
.dashboard-sections[b-hqvrhhocn7] {
    display: grid;
    gap: var(--space-6);
}

.dashboard-sections.two-columns[b-hqvrhhocn7] {
    grid-template-columns: 1fr 1fr;
}

.section-card[b-hqvrhhocn7] {
    background: rgba(8,12,24,0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: var(--space-5);
    box-shadow: 0 8px 28px rgba(0,0,0,0.30);
    color: #FAF7F0;
}

.section-card.full-width[b-hqvrhhocn7] {
    grid-column: 1 / -1;
}

.section-card h2[b-hqvrhhocn7],
.section-card h3[b-hqvrhhocn7] {
    color: #FAF7F0;
}

.section-card h3[b-hqvrhhocn7] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 var(--space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.section-card h2 i[b-hqvrhhocn7],
.section-card h3 i[b-hqvrhhocn7] {
    color: #E87C2A;
}

.section-header[b-hqvrhhocn7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.section-header h3[b-hqvrhhocn7] {
    margin: 0;
}

.view-all[b-hqvrhhocn7] {
    color: #E87C2A;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.view-all:hover[b-hqvrhhocn7] {
    text-decoration: underline;
}

/* Quick Actions Grid */
.quick-actions-grid[b-hqvrhhocn7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

.quick-action[b-hqvrhhocn7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    text-decoration: none;
    color: rgba(246,248,255,0.8);
    transition: all 0.2s;
}

.quick-action:hover[b-hqvrhhocn7] {
    background: rgba(232,124,42,0.16);
    border-color: rgba(232,124,42,0.4);
    color: #E87C2A;
    transform: translateY(-2px);
}

.quick-action i[b-hqvrhhocn7] {
    font-size: 1.5rem;
}

.quick-action span[b-hqvrhhocn7] {
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
}

/* Course List (Instructor) */
.course-list[b-hqvrhhocn7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.course-item[b-hqvrhhocn7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
}

.course-info h4[b-hqvrhhocn7] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #FAF7F0;
}

.course-meta[b-hqvrhhocn7] {
    font-size: 0.8rem;
    color: rgba(246,248,255,0.6);
}

/* Activity List */
.activity-list[b-hqvrhhocn7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.activity-item[b-hqvrhhocn7] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.activity-icon[b-hqvrhhocn7] {
    width: 36px;
    height: 36px;
    background: var(--gray-100);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}

.activity-content[b-hqvrhhocn7] {
    display: flex;
    flex-direction: column;
}

.activity-content span[b-hqvrhhocn7] {
    font-size: 0.9rem;
}

.activity-content small[b-hqvrhhocn7] {
    color: var(--gray-500);
    font-size: 0.8rem;
}

/* Courses Carousel (Student) */
.courses-carousel[b-hqvrhhocn7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.course-card-modern[b-hqvrhhocn7] {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,0.30);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.course-card-modern:hover[b-hqvrhhocn7] {
    transform: translateY(-4px);
    border-color: rgba(232,124,42,0.35);
    box-shadow: 0 14px 38px rgba(0,0,0,0.45);
}

.course-card-content h4[b-hqvrhhocn7] { color: #FAF7F0; }

.course-thumbnail[b-hqvrhhocn7] {
    height: 100px;
}

.course-card-content[b-hqvrhhocn7] {
    padding: var(--space-4);
}

.course-card-content h4[b-hqvrhhocn7] {
    margin: 0 0 var(--space-3) 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.progress-container[b-hqvrhhocn7] {
    margin-bottom: var(--space-3);
}

.progress-bar-modern[b-hqvrhhocn7] {
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-hqvrhhocn7] {
    height: 100%;
    background: linear-gradient(90deg, #e87c2a, #f89b4d);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.progress-text[b-hqvrhhocn7] {
    font-size: 0.75rem;
    color: rgba(246,248,255,0.6);
    margin-top: 4px;
    display: block;
}

.course-card-footer[b-hqvrhhocn7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.last-accessed[b-hqvrhhocn7] {
    font-size: 0.75rem;
    color: rgba(246,248,255,0.6);
}

/* Empty State */
.empty-courses[b-hqvrhhocn7] {
    text-align: center;
    padding: var(--space-8);
}

.empty-courses i[b-hqvrhhocn7] {
    font-size: 3rem;
    color: rgba(246,248,255,0.25);
    margin-bottom: var(--space-4);
}

.empty-courses h4[b-hqvrhhocn7] {
    margin: 0 0 var(--space-2) 0;
    color: #FAF7F0;
}

.empty-courses p[b-hqvrhhocn7] {
    color: rgba(246,248,255,0.6);
    margin-bottom: var(--space-4);
}

.empty-state[b-hqvrhhocn7] {
    color: rgba(246,248,255,0.6);
    text-align: center;
    padding: var(--space-4);
}

/* Achievements */
.achievements-grid[b-hqvrhhocn7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

.achievement[b-hqvrhhocn7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: 12px;
    text-align: center;
}

.achievement.unlocked[b-hqvrhhocn7] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}

/* Testo scuro sul giallo pallido: senza questa regola lo span
   ereditava il chiarissimo della section-card (~1.1:1, illeggibile). */
.achievement.unlocked span[b-hqvrhhocn7] {
    color: #92400e;
}

.achievement.unlocked i[b-hqvrhhocn7] {
    color: #d97706;
}

.achievement.locked[b-hqvrhhocn7] {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
    opacity: 0.55;
}

.achievement.locked i[b-hqvrhhocn7] {
    color: rgba(246,248,255,0.4);
}

.achievement.locked span[b-hqvrhhocn7] {
    color: rgba(246,248,255,0.6);
}

.achievement i[b-hqvrhhocn7] {
    font-size: 1.5rem;
}

.achievement span[b-hqvrhhocn7] {
    font-size: 0.75rem;
    font-weight: 500;
}

/* Dashboard CTA buttons (empty-state / carousel) — accento arancio brand */
.dashboard-container .btn-primary[b-hqvrhhocn7] {
    background: linear-gradient(135deg, #e87c2a, #f89b4d);
    /* Testo scuro su arancio (~6.6:1): il bianco era ~2.8:1, sotto AA. */
    color: #1a0f06;
    border: 1px solid transparent;
    box-shadow: 0 6px 18px rgba(232,124,42,0.32);
}

.dashboard-container .btn-primary:hover[b-hqvrhhocn7] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(232,124,42,0.42);
}

.dashboard-container .btn-outline[b-hqvrhhocn7] {
    background: transparent;
    color: #E87C2A;
    border: 1px solid rgba(232,124,42,0.45);
}

.dashboard-container .btn-outline:hover[b-hqvrhhocn7] {
    background: rgba(232,124,42,0.12);
}

/* Responsive */
@media (max-width: 1024px) {
    .stats-grid[b-hqvrhhocn7] {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-sections.two-columns[b-hqvrhhocn7] {
        grid-template-columns: 1fr;
    }

    .courses-carousel[b-hqvrhhocn7] {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-actions-grid[b-hqvrhhocn7] {
        grid-template-columns: repeat(2, 1fr);
    }

    .achievements-grid[b-hqvrhhocn7] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard-container[b-hqvrhhocn7] {
        padding: var(--space-4);
    }

    .dashboard-header[b-hqvrhhocn7] {
        flex-direction: column;
        text-align: center;
        gap: var(--space-4);
    }

    .header-content h1[b-hqvrhhocn7] {
        font-size: 1.5rem;
        justify-content: center;
    }

    .stats-grid[b-hqvrhhocn7] {
        grid-template-columns: 1fr;
    }

    .courses-carousel[b-hqvrhhocn7] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Dashboard/Notifications.razor.rz.scp.css */
/* Stile estratto dal blocco <style> inline della pagina (2026-08-20):
   CSS isolation di Blazor invece dell'iniezione globale al render. */

/* === Notifications — dark-glass con selettori prefissati.
   Ogni regola parte da .notifications-page: le versioni generiche
   (.btn, .page-header, .empty-state...) trapelavano globalmente e
   sovrascrivevano il design system per tutto il tempo in cui la
   pagina restava montata. === */
.notifications-page[b-l4wtbcfelo] {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    color: #FAF7F0;
}

.notifications-page .page-header[b-l4wtbcfelo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.notifications-page .page-header h1[b-l4wtbcfelo] {
    font-size: clamp(1.5rem, 3vw, 1.75rem);
    font-weight: 700;
    color: #FAF7F0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.notifications-page .page-header h1 i[b-l4wtbcfelo] {
    color: #E87C2A;
}

.notifications-page .subtitle[b-l4wtbcfelo] {
    color: rgba(246,248,255,0.6);
    margin: 0.5rem 0 0 0;
}

.notifications-page .btn[b-l4wtbcfelo] {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.notifications-page .btn-outline[b-l4wtbcfelo] {
    background: rgba(255,255,255,0.05);
    color: #FAF7F0;
}

.notifications-page .btn-outline:hover[b-l4wtbcfelo] {
    border-color: rgba(232,124,42,0.4);
    color: #E87C2A;
}

.notifications-page .btn-primary[b-l4wtbcfelo] {
    background: linear-gradient(135deg, #e87c2a, #f89b4d);
    /* Testo scuro su arancio (~6.6:1): il bianco era ~2.8:1, sotto AA. */
    color: #1a0f06;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(232,124,42,0.32);
}

.notifications-page .btn-primary:hover[b-l4wtbcfelo] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(232,124,42,0.42);
}

.notifications-page .loading-state[b-l4wtbcfelo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
    color: rgba(246,248,255,0.7);
}

.notifications-page .spinner[b-l4wtbcfelo] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255,255,255,0.10);
    border-top-color: #E87C2A;
    border-radius: 50%;
    animation: notifications-spin-b-l4wtbcfelo 1s linear infinite;
}

@keyframes notifications-spin-b-l4wtbcfelo {
    to { transform: rotate(360deg); }
}

.notifications-page .empty-state[b-l4wtbcfelo] {
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(8,12,24,0.72);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
}

.notifications-page .empty-icon[b-l4wtbcfelo] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: rgba(232,124,42,0.14);
    border: 1px solid rgba(232,124,42,0.28);
    display: flex;
    align-items: center;
    justify-content: center;
}

.notifications-page .empty-icon i[b-l4wtbcfelo] {
    font-size: 2.5rem;
    color: #E87C2A;
}

.notifications-page .empty-state h2[b-l4wtbcfelo] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #FAF7F0;
    margin-bottom: 0.5rem;
}

.notifications-page .empty-state p[b-l4wtbcfelo] {
    color: rgba(246,248,255,0.6);
    margin-bottom: 1.5rem;
}

.notifications-page .notifications-list[b-l4wtbcfelo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.notifications-page .notification-item[b-l4wtbcfelo] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: rgba(8,12,24,0.72);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s, border-color 0.2s;
    position: relative;
}

.notifications-page .notification-item:hover[b-l4wtbcfelo] {
    background: rgba(255,255,255,0.06);
}

.notifications-page .notification-item.unread[b-l4wtbcfelo] {
    background: rgba(232,124,42,0.08);
    border-color: rgba(232,124,42,0.25);
}

.notifications-page .notification-item.unread:hover[b-l4wtbcfelo] {
    background: rgba(232,124,42,0.14);
}

.notifications-page .notification-icon[b-l4wtbcfelo] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notifications-page .notification-icon.course[b-l4wtbcfelo] { background: rgba(37,99,235,0.18); color: #93c5fd; }
.notifications-page .notification-icon.enrollment[b-l4wtbcfelo] { background: rgba(5,150,105,0.18); color: #6ee7b7; }
.notifications-page .notification-icon.achievement[b-l4wtbcfelo] { background: rgba(217,119,6,0.18); color: #fcd34d; }
.notifications-page .notification-icon.system[b-l4wtbcfelo] { background: rgba(232,124,42,0.16); color: #E87C2A; }
.notifications-page .notification-icon.reminder[b-l4wtbcfelo] { background: rgba(219,39,119,0.18); color: #f9a8d4; }

.notifications-page .notification-content[b-l4wtbcfelo] {
    flex: 1;
}

.notifications-page .notification-message[b-l4wtbcfelo] {
    font-size: 0.95rem;
    color: rgba(246,248,255,0.9);
    margin: 0 0 0.25rem 0;
    line-height: 1.4;
}

.notifications-page .notification-time[b-l4wtbcfelo] {
    font-size: 0.8rem;
    color: rgba(246,248,255,0.5);
}

.notifications-page .unread-indicator[b-l4wtbcfelo] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E87C2A;
    flex-shrink: 0;
    margin-top: 8px;
}

.notifications-page .btn-sm[b-l4wtbcfelo] {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .notifications-page[b-l4wtbcfelo] {
        padding: 1rem;
    }

    .notifications-page .page-header[b-l4wtbcfelo] {
        flex-direction: column;
        gap: 1rem;
    }
}
/* /Pages/Dashboard/StudentDashboard.razor.rz.scp.css */
/* StudentDashboard — CSS isolation (Fase 3 W8 integration, 2026-04-21) */

.dashboard-progress-row[b-gi1uy0ig5c] {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    align-items: center;
    margin: var(--space-6) 0 var(--space-8);
}

@media (max-width: 48rem) {
    .dashboard-progress-row[b-gi1uy0ig5c] {
        justify-content: center;
    }
}

.card-header-link[b-gi1uy0ig5c] {
    font-size: 0.85rem;
    color: var(--lp-accent-warm, #e87c2a);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.card-header-link:hover[b-gi1uy0ig5c] {
    text-decoration: underline;
}

/* ============================================================
   Liste e statistiche
   Queste classi esistevano solo in bundle-admin-learning-v2.css,
   che viene caricato esclusivamente sotto AdminLayout: sulla
   dashboard studente il markup era quindi senza stile.
   ============================================================ */

.courses-list[b-gi1uy0ig5c] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.course-item[b-gi1uy0ig5c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border-radius: 12px;
}

@media (max-width: 640px) {
    .course-item[b-gi1uy0ig5c] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.course-info[b-gi1uy0ig5c] {
    min-width: 0;
}

.course-title[b-gi1uy0ig5c] {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.course-category[b-gi1uy0ig5c] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
}

.course-category i[b-gi1uy0ig5c] {
    margin-right: 0.25rem;
}

.course-date[b-gi1uy0ig5c] {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--lp-faint, rgba(250, 247, 240, 0.55));
}

.course-progress[b-gi1uy0ig5c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.progress-bar[b-gi1uy0ig5c] {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.progress-fill[b-gi1uy0ig5c] {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #e87c2a, #f89b4d);
}

.progress-text[b-gi1uy0ig5c] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
    font-variant-numeric: tabular-nums;
}

.progress-section[b-gi1uy0ig5c] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.stats-list[b-gi1uy0ig5c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-item[b-gi1uy0ig5c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}

.stat-label[b-gi1uy0ig5c] {
    font-size: 0.875rem;
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
}

.stat-value[b-gi1uy0ig5c] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lessons-list[b-gi1uy0ig5c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lesson-item[b-gi1uy0ig5c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}

.lesson-icon[b-gi1uy0ig5c] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(232, 124, 42, 0.14);
    color: var(--lp-accent-warm, #e87c2a);
}

.lesson-info[b-gi1uy0ig5c] {
    flex: 1;
    min-width: 0;
}

.lesson-info h4[b-gi1uy0ig5c] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.lesson-info p[b-gi1uy0ig5c] {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
}

.lesson-duration[b-gi1uy0ig5c] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
    font-variant-numeric: tabular-nums;
}

.empty-text[b-gi1uy0ig5c] {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--lp-muted, rgba(250, 247, 240, 0.72));
}

/* Spinner: la forma di .spinner sta in bundle non caricati da
   index.html; senza queste regole l'indicatore e' invisibile. */
.spinner[b-gi1uy0ig5c] {
    display: inline-block;
    border-radius: 50%;
    border-style: solid;
    border-color: rgba(250, 247, 240, 0.12);
    border-top-color: var(--lp-accent-warm, #e87c2a);
    animation: student-dashboard-spin-b-gi1uy0ig5c 0.8s linear infinite;
    width: 32px;
    height: 32px;
    border-width: 3px;
}

.spinner-lg[b-gi1uy0ig5c] {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

@keyframes student-dashboard-spin-b-gi1uy0ig5c {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .spinner[b-gi1uy0ig5c] {
        animation-duration: 2s;
    }
}
/* /Pages/Learning/Certificates.razor.rz.scp.css */
/* Stile estratto dal blocco <style> inline della pagina (2026-08-20):
   CSS isolation di Blazor invece dell'iniezione globale al render. */

/* === Certificates — self-contained dark-glass (bridge non rimappa --gray-900) === */
.certificates-page[b-ugpm715u1t] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    color: #FAF7F0;
}

.certificates-page .page-header[b-ugpm715u1t] {
    margin-bottom: 2rem;
}

.certificates-page .page-header h1[b-ugpm715u1t] {
    font-size: clamp(1.5rem, 3vw, 1.75rem);
    font-weight: 700;
    color: #FAF7F0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.certificates-page .page-header h1 i[b-ugpm715u1t] {
    color: #E87C2A;
}

.certificates-page .subtitle[b-ugpm715u1t] {
    color: rgba(246,248,255,0.6);
    margin: 0.5rem 0 0 0;
}

.certificates-page .verify-box[b-ugpm715u1t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
    background: rgba(8,12,24,0.72);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
}

.certificates-page .verify-box-text h2[b-ugpm715u1t] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #FAF7F0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.certificates-page .verify-box-text h2 i[b-ugpm715u1t] {
    color: #E87C2A;
}

.certificates-page .verify-box-text p[b-ugpm715u1t] {
    font-size: 0.85rem;
    color: rgba(246,248,255,0.6);
    margin: 0.25rem 0 0 0;
}

.certificates-page .loading-state[b-ugpm715u1t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
    color: rgba(246,248,255,0.7);
}

.certificates-page .spinner[b-ugpm715u1t] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255,255,255,0.10);
    border-top-color: #E87C2A;
    border-radius: 50%;
    animation: spin-b-ugpm715u1t 1s linear infinite;
}

@keyframes spin-b-ugpm715u1t {
    to { transform: rotate(360deg); }
}

.certificates-page .empty-state[b-ugpm715u1t] {
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(8,12,24,0.72);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
}

.certificates-page .empty-icon[b-ugpm715u1t] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: rgba(232,124,42,0.14);
    border: 1px solid rgba(232,124,42,0.28);
    display: flex;
    align-items: center;
    justify-content: center;
}

.certificates-page .empty-icon i[b-ugpm715u1t] {
    font-size: 2.5rem;
    color: #E87C2A;
}

.certificates-page .empty-state h2[b-ugpm715u1t] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #FAF7F0;
    margin-bottom: 0.5rem;
}

.certificates-page .empty-state p[b-ugpm715u1t] {
    color: rgba(246,248,255,0.6);
    margin-bottom: 1.5rem;
}

.certificates-grid[b-ugpm715u1t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.certificate-card[b-ugpm715u1t] {
    background: rgba(8,12,24,0.72);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 8px 28px rgba(0,0,0,0.30);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.certificate-card:hover[b-ugpm715u1t] {
    transform: translateY(-3px);
    border-color: rgba(232,124,42,0.35);
    box-shadow: 0 14px 38px rgba(0,0,0,0.45);
}

.certificate-preview[b-ugpm715u1t] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.certificate-badge[b-ugpm715u1t] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e87c2a, #f89b4d);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(232,124,42,0.32);
}

.certificate-badge i[b-ugpm715u1t] {
    font-size: 1.75rem;
    /* Inchiostro scuro su arancio: il bianco sarebbe ~2.8:1, sotto soglia */
    color: #1a0f06;
}

.certificate-details h3[b-ugpm715u1t] {
    font-size: 1rem;
    font-weight: 600;
    color: #FAF7F0;
    margin: 0 0 0.25rem 0;
}

.certificate-details .instructor[b-ugpm715u1t] {
    font-size: 0.85rem;
    color: rgba(246,248,255,0.6);
    margin: 0;
}

.certificate-details .date[b-ugpm715u1t] {
    font-size: 0.8rem;
    color: rgba(246,248,255,0.5);
    margin: 0.25rem 0 0 0;
}

.certificate-actions[b-ugpm715u1t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.download-error[b-ugpm715u1t] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--lp-accent-danger, #f87171);
}

.certificates-page .btn[disabled][b-ugpm715u1t] {
    opacity: 0.7;
    cursor: progress;
}

.certificates-page .btn[b-ugpm715u1t] {
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.certificates-page .btn-primary[b-ugpm715u1t] {
    background: linear-gradient(135deg, #e87c2a, #f89b4d);
    /* Testo scuro su arancio (~6.6:1): il bianco era ~2.8:1, sotto AA.
       Stessa regola di lg-surfaces.css per .btn-primary. */
    color: #1a0f06;
    box-shadow: 0 6px 18px rgba(232,124,42,0.32);
}

.certificates-page .btn-primary:hover[b-ugpm715u1t] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(232,124,42,0.42);
}

.certificates-page .btn-sm[b-ugpm715u1t] {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .certificates-page[b-ugpm715u1t] {
        padding: 1rem;
    }

    .certificates-grid[b-ugpm715u1t] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Learning/Downloads.razor.rz.scp.css */
.offline-page[b-k5rvxp4kcd] { width:min(72rem,100%); margin:0 auto; padding-block:clamp(1rem,4vw,3rem) 6rem; color:var(--lp-text); }
.offline-hero[b-k5rvxp4kcd],.offline-course[b-k5rvxp4kcd],.offline-state[b-k5rvxp4kcd] { border-radius:var(--lg-r-panel); }
.offline-hero[b-k5rvxp4kcd] { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; padding:clamp(1.25rem,4vw,2.5rem); }
.offline-hero h1[b-k5rvxp4kcd] { margin:.25rem 0 .5rem; font-size:clamp(2rem,6vw,3.5rem); }
.offline-hero p[b-k5rvxp4kcd],.offline-storage span[b-k5rvxp4kcd],.offline-item-copy span[b-k5rvxp4kcd] { color:var(--lp-muted); }
.offline-kicker[b-k5rvxp4kcd] { color:var(--lp-accent-warm); font-size:0.75rem; font-weight:800; letter-spacing:.14em; }
.offline-storage[b-k5rvxp4kcd] { display:grid; gap:.35rem; min-width:13rem; }
progress[b-k5rvxp4kcd] { width:100%; accent-color:var(--lp-accent-warm); }
.offline-state[b-k5rvxp4kcd] { margin-top:1rem; padding:2rem; text-align:center; }
.offline-state--warning[b-k5rvxp4kcd] { border-color:#ffd166; }
.offline-list[b-k5rvxp4kcd] { display:grid; gap:1rem; margin-top:1rem; }
.offline-course[b-k5rvxp4kcd] { padding:1.25rem; }
.offline-course>header[b-k5rvxp4kcd],.offline-course li[b-k5rvxp4kcd] { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.offline-course h2[b-k5rvxp4kcd] { margin:.2rem 0; font-size:1.25rem; }
.offline-course ul[b-k5rvxp4kcd] { list-style:none; margin:1rem 0 0; padding:0; }
.offline-course li[b-k5rvxp4kcd] { min-height:4rem; padding:.75rem 0; border-top:1px solid var(--lp-border); }
.offline-item-copy[b-k5rvxp4kcd] { display:grid; gap:.25rem; min-width:0; }
.offline-actions[b-k5rvxp4kcd] { display:flex; gap:.5rem; }
.offline-icon-button[b-k5rvxp4kcd] { display:inline-grid; place-items:center; min-width:44px; min-height:44px; border:1px solid var(--lp-border); border-radius:50%; background:var(--lg-control); color:var(--lp-text); text-decoration:none; }
.offline-icon-button:focus-visible[b-k5rvxp4kcd] { outline:2px solid var(--lp-accent-warm); outline-offset:2px; }
.offline-icon-button--danger[b-k5rvxp4kcd] { color:#ffb4ab; }
@media (max-width:767px) {
  .offline-page[b-k5rvxp4kcd] { padding-inline:max(1rem,env(safe-area-inset-left)); }
  .offline-hero[b-k5rvxp4kcd] { align-items:stretch; flex-direction:column; }
  .offline-storage[b-k5rvxp4kcd] { min-width:0; }
  .offline-course>header[b-k5rvxp4kcd] { align-items:flex-start; }
}
@media (forced-colors:active) { .offline-hero[b-k5rvxp4kcd],.offline-course[b-k5rvxp4kcd],.offline-state[b-k5rvxp4kcd] { border:1px solid CanvasText; } }
@media (prefers-reduced-motion:reduce) { .offline-page *[b-k5rvxp4kcd] { scroll-behavior:auto!important; transition:none!important; } }

/* ── Modale conferma rimozione (ModalShell) ── */
.offline-confirm-overlay[b-k5rvxp4kcd] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
}

.offline-confirm-dialog[b-k5rvxp4kcd] {
    width: min(420px, 100%);
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    background: var(--lg-surface, #0e1524);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    color: var(--lp-color-text, #eef3ff);
}

.offline-confirm-title[b-k5rvxp4kcd] {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.offline-confirm-text[b-k5rvxp4kcd] {
    margin: 0 0 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--lp-color-text-muted, #b8c2d8);
}

.offline-confirm-actions[b-k5rvxp4kcd] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.offline-confirm-cancel[b-k5rvxp4kcd],
.offline-confirm-danger[b-k5rvxp4kcd] {
    min-height: 44px;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.offline-confirm-cancel[b-k5rvxp4kcd] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    color: var(--lp-color-text, #eef3ff);
}

.offline-confirm-cancel:hover[b-k5rvxp4kcd] {
    background: rgba(255, 255, 255, 0.1);
}

.offline-confirm-danger[b-k5rvxp4kcd] {
    background: rgba(239, 68, 68, 0.9);
    border: 1px solid transparent;
    color: #fff;
}

.offline-confirm-danger:hover[b-k5rvxp4kcd] {
    background: rgba(239, 68, 68, 1);
}

.offline-confirm-cancel:focus-visible[b-k5rvxp4kcd],
.offline-confirm-danger:focus-visible[b-k5rvxp4kcd] {
    outline: 2px solid var(--lg-focus, #ffb27f);
    outline-offset: 2px;
}
/* /Pages/Learning/ImparaPrimaDiPartire.razor.rz.scp.css */
/* ── Stats row ── */
.ipp-stats-section[b-6vmj1vv5yk] {
    padding-top: 0;
    padding-bottom: 0;
}

.ipp-stats-row[b-6vmj1vv5yk] {
    display: flex;
    gap: 2rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--lp-color-border, rgba(126,138,166,.18));
    border-bottom: 1px solid var(--lp-color-border, rgba(126,138,166,.18));
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.ipp-stat[b-6vmj1vv5yk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ipp-stat-val[b-6vmj1vv5yk] {
    font-size: clamp(1.5rem, 3vw, 1.75rem);
    font-weight: 700;
    color: var(--lp-color-text, #eef3ff);
    letter-spacing: -0.03em;
    line-height: 1;
}

.ipp-stat-accent[b-6vmj1vv5yk] {
    color: var(--lp-color-accent, #e87c2a);
}

.ipp-stat-label[b-6vmj1vv5yk] {
    font-size: 0.75rem;
    color: var(--lp-color-muted, #7e8aa6);
}

/* ── Destination chips ── */
.ipp-dest-label[b-6vmj1vv5yk] {
    font-size: 0.75rem;
    color: var(--lp-color-muted, #7e8aa6);
    margin-bottom: 0.6rem;
}

.ipp-dest-row[b-6vmj1vv5yk] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.ipp-dest-chip[b-6vmj1vv5yk] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    background: var(--lp-color-surface, #0d1320);
    border: 1px solid var(--lp-color-border, rgba(126,138,166,.18));
    border-radius: 2rem;
    font-size: 0.8125rem;
    color: var(--lp-color-muted, #7e8aa6);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    font-family: inherit;
    font-weight: 500;
    text-decoration: none;
}

.ipp-dest-chip:hover[b-6vmj1vv5yk],
.ipp-dest-chip:focus-visible[b-6vmj1vv5yk],
.ipp-dest-chip--active[b-6vmj1vv5yk] {
    border-color: var(--lp-color-accent, #e87c2a);
    color: var(--lp-color-text, #eef3ff);
    background: rgba(232,124,42,.08);
}

.ipp-dest-chip:focus-visible[b-6vmj1vv5yk] {
    outline: 2px solid var(--lp-color-accent, #e87c2a);
    outline-offset: 2px;
}

.ipp-dest-chip--all[b-6vmj1vv5yk] {
    color: var(--lp-color-accent, #e87c2a);
    border-color: transparent;
    font-weight: 600;
}

/* ── Tab bar ── */
.ipp-tab-bar[b-6vmj1vv5yk] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--lp-color-border, rgba(126,138,166,.18));
    margin-bottom: 2rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.ipp-tab-bar[b-6vmj1vv5yk]::-webkit-scrollbar {
    display: none;
}

.ipp-tab-btn[b-6vmj1vv5yk] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--lp-color-muted, #7e8aa6);
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 500;
    padding: 0.625rem 1.125rem 0.75rem;
    position: relative;
    white-space: nowrap;
    transition: color 0.2s;
    letter-spacing: 0.01em;
}

.ipp-tab-btn[b-6vmj1vv5yk]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--lp-color-accent, #e87c2a);
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transition: transform 0.2s;
}

.ipp-tab-btn:hover[b-6vmj1vv5yk] {
    color: var(--lp-color-text, #eef3ff);
}

.ipp-tab-btn--active[b-6vmj1vv5yk] {
    color: var(--lp-color-text, #eef3ff);
}

.ipp-tab-btn--active[b-6vmj1vv5yk]::after {
    transform: scaleX(1);
}

.ipp-tab-count[b-6vmj1vv5yk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    background: var(--lp-color-accent, #e87c2a);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 1rem;
    margin-left: 0.375rem;
    vertical-align: middle;
    line-height: 1;
}

/* ── Cards grid ── */
.ipp-cards-grid[b-6vmj1vv5yk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.ipp-card[b-6vmj1vv5yk] {
    background: var(--lp-color-surface, #0d1320);
    border: 1px solid var(--lp-color-border, rgba(126,138,166,.18));
    border-radius: 0.875rem;
    padding: 1.5rem;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.ipp-card[b-6vmj1vv5yk]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(232,124,42,.15), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.ipp-card:hover[b-6vmj1vv5yk] {
    border-color: rgba(232,124,42,.45);
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(0,0,0,.4);
}

.ipp-card:hover[b-6vmj1vv5yk]::before {
    opacity: 1;
}

/* Featured card */
.ipp-card--featured[b-6vmj1vv5yk] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    background: linear-gradient(135deg, var(--lp-color-surface, #0d1320) 0%, #131d30 100%);
}

@media (max-width: 600px) {
    .ipp-card--featured[b-6vmj1vv5yk] {
        grid-template-columns: 1fr;
    }
}

.ipp-card-content[b-6vmj1vv5yk] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ipp-featured-visual[b-6vmj1vv5yk] {
    background: rgba(17,24,39,.6);
    border-radius: 0.625rem;
    height: 11.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.75rem;
    position: relative;
    overflow: hidden;
}

.ipp-featured-visual[b-6vmj1vv5yk]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(232,124,42,.12), transparent 70%);
}

/* ── Card components ── */
.ipp-card-icon[b-6vmj1vv5yk] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    margin-bottom: 1rem;
}

.ipp-icon-bg--orange[b-6vmj1vv5yk] { background: rgba(232,124,42,.15); }
.ipp-icon-bg--blue[b-6vmj1vv5yk]   { background: rgba(94,130,255,.12); }
.ipp-icon-bg--purple[b-6vmj1vv5yk] { background: rgba(175,82,222,.12); }
.ipp-icon-bg--green[b-6vmj1vv5yk]  { background: rgba(52,199,89,.12); }

.ipp-card-title[b-6vmj1vv5yk] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.35;
    color: var(--lp-color-text, #eef3ff);
}

.ipp-card-title-lg[b-6vmj1vv5yk] {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.25;
    color: var(--lp-color-text, #eef3ff);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ipp-card-subtitle[b-6vmj1vv5yk] {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--lp-color-muted, #7e8aa6);
}

.ipp-card-desc[b-6vmj1vv5yk] {
    font-size: 0.8125rem;
    color: var(--lp-color-muted, #7e8aa6);
    line-height: 1.6;
    margin-bottom: 1.125rem;
}

.ipp-card-meta[b-6vmj1vv5yk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--lp-color-muted, #7e8aa6);
    margin-top: 1rem;
}

.ipp-card-cta[b-6vmj1vv5yk] {
    background: none;
    border: none;
    color: var(--lp-color-accent, #e87c2a);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: gap 0.2s;
    padding: 0;
}

.ipp-card-cta:hover[b-6vmj1vv5yk] {
    gap: 0.5rem;
}

.ipp-card-cta--lg[b-6vmj1vv5yk] {
    font-size: 0.8125rem;
}

/* ── Tags ── */
.ipp-tag[b-6vmj1vv5yk] {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    padding: 0.1875rem 0.5625rem;
    border-radius: 1.25rem;
    margin-bottom: 0.625rem;
}

.ipp-tag--free[b-6vmj1vv5yk] {
    background: rgba(52,199,89,.1);
    border: 1px solid rgba(52,199,89,.3);
    color: #34c759;
}

.ipp-tag--new[b-6vmj1vv5yk] {
    background: rgba(232,124,42,.1);
    border: 1px solid rgba(232,124,42,.3);
    color: #f59a54;
}

.ipp-tag--guide[b-6vmj1vv5yk] {
    background: rgba(94,130,255,.1);
    border: 1px solid rgba(94,130,255,.3);
    color: #7b9eff;
}

.ipp-tag--mob[b-6vmj1vv5yk] {
    background: rgba(175,82,222,.1);
    border: 1px solid rgba(175,82,222,.3);
    color: #c97dff;
}

/* ── CEFR level badges ── */
.ipp-level-strip[b-6vmj1vv5yk] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.ipp-level-badge[b-6vmj1vv5yk] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    border: 1px solid var(--lp-color-border, rgba(126,138,166,.18));
    color: var(--lp-color-muted, #7e8aa6);
    transition: all 0.2s;
    cursor: pointer;
    background: transparent;
    font-family: inherit;
}

.ipp-level-badge:hover[b-6vmj1vv5yk],
.ipp-level-badge--active[b-6vmj1vv5yk] {
    background: var(--lp-color-accent, #e87c2a);
    border-color: var(--lp-color-accent, #e87c2a);
    color: #fff;
}

/* ── Progress bars ── */
.ipp-progress-list[b-6vmj1vv5yk] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.ipp-progress-item[b-6vmj1vv5yk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ipp-progress-label[b-6vmj1vv5yk] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--lp-color-muted, #7e8aa6);
}

.ipp-progress-track[b-6vmj1vv5yk] {
    height: 5px;
    background: rgba(126,138,166,.12);
    border-radius: 0.625rem;
    overflow: hidden;
}

.ipp-progress-fill[b-6vmj1vv5yk] {
    height: 100%;
    border-radius: 0.625rem;
    background: linear-gradient(90deg, var(--lp-color-accent, #e87c2a), #f59a54);
    transition: width 0.6s cubic-bezier(.4,0,.2,1);
}
/* /Pages/Learning/MyCourses.razor.rz.scp.css */
/* Stile estratto dal blocco <style> inline della pagina (2026-08-20):
   CSS isolation di Blazor invece dell'iniezione globale al render. */

/* === MyCourses — self-contained dark-glass (Tailwind/scoped CSS inerti) === */
.mc-page[b-1zyxfvpska] { max-width: 1180px; margin: 0 auto; padding: 2rem 1.5rem 4rem; color: #FAF7F0; }

.mc-head[b-1zyxfvpska] {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem;
}
.mc-title[b-1zyxfvpska] { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; margin: 0; color: #FAF7F0; }
.mc-subtitle[b-1zyxfvpska] { margin: 0.35rem 0 0; color: rgba(246,248,255,0.6); font-size: 0.95rem; }

.mc-btn[b-1zyxfvpska] {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 1.2rem; border-radius: 12px; font-size: 0.9rem; font-weight: 600;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.mc-btn--primary[b-1zyxfvpska] {
    background: linear-gradient(135deg, #e87c2a, #f89b4d);
    /* Testo scuro su arancio (~6.6:1): il bianco era ~2.8:1, sotto AA. */
    color: #1a0f06;
    box-shadow: 0 6px 18px rgba(232,124,42,0.32);
}
.mc-btn--primary:hover[b-1zyxfvpska] { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(232,124,42,0.42); }

.mc-toolbar[b-1zyxfvpska] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.mc-count[b-1zyxfvpska] { margin: 0; color: rgba(246,248,255,0.6); font-size: 0.95rem; }
.mc-count-num[b-1zyxfvpska] { color: #FAF7F0; font-weight: 700; }
.mc-filters[b-1zyxfvpska] { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.mc-pill[b-1zyxfvpska] {
    padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
    background: rgba(255,255,255,0.05); color: rgba(246,248,255,0.7);
    border: 1px solid rgba(255,255,255,0.06); cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.mc-pill:hover[b-1zyxfvpska] { background: rgba(255,255,255,0.09); color: #FAF7F0; }
.mc-pill.active[b-1zyxfvpska] {
    background: rgba(232,124,42,0.16); color: #E87C2A;
    border-color: rgba(232,124,42,0.4);
}

.mc-grid[b-1zyxfvpska] {
    display: grid; gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.mc-card[b-1zyxfvpska] {
    background: rgba(8,12,24,0.72);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.06); border-radius: 16px;
    overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,0.30);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.mc-card--link[b-1zyxfvpska] { cursor: pointer; }
.mc-card--link:hover[b-1zyxfvpska] {
    transform: translateY(-3px);
    border-color: rgba(232,124,42,0.35);
    box-shadow: 0 14px 38px rgba(0,0,0,0.45);
}

.mc-thumb-wrap[b-1zyxfvpska] { position: relative; }
.mc-thumb[b-1zyxfvpska] { width: 100%; height: 160px; object-fit: cover; display: block; transition: transform 0.3s ease; }
.mc-card--link:hover .mc-thumb[b-1zyxfvpska] { transform: scale(1.04); }

.mc-tag[b-1zyxfvpska] {
    position: absolute; top: 0.75rem; right: 0.75rem;
    padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 0.35rem;
    backdrop-filter: blur(6px);
}
/* Il bianco non regge su nessuna delle due targhette (misurato da utente
   autenticato su /my-courses in produzione, 2026-08-19): 2,28:1 sul verde e
   2,86:1 sull'ambra. Inchiostro scuro, come il resto del prodotto fa gia'
   sui fondi di marca. */
.mc-tag--done[b-1zyxfvpska] { background: rgba(34,197,94,0.85); color: #06210f; }
.mc-tag--progress[b-1zyxfvpska] { background: rgba(232,124,42,0.9); color: #1a0f06; }

.mc-card-body[b-1zyxfvpska] { padding: 1.1rem 1.15rem 1.25rem; }
.mc-card-title[b-1zyxfvpska] {
    font-size: 1.02rem; font-weight: 600; color: #FAF7F0; margin: 0 0 0.5rem;
    line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mc-card-meta[b-1zyxfvpska] { font-size: 0.82rem; color: rgba(246,248,255,0.5); margin: 0 0 0.9rem; }

.mc-progress[b-1zyxfvpska] {
    height: 8px; border-radius: 999px; overflow: hidden;
    background: rgba(255,255,255,0.08); margin-bottom: 0.9rem;
}
.mc-progress-fill[b-1zyxfvpska] {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #e87c2a, #f89b4d);
    transition: width 0.4s ease;
}
.mc-progress-fill.is-done[b-1zyxfvpska] { background: linear-gradient(90deg, #22c55e, #4ade80); }

.mc-card-foot[b-1zyxfvpska] { display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; }
.mc-card-access[b-1zyxfvpska] { color: rgba(246,248,255,0.5); }
.mc-card-cta[b-1zyxfvpska] { color: #E87C2A; font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; }
.mc-card--link:hover .mc-card-cta[b-1zyxfvpska] { text-decoration: underline; }

/* Empty / error state */
.mc-state[b-1zyxfvpska] {
    background: rgba(8,12,24,0.72);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.06); border-radius: 18px;
    padding: 3.5rem 1.5rem; text-align: center; color: #FAF7F0;
}
.mc-state h3[b-1zyxfvpska] { margin: 0 0 0.5rem; font-size: 1.3rem; font-weight: 700; color: #FAF7F0; }
.mc-state p[b-1zyxfvpska] { margin: 0 auto 1.5rem; max-width: 460px; color: rgba(246,248,255,0.6); line-height: 1.55; }
.mc-state-badge[b-1zyxfvpska] {
    width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 1.5rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(232,124,42,0.14); border: 1px solid rgba(232,124,42,0.28);
}
.mc-state-badge i[b-1zyxfvpska] { font-size: 2.1rem; color: #E87C2A; }
.mc-state--error[b-1zyxfvpska] { border-color: rgba(239,68,68,0.3); }
.mc-state-icon[b-1zyxfvpska] { font-size: 2.5rem; color: #ef4444; margin-bottom: 1rem; }

/* Skeleton */
.mc-skeleton[b-1zyxfvpska] { pointer-events: none; }
.mc-skel-thumb[b-1zyxfvpska] { height: 160px; background: rgba(255,255,255,0.06); }
.mc-skel-line[b-1zyxfvpska] { height: 12px; border-radius: 6px; background: rgba(255,255,255,0.06); margin-bottom: 0.6rem; }
.mc-skel-bar[b-1zyxfvpska] { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.06); margin-top: 0.4rem; }
.mc-skeleton .mc-skel-thumb[b-1zyxfvpska],
.mc-skeleton .mc-skel-line[b-1zyxfvpska],
.mc-skeleton .mc-skel-bar[b-1zyxfvpska] { animation: mc-pulse-b-1zyxfvpska 1.5s ease-in-out infinite; }
@keyframes mc-pulse-b-1zyxfvpska { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

@media (max-width: 640px) {
    .mc-head[b-1zyxfvpska] { align-items: flex-start; }
    .mc-grid[b-1zyxfvpska] { grid-template-columns: 1fr; }
}
/* /Pages/Learning/PercorsoLinguistico.razor.rz.scp.css */
/* ── Root ── */
.pli-root[b-tc8vde63ld] {
    max-width: 900px;
    margin-inline: auto;
}

/* ── Progress bar ── */
.pli-progress[b-tc8vde63ld] {
    margin-bottom: 2.5rem;
}

.pli-progress-track[b-tc8vde63ld] {
    height: 4px;
    background: rgba(126, 138, 166, .12);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.pli-progress-fill[b-tc8vde63ld] {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--lp-color-accent, #e87c2a), #f59a54);
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.pli-progress-labels[b-tc8vde63ld] {
    display: flex;
    justify-content: space-between;
}

.pli-progress-label[b-tc8vde63ld] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--lp-color-muted, #7e8aa6);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: color 0.2s;
}

.pli-progress-label--active[b-tc8vde63ld]  { color: var(--lp-color-text, #eef3ff); }
.pli-progress-label--done[b-tc8vde63ld]    { color: #34c759; }
.pli-progress-label--pending[b-tc8vde63ld] { color: var(--lp-color-muted, #7e8aa6); }

.pli-check[b-tc8vde63ld] {
    color: #34c759;
    font-size: 0.875rem;
}

/* ── Step container ── */
.pli-step[b-tc8vde63ld] {
    animation: pli-fadein-b-tc8vde63ld 0.3s ease both;
}

@keyframes pli-fadein-b-tc8vde63ld {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Step header ── */
.pli-step-header[b-tc8vde63ld] {
    margin-bottom: 2.5rem;
}

.pli-eyebrow[b-tc8vde63ld] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--lp-color-accent, #e87c2a);
    margin-bottom: 0.5rem;
}

.pli-headline[b-tc8vde63ld] {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--lp-color-text, #eef3ff);
    margin-bottom: 0.75rem;
}

.pli-headline-accent[b-tc8vde63ld] { color: #e87c2a; }

.pli-sub[b-tc8vde63ld] {
    font-size: 1rem;
    color: var(--lp-color-muted, #7e8aa6);
    max-width: 560px;
    line-height: 1.6;
}

/* ── Back button ── */
.pli-back-btn[b-tc8vde63ld] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    color: var(--lp-color-muted, #7e8aa6);
    font-size: 0.8125rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1.25rem;
    transition: color 0.2s;
}

.pli-back-btn:hover[b-tc8vde63ld] { color: var(--lp-color-text, #eef3ff); }

/* ── Hint ── */
.pli-hint[b-tc8vde63ld] {
    margin-top: 1.5rem;
    font-size: 0.75rem;
    color: var(--lp-color-muted, #7e8aa6);
    text-align: center;
    font-style: italic;
}

/* ── Destination grid ── */
.pli-dest-grid[b-tc8vde63ld] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem;
}

@media (max-width: 700px) {
    .pli-dest-grid[b-tc8vde63ld] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.pli-dest-card[b-tc8vde63ld] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.5rem 1rem 1.125rem;
    background: var(--lp-color-surface, #0d1320);
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, .18));
    border-radius: 1rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--lp-color-text, #eef3ff);
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s;
    text-align: center;
    overflow: hidden;
}

.pli-dest-card[b-tc8vde63ld]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(232, 124, 42, .16), transparent 70%);
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}

.pli-dest-card:hover[b-tc8vde63ld] {
    border-color: rgba(232, 124, 42, .45);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
}

.pli-dest-card:hover[b-tc8vde63ld]::before,
.pli-dest-card--active[b-tc8vde63ld]::before { opacity: 1; }

.pli-dest-card--active[b-tc8vde63ld] {
    border-color: var(--lp-color-accent, #e87c2a);
    background: rgba(232, 124, 42, .08);
    box-shadow: 0 0 0 3px rgba(232, 124, 42, .2);
    transform: translateY(-4px);
}

.pli-dest-flag[b-tc8vde63ld] {
    font-size: 2rem;
    line-height: 1;
    display: block;
}

.pli-dest-name[b-tc8vde63ld] {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.pli-dest-cert[b-tc8vde63ld] {
    font-size: 0.75rem;
    color: var(--lp-color-muted, #7e8aa6);
    font-weight: 500;
    line-height: 1.3;
}

/* ── Age grid ── */
.pli-age-grid[b-tc8vde63ld] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem;
}

@media (max-width: 600px) {
    .pli-age-grid[b-tc8vde63ld] { grid-template-columns: repeat(2, 1fr); }
}

.pli-age-card[b-tc8vde63ld] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.75rem 1rem 1.25rem;
    background: var(--lp-color-surface, #0d1320);
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, .18));
    border-radius: 1rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--lp-color-text, #eef3ff);
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s;
    text-align: center;
    overflow: hidden;
}

.pli-age-card[b-tc8vde63ld]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(232, 124, 42, .16), transparent 70%);
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}

.pli-age-card:hover[b-tc8vde63ld] { border-color: rgba(232, 124, 42, .45); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.pli-age-card:hover[b-tc8vde63ld]::before, .pli-age-card--active[b-tc8vde63ld]::before { opacity: 1; }
.pli-age-card--active[b-tc8vde63ld] { border-color: var(--lp-color-accent, #e87c2a); background: rgba(232, 124, 42, .08); box-shadow: 0 0 0 3px rgba(232, 124, 42, .2); transform: translateY(-4px); }

.pli-age-icon[b-tc8vde63ld]  { font-size: 2.25rem; line-height: 1; display: block; }
.pli-age-range[b-tc8vde63ld] { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.pli-age-label[b-tc8vde63ld] { font-size: 0.75rem; color: var(--lp-color-muted, #7e8aa6); font-weight: 500; line-height: 1.3; }

/* ── Goal grid ── */
.pli-goal-grid[b-tc8vde63ld] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 500px) { .pli-goal-grid[b-tc8vde63ld] { grid-template-columns: 1fr; } }

.pli-goal-card[b-tc8vde63ld] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 1.5rem;
    background: var(--lp-color-surface, #0d1320);
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, .18));
    border-radius: 1rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--lp-color-text, #eef3ff);
    text-align: left;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s;
    overflow: hidden;
}

.pli-goal-card[b-tc8vde63ld]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(232, 124, 42, .14), transparent 65%);
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}

.pli-goal-card:hover[b-tc8vde63ld] { border-color: rgba(232, 124, 42, .45); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.38); }
.pli-goal-card:hover[b-tc8vde63ld]::before, .pli-goal-card--active[b-tc8vde63ld]::before { opacity: 1; }
.pli-goal-card--active[b-tc8vde63ld] { border-color: var(--lp-color-accent, #e87c2a); background: rgba(232, 124, 42, .08); box-shadow: 0 0 0 3px rgba(232, 124, 42, .2); transform: translateY(-3px); }

.pli-goal-icon[b-tc8vde63ld]  { font-size: 2rem; line-height: 1; margin-bottom: 0.25rem; }
.pli-goal-title[b-tc8vde63ld] { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.pli-goal-sub[b-tc8vde63ld]   { font-size: 0.8125rem; color: var(--lp-color-muted, #7e8aa6); line-height: 1.45; }

/* ── Result header ── */
.pli-result-header[b-tc8vde63ld] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.pli-result-eyebrow[b-tc8vde63ld] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--lp-color-accent, #e87c2a);
    margin-bottom: 1rem;
}

.pli-result-icon-wrap[b-tc8vde63ld] { font-size: 3.5rem; line-height: 1; margin-bottom: 0.875rem; }

.pli-result-title[b-tc8vde63ld] {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--lp-color-text, #eef3ff);
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.pli-result-subtitle[b-tc8vde63ld] { font-size: 1.0625rem; color: var(--lp-color-muted, #7e8aa6); margin-bottom: 1rem; }

.pli-result-tags[b-tc8vde63ld] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pli-result-tag[b-tc8vde63ld] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, .18));
    color: var(--lp-color-muted, #7e8aa6);
    background: var(--lp-color-surface, #0d1320);
}

.pli-result-tag--cert[b-tc8vde63ld] {
    border-color: rgba(52, 199, 89, .35);
    background: rgba(52, 199, 89, .08);
    color: #34c759;
}

/* ── Result body ── */
.pli-result-body[b-tc8vde63ld] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 700px) { .pli-result-body[b-tc8vde63ld] { grid-template-columns: 1fr; } }

.pli-result-main[b-tc8vde63ld] {
    background: var(--lp-color-surface, #0d1320);
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, .18));
    border-radius: 1rem;
    padding: 1.75rem;
}

.pli-result-desc[b-tc8vde63ld] {
    font-size: 0.9375rem;
    color: var(--lp-color-muted, #7e8aa6);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.pli-result-courses[b-tc8vde63ld] { margin-bottom: 1.75rem; }

.pli-courses-title[b-tc8vde63ld] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--lp-color-muted, #7e8aa6);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
}

.pli-courses-list[b-tc8vde63ld] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.pli-course-item[b-tc8vde63ld] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--lp-color-text, #eef3ff);
}

.pli-course-dot[b-tc8vde63ld] {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lp-color-accent, #e87c2a);
    opacity: 0.8;
}

.pli-result-ctas[b-tc8vde63ld] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

/* ── Aside ── */
.pli-result-aside[b-tc8vde63ld] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pli-aside-card[b-tc8vde63ld] {
    background: var(--lp-color-surface, #0d1320);
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, .18));
    border-radius: 1rem;
    padding: 1.25rem;
    flex: 1;
}

/* Card risorse gratuite — evidenziata per differenziazione EU-first */
.pli-aside-card--free[b-tc8vde63ld] {
    border-color: rgba(88, 201, 155, .25);
    background: rgba(88, 201, 155, .04);
}

.pli-aside-card h4[b-tc8vde63ld] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--lp-color-text, #eef3ff);
    margin-bottom: 0.5rem;
}

.pli-aside-card p[b-tc8vde63ld] {
    font-size: 0.8125rem;
    color: var(--lp-color-muted, #7e8aa6);
    line-height: 1.55;
    margin-bottom: 1rem;
}

.pli-free-list[b-tc8vde63ld] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pli-free-list a[b-tc8vde63ld] {
    font-size: 0.8125rem;
    color: var(--lp-color-muted, #7e8aa6);
    text-decoration: none;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.pli-free-list a:hover[b-tc8vde63ld] { color: var(--lp-color-text, #eef3ff); }

.pli-aside-btn[b-tc8vde63ld] { width: 100%; justify-content: center; }

/* ── Also try ── */
.pli-result-also[b-tc8vde63ld] {
    border-top: 1px solid var(--lp-color-border, rgba(126, 138, 166, .18));
    padding-top: 1.5rem;
}

.pli-also-title[b-tc8vde63ld] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lp-color-muted, #7e8aa6);
    margin-bottom: 0.75rem;
}

.pli-also-chips[b-tc8vde63ld] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pli-also-chip[b-tc8vde63ld] {
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem 0.875rem;
    background: var(--lp-color-surface, #0d1320);
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, .18));
    border-radius: 2rem;
    font-size: 0.8125rem;
    color: var(--lp-color-muted, #7e8aa6);
    text-decoration: none;
    font-weight: 500;
    transition: border-color 0.2s, color 0.2s;
}

.pli-also-chip:hover[b-tc8vde63ld] {
    border-color: var(--lp-color-accent, #e87c2a);
    color: var(--lp-color-text, #eef3ff);
}
/* /Pages/Learning/TrovaIlTuoPercorso.razor.rz.scp.css */
/* ── Root ── */
.tpp-root[b-5s97urcijn] {
    max-width: 900px;
    margin-inline: auto;
}

/* ── Progress bar ── */
.tpp-progress[b-5s97urcijn] {
    margin-bottom: 2.5rem;
}

.tpp-progress-track[b-5s97urcijn] {
    height: 4px;
    background: rgba(126, 138, 166, .12);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.tpp-progress-fill[b-5s97urcijn] {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--lp-color-accent, #e87c2a), #f59a54);
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.tpp-progress-labels[b-5s97urcijn] {
    display: flex;
    justify-content: space-between;
}

.tpp-progress-label[b-5s97urcijn] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--lp-color-muted, #7e8aa6);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: color 0.2s;
}

.tpp-progress-label--active[b-5s97urcijn] {
    color: var(--lp-color-text, #eef3ff);
}

.tpp-progress-label--done[b-5s97urcijn] {
    color: #34c759;
}

.tpp-progress-label--pending[b-5s97urcijn] {
    color: var(--lp-color-muted, #7e8aa6);
}

.tpp-check[b-5s97urcijn] {
    color: #34c759;
    font-size: 0.875rem;
}

/* ── Step container ── */
.tpp-step[b-5s97urcijn] {
    animation: tpp-fadein-b-5s97urcijn 0.3s ease both;
}

@keyframes tpp-fadein-b-5s97urcijn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Step header ── */
.tpp-step-header[b-5s97urcijn] {
    margin-bottom: 2.5rem;
}

.tpp-eyebrow[b-5s97urcijn] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--lp-color-accent, #e87c2a);
    margin-bottom: 0.5rem;
}

.tpp-headline[b-5s97urcijn] {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--lp-color-text, #eef3ff);
    margin-bottom: 0.75rem;
}

.tpp-sub[b-5s97urcijn] {
    font-size: 1rem;
    color: var(--lp-color-muted, #7e8aa6);
    max-width: 540px;
    line-height: 1.6;
}

/* ── Back button ── */
.tpp-back-btn[b-5s97urcijn] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    color: var(--lp-color-muted, #7e8aa6);
    font-size: 0.8125rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1.25rem;
    transition: color 0.2s;
}

.tpp-back-btn:hover[b-5s97urcijn] {
    color: var(--lp-color-text, #eef3ff);
}

/* ── Hint text ── */
.tpp-hint[b-5s97urcijn] {
    margin-top: 1.5rem;
    font-size: 0.75rem;
    color: var(--lp-color-muted, #7e8aa6);
    text-align: center;
    font-style: italic;
}

/* ── Age grid ──
   3 colonne: dallo step "Chi sei?" in poi il profilo restringe sempre le fasce
   proposte a 3 (studio → 7-16/16-19/19-25, lavoro → 19-25/25+/50+). */
.tpp-age-grid[b-5s97urcijn] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.875rem;
}

@media (max-width: 700px) {
    .tpp-age-grid[b-5s97urcijn] {
        grid-template-columns: repeat(2, 1fr);
    }
    .tpp-age-grid .tpp-age-card:last-child[b-5s97urcijn] {
        grid-column: 1 / -1;
    }
}

.tpp-age-card[b-5s97urcijn] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.75rem 1rem 1.25rem;
    background: var(--lp-color-surface, #0d1320);
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, .18));
    border-radius: 1rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--lp-color-text, #eef3ff);
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s;
    text-align: center;
    overflow: hidden;
}

.tpp-age-card[b-5s97urcijn]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(232, 124, 42, .18), transparent 70%);
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}

.tpp-age-card:hover[b-5s97urcijn] {
    border-color: rgba(232, 124, 42, .45);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
}

.tpp-age-card:hover[b-5s97urcijn]::before {
    opacity: 1;
}

.tpp-age-card--active[b-5s97urcijn] {
    border-color: var(--lp-color-accent, #e87c2a);
    background: rgba(232, 124, 42, .08);
    box-shadow: 0 0 0 3px rgba(232, 124, 42, .2);
    transform: translateY(-4px);
}

.tpp-age-card--active[b-5s97urcijn]::before {
    opacity: 1;
}

.tpp-age-icon[b-5s97urcijn] {
    font-size: 2.25rem;
    line-height: 1;
    display: block;
}

.tpp-age-range[b-5s97urcijn] {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.tpp-age-label[b-5s97urcijn] {
    font-size: 0.75rem;
    color: var(--lp-color-muted, #7e8aa6);
    font-weight: 500;
    line-height: 1.3;
}

.tpp-badge-new[b-5s97urcijn] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.1875rem 0.4375rem;
    background: rgba(232, 124, 42, .15);
    border: 1px solid rgba(232, 124, 42, .35);
    color: #f59a54;
    border-radius: 1rem;
}

/* ── Goal grid ── */
.tpp-goal-grid[b-5s97urcijn] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 500px) {
    .tpp-goal-grid[b-5s97urcijn] {
        grid-template-columns: 1fr;
    }
}

.tpp-goal-card[b-5s97urcijn] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 1.5rem;
    background: var(--lp-color-surface, #0d1320);
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, .18));
    border-radius: 1rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--lp-color-text, #eef3ff);
    text-align: left;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s;
    overflow: hidden;
}

.tpp-goal-card[b-5s97urcijn]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(232, 124, 42, .15), transparent 65%);
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}

.tpp-goal-card:hover[b-5s97urcijn] {
    border-color: rgba(232, 124, 42, .45);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
}

.tpp-goal-card:hover[b-5s97urcijn]::before {
    opacity: 1;
}

.tpp-goal-card--active[b-5s97urcijn] {
    border-color: var(--lp-color-accent, #e87c2a);
    background: rgba(232, 124, 42, .08);
    box-shadow: 0 0 0 3px rgba(232, 124, 42, .2);
    transform: translateY(-3px);
}

.tpp-goal-card--active[b-5s97urcijn]::before {
    opacity: 1;
}

.tpp-goal-icon[b-5s97urcijn] {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.tpp-goal-title[b-5s97urcijn] {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.tpp-goal-sub[b-5s97urcijn] {
    font-size: 0.8125rem;
    color: var(--lp-color-muted, #7e8aa6);
    line-height: 1.45;
}

/* ── Result header ── */
.tpp-step--result[b-5s97urcijn] {}

.tpp-result-header[b-5s97urcijn] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.tpp-result-eyebrow[b-5s97urcijn] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--lp-color-accent, #e87c2a);
    margin-bottom: 1rem;
}

.tpp-result-icon-wrap[b-5s97urcijn] {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 0.875rem;
}

.tpp-result-title[b-5s97urcijn] {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--lp-color-text, #eef3ff);
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.tpp-result-subtitle[b-5s97urcijn] {
    font-size: 1.0625rem;
    color: var(--lp-color-muted, #7e8aa6);
}

/* ── Result body (main + aside) ── */
.tpp-result-body[b-5s97urcijn] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 700px) {
    .tpp-result-body[b-5s97urcijn] {
        grid-template-columns: 1fr;
    }
}

.tpp-result-main[b-5s97urcijn] {
    background: var(--lp-color-surface, #0d1320);
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, .18));
    border-radius: 1rem;
    padding: 1.75rem;
}

.tpp-result-desc[b-5s97urcijn] {
    font-size: 0.9375rem;
    color: var(--lp-color-muted, #7e8aa6);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

/* ── Cert badge ── */
.tpp-cert-badge[b-5s97urcijn] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    border: 1px solid rgba(52, 199, 89, .35);
    background: rgba(52, 199, 89, .08);
    color: #34c759;
    margin-bottom: 1.5rem;
}

/* ── Courses list ── */
.tpp-result-courses[b-5s97urcijn] {
    margin-bottom: 1.75rem;
}

.tpp-courses-title[b-5s97urcijn] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--lp-color-muted, #7e8aa6);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
}

.tpp-courses-list[b-5s97urcijn] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.tpp-course-item[b-5s97urcijn] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--lp-color-text, #eef3ff);
}

.tpp-course-dot[b-5s97urcijn] {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lp-color-accent, #e87c2a);
    opacity: 0.8;
}

/* ── Result CTAs ── */
.tpp-result-ctas[b-5s97urcijn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

/* ── Aside cards ── */
.tpp-result-aside[b-5s97urcijn] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tpp-aside-card[b-5s97urcijn] {
    background: var(--lp-color-surface, #0d1320);
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, .18));
    border-radius: 1rem;
    padding: 1.25rem;
    flex: 1;
}

.tpp-aside-card h4[b-5s97urcijn] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--lp-color-text, #eef3ff);
    margin-bottom: 0.5rem;
}

.tpp-aside-card p[b-5s97urcijn] {
    font-size: 0.8125rem;
    color: var(--lp-color-muted, #7e8aa6);
    line-height: 1.55;
    margin-bottom: 1rem;
}

.tpp-aside-btn[b-5s97urcijn] {
    width: 100%;
    justify-content: center;
}

/* ── Also try section ── */
.tpp-result-also[b-5s97urcijn] {
    border-top: 1px solid var(--lp-color-border, rgba(126, 138, 166, .18));
    padding-top: 1.5rem;
}

.tpp-also-title[b-5s97urcijn] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lp-color-muted, #7e8aa6);
    margin-bottom: 0.75rem;
}

.tpp-also-chips[b-5s97urcijn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tpp-also-chip[b-5s97urcijn] {
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem 0.875rem;
    background: var(--lp-color-surface, #0d1320);
    border: 1px solid var(--lp-color-border, rgba(126, 138, 166, .18));
    border-radius: 2rem;
    font-size: 0.8125rem;
    color: var(--lp-color-muted, #7e8aa6);
    text-decoration: none;
    font-weight: 500;
    transition: border-color 0.2s, color 0.2s;
}

.tpp-also-chip:hover[b-5s97urcijn] {
    border-color: var(--lp-color-accent, #e87c2a);
    color: var(--lp-color-text, #eef3ff);
}
/* /Pages/Learning/Wishlist.razor.rz.scp.css */
/* Stile estratto dal blocco <style> inline della pagina (2026-08-20):
   CSS isolation di Blazor invece dell'iniezione globale al render. */

/* === Wishlist — self-contained dark-glass (Tailwind/scoped CSS inerti) === */
.wishlist-page[b-n4jnp67gtr] { min-height: 100vh; padding: 40px 20px; color: #FAF7F0; }
.wishlist-page .container[b-n4jnp67gtr] { max-width: 1100px; margin: 0 auto; }
.wishlist-page .page-header[b-n4jnp67gtr] { margin-bottom: 2rem; }
.wishlist-page h1[b-n4jnp67gtr] { font-size: clamp(1.6rem, 3vw, 2rem); color: #FAF7F0; display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.25rem; }
.wishlist-page h1 i[b-n4jnp67gtr] { color: #E87C2A; }
.wishlist-page .subtitle[b-n4jnp67gtr] { color: rgba(246,248,255,0.6); margin: 0; }

/* Grid */
.wishlist-grid[b-n4jnp67gtr] { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }

/* Card */
.wishlist-card[b-n4jnp67gtr] {
    background: rgba(8,12,24,0.72);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,0.30);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    display: flex; flex-direction: column;
}
.wishlist-card:hover[b-n4jnp67gtr] { transform: translateY(-3px); border-color: rgba(232,124,42,0.35); box-shadow: 0 14px 38px rgba(0,0,0,0.45); }
.wishlist-page .card-thumb-link[b-n4jnp67gtr] { display: block; aspect-ratio: 16/9; overflow: hidden; }
.wishlist-page .card-thumb[b-n4jnp67gtr] { width: 100%; height: 100%; object-fit: cover; display: block; }
.wishlist-page .card-thumb-placeholder[b-n4jnp67gtr] { width: 100%; height: 100%; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: rgba(246,248,255,0.35); aspect-ratio: 16/9; }
.wishlist-page .card-body[b-n4jnp67gtr] { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.wishlist-page .card-title[b-n4jnp67gtr] { font-size: 1rem; font-weight: 600; color: #FAF7F0; text-decoration: none; line-height: 1.4; }
.wishlist-page .card-title:hover[b-n4jnp67gtr] { color: #E87C2A; }
.wishlist-page .card-instructor[b-n4jnp67gtr] { font-size: .875rem; color: rgba(246,248,255,0.6); margin: 0; display: flex; align-items: center; gap: .4rem; }
.wishlist-page .card-footer[b-n4jnp67gtr] { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,0.08); flex-wrap: wrap; gap: .5rem; }
.wishlist-page .card-price[b-n4jnp67gtr] { font-size: 1.1rem; font-weight: 700; color: #E87C2A; }
.wishlist-page .card-actions[b-n4jnp67gtr] { display: flex; gap: .5rem; }

/* Buttons */
.wishlist-page .btn[b-n4jnp67gtr] { border: none; border-radius: 12px; padding: .5rem 1rem; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; min-height: 44px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
/* Testo scuro su arancio (~6.6:1): il bianco era ~2.8:1, sotto AA. */
.wishlist-page .btn-primary[b-n4jnp67gtr] { background: linear-gradient(135deg, #e87c2a, #f89b4d); color: #1a0f06; box-shadow: 0 6px 18px rgba(232,124,42,0.32); }
.wishlist-page .btn-primary:hover[b-n4jnp67gtr] { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(232,124,42,0.42); color: #1a0f06; }
.wishlist-page .btn-sm[b-n4jnp67gtr] { padding: .4rem .8rem; font-size: .8rem; min-height: 38px; }
.wishlist-page .btn-outline-danger[b-n4jnp67gtr] { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.4); color: #fca5a5; }
.wishlist-page .btn-outline-danger:hover[b-n4jnp67gtr] { background: rgba(239,68,68,0.9); color: #fff; }

/* Empty state */
.wishlist-page .empty-state[b-n4jnp67gtr] {
    background: rgba(8,12,24,0.72);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; padding: 4rem 2rem; text-align: center;
}
.wishlist-page .empty-icon[b-n4jnp67gtr] { width: 80px; height: 80px; background: rgba(232,124,42,0.14); border: 1px solid rgba(232,124,42,0.28); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }
.wishlist-page .empty-icon i[b-n4jnp67gtr] { font-size: 2rem; color: #E87C2A; }
.wishlist-page .empty-state h2[b-n4jnp67gtr] { font-size: 1.5rem; color: #FAF7F0; margin-bottom: .5rem; }
.wishlist-page .empty-state p[b-n4jnp67gtr] { color: rgba(246,248,255,0.6); margin-bottom: 2rem; }

/* Alert */
.wishlist-page .alert-danger[b-n4jnp67gtr] { background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.30); color: #fca5a5; border-radius: 12px; padding: 1rem 1.25rem; }

/* Skeleton */
.wishlist-page .loading-grid[b-n4jnp67gtr] { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.wishlist-page .skeleton-card[b-n4jnp67gtr] { background: rgba(8,12,24,0.72); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; overflow: hidden; }
.wishlist-page .skeleton[b-n4jnp67gtr] { background: rgba(255,255,255,0.06); border-radius: 6px; animation: wl-pulse-b-n4jnp67gtr 1.5s ease-in-out infinite; }
.wishlist-page .skeleton-thumb[b-n4jnp67gtr] { height: 180px; border-radius: 0; }
.wishlist-page .skeleton-body[b-n4jnp67gtr] { padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.wishlist-page .skeleton-title[b-n4jnp67gtr] { height: 20px; width: 85%; }
.wishlist-page .skeleton-text[b-n4jnp67gtr] { height: 14px; width: 60%; }
.wishlist-page .skeleton-price[b-n4jnp67gtr] { height: 18px; width: 40%; }
@keyframes wl-pulse-b-n4jnp67gtr { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Mobile */
@media (max-width: 576px) {
    .wishlist-page[b-n4jnp67gtr] { padding: 20px 12px; }
    .wishlist-page h1[b-n4jnp67gtr] { font-size: 1.5rem; }
    .wishlist-grid[b-n4jnp67gtr] { grid-template-columns: 1fr; }
    .wishlist-page .card-footer[b-n4jnp67gtr] { flex-direction: column; align-items: flex-start; }
}
/* /Pages/Organizations/TeamHealth.razor.rz.scp.css */
/* Team Knowledge Health — token --lp-*; il colore appare solo come stato. */

.team-page[b-aop04k5jup] {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--lp-space-6, 32px) var(--lp-space-4, 20px) var(--lp-space-9, 80px);
    display: grid;
    gap: var(--lp-space-5, 22px);
}

.th-header[b-aop04k5jup] {
    display: grid;
    gap: 6px;
}

.th-kicker[b-aop04k5jup],
.th-label[b-aop04k5jup] {
    font-family: var(--lp-font-mono, ui-monospace, monospace);
    font-size: var(--lp-text-xs, 12px);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.th-kicker[b-aop04k5jup] {
    color: var(--lp-accent-warm, #e87c2a);
}

.th-label[b-aop04k5jup] {
    color: var(--lp-faint, rgba(246, 248, 255, 0.47));
}

.th-title[b-aop04k5jup] {
    margin: 0;
    font-family: var(--lp-font-display, system-ui, sans-serif);
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 800;
    line-height: var(--lp-leading-tight, 1.1);
    letter-spacing: -0.02em;
    color: var(--lp-text, #f6f8ff);
}

.th-subtitle[b-aop04k5jup],
.th-help[b-aop04k5jup],
.th-why[b-aop04k5jup],
.th-note[b-aop04k5jup] {
    margin: 0;
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
    max-width: 68ch;
}

.th-help[b-aop04k5jup],
.th-why[b-aop04k5jup] {
    font-size: var(--lp-text-sm, 14px);
}

.th-note[b-aop04k5jup] {
    font-size: var(--lp-text-xs, 13px);
    color: var(--lp-faint, rgba(246, 248, 255, 0.47));
}

.th-card[b-aop04k5jup] {
    display: grid;
    gap: 10px;
    padding: 18px 20px;
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--lp-radius-lg, 16px);
    background: var(--lp-surface, rgba(8, 12, 24, 0.72));
}

.th-card-title[b-aop04k5jup] {
    margin: 0;
    font-family: var(--lp-font-display, system-ui, sans-serif);
    font-size: var(--lp-text-lg, 1.125rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--lp-text, #f6f8ff);
}

.th-org-inline[b-aop04k5jup] {
    font-weight: 500;
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
}

.th-sub[b-aop04k5jup] {
    margin: 8px 0 0;
    font-size: var(--lp-text-base, 1rem);
    font-weight: 700;
    color: var(--lp-text, #f6f8ff);
}

/* appartenenze */
.th-memberships[b-aop04k5jup] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.th-membership[b-aop04k5jup] {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--lp-radius, 14px);
}

.th-membership-head[b-aop04k5jup] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
}

.th-org[b-aop04k5jup] {
    font-weight: 700;
    color: var(--lp-text, #f6f8ff);
}

.th-teams[b-aop04k5jup] {
    font-size: var(--lp-text-sm, 14px);
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
}

.th-consent[b-aop04k5jup] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: var(--lp-text-sm, 14px);
    color: var(--lp-text, #f6f8ff);
}

.th-consent input[b-aop04k5jup] {
    width: 18px;
    height: 18px;
    accent-color: var(--lp-accent, #6C3CE1);
}

.th-consent input:focus-visible[b-aop04k5jup] {
    outline: 2px solid var(--lp-accent-2, #00d4ff);
    outline-offset: 2px;
}

/* manager */
.th-grid[b-aop04k5jup] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.th-kpi[b-aop04k5jup] {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--lp-radius, 14px);
    background: var(--lp-surface-strong, rgba(10, 15, 30, 0.88));
}

.th-value[b-aop04k5jup] {
    font-family: var(--lp-font-display, system-ui, sans-serif);
    font-size: var(--lp-text-2xl, 1.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--lp-text, #f6f8ff);
}

.th-value-row[b-aop04k5jup] {
    display: flex;
    gap: 8px;
    font-size: var(--lp-text-xl, 1.25rem);
}

.th-insufficient[b-aop04k5jup] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px dashed var(--lp-border-strong, rgba(255, 255, 255, 0.22));
    border-radius: var(--lp-radius, 14px);
    color: var(--lp-text, #f6f8ff);
}

.th-insufficient > i[b-aop04k5jup] {
    font-size: var(--lp-text-xl, 1.25rem);
    color: var(--lp-accent-2, #00d4ff);
}

.th-insufficient p[b-aop04k5jup] {
    margin: 4px 0 0;
    font-size: var(--lp-text-sm, 14px);
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
}

.th-gaps[b-aop04k5jup] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.th-gap[b-aop04k5jup] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 8px 12px;
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--lp-radius-sm, 10px);
    font-size: var(--lp-text-sm, 14px);
}

.th-gap-name[b-aop04k5jup] {
    font-weight: 600;
    color: var(--lp-text, #f6f8ff);
}

.th-gap-values[b-aop04k5jup] {
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
}

/* stati */
.th-state[b-aop04k5jup] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px 24px;
    text-align: center;
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--lp-radius-lg, 16px);
    background: var(--lp-surface, rgba(8, 12, 24, 0.72));
}

.th-state > i[b-aop04k5jup] {
    font-size: var(--lp-text-2xl, 1.75rem);
    color: var(--lp-accent-warning, #fbbf24);
}

.th-state-title[b-aop04k5jup] {
    margin: 0;
    font-family: var(--lp-font-display, system-ui, sans-serif);
    font-size: var(--lp-text-xl, 1.25rem);
    font-weight: 800;
    color: var(--lp-text, #f6f8ff);
}

.th-state p[b-aop04k5jup] {
    margin: 0;
    color: var(--lp-muted, rgba(246, 248, 255, 0.68));
    max-width: 46ch;
}

.th-empty[b-aop04k5jup] {
    border-style: dashed;
}

.th-empty-icon[b-aop04k5jup] {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--lp-radius, 14px);
    border: 1px solid var(--lp-border-strong, rgba(255, 255, 255, 0.22));
    color: var(--lp-accent-2, #00d4ff);
    font-size: var(--lp-text-xl, 1.25rem);
}

.th-inline-error[b-aop04k5jup] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--lp-accent-danger, #f87171);
    border-radius: var(--lp-radius-sm, 10px);
    color: var(--lp-text, #f6f8ff);
    font-size: var(--lp-text-sm, 14px);
}

.th-inline-error > i[b-aop04k5jup] {
    color: var(--lp-accent-danger, #f87171);
}

@media (max-width: 640px) {
    .team-page[b-aop04k5jup] {
        padding: 20px 14px 48px;
    }
}

@media (forced-colors: active) {
    .th-card[b-aop04k5jup],
    .th-kpi[b-aop04k5jup],
    .th-membership[b-aop04k5jup],
    .th-gap[b-aop04k5jup],
    .th-state[b-aop04k5jup],
    .th-insufficient[b-aop04k5jup],
    .th-inline-error[b-aop04k5jup] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}
/* /Pages/Public/AcademyAllInOne.razor.rz.scp.css */
.academy-validation-strip[b-t3ey3emg6o] {
    width: min(1120px, calc(100% - 48px));
    margin: calc(var(--lp-space-7) * -1) auto var(--lp-space-7);
    padding: var(--lp-space-4) var(--lp-space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lp-space-3);
    color: var(--lp-text);
    background: color-mix(in srgb, var(--lp-accent-warm) 10%, var(--lp-surface));
    border: 1px solid color-mix(in srgb, var(--lp-accent-warm) 38%, var(--lp-border));
    border-radius: var(--lp-radius-lg);
}

.academy-validation-strip svg[b-t3ey3emg6o] {
    width: 28px;
    flex: 0 0 28px;
    color: var(--lp-accent-warm);
}

.academy-validation-strip div[b-t3ey3emg6o] {
    display: grid;
    gap: 2px;
}

.academy-validation-strip strong[b-t3ey3emg6o],
.academy-validation-strip span[b-t3ey3emg6o] {
    display: block;
}

.academy-validation-strip span[b-t3ey3emg6o] {
    color: var(--lp-text-muted);
    font-size: var(--lp-text-sm);
}

.academy-section-heading[b-t3ey3emg6o],
.academy-europe-intro[b-t3ey3emg6o] {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

.academy-sync-note[b-t3ey3emg6o] {
    width: fit-content;
    margin: 0 auto var(--lp-space-4);
    padding: var(--lp-space-2) var(--lp-space-4);
    color: var(--lp-text-muted);
    background: var(--lp-surface-solid, var(--lp-surface));
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-pill, 999px);
    font-size: var(--lp-text-sm);
}

.academy-integration-map[b-t3ey3emg6o] {
    position: relative;
    max-width: 1120px;
    margin-inline: auto;
}

.academy-hub[b-t3ey3emg6o] {
    position: relative;
    z-index: 1;
    width: 220px;
    min-height: 104px;
    margin: 0 auto var(--lp-space-7);
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: center;
    column-gap: var(--lp-space-3);
    padding: var(--lp-space-4);
    color: var(--lp-text);
    background: var(--lp-surface-solid, var(--lp-surface));
    border: 1px solid color-mix(in srgb, var(--lp-accent-warm) 55%, var(--lp-border));
    border-radius: var(--lp-radius-xl);
    box-shadow: 0 18px 60px color-mix(in srgb, var(--lp-accent-warm) 14%, transparent);
}

.academy-hub[b-t3ey3emg6o]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: var(--lp-space-7);
    background: linear-gradient(var(--lp-accent-warm), var(--lp-border));
}

.academy-hub-mark[b-t3ey3emg6o] {
    grid-row: 1 / 3;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--lp-accent-warm);
    border-radius: var(--lp-radius-md);
    font-weight: 800;
    letter-spacing: -.04em;
}

.academy-hub strong[b-t3ey3emg6o] {
    align-self: end;
    font-size: var(--lp-text-lg);
}

.academy-hub > span:last-child[b-t3ey3emg6o] {
    color: var(--lp-text-muted);
    font-size: var(--lp-text-xs);
}

.academy-capability-grid[b-t3ey3emg6o] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lp-space-5);
}

.academy-capability-grid[b-t3ey3emg6o]::before {
    content: "";
    position: absolute;
    top: calc(var(--lp-space-7) * -1);
    left: 16.666%;
    right: 16.666%;
    height: 1px;
    background: linear-gradient(90deg, var(--lp-border), var(--lp-accent-warm), var(--lp-border));
}

.academy-capability[b-t3ey3emg6o] {
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.academy-capability[b-t3ey3emg6o]::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: var(--lp-space-7);
    background: var(--lp-border);
}

.academy-capability-icon[b-t3ey3emg6o] {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: var(--lp-space-4);
    color: var(--lp-accent-warm);
    background: color-mix(in srgb, var(--lp-accent-warm) 10%, transparent);
    border-radius: var(--lp-radius-md);
}

.academy-capability-icon[b-t3ey3emg6o]  svg {
    width: 26px;
    height: 26px;
}

.academy-capability h3[b-t3ey3emg6o],
.academy-readiness-item h3[b-t3ey3emg6o],
.academy-payment-truth h3[b-t3ey3emg6o],
.academy-operating-steps h3[b-t3ey3emg6o] {
    margin: var(--lp-space-3) 0 var(--lp-space-2);
    color: var(--lp-text);
    font-size: var(--lp-text-xl);
}

.academy-capability p[b-t3ey3emg6o],
.academy-readiness-item p[b-t3ey3emg6o],
.academy-payment-truth p[b-t3ey3emg6o],
.academy-operating-steps p[b-t3ey3emg6o] {
    margin: 0;
    color: var(--lp-text-muted);
    line-height: 1.7;
}

.academy-card-link[b-t3ey3emg6o] {
    margin-top: auto;
    padding-top: var(--lp-space-5);
    color: var(--lp-accent-warm);
    font-weight: 700;
}

.academy-status[b-t3ey3emg6o] {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid;
    border-radius: var(--lp-radius-pill, 999px);
    font-size: .75rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.academy-status--available[b-t3ey3emg6o] {
    color: #17663b;
    background: #e8f7ee;
    border-color: #8ac9a3;
}

.academy-status--foundation[b-t3ey3emg6o] {
    color: #74510b;
    background: #fff6d8;
    border-color: #e3c762;
}

.academy-status--evaluation[b-t3ey3emg6o] {
    color: #4e4a70;
    background: #f0eefc;
    border-color: #bab3e4;
}

.academy-europe[b-t3ey3emg6o] {
    max-width: 1120px;
    margin-inline: auto;
}

.academy-readiness-list[b-t3ey3emg6o] {
    border-top: 1px solid var(--lp-border);
}

.academy-readiness-item[b-t3ey3emg6o] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--lp-space-5);
    padding: var(--lp-space-5) var(--lp-space-2);
    border-bottom: 1px solid var(--lp-border);
}

.academy-readiness-item h3[b-t3ey3emg6o] {
    margin-top: var(--lp-space-2);
}

.academy-readiness-item > a[b-t3ey3emg6o] {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--lp-text);
    border: 1px solid var(--lp-border);
    border-radius: 50%;
    text-decoration: none;
    transition: transform var(--lp-duration-fast, 180ms) ease, border-color var(--lp-duration-fast, 180ms) ease;
}

.academy-readiness-item > a:hover[b-t3ey3emg6o] {
    transform: translateX(3px);
    border-color: var(--lp-accent-warm);
}

.academy-readiness-item > a:focus-visible[b-t3ey3emg6o],
.academy-capability:focus-visible[b-t3ey3emg6o] {
    outline: 3px solid var(--lp-accent-warm);
    outline-offset: 4px;
}

.academy-payment-truth[b-t3ey3emg6o] {
    max-width: 840px;
    margin: var(--lp-space-7) auto 0;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--lp-space-4);
}

.academy-payment-icon[b-t3ey3emg6o] {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: var(--lp-accent-warm);
    background: color-mix(in srgb, var(--lp-accent-warm) 10%, transparent);
    border-radius: var(--lp-radius-md);
}

.academy-payment-icon svg[b-t3ey3emg6o] {
    width: 28px;
}

.academy-payment-truth h3[b-t3ey3emg6o] {
    margin-top: 0;
}

.academy-operating[b-t3ey3emg6o] {
    max-width: 960px;
    margin-inline: auto;
}

.academy-operating-steps[b-t3ey3emg6o] {
    margin: var(--lp-space-7) 0 0;
    padding: 0;
    list-style: none;
}

.academy-operating-steps li[b-t3ey3emg6o] {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: var(--lp-space-5);
    padding: var(--lp-space-5) 0;
    border-top: 1px solid var(--lp-border);
}

.academy-operating-steps li:last-child[b-t3ey3emg6o] {
    border-bottom: 1px solid var(--lp-border);
}

.academy-operating-steps li > span[b-t3ey3emg6o] {
    color: var(--lp-accent-warm);
    font-size: var(--lp-text-2xl);
    font-weight: 800;
    letter-spacing: -.05em;
}

.academy-operating-steps h3[b-t3ey3emg6o] {
    margin-top: 0;
}

.academy-final-title[b-t3ey3emg6o] {
    margin: var(--lp-space-3) 0;
    font-size: var(--lp-text-3xl);
}

.academy-final-text[b-t3ey3emg6o] {
    max-width: 620px;
    margin: 0 auto var(--lp-space-5);
}

@media (prefers-color-scheme: dark) {
    .academy-status--available[b-t3ey3emg6o] {
        color: #b8f2cf;
        background: #123623;
        border-color: #347451;
    }

    .academy-status--foundation[b-t3ey3emg6o] {
        color: #ffe59a;
        background: #3a2d0e;
        border-color: #816924;
    }

    .academy-status--evaluation[b-t3ey3emg6o] {
        color: #ddd8ff;
        background: #2d294a;
        border-color: #655e91;
    }
}

@media (max-width: 768px) {
    .academy-validation-strip[b-t3ey3emg6o] {
        width: calc(100% - 32px);
        margin-top: calc(var(--lp-space-5) * -1);
        justify-content: flex-start;
    }

    .academy-capability-grid[b-t3ey3emg6o] {
        grid-template-columns: 1fr;
    }

    .academy-capability-grid[b-t3ey3emg6o]::before,
    .academy-hub[b-t3ey3emg6o]::after,
    .academy-capability[b-t3ey3emg6o]::before {
        display: none;
    }

    .academy-hub[b-t3ey3emg6o] {
        margin-bottom: var(--lp-space-5);
    }

    .academy-capability[b-t3ey3emg6o] {
        min-height: 0;
    }

    .academy-readiness-item[b-t3ey3emg6o] {
        padding-inline: 0;
    }

    .academy-payment-truth[b-t3ey3emg6o] {
        grid-template-columns: 1fr;
    }

    .academy-operating-steps li[b-t3ey3emg6o] {
        grid-template-columns: 48px 1fr;
        gap: var(--lp-space-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .academy-readiness-item > a[b-t3ey3emg6o] {
        transition: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .academy-validation-strip[b-t3ey3emg6o],
    .academy-hub[b-t3ey3emg6o],
    .academy-sync-note[b-t3ey3emg6o] {
        background: var(--lp-surface-solid, #fff);
    }
}

@media (forced-colors: active) {
    .academy-validation-strip[b-t3ey3emg6o],
    .academy-hub[b-t3ey3emg6o],
    .academy-status[b-t3ey3emg6o],
    .academy-readiness-item > a[b-t3ey3emg6o] {
        border: 1px solid CanvasText;
    }

    .academy-hub-mark[b-t3ey3emg6o] {
        color: Canvas;
        background: CanvasText;
    }
}
/* /Pages/Public/AudienceLanding.razor.rz.scp.css */
/* Landing /per/{profilo}: token --lp-* del design system, stessa gerarchia delle
   altre landing Liquid (eyebrow mono, H1 display, lede muted, CTA btn globali). */

.aud-page[b-9oi8skfgh6] {
    max-width: 1120px;
    margin: 0 auto;
    padding: 48px 24px 96px;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.aud-hero[b-9oi8skfgh6] {
    max-width: 760px;
}

.aud-eyebrow[b-9oi8skfgh6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-family: var(--lp-font-mono);
    font-size: var(--lp-text-xs);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lp-muted);
}

.aud-dot[b-9oi8skfgh6] {
    width: 8px;
    height: 8px;
    border-radius: var(--lp-radius-pill);
    background: var(--lp-accent-warm);
    box-shadow: 0 0 0 4px rgba(var(--lp-accent-rgb), .18);
}

.aud-h1[b-9oi8skfgh6] {
    font-family: var(--lp-font-display);
    font-size: var(--lp-text-display);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--lp-text);
    margin: 0 0 16px;
}

.aud-lede[b-9oi8skfgh6] {
    font-size: var(--lp-text-lg);
    line-height: 1.6;
    color: var(--lp-muted);
    margin: 0 0 32px;
    max-width: 62ch;
}

.aud-cta-row[b-9oi8skfgh6] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.aud-h2[b-9oi8skfgh6] {
    font-family: var(--lp-font-display);
    font-size: var(--lp-text-2xl);
    font-weight: 700;
    line-height: 1.35;
    color: var(--lp-text);
    margin: 0 0 24px;
}

.aud-benefits-grid[b-9oi8skfgh6] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 900px) {
    .aud-benefits-grid[b-9oi8skfgh6] { grid-template-columns: 1fr; }
}

.aud-benefit[b-9oi8skfgh6] {
    padding: 24px;
    border-radius: var(--lp-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--lp-surface);
}

.aud-benefit h3[b-9oi8skfgh6] {
    font-size: var(--lp-text-lg);
    font-weight: 600;
    line-height: 1.35;
    color: var(--lp-text);
    margin: 0 0 8px;
}

.aud-benefit p[b-9oi8skfgh6] {
    font-size: var(--lp-text-sm);
    line-height: 1.6;
    color: var(--lp-muted);
    margin: 0;
}

.aud-switch[b-9oi8skfgh6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--lp-text-sm);
    color: var(--lp-muted);
}

.aud-switch a[b-9oi8skfgh6],
.aud-profile-links a[b-9oi8skfgh6] {
    color: var(--lp-accent-warm);
    font-weight: 600;
    text-decoration: none;
}

.aud-switch a:hover[b-9oi8skfgh6],
.aud-switch a:focus-visible[b-9oi8skfgh6],
.aud-profile-links a:hover[b-9oi8skfgh6],
.aud-profile-links a:focus-visible[b-9oi8skfgh6] {
    text-decoration: underline;
}

.aud-profile-links[b-9oi8skfgh6] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    font-size: var(--lp-text-lg);
}

@media (prefers-reduced-transparency: reduce) {
    .aud-benefit[b-9oi8skfgh6] { background: var(--lp-surface-strong); }
}

@media (forced-colors: active) {
    .aud-benefit[b-9oi8skfgh6] { border: 1px solid CanvasText; }
}
/* /Pages/Public/Enterprise.razor.rz.scp.css */
/* Enterprise B2B Landing — Scoped CSS (v2, 2026-08-03)
   La pagina ora usa MarketingOverviewTemplate + classi DS .lp-*: tutte le
   regole legacy .enterprise-* sono state rimosse perché prive di qualunque
   target nel markup attuale (dead CSS, 459 righe).

   Scopo di questa versione: "respiro" tra le sezioni (audit UI 2026-05-10:
   "layout troppo denso, manca respiro", suggerimento padding 120px 0).
   Solo spaziature, nessun cambio di contenuti. Scala 8px, token --lp-space-*.
   Gli scoped selector ([b-*]) vincono per specificity sul DS condiviso. */

/* ── Respiro verticale tra sezioni ─────────────────────────── */
.lp-page-section[b-34i1ec0x49] {
    /* DS base: space-7 (48px). Audit: 120px tra sezioni. */
    padding-block: clamp(72px, 9vw, 120px);
}

/* La prima sezione dopo l'hero del template non serve il pieno respiro sopra:
   l'hero ha già il proprio padding inferiore. */
.lp-page-section:first-of-type[b-34i1ec0x49] {
    padding-top: clamp(56px, 7vw, 88px);
}

/* Lede: più aria prima della griglia (DS base: space-6 / 32px). */
.lp-page-section-lede[b-34i1ec0x49] {
    margin-bottom: var(--lp-space-8, 64px);
}

/* ── Griglie e pannelli ────────────────────────────────────── */
.lp-content-grid[b-34i1ec0x49] {
    /* DS base: space-5 (24px). */
    gap: var(--lp-space-6, 32px);
}

.lp-content-panel[b-34i1ec0x49] {
    /* DS base: space-6 (32px). */
    padding: var(--lp-space-7, 48px);
}

/* Badge numerati dei 3 step: distacco dal titolo sottostante. */
.lp-content-panel .lp-badge[b-34i1ec0x49] {
    display: inline-block;
    margin-bottom: var(--lp-space-4, 16px);
}

/* Pannello CTA "Preventivo personalizzato": respiro maggiore, è il climax
   della pagina prima del footer CTA del template. */
.lp-content-panel--strong[b-34i1ec0x49] {
    padding-block: clamp(56px, 7vw, 96px);
}

/* ── Mobile (≤768px): respiro ridotto ma non compresso ─────── */
@media (max-width: 768px) {
    .lp-page-section[b-34i1ec0x49] {
        padding-block: 64px;
    }

    .lp-page-section:first-of-type[b-34i1ec0x49] {
        padding-top: 48px;
    }

    .lp-page-section-lede[b-34i1ec0x49] {
        margin-bottom: var(--lp-space-6, 32px);
    }

    .lp-content-grid[b-34i1ec0x49] {
        gap: var(--lp-space-5, 24px);
    }

    .lp-content-panel[b-34i1ec0x49] {
        padding: var(--lp-space-5, 24px);
    }

    .lp-content-panel--strong[b-34i1ec0x49] {
        padding-block: 48px;
    }
}
/* /Pages/Public/FoundingMembersLanding.razor.rz.scp.css */
.founding-validation-strip[b-iamebmovgs] {
    width: min(1120px, calc(100% - 48px));
    margin: calc(var(--lp-space-7) * -1) auto var(--lp-space-7);
    padding: var(--lp-space-4) var(--lp-space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lp-space-3);
    color: var(--lp-text);
    background: color-mix(in srgb, var(--lp-accent-warm) 10%, var(--lp-surface));
    border: 1px solid color-mix(in srgb, var(--lp-accent-warm) 38%, var(--lp-border));
    border-radius: var(--lp-radius-lg);
}

.founding-validation-strip svg[b-iamebmovgs] {
    width: 28px;
    flex: 0 0 28px;
    color: var(--lp-accent-warm);
}

.founding-validation-strip div[b-iamebmovgs] {
    display: grid;
    gap: 2px;
}

.founding-validation-strip span[b-iamebmovgs] {
    color: var(--lp-muted);
    font-size: var(--lp-text-sm);
}

.founding-section-heading[b-iamebmovgs] {
    max-width: 720px;
    margin: 0 auto var(--lp-space-6);
    text-align: center;
}

.founding-benefits[b-iamebmovgs],
.founding-showcase[b-iamebmovgs] {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1120px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--lp-space-4);
}

.founding-benefit[b-iamebmovgs],
.founding-card[b-iamebmovgs] {
    padding: var(--lp-space-5);
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
}

.founding-benefit h3[b-iamebmovgs],
.founding-card h3[b-iamebmovgs] {
    margin: 0 0 var(--lp-space-2);
    font-size: var(--lp-text-lg, 18px);
    color: var(--lp-text);
}

.founding-benefit p[b-iamebmovgs] {
    margin: 0;
    color: var(--lp-muted);
    line-height: 1.55;
}

.founding-note[b-iamebmovgs],
.founding-seats[b-iamebmovgs] {
    width: fit-content;
    max-width: 720px;
    margin: 0 auto var(--lp-space-5);
    padding: var(--lp-space-2) var(--lp-space-4);
    color: var(--lp-muted);
    background: var(--lp-surface-solid, var(--lp-surface));
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-pill, 999px);
    font-size: var(--lp-text-sm);
    text-align: center;
}

.founding-stats[b-iamebmovgs] {
    max-width: 880px;
    margin: 0 auto var(--lp-space-3);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lp-space-4);
}

.founding-stats div[b-iamebmovgs] {
    padding: var(--lp-space-4);
    text-align: center;
    background: color-mix(in srgb, var(--lp-accent-warm) 6%, var(--lp-surface));
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
}

.founding-stats dt[b-iamebmovgs] {
    color: var(--lp-muted);
    font-size: var(--lp-text-sm);
}

.founding-stats dd[b-iamebmovgs] {
    margin: var(--lp-space-1) 0 0;
    font-size: var(--lp-text-3xl);
    font-weight: 600;
    color: var(--lp-text);
    font-variant-numeric: tabular-nums;
}

.founding-method[b-iamebmovgs] {
    max-width: 720px;
    margin: 0 auto var(--lp-space-6);
    color: var(--lp-muted);
    font-size: var(--lp-text-sm);
    text-align: center;
}

.founding-card-topic[b-iamebmovgs],
.founding-card-since[b-iamebmovgs] {
    margin: 0 0 var(--lp-space-3);
    color: var(--lp-muted);
    font-size: var(--lp-text-sm);
}

.founding-card dl[b-iamebmovgs] {
    display: flex;
    gap: var(--lp-space-5);
    margin: 0 0 var(--lp-space-3);
}

.founding-card dt[b-iamebmovgs] {
    color: var(--lp-muted);
    font-size: var(--lp-text-xs, 12px);
}

.founding-card dd[b-iamebmovgs] {
    margin: 0;
    font-weight: 600;
    color: var(--lp-text);
    font-variant-numeric: tabular-nums;
}

.founding-card h3[b-iamebmovgs] {
    margin-top: var(--lp-space-3);
}

.founding-panel[b-iamebmovgs] {
    max-width: 680px;
    margin: 0 auto;
    padding: var(--lp-space-6);
    background: var(--lp-surface);
    border: 1px solid color-mix(in srgb, var(--lp-accent-warm) 30%, var(--lp-border));
    border-radius: var(--lp-radius-xl, var(--lp-radius-lg));
}

.founding-actions[b-iamebmovgs] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lp-space-3);
    margin-top: var(--lp-space-4);
}

.founding-status h3[b-iamebmovgs] {
    margin: 0 0 var(--lp-space-3);
}

.founding-status-label[b-iamebmovgs] {
    margin: var(--lp-space-3) 0 var(--lp-space-1);
}

.founding-status-meta[b-iamebmovgs] {
    margin: 0 0 var(--lp-space-3);
    color: var(--lp-muted);
    font-size: var(--lp-text-sm);
}

.founding-field[b-iamebmovgs] {
    display: grid;
    gap: var(--lp-space-1);
    margin-bottom: var(--lp-space-4);
}

.founding-field label[b-iamebmovgs],
.founding-check label[b-iamebmovgs] {
    color: var(--lp-text);
    font-weight: 500;
}

.founding-field small[b-iamebmovgs] {
    color: var(--lp-muted);
    font-size: var(--lp-text-xs, 12px);
}

.founding-form-wrap[b-iamebmovgs]  input:not([type="checkbox"]),
.founding-form-wrap[b-iamebmovgs]  select,
.founding-form-wrap[b-iamebmovgs]  textarea {
    width: 100%;
    padding: var(--lp-space-2) var(--lp-space-3);
    color: var(--lp-text);
    background: var(--lp-surface-solid, var(--lp-surface));
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-md, 10px);
    font: inherit;
}

.founding-form-wrap[b-iamebmovgs]  input:focus-visible,
.founding-form-wrap[b-iamebmovgs]  select:focus-visible,
.founding-form-wrap[b-iamebmovgs]  textarea:focus-visible {
    outline: 2px solid var(--lp-accent-warm);
    outline-offset: 2px;
}

.founding-check[b-iamebmovgs] {
    display: flex;
    align-items: flex-start;
    gap: var(--lp-space-2);
    margin-bottom: var(--lp-space-3);
    font-size: var(--lp-text-sm);
    line-height: 1.5;
}

.founding-form-wrap[b-iamebmovgs]  input[type="checkbox"] {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    accent-color: var(--lp-accent-warm);
}

.founding-errors[b-iamebmovgs] {
    margin: var(--lp-space-3) 0;
    padding: var(--lp-space-3) var(--lp-space-4);
    color: var(--lp-text);
    background: color-mix(in srgb, var(--lp-accent-danger) 12%, var(--lp-surface));
    border: 1px solid color-mix(in srgb, var(--lp-accent-danger) 45%, var(--lp-border));
    border-radius: var(--lp-radius-md);
    list-style-position: inside;
}

@media (max-width: 720px) {
    .founding-validation-strip[b-iamebmovgs] {
        width: calc(100% - 32px);
        align-items: flex-start;
        justify-content: flex-start;
    }

    .founding-stats[b-iamebmovgs] {
        grid-template-columns: 1fr;
    }

    .founding-panel[b-iamebmovgs] {
        padding: var(--lp-space-5) var(--lp-space-4);
    }
}

@media (forced-colors: active) {
    .founding-benefit[b-iamebmovgs],
    .founding-card[b-iamebmovgs],
    .founding-panel[b-iamebmovgs],
    .founding-stats div[b-iamebmovgs] {
        border-color: CanvasText;
    }
}
/* /Pages/Public/Health.razor.rz.scp.css */
.status-title[b-6emtbzrsbp] {
    font-size: var(--lp-text-2xl, clamp(24px, 2.5vw, 32px));
    margin-bottom: var(--lp-space-4, 16px);
}

.status-banner[b-6emtbzrsbp] {
    display: flex;
    flex-direction: column;
    gap: var(--lp-space-2, 8px);
    padding: var(--lp-space-5, 24px);
    border-radius: var(--lp-radius-lg, 20px);
    margin-bottom: var(--lp-space-6, 32px);
}

.status-banner__label[b-6emtbzrsbp] {
    font-size: var(--lp-text-xl, clamp(20px, 2vw, 24px));
    font-weight: 700;
}

.status-banner__timestamp[b-6emtbzrsbp] {
    font-size: var(--lp-text-sm, 14px);
    opacity: 0.8;
}

.status-banner--loading[b-6emtbzrsbp],
.status-banner--unknown[b-6emtbzrsbp] {
    background: var(--lp-surface, rgba(8, 12, 24, 0.72));
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
}

.status-banner--operational[b-6emtbzrsbp] {
    background: var(--lp-accent-success, #34d399);
    color: var(--lp-on-success, #05070d);
}

.status-banner--degraded[b-6emtbzrsbp] {
    background: var(--lp-accent-warning, #fbbf24);
    color: var(--lp-on-warning, #05070d);
}

.status-banner--outage[b-6emtbzrsbp] {
    background: var(--lp-accent-danger, #f87171);
    color: var(--lp-on-danger, #05070d);
}

.status-components h1[b-6emtbzrsbp],
.status-incidents h2[b-6emtbzrsbp] {
    font-size: var(--lp-text-lg, 18px);
    margin-bottom: var(--lp-space-3, 12px);
}

.status-components ul[b-6emtbzrsbp] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lp-space-2, 8px);
}

.status-component[b-6emtbzrsbp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--lp-space-3, 12px) var(--lp-space-4, 16px);
    background: var(--lp-surface, rgba(8, 12, 24, 0.72));
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--lp-radius, 14px);
}

.status-badge--degraded[b-6emtbzrsbp] {
    display: inline-flex;
    align-items: center;
    gap: var(--lp-space-1, 4px);
    padding: 4px 10px;
    border-radius: var(--lp-radius-pill, 999px);
    font-size: var(--lp-text-xs, 12px);
    font-weight: 500;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: var(--lp-accent-warning, #fbbf24);
}

.status-incidents[b-6emtbzrsbp] {
    margin-top: var(--lp-space-6, 32px);
    display: flex;
    flex-direction: column;
    gap: var(--lp-space-3, 12px);
}

.status-incident[b-6emtbzrsbp] {
    display: flex;
    align-items: flex-start;
    gap: var(--lp-space-3, 12px);
    padding: var(--lp-space-4, 16px);
    background: var(--lp-surface, rgba(8, 12, 24, 0.72));
    border: 1px solid var(--lp-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--lp-radius, 14px);
}

.status-incident p[b-6emtbzrsbp] {
    margin: var(--lp-space-1, 4px) 0 0;
    font-size: var(--lp-text-sm, 14px);
    opacity: 0.8;
}
/* /Pages/Public/Index.razor.rz.scp.css */
/* ==========================================================================
   Index.razor — HOME · Liquid Glass v2 "vetro dosato"
   Rifacimento impaginazione guidato da mockup/liquid-glass-v2/home.html.

   Il markup di hero (§1) e griglia corsi in evidenza (§3) vive nel componente
   figlio Components/Liquid/Templates/HomepageTemplate.razor (usato solo da
   questa pagina): queste regole lo raggiungono via ::deep a partire dal
   wrapper .hm-home dichiarato in Index.razor.

   Regola "vetro dosato": blur SOLO su chip/badge; superfici di contenuto
   (card corso) SOLIDE. Token da wwwroot/css/lg-tokens.css e liquid-portal-v6.css
   (--lg-*, --c-*), con fallback inline per robustezza.

   Nota: la precedente versione di questo file (classi .il-*) era CSS morto —
   nessun elemento di Index.razor la usava — ed è stata sostituita.
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   CHIP / BADGE — unico elemento "vetro" della pagina (blur --lg-1, consentito)
   ────────────────────────────────────────────────────────────────────────── */

.hm-home[b-po5vpl3c38]  .hm-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: var(--lg-r-chip, 10px);
    font-size: 12px; /* pavimento del testo funzionale */
    font-weight: 600;
    color: var(--c-cream, #FAF7F0);
    background: var(--lg-fill, rgba(255, 255, 255, 0.055));
    border: 1px solid var(--lg-edge, rgba(255, 255, 255, 0.14));
    -webkit-backdrop-filter: blur(var(--lg-1, 4px)) saturate(var(--lg-sat, 180%));
    backdrop-filter: blur(var(--lg-1, 4px)) saturate(var(--lg-sat, 180%));
}

.hm-home[b-po5vpl3c38]  .hm-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-orange, #E87C2A);
    flex-shrink: 0;
}

@media (prefers-reduced-transparency: reduce) {
    .hm-home[b-po5vpl3c38]  .hm-chip {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--lg-surface, #0e1524);
    }
}

/* ==========================================================================
   §1 HERO — una value proposition, un CTA arancio, social proof numerica
   ========================================================================== */

.hm-home[b-po5vpl3c38]  .hm-hero {
    text-align: center;
    padding: 96px 24px 64px;
}

/* `hero-content` (classe globale, hook JS) resta; qui solo il layout */
.hm-home[b-po5vpl3c38]  .hm-hero-content {
    max-width: 780px;
    margin: 0 auto;
}

.hm-home[b-po5vpl3c38]  .hm-hero-title {
    font-size: clamp(2.4rem, 5.4vw, 3.9rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
    margin: 22px 0 0;
    color: var(--c-cream, #FAF7F0);
}

.hm-home[b-po5vpl3c38]  .hm-grad {




    color: #E87C2A;
}

.hm-home[b-po5vpl3c38]  .hm-hero-sub {
    color: var(--c-cream-soft, rgba(250, 247, 240, 0.78));
    font-size: 18px;
    line-height: 1.7;
    max-width: 560px;
    margin: 18px auto 0;
}

/* Riga CTA — un solo CTA primario arancio (stile .btn-primary condiviso) */
.hm-home[b-po5vpl3c38]  .hm-hero-cta {
    margin-top: 32px;
}

/* Social proof numerica — dati reali da /api/courses/catalog-stats */
.hm-home[b-po5vpl3c38]  .hm-proof {
    display: flex;
    gap: 48px;
    justify-content: center;
    margin-top: 64px;
    flex-wrap: wrap;
}

.hm-home[b-po5vpl3c38]  .hm-proof-stat {
    text-align: center;
}

.hm-home[b-po5vpl3c38]  .hm-proof-num {
    display: block;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--c-cream, #FAF7F0);
}

.hm-home[b-po5vpl3c38]  .hm-proof-lbl {
    display: block;
    font-size: 13px;
    color: var(--c-cream-mute, rgba(250, 247, 240, 0.56));
    margin-top: 2px;
}

/* ==========================================================================
   PROSSIMO PASSO DI CARRIERA — tre percorsi verticali, metriche privacy-safe
   ========================================================================== */

.hm-home[b-po5vpl3c38]  .career-next {
    padding: clamp(64px, 9vw, 112px) 0;
}

.hm-home[b-po5vpl3c38]  .career-next__head {
    max-width: 720px;
    margin-bottom: 36px;
}

.hm-home[b-po5vpl3c38]  .career-next__head h2 {
    margin: 10px 0 12px;
    color: var(--c-cream, #faf7f0);
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.hm-home[b-po5vpl3c38]  .career-next__head p {
    max-width: 62ch;
    margin: 0;
    color: var(--c-cream-soft, rgba(250, 247, 240, 0.78));
    font-size: 17px;
    line-height: 1.65;
}

.hm-home[b-po5vpl3c38]  .career-next__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.hm-home[b-po5vpl3c38]  .career-next__path,
.hm-home[b-po5vpl3c38]  .career-next__skeleton {
    min-height: 410px;
    border: 1px solid var(--lg-surface-edge, rgba(255, 255, 255, 0.1));
    border-radius: var(--lg-r-card, 20px);
}

.hm-home[b-po5vpl3c38]  .career-next__path {
    display: flex;
    flex-direction: column;
    padding: 26px;
    background: var(--lg-surface, #0e1524);
    box-shadow: var(--lg-shadow-1, 0 4px 16px rgba(0, 0, 0, 0.3));
    animation-delay: calc(var(--stagger-index, 0) * 80ms);
    transition: transform var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                border-color var(--lg-fast, 160ms) ease;
}

.hm-home[b-po5vpl3c38]  .career-next__path:hover {
    transform: translateY(-3px);
    border-color: rgba(232, 124, 42, 0.42);
}

.hm-home[b-po5vpl3c38]  .career-next__icon {
    width: 34px;
    height: 34px;
    margin-bottom: 28px;
    color: var(--c-orange-light, #f89b4d);
}

.hm-home[b-po5vpl3c38]  .career-next__kicker,
.hm-home[b-po5vpl3c38]  .career-next__catalog {
    margin: 0;
    color: var(--c-orange-light, #f89b4d);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hm-home[b-po5vpl3c38]  .career-next__path h3 {
    margin: 8px 0 10px;
    color: var(--c-cream, #faf7f0);
    font-size: 24px;
    line-height: 1.2;
}

.hm-home[b-po5vpl3c38]  .career-next__description {
    margin: 0 0 18px;
    color: var(--c-cream-soft, rgba(250, 247, 240, 0.72));
    font-size: 14px;
    line-height: 1.6;
}

.hm-home[b-po5vpl3c38]  .career-next__catalog {
    margin-bottom: 18px;
    color: var(--c-cream-mute, rgba(250, 247, 240, 0.56));
    letter-spacing: 0.04em;
}

.hm-home[b-po5vpl3c38]  .career-next__metric {
    display: grid;
    gap: 4px;
    margin-top: auto;
    padding: 16px 0;
    border-top: 1px solid rgba(250, 247, 240, 0.1);
    border-bottom: 1px solid rgba(250, 247, 240, 0.1);
    color: var(--c-cream-soft, rgba(250, 247, 240, 0.75));
    font-size: 13px;
}

.hm-home[b-po5vpl3c38]  .career-next__rate {
    color: var(--c-cream, #faf7f0);
    font-family: var(--lp-font-mono, monospace);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}

.hm-home[b-po5vpl3c38]  .career-next__collecting {
    color: var(--c-cream, #faf7f0);
    font-size: 15px;
    font-weight: 700;
}

.hm-home[b-po5vpl3c38]  .career-next__metric small {
    color: var(--c-cream-mute, rgba(250, 247, 240, 0.56));
    line-height: 1.45;
}

.hm-home[b-po5vpl3c38]  .career-next__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin-top: 18px;
    border-radius: 5px;
    color: var(--c-orange-light, #f89b4d);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.hm-home[b-po5vpl3c38]  .career-next__link svg {
    width: 15px;
    height: 15px;
    transition: transform var(--lg-fast, 160ms) ease;
}

.hm-home[b-po5vpl3c38]  .career-next__link:hover svg {
    transform: translateX(4px);
}

.hm-home[b-po5vpl3c38]  .career-next__link:focus-visible,
.hm-home[b-po5vpl3c38]  .career-next__method a:focus-visible {
    outline: 2px solid var(--c-orange-light, #f89b4d);
    outline-offset: 3px;
}

.hm-home[b-po5vpl3c38]  .career-next__method {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 24px;
    padding: 18px 20px;
    border-left: 2px solid var(--c-orange, #e87c2a);
    color: var(--c-cream-mute, rgba(250, 247, 240, 0.62));
    font-size: 13px;
    line-height: 1.6;
}

.hm-home[b-po5vpl3c38]  .career-next__method > svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--c-orange-light, #f89b4d);
}

.hm-home[b-po5vpl3c38]  .career-next__method p { margin: 0; }
.hm-home[b-po5vpl3c38]  .career-next__method strong { color: var(--c-cream, #faf7f0); }
.hm-home[b-po5vpl3c38]  .career-next__method a { margin-left: auto; color: var(--c-orange-light, #f89b4d); white-space: nowrap; }
.hm-home[b-po5vpl3c38]  .career-next__status { color: var(--c-cream-soft, rgba(250, 247, 240, 0.78)); }

@media (max-width: 900px) {
    .hm-home[b-po5vpl3c38]  .career-next__grid { grid-template-columns: 1fr; }
    .hm-home[b-po5vpl3c38]  .career-next__path { min-height: 0; }
}

@media (max-width: 640px) {
    .hm-home[b-po5vpl3c38]  .career-next__path { padding: 22px; }
    .hm-home[b-po5vpl3c38]  .career-next__method { flex-wrap: wrap; }
    .hm-home[b-po5vpl3c38]  .career-next__method a { width: 100%; margin-left: 34px; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-home[b-po5vpl3c38]  .career-next__path,
    .hm-home[b-po5vpl3c38]  .career-next__link svg { animation: none; transition: none; transform: none; }
}

@media (forced-colors: active) {
    .hm-home[b-po5vpl3c38]  .career-next__path,
    .hm-home[b-po5vpl3c38]  .career-next__metric { border-color: CanvasText; }
    .hm-home[b-po5vpl3c38]  .career-next__method { border-color: Highlight; }
    .hm-home[b-po5vpl3c38]  .career-next__link:focus-visible,
    .hm-home[b-po5vpl3c38]  .career-next__method a:focus-visible { outline-color: Highlight; }
}

/* ==========================================================================
   TROVA LA CARRIERA GIUSTA — quiz di orientamento verso i percorsi professionali
   ========================================================================== */

.hm-home[b-po5vpl3c38]  .career-finder {
    padding: 0 0 clamp(64px, 9vw, 112px);
}

.hm-home[b-po5vpl3c38]  .career-finder__head {
    max-width: 720px;
    margin-bottom: 28px;
}

.hm-home[b-po5vpl3c38]  .career-finder__head h2 {
    margin: 10px 0 12px;
    color: var(--c-cream, #faf7f0);
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.hm-home[b-po5vpl3c38]  .career-finder__head p {
    max-width: 62ch;
    margin: 0;
    color: var(--c-cream-soft, rgba(250, 247, 240, 0.78));
    font-size: 17px;
    line-height: 1.65;
}

.hm-home[b-po5vpl3c38]  .career-finder__panel {
    max-width: 820px;
    padding: clamp(22px, 4vw, 36px);
    border: 1px solid var(--lg-surface-edge, rgba(255, 255, 255, 0.1));
    border-radius: var(--lg-r-card, 20px);
    background: var(--lg-surface, #0e1524);
    box-shadow: var(--lg-shadow-1, 0 4px 16px rgba(0, 0, 0, 0.3));
}

.hm-home[b-po5vpl3c38]  .career-finder__progress {
    height: 3px;
    margin-bottom: 22px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(250, 247, 240, 0.1);
}

/* Avanzamento via transform (niente layout thrash): --progress è un intero 0–100
   scritto dal componente, così nessun separatore decimale dipende dalla cultura. */
.hm-home[b-po5vpl3c38]  .career-finder__progress span {
    display: block;
    height: 100%;
    background: var(--c-orange, #e87c2a);
    transform: scaleX(calc(var(--progress, 0) / 100));
    transform-origin: left center;
    transition: transform var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.hm-home[b-po5vpl3c38]  .career-finder__step,
.hm-home[b-po5vpl3c38]  .career-finder__kicker,
.hm-home[b-po5vpl3c38]  .career-finder__catalog {
    margin: 0;
    color: var(--c-cream-mute, rgba(250, 247, 240, 0.56));
    font-family: var(--lp-font-mono, monospace);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hm-home[b-po5vpl3c38]  .career-finder__kicker { color: var(--c-orange-light, #f89b4d); font-weight: 700; }

.hm-home[b-po5vpl3c38]  .career-finder__question {
    margin: 8px 0 20px;
    color: var(--c-cream, #faf7f0);
    font-size: clamp(19px, 2.6vw, 24px);
    line-height: 1.3;
}

.hm-home[b-po5vpl3c38]  .career-finder__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.hm-home[b-po5vpl3c38]  .career-finder__option {
    min-height: 56px;
    padding: 14px 18px;
    border: 1px solid rgba(250, 247, 240, 0.14);
    border-radius: 14px;
    background: rgba(250, 247, 240, 0.03);
    color: var(--c-cream, #faf7f0);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--lg-fast, 160ms) ease, background var(--lg-fast, 160ms) ease;
}

.hm-home[b-po5vpl3c38]  .career-finder__option:hover { border-color: rgba(232, 124, 42, 0.42); }

.hm-home[b-po5vpl3c38]  .career-finder__option.is-selected {
    border-color: var(--c-orange, #e87c2a);
    background: rgba(232, 124, 42, 0.12);
}

.hm-home[b-po5vpl3c38]  .career-finder__nav,
.hm-home[b-po5vpl3c38]  .career-finder__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.hm-home[b-po5vpl3c38]  .career-finder__nav { justify-content: flex-end; margin-top: 24px; }
.hm-home[b-po5vpl3c38]  .career-finder__actions { margin: 18px 0; }

.hm-home[b-po5vpl3c38]  .career-finder__next,
.hm-home[b-po5vpl3c38]  .career-finder__primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 999px;
    background: var(--c-orange, #e87c2a);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.hm-home[b-po5vpl3c38]  .career-finder__primary svg { width: 15px; height: 15px; }
.hm-home[b-po5vpl3c38]  .career-finder__next:disabled { opacity: 0.4; cursor: not-allowed; }

.hm-home[b-po5vpl3c38]  .career-finder__back,
.hm-home[b-po5vpl3c38]  .career-finder__restart {
    padding: 11px 20px;
    border: 1px solid rgba(250, 247, 240, 0.18);
    border-radius: 999px;
    background: none;
    color: var(--c-cream-soft, rgba(250, 247, 240, 0.78));
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.hm-home[b-po5vpl3c38]  .career-finder__secondary,
.hm-home[b-po5vpl3c38]  .career-finder__alternatives a {
    color: var(--c-orange-light, #f89b4d);
    font-size: 14px;
    font-weight: 700;
}

.hm-home[b-po5vpl3c38]  .career-finder__error {
    margin: 16px 0 0;
    color: #f5a3a3;
    font-size: 14px;
}

.hm-home[b-po5vpl3c38]  .career-finder__result-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hm-home[b-po5vpl3c38]  .career-finder__result-head h3 {
    margin: 8px 0;
    color: var(--c-cream, #faf7f0);
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.2;
}

.hm-home[b-po5vpl3c38]  .career-finder__icon {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    color: var(--c-orange-light, #f89b4d);
}

.hm-home[b-po5vpl3c38]  .career-finder__description,
.hm-home[b-po5vpl3c38]  .career-finder__why,
.hm-home[b-po5vpl3c38]  .career-finder__alternatives {
    color: var(--c-cream-soft, rgba(250, 247, 240, 0.75));
    font-size: 15px;
    line-height: 1.6;
}

.hm-home[b-po5vpl3c38]  .career-finder__description { margin: 0 0 16px; }
.hm-home[b-po5vpl3c38]  .career-finder__why-title { margin: 0 0 6px; color: var(--c-cream, #faf7f0); font-size: 13px; font-weight: 700; }
.hm-home[b-po5vpl3c38]  .career-finder__why { margin: 0 0 18px; padding-left: 18px; }
.hm-home[b-po5vpl3c38]  .career-finder__metric { margin-bottom: 14px; }
.hm-home[b-po5vpl3c38]  .career-finder__note { margin: 0 0 12px; color: var(--c-cream-mute, rgba(250, 247, 240, 0.62)); font-size: 13px; }
.hm-home[b-po5vpl3c38]  .career-finder__alternatives { margin: 0 0 16px; font-size: 14px; }
.hm-home[b-po5vpl3c38]  .career-finder__alternatives a { margin-left: 10px; }

.hm-home[b-po5vpl3c38]  .career-finder__disclaimer {
    max-width: 820px;
    margin: 14px 0 0;
    color: var(--c-cream-mute, rgba(250, 247, 240, 0.56));
    font-size: 12px;
    line-height: 1.5;
}

.hm-home[b-po5vpl3c38]  .career-finder__option:focus-visible,
.hm-home[b-po5vpl3c38]  .career-finder__next:focus-visible,
.hm-home[b-po5vpl3c38]  .career-finder__back:focus-visible,
.hm-home[b-po5vpl3c38]  .career-finder__restart:focus-visible,
.hm-home[b-po5vpl3c38]  .career-finder__primary:focus-visible,
.hm-home[b-po5vpl3c38]  .career-finder__secondary:focus-visible,
.hm-home[b-po5vpl3c38]  .career-finder__alternatives a:focus-visible {
    outline: 2px solid var(--c-orange-light, #f89b4d);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .hm-home[b-po5vpl3c38]  .career-finder__options { grid-template-columns: 1fr; }
    .hm-home[b-po5vpl3c38]  .career-finder__nav { justify-content: stretch; }
    .hm-home[b-po5vpl3c38]  .career-finder__next { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-home[b-po5vpl3c38]  .career-finder__progress span,
    .hm-home[b-po5vpl3c38]  .career-finder__option { transition: none; }
}

@media (forced-colors: active) {
    .hm-home[b-po5vpl3c38]  .career-finder__panel,
    .hm-home[b-po5vpl3c38]  .career-finder__option { border-color: CanvasText; }
    .hm-home[b-po5vpl3c38]  .career-finder__option.is-selected { border-color: Highlight; }
    .hm-home[b-po5vpl3c38]  .career-finder__progress span { background: Highlight; }
}

/* ==========================================================================
   §3 CORSI IN EVIDENZA — sec-head + griglia card SOLIDE 16:9
   ========================================================================== */

.hm-home[b-po5vpl3c38]  .hm-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.hm-home[b-po5vpl3c38]  .hm-sec-head h2 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--c-cream, #FAF7F0);
}

.hm-home[b-po5vpl3c38]  .hm-sec-head h2 .accent {




    color: #E87C2A;
}

.hm-home[b-po5vpl3c38]  .hm-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-orange-light, #F89B4D);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 4px;
}

.hm-home[b-po5vpl3c38]  .hm-more svg {
    width: 14px;
    height: 14px;
    transition: transform var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.hm-home[b-po5vpl3c38]  .hm-more:hover svg {
    transform: translateX(4px);
}

.hm-home[b-po5vpl3c38]  .hm-more:focus-visible {
    outline: 2px solid var(--c-orange-light, #F89B4D);
    outline-offset: 2px;
}

.hm-home[b-po5vpl3c38]  .hm-courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Card corso — SUPERFICIE SOLIDA (no vetro), raggio --lg-r-card 20px */
.hm-home[b-po5vpl3c38]  .hm-course-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--lg-surface, #0e1524);
    border: 1px solid var(--lg-surface-edge, rgba(255, 255, 255, 0.08));
    border-radius: var(--lg-r-card, 20px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30);
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                box-shadow var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.hm-home[b-po5vpl3c38]  .hm-course-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--lg-shadow-2, 0 8px 24px rgba(0, 0, 0, 0.38));
    border-color: rgba(250, 247, 240, 0.16);
}

.hm-home[b-po5vpl3c38]  .hm-course-card:focus-visible {
    outline: 2px solid var(--c-orange-light, #F89B4D);
    outline-offset: 2px;
}

/* Thumb 16:9 — gradiente di fallback (palette mockup g1..g6);
   se il corso ha ThumbnailUrl l'immagine copre il gradiente */
.hm-home[b-po5vpl3c38]  .hm-thumb {
    aspect-ratio: 16 / 9;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 12px;
}

.hm-home[b-po5vpl3c38]  .hm-thumb-g1 { background: linear-gradient(135deg, #E87C2A, #F8B44D); }
.hm-home[b-po5vpl3c38]  .hm-thumb-g2 { background: linear-gradient(135deg, #7C5CE0, #B79CFF); }
.hm-home[b-po5vpl3c38]  .hm-thumb-g3 { background: linear-gradient(135deg, #2A7DE8, #6FC3FF); }
.hm-home[b-po5vpl3c38]  .hm-thumb-g4 { background: linear-gradient(135deg, #1FA97A, #5FD6A8); }
.hm-home[b-po5vpl3c38]  .hm-thumb-g5 { background: linear-gradient(135deg, #D6457A, #FF8FB1); }
.hm-home[b-po5vpl3c38]  .hm-thumb-g6 { background: linear-gradient(135deg, #3A4A6B, #6B8AC4); }

.hm-home[b-po5vpl3c38]  .hm-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hm-home[b-po5vpl3c38]  .hm-thumb .hm-chip {
    position: relative;
    z-index: 1;
}

/* Corpo card — gerarchia tipografica: categoria > titolo > docente > meta */
.hm-home[b-po5vpl3c38]  .hm-cc-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    text-align: left;
}

.hm-home[b-po5vpl3c38]  .hm-cc-cat {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c-orange-light, #F89B4D);
}

.hm-home[b-po5vpl3c38]  .hm-cc-title {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    color: var(--c-cream, #FAF7F0);
}

.hm-home[b-po5vpl3c38]  .hm-cc-author {
    font-size: 13px;
    color: var(--c-cream-mute, rgba(250, 247, 240, 0.56));
    margin: 0;
}

/* Rating + n. studenti inline (pattern benchmark) */
.hm-home[b-po5vpl3c38]  .hm-cc-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--c-cream-mute, rgba(250, 247, 240, 0.56));
}

.hm-home[b-po5vpl3c38]  .hm-cc-stars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--c-orange-light, #F89B4D);
    font-weight: 700;
}

.hm-home[b-po5vpl3c38]  .hm-cc-star {
    width: 13px;
    height: 13px;
}

.hm-home[b-po5vpl3c38]  .hm-cc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.hm-home[b-po5vpl3c38]  .hm-cc-hours {
    font-size: 12.5px;
    color: var(--c-cream-faint, rgba(250, 247, 240, 0.36));
}

.hm-home[b-po5vpl3c38]  .hm-cc-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--c-cream, #FAF7F0);
}

.hm-home[b-po5vpl3c38]  .hm-cc-price s {
    font-size: 13px;
    font-weight: 400;
    color: var(--c-cream-faint, rgba(250, 247, 240, 0.36));
    margin-left: 6px;
}

/* ==========================================================================
   §3.5 ESPLORA PER CATEGORIA — tile SOLIDE (stessa famiglia delle card corso)
   ========================================================================== */

.hm-home[b-po5vpl3c38]  .hm-cat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

/* Tile categoria — SUPERFICIE SOLIDA (no vetro), raggio --lg-r-card 20px */
.hm-home[b-po5vpl3c38]  .hm-cat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    text-align: center;
    background: var(--lg-surface, #0e1524);
    border: 1px solid var(--lg-surface-edge, rgba(255, 255, 255, 0.08));
    border-radius: var(--lg-r-card, 20px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30);
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                box-shadow var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1)),
                border-color var(--lg-fast, 160ms) var(--lg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.hm-home[b-po5vpl3c38]  .hm-cat-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--lg-shadow-2, 0 8px 24px rgba(0, 0, 0, 0.38));
    border-color: rgba(232, 124, 42, 0.40);
}

.hm-home[b-po5vpl3c38]  .hm-cat-tile:focus-visible {
    outline: 2px solid var(--c-orange-light, #F89B4D);
    outline-offset: 2px;
}

.hm-home[b-po5vpl3c38]  .hm-cat-icon {
    width: 26px;
    height: 26px;
    color: var(--c-orange-light, #F89B4D);
}

.hm-home[b-po5vpl3c38]  .hm-cat-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--c-cream, #FAF7F0);
}

.hm-home[b-po5vpl3c38]  .hm-cat-count {
    font-size: 12px;
    color: var(--c-cream-mute, rgba(250, 247, 240, 0.56));
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {
    .hm-home[b-po5vpl3c38]  .hm-courses-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hm-home[b-po5vpl3c38]  .hm-cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .hm-home[b-po5vpl3c38]  .hm-hero {
        padding: 64px 16px 48px;
    }

    .hm-home[b-po5vpl3c38]  .hm-hero-sub {
        font-size: 16px;
    }

    .hm-home[b-po5vpl3c38]  .hm-proof {
        gap: 24px;
        margin-top: 48px;
    }

    .hm-home[b-po5vpl3c38]  .hm-proof-num {
        font-size: 24px;
    }

    .hm-home[b-po5vpl3c38]  .hm-sec-head {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .hm-home[b-po5vpl3c38]  .hm-courses-grid {
        grid-template-columns: 1fr;
    }

    .hm-home[b-po5vpl3c38]  .hm-cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hm-home[b-po5vpl3c38]  .hm-hero-title {
        font-size: 2rem;
    }
}

/* ==========================================================================
   ACCESSIBILITÀ — reduced motion / touch
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .hm-home[b-po5vpl3c38]  .hm-course-card,
    .hm-home[b-po5vpl3c38]  .hm-cat-tile,
    .hm-home[b-po5vpl3c38]  .hm-more svg {
        transition: none;
    }

    .hm-home[b-po5vpl3c38]  .hm-course-card:hover,
    .hm-home[b-po5vpl3c38]  .hm-cat-tile:hover {
        transform: none;
    }
}

/* Su touch niente lift persistente dopo il tap (iOS Safari mantiene :hover) */
@media (hover: none) and (pointer: coarse) {
    .hm-home[b-po5vpl3c38]  .hm-course-card:hover,
    .hm-home[b-po5vpl3c38]  .hm-cat-tile:hover {
        transform: none;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30);
    }
}
/* /Pages/Public/Webinars.razor.rz.scp.css */
/* Conversazioni sul Futuro del Lavoro — webinar gratuiti (HR/AI/Leadership).
   Scoped CSS: solo il layout specifico della pagina, il resto viene dal
   design system condiviso (.lp-*). */

.wb-list[b-0620wti40c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--lp-space-6, 32px);
}

.wb-card[b-0620wti40c] {
    display: flex;
    flex-direction: column;
    gap: var(--lp-space-3, 16px);
}

.wb-card-header[b-0620wti40c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lp-space-3, 16px);
}

.wb-seats[b-0620wti40c] {
    font-size: var(--lp-text-sm);
}

.wb-card-title[b-0620wti40c] {
    font-size: var(--lp-text-lg);
    margin: 0;
}

.wb-card-date[b-0620wti40c] {
    margin: 0;
    text-transform: capitalize;
}

.wb-card-description[b-0620wti40c] {
    margin: 0;
}

.wb-card-speaker[b-0620wti40c] {
    margin: 0;
    font-size: var(--lp-text-sm);
}

.wb-registered[b-0620wti40c] {
    /* Stato di esito positivo (DESIGN.md "Stati": Successo #34d399) */
    color: #34d399;
    font-weight: 600;
    margin: 0;
}

.wb-form[b-0620wti40c] {
    display: flex;
    flex-direction: column;
    gap: var(--lp-space-3, 16px);
    margin-top: var(--lp-space-2, 8px);
}

.wb-consent[b-0620wti40c] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--lp-text-sm);
    cursor: pointer;
}

.wb-consent input[type="checkbox"][b-0620wti40c] {
    margin-top: 3px;
}

.wb-error[b-0620wti40c] {
    /* DESIGN.md "Stati": Errore #f87171, stesso token di .nl-error */
    color: #f87171;
    font-size: var(--lp-text-sm);
    margin: 0;
}
/* /Pages/Retention/Coach.razor.rz.scp.css */
/* Coach — conversazione verticale (design doc §10). Bubbles user/assistant,
   risposte in aria-live polite, errore inline che non blocca l'input. */

.coach-page[b-0j1qs3waay] {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 20px 64px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.coach-header[b-0j1qs3waay] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.coach-kicker[b-0j1qs3waay] {
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lp-accent-warm);
}

.coach-title[b-0j1qs3waay] {
    margin: 0;
    font-size: var(--lp-text-2xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lp-text);
}

.coach-subtitle[b-0j1qs3waay] {
    margin: 0;
    font-size: var(--lp-text-base);
    line-height: 1.6;
    color: var(--lp-muted);
    max-width: 56ch;
}

/* Protocollo visibile (messaggio di sistema, non in history) */
.coach-protocol[b-0j1qs3waay] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--lp-radius-sm);
    border: 1px solid color-mix(in srgb, var(--lp-accent) 30%, transparent);
    background: color-mix(in srgb, var(--lp-accent) 12%, transparent);
    font-size: var(--lp-text-sm);
    line-height: 1.55;
    color: var(--lp-text);
}

.coach-protocol i[b-0j1qs3waay] {
    margin-top: 2px;
    color: var(--lp-accent-text);
}

/* Thread */
.coach-thread[b-0j1qs3waay] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.coach-bubble[b-0j1qs3waay] {
    max-width: 85%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border-radius: var(--lp-radius-lg);
    border: 1px solid var(--lp-border);
    background: var(--lp-surface);
}

.coach-bubble-user[b-0j1qs3waay] {
    align-self: flex-end;
    border-color: color-mix(in srgb, var(--lp-accent-warm) 30%, transparent);
    background: color-mix(in srgb, var(--lp-accent-warm) 10%, transparent);
}

.coach-bubble-assistant[b-0j1qs3waay] {
    align-self: flex-start;
}

.coach-bubble-error[b-0j1qs3waay] {
    align-self: flex-start;
    border-color: color-mix(in srgb, var(--lp-accent-warm) 35%, transparent);
    background: color-mix(in srgb, var(--lp-accent-danger) 12%, transparent);
}

.coach-bubble-role[b-0j1qs3waay] {
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--lp-muted);
}

.coach-bubble-text[b-0j1qs3waay] {
    margin: 0;
    font-size: var(--lp-text-base);
    line-height: 1.6;
    color: var(--lp-text);
    white-space: pre-wrap;
}

.coach-action[b-0j1qs3waay] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    min-height: 24px; /* pavimento touch target di prodotto */
    margin-top: 4px;
    padding: 5px 12px;
    border-radius: var(--lg-r-pill);
    border: 1px solid color-mix(in srgb, var(--lp-accent-warm) 45%, transparent);
    background: color-mix(in srgb, var(--lp-accent-warm) 12%, transparent);
    font-size: var(--lp-text-xs);
    font-weight: 700;
    color: var(--lp-accent-warm);
    text-decoration: none;
}

.coach-action:hover[b-0j1qs3waay] {
    text-decoration: underline;
}

.coach-action:focus-visible[b-0j1qs3waay] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
}

/* Composer */
.coach-composer[b-0j1qs3waay] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.coach-input[b-0j1qs3waay] {
    flex: 1;
    min-height: 64px;
    padding: 12px 14px;
    border-radius: var(--lp-radius-sm);
    border: 1px solid var(--lp-border-strong);
    background: var(--lp-border);
    color: var(--lp-text);
    font-size: var(--lp-text-base);
    line-height: 1.55;
    font-family: inherit;
    resize: vertical;
    transition: border-color var(--lp-motion-fast) ease;
}

.coach-input[b-0j1qs3waay]::placeholder {
    color: var(--lp-muted);
}

.coach-input:focus-visible[b-0j1qs3waay] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 1px;
    border-color: var(--lp-accent-warm);
}

.coach-input:disabled[b-0j1qs3waay] {
    opacity: 0.6;
}

.coach-send[b-0j1qs3waay] {
    flex: none;
}

.coach-spinner[b-0j1qs3waay] {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 6px;
    vertical-align: -2px;
    border: 2px solid var(--lp-faint);
    border-top-color: var(--lp-on-accent);
    border-radius: 50%;
    animation: coach-spin-b-0j1qs3waay 0.8s linear infinite;
}

@keyframes coach-spin-b-0j1qs3waay {
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .coach-page[b-0j1qs3waay] {
        padding: 20px 14px 48px;
    }

    .coach-bubble[b-0j1qs3waay] {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .coach-input[b-0j1qs3waay] {
        transition: none;
    }

    .coach-spinner[b-0j1qs3waay] {
        animation: none;
    }
}

@media (forced-colors: active) {
    .coach-protocol[b-0j1qs3waay],
    .coach-bubble[b-0j1qs3waay],
    .coach-action[b-0j1qs3waay] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }

    .coach-input[b-0j1qs3waay] {
        border-color: CanvasText;
        background: Field;
        color: FieldText;
    }
}
/* /Pages/Retention/Insights.razor.rz.scp.css */
/* Insights — analytics del learner. Token del design system (--lp-*) con ripieghi:
   il colore compare solo come stato o dato (Regola della Rarità, DESIGN.md). */

.insights-page[b-u5tipv10rb] {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--lp-space-6) var(--lp-space-4) var(--lp-space-9);
    display: grid;
    gap: var(--lp-space-5);
}

.ins-header[b-u5tipv10rb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lp-space-4);
    align-items: flex-end;
    justify-content: space-between;
}

.ins-kicker[b-u5tipv10rb],
.ins-label[b-u5tipv10rb] {
    font-family: var(--lp-font-mono);
    font-size: var(--lp-text-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ins-kicker[b-u5tipv10rb] {
    color: var(--lp-accent-warm);
}

.ins-label[b-u5tipv10rb] {
    color: var(--lp-faint);
}

.ins-title[b-u5tipv10rb] {
    margin: 6px 0 4px;
    font-family: var(--lp-font-display);
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 800;
    line-height: var(--lp-leading-tight);
    letter-spacing: -0.02em;
    color: var(--lp-text);
}

.ins-subtitle[b-u5tipv10rb],
.ins-why[b-u5tipv10rb] {
    margin: 0;
    color: var(--lp-muted);
    max-width: 68ch;
}

.ins-why[b-u5tipv10rb] {
    font-size: var(--lp-text-sm);
}

/* Periodo */
.ins-period[b-u5tipv10rb] {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-pill);
    background: var(--lp-surface);
}

.ins-period-btn[b-u5tipv10rb] {
    border: 0;
    min-height: 44px;
    background: transparent;
    color: var(--lp-muted);
    padding: 8px 14px;
    border-radius: var(--lp-radius-pill);
    font: inherit;
    font-size: var(--lp-text-sm);
    cursor: pointer;
}

.ins-period-btn[aria-pressed="true"][b-u5tipv10rb] {
    background: var(--lp-accent);
    color: var(--lp-on-accent);
}

.ins-period-btn:focus-visible[b-u5tipv10rb] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
}

.ins-period-btn:disabled[b-u5tipv10rb] {
    cursor: default;
    opacity: 0.7;
}

/* Griglie e card */
.ins-grid[b-u5tipv10rb] {
    display: grid;
    gap: var(--lp-space-4);
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.ins-two[b-u5tipv10rb] {
    display: grid;
    gap: var(--lp-space-4);
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.ins-card[b-u5tipv10rb] {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    padding: 18px 20px;
    display: grid;
    gap: 8px;
    align-content: start;
}

.ins-card-title[b-u5tipv10rb] {
    margin: 0;
    font-family: var(--lp-font-display);
    font-size: var(--lp-text-lg);
    font-weight: 700;
    line-height: 1.35;
    color: var(--lp-text);
}

.ins-kpi[b-u5tipv10rb] {
    font-family: var(--lp-font-display);
    font-size: var(--lp-text-3xl);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--lp-text);
}

.ins-kpi small[b-u5tipv10rb] {
    font-family: var(--lp-font-body);
    font-size: var(--lp-text-sm);
    font-weight: 600;
    letter-spacing: 0;
    margin-left: 6px;
    color: var(--lp-muted);
}

.ins-delta[b-u5tipv10rb] {
    font-size: var(--lp-text-sm);
    color: var(--lp-muted);
}

.ins-delta-up[b-u5tipv10rb] {
    color: var(--lp-accent-success);
}

.ins-act[b-u5tipv10rb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 9px 14px;
    border-radius: var(--lp-radius-sm);
    background: var(--lp-accent);
    color: var(--lp-on-accent);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--lp-text-sm);
    width: max-content;
}

.ins-act-ghost[b-u5tipv10rb] {
    background: transparent;
    border: 1px solid var(--lp-border-strong);
    color: var(--lp-text);
}

.ins-act:focus-visible[b-u5tipv10rb] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
}

/* Grafici SVG */
.ins-chart[b-u5tipv10rb] {
    width: 100%;
    height: auto;
    display: block;
}

.ins-line[b-u5tipv10rb] {
    fill: none;
    stroke: var(--lp-accent-2);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.ins-bar[b-u5tipv10rb] {
    fill: var(--lp-accent);
}

/* Calibration */
.ins-cal-counts[b-u5tipv10rb] {
    display: block;
    margin-top: 4px;
    color: var(--lp-faint);
}

.ins-table-wrap[b-u5tipv10rb] {
    overflow-x: auto;
}

.ins-table[b-u5tipv10rb] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--lp-text-sm);
}

.ins-table th[b-u5tipv10rb],
.ins-table td[b-u5tipv10rb] {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--lp-border);
    vertical-align: middle;
}

.ins-table th[b-u5tipv10rb] {
    font-family: var(--lp-font-mono);
    font-size: var(--lp-text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lp-faint);
}

.ins-bars[b-u5tipv10rb] {
    position: relative;
    height: 8px;
    min-width: 120px;
    border-radius: var(--lp-radius-pill);
    background: var(--lp-border);
}

.ins-bars span[b-u5tipv10rb] {
    position: absolute;
    left: 0;
    border-radius: var(--lp-radius-pill);
}

.ins-bar-m[b-u5tipv10rb] {
    top: 0;
    bottom: 0;
    background: var(--lp-accent-2);
}

.ins-bar-c[b-u5tipv10rb] {
    top: 2px;
    bottom: 2px;
    border-radius: var(--lp-radius-pill);
    background: var(--lp-muted);
    opacity: 0.55;
}

.ins-tag[b-u5tipv10rb] {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--lp-radius-pill);
    font-size: var(--lp-text-xs);
    font-weight: 600;
    border: 1px solid var(--lp-border-strong);
    color: var(--lp-muted);
}

.ins-tag-overconfident[b-u5tipv10rb] {
    background: var(--lp-accent-warning);
    color: var(--lp-on-warning);
    border-color: transparent;
}

.ins-tag-underconfident[b-u5tipv10rb] {
    background: var(--lp-accent-success);
    color: var(--lp-on-success);
    border-color: transparent;
}

.ins-note[b-u5tipv10rb] {
    font-size: var(--lp-text-xs);
    color: var(--lp-faint);
}

.ins-table a[b-u5tipv10rb] {
    color: var(--lp-accent-text);
}

/* Ricordare vs applicare */
.ins-compare[b-u5tipv10rb] {
    margin: 0;
    display: grid;
    gap: 10px;
}

.ins-compare div[b-u5tipv10rb] {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: 12px;
}

.ins-compare dt[b-u5tipv10rb] {
    font-size: var(--lp-text-sm);
    color: var(--lp-muted);
}

.ins-compare dd[b-u5tipv10rb] {
    margin: 0;
}

.ins-meter[b-u5tipv10rb] {
    display: block;
    height: 12px;
    border-radius: var(--lp-radius-pill);
    background: var(--lp-border);
    overflow: hidden;
}

.ins-meter span[b-u5tipv10rb] {
    display: block;
    height: 100%;
    border-radius: var(--lp-radius-pill);
}

.ins-meter-m[b-u5tipv10rb] {
    background: var(--lp-accent-2);
}

.ins-meter-a[b-u5tipv10rb] {
    background: var(--lp-accent);
}

/* Stati */
.ins-state[b-u5tipv10rb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px 24px;
    text-align: center;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
}

.ins-state > i[b-u5tipv10rb] {
    font-size: var(--lp-text-2xl);
    color: var(--lp-accent-warning);
}

.ins-state-title[b-u5tipv10rb] {
    margin: 0;
    font-family: var(--lp-font-display);
    font-size: var(--lp-text-xl);
    font-weight: 800;
    color: var(--lp-text);
}

.ins-state p[b-u5tipv10rb] {
    margin: 0;
    color: var(--lp-muted);
    max-width: 46ch;
}

.ins-empty[b-u5tipv10rb] {
    border-style: dashed;
}

.ins-empty-icon[b-u5tipv10rb] {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--lp-radius);
    border: 1px solid var(--lp-border-strong);
    color: var(--lp-accent-2);
    font-size: var(--lp-text-xl);
}

@media (max-width: 640px) {
    .insights-page[b-u5tipv10rb] {
        padding: 20px 14px 48px;
    }

    .ins-compare div[b-u5tipv10rb] {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .ins-card[b-u5tipv10rb] {
        transition: border-color var(--lp-motion-fast) ease;
    }

    .ins-card:hover[b-u5tipv10rb] {
        border-color: var(--lp-border-strong);
    }
}

@media (forced-colors: active) {
    .ins-card[b-u5tipv10rb],
    .ins-state[b-u5tipv10rb],
    .ins-period[b-u5tipv10rb],
    .ins-tag[b-u5tipv10rb],
    .ins-act[b-u5tipv10rb] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }

    .ins-period-btn[aria-pressed="true"][b-u5tipv10rb] {
        outline: 2px solid CanvasText;
    }

    .ins-line[b-u5tipv10rb] {
        stroke: CanvasText;
    }

    .ins-bar[b-u5tipv10rb],
    .ins-bar-m[b-u5tipv10rb],
    .ins-meter-m[b-u5tipv10rb],
    .ins-meter-a[b-u5tipv10rb] {
        fill: CanvasText;
        background: CanvasText;
    }
}
/* /Pages/Retention/Onboarding.razor.rz.scp.css */
/* Onboarding — wizard 3 step (design doc §5). Superfici solide, una cosa per
   schermata, gerarchia: kicker → titolo → azione. */

.ob-page[b-8mq2oljzn7] {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 20px 64px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Header di passo */
.ob-header[b-8mq2oljzn7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ob-kicker[b-8mq2oljzn7] {
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lp-accent-warm);
}

.ob-title[b-8mq2oljzn7] {
    margin: 0;
    font-size: var(--lp-text-2xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lp-text);
}

.ob-subtitle[b-8mq2oljzn7] {
    margin: 0;
    font-size: var(--lp-text-base);
    line-height: 1.6;
    color: var(--lp-muted);
    max-width: 56ch;
}

/* Stati */
.ob-state[b-8mq2oljzn7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px 24px;
    text-align: center;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
}

.ob-state > i[b-8mq2oljzn7] {
    font-size: var(--lp-text-2xl);
    color: var(--lp-accent-warm);
}

.ob-state p[b-8mq2oljzn7] {
    margin: 0;
    font-size: var(--lp-text-base);
    line-height: 1.55;
    color: var(--lp-muted);
    max-width: 46ch;
}

.ob-state-title[b-8mq2oljzn7] {
    margin: 0;
    font-size: var(--lp-text-xl);
    font-weight: 800;
    color: var(--lp-text);
}

.ob-empty-icon[b-8mq2oljzn7] {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--lp-radius);
    background: color-mix(in srgb, var(--lp-accent-warm) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--lp-accent-warm) 30%, transparent);
    color: var(--lp-accent-warm);
    font-size: var(--lp-text-xl);
}

/* Picker skill */
.ob-group[b-8mq2oljzn7] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ob-group-title[b-8mq2oljzn7] {
    margin: 0;
    font-size: var(--lp-text-lg);
    font-weight: 800;
    color: var(--lp-text);
}

.ob-picker[b-8mq2oljzn7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.ob-skill[b-8mq2oljzn7] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--lp-radius-sm);
    border: 1px solid var(--lp-border);
    background: var(--lp-surface);
    font-size: var(--lp-text-base);
    font-weight: 600;
    color: var(--lp-text);
    cursor: pointer;
    transition: border-color var(--lp-motion-fast) ease, background var(--lp-motion-fast) ease;
}

.ob-skill:hover[b-8mq2oljzn7] {
    background: var(--lp-border);
}

.ob-skill:has(input:focus-visible)[b-8mq2oljzn7] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
}

.ob-skill input[b-8mq2oljzn7] {
    accent-color: var(--lp-accent-warm);
}

.ob-skill-selected[b-8mq2oljzn7] {
    border-color: var(--lp-accent-warm);
    background: color-mix(in srgb, var(--lp-accent-warm) 12%, transparent);
}

.ob-skill-disabled[b-8mq2oljzn7] {
    opacity: 0.5;
    cursor: default;
}

.ob-actions[b-8mq2oljzn7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ob-counter[b-8mq2oljzn7] {
    font-size: var(--lp-text-sm);
    font-weight: 700;
    color: var(--lp-muted);
}

.ob-skip[b-8mq2oljzn7] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 24px; /* pavimento touch target di prodotto */
    padding: 2px 0;
    border: none;
    background: none;
    font-size: var(--lp-text-xs);
    font-weight: 600;
    color: var(--lp-accent-2);
    cursor: pointer;
}

.ob-skip:hover[b-8mq2oljzn7] {
    text-decoration: underline;
}

.ob-skip:focus-visible[b-8mq2oljzn7] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
    border-radius: var(--lp-radius-pill);
}

/* Diagnostica */
.ob-progress[b-8mq2oljzn7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ob-progress-label[b-8mq2oljzn7] {
    font-size: var(--lp-text-xs);
    font-weight: 600;
    color: var(--lp-muted);
}

.ob-progress-bar[b-8mq2oljzn7] {
    height: 6px;
    border-radius: var(--lp-radius-pill);
    background: var(--lp-border);
    overflow: hidden;
}

.ob-progress-fill[b-8mq2oljzn7] {
    height: 100%;
    border-radius: var(--lp-radius-pill);
    background: var(--lp-accent-warm);
    transition: width var(--lg-base) var(--lg-ease);
}

/* Navigazione di passo (Indietro) */
.ob-stepnav[b-8mq2oljzn7] {
    display: flex;
    justify-content: flex-start;
}

.ob-inline-error[b-8mq2oljzn7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--lp-radius-sm);
    border: 1px solid color-mix(in srgb, var(--lp-accent-warm) 35%, transparent);
    background: color-mix(in srgb, var(--lp-accent-danger) 12%, transparent);
    font-size: var(--lp-text-sm);
    line-height: 1.5;
    color: var(--lp-text);
}

.ob-inline-error > i[b-8mq2oljzn7] {
    color: var(--lp-accent-warm);
}

.ob-recorded[b-8mq2oljzn7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--lp-text-base);
    font-weight: 600;
    color: var(--lp-accent-success);
}

.ob-next[b-8mq2oljzn7] {
    display: flex;
    justify-content: flex-end;
}

/* Baseline */
.ob-band[b-8mq2oljzn7] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ob-band-title[b-8mq2oljzn7] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--lp-text-lg);
    font-weight: 800;
    color: var(--lp-text);
}

.ob-band-dot[b-8mq2oljzn7] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ob-band-dot-solid[b-8mq2oljzn7] { background: var(--lp-accent-success); }
.ob-band-dot-growing[b-8mq2oljzn7] { background: var(--lp-accent-2); }
.ob-band-dot-weak[b-8mq2oljzn7] { background: var(--lp-accent-warm); }
.ob-band-dot-unknown[b-8mq2oljzn7] { background: var(--lp-faint); }

.ob-band-list[b-8mq2oljzn7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ob-band-row[b-8mq2oljzn7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
}

.ob-band-name[b-8mq2oljzn7] {
    font-size: var(--lp-text-base);
    font-weight: 700;
    color: var(--lp-text);
}

.ob-band-unknown[b-8mq2oljzn7] {
    font-size: var(--lp-text-xs);
    font-weight: 600;
    color: var(--lp-muted);
}

.ob-honest-note[b-8mq2oljzn7] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--lp-radius-sm);
    border: 1px solid color-mix(in srgb, var(--lp-accent-2) 25%, transparent);
    background: color-mix(in srgb, var(--lp-accent-2) 8%, transparent);
    font-size: var(--lp-text-sm);
    line-height: 1.55;
    color: var(--lp-text);
}

.ob-honest-note i[b-8mq2oljzn7] {
    margin-top: 2px;
    color: var(--lp-accent-2);
}

.ob-final[b-8mq2oljzn7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 24px;
    border: 1px solid color-mix(in srgb, var(--lp-accent-warm) 30%, transparent);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
}

.ob-final-copy[b-8mq2oljzn7] {
    margin: 0;
    font-size: var(--lp-text-lg);
    line-height: 1.6;
    color: var(--lp-text);
    max-width: 52ch;
}

@media (max-width: 640px) {
    .ob-page[b-8mq2oljzn7] {
        padding: 20px 14px 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ob-skill[b-8mq2oljzn7] {
        transition: none;
    }

    .ob-progress-fill[b-8mq2oljzn7] {
        transition: none;
    }
}

@media (forced-colors: active) {
    .ob-state[b-8mq2oljzn7],
    .ob-skill[b-8mq2oljzn7],
    .ob-band-row[b-8mq2oljzn7],
    .ob-final[b-8mq2oljzn7],
    .ob-inline-error[b-8mq2oljzn7],
    .ob-honest-note[b-8mq2oljzn7],
    .ob-empty-icon[b-8mq2oljzn7] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}
/* /Pages/Retention/Passport.razor.rz.scp.css */
/* Passport (proprietario) — token --lp-*; il colore appare solo come stato. */

.passport-page[b-9q5dzauw9k] {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--lp-space-6) var(--lp-space-4) var(--lp-space-9);
    display: grid;
    gap: var(--lp-space-5);
}

.pp-header[b-9q5dzauw9k] {
    display: grid;
    gap: 6px;
}

.pp-kicker[b-9q5dzauw9k],
.pp-label[b-9q5dzauw9k] {
    font-family: var(--lp-font-mono);
    font-size: var(--lp-text-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pp-kicker[b-9q5dzauw9k] {
    color: var(--lp-accent-warm);
}

.pp-label[b-9q5dzauw9k] {
    color: var(--lp-faint);
}

.pp-title[b-9q5dzauw9k] {
    margin: 0;
    font-family: var(--lp-font-display);
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 800;
    line-height: var(--lp-leading-tight);
    letter-spacing: -0.02em;
    color: var(--lp-text);
}

.pp-subtitle[b-9q5dzauw9k],
.pp-help[b-9q5dzauw9k],
.pp-empty[b-9q5dzauw9k] {
    margin: 0;
    color: var(--lp-muted);
    max-width: 68ch;
}

.pp-help[b-9q5dzauw9k],
.pp-empty[b-9q5dzauw9k] {
    font-size: var(--lp-text-sm);
}

.pp-card[b-9q5dzauw9k] {
    display: grid;
    gap: 10px;
    padding: 18px 20px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
}

.pp-card-title[b-9q5dzauw9k] {
    margin: 0;
    font-family: var(--lp-font-display);
    font-size: var(--lp-text-lg);
    font-weight: 700;
    line-height: 1.35;
    color: var(--lp-text);
}

.pp-link-row[b-9q5dzauw9k] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: var(--lp-text-sm);
    color: var(--lp-muted);
}

.pp-link[b-9q5dzauw9k] {
    font-family: var(--lp-font-mono);
    font-size: var(--lp-text-sm);
    padding: 6px 10px;
    border-radius: var(--lp-radius-sm);
    border: 1px solid var(--lp-border);
    background: var(--lp-surface-strong);
    color: var(--lp-text);
    word-break: break-all;
    user-select: all;
}

.pp-link-note[b-9q5dzauw9k] {
    color: var(--lp-faint);
}

.pp-actions[b-9q5dzauw9k] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pp-inline-error[b-9q5dzauw9k] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--lp-accent-danger);
    border-radius: var(--lp-radius-sm);
    color: var(--lp-text);
    font-size: var(--lp-text-sm);
}

.pp-inline-error > i[b-9q5dzauw9k] {
    color: var(--lp-accent-danger);
}

.pp-inline-dismiss[b-9q5dzauw9k] {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--lp-muted);
    cursor: pointer;
    font: inherit;
}

.pp-skills[b-9q5dzauw9k] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.pp-skill[b-9q5dzauw9k] {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
}

.pp-skill-blocked[b-9q5dzauw9k] {
    opacity: 0.8;
}

.pp-skill-toggle[b-9q5dzauw9k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.pp-skill-toggle input[b-9q5dzauw9k] {
    width: 18px;
    height: 18px;
    accent-color: var(--lp-accent);
}

.pp-skill-toggle input:focus-visible[b-9q5dzauw9k] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
}

.pp-skill-name[b-9q5dzauw9k] {
    font-weight: 700;
    color: var(--lp-text);
}

.pp-skill-area[b-9q5dzauw9k] {
    font-size: var(--lp-text-xs);
    color: var(--lp-faint);
}

.pp-skill-meta[b-9q5dzauw9k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.pp-skill-band[b-9q5dzauw9k] {
    font-size: var(--lp-text-xs);
    color: var(--lp-muted);
}

.pp-skill-reason[b-9q5dzauw9k] {
    margin: 0;
    font-size: var(--lp-text-xs);
    color: var(--lp-faint);
}

.pp-state[b-9q5dzauw9k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px 24px;
    text-align: center;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
}

.pp-state > i[b-9q5dzauw9k] {
    font-size: var(--lp-text-2xl);
    color: var(--lp-accent-warning);
}

.pp-state-title[b-9q5dzauw9k] {
    margin: 0;
    font-family: var(--lp-font-display);
    font-size: var(--lp-text-xl);
    font-weight: 800;
    color: var(--lp-text);
}

.pp-state p[b-9q5dzauw9k] {
    margin: 0;
    color: var(--lp-muted);
    max-width: 46ch;
}

@media (max-width: 640px) {
    .passport-page[b-9q5dzauw9k] {
        padding: 20px 14px 48px;
    }
}

@media (forced-colors: active) {
    .pp-card[b-9q5dzauw9k],
    .pp-skill[b-9q5dzauw9k],
    .pp-state[b-9q5dzauw9k],
    .pp-link[b-9q5dzauw9k],
    .pp-inline-error[b-9q5dzauw9k] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}
/* /Pages/Retention/Practice.razor.rz.scp.css */
/* Practice — lista skill con accesso alla sessione mirata. Superfici solide,
   stessa famiglia delle righe Skill Map. */

.practice-page[b-j1olxs98eb] {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 20px 64px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pr-header[b-j1olxs98eb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pr-kicker[b-j1olxs98eb] {
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lp-accent-warm);
}

.pr-title[b-j1olxs98eb] {
    margin: 0;
    font-size: var(--lp-text-2xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lp-text);
}

.pr-subtitle[b-j1olxs98eb] {
    margin: 0;
    font-size: var(--lp-text-base);
    line-height: 1.6;
    color: var(--lp-muted);
}

/* Stati */
.pr-state[b-j1olxs98eb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px 24px;
    text-align: center;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
}

.pr-state > i[b-j1olxs98eb] {
    font-size: var(--lp-text-2xl);
    color: var(--lp-accent-warm);
}

.pr-state-title[b-j1olxs98eb] {
    margin: 0;
    font-size: var(--lp-text-xl);
    font-weight: 800;
    color: var(--lp-text);
}

.pr-state p[b-j1olxs98eb] {
    margin: 0;
    font-size: var(--lp-text-base);
    line-height: 1.55;
    color: var(--lp-muted);
    max-width: 46ch;
}

.pr-empty-icon[b-j1olxs98eb] {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--lp-radius);
    background: color-mix(in srgb, var(--lp-accent-warm) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--lp-accent-warm) 30%, transparent);
    color: var(--lp-accent-warm);
    font-size: var(--lp-text-xl);
}

.pr-empty-actions[b-j1olxs98eb] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

/* Lista skill */
.pr-list[b-j1olxs98eb] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pr-row[b-j1olxs98eb] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
}

.pr-info[b-j1olxs98eb] {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pr-row-head[b-j1olxs98eb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pr-name[b-j1olxs98eb] {
    font-size: var(--lp-text-base);
    font-weight: 700;
    color: var(--lp-text);
}

.pr-cta[b-j1olxs98eb] {
    flex: none;
}

.pr-cta:focus-visible[b-j1olxs98eb] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .practice-page[b-j1olxs98eb] {
        padding: 20px 14px 48px;
    }

    .pr-row[b-j1olxs98eb] {
        flex-direction: column;
        align-items: stretch;
    }

    .pr-cta[b-j1olxs98eb] {
        align-self: flex-start;
    }
}

@media (forced-colors: active) {
    .pr-state[b-j1olxs98eb],
    .pr-row[b-j1olxs98eb],
    .pr-empty-icon[b-j1olxs98eb] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}
/* /Pages/Retention/PublicPassport.razor.rz.scp.css */
/* Pagina pubblica del Learning Passport — stessi token della vista. */

.public-passport-page[b-jcgmg72j27] {
    max-width: 820px;
    margin: 0 auto;
    padding: var(--lp-space-6) var(--lp-space-4) var(--lp-space-9);
    display: grid;
    gap: var(--lp-space-5);
}

.pub-state[b-jcgmg72j27] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px 24px;
    text-align: center;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
}

.pub-state > i[b-jcgmg72j27] {
    font-size: var(--lp-text-2xl);
    color: var(--lp-faint);
}

.pub-state-title[b-jcgmg72j27] {
    margin: 0;
    font-family: var(--lp-font-display);
    font-size: var(--lp-text-xl);
    font-weight: 800;
    color: var(--lp-text);
}

.pub-state p[b-jcgmg72j27],
.pub-foot[b-jcgmg72j27] {
    margin: 0;
    font-size: var(--lp-text-sm);
    color: var(--lp-muted);
    max-width: 60ch;
}

.pub-foot a[b-jcgmg72j27] {
    color: var(--lp-accent-text);
}

@media (forced-colors: active) {
    .pub-state[b-jcgmg72j27] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}
/* /Pages/Retention/SkillMap.razor.rz.scp.css */
/* Skill Map v1 — lista gerarchica per area (design doc §7). Superfici solide,
   gerarchia: nome skill → badge rischio → padronanza/ritenzione → spiegazione. */

.skillmap-page[b-3fq6i1rjm2] {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 20px 64px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sm-header[b-3fq6i1rjm2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sm-kicker[b-3fq6i1rjm2] {
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lp-accent-warm);
}

.sm-title[b-3fq6i1rjm2] {
    margin: 0;
    font-size: var(--lp-text-2xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lp-text);
}

.sm-subtitle[b-3fq6i1rjm2] {
    margin: 0;
    font-size: var(--lp-text-base);
    line-height: 1.6;
    color: var(--lp-muted);
    max-width: 62ch;
}

/* Stati */
.sm-state[b-3fq6i1rjm2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px 24px;
    text-align: center;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
}

.sm-state > i[b-3fq6i1rjm2] {
    font-size: var(--lp-text-2xl);
    color: var(--lp-accent-warm);
}

.sm-state-title[b-3fq6i1rjm2] {
    margin: 0;
    font-size: var(--lp-text-xl);
    font-weight: 800;
    color: var(--lp-text);
}

.sm-state p[b-3fq6i1rjm2] {
    margin: 0;
    font-size: var(--lp-text-base);
    color: var(--lp-muted);
    max-width: 48ch;
}

.sm-empty-icon[b-3fq6i1rjm2] {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--lp-radius);
    background: color-mix(in srgb, var(--lp-accent-warm) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--lp-accent-warm) 30%, transparent);
    color: var(--lp-accent-warm);
    font-size: var(--lp-text-xl);
}

.sm-empty-actions[b-3fq6i1rjm2] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.sm-empty-actions a:focus-visible[b-3fq6i1rjm2] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
}

/* Gruppi gerarchici */
.sm-group[b-3fq6i1rjm2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sm-group-title[b-3fq6i1rjm2] {
    margin: 0;
    font-size: var(--lp-text-lg);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--lp-text);
}

.sm-list[b-3fq6i1rjm2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sm-row[b-3fq6i1rjm2] {
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
    padding: 20px 22px;
}

.sm-row-main[b-3fq6i1rjm2] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sm-row-head[b-3fq6i1rjm2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sm-skill-name[b-3fq6i1rjm2] {
    font-size: var(--lp-text-lg);
    font-weight: 700;
    color: var(--lp-text);
}

.sm-scores[b-3fq6i1rjm2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.sm-row-foot[b-3fq6i1rjm2] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.sm-last-verified[b-3fq6i1rjm2] {
    font-size: var(--lp-text-xs);
    color: var(--lp-muted);
}

.sm-last-verified i[b-3fq6i1rjm2] {
    margin-right: 6px;
    color: var(--lp-faint);
}

.sm-why-btn[b-3fq6i1rjm2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    border: none;
    background: none;
    font-size: var(--lp-text-xs);
    font-weight: 600;
    color: var(--lp-accent-2);
    cursor: pointer;
    min-height: 24px; /* pavimento touch target di prodotto */
}

.sm-why-btn:hover[b-3fq6i1rjm2] {
    text-decoration: underline;
}

.sm-why-btn:focus-visible[b-3fq6i1rjm2] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
    border-radius: var(--lp-radius-pill);
}

.sm-review-link[b-3fq6i1rjm2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: var(--lp-text-xs);
    font-weight: 700;
    color: var(--lp-accent-warm);
    text-decoration: none;
    min-height: 24px; /* pavimento touch target di prodotto */
}

.sm-review-link:hover[b-3fq6i1rjm2] {
    text-decoration: underline;
}

.sm-review-link:focus-visible[b-3fq6i1rjm2] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
    border-radius: var(--lp-radius-pill);
}

/* Perché vedo questo? */
.sm-why[b-3fq6i1rjm2] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--lp-radius-sm);
    border: 1px solid color-mix(in srgb, var(--lp-accent-2) 25%, transparent);
    background: color-mix(in srgb, var(--lp-accent-2) 8%, transparent);
}

.sm-why-text[b-3fq6i1rjm2] {
    margin: 0;
    font-size: var(--lp-text-sm);
    line-height: 1.55;
    color: var(--lp-text);
}

.sm-why-grid[b-3fq6i1rjm2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 0;
}

.sm-why-grid dt[b-3fq6i1rjm2] {
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--lp-muted);
}

.sm-why-grid dd[b-3fq6i1rjm2] {
    margin: 2px 0 0;
    font-size: var(--lp-text-base);
    font-weight: 700;
    color: var(--lp-text);
}

@media (max-width: 640px) {
    .skillmap-page[b-3fq6i1rjm2] {
        padding: 20px 14px 48px;
    }

    .sm-review-link[b-3fq6i1rjm2] {
        margin-left: 0;
    }
}

@media (forced-colors: active) {
    .sm-state[b-3fq6i1rjm2],
    .sm-row[b-3fq6i1rjm2],
    .sm-why[b-3fq6i1rjm2],
    .sm-empty-icon[b-3fq6i1rjm2] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}

/* ===== Skill Map v2 (var(--lp-on-cyan)): toggle Lista/Grafo, grafo + pannello dettaglio ===== */
.sm-viewbar[b-3fq6i1rjm2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.sm-toggle[b-3fq6i1rjm2] {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-pill);
    background: var(--lp-surface);
}

.sm-toggle-btn[b-3fq6i1rjm2] {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--lp-muted);
    padding: 8px 14px;
    border-radius: var(--lp-radius-pill);
    font: inherit;
    font-size: var(--lp-text-sm);
    cursor: pointer;
}

.sm-toggle-btn[aria-pressed="true"][b-3fq6i1rjm2] {
    background: var(--lp-accent);
    color: var(--lp-on-accent);
}

.sm-toggle-btn:disabled[b-3fq6i1rjm2] {
    opacity: 0.5;
    cursor: default;
}

.sm-toggle-btn:focus-visible[b-3fq6i1rjm2] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 2px;
}

.sm-view-note[b-3fq6i1rjm2] {
    font-size: var(--lp-text-xs);
    color: var(--lp-faint);
}

.sm-graph-layout[b-3fq6i1rjm2] {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
}

.sm-graph-panel[b-3fq6i1rjm2] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.sm-graph-hint[b-3fq6i1rjm2] {
    margin: 0;
    font-size: var(--lp-text-xs);
    color: var(--lp-faint);
}

.sm-detail[b-3fq6i1rjm2] {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 18px 20px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
}

.sm-detail-kicker[b-3fq6i1rjm2] {
    font-family: var(--lp-font-mono);
    font-size: var(--lp-text-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lp-faint);
}

.sm-detail-title[b-3fq6i1rjm2] {
    margin: 0;
    font-family: var(--lp-font-display);
    font-size: var(--lp-text-xl);
    font-weight: 700;
    line-height: 1.3;
    color: var(--lp-text);
}

.sm-detail-why[b-3fq6i1rjm2] {
    margin-top: 0;
}

.sm-detail-cta[b-3fq6i1rjm2] {
    width: 100%;
    justify-content: center;
}

.sm-detail-empty[b-3fq6i1rjm2] {
    margin: 0;
    font-size: var(--lp-text-sm);
    color: var(--lp-muted);
}

@media (max-width: 820px) {
    .sm-graph-layout[b-3fq6i1rjm2] {
        grid-template-columns: 1fr;
    }
}

@media (forced-colors: active) {
    .sm-toggle[b-3fq6i1rjm2],
    .sm-detail[b-3fq6i1rjm2] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }

    .sm-toggle-btn[aria-pressed="true"][b-3fq6i1rjm2] {
        outline: 2px solid CanvasText;
    }
}
/* /Pages/Retention/Today.razor.rz.scp.css */
/* Today — Daily Retention Session. Superfici solide, una colonna, spazio
   generoso: il prompt e' il protagonista (design doc §6). */

.today-page[b-pzwc8fxeyk] {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 20px 64px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Stati (loading / errore / vuoto) */
.today-state[b-pzwc8fxeyk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 64px 24px;
    text-align: center;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
}

.today-state > i[b-pzwc8fxeyk] {
    font-size: var(--lp-text-2xl);
    color: var(--lp-accent-warm);
}

.today-empty > i[b-pzwc8fxeyk] {
    color: var(--lp-accent-success);
}

.today-state-title[b-pzwc8fxeyk] {
    margin: 0;
    font-size: var(--lp-text-xl);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--lp-text);
}

.today-state p[b-pzwc8fxeyk] {
    margin: 0;
    font-size: var(--lp-text-base);
    line-height: 1.55;
    color: var(--lp-muted);
    max-width: 46ch;
}

.today-state-actions[b-pzwc8fxeyk] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}

/* Intro */
.today-intro[b-pzwc8fxeyk] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 32px;
    border: 1px solid color-mix(in srgb, var(--lp-accent-warm) 30%, transparent);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
}

.today-kicker[b-pzwc8fxeyk] {
    font-size: var(--lp-text-xs);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lp-accent-warm);
}

.today-title[b-pzwc8fxeyk] {
    margin: 0;
    font-size: var(--lp-text-2xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lp-text);
}

.today-subtitle[b-pzwc8fxeyk] {
    margin: 0;
    font-size: var(--lp-text-base);
    line-height: 1.6;
    color: var(--lp-muted);
    max-width: 56ch;
}

.today-skill-chips[b-pzwc8fxeyk] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.today-skill-chips li[b-pzwc8fxeyk] {
    padding: 5px 12px;
    border-radius: var(--lg-r-pill);
    font-size: var(--lp-text-xs);
    font-weight: 600;
    color: var(--lp-text);
    background: var(--lp-border);
    border: 1px solid var(--lp-border);
}

.today-start[b-pzwc8fxeyk] {
    margin-top: 6px;
}

/* Avviso sessione aperta: la nuova sessione chiude quella abbandonata. */
.today-notice[b-pzwc8fxeyk] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--lp-radius-sm);
    border: 1px solid color-mix(in srgb, var(--lp-accent-warm) 30%, transparent);
    background: color-mix(in srgb, var(--lp-accent-warning) 10%, transparent);
    font-size: var(--lp-text-sm);
    line-height: 1.5;
    color: var(--lp-text);
}

.today-notice i[b-pzwc8fxeyk] {
    margin-top: 2px;
    color: var(--lp-accent-warning);
}

/* Errore inline in sessione (tentativo/hint/completamento falliti): non
   distrugge la vista, l'azione resta riprovabile. */
.today-inline-error[b-pzwc8fxeyk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--lp-radius-sm);
    border: 1px solid color-mix(in srgb, var(--lp-accent-warm) 35%, transparent);
    background: color-mix(in srgb, var(--lp-accent-danger) 12%, transparent);
    font-size: var(--lp-text-sm);
    line-height: 1.5;
    color: var(--lp-text);
}

.today-inline-error > i[b-pzwc8fxeyk] {
    color: var(--lp-accent-warm);
}

.today-inline-error-text[b-pzwc8fxeyk] {
    flex: 1;
}

.today-inline-error-dismiss[b-pzwc8fxeyk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding: 2px;
    border: none;
    background: none;
    color: var(--lp-muted);
    cursor: pointer;
    border-radius: var(--lp-radius-sm);
}

.today-inline-error-dismiss:hover[b-pzwc8fxeyk] {
    color: var(--lp-text);
}

.today-inline-error-dismiss:focus-visible[b-pzwc8fxeyk] {
    outline: 2px solid var(--lp-accent-2);
    outline-offset: 1px;
}

/* Avanzamento sessione */
.today-session-head[b-pzwc8fxeyk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.today-progress-label[b-pzwc8fxeyk] {
    font-size: var(--lp-text-xs);
    font-weight: 600;
    color: var(--lp-muted);
}

.today-progress-bar[b-pzwc8fxeyk] {
    height: 6px;
    border-radius: var(--lp-radius-pill);
    background: var(--lp-border);
    overflow: hidden;
}

.today-progress-fill[b-pzwc8fxeyk] {
    height: 100%;
    border-radius: var(--lp-radius-pill);
    background: linear-gradient(90deg, var(--lp-accent-warm), var(--lp-accent-warm));
    transition: width var(--lg-base) var(--lg-ease);
}

.today-answer[b-pzwc8fxeyk],
.today-next[b-pzwc8fxeyk] {
    display: flex;
    justify-content: flex-end;
}

/* Riepilogo */
.today-summary[b-pzwc8fxeyk] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
}

.today-summary-block h2[b-pzwc8fxeyk] {
    margin: 0 0 10px;
    font-size: var(--lp-text-lg);
    font-weight: 700;
    color: var(--lp-text);
}

.today-mastery-list[b-pzwc8fxeyk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.today-mastery-list li[b-pzwc8fxeyk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    border-radius: var(--lp-radius-sm);
    background: var(--lp-border);
    border: 1px solid var(--lp-border);
}

.today-mastery-name[b-pzwc8fxeyk] {
    font-size: var(--lp-text-base);
    font-weight: 600;
    color: var(--lp-text);
}

.today-mastery-delta[b-pzwc8fxeyk] {
    font-size: var(--lp-text-sm);
    color: var(--lp-muted);
    white-space: nowrap;
}

.today-mastery-delta strong[b-pzwc8fxeyk] {
    color: var(--lp-accent-warm);
}

.today-mastery-delta i[b-pzwc8fxeyk] {
    margin: 0 6px;
    font-size: var(--lp-text-xs);
    color: var(--lp-muted);
}

/* Spinner locale (bottone) */
.today-spinner[b-pzwc8fxeyk] {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 6px;
    vertical-align: -2px;
    border: 2px solid var(--lp-faint);
    border-top-color: var(--lp-on-accent);
    border-radius: 50%;
    animation: today-spin-b-pzwc8fxeyk 0.8s linear infinite;
}

@keyframes today-spin-b-pzwc8fxeyk {
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .today-page[b-pzwc8fxeyk] {
        padding: 20px 14px 48px;
    }

    .today-intro[b-pzwc8fxeyk],
    .today-summary[b-pzwc8fxeyk] {
        padding: 24px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .today-progress-fill[b-pzwc8fxeyk] {
        transition: none;
    }

    .today-spinner[b-pzwc8fxeyk] {
        animation: none;
    }
}

@media (forced-colors: active) {
    .today-state[b-pzwc8fxeyk],
    .today-intro[b-pzwc8fxeyk],
    .today-summary[b-pzwc8fxeyk],
    .today-skill-chips li[b-pzwc8fxeyk],
    .today-mastery-list li[b-pzwc8fxeyk] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}