/* LumenTV Base Design System — v1.2
   Palette, tipografia e componenti riutilizzabili (hero card, badge, bottoni, modal)
   Font: Nunito (caricato dall'HTML)
*/

/* ========== Root tokens ========== */
:root{
  --bg:#0b1220;
  --bg2:#0e1a2e;
  --brand:#2aa1ff;
  --text:#e9eef8;
  --muted:#9fb2c8;
  --danger:#ff6b6b;
  --ok:#23d18b;
  --card:#111a2e;
  --ring: rgba(42,161,255,.25);
}

/* ========== Reset/Scaffold ========== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:"Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(60vw 60vw at 60% -10%, rgba(255,140,0,.12), transparent 60%),
    radial-gradient(40vw 40vw at 20% 10%, rgba(42,161,255,.15), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  display:flex; align-items:center; justify-content:center;
  overflow-x:hidden;
  padding: max(10px, env(safe-area-inset-top))
           max(10px, env(safe-area-inset-right))
           max(10px, env(safe-area-inset-bottom))
           max(10px, env(safe-area-inset-left));
}

/* più ampio su desktop, invariato su mobile */
.container{ width:min(90vw, 1680px); position:relative; padding:1rem; }


/* ========== Topbar / Area riservata ========== */
.topbar{
  position:absolute; inset:0 0 auto 0; height:64px;
  display:flex; align-items:center; justify-content:flex-end; padding:0 .5rem;
  z-index:50; /* sopra la card */
}
.area-btn{
  position:relative; display:inline-flex; align-items:center; gap:.55rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  padding:.7rem .95rem; border-radius:999px; color:var(--text); text-decoration:none;
  backdrop-filter: blur(6px); transition:.2s transform,.2s background,.2s border-color;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.area-btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.15) }

/* Etichetta "ACCESSO" — nascosta; visibile su hover/focus/prossimità */
.area-btn .overlay-label{
  position:absolute; top:-10px; right:10px; font-size:.62rem; letter-spacing:.12em;
  background:rgba(42,161,255,.2); border:1px solid rgba(42,161,255,.35);
  color:#bfe3ff; padding:.15rem .4rem; border-radius:6px;
  opacity:0; transform: translateY(-6px) scale(.95);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.area-btn:hover .overlay-label,
.area-btn:focus-visible .overlay-label,
.area-btn.near .overlay-label{ opacity:1; transform:none; }

.lock{ width:18px; height:18px; flex:0 0 18px; filter: drop-shadow(0 0 10px rgba(42,161,255,.3)); }

/* ========== Card / Hero ========== */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:clamp(1.4rem, 4.5vw, 3rem);
  box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02);
  position:relative; overflow:hidden;
}
.glow{
  position:absolute; top:-30%; right:-10%;
  width:80vw; max-width:900px; aspect-ratio:1/1;
  background: radial-gradient(closest-side, rgba(255,156,43,.25), transparent 70%);
  filter: blur(30px); pointer-events:none;
}
.brand{ display:flex; align-items:center; gap:clamp(.8rem,2vw,1rem); flex-wrap:wrap; }
.brand img{
  width:clamp(84px, 14vw, 140px); height:auto; object-fit:contain; border-radius:16px;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}
.brand h1{ margin:0; font-weight:800; font-size:clamp(1.7rem,3.6vw,2.8rem); line-height:1.1; letter-spacing:.01em; }

.kicker{ margin:1rem 0 0; font-weight:700; letter-spacing:.12em; color:#b9d7ff; text-transform:uppercase; font-size:.8rem }
.lead{ margin:.6rem 0 0; font-size:clamp(1rem,1.5vw,1.15rem); color:#cfe0f6; max-width:80ch; }

/* ========== Buttons & Badges ========== */
.btn{
  appearance:none; border:0; border-radius:12px; padding:1rem 1.1rem; font-weight:800; cursor:pointer;
  display:inline-flex; align-items:center; gap:.6rem; font-size:1rem;
  color:#07121f; background:linear-gradient(180deg,#6bb9ff,#2aa1ff); box-shadow:0 8px 28px rgba(42,161,255,.35);
  -webkit-tap-highlight-color:transparent;
}
.btn.secondary{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.12); box-shadow:none; }
.cta-row{ margin-top:1.2rem; display:flex; gap:.8rem; flex-wrap:wrap }

.badges{ margin-top:1.4rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.badge{ font-size:.75rem; padding:.35rem .55rem; border-radius:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#cfe0f6 }

/* ========== Modal ========== */
.modal{ position:fixed; inset:0; display:none; place-items:center; z-index:1000; }
.modal.show{ display:grid }
.modal .backdrop{ position:absolute; inset:0; background:rgba(5,10,18,.75); backdrop-filter: blur(7px); }
.dialog{
  position:relative; width:min(520px, 92vw); background:var(--card);
  border:1px solid rgba(255,255,255,.09); border-radius:18px; padding:1.2rem;
  box-shadow:0 30px 80px rgba(0,0,0,.6); animation:pop .16s ease-out;
}
@keyframes pop{ from{ transform:scale(.98); opacity:0 } to{ transform:scale(1); opacity:1 } }
.dialog h3{ margin:.4rem 0 1rem; font-size:1.25rem }
.field{ display:flex; flex-direction:column; gap:.4rem; margin:.7rem 0 }
.field input{
  width:100%; padding:1rem .95rem; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04); color:var(--text); outline:none; font-size:1rem;
}
.field input:focus{ box-shadow:0 0 0 4px var(--ring); border-color:rgba(42,161,255,.45) }
.actions{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:1rem; flex-wrap:wrap }
.error{ color:var(--danger); font-size:.95rem; min-height:1.2rem }
.ok{ color:var(--ok); font-size:.95rem; min-height:1.2rem }
.x{ position:absolute; top:.6rem; right:.6rem; background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:1.6rem; line-height:1; }

/* ========== Footer ========== */
footer{ margin-top:1.6rem; color:#9fb2c8; font-size:.95rem }
footer a{ color:#bfe3ff; text-decoration:none }

/* ========== Responsive ========== */
@media (max-width:480px){
  .topbar{ height:56px }
  .area-btn span{ display:none } /* su schermi piccoli: solo icona */
}
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }

/* Danger buttons globali */
.l-btn.danger,
.btn.danger,
button.danger {
  background: #e53935;
  color: #fff;
  border: 0;
}
.l-btn.danger:hover,
.btn.danger:hover,
button.danger:hover {
  filter: brightness(1.05);
}