/* ══════════════════════════════════════════════
   WebRadioSystem v3 – Basis-Design
   Theme-Farben (--a, --a2, --a3, --ag, --an) werden
   von theme-engine.js zur Laufzeit gesetzt – hier nur
   die neutralen Tokens + Layout/Komponenten.
   ══════════════════════════════════════════════ */

:root{
  --bg:#07070d; --surface:#0e0e18; --card:#13131e;
  --border:#1e1e32; --border2:#2a2a44;
  --text:#eeeef8; --muted:#606080;
  --green:#4ade80; --yellow:#fbbf24; --red:#ef4444;

  /* Default-Werte, bis theme-engine.js übernimmt (verhindert Flackern) */
  --a:#e63946; --a2:#ff6b35; --a3:#c0222e;
  --ag:linear-gradient(135deg,#e63946,#8b0010); --an:#e63946;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--text);
  font-family:'Exo 2',sans-serif; overflow-x:hidden;
}
a{ color:inherit; }
img{ max-width:100%; display:block; }

::-webkit-scrollbar{ width:5px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--a); border-radius:3px; }

.h1, h1{ font-family:'Orbitron',sans-serif; font-weight:900; }
.mono{ font-family:'Orbitron',sans-serif; }

/* ── NAV ── */
nav.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:300;
  background:rgba(7,7,13,.97); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; height:54px; max-width:1400px; margin:0 auto;
}
.nav-logo{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  font-family:'Orbitron',sans-serif; font-size:14px; font-weight:900;
  color:var(--text); letter-spacing:2px;
}
.nav-logo-icon{
  width:32px; height:32px; border-radius:8px; background:var(--ag);
  display:grid; place-items:center; font-size:15px;
}
.nav-logo span{ color:var(--a); }
.nav-links{ display:flex; gap:2px; align-items:center; flex-wrap:wrap; }
.nav-links a{
  color:var(--muted); text-decoration:none; font-size:11px; font-weight:700;
  letter-spacing:1px; padding:6px 10px; border-radius:6px;
  transition:all .2s; text-transform:uppercase;
}
.nav-links a:hover{ color:var(--text); background:var(--card); }
.live-pill{
  display:inline-flex; align-items:center; gap:5px;
  background:color-mix(in srgb,var(--a) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--a) 35%,transparent);
  color:var(--a); padding:4px 10px; border-radius:999px;
  font-size:9px; font-weight:700; letter-spacing:2px;
}
.dot{ width:6px; height:6px; background:var(--a); border-radius:50%; animation:blink 1.2s ease-in-out infinite; }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.15} }

main{ padding-top:54px; min-height:100vh; }

/* ── BUTTONS ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:10px; border:none; cursor:pointer;
  font-family:'Exo 2',sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.5px; text-decoration:none; transition:all .2s;
}
.btn-primary{ background:var(--ag); color:#fff; }
.btn-primary:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.btn-outline{ background:transparent; border:1px solid var(--border2); color:var(--text); }
.btn-outline:hover{ border-color:var(--a); color:var(--a); }

/* ── CARDS ── */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:22px;
}

/* ── THEME PANEL ── */
#themeFab{
  position:fixed; right:20px; bottom:20px; z-index:400;
  width:52px; height:52px; border-radius:50%; background:var(--ag);
  border:none; display:grid; place-items:center; font-size:20px;
  cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.4);
}
#themePanel{
  position:fixed; right:20px; bottom:82px; z-index:400;
  width:320px; max-height:70vh; background:var(--surface);
  border:1px solid var(--border); border-radius:16px;
  display:none; flex-direction:column; overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
#themePanel.open{ display:flex; }
.theme-panel-head{ padding:16px; border-bottom:1px solid var(--border); }
.theme-panel-head h4{ font-size:13px; margin-bottom:4px; }
#themeCount{ font-size:11px; color:var(--muted); }
.theme-panel-head input{
  width:100%; margin-top:10px; padding:9px 12px; border-radius:8px;
  background:var(--bg); border:1px solid var(--border2); color:var(--text);
  font-size:12px;
}
#themeScroll{ overflow-y:auto; padding:10px; }
.theme-cat-title{ font-size:10px; color:var(--muted); letter-spacing:1px; margin:10px 4px 6px; }
.theme-items{ display:grid; grid-template-columns:repeat(auto-fill,minmax(85px,1fr)); gap:6px; }
.ti{
  cursor:pointer; text-align:center; padding:8px 4px; border-radius:8px;
  border:1px solid transparent; position:relative;
}
.ti:hover{ background:var(--card); }
.ti.active{ border-color:var(--a); background:var(--card); }
.ti-swatch{ width:24px; height:24px; border-radius:50%; margin:0 auto 4px; border:2px solid var(--border2); }
.ti-name{ font-size:9px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ti-check{ display:none; position:absolute; top:2px; right:6px; font-size:9px; color:var(--a); }
.ti.active .ti-check{ display:block; }

/* ── FOOTER ── */
footer.site-footer{
  border-top:1px solid var(--border); padding:40px 24px; margin-top:60px;
  text-align:center; color:var(--muted); font-size:12px;
}
footer.site-footer a{ color:var(--muted); text-decoration:none; margin:0 8px; }
footer.site-footer a:hover{ color:var(--a); }

@media (max-width:900px){
  .nav-links{ display:none; }
  #themePanel{ width:calc(100vw - 40px); }
}