/* ── NovaCloud — Self-hosted fonts ── */
/* DM Sans — normal, pesi 300-800 (latin-ext e latin condividono lo stesso file binario) */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/dm-sans-latin-ext-b9209b52c467e65e50582bcb55f3bb7f.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/dm-sans-latin-6c1e961057d2473c0b110390bc876d36.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans — italic, peso 400 */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-sans-italic-latin-ext-168f36adb1d7fc690b10d6ebff829dd7.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-sans-italic-latin-c0645a1b818848a5fad84228718dd5e8.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono — pesi 400 e 500 (condividono lo stesso file binario) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-ext-bd4781a31b4215a1e80868802b3d0e05.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-b636a65da4f00129f08c7df6e5dd75ac.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Mono — pesi 400 e 500 (file separati per ciascun peso) */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-mono-400-latin-ext-c33164c06d338823dffc50e02012d2ca.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-mono-400-latin-e1ed461ac183567c761537bf3eb4a574.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dm-mono-500-latin-ext-b438d33927f31974a4cfdc1d086d056b.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dm-mono-500-latin-c4598219c4b8a5667e824d99b06100b4.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Syne — pesi 400-800 (latin, latin-ext, greek condividono lo stesso file per ciascun subset) */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/syne-greek-d761460e4efaf47c7688df2659906bf7.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/syne-latin-ext-2f261df76f0db2b9ece4fd40a14bcaaa.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/syne-latin-559e8363d74f653c3f4f0a70caed2053.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── NovaCloud — Shared CSS v1.0 ── */
/* Estratto dai template per ridurre duplicazione e TTI */

:root {
    --bg:#070e1b; --sf:#0c1524; --s2:#101d32; --s3:#142038;
    --blue:#2563eb; --blue2:#3b82f6; --blue3:#93c5fd;
    /* FIX #10 — #8898b8 era ~3.8:1 (sotto WCAG AA). #a8b6d4 ≈ 5.8:1 */
    /* UI-03 — #3d4f6a era ~2.1:1 (sotto WCAG AA per testo decorativo). #6b7fa8 ≈ 3.6:1 */
    --text:#eef2ff; --text2:#a8b6d4; --text3:#6b7fa8;
    --bd:rgba(255,255,255,0.07); --accent:#22d3ee;
    --green:#10b981; --red:#ef4444; --amber:#f59e0b;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); }
a { text-decoration:none; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-thumb { background:var(--s3); border-radius:4px; }
@keyframes fadeIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes popIn   { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }

.alert { display:flex; align-items:center; gap:9px; padding:11px 14px; border-radius:10px; font-size:13px; margin-bottom:16px; }
.alert-success { background:rgba(16,185,129,.09); border:1px solid rgba(16,185,129,.22); color:#6ee7b7; }
/* FIX #29 — #fca5a5 era ~4.4:1 (sotto WCAG AA su bg scuro). #fecaca ≈ 5.2:1 */
.alert-danger  { background:rgba(239,68,68,.14);  border:1px solid rgba(239,68,68,.28);  color:#fecaca; }
.btn-ca { background:none; border:none; cursor:pointer; color:inherit; margin-left:auto; font-size:14px; opacity:.6; }

.welcome-banner { background:linear-gradient(135deg,var(--blue),#1e40af); padding:36px 40px; border-radius:24px; position:relative; overflow:hidden; box-shadow:0 20px 40px rgba(37,99,235,.2); margin-bottom:28px; }
/* FIX #39 — standardizzato su ☁ senza variation selector per coerenza */
.welcome-banner::after { content:'☁'; position:absolute; right:-10px; bottom:-20px; font-size:130px; opacity:.1; pointer-events:none; }
.welcome-title { font-size:28px; font-weight:800; margin-bottom:6px; }
.welcome-sub { opacity:.85; font-size:15px; }

.stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:28px; }
.stat-card { background:var(--sf); border:1px solid var(--bd); padding:20px; border-radius:18px; transition:.25s; }
.stat-card:hover { border-color:var(--blue); transform:translateY(-4px); }
.stat-num { font-size:26px; font-weight:800; margin-top:12px; }
.stat-lbl { color:var(--text2); font-size:12px; margin-top:2px; }

.quick-file { background:var(--s2); padding:13px 16px; border-radius:14px; display:flex; align-items:center; gap:14px; margin-bottom:10px; border:1px solid transparent; transition:.2s; cursor:pointer; }
.quick-file:hover { border-color:var(--blue2); background:var(--s3); }

.sb { width:260px; flex-shrink:0; background:var(--sf); border-right:1px solid var(--bd); display:flex; flex-direction:column; }
.sb-head { padding:28px 20px; display:flex; align-items:center; gap:12px; }
.sb-content { flex:1; padding:0 12px; overflow-y:auto; }
.sb-lbl { font-size:11px; font-weight:700; color:var(--text2); text-transform:uppercase; margin:20px 12px 10px; letter-spacing:1px; }
.nav-it { display:flex; align-items:center; gap:12px; padding:10px 16px; border-radius:12px; color:var(--text2); transition:.18s; margin-bottom:2px; font-size:14px; }
.nav-it:hover { background:var(--s2); color:var(--text); }
.nav-it.active { background:var(--s3); color:var(--blue2); font-weight:600; }
.logo-icon { width:32px; height:32px; background:linear-gradient(135deg,var(--blue),var(--accent)); border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; box-shadow:0 4px 12px rgba(37,99,235,.3); }
.sb-title { font-weight:800; font-size:20px; letter-spacing:-.5px; }

/* ── Sidebar components (storage, user pill, bell) ── */
.storage-box { padding:16px; margin:12px; background:var(--s2); border-radius:18px; border:1px solid var(--bd); display:flex; align-items:center; gap:14px; }
.progress-circle { position:relative; width:58px; height:58px; flex-shrink:0; }
.progress-circle svg { transform:rotate(-90deg); width:58px; height:58px; }
.progress-circle circle { fill:none; stroke-width:6; stroke-linecap:round; }
.progress-circle .bg { stroke:var(--s3); }
.progress-circle .prog { stroke:var(--blue); transition:stroke-dashoffset 1s ease; }
.perc-text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-weight:800; font-size:11px; }
.user-pill { margin:0 12px 14px; padding:10px 12px; background:var(--s3); border-radius:14px; display:flex; align-items:center; gap:10px; border:1px solid var(--bd); }
.u-av { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--blue),var(--accent)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:11px; flex-shrink:0; }
.u-av-sm { width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--blue),var(--accent)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; }
.u-name { font-size:13px; font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-logout { background:none; border:none; color:var(--text2); cursor:pointer; font-size:18px; transition:.2s; padding:4px; }
.btn-logout:hover { color:var(--red); }
.btn-bell { background:none; border:none; color:var(--text2); cursor:pointer; font-size:18px; padding:4px; transition:color .2s,transform .2s; position:relative; display:flex; align-items:center; }
.btn-bell:hover { color:var(--accent); transform:rotate(-15deg); }
.bell-wrap { position:relative; display:inline-flex; }
.bell-dot { display:none; position:absolute; top:-2px; right:-2px; width:7px; height:7px; border-radius:50%; background:var(--accent); border:1.5px solid var(--sf); box-shadow:0 0 6px rgba(34,211,238,.7); }
.bell-active .bi-bell::before { content:"\f1f6"; }
.bell-active .bell-dot { display:block; }
.bell-active { color:var(--accent)!important; }
.bell-ios-hidden { display:none!important; }
.mobile-header .right-slot { display:flex; align-items:center; gap:8px; }
.btn-bell-header { background:none; border:none; color:var(--text2); cursor:pointer; font-size:20px; padding:4px; position:relative; display:flex; align-items:center; -webkit-tap-highlight-color:transparent; }
.btn-bell-header:active { transform:scale(0.88); }

/* ============================================================
   NovaCloud — Glassmorphism Layer v1.0
   Selettori con `html body` / `body .x` per vincere per specificità
   sugli stili inline dei singoli template.
   ============================================================ */

/* Ambient: 4 blob colorati come pavimento luce, dietro a tutto */
html body {
    background:
        radial-gradient(900px 600px at 10% 6%,   rgba(37,99,235,0.28)  0%, transparent 60%),
        radial-gradient(720px 520px at 92% 14%,  rgba(34,211,238,0.20) 0%, transparent 60%),
        radial-gradient(800px 700px at 78% 92%,  rgba(139,92,246,0.22) 0%, transparent 60%),
        radial-gradient(620px 580px at 6% 96%,   rgba(16,185,129,0.14) 0%, transparent 60%),
        var(--bg);
    background-attachment: fixed;
}

/* Floating decorativo: due "luci" pulsanti sopra al body bg (z-index basso) */
body::before {
    content:'';
    position:fixed;
    inset:-10%;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(420px 420px at 30% 30%, rgba(59,130,246,0.16) 0%, transparent 70%),
        radial-gradient(380px 380px at 70% 70%, rgba(34,211,238,0.12) 0%, transparent 70%);
    animation: ncAmbientFloat 22s ease-in-out infinite alternate;
    will-change: transform, opacity;
}
@keyframes ncAmbientFloat {
    from { transform: translate3d(0,0,0)        scale(1);    opacity:.85; }
    to   { transform: translate3d(-3%,-2%,0)    scale(1.08); opacity:1;   }
}

/* Le superfici devono stare sopra ai blob decorativi */
.sb, .main, .mobile-header, .bottom-nav, aside, header, nav, main { position: relative; z-index: 1; }

/* Sidebar: vetro smerigliato verticale */
body .sb {
    background: linear-gradient(180deg, rgba(12,21,36,0.62), rgba(7,14,27,0.52));
    -webkit-backdrop-filter: blur(22px) saturate(1.45);
    backdrop-filter:         blur(22px) saturate(1.45);
    border-right: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset -1px 0 0 rgba(255,255,255,0.04);
}

/* Nav: hover & active versione vetro */
body .nav-it { border: 1px solid transparent; }
body .nav-it:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text);
}
body .nav-it.active {
    background: linear-gradient(135deg, rgba(59,130,246,0.20), rgba(34,211,238,0.14));
    border-color: rgba(59,130,246,0.32);
    color: var(--text);
    box-shadow: 0 6px 18px rgba(37,99,235,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Storage box e user pill (override dei valori inline nei template) */
body .storage-box {
    background: rgba(16,29,50,0.45);
    -webkit-backdrop-filter: blur(16px) saturate(1.35);
    backdrop-filter:         blur(16px) saturate(1.35);
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 6px 22px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.05);
}
body .user-pill {
    background: rgba(20,32,56,0.50);
    -webkit-backdrop-filter: blur(16px) saturate(1.35);
    backdrop-filter:         blur(16px) saturate(1.35);
    border: 1px solid rgba(255,255,255,0.10);
}

/* Welcome banner: gradiente vivo + bordo vetro + shimmer animato */
body .welcome-banner {
    background: linear-gradient(135deg, rgba(37,99,235,0.88), rgba(30,64,175,0.78) 55%, rgba(34,211,238,0.42));
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter:         blur(24px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 22px 50px rgba(37,99,235,0.28), inset 0 1px 0 rgba(255,255,255,0.20);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
body .welcome-banner::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -40%;
    width: 60%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.16) 50%, transparent 70%);
    transform: skewX(-18deg);
    animation: ncShimmer 6.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
body .welcome-banner > * { position: relative; z-index: 1; }
@keyframes ncShimmer {
    0%   { left: -40%; }
    55%  { left: 110%; }
    100% { left: 110%; }
}

/* Stat cards: vetro + lift su hover */
body .stat-card {
    background: rgba(12,21,36,0.46);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter:         blur(18px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 10px 32px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.05);
}
body .stat-card:hover {
    background: rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.42);
    box-shadow: 0 18px 44px rgba(37,99,235,0.28), inset 0 1px 0 rgba(255,255,255,0.10);
    transform: translateY(-4px);
}

/* Quick file rows: vetro leggero */
body .quick-file {
    background: rgba(16,29,50,0.42);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    backdrop-filter:         blur(12px) saturate(1.3);
    border: 1px solid rgba(255,255,255,0.07);
}
body .quick-file:hover {
    background: rgba(59,130,246,0.10);
    border-color: rgba(59,130,246,0.36);
    transform: translateY(-1px);
}

/* Activity box: pannello vetro grande */
body .activity-box {
    background: rgba(12,21,36,0.50);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter:         blur(20px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 12px 38px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Alert: già translucidi, aggiungiamo il blur */
body .alert {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter:         blur(10px);
}

/* Mobile header: minimal trasparente (no barra, no bordo, no vetro) */
body .mobile-header {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter:         none;
    border-bottom: none;
}

/* Utility class riutilizzabile */
.glass {
    background: rgba(12,21,36,0.46);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter:         blur(18px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Riduci animazioni se richiesto */
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
    body .welcome-banner::before { animation: none; left: 110%; }
}

/* ── Toggle "mostra password" (login / register / reset-password) ──
   Lo rendiamo più evidente con un piccolo pill cliccabile.
   Vale per .pw-toggle (login, reset) e .toggle-pwd (register). */
body .pw-toggle,
body .toggle-pwd {
    color: var(--blue3);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 6px 10px;
    margin-right: 4px;
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s, color .15s, transform .12s;
}
body .pw-toggle:hover,
body .toggle-pwd:hover {
    color: #fff;
    background: rgba(59,130,246,0.18);
}
body .pw-toggle:active,
body .toggle-pwd:active { transform: scale(0.92); }
body .pw-toggle:focus-visible,
body .toggle-pwd:focus-visible {
    outline: 2px solid var(--blue2);
    outline-offset: 1px;
}

/* Fallback: browser senza backdrop-filter -> usa fondali pieni più scuri */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    body .sb           { background: rgba(12,21,36,0.94); }
    body .stat-card    { background: rgba(12,21,36,0.92); }
    body .activity-box { background: rgba(12,21,36,0.92); }
    body .quick-file   { background: rgba(16,29,50,0.92); }
    body .storage-box  { background: rgba(16,29,50,0.92); }
    body .user-pill    { background: rgba(20,32,56,0.94); }
}

/* ============================================================
   Glassmorphism Layer v1.1 — superfici aggiuntive (2026-06)
   Header/topbar, pannello notifiche, banner PWA, toggle push,
   notif-panel, banner cookie, banner update. Coerente con la
   palette (#2563eb / #22d3ee / #8b5cf6 / base #070e1b).
   ============================================================ */

/* Pannello notifiche desktop (sidebar): override degli stili inline opachi
   con vetro saturo + inset highlight. Selettore #id per battere lo style inline. */
body #notif-panel {
    background: rgba(12,21,36,0.62) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.7);
    backdrop-filter:         blur(26px) saturate(1.7);
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.07);
}
/* Footer del pannello (toggle push) un filo più luminoso */
body #push-toggle-wrapper {
    background: rgba(255,255,255,0.04);
}

/* Mobile header minimal: nessuna ombra/barra; slim + safe-area top.
   Logo piccolo a sinistra, azioni flottanti a destra, sfondo trasparente. */
body .mobile-header {
    box-shadow: none;
    padding: 12px 18px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    z-index: 50;
    /* Niente barra: l'header non resta appiccicato in alto, scorre col
       contenuto (evita che il testo scorra sotto le icone trasparenti). */
    position: static !important;
}
/* Logo compatto, senza wordmark (look minimale) */
body .mobile-header .logo-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}
body .mobile-header .brand .sb-title { display: none; }
/* Azioni a destra: icone flottanti, pillola vetro discreta solo al tap/hover */
body .btn-bell-header,
body .u-av-sm {
    border-radius: 11px;
}
body .mobile-header .right-slot { gap: 10px; }
body .mobile-header .btn-bell-header {
    width: 38px; height: 38px;
    justify-content: center;
    border-radius: 12px;
    color: var(--text);
    transition: background .15s, transform .12s;
}
body .mobile-header .btn-bell-header:hover { background: rgba(255,255,255,0.07); }
body .mobile-header .btn-bell-header:active { transform: scale(0.9); }
body .mobile-header .u-av-sm {
    box-shadow: 0 4px 14px rgba(37,99,235,0.32);
}

/* Banner aggiornamento PWA (creato da pwa-update.js): look vetro coerente.
   Lo stile inline resta come fallback, qui lo "vetrifichiamo" via #id. */
body #pwa-update-banner {
    background: linear-gradient(135deg, rgba(37,99,235,0.62), rgba(34,211,238,0.34)) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter:         blur(22px) saturate(1.6);
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 14px 40px rgba(37,99,235,0.40), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
body #pwa-update-banner button {
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.28);
    color: #fff;
    border-radius: 9px;
    padding: 5px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter:         blur(6px);
    transition: background .15s, transform .12s;
}
body #pwa-update-banner button:hover { background: rgba(255,255,255,0.26); }
body #pwa-update-banner button:active { transform: scale(0.94); }

/* Banner cookie consent (fragment layout.html): rinforzo inset highlight.
   Lo style inline ha già blur(18px); qui aggiungo il filo di luce e la saturazione. */
body #nc-cookie-banner {
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter:         blur(20px) saturate(1.5);
    box-shadow: 0 -10px 36px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Toast / feedback push (#push-feedback creato da push-manager.js) */
body #push-feedback {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter:         blur(8px);
    border: 1px solid rgba(255,255,255,0.08);
}

/* Fallback: dove il blur non è supportato, fondali opachi leggibili. */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    body #notif-panel    { background: rgba(12,21,36,0.97) !important; }
    body #pwa-update-banner { background: linear-gradient(135deg,#2563eb,#1a4fd8) !important; }
    body #nc-cookie-banner  { background: rgba(7,14,27,0.98) !important; }
}

/* A11Y: rispetta la preferenza di trasparenza ridotta — rendi le superfici
   vetro opache così restano leggibili senza l'effetto blur. */
@media (prefers-reduced-transparency: reduce) {
    body .sb,
    body .stat-card,
    body .activity-box,
    body .quick-file,
    body .storage-box,
    body .user-pill,
    body #notif-panel,
    body #nc-cookie-banner,
    body .bottom-nav {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    body .sb            { background: rgba(12,21,36,0.97) !important; }
    body .stat-card,
    body .activity-box  { background: rgba(12,21,36,0.95) !important; }
    body .quick-file    { background: rgba(16,29,50,0.95) !important; }
    body .storage-box   { background: rgba(16,29,50,0.95) !important; }
    body .user-pill     { background: rgba(20,32,56,0.96) !important; }
    body #notif-panel   { background: rgba(12,21,36,0.98) !important; }
    body #nc-cookie-banner { background: rgba(7,14,27,0.99) !important; }
    body .bottom-nav    { background: rgba(16,26,45,0.96) !important; }
}

/* Override Bootstrap Icons font-display: block previene FOIT (icone invisibili durante il caricamento).
   Questo @font-face è dichiarato dopo il webjar CSS, quindi vince per ordine di cascata. */
@font-face {
    font-family: "bootstrap-icons";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("/webjars/bootstrap-icons/1.11.1/font/fonts/bootstrap-icons-ed62b9f1e0c75121f4d797a4a85730a2.woff2") format("woff2"),
         url("/webjars/bootstrap-icons/1.11.1/font/fonts/bootstrap-icons-1a51dfbe5467607389d603c02a77cd10.woff") format("woff");
}

/* A11Y: anello di focus visibile per la navigazione da tastiera.
   Si applica solo a :focus-visible (tastiera), non al focus da mouse/tap. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── BOTTOM-NAV PWA: stile "floating pill", solo icone (2026-06) ───────────
   Barra mobile staccata dal fondo e arrotondata, senza etichette, con una
   "pillola" dietro l'icona attiva (stile X/Twitter). Override unico qui:
   uso il selettore "body .bottom-nav" (specificità più alta) + !important per
   battere le regole .bottom-nav ridefinite inline in ogni template — stesso
   pattern di "body .mobile-header". Le icone e le voci NON cambiano: vivono
   nel fragment bottom-nav di layout.html. Visibile solo su mobile (≤768px),
   dove i singoli template già impostano .bottom-nav{display:flex}. */
@media (max-width: 768px) {
    body .bottom-nav {
        left: 14px !important;
        right: 14px !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        border-top: 1px solid rgba(255,255,255,0.08) !important;
        border-radius: 26px !important;
        padding: 0 6px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.40) !important;
        background: rgba(16,26,45,0.38) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
        backdrop-filter: blur(24px) saturate(1.6) !important;
    }
    /* Solo icone: le etichette sono nodi di testo dopo <i>; font-size:0 le
       collassa, poi ripristino la dimensione sull'icona. */
    body .bottom-nav a,
    body .bottom-nav .nav-btn {
        font-size: 0 !important;
        gap: 0 !important;
        padding: 14px 4px !important;
        color: #9aa6bd !important;
    }
    /* Le voci stanno SOPRA la pillola mobile (.nav-indicator). */
    body .bottom-nav a,
    body .bottom-nav .nav-btn { position: relative !important; z-index: 1 !important; }
    body .bottom-nav a i,
    body .bottom-nav .nav-btn i {
        font-size: 23px !important;
        line-height: 1 !important;
        transition: transform .18s, color .18s !important;
    }
    body .bottom-nav a:active i,
    body .bottom-nav .nav-btn:active i { transform: scale(0.90) !important; }
    /* Niente lineetta superiore sull'attiva. */
    body .bottom-nav a.active::before { display: none !important; }
    /* Icona attiva in bianco pieno (lo sfondo è la pillola scorrevole). */
    body .bottom-nav a.active { color: #fff !important; }
    body .bottom-nav a.active i { color: #fff !important; transform: none !important; filter: none !important; }

    /* ── Pillola SCORREVOLE: un unico elemento che slida da una voce all'altra
       quando cambi sezione. Posizione/animazione gestite in JS (nav-indicator
       script nel fragment bottom-nav). Sta DIETRO le icone (z-index 0). ── */
    body .bottom-nav { overflow: hidden !important; }
    body .bottom-nav .nav-indicator {
        position: absolute !important;
        top: 50% !important;
        left: 0 !important;
        width: 52px !important;
        height: 40px !important;
        border-radius: 22px !important;
        background: rgba(255,255,255,0.16) !important;
        z-index: 0 !important;
        pointer-events: none !important;
        opacity: 0;                 /* mostrata da JS dopo il primo posizionamento */
        transform: translate(0, -50%);
        will-change: transform;
    }
}