/* ======================================================================
   DESIGN — strato comune ai temi chiaro e scuro (e alla modalità Matrix)
   Caricato DOPO warm-dark/warm-light: usa solo le loro variabili, quindi
   vale uguale per entrambi. Non si applica in modalità retro (html.retro-mode),
   che ha il suo stile anni '90.

   Principi: spazi ampi, titoli grandi, bordi sottili al posto delle ombre,
   paragrafi con una larghezza che resta leggibile, barra fissa e pulsanti
   con un piccolo "zoom" elastico.
   ====================================================================== */

/* ---------- 1. TOKEN ---------- */
html:not(.retro-mode){
  --wrap:        1180px;                    /* larghezza massima della pagina */
  --prose:       70ch;                      /* larghezza massima dei paragrafi */
  --gutter:      clamp(18px, 4vw, 40px);    /* margine laterale */
  --stack:       clamp(56px, 8vw, 104px);   /* spazio tra le sezioni */
  --radius-pill: 999px;
  --nav-alt:     68px;

  /* niente ombre marcate: tutto si regge sui bordi sottili */
  --glow-sm: none;
  --glow-md: none;
  --glow-lg: none;

  /* curve di animazione */
  --ease-molla: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-fluido: cubic-bezier(.22, 1.25, .36, 1);   /* molla morbida: un filo di rimbalzo, niente scatti */
}
html[data-tema="light"]:not(.retro-mode){
  --dim: #645e54;                           /* un filo più scuro: più leggibile */
}

/* ---------- 2. BASE E TIPOGRAFIA ---------- */
html:not(.retro-mode) body{
  font-size: 17px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}
html:not(.retro-mode) :is(h1, h2, h3){ text-wrap: balance; }
html:not(.retro-mode) h1{
  font-size: clamp(2.25rem, 5.2vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin-bottom: .45em;
}
html:not(.retro-mode) h2{
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin: 1.9em 0 .6em;
}
html:not(.retro-mode) h3{
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  line-height: 1.3;
  margin: 1.6em 0 .5em;
}
html:not(.retro-mode) :is(h1, h2, h3):first-child{ margin-top: 0; }
html:not(.retro-mode) p{ margin: 0 0 1.15em; }
html:not(.retro-mode) :is(p, li){ text-wrap: pretty; }

/* contenuti principali: stessa larghezza e stessi margini ovunque */
html:not(.retro-mode) body > :where(main, .container, .container-sm, .container-fluid, .tools-container, #profilo, .oss-container){
  width: 100%;
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(48px, 7vw, 96px);
}
html:not(.retro-mode) body > .container-sm{ max-width: 880px; }

/* sezioni: respiro tra un blocco e l'altro */
html:not(.retro-mode) main > section + section{ margin-top: var(--stack); }

/* ---------- 3. SUPERFICI: bordi sottili, niente ombre ---------- */
html:not(.retro-mode) :is(.card, .post, .tool-block, .oss-card, .mp-card, .widgets, details, .callout, .terminal, article:not(.articolo)){
  box-shadow: none !important;
  border-width: 1px;
}
html:not(.retro-mode) :is(.card, .post, .tool-block, .oss-card, .mp-card){
  border-radius: var(--radius-lg);
  transition: border-color .25s ease, transform .35s var(--ease-out), background-color .25s ease;
}
html:not(.retro-mode) :is(.post, .tool-block, .oss-card, .mp-card):hover{
  box-shadow: none !important;
  transform: translateY(-3px);
}

/* ---------- 4. BARRA DI NAVIGAZIONE ---------- */
.salta-contenuto{
  position: fixed; left: 12px; top: -60px; z-index: 2000;
  padding: 10px 16px; border-radius: var(--radius-md, 10px);
  background: var(--orange); color: var(--on-accent) !important;
  font-weight: 600; text-decoration: none; transition: top .2s ease;
}
.salta-contenuto:focus{ top: 12px; }
#contenuto{ position: relative; top: calc(-1 * var(--navbar-h, 68px)); outline: none; }

html:not(.retro-mode) .navbar.sito-nav{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1030;
  padding: 0 !important;
  min-height: var(--nav-alt);
  background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .3s ease;
}
html:not(.retro-mode) .navbar.sito-nav.scorrendo{
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--bg) 90%, transparent) !important;
}
.sito-nav .nav-shell{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: var(--wrap, 1180px);
  min-height: var(--nav-alt, 68px);
  margin: 0 auto;
  padding: 0 var(--gutter, 20px);
  position: relative;
}

/* logo + nome */
.sito-nav .nav-brand{
  display: inline-flex; align-items: center; gap: 10px;
  margin-right: auto;
  color: var(--fg) !important;
  text-decoration: none !important;
  border: 0 !important;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.sito-nav .nav-brand img{
  width: 34px; height: 34px; border-radius: 10px;
  transition: transform .5s var(--ease-molla, ease);
}
.sito-nav .nav-brand:hover img{ transform: rotate(-8deg) scale(1.08); }
.sito-nav .nav-brand-testo span{ color: var(--orange); margin-left: .28em; }

/* voci del menu: "pillole" */
html:not(.retro-mode) .sito-nav .navbar-nav{ gap: 2px; }
html:not(.retro-mode) .sito-nav .navbar-nav .nav-link{
  position: relative;
  display: inline-flex; align-items: center;
  padding: 8px 14px !important;
  border-radius: var(--radius-pill);
  color: var(--fg-muted) !important;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease, transform .35s var(--ease-molla);
}
html:not(.retro-mode) .sito-nav .navbar-nav .nav-link::after{ display: none; }
html:not(.retro-mode) .sito-nav .nav-link .tilde{
  color: var(--orange);
  font-family: var(--font-mono);
  opacity: 0;
  display: inline-block;
  width: .7em;
  transition: opacity .2s ease;
}
html:not(.retro-mode) .sito-nav .navbar-nav .nav-link:hover,
html:not(.retro-mode) .sito-nav .navbar-nav .nav-link:focus-visible{
  color: var(--fg) !important;
  background: var(--bg-3);
}
html:not(.retro-mode) .sito-nav .navbar-nav .nav-link:hover .tilde,
html:not(.retro-mode) .sito-nav .navbar-nav .nav-link.active .tilde{ opacity: 1; }
/* i testi della barra non si accorciano mai: lo spazio della ~ è sempre riservato,
   così passarci sopra non sposta né taglia gli altri pulsanti */
html:not(.retro-mode) .sito-nav :is(.nav-link, .nav-azioni, .nav-azioni > *){ white-space: nowrap; flex-shrink: 0; }
html:not(.retro-mode) .sito-nav .navbar-nav .nav-link.active{
  color: var(--orange) !important;
  background: var(--orange-soft);
}

/* azioni a destra */
.sito-nav .nav-azioni{ display: flex; align-items: center; gap: 8px; }
html:not(.retro-mode) .sito-nav .nav-account{
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  color: var(--fg) !important;
  font-size: .92rem; font-weight: 600;
  text-decoration: none !important;
  background: transparent;
  flex-shrink: 0;
}
.sito-nav .nav-account-testo{ white-space: nowrap; }
html:not(.retro-mode) .sito-nav .nav-account:hover,
html:not(.retro-mode) .sito-nav .nav-account.active{ border-color: var(--orange); color: var(--orange) !important; }

html:not(.retro-mode) .sito-nav .nav-icona{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0 !important;
  border-radius: 50%;
  border: 1px solid var(--line) !important;
  background: transparent;
  color: var(--orange);
  box-shadow: none !important;
}
html:not(.retro-mode) .sito-nav .nav-icona:hover{ border-color: var(--orange) !important; }

/* hamburger: due linee che diventano una X */
.sito-nav .hamburger{ position: relative; width: 18px; height: 12px; display: block; }
.sito-nav .hamburger i{
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .35s var(--ease-out, ease), top .35s var(--ease-out, ease);
}
.sito-nav .hamburger i:first-child{ top: 1px; }
.sito-nav .hamburger i:last-child{ top: 9px; }
.sito-nav .navbar-toggler[aria-expanded="true"] .hamburger i:first-child{ top: 5px; transform: rotate(45deg); }
.sito-nav .navbar-toggler[aria-expanded="true"] .hamburger i:last-child{ top: 5px; transform: rotate(-45deg); }

/* desktop: menu centrato */
@media (min-width: 992px){
  html:not(.retro-mode) .sito-nav .navbar-toggler{ display: none; }
  .sito-nav .navbar-collapse{ flex: 0 1 auto; justify-content: center; margin: 0 auto; }
  .sito-nav .nav-brand{ margin-right: 0; flex: 1 1 0; }
  .sito-nav .nav-azioni{ flex: 1 1 0; justify-content: flex-end; }
}
@media (min-width: 992px) and (max-width: 1140px){
  html:not(.retro-mode) .sito-nav .navbar-nav .nav-link{ padding: 8px 10px !important; font-size: .9rem; }
  .sito-nav .nav-brand-testo{ display: none; }
}

/* mobile: menu compatto a tendina sotto la barra */
@media (max-width: 991.98px){
  html:not(.retro-mode) .sito-nav .navbar-collapse{
    position: absolute;
    top: calc(100% + 8px);
    right: var(--gutter, 16px);
    width: min(260px, calc(100vw - 2 * var(--gutter, 16px)));
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 0 8px;
  }
  html:not(.retro-mode) .sito-nav .navbar-collapse.show,
  html:not(.retro-mode) .sito-nav .navbar-collapse.collapsing{ padding: 8px; }
  html:not(.retro-mode) .sito-nav .navbar-nav .nav-link{
    display: flex;
    padding: 11px 14px !important;
    border-radius: 12px;
    font-size: 1rem;
  }
  html:not(.retro-mode) .sito-nav .nav-link .tilde{ opacity: 1; width: .8em; }
}
@media (max-width: 520px){
  .sito-nav .nav-account-testo{ display: none; }
  html:not(.retro-mode) .sito-nav .nav-account{ width: 40px; padding: 0; justify-content: center; }
  .sito-nav .nav-brand-testo{ font-size: .95rem; }
}
@media (max-width: 360px){
  .sito-nav .nav-brand-testo{ display: none; }
}
@keyframes tendina{
  from{ opacity: 0; transform: translateY(-6px) scale(.98); }
  to  { opacity: 1; transform: none; }
}

/* in modalità retro la barra torna quella grigia di Windows */
html.retro-mode .sito-nav .nav-shell{ display: flex; align-items: center; gap: 6px; padding: 0 8px; flex-wrap: wrap; width: 100%; }
html.retro-mode .sito-nav .nav-brand{ display: inline-flex; align-items: center; gap: 6px; color: #000 !important; font-weight: 700; text-decoration: none; margin-right: auto; }
html.retro-mode .sito-nav .nav-brand img{ width: 20px; height: 20px; image-rendering: pixelated; }
html.retro-mode .sito-nav .nav-brand-testo span{ margin-left: .25em; }
html.retro-mode .sito-nav .nav-azioni{ display: flex; gap: 4px; align-items: center; order: 2; }
html.retro-mode .sito-nav .navbar-collapse{ order: 3; }
html.retro-mode .sito-nav .nav-account{ color: #000 !important; padding: 3px 10px; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; box-shadow: var(--r-su); background: #c0c0c0; }
html.retro-mode .sito-nav .nav-link .tilde{ display: none; }
html.retro-mode .sito-nav .nav-icona{ background: #c0c0c0; color: #000; box-shadow: var(--r-su); border: 0; width: 32px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 992px){
  html.retro-mode .sito-nav .navbar-toggler{ display: none; }
  html.retro-mode .sito-nav .navbar-collapse{ order: 1; flex: 0 1 auto; }
  html.retro-mode .sito-nav .nav-azioni{ order: 2; }
}

/* ---------- 5. PULSANTI: zoom elastico ---------- */
html:not(.retro-mode) :is(.btn, .btn-outline, .btn-sostieni, .reply-btn, .mp-read, .mp-refresh, .mp-filter-btn,
  .tool-link, .qr-btn, .qr-tab, .pf-chip, .home-more, .mioip-copy, .nav-account, .nav-icona, .social-icon,
  .retro-toggle, .matrix-toggle, .commenti-form button, .account-pagina button, button[type="submit"]){
  transition: transform .55s var(--ease-fluido), background-color .3s ease, border-color .3s ease, color .3s ease !important;
}
/* pulsanti larghi quanto il riquadro: lo zoom pieno li farebbe uscire dai bordi */
:is(#fsx .btn, .ap .btn, .btn.w-100, .btn-block){ --zoom: 1.012; }
html:not(.retro-mode) :is(.btn, .btn-outline, .btn-sostieni, .reply-btn, .mp-read, .mp-refresh, .mp-filter-btn,
  .tool-link, .qr-btn, .qr-tab, .pf-chip, .home-more, .mioip-copy, .nav-account, .nav-icona, .social-icon,
  .retro-toggle, .matrix-toggle, .commenti-form button, .account-pagina button, button[type="submit"]):hover{
  transform: translateY(-2px) scale(var(--zoom, 1.045));
  /* niente ombra: su Firefox ombra + zoom lasciavano dei riquadri attorno al pulsante */
  box-shadow: none !important;
}
html:not(.retro-mode) :is(.btn, .btn-outline, .btn-sostieni, .reply-btn, .mp-read, .mp-refresh, .mp-filter-btn,
  .tool-link, .qr-btn, .qr-tab, .pf-chip, .home-more, .mioip-copy, .nav-account, .nav-icona, .social-icon,
  .retro-toggle, .matrix-toggle, .commenti-form button, .account-pagina button, button[type="submit"]):active{
  transform: translateY(0) scale(.96);
  box-shadow: none !important;
  transition-duration: .14s !important;
}

/* niente strati sovrapposti dentro i pulsanti (cerchi, lampi di luce):
   con lo zoom Firefox li disegnava con gli angoli squadrati.
   Al passaggio cambia solo il colore di sfondo, che segue sempre i bordi arrotondati. */
html:not(.retro-mode) :is(.btn, .btn-outline, .btn-sostieni, .reply-btn, .mp-read, .mp-refresh, .tool-link,
  .qr-btn, .home-more, .nav-account, .social-icon, .nav-icona)::before,
html:not(.retro-mode) :is(.btn, .btn-outline, .btn-sostieni, .reply-btn, .mp-read, .mp-refresh, .tool-link,
  .qr-btn, .home-more, .nav-account, .social-icon, .nav-icona)::after{
  content: none !important;
  display: none !important;
}
html:not(.retro-mode) :is(.btn, .btn-outline, .btn-sostieni, .reply-btn, .mp-read, .mp-refresh, .tool-link,
  .qr-btn, .home-more, .nav-account){ overflow: visible !important; }
html:not(.retro-mode) :is(.btn-outline, .mp-read, .mp-refresh, .home-more, .nav-account):hover{
  background-color: var(--tinta-hover) !important;
}
/* card degli strumenti: il link è solo un contenitore, l'effetto lo fa la card */
html:not(.retro-mode) .tools-page .tool-link:hover{ transform: scale(1.025); }

html:not(.retro-mode) :is(.btn, .btn-sostieni, .reply-btn)::after{ display: none; }

/* frecce e icone dentro i pulsanti: piccolo scatto in avanti */
html:not(.retro-mode) :is(.mp-read, .tool-link, .home-more, .btn) :is(svg, .bi-arrow-right, .freccia){
  transition: transform .45s var(--ease-molla);
}
html:not(.retro-mode) :is(.mp-read, .tool-link, .home-more, .btn):hover :is(svg, .bi-arrow-right, .freccia){
  transform: translateX(3px);
}

/* ---------- 6. ARTICOLI: larghezza di lettura ---------- */
/* articoli "vecchi" scritti dentro un .container semplice */
html:not(.retro-mode) body.pagina-articolo > .container{
  max-width: calc(var(--prose) + 2 * var(--gutter));
  font-size: 1.08rem;
  line-height: 1.8;
}
html:not(.retro-mode) body.pagina-articolo > .container > :is(h1){ margin-bottom: .6em; }
html:not(.retro-mode) body.pagina-articolo > .container img{ height: auto; border-radius: var(--radius-md); }
html:not(.retro-mode) body.pagina-articolo > a{ display: none; } /* link sciolti fuori dal contenitore */

/* articoli nuovi (<article class="articolo">) */
html:not(.retro-mode) .articolo{
  --art-w: 780px;
  font-size: 1.08rem;
  line-height: 1.8;
  box-shadow: none;
  margin-top: clamp(32px, 5vw, 64px);
}
html:not(.retro-mode) .articolo h2{ font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin-top: 2.2em; }
html:not(.retro-mode) .autore-box{
  max-width: calc(var(--prose) + 2 * var(--gutter));
  margin: 0 auto var(--stack);
  padding: 0 var(--gutter);
  color: var(--dim);
  font-size: .95rem;
}

/* ---------- 7. FOOTER ---------- */
html:not(.retro-mode) .footer-moderno{
  border-top: 1px solid var(--line);
  padding: clamp(40px, 6vw, 64px) 0 clamp(32px, 5vw, 48px) !important;
  background: transparent;
}
html:not(.retro-mode) .footer-moderno > .container-fluid{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.footer-moderno .toggle-stili{ display: inline-flex; gap: 8px; vertical-align: middle; margin-left: 8px; }
.footer-moderno .toggle-stili > button{ margin-left: 0 !important; }

/* ---------- 8. CAMPI DEI FORM ---------- */
html:not(.retro-mode) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select){
  border-radius: 12px;
  box-shadow: none;
}
html:not(.retro-mode) :is(input, textarea, select):focus-visible{
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}

/* ---------- 9. RIDUCI MOVIMENTO ---------- */
@media (prefers-reduced-motion: reduce){
  html:not(.retro-mode) *,
  html:not(.retro-mode) *::before{
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  html:not(.retro-mode) :is(.btn, .btn-outline, .btn-sostieni, .reply-btn, .mp-read, .mp-refresh, .mp-filter-btn,
    .tool-link, .qr-btn, .qr-tab, .pf-chip, .home-more, .mioip-copy, .nav-account, .nav-icona, .social-icon,
    .post, .tool-block, .oss-card, .mp-card):hover{ transform: none; }
}
html.retro-mode .sito-nav .hamburger{ width: 16px !important; height: 12px !important; display: block !important; position: relative !important; }
html.retro-mode .sito-nav .hamburger i{ position: absolute !important; display: block !important; left: 0 !important; width: 16px !important; height: 2px !important; background: #000 !important; }

/* ---------- 10. ACCOUNT E COMMENTI: username ---------- */
.campo-username{ position: relative; display: block; }
.campo-username > span{
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--orange); font-family: var(--font-mono); font-weight: 600; line-height: 1;
  pointer-events: none; z-index: 1;
}
.campo-username > input{ padding-left: 34px !important; width: 100%; margin: 0 !important; }
.username-stato{ display: block; min-height: 1.4em; margin: 4px 0 10px; font-size: .85rem; color: var(--dim); }
.username-stato.ok{ color: var(--ok); }
.username-stato.no{ color: var(--danger); }
.commento-username{ color: var(--dim); font-family: var(--font-mono); font-size: .85em; }

/* ---------- 11. LINGUA: selettore IT/EN e avviso di traduzione mancante ---------- */
html:not(.retro-mode) .sito-nav .nav-lingua{
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; min-width: 40px; padding: 0 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  color: var(--fg-muted) !important;
  font: 600 .78rem/1 var(--font-mono);
  letter-spacing: .06em;
  text-decoration: none !important;
  transition: transform .45s var(--ease-molla), border-color .2s ease, color .2s ease;
}
html:not(.retro-mode) .sito-nav .nav-lingua:hover{ border-color: var(--orange); color: var(--orange) !important; }
html.retro-mode .sito-nav .nav-lingua{ color: #000 !important; padding: 3px 8px; text-decoration: none; box-shadow: var(--r-su); background: #c0c0c0; font-size: 13px; }

.avviso-traduzione{
  max-width: var(--wrap, 1180px);
  margin: 24px auto 0;
  padding: 14px 18px;
  width: calc(100% - 2 * var(--gutter, 18px));
  border: 1px solid var(--orange);
  border-radius: 14px;
  background: var(--orange-soft);
  color: var(--fg);
  font-size: .95rem;
  line-height: 1.5;
}
.avviso-traduzione a{ font-weight: 600; margin-left: .3em; }
html.retro-mode .avviso-traduzione{ background: #ffffe1; color: #000; border: 1px solid #000; border-radius: 0; }
.solo-it{
  display: inline-block; margin-left: 4px; padding: 1px 6px; vertical-align: middle;
  font: 600 10px/1.4 var(--font-mono); letter-spacing: .05em;
  border: 1px solid var(--line); border-radius: 6px; color: var(--dim);
}
.mp-nota-lingua{ font-size: .9rem; color: var(--dim); }

/* niente rettangolo grigio/azzurro quando si tocca un pulsante su telefono */
html{ -webkit-tap-highlight-color: transparent; }

/* ---------- PULSANTI A PILLOLA ----------
   Stessa forma dei pulsanti della barra in alto (EN, Accedi, tema)
   per tutti i pulsanti del sito. Le card restano con gli angoli normali. */
html:not(.retro-mode) :is(.btn, .btn-outline, .btn-sostieni, .reply-btn, .mp-read, .mp-refresh, .mp-filter-btn,
  .qr-btn, .qr-tab, .pf-chip, .home-more, .mioip-copy, .commenti-form button, .account-pagina button,
  button[type="submit"], .btn-group > .btn){
  border-radius: 999px !important;
}

/* niente cursore lampeggiante dopo "whoami" e nei titoli delle finestre */
.kicker::after, .term-title::after{ display: none !important; content: none !important; }
/* ricerca articoli: la lente non deve coprire il testo */
html:not(.retro-mode) .mp-search{ padding-left: 2.3rem !important; border-radius: 999px !important; margin: 0 !important; }
html:not(.retro-mode) .mp-search-icon{ left: .9rem; z-index: 1; }

/* barra in alto: zoom elastico avanti e indietro, colore e icone che si muovono.
   Su Firefox lo sfondo sfocato (backdrop-filter) della barra, insieme allo zoom,
   disegnava un riquadro squadrato attorno ai pulsanti: lì la barra usa uno sfondo
   pieno al posto della sfocatura, e lo zoom resta. */
@supports (-moz-appearance: none){
  html:not(.retro-mode) .navbar.sito-nav{
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: color-mix(in srgb, var(--bg) 96%, transparent) !important;
  }
}
html:not(.retro-mode) .sito-nav :is(.nav-account, .nav-icona, .nav-lingua):hover{
  background-color: var(--tinta-hover) !important;
  border-color: var(--orange) !important;
  transform: translateY(-1px) scale(1.06);
}
html:not(.retro-mode) .sito-nav :is(.nav-account, .nav-icona, .nav-lingua, .navbar-nav .nav-link):active{
  transform: scale(.92);
}
html:not(.retro-mode) .sito-nav .navbar-nav .nav-link{
  transition: transform .55s var(--ease-fluido), background-color .3s ease, color .3s ease !important;
}
html:not(.retro-mode) .sito-nav .navbar-nav .nav-link:hover{ transform: scale(1.04); }
/* icone: l'omino saluta, la luna/il sole ruota, l'hamburger si allarga */
html:not(.retro-mode) .sito-nav :is(.nav-account svg, #toggle-tema svg, #toggle-tema i){
  transition: transform .5s var(--ease-molla);
}
html:not(.retro-mode) .sito-nav .nav-account:hover svg{ transform: translateY(-2px) rotate(-8deg); }
html:not(.retro-mode) .sito-nav #toggle-tema:hover :is(svg, i){ transform: rotate(-25deg) scale(1.1); }
@media (prefers-reduced-motion: reduce){
  html:not(.retro-mode) .sito-nav :is(.nav-account, .nav-icona, .nav-lingua, .navbar-nav .nav-link, svg, i){ transform: none !important; }
}

/* ---------- 11. PAGINA ACCOUNT (collegato) ---------- */
html:not(.retro-mode) .acc-pannello{ display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); }
.acc-testa h1{ margin-bottom: .25em; }
.acc-testa p{ color: var(--dim); margin: 0; }
.acc-griglia{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.acc-box-largo{ grid-column: 1 / -1; }
@media (max-width: 760px){ .acc-griglia{ grid-template-columns: 1fr; } }
html:not(.retro-mode) .acc-box{ margin: 0 !important; padding: clamp(18px, 2.4vw, 28px) !important; display: flex; flex-direction: column; gap: 12px; }
html:not(.retro-mode) .acc-titolo{ font-size: 1.15rem !important; margin: 0 !important; letter-spacing: -.01em; }
html:not(.retro-mode) .acc-titolo::after{ display: none !important; }
.acc-nota{ font-size: .85rem; color: var(--dim) !important; margin: 0 !important; line-height: 1.55; }
.acc-form{ display: flex; flex-direction: column; gap: 6px; margin: 0; }
.acc-form label{ font-size: .85rem; color: var(--dim); margin: 6px 0 0; }
html:not(.retro-mode) .acc-form input:not([type=checkbox]){ margin: 0 !important; }
.acc-campi{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 760px){ .acc-campi{ grid-template-columns: 1fr; } }
.acc-campi .username-stato{ margin: 4px 0 0; }
.acc-azioni{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.acc-check{ display: flex; gap: 10px; align-items: flex-start; cursor: pointer; margin: 0; }
.acc-check input{ margin-top: .3em; accent-color: var(--orange); flex: 0 0 auto; }
.acc-zona-riga{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.acc-zona-riga > div{ display: flex; flex-direction: column; gap: 4px; }
html:not(.retro-mode) .acc-elimina{ border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important;
  background: none !important; padding: 12px 0 0 !important; margin: 4px 0 0 !important; }
.acc-elimina summary{ cursor: pointer; color: var(--danger, #e5484d); font-weight: 600; font-size: .92rem; }
.acc-elimina p{ font-size: .88rem; color: var(--dim); margin: 10px 0 0; }
html:not(.retro-mode) .acc-pericolo{ color: var(--danger, #e5484d) !important; border-color: var(--danger, #e5484d) !important; }
html:not(.retro-mode) .acc-pericolo:hover{ background: color-mix(in srgb, var(--danger, #e5484d) 14%, var(--bg)) !important; }

/* barra: un po' d'aria tra i link e i pulsanti a destra, anche quando un link si ingrandisce */
@media (min-width: 992px){ .sito-nav .nav-azioni{ margin-left: 14px; } }

/* pulsanti vicini: abbastanza spazio perché, ingrandendosi, non si tocchino mai */
html:not(.retro-mode) :is(.qr-tabs, .qr-actions, .pf-filter, .mp-filters, .tp-chips, .hero-actions, .acc-azioni, .pf-cta){ gap: 10px !important; }
html:not(.retro-mode) .qr-row{ gap: 16px !important; }
@media (min-width: 992px){
  html:not(.retro-mode) .sito-nav .navbar-nav{ gap: 6px; }
}
@media (min-width: 992px) and (max-width: 1240px){
  html:not(.retro-mode) .sito-nav .navbar-nav .nav-link{ padding-left: 10px !important; padding-right: 10px !important; }
}

/* ---------- Firefox e pulsanti arrotondati che si ingrandiscono ----------
   Firefox disegna un pulsante arrotondato a tasselli (angoli + lati + centro).
   Durante lo zoom i tasselli si sovrappongono di una frazione di pixel e, se lo
   sfondo è semitrasparente, lì il colore si somma: compaiono linee e quadrati.
   Soluzione: al passaggio del mouse lo sfondo è un colore pieno (non trasparente)
   e cambia di colpo invece di sfumare, così non c'è mai un momento "semitrasparente". */
html:not(.retro-mode){ --tinta-hover: color-mix(in srgb, var(--orange) 15%, var(--bg)); }
html:not(.retro-mode) :is(.btn-outline, .mp-read, .mp-refresh, .mp-filter-btn, .qr-tab, .qr-btn-ghost, .pf-chip,
  .home-more, .nav-account, .nav-icona, .nav-lingua, .social-icon):not(.on):not(.active):not(.attivo):not([aria-pressed="true"]):hover{
  background-color: var(--tinta-hover) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html:not(.retro-mode) :is(.btn-outline, .mp-read, .mp-refresh, .mp-filter-btn, .qr-tab, .qr-btn-ghost, .pf-chip,
  .home-more, .nav-account, .nav-icona, .nav-lingua, .social-icon, .acc-pericolo){
  transition: transform .55s var(--ease-fluido), color .25s ease, border-color .25s ease !important;
}
/* le card degli strumenti hanno lo sfondo sfumato e trasparente: su Firefox si alzano senza zoom */
@supports (-moz-appearance: none){
  html:not(.retro-mode) .tools-page .tool-link:hover{ transform: translateY(-2px); }
}
html:not(.retro-mode) .mp-card .mp-read{ justify-self: start; }

/* ---------- 12. CARD DI ARTICOLI E STRUMENTI: si sollevano e le scritte scorrono ----------
   Al passaggio la card sale, il bordo si accende, il titolo prende il colore d'accento
   e le scritte scivolano un po' a destra una dopo l'altra (effetto a cascata).
   Solo spostamenti (niente zoom), quindi niente tasselli su Firefox. */
html:not(.retro-mode) :is(.mp-card, .tools-page .tp-card){
  transition: transform .5s var(--ease-fluido), border-color .3s ease, box-shadow .4s ease !important;
}
html:not(.retro-mode) .mp-card:hover,
html:not(.retro-mode) .tools-page .tool-link:hover .tp-card,
html:not(.retro-mode) .tools-page .tool-link:focus-visible .tp-card{
  transform: translateY(-8px) !important;
  border-color: var(--orange) !important;
  box-shadow: 0 18px 36px -24px rgba(0, 0, 0, .45) !important;
}
/* il link-contenitore della card non si muove: si muove solo la card */
html:not(.retro-mode) .tools-page .tool-link:hover{ transform: none !important; }

html:not(.retro-mode) :is(.mp-card, .tools-page .tp-card) > :is(.mp-card-top, .mp-title, .mp-desc, .mp-read, .tp-top, .tool-title, .tool-subtitle, .tool-meta, .tp-tags, .tp-go){
  transition: transform .5s var(--ease-fluido), color .3s ease;
}
html:not(.retro-mode) :is(.mp-card:hover, .tools-page .tool-link:hover .tp-card) > :is(.mp-card-top, .tp-top){ transform: translateX(4px); transition-delay: 0s; }
html:not(.retro-mode) :is(.mp-card:hover, .tools-page .tool-link:hover .tp-card) > :is(.mp-title, .tool-title){
  transform: translateX(6px); transition-delay: .04s; color: var(--orange) !important;
}
html:not(.retro-mode) :is(.mp-card:hover, .tools-page .tool-link:hover .tp-card) > :is(.mp-desc, .tool-subtitle){ transform: translateX(6px); transition-delay: .08s; }
html:not(.retro-mode) :is(.mp-card:hover, .tools-page .tool-link:hover .tp-card) > :is(.tool-meta, .tp-tags){ transform: translateX(6px); transition-delay: .12s; }
html:not(.retro-mode) :is(.mp-card:hover, .tools-page .tool-link:hover .tp-card) > :is(.mp-read, .tp-go){ transition-delay: .14s; }
html:not(.retro-mode) .mp-card:hover > .mp-read{ transform: translate(6px, -1px); }

/* scritte 3D degli strumenti: il filtro al passaggio "appiattiva" il 3D e le rendeva trasparenti.
   Al suo posto un bagliore sulla scritta davanti, e il 3D resta solido. */
html:not(.retro-mode) .tools-page .tool-link:hover .tp-3d{ filter: none !important; }


@media (prefers-reduced-motion: reduce){
  html:not(.retro-mode) :is(.mp-card, .tp-card, .mp-card *, .tp-card *){ transform: none !important; transition: none !important; }
}
html:not(.retro-mode) .mp-title a, html:not(.retro-mode) .mp-title a:hover{ text-decoration: none !important; border-bottom: 0 !important; }

/* ---------- 13. STILE PULITO (meno neon) ----------
   Stessi colori, ma niente bagliori, sfumature e bordi arancioni ovunque:
   superfici piene, bordi sottili neutri, l'arancione solo per accenti e stati attivi.
   La modalità Matrix resta neon apposta, quindi è esclusa. */
html:not(.retro-mode):not(.matrix-mode){
  --glow-sm: 0 10px 28px -18px rgba(0, 0, 0, .45);
  --glow-md: none;
  --orange-glow: transparent;
}
html:not(.retro-mode):not(.matrix-mode) *{ text-shadow: none !important; }

/* pannelli e card: superficie piena e bordo sottile neutro */
html:not(.retro-mode):not(.matrix-mode) :is(.callout, .tools-page .tp-card, .tool-block, .oss-card, .post, .widgets, .card, .mp-card, .terminal, details){
  background-color: var(--bg-2) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
}
/* l'unica traccia d'accento: il bordo si colora solo al passaggio del mouse */
html:not(.retro-mode):not(.matrix-mode) :is(.mp-card:hover, .tools-page .tool-link:hover .tp-card, .oss-card:hover, .tool-block:hover, .post:hover){
  border-color: color-mix(in srgb, var(--orange) 60%, var(--line)) !important;
}
/* niente "lampo" sul bordo superiore delle schede */
html:not(.retro-mode):not(.matrix-mode) :is(.tool-block, .oss-card, .post, .widgets)::after{ display: none !important; }

/* titoli: arancione pieno, senza riflesso animato */
html:not(.retro-mode):not(.matrix-mode) :is(h1, h2) .hl{
  background: none !important; animation: none !important;
  color: var(--orange) !important; -webkit-text-fill-color: currentColor;
}
html:not(.retro-mode):not(.matrix-mode) h2::after{ background: var(--line) !important; }

/* logo e scritte 3D senza alone */
html:not(.retro-mode):not(.matrix-mode) :is(.logohome, .nav-brand img, .pf-avatar, .tp-3d){ filter: none !important; animation-name: none; }
html:not(.retro-mode):not(.matrix-mode) .tools-page .tp-3d{ animation-name: tp-swing; }
html:not(.retro-mode):not(.matrix-mode) .pf-avatar{ box-shadow: none !important; }

/* etichette: testo arancione su fondo tenue, senza bordo acceso */
html:not(.retro-mode):not(.matrix-mode) :is(.mp-badge, .tools-page .tp-icon:not(.tp-icon-3d)){ border-color: transparent !important; }
html:not(.retro-mode) #profilo :is(.btn, .btn-outline, .pf-chip){ border-radius: 999px !important; }