/* ============================================================
   RADIO DJ TANKIST — NEON THEME
   ============================================================ */
:root{
  --bg:#05070d;
  --bg2:#0a0e1a;
  --card:rgba(15,22,40,.65);
  --card-solid:#0d1424;
  --fg:#e8f6ff;
  --muted:#7a90b8;

  --neon-cyan:#00e5ff;
  --neon-magenta:#ff2bd6;
  --neon-purple:#a35bff;
  --neon-orange:#ff8a1f;
  --neon-green:#39ff88;

  --border:rgba(0,229,255,.18);
  --border-strong:rgba(0,229,255,.45);
  --glow-cyan:0 0 8px rgba(0,229,255,.7), 0 0 22px rgba(0,229,255,.35);
  --glow-magenta:0 0 8px rgba(255,43,214,.7), 0 0 22px rgba(255,43,214,.35);
  --glow-purple:0 0 8px rgba(163,91,255,.7), 0 0 22px rgba(163,91,255,.35);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:
    radial-gradient(circle at 15% -10%, rgba(0,229,255,.10), transparent 45%),
    radial-gradient(circle at 90% 10%, rgba(255,43,214,.10), transparent 45%),
    radial-gradient(circle at 50% 110%, rgba(163,91,255,.10), transparent 45%),
    var(--bg);
  background-attachment:fixed;
  color:var(--fg);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:15px;line-height:1.5;
  min-height:100vh;
}
a{color:var(--neon-cyan);text-decoration:none;transition:color .15s,text-shadow .15s}
a:hover{color:#7df6ff;text-shadow:0 0 8px rgba(0,229,255,.7);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}

/* ==== ШАПКА ==== */
.site-header{
  background:rgba(10,14,26,.75);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
  box-shadow:0 4px 30px rgba(0,229,255,.08);
}
.site-header .wrap{display:flex;align-items:center;gap:16px;min-height:64px;position:relative}
.brand{
  font-weight:800;color:#fff;font-size:18px;flex:1;
  letter-spacing:.5px;
  text-shadow:0 0 8px rgba(0,229,255,.8), 0 0 20px rgba(0,229,255,.5);
}
.brand:hover{color:#fff;text-shadow:0 0 12px var(--neon-cyan), 0 0 28px rgba(0,229,255,.7);text-decoration:none}

.menu{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.menu a{
  padding:8px 14px;border-radius:10px;
  color:var(--muted);font-weight:600;white-space:nowrap;
  border:1px solid transparent;
  transition:all .2s;
}
.menu a:hover{
  color:#fff;background:rgba(0,229,255,.08);
  border-color:rgba(0,229,255,.35);
  box-shadow:0 0 12px rgba(0,229,255,.35) inset, 0 0 10px rgba(0,229,255,.25);
  text-shadow:0 0 8px rgba(0,229,255,.8);
}
.menu a.active{
  background:linear-gradient(135deg, rgba(0,229,255,.18), rgba(255,43,214,.18));
  color:#fff;
  border-color:rgba(0,229,255,.5);
  box-shadow:0 0 14px rgba(0,229,255,.5), 0 0 24px rgba(255,43,214,.35), inset 0 0 12px rgba(0,229,255,.25);
  text-shadow:0 0 8px rgba(0,229,255,.9);
}
.menu a.admin-link{color:var(--neon-magenta)}
.menu a.admin-link:hover{color:#fff;border-color:rgba(255,43,214,.5);box-shadow:0 0 14px rgba(255,43,214,.5)}
.menu a.auth-link{color:var(--neon-purple)}
.menu a.auth-link:hover{color:#fff;border-color:rgba(163,91,255,.5);box-shadow:0 0 14px rgba(163,91,255,.5)}

.burger{
  display:none;background:transparent;
  border:1px solid var(--border);color:var(--neon-cyan);
  font-size:20px;border-radius:10px;
  padding:6px 12px;cursor:pointer;order:2;
  text-shadow:0 0 8px var(--neon-cyan);
  box-shadow:0 0 10px rgba(0,229,255,.3);
}
.burger:hover{background:rgba(0,229,255,.08);box-shadow:0 0 18px rgba(0,229,255,.6)}

main.wrap{padding:24px 16px 60px}

/* ==== ЗАГОЛОВКИ ==== */
h1{
  font-size:28px;margin:0 0 20px;color:#fff;font-weight:800;letter-spacing:.5px;
  text-shadow:0 0 10px rgba(0,229,255,.85), 0 0 26px rgba(0,229,255,.45);
}
h2{color:#fff;text-shadow:0 0 8px rgba(0,229,255,.6)}
.card h3,.player-box h3,.chat-box h3,.order-box h3{
  margin:0 0 14px;color:#fff;font-weight:700;
  text-shadow:0 0 8px rgba(0,229,255,.65), 0 0 18px rgba(0,229,255,.35);
}

/* ==== ГЛАВНАЯ ==== */
.hero{padding:40px 0 26px;text-align:center}
.hero h1{
  font-size:46px;margin:0 0 14px;font-weight:900;letter-spacing:1px;
  background:linear-gradient(90deg,var(--neon-cyan),var(--neon-magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(0,229,255,.75)) drop-shadow(0 0 30px rgba(255,43,214,.45));
}
.lead{color:var(--muted);max-width:680px;margin:0 auto 24px;font-size:16px}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.btn{
  display:inline-block;padding:11px 22px;border-radius:12px;
  font-weight:700;border:1px solid transparent;cursor:pointer;
  transition:all .2s;letter-spacing:.3px;
}
.btn-primary{
  background:linear-gradient(135deg,var(--neon-cyan),var(--neon-magenta));
  color:#05070d;border:none;
  box-shadow:0 0 18px rgba(0,229,255,.6), 0 0 36px rgba(255,43,214,.4);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 0 26px rgba(0,229,255,.9), 0 0 50px rgba(255,43,214,.6);
  text-decoration:none;color:#05070d;
}
.btn-ghost{
  border:1px solid var(--border-strong);color:var(--neon-cyan);
  background:rgba(0,229,255,.04);
  box-shadow:0 0 10px rgba(0,229,255,.25) inset, 0 0 14px rgba(0,229,255,.2);
}
.btn-ghost:hover{
  background:rgba(0,229,255,.10);color:#fff;
  box-shadow:0 0 20px rgba(0,229,255,.5), inset 0 0 12px rgba(0,229,255,.3);
  text-decoration:none;
}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:22px}
.card{
  background:var(--card);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:16px;padding:20px;
  box-shadow:0 0 22px rgba(0,229,255,.08), inset 0 0 22px rgba(0,229,255,.03);
  transition:box-shadow .25s, transform .25s, border-color .25s;
}
.card:hover{
  border-color:var(--border-strong);
  box-shadow:0 0 28px rgba(0,229,255,.25), inset 0 0 20px rgba(0,229,255,.06);
}

/* ==== РАДИО-ЛЕЙАУТ ==== */
.radio-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:16px}
.player-box,.chat-box,.order-box{
  background:var(--card);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border);border-radius:16px;padding:20px;
  box-shadow:0 0 24px rgba(0,229,255,.10), inset 0 0 24px rgba(0,229,255,.03);
}

/* ==== ПЛЕЕР ==== */
#now-playing{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.cover-wrap{position:relative;width:96px;height:96px;flex-shrink:0}
.cover-wrap .cover{
  width:96px;height:96px;object-fit:cover;border-radius:14px;display:block;background:#000;
  border:1px solid var(--border-strong);
  box-shadow:0 0 18px rgba(0,229,255,.5), 0 0 36px rgba(255,43,214,.25);
}
.play-btn{
  position:absolute;right:-8px;bottom:-8px;
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--neon-cyan),var(--neon-magenta));
  color:#05070d;border:none;font-size:14px;cursor:pointer;font-weight:800;
  box-shadow:0 0 20px rgba(0,229,255,.8), 0 0 40px rgba(255,43,214,.5);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s;
}
.play-btn:hover{transform:scale(1.08);box-shadow:0 0 28px rgba(0,229,255,1), 0 0 60px rgba(255,43,214,.7)}
.np-info{flex:1;min-width:0}
.np-title{
  font-weight:800;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;
  text-shadow:0 0 8px rgba(0,229,255,.6);
}
.np-meta{color:var(--muted);font-size:13px;margin-top:4px;letter-spacing:.4px}
.player-controls{
  display:flex;align-items:center;gap:10px;
  background:rgba(0,229,255,.04);
  border:1px solid var(--border);border-radius:12px;padding:10px 14px;
  box-shadow:inset 0 0 14px rgba(0,229,255,.05);
}
.ctrl{
  background:transparent;color:var(--neon-cyan);border:none;font-size:16px;
  cursor:pointer;padding:4px 6px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  text-shadow:0 0 6px rgba(0,229,255,.8);
  transition:all .15s;
}
.ctrl:hover:not(:disabled){background:rgba(0,229,255,.12);box-shadow:0 0 12px rgba(0,229,255,.4)}
.ctrl:disabled{opacity:.35;cursor:not-allowed}
.ctrl-main{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--neon-cyan),var(--neon-magenta));
  color:#05070d;font-size:14px;font-weight:800;
  box-shadow:0 0 16px rgba(0,229,255,.7), 0 0 30px rgba(255,43,214,.4);
  text-shadow:none;
}
.ctrl-main:hover{box-shadow:0 0 24px rgba(0,229,255,1), 0 0 48px rgba(255,43,214,.6) !important}
.time{font-size:12px;color:var(--neon-cyan);min-width:42px;text-align:center;
  font-variant-numeric:tabular-nums;text-shadow:0 0 6px rgba(0,229,255,.7);letter-spacing:.5px}
.seek{flex:1;-webkit-appearance:none;appearance:none;height:4px;
  background:linear-gradient(90deg,var(--neon-cyan),var(--neon-magenta));
  border-radius:3px;outline:none;opacity:.55;
  box-shadow:0 0 10px rgba(0,229,255,.6)}
.seek:disabled{opacity:.25}
.seek::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;
  background:#fff;cursor:pointer;box-shadow:0 0 12px var(--neon-cyan);
}
.seek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:none;
  cursor:pointer;box-shadow:0 0 12px var(--neon-cyan)}
.vol{width:70px;-webkit-appearance:none;appearance:none;height:4px;background:rgba(0,229,255,.25);
  border-radius:3px;outline:none;box-shadow:inset 0 0 6px rgba(0,229,255,.3)}
.vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;
  border-radius:50%;background:var(--neon-cyan);cursor:pointer;box-shadow:0 0 10px var(--neon-cyan)}
.vol::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--neon-cyan);
  border:none;cursor:pointer;box-shadow:0 0 10px var(--neon-cyan)}

/* ==== ЗАКАЗ ==== */
.order-box{margin-top:16px}
.order-box form{display:flex;flex-direction:column;gap:10px}
.order-box input[type="text"]{
  background:rgba(0,229,255,.04);border:1px solid var(--border);border-radius:10px;
  padding:11px 14px;color:#fff;outline:none;font-size:14px;
  transition:all .2s;
}
.order-box input[type="text"]:focus{
  border-color:var(--border-strong);
  box-shadow:0 0 16px rgba(0,229,255,.35), inset 0 0 8px rgba(0,229,255,.08);
}
.pay-info{
  background:rgba(255,43,214,.06);
  border:1px solid rgba(255,43,214,.35);
  border-radius:12px;padding:14px;font-size:13px;color:var(--fg);
  box-shadow:0 0 16px rgba(255,43,214,.15), inset 0 0 12px rgba(255,43,214,.05);
  margin-bottom:10px;
}
.pay-info code{background:rgba(0,0,0,.4);color:var(--neon-cyan);text-shadow:0 0 6px rgba(0,229,255,.6)}
.pay-info.free{
  border-color:var(--border);background:rgba(0,229,255,.04);color:var(--muted);
  box-shadow:inset 0 0 12px rgba(0,229,255,.04);
}

/* ==== ЧАТ ==== */
.chat-nick-row{margin-bottom:10px}
.chat-nick-row input{
  width:100%;background:rgba(0,229,255,.04);border:1px solid var(--border);
  border-radius:10px;padding:9px 14px;color:#fff;outline:none;font-size:14px;
  transition:all .2s;
}
.chat-nick-row input:focus{border-color:var(--border-strong);box-shadow:0 0 14px rgba(0,229,255,.35)}
.chat-messages{
  height:280px;overflow:auto;
  background:rgba(0,0,0,.35);
  border:1px solid var(--border);border-radius:12px;padding:12px;font-size:14px;
  box-shadow:inset 0 0 20px rgba(0,229,255,.05);
}
.chat-msg{margin-bottom:7px;line-height:1.4;word-wrap:break-word}
.chat-time{color:#4d5d7a;font-size:11px;margin-right:6px;font-variant-numeric:tabular-nums}
.chat-nick{
  color:var(--neon-cyan);font-weight:700;margin-right:5px;
  text-shadow:0 0 6px rgba(0,229,255,.55);
}
.chat-text{color:#e8f6ff}
.chat-form{display:flex;gap:8px;margin-top:10px}
.chat-form input{
  flex:1;background:rgba(0,229,255,.04);border:1px solid var(--border);
  border-radius:10px;padding:10px 14px;color:#fff;outline:none;
  transition:all .2s;
}
.chat-form input:focus{border-color:var(--border-strong);box-shadow:0 0 16px rgba(0,229,255,.35)}
.chat-form button{
  background:linear-gradient(135deg,var(--neon-cyan),var(--neon-magenta));
  border:none;color:#05070d;border-radius:10px;padding:0 18px;font-weight:800;cursor:pointer;
  box-shadow:0 0 14px rgba(0,229,255,.55), 0 0 28px rgba(255,43,214,.3);
  transition:all .2s;
}
.chat-form button:hover{box-shadow:0 0 22px rgba(0,229,255,.85), 0 0 46px rgba(255,43,214,.5)}
.chat-form input:disabled,.chat-form button:disabled{opacity:.5;cursor:not-allowed}

/* ==== ЭМОДЗИ ==== */
.emoji-tabs{display:flex;gap:5px;margin:10px 0 6px;overflow-x:auto;padding-bottom:3px}
.emoji-tab{
  background:rgba(0,229,255,.04);color:var(--muted);
  border:1px solid var(--border);border-radius:10px;
  padding:6px 10px;font-size:12px;cursor:pointer;white-space:nowrap;
  font-weight:600;transition:all .15s;
}
.emoji-tab:hover{background:rgba(0,229,255,.10);color:#fff;border-color:var(--border-strong);
  box-shadow:0 0 10px rgba(0,229,255,.3)}
.emoji-tab.active{
  background:linear-gradient(135deg,rgba(0,229,255,.25),rgba(255,43,214,.25));
  color:#fff;border-color:var(--border-strong);
  box-shadow:0 0 14px rgba(0,229,255,.55), inset 0 0 10px rgba(0,229,255,.15);
  text-shadow:0 0 8px rgba(0,229,255,.8);
}
.emoji-bar{
  display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin:0 0 10px;
  padding:10px;background:rgba(0,0,0,.35);
  border:1px solid var(--border);border-radius:12px;
  max-height:170px;overflow-y:auto;
  box-shadow:inset 0 0 16px rgba(0,229,255,.05);
}
.emoji-bar button{
  background:transparent;border:none;cursor:pointer;font-size:20px;
  padding:4px 2px;border-radius:8px;line-height:1;transition:all .12s;
}
.emoji-bar button:hover{
  background:rgba(0,229,255,.12);
  transform:scale(1.15);
  box-shadow:0 0 10px rgba(0,229,255,.4);
}

/* ==== АВТОРИЗАЦИЯ ==== */
.auth-wrap{display:flex;justify-content:center;padding:30px 0}
.auth-card{
  background:var(--card);backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:18px;padding:28px;
  width:100%;max-width:430px;
  box-shadow:0 0 30px rgba(0,229,255,.12), inset 0 0 30px rgba(0,229,255,.03);
}
.auth-card h1{
  margin:0 0 20px;font-size:24px;color:#fff;
  text-shadow:0 0 10px rgba(0,229,255,.8), 0 0 26px rgba(0,229,255,.4);
}
.auth-card form{display:flex;flex-direction:column;gap:14px}
.auth-card label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.3px}
.auth-card input{
  background:rgba(0,229,255,.04);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;color:#fff;outline:none;font-size:15px;transition:all .2s;
}
.auth-card input:focus{
  border-color:var(--border-strong);
  box-shadow:0 0 18px rgba(0,229,255,.4), inset 0 0 10px rgba(0,229,255,.08);
}
.auth-error{
  background:rgba(255,43,214,.12);border:1px solid rgba(255,43,214,.45);
  color:#ffb4f0;padding:11px 14px;border-radius:10px;font-size:14px;margin-bottom:16px;
  box-shadow:0 0 16px rgba(255,43,214,.25);
}

/* ==== ЗАКАЗЫ В ПРОФИЛЕ ==== */
.order-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--border);flex-wrap:wrap;
}
.order-info{flex:1;min-width:200px;font-size:14px}
.order-actions{display:flex;gap:8px;flex-wrap:wrap}
.badge{
  display:inline-block;font-size:11px;padding:3px 10px;border-radius:12px;
  margin-left:6px;font-weight:700;letter-spacing:.3px;
}
.badge.paid{
  background:rgba(255,138,31,.12);color:#ffb35c;border:1px solid rgba(255,138,31,.5);
  box-shadow:0 0 10px rgba(255,138,31,.3);text-shadow:0 0 6px rgba(255,138,31,.6);
}
.badge.free{
  background:rgba(57,255,136,.1);color:#7ee8a2;border:1px solid rgba(57,255,136,.4);
  box-shadow:0 0 10px rgba(57,255,136,.25);text-shadow:0 0 6px rgba(57,255,136,.5);
}

/* ==== ТАБЛИЦА ==== */
.table{width:100%;border-collapse:collapse;margin-top:8px}
.table td{padding:10px 6px;border-bottom:1px solid var(--border);font-size:14px}
.table td:first-child{color:var(--muted);width:38%;letter-spacing:.3px}
code{
  background:rgba(0,229,255,.06);color:var(--neon-cyan);
  padding:3px 8px;border-radius:6px;border:1px solid rgba(0,229,255,.25);
  text-shadow:0 0 6px rgba(0,229,255,.5);font-size:13px;
}
.muted{color:var(--muted)}

/* ==== ФУТЕР ==== */
.site-footer{
  border-top:1px solid var(--border);padding:20px 0;color:var(--muted);
  font-size:13px;margin-top:50px;text-align:center;
  box-shadow:0 -4px 30px rgba(0,229,255,.06);
}

/* ==== СКРОЛЛБАР ==== */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.3)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--neon-cyan),var(--neon-magenta));
  border-radius:4px;box-shadow:0 0 8px rgba(0,229,255,.5);
}
::-webkit-scrollbar-thumb:hover{box-shadow:0 0 14px rgba(0,229,255,.9)}

/* ==== МОБИЛЬНАЯ АДАПТАЦИЯ ==== */
@media(max-width:820px){
  html,body{font-size:14px}
  .wrap{padding:0 12px}
  main.wrap{padding:18px 12px 40px}

  h1{font-size:22px}
  .hero{padding:22px 0 16px}
  .hero h1{font-size:32px;letter-spacing:.5px}
  .lead{font-size:14px}

  .player-box,.chat-box,.order-box,.card{padding:14px;border-radius:14px}

  #now-playing{gap:12px}
  .cover-wrap,.cover-wrap .cover{width:80px;height:80px}
  .play-btn{width:34px;height:34px;font-size:12px;right:-6px;bottom:-6px}
  .np-title{font-size:14px}
  .player-controls{padding:8px 10px;gap:8px;flex-wrap:wrap}
  .vol{width:60px}
  .time{min-width:36px;font-size:11px}

  .chat-messages{height:220px;padding:10px}
  .emoji-bar{grid-template-columns:repeat(8,1fr);max-height:150px;padding:8px;gap:2px}
  .emoji-bar button{font-size:22px;padding:5px 0}
  .emoji-tab{font-size:11px;padding:6px 8px}

  .auth-card{padding:20px;border-radius:14px}
  .auth-card h1{font-size:20px}

  .table td{padding:9px 4px;font-size:13px}
  .table td:first-child{width:44%}

  .burger{display:block}
  .menu{
    display:none;position:absolute;top:100%;right:0;left:0;
    flex-direction:column;background:rgba(10,14,26,.98);
    backdrop-filter:blur(14px);
    padding:12px;gap:6px;
    border-bottom:1px solid var(--border-strong);
    box-shadow:0 12px 40px rgba(0,229,255,.25);
  }
  .menu.open{display:flex}
  .menu a{padding:12px 16px;font-size:15px;width:100%;text-align:left;border-radius:10px}

  .order-row{padding:12px 0}
  .order-info{font-size:13px}
  .order-actions{width:100%}
  .order-actions .btn{flex:1;text-align:center}
}

@media(max-width:420px){
  .hero h1{font-size:26px}
  .emoji-bar{grid-template-columns:repeat(6,1fr)}
  .emoji-bar button{font-size:20px}
  .cover-wrap,.cover-wrap .cover{width:64px;height:64px}
  .np-title{font-size:13px}
  .time{font-size:11px;min-width:30px}
  .vol{width:50px}
  .player-controls{gap:6px}
  .btn{padding:10px 16px;font-size:14px}
}

/* ==== ТАБЫ АВТОРИЗАЦИИ ==== */
.auth-tabs{
  display:flex;gap:8px;justify-content:center;margin:0 0 22px;
  background:rgba(0,229,255,.03);border:1px solid var(--border);
  border-radius:14px;padding:6px;max-width:520px;margin-left:auto;margin-right:auto;
}
.auth-tab{
  flex:1;background:transparent;border:none;color:var(--muted);
  padding:11px 14px;font-size:14px;font-weight:700;cursor:pointer;
  border-radius:10px;transition:all .2s;letter-spacing:.3px;
}
.auth-tab:hover{color:#fff}
.auth-tab.active{
  background:linear-gradient(135deg,rgba(0,229,255,.2),rgba(255,43,214,.2));
  color:#fff;
  box-shadow:0 0 16px rgba(0,229,255,.45), inset 0 0 10px rgba(0,229,255,.15);
  text-shadow:0 0 8px rgba(0,229,255,.8);
}
.auth-tab-pane{display:none}
.auth-tab-pane.active{display:block}

.auth-card h2{
  font-size:19px;color:#fff;margin:0 0 6px;
  text-shadow:0 0 8px rgba(0,229,255,.6);
  letter-spacing:.3px;
}

@media(max-width:820px){
  .auth-tabs{flex-direction:column;padding:5px}
  .auth-tab{padding:12px;font-size:14px}
  .auth-card h2{font-size:17px}
}

/* ==== АДМИНКА ==== */
.admin-form{display:flex;flex-direction:column;gap:14px;max-width:520px}
.admin-form label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:13px;font-weight:600}
.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form input[type="email"],
.admin-form input[type="password"],
.admin-form input[type="file"]{
  background:rgba(0,229,255,.04);border:1px solid var(--border);border-radius:10px;
  padding:11px 14px;color:#fff;outline:none;font-size:14px;
}
.admin-form input:focus{border-color:var(--border-strong);box-shadow:0 0 16px rgba(0,229,255,.35)}
.admin-form .chk{flex-direction:row;align-items:center;gap:10px;cursor:pointer}
.admin-form .chk input{width:auto}
.table select{
  background:rgba(0,229,255,.04);color:#fff;border:1px solid var(--border);
  border-radius:8px;padding:6px 10px;font-size:13px;
}
.table th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.5px;padding:8px 6px}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.actions form button{padding:6px 10px;font-size:12px}
.card a.card{display:block;text-decoration:none;color:inherit}
.card a.card:hover{text-decoration:none}

/* ==== ОНЛАЙН ==== */
.online-box{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:16px;margin-top:16px;
  box-shadow:0 0 22px rgba(0,229,255,.1), inset 0 0 22px rgba(0,229,255,.03);
  backdrop-filter:blur(10px);
}
.online-box h3{margin:0 0 12px;color:#fff;
  text-shadow:0 0 8px rgba(0,229,255,.65), 0 0 18px rgba(0,229,255,.35)}
.online-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid rgba(0,229,255,.08);font-size:14px;color:var(--muted)}
.online-row:last-child{border-bottom:0}
.online-row b{color:#fff;text-shadow:0 0 6px rgba(0,229,255,.5);
  font-weight:700;text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ==== МОДЕРАЦИЯ В ЧАТЕ (DJ) ==== */
.chat-msg .chat-ban-btn,
.chat-msg .chat-del-btn{
  background:transparent;border:none;cursor:pointer;
  font-size:12px;padding:0 4px;opacity:0;
  transition:opacity .15s;vertical-align:middle;
}
.chat-msg:hover .chat-ban-btn,
.chat-msg:hover .chat-del-btn{opacity:.85}
.chat-ban-btn:hover{color:#ff7a7a;text-shadow:0 0 6px rgba(255,43,214,.7)}
.chat-del-btn:hover{color:var(--neon-cyan);text-shadow:0 0 6px rgba(0,229,255,.7)}

/* ==== RADIOBOSS В ПРОФИЛЕ ==== */
.rb-section{
  margin: 16px 0; padding: 14px;
  background: rgba(0,229,255,.03);
  border-left: 3px solid var(--neon-cyan);
  border-radius: 10px;
}
.rb-section h4{
  margin: 0 0 8px; color: #fff; font-size: 15px;
  text-shadow: 0 0 6px rgba(0,229,255,.55);
}
.rb-section.warn{
  border-left-color: var(--neon-magenta);
  background: rgba(255,43,214,.05);
}
.rb-section.warn h4{ text-shadow: 0 0 6px rgba(255,43,214,.55); }

.rb-table{ margin-top: 8px; }
.rb-table td:first-child{ width: 34%; color: #fff; font-weight: 600; }
.rb-table td:nth-child(2){ width: 40%; }
.rb-table .hint{ color: var(--muted); font-size: 12px; }

.copy-btn{
  background: rgba(0,229,255,.08);
  border: 1px solid var(--border); color: var(--neon-cyan);
  border-radius: 6px; padding: 2px 6px; margin-left: 6px;
  font-size: 11px; cursor: pointer; vertical-align: middle;
  transition: all .15s;
}
.copy-btn:hover{
  background: rgba(0,229,255,.18);
  box-shadow: 0 0 10px rgba(0,229,255,.4);
}

@media(max-width:820px){
  .rb-section{ padding: 12px; }
  .rb-table{ font-size: 12px; }
  .rb-table td:first-child{ width: 40%; }
  .copy-btn{ display: block; margin: 4px 0 0; }
}