/* IcyCast custom styles */
:root {
  --dark: #0a0f1a;
  --card: #0d1626;
  --card2: #111d33;
  --border: rgba(0,212,255,.1);
  --ice: #00d4ff;
  --purple: #8b5cf6;
  --green: #10b981;
  --red: #ef4444;
  --yellow: #f59e0b;
  --text: #e2e8f0;
  --muted: #64748b;
}
body { background: var(--dark); color: var(--text); font-family: 'Syne', system-ui, sans-serif; }
.mono { font-family: 'JetBrains Mono', 'Courier New', monospace; }
.ice-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.ice-card2 { background: var(--card2); border: 1px solid var(--border); border-radius: 8px; }

/* Sidebar */
.sidebar { width: 220px; min-height: 100vh; background: var(--card); border-right: 1px solid var(--border); position: fixed; top:0; left:0; bottom:0; overflow-y:auto; z-index:100; }
.sidebar-brand { font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; color: var(--ice); text-decoration:none; display:block; padding: 1.25rem 1rem; border-bottom: 1px solid var(--border); }
.sidebar-brand span { color: #fff; }
.sidebar-brand .dot { color: var(--ice); }
.nav-link { color: var(--muted); font-size: .82rem; font-weight: 600; padding: .55rem 1rem; display:flex; align-items:center; gap:.6rem; border-radius:8px; margin: .15rem .5rem; transition: all .15s; }
.nav-link:hover, .nav-link.active { color: var(--ice); background: rgba(0,212,255,.08); }
.nav-link i { font-size: 1rem; width: 18px; text-align:center; }
.content-area { margin-left: 220px; padding: 2rem; min-height: 100vh; }
@media (max-width: 768px) { .sidebar { display:none; } .content-area { margin-left: 0; } }

/* Buttons */
.btn-ice { background: var(--ice); color: #000; font-weight: 700; border: none; }
.btn-ice:hover { background: #00b8e0; color: #000; }
.glow-line { height: 2px; background: linear-gradient(90deg, var(--ice), var(--purple), transparent); margin-bottom: 1.5rem; border-radius: 2px; }

/* Cards */
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius:12px; padding: 1.25rem; }
.stat-card .label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:.35rem; }
.stat-card .value { font-size: 1.75rem; font-weight: 800; letter-spacing:-.03em; }
.stat-card .sub { font-size:.75rem; color:var(--muted); margin-top:.2rem; }

/* Tables */
.ice-table { color: var(--text); }
.ice-table th { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); border-bottom: 1px solid var(--border) !important; padding:.65rem .75rem; }
.ice-table td { font-size:.82rem; border-bottom: 1px solid var(--border) !important; padding:.7rem .75rem; vertical-align:middle; }
.ice-table tbody tr:hover { background: rgba(255,255,255,.02); }
.ice-table thead tr, .ice-table tbody tr { background: transparent !important; }

/* Badges */
.badge-active   { background: rgba(16,185,129,.15); color:#10b981; font-size:.65rem; font-weight:700; padding:.2rem .55rem; border-radius:20px; letter-spacing:.04em; text-transform:uppercase; }
.badge-suspended{ background: rgba(239,68,68,.15);  color:#ef4444; font-size:.65rem; font-weight:700; padding:.2rem .55rem; border-radius:20px; letter-spacing:.04em; text-transform:uppercase; }
.badge-pending  { background: rgba(245,158,11,.15); color:#f59e0b; font-size:.65rem; font-weight:700; padding:.2rem .55rem; border-radius:20px; letter-spacing:.04em; text-transform:uppercase; }
.badge-paid     { background: rgba(16,185,129,.15); color:#10b981; font-size:.65rem; font-weight:700; padding:.2rem .55rem; border-radius:20px; letter-spacing:.04em; text-transform:uppercase; }
.badge-unpaid   { background: rgba(239,68,68,.15);  color:#ef4444; font-size:.65rem; font-weight:700; padding:.2rem .55rem; border-radius:20px; letter-spacing:.04em; text-transform:uppercase; }
.badge-free     { background: rgba(139,92,246,.15); color:#8b5cf6; font-size:.65rem; font-weight:700; padding:.2rem .55rem; border-radius:20px; letter-spacing:.04em; text-transform:uppercase; }
.badge-open     { background: rgba(0,212,255,.12);  color:var(--ice); font-size:.65rem; font-weight:700; padding:.2rem .55rem; border-radius:20px; letter-spacing:.04em; text-transform:uppercase; }
.badge-closed   { background: rgba(100,116,139,.15);color:var(--muted);font-size:.65rem; font-weight:700; padding:.2rem .55rem; border-radius:20px; letter-spacing:.04em; text-transform:uppercase; }
.badge-connected{ background:rgba(16,185,129,.15); color:#10b981; font-size:.65rem; font-weight:700; padding:.15rem .45rem; border-radius:20px; }
.badge-offline  { background:rgba(100,116,139,.1); color:var(--muted); font-size:.65rem; font-weight:700; padding:.15rem .45rem; border-radius:20px; }

/* Forms */
.form-control, .form-select { background: var(--card2); border: 1px solid rgba(0,212,255,.15); color: var(--text); border-radius: 8px; }
.form-control:focus, .form-select:focus { background: var(--card2); color: var(--text); border-color: var(--ice); box-shadow: 0 0 0 2px rgba(0,212,255,.15); }
.form-label { font-size:.78rem; font-weight:600; color:var(--text); margin-bottom:.35rem; }
.form-check-input { background-color: var(--card2); border-color: rgba(0,212,255,.3); }
.form-check-input:checked { background-color: var(--ice); border-color: var(--ice); }
.input-group-text { background:var(--card2); border-color:rgba(0,212,255,.15); color:var(--muted); }

/* Alerts */
.alert-ok { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.2); color:#10b981; border-radius:8px; padding:.75rem 1rem; font-size:.85rem; }
.alert-err{ background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.2);  color:#ef4444; border-radius:8px; padding:.75rem 1rem; font-size:.85rem; }

/* Page title */
.page-title { font-weight:800; font-size:1.5rem; letter-spacing:-.03em; }

/* Live indicator dot */
.live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; margin-right:.4rem; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }

/* Listener bar */
.listener-bar { height:4px; background:rgba(0,212,255,.1); border-radius:2px; overflow:hidden; margin-top:.3rem; }
.listener-bar-fill { height:100%; background:var(--ice); border-radius:2px; transition:width .5s; }

/* Copy button flash */
.copy-flash { animation: copyFlash .4s ease; }
@keyframes copyFlash { 0%{opacity:1}50%{opacity:.3}100%{opacity:1} }

/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:rgba(0,212,255,.2);border-radius:3px}

/* Mobile nav */
.mobile-topbar { display:none; background:var(--card); border-bottom:1px solid var(--border); padding:.75rem 1rem; }
@media(max-width:768px){ .mobile-topbar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:200;} .sidebar-open{display:flex !important;} }