/* ═══════════════════════════════════════════
       FCLE Study Buddy — Editorial Design System
       ═══════════════════════════════════════════ */

    :root {
      /* Palette */
      --navy:       #1B3A5C;
      --cream:      #FAFAF7;
      --forest:     #1B4332;
      --burgundy:   #6B2737;
      --brown:      #7F4F24;
      --text:       #1a1a1a;
      --text-muted: #5a5a5a;
      --border:     #e0ddd8;
      --bg:         #FAFAF7;
      --card:       #ffffff;
      --correct:    #1B4332;
      --wrong:      #6B2737;
      --warning:    #7F4F24;

      /* Domain colors */
      --dom-american-democracy:  #1B4332;
      --dom-us-constitution:     #7F4F24;
      --dom-founding-documents:  #1B3A5C;
      --dom-landmark-impact:     #6B2737;

      /* Typography */
      --font-heading: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
      --font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

      /* Spacing */
      --max-width:  640px;
      --pad:        20px;
      --radius:     4px;
    }

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

    html { font-size: 16px; -webkit-text-size-adjust: 100%; }

    body {
      font-family: var(--font-body);
      color: var(--text);
      background: var(--bg);
      line-height: 1.55;
      min-height: 100vh;
    }

    a { color: var(--navy); text-decoration: none; }
    a:hover { text-decoration: underline; }

    h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; line-height: 1.25; }
    h1 { font-size: 1.65rem; }
    h2 { font-size: 1.25rem; margin-bottom: 12px; }
    h3 { font-size: 1.05rem; }

    .text-muted { color: var(--text-muted); font-size: 0.875rem; }
    .text-correct { color: var(--correct); }
    .text-wrong { color: var(--wrong); }
    .text-warning { color: var(--warning); }

    /* ── Top Bar ── */
    .topbar {
      background: var(--navy);
      color: #fff;
      padding: 0 var(--pad);
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
      border-bottom: 3px solid var(--burgundy);
    }
    .topbar-brand {
      font-family: var(--font-heading);
      font-size: 1.05rem;
      font-weight: 700;
      color: #fff;
      text-decoration: none;
      letter-spacing: -0.01em;
    }
    .topbar-nav { display: flex; align-items: center; gap: 16px; }
    .topbar-link {
      color: rgba(255,255,255,0.8);
      font-size: 0.85rem;
      font-weight: 500;
      text-decoration: none;
      transition: color 0.15s;
    }
    .topbar-link:hover { color: #fff; text-decoration: none; }
    .topbar-user {
      color: rgba(255,255,255,0.9);
      font-size: 0.82rem;
      font-weight: 500;
    }

    /* ── Flash Messages ── */
    .flash-messages { padding: 12px var(--pad) 0; }
    .flash {
      padding: 10px 14px;
      border-left: 3px solid;
      margin-bottom: 8px;
      font-size: 0.875rem;
      border-radius: 0 var(--radius) var(--radius) 0;
    }
    .flash-success { background: #eef6ee; border-color: var(--correct); color: var(--correct); }
    .flash-error   { background: #f9eeef; border-color: var(--wrong); color: var(--wrong); }
    .flash-warning { background: #fdf4e7; border-color: var(--brown); color: var(--brown); }
    .flash-info    { background: #eef2f8; border-color: var(--navy); color: var(--navy); }

    /* ── App Container ── */
    .app-body {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: var(--pad);
      padding-bottom: 80px;
    }

    /* ── Bottom Nav ── */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: center;
      gap: 0;
      padding: 6px 0 env(safe-area-inset-bottom, 8px);
      z-index: 100;
    }
    .nav-item {
      flex: 1;
      max-width: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      padding: 8px 4px;
      font-size: 0.7rem;
      font-weight: 500;
      color: var(--text-muted);
      text-decoration: none;
      transition: color 0.15s;
    }
    .nav-item:hover { color: var(--navy); text-decoration: none; }
    .nav-item.active { color: var(--navy); font-weight: 700; }
    .nav-icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    /* ── Section Titles ── */
    .section-title {
      font-family: var(--font-heading);
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--border);
    }

    /* ── Cards ── */
    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      margin-bottom: 12px;
    }

    /* ── Buttons ── */
    .btn {
      display: inline-block;
      padding: 10px 20px;
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 600;
      border: none;
      border-radius: var(--radius);
      cursor: pointer;
      text-decoration: none;
      text-align: center;
      transition: opacity 0.15s;
    }
    .btn:hover { opacity: 0.85; text-decoration: none; }
    .btn-primary { background: var(--navy); color: #fff; }
    .btn-secondary { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
    .btn-danger { background: var(--wrong); color: #fff; }
    .btn-full { display: block; width: 100%; }

    /* ── Forms ── */
    .form-group { margin-bottom: 16px; }
    .form-group label {
      display: block;
      font-size: 0.85rem;
      font-weight: 600;
      margin-bottom: 6px;
      color: var(--text);
    }
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="password"],
    .form-group input[type="date"],
    .form-group input[type="number"] {
      width: 100%;
      padding: 10px 12px;
      font-family: var(--font-body);
      font-size: 0.95rem;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
      color: var(--text);
      transition: border-color 0.15s;
    }
    .form-group input:focus {
      outline: none;
      border-color: var(--navy);
      box-shadow: 0 0 0 2px rgba(27,58,92,0.12);
    }

    /* ── Auth Card ── */
    .auth-card {
      max-width: 380px;
      margin: 40px auto 0;
    }
    .auth-card h1 { margin-bottom: 6px; }
    .auth-card .subtitle { color: var(--text-muted); margin-bottom: 24px; font-size: 0.9rem; }
    .auth-link { margin-top: 16px; font-size: 0.85rem; color: var(--text-muted); text-align: center; }
    .auth-link a { color: var(--navy); font-weight: 600; }

    /* ── Progress Ring ── */
    .readiness-ring {
      position: relative;
      width: 140px;
      height: 140px;
      margin: 0 auto 12px;
    }
    .readiness-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
    .progress-ring-bg { fill: none; stroke: var(--border); stroke-width: 6; }
    .progress-ring-circle {
      fill: none;
      stroke: var(--navy);
      stroke-width: 6;
      stroke-linecap: round;
      transition: stroke-dashoffset 0.6s ease;
    }
    .readiness-pct {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-heading);
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--text);
    }

    /* ── Domain Cards (Dashboard) ── */
    .domain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
    .domain-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px;
      text-decoration: none;
      color: var(--text);
      transition: border-color 0.15s;
      display: block;
    }
    .domain-card:hover { border-color: var(--navy); text-decoration: none; color: var(--text); }
    .domain-card-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 0.8rem;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .domain-card-name { font-weight: 600; font-size: 0.88rem; margin-bottom: 4px; }
    .domain-card-pct { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; }
    .domain-card-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }

    /* ── Question Top Bar ── */
    .question-topbar {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 16px;
    }
    .question-back {
      background: none;
      border: none;
      font-size: 0.85rem;
      color: var(--text-muted);
      cursor: pointer;
      padding: 4px 0;
      font-family: var(--font-body);
    }
    .question-back:hover { color: var(--text); }
    .question-domain-tag {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--navy);
    }
    .question-counter {
      margin-left: auto;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-muted);
    }

    /* ── Progress Bar ── */
    .progress-bar-track {
      width: 100%;
      height: 4px;
      background: var(--border);
      border-radius: 2px;
      margin-bottom: 20px;
      overflow: hidden;
    }
    .progress-bar-fill {
      height: 100%;
      background: var(--navy);
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    /* ── Stimulus Passage ── */
    .stimulus-block {
      background: #f5f3ee;
      border-left: 3px solid var(--navy);
      padding: 14px 16px;
      margin-bottom: 16px;
      font-size: 0.9rem;
      line-height: 1.65;
      color: var(--text-muted);
      border-radius: 0 var(--radius) var(--radius) 0;
    }
    .stimulus-label {
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--navy);
      margin-bottom: 8px;
    }

    /* ── Question Text ── */
    .question-text {
      font-family: var(--font-heading);
      font-size: 1.08rem;
      line-height: 1.5;
      margin-bottom: 20px;
    }

    /* ── Choices ── */
    .choices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
    .choice {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
      font-size: 0.92rem;
      line-height: 1.45;
    }
    .choice:hover { border-color: var(--navy); }
    .choice.selected { border-color: var(--navy); background: #f0f4f8; }
    .choice.correct { border-color: var(--correct); background: #eef6ee; }
    .choice.wrong { border-color: var(--wrong); background: #f9eeef; }
    .choice.feedback-locked { cursor: default; }
    .choice-letter {
      flex-shrink: 0;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 0.8rem;
      color: var(--text-muted);
    }
    .choice.selected .choice-letter { border-color: var(--navy); background: var(--navy); color: #fff; }
    .choice.correct .choice-letter { border-color: var(--correct); background: var(--correct); color: #fff; }
    .choice.wrong .choice-letter { border-color: var(--wrong); background: var(--wrong); color: #fff; }
    .choice-text { flex: 1; }

    /* ── Confidence ── */
    .confidence-section { margin-bottom: 20px; }
    .confidence-label { font-size: 0.82rem; font-weight: 600; margin-bottom: 10px; color: var(--text-muted); }
    .confidence-track {
      display: flex;
      gap: 0;
      position: relative;
    }
    .confidence-node {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      padding: 10px 0;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      transition: background 0.15s, border-color 0.15s;
    }
    .confidence-node:first-child { border-radius: var(--radius) 0 0 var(--radius); }
    .confidence-node:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
    .confidence-node.active { background: #eef2f8; border-color: var(--navy); }
    .confidence-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid var(--border);
      transition: background 0.15s, border-color 0.15s;
    }
    .confidence-node.active .confidence-dot { background: var(--navy); border-color: var(--navy); }
    .confidence-node-text { font-size: 0.72rem; font-weight: 500; color: var(--text-muted); }
    .confidence-node.active .confidence-node-text { color: var(--navy); font-weight: 600; }
    .confidence-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; }

    /* ── Submit Button ── */
    .submit-btn {
      display: block;
      width: 100%;
      padding: 12px;
      font-family: var(--font-body);
      font-size: 0.95rem;
      font-weight: 600;
      background: var(--navy);
      color: #fff;
      border: none;
      border-radius: var(--radius);
      cursor: pointer;
      transition: opacity 0.15s;
      text-decoration: none;
      text-align: center;
    }
    .submit-btn:hover { opacity: 0.85; }
    .submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }

    /* ── Feedback Banner ── */
    .feedback-banner {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: var(--radius);
      margin-bottom: 12px;
      font-size: 0.9rem;
      font-weight: 500;
    }
    .feedback-correct { background: #eef6ee; color: var(--correct); border: 1px solid #d0e4d0; }
    .feedback-wrong { background: #f9eeef; color: var(--wrong); border: 1px solid #e4c8cc; }
    .feedback-icon { font-size: 1.1rem; font-weight: 700; }

    /* ── Feedback Explanation ── */
    .feedback-explanation {
      background: #f5f3ee;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px;
      margin-bottom: 16px;
      font-size: 0.88rem;
      line-height: 1.55;
    }
    .feedback-explanation .explanation-label {
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--navy);
      margin-bottom: 6px;
    }
    .hidden { display: none !important; }

    /* ── Per-Choice Breakdown ── */
    .feedback-breakdown {
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .breakdown-item {
      border-radius: var(--radius);
      padding: 12px 14px;
      border-left: 3px solid var(--border);
    }
    .breakdown-correct {
      background: #f0f7f2;
      border-left-color: var(--correct);
    }
    .breakdown-wrong {
      background: #faf5f0;
      border-left-color: #c4a882;
    }
    .breakdown-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }
    .breakdown-letter {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      font-size: 0.75rem;
      font-weight: 700;
      flex-shrink: 0;
      background: var(--border);
      color: var(--text);
    }
    .breakdown-correct .breakdown-letter {
      background: var(--correct);
      color: #fff;
    }
    .breakdown-wrong .breakdown-letter {
      background: #c4a882;
      color: #fff;
    }
    .breakdown-answer {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text);
      flex: 1;
    }
    .breakdown-wrong .breakdown-answer {
      text-decoration: line-through;
      color: var(--text-muted);
    }
    .breakdown-badge {
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 2px 8px;
      border-radius: 3px;
      flex-shrink: 0;
    }
    .badge-correct {
      background: var(--correct);
      color: #fff;
    }
    .badge-wrong {
      background: #c4a882;
      color: #fff;
    }
    .breakdown-reason {
      font-size: 0.85rem;
      line-height: 1.55;
      color: var(--text-muted);
      padding-left: 32px;
    }

    .reveal-link {
      background: none;
      border: none;
      color: var(--navy);
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      padding: 0;
      font-family: var(--font-body);
    }
    .reveal-link:hover { text-decoration: underline; }

    /* ── Results ── */
    .results-summary {
      text-align: center;
      padding: 28px 0;
      border-bottom: 2px solid var(--border);
      margin-bottom: 24px;
    }
    .results-score {
      font-family: var(--font-heading);
      font-size: 3.5rem;
      font-weight: 700;
      color: var(--navy);
      line-height: 1;
      margin-bottom: 4px;
    }
    .results-score-label { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 20px; }
    .results-detail-row {
      display: flex;
      justify-content: center;
      gap: 32px;
    }
    .results-detail-value { font-size: 1.25rem; font-weight: 700; }
    .results-detail-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

    /* ── Mistake Cards ── */
    .mistake-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px;
      margin-bottom: 10px;
    }
    .mistake-question { font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; }
    .mistake-answers { font-size: 0.85rem; line-height: 1.6; }
    .mistake-explanation { font-size: 0.83rem; color: var(--text-muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

    /* ── Stats ── */
    .subject-breakdown { margin-bottom: 16px; }
    .subject-breakdown-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
    .subject-breakdown-name { font-weight: 600; font-size: 0.88rem; }
    .subject-breakdown-pct { font-weight: 700; font-size: 0.9rem; }
    .subject-breakdown-track {
      width: 100%;
      height: 6px;
      background: var(--border);
      border-radius: 3px;
      overflow: hidden;
    }
    .subject-breakdown-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 0.4s ease;
    }
    .subject-breakdown-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }

    /* ── Domain Dots ── */
    .domain-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
      flex-shrink: 0;
    }

    /* ── Streak ── */
    .streak { text-align: center; padding: 16px 0; }
    .streak-number { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--navy); }
    .streak-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
    .streak-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

    /* ── Weekly Chart ── */
    .weekly-chart {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      height: 100px;
      gap: 8px;
      padding: 0 4px;
    }
    .weekly-bar-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      height: 100%;
      justify-content: flex-end;
    }
    .weekly-bar-count { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); }
    .weekly-bar {
      width: 100%;
      max-width: 32px;
      background: var(--navy);
      border-radius: 2px 2px 0 0;
      min-height: 2px;
      transition: height 0.3s ease;
    }
    .weekly-bar-label { font-size: 0.68rem; color: var(--text-muted); font-weight: 500; }

    /* ── Score List ── */
    .score-list { list-style: none; }
    .score-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }
    .score-item:last-child { border-bottom: none; }
    .score-item-name { font-weight: 600; font-size: 0.88rem; }
    .score-item-date { font-size: 0.75rem; color: var(--text-muted); }
    .score-item-pct { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; }
    .score-item-questions { font-size: 0.72rem; color: var(--text-muted); text-align: right; }

    /* ── Settings ── */
    .settings-page { max-width: 480px; margin: 0 auto; }
    .settings-section {
      padding: 16px 0;
      border-bottom: 1px solid var(--border);
    }
    .settings-section-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 10px; }
    .settings-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      font-size: 0.9rem;
    }
    .settings-label { font-weight: 500; }
    .settings-value { color: var(--text-muted); font-size: 0.88rem; }
    .version-info { text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 24px 0; }

    /* ── Recommendation Items ── */
    .rec-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      font-size: 0.85rem;
    }
    .rec-item:last-child { border-bottom: none; }
    .rec-tag {
      font-size: 0.68rem;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 10px;
      color: #fff;
    }

    /* ── Recent Sessions ── */
    .session-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      font-size: 0.85rem;
    }
    .session-item:last-child { border-bottom: none; }

    /* ── Countdown Card ── */
    .countdown-card {
      background: var(--navy);
      color: #fff;
      border-radius: var(--radius);
      padding: 16px;
      text-align: center;
      margin-bottom: 16px;
    }
    .countdown-days { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; }
    .countdown-label { font-size: 0.8rem; opacity: 0.8; }

    /* ── Utility ── */
    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

    /* ── Responsive ── */
    @media (max-width: 420px) {
      .domain-grid { grid-template-columns: 1fr; }
      .results-detail-row { gap: 20px; }
      .results-score { font-size: 2.75rem; }
      h1 { font-size: 1.4rem; }
    }