/* SMMBOOST — Global Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Syne:wght@700;800&display=swap');

/* ── TOKENS ───────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg:       #0a0b14;
  --bg2:      #0f1120;
  --bg3:      #141728;
  --card:     #111426;
  --card2:    #181b30;
  --card3:    #1e2238;
  --border:   rgba(99,102,241,0.12);
  --border2:  rgba(99,102,241,0.22);
  --text:     #e8e6ff;
  --text2:    #7c7aa8;
  --text3:    #4a4870;
  --accent:   #6366f1;
  --accent2:  #818cf8;
  --accent3:  #a5b4fc;
  --green:    #10b981;
  --red:      #ef4444;
  --gold:     #f59e0b;
  --blue:     #38bdf8;
  --pink:     #ec4899;
  --orange:   #f97316;
  --sidebar:  #0c0d1a;
  --shadow:   0 4px 24px rgba(0,0,0,.4);
  --shadow2:  0 8px 40px rgba(0,0,0,.5);
}

:root[data-theme="light"] {
  --bg:       #f4f4ff;
  --bg2:      #ebebff;
  --bg3:      #ffffff;
  --card:     #ffffff;
  --card2:    #f8f7ff;
  --card3:    #f0effe;
  --border:   rgba(99,102,241,0.12);
  --border2:  rgba(99,102,241,0.22);
  --text:     #0f0e2a;
  --text2:    #5c5880;
  --text3:    #9896c0;
  --accent:   #4f46e5;
  --accent2:  #6366f1;
  --accent3:  #818cf8;
  --green:    #059669;
  --red:      #dc2626;
  --gold:     #d97706;
  --blue:     #0284c7;
  --pink:     #db2777;
  --orange:   #ea580c;
  --sidebar:  #ffffff;
  --shadow:   0 4px 24px rgba(79,70,229,.08);
  --shadow2:  0 8px 40px rgba(79,70,229,.12);
}

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .25s, color .25s;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

/* ── FORM ELEMENTS ────────────────────────────────────────── */
.field {
  display: flex; align-items: center; gap: 10px;
  background: var(--card2); border: 1.5px solid var(--border);
  border-radius: 11px; padding: 11px 14px; transition: .2s;
}
.field:focus-within { border-color: var(--accent); background: var(--card); }
.field i { color: var(--text3); font-size: .95rem; flex-shrink: 0; }
.field input, .field select {
  background: none; border: none; outline: none;
  color: var(--text); font-size: .88rem; width: 100%;
}
.field input::placeholder { color: var(--text3); }
.field select { cursor: pointer; }

.label {
  display: block; font-size: .78rem; font-weight: 600;
  color: var(--text2); margin-bottom: 6px; letter-spacing: .02em;
  text-transform: uppercase;
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 11px 22px; border-radius: 11px;
  font-size: .88rem; font-weight: 700; cursor: pointer;
  border: none; transition: .2s; white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
}
.btn-primary:hover { opacity: .88; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(99,102,241,.35); }
.btn-primary:active { transform: none; }
.btn-ghost {
  background: var(--card2); border: 1.5px solid var(--border);
  color: var(--text2);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger {
  background: rgba(239,68,68,.1); border: 1.5px solid rgba(239,68,68,.2);
  color: var(--red);
}
.btn-danger:hover { background: rgba(239,68,68,.18); }
.btn-sm { padding: 7px 14px; font-size: .8rem; border-radius: 8px; }
.btn-full { width: 100%; }
.btn-icon {
  width: 36px; height: 36px; padding: 0; border-radius: 9px;
  background: var(--card2); border: 1.5px solid var(--border);
  color: var(--text2); display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; transition: .18s;
}
.btn-icon:hover { border-color: var(--accent); color: var(--accent); }

/* ── CARDS ────────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px;
}
.card-sm { border-radius: 12px; padding: 14px; }
.card-title {
  font-size: .92rem; font-weight: 700; color: var(--text);
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.card-title a { font-size: .78rem; color: var(--accent); font-weight: 600; }
.card-title a:hover { text-decoration: underline; }

/* ── BADGE ────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 20px;
  font-size: .72rem; font-weight: 700;
}

/* ── TABLE ────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  font-size: .72rem; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 16px; background: var(--bg2);
  border-bottom: 1px solid var(--border); text-align: left;
}
.tbl td {
  padding: 12px 16px; font-size: .84rem; color: var(--text2);
  border-bottom: 1px solid var(--border);
}
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: var(--card2); }
.tbl td.bold { font-weight: 700; color: var(--text); }

/* ── MODAL ────────────────────────────────────────────────── */
.overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6); z-index: 999;
  backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
.overlay.open { display: flex; }
.modal {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 20px; padding: 28px; width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
  animation: dropIn .22s ease;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
}
.modal-title { font-size: 1.05rem; font-weight: 800; color: var(--text); }

/* ── UTILS ────────────────────────────────────────────────── */
.text-accent { color: var(--accent); }
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-gold   { color: var(--gold); }
.text-muted  { color: var(--text2); }
.fw-bold     { font-weight: 700; }
.fw-black    { font-weight: 800; }
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.gap-8       { gap: 8px; }
.gap-12      { gap: 12px; }
.gap-16      { gap: 16px; }
.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-16{ margin-bottom: 16px; }
.mb-24{ margin-bottom: 24px; }

/* ── ALERT ────────────────────────────────────────────────── */
.alert {
  display: none; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px;
  font-size: .83rem; font-weight: 600; margin-bottom: 14px;
}
.alert.show { display: flex; }
.alert-error   { background: rgba(239,68,68,.1);  color: var(--red);   border: 1px solid rgba(239,68,68,.2);  }
.alert-success { background: rgba(16,185,129,.1); color: var(--green); border: 1px solid rgba(16,185,129,.2); }

/* ── ANIMATIONS ───────────────────────────────────────────── */
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes fadeUp  { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes dropIn  { from { opacity:0; transform:translateY(-8px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes shimmer { 0%,100% { opacity:.5; } 50% { opacity:1; } }

.fade-up { animation: fadeUp .4s ease both; }
.fade-up-2 { animation: fadeUp .4s .08s ease both; }
.fade-up-3 { animation: fadeUp .4s .16s ease both; }

/* ── SKELETON ─────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--card2) 25%, var(--card3) 50%, var(--card2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}