/* ==========================================================================
   Devika Prep Portal — Style System
   JEE Main B.Arch & NATA 2027 — Offline Edition
   Fonts are system-native on purpose: this software must run fully offline,
   so no external font or icon services are ever loaded.
   ========================================================================== */

:root {
  /* ---- Colour tokens (official exam-portal palette) ---- */
  --navy-900: #0b2545;
  --navy-800: #12345c;
  --navy-700: #1a4472;
  --blue-600: #1565c0;
  --blue-500: #1e7fe0;
  --blue-50:  #eaf3fc;

  --bg:        #eef1f6;
  --surface:   #ffffff;
  --surface-2: #f6f8fb;
  --border:    #dbe2ea;
  --border-strong: #c3ccd8;

  --text:        #1b2531;
  --text-muted:  #5c6b7a;
  --text-faint:  #8a97a6;

  --green:      #1e7e34;
  --green-bg:   #e8f5ea;
  --red:        #c62828;
  --red-bg:     #fdecec;
  --purple:     #6a1b9a;
  --purple-bg:  #f2e9f8;
  --amber:      #a5680a;
  --amber-bg:   #fbf1de;

  /* ---- Type ---- */
  --font-ui:   "Segoe UI", "Segoe UI Web", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono: "Consolas", "Roboto Mono", "SFMono-Regular", Menlo, monospace;

  /* ---- Layout ---- */
  --topbar-h: 60px;
  --sidenav-w: 240px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(11, 37, 69, 0.06), 0 1px 1px rgba(11, 37, 69, 0.04);
  --shadow-md: 0 4px 14px rgba(11, 37, 69, 0.10);
  --transition: 160ms ease;
}

/* ---- Reset ---- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Consistent, visible focus ring everywhere (keyboard accessibility) */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.icon { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.topbar {
  height: var(--topbar-h);
  background: var(--navy-900);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: var(--shadow-sm);
}
.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  margin: 0 auto;
}
.nav-toggle:hover { background: rgba(255,255,255,0.08); }

.topbar-brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.5px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-title { font-weight: 600; font-size: 15px; }
.brand-sub { font-size: 11.5px; color: #b7c4d6; letter-spacing: 0.2px; }

.topbar-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-family: var(--font-mono);
  color: #dce6f2;
  white-space: nowrap;
}
.topbar-chip--candidate .icon { width: 14px; height: 14px; fill: #dce6f2; }
.topbar-chip--candidate { font-family: var(--font-ui); font-weight: 600; }

/* ==========================================================================
   LAYOUT / SIDE NAV
   ========================================================================== */
.layout {
  display: grid;
  grid-template-columns: var(--sidenav-w) 1fr;
  min-height: calc(100vh - var(--topbar-h));
}

.sidenav {
  background: var(--navy-800);
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  color: #c7d3e2;
  font-size: 13.6px;
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.nav-item .icon { fill: #93a5bc; transition: fill var(--transition); }
.nav-item:hover {
  background: rgba(255,255,255,0.06);
  color: #ffffff;
}
.nav-item:hover .icon { fill: #ffffff; }
.nav-item.active {
  background: var(--blue-600);
  color: #ffffff;
}
.nav-item.active .icon { fill: #ffffff; }

.sidenav-footer {
  margin-top: auto;
  padding: 14px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sidenav-footer span { font-size: 11.5px; color: #8fa0b6; }
.sidenav-footer-sub { color: #5f7488 !important; }

.nav-scrim {
  display: none;
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  background: rgba(11, 21, 38, 0.45);
  z-index: 30;
}

/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */
.content {
  padding: 24px 28px 48px;
  max-width: 1180px;
  width: 100%;
}

/* ---- Generic screen header used by every route ---- */
.screen-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.screen-title { font-size: 22px; font-weight: 700; color: var(--navy-900); }
.screen-subtitle { font-size: 13.5px; color: var(--text-muted); margin-top: 4px; }
.breadcrumb { font-size: 12.5px; color: var(--text-faint); margin-bottom: 6px; }
.breadcrumb a { color: var(--blue-600); font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }

/* ---- Welcome banner ---- */
.welcome-banner {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.welcome-banner h1 { font-size: 20px; font-weight: 700; }
.welcome-banner p { font-size: 13px; color: #c4d3e6; margin-top: 5px; }
.welcome-meta {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.welcome-meta-item { text-align: right; }
.welcome-meta-value {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
}
.welcome-meta-label { font-size: 11px; color: #b7c4d6; text-transform: uppercase; letter-spacing: 0.4px; }

/* ---- Motivation strip ---- */
.motivation-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--amber-bg);
  border: 1px solid #ecd9ab;
  color: #7a5205;
  border-radius: var(--radius-md);
  padding: 11px 16px;
  font-size: 13px;
  margin-bottom: 22px;
}
.motivation-strip .icon { fill: #a5680a; width: 16px; height: 16px; }

/* ---- Stat cards ---- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.stat-card-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.stat-card-value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--navy-900);
  margin-top: 6px;
}
.stat-card-hint {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 4px;
}

/* ---- Section titles inside content ---- */
.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-900);
  margin: 4px 0 12px;
}

/* ---- Module / nav cards ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}
.module-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.module-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--border-strong);
}
.module-card-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
}
.module-card-icon .icon { fill: var(--blue-600); width: 20px; height: 20px; }
.module-card h3 { font-size: 15px; font-weight: 700; color: var(--navy-900); }
.module-card p { font-size: 12.8px; color: var(--text-muted); flex-grow: 1; }
.module-card-cta {
  align-self: flex-start;
  font-size: 12.8px;
  font-weight: 700;
  color: var(--blue-600);
  display: flex;
  align-items: center;
  gap: 5px;
}
.module-card:hover .module-card-cta { text-decoration: underline; }

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge--soon { background: var(--amber-bg); color: var(--amber); }
.badge--ready { background: var(--green-bg); color: var(--green); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn--primary { background: var(--blue-600); color: #fff; }
.btn--primary:hover { background: var(--blue-500); }
.btn--ghost { background: transparent; color: var(--blue-600); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--blue-50); }

/* ---- Placeholder / "coming soon" screen ---- */
.placeholder {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 46px 30px;
  text-align: center;
  max-width: 620px;
  margin: 10px auto 0;
}
.placeholder-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.placeholder-icon .icon { width: 26px; height: 26px; fill: var(--blue-600); }
.placeholder h2 { font-size: 17px; font-weight: 700; color: var(--navy-900); margin-bottom: 8px; }
.placeholder p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 18px; }
.placeholder .roadmap-tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-faint);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  display: inline-block;
  margin-bottom: 18px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .nav-toggle { display: flex; }

  .sidenav {
    position: fixed;
    left: 0;
    top: var(--topbar-h);
    width: 260px;
    transform: translateX(-100%);
    transition: transform var(--transition);
    z-index: 35;
    box-shadow: var(--shadow-md);
  }
  .sidenav.open { transform: translateX(0); }
  .nav-scrim.open { display: block; }

  .content { padding: 18px 16px 40px; }
  .welcome-banner { flex-direction: column; align-items: flex-start; }
  .welcome-meta { width: 100%; justify-content: space-between; gap: 10px; }
}

@media (max-width: 600px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .brand-sub { display: none; }
  .topbar-chip--candidate span { display: none; }
}

/* ==========================================================================
   v1.3 Hardening Release — Save Failure Warning Banner
   Shown across Practice Mode, Mock Test, and Result screens whenever
   localStorage.setItem() fails (e.g. iPad Safari Private Browsing), so
   Devika is never left thinking her progress was saved when it wasn't.
   ========================================================================== */
.save-warning-banner {
  background: var(--red);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  position: relative;
  z-index: 50;
}

/* ==========================================================================
   v1.59 — Image Zoom System (Standing Rule)
   Every question/reference image must be zoom-enabled:
   - Desktop (hover-capable, fine pointer): hover-magnify lens on the image.
   - Touch / all devices: tap opens a fullscreen lightbox with pinch-zoom
     and pan (drag), since the app's viewport disables native pinch-zoom
     (user-scalable=no) for layout stability elsewhere in the app.
   Applies automatically via event delegation to any current or future
   .qimage / .qimage-strip img / .ref-image-strip img — no per-file wiring
   needed when new data/images are added.
   ========================================================================== */

.qimage-strip, .ref-image-strip {
  overflow: visible;
}

img.qimage, .qimage-strip img, .ref-image-strip img {
  cursor: zoom-in;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  max-width: 100%;
  transition: transform 120ms ease, box-shadow 120ms ease;
  touch-action: manipulation;
}

/* Desktop hover-magnify: only for devices with a real mouse + hover support.
   Touch devices skip this so a finger-tap doesn't accidentally trigger it. */
@media (hover: hover) and (pointer: fine) {
  img.qimage.iz-hover-zoom, .qimage-strip img.iz-hover-zoom, .ref-image-strip img.iz-hover-zoom {
    position: relative;
    z-index: 60;
    box-shadow: var(--shadow-md);
    transform: scale(2.1);
  }
}

/* ---- Fullscreen Lightbox (tap-to-fullscreen, pinch/drag zoom) ---- */
.iz-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(11, 21, 35, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}
.iz-lightbox-overlay.iz-open {
  opacity: 1;
  pointer-events: auto;
}
.iz-lightbox-imgwrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.iz-lightbox-imgwrap img {
  max-width: 92vw;
  max-height: 88vh;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  transition: transform 0ms;
}
.iz-lightbox-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iz-lightbox-close:hover { background: rgba(255,255,255,0.26); }
.iz-lightbox-report {
  position: absolute;
  top: 16px;
  left: 18px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(198, 40, 40, 0.22);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.iz-lightbox-report:hover { background: rgba(198, 40, 40, 0.36); }
.iz-lightbox-report:disabled { background: rgba(30, 126, 52, 0.30); border-color: rgba(255,255,255,0.35); cursor: default; }
.iz-lightbox-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  background: rgba(255,255,255,0.10);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ==========================================================================
   v1.61 — Dark Mode + Font-Size Control (Settings > Display Preferences)
   Dark mode only overrides the colour tokens; the navy topbar/sidenav were
   already dark-styled in both themes, so they need no separate override.
   Font-size uses CSS `zoom` (Chrome/Edge/Safari 15+) scoped to `.content`
   only, so the topbar/sidenav stay a stable size for navigation.
   ========================================================================== */

html[data-theme="dark"] {
  --bg:        #101722;
  --surface:   #182233;
  --surface-2: #1e2a3d;
  --border:    #2c3a4f;
  --border-strong: #3a4a63;

  --text:        #e7ecf3;
  --text-muted:  #a9b6c7;
  --text-faint:  #78879c;

  --blue-50:  #17293f;
  --green-bg: #16301f;
  --red-bg:   #3a1a1a;
  --purple-bg: #2a1f3d;
  --amber-bg: #362a12;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] img.qimage,
html[data-theme="dark"] .qimage-strip img,
html[data-theme="dark"] .ref-image-strip img {
  background: #fff; /* scanned exam pages are white; keep them legible on dark bg */
}

html[data-font-size="large"] .content { zoom: 1.15; }
html[data-font-size="xlarge"] .content { zoom: 1.3; }

/* ---- Display Preferences controls (Settings screen) ---- */
.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.pref-row:last-child { border-bottom: none; }
.pref-row-label { font-size: 14px; font-weight: 600; color: var(--text); }
.pref-row-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pref-segmented {
  display: flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.pref-segmented button {
  border: none;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
  border-left: 1px solid var(--border-strong);
}
.pref-segmented button:first-child { border-left: none; }
.pref-segmented button.active { background: var(--blue-600); color: #fff; }

/* ==========================================================================
   v1.61 — Practice by Chapter/Topic (topic chip row)
   ========================================================================== */
.topic-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.topic-chip {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.topic-chip:hover { background: var(--blue-50); border-color: var(--blue-500); }

/* ==========================================================================
   v1.62 — Recurring Question Patterns (Analytics page)
   ========================================================================== */
.pattern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.pattern-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  padding: 14px;
  cursor: pointer;
  transition: border-color var(--transition), transform var(--transition);
}
.pattern-card:hover { border-color: var(--blue-500); transform: translateY(-1px); }
.pattern-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.pattern-card-top h3 { margin: 0; font-size: 14.5px; }
.pattern-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-600);
  background: var(--blue-50);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.pattern-sample {
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 10px;
  line-height: 1.4;
}

/* Step-by-step solution rendering (v1.99) -- each "Step N: ..." from the
   solution text now renders as its own paragraph, textbook-style, instead
   of being squashed into one run-on line. Covers both Practice Mode's
   .solution-panel and the Mistake Notebook's .mistake-solution. */
.solution-panel .solution-step,
.mistake-solution .solution-step {
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--blue-100, #dbeafe);
  line-height: 1.55;
  font-size: 14px;
}
.solution-panel .solution-step:last-child,
.mistake-solution .solution-step:last-child {
  margin-bottom: 0;
}
.solution-panel .solution-step strong,
.mistake-solution .solution-step strong {
  color: var(--blue-600, #2563eb);
}