/* =============================================================================
   MSI FRONTEND — Roadmap studente (shortcode [ippocrate_roadmap])
   -----------------------------------------------------------------------------
   Sostituisce integralmente il CSS inline generato da
   MSI_Roadmap::get_inline_css(). I nomi delle classi `icr-*` sono identici a
   quelli emessi dal PHP: NON rinominarli, il layout dipende da questa
   corrispondenza.

   Principi
   --------
   - Mobile-first: le regole base valgono per il telefono, i breakpoint
     min-width aggiungono respiro su tablet e desktop.
   - Tutto è scopato sotto la radice `:is(#icr-w, .icr-roadmap)`. `#icr-w` è
     l'id emesso oggi dallo shortcode, `.icr-roadmap` è l'alias a prova di
     futuro. `:is()` assume la specificità più alta fra i due (quella dell'id),
     quindi le regole vincono sul tema senza bisogno di !important.
   - Ogni valore cromatico passa da un token definito sulla radice: gli stessi
     nomi del design system admin, così i due file restano coerenti.
   - Le custom property scritte inline dal PHP sono preservate:
       --a    accento globale della roadmap
       --pcr  terna RGB dell'accento (per rgba())
       --pc   colore della singola fase
       --pct  angolo del conic-gradient di avanzamento modulo
       --bc   colore del badge/traguardo corrente
   ============================================================================= */


/* =============================================================================
   1. TOKEN — definiti sulla radice, non su :root, per non inquinare il tema
   ============================================================================= */

:is(#icr-w, .icr-roadmap) {

    /* ── Accento e derivati ────────────────────────────────────────────────── */
    --icr-primary: var(--a, #0071e3);
    --icr-primary-dark: #005bb5;
    --icr-primary-light: #4aa3f0;
    --icr-white: #ffffff;
    --icr-black: #000000;
    --icr-primary-soft: color-mix(in srgb, var(--icr-primary) 10%, transparent);
    --icr-primary-tint: color-mix(in srgb, var(--icr-primary) 22%, transparent);
    --icr-on-primary: var(--icr-white);
    /* L'accento (--a) e il colore di fase (--pc) arrivano dal PHP e non cambiano
       con il tema: per il TESTO servono varianti schiarite in dark mode, così il
       contrasto resta conforme WCAG AA anche su fondo scuro. */
    --icr-primary-text: var(--icr-primary);
    --icr-phase-text: var(--pc, var(--icr-primary));

    /* ── Colori semantici ──────────────────────────────────────────────────── */
    --icr-success: #34c759;
    --icr-success-ink: #1c7a35;
    --icr-danger: #ff3b30;
    --icr-danger-ink: #c01a12;
    --icr-gold: #d4a017;
    --icr-gold-ink: #8a6710;
    --icr-teal: #14b8a6;
    --icr-teal-dark: #0d9488;
    --icr-info: #2196f3;

    /* ── Palette naturale (accenti olistici) ───────────────────────────────── */
    --icr-sage: #7f9c78;
    --icr-earth: #9c7a5c;

    /* ── Superfici, bordi, testo ───────────────────────────────────────────── */
    --icr-bg: transparent;
    --icr-surface: #ffffff;
    --icr-surface-2: #f5f5f7;
    --icr-surface-3: #f0f0f3;
    --icr-surface-raised: #fafbff;
    --icr-border: #e8e8ed;
    --icr-border-strong: #d2d2d7;

    --icr-text: #1d1d1f;
    --icr-text-2: #424245;
    --icr-text-muted: #6e6e73;
    --icr-text-subtle: #86868b;
    --icr-text-faint: #c7c7cc;
    --icr-text-invert: #ffffff;

    /* Superfici scure (legenda traguardi, toast) */
    --icr-dark: #1d1d1f;
    --icr-dark-2: #2c2c2e;
    --icr-dark-border: #3a3a3c;
    --icr-dark-text: #f5f5f7;
    --icr-dark-text-muted: #a1a1a6;
    --icr-dark-text-faint: #8e8e93;

    /* ── Spaziature, raggi ─────────────────────────────────────────────────── */
    --icr-space-1: 4px;
    --icr-space-2: 8px;
    --icr-space-3: 12px;
    --icr-space-4: 16px;
    --icr-space-5: 24px;
    --icr-space-6: 32px;
    --icr-space-7: 48px;

    --icr-radius-sm: 8px;
    --icr-radius-md: 12px;
    --icr-radius-lg: 16px;
    --icr-radius-xl: 22px;
    --icr-radius-full: 999px;

    /* ── Ombre ─────────────────────────────────────────────────────────────── */
    --icr-shadow-color: var(--icr-black);
    --icr-shadow-sm: 0 1px 3px color-mix(in srgb, var(--icr-shadow-color) 5%, transparent);
    --icr-shadow: 0 4px 20px color-mix(in srgb, var(--icr-shadow-color) 5%, transparent),
                  0 1px 3px color-mix(in srgb, var(--icr-shadow-color) 4%, transparent);
    --icr-shadow-hover: 0 14px 38px color-mix(in srgb, var(--icr-shadow-color) 10%, transparent),
                        0 2px 8px color-mix(in srgb, var(--icr-shadow-color) 5%, transparent);
    --icr-shadow-lg: 0 14px 40px color-mix(in srgb, var(--icr-shadow-color) 18%, transparent);

    /* ── Tipografia ────────────────────────────────────────────────────────── */
    --icr-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* ── Movimento ─────────────────────────────────────────────────────────── */
    --icr-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --icr-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --icr-fast: 150ms;
    --icr-base: 200ms;
    --icr-slow: 250ms;

    /* ── Focus ─────────────────────────────────────────────────────────────── */
    --icr-focus-ring: var(--icr-primary);
    --icr-focus-halo: color-mix(in srgb, var(--icr-primary) 22%, transparent);
}


/* =============================================================================
   2. DARK MODE — automatica e forzabile ([data-msi-theme="dark"])
   Cambiano solo i token: nessuna regola di componente è duplicata.
   ============================================================================= */

@media (prefers-color-scheme: dark) {
    :is(#icr-w, .icr-roadmap):not([data-msi-theme="light"]) {
        --icr-primary-light: #85befd;
        /* Il fondo dei pulsanti primari resta l'accento scelto dall'admin:
           il testo sopra deve quindi restare bianco anche in dark mode. */
        --icr-on-primary: var(--icr-white);
        --icr-primary-text: color-mix(in srgb, var(--icr-primary) 45%, var(--icr-white));
        --icr-phase-text: color-mix(in srgb, var(--pc, var(--icr-primary)) 45%, var(--icr-white));

        --icr-success: #6fdd9b;
        --icr-success-ink: #a7eec1;
        --icr-danger: #ff8d85;
        --icr-danger-ink: #ffbdb8;
        --icr-gold: #eec95c;
        --icr-gold-ink: #f6dd90;
        --icr-teal: #5eead4;
        --icr-teal-dark: #2dd4bf;

        --icr-sage: #a3bd9c;
        --icr-earth: #c19a78;

        --icr-surface: #181b1f;
        --icr-surface-2: #202429;
        --icr-surface-3: #2a2f35;
        --icr-surface-raised: #1e2228;
        --icr-border: #2e343b;
        --icr-border-strong: #3d444d;

        --icr-text: #f2f4f7;
        --icr-text-2: #d7dbe1;
        --icr-text-muted: #a9b1bc;
        --icr-text-subtle: #8b929c;
        --icr-text-faint: #6b727c;

        --icr-dark: #0f1114;
        --icr-dark-2: #171a1e;
        --icr-dark-border: #2e343b;

        --icr-shadow-sm: 0 1px 3px color-mix(in srgb, var(--icr-shadow-color) 45%, transparent);
        --icr-shadow: 0 4px 20px color-mix(in srgb, var(--icr-shadow-color) 45%, transparent);
        --icr-shadow-hover: 0 14px 38px color-mix(in srgb, var(--icr-shadow-color) 55%, transparent);
        --icr-shadow-lg: 0 14px 40px color-mix(in srgb, var(--icr-shadow-color) 60%, transparent);
    }
}

:is(#icr-w, .icr-roadmap)[data-msi-theme="dark"] {
    --icr-primary-light: #85befd;
    --icr-on-primary: var(--icr-white);
    --icr-primary-text: color-mix(in srgb, var(--icr-primary) 45%, var(--icr-white));
    --icr-phase-text: color-mix(in srgb, var(--pc, var(--icr-primary)) 45%, var(--icr-white));

    --icr-success: #6fdd9b;
    --icr-success-ink: #a7eec1;
    --icr-danger: #ff8d85;
    --icr-danger-ink: #ffbdb8;
    --icr-gold: #eec95c;
    --icr-gold-ink: #f6dd90;
    --icr-teal: #5eead4;
    --icr-teal-dark: #2dd4bf;

    --icr-sage: #a3bd9c;
    --icr-earth: #c19a78;

    --icr-surface: #181b1f;
    --icr-surface-2: #202429;
    --icr-surface-3: #2a2f35;
    --icr-surface-raised: #1e2228;
    --icr-border: #2e343b;
    --icr-border-strong: #3d444d;

    --icr-text: #f2f4f7;
    --icr-text-2: #d7dbe1;
    --icr-text-muted: #a9b1bc;
    --icr-text-subtle: #8b929c;
    --icr-text-faint: #6b727c;

    --icr-dark: #0f1114;
    --icr-dark-2: #171a1e;
    --icr-dark-border: #2e343b;

    --icr-shadow-sm: 0 1px 3px color-mix(in srgb, var(--icr-shadow-color) 45%, transparent);
    --icr-shadow: 0 4px 20px color-mix(in srgb, var(--icr-shadow-color) 45%, transparent);
    --icr-shadow-hover: 0 14px 38px color-mix(in srgb, var(--icr-shadow-color) 55%, transparent);
    --icr-shadow-lg: 0 14px 40px color-mix(in srgb, var(--icr-shadow-color) 60%, transparent);
}


/* =============================================================================
   3. RADICE E RESET DIFENSIVO
   Il tema (Neve e simili) applica sfondi, bordi e margini agli elementi del
   contenuto: qui li neutralizziamo, ma solo dentro la roadmap.
   ============================================================================= */

:is(#icr-w, .icr-roadmap),
:is(#icr-w, .icr-roadmap) *,
:is(#icr-w, .icr-roadmap) *::before,
:is(#icr-w, .icr-roadmap) *::after {
    box-sizing: border-box;
}

:is(#icr-w, .icr-roadmap) {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    padding: var(--icr-space-5) var(--icr-space-3) var(--icr-space-6);
    background: var(--icr-bg);
    border: none;
    box-shadow: none;
    overflow-x: hidden;
    font-family: var(--icr-font);
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--icr-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Titoli: il tema di solito impone margini, bordi e maiuscoletto */
:is(#icr-w, .icr-roadmap) h2,
:is(#icr-w, .icr-roadmap) h3,
:is(#icr-w, .icr-roadmap) h4 {
    font-family: inherit;
    padding: 0;
    border: none;
    background: none;
    text-transform: none;
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) p {
    padding: 0;
    color: inherit;
}

:is(#icr-w, .icr-roadmap) ul,
:is(#icr-w, .icr-roadmap) li {
    list-style: none;
    margin: 0;
    padding: 0;
}

:is(#icr-w, .icr-roadmap) a {
    box-shadow: none;
    text-decoration: none;
}

:is(#icr-w, .icr-roadmap) button {
    font-family: inherit;
}

/* Focus accessibile e uniforme su tutta la roadmap */
:is(#icr-w, .icr-roadmap) :focus-visible {
    outline: 2px solid var(--icr-focus-ring);
    outline-offset: 2px;
    border-radius: var(--icr-radius-sm);
}


/* =============================================================================
   4. REVEAL ON SCROLL
   Due schemi supportati:
     a) legacy — la radice riceve .icr-anim-on, gli elementi .icr-inview
     b) nuovo  — gli elementi nascono con .icr-reveal e ricevono .is-visible
   Senza JavaScript il contenuto resta sempre visibile.
   ============================================================================= */

:is(#icr-w, .icr-roadmap).icr-anim-on .icr-ph,
:is(#icr-w, .icr-roadmap).icr-anim-on .icr-sa-card,
:is(#icr-w, .icr-roadmap).icr-anim-on .icr-op,
:is(#icr-w, .icr-roadmap).icr-anim-on .icr-welcome-banner,
:is(#icr-w, .icr-roadmap).icr-anim-on .icr-badge-legend,
:is(#icr-w, .icr-roadmap).icr-anim-on .icr-next-badges,
:is(#icr-w, .icr-roadmap).icr-anim-on .icr-achievements,
:is(#icr-w, .icr-roadmap) .icr-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms var(--icr-ease-out),
                transform 600ms var(--icr-ease-out);
    will-change: opacity, transform;
}

:is(#icr-w, .icr-roadmap).icr-anim-on .icr-inview,
:is(#icr-w, .icr-roadmap) .icr-reveal.is-visible,
:is(#icr-w, .icr-roadmap) .icr-reveal.icr-inview {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Ingresso a cascata delle fasi */
:is(#icr-w, .icr-roadmap) .icr-ph:nth-child(2) { transition-delay: 50ms; }
:is(#icr-w, .icr-roadmap) .icr-ph:nth-child(3) { transition-delay: 90ms; }
:is(#icr-w, .icr-roadmap) .icr-ph:nth-child(4) { transition-delay: 130ms; }
:is(#icr-w, .icr-roadmap) .icr-ph:nth-child(5) { transition-delay: 170ms; }
:is(#icr-w, .icr-roadmap) .icr-ph:nth-child(6) { transition-delay: 210ms; }


/* =============================================================================
   5. INTESTAZIONE DELLA ROADMAP (.icr-rh)
   ============================================================================= */

:is(#icr-w, .icr-roadmap) .icr-rh {
    text-align: center;
    margin-bottom: var(--icr-space-6);
}

:is(#icr-w, .icr-roadmap) .icr-rh h2 {
    font-size: clamp(24px, 6vw, 46px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--icr-text);
    margin: 0 0 var(--icr-space-2);
}

:is(#icr-w, .icr-roadmap) .icr-rh > p {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--icr-text-muted);
    margin: 0;
}


/* =============================================================================
   6. PROGRESSO GLOBALE (.icr-op)
   ============================================================================= */

:is(#icr-w, .icr-roadmap) .icr-op {
    max-width: 560px;
    margin: 0 auto var(--icr-space-5);
    padding: var(--icr-space-4) var(--icr-space-5);
    background: var(--icr-surface);
    border: 1px solid var(--icr-border);
    border-radius: var(--icr-radius-lg);
    box-shadow: var(--icr-shadow);
}

:is(#icr-w, .icr-roadmap) .icr-op-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--icr-space-2);
    margin-bottom: var(--icr-space-3);
    font-size: 14px;
    font-weight: 600;
    color: var(--icr-text-muted);
}

:is(#icr-w, .icr-roadmap) .icr-op-num {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--icr-text);
    font-variant-numeric: tabular-nums;
}

:is(#icr-w, .icr-roadmap) .icr-op-bar {
    position: relative;
    height: 9px;
    background: var(--icr-surface-3);
    border-radius: var(--icr-radius-full);
    overflow: hidden;
}

:is(#icr-w, .icr-roadmap) .icr-op-fill {
    position: relative;
    height: 100%;
    width: 0;
    border-radius: var(--icr-radius-full);
    background: linear-gradient(90deg, var(--icr-primary), var(--icr-primary-light));
    transition: width 1.2s var(--icr-ease-out);
}

:is(#icr-w, .icr-roadmap) .icr-op-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent,
                color-mix(in srgb, var(--icr-surface) 70%, transparent), transparent);
    animation: icr-shimmer 2.6s infinite;
}


/* =============================================================================
   7. BANNER DI BENVENUTO (.icr-welcome-banner)
   ============================================================================= */

:is(#icr-w, .icr-roadmap) .icr-welcome-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--icr-space-3);
    padding: var(--icr-space-4);
    margin-bottom: var(--icr-space-4);
    background: linear-gradient(135deg,
                color-mix(in srgb, var(--icr-primary) 10%, var(--icr-surface)),
                color-mix(in srgb, var(--icr-primary) 18%, var(--icr-surface)));
    border: 1px solid color-mix(in srgb, var(--icr-primary) 26%, transparent);
    border-radius: var(--icr-radius-lg);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--icr-primary) 8%, transparent);
}

:is(#icr-w, .icr-roadmap) .icr-welcome-text {
    display: flex;
    flex-direction: column;
    gap: var(--icr-space-1);
    min-width: 0;
}

:is(#icr-w, .icr-roadmap) .icr-welcome-greeting {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-welcome-msg {
    font-size: 15px;
    line-height: 1.5;
    color: var(--icr-text-2);
}

:is(#icr-w, .icr-roadmap) .icr-welcome-msg strong {
    font-weight: 800;
    color: var(--icr-primary-text);
}

:is(#icr-w, .icr-roadmap) .icr-welcome-icon {
    order: -1;
    line-height: 1;
    flex-shrink: 0;
    /* Contiene un anello di avanzamento SVG che eredita currentColor.
       L'emoji precedente non aveva posto in un percorso professionale. */
    color: var(--icr-primary);
    display: flex;
    align-items: center;
}

:is(#icr-w, .icr-roadmap) .icr-welcome-icon svg {
    width: 52px;
    height: 52px;
    display: block;
}

:is(#icr-w, .icr-roadmap) .icr-welcome-quote {
    margin-top: var(--icr-space-2);
    padding-top: var(--icr-space-2);
    border-top: 1px solid color-mix(in srgb, var(--icr-primary) 18%, transparent);
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
    color: var(--icr-text-muted);
}

:is(#icr-w, .icr-roadmap) .icr-welcome-quote em {
    font-style: normal;
    font-weight: 700;
    color: var(--icr-primary-text);
}


/* =============================================================================
   8. NOTICE IN CIMA (.icr-top-notice)
   ============================================================================= */

:is(#icr-w, .icr-roadmap) .icr-top-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--icr-space-3);
    max-width: 760px;
    margin: 0 auto var(--icr-space-5);
    padding: var(--icr-space-4);
    background: color-mix(in srgb, var(--icr-gold) 10%, var(--icr-surface));
    border: 1px solid color-mix(in srgb, var(--icr-gold) 35%, transparent);
    border-radius: var(--icr-radius-md);
}

:is(#icr-w, .icr-roadmap) .icr-top-notice strong {
    display: block;
    margin-bottom: var(--icr-space-1);
    font-size: 15px;
    font-weight: 800;
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-top-notice p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--icr-text-muted);
}


/* =============================================================================
   9. TIMELINE DELLE FASI (.icr-tl, .icr-ph, marker e filo)
   ============================================================================= */

:is(#icr-w, .icr-roadmap) .icr-tl {
    position: relative;
    padding-left: 38px;
}

:is(#icr-w, .icr-roadmap) .icr-ph {
    position: relative;
    margin-bottom: var(--icr-space-2);
}

/* ── Marker verticale: pallino + filo di collegamento ─────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-pm {
    position: absolute;
    left: -38px;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30px;
}

:is(#icr-w, .icr-roadmap) .icr-pd {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

:is(#icr-w, .icr-roadmap) .icr-pd::before {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: -1;
    border-radius: 50%;
    background: var(--icr-surface);
    border: 2px solid var(--pc, var(--icr-primary));
    box-shadow: var(--icr-shadow-sm);
}

/* Fase completata (oro) */
:is(#icr-w, .icr-roadmap) .icr-ph--c .icr-pd::before {
    border-color: var(--icr-gold);
    background: color-mix(in srgb, var(--icr-gold) 8%, var(--icr-surface));
}

/* Fase attiva: alone pulsante */
:is(#icr-w, .icr-roadmap) .icr-ph--a .icr-pd::before {
    border-color: var(--pc, var(--icr-primary));
    background: var(--icr-surface);
}

:is(#icr-w, .icr-roadmap) .icr-ph--a .icr-pd::after {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: -1;
    border-radius: 50%;
    border: 2px solid var(--pc, var(--icr-primary));
    animation: icr-ripple 2.4s ease-out infinite;
}

/* Fase bloccata */
:is(#icr-w, .icr-roadmap) .icr-ph--l .icr-pd::before {
    border-color: var(--icr-border-strong);
    background: var(--icr-surface-2);
}

:is(#icr-w, .icr-roadmap) .icr-pl {
    width: 3px;
    flex: 1;
    min-height: var(--icr-space-5);
    margin-top: 2px;
    z-index: 1;
    background: var(--icr-surface-3);
    border-radius: var(--icr-radius-full);
    overflow: hidden;
}

:is(#icr-w, .icr-roadmap) .icr-plf {
    width: 100%;
    background: var(--pc, var(--icr-primary));
    border-radius: var(--icr-radius-full);
    transition: height 900ms var(--icr-ease-out);
}


/* =============================================================================
   10. CARD DELLA FASE (.icr-pc e intestazione)
   ============================================================================= */

:is(#icr-w, .icr-roadmap) .icr-pc {
    position: relative;
    overflow: hidden;
    padding: var(--icr-space-4) var(--icr-space-3);
    margin-bottom: var(--icr-space-4);
    background: var(--icr-surface);
    border: 1px solid var(--icr-border);
    border-radius: var(--icr-radius-lg);
    box-shadow: var(--icr-shadow);
    transition: box-shadow var(--icr-slow) var(--icr-ease),
                transform var(--icr-slow) var(--icr-ease),
                border-color var(--icr-base) var(--icr-ease);
}

/* Filo colorato in cima alla card, con il colore della fase */
:is(#icr-w, .icr-roadmap) .icr-pc::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0.6;
    background: linear-gradient(90deg, transparent,
                var(--pc, var(--icr-primary)) 20%,
                var(--pc, var(--icr-primary)) 80%, transparent);
}

:is(#icr-w, .icr-roadmap) .icr-pc:hover {
    box-shadow: var(--icr-shadow-hover);
    transform: translateY(-3px);
    border-color: var(--icr-border-strong);
}

:is(#icr-w, .icr-roadmap) .icr-ph--a .icr-pc {
    border-color: color-mix(in srgb, var(--pc, var(--icr-primary)) 30%, transparent);
}

:is(#icr-w, .icr-roadmap) .icr-ph--c .icr-pc {
    border-color: color-mix(in srgb, var(--icr-gold) 30%, transparent);
    background: color-mix(in srgb, var(--icr-gold) 4%, var(--icr-surface));
}

:is(#icr-w, .icr-roadmap) .icr-ph--l .icr-pc {
    opacity: 0.72;
}

:is(#icr-w, .icr-roadmap) .icr-ph--l .icr-pc:hover {
    transform: none;
    box-shadow: var(--icr-shadow);
}

/* ── Testata della fase ───────────────────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-phead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--icr-space-2);
    margin-bottom: var(--icr-space-2);
}

:is(#icr-w, .icr-roadmap) .icr-phl {
    display: flex;
    align-items: center;
    gap: var(--icr-space-3);
    min-width: 0;
}

:is(#icr-w, .icr-roadmap) .icr-pi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    font-size: 22px;
}

:is(#icr-w, .icr-roadmap) .icr-pc h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-pdesc {
    margin: 0 0 var(--icr-space-4);
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0;
    color: var(--icr-text-muted);
}

/* ── Trofeo e pillola "fase completata" ───────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-phase-trophy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--icr-radius-sm);
    background: color-mix(in srgb, var(--icr-gold) 14%, transparent);
}

:is(#icr-w, .icr-roadmap) .icr-phase-badge {
    margin-left: var(--icr-space-2);
    padding: 5px var(--icr-space-3);
    border-radius: var(--icr-radius-full);
    background: color-mix(in srgb, var(--icr-gold) 16%, transparent);
    color: var(--icr-gold-ink);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* ── Contatore della fase (.icr-pbg) ──────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-pbg {
    flex-shrink: 0;
    padding: 6px var(--icr-space-3);
    border: none;
    border-radius: var(--icr-radius-full);
    background: var(--icr-surface-3);
    color: var(--icr-text-muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

:is(#icr-w, .icr-roadmap) .icr-pbg--a {
    background: color-mix(in srgb, var(--pc, var(--icr-primary)) 12%, transparent);
    color: var(--icr-phase-text);
}

:is(#icr-w, .icr-roadmap) .icr-pbg--d {
    background: color-mix(in srgb, var(--icr-gold) 16%, transparent);
    color: var(--icr-gold-ink);
}

/* ── Barra di avanzamento della fase ──────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-pbar {
    position: relative;
    height: 9px;
    margin-bottom: var(--icr-space-4);
    background: var(--icr-surface-3);
    border-radius: var(--icr-radius-full);
    overflow: hidden;
}

:is(#icr-w, .icr-roadmap) .icr-pbfill {
    position: relative;
    height: 100%;
    width: 0;
    border-radius: var(--icr-radius-full);
    background: linear-gradient(90deg,
                var(--pc, var(--icr-primary)),
                color-mix(in srgb, var(--pc, var(--icr-primary)) 55%, var(--icr-surface)));
    transition: width 1.2s var(--icr-ease-out);
}

:is(#icr-w, .icr-roadmap) .icr-pbfill::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent,
                color-mix(in srgb, var(--icr-surface) 75%, transparent), transparent);
    animation: icr-shimmer 2.6s infinite;
}

:is(#icr-w, .icr-roadmap) .icr-ph--c .icr-pbfill {
    background: linear-gradient(90deg, var(--icr-gold),
                color-mix(in srgb, var(--icr-gold) 55%, var(--icr-surface)));
}


/* =============================================================================
   11. MODULI DELLA FASE
   ============================================================================= */

:is(#icr-w, .icr-roadmap) .icr-mods {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

:is(#icr-w, .icr-roadmap) .icr-mod {
    margin: 0;
    padding: 2px;
    background: transparent;
    border: none;
    border-radius: var(--icr-radius-md);
    box-shadow: none;
    transition: background var(--icr-base) var(--icr-ease);
}

:is(#icr-w, .icr-roadmap) .icr-mod:hover {
    background: var(--icr-surface-2);
}

:is(#icr-w, .icr-roadmap) .icr-mr {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--icr-space-3);
    padding: var(--icr-space-3);
    min-height: 52px;
}

/* ── Pallino di stato del modulo ──────────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-md {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    border-radius: 50%;
    box-shadow: none;
}

:is(#icr-w, .icr-roadmap) .icr-md--d { border: 2px solid var(--icr-success); }

/* Il segno di spunta nel markup ha stroke fisso: lo riportiamo su un token,
   la proprietà CSS vince sull'attributo di presentazione dell'SVG. */
:is(#icr-w, .icr-roadmap) .icr-md--d svg { stroke: var(--icr-success); }
:is(#icr-w, .icr-roadmap) .icr-md--t { border: 2px solid var(--icr-border-strong); }

:is(#icr-w, .icr-roadmap) .icr-md--a {
    position: relative;
    border: 2px solid var(--pc, var(--icr-primary));
}

/* Anello di avanzamento del modulo attivo (--pct impostato dal PHP) */
:is(#icr-w, .icr-roadmap) .icr-md--a .icr-mdr {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(var(--pc, var(--icr-primary)) var(--pct, 0deg),
                               transparent var(--pct, 0deg));
    -webkit-mask: radial-gradient(transparent 10px, var(--icr-black) 11px);
    mask: radial-gradient(transparent 10px, var(--icr-black) 11px);
}

/* ── Informazioni del modulo ──────────────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-mi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

:is(#icr-w, .icr-roadmap) .icr-mt {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-mod--done .icr-mt {
    color: var(--icr-text-subtle);
}

:is(#icr-w, .icr-roadmap) .icr-mdone-msg {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--icr-success-ink);
}

:is(#icr-w, .icr-roadmap) .icr-mdesc {
    font-size: 13px;
    line-height: 1.4;
    color: var(--icr-text-muted);
}

:is(#icr-w, .icr-roadmap) .icr-mpct {
    flex-shrink: 0;
    padding: 3px var(--icr-space-3);
    border: none;
    border-radius: var(--icr-radius-full);
    background: color-mix(in srgb, var(--pc, var(--icr-primary)) 10%, transparent);
    color: var(--icr-phase-text);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Pulsante di espansione del modulo ────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-me {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--icr-space-2);
    width: 100%;
    height: auto;
    margin-top: var(--icr-space-3);
    padding: var(--icr-space-3) var(--icr-space-4);
    background: var(--icr-surface-2);
    border: 1px solid var(--icr-border);
    border-radius: var(--icr-radius-md);
    box-shadow: none;
    color: var(--icr-primary-text);
    cursor: pointer;
    transition: background var(--icr-base) var(--icr-ease),
                border-color var(--icr-base) var(--icr-ease),
                color var(--icr-base) var(--icr-ease);
}

:is(#icr-w, .icr-roadmap) .icr-me:hover {
    background: var(--icr-surface-3);
    border-color: var(--icr-border-strong);
}

:is(#icr-w, .icr-roadmap) .icr-me[aria-expanded="true"] {
    background: var(--icr-primary-soft);
    border-color: var(--icr-primary-tint);
}

:is(#icr-w, .icr-roadmap) .icr-me[aria-expanded="true"] .icr-expand-text::after {
    content: " (chiudi)";
    font-weight: 500;
}

:is(#icr-w, .icr-roadmap) .icr-expand-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

:is(#icr-w, .icr-roadmap) .icr-me svg {
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform var(--icr-slow) var(--icr-ease-out);
}

:is(#icr-w, .icr-roadmap) .icr-me[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Contenitore dell'albero aperto dal pulsante */
:is(#icr-w, .icr-roadmap) .icr-mod-tree-wrap[hidden] {
    display: none;
}


/* =============================================================================
   12. TREE VIEW — moduli / corsi / sezioni / lezioni
   ============================================================================= */

:is(#icr-w, .icr-roadmap) .icr-tw {
    padding: var(--icr-space-2) var(--icr-space-1) var(--icr-space-3) var(--icr-space-3);
    overflow-x: hidden;
}

:is(#icr-w, .icr-roadmap) .icr-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}

:is(#icr-w, .icr-roadmap) .icr-tree--d0 {
    padding-top: var(--icr-space-2);
}

:is(#icr-w, .icr-roadmap) .icr-tree--d1,
:is(#icr-w, .icr-roadmap) .icr-tree--d2,
:is(#icr-w, .icr-roadmap) .icr-tree--d3 {
    position: relative;
    padding-left: var(--icr-space-3);
}

:is(#icr-w, .icr-roadmap) .icr-tree-node {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── Riga dell'albero ─────────────────────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-tree-row {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--icr-space-2);
    margin: 0;
    padding: var(--icr-space-2);
    background: transparent;
    border: none;
    border-radius: var(--icr-radius-md);
    box-shadow: none;
    cursor: default;
    transition: background var(--icr-base) var(--icr-ease);
}

:is(#icr-w, .icr-roadmap) .icr-tree-row:hover {
    background: var(--icr-surface-2);
}

/* ── Toggle e spaziatore ──────────────────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: var(--icr-radius-sm);
    color: var(--icr-text-muted);
    cursor: pointer;
    transition: background var(--icr-base) var(--icr-ease),
                color var(--icr-base) var(--icr-ease);
}

:is(#icr-w, .icr-roadmap) .icr-tree-toggle:hover {
    background: var(--icr-surface-3);
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-tree-chevron {
    display: block;
    transition: transform var(--icr-slow) var(--icr-ease-out);
}

:is(#icr-w, .icr-roadmap) .icr-tree-toggle[aria-expanded="true"] .icr-tree-chevron {
    transform: rotate(90deg);
}

:is(#icr-w, .icr-roadmap) .icr-tree-spacer {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

:is(#icr-w, .icr-roadmap) .icr-tree-children[hidden] {
    display: none;
}

/* ── Icone dei nodi ───────────────────────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-tree-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: var(--icr-radius-sm);
    background: var(--icr-surface-3);
}

:is(#icr-w, .icr-roadmap) .icr-tree-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

:is(#icr-w, .icr-roadmap) .icr-tree-icon--done {
    background: color-mix(in srgb, var(--icr-success) 16%, transparent);
}

:is(#icr-w, .icr-roadmap) .icr-tree-icon--todo {
    background: color-mix(in srgb, var(--icr-danger) 12%, transparent);
}

/* ── Etichette e link ─────────────────────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-tree-label,
:is(#icr-w, .icr-roadmap) .icr-tree-link {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--icr-text);
    overflow-wrap: break-word;
    word-break: break-word;
}

:is(#icr-w, .icr-roadmap) .icr-tree-label { font-weight: 600; }

:is(#icr-w, .icr-roadmap) .icr-tree-link {
    font-weight: 500;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    text-decoration: none;
    transition: color var(--icr-base) var(--icr-ease);
}

:is(#icr-w, .icr-roadmap) .icr-tree-link:hover {
    color: var(--icr-phase-text);
}

/* Gerarchia tipografica per tipo di nodo */
:is(#icr-w, .icr-roadmap) .icr-tree-node--membership > .icr-tree-row .icr-tree-label,
:is(#icr-w, .icr-roadmap) .icr-tree-node--membership > .icr-tree-row .icr-tree-link {
    font-size: 16px;
    font-weight: 800;
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-tree-node--course > .icr-tree-row .icr-tree-label,
:is(#icr-w, .icr-roadmap) .icr-tree-node--course > .icr-tree-row .icr-tree-link {
    font-size: 15px;
    font-weight: 700;
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-tree-node--section > .icr-tree-row .icr-tree-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--icr-text-muted);
}

:is(#icr-w, .icr-roadmap) .icr-tree-node--section > .icr-tree-row .icr-tree-icon {
    background: color-mix(in srgb, var(--icr-primary) 8%, var(--icr-surface-3));
}

:is(#icr-w, .icr-roadmap) .icr-tree-node--lesson > .icr-tree-row .icr-tree-link {
    font-weight: 500;
    color: var(--icr-text);
}

/* ── Stati: fatto / da fare / bloccato ────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-tree-done > .icr-tree-row {
    background: color-mix(in srgb, var(--icr-success) 6%, transparent);
    border-left: 3px solid var(--icr-success);
    border-radius: 0 var(--icr-radius-md) var(--icr-radius-md) 0;
    padding-left: var(--icr-space-2);
}

:is(#icr-w, .icr-roadmap) .icr-tree-done > .icr-tree-row .icr-tree-link {
    color: var(--icr-text-subtle);
    text-decoration: line-through;
}

:is(#icr-w, .icr-roadmap) .icr-tree-todo > .icr-tree-row {
    border-left: 3px solid color-mix(in srgb, var(--icr-danger) 40%, transparent);
    border-radius: 0 var(--icr-radius-md) var(--icr-radius-md) 0;
    padding-left: var(--icr-space-2);
}

:is(#icr-w, .icr-roadmap) .icr-tree-todo > .icr-tree-row .icr-tree-link {
    font-weight: 500;
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-tree-locked > .icr-tree-row .icr-tree-label--locked {
    color: var(--icr-text-faint);
}

:is(#icr-w, .icr-roadmap) .icr-tree-locked > .icr-tree-row .icr-tree-icon {
    opacity: 0.4;
}

:is(#icr-w, .icr-roadmap) .icr-lock-icon {
    display: inline-flex;
    align-items: center;
    margin-left: var(--icr-space-1);
    flex-shrink: 0;
}

:is(#icr-w, .icr-roadmap) .icr-tree-check {
    flex-shrink: 0;
    margin-left: 2px;
    opacity: 0.7;
}

/* ── Riquadro di istruzioni sopra l'albero ────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-tree-instructions {
    margin-bottom: var(--icr-space-4);
    padding: var(--icr-space-3) var(--icr-space-4);
    background: color-mix(in srgb, var(--icr-primary) 8%, var(--icr-surface));
    border: 1px solid color-mix(in srgb, var(--icr-primary) 18%, transparent);
    border-radius: var(--icr-radius-md);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--icr-text);
}


/* =============================================================================
   13. CONTATORI, PERCENTUALI E STATI LEZIONE
   ============================================================================= */

:is(#icr-w, .icr-roadmap) .icr-lesson-status {
    flex-shrink: 0;
    margin-left: auto;
    padding: 3px var(--icr-space-2);
    border-radius: var(--icr-radius-full);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

:is(#icr-w, .icr-roadmap) .icr-lesson-done {
    background: color-mix(in srgb, var(--icr-success) 16%, transparent);
    color: var(--icr-success-ink);
    box-shadow: none;
}

:is(#icr-w, .icr-roadmap) .icr-lesson-todo {
    background: color-mix(in srgb, var(--icr-danger) 12%, transparent);
    color: var(--icr-danger-ink);
    border: none;
    box-shadow: none;
}

:is(#icr-w, .icr-roadmap) .icr-lesson-done svg {
    display: inline;
    vertical-align: middle;
    margin-right: 2px;
}

:is(#icr-w, .icr-roadmap) .icr-tree-counter {
    flex-shrink: 0;
    margin-left: auto;
    padding: 3px var(--icr-space-3);
    border: none;
    border-radius: var(--icr-radius-full);
    background: var(--icr-surface-3);
    color: var(--icr-text-muted);
    box-shadow: none;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

:is(#icr-w, .icr-roadmap) .icr-tree-counter--progress {
    background: var(--icr-primary-soft);
    color: var(--icr-primary-text);
}

:is(#icr-w, .icr-roadmap) .icr-tree-counter--done {
    background: var(--icr-success);
    color: var(--icr-on-primary);
}

:is(#icr-w, .icr-roadmap) .icr-medal-icon {
    display: inline;
    vertical-align: middle;
    margin-right: 3px;
}

/* ── Pulsante "apri lezione" ──────────────────────────────────────────────── */
/* Su telefono è sempre visibile: non esiste il passaggio del mouse. */
:is(#icr-w, .icr-roadmap) .icr-lesson-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--icr-space-1);
    flex-basis: 100%;
    margin-top: var(--icr-space-1);
    padding: var(--icr-space-2) var(--icr-space-3);
    border: none;
    border-radius: var(--icr-radius-sm);
    background: linear-gradient(135deg, var(--icr-primary), var(--icr-primary-dark));
    color: var(--icr-on-primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--icr-primary) 28%, transparent);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow var(--icr-slow) var(--icr-ease),
                transform var(--icr-slow) var(--icr-ease),
                opacity var(--icr-slow) var(--icr-ease);
}

:is(#icr-w, .icr-roadmap) .icr-lesson-open-btn:hover {
    box-shadow: 0 5px 14px color-mix(in srgb, var(--icr-primary) 36%, transparent);
    color: var(--icr-on-primary);
    transform: translateY(-1px);
}

/* ── Pulsante autovalutazione in linea ────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-sa-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--icr-space-1);
    flex-shrink: 0;
    margin-top: var(--icr-space-1);
    padding: var(--icr-space-2) var(--icr-space-3);
    border: none;
    border-radius: var(--icr-radius-sm);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-decoration: none;
    cursor: default;
    transition: box-shadow var(--icr-base) var(--icr-ease),
                transform var(--icr-base) var(--icr-ease);
}

:is(#icr-w, .icr-roadmap) .icr-sa-btn--todo {
    background: linear-gradient(135deg, var(--icr-teal), var(--icr-teal-dark));
    color: var(--icr-on-primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--icr-teal) 28%, transparent);
    cursor: pointer;
}

:is(#icr-w, .icr-roadmap) .icr-sa-btn--todo:hover {
    box-shadow: 0 5px 14px color-mix(in srgb, var(--icr-teal) 36%, transparent);
    transform: translateY(-1px);
    color: var(--icr-on-primary);
}

:is(#icr-w, .icr-roadmap) .icr-sa-btn--done {
    background: var(--icr-surface-3);
    color: var(--icr-text-subtle);
    box-shadow: none;
    cursor: default;
}


/* =============================================================================
   14. TRAGUARDI E BADGE
   ============================================================================= */

:is(#icr-w, .icr-roadmap) .icr-achievements {
    margin-bottom: var(--icr-space-5);
}

:is(#icr-w, .icr-roadmap) .icr-achievements-title {
    display: flex;
    align-items: center;
    gap: var(--icr-space-2);
    margin: 0 0 var(--icr-space-4);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--icr-text);
}

/* ── Badge in evidenza ────────────────────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-badge-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--icr-space-3);
    padding: var(--icr-space-4);
    background: color-mix(in srgb, var(--bc, var(--icr-gold)) 10%, var(--icr-surface));
    border: 1px solid color-mix(in srgb, var(--bc, var(--icr-gold)) 45%, transparent);
    border-radius: var(--icr-radius-lg);
    box-shadow: 0 8px 26px color-mix(in srgb, var(--bc, var(--icr-gold)) 16%, transparent);
}

:is(#icr-w, .icr-roadmap) .icr-badge-showcase-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--icr-surface) 85%, transparent);
    box-shadow: var(--icr-shadow-sm);
}

:is(#icr-w, .icr-roadmap) .icr-badge-showcase-icon::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid var(--bc, var(--icr-gold));
    opacity: 0.4;
    animation: icr-glow 2s ease-in-out infinite alternate;
}

:is(#icr-w, .icr-roadmap) .icr-badge-showcase-icon svg {
    width: 40px;
    height: 40px;
}

:is(#icr-w, .icr-roadmap) .icr-badge-showcase-info {
    display: flex;
    flex-direction: column;
    gap: var(--icr-space-1);
}

:is(#icr-w, .icr-roadmap) .icr-badge-showcase-title {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-badge-showcase-desc {
    font-size: 14px;
    line-height: 1.4;
    color: var(--icr-text-muted);
}

/* ── Griglia dei traguardi ────────────────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-badges-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--icr-space-3);
}

:is(#icr-w, .icr-roadmap) .icr-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--icr-space-1);
    padding: var(--icr-space-4) var(--icr-space-3);
    background: var(--icr-surface);
    border: 1px solid var(--icr-border);
    border-radius: var(--icr-radius-lg);
    transition: transform var(--icr-slow) var(--icr-ease),
                box-shadow var(--icr-slow) var(--icr-ease),
                border-color var(--icr-slow) var(--icr-ease);
}

:is(#icr-w, .icr-roadmap) .icr-badge:hover {
    transform: translateY(-3px);
    box-shadow: var(--icr-shadow-hover);
    border-color: var(--bc, var(--icr-gold));
}

:is(#icr-w, .icr-roadmap) .icr-badge-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--icr-space-1);
    border-radius: 50%;
    background: var(--icr-surface-2);
}

:is(#icr-w, .icr-roadmap) .icr-badge-icon::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--bc, var(--icr-gold));
    opacity: 0.3;
}

:is(#icr-w, .icr-roadmap) .icr-badge-title {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-badge-desc {
    font-size: 11px;
    line-height: 1.3;
    color: var(--icr-text-muted);
}

/* ── Legenda delle medaglie (superficie scura) ────────────────────────────── */
/* ── Tappe del percorso ───────────────────────────────────────────────────
   Registro da documento istituzionale, non da gioco.
   Il fondo scuro precedente spezzava la pagina — che è chiara — e leggeva
   come un pannello di gamification: qui si formano professionisti sanitari,
   e l'avanzamento va comunicato come un dato, non come un premio. */
:is(#icr-w, .icr-roadmap) .icr-badge-legend {
    position: relative;
    margin: var(--icr-space-4) 0 var(--icr-space-5);
    padding: var(--icr-space-4) var(--icr-space-4) var(--icr-space-2);
    background: var(--icr-surface);
    border: 1px solid var(--icr-border);
    border-radius: var(--icr-radius-lg);
    box-shadow: none;
}

:is(#icr-w, .icr-roadmap) .icr-legend-title {
    display: flex;
    align-items: center;
    gap: var(--icr-space-2);
    margin: 0 0 var(--icr-space-3);
    padding-bottom: var(--icr-space-3);
    border-bottom: 1px solid var(--icr-border);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--icr-text-muted);
}

:is(#icr-w, .icr-roadmap) .icr-legend-items {
    display: flex;
    flex-direction: column;
}

:is(#icr-w, .icr-roadmap) .icr-legend-item {
    display: flex;
    align-items: center;
    gap: var(--icr-space-3);
    padding: var(--icr-space-3) 0;
    border-bottom: 1px solid var(--icr-border-subtle, var(--icr-border));
    border-radius: 0;
    transition: none;
}

:is(#icr-w, .icr-roadmap) .icr-legend-item:last-child { border-bottom: none; }
:is(#icr-w, .icr-roadmap) .icr-legend-item:hover { background: transparent; }

:is(#icr-w, .icr-roadmap) .icr-legend-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: transparent !important;
    border: none !important;
    filter: none !important;
    opacity: 1 !important;
}

:is(#icr-w, .icr-roadmap) .icr-legend-icon-wrap svg {
    width: 30px;
    height: 30px;
}

:is(#icr-w, .icr-roadmap) .icr-legend-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

:is(#icr-w, .icr-roadmap) .icr-legend-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-legend-req {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--icr-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Stato: un segno discreto a destra, non un distintivo. */
:is(#icr-w, .icr-roadmap) .icr-legend-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: transparent;
}

:is(#icr-w, .icr-roadmap) .icr-legend-reached .icr-legend-status { opacity: 1; }
:is(#icr-w, .icr-roadmap) .icr-legend-locked  .icr-legend-status { opacity: .35; }

/* Le tappe non ancora raggiunte si distinguono per attenuazione, non per
   lucchetti e desaturazione. */
:is(#icr-w, .icr-roadmap) .icr-legend-locked .icr-legend-name {
    color: var(--icr-text-muted);
    font-weight: 500;
}

:is(#icr-w, .icr-roadmap) .icr-legend-locked .icr-legend-req {
    color: var(--icr-text-subtle, var(--icr-text-muted));
}

:is(#icr-w, .icr-roadmap) .icr-legend-locked .icr-legend-icon-wrap { opacity: .45 !important; }

/* ── Prossimi traguardi ───────────────────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-next-badges {
    margin-bottom: var(--icr-space-5);
    padding: var(--icr-space-4);
    background: var(--icr-surface);
    border: 1px solid var(--icr-border);
    border-radius: var(--icr-radius-lg);
    box-shadow: var(--icr-shadow);
}

:is(#icr-w, .icr-roadmap) .icr-next-title {
    margin: 0 0 var(--icr-space-4);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--icr-text-muted);
}

:is(#icr-w, .icr-roadmap) .icr-next-badge {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--icr-space-3);
    padding: var(--icr-space-3) 0;
    border-bottom: 1px solid var(--icr-border);
}

:is(#icr-w, .icr-roadmap) .icr-next-badge:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

:is(#icr-w, .icr-roadmap) .icr-next-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

:is(#icr-w, .icr-roadmap) .icr-next-info {
    display: flex;
    flex-direction: column;
    gap: var(--icr-space-1);
    flex: 1;
    min-width: 0;
}

:is(#icr-w, .icr-roadmap) .icr-next-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-next-name em {
    font-style: normal;
    font-weight: 400;
    color: var(--icr-text-muted);
}

:is(#icr-w, .icr-roadmap) .icr-next-bar {
    height: 6px;
    background: var(--icr-surface-3);
    border-radius: var(--icr-radius-full);
    overflow: hidden;
}

:is(#icr-w, .icr-roadmap) .icr-next-fill {
    height: 100%;
    border-radius: var(--icr-radius-full);
    transition: width 1s var(--icr-ease-out);
}

:is(#icr-w, .icr-roadmap) .icr-next-pct {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    color: var(--icr-text);
    font-variant-numeric: tabular-nums;
}


/* =============================================================================
   15. CARD AUTOVALUTAZIONE (.icr-sa-card)
   ============================================================================= */

:is(#icr-w, .icr-roadmap) .icr-sa-card {
    position: relative;
    overflow: hidden;
    margin: var(--icr-space-5) 0;
    padding: var(--icr-space-5) var(--icr-space-4);
    background: var(--icr-surface);
    border: 1px solid var(--icr-border);
    border-radius: var(--icr-radius-xl);
    box-shadow: var(--icr-shadow);
}

/* Barra superiore tricolore: teal → blu → oro */
:is(#icr-w, .icr-roadmap) .icr-sa-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: var(--icr-radius-xl) var(--icr-radius-xl) 0 0;
    background: linear-gradient(90deg, var(--icr-teal), var(--icr-primary) 50%, var(--icr-gold));
}

:is(#icr-w, .icr-roadmap) .icr-sa-header {
    display: flex;
    align-items: center;
    gap: var(--icr-space-3);
    margin-bottom: var(--icr-space-4);
}

:is(#icr-w, .icr-roadmap) .icr-sa-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--icr-radius-md);
    background: linear-gradient(140deg, var(--icr-teal), var(--icr-teal-dark));
    box-shadow: 0 6px 16px color-mix(in srgb, var(--icr-teal) 28%, transparent);
}

:is(#icr-w, .icr-roadmap) .icr-sa-header-text h3 {
    margin: 0 0 2px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-sa-header-text p {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--icr-text-subtle);
}

:is(#icr-w, .icr-roadmap) .icr-sa-desc {
    margin: 0 0 var(--icr-space-4);
    font-size: 15px;
    line-height: 1.7;
    color: var(--icr-text-2);
}

/* ── Avanzamento dell'autovalutazione ─────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-sa-progress-wrap {
    margin-bottom: var(--icr-space-4);
}

:is(#icr-w, .icr-roadmap) .icr-sa-progress-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--icr-space-2);
    margin-bottom: var(--icr-space-2);
}

:is(#icr-w, .icr-roadmap) .icr-sa-progress-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-sa-progress-value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

:is(#icr-w, .icr-roadmap) .icr-sa-progress-bar {
    height: 10px;
    background: var(--icr-surface-3);
    border-radius: var(--icr-radius-full);
    overflow: hidden;
}

:is(#icr-w, .icr-roadmap) .icr-sa-progress-fill {
    height: 100%;
    border-radius: var(--icr-radius-full);
    transition: width 900ms var(--icr-ease-out);
}

:is(#icr-w, .icr-roadmap) .icr-sa-progress-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--icr-space-2);
}

:is(#icr-w, .icr-roadmap) .icr-sa-step {
    display: flex;
    align-items: center;
    gap: var(--icr-space-1);
    font-size: 12px;
    font-weight: 700;
    color: var(--icr-text-faint);
    transition: color var(--icr-slow) var(--icr-ease);
}

:is(#icr-w, .icr-roadmap) .icr-sa-step-active {
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-sa-step-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--icr-border-strong);
    transition: background var(--icr-slow) var(--icr-ease);
}

:is(#icr-w, .icr-roadmap) .icr-sa-step-active .icr-sa-step-dot {
    box-shadow: 0 0 6px currentColor;
}

/* ── Livello raggiunto ────────────────────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-sa-level-badge {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--icr-space-2);
    margin-bottom: var(--icr-space-4);
    padding: var(--icr-space-3) var(--icr-space-4);
    border: 1px solid;
    border-radius: var(--icr-radius-md);
}

:is(#icr-w, .icr-roadmap) .icr-sa-level-dot {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
}

:is(#icr-w, .icr-roadmap) .icr-sa-level-name {
    flex: 1;
    font-size: 17px;
    font-weight: 800;
}

:is(#icr-w, .icr-roadmap) .icr-sa-level-score {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* ── Statistiche ──────────────────────────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-sa-stats {
    display: flex;
    flex-direction: column;
    gap: var(--icr-space-3);
    margin-bottom: var(--icr-space-4);
}

:is(#icr-w, .icr-roadmap) .icr-sa-stat {
    flex: 1;
    min-width: 90px;
    padding: var(--icr-space-4) var(--icr-space-3);
    text-align: center;
    background: var(--icr-surface-2);
    border: 1px solid var(--icr-border);
    border-radius: var(--icr-radius-lg);
}

:is(#icr-w, .icr-roadmap) .icr-sa-stat-val {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--icr-primary-text);
    font-variant-numeric: tabular-nums;
}

:is(#icr-w, .icr-roadmap) .icr-sa-stat-label {
    margin-top: var(--icr-space-1);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--icr-text-subtle);
}

/* ── Suggerimento, promemoria, istruzioni ─────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-sa-tip {
    margin-bottom: var(--icr-space-4);
    padding: var(--icr-space-4);
    background: color-mix(in srgb, var(--icr-primary) 7%, var(--icr-surface));
    border-left: 4px solid var(--icr-primary);
    border-radius: var(--icr-radius-md);
}

:is(#icr-w, .icr-roadmap) .icr-sa-tip p {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-sa-reminder {
    margin: 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: var(--icr-text-subtle);
}

:is(#icr-w, .icr-roadmap) .icr-sa-howto {
    display: flex;
    flex-direction: column;
    gap: var(--icr-space-2);
    margin-bottom: var(--icr-space-2);
}

:is(#icr-w, .icr-roadmap) .icr-sa-howto-step {
    display: flex;
    align-items: center;
    gap: var(--icr-space-3);
    padding: var(--icr-space-3) var(--icr-space-4);
    background: var(--icr-surface-2);
    border-radius: var(--icr-radius-md);
    font-size: 15px;
    line-height: 1.4;
    color: var(--icr-text-2);
}

:is(#icr-w, .icr-roadmap) .icr-sa-howto-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--icr-primary);
    color: var(--icr-on-primary);
    font-size: 14px;
    font-weight: 800;
}


/* =============================================================================
   16. CARD PROFILO STUDENTE
   ============================================================================= */

:is(#icr-w, .icr-roadmap) .icr-profile {
    position: relative;
    overflow: hidden;
    margin-top: var(--icr-space-5);
    padding: var(--icr-space-4);
    background: var(--icr-surface);
    border: 1px solid var(--icr-border);
    border-radius: var(--icr-radius-xl);
    box-shadow: var(--icr-shadow);
}

:is(#icr-w, .icr-roadmap) .icr-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--icr-space-3);
    margin-bottom: var(--icr-space-5);
    padding-bottom: var(--icr-space-5);
    border-bottom: 1px solid var(--icr-border);
}

:is(#icr-w, .icr-roadmap) .icr-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--icr-primary) 22%, transparent);
}

:is(#icr-w, .icr-roadmap) .icr-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

:is(#icr-w, .icr-roadmap) .icr-profile-info {
    flex: 1;
    min-width: 0;
}

:is(#icr-w, .icr-roadmap) .icr-profile-name {
    margin: 0 0 var(--icr-space-1);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-profile-email {
    margin: 0 0 2px;
    font-size: 14px;
    color: var(--icr-text-muted);
}

:is(#icr-w, .icr-roadmap) .icr-profile-since {
    margin: 0;
    font-size: 13px;
    color: var(--icr-text-subtle);
}

:is(#icr-w, .icr-roadmap) .icr-profile-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--icr-space-2);
    margin-top: var(--icr-space-3);
}

:is(#icr-w, .icr-roadmap) .icr-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--icr-space-1);
    min-height: 44px;
    padding: var(--icr-space-2) var(--icr-space-4);
    border: 1px solid var(--icr-border);
    border-radius: var(--icr-radius-md);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--icr-slow) var(--icr-ease),
                box-shadow var(--icr-slow) var(--icr-ease),
                transform var(--icr-slow) var(--icr-ease);
}

:is(#icr-w, .icr-roadmap) .icr-profile-btn--edit {
    background: var(--icr-surface-2);
    color: var(--icr-text);
    box-shadow: var(--icr-shadow-sm);
}

:is(#icr-w, .icr-roadmap) .icr-profile-btn--edit:hover {
    border-color: var(--icr-border-strong);
    box-shadow: var(--icr-shadow);
    transform: translateY(-1px);
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-profile-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── Citazione nel profilo (variante chiara) ──────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-profile-quote-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--icr-space-2);
    margin-bottom: 0;
    padding: var(--icr-space-5) var(--icr-space-4);
    text-align: center;
    background: color-mix(in srgb, var(--icr-primary) 4%, var(--icr-surface));
    border: 1px solid color-mix(in srgb, var(--icr-primary) 14%, transparent);
    border-radius: var(--icr-radius-lg);
}

:is(#icr-w, .icr-roadmap) .icr-pq-icon {
    opacity: 0.35;
    margin-bottom: var(--icr-space-1);
}

:is(#icr-w, .icr-roadmap) .icr-pq-text {
    max-width: 560px;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    font-style: italic;
    line-height: 1.6;
    letter-spacing: -0.01em;
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-pq-author {
    font-size: 13px;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.02em;
    color: var(--icr-primary-text);
}

/* ── Citazione nel profilo (variante oro) ─────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-profile-quote {
    position: relative;
    margin-bottom: 0;
    padding: var(--icr-space-5) var(--icr-space-4);
    text-align: center;
    background: color-mix(in srgb, var(--icr-gold) 8%, var(--icr-surface));
    border: 1px solid color-mix(in srgb, var(--icr-gold) 35%, transparent);
    border-radius: var(--icr-radius-lg);
}

:is(#icr-w, .icr-roadmap) .icr-profile-quote-icon {
    display: inline-block;
    margin-bottom: var(--icr-space-3);
}

:is(#icr-w, .icr-roadmap) .icr-profile-quote-text {
    display: block;
    margin: 0 0 var(--icr-space-3);
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    font-style: italic;
    line-height: 1.6;
    color: var(--icr-text);
    quotes: none;
}

:is(#icr-w, .icr-roadmap) .icr-profile-quote-author {
    display: block;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    color: var(--icr-gold-ink);
}


/* =============================================================================
   17. FORM DI LOGIN IN LINEA
   ============================================================================= */

:is(#icr-w, .icr-roadmap) .icr-lg {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--icr-space-5) var(--icr-space-2);
}

:is(#icr-w, .icr-roadmap) .icr-lc {
    width: 100%;
    max-width: 420px;
    padding: var(--icr-space-5) var(--icr-space-4);
    background: var(--icr-surface);
    border: 1px solid var(--icr-border);
    border-radius: var(--icr-radius-xl);
    box-shadow: var(--icr-shadow-lg);
    animation: icr-login-in 500ms var(--icr-ease-out) both;
}

:is(#icr-w, .icr-roadmap) .icr-lh {
    text-align: center;
    margin-bottom: var(--icr-space-5);
}

:is(#icr-w, .icr-roadmap) .icr-li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--icr-space-4);
    border-radius: var(--icr-radius-lg);
    background: var(--icr-primary-soft);
}

:is(#icr-w, .icr-roadmap) .icr-lh h2 {
    margin: 0 0 var(--icr-space-2);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-lh p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--icr-text-subtle);
}

/* ── Messaggi di esito ────────────────────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-lm {
    margin-bottom: var(--icr-space-4);
    padding: var(--icr-space-3) var(--icr-space-4);
    border-radius: var(--icr-radius-md);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

:is(#icr-w, .icr-roadmap) .icr-lm.icr-err {
    background: color-mix(in srgb, var(--icr-danger) 10%, var(--icr-surface));
    border: 1px solid color-mix(in srgb, var(--icr-danger) 30%, transparent);
    color: var(--icr-danger-ink);
    animation: icr-shake 500ms var(--icr-ease);
}

:is(#icr-w, .icr-roadmap) .icr-lm.icr-ok {
    background: color-mix(in srgb, var(--icr-success) 12%, var(--icr-surface));
    border: 1px solid color-mix(in srgb, var(--icr-success) 32%, transparent);
    color: var(--icr-success-ink);
}

/* ── Campi ────────────────────────────────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-lf {
    margin-bottom: var(--icr-space-4);
}

:is(#icr-w, .icr-roadmap) .icr-lf label {
    display: block;
    margin-bottom: var(--icr-space-2);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--icr-text);
}

:is(#icr-w, .icr-roadmap) .icr-liw {
    position: relative;
    display: flex;
    align-items: center;
}

:is(#icr-w, .icr-roadmap) .icr-lfi {
    position: absolute;
    left: var(--icr-space-4);
    color: var(--icr-text-faint);
    pointer-events: none;
    transition: color var(--icr-base) var(--icr-ease);
}

:is(#icr-w, .icr-roadmap) .icr-liw:focus-within .icr-lfi {
    color: var(--icr-primary-text);
}

:is(#icr-w, .icr-roadmap) .icr-lf input[type="text"],
:is(#icr-w, .icr-roadmap) .icr-lf input[type="password"],
:is(#icr-w, .icr-roadmap) .icr-lf input[type="email"] {
    width: 100%;
    height: auto;
    min-height: 48px;
    margin: 0;
    /* 16px evita lo zoom automatico su iOS al focus */
    padding: var(--icr-space-3) var(--icr-space-4) var(--icr-space-3) var(--icr-space-7);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--icr-text);
    background: var(--icr-surface-2);
    border: 1.5px solid var(--icr-border);
    border-radius: var(--icr-radius-md);
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    transition: border-color var(--icr-slow) var(--icr-ease),
                box-shadow var(--icr-slow) var(--icr-ease),
                background var(--icr-slow) var(--icr-ease);
}

:is(#icr-w, .icr-roadmap) .icr-lf input:focus {
    background: var(--icr-surface);
    border-color: var(--icr-focus-ring);
    box-shadow: 0 0 0 4px var(--icr-focus-halo);
}

:is(#icr-w, .icr-roadmap) .icr-lf input::placeholder {
    font-weight: 400;
    color: var(--icr-text-faint);
}

:is(#icr-w, .icr-roadmap) .icr-ltpw {
    position: absolute;
    right: var(--icr-space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    outline: none;
    color: var(--icr-text-faint);
    cursor: pointer;
    transition: color var(--icr-base) var(--icr-ease);
}

:is(#icr-w, .icr-roadmap) .icr-ltpw:hover {
    color: var(--icr-primary-text);
}

/* ── Opzioni: ricordami + password dimenticata ────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-lo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--icr-space-2);
    margin-bottom: var(--icr-space-5);
    font-size: 14px;
}

:is(#icr-w, .icr-roadmap) .icr-lrem {
    display: flex;
    align-items: center;
    gap: var(--icr-space-2);
    min-height: 44px;
    font-weight: 500;
    color: var(--icr-text-muted);
    cursor: pointer;
}

:is(#icr-w, .icr-roadmap) .icr-lrem input {
    width: 18px;
    height: 18px;
    accent-color: var(--icr-primary);
    cursor: pointer;
}

:is(#icr-w, .icr-roadmap) .icr-lfgt {
    font-weight: 600;
    color: var(--icr-primary-text);
    text-decoration: none;
    transition: opacity var(--icr-base) var(--icr-ease);
}

:is(#icr-w, .icr-roadmap) .icr-lfgt:hover { opacity: 0.7; }

/* ── Pulsante di accesso ──────────────────────────────────────────────────── */
:is(#icr-w, .icr-roadmap) .icr-lbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--icr-space-2);
    width: 100%;
    min-height: 52px;
    padding: var(--icr-space-3) var(--icr-space-5);
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: center;
    color: var(--icr-on-primary);
    background: var(--icr-primary);
    border: none;
    border-radius: var(--icr-radius-md);
    outline: none;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--icr-primary) 22%, transparent);
    cursor: pointer;
    transition: box-shadow var(--icr-slow) var(--icr-ease),
                transform var(--icr-slow) var(--icr-ease),
                background var(--icr-slow) var(--icr-ease);
}

:is(#icr-w, .icr-roadmap) .icr-lbtn:hover {
    background: var(--icr-primary-dark);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--icr-primary) 28%, transparent);
    transform: translateY(-1px);
}

:is(#icr-w, .icr-roadmap) .icr-lbtn:active { transform: scale(0.99); }

:is(#icr-w, .icr-roadmap) .icr-lbtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

:is(#icr-w, .icr-roadmap) .icr-login-btn-text {
    line-height: 1.3;
}

/* Spinner del pulsante durante l'invio.
   Il markup del PHP incapsula già un <svg> animato: qui servono solo il
   contenitore e il colore del tratto, che eredita da currentColor. */
:is(#icr-w, .icr-roadmap) .icr-login-btn-loader {
    align-items: center;
    justify-content: center;
    color: var(--icr-on-primary);
}

:is(#icr-w, .icr-roadmap) .icr-login-btn-loader svg {
    display: block;
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

:is(#icr-w, .icr-roadmap) .icr-login-btn-loader[hidden] { display: none; }

/* Icone occhio aperto / occhio sbarrato del campo password */
:is(#icr-w, .icr-roadmap) .icr-pw-show,
:is(#icr-w, .icr-roadmap) .icr-pw-hide {
    display: block;
    stroke: currentColor;
}


/* =============================================================================
   18. TOAST EMAIL
   ============================================================================= */

:is(#icr-w, .icr-roadmap) .icr-email-toast {
    position: fixed;
    right: var(--icr-space-3);
    bottom: var(--icr-space-3);
    left: var(--icr-space-3);
    z-index: 99999;
    max-width: 360px;
    margin-left: auto;
    padding: var(--icr-space-3) var(--icr-space-5);
    background: var(--icr-dark);
    color: var(--icr-dark-text);
    border-radius: var(--icr-radius-md);
    box-shadow: var(--icr-shadow-lg);
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity var(--icr-slow) var(--icr-ease-out),
                transform var(--icr-slow) var(--icr-ease-out);
}

:is(#icr-w, .icr-roadmap) .icr-email-toast.icr-toast-show {
    opacity: 1;
    transform: translateY(0);
}


/* =============================================================================
   19. KEYFRAMES
   ============================================================================= */

@keyframes icr-shimmer {
    0%        { transform: translateX(-100%); }
    60%, 100% { transform: translateX(240%); }
}

@keyframes icr-ripple {
    0%   { transform: scale(0.85); opacity: 0.6; }
    100% { transform: scale(1.5);  opacity: 0; }
}

@keyframes icr-glow {
    0%   { opacity: 0.2; transform: scale(1); }
    100% { opacity: 0.6; transform: scale(1.03); }
}

@keyframes icr-login-in {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes icr-shake {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-6px); }
    30%      { transform: translateX(5px); }
    45%      { transform: translateX(-4px); }
    60%      { transform: translateX(3px); }
    75%      { transform: translateX(-2px); }
    90%      { transform: translateX(1px); }
}

/* =============================================================================
   20. BREAKPOINT ≥ 481px — telefoni grandi
   ============================================================================= */

@media (min-width: 481px) {

    :is(#icr-w, .icr-roadmap) {
        padding: var(--icr-space-6) var(--icr-space-4) var(--icr-space-7);
    }

    :is(#icr-w, .icr-roadmap) .icr-tl { padding-left: var(--icr-space-7); }

    :is(#icr-w, .icr-roadmap) .icr-pm {
        left: calc(var(--icr-space-7) * -1);
        width: 36px;
    }

    :is(#icr-w, .icr-roadmap) .icr-pd {
        width: 36px;
        height: 36px;
        font-size: 17px;
    }

    :is(#icr-w, .icr-roadmap) .icr-pc {
        padding: var(--icr-space-5) var(--icr-space-4);
    }

    :is(#icr-w, .icr-roadmap) .icr-pc h3 { font-size: 18px; }

    :is(#icr-w, .icr-roadmap) .icr-tw {
        padding: var(--icr-space-2) var(--icr-space-2)
                 var(--icr-space-4) var(--icr-space-4);
    }

    /* Le guide verticali dell'albero compaiono solo con spazio sufficiente */
    :is(#icr-w, .icr-roadmap) .icr-tree--d1,
    :is(#icr-w, .icr-roadmap) .icr-tree--d2,
    :is(#icr-w, .icr-roadmap) .icr-tree--d3 {
        padding-left: var(--icr-space-5);
    }

    :is(#icr-w, .icr-roadmap) .icr-tree--d1::before,
    :is(#icr-w, .icr-roadmap) .icr-tree--d2::before,
    :is(#icr-w, .icr-roadmap) .icr-tree--d3::before {
        content: "";
        position: absolute;
        left: 7px;
        top: 0;
        bottom: 6px;
        width: 1px;
        background: var(--icr-border);
    }

    :is(#icr-w, .icr-roadmap) .icr-tree--d1 > .icr-tree-node > .icr-tree-row::before,
    :is(#icr-w, .icr-roadmap) .icr-tree--d2 > .icr-tree-node > .icr-tree-row::before,
    :is(#icr-w, .icr-roadmap) .icr-tree--d3 > .icr-tree-node > .icr-tree-row::before {
        content: "";
        position: absolute;
        left: -11px;
        top: 50%;
        width: 8px;
        height: 1px;
        background: var(--icr-border);
    }

    :is(#icr-w, .icr-roadmap) .icr-tree-row {
        flex-wrap: nowrap;
        padding: var(--icr-space-2) var(--icr-space-3);
    }

    :is(#icr-w, .icr-roadmap) .icr-lesson-open-btn,
    :is(#icr-w, .icr-roadmap) .icr-sa-btn {
        flex-basis: auto;
        margin-top: 0;
        margin-left: var(--icr-space-2);
    }

    :is(#icr-w, .icr-roadmap) .icr-lesson-status,
    :is(#icr-w, .icr-roadmap) .icr-tree-counter {
        margin-left: auto;
    }

    :is(#icr-w, .icr-roadmap) .icr-welcome-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        padding: var(--icr-space-4) var(--icr-space-5);
    }

    :is(#icr-w, .icr-roadmap) .icr-welcome-icon { order: 0; font-size: 40px; }

    :is(#icr-w, .icr-roadmap) .icr-badge-showcase {
        flex-direction: row;
        text-align: left;
        justify-content: flex-start;
        gap: var(--icr-space-4);
        padding: var(--icr-space-5);
    }

    :is(#icr-w, .icr-roadmap) .icr-lc {
        padding: var(--icr-space-6) var(--icr-space-5);
    }

    :is(#icr-w, .icr-roadmap) .icr-lo {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    :is(#icr-w, .icr-roadmap) .icr-profile {
        padding: var(--icr-space-5);
    }
}


/* =============================================================================
   21. BREAKPOINT ≥ 641px — tablet
   ============================================================================= */

@media (min-width: 641px) {

    :is(#icr-w, .icr-roadmap) .icr-rh { margin-bottom: var(--icr-space-7); }

    :is(#icr-w, .icr-roadmap) .icr-rh > p { font-size: 17px; }

    :is(#icr-w, .icr-roadmap) .icr-sa-card {
        padding: var(--icr-space-6) var(--icr-space-5);
    }

    :is(#icr-w, .icr-roadmap) .icr-sa-stats {
        flex-direction: row;
    }

    :is(#icr-w, .icr-roadmap) .icr-sa-stat-val { font-size: 30px; }

    :is(#icr-w, .icr-roadmap) .icr-sa-progress-steps {
        flex-wrap: nowrap;
        gap: var(--icr-space-4);
    }

    :is(#icr-w, .icr-roadmap) .icr-sa-step { font-size: 13px; }

    :is(#icr-w, .icr-roadmap) .icr-badges-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    :is(#icr-w, .icr-roadmap) .icr-next-badge {
        flex-wrap: nowrap;
    }

    :is(#icr-w, .icr-roadmap) .icr-badge-legend {
        padding: var(--icr-space-5);
    }

    :is(#icr-w, .icr-roadmap) .icr-legend-item {
        padding: var(--icr-space-3) var(--icr-space-4);
        gap: var(--icr-space-4);
    }

    :is(#icr-w, .icr-roadmap) .icr-legend-icon-wrap {
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: var(--icr-radius-lg);
    }

    :is(#icr-w, .icr-roadmap) .icr-legend-icon-wrap svg { width: 30px; height: 30px; }
    :is(#icr-w, .icr-roadmap) .icr-legend-name { font-size: 17px; }
    :is(#icr-w, .icr-roadmap) .icr-legend-req  { font-size: 14px; }
    :is(#icr-w, .icr-roadmap) .icr-legend-title { font-size: 18px; }

    :is(#icr-w, .icr-roadmap) .icr-profile-header {
        flex-direction: row;
        text-align: left;
        gap: var(--icr-space-5);
    }

    :is(#icr-w, .icr-roadmap) .icr-profile-actions { justify-content: flex-start; }

    :is(#icr-w, .icr-roadmap) .icr-badge-showcase-title { font-size: 22px; }
}


/* =============================================================================
   22. BREAKPOINT ≥ 769px — desktop
   ============================================================================= */

@media (min-width: 769px) {

    :is(#icr-w, .icr-roadmap) {
        padding: var(--icr-space-7) var(--icr-space-5) 72px;
    }

    :is(#icr-w, .icr-roadmap) .icr-tl { padding-left: 66px; }

    :is(#icr-w, .icr-roadmap) .icr-pm {
        left: -66px;
        width: 48px;
    }

    :is(#icr-w, .icr-roadmap) .icr-pd {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    :is(#icr-w, .icr-roadmap) .icr-pc {
        padding: var(--icr-space-5) var(--icr-space-6);
        border-radius: var(--icr-radius-xl);
    }

    :is(#icr-w, .icr-roadmap) .icr-pc h3 { font-size: 21px; }

    :is(#icr-w, .icr-roadmap) .icr-phead { gap: var(--icr-space-4); }

    :is(#icr-w, .icr-roadmap) .icr-pi { width: 34px; height: 34px; font-size: 24px; }

    :is(#icr-w, .icr-roadmap) .icr-mr {
        flex-wrap: nowrap;
        padding: var(--icr-space-3) var(--icr-space-3);
        gap: var(--icr-space-4);
    }

    :is(#icr-w, .icr-roadmap) .icr-md { width: 28px; height: 28px; }

    :is(#icr-w, .icr-roadmap) .icr-me {
        width: auto;
        min-width: 220px;
        margin-inline: auto;
    }

    :is(#icr-w, .icr-roadmap) .icr-expand-text { font-size: 13px; }

    :is(#icr-w, .icr-roadmap) .icr-tw {
        padding: var(--icr-space-2) var(--icr-space-4) var(--icr-space-3) 50px;
    }

    :is(#icr-w, .icr-roadmap) .icr-tree--d1,
    :is(#icr-w, .icr-roadmap) .icr-tree--d2,
    :is(#icr-w, .icr-roadmap) .icr-tree--d3 {
        padding-left: 28px;
    }

    :is(#icr-w, .icr-roadmap) .icr-tree--d1::before,
    :is(#icr-w, .icr-roadmap) .icr-tree--d2::before,
    :is(#icr-w, .icr-roadmap) .icr-tree--d3::before {
        left: 10px;
    }

    :is(#icr-w, .icr-roadmap) .icr-tree--d1 > .icr-tree-node > .icr-tree-row::before,
    :is(#icr-w, .icr-roadmap) .icr-tree--d2 > .icr-tree-node > .icr-tree-row::before,
    :is(#icr-w, .icr-roadmap) .icr-tree--d3 > .icr-tree-node > .icr-tree-row::before {
        left: -18px;
        width: 12px;
    }

    :is(#icr-w, .icr-roadmap) .icr-tree-label,
    :is(#icr-w, .icr-roadmap) .icr-tree-link { font-size: 14px; }

    :is(#icr-w, .icr-roadmap) .icr-tree-node--course > .icr-tree-row .icr-tree-label,
    :is(#icr-w, .icr-roadmap) .icr-tree-node--course > .icr-tree-row .icr-tree-link {
        font-size: 14px;
    }

    /* Con il mouse il pulsante "apri lezione" appare al passaggio sulla riga */
    :is(#icr-w, .icr-roadmap) .icr-lesson-open-btn {
        opacity: 0;
        transform: translateX(-6px);
        pointer-events: none;
    }

    :is(#icr-w, .icr-roadmap) .icr-tree-row:hover .icr-lesson-open-btn,
    :is(#icr-w, .icr-roadmap) .icr-lesson-open-btn:focus,
    :is(#icr-w, .icr-roadmap) .icr-lesson-open-btn:focus-visible {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    :is(#icr-w, .icr-roadmap) .icr-welcome-greeting { font-size: 21px; }

    :is(#icr-w, .icr-roadmap) .icr-profile {
        padding: var(--icr-space-6);
        border-radius: 24px;
    }

    :is(#icr-w, .icr-roadmap) .icr-profile-name { font-size: 24px; }

    :is(#icr-w, .icr-roadmap) .icr-pq-text { font-size: 17px; }

    :is(#icr-w, .icr-roadmap) .icr-profile-quote-text { font-size: 18px; }

    :is(#icr-w, .icr-roadmap) .icr-sa-header-text h3 { font-size: 20px; }

    :is(#icr-w, .icr-roadmap) .icr-lg { min-height: 60vh; }

    :is(#icr-w, .icr-roadmap) .icr-lc {
        padding: var(--icr-space-7) 40px;
        border-radius: 24px;
    }

    :is(#icr-w, .icr-roadmap) .icr-lh h2 { font-size: 28px; }

    :is(#icr-w, .icr-roadmap) .icr-email-toast {
        left: auto;
        right: var(--icr-space-5);
        bottom: var(--icr-space-5);
    }
}


/* =============================================================================
   23. DISPOSITIVI SENZA PUNTATORE FINE
   Se non c'è il mouse, gli affordance basati su :hover restano sempre visibili.
   ============================================================================= */

@media (hover: none) {
    :is(#icr-w, .icr-roadmap) .icr-lesson-open-btn {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    :is(#icr-w, .icr-roadmap) .icr-pc:hover {
        transform: none;
        box-shadow: var(--icr-shadow);
    }

    :is(#icr-w, .icr-roadmap) .icr-badge:hover {
        transform: none;
    }
}


/* =============================================================================
   24. RIDUZIONE DEL MOVIMENTO
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {

    :is(#icr-w, .icr-roadmap),
    :is(#icr-w, .icr-roadmap) *,
    :is(#icr-w, .icr-roadmap) *::before,
    :is(#icr-w, .icr-roadmap) *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    /* Il contenuto in attesa di reveal deve restare visibile */
    :is(#icr-w, .icr-roadmap).icr-anim-on .icr-ph,
    :is(#icr-w, .icr-roadmap).icr-anim-on .icr-sa-card,
    :is(#icr-w, .icr-roadmap).icr-anim-on .icr-op,
    :is(#icr-w, .icr-roadmap).icr-anim-on .icr-welcome-banner,
    :is(#icr-w, .icr-roadmap).icr-anim-on .icr-badge-legend,
    :is(#icr-w, .icr-roadmap).icr-anim-on .icr-next-badges,
    :is(#icr-w, .icr-roadmap).icr-anim-on .icr-achievements,
    :is(#icr-w, .icr-roadmap) .icr-reveal {
        opacity: 1;
        transform: none;
    }
}


/* =============================================================================
   25. ALTO CONTRASTO FORZATO
   ============================================================================= */

@media (forced-colors: active) {
    :is(#icr-w, .icr-roadmap) .icr-pc,
    :is(#icr-w, .icr-roadmap) .icr-sa-card,
    :is(#icr-w, .icr-roadmap) .icr-profile,
    :is(#icr-w, .icr-roadmap) .icr-badge,
    :is(#icr-w, .icr-roadmap) .icr-lc,
    :is(#icr-w, .icr-roadmap) .icr-welcome-banner {
        border: 1px solid CanvasText;
    }

    :is(#icr-w, .icr-roadmap) .icr-lesson-open-btn,
    :is(#icr-w, .icr-roadmap) .icr-sa-btn,
    :is(#icr-w, .icr-roadmap) .icr-lbtn {
        border: 1px solid ButtonText;
    }
}


/* =============================================================================
   26. STAMPA — la roadmap viene stampata come report del percorso
   ============================================================================= */

@media print {

    :is(#icr-w, .icr-roadmap) {
        max-width: none;
        padding: 0;
        color: var(--icr-black);
        background: var(--icr-white);
        font-size: 11pt;
    }

    :is(#icr-w, .icr-roadmap) .icr-lesson-open-btn,
    :is(#icr-w, .icr-roadmap) .icr-sa-btn,
    :is(#icr-w, .icr-roadmap) .icr-me,
    :is(#icr-w, .icr-roadmap) .icr-tree-toggle,
    :is(#icr-w, .icr-roadmap) .icr-profile-actions,
    :is(#icr-w, .icr-roadmap) .icr-email-toast,
    :is(#icr-w, .icr-roadmap) .icr-lg {
        display: none !important;
    }

    :is(#icr-w, .icr-roadmap) .icr-pc,
    :is(#icr-w, .icr-roadmap) .icr-sa-card,
    :is(#icr-w, .icr-roadmap) .icr-profile,
    :is(#icr-w, .icr-roadmap) .icr-next-badges,
    :is(#icr-w, .icr-roadmap) .icr-badge-legend {
        box-shadow: none;
        background: var(--icr-white);
        color: var(--icr-black);
        border: 1px solid var(--icr-border-strong);
        border-radius: 0;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    :is(#icr-w, .icr-roadmap) .icr-badge-legend .icr-legend-name,
    :is(#icr-w, .icr-roadmap) .icr-badge-legend .icr-legend-req,
    :is(#icr-w, .icr-roadmap) .icr-legend-title {
        color: var(--icr-black);
    }

    /* Gli alberi vanno stampati aperti */
    :is(#icr-w, .icr-roadmap) .icr-tree-children[hidden],
    :is(#icr-w, .icr-roadmap) .icr-mod-tree-wrap[hidden] {
        display: block !important;
    }

    :is(#icr-w, .icr-roadmap) .icr-reveal,
    :is(#icr-w, .icr-roadmap).icr-anim-on .icr-ph {
        opacity: 1;
        transform: none;
    }
}

/* 3.2.8 — Roadmap studente: maggiore gerarchia, profondità e leggibilità */
:is(#icr-w,.icr-roadmap){max-width:1080px;padding-top:32px}.icr-hero,.icr-top-card{background:linear-gradient(145deg,var(--icr-surface) 0%,color-mix(in srgb,var(--icr-primary) 5%,var(--icr-surface)) 100%);border:1px solid color-mix(in srgb,var(--icr-primary) 15%,var(--icr-border));box-shadow:0 18px 48px color-mix(in srgb,var(--icr-primary) 10%,transparent)}.icr-title{letter-spacing:-.04em}.icr-phase{position:relative;border:1px solid var(--icr-border);box-shadow:var(--icr-shadow);overflow:hidden}.icr-phase:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--pc,var(--icr-primary));border-radius:5px}.icr-phase:hover{transform:translateY(-2px);box-shadow:var(--icr-shadow-hover)}.icr-phase-head{background:linear-gradient(90deg,color-mix(in srgb,var(--pc,var(--icr-primary)) 8%,var(--icr-surface)),var(--icr-surface) 55%)}.icr-module{border:1px solid var(--icr-border);border-radius:14px;background:var(--icr-surface-raised);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.icr-module:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--pc,var(--icr-primary)) 35%,var(--icr-border));box-shadow:0 10px 28px color-mix(in srgb,var(--pc,var(--icr-primary)) 9%,transparent)}.icr-progress-track{height:10px;border-radius:999px;overflow:hidden;background:var(--icr-surface-3)}.icr-progress-fill{border-radius:999px;box-shadow:0 0 16px color-mix(in srgb,var(--icr-primary) 28%,transparent)}.icr-stat,.icr-mini-stat{border:1px solid var(--icr-border);background:var(--icr-surface);box-shadow:var(--icr-shadow-sm)}.icr-badge-current{box-shadow:0 12px 34px color-mix(in srgb,var(--bc,var(--icr-gold)) 22%,transparent)}@media(max-width:600px){:is(#icr-w,.icr-roadmap){padding:16px 10px 28px}.icr-phase{border-radius:16px}.icr-phase-head{padding:18px 16px}.icr-module{border-radius:12px}}

/* =============================================================================
   3.3.1 — ROADMAP IMMERSIVE UI
   Un redesign ad alto impatto applicato alle classi reali generate dal PHP.
   ============================================================================= */
:is(#icr-w, .icr-roadmap) {
    max-width: 1160px;
    padding: clamp(22px, 4vw, 54px) clamp(14px, 3vw, 38px) 72px;
    isolation: isolate;
}
:is(#icr-w, .icr-roadmap)::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: 34px;
    background:
        radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--icr-primary) 18%, transparent), transparent 31%),
        radial-gradient(circle at 94% 17%, color-mix(in srgb, var(--icr-teal) 13%, transparent), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--icr-primary) 4%, var(--icr-surface-2)), var(--icr-surface-2) 42%, transparent 100%);
    border: 1px solid color-mix(in srgb, var(--icr-primary) 9%, var(--icr-border));
}

:is(#icr-w, .icr-roadmap) .icr-rh {
    position: relative;
    margin: 8px auto 34px;
    padding: clamp(30px, 5vw, 64px) 20px clamp(26px, 4vw, 48px);
    overflow: hidden;
}
:is(#icr-w, .icr-roadmap) .icr-rh::before {
    content: "PERCORSO DIDATTICO";
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin-bottom: 16px;
    padding: 6px 13px;
    border: 1px solid color-mix(in srgb, var(--icr-primary) 24%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--icr-primary) 8%, var(--icr-surface));
    color: var(--icr-primary-text);
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: .16em;
}
:is(#icr-w, .icr-roadmap) .icr-rh::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -200px;
    top: -230px;
    border: 54px solid color-mix(in srgb, var(--icr-primary) 8%, transparent);
    border-radius: 50%;
    pointer-events: none;
}
:is(#icr-w, .icr-roadmap) .icr-rh h2 {
    max-width: 900px;
    margin: 0 auto 14px;
    font-size: clamp(34px, 6vw, 64px);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.055em;
    text-wrap: balance;
    background: linear-gradient(115deg, var(--icr-text) 8%, var(--icr-primary) 58%, var(--icr-teal-dark));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
:is(#icr-w, .icr-roadmap) .icr-rh > p {
    font-size: clamp(15px, 2vw, 19px);
    color: var(--icr-text-muted);
}

:is(#icr-w, .icr-roadmap) .icr-welcome-banner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    text-align: left;
    gap: 24px;
    padding: clamp(24px, 4vw, 38px);
    margin-bottom: 24px;
    overflow: hidden;
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--icr-primary) 15%, var(--icr-surface)) 0%, var(--icr-surface) 58%, color-mix(in srgb, var(--icr-teal) 9%, var(--icr-surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--icr-primary) 22%, var(--icr-border));
    border-radius: 25px;
    box-shadow: 0 22px 60px color-mix(in srgb, var(--icr-primary) 13%, transparent);
}
:is(#icr-w, .icr-roadmap) .icr-welcome-banner::after {
    content: "";
    position: absolute;
    inset: auto -70px -100px auto;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--icr-primary) 8%, transparent);
}
:is(#icr-w, .icr-roadmap) .icr-welcome-icon {
    order: 2;
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: 28px;
    background: color-mix(in srgb, var(--icr-primary) 11%, var(--icr-surface));
    border: 1px solid color-mix(in srgb, var(--icr-primary) 22%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 70%, transparent), 0 14px 35px color-mix(in srgb, var(--icr-primary) 14%, transparent);
}
:is(#icr-w, .icr-roadmap) .icr-welcome-greeting {
    font-size: clamp(21px, 3vw, 29px);
    font-weight: 900;
    letter-spacing: -.035em;
}
:is(#icr-w, .icr-roadmap) .icr-welcome-quote {
    max-width: 680px;
    margin-top: 13px;
    padding-top: 13px;
}

:is(#icr-w, .icr-roadmap) .icr-profile {
    padding: clamp(24px, 4vw, 42px);
    border-radius: 26px;
    border: 1px solid color-mix(in srgb, var(--icr-primary) 13%, var(--icr-border));
    background: linear-gradient(145deg, var(--icr-surface), color-mix(in srgb, var(--icr-primary) 3%, var(--icr-surface)));
    box-shadow: 0 24px 70px color-mix(in srgb, var(--icr-black) 9%, transparent);
}
:is(#icr-w, .icr-roadmap) .icr-profile-avatar {
    width: 72px;
    height: 72px;
    border: 5px solid var(--icr-surface);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--icr-primary) 30%, transparent), 0 12px 30px color-mix(in srgb, var(--icr-primary) 20%, transparent);
}
:is(#icr-w, .icr-roadmap) .icr-profile-name {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 900;
    letter-spacing: -.035em;
}
:is(#icr-w, .icr-roadmap) .icr-profile-btn--edit {
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--icr-text);
    color: var(--icr-surface);
    border-color: var(--icr-text);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--icr-black) 14%, transparent);
}
:is(#icr-w, .icr-roadmap) .icr-profile-quote-box {
    margin-top: 28px;
    padding: 28px 28px 25px;
    border-radius: 20px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--icr-primary) 7%, var(--icr-surface)), color-mix(in srgb, var(--icr-teal) 5%, var(--icr-surface)));
    border: 1px solid color-mix(in srgb, var(--icr-primary) 12%, var(--icr-border));
}

:is(#icr-w, .icr-roadmap) .icr-top-notice {
    max-width: 820px;
    margin: 0 auto 34px;
    padding: 20px 22px;
    border-radius: 18px;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--icr-gold) 8%, transparent);
}

:is(#icr-w, .icr-roadmap) .icr-tl {
    padding-left: 56px;
}
:is(#icr-w, .icr-roadmap) .icr-pm {
    left: -56px;
    width: 42px;
}
:is(#icr-w, .icr-roadmap) .icr-pd {
    width: 42px;
    height: 42px;
    font-size: 16px;
}
:is(#icr-w, .icr-roadmap) .icr-pd::before {
    inset: 0;
    border-width: 2px;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--pc, var(--icr-primary)) 18%, transparent);
}
:is(#icr-w, .icr-roadmap) .icr-pl {
    width: 4px;
    margin-top: 4px;
    background: linear-gradient(var(--icr-surface-3), color-mix(in srgb, var(--icr-primary) 8%, var(--icr-surface-3)));
}
:is(#icr-w, .icr-roadmap) .icr-ph {
    margin-bottom: 20px;
}
:is(#icr-w, .icr-roadmap) .icr-pc {
    padding: clamp(22px, 3vw, 34px);
    margin-bottom: 12px;
    border-radius: 24px;
    box-shadow: 0 16px 45px color-mix(in srgb, var(--icr-black) 7%, transparent);
}
:is(#icr-w, .icr-roadmap) .icr-pc::before {
    width: 6px;
    height: auto;
    top: 0;
    bottom: 0;
    right: auto;
    opacity: 1;
    background: linear-gradient(180deg, var(--pc, var(--icr-primary)), color-mix(in srgb, var(--pc, var(--icr-primary)) 45%, var(--icr-surface)));
}
:is(#icr-w, .icr-roadmap) .icr-ph--a .icr-pc {
    background: linear-gradient(135deg, color-mix(in srgb, var(--pc, var(--icr-primary)) 7%, var(--icr-surface)), var(--icr-surface) 48%);
    box-shadow: 0 20px 55px color-mix(in srgb, var(--pc, var(--icr-primary)) 13%, transparent);
}
:is(#icr-w, .icr-roadmap) .icr-pi {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    font-size: 25px;
    background: color-mix(in srgb, var(--pc, var(--icr-primary)) 10%, var(--icr-surface));
}
:is(#icr-w, .icr-roadmap) .icr-pc h3 {
    font-size: clamp(19px, 2.5vw, 25px);
    font-weight: 900;
    letter-spacing: -.035em;
}
:is(#icr-w, .icr-roadmap) .icr-pbg {
    padding: 8px 13px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc, var(--icr-primary)) 10%, transparent);
}
:is(#icr-w, .icr-roadmap) .icr-pbar {
    height: 11px;
    margin: 20px 0 24px;
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--icr-black) 7%, transparent);
}
:is(#icr-w, .icr-roadmap) .icr-pbfill {
    box-shadow: 0 0 20px color-mix(in srgb, var(--pc, var(--icr-primary)) 26%, transparent);
}
:is(#icr-w, .icr-roadmap) .icr-mods {
    gap: 10px;
}
:is(#icr-w, .icr-roadmap) .icr-mod {
    padding: 0;
    border: 1px solid var(--icr-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--icr-surface-raised) 94%, var(--pc, var(--icr-primary)));
    overflow: hidden;
}
:is(#icr-w, .icr-roadmap) .icr-mod:hover {
    background: var(--icr-surface);
    border-color: color-mix(in srgb, var(--pc, var(--icr-primary)) 33%, var(--icr-border));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--pc, var(--icr-primary)) 9%, transparent);
    transform: translateY(-1px);
}
:is(#icr-w, .icr-roadmap) .icr-mr {
    min-height: 64px;
    padding: 15px 17px;
}

@media (min-width: 760px) {
    :is(#icr-w, .icr-roadmap) .icr-welcome-banner { grid-template-columns: 1fr auto; }
    :is(#icr-w, .icr-roadmap) .icr-profile-header { align-items: center; }
}
@media (max-width: 759px) {
    :is(#icr-w, .icr-roadmap)::before { border-radius: 22px; }
    :is(#icr-w, .icr-roadmap) .icr-rh { padding: 28px 6px 24px; }
    :is(#icr-w, .icr-roadmap) .icr-welcome-banner { grid-template-columns: 1fr; }
    :is(#icr-w, .icr-roadmap) .icr-welcome-icon { order: -1; width: 66px; height: 66px; border-radius: 20px; }
    :is(#icr-w, .icr-roadmap) .icr-tl { padding-left: 40px; }
    :is(#icr-w, .icr-roadmap) .icr-pm { left: -40px; width: 30px; }
    :is(#icr-w, .icr-roadmap) .icr-pd { width: 30px; height: 30px; font-size: 14px; }
    :is(#icr-w, .icr-roadmap) .icr-pc { padding: 20px 17px; border-radius: 19px; }
}
@media (prefers-reduced-motion: no-preference) {
    :is(#icr-w, .icr-roadmap) .icr-pc,
    :is(#icr-w, .icr-roadmap) .icr-welcome-banner,
    :is(#icr-w, .icr-roadmap) .icr-profile { transition: transform .25s var(--icr-ease), box-shadow .25s var(--icr-ease), border-color .25s var(--icr-ease); }
}

/* ==========================================================
   3.3.2 — Roadmap "Ippocrate Prestige"
   Palette ad alto impatto: verde bosco, oro antico, avorio.
   ========================================================== */
:is(#icr-w, .icr-roadmap) {
    --icr-primary: #0b5d3b;
    --icr-primary-dark: #073d29;
    --icr-teal: #16734f;
    --icr-teal-dark: #0b4d36;
    --icr-gold: #c9a227;
    --icr-gold-deep: #9b7612;
    --icr-text: #15231d;
    --icr-text-muted: #68736d;
    --icr-surface: #fffdf7;
    --icr-surface-raised: #ffffff;
    --icr-surface-2: #f7f3e8;
    --icr-surface-3: #ebe5d5;
    --icr-border: #ddd5c2;
    background:
        radial-gradient(circle at 12% 4%, rgba(201,162,39,.13), transparent 24%),
        radial-gradient(circle at 92% 18%, rgba(11,93,59,.12), transparent 26%),
        linear-gradient(180deg, #f8f3e7 0%, #fffdf8 38%, #f5efe2 100%);
    border: 1px solid rgba(155,118,18,.22);
    box-shadow: 0 30px 90px rgba(38,46,39,.15);
}
:is(#icr-w, .icr-roadmap)::before {
    background:
        linear-gradient(135deg, rgba(201,162,39,.12), transparent 34%),
        linear-gradient(315deg, rgba(11,93,59,.10), transparent 36%);
}
:is(#icr-w, .icr-roadmap) .icr-rh {
    position: relative;
    margin: 0 -1px 30px;
    padding: clamp(52px, 8vw, 92px) 24px clamp(42px, 6vw, 72px);
    border-radius: 28px 28px 0 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 84% 18%, rgba(201,162,39,.28), transparent 24%),
        linear-gradient(135deg, #062f20 0%, #0b5d3b 52%, #143e2f 100%);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.10), 0 24px 55px rgba(7,61,41,.22);
}
:is(#icr-w, .icr-roadmap) .icr-rh::before {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    right: -130px;
    top: -180px;
    border: 42px solid rgba(201,162,39,.13);
    border-radius: 50%;
}
:is(#icr-w, .icr-roadmap) .icr-rh::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 120px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 4px 4px 0 0;
    background: linear-gradient(90deg, transparent, #e7c75c, transparent);
}
:is(#icr-w, .icr-roadmap) .icr-rh h2 {
    color: #fff;
    background: none;
    -webkit-text-fill-color: currentColor;
    text-shadow: 0 7px 26px rgba(0,0,0,.28);
}
:is(#icr-w, .icr-roadmap) .icr-rh > p {
    color: rgba(255,255,255,.78);
}
:is(#icr-w, .icr-roadmap) .icr-rh .icr-kicker,
:is(#icr-w, .icr-roadmap) .icr-rh [class*="eyebrow"] {
    color: #f3d36d;
    border-color: rgba(243,211,109,.38);
    background: rgba(255,255,255,.08);
}
:is(#icr-w, .icr-roadmap) .icr-welcome-banner {
    color: #fff;
    background:
        linear-gradient(120deg, #103f2e 0%, #0b5d3b 58%, #174f3a 100%);
    border: 1px solid rgba(231,199,92,.48);
    box-shadow: 0 22px 54px rgba(7,61,41,.24), inset 0 1px 0 rgba(255,255,255,.13);
}
:is(#icr-w, .icr-roadmap) .icr-welcome-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, rgba(255,255,255,.08), transparent 35%, rgba(231,199,92,.10));
}
:is(#icr-w, .icr-roadmap) .icr-welcome-banner::after {
    background: rgba(231,199,92,.12);
}
:is(#icr-w, .icr-roadmap) .icr-welcome-greeting,
:is(#icr-w, .icr-roadmap) .icr-welcome-msg,
:is(#icr-w, .icr-roadmap) .icr-welcome-quote,
:is(#icr-w, .icr-roadmap) .icr-welcome-quote em {
    color: #fff;
}
:is(#icr-w, .icr-roadmap) .icr-welcome-quote {
    border-color: rgba(231,199,92,.30);
    color: rgba(255,255,255,.78);
}
:is(#icr-w, .icr-roadmap) .icr-welcome-quote strong,
:is(#icr-w, .icr-roadmap) .icr-welcome-msg strong {
    color: #f0cf63;
}
:is(#icr-w, .icr-roadmap) .icr-welcome-icon {
    color: #f0cf63;
    background: rgba(255,255,255,.08);
    border-color: rgba(240,207,99,.46);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 14px 35px rgba(0,0,0,.22);
}
:is(#icr-w, .icr-roadmap) .icr-profile {
    background: linear-gradient(145deg, #fffef9, #f6f0df);
    border-color: rgba(155,118,18,.30);
    box-shadow: 0 24px 64px rgba(53,45,22,.14);
}
:is(#icr-w, .icr-roadmap) .icr-profile::before {
    content: "";
    display: block;
    height: 5px;
    margin: calc(clamp(24px, 4vw, 42px) * -1) calc(clamp(24px, 4vw, 42px) * -1) 28px;
    border-radius: 26px 26px 0 0;
    background: linear-gradient(90deg, #0b5d3b, #c9a227, #0b5d3b);
}
:is(#icr-w, .icr-roadmap) .icr-profile-avatar {
    box-shadow: 0 0 0 3px #c9a227, 0 14px 34px rgba(11,93,59,.22);
}
:is(#icr-w, .icr-roadmap) .icr-profile-btn--edit {
    background: linear-gradient(135deg, #0b5d3b, #073d29);
    border-color: #073d29;
    color: #fff;
}
:is(#icr-w, .icr-roadmap) .icr-profile-quote-box {
    background: linear-gradient(135deg, #f8f1d9, #fffdf7);
    border-color: rgba(201,162,39,.35);
}
:is(#icr-w, .icr-roadmap) .icr-top-notice {
    background: linear-gradient(135deg, #fff8dc, #f7edc5);
    border-color: rgba(201,162,39,.48);
    box-shadow: 0 12px 30px rgba(155,118,18,.12);
}
:is(#icr-w, .icr-roadmap) .icr-pl {
    background: linear-gradient(#c9a227, #0b5d3b 48%, #d6cba9);
}
:is(#icr-w, .icr-roadmap) .icr-pd::before {
    background: #fffdf7;
    border-color: #c9a227;
    box-shadow: 0 9px 25px rgba(11,93,59,.20);
}
:is(#icr-w, .icr-roadmap) .icr-pc {
    background: linear-gradient(145deg, #fffefb, #f8f3e7);
    border: 1px solid rgba(155,118,18,.22);
    box-shadow: 0 18px 48px rgba(49,44,29,.12);
}
:is(#icr-w, .icr-roadmap) .icr-pc::before {
    background: linear-gradient(180deg, #c9a227, #0b5d3b);
}
:is(#icr-w, .icr-roadmap) .icr-ph--a .icr-pc {
    background:
        radial-gradient(circle at 96% 8%, rgba(201,162,39,.12), transparent 28%),
        linear-gradient(145deg, #fffef8, #f3ead1);
    border-color: rgba(201,162,39,.48);
    box-shadow: 0 24px 62px rgba(11,93,59,.16);
}
:is(#icr-w, .icr-roadmap) .icr-pi {
    color: #0b5d3b;
    background: #f4e7b5;
    border: 1px solid rgba(201,162,39,.35);
}
:is(#icr-w, .icr-roadmap) .icr-pbg {
    color: #0b5d3b;
    background: #efe5c6;
}
:is(#icr-w, .icr-roadmap) .icr-pbar {
    background: #ded5bc;
}
:is(#icr-w, .icr-roadmap) .icr-pbfill {
    background: linear-gradient(90deg, #0b5d3b, #c9a227);
    box-shadow: 0 0 20px rgba(201,162,39,.34);
}
:is(#icr-w, .icr-roadmap) .icr-mod {
    background: rgba(255,255,255,.82);
    border-color: rgba(82,94,84,.17);
}
:is(#icr-w, .icr-roadmap) .icr-mod:hover {
    border-color: rgba(201,162,39,.55);
    box-shadow: 0 12px 30px rgba(11,93,59,.12);
}
:is(#icr-w, .icr-roadmap) a {
    color: #0b5d3b;
}
:is(#icr-w, .icr-roadmap) a:hover {
    color: #9b7612;
}
@media (max-width: 759px) {
    :is(#icr-w, .icr-roadmap) .icr-rh { border-radius: 22px 22px 0 0; }
}

/* ==========================================================
   3.4.0 — Roadmap / Area Studente complete redesign
   ========================================================== */
:is(#icr-w,.icr-roadmap){--ais-green:#0b4a34;--ais-green2:#126346;--ais-gold:#c9a34c;--ais-ink:#16221b;--ais-cream:#f6f0e3;max-width:1120px;margin:34px auto 70px;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;padding:0 22px}
:is(#icr-w,.icr-roadmap)::before{display:none}
:is(#icr-w,.icr-roadmap) .icr-top-notice{margin:0 auto 18px;max-width:920px;border:1px solid rgba(201,163,76,.48);border-radius:14px;background:#fff9e8;box-shadow:0 8px 24px rgba(74,55,15,.08)}
:is(#icr-w,.icr-roadmap) .icr-rh{margin:0 0 -76px;padding:72px 28px 150px;border:0;border-radius:30px;background:radial-gradient(circle at 84% 16%,rgba(211,177,90,.34),transparent 22%),radial-gradient(circle at 7% 90%,rgba(255,255,255,.12),transparent 26%),linear-gradient(135deg,#092f23 0%,#0c5138 55%,#183d2f 100%);box-shadow:0 32px 78px rgba(8,47,34,.25);isolation:isolate}
:is(#icr-w,.icr-roadmap) .icr-rh:before{width:310px;height:310px;right:-92px;top:-132px;border:1px solid rgba(255,255,255,.14);box-shadow:0 0 0 38px rgba(201,163,76,.08),0 0 0 76px rgba(255,255,255,.035)}
:is(#icr-w,.icr-roadmap) .icr-rh:after{width:80px;height:3px;background:var(--ais-gold)}
:is(#icr-w,.icr-roadmap) .icr-rh h2{font-size:clamp(42px,6vw,72px);line-height:.96;max-width:800px;margin-inline:auto;letter-spacing:-.055em;color:#fff;text-shadow:none}
:is(#icr-w,.icr-roadmap) .icr-rh>p{font-size:18px;color:rgba(255,255,255,.72);margin-top:20px}
:is(#icr-w,.icr-roadmap) .icr-welcome-banner{position:relative;z-index:3;margin:0 34px 22px;padding:30px;border-radius:22px;background:rgba(255,255,255,.96);color:var(--ais-ink);border:1px solid rgba(255,255,255,.85);box-shadow:0 24px 55px rgba(11,47,34,.18);backdrop-filter:blur(14px)}
:is(#icr-w,.icr-roadmap) .icr-welcome-greeting{color:var(--ais-ink);font-size:23px}
:is(#icr-w,.icr-roadmap) .icr-welcome-msg,:is(#icr-w,.icr-roadmap) .icr-welcome-quote,:is(#icr-w,.icr-roadmap) .icr-welcome-quote em{color:#657169}
:is(#icr-w,.icr-roadmap) .icr-welcome-quote strong{color:var(--ais-green2)}
:is(#icr-w,.icr-roadmap) .icr-welcome-icon{background:linear-gradient(135deg,#f4e7bb,#fff);border-color:rgba(201,163,76,.55);color:var(--ais-green);box-shadow:0 12px 30px rgba(45,69,54,.12)}
:is(#icr-w,.icr-roadmap) .icr-profile{margin:0 34px 28px;padding:34px;border-radius:24px;background:#fff;border:1px solid rgba(11,74,52,.10);box-shadow:0 20px 55px rgba(25,46,33,.10)}
:is(#icr-w,.icr-roadmap) .icr-profile:before{height:4px;background:linear-gradient(90deg,var(--ais-green),var(--ais-gold),var(--ais-green))}
:is(#icr-w,.icr-roadmap) .icr-profile-quote-box{border-radius:18px;background:#f7f4ec;border-color:rgba(201,163,76,.30)}
:is(#icr-w,.icr-roadmap) .icr-profile-btn--edit{border-radius:11px;padding:11px 17px;background:var(--ais-green);box-shadow:0 8px 20px rgba(11,74,52,.17)}
:is(#icr-w,.icr-roadmap) .icr-tl{margin-top:34px;padding-left:74px}
:is(#icr-w,.icr-roadmap) .icr-pl{left:35px;width:3px;background:linear-gradient(var(--ais-gold),var(--ais-green),rgba(11,74,52,.12))}
:is(#icr-w,.icr-roadmap) .icr-pm{left:-74px;width:72px}
:is(#icr-w,.icr-roadmap) .icr-pd{width:54px;height:54px;border:0;background:#fff;color:var(--ais-green);font-size:20px;font-weight:800;box-shadow:0 0 0 5px #f6f0e3,0 12px 30px rgba(11,74,52,.17)}
:is(#icr-w,.icr-roadmap) .icr-pd:before{display:none}
:is(#icr-w,.icr-roadmap) .icr-pc{padding:30px;border-radius:22px;background:#fff;border:1px solid rgba(11,74,52,.10);box-shadow:0 16px 45px rgba(24,45,32,.09);overflow:hidden}
:is(#icr-w,.icr-roadmap) .icr-pc:before{width:5px;background:linear-gradient(var(--ais-gold),var(--ais-green))}
:is(#icr-w,.icr-roadmap) .icr-ph--a .icr-pc{background:linear-gradient(145deg,#fff,#fbf6e9);border-color:rgba(201,163,76,.55);box-shadow:0 24px 58px rgba(11,74,52,.13)}
:is(#icr-w,.icr-roadmap) .icr-phead h3,:is(#icr-w,.icr-roadmap) .icr-pt{font-size:24px;color:var(--ais-ink)}
:is(#icr-w,.icr-roadmap) .icr-pbar{height:10px;border-radius:99px;background:#ecece7;overflow:hidden}
:is(#icr-w,.icr-roadmap) .icr-pbfill{background:linear-gradient(90deg,var(--ais-green),#2d8460,var(--ais-gold));box-shadow:none}
:is(#icr-w,.icr-roadmap) .icr-mod{margin-top:12px;padding:18px;border-radius:15px;background:#fafbf9;border:1px solid #e5e9e5;box-shadow:none}
:is(#icr-w,.icr-roadmap) .icr-mod:hover{transform:translateY(-2px);background:#fff;border-color:rgba(201,163,76,.62);box-shadow:0 13px 30px rgba(18,55,36,.09)}
:is(#icr-w,.icr-roadmap) button,:is(#icr-w,.icr-roadmap) .button,:is(#icr-w,.icr-roadmap) [class*="btn"]{border-radius:11px}

/* Entrance animations */
.ais-reveal{opacity:0;transform:translateY(24px);transition:opacity .62s cubic-bezier(.2,.8,.2,1),transform .62s cubic-bezier(.2,.8,.2,1)}
.ais-reveal.ais-visible{opacity:1;transform:none}
:is(#icr-w,.icr-roadmap) .icr-pbfill{transform-origin:left;transition:width 1.15s cubic-bezier(.2,.8,.2,1)}
@media(max-width:759px){:is(#icr-w,.icr-roadmap){padding:0 10px;margin-top:16px}:is(#icr-w,.icr-roadmap) .icr-rh{border-radius:22px;padding:48px 18px 120px;margin-bottom:-60px}:is(#icr-w,.icr-roadmap) .icr-rh h2{font-size:40px}:is(#icr-w,.icr-roadmap) .icr-welcome-banner,:is(#icr-w,.icr-roadmap) .icr-profile{margin-left:10px;margin-right:10px}:is(#icr-w,.icr-roadmap) .icr-tl{padding-left:44px}:is(#icr-w,.icr-roadmap) .icr-pl{left:19px}:is(#icr-w,.icr-roadmap) .icr-pm{left:-44px;width:42px}:is(#icr-w,.icr-roadmap) .icr-pd{width:38px;height:38px;font-size:15px}:is(#icr-w,.icr-roadmap) .icr-pc{padding:21px 17px}}
@media(prefers-reduced-motion:reduce){.ais-reveal{opacity:1;transform:none;transition:none!important}}


/* ==========================================================
   4.0.7 — Dashboard/Roadmap modernizzazione ad alto impatto
   Scoped esclusivamente dentro #icr-w / .icr-roadmap.
   ========================================================== */
:is(#icr-w,.icr-roadmap){
  --ais-v47-green:#083f2f;
  --ais-v47-green-2:#0e6045;
  --ais-v47-gold:#c89a36;
  --ais-v47-gold-soft:#f1dfae;
  --ais-v47-cream:#fbf7ee;
  --ais-v47-ink:#17251d;
  max-width:1180px;
}
:is(#icr-w,.icr-roadmap) .icr-rh{
  min-height:430px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  text-align:left;
  padding:72px 70px 150px;
  background:
    linear-gradient(90deg,rgba(5,38,28,.15),transparent 50%),
    radial-gradient(circle at 88% 16%,rgba(240,210,128,.30),transparent 20%),
    radial-gradient(circle at 10% 100%,rgba(255,255,255,.10),transparent 30%),
    linear-gradient(125deg,#052f23 0%,#07533b 62%,#113b2e 100%);
  border-radius:32px;
  box-shadow:0 36px 90px rgba(5,47,33,.27);
}
:is(#icr-w,.icr-roadmap) .icr-rh-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 20px;
  padding:7px 12px;
  border:1px solid rgba(231,195,103,.32);
  border-radius:999px;
  background:rgba(4,45,32,.45);
  color:#efd17b;
  font-size:12px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
}
:is(#icr-w,.icr-roadmap) .icr-rh h2{
  max-width:780px;
  margin:0!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(48px,6vw,78px)!important;
  line-height:.98!important;
  text-align:left!important;
  letter-spacing:-.05em!important;
  background:linear-gradient(115deg,#fff2c4 0%,#e5bf63 45%,#bc8420 74%,#f4d98e 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
:is(#icr-w,.icr-roadmap) .icr-rh>p{
  margin:26px 0 0;
  font-size:18px;
  color:rgba(255,255,255,.78);
}
:is(#icr-w,.icr-roadmap) .icr-rh:after{
  left:70px;
  right:auto;
  bottom:105px;
  width:180px;
  height:2px;
  background:linear-gradient(90deg,#e5bd5b,rgba(229,189,91,0));
}
:is(#icr-w,.icr-roadmap) .icr-welcome-banner{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:24px;
  margin:-78px 38px 26px;
  padding:32px 34px;
  border-radius:24px;
  background:linear-gradient(130deg,rgba(255,255,255,.98),rgba(255,249,232,.96));
  border:1px solid rgba(205,163,68,.28);
  box-shadow:0 25px 64px rgba(11,58,41,.18);
}
:is(#icr-w,.icr-roadmap) .icr-welcome-greeting{
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(23px,3vw,31px)!important;
  line-height:1.12;
  color:var(--ais-v47-green)!important;
}
:is(#icr-w,.icr-roadmap) .icr-welcome-msg{font-size:15px;margin-top:7px}
:is(#icr-w,.icr-roadmap) .icr-welcome-quote{margin-top:18px;padding-top:15px;border-top:1px solid rgba(187,150,68,.18)}
:is(#icr-w,.icr-roadmap) .icr-welcome-icon{
  width:76px;height:76px;border-radius:22px;
  background:linear-gradient(145deg,#0b513c,#073b2d);
  color:#e7c664;
  border:1px solid rgba(223,187,89,.52);
}
:is(#icr-w,.icr-roadmap) .icr-profile{
  display:grid;
  grid-template-columns:minmax(280px,.9fr) minmax(340px,1.25fr);
  gap:28px;
  margin:0 38px 34px;
  padding:34px;
  background:linear-gradient(145deg,#fff,#fffdf8);
}
:is(#icr-w,.icr-roadmap) .icr-profile-header{
  align-items:center;
  padding:4px 8px 4px 0;
  border-right:1px solid rgba(14,77,55,.11);
}
:is(#icr-w,.icr-roadmap) .icr-profile-quote-box{
  margin:0!important;
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:
    radial-gradient(circle at 90% 10%,rgba(201,154,54,.12),transparent 30%),
    #f8f4e9;
}
:is(#icr-w,.icr-roadmap) .icr-profile-quote-text{font-size:18px!important;line-height:1.55!important}
:is(#icr-w,.icr-roadmap) .icr-tl{position:relative;margin-top:42px;padding-left:88px}
:is(#icr-w,.icr-roadmap) .icr-pl{left:38px;width:2px;background:linear-gradient(#d4a83d,#0c5a40 70%,rgba(12,90,64,.08))}
:is(#icr-w,.icr-roadmap) .icr-pm{left:-88px;width:78px}
:is(#icr-w,.icr-roadmap) .icr-pd{
  width:62px!important;height:62px!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,#fffdf5,#f1e4bd)!important;
  color:var(--ais-v47-green)!important;
  box-shadow:0 0 0 6px #f9f5eb,0 14px 32px rgba(10,73,51,.18)!important;
}
:is(#icr-w,.icr-roadmap) .icr-pc{
  padding:0!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background:#fff!important;
  box-shadow:0 18px 48px rgba(16,50,36,.10)!important;
}
:is(#icr-w,.icr-roadmap) .icr-pc:before{display:none!important}
:is(#icr-w,.icr-roadmap) .icr-phead{
  padding:28px 30px 18px;
  background:linear-gradient(100deg,rgba(12,84,59,.07),rgba(204,160,59,.08),transparent 72%);
  border-bottom:1px solid rgba(15,74,53,.08);
}
:is(#icr-w,.icr-roadmap) .icr-pdesc{padding:0 30px;margin:18px 0 0;color:#68746d}
:is(#icr-w,.icr-roadmap) .icr-pbar{margin:20px 30px 0;height:11px;background:#ece9df}
:is(#icr-w,.icr-roadmap) .icr-mods{padding:22px 30px 30px}
:is(#icr-w,.icr-roadmap) .icr-mod{
  padding:20px 22px!important;
  border-radius:16px!important;
  background:#fbfcfa!important;
  border:1px solid rgba(16,82,58,.11)!important;
}
:is(#icr-w,.icr-roadmap) .icr-mod:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(199,151,42,.55)!important;
  box-shadow:0 16px 34px rgba(10,76,53,.11)!important;
}
:is(#icr-w,.icr-roadmap) .icr-pbg{
  min-width:58px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  background:linear-gradient(135deg,#0a513a,#0d6849)!important;
  color:#f6db91!important;
}
:is(#icr-w,.icr-roadmap) .icr-ph--a .icr-pc{
  border:1px solid rgba(202,157,52,.55)!important;
  box-shadow:0 24px 62px rgba(9,78,53,.15)!important;
}
:is(#icr-w,.icr-roadmap) .icr-ph--a .icr-phead:after{
  content:"In corso";
  margin-left:auto;
  padding:6px 10px;
  border-radius:999px;
  background:#f0d993;
  color:#68470c;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
:is(#icr-w,.icr-roadmap) .icr-sa-card{
  border-radius:24px!important;
  border:1px solid rgba(200,154,54,.28)!important;
  background:linear-gradient(145deg,#fff,#fffaf0)!important;
  box-shadow:0 18px 46px rgba(14,64,45,.10)!important;
}
@media(max-width:860px){
  :is(#icr-w,.icr-roadmap) .icr-rh{padding:58px 34px 130px;align-items:center;text-align:center}
  :is(#icr-w,.icr-roadmap) .icr-rh h2{text-align:center!important}
  :is(#icr-w,.icr-roadmap) .icr-rh:after{left:50%;transform:translateX(-50%)}
  :is(#icr-w,.icr-roadmap) .icr-profile{grid-template-columns:1fr}
  :is(#icr-w,.icr-roadmap) .icr-profile-header{border-right:0;border-bottom:1px solid rgba(14,77,55,.11);padding-bottom:24px}
}
@media(max-width:600px){
  :is(#icr-w,.icr-roadmap) .icr-rh{min-height:350px;padding:46px 22px 115px;border-radius:24px}
  :is(#icr-w,.icr-roadmap) .icr-rh h2{font-size:clamp(38px,12vw,54px)!important}
  :is(#icr-w,.icr-roadmap) .icr-welcome-banner,:is(#icr-w,.icr-roadmap) .icr-profile{margin-left:10px;margin-right:10px;padding:23px}
  :is(#icr-w,.icr-roadmap) .icr-tl{padding-left:48px}
  :is(#icr-w,.icr-roadmap) .icr-pm{left:-48px;width:44px}
  :is(#icr-w,.icr-roadmap) .icr-pd{width:40px!important;height:40px!important;border-radius:13px!important}
  :is(#icr-w,.icr-roadmap) .icr-phead{padding:22px 18px 16px}
  :is(#icr-w,.icr-roadmap) .icr-pdesc{padding:0 18px}
  :is(#icr-w,.icr-roadmap) .icr-pbar{margin-left:18px;margin-right:18px}
  :is(#icr-w,.icr-roadmap) .icr-mods{padding:18px}
}

/* 4.0.8 — saluto personale e simbolo coordinato. */
:is(#icr-w,.icr-roadmap) .icr-welcome-icon{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  background:linear-gradient(145deg,#fffdf7,#f7edcf)!important;
  color:#0b513c!important;
}
:is(#icr-w,.icr-roadmap) .icr-welcome-symbol{
  width:48px!important;
  height:48px!important;
  filter:drop-shadow(0 5px 10px rgba(73,51,10,.12));
}
:is(#icr-w,.icr-roadmap) .icr-welcome-progress{
  position:absolute;
  right:-7px;
  bottom:-7px;
  min-width:30px;
  height:30px;
  padding:0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#0b513c;
  border:2px solid #fffaf0;
  color:#f4d98e;
  font-size:10px;
  line-height:1;
  font-weight:800;
  box-shadow:0 5px 12px rgba(9,65,46,.2);
}

/* ==========================================================
   5.0.0 — Dashboard compatta, leggibile e ad alto contrasto
   Tutto rigorosamente circoscritto alla Roadmap della Suite.
   ========================================================== */
:is(#icr-w,.icr-roadmap){
  --ais5-green:#063f30;
  --ais5-green2:#0c6549;
  --ais5-gold:#c79427;
  --ais5-gold2:#ebcb7b;
  --ais5-cream:#fbf7ee;
  --ais5-paper:#fffdfa;
  --ais5-ink:#15271f;
  --ais5-muted:#56665e;
  --ais5-line:rgba(62,79,68,.16);
  max-width:1120px!important;
  color:var(--ais5-ink)!important;
  font-size:15px!important;
}
:is(#icr-w,.icr-roadmap) *{box-sizing:border-box}

/* Hero più compatta e leggibile */
:is(#icr-w,.icr-roadmap) .icr-rh{
  min-height:300px!important;
  padding:44px 52px 86px!important;
  border-radius:26px!important;
  background:
    radial-gradient(circle at 89% 14%,rgba(235,203,123,.19),transparent 25%),
    linear-gradient(125deg,#043428 0%,#07543d 62%,#0a3f31 100%)!important;
  box-shadow:0 22px 58px rgba(4,52,40,.22)!important;
}
:is(#icr-w,.icr-roadmap) .icr-rh-eyebrow{
  margin-bottom:12px!important;padding:5px 10px!important;
  font-size:10px!important;letter-spacing:.18em!important
}
:is(#icr-w,.icr-roadmap) .icr-rh-eyebrow strong{font-weight:800;color:#fff0c3}
:is(#icr-w,.icr-roadmap) .icr-rh h2{
  max-width:690px!important;font-size:clamp(42px,5vw,64px)!important;
  line-height:1.02!important;letter-spacing:-.035em!important
}
:is(#icr-w,.icr-roadmap) .icr-rh>p{margin-top:17px!important;font-size:16px!important;color:#eef5f1!important}
:is(#icr-w,.icr-roadmap) .icr-rh:after{left:52px!important;bottom:61px!important;width:145px!important}

/* Banner: una sola riga compatta */
:is(#icr-w,.icr-roadmap) .icr-welcome-banner{
  margin:-52px 28px 18px!important;padding:21px 24px!important;
  border-radius:18px!important;gap:18px!important;
  box-shadow:0 14px 34px rgba(12,57,42,.14)!important
}
:is(#icr-w,.icr-roadmap) .icr-welcome-greeting{font-size:24px!important;color:var(--ais5-green)!important}
:is(#icr-w,.icr-roadmap) .icr-welcome-msg{font-size:14px!important;color:var(--ais5-muted)!important}
:is(#icr-w,.icr-roadmap) .icr-welcome-quote{margin-top:10px!important;padding-top:9px!important;font-size:13px!important;color:#46564e!important}
:is(#icr-w,.icr-roadmap) .icr-welcome-icon{width:62px!important;height:62px!important;border-radius:18px!important}
:is(#icr-w,.icr-roadmap) .icr-welcome-symbol{width:40px!important;height:40px!important}

/* Profilo e citazione: card orizzontale compatta */
:is(#icr-w,.icr-roadmap) .icr-profile{
  grid-template-columns:minmax(330px,1fr) minmax(360px,1.15fr)!important;
  gap:20px!important;margin:0 28px 18px!important;padding:24px!important;
  border-radius:20px!important;box-shadow:0 12px 30px rgba(20,50,38,.09)!important
}
:is(#icr-w,.icr-roadmap) .icr-profile-header{padding:0 20px 0 0!important}
:is(#icr-w,.icr-roadmap) .icr-profile-avatar{width:64px!important;height:64px!important;flex:0 0 64px!important}
:is(#icr-w,.icr-roadmap) .icr-profile-name{font-size:21px!important;line-height:1.1!important;color:var(--ais5-ink)!important}
:is(#icr-w,.icr-roadmap) .icr-profile-email,
:is(#icr-w,.icr-roadmap) .icr-profile-since{font-size:12px!important;color:var(--ais5-muted)!important;margin:3px 0!important}
:is(#icr-w,.icr-roadmap) .icr-profile-btn{min-height:34px!important;padding:7px 12px!important;font-size:12px!important}
:is(#icr-w,.icr-roadmap) .icr-profile-quote-box{
  min-height:132px!important;padding:20px 24px!important;border-radius:16px!important;
  background:#f7f1e5!important;border:1px solid rgba(199,148,39,.22)!important
}
:is(#icr-w,.icr-roadmap) .icr-pq-icon{margin-bottom:4px!important}
:is(#icr-w,.icr-roadmap) .icr-pq-text{font-size:17px!important;line-height:1.45!important;color:#20352b!important}
:is(#icr-w,.icr-roadmap) .icr-pq-author{font-size:12px!important;color:#8b6216!important;font-weight:700!important}

/* Avvisi più densi */
:is(#icr-w,.icr-roadmap) .icr-top-notice{margin:0 28px 18px!important;padding:15px 18px!important;border-radius:14px!important;font-size:13px!important}

/* Timeline senza vuoti: righe compatte e contrastate */
:is(#icr-w,.icr-roadmap) .icr-tl{margin-top:22px!important;padding-left:64px!important}
:is(#icr-w,.icr-roadmap) .icr-pl{left:27px!important}
:is(#icr-w,.icr-roadmap) .icr-pm{left:-64px!important;width:54px!important}
:is(#icr-w,.icr-roadmap) .icr-pd{
  width:44px!important;height:44px!important;border-radius:14px!important;
  font-size:16px!important;box-shadow:0 0 0 4px #f8f3e8,0 8px 18px rgba(10,73,51,.16)!important
}
:is(#icr-w,.icr-roadmap) .icr-ph{margin-bottom:12px!important}
:is(#icr-w,.icr-roadmap) .icr-pc{
  border-radius:18px!important;border:1px solid var(--ais5-line)!important;
  box-shadow:0 9px 24px rgba(23,53,41,.08)!important
}
:is(#icr-w,.icr-roadmap) .icr-phead{
  min-height:82px!important;padding:17px 20px 13px!important;
  background:linear-gradient(100deg,rgba(6,63,48,.10),rgba(199,148,39,.08),#fff 76%)!important
}
:is(#icr-w,.icr-roadmap) .icr-phead h3,
:is(#icr-w,.icr-roadmap) .icr-pt{font-size:21px!important;line-height:1.18!important;color:#193128!important}
:is(#icr-w,.icr-roadmap) .icr-pdesc{padding:0 20px!important;margin:12px 0 0!important;font-size:13px!important;color:#5a6961!important}
:is(#icr-w,.icr-roadmap) .icr-pbar{height:8px!important;margin:13px 20px 0!important;background:#dedfd8!important}
:is(#icr-w,.icr-roadmap) .icr-pbfill{background:linear-gradient(90deg,var(--ais5-green),var(--ais5-green2),var(--ais5-gold))!important}
:is(#icr-w,.icr-roadmap) .icr-pbg{min-width:54px!important;padding:6px 10px!important;font-size:12px!important}
:is(#icr-w,.icr-roadmap) .icr-mods{padding:14px 20px 18px!important}
:is(#icr-w,.icr-roadmap) .icr-mod{
  min-height:60px!important;margin-top:8px!important;padding:13px 15px!important;
  border-radius:13px!important;background:#f7faf8!important;border-color:#d6dfda!important;
  color:#273c32!important
}
:is(#icr-w,.icr-roadmap) .icr-mod :is(a,button,[role="button"]){font-size:13px!important;font-weight:700!important;color:var(--ais5-green2)!important}
:is(#icr-w,.icr-roadmap) .icr-mod p{color:#45584e!important}

/* Sezioni inferiori affiancate e più corte */
:is(#icr-w,.icr-roadmap) .icr-sa-card,
:is(#icr-w,.icr-roadmap) .icr-achievements{
  border-radius:18px!important;padding:20px!important;
  box-shadow:0 10px 26px rgba(23,53,41,.08)!important
}
:is(#icr-w,.icr-roadmap) :is(.icr-sa-card,.icr-achievements) h3,
:is(#icr-w,.icr-roadmap) :is(.icr-sa-card,.icr-achievements) h4{color:var(--ais5-ink)!important}
:is(#icr-w,.icr-roadmap) :is(.icr-sa-card,.icr-achievements) p,
:is(#icr-w,.icr-roadmap) :is(.icr-sa-card,.icr-achievements) li{color:#42554b!important}

/* Contrasto generale: niente grigi quasi invisibili */
:is(#icr-w,.icr-roadmap) :is(.icr-pdesc,.icr-welcome-msg,.icr-profile-email,.icr-profile-since){opacity:1!important}
:is(#icr-w,.icr-roadmap) blockquote{color:#263a30!important}

@media(min-width:900px){
  :is(#icr-w,.icr-roadmap) .icr-sa-card{width:calc(50% - 10px)!important;display:inline-block!important;vertical-align:top!important;margin-right:16px!important}
  :is(#icr-w,.icr-roadmap) .icr-achievements{width:calc(50% - 10px)!important;display:inline-block!important;vertical-align:top!important}
}
@media(max-width:899px){
  :is(#icr-w,.icr-roadmap) .icr-profile{grid-template-columns:1fr!important}
  :is(#icr-w,.icr-roadmap) .icr-profile-header{border-right:0!important;border-bottom:1px solid var(--ais5-line)!important;padding:0 0 18px!important}
}
@media(max-width:640px){
  :is(#icr-w,.icr-roadmap) .icr-rh{min-height:260px!important;padding:34px 24px 78px!important}
  :is(#icr-w,.icr-roadmap) .icr-rh h2{font-size:39px!important}
  :is(#icr-w,.icr-roadmap) .icr-rh:after{left:24px!important}
  :is(#icr-w,.icr-roadmap) .icr-welcome-banner{margin:-46px 10px 14px!important;padding:18px!important}
  :is(#icr-w,.icr-roadmap) .icr-welcome-icon{display:none!important}
  :is(#icr-w,.icr-roadmap) .icr-profile{margin:0 10px 14px!important;padding:18px!important}
  :is(#icr-w,.icr-roadmap) .icr-top-notice{margin:0 10px 14px!important}
  :is(#icr-w,.icr-roadmap) .icr-tl{padding-left:46px!important}
  :is(#icr-w,.icr-roadmap) .icr-pl{left:19px!important}
  :is(#icr-w,.icr-roadmap) .icr-pm{left:-46px!important;width:38px!important}
  :is(#icr-w,.icr-roadmap) .icr-pd{width:36px!important;height:36px!important;border-radius:11px!important}
  :is(#icr-w,.icr-roadmap) .icr-phead{padding:15px!important}
  :is(#icr-w,.icr-roadmap) .icr-phead h3{font-size:18px!important}
  :is(#icr-w,.icr-roadmap) .icr-pdesc{padding:0 15px!important}
  :is(#icr-w,.icr-roadmap) .icr-pbar{margin-left:15px!important;margin-right:15px!important}
  :is(#icr-w,.icr-roadmap) .icr-mods{padding:12px 15px 15px!important}
}

/* ==========================================================
   5.0.1 — Dashboard realmente compatta e ad alto contrasto
   ========================================================== */
:is(#icr-w,.icr-roadmap){
  max-width:1180px!important;
  margin-inline:auto!important;
  color:#172b22!important;
}
:is(#icr-w,.icr-roadmap) .icr-rh{
  min-height:260px!important;
  padding:38px 48px 72px!important;
}
:is(#icr-w,.icr-roadmap) .icr-rh h2{
  font-size:clamp(42px,4.5vw,60px)!important;
  max-width:720px!important;
  line-height:1.02!important;
}
:is(#icr-w,.icr-roadmap) .icr-welcome-banner{
  margin:-44px 24px 16px!important;
  min-height:108px!important;
  padding:18px 22px!important;
}
:is(#icr-w,.icr-roadmap) .icr-welcome-greeting{
  font-size:23px!important;
  color:#0b4d39!important;
  line-height:1.15!important;
}
:is(#icr-w,.icr-roadmap) .icr-welcome-msg,
:is(#icr-w,.icr-roadmap) .icr-welcome-quote{
  color:#3d5148!important;
  opacity:1!important;
}
:is(#icr-w,.icr-roadmap) .icr-profile{
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)!important;
  align-items:center!important;
  gap:18px!important;
  margin:0 24px 16px!important;
  padding:20px 22px!important;
  min-height:0!important;
}
:is(#icr-w,.icr-roadmap) .icr-profile-header{
  min-height:0!important;
  padding:0 18px 0 0!important;
  border-right:1px solid rgba(20,67,50,.14)!important;
}
:is(#icr-w,.icr-roadmap) .icr-profile-quote-box{
  min-height:116px!important;
  padding:18px 20px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
:is(#icr-w,.icr-roadmap) .icr-pq-text{
  font-size:16px!important;
  line-height:1.42!important;
  color:#1c352a!important;
}
:is(#icr-w,.icr-roadmap) .icr-top-notice{
  margin:0 24px 16px!important;
  padding:13px 16px!important;
  color:#263d33!important;
  background:#fff8e8!important;
}
:is(#icr-w,.icr-roadmap) .icr-tl{
  margin:18px 24px 0!important;
  padding-left:52px!important;
}
:is(#icr-w,.icr-roadmap) .icr-ph{
  margin-bottom:10px!important;
}
:is(#icr-w,.icr-roadmap) .icr-pc{
  overflow:hidden!important;
  border:1px solid rgba(18,76,55,.18)!important;
  box-shadow:0 8px 22px rgba(18,55,42,.08)!important;
}
:is(#icr-w,.icr-roadmap) .icr-phead{
  min-height:72px!important;
  padding:14px 18px!important;
  background:linear-gradient(90deg,#eef7f2 0%,#fffaf0 52%,#fff 100%)!important;
}
:is(#icr-w,.icr-roadmap) .icr-phead h3,
:is(#icr-w,.icr-roadmap) .icr-pt{
  font-size:20px!important;
  color:#17382b!important;
}
:is(#icr-w,.icr-roadmap) .icr-pdesc{
  margin:10px 0 0!important;
  padding:0 18px!important;
  color:#40564c!important;
  font-size:13px!important;
}
:is(#icr-w,.icr-roadmap) .icr-pbar{
  height:9px!important;
  margin:10px 18px 0!important;
  background:#d9dfda!important;
}
:is(#icr-w,.icr-roadmap) .icr-mods{
  padding:12px 18px 16px!important;
}
:is(#icr-w,.icr-roadmap) .icr-mod{
  min-height:54px!important;
  margin-top:7px!important;
  padding:11px 14px!important;
  background:#f8fbf9!important;
  border:1px solid #d4e0da!important;
  color:#233d31!important;
}
:is(#icr-w,.icr-roadmap) .icr-mod :is(a,button,[role="button"]){
  color:#096047!important;
  font-weight:800!important;
}
:is(#icr-w,.icr-roadmap) :is(.icr-sa-card,.icr-achievements){
  color:#1f382d!important;
  background:#fff!important;
}
@media(min-width:900px){
  :is(#icr-w,.icr-roadmap) .icr-sa-card,
  :is(#icr-w,.icr-roadmap) .icr-achievements{
    width:calc(50% - 12px)!important;
    display:inline-block!important;
    vertical-align:top!important;
  }
  :is(#icr-w,.icr-roadmap) .icr-sa-card{margin-right:18px!important}
}
@media(max-width:899px){
  :is(#icr-w,.icr-roadmap) .icr-profile{grid-template-columns:1fr!important}
  :is(#icr-w,.icr-roadmap) .icr-profile-header{
    border-right:0!important;
    border-bottom:1px solid rgba(20,67,50,.14)!important;
    padding:0 0 16px!important;
  }
}

/* ==========================================================
   5.0.4 — Blocco tappe finale compatto, senza celle vuote
   ========================================================== */
:is(#icr-w,.icr-roadmap) .icr-profile:has(.icr-badge-legend){
  display:grid!important;
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.72fr)!important;
  grid-template-areas:
    "legend next"
    "legend quote"!important;
  align-items:start!important;
  gap:16px!important;
  margin:18px 24px 20px!important;
  padding:20px!important;
  min-height:0!important;
  background:#fff!important;
  border:1px solid rgba(18,76,55,.14)!important;
  border-radius:20px!important;
  box-shadow:0 10px 28px rgba(20,52,40,.08)!important;
}
:is(#icr-w,.icr-roadmap) .icr-profile:has(.icr-badge-legend) .icr-achievements{
  grid-column:1/-1!important;
  width:auto!important;
  margin:0!important;
}
:is(#icr-w,.icr-roadmap) .icr-profile:has(.icr-badge-legend) .icr-badge-legend{
  grid-area:legend!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:20px!important;
  border:1px solid rgba(185,139,43,.28)!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,#fffdfa,#fbf7ed)!important;
  box-shadow:none!important;
}
:is(#icr-w,.icr-roadmap) .icr-profile:has(.icr-badge-legend) .icr-next-badges{
  grid-area:next!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:18px!important;
  border:1px solid rgba(185,139,43,.28)!important;
  border-radius:16px!important;
  background:#fffdf8!important;
  box-shadow:none!important;
}
:is(#icr-w,.icr-roadmap) .icr-profile:has(.icr-badge-legend) .icr-profile-quote{
  grid-area:quote!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:20px 18px!important;
  min-height:150px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,#fff8e7,#fbf2dc)!important;
  border:1px solid rgba(199,148,39,.30)!important;
}
:is(#icr-w,.icr-roadmap) .icr-profile:has(.icr-badge-legend) .icr-legend-items{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
}
:is(#icr-w,.icr-roadmap) .icr-profile:has(.icr-badge-legend) .icr-legend-item{
  min-height:60px!important;
  padding:11px 8px!important;
}
:is(#icr-w,.icr-roadmap) .icr-profile:has(.icr-badge-legend) .icr-legend-name{
  color:#284238!important;
  font-size:15px!important;
  font-weight:700!important;
}
:is(#icr-w,.icr-roadmap) .icr-profile:has(.icr-badge-legend) .icr-legend-req{
  color:#66766e!important;
  font-size:12px!important;
}
:is(#icr-w,.icr-roadmap) .icr-profile:has(.icr-badge-legend) .icr-next-badge{
  gap:12px!important;
}
:is(#icr-w,.icr-roadmap) .icr-profile:has(.icr-badge-legend) .icr-next-name{
  color:#20382d!important;
  font-size:14px!important;
  line-height:1.4!important;
}
:is(#icr-w,.icr-roadmap) .icr-profile:has(.icr-badge-legend) .icr-profile-quote-text{
  color:#20372d!important;
  font-size:17px!important;
  line-height:1.48!important;
}

@media(max-width:920px){
  :is(#icr-w,.icr-roadmap) .icr-profile:has(.icr-badge-legend){
    grid-template-columns:1fr!important;
    grid-template-areas:
      "legend"
      "next"
      "quote"!important;
  }
  :is(#icr-w,.icr-roadmap) .icr-profile:has(.icr-badge-legend) .icr-profile-quote{
    min-height:0!important;
  }
}
@media(max-width:640px){
  :is(#icr-w,.icr-roadmap) .icr-profile:has(.icr-badge-legend){
    margin:14px 10px 16px!important;
    padding:12px!important;
    gap:12px!important;
  }
  :is(#icr-w,.icr-roadmap) .icr-profile:has(.icr-badge-legend) :is(.icr-badge-legend,.icr-next-badges,.icr-profile-quote){
    padding:15px!important;
  }
}

/* ═══════════════════════════════════════════════════════════
   BOX STAGIONALE SUPERVISIONI / LEZIONI PRIVATE — v5.0.5
   ═══════════════════════════════════════════════════════════ */
:is(#icr-w,.icr-roadmap) .icr-support-season{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:20px;
    align-items:center;
    margin:18px 0 24px;
    padding:22px 24px;
    border:1px solid rgba(197,151,43,.34);
    border-radius:20px;
    background:linear-gradient(135deg,#fffdf7 0%,#fbf4df 100%);
    box-shadow:0 12px 34px rgba(69,54,24,.08);
    color:#183e31;
    position:relative;
    overflow:hidden;
}
:is(#icr-w,.icr-roadmap) .icr-support-season:after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-90px;
    top:-100px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(212,160,23,.15),transparent 66%);
    pointer-events:none;
}
:is(#icr-w,.icr-roadmap) .icr-support-season--summer{
    background:linear-gradient(135deg,#fffaf0 0%,#f8edd2 100%);
}
:is(#icr-w,.icr-roadmap) .icr-support-season__icon{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:linear-gradient(145deg,#07543d,#0b6b4c);
    color:#f4d37d;
    box-shadow:0 9px 24px rgba(7,84,61,.2);
}
:is(#icr-w,.icr-roadmap) .icr-support-season__eyebrow{
    display:inline-block;
    margin-bottom:4px;
    color:#9b6c0b;
    font-size:11px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}
:is(#icr-w,.icr-roadmap) .icr-support-season h3{
    margin:0 0 7px;
    color:#143d30;
    font-size:clamp(20px,2vw,27px);
    line-height:1.15;
    font-weight:800;
    letter-spacing:-.025em;
    text-transform:none;
}
:is(#icr-w,.icr-roadmap) .icr-support-season p{
    margin:0;
    color:#40534a;
    font-size:14px;
    line-height:1.6;
    max-width:760px;
}
:is(#icr-w,.icr-roadmap) .icr-support-season__points{
    display:flex;
    flex-wrap:wrap;
    gap:7px 16px;
    list-style:none;
    margin:11px 0 0;
    padding:0;
}
:is(#icr-w,.icr-roadmap) .icr-support-season__points li{
    position:relative;
    padding-left:17px;
    color:#294b3d;
    font-size:12px;
    font-weight:650;
}
:is(#icr-w,.icr-roadmap) .icr-support-season__points li:before{
    content:"✓";
    position:absolute;
    left:0;
    color:#0d7652;
    font-weight:900;
}
:is(#icr-w,.icr-roadmap) .icr-support-season__actions{
    min-width:230px;
    display:flex;
    flex-direction:column;
    gap:9px;
    position:relative;
    z-index:1;
}
:is(#icr-w,.icr-roadmap) .icr-support-season__button{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:11px 18px;
    border-radius:12px;
    font-size:13px;
    font-weight:800;
    text-decoration:none!important;
    text-align:center;
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
:is(#icr-w,.icr-roadmap) .icr-support-season__button:hover{
    transform:translateY(-1px);
}
:is(#icr-w,.icr-roadmap) .icr-support-season__button--primary{
    color:#fff!important;
    background:linear-gradient(135deg,#07543d,#0b6b4c);
    box-shadow:0 8px 20px rgba(7,84,61,.2);
}
:is(#icr-w,.icr-roadmap) .icr-support-season__button--primary:hover{
    box-shadow:0 11px 25px rgba(7,84,61,.27);
}
:is(#icr-w,.icr-roadmap) .icr-support-season__button--secondary{
    color:#73500d!important;
    border:1px solid rgba(174,128,25,.35);
    background:rgba(255,255,255,.72);
}
:is(#icr-w,.icr-roadmap) .icr-support-season__note{
    color:#6e6249;
    font-size:12px;
    line-height:1.45;
    text-align:center;
}
@media(max-width:900px){
    :is(#icr-w,.icr-roadmap) .icr-support-season{
        grid-template-columns:auto minmax(0,1fr);
    }
    :is(#icr-w,.icr-roadmap) .icr-support-season__actions{
        grid-column:1/-1;
        min-width:0;
        flex-direction:row;
    }
    :is(#icr-w,.icr-roadmap) .icr-support-season__button{
        flex:1;
    }
}
@media(max-width:600px){
    :is(#icr-w,.icr-roadmap) .icr-support-season{
        grid-template-columns:1fr;
        gap:14px;
        padding:18px;
    }
    :is(#icr-w,.icr-roadmap) .icr-support-season__icon{
        width:50px;
        height:50px;
    }
    :is(#icr-w,.icr-roadmap) .icr-support-season__actions{
        grid-column:auto;
        flex-direction:column;
    }
    :is(#icr-w,.icr-roadmap) .icr-support-season__points{
        display:grid;
        gap:7px;
    }
}