/* Shared interface foundations. The brand layer below also covers PDF output. */
@media screen {
  body.refined-ui {
    --canvas: #f2f4f5; --surface: #ffffff; --surface-muted: #f7f8fa;
    --ink: #26322f; --text: #424d58; --muted: #606c79; --line: #dbe1e7;
    --teal: #15594f; --teal-dark: #10483f; --primary-soft: #edf5f2;
    --analysis: #285da2; --analysis-soft: #edf3fa;
    --display-font: "Songti SC", "STSong", "SimSun", Georgia, serif;
    --data-font: Georgia, "Songti SC", serif;
    --warning: #805b13; --warning-soft: #fff6e5;
    --danger: #a52c3b; --danger-soft: #fff2f3;
    --green: var(--teal); --green-light: var(--primary-soft); --amber: var(--warning);
    --paper: var(--surface); --background: var(--canvas);
    --radius: 8px; --shadow-soft: none;
    background: var(--canvas); color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 15px; line-height: 1.75;
  }
  .refined-ui *, .refined-ui *::before, .refined-ui *::after { box-sizing: border-box; letter-spacing: 0; }
  .refined-ui :focus-visible { outline: 3px solid var(--analysis); outline-offset: 3px; }
  .refined-ui .topbar { height: 72px; min-height: 72px; padding: 0 28px; gap: 24px; background: #fff; box-shadow: none; }
  .refined-ui .brand { min-width: 0; gap: 14px; flex-shrink: 0; }
  .refined-ui .brand strong { font-family: var(--display-font); font-size: 22px; font-weight: 700; }
  .refined-ui .brand-sun-mark { width: 22px; height: 22px; }
  .refined-ui .brand-sun-mark::before { inset: -6px; }
  .refined-ui .nav { gap: 26px; min-width: 0; flex-wrap: nowrap; }
  .refined-ui .nav button { min-height: 72px; font-size: 15px; font-weight: 550; white-space: nowrap; }
  .refined-ui .nav button.active::after { height: 3px; border-radius: 0; }
  .refined-ui .more-menu { height: 72px; }
  .refined-ui .top-actions { min-width: 0; gap: 10px; flex-shrink: 0; }
  .refined-ui .route-return { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; max-width: 1400px; width: 100%; margin: 16px auto 0; padding: 0 28px; }
  .refined-ui .route-return .btn { color: var(--teal); padding-inline: 0; min-height: 44px; }
  .refined-ui .route-return > span { color: var(--muted); font-size: 13px; }
  .refined-ui .layout { max-width: 1400px; margin: 32px auto; padding: 0 28px; gap: 24px; }
  .refined-ui .layout:has(.report) { grid-template-columns: 180px minmax(0, 1fr); align-items: start; }
  .refined-ui .layout:has(.report) > .workspace { grid-column: 2; grid-row: 1 / span 2; }
  .refined-ui .layout:has(.report) > .left-panel { grid-column: 1; grid-row: 1; }
  .refined-ui .layout:has(.report) > .right-panel { grid-column: 1; grid-row: 2; }
  .refined-ui .workspace { min-width: 0; }
  .refined-ui .workspace:has(> .report) { background: #fff; border: 1px solid #e1e7e3; border-radius: 8px; padding: 32px; box-shadow: none; }
  .refined-ui .screen-header { gap: 20px; align-items: flex-start; padding: 0; margin-bottom: 20px; flex-wrap: wrap; }
  .refined-ui .screen-header h1, .refined-ui .screen-header h2 { font-size: 28px; line-height: 1.5; font-weight: 650; }
  .refined-ui .screen-header p { color: var(--muted); font-size: 14px; line-height: 1.8; margin-top: 8px; max-width: 72ch; }
  .refined-ui .btn { min-height: 42px; border-radius: 6px; padding: 10px 16px; font-size: 14px; font-weight: 550; box-shadow: none; }
  .refined-ui .btn.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
  .refined-ui .btn.secondary { background: #fff; color: #36584e; border: 1px solid #bdcec5; }
  .refined-ui .btn:active:not(:disabled) { transform: translateY(1px); }
  .refined-ui .report { gap: 28px; margin-top: 24px; }
  .refined-ui .strategy-card { border: 0; border-left: 3px solid #187d70; border-radius: 0; background: #edf5f1; padding: 22px 24px; box-shadow: none; }
  .refined-ui .strategy-card h2 { font-size: 23px; line-height: 1.55; font-weight: 650; }
  .refined-ui .strategy-card span { font-weight: 550; color: #356357; }
  .refined-ui .strategy-card p { font-size: 14px; }
  .refined-ui .strategy-card > strong { background: transparent; color: #126357; font-size: 36px; width: 64px; height: 64px; font-variant-numeric: tabular-nums; }
  .refined-ui .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .refined-ui .report-card, .refined-ui .detail-card { padding: 16px 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; min-width: 0; }
  .refined-ui .report > .report-grid { padding-bottom: 24px; border-bottom: 1px solid #dce5df; }
  .refined-ui .report-card h3, .refined-ui .detail-card h3 { font-size: 17px; font-weight: 650; margin-bottom: 12px; }
  .refined-ui .report-card p, .refined-ui .detail-card p, .refined-ui .result-list li { font-size: 14px; line-height: 1.95; color: #3c4946; }
  .refined-ui .big-result strong { font-family: var(--data-font); font-size: 44px; font-weight: 400; color: var(--teal); line-height: 1.3; }
  .refined-ui .tag-cloud { gap: 6px; }
  .refined-ui .tag-cloud span { background: #f0f4f1; border: 0; border-radius: 4px; color: #3e5d50; font-size: 12px; font-weight: 500; }
  .refined-ui .report-section-stack { gap: 0; }
  .refined-ui .report-disclosure { border: 0; border-bottom: 1px solid #dce5df; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; scroll-margin-top: 92px; }
  .refined-ui .report-disclosure > summary { min-height: 88px; padding: 22px 0; gap: 20px; }
  .refined-ui .report-disclosure > summary strong { font-size: 19px; font-weight: 650; }
  .refined-ui .report-disclosure > summary small { font-size: 13px; color: #5f6e68; line-height: 1.7; }
  .refined-ui .report-disclosure > summary b { border-radius: 4px; padding: 3px 8px; background: #edf4ef; color: #356357; }
  .refined-ui .report-disclosure-body { padding: 0 0 28px; gap: 24px; }
  .refined-ui .result-list { padding-left: 20px; }
  .refined-ui .result-list li { margin-bottom: 10px; }
  .refined-ui .report p, .refined-ui .report li, .refined-ui .report h2, .refined-ui .report h3 { overflow-wrap: anywhere; }
  .refined-ui .score-card, .refined-ui .consult-card, .refined-ui .progress-card { padding: 18px; border-radius: 6px; box-shadow: none; }
  .refined-ui .left-panel h2, .refined-ui .right-panel h2, .refined-ui .left-panel h3, .refined-ui .right-panel h3 { font-size: 15px; line-height: 1.55; }
  .refined-ui .form-section { border: 0; border-top: 1px solid #dce5df; border-radius: 0; box-shadow: none; padding: 28px 0; background: transparent; }
  .refined-ui .form-section h3 { font-size: 20px; font-weight: 650; }
  .refined-ui .background-form { background: #fff; padding: 24px 28px; border-radius: 8px; border: 1px solid #e1e7e3; gap: 0; }
  .refined-ui .form-grid { gap: 22px 24px; }
  .refined-ui .form-grid label > span { font-size: 14px; color: #364c43; }
  .refined-ui .background-form input:not([type=checkbox]):not([type=radio]), .refined-ui .background-form select, .refined-ui .background-form textarea { background: #fbfcfb; border: 1px solid #c4d1ca; border-radius: 6px; min-height: 44px; color: #22302e; font-size: 14px; padding: 10px 12px; }
  .refined-ui input::placeholder, .refined-ui textarea::placeholder { color: #69766e; }
  .refined-ui .background-form .field-missing input, .refined-ui .background-form .field-missing select, .refined-ui .background-form .field-missing textarea { border-color: #b43c3c !important; background: #fff5f5 !important; }
  .refined-ui .background-form .field-missing > span { color: #a52c2c; }
  .refined-ui .layout.test-layout { max-width: 1220px; }
  .refined-ui .question-stage { padding: 28px; border-radius: 8px; box-shadow: none; background: #fff; }
  .refined-ui .question-copy h2 { font-size: 25px; line-height: 1.75; margin: 12px 0 22px; }
  .refined-ui .question-copy p { font-size: 14px; color: #5f6e68; }
  .refined-ui .scale-button { min-height: 68px; border-radius: 6px; box-shadow: none; }
  .refined-ui .scale-button.selected { outline: 2px solid #187d70; outline-offset: -2px; }
  .refined-ui .question-track-us .scale-button.selected { outline-color: var(--teal); }
  .refined-ui .question-track-panel { border-radius: 6px; box-shadow: none; }
  .refined-ui .route-welcome h1 { font-family: var(--display-font); font-size: 36px; font-weight: 700; }
  .refined-ui .local-preview-status { background: transparent; color: #65746c; font-size: 12px; text-align: center; padding: 8px 16px; }
  .refined-ui .report-reading-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 0; margin: 8px 0 0; border-block: 1px solid #e0e7e2; }
  .refined-ui .report-reading-tools label { font-size: 13px; color: #51655a; }
  .refined-ui .report-reading-tools select { min-width: 0; max-width: 100%; width: 240px; height: 38px; border: 1px solid #bdcec5; border-radius: 6px; background: #fff; padding: 6px 10px; color: #36584e; font: inherit; font-size: 13px; }
  .refined-ui .reading-icon-button { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid #bdcec5; border-radius: 6px; background: #fff; color: #36584e; cursor: pointer; }
  .refined-ui .reading-icon-button:hover { background: #edf5f1; }
  .refined-ui .reading-icon-button svg { width: 18px; height: 18px; }
  .refined-ui .report-reading-tools .reading-icon-button { display: inline-grid !important; }
  .refined-ui .report-reading-tools select { display: block !important; }
  .refined-ui .sample-notice { border: 0; border-left: 3px solid #a27b2f; border-radius: 0; background: #f3f2ed; color: #515943; font-size: 13px; }
  .refined-ui .sample-wrap { max-width: 1120px; padding: 32px; }
  /* Shared action and status colors across both application routes. */
  .refined-ui .nav button.active { color: var(--teal-dark); }
  .refined-ui .nav button.active::after { background: var(--teal); }
  .refined-ui .btn.primary:hover:not(:disabled) { background: var(--teal-dark); border-color: var(--teal-dark); }
  .refined-ui .btn.secondary, .refined-ui .btn.ghost { color: var(--text); }
  .refined-ui .btn.secondary:hover:not(:disabled), .refined-ui .btn.ghost:hover:not(:disabled) { background: var(--surface-muted); }
  .refined-ui .btn:disabled, .refined-ui .question-track-us .question-actions .btn:disabled {
    background: #e7ebef; color: #65717d; border-color: #e7ebef; opacity: 1; box-shadow: none; cursor: not-allowed; transform: none;
  }
  .refined-ui .progress-bar { background: #e4e9ed; }
  .refined-ui .progress-bar > span { background: var(--teal); }
  .refined-ui .module-warning { background: var(--warning-soft); color: var(--warning); border-color: #e8d5aa; box-shadow: none; border-radius: 6px; }
  .refined-ui .module-warning.error { background: var(--danger-soft); color: var(--danger); border-color: #d8a2aa; }

  /* Keep the original route illustrations; give text its own clear column. */
  .refined-ui .standalone-layout { background: var(--canvas); min-height: calc(100dvh - 72px); }
  .refined-ui .standalone-layout .workspace.route-home { width: min(1160px, 100%); min-width: 0; margin-inline: auto; padding: 24px 0 32px; }
  .refined-ui .route-welcome { margin-bottom: 32px; }
  .refined-ui .route-welcome h1 { color: var(--ink); line-height: 1.5; }
  .refined-ui .route-welcome p { font-size: 16px; color: var(--muted); margin-top: 12px; }
  .refined-ui .route-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; }
  .refined-ui .route-choice {
    --route-accent: var(--teal);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 38%);
    grid-template-rows: auto auto minmax(84px, 1fr) 48px;
    grid-template-areas: "title art" "scope art" "description art" "action art";
    gap: 12px 20px; min-width: 0; min-height: 360px; padding: 32px;
    appearance: none; text-align: left; font: inherit; color: var(--ink); background: var(--surface);
    border: 1px solid var(--line); border-top: 3px solid var(--route-accent); border-radius: 8px;
    cursor: pointer; box-shadow: none; transition: border-color 160ms ease, box-shadow 160ms ease;
  }
  .refined-ui .route-choice--us_undergrad { --route-accent: #805b13; }
  .refined-ui .route-choice > span { min-width: 0; margin: 0; overflow-wrap: anywhere; }
  .refined-ui .route-choice-title { grid-area: title; font-family: var(--display-font); font-size: 30px; line-height: 1.5; font-weight: 700; }
  .refined-ui .route-choice-scope { grid-area: scope; color: var(--route-accent); font-size: 13px; line-height: 1.8; }
  .refined-ui .route-choice-description { grid-area: description; align-self: start; font-size: 15px; line-height: 1.9; color: var(--muted); max-width: 28em; }
  .refined-ui .route-choice-action {
    grid-area: action; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    justify-self: start; width: 168px; max-width: 100%; height: 48px; border-radius: 6px;
    font-size: 15px; font-weight: 600; color: #fff; background: var(--teal);
  }
  .refined-ui .route-choice-image { grid-area: art; align-self: end; display: block; width: 100%; height: 260px; min-width: 0; object-fit: contain; object-position: center bottom; pointer-events: none; }
  .refined-ui .route-choice:hover { border-color: var(--route-accent); box-shadow: 0 8px 24px #26322f0c; }
  .refined-ui .route-choice:hover .route-choice-action { background: var(--teal-dark); }
  .refined-ui .route-choice:focus-visible { outline: 3px solid var(--analysis); outline-offset: 4px; }
  .refined-ui .route-bottom-strip { margin-top: 32px; gap: 24px; }

  /* A quiet question sheet, without another framed card inside it. */
  .refined-ui .layout.test-layout { grid-template-columns: 176px minmax(0, 1fr); }
  .refined-ui .test-layout .question-workspace, .refined-ui .question-workspace.question-track-us {
    min-height: 0; padding: 0; background: transparent; border: 0; box-shadow: none;
  }
  .refined-ui .question-workspace .question-stage {
    max-width: none; min-height: 0; padding: 32px; border: 0; border-top: 3px solid var(--teal); border-radius: 0; background: var(--surface); box-shadow: none;
  }
  .refined-ui .question-module-pill, .refined-ui .question-track-us .question-module-pill {
    padding: 4px 8px; margin-bottom: 12px; border-radius: 4px; background: var(--primary-soft); color: var(--teal-dark); font-weight: 600;
  }
  .refined-ui .question-track-us .question-module-pill { background: var(--warning-soft); color: var(--warning); }
  .refined-ui .question-count, .refined-ui .question-track-us .question-count {
    border: 0; border-radius: 0; padding: 0; background: transparent; color: var(--muted); white-space: nowrap; font-size: 13px;
  }
  .refined-ui .question-count strong, .refined-ui .question-track-us .question-count strong,
  .refined-ui .question-progress-row strong, .refined-ui .question-track-us .question-progress-row strong { color: var(--teal-dark); font-variant-numeric: tabular-nums; }
  .refined-ui .question-progress { height: 5px; }
  .refined-ui .question-progress span, .refined-ui .question-track-us .question-progress span { background: var(--teal); }
  .refined-ui .question-body-grid { grid-template-columns: minmax(0, 1fr) 180px; gap: 28px; margin-top: 28px; }
  .refined-ui .question-copy h2 { font-family: var(--display-font); font-size: 28px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
  .refined-ui .question-copy > span { color: var(--analysis); font-weight: 600; }
  .refined-ui .scale-grid { margin-top: 24px; gap: 8px; }
  .refined-ui .scale-button { grid-template-columns: 32px minmax(0, 1fr) auto; min-height: 60px; padding: 12px 16px; gap: 12px; background: var(--surface); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .refined-ui .scale-button b, .refined-ui .question-track-us .scale-button b { width: 30px; height: 30px; background: var(--surface-muted); color: var(--muted); font-size: 15px; font-weight: 500; }
  .refined-ui .scale-button span { font-size: 15px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
  .refined-ui .scale-button small { font-size: 12px; color: var(--muted); }
  .refined-ui .scale-button:hover, .refined-ui .question-track-us .scale-button:hover { background: var(--surface-muted); border-color: #84968f; transform: none; box-shadow: none; }
  .refined-ui .scale-button.selected, .refined-ui .question-track-us .scale-button.selected { background: var(--primary-soft); border-color: var(--teal); box-shadow: inset 3px 0 0 var(--teal); outline: none; }
  .refined-ui .scale-button.selected b, .refined-ui .question-track-us .scale-button.selected b { background: var(--teal); color: #fff; }
  .refined-ui .scale-button.selected span { font-weight: 650; color: var(--teal-dark); }
  .refined-ui .scale-button:focus-visible, .refined-ui .question-track-us .scale-button:focus-visible { outline: 3px solid var(--analysis); outline-offset: 3px; }
  .refined-ui .question-track-panel, .refined-ui .question-track-us .question-track-panel {
    border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 0 0 0 22px; background: transparent; gap: 12px;
  }
  .refined-ui .question-track-panel h3 { font-size: 15px; line-height: 1.7; }
  .refined-ui .question-track-panel p { font-size: 13px; color: var(--muted); }
  .refined-ui .question-track-panel .eyebrow { color: var(--analysis); font-size: 11px; }
  .refined-ui .question-track-chips span, .refined-ui .question-track-us .question-track-chips span { padding: 0; min-height: 28px; background: transparent; color: var(--analysis); font-weight: 500; }
  .refined-ui .question-tip, .refined-ui .question-track-us .question-tip { border-color: var(--line); font-size: 13px; color: var(--muted); }
  .refined-ui .question-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 24px; }
  .refined-ui .question-actions .btn { min-height: 44px; border-radius: 6px; }
  .refined-ui .question-actions .btn.primary { margin-left: auto; font-size: 14px; }
  .refined-ui .question-track-us .question-actions .btn.primary:not(:disabled) { background: var(--teal); border-color: var(--teal); box-shadow: none; }
  .refined-ui .question-track-us .question-actions .btn.primary:hover:not(:disabled) { background: var(--teal-dark); }

  .refined-ui .background-form { border: 0; border-radius: 0; }
  .refined-ui .background-form > .screen-header { padding-bottom: 24px; border-bottom: 3px solid var(--teal); }
  .refined-ui .background-form > .screen-header h1 { font-family: var(--display-font); font-size: 30px; font-weight: 700; }
  .refined-ui .form-section { border-color: var(--line); }
  .refined-ui .form-section h3 { color: var(--ink); font-size: 18px; margin-bottom: 18px; }
  .refined-ui .background-track-summary { background: var(--analysis-soft); border: 0; border-left: 3px solid var(--analysis); border-radius: 0; box-shadow: none; }
  .refined-ui .background-track-summary strong { color: var(--analysis); }
  .refined-ui .form-help { color: var(--muted); font-size: 13px; }
  .refined-ui .background-form input:not([type=checkbox]):not([type=radio]), .refined-ui .background-form select, .refined-ui .background-form textarea { background: var(--surface-muted); border-color: #bac4cd; color: var(--ink); max-width: 100%; }
  .refined-ui .background-form .checkbox-option { border: 1px solid transparent; background: transparent; border-radius: 4px; padding: 10px 8px; min-width: 0; }
  .refined-ui .background-form .checkbox-option:hover { background: var(--surface-muted); }
  .refined-ui .background-form .checkbox-option:has(input:checked) { background: var(--primary-soft); border-color: #95b8ae; }
  .refined-ui .background-form .checkbox-option span { font-weight: 400; font-size: 14px; overflow-wrap: anywhere; color: var(--text); }
  .refined-ui .background-form input[type=checkbox], .refined-ui .background-form input[type=radio] { accent-color: var(--teal); flex-shrink: 0; }
  .refined-ui .background-form .field-missing input, .refined-ui .background-form .field-missing select, .refined-ui .background-form .field-missing textarea { border-color: var(--danger) !important; background: var(--danger-soft) !important; }
  .refined-ui .background-form .field-missing > span, .refined-ui .background-form .section-missing h3 { color: var(--danger); }

  /* Analysis blue is distinct from green action and completion states. */
  .refined-ui .workspace:has(> .report) { border: 0; border-radius: 0; }
  .refined-ui .strategy-card { background: transparent; border-left-color: var(--analysis); padding-block: 10px; }
  .refined-ui .strategy-card span, .refined-ui .strategy-card > strong { color: var(--analysis); }
  .refined-ui .strategy-card h2 { color: var(--ink); }
  .refined-ui .workspace:has(> .report) > .screen-header {
    margin: -32px -32px 24px; padding: 30px 32px; background: var(--teal); color: #fff;
  }
  .refined-ui .workspace:has(> .report) > .screen-header h1 { font-family: var(--display-font); color: #fff; font-size: 32px; font-weight: 700; }
  .refined-ui .workspace:has(> .report) > .screen-header p { color: #e1eee9; }
  .refined-ui .workspace:has(> .report) > .screen-header .btn { background: transparent; border: 1px solid #91b5aa; color: #fff; }
  .refined-ui .workspace:has(> .report) > .screen-header .btn:hover:not(:disabled) { background: var(--teal-dark); }
  .refined-ui .workspace:has(> .report) > .screen-header [data-report-save-status] { color: #e1eee9; }
  .refined-ui .report-disclosure > summary strong { font-family: var(--display-font); font-size: 21px; font-weight: 700; }
  .refined-ui .report > .report-grid > .report-card { padding-top: 20px; }
  .refined-ui .report > .report-grid > .report-card h3 { font-size: 13px; font-weight: 500; color: var(--muted); }
  .refined-ui .report > .report-grid > .report-card:nth-child(2) .big-result strong { color: var(--analysis); }
  .refined-ui .report-card p, .refined-ui .detail-card p, .refined-ui .result-list li { color: var(--text); }
  .refined-ui .report-disclosure > summary small { color: var(--muted); }
  .refined-ui .report-disclosure[open] > summary strong { color: var(--analysis); }
  .refined-ui .report-disclosure > summary b { background: var(--analysis-soft); color: var(--analysis); }
  .refined-ui .report-disclosure > summary:hover { background: var(--surface-muted); }
  .refined-ui .report-reading-tools { border-color: var(--line); }
  .refined-ui .report-reading-tools label { color: var(--muted); }
  .refined-ui .report-reading-tools select, .refined-ui .reading-icon-button { border-color: #bac4cd; color: var(--analysis); }
  .refined-ui .reading-icon-button:hover { background: var(--analysis-soft); }
  .refined-ui .report-thinking-workspace { background: var(--canvas); }
  .refined-ui .report-thinking-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
  .refined-ui .report-thinking-panel h1 { color: var(--ink); font-size: 26px; line-height: 1.6; }
  .refined-ui .thinking-kicker, .refined-ui .thinking-step-list b { color: var(--analysis); }
  .refined-ui .thinking-progress { background: #e4e9ed; }
  .refined-ui .thinking-progress span { background: var(--teal); }
  .refined-ui .thinking-step-list { background: transparent; border-color: var(--line); }
  .refined-ui .thinking-step-list span { color: var(--muted); }
  .refined-ui #preview-app .section-heading h1, .refined-ui #preview-app .question-content h1 { font-size: 26px; line-height: 1.65; }
  .refined-ui #preview-app .answer-option.selected { background: var(--primary-soft); border-color: var(--teal); }
  .refined-ui #preview-app .context { color: var(--muted); }
  @media (max-width: 1180px) {
    .refined-ui .layout.test-layout { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 1000px) {
    .refined-ui .route-choices { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .refined-ui .route-choice { grid-template-columns: minmax(0, 1fr) 200px; min-height: 300px; grid-template-rows: auto auto minmax(54px, 1fr) 48px; padding: 28px; }
    .refined-ui .route-choice-image { height: 220px; }
  }
  @media (max-width: 600px) {
    .refined-ui .route-choice {
      grid-template-columns: minmax(0, 1fr) 84px;
      grid-template-areas: "title art" "scope art" "description description" "action action";
      grid-template-rows: auto auto minmax(64px, 1fr) 48px;
      min-height: 292px; padding: 22px 20px; gap: 12px;
    }
    .refined-ui .route-choice-title { font-size: 26px; }
    .refined-ui .route-choice-image { height: 88px; align-self: center; }
    .refined-ui .route-choice-action { width: 100%; }
  }
  @media (max-width: 1100px) {
    .refined-ui .topbar { height: auto; gap: 12px; padding: 12px 20px 0; flex-wrap: wrap; }
    .refined-ui .brand strong { font-size: 18px; }
    .refined-ui .nav { order: 3; flex-basis: 100%; gap: 24px; justify-content: flex-start; overflow-x: auto; }
    .refined-ui .nav button, .refined-ui .more-menu { min-height: 40px; height: 40px; }
    .refined-ui .top-actions { margin-left: auto; }
    .refined-ui .layout:has(.report) { grid-template-columns: 154px minmax(0, 1fr); gap: 18px; }
    .refined-ui .workspace:has(> .report) { padding: 24px; }
    .refined-ui .workspace:has(> .report) > .screen-header { margin: -24px -24px 24px; padding: 26px 24px; }
    .refined-ui .report-grid { grid-template-columns: 1fr; gap: 8px; }
  }
  @media (max-width: 767px) {
    .refined-ui .route-return { padding: 0 18px; margin-top: 8px; }
    .refined-ui .topbar { height: auto; min-height: 64px; padding: 12px 18px; flex-wrap: wrap; gap: 10px; }
    .refined-ui .nav { order: 3; flex-basis: 100%; overflow-x: auto; justify-content: flex-start; gap: 24px; }
    .refined-ui .nav button, .refined-ui .more-menu { min-height: 40px; height: 40px; font-size: 14px; }
    .refined-ui .top-actions { margin-left: auto; }
    .refined-ui .layout, .refined-ui .layout:has(.report) { display: flex; flex-direction: column; padding: 0 14px; margin-top: 18px; gap: 18px; }
    .refined-ui .layout > .workspace, .refined-ui .layout > aside { width: 100%; }
    .refined-ui .layout:has(.report) > .workspace { order: -1; }
    .refined-ui .workspace:has(> .report) { padding: 20px 18px; }
    .refined-ui .workspace:has(> .report) > .screen-header { margin: -20px -18px 22px; padding: 24px 18px; }
    .refined-ui .workspace:has(> .report) > .screen-header h1 { font-size: 26px; }
    .refined-ui .background-form > .screen-header h1 { font-size: 26px; }
    .refined-ui .route-welcome h1 { font-size: 28px; }
    .refined-ui .screen-header h1, .refined-ui .screen-header h2 { font-size: 24px; }
    .refined-ui .strategy-card { padding: 18px; align-items: flex-start; gap: 12px; }
    .refined-ui .strategy-card h2 { font-size: 20px; }
    .refined-ui .strategy-card > strong { font-size: 27px; width: 42px; height: 44px; }
    .refined-ui .report-disclosure > summary strong { font-size: 17px; }
    .refined-ui .report-disclosure > summary { gap: 12px; }
    .refined-ui .form-grid, .refined-ui .form-grid.compact, .refined-ui .question-body-grid { grid-template-columns: minmax(0, 1fr); }
    .refined-ui .background-form, .refined-ui .question-stage { padding: 20px 16px; }
    .refined-ui .question-copy h2 { font-size: 22px; }
    .refined-ui .question-workspace .question-stage { padding: 22px 18px; }
    .refined-ui .question-track-panel, .refined-ui .question-track-us .question-track-panel { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0 0; }
    .refined-ui .question-track-chips { display: flex; gap: 16px; flex-wrap: wrap; }
    .refined-ui .scale-button { grid-template-columns: 30px minmax(0, 1fr); }
    .refined-ui .scale-button small { grid-column: 2; }
    .refined-ui .scale-button { row-gap: 2px; }
    .refined-ui .background-form .checkbox-grid, .refined-ui .background-form .subject-grid { grid-template-columns: minmax(0, 1fr); }
    .refined-ui .standalone-layout .workspace.route-home { padding: 16px 0 28px; }
    .refined-ui .question-actions { flex-wrap: wrap; }
    .refined-ui .sample-wrap { padding: 14px; }
    .refined-ui .report-reading-tools select { flex: 1; width: 150px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .refined-ui *, .refined-ui *::before, .refined-ui *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  }
}
@media print { .report-reading-tools, .route-return { display: none !important; } }

/* Account navigation also accommodates the teacher/admin entries in the live app. */
@media screen {
  .refined-ui .top-actions { display: flex; }
  .refined-ui .user-chip { min-width: 0; max-width: 260px; height: auto; min-height: 44px; border-radius: 8px; box-shadow: none; font-size: 14px; }
  .refined-ui .user-chip > span:not(.avatar-badge) { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .refined-ui .user-chip .topbar-user-avatar { flex-shrink: 0; }
  @media (max-width: 1360px) {
    .refined-ui .topbar { height: auto; flex-wrap: wrap; padding: 12px 20px 0; gap: 12px; }
    .refined-ui .top-actions { margin-left: auto; }
    .refined-ui .nav { position: relative; flex-basis: 100%; order: 3; flex-wrap: wrap; overflow: visible; justify-content: flex-start; gap: 0 22px; }
    .refined-ui .more-menu { position: static; }
    .refined-ui .more-panel { top: calc(100% + 4px); right: 0; left: auto; }
    .refined-ui .nav button, .refined-ui .more-menu { min-height: 44px; height: 44px; }
    .refined-ui .report-disclosure { scroll-margin-top: 220px; }
  }
  @media (max-width: 600px) {
    .refined-ui .topbar { padding: 12px 16px 0; }
    .refined-ui .brand strong { font-size: 18px; }
    .refined-ui .top-actions { flex-basis: 100%; justify-content: flex-start; flex-wrap: wrap; }
    .refined-ui .user-chip { max-width: calc(100% - 100px); }
    .refined-ui .top-actions > .icon-button { display: none; }
    .refined-ui .logout-button { min-height: 44px; }
    .refined-ui .nav { gap: 0 18px; }
  }
}