/* ==========================================================================
   Club OS — interfaccia dell'app (MyClub, MyTeam, Family, Gestione, Control Room)
   Stessa identità del sito del club: colori del club (--app-primary / --app-accent,
   impostati dal layout con varianti leggibili), titoli condensati, superfici pulite.
   Bootstrap resta la base dei componenti: qui ne ridefiniamo le variabili.
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }
h1:focus, main:focus { outline: none; }

.app {
    --app-ink: #0a0d14;
    --app-sidebar: #0b0f17;
    --app-bg: #f3f4f7;
    --app-surface: #ffffff;
    --app-surface-2: #f8f9fb;
    --app-border: #e4e7ec;
    --app-border-strong: #cfd4dc;
    --app-text: #0f131b;
    --app-muted: #5b6474;
    --app-success: #15803d;
    --app-danger: #d92d38;
    --app-warning: #b45309;
    --app-radius: 16px;
    --app-radius-sm: 10px;
    --app-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    --app-shadow-md: 0 1px 2px rgba(16, 24, 40, .06), 0 12px 28px -12px rgba(16, 24, 40, .22);
    --app-ease: cubic-bezier(.2, .7, .2, 1);
    --app-display: "Bahnschrift", "DIN Condensed", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow",
        sans-serif-condensed, "Segoe UI", system-ui, sans-serif;
    --app-body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Roboto", "Helvetica Neue", Arial, sans-serif;
    --app-sidebar-w: 272px;
    --app-topbar-h: 64px;
    --app-tabbar-h: 64px;

    --app-primary-ink: var(--app-primary-ink-light);
    --app-primary-ink-rgb: var(--app-primary-ink-light-rgb);

    /* Bootstrap con i colori del club */
    --bs-primary: var(--app-primary);
    --bs-primary-rgb: var(--app-primary-rgb);
    --bs-primary-text-emphasis: var(--app-primary-ink);
    --bs-primary-bg-subtle: color-mix(in srgb, var(--app-primary) 10%, var(--app-surface));
    --bs-primary-border-subtle: color-mix(in srgb, var(--app-primary) 28%, var(--app-surface));
    --bs-link-color: var(--app-primary-ink);
    --bs-link-color-rgb: var(--app-primary-ink-rgb);
    --bs-link-hover-color: color-mix(in srgb, var(--app-primary-ink) 80%, #000);
    --bs-link-hover-color-rgb: var(--app-primary-ink-rgb);
    --bs-body-font-family: var(--app-body);
    --bs-body-color: var(--app-text);
    --bs-body-bg: var(--app-bg);
    --bs-secondary-color: var(--app-muted);
    --bs-border-color: var(--app-border);
    --bs-border-color-translucent: var(--app-border);
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 14px;
    --bs-focus-ring-color: rgba(var(--app-primary-rgb), .28);

    min-height: 100vh;
    background: var(--app-bg);
    color: var(--app-text);
    font-family: var(--app-body);
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
}

.app-skip {
    position: fixed;
    left: 16px; top: -60px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--app-ink);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.app-skip:focus { top: 12px; color: #fff; }

.app :focus-visible { outline: 3px solid rgba(var(--app-primary-rgb), .45); outline-offset: 2px; }
.app-icon { flex: none; }

/* --- Sidebar ------------------------------------------------------------ */

.app-nav-toggle {
    position: fixed;
    top: 0; left: 0;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: var(--app-sidebar-w);
    display: flex;
    flex-direction: column;
    background: var(--app-sidebar);
    color: rgba(255, 255, 255, .72);
    border-right: 1px solid rgba(255, 255, 255, .05);
}
.app-sidebar::before {
    content: "";
    height: 4px;
    flex: none;
    background: linear-gradient(90deg, var(--app-primary) 0 55%, var(--app-accent) 55% 100%);
}
.app-sidebar::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(420px 260px at 0 0, rgba(var(--app-primary-rgb), .28), transparent 70%);
}
.app-sidebar__brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 20px 18px 10px 20px; }
.app-sidebar__close { display: none; color: #fff; }

.app-brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.app-brand__crest {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--app-primary);
    color: var(--app-on-primary);
    box-shadow: inset 0 -4px 0 var(--app-accent), 0 6px 16px -6px rgba(var(--app-primary-rgb), .8);
    font-family: var(--app-display);
    font-stretch: 75%;
    font-variation-settings: "wdth" 75;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .02em;
    overflow: hidden;
}
.app-brand__crest--logo { background: #fff; box-shadow: none; padding: 4px; }
.app-brand__crest--logo img { width: 100%; height: 100%; object-fit: contain; }
.app-brand__text { display: flex; flex-direction: column; min-width: 0; }
.app-brand__text strong {
    font-family: var(--app-display);
    font-stretch: 75%;
    font-variation-settings: "wdth" 75;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-brand__text small { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }

.app-nav { flex: 1; overflow-y: auto; padding: 4px 14px 16px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.app-nav__group + .app-nav__group { margin-top: 6px; }
.app-nav__title { margin: 16px 12px 6px; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .38); }
.app-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    color: rgba(255, 255, 255, .72);
    font-size: .94rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.app-nav__link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.app-nav__link.active { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; }
.app-nav__link.active::before {
    content: "";
    position: absolute;
    left: -14px; top: 8px; bottom: 8px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--app-accent);
}
.app-nav__link.active .app-icon { color: var(--app-accent-light); }
.app-nav__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-nav__badge {
    display: grid;
    place-items: center;
    min-width: 22px; height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--app-accent);
    color: var(--app-on-accent);
    font-size: .72rem;
    font-weight: 700;
}

.app-sidebar__user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 12px 14px;
    padding: 10px 8px 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .06);
}
.app-sidebar__user form { margin: 0; }
.app-sidebar__who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.app-sidebar__who strong { color: #fff; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-sidebar__who a { color: rgba(255, 255, 255, .5); font-size: .78rem; text-decoration: none; }
.app-sidebar__who a:hover { color: #fff; }
.app-sidebar .app-iconbtn { color: rgba(255, 255, 255, .7); }
.app-sidebar .app-iconbtn:hover { color: #fff; background: rgba(255, 255, 255, .08); }

.app-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--app-accent);
    color: var(--app-on-accent);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.app-avatar--button { cursor: pointer; list-style: none; border: 2px solid var(--app-surface); box-shadow: 0 0 0 1px var(--app-border); }
.app-avatar--button::-webkit-details-marker { display: none; }

.app-iconbtn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 42px; height: 42px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color .15s;
}
.app-iconbtn:hover { background: rgba(15, 19, 27, .06); color: inherit; }

.app-overlay { display: none; }

/* --- Corpo, topbar, footer ---------------------------------------------- */

.app-body { min-height: 100vh; margin-left: var(--app-sidebar-w); display: flex; flex-direction: column; }
.app--guest .app-body { margin-left: 0; }

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--app-topbar-h);
    padding: 0 28px;
    background: rgba(243, 244, 247, .82);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--app-border);
}
.app-topbar__menu, .app-topbar__brand { display: none; }
.app-topbar__brand--always { display: flex; }
.app-topbar .app-brand__text strong { color: var(--app-text); }
.app-topbar .app-brand__text small { color: var(--app-muted); }
.app-topbar__spacer { flex: 1; }
.app-topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    margin-right: 4px;
    border-radius: 999px;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s;
}
.app-topbar__link:hover { border-color: var(--app-border-strong); color: var(--app-text); }

.app-dot {
    position: absolute;
    top: 3px; right: 1px;
    display: grid;
    place-items: center;
    min-width: 19px; height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    border: 2px solid var(--app-bg);
    background: var(--app-danger);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1;
}

.app-usermenu { position: relative; margin-left: 6px; }
.app-usermenu__panel {
    position: absolute;
    right: 0; top: calc(100% + 10px);
    z-index: 60;
    width: 270px;
    padding: 8px;
    border-radius: 16px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow-md);
    animation: app-pop .18s var(--app-ease);
}
.app-usermenu__panel form { margin: 0; }
.app-usermenu__name { margin: 8px 10px 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-usermenu__mail { margin: 0 10px 8px; padding-bottom: 10px; border-bottom: 1px solid var(--app-border); color: var(--app-muted); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-usermenu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--app-text);
    font-size: .93rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
}
.app-usermenu__item:hover { background: var(--app-bg); color: var(--app-text); }

@keyframes app-pop {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.app-content { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 32px 28px 56px; }
.app--guest .app-content { max-width: 1080px; }

.app-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 28px 24px;
    color: var(--app-muted);
    font-size: .78rem;
    letter-spacing: .04em;
}

.app-tabbar { display: none; }

/* --- Telefono e tablet -------------------------------------------------- */

@media (max-width: 991.98px) {
    .app-sidebar {
        width: min(86vw, 320px);
        transform: translateX(-102%);
        transition: transform .3s var(--app-ease), box-shadow .3s;
    }
    .app-nav-toggle:checked ~ .app-sidebar { transform: none; box-shadow: 24px 0 48px -12px rgba(0, 0, 0, .4); }
    .app-overlay {
        position: fixed;
        inset: 0;
        z-index: 35;
        display: block;
        background: rgba(5, 7, 12, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s;
    }
    .app-nav-toggle:checked ~ .app-overlay { opacity: 1; pointer-events: auto; }
    .app-sidebar__close { display: inline-grid; }

    .app-body { margin-left: 0; padding-bottom: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom)); }
    .app--guest .app-body { padding-bottom: 0; }
    .app-topbar { padding: 0 10px 0 6px; }
    .app-topbar__menu { display: inline-grid; }
    .app-topbar__brand { display: flex; min-width: 0; }
    .app-topbar__brand .app-brand__crest { width: 36px; height: 36px; font-size: 1.05rem; border-radius: 10px; }
    .app-topbar__link { width: 40px; padding: 0; justify-content: center; }
    .app-topbar__link span { display: none; }
    .app-content { padding: 20px 16px 32px; }
    .app-footer { padding: 8px 16px 20px; }

    .app-tabbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 30;
        display: flex;
        height: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom));
        padding: 0 4px env(safe-area-inset-bottom);
        background: rgba(255, 255, 255, .94);
        backdrop-filter: saturate(1.4) blur(14px);
        -webkit-backdrop-filter: saturate(1.4) blur(14px);
        border-top: 1px solid var(--app-border);
    }
    .app-tabbar__item {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        margin: 0;
        color: var(--app-muted);
        font-size: .68rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .app-tabbar__item.active { color: var(--app-primary-ink); }
    .app-tabbar__item.active::before {
        content: "";
        position: absolute;
        top: 0;
        width: 32px; height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--app-primary);
    }
    .app-tabbar__icon { position: relative; display: grid; place-items: center; }
    .app-tabbar__icon .app-dot { top: -6px; right: -12px; border-color: #fff; }
}

@media (max-width: 420px) {
    .app-topbar__brand .app-brand__text small { display: none; }
}

/* --- Tipografia dei contenuti ------------------------------------------- */

.app-content h1, .app-display {
    font-family: var(--app-display);
    font-stretch: 75%;
    font-variation-settings: "wdth" 75;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: .98;
}
.app-content h1 { font-size: clamp(2rem, 4.2vw, 2.9rem); }
.app-content h2, .app-content .h4, .app-content .h5, .app-content .h6 { font-weight: 700; letter-spacing: -.005em; }
.app-content h2.h6.text-uppercase { letter-spacing: .12em; font-size: .78rem; }

/* --- Intestazione pagina ------------------------------------------------ */

.app-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.app-pagehead__main { min-width: 0; flex: 1 1 420px; }
.app-pagehead__back {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: var(--app-muted);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
}
.app-pagehead__back:hover { color: var(--app-text); }
.app-eyebrow {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: var(--app-primary-ink);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.app-eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--app-accent); }
.app-pagehead h1 { margin: 0; }
.app-pagehead__lead { margin: 10px 0 0; max-width: 64ch; color: var(--app-muted); font-size: 1.02rem; }
.app-pagehead__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.app-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.app-section-title h2 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.app-section-title a { font-size: .9rem; font-weight: 600; text-decoration: none; }

/* --- Bootstrap ridisegnato ---------------------------------------------- */

.app .btn {
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: .55rem;
    --bs-btn-border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.app .btn:active { transform: translateY(1px); }
.app .btn-sm { --bs-btn-padding-x: .75rem; --bs-btn-padding-y: .35rem; --bs-btn-border-radius: 8px; --bs-btn-font-size: .85rem; gap: 6px; }
.app .btn-lg { --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: .8rem; --bs-btn-border-radius: 12px; }

.app .btn-primary {
    --bs-btn-color: var(--app-on-primary);
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-color: var(--app-on-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--app-primary) 86%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--app-primary) 86%, #000);
    --bs-btn-active-color: var(--app-on-primary);
    --bs-btn-active-bg: color-mix(in srgb, var(--app-primary) 78%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--app-primary) 78%, #000);
    --bs-btn-disabled-color: var(--app-on-primary);
    --bs-btn-disabled-bg: var(--app-primary);
    --bs-btn-disabled-border-color: var(--app-primary);
    --bs-btn-focus-shadow-rgb: var(--app-primary-rgb);
    box-shadow: 0 6px 16px -8px rgba(var(--app-primary-rgb), .7);
}
.app .btn-outline-primary {
    --bs-btn-color: var(--app-primary-ink);
    --bs-btn-border-color: color-mix(in srgb, var(--app-primary-ink) 45%, var(--app-surface));
    --bs-btn-hover-color: var(--app-on-primary);
    --bs-btn-hover-bg: var(--app-primary);
    --bs-btn-hover-border-color: var(--app-primary);
    --bs-btn-active-color: var(--app-on-primary);
    --bs-btn-active-bg: var(--app-primary);
    --bs-btn-active-border-color: var(--app-primary);
    --bs-btn-focus-shadow-rgb: var(--app-primary-rgb);
    background: var(--app-surface);
}
.app .btn-outline-primary:hover { background: var(--app-primary); }
.app .btn-outline-secondary, .app .btn-outline-dark {
    --bs-btn-color: var(--app-text);
    --bs-btn-border-color: var(--app-border-strong);
    --bs-btn-hover-color: var(--app-text);
    --bs-btn-hover-bg: var(--app-surface-2);
    --bs-btn-hover-border-color: var(--app-muted);
    --bs-btn-active-color: var(--app-text);
    --bs-btn-active-bg: var(--app-border);
    --bs-btn-active-border-color: var(--app-muted);
    background: var(--app-surface);
}
.app .btn-outline-secondary:hover, .app .btn-outline-dark:hover { background: var(--app-surface-2); }
.app .btn-dark { --bs-btn-bg: var(--app-ink); --bs-btn-border-color: var(--app-ink); --bs-btn-hover-bg: #1c2331; --bs-btn-hover-border-color: #1c2331; }
.app .btn-success { --bs-btn-bg: var(--app-success); --bs-btn-border-color: var(--app-success); --bs-btn-hover-bg: #116932; --bs-btn-hover-border-color: #116932; }
.app .btn-danger { --bs-btn-bg: var(--app-danger); --bs-btn-border-color: var(--app-danger); }
.app .btn-outline-danger { --bs-btn-color: var(--app-danger); --bs-btn-border-color: color-mix(in srgb, var(--app-danger) 45%, var(--app-surface)); --bs-btn-hover-bg: var(--app-danger); --bs-btn-hover-border-color: var(--app-danger); background: var(--app-surface); }
.app .btn-outline-danger:hover { background: var(--app-danger); }
.app .btn-outline-success { --bs-btn-color: var(--app-success); --bs-btn-border-color: color-mix(in srgb, var(--app-success) 45%, var(--app-surface)); --bs-btn-hover-bg: var(--app-success); --bs-btn-hover-border-color: var(--app-success); background: var(--app-surface); }
.app .btn-outline-success:hover { background: var(--app-success); }
.app .btn-link { text-decoration: none; font-weight: 600; }

.app .text-bg-primary { color: var(--app-on-primary) !important; }
.app .badge {
    --bs-badge-font-weight: 600;
    --bs-badge-padding-x: .62em;
    --bs-badge-padding-y: .4em;
    --bs-badge-border-radius: 999px;
    letter-spacing: .01em;
}
.app .text-bg-success { background-color: #dcfce7 !important; color: #14532d !important; }
.app .text-bg-danger { background-color: #fee2e2 !important; color: #8f1d24 !important; }
.app .text-bg-warning { background-color: #fef3c7 !important; color: #7a3e06 !important; }
.app .text-bg-info { background-color: #e0f2fe !important; color: #0b4a6f !important; }
.app .text-bg-secondary { background-color: #eceff3 !important; color: #3b4352 !important; }
.app .text-bg-light { background-color: var(--app-surface-2) !important; color: var(--app-text) !important; border: 1px solid var(--app-border); }
.app .text-bg-dark { background-color: var(--app-ink) !important; }

.app .card {
    --bs-card-border-color: var(--app-border);
    --bs-card-border-radius: var(--app-radius);
    --bs-card-inner-border-radius: calc(var(--app-radius) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-spacer-y: 1.15rem;
    --bs-card-spacer-x: 1.25rem;
    box-shadow: var(--app-shadow);
}
.app .card-header { font-weight: 700; border-bottom-color: var(--app-border); }
.app a.card { transition: transform .2s var(--app-ease), box-shadow .2s var(--app-ease), border-color .2s; }
.app a.card:hover { transform: translateY(-2px); box-shadow: var(--app-shadow-md); border-color: color-mix(in srgb, var(--app-primary) 40%, var(--app-border)); }
.app .card-body.card { box-shadow: var(--app-shadow); }

.app .list-group {
    --bs-list-group-border-color: var(--app-border);
    --bs-list-group-border-radius: var(--app-radius);
    --bs-list-group-item-padding-x: 1.1rem;
    --bs-list-group-item-padding-y: .85rem;
    --bs-list-group-action-hover-bg: var(--app-surface-2);
    box-shadow: var(--app-shadow);
}
.app .list-group-flush { box-shadow: none; }

.app .alert {
    --bs-alert-border-radius: 14px;
    --bs-alert-padding-x: 1.1rem;
    --bs-alert-padding-y: .9rem;
    border-width: 0 0 0 4px;
    font-weight: 500;
}
.app .alert-success { --bs-alert-bg: #ecfdf3; --bs-alert-color: #14532d; --bs-alert-border-color: #22a95a; }
.app .alert-danger { --bs-alert-bg: #fef2f2; --bs-alert-color: #8f1d24; --bs-alert-border-color: var(--app-danger); }
.app .alert-warning { --bs-alert-bg: #fffbeb; --bs-alert-color: #7a3e06; --bs-alert-border-color: #f59e0b; }
.app .alert-info { --bs-alert-bg: #eff8ff; --bs-alert-color: #0b4a6f; --bs-alert-border-color: #2e90fa; }

.app .form-label, .app label.form-label { font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.app .form-text { color: var(--app-muted); }
.app .form-control, .app .form-select {
    min-height: 44px;
    border-radius: 10px;
    border-color: var(--app-border-strong);
    background-color: var(--app-surface);
    font-size: 1rem;
    transition: border-color .15s, box-shadow .15s;
}
.app textarea.form-control { min-height: 88px; }
.app .form-control-sm, .app .form-select-sm { min-height: 36px; border-radius: 8px; font-size: .9rem; }
.app .form-control:hover, .app .form-select:hover { border-color: var(--app-muted); }
.app .form-control:focus, .app .form-select:focus {
    border-color: var(--app-primary-ink);
    box-shadow: 0 0 0 4px rgba(var(--app-primary-rgb), .16);
}
.app .form-check-input { width: 1.15em; height: 1.15em; border-color: var(--app-border-strong); }
.app .form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.app .form-check-input:focus { border-color: var(--app-primary-ink); box-shadow: 0 0 0 4px rgba(var(--app-primary-rgb), .16); }
.app .form-switch .form-check-input { width: 2.2em; }
.app .input-group-text { border-color: var(--app-border-strong); background: var(--app-surface-2); }

@media (max-width: 991.98px) {
    /* 16px evita lo zoom automatico di iOS sui campi. */
    .app .form-control, .app .form-select, .app .form-control-sm, .app .form-select-sm { font-size: 16px; }
}

.app .table {
    --bs-table-bg: var(--app-surface);
    --bs-table-border-color: var(--app-border);
    --bs-table-hover-bg: var(--app-surface-2);
    --bs-table-striped-bg: var(--app-surface-2);
    margin-bottom: 0;
    vertical-align: middle;
}
.app .table > :not(caption) > * > * { padding: .75rem .9rem; }
.app .table thead th {
    background: var(--app-surface-2);
    color: var(--app-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.app .table-responsive, .app .app-tablecard {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
    overflow: auto;
}
.app .table-responsive .table tr:last-child > *, .app .app-tablecard .table tr:last-child > * { border-bottom: 0; }

.app .nav-tabs { --bs-nav-tabs-border-color: var(--app-border); --bs-nav-tabs-link-active-color: var(--app-text); --bs-nav-tabs-link-active-border-color: var(--app-border) var(--app-border) var(--app-surface); gap: 4px; }
.app .nav-tabs .nav-link { font-weight: 600; color: var(--app-muted); border-radius: 10px 10px 0 0; }
.app .nav-pills { --bs-nav-pills-border-radius: 999px; --bs-nav-pills-link-active-bg: var(--app-ink); gap: 6px; }
.app .nav-pills .nav-link { font-weight: 600; color: var(--app-muted); }
.app .nav-pills .nav-link.active { color: #fff; }

.app .progress { --bs-progress-height: .6rem; --bs-progress-border-radius: 999px; --bs-progress-bg: #e9ecf1; --bs-progress-bar-bg: var(--app-primary); }
.app hr { border-color: var(--app-border); opacity: 1; }
.app code { color: var(--app-primary-ink); }
.app .text-primary { color: var(--app-primary-ink) !important; }
.app .bg-primary { color: var(--app-on-primary); }
.app .dropdown-menu { --bs-dropdown-border-radius: 14px; --bs-dropdown-border-color: var(--app-border); box-shadow: var(--app-shadow-md); }

/* --- Componenti dell'app ------------------------------------------------ */

.app-panel {
    padding: 22px;
    border-radius: var(--app-radius);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
}
.app-panel--flush { padding: 0; overflow: hidden; }

.app-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.app-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 152px;
    padding: 20px;
    border-radius: var(--app-radius);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
    color: var(--app-text);
    text-decoration: none;
    transition: transform .2s var(--app-ease), box-shadow .2s var(--app-ease), border-color .2s;
}
a.app-tile:hover { transform: translateY(-2px); box-shadow: var(--app-shadow-md); border-color: color-mix(in srgb, var(--app-primary) 40%, var(--app-border)); color: var(--app-text); }
.app-tile__icon {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--app-primary) 12%, var(--app-surface));
    color: var(--app-primary-ink);
}
.app-tile__title { font-weight: 700; font-size: 1.05rem; }
.app-tile__text { color: var(--app-muted); font-size: .92rem; line-height: 1.45; }
.app-tile__go {
    position: absolute;
    right: 16px; top: 20px;
    color: var(--app-border-strong);
    transition: transform .2s var(--app-ease), color .2s;
}
a.app-tile:hover .app-tile__go { transform: translateX(3px); color: var(--app-primary-ink); }
.app-tile--feature { background: var(--app-ink); color: #fff; border-color: transparent; overflow: hidden; isolation: isolate; }
.app-tile--feature::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 18px),
        radial-gradient(320px 200px at 100% 0, rgba(var(--app-primary-rgb), .6), transparent 70%);
}
a.app-tile--feature:hover { color: #fff; }
.app-tile--feature .app-tile__icon { background: rgba(255, 255, 255, .12); color: var(--app-accent-light); }
.app-tile--feature .app-tile__text { color: rgba(255, 255, 255, .7); }
.app-tile--feature .app-tile__go { color: rgba(255, 255, 255, .4); }

/* Benvenuto / hero delle pagine principali */
.app-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    padding: 28px 28px 26px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--app-primary) 30%, #05070c);
    color: #fff;
}
.app-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(600px 300px at 100% 0, rgba(var(--app-primary-rgb), .8), transparent 65%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 20px);
}
.app-hero::after {
    content: attr(data-mark);
    position: absolute;
    right: 12px; bottom: -40px;
    z-index: -1;
    font-family: var(--app-display);
    font-stretch: 75%;
    font-variation-settings: "wdth" 75;
    font-size: 12rem;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, .08);
}
.app-hero .app-eyebrow { color: var(--app-accent-light); }
.app-hero h1 { margin: 0; color: #fff; }
.app-hero__lead { margin: 10px 0 0; color: rgba(255, 255, 255, .78); max-width: 56ch; }
.app-hero__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.app-hero .app-chip { background: rgba(255, 255, 255, .12); color: #fff; border-color: transparent; }
.app-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.app-hero .btn-light { --bs-btn-bg: #fff; --bs-btn-color: var(--app-ink); --bs-btn-hover-bg: #eef0f3; --bs-btn-border-color: #fff; }
.app-hero .btn-accent, .app .btn-accent {
    --bs-btn-bg: var(--app-accent);
    --bs-btn-color: var(--app-on-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--app-accent) 88%, #000);
    --bs-btn-hover-color: var(--app-on-accent);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--app-accent) 88%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--app-accent) 80%, #000);
    --bs-btn-active-color: var(--app-on-accent);
}
@media (max-width: 575.98px) {
    .app-hero { padding: 22px 18px; border-radius: 16px; }
    .app-hero::after { font-size: 8rem; bottom: -24px; }
}

.app-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.app-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 28px; }
.app-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px;
    border-radius: var(--app-radius);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
    color: var(--app-text);
    text-decoration: none;
}
a.app-kpi:hover { border-color: color-mix(in srgb, var(--app-primary) 40%, var(--app-border)); color: var(--app-text); }
.app-kpi__label { color: var(--app-muted); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.app-kpi__value {
    font-family: var(--app-display);
    font-stretch: 75%;
    font-variation-settings: "wdth" 75;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.app-kpi__hint { color: var(--app-muted); font-size: .84rem; }
.app-kpi--alert .app-kpi__value { color: var(--app-danger); }
.app-kpi--good .app-kpi__value { color: var(--app-success); }

/* Stato vuoto */
.app-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 44px 24px;
    border-radius: var(--app-radius);
    border: 2px dashed var(--app-border);
    background: var(--app-surface-2);
    color: var(--app-muted);
    text-align: center;
}
.app-empty__icon {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    color: var(--app-primary-ink);
}
.app-empty__title { margin: 4px 0 0; color: var(--app-text); font-weight: 700; font-size: 1.05rem; }
.app-empty p { margin: 0; max-width: 46ch; }

/* Righe di elenco con icona */
.app-list { list-style: none; margin: 0; padding: 0; border-radius: var(--app-radius); border: 1px solid var(--app-border); background: var(--app-surface); box-shadow: var(--app-shadow); overflow: hidden; }
.app-list__item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.app-list__item + .app-list__item { border-top: 1px solid var(--app-border); }
a.app-list__item { color: var(--app-text); text-decoration: none; transition: background-color .15s; }
a.app-list__item:hover { background: var(--app-surface-2); color: var(--app-text); }
.app-list__main { flex: 1; min-width: 0; }
.app-list__title { display: block; font-weight: 600; }
.app-list__meta { display: block; color: var(--app-muted); font-size: .86rem; }
.app-list__aside { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Blocco data (agenda, eventi) */
.app-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 58px;
    padding: 8px 0 7px;
    border-radius: 12px;
    background: var(--app-ink);
    color: #fff;
    line-height: 1;
    text-align: center;
}
.app-date__dow { font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--app-accent-light); }
.app-date__day { font-family: var(--app-display); font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: 1.9rem; font-weight: 700; margin-top: 3px; }
.app-date__month { font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-top: 3px; }
.app-date--soft { background: color-mix(in srgb, var(--app-primary) 12%, var(--app-surface)); color: var(--app-primary-ink); }
.app-date--soft .app-date__dow, .app-date--soft .app-date__month { color: var(--app-primary-ink); }

/* Agenda MyTeam / Family */
.app-daylabel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 10px;
    color: var(--app-muted);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.app-daylabel::after { content: ""; flex: 1; height: 1px; background: var(--app-border); }
.app-daylabel--today { color: var(--app-primary-ink); }

.app-event {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: start;
    padding: 18px;
    margin-bottom: 10px;
    border-radius: var(--app-radius);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
    overflow: hidden;
}
.app-event::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--app-primary); }
.app-event--match::before { background: var(--app-accent); }
.app-event--commitment::before { background: #7c3aed; }
.app-event--cancelled { opacity: .6; }
.app-event--cancelled .app-event__title { text-decoration: line-through; }
.app-event__type { display: inline-flex; align-items: center; gap: 6px; color: var(--app-muted); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.app-event__title { margin: 4px 0 6px; font-size: 1.12rem; font-weight: 700; line-height: 1.3; }
.app-event__facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--app-text); font-size: .92rem; }
.app-event__facts li { display: inline-flex; align-items: center; gap: 6px; }
.app-event__facts .app-icon { color: var(--app-muted); }
.app-event__note { margin: 8px 0 0; color: var(--app-muted); font-size: .9rem; }
.app-event__answer { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 220px; }
.app-event__answer form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.app-event__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.app-event__deadline { color: var(--app-muted); font-size: .8rem; }

.app-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.app-status--yes { background: #dcfce7; color: #14532d; }
.app-status--no { background: #fee2e2; color: #8f1d24; }
.app-status--pending { background: #fef3c7; color: #7a3e06; }
.app-status--neutral { background: #eceff3; color: #3b4352; }

@media (max-width: 767.98px) {
    .app-event { grid-template-columns: auto 1fr; gap: 12px 14px; padding: 16px; }
    .app-event__answer { grid-column: 1 / -1; align-items: stretch; min-width: 0; }
    .app-event__answer .app-status { align-self: flex-start; }
    .app-event__buttons .btn { min-height: 48px; }
}

/* Notifiche */
/* Piano gara: campo virtuale in verticale, la nostra porta in basso. */
.app-pitch {
    position: relative; width: 100%; max-width: 560px; aspect-ratio: 68 / 100; margin: 0 auto; border-radius: 16px; overflow: hidden;
    background:
        linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)) center 50% / 100% 2px no-repeat,
        radial-gradient(circle at 50% 50%, transparent 0 13%, rgba(255, 255, 255, .55) 13% calc(13% + 2px), transparent calc(13% + 2px)),
        repeating-linear-gradient(0deg, #2f7d3b 0 10%, #2a7135 10% 20%);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5);
}
/* Aree di rigore. */
.app-pitch::before, .app-pitch::after {
    content: ""; position: absolute; left: 25%; width: 50%; height: 15%; border: 2px solid rgba(255, 255, 255, .55); pointer-events: none;
}
.app-pitch::before { top: -2px; }
.app-pitch::after { bottom: -2px; }
.app-pitch__slot { position: absolute; transform: translate(-50%, 50%); display: flex; flex-direction: column; align-items: center; gap: 3px; width: 23%; }
.app-pitch__shirt {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 800; font-size: .8rem;
    background: var(--app-primary); color: var(--app-on-primary); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); border: 2px solid #fff;
}
.app-pitch__shirt.is-warning { background: #b91c1c; color: #fff; }
.app-pitch__name { font-size: .72rem; font-weight: 700; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); line-height: 1.15; }
.app-pitch__select { font-size: .72rem; padding: 2px 22px 2px 6px; background-color: rgba(255, 255, 255, .94); color: #111; max-width: 100%; }
@media (max-width: 575.98px) {
    .app-pitch__shirt { width: 28px; height: 28px; font-size: .7rem; }
    .app-pitch__select { font-size: .66rem; }
}
/* Campo 3D (js/pitch3d.js). Senza WebGL resta nascosto e si usa il campo 2D. */
club-pitch3d { display: none; }
club-pitch3d.is-ready { display: block; margin-bottom: 16px; }
.app-pitch3d__bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.app-pitch3d__views { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--app-surface-2); border: 1px solid var(--app-border); }
.app-pitch3d__views button, .app-pitch3d__propose {
    border: 0; background: transparent; color: var(--app-text); font-weight: 600; font-size: .85rem; padding: 6px 14px; border-radius: 999px; cursor: pointer;
}
.app-pitch3d__views button.is-active { background: var(--app-primary); color: var(--app-on-primary); }
.app-pitch3d__propose { background: var(--app-surface); border: 1px solid var(--app-border); }
.app-pitch3d__propose:hover { border-color: var(--app-primary); }
.app-pitch3d__stage { position: relative; height: min(74vh, 680px); min-height: 420px; overflow: hidden; background: transparent; }
.app-pitch3d__stage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: default; }
.app-pitch3d__stage canvas.is-dragging { cursor: grabbing; }
.app-pitch3d__caption {
    position: absolute; left: 50%; top: 8%; transform: translate(-50%, 8px); text-align: center; color: var(--app-text); pointer-events: none;
    opacity: 0; transition: opacity .5s, transform .5s;
}
.app-pitch3d__caption span { display: block; font: 700 clamp(2rem, 6vw, 3.4rem)/1 "Bahnschrift", "Arial Narrow", sans-serif; letter-spacing: .06em; color: var(--app-primary-ink); }
.app-pitch3d__caption small { display: block; margin-top: 6px; font-size: .8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--app-muted); }
.app-pitch3d__caption.is-on { opacity: 1; transform: translate(-50%, 0); }
.app-pitch3d__toast {
    position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 10px); max-width: calc(100% - 28px); padding: 8px 14px; border-radius: 12px;
    background: var(--app-surface); color: var(--app-text); border: 1px solid var(--app-border); box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    font-size: .85rem; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
}
.app-pitch3d__toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.app-pitch3d__hint { margin: 8px 2px 0; font-size: .82rem; color: var(--app-muted); }
@media (max-width: 575.98px) {
    .app-pitch3d__stage { height: 68vh; min-height: 380px; }
}
@media (prefers-reduced-motion: reduce) {
    .app-pitch3d__caption, .app-pitch3d__toast { transition: none; }
}

/* Forma dell'avversario: V / N / P. */
.app-form { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; font-weight: 800; font-size: .78rem; color: #fff; }
.app-form--V { background: #15803d; }
.app-form--N { background: #6b7280; }
.app-form--P { background: #b91c1c; }
/* Minuto dell'episodio, colorato per tipo. */
.app-incident { flex: none; min-width: 42px; padding: 2px 6px; border-radius: 8px; text-align: center; font-weight: 800; font-size: .8rem; background: var(--app-surface-2); }
.app-incident--Goal, .app-incident--OpponentOwnGoal { background: #15803d; color: #fff; }
.app-incident--YellowCard { background: #facc15; color: #111; }
.app-incident--RedCard { background: #b91c1c; color: #fff; }
.app-incident--Injury { background: #7c3aed; color: #fff; }

/* Rosa per reparto, sigle dei ruoli e giocatori non disponibili. */
.app-roster-group { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--app-muted); }
.app-roster-group span { padding: 1px 8px; border-radius: 999px; background: var(--app-surface-2); letter-spacing: 0; }
.app-role { display: inline-block; min-width: 2.4em; margin-right: 4px; padding: 0 6px; border-radius: 6px; background: var(--app-primary); color: var(--app-on-primary, #fff); font-size: .72rem; font-weight: 700; line-height: 1.6; text-align: center; }
.app-role--other { background: var(--app-surface-2); color: var(--app-text); border: 1px solid var(--app-border); }
.app-list__item--unavailable .app-shirt { opacity: .45; }
.app-list__item--unavailable .app-list__title a { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--app-text) 35%, transparent); }
.app-list__title a { color: inherit; text-decoration: none; }
.app-list__title a:hover { text-decoration: underline; }

/* Avviso nella pagina con un'azione a destra (stagione conclusa, differenze con la classifica ufficiale). */
.app-callout { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding: 14px 16px; border: 1px solid var(--app-border); border-radius: 14px; background: var(--app-surface); }
.app-callout > svg { flex: none; color: var(--app-primary-ink); }
.app-callout > div { min-width: 220px; }
.app-callout--warning { border-color: color-mix(in srgb, var(--app-warning) 40%, var(--app-border)); background: color-mix(in srgb, var(--app-warning) 7%, var(--app-surface)); }
.app-callout--warning > svg { color: var(--app-warning); }

.app-notice { display: flex; gap: 14px; padding: 16px; }
.app-notice + .app-notice { border-top: 1px solid var(--app-border); }
.app-notice__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--app-surface-2); color: var(--app-muted); }
.app-notice--unread { background: color-mix(in srgb, var(--app-primary) 5%, var(--app-surface)); }
.app-notice--unread .app-notice__icon { background: color-mix(in srgb, var(--app-primary) 14%, var(--app-surface)); color: var(--app-primary-ink); }
.app-notice__main { flex: 1; min-width: 0; }
.app-notice__head { display: flex; justify-content: space-between; gap: 10px; }
.app-notice__title { font-weight: 700; }
.app-notice--unread .app-notice__title::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--app-primary); vertical-align: middle; }
.app-notice__time { color: var(--app-muted); font-size: .8rem; white-space: nowrap; }
.app-notice__body { margin: 2px 0 0; color: var(--app-text); }
.app-notice__link { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: .88rem; font-weight: 600; text-decoration: none; }

/* Login e registrazione */
.app-auth {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--app-bg);
}
.app-auth__side {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 48px;
    background: color-mix(in srgb, var(--app-primary) 30%, #05070c);
    color: #fff;
}
.app-auth__side::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(700px 420px at 100% 0, rgba(var(--app-primary-rgb), .85), transparent 65%),
        radial-gradient(500px 300px at 0 100%, rgba(var(--app-accent-rgb), .25), transparent 70%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 22px);
}
.app-auth__side .app-brand__text strong { color: #fff; }
.app-auth__mark {
    position: absolute;
    right: -20px; bottom: -60px;
    z-index: -1;
    font-family: var(--app-display);
    font-stretch: 75%;
    font-variation-settings: "wdth" 75;
    font-size: 22rem;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, .08);
}
.app-auth__claim { font-family: var(--app-display); font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: clamp(2.8rem, 5vw, 4.6rem); font-weight: 700; line-height: .9; text-transform: uppercase; max-width: 12ch; }
.app-auth__points { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; color: rgba(255, 255, 255, .85); }
.app-auth__points li { display: flex; align-items: center; gap: 12px; }
.app-auth__points .app-icon { color: var(--app-accent-light); }
.app-auth__foot { color: rgba(255, 255, 255, .5); font-size: .8rem; letter-spacing: .06em; }
.app-auth__main { display: flex; flex-direction: column; justify-content: center; padding: 40px 24px; }
.app-auth__card { width: 100%; max-width: 440px; margin: 0 auto; }
.app-auth__card h1 { font-size: clamp(2.2rem, 4vw, 3rem); margin: 0 0 6px; }
.app-auth__card .app-auth__sub { color: var(--app-muted); margin: 0 0 24px; }
.app-auth__mobilebrand { display: none; margin-bottom: 28px; }
.app-auth__links { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; font-size: .92rem; }
.app-auth__links a { font-weight: 600; text-decoration: none; }
.app-auth__divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--app-muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.app-auth__divider::before, .app-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--app-border); }
@media (max-width: 899.98px) {
    .app-auth { grid-template-columns: 1fr; }
    .app-auth__side { display: none; }
    .app-auth__mobilebrand { display: flex; }
    .app-auth__main { justify-content: flex-start; padding-top: 32px; }
}

/* Landing della piattaforma */
.app-landing { min-height: 100vh; display: flex; flex-direction: column; background: #05070c; color: #fff; position: relative; isolation: isolate; overflow: hidden; }
.app-landing::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(900px 520px at 90% -10%, rgba(var(--app-primary-rgb), .9), transparent 60%),
        radial-gradient(700px 420px at -10% 110%, rgba(var(--app-accent-rgb), .3), transparent 60%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 22px);
}
.app-landing__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px clamp(16px, 4vw, 48px); }
.app-landing__bar .app-brand__text strong { color: #fff; }
.app-landing__hero { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 40px clamp(16px, 4vw, 48px) 64px; max-width: 1240px; width: 100%; margin: 0 auto; }
.app-landing__title { font-family: var(--app-display); font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: clamp(3.4rem, 10vw, 8rem); font-weight: 700; line-height: .86; text-transform: uppercase; max-width: 12ch; margin: 0; }
.app-landing__title span { color: var(--app-accent-light); }
.app-landing__lead { max-width: 44rem; color: rgba(255, 255, 255, .78); font-size: 1.2rem; margin: 0; }
.app-landing__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.app-landing__modules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.app-landing__modules span { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .8); font-size: .85rem; font-weight: 600; }
.app-landing__dev { margin-top: 20px; padding: 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); max-width: 44rem; }
.app-landing__dev a { color: var(--app-accent-light); }
.app-landing__dev code { color: #fff; }
.app-landing__foot { padding: 20px clamp(16px, 4vw, 48px); color: rgba(255, 255, 255, .45); font-size: .8rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.app-landing .btn-outline-light { --bs-btn-border-color: rgba(255, 255, 255, .35); }

/* --- Utility ------------------------------------------------------------ */

.app-muted { color: var(--app-muted); }
.app-grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 991.98px) { .app-grid-2 { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
    .app *, .app *::before, .app *::after { transition: none !important; animation: none !important; }
}

/* --- Base di Blazor e Identity ------------------------------------------ */

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #d92d38; font-size: .88rem; margin-top: 4px; }

#blazor-error-ui {
    color-scheme: light only;
    background: #fffbeb;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.darker-border-checkbox.form-check-input { border-color: #929292; }
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Si è verificato un errore."
    }

.app-pagehead__titlerow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.app-pagehead__titlerow .badge { font-size: .8rem; }
.app-auth__mobilebrand .app-brand__text strong { color: var(--app-text); }
.app-auth__mobilebrand .app-brand__text small { color: var(--app-muted); }
.app-auth .form-floating > .form-control { min-height: 58px; }
.app-auth .form-floating > label { color: var(--app-muted); }

/* Pannelli richiudibili (moduli "Nuovo…") */
.app-disclosure { margin-bottom: 20px; border-radius: var(--app-radius); border: 1px solid var(--app-border); background: var(--app-surface); box-shadow: var(--app-shadow); }
.app-disclosure__summary { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; list-style: none; border-radius: var(--app-radius); }
.app-disclosure__summary::-webkit-details-marker { display: none; }
.app-disclosure__summary:hover { background: var(--app-surface-2); }
.app-disclosure__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--app-primary); color: var(--app-on-primary); }
.app-disclosure__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.app-disclosure__text small { color: var(--app-muted); font-size: .85rem; }
.app-disclosure__chevron { color: var(--app-muted); transition: transform .2s var(--app-ease); }
.app-disclosure[open] .app-disclosure__chevron { transform: rotate(180deg); }
.app-disclosure[open] .app-disclosure__summary { border-bottom: 1px solid var(--app-border); border-radius: var(--app-radius) var(--app-radius) 0 0; }
.app-disclosure__body { padding: 20px 18px; }
.app-disclosure__body > form > .btn[type=submit], .app-disclosure__body > .btn[type=submit] { min-width: 180px; }

/* Barra delle conferme */
.app-responses { display: inline-flex; flex-direction: column; gap: 5px; min-width: 150px; }
.app-responses__bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--app-border); }
.app-responses__yes { background: var(--app-success); }
.app-responses__no { background: var(--app-danger); }
.app-responses__nums { display: flex; gap: 10px; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.app-responses__nums > span { display: inline-flex; align-items: center; gap: 3px; }

/* Colonna laterale che resta visibile scorrendo */
.app-side { position: sticky; top: calc(var(--app-topbar-h) + 16px); }
@media (max-width: 991.98px) { .app-side { position: static; } }

/* Tessere squadra / elementi con numero grande */
.app-teamtile { position: relative; overflow: hidden; }
.app-teamtile__number {
    position: absolute; right: 14px; top: 6px;
    font-family: var(--app-display); font-stretch: 75%; font-variation-settings: "wdth" 75;
    font-size: 4rem; font-weight: 700; line-height: 1; color: transparent;
    -webkit-text-stroke: 1.5px var(--app-border-strong);
}
.app-tile__eyebrow { color: var(--app-primary-ink); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.app-tile__name { font-family: var(--app-display); font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: 1.7rem; font-weight: 700; line-height: 1; text-transform: uppercase; max-width: 75%; }
.app-tile__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }

/* Numeri grandi nelle intestazioni di dettaglio */
.app-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; }

/* Maglia con numero (rose) */
.app-shirt {
    display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px;
    background: var(--app-ink); color: #fff;
    font-family: var(--app-display); font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: 1.2rem; font-weight: 700;
}
.app-shirt--empty { background: var(--app-surface-2); color: var(--app-muted); border: 1px dashed var(--app-border-strong); }

/* Elenco di dettagli (etichetta + valore) */
.app-facts { display: grid; gap: 12px; margin: 0; }
.app-facts > div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; }
.app-facts dt { display: flex; align-items: center; gap: 6px; color: var(--app-muted); font-weight: 600; font-size: .88rem; }
.app-facts dd { margin: 0; font-weight: 500; }
@media (max-width: 420px) { .app-facts > div { grid-template-columns: 1fr; gap: 2px; } }

/* Scelta multipla a tessere (convocati, destinatari) */
.app-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.app-pick { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--app-border); background: var(--app-surface); cursor: pointer; transition: border-color .15s, background-color .15s; }
.app-pick:hover { border-color: var(--app-border-strong); }
.app-pick:has(input:checked) { border-color: var(--app-primary-ink); background: color-mix(in srgb, var(--app-primary) 7%, var(--app-surface)); }
.app-pick .form-check-input { margin: 0; flex: none; }
.app-pick__main { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.app-pick__main small { color: var(--app-muted); }

/* Selettore a segmenti (filtro per squadra) */
.app-segments { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 14px; background: var(--app-surface); border: 1px solid var(--app-border); width: fit-content; max-width: 100%; }
.app-segment { padding: 7px 14px; border-radius: 10px; color: var(--app-muted); font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.app-segment:hover { color: var(--app-text); background: var(--app-surface-2); }
.app-segment.is-active { background: var(--app-ink); color: #fff; }
.app-notice__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }

/* Partite del girone (gestione risultati) */
.app-match { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 12px 16px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--app-border); background: var(--app-surface); }
.app-match--ours { border-left: 4px solid var(--app-primary); }
.app-match__when { display: flex; flex-direction: column; color: var(--app-muted); font-size: .8rem; text-transform: capitalize; }
.app-match__round { font-family: var(--app-display); font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--app-text); }
.app-match__board { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 10px; margin: 0; }
.app-match__team { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.app-match__team--home { text-align: right; }
.app-match__score { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.app-match__score .form-control { width: 3.4rem; min-height: 42px; padding: 0; text-align: center; font-family: var(--app-display); font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: 1.35rem; font-weight: 700; }
.app-match__actions:empty { display: none; }
.app-row--ours > * { background: color-mix(in srgb, var(--app-primary) 9%, var(--app-surface)) !important; font-weight: 700; }
@media (max-width: 767.98px) {
    .app-match { grid-template-columns: 1fr; }
    .app-match__when { flex-direction: row; gap: 10px; align-items: baseline; }
    .app-match__board { grid-template-columns: 1fr auto 1fr; }
    .app-match__save { grid-column: 1 / -1; }
}

/* Scelta a tessere con icona (template) */
.app-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.app-choice { position: relative; cursor: pointer; }
.app-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.app-choice span { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; height: 100%; padding: 14px; border-radius: 12px; border: 1px solid var(--app-border); background: var(--app-surface); font-weight: 600; font-size: .92rem; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.app-choice span .app-icon { color: var(--app-primary-ink); }
.app-choice:hover span { border-color: var(--app-border-strong); }
.app-choice input:checked + span { border-color: var(--app-primary-ink); background: color-mix(in srgb, var(--app-primary) 7%, var(--app-surface)); box-shadow: inset 0 0 0 1px var(--app-primary-ink); }
.app-choice input:focus-visible + span { outline: 3px solid rgba(var(--app-primary-rgb), .45); outline-offset: 2px; }

/* Bacheca per stato (Media, pipeline) */
.app-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); align-items: start; gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.app-board__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--app-border) 45%, var(--app-bg)); scroll-snap-align: start; }
.app-board__head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 6px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--app-muted); }
.app-board__count { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--app-surface); color: var(--app-text); font-size: .75rem; }
.app-board__empty { margin: 4px; color: var(--app-muted); font-size: .85rem; }
.app-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--app-border); background: var(--app-surface); box-shadow: var(--app-shadow); color: var(--app-text); text-decoration: none; transition: transform .15s var(--app-ease), box-shadow .15s, border-color .15s; }
a.app-card:hover { transform: translateY(-1px); box-shadow: var(--app-shadow-md); border-color: color-mix(in srgb, var(--app-primary) 40%, var(--app-border)); color: var(--app-text); }
.app-card__title { font-size: .98rem; line-height: 1.3; }
.app-card__meta { color: var(--app-muted); font-size: .8rem; }

/* Anteprima del post */
.app-postpreview { max-width: 460px; border-radius: 18px; border: 1px solid var(--app-border); background: var(--app-surface); box-shadow: var(--app-shadow-md); overflow: hidden; }
.app-postpreview__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.app-postpreview__head .app-brand__crest { width: 34px; height: 34px; font-size: 1rem; border-radius: 50%; }
.app-postpreview__head span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.app-postpreview__head small { color: var(--app-muted); font-size: .75rem; }
.app-postpreview__media { aspect-ratio: 1; background: var(--app-ink); }
.app-postpreview__media img { width: 100%; height: 100%; object-fit: cover; }
.app-postpreview__art {
    display: flex; align-items: flex-end; width: 100%; height: 100%; padding: 22px;
    background: repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 2px, transparent 2px 16px), linear-gradient(135deg, var(--app-primary), color-mix(in srgb, var(--app-primary) 25%, #05070c));
    color: #fff; font-family: var(--app-display); font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: 2.2rem; font-weight: 700; line-height: .95; text-transform: uppercase;
    border-bottom: 6px solid var(--app-accent);
}
.app-postpreview__body { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.app-postpreview__body p { margin: 0; white-space: pre-line; font-size: .92rem; }

/* Passi del workflow */
.app-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.app-steps__item { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--app-muted); font-weight: 600; counter-increment: step; }
.app-steps__item::before { content: counter(step); display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--app-border-strong); background: var(--app-surface); font-size: .8rem; z-index: 1; }
.app-steps__item + .app-steps__item::after { content: ""; position: absolute; left: 13px; top: -8px; height: 16px; width: 2px; background: var(--app-border); }
.app-steps__item.is-done { color: var(--app-text); }
.app-steps__item.is-done::before { content: "✓"; border-color: var(--app-success); background: var(--app-success); color: #fff; }
.app-steps__item.is-current::before { content: counter(step); border-color: var(--app-primary); background: var(--app-primary); color: var(--app-on-primary); box-shadow: 0 0 0 4px rgba(var(--app-primary-rgb), .18); }
.app-ai { background: linear-gradient(135deg, color-mix(in srgb, var(--app-accent) 10%, var(--app-surface)), var(--app-surface)); }

/* Anteprima dei colori del club (impostazioni) */
.app-brandpreview { border-radius: 14px; overflow: hidden; border: 1px solid var(--app-border); }
.app-brandpreview__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--pv-primary); color: #fff; border-bottom: 4px solid var(--pv-secondary); }
.app-brandpreview__bar strong { flex: 1; min-width: 0; font-family: var(--app-display); font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.app-brandpreview__crest { display: grid; place-items: center; width: 32px; height: 36px; clip-path: polygon(50% 0, 100% 14%, 100% 55%, 50% 100%, 0 55%, 0 14%); background: var(--pv-secondary); color: var(--pv-primary); font-family: var(--app-display); font-weight: 700; }
.app-brandpreview__cta { padding: 5px 12px; border-radius: 999px; background: var(--pv-secondary); color: #0a0d14; font-family: var(--app-display); font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 700; text-transform: uppercase; font-size: .85rem; }
.app-brandpreview__hero { display: flex; flex-direction: column; gap: 2px; padding: 18px 14px; color: #fff; background: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 16px), linear-gradient(160deg, color-mix(in srgb, var(--pv-primary) 45%, #05070c), color-mix(in srgb, var(--pv-primary) 18%, #05070c)); }
.app-brandpreview__hero span { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pv-secondary); }
.app-brandpreview__hero strong { font-family: var(--app-display); font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: 1.8rem; text-transform: uppercase; line-height: 1; }

/* Sponsor */
.app-sponsorlogo { display: grid; place-items: center; flex: none; width: 56px; height: 56px; padding: 6px; border-radius: 14px; border: 1px solid var(--app-border); background: #fff; color: var(--app-muted); font-family: var(--app-display); font-stretch: 75%; font-variation-settings: "wdth" 75; font-weight: 700; font-size: 1.3rem; }
.app-sponsorlogo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.app-contract { display: flex; flex-direction: column; gap: 2px; margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: var(--app-surface-2); border-left: 3px solid var(--app-success); }
.app-contract--none { border-left-color: var(--app-danger); }
.min-w-0 { min-width: 0; }

/* Imbuto della pipeline */
.app-funnel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 4px; }
.app-funnel__step { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 14px 22px; background: var(--app-surface); border: 1px solid var(--app-border); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); }
.app-funnel__step:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: 12px 0 0 12px; padding-left: 16px; }
.app-funnel__step--won { background: #ecfdf3; }
.app-funnel__label { color: var(--app-muted); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.app-funnel__count { font-family: var(--app-display); font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: 2rem; font-weight: 700; line-height: 1; }
.app-funnel__value { font-size: .82rem; font-weight: 600; }
@media (max-width: 767.98px) {
    .app-funnel { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .app-funnel__step, .app-funnel__step:first-child { clip-path: none; border-radius: 12px; padding-left: 16px; }
}
.app-order { border-top: 4px solid var(--app-border-strong); }
.app-order--ready { border-top-color: var(--app-success); }

/* Moduli del club (Control Room) */
.app-module { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--app-border); border-left: 4px solid var(--app-success); background: var(--app-surface); }
.app-module--off { border-left-color: var(--app-border-strong); }
.app-module__name { flex: 1 1 180px; display: flex; flex-direction: column; line-height: 1.3; }
.app-module__name small { color: var(--app-muted); }
.app-module--off .app-module__name small { color: var(--app-danger); }

/* Zona delle azioni pericolose */
.app-danger { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--app-danger) 35%, var(--app-border)); background: color-mix(in srgb, var(--app-danger) 4%, var(--app-surface)); }
.app-danger form { margin: 0; flex: none; }

/* Area "Il mio account" */
.app-manage { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.app-manage__nav { position: sticky; top: calc(var(--app-topbar-h) + 16px); }
.app-manage__body { max-width: 760px; }
.app-manage__title { font-size: 1.3rem; font-weight: 700; margin: 0 0 16px; }
.app-subnav { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 2px; border-radius: var(--app-radius); border: 1px solid var(--app-border); background: var(--app-surface); }
.app-subnav__link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--app-muted); font-weight: 600; font-size: .92rem; text-decoration: none; }
.app-subnav__link:hover { background: var(--app-surface-2); color: var(--app-text); }
.app-subnav__link.active { background: color-mix(in srgb, var(--app-primary) 10%, var(--app-surface)); color: var(--app-primary-ink); }
.app-codes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.app-codes li { padding: 10px; border-radius: 10px; border: 1px dashed var(--app-border-strong); text-align: center; }
.app-codes code { font-size: 1rem; letter-spacing: .08em; color: var(--app-text); }
@media (max-width: 991.98px) {
    .app-manage { grid-template-columns: 1fr; }
    .app-manage__nav { position: static; }
    .app-subnav { flex-direction: row; overflow-x: auto; }
    .app-subnav__link { white-space: nowrap; }
}

/* Pagine di stato (404, errore) */
.app-status-screen { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; display: flex; align-items: center; padding: 48px clamp(16px, 6vw, 96px); background: #05070c; color: #fff; }
.app-status-screen::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(900px 520px at 90% -10%, rgba(var(--app-primary-rgb), .9), transparent 60%), repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 22px); }
.app-status-screen__code { position: absolute; right: -2vw; bottom: -6vw; z-index: -1; font-family: var(--app-display); font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: clamp(14rem, 42vw, 40rem); font-weight: 700; line-height: .8; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.09); user-select: none; }
.app-status-screen__body { max-width: 640px; }
.app-status-screen .app-brand__text strong { color: #fff; }
.app-status-screen__title { font-family: var(--app-display); font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: clamp(3rem, 9vw, 6rem); font-weight: 700; line-height: .88; text-transform: uppercase; margin: 0 0 16px; }
.app-status-screen__text { font-size: 1.15rem; color: rgba(255,255,255,.78); margin-bottom: 8px; }
.app-status-screen .btn-outline-light { --bs-btn-border-color: rgba(255,255,255,.35); }

/* ==========================================================================
   Tema scuro dell'app (generato: stesse regole per "Scuro" e per "Auto" con sistema scuro)
   ========================================================================== */
.app[data-theme="dark"] {
    color-scheme: dark;
    --app-ink: #252d3d;
    --app-sidebar: #07090e;
    --app-bg: #0b0e14;
    --app-surface: #131822;
    --app-surface-2: #1a2030;
    --app-border: #262e3f;
    --app-border-strong: #3a4458;
    --app-warning: #f5a524;
    --app-text: #e8ebf1;
    --app-muted: #9ba4b6;
    --app-success: #22c55e;
    --app-danger: #f25560;
    --app-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --app-shadow-md: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 32px -12px rgba(0, 0, 0, .7);
    --app-primary-ink: var(--app-primary-ink-dark);
    --app-primary-ink-rgb: var(--app-primary-ink-dark-rgb);
    --bs-emphasis-color: var(--app-text);
    --bs-emphasis-color-rgb: 232, 235, 241;
    --bs-body-color-rgb: 232, 235, 241;
    --bs-secondary-bg: var(--app-surface-2);
    --bs-tertiary-bg: var(--app-surface-2);
    --bs-heading-color: var(--app-text);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c9d0dc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.app[data-theme="dark"] .app-topbar { background: rgba(11, 14, 20, .82); }
.app[data-theme="dark"] .app-tabbar { background: rgba(19, 24, 34, .94); }
.app[data-theme="dark"] .app-tabbar__icon .app-dot { border-color: #131822; }
.app[data-theme="dark"] .card { --bs-card-bg: var(--app-surface); --bs-card-color: var(--app-text); }
.app[data-theme="dark"] .list-group { --bs-list-group-bg: var(--app-surface); --bs-list-group-color: var(--app-text); }
.app[data-theme="dark"] .table { --bs-table-color: var(--app-text); --bs-table-hover-color: var(--app-text); --bs-table-striped-color: var(--app-text); }
.app[data-theme="dark"] .form-control, .app[data-theme="dark"] .form-select { color: var(--app-text); }
.app[data-theme="dark"] .form-control::placeholder { color: #6f788b; }
.app[data-theme="dark"] .form-control:disabled { background: var(--app-surface-2); }
.app[data-theme="dark"] .form-check-input { background-color: var(--app-surface-2); }
.app[data-theme="dark"] .form-check-input:checked { background-color: var(--app-primary); }
.app[data-theme="dark"] .form-switch .form-check-input:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.35%29'/%3e%3c/svg%3e"); }
.app[data-theme="dark"] .text-bg-success { background-color: rgba(34, 197, 94, .16) !important; color: #86efac !important; }
.app[data-theme="dark"] .text-bg-danger { background-color: rgba(242, 85, 96, .16) !important; color: #fca5ab !important; }
.app[data-theme="dark"] .text-bg-warning { background-color: rgba(245, 158, 11, .16) !important; color: #fcd34d !important; }
.app[data-theme="dark"] .text-bg-info { background-color: rgba(56, 189, 248, .14) !important; color: #7dd3fc !important; }
.app[data-theme="dark"] .text-bg-secondary { background-color: rgba(155, 164, 182, .16) !important; color: #cbd2de !important; }
.app[data-theme="dark"] .text-bg-dark { background-color: #e8ebf1 !important; color: #0b0e14 !important; }
.app[data-theme="dark"] .text-success { color: #4ade80 !important; }
.app[data-theme="dark"] .text-danger { color: #f87179 !important; }
.app[data-theme="dark"] .alert-success { --bs-alert-bg: rgba(34, 197, 94, .1); --bs-alert-color: #bbf7d0; }
.app[data-theme="dark"] .alert-danger { --bs-alert-bg: rgba(242, 85, 96, .1); --bs-alert-color: #fecdd1; }
.app[data-theme="dark"] .alert-warning { --bs-alert-bg: rgba(245, 158, 11, .1); --bs-alert-color: #fde68a; }
.app[data-theme="dark"] .alert-info { --bs-alert-bg: rgba(56, 189, 248, .1); --bs-alert-color: #bae6fd; }
.app[data-theme="dark"] .alert a { color: inherit; }
.app[data-theme="dark"] .app-status--yes { background: rgba(34, 197, 94, .16); color: #86efac; }
.app[data-theme="dark"] .app-status--no { background: rgba(242, 85, 96, .16); color: #fca5ab; }
.app[data-theme="dark"] .app-status--pending { background: rgba(245, 158, 11, .16); color: #fcd34d; }
.app[data-theme="dark"] .app-status--neutral { background: rgba(155, 164, 182, .16); color: #cbd2de; }
.app[data-theme="dark"] .app-funnel__step--won { background: rgba(34, 197, 94, .1); }
.app[data-theme="dark"] .app-date { background: #252d3d; }
.app[data-theme="dark"] .app-segment.is-active { background: #e8ebf1; color: #0b0e14; }
.app[data-theme="dark"] .nav-pills { --bs-nav-pills-link-active-bg: #e8ebf1; }
.app[data-theme="dark"] .nav-pills .nav-link.active { color: #0b0e14; }
.app[data-theme="dark"] .btn-dark { --bs-btn-bg: #e8ebf1; --bs-btn-color: #0b0e14; --bs-btn-border-color: #e8ebf1; --bs-btn-hover-bg: #fff; --bs-btn-hover-color: #0b0e14; --bs-btn-hover-border-color: #fff; }
.app[data-theme="dark"] .btn-outline-warning { --bs-btn-color: #fcd34d; --bs-btn-border-color: rgba(245, 158, 11, .5); }
.app[data-theme="dark"] .app-shirt { background: #e8ebf1; color: #0b0e14; }
.app[data-theme="dark"] .app-tile--feature { background: #05070c; border-color: var(--app-border); }
.app[data-theme="dark"] .app-board__col { background: #0f131b; }
.app[data-theme="dark"] .progress { --bs-progress-bg: var(--app-border); }
.app[data-theme="dark"] code { color: var(--app-primary-ink); }
.app[data-theme="dark"] .app-postpreview__media { background: #05070c; }

@media (prefers-color-scheme: dark) {
    .app:not([data-theme]) {
    color-scheme: dark;
    --app-ink: #252d3d;
    --app-sidebar: #07090e;
    --app-bg: #0b0e14;
    --app-surface: #131822;
    --app-surface-2: #1a2030;
    --app-border: #262e3f;
    --app-border-strong: #3a4458;
    --app-warning: #f5a524;
    --app-text: #e8ebf1;
    --app-muted: #9ba4b6;
    --app-success: #22c55e;
    --app-danger: #f25560;
    --app-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --app-shadow-md: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 32px -12px rgba(0, 0, 0, .7);
    --app-primary-ink: var(--app-primary-ink-dark);
    --app-primary-ink-rgb: var(--app-primary-ink-dark-rgb);
    --bs-emphasis-color: var(--app-text);
    --bs-emphasis-color-rgb: 232, 235, 241;
    --bs-body-color-rgb: 232, 235, 241;
    --bs-secondary-bg: var(--app-surface-2);
    --bs-tertiary-bg: var(--app-surface-2);
    --bs-heading-color: var(--app-text);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c9d0dc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

    .app:not([data-theme]) .app-topbar { background: rgba(11, 14, 20, .82); }
    .app:not([data-theme]) .app-tabbar { background: rgba(19, 24, 34, .94); }
    .app:not([data-theme]) .app-tabbar__icon .app-dot { border-color: #131822; }
    .app:not([data-theme]) .card { --bs-card-bg: var(--app-surface); --bs-card-color: var(--app-text); }
    .app:not([data-theme]) .list-group { --bs-list-group-bg: var(--app-surface); --bs-list-group-color: var(--app-text); }
    .app:not([data-theme]) .table { --bs-table-color: var(--app-text); --bs-table-hover-color: var(--app-text); --bs-table-striped-color: var(--app-text); }
    .app:not([data-theme]) .form-control, .app:not([data-theme]) .form-select { color: var(--app-text); }
    .app:not([data-theme]) .form-control::placeholder { color: #6f788b; }
    .app:not([data-theme]) .form-control:disabled { background: var(--app-surface-2); }
    .app:not([data-theme]) .form-check-input { background-color: var(--app-surface-2); }
    .app:not([data-theme]) .form-check-input:checked { background-color: var(--app-primary); }
    .app:not([data-theme]) .form-switch .form-check-input:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.35%29'/%3e%3c/svg%3e"); }
    .app:not([data-theme]) .text-bg-success { background-color: rgba(34, 197, 94, .16) !important; color: #86efac !important; }
    .app:not([data-theme]) .text-bg-danger { background-color: rgba(242, 85, 96, .16) !important; color: #fca5ab !important; }
    .app:not([data-theme]) .text-bg-warning { background-color: rgba(245, 158, 11, .16) !important; color: #fcd34d !important; }
    .app:not([data-theme]) .text-bg-info { background-color: rgba(56, 189, 248, .14) !important; color: #7dd3fc !important; }
    .app:not([data-theme]) .text-bg-secondary { background-color: rgba(155, 164, 182, .16) !important; color: #cbd2de !important; }
    .app:not([data-theme]) .text-bg-dark { background-color: #e8ebf1 !important; color: #0b0e14 !important; }
    .app:not([data-theme]) .text-success { color: #4ade80 !important; }
    .app:not([data-theme]) .text-danger { color: #f87179 !important; }
    .app:not([data-theme]) .alert-success { --bs-alert-bg: rgba(34, 197, 94, .1); --bs-alert-color: #bbf7d0; }
    .app:not([data-theme]) .alert-danger { --bs-alert-bg: rgba(242, 85, 96, .1); --bs-alert-color: #fecdd1; }
    .app:not([data-theme]) .alert-warning { --bs-alert-bg: rgba(245, 158, 11, .1); --bs-alert-color: #fde68a; }
    .app:not([data-theme]) .alert-info { --bs-alert-bg: rgba(56, 189, 248, .1); --bs-alert-color: #bae6fd; }
    .app:not([data-theme]) .alert a { color: inherit; }
    .app:not([data-theme]) .app-status--yes { background: rgba(34, 197, 94, .16); color: #86efac; }
    .app:not([data-theme]) .app-status--no { background: rgba(242, 85, 96, .16); color: #fca5ab; }
    .app:not([data-theme]) .app-status--pending { background: rgba(245, 158, 11, .16); color: #fcd34d; }
    .app:not([data-theme]) .app-status--neutral { background: rgba(155, 164, 182, .16); color: #cbd2de; }
    .app:not([data-theme]) .app-funnel__step--won { background: rgba(34, 197, 94, .1); }
    .app:not([data-theme]) .app-date { background: #252d3d; }
    .app:not([data-theme]) .app-segment.is-active { background: #e8ebf1; color: #0b0e14; }
    .app:not([data-theme]) .nav-pills { --bs-nav-pills-link-active-bg: #e8ebf1; }
    .app:not([data-theme]) .nav-pills .nav-link.active { color: #0b0e14; }
    .app:not([data-theme]) .btn-dark { --bs-btn-bg: #e8ebf1; --bs-btn-color: #0b0e14; --bs-btn-border-color: #e8ebf1; --bs-btn-hover-bg: #fff; --bs-btn-hover-color: #0b0e14; --bs-btn-hover-border-color: #fff; }
    .app:not([data-theme]) .btn-outline-warning { --bs-btn-color: #fcd34d; --bs-btn-border-color: rgba(245, 158, 11, .5); }
    .app:not([data-theme]) .app-shirt { background: #e8ebf1; color: #0b0e14; }
    .app:not([data-theme]) .app-tile--feature { background: #05070c; border-color: var(--app-border); }
    .app:not([data-theme]) .app-board__col { background: #0f131b; }
    .app:not([data-theme]) .progress { --bs-progress-bg: var(--app-border); }
    .app:not([data-theme]) code { color: var(--app-primary-ink); }
    .app:not([data-theme]) .app-postpreview__media { background: #05070c; }

}

/* Selettore del tema nel menu utente */
.app-usermenu__theme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 4px 0; padding: 4px; border-radius: 12px; background: var(--app-surface-2); }
.app-usermenu__theme a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 9px; color: var(--app-muted); font-size: .75rem; font-weight: 600; text-decoration: none; }
.app-usermenu__theme a:hover { color: var(--app-text); }
.app-usermenu__theme a.is-active { background: var(--app-surface); color: var(--app-text); box-shadow: var(--app-shadow); }

/* Telefono: indicatori su due colonne, topbar più essenziale */
@media (max-width: 575.98px) {
    .app-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .app-kpi { padding: 14px; }
    .app-kpi__value { font-size: 2rem; }
    .app-kpi__hint { font-size: .78rem; }
    .app-topbar__link { display: none; }
    .app-pagehead { margin-bottom: 20px; }
    .app-pagehead__actions { width: 100%; }
    .app-pagehead__actions > .btn, .app-pagehead__actions > form { flex: 1 1 auto; }
    .app-pagehead__actions > form > .btn { width: 100%; }
}
@media (max-width: 575.98px) {
    /* Elenchi: le informazioni a destra vanno sotto al titolo invece di schiacciarlo. */
    .app-list__item { flex-wrap: wrap; }
    .app-list__main { flex: 1 1 0; }
    .app-list__aside { flex: 1 1 100%; justify-content: flex-start; }
    .app-list__aside .app-responses { flex: 1; min-width: 0; }
    .app-list__item > .app-date + .app-list__main + .app-list__aside,
    .app-list__item > .app-tile__icon + .app-list__main + .app-list__aside,
    .app-list__item > .app-avatar + .app-list__main + .app-list__aside,
    .app-list__item > .app-shirt + .app-list__main + .app-list__aside { padding-left: 0; }
}

/* Accesso con Microsoft 365 */
.app-extlogin { margin-top: 16px; display: grid; gap: 8px; }
.app-extlogin__btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--app-border-strong); background: var(--app-surface); color: var(--app-text); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.app-extlogin__btn:hover { border-color: var(--app-muted); box-shadow: var(--app-shadow-md); }
.app-extlogin__btn span { display: flex; flex-direction: column; line-height: 1.25; }
.app-extlogin__btn small { color: var(--app-muted); font-size: .8rem; }
.app-steps--row { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.app-steps--row .app-steps__item + .app-steps__item::after { display: none; }
.app-match__score--readonly { min-width: 110px; justify-content: center; font-family: var(--app-display); font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: 1.5rem; }

/* Editor delle news (club-richtext): barra degli strumenti sopra un'area formattabile. */
.app-richtext { display: block; }
.app-richtext__bar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.app-richtext__bar .btn { min-height: 34px; padding: 2px 10px; font-size: .85rem; }
.app .app-richtext__area { min-height: 260px; max-height: 70vh; overflow-y: auto; line-height: 1.6; cursor: text; }
.app-richtext__area:focus { outline: none; }
.app-richtext__area > :first-child { margin-top: 0; }
.app-richtext__area p { margin: 0 0 .8em; }
.app-richtext__area h2 { font-size: 1.35rem; margin: 1em 0 .4em; }
.app-richtext__area h3 { font-size: 1.12rem; margin: 1em 0 .4em; }
.app-richtext__area ul, .app-richtext__area ol { margin: 0 0 .8em; padding-left: 1.4em; }
.app-richtext__area blockquote { margin: 0 0 .8em; padding: .2em 0 .2em 1em; border-left: 3px solid var(--app-primary); color: var(--app-muted); }
.app-richtext__area a { color: var(--app-primary-ink); text-decoration: underline; }
.app-richtext__area.is-invalid { border-color: var(--app-danger); }

/* Anteprima Media: fascia con i loghi degli sponsor del contenuto, in basso sull'immagine. */
.app-postpreview__media { position: relative; }
.app-postpreview__sponsors {
    position: absolute; inset: auto 0 0 0;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
    padding: 8px 12px; background: rgba(255, 255, 255, .92); color: #111;
}
.app-postpreview__sponsors img { width: auto; height: 26px; max-width: 90px; object-fit: contain; }
.app-postpreview__sponsors span { font-size: .75rem; font-weight: 700; }

/* Modalità live del piano gara (js/matchlive.js): pulsanti grandi, si usa a bordo campo dal telefono. */
.app-live { display: block; border: 1px solid var(--app-border); border-radius: var(--app-radius); background: var(--app-surface); padding: 16px; }
.app-live__top { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; }
.app-live__score { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-live__score strong { font-family: var(--app-display); font-size: 2.4rem; line-height: 1; white-space: nowrap; }
.app-live__team { font-weight: 600; font-size: .9rem; color: var(--app-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-live__clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.app-live__clock strong { font-family: var(--app-display); font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.app-live__clock small { color: var(--app-muted); font-size: .8rem; }
.app-live__phase { grid-column: 1 / -1; min-height: 52px; font-size: 1.05rem; font-weight: 700; }
.app-live__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; }
.app-live__sync { margin-left: auto; font-size: .8rem; color: var(--app-success); }
.app-live__sync.is-pending { color: var(--app-warning); font-weight: 700; }
.app-live__notice { min-height: 1.4em; margin: 4px 0 8px; font-size: .9rem; font-weight: 600; opacity: 0; transition: opacity .2s; }
.app-live__notice.is-on { opacity: 1; }
.app-live__notice.is-error { color: var(--app-danger); }
.app-live__section { margin-top: 14px; }
.app-live__section h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--app-muted); margin-bottom: 8px; }
.app-live__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.app-live__grid.is-bench { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.app-live__player {
    position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px;
    align-items: center; min-height: 60px; padding: 8px 10px; text-align: left;
    border: 1px solid var(--app-border-strong); border-radius: 12px; background: var(--app-bg); color: var(--app-text);
}
.app-live__player:hover, .app-live__player:focus-visible { border-color: var(--app-primary-ink); }
.app-live__player.is-small { min-height: 48px; }
.app-live__num { grid-row: 1 / 3; font-family: var(--app-display); font-size: 1.5rem; font-weight: 700; min-width: 1.6em; text-align: center; color: var(--app-primary-ink); }
.app-live__pname { font-weight: 700; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-live__prole { font-size: .72rem; color: var(--app-muted); font-weight: 700; }
.app-live__marks { position: absolute; top: 6px; right: 8px; display: flex; gap: 3px; align-items: center; font-size: .8rem; }
.app-live__card { display: inline-block; width: 10px; height: 14px; border-radius: 2px; }
.app-live__card.is-yellow { background: #facc15; }
.app-live__card.is-red { background: #dc2626; }
.app-live__inj { color: var(--app-danger); font-weight: 800; }
.app-live__hints { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.app-live__hint { border: 1px dashed var(--app-warning); border-radius: 999px; background: transparent; color: var(--app-text); padding: 6px 12px; font-size: .85rem; }
.app-live__hint strong { color: var(--app-warning); margin-right: 4px; }
.app-live__events { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.app-live__event { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--app-bg); }
.app-live__min { font-family: var(--app-display); font-weight: 700; min-width: 2.6em; color: var(--app-primary-ink); }
.app-live__etext { flex: 1; font-size: .9rem; }
.app-live__event--Goal .app-live__min, .app-live__event--OpponentOwnGoal .app-live__min { color: var(--app-success); }
.app-live__event--RedCard .app-live__min { color: var(--app-danger); }
.app-live__sheet { border: 1px solid var(--app-border); border-radius: 18px; padding: 0; width: min(520px, calc(100vw - 24px)); background: var(--app-surface); color: var(--app-text); }
.app-live__sheet::backdrop { background: rgba(0, 0, 0, .45); }
.app-live__sheetbody { padding: 16px; }
.app-live__sheetbody header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 1.05rem; }
.app-live__minute { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 12px; }
.app-live__minute input { width: 90px; min-height: 44px; border: 1px solid var(--app-border-strong); border-radius: 10px; padding: 0 10px; background: var(--app-bg); color: var(--app-text); font-size: 1.1rem; }
.app-live__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.app-live__action { min-height: 64px; border-radius: 14px; border: 1px solid var(--app-border-strong); background: var(--app-bg); color: var(--app-text); font-size: 1.1rem; font-weight: 700; }
.app-live__action.is-goal { border-color: var(--app-success); color: var(--app-success); }
.app-live__action.is-yellow { border-left: 10px solid #facc15; }
.app-live__action.is-red { border-left: 10px solid #dc2626; }
.app-live__choices { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow-y: auto; }
.app-live__choice { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--app-border-strong); background: var(--app-bg); color: var(--app-text); text-align: left; font-weight: 600; }
.app-live__choice small { margin-left: auto; color: var(--app-muted); font-weight: 700; }
.app-live__recap { text-align: left; }
.app-live__eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; color: var(--app-muted); margin-bottom: 4px; }
.app-live__score.is-final strong { font-size: 3rem; }
.app-live__events.is-timeline { margin: 16px 0; }
.app-live__events.is-timeline .app-live__event.is-in { animation: app-live-in .45s var(--app-ease) both; }
.app-live__events.is-timeline .app-live__event.is-current { outline: 2px solid var(--app-primary-ink); }
.app-live__minutes { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 16px; font-size: .9rem; }
.app-live__minutes li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--app-border); padding: 4px 0; }
@keyframes app-live-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .app-live__events.is-timeline .app-live__event.is-in { animation: none; } }
.app-live[hidden] { display: none; }