:root{
  --bg:#070a12;
  --panel:#0b1020;
  --panel2:#0f1630;
  --border: rgba(255,255,255,.08);
  --text:#e6e8ef;
  --muted:#9aa3b2;
  --accent:#7c3aed;
  --glow: rgba(124,58,237,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(700px 450px at 80% 40%, rgba(43,217,255,.12), transparent 60%),
    linear-gradient(180deg, #050712 0%, #070a12 100%);
}

a{color:#b7c4ff; text-decoration:none}
a:hover{text-decoration:underline}

.auth{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.auth-card{
  width: min(420px, 92vw);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}

h1{margin:0 0 8px 0; letter-spacing:.2px}
.muted{color:var(--muted); margin:0 0 14px 0}

.form{display:flex; flex-direction:column; gap:8px}
label{font-size:12px; color:var(--muted)}
input{
  background: rgba(0,0,0,.25);
  color: var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 12px;
  outline:none;
}
input:focus{border-color: rgba(124,58,237,.55); box-shadow:0 0 0 4px var(--glow)}

.btn{
  margin-top:8px;
  border:none;
  border-radius:12px;
  padding:12px 14px;
  font-weight:700;
  background: linear-gradient(90deg, rgba(124,58,237,.95), rgba(43,217,255,.65));
  color:#071018;
  cursor:pointer;
}
.btn:hover{filter:brightness(1.05)}

.alert{
  background: rgba(255,59,59,.15);
  border:1px solid rgba(255,59,59,.25);
  padding:10px 12px;
  border-radius:12px;
  margin:10px 0;
}

.app{
  height:100%;
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:14px;
  padding:14px;
}

.card{
  background: rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  overflow:hidden;
}

.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-bottom:1px solid var(--border);
}

.header .title{
  font-weight:800;
  letter-spacing:.2px;
}
.header .subtitle{color:var(--muted); font-size:12px}

.chat-area{
  display:flex;
  flex-direction:column;
  height: calc(100vh - 28px);
}

.messages{
  padding:14px 16px;
  overflow:auto;
  flex:1;
}

.msg{
  padding:10px 12px;
  margin:0 0 10px 0;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  background: rgba(0,0,0,.18);
}

.msg .meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}
.msg .name{font-weight:800}
.msg .content{white-space:pre-wrap; line-height:1.35}

.msg img{
  max-width: 100%;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
}

.composer{
  display:flex;
  gap:10px;
  padding:12px;
  border-top:1px solid var(--border);
  background: rgba(255,255,255,.03);
}

.composer textarea{
  flex:1;
  resize:none;
  height:44px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.20);
  color:var(--text);
  padding:10px 12px;
  outline:none;
}
.composer textarea:focus{border-color: rgba(43,217,255,.4); box-shadow:0 0 0 4px rgba(43,217,255,.12)}

.iconbtn{
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.20);
  color: var(--text);
  cursor:pointer;
}
.iconbtn:hover{filter:brightness(1.08)}

.sidebar{
  height: calc(100vh - 28px);
  display:flex;
  flex-direction:column;
}

.side-body{
  padding:12px;
  overflow:auto;
  flex:1;
}

.section{
  margin-bottom:12px;
}
.section h3{
  margin:0 0 8px 0;
  font-size:13px;
  color: var(--muted);
  letter-spacing:.2px;
}

.userrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.16);
  margin-bottom:8px;
}
.badge{
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  color: var(--text);
}
.dot{
  width:8px; height:8px;
  border-radius:50%;
  display:inline-block;
  margin-right:6px;
  background: #22c55e;
}
.dot.off{background:#64748b}

/* ===== Header right layout ===== */
.header-right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* ===== Top buttons ===== */
.topbtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: var(--text);
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}
.topbtn:hover{
  filter:brightness(1.08);
  text-decoration:none;
}
.topbtn.ghost{
  background: rgba(255,255,255,.06);
}

/* ===== RADIO PLAYER ===== */
.radio-player{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(240px 80px at 20% 50%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(200px 70px at 80% 40%, rgba(43,217,255,.16), transparent 65%),
    rgba(0,0,0,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  min-width: 320px;
}

.radio-meta{
  display:flex;
  flex-direction:column;
  min-width: 120px;
}
.radio-station{
  font-weight:900;
  letter-spacing:.2px;
  font-size:13px;
}
.radio-status{
  font-size:12px;
  color: var(--muted);
}

.radio-btn{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(90deg, rgba(124,58,237,.95), rgba(43,217,255,.65));
  color:#071018;
  font-weight:900;
  cursor:pointer;
  box-shadow: 0 0 0 0 rgba(124,58,237,.0);
}
.radio-btn:hover{filter:brightness(1.06);}

.radio-volume{
  width:110px;
  accent-color: var(--accent);
}

/* Animated "equalizer" bars */
.radio-bars{
  display:flex;
  gap:4px;
  align-items:flex-end;
  width:34px;
  height:18px;
  opacity:.65;
}
.radio-bars span{
  display:block;
  width:5px;
  height:6px;
  border-radius:6px;
  background: rgba(255,255,255,.55);
  transform-origin: bottom;
}
.radio-player.is-playing .radio-bars span{
  animation: rfBars 0.9s infinite ease-in-out;
}
.radio-player.is-playing .radio-bars span:nth-child(2){animation-delay:.12s}
.radio-player.is-playing .radio-bars span:nth-child(3){animation-delay:.24s}
.radio-player.is-playing .radio-bars span:nth-child(4){animation-delay:.36s}

@keyframes rfBars{
  0%, 100% { transform: scaleY(.5); opacity:.55; }
  50%      { transform: scaleY(1.4); opacity:1; }
}

/* Responsive: Player stack on small screens */
@media (max-width: 980px){
  .app{ grid-template-columns: 1fr; }
  .radio-player{ min-width: unset; width: 100%; }
  .header-right{ flex-wrap:wrap; justify-content:flex-end; }
}

/* ===== Header buttons (real buttons) ===== */
.header-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.navbtn{
  border:none;
  border-radius:12px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  color:#071018;
  background: linear-gradient(90deg, rgba(124,58,237,.95), rgba(43,217,255,.70));
  box-shadow: 0 12px 35px rgba(0,0,0,.35);
}
.navbtn:hover{ filter:brightness(1.06); }
.navbtn:active{ transform: translateY(1px); }

.navbtn-danger{
  color: var(--text);
  background: rgba(255,59,59,.16);
  border:1px solid rgba(255,59,59,.28);
  box-shadow: none;
}
.navbtn-danger:hover{ filter:brightness(1.08); }

/* ===== RADIO PLAYER v2 (wolf-like, cleaner) ===== */
.radio-player2{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(260px 90px at 12% 50%, rgba(124,58,237,.26), transparent 60%),
    radial-gradient(220px 80px at 85% 40%, rgba(43,217,255,.16), transparent 65%),
    rgba(0,0,0,.18);
  box-shadow: 0 16px 45px rgba(0,0,0,.45);
}

.radio-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 170px;
}

.radio-logo{
  width:40px; height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}

.radio-meta2{ display:flex; flex-direction:column; }
.radio-station2{
  font-weight:1000;
  letter-spacing:.25px;
  font-size:13px;
}
.radio-status2{
  font-size:12px;
  color:var(--muted);
}

.radio-controls2{
  display:flex;
  gap:8px;
  align-items:center;
}

.rbtn{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: var(--text);
  cursor:pointer;
  font-weight:900;
}
.rbtn:hover{ filter:brightness(1.10); }
.rbtn:active{ transform: translateY(1px); }

.rbtn-play{
  background: linear-gradient(90deg, rgba(124,58,237,.95), rgba(43,217,255,.65));
  color:#071018;
}

.rbtn-stop{
  border-color: rgba(255,59,59,.28);
  background: rgba(255,59,59,.16);
}

.rbtn-pause{
  border-color: rgba(255,255,255,.14);
}

.radio-volwrap2{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}

.radio-volume2{ width:120px; accent-color: var(--accent); }
.radio-volico{ opacity:.8; }

.radio-bars2{
  display:flex;
  gap:4px;
  align-items:flex-end;
  width:46px;
  height:18px;
  opacity:.7;
}
.radio-bars2 span{
  display:block;
  width:6px;
  height:6px;
  border-radius:10px;
  background: rgba(255,255,255,.55);
  transform-origin: bottom;
}

.radio-player2.is-playing .radio-bars2 span{
  animation: rfBars2 0.85s infinite ease-in-out;
}
.radio-player2.is-playing .radio-bars2 span:nth-child(2){animation-delay:.10s}
.radio-player2.is-playing .radio-bars2 span:nth-child(3){animation-delay:.20s}
.radio-player2.is-playing .radio-bars2 span:nth-child(4){animation-delay:.30s}
.radio-player2.is-playing .radio-bars2 span:nth-child(5){animation-delay:.40s}

@keyframes rfBars2{
  0%,100% { transform: scaleY(.55); opacity:.55; }
  50%     { transform: scaleY(1.55); opacity:1; }
}

/* Responsive */
@media (max-width: 980px){
  .radio-player2{ width:100%; }
  .radio-left{ min-width: unset; }
  .radio-volume2{ width: 140px; }
}

.onair-gif{
  height:25px;
  width:50px;
  margin-left:8px;
  vertical-align:middle;
  border-radius:6px;
  filter: drop-shadow(0 0 10px rgba(255,40,40,.55));
  opacity:.95;
}

/* ===== GIF Modal ===== */
.gif-modal{
  position: fixed;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.55);
  z-index: 9999;
  padding: 18px;
}

.gif-panel{
  width: min(860px, 96vw);
  max-height: min(640px, 85vh);
  overflow:hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,12,18,.92);
  box-shadow: 0 25px 70px rgba(0,0,0,.6);
  display:flex;
  flex-direction:column;
}

.gif-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.gif-title{ font-weight: 1000; letter-spacing:.2px; }
.gif-x{
  width: 36px; height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: #e6e8ef;
  cursor:pointer;
}

.gif-tabs{
  display:flex;
  gap:10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.gif-tab{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: #e6e8ef;
  cursor:pointer;
  font-weight: 900;
}
.gif-tab.is-active{
  background: rgba(124,58,237,.22);
  border-color: rgba(124,58,237,.35);
}

.gif-grid{
  padding: 14px;
  overflow:auto;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.gif-item{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  padding: 10px;
  text-align:left;
}
.gif-item:hover{ filter: brightness(1.08); }

.gif-item img{
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  display:block;
}

.gif-cap{
  margin-top: 8px;
  font-size: 12px;
  opacity: .85;
  font-weight: 800;
}

.gif-foot{
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.gif-hint{ font-size: 12px; opacity: .75; }

/* Responsive */
@media (max-width: 760px){
  .gif-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gif-item img{ height: 140px; }
}

/* Wichtig: HTML "hidden" MUSS wirklich verstecken */
[hidden] { 
  display: none !important; 
}