/* ============================================================================
   CourseCompass Design System
   Version: 2.0 — "Calm & Clear" Redesign
   ============================================================================

   DESIGN PHILOSOPHY
   -----------------
   This design system replaces the previous dark-mode, monospace, neon-glow
   aesthetic with a warm, light, welcoming interface. Every decision here is
   informed by the target audience: university students (primarily women,
   18-25) who feel overwhelmed by degree requirements.

   The goal is to make degree planning feel manageable and even encouraging —
   not clinical, stressful, or techy. The visual language borrows from apps
   like Notion, Linear, and Apple's productivity tools: clean surfaces,
   generous spacing, soft color, and friendly typography.

   KEY PRINCIPLES:
   1. Calm over stimulating — soft palette, no neon, no harsh contrast
   2. Clarity over density — generous whitespace, readable type sizes
   3. Encouragement over pressure — progress feels rewarding, not stressful
   4. Warmth over coldness — warm neutrals, rounded shapes, gentle shadows
   5. Accessibility first — WCAG AA contrast ratios on all text

   ============================================================================ */


/* ============================================================================
   1. COLOR SYSTEM
   ============================================================================

   WHY THESE COLORS:

   Background (--bg-*):
   We use a warm off-white (#FAFAF8) instead of pure white (#FFF) to reduce
   eye strain during long planning sessions. The slight warm tint creates a
   paper-like quality that feels approachable rather than sterile. Card
   backgrounds are true white to create gentle elevation without harsh shadows.

   Brand color (--brand-*):
   A soft lavender-violet (#7C6EAA) was chosen over the previous neon indigo
   because it reads as creative, calm, and trustworthy. Lavender is widely
   associated with clarity of thought and balance — fitting for a planning
   tool. It avoids the "developer tool" or "gaming" connotation of saturated
   electric purples and indigos.

   Semantic status colors:
   - Completed (--status-complete-*): A soft sage green (#5B9A6F) that feels
     like a gentle affirmation, not an aggressive "SUCCESS" alert. Think of
     the feeling of checking something off a paper list.
   - In Progress (--status-progress-*): A warm golden amber (#C48B2C) that
     feels active and optimistic — "you're on your way" — without urgency.
   - Needed/Locked (--status-needed-*): A dusty rose (#C27B7B) that says
     "not yet" rather than "ERROR" or "DANGER". This is critical: students
     should not feel alarmed by courses they haven't taken yet.
   - Available (--status-available-*): A calm sky blue (#6A9EC2) that reads
     as "open and ready for you" — an invitation, not a command.

   Text colors:
   We use a warm dark charcoal (#2D2A32) instead of pure black to soften
   the reading experience. Secondary text (#6B6775) provides clear hierarchy
   without disappearing. Muted text (#9B95A5) is used sparingly for
   supplementary labels.

   ============================================================================ */

:root {
  /* ── Background & Surface ─────────────────────────────────────────────── */
  --bg-primary:       #F8F7F4;    /* Warm off-white — reduces glare vs pure white */
  --bg-secondary:     #F1EFE9;    /* Slightly darker for nav, sidebars       */
  --bg-card:          #FFFFFF;    /* White card surface — creates elevation   */
  --bg-elevated:      #FFFFFF;    /* Modals, popovers, dropdowns             */
  --bg-hover:         #F1EFE9;    /* Subtle hover state for interactive rows */
  --bg-active:        #EBE8E2;    /* Active/pressed state background         */
  --bg-wash:          #F5F3EE;    /* Light wash for alternating rows, wells  */

  /* ── Border & Dividers ────────────────────────────────────────────────── */
  --border:           #E3E0D8;    /* Default borders — warm gray, not cold   */
  --border-subtle:    #ECEAE4;    /* Lighter borders for internal dividers   */
  --border-focus:     #6B5B9A;    /* Focus ring color — matches brand        */

  /* ── Text (warm-tinted, WCAG AA verified) ───────────────────────────── */
  --text-primary:     #2D2B29;    /* Warm charcoal — 14:1 on white           */
  --text-secondary:   #5C5856;    /* Warm gray — 7:1 on white                */
  --text-muted:       #757069;    /* Warm muted — 4.9:1 on white (AA pass)   */
  --text-inverse:     #FFFFFF;    /* Text on dark/colored backgrounds        */

  /* ── Brand (muted lavender — calm, focused, not childish) ───────────── */
  --brand:            #6B5B9A;    /* Primary brand — 5.85:1 on white         */
  --brand-hover:      #5A4C85;    /* Hovered — 7.48:1 on white               */
  --brand-active:     #4E4275;    /* Pressed/active brand elements           */
  --brand-light:      #F0ECF7;    /* Brand-tinted backgrounds                */
  --brand-lighter:    #F5F3F9;    /* Barely-there brand tint                 */
  --brand-text:       #6B5B9A;    /* Brand color for text (same — passes AA) */

  /* ── Status: Completed (sage green — gentle affirmation) ────────────── */
  --status-complete:        #287348;    /* Deeper sage — 5.78:1 on white     */
  --status-complete-bg:     #EBF7EF;    /* Light green wash                  */
  --status-complete-border: #C2DBC8;    /* Subtle green border               */
  --status-complete-text:   #287348;    /* Same — passes AA on white         */
  --green:            #287348;
  --green-bg:         #EBF7EF;
  --green-border:     #C2DBC8;

  /* ── Status: In Progress (calm blue — momentum without urgency) ─────── */
  --status-progress:        #3B6FA6;    /* Calm blue — 5.24:1 on white       */
  --status-progress-bg:     #E6F0FA;    /* Light blue wash                   */
  --status-progress-border: #B5CEE4;    /* Subtle blue border                */
  --status-progress-text:   #3B6FA6;    /* Same — passes AA                  */
  --amber:            #3B6FA6;    /* Alias — old code uses --amber for IP    */
  --amber-bg:         #E6F0FA;
  --amber-border:     #B5CEE4;

  /* ── Status: Needs Attention (warm amber — "take a look" not "error") ── */
  --status-needed:        #9A6318;    /* Warm amber — 5.03:1 on white        */
  --status-needed-bg:     #FDF4E7;    /* Light amber wash                    */
  --status-needed-border: #E4D0A8;    /* Subtle amber border                 */
  --status-needed-text:   #9A6318;    /* Same — passes AA                    */
  --red:              #9A6318;    /* Alias — old code uses --red for needed   */
  --red-bg:           #FDF4E7;
  --red-border:       #E4D0A8;

  /* ── Status: Available ────────────────────────────────────────────────── */
  --status-available:        #6A9EC2;    /* Calm sky blue                    */
  --status-available-bg:     #EDF4F9;    /* Light blue wash                  */
  --status-available-border: #BDD5E8;    /* Subtle blue border               */
  --status-available-text:   #4A7A9E;    /* Readable blue for text on white  */
  /* Aliases for backward compatibility with existing class names             */
  --indigo:           #6B5B9A;
  --indigo-bg:        #F0ECF7;
  --indigo-border:    #C9C2DD;

  /* ── Accent: Purple (for special highlights) ──────────────────────────── */
  --purple:           #9B7FBF;
  --purple-bg:        #F3EFF8;
  --purple-border:    #D4C8E4;

  /* ── Accent: Cyan / Info ──────────────────────────────────────────────── */
  --cyan:             #5B9EAF;
  --cyan-bg:          #EDF5F7;
  --cyan-border:      #BCD9DF;

  /* ── Accent: Yellow (warnings, gentle alerts) ─────────────────────────── */
  --yellow:           #D4A72C;

  /* ── Accent: Pink (scholarships, special opportunities) ───────────────── */
  --badge-pink-bg:    #F9EFF5;
  --badge-pink-color: #A8628B;
  --badge-pink-border:#DFC6D5;

  /* ── Radius ─────────────────────────────────────────────────────────────
     WHY 10-16px: Rounded corners signal friendliness and approachability.
     Sharp corners (2-4px) feel utilitarian and techy. We use 10px as the
     base and 16px for larger containers to create a soft, modern feel
     consistent with apps like Notion and Apple's design language.
     ───────────────────────────────────────────────────────────────────── */
  --radius:           10px;
  --radius-lg:        16px;
  --radius-sm:        8px;
  --radius-pill:      999px;      /* Fully rounded pill shape for badges/buttons */

  /* ── Shadows ────────────────────────────────────────────────────────────
     WHY soft shadows: The previous design used dark, heavy shadows suited
     to a dark background. Our light-mode shadows use warm-tinted, diffused
     shadows that create gentle elevation without harsh edges. This makes
     cards feel like they're floating just above the surface — approachable,
     not dramatic.
     ───────────────────────────────────────────────────────────────────── */
  --shadow-sm:        0 1px 3px rgba(45, 42, 50, 0.04),
                      0 1px 2px rgba(45, 42, 50, 0.06);
  --shadow:           0 2px 8px rgba(45, 42, 50, 0.06),
                      0 1px 3px rgba(45, 42, 50, 0.04);
  --shadow-md:        0 4px 16px rgba(45, 42, 50, 0.08),
                      0 2px 6px rgba(45, 42, 50, 0.04);
  --shadow-lg:        0 8px 32px rgba(45, 42, 50, 0.10),
                      0 4px 12px rgba(45, 42, 50, 0.05);
  --shadow-focus:     0 0 0 3px rgba(124, 110, 170, 0.20);

  /* ── Spacing Scale ──────────────────────────────────────────────────────
     WHY generous spacing: Dense UIs feel overwhelming — the opposite of
     what stressed students need. A 4px base unit with generous application
     (24-32px padding on cards, 32-48px section gaps) gives content room to
     breathe. This mirrors the spacious feel of Notion and Linear.
     ───────────────────────────────────────────────────────────────────── */
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          20px;
  --space-6:          24px;
  --space-7:          28px;
  --space-8:          32px;
  --space-10:         40px;
  --space-12:         48px;
  --space-16:         64px;

  /* ── Typography ─────────────────────────────────────────────────────────
     WHY Inter + Plus Jakarta Sans:
     - Inter is the workhorse: highly legible at small sizes, great for UI
       elements, labels, and body text. It has excellent readability metrics
       and feels professional without being cold.
     - Plus Jakarta Sans is the display face: slightly rounder, warmer
       letterforms that feel friendly for headings and the logo. Its soft
       geometry signals approachability.
     - Both are free Google Fonts with excellent language support.

     WHY these sizes: 15px body text (not 13px like before) is more
     comfortable for extended reading. Students will spend time on this tool
     reviewing degree requirements — readability reduces cognitive load.
     ───────────────────────────────────────────────────────────────────── */
  --font-display:     'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:          12px;
  --text-sm:          13px;
  --text-base:        15px;       /* Body text — comfortable reading size    */
  --text-md:          16px;
  --text-lg:          18px;
  --text-xl:          22px;
  --text-2xl:         28px;
  --text-3xl:         34px;

  --leading-tight:    1.3;
  --leading-normal:   1.6;
  --leading-relaxed:  1.75;

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* ── Transitions ────────────────────────────────────────────────────────
     WHY ease-out: Ease-out transitions feel responsive and natural —
     elements move quickly then settle gently, which feels polished without
     being flashy. 150ms is fast enough to feel instant, 250ms for larger
     motions. No bouncy or elastic animations — they feel playful but
     distracting for a productivity tool.
     ───────────────────────────────────────────────────────────────────── */
  --transition-fast:  150ms ease-out;
  --transition-base:  250ms ease-out;
  --transition-slow:  400ms ease-out;

  /* ── Z-index Scale ────────────────────────────────────────────────────── */
  --z-base:           1;
  --z-dropdown:       10;
  --z-sticky:         50;
  --z-nav:            100;
  --z-modal-backdrop: 200;
  --z-modal:          300;
  --z-toast:          400;
  --z-tooltip:        500;
}


/* ============================================================================
   2. GLOBAL RESET & BASE STYLES
   ============================================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/* ============================================================================
   3. TYPOGRAPHY STYLES
   ============================================================================

   Section headings use the display font (Plus Jakarta Sans) for warmth.
   Body and UI elements use Inter for maximum clarity.

   WHY no uppercase section titles: The previous design used UPPERCASE
   letter-spaced headings which feel commanding and techy. Sentence case
   with semibold weight feels friendlier and more conversational.
   ============================================================================ */

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  /* Removed: text-transform uppercase, letter-spacing 1.5px */
  text-transform: none;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}


/* ============================================================================
   4. TAB NAVIGATION
   ============================================================================

   WHY this nav design: A clean white nav bar with subtle bottom border
   (instead of dark background) feels lighter and more open. The active
   tab indicator uses the brand lavender as a bottom border — visible but
   not loud. Tab text is medium weight at 14px for easy scanning.
   ============================================================================ */

.tab-nav {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-6);
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  box-shadow: var(--shadow-sm);
}

.tab-nav .logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6) var(--space-4) 0;
  border-right: 1px solid var(--border-subtle);
  margin-right: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--brand);
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.tab-nav button {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-medium);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast),
              border-color var(--transition-fast);
  white-space: nowrap;
}

.tab-nav button:hover {
  color: var(--text-secondary);
}

.tab-nav button.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}


/* ============================================================================
   5. PAGE CONTAINERS
   ============================================================================

   WHY more padding: 32px padding (up from 24px) on pages gives the content
   area a more spacious, less cramped feel. The max-width stays at 1400px
   for wide screens, but content feels less dense within it.
   ============================================================================ */

.page {
  display: none;
  padding: 16px 32px;
  max-width: 1400px;
  margin: 0 auto;
}

.page.active {
  display: block;
}


/* ============================================================================
   6. CARDS
   ============================================================================

   WHY soft shadows instead of borders: The previous design used solid
   borders on a dark background. On a light background, soft shadows create
   a more natural sense of depth — like paper resting on a desk. The subtle
   border is kept for definition but made very light. Generous padding
   (24px) gives card content room to breathe.
   ============================================================================ */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-header {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.card-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.card-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}


/* ============================================================================
   7. STAT STRIP
   ============================================================================

   WHY softer gradients: The top accent bar on stat cards uses muted, warm
   gradients instead of neon ones. The colors are the same semantic palette
   (brand, complete, progress, purple) but at comfortable saturation levels
   that don't vibrate against the light background.
   ============================================================================ */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.stat-card {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-6);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.stat-card-indigo::before {
  background: linear-gradient(to right, #7C6EAA, #A499CA);
}

.stat-card-green::before {
  background: linear-gradient(to right, #5B9A6F, #8BBF9A);
}

.stat-card-amber::before {
  background: linear-gradient(to right, #C48B2C, #DBAF5C);
}

.stat-card-purple::before {
  background: linear-gradient(to right, #9B7FBF, #BDA8D4);
}


/* ============================================================================
   8. BADGES
   ============================================================================

   WHY pill-shaped badges: Fully rounded badges (border-radius: 999px) feel
   friendlier and more modern than slightly-rounded rectangles. The soft
   background colors with matching text ensure readability while keeping the
   look gentle rather than alarming.
   ============================================================================ */

.badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  line-height: var(--leading-tight);
}

.badge-green {
  background: var(--status-complete-bg);
  color: var(--status-complete-text);
  border: 1px solid var(--status-complete-border);
}

.badge-indigo {
  background: var(--brand-light);
  color: var(--brand-text);
  border: 1px solid var(--indigo-border);
}

.badge-amber {
  background: var(--status-progress-bg);
  color: var(--status-progress-text);
  border: 1px solid var(--status-progress-border);
}

.badge-red {
  background: var(--status-needed-bg);
  color: var(--status-needed-text);
  border: 1px solid var(--status-needed-border);
}

.badge-purple {
  background: var(--purple-bg);
  color: #6E5A8E;
  border: 1px solid var(--purple-border);
}

.badge-cyan {
  background: var(--cyan-bg);
  color: #477A8A;
  border: 1px solid var(--cyan-border);
}

.badge-muted {
  background: var(--bg-secondary);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.badge-pink {
  background: var(--badge-pink-bg);
  color: var(--badge-pink-color);
  border: 1px solid var(--badge-pink-border);
}


/* ============================================================================
   9. COURSE GRID & CELLS
   ============================================================================

   WHY these changes:
   - Slightly larger cells (minmax 150px) for better readability
   - Rounded corners at 10px for warmth
   - Soft colored backgrounds instead of near-black tinted backgrounds
   - Hover lifts with shadow instead of just transform (more subtle)
   - "Locked" courses at 0.6 opacity — visible but clearly not available,
     without using alarming red that might stress students
   ============================================================================ */

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.course-cell {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border: 1px solid;
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
  cursor: default;
}

.course-cell::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
}

.course-cell:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Completed course — gentle sage green */
.course-cell.done {
  background: var(--status-complete-bg);
  border-color: var(--status-complete-border);
  color: var(--status-complete-text);
}
.course-cell.done::after {
  background: var(--status-complete);
  opacity: 0.7;
}

/* Planned course — dashed brand border, italic */
.course-cell.planned {
  background: var(--brand-lighter);
  border: 1px dashed var(--indigo-border);
  color: var(--brand-text);
  font-style: italic;
}

/* Available course — calm blue */
.course-cell.avail {
  background: var(--status-available-bg);
  border-color: var(--status-available-border);
  color: var(--status-available-text);
}
.course-cell.avail::after {
  background: var(--status-available);
  opacity: 0.7;
}

/* Locked course — dusty rose, slightly faded */
.course-cell.locked {
  background: var(--status-needed-bg);
  border-color: var(--status-needed-border);
  color: var(--status-needed-text);
  opacity: 0.6;
}

.course-cell .grade-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  opacity: 0.8;
  margin-top: var(--space-1);
}

.core-term-badge {
  display: block;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  margin-top: var(--space-1);
  opacity: 0.7;
  letter-spacing: 0.02em;
}

.core-term-none {
  font-style: italic;
  opacity: 0.5;
}


/* ============================================================================
   10. PROGRESS BARS
   ============================================================================

   WHY encouraging progress design:
   - Rounded track and fill (pill shape) feels modern and friendly
   - Track background is a warm light gray, not near-black
   - Fill gradients use our soft semantic colors
   - Height increased to 10px for visibility
   - Labels at 13px for readability

   EMOTIONAL DESIGN: Progress bars should feel like filling up a cup rather
   than loading a machine. The warm colors and rounded shape contribute to
   a sense of personal accomplishment.
   ============================================================================ */

.progress-wrap {
  margin-bottom: var(--space-6);
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  font-weight: var(--weight-medium);
}

.progress-bar {
  height: 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.6s ease-out;
}

.progress-fill.green {
  background: linear-gradient(to right, #5B9A6F, #8BBF9A);
}

.progress-fill.indigo {
  background: linear-gradient(to right, #7C6EAA, #A499CA);
}

.progress-fill.amber {
  background: linear-gradient(to right, #C48B2C, #DBAF5C);
}

.progress-fill.red {
  background: linear-gradient(to right, #C27B7B, #D8A5A5);
}


/* ============================================================================
   11. BUTTONS
   ============================================================================

   WHY pill-shaped buttons: Fully rounded buttons feel less corporate and
   more approachable. The primary button uses the brand lavender —
   noticeable but not aggressive. Padding is generous (10px 24px) so
   buttons don't feel cramped. Hover states darken slightly rather than
   using glows or color shifts.
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--brand);
  color: var(--text-inverse);
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
  line-height: 1;
  white-space: nowrap;
}

.btn:hover {
  background: var(--brand-hover);
  box-shadow: var(--shadow-sm);
}

.btn:active {
  background: var(--brand-active);
  transform: scale(0.98);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text-primary);
}

.btn-outline:hover {
  background: var(--bg-hover);
  border-color: var(--brand);
  color: var(--brand);
}

.btn-sm {
  font-size: var(--text-xs);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

/* Ghost button — for less prominent actions */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: none;
}

.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Danger button — used sparingly for destructive actions */
.btn-danger {
  background: var(--status-needed);
  color: var(--text-inverse);
}

.btn-danger:hover {
  background: #A86868;
}

/* Success button — for confirmations */
.btn-success {
  background: var(--status-complete);
  color: var(--text-inverse);
}

.btn-success:hover {
  background: #4D875F;
}


/* ============================================================================
   12. FORM INPUTS
   ============================================================================

   WHY these input styles: Generous padding (10px 16px), readable font size
   (15px), and rounded corners make forms feel inviting rather than clinical.
   The focus state uses a soft lavender ring (box-shadow) that's visible but
   not distracting — a gentle "I'm here" indicator.
   ============================================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  width: 100%;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: var(--shadow-focus);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239B95A5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}


/* ============================================================================
   13. TABLES
   ============================================================================ */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

th {
  text-align: left;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

tr:hover td {
  background: var(--bg-hover);
}


/* ============================================================================
   14. TOOLTIPS & POPOVERS
   ============================================================================ */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: var(--z-tooltip);
}

[data-tooltip]:hover::after {
  opacity: 1;
}


/* ============================================================================
   15. SCROLLBAR (Webkit)
   ============================================================================

   WHY custom scrollbar: Default scrollbars are harsh. A thin, warm-gray
   scrollbar that only appears on hover keeps the interface clean and
   consistent with the design system's soft aesthetic.
   ============================================================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}


/* ============================================================================
   16. UTILITY CLASSES
   ============================================================================ */

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-brand     { color: var(--brand-text); }
.text-complete  { color: var(--status-complete-text); }
.text-progress  { color: var(--status-progress-text); }
.text-needed    { color: var(--status-needed-text); }
.text-available { color: var(--status-available-text); }

.bg-complete    { background: var(--status-complete-bg); }
.bg-progress    { background: var(--status-progress-bg); }
.bg-needed      { background: var(--status-needed-bg); }
.bg-available   { background: var(--status-available-bg); }
.bg-brand       { background: var(--brand-light); }


/* ============================================================================
   17. RESPONSIVE BREAKPOINTS
   ============================================================================ */

@media (max-width: 1024px) {
  .stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .page {
    padding: var(--space-5);
  }

  .stat-strip {
    grid-template-columns: 1fr;
  }

  .tab-nav {
    padding: 0 var(--space-3);
    overflow-x: auto;
  }

  .tab-nav button {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
  }

  .course-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-2);
  }
}


/* ============================================================================
   18. ANIMATIONS
   ============================================================================

   WHY subtle animations: Micro-interactions should feel like gentle
   affirmations. A card appearing, a progress bar filling, or a checkmark
   showing — these should feel satisfying but not distracting. No bounces,
   no elastic effects, no flashing. Just smooth, calm motion.
   ============================================================================ */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes progressFill {
  from { width: 0; }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.4s ease-out forwards;
}

.animate-scale-in {
  animation: scaleIn 0.25s ease-out forwards;
}


/* ============================================================================
   19. PRINT STYLES
   ============================================================================ */

@media print {
  .tab-nav { display: none; }
  .page { padding: 0; max-width: none; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  body { background: white; font-size: 12pt; }
}


/* ============================================================================
   TOKEN REFERENCE — Quick lookup for developers
   ============================================================================

   SURFACES:
   Page background ........... var(--bg-primary)     #FAFAF8
   Nav / sidebar ............. var(--bg-secondary)    #F3F2EF
   Cards / modals ............ var(--bg-card)         #FFFFFF
   Hover state ............... var(--bg-hover)        #F0EEEB

   TEXT:
   Headlines / body .......... var(--text-primary)    #2D2A32
   Labels / descriptions ..... var(--text-secondary)  #6B6775
   Placeholders / disabled ... var(--text-muted)      #9B95A5
   On colored backgrounds .... var(--text-inverse)    #FFFFFF

   BRAND:
   Primary ................... var(--brand)           #7C6EAA
   On-white text ............. var(--brand-text)      #5E4F8B
   Light background .......... var(--brand-light)     #EDEAF4

   STATUS (bg / border / text):
   Complete (sage green) ..... --status-complete-*    #5B9A6F / #EEF6F0 / #C5DFC9
   In Progress (amber) ....... --status-progress-*    #C48B2C / #FBF4E6 / #EDDCB0
   Needed (dusty rose) ....... --status-needed-*      #C27B7B / #FAF0F0 / #E4C6C6
   Available (sky blue) ...... --status-available-*   #6A9EC2 / #EDF4F9 / #BDD5E8

   SPACING:
   Tight (label gaps) ........ var(--space-2)         8px
   Standard (element gaps) ... var(--space-4)         16px
   Comfortable (card padding)  var(--space-6)         24px
   Spacious (section gaps) ... var(--space-8)         32px

   RADIUS:
   Small (inputs, small cards)  var(--radius-sm)      8px
   Default (cards, cells) .... var(--radius)          10px
   Large (containers) ........ var(--radius-lg)       16px
   Pill (badges, buttons) .... var(--radius-pill)     999px

   ============================================================================ */

/* ============================================================================
   DASHBOARD v2 — Calm & Clear Layout
   ============================================================================ */

/* ── Email Verification Banner ──────────────────────────────────────────── */
.db-verify-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--text-secondary);
}
.db-verify-banner span { flex: 1; }
.db-verify-resend {
  background: var(--accent, #6366f1);
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.db-verify-resend:hover { opacity: 0.9; }
.db-verify-resend:disabled { opacity: 0.5; cursor: default; }
.db-verify-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.db-verify-dismiss:hover { color: var(--text-primary); }

/* ── Hero: Greeting + Progress Ring ─────────────────────────────────────── */
.db-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 12px;
  gap: 24px;
}
.db-hero-text { flex: 1; }
.db-greeting {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
  line-height: 1.3;
}
.db-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0 0 4px;
  line-height: 1.5;
}
.db-subtitle strong { color: var(--brand-text, var(--brand)); font-weight: 600; }
.db-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.db-ring-wrap { flex-shrink: 0; }
.db-ring { width: 120px; height: 120px; }
.db-ring-pct {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  fill: var(--text-primary);
}
.db-ring-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  fill: var(--text-muted);
  letter-spacing: 0.3px;
}

/* ── Quick Stats Row ────────────────────────────────────────────────────── */
.db-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.db-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.db-stat-val {
  display: block;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.db-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.db-stat-good .db-stat-val { color: var(--status-complete-text, var(--status-complete)); }
.db-stat-warn .db-stat-val { color: var(--status-needed-text, var(--status-needed)); }

/* ── Section Titles (v2 override) ───────────────────────────────────────── */
.section-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 28px 0 14px;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .db-hero { flex-direction: column; text-align: center; padding: 24px 0 16px; }
  .db-greeting { font-size: 22px; }
  .db-stats { grid-template-columns: repeat(2, 1fr); }
  .db-next-grid { grid-template-columns: repeat(2, 1fr); }
  .db-progress-grid { grid-template-columns: repeat(2, 1fr); }
  .db-ring { width: 90px; height: 90px; }
  .db-ring-pct { font-size: 18px; }
}

/* ── Next Steps Cards ───────────────────────────────────────────────────── */
.db-section { margin-bottom: 8px; }
.db-section-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.db-section-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.db-next-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.db-next-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.db-next-card:hover {
  border-color: var(--brand, #7C6EAA);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.db-next-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.db-next-code {
  font-weight: 600;
  color: var(--brand-text, var(--brand));
  font-size: 14px;
}
.db-next-term {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-hover, #F0EEEB);
  padding: 2px 8px;
  border-radius: var(--radius-pill, 999px);
}
.db-next-title {
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.4;
}
.db-next-reason {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ── Progress Cards Grid ────────────────────────────────────────────────── */
.db-progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.db-prog-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  padding: 16px;
}
.db-prog-done {
  border-color: var(--status-complete-border, #C5DFC9);
  background: var(--status-complete-bg, #EEF6F0);
}
.db-prog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.db-prog-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.db-prog-status {
  font-size: 12px;
  color: var(--text-muted);
}
.db-prog-bar-track {
  height: 6px;
  background: var(--border, #E4E2DE);
  border-radius: 3px;
  overflow: hidden;
}
.db-prog-bar-fill {
  height: 100%;
  background: var(--brand, #7C6EAA);
  border-radius: 3px;
  transition: width 0.5s ease;
}
.db-prog-bar-fill.fill-done {
  background: var(--status-complete, #5B9A6F);
}

/* ── This Semester ──────────────────────────────────────────────────────── */
.db-semester-list {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  overflow: hidden;
  margin-bottom: 28px;
}
.db-semester-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle, #ECEAE6);
}
.db-semester-row:last-child { border-bottom: none; }
.db-sem-code {
  font-weight: 600;
  font-size: 14px;
  color: var(--brand-text, var(--brand));
  min-width: 80px;
}
.db-sem-title {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
}
.db-sem-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--status-progress-text, #8B6914);
  background: var(--status-progress-bg, #FFF8E7);
  border: 1px solid var(--status-progress-border, #E8D5A0);
  padding: 2px 10px;
  border-radius: var(--radius-pill, 999px);
}

/* ── Graduation Checklist ───────────────────────────────────────────────── */
.db-checklist {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  overflow: hidden;
  margin-bottom: 28px;
}
.db-check-wrap { border-bottom: 1px solid var(--border-subtle, #ECEAE6); }
.db-check-wrap:last-child { border-bottom: none; }
.db-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
}
.db-check-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: none;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
  color: var(--text-muted);
  padding: 0;
}
.db-check-icon.met {
  border-color: var(--status-complete, #5B9A6F);
  color: var(--status-complete, #5B9A6F);
  background: var(--status-complete-bg, #EEF6F0);
}
.db-check-icon.pending {
  border-color: var(--status-progress, #C48B2C);
  color: var(--status-progress, #C48B2C);
  background: var(--status-progress-bg, #FFF8E7);
}
.db-check-icon.unmet {
  border-color: var(--border);
  color: var(--text-muted);
}
.db-check-label {
  flex: 1;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-check-count {
  font-size: 13px;
  color: var(--text-muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.db-check-detail {
  padding: 0 16px 12px 50px;
}

/* ── Timeline (collapsible) ─────────────────────────────────────────────── */
.db-toggle-title {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.db-toggle-arrow {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.db-timeline-wrap { margin-bottom: 28px; }
.db-timeline {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scroll-snap-type: x mandatory;
}
.db-term {
  flex-shrink: 0;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  padding: 12px;
  scroll-snap-align: start;
}
.db-term-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.db-term-credits {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}
.db-term-courses {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.db-term-pill {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--radius-pill, 999px);
  white-space: nowrap;
}
.db-term-pill.passed {
  background: var(--status-complete-bg, #EEF6F0);
  color: var(--status-complete-text, #3D6F4B);
  border: 1px solid var(--status-complete-border, #C5DFC9);
}
.db-term-pill.ip {
  background: var(--status-progress-bg, #FFF8E7);
  color: var(--status-progress-text, #8B6914);
  border: 1px solid var(--status-progress-border, #E8D5A0);
}
.db-term-pill.planned {
  background: var(--brand-lighter, #F5F3F9);
  color: var(--brand-text, #5E4F8B);
  border: 1px solid var(--brand-light, #EDEAF4);
}
.db-term-pill.other {
  background: var(--bg-hover, #F0EEEB);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ── GPA Trend ──────────────────────────────────────────────────────────── */
.db-gpa-trend {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  padding: 16px;
  margin-bottom: 28px;
}

/* ── Encouragement text ─────────────────────────────────────────────────── */
.db-encouragement {
  font-size: 14px;
  color: var(--status-complete-text, #3D6F4B);
  margin: 0;
  font-style: italic;
}

/* ── Progress card IP bar + status text ─────────────────────────────────── */
.db-prog-bar-track { position: relative; }
.db-prog-bar-ip {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--status-progress, #3B6FA6);
  border-radius: 3px;
  opacity: 0.45;
}
.db-prog-status.db-prog-complete {
  color: var(--status-complete-text, #287348);
  font-weight: 600;
}
.db-prog-status.db-prog-ip {
  color: var(--status-progress-text, #3B6FA6);
  font-weight: 500;
}

/* ── Timeline term badges ───────────────────────────────────────────────── */
.db-term-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.db-term-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}
.db-term-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.db-term-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: var(--radius-pill, 999px);
}
.db-term-badge.gpa {
  color: var(--status-complete-text, #287348);
  background: var(--status-complete-bg, #EBF7EF);
}
.db-term-badge.ip {
  color: var(--status-progress-text, #3B6FA6);
  background: var(--status-progress-bg, #E6F0FA);
}
.db-term-badge.planned {
  color: var(--brand-text, #6B5B9A);
  background: var(--brand-lighter, #F5F3F9);
}

/* ── Withdrawn pill style ───────────────────────────────────────────────── */
.db-term-pill.withdrawn {
  background: var(--bg-hover, #F1EFE9);
  color: var(--text-muted);
  border: 1px solid var(--border);
  text-decoration: line-through;
  opacity: 0.6;
}

/* ── Next Steps pagination ──────────────────────────────────────────────── */
.db-next-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.db-next-header .db-section-desc { margin: 0; }
.db-next-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.db-next-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.db-next-btn:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--brand);
}
.db-next-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.db-next-page {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 40px;
  text-align: center;
}

/* ── Current Courses — term groups ──────────────────────────────────────── */
.db-semester-group {
  margin-bottom: 16px;
}
.db-semester-term-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: var(--bg-secondary, #F1EFE9);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius, 10px) var(--radius, 10px) 0 0;
}
.db-semester-term-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.db-semester-term-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.db-semester-group .db-semester-list {
  border-radius: 0 0 var(--radius, 10px) var(--radius, 10px);
}

/* ── Open Electives pills ───────────────────────────────────────────────── */
.db-elective-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 28px;
}
.db-elec-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid;
  white-space: nowrap;
}
.db-elec-pill.passed {
  color: var(--status-complete-text, #287348);
  background: var(--status-complete-bg, #EBF7EF);
  border-color: var(--status-complete-border, #C2DBC8);
}
.db-elec-pill.ip {
  color: var(--status-progress-text, #3B6FA6);
  background: var(--status-progress-bg, #E6F0FA);
  border-color: var(--status-progress-border, #B5CEE4);
}
.db-elec-pill.planned {
  color: var(--brand-text, #6B5B9A);
  background: var(--brand-lighter, #F5F3F9);
  border-color: var(--brand-light, #EDEAF4);
}
.db-elec-pill.empty {
  color: var(--text-muted);
  background: var(--bg-hover, #F1EFE9);
  border-color: var(--border);
  font-style: italic;
}

/* ── Graduation checklist detail pills (v2 override) ────────────────────── */
.gcd-body { font-size: 13px; color: var(--text-secondary); }
.gcd-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.gcd-row:last-of-type { border-bottom: none; }
.gcd-key { color: var(--text-muted); }
.gcd-val { color: var(--text-primary); font-weight: 600; }
.gcd-sublabel {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin: 10px 0 6px;
}
.gcd-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.gcd-note { font-size: 12px; color: var(--text-muted); margin-top: 8px; font-style: italic; }
.gcd-warn { color: var(--status-needed-text); font-style: normal; }
.gcd-all-done { font-size: 13px; color: var(--status-complete-text); font-weight: 500; }
.gcd-libed-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
.gcd-libed-label { font-size: 13px; color: var(--text-secondary); }

/* ── Requirement option pills (universal, v2 override) ──────────────────── */
.req-option-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill, 999px);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid;
  white-space: nowrap;
  cursor: default;
}
.req-option-pill strong { font-weight: 700; }
.req-option-pill.done {
  color: var(--status-complete-text, #287348);
  background: var(--status-complete-bg, #EBF7EF);
  border-color: var(--status-complete-border, #C2DBC8);
}
.req-option-pill.ip {
  color: var(--status-progress-text, #3B6FA6);
  background: var(--status-progress-bg, #E6F0FA);
  border-color: var(--status-progress-border, #B5CEE4);
  font-weight: 600;
}
.req-option-pill.open {
  color: var(--text-muted);
  background: var(--bg-hover, #F1EFE9);
  border-color: var(--border);
  border-style: dashed;
}
.req-option-pill.extra {
  color: var(--brand-text, #6B5B9A);
  background: var(--brand-lighter, #F5F3F9);
  border-color: var(--brand-light, #EDEAF4);
}
.req-option-pill.excluded {
  color: var(--text-muted);
  background: var(--bg-hover, #F1EFE9);
  border-color: var(--border);
  text-decoration: line-through;
  opacity: 0.7;
}
.req-option-pill .excl-reason {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Badge overrides for checklist ──────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 999px);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-green {
  color: var(--status-complete-text, #287348);
  background: var(--status-complete-bg, #EBF7EF);
}
.badge-amber {
  color: var(--status-needed-text, #9A6318);
  background: var(--status-needed-bg, #FDF4E7);
}
.badge-red {
  color: var(--status-needed-text, #9A6318);
  background: var(--status-needed-bg, #FDF4E7);
}
.badge-indigo {
  color: var(--brand-text, #6B5B9A);
  background: var(--brand-lighter, #F5F3F9);
}
.badge-ip {
  color: var(--status-progress-text, #3B6FA6);
  background: var(--status-progress-bg, #E6F0FA);
}

/* ── Prereq pills in course dialog ──────────────────────────────────────── */
.prereq-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: var(--radius-pill, 999px);
  font-size: 11px;
  font-weight: 500;
}
.prereq-pill.met {
  color: var(--status-complete-text, #287348);
  background: var(--status-complete-bg, #EBF7EF);
}
.prereq-pill.unmet {
  color: var(--status-needed-text, #9A6318);
  background: var(--status-needed-bg, #FDF4E7);
}

/* ── Open Electives grid ────────────────────────────────────────────────── */
.db-elec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 28px;
}
.db-elec-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  padding: 12px 14px;
  transition: border-color 0.2s;
}
.db-elec-card.passed { border-left: 3px solid var(--status-complete, #287348); }
.db-elec-card.ip { border-left: 3px solid var(--status-progress, #3B6FA6); }
.db-elec-card.planned { border-left: 3px solid var(--brand, #6B5B9A); }
.db-elec-card.empty {
  border-style: dashed;
  opacity: 0.5;
}
.db-elec-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.db-elec-code {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.db-elec-status {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: var(--radius-pill, 999px);
}
.db-elec-status.passed {
  color: var(--status-complete-text, #287348);
  background: var(--status-complete-bg, #EBF7EF);
}
.db-elec-status.ip {
  color: var(--status-progress-text, #3B6FA6);
  background: var(--status-progress-bg, #E6F0FA);
}
.db-elec-status.planned {
  color: var(--brand-text, #6B5B9A);
  background: var(--brand-lighter, #F5F3F9);
}
.db-elec-title {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-elec-term {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.db-elec-card.empty .db-elec-code { color: var(--text-muted); }
.db-elec-card.empty .db-elec-title { color: var(--text-muted); font-style: italic; }

/* ── Planned course styles in Current & Planned ─────────────────────────── */
.db-sem-badge.planned {
  color: var(--brand-text, #6B5B9A);
  background: var(--brand-lighter, #F5F3F9);
  border-color: var(--brand-light, #EDEAF4);
}
.db-sem-badge.ip {
  color: var(--status-progress-text, #3B6FA6);
  background: var(--status-progress-bg, #E6F0FA);
  border-color: var(--status-progress-border, #B5CEE4);
}
.db-row-planned {
  opacity: 0.85;
}
.db-row-planned .db-sem-code {
  color: var(--brand-text, #6B5B9A);
}
.db-sem-extra {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}
.db-remove-planned-btn {
  background: none;
  border: 1px solid var(--status-needed, #9A6318);
  color: var(--status-needed-text, #9A6318);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  margin-left: 8px;
  transition: background 0.15s, color 0.15s;
}
.db-remove-planned-btn:hover {
  background: var(--status-needed-bg, #FDF4E7);
}

/* ── Program Notes ──────────────────────────────────────────────────────── */
.db-notes {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  overflow: hidden;
  margin-bottom: 28px;
}
.db-note-item {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  border-bottom: 1px solid var(--border-subtle, #ECEAE4);
}
.db-note-item:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   PREREQ MAP v5 — Three-Column Layout
   ═══════════════════════════════════════════════════════════════════════════ */

.pm-layout { display: flex; flex-direction: column; height: calc(100vh - 80px); min-height: 500px; }

.pm-page-header { padding: 0 0 12px; flex-shrink: 0; }
.pm-page-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 0 0 2px;
}
.pm-page-desc { font-size: 13px; color: var(--text-muted); margin: 0; }

/* ── Three column grid ──────────────────────────────────────────────────── */
.pm-three-col {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

/* ── Sidebars ───────────────────────────────────────────────────────────── */
.pm-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  padding: 16px;
  overflow-y: auto;
}
.pm-sb-section { margin-bottom: 16px; }
.pm-sb-section:last-child { margin-bottom: 0; }
.pm-sb-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 6px; display: block;
}

/* Search */
.pm-sb-search-wrap { position: relative; }
.pm-sb-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.pm-sb-search {
  width: 100%; padding: 8px 10px 8px 32px; border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px); background: var(--bg-primary);
  color: var(--text-primary); font-size: 13px; outline: none;
  transition: border-color 0.2s;
}
.pm-sb-search:focus { border-color: var(--brand); }

/* Select */
.pm-sb-select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px); background: var(--bg-primary);
  color: var(--text-primary); font-size: 13px; outline: none; cursor: pointer;
}

/* Mode buttons */
.pm-sb-modes { display: flex; flex-direction: column; gap: 4px; }
.pm-sb-mode {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px);
  padding: 7px 12px; font-size: 12px; font-weight: 500; color: var(--text-secondary);
  cursor: pointer; text-align: left; transition: all 0.15s;
}
.pm-sb-mode:hover { border-color: var(--brand); color: var(--brand); }
.pm-sb-mode.active {
  background: var(--brand-light); border-color: var(--brand);
  color: var(--brand-text); font-weight: 600;
}

/* Action buttons */
.pm-sb-action {
  width: 100%; padding: 8px 12px; margin-bottom: 6px;
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px); font-size: 12px; font-weight: 500;
  color: var(--text-secondary); cursor: pointer; transition: all 0.15s; text-align: left;
}
.pm-sb-action:hover { border-color: var(--brand); color: var(--brand); }
.pm-sb-action.active {
  background: var(--status-needed-bg); border-color: var(--status-needed);
  color: var(--status-needed-text); font-weight: 600;
}

/* Legend */
.pm-sb-legend { display: flex; flex-direction: column; gap: 6px; }
.pm-sb-lgd { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.pm-sb-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pm-sb-line { width: 16px; height: 0; flex-shrink: 0; }
.pm-sb-line.solid { border-top: 2px solid var(--text-muted); }
.pm-sb-line.dashed { border-top: 2px dashed var(--text-muted); }

/* Stats */
.pm-sb-stats { display: flex; flex-direction: column; gap: 4px; }
.pm-sb-stat { font-size: 12px; color: var(--text-secondary); }
.pm-sb-stat-val { font-weight: 700; color: var(--text-primary); }

/* CP badge in sidebar */
.pm-sb-cp-badge {
  padding: 10px; background: var(--status-needed-bg);
  border: 1px solid var(--status-needed-border); border-radius: var(--radius-sm, 8px);
  font-size: 12px; color: var(--status-needed-text); margin-top: 8px;
}
.pm-sb-cp-badge a { color: var(--status-needed-text); font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ── Center canvas ──────────────────────────────────────────────────────── */
.pm-center {
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  overflow: hidden;
  background: var(--bg-primary);
  position: relative;
}
.pm-center .pm-canvas { width: 100%; height: 100%; }

/* ── Right detail panel ─────────────────────────────────────────────────── */
.pm-sidebar-right { padding: 0; }
.pm-detail-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--text-muted); font-size: 13px; text-align: center; padding: 20px;
}
.pm-detail-content { padding: 16px; }

/* Detail content styles */
.pm-detail-content .pmd-status { margin-bottom: 8px; }
.pm-detail-content .pmd-code { font-size: 22px; margin-bottom: 4px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pm-three-col { grid-template-columns: 180px 1fr 240px; }
}
@media (max-width: 768px) {
  .pm-three-col { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .pm-sidebar-left { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; }
  .pm-sb-section { margin-bottom: 0; }
  .pm-center { min-height: 400px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SKILL TREE CARDS — HTML node rendering
   ═══════════════════════════════════════════════════════════════════════════ */

.st-canvas { position: relative; }

/* ── Card base ──────────────────────────────────────────────────────────── */
.st-card {
  position: absolute;
  border-radius: 8px;
  border: 2px solid;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.25s;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}
.st-card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  z-index: 5;
}

/* ── Card header ────────────────────────────────────────────────────────── */
.st-card-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 2px;
}
.st-code { font-size: 11px; font-weight: 700; flex: 1; white-space: nowrap; }

/* ── Card title ─────────────────────────────────────────────────────────── */
.st-title {
  font-size: 9px;
  font-weight: 400;
  color: var(--text-muted);
  padding: 0 8px 6px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-desc {
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 10px 0;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Progress bar ───────────────────────────────────────────────────────── */
.st-bar-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 6px;
  margin-top: auto;
}
.st-bar-wrap > .st-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  position: relative;
}
/* The fill is set inline via style="width:X%" */
.st-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}
.st-bar-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ── Fix: bar track needs wrapper ───────────────────────────────────────── */
.st-bar-wrap {
  position: relative;
}

/* ── Core badge ─────────────────────────────────────────────────────────── */
.st-core { position: relative; }
.st-core::after {
  content: 'CORE';
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 1px 3px;
  border-radius: 2px;
  background: rgba(0,0,0,0.07);
  color: inherit;
  line-height: 1;
  pointer-events: none;
}

/* ── Selected state ─────────────────────────────────────────────────────── */
.st-selected, .st-hl-active {
  border-color: var(--brand, #6B5B9A) !important;
  box-shadow: 0 0 0 2px rgba(107,91,154,0.25) !important;
  z-index: 10 !important;
}
.st-hl-neighbor {
  z-index: 5;
}

/* ── Dimmed state ───────────────────────────────────────────────────────── */
.st-dim { opacity: 0.15; pointer-events: none; }

/* ── Edge highlights ────────────────────────────────────────────────────── */
.st-edge-hl { stroke: var(--brand, #6B5B9A) !important; stroke-width: 2.5 !important; }
.st-edge-dim { opacity: 0.1; }

/* ── Critical path ──────────────────────────────────────────────────────── */
.st-cp {
  border-color: var(--status-needed, #9A6318) !important;
  box-shadow: 0 0 0 3px rgba(154,99,24,0.15) !important;
}
.st-edge-cp { stroke: var(--status-needed, #9A6318) !important; stroke-width: 2.5 !important; }

/* ── Locked card visual distinction ─────────────────────────────────────── */
.st-status-locked { border-style: dashed; opacity: 0.7; }
.st-status-locked:hover { opacity: 1; }

/* (padding now set in main card-header rule above) */

/* ── Prereq map: two-column layout with detail inside center ────────────── */
.pm-three-col {
  grid-template-columns: 220px 1fr !important;
}
.pm-center-wrap {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  overflow: hidden;
  min-height: 0;
}
.pm-center-wrap .pm-center {
  flex: 1;
  overflow: auto;
  border: none;
  border-radius: 0;
  min-height: 0;
}
.pm-detail-panel {
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  max-height: 280px;
  overflow-y: auto;
}
.pm-detail-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.pm-detail-content {
  padding: 16px;
}
.pm-sidebar-right { display: none; }

/* ── Center panel scroll fix ────────────────────────────────────────────── */
.pm-center { overflow: auto !important; }
.st-canvas { min-width: max-content; }

/* ═══════════════════════════════════════════════════════════════════════════
   GPA SIMULATOR v2 — Calm & Clear
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────────────────────── */
.gpa-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 20px;
  gap: 24px;
}
.gpa-hero-left { flex: 1; }
.gpa-page-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 24px; font-weight: 700; color: var(--text-primary);
  margin: 0 0 4px;
}
.gpa-standing-text {
  font-size: 15px; color: var(--text-secondary); margin: 0 0 12px;
}
.gpa-proj-badge {
  font-size: 12px; font-weight: 600;
  padding: 2px 8px; border-radius: var(--radius-pill, 999px);
  background: var(--status-complete-bg); color: var(--status-complete-text);
}
.gpa-hero-stats {
  display: flex; gap: 20px; flex-wrap: wrap;
}
.gpa-hs { display: flex; flex-direction: column; }
.gpa-hs-val { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.gpa-hs-lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.gpa-hero-ring { flex-shrink: 0; }

/* ── Thresholds ─────────────────────────────────────────────────────────── */
.gpa-thresholds {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 24px;
}
.gpa-th-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius, 10px); padding: 14px; text-align: center;
}
.gpa-th-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.gpa-th-gpa { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.gpa-th-status { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: var(--radius-pill, 999px); }
.gpa-th-name { font-size: 13px; color: var(--text-secondary); text-align: left; }

.gpa-th-met .gpa-th-status { color: var(--status-complete-text); background: var(--status-complete-bg); }
.gpa-th-met { border-color: var(--status-complete-border); }
.gpa-th-proj .gpa-th-status { color: var(--status-progress-text); background: var(--status-progress-bg); }
.gpa-th-proj { border-color: var(--status-progress-border); }
.gpa-th-reach .gpa-th-status { color: var(--status-needed-text); background: var(--status-needed-bg); }
.gpa-th-no .gpa-th-status { color: var(--text-muted); background: var(--bg-hover); }

/* ── Trend chart wrap ───────────────────────────────────────────────────── */
.gpa-trend-wrap {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius, 10px); padding: 16px; margin-bottom: 24px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .gpa-hero { flex-direction: column; text-align: center; }
  .gpa-hero-stats { justify-content: center; }
  .gpa-thresholds { grid-template-columns: repeat(2, 1fr); }
}

/* ── GPA Sim: section overrides ─────────────────────────────────────────── */
.gpa-section-hdr { display: none; } /* hide old section headers */

.gpa-sim-card, .gpa-retake-card, .gpa-target-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  padding: 16px;
  margin-bottom: 24px;
}

/* Sim presets */
.gpa-sim-presets {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle);
}
.gpa-sim-preset-lbl { font-size: 12px; color: var(--text-muted); }
.sim-preset-btn {
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: var(--radius-pill, 999px); padding: 4px 12px;
  font-size: 12px; font-weight: 500; color: var(--text-secondary);
  cursor: pointer; transition: all 0.15s;
}
.sim-preset-btn:hover { border-color: var(--brand); color: var(--brand); }

/* Sim rows */
.sim-rows { margin-bottom: 12px; }
.sim-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--border-subtle);
}
.sim-row:last-child { border-bottom: none; }
.sim-row-main { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.sim-code {
  width: 100px; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px); background: var(--bg-primary);
  font-size: 13px; color: var(--text-primary);
}
.sim-grade, .sim-credits {
  padding: 6px 8px; border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px); background: var(--bg-primary);
  font-size: 13px; color: var(--text-primary);
}
.sim-credits { width: 50px; }
.sim-cr-lbl { font-size: 11px; color: var(--text-muted); }
.sim-delta {
  font-size: 12px; font-weight: 600; min-width: 60px; text-align: right;
}
.delta-pos { color: var(--status-complete-text); }
.delta-neg { color: var(--status-needed-text); }
.sim-remove {
  background: none; border: none; color: var(--text-muted);
  font-size: 18px; cursor: pointer; padding: 0 4px;
}
.sim-remove:hover { color: var(--status-needed); }
.sim-actions { display: flex; gap: 8px; margin-top: 8px; }
.sim-empty { font-size: 13px; color: var(--text-muted); font-style: italic; margin: 12px 0; }
.sim-count-badge { display: none; }

/* Retake label, checkbox */
.sim-retake-lbl { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }

/* Prediction context */
.sim-pred-context { font-size: 11px; color: var(--text-muted); padding: 4px 0 0 108px; }
.sim-pred-wrap { display: flex; align-items: center; gap: 6px; }
.sim-pred-slider { width: 80px; }
.sim-pred-grade { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.sim-pred-pts { font-size: 11px; color: var(--text-muted); }
.sim-mode-toggle {
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px); padding: 3px 8px;
  font-size: 10px; color: var(--text-muted); cursor: pointer;
}
.sim-ai-btn {
  background: var(--brand-lighter); border: 1px solid var(--brand-light);
  border-radius: var(--radius-sm, 8px); padding: 2px 8px;
  font-size: 10px; color: var(--brand-text); cursor: pointer;
}
.sim-ai-result { font-size: 11px; }
.sim-ai-badge { font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.sim-ai-reason { color: var(--text-muted); }

/* Retake cards */
.retake-intro { font-size: 12px; color: var(--text-muted); margin: 0 0 12px; font-style: italic; }
.retake-card {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.retake-card:last-child { border-bottom: none; }
.retake-info { display: flex; flex-direction: column; gap: 2px; }
.retake-code { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.retake-title { font-size: 11px; color: var(--text-muted); }
.retake-term { font-size: 11px; color: var(--text-muted); }
.retake-top-badge {
  font-size: 9px; font-weight: 600; padding: 1px 5px;
  border-radius: 3px; background: var(--status-complete-bg); color: var(--status-complete-text);
}
.retake-controls { display: flex; align-items: center; gap: 8px; }
.retake-arrow { color: var(--text-muted); }
.retake-grade-sel {
  padding: 4px 6px; border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px); background: var(--bg-primary);
  font-size: 12px; color: var(--text-primary);
}
.retake-gain { font-size: 12px; font-weight: 600; }
.retake-add-btn, .retake-remove-btn { font-size: 11px; }
.grade-chip {
  font-size: 12px; font-weight: 700; padding: 2px 8px;
  border-radius: var(--radius-pill, 999px);
}
.gc-a { color: var(--status-complete-text); background: var(--status-complete-bg); }
.gc-b { color: var(--status-progress-text); background: var(--status-progress-bg); }
.gc-c { color: var(--status-needed-text); background: var(--status-needed-bg); }
.gc-d, .gc-f { color: var(--text-muted); background: var(--bg-hover); }

/* Target GPA */
.target-slider-wrap {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.target-slider-lbl { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.target-gpa-val { font-size: 18px; font-weight: 700; color: var(--text-primary); min-width: 40px; }
.gpa-range { flex: 1; accent-color: var(--brand); }
.target-chip {
  padding: 10px 14px; border-radius: var(--radius, 10px);
  font-size: 13px; margin-bottom: 12px;
}
.tc-met { background: var(--status-complete-bg); color: var(--status-complete-text); border: 1px solid var(--status-complete-border); }
.tc-reach { background: var(--status-needed-bg); color: var(--status-needed-text); border: 1px solid var(--status-needed-border); }
.tc-imp { background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border); }

/* Old card class override */
.card.sim-builder, .card.retake-sim, .card.target-card { 
  background: var(--bg-card); border-color: var(--border); 
  box-shadow: none; border-radius: var(--radius, 10px);
}

/* Button overrides for GPA page */
#sim-add-btn {
  background: var(--brand); color: white; border: none;
  border-radius: var(--radius-sm, 8px); padding: 8px 16px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
#sim-add-btn:hover { background: var(--brand-hover); }
#sim-import-btn {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px); padding: 8px 16px;
  font-size: 13px; color: var(--text-secondary); cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GPA PAGE v2 — Complete Redesign
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override all old GPA styles */
.gpa-hero-card, .gpa-ring-section, .threshold-strip, .gpa-section-hdr { display: none !important; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.gpa2-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 8px 0 20px;
}
.gpa2-hero-left { flex: 1; }
.gpa2-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px;
}
.gpa2-status-sentence {
  font-size: 15px; color: var(--text-secondary); margin: 0 0 16px; line-height: 1.5;
}
.gpa2-metrics { display: flex; gap: 24px; flex-wrap: wrap; }
.gpa2-metric { display: flex; flex-direction: column; }
.gpa2-metric-val {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1.2;
}
.gpa2-metric-lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.gpa2-projected { color: var(--status-progress-text); }
.gpa2-up { color: var(--status-complete-text); }
.gpa2-down { color: var(--status-needed-text); }
.gpa2-hero-ring { flex-shrink: 0; }
.gpa2-ring-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 24px; font-weight: 700; fill: var(--text-primary);
}
.gpa2-ring-sub { font-size: 9px; fill: var(--text-muted); letter-spacing: 0.3px; }

/* ── Thresholds (vertical list, not grid) ───────────────────────────────── */
.gpa2-thresholds {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px;
}
.gpa2-th {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius, 10px); padding: 14px 16px;
  transition: border-color 0.2s;
}
.gpa2-th-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.gpa2-th.met .gpa2-th-icon { background: var(--status-complete-bg); color: var(--status-complete-text); }
.gpa2-th.met { border-color: var(--status-complete-border); }
.gpa2-th.proj .gpa2-th-icon { background: var(--status-progress-bg); color: var(--status-progress-text); }
.gpa2-th.proj { border-color: var(--status-progress-border); }
.gpa2-th.reach .gpa2-th-icon { background: var(--status-needed-bg); color: var(--status-needed-text); }
.gpa2-th.no .gpa2-th-icon { background: var(--bg-hover); color: var(--text-muted); }
.gpa2-th-body { flex: 1; }
.gpa2-th-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.gpa2-th-sub { font-size: 12px; color: var(--text-muted); }

/* ── Chart card ─────────────────────────────────────────────────────────── */
.gpa2-chart-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius, 10px); padding: 16px; margin-bottom: 24px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .gpa2-hero { flex-direction: column; text-align: center; }
  .gpa2-metrics { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GPA & SCHOLARSHIPS — Complete Rebuild
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide ALL old GPA styles */
.gpa-hero-card, .gpa-ring-section, .threshold-strip, .gpa-section-hdr,
.gpa-hero, .gpa-thresholds, .gpa-trend-wrap { display: none !important; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.gpa2-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 8px 0 20px; }
.gpa2-hero-left { flex: 1; }
.gpa2-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.gpa2-status { font-size: 15px; color: var(--text-secondary); margin: 0 0 14px; line-height: 1.5; }
.gpa2-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.gpa2-stat { display: flex; flex-direction: column; }
.gpa2-stat-val { font-size: 20px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.gpa2-stat-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.gpa2-proj { color: var(--status-progress-text); }
.gpa2-up { color: var(--status-complete-text); }
.gpa2-dn { color: var(--status-needed-text); }
.gpa2-ring { flex-shrink: 0; }
.gpa2-ring-num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 700; fill: var(--text-primary); }
.gpa2-ring-lbl { font-size: 10px; fill: var(--text-muted); }

/* ── Thresholds (horizontal row) ────────────────────────────────────────── */
.gpa2-thresholds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 24px; }
.gpa2-th {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius, 10px);
  padding: 12px; display: flex; align-items: center; gap: 8px;
}
.gpa2-th-icon { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }
.gpa2-th.met .gpa2-th-icon { color: var(--status-complete-text); }
.gpa2-th.met { border-color: var(--status-complete-border); }
.gpa2-th.unmet .gpa2-th-icon { color: var(--text-muted); }
.gpa2-th-name { font-size: 12px; font-weight: 600; color: var(--text-primary); flex: 1; }
.gpa2-th-gpa { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.gpa2-th-gap { font-size: 10px; color: var(--text-muted); min-width: 60px; text-align: right; }

/* ── Course list ────────────────────────────────────────────────────────── */
.gpa2-courses {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius, 10px);
  overflow: hidden; margin-bottom: 24px;
}
.gpa2-course {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); transition: background 0.15s;
}
.gpa2-course:last-child { border-bottom: none; }
.gpa2-course:hover { background: var(--bg-hover); }
.gpa2-course-retake { background: var(--status-progress-bg); }
.gpa2-course-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.gpa2-course-code { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.gpa2-course-title { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gpa2-course-meta { font-size: 10px; color: var(--text-muted); }
.gpa2-course-grade { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.gpa2-grade-chip {
  font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: var(--radius-pill, 999px);
}
.gc-a { color: var(--status-complete-text); background: var(--status-complete-bg); }
.gc-b { color: var(--status-progress-text); background: var(--status-progress-bg); }
.gc-c { color: var(--status-needed-text); background: var(--status-needed-bg); }
.gc-d, .gc-f, .gc-w { color: var(--text-muted); background: var(--bg-hover); }
.gpa2-arrow { color: var(--text-muted); font-size: 14px; }
.gpa2-retake-sel {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px);
  background: var(--bg-card); font-size: 12px; color: var(--text-primary);
}
.gpa2-gain { font-size: 11px; font-weight: 600; color: var(--status-complete-text); }
.gpa2-retake-btn {
  background: none; border: 1px solid var(--brand); color: var(--brand);
  border-radius: var(--radius-sm, 8px); padding: 4px 10px; font-size: 11px; font-weight: 500;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.gpa2-retake-btn:hover { background: var(--brand-light); }
.gpa2-retake-remove {
  background: none; border: none; color: var(--text-muted); font-size: 16px;
  cursor: pointer; padding: 0 4px;
}
.gpa2-retake-remove:hover { color: var(--status-needed); }
.gpa2-retake-summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: var(--status-progress-bg);
  border: 1px solid var(--status-progress-border); border-radius: var(--radius, 10px);
  font-size: 13px; color: var(--status-progress-text); margin-bottom: 24px;
}
.gpa2-clear-retakes {
  background: none; border: 1px solid var(--status-progress); color: var(--status-progress-text);
  border-radius: var(--radius-sm, 8px); padding: 4px 12px; font-size: 11px; cursor: pointer;
}

/* ── Trend chart ────────────────────────────────────────────────────────── */
.gpa2-chart {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius, 10px);
  padding: 16px; margin-bottom: 24px;
}

/* ── Scholarships ───────────────────────────────────────────────────────── */
.gpa2-scholarships {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px; margin-bottom: 24px;
}
.gpa2-sch {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius, 10px);
  padding: 14px; text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s;
  display: block;
}
.gpa2-sch:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.gpa2-sch-top { margin-bottom: 8px; }
.gpa2-sch-name { font-size: 14px; font-weight: 600; color: var(--text-primary); display: block; line-height: 1.3; }
.gpa2-sch-award { font-size: 13px; font-weight: 600; color: var(--brand-text); }
.gpa2-sch-reqs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.gpa2-sch-req {
  font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px;
}
.gpa2-sch-req.met { color: var(--status-complete-text); background: var(--status-complete-bg); }
.gpa2-sch-req.gap { color: var(--status-needed-text); background: var(--status-needed-bg); }
.gpa2-sch-cat {
  font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 4px;
  background: var(--brand-lighter); color: var(--brand-text);
}
.gpa2-sch-deadline { font-size: 10px; color: var(--text-muted); }
.gpa2-sch-more { padding: 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
.gpa2-sch-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 14px; font-style: italic; }
.gpa2-sch-close .gpa2-sch { opacity: 0.8; border-style: dashed; }

@media (max-width: 640px) {
  .gpa2-hero { flex-direction: column; text-align: center; }
  .gpa2-stats { justify-content: center; }
  .gpa2-thresholds { grid-template-columns: repeat(2, 1fr); }
  .gpa2-course { flex-direction: column; align-items: flex-start; }
  .gpa2-scholarships { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GPA v3 — SaaS Dashboard Style
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kill ALL old GPA styles */
.gpa-hero-card, .gpa-ring-section, .threshold-strip, .gpa-section-hdr,
.gpa-hero, .gpa-thresholds, .gpa-trend-wrap, .gpa2-hero, .gpa2-thresholds,
.gpa2-chart-card, .sim-builder, .retake-sim, .target-card { display: none !important; }

/* ── Ring stats 2×2 grid ────────────────────────────────────────────────── */
.g3-rings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.g3-ring-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius, 10px);
  padding: 16px 12px 10px; text-align: center;
}
.g3-ring-svg { width: 90px; height: 90px; margin: 0 auto; display: block; }
.g3-ring-val { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700; fill: var(--text-primary); }
.g3-ring-lbl { font-size: 6px; fill: var(--text-muted); letter-spacing: 0.8px; font-weight: 600; }
.g3-ring-sub { display: block; font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ── Section titles ─────────────────────────────────────────────────────── */
.g3-section { margin-bottom: 8px; }
.g3-section-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 600;
  color: var(--text-primary); margin: 0 0 2px;
}
.g3-section-desc { font-size: 12px; color: var(--text-muted); margin: 0; }

/* ── Thresholds (compact horizontal pills) ──────────────────────────────── */
.g3-thresholds { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.g3-th {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-pill, 999px);
  padding: 6px 14px; font-size: 12px; font-weight: 500; color: var(--text-muted);
  display: flex; align-items: center; gap: 6px;
}
.g3-th span { font-weight: 700; color: var(--text-secondary); }
.g3-th.met { border-color: var(--status-complete-border); color: var(--status-complete-text); background: var(--status-complete-bg); }
.g3-th.met span { color: var(--status-complete-text); }

/* ── Card ───────────────────────────────────────────────────────────────── */
.g3-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius, 10px);
  padding: 16px; margin-bottom: 24px;
}

/* ── Grade distribution bars ────────────────────────────────────────────── */
.g3-bars { display: flex; flex-direction: column; gap: 8px; }
.g3-bar-row { display: flex; align-items: center; gap: 10px; }
.g3-bar-label { font-size: 14px; font-weight: 700; color: var(--text-primary); width: 16px; text-align: center; }
.g3-bar-track { flex: 1; height: 24px; background: var(--bg-hover); border-radius: 6px; overflow: hidden; }
.g3-bar-fill { height: 100%; border-radius: 6px; transition: width 0.4s ease; opacity: 0.85; }
.g3-bar-count { font-size: 13px; font-weight: 600; color: var(--text-secondary); width: 24px; text-align: right; }

/* ── Courses list ───────────────────────────────────────────────────────── */
.g3-courses { padding: 0; }
.g3-course {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--border-subtle);
}
.g3-course:last-child { border-bottom: none; }
.g3-course:hover { background: var(--bg-hover); }
.g3-course.retaking { background: var(--status-progress-bg); }
.g3-course-left { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.g3-course-code { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.g3-course-title { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g3-course-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.g3-grade {
  font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: var(--radius-pill, 999px);
}
.g3-arrow { color: var(--text-muted); }
.g3-impact { font-size: 10px; color: var(--text-muted); }
.g3-retake-btn {
  background: none; border: 1px solid var(--brand); color: var(--brand);
  border-radius: var(--radius-sm, 8px); padding: 3px 10px; font-size: 11px;
  cursor: pointer; transition: background 0.15s;
}
.g3-retake-btn:hover { background: var(--brand-light); }
.g3-retake-sel {
  padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); font-size: 12px;
}
.g3-retake-x { background: none; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; }
.g3-retake-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: var(--status-progress-bg);
  border: 1px solid var(--status-progress-border); border-radius: var(--radius, 10px);
  font-size: 13px; color: var(--status-progress-text); margin-bottom: 24px;
}
.g3-clear {
  background: none; border: 1px solid var(--status-progress); color: var(--status-progress-text);
  border-radius: 6px; padding: 3px 10px; font-size: 11px; cursor: pointer;
}

/* ── Scholarship grid ───────────────────────────────────────────────────── */
.g3-sch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-bottom: 24px; }
.g3-sch {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius, 10px);
  padding: 14px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 4px;
  transition: border-color 0.2s;
}
.g3-sch:hover { border-color: var(--brand); }
.g3-sch-name { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.g3-sch-award { font-size: 13px; font-weight: 600; color: var(--brand-text); }
.g3-sch-dl { font-size: 10px; color: var(--text-muted); }
.g3-sch-gap { font-size: 11px; color: var(--status-needed-text); }
.g3-sch-more { padding: 14px; text-align: center; color: var(--text-muted); font-size: 13px; }
.g3-sch-close .g3-sch { border-style: dashed; opacity: 0.75; }
.g3-empty { text-align: center; color: var(--text-muted); font-size: 14px; padding: 20px; font-style: italic; }

@media (max-width: 768px) { .g3-rings { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .g3-rings { grid-template-columns: 1fr 1fr; } .g3-sch-grid { grid-template-columns: 1fr; } }

/* ── Scholarship filters ────────────────────────────────────────────────── */
.g3-sch-filters {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
}
.g3-filter {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-pill, 999px);
  padding: 5px 14px; font-size: 12px; font-weight: 500; color: var(--text-secondary);
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.g3-filter:hover { border-color: var(--brand); color: var(--brand); }
.g3-filter.active {
  background: var(--brand-light); border-color: var(--brand); color: var(--brand-text); font-weight: 600;
}

/* ── Scholarship pagination ─────────────────────────────────────────────── */
.g3-sch-header { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.g3-sch-nav { display: flex; align-items: center; gap: 8px; }
.g3-sch-prev, .g3-sch-next {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm, 8px);
  color: var(--text-secondary); width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px; transition: border-color 0.2s, color 0.2s;
}
.g3-sch-prev:hover:not(:disabled), .g3-sch-next:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.g3-sch-prev:disabled, .g3-sch-next:disabled { opacity: 0.3; cursor: not-allowed; }
.g3-sch-page { font-size: 12px; color: var(--text-muted); min-width: 40px; text-align: center; }
.g3-sch-close-header {
  grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--text-secondary);
  padding: 12px 0 4px; border-top: 1px solid var(--border); margin-top: 8px;
}
.g3-sch-close-item { border-style: dashed; opacity: 0.75; }

/* ── Scholarship requirement badges ─────────────────────────────────────── */
.g3-sch-reqs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.g3-sch-req {
  font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px;
}
.g3-sch-req.met { color: var(--status-complete-text); background: var(--status-complete-bg); }
.g3-sch-req.gap { color: var(--status-needed-text); background: var(--status-needed-bg); }

/* ── Section row (title + nav side by side) ──────────────────────────────── */
.g3-section-row { display: flex; justify-content: space-between; align-items: flex-start; }

/* ── Grade distribution change indicator ────────────────────────────────── */
.g3-bar-changed { color: var(--status-complete-text); font-weight: 700; }

/* ── Planned courses in GPA sim ─────────────────────────────────────────── */
.g3-course-planned { background: var(--brand-lighter); }
.g3-course-meta { font-size: 10px; color: var(--text-muted); }
.g3-planned-grade {
  padding: 4px 8px; border: 1px solid var(--brand-light); border-radius: var(--radius-sm, 8px);
  background: var(--bg-card); font-size: 12px; color: var(--brand-text); font-weight: 600;
}

/* ── Prediction badge + reset ───────────────────────────────────────────── */
.g3-predicted-badge {
  font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px;
  background: var(--brand-lighter); color: var(--brand-text);
}
.g3-reset-pred {
  background: none; border: none; color: var(--text-muted); font-size: 14px;
  cursor: pointer; padding: 0 2px;
}
.g3-reset-pred:hover { color: var(--brand); }
.g3-course-meta em { font-style: italic; color: var(--brand-text); }

/* ── Planned courses bar (separate from retake) ─────────────────────────── */
.g3-planned-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: var(--status-complete-bg);
  border: 1px solid var(--status-complete-border); border-radius: var(--radius, 10px);
  font-size: 13px; color: var(--status-complete-text); margin-bottom: 24px;
}
.g3-clear-planned {
  background: none; border: 1px solid var(--status-complete); color: var(--status-complete-text);
  border-radius: 6px; padding: 3px 10px; font-size: 11px; cursor: pointer;
}
.g3-remove-planned {
  background: none; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 0 4px;
}
.g3-remove-planned:hover { color: var(--status-needed); }

/* ── Center the trend chart SVG ─────────────────────────────────────────── */
.g3-card svg { display: block; margin: 0 auto; max-width: 600px; }

/* ── AI prediction button + badge ───────────────────────────────────────── */
.g3-ai-btn {
  background: var(--brand-lighter); border: 1px solid var(--brand-light);
  border-radius: 4px; padding: 2px 8px; font-size: 10px; font-weight: 600;
  color: var(--brand-text); cursor: pointer; transition: all 0.15s;
}
.g3-ai-btn:hover { background: var(--brand-light); border-color: var(--brand); }
.g3-ai-btn:disabled { opacity: 0.5; cursor: wait; }
.g3-ai-badge {
  font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px;
  background: var(--status-complete-bg); color: var(--status-complete-text);
  cursor: help;
}

/* ── Planned course card restructure ────────────────────────────────────── */
.g3-course-planned .g3-course-top {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.g3-course-planned .g3-course-bottom {
  padding-top: 6px;
}
.g3-course-planned { flex-direction: column; padding: 12px 16px; }

/* ── AI result row ──────────────────────────────────────────────────────── */
.g3-ai-result {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.g3-ai-grade {
  font-size: 12px; font-weight: 700; color: var(--status-complete-text);
  background: var(--status-complete-bg); padding: 2px 8px; border-radius: 4px;
}
.g3-ai-conf {
  font-size: 9px; font-weight: 500; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.3px;
}
.g3-ai-reason {
  font-size: 12px; color: var(--text-muted); font-style: italic; line-height: 1.4;
}
.g3-ai-btn {
  font-size: 11px; padding: 4px 12px;
}

/* ── AI result row (below the course row) ───────────────────────────────── */
.g3-ai-row {
  padding: 4px 16px 10px 16px;
  font-size: 12px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--status-complete-bg);
}
.g3-ai-row .g3-ai-grade {
  font-weight: 700; color: var(--status-complete-text);
}
.g3-ai-row .g3-ai-reason {
  color: var(--text-muted); font-style: italic;
}

/* ── Remove old planned card overrides ──────────────────────────────────── */
.g3-course-planned { all: unset; }
.g3-course-top, .g3-course-bottom { all: unset; }


/* ============================================================================
   COURSE PLANNER v2
   Two-panel layout: sidebar (course browser) + weekly calendar grid
   ============================================================================ */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.pv2-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px);
  background: var(--bg-primary);
  overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.pv2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.pv2-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pv2-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.pv2-stat-pill {
  font-size: 0.78rem;
  color: var(--brand-text);
  background: var(--brand-light);
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
}

/* Term pills */
.pv2-term-pills {
  display: flex;
  gap: 4px;
  background: var(--bg-wash);
  border-radius: 8px;
  padding: 3px;
}
.pv2-term-pill {
  font-size: 0.78rem;
  padding: 5px 14px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s;
  font-family: 'Inter', sans-serif;
}
.pv2-term-pill:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.pv2-term-pill--active {
  background: var(--bg-card);
  color: var(--brand-text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.pv2-term-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-light);
  color: var(--brand-text);
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  margin-left: 4px;
  padding: 0 4px;
}

/* Header action buttons */
.pv2-header-right {
  display: flex;
  gap: 6px;
}
.pv2-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.pv2-icon-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-lighter);
}
.pv2-icon-btn--active {
  background: var(--brand);
  color: var(--text-inverse);
  border-color: var(--brand);
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.pv2-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.pv2-sidebar {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg-card);
  overflow: hidden;
}

/* Search */
.pv2-search {
  position: relative;
  padding: 12px 14px 8px;
}
.pv2-search-icon {
  display: none;
}
.pv2-search-input {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
  font-family: 'Inter', sans-serif;
  background: var(--bg-wash);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.pv2-search-input:focus {
  border-color: var(--brand);
  background: var(--bg-card);
}

/* Filters */
.pv2-filters {
  padding: 4px 14px 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.pv2-filter-pills {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.pv2-fpill {
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s;
}
.pv2-fpill:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.pv2-fpill--active {
  background: var(--brand);
  color: var(--text-inverse);
  border-color: var(--brand);
}
.pv2-filter-row {
  display: flex;
  gap: 6px;
}
.pv2-select {
  flex: 1;
  font-size: 0.72rem;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-wash);
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  cursor: pointer;
}

/* Course list */
.pv2-course-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
}
.pv2-list-count {
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 2px 4px 6px;
  font-weight: 500;
}
.pv2-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.pv2-locked-divider {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 12px 4px 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Course card */
.pv2-card {
  display: flex;
  gap: 0;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--bg-card);
  overflow: hidden;
}
.pv2-card:hover {
  border-color: var(--brand);
  box-shadow: 0 2px 8px rgba(107, 91, 154, 0.1);
}
.pv2-card--added {
  border-color: var(--status-complete-border);
  background: var(--status-complete-bg);
}
.pv2-card--conflict {
  border-color: var(--status-warning-border, #E8D5A0);
  background: var(--status-warning-bg, #FDF8ED);
}
.pv2-card--locked {
  opacity: 0.7;
  cursor: pointer;
}
.pv2-card-accent {
  width: 4px;
  flex-shrink: 0;
  border-radius: 8px 0 0 8px;
}
.pv2-card-body {
  flex: 1;
  padding: 8px 10px;
  min-width: 0;
}
.pv2-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pv2-card-code {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.pv2-card-cr {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 500;
}
.pv2-card-rmp {
  font-size: 0.68rem;
  color: var(--status-warning-text, #9A6318);
  font-weight: 600;
}
.pv2-card-check {
  font-size: 0.72rem;
  color: var(--status-complete-text);
  font-weight: 700;
  margin-left: auto;
}
.pv2-card-warn {
  font-size: 0.72rem;
  color: var(--status-warning-text, #9A6318);
  font-weight: 700;
  background: var(--status-warning-bg, #FDF8ED);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.pv2-card-title {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pv2-card-tags {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.pv2-tag {
  font-size: 0.62rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--brand-light);
  color: var(--brand-text);
  font-weight: 500;
}
.pv2-card-locked {
  font-size: 0.68rem;
  color: var(--status-needed-text, #C27B7B);
  margin-top: 4px;
  font-style: italic;
}

/* Sidebar footer */
.pv2-sidebar-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.pv2-toggle-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.pv2-toggle-label input { accent-color: var(--brand); }

/* ── Main calendar area ──────────────────────────────────────────────────── */
.pv2-main {
  flex: 1;
  overflow: auto;
  position: relative;
  background: var(--bg-primary);
}
.pv2-cal {
  position: relative;
  min-height: 100%;
}

/* Async strip */
.pv2-async {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-wash);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.pv2-async-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}
.pv2-async-chip {
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  cursor: pointer;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}
.pv2-async-chip--conflict {
  border-style: dashed;
  border-color: var(--status-warning-text, #9A6318);
  color: var(--status-warning-text, #9A6318);
}

/* Calendar header */
.pv2-cal-header {
  display: grid;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  position: sticky;
  top: 0;
  z-index: 5;
}
.pv2-gutter-head {
  border-right: 1px solid var(--border-subtle);
}
.pv2-day-head {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 0;
  border-right: 1px solid var(--border-subtle);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.pv2-day-head:last-child { border-right: none; }

/* Calendar body */
.pv2-cal-body {
  display: grid;
  position: relative;
}

/* Time gutter */
.pv2-gutter {
  position: relative;
  border-right: 1px solid var(--border-subtle);
  background: var(--bg-wash);
}
.pv2-hour-label {
  position: absolute;
  right: 8px;
  font-size: 0.65rem;
  color: var(--text-muted);
  transform: translateY(-50%);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Day columns */
.pv2-daycol {
  position: relative;
  border-right: 1px solid var(--border-subtle);
}
.pv2-daycol:last-child { border-right: none; }
.pv2-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-subtle);
}
.pv2-noon {
  background: var(--border);
}

/* Course blocks */
.pv2-block {
  position: absolute;
  left: 3px;
  right: 3px;
  border-radius: 6px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
  padding: 4px 6px;
  cursor: pointer;
  overflow: hidden;
  z-index: 2;
  transition: box-shadow 0.15s;
}
.pv2-block:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  z-index: 3;
}
.pv2-block--lab {
  border-left-style: dashed;
  opacity: 0.85;
}
.pv2-block--conflict {
  border-left-color: var(--status-warning-text, #9A6318);
  background: var(--status-warning-bg, #FDF8ED);
}
.pv2-block-code {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  font-family: 'Plus Jakarta Sans', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv2-lab-tag {
  font-size: 0.6rem;
  font-weight: 500;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pv2-block-time {
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.pv2-block-instr {
  font-size: 0.62rem;
  color: var(--text-secondary);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Drag & drop ghosts */
.pv2-dragging {
  cursor: grabbing !important;
}
.pv2-block { cursor: grab; }
.pv2-snap-ghost {
  border: 2px dashed var(--brand);
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  transition: background 0.15s, border-color 0.15s;
}
.pv2-snap-active {
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  border-color: var(--brand-hover);
}
.pv2-snap-label {
  font-size: 0.62rem;
  color: var(--brand-text);
  padding: 2px 6px;
  font-weight: 600;
  opacity: 0.7;
}
.pv2-snap-active .pv2-snap-label {
  opacity: 1;
}

/* Empty calendar state */
.pv2-empty-cal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  z-index: 1;
}
.pv2-empty-icon { margin-bottom: 12px; opacity: 0.4; }
.pv2-empty-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.pv2-empty-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Drawer (shared base for Prefs, Auto, AI) ────────────────────────────── */
.pv2-drawer {
  position: absolute;
  top: 0; right: 0;
  width: 360px;
  height: 100%;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  z-index: 10;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 24px rgba(0,0,0,0.08);
}
.pv2-drawer--narrow { width: 320px; }
.pv2-drawer--ai { width: 380px; }

.pv2-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pv2-drawer-header-right { display: flex; align-items: center; gap: 8px; }
.pv2-drawer-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.pv2-drawer-close {
  border: none; background: none;
  font-size: 1.2rem; color: var(--text-muted);
  cursor: pointer; padding: 2px 4px; line-height: 1;
}
.pv2-drawer-close:hover { color: var(--text-primary); }
.pv2-drawer-scroll {
  flex: 1; overflow-y: auto; padding: 12px 18px 24px;
}

/* ── Preferences Drawer ──────────────────────────────────────────────────── */
.pv2-pref-group {
  margin-bottom: 20px;
}
.pv2-pref-heading {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.pv2-pref-sub {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
}

/* Topic tuning */
.pv2-topic-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.pv2-topic-name {
  font-size: 0.75rem; color: var(--text-secondary);
  cursor: pointer; flex: 1;
}
.pv2-topic-name:hover { color: var(--brand-text); }
.pv2-topic-btns { display: flex; gap: 2px; }
.pv2-tri {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 4px;
  background: transparent; color: var(--text-muted);
  cursor: pointer; font-size: 0.65rem;
  font-family: 'Inter', sans-serif;
}
.pv2-tri:hover { border-color: var(--brand); }
.pv2-tri--boost { background: var(--status-complete-bg); color: var(--status-complete-text); border-color: var(--status-complete-border); }
.pv2-tri--neutral { background: var(--bg-wash); color: var(--text-secondary); border-color: var(--border); }
.pv2-tri--suppress { background: var(--status-needed-bg, #FDF0F0); color: var(--status-needed-text, #C27B7B); border-color: var(--status-needed-border, #E8C5C5); }
.pv2-topic-courses {
  padding: 6px 0 6px 12px;
}
.pv2-topic-course {
  font-size: 0.68rem; color: var(--text-secondary);
  padding: 2px 0;
}
.pv2-topic-more {
  font-size: 0.65rem; color: var(--text-muted); font-style: italic; padding-top: 2px;
}

/* Reset button */
.pv2-reset-btn {
  font-size: 0.68rem; padding: 4px 10px;
  border: 1px dashed var(--border); border-radius: 5px;
  background: transparent; color: var(--text-muted);
  cursor: pointer; font-family: 'Inter', sans-serif;
  font-weight: 500; transition: all 0.15s;
}
.pv2-reset-btn:hover {
  color: var(--status-needed-text, #C27B7B);
  border-color: var(--status-needed-border, #E8C5C5);
  background: var(--status-needed-bg, #FDF0F0);
}

/* Stacked field layout */
.pv2-pref-field {
  display: flex; flex-direction: column; gap: 5px;
  margin-bottom: 12px;
}
.pv2-pref-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.pv2-pref-pair .pv2-pref-field { margin-bottom: 12px; }

/* Slider rows keep side-by-side label */
.pv2-pref-row {
  display: flex; flex-direction: column; align-items: stretch;
  margin-bottom: 12px; gap: 4px;
}
.pv2-pref-row--slider { /* same as above */ }
.pv2-pref-label {
  font-size: 0.7rem; color: var(--text-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
}

/* Segmented buttons — full-width, equal sizing */
.pv2-seg {
  display: flex; gap: 0;
  border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden;
  width: 100%;
}
.pv2-seg-btn {
  flex: 1;
  padding: 7px 4px;
  border: none; border-right: 1px solid var(--border);
  background: var(--bg-wash);
  color: var(--text-secondary);
  font-size: 0.7rem; font-weight: 500;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.12s;
  white-space: nowrap;
  text-align: center;
}
.pv2-seg-btn:last-child { border-right: none; }
.pv2-seg-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.pv2-seg-btn--on {
  background: var(--brand);
  color: var(--text-inverse);
  font-weight: 600;
}

/* (removed: sliders — preferences simplified) */

/* Toggle switches */
.pv2-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
}
.pv2-toggle-row:last-child { border-bottom: none; }
.pv2-toggle-text { flex: 1; }
.pv2-toggle-name { font-size: 0.78rem; color: var(--text-primary); font-weight: 500; display: block; }
.pv2-toggle-hint { font-size: 0.65rem; color: var(--text-muted); display: block; margin-top: 1px; }
.pv2-switch {
  width: 36px; height: 20px;
  background: var(--border);
  border-radius: 10px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.pv2-switch--on { background: var(--brand); }
.pv2-switch-knob {
  width: 16px; height: 16px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px; left: 2px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.pv2-switch--on .pv2-switch-knob { transform: translateX(16px); }

/* (removed: professor input, chips — simplified preferences) */

/* ── Priority bar + legend ────────────────────────────────────────────── */
.pv2-priority-bar {
  display: flex; height: 28px;
  border-radius: 8px; overflow: hidden;
  margin-bottom: 10px;
}
.pv2-priority-seg {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700; color: var(--text-inverse);
  transition: width 0.3s ease;
  min-width: 28px;
}
.pv2-priority-seg span { opacity: 0.85; }
.pv2-priority--req { background: var(--status-complete); }
.pv2-priority--int { background: var(--brand); }
.pv2-priority--sch { background: var(--status-available, #6A9EC2); }
.pv2-priority-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
}
.pv2-priority-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.7rem; color: var(--text-secondary); font-weight: 500;
}
.pv2-priority-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.pv2-priority-pct {
  color: var(--text-muted); font-size: 0.65rem; font-weight: 400;
}

/* ── Live preview cards ──────────────────────────────────────────────── */
.pv2-preview-list {
  display: flex; flex-direction: column; gap: 6px;
}
.pv2-preview-card {
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-wash);
}
.pv2-preview-top {
  display: flex; align-items: center; justify-content: space-between;
}
.pv2-preview-code {
  font-size: 0.75rem; font-weight: 700;
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.pv2-preview-score {
  font-size: 0.82rem; font-weight: 700;
  color: var(--brand-text);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.pv2-preview-title {
  font-size: 0.68rem; color: var(--text-muted);
  margin: 2px 0 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv2-preview-bars {
  display: flex; gap: 4px;
}
.pv2-preview-bar-row { flex: 1; }
.pv2-preview-bar {
  height: 5px;
  background: var(--bg-card);
  border-radius: 3px;
  overflow: hidden;
}
.pv2-preview-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* (removed: strength bars, weight bars — replaced by priority bar + preview) */

/* ── Auto-Schedule Drawer ────────────────────────────────────────────────── */
.pv2-auto-summary {
  display: flex; gap: 12px; margin-bottom: 16px;
}
.pv2-auto-stat {
  flex: 1; text-align: center;
  padding: 12px 8px;
  background: var(--bg-wash);
  border-radius: 8px;
}
.pv2-auto-val {
  display: block;
  font-size: 1.1rem; font-weight: 700;
  color: var(--brand-text);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.pv2-auto-lbl {
  display: block;
  font-size: 0.62rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-top: 2px;
}
.pv2-auto-actions { margin-bottom: 16px; }
.pv2-gen-btn {
  width: 100%;
  padding: 10px 16px;
  border: none; border-radius: 8px;
  background: var(--brand);
  color: var(--text-inverse);
  font-weight: 600; font-size: 0.82rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background 0.15s;
  margin-bottom: 6px;
}
.pv2-gen-btn:hover { background: var(--brand-hover); }
.pv2-gen-btn--secondary {
  background: var(--bg-wash); color: var(--brand-text);
  border: 1px solid var(--border);
}
.pv2-gen-btn--secondary:hover { background: var(--brand-light); }
.pv2-regen-hint {
  font-size: 0.68rem; color: var(--text-muted);
  text-align: center; margin-top: 4px;
}
.pv2-auto-log-section { margin-top: 8px; }
.pv2-auto-log {
  font-size: 0.68rem;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  color: var(--text-secondary);
  background: var(--bg-wash);
  border-radius: 6px;
  padding: 8px 10px;
  max-height: 280px;
  overflow-y: auto;
}
.pv2-log { padding: 1px 0; }
.pl-log-header { font-weight: 700; color: var(--text-primary); margin-top: 4px; }
.pl-log-add { color: var(--status-complete-text); }
.pl-log-skip { color: var(--text-muted); }
.pl-log-dim { color: var(--text-muted); font-size: 0.62rem; }

/* ── AI Advisor Drawer ───────────────────────────────────────────────────── */
.pv2-ai-header-left {
  display: flex; align-items: center; gap: 10px;
}
.pv2-ai-model-sel {
  font-size: 0.68rem; padding: 2px 6px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-wash); color: var(--text-secondary);
  font-family: 'Inter', sans-serif; cursor: pointer;
}
.pv2-ai-mem {
  font-size: 0.62rem; color: var(--text-muted); font-weight: 500;
}
.pv2-ai-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 18px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.pv2-ai-actions { display: flex; gap: 4px; }
.pv2-ai-action {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.7rem; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); color: var(--text-secondary);
  cursor: pointer; font-family: 'Inter', sans-serif;
  font-weight: 500; transition: all 0.15s;
}
.pv2-ai-action:hover {
  border-color: var(--brand); color: var(--brand);
  background: var(--brand-lighter);
}
.pv2-ai-action svg { flex-shrink: 0; }
.pv2-ai-mgmt { display: flex; gap: 4px; }
.pv2-ai-mgmt-btn {
  font-size: 0.62rem; padding: 3px 7px;
  border: 1px dashed var(--border); border-radius: 4px;
  background: transparent; color: var(--text-muted);
  cursor: pointer; font-family: 'Inter', sans-serif;
}
.pv2-ai-mgmt-btn:hover { color: var(--text-secondary); border-color: var(--text-muted); }
.pv2-ai-scroll { padding-bottom: 0; }

/* Empty state with suggestion cards */
.pv2-ai-empty {
  text-align: center; padding: 32px 16px;
}
.pv2-ai-empty-title {
  font-size: 1rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.pv2-ai-empty-desc {
  font-size: 0.78rem; color: var(--text-muted);
  line-height: 1.5;
}

/* Chat bubbles */
.pv2-ai-bubble {
  margin-bottom: 10px;
  display: flex;
}
.pv2-ai-bubble--user { justify-content: flex-end; }
.pv2-ai-bubble--ai { justify-content: flex-start; }
.pv2-ai-bubble-content {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.78rem;
  line-height: 1.55;
}
.pv2-ai-bubble--user .pv2-ai-bubble-content {
  background: var(--brand);
  color: var(--text-inverse);
  border-bottom-right-radius: 4px;
}
.pv2-ai-bubble--ai .pv2-ai-bubble-content {
  background: var(--bg-wash);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--border-subtle);
}
.pv2-ai-msg--sys {
  text-align: center;
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0;
  margin-bottom: 6px;
}

/* Loading dots */
.pv2-ai-loading {
  display: flex; justify-content: flex-start;
  padding: 8px 0;
}
.pv2-ai-dots {
  display: flex; gap: 4px;
  padding: 10px 16px;
  background: var(--bg-wash);
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
}
.pv2-ai-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: pv2-dot-pulse 1.2s ease-in-out infinite;
}
.pv2-ai-dots span:nth-child(2) { animation-delay: 0.2s; }
.pv2-ai-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pv2-dot-pulse {
  0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
  30% { opacity: 1; transform: scale(1); }
}

/* Compose bar */
.pv2-ai-compose {
  display: flex; gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.pv2-ai-compose-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.78rem;
  font-family: 'Inter', sans-serif;
  background: var(--bg-wash);
  color: var(--text-primary);
  outline: none;
}
.pv2-ai-compose-input:focus {
  border-color: var(--brand);
  background: var(--bg-card);
}
.pv2-ai-compose-send {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 10px;
  background: var(--brand);
  color: var(--text-inverse);
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.pv2-ai-compose-send:hover { background: var(--brand-hover); }
.pv2-ai-compose-send:disabled, .pv2-ai-compose-input:disabled {
  opacity: 0.5; cursor: not-allowed;
}

/* ── Footer (export bar) ─────────────────────────────────────────────────── */
.pv2-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.pv2-footer-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pv2-footer-stat {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.pv2-footer-warn {
  font-size: 0.72rem;
  color: var(--status-warning-text, #9A6318);
  background: var(--status-warning-bg, #FDF8ED);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.pv2-footer-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pv2-foot-btn {
  font-size: 0.75rem;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s;
}
.pv2-foot-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.pv2-foot-btn--primary {
  background: var(--brand);
  color: var(--text-inverse);
  border-color: var(--brand);
}
.pv2-foot-btn--primary:hover {
  background: var(--brand-hover);
}
.pv2-foot-btn--danger {
  color: var(--status-needed-text, #C27B7B);
  border-color: var(--status-needed-border, #E8C5C5);
}
.pv2-foot-btn--danger:hover {
  background: var(--status-needed-bg, #FDF0F0);
}

/* ── Dialog (section picker) ─────────────────────────────────────────────── */
.pv2-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45, 43, 41, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.pv2-dialog {
  background: var(--bg-card);
  border-radius: 12px;
  width: 520px;
  max-width: 92vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.pv2-dialog-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}
.pv2-dialog-code {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
}
.pv2-dialog-sec {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-left: 8px;
  font-weight: 500;
}
.pv2-dialog-title {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 2px;
}
.pv2-dialog-close {
  position: absolute;
  top: 12px;
  right: 16px;
  border: none;
  background: none;
  font-size: 1.2rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}
.pv2-dialog-close:hover { color: var(--text-primary); }

/* Section tabs */
.pv2-dialog-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
  flex-wrap: wrap;
}
.pv2-dialog-tab {
  font-size: 0.72rem;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s;
  white-space: nowrap;
}
.pv2-dialog-tab:hover { border-color: var(--brand); color: var(--brand); }
.pv2-dialog-tab--active {
  background: var(--brand);
  color: var(--text-inverse);
  border-color: var(--brand);
}

/* Info grid */
.pv2-dialog-info {
  padding: 12px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pv2-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pv2-info-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.pv2-info-item > span:last-child {
  font-size: 0.82rem;
  color: var(--text-primary);
}

/* Description */
.pv2-dialog-desc {
  padding: 0 20px 12px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
}
.pv2-dialog-prereq {
  padding: 0 20px 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Lab picker */
.pv2-dialog-labs {
  padding: 0 20px 12px;
}
.pv2-labs-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.pv2-lab-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.pv2-lab-row--active {
  border-color: var(--status-complete-border);
  background: var(--status-complete-bg);
}
.pv2-lab-id {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.68rem;
}
.pv2-lab-current {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--status-complete-text);
  font-weight: 600;
}
.pv2-lab-pick {
  margin-left: auto;
  font-size: 0.68rem;
  padding: 3px 10px;
  border: 1px solid var(--brand);
  border-radius: 4px;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.pv2-lab-pick:hover {
  background: var(--brand);
  color: var(--text-inverse);
}

/* Conflict warning */
.pv2-dialog-conflict {
  margin: 0 20px 8px;
  padding: 8px 12px;
  background: var(--status-warning-bg, #FDF8ED);
  border: 1px solid var(--status-warning-border, #E8D5A0);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--status-warning-text, #9A6318);
  font-weight: 500;
}

/* Action buttons */
.pv2-dialog-actions {
  padding: 12px 20px 16px;
  display: flex;
  gap: 8px;
}
.pv2-dialog-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s;
}
.pv2-dialog-btn--add {
  background: var(--brand);
  color: var(--text-inverse);
}
.pv2-dialog-btn--add:hover { background: var(--brand-hover); }
.pv2-dialog-btn--remove {
  background: var(--status-needed-bg, #FDF0F0);
  color: var(--status-needed-text, #C27B7B);
  border: 1px solid var(--status-needed-border, #E8C5C5);
}
.pv2-dialog-btn--remove:hover {
  background: var(--status-needed-text, #C27B7B);
  color: var(--text-inverse);
}
.pv2-rmp-link {
  color: var(--brand-text);
  text-decoration: none;
  font-weight: 500;
}
.pv2-rmp-link:hover {
  text-decoration: underline;
}
.pv2-dialog-btn--locked {
  background: var(--bg-wash);
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: not-allowed;
  opacity: 0.7;
}
.pv2-dialog-prereq-note {
  font-size: 0.72rem;
  color: var(--status-warning-text, #9A6318);
  background: var(--status-warning-bg, #FDF8ED);
  border: 1px solid var(--status-warning-border, #E8D5A0);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 8px;
  line-height: 1.5;
}
.pv2-dialog-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  padding: 4px 0;
}

/* ── Toast notifications ─────────────────────────────────────────────────── */
.pv2-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  max-width: 500px;
}
.pv2-toast--warning {
  background: var(--status-warning-bg, #FDF8ED);
  color: var(--status-warning-text, #9A6318);
  border: 1px solid var(--status-warning-border, #E8D5A0);
}
.pv2-toast--success {
  background: var(--status-complete-bg);
  color: var(--status-complete-text);
  border: 1px solid var(--status-complete-border);
}
.pv2-toast--info {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.pv2-toast-close {
  border: none;
  background: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  padding: 0 2px;
  line-height: 1;
}
.pv2-toast-close:hover { opacity: 1; }

/* ── Hide old planner classes ────────────────────────────────────────────── */
.pl-filter-bar,
.pl-layout,
.pl-browser,
.pl-calendar-area,
.pl-prefs-panel,
.pl-auto-panel,
.pl-ai-panel,
.pl-dialog-overlay:not(.pv2-dialog-overlay),
.pl-overload-toast {
  display: none !important;
}

/* ============================================================================
   ADVISING DIALOG v2
   ============================================================================ */

.adv2-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45, 43, 41, 0.4);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
}
.adv2-dialog {
  background: var(--bg-card);
  border-radius: 16px;
  width: 480px;
  max-width: 92vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
}

/* Header */
.adv2-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 12px;
}
.adv2-header-text { flex: 1; }
.adv2-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.adv2-type-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--status-complete-bg);
  color: var(--status-complete-text);
}
.adv2-close {
  border: none;
  background: var(--bg-wash);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 1.1rem;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.adv2-close:hover {
  background: var(--bg-active);
  color: var(--text-primary);
}

/* Info cards */
.adv2-info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 0 24px 16px;
}
.adv2-info-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  background: var(--bg-wash);
  border-radius: 10px;
}
.adv2-info-icon {
  color: var(--brand);
  flex-shrink: 0;
  margin-top: 1px;
}
.adv2-info-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.adv2-info-value {
  display: block;
  font-size: 0.72rem;
  color: var(--text-primary);
  font-weight: 500;
  margin-top: 1px;
}
.adv2-link {
  color: var(--brand-text);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 500;
}
.adv2-link:hover { text-decoration: underline; }

/* Note */
.adv2-note {
  margin: 0 24px 16px;
  padding: 10px 14px;
  background: var(--brand-lighter);
  border-radius: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Advisors section */
.adv2-section {
  padding: 0 24px 16px;
}
.adv2-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.adv2-advisor-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}
.adv2-advisor {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  transition: border-color 0.15s;
}
.adv2-advisor:hover {
  border-color: var(--brand);
}
.adv2-advisor-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.82rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  flex-shrink: 0;
}
.adv2-advisor-info { flex: 1; min-width: 0; }
.adv2-advisor-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
}
.adv2-advisor-role {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.adv2-advisor-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.adv2-action-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.15s;
}
.adv2-action-btn:hover {
  background: var(--brand-light);
  border-color: var(--brand);
  color: var(--brand);
}

.adv2-copied-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand, #6B5B9A);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  animation: adv2-tip-in 0.2s ease;
  z-index: 10;
}
.adv2-copied-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--brand, #6B5B9A);
}
@keyframes adv2-tip-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Primary action buttons */
.adv2-actions {
  display: flex;
  gap: 8px;
  padding: 0 24px 16px;
}
.adv2-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
}
.adv2-btn--primary {
  background: var(--brand);
  color: var(--text-inverse);
}
.adv2-btn--primary:hover { background: var(--brand-hover); }
.adv2-btn--secondary {
  background: var(--bg-wash);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.adv2-btn--secondary:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* Registrar footer */
.adv2-registrar {
  margin: 0 24px 20px;
  padding: 12px 14px;
  background: var(--bg-wash);
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
}
.adv2-registrar-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.adv2-registrar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Hide old advising styles */
.adv-overlay { display: none !important; }

/* ============================================================================
   PROGRAM REVIEW EDITOR
   ============================================================================ */
.pre-overlay {
  position: fixed; inset: 0;
  z-index: 300;
}
.pre-editor {
  background: var(--bg-card);
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* Header */
.pre-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
  border-bottom: 2px solid var(--border);
  background: var(--bg-card) !important;
  flex-shrink: 0;
  z-index: 1;
  min-height: 56px;
}
.pre-header-left { display: flex; align-items: center; gap: 12px; }
.pre-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem; font-weight: 700;
  color: var(--text-primary); margin: 0;
}
.pre-program {
  font-size: 0.75rem; color: var(--text-muted);
  background: var(--bg-wash); padding: 3px 10px; border-radius: 4px;
}
.pre-header-right { display: flex; align-items: center; gap: 8px; }
.pre-btn {
  font-size: 0.82rem; padding: 8px 18px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card) !important; color: var(--text-secondary) !important;
  cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 600;
  transition: all 0.15s;
}
.pre-btn:hover { border-color: var(--text-muted); color: var(--text-primary) !important; }
.pre-btn--save { background: var(--brand) !important; color: var(--text-inverse) !important; border-color: var(--brand) !important; }
.pre-btn--save:hover { background: var(--brand-hover) !important; }
.pre-btn--reset { color: var(--text-muted) !important; border-style: dashed; }
.pre-btn--reset:hover { color: var(--status-needed-text,#C27B7B) !important; border-color: var(--status-needed-border,#E8C5C5); }
.pre-close {
  border: none; background: var(--bg-wash);
  width: 30px; height: 30px; border-radius: 6px;
  font-size: 1.1rem; color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pre-close:hover { background: var(--bg-active); color: var(--text-primary); }

/* Columns */
.pre-columns {
  display: grid; grid-template-columns: 3fr 2fr;
  flex: 1; overflow: hidden;
}
.pre-col { display: flex; flex-direction: column; overflow: hidden; }
.pre-col-source { border-right: 1px solid var(--border); }
.pre-col-header {
  padding: 10px 16px;
  font-size: 0.72rem; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.pre-col-sub { font-weight: 400; text-transform: none; opacity: 0.7; letter-spacing: 0; }

/* Source column scroll */
.pre-source-scroll { flex: 1; overflow-y: auto; }

/* PDF drop zone (compact) */
.pre-pdf-drop {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; margin: 10px 12px;
  border: 1px dashed var(--border); border-radius: 8px;
  cursor: pointer; transition: all 0.15s;
}
.pre-pdf-drop:hover { border-color: var(--brand); background: var(--brand-lighter); }
.pre-drop-text { font-size: 0.72rem; color: var(--text-muted); }
.pre-pdf-browse { color: var(--brand-text); cursor: pointer; text-decoration: underline; }
.pre-pdf-dragover { background: var(--brand-lighter) !important; border-color: var(--brand) !important; }

/* PDF rendered pages */
.pre-pdf-page {
  max-width: 100%;
  display: block;
  border-bottom: 2px solid var(--border);
}
.pre-pdf-page:last-child { border-bottom: none; }

/* Diff view */
.pre-diff-section {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.pre-diff-heading {
  font-size: 0.7rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.pre-diff-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 5px;
  font-size: 0.72rem; margin-bottom: 2px;
}
.pre-diff-row--sm { padding: 3px 8px; font-size: 0.68rem; }
.pre-diff--match { background: var(--status-complete-bg); }
.pre-diff--missing { background: var(--status-warning-bg, #FDF8ED); }
.pre-diff--extra { background: var(--status-needed-bg, #FDF0F0); opacity: 0.7; }
.pre-diff-icon {
  font-size: 0.65rem; font-weight: 700; width: 14px; text-align: center; flex-shrink: 0;
}
.pre-diff--match .pre-diff-icon { color: var(--status-complete-text); }
.pre-diff--missing .pre-diff-icon { color: var(--status-warning-text, #9A6318); }
.pre-diff--extra .pre-diff-icon { color: var(--status-needed-text, #C27B7B); }
.pre-diff-code {
  font-weight: 700; color: var(--text-primary); min-width: 70px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.pre-diff-title { flex: 1; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pre-diff-add {
  font-size: 0.62rem; padding: 2px 8px;
  border: 1px solid var(--brand); border-radius: 4px;
  background: transparent; color: var(--brand);
  cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 600;
  flex-shrink: 0;
}
.pre-diff-add:hover { background: var(--brand); color: var(--text-inverse); }
.pre-diff-divider {
  font-size: 0.62rem; color: var(--status-needed-text, #C27B7B);
  font-weight: 600; margin: 8px 0 4px; padding-top: 6px;
  border-top: 1px dashed var(--border-subtle);
}
.pre-diff-summary {
  display: flex; gap: 10px; margin-top: 8px; padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.65rem; font-weight: 600;
}
.pre-diff-sum--match { color: var(--status-complete-text); }
.pre-diff-sum--missing { color: var(--status-warning-text, #9A6318); }
.pre-diff-sum--extra { color: var(--status-needed-text, #C27B7B); }

/* Choice diff */
.pre-diff-choice { margin-bottom: 8px; }
.pre-diff-choice-label { font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 3px; }
.pre-diff-choice-req { font-weight: 400; color: var(--text-muted); }

/* Elective diff */
.pre-diff-elec {
  font-size: 0.7rem; color: var(--text-secondary); padding: 4px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.pre-diff-elec:last-child { border-bottom: none; }

/* Raw text (collapsible) */
.pre-raw-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; cursor: pointer;
  font-size: 0.68rem; color: var(--text-muted); font-weight: 500;
  border-top: 1px solid var(--border-subtle);
}
.pre-raw-toggle:hover { background: var(--bg-hover); }
.pre-raw-text {
  font-size: 0.6rem; line-height: 1.5;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  color: var(--text-muted);
  white-space: pre-wrap; word-break: break-word;
  margin: 0; padding: 8px 16px;
  max-height: 300px; overflow-y: auto;
  background: var(--bg-wash);
}

/* Requirements scroll */
.pre-reqs-scroll {
  flex: 1; overflow-y: auto; padding: 12px 16px;
}

/* Sections */
.pre-section { margin-bottom: 16px; }
.pre-section-header {
  font-size: 0.72rem; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.pre-count {
  font-size: 0.62rem; font-weight: 500;
  background: var(--bg-wash); padding: 1px 6px;
  border-radius: 3px; color: var(--text-muted);
}

/* Field inputs */
.pre-field {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.pre-field-label { font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; }
.pre-field-input {
  width: 70px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 5px;
  font-size: 0.75rem; font-family: 'Inter', sans-serif;
  background: var(--bg-wash); color: var(--text-primary);
  text-align: center;
}
.pre-field-input--sm { width: 50px; }

/* Course list */
.pre-course-list { display: flex; flex-direction: column; gap: 3px; }
.pre-course {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 6px;
  background: var(--bg-wash);
  font-size: 0.72rem;
}
.pre-course:hover { background: var(--bg-hover); }
.pre-course--missing { border-left: 3px solid var(--status-needed-text,#C27B7B); }
.pre-course-code {
  font-weight: 700; color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', sans-serif;
  min-width: 70px;
}
.pre-course-title { flex: 1; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pre-course-x {
  border: none; background: none;
  color: var(--text-muted); cursor: pointer;
  font-size: 0.85rem; opacity: 0.4; padding: 0 2px;
}
.pre-course-x:hover { opacity: 1; color: var(--status-needed-text,#C27B7B); }

/* Add row */
.pre-add-row {
  display: flex; gap: 4px; margin-top: 4px;
}
.pre-add-input {
  flex: 1; padding: 5px 8px;
  border: 1px dashed var(--border); border-radius: 5px;
  font-size: 0.72rem; font-family: 'Inter', sans-serif;
  background: transparent; color: var(--text-primary);
}
.pre-add-input:focus { border-style: solid; border-color: var(--brand); outline: none; }
.pre-add-btn {
  border: 1px solid var(--brand); border-radius: 5px;
  background: transparent; color: var(--brand);
  width: 28px; cursor: pointer; font-size: 0.85rem; font-weight: 700;
}
.pre-add-btn:hover { background: var(--brand); color: var(--text-inverse); }

/* Choice groups */
.pre-choice-group { margin-bottom: 10px; }
.pre-choice-label {
  font-size: 0.72rem; font-weight: 600; color: var(--text-secondary);
  margin-bottom: 4px;
}
.pre-choice-req { font-weight: 400; color: var(--text-muted); }

/* Elective groups */
.pre-elec-group {
  padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid var(--border-subtle); border-radius: 8px;
}
.pre-elec-label { font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 4px; }
.pre-elec-details { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pre-elec-tag {
  font-size: 0.62rem; padding: 2px 6px;
  background: var(--brand-light); color: var(--brand-text);
  border-radius: 3px; font-weight: 500;
}

/* Notes */
.pre-note {
  font-size: 0.7rem; color: var(--text-muted);
  line-height: 1.5; padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.pre-note:last-child { border-bottom: none; }

/* Debug log */
.pre-debug {
  background: var(--bg-wash);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 8px 10px;
  max-height: 180px;
  overflow-y: auto;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 0.65rem;
}
.pre-log { padding: 1px 0; }
.pre-log--info { color: var(--text-muted); }
.pre-log--change { color: var(--brand-text); }
.pre-log--warn { color: var(--status-warning-text,#9A6318); }

/* ============================================================================
   TRANSCRIPT EDITOR v2
   ============================================================================ */
.te-wrap { padding: 0; }

/* Header */
.te-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  position: sticky; top: 0; z-index: 10;
}
.te-header-left { display: flex; align-items: center; gap: 12px; }
.te-header-right { display: flex; align-items: center; gap: 10px; }
.te-back {
  display: inline-flex; align-items: center; gap: 4px;
  border: none; background: none;
  color: var(--text-muted); font-size: 0.78rem;
  cursor: pointer; font-family: 'Inter', sans-serif;
}
.te-back:hover { color: var(--text-primary); }
.te-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1rem; font-weight: 700;
  color: var(--text-primary); margin: 0;
}
.te-summary { display: flex; gap: 12px; }
.te-sum-item {
  font-size: 0.72rem; color: var(--text-muted); font-weight: 500;
}
.te-btn {
  font-size: 0.75rem; padding: 7px 14px;
  border-radius: 8px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 600;
  border: 1px solid var(--border);
  transition: all 0.15s;
}
.te-btn--outline { background: var(--bg-card); color: var(--text-secondary); }
.te-btn--outline:hover { border-color: var(--brand); color: var(--brand); }
.te-btn--primary { background: var(--brand); color: var(--text-inverse); border-color: var(--brand); }
.te-btn--primary:hover { background: var(--brand-hover); }

/* Semesters container */
.te-semesters { padding: 16px 24px; }

/* Semester card */
.te-sem {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  margin-bottom: 12px;
  overflow: hidden;
}
.te-sem-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--bg-wash);
  border-bottom: 1px solid var(--border-subtle);
}
.te-sem--collapsed .te-sem-header { border-bottom: none; }
.te-collapse {
  border: none; background: none;
  color: var(--text-muted); cursor: pointer;
  padding: 2px; display: flex; align-items: center;
}
.te-collapse:hover { color: var(--text-primary); }
.te-term-input {
  border: 1px solid transparent; background: transparent;
  font-size: 0.85rem; font-weight: 700;
  color: var(--text-primary); padding: 3px 6px;
  border-radius: 5px; flex: 1; min-width: 100px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.te-term-input:hover, .te-term-input:focus {
  border-color: var(--border); outline: none;
  background: var(--bg-card);
}
.te-sem-stats { display: flex; gap: 8px; flex-shrink: 0; }
.te-stat {
  font-size: 0.65rem; color: var(--text-muted);
  font-weight: 600; padding: 2px 6px;
  background: var(--bg-card); border-radius: 4px;
}
.te-stat--ip {
  background: var(--status-progress-bg, #FDF8ED);
  color: var(--status-warning-text, #9A6318);
}
.te-sem-remove {
  border: none; background: none;
  color: var(--text-muted); font-size: 1rem;
  cursor: pointer; opacity: 0.4; padding: 0 4px;
}
.te-sem-remove:hover { opacity: 1; color: var(--status-needed-text, #C27B7B); }

/* Course table */
.te-courses { padding: 0 14px 10px; }
.te-row {
  display: grid;
  grid-template-columns: 90px 1fr 80px 50px 28px;
  gap: 6px; align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.te-row:last-of-type { border-bottom: none; }
.te-row--header {
  font-size: 0.6rem; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.05em; padding: 8px 0 4px;
  border-bottom: 1px solid var(--border);
}
.te-row--ip { border-left: 3px solid var(--status-warning-text, #9A6318); padding-left: 6px; margin-left: -3px; }
.te-row--fail { border-left: 3px solid var(--status-needed-text, #C27B7B); padding-left: 6px; margin-left: -3px; }
.te-code {
  font-size: 0.78rem; font-weight: 700;
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.te-title {
  font-size: 0.72rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.te-grade, .te-credits {
  font-size: 0.75rem; padding: 4px 6px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-wash); color: var(--text-primary);
  font-family: 'Inter', sans-serif;
}
.te-grade:focus, .te-credits:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-light);
  outline: none;
}
.te-credits { width: 100%; text-align: center; }
.te-x {
  border: none; background: none;
  color: var(--text-muted); font-size: 0.85rem;
  cursor: pointer; opacity: 0.3; padding: 0 2px;
}
.te-x:hover { opacity: 1; color: var(--status-needed-text, #C27B7B); }

/* Add course row */
.te-add-row { padding: 8px 0 4px; }
.te-add-wrap { position: relative; max-width: 340px; }
.te-add-input {
  width: 100%; padding: 7px 12px;
  border: 1px dashed var(--border); border-radius: 8px;
  background: transparent; color: var(--text-primary);
  font-size: 0.75rem; font-family: 'Inter', sans-serif;
  box-sizing: border-box;
}
.te-add-input:focus {
  border-style: solid; border-color: var(--brand);
  outline: none; background: var(--bg-card);
}

/* Autocomplete suggestions */
.te-suggestions {
  position: absolute; top: 100%; left: 0; right: 0;
  z-index: 50; background: var(--bg-card);
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  max-height: 200px; overflow-y: auto;
}
.te-sug {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; cursor: pointer;
  transition: background 0.1s;
}
.te-sug:hover, .te-sug--focus {
  background: var(--brand-lighter);
}
.te-sug-code {
  font-size: 0.75rem; font-weight: 700;
  color: var(--text-primary); min-width: 70px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.te-sug-title {
  font-size: 0.7rem; color: var(--text-muted);
  flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.te-sug-cr {
  font-size: 0.62rem; color: var(--text-muted);
  flex-shrink: 0;
}
.te-sug-empty {
  padding: 12px; text-align: center;
  font-size: 0.72rem; color: var(--text-muted);
}

/* ── Onboarding Degree Review ────────────────────────────────────────────── */
.obr-wrap {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  overflow: hidden;
}
.obr-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.obr-header-left { display: flex; align-items: center; gap: 12px; }
.obr-header-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem; font-weight: 700;
  color: var(--text-primary);
}
.obr-header-right { display: flex; gap: 8px; }
.obr-hint { font-weight: 400; color: var(--text-muted); font-size: 0.72rem; }
.obr-done-btn, .obr-cancel-btn, .obr-reset-btn {
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 0.78rem; font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer; transition: all 0.15s;
}
.obr-done-btn {
  border: none;
  background: var(--brand); color: var(--text-inverse);
}
.obr-done-btn:hover { background: var(--brand-hover); }
.obr-cancel-btn {
  border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-secondary);
}
.obr-cancel-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }
.obr-reset-btn {
  border: 1px dashed var(--border);
  background: transparent; color: var(--text-muted);
}
.obr-reset-btn:hover { color: var(--status-needed-text,#C27B7B); border-color: var(--status-needed-border,#E8C5C5); }
.obr-section { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
.obr-section:last-child { border-bottom: none; }
.obr-label {
  font-size: 0.7rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.obr-count {
  font-size: 0.62rem; background: var(--bg-wash);
  padding: 1px 6px; border-radius: 3px; font-weight: 500;
}
.obr-list { display: flex; flex-direction: column; gap: 3px; }
.obr-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 6px;
  background: var(--bg-wash); font-size: 0.72rem;
}
.obr-item:hover { background: var(--bg-hover); }
.obr-item--warn { border-left: 3px solid var(--status-warning-text,#9A6318); }
.obr-code {
  font-weight: 700; color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', sans-serif; min-width: 70px;
}
.obr-title { flex: 1; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obr-x {
  border: none; background: none; color: var(--text-muted);
  cursor: pointer; font-size: 0.85rem; opacity: 0.4; padding: 0 2px;
}
.obr-x:hover { opacity: 1; color: var(--status-needed-text,#C27B7B); }
.obr-add { display: flex; gap: 4px; margin-top: 6px; }
.obr-input {
  flex: 1; padding: 5px 8px;
  border: 1px dashed var(--border); border-radius: 5px;
  font-size: 0.72rem; font-family: 'Inter', sans-serif;
  background: transparent; color: var(--text-primary);
}
.obr-input:focus { border-style: solid; border-color: var(--brand); outline: none; }
.obr-add-btn {
  border: 1px solid var(--brand); border-radius: 5px;
  background: transparent; color: var(--brand);
  width: 28px; cursor: pointer; font-size: 0.85rem; font-weight: 700;
}
.obr-add-btn:hover { background: var(--brand); color: var(--text-inverse); }
.obr-choice { margin-bottom: 10px; }
.obr-choice-head { font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.obr-choice-req { font-weight: 400; color: var(--text-muted); }
.obr-elec {
  padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid var(--border-subtle); border-radius: 8px;
}
.obr-elec-text { font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 4px; }
.obr-elec-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.obr-tag {
  font-size: 0.62rem; padding: 2px 6px;
  background: var(--brand-light); color: var(--brand-text);
  border-radius: 3px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
}
.obr-num {
  width: 40px; padding: 2px 4px;
  border: 1px solid var(--border); border-radius: 3px;
  font-size: 0.68rem; text-align: center;
  font-family: 'Inter', sans-serif;
  background: var(--bg-card); color: var(--text-primary);
}
.obr-log {
  background: var(--bg-wash); border: 1px solid var(--border-subtle);
  border-radius: 6px; padding: 8px 10px;
  max-height: 120px; overflow-y: auto;
  font-family: 'JetBrains Mono', 'SF Mono', monospace; font-size: 0.62rem;
}
.obr-log-section { border-top: 1px solid var(--border-subtle); }
.obr-log-line { padding: 1px 0; }
.obr-log--info { color: var(--text-muted); }
.obr-log--change { color: var(--brand-text); }
.obr-log--warn { color: var(--status-warning-text,#9A6318); }

/* Two-column layout — expand to near full screen */
.obr-wrap {
  position: fixed;
  inset: 56px 0 0 0;
  z-index: 50;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 1px solid var(--border);
}
.obr-columns {
  display: grid;
  grid-template-columns: 3fr 2fr;
  flex: 1;
  overflow: hidden;
}
.obr-col {
  overflow-y: auto;
}
.obr-col-source { border-right: 1px solid var(--border-subtle); }
.obr-col-title {
  font-size: 0.68rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 8px 14px; border-bottom: 1px solid var(--border-subtle);
}

/* PDF drop (compact) */
.obr-pdf-drop {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; margin: 8px 10px;
  border: 1px dashed var(--border); border-radius: 6px;
  cursor: pointer; transition: all 0.15s;
}
.obr-pdf-drop:hover { border-color: var(--brand); background: var(--brand-lighter); }
.obr-pdf-dragover { background: var(--brand-lighter) !important; border-color: var(--brand) !important; }
.obr-drop-text { font-size: 0.7rem; color: var(--text-muted); }
.obr-browse { color: var(--brand-text); cursor: pointer; text-decoration: underline; }

/* Diff rows — reuse settings editor style */
.obr-diff-section { padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); }
.obr-diff-heading {
  font-size: 0.65rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px;
}
.obr-diff-row {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 6px; border-radius: 4px; font-size: 0.7rem; margin-bottom: 2px;
}
.obr-diff-row--sm { padding: 2px 6px; font-size: 0.65rem; }
.obr-diff--match { background: var(--status-complete-bg); }
.obr-diff--missing { background: var(--status-warning-bg, #FDF8ED); }
.obr-diff--extra { background: var(--status-needed-bg, #FDF0F0); opacity: 0.7; }
.obr-diff-icon { font-size: 0.6rem; font-weight: 700; width: 12px; text-align: center; flex-shrink: 0; }
.obr-diff--match .obr-diff-icon { color: var(--status-complete-text); }
.obr-diff--missing .obr-diff-icon { color: var(--status-warning-text, #9A6318); }
.obr-diff--extra .obr-diff-icon { color: var(--status-needed-text, #C27B7B); }
.obr-diff-code { font-weight: 700; color: var(--text-primary); min-width: 60px; font-family: 'Plus Jakarta Sans', sans-serif; }
.obr-diff-title { flex: 1; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obr-diff-add {
  font-size: 0.58rem; padding: 1px 6px; border: 1px solid var(--brand);
  border-radius: 3px; background: transparent; color: var(--brand);
  cursor: pointer; font-weight: 600; flex-shrink: 0;
}
.obr-diff-add:hover { background: var(--brand); color: var(--text-inverse); }
.obr-diff-divider {
  font-size: 0.58rem; color: var(--status-needed-text, #C27B7B);
  font-weight: 600; margin: 6px 0 3px; padding-top: 4px;
  border-top: 1px dashed var(--border-subtle);
}
.obr-diff-summary {
  display: flex; gap: 8px; margin-top: 6px; padding-top: 4px;
  border-top: 1px solid var(--border-subtle); font-size: 0.6rem; font-weight: 600;
}
.obr-diff-sum--match { color: var(--status-complete-text); }
.obr-diff-sum--missing { color: var(--status-warning-text, #9A6318); }
.obr-diff-sum--extra { color: var(--status-needed-text, #C27B7B); }
.obr-diff-choice-label { font-size: 0.65rem; font-weight: 600; color: var(--text-secondary); margin: 6px 0 2px; }
.obr-orig-note {
  font-size: 0.65rem; color: var(--text-muted); line-height: 1.5;
  padding: 4px 0; border-bottom: 1px solid var(--border-subtle);
}
.obr-orig-note:last-child { border-bottom: none; }

/* Program guide text display */
.obr-guide-area { flex: 1; overflow-y: auto; }
.obr-guide-text {
  font-size: 0.68rem; line-height: 1.7;
  font-family: 'Inter', sans-serif;
  color: var(--text-secondary);
  white-space: pre-wrap; word-break: break-word;
  margin: 0; padding: 12px 14px;
}
.obr-guide-course {
  color: var(--brand-text); font-weight: 600;
  background: var(--brand-lighter); padding: 0 3px;
  border-radius: 2px;
}
.obr-guide-num { color: var(--text-primary); font-weight: 700; }
.obr-guide-heading { color: var(--text-primary); font-weight: 700; }
.obr-guide-rule {
  background: var(--status-warning-bg, #FDF8ED);
  color: var(--status-warning-text, #9A6318);
  padding: 1px 4px; border-radius: 2px;
  font-weight: 600;
}
.obr-pdf-page {
  max-width: 100%;
  display: block;
  border-bottom: 2px solid var(--border);
}
.obr-pdf-page:last-child { border-bottom: none; }
.obr-guide-loading {
  padding: 40px; text-align: center;
  color: var(--text-muted); font-size: 0.78rem;
}
.obr-guide-empty {
  padding: 40px 20px; text-align: center;
}
.obr-guide-empty-text { font-size: 0.82rem; color: var(--text-secondary); font-weight: 500; }
.obr-guide-empty-hint { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }

/* ── Expandable Card Editor (edc-*) ──────────────────────────────────────── */
.obr-edit-scroll { overflow-y: auto; padding: 10px 14px; }
.edc-section { margin-bottom: 14px; }
.edc-section-title {
  font-size: 0.68rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}

/* Fields */
.edc-field-row { display: flex; gap: 8px; margin-bottom: 6px; }
.edc-field { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.edc-field-label { font-size: 0.62rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.edc-input {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 5px;
  font-size: 0.72rem; font-family: 'Inter', sans-serif;
  background: var(--bg-wash); color: var(--text-primary);
}
.edc-input:focus { border-color: var(--brand); outline: none; background: var(--bg-card); }
.edc-input--sm { max-width: 80px; text-align: center; }

/* Tag list (for core courses, options, exclusions) */
.edc-tag-list { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.edc-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 6px 3px 8px; border-radius: 4px;
  background: var(--brand-light); color: var(--brand-text);
  font-size: 0.68rem; font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.edc-tag--warn { background: var(--status-warning-bg, #FDF8ED); color: var(--status-warning-text, #9A6318); }
.edc-tag--muted { background: var(--bg-wash); color: var(--text-muted); }
.edc-tag-x {
  border: none; background: none; color: inherit;
  cursor: pointer; font-size: 0.75rem; opacity: 0.5; padding: 0 1px; line-height: 1;
}
.edc-tag-x:hover { opacity: 1; }

/* Add row */
.edc-add { display: flex; gap: 4px; margin-top: 4px; }
.edc-add-input {
  flex: 1; padding: 4px 8px;
  border: 1px dashed var(--border); border-radius: 5px;
  font-size: 0.68rem; font-family: 'Inter', sans-serif;
  background: transparent; color: var(--text-primary);
  max-width: 200px;
}
.edc-add-input:focus { border-style: solid; border-color: var(--brand); outline: none; }
.edc-add-btn {
  border: 1px solid var(--brand); border-radius: 5px;
  background: transparent; color: var(--brand);
  width: 26px; cursor: pointer; font-size: 0.8rem; font-weight: 700;
}
.edc-add-btn:hover { background: var(--brand); color: var(--text-inverse); }

/* Expandable cards */
.edc-card {
  border: 1px solid var(--border-subtle); border-radius: 8px;
  margin-bottom: 6px; overflow: hidden;
  transition: border-color 0.15s;
}
.edc-card--open { border-color: var(--brand); }
.edc-card-header {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; cursor: pointer;
  transition: background 0.1s;
}
.edc-card-header:hover { background: var(--bg-hover); }
.edc-chevron {
  flex-shrink: 0; color: var(--text-muted);
  transition: transform 0.15s;
}
.edc-card--open .edc-chevron { color: var(--brand); }
.edc-card-summary {
  flex: 1; font-size: 0.7rem; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.edc-card-pick {
  color: var(--text-muted); font-weight: 400;
}
.edc-card-remove {
  border: none; background: none; color: var(--text-muted);
  cursor: pointer; font-size: 0.85rem; opacity: 0.3; padding: 0 2px;
}
.edc-card-remove:hover { opacity: 1; color: var(--status-needed-text, #C27B7B); }
.edc-card-body {
  padding: 8px 10px 10px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-wash);
}

/* Add group button */
.edc-add-group {
  display: block; width: 100%;
  padding: 6px; margin-top: 4px;
  border: 1px dashed var(--border); border-radius: 6px;
  background: transparent; color: var(--text-muted);
  font-size: 0.68rem; font-weight: 600; cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.15s;
}
.edc-add-group:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-lighter); }

/* Notes */
.edc-note {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 4px 0; font-size: 0.65rem; color: var(--text-muted);
  line-height: 1.4; border-bottom: 1px solid var(--border-subtle);
}
.edc-note:last-of-type { border-bottom: none; }
.edc-note-text { flex: 1; }

/* Rule builder */
.obr-rule-hint {
  font-size: 0.68rem; color: var(--text-muted);
  margin-bottom: 8px; line-height: 1.4;
}
.obr-rule-builder { }
.obr-rule-type {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 0.75rem; font-family: 'Inter', sans-serif;
  background: var(--bg-wash); color: var(--text-primary);
  margin-bottom: 8px;
}
.obr-rule-fields { display: flex; flex-direction: column; gap: 6px; }
.obr-rule-row { display: flex; gap: 6px; }
.obr-rule-input {
  flex: 1; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 0.72rem; font-family: 'Inter', sans-serif;
  background: var(--bg-card); color: var(--text-primary);
}
.obr-rule-input:focus { border-color: var(--brand); outline: none; }
.obr-rule-sm { max-width: 90px; }
.obr-rule-submit {
  width: 100%; padding: 7px; margin-top: 2px;
  font-size: 0.72rem; font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH PAGE — matches warm light design system
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg-primary, #F8F7F4);
  padding: 24px;
}

.auth-card {
  background: var(--bg-card, #FFFFFF);
  border-radius: var(--radius-lg, 12px);
  padding: 40px 36px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08));
  border: 1px solid var(--border, #E3E0D8);
}

.auth-card--shake {
  animation: auth-shake 0.4s ease-in-out;
}

@keyframes auth-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.auth-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.auth-logo {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--brand, #6B5B9A);
  margin: 0;
  letter-spacing: -0.02em;
}

.auth-subtitle {
  text-align: center;
  color: var(--text-secondary, #5C5856);
  font-size: 15px;
  margin: 6px 0 28px;
}

.auth-error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #B91C1C;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-md, 8px);
  margin-bottom: 16px;
  display: none;
}

.auth-error--visible {
  display: block;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.auth-form .auth-submit {
  margin-top: 4px;
}

.auth-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #5C5856);
  margin-bottom: 6px;
}

.auth-field input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-primary, #F8F7F4);
  border: 1px solid var(--border, #E3E0D8);
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary, #2D2B29);
  font-size: 15px;
  font-family: var(--font-body, 'Inter', sans-serif);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.auth-field input:focus {
  border-color: var(--brand, #6B5B9A);
  box-shadow: 0 0 0 3px var(--brand-lighter, #F5F3F9);
}

.auth-field input::placeholder {
  color: var(--text-muted, #757069);
}

.auth-field--error input {
  border-color: #DC2626;
}

.auth-field-error {
  display: block;
  font-size: 12px;
  color: #DC2626;
  margin-top: 4px;
  min-height: 16px;
}

.auth-password-wrap {
  position: relative;
}

.auth-password-wrap input {
  padding-right: 44px;
}

.auth-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted, #757069);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}

.auth-eye:hover,
.auth-eye--active {
  color: var(--brand, #6B5B9A);
}

.auth-submit {
  width: 100%;
  padding: 12px;
  background: var(--brand, #6B5B9A);
  color: var(--text-inverse, #FFFFFF);
  border: none;
  border-radius: var(--radius-md, 8px);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-body, 'Inter', sans-serif);
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.auth-submit:hover {
  background: var(--brand-hover, #5A4C85);
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.auth-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: var(--text-muted, #757069);
  font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border, #E3E0D8);
}

.auth-divider span {
  padding: 0 12px;
}

.auth-switch {
  text-align: center;
  color: var(--text-secondary, #5C5856);
  font-size: 14px;
  margin: 0;
}

.auth-switch a {
  color: var(--brand, #6B5B9A);
  text-decoration: none;
  font-weight: 500;
}

.auth-switch a:hover {
  text-decoration: underline;
}

.auth-footer {
  text-align: center;
  color: var(--text-muted, #757069);
  font-size: 13px;
  margin-top: 24px;
}

.auth-forgot {
  display: block;
  text-align: right;
  font-size: 13px;
  color: var(--brand, #6B5B9A);
  text-decoration: none;
  margin: -4px 0 4px;
}

.auth-forgot:hover { text-decoration: underline; }

/* ── Verification Screen ──────────────────────────────────── */

.auth-verify-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.auth-verify-msg {
  text-align: center;
  color: var(--text-secondary, #5C5856);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.auth-verify-msg strong {
  color: var(--text-primary, #2D2B29);
}

.auth-verify-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-verify-secondary {
  width: 100%;
  padding: 10px;
  background: transparent;
  color: var(--brand, #6B5B9A);
  border: 1px solid var(--border, #E3E0D8);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  font-family: var(--font-body, 'Inter', sans-serif);
}

.auth-verify-secondary:hover {
  background: var(--bg-hover, #F1EFE9);
}

.auth-verify-secondary:disabled {
  opacity: 0.6;
  cursor: default;
}

.auth-verify-status {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted, #757069);
  margin-top: 12px;
  min-height: 20px;
}

.auth-verify-status.success {
  color: var(--status-complete, #287348);
}

@media (max-width: 480px) {
  .auth-card { padding: 28px 20px; }
  .auth-logo { font-size: 22px; }
  .auth-icon { width: 36px; height: 36px; }
}