@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.ewdlgswx1m.bundle.scp.css';

/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* =========================================================================
   Login.razor.css
   Gli stili del layout di autenticazione sono condivisi con Register.razor
   e vivono in wwwroot/css/auxilium.auth.css (importato da app.css).
   Questo file e' volutamente vuoto: tutto il layout e' globale e coerente
   tra le pagine Identity.
   ========================================================================= */
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* =========================================================================
   MainLayout.razor.css
   Shell principale dell'app: sidebar + topbar + area contenuti.
   Consumer dei token definiti in wwwroot/css/auxilium.tokens.css
   ========================================================================= */

.app-shell[b-8l088lemo6] {
    display: grid;
    grid-template-columns: var(--ax-sidebar-width) 1fr;
    min-height: 100vh;
    background: var(--ax-body-bg);
    color: var(--ax-text-1);
    transition: grid-template-columns 200ms ease;
}

.app-shell.shell-collapsed[b-8l088lemo6] {
    grid-template-columns: var(--ax-sidebar-collapsed-width) 1fr;
}

/* ---------- SIDEBAR ---------- */
.sidebar-shell[b-8l088lemo6] {
    background: var(--ax-sidebar-bg);
    color: var(--ax-sidebar-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    border-right: 1px solid var(--ax-sidebar-border);
    position: sticky;
    top: 0;
}

.sidebar-top[b-8l088lemo6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ax-space-2);
    padding: var(--ax-space-4) var(--ax-space-4);
    min-height: var(--ax-topbar-height);
    border-bottom: 1px solid var(--ax-sidebar-border);
}

/* In modalità compatta brand-mark e toggle non entrano in 72px di larghezza:
   impiliamo verticalmente per evitare la sovrapposizione. */
.app-shell.shell-collapsed .sidebar-top[b-8l088lemo6] {
    flex-direction: column;
    justify-content: center;
    gap: var(--ax-space-2);
    padding: var(--ax-space-3) var(--ax-space-2);
}

.brand-block[b-8l088lemo6] {
    display: flex;
    align-items: center;
    gap: var(--ax-space-3);
    min-width: 0;
}

.brand-mark[b-8l088lemo6] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: var(--ax-sidebar-text-strong);
    color: var(--ax-primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ax-radius-xs);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.02em;
}

.brand-copy[b-8l088lemo6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.brand-title[b-8l088lemo6] {
    color: var(--ax-sidebar-text-strong);
    font-size: var(--ax-fs-14);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-subtitle[b-8l088lemo6] {
    color: var(--ax-sidebar-text);
    font-size: var(--ax-fs-11);
    font-weight: 500;
    line-height: 1.2;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-toggle[b-8l088lemo6] {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ax-sidebar-text);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ax-radius-xs);
    font-size: 16px;
    transition: background 120ms, color 120ms;
}

.sidebar-toggle:hover[b-8l088lemo6] {
    background: var(--ax-sidebar-hover-bg);
    color: var(--ax-sidebar-text-strong);
}

.sidebar-divider[b-8l088lemo6] {
    height: 1px;
    background: var(--ax-sidebar-border);
    margin: 0;
}

/* ---------- WORKSPACE ---------- */
.workspace-shell[b-8l088lemo6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ---------- TOPBAR ---------- */
.topbar-shell[b-8l088lemo6] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ax-space-4);
    padding: var(--ax-space-4) var(--ax-space-6);
    min-height: var(--ax-topbar-height);
    background: var(--ax-shell-bg);
    border-bottom: 1px solid var(--ax-border-soft);
}

.topbar-copy[b-8l088lemo6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.topbar-kicker[b-8l088lemo6] {
    font-size: var(--ax-fs-11);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ax-text-3);
}

.topbar-title[b-8l088lemo6] {
    font-size: var(--ax-fs-18);
    font-weight: 600;
    color: var(--ax-text-1);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.topbar-subtitle[b-8l088lemo6] {
    font-size: var(--ax-fs-12);
    color: var(--ax-text-3);
    line-height: 1.4;
}

.topbar-actions[b-8l088lemo6] {
    display: flex;
    align-items: center;
    gap: var(--ax-space-2);
    flex-shrink: 0;
}

.topbar-action-button[b-8l088lemo6] {
    background: transparent;
    border: 1px solid var(--ax-border-strong);
    color: var(--ax-text-2);
    font-size: var(--ax-fs-13);
    font-weight: 500;
    padding: 7px 12px;
    border-radius: var(--ax-radius-sm);
    cursor: pointer;
    transition: background 120ms, color 120ms, border-color 120ms;
}

.topbar-action-button:hover[b-8l088lemo6] {
    background: var(--ax-panel-bg-soft);
    color: var(--ax-text-1);
    border-color: var(--ax-primary-500);
}

/* Indicatore utente corrente (email) accanto al pulsante Esci. */
.topbar-user-email[b-8l088lemo6] {
    color: var(--ax-text-2);
    font-size: var(--ax-fs-13);
    font-weight: 500;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Il form di logout e' solo un wrapper per il POST anti-CSRF,
   non deve occupare spazio o rompere l'allineamento flex del topbar. */
.topbar-logout-form[b-8l088lemo6] {
    margin: 0;
    padding: 0;
    display: inline-flex;
}

/* ---------- CONTENT ---------- */
.content-shell[b-8l088lemo6] {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: var(--ax-body-bg);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px) {
    .app-shell[b-8l088lemo6],
    .app-shell.shell-collapsed[b-8l088lemo6] {
        grid-template-columns: var(--ax-sidebar-collapsed-width) 1fr;
    }

    .brand-copy[b-8l088lemo6],
    .topbar-kicker[b-8l088lemo6],
    .topbar-subtitle[b-8l088lemo6] {
        display: none;
    }

    /* Stessa regola anti-sovrapposizione attiva anche sotto i 960px,
       indipendentemente dallo stato shell-collapsed / shell-expanded. */
    .sidebar-top[b-8l088lemo6] {
        flex-direction: column;
        justify-content: center;
        gap: var(--ax-space-2);
        padding: var(--ax-space-3) var(--ax-space-2);
    }

    .topbar-shell[b-8l088lemo6] {
        padding: var(--ax-space-3) var(--ax-space-4);
    }
}

@media (max-width: 600px) {
    .topbar-action-button[b-8l088lemo6] {
        display: none;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* =========================================================================
   NavMenu.razor.css
   Navigazione laterale di Auxilium.
   NOTA: i <NavLink> sono componenti figli, quindi l'<a> renderizzato NON
   riceve l'attributo scoped b-xxx. Per stilizzarlo serve ::deep.
   ========================================================================= */

.navmenu[b-v5d6f3vci2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ax-space-3);
    min-width: 0;
}

.navmenu-group-title[b-v5d6f3vci2] {
    padding: var(--ax-space-2) var(--ax-space-2) var(--ax-space-3) var(--ax-space-2);
    font-size: var(--ax-fs-11);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ax-sidebar-text);
    opacity: 0.7;
}

/* ---------- Link renderizzati da <NavLink> (componente figlio: serve ::deep) ---------- */
.navmenu[b-v5d6f3vci2]  a.navmenu-link {
    min-height: 36px;
    padding: var(--ax-space-2) var(--ax-space-3);
    border-radius: var(--ax-radius-sm);
    display: flex;
    align-items: center;
    gap: var(--ax-space-3);
    text-decoration: none;
    color: var(--ax-sidebar-text);
    background: transparent;
    border: 1px solid transparent;
    font-size: var(--ax-fs-13);
    font-weight: 500;
    transition: background 120ms ease, color 120ms ease;
}

.navmenu[b-v5d6f3vci2]  a.navmenu-link:hover {
    background: var(--ax-sidebar-hover-bg);
    color: var(--ax-sidebar-text-strong);
}

.navmenu[b-v5d6f3vci2]  a.navmenu-link.active {
    background: var(--ax-sidebar-active-bg);
    color: var(--ax-sidebar-text-strong);
    box-shadow: inset 3px 0 0 var(--ax-sidebar-active-indicator);
}

.navmenu[b-v5d6f3vci2]  a.navmenu-link-secondary {
    padding-left: var(--ax-space-5);
    font-weight: 400;
    opacity: 0.9;
}

/* ---------- Icon e testo sono <span> scritti direttamente nel file .razor
     quindi ricevono l'attributo scoped e NON servono ::deep ---------- */
.navmenu-icon[b-v5d6f3vci2] {
    width: 18px;
    min-width: 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 1;
    color: inherit;
}

.navmenu-text[b-v5d6f3vci2] {
    font-size: inherit;
    line-height: 1.2;
    white-space: nowrap;
    color: inherit;
}

.navmenu-collapsed[b-v5d6f3vci2]  a.navmenu-link {
    justify-content: center;
    padding-left: var(--ax-space-2);
    padding-right: var(--ax-space-2);
}

@media (max-width: 960px) {
    .navmenu[b-v5d6f3vci2] {
        padding-left: var(--ax-space-2);
        padding-right: var(--ax-space-2);
    }

    .navmenu[b-v5d6f3vci2]  a.navmenu-link {
        justify-content: center;
        padding-left: var(--ax-space-1);
        padding-right: var(--ax-space-1);
    }

    /* Sotto i 960px la sidebar è forzata a 72px via CSS (indipendentemente
       dallo stato C# MenuCompatto): dobbiamo nascondere via CSS anche
       il titolo di gruppo e il testo dei link, altrimenti restano
       visibili perché il componente li renderizza comunque. */
    .navmenu .navmenu-group-title[b-v5d6f3vci2],
    .navmenu .navmenu-text[b-v5d6f3vci2] {
        display: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-ao6l9rhwc0],
.components-reconnect-repeated-attempt-visible[b-ao6l9rhwc0],
.components-reconnect-failed-visible[b-ao6l9rhwc0],
.components-pause-visible[b-ao6l9rhwc0],
.components-resume-failed-visible[b-ao6l9rhwc0],
.components-rejoining-animation[b-ao6l9rhwc0] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-ao6l9rhwc0],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-ao6l9rhwc0],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-ao6l9rhwc0],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-ao6l9rhwc0],
#components-reconnect-modal.components-reconnect-retrying[b-ao6l9rhwc0],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-ao6l9rhwc0],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-ao6l9rhwc0],
#components-reconnect-modal.components-reconnect-failed[b-ao6l9rhwc0],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-ao6l9rhwc0] {
    display: block;
}


#components-reconnect-modal[b-ao6l9rhwc0] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-ao6l9rhwc0 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-ao6l9rhwc0 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-ao6l9rhwc0 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-ao6l9rhwc0]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-ao6l9rhwc0 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-ao6l9rhwc0 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-ao6l9rhwc0 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-ao6l9rhwc0 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-ao6l9rhwc0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-ao6l9rhwc0] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-ao6l9rhwc0] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-ao6l9rhwc0] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-ao6l9rhwc0] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-ao6l9rhwc0] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-ao6l9rhwc0] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-ao6l9rhwc0 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-ao6l9rhwc0] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-ao6l9rhwc0 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/Utenti.razor.rz.scp.css */
/* =========================================================================
   Utenti.razor.css
   Gli stili dell'admin panel sono ora centralizzati in
   wwwroot/css/auxilium.admin.css cosi' possono essere condivisi con le
   pagine di dettaglio (e future admin views). Questo file e' lasciato vuoto
   di proposito: Blazor lo mantiene come bundle scoped "per componente"
   ma non vi aggiunge alcun override.
   ========================================================================= */
/* /Components/Pages/Home.razor.rz.scp.css */
/* =========================================================================
   Home.razor.css
   Pagina iniziale di Auxilium: hero + elenco studi disponibili.
   Consumer dei token Auxilium.
   ========================================================================= */

.home-page[b-urjqosx9iv] {
    min-height: 100%;
    padding: var(--ax-page-padding);
    color: var(--ax-text-1);
    background: transparent;
}

.home-shell[b-urjqosx9iv] {
    max-width: var(--ax-page-max);
    margin: 0 auto;
    display: grid;
    gap: var(--ax-space-6);
}

/* ---------- HERO ---------- */
.hero-section[b-urjqosx9iv] {
    border: 1px solid var(--ax-border-soft);
    border-radius: var(--ax-radius-lg);
    background: var(--ax-hero-bg);
    box-shadow: var(--ax-shadow-1);
    padding: var(--ax-space-7) var(--ax-space-7);
    overflow: hidden;
}

.hero-section-simple[b-urjqosx9iv] {
    /* variant compatta per home */
    padding: var(--ax-space-6) var(--ax-space-7);
}

.hero-content[b-urjqosx9iv] {
    display: grid;
    gap: var(--ax-space-4);
    max-width: 960px;
}

.hero-badge[b-urjqosx9iv] {
    display: inline-flex;
    align-items: center;
    gap: var(--ax-space-2);
    width: fit-content;
    padding: 6px 12px;
    border: 1px solid var(--ax-border-soft);
    border-radius: var(--ax-radius-pill);
    background: var(--ax-primary-50);
    color: var(--ax-primary-700);
    font-size: var(--ax-fs-12);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.hero-badge-dot[b-urjqosx9iv] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ax-primary-700);
    box-shadow: 0 0 0 3px var(--ax-primary-100);
}

.hero-title[b-urjqosx9iv] {
    margin: 0;
    font-size: clamp(var(--ax-fs-24), 2.6vw, var(--ax-fs-40));
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ax-text-1);
    font-weight: 700;
}

.hero-description[b-urjqosx9iv] {
    margin: 0;
    color: var(--ax-text-2);
    font-size: var(--ax-fs-16);
    line-height: 1.6;
    max-width: 780px;
}

/* ---------- SEZIONI ---------- */
.section-block[b-urjqosx9iv] {
    border: 1px solid var(--ax-border-soft);
    border-radius: var(--ax-radius-lg);
    background: var(--ax-panel-bg);
    box-shadow: var(--ax-shadow-1);
    padding: var(--ax-space-6);
}

.section-header[b-urjqosx9iv] {
    display: grid;
    gap: var(--ax-space-1);
    margin-bottom: var(--ax-space-5);
}

.section-header h2[b-urjqosx9iv] {
    margin: 0;
    font-size: var(--ax-fs-20);
    letter-spacing: -0.01em;
    color: var(--ax-text-1);
    font-weight: 600;
}

.section-header p[b-urjqosx9iv] {
    margin: 0;
    max-width: 780px;
    color: var(--ax-text-3);
    font-size: var(--ax-fs-14);
    line-height: 1.55;
}

/* ---------- GRID STUDI ---------- */
.studi-grid[b-urjqosx9iv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--ax-study-card-min), 1fr));
    gap: var(--ax-space-4);
}

/* ---------- STUDIO CARD ---------- */
.studio-card[b-urjqosx9iv] {
    background: var(--ax-card-bg);
    border: 1px solid var(--ax-border-soft);
    border-radius: var(--ax-radius-lg);
    padding: var(--ax-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-3);
    min-height: 220px;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    box-shadow: none;
}

.studio-card:hover[b-urjqosx9iv] {
    border-color: var(--ax-primary-500);
    box-shadow: var(--ax-shadow-2);
    transform: translateY(-1px);
}

.studio-card-icon[b-urjqosx9iv] {
    width: 36px;
    height: 36px;
    border-radius: var(--ax-radius-sm);
    background: var(--ax-primary-100);
    color: var(--ax-primary-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.studio-card-header[b-urjqosx9iv] {
    display: grid;
    gap: 2px;
}

.studio-card-title[b-urjqosx9iv] {
    color: var(--ax-text-1);
    font-size: var(--ax-fs-16);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

.studio-card-subtitle[b-urjqosx9iv] {
    color: var(--ax-text-3);
    font-size: var(--ax-fs-11);
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.studio-card-text[b-urjqosx9iv] {
    color: var(--ax-text-2);
    line-height: 1.55;
    font-size: var(--ax-fs-13);
    margin: 0;
}

.studio-card-actions[b-urjqosx9iv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ax-space-3);
    margin-top: auto;
    padding-top: var(--ax-space-3);
    border-top: 1px solid var(--ax-border-soft);
}

/* ---------- FOOTER ---------- */
.home-footer[b-urjqosx9iv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ax-space-4);
    padding-top: var(--ax-space-5);
    border-top: 1px solid var(--ax-border-soft);
    color: var(--ax-text-3);
    font-size: var(--ax-fs-12);
}

.home-footer-link[b-urjqosx9iv] {
    color: var(--ax-primary-700);
    text-decoration: none;
    font-weight: 500;
    transition: color 120ms ease;
}

.home-footer-link:hover[b-urjqosx9iv],
.home-footer-link:focus-visible[b-urjqosx9iv] {
    color: var(--ax-primary-800);
    text-decoration: underline;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px) {
    .home-footer[b-urjqosx9iv] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ax-space-2);
    }
}

@media (max-width: 767px) {
    .hero-section[b-urjqosx9iv] {
        padding: var(--ax-space-5);
    }

    .section-block[b-urjqosx9iv] {
        padding: var(--ax-space-4);
    }

    .studi-grid[b-urjqosx9iv] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/PaginaStudi.razor.rz.scp.css */
/* =========================================================================
   PaginaStudi.razor.css
   Elenco completo degli studi disponibili con descrizione estesa e meta.
   Consumer dei token Auxilium.
   ========================================================================= */

.studi-page[b-m9teb8232i] {
    min-height: 100%;
    padding: var(--ax-page-padding);
    color: var(--ax-text-1);
    background: transparent;
}

.studi-shell[b-m9teb8232i] {
    max-width: var(--ax-page-max);
    margin: 0 auto;
    display: grid;
    gap: var(--ax-space-6);
}

/* ---------- HERO ---------- */
.hero-section[b-m9teb8232i] {
    border: 1px solid var(--ax-border-soft);
    border-radius: var(--ax-radius-lg);
    background: var(--ax-hero-bg);
    box-shadow: var(--ax-shadow-1);
    padding: var(--ax-space-7) var(--ax-space-7);
    overflow: hidden;
}

.hero-content[b-m9teb8232i] {
    display: grid;
    gap: var(--ax-space-4);
    max-width: 960px;
}

.hero-badge[b-m9teb8232i] {
    display: inline-flex;
    align-items: center;
    gap: var(--ax-space-2);
    width: fit-content;
    padding: 6px 12px;
    border: 1px solid var(--ax-border-soft);
    border-radius: var(--ax-radius-pill);
    background: var(--ax-primary-50);
    color: var(--ax-primary-700);
    font-size: var(--ax-fs-12);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.hero-badge-dot[b-m9teb8232i] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ax-primary-700);
    box-shadow: 0 0 0 3px var(--ax-primary-100);
}

.hero-title[b-m9teb8232i] {
    margin: 0;
    font-size: clamp(var(--ax-fs-24), 2.6vw, var(--ax-fs-40));
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ax-text-1);
    font-weight: 700;
}

.hero-description[b-m9teb8232i] {
    margin: 0;
    color: var(--ax-text-2);
    font-size: var(--ax-fs-16);
    line-height: 1.6;
    max-width: 780px;
}

/* ---------- SEZIONI ---------- */
.section-block[b-m9teb8232i] {
    border: 1px solid var(--ax-border-soft);
    border-radius: var(--ax-radius-lg);
    background: var(--ax-panel-bg);
    box-shadow: var(--ax-shadow-1);
    padding: var(--ax-space-6);
}

.section-header[b-m9teb8232i] {
    display: grid;
    gap: var(--ax-space-1);
    margin-bottom: var(--ax-space-5);
}

.section-header h2[b-m9teb8232i] {
    margin: 0;
    font-size: var(--ax-fs-20);
    letter-spacing: -0.01em;
    color: var(--ax-text-1);
    font-weight: 600;
}

.section-header p[b-m9teb8232i] {
    margin: 0;
    max-width: 780px;
    color: var(--ax-text-3);
    font-size: var(--ax-fs-14);
    line-height: 1.55;
}

/* ---------- GRID STUDI ---------- */
.studi-grid[b-m9teb8232i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--ax-study-card-min), 1fr));
    gap: var(--ax-space-4);
}

/* ---------- STUDIO CARD ---------- */
.studio-card[b-m9teb8232i] {
    background: var(--ax-card-bg);
    border: 1px solid var(--ax-border-soft);
    border-radius: var(--ax-radius-lg);
    padding: var(--ax-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-3);
    min-height: 260px;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    box-shadow: none;
}

.studio-card:hover[b-m9teb8232i] {
    border-color: var(--ax-primary-500);
    box-shadow: var(--ax-shadow-2);
    transform: translateY(-1px);
}

.studio-card-disabled[b-m9teb8232i] {
    opacity: 0.70;
}

.studio-card-disabled:hover[b-m9teb8232i] {
    border-color: var(--ax-border-soft);
    box-shadow: none;
    transform: none;
}

.studio-card-header[b-m9teb8232i] {
    display: grid;
    gap: 2px;
}

.studio-card-title[b-m9teb8232i] {
    color: var(--ax-text-1);
    font-size: var(--ax-fs-16);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

.studio-card-subtitle[b-m9teb8232i] {
    color: var(--ax-text-3);
    font-size: var(--ax-fs-11);
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.studio-card-body[b-m9teb8232i] {
    display: grid;
    gap: var(--ax-space-3);
}

.studio-card-text[b-m9teb8232i] {
    color: var(--ax-text-2);
    line-height: 1.55;
    font-size: var(--ax-fs-13);
    margin: 0;
}

/* ---------- META ITEM ---------- */
.studio-card-meta[b-m9teb8232i] {
    display: grid;
    gap: var(--ax-space-2);
}

.studio-meta-item[b-m9teb8232i] {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border-radius: var(--ax-radius-sm);
    background: var(--ax-panel-bg-soft);
    border: 1px solid var(--ax-border-soft);
}

.studio-meta-label[b-m9teb8232i] {
    color: var(--ax-text-3);
    font-size: var(--ax-fs-11);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.studio-meta-value[b-m9teb8232i] {
    color: var(--ax-text-1);
    font-size: var(--ax-fs-13);
    font-family: var(--ax-font-mono);
    font-weight: 500;
}

/* ---------- AZIONI ---------- */
.studio-card-actions[b-m9teb8232i] {
    display: flex;
    align-items: center;
    gap: var(--ax-space-3);
    margin-top: auto;
    padding-top: var(--ax-space-3);
    border-top: 1px solid var(--ax-border-soft);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 767px) {
    .studi-page[b-m9teb8232i] {
        padding: var(--ax-page-padding);
    }

    .hero-section[b-m9teb8232i] {
        padding: var(--ax-space-5);
    }

    .section-block[b-m9teb8232i] {
        padding: var(--ax-space-4);
    }

    .studi-grid[b-m9teb8232i] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Studi/EnergiaClimatizzazione.razor.rz.scp.css */
/* =========================================================================
   EnergiaClimatizzazione.razor.css
   Pagina studio "Energia di climatizzazione".
   Consumer dei token Auxilium (wwwroot/css/auxilium.tokens.css)
   Tema chiaro di default, layout pulito ad ispirazione professionale.
   ========================================================================= */

.studio-page[b-q2csgfd7cf] {
    min-height: 100%;
    padding: var(--ax-page-padding);
    color: var(--ax-text-1);
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-6);
    max-width: var(--ax-page-max);
    margin: 0 auto;
    width: 100%;
}

/* =========================================================================
   HERO
   ========================================================================= */
.studio-hero[b-q2csgfd7cf] {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.85fr);
    gap: var(--ax-space-6);
    align-items: start;
    padding: var(--ax-space-6) var(--ax-space-7);
    border-radius: var(--ax-radius-lg);
    background: linear-gradient(135deg, var(--ax-primary-900) 0%, var(--ax-primary-800) 60%, var(--ax-primary-700) 100%);
    box-shadow: var(--ax-shadow-2);
    border: 1px solid var(--ax-primary-800);
    color: #ffffff;
}

.studio-breadcrumb[b-q2csgfd7cf] {
    font-size: var(--ax-fs-12);
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: var(--ax-space-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.studio-title[b-q2csgfd7cf] {
    margin: 0;
    font-size: clamp(var(--ax-fs-24), 2.6vw, var(--ax-fs-40));
    line-height: 1.12;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.studio-subtitle[b-q2csgfd7cf] {
    margin: var(--ax-space-3) 0 0 0;
    max-width: 52rem;
    font-size: var(--ax-fs-14);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
}

.studio-hero-right[b-q2csgfd7cf] {
    display: flex;
    justify-content: flex-end;
}

.studio-meta-card[b-q2csgfd7cf] {
    width: 100%;
    max-width: 22rem;
    padding: var(--ax-space-4);
    border-radius: var(--ax-radius-md);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
}

.studio-meta-row + .studio-meta-row[b-q2csgfd7cf] {
    margin-top: var(--ax-space-3);
}

.studio-meta-label[b-q2csgfd7cf] {
    display: block;
    font-size: var(--ax-fs-11);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 2px;
    font-weight: 600;
}

.studio-meta-value[b-q2csgfd7cf] {
    display: block;
    font-size: var(--ax-fs-14);
    font-weight: 600;
    color: #ffffff;
}

/* =========================================================================
   AZIONI TOOLBAR (Calcola / Reset / Copia relazione)
   ========================================================================= */
.studio-actions[b-q2csgfd7cf] {
    display: flex;
    gap: var(--ax-space-3);
    flex-wrap: wrap;
}

.studio-button[b-q2csgfd7cf] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ax-space-2);
    min-height: 38px;
    padding: 8px 16px;
    border-radius: var(--ax-radius-sm);
    border: 1px solid var(--ax-border-strong);
    background: var(--ax-gray-0);
    color: var(--ax-text-2);
    font-family: var(--ax-font-sans);
    font-size: var(--ax-fs-13);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.studio-button:hover:not(:disabled)[b-q2csgfd7cf] {
    background: var(--ax-panel-bg-soft);
    color: var(--ax-text-1);
    border-color: var(--ax-primary-500);
}

.studio-button:focus-visible[b-q2csgfd7cf] {
    outline: none;
    box-shadow: var(--ax-shadow-focus);
}

.studio-button-primary[b-q2csgfd7cf] {
    background: var(--ax-primary-700);
    color: var(--ax-text-on-primary);
    border-color: var(--ax-primary-700);
}

.studio-button-primary:hover:not(:disabled)[b-q2csgfd7cf] {
    background: var(--ax-primary-800);
    border-color: var(--ax-primary-800);
    color: var(--ax-text-on-primary);
}

.studio-button-secondary[b-q2csgfd7cf] {
    background: var(--ax-gray-0);
    color: var(--ax-text-2);
    border-color: var(--ax-border-strong);
}

/* =========================================================================
   GRID INPUT + RISULTATI
   ========================================================================= */
.studio-grid[b-q2csgfd7cf] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.9fr);
    gap: var(--ax-space-5);
}

/* =========================================================================
   PANEL CARD (input, risultati, relazione)
   ========================================================================= */
.panel-card[b-q2csgfd7cf] {
    position: relative;
    border-radius: var(--ax-radius-lg);
    padding: var(--ax-space-5);
    background: var(--ax-panel-bg);
    border: 1px solid var(--ax-border-soft);
    box-shadow: var(--ax-shadow-1);
}

.panel-header[b-q2csgfd7cf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ax-space-4);
    margin-bottom: var(--ax-space-4);
    padding-bottom: var(--ax-space-3);
    border-bottom: 1px solid var(--ax-border-soft);
}

.panel-title-wrap[b-q2csgfd7cf] {
    display: flex;
    align-items: flex-start;
    gap: var(--ax-space-3);
    min-width: 0;
}

.panel-title-accent[b-q2csgfd7cf] {
    width: 3px;
    min-width: 3px;
    height: 1.2rem;
    margin-top: 4px;
    border-radius: var(--ax-radius-pill);
    background: var(--ax-primary-700);
}

.panel-title[b-q2csgfd7cf] {
    margin: 0;
    font-size: var(--ax-fs-18);
    line-height: 1.2;
    font-weight: 600;
    color: var(--ax-text-1);
    letter-spacing: -0.01em;
}

.panel-subtitle[b-q2csgfd7cf] {
    margin-top: 4px;
    font-size: var(--ax-fs-13);
    line-height: 1.45;
    color: var(--ax-text-3);
}

.panel-header-dots[b-q2csgfd7cf] {
    font-size: var(--ax-fs-18);
    line-height: 1;
    font-weight: 700;
    color: var(--ax-text-3);
    padding-top: 2px;
    cursor: pointer;
    user-select: none;
}

.panel-body[b-q2csgfd7cf] {
    min-width: 0;
}

/* =========================================================================
   LISTA INPUT
   ========================================================================= */
.input-list[b-q2csgfd7cf] {
    display: flex;
    flex-direction: column;
}

.input-row[b-q2csgfd7cf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
    gap: var(--ax-space-4);
    align-items: center;
    padding: var(--ax-space-3) 0;
    border-bottom: 1px solid var(--ax-border-soft);
}

.input-row:last-child[b-q2csgfd7cf] {
    border-bottom: none;
}

.input-name[b-q2csgfd7cf] {
    font-size: var(--ax-fs-14);
    font-weight: 600;
    color: var(--ax-text-1);
}

.input-description[b-q2csgfd7cf] {
    margin-top: 2px;
    font-size: var(--ax-fs-12);
    line-height: 1.45;
    color: var(--ax-text-3);
}

.input-editor[b-q2csgfd7cf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.2rem;
    gap: var(--ax-space-2);
}

.input-field[b-q2csgfd7cf] {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: var(--ax-radius-sm);
    border: 1px solid var(--ax-input-border);
    background: var(--ax-input-bg);
    color: var(--ax-input-text);
    font-family: var(--ax-font-mono);
    font-size: var(--ax-fs-14);
    font-variant-numeric: tabular-nums;
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.input-field:focus[b-q2csgfd7cf] {
    border-color: var(--ax-input-border-focus);
    box-shadow: var(--ax-shadow-focus);
}

.input-unit[b-q2csgfd7cf] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: var(--ax-radius-sm);
    border: 1px solid var(--ax-border-soft);
    background: var(--ax-panel-bg-soft);
    color: var(--ax-text-2);
    font-family: var(--ax-font-mono);
    font-size: var(--ax-fs-13);
    font-weight: 500;
}

/* =========================================================================
   RISULTATI
   ========================================================================= */
.result-message[b-q2csgfd7cf] {
    border-radius: var(--ax-radius-md);
    padding: var(--ax-space-4);
    background: var(--ax-info-bg);
    border: 1px solid var(--ax-info-border);
    color: var(--ax-info-strong);
}

.result-message-error[b-q2csgfd7cf] {
    background: var(--ax-danger-bg);
    border-color: var(--ax-danger-border);
    color: var(--ax-danger-strong);
}

.result-message-title[b-q2csgfd7cf] {
    font-size: var(--ax-fs-14);
    font-weight: 600;
    margin-bottom: 4px;
}

.result-message-text[b-q2csgfd7cf] {
    font-size: var(--ax-fs-13);
    line-height: 1.5;
    color: var(--ax-text-2);
}

.result-message-error .result-message-text[b-q2csgfd7cf] {
    color: var(--ax-danger-strong);
}

.result-grid[b-q2csgfd7cf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ax-space-3);
}

.result-card[b-q2csgfd7cf] {
    border-radius: var(--ax-radius-md);
    padding: var(--ax-space-4);
    background: var(--ax-card-bg-soft);
    border: 1px solid var(--ax-border-soft);
}

.result-title[b-q2csgfd7cf] {
    font-size: var(--ax-fs-13);
    font-weight: 600;
    color: var(--ax-text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.result-description[b-q2csgfd7cf] {
    margin-top: 4px;
    font-size: var(--ax-fs-12);
    line-height: 1.45;
    color: var(--ax-text-3);
    min-height: 2.4rem;
}

.result-value-row[b-q2csgfd7cf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.5rem;
    gap: var(--ax-space-2);
    margin-top: var(--ax-space-3);
}

.result-value[b-q2csgfd7cf],
.result-unit[b-q2csgfd7cf] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-radius: var(--ax-radius-sm);
    border: 1px solid var(--ax-border-soft);
    /* --ax-input-bg e' tematizzato (bianco in light, #171d26 in dark):
       evita l'effetto "bianco su bianco" in dark theme che invece si
       verificherebbe usando direttamente --ax-gray-0. */
    background: var(--ax-input-bg);
    color: var(--ax-text-1);
    min-height: 38px;
    padding: 8px 12px;
    font-family: var(--ax-font-mono);
    font-size: var(--ax-fs-14);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.result-unit[b-q2csgfd7cf] {
    justify-content: center;
    color: var(--ax-text-2);
    background: var(--ax-panel-bg-soft);
    font-weight: 500;
    font-size: var(--ax-fs-12);
}

/* =========================================================================
   RELAZIONE - menu e feedback
   ========================================================================= */
.relazione-card[b-q2csgfd7cf] {
    overflow: visible;
}

.menu-relazione-wrap[b-q2csgfd7cf] {
    position: relative;
    flex: 0 0 auto;
}

.menu-relazione-toggle[b-q2csgfd7cf] {
    appearance: none;
    min-width: 38px;
    height: 32px;
    border-radius: var(--ax-radius-sm);
    border: 1px solid var(--ax-border-strong);
    background: var(--ax-gray-0);
    color: var(--ax-text-2);
    font-size: var(--ax-fs-16);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.menu-relazione-toggle:hover[b-q2csgfd7cf] {
    background: var(--ax-panel-bg-soft);
    color: var(--ax-text-1);
    border-color: var(--ax-primary-500);
}

.menu-relazione-overlay[b-q2csgfd7cf] {
    position: fixed;
    inset: 0;
    border: none;
    background: transparent;
    z-index: 70;
}

.menu-relazione-popup[b-q2csgfd7cf] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 14rem;
    padding: var(--ax-space-1);
    border-radius: var(--ax-radius-md);
    background: var(--ax-panel-bg);
    border: 1px solid var(--ax-border-soft);
    box-shadow: var(--ax-shadow-3);
    z-index: 71;
}

.menu-relazione-item[b-q2csgfd7cf] {
    width: 100%;
    appearance: none;
    border: none;
    background: transparent;
    color: var(--ax-text-1);
    text-align: left;
    padding: 10px 12px;
    border-radius: var(--ax-radius-sm);
    font-size: var(--ax-fs-13);
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.menu-relazione-item:hover:not(:disabled)[b-q2csgfd7cf] {
    background: var(--ax-primary-50);
    color: var(--ax-primary-700);
}

.menu-relazione-item:disabled[b-q2csgfd7cf] {
    opacity: 0.45;
    cursor: default;
    color: var(--ax-text-4);
}

/* =========================================================================
   FEEDBACK RELAZIONE
   ========================================================================= */
.relazione-feedback[b-q2csgfd7cf],
.relazione-empty[b-q2csgfd7cf] {
    border-radius: var(--ax-radius-md);
    padding: var(--ax-space-4);
    font-size: var(--ax-fs-13);
    line-height: 1.5;
}

.relazione-feedback-success[b-q2csgfd7cf] {
    margin-bottom: var(--ax-space-3);
    background: var(--ax-success-bg);
    border: 1px solid var(--ax-success-border);
    color: var(--ax-success-strong);
}

.relazione-feedback-error[b-q2csgfd7cf] {
    margin-bottom: var(--ax-space-3);
    background: var(--ax-danger-bg);
    border: 1px solid var(--ax-danger-border);
    color: var(--ax-danger-strong);
}

.relazione-empty[b-q2csgfd7cf] {
    background: var(--ax-panel-bg-soft);
    border: 1px solid var(--ax-border-soft);
    color: var(--ax-text-3);
    text-align: center;
}

/* =========================================================================
   DOCUMENTO RELAZIONE TECNICA (paper look)
   ========================================================================= */
.relazione-documento[b-q2csgfd7cf] {
    position: relative;
    overflow: hidden;
    border-radius: var(--ax-radius-md);
    border: 1px solid var(--ax-paper-border);
    background: var(--ax-paper-bg);
    color: var(--ax-paper-text);
    box-shadow: var(--ax-shadow-1);
}

.relazione-documento[b-q2csgfd7cf]::before {
    content: "Auxilium Engineering";
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-28deg);
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(11, 61, 145, 0.04);
    white-space: nowrap;
    pointer-events: none;
    font-family: var(--ax-font-sans);
}

.relazione-contenuto[b-q2csgfd7cf] {
    position: relative;
    z-index: 1;
    padding: var(--ax-space-6) var(--ax-space-6);
}

.relazione-heading[b-q2csgfd7cf] {
    padding-bottom: var(--ax-space-4);
    margin-bottom: var(--ax-space-4);
    border-bottom: 1px solid var(--ax-paper-border);
}

.relazione-kicker[b-q2csgfd7cf] {
    font-size: var(--ax-fs-11);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ax-primary-700);
    margin-bottom: 4px;
    font-weight: 700;
}

.relazione-titolo[b-q2csgfd7cf] {
    font-size: var(--ax-fs-24);
    line-height: 1.15;
    font-weight: 700;
    color: var(--ax-paper-text);
    letter-spacing: -0.01em;
}

.relazione-capitolo-blocco + .relazione-capitolo-blocco[b-q2csgfd7cf] {
    margin-top: var(--ax-space-6);
}

.relazione-capitolo[b-q2csgfd7cf] {
    margin: 0 0 var(--ax-space-3) 0;
    font-size: var(--ax-fs-18);
    line-height: 1.2;
    font-weight: 600;
    color: var(--ax-paper-text);
    letter-spacing: -0.01em;
    padding-bottom: var(--ax-space-2);
    border-bottom: 1px solid var(--ax-paper-border);
}

.relazione-paragrafo + .relazione-paragrafo[b-q2csgfd7cf] {
    margin-top: var(--ax-space-4);
}

.relazione-paragrafo-titolo[b-q2csgfd7cf] {
    margin: 0 0 var(--ax-space-2) 0;
    font-size: var(--ax-fs-14);
    line-height: 1.25;
    font-weight: 600;
    color: var(--ax-text-2);
}

.relazione-testo[b-q2csgfd7cf] {
    font-size: var(--ax-fs-14);
    line-height: 1.7;
    color: var(--ax-paper-text-soft);
    text-align: justify;
}

.relazione-testo + .relazione-formula[b-q2csgfd7cf],
.relazione-formula + .relazione-testo[b-q2csgfd7cf],
.relazione-formula + .relazione-formula[b-q2csgfd7cf] {
    margin-top: var(--ax-space-3);
}

.relazione-formula[b-q2csgfd7cf] {
    display: flex;
    justify-content: center;
}

.relazione-formula-box[b-q2csgfd7cf] {
    width: 100%;
    padding: var(--ax-space-4);
    border-radius: var(--ax-radius-sm);
    border: 1px solid var(--ax-paper-border);
    background: var(--ax-paper-bg-2);
    color: var(--ax-paper-text);
    font-family: var(--ax-font-mono);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1200px) {
    .studio-grid[b-q2csgfd7cf] {
        grid-template-columns: 1fr;
    }

    .studio-hero[b-q2csgfd7cf] {
        grid-template-columns: 1fr;
    }

    .studio-hero-right[b-q2csgfd7cf] {
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .result-grid[b-q2csgfd7cf] {
        grid-template-columns: 1fr;
    }

    .input-row[b-q2csgfd7cf] {
        grid-template-columns: 1fr;
    }

    .input-editor[b-q2csgfd7cf] {
        grid-template-columns: minmax(0, 1fr) 5.5rem;
    }
}

@media (max-width: 640px) {
    .studio-hero[b-q2csgfd7cf] {
        padding: var(--ax-space-5);
    }

    .panel-card[b-q2csgfd7cf] {
        padding: var(--ax-space-4);
    }

    .relazione-contenuto[b-q2csgfd7cf] {
        padding: var(--ax-space-5) var(--ax-space-4);
    }

    .relazione-testo[b-q2csgfd7cf] {
        font-size: var(--ax-fs-13);
        line-height: 1.62;
        text-align: left;
    }

    .menu-relazione-popup[b-q2csgfd7cf] {
        min-width: 12rem;
    }
}