:root {
    --brand-yellow: #fcb200;
    --brand-yellow-hover: #e6a300;
    --brand-yellow-soft: #fff4d1;
    --brand-black: #0f1011;
    --brand-charcoal: #232426;
    --brand-gray-900: #303134;
    --brand-gray-700: #66686c;
    --brand-gray-500: #989a9e;
    --brand-gray-300: #d9dadd;
    --brand-gray-200: #e9eaec;
    --brand-gray-100: #f4f4f5;
    --white: #ffffff;
    --header-height: 82px;
    --footer-height: 70px;
    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 13px;
    --shadow-soft: 0 10px 34px rgba(15, 16, 17, .06);
    --shadow-header: 0 2px 18px rgba(15, 16, 17, .07);
    --font-main: "Inter", "Segoe UI", Arial, sans-serif;
}

/* Indicatore documenti da controllare: desktop e menu mobile. */
.nav-links a .nav-documenti-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.nav-links a .nav-documenti-indicator {
    display: inline-block;
    width: 11px;
    height: 11px;
    min-width: 11px;
    min-height: 11px;
    flex: 0 0 11px;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #e5484d;
    line-height: 0;
    box-shadow: 0 0 0 3px rgba(229, 72, 77, .12);
    animation: documenti-indicator-pulse 3s ease-in-out infinite;
}

    .nav-links a .nav-documenti-indicator[hidden] {
        display: none !important;
    }

@keyframes documenti-indicator-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(229, 72, 77, .12);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(229, 72, 77, .04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-links a .nav-documenti-indicator {
        animation: none;
    }
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100%;
    color: var(--brand-black);
    background: #f7f7f8;
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    body.nav-open {
        overflow: hidden;
    }

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: var(--font-main);
    font-size: inherit;
}

.ui-icon,
.nav-icon,
.button-icon,
.profile-menu-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ui-icon,
.button-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}


/* =========================================================
   HEADER
   ========================================================= */

.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-height);
    background: #ffffff;
    border-bottom: 1px solid var(--brand-gray-200);
    box-shadow: var(--shadow-header);
}

.header-inner {
    width: min( 1500px, calc(100% - 42px) );
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 275px minmax(460px, 1fr) auto;
    align-items: center;
    gap: 24px;
}


/* =========================================================
   LOGO
   ========================================================= */

.brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
}

.brand-logo {
    display: block;
    width: 245px;
    max-width: 100%;
    height: auto;
}


/* =========================================================
   MENU DESKTOP
   ========================================================= */

.main-nav {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-links {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
}

    .nav-links a {
        position: relative;
        min-height: 44px;
        padding: 0 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 9px;
        color: #66686c;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: .012em;
        white-space: nowrap;
        transition: color .18s ease, background-color .18s ease;
    }

        .nav-links a:hover {
            color: var(--brand-black);
            background: #f6f6f7;
        }

        .nav-links a.is-active {
            color: var(--brand-black);
            background: transparent;
            font-weight: 600;
        }

            .nav-links a.is-active .nav-icon {
                color: #9a6c00;
            }

.nav-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    transition: color .18s ease, transform .18s ease;
}

.nav-links a:hover .nav-icon {
    transform: translateY(-1px);
}


/* LINEA GIALLA */

.nav-links a::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: -8px;
    height: 2px;
    border-radius: 10px;
    background: var(--brand-yellow);
    opacity: 0;
    transform: scaleX(.45);
    transition: opacity .18s ease, transform .18s ease;
}

.nav-links a:hover::after {
    opacity: .35;
    transform: scaleX(.7);
}

.nav-links a.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}


/* PUNTINI SOLO MOBILE */

.nav-dot {
    display: none;
}


/* ELEMENTI SOLO MOBILE */

.mobile-nav-header,
.mobile-nav-footer {
    display: none;
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}


/* =========================================================
   CARICA DOCUMENTO
   ========================================================= */

.btn-upload {
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 11px;
    background: var(--brand-yellow);
    color: var(--brand-black);
    font-size: .90rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: transform .18s ease, background .18s ease;
}

    .btn-upload:hover {
        background: var(--brand-yellow-hover);
        transform: translateY(-1px);
    }

.btn-upload-plus {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

.btn-upload .button-icon,
.mobile-upload-button .button-icon {
    stroke-width: 2;
}


/* =========================================================
   PROFILO HEADER
   ========================================================= */

.profile-menu {
    position: relative;
}

.profile-button {
    height: 48px;
    padding: 0 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--brand-black);
    cursor: pointer;
    transition: background .18s ease;
}

    .profile-button:hover,
    .profile-menu.is-open .profile-button {
        background: var(--brand-gray-100);
    }

.profile-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-black);
    color: var(--brand-yellow);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
}

.profile-copy {
    display: grid;
    text-align: left;
    line-height: 1.2;
}

    .profile-copy strong {
        font-size: .83rem;
        font-weight: 600;
    }

    .profile-copy small {
        margin-top: 3px;
        color: var(--brand-gray-700);
        font-size: .71rem;
    }

.profile-chevron {
    width: 16px;
    height: 16px;
    margin-left: 2px;
    color: var(--brand-gray-700);
    transition: transform .18s ease;
}

.profile-menu.is-open .profile-chevron {
    transform: rotate(180deg);
}


/* =========================================================
   DROPDOWN PROFILO
   ========================================================= */

.profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1200;
    width: 255px;
    padding: 8px;
    border: 1px solid var(--brand-gray-200);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(15, 16, 17, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.profile-menu.is-open
.profile-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.profile-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
}

    .profile-dropdown-header div {
        min-width: 0;
    }

    .profile-dropdown-header strong {
        display: block;
        font-size: 14px;
        font-weight: 600;
    }

    .profile-dropdown-header
    span:not(.profile-avatar) {
        display: block;
        margin-top: 3px;
        color: var(--brand-gray-700);
        font-size: 12px;
    }

.profile-avatar-large {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
}

.profile-dropdown a {
    min-height: 43px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-radius: 9px;
    color: #3f4144;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}

    .profile-dropdown a:hover {
        background: var(--brand-gray-100);
        color: var(--brand-black);
    }

.profile-menu-icon {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    color: var(--brand-gray-700);
    stroke-width: 1.7;
}

.profile-dropdown a:hover .profile-menu-icon {
    color: var(--brand-black);
}

.profile-dropdown .profile-logout .profile-menu-icon {
    color: currentColor;
}

.profile-dropdown-divider {
    height: 1px;
    margin: 7px 5px;
    background: var(--brand-gray-200);
}

.profile-dropdown
.profile-logout {
    color: #8b3737;
}


/* =========================================================
   HAMBURGER
   ========================================================= */

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--brand-gray-200);
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

    .nav-toggle span {
        width: 20px;
        height: 4px;
        border-radius: 10px;
        background: var(--brand-black);
        transition: transform .2s ease, opacity .2s ease;
    }

    .nav-toggle.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }


/* =========================================================
   BACKDROP MOBILE
   ========================================================= */

.mobile-nav-backdrop {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: rgba(15, 16, 17, .36);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}

    .mobile-nav-backdrop.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }


/* =========================================================
   MAIN
   FOOTER SEMPRE IN FONDO
   ========================================================= */

.app-main {
    width: 100%;
    min-width: 0;
    /*
     * Il main occupa almeno la viewport meno il footer.
     * Il padding dell'header è compreso nella min-height
     * grazie a box-sizing:border-box.
     */

    min-height: calc( 100vh - var(--footer-height) );
    min-height: calc( 100dvh - var(--footer-height) );
    padding-top: calc( var(--header-height) + 36px );
}

.page-shell {
    width: min( 1320px, calc(100% - 48px) );
    margin: 0 auto;
    padding-bottom: 54px;
}


/* =========================================================
   PAGE HEADING
   ========================================================= */

.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 30px;
}

.section-kicker,
.panel-kicker {
    display: block;
    margin-bottom: 8px;
    color: #a17100;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.page-heading h1 {
    margin: 0;
    max-width: 760px;
    font-size: clamp( 2rem, 4vw, 3.15rem );
    line-height: 1.1;
    font-weight: 600;
}

.page-heading p {
    max-width: 690px;
    margin: 15px 0 0;
    color: var(--brand-gray-700);
    font-size: 1rem;
    line-height: 1.7;
}

.heading-actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}


/* =========================================================
   BOTTONI
   ========================================================= */

.btn {
    min-height: 46px;
    padding: 0 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: .91rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

    .btn:hover {
        transform: translateY(-1px);
    }

.btn-primary {
    background: var(--brand-yellow);
    color: var(--brand-black);
}

    .btn-primary:hover {
        background: var(--brand-yellow-hover);
    }

.btn-secondary {
    border-color: var(--brand-gray-300);
    background: var(--white);
    color: var(--brand-black);
}

    .btn-secondary:hover {
        border-color: #bfc0c3;
    }

.btn-dark {
    background: var(--brand-black);
    color: var(--white);
}

.btn-block {
    width: 100%;
}


/* =========================================================
   STATISTICHE
   ========================================================= */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 18px;
}

.stat-card,
.panel {
    border: 1px solid var(--brand-gray-200);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.stat-card {
    min-height: 166px;
    padding: 21px;
    border-radius: var(--radius-lg);
}

.stat-card-accent {
    background: var(--brand-yellow);
    border-color: var(--brand-yellow);
}

.stat-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.stat-label {
    color: var(--brand-gray-700);
    font-size: .81rem;
    font-weight: 600;
}

.stat-card-accent
.stat-label,
.stat-card-accent
.stat-caption {
    color: rgba(15, 16, 17, .72);
}

.stat-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--brand-black);
    color: var(--brand-yellow);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

.stat-icon-light {
    background: var(--brand-gray-100);
    color: var(--brand-black);
}

.stat-value {
    display: block;
    margin-top: 18px;
    font-size: 2.35rem;
    font-weight: 600;
    line-height: 1;
}

.stat-caption {
    display: block;
    margin-top: 9px;
    color: var(--brand-gray-700);
    font-size: .80rem;
    line-height: 1.45;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, .75fr);
    gap: 18px;
}


/* =========================================================
   PANEL
   ========================================================= */

.panel {
    min-width: 0;
    padding: 24px;
    border-radius: var(--radius-xl);
}

.panel-large {
    min-height: 300px;
}

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

    .panel-header.compact {
        margin-bottom: 12px;
    }

.panel h2 {
    margin: 0;
    font-size: 1.43rem;
    font-weight: 600;
    line-height: 1.25;
}

.text-link {
    margin-top: 5px;
    color: var(--brand-gray-700);
    font-size: .83rem;
    font-weight: 500;
    white-space: nowrap;
}

    .text-link:hover {
        color: var(--brand-black);
    }


/* =========================================================
   SCADENZE
   ========================================================= */

.deadline-list {
    display: grid;
}

.deadline-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto 22px;
    align-items: center;
    gap: 16px;
    padding: 14px 6px;
    border-top: 1px solid var(--brand-gray-200);
}

    .deadline-row:first-child {
        border-top: 0;
    }

    .deadline-row:hover
    .deadline-main strong,
    .deadline-row:hover
    .row-arrow {
        color: #a17100;
    }

.deadline-date {
    width: 58px;
    height: 58px;
    display: grid;
    place-content: center;
    border: 1px solid var(--brand-gray-200);
    border-radius: 14px;
    background: var(--brand-gray-100);
    text-align: center;
}

    .deadline-date.urgent {
        border-color: #f4cf6c;
        background: var(--brand-yellow-soft);
    }

    .deadline-date strong {
        font-size: 1.10rem;
        font-weight: 600;
        line-height: 1;
    }

    .deadline-date span {
        margin-top: 4px;
        color: var(--brand-gray-700);
        font-size: .64rem;
        font-weight: 600;
        letter-spacing: .08em;
    }

.deadline-main {
    min-width: 0;
}

    .deadline-main strong,
    .deadline-main span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .deadline-main strong {
        font-size: .92rem;
        font-weight: 600;
    }

    .deadline-main span {
        margin-top: 5px;
        color: var(--brand-gray-700);
        font-size: .79rem;
    }

.status-badge {
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--brand-gray-100);
    color: var(--brand-gray-700);
    font-size: .70rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-warning {
    background: var(--brand-yellow-soft);
    color: #805b00;
}

.row-arrow {
    color: var(--brand-gray-500);
    font-size: 1.6rem;
}


/* =========================================================
   LUMO INSIGHT
   ========================================================= */

.smart-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient( 145deg, #171819, #0e0f10 );
    color: var(--white);
    border-color: #202124;
}

    .smart-panel::after {
        content: "";
        position: absolute;
        width: 190px;
        height: 190px;
        right: -80px;
        top: -95px;
        border-radius: 50%;
        background: rgba(252, 178, 0, .13);
    }

.smart-badge {
    position: relative;
    z-index: 1;
    width: max-content;
    margin-bottom: 38px;
    padding: 7px 10px;
    border: 1px solid rgba(252, 178, 0, .36);
    border-radius: 999px;
    color: var(--brand-yellow);
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .12em;
}

.smart-panel h2,
.smart-panel p,
.smart-panel .btn,
.smart-dismiss {
    position: relative;
    z-index: 1;
}

.smart-panel h2 {
    font-size: 1.52rem;
    font-weight: 600;
    line-height: 1.2;
}

.smart-panel p {
    margin: 13px 0 25px;
    color: #b7b8bb;
    font-size: .89rem;
    line-height: 1.7;
}

.smart-panel .btn-dark {
    background: var(--brand-yellow);
    color: var(--brand-black);
}

.smart-dismiss {
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    border: 0;
    background: transparent;
    color: #a1a2a5;
    font-size: .76rem;
    cursor: pointer;
}


/* =========================================================
   DOCUMENTI
   ========================================================= */

.document-grid {
    display: grid;
    grid-template-columns: repeat( 2, minmax(0, 1fr) );
    gap: 10px;
}

.document-card {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid var(--brand-gray-200);
    border-radius: var(--radius-md);
    background: #fbfbfc;
}

    .document-card:hover {
        border-color: #c8c9cc;
        background: var(--white);
    }

.document-type,
.add-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--brand-black);
    color: var(--brand-yellow);
    font-size: .67rem;
    font-weight: 600;
    line-height: 1;
}

.document-card strong,
.document-card span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-card strong {
    font-size: .85rem;
    font-weight: 600;
}

.document-card span {
    margin-top: 4px;
    color: var(--brand-gray-700);
    font-size: .73rem;
}

.add-document {
    border-style: dashed;
    background: var(--brand-yellow-soft);
    border-color: #e6c365;
}

.add-icon {
    background: var(--brand-yellow);
    color: var(--brand-black);
    font-size: 1.4rem;
    font-weight: 400;
}


/* =========================================================
   FAMIGLIA
   ========================================================= */

.people-list {
    display: grid;
}

.person-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    border-top: 1px solid var(--brand-gray-200);
}

    .person-row:first-child {
        border-top: 0;
    }

.person-avatar {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-gray-100);
    color: var(--brand-black);
    font-size: .76rem;
    font-weight: 600;
    line-height: 1;
}

    .person-avatar.yellow {
        background: var(--brand-yellow);
    }

.person-row div {
    min-width: 0;
}

.person-row strong,
.person-row span {
    display: block;
}

.person-row strong {
    font-size: .84rem;
    font-weight: 600;
}

.person-row span {
    margin-top: 3px;
    color: var(--brand-gray-700);
    font-size: .72rem;
}


/* =========================================================
   FOOTER
   ========================================================= */

.app-footer {
    width: 100%;
    background: var(--white);
    border-top: 1px solid var(--brand-gray-200);
}

.footer-inner {
    width: min( 1320px, calc(100% - 48px) );
    min-height: var(--footer-height);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: var(--brand-gray-700);
    font-size: .76rem;
}


/* =========================================================
   PAGINA PROFILO
   ========================================================= */

.profile-page {
    max-width: 1240px;
}

.profile-page-heading {
    margin-bottom: 27px;
}

    .profile-page-heading h1 {
        margin: 0;
        color: var(--brand-black);
        font-size: clamp( 2rem, 4vw, 3rem );
        font-weight: 600;
        line-height: 1.1;
    }

    .profile-page-heading p {
        max-width: 670px;
        margin: 12px 0 0;
        color: var(--brand-gray-700);
        font-size: .95rem;
        line-height: 1.65;
    }


/* =========================================================
   PROFILO SUMMARY
   ========================================================= */

.profile-summary-card {
    margin-bottom: 20px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--brand-gray-200);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.profile-big-avatar {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-black);
    color: var(--brand-yellow);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.profile-summary-copy {
    min-width: 0;
    flex: 1;
}

    .profile-summary-copy strong {
        display: block;
        color: var(--brand-black);
        font-size: 1rem;
        font-weight: 600;
    }

    .profile-summary-copy span {
        display: block;
        margin-top: 4px;
        overflow: hidden;
        color: var(--brand-gray-700);
        font-size: .76rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.profile-summary-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.profile-plan-badge {
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--brand-yellow-soft);
    color: #805b00;
    font-size: .68rem;
    font-weight: 600;
    white-space: nowrap;
}


/* =========================================================
   PROFILO CONTENT
   ========================================================= */

.profile-content-full {
    display: grid;
    gap: 18px;
}

.profile-section {
    padding: 28px;
    border: 1px solid var(--brand-gray-200);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.profile-section-visible {
    display: block;
}

.profile-section-header {
    padding-bottom: 21px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--brand-gray-200);
}

.profile-section-title-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.profile-section-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--brand-yellow-soft);
    color: #8a6200;
    font-size: .70rem;
    font-weight: 600;
}

.profile-section-header
.panel-kicker {
    margin-bottom: 4px;
}

.profile-section-header h2 {
    margin: 0;
    color: var(--brand-black);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.25;
}

.profile-section-header p {
    max-width: 630px;
    margin: 6px 0 0;
    color: var(--brand-gray-700);
    font-size: .80rem;
    line-height: 1.55;
}


/* =========================================================
   PROFILO FORM
   ========================================================= */

.profile-form-grid {
    display: grid;
    grid-template-columns: repeat( 2, minmax(0, 1fr) );
    gap: 20px;
}

.profile-form-group {
    min-width: 0;
}

.profile-form-group-wide {
    grid-column: 1 / -1;
}

.profile-form-group label {
    display: block;
    margin-bottom: 7px;
    color: #45474a;
    font-size: .78rem;
    font-weight: 600;
}

.profile-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--brand-gray-300);
    border-radius: 11px;
    outline: none;
    background: #ffffff;
    color: var(--brand-black);
    font-family: var(--font-main);
    font-size: .88rem;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

    .profile-input::placeholder {
        color: #a4a5a8;
    }

    .profile-input:hover {
        border-color: #bfc0c2;
    }

    .profile-input:focus {
        border-color: var(--brand-yellow);
        box-shadow: 0 0 0 3px rgba(252, 178, 0, .13);
    }

.profile-uppercase {
    text-transform: uppercase;
}

.profile-field-hint {
    display: block;
    margin-top: 6px;
    color: var(--brand-gray-500);
    font-size: .68rem;
    line-height: 1.45;
}

.profile-section-actions {
    margin-top: 27px;
    padding-top: 21px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--brand-gray-200);
}

.profile-save-button {
    min-width: 145px;
}


/* =========================================================
   PROFILO PASSWORD
   ========================================================= */

.profile-security-content {
    max-width: 820px;
}

    .profile-security-content > .profile-form-group {
        max-width: 400px;
        margin-bottom: 20px;
    }

.profile-password-grid {
    margin-top: 4px;
}

.profile-password-field {
    position: relative;
}

.profile-password-input {
    padding-right: 48px;
}

.profile-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 34px;
    height: 34px;
    padding: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--brand-gray-700);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

    .profile-password-toggle:hover,
    .profile-password-toggle.is-visible {
        background: var(--brand-gray-100);
        color: var(--brand-black);
    }

    .profile-password-toggle svg {
        width: 18px;
        height: 18px;
    }


/* =========================================================
   PROFILO PREFERENZE
   ========================================================= */

.profile-preferences-list {
    display: grid;
}

.profile-preference-row {
    min-height: 84px;
    padding: 15px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border-top: 1px solid var(--brand-gray-200);
    cursor: pointer;
}

    .profile-preference-row:first-child {
        border-top: 0;
    }

.profile-preference-copy {
    min-width: 0;
}

    .profile-preference-copy strong {
        display: block;
        color: var(--brand-black);
        font-size: .86rem;
        font-weight: 600;
    }

    .profile-preference-copy > span {
        display: block;
        max-width: 650px;
        margin-top: 4px;
        color: var(--brand-gray-700);
        font-size: .75rem;
        line-height: 1.5;
    }


/* =========================================================
   SWITCH
   ========================================================= */

.profile-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex: 0 0 44px;
}

    .profile-switch input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

.profile-switch-ui {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #dadbdd;
    transition: background .2s ease;
}

    .profile-switch-ui::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 2px 6px rgba(15, 16, 17, .18);
        transition: transform .2s ease;
    }

.profile-switch
input:checked + .profile-switch-ui {
    background: var(--brand-yellow);
}

    .profile-switch
    input:checked + .profile-switch-ui::after {
        transform: translateX(20px);
    }


/* =========================================================
   PROFILO MESSAGGI
   ========================================================= */

.profile-message {
    margin-bottom: 20px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 11px;
    font-size: .79rem;
    font-weight: 500;
}

.profile-message-success {
    border: 1px solid #d8e8d8;
    background: #f3faf3;
    color: #356235;
}

.profile-message-error {
    border: 1px solid #efcece;
    background: #fff4f4;
    color: #8b3737;
}

.profile-message-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .7);
}


/* =========================================================
   AUTH LOGIN / REGISTRAZIONE
   ========================================================= */

.auth-body {
    min-height: 100vh;
    min-height: 100dvh;
    background: #f5f5f6;
}

.auth-layout {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(420px, .9fr) minmax(520px, 1.1fr);
}

.auth-brand-panel {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 50px 64px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient( 145deg, #171819, #0c0d0e );
    color: #ffffff;
}

    .auth-brand-panel::before {
        content: "";
        position: absolute;
        width: 440px;
        height: 440px;
        right: -210px;
        top: -190px;
        border-radius: 50%;
        background: rgba(252, 178, 0, .12);
    }

    .auth-brand-panel::after {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        left: -160px;
        bottom: 40px;
        border-radius: 50%;
        border: 1px solid rgba(252, 178, 0, .15);
    }

.auth-brand-logo {
    display: inline-block;
    text-decoration: none;
}

.auth-logo-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border-radius: 17px;
    background: #f4f4f5;
    border: 1px solid rgba(255,255,255,0.75);
    box-shadow: 0 8px 20px rgba(0,0,0,0.14);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}


    /* eliminiamo decorazioni */

    .auth-logo-box::before,
    .auth-logo-box::after {
        display: none;
    }


    .auth-logo-box img {
        position: relative;
        z-index: 2;
        display: block;
        width: auto;
        max-width: 235px;
        height: auto;
        filter: brightness(1.08) contrast(1.03) drop-shadow(0 2px 4px rgba(0,0,0,0.08));
    }


.auth-brand-logo:hover .auth-logo-box {
    transform: translateY(-2px);
    box-shadow: 0 11px 25px rgba(0,0,0,0.17);
}

.auth-brand-content {
    position: relative;
    z-index: 2;
    max-width: 570px;
    margin: auto 0;
}

.auth-kicker {
    display: block;
    margin-bottom: 18px;
    color: var(--brand-yellow);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
}

.auth-brand-content h1 {
    margin: 0;
    font-size: clamp( 2.6rem, 4vw, 4.5rem );
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.025em;
}

.auth-brand-content p {
    max-width: 510px;
    margin: 27px 0 0;
    color: #b8b9bc;
    font-size: 1.05rem;
    line-height: 1.75;
}

.auth-features {
    margin-top: 40px;
    display: grid;
    gap: 17px;
}

.auth-feature {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #e5e5e6;
    font-size: .92rem;
}

.auth-feature-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(252, 178, 0, .12);
    border: 1px solid rgba(252, 178, 0, .25);
    color: var(--brand-yellow);
    font-size: 12px;
    font-weight: 600;
}

.auth-brand-footer {
    position: relative;
    z-index: 2;
    color: #747579;
    font-size: .72rem;
}


/* =========================================================
   AUTH FORM PANEL
   ========================================================= */

.auth-form-panel {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f7f8;
}

.auth-card {
    width: 100%;
    max-width: 470px;
    padding: 42px;
    border: 1px solid var(--brand-gray-200);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(15, 16, 17, .07);
}

.auth-card-register {
    max-width: 520px;
}

.auth-mobile-logo {
    display: none;
    width: 100%;
    margin-bottom: 37px;
}

    .auth-mobile-logo img {
        display: block;
        width: 220px;
        max-width: 80%;
        height: auto;
        object-fit: contain;
    }

.auth-heading {
    margin-bottom: 31px;
}

.auth-eyebrow {
    display: block;
    margin-bottom: 9px;
    color: #9b6e00;
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .11em;
}

.auth-heading h2 {
    margin: 0;
    color: var(--brand-black);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -.015em;
}

.auth-heading p {
    margin: 9px 0 0;
    color: var(--brand-gray-700);
    font-size: .9rem;
    line-height: 1.55;
}


/* =========================================================
   AUTH FORM
   ========================================================= */

.form-group {
    margin-bottom: 19px;
}

    .form-group label {
        display: block;
        margin-bottom: 7px;
        color: #45474a;
        font-size: .79rem;
        font-weight: 600;
    }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.form-control {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--brand-gray-300);
    border-radius: 11px;
    outline: none;
    background: #ffffff;
    color: var(--brand-black);
    font-size: .9rem;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

    .form-control::placeholder {
        color: #a7a8aa;
    }

    .form-control:hover {
        border-color: #bfc0c2;
    }

    .form-control:focus {
        border-color: var(--brand-yellow);
        box-shadow: 0 0 0 3px rgba(252, 178, 0, .14);
    }

.password-field {
    position: relative;
}

.password-input {
    padding-right: 48px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 9px;
    width: 34px;
    height: 34px;
    padding: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--brand-gray-700);
    cursor: pointer;
}

    .password-toggle:hover {
        background: var(--brand-gray-100);
        color: var(--brand-black);
    }

    .password-toggle svg {
        width: 18px;
        height: 18px;
    }

.auth-options {
    margin: -3px 0 22px;
}

.check-control {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--brand-gray-700);
    font-size: .78rem;
    cursor: pointer;
}

    .check-control input {
        margin-top: 2px;
        accent-color: var(--brand-yellow);
    }

.registration-check {
    margin: 2px 0 23px;
    line-height: 1.5;
}

    .registration-check a {
        color: var(--brand-black);
        font-weight: 600;
    }

.auth-small-link {
    color: var(--brand-gray-700);
    font-size: .73rem;
    font-weight: 500;
}

    .auth-small-link:hover {
        color: var(--brand-black);
    }

.auth-submit {
    width: 100%;
    height: 49px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 11px;
    background: var(--brand-yellow);
    color: var(--brand-black);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}

    .auth-submit:hover {
        background: var(--brand-yellow-hover);
        transform: translateY(-1px);
    }

.auth-message {
    margin-bottom: 22px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: .78rem;
    line-height: 1.5;
}

.auth-message-error {
    border: 1px solid #efcece;
    background: #fff4f4;
    color: #8b3737;
}

.auth-separator {
    position: relative;
    margin: 26px 0;
    text-align: center;
}

    .auth-separator::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--brand-gray-200);
    }

    .auth-separator span {
        position: relative;
        padding: 0 12px;
        background: #ffffff;
        color: var(--brand-gray-500);
        font-size: .72rem;
    }

.auth-register-copy {
    margin: 0;
    color: var(--brand-gray-700);
    font-size: .82rem;
    text-align: center;
}

    .auth-register-copy a {
        color: var(--brand-black);
        font-weight: 600;
    }

.auth-legal {
    margin: 23px 0 0;
    color: #999a9d;
    font-size: .67rem;
    line-height: 1.55;
    text-align: center;
}

.field-hint {
    display: block;
    margin-top: 6px;
    color: var(--brand-gray-500);
    font-size: .68rem;
}


/* =========================================================
   DESKTOP MEDIO
   ========================================================= */

@media (max-width: 1240px) {

    .header-inner {
        grid-template-columns: 230px minmax(420px, 1fr) auto;
        gap: 16px;
    }

    .brand-logo {
        width: 215px;
    }

    .nav-links a {
        padding: 0 11px;
        font-size: 13px;
    }

        .nav-links a::after {
            left: 11px;
            right: 11px;
        }

    .profile-copy,
    .profile-chevron {
        display: none;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================
   AUTH TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .auth-layout {
        display: block;
    }

    .auth-brand-panel {
        display: none;
    }

    .auth-form-panel {
        padding: 34px 20px;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .auth-card {
        max-width: 500px;
    }

    .auth-mobile-logo {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


/* =========================================================
   TABLET / MOBILE MASTERPAGE
   ========================================================= */

@media (max-width: 980px) {

    :root {
        --header-height: 72px;
    }

    .header-inner {
        width: calc(100% - 28px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }

    .brand-logo {
        width: 195px;
    }

    .nav-toggle {
        display: inline-flex;
        order: 3;
    }

    .header-actions {
        margin-left: auto;
    }

    .profile-button {
        display: none;
    }


    /* DRAWER */

    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min( 360px, 88vw );
        height: 100vh;
        height: 100dvh;
        z-index: 1100;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        background: #ffffff;
        border-left: 1px solid var(--brand-gray-200);
        box-shadow: -20px 0 50px rgba(15, 16, 17, .18);
        visibility: hidden;
        transform: translateX(100%);
        transition: transform .25s ease, visibility .25s ease;
    }

        .main-nav.is-open {
            visibility: visible;
            transform: translateX(0);
        }

    .mobile-nav-header {
        min-height: 78px;
        padding: 0 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
        background: #ffffff;
        border-bottom: 1px solid var(--brand-gray-200);
    }

    .mobile-nav-title {
        color: var(--brand-black);
        font-size: 17px;
        font-weight: 600;
    }

    .mobile-nav-close {
        width: 38px;
        height: 38px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 10px;
        background: var(--brand-gray-100);
        color: var(--brand-black);
        font-family: Arial, sans-serif;
        font-size: 26px;
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
    }

        .mobile-nav-close .ui-icon {
            width: 20px;
            height: 20px;
        }

    .nav-links {
        flex: 1 1 auto;
        width: 100%;
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        overflow-y: auto;
        background: #ffffff;
    }

        .nav-links a {
            width: 100%;
            min-height: 54px;
            padding: 0 14px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            border-radius: 11px;
            color: #4e5054;
            background: transparent;
            font-size: 16px;
            font-weight: 500;
        }

            .nav-links a::after {
                display: none;
            }

            .nav-links a:hover {
                color: var(--brand-black);
                background: var(--brand-gray-100);
            }

            .nav-links a.is-active {
                color: var(--brand-black);
                background: var(--brand-yellow-soft);
                font-weight: 600;
            }

                .nav-links a.is-active .nav-icon {
                    color: #805b00;
                }

    .nav-dot {
        width: 6px;
        height: 6px;
        flex: 0 0 6px;
        display: inline-block;
        border-radius: 50%;
        background: #c1c2c5;
    }

    .nav-links a.is-active
    .nav-dot {
        background: var(--brand-yellow);
    }

    .mobile-nav-footer {
        padding: 18px;
        display: block;
        flex: 0 0 auto;
        border-top: 1px solid var(--brand-gray-200);
        background: #fafafa;
    }

    .mobile-nav-footer-label {
        display: block;
        margin: 0 0 10px 3px;
        color: var(--brand-gray-700);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .mobile-upload-button {
        width: 100%;
        min-height: 48px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        border-radius: 11px;
        background: var(--brand-yellow);
        color: var(--brand-black);
        font-size: 14px;
        font-weight: 600;
    }

    .app-main {
        padding-top: calc( var(--header-height) + 28px );
    }

    .page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   PROFILO RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

    .profile-summary-card {
        padding: 17px;
    }

    .profile-big-avatar {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

    .profile-plan-badge {
        display: none;
    }

    .profile-section {
        padding: 21px 17px;
        border-radius: 18px;
    }

    .profile-form-grid {
        grid-template-columns: 1fr;
    }

    .profile-form-group-wide {
        grid-column: auto;
    }

    .profile-security-content > .profile-form-group {
        max-width: none;
    }

    .profile-section-actions {
        justify-content: stretch;
    }

        .profile-section-actions
        .btn {
            width: 100%;
        }

    .profile-preference-row {
        gap: 15px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    :root {
        --footer-height: 84px;
    }

    body {
        font-size: 14.5px;
    }

    .header-inner {
        width: calc(100% - 22px);
    }

    .brand-logo {
        width: 170px;
    }

    .btn-upload {
        width: 42px;
        height: 42px;
        padding: 0;
    }

        .btn-upload
        span:last-child {
            display: none;
        }

    .btn-upload-plus {
        font-size: 1.4rem;
    }

    .page-shell,
    .footer-inner {
        width: calc(100% - 26px);
    }

    .page-heading {
        margin-bottom: 22px;
    }

        .page-heading h1 {
            font-size: 2.20rem;
            line-height: 1.1;
        }

    .heading-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .stat-card {
        min-height: 148px;
        padding: 17px;
    }

    .stat-value {
        font-size: 2rem;
    }

    .panel {
        padding: 18px;
        border-radius: 18px;
    }

    .deadline-row {
        grid-template-columns: 52px minmax(0, 1fr) 18px;
        gap: 11px;
    }

    .status-badge {
        display: none;
    }

    .document-grid {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        min-height: var(--footer-height);
        padding: 17px 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 6px;
    }
}


/* =========================================================
   AUTH MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .auth-form-panel {
        align-items: flex-start;
        padding: 24px 14px;
    }

    .auth-card {
        padding: 28px 23px;
        border-radius: 19px;
    }

    .auth-mobile-logo {
        margin-bottom: 31px;
    }

    .auth-heading h2 {
        font-size: 1.75rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}


/* =========================================================
   MOBILE PICCOLO
   ========================================================= */

@media (max-width: 430px) {

    .brand-logo {
        width: 158px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .heading-actions {
        grid-template-columns: 1fr;
    }

    .profile-section-title-row {
        gap: 11px;
    }

    .profile-section-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .profile-summary-copy span {
        max-width: 210px;
    }
}

.auth-card-registration {
    width: 100%;
    max-width: 520px;
}

.registration-name-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.auth-submit:disabled {
    cursor: wait;
    opacity: 0.72;
}

@media (max-width: 560px) {

    .registration-name-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.auth-card .password-rules {
    display: block;
    margin: 8px 2px 0;
    color: #64686e;
    opacity: 1;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.45;
}

/* =========================================================
   LUMO365 NOTIFICHE
   ========================================================= */

.lumo-notification-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(390px, calc(100vw - 32px));
    pointer-events: none;
}


.lumo-notification {
    --notification-color: #62676d;
    --notification-background: #ffffff;
    --notification-border: #d8dade;
    --notification-duration: 4500ms;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 28px;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 15px 14px;
    color: #292c30;
    background: var(--notification-background);
    border: 1px solid var(--notification-border);
    border-left: 4px solid var(--notification-color);
    border-radius: 15px;
    box-shadow: 0 18px 45px rgba(15, 16, 17, 0.18), 0 3px 10px rgba(15, 16, 17, 0.08);
    opacity: 0;
    transform: translateX(35px);
    pointer-events: auto;
    animation: lumo-notification-in 0.32s ease forwards;
}


/* SUCCESSO - VERDE */

.lumo-notification-success {
    --notification-color: #28785f;
    --notification-background: #f0f8f5;
    --notification-border: #bddfd3;
}


/* AVVISO - GIALLO */

.lumo-notification-warning {
    --notification-color: #b27816;
    --notification-background: #fff8e8;
    --notification-border: #eed397;
}


/* ERRORE - ROSSO */

.lumo-notification-error {
    --notification-color: #b74742;
    --notification-background: #fff2f1;
    --notification-border: #ecc3c0;
}


.lumo-notification-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: #ffffff;
    background: var(--notification-color);
    border-radius: 13px;
    font-size: 1.2rem;
    font-weight: 800;
    box-shadow: 0 8px 18px color-mix( in srgb, var(--notification-color) 28%, transparent );
}


.lumo-notification-content {
    min-width: 0;
}


.lumo-notification-title {
    display: block;
    margin-bottom: 3px;
    color: var(--notification-color);
    font-size: 0.86rem;
    font-weight: 750;
    letter-spacing: 0.02em;
}


.lumo-notification-message {
    margin: 0;
    color: #50545a;
    font-size: 0.88rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}


.lumo-notification-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: #767b81;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}


    .lumo-notification-close:hover {
        color: #25272a;
        background: rgba(15, 16, 17, 0.07);
    }


.lumo-notification-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--notification-color);
    transform-origin: left center;
    animation: lumo-notification-progress var(--notification-duration) linear forwards;
}


.lumo-notification-no-timeout
.lumo-notification-progress {
    display: none;
}


.lumo-notification.is-closing {
    animation: lumo-notification-out 0.22s ease forwards;
}


@keyframes lumo-notification-in {

    from {
        opacity: 0;
        transform: translateX(35px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes lumo-notification-out {

    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(35px);
    }
}


@keyframes lumo-notification-progress {

    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}


@media (max-width: 600px) {

    .lumo-notification-container {
        top: 16px;
        right: 16px;
        left: 16px;
        width: auto;
    }
}

/* =========================================================
   LUMO365 PAGE LOADER
   ========================================================= */

/*body.lumo-page-blocked {
    overflow: hidden;
    cursor: wait !important;
}*/

body.lumo-page-blocked {
    cursor: wait !important;
}

    body.lumo-page-blocked * {
        cursor: wait !important;
    }

html {
    scrollbar-gutter: stable;
}

.lumo-page-loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 16, 17, 0.58);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    cursor: wait;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}


    .lumo-page-loader.is-visible {
        opacity: 1;
        visibility: visible;
    }


    .lumo-page-loader.is-hiding {
        opacity: 0;
        visibility: hidden;
    }


.lumo-page-loader-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(320px, 100%);
    padding: 30px 28px;
    background: radial-gradient( circle at 20% 10%, rgba(255, 255, 255, 0.95), transparent 45% ), linear-gradient( 145deg, #f7f7f8 0%, #e4e4e6 58%, #c7c8cb 100% );
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 22px;
    box-shadow: 0 28px 75px rgba(0, 0, 0, 0.48), inset 0 1px 1px rgba(255, 255, 255, 0.95);
    text-align: center;
}


.lumo-page-loader-spinner {
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    border: 5px solid rgba(102, 105, 110, 0.20);
    border-top-color: #9a6c2b;
    border-right-color: #c49a57;
    border-radius: 50%;
    animation: lumo-loader-rotation 0.75s linear infinite;
}


.lumo-page-loader-title {
    margin: 0 0 7px;
    color: #25272a;
    font-size: 1rem;
    font-weight: 750;
}


.lumo-page-loader-message {
    margin: 0;
    color: #676b70;
    font-size: 0.86rem;
    line-height: 1.5;
}


@keyframes lumo-loader-rotation {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


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

    .lumo-page-loader-spinner {
        animation-duration: 1.5s;
    }
}

.btn:disabled {
    background: #d6d6d6 !important;
    color: #8a8a8a !important;
    border-color: #d6d6d6 !important;
    opacity: 1;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

body {
    opacity: 0;
    animation: PageFadeIn 0.35s ease-out forwards;
}

@keyframes PageFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

select {
    padding-right: 30px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: linear-gradient(45deg, transparent 50%, #66686c 50%), linear-gradient(135deg, #66686c 50%, transparent 50%) !important;
    background-position: calc(100% - 24px) 50%, calc(100% - 18px) 50% !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
}