/* ============================================================
   Study Hub By J  -  study.html "Planner look" (light theme)
   Loaded ONLY on study.html, after styles.css + theme-light.css.
   Every rule is scoped to html[data-theme="light"], so the dark
   theme (the toggle) is completely untouched.
   Tokens match planner.html.
   ============================================================ */

html[data-theme="light"] {
  --sl-bg: #f3f6fb;
  --sl-card: #ffffff;
  --sl-soft: #f1f4f9;
  --sl-soft2: #e9eef6;
  --sl-ink: #14213d;
  --sl-text: #1e293b;
  --sl-muted: #64748b;
  --sl-faint: #94a3b8;
  --sl-line: #e3e8f0;
  --sl-line2: #d3dbe7;
  --sl-brand: #2c5bf0;
  --sl-brand-d: #1f45c7;
  --sl-brand-soft: #e8eefe;
  --sl-mint: #12a46b;
  --sl-shadow: 0 1px 2px rgba(20,33,61,.05), 0 6px 20px rgba(20,33,61,.06);
  --sl-shadow-hover: 0 2px 4px rgba(20,33,61,.06), 0 14px 32px rgba(20,33,61,.10);
  /* re-point the site's own variables */
  --bg: #f3f6fb;
  --text: #1e293b;
  --muted: #64748b;
  --blue: #2c5bf0;
  --cyan: #2c5bf0;
  --line: #e3e8f0;
  --shadow: 0 1px 2px rgba(20,33,61,.05), 0 6px 20px rgba(20,33,61,.06);
}

/* ---------- base ---------- */
html[data-theme="light"] body {
  background: var(--sl-bg) !important;
  color: var(--sl-text) !important;
  font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
html[data-theme="light"] body button,
html[data-theme="light"] body input,
html[data-theme="light"] body select,
html[data-theme="light"] body textarea { font-family: inherit !important; }
html[data-theme="light"] body .noise,
html[data-theme="light"] body .glow,
html[data-theme="light"] body::before { display: none !important; }
html[data-theme="light"] body h1,
html[data-theme="light"] body h2,
html[data-theme="light"] body h3,
html[data-theme="light"] body h4 { color: var(--sl-ink) !important; letter-spacing: -.025em; }
html[data-theme="light"] body h2 span,
html[data-theme="light"] body h1 span { color: var(--sl-brand) !important; -webkit-text-fill-color: currentColor; background: none !important; }
html[data-theme="light"] body .section-label { color: var(--sl-brand) !important; }
html[data-theme="light"] body .section-subtitle,
html[data-theme="light"] body .selection-summary { color: var(--sl-muted) !important; }
html[data-theme="light"] body :focus-visible { outline: 3px solid rgba(44,91,240,.4); outline-offset: 2px; }
html[data-theme="light"] body .progress-bar { background: var(--sl-brand) !important; }

/* ---------- header ---------- */
html[data-theme="light"] body .site-header {
  background: rgba(243,246,251,.88) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sl-line) !important;
  box-shadow: none !important;
}
html[data-theme="light"] body .brand { color: var(--sl-ink) !important; }
html[data-theme="light"] body .brand span,
html[data-theme="light"] body .brand-mark { color: var(--sl-brand) !important; }
html[data-theme="light"] body .nav-links a { color: var(--sl-muted) !important; font-weight: 600; }
html[data-theme="light"] body .nav-links a:hover { color: var(--sl-ink) !important; }
html[data-theme="light"] body .menu-btn { color: var(--sl-ink) !important; background: #fff !important; border: 1px solid var(--sl-line2) !important; }
@media (max-width: 900px) {
  html[data-theme="light"] body .nav-links { background: #fff !important; border: 1px solid var(--sl-line) !important; box-shadow: var(--sl-shadow-hover) !important; }
}
html[data-theme="light"] body .news-bell { background: #fff !important; border-color: var(--sl-line2) !important; color: var(--sl-ink) !important; }
html[data-theme="light"] body .news-bell .dot { box-shadow: 0 0 0 2px #fff !important; }

/* ---------- hero ---------- */
html[data-theme="light"] body .hero-badge { background: #fff !important; border: 1px solid var(--sl-line) !important; color: var(--sl-ink) !important; box-shadow: none !important; }
html[data-theme="light"] body .study-hero .eyebrow { color: var(--sl-muted) !important; }
html[data-theme="light"] body .study-hero h1 { color: var(--sl-ink) !important; }
html[data-theme="light"] body .study-hero h1 span { color: var(--sl-brand) !important; text-shadow: none !important; filter: none !important; }
html[data-theme="light"] body .study-hero .hero-description { color: var(--sl-muted) !important; }
html[data-theme="light"] body .study-hero .hero-description b { color: var(--sl-ink) !important; }
html[data-theme="light"] body .hero-hint { color: var(--sl-muted) !important; }
html[data-theme="light"] body .hero-hint b { color: var(--sl-brand) !important; }
html[data-theme="light"] body .live-learners {
  background: #fff !important; border: 1px solid var(--sl-line) !important; box-shadow: none !important; color: var(--sl-muted) !important;
}
html[data-theme="light"] body .live-learners strong { color: var(--sl-ink) !important; }

/* main CTA: solid brand button like the planner's primary action */
html[data-theme="light"] body .study-hero .study-path-btn {
  background: var(--sl-brand) !important; border: 0 !important; border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(44,91,240,.30) !important;
}
html[data-theme="light"] body .study-hero .study-path-btn:hover { background: var(--sl-brand-d) !important; }
html[data-theme="light"] body .study-hero .study-path-btn::before { display: none !important; }
html[data-theme="light"] body .study-hero .study-path-icon { background: rgba(255,255,255,.18) !important; border-color: rgba(255,255,255,.3) !important; color: #fff !important; }
html[data-theme="light"] body .study-hero .study-path-text small { color: rgba(255,255,255,.82) !important; }
html[data-theme="light"] body .study-hero .study-path-text strong { color: #fff !important; text-shadow: none !important; }
html[data-theme="light"] body .study-hero .study-path-arrow { color: #fff !important; }

/* quick links */
html[data-theme="light"] body .hero-ql {
  background: #fff !important; border: 1px solid var(--sl-line2) !important; color: var(--sl-ink) !important; box-shadow: none !important; border-radius: 12px !important;
}
html[data-theme="light"] body .hero-ql:hover { border-color: var(--sl-brand) !important; color: var(--sl-brand) !important; }
html[data-theme="light"] body .hero-ql.premium-ql {
  background: #fff6dc !important; border-color: #f4d58a !important; color: #7a5200 !important; animation: none !important;
}
html[data-theme="light"] body .hero-ql.planner-ql {
  background: var(--sl-brand) !important; border-color: var(--sl-brand) !important; color: #fff !important;
  box-shadow: 0 10px 26px rgba(44,91,240,.32), 0 0 0 4px rgba(44,91,240,.12) !important;
}
html[data-theme="light"] body .hero-ql.planner-ql:hover { background: var(--sl-brand-d) !important; color: #fff !important; }
html[data-theme="light"] body .hero-ql .gpa-new-badge { background: var(--sl-mint) !important; color: #fff !important; }
html[data-theme="light"] body .gpa-pill { background: var(--sl-brand-soft) !important; color: var(--sl-brand) !important; border: 1px solid #c3d2fc !important; box-shadow: none !important; }
html[data-theme="light"] body .gpa-pill.empty { background: #fff !important; color: var(--sl-ink) !important; border-color: var(--sl-line2) !important; }

html[data-theme="light"] body .whatsapp-channel-box {
  background: #fff !important; border: 1px solid var(--sl-line) !important; border-radius: 20px !important; box-shadow: var(--sl-shadow) !important;
}
html[data-theme="light"] body .whatsapp-channel-box h3 { color: var(--sl-ink) !important; }
html[data-theme="light"] body .whatsapp-channel-box p { color: var(--sl-muted) !important; }
html[data-theme="light"] body .whatsapp-icon { background: #e3f6ee !important; border-color: #bfe8d4 !important; }

/* ---------- shared card look (one family, like the planner) ---------- */
html[data-theme="light"] body .howitworks,
html[data-theme="light"] body .hw-lead,
html[data-theme="light"] body .nt-banner,
html[data-theme="light"] body .semester-navigator,
html[data-theme="light"] body .resource-panel,
html[data-theme="light"] body .notice-card,
html[data-theme="light"] body .feedback-card,
html[data-theme="light"] body .contact-card,
html[data-theme="light"] body .collection-empty-card {
  background: #fff !important; border: 1px solid var(--sl-line) !important; border-radius: 20px !important;
  box-shadow: var(--sl-shadow) !important; backdrop-filter: none !important;
}

/* how it works */
html[data-theme="light"] body .hiw-title { color: var(--sl-ink) !important; }
html[data-theme="light"] body .hiw-step { border-top-color: var(--sl-line) !important; }
html[data-theme="light"] body .hiw-num { background: var(--sl-brand) !important; color: #fff !important; }
html[data-theme="light"] body .hiw-step b { color: var(--sl-ink) !important; }
html[data-theme="light"] body .hiw-step small { color: var(--sl-muted) !important; }

/* streak + mini leaderboard (home-widgets.js) */
html[data-theme="light"] body .hw-streak { background: #fff1e6 !important; border: 1px solid #fbd0ad !important; color: #9a3412 !important; box-shadow: none !important; }
html[data-theme="light"] body .hw-streak small { color: #c2410c !important; }
html[data-theme="light"] body .hw-lead .hwl-top h4 { color: var(--sl-ink) !important; }
html[data-theme="light"] body .hw-when { background: var(--sl-brand-soft) !important; border-color: #c3d2fc !important; color: var(--sl-brand) !important; }
html[data-theme="light"] body .hw-rank { border-top-color: var(--sl-line) !important; }
html[data-theme="light"] body .hw-rank .nm { color: var(--sl-ink) !important; }
html[data-theme="light"] body .hw-rank.me .nm { color: var(--sl-brand) !important; }
html[data-theme="light"] body .hw-rank .pos { color: var(--sl-muted) !important; }
html[data-theme="light"] body .hw-rank .pt { color: #b45309 !important; }
html[data-theme="light"] body .hw-rank.pro { background: #fff8e6 !important; }
html[data-theme="light"] body .hw-rank.pro .nm { color: #7a5200 !important; }
html[data-theme="light"] body .hw-sub { color: #b45309 !important; }
html[data-theme="light"] body .hw-you { color: var(--sl-muted) !important; }
html[data-theme="light"] body .hw-rank .hav { background-image: none; background-color: var(--sl-brand) !important; color: #fff !important; }
html[data-theme="light"] body .hw-lead .hwl-all { color: var(--sl-brand) !important; border-top-color: var(--sl-line) !important; }
html[data-theme="light"] body .hw-empty { color: var(--sl-muted) !important; }

/* pinned notice ticker */
html[data-theme="light"] body .nt-cat { color: var(--sl-brand) !important; }
html[data-theme="light"] body .nt-title { color: var(--sl-ink) !important; }
html[data-theme="light"] body .nt-arrow { color: var(--sl-brand) !important; }
html[data-theme="light"] body .nt-ico { background: var(--sl-brand-soft) !important; border-color: #c3d2fc !important; }
html[data-theme="light"] body .nt-dot { background: var(--sl-line2) !important; }
html[data-theme="light"] body .nt-dot.on { background: var(--sl-brand) !important; }

/* ---------- leaderboard (top-gpa.js) ---------- */
html[data-theme="light"] body .tg-eyebrow { background: #fff6dc !important; border-color: #f4d58a !important; color: #8a5a00 !important; }
html[data-theme="light"] body .tg-title { color: var(--sl-ink) !important; }
html[data-theme="light"] body .tg-sub { color: var(--sl-muted) !important; }
html[data-theme="light"] body .tg-row { background: #fff !important; border: 1px solid var(--sl-line) !important; border-radius: 16px !important; box-shadow: var(--sl-shadow) !important; }
html[data-theme="light"] body .tg-row.top1 { background: linear-gradient(90deg, #fff8e6, #fff 60%) !important; border-color: #f4d58a !important; }
html[data-theme="light"] body .tg-av { background-color: var(--sl-brand); color: #fff !important; }
html[data-theme="light"] body .tg-gpa b { background: none !important; -webkit-text-fill-color: currentColor; color: var(--sl-ink) !important; }
html[data-theme="light"] body .tg-row.top1 .tg-gpa b { color: #b45309 !important; }

/* ---------- feedback marquee ---------- */
html[data-theme="light"] body .fbm-head .section-label { color: var(--sl-brand) !important; }
html[data-theme="light"] body .fbm-title { color: var(--sl-ink) !important; }
html[data-theme="light"] body .fbm-card { background: #fff !important; border: 1px solid var(--sl-line) !important; box-shadow: var(--sl-shadow) !important; border-radius: 18px !important; }
html[data-theme="light"] body .fbm-card:hover { border-color: #c3d2fc !important; }
html[data-theme="light"] body .fbm-text { color: var(--sl-text) !important; }
html[data-theme="light"] body .fbm-more { color: var(--sl-brand) !important; }
html[data-theme="light"] body .fbm-name { color: var(--sl-ink) !important; }
html[data-theme="light"] body .fbm-role { color: var(--sl-muted) !important; }
html[data-theme="light"] body .fbm-av { background: var(--sl-brand) !important; color: #fff !important; }
html[data-theme="light"] body .fbm-stars,
html[data-theme="light"] body .fbm-modal-stars { color: #e0a100 !important; }
html[data-theme="light"] body .fbm-modal-overlay { background: rgba(20,33,61,.38) !important; backdrop-filter: blur(3px) !important; }
html[data-theme="light"] body .fbm-modal { background: #fff !important; border: 0 !important; color: var(--sl-text) !important; box-shadow: 0 30px 80px rgba(20,33,61,.28) !important; border-radius: 22px !important; }
html[data-theme="light"] body .fbm-modal-text { color: var(--sl-text) !important; }
html[data-theme="light"] body .fbm-close { color: var(--sl-muted) !important; }

/* ---------- year + semester ---------- */
html[data-theme="light"] body .year-card,
html[data-theme="light"] body .selection-year-card {
  background: #fff !important; border: 1px solid var(--sl-line) !important; border-radius: 20px !important;
  box-shadow: var(--sl-shadow) !important;
}
html[data-theme="light"] body .year-card::before { display: none !important; }
html[data-theme="light"] body .selection-year-card:hover { border-color: #c3d2fc !important; box-shadow: var(--sl-shadow-hover) !important; }
html[data-theme="light"] body .year-number { color: var(--sl-brand) !important; }
html[data-theme="light"] body .year-card h3 { color: var(--sl-ink) !important; }
html[data-theme="light"] body .year-card p { color: var(--sl-muted) !important; }
html[data-theme="light"] body .year-card-status { background: var(--sl-soft) !important; border: 0 !important; color: var(--sl-muted) !important; }
html[data-theme="light"] body .selection-year-card.has-resources .year-card-status { background: #e3f6ee !important; color: #0b7a4f !important; }
html[data-theme="light"] body .selection-year-card.is-selected,
html[data-theme="light"] body .year-card[aria-pressed="true"] {
  background: var(--sl-brand) !important; border-color: var(--sl-brand) !important; box-shadow: 0 12px 30px rgba(44,91,240,.28) !important;
}
html[data-theme="light"] body .selection-year-card.is-selected .year-number,
html[data-theme="light"] body .selection-year-card.is-selected h3,
html[data-theme="light"] body .selection-year-card.is-selected p { color: #fff !important; }
html[data-theme="light"] body .selection-year-card.is-selected .year-card-status { background: rgba(255,255,255,.18) !important; color: #fff !important; }

html[data-theme="light"] body .semester-navigator-copy h3 { color: var(--sl-ink) !important; }
html[data-theme="light"] body .semester-navigator-copy p:not(.section-label) { color: var(--sl-muted) !important; }
html[data-theme="light"] body .semester-select-card {
  background: var(--sl-soft) !important; border: 1.5px solid transparent !important; border-radius: 16px !important; box-shadow: none !important;
}
html[data-theme="light"] body .semester-select-card strong { color: var(--sl-ink) !important; }
html[data-theme="light"] body .semester-select-card small { color: var(--sl-muted) !important; }
html[data-theme="light"] body .semester-select-card .semester-select-step { background: #fff !important; color: var(--sl-brand) !important; border: 1px solid var(--sl-line) !important; }
html[data-theme="light"] body .semester-select-card.is-available:hover { border-color: #c3d2fc !important; background: #fff !important; }
html[data-theme="light"] body .semester-select-card.is-selected {
  background: var(--sl-brand-soft) !important; border-color: var(--sl-brand) !important;
}
html[data-theme="light"] body .semester-select-card.is-selected strong { color: var(--sl-brand) !important; }

/* ---------- modules ---------- */
html[data-theme="light"] body .module-card,
html[data-theme="light"] body .dynamic-module-card {
  background: #fff !important; border: 1px solid var(--sl-line) !important; border-radius: 20px !important; box-shadow: var(--sl-shadow) !important;
}
html[data-theme="light"] body .dynamic-module-card:hover { border-color: var(--sl-brand) !important; box-shadow: var(--sl-shadow-hover) !important; }
html[data-theme="light"] body .module-card-content { background: transparent !important; }
html[data-theme="light"] body .module-card-content strong { color: var(--sl-ink) !important; }
html[data-theme="light"] body .module-card-content small { color: var(--sl-muted) !important; }
html[data-theme="light"] body .module-card-content em { color: var(--sl-brand) !important; }
html[data-theme="light"] body .module-generic-visual { background: linear-gradient(135deg, #e8eefe, #dfe9fd) !important; }
html[data-theme="light"] body .module-generic-visual span { color: var(--sl-brand) !important; }
html[data-theme="light"] body .module-update-badge,
html[data-theme="light"] body .new-badge { background: var(--sl-mint) !important; color: #fff !important; box-shadow: none !important; }
html[data-theme="light"] body #examCountdown {
  background: var(--sl-brand-soft) !important; border: 1px solid #c3d2fc !important; color: var(--sl-brand-d) !important;
}

/* ---------- resource library ---------- */
html[data-theme="light"] body .filter-field > span { color: var(--sl-ink) !important; }
html[data-theme="light"] body .resource-filters select,
html[data-theme="light"] body .feedback-form input,
html[data-theme="light"] body .feedback-form select,
html[data-theme="light"] body .feedback-form textarea {
  background-color: #fff !important; border: 1px solid var(--sl-line2) !important; color: var(--sl-text) !important; border-radius: 12px !important; box-shadow: none !important;
}
html[data-theme="light"] body .resource-filters select:focus,
html[data-theme="light"] body .feedback-form input:focus,
html[data-theme="light"] body .feedback-form select:focus,
html[data-theme="light"] body .feedback-form textarea:focus { border-color: var(--sl-brand) !important; box-shadow: 0 0 0 3px rgba(44,91,240,.14) !important; }
html[data-theme="light"] body .resource-library-action.primary-action,
html[data-theme="light"] body .resource-view-btn,
html[data-theme="light"] body .feedback-form button,
html[data-theme="light"] body .primary-btn {
  background: var(--sl-brand) !important; color: #fff !important; border: 0 !important; box-shadow: none !important;
}
html[data-theme="light"] body .resource-library-action.primary-action:hover,
html[data-theme="light"] body .feedback-form button:hover,
html[data-theme="light"] body .primary-btn:hover { background: var(--sl-brand-d) !important; }
html[data-theme="light"] body .resource-library-action.secondary-action,
html[data-theme="light"] body .secondary-btn,
html[data-theme="light"] body .collection-action-btn.secondary-btn {
  background: #fff !important; color: var(--sl-ink) !important; border: 1px solid var(--sl-line2) !important; box-shadow: none !important;
}
html[data-theme="light"] body .secondary-btn:hover { border-color: var(--sl-brand) !important; color: var(--sl-brand) !important; }

html[data-theme="light"] body .resource-card {
  background: #fff !important; border: 1px solid var(--sl-line) !important; border-radius: 18px !important; box-shadow: var(--sl-shadow) !important;
}
html[data-theme="light"] body .resource-card:hover { border-color: #c3d2fc !important; box-shadow: var(--sl-shadow-hover) !important; }
html[data-theme="light"] body .resource-card h3 { color: var(--sl-ink) !important; }
html[data-theme="light"] body .resource-card p { color: var(--sl-muted) !important; }
html[data-theme="light"] body .resource-meta span { background: var(--sl-soft) !important; color: var(--sl-muted) !important; border: 0 !important; }
html[data-theme="light"] body .resource-link {
  background: var(--sl-brand) !important; color: #fff !important; border: 0 !important; box-shadow: none !important;
}
html[data-theme="light"] body .resource-link:hover { background: var(--sl-brand-d) !important; }
html[data-theme="light"] body .resource-link.premium-resource-link { background: #f5b301 !important; color: #3a2700 !important; }
html[data-theme="light"] body .resource-link.members-resource-link { background: var(--sl-ink) !important; color: #fff !important; }
html[data-theme="light"] body .opens-badge { background: var(--sl-soft) !important; color: var(--sl-muted) !important; border-color: var(--sl-line) !important; }
html[data-theme="light"] body .popular-badge { background: #fff1e6 !important; color: #c2410c !important; border-color: #fbd0ad !important; }
html[data-theme="light"] body .resource-sort-bar .rsb-label { color: var(--sl-muted) !important; }
html[data-theme="light"] body .resource-sort-bar .rsb-btn { background: #fff !important; border: 1px solid var(--sl-line) !important; color: var(--sl-muted) !important; }
html[data-theme="light"] body .resource-sort-bar .rsb-btn.is-active { background: var(--sl-ink) !important; border-color: var(--sl-ink) !important; color: #fff !important; }
html[data-theme="light"] body .empty-state { background: #fff !important; border: 1.5px dashed var(--sl-line2) !important; border-radius: 20px !important; box-shadow: none !important; }
html[data-theme="light"] body .empty-state h3 { color: var(--sl-ink) !important; }
html[data-theme="light"] body .empty-state p { color: var(--sl-muted) !important; }

/* ---------- tools ---------- */
html[data-theme="light"] body .university-tools-grid .student-tool-card {
  background: #fff !important; border: 1px solid var(--sl-line) !important; border-radius: 18px !important; box-shadow: var(--sl-shadow) !important;
}
html[data-theme="light"] body .university-tools-grid .student-tool-card:hover { border-color: var(--sl-brand) !important; box-shadow: var(--sl-shadow-hover) !important; }
html[data-theme="light"] body .university-tools-grid .student-tool-icon { background: var(--sl-brand-soft) !important; color: var(--sl-brand) !important; border: 0 !important; }
html[data-theme="light"] body .university-tools-grid .tool-card-label { color: var(--sl-muted) !important; }
html[data-theme="light"] body .university-tools-grid h3 { color: var(--sl-ink) !important; }
html[data-theme="light"] body .university-tools-grid p { color: var(--sl-muted) !important; }
html[data-theme="light"] body .university-tools-grid .tool-card-arrow { color: var(--sl-brand) !important; }

/* ---------- notice / feedback / contact ---------- */
html[data-theme="light"] body .notice-text,
html[data-theme="light"] body .notice-grid p,
html[data-theme="light"] body .feedback-copy p:not(.section-label),
html[data-theme="light"] body .contact-card p:not(.section-label) { color: var(--sl-muted) !important; }
html[data-theme="light"] body .notice-grid div { background: var(--sl-soft) !important; border: 0 !important; border-radius: 14px !important; box-shadow: none !important; }
html[data-theme="light"] body .notice-grid span { color: var(--sl-ink) !important; }
html[data-theme="light"] body .socials a { background: #fff !important; border: 1px solid var(--sl-line) !important; box-shadow: none !important; color: var(--sl-ink) !important; }
html[data-theme="light"] body .socials a small { color: var(--sl-muted) !important; }
html[data-theme="light"] body .site-footer-j { background: #fff !important; border-top: 1px solid var(--sl-line) !important; }
html[data-theme="light"] body .sfj-brand span { color: var(--sl-brand) !important; }
html[data-theme="light"] body .sfj-links a { color: var(--sl-brand) !important; }
html[data-theme="light"] body .top-btn { background: #fff !important; color: var(--sl-ink) !important; border: 1px solid var(--sl-line2) !important; box-shadow: var(--sl-shadow) !important; }

/* ---------- popups injected by scripts ---------- */
html[data-theme="light"] body .wp-overlay,
html[data-theme="light"] body .pc-ov,
html[data-theme="light"] body #scPromptOv,
html[data-theme="light"] body .fb-overlay,
html[data-theme="light"] body #refSheetPopup,
html[data-theme="light"] body .resource-popup { background: rgba(20,33,61,.38) !important; backdrop-filter: blur(3px) !important; }
html[data-theme="light"] body .wp-card,
html[data-theme="light"] body .pc-card,
html[data-theme="light"] body #scPromptOv .sc-card,
html[data-theme="light"] body .fb-modal,
html[data-theme="light"] body #refSheetPopup .rsp-card,
html[data-theme="light"] body .resource-popup-card {
  background: #fff !important; border: 0 !important; color: var(--sl-text) !important; border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(20,33,61,.28) !important; backdrop-filter: none !important;
}
html[data-theme="light"] body .wp-card h2,
html[data-theme="light"] body .pc-card h3,
html[data-theme="light"] body .fb-modal h3,
html[data-theme="light"] body #scPromptOv h3 { color: var(--sl-ink) !important; }
html[data-theme="light"] body .wp-card h2 span { background: none !important; -webkit-text-fill-color: currentColor; color: var(--sl-brand) !important; }
html[data-theme="light"] body .wp-sub,
html[data-theme="light"] body .pc-sub,
html[data-theme="light"] body .pc-hint,
html[data-theme="light"] body .fb-modal p.sub,
html[data-theme="light"] body .fb-modal label,
html[data-theme="light"] body .pc-card label,
html[data-theme="light"] body #scPromptOv p,
html[data-theme="light"] body #scPromptOv .sc-fine { color: var(--sl-muted) !important; }
html[data-theme="light"] body .wp-list li { color: var(--sl-text) !important; }
html[data-theme="light"] body .wp-badge { background: var(--sl-brand-soft) !important; border-color: #c3d2fc !important; color: var(--sl-brand) !important; }
html[data-theme="light"] body .wp-close { background: var(--sl-soft) !important; color: var(--sl-muted) !important; }
html[data-theme="light"] body .wp-skip,
html[data-theme="light"] body .pc-skip { color: var(--sl-muted) !important; }
html[data-theme="light"] body .wp-signin { background: var(--sl-mint) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(18,164,107,.3) !important; }
html[data-theme="light"] body .pc-card input,
html[data-theme="light"] body .pc-card select,
html[data-theme="light"] body .fb-modal input,
html[data-theme="light"] body .fb-modal select,
html[data-theme="light"] body .fb-modal textarea { background-color: #fff !important; border: 1px solid var(--sl-line2) !important; color: var(--sl-text) !important; }
html[data-theme="light"] body .pc-card option,
html[data-theme="light"] body .fb-modal select option { background: #fff !important; color: var(--sl-text) !important; }
html[data-theme="light"] body .pc-why { background: #e3f6ee !important; border-color: #bfe8d4 !important; color: #0b6b45 !important; }
html[data-theme="light"] body .pc-save,
html[data-theme="light"] body .fb-send { background: var(--sl-brand) !important; color: #fff !important; }
html[data-theme="light"] body .fb-x { color: var(--sl-muted) !important; }
html[data-theme="light"] body .fb-hotline { color: var(--sl-brand) !important; }
html[data-theme="light"] body .fb-fab { background: var(--sl-ink) !important; box-shadow: 0 12px 30px rgba(20,33,61,.3) !important; }
html[data-theme="light"] body #scPromptOv .sc-card { background: linear-gradient(180deg, #fff8e6, #fff 45%) !important; }
html[data-theme="light"] body #scPromptOv .sc-no { background: var(--sl-soft) !important; border-color: var(--sl-line) !important; color: var(--sl-ink) !important; }

/* ---------- loaders ---------- */
html[data-theme="light"] body .site-loading-screen,
html[data-theme="light"] body .gpa-loading-screen { background: var(--sl-bg) !important; }
html[data-theme="light"] body .study-loader-glow { display: none !important; }
html[data-theme="light"] body .study-loader-card,
html[data-theme="light"] body .gpa-loading-card { background: #fff !important; border: 1px solid var(--sl-line) !important; box-shadow: var(--sl-shadow-hover) !important; }
html[data-theme="light"] body .study-loader-card h2 span { color: var(--sl-brand) !important; }
html[data-theme="light"] body .study-loader-progress span,
html[data-theme="light"] body .gpa-progress span { background: var(--sl-brand) !important; }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  html[data-theme="light"] body .howitworks,
  html[data-theme="light"] body .hw-lead,
  html[data-theme="light"] body .resource-panel,
  html[data-theme="light"] body .notice-card,
  html[data-theme="light"] body .feedback-card,
  html[data-theme="light"] body .contact-card { border-radius: 18px !important; }
  html[data-theme="light"] body .study-hero .study-path-btn { border-radius: 16px !important; }
}

/* ---------- fixes found in review ---------- */
html[data-theme="light"] body .feedback-section { background: transparent !important; box-shadow: none !important; border: 0 !important; }
html[data-theme="light"] body .study-hero .hero-badge {
  display: inline-flex !important; align-items: center; gap: 8px; width: auto !important; max-width: 100%;
  padding: 6px 12px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 700 !important;
}
html[data-theme="light"] body .study-hero .hero-badge span { background: var(--sl-mint) !important; }
html[data-theme="light"] body .plw-open { background: var(--sl-brand) !important; }
html[data-theme="light"] body .plw-open:hover { background: var(--sl-brand-d) !important; filter: none !important; }
html[data-theme="light"] body .plw-box { border-color: var(--sl-line) !important; box-shadow: var(--sl-shadow) !important; border-radius: 20px !important; }

/* ---------- round 2: module cards, headings, resource panel ---------- */
/* module cards: one clean card, no inner box, crisp tile */
html[data-theme="light"] body .dynamic-module-card { padding: 10px 10px 14px !important; display: flex !important; flex-direction: column; }
html[data-theme="light"] body .module-card-content,
html[data-theme="light"] body .dynamic-module-card .module-card-content {
  background: transparent !important; box-shadow: none !important; border: 0 !important;
  padding: 0 6px !important; margin: 0 !important; border-radius: 0 !important;
}
html[data-theme="light"] body .module-generic-visual {
  background: var(--sl-brand-soft) !important; border: 0 !important; border-radius: 14px !important;
}
html[data-theme="light"] body .module-generic-visual span,
html[data-theme="light"] body .module-generic-visual b {
  color: var(--sl-brand) !important; text-shadow: none !important; letter-spacing: -.03em !important; font-weight: 800 !important;
}
html[data-theme="light"] body .dynamic-module-card img { border-radius: 14px !important; object-fit: cover; background: var(--sl-soft); }
html[data-theme="light"] body .module-card-content strong { font-size: 20px !important; font-weight: 800 !important; letter-spacing: -.02em; }
html[data-theme="light"] body .module-card-content small { font-size: 13.5px !important; line-height: 1.45 !important; }
html[data-theme="light"] body .module-card-content em {
  display: inline-block !important; margin-top: 10px !important; padding: 3px 9px; border-radius: 999px;
  background: var(--sl-brand-soft); letter-spacing: .02em !important; font-size: 11px !important; text-transform: none !important;
}
html[data-theme="light"] body .module-update-badge { top: 16px !important; right: 16px !important; font-size: 10.5px !important; }

/* section headings: first line navy, second line blue, calmer size */
html[data-theme="light"] body h2 > span:first-child:not(:last-child) { color: var(--sl-ink) !important; }
html[data-theme="light"] body .projects-head h2,
html[data-theme="light"] body .center-heading h2 {
  font-size: clamp(30px, 4.2vw, 46px) !important; line-height: 1.08 !important; font-weight: 800 !important;
}
html[data-theme="light"] body .projects-head h2 span,
html[data-theme="light"] body .center-heading h2 span { display: block; }
html[data-theme="light"] body .section-label { font-weight: 800 !important; letter-spacing: .08em !important; font-size: 12px !important; }
html[data-theme="light"] body .selection-summary,
html[data-theme="light"] body .section-subtitle { font-size: 15px !important; line-height: 1.6 !important; }

/* buttons: always bold and clear */
html[data-theme="light"] body .collection-action-btn,
html[data-theme="light"] body .secondary-btn,
html[data-theme="light"] body .primary-btn,
html[data-theme="light"] body .resource-library-action,
html[data-theme="light"] body .resource-link { font-weight: 700 !important; border-radius: 12px !important; }
html[data-theme="light"] body .collection-action-btn { padding: 12px 18px !important; }

/* resource library panel: proper inner padding so nothing touches the edge */
html[data-theme="light"] body .resource-panel { padding: 22px !important; box-sizing: border-box; }
html[data-theme="light"] body .resource-filters { gap: 14px !important; }
html[data-theme="light"] body .filter-field > span { font-size: 13px !important; font-weight: 700 !important; margin-bottom: 6px; }
html[data-theme="light"] body .resource-filters select { height: 46px; padding: 0 14px !important; font-size: 14.5px !important; }
html[data-theme="light"] body .resource-library-actions { margin: 16px 0 !important; }
html[data-theme="light"] body .resource-panel .empty-state { background: var(--sl-soft) !important; border: 1.5px dashed var(--sl-line2) !important; }
html[data-theme="light"] body .resource-meta span { font-weight: 600 !important; font-size: 12px !important; }
html[data-theme="light"] body .resource-card h3 { font-size: 18px !important; line-height: 1.35 !important; }

/* notice pills */
html[data-theme="light"] body .notice-grid span { background: var(--sl-brand-soft) !important; color: var(--sl-brand-d) !important; border: 0 !important; }

@media (max-width: 640px) {
  html[data-theme="light"] body .resource-panel { padding: 14px !important; }
  html[data-theme="light"] body .dynamic-module-card { padding: 8px 8px 12px !important; }
  html[data-theme="light"] body .module-card-content { padding: 0 4px !important; }
  html[data-theme="light"] body .module-card-content strong { font-size: 17px !important; }
  html[data-theme="light"] body .module-card-content em { font-size: 10.5px !important; margin-top: 6px !important; }
  html[data-theme="light"] body .projects-head h2,
  html[data-theme="light"] body .center-heading h2 { font-size: 30px !important; }
}
@media (max-width: 640px) {
  html[data-theme="light"] body .resource-filters { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  html[data-theme="light"] body .resource-filters select { height: 44px; font-size: 14px !important; padding: 0 10px !important; }
  html[data-theme="light"] body .filter-field > span { font-size: 12px !important; }
}
@media (max-width: 640px) {
  html[data-theme="light"] body .empty-state h3 { font-size: 19px !important; }
  html[data-theme="light"] body .empty-state p { font-size: 13.5px !important; }
}

/* ---------- round 3: account button + loading screens ---------- */
/* profile button / menu (auth.js) */
html[data-theme="light"] body .acc-trigger {
  background: #fff !important; border: 1px solid var(--sl-line2) !important; color: var(--sl-ink) !important; box-shadow: none !important;
}
html[data-theme="light"] body .acc-trigger:hover { border-color: var(--sl-brand) !important; background: #fff !important; }
html[data-theme="light"] body .acc-name { color: var(--sl-ink) !important; font-weight: 700 !important; }
html[data-theme="light"] body .acc-caret { color: var(--sl-muted) !important; }
html[data-theme="light"] body .acc-avatar { background: var(--sl-brand) !important; color: #fff !important; }
html[data-theme="light"] body .acc-menu { background: #fff !important; border: 1px solid var(--sl-line) !important; box-shadow: 0 20px 50px rgba(20,33,61,.16) !important; }
html[data-theme="light"] body .acc-fullname { color: var(--sl-ink) !important; }
html[data-theme="light"] body .acc-email { color: var(--sl-muted) !important; }
html[data-theme="light"] body .acc-plan.free { background: var(--sl-soft) !important; border: 1px solid var(--sl-line) !important; color: var(--sl-ink) !important; }
html[data-theme="light"] body .acc-item { color: var(--sl-ink) !important; }
html[data-theme="light"] body .acc-item:hover { background: var(--sl-soft) !important; }
html[data-theme="light"] body .acc-item.gold { color: #a16207 !important; }
html[data-theme="light"] body .acc-item.danger { color: #dc2626 !important; }
html[data-theme="light"] body .auth-signin-btn {
  background: var(--sl-mint) !important; color: #fff !important; border: 0 !important; backdrop-filter: none !important;
  box-shadow: 0 8px 20px rgba(18,164,107,.28) !important;
}

/* main page loader */
html[data-theme="light"] body .site-loading-screen { background: var(--sl-bg) !important; }
html[data-theme="light"] body .study-loader-card {
  background: #fff !important; border: 1px solid var(--sl-line) !important; opacity: 1 !important;
  box-shadow: 0 24px 60px rgba(20,33,61,.12) !important; backdrop-filter: none !important;
}
html[data-theme="light"] body .study-loader-card::before { display: none !important; }
html[data-theme="light"] body .study-loader-emblem { background: var(--sl-brand) !important; border: 0 !important; box-shadow: 0 10px 26px rgba(44,91,240,.3) !important; }
html[data-theme="light"] body .study-loader-emblem svg,
html[data-theme="light"] body .study-loader-emblem path,
html[data-theme="light"] body .study-loader-emblem circle { stroke: #fff !important; color: #fff !important; }
html[data-theme="light"] body .study-loader-orbit { border-color: #c3d2fc !important; }
html[data-theme="light"] body .orbit-dot { background: var(--sl-brand) !important; box-shadow: none !important; }
html[data-theme="light"] body .study-loader-label { color: var(--sl-brand) !important; opacity: 1 !important; }
html[data-theme="light"] body .study-loader-card h2 { color: var(--sl-ink) !important; opacity: 1 !important; }
html[data-theme="light"] body .study-loader-card h2 span { color: var(--sl-brand) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
html[data-theme="light"] body .study-loader-message { color: var(--sl-muted) !important; opacity: 1 !important; }
html[data-theme="light"] body .study-loader-progress { background: var(--sl-soft2) !important; border: 0 !important; }
html[data-theme="light"] body .study-loader-progress span { background: var(--sl-brand) !important; box-shadow: none !important; }
html[data-theme="light"] body .study-loader-status { color: var(--sl-ink) !important; background: var(--sl-soft) !important; border-color: var(--sl-line) !important; }
html[data-theme="light"] body .study-loader-status span { color: var(--sl-ink) !important; }
html[data-theme="light"] body .study-loader-status i { background: var(--sl-mint) !important; }
html[data-theme="light"] body .study-floating-card {
  background: #fff !important; border: 1px solid var(--sl-line) !important; box-shadow: 0 12px 30px rgba(20,33,61,.10) !important;
  backdrop-filter: none !important; filter: none !important; opacity: 1 !important;
}
html[data-theme="light"] body .study-floating-card strong { color: var(--sl-ink) !important; }
html[data-theme="light"] body .study-floating-card small { color: var(--sl-muted) !important; }
html[data-theme="light"] body .float-card-dot { background: var(--sl-mint) !important; box-shadow: none !important; }
html[data-theme="light"] body .float-card-symbol { background: var(--sl-brand-soft) !important; color: var(--sl-brand) !important; border: 0 !important; }
html[data-theme="light"] body .study-particle { background: #9db5f7 !important; box-shadow: none !important; }
html[data-theme="light"] body .study-loader-glow { display: none !important; }

/* GPA loader */
html[data-theme="light"] body .gpa-loading-screen { background: var(--sl-bg) !important; }
html[data-theme="light"] body .gpa-loading-card { background: #fff !important; border: 1px solid var(--sl-line) !important; box-shadow: 0 24px 60px rgba(20,33,61,.12) !important; }
html[data-theme="light"] body .gpa-loading-card h2 { color: var(--sl-ink) !important; }
html[data-theme="light"] body .gpa-loading-card p { color: var(--sl-muted) !important; }
html[data-theme="light"] body .gpa-mini-calculator { background: var(--sl-brand) !important; border: 0 !important; box-shadow: 0 10px 26px rgba(44,91,240,.3) !important; }
html[data-theme="light"] body .calc-screen { background: rgba(255,255,255,.2) !important; color: #fff !important; border: 0 !important; }
html[data-theme="light"] body .calc-grid span { background: rgba(255,255,255,.55) !important; }
html[data-theme="light"] body .gpa-progress { background: var(--sl-soft2) !important; }
html[data-theme="light"] body .gpa-loading-steps span { background: var(--sl-soft) !important; border: 1px solid var(--sl-line) !important; color: var(--sl-ink) !important; }
html[data-theme="light"] body .gpa-floating-chip {
  background: #fff !important; color: var(--sl-brand) !important; border: 1px solid var(--sl-line) !important;
  box-shadow: 0 10px 24px rgba(20,33,61,.10) !important; filter: none !important; backdrop-filter: none !important; opacity: 1 !important;
}
html[data-theme="light"] body .study-loader-card h2 span { text-shadow: none !important; box-shadow: none !important; filter: none !important; background-color: transparent !important; }
html[data-theme="light"] body .study-loader-status { box-shadow: none !important; }

/* ============================================================
   Round 4: clearer outlines + stronger contrast, so cards,
   buttons and sections are easy to tell apart.
   ============================================================ */
html[data-theme="light"] {
  --sl-bg: #edf1f7;
  --sl-line: #d5dde9;
  --sl-line2: #b9c6d9;
  --sl-soft: #eef2f8;
  --sl-shadow: 0 1px 2px rgba(20,33,61,.06), 0 8px 24px rgba(20,33,61,.07);
  --sl-shadow-hover: 0 2px 4px rgba(20,33,61,.07), 0 16px 36px rgba(20,33,61,.12);
  --bg: #edf1f7;
  --line: #d5dde9;
}
html[data-theme="light"] body .site-header { background: rgba(255,255,255,.92) !important; border-bottom: 1px solid var(--sl-line) !important; }

/* section labels become small pills, so every section start is obvious */
html[data-theme="light"] body .section-label {
  display: inline-block !important; padding: 5px 12px !important; border-radius: 999px !important;
  background: var(--sl-brand-soft) !important; border: 1px solid #c9d6fb !important; color: var(--sl-brand-d) !important;
  letter-spacing: .06em !important; margin-bottom: 12px !important;
}

/* cards: visible outline on the grey page */
html[data-theme="light"] body .howitworks,
html[data-theme="light"] body .hw-lead,
html[data-theme="light"] body .nt-banner,
html[data-theme="light"] body .semester-navigator,
html[data-theme="light"] body .resource-panel,
html[data-theme="light"] body .notice-card,
html[data-theme="light"] body .feedback-card,
html[data-theme="light"] body .contact-card,
html[data-theme="light"] body .whatsapp-channel-box,
html[data-theme="light"] body .plw-box,
html[data-theme="light"] body .year-card,
html[data-theme="light"] body .selection-year-card,
html[data-theme="light"] body .dynamic-module-card,
html[data-theme="light"] body .resource-card,
html[data-theme="light"] body .university-tools-grid .student-tool-card,
html[data-theme="light"] body .tg-row,
html[data-theme="light"] body .fbm-card {
  border: 1px solid var(--sl-line) !important; box-shadow: var(--sl-shadow) !important;
}
html[data-theme="light"] body .selection-year-card.is-selected { border-color: var(--sl-brand) !important; }

/* inner tiles inside white cards get a tinted fill so they don't merge with the card */
html[data-theme="light"] body .semester-select-card { background: var(--sl-soft) !important; border: 1.5px solid var(--sl-line) !important; }
html[data-theme="light"] body .semester-select-card.is-selected { background: var(--sl-brand-soft) !important; border-color: var(--sl-brand) !important; }
html[data-theme="light"] body .plw-item { background: var(--sl-soft) !important; border: 1px solid var(--sl-line) !important; }
html[data-theme="light"] body .notice-grid div { background: var(--sl-soft) !important; border: 1px solid var(--sl-line) !important; }

/* buttons: three clear kinds
   1) primary = solid blue  2) secondary = white with a strong outline  3) links = blue text */
html[data-theme="light"] body .secondary-btn,
html[data-theme="light"] body .collection-action-btn.secondary-btn,
html[data-theme="light"] body .resource-library-action.secondary-action,
html[data-theme="light"] body .hero-ql:not(.planner-ql):not(.premium-ql),
html[data-theme="light"] body .acc-trigger,
html[data-theme="light"] body .news-bell,
html[data-theme="light"] body .menu-btn {
  background: #fff !important; border: 1.5px solid var(--sl-line2) !important; color: var(--sl-ink) !important;
  box-shadow: 0 1px 2px rgba(20,33,61,.06) !important;
}
html[data-theme="light"] body .secondary-btn:hover,
html[data-theme="light"] body .resource-library-action.secondary-action:hover,
html[data-theme="light"] body .hero-ql:not(.planner-ql):not(.premium-ql):hover {
  border-color: var(--sl-brand) !important; color: var(--sl-brand) !important; background: #f7f9ff !important;
}
html[data-theme="light"] body .hero-ql.premium-ql { border: 1.5px solid #e9c46a !important; }
html[data-theme="light"] body .gpa-pill { border: 1.5px solid #a9bdf7 !important; background: var(--sl-brand-soft) !important; color: var(--sl-brand-d) !important; }
html[data-theme="light"] body .gpa-pill b { color: var(--sl-ink) !important; }
html[data-theme="light"] body .resource-library-action.primary-action,
html[data-theme="light"] body .primary-btn,
html[data-theme="light"] body .resource-link,
html[data-theme="light"] body .feedback-form button { box-shadow: 0 6px 16px rgba(44,91,240,.22) !important; }
html[data-theme="light"] body .resource-filters select,
html[data-theme="light"] body .feedback-form input,
html[data-theme="light"] body .feedback-form select,
html[data-theme="light"] body .feedback-form textarea { border: 1.5px solid var(--sl-line2) !important; }
html[data-theme="light"] body .live-learners { border: 1.5px solid var(--sl-line) !important; }

/* hero title: "Study Hub" big, "for SLIIT students" small */
html[data-theme="light"] body .study-hero h1.hero-title .hero-title-main { color: var(--sl-brand) !important; }
html[data-theme="light"] body .study-hero h1.hero-title .hero-title-sub { color: var(--sl-ink) !important; opacity: .78; }

/* mini leaderboard moved under the StudySync card */
html[data-theme="light"] body .hw-lead--section { border-color: #ecd9a4 !important; }

/* mobile */
@media (max-width: 640px) {
  html[data-theme="light"] body .section-label { font-size: 11px !important; padding: 4px 10px !important; }
  html[data-theme="light"] body .hero-ql { border-radius: 12px !important; }
}