/* Base */
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#0b1020; color:#e9eef9; margin:0; }
.container{ max-width:900px; margin:40px auto; padding:0 16px; }
.card{ background:#121a33; padding:16px; border-radius:12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); margin-bottom:16px; }
input, button { width:100%; padding:10px; margin:6px 0 12px; border-radius:8px; border:1px solid #2a355c; background:#0f1730; color:#e9eef9; }
button { cursor:pointer; }
a.btn{ display:inline-block; background:#1f2a52; padding:10px 14px; border-radius:8px; text-decoration:none; color:#e9eef9; margin-right:10px; }

.grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

@media (max-width: 800px){
  .grid{ grid-template-columns:1fr; }
} /* ← CHIUSO QUI */

/* Logo responsive – fuori dalla media */
:root { --logo-h: clamp(56px, 10vw, 120px); }  /* più grande */
.brand { display:flex; align-items:center; gap:10px; }
.logo-img{
  display:block;
  height: var(--logo-h);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Base */
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#0b1020; color:#e9eef9; margin:0; }
.container{ max-width:900px; margin:40px auto; padding:0 16px; }
.card{ background:#121a33; padding:16px; border-radius:12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); margin-bottom:16px; }
input, button { width:100%; padding:10px; margin:6px 0 12px; border-radius:8px; border:1px solid #2a355c; background:#0f1730; color:#e9eef9; }
button { cursor:pointer; }
a.btn{ display:inline-block; background:#1f2a52; padding:10px 14px; border-radius:8px; text-decoration:none; color:#e9eef9; margin-right:10px; }

.grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

@media (max-width: 800px){
  .grid{ grid-template-columns:1fr; }
} /* ← CHIUSO QUI */

/* Logo responsive – fuori dalla media */
header.nav{
  max-width:var(--maxw);
  margin:0 auto;
  padding:12px clamp(14px,3vw,28px);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap;                 /* <— consenti a logo+nav di andare a capo su mobile */
}

/* Logo responsive */
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.logo-img{
  display:block;
  width: clamp(200px, 55vw, 420px); /* <— scala in base alla larghezza viewport */
  height: auto;                     /* mantiene il rapporto */
  max-width:100%;                   /* evita overflow nel contenitore */
  object-fit:contain;
}

/* Nav: permetti wrapping su mobile */
.nav-links{ display:flex; gap:12px; font-size:14px; flex-wrap:wrap; }

/* Elimina qualsiasi scroll orizzontale accidentale su mobile */
html,body{ width:100%; overflow-x:hidden; }

/* Mobile tweaks */
@media (max-width: 640px){
  header.nav{ align-items:flex-start; }
  .nav-links{ width:100%; margin-top:8px; }
  .cta-dash{ margin-left:0; }
}
/* ==== FIX MOBILE HEADER / NAV / LOGO (aggiungi in fondo al CSS) ==== */

/* evita qualsiasi scroll orizzontale accidentale */
html, body { max-width: 100%; overflow-x: hidden; }

/* header: su mobile il menu va sotto al logo, a piena larghezza */
@media (max-width: 900px){
  header.nav{
    padding: 12px 16px;                /* padding costante ai lati */
    flex-direction: column;            /* brand sopra, menu sotto */
    align-items: flex-start;
    gap: 8px;
  }

  .brand{
    width: 100%;
    min-width: 0;
  }

  /* logo davvero responsive: limita la larghezza rispetto al viewport */
  .logo-img{
    height: auto;                      /* niente altezza fissa */
    max-width: min(88vw, 420px);       /* non supera lo schermo */
    width: auto;
    display: block;
  }

  .nav-links{
    width: 100%;
    display: flex;
    flex-wrap: wrap;                   /* va a capo se serve */
    gap: 14px;
    font-size: 16px;
    justify-content: flex-start;       /* allineato a sinistra */
    margin: 0;
  }

  /* stesso padding laterale per il contenuto, così tutto è allineato */
  main.wrap{ padding: 12px 16px; }
  footer{ padding: 0 16px; }
}

/* piccolo hardening sulle tab per evitare overflow */
.tabs{ min-width: 0; }
.tab{ flex: 1 1 0; }