:root{
  --cyan:#00d9ff;
  --cyan2:#5ef4ff;
  --red:#ff234f;
  --green:#00ff70;
  --bg:#020813;
  --text:#dffbff;
  --muted:#70a8b8;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:"Segoe UI",Arial,sans-serif;
}

body{
  min-height:100vh;
  background:#020813;
  color:var(--text);
  overflow:hidden;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 52% 45%,rgba(0,217,255,.14),transparent 34%),
    radial-gradient(circle at 20% 50%,rgba(255,35,79,.12),transparent 28%),
    linear-gradient(120deg,#020813 0%,#031425 45%,#01040a 100%);
  z-index:-3;
}

body:after{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(0,217,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,217,255,.035) 1px,transparent 1px);
  background-size:42px 42px;
  opacity:.55;
  z-index:-2;
  animation:grid 18s linear infinite;
}

@keyframes grid{
  to{transform:translateY(42px)}
}

.stars{
  position:fixed;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle,rgba(0,217,255,.45) 1px,transparent 1.5px);
  background-size:120px 90px;
  opacity:.08;
  animation:space 12s linear infinite;
}

@keyframes space{
  to{transform:scale(1.08)}
}

.hidden{
  display:none!important;
}

.page{
  width:100vw;
  height:100vh;
}

.corner{
  clip-path:polygon(0 18px,18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px));
}

/* =========================================================
   CONFIG PAGE
========================================================= */

.config-page{
  display:grid;
  place-items:center;
  padding:24px;
}

.config-shell{
  width:min(1180px,96vw);
  min-height:720px;
  border:1px solid rgba(0,217,255,.38);
  background:rgba(1,9,18,.75);
  box-shadow:0 0 45px rgba(0,217,255,.18),inset 0 0 35px rgba(0,217,255,.07);
  padding:18px;
}

.config-topbar{
  height:62px;
  border:1px solid rgba(0,217,255,.35);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  background:rgba(0,6,14,.75);
  margin-bottom:22px;
}

.stark-brand{
  font-style:italic;
  font-weight:900;
  letter-spacing:1px;
}

.stark-brand span{
  color:var(--cyan);
  font-size:24px;
}

.system-pill{
  color:var(--cyan2);
  letter-spacing:2px;
}

.config-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
  min-height:610px;
}

.hero-panel,
.setup-panel{
  border:1px solid rgba(0,217,255,.38);
  background:linear-gradient(180deg,rgba(0,24,42,.72),rgba(0,9,18,.82));
  padding:34px;
  position:relative;
  overflow:hidden;
}

.hero-panel:before{
  content:"";
  position:absolute;
  width:560px;
  height:560px;
  border-radius:50%;
  right:-160px;
  bottom:-150px;
  border:2px solid rgba(0,217,255,.32);
  box-shadow:0 0 80px rgba(0,217,255,.16), inset 0 0 80px rgba(0,217,255,.05);
  animation:spin 18s linear infinite;
}

.eyebrow{
  color:var(--cyan2);
  letter-spacing:4px;
  font-size:13px;
}

.hero-panel h1{
  margin-top:22px;
  font-size:88px;
  letter-spacing:14px;
  color:var(--cyan2);
  text-shadow:0 0 28px var(--cyan);
}

.hero-subtitle{
  font-size:22px;
  color:#b9f6ff;
  margin-top:12px;
  max-width:580px;
}

.setup-steps{
  margin-top:54px;
  display:grid;
  gap:22px;
  max-width:560px;
  position:relative;
  z-index:2;
}

.setup-step{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:18px;
  align-items:center;
  border:1px solid rgba(0,217,255,.24);
  background:rgba(0,8,18,.45);
  padding:16px;
}

.setup-step span{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border:1px solid var(--cyan);
  color:var(--cyan2);
  font-weight:900;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}

.setup-step b{
  color:#fff;
}

.setup-step p{
  color:#7fb9c7;
  margin-top:4px;
  font-size:14px;
}

.setup-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.setup-panel h2{
  color:#fff;
  margin-bottom:30px;
  letter-spacing:1px;
}

label{
  color:var(--cyan2);
  letter-spacing:1px;
  font-size:13px;
  margin:16px 0 8px;
}

input{
  width:100%;
  height:46px;
  background:rgba(0,5,12,.75);
  border:1px solid rgba(0,217,255,.35);
  border-radius:4px;
  color:#fff;
  padding:0 14px;
  outline:none;
}

input:focus{
  border-color:var(--cyan);
  box-shadow:0 0 16px rgba(0,217,255,.25);
}

button{
  height:50px;
  width:100%;
  border:1px solid rgba(255,35,79,.75);
  background:linear-gradient(90deg,rgba(140,0,18,.75),rgba(70,0,12,.6));
  color:#fff;
  font-size:15px;
  font-weight:700;
  letter-spacing:.6px;
  cursor:pointer;
  transition:.2s;
  border-radius:6px;
  box-shadow:0 0 22px rgba(255,35,79,.16);
}

button:hover{
  transform:translateY(-2px);
  box-shadow:0 0 30px rgba(255,35,79,.38);
}

.main-btn{
  margin-top:28px;
}

.secondary{
  border-color:rgba(0,217,255,.45);
  background:rgba(0,217,255,.08);
  height:44px;
  box-shadow:none;
}

.secondary:hover{
  box-shadow:0 0 24px rgba(0,217,255,.25);
}

.note{
  color:#80b5c2;
  line-height:1.6;
  margin-top:18px;
  font-size:14px;
}

/* =========================================================
   ASSISTANT PAGE
========================================================= */

.app{
  height:100vh;
  padding:14px;
  display:grid;
  grid-template-columns:420px 1fr;
  gap:22px;
}

.sidebar,
.stage{
  border:1px solid rgba(0,217,255,.35);
  background:rgba(1,9,18,.72);
  box-shadow:0 0 34px rgba(0,217,255,.16),inset 0 0 30px rgba(0,217,255,.06);
  position:relative;
  overflow:hidden;
}

.sidebar{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
  max-height:calc(100vh - 28px);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--cyan) rgba(0,217,255,.08);
}

.sidebar::-webkit-scrollbar,
.right-panels::-webkit-scrollbar,
.timeline::-webkit-scrollbar{
  width:8px;
}

.sidebar::-webkit-scrollbar-track,
.right-panels::-webkit-scrollbar-track,
.timeline::-webkit-scrollbar-track{
  background:rgba(0,217,255,.08);
  border-radius:999px;
}

.sidebar::-webkit-scrollbar-thumb,
.right-panels::-webkit-scrollbar-thumb,
.timeline::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--cyan),rgba(0,217,255,.25));
  border-radius:999px;
  box-shadow:0 0 12px rgba(0,217,255,.55);
}

.logo{
  height:68px;
  border:1px solid rgba(0,217,255,.25);
  display:grid;
  place-items:center;
  text-align:center;
  background:rgba(0,8,18,.52);
}

.logo h1{
  font-size:38px;
  letter-spacing:11px;
  color:var(--cyan2);
  text-shadow:0 0 20px var(--cyan);
}

.logo p{
  font-size:10px;
  letter-spacing:2px;
  color:#5c92a7;
  margin-top:4px;
}

.box{
  border:1px solid rgba(0,217,255,.45);
  background:linear-gradient(180deg,rgba(0,24,42,.72),rgba(0,9,18,.8));
  padding:15px;
  position:relative;
}

.box h2{
  font-size:17px;
  letter-spacing:.5px;
  margin-bottom:14px;
  color:#eaffff;
  font-weight:500;
}

.box h2 span{
  color:var(--cyan);
  margin-right:8px;
}

.field{
  position:relative;
  margin-top:10px;
}

.field i{
  position:absolute;
  right:14px;
  top:11px;
  color:var(--cyan);
  font-style:normal;
}

.agent-summary{
  display:grid;
  gap:12px;
}

.agent-summary p{
  border:1px solid rgba(0,217,255,.24);
  background:rgba(0,8,18,.46);
  padding:12px;
  border-radius:4px;
}

.agent-summary span{
  display:block;
  color:var(--cyan2);
  font-size:11px;
  letter-spacing:1.2px;
  margin-bottom:6px;
}

.agent-summary b{
  display:block;
  color:#fff;
  font-size:13px;
  line-height:1.4;
  word-break:break-all;
}

.commands{
  font-size:13px;
  line-height:1.65;
  color:#c5f8ff;
}

.commands div{
  display:flex;
  gap:10px;
  align-items:center;
}

.wave{
  color:var(--cyan);
}

.stage{
  padding:0;
}

.topbar{
  height:58px;
  margin:0 18px 16px 18px;
  border:1px solid rgba(0,217,255,.35);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  background:rgba(0,6,14,.75);
}

.stark{
  font-style:italic;
  font-weight:800;
  color:#dffbff;
  letter-spacing:1px;
}

.stark span{
  color:var(--cyan);
  font-size:24px;
  margin-left:8px;
}

.online{
  color:var(--cyan2);
  letter-spacing:2px;
}

.online:before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  background:var(--green);
  border-radius:50%;
  margin-right:10px;
  box-shadow:0 0 12px var(--green);
}

.optimal{
  color:var(--green);
  margin-left:22px;
}

.main{
  height:calc(100vh - 88px);
  margin:0 18px 18px;
  border:1px solid rgba(0,217,255,.25);
  padding:34px 28px;
  display:grid;
  grid-template-columns:230px 1fr 270px;
  gap:26px;
  position:relative;
  overflow:hidden;
}

.main:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 46%,transparent 0 24%,rgba(0,217,255,.05) 31%,transparent 45%),linear-gradient(90deg,rgba(255,35,79,.06),transparent 25%,transparent 70%,rgba(0,217,255,.05));
  pointer-events:none;
}

.title{
  text-align:center;
  position:absolute;
  top:8px;
  left:0;
  right:0;
}

.title h1{
  font-size:54px;
  letter-spacing:12px;
  color:var(--cyan2);
  text-shadow:0 0 24px var(--cyan);
}

.title p{
  letter-spacing:2px;
  color:#eaffff;
  margin-top:4px;
}

.left-panels,
.right-panels{
  padding-top:112px;
  display:flex;
  flex-direction:column;
  gap:36px;
  z-index:2;
}

.right-panels{
  max-height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:8px;
  scrollbar-width:thin;
  scrollbar-color:var(--cyan) rgba(0,217,255,.08);
}

.panel{
  border:1px solid rgba(0,217,255,.42);
  background:rgba(0,9,18,.68);
  min-height:136px;
  padding:16px;
  position:relative;
}

.panel h3{
  font-size:12px;
  color:var(--cyan2);
  letter-spacing:.7px;
  margin-bottom:16px;
}

.panel p{
  font-size:13px;
  color:#67b9c9;
  line-height:1.8;
}

.green{
  color:var(--green)!important;
  font-weight:800;
}

.waveform{
  height:60px;
  background:repeating-linear-gradient(90deg,transparent 0 8px,rgba(0,217,255,.7) 9px 10px,transparent 11px 18px);
  mask-image:linear-gradient(to top,transparent 0%,#000 20%,#000 80%,transparent 100%);
  animation:wavex .8s linear infinite;
}

@keyframes wavex{
  to{transform:translateX(18px)}
}

.bars{
  display:flex;
  align-items:end;
  height:52px;
  gap:5px;
}

.bars span{
  width:12px;
  background:linear-gradient(var(--cyan),transparent);
  animation:bar 1s ease-in-out infinite;
}

.bars span:nth-child(1){height:18px}
.bars span:nth-child(2){height:38px;animation-delay:.1s}
.bars span:nth-child(3){height:22px;animation-delay:.2s}
.bars span:nth-child(4){height:50px;animation-delay:.3s}
.bars span:nth-child(5){height:32px;animation-delay:.4s}
.bars span:nth-child(6){height:45px;animation-delay:.5s}

@keyframes bar{
  50%{height:12px}
}

.center{
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-top:70px;
  height:100%;
  overflow:hidden;
  position:relative;
  flex-shrink:0;
}

.ring{
  width:min(470px,36vw);
  height:min(470px,36vw);
  min-width:360px;
  min-height:360px;
  border-radius:50%;
  position:relative;
  display:grid;
  place-items:center;
  background:radial-gradient(circle,rgba(0,217,255,.09),transparent 58%);
}

.ring:before,
.ring:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgba(0,217,255,.7);
  border-left-color:transparent;
  border-right-color:transparent;
  animation:spin 8s linear infinite;
  box-shadow:0 0 26px rgba(0,217,255,.35);
}

.ring:after{
  inset:38px;
  border-color:rgba(255,35,79,.35);
  border-top-color:transparent;
  border-bottom-color:transparent;
  animation-duration:11s;
  animation-direction:reverse;
}

.r2{
  position:absolute;
  inset:74px;
  border-radius:50%;
  border:1px dashed rgba(0,217,255,.65);
  animation:spin 17s linear infinite;
}

.r3{
  position:absolute;
  inset:118px;
  border-radius:50%;
  border:1px solid rgba(0,217,255,.35);
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

.mic{
  width:140px;
  height:140px;
  border-radius:50%;
  border:2px solid var(--cyan);
  display:grid;
  place-items:center;
  background:rgba(0,10,20,.72);
  box-shadow:0 0 36px rgba(0,217,255,.55),inset 0 0 28px rgba(0,217,255,.16);
  font-size:62px;
  color:#dffbff;
  text-shadow:0 0 18px var(--cyan);
  z-index:3;
}

.ring.listening .mic{
  animation:pulse .8s ease-in-out infinite;
  box-shadow:0 0 50px rgba(0,255,112,.75),inset 0 0 28px rgba(0,255,112,.18);
  border-color:var(--green);
}

@keyframes pulse{
  50%{transform:scale(1.07)}
}

.listen{
  margin-top:22px;
  text-align:center;
  color:var(--cyan2);
  font-size:26px;
  font-weight:800;
  text-shadow:0 0 16px var(--cyan);
  letter-spacing:2px;
}

.heard{
  margin-top:12px;
  color:#9ad5e0;
  min-height:24px;
  text-align:center;
}

.timeline{
  width:min(560px,80%);
  min-height:96px;
  max-height:120px;
  margin-top:36px;
  border:1px solid rgba(0,217,255,.35);
  background:rgba(0,5,12,.62);
  padding:16px;
  overflow-y:auto;
  flex-shrink:0;
}

.timeline h3{
  font-size:12px;
  color:var(--cyan2);
  letter-spacing:.7px;
  margin-bottom:18px;
}

.timeline p{
  font-size:13px;
  color:#619caf;
  line-height:1.6;
  overflow-wrap:break-word;
}

.quick{
  display:grid;
  gap:14px;
}

.quick button{
  height:44px;
  text-align:left;
  padding:0 14px;
  background:rgba(0,217,255,.05);
  border-color:rgba(0,217,255,.3);
  box-shadow:none;
  font-size:13px;
  color:#92d8e6;
}

.quick button span{
  float:right;
  color:var(--cyan);
}

.log p{
  color:var(--cyan2)!important;
}

@media(max-width:1050px){
  body{overflow:auto}
  .page{height:auto;min-height:100vh}
  .config-grid{grid-template-columns:1fr}
  .hero-panel h1{font-size:52px}
  .app{height:auto;grid-template-columns:1fr}
  .sidebar{max-height:none;overflow:visible}
  .main{height:auto;grid-template-columns:1fr}
  .title{position:relative;top:auto;margin-bottom:20px}
  .left-panels,.right-panels{padding-top:0}
  .ring{min-width:300px;min-height:300px}
  .topbar{display:none}
}


/* =========================================================
   V3 - PROFILO AGENTE PIÙ COMPATTO
   Riduce altezza/spazi dei box nella sidebar sinistra.
========================================================= */
.agent-summary{
  gap:8px;
}

.agent-summary p{
  padding:8px 10px;
}

.agent-summary span{
  font-size:10px;
  margin-bottom:4px;
}

.agent-summary b{
  font-size:12px;
  line-height:1.25;
}

.sidebar .box:first-of-type{
  padding:12px;
}

.sidebar .box:first-of-type h2{
  font-size:15px;
  margin-bottom:10px;
}

.sidebar .box:first-of-type .secondary{
  height:36px;
  font-size:12px;
  margin-top:10px!important;
}

.logo{
  height:58px;
}

.logo h1{
  font-size:31px;
  letter-spacing:9px;
}

.logo p{
  font-size:9px;
}


/* =========================================================
   V3 - AUDIO TOGGLE
   Pulsante in basso nella sidebar:
   - verde quando audio attivo
   - rosso quando muted
========================================================= */
.audio-toggle-btn{
  margin-top:16px;
  height:42px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 14px;
  border:1px solid rgba(0,255,112,.65);
  background:linear-gradient(90deg,rgba(0,255,112,.11),rgba(0,217,255,.06));
  color:var(--green);
  box-shadow:0 0 20px rgba(0,255,112,.14), inset 0 0 16px rgba(0,255,112,.05);
  font-size:13px;
  letter-spacing:1px;
}

.audio-toggle-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 26px rgba(0,255,112,.28);
}

.audio-toggle-btn .audio-icon{
  font-size:17px;
  line-height:1;
}

.audio-toggle-btn .toggle-dot{
  width:34px;
  height:18px;
  border:1px solid currentColor;
  border-radius:999px;
  position:relative;
  box-shadow:0 0 12px currentColor;
}

.audio-toggle-btn .toggle-dot:before{
  content:"";
  position:absolute;
  top:3px;
  right:3px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 10px currentColor;
}

.audio-toggle-btn.audio-muted{
  border-color:rgba(255,35,79,.75);
  background:linear-gradient(90deg,rgba(255,35,79,.13),rgba(70,0,12,.42));
  color:var(--red);
  box-shadow:0 0 20px rgba(255,35,79,.16), inset 0 0 16px rgba(255,35,79,.05);
}

.audio-toggle-btn.audio-muted:hover{
  box-shadow:0 0 26px rgba(255,35,79,.32);
}

.audio-toggle-btn.audio-muted .toggle-dot:before{
  right:auto;
  left:3px;
}


/* =========================================================
   V4 - LEFT PANELS SENZA SYSTEM LOG
   Migliora spaziatura e allineamento.
========================================================= */
.left-panels{
  justify-content:center;
  gap:26px;
}

.left-panels .panel{
  min-height:118px;
}


/* =========================================================
   V5 - NEWS DAL MONDO
   Card HUD cliccabile che apre World Monitor.
========================================================= */
.world-news-card{
  min-height:218px;
  width:100%;
  border:1px solid rgba(0,217,255,.42);
  background:
    linear-gradient(rgba(0,217,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,217,255,.035) 1px,transparent 1px),
    rgba(0,9,18,.72);
  background-size:12px 12px;
  padding:18px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:var(--cyan2);
  box-shadow:0 0 24px rgba(0,217,255,.12), inset 0 0 26px rgba(0,217,255,.05);
  cursor:pointer;
  overflow:hidden;
}

.world-news-card:before,
.world-news-card:after{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  border-color:#ff8a00;
  opacity:.95;
}

.world-news-card:before{
  top:-1px;
  left:-1px;
  border-top:2px solid;
  border-left:2px solid;
}

.world-news-card:after{
  bottom:-1px;
  right:-1px;
  border-bottom:2px solid;
  border-right:2px solid;
}

.world-news-card:hover{
  transform:translateY(-2px);
  border-color:rgba(0,217,255,.75);
  box-shadow:0 0 34px rgba(0,217,255,.24), inset 0 0 30px rgba(0,217,255,.08);
}

.satellite-icon{
  font-size:34px;
  filter:drop-shadow(0 0 12px rgba(0,217,255,.55));
}

.world-news-title{
  font-size:17px;
  font-weight:900;
  letter-spacing:3px;
  color:var(--cyan2);
  text-shadow:0 0 14px rgba(0,217,255,.7);
  text-align:center;
}

.world-news-subtitle{
  font-size:12px;
  color:#58b8c9;
  letter-spacing:.4px;
}

.world-news-live{
  font-size:11px;
  color:var(--green);
  font-weight:800;
  letter-spacing:1px;
  text-shadow:0 0 10px rgba(0,255,112,.45);
}

.world-news-divider{
  width:82%;
  height:1px;
  background:rgba(0,217,255,.22);
  margin:6px 0 2px;
}

.world-news-next{
  font-size:9px;
  color:#176b83;
  letter-spacing:1.4px;
  font-weight:800;
}

.world-news-timer{
  font-size:16px;
  color:#ff8a00;
  font-weight:900;
  letter-spacing:2px;
  text-shadow:0 0 10px rgba(255,138,0,.55);
}


/* =========================================================
   V6 - NEWS DAL MONDO TIMER REALE
   Rimosso il testo "Applaudi per il briefing".
   Il timer ora è gestito da JavaScript.
========================================================= */
.world-news-card{
  gap:10px;
}

.world-news-title{
  margin-top:2px;
}

.world-news-next{
  margin-top:6px;
}

.world-news-timer{
  min-width:96px;
  text-align:center;
}


/* =========================================================
   V8 - RESPONSIVE DESKTOP / LAPTOP
   Migliora la visualizzazione su monitor grandi, laptop 15/16",
   laptop 13/14" e schermi più bassi.
========================================================= */

/* Valori fluidi principali */
.app{
  grid-template-columns:clamp(300px, 23vw, 420px) 1fr;
  gap:clamp(12px, 1.2vw, 22px);
  padding:clamp(8px, .9vw, 14px);
}

.sidebar{
  padding:clamp(10px, .95vw, 18px);
  gap:clamp(10px, .9vw, 16px);
  max-height:calc(100vh - clamp(16px, 1.8vw, 28px));
}

.main{
  margin:0 clamp(8px, 1vw, 18px) clamp(8px, 1vw, 18px);
  padding:clamp(18px, 1.8vw, 34px) clamp(14px, 1.5vw, 28px);
  grid-template-columns:clamp(170px, 14vw, 230px) minmax(360px, 1fr) clamp(190px, 16vw, 270px);
  gap:clamp(14px, 1.4vw, 26px);
}

.topbar{
  height:clamp(46px, 4vw, 58px);
  margin:0 clamp(8px, 1vw, 18px) clamp(8px, 1vw, 16px);
  padding:0 clamp(14px, 1.5vw, 24px);
}

.title h1{
  font-size:clamp(34px, 3.3vw, 54px);
  letter-spacing:clamp(6px, .75vw, 12px);
}

.title p{
  font-size:clamp(11px, .9vw, 16px);
}

.logo{
  height:clamp(50px, 5vw, 68px);
}

.logo h1{
  font-size:clamp(25px, 2vw, 38px);
  letter-spacing:clamp(6px, .7vw, 11px);
}

.logo p{
  font-size:clamp(7px, .65vw, 10px);
}

.box{
  padding:clamp(10px, .85vw, 15px);
}

.box h2{
  font-size:clamp(13px, 1vw, 17px);
  margin-bottom:clamp(8px, .8vw, 14px);
}

.commands{
  font-size:clamp(11px, .82vw, 13px);
  line-height:1.55;
}

.agent-summary p{
  padding:clamp(7px, .7vw, 10px);
}

button{
  height:clamp(38px, 3.2vw, 50px);
  font-size:clamp(12px, .9vw, 15px);
}

.secondary{
  height:clamp(34px, 2.8vw, 44px);
}

.left-panels,
.right-panels{
  padding-top:clamp(76px, 7vw, 112px);
  gap:clamp(18px, 2vw, 36px);
}

.panel{
  min-height:clamp(96px, 9vw, 136px);
  padding:clamp(10px, .9vw, 16px);
}

.panel h3{
  font-size:clamp(10px, .75vw, 12px);
  margin-bottom:clamp(10px, .9vw, 16px);
}

.panel p{
  font-size:clamp(11px, .8vw, 13px);
}

.waveform{
  height:clamp(42px, 4vw, 60px);
}

.bars{
  height:clamp(36px, 3.6vw, 52px);
}

.ring{
  width:clamp(280px, 29vw, 470px);
  height:clamp(280px, 29vw, 470px);
  min-width:0;
  min-height:0;
}

.mic{
  width:clamp(88px, 8.7vw, 140px);
  height:clamp(88px, 8.7vw, 140px);
  font-size:clamp(38px, 4vw, 62px);
}

.r2{
  inset:clamp(44px, 4.8vw, 74px);
}

.r3{
  inset:clamp(72px, 7.5vw, 118px);
}

.center{
  padding-top:clamp(42px, 5vw, 70px);
}

.listen{
  font-size:clamp(19px, 1.65vw, 26px);
  margin-top:clamp(14px, 1.4vw, 22px);
}

.heard{
  font-size:clamp(12px, .9vw, 16px);
}

.timeline{
  width:min(560px, 82%);
  min-height:clamp(76px, 7vw, 96px);
  max-height:clamp(88px, 9vw, 120px);
  margin-top:clamp(20px, 2.2vw, 36px);
  padding:clamp(10px, .9vw, 16px);
}

.world-news-card{
  min-height:clamp(165px, 15vw, 218px);
  padding:clamp(12px, 1vw, 18px);
}

.world-news-title{
  font-size:clamp(13px, 1vw, 17px);
  letter-spacing:clamp(1.5px, .25vw, 3px);
}

.world-news-timer{
  font-size:clamp(13px, 1vw, 16px);
}

/* Laptop 15/16 pollici */
@media(max-width:1500px){
  .main{
    grid-template-columns:190px minmax(320px, 1fr) 220px;
  }

  .title{
    top:6px;
  }

  .left-panels,
  .right-panels{
    padding-top:92px;
  }

  .panel{
    min-height:108px;
  }

  .timeline{
    margin-top:24px;
  }
}

/* Laptop 13/14 pollici */
@media(max-width:1280px){
  body{
    overflow:auto;
  }

  .page{
    height:auto;
    min-height:100vh;
  }

  .app{
    min-height:100vh;
    height:auto;
    grid-template-columns:310px minmax(760px, 1fr);
    overflow-x:auto;
  }

  .stage{
    min-width:760px;
  }

  .sidebar{
    max-height:calc(100vh - 20px);
  }

  .main{
    grid-template-columns:170px minmax(300px, 1fr) 190px;
  }

  .ring{
    width:300px;
    height:300px;
  }

  .title h1{
    font-size:38px;
  }

  .left-panels,
  .right-panels{
    padding-top:82px;
  }
}

/* Schermi bassi: evita che l'HUD venga tagliato verticalmente */
@media(max-height:820px){
  .topbar{
    height:44px;
    margin-bottom:8px;
  }

  .main{
    height:calc(100vh - 66px);
    padding-top:18px;
    padding-bottom:10px;
  }

  .title{
    top:4px;
  }

  .left-panels,
  .right-panels{
    padding-top:74px;
    gap:16px;
  }

  .panel{
    min-height:92px;
  }

  .ring{
    width:285px;
    height:285px;
  }

  .center{
    padding-top:42px;
  }

  .timeline{
    margin-top:18px;
    min-height:70px;
    max-height:86px;
  }

  .world-news-card{
    min-height:160px;
  }
}

/* Tablet/mobile: layout verticale */
@media(max-width:1050px){
  body{
    overflow:auto;
  }

  .page{
    height:auto;
    min-height:100vh;
  }

  .config-grid{
    grid-template-columns:1fr;
  }

  .hero-panel h1{
    font-size:52px;
  }

  .app{
    height:auto;
    min-height:100vh;
    grid-template-columns:1fr;
    overflow-x:hidden;
  }

  .stage{
    min-width:0;
  }

  .sidebar{
    max-height:none;
    overflow:visible;
  }

  .main{
    height:auto;
    grid-template-columns:1fr;
  }

  .title{
    position:relative;
    top:auto;
    margin-bottom:20px;
  }

  .left-panels,
  .right-panels{
    padding-top:0;
  }

  .right-panels{
    max-height:none;
    overflow:visible;
  }

  .ring{
    width:300px;
    height:300px;
  }

  .topbar{
    display:none;
  }
}


/* =========================================================
   V9 - FIX SCROLL COLONNA DESTRA
   La colonna destra ora ha uno scroll interno reale.
   Risolve il taglio della card NEWS DAL MONDO su laptop.
========================================================= */

.right-panels{
  height:100%;
  max-height:100%;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:10px;
  padding-bottom:22px;
  scroll-behavior:smooth;
}

/* Le card non devono restringersi o schiacciarsi */
.right-panels .panel,
.right-panels .world-news-card{
  flex:0 0 auto;
}

/* Migliora la visibilità della scrollbar a destra */
.right-panels::-webkit-scrollbar{
  width:8px;
}

.right-panels::-webkit-scrollbar-track{
  background:rgba(0,217,255,.08);
  border-radius:999px;
}

.right-panels::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--cyan),rgba(0,217,255,.25));
  border-radius:999px;
  box-shadow:0 0 12px rgba(0,217,255,.55);
}

/* Su laptop la colonna destra deve restare dentro l'HUD */
@media(max-width:1500px){
  .right-panels{
    max-height:calc(100vh - 150px);
  }
}

/* Su schermi bassi riduce lo spazio e abilita lo scroll */
@media(max-height:820px){
  .right-panels{
    max-height:calc(100vh - 125px);
    padding-bottom:28px;
  }

  .right-panels .panel{
    min-height:88px;
  }

  .world-news-card{
    min-height:150px;
  }
}

/* Su laptop piccoli */
@media(max-width:1280px){
  .right-panels{
    max-height:calc(100vh - 135px);
  }
}


/* =========================================================
   V10 - FIX NEWS DAL MONDO SU LAPTOP
   La card viene resa più compatta e il timer resta sempre visibile.
========================================================= */

.world-news-card{
  min-height:0!important;
  height:auto!important;
  padding:12px 14px!important;
  gap:6px!important;
  justify-content:center!important;
}

.satellite-icon{
  font-size:24px!important;
  line-height:1!important;
}

.world-news-title{
  font-size:14px!important;
  letter-spacing:2px!important;
  line-height:1.15!important;
}

.world-news-live{
  font-size:10px!important;
  margin-top:2px!important;
}

.world-news-divider{
  margin:4px 0 1px!important;
}

.world-news-next{
  font-size:8px!important;
  line-height:1.2!important;
  margin-top:2px!important;
}

.world-news-timer{
  display:block!important;
  font-size:15px!important;
  line-height:1.1!important;
  margin-top:2px!important;
  padding-bottom:2px!important;
}

/* Su laptop: meno gap nella colonna destra e card più bassa */
@media(max-width:1500px){
  .right-panels{
    gap:18px!important;
    padding-bottom:70px!important;
  }

  .world-news-card{
    max-height:none!important;
  }
}

/* Su schermi bassi: timer sempre leggibile */
@media(max-height:820px){
  .right-panels{
    gap:14px!important;
    padding-bottom:90px!important;
  }

  .world-news-card{
    padding:10px 12px!important;
  }

  .satellite-icon{
    font-size:20px!important;
  }

  .world-news-title{
    font-size:12px!important;
    letter-spacing:1.8px!important;
  }

  .world-news-next{
    font-size:7px!important;
  }

  .world-news-timer{
    font-size:14px!important;
  }
}


/* =========================================================
   V11 - APP HUB
   Sostituisce il vecchio profilo agente con un hub applicazioni.
========================================================= */

.agent-user-card{
  border:1px solid rgba(0,217,255,.24);
  background:rgba(0,8,18,.46);
  padding:10px 12px;
  border-radius:4px;
  margin-bottom:12px;
}

.agent-user-card span{
  display:block;
  color:var(--cyan2);
  font-size:10px;
  letter-spacing:1.2px;
  margin-bottom:5px;
}

.agent-user-card b{
  display:block;
  color:#fff;
  font-size:13px;
  line-height:1.25;
}

.app-hub{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}

.app-icon{
  height:72px;
  width:100%;
  padding:8px 4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid rgba(0,217,255,.35);
  background:rgba(0,217,255,.045);
  color:#fff;
  box-shadow:inset 0 0 16px rgba(0,217,255,.04);
}

.app-icon:hover{
  transform:translateY(-2px);
  border-color:rgba(0,217,255,.75);
  box-shadow:0 0 24px rgba(0,217,255,.22), inset 0 0 18px rgba(0,217,255,.07);
}

.app-icon .brand-mark{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:18px;
  font-weight:900;
  background:rgba(0,8,18,.72);
  border:1px solid currentColor;
  text-shadow:0 0 12px currentColor;
}

.app-icon small{
  font-size:9px;
  letter-spacing:.5px;
  color:#bdf8ff;
}

.app-icon.google .brand-mark{
  color:#5ef4ff;
}

.app-icon.youtube .brand-mark{
  color:#ff234f;
}

.app-icon.chatgpt .brand-mark{
  color:#00ff70;
}

.app-icon.twitch .brand-mark{
  color:#b86cff;
}

@media(max-width:1500px){
  .app-icon{
    height:62px;
  }

  .app-icon .brand-mark{
    width:26px;
    height:26px;
    font-size:15px;
  }
}

@media(max-width:1280px){
  .app-hub{
    grid-template-columns:repeat(2, 1fr);
  }

  .app-icon{
    height:58px;
  }
}


/* =========================================================
   V12 - AUTO MICROFONO + COMANDI AGGIORNATI
========================================================= */
.commands{
  line-height:1.52;
}

.commands div{
  font-size:12px;
}

@media(max-height:820px){
  .commands div{
    font-size:11px;
  }
}


/* =========================================================
   V20 - AUTH + ADMIN PANEL
========================================================= */

.title p{
  display:none!important;
}

.auth-message{
  min-height:22px;
  margin-top:12px;
  font-size:13px;
  color:var(--cyan2);
  line-height:1.4;
}

.auth-message.error{
  color:var(--red);
}

.auth-message.success{
  color:var(--green);
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:18px;
}

.admin-top-btn{
  width:auto;
  height:34px;
  padding:0 14px;
  border-color:rgba(0,217,255,.45);
  background:rgba(0,217,255,.08);
  color:var(--cyan2);
  box-shadow:none;
  font-size:12px;
  letter-spacing:1px;
}

.admin-top-btn.locked{
  opacity:.45;
  cursor:not-allowed;
}

.admin-page{
  display:grid;
  place-items:center;
  padding:24px;
}

.admin-shell{
  width:min(1280px,96vw);
  min-height:720px;
  border:1px solid rgba(0,217,255,.38);
  background:rgba(1,9,18,.75);
  box-shadow:0 0 45px rgba(0,217,255,.18),inset 0 0 35px rgba(0,217,255,.07);
  padding:18px;
}

.admin-topbar{
  height:62px;
  border:1px solid rgba(0,217,255,.35);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 24px;
  background:rgba(0,6,14,.75);
  margin-bottom:22px;
}

.admin-back-btn{
  width:auto;
  padding:0 18px;
}

.admin-grid{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:24px;
}

.admin-card{
  border:1px solid rgba(0,217,255,.38);
  background:linear-gradient(180deg,rgba(0,24,42,.72),rgba(0,9,18,.82));
  padding:24px;
  min-height:560px;
}

.admin-card h2{
  color:#fff;
  margin-bottom:12px;
  letter-spacing:1px;
}

.admin-description{
  color:#8abeca;
  font-size:14px;
  line-height:1.6;
  margin-bottom:18px;
}

.admin-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}

.admin-toolbar .secondary{
  width:auto;
  padding:0 18px;
}

#adminStatus{
  font-size:13px;
  color:var(--cyan2);
}

.admin-table-wrap{
  max-height:420px;
  overflow:auto;
  border:1px solid rgba(0,217,255,.25);
  background:rgba(0,5,12,.5);
}

.admin-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.admin-table th,
.admin-table td{
  padding:12px;
  border-bottom:1px solid rgba(0,217,255,.16);
  text-align:left;
  color:#dffbff;
}

.admin-table th{
  color:var(--cyan2);
  letter-spacing:1px;
  font-size:11px;
  background:rgba(0,217,255,.06);
}

.admin-info-box{
  border:1px solid rgba(0,217,255,.24);
  background:rgba(0,8,18,.46);
  padding:14px;
  border-radius:4px;
  margin-bottom:14px;
}

.admin-info-box span{
  display:block;
  color:var(--cyan2);
  font-size:11px;
  letter-spacing:1.2px;
  margin-bottom:6px;
}

.admin-info-box b{
  display:block;
  color:#fff;
  font-size:14px;
}

@media(max-width:1050px){
  .admin-grid{
    grid-template-columns:1fr;
  }

  .admin-topbar{
    height:auto;
    min-height:62px;
    flex-direction:column;
    align-items:flex-start;
    padding:18px;
  }
}


/* =========================================================
   V21 - ADMIN DELETE ACCOUNT
========================================================= */

.delete-user-btn{
  width:auto;
  height:32px;
  padding:0 12px;
  border:1px solid rgba(255,35,79,.75);
  background:rgba(255,35,79,.12);
  color:var(--red);
  font-size:11px;
  letter-spacing:.7px;
  box-shadow:0 0 16px rgba(255,35,79,.12);
}

.delete-user-btn:hover{
  box-shadow:0 0 24px rgba(255,35,79,.32);
}

.delete-user-btn[disabled]{
  opacity:.35;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.modal-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(10px);
  padding:24px;
}

.delete-modal{
  width:min(620px, 94vw);
  border:1px solid rgba(255,35,79,.55);
  background:linear-gradient(180deg,rgba(22,5,12,.94),rgba(0,8,18,.96));
  box-shadow:0 0 50px rgba(255,35,79,.22), inset 0 0 35px rgba(255,35,79,.06);
  padding:28px;
}

.delete-modal h2{
  color:#fff;
  letter-spacing:1.4px;
  margin-bottom:16px;
  text-shadow:0 0 16px rgba(255,35,79,.45);
}

.delete-warning{
  color:var(--red);
  font-weight:800;
  letter-spacing:.4px;
  margin-bottom:16px;
}

.delete-user-box{
  border:1px solid rgba(255,35,79,.35);
  background:rgba(255,35,79,.08);
  padding:14px;
  margin-bottom:16px;
}

.delete-user-box span{
  display:block;
  color:#ff9aac;
  font-size:11px;
  letter-spacing:1.2px;
  margin-bottom:5px;
}

.delete-user-box b{
  color:#fff;
  font-size:18px;
}

.delete-description{
  color:#cdaab2;
  line-height:1.6;
  font-size:14px;
  margin-bottom:14px;
}

.delete-description.strong{
  color:#fff;
}

.delete-confirm-input{
  width:100%;
  height:46px;
  background:rgba(0,5,12,.75);
  border:1px solid rgba(255,35,79,.45);
  border-radius:4px;
  color:#fff;
  padding:0 14px;
  outline:none;
  margin-bottom:18px;
}

.delete-confirm-input:focus{
  border-color:var(--red);
  box-shadow:0 0 16px rgba(255,35,79,.25);
}

.delete-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.danger-btn{
  border-color:rgba(255,35,79,.85);
  background:linear-gradient(90deg,rgba(150,0,25,.85),rgba(70,0,12,.7));
  color:#fff;
}

.danger-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.delete-modal-message{
  min-height:20px;
  margin-top:14px;
  font-size:13px;
  color:var(--red);
}

@media(max-width:700px){
  .delete-actions{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V22 - FIX POPUP ELIMINA
   Rende il click più affidabile e il popup sempre sopra tutto.
========================================================= */
.delete-user-btn{
  pointer-events:auto;
  position:relative;
  z-index:5;
}

.modal-overlay{
  z-index:2147483647!important;
}

.delete-confirm-input:disabled{
  opacity:.45;
  cursor:not-allowed;
}


/* =========================================================
   V23 - CHECK NOME UTENTE DUPLICATO
========================================================= */
.auth-message.error{
  border:1px solid rgba(255,35,79,.35);
  background:rgba(255,35,79,.08);
  padding:9px 11px;
  border-radius:4px;
}

.auth-message.success{
  border:1px solid rgba(0,255,112,.28);
  background:rgba(0,255,112,.06);
  padding:9px 11px;
  border-radius:4px;
}