:root{
      /* Discord palette */
      --blurple:#5865F2; /* primary */
      --dark-1:#202225; /* sidebar bg */
      --dark-2:#2F3136; /* page bg */
      --dark-3:#36393F; /* cards */
      --text-1:#ffffff;
      --text-2:#dcddde;
      --fuchsia:#EB459E;
      --success:#57F287;
      --ring: rgba(88,101,242,.55);
      --radius-xl:18px; --radius-lg:14px; --radius-md:10px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --sidebar-w: 300px; /* desktop width */
      --nav-h: 64px;
      --safe-top: env(safe-area-inset-top);
      --safe-bottom: env(safe-area-inset-bottom);
    }
    *, *::before, *::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
      background:var(--dark-2); color:var(--text-2);
      min-height:100dvh;
    }
    a{color:inherit; text-decoration:none}

    /* ====== Layout base ====== */
    .app{display:grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--nav-h) 1fr; min-height:100dvh}

    /* Top Navbar */
    .topnav{
      grid-column:1 / -1; grid-row:1;
      position:sticky; top:0; z-index:30;
      height:var(--nav-h);
      display:flex; align-items:center; gap:10px;
      padding:0 14px; padding-top: max(0px, var(--safe-top));
      backdrop-filter: saturate(180%) blur(8px);
      background: rgba(32,34,37,.72);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .brand{display:flex; align-items:center; gap:10px}
    .brand i{color:var(--blurple)}
    .brand h1{margin:0; font-size: clamp(16px, 2vw, 18px); color:var(--text-1); letter-spacing:.2px}
    .spacer{flex:1}
    .nav-links{display:flex; align-items:center; gap:6px}
    .nav-link{padding:8px 12px; border-radius:6px; font-weight:600; color:var(--text-1); opacity:.9; transition:background .2s ease, transform .2s ease}
    .nav-link:hover{background:rgba(88,101,242,.12); transform:translateY(-1px)}
    .nav-link.active{background:var(--blurple); color:white}

    .nav-link.login-btn {
      background: #3c46b9;
      color: white;
      border: 0;
    }
    /* hover/focus opzionali (leggero feedback) */
    .nav-link.login-btn:hover,
    .nav-link.login-btn:focus {
      filter: brightness(0.95);
      box-shadow: 0 6px 16px rgba(0,0,0,.2);
    }

    /* Mobile hamburger */
    .hamburger{display:none; width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:#1f2126; color:#fff; align-items:center; justify-content:center}
    .hamburger:focus{outline:2px solid var(--ring); outline-offset:2px}

    /* Sidebar */
    aside{grid-column:1; grid-row:2; position:sticky; top:var(--nav-h); height:calc(100dvh - var(--nav-h)); overflow:auto; background:var(--dark-1); border-right:1px solid rgba(255,255,255,.06); padding:24px 18px; display:flex; flex-direction:column; gap:20px; z-index:20}
    .profile{background:linear-gradient(145deg, rgba(88,101,242,.15), rgba(235,69,158,.12)); border:1px solid rgba(255,255,255,.06); padding:18px; border-radius:var(--radius-xl); box-shadow:var(--shadow)}
    .avatar{width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg, var(--blurple), var(--fuchsia)); padding:3px; display:inline-block}
    .avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block}
    .who h2{margin:12px 0 4px; color:var(--text-1); font-size:20px}
    .who p{margin:0; opacity:.9}
    .badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
    .badge{font-size:12px; padding:6px 10px; border-radius:999px; background:#1f2126; border:1px solid rgba(255,255,255,.06)}
    .social{display:flex; gap:10px; margin-top:12px}
    .social a{width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:#1f2126; border:1px solid rgba(255,255,255,.06); transition:transform .2s ease, background .2s ease}
    .social a:hover{transform:translateY(-2px); background:rgba(88,101,242,.15)}
    .sidebar-links{margin-top:auto; display:grid; gap:8px}
    .sidebar-links a{padding:10px 12px; border-radius:10px; display:flex; align-items:center; gap:10px; opacity:.9}
    .sidebar-links a:hover{background:#1f2126}
    .footer{font-size:12px; opacity:.6; margin-top:8px; padding-bottom: max(8px, var(--safe-bottom))}

    /* Main */
    main{grid-column:2; grid-row:2; z-index:10}
    .container{max-width:1100px; margin:0 auto; padding:20px 18px 72px 18px}
    section{scroll-margin-top:calc(var(--nav-h) + 14px)}

    .hero{display:grid; grid-template-columns:1fr; gap:16px; padding:22px; border-radius:var(--radius-xl); background:linear-gradient(180deg, rgba(88,101,242,.10), rgba(32,34,37,1)); border:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow); margin-top:16px; animation:fadeUp .6s ease both}
    .hero h2{color:var(--text-1); font-size: clamp(24px, 3.2vw, 34px); margin:0}
    .hero p{margin:6px 0 0; line-height:1.7}

    .pill{display:inline-flex; align-items:center; gap:8px; font-size:12px; padding:6px 10px; background:#1f2126; border:1px solid rgba(255,255,255,.06); border-radius:999px}

    .grid{display:grid; gap:16px}
    /* Auto-fit griglia responsive */
    .grid.auto-fit{grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr))}

    .card{background:var(--dark-3); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-lg); padding:16px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; opacity:0; transform:translateY(12px)}
    .card.revealed{opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease}
    .card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(88,101,242,.35)}
    .card h3{margin:0 0 8px; color:var(--text-1); font-size:18px}
    .card p{margin:0; opacity:.9}

    .cta{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background:var(--blurple); color:#fff; font-weight:700; border:none; cursor:pointer}
    .cta:focus{outline:2px solid var(--ring); outline-offset:3px}

    form{display:grid; gap:12px; background:var(--dark-3); border:1px solid rgba(255,255,255,.06); padding:16px; border-radius:var(--radius-lg)}
    input, textarea{width:100%; background:#1f2126; color:var(--text-1); border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:12px 12px; font:inherit}
    textarea{min-height:120px; resize:vertical}
    .muted{font-size:13px; opacity:.75}

    /* ====== Mobile-first tweaks ====== */
    @media (max-width: 1024px){
      .app{grid-template-columns: 1fr; grid-template-rows: var(--nav-h) auto}
      main{grid-column:1; grid-row:2}
      /* Navbar: mostra hamburger, nascondi brand testo lungo su telefoni piccoli */
      .hamburger{display:flex}
      aside{position:fixed; inset:var(--nav-h) 0 0 0; height:auto; transform:translateX(-100%); transition: transform .28s ease; max-width:min(92vw, 360px); border-right:1px solid rgba(255,255,255,.08); box-shadow: var(--shadow)}
      aside.open{transform:translateX(0)}
      .overlay{position:fixed; inset:var(--nav-h) 0 0 0; background:rgba(0,0,0,.45); backdrop-filter: blur(1px); opacity:0; pointer-events:none; transition:opacity .28s ease}
      .overlay.show{opacity:1; pointer-events:auto}
      /* nav-links scrollabile orizzontale su mobile */
      .nav-links{overflow:auto; -webkit-overflow-scrolling:touch}
    }

    /* Riduzione motion */
    @media (prefers-reduced-motion: reduce){
      *{animation:none !important; transition:none !important}
      html{scroll-behavior:auto}
    }

    @keyframes fadeUp{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* === Mobile: sidebar sempre visibile, nessun hamburger/overlay === */
@media (max-width: 720px){
  /* Layout a una colonna: NAV → SIDEBAR → MAIN */
  .app{
    grid-template-columns: 1fr;
    grid-template-rows: var(--nav-h) auto auto;
  }

  /* Sidebar visibile come sezione “normale” */
  aside{
    position: static;
    top: auto;
    height: auto;
    transform: none !important;   /* annulla il translateX del drawer */
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: none;
  }

  /* Il contenuto principale viene dopo la sidebar */
  main{
    grid-column: 1;
    grid-row: 3;
  }

  /* Niente hamburger e niente overlay su mobile */
  .hamburger{ display: none !important; }
  .overlay{ display: none !important; }
}

/* FIX overflow navbar: permetti al blocco link di restringersi e andare a capo */
.topnav { flex-wrap: wrap; }                /* consenti il wrap quando serve */
.nav-links {
  flex: 1 1 auto;                           /* può crescere e ridursi */
  min-width: 0;                             /* fondamentale: consente di non “spingere” il layout */
  flex-wrap: wrap;                          /* i link vanno a capo se manca spazio */
}

/* Variante mobile/tablet: rimuovi lo scroll orizzontale della nav e usa il wrap */
@media (max-width: 1024px){
  .nav-links {
    overflow: visible;                      /* NON auto su orizzontale */
    -webkit-overflow-scrolling: auto;       /* disattiva inerzia inutile qui */
    row-gap: 6px;                            /* un filo di spazio tra le righe */
  }
}

/* Migliora il brand su schermi stretti (evita che allunghi la nav) */
.brand { min-width: 0; }
.brand h1 {
  max-width: 60vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- NAV più compatta: tiene il Login sulla stessa riga --- */
@media (max-width: 900px){
  .topnav{ gap:6px; }
  .brand h1{
    max-width: 42vw;                 /* lascia più spazio ai link */
    font-size: clamp(13px, 2.6vw, 16px);
  }
  .nav-links{
    flex-wrap: nowrap;               /* tutto su una riga */
    flex: 1 1 auto;
    min-width: 0;
  }
  .nav-link{
    padding: 6px 10px;               /* meno padding */
    font-size: 14px;                 /* font un filo più piccolo */
  }
  .nav-link i{                        /* icone leggermente più piccole */
    font-size: 0.95em;
    margin-right: 6px;
  }
  .nav-link.active{
    background: var(--blurple);
    color: #fff;
    padding: 1px;
  }
  .nav-link.login-btn{
    white-space: nowrap;             /* non va mai a capo */
    flex: 0 0 auto;
  }
}

/* Telefoni medi/piccoli: ulteriore micro-shrink */
@media (max-width: 720px){
  .brand h1{ max-width: 38vw; margin-top: 10px;}
  .nav-link{ padding: 6px 8px; font-size: 13px; }
  .nav-link i{ font-size: 0.9em; margin-right: 6px; }
}