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

/* ── RESET & BASE ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root {
  /* Premium Glassmorphism Theme (Midnight Neon) */
  --bg: #09090b;           /* Zinc 950 */
  --bg2: rgba(9, 9, 11, 0.7);
  
  --surf: rgba(255, 255, 255, 0.03);
  --surf2: rgba(255, 255, 255, 0.06);
  --surf-blur: blur(16px);
  
  --border: rgba(255, 255, 255, 0.08);   
  --border2: rgba(255, 255, 255, 0.15);
  --border-glow: rgba(56, 189, 248, 0.4);
  
  --a: #38bdf8;            /* Vibrant Cyan */
  --a2: #818cf8;           /* Indigo */
  --a3: #34d399;           /* Emerald */
  
  --t: #f8fafc;            /* Zinc 50 */
  --tm: #94a3b8;           /* Zinc 400 */
  --td: #64748b;           /* Zinc 500 */
  
  --r: 16px;
  --rs: 8px;
  --rx: 12px;
  
  --sh: 0 8px 32px rgba(0, 0, 0, 0.4);
  --sh2: 0 20px 80px rgba(0, 0, 0, 0.6);
  --panel-w: 640px;

  /* Status Colors */
  --green: #10b981;
  --yellow: #f59e0b;
  --red: #ef4444;
  --orange: #f97316;
  --cyan: #06b6d4;
  --purple: #8b5cf6;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--t);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── ANIMATED BACKGROUND ORBS ────────────────────────────────────────── */
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
  animation: float 20s ease-in-out infinite alternate;
}
.orb-1 { width: 400px; height: 400px; background: var(--a); top: -100px; left: -100px; animation-delay: 0s; }
.orb-2 { width: 500px; height: 500px; background: var(--a2); bottom: -150px; right: -150px; animation-delay: -5s; }
.orb-3 { width: 300px; height: 300px; background: var(--a3); top: 40%; left: 60%; opacity: 0.2; animation-delay: -10s; }

@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(100px, 50px) scale(1.2); }
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
#login-screen {
  position: relative;
  z-index: 1;
}

/* ── CUSTOM SCROLLBAR ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ── NAVBAR ─────────────────────────────────────────────────────────── */
nav {
  height: 72px;
  background: rgba(9, 9, 11, 0.6);
  backdrop-filter: var(--surf-blur);
  -webkit-backdrop-filter: var(--surf-blur);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.nav-brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-icon {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--a), var(--a2));
  color: #fff;
  border-radius: var(--rs);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 0 20px rgba(56,189,248,0.3);
  flex-shrink: 0;
}
.nav-title {
  font-family: 'Outfit', sans-serif;
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.5px;
  background: linear-gradient(to right, #fff, var(--tm));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.nav-sub {
  font-size: 10px; color: var(--td); font-family: 'JetBrains Mono', monospace; 
  margin-top: 2px; letter-spacing: 1.5px; text-transform: uppercase;
  white-space: nowrap;
}
.nav-center { flex: 1; max-width: 400px; margin: 0 24px; position: relative; }
.nav-search {
  width: 100%;
  padding: 12px 16px 12px 42px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 24px;
  color: var(--t);
  font-size: 13px;
  outline: none;
  transition: all .3s;
}
.nav-search::placeholder { color: var(--td); }
.nav-search:focus {
  border-color: var(--a);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 4px rgba(56,189,248,0.1);
}
.search-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--td); font-size: 16px; }

.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.btn-add {
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--a), var(--a2));
  border: none; border-radius: 24px;
  color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: all .3s;
  box-shadow: 0 4px 15px rgba(56,189,248,0.3);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-add:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(56,189,248,0.4); }
.btn-add:active { transform: translateY(1px) scale(0.98); }
.btn-icon {
  width: 42px; height: 42px;
  background: var(--surf); border: 1px solid var(--border);
  border-radius: var(--rs);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer;
  transition: all .2s;
  color: var(--tm);
}
.btn-icon:hover { border-color: var(--a); color: var(--a); background: var(--surf2); }
.btn-icon:active { transform: scale(0.92); }

/* ── MAIN CONTENT ────────────────────────────────────────────────────── */
main { flex: 1; padding: 32px 40px; max-width: 1600px; margin: 0 auto; width: 100%; }

/* ── STATS GRID ──────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
.stat-card {
  background: var(--surf);
  backdrop-filter: var(--surf-blur);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 24px;
  position: relative; overflow: hidden;
  cursor: pointer;
  transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--sh);
}
.stat-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--sc, var(--border)), transparent);
  opacity: 0.5; transition: opacity .3s;
}
.stat-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--border2);
  background: var(--surf2);
}
.stat-card:hover::before { opacity: 1; }
.stat-card.active {
  border-color: var(--a);
  background: rgba(56,189,248,0.05);
  box-shadow: 0 0 30px rgba(56,189,248,0.1);
}
.stat-card.active::before { background: var(--a); opacity: 1; }

.stat-icon { font-size: 28px; margin-bottom: 16px; display: inline-block; filter: drop-shadow(0 0 10px rgba(255,255,255,0.2)); }
.stat-val {
  font-size: 48px; font-weight: 800;
  color: #fff;
  line-height: 1;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -1px;
}
.stat-label {
  font-size: 12px; font-weight: 600; color: var(--tm); 
  text-transform: uppercase; letter-spacing: 1px; margin-top: 12px;
}
.stat-sub { font-size: 11px; color: var(--td); margin-top: 6px; }

/* ── CONTENT PANEL ───────────────────────────────────────────────────── */
.content-panel {
  background: rgba(9, 9, 11, 0.5);
  backdrop-filter: var(--surf-blur);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh);
}

/* ── FILTER BAR ──────────────────────────────────────────────────────── */
.filter-bar {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.02);
}
.tab-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--tm);
  background: var(--surf);
  transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.chip:hover { border-color: var(--border2); color: #fff; background: var(--surf2); transform: translateY(-1px); }
.chip.active {
  background: #fff;
  border-color: #fff;
  color: #000;
  box-shadow: 0 4px 15px rgba(255,255,255,0.2);
}
.filter-sep { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; }
.fsel {
  padding: 8px 16px;
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: #fff;
  font-size: 12px; font-weight: 500;
  outline: none; cursor: pointer;
  transition: all .3s;
}
.fsel:focus { border-color: var(--a); box-shadow: 0 0 0 3px rgba(56,189,248,0.2); }
.fsel option { background: var(--bg); color: #fff; }
.filter-spacer { flex: 1; }
.rec-count { font-size: 13px; color: var(--tm); font-family: 'JetBrains Mono', monospace; }
.btn-clear {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--tm); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .2s;
}
.btn-clear:hover { border-color: #fff; color: #fff; }

/* ── DATA TABLE ──────────────────────────────────────────────────────── */
.table-wrap {
  overflow: auto;
  max-height: calc(100vh - 420px);
  min-height: 300px;
}
table { width: 100%; border-collapse: collapse; min-width: 1400px; }
thead th {
  background: rgba(255,255,255,0.02);
  padding: 16px 20px;
  text-align: left;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--tm);
  border-bottom: 1px solid var(--border2);
  position: sticky; top: 0; z-index: 10;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: all .2s;
  backdrop-filter: blur(10px);
}
thead th:hover { color: #fff; background: rgba(255,255,255,0.05); }
thead th .sa { margin-left: 6px; opacity: .4; font-size: 10px; }
tbody tr {
  border-bottom: 1px solid var(--border);
  transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  animation: rowEntry 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes rowEntry {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
tbody tr:hover {
  background: rgba(255,255,255,0.04);
  transform: scale(1.002) translateX(4px);
}
tbody tr:last-child { border-bottom: none; }
tbody td {
  padding: 18px 20px;
  font-size: 13px;
  color: #fff;
  vertical-align: middle;
}
.sno-cell {
  color: var(--td);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  width: 60px;
}
.desc-cell { max-width: 260px; }
.ct {
  display: block; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--tm); }

/* BADGES & PILLS */
.pb, .safety-yes, .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.p-hi, .p-1, .safety-yes { background: rgba(239,68,68,.15); color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }
.p-md { background: rgba(245,158,11,.15); color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }
.p-lo { background: rgba(16,185,129,.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); }
.safety-no { color: var(--td); font-size: 11px; }

/* Dynamic Status Pills */
.s0 { background: rgba(99,102,241,.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,.3); }
.s1 { background: rgba(6,182,212,.15); color: #67e8f9; border: 1px solid rgba(6,182,212,.3); }
.s2 { background: rgba(139,92,246,.15); color: #c4b5fd; border: 1px solid rgba(139,92,246,.3); }
.s3 { background: rgba(16,185,129,.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); }
.s4 { background: rgba(245,158,11,.15); color: #fde68a; border: 1px solid rgba(245,158,11,.3); }
.s5 { background: rgba(249,115,22,.15); color: #fdba74; border: 1px solid rgba(249,115,22,.3); }
.s6 { background: rgba(59,130,246,.15); color: #93c5fd; border: 1px solid rgba(59,130,246,.3); }
.s7 { background: rgba(16,185,129,.2); color: #10b981; border: 1px solid rgba(16,185,129,.4); }
.s8 { background: rgba(245,158,11,.15); color: #fde68a; border: 1px solid rgba(245,158,11,.3); }
.s9 { background: rgba(249,115,22,.15); color: #fdba74; border: 1px solid rgba(249,115,22,.3); }
.s10{ background: rgba(139,92,246,.2); color: #8b5cf6; border: 1px solid rgba(139,92,246,.4); }
.s11{ background: rgba(16,185,129,.25); color: #059669; border: 1px solid rgba(16,185,129,.5); box-shadow: 0 0 10px rgba(16,185,129,0.2); }
.s12{ background: rgba(100,116,139,.15); color: #94a3b8; border: 1px solid rgba(100,116,139,.3); }

/* Progress */
.status-progress {
  width: 120px; height: 4px;
  background: var(--surf2);
  margin-top: 10px; border-radius: 2px;
  overflow: hidden;
}
.status-progress-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--a), var(--a2));
  transition: width .6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ACTIONS */
.act-btns { display: flex; gap: 8px; }
.btn-edit {
  padding: 6px 14px;
  background: var(--surf); border: 1px solid var(--border);
  border-radius: 20px;
  color: #fff; font-size: 11px; font-weight: 600; text-transform: uppercase;
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.btn-edit:hover { border-color: var(--a); background: rgba(56,189,248,0.1); color: var(--a); }
.btn-del {
  padding: 6px 14px;
  background: var(--surf); border: 1px solid var(--border);
  border-radius: 20px;
  color: #ef4444; font-size: 11px; font-weight: 600; text-transform: uppercase;
  cursor: pointer; transition: all .2s;
}
.btn-del:hover { border-color: #ef4444; background: rgba(239,68,68,0.1); }

/* ── SIDE PANEL ──────────────────────────────────────────────────────── */
.panel-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6); backdrop-filter: blur(8px);
  z-index: 100; opacity: 0; pointer-events: none;
  transition: opacity .4s ease;
}
.panel-overlay.open { opacity: 1; pointer-events: auto; }
.side-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--panel-w);
  background: rgba(9, 9, 11, 0.85);
  backdrop-filter: blur(24px);
  border-left: 1px solid var(--border);
  z-index: 101; display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -20px 0 80px rgba(0,0,0,0.8);
}
.side-panel.open { transform: translateX(0); }

.panel-header {
  padding: 32px; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between;
  background: rgba(255,255,255,0.02); flex-shrink: 0;
}
.panel-mode {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
  color: var(--a); margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.panel-mode-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--a); box-shadow: 0 0 10px var(--a); }
.panel-title { font-family: 'Outfit', sans-serif; font-size: 32px; font-weight: 700; color: #fff; }
.panel-sub { font-size: 13px; color: var(--tm); margin-top: 6px; }

.panel-close {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surf); border: 1px solid var(--border);
  color: var(--tm); cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 20px; transition: all .3s;
}
.panel-close:hover { background: rgba(255,255,255,0.1); color: #fff; transform: rotate(90deg); }

.panel-body { flex: 1; overflow-y: auto; padding: 32px; }
.form-section { margin-bottom: 40px; }
.section-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.section-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(56,189,248,0.2), rgba(129,140,248,0.2));
  color: var(--a); border: 1px solid rgba(56,189,248,0.3);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.section-label { font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 600; color: #fff; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid.single { grid-template-columns: 1fr; }
.form-grid.triple { grid-template-columns: 1fr 1fr 1fr; }
.fg { display: flex; flex-direction: column; gap: 8px; }
.fg.span2 { grid-column: span 2; }
.fg label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--td);
}
.fg label .req { color: var(--a); margin-left: 4px; }
.fg input, .fg select, .fg textarea {
  padding: 14px 16px;
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  color: #fff; font-size: 14px; font-family: 'Inter', sans-serif;
  outline: none; transition: all .3s;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: var(--a); background: rgba(56,189,248,0.05);
  box-shadow: 0 0 0 4px rgba(56,189,248,0.1);
}
.fg textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

.panel-footer {
  padding: 24px 32px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,255,255,0.02); flex-shrink: 0;
}
.btn-save {
  padding: 14px 32px;
  background: linear-gradient(135deg, var(--a), var(--a2));
  border: none; border-radius: 24px;
  color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  transition: all .3s; box-shadow: 0 4px 20px rgba(56,189,248,0.4);
}
.btn-save:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(56,189,248,0.5); }
.btn-save:active { transform: translateY(1px); }

/* ── LOGIN SCREEN ─────────────────────────────────────────────────────── */
#login-screen {
  position: fixed; inset: 0;
  background: var(--bg); z-index: 9999;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.login-box {
  width: 440px;
  background: rgba(9, 9, 11, 0.7); backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 48px;
  box-shadow: var(--sh2), 0 0 40px rgba(56,189,248,0.1) inset;
  text-align: center;
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative; overflow: hidden;
}
.login-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--a), var(--a2), var(--a3));
}
.login-icon {
  width: 80px; height: 80px; margin: 0 auto 24px;
  background: linear-gradient(135deg, var(--a), var(--a2));
  border-radius: 20px; display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: #fff; box-shadow: 0 10px 30px rgba(56,189,248,0.4);
}
.login-title { font-family: 'Outfit', sans-serif; font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.login-sub { font-size: 13px; color: var(--tm); margin-bottom: 40px; text-transform: uppercase; letter-spacing: 2px; }
.login-form { display: flex; flex-direction: column; gap: 20px; }
.login-input {
  padding: 16px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: #fff; font-size: 15px; outline: none; transition: all .3s;
}
.login-input:focus {
  border-color: var(--a); background: rgba(56,189,248,0.05);
  box-shadow: 0 0 0 4px rgba(56,189,248,0.1);
}
.login-btn {
  margin-top: 12px; padding: 16px;
  background: linear-gradient(135deg, var(--a), var(--a2));
  border: none; border-radius: 12px;
  color: #fff; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
  cursor: pointer; transition: all .3s; box-shadow: 0 8px 25px rgba(56,189,248,0.4);
}
.login-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(56,189,248,0.5); }
.login-error { color: #fca5a5; font-size: 13px; margin-top: 12px; display: none; background: rgba(239,68,68,0.1); padding: 10px; border-radius: 8px; }

/* MISC */
.empty { text-align: center; padding: 100px 20px; color: var(--td); }
.empty-ico { font-size: 64px; margin-bottom: 24px; display: inline-block; opacity: 0.5; }
.empty p { font-size: 20px; color: #fff; font-family: 'Outfit', sans-serif; font-weight: 600; }
.empty small { font-size: 14px; color: var(--td); display: block; margin-top: 8px; }

.pagination { display: flex; align-items: center; justify-content: space-between; padding: 24px; border-top: 1px solid var(--border); background: rgba(255,255,255,0.02); }
.page-info { font-size: 13px; color: var(--tm); font-family: 'JetBrains Mono', monospace; }
.page-btns { display: flex; gap: 8px; }
.page-btn {
  width: 40px; height: 40px; background: var(--surf); border: 1px solid var(--border);
  border-radius: 8px; color: var(--tm); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.page-btn:hover:not(:disabled) { border-color: var(--a); color: var(--a); background: rgba(56,189,248,0.1); }
.page-btn.active { background: linear-gradient(135deg, var(--a), var(--a2)); border: none; color: #fff; box-shadow: 0 4px 15px rgba(56,189,248,0.3); }

/* TOAST */
.toast-container { position: fixed; bottom: 32px; right: 32px; z-index: 300; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.toast {
  background: rgba(9, 9, 11, 0.9); backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-left: 4px solid var(--a);
  border-radius: 12px; padding: 16px 24px; font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 12px; box-shadow: var(--sh2);
  transform: translateX(120%); opacity: 0; transition: all .4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto; min-width: 320px;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.success { border-left-color: var(--a3); color: #fff; }
.toast.error { border-left-color: var(--red); color: #fff; }

.spinner { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.2); border-top-color: white; border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media(max-width: 1024px) {
  nav { flex-wrap: wrap; height: auto; padding: 16px; gap: 16px; }
  .nav-center { max-width: 100%; order: 3; margin: 0; width: 100%; flex-basis: 100%; }
}
@media(max-width: 768px) {
  main { padding: 16px; }
  :root { --panel-w: 100vw; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .login-box { width: 90%; padding: 32px; }
}