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

:root {
  --primary: #7c3aed;
  --primary-light: #a855f7;
  --primary-dark: #5b21b6;
  --accent: #f59e0b;
  --green: #10b981;
  --red: #ef4444;
  --cyan: #06b6d4;
  --bg: #050410;
  --bg-card: #0d0b1f;
  --bg-card2: #120f28;
  --bg-input: #1a1535;
  --sidebar-w: 260px;
  --topbar-h: 64px;
  --border: rgba(255,255,255,0.07);
  --border-active: rgba(124,58,237,0.5);
  --text: #f1f5f9;
  --text-muted: rgba(241,245,249,0.55);
  --text-dim: rgba(241,245,249,0.3);
  --radius: 14px;
  --radius-sm: 8px;
  --transition: 0.25s cubic-bezier(0.4,0,0.2,1);
  --shadow: 0 8px 32px rgba(0,0,0,0.5);
  --glow: 0 0 30px rgba(124,58,237,0.3);
}

html { font-size: 15px; }
body { font-family: 'Rajdhani','Inter',sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
input, select, textarea, button { font-family: inherit; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

/* ===========================
   LOGIN
=========================== */
.login-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: opacity 0.5s ease;
}

.login-bg-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lb-orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.18; animation: orbFloat 20s ease-in-out infinite; }
.lb-orb-1 { width: 500px; height: 500px; background: radial-gradient(circle,#7c3aed,transparent); top: -100px; left: -100px; }
.lb-orb-2 { width: 400px; height: 400px; background: radial-gradient(circle,#06b6d4,transparent); bottom: -100px; right: -100px; animation-delay:-10s; }

@keyframes orbFloat {
  0%,100%{transform:translate(0,0)}33%{transform:translate(40px,-30px)}66%{transform:translate(-30px,40px)}
}

.login-card {
  position: relative; z-index: 1;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 24px; padding: 48px 40px;
  width: 420px; max-width: calc(100vw - 32px);
  box-shadow: var(--shadow), 0 0 60px rgba(124,58,237,0.15);
  animation: cardIn 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

@keyframes cardIn {
  from { opacity:0; transform: scale(0.85) translateY(30px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}

.login-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Orbitron',monospace; font-size: 22px; font-weight: 900;
  margin-bottom: 32px;
}
.login-logo span span { background: linear-gradient(135deg,#7c3aed,#06b6d4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.login-logo-icon { width:36px;height:36px;background:linear-gradient(135deg,#7c3aed,#a855f7); border-radius:10px; box-shadow:0 0 20px rgba(124,58,237,0.6); }

.login-card h2 { font-family:'Orbitron',monospace; font-size:22px; font-weight:700; margin-bottom:8px; }
.login-sub { font-size:13px; color:var(--text-muted); margin-bottom:32px; }

.login-form { display:flex; flex-direction:column; gap:16px; }

.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:12px; font-weight:600; color:var(--text-muted); letter-spacing:1px; text-transform:uppercase; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:12px 16px;
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text);
  font-size:14px; outline:none; transition:var(--transition);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color:var(--primary); background:rgba(124,58,237,0.1);
  box-shadow:0 0 0 3px rgba(124,58,237,0.15);
}
.form-group select option { background:#1a1535; }
.form-group textarea { resize:vertical; min-height:80px; }

.pw-wrap { position:relative; }
.pw-wrap input { padding-right:44px; }
.pw-toggle { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:16px; color:var(--text-muted); }

.login-error { color:#f87171; font-size:13px; min-height:18px; }

.login-btn {
  padding:14px; background:linear-gradient(135deg,#7c3aed,#a855f7);
  border:none; border-radius:var(--radius-sm); color:white;
  font-family:'Orbitron',monospace; font-size:14px; font-weight:700;
  letter-spacing:1px; cursor:pointer; transition:var(--transition);
  box-shadow:0 6px 20px rgba(124,58,237,0.5); margin-top:4px;
}
.login-btn:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(124,58,237,0.7); }
.login-hint { font-size:12px; color:var(--text-dim); text-align:center; margin-top:20px; }

/* ===========================
   LAYOUT
=========================== */
.admin-wrapper { display:flex; min-height:100vh; }

/* SIDEBAR */
.sidebar {
  width:var(--sidebar-w); min-height:100vh;
  background:var(--bg-card); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:fixed; left:0; top:0; z-index:100;
  transition:transform var(--transition);
}
.sidebar.collapsed { transform:translateX(-100%); }

.sidebar-logo {
  display:flex; align-items:center; gap:10px; padding:20px 20px 16px;
  border-bottom:1px solid var(--border);
  font-family:'Orbitron',monospace; font-size:18px; font-weight:900;
  flex-shrink:0;
}
.s-logo-icon { width:32px;height:32px;background:linear-gradient(135deg,#7c3aed,#a855f7);border-radius:9px;box-shadow:0 0 15px rgba(124,58,237,0.6);flex-shrink:0; }
.s-logo-text span { background:linear-gradient(135deg,#7c3aed,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }

.sidebar-nav { flex:1; overflow-y:auto; padding:16px 12px; display:flex; flex-direction:column; gap:3px; }
.nav-group-label { font-size:10px;font-weight:700;letter-spacing:2px;color:var(--text-dim);padding:12px 8px 4px;text-transform:uppercase; }

.s-nav-item {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:var(--radius-sm); color:var(--text-muted);
  font-size:14px; font-weight:600; cursor:pointer; transition:var(--transition);
  position:relative;
}
.s-nav-item:hover { background:rgba(124,58,237,0.12); color:var(--text); }
.s-nav-item.active { background:rgba(124,58,237,0.2); color:white; }
.s-nav-item.active::before { content:''; position:absolute; left:0;top:6px;bottom:6px; width:3px; background:var(--primary-light); border-radius:0 3px 3px 0; }
.s-nav-icon { font-size:16px; flex-shrink:0; width:20px; text-align:center; }
.s-nav-badge { margin-left:auto; background:var(--primary); border-radius:50px; padding:2px 7px; font-size:11px; font-weight:700; color:white; }

.sidebar-footer { padding:16px 12px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.view-site-btn, .logout-btn {
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-radius:var(--radius-sm);font-size:13px;font-weight:600;
  cursor:pointer;transition:var(--transition);width:100%;
}
.view-site-btn { background:rgba(6,182,212,0.12);border:1px solid rgba(6,182,212,0.25);color:var(--cyan); }
.view-site-btn:hover { background:rgba(6,182,212,0.2);border-color:var(--cyan); }
.logout-btn { background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2);color:#f87171; }
.logout-btn:hover { background:rgba(239,68,68,0.2);border-color:var(--red); }

/* MAIN */
.admin-main { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; transition:margin var(--transition); }
.admin-main.expanded { margin-left:0; }

/* TOPBAR */
.admin-topbar {
  height:var(--topbar-h); display:flex; align-items:center; gap:16px;
  padding:0 24px; background:var(--bg-card); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
}
.sidebar-toggle { background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;padding:4px;transition:var(--transition); }
.sidebar-toggle:hover { color:white; }
.topbar-title { font-family:'Orbitron',monospace; font-size:16px; font-weight:700; flex:1; letter-spacing:1px; }
.topbar-right { display:flex; align-items:center; gap:20px; }
.admin-time { font-family:'Orbitron',monospace; font-size:12px; color:var(--text-dim); }
.admin-user { display:flex; align-items:center; gap:8px; }
.admin-avatar { width:34px;height:34px;background:linear-gradient(135deg,#7c3aed,#a855f7);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700; }

/* PAGE CONTENT */
.page-content { padding:28px 24px; flex:1; }

/* ===========================
   SHARED COMPONENTS
=========================== */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:28px; gap:16px; flex-wrap:wrap; }
.page-header-left h1 { font-family:'Orbitron',monospace; font-size:22px; font-weight:700; letter-spacing:1px; }
.page-header-left p { font-size:13px; color:var(--text-muted); margin-top:4px; }

/* BUTTONS */
.btn { display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--radius-sm);font-family:'Rajdhani',sans-serif;font-size:14px;font-weight:700;letter-spacing:0.5px;cursor:pointer;transition:var(--transition);border:none; }
.btn-primary { background:linear-gradient(135deg,#7c3aed,#a855f7);color:white;box-shadow:0 4px 15px rgba(124,58,237,0.4); }
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 8px 25px rgba(124,58,237,0.6); }
.btn-success { background:linear-gradient(135deg,#059669,#10b981);color:white;box-shadow:0 4px 15px rgba(16,185,129,0.3); }
.btn-success:hover { transform:translateY(-2px);box-shadow:0 8px 25px rgba(16,185,129,0.5); }
.btn-danger { background:linear-gradient(135deg,#b91c1c,#ef4444);color:white;box-shadow:0 4px 15px rgba(239,68,68,0.3); }
.btn-danger:hover { transform:translateY(-2px);box-shadow:0 8px 25px rgba(239,68,68,0.5); }
.btn-outline { background:transparent;color:var(--text-muted);border:1px solid var(--border); }
.btn-outline:hover { background:var(--bg-card2);color:white;border-color:var(--primary); }
.btn-sm { padding:7px 14px;font-size:12px; }
.btn-icon { width:34px;height:34px;padding:0;justify-content:center;flex-shrink:0; }

/* CARDS */
.card { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px; }
.card-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border); }
.card-title { font-family:'Orbitron',monospace;font-size:14px;font-weight:700;letter-spacing:1px; }

/* STAT CARDS */
.stat-cards { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:28px; }
.stat-card { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;position:relative;overflow:hidden;transition:var(--transition); }
.stat-card:hover { border-color:var(--border-active);transform:translateY(-3px);box-shadow:var(--glow); }
.stat-card-glow { position:absolute;inset:0;opacity:0.08;transition:var(--transition); }
.stat-card:hover .stat-card-glow { opacity:0.15; }
.stat-card-icon { font-size:28px;margin-bottom:12px; }
.stat-card-val { font-family:'Orbitron',monospace;font-size:26px;font-weight:700;line-height:1; }
.stat-card-label { font-size:12px;color:var(--text-muted);margin-top:4px;letter-spacing:0.5px; }
.stat-card-trend { position:absolute;top:16px;right:16px;font-size:12px;font-weight:700;padding:3px 8px;border-radius:50px; }
.trend-up { background:rgba(16,185,129,0.15);color:#34d399; }
.trend-down { background:rgba(239,68,68,0.15);color:#f87171; }

/* TABLE */
.data-table { width:100%;border-collapse:collapse; }
.data-table th { font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--text-dim);text-transform:uppercase;padding:10px 14px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap; }
.data-table td { padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:14px;vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:rgba(255,255,255,0.025); }
.data-table .td-actions { display:flex;gap:6px;align-items:center; }

/* BADGE */
.badge { display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:50px;font-size:11px;font-weight:700;letter-spacing:0.5px; }
.badge-live { background:rgba(239,68,68,0.15);color:#f87171;border:1px solid rgba(239,68,68,0.3); }
.badge-upcoming { background:rgba(245,158,11,0.15);color:#fbbf24;border:1px solid rgba(245,158,11,0.3); }
.badge-active { background:rgba(16,185,129,0.15);color:#34d399;border:1px solid rgba(16,185,129,0.3); }
.badge-inactive { background:rgba(255,255,255,0.07);color:var(--text-muted);border:1px solid var(--border); }

/* TOGGLE SWITCH */
.toggle-wrap { display:flex;align-items:center;gap:10px; }
.toggle { position:relative;width:44px;height:24px;cursor:pointer; }
.toggle input { opacity:0;width:0;height:0; }
.toggle-slider { position:absolute;inset:0;background:rgba(255,255,255,0.12);border-radius:50px;transition:var(--transition); }
.toggle-slider::before { content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:white;border-radius:50%;transition:var(--transition); }
.toggle input:checked + .toggle-slider { background:var(--primary); }
.toggle input:checked + .toggle-slider::before { transform:translateX(20px); }

/* COLOR PICKER */
.color-row { display:flex;align-items:center;gap:10px; }
.color-input { width:44px;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);cursor:pointer;padding:2px; }

/* SEARCH BAR */
.search-bar { position:relative; }
.search-bar input { padding:10px 14px 10px 38px;background:var(--bg-card2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:13px;outline:none;transition:var(--transition);width:220px; }
.search-bar input:focus { border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,0.15); }
.search-bar::before { content:'🔍';position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;pointer-events:none; }

/* EMPTY STATE */
.empty-state { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:12px;color:var(--text-dim); }
.empty-state-icon { font-size:48px;opacity:0.4; }
.empty-state p { font-size:14px; }

/* TAG INPUT */
.tag-row { display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);min-height:44px; }
.tag { display:inline-flex;align-items:center;gap:5px;background:rgba(124,58,237,0.2);border:1px solid rgba(124,58,237,0.35);border-radius:50px;padding:3px 10px;font-size:12px;font-weight:600; }
.tag-remove { background:none;border:none;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0;opacity:0.7; }
.tag-remove:hover { opacity:1;color:#f87171; }

/* MODAL */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);z-index:500;display:none; }
.modal-overlay.open { display:block; }
.modal-container { position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.9);z-index:501;width:560px;max-width:calc(100vw - 32px);max-height:calc(100vh - 60px);overflow-y:auto;display:none;animation:modalIn 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.modal-container.open { display:block; }

@keyframes modalIn { from{transform:translate(-50%,-50%) scale(0.85);opacity:0} to{transform:translate(-50%,-50%) scale(1);opacity:1} }

.modal { background:var(--bg-card);border:1px solid var(--border);border-radius:20px;overflow:hidden; }
.modal-header { display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);background:rgba(124,58,237,0.08); }
.modal-header h3 { font-family:'Orbitron',monospace;font-size:15px;font-weight:700;letter-spacing:1px; }
.modal-close { background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:var(--transition); }
.modal-close:hover { background:rgba(239,68,68,0.2);color:#f87171; }
.modal-body { padding:24px; }
.modal-footer { padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px; }

/* FORM GRID */
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.form-grid.cols-1 { grid-template-columns:1fr; }
.form-span-2 { grid-column:span 2; }

/* SECTION DIVIDER */
.section-divider { border:none;border-top:1px solid var(--border);margin:24px 0; }

/* TOASTS */
.admin-toasts { position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none; }
.a-toast { display:flex;align-items:center;gap:10px;padding:12px 20px;background:var(--bg-card2);border:1px solid var(--border);border-radius:12px;font-size:13px;font-weight:600;box-shadow:var(--shadow);animation:toastSlide 0.35s ease forwards;white-space:nowrap;pointer-events:all; }
.a-toast.success { border-color:rgba(16,185,129,0.4); }
.a-toast.error   { border-color:rgba(239,68,68,0.4); }
.a-toast.info    { border-color:rgba(124,58,237,0.4); }
@keyframes toastSlide { from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)} }
@keyframes toastOut   { from{opacity:1}to{opacity:0;transform:translateX(20px)} }

/* ===========================
   DASHBOARD
=========================== */
.dashboard-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
.activity-list { display:flex;flex-direction:column;gap:8px; }
.activity-item { display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg-card2);border-radius:var(--radius-sm);border:1px solid var(--border); }
.activity-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.activity-dot.green { background:var(--green);box-shadow:0 0 8px rgba(16,185,129,0.8); }
.activity-dot.yellow { background:var(--accent);box-shadow:0 0 8px rgba(245,158,11,0.8); }
.activity-dot.blue { background:var(--cyan);box-shadow:0 0 8px rgba(6,182,212,0.8); }
.activity-dot.red { background:var(--red);box-shadow:0 0 8px rgba(239,68,68,0.8); }
.activity-text { flex:1;font-size:13px; }
.activity-time { font-size:11px;color:var(--text-dim); }

/* QUICK ACTIONS */
.quick-actions { display:grid;grid-template-columns:repeat(2,1fr);gap:12px; }
.qa-btn { display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 12px;background:var(--bg-card2);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:var(--transition);text-align:center; }
.qa-btn:hover { border-color:var(--primary);background:rgba(124,58,237,0.12);transform:translateY(-3px); }
.qa-icon { font-size:28px; }
.qa-label { font-size:12px;font-weight:700;color:var(--text-muted);letter-spacing:0.5px; }

/* ===========================
   SETTINGS SECTIONS
=========================== */
.settings-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px; }

/* REDIRECT LINK LIST */
.redirect-list { display:flex;flex-direction:column;gap:8px; }
.redirect-item { display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-card2);border:1px solid var(--border);border-radius:var(--radius-sm);transition:var(--transition); }
.redirect-item:hover { border-color:var(--border-active); }
.redirect-label { font-weight:700;font-size:14px;min-width:120px; }
.redirect-url { flex:1;font-size:12px;color:var(--text-muted);font-family:'Inter',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.redirect-actions { display:flex;gap:6px;flex-shrink:0; }

/* NAV LINK LIST */
.nav-links-list { display:flex;flex-direction:column;gap:8px; }
.nl-item { display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-card2);border:1px solid var(--border);border-radius:var(--radius-sm);transition:var(--transition); }
.nl-item:hover { border-color:var(--border-active); }
.nl-drag { color:var(--text-dim);cursor:grab;font-size:16px; }
.nl-label { font-weight:700;font-size:14px;min-width:100px; }
.nl-href { flex:1;font-size:12px;color:var(--text-muted);font-family:'Inter',monospace; }

/* TICKER LIST */
.ticker-items-list { display:flex;flex-direction:column;gap:8px; }
.ticker-row { display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-card2);border:1px solid var(--border);border-radius:var(--radius-sm); }
.ticker-row-text { flex:1;font-size:13px; }
.ticker-live-badge { background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.3);border-radius:4px;padding:2px 7px;font-size:10px;font-weight:700;color:#f87171;white-space:nowrap; }

/* ODDS ROW IN FORM */
.odds-form-row { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.odds-form-row .form-group label { font-size:11px; }

/* THEME COLORS */
.color-presets { display:flex;flex-wrap:wrap;gap:10px;margin-top:8px; }
.color-preset { width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:var(--transition); }
.color-preset:hover,.color-preset.selected { border-color:white;transform:scale(1.15); }

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width:900px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.mobile-open { transform:translateX(0); }
  .admin-main { margin-left:0; }
  .dashboard-grid,.settings-grid,.form-grid { grid-template-columns:1fr; }
  .form-span-2 { grid-column:span 1; }
}