/* ============================================================================
   SuperAdmin 3D — "studio di luce": l'area /superadmin come uno spazio profondo.

   Concept: dietro al contenuto c'è una scena fissa a strati (aurora lontana e
   sfocata, raggi volumetrici da una sorgente in alto a destra, un pavimento a
   griglia in prospettiva, pulviscolo a due profondità, una luce che segue il
   puntatore). Lo scroll muove la "camera": il pavimento scorre verso chi guarda,
   gli strati si spostano a velocità diverse (parallasse = profondità). Le
   superfici del contenuto arrivano dal fondo — lontane, sfocate e tenui —
   e si mettono a fuoco quando entrano nell'inquadratura.

   Ispirato all'estetica "spatial OS" di Fullzcodedepthv (profondità, aurora,
   ombre luminose) ma in chiave CHIARA: il gestionale non ha un tema scuro e il
   contenuto (tabelle, form, MudBlazor) resta su superfici chiare leggibili.
   Dal 2026-10-08 (richiesta cliente) la scena è "bluetta": niente nucleo bianco
   né luci bianche; il fondo va dall'azzurro polvere al blu del canvas.

   Regole di prestazione (è un gestionale aperto tutto il giorno, anche su telefono):
   - niente animazioni infinite e niente backdrop-filter: la scena si muove SOLO
     quando l'utente scorre o muove il puntatore, e solo con transform/opacity
     (composizione su GPU, nessun ridisegno della pagina);
   - lo sfondo NON usa background-attachment: fixed (ridisegnava la pagina a ogni
     scroll): sta su un livello fisso proprio, #sa3d-scene, creato dal JS;
   - la sfocatura (filter) c'è solo nell'ingresso una tantum dei blocchi, solo su
     desktop e solo su blocchi non più alti dello schermo (lo decide il JS).

   Ambito: TUTTO è chiuso sotto html[data-vertical="superadmin"], l'attributo che
   la shell già imposta per il tema dell'area admin: i verticali non cambiano.
   .sa3d-off su <html> (zcdSa3d.disable() da console) spegne tutto.
   Le pagine del modulo Budget (.fzb) hanno un design system loro: escluse.

   Nesting CSS nativo (Chrome 112+, Safari 16.5+, Firefox 117+): su un browser più
   vecchio le regole annidate vengono scartate e resta l'aspetto standard.
   ============================================================================ */

/* La scena esiste solo nell'area admin: altrove il nodo resta nel DOM ma spento. */
#sa3d-scene { display: none; }

@keyframes sa3dWarp {
    from { transform: scale(1.09); opacity: 0.4; }
    to   { transform: none;        opacity: 1; }
}

@keyframes sa3dRowIn {
    from { opacity: 0; transform: perspective(800px) translate3d(0, 14px, -40px) rotateX(-10deg); }
    to   { opacity: 1; transform: none; }
}

html[data-vertical="superadmin"]:not(.sa3d-off) {
    /* ── Token della scena: derivati dalla palette superadmin di app.css ── */
    --sa3d-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --sa3d-line: color-mix(in srgb, var(--accent) 26%, transparent);
    --sa3d-glow: color-mix(in srgb, var(--accent) 55%, transparent);
    /* Ombre a più livelli con una punta d'indaco: la profondità ha il colore della luce. */
    --sa3d-depth-1: 0 1px 2px rgba(11, 16, 38, 0.05), 0 8px 22px -12px rgba(30, 58, 110, 0.22);   /* = ombra card del Budget */
    --sa3d-depth-2: 0 2px 6px rgba(11, 16, 38, 0.06), 0 20px 44px -18px rgba(30, 58, 110, 0.30);
    --sa3d-depth-3: 0 4px 10px rgba(11, 16, 38, 0.08), 0 32px 64px -22px rgba(30, 27, 75, 0.40);

    /* Colore del canvas: piatto, il gradiente vero è nella scena (livello fisso).
       Vince su "html { background: #EEF0F3 !important }" di app.css per specificità. */
    background: var(--canvas) !important;

    /* Il body di app.css ha uno sfondo opaco: dipinto DOPO i livelli a z-index negativo,
       coprirebbe la scena. Qui diventa trasparente e lo sfondo lo dà #sa3d-scene. */
    & body { background: transparent !important; }

    /* ═════════════════════════ SCENA ═════════════════════════ */
    & #sa3d-scene {
        display: block;
        position: fixed;
        inset: 0;
        z-index: -1;               /* sotto a tutto, senza toccare z-index di MudLayout */
        overflow: hidden;
        pointer-events: none;
        contain: strict;
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--canvas) 86%, var(--brass)) 0%,
            var(--canvas) 38%,
            color-mix(in srgb, var(--canvas) 82%, var(--accent)) 100%);
    }

    & .sa3d-rig {
        position: absolute;
        inset: 0;
        transform-origin: 50% 35%;
    }
    /* Cambio pagina: la camera "avanza" di un passo nello spazio. Una volta sola. */
    & .sa3d-rig.is-warp { animation: sa3dWarp 0.9s var(--sa3d-ease) both; }

    /* Strato più lontano: aurora morbida, già "fuori fuoco" per costruzione
       (sfumature larghe, nessun filtro). */
    & .sa3d-aurora {
        position: absolute;
        inset: -14%;
        background:
            radial-gradient(38% 30% at 78% 8%,  color-mix(in srgb, var(--accent-light) 30%, transparent), transparent 70%),
            radial-gradient(34% 32% at 10% 80%, color-mix(in srgb, var(--brass) 18%, transparent), transparent 72%),
            radial-gradient(30% 26% at 52% 48%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
    }

    /* Sorgente di luce in alto a destra, appena fuori schermo: alone azzurro/ciano, senza bianco. */
    & .sa3d-sun {
        position: absolute;
        top: -41vmax;
        right: -36vmax;
        width: 62vmax;
        height: 62vmax;
        border-radius: 50%;
        background: radial-gradient(closest-side,
            color-mix(in srgb, var(--brass) 30%, transparent) 0%,
            color-mix(in srgb, var(--brass) 18%, transparent) 24%,
            color-mix(in srgb, var(--accent-light) 14%, transparent) 50%,
            transparent 72%);
    }

    /* Raggi volumetrici: un ventaglio conico centrato sulla sorgente, sfumato da una
       maschera radiale. Il JS lo ruota di pochi gradi col puntatore e ne abbassa
       l'intensità scendendo nella pagina (ci si allontana dalla luce). */
    & .sa3d-beams {
        position: absolute;
        top: -85vmax;
        right: -80vmax;
        width: 150vmax;
        height: 150vmax;
        transform-origin: 50% 50%;
        background: repeating-conic-gradient(from 180deg at 50% 50%,
            color-mix(in srgb, var(--accent) 9%, transparent) 0deg 3deg,
            transparent 3deg 9deg,
            color-mix(in srgb, var(--brass) 8%, transparent) 9deg 11deg,
            transparent 11deg 19deg);
        -webkit-mask-image: radial-gradient(closest-side, transparent 5%, #000 14%, rgba(0, 0, 0, 0.5) 46%, transparent 84%);
                mask-image: radial-gradient(closest-side, transparent 5%, #000 14%, rgba(0, 0, 0, 0.5) 46%, transparent 84%);
    }

    /* Pavimento a griglia in prospettiva: dà la sensazione di muoversi in avanti
       quando si scorre (il JS trasla la griglia lungo il suo piano, modulo una cella). */
    & .sa3d-floor-wrap {
        position: absolute;
        left: -30%;
        right: -30%;
        bottom: 0;
        height: 58vh;
        perspective: 420px;
        perspective-origin: 50% 0%;
        -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.8) 30%, transparent 95%);
                mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.8) 30%, transparent 95%);
    }
    /* bagliore dell'orizzonte */
    & .sa3d-floor-wrap::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -6%;
        height: 42%;
        background: radial-gradient(50% 60% at 50% 50%, color-mix(in srgb, var(--brass) 16%, transparent), transparent 70%);
    }
    & .sa3d-floor {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -64px;
        height: 220%;
        transform-origin: 50% 100%;
        transform: rotateX(76deg);
        background-image:
            linear-gradient(to right,  var(--sa3d-line) 1px, transparent 1px),
            linear-gradient(to bottom, var(--sa3d-line) 1px, transparent 1px);
        background-size: 64px 64px;
    }

    /* Pulviscolo luminoso a due profondità. Lontano: punti tenui e "sfocati"
       (sfumatura larga). Vicino: nucleo nitido con alone. Le tessere hanno la stessa
       altezza per strato (210 / 300 px) perché il JS trasla modulo quell'altezza:
       così lo scorrimento è infinito senza salti. */
    & .sa3d-dust {
        position: absolute;
        left: -40px;
        right: -40px;
        top: 0;
        height: calc(100% + 600px);
    }
    & .sa3d-dust--far {
        opacity: 0.75;
        background-image:
            radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--accent) 34%, transparent) 0, transparent 3.5px),
            radial-gradient(circle at 70% 75%, color-mix(in srgb, var(--brass) 34%, transparent) 0, transparent 3px);
        background-size: 190px 210px, 270px 210px;
    }
    & .sa3d-dust--near {
        background-image:
            radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--accent) 75%, var(--brass)) 0 1.4px, color-mix(in srgb, var(--accent-light) 30%, transparent) 2px, transparent 5px),
            radial-gradient(circle at 75% 65%, var(--brass) 0 1.2px, color-mix(in srgb, var(--brass) 25%, transparent) 2px, transparent 4.5px);
        background-size: 340px 300px, 460px 300px;
    }

    /* Luce che segue il puntatore (solo mouse/penna: il JS accende .sa3d-pointer). */
    & .sa3d-spot {
        position: absolute;
        left: 0;
        top: 0;
        width: 760px;
        height: 760px;
        margin: -380px 0 0 -380px;
        border-radius: 50%;
        opacity: 0;
        transition: opacity 0.6s ease;
        background: radial-gradient(closest-side,
            color-mix(in srgb, var(--brass) 16%, transparent),
            color-mix(in srgb, var(--accent-light) 12%, transparent) 46%,
            transparent 72%);
    }
    &.sa3d-pointer .sa3d-spot { opacity: 1; }

    /* ═════════════════════ TITOLO DI PAGINA ═════════════════════
       Colore unico e fisso (richiesta del cliente, vedi app.css): la profondità la
       dà un'estrusione leggera con text-shadow, non un gradiente. Contrasto
       #3730A3 sul canvas ≈ 9:1. */
    & .mud-main-content .page-header .mud-typography-h4,
    & .mud-main-content .page-header .mud-typography-h5 {
        color: var(--accent-darker);
        text-shadow:
            0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent),
            0 2px 0 color-mix(in srgb, var(--accent) 14%, transparent),
            0 12px 30px color-mix(in srgb, var(--accent) 24%, transparent);
    }

    /* ═════════════════════ SUPERFICI ═════════════════════
       Le superfici "galleggiano": ombre a più livelli al posto di quelle quasi
       piatte di app.css. Solo le superfici di primo livello (una paper dentro una
       paper non raddoppia l'ombra). */
    & .mud-main-content :is(.mud-card, .mud-table, .mud-data-grid, .tl, .cal-kpi):not(.fzb *),
    & .mud-main-content .mud-paper:not(.page-header):not(.mud-paper .mud-paper):not(.fzb *) {
        box-shadow: var(--sa3d-depth-1) !important;
    }

    /* Ingresso: pageIn di app.css (fill "both") lasciava un transform permanente su
       ogni paper; qui l'ingresso lo fa il JS (data-sa3d), che a fine corsa non lascia
       nessun transform. Va spento in modo STABILE, non solo durante data-sa3d,
       altrimenti alla rimozione dell'attributo pageIn ripartirebbe da capo. */
    & .mud-main-content :is(.page-header, .mud-card, .mud-table, .mud-data-grid, .mud-paper):not(.fzb *) {
        animation: none;
    }

    /* Transizioni morbide per il ritorno dall'inclinazione (tilt) e per l'hover. */
    & .mud-main-content :is(.mud-card, .stat-card, .cal-kpi, .vs-card):not(.fzb *) {
        transition: transform 0.45s var(--sa3d-ease), box-shadow 0.45s var(--sa3d-ease), border-color 0.2s ease;
    }

    /* ── Ingresso dal fondo (profondità di campo) ──
       pending: lontano, inclinato, trasparente (e sfocato su desktop);
       in:      a fuoco, al suo posto. Poi il JS toglie l'attributo: nessun transform resta. */
    & [data-sa3d] { will-change: opacity, transform; }
    & [data-sa3d="pending"] {
        opacity: 0;
        transform: perspective(1400px) translate3d(0, 36px, -140px) rotateX(8deg);
        transform-origin: 50% 0;
    }
    /* Il titolo non si sposta: la mascotte ne misura l'icona ogni 250 ms
       (mascot-follow.js) e la vedrebbe scivolare. Solo messa a fuoco. */
    & [data-sa3d="pending"][data-sa3d-kind="flat"] { transform: none; }
    & [data-sa3d="pending"][data-sa3d-blur] { filter: blur(6px); }
    & [data-sa3d="in"] {
        transition:
            opacity   0.7s var(--sa3d-ease) var(--sa3d-delay, 0ms),
            transform 0.9s var(--sa3d-ease) var(--sa3d-delay, 0ms),
            filter    0.7s var(--sa3d-ease) var(--sa3d-delay, 0ms) !important;
    }

    /* Righe nuove (filtri, ordinamento, cambio pagina): entrano in sequenza. */
    & [data-sa3d-row] {
        animation: sa3dRowIn 0.5s var(--sa3d-ease) backwards;
        animation-delay: calc(var(--sa3d-i, 0) * 35ms);
    }

    /* ── Inclinazione 3D + riflesso che segue il puntatore (il JS imposta le variabili
       solo sulla card sotto il mouse). Riflesso come background-image: sta SOTTO il testo.
       Selettore volutamente pari in specificità a quello delle ombre qui sopra e scritto
       dopo: deve vincere anche sui box-shadow !important di app.css. */
    & .mud-main-content :is(.mud-card, .stat-card, .cal-kpi, .vs-card):not(.fzb *)[data-sa3d-tilt] {
        transform: perspective(900px) rotateX(var(--sa3d-rx, 0deg)) rotateY(var(--sa3d-ry, 0deg)) translate3d(0, -3px, 0) !important;
        transition: transform 0.14s ease-out, box-shadow 0.3s var(--sa3d-ease) !important;
        box-shadow: var(--sa3d-depth-3) !important;
        background-image: radial-gradient(280px circle at var(--sa3d-gx, 50%) var(--sa3d-gy, 0%),
            color-mix(in srgb, var(--accent-light) 16%, transparent), transparent 62%) !important;
        will-change: transform;
    }

    /* ═════════════════════ GRIGLIA TENANT (/superadmin) ═════════════════════
       Struttura invariata (colonne, contenuti, azioni definiti nella pagina): qui solo
       profondità e luce. Niente ::before/::after sulle righe: .tl__row è un contenitore
       grid e uno pseudo-elemento diventerebbe una cella in più. */
    & .tl {
        border-color: color-mix(in srgb, var(--accent) 14%, var(--border));
    }
    & .tl__head {
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 6%, var(--surface)),
            color-mix(in srgb, var(--accent) 3%, var(--surface)));
    }
    & .tl__row {
        transition: background-color 0.15s ease, opacity 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--sa3d-ease);
    }

    /* ═════════════════════ NAVIGAZIONE (drawer admin) ═════════════════════ */
    & .mud-drawer .mud-nav-link { transform-origin: 0 50%; }
    & .mud-drawer .mud-nav-link.mud-nav-link-active {
        background-image: linear-gradient(90deg,
            color-mix(in srgb, var(--accent-light) 24%, transparent),
            color-mix(in srgb, var(--accent) 8%, transparent)) !important;
        box-shadow:
            inset 0 0 0 1px color-mix(in srgb, var(--accent-light) 45%, transparent),
            0 0 24px -8px var(--sa3d-glow);
    }
    /* sul fondo scuro del drawer il focus usa l'indaco chiaro (#818CF8 su #0B1026 ≈ 6:1) */
    & .mud-drawer :focus-visible { outline-color: var(--accent-light); }

    /* ═════════════════════ TAB E PULSANTI ═════════════════════ */
    & .mud-main-content .mud-tab-slider {
        box-shadow: 0 0 12px var(--sa3d-glow), 0 0 2px var(--accent-light);
    }
    & .mud-main-content .mud-button-filled.mud-button-filled-primary {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            0 8px 20px -10px var(--sa3d-glow);
    }

    /* Focus ben visibile anche sopra superfici e luci: anello + alone. */
    & .mud-main-content :is(a, button, [role="button"], [tabindex]):focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent);
    }

    /* ═════════════════════ SOLO MOUSE ═════════════════════
       Effetti di hover: su touch l'hover "resta appeso" dopo il tocco. */
    @media (hover: hover) and (pointer: fine) {
        /* Profondità di campo sulla griglia: la riga sotto il puntatore viene avanti
           e s'illumina, le altre arretrano appena. 0.82 tiene il testo secondario
           sopra 4.5:1 sul bianco. */
        & .tl:hover .tl__row:not(:hover):not(.is-open) { opacity: 0.82; }
        & .tl__row:hover {
            position: relative;
            z-index: 1;
            transform: scale(1.004);
            background-color: color-mix(in srgb, var(--accent) 5%, var(--surface));
            background-image: radial-gradient(520px circle at var(--sa3d-px, 30%) var(--sa3d-py, 50%),
                color-mix(in srgb, var(--accent-light) 20%, transparent), transparent 62%);
            box-shadow:
                inset 3px 0 0 var(--accent),
                0 12px 26px -16px var(--sa3d-glow);
        }

        & .mud-main-content .mud-card:not(.fzb *):not([data-sa3d-tilt]):hover { box-shadow: var(--sa3d-depth-2) !important; }

        & .mud-drawer .mud-nav-link:hover {
            transform: perspective(500px) translateX(4px) rotateY(-6deg);
            background-image: linear-gradient(90deg,
                color-mix(in srgb, var(--accent-light) 18%, transparent), transparent 75%) !important;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 10px 22px -14px var(--sa3d-glow);
        }
    }

    /* ═════════════════════ TELEFONO ═════════════════════
       Scena alleggerita: niente pulviscolo vicino né luce del puntatore,
       raggi più tenui e pavimento più basso, così il contenuto resta protagonista. */
    @media (max-width: 37.5em) {
        & .sa3d-dust--near,
        & .sa3d-spot { display: none; }
        & .sa3d-beams { opacity: 0.6; }
        & .sa3d-floor-wrap { height: 40vh; }
        & .sa3d-floor { background-size: 48px 48px; }
    }

    /* ═════════════════════ MOVIMENTO RIDOTTO ═════════════════════
       Resta l'estetica statica (scena, ombre, luci ferme), sparisce ogni movimento.
       Il JS in questo caso non aggancia nemmeno scroll e puntatore. */
    @media (prefers-reduced-motion: reduce) {
        & [data-sa3d] {
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
            transition: none !important;
        }
        & [data-sa3d-row],
        & .sa3d-rig.is-warp { animation: none !important; }
        & [data-sa3d-tilt],
        & .tl__row:hover,
        & .mud-drawer .mud-nav-link:hover { transform: none !important; }
    }

    /* Contrasto forzato (Windows): la scena è solo decorazione, via. */
    @media (forced-colors: active) {
        & #sa3d-scene { display: none; }
    }

    /* Stampa: niente scena, tutto a fuoco e al suo posto. */
    @media print {
        & #sa3d-scene { display: none !important; }
        & [data-sa3d] {
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
        }
    }
}

/* ============================================================================
   SuperAdmin — superfici omogenee "bluetto" (2026-10-08)

   Vale per TUTTE le pagine /superadmin, anche con la scena spenta (.sa3d-off):
   per questo sta fuori dal blocco :not(.sa3d-off). Nessun bianco pieno: le
   superfici MudBlazor (tab, pannelli a fisarmonica, menu, dialog, input) usano
   le stesse variabili della palette superadmin di app.css. Il modulo Budget
   (.fzb) ha un design system proprio e resta escluso.

   Le variabili --mud-palette-* le inietta MudThemeProvider su :root (0,1,0):
   html[data-vertical="superadmin"] (0,1,1) vince senza !important.
   ============================================================================ */
html[data-vertical="superadmin"] {
    --mud-palette-background: var(--canvas);
    --mud-palette-surface: var(--surface);
    --mud-palette-background-gray: var(--surface-2);
    --mud-palette-lines-default: var(--border);
    --mud-palette-table-lines: var(--border);
    --mud-palette-table-striped: var(--surface-2);
    --mud-palette-table-hover: var(--accent-tint);
    --mud-palette-divider: var(--border);

    /* Barra dei tab: un tono sotto la card, così si legge come intestazione.
       (In MudBlazor 7 la barra è .mud-tabs-tabbar; .mud-tabs-toolbar non esiste più.) */
    & .mud-main-content .mud-tabs-tabbar:not(.fzb *) {
        background: var(--surface-2);
        border-bottom: 1px solid var(--border-strong);
    }
    & .mud-main-content .mud-tabs:not(.fzb *) {
        border-radius: var(--r-md);
    }

    /* Tab "fisse": scorrendo un pannello lungo la barra dei tab resta agganciata
       sotto l'AppBar invece di uscire dallo schermo. MudBlazor mette overflow:hidden
       su .mud-tabs-rounded, che annullerebbe lo sticky: overflow:clip taglia gli
       angoli allo stesso modo ma non crea un contenitore di scroll.
       Solo il livello più esterno: tab annidate restano normali. */
    & .mud-main-content .mud-tabs:not(.mud-tabs .mud-tabs):not(.fzb *) {
        overflow: clip;
    }
    & .mud-main-content .mud-tabs:not(.mud-tabs .mud-tabs):not(.fzb *) > .mud-tabs-tabbar {
        position: sticky;
        top: var(--zcd-appbar-h, 64px);
        z-index: 5;                  /* sotto drawer (1100+) e AppBar (1300) */
        box-shadow: 0 8px 18px -14px rgba(30, 58, 110, 0.45);
    }
    & .mud-main-content .mud-tab.mud-tab-active:not(.fzb *) {
        color: var(--accent-darker) !important;
        background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    }

    /* Pannelli a fisarmonica (documentazione, panoramica funzionalità). */
    & .mud-main-content .mud-expand-panel:not(.fzb *) {
        background: var(--surface);
        border: 1px solid var(--border);
    }
    & .mud-main-content .mud-expand-panel .mud-expand-panel-header:not(.fzb *) {
        background: var(--surface-2);
    }
    & .mud-main-content .mud-expand-panel.mud-panel-expanded .mud-expand-panel-header:not(.fzb *) {
        background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
    }

    /* Paper dentro paper (es. riquadri statistiche del Backup dentro un tab):
       un tono più azzurro per staccarli dal contenitore senza bordi colorati. */
    & .mud-main-content .mud-paper .mud-paper.mud-paper-outlined:not(.fzb *) {
        background: var(--surface-2) !important;
        border-color: var(--border-strong);
    }

    /* Telefono: tab compatti e scorrevoli, pannelli con padding ridotto. */
    @media (max-width: 37.5em) {
        & .mud-main-content .mud-tab:not(.fzb *) {
            min-width: 0;
            padding-inline: 12px;
            min-height: 44px;            /* tap target */
        }
        & .mud-main-content .mud-expand-panel .mud-expand-panel-content:not(.fzb *) {
            padding-inline: 10px;
        }
        & .mud-main-content .mud-tabs-panels > .pa-4:not(.fzb *) {
            padding: 12px !important;
        }
    }
}