/* ============================================
   QUIZMASTER PRO — ADMIN CSS
   ============================================ */
:root{
  --bg:#0b0b18;--surface:#13132b;--surface2:#1a1a35;
  --border:rgba(99,102,241,.18);--border2:rgba(255,255,255,.06);
  --primary:#6366f1;--primary-d:#4f46e5;--primary-l:#818cf8;
  --purple:#8b5cf6;--green:#10b981;--red:#ef4444;--amber:#f59e0b;--cyan:#06b6d4;
  --text:#f1f5f9;--text2:#94a3b8;--text3:#64748b;
  --sidebar:260px;--topbar:60px;
  --radius:12px;--radius-lg:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(99,102,241,.4);border-radius:3px}

/* ══════════ LOGIN ══════════ */
.login-page{display:flex;align-items:stretch;min-height:100vh;overflow:hidden}
.login-bg{position:fixed;inset:0;pointer-events:none;z-index:0}
.login-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.12}
.b1{width:500px;height:500px;background:#6366f1;top:-150px;left:-150px;animation:blob 18s infinite alternate}
.b2{width:400px;height:400px;background:#8b5cf6;bottom:-100px;right:-100px;animation:blob 22s infinite alternate-reverse}
.b3{width:300px;height:300px;background:#06b6d4;top:50%;left:40%;animation:blob 15s infinite alternate}
@keyframes blob{0%{transform:translate(0,0) scale(1)}100%{transform:translate(40px,40px) scale(1.15)}}

.login-wrap{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:1000px;margin:auto;background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative;z-index:1}

.login-left{padding:3rem;display:flex;flex-direction:column;gap:1.5rem}
.login-brand{display:flex;align-items:center;gap:.75rem}
.brand-glyph{font-size:2rem}
.brand-name{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;font-weight:700}
.brand-sub{font-size:.8rem;color:var(--text2)}
.login-heading{font-family:'Space Grotesk',sans-serif;font-size:2.4rem;font-weight:700;line-height:1.15}
.login-desc{color:var(--text2);font-size:.95rem;line-height:1.6}

.login-form{display:flex;flex-direction:column;gap:1rem}
.field-wrap{display:flex;flex-direction:column;gap:.35rem}
.field-wrap label{font-size:.82rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.04em}
.field-inner{position:relative;display:flex;align-items:center}
.field-ic{position:absolute;left:.85rem;font-size:1rem;pointer-events:none}
.field-inner input{width:100%;padding:.75rem 1rem .75rem 2.6rem;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:inherit;font-size:.95rem;transition:all .25s}
.field-inner input:focus{outline:none;border-color:var(--primary);background:rgba(99,102,241,.06);box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.eye-btn{position:absolute;right:.75rem;background:none;border:none;cursor:pointer;font-size:1rem;color:var(--text2)}
.login-btn{padding:.85rem;background:linear-gradient(135deg,var(--primary),var(--purple));color:#fff;border:none;border-radius:var(--radius);font-size:1rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:.5rem}
.login-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(99,102,241,.35)}
.back-site{color:var(--primary-l);text-decoration:none;font-size:.85rem;align-self:flex-start}

.login-right{background:linear-gradient(135deg,#1e1b4b,#312e81);padding:3rem;display:flex;flex-direction:column;gap:1.5rem;justify-content:center}
.login-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.ls-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);padding:1.25rem;text-align:center;backdrop-filter:blur(10px)}
.ls-card.accent{background:rgba(99,102,241,.25);border-color:var(--primary)}
.ls-num{font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:700;color:#fff}
.ls-label{font-size:.75rem;color:rgba(255,255,255,.65);margin-top:.25rem}
.login-features{display:flex;flex-direction:column;gap:.5rem}
.lf-item{font-size:.875rem;color:rgba(255,255,255,.8)}

/* ══════════ LAYOUT ══════════ */
.sidebar{width:var(--sidebar);background:var(--surface);border-right:1px solid var(--border);position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:200;transition:transform .3s;display:flex;flex-direction:column}
.sidebar-logo{display:flex;align-items:center;gap:.6rem;padding:1.25rem;border-bottom:1px solid var(--border)}
.logo-icon{font-size:1.4rem}
.logo-text{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:700}
.logo-text span{color:var(--primary-l)}
.sidebar-profile{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border)}
.profile-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--purple));display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;flex-shrink:0}
.profile-name{font-size:.875rem;font-weight:600}
.profile-role{font-size:.72rem;color:var(--primary-l)}
.sidebar-nav{padding:.75rem 0;flex:1}
.nav-label{padding:.5rem 1.25rem;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3)}
.nav-item{display:flex;align-items:center;gap:.75rem;padding:.65rem 1.25rem;color:var(--text2);text-decoration:none;font-size:.875rem;font-weight:500;border-left:3px solid transparent;transition:all .2s}
.nav-item:hover{color:var(--text);background:rgba(99,102,241,.1);border-left-color:var(--primary)}
.nav-item.active{color:var(--primary-l);background:rgba(99,102,241,.14);border-left-color:var(--primary)}
.nav-item.danger:hover{color:var(--red);background:rgba(239,68,68,.08);border-left-color:var(--red)}
.nav-icon{font-size:1rem;width:20px;text-align:center}

.main-wrap{margin-left:var(--sidebar);display:flex;flex-direction:column;min-height:100vh}
.topbar{height:var(--topbar);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:1rem;padding:0 1.5rem;position:sticky;top:0;z-index:100}
.menu-btn{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:.25rem}
.menu-btn span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .3s}
.topbar-title{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;flex:1}
.topbar-right{display:flex;align-items:center;gap:1rem;margin-left:auto}
.topbar-date{font-size:.78rem;color:var(--text2)}
.topbar-logout{padding:.35rem .9rem;background:rgba(239,68,68,.12);color:var(--red);border:1px solid rgba(239,68,68,.25);border-radius:8px;text-decoration:none;font-size:.8rem;font-weight:600;transition:all .2s}
.topbar-logout:hover{background:var(--red);color:#fff}
.content{padding:1.5rem;flex:1}

/* ══════════ CARDS ══════════ */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:1.5rem}
.card-hd{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border)}
.card-hd h2{font-size:.95rem;font-weight:700}
.span2{grid-column:span 2}

/* ══════════ STATS ══════════ */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-bottom:1.5rem}
.stats-row.mini{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.stat-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;display:flex;align-items:center;gap:1rem;position:relative;overflow:hidden;transition:all .3s}
.stat-box::after{content:'';position:absolute;top:0;right:0;width:60px;height:60px;border-radius:50%;background:rgba(99,102,241,.06);transform:translate(15px,-15px)}
.stat-box:hover{transform:translateY(-2px);border-color:var(--primary)}
.stat-box.green{border-color:rgba(16,185,129,.25)}
.stat-box.green .stat-ico{background:rgba(16,185,129,.12)}
.stat-box.red{border-color:rgba(239,68,68,.25)}
.stat-box.red .stat-ico{background:rgba(239,68,68,.12)}
.stat-box.purple{border-color:rgba(139,92,246,.25)}
.stat-box.purple .stat-ico{background:rgba(139,92,246,.12)}
.stat-ico{width:44px;height:44px;border-radius:12px;background:rgba(99,102,241,.12);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.stat-val{font-family:'Space Grotesk',sans-serif;font-size:1.9rem;font-weight:700;line-height:1}
.stat-lbl{font-size:.75rem;color:var(--text2);margin-top:.2rem}
.stat-go{position:absolute;bottom:.75rem;right:1rem;color:var(--primary-l);font-size:.8rem;text-decoration:none}
.stat-extra{position:absolute;bottom:.75rem;right:.75rem;font-size:.7rem;color:var(--text3)}

/* ══════════ DASH GRID ══════════ */
.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem}

/* Leaderboard */
.leaderboard-list{padding:.75rem 1.25rem;display:flex;flex-direction:column;gap:.5rem}
.lb-row{display:flex;align-items:center;gap:.75rem;padding:.6rem;border-radius:10px;transition:background .2s}
.lb-row:hover{background:rgba(99,102,241,.06)}
.lb-rank{font-size:1.2rem;width:30px}
.lb-info{flex:1}
.lb-name{font-size:.875rem;font-weight:600}
.lb-meta{font-size:.72rem;color:var(--text2)}
.lb-score{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--primary-l)}
.lb-score span{font-size:.75rem;color:var(--text3)}

/* Course stats */
.course-stats-list{padding:.75rem 1.25rem;display:flex;flex-direction:column;gap:.75rem}
.cs-row{display:flex;align-items:center;gap:.75rem}
.cs-name{font-size:.82rem;font-weight:600;width:120px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-bar-wrap{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.cs-bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--purple));border-radius:3px;transition:width .8s}
.cs-num{font-size:.75rem;color:var(--text2);width:45px;text-align:right}

/* Quick actions */
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;padding:1.25rem}
.qa-btn{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1rem;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;text-decoration:none;color:var(--text);font-size:.82rem;font-weight:600;transition:all .25s;text-align:center}
.qa-btn:hover{background:rgba(99,102,241,.1);border-color:var(--primary);transform:translateY(-2px)}
.qa-btn span:first-child{font-size:1.4rem}

/* ══════════ TABLES ══════════ */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:.85rem;min-width:600px}
.tbl th{padding:.75rem 1rem;text-align:left;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);border-bottom:1px solid var(--border2)}
.tbl td{padding:.8rem 1rem;border-bottom:1px solid var(--border2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(99,102,241,.04)}
.empty-td{text-align:center;padding:2.5rem;color:var(--text2)}
.row-sub{font-size:.72rem;color:var(--text2);margin-top:.2rem}
.muted{color:var(--text2)}
.green-text{color:var(--green)}
.red-text{color:var(--red)}

/* ══════════ BADGES ══════════ */
.badge{display:inline-block;padding:.2rem .65rem;border-radius:50px;font-size:.72rem;font-weight:700;letter-spacing:.03em}
.badge.pass{background:rgba(16,185,129,.12);color:var(--green);border:1px solid rgba(16,185,129,.25)}
.badge.fail{background:rgba(239,68,68,.12);color:var(--red);border:1px solid rgba(239,68,68,.25)}
.qcount{font-size:.8rem;font-weight:700}
.qcount.good{color:var(--green)}
.qcount.ok{color:var(--amber)}
.qcount.low{color:var(--red)}
.qcount-badge{padding:.25rem .75rem;border-radius:50px;font-size:.78rem;font-weight:600}
.qcount-badge.good{background:rgba(16,185,129,.1);color:var(--green)}
.qcount-badge.ok{background:rgba(245,158,11,.1);color:var(--amber)}
.qcount-badge.low{background:rgba(239,68,68,.1);color:var(--red)}
.score-pill{font-weight:700;color:var(--primary-l)}
.ans-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:linear-gradient(135deg,var(--primary),var(--purple));color:#fff;border-radius:7px;font-size:.8rem;font-weight:700}
.course-tag{display:inline-block;padding:.15rem .55rem;background:rgba(6,182,212,.1);color:var(--cyan);border-radius:6px;font-size:.78rem}
.q-text{max-width:320px}
code{font-family:'Space Grotesk',monospace;font-size:.78rem;color:var(--primary-l);background:rgba(99,102,241,.1);padding:.1rem .4rem;border-radius:5px}

/* Score bar */
.score-bar-wrap{position:relative;background:rgba(255,255,255,.05);border-radius:50px;height:18px;min-width:100px;overflow:hidden}
.score-bar-fill{height:100%;border-radius:50px}
.score-bar-wrap span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}

/* ══════════ BUTTONS ══════════ */
.btn-primary{padding:.55rem 1.15rem;background:linear-gradient(135deg,var(--primary),var(--purple));color:#fff;border:none;border-radius:10px;font-size:.875rem;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;font-family:inherit;transition:all .25s;white-space:nowrap}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(99,102,241,.3)}
.btn-sm{padding:.3rem .8rem;background:rgba(99,102,241,.12);color:var(--primary-l);border:1px solid rgba(99,102,241,.25);border-radius:8px;font-size:.78rem;text-decoration:none;font-weight:600;transition:all .2s;white-space:nowrap}
.btn-sm:hover{background:var(--primary);color:#fff}
.btn-cancel{padding:.55rem 1.15rem;background:rgba(255,255,255,.05);color:var(--text2);border:1px solid var(--border);border-radius:10px;font-size:.875rem;cursor:pointer;text-decoration:none;font-family:inherit;transition:all .2s;white-space:nowrap}
.btn-cancel:hover{background:rgba(255,255,255,.08);color:var(--text)}
.btn-edit{padding:.28rem .65rem;background:rgba(245,158,11,.1);color:var(--amber);border:1px solid rgba(245,158,11,.25);border-radius:7px;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;white-space:nowrap}
.btn-edit:hover{background:var(--amber);color:#fff}
.btn-del{padding:.28rem .65rem;background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.25);border-radius:7px;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;white-space:nowrap}
.btn-del:hover{background:var(--red);color:#fff}
.btn-view{padding:.28rem .65rem;background:rgba(6,182,212,.1);color:var(--cyan);border:1px solid rgba(6,182,212,.25);border-radius:7px;font-size:.78rem;font-weight:600;text-decoration:none;transition:all .2s;white-space:nowrap;display:inline-block}
.btn-view:hover{background:var(--cyan);color:#fff}
.act-btns{display:flex;gap:.35rem;flex-wrap:wrap}

/* ══════════ PAGE BAR ══════════ */
.page-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;gap:1rem;flex-wrap:wrap}
.page-desc{font-size:.875rem;color:var(--text2);max-width:500px}
.filter-bar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.flt-sel{padding:.5rem .9rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:inherit;font-size:.875rem;cursor:pointer}
.flt-sel:focus{outline:none;border-color:var(--primary)}
.flt-inp{padding:.5rem .9rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:inherit;font-size:.875rem;width:200px}
.flt-inp:focus{outline:none;border-color:var(--primary)}
.info-bar{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:rgba(99,102,241,.05);border:1px solid rgba(99,102,241,.15);border-radius:10px;margin-bottom:1rem;font-size:.85rem}

/* ══════════ MODALS ══════════ */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(4px)}
.modal-box{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease}
.modal-lg{max-width:720px}
@keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.modal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.modal-hd h3{font-size:1rem;font-weight:700}
.modal-x{background:none;border:none;color:var(--text2);font-size:1.1rem;cursor:pointer;padding:.2rem .5rem;border-radius:6px;transition:all .2s}
.modal-x:hover{background:rgba(239,68,68,.1);color:var(--red)}
.modal-ft{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border)}

/* ══════════ FORMS ══════════ */
.fld{margin-bottom:1rem}
.fld label{display:block;font-size:.78rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.35rem}
.fld input,.fld select,.fld textarea{width:100%;padding:.65rem .9rem;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:inherit;font-size:.9rem;transition:all .25s;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--primary);background:rgba(99,102,241,.05);box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.opts-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.toggle-label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;cursor:pointer;color:var(--text)}
.hint{font-weight:400;font-style:italic;color:var(--text3);font-size:.7rem}

/* ══════════ LEADERBOARD STRIP ══════════ */
.lb-strip{display:flex;gap:.75rem;overflow-x:auto;padding:.75rem 1.25rem;padding-bottom:1rem}
.lb-card{min-width:160px;padding:1rem;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.02);text-align:center;transition:all .2s}
.lb-card.top{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.05)}
.lb-medal{font-size:1.5rem}
.lb-n{font-weight:700;font-size:.875rem;margin-top:.35rem}
.lb-c{font-size:.72rem;color:var(--text2)}
.lb-s{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:700;color:var(--primary-l);margin-top:.25rem}

/* ══════════ ADS ADMIN ══════════ */
.ad-positions-info{display:flex;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}
.pos-info-card{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;font-size:.82rem;color:var(--text2)}
.pos-badge{display:inline-block;padding:.18rem .6rem;border-radius:6px;font-size:.72rem;font-weight:700;text-transform:uppercase}
.pos-badge.header{background:rgba(99,102,241,.15);color:var(--primary-l)}
.pos-badge.sidebar{background:rgba(139,92,246,.15);color:#c4b5fd}
.pos-badge.footer{background:rgba(6,182,212,.15);color:var(--cyan)}
.pos-badge.popup{background:rgba(245,158,11,.15);color:var(--amber)}
.pos-badge.course{background:rgba(16,185,129,.12);color:var(--green)}
.pos-badge.resource{background:rgba(99,102,241,.12);color:var(--primary-l)}
.pos-badge.external{background:rgba(245,158,11,.12);color:var(--amber)}

.ads-grid-admin{padding:1.25rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.25rem}
.ad-admin-card{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all .3s}
.ad-admin-card.active{border-color:rgba(99,102,241,.3)}
.ad-admin-card.inactive{opacity:.55}
.ad-thumb{height:120px;overflow:hidden;background:rgba(255,255,255,.04)}
.ad-thumb img{width:100%;height:100%;object-fit:cover}
.ad-admin-info{padding:1rem}
.ad-admin-title{font-weight:700;font-size:.9rem;margin-bottom:.35rem}
.ad-admin-desc{font-size:.78rem;color:var(--text2);margin-bottom:.5rem}
.ad-admin-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem}
.ad-dates{font-size:.72rem}
.ad-link-preview{font-size:.72rem;color:var(--primary-l);text-decoration:none;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-admin-actions{display:flex;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--border)}
.empty-state-card{grid-column:1/-1;text-align:center;padding:3rem;border:2px dashed var(--border);border-radius:var(--radius-lg)}
.es-icon{font-size:3rem;margin-bottom:1rem}
.es-icon+h3{margin-bottom:.5rem}
.es-icon+h3+p{color:var(--text2);margin-bottom:1.5rem}
.link-url{color:var(--primary-l);text-decoration:none;font-size:.78rem}
.ad-dates{font-size:.72rem;color:var(--text3);margin-top:.25rem}
.empty-state-sm{text-align:center;padding:1.5rem;color:var(--text2);font-size:.875rem}

/* ══════════ SIDEBAR OVERLAY ══════════ */
/* pointer-events:none by default so it NEVER blocks desktop clicks */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:150;pointer-events:none}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:1024px){
  .dash-grid{grid-template-columns:1fr}
  .span2{grid-column:1}
}
@media(max-width:768px){
  :root{--sidebar:260px}
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  /* overlay only active on mobile */
  .sidebar-overlay.show{display:block;pointer-events:auto}
  .main-wrap{margin-left:0}
  .menu-btn{display:flex}
  .login-wrap{grid-template-columns:1fr}
  .login-right{display:none}
  .stats-row{grid-template-columns:1fr 1fr}
  .opts-grid,.fld-row{grid-template-columns:1fr}
  .filter-bar{flex-wrap:wrap}
  .flt-inp{width:100%}
  .topbar-date{display:none}
  .content{padding:1rem}
}
@media(max-width:480px){
  .stats-row{grid-template-columns:1fr}
  .login-left{padding:2rem 1.5rem}
  .modal-box{padding:1.25rem}
  .ads-grid-admin{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════
   EXTRA FIXES — v4 patch
   ══════════════════════════════════════════════════════════ */

/* ── All select/option backgrounds black ────────────────── */
select,
.fld select,
.flt-sel,
.filter-bar select {
  background-color: #0f0f1f !important;
  color: var(--text) !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  padding-right: 2.4rem !important;
}
select option { background: #0f0f1f !important; color: #f1f5f9 !important; }

/* ── Maintenance banner ──────────────────────────────────── */
.maint-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
  padding: .85rem 1.25rem;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.35);
  border-radius: 12px;
  color: #fcd34d;
  font-size: .875rem;
  margin-bottom: 1.25rem;
}
.btn-maint-off {
  padding: .35rem .9rem;
  background: rgba(16,185,129,.2);
  border: 1px solid rgba(16,185,129,.4);
  border-radius: 8px;
  color: #34d399;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.btn-maint-off:hover { background: #10b981; color: #fff; }

/* ── Maintenance toggle box in quick actions ─────────────── */
.maint-toggle-box {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  margin: 0 .75rem .75rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  gap: 1rem;
  flex-wrap: wrap;
}
.mtb-left { display: flex; align-items: center; gap: .75rem; }
.mtb-icon { font-size: 1.5rem; }
.mtb-title { font-size: .875rem; font-weight: 700; }
.mtb-sub { margin-top: .2rem; }
.status-pill {
  display: inline-block; padding: .18rem .7rem;
  border-radius: 50px; font-size: .72rem; font-weight: 700;
}
.status-pill.on  { background: rgba(16,185,129,.12); color: #34d399; border: 1px solid rgba(16,185,129,.25); }
.status-pill.off { background: rgba(245,158,11,.12); color: #fcd34d; border: 1px solid rgba(245,158,11,.25); }

.btn-maint {
  padding: .55rem 1.1rem; border: none; border-radius: 10px;
  font-size: .82rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .2s;
  white-space: nowrap;
}
.btn-maint-red   { background: rgba(239,68,68,.15);  color: #f87171; border: 1px solid rgba(239,68,68,.3);  }
.btn-maint-red:hover   { background: #ef4444; color: #fff; }
.btn-maint-green { background: rgba(16,185,129,.15); color: #34d399; border: 1px solid rgba(16,185,129,.3); }
.btn-maint-green:hover { background: #10b981; color: #fff; }

/* ── SweetAlert delete confirmation — dark styled ────────── */
.swal2-popup {
  background: #13132b !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(99,102,241,.25) !important;
  border-radius: 20px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.swal2-title    { color: #f1f5f9 !important; font-size: 1.25rem !important; }
.swal2-html-container { color: rgba(255,255,255,.65) !important; }
.swal2-confirm  { border-radius: 10px !important; font-weight: 700 !important; font-family: inherit !important; padding: .65rem 1.5rem !important; }
.swal2-cancel   { border-radius: 10px !important; font-weight: 600 !important; font-family: inherit !important; padding: .65rem 1.5rem !important; background: rgba(255,255,255,.07) !important; color: rgba(255,255,255,.6) !important; border: 1px solid rgba(255,255,255,.1) !important; }
.swal2-cancel:hover { background: rgba(255,255,255,.12) !important; color: #f1f5f9 !important; }
.swal2-icon.swal2-warning { border-color: #f59e0b !important; color: #f59e0b !important; }
.swal2-icon.swal2-error   { border-color: #ef4444 !important; color: #ef4444 !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(16,185,129,.3) !important; }
.swal2-icon.swal2-success [class^=swal2-success-line] { background-color: #10b981 !important; }

/* ── Ads admin — sidebar position shouldn't collapse ─────── */
.ads-grid-admin {
  padding: 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 1.25rem;
}
.ad-admin-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all .3s;
  background: var(--surface);
}
.ad-admin-card.active { border-color: rgba(99,102,241,.35); }
.ad-admin-card.inactive { opacity: .55; }
.ad-admin-info { padding: 1rem; flex: 1; }
.ad-admin-actions {
  display: flex; gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Leaderboard strip — responsive horizontal scroll ─────── */
.lb-strip {
  display: flex; gap: .75rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: .75rem 1.25rem 1.1rem;
  scrollbar-width: thin;
}
.lb-strip::-webkit-scrollbar { height: 4px; }
.lb-strip::-webkit-scrollbar-thumb { background: rgba(99,102,241,.35); border-radius: 2px; }
.lb-card { min-width: 140px; flex-shrink: 0; }

/* ── Modal fully responsive ──────────────────────────────── */
@media (max-width: 600px) {
  .modal-box, .modal-lg { padding: 1.25rem; max-height: 95vh; width: calc(100vw - 2rem) !important; max-width: calc(100vw - 2rem) !important; }
  .modal-ft { flex-direction: column; }
  .modal-ft .btn-primary, .modal-ft .btn-cancel { width: 100%; text-align: center; }
  .opts-grid { grid-template-columns: 1fr; }
  .fld-row   { grid-template-columns: 1fr; }
  .swal2-popup { width: calc(100vw - 2rem) !important; padding: 1.5rem !important; }
  .swal2-actions { flex-direction: column; gap: .5rem; width: 100%; }
  .swal2-confirm, .swal2-cancel { width: 100% !important; }
  .ads-grid-admin { grid-template-columns: 1fr; }
  .maint-toggle-box { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  .lb-strip  { padding: .5rem .75rem .75rem; }
}
@media (max-width: 400px) {
  .stats-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   CUSTOM DELETE CONFIRM MODAL
   ══════════════════════════════════════════════════════════ */
.del-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(6px);
}
.del-modal-overlay.open { display: flex; animation: delIn .2s ease; }
@keyframes delIn { from{opacity:0} to{opacity:1} }

.del-modal-box {
  background: #13132b;
  border: 1px solid rgba(239,68,68,.35);
  border-radius: 24px;
  padding: 2.25rem 2rem 1.75rem;
  width: 100%;
  max-width: 400px;
  text-align: center;
  animation: delBoxIn .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(239,68,68,.1);
}
@keyframes delBoxIn {
  from { opacity:0; transform:scale(.85) translateY(16px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

.del-modal-icon  { font-size:3rem; display:block; margin-bottom:.75rem; }
.del-modal-title { font-size:1.3rem; font-weight:800; color:#f1f5f9; margin-bottom:.4rem; }
.del-modal-text  { font-size:.875rem; color:rgba(255,255,255,.55); margin-bottom:1.5rem; line-height:1.5; }

.del-modal-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.del-btn-cancel {
  padding: .8rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: rgba(255,255,255,.6);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.del-btn-cancel:hover { background:rgba(255,255,255,.12); color:#f1f5f9; }
.del-btn-confirm {
  padding: .8rem;
  background: linear-gradient(135deg,#ef4444,#dc2626);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .25s;
  box-shadow: 0 4px 16px rgba(239,68,68,.35);
}
.del-btn-confirm:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(239,68,68,.45); }

@media (max-width:480px) {
  .del-modal-box  { padding:1.75rem 1.25rem 1.5rem; }
  .del-modal-btns { gap:.5rem; }
}

/* ══ SETTINGS PAGE ════════════════════════════════════════ */
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.settings-form-wrap { padding:1.5rem; }
.settings-desc { color:var(--text2); font-size:.875rem; margin-bottom:1.5rem; line-height:1.6; }
.settings-form-actions { margin-top:1.25rem; }
.disabled-input { opacity:.5; cursor:not-allowed; }
.pwd-input-wrap { position:relative; }
.pwd-input-wrap input { padding-right:2.8rem; }
.pwd-eye { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:1rem; color:var(--text2); }

/* Password strength */
.pwd-strength-wrap { margin:.6rem 0 .25rem; }
.pwd-strength-bar  { height:5px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; margin-bottom:.3rem; }
.pwd-strength-fill { height:100%; border-radius:3px; transition:all .4s; width:0; }
.pwd-strength-label { font-size:.75rem; font-weight:700; }

/* Account info */
.account-info-list { display:flex; flex-direction:column; gap:.65rem; }
.ai-row   { display:flex; align-items:center; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid var(--border2); }
.ai-row:last-child { border-bottom:none; }
.ai-label { font-size:.82rem; color:var(--text2); }
.ai-val   { font-size:.875rem; font-weight:600; }
.btn-danger-outline { display:inline-block; padding:.55rem 1.25rem; border:1px solid rgba(239,68,68,.4); color:var(--red); border-radius:10px; font-size:.875rem; font-weight:600; text-decoration:none; transition:all .2s; }
.btn-danger-outline:hover { background:var(--red); color:#fff; }

@media(max-width:768px){ .settings-grid { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════
   LOGIN PAGE — COMPLETE RESPONSIVE REWRITE v11
   ══════════════════════════════════════════════════════════ */

/* Override old login styles */
.login-page {
  background: var(--bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 1.5rem !important;
  overflow: auto !important;
}

.login-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  width: 100% !important;
  max-width: 960px !important;
  min-height: 560px !important;
  margin: auto !important;
  background: var(--surface) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.5) !important;
  position: relative !important;
  z-index: 1 !important;
}

.login-left {
  padding: 3rem 2.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  justify-content: center !important;
}

.login-brand { display:flex; align-items:center; gap:.75rem; }
.brand-glyph { font-size:2rem; }
.brand-name  { font-family:'Space Grotesk',sans-serif; font-size:1.2rem; font-weight:700; color:var(--text); }
.brand-sub   { font-size:.75rem; color:var(--text2); }

.login-heading {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(1.6rem, 3vw, 2rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--text) !important;
}

.login-desc { color:var(--text2); font-size:.9rem; line-height:1.6; }

/* Inline alert — replaces SweetAlert popup */
.login-alert {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem 1rem;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 10px;
  font-size: .85rem;
  color: #fca5a5;
  animation: alertIn .3s ease;
}
.login-alert.success {
  background: rgba(16,185,129,.1);
  border-color: rgba(16,185,129,.3);
  color: #6ee7b7;
}
.login-alert-icon { font-size:1rem; flex-shrink:0; }
@keyframes alertIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

.login-form { display:flex; flex-direction:column; gap:1rem; }
.field-wrap { display:flex; flex-direction:column; gap:.35rem; }
.field-wrap label { font-size:.78rem; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.04em; }
.field-inner { position:relative; display:flex; align-items:center; }
.field-ic    { position:absolute; left:.85rem; font-size:1rem; pointer-events:none; z-index:1; }
.field-inner input {
  width:100%; padding:.8rem 1rem .8rem 2.7rem;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--text); font-family:inherit; font-size:.95rem;
  transition:all .25s;
}
.field-inner input:focus {
  outline:none; border-color:var(--primary);
  background:rgba(99,102,241,.06);
  box-shadow:0 0 0 3px rgba(99,102,241,.12);
}
.eye-btn { position:absolute; right:.75rem; background:none; border:none; cursor:pointer; font-size:1rem; color:var(--text2); padding:.25rem; }

.login-btn {
  padding:.9rem; background:linear-gradient(135deg,var(--primary),var(--purple));
  color:#fff; border:none; border-radius:12px;
  font-size:1rem; font-weight:700; cursor:pointer;
  font-family:inherit; transition:all .3s; margin-top:.25rem;
}
.login-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(99,102,241,.4); }

.back-site { color:var(--primary-l); text-decoration:none; font-size:.85rem; align-self:flex-start; }
.back-site:hover { color:var(--text); }

/* Right panel */
.login-right {
  background: linear-gradient(135deg,#1e1b4b,#2d2566) !important;
  padding: 2.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  justify-content: center !important;
}
.login-right-inner { display:flex; flex-direction:column; gap:1.25rem; }
.login-right-title { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.4); }

.login-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
.ls-card {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:1rem; text-align:center;
}
.ls-card.accent { background:rgba(99,102,241,.2); border-color:rgba(99,102,241,.35); }
.ls-num   { font-family:'Space Grotesk',sans-serif; font-size:1.7rem; font-weight:700; color:#fff; }
.ls-label { font-size:.72rem; color:rgba(255,255,255,.55); margin-top:.2rem; }

.login-features { display:flex; flex-direction:column; gap:.4rem; }
.lf-item { font-size:.82rem; color:rgba(255,255,255,.75); }

/* Settings role notice */
.role-notice {
  display:flex; align-items:flex-start; gap:1rem;
  padding:1rem 1.25rem;
  background:rgba(99,102,241,.08);
  border:1px solid rgba(99,102,241,.2);
  border-radius:14px;
  margin-bottom:1.5rem;
  font-size:.875rem;
}
.role-notice span { font-size:1.5rem; flex-shrink:0; }
.role-notice strong { color:var(--primary-l); }
.role-notice p { color:var(--text2); margin-top:.2rem; font-size:.82rem; }

/* ── Login Responsive ───────────────────────────────────── */
@media (max-width:900px) {
  .login-wrap { grid-template-columns:1fr !important; max-width:480px !important; min-height:auto !important; }
  .login-right { display:none !important; }
  .login-left  { padding:2.5rem 2rem !important; }
}
@media (max-width:480px) {
  .login-page  { padding:1rem !important; align-items:flex-start !important; padding-top:2rem !important; }
  .login-wrap  { border-radius:20px !important; }
  .login-left  { padding:2rem 1.5rem !important; gap:1rem !important; }
  .login-heading { font-size:1.5rem !important; }
  .field-inner input { font-size:.9rem !important; }
}

/* ══ ADMIN MANAGEMENT STYLES ══════════════════════════════ */
.settings-full-width { grid-column: 1 / -1; }

.admin-avatar-sm {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg,var(--primary),var(--purple));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; color: #fff; flex-shrink: 0;
}

.you-badge {
  display: inline-block; padding: .1rem .5rem;
  background: rgba(6,182,212,.12); color: var(--cyan);
  border: 1px solid rgba(6,182,212,.25);
  border-radius: 50px; font-size: .68rem; font-weight: 700;
}

.role-badge {
  display: inline-block; padding: .22rem .7rem;
  border-radius: 50px; font-size: .75rem; font-weight: 700;
}
.admin-role { background: rgba(245,158,11,.12); color: var(--amber); border: 1px solid rgba(245,158,11,.25); }
.mod-role   { background: rgba(99,102,241,.12);  color: var(--primary-l); border: 1px solid rgba(99,102,241,.25); }

.info-box {
  background: rgba(99,102,241,.06);
  border: 1px solid rgba(99,102,241,.15);
  border-radius: 10px;
  padding: .85rem 1rem;
  font-size: .8rem;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: .5rem;
}
.info-box strong { color: var(--text); }

@media(max-width:768px) {
  .settings-full-width { grid-column: 1; }
}