/* ================================================================
   StudyPro Dashboard v2.0 — main.css
   ================================================================ */

/* ── VARIABLES ─────────────────────────────────────────────── */
.sp-app {
    --sp-primary:       #1a56db;
    --sp-primary-dark:  #1040b0;
    --sp-primary-light: #e8f0fd;
    --sp-accent:        #f59e0b;
    --sp-success:       #10b981;
    --sp-danger:        #ef4444;
    --sp-purple:        #7c3aed;
    --sp-sidebar-bg:    #0f172a;
    --sp-bg:            #f1f5f9;
    --sp-card:          #fff;
    --sp-text:          #1e293b;
    --sp-text-muted:    #64748b;
    --sp-border:        #e2e8f0;
    --sp-radius:        14px;
    --sp-shadow:        0 2px 16px rgba(0,0,0,.06);
    --sp-sidebar-w:     250px;

    font-family: 'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background: var(--sp-bg);
    color: var(--sp-text);
    display: flex;
    min-height: 100vh;
    box-sizing: border-box;
}
.sp-app *, .sp-app *::before, .sp-app *::after { box-sizing: inherit; }

/* ── SIDEBAR ─────────────────────────────────── */
.sp-sidebar {
    width: var(--sp-sidebar-w);
    background: var(--sp-sidebar-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top:0;left:0;bottom:0;
    z-index: 200;
    transition: transform .3s;
    overflow: hidden;
}
.sp-logo { padding:20px 16px 16px; border-bottom:1px solid rgba(255,255,255,.07); display:flex;align-items:center;gap:10px;flex-shrink:0; }
.sp-logo-icon { width:36px;height:36px;background:var(--sp-primary);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px; }
.sp-logo-text { font-size:20px;font-weight:800;color:#fff; }
.sp-logo-text span { color:var(--sp-accent); }
.sp-nav { padding:12px 10px;flex:1;overflow-y:auto; }
.sp-nav-label { font-size:10px;font-weight:700;letter-spacing:1.2px;color:#475569;text-transform:uppercase;padding:10px 12px 6px; }
.sp-nav-item { display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;margin:2px 0;cursor:pointer;color:#94a3b8;font-size:13px;font-weight:600;transition:all .2s;text-decoration:none;user-select:none; }
.sp-nav-item:hover { background:rgba(255,255,255,.06);color:#fff; }
.sp-nav-item.active { background:var(--sp-primary);color:#fff;box-shadow:0 4px 14px rgba(26,86,219,.35); }
.sp-nav-icon { font-size:16px;min-width:20px;text-align:center; }
.sp-nav-badge { margin-left:auto;background:var(--sp-accent);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px; }
.sp-sidebar-user { display:flex;align-items:center;gap:10px;padding:14px;border-top:1px solid rgba(255,255,255,.07);flex-shrink:0; }
.sp-avatar-sm { width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--sp-primary),var(--sp-purple));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;flex-shrink:0; }
.sp-user-name { color:#fff;font-size:13px;font-weight:700; }
.sp-user-role { color:#64748b;font-size:11px; }
.sp-sidebar-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199; }

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

/* ── TOPBAR ──────────────────────────────────── */
.sp-topbar { background:var(--sp-card);border-bottom:1px solid var(--sp-border);padding:0 20px;height:60px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:100; }
.sp-hamburger { display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--sp-text-muted);padding:4px 6px;border-radius:8px; }
.sp-topbar-title { font-size:18px;font-weight:800;color:var(--sp-text);white-space:nowrap; }
.sp-topbar-search { flex:1;max-width:360px;margin-left:10px;position:relative; }
.sp-topbar-search input { width:100%;padding:8px 14px 8px 36px;border-radius:10px;border:1.5px solid var(--sp-border);background:var(--sp-bg);font-size:13px;font-family:inherit;color:var(--sp-text);outline:none;transition:border-color .2s; }
.sp-topbar-search input:focus { border-color:var(--sp-primary); }
.sp-search-icon { position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--sp-text-muted);font-size:13px;pointer-events:none; }
.sp-topbar-actions { margin-left:auto;display:flex;align-items:center;gap:8px; }
.sp-topbar-user { display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border-radius:10px;border:1.5px solid var(--sp-border);cursor:pointer;transition:all .2s; }
.sp-topbar-user:hover { border-color:var(--sp-primary);background:var(--sp-primary-light); }
.sp-avatar { width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--sp-primary),var(--sp-purple));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:11px; }
.sp-topbar-uname { font-size:13px;font-weight:700; }

/* ── CONTENT ─────────────────────────────────── */
.sp-content { padding:24px;flex:1; }
.sp-view { display:none; }
.sp-view-active { display:block; }
.sp-view-header { margin-bottom:20px; }
.sp-view-header h2 { font-size:20px;font-weight:800;margin:0 0 4px; }
.sp-view-header p { color:var(--sp-text-muted);font-size:13px; }

/* ── WELCOME BANNER ──────────────────────────── */
.sp-welcome-banner { background:linear-gradient(135deg,var(--sp-primary),#1740c0,var(--sp-purple));border-radius:18px;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px;position:relative;overflow:hidden; }
.sp-welcome-left h2 { font-size:20px;font-weight:800;color:#fff;margin:0 0 5px; }
.sp-welcome-left p { color:rgba(255,255,255,.75);font-size:13px;margin-bottom:14px; }
.sp-welcome-btns { display:flex;gap:10px;flex-wrap:wrap; }
.sp-btn-white { background:#fff;color:var(--sp-primary);border:none;padding:9px 20px;border-radius:10px;font-size:13px;font-weight:800;font-family:inherit;cursor:pointer;transition:all .2s;white-space:nowrap; }
.sp-btn-white:hover { transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.15); }
.sp-btn-glass { background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.25);padding:9px 18px;border-radius:10px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s; }
.sp-welcome-stats { display:flex;gap:10px;flex-shrink:0; }
.sp-streak-box { background:rgba(255,255,255,.12);border-radius:12px;padding:12px 16px;text-align:center;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.15);min-width:72px; }
.sp-streak-num { font-size:24px;font-weight:800;color:var(--sp-accent);line-height:1; }
.sp-streak-num.sp-green { color:#34d399; }
.sp-streak-num.sp-yellow { color:#fde68a; }
.sp-streak-lbl { color:rgba(255,255,255,.7);font-size:11px;font-weight:600;margin-top:3px; }

/* ── STATS ROW ───────────────────────────────── */
.sp-stats-row { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px; }
.sp-stat-card { background:var(--sp-card);border-radius:var(--sp-radius);padding:16px;box-shadow:var(--sp-shadow);border:1.5px solid var(--sp-border);display:flex;align-items:center;gap:12px;transition:all .25s; }
.sp-stat-card:hover { transform:translateY(-2px);box-shadow:0 8px 28px rgba(26,86,219,.1);border-color:transparent; }
.sp-stat-icon { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0; }
.sp-stat-val { font-size:20px;font-weight:800; }
.sp-stat-lbl { font-size:11px;color:var(--sp-text-muted);font-weight:600;margin-top:2px; }
.sp-section-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; }
.sp-section-title { font-size:15px;font-weight:800; }
.sp-see-all { font-size:13px;font-weight:700;color:var(--sp-primary);cursor:pointer; }

/* ── CARD ────────────────────────────────────── */
.sp-card { background:var(--sp-card);border-radius:var(--sp-radius);padding:20px;box-shadow:var(--sp-shadow);border:1.5px solid var(--sp-border); }

/* ── BUNDLE TABS ─────────────────────────────── */
.sp-bundle-tabs { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px; }
.sp-bundle-tab { display:flex;align-items:center;gap:7px;padding:7px 16px;border-radius:10px;border:1.5px solid var(--sp-border);background:var(--sp-card);cursor:pointer;font-size:13px;font-weight:700;color:var(--sp-text-muted);transition:all .2s;white-space:nowrap;font-family:inherit; }
.sp-bundle-tab:hover { border-color:var(--sp-primary);color:var(--sp-primary);background:var(--sp-primary-light); }
.sp-bundle-tab.active { background:var(--sp-primary);color:#fff;border-color:var(--sp-primary);box-shadow:0 4px 14px rgba(26,86,219,.3); }

/* ── HOME BUNDLES GRID ───────────────────────── */
.sp-bundles-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px; }
.sp-bundle-home-card { background:var(--sp-card);border-radius:var(--sp-radius);padding:16px;border:1.5px solid var(--sp-border);box-shadow:var(--sp-shadow);cursor:pointer;transition:all .25s;display:flex;flex-direction:column;gap:8px; }
.sp-bundle-home-card:hover { transform:translateY(-3px);box-shadow:0 8px 28px rgba(26,86,219,.1);border-color:transparent; }
.sp-bhc-top { display:flex;align-items:center;gap:10px; }
.sp-bhc-icon { width:42px;height:42px;border-radius:12px;background:var(--sp-primary-light);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;overflow:hidden; }
.sp-bhc-name { font-size:13px;font-weight:800;line-height:1.3; }
.sp-bhc-meta { font-size:11px;color:var(--sp-text-muted);display:flex;gap:10px; }
.sp-bhc-btn { background:var(--sp-primary-light);color:var(--sp-primary);border:none;padding:7px 0;border-radius:8px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;width:100%;transition:all .2s; }
.sp-bhc-btn:hover { background:var(--sp-primary);color:#fff; }

/* ── SETS GRID ───────────────────────────────── */
.sp-sets-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px; }
.sp-set-card { background:var(--sp-card);border-radius:var(--sp-radius);padding:18px;border:1.5px solid var(--sp-border);box-shadow:var(--sp-shadow);transition:all .25s; }
.sp-set-card:hover { transform:translateY(-2px);box-shadow:0 8px 28px rgba(26,86,219,.1);border-color:transparent; }
.sp-set-card.sp-locked { opacity:.65; }
.sp-set-number { display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;background:var(--sp-primary-light);color:var(--sp-primary);padding:3px 10px;border-radius:20px;margin-bottom:8px; }
.sp-set-name { font-size:14px;font-weight:800;margin-bottom:8px;line-height:1.3; }
.sp-set-meta { display:flex;gap:10px;font-size:12px;color:var(--sp-text-muted);font-weight:600;margin-bottom:10px; }
.sp-set-subjects { display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px; }
.sp-set-subject-tag { font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--sp-bg);color:var(--sp-text-muted);border:1px solid var(--sp-border); }
.sp-set-footer { display:flex;align-items:center;justify-content:space-between; }
.sp-btn-start { background:var(--sp-primary);color:#fff;border:none;padding:8px 18px;border-radius:9px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s; }
.sp-btn-start:hover { background:var(--sp-primary-dark); }
.sp-btn-start:disabled { opacity:.5;cursor:not-allowed; }
.sp-btn-primary { background:var(--sp-primary);color:#fff;border:none;padding:9px 20px;border-radius:10px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s; }
.sp-btn-primary:hover { background:var(--sp-primary-dark); }
.sp-btn-outline { background:transparent;color:var(--sp-primary);border:1.5px solid var(--sp-primary);padding:9px 20px;border-radius:10px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s; }
.sp-btn-outline:hover { background:var(--sp-primary-light); }

/* ── QUIZ TOPIC GRID ─────────────────────────── */
.sp-quiz-topic-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:8px 0; }
.sp-quiz-topic-card { display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;padding:12px;border-radius:14px;transition:all .2s; }
.sp-quiz-topic-card:hover { background:var(--sp-primary-light);transform:translateY(-2px); }
.sp-qtc-icon-wrap { width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.15); }
.sp-qtc-icon-img { width:52px;height:52px;object-fit:contain; }
.sp-qtc-icon-emoji { font-size:36px; }
.sp-qtc-name { font-size:12px;font-weight:700;text-align:center;max-width:90px;line-height:1.3; }
.sp-quiz-back-header { background:none;border:1.5px solid var(--sp-border);padding:8px 16px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:700;font-family:inherit;color:var(--sp-text);margin-bottom:14px;transition:all .2s; }
.sp-quiz-back-header:hover { border-color:var(--sp-primary);color:var(--sp-primary); }
.sp-quiz-topic-header { margin-bottom:16px; }
.sp-quiz-topic-header h3 { font-size:18px;font-weight:800;margin:0 0 4px; }

/* ── TOPIC ACCORDION ─────────────────────────── */
.sp-topic-block { background:var(--sp-card);border-radius:var(--sp-radius);margin-bottom:12px;border:1.5px solid var(--sp-border);overflow:hidden; }
.sp-topic-header { display:flex;align-items:center;justify-content:space-between;padding:14px 18px;cursor:pointer;background:var(--sp-card);transition:background .2s;user-select:none; }
.sp-topic-header:hover { background:var(--sp-bg); }
.sp-topic-header.open { background:var(--sp-primary);color:#fff; }
.sp-topic-header.open .sp-topic-chevron,.sp-topic-header.open .sp-topic-count { color:rgba(255,255,255,.8); }
.sp-topic-name { font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px; }
.sp-topic-right { display:flex;align-items:center;gap:10px; }
.sp-topic-count { font-size:12px;color:var(--sp-text-muted);font-weight:600; }
.sp-topic-chevron { font-size:13px;color:var(--sp-text-muted);transition:transform .25s; }
.sp-topic-header.open .sp-topic-chevron { transform:rotate(180deg); }
.sp-topic-body { display:none;padding:8px 16px 16px; }
.sp-topic-body.open { display:block; }
.sp-children-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px; }
.sp-child-card { border:1.5px solid var(--sp-border);border-radius:10px;padding:11px 13px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--sp-card); }
.sp-child-card:hover { border-color:var(--sp-primary);background:var(--sp-primary-light);transform:translateY(-1px); }
.sp-child-name { font-size:12.5px;font-weight:700;line-height:1.3; }
.sp-child-meta { display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0; }
.sp-child-qcount { font-size:11px;font-weight:700;background:var(--sp-primary-light);color:var(--sp-primary);padding:2px 7px;border-radius:6px;white-space:nowrap; }
.sp-child-start { font-size:11px;color:var(--sp-primary);font-weight:700; }

/* ── TEST SERIES TABS ─────────────────────────── */
.sp-ts-tabs { display:flex;background:var(--sp-card);border-bottom:1.5px solid var(--sp-border);margin-bottom:18px;border-radius:var(--sp-radius) var(--sp-radius) 0 0;overflow:hidden; }
.sp-ts-tab { flex:1;padding:12px 8px;background:none;border:none;font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer;color:var(--sp-text-muted);transition:all .2s;border-bottom:2.5px solid transparent;position:relative; }
.sp-ts-tab:hover { color:var(--sp-primary);background:var(--sp-primary-light); }
.sp-ts-tab.active { color:#ef4444;border-bottom-color:#ef4444;background:var(--sp-card); }
.sp-ts-tab-panel { display:none; }
.sp-ts-active { display:block; }
.sp-ts-filters { display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px; }
.sp-ts-filter-btn { padding:6px 14px;border-radius:20px;border:1.5px solid var(--sp-border);background:var(--sp-card);cursor:pointer;font-size:12px;font-weight:700;font-family:inherit;color:var(--sp-text-muted);transition:all .2s; }
.sp-ts-filter-btn:hover,.sp-ts-filter-btn.active { background:#ef4444;color:#fff;border-color:#ef4444; }
.sp-ts-stats-row { display:flex;gap:12px;background:var(--sp-card);border-radius:12px;padding:14px;border:1.5px solid var(--sp-border);margin-bottom:16px; }
.sp-ts-stat { display:flex;flex-direction:column;align-items:center;flex:1; }
.sp-ts-stat strong { font-size:20px;font-weight:800;color:var(--sp-purple); }
.sp-ts-stat-green strong { color:var(--sp-success); }
.sp-ts-stat small { font-size:11px;color:var(--sp-text-muted); }

/* ── TEST SERIES CARD ─────────────────────────── */
.sp-ts-card { background:var(--sp-card);border-radius:10px;border:1px solid var(--sp-border);box-shadow:0 1px 8px rgba(0,0,0,.04);margin-bottom:10px;display:flex;align-items:center;gap:0;overflow:hidden; }
.sp-ts-card-left { flex-shrink:0; }
.sp-ts-card-icon { width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--sp-bg);margin:10px 12px; }
.sp-ts-prev-icon { background:#ede9fe; }
.sp-ts-card-body { flex:1;padding:10px 0; }
.sp-ts-card-title { font-size:13px;font-weight:700;line-height:1.4;margin-bottom:4px; }
.sp-ts-card-meta { display:flex;gap:10px;font-size:11px;color:var(--sp-text-muted); }
.sp-ts-card-right { padding:10px 12px;flex-shrink:0; }
.sp-ts-btn-start { background:var(--sp-primary);color:#fff;border:none;padding:7px 14px;border-radius:20px;font-size:11.5px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s;white-space:nowrap; }
.sp-ts-btn-start:hover { background:var(--sp-primary-dark); }
.sp-ts-btn-lock { background:var(--sp-bg);color:#ef4444;border:1px solid #ef4444;padding:7px 14px;border-radius:20px;font-size:11.5px;font-weight:700;font-family:inherit;cursor:pointer; }
.sp-ts-section-header { background:linear-gradient(90deg,#312e81,#6366f1);border-radius:10px;padding:10px 16px;margin:12px 0 6px;display:flex;align-items:center;justify-content:space-between; }
.sp-ts-section-header span:first-child { color:#fff;font-weight:700;font-size:13px; }
.sp-ts-sec-count { background:rgba(255,255,255,.2);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px; }
.sp-ts-prev-banner { background:linear-gradient(90deg,#7c3aed,#5b21b6);border-radius:12px;padding:12px 16px;margin-bottom:14px;display:flex;align-items:center;gap:12px; }
.sp-ts-prev-banner span { font-size:22px; }
.sp-ts-prev-banner strong { color:#fff;font-size:14px;display:block; }
.sp-ts-prev-banner small { color:rgba(255,255,255,.75);font-size:11px; }
.sp-ts-prev-card { border-left:3.5px solid var(--sp-purple); }

/* ── TOPIC CHIPS (in quiz overlay) ──────────── */
.sp-topic-chips-row { display:flex;gap:6px;overflow-x:auto;padding:8px 12px;background:#f1f5f9;flex-shrink:0; }
.sp-topic-chip { padding:5px 14px;border-radius:7px;border:1px solid #1a56db;background:#fff;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;color:#1a56db;transition:all .15s;white-space:nowrap; }
.sp-topic-chip.active { background:#1a56db;color:#fff; }

/* ── RESULTS TABLE ───────────────────────────── */
.sp-results-table-wrap { overflow-x:auto; }
.sp-results-table { width:100%;border-collapse:collapse; }
.sp-results-table thead th { font-size:11px;font-weight:700;color:var(--sp-text-muted);text-transform:uppercase;letter-spacing:.7px;padding:0 12px 10px 0;text-align:left;border-bottom:1.5px solid var(--sp-border);white-space:nowrap; }
.sp-results-table tbody td { padding:12px 12px 12px 0;font-size:13px;border-bottom:1px solid var(--sp-border);color:var(--sp-text);font-weight:600;vertical-align:middle; }
.sp-results-table tbody tr:last-child td { border-bottom:none; }
.sp-results-table tbody tr:hover td { background:var(--sp-bg); }
.sp-acc-badge { display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700; }
.sp-acc-high { background:#d1fae5;color:#065f46; }
.sp-acc-mid  { background:#fef3c7;color:#d97706; }
.sp-acc-low  { background:#fee2e2;color:#dc2626; }
.sp-tbl-btn { padding:5px 12px;border-radius:7px;font-size:11.5px;font-weight:700;font-family:inherit;cursor:pointer;border:1.5px solid var(--sp-primary);background:transparent;color:var(--sp-primary);transition:all .2s; }
.sp-tbl-btn:hover { background:var(--sp-primary);color:#fff; }

/* ── SKELETON ────────────────────────────────── */
.sp-skeleton-card { background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:spSkeleton 1.4s ease-in-out infinite;border-radius:var(--sp-radius);height:160px; }
@keyframes spSkeleton { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.sp-loading-inline { color:var(--sp-text-muted);font-size:13px;padding:10px 0; }
.sp-empty-state { text-align:center;padding:36px 20px;color:var(--sp-text-muted); }
.sp-es-icon { font-size:38px;margin-bottom:10px; }
.sp-empty-state p { font-size:13.5px; }

/* ── ADMIN CSS ───────────────────────────────── */
.sp-admin-wrap { max-width:1100px; }
.sp-admin-header { background:linear-gradient(135deg,#1a56db,#7c3aed);border-radius:14px;padding:24px 28px;margin-bottom:24px;color:#fff; }
.sp-admin-header h1 { margin:0 0 6px;font-size:24px; }
.sp-admin-header p { margin:0;opacity:.85;font-size:14px; }
.sp-admin-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px; }
.sp-card-full { grid-column:1/-1; }
.sp-admin-card { background:#fff;border-radius:12px;padding:22px;border:1px solid #e2e8f0;box-shadow:0 2px 10px rgba(0,0,0,.05); }
.sp-admin-card h2 { font-size:16px;font-weight:700;margin:0 0 12px;color:#1e293b; }
.sp-admin-card h3 { font-size:14px;font-weight:700;margin:0 0 8px;color:#1e293b; }
.sp-feature-table { width:100%;border-collapse:collapse;font-size:13px; }
.sp-feature-table th { text-align:left;padding:8px 12px;background:#f8fafc;font-weight:700;border-bottom:2px solid #e2e8f0;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#64748b; }
.sp-feature-table td { padding:12px;border-bottom:1px solid #f1f5f9; }
.sp-toggle { position:relative;display:inline-block;width:44px;height:24px; }
.sp-toggle input { opacity:0;width:0;height:0; }
.sp-toggle-slider { position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#cbd5e1;transition:.3s;border-radius:24px; }
.sp-toggle-slider:before { position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:#fff;transition:.3s;border-radius:50%; }
.sp-toggle input:checked + .sp-toggle-slider { background:#1a56db; }
.sp-toggle input:checked + .sp-toggle-slider:before { transform:translateX(20px); }
.sp-stat-list { list-style:none;margin:0;padding:0; }
.sp-stat-list li { display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f1f5f9;font-size:13px; }
.sp-stat-list li strong { font-weight:700;color:#1a56db; }
.sp-notice { padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:13px;font-weight:600; }
.sp-notice-success { background:#d1fae5;color:#065f46;border:1px solid #86efac; }
.sp-btn-save { background:linear-gradient(135deg,#1a56db,#7c3aed);color:#fff;border:none;padding:10px 24px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s; }
.sp-btn-save:hover { opacity:.9;transform:translateY(-1px); }
.sp-shortcode-box { display:flex;align-items:center;gap:8px;background:#f8fafc;border-radius:8px;padding:10px 14px;border:1px solid #e2e8f0;margin-top:8px; }
.sp-shortcode-box code { flex:1;font-family:monospace;font-size:12.5px;color:#374151; }
.sp-copy-btn { background:#1a56db;color:#fff;border:none;padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer;white-space:nowrap; }

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width:900px) { .sp-stats-row{grid-template-columns:repeat(2,1fr);} .sp-welcome-stats{display:none;} }
@media (max-width:768px) {
    .sp-sidebar{transform:translateX(-100%);}
    .sp-sidebar.open{transform:translateX(0);box-shadow:4px 0 30px rgba(0,0,0,.3);}
    .sp-sidebar-overlay.open{display:block;}
    .sp-main{margin-left:0;}
    .sp-hamburger{display:flex;}
    .sp-topbar-search{display:none;}
    .sp-content{padding:16px;}
    .sp-sets-grid,.sp-bundles-grid{grid-template-columns:1fr;}
    .sp-stats-row{grid-template-columns:1fr 1fr;}
    .sp-quiz-topic-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:480px) { .sp-quiz-topic-grid{grid-template-columns:repeat(2,1fr);} }