/* ═══════════════════════════════════════════════════════════════
   Botify Dashboard v9 - Modern Sleek UI
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Brand */
  --brand:          #7C3AED;
  --brand-2:        #4F46E5;
  --brand-glow:     rgba(124, 58, 237, 0.35);
  --accent:         #06B6D4;
  --accent-glow:    rgba(6, 182, 212, 0.25);
  --success:        #10B981;
  --warning:        #F59E0B;
  --danger:         #EF4444;

  /* Backgrounds */
  --bg-base:        #080B14;
  --bg-surface:     #0D1117;
  --bg-card:        #111827;
  --bg-card-hover:  #161F2E;
  --bg-input:       #0D1117;
  --bg-modal:       #111827;

  /* Text */
  --text-primary:   #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted:     #475569;

  /* Borders */
  --border:         rgba(255,255,255,0.06);
  --border-hover:   rgba(255,255,255,0.12);
  --border-brand:   rgba(124,58,237,0.4);

  /* Gradients */
  --grad-brand:     linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%);
  --grad-accent:    linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%);
  --grad-surface:   linear-gradient(180deg, #0D1117 0%, #080B14 100%);
  --grad-card:      linear-gradient(145deg, #111827 0%, #0D1117 100%);
  --grad-glow:      radial-gradient(ellipse at 50% 0%, rgba(124,58,237,0.15) 0%, transparent 70%);

  /* Shadows */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:      0 8px 40px rgba(0,0,0,0.6);
  --shadow-brand:   0 4px 20px rgba(124,58,237,0.4);

  /* Misc */
  --radius-sm:      6px;
  --radius-md:      12px;
  --radius-lg:      16px;
  --radius-xl:      24px;
  --radius-pill:    9999px;
  --transition:     all 0.2s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Reset ────────────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg-base);
  color:var(--text-primary);
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; display:block; }
button { cursor:pointer; font-family:inherit; border:none; outline:none; }

/* ─── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg-surface); }
::-webkit-scrollbar-thumb { background:var(--brand); border-radius:var(--radius-pill); }

/* ─── Container ─────────────────────────────────────────────────── */
.container { max-width:1280px; margin:0 auto; padding:0 1.5rem; }

/* ─── Utility Classes ───────────────────────────────────────────── */
.text-center { text-align:center; }
.text-muted  { color:var(--text-muted); }
.text-secondary { color:var(--text-secondary); }
.text-brand  { color:var(--brand); }
.text-accent { color:var(--accent); }
.text-success{ color:var(--success); }
.text-danger { color:var(--danger); }
.text-warning{ color:var(--warning); }
.mt-1 { margin-top:0.5rem; } .mt-2 { margin-top:1rem; } .mt-3 { margin-top:1.5rem; } .mt-4 { margin-top:2rem; }
.mb-1 { margin-bottom:0.5rem; } .mb-2 { margin-bottom:1rem; } .mb-3 { margin-bottom:1.5rem; } .mb-4 { margin-bottom:2rem; }
.flex { display:flex; } .flex-col { flex-direction:column; } .items-center { align-items:center; }
.justify-between { justify-content:space-between; } .gap-1 { gap:0.5rem; } .gap-2 { gap:1rem; } .gap-3 { gap:1.5rem; }

/* ─── Background Glow ───────────────────────────────────────────── */
body::before {
  content:'';
  position:fixed; top:0; left:0; right:0;
  height:600px;
  background:var(--grad-glow);
  pointer-events:none;
  z-index:0;
}

/* ─── Navbar ────────────────────────────────────────────────────── */
.navbar {
  position:sticky; top:0; z-index:500;
  background:rgba(8,11,20,0.85);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  padding:0 1.5rem;
  height:64px;
  display:flex; align-items:center; justify-content:space-between;
  transition:var(--transition);
}
.navbar.scrolled { box-shadow:0 4px 24px rgba(0,0,0,0.5); }

.navbar-brand {
  display:flex; align-items:center; gap:0.75rem;
  font-size:1.25rem; font-weight:800;
  background:var(--grad-brand);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:-0.02em;
}
.navbar-logo {
  width:36px; height:36px;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
  flex-shrink:0;
  box-shadow:var(--shadow-brand);
}
.navbar-logo img { width:100%; height:100%; object-fit:cover; }

.nav-links {
  list-style:none;
  display:flex; align-items:center; gap:0.25rem;
}
.nav-links li a {
  padding:0.4rem 0.75rem;
  border-radius:var(--radius-sm);
  font-size:0.875rem; font-weight:500;
  color:var(--text-secondary);
  transition:var(--transition);
}
.nav-links li a:hover { color:var(--text-primary); background:rgba(255,255,255,0.05); }
.nav-links li a.active { color:var(--text-primary); background:rgba(124,58,237,0.15); }

.user-menu { display:flex; align-items:center; gap:0.75rem; }
.user-avatar {
  width:34px; height:34px; border-radius:50%;
  border:2px solid var(--border-brand);
  transition:var(--transition);
}
.user-avatar:hover { border-color:var(--brand); transform:scale(1.05); }

.btn-login {
  padding:0.45rem 1rem;
  background:var(--grad-brand);
  border-radius:var(--radius-sm);
  font-size:0.85rem; font-weight:600;
  color:#fff !important;
  transition:var(--transition);
  box-shadow:var(--shadow-brand);
}
.btn-login:hover { opacity:0.9; transform:translateY(-1px); box-shadow:0 6px 24px rgba(124,58,237,0.5); }

.logout-link { color:var(--text-muted) !important; font-size:0.85rem; }
.logout-link:hover { color:var(--danger) !important; }

/* nav-toggle — see Mobile Menu Overlay section */

/* ─── Hero ──────────────────────────────────────────────────────── */
.hero {
  position:relative; z-index:1;
  min-height:88vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:6rem 1.5rem;
  overflow:hidden;
}
.hero::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(124,58,237,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(6,182,212,0.08) 0%, transparent 50%);
  pointer-events:none;
}
.hero-content { position:relative; z-index:1; max-width:800px; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.35rem 1rem;
  border:1px solid var(--border-brand);
  border-radius:var(--radius-pill);
  font-size:0.8rem; font-weight:600;
  color:var(--brand);
  background:rgba(124,58,237,0.08);
  margin-bottom:1.5rem;
  letter-spacing:0.05em; text-transform:uppercase;
}
.hero h1 {
  font-size:clamp(3rem,8vw,5.5rem);
  font-weight:900; line-height:1.05;
  letter-spacing:-0.04em;
  margin-bottom:1.25rem;
}
.hero h1 span {
  background:var(--grad-brand);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero p {
  font-size:1.2rem; color:var(--text-secondary);
  max-width:560px; margin:0 auto 2.5rem;
  line-height:1.7;
}
.hero-buttons { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero-badge {
  position:absolute; bottom:3rem; left:50%; transform:translateX(-50%);
  display:flex; gap:2rem;
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(10px);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:0.75rem 2rem;
}
.hero-badge-item { text-align:center; }
.hero-badge-item strong { display:block; font-size:1.25rem; font-weight:800; }
.hero-badge-item span { font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }

/* ─── Buttons ───────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.7rem 1.5rem;
  border-radius:var(--radius-md);
  font-size:0.925rem; font-weight:600;
  transition:var(--transition);
  border:none; cursor:pointer;
}
.btn-primary {
  background:var(--grad-brand); color:#fff;
  box-shadow:var(--shadow-brand);
}
.btn-primary:hover { opacity:0.9; transform:translateY(-2px); box-shadow:0 8px 30px rgba(124,58,237,0.5); }
.btn-secondary {
  background:rgba(255,255,255,0.06);
  color:var(--text-primary);
  border:1px solid var(--border);
}
.btn-secondary:hover { background:rgba(255,255,255,0.1); border-color:var(--border-hover); transform:translateY(-2px); }
.btn-accent {
  background:var(--grad-accent); color:#fff;
}
.btn-accent:hover { opacity:0.9; transform:translateY(-2px); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#DC2626; transform:translateY(-1px); }
.btn-sm { padding:0.45rem 0.9rem; font-size:0.8rem; border-radius:var(--radius-sm); }
.btn-icon { width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); }

/* ─── Cards ─────────────────────────────────────────────────────── */
.card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  transition:var(--transition);
}
.card:hover { border-color:var(--border-hover); background:var(--bg-card-hover); }
.card-header {
  padding:1.25rem 1.5rem;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.card-title { font-size:1rem; font-weight:700; display:flex; align-items:center; gap:0.5rem; }
.card-body { padding:1.5rem; }

/* ─── Features section ──────────────────────────────────────────── */
.section {
  padding:6rem 0;
  position:relative; z-index:1;
}
.section-label {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-size:0.75rem; font-weight:700;
  color:var(--accent);
  text-transform:uppercase; letter-spacing:0.1em;
  margin-bottom:0.75rem;
}
.section-title {
  font-size:clamp(1.75rem,4vw,2.75rem);
  font-weight:800; line-height:1.15;
  letter-spacing:-0.03em;
  margin-bottom:1rem;
}
.section-subtitle {
  font-size:1.05rem; color:var(--text-secondary);
  max-width:560px; line-height:1.7;
}
.features-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:1.25rem;
  margin-top:3rem;
}
.feature-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2rem;
  transition:var(--transition);
  position:relative; overflow:hidden;
}
.feature-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad-brand);
  opacity:0;
  transition:var(--transition);
}
.feature-card:hover { border-color:var(--border-brand); transform:translateY(-4px); box-shadow:var(--shadow-brand); }
.feature-card:hover::before { opacity:1; }
.feature-icon {
  width:48px; height:48px;
  border-radius:var(--radius-md);
  background:rgba(124,58,237,0.12);
  border:1px solid rgba(124,58,237,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
  margin-bottom:1.25rem;
}
.feature-card h3 { font-size:1rem; font-weight:700; margin-bottom:0.5rem; }
.feature-card p  { font-size:0.875rem; color:var(--text-secondary); line-height:1.6; }

/* ─── Stats Grid ────────────────────────────────────────────────── */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:1rem;
}
.stat-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  text-align:center;
  transition:var(--transition);
}
.stat-card:hover { border-color:var(--border-brand); transform:translateY(-2px); }
.stat-value { font-size:2rem; font-weight:800; letter-spacing:-0.03em; }
.stat-label { font-size:0.8rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-top:0.25rem; }
.stat-icon  { font-size:1.5rem; margin-bottom:0.75rem; }

/* ─── Badges ────────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:0.3rem;
  padding:0.2rem 0.6rem;
  border-radius:var(--radius-pill);
  font-size:0.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.04em;
}
.badge-brand    { background:rgba(124,58,237,0.15); color:var(--brand); border:1px solid rgba(124,58,237,0.3); }
.badge-success  { background:rgba(16,185,129,0.12); color:var(--success); border:1px solid rgba(16,185,129,0.25); }
.badge-danger   { background:rgba(239,68,68,0.12);  color:var(--danger);  border:1px solid rgba(239,68,68,0.25); }
.badge-warning  { background:rgba(245,158,11,0.12); color:var(--warning); border:1px solid rgba(245,158,11,0.25); }
.badge-enabled  { background:rgba(16,185,129,0.12); color:var(--success); border:1px solid rgba(16,185,129,0.25); }
.badge-disabled { background:rgba(239,68,68,0.12);  color:var(--danger);  border:1px solid rgba(239,68,68,0.25); }

/* ─── Forms ─────────────────────────────────────────────────────── */
.form-group { margin-bottom:1.25rem; }
.form-label { display:block; font-size:0.85rem; font-weight:600; margin-bottom:0.5rem; color:var(--text-secondary); }
.form-control {
  width:100%;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:0.65rem 0.9rem;
  font-size:0.9rem; color:var(--text-primary);
  font-family:inherit;
  transition:var(--transition);
  outline:none;
}
.form-control:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-glow); }
.form-control::placeholder { color:var(--text-muted); }
select.form-control { appearance:none; cursor:pointer; }
textarea.form-control { resize:vertical; min-height:100px; }

.toggle-switch { position:relative; width:44px; height:24px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; inset:0;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  cursor:pointer;
  transition:var(--transition);
}
.toggle-slider::before {
  content:'';
  position:absolute; left:3px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%;
  background:var(--text-muted);
  transition:var(--transition);
}
.toggle-switch input:checked + .toggle-slider { background:var(--brand); border-color:var(--brand); }
.toggle-switch input:checked + .toggle-slider::before { left:23px; background:#fff; }

/* ─── Dashboard Layout ──────────────────────────────────────────── */
.dash-layout {
  display:grid;
  grid-template-columns:240px 1fr;
  min-height:calc(100vh - 64px);
}
.dash-sidebar {
  background:var(--bg-surface);
  border-right:1px solid var(--border);
  padding:1.5rem 1rem;
  position:sticky; top:64px;
  height:calc(100vh - 64px);
  overflow-y:auto;
}
.dash-main { padding:2rem; overflow:auto; }

.sidebar-section-title {
  font-size:0.65rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.1em;
  color:var(--text-muted);
  padding:0 0.5rem; margin:1rem 0 0.5rem;
}
.sidebar-link {
  display:flex; align-items:center; gap:0.6rem;
  padding:0.55rem 0.75rem;
  border-radius:var(--radius-sm);
  font-size:0.875rem; font-weight:500;
  color:var(--text-secondary);
  transition:var(--transition);
  margin-bottom:0.15rem;
}
.sidebar-link:hover { color:var(--text-primary); background:rgba(255,255,255,0.05); }
.sidebar-link.active { color:var(--text-primary); background:rgba(124,58,237,0.15); border-left:2px solid var(--brand); }
.sidebar-link .icon { width:20px; text-align:center; font-size:1rem; opacity:0.7; }
.sidebar-link.active .icon { opacity:1; }

/* ─── Server Selector ───────────────────────────────────────────── */
.server-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:1rem;
}
.server-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  text-align:center;
  transition:var(--transition);
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:0.75rem;
}
.server-card:hover {
  border-color:var(--border-brand);
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(124,58,237,0.2);
}
.server-icon {
  width:72px; height:72px; border-radius:50%;
  border:3px solid var(--border);
  transition:var(--transition);
  object-fit:cover;
}
.server-card:hover .server-icon { border-color:var(--brand); }
.server-name { font-weight:700; font-size:0.9rem; }
.server-members { font-size:0.78rem; color:var(--text-muted); }
.server-manage {
  font-size:0.75rem; font-weight:600;
  padding:0.3rem 0.8rem;
  border-radius:var(--radius-pill);
  background:rgba(124,58,237,0.12);
  color:var(--brand);
  border:1px solid var(--border-brand);
  transition:var(--transition);
  margin-top:0.25rem;
}
.server-card:hover .server-manage { background:var(--brand); color:#fff; }

/* ─── Guild Header ──────────────────────────────────────────────── */
.guild-header {
  display:flex; align-items:center; gap:1.5rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.75rem 2rem;
  margin-bottom:2rem;
  position:relative; overflow:hidden;
}
.guild-header::before {
  content:'';
  position:absolute; inset:0;
  background:var(--grad-glow);
  opacity:0.4;
  pointer-events:none;
}
.guild-header-icon {
  width:80px; height:80px; border-radius:50%;
  border:3px solid var(--border-brand);
  object-fit:cover; flex-shrink:0;
  box-shadow:var(--shadow-brand);
  position:relative; z-index:1;
}
.guild-header-info { position:relative; z-index:1; }
.guild-header-info h1 { font-size:1.75rem; font-weight:800; letter-spacing:-0.02em; }
.guild-header-info p  { color:var(--text-secondary); font-size:0.9rem; margin-top:0.25rem; }
.guild-header-actions { margin-left:auto; position:relative; z-index:1; }

/* ─── Settings Grid ─────────────────────────────────────────────── */
.settings-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:1rem;
}
.setting-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  transition:var(--transition);
  cursor:pointer; display:block;
  position:relative; overflow:hidden;
}
.setting-card::after {
  content:'›';
  position:absolute; right:1.25rem; top:50%; transform:translateY(-50%);
  font-size:1.5rem; color:var(--text-muted);
  transition:var(--transition);
}
.setting-card:hover::after { right:1rem; color:var(--brand); }
.setting-card:hover {
  border-color:var(--border-brand);
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(124,58,237,0.15);
}
.setting-icon {
  width:44px; height:44px;
  border-radius:var(--radius-md);
  background:rgba(124,58,237,0.1);
  border:1px solid rgba(124,58,237,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; margin-bottom:1rem;
}
.setting-card h3 { font-size:0.95rem; font-weight:700; margin-bottom:0.4rem; }
.setting-card p  { font-size:0.82rem; color:var(--text-secondary); line-height:1.5; margin-bottom:0.75rem; }

/* ─── Now Playing Widget ────────────────────────────────────────── */
.now-playing-widget {
  background:linear-gradient(135deg, rgba(124,58,237,0.15) 0%, rgba(79,70,229,0.08) 100%);
  border:1px solid var(--border-brand);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  display:flex; gap:1.25rem; align-items:center;
  margin-bottom:2rem;
  position:relative; overflow:hidden;
}
.now-playing-widget::before {
  content:'';
  position:absolute; top:-50%; right:-10%;
  width:200px; height:200px;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(124,58,237,0.2) 0%, transparent 70%);
  pointer-events:none;
}
.np-thumbnail {
  width:72px; height:72px; border-radius:var(--radius-md);
  object-fit:cover; flex-shrink:0;
  box-shadow:var(--shadow-md);
}
.np-info { flex:1; min-width:0; }
.np-title { font-size:1rem; font-weight:700; truncate; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-author { font-size:0.825rem; color:var(--text-secondary); margin-top:0.15rem; }
.np-meta { display:flex; gap:1rem; margin-top:0.5rem; font-size:0.78rem; color:var(--text-muted); }
.np-controls { display:flex; gap:0.5rem; flex-shrink:0; }
.np-btn {
  width:36px; height:36px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:1px solid var(--border);
  color:var(--text-primary);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; cursor:pointer;
  transition:var(--transition);
}
.np-btn:hover { background:var(--brand); border-color:var(--brand); }
.np-btn.active { background:var(--brand); border-color:var(--brand); }

/* ─── Progress Bar ──────────────────────────────────────────────── */
.progress-bar {
  height:4px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.1);
  overflow:hidden; margin-top:0.75rem;
}
.progress-fill {
  height:100%; border-radius:var(--radius-pill);
  background:var(--grad-brand);
  transition:width 1s linear;
}

/* ─── Table ─────────────────────────────────────────────────────── */
.table-wrapper { overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; }
thead tr { background:rgba(255,255,255,0.03); }
th {
  padding:0.75rem 1rem;
  text-align:left;
  font-size:0.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.05em;
  color:var(--text-muted);
  border-bottom:1px solid var(--border);
}
td { padding:0.9rem 1rem; font-size:0.875rem; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tbody tr { transition:var(--transition); }
tbody tr:hover { background:rgba(255,255,255,0.02); }

/* ─── Playlist cards ────────────────────────────────────────────── */
.playlist-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:1rem; }
.playlist-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  transition:var(--transition);
}
.playlist-card:hover { border-color:var(--border-hover); transform:translateY(-2px); }
.playlist-title { font-weight:700; margin-bottom:0.25rem; }
.playlist-meta  { font-size:0.8rem; color:var(--text-muted); margin-bottom:1rem; }

/* ─── Alert / Toast ─────────────────────────────────────────────── */
.alert {
  padding:0.9rem 1.25rem;
  border-radius:var(--radius-md);
  font-size:0.875rem;
  display:flex; align-items:flex-start; gap:0.75rem;
  margin-bottom:1rem;
  border:1px solid;
}
.alert-success { background:rgba(16,185,129,0.08); border-color:rgba(16,185,129,0.25); color:#6EE7B7; }
.alert-danger  { background:rgba(239,68,68,0.08);  border-color:rgba(239,68,68,0.25);  color:#FCA5A5; }
.alert-warning { background:rgba(245,158,11,0.08); border-color:rgba(245,158,11,0.25); color:#FCD34D; }
.alert-info    { background:rgba(6,182,212,0.08);  border-color:rgba(6,182,212,0.25);  color:#67E8F9; }

.toast {
  position:fixed; bottom:2rem; right:2rem; z-index:9999;
  min-width:300px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:1rem 1.25rem;
  box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:0.75rem;
  animation:toastIn 0.3s cubic-bezier(0.4,0,0.2,1);
}
@keyframes toastIn { from { opacity:0; transform:translateX(120%); } to { opacity:1; transform:translateX(0); } }

/* ─── Profile page ──────────────────────────────────────────────── */
.profile-hero {
  background:linear-gradient(135deg, rgba(124,58,237,0.1) 0%, rgba(6,182,212,0.05) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:3rem;
  display:flex; align-items:center; gap:2rem;
  margin-bottom:2rem;
  position:relative; overflow:hidden;
}
.profile-avatar {
  width:100px; height:100px; border-radius:50%;
  border:4px solid var(--brand);
  box-shadow:var(--shadow-brand);
  flex-shrink:0;
}
.profile-info h1 { font-size:2rem; font-weight:800; }
.profile-badges { display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.5rem; }

/* ─── Leaderboard ───────────────────────────────────────────────── */
.lb-entry {
  display:flex; align-items:center; gap:1rem;
  padding:0.9rem 1.25rem;
  border-radius:var(--radius-md);
  transition:var(--transition);
}
.lb-entry:hover { background:rgba(255,255,255,0.03); }
.lb-rank {
  width:36px; text-align:center;
  font-size:0.85rem; font-weight:800;
  color:var(--text-muted);
}
.lb-rank.top-1 { color:#F59E0B; font-size:1.1rem; }
.lb-rank.top-2 { color:#94A3B8; font-size:1rem; }
.lb-rank.top-3 { color:#B45309; font-size:0.95rem; }
.lb-avatar { width:40px; height:40px; border-radius:50%; border:2px solid var(--border); }
.lb-name  { font-weight:600; font-size:0.9rem; flex:1; }
.lb-score { font-size:0.85rem; color:var(--text-secondary); font-weight:600; }

/* ─── Commands page ─────────────────────────────────────────────── */
.cmd-category {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  margin-bottom:1.25rem;
}
.cmd-category-header {
  padding:1rem 1.5rem;
  background:rgba(255,255,255,0.02);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:0.75rem;
  font-weight:700; cursor:pointer;
}
.cmd-list { padding:0.5rem 0; }
.cmd-item {
  padding:0.75rem 1.5rem;
  display:flex; align-items:flex-start; gap:0.75rem;
  border-bottom:1px solid rgba(255,255,255,0.03);
  transition:var(--transition);
}
.cmd-item:last-child { border-bottom:none; }
.cmd-item:hover { background:rgba(255,255,255,0.02); }
.cmd-name { font-weight:700; font-size:0.875rem; color:var(--brand); font-family:monospace; }
.cmd-desc { font-size:0.82rem; color:var(--text-secondary); margin-top:0.15rem; line-height:1.5; }

/* ─── Status page ───────────────────────────────────────────────── */
.status-indicator {
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
  animation:pulse 2s infinite;
}
.status-online  { background:var(--success); box-shadow:0 0 8px var(--success); }
.status-offline { background:var(--danger);  animation:none; }
.status-warning { background:var(--warning); box-shadow:0 0 8px var(--warning); }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }

/* ─── Error page ────────────────────────────────────────────────── */
.error-page {
  min-height:80vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:3rem 1.5rem;
}
.error-code {
  font-size:clamp(6rem,20vw,12rem);
  font-weight:900; line-height:1;
  background:var(--grad-brand);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:-0.05em;
}
.error-title { font-size:1.75rem; font-weight:700; margin-bottom:1rem; }
.error-msg   { color:var(--text-secondary); margin-bottom:2rem; max-width:420px; }

/* ─── Footer ────────────────────────────────────────────────────── */
.footer {
  background:var(--bg-surface);
  border-top:1px solid var(--border);
  padding:3rem 0 1.5rem;
  margin-top:4rem;
  position:relative; z-index:1;
}
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:2rem;
  margin-bottom:2.5rem;
}
.footer-brand { font-size:1.2rem; font-weight:800; background:var(--grad-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:0.75rem; }
.footer-desc  { font-size:0.85rem; color:var(--text-muted); line-height:1.6; max-width:280px; }
.footer-col-title { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:1rem; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:0.5rem; }
.footer-links li a { font-size:0.875rem; color:var(--text-secondary); transition:var(--transition); }
.footer-links li a:hover { color:var(--text-primary); }
.footer-bottom {
  padding-top:1.5rem;
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  font-size:0.8rem; color:var(--text-muted);
}

/* ─── Page header ───────────────────────────────────────────────── */
.page-header {
  margin-bottom:2rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
}
.page-title { font-size:1.5rem; font-weight:800; letter-spacing:-0.02em; }
.breadcrumb { display:flex; align-items:center; gap:0.5rem; font-size:0.82rem; color:var(--text-muted); margin-bottom:0.25rem; }
.breadcrumb a { color:var(--text-secondary); transition:var(--transition); }
.breadcrumb a:hover { color:var(--text-primary); }
.breadcrumb-sep { opacity:0.4; }

/* ─── Search ────────────────────────────────────────────────────── */
.search-box {
  position:relative; width:100%;
}
.search-icon {
  position:absolute; left:0.9rem; top:50%; transform:translateY(-50%);
  color:var(--text-muted); pointer-events:none;
}
.search-box .form-control { padding-left:2.5rem; }

/* ─── Music search result ───────────────────────────────────────── */
.track-result {
  display:flex; align-items:center; gap:1rem;
  padding:0.9rem 1rem;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  transition:var(--transition);
  background:var(--bg-card);
  cursor:pointer;
  margin-bottom:0.5rem;
}
.track-result:hover { border-color:var(--border-brand); background:var(--bg-card-hover); }
.track-thumb { width:56px; height:56px; border-radius:var(--radius-sm); object-fit:cover; flex-shrink:0; }
.track-info { flex:1; min-width:0; }
.track-title { font-weight:600; font-size:0.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-artist { font-size:0.8rem; color:var(--text-secondary); }
.track-duration { font-size:0.8rem; color:var(--text-muted); flex-shrink:0; }
.track-add-btn {
  width:32px; height:32px; border-radius:50%;
  background:rgba(124,58,237,0.12);
  border:1px solid var(--border-brand);
  color:var(--brand);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
  transition:var(--transition);
}
.track-result:hover .track-add-btn { background:var(--brand); color:#fff; border-color:var(--brand); }

/* ─── Premium section ───────────────────────────────────────────── */
.premium-hero {
  text-align:center;
  padding:6rem 1.5rem;
  background:radial-gradient(ellipse at center, rgba(124,58,237,0.12) 0%, transparent 70%);
  position:relative; z-index:1;
}
.premium-card {
  background:var(--bg-card);
  border:2px solid var(--border-brand);
  border-radius:var(--radius-xl);
  padding:3rem;
  position:relative; overflow:hidden;
  max-width:480px; margin:0 auto;
}
.premium-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad-brand);
}
.premium-price {
  font-size:3.5rem; font-weight:900; letter-spacing:-0.04em;
  background:var(--grad-brand);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.premium-features { list-style:none; margin:1.5rem 0; text-align:left; }
.premium-features li { padding:0.6rem 0; border-bottom:1px solid var(--border); font-size:0.9rem; display:flex; align-items:center; gap:0.75rem; }
.premium-features li:last-child { border-bottom:none; }
.premium-features li::before { content:'✓'; color:var(--success); font-weight:700; }

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width:1024px) {
  .dash-layout { grid-template-columns:1fr; }
  .dash-sidebar { display:none; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .nav-links { display:none; }
  .nav-toggle { display:flex; }
  .hero h1 { font-size:2.5rem; }
  .hero-badge { display:none; }
  .guild-header { flex-direction:column; text-align:center; }
  .guild-header-actions { margin-left:0; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; gap:0.5rem; text-align:center; }
}
@media (max-width:480px) {
  .container { padding:0 1rem; }
  .settings-grid { grid-template-columns:1fr; }
  .server-grid { grid-template-columns:1fr 1fr; }
  .profile-hero { flex-direction:column; text-align:center; }
}

/* ─── Animations ────────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes shimmer { from { background-position:-200% 0; } to { background-position:200% 0; } }
.fade-in  { animation:fadeIn  0.5s ease forwards; }
.slide-up { animation:slideUp 0.5s ease forwards; }

/* Skeleton loader */
.skeleton {
  background:linear-gradient(90deg, var(--bg-card) 25%, rgba(255,255,255,0.04) 50%, var(--bg-card) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--radius-md);
}

/* ═══════════════════════════════════════════════════════════════
   Botify v9.1 — Additional Styles & Fixes
   ═══════════════════════════════════════════════════════════════ */

/* ─── Navbar Mobile Fix ──────────────────────────────────────────── */
.mobile-only { display: none !important; }
.mobile-danger { color: var(--danger) !important; }
.desktop-only { display:inline-flex !important; }
@media (max-width: 768px) {
  .desktop-only { display:none !important; }
  .navbar { gap: 0; }
  .user-menu { gap: 0.4rem; }
}

/* ─── Miniplayer Responsive ──────────────────────────────────────── */
.now-playing-widget {
  flex-wrap: wrap;
  gap: 1rem;
}
.now-playing-widget .np-controls {
  min-width: 140px;
}
@media (max-width: 600px) {
  .now-playing-widget {
    flex-direction: column;
    align-items: flex-start;
  }
  .now-playing-widget .np-thumbnail {
    width: 56px; height: 56px;
  }
  .now-playing-widget .np-controls {
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: unset;
  }
  .np-btn { width: 40px; height: 40px; font-size: 1.1rem; }
}

/* ─── Range Input Styles ────────────────────────────────────────── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.1);
  outline: none;
  border: none;
  padding: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(124,58,237,0.5);
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand);
  cursor: pointer;
  border: none;
}

/* ─── Song Guess Leaderboard ────────────────────────────────────── */
.sg-rank-1 { color: #F59E0B; }
.sg-rank-2 { color: #94A3B8; }
.sg-rank-3 { color: #B45309; }

/* ─── Queue Manager ─────────────────────────────────────────────── */
.queue-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.queue-item:hover { background: rgba(255,255,255,0.02); }
.queue-num { width: 28px; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

/* ─── Footer Responsive Fix ─────────────────────────────────────── */
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* ─── Modal Fix ──────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* ─── Volume/Seek Progress Bar override ─────────────────────────── */
.np-info input[type="range"] {
  width: 100%;
  margin: 0;
}


/* ─── Mobile Menu Overlay ───────────────────────────────────────── */
.nav-toggle {
  display:none;
  align-items:center; justify-content:center;
  background:none; border:none;
  color:var(--text-primary);
  font-size:1.4rem;
  padding:0.4rem; cursor:pointer;
  border-radius:var(--radius-sm);
  transition:background 0.15s;
  line-height:1;
}
.nav-toggle:hover { background:rgba(255,255,255,0.06); }

/* Full-screen overlay backdrop */
.mobile-menu-overlay {
  position:fixed; inset:0; z-index:600;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.28s ease, visibility 0s linear 0.28s;
}
.mobile-menu-overlay.open {
  opacity:1;
  visibility:visible;
  transition:opacity 0.28s ease, visibility 0s;
}

/* Slide-in panel */
.mobile-menu-panel {
  position:absolute; top:0; right:0; bottom:0;
  width:min(320px, 85vw);
  background:var(--bg-surface);
  border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y:auto;
}
.mobile-menu-overlay.open .mobile-menu-panel {
  transform:translateX(0);
}

.mobile-menu-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--border);
  background:var(--bg-base);
  position:sticky; top:0; z-index:1;
}
.mobile-menu-close {
  background:none; border:none;
  color:var(--text-secondary);
  font-size:1.2rem; cursor:pointer;
  padding:0.25rem 0.5rem;
  border-radius:var(--radius-sm);
  transition:color 0.15s, background 0.15s;
}
.mobile-menu-close:hover { color:var(--text-primary); background:rgba(255,255,255,0.06); }

.mobile-menu-nav {
  display:flex; flex-direction:column;
  padding:0.75rem 0;
  flex:1;
}
.mobile-nav-link {
  display:block;
  padding:0.8rem 1.5rem;
  font-size:0.95rem; font-weight:500;
  color:var(--text-secondary);
  border-left:3px solid transparent;
  transition:color 0.15s, background 0.15s, border-color 0.15s;
}
.mobile-nav-link:hover,
.mobile-nav-link.active {
  color:var(--text-primary);
  background:rgba(124,58,237,0.08);
  border-left-color:var(--brand);
}

.mobile-menu-footer {
  padding:1.25rem;
  border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:1rem;
}
.mobile-user-row {
  display:flex; align-items:center; gap:0.75rem;
  padding:0.75rem;
  background:var(--bg-card);
  border-radius:var(--radius-md);
  border:1px solid var(--border);
}
.mobile-user-avatar {
  width:40px; height:40px; border-radius:50%;
  border:2px solid var(--border-brand);
  flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════════════
   Botify v9.2 — Comprehensive Fixes
   ═══════════════════════════════════════════════════════════════ */

/* ─── Navbar Mobile Fix ───────────────────────────────────────── */
@media (max-width: 768px) {
  .navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 500 !important;
    width: 100% !important;
  }
  .nav-links {
    display: none !important;
  }
  .nav-toggle {
    display: flex !important;
  }
}

/* ─── Advanced Loading Spinner ────────────────────────────────── */
.btn-spinner {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-btn 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 5px;
}
@keyframes spin-btn { to { transform: rotate(360deg); } }

.page-spinner {
  display: inline-block;
  width: 48px; height: 48px;
  border: 4px solid rgba(124,58,237,0.15);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin-btn 0.8s cubic-bezier(0.4,0,0.2,1) infinite;
}

.spinner-sm {
  width: 20px; height: 20px;
  border-width: 2px;
}

/* ─── Idle / Miniplayer state ─────────────────────────────────── */
.idle-player {
  border: 1px dashed var(--border) !important;
  opacity: 0.9;
}
.idle-player:hover {
  opacity: 1;
  border-color: var(--brand) !important;
}

/* ─── Settings warning banner ─────────────────────────────────── */
.settings-warning {
  padding: 0.75rem 1rem;
  background: rgba(254,231,92,0.1);
  border: 1px solid rgba(254,231,92,0.3);
  border-radius: var(--radius-md);
  color: #FEE75C;
  font-size: 0.875rem;
}

/* ─── Now Playing widget keep-alive ──────────────────────────── */
#miniplayerContainer {
  min-height: 0;
  transition: min-height 0.3s;
}
#miniplayerContainer:not(:empty) {
  margin-bottom: 1.5rem;
}

/* ─── Leaderboard enhancements ────────────────────────────────── */
.lb-entry { transition: background 0.15s, transform 0.1s; }
.lb-entry:hover { transform: translateX(2px); }

/* ─── Profile stat cards ──────────────────────────────────────── */
.stat-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}
.stat-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}

/* ── Server Stats Mini Cards ─────────────────────────────────── */
.stat-mini-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
  text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}
.stat-mini-card:hover {
  border-color: var(--border-brand);
  transform: translateY(-2px);
}
.smc-icon {
  font-size: 1.25rem;
  margin-bottom: 0.3rem;
}
.smc-val {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}
.smc-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}