/* ═══════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#000000;
  --bg2:#050508;
  --accent:#3b82f6;
  --accent2:#06b6d4;
  --gold:#f59e0b;
  --green:#10b981;
  --red:#ef4444;
  --text:#f1f5f9;
  --text-dim:rgba(241,245,249,0.5);
  --text-dimmer:rgba(241,245,249,0.25);
  --font:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'SF Mono','Fira Code','Cascadia Code',monospace;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);overflow-x:hidden;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
::selection{background:var(--accent);color:white}

/* ═══════════════════════════════════════════
   LOADING SCREEN
   ═══════════════════════════════════════════ */
#loading{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10000;gap:18px;transition:opacity 0.8s ease}
#loading.done{opacity:0;pointer-events:none}
body.loading{overflow:hidden}
#ll{display:flex;align-items:center;justify-content:center}
#ll img{height:112px;width:auto;max-width:85vw;display:block}
#lsub{color:rgba(255,255,255,0.85);font-size:0.72rem;letter-spacing:0.5em;text-transform:uppercase;font-weight:500}
#ltrack{width:150px;height:1px;background:rgba(255,255,255,0.1)}
#lfill{height:1px;background:rgba(255,255,255,0.8);width:0;transition:width 0.15s}

/* ═══════════════════════════════════════════
   HEADER / NAV
   ═══════════════════════════════════════════ */
header{position:fixed;top:0;left:0;right:0;z-index:3000;padding:3px 2rem;height:70px;display:flex;align-items:center;justify-content:space-between;transition:all 0.4s ease;background:linear-gradient(to right,rgba(234,243,255,0.92) 0%,rgba(120,170,255,0.86) 22%,rgba(34,99,235,0.9) 58%,rgba(12,42,140,0.96) 100%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
header.scrolled{background:linear-gradient(to right,rgba(234,243,255,0.95) 0%,rgba(120,170,255,0.9) 22%,rgba(34,99,235,0.94) 58%,rgba(12,42,140,0.98) 100%);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
@media(max-width:768px){header.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(to right,rgb(225,238,255) 0%,rgb(110,160,255) 22%,rgb(30,90,225) 58%,rgb(12,40,135) 100%)}}
@media(max-width:1279px){header.nav-open{box-shadow:none}}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo img{height:64px;width:auto}
nav{display:flex;align-items:center;gap:0}
nav a{color:rgba(255,255,255,0.85);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;padding:8px 14px;font-weight:400;transition:color 0.3s;position:relative}
nav a:hover{color:white}
nav a{opacity:1;transform:none;transition:opacity 0.3s ease,transform 0.3s ease,color 0.3s}
nav a.arrived{opacity:1;transform:scale(1)}
nav a::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%) scaleX(0);width:20px;height:1px;background:var(--accent);transition:transform 0.3s}
nav a:hover::after{transform:translateX(-50%) scaleX(1)}
.nav-cta{background:#fff;border:1px solid #fff;border-radius:5px;color:#1e4fd0!important;font-weight:600;padding:8px 18px!important;margin-left:8px;transition:all 0.3s!important;box-shadow:0 2px 10px rgba(0,0,0,0.18)}
.nav-cta:hover{background:#eaf2ff;border-color:#eaf2ff;color:#13399e!important;transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.28)}
.nav-cta::after{display:none!important}

/* Desktop dropdowns for .nav-has-sub */
@media(min-width:1280px){
  .nav-has-sub{position:relative;display:inline-flex;align-items:center}
  .nav-has-sub > a{display:flex;align-items:center;gap:5px}
  .nav-has-sub > a::before{content:'';display:none}
  .nav-has-sub .nav-arrow{display:inline-block;font-size:0.55em;opacity:0.6;transition:transform 0.25s;margin-left:2px;line-height:1}
  .nav-has-sub:hover .nav-arrow,.nav-has-sub.open-sub .nav-arrow{transform:rotate(90deg);opacity:1}
  .nav-submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:200px;background:rgba(8,14,28,0.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.08);border-radius:6px;box-shadow:0 12px 40px rgba(0,0,0,0.55),0 0 0 1px rgba(59,130,246,0.08);padding:6px 0;opacity:0;pointer-events:none;transition:opacity 0.18s ease,transform 0.22s ease;transform:translateX(-50%) translateY(-4px);flex-direction:column;display:flex;margin-top:6px;z-index:3100}
  .nav-has-sub:hover .nav-submenu,.nav-has-sub.open-sub .nav-submenu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
  .nav-submenu::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:rgba(8,14,28,0.96);border-left:1px solid rgba(255,255,255,0.08);border-top:1px solid rgba(255,255,255,0.08)}
  .nav-submenu a{display:block;padding:9px 18px!important;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.78)!important;white-space:nowrap;transition:all 0.2s}
  .nav-submenu a:hover{color:#fff!important;background:rgba(59,130,246,0.12)}
  .nav-submenu a::after{display:none}
  .nav-submenu .nav-sub-head{display:block;padding:9px 18px 5px!important;font-size:0.58rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent2)!important;font-weight:600;white-space:nowrap;opacity:0.9}
  .nav-submenu a.nav-sub-head{cursor:pointer;transition:opacity .2s,color .2s}
  .nav-submenu a.nav-sub-head:hover{opacity:1;color:#fff!important;background:rgba(59,130,246,0.12)}
}

/* Mobile menu */
.hamburger{display:none;position:fixed;top:20px;right:20px;flex-direction:column;gap:5px;cursor:pointer;padding:8px;z-index:4000}
.hamburger span{width:22px;height:1.5px;background:rgba(255,255,255,0.7);transition:all 0.3s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

@media(max-width:1279px){
  /* :not(.chat-side): la barra delle conversazioni della chat (nav.chat-side, in
     minerva/index.html) e' anch'essa un <nav> e senza questa esclusione erediterebbe
     il vestito del menu a scomparsa del sito (fissa, spinta fuori schermo, opacity 0),
     restando irraggiungibile fra 781 e 1279px insieme al pulsante che dovrebbe
     sostituirla (#burger, che compare solo sotto i 780). */
  nav:not(.chat-side){position:fixed;top:70px;right:0;width:55%;height:calc(100vh - 70px);height:calc(100dvh - 70px);overscroll-behavior:contain;touch-action:pan-y;overflow-y:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(to right,rgba(32,38,52,0.85) 0%,rgba(16,20,30,0.9) 18%,rgba(2,3,6,0.95) 100%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);flex-direction:column;justify-content:flex-start;align-items:stretch;padding:16px 0 calc(24px + env(safe-area-inset-bottom));gap:0;z-index:3500;border-radius:0 0 0 16px;border:none;border-left:1px solid transparent;border-bottom:1px solid transparent;box-shadow:none}
  nav:not(.chat-side){display:flex!important;transform-origin:top right;opacity:0;transform:translateX(20%);transition:transform 0.2s ease,opacity 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;pointer-events:none}
  nav.open{opacity:1;transform:translateX(0);box-shadow:-4px 4px 20px rgba(0,0,0,0.5),0 14px 35px rgba(255,255,255,0.35);border-left-color:rgba(255,255,255,0.4);border-bottom-color:rgba(255,255,255,0.4);pointer-events:auto}
  nav.open a{opacity:1!important;transform:none!important}
  /* :not(.chat-side) anche qui: senza, i link veri dentro la barra della chat
     (La mia area, Visita il sito, Esci, classe .chat-visit) prendevano lo
     stesso allineamento a destra e lo stesso padding del menu del sito, e la
     fascia 781-1279px (resa visibile dall'esclusione qui sopra) mostrava la
     barra storta invece che uguale a se stessa sopra e sotto quella soglia. */
  nav:not(.chat-side) a,nav .nav-has-sub>a{display:block;font-size:0.8rem;letter-spacing:0.12em;padding:11px 20px;text-align:right!important;border-right:2px solid transparent;transition:all 0.3s;line-height:1.4;margin:0;box-sizing:border-box;width:100%;position:relative;z-index:1}
  nav:not(.chat-side) a:hover,nav:not(.chat-side) a.active,nav:not(.chat-side) a.current{border-right-color:var(--accent);color:white;background:rgba(59,130,246,0.08)}
  nav:not(.chat-side) a.current{border-right-color:var(--accent);color:var(--accent);font-weight:500}
  .nav-submenu{display:none;flex-direction:column;padding:0}
  .nav-submenu a{display:block;font-size:0.7rem;padding:11px 20px;text-align:right!important;color:rgba(255,255,255,0.5);border-right:2px solid transparent;line-height:1.4;margin:0;width:100%}
  .nav-submenu a:hover{color:white;border-right-color:var(--accent2)}
  .nav-submenu .nav-sub-head{display:block;font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent2);padding:10px 20px 4px;text-align:right!important;opacity:0.85}
  .nav-has-sub{position:relative;display:flex;flex-direction:column}
  .nav-has-sub.open-sub .nav-submenu{display:flex;background:rgba(255,255,255,0.06)}
  .nav-has-sub .nav-arrow{font-size:0.5rem;margin-right:6px;transition:transform 0.3s;display:inline-block;float:left;line-height:1.8}
  .nav-has-sub.open-sub .nav-arrow{transform:rotate(90deg)}
  nav .nav-cta{background:transparent!important;border:none!important;border-right:2px solid transparent!important;border-radius:0!important;color:rgba(255,255,255,0.85)!important;padding:11px 20px!important;margin-left:0!important}
  nav .nav-cta:hover{border-right-color:var(--accent)!important;color:white!important;background:rgba(59,130,246,0.08)!important}
  .hamburger{display:flex;z-index:4000}
  .menu-particle{position:fixed;width:4px;height:4px;border-radius:50%;pointer-events:none;z-index:4001;opacity:1;transition:none}
  @keyframes menuParticle{0%{transform:translate(0,0) scale(1);opacity:1}100%{opacity:0}}
}

/* ═══════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════ */
#hero{position:relative;height:500vh}
@media(max-width:768px){#hero{height:100vh}.circuit-lines{display:none !important}.mobile-signs-container{display:none !important}.scroll-hint{display:none !important}#nav-dots{display:none !important}#active-label{display:none !important}}
#canvas-wrap{position:sticky;top:0;width:100%;height:100vh;overflow:hidden;z-index:1;will-change:transform;touch-action:pan-y}
#hero-placeholder{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:3;background:#0A0A0B url('/assets/images/cryostat_hero.webp') center 35%/cover no-repeat;transition:opacity 0.8s ease}
@media(max-width:768px){#hero-placeholder{background-image:url('/assets/images/cryostat_hero_mobile.webp');background-position:center center}}
@media(max-width:1024px) and (pointer:coarse){#hero-placeholder{background-image:url('/assets/images/cryostat_hero_mobile.webp');background-position:center center}}
#hero-placeholder.loaded{opacity:0;pointer-events:none}
@media(max-width:768px){#canvas-wrap{position:fixed;top:0;left:0;pointer-events:none;transition:opacity 0.6s}#canvas-wrap.dimmed{opacity:1}}
#canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:pan-y}
@media(max-width:768px){#canvas-wrap canvas{pointer-events:none}}
#active-label{position:fixed;top:2.5rem;left:50%;transform:translateX(-50%);color:white;font-size:0.7rem;letter-spacing:0.5em;text-transform:uppercase;font-weight:400;z-index:100;pointer-events:none;transition:opacity 0.4s;opacity:0}
#active-label.show{opacity:1}
#nav-dots{position:fixed;right:2rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:100;opacity:0;transition:opacity 0.4s;pointer-events:none}
#nav-dots.show{opacity:1}
.nd{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,0.2);cursor:pointer;transition:all 0.35s;border:none;padding:0}
.nd:hover{background:rgba(255,255,255,0.6)}
.nd.on{background:white;transform:scale(2)}

.hero-content{position:fixed;top:50%;left:6%;transform:translateY(-50%);z-index:10;max-width:700px;pointer-events:none;transition:opacity 0.5s}
.hero-content.fade{opacity:0}
@media(min-width:769px){.hero-content a,.hero-content button{pointer-events:auto}}
.hero-pre{font-size:0.65rem;letter-spacing:0.5em;text-transform:uppercase;color:var(--accent2);font-weight:400;margin-bottom:16px}
.hero-tagline{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:200;letter-spacing:-0.02em;line-height:1.15;margin-bottom:20px}
.hero-tagline .word{display:inline-block}
.hero-tagline .highlight{color:var(--accent);position:relative}
.hero-tagline .highlight::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.hero-sub{font-size:0.85rem;font-weight:300;line-height:1.7;color:var(--text-dim);max-width:380px;margin-bottom:32px;background:rgba(0,0,0,0.45);padding:12px 16px;border-radius:8px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media(max-width:768px){.hero-sub{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,0.55);max-width:100%}
.hero-content{display:none !important}
.hero-tagline{font-size:clamp(1.8rem,7vw,2.6rem)}
.hero-cta-group{flex-wrap:wrap}
#pillars .pillars-grid{grid-template-columns:1fr !important}
#pillars .section-grid{padding:0 5%}
#pillars .pillar{text-align:center}
#pillars .pillar-num{font-size:0.9rem;color:rgba(255,255,255,0.5)}
#pillars .pillar-title-row{justify-content:center}
#pillars .pillar-info-btn{margin-top:4px}
#pillars .pillar .read-more-wrap{max-height:none !important;overflow:visible !important}
#pillars .pillar .read-more-wrap::after{display:none !important}
#pillars .pillar .read-more-btn{display:none !important}
}
/* ── Mobile horizontal slides over cryostat ── */
#hslides{display:none}
@media(max-width:768px){
#hslides{display:block;position:fixed;top:0;left:0;width:100%;height:100vh;z-index:10;pointer-events:none;overflow:hidden}
.hslide-hint{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:20;display:none;align-items:center;gap:10px;color:rgba(255,255,255,0.75);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;pointer-events:none;transition:opacity 0.6s;background:rgba(0,0,0,0.65);padding:10px 20px;border-radius:24px;border:1px solid rgba(255,255,255,0.15)}
@media(max-width:768px){.hslide-hint{display:flex}}
.hslide-hint.hidden{opacity:0}
.hslide-hint-arrows{display:flex;align-items:center;gap:6px;font-size:0.9rem}
.hslide-hint-arrows{font-size:1rem}
.hslide-hint-arrows span{animation:hintPulse 2s ease infinite}
.hslide-hint-arrows span:nth-child(1){animation-delay:0s}
.hslide-hint-arrows span:nth-child(2){animation-delay:0.3s}
.hslide-hint-arrows span:nth-child(3){animation-delay:0.6s}
.hslide-hint-arrows span:nth-child(4){animation-delay:0.9s}
@keyframes hintPulse{0%,100%{opacity:0.3}50%{opacity:0.8}}
.hslide-counter{position:fixed;bottom:28px;right:20px;z-index:20;color:rgba(255,255,255,0.35);font-size:0.65rem;letter-spacing:0.1em;font-family:monospace;pointer-events:none;display:none}
@media(max-width:768px){.hslide-counter{display:block}}
.hslide{position:absolute;top:18%;left:0;width:85%;max-width:360px;transform:translate(105vw,0);padding:28px 24px;background:rgba(8,12,20,0.43);border-radius:14px;border-left:3px solid var(--accent);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);pointer-events:auto;transition:none}
.hslide[data-slide="0"]{transform:translate(5vw,0);opacity:1}
.hslide-eyebrow{font-size:0.6rem;letter-spacing:0.4em;text-transform:uppercase;color:var(--accent2);margin-bottom:10px;font-weight:500}
.hslide h2{font-size:1.4rem;font-weight:300;line-height:1.3;letter-spacing:-0.01em;margin-bottom:12px;color:#fff}
.hslide h2 .acc{color:var(--accent)}
.hslide p{font-size:0.82rem;line-height:1.65;color:rgba(255,255,255,0.7);margin-bottom:0}
.hslide .hslide-cta{display:inline-flex;margin-top:16px;padding:8px 16px;background:linear-gradient(135deg,var(--accent),#2563eb);color:#fff;text-decoration:none;font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:500;border-radius:4px;pointer-events:auto}
.hslide-num{font-size:0.7rem;letter-spacing:0.3em;color:var(--accent);font-weight:500;margin-bottom:6px;font-family:monospace}
.hslide h3{font-size:1.1rem;font-weight:400;color:#fff;margin-bottom:8px}
}
.mobile-signs-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:15;pointer-events:none;overflow:hidden;touch-action:pan-y}
.mobile-sign{position:absolute;top:32%;left:50%;transform:translateX(120vw);padding:18px 30px;background:rgba(12,22,45,0.88);border-radius:12px;border-top:3px solid;white-space:nowrap;pointer-events:none;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:6px;transition:none;touch-action:pan-y}
.mobile-sign .ms-icon{font-size:1.8rem}
.mobile-sign .ms-label{font-size:1.2rem;font-weight:600;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.mobile-sign .ms-sub{font-size:0.72rem;font-weight:300;color:rgba(255,255,255,0.65);text-transform:uppercase;letter-spacing:0.12em;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.hero-cta-group{display:flex;gap:14px;flex-wrap:nowrap}
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:linear-gradient(135deg,var(--accent),#2563eb);color:white;text-decoration:none;font-size:0.75rem;letter-spacing:0.15em;text-transform:uppercase;font-weight:500;border-radius:4px;border:none;cursor:pointer;transition:all 0.3s;position:relative;overflow:hidden;touch-action:pan-y}
.btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#2563eb,var(--accent2));opacity:0;transition:opacity 0.3s}
.btn-primary:hover::before{opacity:1}
.btn-primary span{position:relative;z-index:1}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;background:rgba(0,0,0,0.4);color:#fff;text-decoration:none;font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:500;border-radius:4px;border:1px solid rgba(255,255,255,0.45);cursor:pointer;transition:all 0.3s;text-align:center;white-space:nowrap;touch-action:pan-y}
.btn-secondary:hover{border-color:rgba(255,255,255,0.3);color:white}

/* Scroll indicator */
.scroll-hint{position:fixed;left:50%;bottom:2.5rem;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;animation:fadeUp 0.8s ease 1.8s forwards;transition:opacity 0.6s;background:rgba(0,0,0,0.5);padding:10px 20px;border-radius:20px;border:1px solid rgba(255,255,255,0.1);pointer-events:none}
.scroll-hint span{font-size:0.7rem;letter-spacing:0.5em;text-transform:uppercase;font-weight:400;animation:hintColorPulse 2s ease infinite}
.scroll-arrows{display:flex;align-items:center;gap:12px}
.scroll-arrow{font-size:1.4rem;color:rgba(255,255,255,0.9);animation:arrowBlink 1.5s ease infinite}
.scroll-arrow-h{font-size:1.1rem;color:rgba(255,255,255,0.7);animation:arrowBlinkH 1.5s ease infinite 0.3s}
@keyframes arrowBlink{0%,100%{opacity:0.3;transform:translateY(0)}50%{opacity:1;transform:translateY(4px)}}
@keyframes arrowBlinkH{0%,100%{opacity:0.2;transform:translateX(0)}50%{opacity:0.8;transform:translateX(3px)}}
@keyframes hintColorPulse{0%,100%{color:rgba(255,255,255,0.9)}50%{color:#3b82f6}}

/* Circuit lines decorative */
.circuit-lines{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.circuit-line{position:absolute;background:var(--accent);opacity:0.06}
.cl-h{height:1px;animation:circuitH 4s ease infinite}
.cl-v{width:1px;animation:circuitV 4s ease infinite}
.circuit-dot{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:0;animation:circuitDot 4s ease infinite}
@media(max-width:768px){a,button,input,textarea,select,.pillar{touch-action:pan-y!important}.desktop-only{display:none!important}#dbg{display:none!important}}

/* ═══════════════════════════════════════════
   SECTIONS COMMON
   ═══════════════════════════════════════════ */
section{padding:120px 0;position:relative}
@media(max-width:768px){section{padding:60px 0}
#pillars,#case-study,#case-study-2,#ai-competenza,#metodo,#cta{position:relative;z-index:5;background:rgba(8,12,20,0.43) !important;backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}
#pillars *,#case-study *,#case-study-2 *,#ai-competenza *,#metodo *,#cta *{color:#fff !important}
#pillars .read-more-btn,#case-study .read-more-btn,#case-study-2 .read-more-btn,#ai-competenza .read-more-btn,#metodo .read-more-btn,#cta .read-more-btn{color:#06b6d4 !important}
#pillars .read-more-btn:hover,#case-study .read-more-btn:hover,#case-study-2 .read-more-btn:hover,#ai-competenza .read-more-btn:hover,#metodo .read-more-btn:hover,#cta .read-more-btn:hover{color:#67e8f9 !important}
#pillars .pillar-info-btn{color:#06b6d4 !important}
#case-study .section-label,#ai-competenza .section-label,#metodo .section-label{color:var(--accent) !important}
#case-study .case-stat-num,#metodo .fase-num{color:var(--accent) !important}
}
.section-grid{max-width:100%;margin:0 auto;padding:0 3%}
.section-label{font-size:0.6rem;letter-spacing:0.5em;text-transform:uppercase;color:var(--accent);font-weight:400;margin-bottom:8px;font-family:var(--font-mono)}
.section-title{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:200;letter-spacing:-0.02em;line-height:1.2;margin-bottom:16px}
.section-desc{font-size:0.95rem;font-weight:300;line-height:1.8;color:var(--text-dim);max-width:600px;margin-bottom:48px}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 0.8s ease,transform 0.8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.2s}
.reveal-delay-3{transition-delay:0.3s}
.reveal-delay-4{transition-delay:0.4s}

/* ═══════════════════════════════════════════
   PILLARS (4 pilastri)
   ═══════════════════════════════════════════ */
#pillars{background:var(--bg2)}
@media(max-width:768px){#pillars{position:relative;z-index:5}}
.pillars-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px}
@media(max-width:900px){.pillars-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:550px){.pillars-grid{grid-template-columns:1fr}}

.pillar{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);padding:40px 32px;position:relative;overflow:hidden;cursor:pointer;transition:all 0.5s ease;text-decoration:none}
.pillar:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12);transform:translateY(-4px)}
.pillar::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;transform:scaleX(0);transition:transform 0.5s ease;pointer-events:none}
.pillar:hover::before{transform:scaleX(1)}
.pillar:nth-child(1)::before{background:var(--accent)}
.pillar:nth-child(2)::before{background:var(--green)}
.pillar:nth-child(3)::before{background:var(--gold)}
.pillar:nth-child(4)::before{background:var(--accent2)}

.pillar-icon{font-size:2.4rem;display:block;opacity:1;margin-bottom:16px}
.pillar:nth-child(1) .pillar-icon{color:var(--accent)}
.pillar:nth-child(2) .pillar-icon{color:var(--green)}
.pillar:nth-child(3) .pillar-icon{color:var(--gold)}
.pillar:nth-child(4) .pillar-icon{color:var(--accent2)}

.pillar-num{font-size:0.85rem;letter-spacing:0.3em;color:rgba(255,255,255,0.4);font-family:var(--font-mono);margin-bottom:0}
.pillar-num-row{display:flex;align-items:center;margin-bottom:16px}
.pillar-num-row .pillar-num{flex:0 0 auto}
.pillar-num-row .pillar-icon{flex:1;text-align:center;margin-bottom:0}
.pillar h3{font-size:1.1rem;font-weight:500;letter-spacing:0.02em;margin-bottom:12px;color:white}
.pillar p{font-size:0.82rem;line-height:1.7;color:rgba(255,255,255,0.7);font-weight:300}
.pillar-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px;position:relative;z-index:2}
.pillar-title-row h3{margin:0}
.pillar-info-btn{position:relative;z-index:3;padding:5px 12px;background:none;border:1px solid rgba(59,130,246,0.3);border-radius:12px;color:#06b6d4;font-size:0.65rem;letter-spacing:0.06em;cursor:pointer;transition:all 0.2s;font-family:inherit;white-space:nowrap}
.pillar-info-btn:hover{border-color:#06b6d4;background:rgba(6,182,212,0.1);color:#67e8f9}
.pillar-actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
/* Read more collapsible — mobile only */
.read-more-wrap{position:relative;transition:max-height 0.4s ease}
.read-more-btn{display:none}
@media(max-width:768px){
.read-more-wrap{max-height:4.5em;overflow:hidden}
.read-more-btn{display:inline-block}
}
.read-more-wrap.open{max-height:2000px}
@media(max-width:768px){
.read-more-wrap:not(.open)::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2em;background:linear-gradient(transparent,var(--bg))}
.pillar .read-more-wrap:not(.open)::after{background:linear-gradient(transparent,rgba(0,0,0,0.8))}
#ai-competenza .read-more-wrap:not(.open)::after{background:linear-gradient(transparent,rgba(8,12,20,0.95))}
}
.read-more-btn{margin-top:8px;padding:0;background:none;border:none;color:#06b6d4 !important;font-size:0.72rem;letter-spacing:0.08em;cursor:pointer;font-weight:400;transition:color 0.2s}
.read-more-btn:hover{color:#67e8f9 !important}
.read-more-btn .arrow{display:inline-block;transition:transform 0.3s;margin-left:4px}
.read-more-btn.open .arrow{transform:rotate(180deg)}
.pillar-link{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,0.5);transition:color 0.3s}
.pillar-link:hover{color:white;text-decoration:none}
.pillar-link .arrow{transition:transform 0.3s;display:inline-block}
.pillar:hover .pillar-link .arrow{transform:translateX(4px)}

/* Glowing orb behind pillar on hover */
.pillar::after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;filter:blur(80px);opacity:0;transition:opacity 0.5s;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.pillar:hover::after{opacity:0.08}
.pillar:nth-child(1)::after{background:var(--accent)}
.pillar:nth-child(2)::after{background:var(--green)}
.pillar:nth-child(3)::after{background:var(--gold)}
.pillar:nth-child(4)::after{background:var(--accent2)}

/* ═══════════════════════════════════════════
   MANIFESTO
   ═══════════════════════════════════════════ */
#manifesto{background:var(--bg);overflow:hidden}
.manifesto-content{max-width:800px;margin:0 auto;text-align:center;padding-left:5%;padding-right:5%}
.manifesto-quote{font-size:clamp(1.4rem,3vw,2.2rem);font-weight:200;line-height:1.5;letter-spacing:-0.01em;margin-bottom:32px}
.manifesto-quote .em{color:var(--accent);font-style:normal}
.manifesto-detail{font-size:0.85rem;color:var(--text-dim);line-height:1.8;font-weight:300;max-width:600px;margin:0 auto 40px}

/* Stats counters */
.stats-row{display:flex;justify-content:center;gap:60px;flex-wrap:wrap;margin-top:48px}
.stat{text-align:center}
.stat-num{font-size:clamp(2rem,4vw,3rem);font-weight:200;font-family:var(--font-mono);letter-spacing:-0.03em}
.stat-num .counter{display:inline-block}
.stat:nth-child(1) .stat-num{color:var(--accent)}
.stat:nth-child(2) .stat-num{color:var(--green)}
.stat:nth-child(3) .stat-num{color:var(--gold)}
.stat-label{font-size:0.6rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--text-dimmer);margin-top:8px}

/* Animated separator */
.separator{width:100%;height:1px;margin:0 auto;position:relative;overflow:hidden}
.separator::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);animation:separatorMove 3s ease infinite}

/* ═══════════════════════════════════════════
   CASE STUDY
   ═══════════════════════════════════════════ */
#case-study{background:var(--bg2)}
.case-card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:48px;max-width:900px;margin:0 auto;position:relative;overflow:hidden}
.case-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--green),var(--accent2))}
.case-badge{display:inline-block;font-size:0.55rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--green);border:1px solid rgba(16,185,129,0.3);padding:4px 12px;border-radius:3px;margin-bottom:20px;font-family:var(--font-mono)}
.case-title{font-size:1.4rem;font-weight:300;margin-bottom:16px}
.case-text{font-size:0.88rem;line-height:1.8;color:var(--text-dim);font-weight:300;margin-bottom:32px}
.case-results{display:flex;gap:40px;flex-wrap:wrap}
.case-stat{display:flex;align-items:baseline;gap:8px}
.case-stat-num{font-size:2rem;font-weight:200;font-family:var(--font-mono);color:var(--accent2)}
.case-stat-label{font-size:0.7rem;color:var(--text-dim);letter-spacing:0.1em;text-transform:uppercase}

/* ═══════════════════════════════════════════
   COME LAVORIAMO (4 fasi)
   ═══════════════════════════════════════════ */
#metodo{background:var(--bg)}
.fasi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.fasi-grid::before{content:'';position:absolute;top:32px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(59,130,246,0.2),rgba(6,182,212,0.2),transparent)}
@media(max-width:900px){.fasi-grid{grid-template-columns:repeat(2,1fr)}.fasi-grid::before{display:none}}
@media(max-width:550px){.fasi-grid{grid-template-columns:1fr}}

.fase{text-align:center;padding:24px 16px}
.fase-num{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-family:var(--font-mono);font-size:0.75rem;color:var(--accent);position:relative;transition:all 0.5s}
.fase:hover .fase-num{border-color:var(--accent);box-shadow:0 0 30px rgba(59,130,246,0.15)}
.fase h4{font-size:0.9rem;font-weight:400;letter-spacing:0.05em;margin-bottom:10px}
.fase p{font-size:0.78rem;line-height:1.7;color:var(--text-dim);font-weight:300}

/* ═══════════════════════════════════════════
   CTA SECTION
   ═══════════════════════════════════════════ */
#cta{background:var(--bg2);text-align:center;padding:100px 3%;position:relative;overflow:hidden}
#cta::before{content:'';position:absolute;top:50%;left:50%;width:600px;height:600px;background:radial-gradient(circle,rgba(59,130,246,0.06),transparent 70%);transform:translate(-50%,-50%);pointer-events:none}
.cta-title{font-size:clamp(1.6rem,3.5vw,2.6rem);font-weight:200;margin-bottom:16px}
.cta-sub{font-size:0.9rem;color:var(--text-dim);font-weight:300;max-width:550px;margin:0 auto 36px;line-height:1.7}

/* Terminal-style text */
.terminal-line{font-family:var(--font-mono);font-size:0.7rem;color:var(--text-dimmer);margin-top:32px;overflow:hidden}
.terminal-line .prompt{color:var(--green)}
.terminal-line .cmd{color:var(--text-dim)}
.cursor-blink{display:inline-block;width:7px;height:14px;background:var(--green);animation:blink 1s step-end infinite;vertical-align:middle;margin-left:2px}
@media(max-width:768px){.cursor-blink{animation:none}}

/* ═══════════════════════════════════════════
   FOOTER — minimal with header-style gradient
   ═══════════════════════════════════════════ */
footer{background:linear-gradient(to right,rgba(234,243,255,0.92) 0%,rgba(120,170,255,0.86) 22%,rgba(34,99,235,0.9) 58%,rgba(12,42,140,0.96) 100%);padding:18px 5%;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;position:relative;z-index:5}
footer{text-shadow:0 1px 2px rgba(0,0,0,0.22)}
@media(max-width:768px){footer{background:linear-gradient(to right,rgb(225,238,255) 0%,rgb(110,160,255) 22%,rgb(30,90,225) 58%,rgb(12,40,135) 100%) !important}}
.footer-brand{display:flex;align-items:center;text-decoration:none}
.footer-brand img{height:46px;width:auto;display:block}
.footer-legal{font-size:0.7rem;letter-spacing:0.08em;color:rgba(255,255,255,0.78);text-align:right}
.footer-legal a{color:rgba(255,255,255,0.78);text-decoration:none;transition:color 0.2s}
.footer-legal a:hover{color:#fff}
@media (max-width:680px){
  footer{flex-direction:column;text-align:center;gap:10px}
  .footer-legal{text-align:center}
  .footer-brand img{height:42px}
}

/* ═══════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════ */
/* Flying sign plate */
.flying-sign{position:fixed;z-index:2000;pointer-events:none;padding:8px 16px;background:rgba(12,22,45,0.92);border:1px solid rgba(255,255,255,0.15);border-radius:6px;color:white;font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:400;white-space:nowrap;backdrop-filter:blur(8px);box-shadow:0 0 20px rgba(59,130,246,0.2);transition:all 0.9s cubic-bezier(0.23,1,0.32,1)}
.flying-sign .sign-icon{margin-right:8px;font-size:0.85rem}
.flying-sign .sign-sub{display:block;font-size:0.5rem;color:var(--text-dim);letter-spacing:0.2em;margin-top:2px;font-weight:300;transition:opacity 0.4s}
.flying-sign.flying{transform:scale(0.5)!important;opacity:0.8}
.flying-sign.flying .sign-sub{opacity:0}

@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
@keyframes lineGrow{to{transform:scaleX(1)}}
@keyframes scrollPulse{0%,100%{opacity:0.3;transform:scaleY(1)}50%{opacity:0.8;transform:scaleY(1.2)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes separatorMove{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes circuitH{0%{width:0;opacity:0}10%{opacity:0.1}50%{width:200px;opacity:0.06}100%{width:0;opacity:0}}
@keyframes circuitV{0%{height:0;opacity:0}10%{opacity:0.1}50%{height:150px;opacity:0.06}100%{height:0;opacity:0}}
@keyframes circuitDot{0%,100%{opacity:0;transform:scale(0)}20%{opacity:0.3;transform:scale(1)}80%{opacity:0.3;transform:scale(1)}100%{opacity:0;transform:scale(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes glowPulse{0%,100%{opacity:0.4}50%{opacity:0.8}}

/* ── Language switch (flags) in the header ── */
.lang-switch{display:flex;align-items:center;gap:8px;margin-left:18px}
.lang-switch a{display:inline-flex;align-items:center;font-size:1.15rem;line-height:1;text-decoration:none;opacity:0.45;filter:grayscale(0.6);transition:opacity 0.2s,filter 0.2s,transform 0.2s}
.lang-switch a:hover{opacity:0.85;filter:grayscale(0)}
.lang-switch a.active{opacity:1;filter:grayscale(0);transform:scale(1.05)}
@media(max-width:1279px){
  .lang-switch{position:fixed;top:22px;right:62px;z-index:4000;margin:0}
  .lang-switch a{font-size:1.25rem}
}

/* ── Header right cluster (nav + flags) ── */
.header-right{display:flex;align-items:center}

/* ── Sub-page content (home design language: Helvetica + home palette) ── */
.page section{padding:84px 5%;position:relative}
.page section.alt{background:var(--bg2)}
.page .wrap{max-width:1100px;margin:0 auto}
.page .narrow{max-width:760px;margin:0 auto}
.page-hero{padding-top:150px !important;padding-bottom:56px !important}
.page-hero .section-title{font-size:clamp(2.2rem,5.5vw,3.6rem);margin-bottom:22px}
.page .section-desc.lead{font-size:1.05rem;max-width:680px}
.page p.body{font-size:0.95rem;font-weight:300;line-height:1.85;color:var(--text-dim);max-width:760px;margin-top:16px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.note{font-size:0.78rem;color:var(--text-dimmer);margin-top:14px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:8px}
.card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:26px 24px}
.card h3{font-size:1.02rem;font-weight:500;color:#fff;margin-bottom:9px;letter-spacing:-0.01em}
.card p{font-size:0.88rem;font-weight:300;line-height:1.7;color:var(--text-dim)}

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 44px;margin-top:8px}
.step{display:flex;gap:18px;align-items:flex-start}
.step .num{font-family:var(--font-mono);font-size:1.3rem;color:var(--accent);font-weight:400;line-height:1.1;min-width:2.2ch}
.step h3{font-size:1.05rem;font-weight:500;color:#fff;margin-bottom:6px}
.step p{font-size:0.88rem;font-weight:300;line-height:1.7;color:var(--text-dim)}

/* project index cards */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,360px));gap:20px;margin-top:8px}
.project-card{display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:30px 26px;text-decoration:none;transition:border-color .2s,transform .2s}
.project-card:hover{border-color:rgba(59,130,246,0.4);transform:translateY(-2px)}
.project-card .tag{font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent)}
.project-card h3{font-size:1.5rem;font-weight:300;color:#fff;letter-spacing:-0.01em}
.project-card p{font-size:0.9rem;font-weight:300;color:var(--text-dim);line-height:1.6;flex:1}
.project-card .more{font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--accent);margin-top:4px}

@media(max-width:768px){
  .steps{grid-template-columns:1fr}
  .proj-grid{grid-template-columns:1fr}
  .page section{padding:56px 6%}
  .page-hero{padding-top:108px !important}
}

/* ===== Language switch (SVG flags) — overrides emoji version ===== */
.lang-switch{display:flex;align-items:center;gap:7px;margin-left:18px;position:static;top:auto;right:auto}
.lang-switch .lang{display:inline-flex;line-height:0;border-radius:2px;overflow:hidden;font-size:0;opacity:0.4;filter:grayscale(0.7);box-shadow:0 0 0 1px rgba(255,255,255,0.18);transition:opacity .2s,filter .2s,box-shadow .2s}
.lang-switch .lang img{display:block;width:22px;height:15px;object-fit:cover}
.lang-switch a.lang{cursor:pointer}
.lang-switch a.lang:hover{opacity:0.9;filter:grayscale(0)}
.lang-switch .lang.active{opacity:1;filter:grayscale(0);box-shadow:0 0 0 1.5px var(--accent)}
.lang-switch .disabled{cursor:not-allowed;opacity:0.22}
.lang-switch-mobile{justify-content:flex-end;margin:0 0 6px;padding:14px 20px 16px;border-bottom:1px solid rgba(255,255,255,0.08)}
@media(min-width:1280px){.lang-switch-mobile{display:none}}
/* sotto i 1025px il selettore vive nel pannello del menu: nascondiamo solo quello
   dell intestazione, non quello dentro #nav (che sta comunque dentro #header) */
@media(max-width:1279px){#header .lang-switch:not(.lang-switch-mobile){display:none}}

/* ===== Footer redistributed (clean columns) ===== */
footer{display:block !important;padding:52px 5% 26px !important}
.footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1fr 1fr;gap:30px;align-items:start;text-align:left}
.footer-brand{display:inline-flex}
.footer-brand img{height:46px;width:auto;display:block}
.footer-col{font-size:0.78rem;font-weight:300;line-height:1.75;color:rgba(255,255,255,0.85)}
.footer-col .footer-h{display:block;font-size:0.6rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.8);margin-bottom:10px}
.footer-col a{color:rgba(255,255,255,0.85);text-decoration:none;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-col .lang-switch{margin-left:0}
.footer-bottom{max-width:1100px;margin:34px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,0.18);font-size:0.7rem;color:rgba(255,255,255,0.72);text-align:center;letter-spacing:0.04em}
@media(max-width:768px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:22px}
  .footer-brand-col{grid-column:1 / -1}
}

/* ===== Language switch as dropdown (droplist) — overrides row version ===== */
.lang-switch{position:relative;display:inline-flex;align-items:center;margin-left:18px;gap:0}
.lang-current{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:4px;padding:5px 8px;cursor:pointer;line-height:0}
.lang-current:hover{border-color:rgba(255,255,255,0.3)}
.lang-current img{width:22px;height:15px;display:block;border-radius:1px}
.lang-current .caret{font-size:0.55rem;color:var(--text-dim);line-height:1;transition:transform .2s}
.lang-switch.open .lang-current .caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:172px;background:rgba(8,14,28,0.98);border:1px solid rgba(255,255,255,0.1);border-radius:6px;box-shadow:0 14px 40px rgba(0,0,0,0.55);padding:6px;display:none;flex-direction:column;gap:1px;z-index:3600}
.lang-switch.open .lang-menu{display:flex}
.lang-switch.up .lang-menu{top:auto;bottom:calc(100% + 6px)}
.lang-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:4px;text-decoration:none;font-size:0.8rem;font-weight:300;color:var(--text)}
.lang-opt img{width:22px;height:15px;border-radius:1px;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,0.12)}
.lang-opt .lang-name{color:var(--text)}
.lang-opt.active{background:rgba(59,130,246,0.16)}
.lang-opt:not(.disabled):hover{background:rgba(255,255,255,0.07)}
.lang-opt.disabled{opacity:0.45;cursor:not-allowed}
.lang-opt.disabled .lang-name{color:var(--text-dim)}
.lang-opt .soon{margin-left:auto;font-size:0.56rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-dimmer)}
/* mobile: dropdown lives at top of the menu panel */
/* voce di ritorno all'app (Minerva) nella barra del sito */
#nav .nav-app{color:var(--accent2)}
/* Il ritorno all'app vive solo dove il menu e' un pannello: li' senza di lui si
   resta bloccati sul sito. Sulla barra del computer no: e' gia' lunga, e chi
   arriva dall'app ha i suoi pulsanti dentro l'app. */
#nav .nav-app-back{font-weight:600;padding:8px 14px}
@media(min-width:1280px){#nav .nav-app-back{display:none}}
@media(max-width:1279px){#nav .nav-app-back{border-bottom:1px solid rgba(255,255,255,0.08);padding-bottom:10px;margin-bottom:4px}}
@media(max-width:1279px){#nav .nav-app-back{border-bottom:1px solid rgba(255,255,255,0.08);padding-bottom:10px;margin-bottom:4px}}
.lang-switch-mobile{margin:0 0 4px;padding:12px 20px;border-bottom:1px solid rgba(255,255,255,0.08);justify-content:flex-end}
.lang-switch-mobile .lang-menu{right:20px}
@media(min-width:1280px){.lang-switch-mobile{display:none}}
/* sotto i 1025px il selettore vive nel pannello del menu: nascondiamo solo quello
   dell intestazione, non quello dentro #nav (che sta comunque dentro #header) */
@media(max-width:1279px){#header .lang-switch:not(.lang-switch-mobile){display:none}}

/* ===== SVG icons (recolorable via mask) + icon layouts ===== */
.ico{display:inline-block;width:22px;height:22px;background:var(--accent);flex-shrink:0;
  -webkit-mask-image:var(--m);mask-image:var(--m);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.ico-ai{--m:url(/assets/images/icons/ai.svg)}
.ico-globe{--m:url(/assets/images/icons/globe.svg)}
.ico-card{--m:url(/assets/images/icons/card.svg)}
.ico-quote{--m:url(/assets/images/icons/quote.svg)}
.ico-route{--m:url(/assets/images/icons/route.svg)}
.ico-article{--m:url(/assets/images/icons/article.svg)}
.ico-calendar{--m:url(/assets/images/icons/calendar.svg)}
.ico-star{--m:url(/assets/images/icons/star.svg)}
.ico-megaphone{--m:url(/assets/images/icons/megaphone.svg)}
.ico-leaf{--m:url(/assets/images/icons/leaf.svg)}

/* feature chips (SaaS short giardiniamo section) */
.feat-row{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:26px}
.feat{display:flex;align-items:center;gap:9px;font-size:0.82rem;color:var(--text-dim)}
.feat .ico{width:20px;height:20px}

/* icon cards (detail page tools) */
.icards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;margin-top:8px}
.icard{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:26px 24px}
.icard .ico{width:26px;height:26px;margin-bottom:14px}
.icard h3{font-size:1.02rem;font-weight:500;color:#fff;margin-bottom:8px;letter-spacing:-0.01em}
.icard p{font-size:0.88rem;font-weight:300;line-height:1.7;color:var(--text-dim)}
.ico-chat{--m:url(/assets/images/icons/chat.svg)}
.ico-camera{--m:url(/assets/images/icons/camera.svg)}
.ico-code{--m:url(/assets/images/icons/code.svg)}
.ico-layers{--m:url(/assets/images/icons/layers.svg)}
.ico-shield{--m:url(/assets/images/icons/shield.svg)}

/* ===== "Punto di vista" modal ===== */
.pov-overlay{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(2,4,10,0.74);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.pov-overlay.open{display:flex}
.pov-modal{position:relative;max-width:600px;width:100%;max-height:86vh;overflow-y:auto;background:linear-gradient(160deg,rgba(16,22,38,0.98),rgba(8,11,20,0.99));border:1px solid rgba(59,130,246,0.18);border-radius:14px;padding:42px 38px;box-shadow:0 30px 80px rgba(0,0,0,0.6)}
.pov-close{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--text-dim);font-size:1.7rem;line-height:1;cursor:pointer;padding:4px}
.pov-close:hover{color:#fff}
.pov-eyebrow{font-size:0.6rem;letter-spacing:0.45em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.pov-claim{font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:300;line-height:1.3;color:#fff;letter-spacing:-0.01em;margin:0 0 28px}
.pov-claim .acc{color:var(--accent)}
.pov-points{display:flex;flex-direction:column;gap:20px}
.pov-point{display:flex;gap:14px;align-items:flex-start}
.pov-point .ico{width:24px;height:24px;margin-top:2px}
.pov-point strong{display:block;color:#fff;font-weight:500;font-size:0.98rem;margin-bottom:3px}
.pov-point p{color:var(--text-dim);font-size:0.88rem;font-weight:300;line-height:1.65;margin:0}
.pov-closing{margin:28px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,0.09);color:var(--text);font-size:0.92rem;font-weight:300;line-height:1.7}
@media(max-width:600px){.pov-modal{padding:34px 22px}}

.ico-refresh{--m:url(/assets/images/icons/refresh.svg)}
.ico-cpu{--m:url(/assets/images/icons/cpu.svg)}
.ico-cart{--m:url(/assets/images/icons/cart.svg)}
.ico-phone{--m:url(/assets/images/icons/phone.svg)}
.ico-lock{--m:url(/assets/images/icons/lock.svg)}
.ico-network{--m:url(/assets/images/icons/network.svg)}
.ico-search{--m:url(/assets/images/icons/search.svg)}
.ico-gamepad{--m:url(/assets/images/icons/gamepad.svg)}

/* ===== Modal as draggable + resizable window (fixed header + always-visible X) ===== */
.pov-overlay{display:none;align-items:initial;justify-content:initial;padding:0;background:rgba(2,4,10,0.55)}
.pov-overlay.open{display:block}
.pov-modal{position:fixed;left:50%;top:8vh;transform:translateX(-50%);width:min(600px,92vw);height:auto;max-height:84vh;min-width:300px;min-height:220px;display:flex;flex-direction:column;padding:0;overflow:hidden;border:1px solid rgba(59,130,246,0.22);border-radius:14px}
.pov-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 13px 24px;border-bottom:1px solid rgba(255,255,255,0.09);background:rgba(255,255,255,0.035);cursor:move;flex-shrink:0;touch-action:none;border-radius:14px 14px 0 0}
.pov-head .pov-eyebrow{margin:0}
.pov-close{position:static;flex-shrink:0;font-size:1.6rem;padding:0 4px;line-height:1}
.pov-body{flex:1;min-height:0;overflow-y:auto;padding:24px 30px 30px}
.pov-claim{margin:0 0 24px}
.pov-resize{position:absolute;right:2px;bottom:2px;width:18px;height:18px;cursor:nwse-resize;touch-action:none}
.pov-resize::after{content:'';position:absolute;right:4px;bottom:4px;width:8px;height:8px;border-right:2px solid rgba(255,255,255,0.35);border-bottom:2px solid rgba(255,255,255,0.35)}
.pov-modal{max-width:96vw}

/* ===== coronatek-style window: slate palette, header bar, 8-direction resize ===== */
.pov-modal{background:#1e293b;border:1px solid #475569;border-radius:8px;box-shadow:0 25px 60px -12px rgba(0,0,0,0.7);transition:border-color .2s,box-shadow .2s}
.pov-modal:hover{border-color:#64748b}
.pov-modal.maximized{border-radius:8px}
.pov-head{background:#334155;border-bottom:1px solid #475569;border-radius:8px 8px 0 0;padding:11px 10px 11px 20px;gap:10px}
.pov-head .pov-eyebrow{color:#93c5fd;font-size:0.62rem;letter-spacing:0.32em}
.pov-controls{display:flex;align-items:center;gap:3px;flex-shrink:0}
.pov-ctl{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;background:none;color:#cbd5e1;border-radius:6px;cursor:pointer;line-height:0;transition:background .15s,color .15s}
.pov-ctl:hover{background:rgba(255,255,255,0.09);color:#fff}
.pov-ctl svg{width:16px;height:16px}
.pov-body{background:#1e293b;border-radius:0 0 8px 8px}
.pov-claim{color:#f8fafc}
.pov-point strong{color:#f1f5f9}
.pov-point p{color:#cbd5e1}
.pov-closing{color:#e2e8f0;border-top-color:rgba(255,255,255,0.1)}
.pov-point .ico{background:#60a5fa}
.pov-claim .acc{color:#60a5fa}
/* 8 resize handles (edges + corners) */
.pov-rz{position:absolute;z-index:60;touch-action:none}
.pov-rz[data-dir="top"]{top:-3px;left:18px;right:18px;height:12px;cursor:ns-resize}
.pov-rz[data-dir="bottom"]{bottom:-3px;left:18px;right:18px;height:12px;cursor:ns-resize}
.pov-rz[data-dir="left"]{left:-3px;top:18px;bottom:18px;width:12px;cursor:ew-resize}
.pov-rz[data-dir="right"]{right:-3px;top:18px;bottom:18px;width:12px;cursor:ew-resize}
.pov-rz[data-dir="top-left"]{top:-3px;left:-3px;width:18px;height:18px;cursor:nwse-resize;z-index:61}
.pov-rz[data-dir="top-right"]{top:-3px;right:-3px;width:18px;height:18px;cursor:nesw-resize;z-index:61}
.pov-rz[data-dir="bottom-left"]{bottom:-3px;left:-3px;width:18px;height:18px;cursor:nesw-resize;z-index:61}
.pov-rz[data-dir="bottom-right"]{bottom:-3px;right:-3px;width:18px;height:18px;cursor:nwse-resize;z-index:61}
.pov-rz[data-dir="bottom-right"]::after{content:'';position:absolute;right:3px;bottom:3px;width:8px;height:8px;border-right:2px solid rgba(148,163,184,0.7);border-bottom:2px solid rgba(148,163,184,0.7)}


/* ── Lock background scroll while a modal is open (reserve gutter to avoid layout shift) ── */
html{scrollbar-gutter:stable}
body.modal-open{overflow:hidden}

/* ── Custom page scrollbar (matches the dark/blue theme) ── */
*{scrollbar-width:thin;scrollbar-color:rgba(59,130,246,0.45) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(59,130,246,0.55),rgba(37,99,235,0.6));border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(96,165,250,0.85),rgba(59,130,246,0.85));background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}

/* ── Keep modal scroll contained (belt-and-suspenders with the JS touch lock) ── */
.pov-body,.pillar-modal-body,#cryo-modal-body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* ── Micro-interactions: icons, cards, buttons ── */
.ico{transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .3s,filter .3s}
.icard,.card,.feat{transition:transform .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease}

.icard:hover{transform:translateY(-4px);border-color:rgba(59,130,246,0.35);background:rgba(255,255,255,0.05);box-shadow:0 14px 34px -18px rgba(59,130,246,0.6)}
.icard:hover .ico{transform:scale(1.15) rotate(-4deg);background:var(--accent2);filter:drop-shadow(0 0 7px rgba(59,130,246,0.6))}

.card:hover{transform:translateY(-3px);border-color:rgba(59,130,246,0.28);background:rgba(255,255,255,0.05)}

.feat:hover .ico{transform:scale(1.18);background:var(--accent2);filter:drop-shadow(0 0 6px rgba(59,130,246,0.55))}

.project-card:hover{box-shadow:0 18px 40px -22px rgba(59,130,246,0.6)}
.project-card .more{transition:color .25s,letter-spacing .25s}
.project-card:hover .more{color:var(--accent2);letter-spacing:0.2em}

.step .num{transition:transform .3s cubic-bezier(.34,1.56,.64,1),text-shadow .3s,color .3s}
.step:hover .num{transform:scale(1.18);color:var(--accent2);text-shadow:0 0 14px rgba(59,130,246,0.5)}

.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(59,130,246,0.7)}

.pov-point .ico{transition:transform .3s cubic-bezier(.34,1.56,.64,1),filter .3s}
.pov-point:hover .ico{transform:scale(1.15);filter:drop-shadow(0 0 7px rgba(96,165,250,0.7))}

@media (prefers-reduced-motion: reduce){
  .ico,.icard,.card,.feat,.feat .ico,.project-card,.project-card .more,.step .num,.btn-primary,.pov-point .ico{transition:none!important}
  .icard:hover,.card:hover,.btn-primary:hover,.icard:hover .ico,.feat:hover .ico,.step:hover .num,.pov-point:hover .ico{transform:none}
}

/* ── Home pillar icons + case-study stats ── */
.pillar-icon{transition:transform .35s cubic-bezier(.34,1.56,.64,1),filter .35s}
.pillar:hover .pillar-icon{transform:scale(1.14) translateY(-2px);filter:drop-shadow(0 6px 14px rgba(59,130,246,0.35))}
.case-stat-num{transition:transform .3s cubic-bezier(.34,1.56,.64,1),text-shadow .3s}
.case-card:hover .case-stat-num{transform:scale(1.06);text-shadow:0 0 18px rgba(59,130,246,0.4)}
@media (prefers-reduced-motion: reduce){
  .pillar-icon,.case-stat-num{transition:none!important}
  .pillar:hover .pillar-icon,.case-card:hover .case-stat-num{transform:none}
}

/* ── Compact desktop menu: multi-word items on two centred lines ── */
@media(min-width:1280px){
  nav a,nav .nav-has-sub>a{text-align:center;line-height:1.08;padding:6px 11px}
}
/* the forced break only applies on the desktop bar; collapse it in the mobile drawer */
@media(max-width:1279px){ .nav-brk{display:none} }
/* Nella prima fascia sopra il panino (1280-1450) la barra intera con il saluto
   e' al limite: le voci si stringono un poco, senza cambiare forma. */
@media(min-width:1280px) and (max-width:1450px){
  nav a,nav .nav-has-sub>a{padding:6px 8px;letter-spacing:0.08em}
}
/* Il saluto mostra la parte locale dell'email: puo' essere lunghissima, e non
   deve poter spingere il menu fuori dallo schermo. Si tronca coi puntini. */
@media(min-width:1280px){
  #nav .nav-greet{max-width:150px;overflow:hidden;text-overflow:ellipsis}
}

/* anchored sections clear the fixed header */
section[id]{scroll-margin-top:88px}

/* ── Contact page: info + map + form ── */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-top:8px}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:34px}}
.contact-info{display:flex;flex-direction:column;gap:22px}
.contact-block{font-size:0.92rem;color:rgba(255,255,255,0.85);line-height:1.7}
.contact-block .footer-h{display:block;font-size:0.6rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:6px}
.contact-block a{color:var(--accent2);text-decoration:none;transition:color .2s}
.contact-block a:hover{color:#fff}
.map-wrap{position:relative;margin-top:6px;border-radius:12px;overflow:hidden;border:1px solid rgba(59,130,246,0.28);line-height:0}
.map-wrap iframe{width:100%;height:300px;border:0;display:block;filter:invert(0.86) hue-rotate(185deg) saturate(0.68) brightness(1.06) contrast(0.82)}
/* subtle brand-blue tint; pointer-events:none keeps the map interactive */
.map-wrap::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 130% at 0% 0%,rgba(59,130,246,0.16),rgba(8,14,28,0.22));mix-blend-mode:soft-light}
.contact-form{display:flex;flex-direction:column;gap:18px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:30px 28px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.62);font-weight:600}
.field input,.field textarea{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.13);border-radius:8px;padding:12px 14px;color:var(--text);font-family:inherit;font-size:0.9rem;transition:border-color .2s,background .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(59,130,246,0.06)}
.field textarea{resize:vertical;min-height:130px}
.contact-form .btn-primary{align-self:flex-start;margin-top:4px;border:none;cursor:pointer}
.form-note{font-size:0.72rem;color:var(--text-dim);line-height:1.6;margin:0}
.form-ok{font-size:0.85rem;color:var(--accent2);line-height:1.6;display:none}
.form-ok.show{display:block}
.form-ok.error{color:#fca5a5}

.field select{background-color:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.13);border-radius:8px;padding:12px 38px 12px 14px;color:var(--text);font-family:inherit;font-size:0.9rem;transition:border-color .2s,background-color .2s;appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2393a3b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:13px}
.field select:focus{outline:none;border-color:var(--accent);background-color:rgba(59,130,246,0.06)}
.field select option{background:#0e1626;color:var(--text)}

/* ── Chi siamo: timeline ── */
#storia{scroll-margin-top:90px}
.timeline{position:relative;margin-top:40px;padding-left:8px}
.timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:10px;width:2px;background:linear-gradient(180deg,var(--accent),rgba(59,130,246,0.12))}
.timeline::after{content:'';position:absolute;left:4px;top:0;width:8px;height:44px;border-radius:8px;background:radial-gradient(closest-side,rgba(96,165,250,0.85),rgba(59,130,246,0));filter:blur(1px);pointer-events:none;animation:tlFlow 5s ease-in-out infinite}
@keyframes tlFlow{0%{top:-10px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:calc(100% - 30px);opacity:0}}
.timeline.tl-animate .tl-item{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.timeline.tl-animate .tl-item.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.timeline::after{animation:none;display:none}.timeline.tl-animate .tl-item{opacity:1;transform:none;transition:none}}
.tl-item{position:relative;padding:0 0 30px 32px}
.tl-item::before{content:'';position:absolute;left:1px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--accent);box-shadow:0 0 0 4px rgba(59,130,246,0.12);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.tl-item:hover::before{transform:scale(1.35);border-color:var(--accent2);box-shadow:0 0 0 5px rgba(59,130,246,0.2),0 0 16px rgba(96,165,250,0.55)}
.tl-item:last-child{padding-bottom:0}
.tl-year{font-family:var(--font-mono,monospace);font-size:0.8rem;letter-spacing:0.18em;color:var(--accent);font-weight:600;transition:color .25s ease,text-shadow .25s ease}
.tl-item:hover .tl-year{color:var(--accent2);text-shadow:0 0 12px rgba(96,165,250,0.5)}
.tl-item h3{font-size:1.08rem;font-weight:500;color:#fff;margin:5px 0 7px}
.tl-item p{font-size:0.9rem;line-height:1.7;color:var(--text-dim);font-weight:300;max-width:640px}
.tl-item .tl-link{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;color:#fff;text-decoration:none;background:linear-gradient(135deg,rgba(59,130,246,0.28),rgba(59,130,246,0.14));border:1px solid rgba(96,165,250,0.6);border-radius:7px;padding:9px 16px;box-shadow:0 2px 10px rgba(59,130,246,0.15);transition:all .25s}
.tl-item .tl-link:hover{background:linear-gradient(135deg,rgba(59,130,246,0.5),rgba(59,130,246,0.3));border-color:var(--accent2);transform:translateY(-2px);box-shadow:0 6px 20px rgba(59,130,246,0.35)}
.tl-media{margin:14px 0 0;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);max-width:520px;background:rgba(255,255,255,0.03)}
.tl-media img{width:100%;height:auto;display:block}
.tl-media figcaption{font-size:0.72rem;color:var(--text-dim);padding:9px 13px;line-height:1.5}

/* ── Media hero (image + text) ── */
.media-hero{display:grid;grid-template-columns:1fr 0.82fr;gap:44px;align-items:center}
@media(max-width:820px){.media-hero{grid-template-columns:1fr;gap:26px}}
.media-img{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);line-height:0}
.media-img img{width:100%;height:auto;display:block}

/* ── Gallery ── */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:26px}
.gallery figure{margin:0;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);transition:transform .3s ease,border-color .3s ease}
.gallery figure:hover{transform:translateY(-3px);border-color:rgba(59,130,246,0.3)}
.gallery img{width:100%;height:210px;object-fit:cover;display:block}
.gallery figcaption{font-size:0.72rem;color:var(--text-dim);padding:11px 13px;line-height:1.5}
.figure-solo{max-width:620px;margin:30px auto 0;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);transition:transform .3s ease,border-color .3s ease}
.figure-solo:hover{transform:translateY(-3px);border-color:rgba(59,130,246,0.3)}
.figure-solo img{width:100%;height:auto;display:block}
.figure-solo figcaption{font-size:0.78rem;color:var(--text-dim);padding:13px 16px;line-height:1.55;text-align:center}
.logo-card{display:inline-block;background:#fff;padding:16px 28px;border-radius:14px;box-shadow:0 10px 34px rgba(0,0,0,0.4)}
.logo-card img{display:block;width:340px;max-width:74vw;height:auto}
.media-cap{font-size:0.72rem;color:var(--text-dim);padding-top:10px;line-height:1.5}
.q-attr{display:block;margin-top:10px;font-size:0.82rem;color:var(--text-dim);font-weight:400}
.detail-row{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;margin-top:28px}
.detail-row figure{margin:0;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.04)}
.detail-row figure img{display:block;height:auto}
.detail-row figure.box img{width:230px;max-width:62vw}
.detail-row figure.tall img{width:92px}
.detail-row figcaption{font-size:0.7rem;color:var(--text-dim);padding:9px 12px;line-height:1.45}
.steps-list{margin:18px 0 6px;padding-left:22px;max-width:640px}
.steps-list li{font-size:0.92rem;line-height:1.7;color:var(--text-dim);font-weight:300;margin-bottom:8px}
.steps-list li strong{color:#fff;font-weight:500}
/* Comparison table (Senza / Con) */
.compare{width:100%;border-collapse:collapse;margin-top:34px;font-size:0.92rem}
.compare th,.compare td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(255,255,255,0.08);line-height:1.55}
.compare thead th{font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:600}
.compare thead th:first-child{color:var(--text-dim)}
.compare thead th:last-child{color:var(--accent2)}
.compare td:first-child{color:var(--text-dim);width:50%}
.compare td:last-child{color:#fff}
.compare tbody tr:last-child td{border-bottom:0}
@media(max-width:640px){
  .compare,.compare tbody,.compare tr,.compare td{display:block;width:auto}
  .compare thead{display:none}
  .compare tr{padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.08)}
  .compare td{border:0;padding:3px 0}
  .compare td:first-child::before{content:'Senza: ';color:var(--text-dim);font-weight:600}
  .compare td:last-child::before{content:'Con Nutriva: ';color:var(--accent2);font-weight:600}
}
/* Lightbox: click a content photo to enlarge */
.lb-zoomable{cursor:zoom-in}
.lb-overlay{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;background:rgba(5,8,16,0.93);padding:4vmin;cursor:zoom-out;opacity:0;transition:opacity .2s ease;touch-action:none}
.lb-overlay.open{display:flex;opacity:1}
.lb-overlay figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:94vw;max-height:94vh}
.lb-overlay img{max-width:94vw;max-height:86vh;width:auto;height:auto;border-radius:10px;box-shadow:0 24px 80px rgba(0,0,0,0.6);object-fit:contain;cursor:default}
.lb-overlay figcaption{color:var(--text-dim);font-size:0.82rem;line-height:1.5;text-align:center;max-width:760px}
.lb-close{position:fixed;top:18px;right:22px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,0.22);background:rgba(0,0,0,0.45);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.lb-close:hover{background:rgba(59,130,246,0.25);border-color:var(--accent2)}
.lb-close svg{width:20px;height:20px}
/* Auth control in nav (Accedi / Ciao name + Esci) */
.nav-auth{display:contents}
.nav-greet{font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent2);white-space:nowrap;opacity:0.9;align-self:center;padding:0 6px}
nav a.nav-logout{color:rgba(255,255,255,0.6)!important}
nav a.nav-logout:hover{color:#fff!important}
@media(max-width:1279px){.nav-greet{display:block;text-align:right;padding:11px 20px;align-self:auto}}
/* ── User dashboard (/area) ── */
.dash-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;margin:10px 0 6px}
.chat-topctl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
/* L'uscita sta sempre all'estremita' destra, anche quando la riga va a capo:
   e' il comando che si cerca guardando l'angolo, non scorrendo la fila. */
/* La fila dei comandi prende tutta la larghezza rimasta: cosi' "spingi a
   destra" (margin-left:auto) porta davvero l'uscita al bordo della colonna,
   anche quando la riga va a capo. */
body.chat-page .chat-topctl{flex:1 1 auto}
.chat-topctl #topExit{margin-left:auto}
/* Su schermi larghi il contenuto e' incolonnato al centro (1120px): li' "in
   fondo alla fila" vuol dire ancora lontano dal bordo dello schermo. L'uscita
   esce dalla colonna e si appoggia al bordo destro della finestra, con il suo
   margine. Sotto i 1025 la colonna e' gia' a tutta larghezza e basta il flusso. */
body.chat-page .dash-head{position:relative}
/* L'uscita esce dalla colonna SOLO quando fuori c'e' spazio per lei: la colonna
   e' larga 1120, il pulsante ~75 piu' margine, quindi sotto i 1320 pixel di
   finestra si sovrapporrebbe ai crediti. Li' resta in fila, all'estremita'
   destra della colonna, che a quelle larghezze e' gia' il bordo utile. */
@media(min-width:1320px){
  body.chat-page #topExit{position:absolute;top:50%;transform:translateY(-50%);
    right:calc(24px - ((100vw - 100%) / 2));margin-left:0}
}
.chat-topctl .chat-burger{margin-bottom:0}
.chat-burger.new-top{background:linear-gradient(90deg,#3b82f6,#2563eb);color:#fff;border-color:transparent;font-weight:700}
.chat-burger.new-top:hover{filter:brightness(1.08);color:#fff}
.credit-pill{display:inline-flex;align-items:center;gap:8px;font-size:0.82rem;letter-spacing:0.04em;color:#fff;background:rgba(59,130,246,0.14);border:1px solid rgba(96,165,250,0.5);border-radius:999px;padding:8px 16px}
.credit-pill b{font-family:var(--font-mono,monospace);color:var(--accent2)}
.plan-badge{font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:600;padding:4px 10px;border-radius:4px;border:1px solid rgba(255,255,255,0.2);color:var(--text-dim)}
.plan-badge.pro{color:#fff;background:linear-gradient(135deg,var(--accent),#2563eb);border-color:transparent}
.dash-card .soon{font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim);border:1px solid rgba(255,255,255,0.12);border-radius:4px;padding:3px 8px;margin-top:10px;display:inline-block}
/* ── Chat (/chat) ── */
.chat-wrap{display:flex;flex-direction:column;max-width:880px;margin:0 auto}
.chat-log{max-height:56vh;min-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:10px 2px 18px}
.chat-msg{max-width:84%;padding:12px 16px;border-radius:14px;line-height:1.6;font-size:0.95rem;white-space:pre-wrap;word-wrap:break-word}
.chat-msg.user{align-self:flex-end;background:linear-gradient(135deg,rgba(59,130,246,0.9),#2563eb);color:#fff;border-bottom-right-radius:4px}
.chat-msg.ai{align-self:flex-start;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);color:var(--text);border-bottom-left-radius:4px}
.chat-msg.sys{align-self:center;background:transparent;color:var(--text-dim);font-size:0.82rem;text-align:center;max-width:100%}
/* light markdown render in AI bubbles - AND anywhere else renderMd() writes.
   .md-body e' il contenitore da mettere su un elemento disegnato da renderMd()
   fuori da una bolla di chat (oggi: l'esito del pannello «Prepara la lezione»,
   dentro una .dc-modal-box). Ogni selettore .chat-msg resta dov'era e vale
   com'e' sempre valso: qui si AGGIUNGE un selettore accanto, non si sostituisce
   quello esistente, quindi la chat rende esattamente come prima. Senza questo,
   renderMd() fuori dalla chat produce intestazioni della stessa dimensione del
   corpo, paragrafi a margine zero ed elenchi coi valori predefiniti del
   browser: il testo diventa un blocco unico e sparisce proprio la scansione
   (le fasce orarie) per cui la funzione esiste. */
.md-body{line-height:1.6;font-size:0.95rem;word-wrap:break-word}
.chat-msg .md-h1,.md-body .md-h1{font-size:1.12rem;font-weight:600;color:#fff;margin:8px 0 4px}
.chat-msg .md-h2,.md-body .md-h2{font-size:1.02rem;font-weight:600;color:#fff;margin:7px 0 4px}
.chat-msg .md-h3,.md-body .md-h3{font-size:0.95rem;font-weight:600;color:var(--accent2);margin:6px 0 3px}
.chat-msg .md-h1:first-child,.chat-msg .md-h2:first-child,.chat-msg .md-h3:first-child,.chat-msg .md-p:first-child,.md-body .md-h1:first-child,.md-body .md-h2:first-child,.md-body .md-h3:first-child,.md-body .md-p:first-child{margin-top:0}
.chat-msg .md-p,.md-body .md-p{margin:0 0 7px}
.chat-msg .md-p:last-child,.md-body .md-p:last-child{margin-bottom:0}
.chat-msg .md-q,.md-body .md-q{margin:6px 0 8px;padding:2px 0 2px 12px;border-left:3px solid var(--accent2);color:var(--text-dim)}
.chat-msg .md-ul,.chat-msg .md-ol,.md-body .md-ul,.md-body .md-ol{margin:4px 0 8px;padding-left:20px}
.chat-msg .md-ul li,.chat-msg .md-ol li,.md-body .md-ul li,.md-body .md-ol li{margin:2px 0}
.chat-msg code,.md-body code{background:rgba(255,255,255,0.09);border-radius:4px;padding:1px 5px;font-family:var(--font-mono,monospace);font-size:0.88em}
.chat-msg strong,.md-body strong{color:#fff;font-weight:600}
/* fenced code blocks + runner */
.chat-msg pre.code-block,.md-body pre.code-block{position:relative;background:#0b1220;border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:14px;margin:10px 0;overflow-x:auto}
.chat-msg pre.code-block code,.md-body pre.code-block code{font-family:var(--font-mono,monospace);font-size:0.84rem;line-height:1.55;background:none;padding:0;white-space:pre;color:#e6edf6}
.code-run{position:absolute;top:8px;right:8px;background:rgba(59,130,246,0.18);border:1px solid rgba(96,165,250,0.5);color:#cfe0ff;border-radius:7px;padding:3px 10px;font-size:0.72rem;cursor:pointer}
.code-run:hover{background:rgba(59,130,246,0.32);color:#fff}
.cr-code{width:100%;min-height:170px;background:#0b1220;border:1px solid rgba(255,255,255,0.14);border-radius:10px;color:#e6edf6;padding:11px 13px;font-family:var(--font-mono,monospace);font-size:0.84rem;line-height:1.5;resize:vertical;color-scheme:dark;white-space:pre;margin-bottom:4px}
.cr-code:focus{outline:none;border-color:var(--accent2)}
.cr-out-lbl{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-dim);margin:14px 0 5px}
.cr-out{background:#06090f;border:1px solid rgba(255,255,255,0.1);border-radius:9px;padding:11px 13px;font-family:var(--font-mono,monospace);font-size:0.82rem;color:#9fe6b0;white-space:pre-wrap;max-height:220px;overflow:auto;min-height:42px;margin:0}
/* diagrams (mermaid) */
.chat-msg .diagram,.md-body .diagram{margin:12px 0;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:14px;text-align:center;overflow-x:auto}
.chat-msg .diagram svg,.md-body .diagram svg{max-width:100%;height:auto}
.diag-bar{display:flex;gap:8px;justify-content:center;margin-top:10px}
.diag-btn{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);color:var(--text-dim);border-radius:7px;padding:3px 11px;font-size:0.72rem;cursor:pointer}
.diag-btn:hover{color:#fff;border-color:var(--accent2)}
.diag-modal{text-align:center;overflow:auto;max-height:74vh}
.diag-modal svg{max-width:100%;height:auto}
.chat-controls{border-top:1px solid rgba(255,255,255,0.08);padding-top:14px}
.depth-row{display:flex;align-items:center;gap:12px;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:12px;flex-wrap:wrap}
.depth-row input[type=range]{flex:1;min-width:140px;accent-color:var(--accent)}
.depth-note{font-size:0.72rem;color:var(--accent2)}
.chat-input-row{display:flex;gap:10px;align-items:flex-end}
.chat-input{flex:1;resize:none;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);border-radius:12px;color:#fff;padding:12px 14px;font:inherit;font-size:0.95rem;line-height:1.5;max-height:140px}
.chat-input:focus{outline:none;border-color:var(--accent2)}
.chat-send{flex-shrink:0;border:none;cursor:pointer;background:linear-gradient(135deg,var(--accent),#2563eb);color:#fff;border-radius:12px;padding:12px 20px;font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase;font-weight:600}
.chat-send:disabled{opacity:0.5;cursor:default}
/* smartphone: textarea a tutta larghezza, allega + invia sulla riga sotto */
@media(max-width:600px){
  .chat-input-row{flex-wrap:wrap;gap:8px}
  .chat-input{flex:1 1 100%;min-width:0;font-size:1rem}
  .chat-attach{order:2}
  .chat-send{order:3;margin-left:auto;padding:11px 26px}
  .chat-actions{gap:6px}
  .act-btn{padding:5px 10px;font-size:0.72rem;letter-spacing:0}
  .formula-btn{font-size:0.72rem;padding:4px 10px;margin-top:6px}
}
.chat-msg.chat-typing{align-self:flex-start;color:#eaf1ff;font-size:0.82rem;font-style:normal;font-weight:600;letter-spacing:0.02em;padding:9px 16px;border-radius:14px;border:none;background:linear-gradient(90deg,#0e2a6b,#2563eb,#06b6d4,#7c3aed,#2563eb,#0e2a6b);background-size:280% 100%;animation:thinkgrad 2.4s ease-in-out infinite;box-shadow:0 2px 16px rgba(37,99,235,0.3)}
@keyframes thinkgrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media(prefers-reduced-motion:reduce){.chat-msg.chat-typing{animation:none}}
/* ── Bordo animato ─────────────────────────────────────────────────────────
   Due significati, un solo effetto: verde e un giro solo = "appena verificata";
   blu e giro continuo = "sto lavorando". Il perche' sta in
   docs/superpowers/specs/2026-08-31-bordo-neon-design.md
   --bordo-pieno e' DERIVATO dal fondo su cui l'elemento poggia (bianco
   translucido sopra --bg): non e' una costante libera. Se --bg cambia va
   rifatto, e scripts/test-bordo-neon.js se ne accorge. */
/* ── La barra di stato delle azioni lunghe ─────────────────────────────────
   Serve dove il comando premuto SPARISCE: «Sintesi» e «Versione completa»
   stanno in un menu che si chiude al tocco, quindi non c'e' nessun pulsante a
   cui appendere la cometa. Le righe si impilano — una per azione — perche' due
   richieste vicine non devono cancellarsi lo stato a vicenda.
   Non blocca: il contenitore non prende i tocchi (pointer-events:none), solo
   le righe. z-index sotto ai 200 delle modali: una modale e' una decisione in
   primo piano, e deve coprirla. */
#statoBarra{position:fixed;left:0;right:0;bottom:14px;z-index:180;display:flex;
  flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 12px}
.stato-riga{pointer-events:auto;display:flex;align-items:center;gap:10px;
  max-width:min(92vw,520px);background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);border-radius:12px;padding:10px 14px;
  color:var(--text);font-size:0.92rem;line-height:1.35;backdrop-filter:blur(6px)}
.stato-riga.ko{border-color:rgba(248,113,113,0.55)}
.stato-riga.ok{border-color:rgba(16,185,129,0.5)}
.stato-x{appearance:none;background:transparent;border:0;color:var(--text-dim);
  font:inherit;cursor:pointer;padding:0 2px;line-height:1}
.stato-x:hover{color:#fff}
@property --bordo-angolo{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes bordo-giro{to{--bordo-angolo:360deg}}
.chat-msg.ai.verificata,.qz-loading,.diag-btn.in-corso,#lezGo2.in-corso,
#lezGo.in-corso,#lezIstrGo.in-corso,#matGo.in-corso,#exGo.in-corso,#ossOk.in-corso,#ctxStart.in-corso,#matRigen.in-corso,.lez-f-pdf.in-corso,.stato-riga.in-corso,.verif-attesa{
  --bordo-angolo:0deg;
  /* Dove COMINCIA il tratto luminoso: da qui a 100% e' la coda della cometa,
     quindi 70% = 30% di perimetro acceso. E' un parametro con il valore di
     PRIMA come predefinito, non un numero nuovo: questa regola la condividono
     quattro effetti gia' rilasciati (la verifica, l'attesa del test, il
     pulsante dei diagrammi) e allungare la coda a tutti sarebbe un cambiamento
     che nessuno ha chiesto. Chi vuole una coda diversa se la dichiara, come fa
     #lezGo2.in-corso qui sotto. */
  --bordo-coda:70%;
  background:
    linear-gradient(var(--bordo-pieno),var(--bordo-pieno)) padding-box,
    conic-gradient(from var(--bordo-angolo),transparent var(--bordo-coda),
                   var(--bordo-c1),var(--bordo-c2),transparent) border-box;
  border:2px solid transparent;
}
/* #0d0d0d = rgba(255,255,255,0.05) composto su #000000, cioe' esattamente
   quello che .chat-msg.ai mostra oggi. Il padding scende di 1px per lato
   perche' il bordo passa da 1px a 2px e box-sizing e' border-box. */
.chat-msg.ai.verificata{--bordo-pieno:#0d0d0d;--bordo-c1:#10b981;--bordo-c2:#86efac;padding:11px 15px;animation:bordo-giro 1.2s linear 1}
/* #0c121d e' il fondo dichiarato da .dc-modal-box: la scatola dell attesa
   ci si confonde dentro, e si vede solo il bordo. */
.qz-loading{--bordo-pieno:#0c121d;--bordo-c1:var(--accent);--bordo-c2:var(--accent2);animation:bordo-giro 2s linear infinite}
/* Il fondo qui e' una pila di translucidi, quindi MISURATO e non calcolato:
   CHROME=$(find ~/.cache/ms-playwright -name chrome -type f | head -1) \
     node scripts/test-bordo-neon.js --misura '#btnNudo' */
.diag-btn.in-corso{--bordo-pieno:#212121;--bordo-c1:var(--accent);--bordo-c2:var(--accent2);padding:2px 10px;animation:bordo-giro 2s linear infinite}
/* «Approva e genera» mentre il ciclo paga. Il fondo qui non e' translucido —
   .dc-btn-primary e' un gradiente OPACO — ma va misurato lo stesso, e per una
   ragione in piu': lo strato interno della cometa e' un colore PIENO, quindi
   quel gradiente per il tempo del ciclo diventa piatto, e il valore giusto e'
   il colore che il pulsante mostra al suo centro. MISURATO, non calcolato:
   CHROME=$(find ~/.cache/ms-playwright -name chrome -type f | head -1)      node scripts/test-bordo-neon.js --misura '#lezGoNudo'
   → #3072f1 (l'aritmetica a mente diceva #3072f0: e' esattamente lo scarto per
   cui questo file dice di misurare).
   I colori della cometa sono l'accento2 e un ciano chiaro, non l'accento:
   l'accento e' il blu del pulsante, e una cometa blu su fondo blu non si
   vedrebbe. Il padding scende di 2px per lato perche' il bordo passa da 0 a
   2px e box-sizing e' border-box: senza, il pulsante crescerebbe di 4px e
   spingerebbe la riga dei comandi. */
#lezGo2.in-corso{--bordo-pieno:#3072f1;--bordo-c1:var(--accent2);--bordo-c2:#a5f3fc;--bordo-coda:45%;padding:8px 16px;animation:bordo-giro 2s linear infinite}
/* ── La cometa sugli altri otto punti in cui si aspetta ────────────────────
   Il criterio: sta sul comando che l'utente ha appena premuto, mentre aspetta
   la risposta di QUELLA pressione. Non sui caricamenti di sfondo (chi non ha
   premuto non sta aspettando), e non dove un segnale c'e' gia' e funziona: la
   bolla che scrive (.chat-msg.chat-typing), l'attesa del test (.qz-loading),
   il pulsante dei diagrammi (.diag-btn.in-corso).

   I FONDI SONO MISURATI, uno per uno, con la catena di antenati vera:
     CHROME=$(find ~/.cache/ms-playwright -name chrome -type f | head -1) \
       node scripts/test-bordo-neon.js --misura '#<campione>'
   e ne sono venuti fuori DUE, non otto:
     #3072f1  i cinque comandi pieni (dc-btn-primary e .ctx-start): il fondo e'
              un gradiente OPACO, quindi gli antenati non lo spostano, e il
              valore combacia con quello gia' misurato per #lezGo2.
     #1a1f2a  i due ghost e il riquadro della verifica: bianco translucido
              sopra #0c121d. La coincidenza fra i due e' MISURATA, non dedotta.
   Nel misurare, i campioni tengono il loro testo vero ma INVISIBILE: col testo
   visibile il pixel centrale cade sul glifo in mezzo all'etichetta e si misura
   il colore del TESTO — dava #525660 su un fondo che e' #1a1f2a.

   Il padding cala di quanto cresce il bordo (box-sizing e' border-box, e un
   comando non deve crescere quando comincia a lavorare): i .dc-btn pieni
   passano da 0 a 2px (10/18 → 8/16), i ghost da 1 a 2px (10/18 → 9/17),
   .ctx-start da 0 a 2px (8 → 6), .verif da 1px (3px a sinistra) a 2px per lato
   (11/13 → 10px 12px 10px 14px).

   `--bordo-coda` resta il valore di fabbrica: il 45% e' stato deciso per il
   pulsante che genera una lezione intera, ed estenderlo a otto comandi e' una
   scelta d'aspetto che non prendo da solo. */
#lezGo.in-corso,#lezIstrGo.in-corso,#matGo.in-corso,#exGo.in-corso,#ossOk.in-corso{--bordo-pieno:#3072f1;--bordo-c1:var(--accent2);--bordo-c2:#a5f3fc;padding:8px 16px;animation:bordo-giro 2s linear infinite}
#ctxStart.in-corso{--bordo-pieno:#3072f1;--bordo-c1:var(--accent2);--bordo-c2:#a5f3fc;padding:6px;animation:bordo-giro 2s linear infinite}
#matRigen.in-corso,.lez-f-pdf.in-corso{--bordo-pieno:#1a1f2a;--bordo-c1:var(--accent);--bordo-c2:var(--accent2);padding:9px 17px;animation:bordo-giro 2s linear infinite}
/* La riga di stato mentre l'azione lavora. Il fondo e' MISURATO come gli
   altri, e sulla catena di antenati VERA — la riga sta sulla pagina, non
   dentro una modale:
     CHROME=$(find ~/.cache/ms-playwright -name chrome -type f | head -1) \
       node scripts/test-bordo-neon.js --misura '#statoNudo'
   → #1a1f2a. Che coincida col fondo dei due ghost e' una MISURA, non una
   deduzione: bianco al 6% sopra #0c121d da una parte, e qui sopra il fondo
   della pagina.
   Il padding cala di 1px per lato perche' il bordo passa da 1px a 2px e
   box-sizing e' border-box: senza, la riga crescerebbe di 2px quando comincia
   a lavorare, e si vedrebbe saltare. `--bordo-coda` resta quella di fabbrica,
   come per gli altri otto. */
.stato-riga.in-corso{--bordo-pieno:#1a1f2a;--bordo-c1:var(--accent);--bordo-c2:var(--accent2);padding:9px 13px;animation:bordo-giro 2s linear infinite}
/* Il riquadro della verifica non e' un pulsante: e' una scatola che aspetta,
   come .qz-loading, e per questo la cometa ci sta attorno invece che su un
   comando — «✓ Verifica» non tiene l'attesa (runVerify riceve btn=null).
   `stato:'attesa'` prima non esisteva: l'attesa si disegnava con 'attenzione',
   cioe' lo STESSO stato del verdetto «attenzione», e non c'era modo di
   distinguere «sto verificando» da «verificato, guarda bene». */
.verif-attesa{border-left-color:var(--accent2);--bordo-pieno:#1a1f2a;--bordo-c1:var(--accent);--bordo-c2:var(--accent2);padding:10px 12px 10px 14px;animation:bordo-giro 2s linear infinite}
/* Stessi selettori, stessa specificita': un .bordo-neon generico perderebbe.
   Convenzione gia' in uso a site.css:896. Il bordo si ferma, non si spegne.
   Il gradiente conico e' visibile solo su circa il 30% del perimetro (e'
   una cometa: funziona fermo perche' la rotazione lo fa vedere tutto in un
   giro, e l'occhio ricostruisce il riquadro). Fermare solo l'animazione
   lascerebbe quel frammento congelato: mancherebbero i lati destro e
   inferiore, e sembrerebbe un difetto grafico invece di un segnale. Percio'
   lo strato del bordo cambia forma, non solo velocita': diventa un
   gradiente lineare pieno su tutto il perimetro, negli stessi colori. */
@media(prefers-reduced-motion:reduce){.chat-msg.ai.verificata,.qz-loading,.diag-btn.in-corso,#lezGo2.in-corso,
#lezGo.in-corso,#lezIstrGo.in-corso,#matGo.in-corso,#exGo.in-corso,#ossOk.in-corso,#ctxStart.in-corso,#matRigen.in-corso,.lez-f-pdf.in-corso,.stato-riga.in-corso,.verif-attesa{
  animation:none;
  background:linear-gradient(var(--bordo-pieno),var(--bordo-pieno)) padding-box,
             linear-gradient(var(--bordo-c1),var(--bordo-c2)) border-box;
}}
/* :not(.quiz-saved): la scheda del test salvato (renderSavedQuiz, app.js
   ~riga 1598) ha anche lei un .msg-tools, ma con un solo pulsante PDF sotto
   un contenuto lungo (voto, punti di forza, dettaglio domanda per domanda):
   il piano appiccicato a destra qui sarebbe una pastiglia senza spazio
   sopra, un aspetto che nessuno ha deciso. La regola sotto le restituisce
   la riga a piena larghezza di prima (git show b89efe6:assets/css/site.css). */
/* pointer-events:none sul piano + auto sui suoi figli diretti (msg-more,
   msg-map, e gli hs/hn di attachPdfBar quando sono presenti): il piano
   accetta di coprire la coda di una riga (F3/R1), ma non deve rubarle il
   clic. none sul contenitore lascia passare al sottostante qualunque punto
   che non sia gia' un pulsante; auto sui figli mantiene i pulsanti stessi
   cliccabili (altrimenti la cura toglierebbe anche quelli). */
.chat-msg.ai:not(.quiz-saved) .msg-tools{position:sticky;top:4px;z-index:2;display:flex;gap:6px;width:fit-content;margin:0 0 9px auto;background:rgba(255,255,255,0.05);pointer-events:none}
.chat-msg.ai:not(.quiz-saved) .msg-tools>*{pointer-events:auto}
.quiz-saved .msg-tools{margin-top:9px}
.msg-pdf{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:var(--text-dim);border-radius:8px;padding:4px 11px;font-size:0.72rem;cursor:pointer}
.msg-pdf:hover{color:#fff;border-color:var(--accent2)}
.msg-more{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:var(--text-dim);border-radius:8px;padding:1px 12px 4px;font-size:1.05rem;line-height:1;cursor:pointer;letter-spacing:1px}
.msg-more:hover{color:#fff;border-color:var(--accent2)}
.msg-map{background:rgba(59,130,246,0.1);border:1px solid rgba(96,165,250,0.35);color:var(--accent2);border-radius:999px;padding:3px 11px;font-size:0.74rem;cursor:pointer;transition:all .2s}
.msg-map:hover{background:rgba(59,130,246,0.2);color:#fff}
.chat-actions{display:flex;gap:8px;margin:0 0 8px;flex-wrap:wrap}
.act-btn{cursor:pointer;background:rgba(59,130,246,0.12);border:1px solid rgba(96,165,250,0.45);color:#fff;border-radius:999px;padding:6px 14px;font-size:0.8rem;letter-spacing:0.02em;transition:all .2s}
.act-btn:hover{background:rgba(59,130,246,0.24)}
.dg-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 4px}
.dg-opt{cursor:pointer;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.16);color:var(--text);border-radius:10px;padding:13px 10px;font-size:0.85rem;transition:all .2s}
.dg-opt:hover{background:rgba(59,130,246,0.16);border-color:var(--accent2);color:#fff}
/* per-formula calculator */
.formula-btn{display:inline-block;margin:8px 4px 0;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);color:var(--text-dim);border-radius:8px;padding:4px 12px;font-size:0.74rem;cursor:pointer}
.formula-btn:hover{color:#fff;border-color:var(--accent2)}
.tts-ctl{position:fixed;left:50%;transform:translateX(-50%);bottom:92px;z-index:600;display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:22px;border:1px solid rgba(255,255,255,0.16);background:#141b2b;color:#e8e8ea;font-size:0.82rem;font-weight:500;cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,0.5)}
.tts-ctl.is-play{color:#ff9a9a;border-color:rgba(255,120,120,0.4)}
.tts-ctl:hover{border-color:var(--accent2)}
.tts-spin{width:13px;height:13px;border:2px solid rgba(255,255,255,0.22);border-top-color:#7aa7ff;border-radius:50%;display:inline-block;animation:ttsspin 0.7s linear infinite}
@keyframes ttsspin{to{transform:rotate(360deg)}}
.mvmenu .mv-sep{height:1px;background:rgba(255,255,255,0.12);margin:5px 8px;padding:0;cursor:default}
.chat-msg{scroll-margin-top:18px}
@media(max-width:768px){ .chat-msg{scroll-margin-top:64px} }
.tts-fx{margin:10px 0;padding:10px 12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:8px}
.tts-fx-lab{font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent2);margin-bottom:6px}
.tts-fx-body{overflow-x:auto;font-size:1.05rem}
.diag-err{color:#ffb4a2;font-size:0.85rem;margin-bottom:8px}
.diag-raw{white-space:pre-wrap;font-family:var(--font-mono,monospace);font-size:0.75rem;color:var(--text-dim);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:10px;overflow-x:auto;margin:0}
.ctx-gen{display:inline-block;margin-top:10px;cursor:pointer;background:rgba(124,58,237,0.15);border:1px solid rgba(167,139,250,0.45);color:#e6dcff;border-radius:10px;padding:7px 14px;font-size:0.76rem;font-weight:600;transition:all .2s}
.ctx-gen:hover{background:rgba(124,58,237,0.28);color:#fff}
.ex-mat{font-size:0.85rem;color:var(--text-dim);margin-bottom:6px}
.ex-lab{display:block;font-size:0.72rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-dim);margin:10px 0 5px}
.ex-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-height:40vh;overflow-y:auto}
.ex-card{text-align:left;cursor:pointer;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);border-radius:10px;padding:10px 12px;color:var(--text)}
.ex-card:hover{border-color:var(--accent2);background:rgba(59,130,246,0.1)}
.ex-t{font-weight:600;font-size:0.85rem;margin-bottom:4px;color:#fff}
.ex-b{font-size:0.82rem;color:var(--text-dim);line-height:1.5}
.ex-err{color:#ffb4a2;font-size:0.85rem}
.ex-load{color:var(--text-dim);font-size:0.85rem;padding:8px 0}
.qz-det-act{margin-top:8px}
.qz-solve{cursor:pointer;background:rgba(59,130,246,0.14);border:1px solid rgba(96,165,250,0.45);color:#dfe7f5;border-radius:8px;padding:5px 12px;font-size:0.74rem;font-weight:600;transition:all .2s}
.qz-solve:hover{background:rgba(59,130,246,0.26);color:#fff}
.fld-preview{margin-top:6px;padding:8px 11px;background:rgba(59,130,246,0.06);border:1px dashed rgba(96,165,250,0.35);border-radius:8px;font-size:0.92rem;color:#eaf1ff;line-height:1.55;overflow-x:auto}
.ctx-tools-bar{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ctx-tools-bar .ctx-gen{margin-top:0}
.inv-search{display:flex;gap:8px;margin:6px 0 10px}
.inv-search #invQ{flex:1;min-width:0}
.inv-title{font-weight:700;color:#fff;margin:6px 0 4px}
.inv-primary{margin:4px 0 10px;overflow-x:auto}
.inv-vars{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.inv-vbtn{cursor:pointer;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);color:#dfe7f5;border-radius:8px;padding:5px 12px;font-size:0.82rem;font-weight:600;min-width:38px}
.inv-vbtn.active{background:rgba(59,130,246,0.28);border-color:var(--accent2);color:#fff}
.inv-fwrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0}
.inv-formula{flex:1;min-width:0;overflow-x:auto}
.inv-copy{cursor:pointer;background:rgba(124,58,237,0.15);border:1px solid rgba(167,139,250,0.45);color:#e6dcff;border-radius:8px;padding:5px 12px;font-size:0.74rem;font-weight:600;white-space:nowrap}
.inv-steps{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:8px 12px;margin:8px 0}
.inv-steps-h{font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent2);margin-bottom:6px}
.inv-step{font-size:0.88rem;color:#eaf1ff;line-height:1.6;padding:2px 0}
.uc-row{display:flex;align-items:flex-end;gap:12px;margin-top:6px}
.uc-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.uc-col .dc-input{width:100%}
.uc-eq{font-size:1.3rem;color:var(--text-dim);padding-bottom:8px}
.uc-res{background:rgba(59,130,246,0.1);font-weight:600;color:#fff}
@media(max-width:600px){ .uc-row{flex-direction:column;align-items:stretch} .uc-eq{text-align:center;padding:2px 0} }
.dd-pick{width:100%;min-width:0;margin:2px 0 14px}
.dd-pick .dd-btn{font-size:0.92rem;padding:11px 13px}
.dd-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-search{width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);border-radius:8px;color:#fff;padding:7px 10px;font:inherit;font-size:0.85rem;margin-bottom:6px}
.dd-search:focus{outline:none;border-color:var(--accent2)}
.dd-opts{max-height:180px;overflow-y:auto}
.dd-pick .dd-opt.sel{background:rgba(59,130,246,0.18);color:#fff}
.dd-custom{color:var(--accent2)!important;font-weight:600}
.dd-empty{padding:7px 11px;color:var(--text-dim);font-size:0.85rem}
.uc-explain-btn{display:inline-flex;align-items:center;gap:7px;margin-top:14px;cursor:pointer;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.16);color:#cfe0ff;border-radius:10px;padding:9px 16px;font-size:0.82rem;font-weight:600;letter-spacing:0.01em;transition:all .2s}
.uc-explain-btn:hover{background:rgba(59,130,246,0.16);border-color:var(--accent2);color:#fff}
.uc-hint{margin-top:8px;font-size:0.78rem;color:var(--text-dim);line-height:1.4}
.uc-hint b{color:#cfe0ff;font-weight:600}
/* Language switcher: on the chat page it must stay in the header (the marketing site tucks it into the hamburger, which the chat hides). */
/* La bandiera e il sandwich sono due pulsanti accanto: stessa quota e un
   margine fra loro. Il sandwich occupa da 14 a 58 contando da destra, quindi
   con la bandiera a 58 si TOCCAVANO; a 66 restano otto pixel di respiro.
   La quota e' 4px + safe-area, la stessa del sandwich: cosi' i due fondi sono
   allineati e restano dentro l'intestazione. Chiesto il 17 set 2026. */
@media(max-width:1279px){ body.chat-page #header .lang-switch:not(.lang-switch-mobile){ display:inline-flex!important; position:fixed; top:calc(4px + env(safe-area-inset-top)); right:66px; z-index:4001; margin:0; } }
.uc-explain{margin-top:10px;padding:10px 12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:8px;font-size:0.86rem;color:#eaf1ff;line-height:1.55}
.fx-formula{text-align:center;margin:4px 0 14px;overflow-x:auto}
.fx-note{color:var(--text-dim);font-size:0.82rem;line-height:1.55;margin:0 0 16px;padding:9px 12px;background:rgba(255,255,255,0.03);border-left:2px solid var(--accent2);border-radius:6px}
.fx-vars{display:flex;flex-direction:column;gap:11px}
.fx-row{display:flex;flex-direction:column;gap:4px}
.fx-row label{font-size:0.82rem;color:var(--text-dim)}
.fx-row .fx-u{color:var(--accent2)}
.fx-in{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);border-radius:9px;color:#fff;padding:9px 11px;font:inherit;font-size:0.92rem;color-scheme:dark}
.fx-in:focus{outline:none;border-color:var(--accent2)}
.fx-result{margin:18px 0 4px;padding:13px 15px;background:rgba(59,130,246,0.1);border:1px solid rgba(96,165,250,0.4);border-radius:12px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.fx-result .fx-rl{color:var(--text-dim);font-size:0.85rem}
.fx-result .fx-rv{color:#fff;font-size:1.45rem;font-weight:700;font-family:var(--font-mono,monospace)}
.fx-result .fx-ru{color:var(--accent2)}
.verif{margin-top:10px;border-radius:10px;padding:11px 13px;font-size:0.86rem;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);border-left:3px solid var(--text-dim)}
.verif-affidabile{border-left-color:#22c55e}
.verif-attenzione{border-left-color:#f59e0b}
.verif-errori{border-left-color:#ef4444}
.verif-h{display:flex;align-items:center;gap:8px;font-weight:600;color:#fff;margin-bottom:5px}
.verif-dot{color:var(--text-dim)}
.verif-affidabile .verif-dot{color:#22c55e}.verif-attenzione .verif-dot{color:#f59e0b}.verif-errori .verif-dot{color:#ef4444}
.verif-sint{color:var(--text);line-height:1.55}
.verif-ok{color:#86efac;margin-top:3px}
.verif-issue{margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,0.08)}
.verif-issue .vi-p{color:#fff;font-weight:500}
.verif-issue .vi-x{color:var(--text-dim);margin-top:2px;line-height:1.5}
.verif-issue .vi-x b{color:var(--accent2);font-weight:500}
.verif-by{margin-top:9px;font-size:0.7rem;color:var(--text-dim);opacity:0.8}
/* context form (specialized chat) */
.ctx-form{max-width:720px;margin:0 auto;padding:2px 2px 8px;overflow-y:auto;max-height:64vh;max-height:64dvh;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px 14px;align-content:start}
.ctx-form .ctx-head,.ctx-form .ctx-start{grid-column:1/-1}
@media(max-width:560px){
  .ctx-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctx-form .fld{grid-column:span 1!important}
  .ctx-form .fld[style*="span 6"]{grid-column:1/-1!important}
  .ctx-form .dd{width:auto;min-width:0;max-width:none}
  .ctx-form .dd-opt{white-space:normal;line-height:1.35}
  .ctx-form .dd-btn{gap:6px}
}
/* smartphone: compatta l'header della chat (titolo piccolo, Conversazioni+FREE+Crediti su una riga) */
@media(max-width:600px){
  body.chat-page .dash-head{gap:8px;margin:4px 0 4px}
  body.chat-page .dash-head .section-label{display:none}
  body.chat-page #title{font-size:1.2rem!important;line-height:1.2}
  body.chat-page .chat-topctl{gap:8px}
  body.chat-page .chat-topctl .chat-burger{padding:6px 11px;font-size:0.72rem}
  body.chat-page .credit-pill{font-size:0.72rem;padding:6px 11px;gap:6px}
  body.chat-page .plan-badge{padding:4px 8px}
  body.chat-page main.page > section{padding-top:58px;padding-left:10px !important;padding-right:10px !important}
  body.chat-page .wrap{max-width:100%;padding:0}
  body.chat-page header{padding-left:12px;padding-right:12px}
}
.ctx-form .ctx-head{margin-bottom:2px}
.ctx-form .ctx-head h2{font-size:1.1rem;color:#fff;font-weight:500;margin:0 0 2px}
.ctx-form .ctx-head p{font-size:0.8rem;color:var(--text-dim);margin:0;line-height:1.45}
.ctx-form .fld{margin-bottom:0}
.ctx-form .fld>label{display:block;font-size:0.72rem;color:var(--text-dim);margin-bottom:3px;letter-spacing:0.03em}
.ctx-form input[type=text],.ctx-form textarea,.ctx-form select{width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);border-radius:10px;color:#fff;padding:8px 10px;font:inherit;font-size:0.87rem}
.ctx-form input:focus,.ctx-form textarea:focus,.ctx-form select:focus{outline:none;border-color:var(--accent2)}
.ctx-form textarea{resize:vertical;min-height:50px}
.ctx-form .toggle{display:flex;align-items:center;cursor:pointer;color:#fff;font-size:0.85rem;padding-top:22px}
.ctx-form .toggle input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.ctx-form .toggle .sw{display:inline-block;position:relative;flex:0 0 auto;margin-right:12px;width:46px;height:26px;background:linear-gradient(180deg,#2a3445,#1b2230);border:1px solid rgba(255,255,255,0.14);border-radius:999px;box-shadow:inset 0 1px 3px rgba(0,0,0,0.55);transition:background .25s,border-color .25s}
.ctx-form .toggle .sw::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:linear-gradient(180deg,#ffffff,#dde4ee);box-shadow:0 1px 2px rgba(0,0,0,0.55),0 2px 6px rgba(0,0,0,0.3);transition:transform .25s}
.ctx-form .toggle input:checked+.sw{background:linear-gradient(180deg,#4f9bff,#2563eb);border-color:rgba(96,165,250,0.6)}
.ctx-form .toggle input:checked+.sw::after{transform:translateX(20px)}
.ctx-form .toggle input:focus-visible+.sw{outline:2px solid var(--accent2);outline-offset:2px}
.ctx-form .toggle .tl{line-height:1.3}
.ctx-form .note{font-size:0.72rem;color:var(--text-dim);margin-top:5px}
.ctx-form .filebox{border:1px dashed rgba(255,255,255,0.18);border-radius:10px;padding:14px;color:var(--text-dim);font-size:0.85rem;opacity:0.65;display:flex;align-items:center;justify-content:space-between;gap:10px}
.ctx-form .soon{font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;border:1px solid rgba(255,255,255,0.2);border-radius:4px;padding:3px 7px}
.ctx-actions{grid-column:1/-1;display:flex;gap:8px;margin-top:2px;position:sticky;bottom:0;background:var(--bg,#0a0e15);padding:10px 0 4px;z-index:3}
.ctx-start{flex:1;min-width:0;border:none;cursor:pointer;background:linear-gradient(135deg,var(--accent),#2563eb);color:#fff;border-radius:11px;padding:8px;font-size:0.72rem;letter-spacing:0.07em;text-transform:uppercase;font-weight:600}
.ctx-back{flex:0 0 auto;cursor:pointer;background:transparent;border:1px solid rgba(255,255,255,0.16);color:var(--text-dim);border-radius:11px;padding:8px 14px;font-size:0.72rem;white-space:nowrap;transition:all .2s}
.ctx-tools{flex:0 0 auto;cursor:pointer;background:rgba(59,130,246,0.12);border:1px solid rgba(96,165,250,0.4);color:#dfe7f5;border-radius:11px;padding:8px 14px;font-size:0.72rem;font-weight:600;white-space:nowrap;transition:all .2s}
.ctx-tools:hover{background:rgba(59,130,246,0.2);color:#fff}
math-field{max-width:100%;box-sizing:border-box;color:#e8e8ea!important;--caret-color:#7aa7ff;--selection-background-color:rgba(120,160,255,.28);--contains-highlight-background-color:rgba(120,160,255,.2);--placeholder-color:#9aa4bb;--placeholder-opacity:0.7;--primary-color:#7aa7ff;--text-font-family:inherit}
math-field::part(content){color:#e8e8ea}
.ctx-form math-field{width:100%;display:block}
.ctx-form{overflow-x:hidden}
.ctx-form input.mf-plain{width:100%;min-height:42px;font-size:1rem}
.mf-hint{font-size:0.7rem;color:var(--text-dim);font-weight:400;letter-spacing:0}
.mf-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mf-tools button{cursor:pointer;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);color:#dfe7f5;border-radius:8px;padding:7px 12px;font-size:1rem;line-height:1;min-width:40px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mf-tools button:active{background:rgba(59,130,246,0.28)}
@media(hover:hover){.mf-tools button:hover{background:rgba(59,130,246,0.18);color:#fff;border-color:rgba(59,130,246,0.4)}}
.ctx-back:hover{color:#fff;border-color:rgba(255,255,255,0.32)}
.ctx-form input[type=file]{width:100%;font-size:0.8rem;color:var(--text-dim);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);border-radius:10px;padding:8px}
.ctx-range{width:100%;accent-color:var(--accent);margin-top:5px;cursor:pointer}
.rng-val{color:var(--accent2);font-family:var(--font-mono,monospace);font-weight:600}
/* field help tooltips */
.help{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1px solid rgba(255,255,255,0.32);color:var(--text-dim);font-size:0.64rem;font-weight:700;line-height:1;cursor:pointer;margin-left:6px;vertical-align:middle;flex-shrink:0;user-select:none}
.help:hover{color:#fff;border-color:var(--accent2)}
.tip-pop{position:fixed;z-index:240;max-width:270px;background:#0b1018;border:1px solid rgba(255,255,255,0.18);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,0.5);padding:10px 13px;color:var(--text);font-size:0.82rem;line-height:1.5}
/* verify-auto chip in the input controls */
.vchip{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:0.7rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-dim);border:1px solid rgba(255,255,255,0.14);border-radius:999px;padding:5px 11px;background:rgba(255,255,255,0.04)}
.vchip.on{color:#fff;border-color:var(--accent2);background:rgba(59,130,246,0.14)}
.vchip .vdot{width:8px;height:8px;border-radius:50%;background:var(--text-dim);flex-shrink:0}
.vchip.on .vdot{background:#22c55e}
/* generic on-brand modal */
.dc-modal{position:fixed;inset:0;z-index:200;background:rgba(4,8,16,0.66);display:flex;align-items:center;justify-content:center;padding:20px}
.dc-modal-box{position:relative;background:#0c121d;border:1px solid rgba(255,255,255,0.14);border-radius:16px;max-width:460px;width:100%;padding:26px;box-shadow:0 24px 60px rgba(0,0,0,0.5);max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto}
.dc-modal-x{position:sticky;top:0;margin:0 0 2px auto;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(20,27,43,0.92);border:1px solid rgba(255,255,255,0.16);border-radius:8px;color:#cfe0ff;font-size:0.95rem;line-height:1;cursor:pointer;z-index:5}
.dc-modal-x:hover{background:rgba(255,90,90,0.22);border-color:rgba(255,120,120,0.5);color:#fff}
#dcSplash{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a0a0a 0%,#101a3a 45%,#0b2a6b 100%)}
#dcSplash.show{display:flex}
#dcSplash.hide{opacity:0;pointer-events:none;transition:opacity .5s ease}
#dcSplash .dcs-inner{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px}
#dcSplash .dcs-logo{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 8px 34px rgba(59,130,246,0.45));animation:dcsPulse 1.6s ease-in-out infinite}
#dcSplash .dcs-name{color:#fff;font-weight:700;font-size:1.05rem;letter-spacing:0.02em}
#dcSplash .dcs-bar{width:130px;height:3px;border-radius:3px;background:rgba(255,255,255,0.12);overflow:hidden}
#dcSplash .dcs-bar i{display:block;height:100%;width:38%;border-radius:3px;background:linear-gradient(90deg,#2563eb,#06b6d4)}
#dcSplash.show .dcs-bar i{animation:dcsBar 1.05s ease-in-out infinite}
#dcSplash .dcs-by{position:absolute;bottom:40px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px}
#dcSplash .dcs-by span{color:rgba(255,255,255,0.45);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase}
#dcSplash .dcs-by img{width:142px;height:auto;object-fit:contain;opacity:0.92}
.app-notice{position:fixed;left:0;right:0;bottom:0;z-index:6000;display:flex;flex-direction:column;gap:8px;padding:10px 10px calc(10px + env(safe-area-inset-bottom));pointer-events:none}
.app-notice .an-row{pointer-events:auto;max-width:560px;margin:0 auto;width:100%;display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#0e1830,#0b1220);border:1px solid #23324e;border-radius:12px;padding:11px 12px;box-shadow:0 10px 30px rgba(0,0,0,.45);color:#e8eef7;font-size:0.9rem}
.app-notice .an-msg{flex:1;line-height:1.35}
.app-notice .an-act{flex:none;background:linear-gradient(90deg,#3b82f6,#2563eb);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-weight:700;font-size:0.85rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
.app-notice .an-x{flex:none;background:transparent;border:none;color:#8aa0c2;font-size:1rem;cursor:pointer;padding:4px 6px;line-height:1}
.app-notice .an-x:hover{color:#e8eef7}
/* Installed app (PWA/TWA): keep it focused on Minerva — no links wandering to the marketing site. */
@media (display-mode: standalone){
  body.chat-page #header .logo{pointer-events:none}
}
@keyframes dcsPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes dcsBar{0%{transform:translateX(-130%)}100%{transform:translateX(340%)}}
/* I 70px erano 56 in alto + 12 in basso, e non sapevano della striscia della
   versione, che e' FISSA in fondo: una finestra alta ci finiva sotto per gli
   ultimi pixel, e siccome la pagina dietro non scorre, quei pixel non si
   raggiungevano. Visto il 17 set 2026 su «Adatta per i tuoi studenti», che e'
   il pannello piu' lungo: arrivava 47px sotto il bordo della striscia.
   Adesso la striscia entra nel conto, in tutte e due le misure. */
/* I DUE BORDI DELLA FINESTRA, legati alle cose che li stringono.
   In alto l'intestazione: sulla pagina della chat e' alta 52px PIU' la
   safe-area (vedi `body.chat-page header`), cioe' una sessantina di pixel in
   piu' sul telefono. Con un margine fisso di 56px la finestra partiva SOTTO
   l'intestazione, e con lei la × per chiudere — che essendo appiccicata in cima
   alla finestra non tornava su nemmeno scorrendo tutto. Segnalato il 17 set
   2026 su «Adatta per i tuoi studenti».
   In basso la striscia della versione, per la ragione dell'altra correzione.
   L'altezza massima sottrae ENTRAMBE: aggiungere spazio sopra senza togliere
   altezza sposta solo il problema in fondo — successo, e misurato.
   `--testata-app` la misura l'app (app.js); il ripiego nel CSS vale lo stesso
   conto, per quando quel codice non gira. */
@media(max-width:600px){
  .dc-modal{align-items:flex-start;
    padding:calc(var(--testata-app, calc(56px + env(safe-area-inset-top))) + 8px) 10px calc(12px + var(--striscia-versione, 0px))}
  .dc-modal-box{padding:18px 18px 20px;
    max-height:calc(100dvh - var(--testata-app, calc(56px + env(safe-area-inset-top))) - 20px - var(--striscia-versione, 0px))!important}
}
.dc-modal-box h3{margin:0 0 10px;color:#fff;font-size:1.15rem;font-weight:600}
.dc-modal-box p{margin:0 0 18px;color:var(--text-dim);font-size:0.9rem;line-height:1.6}
.dc-check{display:flex;align-items:center;gap:9px;color:var(--text-dim);font-size:0.84rem;cursor:pointer;margin:-4px 0 16px}
.dc-check input{width:16px;height:16px;accent-color:var(--accent);flex-shrink:0}
.dc-input{width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.16);border-radius:10px;color:#fff;padding:11px 13px;font:inherit;font-size:0.95rem;margin:2px 0 18px}
.dc-input:focus{outline:none;border-color:var(--accent2)}
.dc-modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
/* La riga dei comandi di un pannello che SCORRE (.dc-modal-box.wide ha
   max-height:88vh e overflow-y:auto): appena l'esito compare, i pulsanti
   scendono in fondo alla scatola e su telefono l'ultimo passo del percorso -
   «Scarica in PDF» - nasce fuori schermo, senza niente che porti l'occhio li'.
   Appiccicata in fondo resta sempre raggiungibile mentre si legge. Il
   `bottom` negativo compensa il padding inferiore della scatola (26px, 20px
   sotto i 600px): con bottom:0 resterebbe una fessura in cui si vedrebbe
   scorrere il testo sotto i pulsanti. Classe a parte, non .dc-modal-actions:
   le altre modali non scorrono e non devono cambiare. */
.lez-actions{position:sticky;bottom:-26px;background:#0c121d;padding:10px 0;margin-top:6px}
/* L'esito nasceva ATTACCATO al campo «Materia», e «Obiettivi:» — che e' la
   prima riga del piano — sembrava l'etichetta di quel campo. Il distacco si fa
   con `:not(:empty)` e non con una classe da accendere dal codice: prima della
   prima preparazione il contenitore e' vuoto e non deve disegnare nessuna
   riga, e il CSS lo sa da solo senza che nessuno si ricordi di spegnerla. */
.lez-esito:not(:empty){border-top:1px solid rgba(255,255,255,0.14);margin-top:18px;padding-top:16px}
@media(max-width:600px){ .lez-actions{bottom:-20px} }
.dc-btn{border:none;cursor:pointer;border-radius:10px;padding:10px 18px;font-size:0.82rem;font-weight:600}
.dc-btn-primary{background:linear-gradient(135deg,var(--accent),#2563eb);color:#fff}
.dc-btn-ghost{background:rgba(255,255,255,0.06);color:var(--text-dim);border:1px solid rgba(255,255,255,0.14);text-decoration:none;display:inline-block}
/* upsell: low-credit banner + plan-comparison modal */
.ups-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;padding:8px 14px;border-radius:10px;background:linear-gradient(90deg,rgba(94,124,255,.16),rgba(94,124,255,.06));border:1px solid rgba(94,124,255,.35);color:var(--text)}
.ups-banner-cta{border:0;border-radius:999px;padding:6px 14px;font-weight:600;cursor:pointer;color:#fff;background:var(--accent2,#5e7cff)}
.ups-modal{max-width:520px}
.ups-offer{margin:6px 0 10px;padding:8px 12px;border-radius:8px;background:rgba(94,124,255,.12);font-size:.9rem}
.ups-toggle{display:inline-flex;border:1px solid rgba(255,255,255,.18);border-radius:999px;overflow:hidden;margin-bottom:12px}
.ups-toggle button{border:0;background:transparent;color:var(--text-dim);padding:6px 16px;cursor:pointer}
.ups-toggle button.on{background:var(--accent2,#5e7cff);color:#fff}
.ups-plans{display:flex;flex-direction:column;gap:10px}
.ups-plan{display:flex;flex-direction:column;gap:2px;text-align:left;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);cursor:pointer}
.ups-plan:hover{border-color:var(--accent2,#5e7cff)}
.ups-price{color:var(--accent2,#5e7cff);font-weight:600}
.ups-cr{color:var(--text-dim);font-size:.85rem}
/* interactive test */
.dc-modal-box.wide{max-width:640px;max-height:88vh;overflow-y:auto}
.qz-setup label{display:block;color:var(--text-dim);font-size:0.8rem;margin:12px 0 5px}
.qz-num,.qz-sel{width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);border-radius:10px;color:#fff;padding:9px 11px;font:inherit;font-size:0.9rem;color-scheme:dark}
.qz-sel option{background:#0c121d;color:#fff}
/* generic switch (usable outside the form) */
.swrow{display:flex;align-items:center;gap:11px;cursor:pointer;color:#fff;font-size:0.9rem;margin-top:14px}
.swrow input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.swrow .sw{display:inline-block;position:relative;flex:0 0 auto;width:46px;height:26px;background:linear-gradient(180deg,#2a3445,#1b2230);border:1px solid rgba(255,255,255,0.14);border-radius:999px;box-shadow:inset 0 1px 3px rgba(0,0,0,0.55);transition:background .25s}
.swrow .sw::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:linear-gradient(180deg,#fff,#dde4ee);box-shadow:0 1px 2px rgba(0,0,0,0.55);transition:transform .25s}
.swrow input:checked+.sw{background:linear-gradient(180deg,#4f9bff,#2563eb);border-color:rgba(96,165,250,0.6)}
.swrow input:checked+.sw::after{transform:translateX(20px)}
.qz-x{background:none;border:none;color:var(--text-dim);font-size:1.1rem;cursor:pointer;line-height:1;padding:2px 6px}
.qz-x:hover{color:#fff}
.qz-loading{color:var(--text-dim);text-align:center;padding:28px 16px;max-width:320px;margin:0 auto;border-radius:12px}
.qz-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.qz-prog{font-size:0.78rem;letter-spacing:0.06em;color:var(--accent2);font-family:var(--font-mono,monospace)}
.qz-bar{height:6px;border-radius:999px;background:rgba(255,255,255,0.1);overflow:hidden;margin:8px 0 2px}
.qz-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e)}
.qz-bar.total i{background:var(--accent2)}
.qz-q{font-size:1.02rem;color:#fff;font-weight:500;margin:16px 0 13px;line-height:1.5}
.qz-opts{display:flex;flex-direction:column;gap:9px}
.qz-opt{text-align:left;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);color:var(--text);border-radius:10px;padding:11px 14px;cursor:pointer;font-size:0.92rem;line-height:1.4}
.qz-opt:hover{border-color:var(--accent2);background:rgba(59,130,246,0.12);color:#fff}
.qz-dunno{margin-top:10px;width:100%;background:none;border:1px dashed rgba(255,255,255,0.22);color:var(--text-dim);border-radius:10px;padding:10px;cursor:pointer;font-size:0.85rem}
.qz-dunno:hover{color:#fff;border-color:var(--text-dim)}
.qz-voto{font-size:2.1rem;font-weight:700;color:#fff;margin-top:4px}
.qz-score{color:var(--text-dim);font-size:0.88rem;margin:2px 0 10px}
.qz-sec{margin-top:14px}
.qz-sec h4{margin:0 0 6px;font-size:0.78rem;color:var(--accent2);text-transform:uppercase;letter-spacing:0.06em}
.qz-sec ul{margin:0;padding-left:18px;color:var(--text);font-size:0.88rem;line-height:1.6}
.qz-det{margin-top:9px;border-top:1px solid rgba(255,255,255,0.08);padding-top:9px;font-size:0.85rem;color:var(--text);line-height:1.5}
.qz-det .e-corretta{color:#86efac;font-weight:600}.qz-det .e-errata{color:#fca5a5;font-weight:600}.qz-det .e-non{color:#fcd34d;font-weight:600}
.qz-img{margin:4px 0 12px;text-align:center}
.qz-img img{max-width:100%;max-height:300px;border-radius:10px;border:1px solid rgba(255,255,255,0.1)}
.qz-img.sm{margin:8px 0;text-align:left}
.qz-img.sm img{max-height:150px}
.qz-cred{display:block;margin-top:4px;font-size:0.68rem;color:var(--text-dim)}
.qz-diag{margin:4px 0 12px}
.quiz-saved{border:1px solid rgba(96,165,250,0.25);background:rgba(59,130,246,0.06);border-radius:14px;padding:16px 18px;max-width:none}
.quiz-saved h3{margin:4px 0 0;font-size:1.05rem}
.qz-saved-h{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--accent2);font-weight:700}
/* usage report (/area) */
.usage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-top:16px}
.usage-cell{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:14px 16px}
.usage-cell .uc-lbl{font-size:0.8rem;color:var(--text-dim)}
.usage-cell .uc-cr{font-size:1.5rem;color:#fff;font-weight:600;margin:5px 0 2px}
.usage-cell .uc-n{font-size:0.7rem;color:var(--text-dim)}
.usage-h{font-size:0.82rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--accent2);margin:26px 0 4px}
.usage-list{border-top:1px solid rgba(255,255,255,0.08)}
.usage-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 2px;border-bottom:1px solid rgba(255,255,255,0.06);font-size:0.88rem}
.usage-row .ur-l{color:var(--text)}
.usage-row .ur-d{color:var(--text-dim);font-size:0.78rem;margin-left:6px}
.usage-row .ur-c{color:var(--accent2);font-family:var(--font-mono,monospace);flex-shrink:0}
/* attachments */
.att-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.att-thumb{width:74px;height:74px;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,0.18)}
.att-doc{font-size:0.78rem;color:var(--text-dim);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:6px 10px}
.chat-attach{flex-shrink:0;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);color:#fff;border-radius:12px;padding:0 14px;cursor:pointer;font-size:1.1rem;line-height:1}
.chat-attach.has{border-color:var(--accent2);color:var(--accent2)}
/* pending attachments (drag/paste/picker) + drop target */
.pend-box{display:none;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.pend-chip{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:9px;padding:5px 6px;font-size:0.76rem;color:var(--text-dim);max-width:190px}
.pend-chip .pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pend-chip .px{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:1.05rem;line-height:1;padding:0 2px}
.pend-chip .px:hover{color:#fff}
.chat-main.drag{outline:2px dashed rgba(96,165,250,0.65);outline-offset:-6px;border-radius:12px;background:rgba(59,130,246,0.04)}
/* on-brand dropdown (inline-expanding, no clipping inside scroll areas) */
.dd{position:relative;width:max-content;max-width:100%;min-width:150px}
.dd-btn{width:100%;text-align:left;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);border-radius:10px;color:#fff;padding:8px 10px;font:inherit;font-size:0.87rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px}
.dd-btn.placeholder{color:var(--text-dim)}
.dd-btn .dd-caret{color:var(--accent2);font-size:0.62rem;transition:transform .2s}
.dd.open .dd-btn{border-color:var(--accent2)}
.dd.open .dd-btn .dd-caret{transform:rotate(180deg)}
/* list stays in flow (collapsed) so .dd sizes to the longest option */
.dd-list{background:rgba(10,16,26,0.6);border:0;border-radius:10px;max-height:0;overflow:hidden;padding:0 5px;opacity:0;pointer-events:none;min-width:100%}
.dd.open .dd-list{margin-top:6px;border:1px solid rgba(255,255,255,0.14);max-height:230px;overflow:auto;padding:5px;opacity:1;pointer-events:auto}
.dd-opt{padding:7px 11px;border-radius:7px;color:var(--text-dim);font-size:0.86rem;cursor:pointer;white-space:nowrap}
.dd-opt:hover{background:rgba(59,130,246,0.16);color:#fff}
.dd-opt.sel{background:rgba(59,130,246,0.12);color:#fff}
/* re-elaborate (back to form with new params) */
.chat-redo{align-self:flex-start;background:rgba(255,255,255,0.05);border:1px solid rgba(96,165,250,0.4);color:var(--accent2);border-radius:9px;padding:8px 14px;font-size:0.8rem;cursor:pointer;margin-bottom:12px}
.chat-redo:hover{background:rgba(59,130,246,0.14);color:#fff}
/* chat shell with sidebar */
.chat-shell{display:flex;gap:18px;border-top:1px solid rgba(255,255,255,0.08);margin-top:12px}
.chat-side{width:240px;flex-shrink:0;padding-top:14px;border-right:1px solid rgba(255,255,255,0.08);display:flex;flex-direction:column}
.chat-new{width:100%;cursor:pointer;border:1px solid rgba(96,165,250,0.5);background:rgba(59,130,246,0.12);color:#fff;border-radius:10px;padding:10px 12px;font-size:0.82rem;letter-spacing:0.04em;transition:all .2s}
.chat-new:hover{background:rgba(59,130,246,0.22)}
.conv-list{display:flex;flex-direction:column;gap:2px;margin-top:12px;max-height:52vh;overflow-y:auto;min-width:0}
.conv-item{display:flex;align-items:flex-start;gap:4px;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--text-dim);font-size:0.85rem;min-width:0}
.conv-item:hover{background:rgba(255,255,255,0.05);color:#fff}
.conv-item.active{background:rgba(59,130,246,0.16);color:#fff}
.conv-item .t{flex:1;min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;line-height:1.35;word-break:break-word}
.conv-item .act{opacity:0.5;background:none;border:none;color:inherit;cursor:pointer;font-size:0.9rem;padding:2px 4px;line-height:1}
.conv-item:hover .act{opacity:0.8}
.conv-item .act:hover{opacity:1;color:var(--accent2)}
/* cartelle (folders) */
.chat-newfolder{margin-top:8px;background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.14);color:var(--text-dim);font-size:0.78rem}
.chat-newfolder:hover{background:rgba(255,255,255,0.08);color:#fff}
.rag-link{margin-top:5px;font-size:0.72rem}
.rag-link a{color:var(--accent2);text-decoration:none}
.rag-link a:hover{text-decoration:underline}
.rag-badge{margin-top:9px;font-size:0.73rem;color:var(--text-dim);background:rgba(59,130,246,0.08);border:1px solid rgba(96,165,250,0.25);border-radius:8px;padding:5px 10px;display:inline-block}
.verif-done{margin-top:9px;font-size:0.73rem;color:#86efac;background:rgba(34,197,94,0.08);border:1px solid rgba(134,239,172,0.3);border-radius:8px;padding:5px 10px;display:inline-block}
.rag-modal-body{font-size:0.9rem;line-height:1.55;color:var(--text)}
.rag-modal-body p{margin:0 0 10px}
.rag-box{border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:22px 24px;background:rgba(255,255,255,0.02)}
.rag-form{margin-top:16px;display:flex;flex-direction:column;gap:12px;max-width:640px}
.rag-form input[type=file]{color:var(--text-dim);font-size:0.85rem}
.rag-form textarea{width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);border-radius:9px;color:#fff;padding:9px 11px;font:inherit;font-size:0.88rem;resize:vertical}
.rag-form textarea:focus{outline:none;border-color:var(--accent2)}
.rag-subjects{display:flex;flex-wrap:wrap;gap:8px 14px}
.rag-subj{font-size:0.82rem;color:var(--text);display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.rag-form-actions{display:flex;align-items:center;gap:14px}
.rag-status{font-size:0.82rem;color:var(--text-dim)}
.rag-list{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.rag-item{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:12px 14px;background:rgba(255,255,255,0.02)}
.rag-item-name{font-weight:600;color:#fff;font-size:0.92rem}
.rag-item-note{color:var(--text);font-size:0.82rem;margin-top:3px}
.rag-item-meta{color:var(--text-dim);font-size:0.76rem;margin-top:4px;text-transform:capitalize}
.rag-del{flex-shrink:0;cursor:pointer;background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.4);color:#fca5a5;border-radius:8px;padding:6px 12px;font-size:0.78rem;transition:all .2s}
.rag-del:hover{background:rgba(248,113,113,0.2);color:#fff}
.rag-fd-list{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow-y:auto;margin-bottom:6px}
.rag-fd-item{display:flex;align-items:flex-start;gap:9px;font-size:0.86rem;color:var(--text);cursor:pointer;padding:7px 9px;border:1px solid rgba(255,255,255,0.1);border-radius:8px}
.rag-fd-item:hover{border-color:var(--accent2)}
.rag-fd-item input{margin-top:3px}
.rag-fd-sub{color:var(--text-dim);font-size:0.8rem}
.qz-rag{font-size:0.72rem;color:var(--accent2);margin:-2px 0 8px}
.rag-acro{color:var(--text-dim)}
.rag-mm-desc{color:var(--text-dim);font-size:0.85rem;margin:2px 0 14px}
.rag-mm-empty{color:var(--text-dim);font-size:0.85rem;margin:14px 0 0}
.dc-modal-box.wide .rag-form{max-width:none}
.buy-box{border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:22px 24px;background:rgba(255,255,255,0.02)}
.buy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:18px}
.buy-card{position:relative;border:1px solid rgba(255,255,255,0.12);border-radius:14px;padding:22px 18px 20px;background:rgba(255,255,255,0.025);text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color .2s,transform .2s}
.buy-card:hover{border-color:var(--accent2);transform:translateY(-2px)}
.buy-card.pop{border-color:rgba(58,160,255,0.55);background:rgba(58,160,255,0.06)}
.buy-pop{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,#1e62d0,#3aa0ff);color:#fff;font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;padding:3px 11px;border-radius:999px;white-space:nowrap}
.buy-name{font-size:0.82rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim)}
.buy-cr{font-size:2rem;font-weight:700;color:#fff;line-height:1.05}
.buy-cr span{display:block;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);font-weight:400;margin-top:2px}
.buy-price{font-size:1.15rem;font-weight:600;color:var(--accent2);margin-top:4px}
.buy-ppc{font-size:0.72rem;color:var(--text-dim)}
.buy-btn{margin-top:12px;width:100%}
.buy-banner{border-radius:12px;padding:13px 18px;font-size:0.9rem;border:1px solid}
.buy-banner.ok{background:rgba(52,211,153,0.1);border-color:rgba(52,211,153,0.4);color:#6ee7b7}
.buy-banner.warn{background:rgba(251,191,36,0.1);border-color:rgba(251,191,36,0.4);color:#fcd34d}
.buy-note{color:var(--text-dim);font-size:0.78rem;margin-top:14px}
.buy-price small{font-size:0.72rem;color:var(--text-dim);font-weight:400}
.sub-active{margin-top:8px}
.sub-cur{border:1px solid rgba(58,160,255,0.4);background:rgba(58,160,255,0.06);border-radius:14px;padding:20px 22px;max-width:460px}
.sub-cur-name{font-size:1.4rem;font-weight:700;color:#fff;margin-top:2px}
.sub-cur-allow{margin-top:12px;color:var(--text);font-size:0.95rem}
.sub-cur-allow b{color:var(--accent2);font-size:1.2rem}
.sub-cur-ren{margin-top:6px;color:var(--text-dim);font-size:0.82rem}
.chat-back-menu{display:block;text-align:center;text-decoration:none;margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,0.08);color:var(--text-dim);font-size:0.78rem;letter-spacing:0.02em;transition:color .2s}
.chat-back-menu:hover{color:var(--accent2)}
/* I due pulsanti in cima all'app (sito, esci). Nascono dalla stessa forma del
   menu ma NON dalla sua regola: .chat-burger e' display:none sopra i 1024px
   (li' la barra laterale c'e' gia'), e questi devono vedersi sempre. Sotto i
   620 pixel restano le sole icone: quella barra ospita gia' menu, conversazioni,
   piano e crediti. */
a.chat-top-out,a.chat-top-out:link,a.chat-top-out:visited{color:#fff;text-decoration:none}
.chat-top-out{display:inline-flex!important;align-items:center;gap:5px;white-space:nowrap;cursor:pointer;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);color:#fff;border-radius:8px;
  padding:7px 12px;font-size:0.8rem;margin-bottom:0;text-decoration:none;transition:background .2s,border-color .2s}
.chat-top-out:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.28);color:#fff}
@media(max-width:620px){.chat-top-out span{display:none}.chat-top-out{padding:7px 9px}}
/* Il pulsante dei comandi e' l'unico modo, su computer, per arrivare a
   parametri, test, sostegno e consumi: si vede piu' degli altri e la scritta
   resta anche stretti, altrimenti resta un'icona che nessuno prova. */
.chat-top-out.cmd{border-color:rgba(58,160,255,0.55);background:rgba(58,160,255,0.14);font-weight:600}
.chat-top-out.cmd:hover{background:rgba(58,160,255,0.24);border-color:var(--accent2)}
@media(max-width:620px){.chat-top-out.cmd span{display:inline}.chat-top-out.cmd{padding:7px 12px}}
/* padding a tre soli lati (non solo padding-top): "nav a" e le sue varianti
   per il menu compatto (sopra i 1280px) danno un padding laterale diverso
   a seconda della larghezza, e sono anch'esse regole del <nav> del sito che
   .chat-side eredita per essere anch'essa un <nav>. Dichiararlo qui, sui
   quattro lati, chiude QUESTA proprieta' a qualunque larghezza, perche' la
   specificita' della classe vince su "nav a".
   Non chiude la fuga alla fonte, e va detto: dal <nav> del sito colano
   ancora dentro la barra "nav{align-items}", "nav a{text-transform}",
   "nav a::after" (il trattino azzurro al passaggio del mouse) e, sul
   cassetto sotto i 780px, "nav.open a{opacity:1!important}" e l'alone
   bianco di "nav.open". Sono tutte precedenti a questa correzione e
   innocue oggi, ma la prossima proprieta' aggiunta a "nav a" colera' di
   nuovo. La chiusura vera e' scopare quelle regole come si e' fatto per il
   blocco dei 1279px: da fare, non fatto. */
.chat-visit{display:block;text-align:center;text-decoration:none;margin-top:auto;padding:14px 0 0;border-top:1px solid rgba(255,255,255,0.08);color:var(--text-dim);font-size:0.76rem;letter-spacing:0.02em;opacity:0.72;transition:color .2s,opacity .2s}
.chat-visit:hover{color:var(--accent2);opacity:1}
.chat-area{color:var(--accent2);opacity:1;font-weight:600}
.chat-area + .chat-visit{margin-top:8px;padding-top:8px;border-top:0}
.plan-badge{cursor:pointer}
.plan-badge::after{content:" ⚙";letter-spacing:0;opacity:0.75}
.mvmenu .mv-ver{padding:9px 14px 5px;text-align:center;color:var(--text-dim);font-size:0.66rem;opacity:0.6;border-top:1px solid rgba(255,255,255,0.06);margin-top:2px;letter-spacing:0.04em}
.composer-preview{margin:0 0 8px}
.chat-ver{text-align:center;color:var(--text-dim);font-size:0.66rem;opacity:0.5;padding:6px 0 2px;letter-spacing:0.04em}
#appFooter{display:none}
@media(max-width:768px){
  /* La striscia della versione e' FISSA in fondo, con z-index 60. Ogni riga di
     pulsanti «appiccicata» al fondo (position:sticky; bottom:0) le finiva
     SOTTO, e si liberava solo scorrendo: i pulsanti c'erano, ma bisognava
     scorrere per usarli. Segnalato il 17 set 2026 sull'iPhone, e non si vede
     sul computer perche' li' la striscia non c'e' (display:none sopra i 768px).
     Si alzano di quanto e' alta la striscia: 27px misurati in un browser vero,
     piu' la safe-area del telefono. Una variabile sola, cosi' le due barre non
     divergono.
     ATTENZIONE alla forma: per un elemento `sticky`, `bottom: X` vuol dire
     «incollati X SOPRA il fondo della finestra». Il `-26px` di `.lez-actions`
     la faceva quindi sporgere 26px SOTTO il bordo, ed e' proprio quello che la
     mandava dietro la striscia: non si somma al valore vecchio, lo si
     sostituisce. Prova: scripts/test-pulsanti-fondo.js */
  :root{--striscia-versione:calc(27px + env(safe-area-inset-bottom));--barra-azioni:64px}
  /* APPICCICATA NON BASTAVA. `position:sticky` incolla al fondo solo finche' il
     contenitore e' piu' alto della finestra: con un modulo corto la barra
     restava dove finiva il modulo, con un buco fra lei e la striscia — ed e'
     il «troppo su» segnalato il 17 set 2026, dopo due tentativi sbagliati di
     chi scrive. Per stare SEMPRE sul bordo della striscia dev'essere FISSA.
     Sotto la striscia come ordine di sovrapposizione (59 contro 60): se mai si
     incontrassero, vince la striscia, che e' la piu' esterna. */
  .ctx-actions,.lez-actions{position:fixed;left:0;right:0;bottom:var(--striscia-versione);z-index:59;
    margin:0;padding:10px 14px;background:var(--bg,#0a0e15);border-top:1px solid rgba(255,255,255,0.09)}
  /* E lo spazio perche' il contenuto non finisca sotto a nessuna delle due:
     l'altezza della barra la misura l'app (app.js, misuraStriscia), perche'
     dipende dai pulsanti che ci sono. Senza questo, gli ultimi pulsanti della
     schermata non si raggiungono nemmeno scorrendo. */
  .ctx-form{padding-bottom:calc(var(--striscia-versione) + var(--barra-azioni) + 8px)}
  #appFooter{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;justify-content:center;align-items:center;gap:7px;flex-wrap:nowrap;padding:4px 12px calc(4px + env(safe-area-inset-bottom));background:linear-gradient(to right,rgba(234,243,255,0.92) 0%,rgba(120,170,255,0.86) 22%,rgba(34,99,235,0.9) 58%,rgba(12,42,140,0.96) 100%);border-top:1px solid rgba(255,255,255,0.18);font-size:0.64rem;color:#fff}
  #appFooter .af-logo{width:18px;height:18px;border-radius:5px;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,0.15)}
  #appFooter .af-link{color:#fff;text-decoration:underline;opacity:0.96}
  #appFooter .af-ver{opacity:0.92;letter-spacing:0.03em;color:#fff}
  body.chat-page main.page > section{padding-bottom:calc(40px + env(safe-area-inset-bottom))!important}
}
.fold-head{display:flex;align-items:center;gap:6px;margin-top:6px;padding:7px 10px;border-radius:8px;cursor:pointer;color:var(--text);font-size:0.82rem}
.fold-head:hover{background:rgba(255,255,255,0.05)}
.fold-head .fcar{font-size:0.55rem;color:var(--text-dim);transition:transform .15s;flex-shrink:0}
.fold-head.open .fcar{transform:rotate(90deg)}
.fold-head .ft{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.fold-head .fn{font-size:0.7rem;color:var(--text-dim);background:rgba(255,255,255,0.06);border-radius:999px;padding:0 7px;min-width:18px;text-align:center}
.fold-head .act{opacity:0.5;background:none;border:none;color:inherit;cursor:pointer;font-size:0.85rem;padding:2px 3px;line-height:1}
.fold-head:hover .act{opacity:0.8}
.fold-head .act:hover{opacity:1;color:var(--accent2)}
.fold-body{margin-left:9px;border-left:1px solid rgba(255,255,255,0.08);padding-left:4px}
.fold-sep{font-size:0.64rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);opacity:0.6;margin:14px 0 4px;padding:0 10px}
.mvmenu{position:fixed;z-index:120;background:#0b1018;border:1px solid rgba(255,255,255,0.16);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,0.5);padding:5px;min-width:170px;max-width:240px;max-height:280px;overflow-y:auto}
.mvmenu>div{padding:8px 11px;border-radius:7px;color:var(--text-dim);font-size:0.84rem;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mvmenu>div:hover{background:rgba(59,130,246,0.16);color:#fff}
.mvmenu .mv-cur{color:#fff}
.mvmenu .mv-new{color:var(--accent2)}
.mvmenu .mv-sep{border-top:1px solid rgba(255,255,255,0.1);margin:4px 2px;padding:0;height:0;pointer-events:none}
.mvmenu .mv-del{color:#fca5a5}
.mvmenu .mv-del:hover{background:rgba(239,68,68,0.16);color:#fff}
.mvmenu .is-off,.cmd-invia.is-off{opacity:.42;cursor:default;pointer-events:none}
/* conversation list: search, single ⋯ action, date groups */
.conv-search{width:100%;margin-top:10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);border-radius:9px;color:#fff;padding:8px 11px;font:inherit;font-size:0.85rem}
.conv-search:focus{outline:none;border-color:var(--accent2)}
.conv-search::placeholder{color:var(--text-dim)}
.conv-daygroup{font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;color:#9aa0a8;opacity:1;margin:16px 0 4px;padding:0 10px}
.conv-empty{color:var(--text-dim);font-size:0.85rem;padding:14px 10px;text-align:center}
.conv-item .conv-more,.fold-head .fold-more{opacity:0.45;flex-shrink:0;background:none;border:none;color:inherit;cursor:pointer;font-size:1.05rem;line-height:1;padding:2px 7px;border-radius:6px;letter-spacing:1px}
.conv-item:hover .conv-more,.fold-head:hover .fold-more,.conv-item.active .conv-more{opacity:0.75}
.conv-item .conv-more:hover,.fold-head .fold-more:hover{opacity:1;background:rgba(255,255,255,0.08);color:#fff}
.chat-main{flex:1;min-width:0;display:flex;flex-direction:column;padding-top:14px}
.chat-burger{display:none;cursor:pointer;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);color:#fff;border-radius:8px;padding:7px 12px;font-size:0.8rem;margin-bottom:10px;align-self:flex-start}
#appMenu{display:inline-flex;position:fixed;top:calc(15px + env(safe-area-inset-top));right:88px;z-index:4001;margin:0}
/* Quota 4 e non 10: l'intestazione della chat e' alta 52px (piu' safe-area), e
   un pulsante di 44 a quota 10 finiva a 54 — DUE PIXEL SOTTO il suo bordo.
   A quota 4 il fondo sta a 48, con quattro pixel di margine dentro
   l'intestazione. Misurato, non stimato. */
@media(max-width:768px){ #appMenu{top:calc(4px + env(safe-area-inset-top));right:14px} }
/* IL BERSAGLIO DEL DITO. Il sandwich misurava 34x28: Apple chiede almeno
   44x44 punti per qualunque cosa si tocchi, e sotto quella soglia si sbaglia
   mira — «così è difficile da toccare», 17 set 2026. Si ingrandisce solo dove
   il puntatore e' grosso: col mouse 34x28 va benissimo e il disegno resta
   quello scelto. Il glifo si centra invece di appoggiarsi al riempimento, cosi'
   il pulsante cresce senza spostarsi. Prova: scripts/test-campi-tocco.js */
@media(pointer:coarse){
  /* Stessa ALTEZZA per i due pulsanti della testata: 44, che e' il minimo che
     Apple chiede per un bersaglio da toccare. La larghezza resta naturale — il
     sandwich e' un quadrato, la bandiera ha dentro bandiera e freccetta, e
     stringerla a 44 le taglierebbe la freccetta. Uguali dove si vede: altezza
     e allineamento. */
  #appMenu,body.chat-page #header .lang-switch:not(.lang-switch-mobile){
    min-width:44px;min-height:44px;height:44px;padding:0;line-height:1;
    display:inline-flex;align-items:center;justify-content:center}
  #appMenu{font-size:1.15rem}
}
.chat-side-bk{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:49}
@media(max-width:780px){
  .chat-shell{display:block;border-top:0}
  .chat-burger{display:inline-flex}
  .chat-side{position:fixed;left:0;top:calc(52px + env(safe-area-inset-top));bottom:0;width:82%;max-width:300px;background:rgba(8,12,20,0.98);z-index:50;transform:translateX(-105%);transition:transform .2s;border-right:1px solid rgba(255,255,255,0.12);padding:16px 16px calc(16px + env(safe-area-inset-bottom));overflow:hidden}
  .chat-side.open{transform:none}
  .chat-side.open ~ .chat-side-bk{display:block}
  .conv-list{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}
  /* compact header on the chat page */
  body.chat-page header{height:calc(52px + env(safe-area-inset-top));padding:2px 1rem;padding-top:calc(2px + env(safe-area-inset-top))}
  body.chat-page .logo img{height:38px}
  body.chat-page .hamburger{top:14px}
  body.chat-page main.page > section{padding-top:calc(64px + env(safe-area-inset-top))}
  .chat-log{max-height:none;min-height:320px;flex:1}
  .chat-msg{max-width:92%}
  .att-thumb{width:64px;height:64px}
}
/* ── Soluzioni AI (catalogo pubblico) ── */
.sol-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;margin-top:40px}
.sol-card{display:block;text-decoration:none;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);transition:transform .3s,border-color .3s}
.sol-card:hover{transform:translateY(-4px);border-color:rgba(59,130,246,0.4)}
.sol-card-img{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#0a0f1a}
.sol-card-b{padding:18px}
.sol-card .cat{font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent2)}
.sol-card h3{font-size:1.05rem;color:#fff;margin:6px 0 8px;font-weight:500}
/* persona name big, the "· descriptor" smaller (e.g. "Newton · Fisica, matematica e scienze") */
.t-sub{font-size:0.62em;font-weight:400;color:var(--text-dim);letter-spacing:0}
.sol-card p{font-size:0.85rem;color:var(--text-dim);line-height:1.6;margin:0}
.sol-hero-img{width:100%;max-height:360px;object-fit:cover;border-radius:14px;margin-top:22px;border:1px solid rgba(255,255,255,0.08)}
.sol-ex{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.sol-ex span{font-size:0.85rem;color:var(--text-dim);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:999px;padding:8px 14px}

/* ── Spec list ── */
.spec-list{list-style:none;margin:20px 0 0;padding:0}
.spec-list li{display:flex;gap:18px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,0.07);font-size:0.9rem}
.spec-list li:last-child{border-bottom:none}
.spec-list .k{min-width:140px;color:var(--accent2);font-weight:500;font-size:0.82rem}
.spec-list .v{color:var(--text-dim);font-weight:300;line-height:1.65}

/* ── Pullquote ── */
.pullquote{margin:38px 0;padding:6px 0 6px 24px;border-left:3px solid var(--accent);font-size:1.3rem;line-height:1.6;font-weight:300;color:#fff}
.pullquote span{color:var(--accent)}
/* blocco di riconoscimento: allineato al margine delle altre sezioni (niente
   centratura, niente rientro della prima riga) e con respiro fra le righe */
.rico{max-width:820px}
.rico .rico-q{margin:0;font-size:1.22rem;line-height:1.85;font-weight:300;color:#fff}
.rico .rico-q span{color:var(--accent)}
.rico .body{max-width:none;margin-top:22px;line-height:2.05}
/* ── Chi siamo: founder mini-portrait ── */
.founder{display:flex;align-items:center;gap:16px;margin:2px 0 26px}
.founder img{width:112px;height:112px;border-radius:50%;object-fit:cover;border:2px solid rgba(59,130,246,0.35);flex-shrink:0}
.founder .fn{font-size:0.86rem;color:var(--text-dim);line-height:1.55}
.founder .fn strong{display:block;color:#fff;font-weight:500;font-size:0.98rem;margin-bottom:2px}
/* ── Hero with full-bleed background graphic + readable overlay ── */
.page-hero.hero-bg{position:relative;overflow:hidden}
.page-hero.hero-bg .hero-bg-layer{position:absolute;inset:0;background-size:cover;background-position:center right;z-index:0}
.page-hero.hero-bg::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,11,20,0.9) 0%,rgba(8,11,20,0.72) 38%,rgba(8,11,20,0.34) 70%,rgba(8,11,20,0.08) 100%)}
.page-hero.hero-bg .wrap{position:relative;z-index:2}
.page-hero.hero-bg .section-desc{max-width:620px}
@media(max-width:760px){
  .page-hero.hero-bg .hero-bg-layer{background-position:center}
  .page-hero.hero-bg::before{background:linear-gradient(180deg,rgba(8,11,20,0.6) 0%,rgba(8,11,20,0.78) 55%,rgba(8,11,20,0.9) 100%)}
}

/* ── Mobile: stat counters stacked & centered (number over multi-line label) ── */
@media(max-width:768px){
  .case-results{flex-direction:column;align-items:center;gap:26px;text-align:center;width:100%}
  .case-stat{flex-direction:column;align-items:center;gap:6px}
  .case-stat-num{font-size:2.6rem;line-height:1}
  .case-stat-label{max-width:15em;line-height:1.45}
}

/* ── Newton "in azione" demo (soluzioni/scienze) ── */
.nd-wrap{padding:44px 0 6px}
.nd-h{font-size:1.5rem;text-align:center}
.nd-sub{text-align:center;max-width:640px;margin:6px auto 24px}
.nd-sub a{color:var(--accent2);text-decoration:none;white-space:nowrap}
.nd-card{max-width:460px;margin:0 auto;background:rgba(10,14,22,0.92);border:1px solid rgba(255,255,255,0.1);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,0.4);overflow:hidden}
.nd-head{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03)}
.nd-dot{width:10px;height:10px;border-radius:50%}
.nd-dot:nth-child(1){background:#ff5f57}.nd-dot:nth-child(2){background:#febc2e}.nd-dot:nth-child(3){background:#28c840}
.nd-htitle{margin-left:8px;font-weight:600;color:#fff;font-size:0.9rem}
.nd-badge2{margin-left:auto;font-size:0.64rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--accent2);border:1px solid rgba(96,165,250,0.4);border-radius:6px;padding:2px 7px}
.nd-log{height:360px;overflow:hidden;padding:16px;display:flex;flex-direction:column;gap:10px}
.nd-log.nd-static{height:auto;overflow:visible}
.nd-msg{max-width:86%;padding:9px 13px;border-radius:14px;font-size:0.86rem;line-height:1.5;animation:ndIn .25s ease}
.nd-msg p{margin:0}
.nd-msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--accent),#2563eb);color:#fff;border-bottom-right-radius:5px}
.nd-msg.ai{align-self:flex-start;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.09);color:var(--text);border-bottom-left-radius:5px}
@keyframes ndIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.nd-typing{display:flex;gap:4px;align-items:center}
.nd-typing i{width:6px;height:6px;border-radius:50%;background:var(--text-dim);animation:ndBlink 1s infinite}
.nd-typing i:nth-child(2){animation-delay:.15s}.nd-typing i:nth-child(3){animation-delay:.3s}
@keyframes ndBlink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.nd-input{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03)}
.nd-inp{flex:1;min-height:18px;color:var(--text);font-size:0.86rem;white-space:nowrap;overflow:hidden}
.nd-inp:empty::before{content:'…';color:var(--text-dim)}
.nd-send{width:30px;height:30px;flex-shrink:0;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.8rem}
.nd-cap{max-width:540px;margin:18px auto 0;min-height:50px;text-align:center}
.nd-cap-t{color:var(--text);font-size:0.95rem;line-height:1.55;display:block}
.nd-formula{font-family:var(--font-mono,monospace);font-size:1.05rem;color:#fff;margin:2px 0 8px}
.nd-chip{display:inline-block;background:rgba(59,130,246,0.16);border:1px solid rgba(96,165,250,0.4);color:var(--accent2);border-radius:999px;padding:4px 12px;font-size:0.78rem}
.nd-chip.dl{background:rgba(34,197,94,0.12);border-color:rgba(134,239,172,0.4);color:#86efac}
.nd-map{background:#fff;border-radius:10px;padding:8px;max-width:280px}
.nd-svg{width:100%;height:auto;display:block}
.nd-svg line{stroke:#9bb5d6;stroke-width:2}
.nd-svg rect{fill:#eef3fb;stroke:#9bb5d6;stroke-width:1.5}
.nd-svg rect.c{fill:#2563eb;stroke:#2563eb}
.nd-svg text{fill:#1e293b;font-size:11px;text-anchor:middle;font-family:inherit}
.nd-svg rect.c+text{fill:#fff;font-weight:600}
.nd-quiz{display:flex;flex-direction:column;gap:6px}
.nd-q{font-weight:600;color:#fff;margin-bottom:2px}
.nd-o{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);border-radius:9px;padding:7px 11px;font-size:0.82rem;transition:all .35s}
.nd-o.ok{background:rgba(34,197,94,0.18);border-color:rgba(134,239,172,0.5);color:#bbf7d0}
.nd-score{margin-top:4px;align-self:flex-start;background:rgba(34,197,94,0.16);border:1px solid rgba(134,239,172,0.45);color:#86efac;border-radius:8px;padding:4px 11px;font-size:0.82rem;font-weight:600;animation:ndIn .3s ease}
.nd-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.nd-badge{font-size:0.72rem;border-radius:999px;padding:3px 10px;border:1px solid}
.nd-badge.blu{background:rgba(59,130,246,0.1);border-color:rgba(96,165,250,0.35);color:var(--accent2)}
.nd-badge.grn{background:rgba(34,197,94,0.1);border-color:rgba(134,239,172,0.35);color:#86efac}
.nd-calc{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:11px 13px;display:flex;flex-direction:column;gap:6px;min-width:235px}
.nd-calc-t{font-family:var(--font-mono,monospace);color:#fff;font-size:0.95rem;margin-bottom:3px}
.nd-cv{display:flex;justify-content:space-between;gap:14px;font-size:0.82rem;color:var(--text-dim)}
.nd-cv b{color:#fff;font-weight:600}
.nd-cv-dyn b{color:var(--accent2)}
.nd-calc-r{display:flex;justify-content:space-between;gap:14px;border-top:1px solid rgba(255,255,255,0.12);padding-top:6px;margin-top:2px;font-size:0.9rem}
.nd-calc-r b{color:#86efac;font-weight:700}
.flash{animation:ndFlash .5s ease}
@keyframes ndFlash{0%{background:rgba(96,165,250,0.4);border-radius:4px}100%{background:transparent}}
.nd-form{display:flex;flex-direction:column;gap:13px;padding:8px 2px}
.ndf-row{display:flex;align-items:center;gap:12px}
.ndf-row label{width:84px;flex-shrink:0;font-size:0.8rem;color:var(--text-dim)}
.ndf-dd{flex:1;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);border-radius:9px;padding:8px 12px;font-size:0.85rem;color:var(--text);transition:all .25s}
.ndf-dd.open{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(96,165,250,0.18)}
.ndf-dd.done .ndf-val{color:#fff;font-weight:600}
.ndf-car{color:var(--text-dim)}
.ndf-slider{flex:1;position:relative;height:6px;background:rgba(255,255,255,0.12);border-radius:99px}
.ndf-fill{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:99px;transition:width .7s ease}
.ndf-knob{position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);transition:left .7s ease}
.ndf-toggles{display:flex;gap:14px;flex-wrap:wrap}
.ndf-tog{display:inline-flex;align-items:center;gap:7px;font-size:0.82rem;color:var(--text-dim)}
.ndf-tog i{width:32px;height:18px;border-radius:99px;background:rgba(255,255,255,0.14);position:relative;transition:background .3s}
.ndf-tog i::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .3s}
.ndf-tog.on{color:#fff}
.ndf-tog.on i{background:var(--accent)}
.ndf-tog.on i::after{left:16px}
.ndf-go{margin-top:4px;border:none;cursor:default;background:linear-gradient(135deg,var(--accent),#2563eb);color:#fff;border-radius:11px;padding:10px;font-size:0.78rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;transition:transform .15s,filter .15s}
.ndf-go.press{transform:scale(0.96);filter:brightness(1.2)}
@media(max-width:520px){.nd-card{max-width:none}.nd-log{height:340px}}
.nd-grid{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:46px;align-items:start;max-width:1000px;margin:0 auto}
.nd-col-demo{min-width:0}
.nd-col-demo .nd-cap{margin-left:0;margin-right:0}
.nd-list-h{font-size:0.82rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--accent2);font-weight:700;margin:6px 0 16px}
.nd-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.nd-list li{position:relative;padding-left:28px;color:var(--text);font-size:0.94rem;line-height:1.5}
.nd-list li::before{content:'\2713';position:absolute;left:0;top:0;color:var(--accent2);font-weight:700}
.nd-cta{display:inline-block;margin-top:24px}
@media(max-width:860px){.nd-grid{grid-template-columns:1fr;gap:30px}.nd-col-list{max-width:480px;margin:0 auto;width:100%}}
/* subject picker modal */
.subj-search{width:100%;margin-bottom:10px}
.subj-list{max-height:55vh;overflow-y:auto;margin-bottom:4px}
.subj-cat{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);border-radius:9px;padding:10px 13px;margin:7px 0 0;color:#fff;font-size:0.88rem;font-weight:600;transition:all .15s}
.subj-cat:hover{border-color:var(--accent2);background:rgba(59,130,246,0.08)}
.subj-car{display:inline-block;color:var(--accent2);font-size:0.78rem;transition:transform .18s}
.subj-cat.open .subj-car{transform:rotate(90deg)}
.subj-cnt{margin-left:auto;color:var(--text-dim);font-weight:400;font-size:0.78rem}
.subj-items{display:flex;flex-wrap:wrap;gap:7px;padding:8px 4px 12px}
.subj-it{cursor:pointer;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);color:var(--text);border-radius:9px;padding:7px 12px;font-size:0.84rem;transition:all .15s}
.subj-it:hover{background:rgba(59,130,246,0.18);border-color:var(--accent2);color:#fff}
.subj-empty{color:var(--text-dim);font-size:0.85rem}

.subj-checks{display:flex;flex-direction:column;gap:8px;padding:8px 6px 12px}

/* immagini didattiche richiamate dalle risposte (Wikimedia Commons) */
.wimg{margin:14px 0}
.wimg-load{color:var(--text-dim);font-size:0.82rem;font-style:italic}
.wimg-fig{margin:0;border:1px solid rgba(255,255,255,0.12);border-radius:12px;overflow:hidden;background:rgba(255,255,255,0.03);max-width:520px}
.wimg-fig img{display:block;width:100%;height:auto}
.wimg-fig figcaption{padding:8px 12px 10px;font-size:0.78rem;line-height:1.4;color:var(--text)}
.wimg-fig .wimg-cred{color:var(--text-dim)}
.wimg-fig a{color:var(--accent2);text-decoration:none}
.wimg-nota{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;border:1px solid rgba(251,191,36,0.35);background:rgba(251,191,36,0.08);
  border-radius:10px;padding:10px 13px;font-size:0.84rem;color:#fcd34d;max-width:520px}
.wimg-nota a{color:var(--accent2);text-decoration:none;margin-left:4px}

/* didattica inclusiva: badge di stato + modale di configurazione */
.sos-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(52,211,153,0.14);border:1px solid rgba(52,211,153,0.45);
  color:#6ee7b7;border-radius:999px;padding:5px 12px;font:inherit;font-size:0.78rem;font-weight:600;cursor:pointer;
  white-space:nowrap;flex-shrink:0}
.sos-badge:hover{background:rgba(52,211,153,0.22)}
.sos-list{display:flex;flex-direction:column;gap:10px;margin:16px 0 6px}
.sos-row{display:flex;align-items:flex-start;gap:11px;cursor:pointer;padding:9px 11px;border:1px solid rgba(255,255,255,0.1);border-radius:10px}
.sos-row:hover{border-color:rgba(58,160,255,0.4)}
.sos-row input{margin-top:3px;flex-shrink:0}
.sos-row b{display:block;font-weight:600;font-size:0.92rem}
.sos-row i{display:block;font-style:normal;color:var(--text-dim);font-size:0.8rem;line-height:1.4;margin-top:2px}
.sos-int{margin-top:14px}
.sos-int>label{display:block;font-size:0.78rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-dim);margin-bottom:7px}
.sos-seg{display:inline-flex;gap:4px;padding:4px;border:1px solid rgba(255,255,255,0.12);border-radius:999px}
.sos-seg button{appearance:none;border:0;background:transparent;color:var(--text-dim);font:inherit;font-size:0.85rem;
  padding:7px 16px;border-radius:999px;cursor:pointer}
.sos-seg button.on{background:linear-gradient(90deg,#1e62d0,#3aa0ff);color:#fff}
.sos-applied{margin-top:10px;padding-top:8px;border-top:1px dashed rgba(52,211,153,0.3);color:#6ee7b7;
  font-size:0.74rem;letter-spacing:0.02em;opacity:0.9}
/* profili per bisogno nella modale della didattica inclusiva */
.sos-hint{color:var(--text-dim);font-size:0.82rem;line-height:1.45;margin:0 0 10px}
.sos-profs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.sos-prof{text-align:left;appearance:none;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;padding:10px 12px;color:var(--text);font:inherit;cursor:pointer;transition:border-color .2s,background .2s}
.sos-prof:hover{border-color:rgba(58,160,255,0.45)}
.sos-prof.on{border-color:var(--accent2);background:rgba(58,160,255,0.1)}
.sos-prof b{display:block;font-size:0.9rem;font-weight:600}
.sos-prof i{display:block;font-style:normal;color:var(--text-dim);font-size:0.76rem;line-height:1.4;margin-top:3px}
.sos-nodiag{color:var(--text-dim);font-size:0.74rem;line-height:1.45;margin:12px 0 0;opacity:0.85}
/* osservazione didattica */
.oss-invito{display:flex;flex-direction:column;gap:6px;align-items:flex-start;border:1px dashed rgba(58,160,255,0.4);
  border-radius:10px;padding:13px 15px;margin:16px 0 4px;background:rgba(58,160,255,0.05)}
.oss-invito b{font-size:0.92rem;color:#fff}
.oss-invito span{font-size:0.8rem;color:var(--text-dim);line-height:1.45}
.oss-invito button{margin-top:6px}
.oss-list{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.oss-q{display:flex;flex-direction:column;gap:7px;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,0.07)}
.oss-q>span{font-size:0.9rem;line-height:1.45}
.oss-seg button{padding:6px 14px;font-size:0.8rem}

/* Configurazioni salvate per riferimento (didattica inclusiva) */
.sos-ref .ref-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sos-ref .ref-row input{flex:1 1 160px;min-width:0;padding:9px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,0.16);background:rgba(255,255,255,0.05);color:#e8f0ff;font-size:0.92rem}
.sos-ref .ref-row input:focus{outline:none;border-color:var(--accent2)}
.ref-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ref-list:empty{margin-top:0}
.ref-chip{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,0.18);
  border-radius:999px;overflow:hidden;background:rgba(255,255,255,0.04)}
.ref-chip.on{border-color:var(--accent2);background:rgba(58,160,255,0.14)}
.ref-chip button{background:none;border:0;color:#dbe7ff;font:inherit;font-size:0.86rem;
  padding:6px 4px 6px 12px;cursor:pointer}
.ref-chip i{font-style:normal;color:#93a4c0;cursor:pointer;padding:6px 10px 6px 6px;font-size:0.95rem}
.ref-chip i:hover{color:#ff9a9a}
.sos-badge i{font-style:normal;opacity:0.75;font-weight:500}
.icf-invito{border-color:rgba(52,211,153,0.45)}
.ref-nota{display:block;font-style:normal;font-size:0.68rem;color:var(--text-dim);margin-top:2px}
.icf-q .icf-cod{display:block;font-style:normal;font-size:0.68rem;color:var(--text-dim);margin-top:2px;letter-spacing:0.02em}
.icf-seg button,.icf-amb button{font-size:0.72rem;padding:4px 7px}
.icf-porta{margin:10px 0 4px}
.icf-grado button{font-size:0.74rem}
/* Un guasto va visto: fetch() non rigetta su un 500, e un avviso grigio
   come una nota si legge come una nota. */
.icf-err,.icf-arch-err{color:#ffb4b4}
.icf-ok{color:#6ee7b7}
.icf-vuoto{margin:14px 0 18px}

/* Osservazione didattica: aree, contatore, esito */
.oss-area{margin:0 0 16px}
.oss-area h4{margin:0 0 8px;font-size:0.76rem;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--accent2);font-weight:600}
.oss-cnt{margin-right:auto;font-size:0.84rem;color:var(--text-dim)}
.oss-esito{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.oss-e{border:1px solid rgba(255,255,255,0.12);border-radius:10px;padding:11px 14px;background:rgba(255,255,255,0.03)}
.oss-e b{display:block;color:#fff;font-size:0.95rem}
.oss-e i{display:block;font-style:normal;color:var(--text-dim);font-size:0.86rem;margin-top:3px;line-height:1.5}
.oss-e-int{background:rgba(58,160,255,0.12);border-color:rgba(58,160,255,0.35)}
.oss-e-prof{border-color:rgba(58,160,255,0.35)}
.oss-alt{margin:10px 0 4px}

/* ── Pannello di opzioni nelle dimostrazioni (scena kind:'pannello') ──────────
   Le opzioni sono il prodotto: la chat da sola somiglia a qualunque altra AI.
   Riproduce il pannello vero dell'app: voci con casella e descrizione, una
   scelta a pillole, un campo, il pulsante di conferma. */
.nd-pan{display:flex;flex-direction:column;gap:8px}
.nd-pan-t{font-weight:600;color:#fff;font-size:0.92rem;margin-bottom:2px}
.nd-pv{border:1px solid rgba(255,255,255,0.12);border-radius:10px;padding:8px 10px;display:flex;gap:9px;align-items:flex-start;transition:border-color .3s,background .3s}
.nd-pv.on{border-color:rgba(96,165,250,0.5);background:rgba(59,130,246,0.08)}
.nd-pbox{flex:0 0 15px;height:15px;margin-top:2px;border:1.5px solid rgba(255,255,255,0.3);border-radius:4px;position:relative;transition:background .25s,border-color .25s}
.nd-pv.on .nd-pbox{background:var(--accent);border-color:var(--accent)}
.nd-pv.on .nd-pbox::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.nd-pl{display:block;font-size:0.84rem;color:#fff;line-height:1.3}
.nd-pd{display:block;font-size:0.75rem;color:var(--text-dim);line-height:1.35;margin-top:2px}
.nd-plab{font-size:0.64rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-dim);margin-top:6px}
.nd-ppills{display:flex;gap:5px}
.nd-ppill{font-size:0.78rem;padding:5px 13px;border-radius:999px;border:1px solid rgba(255,255,255,0.16);color:var(--text-dim);transition:background .3s,color .3s,border-color .3s}
.nd-ppill.on{background:linear-gradient(90deg,#1e62d0,#3aa0ff);border-color:transparent;color:#fff;font-weight:600}
.nd-pfield{border:1px solid rgba(255,255,255,0.16);border-radius:8px;padding:7px 10px;font-size:0.82rem;color:#fff;min-height:17px}
.nd-pfield.empty{color:var(--text-dim)}
.nd-pgo{margin-top:8px;align-self:flex-start;background:linear-gradient(90deg,#1e62d0,#3aa0ff);color:#fff;border-radius:999px;padding:8px 20px;font-size:0.84rem;font-weight:600;transition:transform .15s,filter .15s}
.nd-pgo.press{transform:scale(0.94);filter:brightness(1.25)}

/* Nota in calce a una dimostrazione: l'app cambia piu' in fretta di quanto si
   aggiornino le animazioni, e chi arriva dal sito non deve sentirsi promettere
   una schermata precisa. Piccola e attenuata: e' una precisazione, non un
   avvertimento. */
.nd-disc{margin:8px 0 0;font-size:0.72rem;line-height:1.5;color:var(--text-dim);opacity:0.75;max-width:420px}

/* Menu di un messaggio nelle dimostrazioni (scena kind:'menu'): nell'app la
   mappa, il test e il PDF si aprono da un pulsante sotto la risposta, che
   propone i formati. Qui si vede il pulsante premuto e la voce scelta. */
.nd-menu{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.nd-mchip{transition:transform .15s,filter .15s}
.nd-mchip.press{transform:scale(0.94);filter:brightness(1.3)}
.nd-mbox{opacity:0;transform:translateY(-5px);transition:opacity .3s,transform .3s;border:1px solid rgba(255,255,255,0.14);border-radius:10px;padding:5px;background:rgba(8,12,20,0.92);min-width:186px}
.nd-mbox.open{opacity:1;transform:none}
.nd-mt{font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-dim);padding:5px 8px 3px}
.nd-mi{font-size:0.82rem;color:var(--text-dim);padding:6px 8px;border-radius:6px;transition:background .25s,color .25s}
.nd-mi.on{background:rgba(59,130,246,0.16);color:#fff}
.nd-msg-menu{background:none!important;padding:0!important}

/* Voce di sottomenu per un settore ancora senza prodotti: si vede, non si
   clicca. Portare a una pagina vuota costa piu' fiducia dell'ambizione che
   mostra. Stessa logica delle lingue non ancora attive. */
.nav-submenu .nav-sub-soon{display:block;padding:9px 18px;font-size:0.82rem;color:var(--text-dim);opacity:0.55;cursor:default;white-space:nowrap;position:relative}
.nav-submenu .nav-sub-soon::after{content:'·';margin-left:7px;opacity:0.7}

/* "La risposta prosegue": nelle dimostrazioni le risposte sono corte per stare
   nella carta, ma cosi' il prodotto sembra piu' povero di com'e'. I tre punti
   in coda alla bolla dicono che il testo continua, senza doverlo scrivere. */
.nd-cont{display:inline-flex;gap:4px;align-items:center;margin-top:8px;opacity:0.75}
.nd-cont i{width:5px;height:5px;border-radius:50%;background:var(--text-dim);animation:ndBlink 1.4s infinite}
.nd-cont i:nth-child(2){animation-delay:.2s}
.nd-cont i:nth-child(3){animation-delay:.4s}
/* Settore aperto al solo superadmin: si distingue da una voce pubblica. */
.nav-submenu a.nav-sub-open{display:block;padding:9px 18px;font-size:0.82rem;color:var(--accent2);text-decoration:none;white-space:nowrap;border-left:2px solid rgba(58,160,255,0.5)}
.nav-submenu a.nav-sub-open:hover{background:rgba(59,130,246,0.12)}
/* la voce che ripete la pagina del menu: si distingue appena, e una riga la
   separa dalle voci interne, cosi' non sembra un doppione capitato li' */
.nav-submenu a.nav-sub-self{font-weight:600;color:#fff!important;border-bottom:1px solid rgba(255,255,255,0.08)}

/* Etichetta sulla scheda di un lavoro: dice che tipo di cosa si sta guardando
   (prodotto nostro, piattaforma fatta per un cliente...). Serve a contestualizzare
   il caso, non a raccontarne lo stato commerciale. */
.project-card .card-kind{display:inline-block;font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-dim);border:1px solid rgba(255,255,255,0.16);border-radius:999px;padding:3px 10px;margin-bottom:10px}

/* ── Area utente: le applicazioni e i due distintivi degli store ─────────────
   Le app si aprono dalla dashboard, non solo dalla pagina "strumenti". I
   distintivi restano spenti finche' il server non manda gli indirizzi
   (app-meta.stores): promettere un negozio che non esiste e' peggio che tacere. */
.app-box{margin-top:40px}
.app-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.app-card{border:1px solid rgba(255,255,255,0.12);border-radius:14px;padding:20px 20px 18px;background:rgba(255,255,255,0.025);position:relative}
.app-card.on{border-color:rgba(58,160,255,0.4);background:rgba(58,160,255,0.06)}
.app-card h3{margin:6px 0 8px;font-size:1.05rem;color:#fff}
.app-card p{margin:0 0 14px;color:var(--text-dim);font-size:0.88rem;line-height:1.6}
.app-state{font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-dim)}
.app-card.on .app-state{color:var(--accent2)}
.app-open{display:inline-block;text-decoration:none;background:linear-gradient(90deg,#1e62d0,#3aa0ff);color:#fff;
  border-radius:999px;padding:9px 20px;font-size:0.86rem;font-weight:600}
.app-open:hover{filter:brightness(1.08);color:#fff}
.app-more{text-decoration:none;color:var(--accent2);font-size:0.86rem}
.app-more:hover{text-decoration:underline}
/* I distintivi stanno DENTRO la scheda dell'applicazione: quando le app saranno
   piu' d'una, ognuna avra' i suoi negozi e non ci sara' da indovinare a chi si
   riferiscono. */
.app-store-row{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.1)}
.app-store-lab{display:block;font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:9px}
.app-nota{margin:20px 0 0;color:var(--text-dim);font-size:0.84rem;line-height:1.6;max-width:640px}
.app-badges{display:flex;flex-wrap:wrap;gap:12px}
.app-badge{display:inline-flex;align-items:center;gap:11px;border:1px solid rgba(255,255,255,0.16);border-radius:10px;
  padding:10px 16px;min-width:178px;text-decoration:none;color:#fff;font-size:0.92rem;background:rgba(255,255,255,0.04);
  transition:border-color .2s,background .2s}
.app-badge b{white-space:nowrap}
.app-badge span{display:flex;flex-direction:column;line-height:1.25}
.app-badge b{font-size:0.9rem;font-weight:600}
.app-badge i{font-style:normal;font-size:0.7rem;color:var(--text-dim);letter-spacing:0.02em}
.app-logo{width:22px;height:22px;flex:0 0 22px;display:block}
/* Finche' i negozi non ci sono i pulsanti restano spenti e lo dice una riga
   sotto, non un'etichetta su ciascuno: la scritta "Scarica gratis" resta al suo
   posto e i pulsanti non cambiano forma quando i collegamenti arriveranno. */
.app-store-nota{margin:9px 0 0;font-size:0.74rem;color:var(--text-dim);opacity:0.85}
.app-badge[aria-disabled="true"]{opacity:0.45;pointer-events:none}
.app-badge:not([aria-disabled="true"]):hover{border-color:var(--accent2);background:rgba(58,160,255,0.1)}

/* Finestra dei comandi dell'app: gli stessi del panino, in griglia, per i
   computer dove il panino non c'e'. */
.cmd-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 14px}
.cmd-btn{text-align:left;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);color:#e8e8f2;
  border-radius:10px;padding:11px 13px;font-size:0.86rem;cursor:pointer;line-height:1.3;transition:background .15s,border-color .15s}
.cmd-btn:hover{background:rgba(58,160,255,0.12);border-color:rgba(58,160,255,0.45)}
.cmd-ver{text-align:center;font-size:0.7rem;color:var(--text-dim);opacity:0.7}
@media(max-width:560px){.cmd-grid{grid-template-columns:1fr}}

/* Riga di ritorno: chi arriva su una pagina profonda deve poter tornare
   esattamente da dove stava guardando. Dove la pagina non la prevede la crea
   site.js (.pr-backrow-auto), e li' serve un margine sopra: si infila dentro un
   contenitore che ha gia' la sua spaziatura. */
.pr-backrow{margin:0 0 18px}
.pr-backrow-auto{margin:0 0 20px}
/* Sulle pagine con l'immagine di sfondo nell'intestazione il testo parte piu'
   in basso: la riga resta agganciata sopra al titolo senza sfondarlo. */
.page-hero .pr-backrow-auto{margin-bottom:14px}
.pr-back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--text-dim);
  font-size:0.86rem;border:1px solid rgba(255,255,255,0.16);border-radius:999px;padding:7px 15px;
  transition:color .2s,border-color .2s,background .2s}
.pr-back:hover{color:#fff;border-color:var(--accent2);background:rgba(58,160,255,0.1)}

/* ── Area utente: porta al pannello di controllo (solo superadmin) ───────────
   Si distingue dal resto della pagina perche' porta FUORI, su un'altra origine
   e con un altro accesso: sembrare una sezione dell'area sarebbe fuorviante. */
.adm-box{margin-top:40px;border:1px solid rgba(255,196,84,0.32);background:rgba(255,196,84,0.05);
  border-radius:14px;padding:22px 22px 20px}
.adm-lab{display:block;font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:#ffc454}
.adm-box .section-desc{max-width:640px;margin-bottom:16px}
.adm-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.adm-go{display:inline-flex;align-items:center;gap:6px;text-decoration:none;background:linear-gradient(90deg,#b57d13,#ffc454);
  color:#1a1400;border-radius:999px;padding:10px 20px;font-size:0.9rem;font-weight:700}
.adm-go:hover{filter:brightness(1.08);color:#1a1400}
.adm-alt{display:inline-flex;align-items:center;text-decoration:none;border:1px solid rgba(255,196,84,0.4);
  color:#ffd88a;border-radius:999px;padding:9px 16px;font-size:0.84rem;transition:background .2s}
.adm-alt:hover{background:rgba(255,196,84,0.12);color:#fff}

/* Riga per chi arriva da un link del vecchio dialogicom.com (?da=vecchio):
   deve spiegare in una riga e non rubare la scena all'assistente. */
.sol-vecchio{margin:0 0 20px;padding:12px 16px;border-left:3px solid var(--accent2);
  background:rgba(58,160,255,0.08);border-radius:0 10px 10px 0;font-size:0.9rem;line-height:1.6;color:var(--text-dim);max-width:640px}
.sol-vecchio b{color:#fff;font-weight:600}
.sol-vecchio a{color:var(--accent2);text-decoration:underline;text-underline-offset:3px}

/* Mappa "dov'e' finito il tuo assistente" sulla pagina di benvenuto: chi arriva
   da un collegamento vecchio cerca un nome, non una spiegazione. */
.bv-mappa{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:32px}
.bv-mappa a{display:block;text-decoration:none;border:1px solid rgba(255,255,255,0.12);border-radius:12px;
  padding:16px 18px;background:rgba(255,255,255,0.025);transition:border-color .2s,background .2s}
.bv-mappa a:hover{border-color:var(--accent2);background:rgba(58,160,255,0.08)}
.bv-mappa b{display:block;color:#fff;font-size:1rem;font-weight:600}
.bv-mappa span{display:block;color:var(--text-dim);font-size:0.85rem;margin-top:2px}
.bv-mappa i{display:block;font-style:normal;color:#6f6f8e;font-size:0.74rem;margin-top:9px}
.bv-mappa a.nuovo{border-color:rgba(58,160,255,0.4);background:rgba(58,160,255,0.06)}
.bv-mappa a.nuovo i{color:var(--accent2)}

/* Barra sotto una risposta tagliata dal tetto di uscita: dice che e' interrotta e
   offre la ripresa. Prima l'unico rimedio stava dentro il menu «⋯», e l'utente
   riscriveva "rispondi a tutte" pagando ogni volta di piu'. */
.tr-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;padding-top:11px;
  border-top:1px dashed rgba(255,196,84,0.45)}
.tr-msg{color:#ffd88a;font-size:0.8rem;line-height:1.45;flex:1 1 220px}
.tr-go{cursor:pointer;background:rgba(255,196,84,0.16);border:1px solid rgba(255,196,84,0.5);color:#ffe0a3;
  border-radius:999px;padding:7px 15px;font-size:0.82rem;font-weight:600;white-space:nowrap;transition:background .2s}
.tr-go:hover{background:rgba(255,196,84,0.28);color:#fff}
.tr-go[disabled]{opacity:0.5;cursor:default}

/* Collegamento dentro un messaggio di sistema (per esempio «Vedi i piani»): si
   deve capire che si clicca, senza diventare un richiamo pubblicitario. */
.sys-cta{color:var(--accent2);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.sys-cta:hover{color:#fff}

/* ── Informativa AI Act (art. 50), primo accesso ──────────────────────────────
   L'illustrazione fa il tono, ma la frase che assolve l'obbligo deve reggere
   anche da sola: chi scorre senza leggere trova comunque il blocco evidenziato.
   Il resto e' contorno, e sta scritto come tale. */
.dc-modal-box.aiact{max-width:600px}
.aiact-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,0.08);margin:0 0 7px;background:#05080e}
/* Specificita': .dc-modal-box p vincerebbe su .aiact-cap e le rimetterebbe
   margini, corpo e colore del testo normale, scentrandola.
   Il colore NON e' --text-dimmer: su questo fondo dava 2,13:1, sotto il minimo
   di 4,5:1, cioe' una dichiarazione che nessuno riusciva a leggere. A 0.62 fa
   7:1, e resta comunque subordinata al testo perche' e' piu' piccola. */
.dc-modal-box.aiact p.aiact-cap{margin:0 auto 16px;max-width:420px;color:rgba(241,245,249,0.62);font-size:0.75rem;line-height:1.45;text-align:center}
.dc-modal-box.aiact h3.aiact-t{color:var(--gold);font-size:0.92rem;letter-spacing:0.08em;text-transform:uppercase;margin:0 0 14px}
.aiact-b p{margin:0 0 11px}
.aiact-b .aiact-legale{background:rgba(59,130,246,0.10);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:11px 13px;margin:0 0 14px;color:var(--text)}
/* Nota con i riferimenti di legge: separata dal corpo, ma leggibile. Una
   citazione normativa che non si riesce a leggere non cita niente. */
.aiact-b p.aiact-rif{margin:16px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,0.08);color:rgba(241,245,249,0.55);font-size:0.72rem;line-height:1.55}
.aiact-b p.aiact-rif a{color:var(--accent2);text-decoration:underline;text-underline-offset:3px}
.aiact-b p.aiact-rif a:hover{color:#fff}
/* L'header e' fisso e sta SOPRA la modale (z-index 3000 contro 200): una modale
   alta come questa gli finiva sotto il bordo. Dieci pixel di stacco, e il tetto
   d'altezza si accorcia della stessa quantita', altrimenti quello che si guadagna
   in cima si perde in fondo. Classe dedicata: le altre modali dell'app restano
   dove sono. */
.dc-modal.aiact-ov{padding-top:80px}
.dc-modal.aiact-ov .dc-modal-box.aiact{max-height:calc(100dvh - 100px)}
@media(max-width:600px){
  .aiact-img{margin-bottom:14px}
  .dc-modal.aiact-ov{padding-top:calc(62px + env(safe-area-inset-top))}
  .dc-modal.aiact-ov .dc-modal-box.aiact{max-height:calc(100dvh - 74px - env(safe-area-inset-top))!important}
}

/* Casella dei messaggi del supervisor */
.msg-lista{max-height:60vh;overflow-y:auto}
.msg-voce{padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.08)}
.msg-voce:last-child{border-bottom:0}
.msg-tit{color:#fff;font-weight:600;margin:0 0 8px}
.msg-img{display:block;width:100%;height:auto;border-radius:10px;margin:0 0 10px}
.msg-testo{color:var(--text-dim);font-size:0.9rem;line-height:1.55;margin:0 0 6px;white-space:pre-wrap}
.msg-data{color:var(--text-dimmer);font-size:0.72rem}
.msg-vuoto{color:var(--text-dim);text-align:center;padding:24px 0}
.mv-badge{display:none;width:8px;height:8px;border-radius:50%;background:var(--red);margin-left:6px;vertical-align:middle}

/* Pannello del permesso alle notifiche */
.perm-testo{color:var(--text-dim);font-size:0.9rem;line-height:1.55;margin:0 0 12px}
.perm-passi{color:var(--text);font-size:0.9rem;line-height:1.7;margin:0 0 12px;padding-left:20px}

/* Striscia del messaggio nuovo, e pallino sul pulsante del menu.
   z-index 4002, non 200: l'header della pagina e' fisso a 3000 (stessa
   sovrapposizione gia' vista per la modale AI Act, vedi commento aiact-ov
   piu' sopra), e qui il pulsante "Apri" ci finiva sotto per davvero, non
   solo alla vista: il click non arrivava, lo ha preso il caso S5. 4002 la
   mette sopra anche al pallino sul panino (4001), che e' giusto: la
   striscia e' il segnale con la priorita' piu' alta. */
/* top con la safe-area: nel pacchetto (viewport-fit=cover) 12px dall'alto finivano sotto la barra di stato dell'iPhone e la × non si toccava (16 set 2026). */
.mv-striscia{display:none;position:fixed;left:12px;right:12px;top:calc(12px + env(safe-area-inset-top));z-index:4002;align-items:center;gap:10px;background:#0b1018;border:1px solid rgba(59,130,246,0.5);border-radius:10px;padding:10px 12px;box-shadow:0 10px 28px rgba(0,0,0,0.5)}
.mv-striscia-t{flex:1;color:#fff;font-size:0.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-striscia-b{background:var(--accent);color:#fff;border:0;border-radius:7px;padding:6px 12px;font-size:0.8rem;cursor:pointer}
.mv-striscia-x{background:none;border:0;color:var(--text-dim);font-size:1.1rem;line-height:1;cursor:pointer;padding:0 2px}
.mv-pan-badge{display:none;position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;background:var(--red)}

/* Pannello dei Materiali (compito 7): l'affiancato originale/adattato del
   difetto 3, ma solo da 900px in su - sotto quella soglia due colonne
   fanno ~200px ciascuna, illeggibili, quindi si impilano intere. NON la
   pubblica nessuno script (scripts/deploy-sito.js copia solo gli *.html):
   va copiata a mano al rilascio, con sudo install. */
.mat-compare{display:flex;flex-direction:column;gap:14px}
.mat-compare-col{flex:1 1 0;min-width:0}
.mat-compare-h{font-size:0.78rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px}
.mat-compare .mat-compare-col:first-child .md-body{max-height:320px;overflow-y:auto;padding-right:6px;white-space:pre-wrap;color:var(--text-dim);font-size:0.88rem}
@media(min-width:900px){.mat-compare{flex-direction:row}}

/* ── iOS e lo zoom al fuoco di un campo ────────────────────────────────────
   Quando su iPhone un campo di testo con carattere SOTTO i 16px prende il
   fuoco, il sistema ingrandisce la pagina — e la pagina RESTA ingrandita. Da
   lì in poi sembra «più larga dello schermo», con le righe tagliate a destra.
   Non è un difetto di impaginazione, e cercarlo nei margini è tempo perso: la
   cura è una sola, nessun campo sotto i 16px dove si tocca.

   Visto il 17 settembre 2026 sull'iPhone, build ad hoc 2.7 (5): in modalità
   studente bastava toccare un campo del modulo di studio (13,9px); e caricando
   una conversazione, il campo di ricerca (15,2px). Il compositore della chat
   non lo faceva, perché sotto i 600px era già a 16px esatti — e 16 non basta
   superarlo, basta non stare sotto.

   Si limita al puntatore grosso: sul computer il disegno resta quello scelto.

   `!important` qui è giusto, e non è pigrizia: deve battere OGNI regola più
   specifica, comprese quelle che verranno scritte domani da chi non conosce
   questa trappola. Non è una scelta di stile che si negozia — è un vincolo
   della piattaforma, come lo sono le safe-area. La prova è
   scripts/test-campi-tocco.js, che chiede al browser la misura vera invece di
   leggere il foglio a occhio. */
@media (pointer: coarse) {
  input, textarea, select { font-size: 16px !important; }
}