@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');

/* RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
:root{
  /* Safe area env variables for devices with display cut‑outs (notches) */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  /* A simple spacing scale to be reused across the UI */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
}

body {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
  background: #e5e7f5;
  color: #020617;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  /* Prevent horizontal scrolling on small devices */
  overflow-x: hidden;
}

/* Global typography scaling. Using clamp() allows the font size to
   increase gently on larger viewports without compromising small
   screen readability. */
html {
  font-size: clamp(14px, 1vw + 0.6rem, 16px);
}

/* Ensure images and SVGs scale responsively and do not overflow
   their containers. Display block prevents unexpected inline gaps. */
img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ambient background for app pages (ultra-subtle) */
body.has-app::before{
  content:"";
  position:fixed;
  inset:-35%;
  background:
    radial-gradient(900px 650px at 18% 22%, rgba(59,130,246,0.14), transparent 60%),
    radial-gradient(900px 650px at 82% 18%, rgba(99,102,241,0.12), transparent 62%),
    radial-gradient(900px 650px at 55% 92%, rgba(14,165,233,0.08), transparent 60%);
  animation: keAmbient 18s ease-in-out infinite;
  pointer-events:none;
  z-index:-1;
}
@keyframes keAmbient{
  0%{ transform: translate3d(-1.2%,-0.8%,0) scale(1.02); }
  50%{ transform: translate3d( 1.2%, 0.8%,0) scale(1.04); }
  100%{ transform: translate3d(-1.2%,-0.8%,0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce){
  body.has-app::before{ animation:none; }
}

/* Floating animation used by the Luma floating action button. By
   centralising the @keyframes here we avoid stray percentage rules in
   individual pages. */
@keyframes ke-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}


/* APP WRAPPER */
.app {
  max-width: 480px;
  margin: 0 auto;
  /* Use a minimum height rather than a fixed height so that the app
     accommodates browser UI chrome on mobile devices. The 100dvh unit
     accounts for dynamic viewport changes on iOS/Android. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #f7f8ff;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  overflow: hidden;
}


/* Increase the app container width on larger screens. This keeps the
   content comfortable to read on tablets and desktops without stretching
   out too far. */
@media (min-width: 600px) {
  .app {
    max-width: 600px;
    margin: 16px auto;
    border-radius: 20px;
  }
}
@media (min-width: 768px) {
  .app {
    max-width: 720px;
  }
}
@media (min-width: 1024px) {
  .app {
    max-width: 960px;
  }
}
@media (min-width: 1280px) {
  .app {
    max-width: 1100px;
  }
}

/* HEADER */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(248, 250, 252, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: radial-gradient(circle at 20% 20%, #4f46e5, #0ea5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f9fafb;
  font-weight: 700;
  font-size: 14px;
}

.brand-title {
  font-size: 14px;
  font-weight: 600;
}

.brand-subtitle {
  font-size: 11px;
  color: #64748b;
}

.app-header__profile-btn {
  border: none;
  background: transparent;
  cursor: pointer;
}

.profile-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

/* MAIN */
.app-main {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px calc(88px + var(--safe-area-bottom));
}


/* MAIN (alias) */
.app-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px calc(88px + var(--safe-area-bottom));
}
/* HERO (HOME PAGE) */
.hero {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1.5fr 1.1fr;
  gap: 12px;
  padding: 16px 16px 18px;
  border-radius: 22px;
  background: radial-gradient(
    circle at 0% 0%,
    #eef2ff,
    #e0f2fe 50%,
    #e5e7f5 100%
  );
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-eyebrow {
  font-size: 12px;
  color: #6b7280;
}

.hero-title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  color: #020617;
}

.hero-title__luma {
  color: #2563eb;
}

.hero-desc {
  font-size: 13px;
  color: #4b5563;
}

.hero-desc strong {
  font-weight: 700;
}

.hero-cta {
  margin-top: 12px;
  border: none;
  outline: none;
  border-radius: 999px;
  padding: 11px 20px;
  background: linear-gradient(145deg, #020617, #111827);
  color: #f9fafb;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.55);
}

/* HERO RIGHT – LUMA ORBIT */
.hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-luma-orbit {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: luma-float 3.2s ease-in-out infinite;
}

.hero-luma-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 10%,
    rgba(219, 234, 254, 0.9),
    rgba(96, 165, 250, 0.55),
    rgba(15, 23, 42, 0) 70%
  );
  filter: blur(16px);
  opacity: 0.48;
  z-index: -1;
}

.hero-luma-backplate {
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 20%,
    #ffffff,
    #dbeafe 60%,
    #bfdbfe 100%
  );
  box-shadow: 0 12px 30px rgba(59, 130, 246, 0.3);
  z-index: 0;
}

.hero-luma-player {
  width: 220px;
  height: 220px;
  filter: drop-shadow(0 12px 26px rgba(15, 23, 42, 0.32));
  z-index: 1;
}

/* GENERIC CARD BASE */
.card {
  border-radius: 18px;
  background: #ffffff;
  padding: 12px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

/* (OLD) EXAM CARD – kept for future use */
.exam-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.exam-card__left {
  max-width: 65%;
}

.exam-label {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 2px;
}

.exam-title {
  font-size: 16px;
  font-weight: 700;
}

.exam-desc {
  font-size: 11px;
  color: #4b5563;
}

.exam-countdown {
  text-align: center;
}

.exam-countdown__number {
  font-size: 22px;
  font-weight: 800;
}

.exam-countdown__label {
  font-size: 11px;
  color: #6b7280;
}

/* LUMA PRIORITY CARD (HOME) */
.priority-card {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin-top: 14px;
  padding: 14px 14px 13px;
  background: radial-gradient(
    circle at 0% 0%,
    rgba(219, 234, 254, 0.95),
    #ffffff 40%,
    #eff6ff 100%
  );
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.priority-left {
  flex: 1.4;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.priority-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.priority-title {
  font-size: 15px;
  font-weight: 700;
  color: #020617;
}

.priority-desc {
  font-size: 12px;
  color: #4b5563;
}

.priority-tags {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.priority-tag {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.95);
  border: 1px solid rgba(129, 140, 248, 0.3);
  color: #1d4ed8;
}

.priority-right {
  flex: 0.8;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.priority-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: radial-gradient(circle at 0% 0%, #1d4ed8, #0ea5e9);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.35);
  color: #e5f2ff;
  font-size: 11px;
  font-weight: 600;
}

.priority-pill-icon {
  font-size: 13px;
}

.priority-pill-text {
  white-space: nowrap;
}

/* SECTIONS + QUICK GRID (HOME) */
.section {
  margin-top: 14px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* main 4 cards – slightly bigger & softer */
.quick-card {
  border: none;
  text-align: center;
  padding: 16px 12px 14px;
  border-radius: 18px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.97),
    rgba(239, 246, 255, 0.98)
  );
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.quick-card:hover {
  /*
   * Enhance hover feedback on dashboard cards. A slight upward lift combined
   * with a gentle scale emphasises interactivity without feeling jumpy. The
   * box‑shadow is deepened to create more contrast against the blurred
   * backgrounds. These tweaks remain subtle enough to feel premium rather
   * than flashy.
   */
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
}

/* Provide a pressed state so cards feel like buttons on tap/click */
.quick-card:active {
  transform: translateY(-1px) scale(0.99);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

/*
 * Offline message styles used by chat when the AI backend is unreachable.
 * The colours are soft pinks and plums to convey a gentle warning rather than
 * an error. A rounded panel echoes other in‑app cards. These classes are
 * namespaced under ke‑offline to avoid collisions with existing utility
 * styles.
 */
.ke-offline {
  background: linear-gradient(135deg, #fdf2f8, #fce7f3);
  border: 1px solid rgba(251, 113, 133, 0.3);
  border-radius: 12px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #7c2d12;
}
.ke-offline-title {
  font-weight: 800;
  margin-bottom: 6px;
  color: #be185d;
  font-size: 14px;
}
.ke-offline-desc {
  margin: 0;
  color: #9d174d;
  font-size: 12px;
  line-height: 1.4;
}

/*
 * Daily tasks list styles. These rules style the checklist modal on the
 * Me page. They avoid custom icons and instead rely on native checkboxes
 * which pick up the browser/platform accent colour, keeping things light.
 */
.tasks-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.tasks-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: #0f172a;
}
.tasks-list li.done {
  text-decoration: line-through;
  opacity: 0.6;
}

/* ICON WRAPPER */
.quick-icon {
  width: 82px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ICON IMAGE */
.quick-icon img {
  width: 78px;
  height: 78px;
  object-fit: contain;
}

/* TITLE */
.quick-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

/* DARKER SUBTITLE — READABLE */
.quick-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: #4a4f59;
  margin-top: -4px;
}

/* BOTTOM NAV */
.bottom-nav {
  left: 0;
  right: 0;
  z-index: 60;
  position: fixed;
  bottom: 0;
  height: 64px;
  padding-bottom: var(--safe-area-bottom);
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  display: flex;
  align-items: center;
  justify-content: space-around;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* nav buttons */
.bottom-nav__item{
  border: none;
  background: transparent;
  padding: 6px 10px;
  margin: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(15,23,42,0.62);
  cursor: pointer;
  min-height: 44px;
  min-width: 64px;
  border-radius: 16px;
  transition: background 160ms ease, transform 120ms ease, color 160ms ease;
}

.bottom-nav__item:focus{
  outline: none;
}

.bottom-nav__item:focus-visible{
  outline: 2px solid rgba(37, 99, 235, 0.9);
  outline-offset: 3px;
  border-radius: 10px;
}


/* nav icons */
.nav-icon{
  width: 24px;
  height: 24px;
  display:block;
}

/* remove any old icon font */
.bottom-nav__icon {
  display: none;
}

/* active tab */
.bottom-nav__item--active{
  color: #0b1220;
  background: rgba(37, 99, 235, 0.10);
  box-shadow: 0 6px 16px rgba(2,6,23,0.06);
  transform: translateY(-1px);
}

/* helpers */
.bottom-padding {
  height: 24px;
}

/* Floating Luma FAB (used across app + demos) */
.luma-fab{
  position: fixed;
  right: 14px;
  bottom: calc(92px + var(--safe-area-bottom));
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  animation: ke-float 5.5s ease-in-out infinite;
}

/* removed duplicate keFloat definition; the ke-float keyframes defined earlier are used */

@media (prefers-reduced-motion: reduce){
  .luma-fab{ animation: none; }
}



/* When any modal is open, hide the floating Luma button so it never overlaps actions */
body.ke-modal-open .luma-fab{
  display: none !important;
}

.luma-fab img{
  width: 34px;
  height: 34px;
  object-fit: contain;
  display:block;
}

.luma-fab__dot{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,0.14);
}

.luma-fab:active{ transform: scale(0.985); }

/* STUDY PAGE STYLES */
.study-topbar {
  margin-top: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.study-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  margin-bottom: 2px;
}

.study-title {
  font-size: 18px;
  font-weight: 700;
  color: #020617;
}

.study-filter-btn {
  border: none;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(239, 246, 255, 0.95);
  color: #1d4ed8;
  border: 1px solid rgba(129, 140, 248, 0.35);
  cursor: pointer;
}

/* Study section wrapper */
.study-section {
  margin-top: 16px;
}

/* SUBJECT ROW */
.study-subject-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.study-subject-row::-webkit-scrollbar {
  height: 4px;
}

.study-subject-row::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.7);
  border-radius: 999px;
}

.study-subject-pill {
  min-width: 180px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(248, 250, 252, 0.95);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border 0.15s ease, box-shadow 0.15s ease, background 0.15s ease,
    transform 0.1s ease;
}

.study-subject-pill--active {
  background: radial-gradient(circle at 0% 0%, #1d4ed8, #3b82f6);
  border-color: rgba(37, 99, 235, 0.7);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

.study-subject-pill--active .study-subject-name,
.study-subject-pill--active .study-subject-meta {
  color: #e5f2ff;
}

.study-subject-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.study-subject-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.study-subject-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.study-subject-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

.study-subject-meta {
  font-size: 11px;
  color: #6b7280;
}

/* SUBJECT OVERVIEW CARD */
.study-overview-card {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}

.study-overview-left {
  flex: 1.3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.study-overview-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
}

.study-overview-title {
  font-size: 16px;
  font-weight: 700;
  color: #020617;
}

.study-overview-desc {
  font-size: 12px;
  color: #4b5563;
}

.study-overview-stats {
  margin-top: 6px;
  display: flex;
  gap: 12px;
}

.study-overview-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.study-overview-stat-number {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.study-overview-stat-label {
  font-size: 11px;
  color: #6b7280;
}

.study-overview-right {
  flex: 0.9;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.study-overview-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.98);
  border: 1px solid rgba(129, 140, 248, 0.4);
  font-size: 11px;
  color: #1f2937;
}

.study-overview-pill-icon {
  font-size: 13px;
}

/* CHAPTER LIST */
.study-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.study-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

.study-small-link {
  border: none;
  background: transparent;
  color: #2563eb;
  font-size: 11px;
  cursor: pointer;
}

/* Creator/Admin-only UI (hidden for students by default) */
.creator-only{ display:none; }
.creator-only.is-on{ display:inline-flex; }

.study-chapter-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.study-chapter-card {
  border-radius: 16px;
  padding: 10px 10px 9px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(226, 232, 240, 0.9);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.study-chapter-main {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.study-chapter-title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.study-chapter-meta {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
}

.study-chip {
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}

.study-chip--strong {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.study-chip--weak {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.study-chip--average {
  background: rgba(234, 179, 8, 0.12);
  color: #a16207;
}

/* PROGRESS BAR */
.study-chapter-progress-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.study-progress-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.9);
  overflow: hidden;
}

.study-progress-fill {
  height: 100%;
  border-radius: 999px;
}

.study-progress-fill--strong {
  background: linear-gradient(90deg, #22c55e, #16a34a);
}

.study-progress-fill--weak {
  background: linear-gradient(90deg, #f97373, #ef4444);
}

.study-progress-fill--average {
  background: linear-gradient(90deg, #facc15, #eab308);
}

.study-progress-label {
  font-size: 10px;
  color: #6b7280;
}

/* CHAPTER ACTIONS */
.study-chapter-actions {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.study-mini-btn {
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: #f9fafb;
  padding: 4px 8px;
  font-size: 11px;
  color: #374151;
  cursor: pointer;
}

/* Special chapter action: Learn with Luma */
.study-mini-btn--luma {
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(135deg, rgba(111,66,193,0.95), rgba(49,130,206,0.92));
  box-shadow: 0 10px 24px rgba(111, 66, 193, 0.25), 0 4px 10px rgba(0,0,0,0.08);
  transform: translateY(-0.5px);
}
.study-mini-btn--luma:hover {
  filter: brightness(1.02);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(111, 66, 193, 0.28), 0 6px 14px rgba(0,0,0,0.1);
}
.study-mini-btn--luma:active {
  transform: translateY(0px);
  box-shadow: 0 8px 18px rgba(111, 66, 193, 0.22), 0 3px 8px rgba(0,0,0,0.08);
}

.study-mini-btn--primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #e5f2ff;
}

/* STUDY TOOLS */
.study-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.study-tool-card {
  border-radius: 16px;
  padding: 10px 10px 9px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.98),
    rgba(239, 246, 255, 0.98)
  );
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.study-tool-icon {
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: rgba(239, 246, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.study-tool-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.study-tool-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.study-tool-title {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}

.study-tool-subtitle {
  font-size: 10px;
  color: #6b7280;
}

/* LUMA TIP CARD */
.study-luma-tip {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: radial-gradient(
    circle at 0% 0%,
    rgba(59, 130, 246, 0.12),
    #ffffff 60%
  );
}

.study-luma-tip-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.study-luma-tip-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #2563eb;
}

.study-luma-tip-body {
  font-size: 12px;
  color: #111827;
}

.study-luma-tip-btn {
  border-radius: 999px;
  border: none;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 600;
  background: #2563eb;
  color: #e5f2ff;
  cursor: pointer;
}

/* ANIMATIONS */
@keyframes luma-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* GENERIC HIDDEN UTILITY */
.hidden {
  display: none !important;
}

/* MODALS (PDF + QUIZ) */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  z-index: 40;
}


/* QUIZ UI */
.quiz-intro {
  font-size: 12px;
  color: #4b5563;
  margin-bottom: 10px;
}

.quiz-question {
  margin-bottom: 12px;
  padding: 10px 10px 9px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.quiz-question-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 11px;
  color: #6b7280;
}

.quiz-question-number {
  font-weight: 600;
  color: #111827;
}

.quiz-question-chip {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(219, 234, 254, 0.9);
  color: #1d4ed8;
  font-size: 10px;
}

.quiz-question-text {
  font-size: 12px;
  color: #111827;
  margin-bottom: 8px;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quiz-option {
  text-align: left;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: #f9fafb;
  padding: 6px 10px;
  font-size: 12px;
  color: #111827;
  cursor: pointer;
}

.quiz-option--correct {
  border-color: #16a34a;
  background: rgba(22, 163, 74, 0.08);
}

.quiz-option--wrong {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
}

.quiz-explanation {
  margin-top: 6px;
  font-size: 11px;
  color: #4b5563;
}

/* TOAST */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.98);
  color: #e5e7eb;
  font-size: 11px;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.6);
  z-index: 50;
}

/* RESPONSIVE (MOBILE) */
@media (max-width: 640px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 16px 14px 18px;
  }

  .hero-right {
    order: -1;
    margin-bottom: 8px;
  }

  .hero-luma-orbit {
    width: 240px;
    height: 240px;
  }

  .hero-luma-backplate {
    width: 200px;
    height: 200px;
  }

  .hero-luma-player {
    width: 210px;
    height: 210px;
  }

  .priority-card {
    flex-direction: column;
    gap: 10px;
  }

  .priority-right {
    justify-content: flex-start;
  }

  .study-overview-card {
    flex-direction: column;
  }

  .study-overview-right {
    justify-content: flex-start;
  }
}
/* GENERIC HIDDEN UTILITY */


/* MODALS (PDF + QUIZ) */



/* PDF SHELL */
.pdf-shell {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-pdf-frame {
  width: 100%;
  height: 60vh;
  border: none;
  border-radius: 12px;
  background: #020617;
}

.pdf-view-wrapper {
  position: relative;
}

.pdf-protect-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.02),
    rgba(15, 23, 42, 0.4)
  );
}

.pdf-protect-label {
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  color: #e5e7eb;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.6);
}

.pdf-empty {
  border-radius: 14px;
  border: 1px dashed rgba(148, 163, 184, 0.7);
  background: rgba(15, 23, 42, 0.02);
  padding: 14px 10px;
  text-align: left;
}

.pdf-empty-heading {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

.pdf-empty-body {
  font-size: 11px;
  color: #4b5563;
}

.pdf-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.pdf-download-btn {
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.7);
  background: #2563eb;
  color: #e5f2ff;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

/* QUIZ UI */
.quiz-intro {
  font-size: 12px;
  color: #4b5563;
  margin-bottom: 10px;
}

.quiz-question {
  margin-bottom: 12px;
  padding: 10px 10px 9px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.quiz-question-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 11px;
  color: #6b7280;
}

.quiz-question-number {
  font-weight: 600;
  color: #111827;
}

.quiz-question-chip {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(219, 234, 254, 0.9);
  color: #1d4ed8;
  font-size: 10px;
}

.quiz-question-text {
  font-size: 12px;
  color: #111827;
  margin-bottom: 8px;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quiz-option {
  text-align: left;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: #f9fafb;
  padding: 6px 10px;
  font-size: 12px;
  color: #111827;
  cursor: pointer;
}

.quiz-option--correct {
  border-color: #16a34a;
  background: rgba(22, 163, 74, 0.08);
}

.quiz-option--wrong {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
}

.quiz-explanation {
  margin-top: 6px;
  font-size: 11px;
  color: #4b5563;
}

/* TOAST */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.98);
  color: #e5e7eb;
  font-size: 11px;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.6);
  z-index: 50;
}
/* QUIZ SUMMARY */
.quiz-summary {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.4);
}

.quiz-summary-title {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 4px;
}

.quiz-summary-body {
  font-size: 11px;
  color: #4b5563;
}
/* ---------------------------
   QUIZ MODAL – HYBRID PREMIUM
   --------------------------- */



/* Base modal (PDF + Quiz) */
.modal {
  width: min(520px, 100% - 32px);
  max-height: calc(100% - 80px);
  background: radial-gradient(circle at 0% 0%, #f9fafb, #e5f0ff);
  border-radius: 20px;
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.6),
    0 0 0 1px rgba(148, 163, 184, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Auto dark theme if system is dark */
@media (prefers-color-scheme: dark) {
  .modal {
    background: radial-gradient(circle at 0% 0%, #020617, #020617);
    box-shadow:
      0 28px 80px rgba(0, 0, 0, 0.9),
      0 0 0 1px rgba(30, 64, 175, 0.4);
  }

  #quiz-modal .quiz-question {
    background: rgba(15, 23, 42, 0.98);
    border-color: rgba(55, 65, 81, 0.9);
  }

  #quiz-modal .quiz-summary {
    background: radial-gradient(circle at 0 0, rgba(30, 64, 175, 0.3), rgba(15, 23, 42, 0.9));
    border-color: rgba(30, 64, 175, 0.7);
    color: #e5e7eb;
  }
}

.modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  background: linear-gradient(135deg, #020617, #111827);
  color: #e5e7eb;
}

.modal-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.modal-close {
  border: none;
  background: radial-gradient(circle at 30% 20%, #1d4ed8, #020617);
  color: #e5e7eb;
  font-size: 16px;
  height: 28px;
  width: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.modal-close:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.9),
    0 10px 20px rgba(15, 23, 42, 0.8);
  opacity: 0.95;
}

.modal-body {
  padding: 12px 14px 16px;
  overflow-y: auto;
  background: radial-gradient(circle at 100% 0, rgba(191, 219, 254, 0.4), transparent);
}

/* Quiz intro text */
.quiz-intro {
  font-size: 12px;
  color: #4b5563;
  margin-bottom: 10px;
}

/* Premium question card */
.quiz-question {
  margin-bottom: 12px;
  padding: 10px 10px 9px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(148, 163, 184, 0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease,
    background 0.12s ease;
}

.quiz-question:hover {
  transform: translateY(-1px);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(129, 140, 248, 0.3);
}

/* Question header row */
.quiz-question-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.quiz-question-number {
  font-size: 11px;
  font-weight: 600;
  color: #0f172a;
}

.quiz-question-chip {
  padding: 3px 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 0 0, #2563eb, #4f46e5);
  color: #eff6ff;
  font-size: 10px;
  font-weight: 500;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.9);
}

/* PYQ trust badge (if you add one later) */
.quiz-question-chip--pyq {
  background: radial-gradient(circle at 0 0, #f59e0b, #eab308);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.9);
  color: #1f2933;
}

/* Question text */
.quiz-question-text {
  font-size: 12px;
  color: #111827;
  margin-bottom: 8px;
}

/* Options */
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quiz-option {
  position: relative;
  text-align: left;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: linear-gradient(135deg, #f9fafb, #eef2ff);
  padding: 7px 12px;
  font-size: 12px;
  color: #111827;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease,
    background 0.12s ease, transform 0.08s ease;
}

.quiz-option:hover:not(:disabled) {
  border-color: rgba(59, 130, 246, 0.9);
  box-shadow:
    0 10px 22px rgba(37, 99, 235, 0.18),
    0 0 0 1px rgba(59, 130, 246, 0.7);
  transform: translateY(-0.5px);
}

.quiz-option:disabled {
  cursor: default;
}

/* Selected / correct / wrong */
.quiz-option--correct {
  border-color: #16a34a;
  background: radial-gradient(circle at 0 0, #bbf7d0, #22c55e);
  color: #052e16;
  box-shadow:
    0 12px 28px rgba(22, 163, 74, 0.28),
    0 0 0 1px rgba(21, 128, 61, 0.9);
}

.quiz-option--wrong {
  border-color: #ef4444;
  background: radial-gradient(circle at 0 0, #fee2e2, #f97373);
  color: #7f1d1d;
  box-shadow:
    0 12px 28px rgba(239, 68, 68, 0.25),
    0 0 0 1px rgba(185, 28, 28, 0.9);
}

/* Explanation */
.quiz-explanation {
  margin-top: 6px;
  font-size: 11px;
  color: #4b5563;
}

/* Summary section */
.quiz-summary {
  margin-top: 12px;
  padding: 10px 11px;
  border-radius: 16px;
  background: radial-gradient(circle at 0 0, rgba(37, 99, 235, 0.12), #eff6ff);
  border: 1px solid rgba(37, 99, 235, 0.4);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.22);
}

.quiz-summary-title {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 4px;
}

.quiz-summary-body {
  font-size: 11px;
  color: #4b5563;
  white-space: pre-line; /* allow \n\n formatting from JS */
}
/* -------------------------------------
   QUIZ – FONT UPGRADE (BIGGER & PREMIUM)
   ------------------------------------- */

/* Import premium font */

#quiz-modal {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Increase question number */
.quiz-question-number {
  font-size: 13px;
}

/* Increase question text */
.quiz-question-text {
  font-size: 15px;
  line-height: 1.45;
}

/* Increase option sizes */
.quiz-option {
  font-size: 14px;
  padding: 10px 14px;
}

/* Increase explanation */
.quiz-explanation {
  font-size: 13px;
  line-height: 1.4;
}

/* Increase summary section */
.quiz-summary-title {
  font-size: 14px;
}

.quiz-summary-body {
  font-size: 14px;
  line-height: 1.45;
}

/* Increase badge sizes */
.quiz-question-chip,
.quiz-question-chip--pyq {
  font-size: 12px;
  padding: 4px 10px;
}
/* ================================
   NDL–2050 QUIZ REFINEMENTS (v2)
   Bigger text, softer glass cards,
   smoother correct/wrong highlights
   ================================ */

/* Slightly slimmer header + nicer spacing */
#quiz-modal .modal-header {
  padding: 10px 16px 8px;
}

#quiz-modal .modal-title {
  font-size: 13px;
}

/* Make quiz body feel like soft glass */
#quiz-modal .modal-body {
  background: radial-gradient(circle at 100% 0, rgba(191, 219, 254, 0.5), rgba(249, 250, 251, 0.96));
}

/* Question card – softer white + blur */
#quiz-modal .quiz-question {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
}

/* Slightly bigger, easier text */
#quiz-modal .quiz-question-text {
  font-size: 16px;
  line-height: 1.5;
}

#quiz-modal .quiz-question-number {
  font-size: 13px;
}

/* Options – more padding + bigger text */
#quiz-modal .quiz-option {
  font-size: 15px;
  padding: 12px 18px;
}

/* Explanation & analysis – a bit larger */
#quiz-modal .quiz-explanation {
  font-size: 13px;
  line-height: 1.45;
}

#quiz-modal .quiz-summary-title {
  font-size: 14px;
}

#quiz-modal .quiz-summary-body {
  font-size: 15px;
  line-height: 1.5;
}

/* Correct option – smoother green glass */
#quiz-modal .quiz-option--correct {
  border-color: #16a34a;
  background: radial-gradient(circle at 0 0, #dcfce7, #4ade80);
  color: #052e16;
  box-shadow:
    0 12px 28px rgba(22, 163, 74, 0.25),
    0 0 0 1px rgba(22, 163, 74, 0.9);
}

/* Wrong option – softer red glass */
#quiz-modal .quiz-option--wrong {
  border-color: #f97373;
  background: radial-gradient(circle at 0 0, #fee2e2, #fecaca);
  color: #7f1d1d;
  box-shadow:
    0 12px 28px rgba(239, 68, 68, 0.2),
    0 0 0 1px rgba(248, 113, 113, 0.9);
}
/* NDL–2050 Quiz – micro polish */

#quiz-modal .quiz-intro {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 14px;
  color: #374151;
}

/* Slight spacing so first question doesn't touch intro too much */
#quiz-modal .quiz-question:first-of-type {
  margin-top: 2px;
}

/* Analysis panel – more glassy + subtle border */
#quiz-modal .quiz-summary {
  background: radial-gradient(circle at 0 0, rgba(191, 219, 254, 0.55), #eef2ff);
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(191, 219, 254, 0.7);
}

/* Small top margin from last question */
#quiz-modal .quiz-summary {
  margin-top: 14px;
}
/* ============================
   NDL–2050 QUIZ FINAL POLISH
   ============================ */

/* --- Neon progress bar at top of quiz --- */
.quiz-progress {
  margin-bottom: 12px;
}

.quiz-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.quiz-progress-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

.quiz-progress-count {
  font-size: 11px;
  font-weight: 500;
  color: #0f172a;
}

.quiz-progress-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: radial-gradient(circle at 0 0, rgba(148, 163, 184, 0.5), rgba(226, 232, 240, 0.9));
  overflow: hidden;
}

.quiz-progress-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #3b82f6, #a855f7);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.7);
  transition: width 0.18s ease-out;
}

/* --- Even softer glass question cards --- */
#quiz-modal .quiz-question {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
}

/* --- Lighter glassy green / red states --- */
#quiz-modal .quiz-option--correct {
  border-color: rgba(34, 197, 94, 0.7);
  background: linear-gradient(
    135deg,
    rgba(187, 247, 208, 0.9),
    rgba(34, 197, 94, 0.55)
  );
  color: #052e16;
  box-shadow:
    0 12px 26px rgba(22, 163, 74, 0.18),
    0 0 0 1px rgba(22, 163, 74, 0.8);
}

#quiz-modal .quiz-option--wrong {
  border-color: rgba(248, 113, 113, 0.8);
  background: linear-gradient(
    135deg,
    rgba(254, 226, 226, 0.95),
    rgba(248, 113, 113, 0.6)
  );
  color: #7f1d1d;
  box-shadow:
    0 12px 26px rgba(248, 113, 113, 0.16),
    0 0 0 1px rgba(239, 68, 68, 0.9);
}

/* --- Explanation spacing + readability --- */
#quiz-modal .quiz-explanation {
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px dashed rgba(148, 163, 184, 0.65);
  font-size: 13px;
  line-height: 1.5;
}

/* --- Intro text – a little more breathing room --- */
#quiz-modal .quiz-intro {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 14px;
  color: #374151;
}

/* --- Luma analysis card – glass + donut meter --- */
#quiz-modal .quiz-summary {
  margin-top: 14px;
  padding: 10px 11px 11px;
  border-radius: 18px;
  background: radial-gradient(circle at 0 0, rgba(191, 219, 254, 0.55), #eff6ff);
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(191, 219, 254, 0.7);
}

.quiz-summary-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.quiz-summary-meter {
  height: 40px;
  width: 40px;
  border-radius: 999px;
  background: conic-gradient(#e5e7eb 0, #e5e7eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.quiz-summary-meter-inner {
  position: absolute;
  height: 28px;
  width: 28px;
  border-radius: 999px;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.4);
}

.quiz-summary-meter-value {
  font-size: 11px;
  font-weight: 600;
  color: #0f172a;
}

.quiz-summary-subtitle {
  font-size: 11px;
  color: #6b7280;
}

.quiz-summary-body {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.5;
  white-space: pre-line; /* keep line breaks from JS */
}
/* =============================
   Study – align with new markup
   ============================= */

/* Subject scroll container used in study.html */
.study-subject-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.study-subject-scroll::-webkit-scrollbar {
  height: 4px;
}
.study-subject-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.7);
  border-radius: 999px;
}

/* Map new icon/text wrappers to existing styles */
.study-subject-pill__icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.study-subject-pill__icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.study-subject-pill__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Current subject card used in study.html (.study-current...) */
.study-current {
  margin-top: 16px;
  border-radius: 20px;
  background: #ffffff;
  padding: 12px 12px 11px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.study-current__top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.study-current__title {
  font-size: 18px;
  font-weight: 700;
  color: #020617;
}

.study-current__desc {
  font-size: 12px;
  color: #4b5563;
  margin-top: 4px;
}

.study-current__suggest {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.suggest-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.98);
  border: 1px solid rgba(191, 219, 254, 0.9);
  font-size: 11px;
  color: #111827;
}

.suggest-pill__icon {
  font-size: 16px;
}

.suggest-pill__text {
  white-space: nowrap;
}

.study-current__stats {
  margin-top: 6px;
  display: flex;
  gap: 12px;
}

.study-current__stats .stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.study-current__stats .stat-label {
  font-size: 11px;
  color: #6b7280;
}

.study-current__stats .stat-value {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

/* =======================
   Onboarding – premium UI
   ======================= */

.onboarding-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.75));
  z-index: 40;
}

.onboarding-modal {
  width: min(500px, 92vw);
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.25), transparent 60%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.22), transparent 55%),
    #f8fafc;
  padding: 20px 22px 16px;
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.45);
}

.onboarding-header {
  margin-bottom: 14px;
}

.onboarding-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.02));
  color: #2563eb;
  margin-bottom: 6px;
}

.onboarding-pill::before {
  content: "✨";
  font-size: 12px;
}

.onboarding-title {
  font-size: 20px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 4px;
}

.onboarding-subtitle {
  font-size: 13px;
  color: #64748b;
}

.onboarding-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 10px 0 16px;
}

.onboarding-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.onboarding-field label,
.onboarding-field .form-label {
  font-weight: 500;
  color: #0f172a;
}

.onboarding-field select {
  border-radius: 14px;
  border: 1px solid #d4d4dd;
  padding: 9px 12px;
  font-size: 13px;
  background: linear-gradient(135deg, #f9fafb, #e5f2ff);
  outline: none;
  box-shadow: 0 6px 16px rgba(148, 163, 184, 0.16);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(135deg, #f9fafb, #e5f2ff),
    url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236b7280' d='M5.25 7.5L10 12.25L14.75 7.5H5.25Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
}

.onboarding-field select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
}

.onboarding-help {
  font-size: 11px;
  color: #9ca3af;
}

.onboarding-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.onboarding-primary,
.onboarding-secondary {
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.onboarding-primary {
  background: linear-gradient(135deg, #2563eb, #22c1c3);
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.55);
}

.onboarding-primary::after {
  content: "➜";
  font-size: 12px;
}

.onboarding-secondary {
  background: #e5e7eb;
  color: #111827;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .onboarding-modal {
    width: 94vw;
    padding: 18px 16px 14px;
    border-radius: 24px;
  }

  .onboarding-title {
    font-size: 18px;
  }

  .onboarding-subtitle {
    font-size: 12px;
  }

  .onboarding-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .onboarding-field select {
    font-size: 12px;
    padding: 8px 11px;
  }
}

/* --- Phase-1 onboarding: group + tracks --- */
.onb-tracks{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.chip{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.7);border:1px solid rgba(0,0,0,0.10);font-size:12px;line-height:1;}
.onboarding-hint{margin-top:8px;font-size:12px;color:rgba(0,0,0,0.58);}


/* Prevent iOS zoom on form controls */
select, input, textarea { font-size: 16px; }

.brand-meta{font-size:12px;color:rgba(51,65,85,0.8);margin-top:2px;}

.app { padding-bottom: 84px; }

/* ================================
   Chapter Slug Hint (View all) v1
   Minimal additive styling
================================ */
.chapters-modal-meta{
  font-size: 13px;
  color: #5c6570;
  margin-bottom: 10px;
}
.chapters-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chapter-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.85);
}
.chapter-row .chapter-left{
  min-width: 0;
}
.chapter-row .chapter-title{
  font-weight: 600;
  font-size: 14px;
  color: #1e2a35;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 520px;
}
.chapter-row .chapter-slug{
  font-size: 12px;
  color: #5c6570;
}
.chapter-row .mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.copy-btn{
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.9);
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
}
.copy-btn:active{
  transform: scale(0.98);
}
.chapters-modal-help{
  margin-top: 12px;
  font-size: 12px;
  color: #6a7582;
}
.chapters-modal-help .mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/* Chapters modal tools (Missing Content Checklist) */
.chapters-tools{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin:10px 0 14px;
}
.chapters-tool-btn{
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.10);
  color:#0b1220;
  padding:8px 12px;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
}
.chapters-tool-btn.secondary{
  background:rgba(255,255,255,0.0);
}
.chapters-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  opacity:0.9;
}
.chapters-status{
  margin-left:auto;
  font-weight:700;
  opacity:0.85;
}
.avail-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:rgba(0,0,0,0.06);
}
.avail-ok{ }
.avail-miss{ }
.chapter-row.missing{
  opacity:0.55;
}


/* Ask Doubt button in chapter list (student-safe) */
.ask-btn{
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.9);
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.ask-btn:active{ transform: translateY(1px); }

/* =========================
   CHAT PAGE (Ask Doubt)
   ========================= */
.chat-page {
  --chat-ok: #10b981;
  --chat-bad: #ef4444;
  --chat-muted: rgba(15, 23, 42, 0.6);
}

.chat-card { padding: 14px; }

.chat-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.chat-title {
  font-size: 18px;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.chat-sub {
  margin: 0;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.7);
  line-height: 1.35;
}

.chat-api {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  font-size: 12px;
  white-space: nowrap;
}

.chat-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.25);
}

.chat-dot--ok { background: var(--chat-ok); }
.chat-dot--bad { background: var(--chat-bad); }

.chat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

@media (max-width: 520px) {
  .chat-grid { grid-template-columns: 1fr; }
  .chat-card__top { flex-direction: column; align-items: stretch; }
  .chat-api { width: fit-content; }
}

.chat-field { display: flex; flex-direction: column; gap: 6px; }
.chat-field--full { margin-top: 6px; }

.chat-label {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.75);
}

.chat-input,
.chat-textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}

.chat-textarea { resize: vertical; min-height: 96px; }

.chat-input:focus,
.chat-textarea:focus {
  border-color: rgba(15, 23, 42, 0.28);
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}

.chat-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.chat-btn {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
}

.chat-btn:disabled { opacity: 0.6; cursor: default; }

.chat-btn--primary {
  background: rgba(15, 23, 42, 0.9);
  color: white;
  border-color: rgba(15, 23, 42, 0.9);
}

.chat-result { margin-top: 14px; }

.chat-block {
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(15, 23, 42, 0.03);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 10px;
}

.chat-block__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(15, 23, 42, 0.6);
  margin-bottom: 6px;
}

.chat-block__value { font-size: 14px; line-height: 1.45; }

.chat-details {
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.chat-summary { cursor: pointer; font-weight: 600; font-size: 13px; }

.chat-ol, .chat-ul { margin: 10px 0 0 18px; padding: 0; }
.chat-ol li, .chat-ul li { margin: 6px 0; line-height: 1.4; }

.chat-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  font-size: 12px;
  margin-bottom: 10px;
}

.chat-error {
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
  color: rgba(127, 29, 29, 1);
  border-radius: 16px;
  padding: 12px;
}

.chat-muted { color: var(--chat-muted); font-size: 13px; }


/* =========================================
   Premium Polish v1 (non-breaking overrides)
   - typography, focus, motion, states
========================================= */

:root{
  --ke-fg: #0b1220;
  --ke-muted: rgba(15, 23, 42, 0.66);
  --ke-border: rgba(148, 163, 184, 0.28);
  --ke-card: #ffffff;
  --ke-bg: #f8fafc;
  --ke-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.08);
  --ke-shadow-md: 0 14px 34px rgba(15, 23, 42, 0.10);
  --ke-radius-lg: 18px;
  --ke-radius-md: 14px;
  --ke-radius-sm: 12px;
  --ke-ring: 0 0 0 4px rgba(99, 102, 241, 0.18);
}

html{
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
color: var(--ke-fg);
  background: var(--ke-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

img{
  max-width: 100%;
  height: auto;
}

/* Subtle elevate on hover (desktop) */
@media (hover:hover) and (pointer:fine){
  .card:hover{
    transform: translateY(-1px);
    box-shadow: var(--ke-shadow-md);
  }
  .bottom-nav__item:hover{ color: rgba(15,23,42,0.82); }
}

/* Smooth but calm motion */
.card, .bottom-nav, .bottom-nav__item, .chat-btn, .app-header{
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease;
}

/* Focus ring for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: none;
  box-shadow: var(--ke-ring);
  border-color: rgba(99, 102, 241, 0.55) !important;
}

/* Header + nav: slightly cleaner */
.app-header{
  background: rgba(248, 250, 252, 0.86);
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.bottom-nav{
  background: rgba(255,255,255,0.72);
  border-top: 1px solid rgba(148,163,184,0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.brand-logo{
  box-shadow: 0 10px 22px rgba(15,23,42,0.12);
}

/* Buttons: slightly richer */
.chat-btn{
  box-shadow: 0 10px 22px rgba(15,23,42,0.08);
}
.chat-btn:active{ transform: translateY(0px) scale(0.98); }
.chat-btn--primary{
  box-shadow: 0 14px 30px rgba(15,23,42,0.22);
}

/* Inputs: softer */
.chat-input:focus, .chat-textarea:focus{
  background: rgba(255,255,255,0.96);
}

/* Chat: premium thinking skeleton */
.chat-thinking{
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255,255,255,0.78);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--ke-shadow-sm);
  overflow: hidden;
}

.ke-shimmer{
  position: relative;
  border-radius: 999px;
  height: 10px;
  margin: 8px 0;
  background: rgba(15,23,42,0.06);
  overflow: hidden;
}
.ke-shimmer::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-60%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  animation: keShimmer 1.2s ease-in-out infinite;
}
.ke-shimmer.w-60{ width: 60%; }
.ke-shimmer.w-85{ width: 85%; }
.ke-shimmer.w-40{ width: 40%; }

@keyframes keShimmer{
  0%{ transform: translateX(-70%); }
  100%{ transform: translateX(70%); }
}

.chat-muted{
  color: rgba(15, 23, 42, 0.62);
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =====================
   Premium Polish v2
   Subtle micro-interactions + spacing rhythm
   (non-breaking additive layer)
   ===================== */

:root{
  --ke-radius: 18px;
  --ke-radius-lg: 22px;
  --ke-border: rgba(148,163,184,0.25);
  --ke-ink: rgba(15,23,42,0.92);
  --ke-muted: rgba(15,23,42,0.62);
  --ke-shadow: 0 14px 34px rgba(2,6,23,0.10);
}

/* Make tap/hover feel “native” */
button,
.bottom-nav__item,
.hero-cta,
.mini-btn,
.primary,
.chip,
.back-btn,
.card,
.study-card,
.test-card,
a{
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease, opacity .12s ease;
}

button:active,
.hero-cta:active,
.mini-btn:active,
.primary:active,
.bottom-nav__item:active{
  transform: scale(0.985);
}

@media (hover:hover){
  .hero-cta:hover,
  .mini-btn:hover,
  .primary:hover,
  .chip:hover{
    transform: translateY(-1px);
  }
}

/* Better focus ring (keyboard) */
:where(button, a, input, select, textarea):focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}

/* Bottom-nav: tiny active glow + tighter label */
.bottom-nav__item{ letter-spacing: 0.1px; }
.bottom-nav__item--active{
  color: #0b1220;
  font-weight: 650;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}

/* Cards: unify radius + border softness */
.card,
.mini-card,
.study-card,
.test-card{
  border-color: var(--ke-border) !important;
  border-radius: var(--ke-radius-lg) !important;
}

/* Headings across pages feel consistent */
h1,h2,h3{
  color: var(--ke-ink);
  letter-spacing: -0.2px;
}

/* Make long lists feel less “flat” */
.app-main::-webkit-scrollbar,
.app-content::-webkit-scrollbar{ width: 10px; }
.app-main::-webkit-scrollbar-thumb,
.app-content::-webkit-scrollbar-thumb{ background: rgba(148,163,184,0.35); border-radius: 999px; }


/* =====================
   Premium Polish v2 (non-breaking)
   ===================== */

:root{
  --ke-radius: 18px;
  --ke-radius-lg: 22px;
  --ke-border: rgba(148,163,184,0.25);
  --ke-ink: rgba(15,23,42,0.92);
  --ke-muted: rgba(15,23,42,0.62);
  --ke-shadow: 0 14px 34px rgba(2,6,23,0.10);
  --ke-shadow-press: 0 10px 26px rgba(2,6,23,0.10);
}

/* Smooth interactions */
button,
.bottom-nav__item,
.hero-cta,
.chip,
.luma-fab,
a{
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, opacity .12s ease;
}

button:active,
.hero-cta:active,
.bottom-nav__item:active,
.chip:active,
.luma-fab:active{
  transform: translateY(0px) scale(0.985);
}

/* Focus ring (accessible + premium) */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.18);
}

/* Subtle card hover on desktop only */
@media (hover:hover){
  .card:hover,
  .mini-card:hover,
  .study-card:hover,
  .test-card:hover{
    transform: translateY(-1px);
    box-shadow: 0 18px 44px rgba(2,6,23,0.12);
    border-color: rgba(59,130,246,0.20);
  }
}

/* Bottom nav: nicer active state (no layout changes) */
.bottom-nav__item{
  border-radius: 14px;
  padding: 6px 10px;
}
.bottom-nav__item--active{
  background: rgba(59,130,246,0.08);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.06);
}

/* Typography consistency helpers (safe) */
.ke-title{
  font-weight: 900;
  letter-spacing: -0.4px;
  color: var(--ke-ink);
}
.ke-muted{ color: var(--ke-muted); }

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
}

/* =====================================================================
   Desktop & large tablet layout refinement
   ---------------------------------------
   This block appears at the end of the stylesheet so that its rules
   override earlier mobile‑first definitions. On viewports 1024px wide
   and above we introduce a fixed navigation rail on the left and
   increase padding for the main content. The nav remains accessible
   at all times without overlapping modals or headers, and labels
   remain visible for discoverability. */

@media (min-width: 1024px) {
  /* Shift the entire app to the right to make room for the nav rail. */
  .app {
    margin-left: 96px;
    max-width: calc(100% - 96px);
  }

  /* Expand the main content’s padding to provide breathing room. */
  .app-main,
  .app-content {
    padding: 24px 32px 32px;
    overflow-y: auto;
    /* Constrain content width for better readability on wide screens */
    max-width: 900px;
    margin: 0 auto;
  }

  /* Fixed vertical navigation rail anchored to the viewport’s left. */
  .bottom-nav {
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 88px;
    /* Use dynamic viewport height on iOS/Android to avoid 100vh bugs. Provide
       100vh as a fallback for older browsers. */
    height: 100vh;
    height: 100dvh;
    padding-top: calc(72px + var(--safe-area-top));
    padding-bottom: calc(24px + var(--safe-area-bottom));
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    border-top: none;
    border-right: 1px solid rgba(148, 163, 184, 0.22);
    border-left: none;
    background: rgba(248, 250, 252, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: none;
    z-index: 60;
  }

  /* Vertical nav item layout with full‑width click targets. */
  .bottom-nav__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
    margin: 0;
    min-width: 0;
    width: 100%;
    border-radius: 0;
    gap: 4px;
  }

  /* Desktop nav hover and active states. */
  .bottom-nav__item:hover {
    background: rgba(37, 99, 235, 0.08);
    color: #0b1220;
  }
  .bottom-nav__item--active {
    background: rgba(37, 99, 235, 0.14);
    color: #0b1220;
    box-shadow: inset 2px 0 0 0 rgba(37, 99, 235, 0.55);
    transform: none;
  }

  .bottom-nav__label {
    font-size: 11px;
    line-height: 1.2;
  }

  /* Remove bottom padding from main areas since nav is not at bottom. */
  .app-main {
    padding-bottom: 32px;
  }
  .app-content {
    padding-bottom: 32px;
  }

  /* Reposition the floating FAB away from the nav. */
  .luma-fab {
    right: 24px;
    bottom: 32px;
  }
}


/* === Stability v1.1: Bottom nav active highlight (tight + premium) === */
.bottom-nav{
  overflow: hidden; /* keep glow inside bar */
}

.bottom-nav__item{
  position: relative;
}

.bottom-nav__item::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;                 /* keeps highlight close to bottom bar */
  width: 46px;
  height: 46px;
  transform: translateX(-50%);
  border-radius: 16px;
  background: rgba(59,130,246,0.08);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.06);
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
}

.bottom-nav__item--active::before{
  opacity: 1;
}

.bottom-nav__item--active{
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important; /* avoid floating away from bottom */
  color: #111827;
  font-weight: 600;
}

.bottom-nav__item:active{
  transform: none !important;
}

.nav-icon{
  position: relative;
  z-index: 1; /* above highlight */
}

.bottom-nav__label{
  position: relative;
  z-index: 1;
}
/* === End Stability v1.1 === */



/* QUIZ BUTTONS (modal actions) */
.btn{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(148,163,184,0.55);
  background: rgba(255,255,255,0.78);
  color:#0f172a;
  font-weight:600;
  font-size:14px;
  line-height:1;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  box-shadow: 0 8px 24px rgba(15,23,42,0.08);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 28px rgba(15,23,42,0.10);
}
.btn:active{
  transform: translateY(1px);
  box-shadow: 0 6px 18px rgba(15,23,42,0.10);
}
.btn:focus{
  outline:none;
}
.btn:focus-visible{
  outline: 3px solid rgba(37,99,235,0.25);
  outline-offset: 2px;
}
.btn[disabled], .btn:disabled{
  opacity:0.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.btn.btn-primary{
  background: linear-gradient(180deg, rgba(37,99,235,0.95), rgba(37,99,235,0.85));
  border-color: rgba(37,99,235,0.85);
  color:#ffffff;
}
.btn.btn-primary:hover{
  background: linear-gradient(180deg, rgba(37,99,235,1), rgba(37,99,235,0.9));
}
.btn.btn-secondary{
  background: rgba(255,255,255,0.72);
  border-color: rgba(148,163,184,0.55);
  color:#0f172a;
}



/* ===== QUIZ POLISH v1.2 (premium, calm) ===== */
.quiz-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  margin-top:12px;
  flex-wrap:wrap;
}
.quiz-actions .spacer{ flex:1; }

.ke-btn{
  appearance:none; -webkit-appearance:none;
  border:1px solid rgba(148,163,184,0.55);
  background: rgba(255,255,255,0.78);
  color:#0f172a;
  font-weight:700;
  font-size:14px;
  line-height:1;
  padding:10px 14px;
  border-radius:14px;
  cursor:pointer;
  box-shadow: 0 10px 26px rgba(15,23,42,0.10);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.ke-btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 32px rgba(15,23,42,0.12); }
.ke-btn:active{ transform: translateY(0px); box-shadow: 0 8px 20px rgba(15,23,42,0.10); }
.ke-btn:disabled{ opacity:0.55; cursor:not-allowed; transform:none; box-shadow: 0 6px 16px rgba(15,23,42,0.06); }

.ke-btn--primary{
  border-color: rgba(59,130,246,0.45);
  background: linear-gradient(180deg, rgba(59,130,246,0.18), rgba(59,130,246,0.10));
}
.ke-btn--ghost{
  background: rgba(255,255,255,0.52);
}
.ke-btn--danger{
  border-color: rgba(239,68,68,0.40);
  background: linear-gradient(180deg, rgba(239,68,68,0.10), rgba(255,255,255,0.55));
}

.quiz-summary{
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
  border:1px solid rgba(226,232,240,0.9);
  box-shadow: 0 10px 26px rgba(15,23,42,0.06);
}
.quiz-summary-top{
  display:flex;
  gap:12px;
  align-items:center;
}
.quiz-donut{
  width:86px; height:86px;
  flex:0 0 86px;
}
.quiz-summary-title{
  font-weight:900;
  font-size:14px;
  color:#0f172a;
}
.quiz-summary-sub{
  margin-top:4px;
  font-size:12px;
  color:#475569;
}
.quiz-mentor{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.35);
  background: rgba(248,250,252,0.70);
  color:#0f172a;
  font-size:13px;
  line-height:1.35;
}
.quiz-mentor small{
  display:block;
  margin-top:6px;
  color:#64748b;
  font-size:12px;
}
.quiz-tags{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.quiz-tag{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.45);
  background: rgba(255,255,255,0.70);
  color:#0f172a;
}
.quiz-tag--good{
  border-color: rgba(34,197,94,0.45);
  background: rgba(34,197,94,0.10);
}
.quiz-tag--need{
  border-color: rgba(245,158,11,0.45);
  background: rgba(245,158,11,0.10);
}

.quiz-seg{
  display:flex;
  gap:8px;
  margin-top:12px;
}
.quiz-seg button{
  flex:1;
}

.quiz-review{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.quiz-review-item{
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(226,232,240,0.9);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 20px rgba(15,23,42,0.04);
}
.quiz-review-q{
  font-weight:800;
  font-size:13px;
  color:#0f172a;
}
.quiz-review-meta{
  margin-top:6px;
  font-size:12px;
  color:#475569;
}
.quiz-review-exp{
  margin-top:8px;
  font-size:12px;
  color:#0f172a;
  line-height:1.4;
  border-left:3px solid rgba(59,130,246,0.35);
  padding-left:10px;
}


/* Hide FAB on chat + welcome/onboarding screens */
body.ke-page-chat .luma-fab,
body.ke-page-welcome .luma-fab{
  display: none !important;
}


/* Answer card */
.answer-card{
  background: var(--ke-card);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 18px;
  box-shadow: var(--ke-shadow);
  padding: 14px 14px 16px;
  overflow: hidden;
}
.answer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.answer-title{
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 16px;
  color: var(--ke-fg);
}
.answer-confidence{
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(59,130,246,0.10);
  border: 1px solid rgba(59,130,246,0.22);
  color: var(--ke-blue);
  flex: 0 0 auto;
}
.answer-final{
  color: var(--ke-fg);
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.answer-steps-wrap{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(148,163,184,0.14);
}
.answer-subtitle{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(71,85,105,0.85);
  margin-bottom: 6px;
}
.answer-steps{
  margin: 0;
  padding: 0 0 0 18px;
  list-style-position: inside;
  color: var(--ke-fg);
  font-size: 14.5px;
  line-height: 1.55;
}
.answer-steps li{
  margin: 6px 0;
  overflow-wrap: anywhere;
}
.answer-note{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(148,163,184,0.16);
  color: rgba(15,23,42,0.78);
  font-size: 13px;
  line-height: 1.45;
}

.answer-meta-row{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
  opacity: 0.92;
}

/* Phase-4: Learning Object sections (calm, card-based) */
.ke-lo-sec{margin-top:12px}
.ke-lo-sec-title{font-weight:650;font-size:13px;opacity:.85;margin-bottom:6px}
.ke-lo-sec-body p{margin:0 0 8px 0;line-height:1.55}
.ke-lo-footer{margin-top:14px;padding-top:10px;border-top:1px solid rgba(148,163,184,0.18);font-size:12px;opacity:0.85}
.ke-lo-visual{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.65);border:1px solid rgba(15,23,42,.08)}
.ke-lo-visual-title{font-weight:650;margin-bottom:6px}
.ke-lo-visual-kind{font-size:12px;opacity:.7;margin-bottom:8px}
.ke-lo-visual-steps{margin:0;padding-left:18px}
.ke-lo-visual-steps li{margin:4px 0;line-height:1.45}
.ke-lo-visual-hint{margin-top:8px;font-size:12px;opacity:.75}


.ke-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(148,163,184,0.20);
  background: rgba(255,255,255,0.66);
  color: rgba(15,23,42,0.78);
}

.ke-pill--ok{
  border-color: rgba(34,197,94,0.25);
  background: rgba(34,197,94,0.08);
  color: rgba(21,128,61,1);
}
.ke-pill--warn{
  border-color: rgba(245,158,11,0.30);
  background: rgba(245,158,11,0.10);
  color: rgba(180,83,9,1);
}
.ke-pill--bad{
  border-color: rgba(239,68,68,0.25);
  background: rgba(239,68,68,0.08);
  color: rgba(185,28,28,1);
}

/* Improve readability when we render bold/code inline */
.answer-final strong,
.answer-steps strong{ font-weight: 800; }
.answer-final code,
.answer-steps code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(15,23,42,0.06);
  border: 1px solid rgba(148,163,184,0.22);
}

/* --------------------------------------------------------------------------
   Premium: Answer mode selector (Quick / Deep / Exam)
   -------------------------------------------------------------------------- */
.ke-seg{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.ke-seg__btn{
  appearance:none;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(255,255,255,0.72);
  color: rgba(15,23,42,0.86);
  font-weight: 800;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform 0.08s ease, background 0.12s ease, border-color 0.12s ease;
}
.ke-seg__btn:active{ transform: scale(0.98); }
.ke-seg__btn--active{
  border-color: rgba(59,130,246,0.35);
  background: rgba(59,130,246,0.10);
  color: var(--ke-blue);
}
.ke-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(255,255,255,0.70);
  font-size: 12px;
  font-weight: 750;
}
.ke-chip--ok{ border-color: rgba(34,197,94,0.25); background: rgba(34,197,94,0.07); color: rgba(21,128,61,0.98); }
.ke-chip--warn{ border-color: rgba(245,158,11,0.25); background: rgba(245,158,11,0.08); color: rgba(146,64,14,0.98); }
.ke-chip--neutral{ opacity: 0.88; }

/* Study: AI Quick Recall / 1‑min revision modal */
.ke-rev-loading{padding:14px 12px;}
.ke-rev-loading-title{font-weight:900;font-size:14px;}
.ke-rev-loading-sub{margin-top:6px;opacity:.85;line-height:1.4;}
.ke-rev-error{padding:14px 12px;font-weight:700;}
.ke-rev-answer .answer-card{margin:0;}

/* ---------------------------------------------
   HOME: AI demo scroller (mini cards)
---------------------------------------------- */
.hscroll{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 14px 14px;
  margin: 0 -14px;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 14px;
  -webkit-overflow-scrolling: touch;
}
.hscroll::-webkit-scrollbar{ display: none; }
.mini-card{
  flex: 0 0 82%;
  max-width: 360px;
  scroll-snap-align: start;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(148,163,184,0.16);
  box-shadow: 0 16px 40px rgba(2,8,23,0.10);
}
@media (min-width: 520px){
  .mini-card{ flex-basis: 46%; }
}
.mini-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(59,130,246,0.10);
  border: 1px solid rgba(59,130,246,0.18);
  color: rgba(30,64,175,0.90);
}
.mini-title{
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ke-fg);
}
.mini-desc{
  margin: 6px 0 0;
  color: rgba(12,25,50,0.72);
  font-size: 14px;
  line-height: 1.4;
}
.btn.btn-dark{
  background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
  color: white;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 14px 28px rgba(2,8,23,0.22);
}
.btn.btn-dark:active{ transform: translateY(1px); }


/* Revision Cards (app-native) */
.ke-rev-wrap{padding:14px 12px; display:flex; flex-direction:column; gap:12px;}
.ke-rev-section{background:#ffffff; border:1px solid rgba(15,23,42,.08); border-radius:16px; padding:12px;}
.ke-rev-h{font-weight:900; font-size:13px; margin-bottom:8px; color:#0b1220;}
.ke-rev-list{margin:0; padding-left:18px; color:#0f172a; line-height:1.5; font-size:12.5px;}
.ke-rev-list li{margin:6px 0;}
.ke-rev-empty{padding:14px 12px;}
.ke-rev-empty-title{font-weight:900; font-size:14px;}
.ke-rev-empty-sub{margin-top:6px; opacity:.85; line-height:1.45; font-size:12px;}
.ke-rev-visuals{display:grid; grid-template-columns:1fr; gap:10px;}
.ke-rev-fig{margin:0; padding:10px; border:1px dashed rgba(15,23,42,.12); border-radius:14px; background:rgba(15,23,42,.02);}
.ke-rev-fig img{max-width:100%; height:auto; display:block;}
.ke-rev-fig figcaption{margin-top:6px; font-size:11px; opacity:.8; line-height:1.35;}

/* =========================================================
   PATCH v1.1 — Quiz modal layering fix
   - Ensure modals sit above the navigation on all devices
   --------------------------------------------------------- */

/* Maintain high z‑index for modal overlays without altering nav layout */
.modal-overlay { z-index: 120 !important; }
.modal { z-index: 121 !important; }

/* On large screens allow horizontal scroll areas to wrap so that
   desktop users with a mouse can view all cards without relying on
   swipe gestures. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .hscroll {
    overflow-x: visible !important;
    flex-wrap: wrap !important;
    scroll-snap-type: none !important;
  }
  .hscroll > * {
    flex: 1 1 320px !important;
    max-width: 420px !important;
  }
}


/* Phase-2.1 Auth UI helpers (minimal, matches existing calm style) */
.pill-btn{
  flex:1;
  border-radius:999px;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight:800;
  cursor:pointer;
}
.pill-btn.active{
  border-color: rgba(15,23,42,0.35);
  box-shadow: 0 10px 24px rgba(2,6,23,0.12);
}
.field-label{
  display:block;
  font-size:12px;
  font-weight:800;
  opacity:0.75;
  margin-bottom:6px;
}
.field-input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.82);
  outline:none;
  font-size:14px;
}
.primary-btn{
  border-radius:14px;
  padding:12px 14px;
  border:1px solid rgba(15,23,42,0.25);
  background: rgba(15,23,42,0.92);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.ghost-btn{
  border-radius:14px;
  padding:12px 14px;
  border:1px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.65);
  font-weight:900;
  cursor:pointer;
}
.hidden{ display:none !important; }

/* ------------------------------------------------------------------------- */
/* Language selector */
/* The language selector is used in the header of the index and chat pages. It
   matches the aesthetic of other form controls with a semi‑transparent
   background, subtle border and rounded corners. */
.lang-select {
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 12px;
  color: #0f172a;
  min-height: 32px;
  appearance: none;
  cursor: pointer;
}
.lang-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4);
}


/* KnowEasy Billing Meter */
.ke-chip-row{display:flex;gap:8px;flex-wrap:wrap;}
.ke-meter__track{height:10px;border-radius:999px;background:rgba(15,23,42,0.08);overflow:hidden;border:1px solid rgba(148,163,184,0.28);}
.ke-meter__fill{height:100%;border-radius:999px;background:rgba(15,23,42,0.78);}
.ke-info{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;border:1px solid rgba(148,163,184,0.5);font-size:12px;line-height:1;opacity:0.8;margin-left:6px;cursor:help;}
.ke-info:hover{opacity:1;}

/* ---------- Upgrade page micro-polish (visual only) ---------- */
/* 1) Plan badge as a calm pill */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight:900;
  font-size:12px;
  letter-spacing:0.2px;
}

/* 2) Section title hierarchy: Booster is primary, Plan selection is secondary */
.section:nth-of-type(1) .section-title{
  font-size:16px;
  font-weight:900;
  letter-spacing:0.2px;
}
.section:nth-of-type(2) .section-title{
  font-size:14px;
  font-weight:800;
  opacity:0.88;
}

/* 3) Billing cycle lock clarity line (visual hint only) */
.section:nth-of-type(2) .card:nth-of-type(1){
  position:relative;
  padding-bottom:30px !important;
}
.section:nth-of-type(2) .card:nth-of-type(1)::after{
  content:"\1F512  Changes apply at renewal"; /* 🔒 */
  position:absolute;
  left:12px;
  bottom:10px;
  font-size:12px;
  opacity:0.65;
}