/* ============================================================
   QUESTUDY PLUGIN PAGES — Premium SaaS Design System
   Glassmorphism · Mesh Gradients · Layered Shadows · Micro-Interactions
   ============================================================ */

/* ──────────────────────────────────────────────────────────────
   DESIGN TOKENS
   ────────────────────────────────────────────────────────────── */

:root {
  --qp-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --qp-tr: 0.3s cubic-bezier(.4,0,.2,1);
  --qp-tr-fast: 0.15s cubic-bezier(.4,0,.2,1);
  --qp-tr-spring: 0.5s cubic-bezier(.34,1.56,.64,1);
  --qp-r: 16px;
  --qp-r-sm: 12px;
  --qp-r-xs: 8px;
  --qp-r-pill: 100px;
  --qp-sh: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
  --qp-sh-md: 0 4px 12px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.04);
  --qp-sh-lg: 0 8px 24px rgba(0,0,0,.08), 0 16px 48px rgba(0,0,0,.06);
  --qp-sh-xl: 0 12px 32px rgba(0,0,0,.1), 0 24px 64px rgba(0,0,0,.08);
  --qp-glass: rgba(255,255,255,.72);
  --qp-glass-border: rgba(255,255,255,.45);
  --qp-glass-blur: 16px;
}

/* ──────────────────────────────────────────────────────────────
   BASE RESETS
   ────────────────────────────────────────────────────────────── */

.qp-page-premium,
.qp-page-premium * { box-sizing: border-box; }

.qp-page-premium {
  font-family: var(--qp-font);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  color: #0f172a;
}

.qp-page-premium ::selection { background: var(--p-accent, rgba(99,102,241,.2)); }

.entry-content .qp-page-premium,
.post-content .qp-page-premium,
article .qp-page-premium,
main .qp-page-premium,
#content .qp-page-premium,
.site-content .qp-page-premium,
.qp-page-premium .entry-content,
.qp-page-premium .post-content {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.entry-content, .post-content, article, main, #content, .site-content {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.qp-page-premium a { color: inherit; text-decoration: none; }
.qp-page-premium img { max-width: 100%; height: auto; display: block; }
.qp-page-premium button,
.qp-page-premium input,
.qp-page-premium select,
.qp-page-premium textarea { font-family: var(--qp-font); }

/* ──────────────────────────────────────────────────────────────
   SHARED COMPONENTS
   ────────────────────────────────────────────────────────────── */

/* ── Hero ── */
.qp-hero {
  padding: 0 40px;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--p-darkest, #0f172a) 0%, var(--p-dark) 40%, var(--p-primary) 100%);
}

/* Animated mesh overlay */
.qp-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 15% 85%, var(--p-accent-glow, rgba(129,140,248,.18)) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 85% 15%, var(--p-mid-glow, rgba(99,102,241,.12)) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 50% 50%, rgba(255,255,255,.04) 0%, transparent 70%);
}

/* Dot grid */
.qp-hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 70%);
}

.qp-hero h1,
.qp-hero h2,
.qp-hero .qp-hero-title {
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.2;
  position: relative;
  z-index: 2;
  text-align: center;
  text-shadow: 0 2px 24px rgba(0,0,0,.15);
}

.qp-hero p,
.qp-hero .qp-hero-sub {
  color: rgba(255,255,255,.65);
  font-size: .95rem;
  font-weight: 400;
  margin: 10px 0 0;
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ── Container ── */
.qp-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 24px;
}

/* ── Glass Card ── */
.qp-card {
  background: var(--qp-glass);
  backdrop-filter: blur(var(--qp-glass-blur));
  -webkit-backdrop-filter: blur(var(--qp-glass-blur));
  border: 1px solid var(--qp-glass-border);
  border-radius: var(--qp-r);
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: var(--qp-sh);
  transition: box-shadow var(--qp-tr), transform var(--qp-tr), border-color var(--qp-tr);
}

.qp-card:hover {
  box-shadow: var(--qp-sh-md);
  transform: translateY(-2px);
  border-color: var(--p-border-hover, rgba(99,102,241,.2));
}

/* ── Form Group ── */
.qp-fg { margin-bottom: 20px; }

.qp-fg label,
.qp-label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--p-primary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.qp-fg input[type="text"],
.qp-fg input[type="number"],
.qp-fg input[type="email"],
.qp-fg input[type="search"],
.qp-fg select,
.qp-fg textarea,
.qp-input,
.qp-select,
.qp-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--p-border, #e2e8f0);
  border-radius: var(--qp-r-sm);
  font-size: .92rem;
  font-family: var(--qp-font);
  color: #0f172a;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  outline: none;
  transition: border-color var(--qp-tr), box-shadow var(--qp-tr);
}

.qp-fg input:focus,
.qp-fg select:focus,
.qp-fg textarea:focus,
.qp-input:focus,
.qp-select:focus,
.qp-textarea:focus {
  border-color: var(--p-primary);
  box-shadow: 0 0 0 3px var(--p-glow, rgba(99,102,241,.12));
}

.qp-fg textarea,
.qp-textarea { min-height: 110px; resize: vertical; }

/* ── Primary Button ── */
.qp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 32px;
  background: linear-gradient(135deg, var(--p-primary), var(--p-mid));
  color: #fff;
  border: none;
  border-radius: var(--qp-r-pill);
  font-size: .88rem;
  font-weight: 700;
  font-family: var(--qp-font);
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform var(--qp-tr-spring), box-shadow var(--qp-tr);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.qp-btn::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15), transparent 60%);
  opacity: 0;
  transition: opacity var(--qp-tr-fast);
}

.qp-btn:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 6px 24px var(--p-glow, rgba(99,102,241,.3)), 0 0 48px var(--p-accent-glow, rgba(129,140,248,.12));
}

.qp-btn:hover::before { opacity: 1; }
.qp-btn:active { transform: translateY(0) scale(.98); }

/* ── Outline Button ── */
.qp-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 26px;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--p-primary);
  border: 1.5px solid var(--p-border, #e2e8f0);
  border-radius: var(--qp-r-pill);
  font-size: .85rem;
  font-weight: 600;
  font-family: var(--qp-font);
  cursor: pointer;
  transition: all var(--qp-tr);
}

.qp-btn-outline:hover {
  border-color: var(--p-primary);
  background: rgba(255,255,255,.9);
  box-shadow: var(--qp-sh);
}

/* ── Utility ── */
.qp-text-center { text-align: center; }
.qp-mt { margin-top: 28px; }
.qp-mb { margin-bottom: 28px; }
.qp-flex { display: flex; }
.qp-flex-wrap { flex-wrap: wrap; }
.qp-items-center { align-items: center; }
.qp-justify-between { justify-content: space-between; }
.qp-gap { gap: 16px; }

/* ── Accent divider ── */
.qp-divider {
  height: 3px;
  border: none;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--p-primary), var(--p-accent), transparent);
  margin: 0 0 28px;
  opacity: .5;
}

/* ══════════════════════════════════════════════════════════════
   PAGE COLOR SYSTEM
   Each page: primary, mid, dark, darkest, accent, border,
   glow, accent-glow, mid-glow, bg
   ══════════════════════════════════════════════════════════════ */

/* 1. Exam Generator — Indigo/Violet */
.questudy-generator-wrap {
  --p-primary: #6366F1;
  --p-mid: #818CF8;
  --p-dark: #4338CA;
  --p-darkest: #1E1B4B;
  --p-accent: #A78BFA;
  --p-border: #E0E7FF;
  --p-border-hover: rgba(99,102,241,.25);
  --p-glow: rgba(99,102,241,.15);
  --p-accent-glow: rgba(167,139,250,.15);
  --p-mid-glow: rgba(129,140,248,.12);
  --p-bg: #F8FAFF;
  background: var(--p-bg);
  min-height: 100vh;
  padding: 0;
}

/* 2. Past Questions — Emerald/Teal */
.questudy-past-questions-wrap {
  --p-primary: #10B981;
  --p-mid: #34D399;
  --p-dark: #047857;
  --p-darkest: #022C22;
  --p-accent: #6EE7B7;
  --p-border: #D1FAE5;
  --p-border-hover: rgba(16,185,129,.25);
  --p-glow: rgba(16,185,129,.12);
  --p-accent-glow: rgba(110,231,183,.12);
  --p-mid-glow: rgba(52,211,153,.1);
  --p-bg: #F0FDF4;
  background: var(--p-bg);
  min-height: 100vh;
  padding: 0;
}

/* 3. Competition Arena — Rose/Orange */
.qca-wrap {
  --p-primary: #F43F5E;
  --p-mid: #FB7185;
  --p-dark: #BE123C;
  --p-darkest: #1C0A10;
  --p-accent: #F97316;
  --p-border: #FECDD3;
  --p-border-hover: rgba(244,63,94,.2);
  --p-glow: rgba(244,63,94,.12);
  --p-accent-glow: rgba(249,115,22,.12);
  --p-mid-glow: rgba(251,113,133,.1);
  --p-bg: #FFF1F2;
  background: var(--p-bg);
  min-height: 100vh;
  padding: 0;
}

/* 4. Textbook Library — Sky/Cyan */
.tbs-wrap {
  --p-primary: #0EA5E9;
  --p-mid: #38BDF8;
  --p-dark: #0369A1;
  --p-darkest: #082F49;
  --p-accent: #67E8F9;
  --p-border: #BAE6FD;
  --p-border-hover: rgba(14,165,233,.2);
  --p-glow: rgba(14,165,233,.12);
  --p-accent-glow: rgba(103,232,249,.1);
  --p-mid-glow: rgba(56,189,248,.1);
  --p-bg: #F0F9FF;
  background: var(--p-bg);
  min-height: 100vh;
  padding: 0;
}

/* 5. Pricing — Amber/Purple */
.sub-wrap {
  --p-primary: #F59E0B;
  --p-mid: #FBBF24;
  --p-dark: #B45309;
  --p-darkest: #451A03;
  --p-accent: #A855F7;
  --p-border: #FDE68A;
  --p-border-hover: rgba(245,158,11,.2);
  --p-glow: rgba(245,158,11,.12);
  --p-accent-glow: rgba(168,85,247,.1);
  --p-mid-glow: rgba(251,191,36,.1);
  --p-bg: #FFFBEB;
  background: var(--p-bg);
  min-height: 100vh;
  padding: 0;
}

/* 6. Dashboard — Slate/Indigo */
.qsd-wrap {
  --p-primary: #6366F1;
  --p-mid: #818CF8;
  --p-dark: #334155;
  --p-darkest: #0F172A;
  --p-accent: #A78BFA;
  --p-border: #E2E8F0;
  --p-border-hover: rgba(99,102,241,.2);
  --p-glow: rgba(99,102,241,.1);
  --p-accent-glow: rgba(167,139,250,.1);
  --p-mid-glow: rgba(129,140,248,.08);
  --p-bg: #F8FAFC;
  background: var(--p-bg);
  min-height: 100vh;
  padding: 0;
}

/* 7. Leaderboard — Gold/Amber */
.questudy-leaderboard-wrap {
  --p-primary: #EAB308;
  --p-mid: #FACC15;
  --p-dark: #A16207;
  --p-darkest: #422006;
  --p-accent: #F59E0B;
  --p-border: #FEF3C7;
  --p-border-hover: rgba(234,179,8,.2);
  --p-glow: rgba(234,179,8,.12);
  --p-accent-glow: rgba(245,158,11,.1);
  --p-mid-glow: rgba(250,204,21,.1);
  --p-bg: #FEFCE8;
  background: var(--p-bg);
  min-height: 100vh;
  padding: 0;
}


/* ══════════════════════════════════════════════════════════════
   1. EXAM GENERATOR
   ══════════════════════════════════════════════════════════════ */

.questudy-generator-wrap .qg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.questudy-generator-wrap .qg-card-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--p-primary), var(--p-accent));
  border-radius: var(--qp-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px var(--p-glow);
}

.questudy-generator-wrap .qg-card-icon svg,
.questudy-generator-wrap .qg-card-icon img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
}

.questudy-generator-wrap .qg-card h3,
.questudy-generator-wrap .qg-card .qg-card-title {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.questudy-generator-wrap .qg-card p,
.questudy-generator-wrap .qg-card .qg-card-desc {
  color: #64748b;
  font-size: .88rem;
  margin: 0 0 18px;
  line-height: 1.55;
}

/* Option cards */
.questudy-generator-wrap .qg-option-card {
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--p-border);
  border-radius: var(--qp-r-sm);
  padding: 14px 18px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all var(--qp-tr);
  display: flex;
  align-items: center;
  gap: 12px;
}

.questudy-generator-wrap .qg-option-card:hover {
  border-color: var(--p-mid);
  background: rgba(255,255,255,.9);
  box-shadow: var(--qp-sh);
}

.questudy-generator-wrap .qg-option-card.active,
.questudy-generator-wrap .qg-option-card.selected {
  border-color: var(--p-primary);
  background: var(--p-glow);
  box-shadow: 0 0 0 3px var(--p-glow), var(--qp-sh);
}

.questudy-generator-wrap .qg-option-radio {
  width: 20px;
  height: 20px;
  border: 2px solid #CBD5E1;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: all var(--qp-tr);
}

.questudy-generator-wrap .qg-option-card.active .qg-option-radio,
.questudy-generator-wrap .qg-option-card.selected .qg-option-radio {
  border-color: var(--p-primary);
  background: var(--p-primary);
  box-shadow: 0 0 0 3px var(--p-glow);
}

.questudy-generator-wrap .qg-option-card.active .qg-option-radio::after,
.questudy-generator-wrap .qg-option-card.selected .qg-option-radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
}

/* Toggle */
.questudy-generator-wrap .qg-toggle {
  width: 46px;
  height: 26px;
  background: #CBD5E1;
  border-radius: 13px;
  position: relative;
  cursor: pointer;
  transition: background var(--qp-tr);
  border: none;
  padding: 0;
}

.questudy-generator-wrap .qg-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--qp-tr-spring);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

.questudy-generator-wrap .qg-toggle.active { background: var(--p-primary); }
.questudy-generator-wrap .qg-toggle.active::after { transform: translateX(20px); }

@media (max-width: 768px) {
  .questudy-generator-wrap .qg-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   2. PAST QUESTIONS
   ══════════════════════════════════════════════════════════════ */

.questudy-past-questions-wrap .qpq-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}

.questudy-past-questions-wrap .qpq-filter-card {
  background: var(--qp-glass);
  backdrop-filter: blur(var(--qp-glass-blur));
  -webkit-backdrop-filter: blur(var(--qp-glass-blur));
  border: 1px solid var(--qp-glass-border);
  border-radius: var(--qp-r);
  padding: 16px 20px;
  flex: 1;
  min-width: 200px;
  box-shadow: var(--qp-sh);
  transition: border-color var(--qp-tr);
}

.questudy-past-questions-wrap .qpq-filter-card:hover {
  border-color: var(--p-mid);
}

.questudy-past-questions-wrap .qpq-filter-card label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--p-primary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.questudy-past-questions-wrap .qpq-filter-card select,
.questudy-past-questions-wrap .qpq-filter-card input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--p-border);
  border-radius: var(--qp-r-sm);
  font-size: .9rem;
  font-family: var(--qp-font);
  color: #0f172a;
  background: rgba(255,255,255,.7);
  outline: none;
  transition: border-color var(--qp-tr), box-shadow var(--qp-tr);
}

.questudy-past-questions-wrap .qpq-filter-card select:focus,
.questudy-past-questions-wrap .qpq-filter-card input:focus {
  border-color: var(--p-primary);
  box-shadow: 0 0 0 3px var(--p-glow);
}

/* Segmented control */
.questudy-past-questions-wrap .qpq-mode-selector {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  background: var(--qp-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--qp-glass-border);
  padding: 4px;
  border-radius: var(--qp-r-pill);
  width: fit-content;
  box-shadow: var(--qp-sh);
}

.questudy-past-questions-wrap .qpq-mode-btn {
  padding: 10px 24px;
  border: none;
  border-radius: var(--qp-r-pill);
  background: transparent;
  color: #64748b;
  font-size: .88rem;
  font-weight: 600;
  font-family: var(--qp-font);
  cursor: pointer;
  transition: all var(--qp-tr);
}

.questudy-past-questions-wrap .qpq-mode-btn:hover { color: var(--p-primary); }

.questudy-past-questions-wrap .qpq-mode-btn.active {
  background: var(--p-primary);
  color: #fff;
  box-shadow: 0 2px 12px var(--p-glow);
}

/* Paper card */
.questudy-past-questions-wrap .qpq-paper-card {
  background: var(--qp-glass);
  backdrop-filter: blur(var(--qp-glass-blur));
  -webkit-backdrop-filter: blur(var(--qp-glass-blur));
  border: 1px solid var(--qp-glass-border);
  border-left: 4px solid var(--p-primary);
  border-radius: 0 var(--qp-r) var(--qp-r) 0;
  padding: 20px 24px;
  margin-bottom: 14px;
  box-shadow: var(--qp-sh);
  transition: all var(--qp-tr);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.questudy-past-questions-wrap .qpq-paper-card:hover {
  transform: translateX(4px);
  box-shadow: var(--qp-sh-md);
  border-left-color: var(--p-mid);
}

.questudy-past-questions-wrap .qpq-paper-info h3,
.questudy-past-questions-wrap .qpq-paper-info .qpq-paper-title {
  font-size: .98rem;
  font-weight: 600;
  margin: 0 0 3px;
  letter-spacing: -0.01em;
}

.questudy-past-questions-wrap .qpq-paper-info p,
.questudy-past-questions-wrap .qpq-paper-info .qpq-paper-meta {
  font-size: .82rem;
  color: #64748b;
  margin: 0;
}

.questudy-past-questions-wrap .qpq-paper-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 14px;
}

.questudy-past-questions-wrap .qpq-empty-state { text-align: center; padding: 64px 24px; }

.questudy-past-questions-wrap .qpq-empty-state .qpq-empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: var(--qp-glass);
  border: 2px dashed var(--p-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.questudy-past-questions-wrap .qpq-empty-state h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; }
.questudy-past-questions-wrap .qpq-empty-state p { color: #64748b; font-size: .92rem; margin: 0; }

@media (max-width: 768px) {
  .questudy-past-questions-wrap .qpq-filter-row { flex-direction: column; }
  .questudy-past-questions-wrap .qpq-mode-selector { width: 100%; }
  .questudy-past-questions-wrap .qpq-mode-btn { flex: 1; text-align: center; padding: 10px 12px; font-size: .82rem; }
  .questudy-past-questions-wrap .qpq-paper-card { flex-direction: column; align-items: flex-start; }
}


/* ══════════════════════════════════════════════════════════════
   3. COMPETITION ARENA
   ══════════════════════════════════════════════════════════════ */

.qca-wrap .qca-nav {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  background: var(--qp-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--qp-glass-border);
  padding: 4px;
  border-radius: var(--qp-r-sm);
  box-shadow: var(--qp-sh);
}

.qca-wrap .qca-nav-btn {
  padding: 10px 20px;
  border: none;
  border-radius: var(--qp-r-xs);
  background: transparent;
  color: #64748b;
  font-size: .88rem;
  font-weight: 600;
  font-family: var(--qp-font);
  cursor: pointer;
  transition: all var(--qp-tr);
}

.qca-wrap .qca-nav-btn:hover { color: var(--p-primary); }

.qca-wrap .qca-nav-btn.active {
  background: var(--p-primary);
  color: #fff;
  box-shadow: 0 2px 12px var(--p-glow);
}

.qca-wrap .qca-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.qca-wrap .qca-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--qp-r-pill);
  font-size: .82rem;
  font-weight: 600;
  background: var(--qp-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--qp-glass-border);
}

.qca-wrap .qca-stat-pill.rose { color: var(--p-primary); }
.qca-wrap .qca-stat-pill.orange { color: #F97316; }
.qca-wrap .qca-stat-pill.green { color: #16A34A; }
.qca-wrap .qca-stat-pill.amber { color: #F59E0B; }

.qca-wrap .qca-match-card {
  background: var(--qp-glass);
  backdrop-filter: blur(var(--qp-glass-blur));
  -webkit-backdrop-filter: blur(var(--qp-glass-blur));
  border: 1.5px solid var(--qp-glass-border);
  border-radius: var(--qp-r);
  padding: 24px;
  margin-bottom: 14px;
  box-shadow: var(--qp-sh);
  transition: all var(--qp-tr);
  position: relative;
}

.qca-wrap .qca-match-card::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  inset: -1px;
  border-radius: var(--qp-r);
  background: linear-gradient(135deg, var(--p-primary), var(--p-accent));
  z-index: -1;
  opacity: 0;
  transition: opacity var(--qp-tr);
}

.qca-wrap .qca-match-card:hover {
  box-shadow: var(--qp-sh-lg);
  transform: translateY(-2px);
}

.qca-wrap .qca-match-card:hover::before { opacity: .15; }

.qca-wrap .qca-match-card .qca-match-players {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.qca-wrap .qca-match-card .qca-vs {
  font-size: .82rem;
  font-weight: 800;
  color: var(--p-primary);
  background: var(--p-glow);
  padding: 6px 16px;
  border-radius: var(--qp-r-pill);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.qca-wrap .qca-online-dot {
  width: 9px;
  height: 9px;
  background: #22C55E;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  box-shadow: 0 0 8px rgba(34,197,94,.4);
  animation: qca-pulse 2s ease-in-out infinite;
}

@keyframes qca-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(34,197,94,.4); }
  50% { box-shadow: 0 0 16px rgba(34,197,94,.2); }
}

.qca-wrap .qca-player-avatar {
  width: 42px;
  height: 42px;
  border-radius: var(--qp-r-sm);
  background: linear-gradient(135deg, var(--p-primary), var(--p-mid));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--p-glow);
}

.qca-wrap .qca-player-name { font-weight: 600; font-size: .92rem; }
.qca-wrap .qca-player-rank { font-size: .8rem; color: #64748b; }


/* ══════════════════════════════════════════════════════════════
   4. TEXTBOOK LIBRARY
   ══════════════════════════════════════════════════════════════ */

.tbs-wrap .tbs-search-bar {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 520px;
  margin-top: 24px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--qp-r-pill);
  padding: 5px;
  display: flex;
  transition: border-color var(--qp-tr);
}

.tbs-wrap .tbs-search-bar:focus-within {
  border-color: rgba(255,255,255,.35);
}

.tbs-wrap .tbs-search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 20px;
  font-size: .92rem;
  font-family: var(--qp-font);
  color: #fff;
  outline: none;
}

.tbs-wrap .tbs-search-bar input::placeholder { color: rgba(255,255,255,.5); }

.tbs-wrap .tbs-search-bar button {
  padding: 12px 28px;
  background: #fff;
  color: var(--p-primary);
  border: none;
  border-radius: var(--qp-r-pill);
  font-size: .88rem;
  font-weight: 700;
  font-family: var(--qp-font);
  cursor: pointer;
  transition: all var(--qp-tr);
}

.tbs-wrap .tbs-search-bar button:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

.tbs-wrap .tbs-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  gap: 28px;
}

.tbs-wrap .tbs-sidebar { width: 260px; flex-shrink: 0; }

.tbs-wrap .tbs-filter-panel {
  background: var(--qp-glass);
  backdrop-filter: blur(var(--qp-glass-blur));
  -webkit-backdrop-filter: blur(var(--qp-glass-blur));
  border: 1px solid var(--qp-glass-border);
  border-radius: var(--qp-r);
  padding: 22px;
  box-shadow: var(--qp-sh);
}

.tbs-wrap .tbs-filter-panel h3,
.tbs-wrap .tbs-filter-panel .tbs-filter-title {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--p-primary);
  margin: 0 0 16px;
}

.tbs-wrap .tbs-filter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
  cursor: pointer;
  transition: color var(--qp-tr);
  font-size: .88rem;
  color: #334155;
}

.tbs-wrap .tbs-filter-item:last-child { border-bottom: none; }
.tbs-wrap .tbs-filter-item:hover { color: var(--p-primary); }
.tbs-wrap .tbs-filter-item.active { color: var(--p-primary); font-weight: 600; }

.tbs-wrap .tbs-main { flex: 1; min-width: 0; }

.tbs-wrap .tbs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.tbs-wrap .tbs-book-card {
  background: var(--qp-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--qp-glass-border);
  border-radius: var(--qp-r);
  overflow: hidden;
  transition: transform var(--qp-tr-spring), box-shadow var(--qp-tr);
}

.tbs-wrap .tbs-book-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--qp-sh-xl);
}

.tbs-wrap .tbs-book-cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, var(--p-dark), var(--p-primary), var(--p-mid));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.tbs-wrap .tbs-book-cover::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 40%, rgba(0,0,0,.12) 100%);
}

.tbs-wrap .tbs-book-cover::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: rgba(0,0,0,.15);
}

.tbs-wrap .tbs-book-cover-icon {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.15);
}

.tbs-wrap .tbs-book-info { padding: 16px; }

.tbs-wrap .tbs-book-info h4,
.tbs-wrap .tbs-book-info .tbs-book-title {
  font-size: .9rem;
  font-weight: 600;
  margin: 0 0 3px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.tbs-wrap .tbs-book-info p,
.tbs-wrap .tbs-book-info .tbs-book-meta {
  font-size: .78rem;
  color: #64748b;
  margin: 0 0 12px;
}

@media (max-width: 768px) {
  .tbs-wrap .tbs-container { flex-direction: column; }
  .tbs-wrap .tbs-sidebar { width: 100%; }
  .tbs-wrap .tbs-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
}

@media (max-width: 480px) {
  .tbs-wrap .tbs-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tbs-wrap .tbs-search-bar { flex-direction: column; border-radius: var(--qp-r); }
}


/* ══════════════════════════════════════════════════════════════
   5. PRICING
   ══════════════════════════════════════════════════════════════ */

.sub-wrap .sub-toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 36px;
}

.sub-wrap .sub-toggle-label { font-size: .9rem; font-weight: 600; color: #94a3b8; transition: color var(--qp-tr); }
.sub-wrap .sub-toggle-label.active { color: var(--p-primary); }

.sub-wrap .sub-toggle {
  width: 50px;
  height: 28px;
  background: #CBD5E1;
  border-radius: 14px;
  position: relative;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background var(--qp-tr);
}

.sub-wrap .sub-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--qp-tr-spring);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.sub-wrap .sub-toggle.active { background: var(--p-primary); }
.sub-wrap .sub-toggle.active::after { transform: translateX(22px); }

.sub-wrap .sub-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
  align-items: start;
}

/* Plan card — glass with gradient border on featured */
.sub-wrap .sub-plan-card {
  background: var(--qp-glass);
  backdrop-filter: blur(var(--qp-glass-blur));
  -webkit-backdrop-filter: blur(var(--qp-glass-blur));
  border: 1.5px solid var(--qp-glass-border);
  border-radius: var(--qp-r);
  padding: 36px 28px;
  text-align: center;
  transition: all var(--qp-tr);
  position: relative;
}

.sub-wrap .sub-plan-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--qp-sh-xl);
}

.sub-wrap .sub-plan-card.featured {
  border: 2px solid transparent;
  background-image: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)),
    linear-gradient(135deg, var(--p-primary), var(--p-accent));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--qp-sh-lg), 0 0 40px var(--p-glow);
}

.sub-wrap .sub-plan-badge {
  display: inline-block;
  padding: 5px 16px;
  background: linear-gradient(135deg, var(--p-primary), var(--p-accent));
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  border-radius: var(--qp-r-pill);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px var(--p-glow);
}

.sub-wrap .sub-plan-name {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.sub-wrap .sub-plan-price { margin-bottom: 28px; }

.sub-wrap .sub-plan-price .sub-price-amount {
  font-size: 2.8rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--p-dark), var(--p-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.sub-wrap .sub-plan-price .sub-price-period {
  font-size: .85rem;
  color: #94a3b8;
  margin-left: 4px;
  -webkit-text-fill-color: initial;
}

.sub-wrap .sub-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  text-align: left;
}

.sub-wrap .sub-plan-features li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
  font-size: .88rem;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sub-wrap .sub-plan-features li:last-child { border-bottom: none; }

.sub-wrap .sub-plan-features .sub-check {
  width: 22px;
  height: 22px;
  background: rgba(34,197,94,.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #16A34A;
  font-size: .72rem;
  font-weight: 700;
}

.sub-wrap .sub-save-badge {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  border-radius: var(--qp-r-pill);
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(34,197,94,.2);
}

/* Comparison table */
.sub-wrap .sub-comparison {
  background: var(--qp-glass);
  backdrop-filter: blur(var(--qp-glass-blur));
  -webkit-backdrop-filter: blur(var(--qp-glass-blur));
  border: 1px solid var(--qp-glass-border);
  border-radius: var(--qp-r);
  overflow: hidden;
  box-shadow: var(--qp-sh);
}

.sub-wrap .sub-comparison h2,
.sub-wrap .sub-comparison .sub-comparison-title {
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
  padding: 24px;
  margin: 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.sub-wrap .sub-comparison table { width: 100%; border-collapse: collapse; }

.sub-wrap .sub-comparison th,
.sub-wrap .sub-comparison td {
  padding: 14px 20px;
  text-align: left;
  font-size: .88rem;
  border-bottom: 1px solid rgba(0,0,0,.04);
}

.sub-wrap .sub-comparison th {
  font-weight: 700;
  background: var(--p-glow);
}

.sub-wrap .sub-comparison tr:last-child td { border-bottom: none; }

@media (max-width: 768px) {
  .sub-wrap .sub-plans { grid-template-columns: 1fr; }
  .sub-wrap .sub-comparison { overflow-x: auto; }
}

@media (max-width: 480px) {
  .sub-wrap .sub-plan-card { padding: 28px 22px; }
  .sub-wrap .sub-price-amount { font-size: 2.2rem; }
}


/* ══════════════════════════════════════════════════════════════
   6. DASHBOARD
   ══════════════════════════════════════════════════════════════ */

.qsd-wrap .qsd-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
}

.qsd-wrap .qsd-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.qsd-wrap .qsd-stat-card {
  background: var(--qp-glass);
  backdrop-filter: blur(var(--qp-glass-blur));
  -webkit-backdrop-filter: blur(var(--qp-glass-blur));
  border: 1px solid var(--qp-glass-border);
  border-left: 3px solid var(--p-mid);
  border-radius: var(--qp-r);
  padding: 24px;
  box-shadow: var(--qp-sh);
  transition: transform var(--qp-tr), box-shadow var(--qp-tr);
}

.qsd-wrap .qsd-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--qp-sh-md);
}

.qsd-wrap .qsd-stat-card.purple { border-left-color: #818CF8; }
.qsd-wrap .qsd-stat-card.blue { border-left-color: #60A5FA; }
.qsd-wrap .qsd-stat-card.amber { border-left-color: #FBBF24; }
.qsd-wrap .qsd-stat-card.green { border-left-color: #34D399; }

.qsd-wrap .qsd-stat-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  margin-bottom: 8px;
}

.qsd-wrap .qsd-stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.qsd-wrap .qsd-stat-change { font-size: .78rem; font-weight: 600; margin-top: 8px; }
.qsd-wrap .qsd-stat-change.up { color: #16A34A; }
.qsd-wrap .qsd-stat-change.down { color: #EF4444; }

.qsd-wrap .qsd-goal-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: var(--qp-glass);
  backdrop-filter: blur(var(--qp-glass-blur));
  -webkit-backdrop-filter: blur(var(--qp-glass-blur));
  border: 1px solid var(--qp-glass-border);
  border-radius: var(--qp-r);
  padding: 28px;
  margin-bottom: 28px;
  box-shadow: var(--qp-sh);
}

.qsd-wrap .qsd-ring-svg { width: 120px; height: 120px; flex-shrink: 0; }
.qsd-wrap .qsd-ring-bg { fill: none; stroke: var(--p-border); stroke-width: 8; }

.qsd-wrap .qsd-ring-progress {
  fill: none;
  stroke: url(#qsd-ring-gradient);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 339.292;
  stroke-dashoffset: 339.292;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: qsd-ring 1.8s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes qsd-ring { to { stroke-dashoffset: var(--qsd-ring-offset, 169.646); } }

.qsd-wrap .qsd-ring-info h3,
.qsd-wrap .qsd-ring-info .qsd-ring-title { font-size: 1.02rem; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; }
.qsd-wrap .qsd-ring-info p,
.qsd-wrap .qsd-ring-info .qsd-ring-desc { font-size: .88rem; color: #64748b; margin: 0; line-height: 1.55; }

.qsd-wrap .qsd-timeline {
  background: var(--qp-glass);
  backdrop-filter: blur(var(--qp-glass-blur));
  -webkit-backdrop-filter: blur(var(--qp-glass-blur));
  border: 1px solid var(--qp-glass-border);
  border-radius: var(--qp-r);
  padding: 24px;
  margin-bottom: 28px;
  box-shadow: var(--qp-sh);
}

.qsd-wrap .qsd-timeline h3,
.qsd-wrap .qsd-timeline .qsd-timeline-title { font-size: 1.02rem; font-weight: 700; margin: 0 0 18px; letter-spacing: -0.01em; }

.qsd-wrap .qsd-timeline-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
}

.qsd-wrap .qsd-timeline-item:last-child { border-bottom: none; }

.qsd-wrap .qsd-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
  position: relative;
}

.qsd-wrap .qsd-timeline-dot::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% + 14px);
  background: rgba(0,0,0,.06);
}

.qsd-wrap .qsd-timeline-item:last-child .qsd-timeline-dot::after { display: none; }

.qsd-wrap .qsd-timeline-dot.purple { background: #818CF8; box-shadow: 0 0 8px rgba(129,140,248,.3); }
.qsd-wrap .qsd-timeline-dot.blue { background: #60A5FA; box-shadow: 0 0 8px rgba(96,165,250,.3); }
.qsd-wrap .qsd-timeline-dot.amber { background: #FBBF24; box-shadow: 0 0 8px rgba(251,191,36,.3); }
.qsd-wrap .qsd-timeline-dot.green { background: #34D399; box-shadow: 0 0 8px rgba(52,211,153,.3); }
.qsd-wrap .qsd-timeline-dot.rose { background: #FB7185; box-shadow: 0 0 8px rgba(251,113,133,.3); }

.qsd-wrap .qsd-timeline-content h4,
.qsd-wrap .qsd-timeline-content .qsd-timeline-item-title { font-size: .9rem; font-weight: 600; margin: 0 0 2px; }
.qsd-wrap .qsd-timeline-content p,
.qsd-wrap .qsd-timeline-content .qsd-timeline-item-desc { font-size: .8rem; color: #64748b; margin: 0; }
.qsd-wrap .qsd-timeline-time { font-size: .75rem; color: #94a3b8; white-space: nowrap; margin-left: auto; }

.qsd-wrap .qsd-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.qsd-wrap .qsd-action-card {
  border-radius: var(--qp-r);
  padding: 24px;
  color: #fff;
  transition: transform var(--qp-tr-spring), box-shadow var(--qp-tr);
  cursor: pointer;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
}

.qsd-wrap .qsd-action-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12), transparent 60%);
}

.qsd-wrap .qsd-action-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--qp-sh-xl); }

.qsd-wrap .qsd-action-card.grad-1 { background: linear-gradient(135deg, #6366F1, #818CF8); }
.qsd-wrap .qsd-action-card.grad-2 { background: linear-gradient(135deg, #0EA5E9, #38BDF8); }
.qsd-wrap .qsd-action-card.grad-3 { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
.qsd-wrap .qsd-action-card.grad-4 { background: linear-gradient(135deg, #10B981, #34D399); }
.qsd-wrap .qsd-action-card.grad-5 { background: linear-gradient(135deg, #F43F5E, #FB7185); }
.qsd-wrap .qsd-action-card.grad-6 { background: linear-gradient(135deg, #8B5CF6, #A78BFA); }
.qsd-wrap .qsd-action-card.grad-7 { background: linear-gradient(135deg, #EC4899, #F472B6); }

.qsd-wrap .qsd-action-card h4,
.qsd-wrap .qsd-action-card .qsd-action-title { font-size: .95rem; font-weight: 700; margin: 0 0 4px; position: relative; z-index: 1; }
.qsd-wrap .qsd-action-card p,
.qsd-wrap .qsd-action-card .qsd-action-desc { font-size: .8rem; opacity: .85; margin: 0; line-height: 1.45; position: relative; z-index: 1; }

.qsd-wrap .qsd-achievements {
  background: var(--qp-glass);
  backdrop-filter: blur(var(--qp-glass-blur));
  -webkit-backdrop-filter: blur(var(--qp-glass-blur));
  border: 1px solid var(--qp-glass-border);
  border-radius: var(--qp-r);
  padding: 24px;
  margin-bottom: 28px;
  box-shadow: var(--qp-sh);
}

.qsd-wrap .qsd-achievements h3,
.qsd-wrap .qsd-achievements .qsd-achievements-title { font-size: 1.02rem; font-weight: 700; margin: 0 0 18px; letter-spacing: -0.01em; }

.qsd-wrap .qsd-achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 14px;
}

.qsd-wrap .qsd-badge {
  text-align: center;
  padding: 18px 10px;
  border-radius: var(--qp-r-sm);
  border: 1px solid var(--qp-glass-border);
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--qp-tr);
}

.qsd-wrap .qsd-badge:hover {
  border-color: var(--p-accent);
  box-shadow: 0 0 20px var(--p-glow);
  transform: translateY(-2px);
}

.qsd-wrap .qsd-badge-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  background: linear-gradient(135deg, #FBBF24, #F59E0B);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(251,191,36,.25);
}

.qsd-wrap .qsd-badge-name { font-size: .8rem; font-weight: 600; margin: 0; }
.qsd-wrap .qsd-badge-desc { font-size: .72rem; color: #64748b; margin: 4px 0 0; }
.qsd-wrap .qsd-section-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 18px; letter-spacing: -0.01em; }

@media (max-width: 768px) {
  .qsd-wrap .qsd-stats-row { grid-template-columns: 1fr 1fr; }
  .qsd-wrap .qsd-goal-ring { flex-direction: column; text-align: center; }
  .qsd-wrap .qsd-actions-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .qsd-wrap .qsd-stats-row { grid-template-columns: 1fr; }
  .qsd-wrap .qsd-stat-value { font-size: 1.4rem; }
  .qsd-wrap .qsd-achievements-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}


/* ══════════════════════════════════════════════════════════════
   7. LEADERBOARD
   ══════════════════════════════════════════════════════════════ */

.questudy-leaderboard-wrap .qlb-filter-form {
  background: var(--qp-glass);
  backdrop-filter: blur(var(--qp-glass-blur));
  -webkit-backdrop-filter: blur(var(--qp-glass-blur));
  border: 1px solid var(--qp-glass-border);
  border-radius: var(--qp-r);
  padding: 20px;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  box-shadow: var(--qp-sh);
}

.questudy-leaderboard-wrap .qlb-filter-group { flex: 1; min-width: 150px; }

.questudy-leaderboard-wrap .qlb-filter-group label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--p-primary);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.questudy-leaderboard-wrap .qlb-filter-group select,
.questudy-leaderboard-wrap .qlb-filter-group input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--p-border);
  border-radius: var(--qp-r-sm);
  font-size: .88rem;
  font-family: var(--qp-font);
  color: #0f172a;
  background: rgba(255,255,255,.7);
  outline: none;
  transition: border-color var(--qp-tr), box-shadow var(--qp-tr);
}

.questudy-leaderboard-wrap .qlb-filter-group select:focus,
.questudy-leaderboard-wrap .qlb-filter-group input:focus {
  border-color: var(--p-primary);
  box-shadow: 0 0 0 3px var(--p-glow);
}

.questudy-leaderboard-wrap .qlb-table-wrapper {
  background: var(--qp-glass);
  backdrop-filter: blur(var(--qp-glass-blur));
  -webkit-backdrop-filter: blur(var(--qp-glass-blur));
  border: 1px solid var(--qp-glass-border);
  border-radius: var(--qp-r);
  overflow: hidden;
  box-shadow: var(--qp-sh);
}

.questudy-leaderboard-wrap .qlb-table { width: 100%; border-collapse: collapse; }

.questudy-leaderboard-wrap .qlb-table thead th {
  background: linear-gradient(135deg, var(--p-dark), var(--p-primary));
  color: #fff;
  padding: 16px 20px;
  text-align: left;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.questudy-leaderboard-wrap .qlb-table tbody td {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,0,0,.04);
  font-size: .9rem;
}

.questudy-leaderboard-wrap .qlb-table tbody tr:last-child td { border-bottom: none; }

.questudy-leaderboard-wrap .qlb-table tbody tr {
  transition: background var(--qp-tr-fast);
}

.questudy-leaderboard-wrap .qlb-table tbody tr:hover { background: var(--p-glow); }

.questudy-leaderboard-wrap .qlb-rank { font-weight: 800; font-size: .95rem; }
.questudy-leaderboard-wrap .qlb-rank.gold { color: #CA8A04; }
.questudy-leaderboard-wrap .qlb-rank.silver { color: #9CA3AF; }
.questudy-leaderboard-wrap .qlb-rank.bronze { color: #D97706; }

.questudy-leaderboard-wrap .qlb-table tbody tr.qlb-row-gold { background: rgba(202,138,4,.04); }
.questudy-leaderboard-wrap .qlb-table tbody tr.qlb-row-silver { background: rgba(156,163,175,.04); }
.questudy-leaderboard-wrap .qlb-table tbody tr.qlb-row-bronze { background: rgba(217,119,6,.04); }

.questudy-leaderboard-wrap .qlb-user-cell { display: flex; align-items: center; gap: 12px; }

.questudy-leaderboard-wrap .qlb-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--qp-r-sm);
  background: linear-gradient(135deg, var(--p-primary), var(--p-mid));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--p-glow);
}

.questudy-leaderboard-wrap .qlb-user-name { font-weight: 600; }
.questudy-leaderboard-wrap .qlb-user-school { font-size: .75rem; color: #64748b; }
.questudy-leaderboard-wrap .qlb-score { font-weight: 700; color: var(--p-primary); }

.questudy-leaderboard-wrap .qlb-empty { text-align: center; padding: 64px 24px; }

.questudy-leaderboard-wrap .qlb-empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: var(--qp-glass);
  border: 2px dashed var(--p-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.questudy-leaderboard-wrap .qlb-empty h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; }
.questudy-leaderboard-wrap .qlb-empty p { color: #64748b; font-size: .92rem; margin: 0; }

@media (max-width: 768px) {
  .questudy-leaderboard-wrap .qlb-filter-form { flex-direction: column; }
  .questudy-leaderboard-wrap .qlb-table-wrapper { overflow-x: auto; }
  .questudy-leaderboard-wrap .qlb-table { min-width: 560px; }
}


/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .questudy-generator-wrap,
  .questudy-past-questions-wrap,
  .qca-wrap,
  .tbs-wrap,
  .sub-wrap,
  .qsd-wrap,
  .questudy-leaderboard-wrap {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto;
  }

  .qca-wrap .qca-online-dot,
  .qsd-wrap .qsd-ring-progress,
  .qsd-wrap .qsd-timeline-dot,
  .questudy-generator-wrap .qg-card:hover,
  .questudy-past-questions-wrap .qpq-paper-card:hover,
  .qca-wrap .qca-match-card:hover,
  .tbs-wrap .tbs-book-card:hover,
  .sub-wrap .sub-plan-card:hover,
  .qsd-wrap .qsd-stat-card:hover,
  .qsd-wrap .qsd-action-card:hover,
  .qsd-wrap .qsd-badge:hover {
    transform: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION
   ══════════════════════════════════════════════════════════════ */

.qp-mob-bottom {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-top: 1px solid rgba(0,0,0,.06);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 24px rgba(0,0,0,.06);
}

.qp-mb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  color: #94A3B8;
  text-decoration: none;
  padding: 6px 0;
  flex: 1;
  transition: color var(--qp-tr);
  position: relative;
}

.qp-mb-item svg {
  transition: transform var(--qp-tr-spring);
  stroke-width: 1.8;
}

.qp-mb-item.active { color: var(--p-primary, #6366F1); }
.qp-mb-item.active svg { transform: scale(1.18) translateY(-2px); stroke-width: 2.2; }

.qp-mb-item.active::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  background: var(--p-primary, #6366F1);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 8px var(--p-glow, rgba(99,102,241,.25));
}

.qp-mb-item:hover { color: var(--p-primary, #6366F1); }
.qp-mb-item:hover svg { transform: scale(1.1); }

@media (max-width: 768px) {
  .qp-mob-bottom { display: flex; }
  .qp-page-premium { padding-bottom: 72px !important; }
  .questudy-generator-wrap.qp-page-premium,
  .questudy-past-questions-wrap.qp-page-premium,
  .qca-wrap.qp-page-premium,
  .tbs-wrap.qp-page-premium,
  .sub-wrap.qp-page-premium,
  .qsd-wrap.qp-page-premium,
  .questudy-leaderboard-wrap.qp-page-premium {
    padding-bottom: 72px !important;
  }
}

body.qs-dark .qp-mob-bottom,
body.dark .qp-mob-bottom,
body.night .qp-mob-bottom {
  background: rgba(15,23,42,.88);
  border-top-color: rgba(255,255,255,.06);
  box-shadow: 0 -4px 24px rgba(0,0,0,.3);
}

body.qs-dark .qp-mb-item,
body.dark .qp-mb-item,
body.night .qp-mb-item { color: #475569; }

body.qs-dark .qp-mb-item.active,
body.dark .qp-mb-item.active,
body.night .qp-mb-item.active { color: #818CF8; }

body.qs-dark .qp-mb-item.active::before,
body.dark .qp-mb-item.active::before,
body.night .qp-mb-item.active::before {
  background: #818CF8;
  box-shadow: 0 2px 8px rgba(129,140,248,.25);
}

@media (prefers-reduced-motion: reduce) {
  .qp-mb-item svg { transition: none; }
}