/*
 * fmgminds/css/pg-theme.css
 * ─────────────────────────────────────────────────────────────
 * FMGMINDS — Premium Medical UI Theme (Phase 2)
 *
 * Design principles:
 *   • White + deep forest green — FMGE clinical authority
 *   • NOT a coaching/school palette — no bright orange CTAs — FMGMinds uses forest green authority
 *   • Typography-led hierarchy — readable at exam screen density
 *   • Restrained colour — functional, never decorative
 *   • Monochrome base with accent blue only for interaction
 *
 * Do NOT import this into any UG file.
 * ─────────────────────────────────────────────────────────────
 */

/* ─── Brand logo image (used alongside FMGMINDS wordmark) ─────────────── */
.npm-logo {
  height: 20px;
  width: 20px;
  vertical-align: middle;
  margin-right: 5px;
  display: inline-block;
  flex-shrink: 0;
  border-radius: 6px;
}

/* ─── Google Fonts ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');

/* ─── Design Tokens ──────────────────────────────────────────────────────── */
:root {

  /* ── Green scale (darkest → lightest) ─────────────────────────────────── */
  --pg-green-900:  #050F0A;   /* near-black green — topbar bg */
  --pg-green-800:  #0B2D1E;   /* deep header sections */
  --pg-green-700:  #134D34;   /* primary brand colour — GMAC green */
  --pg-green-600:  #1A6645;   /* sidebar, card headers */
  --pg-green-500:  #2E8B57;   /* interactive / links */
  --pg-green-400:  #4AAD78;   /* hover states */
  --pg-green-300:  #7DCBA4;   /* disabled interactive */
  --pg-green-200:  #B0DEC8;   /* light tints */
  --pg-green-100:  #D4EDE1;   /* subtle backgrounds */
  --pg-green-50:   #EAF4EE;   /* lightest surface tint */

  /* ── FMG Orange — brand accent (logo "FMG", CTAs, active states) ────── */
  --pg-orange:        #E8471A;   /* FMG brand orange — from logo */
  --pg-orange-dark:   #C43A12;   /* hover / pressed */
  --pg-orange-light:  #FF6B35;   /* lighter tint */
  --pg-orange-bg:     #FFF0EB;   /* surface tint */
  --pg-orange-border: #FBBDA8;   /* subtle border */

  /* ── Legacy aliases (kept for backward compat) ───────────────────────── */
  --pg-fmg-green:      var(--pg-orange);
  --pg-fmg-green-dark: var(--pg-orange-dark);
  --pg-fmg-green-light:var(--pg-orange-light);
  --pg-fmg-green-bg:   var(--pg-orange-bg);
  --pg-fmg-green-border:var(--pg-orange-border);

  /* ── White / neutral scale ────────────────────────────────────────────── */
  --pg-white:      #FFFFFF;
  --pg-grey-50:    #F5F8F6;   /* page background — slight green tint */
  --pg-grey-100:   #E8F0EB;   /* surface alt / zebra */
  --pg-grey-200:   #C8DDD4;   /* border light */
  --pg-grey-300:   #9ABFAF;   /* border medium */
  --pg-grey-400:   #8FA3B1;   /* placeholder / disabled text */
  --pg-grey-500:   #5D7A8A;   /* muted text */
  --pg-grey-700:   #2D4A5A;   /* secondary text */
  --pg-grey-900:   #0D1B2A;   /* primary text — not pure black */

  /* ── Semantic colours ─────────────────────────────────────────────────── */
  --pg-correct:    #1B6B3A;   /* correct answer — clinical green */
  --pg-correct-bg: #E8F5EE;
  --pg-incorrect:  #9B1C1C;   /* incorrect — deep red */
  --pg-incorrect-bg: #FEF2F2;
  --pg-warning:    #92400E;   /* amber warning */
  --pg-warning-bg: #EAF5EE;
  --pg-info:       #1E40AF;   /* info blue */
  --pg-info-bg:    #EAF4EE;

  /* Timer states */
  --pg-timer-normal:   var(--pg-white);
  --pg-timer-warning:  #FCD34D;   /* golden amber */
  --pg-timer-critical: #F87171;   /* soft red — not jarring */

  /* ── TRM accent ───────────────────────────────────────────────────────── */
  --pg-trm-gold:   #D4AF37;   /* Top Ranker Method gold accent */

  /* ── Palette (CBT question status) ────────────────────────────────────── */
  --pg-palette-not-visited:     #CBD5E1;
  --pg-palette-answered:        #16A34A;   /* brighter green — clearly answered */
  --pg-palette-not-answered:    #DC2626;   /* slightly brighter red */
  --pg-palette-marked:          #7C3AED;   /* brighter purple — clearly marked */
  --pg-palette-answered-marked: #2563EB;   /* vivid blue for answered+marked */

  /* ── Typography ───────────────────────────────────────────────────────── */
  --pg-font:       'Inter', 'Helvetica Neue', Arial, sans-serif;
  --pg-font-mono:  'JetBrains Mono', 'Courier New', monospace;

  --pg-text-xs:    0.6875rem;  /* 11px */
  --pg-text-sm:    0.8125rem;  /* 13px */
  --pg-text-base:  0.9375rem;  /* 15px — question text base */
  --pg-text-md:    1rem;       /* 16px */
  --pg-text-lg:    1.125rem;   /* 18px */
  --pg-text-xl:    1.25rem;    /* 20px */
  --pg-text-2xl:   1.5rem;     /* 24px */
  --pg-text-3xl:   1.875rem;   /* 30px */
  --pg-text-4xl:   2.25rem;    /* 36px */

  --pg-weight-regular: 400;
  --pg-weight-medium:  500;
  --pg-weight-semi:    600;
  --pg-weight-bold:    700;
  --pg-weight-black:   800;

  --pg-leading-tight:  1.25;
  --pg-leading-snug:   1.45;
  --pg-leading-normal: 1.6;
  --pg-leading-loose:  1.8;

  --pg-tracking-tight:  -0.02em;
  --pg-tracking-normal:  0;
  --pg-tracking-wide:    0.04em;
  --pg-tracking-wider:   0.08em;

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  --pg-s1:   0.25rem;    /* 4px */
  --pg-s2:   0.5rem;     /* 8px */
  --pg-s3:   0.75rem;    /* 12px */
  --pg-s4:   1rem;       /* 16px */
  --pg-s5:   1.25rem;    /* 20px */
  --pg-s6:   1.5rem;     /* 24px */
  --pg-s8:   2rem;       /* 32px */
  --pg-s10:  2.5rem;     /* 40px */
  --pg-s12:  3rem;       /* 48px */
  --pg-s16:  4rem;       /* 64px */

  /* ── Border radius ────────────────────────────────────────────────────── */
  --pg-r-xs:   2px;
  --pg-r-sm:   4px;
  --pg-r:      6px;
  --pg-r-md:   8px;
  --pg-r-lg:   12px;
  --pg-r-xl:   16px;
  --pg-r-2xl:  20px;
  --pg-r-full: 9999px;

  /* ── Elevation / shadow ───────────────────────────────────────────────── */
  --pg-shadow-xs:  0 1px 2px  rgba(5,15,10,0.05);
  --pg-shadow-sm:  0 1px 4px  rgba(5,15,10,0.07), 0 1px 2px rgba(5,15,10,0.04);
  --pg-shadow-md:  0 4px 12px rgba(5,15,10,0.08), 0 2px 4px rgba(5,15,10,0.05);
  --pg-shadow-lg:  0 8px 24px rgba(5,15,10,0.10), 0 4px 8px rgba(5,15,10,0.06);
  --pg-shadow-xl:  0 16px 48px rgba(5,15,10,0.14), 0 8px 16px rgba(5,15,10,0.08);

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --pg-ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --pg-transition: 180ms var(--pg-ease);
  --pg-transition-slow: 300ms var(--pg-ease);

  /* ── Z-index layers ───────────────────────────────────────────────────── */
  --pg-z-base:    1;
  --pg-z-raised:  10;
  --pg-z-overlay: 100;
  --pg-z-modal:   200;
  --pg-z-toast:   300;
}

/* ─── Reset & base ───────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing:  border-box;
  margin:      0;
  padding:     0;
}

html {
  font-family:              var(--pg-font);
  font-size:                16px;
  color:                    var(--pg-grey-900);
  background-color:         var(--pg-grey-50);
  line-height:              var(--pg-leading-normal);
  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;
  text-rendering:           optimizeLegibility;
  scroll-behavior:          smooth;
}

body { min-height: 100vh; }

img, svg, video { display: block; max-width: 100%; }
a { color: var(--pg-green-500); text-decoration: none; }
a:hover { color: var(--pg-green-400); }

/* ─── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family:    var(--pg-font);
  font-weight:    var(--pg-weight-bold);
  letter-spacing: var(--pg-tracking-tight);
  color:          var(--pg-green-700);
  line-height:    var(--pg-leading-tight);
}

h1 { font-size: var(--pg-text-4xl); font-weight: var(--pg-weight-black); }
h2 { font-size: var(--pg-text-3xl); }
h3 { font-size: var(--pg-text-2xl); }
h4 { font-size: var(--pg-text-xl);  }
h5 { font-size: var(--pg-text-lg);  }
h6 { font-size: var(--pg-text-md);  }

p  { font-size: var(--pg-text-base); line-height: var(--pg-leading-normal); color: var(--pg-grey-700); }

/* ─── Layout utilities ───────────────────────────────────────────────────── */
.pg-page    { display: flex; flex-direction: column; min-height: 100vh; }
.pg-container { max-width: 1280px; margin: 0 auto; padding: 0 var(--pg-s6); }
.pg-section { padding: var(--pg-s12) 0; }

/* ─── Premium Topbar ─────────────────────────────────────────────────────── */

/* ─── Global FMGMINDS Wordmark ──────────────────────────────────────────────── */
.fmg-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  text-decoration: none;
  color: #29A829;
  font-family: inherit;
}
.fmg-wordmark > span { color: inherit; }
/* Standalone logo class — works inside buttons and non-wordmark containers too */
.fmg-logo {
  width: 20px; height: 20px;
  object-fit: contain; border-radius: 5px;
  flex-shrink: 0; display: inline-block; vertical-align: middle;
}
.fmg-wordmark .fmg-logo {
  width: 20px; height: 20px;
  object-fit: contain;
  border-radius: 5px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
/* Mobile top bar wordmark — slightly smaller */
.pg-mobile-topbar__logo.fmg-wordmark { font-size: 15px; gap: 6px; }
.pg-mobile-topbar__logo.fmg-wordmark .fmg-logo { width: 18px; height: 18px; }

.pg-topbar {
  background:     var(--pg-green-900);
  border-bottom:  1px solid rgba(255,255,255,0.06);
  padding:        0 var(--pg-s6);
  height:         56px;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  position:       sticky;
  top:            0;
  z-index:        var(--pg-z-overlay);
  backdrop-filter: blur(8px);
}

.pg-topbar__logo {
  display:     flex;
  align-items: center;
  gap:         var(--pg-s2);
  text-decoration: none;
}

.pg-topbar__brand {
  font-size:      var(--pg-text-lg);
  font-weight:    var(--pg-weight-black);
  color:          var(--pg-white);
  letter-spacing: -0.03em;
}

.pg-topbar__brand em {
  font-style:  normal;
  color:       var(--pg-green-300);
  font-weight: var(--pg-weight-regular);
  font-size:   var(--pg-text-sm);
  letter-spacing: var(--pg-tracking-wide);
  text-transform: uppercase;
  margin-left: var(--pg-s2);
}

/* Orange "FMG" highlight inside brand wordmark */
.pg-topbar__brand .pg-green {
  color: var(--pg-orange);
  font-style: normal;
}

.pg-topbar__nav {
  display:    flex;
  list-style: none;
  gap:        var(--pg-s1);
}

.pg-topbar__nav a {
  color:           rgba(255,255,255,0.55);
  font-size:       var(--pg-text-sm);
  font-weight:     var(--pg-weight-medium);
  padding:         var(--pg-s2) var(--pg-s3);
  border-radius:   var(--pg-r);
  transition:      all var(--pg-transition);
  letter-spacing:  var(--pg-tracking-wide);
}

.pg-topbar__nav a:hover { color: var(--pg-white); background: rgba(255,255,255,0.07); }
.pg-topbar__nav a.active { color: var(--pg-white); background: rgba(255,255,255,0.10); }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.pg-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--pg-s2);
  padding:         var(--pg-s2) var(--pg-s4);
  height:          36px;
  border:          1.5px solid transparent;
  border-radius:   var(--pg-r);
  font-family:     var(--pg-font);
  font-size:       var(--pg-text-sm);
  font-weight:     var(--pg-weight-semi);
  letter-spacing:  var(--pg-tracking-wide);
  cursor:          pointer;
  text-decoration: none;
  white-space:     nowrap;
  transition:      all var(--pg-transition);
  user-select:     none;
}

/* Primary — brand orange */
.pg-btn--primary {
  background:   var(--pg-orange);
  color:        var(--pg-white);
  border-color: var(--pg-orange);
}
.pg-btn--primary:hover {
  background:   var(--pg-orange-dark);
  border-color: var(--pg-orange-dark);
  box-shadow:   0 4px 16px rgba(232,71,26,.30);
}

/* Secondary — outline */
.pg-btn--outline {
  background:   transparent;
  color:        var(--pg-green-600);
  border-color: var(--pg-grey-300);
}
.pg-btn--outline:hover {
  background:   var(--pg-green-50);
  border-color: var(--pg-green-300);
  color:        var(--pg-green-700);
}

/* Destructive — only for actual destructive actions */
.pg-btn--danger {
  background:   var(--pg-incorrect);
  color:        var(--pg-white);
  border-color: var(--pg-incorrect);
}
.pg-btn--danger:hover { opacity: 0.88; }

/* Ghost — visible on white backgrounds */
.pg-btn--ghost {
  background:   transparent;
  color:        var(--pg-grey-900);
  border-color: var(--pg-grey-200);
}
.pg-btn--ghost:hover { background: var(--pg-grey-100); color: var(--pg-grey-900); border-color: var(--pg-grey-300); }

/* Dark ghost — for topbar */
.pg-btn--ghost-dark {
  background:   transparent;
  color:        rgba(255,255,255,0.6);
  border-color: transparent;
}
.pg-btn--ghost-dark:hover { background: rgba(255,255,255,0.08); color: var(--pg-white); }

/* Forest — deep brand button (topbar CTAs, nav actions) */
.pg-btn--forest {
  background:   var(--pg-green-700);
  color:        var(--pg-white);
  border-color: var(--pg-green-700);
}
.pg-btn--forest:hover {
  background:   var(--pg-green-600);
  border-color: var(--pg-green-600);
  box-shadow:   0 4px 16px rgba(19,77,52,.30);
  transform:    translateY(-1px);
}

/* Forest outline */
.pg-btn--forest-outline {
  background:   transparent;
  color:        var(--pg-green-700);
  border-color: var(--pg-green-700);
}
.pg-btn--forest-outline:hover {
  background:   var(--pg-green-50);
  color:        var(--pg-green-800);
  border-color: var(--pg-green-600);
}

/* FMG brand CTA — orange */
.pg-btn--green {
  background:   var(--pg-orange);
  color:        var(--pg-white);
  border-color: var(--pg-orange);
}
.pg-btn--green:hover {
  background:   var(--pg-orange-dark);
  border-color: var(--pg-orange-dark);
  box-shadow:   0 4px 16px rgba(232,71,26,.32);
  transform:    translateY(-1px);
}

/* FMG orange outline — secondary brand CTA */
.pg-btn--green-outline {
  background:   transparent;
  color:        var(--pg-orange);
  border-color: var(--pg-orange);
}
.pg-btn--green-outline:hover {
  background:   var(--pg-orange-bg);
  color:        var(--pg-orange-dark);
}

/* Sizes */
.pg-btn--sm  { height: 30px; padding: var(--pg-s1) var(--pg-s3); font-size: var(--pg-text-xs); }
.pg-btn--lg  { height: 44px; padding: var(--pg-s3) var(--pg-s6); font-size: var(--pg-text-md); }
.pg-btn--full { width: 100%; }

.pg-btn[disabled], .pg-btn:disabled {
  opacity: 0.4;
  cursor:  not-allowed;
  pointer-events: none;
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.pg-card {
  background:    var(--pg-white);
  border:        1px solid var(--pg-grey-200);
  border-radius: var(--pg-r-lg);
  padding:       var(--pg-s6);
  box-shadow:    var(--pg-shadow-sm);
}

.pg-card--flat    { box-shadow: none; }
.pg-card--raised  { box-shadow: var(--pg-shadow-md); }
.pg-card--sunken  { background: var(--pg-grey-50); box-shadow: none; }

.pg-card__header {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  margin-bottom:  var(--pg-s4);
  padding-bottom: var(--pg-s4);
  border-bottom:  1px solid var(--pg-grey-200);
}

.pg-card__title {
  font-size:   var(--pg-text-md);
  font-weight: var(--pg-weight-bold);
  color:       var(--pg-green-700);
  letter-spacing: var(--pg-tracking-tight);
}

/* ─── Stat cards ─────────────────────────────────────────────────────────── */
.pg-stat {
  background:    var(--pg-white);
  border:        1px solid var(--pg-grey-200);
  border-radius: var(--pg-r-lg);
  padding:       var(--pg-s5) var(--pg-s4);
  display:       flex;
  flex-direction: column;
  gap:           var(--pg-s1);
  box-shadow:    var(--pg-shadow-xs);
}

.pg-stat__label {
  font-size:      var(--pg-text-xs);
  font-weight:    var(--pg-weight-semi);
  color:          var(--pg-grey-400);
  text-transform: uppercase;
  letter-spacing: var(--pg-tracking-wider);
}

.pg-stat__value {
  font-size:   var(--pg-text-3xl);
  font-weight: var(--pg-weight-black);
  color:       var(--pg-green-700);
  letter-spacing: var(--pg-tracking-tight);
  line-height: 1.1;
}

.pg-stat__delta {
  font-size:   var(--pg-text-xs);
  font-weight: var(--pg-weight-medium);
  color:       var(--pg-grey-400);
}

.pg-stat__delta.positive { color: var(--pg-correct); }
.pg-stat__delta.negative { color: var(--pg-incorrect); }

/* ─── Badges / tags ──────────────────────────────────────────────────────── */
.pg-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--pg-s1);
  padding:        2px var(--pg-s2);
  border-radius:  var(--pg-r-full);
  font-size:      var(--pg-text-xs);
  font-weight:    var(--pg-weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--pg-tracking-wide);
  white-space:    nowrap;
}

.pg-badge--forest    { background: var(--pg-green-50); color: var(--pg-green-700); border: 1px solid var(--pg-green-200); font-weight: var(--pg-weight-semi); }
.pg-badge--green   { background: var(--pg-correct-bg); color: var(--pg-correct); }
.pg-badge--red     { background: var(--pg-incorrect-bg); color: var(--pg-incorrect); }
.pg-badge--amber   { background: var(--pg-warning-bg); color: var(--pg-warning); }
.pg-badge--info    { background: var(--pg-info-bg);   color: var(--pg-info); }
.pg-badge--neutral { background: var(--pg-grey-100);  color: var(--pg-grey-500); }

/* ─── Form controls ──────────────────────────────────────────────────────── */
.pg-field { display: flex; flex-direction: column; gap: var(--pg-s1); }

.pg-label {
  font-size:   var(--pg-text-sm);
  font-weight: var(--pg-weight-semi);
  color:       var(--pg-grey-700);
}

.pg-label--required::after {
  content: ' *';
  color: var(--pg-incorrect);
}

.pg-input, .pg-select, .pg-textarea {
  width:         100%;
  padding:       var(--pg-s3) var(--pg-s4);
  height:        42px;
  border:        1.5px solid var(--pg-grey-300);
  border-radius: var(--pg-r);
  font-family:   var(--pg-font);
  font-size:     var(--pg-text-base);
  color:         var(--pg-grey-900);
  background:    var(--pg-white);
  outline:       none;
  transition:    border-color var(--pg-transition), box-shadow var(--pg-transition);
}

.pg-textarea { height: auto; min-height: 100px; resize: vertical; }

.pg-input:focus, .pg-select:focus, .pg-textarea:focus {
  border-color: var(--pg-green-500);
  box-shadow:   0 0 0 3px rgba(42,82,152,0.12);
}

.pg-input::placeholder, .pg-textarea::placeholder { color: var(--pg-grey-400); }

.pg-input--error { border-color: var(--pg-incorrect); }
.pg-input--error:focus { box-shadow: 0 0 0 3px rgba(155,28,28,0.12); }

.pg-field-hint {
  font-size: var(--pg-text-xs);
  color:     var(--pg-grey-400);
}
.pg-field-error { font-size: var(--pg-text-xs); color: var(--pg-incorrect); }

/* ─── Alert / notice ─────────────────────────────────────────────────────── */
.pg-alert {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--pg-s3);
  padding:       var(--pg-s3) var(--pg-s4);
  border-radius: var(--pg-r);
  font-size:     var(--pg-text-sm);
  border-left:   3px solid;
}

.pg-alert--error   { background: var(--pg-incorrect-bg); color: var(--pg-incorrect); border-color: var(--pg-incorrect); }
.pg-alert--success { background: var(--pg-correct-bg);   color: var(--pg-correct);   border-color: var(--pg-correct);   }
.pg-alert--warning { background: var(--pg-warning-bg);   color: var(--pg-warning);   border-color: var(--pg-warning);   }
.pg-alert--info    { background: var(--pg-info-bg);      color: var(--pg-info);      border-color: var(--pg-info);      }

/* ─── Divider ────────────────────────────────────────────────────────────── */
.pg-divider {
  display:     flex;
  align-items: center;
  gap:         var(--pg-s4);
  color:       var(--pg-grey-400);
  font-size:   var(--pg-text-xs);
  font-weight: var(--pg-weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--pg-tracking-wider);
}
.pg-divider::before, .pg-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--pg-grey-200);
}

/* ─── Progress bar ───────────────────────────────────────────────────────── */
.pg-progress {
  height:        6px;
  background:    var(--pg-grey-200);
  border-radius: var(--pg-r-full);
  overflow:      hidden;
}

.pg-progress__fill {
  height:        100%;
  border-radius: var(--pg-r-full);
  background:    var(--pg-green-500);
  transition:    width var(--pg-transition-slow);
}

.pg-progress__fill--correct  { background: var(--pg-correct);   }
.pg-progress__fill--warning  { background: var(--pg-warning);   }
.pg-progress__fill--incorrect { background: var(--pg-incorrect); }

/* ─── Timer ──────────────────────────────────────────────────────────────── */
.pg-timer {
  font-family:    var(--pg-font-mono);
  font-size:      var(--pg-text-xl);
  font-weight:    600;
  letter-spacing: var(--pg-tracking-wide);
  color:          var(--pg-timer-normal);
  padding:        var(--pg-s2) var(--pg-s4);
  border-radius:  var(--pg-r);
  background:     rgba(255,255,255,0.08);
  min-width:      110px;
  text-align:     center;
  transition:     color var(--pg-transition), background var(--pg-transition);
}

.pg-timer--warning  { color: var(--pg-timer-warning); }
.pg-timer--critical {
  color: var(--pg-timer-critical);
  animation: pg-pulse-timer 1s ease-in-out infinite;
}

@keyframes pg-pulse-timer {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* ─── Loading spinner ────────────────────────────────────────────────────── */
.pg-spinner {
  display:       inline-block;
  width:         18px;
  height:        18px;
  border:        2.5px solid var(--pg-grey-200);
  border-top:    2.5px solid var(--pg-green-500);
  border-radius: 50%;
  animation:     pg-spin 0.65s linear infinite;
  flex-shrink:   0;
}

.pg-spinner--sm { width: 14px; height: 14px; border-width: 2px; }
.pg-spinner--lg { width: 28px; height: 28px; border-width: 3px; }
.pg-spinner--white { border-color: rgba(255,255,255,0.25); border-top-color: #fff; }

@keyframes pg-spin { to { transform: rotate(360deg); } }

/* ─── Skeleton loading ───────────────────────────────────────────────────── */
.pg-skeleton {
  background:    linear-gradient(90deg, var(--pg-grey-100) 25%, var(--pg-grey-200) 50%, var(--pg-grey-100) 75%);
  background-size: 200% 100%;
  animation:     pg-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--pg-r);
}

@keyframes pg-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Table ──────────────────────────────────────────────────────────────── */
.pg-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--pg-text-sm);
}

.pg-table th {
  text-align:     left;
  padding:        var(--pg-s3) var(--pg-s4);
  background:     var(--pg-grey-50);
  color:          var(--pg-grey-500);
  font-weight:    var(--pg-weight-semi);
  font-size:      var(--pg-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--pg-tracking-wider);
  border-bottom:  2px solid var(--pg-grey-200);
  white-space:    nowrap;
}

.pg-table td {
  padding:       var(--pg-s3) var(--pg-s4);
  border-bottom: 1px solid var(--pg-grey-100);
  color:         var(--pg-grey-700);
  vertical-align: top;
}

.pg-table tr:last-child td { border-bottom: none; }
.pg-table tr:hover td { background: var(--pg-grey-50); }
.pg-table tr.pg-table--highlight td { background: var(--pg-green-50); font-weight: var(--pg-weight-semi); }

/* ─── Modal overlay ──────────────────────────────────────────────────────── */
.pg-modal-overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(5,15,10,0.55);
  backdrop-filter: blur(4px);
  z-index:        var(--pg-z-modal);
  display:        flex;
  align-items:    center;
  justify-content: center;
  padding:        var(--pg-s4);
  animation:      pg-fade-in 150ms ease;
}

.pg-modal {
  background:    var(--pg-white);
  border-radius: var(--pg-r-xl);
  box-shadow:    var(--pg-shadow-xl);
  padding:       var(--pg-s8);
  max-width:     480px;
  width:         100%;
  animation:     pg-slide-up 200ms var(--pg-ease);
}

.pg-modal__title {
  font-size:   var(--pg-text-xl);
  font-weight: var(--pg-weight-bold);
  color:       var(--pg-green-700);
  margin-bottom: var(--pg-s3);
}

.pg-modal__body {
  color:         var(--pg-grey-500);
  font-size:     var(--pg-text-base);
  line-height:   var(--pg-leading-normal);
  margin-bottom: var(--pg-s6);
}

.pg-modal__footer {
  display:         flex;
  justify-content: flex-end;
  gap:             var(--pg-s3);
}

@keyframes pg-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pg-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Tooltip ────────────────────────────────────────────────────────────── */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]::after {
  content:       attr(data-tooltip);
  position:      absolute;
  bottom:        calc(100% + 6px);
  left:          50%;
  transform:     translateX(-50%);
  background:    var(--pg-green-900);
  color:         var(--pg-white);
  font-size:     var(--pg-text-xs);
  font-weight:   var(--pg-weight-medium);
  padding:       var(--pg-s1) var(--pg-s2);
  border-radius: var(--pg-r-sm);
  white-space:   nowrap;
  pointer-events: none;
  opacity:       0;
  transition:    opacity var(--pg-transition);
  z-index:       var(--pg-z-toast);
}
[data-tooltip]:hover::after { opacity: 1; }

/* ─── Responsive breakpoints ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pg-topbar__nav { gap: 0; }
}

@media (max-width: 768px) {
  .pg-topbar__nav { display: none; }
  .pg-container   { padding: 0 var(--pg-s4); }
  h1 { font-size: var(--pg-text-3xl); }
  h2 { font-size: var(--pg-text-2xl); }
}

@media (max-width: 480px) {
  .pg-container { padding: 0 var(--pg-s3); }
}

/* ─── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .pg-topbar, .pg-sidebar, .pg-btn { display: none; }
  body { background: white; color: black; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   AI Explanation — TRM 7-Section Reasoning Layout
   Used by: practice mode · mock AI panel · review · TRM drills
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header row (badge + optional actions) ────────────────────────────────── */
.pg-explain-header {
  display:         flex;
  align-items:     center;
  gap:             var(--pg-s3);
  margin-bottom:   var(--pg-s3);
  padding-bottom:  var(--pg-s3);
  border-bottom:   1px solid var(--pg-grey-200);
}

.pg-explain-badge {
  font-size:     var(--pg-text-xs);
  font-weight:   700;
  padding:       2px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.pg-explain-badge--fresh  { background: var(--pg-green-50);  color: var(--pg-green-600); }
.pg-explain-badge--cached { background: var(--pg-grey-100); color: var(--pg-grey-500); }

/* ── Section stack ────────────────────────────────────────────────────────── */
.pg-explain-sections {
  display:        flex;
  flex-direction: column;
  gap:            var(--pg-s2);
}

.pg-explain-section {
  padding:        var(--pg-s3) var(--pg-s4);
  border-radius:  var(--pg-r-md);
  border-left:    3px solid transparent;
}

.pg-explain-section__head {
  display:         flex;
  align-items:     center;
  gap:             6px;
  font-size:       var(--pg-text-xs);
  font-weight:     800;
  letter-spacing:  0.07em;
  text-transform:  uppercase;
  margin-bottom:   var(--pg-s2);
  opacity:         1;
}

.pg-explain-section__icon {
  font-size: 0.85rem;
  line-height: 1;
}

.pg-explain-section__body {
  font-size:   var(--pg-text-sm);
  line-height: 1.65;
  color:       var(--pg-grey-900);
}

.pg-explain-arrow {
  color:       var(--pg-green-400);
  font-weight: 700;
}

/* ── Per-section colour themes ────────────────────────────────────────────── */

/* ◈ Clinical Pattern — kept for cached explanations, same as logic */
.pg-explain-section--clinical {
  border-left:   4px solid #2563eb;
  background:    linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-top:    1px solid #bfdbfe;
  border-right:  1px solid #dbeafe;
  border-bottom: 1px solid #dbeafe;
}
.pg-explain-section--clinical .pg-explain-section__head { color: #1d4ed8; }

/* → Stepwise Reasoning — kept for cached explanations, same as logic */
.pg-explain-section--reasoning {
  border-left:   4px solid #2563eb;
  background:    linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-top:    1px solid #bfdbfe;
  border-right:  1px solid #dbeafe;
  border-bottom: 1px solid #dbeafe;
}
.pg-explain-section--reasoning .pg-explain-section__head { color: #1d4ed8; }
.pg-explain-section--reasoning .pg-explain-chain__step {
  background: rgba(37,99,235,0.1);
  color: #1d4ed8;
}
.pg-explain-section--reasoning .pg-explain-chain__arrow { color: #2563eb; }

/* ⚠ Trap Identified — vivid amber */
.pg-explain-section--trap {
  border-left: 4px solid #f59e0b;
  background:  linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-top:  1px solid #fde68a;
  border-right: 1px solid #fef3c7;
  border-bottom: 1px solid #fef3c7;
}
.pg-explain-section--trap .pg-explain-section__head {
  color: #92400e;
}
.pg-explain-section--trap .pg-explain-trap-type {
  background: #fef3c7;
  color: #92400e;
  border-color: #f59e0b;
}

/* ✕ Elimination Logic — cool slate, each row alternates */
.pg-explain-section--elimination {
  border-left: 4px solid #64748b;
  background:  linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-top:  1px solid #e2e8f0;
  border-right: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}
.pg-explain-section--elimination .pg-explain-section__head {
  color: #475569;
}
.pg-explain-section--elimination .pg-explain-elim-key {
  color: #64748b;
  background: #e2e8f0;
  border-radius: 3px;
  padding: 0 3px;
}

/* ◉ Memory Anchor — rich violet */
.pg-explain-section--anchor {
  border-left: 4px solid #7c3aed;
  background:  linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
  border-top:  1px solid #ddd6fe;
  border-right: 1px solid #ede9fe;
  border-bottom: 1px solid #ede9fe;
}
.pg-explain-section--anchor .pg-explain-section__head {
  color: #5b21b6;
}

/* ◆ Exam Insight — deep forest green, FMGE authority */
.pg-explain-section--insight {
  border-left: 4px solid #134D34;
  background:  linear-gradient(135deg, #EAF4EE 0%, #dbeafe 100%);
  border-top:  1px solid #B0DEC8;
  border-right: 1px solid #dbeafe;
  border-bottom: 1px solid #dbeafe;
}
.pg-explain-section--insight .pg-explain-section__head {
  color: #1e3a8a;
}

/* ◦/✓/✗ Reflection — neutral, then dynamic */
.pg-explain-section--reflection {
  border-left: 4px solid #94a3b8;
  background:  linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-top:  1px solid #e2e8f0;
  border-right: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}
.pg-explain-section--reflection .pg-explain-section__head { color: #475569; }

/* ✓ Correct — clean emerald */
.pg-explain-section--reflection.is-correct {
  border-left: 4px solid #059669;
  background:  linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-top:  1px solid #a7f3d0;
  border-right: 1px solid #d1fae5;
  border-bottom: 1px solid #d1fae5;
}
.pg-explain-section--reflection.is-correct .pg-explain-section__head { color: #065f46; }
.pg-explain-section--reflection.is-correct .pg-explain-section__body p { color: #064e3b; }

/* ✗ Wrong — bold crimson, highest visual weight on the page */
.pg-explain-section--reflection.is-wrong {
  border-left: 4px solid #dc2626;
  background:  linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
  border-top:  1px solid #fecdd3;
  border-right: 1px solid #ffe4e6;
  border-bottom: 1px solid #ffe4e6;
}
.pg-explain-section--reflection.is-wrong .pg-explain-section__head { color: #991b1b; }
.pg-explain-section--reflection.is-wrong .pg-explain-section__body p { color: #7f1d1d; }

/* ── States ───────────────────────────────────────────────────────────────── */
.pg-explain-loading {
  display:     flex;
  align-items: center;
  gap:         var(--pg-s3);
  padding:     var(--pg-s4);
  color:       var(--pg-grey-500);
  font-size:   var(--pg-text-sm);
}

.pg-explain-error {
  padding:       var(--pg-s4);
  background:    var(--pg-incorrect-bg);
  border:        1px solid rgba(155,28,28,0.15);
  border-radius: var(--pg-r-md);
  color:         var(--pg-incorrect);
  font-size:     var(--pg-text-sm);
}

.pg-explain-fallback {
  font-size:   var(--pg-text-sm);
  line-height: 1.7;
  color:       var(--pg-grey-900);
  padding:     var(--pg-s2) 0;
}
.pg-explain-fallback p { margin: 0 0 var(--pg-s3); }

/* ── Mobile explain — prevent overflow, tighten layout ───────────────────── */
@media (max-width: 600px) {
  /* Word-wrap: long drug names / clinical terms break cleanly */
  .pg-explain-section__body,
  .pg-explain-fallback {
    word-break:    break-word;
    overflow-wrap: break-word;
  }

  /* Tighter padding so sections don't crowd the narrow screen */
  .pg-explain-section {
    padding: var(--pg-s2) var(--pg-s3);
  }

  /* Smaller font saves space without losing readability */
  .pg-explain-section__body {
    font-size: var(--pg-text-xs);
    line-height: 1.6;
  }

  /* Keep the stack tight */
  .pg-explain-sections {
    gap: var(--pg-s2);
  }

  /* Section head label also smaller */
  .pg-explain-section__head {
    font-size:    9px;
    margin-bottom: var(--pg-s1);
  }

  /* Practice card: reduce padding so explain has more room */
  .pg-pq-card {
    padding: var(--pg-s4);
  }

  /* Mock explain panel: full-width, no side margin */
  #pg-explain-panel {
    margin: var(--pg-s3) 0 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRM EXPLANATION — PREMIUM RENDERING v2
   Reasoning chains, trap badges, elimination rows, error analysis
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tighter section base (no background here — per-section rules set it) ─── */
.pg-explain-section {
  border-radius: 0 var(--pg-r-md) var(--pg-r-md) 0;
  padding:       var(--pg-s3) var(--pg-s4);
}
.pg-explain-section p {
  margin:      0 0 var(--pg-s2);
  line-height: 1.65;
  color:       var(--pg-grey-900);
}
.pg-explain-section p:last-child { margin-bottom: 0; }

/* ── Section head — UPPERCASE label, no decorative icons ─────────────────── */
.pg-explain-section__head {
  display:        flex;
  align-items:    center;
  gap:            6px;
  font-size:      9px;
  font-weight:    800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom:  var(--pg-s2);
}
.pg-explain-section__icon {
  font-size:   11px;
  line-height: 1;
  font-style:  normal;
}

/* ── Reasoning chain ─────────────────────────────────────────────────────── */
.pg-explain-chain {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         4px;
  margin:      4px 0;
}
.pg-explain-chain__step {
  background:    var(--pg-green-50);
  color:         var(--pg-green-700);
  padding:       2px 8px;
  border-radius: var(--pg-r-sm);
  font-size:     var(--pg-text-xs);
  font-weight:   500;
  white-space:   nowrap;
}
.pg-explain-chain__arrow {
  color:       var(--pg-green-400);
  font-size:   var(--pg-text-sm);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Trap type badge ─────────────────────────────────────────────────────── */
.pg-explain-trap-type {
  display:          inline-block;
  background:       #EAF4EE;
  color:            #92400e;
  border:           1px solid #fde68a;
  border-radius:    var(--pg-r-sm);
  padding:          1px 7px;
  font-size:        var(--pg-text-xs);
  font-weight:      700;
  letter-spacing:   0.03em;
  text-transform:   uppercase;
  margin-right:     4px;
}
.pg-explain-trap-sep {
  color: var(--pg-grey-400);
}

/* ── Elimination rows ────────────────────────────────────────────────────── */
.pg-explain-elim-row {
  display:       grid;
  grid-template-columns: 20px 1fr;
  gap:           var(--pg-s2);
  align-items:   baseline;
  padding:       4px 0;
  border-bottom: 1px solid var(--pg-grey-100);
}
.pg-explain-elim-row:last-child { border-bottom: none; }

.pg-explain-elim-key {
  font-size:     var(--pg-text-xs);
  font-weight:   800;
  color:         var(--pg-grey-400);
  text-align:    center;
  font-family:   var(--pg-font-mono);
}
.pg-explain-elim-text {
  font-size:   var(--pg-text-sm);
  color:       var(--pg-grey-700);
  line-height: 1.55;
}

/* ── Error analysis (REFLECTION when wrong) — standout card ──────────────── */
.pg-explain-section--reflection.is-wrong {
  background:    #fef2f2;
  border-left:   3px solid var(--pg-incorrect);
  border-color:  rgba(155,28,28,0.12);
}
.pg-explain-section--reflection.is-wrong .pg-explain-section__head {
  color: var(--pg-incorrect);
}
.pg-explain-section--reflection.is-wrong .pg-explain-section__body p {
  color: #7f1d1d;
}

/* ── Correct reflection — understated positive ───────────────────────────── */
.pg-explain-section--reflection.is-correct {
  background:    #f0fdf4;
  border-left:   3px solid var(--pg-correct);
  border-color:  rgba(27,107,58,0.12);
}
.pg-explain-section--reflection.is-correct .pg-explain-section__head {
  color: var(--pg-correct);
}

/* ── Arrow span (inline →) ───────────────────────────────────────────────── */
.pg-explain-arrow {
  color:       var(--pg-green-400);
  font-weight: 700;
  margin:      0 2px;
}

/* ── Logic Chain card ────────────────────────────────────────────────────── */
.pg-explain-section--logic {
  border-left:   4px solid #2563eb;
  background:    linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-top:    1px solid #bfdbfe;
  border-right:  1px solid #dbeafe;
  border-bottom: 1px solid #dbeafe;
}
.pg-explain-section--logic .pg-explain-section__head { color: #1d4ed8; }

.pg-explain-logic-list {
  list-style:    none;
  display:       flex;
  flex-direction: column;
  gap:           var(--pg-s2);
  padding:       0;
  margin:        0;
  counter-reset: logic-step;
}
.pg-explain-logic-step {
  display:       grid;
  grid-template-columns: 22px 1fr;
  align-items:   baseline;
  gap:           var(--pg-s2);
  font-size:     var(--pg-text-sm);
  color:         #1e3a8a;
  line-height:   1.6;
  counter-increment: logic-step;
}
.pg-explain-logic-step::before {
  content:       counter(logic-step);
  display:       flex;
  align-items:   center;
  justify-content: center;
  width:         20px;
  height:        20px;
  background:    #2563eb;
  color:         #fff;
  font-size:     10px;
  font-weight:   800;
  border-radius: 50%;
  flex-shrink:   0;
  margin-top:    2px;
}

/* ── Elimination grid — correct row gets green tint ─────────────────────── */
.pg-explain-elim-grid {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}
.pg-explain-elim-row--correct {
  background:    #f0fdf4;
  border-radius: var(--pg-r-sm);
  padding:       4px 6px;
  margin:        0 -6px;
}
.pg-explain-elim-row--correct .pg-explain-elim-key {
  color:         #059669;
  background:    #dcfce7;
}
.pg-explain-elim-row--correct .pg-explain-elim-text {
  color:         #065f46;
  font-weight:   600;
}

/* ── Anchor visual emoji chain ───────────────────────────────────────────── */
.pg-explain-anchor-visual {
  font-size:     1.45rem;
  letter-spacing: 0.05em;
  line-height:   1.5;
  margin-bottom: var(--pg-s2);
}
.pg-explain-anchor-text {
  font-size:   var(--pg-text-sm);
  color:       #4c1d95;
  line-height: 1.65;
  font-style:  italic;
}

/* ── Next Clue card ──────────────────────────────────────────────────────── */
.pg-explain-section--nextclue {
  border-left:   4px solid #0891b2;
  background:    linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
  border-top:    1px solid #a5f3fc;
  border-right:  1px solid #cffafe;
  border-bottom: 1px solid #cffafe;
}
.pg-explain-section--nextclue .pg-explain-section__head { color: #0e7490; }

/* ── "Explanation" section heading ───────────────────────────────────────── */
.pg-explain-header-label {
  font-size:      var(--pg-text-xs);
  font-weight:    800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--pg-green-600);
  margin-bottom:  var(--pg-s3);
  padding-bottom: var(--pg-s2);
  border-bottom:  2px solid var(--pg-green-100);
}

/* ── Thinking / loading container ────────────────────────────────────────── */
.pg-explain-thinking {
  display:       flex;
  align-items:   center;
  gap:           var(--pg-s3);
  background:    linear-gradient(135deg, #134D34 0%, #1A6645 100%);
  border-radius: var(--pg-r-md);
  padding:       var(--pg-s4) var(--pg-s5);
  min-height:    56px;
}

/* Three animated dots */
.pg-explain-thinking__dots {
  display:     flex;
  align-items: center;
  gap:         5px;
  flex-shrink: 0;
}
.pg-explain-thinking__dots span {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    #60a5fa;
  animation:     pg-thinking-bounce 1.2s ease-in-out infinite;
}
.pg-explain-thinking__dots span:nth-child(1) { animation-delay: 0s;    background: #818cf8; }
.pg-explain-thinking__dots span:nth-child(2) { animation-delay: 0.2s;  background: #60a5fa; }
.pg-explain-thinking__dots span:nth-child(3) { animation-delay: 0.4s;  background: #34d399; }

@keyframes pg-thinking-bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
  40%           { transform: scale(1.2); opacity: 1;   }
}

/* Cycling phrase text */
.pg-explain-thinking__text {
  font-size:   var(--pg-text-sm);
  font-weight: 500;
  color:       #e2e8f0;
  transition:  opacity 0.2s ease;
  font-style:  italic;
}
.pg-explain-thinking__text--fade {
  opacity: 0;
}

/* ── Mobile overrides for new elements ───────────────────────────────────── */
@media (max-width: 600px) {
  .pg-explain-chain { gap: 3px; }
  .pg-explain-chain__step { font-size: 10px; padding: 2px 6px; }
  .pg-explain-elim-row { grid-template-columns: 16px 1fr; gap: 6px; }
  .pg-explain-elim-key { font-size: 10px; }
  .pg-explain-elim-text { font-size: var(--pg-text-xs); }
}



/* ══════════════════════════════════════════════════════════════════════════
   MOBILE LAYOUT  ≤ 768px
   • Sidebar collapses to hidden
   • Mobile top bar (logo) replaces sidebar branding
   • Bottom navigation replaces sidebar links
   • All grids reflow to ≤ 2 columns
   • .sb-motive (motivational card / "doctors image") hidden
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Mobile top bar ────────────────────────────────────────────────────────
   Hidden on desktop; shown on ≤768px. Lives above .main. */
.pg-mobile-topbar {
  display: none;
}

/* ── Mobile bottom nav ─────────────────────────────────────────────────────
   Hidden on desktop; shown on ≤768px. Fixed to bottom of viewport. */
.pg-mobile-nav {
  display: none;
}

@media (max-width: 768px) {

  /* ── Sidebar: completely hidden on mobile ─────────────────────────────── */
  .sidebar {
    display: none !important;
  }

  /* ── Remove sidebar left-offset ──────────────────────────────────────── */
  .main {
    margin-left: 0 !important;
    min-height: 100vh;
  }

  /* ── Hide motivational "doctors" card ────────────────────────────────── */
  .sb-motive {
    display: none !important;
  }

  /* ── Main body padding (extra bottom clears the fixed bottom nav) ─────── */
  .main-body {
    padding: 16px 16px 88px !important;
  }

  /* ── Main header: tighten up ─────────────────────────────────────────── */
  .main-header {
    padding: 10px 16px 0 !important;
  }

  /* ── Mobile top bar ───────────────────────────────────────────────────── */
  .pg-mobile-topbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          52px;
    padding:         0 16px;
    background:      #134D34;
    position:        sticky;
    top:             0;
    z-index:         200;
    border-bottom:   1px solid rgba(255,255,255,.07);
    box-shadow:      0 2px 8px rgba(19,77,52,.18);
  }
  .pg-mobile-topbar__logo {
    font-size:       19px;
    font-weight:     900;
    color:           #2CB42C;
    letter-spacing: -.04em;
    text-decoration: none;
    line-height:     1;
  }
  .pg-mobile-topbar__logo span { color: #ff7400; }  /* MINDS — orange */
  .pg-mobile-topbar__tagline {
    font-size:     8px;
    font-weight:   700;
    color:         var(--pg-orange);
    letter-spacing: .12em;
    text-transform: uppercase;
    display:       block;
    margin-top:    2px;
  }

  /* ── Mobile bottom navigation ─────────────────────────────────────────── */
  .pg-mobile-nav {
    display:    flex;
    position:   fixed;
    bottom:     0;
    left:       0;
    right:      0;
    height:     60px;
    background: #fff;
    border-top: 1.5px solid #E2EAF4;
    z-index:    300;
    box-shadow: 0 -3px 16px rgba(19,77,52,.08);
  }
  .pg-mobile-nav__item {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             3px;
    text-decoration: none;
    color:           #94A3B8;
    font-size:       9px;
    font-weight:     700;
    letter-spacing:  .03em;
    text-transform:  uppercase;
    padding:         6px 2px;
    transition:      color .15s;
    position:        relative;
  }
  .pg-mobile-nav__item svg {
    width:        22px;
    height:       22px;
    stroke:       currentColor;
    fill:         none;
    flex-shrink:  0;
    stroke-width: 1.75;
  }
  .pg-mobile-nav__item.active {
    color: var(--pg-orange);
  }
  .pg-mobile-nav__item.active svg {
    stroke: var(--pg-orange);
  }
  .pg-mobile-nav__item.active::before {
    content:       '';
    position:      absolute;
    top:           0;
    left:          50%;
    transform:     translateX(-50%);
    width:         32px;
    height:        3px;
    background:    var(--pg-orange);
    border-radius: 0 0 4px 4px;
  }

  /* ── FAB centre button (Swipes) ───────────────────────────────────────── */
  .pg-mobile-nav__item--fab {
    flex:            0 0 64px;
    position:        relative;
    top:             -16px;
    color:           #fff !important;
    background:      none;
  }
  .pg-mobile-nav__item--fab .fab-bubble {
    width:           52px;
    height:          52px;
    border-radius:   50%;
    background:      linear-gradient(135deg, #134D34 0%, #1A6645 100%);
    box-shadow:      0 4px 16px rgba(19,77,52,.38);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             2px;
    transition:      transform .15s, box-shadow .15s;
  }
  .pg-mobile-nav__item--fab:active .fab-bubble {
    transform:  scale(.94);
    box-shadow: 0 2px 8px rgba(19,77,52,.28);
  }
  .pg-mobile-nav__item--fab .fab-bubble svg {
    width:  20px;
    height: 20px;
    stroke: #fff;
  }
  .pg-mobile-nav__item--fab .fab-label {
    font-size:      8px;
    font-weight:    800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color:          #134D34;
    margin-top:     2px;
  }
  .pg-mobile-nav__item--fab.active .fab-bubble {
    background: linear-gradient(135deg, #E8471A 0%, #C43A12 100%);
    box-shadow: 0 4px 16px rgba(232,71,26,.38);
  }

  /* ── Trial badge in dashboard header ─────────────────────────────────── */
  .trial-badge {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    background:      rgba(232,71,26,.15);
    border:          1px solid rgba(232,71,26,.35);
    color:           #FB923C;
    font-size:       11px;
    font-weight:     700;
    letter-spacing:  .04em;
    padding:         4px 10px;
    border-radius:   999px;
    white-space:     nowrap;
  }

  /* ── Grids → responsive columns ──────────────────────────────────────── */

  /* Practice cards: 3-col → 1-col */
  .practice-grid {
    grid-template-columns: 1fr !important;
  }

  /* Subject & IBQ picker: fill 2 per row */
  .pg-pq-subject-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Dashboard stat strip: 4 → 2 */
  .pg-stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Stat cards: tighter padding + smaller value so nothing clips at edges */
  .pg-stat {
    padding: 12px 10px !important;
    min-width: 0 !important;       /* prevent grid blowout */
    overflow: visible !important;  /* keep shadow/border visible */
  }
  .pg-stat__value {
    font-size: 1.35rem !important;
    letter-spacing: -0.02em !important;
  }
  .pg-stat__icon {
    font-size: 1rem !important;
    margin-bottom: 2px !important;
  }
  .pg-stat__label {
    font-size: 0.65rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Dashboard cards grid: 2 → 1 */
  .dash-cards-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Practice page ────────────────────────────────────────────────────── */
  .pg-pq-topbar {
    padding: 0 12px !important;
  }
  .pg-pq-mode-label {
    font-size: 12px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
  }
  #pg-pq-main {
    padding: 16px 12px 88px !important;
  }
  .pg-pq-card {
    padding: 16px !important;
  }

  /* ── Leaderboard table ───────────────────