@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&display=swap');

/* ── Design tokens ─────────────────────────────────────── */
:root {
  font-size: 125%;
  --bg:     #07070E;
  --card:   #0D0D1A;
  --card2:  #131325;
  --muted:  #1A1A2E;
  --brd:    rgba(255,255,255,0.07);
  --green:  #22D97A;
  --purple: #7C3AED;
  --violet: #A78BFA;
  --blue:   #60A5FA;
  --gold:   #F59E0B;
  --rose:   #F43F5E;
  --tx:     #E2E4F0;
  --tx2:    #7B7EA8;
  --tx3:    #3D4170;
  --fd:     'Orbitron', monospace;
  --r:      10px;
  --rs:     6px;
  --t:      0.15s ease;
}

@media (max-width: 767px)                         { :root { font-size: 100%;  } }
@media (min-width: 768px) and (max-width: 1023px) { :root { font-size: 112%;  } }

/* ── Body background ───────────────────────────────────── */
body {
  background:
    radial-gradient(ellipse 80% 50% at -5% -5%, rgba(124,58,237,0.1) 0%, transparent 55%),
    var(--bg);
}

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar           { width: 4px; height: 4px; }
::-webkit-scrollbar-track     { background: transparent; }
::-webkit-scrollbar-thumb     { background: var(--muted); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--purple); }

/* ── Focus ─────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* ── Nav ───────────────────────────────────────────────── */
.nav-logo {
  font-family: var(--fd); font-size: 0.8125rem; font-weight: 700;
  color: var(--green); text-decoration: none;
  display: flex; align-items: center; gap: 0.5rem;
  letter-spacing: 0.06em; text-shadow: 0 0 18px rgba(34,217,122,0.45);
  white-space: nowrap; flex-shrink: 0;
}
.logo-ach { color: var(--violet); }

.nav-link {
  font-size: 0.8125rem; color: var(--tx2); text-decoration: none;
  padding-bottom: 1px; border-bottom: 1.5px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.nav-link:hover { color: var(--tx); border-color: var(--purple); }

.nav-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid rgba(124,58,237,0.5);
  box-shadow: 0 0 10px rgba(124,58,237,0.3); flex-shrink: 0;
}
.nav-logout {
  font-size: 0.75rem; color: var(--rose);
  background: rgba(244,63,94,0.07); border: 0.5px solid rgba(244,63,94,0.25);
  border-radius: var(--rs); padding: 0.25rem 0.625rem;
  cursor: pointer; transition: opacity var(--t); font-family: inherit;
}
.nav-logout:hover { opacity: 0.72; }

.nav-login {
  font-size: 0.8125rem; color: #fff; background: var(--purple); border: none;
  border-radius: var(--rs); padding: 0.375rem 0.875rem; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.3125rem;
  box-shadow: 0 0 16px rgba(124,58,237,0.4); transition: opacity var(--t); font-family: inherit;
}
.nav-login:hover { opacity: 0.85; }

.nav-hbg {
  color: var(--tx2); background: transparent; border: none; cursor: pointer;
  padding: 0.25rem; display: flex; align-items: center; line-height: 1;
  transition: color var(--t);
}
.nav-hbg:hover { color: var(--tx); }

.mob-link {
  display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0;
  font-size: 0.875rem; color: var(--tx2); text-decoration: none;
  transition: color var(--t); background: none; border: none; cursor: pointer;
  width: 100%; text-align: left; font-family: inherit;
}
.mob-link:hover { color: var(--tx); }