/* ═══════════════════════════════════════════════════════════════════════════
   Allu Dashboard · Ultra-Premium CSS
   Dark Discord-inspired · Glassmorphism · Animations · Micro-interactions
═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:           #0d0e11;
  --bg-mid:       #16181d;
  --bg-card:      #1e2027;
  --bg-glass:     rgba(30,32,39,.72);
  --bg-input:     #12131a;
  --sidebar:      #13151a;
  --border:       #2e3038;
  --border-light: #3a3d47;
  --blurple:      #5865f2;
  --blurple-h:    #4752c4;
  --blurple-glow: rgba(88,101,242,.45);
  --blurple-soft: rgba(88,101,242,.12);
  --green:        #3ba55d;
  --green-bright: #57f287;
  --green-glow:   rgba(87,242,135,.35);
  --red:          #ed4245;
  --red-glow:     rgba(237,66,69,.35);
  --yellow:       #fee75c;
  --yellow-glow:  rgba(254,231,92,.3);
  --pink:         #eb459e;
  --cyan:         #00d4ff;
  --orange:       #ff7043;
  --text:         #c8ccd4;
  --text-muted:   #6b7280;
  --text-light:   #f0f2f5;
  --text-dim:     #444a57;
  --sidebar-w:    240px;
  --topbar-h:     58px;
  --radius:       10px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --shadow-sm:    0 2px 8px rgba(0,0,0,.4);
  --shadow:       0 6px 24px rgba(0,0,0,.5);
  --shadow-lg:    0 12px 40px rgba(0,0,0,.6);
  --shadow-glow:  0 0 30px var(--blurple-glow);
  --ease:         cubic-bezier(.4,0,.2,1);
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);
  --ease-out:     cubic-bezier(0,0,.2,1);
}

@keyframes fadeIn         { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInLeft     { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeInScale    { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }
@keyframes slideDown      { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse          { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes shimmer        { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
@keyframes glow           { 0%,100%{box-shadow:0 0 16px var(--blurple-glow)} 50%{box-shadow:0 0 32px var(--blurple-glow),0 0 64px rgba(88,101,242,.25)} }
@keyframes float          { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes ripple         { to{transform:scale(4);opacity:0} }
@keyframes barFill        { from{width:0} }
@keyframes countUp        { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes gradientShift  { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes sidebarItemIn  { from{opacity:0;transform:translateX(-12px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastIn        { from{opacity:0;transform:translateX(120%)} to{opacity:1;transform:translateX(0)} }
@keyframes blobFloat {
  0%,100%{ border-radius:60% 40% 30% 70%/60% 30% 70% 40%; transform:rotate(0deg) scale(1) }
  33%    { border-radius:30% 60% 70% 40%/50% 60% 30% 60%; transform:rotate(60deg) scale(1.05) }
  66%    { border-radius:50% 60% 30% 60%/30% 40% 70% 60%; transform:rotate(120deg) scale(.97) }
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:14px }
body {
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  min-height:100vh;
  overflow-x:hidden;
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(88,101,242,.07) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(0,212,255,.05) 0%, transparent 50%);
}
body::before,body::after {
  content:''; position:fixed; border-radius:50%; filter:blur(80px);
  pointer-events:none; z-index:0; animation:blobFloat 20s ease-in-out infinite;
}
body::before {
  width:500px; height:500px;
  background:radial-gradient(circle,rgba(88,101,242,.08) 0%,transparent 70%);
  top:-150px; left:-100px;
}
body::after {
  width:400px; height:400px;
  background:radial-gradient(circle,rgba(0,212,255,.06) 0%,transparent 70%);
  bottom:-100px; right:-100px; animation-delay:-10s;
}
a { color:var(--blurple); text-decoration:none; transition:color .2s var(--ease) }
a:hover { color:var(--cyan) }
h1,h2,h3,h4,h5,h6 { color:var(--text-light); font-weight:700; line-height:1.3 }
::selection { background:var(--blurple); color:#fff }
::-webkit-scrollbar { width:5px; height:5px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--border-light); border-radius:99px }
::-webkit-scrollbar-thumb:hover { background:var(--blurple) }

.dashboard-wrapper { display:flex; min-height:100vh; position:relative; z-index:1 }

/* ─── SIDEBAR ──────────────────────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w);
  background:var(--sidebar);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:200;
  overflow-y:auto; overflow-x:hidden;
  transition:transform .3s var(--ease),box-shadow .3s;
  background-image:linear-gradient(180deg,rgba(88,101,242,.04) 0%,transparent 30%);
}
.sidebar::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--blurple),var(--cyan),var(--pink));
  background-size:200% 100%; animation:gradientShift 4s linear infinite;
}
.sidebar-brand {
  display:flex; align-items:center; gap:10px;
  padding:18px 16px 16px; border-bottom:1px solid var(--border);
  text-decoration:none !important; position:relative; overflow:hidden; transition:background .2s;
}
.sidebar-brand:hover { background:rgba(255,255,255,.03) }
.sidebar-brand::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent,rgba(88,101,242,.05)); opacity:0; transition:opacity .3s }
.sidebar-brand:hover::after { opacity:1 }
.sidebar-brand img,
.sidebar-brand .brand-logo {
  width:36px; height:36px; border-radius:12px;
  background:linear-gradient(135deg,var(--blurple),var(--pink));
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:16px; color:#fff; flex-shrink:0; object-fit:cover;
  box-shadow:0 4px 16px rgba(88,101,242,.4);
  animation:float 4s ease-in-out infinite;
  transition:transform .3s var(--ease-spring);
}
.sidebar-brand:hover img,
.sidebar-brand:hover .brand-logo { transform:rotate(10deg) scale(1.1); animation:none }
.sidebar-brand .brand-name {
  font-size:16px; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(90deg,var(--text-light),#a5b4fc);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.sidebar-brand .brand-badge {
  font-size:10px; background:linear-gradient(135deg,var(--blurple),var(--cyan));
  color:#fff; border-radius:6px; padding:2px 6px; margin-left:auto;
  font-weight:700; letter-spacing:.3px; flex-shrink:0;
  box-shadow:0 2px 8px rgba(88,101,242,.3);
}
.sidebar-section { padding:14px 8px 4px }
.sidebar-label { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-dim); padding:4px 10px; margin-bottom:4px }
.sidebar-nav { list-style:none }
.sidebar-nav li { animation:sidebarItemIn .35s var(--ease) both }
.sidebar-nav li:nth-child(1)  { animation-delay:.03s }
.sidebar-nav li:nth-child(2)  { animation-delay:.06s }
.sidebar-nav li:nth-child(3)  { animation-delay:.09s }
.sidebar-nav li:nth-child(4)  { animation-delay:.12s }
.sidebar-nav li:nth-child(5)  { animation-delay:.15s }
.sidebar-nav li:nth-child(6)  { animation-delay:.18s }
.sidebar-nav li:nth-child(7)  { animation-delay:.21s }
.sidebar-nav li:nth-child(8)  { animation-delay:.24s }
.sidebar-nav li:nth-child(9)  { animation-delay:.27s }
.sidebar-nav li:nth-child(10) { animation-delay:.30s }
.sidebar-nav li:nth-child(11) { animation-delay:.33s }
.sidebar-nav li:nth-child(12) { animation-delay:.36s }
.sidebar-nav a {
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:var(--radius); color:var(--text-muted); font-size:13.5px; font-weight:500;
  text-decoration:none !important; position:relative; overflow:hidden;
  transition:background .2s var(--ease),color .2s var(--ease),transform .15s var(--ease-spring);
}
.sidebar-nav a::before {
  content:''; position:absolute; left:-100%; top:0; bottom:0; width:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);
  transition:left .4s var(--ease);
}
.sidebar-nav a:hover::before { left:100% }
.sidebar-nav a::after {
  content:''; position:absolute; left:0; top:25%; bottom:25%;
  width:3px; border-radius:0 3px 3px 0; background:var(--blurple);
  transform:scaleY(0); transition:transform .2s var(--ease-spring);
}
.sidebar-nav a.active::after { transform:scaleY(1) }
.sidebar-nav a i { width:20px; text-align:center; font-size:14px; transition:transform .2s var(--ease-spring),color .2s }
.sidebar-nav a:hover { background:rgba(255,255,255,.05); color:var(--text-light); transform:translateX(2px) }
.sidebar-nav a:hover i { transform:scale(1.15); color:var(--blurple) }
.sidebar-nav a.active { background:linear-gradient(90deg,rgba(88,101,242,.18),rgba(88,101,242,.06)); color:var(--text-light); font-weight:600 }
.sidebar-nav a.active i { color:var(--blurple) }
.sidebar-footer { margin-top:auto; padding:12px 8px; border-top:1px solid var(--border) }
.sidebar-user { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius); transition:background .2s }
.sidebar-user:hover { background:rgba(255,255,255,.04) }
.sidebar-user img { width:32px; height:32px; border-radius:50%; border:2px solid var(--border-light); transition:border-color .2s }
.sidebar-user:hover img { border-color:var(--blurple) }
.sidebar-user .user-info { flex:1; min-width:0 }
.sidebar-user .user-name { font-size:13px; font-weight:700; color:var(--text-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sidebar-user .user-id { font-size:11px; color:var(--text-muted) }

/* ─── MAIN ─────────────────────────────────────────────────────────────── */
.main-content { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; animation:fadeIn .4s var(--ease) both }

/* ─── TOPBAR ───────────────────────────────────────────────────────────── */
.topbar {
  height:var(--topbar-h);
  background:rgba(19,21,26,.88);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 24px; gap:12px;
  position:sticky; top:0; z-index:100;
  box-shadow:0 1px 0 var(--border),0 4px 20px rgba(0,0,0,.3);
  animation:slideDown .35s var(--ease) both;
}
.topbar .page-title {
  font-size:16px; font-weight:700; flex:1;
  background:linear-gradient(90deg,var(--text-light) 60%,var(--text-muted));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.topbar .topbar-actions { display:flex; align-items:center; gap:8px }
.hamburger { display:none; background:none; border:none; color:var(--text); font-size:18px; cursor:pointer; padding:6px 8px; border-radius:var(--radius); transition:background .2s,color .2s,transform .2s var(--ease-spring) }
.hamburger:hover { background:var(--bg-card); color:var(--text-light); transform:rotate(90deg) }

/* ─── GUILD HEADER ─────────────────────────────────────────────────────── */
.guild-header { display:flex; align-items:center; gap:16px; padding:24px 24px 0; animation:fadeIn .4s .1s var(--ease) both }
.guild-header img,
.guild-header .guild-icon-placeholder {
  width:54px; height:54px; border-radius:14px; object-fit:cover;
  background:var(--bg-card); border:2px solid var(--border-light);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800; color:var(--text-muted);
  box-shadow:var(--shadow-sm),0 0 20px rgba(88,101,242,.15);
  transition:transform .25s var(--ease-spring),box-shadow .25s;
}
.guild-header img:hover,
.guild-header .guild-icon-placeholder:hover { transform:scale(1.06); box-shadow:var(--shadow),0 0 30px rgba(88,101,242,.25) }
.guild-header .guild-name {
  font-size:22px; font-weight:800;
  background:linear-gradient(90deg,#fff,#c9d1ff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.guild-header .guild-meta { font-size:12px; color:var(--text-muted); margin-top:3px; display:flex; align-items:center; gap:10px }

.page-body { padding:24px; flex:1; animation:fadeIn .4s .15s var(--ease) both }

/* ─── CARDS ────────────────────────────────────────────────────────────── */
.card {
  background:var(--bg-glass); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease-spring);
  animation:fadeInScale .35s var(--ease) both; overflow:hidden; position:relative;
}
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--blurple),transparent); opacity:0; transition:opacity .3s }
.card:hover::before { opacity:1 }
.card:hover { border-color:var(--border-light); box-shadow:var(--shadow-lg) }
.card-header { background:rgba(255,255,255,.02); border-bottom:1px solid var(--border); padding:15px 20px; font-size:14px; font-weight:700; color:var(--text-light); display:flex; align-items:center; gap:10px }
.card-header i { color:var(--blurple); font-size:15px; filter:drop-shadow(0 0 6px var(--blurple-glow)) }
.card-body { padding:20px }

/* ─── STAT CARDS ───────────────────────────────────────────────────────── */
.stat-card {
  background:var(--bg-glass); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:20px 22px; display:flex; align-items:center; gap:18px;
  box-shadow:var(--shadow); backdrop-filter:blur(12px);
  position:relative; overflow:hidden;
  transition:transform .25s var(--ease-spring),border-color .25s,box-shadow .25s;
  animation:countUp .5s var(--ease) both;
}
.stat-card::after { content:''; position:absolute; bottom:-30px; right:-30px; width:90px; height:90px; border-radius:50%; background:var(--blurple-soft); transition:transform .3s,opacity .3s; opacity:.6 }
.stat-card:hover::after { transform:scale(1.5); opacity:1 }
.stat-card:hover { transform:translateY(-4px) scale(1.01); border-color:var(--blurple); box-shadow:var(--shadow-lg),var(--shadow-glow) }
.stat-card .stat-icon { width:48px; height:48px; border-radius:12px; background:var(--blurple-soft); border:1px solid rgba(88,101,242,.2); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--blurple); flex-shrink:0; transition:transform .3s var(--ease-spring),box-shadow .3s; filter:drop-shadow(0 0 8px var(--blurple-glow)); position:relative; z-index:1 }
.stat-card:hover .stat-icon { transform:rotate(-8deg) scale(1.1); box-shadow:0 6px 20px rgba(88,101,242,.4) }
.stat-card .stat-value { font-size:26px; font-weight:900; line-height:1; position:relative; z-index:1; background:linear-gradient(90deg,#fff,#c9d1ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.stat-card .stat-label { font-size:12px; color:var(--text-muted); margin-top:4px; font-weight:500; position:relative; z-index:1 }

/* ─── BUTTONS ──────────────────────────────────────────────────────────── */
.btn { border-radius:var(--radius); font-size:13.5px; font-weight:700; padding:9px 18px; cursor:pointer; border:none; position:relative; overflow:hidden; transition:background .2s var(--ease),transform .15s var(--ease-spring),box-shadow .2s var(--ease),opacity .2s; letter-spacing:.2px; display:inline-flex; align-items:center; gap:7px }
.btn::after { content:''; position:absolute; top:50%; left:50%; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.3); transform:translate(-50%,-50%) scale(0); opacity:0; pointer-events:none }
.btn:active::after { animation:ripple .5s var(--ease-out) }
.btn:active { transform:scale(.96) }
.btn-primary { background:linear-gradient(135deg,var(--blurple),#7c3aed); color:#fff; box-shadow:0 4px 16px rgba(88,101,242,.35) }
.btn-primary:hover { background:linear-gradient(135deg,var(--blurple-h),#6d28d9); transform:translateY(-2px); box-shadow:0 6px 24px rgba(88,101,242,.5); color:#fff }
.btn-danger { background:linear-gradient(135deg,var(--red),#c2243c); color:#fff; box-shadow:0 4px 14px rgba(237,66,69,.3) }
.btn-danger:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(237,66,69,.45); color:#fff; opacity:.92 }
.btn-success { background:linear-gradient(135deg,var(--green),#22c55e); color:#fff; box-shadow:0 4px 14px rgba(59,165,93,.3) }
.btn-success:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(59,165,93,.45); color:#fff; opacity:.92 }
.btn-secondary { background:var(--bg-card); border:1px solid var(--border-light); color:var(--text); box-shadow:var(--shadow-sm) }
.btn-secondary:hover { background:var(--border); border-color:var(--text-dim); color:var(--text-light); transform:translateY(-1px) }
.btn-sm { padding:6px 12px; font-size:12px; border-radius:8px }
.btn-lg { padding:12px 28px; font-size:15px; border-radius:12px }
.btn-icon { width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius) }
.btn-outline-primary { background:transparent; border:1.5px solid var(--blurple); color:var(--blurple) }
.btn-outline-primary:hover { background:var(--blurple-soft); transform:translateY(-1px); color:var(--blurple) }
.btn-outline-danger { background:transparent; border:1.5px solid var(--red); color:var(--red) }
.btn-outline-danger:hover { background:rgba(237,66,69,.1); transform:translateY(-1px); color:var(--red) }
.btn-outline-light { background:transparent; border:1.5px solid var(--border-light); color:var(--text-muted) }
.btn-outline-light:hover { background:rgba(255,255,255,.06); border-color:var(--text-muted); color:var(--text-light); transform:translateY(-1px) }

/* ─── FORMS ────────────────────────────────────────────────────────────── */
.form-label { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); margin-bottom:7px; display:block }
.form-control,.form-select { background:var(--bg-input); border:1.5px solid var(--border); border-radius:var(--radius); color:var(--text); padding:10px 13px; font-size:14px; width:100%; outline:none; transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s; font-family:inherit }
.form-control:hover,.form-select:hover { border-color:var(--border-light) }
.form-control:focus,.form-select:focus { border-color:var(--blurple); box-shadow:0 0 0 3px rgba(88,101,242,.18),0 2px 12px rgba(88,101,242,.1); background:#14151e; color:var(--text-light) }
.form-control::placeholder { color:var(--text-dim) }
textarea.form-control { resize:vertical; min-height:88px }
.form-text { font-size:11px; color:var(--text-muted); margin-top:5px }
.form-check-input { width:16px; height:16px; background-color:var(--bg-input); border:1.5px solid var(--border-light); border-radius:4px; cursor:pointer; transition:background .2s,border-color .2s,box-shadow .2s; appearance:none; -webkit-appearance:none; position:relative }
.form-check-input:checked { background-color:var(--blurple); border-color:var(--blurple); box-shadow:0 0 8px rgba(88,101,242,.4) }
.form-check-input:checked::after { content:''; position:absolute; left:4px; top:1px; width:5px; height:9px; border:2px solid #fff; border-top:none; border-left:none; transform:rotate(42deg) }
.form-check-input[type=radio] { border-radius:50% }
.form-check-input[type=radio]:checked::after { width:6px; height:6px; border:none; background:#fff; border-radius:50%; left:3px; top:3px }
.form-switch .form-check-input { width:36px; height:20px; border-radius:20px; position:relative }
.form-switch .form-check-input::before { content:''; position:absolute; left:3px; top:3px; width:12px; height:12px; border-radius:50%; background:#fff; transition:transform .25s var(--ease-spring); box-shadow:0 1px 4px rgba(0,0,0,.4) }
.form-switch .form-check-input::after { display:none }
.form-switch .form-check-input:checked::before { transform:translateX(16px) }
input[type=range] { -webkit-appearance:none; appearance:none; height:5px; border-radius:99px; background:var(--border); outline:none; cursor:pointer }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--blurple); box-shadow:0 0 8px var(--blurple-glow); cursor:pointer; transition:transform .2s var(--ease-spring),box-shadow .2s }
input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.25); box-shadow:0 0 16px var(--blurple-glow) }

/* ─── TABLES ───────────────────────────────────────────────────────────── */
.table { color:var(--text); border-color:var(--border); margin-bottom:0; width:100%; border-collapse:collapse }
.table thead th { background:rgba(255,255,255,.025); color:var(--text-muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; border-color:var(--border); padding:11px 14px; white-space:nowrap }
.table tbody td { border-color:var(--border); padding:11px 14px; vertical-align:middle; transition:background .15s }
.table tbody tr { transition:background .15s }
.table tbody tr:hover { background:rgba(88,101,242,.04) }
.table-responsive { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border) }

/* ─── BADGES ───────────────────────────────────────────────────────────── */
.badge { font-size:11px; font-weight:700; padding:3px 9px; border-radius:6px; letter-spacing:.3px; transition:transform .15s var(--ease-spring) }
.badge:hover { transform:scale(1.08) }
.badge-blurple { background:rgba(88,101,242,.2); color:#8a97ff; box-shadow:inset 0 0 0 1px rgba(88,101,242,.3) }
.badge-green   { background:rgba(87,242,135,.12); color:var(--green-bright); box-shadow:inset 0 0 0 1px rgba(87,242,135,.25) }
.badge-red     { background:rgba(237,66,69,.12); color:var(--red); box-shadow:inset 0 0 0 1px rgba(237,66,69,.25) }
.badge-yellow  { background:rgba(254,231,92,.12); color:var(--yellow); box-shadow:inset 0 0 0 1px rgba(254,231,92,.25) }
.badge-gray    { background:rgba(255,255,255,.06); color:var(--text-muted); box-shadow:inset 0 0 0 1px var(--border) }
.bg-success  { background:linear-gradient(135deg,#16a34a,#22c55e) !important; box-shadow:0 2px 8px rgba(34,197,94,.3) }
.bg-warning  { background:linear-gradient(135deg,#d97706,#f59e0b) !important; box-shadow:0 2px 8px rgba(245,158,11,.3) }
.bg-danger   { background:linear-gradient(135deg,#dc2626,#ef4444) !important; box-shadow:0 2px 8px rgba(239,68,68,.3) }
.bg-secondary{ background:var(--border) !important; color:var(--text-muted) !important }
.bg-primary  { background:linear-gradient(135deg,var(--blurple),#7c3aed) !important; box-shadow:0 2px 8px var(--blurple-glow) }

/* ─── ALERTS ───────────────────────────────────────────────────────────── */
.alert { border-radius:var(--radius-lg); padding:14px 18px; font-size:13.5px; border:1px solid transparent; display:flex; align-items:center; gap:12px; animation:slideDown .3s var(--ease) both; backdrop-filter:blur(12px); position:relative; overflow:hidden }
.alert::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px }
.alert-success { background:rgba(87,242,135,.07); border-color:rgba(87,242,135,.2); color:var(--green-bright) }
.alert-success::before { background:var(--green-bright) }
.alert-danger  { background:rgba(237,66,69,.07); border-color:rgba(237,66,69,.2); color:var(--red) }
.alert-danger::before { background:var(--red) }
.alert-info    { background:rgba(88,101,242,.07); border-color:rgba(88,101,242,.2); color:#8a97ff }
.alert-info::before { background:var(--blurple) }
.alert-warning { background:rgba(254,231,92,.07); border-color:rgba(254,231,92,.2); color:var(--yellow) }
.alert-warning::before { background:var(--yellow) }

/* ─── GUILD CARDS ──────────────────────────────────────────────────────── */
.guild-card { background:var(--bg-glass); border:1px solid var(--border); border-radius:var(--radius-xl); padding:24px 20px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; transition:border-color .25s var(--ease),transform .25s var(--ease-spring),box-shadow .25s; cursor:pointer; text-decoration:none !important; backdrop-filter:blur(12px); position:relative; overflow:hidden; animation:fadeInScale .4s var(--ease) both }
.guild-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(88,101,242,.1),rgba(0,212,255,.06)); opacity:0; transition:opacity .3s }
.guild-card:hover::before { opacity:1 }
.guild-card:hover { border-color:var(--blurple); transform:translateY(-6px) scale(1.02); box-shadow:0 16px 40px rgba(88,101,242,.25),0 4px 12px rgba(0,0,0,.4) }
.guild-card img,
.guild-card .guild-card-icon { width:68px; height:68px; border-radius:20px; object-fit:cover; background:var(--bg-mid); display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:800; color:var(--text-muted); border:2px solid var(--border-light); transition:transform .3s var(--ease-spring),box-shadow .3s,border-color .3s; position:relative; z-index:1 }
.guild-card:hover img,
.guild-card:hover .guild-card-icon { transform:scale(1.08) rotate(-3deg); box-shadow:0 8px 24px rgba(88,101,242,.3); border-color:var(--blurple) }
.guild-card .gc-name { font-size:15px; font-weight:700; color:var(--text-light); position:relative; z-index:1 }
.guild-card .gc-meta { font-size:12px; color:var(--text-muted); position:relative; z-index:1 }
.guild-card .gc-btn { margin-top:4px; font-size:12.5px; font-weight:700; padding:7px 20px; border-radius:var(--radius); border:none; background:linear-gradient(135deg,var(--blurple),#7c3aed); color:#fff; cursor:pointer; transition:transform .2s var(--ease-spring),box-shadow .2s; position:relative; z-index:1; box-shadow:0 4px 14px rgba(88,101,242,.3) }
.guild-card:hover .gc-btn { transform:scale(1.05); box-shadow:0 6px 20px rgba(88,101,242,.45) }
.guild-invite-card { opacity:.65; border-style:dashed }
.guild-invite-card:hover { opacity:1 }
.guild-invite-card .gc-btn { background:var(--bg-card); border:1.5px solid var(--border-light); color:var(--text-muted); box-shadow:none }
.guild-invite-card:hover .gc-btn { background:linear-gradient(135deg,var(--blurple),#7c3aed); border-color:var(--blurple); color:#fff; box-shadow:0 4px 14px rgba(88,101,242,.3) }

/* ─── LEADERBOARD ──────────────────────────────────────────────────────── */
.lb-row { display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:var(--radius); transition:background .15s,transform .15s var(--ease-spring); animation:fadeIn .35s var(--ease) both }
.lb-row:hover { background:rgba(88,101,242,.06); transform:translateX(4px) }
.lb-rank { width:30px; font-size:16px; font-weight:900; color:var(--text-muted); text-align:center; flex-shrink:0; transition:transform .2s var(--ease-spring) }
.lb-row:hover .lb-rank { transform:scale(1.2) }
.lb-rank.gold   { color:#ffd700; filter:drop-shadow(0 0 6px rgba(255,215,0,.5)) }
.lb-rank.silver { color:#c0c0c0; filter:drop-shadow(0 0 6px rgba(192,192,192,.4)) }
.lb-rank.bronze { color:#cd7f32; filter:drop-shadow(0 0 6px rgba(205,127,50,.4)) }
.lb-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--bg-mid); border:2px solid transparent; transition:border-color .2s,transform .2s var(--ease-spring) }
.lb-row:hover .lb-avatar { border-color:var(--blurple); transform:scale(1.08) }
.lb-name { flex:1; font-weight:700; color:var(--text-light); font-size:13.5px }
.lb-sub  { font-size:11px; color:var(--text-muted); margin-top:1px }
.lb-xp-bar-wrap { width:100px; background:var(--bg-mid); border-radius:99px; height:6px; overflow:hidden; border:1px solid var(--border) }
.lb-xp-bar { height:100%; background:linear-gradient(90deg,var(--blurple),var(--cyan)); border-radius:99px; box-shadow:0 0 8px var(--blurple-glow); animation:barFill 1s var(--ease) both }
.lb-level { width:38px; height:38px; border-radius:50%; background:var(--blurple-soft); border:1.5px solid rgba(88,101,242,.3); color:var(--blurple); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; flex-shrink:0; transition:transform .2s var(--ease-spring),box-shadow .2s }
.lb-row:hover .lb-level { transform:scale(1.12); box-shadow:0 0 12px var(--blurple-glow) }

/* ─── LANDING PAGE ─────────────────────────────────────────────────────── */
.hero { background:var(--bg); min-height:100vh; display:flex; flex-direction:column; position:relative; overflow:hidden }
.hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 60% at 50% -20%,rgba(88,101,242,.2) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 80% 80%,rgba(0,212,255,.1) 0%,transparent 60%),radial-gradient(ellipse 30% 30% at 20% 90%,rgba(235,69,158,.08) 0%,transparent 60%); animation:gradientShift 10s ease infinite; background-size:200% 200% }
.hero-nav { display:flex; align-items:center; padding:20px 48px; border-bottom:1px solid var(--border); gap:16px; position:relative; z-index:2; backdrop-filter:blur(12px); background:rgba(13,14,17,.7); animation:slideDown .4s var(--ease) both }
.hero-nav .nav-brand { font-size:20px; font-weight:900; color:var(--text-light); text-decoration:none !important; display:flex; align-items:center; gap:10px }
.hero-nav .nav-brand span { background:linear-gradient(90deg,var(--blurple),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.hero-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:80px 24px; gap:28px; position:relative; z-index:2; animation:fadeIn .6s .2s var(--ease) both }
.hero-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 16px; border-radius:99px; background:rgba(88,101,242,.12); border:1px solid rgba(88,101,242,.3); color:#8a97ff; font-size:13px; font-weight:600; animation:float 3s ease-in-out infinite }
.hero-title { font-size:clamp(36px,6vw,72px); font-weight:900; line-height:1.08; color:var(--text-light); letter-spacing:-1px }
.hero-title .grad { background:linear-gradient(135deg,var(--blurple) 0%,var(--cyan) 50%,var(--pink) 100%); background-size:200% 200%; animation:gradientShift 4s ease infinite; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.hero-sub { font-size:clamp(15px,2vw,19px); color:var(--text-muted); max-width:560px; line-height:1.75 }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; justify-content:center }
.hero-stats { display:flex; gap:48px; flex-wrap:wrap; justify-content:center; margin-top:20px }
.hero-stat .hs-value { font-size:32px; font-weight:900; background:linear-gradient(135deg,var(--blurple),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1 }
.hero-stat .hs-label { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-top:4px; font-weight:600 }
.features { padding:80px 48px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; max-width:1200px; margin:0 auto; position:relative; z-index:2 }
.feature-card { background:var(--bg-glass); border:1px solid var(--border); border-radius:var(--radius-xl); padding:28px 24px; text-align:center; backdrop-filter:blur(12px); transition:border-color .25s,transform .25s var(--ease-spring),box-shadow .25s; animation:fadeInScale .4s var(--ease) both; position:relative; overflow:hidden }
.feature-card::after { content:''; position:absolute; bottom:-40px; right:-40px; width:100px; height:100px; border-radius:50%; background:var(--blurple-soft); transition:transform .4s,opacity .4s; opacity:0 }
.feature-card:hover::after { transform:scale(2); opacity:1 }
.feature-card:hover { border-color:var(--blurple); transform:translateY(-6px); box-shadow:0 16px 40px rgba(88,101,242,.2) }
.feature-card .fc-icon { font-size:36px; margin-bottom:14px; display:block; transition:transform .3s var(--ease-spring); filter:drop-shadow(0 0 10px var(--blurple-glow)) }
.feature-card:hover .fc-icon { transform:rotate(-8deg) scale(1.15) }
.feature-card h4 { font-size:15px; font-weight:700; color:var(--text-light); margin-bottom:8px; position:relative; z-index:1 }
.feature-card p  { font-size:13px; color:var(--text-muted); margin:0; position:relative; z-index:1 }

/* ─── STATUS DOTS ──────────────────────────────────────────────────────── */
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; position:relative }
.status-dot::after { content:''; position:absolute; inset:-3px; border-radius:50%; animation:pulse 2s ease-in-out infinite }
.status-online  { background:var(--green-bright); box-shadow:0 0 6px var(--green-glow) }
.status-online::after  { background:rgba(87,242,135,.2) }
.status-offline { background:var(--red); box-shadow:0 0 6px var(--red-glow) }
.status-offline::after { background:rgba(237,66,69,.15) }

/* ─── MISC UTILITIES ───────────────────────────────────────────────────── */
.text-muted   { color:var(--text-muted) !important }
.text-blurple { color:var(--blurple) !important }
.text-green   { color:var(--green-bright) !important }
.text-red     { color:var(--red) !important }
.text-yellow  { color:var(--yellow) !important }
.text-cyan    { color:var(--cyan) !important }
.divider { border-color:var(--border); margin:16px 0 }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:56px 40px; color:var(--text-muted); animation:fadeIn .4s var(--ease) both }
.empty-state i { font-size:52px; opacity:.25; animation:float 4s ease-in-out infinite; filter:drop-shadow(0 0 12px var(--blurple-glow)) }
.empty-state p { font-size:14px; margin:0 }
.copy-btn { cursor:pointer; background:var(--border); border:none; color:var(--text-muted); border-radius:5px; padding:3px 8px; font-size:11px; transition:background .15s,color .15s,transform .15s var(--ease-spring) }
.copy-btn:hover { background:var(--blurple); color:#fff; transform:scale(1.05) }
.action-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap; animation:fadeIn .3s var(--ease) both }
.action-bar h5 { margin:0; font-size:15px; color:var(--text-light) }
.input-group { display:flex; border-radius:var(--radius); overflow:hidden; border:1.5px solid var(--border); transition:border-color .2s,box-shadow .2s }
.input-group:focus-within { border-color:var(--blurple); box-shadow:0 0 0 3px rgba(88,101,242,.18) }
.input-group .form-control { border:none; border-radius:0; box-shadow:none }
.input-group .form-control:focus { box-shadow:none; border:none }
.input-group .btn { border-radius:0 }
.pagination-bar { display:flex; align-items:center; justify-content:space-between; padding:13px 20px; border-top:1px solid var(--border); flex-wrap:wrap; gap:8px; background:rgba(255,255,255,.01) }
.pagination-bar .pg-info { font-size:12px; color:var(--text-muted) }
.pagination-bar .pg-btns { display:flex; gap:4px }
.pg-btn { width:32px; height:32px; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg-card); color:var(--text); font-size:13px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none !important; transition:background .15s,color .15s,transform .15s var(--ease-spring),border-color .15s }
.pg-btn:hover { background:var(--border); color:var(--text-light); transform:scale(1.08); border-color:var(--border-light) }
.pg-btn.active { background:linear-gradient(135deg,var(--blurple),#7c3aed); border-color:transparent; color:#fff; font-weight:800; box-shadow:0 2px 10px rgba(88,101,242,.4) }
.pg-btn:disabled,.pg-btn.disabled { opacity:.35; pointer-events:none }
.filter-bar { display:flex; align-items:center; gap:8px; padding:13px 20px; border-bottom:1px solid var(--border); flex-wrap:wrap }
.filter-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:99px; border:1px solid var(--border); background:rgba(255,255,255,.03); color:var(--text-muted); font-size:12px; font-weight:600; text-decoration:none !important; transition:background .2s,color .2s,border-color .2s,transform .15s var(--ease-spring),box-shadow .2s; white-space:nowrap }
.filter-chip:hover { background:var(--blurple-soft); border-color:rgba(88,101,242,.4); color:#8a97ff; transform:translateY(-1px) }
.filter-chip.active { background:var(--blurple-soft); border-color:var(--blurple); color:#8a97ff; font-weight:700; box-shadow:0 2px 10px rgba(88,101,242,.2) }
.tab-bar { display:flex; border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none }
.tab-bar::-webkit-scrollbar { display:none }
.tab-btn { padding:13px 20px; border:none; background:none; color:var(--text-muted); font-size:13.5px; font-weight:600; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .2s,border-color .2s,background .2s; display:flex; align-items:center; gap:8px; white-space:nowrap }
.tab-btn:hover { color:var(--text-light); background:rgba(255,255,255,.03) }
.tab-btn.active { color:var(--blurple); border-bottom-color:var(--blurple) }
.tab-btn.active i { filter:drop-shadow(0 0 6px var(--blurple-glow)) }
.tab-panel { display:none; padding:20px 0 0; animation:fadeIn .25s var(--ease) both }
.tab-panel.active { display:block }
.vote-option { margin-bottom:14px }
.vote-option .vote-label { display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; color:var(--text); font-weight:500 }
.vote-bar-wrap { height:10px; background:var(--bg-mid); border-radius:99px; overflow:hidden; border:1px solid var(--border) }
.vote-bar-fill { height:100%; background:linear-gradient(90deg,var(--blurple),var(--cyan)); border-radius:99px; box-shadow:0 0 10px var(--blurple-glow); transition:width .6s var(--ease); animation:barFill .8s var(--ease) both }
.member-row { display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--border); transition:background .15s,transform .15s var(--ease-spring) }
.member-row:last-child { border-bottom:none }
.member-row:hover { background:rgba(88,101,242,.04); transform:translateX(3px) }
.member-row .m-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; background:var(--bg-mid); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:var(--text-muted); flex-shrink:0; border:2px solid transparent; transition:border-color .2s,transform .2s var(--ease-spring) }
.member-row:hover .m-avatar { border-color:var(--blurple); transform:scale(1.06) }
.member-row .m-name { font-weight:600; font-size:13.5px; color:var(--text-light) }
.member-row .m-role { font-size:11px; color:var(--text-muted); margin-top:2px }
.embed-preview { border-left:4px solid var(--blurple); background:rgba(255,255,255,.03); border-radius:0 var(--radius) var(--radius) 0; padding:13px 16px; font-size:13px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); transition:border-color .2s }
.embed-preview:hover { border-left-color:var(--cyan) }
.embed-preview .ep-title { font-weight:700; color:var(--text-light); margin-bottom:4px }
.embed-preview .ep-desc { color:var(--text-muted); font-size:12px; white-space:pre-wrap; word-break:break-word; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
.modal-content { background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg),0 0 60px rgba(88,101,242,.1); backdrop-filter:blur(20px); animation:fadeInScale .25s var(--ease) both }
.modal-header { background:rgba(255,255,255,.025); border-bottom:1px solid var(--border); color:var(--text-light); border-radius:var(--radius-xl) var(--radius-xl) 0 0; padding:18px 24px }
.modal-footer { background:rgba(255,255,255,.02); border-top:1px solid var(--border); padding:14px 24px }
.modal-header .btn-close { filter:invert(1); opacity:.6; transition:opacity .2s,transform .2s var(--ease-spring) }
.modal-header .btn-close:hover { opacity:1; transform:rotate(90deg) scale(1.1) }
.modal-body { padding:20px 24px }
.modal-backdrop { background:rgba(0,0,0,.7); backdrop-filter:blur(4px) }
.info-box { background:rgba(255,255,255,.025); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; font-size:12.5px; color:var(--text); line-height:1.8 }
.info-box .ib-header { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-muted); margin-bottom:8px }
.stat-row { display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px }
.stat-row:last-child { border-bottom:none }
.stat-row .sr-label { color:var(--text-muted) }
.stat-row .sr-value { font-weight:700; color:var(--text-light) }
.skeleton { background:linear-gradient(90deg,var(--bg-mid) 25%,var(--border) 37%,var(--bg-mid) 63%); background-size:1200px 100%; animation:shimmer 1.4s ease-in-out infinite; border-radius:var(--radius) }
.skeleton-text   { height:14px; margin-bottom:8px }
.skeleton-title  { height:22px; width:60%; margin-bottom:12px }
.skeleton-avatar { width:40px; height:40px; border-radius:50% }
.skeleton-card   { height:100px; border-radius:var(--radius-lg) }
.chart-wrapper { position:relative; height:200px; width:100% }
.chart-wrapper canvas { max-height:200px }
.toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:10px; pointer-events:none }
.toast-item { background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius-lg); padding:14px 18px; font-size:13.5px; color:var(--text-light); box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:12px; min-width:280px; max-width:380px; pointer-events:all; animation:toastIn .35s var(--ease-spring) both; backdrop-filter:blur(16px) }
.toast-item.success { border-left:3px solid var(--green-bright) }
.toast-item.error   { border-left:3px solid var(--red) }
.toast-item.info    { border-left:3px solid var(--blurple) }
#np-progress { transition:width .8s linear; background:linear-gradient(90deg,var(--blurple),var(--cyan)); box-shadow:0 0 12px var(--blurple-glow) }
footer { background:rgba(255,255,255,.01); border-top:1px solid var(--border) !important }
.glow-blurple { box-shadow:0 0 20px var(--blurple-glow) !important }
.glow-green   { box-shadow:0 0 20px var(--green-glow) !important }
.glow-red     { box-shadow:0 0 20px var(--red-glow) !important }
.grad-text { background:linear-gradient(90deg,var(--blurple),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.link-animated { position:relative; color:var(--text-light); text-decoration:none !important }
.link-animated::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:linear-gradient(90deg,var(--blurple),var(--cyan)); border-radius:99px; transition:width .3s var(--ease) }
.link-animated:hover::after { width:100% }
.link-animated:hover { color:var(--text-light) }

/* ─── RESPONSIVE ───────────────────────────────────────────────────────── */
@media(max-width:768px){
  .sidebar { transform:translateX(calc(-1 * var(--sidebar-w))); box-shadow:none }
  .sidebar.open { transform:translateX(0); box-shadow:8px 0 40px rgba(0,0,0,.6) }
  .main-content { margin-left:0 }
  .hamburger { display:block }
  .page-body { padding:14px }
  .guild-header { padding:14px 14px 0 }
  .topbar { padding:0 14px }
  .hero-nav { padding:16px 20px }
  .features { padding:40px 16px }
  .hero-body { padding:48px 20px }
  .hero-stats { gap:28px }
  .stat-card { padding:14px 16px }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important }
}
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); z-index:199 }
@media(max-width:768px){ .sidebar-overlay.show { display:block } }

/* ── SERVER BANNER ─────────────────────────────────────────────────── */
.server-banner {
  width:100%; height:110px; flex-shrink:0;
  background-size:cover; background-position:center;
  position:relative;
  animation:fadeIn .4s var(--ease) both;
}
.server-banner::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 30%, rgba(13,14,17,.75));
}

/* ── PERSONALITY BAR ─────────────────────────────────────────────── */
.personality-bar {
  display:flex; align-items:center; gap:10px;
  padding:7px 24px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.015);
  flex-shrink:0; flex-wrap:wrap;
  animation:slideDown .3s var(--ease) both;
}
.personality-desc {
  font-size:12.5px;
  color:var(--text-muted);
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ── FOOTER STICKY ──────────────────────────────────────────────── */
.main-content > footer { margin-top:auto; }
.hero > footer { margin-top:auto; }

/* ── ANNOUNCEMENTS ───────────────────────────────────────────────── */
.ann-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; }
.ann-tab {
  padding:8px 18px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text-muted);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:.18s;
}
.ann-tab:hover  { background:var(--card-hover); color:var(--text); }
.ann-tab.active { background:var(--blurple); color:#fff; border-color:var(--blurple); }

.ann-panel          { display:none; }
.ann-panel.active   { display:block; }

.type-toggle {
  display:flex; gap:0;
  border-radius:8px; overflow:hidden;
  border:1px solid var(--border); width:fit-content; margin-bottom:18px;
}
.type-btn {
  padding:8px 20px; font-size:13px; font-weight:500; cursor:pointer;
  background:var(--card); color:var(--text-muted); border:none; transition:.18s;
}
.type-btn.active { background:var(--blurple); color:#fff; }

.embed-preview {
  border-left:4px solid var(--preview-color, var(--blurple));
  background:rgba(255,255,255,.03);
  border-radius:0 10px 10px 0;
  padding:14px 16px;
  margin-top:16px;
}
.embed-preview .ep-author { font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:6px; }
.embed-preview .ep-title  { font-size:15px; font-weight:700; color:var(--text); margin-bottom:6px; }
.embed-preview .ep-desc   { font-size:13px; color:var(--text-muted); white-space:pre-wrap; }
.embed-preview .ep-image  { margin-top:10px; max-width:100%; border-radius:8px; }
.embed-preview .ep-footer { font-size:11px; color:var(--text-muted); margin-top:10px; }

.ann-status-sent      { color:#23d18b; font-size:12.5px; font-weight:600; }
.ann-status-scheduled { color:#f0b232; font-size:12.5px; font-weight:600; }
.ann-status-cancelled { color:var(--text-muted); font-size:12.5px; font-weight:600; }
.ann-status-failed    { color:#f23f42; font-size:12.5px; font-weight:600; }
.ann-status-queued    { color:#7289da; font-size:12.5px; font-weight:600; }

.tpl-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  transition:.2s;
}
.tpl-card:hover { border-color:var(--blurple-soft); background:var(--card-hover); }
.tpl-card .tpl-icon {
  width:38px; height:38px; border-radius:9px;
  background:var(--blurple-soft);
  display:flex; align-items:center; justify-content:center;
  color:var(--blurple); font-size:16px; flex-shrink:0;
}
.tpl-card .tpl-info  { flex:1; min-width:0; }
.tpl-card .tpl-name  { font-weight:600; font-size:13.5px; color:var(--text); }
.tpl-card .tpl-meta  { font-size:11.5px; color:var(--text-muted); margin-top:2px; overflow:hidden;
                       white-space:nowrap; text-overflow:ellipsis; }