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

:root {
  --primary:#4F46E5; --primary-dark:#4338CA; --primary-light:#EEF2FF;
  --success:#10B981; --warning:#F59E0B; --danger:#EF4444; --purple:#8B5CF6;
  --blue:#3B82F6; --orange:#F97316;
  --gray-50:#F9FAFB; --gray-100:#F3F4F6; --gray-200:#E5E7EB;
  --gray-300:#D1D5DB; --gray-400:#9CA3AF; --gray-500:#6B7280;
  --gray-600:#4B5563; --gray-700:#374151; --gray-800:#1F2937; --gray-900:#111827;
  --sidebar-w:240px; --topbar-h:60px;
  --radius:12px; --radius-sm:8px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.07);
  --shadow:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 12px 40px rgba(0,0,0,.14);
  --font:'Inter','Hind Siliguri',sans-serif;
  --transition:.18s ease;
}

body{font-family:var(--font);background:var(--gray-50);color:var(--gray-800);min-height:100vh;display:flex}

/* ── Sidebar ───────────────────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);background:#0F172A;color:#CBD5E1;
  display:flex;flex-direction:column;position:fixed;
  top:0;left:0;bottom:0;z-index:200;
  transition:transform var(--transition);
}
.sidebar__top{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.07);
}
.sidebar__logo{
  display:flex;align-items:center;gap:8px;text-decoration:none;
  font-weight:800;font-size:1.1rem;color:#fff;
}
.sidebar__logo span:first-child{font-size:1.4rem}
.admin-badge{
  background:var(--primary);color:#fff;font-size:.6rem;
  font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.05em;
}
.sidebar__close{display:none;background:none;border:none;cursor:pointer;color:#94A3B8;padding:4px;border-radius:6px}
.sidebar__close:hover{background:rgba(255,255,255,.08)}

.sidebar__nav{flex:1;padding:12px 8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.nav-section-label{
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#475569;padding:10px 8px 4px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:var(--radius-sm);text-decoration:none;color:#94A3B8;
  font-size:.88rem;font-weight:500;transition:all var(--transition);
  border:none;background:none;width:100%;cursor:pointer;text-align:left;
}
.nav-item:hover{background:rgba(255,255,255,.06);color:#E2E8F0}
.nav-item--active{background:var(--primary);color:#fff}
.nav-item--active svg{stroke:#fff}

.nav-count{
  margin-left:auto;background:rgba(255,255,255,.1);color:#94A3B8;
  font-size:.7rem;font-weight:700;padding:2px 7px;border-radius:20px;
}

.sidebar__bottom{
  border-top:1px solid rgba(255,255,255,.07);padding:12px;
  display:flex;flex-direction:column;gap:8px;
}
.admin-info{display:flex;align-items:center;gap:10px;padding:8px 4px}
.admin-avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:700;color:#fff;flex-shrink:0;
}
.admin-info strong{display:block;font-size:.85rem;color:#E2E8F0}
.admin-info span{font-size:.72rem;color:#64748B}
.btn-logout{
  display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;
  background:none;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-sm);
  color:#F87171;font-size:.82rem;font-weight:500;cursor:pointer;
  transition:all var(--transition);
}
.btn-logout:hover{background:rgba(239,68,68,.1);border-color:#EF4444}

/* ── Overlay ───────────────────────────────────────────────────── */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199}

/* ── Main ──────────────────────────────────────────────────────── */
.main-wrap{margin-left:var(--sidebar-w);flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}

/* ── Topbar ────────────────────────────────────────────────────── */
.topbar{
  height:var(--topbar-h);background:#fff;border-bottom:1px solid var(--gray-200);
  display:flex;align-items:center;gap:14px;padding:0 24px;
  position:sticky;top:0;z-index:100;
}
.topbar__hamburger{display:none;background:none;border:none;cursor:pointer;color:var(--gray-600);padding:4px;border-radius:6px}
.topbar__hamburger:hover{background:var(--gray-100)}
.topbar__title{font-size:1rem;font-weight:700;color:var(--gray-800);flex:1}
.topbar__tag{
  background:rgba(79,70,229,.1);color:var(--primary);
  font-size:.75rem;font-weight:700;padding:4px 12px;border-radius:20px;
}

/* ── Breadcrumb ────────────────────────────────────────────────── */
.breadcrumb{
  display:flex;align-items:center;gap:6px;
  padding:8px 24px;
  background:#f8f9fb;border-bottom:1px solid var(--gray-200);
  font-size:.8rem;color:var(--gray-500);
}
.breadcrumb__item{display:flex;align-items:center;gap:4px;color:var(--gray-500)}
.breadcrumb__item--active{color:var(--primary);font-weight:600}
.breadcrumb__sep{color:var(--gray-300);flex-shrink:0}
.breadcrumb__link{
  display:inline-flex;align-items:center;gap:4px;
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--gray-500);font-size:.8rem;font-weight:500;
  transition:color 150ms;
}
.breadcrumb__link:hover{color:var(--primary);text-decoration:underline}
/* make breadcrumb-current flex so injected segments line up */
#breadcrumb-current{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ── Main Content ──────────────────────────────────────────────── */
.main-content{padding:24px;display:flex;flex-direction:column;gap:20px}

/* ── Stats Grid ────────────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.stat-card{
  background:#fff;border-radius:var(--radius);border:1px solid var(--gray-100);
  box-shadow:var(--shadow-sm);padding:20px;
  display:flex;align-items:center;gap:16px;
  transition:box-shadow var(--transition);
}
.stat-card:hover{box-shadow:var(--shadow)}
.stat-card__icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.stat-card--blue   .stat-card__icon{background:#DBEAFE;color:#2563EB}
.stat-card--green  .stat-card__icon{background:#D1FAE5;color:#059669}
.stat-card--purple .stat-card__icon{background:#EDE9FE;color:#7C3AED}
.stat-card--orange .stat-card__icon{background:#FEF3C7;color:#D97706}

.stat-card__value{font-size:1.7rem;font-weight:800;color:var(--gray-900);line-height:1}
.stat-card__label{font-size:.8rem;color:var(--gray-500);margin-top:4px}
.stat-card__sub{font-size:.75rem;color:var(--success);margin-top:3px;font-weight:500}

/* ── Two Column ────────────────────────────────────────────────── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* ── Card ──────────────────────────────────────────────────────── */
.card{
  background:#fff;border-radius:var(--radius);
  border:1px solid var(--gray-100);box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.card__header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--gray-100);
}
.card__header h3{font-size:.95rem;font-weight:700;color:var(--gray-800)}
.link-btn{
  background:none;border:none;color:var(--primary);font-size:.82rem;
  font-weight:600;cursor:pointer;text-decoration:none;
}
.link-btn:hover{text-decoration:underline}

/* ── Filters ───────────────────────────────────────────────────── */
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filter-input,.filter-select{
  padding:7px 12px;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);
  font-size:.82rem;font-family:var(--font);color:var(--gray-700);
  outline:none;transition:border-color var(--transition);background:#fff;
}
.filter-input:focus,.filter-select:focus{border-color:var(--primary)}
.filter-input{width:220px}

/* ── Table ─────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:.84rem}
.data-table th{
  text-align:left;padding:10px 20px;
  background:var(--gray-50);color:var(--gray-500);
  font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  border-bottom:1px solid var(--gray-200);white-space:nowrap;
}
.data-table td{
  padding:12px 20px;border-bottom:1px solid var(--gray-100);
  color:var(--gray-700);vertical-align:middle;
}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:var(--gray-50)}

/* User cell */
.user-cell{display:flex;align-items:center;gap:10px}
.user-cell__avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:700;color:#fff;flex-shrink:0;
  overflow:hidden;
}
.user-cell__avatar img{width:100%;height:100%;object-fit:cover}
.user-cell__name{font-weight:600;color:var(--gray-800);font-size:.85rem}
.user-cell__id{font-size:.7rem;color:var(--gray-400);font-family:monospace}

/* Badges / pills */
.role-pill,.plan-pill,.status-pill{
  display:inline-flex;align-items:center;padding:3px 10px;
  border-radius:20px;font-size:.72rem;font-weight:700;white-space:nowrap;
}
.role-pill--admin   {background:#FEE2E2;color:#991B1B}
.role-pill--user    {background:#DBEAFE;color:#1E40AF}
.plan-pill--free    {background:var(--gray-100);color:var(--gray-600)}
.plan-pill--basic   {background:#DBEAFE;color:#1E40AF}
.plan-pill--premium {background:#EDE9FE;color:#5B21B6}
.plan-pill--pro     {background:#D1FAE5;color:#065F46}
.status-pill--live  {background:#D1FAE5;color:#065F46}
.status-pill--draft {background:var(--gray-100);color:var(--gray-500)}
.status-pill--upcoming{background:#FEF3C7;color:#92400E}
.status-pill--ended {background:#FEE2E2;color:#991B1B}

/* Action buttons */
.action-btns{display:flex;gap:6px}
.action-btn{
  padding:4px 10px;border-radius:6px;font-size:.75rem;font-weight:600;
  cursor:pointer;border:none;transition:all var(--transition);
}
.action-btn--edit  {background:var(--primary-light);color:var(--primary)}
.action-btn--edit:hover{background:var(--primary);color:#fff}
.action-btn--delete{background:#FEE2E2;color:#DC2626}
.action-btn--delete:hover{background:#DC2626;color:#fff}
.action-btn--status{background:#FEF3C7;color:#92400E}
.action-btn--status:hover{background:var(--warning);color:#fff}
.action-btn--export-s{
  display:inline-flex;align-items:center;gap:4px;
  background:#e8f5ee;color:#166534;
}
.action-btn--export-s:hover{background:#16a34a;color:#fff}
.action-btn--import-s{
  display:inline-flex;align-items:center;gap:4px;
  background:#eef2ff;color:#3730a3;cursor:pointer;
}
.action-btn--import-s:hover{background:#4f46e5;color:#fff}

/* Question text truncate */
.q-text{
  max-width:340px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-size:.83rem;
}
.diff-pill{
  display:inline-flex;padding:3px 9px;border-radius:20px;
  font-size:.72rem;font-weight:600;
}
.diff-pill--easy  {background:#D1FAE5;color:#065F46}
.diff-pill--medium{background:#FEF3C7;color:#92400E}
.diff-pill--hard  {background:#FEE2E2;color:#991B1B}

/* Create user button */
.btn-create{
  background:var(--primary);color:#fff;border:none;
  padding:7px 14px;border-radius:var(--radius-sm);
  font-size:.82rem;font-weight:600;cursor:pointer;
  transition:background var(--transition);white-space:nowrap;
}
.btn-create:hover{background:var(--primary-dark)}
.btn-delete-all{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;color:#dc2626;border:1.5px solid #fca5a5;
  padding:7px 13px;border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;cursor:pointer;
  transition:background 150ms,border-color 150ms,color 150ms;
}
.btn-delete-all:hover{background:#fef2f2;border-color:#dc2626}

.card__header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ── Excel Import / Export buttons ── */
.excel-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:0 14px;height:34px;border-radius:8px;
  font-size:.8rem;font-weight:600;cursor:pointer;
  border:none;text-decoration:none;white-space:nowrap;
  transition:transform 80ms,box-shadow 150ms,background 150ms,color 150ms;
  user-select:none;
}
.excel-btn:active{transform:scale(.96)}
.excel-btn__icon{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:5px;flex-shrink:0;
  transition:background 150ms;
}
/* Export — green */
.excel-btn--export{
  background:#e8f5ee;color:#166534;
  box-shadow:0 0 0 1.5px #16a34a44;
}
.excel-btn--export .excel-btn__icon{background:#16a34a22}
.excel-btn--export:hover{background:#16a34a;color:#fff;box-shadow:0 2px 8px #16a34a44}
.excel-btn--export:hover .excel-btn__icon{background:#ffffff22}
/* Import — indigo */
.excel-btn--import{
  background:#eef2ff;color:#3730a3;
  box-shadow:0 0 0 1.5px #6366f144;
}
.excel-btn--import .excel-btn__icon{background:#6366f122}
.excel-btn--import:hover{background:#4f46e5;color:#fff;box-shadow:0 2px 8px #4f46e544}
.excel-btn--import:hover .excel-btn__icon{background:#ffffff22}
/* Loading */
.excel-btn--loading{pointer-events:none;opacity:.65}

/* Action tag for logs */
.action-tag{
  display:inline-flex;padding:3px 9px;border-radius:20px;
  font-size:.72rem;font-weight:700;letter-spacing:.03em;
  background:var(--primary-light);color:var(--primary);
}

/* Spinner inside button */
.btn-spin{display:inline-block;animation:spin .7s linear infinite}
.btn-save:disabled{opacity:.6;pointer-events:none}

/* ── Pagination ────────────────────────────────────────────────── */
.pagination{
  display:flex;align-items:center;gap:6px;justify-content:center;
  padding:16px;border-top:1px solid var(--gray-100);
}
.page-btn{
  width:34px;height:34px;border:1.5px solid var(--gray-200);background:#fff;
  border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:600;cursor:pointer;color:var(--gray-600);
  transition:all var(--transition);
}
.page-btn:hover{border-color:var(--primary);color:var(--primary)}
.page-btn--active{background:var(--primary);border-color:var(--primary);color:#fff}
.page-btn:disabled{opacity:.4;pointer-events:none}

/* ── Loading / Empty ───────────────────────────────────────────── */
.loading-state{display:flex;align-items:center;justify-content:center;padding:40px;gap:12px;color:var(--gray-400)}
.spinner{width:28px;height:28px;border:3px solid var(--gray-200);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ── Tab panels ────────────────────────────────────────────────── */
.tab-panel{display:none;flex-direction:column;gap:20px}
.tab-panel.active{display:flex}

/* ── Modal ─────────────────────────────────────────────────────── */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-backdrop[hidden]{display:none !important}
.modal{background:#fff;border-radius:var(--radius);width:100%;max-width:540px;box-shadow:var(--shadow-lg);overflow:hidden}
.modal__header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--gray-100)}
.modal__header h3{font-size:.95rem;font-weight:700}
.modal__close{background:none;border:none;cursor:pointer;color:var(--gray-400);padding:4px;border-radius:6px;display:flex}
.modal__close:hover{background:var(--gray-100);color:var(--gray-700)}
.modal form{padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-label{font-size:.82rem;font-weight:600;color:var(--gray-700)}
.form-input{
  padding:9px 12px;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);
  font-size:.88rem;font-family:var(--font);color:var(--gray-800);outline:none;
  transition:border-color var(--transition);
}
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.1)}
.form-error-msg{background:#FEE2E2;color:#991B1B;padding:8px 12px;border-radius:6px;font-size:.82rem}
.modal__footer{display:flex;gap:10px;justify-content:flex-end;padding-top:4px}

/* ── Generate Questions Section ── */
.gen-section{border:1.5px solid var(--gray-200);border-radius:10px;margin-bottom:14px;overflow:hidden}
.gen-section__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:var(--gray-50);cursor:pointer;
  font-size:.82rem;font-weight:600;color:var(--gray-700);
  user-select:none;transition:background 150ms;
}
.gen-section__head:hover{background:var(--gray-100)}
.gen-section__head span{display:flex;align-items:center;gap:6px}
.gen-section__chevron{transition:transform 200ms;color:var(--gray-400);flex-shrink:0}
.gen-section__chevron.open{transform:rotate(180deg)}
.gen-section__body{padding:14px;background:#fff}
.gen-hint{font-size:.77rem;color:var(--gray-400);margin:0 0 12px}
.gen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px;margin-bottom:14px}
.gen-item{display:flex;flex-direction:column;gap:4px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:8px;padding:8px 10px}
.gen-item__label{font-size:.75rem;font-weight:700;color:var(--gray-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gen-item__avail{font-size:.71rem;color:var(--gray-400)}
.gen-item__input{border:1.5px solid var(--gray-200);border-radius:6px;padding:5px 8px;font-size:.85rem;width:100%;text-align:center;outline:none;transition:border-color 150ms;background:#fff}
.gen-item__input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(79,70,229,.1)}
.btn-generate{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;
  border:none;padding:8px 20px;border-radius:8px;
  font-size:.82rem;font-weight:600;cursor:pointer;
  box-shadow:0 2px 8px #4f46e544;
  transition:opacity 150ms,transform 80ms;
}
.btn-generate:hover{opacity:.9}
.btn-generate:active{transform:scale(.97)}
.btn-generate:disabled{opacity:.55;pointer-events:none}
.gen-result{margin-top:10px;padding:8px 12px;border-radius:7px;font-size:.8rem;font-weight:600;background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.gen-result--warn{background:#fffbeb;color:#92400e;border-color:#fde68a}

/* ── Premium Toggle Card ─────────────────────────────────────────── */
.premium-toggle-card{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,#faf5ff,#f5f3ff);
  border:1.5px solid #c4b5fd;border-radius:10px;
  padding:12px 16px;margin-bottom:14px;gap:12px;
}
.premium-toggle-card__info{display:flex;align-items:center;gap:12px}
.premium-toggle-card__icon{
  width:34px;height:34px;flex-shrink:0;
  background:linear-gradient(135deg,#7c3aed,#6d28d9);
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 2px 8px #7c3aed44;
}
.premium-toggle-card__title{font-size:.85rem;font-weight:700;color:#5b21b6;line-height:1.3}
.premium-toggle-card__desc{font-size:.72rem;color:#7c3aed;opacity:.75;margin-top:2px}
/* Toggle switch */
.toggle-switch{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute}
.toggle-switch__track{
  position:absolute;inset:0;background:#d1d5db;border-radius:26px;cursor:pointer;
  transition:background 200ms;
}
.toggle-switch__track::after{
  content:'';position:absolute;width:20px;height:20px;left:3px;top:3px;
  background:#fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.2);
  transition:transform 220ms cubic-bezier(.4,0,.2,1);
}
.toggle-switch input:checked+.toggle-switch__track{background:linear-gradient(135deg,#7c3aed,#6d28d9)}
.toggle-switch input:checked+.toggle-switch__track::after{transform:translateX(20px)}

/* ── Preview button ──────────────────────────────────────────────── */
.btn-preview{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;color:#4f46e5;
  border:1.5px solid #c7d2fe;padding:8px 16px;border-radius:8px;
  font-size:.82rem;font-weight:600;cursor:pointer;
  transition:background 150ms,border-color 150ms,box-shadow 150ms;
  box-shadow:0 1px 4px #4f46e515;
}
.btn-preview:hover{background:#eef2ff;border-color:#a5b4fc;box-shadow:0 2px 8px #4f46e525}
.btn-preview:active{transform:scale(.97)}

/* ── Question Preview Modal ──────────────────────────────────────── */
.qpreview-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.48);backdrop-filter:blur(3px);
  z-index:1100;display:flex;align-items:center;justify-content:center;padding:16px;
}
.qpreview-overlay[hidden]{display:none}
.qpreview-modal{
  background:#fff;border-radius:14px;
  width:min(740px,100%);max-height:88vh;
  display:flex;flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,.22);overflow:hidden;
  animation:qpreviewIn .2s ease;
}
@keyframes qpreviewIn{from{transform:scale(.95) translateY(12px);opacity:0}to{transform:none;opacity:1}}
.qpreview-header{
  display:flex;align-items:center;gap:10px;
  padding:15px 20px;border-bottom:1px solid #f0f0f0;background:#fafafa;flex-shrink:0;
}
.qpreview-title{
  display:flex;align-items:center;gap:8px;
  font-size:.93rem;font-weight:700;color:#1f2937;flex:1;margin:0;
}
.qpreview-badge{
  background:#ede9fe;color:#5b21b6;
  font-size:.71rem;font-weight:700;padding:3px 11px;border-radius:20px;flex-shrink:0;
}
.qpreview-close{
  background:none;border:none;cursor:pointer;
  width:30px;height:30px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#9ca3af;transition:background 140ms,color 140ms;
}
.qpreview-close:hover{background:#fee2e2;color:#ef4444}
.qpreview-body{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.qpreview-footer{
  padding:13px 20px;border-top:1px solid #f0f0f0;background:#fafafa;
  display:flex;justify-content:flex-end;gap:10px;flex-shrink:0;
}
.qpreview-footer .btn-save{display:inline-flex;align-items:center;gap:6px}
.qpreview-item{border:1px solid #e5e7eb;border-radius:10px;padding:12px 14px;transition:border-color 150ms}
.qpreview-item:hover{border-color:#c7d2fe}
.qpreview-item__meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.qpreview-item__num{font-size:.7rem;font-weight:700;color:#9ca3af}
.qpreview-subject-badge{font-size:.68rem;background:#ede9fe;color:#5b21b6;padding:2px 9px;border-radius:20px;font-weight:600}
.qpreview-item__q{font-size:.85rem;font-weight:600;color:#1f2937;margin-bottom:9px;line-height:1.5}
.qpreview-item__opts{display:grid;grid-template-columns:1fr 1fr;gap:5px 14px}
.qpreview-item__opt{
  font-size:.78rem;color:#4b5563;padding:3px 0;
  display:flex;align-items:center;gap:7px;
}
.qpreview-item__opt--correct{color:#059669;font-weight:600}
.qpreview-item__opt-badge{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:700;
  background:#f3f4f6;color:#6b7280;
}
.qpreview-item__opt--correct .qpreview-item__opt-badge{background:#d1fae5;color:#059669}
.qpreview-empty{text-align:center;color:var(--gray-400);padding:40px 16px;font-size:.85rem}

/* ── View Subject Modal stats ──────────────────────────────────── */
.vsm-stat{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:8px;padding:10px 16px;text-align:center;min-width:72px}
.vsm-stat__val{font-size:1.15rem;font-weight:800;color:var(--gray-800)}
.vsm-stat__lbl{font-size:.72rem;color:var(--gray-400);margin-top:2px;white-space:nowrap}

/* ── Inner Tabs ────────────────────────────────────────────────── */
.inner-tabs{display:flex;gap:0;border-bottom:2px solid var(--gray-200);margin-bottom:16px}
.inner-tab{background:none;border:none;padding:8px 20px;font-size:.85rem;font-weight:600;cursor:pointer;color:var(--gray-500);border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s}
.inner-tab:hover{color:var(--primary)}
.inner-tab--active{color:var(--primary);border-bottom-color:var(--primary)}

.btn-cancel{background:none;border:1px solid var(--gray-200);padding:8px 16px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;cursor:pointer;color:var(--gray-600)}
.btn-cancel:hover{background:var(--gray-50)}
.btn-save{background:var(--primary);color:#fff;border:none;padding:8px 18px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;cursor:pointer;transition:background var(--transition)}
.btn-save:hover{background:var(--primary-dark)}

/* ── Action buttons (approve / reject / revoke) ────────────────── */
.btn-action{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:20px;border:none;
  font-size:.78rem;font-weight:600;cursor:pointer;
  transition:opacity 150ms,transform 80ms,box-shadow 150ms;
  white-space:nowrap;
}
.btn-action:hover{opacity:.88;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.btn-action:active{transform:scale(.96)}
.btn-action svg{flex-shrink:0}

.btn-action--approve{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
  box-shadow:0 1px 4px #22c55e44;
}
.btn-action--reject{
  background:linear-gradient(135deg,#f87171,#dc2626);
  color:#fff;
  box-shadow:0 1px 4px #dc262644;
}
.btn-action--revoke{
  background:linear-gradient(135deg,#fb923c,#ea580c);
  color:#fff;
  box-shadow:0 1px 4px #ea580c44;
}

/* ── Toast ─────────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:20px;right:20px;background:var(--gray-900);color:#fff;
  padding:12px 18px;border-radius:10px;display:flex;align-items:center;gap:10px;
  font-size:.88rem;font-weight:500;z-index:1000;box-shadow:var(--shadow-lg);
  animation:toastIn .25s ease;max-width:340px;
}
.toast[hidden]{display:none}
@keyframes toastIn{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

/* ── Responsive ────────────────────────────────────────────────── */
@media(max-width:1200px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px) {.two-col{grid-template-columns:1fr}}
@media(max-width:768px) {
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:none}
  .sidebar-overlay.open{display:block}
  .sidebar__close{display:flex}
  .main-wrap{margin-left:0}
  .topbar__hamburger{display:flex}
  .main-content{padding:16px}
  .filters{gap:8px}
  .filter-input{width:100%}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
}

/* ── Subject Checkbox Cards (Target Exam Detail) ───────────────── */
.subject-check-card {
  border: 2px solid var(--gray-200); border-radius: 10px;
  padding: 12px 14px; display: flex; align-items: center; gap: 10px;
  cursor: pointer; transition: border-color .15s, background .15s;
  user-select: none;
}
.subject-check-card:hover { border-color: var(--primary); background: var(--primary-light); }
.subject-check-card.checked { border-color: var(--primary); background: var(--primary-light); }
.subject-check-card input[type=checkbox] { width:17px; height:17px; accent-color:var(--primary); flex-shrink:0; cursor:pointer; }
.subject-check-card__icon { font-size:1.3rem; flex-shrink:0; }
.subject-check-card__name { font-size:.88rem; font-weight:600; color:var(--gray-700); line-height:1.3; }

/* ── View Toggle Button ──────────────────────────────────────────── */
.view-toggle-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:7px; font-size:.8rem; font-weight:600;
  border:1.5px solid var(--border); background:var(--surface); color:var(--gray-600);
  cursor:pointer; transition:all .15s;
}
.view-toggle-btn:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.view-toggle-btn--active { background:var(--primary); color:#fff; border-color:var(--primary); }
.view-toggle-btn--active:hover { background:var(--primary-dark, #2563eb); color:#fff; }

/* ── Subject Question Stat Cards ─────────────────────────────────── */
.q-stat-card {
  background:var(--surface); border:1.5px solid var(--border); border-radius:12px;
  padding:16px 18px; cursor:pointer; transition:all .18s; position:relative; overflow:hidden;
}
.q-stat-card:hover { border-color:var(--primary); box-shadow:0 4px 16px rgba(59,130,246,.12); transform:translateY(-2px); }
.q-stat-card__icon { font-size:1.8rem; margin-bottom:8px; display:block; }
.q-stat-card__name { font-size:.9rem; font-weight:700; color:var(--gray-800); margin-bottom:10px; line-height:1.3; }
.q-stat-card__total { font-size:1.6rem; font-weight:800; color:var(--primary); line-height:1; margin-bottom:6px; }
.q-stat-card__total span { font-size:.75rem; font-weight:500; color:var(--gray-400); margin-left:4px; }
.q-stat-card__pills { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
.q-stat-card__pill { font-size:.7rem; font-weight:600; padding:2px 7px; border-radius:20px; }
.q-stat-card__pill--easy   { background:#dcfce7; color:#16a34a; }
.q-stat-card__pill--medium { background:#fef9c3; color:#b45309; }
.q-stat-card__pill--hard   { background:#fee2e2; color:#dc2626; }
.q-stat-card__pill--free   { background:#e0e7ff; color:#4f46e5; }
.q-stat-card--zero { opacity:.6; }
.q-stat-card--zero:hover { transform:none; box-shadow:none; }
.q-stat-card--skel { height:140px; background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-50) 50%,var(--gray-100) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:12px; cursor:default; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Education Right Drawer ─────────────────────────────────────── */
.edu-drawer{position:fixed;inset:0;z-index:1200;pointer-events:none;display:flex}
.edu-drawer.open{pointer-events:auto}
.edu-drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.42);opacity:0;transition:opacity .26s ease;backdrop-filter:blur(2px)}
.edu-drawer.open .edu-drawer__backdrop{opacity:1}
.edu-drawer__panel{
  position:absolute;right:0;top:0;bottom:0;
  width:min(660px,100vw);
  background:#fff;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:-6px 0 32px rgba(0,0,0,.13);
}
.edu-drawer.open .edu-drawer__panel{transform:translateX(0)}
.edu-drawer__header{
  display:flex;align-items:center;gap:10px;
  padding:14px 20px;
  border-bottom:1px solid #E5E7EB;
  background:#FAFAFA;
  flex-shrink:0;
}
.edu-drawer__back{
  background:none;border:none;cursor:pointer;
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:#6B7280;transition:background 140ms,color 140ms;flex-shrink:0;
}
.edu-drawer__back:hover{background:#EEF2FF;color:#4F46E5}
.edu-drawer__close{
  background:none;border:none;cursor:pointer;
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:#9CA3AF;transition:background 140ms,color 140ms;flex-shrink:0;
}
.edu-drawer__close:hover{background:#FEE2E2;color:#EF4444}
.edu-drawer__breadcrumb{
  flex:1;display:flex;align-items:center;gap:6px;
  font-size:.88rem;font-weight:600;color:#374151;
  overflow:hidden;
}
.edu-drawer__breadcrumb .bc-seg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edu-drawer__breadcrumb .bc-sep{color:#9CA3AF;font-weight:400;flex-shrink:0}
.edu-drawer__breadcrumb .bc-active{color:#4F46E5}
.edu-drawer__toolbar{
  display:flex;gap:10px;align-items:center;
  padding:14px 20px;
  border-bottom:1px solid #F3F4F6;
  flex-shrink:0;
  background:#FAFAFA;
}
.edu-drawer__body{flex:1;overflow-y:auto;padding:16px 20px}
.edu-drawer__view{display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0}
.edu-drawer__view[hidden]{display:none}
/* Question add form inside drawer */
.edu-drawer .edu-q-form{display:grid;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6;background:#FAFAFA;flex-shrink:0}
.edu-drawer .edu-q-edit-panel{display:none;padding:14px 20px;border-top:1px solid #E5E7EB;background:#F9FAFB;flex-shrink:0}
.edu-drawer .edu-q-edit-panel.open{display:block}

/* ═══════════════════════════════════════════════════════════════════
   ── Dashboard Redesign (tab-overview)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Dashboard Stat Cards ──────────────────────────────────────────── */
.dash-stat-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 22px 20px 18px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: default;
}
.dash-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
}

/* Coloured gradient backgrounds */
.dash-stat-card--blue   { background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%); }
.dash-stat-card--green  { background: linear-gradient(135deg, #047857 0%, #10b981 100%); }
.dash-stat-card--purple { background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%); }
.dash-stat-card--orange { background: linear-gradient(135deg, #c2410c 0%, #f97316 100%); }

/* Decorative circle in top-right corner */
.dash-stat-card__bg-shape {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}
.dash-stat-card__bg-shape::after {
  content: '';
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
}

/* Icon container */
.dash-stat-card__icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  backdrop-filter: blur(4px);
}

/* Text content */
.dash-stat-card__body { flex: 1; min-width: 0; }
.dash-stat-card__value {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.dash-stat-card__label {
  font-size: .78rem;
  color: rgba(255,255,255,.75);
  margin-top: 4px;
  font-weight: 500;
  letter-spacing: .01em;
}
.dash-stat-card__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: .73rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.15);
  padding: 3px 9px;
  border-radius: 20px;
}
.dash-stat-card__trend svg { flex-shrink: 0; }

/* ── Dashboard Section Wrapper ─────────────────────────────────────── */
.dash-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dash-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gray-100);
}
.dash-section__title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-500);
}
.dash-section__title-group h3 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--gray-800);
}

/* ── Quick Actions ─────────────────────────────────────────────────── */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.quick-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.13);
}
.quick-action-btn:active { transform: scale(.97); }

.quick-action-btn--blue   { background: linear-gradient(135deg,#EFF6FF,#DBEAFE); }
.quick-action-btn--purple { background: linear-gradient(135deg,#F5F3FF,#EDE9FE); }
.quick-action-btn--green  { background: linear-gradient(135deg,#F0FDF4,#D1FAE5); }
.quick-action-btn--orange { background: linear-gradient(135deg,#FFF7ED,#FED7AA); }

.quick-action-btn__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.quick-action-btn--blue   .quick-action-btn__icon { background:#DBEAFE; color:#1D4ED8; }
.quick-action-btn--purple .quick-action-btn__icon { background:#EDE9FE; color:#6D28D9; }
.quick-action-btn--green  .quick-action-btn__icon { background:#D1FAE5; color:#047857; }
.quick-action-btn--orange .quick-action-btn__icon { background:#FED7AA; color:#C2410C; }

.quick-action-btn__text { display: flex; flex-direction: column; gap: 2px; }
.quick-action-btn__title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1.2;
}
.quick-action-btn__desc {
  font-size: .72rem;
  color: var(--gray-500);
}

/* ── Dashboard Card ────────────────────────────────────────────────── */
.dash-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--gray-100);
  box-shadow: 0 2px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dash-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
  background: #FAFBFC;
}
.dash-card__header h3 {
  font-size: .93rem;
  font-weight: 700;
  color: var(--gray-800);
}

/* "View All" button */
.dash-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1.5px solid var(--gray-200);
  color: var(--primary);
  font-size: .75rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 20px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.dash-view-all-btn:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

/* ── Dashboard Table ───────────────────────────────────────────────── */
.dash-table-wrap { overflow-x: auto; }
.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}
.dash-table thead tr {
  background: #F8F9FB;
}
.dash-table th {
  text-align: left;
  padding: 10px 20px;
  color: var(--gray-500);
  font-weight: 600;
  font-size: .71rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--gray-100);
  white-space: nowrap;
}
.dash-table td {
  padding: 11px 20px;
  border-bottom: 1px solid #F3F4F6;
  color: var(--gray-700);
  vertical-align: middle;
}
.dash-table tbody tr:last-child td { border-bottom: none; }
.dash-table tbody tr:nth-child(even) { background: #FAFBFC; }
.dash-table tbody tr:hover { background: #EEF2FF; transition: background .12s; }

/* ── Skeleton Loader ───────────────────────────────────────────────── */
@keyframes dash-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.dash-skeleton-wrap { padding: 8px 16px; display: flex; flex-direction: column; gap: 4px; }
.dash-skel {
  background: linear-gradient(90deg,#F1F5F9 25%,#E8EDF3 50%,#F1F5F9 75%);
  background-size: 200% 100%;
  animation: dash-shimmer 1.5s infinite;
  border-radius: 6px;
}
.dash-skel--avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-skel--line { height: 10px; border-radius: 5px; }
.dash-skel--badge { width: 52px; height: 22px; border-radius: 20px; flex-shrink: 0; }
.dash-skel--w20 { width: 20%; }
.dash-skel--w30 { width: 30%; }
.dash-skel--w35 { width: 35%; }
.dash-skel--w40 { width: 40%; }
.dash-skel--w45 { width: 45%; }
.dash-skel--w50 { width: 50%; }
.dash-skel--w55 { width: 55%; }
.dash-skel--w60 { width: 60%; }
.dash-skel--w65 { width: 65%; }
.dash-skel--w70 { width: 70%; }

.dash-skel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid #F3F4F6;
}
.dash-skel-row:last-child { border-bottom: none; }
.dash-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }

/* ── Dashboard Responsive ──────────────────────────────────────────── */
@media (max-width: 1200px) {
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .dash-stat-card { padding: 18px 16px 14px; }
  .dash-stat-card__value { font-size: 1.6rem; }
  .quick-actions { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .quick-action-btn { padding: 12px; gap: 10px; }
  .quick-action-btn__desc { display: none; }
}
@media (max-width: 480px) {
  .dash-stat-card__value { font-size: 1.4rem; }
  .quick-actions { grid-template-columns: 1fr 1fr; }
  .quick-action-btn__icon { width: 34px; height: 34px; }
}

/* ── Subject/sub-subject picker (Content Upload, AI question modal) ── */
.ai-ov-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; max-height:180px; overflow-y:auto; }
.ai-ov-card { border:1.5px solid #E5E7EB; border-radius:8px; padding:8px 6px; background:#fff; cursor:pointer; font-size:.74rem; font-weight:600; color:#374151; text-align:center; line-height:1.3; transition:border-color .1s,background .1s; }
.ai-ov-card:hover { border-color:#93C5FD; }
.ai-ov-card.active { border-color:#2563EB; background:#EFF6FF; color:#1E3A8A; }
.ai-ov-chips { display:flex; flex-wrap:wrap; gap:6px; max-height:120px; overflow-y:auto; }
.ai-ov-chip { border:1.5px solid #E5E7EB; border-radius:20px; padding:4px 12px; background:#fff; cursor:pointer; font-size:.72rem; font-weight:600; color:#374151; }
.ai-ov-chip.active { border-color:#2563EB; background:#2563EB; color:#fff; }