/* ============================================================
   MCATiers v2.0.0 - Complete Theme System
   Modern dark/light palette with 8 color variants
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&family=Outfit:wght@400;600;700;800;900&display=swap');

/* ════════════════════ DARK THEMES ════════════════════ */
:root, [data-theme="dark"] {
  --bg:           #070b14;
  --bg2:          #0c1120;
  --bg3:          #111827;
  --bg4:          #172032;
  --bg5:          #070b1476;
  --border:       #1e2d45;
  --border2:      #2a4a7f;
  --text:         #e8eef8;
  --text4:         #0c192fb3;
    
  --text2:        #8ba3c7;
  --text3:        #3d5580;
  --accent:       #4f9eff;
  --accent2:      #38bdf8;
  --accent-glow:  rgba(79,158,255,0.25);
  --accent-glow2: rgba(79,158,255,0.08);
  --navbar:       rgba(7,11,20,0.92);
  --navbar-border:#1e2d45;
  --card-shadow:  0 4px 24px rgba(0,0,0,0.7);
  --danger:       #f87171;
  --success:      #4ade80;
  --warning:      #fb923c;
  --discord:      #5865F2;
  --discord-hover:#4752c4;
  --glass-bg:     rgba(17,24,39,0.6);
  --glass-border: rgba(79,158,255,0.15);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* Dark Space (default) */
[data-theme="dark"][data-color="space"] {
  --bg:           #070b14;
  --bg2:          #0c1120;
  --bg3:          #111827;
  --bg4:          #172032;
  --bg5:          #070b1476;
  --border:       #1e2d45;
  --border2:      #2a4a7f;
  --text:         #e8eef8;
  --text2:        #8ba3c7;
  --text3:        #3d5580;
  --accent:       #4f9eff;
  --accent2:      #38bdf8;
  --accent-glow:  rgba(79,158,255,0.25);
  --accent-glow2: rgba(79,158,255,0.08);
  --glass-bg:     rgba(7,11,20,0.55);
  --glass-border: rgba(79,158,255,0.18);
}

/* Dark Matrix (green) */
[data-theme="dark"][data-color="matrix"] {
  --bg:           #040a06;
  --bg2:          #081210;
  --bg3:          #0d1a14;
  --bg4:          #122218;
  --border:       #1a2e22;
  --border2:      #1f5c36;
  --text:         #d8f4e8;
  --text2:        #6ab88a;
  --text3:        #2d6b48;
  --accent:       #00e87a;
  --accent2:      #00ff88;
  --accent-glow:  rgba(0,232,122,0.25);
  --accent-glow2: rgba(0,232,122,0.08);
  --glass-bg:     rgba(4,10,6,0.55);
  --glass-border: rgba(0,232,122,0.15);
}

/* Dark Gold */
[data-theme="dark"][data-color="gold"] {
  --bg:           #0c0900;
  --bg2:          #140f00;
  --bg3:          #1c1600;
  --bg4:          #241e00;
  --border:       #2c2400;
  --border2:      #5a4500;
  --text:         #fff8e0;
  --text2:        #d4a843;
  --text3:        #7a6020;
  --accent:       #f5c518;
  --accent2:      #ffd700;
  --accent-glow:  rgba(245,197,24,0.25);
  --accent-glow2: rgba(245,197,24,0.08);
  --glass-bg:     rgba(12,9,0,0.55);
  --glass-border: rgba(245,197,24,0.15);
}

/* Dark Purple */
[data-theme="dark"][data-color="purple"] {
  --bg:           #08020f;
  --bg2:          #0f0520;
  --bg3:          #160830;
  --bg4:          #1e0d40;
  --border:       #280f60;
  --border2:      #4a1a9a;
  --text:         #f0e8ff;
  --text2:        #b08aff;
  --text3:        #6030b0;
  --accent:       #c87fff;
  --accent2:      #a855f7;
  --accent-glow:  rgba(200,127,255,0.25);
  --accent-glow2: rgba(200,127,255,0.08);
  --glass-bg:     rgba(8,2,15,0.55);
  --glass-border: rgba(200,127,255,0.15);
}

/* Dark Teal */
[data-theme="dark"][data-color="teal"] {
  --bg:           #020f0d;
  --bg2:          #041a18;
  --bg3:          #072520;
  --bg4:          #0b3028;
  --border:       #0d3a30;
  --border2:      #0f7060;
  --text:         #ccfffa;
  --text2:        #4ee0d0;
  --text3:        #0f807a;
  --accent:       #00f0d8;
  --accent2:      #2dd4bf;
  --accent-glow:  rgba(0,240,216,0.25);
  --accent-glow2: rgba(0,240,216,0.08);
  --glass-bg:     rgba(2,15,13,0.55);
  --glass-border: rgba(0,240,216,0.15);
}

/* ════════════════════ LIGHT THEMES ════════════════════ */
[data-theme="light"] {
  --bg:           #f5f7fc;
  --bg2:          #edf0f8;
  --bg3:          #ffffff;
  --bg4:          #f8faff;
  --bg5:           #00000000;
  --border:       #dde3f0;
  --border2:      #a0b4e0;
  --text:         #1a2340;
  --text2:        #3d5080;
  --text3:        #8a9dc0;
  --text4:         #1a2340b3;
  --accent:       #2563eb;
  --accent2:      #1d4ed8;
  --accent-glow:  rgba(37,99,235,0.2);
  --accent-glow2: rgba(37,99,235,0.07);
  --navbar:       rgba(255,255,255,0.97);
  --navbar-border:#dde3f0;
  --card-shadow:  0 2px 16px rgba(30,60,120,0.1);
  --danger:       #ef4444;
  --success:      #22c55e;
  --warning:      #f59e0b;
  --discord:      #5865F2;
  --discord-hover:#4752c4;
  --glass-bg:     rgba(255,255,255,0.6);
  --glass-border: rgba(37,99,235,0.12);
  --glass-shadow: 0 8px 32px rgba(30,60,120,0.12);
}
[data-theme="light"][data-color="sky"] {
  --accent:       #0ea5e9;
  --accent2:      #0284c7;
  --accent-glow:  rgba(14,165,233,0.2);
  --accent-glow2: rgba(14,165,233,0.07);
  --border2:      #7dd3fc;
  --glass-border: rgba(14,165,233,0.12);
}
[data-theme="light"][data-color="green"] {
  --accent:       #16a34a;
  --accent2:      #15803d;
  --accent-glow:  rgba(22,163,74,0.2);
  --accent-glow2: rgba(22,163,74,0.07);
  --border2:      #86efac;
  --glass-border: rgba(22,163,74,0.12);
}
[data-theme="light"][data-color="sand"] {
  --bg:           #fdf8f0;
  --bg2:          #faf0e0;
  --bg3:          #ffffff;
  --border:       #e8d5b8;
  --border2:      #d4872a;
  --text:         #2d1a00;
  --text2:        #7a4a10;
  --text3:        #b08050;
  --accent:       #d97706;
  --accent2:      #b45309;
  --accent-glow:  rgba(217,119,6,0.2);
  --accent-glow2: rgba(217,119,6,0.07);
  --glass-bg:     rgba(255,255,255,0.65);
  --glass-border: rgba(217,119,6,0.12);
}

/* ════ Base Reset ════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body {
  font-family:'Outfit','Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  line-height:1.6;
  transition:background .3s,color .3s;
  overflow-x:hidden;
}

/* Scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }

a { color:var(--accent); text-decoration:none; transition:color .2s; }
a:hover { color:var(--accent2); }

.container { max-width:1300px; margin:0 auto; padding:0 1.5rem; }
.page-wrapper { padding-top:64px; min-height:100vh; }
@media(max-width:768px){ .page-wrapper{padding-top:58px;} .container{padding:0 1rem;} }

/* ════ LIQUID GLASS BUTTONS ════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem 1.5rem; border-radius:14px; border:none;
  cursor:pointer; font-family:inherit; font-size:.9rem;
  font-weight:700; text-decoration:none; transition:all .25s cubic-bezier(.34,1.56,.64,1);
  letter-spacing:.03em; user-select:none; position:relative; overflow:hidden;
}
/* Liquid glass primary */
.btn-primary {
  background:linear-gradient(135deg, rgba(79,158,255,0.3) 0%, rgba(79,158,255,0.1) 100%);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(79,158,255,0.4);
  color:#fff;
  box-shadow:0 4px 24px rgba(79,158,255,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary::before {
  content:'';
  position:absolute; top:0; left:-100%;
  width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition:left .5s ease;
}
.btn-primary:hover { 
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 8px 32px rgba(79,158,255,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  border-color:rgba(79,158,255,0.7);
}
.btn-primary:hover::before { left:100%; }

/* Liquid glass accent (solid) */
.btn-accent {
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  border:1px solid rgba(255,255,255,0.2);
  color:#fff;
  box-shadow:0 4px 20px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-accent:hover {
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 8px 32px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.3);
  filter:brightness(1.1); color:#fff;
}

/* Ghost glass */
.btn-ghost {
  background:var(--glass-bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  color:var(--text2);
  box-shadow:var(--glass-shadow);
}
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* Discord button */
.btn-discord {
  background:linear-gradient(135deg, #5865F2, #4752c4);
  border:1px solid rgba(255,255,255,0.2);
  color:#fff;
  box-shadow:0 4px 20px rgba(88,101,242,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-discord:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(88,101,242,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  color:#fff;
}

/* Danger */
.btn-danger {
  background:linear-gradient(135deg, rgba(248,113,113,0.3), rgba(248,113,113,0.1));
  backdrop-filter:blur(12px);
  border:1px solid rgba(248,113,113,0.4);
  color:var(--danger);
}
.btn-danger:hover { background:linear-gradient(135deg, rgba(248,113,113,0.5), rgba(248,113,113,0.2)); transform:translateY(-1px); }

/* ════ GLASS CARDS ════ */
.glass-card {
  background:var(--glass-bg);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--glass-border);
  border-radius:18px;
  box-shadow:var(--glass-shadow);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.glass-card:hover {
  transform:translateY(-3px);
  border-color:var(--accent);
  box-shadow:0 12px 40px rgba(0,0,0,.4), 0 0 0 1px var(--accent-glow2);
}

.card {
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.25rem;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.card:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:var(--card-shadow); }

/* ════ BADGES ════ */
.badge {
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.18rem .6rem; border-radius:8px;
  font-size:.68rem; font-weight:700; letter-spacing:.04em;
}
.badge-accent { background:var(--accent-glow2); color:var(--accent); border:1px solid var(--accent); }
.badge-success { background:rgba(74,222,128,.1); color:var(--success); border:1px solid var(--success); }
.badge-danger  { background:rgba(248,113,113,.1); color:var(--danger); border:1px solid var(--danger); }
.badge-muted   { background:rgba(148,163,184,.1); color:var(--text3); border:1px solid var(--border); }

/* Online dot */
.dot-online {
  width:8px; height:8px; border-radius:50%;
  background:var(--success); box-shadow:0 0 8px var(--success);
  animation:pulse 2s infinite; display:inline-block; flex-shrink:0;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(.8)} }

/* ════ INPUTS ════ */
.input {
  background:var(--glass-bg);
  backdrop-filter:blur(8px);
  border:1px solid var(--border);
  border-radius:10px; padding:.55rem 1rem;
  color:var(--text); font-family:inherit; font-size:.875rem;
  width:100%; transition:border-color .2s,box-shadow .2s; outline:none;
}
.input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow2); }
.input::placeholder { color:var(--text3); }

/* ════ SPINNER ════ */
.spinner {
  width:28px; height:28px; border:2.5px solid var(--border);
  border-top-color:var(--accent); border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* ════ TOAST ════ */
#toast-container {
  position:fixed; bottom:1.5rem; right:1.5rem;
  z-index:9999; display:flex; flex-direction:column; gap:.5rem;
}
.toast {
  background:var(--glass-bg); backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:12px; padding:.75rem 1.25rem;
  font-size:.875rem; font-weight:500;
  min-width:220px; max-width:340px;
  box-shadow:var(--glass-shadow);
  animation:toastIn .3s cubic-bezier(.34,1.56,.64,1);
  display:flex; align-items:center; gap:.625rem;
}
.toast.success { border-color:var(--success); }
.toast.error   { border-color:var(--danger); }
.toast.info    { border-color:var(--accent); }
@keyframes toastIn { from{opacity:0;transform:translateX(60px) scale(.9)} to{opacity:1;transform:translateX(0) scale(1)} }

/* ════ MODAL ════ */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.75);
  z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:1rem; backdrop-filter:blur(8px); animation:bkIn .2s ease;
}
@keyframes bkIn { from{opacity:0} to{opacity:1} }
.modal {
  background:var(--glass-bg); backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid var(--glass-border);
  border-radius:20px; padding:2rem; width:100%; max-width:480px;
  box-shadow:0 24px 64px rgba(0,0,0,.6);
  animation:modalIn .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalIn { from{opacity:0;transform:scale(.85) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.modal-close {
  background:none; border:none; color:var(--text3);
  font-size:1.25rem; cursor:pointer; padding:.25rem;
  transition:color .2s; line-height:1; border-radius:6px;
}
.modal-close:hover { color:var(--danger); background:rgba(248,113,113,.1); }

/* ════ SECTION TITLE ════ */
.section-title {
  font-size:1.5rem; font-weight:800; color:var(--text);
  position:relative; padding-bottom:.5rem; display:inline-block;
}
.section-title::after {
  content:''; position:absolute; bottom:0; left:0;
  width:40px; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius:2px;
}

/* ════ PAGE TRANSITIONS ════ */
.page-fade {
  animation:pageFade .4s cubic-bezier(.4,0,.2,1);
}
@keyframes pageFade {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Stagger children */
.stagger > * {
  animation:staggerIn .5s cubic-bezier(.4,0,.2,1) both;
}
.stagger > *:nth-child(1){animation-delay:.05s}
.stagger > *:nth-child(2){animation-delay:.10s}
.stagger > *:nth-child(3){animation-delay:.15s}
.stagger > *:nth-child(4){animation-delay:.20s}
.stagger > *:nth-child(5){animation-delay:.25s}
.stagger > *:nth-child(6){animation-delay:.30s}
@keyframes staggerIn {
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* ════ DIVIDER ════ */
.divider {
  height:1px;
  background:linear-gradient(90deg, transparent, var(--border), transparent);
  margin:1.5rem 0;
}