/* RenderAI — le BARRE DELL'APP (barra in alto, menu del profilo, barra laterale / barra in basso da telefono).
   Storia: 2026-10-10 sera prima versione col nero caldo della home; poi, stessa sera, l'utente: «riportale al colore che
   avevano prima» e «ispirati a Uiverse, FreeFrontend, Radix UI / shadcn UI, Aceternity UI». Quindi:
   - COLORI DI PRIMA: barra in alto #07070f→#0a0a16, laterale #06060a, menu #111, grigi lavanda (#c8c8e0, #8888aa),
     linee bianche trasparenti, oro #c9a84c come accento. Niente marrone.
   - LINGUAGGIO shadcn/Radix: pulsanti «outline» con hover pieno e anello di focus a due giri, menu a tendina che si apre
     con dissolvenza + leggero zoom dall'angolo (data-state open di Radix), voci con angoli 8 px e separatori sottili,
     voce attiva della laterale con fondo e ring interno come lo shadcn Sidebar.
   - TOCCHI Aceternity/Uiverse: un fascio di luce d'oro sotto la barra in alto, il riflesso che attraversa la pillola dei
     crediti al passaggio, lo spotlight che entra da sinistra sulle voci della laterale, l'asticella d'oro sulla voce attiva.
   Vale per le otto pagine che le hanno (home, index, wizard, advanced, archsketch, crediti, cronologia, impostazioni),
   linkato per ultimo nel <head>. SOLO GRAFICA: nessuna regola cambia posizione, misure, display o ordine; link, onclick,
   menu e comportamento da telefono restano quelli di ogni pagina. ⚠️ Ogni selettore ha il prefisso «html»: le pagine hanno
   regole tarde con !important e a parità di specificità vincerebbero loro. Ritorno = togliere il <link>. */

:root {
    --rb-top:linear-gradient(to bottom,#07070f,#0a0a16); --rb-rail:#06060a; --rb-pop:#111118; --rb-pop-2:#16161f;
    --rb-line:rgba(255,255,255,.07); --rb-line-2:rgba(255,255,255,.10); --rb-line-3:rgba(255,255,255,.16);
    --rb-fill:rgba(255,255,255,.04); --rb-fill-2:rgba(255,255,255,.07); --rb-fill-3:rgba(255,255,255,.10);
    --rb-fg:#ffffff; --rb-fg-2:#c8c8e0; --rb-fg-3:#9a9ab8; --rb-fg-4:#8080a0;
    --rb-gold:#c9a84c; --rb-gold-hi:#e8c96d; --rb-gold-a:rgba(201,168,76,.10); --rb-gold-b:rgba(201,168,76,.30);
    --rb-gold-fill:linear-gradient(135deg,#b8923e 0%,#c9a84c 35%,#f0d070 65%,#d4a840 100%);
    --rb-ring:0 0 0 2px #0a0a16, 0 0 0 4px rgba(201,168,76,.65);
    --rb-ease:cubic-bezier(.2,.7,.2,1);
}
@keyframes rbApri { from { opacity:0; transform:translateY(-4px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes rbRiflesso { from { transform:translateX(-120%) skewX(-20deg); } to { transform:translateX(220%) skewX(-20deg); } }

/* ═════════ LA BARRA IN ALTO ═════════ */
html #topnav {
    background:var(--rb-top) !important;
    border-bottom:1px solid var(--rb-line) !important;
    box-shadow:0 1px 0 rgba(255,255,255,.03), 0 4px 20px rgba(0,0,0,.5) !important;
}
/* il fascio di luce (Aceternity «beam»): un filo d'oro che sfuma ai lati, sotto la barra */
html #topnav::after {
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
    background:linear-gradient(90deg, transparent 0%, rgba(201,168,76,0) 15%, rgba(232,201,109,.55) 50%, rgba(201,168,76,0) 85%, transparent 100%);
    opacity:.55;
}
html #topnav a[href="home.html"] > span > span { color:var(--rb-gold) !important; }
html #topnav :is(button, a):focus-visible { outline:none !important; box-shadow:var(--rb-ring) !important; }

/* lingua e profilo: pulsanti «outline» di shadcn */
html #lang-dropdown > button, html #account-menu-wrap > button {
    background:var(--rb-fill) !important; border:1px solid var(--rb-line-2) !important; border-radius:10px !important;
    color:var(--rb-fg-2) !important; font-family:'Inter',sans-serif !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
    transition:background .2s, border-color .2s, color .2s, transform .15s !important;
}
html #lang-dropdown > button:hover, html #account-menu-wrap > button:hover {
    background:var(--rb-fill-2) !important; border-color:var(--rb-line-3) !important; color:var(--rb-fg) !important;
}
html #lang-dropdown > button:active, html #account-menu-wrap > button:active { transform:scale(.97); }
html #auth-avatar { background:var(--rb-gold-fill) !important; color:#1a1407 !important; font-weight:800 !important; box-shadow:0 0 0 2px rgba(201,168,76,.18) !important; }
html #auth-plan-badge { border-radius:6px !important; font-family:'Inter',sans-serif !important; letter-spacing:.04em !important; }
html #acct-chevron { color:var(--rb-fg-4) !important; transition:transform .25s var(--rb-ease); }

/* i crediti: la pillola d'oro di prima, col riflesso che la attraversa al passaggio (Uiverse «shine») */
html #btn-credits-topbar {
    position:relative; overflow:hidden; isolation:isolate;
    background:rgba(201,168,76,.10) !important; border:1px solid rgba(201,168,76,.30) !important; border-radius:10px !important;
    color:var(--rb-gold) !important; font-family:'Inter',sans-serif !important; font-variant-numeric:tabular-nums;
    box-shadow:inset 0 1px 0 rgba(255,236,180,.06) !important;
    transition:background .25s, border-color .25s, box-shadow .25s, transform .15s !important;
}
html #btn-credits-topbar::after {
    content:""; position:absolute; top:0; bottom:0; left:0; width:40%; pointer-events:none; z-index:-1;
    background:linear-gradient(90deg, transparent, rgba(255,236,180,.28), transparent); transform:translateX(-120%) skewX(-20deg);
}
html #btn-credits-topbar:hover {
    background:rgba(201,168,76,.16) !important; border-color:rgba(201,168,76,.55) !important;
    box-shadow:0 0 0 3px rgba(201,168,76,.10), 0 4px 16px rgba(201,168,76,.18) !important;
}
html #btn-credits-topbar:hover::after { animation:rbRiflesso .8s var(--rb-ease); }
html #btn-credits-topbar:active { transform:scale(.97); }

/* «Accedi» (ospite): l'oro di prima, con lo stesso riflesso */
html #auth-guest button { border-radius:10px !important; font-family:'Inter',sans-serif !important; transition:transform .15s, box-shadow .25s !important; }
html #auth-guest button:hover { box-shadow:0 4px 18px rgba(201,168,76,.45), 0 0 0 1px rgba(201,168,76,.35) !important; }
html #auth-guest button:active { transform:scale(.97); }

/* i menu a tendina come il DropdownMenu di Radix/shadcn: bordo sottile, angoli 12, voci arrotondate dentro un margine,
   apertura con dissolvenza e un leggero zoom dall'angolo in alto a destra */
html #lang-menu, html .lang-menu {
    background:var(--rb-pop) !important; border:1px solid var(--rb-line-2) !important; border-radius:12px !important;
    box-shadow:0 16px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.3) !important; padding:4px !important;
    transform-origin:top right;
}
html .lang-menu.open { animation:rbApri .18s var(--rb-ease); }
html .lang-menu button { border-radius:8px !important; color:var(--rb-fg-2) !important; font-family:'Inter',sans-serif !important; transition:background .15s, color .15s !important; }
html .lang-menu button:hover { background:var(--rb-fill-2) !important; color:var(--rb-fg) !important; }
html .lang-menu button.active { color:var(--rb-gold) !important; }

/* ═════════ IL MENU DEL PROFILO — col vestito della home (16/10 notte, l'utente: «rimodernizza al nuovo stile con le nuove
   animazioni di home anche tutto il menu a tendina che si apre dall'immagine profilo») ═════════
   Lo stesso linguaggio dei tasti della home (.hm-go) e delle finestre nuove (finestre.css, menu-download.css): superficie
   scura e calda, angoli morbidi, icone in un riquadro, e al passaggio l'ORO CHE RIEMPIE LA VOCE DA SINISTRA con la scritta
   che diventa scura (rosso per «Esci»). All'apertura le voci salgono una dopo l'altra. La riga della lingua non si
   riempie (non è un tasto). Testi pieni, mai sotto il 70% (§16). Le sottovoci di «Guide e note legali» (legal-footer.js)
   sono più piccole e senza icona. */
html #account-menu {
    --am-surface:#13131c; --am-surface-2:#1a1a25; --am-line:rgba(255,255,255,.10);
    --am-ink:#f4efe6; --am-ink-2:#d6cfc3; --am-ink-3:#aba295; --am-gold:#c9a84c; --am-gold-hi:#e8c96d; --am-on-gold:#1a1407;
    --am-sweep:linear-gradient(110deg,#b8922a,#e8c96d 60%,#d9b85a); --am-sweep-rosso:linear-gradient(110deg,#c94040,#f07070 60%,#e05858);
    --am-ease:cubic-bezier(.2,.7,.2,1);
    background:var(--am-surface) !important; border:1px solid var(--am-line) !important; border-radius:18px !important;
    box-shadow:0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.3) !important; min-width:248px !important;
    font-family:'Inter',sans-serif !important; transform-origin:top right;
}
html #account-menu.open { animation:rbApri .22s var(--am-ease); }
html #account-menu .acct-header {
    background:radial-gradient(120% 100% at 50% 0%, rgba(232,201,109,.12), transparent 65%), #0f0f17 !important;
    border-bottom:1px solid var(--am-line) !important; padding:16px 14px 12px !important;
}
html #account-menu .acct-avatar-lg { width:44px !important; height:44px !important; font-size:16px !important;
    box-shadow:0 0 0 3px #0f0f17, 0 0 0 4px rgba(232,201,109,.55), 0 8px 24px rgba(201,168,76,.25) !important; }
html #acct-name-lg { font-family:'Inter',sans-serif !important; font-size:14.5px !important; font-weight:700 !important; letter-spacing:-.01em; color:var(--am-ink) !important; }
html #acct-email-lg, html #acct-username-lg { color:var(--am-ink-3) !important; font-size:11.5px !important; }
html #acct-plan-label { border-radius:999px !important; font-family:'Inter',sans-serif !important; letter-spacing:.04em !important; font-size:10px !important; padding:3px 10px !important; }

/* le voci: dentro un margine, angoli 12, icona in un riquadro, l'oro che entra da sinistra */
html #account-menu .acct-row {
    position:relative !important; isolation:isolate; overflow:hidden;
    width:calc(100% - 12px) !important; margin:1px 6px !important; padding:7px 10px !important; gap:11px !important; border-radius:12px !important;
    color:var(--am-ink-2) !important; font-size:13.5px !important; font-weight:600 !important; text-decoration:none !important; text-align:left;
    transition:color .35s, background .2s !important; box-sizing:border-box;
}
html #account-menu .acct-row::before {
    content:""; position:absolute; inset:0; z-index:-1; background:var(--am-sweep);
    transform:scaleX(0); transform-origin:left center; transition:transform .5s var(--am-ease);
}
html #account-menu .acct-row > svg {
    flex:none; box-sizing:content-box; width:14px; height:14px; padding:7px; border-radius:9px;
    background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--am-line); color:var(--am-gold-hi);
    transition:color .35s, background .35s, box-shadow .35s;
}
html #account-menu .acct-row:not([style*="cursor:default"]):is(:hover, :focus-visible) { background:transparent !important; color:var(--am-on-gold) !important; outline:none; }
html #account-menu .acct-row:not([style*="cursor:default"]):is(:hover, :focus-visible)::before { transform:scaleX(1); }
html #account-menu .acct-row:not([style*="cursor:default"]):is(:hover, :focus-visible) > svg { color:var(--am-on-gold) !important; background:rgba(26,20,7,.12); box-shadow:inset 0 0 0 1px rgba(26,20,7,.18); }
/* la riga della lingua: non è un tasto, niente oro; l'icona come le altre */
html #account-menu .acct-row[style*="cursor:default"] { color:var(--am-ink-2) !important; }
html #account-menu .acct-row[style*="cursor:default"] > span > svg {
    box-sizing:content-box; width:14px; height:14px; padding:7px; border-radius:9px; margin-right:3px;
    background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--am-line); color:var(--am-gold-hi);
}
/* «Cronologia Render» resta d'oro a riposo, come prima */
html #account-menu .acct-row[style*="color:var(--gold"] { color:var(--am-gold-hi) !important; }
html #account-menu .acct-row[style*="color:var(--gold"]:is(:hover, :focus-visible) { color:var(--am-on-gold) !important; }
/* «Esci»: lo stesso movimento, in rosso */
html #account-menu .acct-row.danger, html #account-menu .acct-row.danger > svg { color:#f07070 !important; }
html #account-menu .acct-row.danger::before { background:var(--am-sweep-rosso); }
html #account-menu .acct-row.danger:is(:hover, :focus-visible), html #account-menu .acct-row.danger:is(:hover, :focus-visible) > svg { color:#fff !important; background:transparent !important; }
html #account-menu .acct-row.danger:is(:hover, :focus-visible) > svg { background:rgba(255,255,255,.14) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22) !important; }
html #account-menu .acct-divider { background:var(--am-line) !important; margin:5px 14px !important; }
html #account-menu .acct-lang-btn { border-radius:999px !important; padding:4px 10px !important; font-size:11px !important; font-weight:600 !important;
    color:var(--am-ink-2) !important; border-color:var(--am-line) !important; transition:background .15s, border-color .15s, color .15s !important; }
html #account-menu .acct-lang-btn:hover { color:var(--am-gold-hi) !important; border-color:rgba(201,168,76,.4) !important; background:rgba(201,168,76,.08) !important; }
html #account-menu .acct-lang-btn.active { color:var(--am-on-gold) !important; background:var(--am-sweep) !important; border-color:transparent !important; font-weight:800 !important; }

/* «Guide e note legali» (legal-footer.js): la freccina gira quando la categoria è aperta, le sottovoci sono più piccole */
html #account-menu .rai-legal-toggle { width:calc(100% - 12px) !important; }
html #account-menu .rai-legal-toggle > .rai-legal-chev { margin-left:auto; padding:0 !important; background:none !important; box-shadow:none !important;
    color:var(--am-ink-3); transition:transform .3s var(--am-ease), color .35s; }
html #account-menu .rai-legal-toggle[aria-expanded="true"] > .rai-legal-chev { transform:rotate(180deg); }
html #account-menu .rai-legal-toggle:is(:hover, :focus-visible) > .rai-legal-chev { background:none !important; box-shadow:none !important; }
html #account-menu .rai-legal-list:not([hidden]) { display:block; padding:2px 0 4px; animation:amGiu .25s var(--am-ease); }
html #account-menu .rai-legal-sub { display:flex !important; padding:6px 10px 6px 49px !important; font-size:12.5px !important; font-weight:500 !important; color:var(--am-ink-2) !important; }
html #account-menu .rai-copy { display:block; padding:6px 10px 2px 49px; font-size:11px; color:var(--am-ink-3); }

/* all'apertura le voci salgono una dopo l'altra, come le card della home */
@keyframes amSale { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes amGiu { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
html #account-menu.open .acct-header { animation:amSale .35s var(--am-ease) both; }
html #account-menu.open :is(.acct-row, .acct-divider, #rai-acct-legal) { animation:amSale .35s var(--am-ease) both; }
html #account-menu.open :is(.acct-row, .acct-divider, #rai-acct-legal):nth-child(1) { animation-delay:.03s; }
html #account-menu.open :is(.acct-row, .acct-divider, #rai-acct-legal):nth-child(2) { animation-delay:.06s; }
html #account-menu.open :is(.acct-row, .acct-divider, #rai-acct-legal):nth-child(3) { animation-delay:.09s; }
html #account-menu.open :is(.acct-row, .acct-divider, #rai-acct-legal):nth-child(4) { animation-delay:.12s; }
html #account-menu.open :is(.acct-row, .acct-divider, #rai-acct-legal):nth-child(5) { animation-delay:.15s; }
html #account-menu.open :is(.acct-row, .acct-divider, #rai-acct-legal):nth-child(6) { animation-delay:.18s; }
html #account-menu.open :is(.acct-row, .acct-divider, #rai-acct-legal):nth-child(7) { animation-delay:.21s; }
html #account-menu.open :is(.acct-row, .acct-divider, #rai-acct-legal):nth-child(8) { animation-delay:.24s; }
html #account-menu.open :is(.acct-row, .acct-divider, #rai-acct-legal):nth-child(n+9) { animation-delay:.27s; }
html #account-menu.open #rai-acct-legal .acct-row { animation:none; }

/* ═════════ LA BARRA LATERALE (da computer) ═════════
   Come lo shadcn Sidebar: voci a riposo trasparenti, al passaggio uno spotlight che entra da sinistra (Aceternity), la voce
   in cui sei con fondo, ring interno, icona d'oro e l'asticella d'oro a sinistra. */
html #vnav {
    background:var(--rb-rail) !important; border-right:1px solid rgba(255,255,255,.06) !important;
    box-shadow:4px 0 20px rgba(0,0,0,.5) !important;
}
html #vnav-toggle {
    background:var(--rb-fill) !important; border:1px solid var(--rb-line-2) !important; color:var(--rb-fg-2) !important; border-radius:10px !important;
    transition:background .2s, border-color .2s, color .2s, transform .15s !important;
}
html #vnav-toggle:hover { background:var(--rb-gold-a) !important; border-color:var(--rb-gold-b) !important; color:var(--rb-gold) !important; }
html #vnav-toggle:active { transform:scale(.94); }
html #vnav .vn-section-label {
    font-family:'Inter',sans-serif !important; font-size:11.5px !important; font-weight:500 !important;
    text-transform:none !important; letter-spacing:0 !important; color:var(--rb-fg-4) !important;
}
html #vnav .vn-sep { background:var(--rb-line) !important; }

html #vnav .vn-btn {
    color:var(--rb-fg-3) !important; background:transparent !important; border:1px solid transparent !important;
    border-radius:10px !important; box-shadow:none !important; isolation:isolate;
    transition:background .2s, border-color .2s, color .2s, box-shadow .2s !important;
}
html #vnav .vn-btn .vn-btn-label { color:var(--rb-fg-2) !important; font-family:'Inter',sans-serif !important; font-weight:500 !important; transition:color .2s, opacity .2s, width .2s; }
/* lo spotlight: una luce chiara che entra da sinistra al passaggio */
html #vnav .vn-btn::after {
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; opacity:0;
    background:radial-gradient(140% 120% at 0% 50%, rgba(255,255,255,.09), transparent 60%);
    transform:translateX(-12px); transition:opacity .3s, transform .4s var(--rb-ease);
}
/* l'asticella d'oro della voce in cui sei */
html #vnav .vn-btn::before {
    content:""; position:absolute; left:-1px; top:50%; width:3px; height:0; border-radius:0 3px 3px 0; pointer-events:none;
    background:linear-gradient(180deg,#f0d070,#c9a84c); transform:translateY(-50%);
    box-shadow:0 0 10px rgba(232,201,109,.6);
}
@media (hover:hover) {
    html #vnav .vn-btn:not(.vn-btn-disabled):hover { background:var(--rb-fill) !important; color:var(--rb-fg) !important; }
    html #vnav .vn-btn:not(.vn-btn-disabled):hover::after { opacity:1; transform:none; }
    html #vnav .vn-btn:not(.vn-btn-disabled):hover .vn-btn-label { color:var(--rb-fg) !important; }
}
html #vnav .vn-btn:focus-visible { outline:none !important; box-shadow:var(--rb-ring) !important; }
html #vnav .vn-btn.active {
    background:var(--rb-fill-2) !important; border-color:var(--rb-line-2) !important; color:var(--rb-gold) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 12px rgba(0,0,0,.25) !important;
}
html #vnav .vn-btn.active::before { height:20px; }
html #vnav .vn-btn.active .vn-btn-label { color:var(--rb-fg) !important; font-weight:600 !important; }

/* LE MISURE VERTICALI, UGUALI IN TUTTE LE PAGINE (da computer). Unica eccezione al «solo grafica» di questo file, chiesta
   dall'utente il 10/10 sera: «ogni volta che passo da una pagina all'altra dalla barra laterale c'è un micro-spostamento».
   Misurato al pixel: in impostazioni.html le etichette di sezione erano alte 28,3 px (manca il line-height:1 delle altre),
   in pianta3d 20 px — e le voci sotto scendevano o salivano di 2,5-12 px. Qui si fissano i valori di wizard.html, che sono
   quelli di quasi tutte le pagine: nessuna voce cambia ordine né collegamento. */
@media (min-width:769px) {
    html #vnav { padding:6px 0 12px !important; gap:1px !important; }
    html #vnav-toggle { width:36px !important; height:36px !important; margin-top:2px !important; margin-bottom:8px !important; box-sizing:border-box !important; }
    html #vnav .vn-section-label { line-height:1 !important; padding:8px 18px 3px !important; margin:0 !important; }
    html #vnav .vn-sep { height:1px !important; margin:4px auto !important; }
    html #vnav .vn-btn { height:44px !important; margin:1px 4px !important; box-sizing:border-box !important; }
    html #vnav .vn-btn-label { line-height:1 !important; }
    /* barra che si apre già aperta (html.vnav-preload-expanded, messo nel <head> dalla memoria): etichette subito a
       vista, senza la dissolvenza che faceva comparire «Strumenti» e «Community» un attimo dopo il resto */
    html.vnav-preload-expanded #vnav :is(.vn-section-label, .vn-btn-label) { opacity:1 !important; width:auto !important; transition:none !important; }
}

/* impostazioni.html ha la voce dei crediti d'oro e luminosa (stile in linea solo lì): stesso tono delle altre voci */
html #vnav a[href="crediti.html"]:not(.active) { color:var(--rb-fg-3) !important; }
html #vnav a[href="crediti.html"] img[src="icone/crediti.png"] { filter:grayscale(1) brightness(1.5) !important; }

/* il fumetto della barra chiusa: come il Tooltip di Radix, compatto, con l'entrata da sinistra di sempre */
html #vnav .vn-tooltip {
    background:var(--rb-pop) !important; border:1px solid var(--rb-line-2) !important; border-radius:10px !important;
    box-shadow:0 12px 32px rgba(0,0,0,.7) !important;
}
html #vnav .vn-tooltip-title { color:var(--rb-fg) !important; }
html #vnav .vn-tooltip-desc { color:var(--rb-fg-3) !important; }

/* ═════════ LA BARRA IN BASSO (da telefono la laterale diventa questa) ═════════
   Il nero di prima; la voce in cui sei nel suo riquadro col ring sottile, l'icona d'oro e un trattino d'oro sotto. */
@media (max-width:768px) {
    /* la barra: il nero di prima in vetro, col fascio d'oro sul bordo alto come la barra in alto */
    html #vnav {
        background:rgba(6,6,10,.94) !important;
        -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
        border-right:none !important; border-top:1px solid var(--rb-line) !important;
        box-shadow:0 -6px 24px rgba(0,0,0,.5) !important;
    }
    html #vnav::after {
        content:""; position:absolute; left:15%; right:15%; top:-1px; height:1px; pointer-events:none;
        background:linear-gradient(90deg, transparent, rgba(232,201,109,.45), transparent);
    }
    html #vnav .vn-btn, html #vnav .vn-btn:hover, html #vnav .vn-btn.active { background:transparent !important; border-color:transparent !important; box-shadow:none !important; }
    html #vnav .vn-btn::after { display:none; }
    /* a riposo: solo l'icona, grigia lavanda (niente riquadro: prima sembravano sei tasti uguali) */
    html #vnav .vn-btn-icon {
        background:transparent !important; border:1px solid transparent !important; box-shadow:none !important; border-radius:14px !important;
        color:var(--rb-fg-3) !important; transition:background .25s, border-color .25s, color .25s, transform .15s var(--rb-ease) !important;
    }
    html #vnav .vn-btn-icon svg { color:inherit; }
    html #vnav .vn-btn:active .vn-btn-icon { transform:scale(.88) !important; background:var(--rb-fill-2) !important; }
    /* la voce in cui sei: riquadro col ring sottile, un bagliore d'oro che sale da sotto, icona d'oro, trattino d'oro */
    html #vnav .vn-btn.active .vn-btn-icon {
        background:radial-gradient(120% 90% at 50% 120%, rgba(232,201,109,.28), transparent 65%), var(--rb-fill-2) !important;
        border:1px solid rgba(201,168,76,.40) !important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 4px 14px rgba(201,168,76,.18) !important; color:var(--rb-gold-hi) !important;
    }
    html #vnav .vn-btn.active .vn-btn-icon svg { color:var(--rb-gold-hi) !important; }
    html #vnav .vn-btn::before { left:50%; top:auto; bottom:3px; width:0; height:3px !important; border-radius:3px; transform:translateX(-50%); transition:width .35s var(--rb-ease); }
    html #vnav .vn-btn.active::before { width:16px; height:3px !important; }
    /* la barra in alto da telefono: il profilo in un cerchio, i tasti con la risposta al tocco */
    html #account-menu-wrap > button { border-radius:999px !important; }
    html #topnav :is(#lang-dropdown > button, #account-menu-wrap > button, #btn-credits-topbar):active { transform:scale(.95); }
}
@media (prefers-reduced-motion:reduce) {
    html #vnav .vn-btn::before, html #vnav .vn-btn::after { transition:none !important; }
    html #account-menu.open, html .lang-menu.open, html #btn-credits-topbar:hover::after { animation:none !important; }
    html #account-menu.open :is(.acct-header, .acct-row, .acct-divider, #rai-acct-legal), html #account-menu .rai-legal-list { animation:none !important; }
    html #account-menu .acct-row::before { transition:none !important; }
}

/* ═════════ IL PRIMO DISEGNO (10/10 sera, «quando clicchi da uno strumento all'altro c'è una specie di lampeggio») ═════════
   Il browser disegna la pagina mentre la legge: senza queste regole i primi fotogrammi avevano «Accedi», «EN», «Prezzi»
   e la barra laterale chiusa, poi la pagina scriveva lo stato vero. /barre-subito.js (nel <head>) mette su <html> i segni
   rb-utente / rb-pro / rb-saldo / rb-lingua / rb-iniziale-css con le variabili, e li toglie appena la pagina ha scritto
   lei. Misure prese dalle pagine: lingua e saldo 10 px, iniziale 10 px (11 da telefono e in impostazioni). */
html.rb-utente #auth-guest { display:none !important; }
html.rb-utente #auth-user { display:flex !important; }
html.rb-pro #auth-plan-badge.hidden { display:inline-block !important; }
/* nelle pagine dove il cartellino nasce vuoto e nascosto in linea (cronologia, archsketch, crediti, impostazioni, pianta3d) */
html.rb-pro #auth-plan-badge[style*="display:none"]:empty { display:inline-block !important; }
html.rb-pro #auth-plan-badge:empty::before { content:var(--rb-piano); }
html.rb-utente.rb-iniziale-css #auth-avatar { font-size:0 !important; }
html.rb-utente.rb-iniziale-css #auth-avatar::before { content:var(--rb-iniziale); font-size:10px; font-weight:800; line-height:1; }
@media (max-width:768px) { html.rb-utente.rb-iniziale-css #auth-avatar::before { font-size:11px; } }
html.rb-saldo #btn-credits-topbar-val { display:none !important; }
html.rb-saldo #btn-credits-topbar::before { content:var(--rb-saldo); order:2; font-size:10px; font-weight:700; letter-spacing:.4px; }
html.rb-lingua #lang-label { font-size:0 !important; letter-spacing:0 !important; }
html.rb-lingua #lang-label::before { content:var(--rb-lingua); font-size:10px; letter-spacing:.5px; }
html.rb-lingua #lang-flag { font-size:0 !important; letter-spacing:0 !important; }
html.rb-lingua #lang-flag::before { content:var(--rb-bandiera); font-size:10px; letter-spacing:.5px; }
/* crediti.html ha un suo cartellino del saldo (#cred-credits-chip, nascosto finché la pagina non ha il numero) */
html.rb-saldo #cred-credits-chip { display:inline-flex !important; }
html.rb-saldo #cred-credits-topnav { display:none !important; }
html.rb-saldo #cred-credits-chip::after { content:var(--rb-saldo); }
/* la barra laterale che si apre già aperta: le stesse regole di #vnav.expanded delle pagine, valide dal primo pixel */
@media (min-width:769px) {
    html.vnav-preload-expanded #vnav .vn-btn { display:flex !important; align-items:center; gap:0; padding:0 14px !important; }
    html.vnav-preload-expanded #vnav .vn-btn-icon { position:relative !important; top:auto !important; left:auto !important; transform:none !important; flex-shrink:0; }
    html.vnav-preload-expanded #vnav-toggle { align-self:flex-end !important; margin-right:10px !important; margin-left:auto !important; }
    html.vnav-preload-expanded #vnav-toggle svg { transform:rotate(180deg) !important; transition:none !important; }
}
/* il logo della barra è un'immagine incorporata grande: nelle pagine pesanti (guidata) si decodifica qualche fotogramma dopo e
   lasciava un buco. Sotto c'è lo stesso logo in piccolo (apple-touch-icon.png, già in cache), così il buco non si vede. */
html #topnav a[href="home.html"] > img { background:url(/apple-touch-icon.png) center/cover no-repeat; }

/* LE MISURE DELLA BARRA IN ALTO, UGUALI IN TUTTE LE PAGINE (da computer; 10/10 sera, «il lampeggio resta su Cronologia e
   Sketch»). Misurato: il cartellino del piano aveva 2 px di margine in più per lato in cronologia/archsketch/crediti/
   impostazioni/pianta3d (profilo, saldo e lingua slittavano di 4 px fra una pagina e l'altra), i pulsanti erano alti 28 o
   29 px a seconda della pagina, e in impostazioni profilo e avatar erano 38 e 26 px. Valori di home.html. */
@media (min-width:769px) {
    html #lang-dropdown > button { height:29px !important; padding:6px 10px !important; gap:6px !important; line-height:15px !important; box-sizing:border-box !important; }
    html #btn-credits-topbar { height:29px !important; padding:5px 11px !important; line-height:15px !important; box-sizing:border-box !important; }
    html #account-menu-wrap > button { height:32px !important; padding:5px 10px !important; line-height:21px !important; gap:6px !important; box-sizing:border-box !important; }
    html #auth-avatar { width:20px !important; height:20px !important; font-size:10px !important; flex:none; }
    html #auth-plan-badge { padding:2px 6px !important; font-size:9px !important; line-height:13.5px !important; }
}

/* LA FOTO DEL PROFILO (10/10 sera, «l'immagine profilo sembra ricaricarsi ogni volta»): ogni pagina svuota l'avatar e ci
   rimette la foto (anche dopo /api/user/me), e finché il browser non la ridisegna resta il buco. Sotto c'è la stessa foto
   come sfondo, dalla memoria (renderai_user.avatar_url, messa da barre-subito.js in --rb-foto): il buco non si vede mai. */
html.rb-foto #auth-avatar, html.rb-foto #acct-avatar-lg { background-image:var(--rb-foto) !important; background-size:cover !important; background-position:center !important; }
html.rb-foto.rb-iniziale-css #auth-avatar::before { content:none !important; }
html.rb-foto #auth-avatar, html.rb-foto #acct-avatar-lg { color:transparent !important; }   /* con la foto, l'iniziale che qualche pagina scrive non le va sopra */