@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg:       #0a080f;
  --bg-nav:   #110e1a;
  --bg-card:  #110e1a;
  --bg-card2: #1a1528;
  --bg-input: #0a080f;

  /* Viola principale */
  --gold:        #f5e642;
  --gold-dim:    rgba(245,230,66,0.12);
  --gold-border: rgba(245,230,66,0.28);

  /* Accent viola */
  --purple:        #7c3aed;
  --purple-bright: #9d5cf6;
  --purple-dim:    rgba(124,58,237,0.18);
  --purple-border: rgba(124,58,237,0.35);

  --green:     #22c55e;
  --green-dim: rgba(34,197,94,0.14);
  --red:       #ef4444;
  --blue:      #7c3aed;

  --text-1: #f0eaf8;
  --text-2: #9b8eb5;
  --text-3: #4e4466;

  --border:    rgba(255,255,255,0.07);
  --radius:    8px;
  --radius-sm: 5px;
  --font:      'Inter', sans-serif;
  --nav-h:     58px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--purple-bright); text-decoration: none; }
a:hover { color: var(--gold); }

/* ── Navbar ── */
.topnav {
  position: sticky; top: 0; z-index: 200;
  height: var(--nav-h);
  background: var(--bg-nav);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 2rem; gap: 2.5rem;
}
.topnav-logo { display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0; }
.topnav-brand { font-size:1.05rem;font-weight:700;color:var(--text-1);letter-spacing:.3px; }
.topnav-tabs { display:flex;align-items:center;gap:.15rem;flex:1; }
.tab-link { padding:.4rem .85rem;font-size:.875rem;font-weight:500;color:var(--text-2);border-radius:var(--radius-sm);transition:all .15s;white-space:nowrap; }
.tab-link:hover { color:var(--text-1);background:rgba(255,255,255,.05); }
.tab-link.active { color:var(--text-1);background:var(--purple-dim);border-bottom:2px solid var(--purple-bright); }
.topnav-right { display:flex;align-items:center;gap:.75rem;margin-left:auto; }

/* Discord pill */
.discord-pill-global { display:flex;align-items:center;gap:8px;background:rgba(88,101,242,.15);border:1px solid rgba(88,101,242,.35);border-radius:20px;padding:4px 12px 4px 6px; }
.discord-pill-global img { width:26px;height:26px;border-radius:50%;object-fit:cover; }
.discord-pill-global span { font-size:12px;font-weight:600;color:var(--text-1); }
.discord-pill-global .logout-btn { background:none;border:none;color:var(--text-3);cursor:pointer;font-size:13px;padding:0 0 0 4px; }
.discord-pill-global .logout-btn:hover { color:var(--red); }

/* ── Home hero ── */
.home-hero {
  min-height: calc(100vh - var(--nav-h));
  display: flex; align-items: center; justify-content: center; text-align: center;
  background:
    radial-gradient(ellipse 55% 55% at 15% 50%, rgba(124,58,237,.18) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 85% 50%, rgba(245,230,66,.08) 0%, transparent 65%);
  padding: 2rem;
}
.home-hero-inner { max-width: 660px; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(124,58,237,.12); border: 1px solid var(--purple-border);
  border-radius: 20px; padding: 5px 14px;
  font-size: .8rem; color: var(--purple-bright); margin-bottom: 1.25rem;
}
.home-hero h1 { font-size: clamp(2rem,5vw,3.2rem); font-weight: 800; line-height: 1.15; color: var(--text-1); margin-bottom: 1rem; }
.home-hero h1 .accent { color: var(--gold); }
.home-hero p { font-size: .975rem; color: var(--text-2); margin-bottom: 2rem; }

/* ── Page hero (inner pages) ── */
.page-hero {
  position: relative; overflow: hidden;
  padding: 2.5rem 2.5rem 2rem;
  border-bottom: 1px solid var(--border);
  min-height: 170px;
  display: flex; align-items: flex-end;
  background: linear-gradient(180deg, rgba(124,58,237,.06) 0%, transparent 100%);
}
.page-hero-wm {
  position: absolute; bottom:-20px; right:0;
  font-size: 8rem; font-weight: 800; line-height: 1;
  color: rgba(124,58,237,.06); letter-spacing: -3px;
  text-transform: uppercase; user-select: none; pointer-events: none;
  white-space: nowrap;
}
.page-hero-content { position:relative;z-index:1; }
.page-hero h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: .3rem; }
.page-hero p { font-size: .875rem; color: var(--text-2); margin-bottom: .75rem; }
.page-hero-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--purple-dim); border: 1px solid var(--purple-border);
  border-radius: 6px; padding: 5px 12px;
  font-size: .8rem; color: var(--purple-bright); font-weight: 500; cursor: pointer;
  transition: border-color .15s;
}
.page-hero-pill:hover { border-color: var(--purple-bright); }

/* ── Filter bar ── */
.filter-bar { display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:1.5rem 2.5rem;border-bottom:1px solid var(--border); }
.filter-btn {
  display:flex;align-items:center;gap:10px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:.65rem 1rem;cursor:pointer;transition:all .15s;color:var(--text-1);
  font-family:var(--font);font-size:.875rem;font-weight:500;text-align:left;
}
.filter-btn:hover { border-color:var(--purple-border);background:var(--bg-card2); }
.filter-btn.active { border-color:var(--purple-border);background:var(--purple-dim);color:var(--purple-bright); }
.filter-btn-icon { width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0; }

/* ── Sessions grid ── */
.sessions-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border); }
.session-card { background:var(--bg-card);padding:1.25rem 1.5rem;cursor:pointer;transition:background .15s;position:relative;overflow:hidden; }
.session-card:hover { background:var(--bg-card2); }
.session-card-bar { position:absolute;top:0;left:0;right:0;height:3px; }
.session-card-bar.active   { background:var(--green); }
.session-card-bar.complete { background:var(--text-3); }
.session-card-bar.standby  { background:var(--purple-bright); }
.session-card-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem; }
.session-status { display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:4px;font-size:11px;font-weight:600; }
.session-status.active   { background:var(--green-dim);color:var(--green); }
.session-status.complete { background:rgba(255,255,255,.06);color:var(--text-2); }
.session-status.standby  { background:var(--purple-dim);color:var(--purple-bright); }
.session-time { font-size:12px;color:var(--text-3); }
.session-title { font-size:.975rem;font-weight:600;color:var(--text-1);margin-bottom:1rem; }
.session-btn {
  display:inline-flex;align-items:center;gap:6px;
  background:var(--gold-dim);color:var(--gold);
  border:1px solid var(--gold-border);border-radius:var(--radius-sm);
  padding:.4rem .9rem;font-size:.8rem;font-weight:600;cursor:pointer;
  font-family:var(--font);transition:all .15s;
}
.session-btn:hover { background:rgba(245,230,66,.2); }

/* ── Page container ── */
.page { max-width:1280px;margin:0 auto;padding:2rem; }

/* ── Card ── */
.card { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;transition:border-color .15s; }
.card:hover { border-color:var(--purple-border); }

/* ── Section label ── */
.section-label { font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-3);margin-bottom:.75rem; }

/* ── Stat ── */
.stat-block { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;text-align:center; }
.stat-block .val { font-size:2rem;font-weight:800;line-height:1;margin-bottom:4px; }
.stat-block .lbl { font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:1px; }

/* ── Buttons ── */
.btn { display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:.58rem 1.2rem;font-family:var(--font);font-size:.875rem;font-weight:600;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;transition:all .15s;white-space:nowrap; }
.btn-gold    { background:var(--purple);color:#fff;border-color:var(--purple); }
.btn-gold:hover { background:var(--purple-bright);box-shadow:0 0 20px rgba(124,58,237,.4); }
.btn-outline { background:transparent;color:var(--text-1);border-color:var(--border); }
.btn-outline:hover { border-color:var(--purple-border);background:var(--purple-dim); }
.btn-danger  { background:rgba(239,68,68,.1);color:var(--red);border-color:rgba(239,68,68,.3); }
.btn-danger:hover { background:rgba(239,68,68,.2); }
.btn-discord { background:#5865F2;color:#fff;border-color:#5865F2; }
.btn-discord:hover { background:#4752c4; }
.btn-ghost   { background:transparent;color:var(--text-2);border-color:var(--border); }
.btn-ghost:hover { color:var(--text-1);background:rgba(255,255,255,.05); }

/* ── Forms ── */
.form-group { margin-bottom:1rem; }
.form-label { display:block;font-size:12px;font-weight:500;color:var(--text-2);margin-bottom:5px; }
.form-control { width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-1);font-family:var(--font);font-size:13px;padding:.55rem .75rem;outline:none;transition:border-color .15s; }
.form-control:focus { border-color:var(--purple-border); }
.form-control::placeholder { color:var(--text-3); }
textarea.form-control { resize:vertical; }
.help-text { font-size:11px;color:var(--text-3);margin-top:4px; }

/* ── Table ── */
.table-wrap { overflow-x:auto; }
table { width:100%;border-collapse:collapse; }
table th { padding:.6rem 1rem;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--border);text-align:left; }
table td { padding:.75rem 1rem;border-bottom:1px solid var(--border);font-size:13px; }
table tbody tr:last-child td { border-bottom:none; }
table tbody tr:hover { background:var(--bg-card2); }

/* ── Badge ── */
.badge { display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:600; }
.badge-live     { background:var(--green-dim);color:var(--green);border:1px solid rgba(34,197,94,.3); }
.badge-standby  { background:var(--purple-dim);color:var(--purple-bright);border:1px solid var(--purple-border); }
.badge-closed   { background:rgba(255,255,255,.05);color:var(--text-3);border:1px solid var(--border); }
.badge-complete { background:rgba(255,255,255,.05);color:var(--text-2);border:1px solid var(--border); }
.badge-bot      { background:rgba(88,101,242,.12);color:#818cf8;border:1px solid rgba(88,101,242,.3); }

/* ── Grid ── */
.grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }
.grid-3 { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; }
.grid-4 { display:grid;grid-template-columns:repeat(4,1fr);gap:1rem; }

/* ── Toast ── */
#toast { position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(60px);background:var(--bg-card);border:1px solid var(--purple-border);color:var(--purple-bright);font-size:13px;font-weight:600;padding:8px 20px;border-radius:var(--radius);z-index:9999;transition:transform .25s;pointer-events:none; }
#toast.show { transform:translateX(-50%) translateY(0); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:5px;height:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--purple-dim);border-radius:3px; }

/* ── Mobile ── */
.mobile-toggle { display:none;background:none;border:none;color:var(--text-1);font-size:1.3rem;cursor:pointer; }
@media (max-width:768px) {
  .topnav { padding:0 1rem;gap:1rem; }
  .topnav-tabs { display:none; }
  .topnav-tabs.open { display:flex;flex-direction:column;position:fixed;top:var(--nav-h);left:0;right:0;background:var(--bg-nav);border-bottom:1px solid var(--border);padding:1rem;z-index:199; }
  .mobile-toggle { display:block; }
  .page { padding:1rem; }
  .grid-2,.grid-3,.grid-4,.sessions-grid,.filter-bar { grid-template-columns:1fr; }
}