﻿@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700&display=swap');

:root {
    color-scheme: light;
    --ink: #202b2d;
    --muted: #647274;
    --line: #dce4e1;
    --paper: #ffffff;
    --canvas: #f3f6f3;
    --accent: #176f5b;
    --accent-dark: #0f5748;
    --warning: #a63c32;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: 'DM Sans', sans-serif; font-size: 15px; }
.topbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 6vw; background: var(--paper); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; flex: 0 0 auto; color: var(--ink); text-decoration: none; }
.brand img { display: block; width: 132px; max-height: 48px; object-fit: contain; }
nav { display: flex; align-items: stretch; gap: 24px; min-height: 64px; }
nav a { display: flex; align-items: center; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
nav a:hover, nav a.selected { color: var(--accent-dark); }
nav a.selected { border-bottom-color: var(--accent); }
.page { max-width: 1080px; margin: 0 auto; padding: 48px 28px 72px; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; }
.report-page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 11px; font-weight: 700; }
h1 { margin: 0; font: 700 30px 'Manrope', sans-serif; }
.form-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { color: #394748; font-size: 13px; font-weight: 600; }
.field input:not([type=checkbox]), .field textarea, .field select { width: 100%; min-height: 42px; border: 1px solid #bdcbc6; border-radius: 4px; padding: 9px 11px; color: var(--ink); background: white; font: inherit; }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid #a9d2c4; border-color: var(--accent); }
.check-field { justify-content: center; align-items: start; }
.check-field input { accent-color: var(--accent); margin-right: 8px; }
.actions { display: flex; justify-content: end; margin-top: 20px; }
.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid #d5e0dc; border-radius: 6px; color: #344342; background: #fff; font: 600 14px 'DM Sans', sans-serif; text-decoration: none; cursor: pointer; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.button:hover { border-color: #9dc8b8; color: var(--accent-dark); background: #f7fbf9; }
.button:focus-visible { outline: 3px solid #88c7b1; outline-offset: 2px; }
.button:active { transform: translateY(1px); }
.button.primary { color: white; background: var(--accent); }
.button.primary:hover { background: var(--accent-dark); }
.message { display: block; margin: 0 0 18px; color: var(--accent-dark); }
.message:empty { display: none; }
.message.error { color: var(--warning); }
.table-wrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.data-grid { width: 100%; border-collapse: collapse; text-align: left; }
.data-grid th, .data-grid td { padding: 14px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-grid th { color: var(--muted); background: #f8faf8; font-size: 12px; font-weight: 700; }
.data-grid tr:last-child td { border-bottom: 0; }
.data-grid .exam-edit-action a { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 14px; color: var(--accent-dark); background: #edf6f1; border: 1px solid #cce3d8; border-radius: 6px; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .16s ease, border-color .16s ease, color .16s ease; }
.data-grid .exam-edit-action a:hover { color: white; background: var(--accent); border-color: var(--accent); }
.linking-help { margin: -12px 0 24px; }
.upload-panel { padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.upload-panel .section-heading { margin-bottom: 10px; }
.upload-panel .section-heading h2, .question-bank-manager .section-heading h2 { margin: 0; font: 700 20px 'Manrope', sans-serif; }
.page-subtitle { margin: 0 0 20px; color: var(--muted); line-height: 1.6; }
.question-bank-manager { margin-top: 40px; }
.question-bank-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.question-bank-toolbar .field { flex: 0 1 320px; }
.question-bank-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
.question-bank-toolbar .question-bank-actions { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; overflow-x: auto; padding-bottom: 3px; }
.button.destructive { color: var(--warning); border-color: #e8c9c4; }
.button.destructive:hover { color: #fff; border-color: var(--warning); background: var(--warning); }
.exam-row-action { min-height: 32px; margin-right: 6px; padding: 0 10px; font-size: 12px; }
.button.exam-row-action.primary { color: #fff; border-color: var(--accent); background: var(--accent); }
.button.exam-row-action.primary:hover { border-color: var(--accent-dark); background: var(--accent-dark); }
.button.exam-row-action.destructive { color: #fff; border-color: var(--warning); background: var(--warning); }
.button.exam-row-action.destructive:hover { filter: brightness(.92); }
.question-bank-grid .question-bank-text { min-width: 240px; max-width: 440px; white-space: normal; line-height: 1.5; }
.question-bank-toolbar .button { flex: 0 0 auto; min-height: 38px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
.button.unlink-action { color: var(--accent-dark); border-color: #cce3d8; background: #edf6f1; }
.button.unlink-action:hover { color: #fff; border-color: var(--accent); background: var(--accent); }
.question-bank-grid .pager td { padding: 18px 12px; border-bottom: 0; background: #fbfdfb; }
.question-bank-grid .pager a, .question-bank-grid .pager span { min-width: 38px; display: inline-flex; align-items: center; justify-content: center; margin: 0 3px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--accent-dark); background: #fff; font-size: 13px; font-weight: 700; text-decoration: none; box-shadow: 0 2px 6px #203b3308; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.question-bank-grid .pager a:hover { color: #fff; background: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.question-bank-grid .pager span { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 3px 9px #176f5b2b; }
.question-page-summary { display: block; padding: 10px 16px 14px; color: var(--muted); font-size: 13px; text-align: right; }
.generated-link { display: flex; align-items: end; gap: 12px; margin-top: 30px; padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.generated-link .field { flex: 1; }
.generated-link #copy-status { min-width: 56px; padding-bottom: 12px; color: var(--accent-dark); font-size: 13px; }
.preview-heading { margin-top: 40px; }
.preview-heading h2, .section-heading h2 { margin: 0; font: 700 20px 'Manrope', sans-serif; }
.valid-row td:first-child { border-left: 3px solid var(--accent); }
.invalid-row td:first-child { border-left: 3px solid var(--warning); }
.selection-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 26px; padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.selection-bar select { min-height: 42px; padding: 8px 10px; border: 1px solid #bdcbc6; border-radius: 4px; background: white; color: var(--ink); font: inherit; }
.link-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.link-section { min-width: 0; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.linked-questions-heading { align-items: flex-start; }
.linked-questions-heading > div:first-child { display: grid; gap: 6px; }
.linked-questions-heading .question-bank-actions { flex-wrap: nowrap; flex-shrink: 0; }
.linked-questions-heading .button { white-space: nowrap; }
.count-label { color: var(--muted); font-size: 13px; }
.table-action { display: inline-block; margin-right: 10px; color: var(--accent-dark); font-size: 13px; text-decoration: none; }
.table-action.destructive { color: var(--warning); }
.student-page { width: min(100% - 32px, 620px); margin: 8vh auto; padding: 38px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.student-brand-logo { display: block; width: min(100%, 220px); max-height: 72px; object-fit: contain; object-position: left center; margin-bottom: 28px; }
.student-page h1 { margin-bottom: 12px; }
.start-page { max-width: 680px; padding: clamp(26px, 5vw, 48px); border-color: #e0e9e4; border-radius: 16px; box-shadow: 0 24px 70px #17372b12; }
.start-page .student-brand-logo { margin-bottom: 36px; }
.start-heading { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.start-heading .eyebrow { letter-spacing: .12em; }
.start-heading h1 { margin-bottom: 10px; font-size: clamp(25px, 4vw, 34px); }
.start-heading > p:last-child { margin: 0; color: var(--muted); line-height: 1.65; }
.student-form { display: grid; gap: 20px; margin-top: 28px; }
.student-form .button { justify-self: start; }
.student-form .button.primary { min-height: 48px; padding: 0 22px; box-shadow: 0 5px 14px #176f5b25; }
.auth-page { min-height: 100vh; display: grid; align-items: start; padding: 8vh 16px 48px; background: radial-gradient(ellipse at 50% -18%, #d8ebe2 0, transparent 47%), var(--canvas); }
.auth-card { width: min(100%, 480px); margin: 0 auto; padding: clamp(26px, 5vw, 42px); background: var(--paper); border: 1px solid #e0e9e4; border-radius: 16px; box-shadow: 0 24px 70px #17372b12; }
.auth-card .student-brand-logo { margin-bottom: 30px; }
.auth-card .eyebrow { letter-spacing: .12em; }
.auth-card h1 { margin-bottom: 8px; }
.auth-description { margin: 0 0 24px; color: var(--muted); line-height: 1.6; }
.auth-fields { display: grid; gap: 18px; margin-top: 20px; }
.auth-fields .button { justify-self: start; min-height: 46px; padding: 0 22px; }
.launch-body { min-height: 100vh; display: grid; align-items: start; padding: 8vh 16px 48px; background: radial-gradient(ellipse at 50% -18%, #d8ebe2 0, transparent 47%), var(--canvas); }
.launch-card { width: min(100%, 620px); margin: 0 auto; padding: clamp(26px, 5vw, 48px); background: var(--paper); border: 1px solid #e0e9e4; border-radius: 16px; box-shadow: 0 24px 70px #17372b12; }
.launch-brand { display: block; width: min(100%, 220px); max-height: 72px; object-fit: contain; object-position: left center; margin-bottom: 36px; }
.launch-card .eyebrow { letter-spacing: .12em; }
.launch-card h1 { margin-bottom: 12px; font-size: clamp(25px, 4vw, 34px); }
.launch-copy { margin: 0; color: var(--muted); line-height: 1.7; }
.launch-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.launch-button { min-height: 48px; margin: 0; padding: 0 22px; }
.exam-body { min-height: 100vh; background: radial-gradient(ellipse at 50% -18%, #d8ebe2 0, transparent 47%), #f1f5f2; }
.exam-topbar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 88px; padding: 14px max(6vw, calc((100vw - 1120px) / 2)); background: #fff; border-bottom: 1px solid #dce7e1; box-shadow: 0 4px 18px #17372b0a; }
.exam-topbar .eyebrow { margin-bottom: 5px; }
.exam-topbar h1 { font-size: 20px; }
.exam-brand-heading { display: flex; align-items: center; gap: 20px; min-width: 0; }
.exam-brand-logo { display: block; width: 112px; max-height: 52px; object-fit: contain; }
.exam-brand-heading > div { min-width: 0; }
.timer-block { display: grid; justify-items: end; gap: 2px; min-width: 112px; padding: 9px 14px; background: #f5f8f6; border: 1px solid #e6ede9; border-radius: 9px; font-variant-numeric: tabular-nums; }
.timer-label, .result-label { color: var(--muted); font-size: 11px; font-weight: 700; }
.timer-block strong { color: var(--accent-dark); font: 700 24px 'Manrope', sans-serif; }
.exam-page { max-width: 940px; margin: 0 auto; padding: 38px 24px 70px; }
.exam-exit-warning { margin: 0 0 20px; padding: 14px 18px; color: #722c25; background: #fff0ee; border: 1px solid #e6aaa3; border-left: 5px solid var(--warning); border-radius: 6px; font-weight: 700; line-height: 1.5; }
.question-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: var(--muted); font-size: 14px; }
.question-meta .eyebrow { margin-bottom: 4px; letter-spacing: .12em; }
.question-count { color: var(--ink); font: 700 16px 'Manrope', sans-serif; font-variant-numeric: tabular-nums; }
.question-progress { height: 8px; overflow: hidden; margin-bottom: 24px; background: #dfe8e4; border-radius: 99px; box-shadow: inset 0 1px 2px #1a3b2b0d; }
.question-progress-fill { height: 100%; background: linear-gradient(90deg, #176f5b, #39a183); border-radius: inherit; transition: width .3s ease; }
.question-panel { padding: clamp(24px, 5vw, 48px); background: var(--paper); border: 1px solid #dfe8e3; border-radius: 14px; box-shadow: 0 20px 55px #203b3312; }
.question-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.question-type, .question-marks { padding: 7px 11px; color: var(--accent-dark); background: #eaf4ef; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.question-marks { color: #536462; background: #f0f3f2; letter-spacing: 0; }
.question-panel h2 { margin: 0 0 12px; font: 600 clamp(21px, 3vw, 28px)/1.45 'Manrope', sans-serif; letter-spacing: -.02em; }
.answer-prompt { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.answer-options { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: answer; }
.answer-options li { position: relative; min-width: 0; counter-increment: answer; }
.answer-options input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.answer-options label { display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 15px 18px; color: #344342; background: linear-gradient(110deg, #fff, #fcfdfc); border: 1px solid #dce5e1; border-radius: 10px; cursor: pointer; line-height: 1.5; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.answer-options label::before { content: counter(answer, upper-alpha); display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; color: #5d706b; background: #f1f5f3; border-radius: 8px; font-size: 12px; font-weight: 700; }
.answer-options li:hover label { border-color: #9dc8b8; transform: translateY(-1px); }
.answer-options li:has(input:checked) label { color: #124e40; background: linear-gradient(110deg, #eaf6f0, #f8fcf9); border-color: #3a9277; box-shadow: 0 0 0 3px #176f5b14; }
.answer-options li:has(input:checked) label::before { color: white; background: var(--accent); }
.answer-options li:has(input:focus-visible) label { outline: 3px solid #88c7b1; outline-offset: 2px; }
.question-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.question-actions .button { min-height: 46px; border-color: #d5e0dc; background: white; color: #344342; }
.question-actions .button.primary { color: white; background: var(--accent); border-color: var(--accent); }
.question-actions .submit-button { margin-left: auto; color: white; background: #a63c32; border-color: #a63c32; }
.question-actions .button:hover { filter: brightness(.97); }
.warning-overlay { position: fixed; right: 20px; bottom: 20px; z-index: 10; max-width: min(420px, calc(100vw - 40px)); padding: 16px 20px; color: white; background: #8d342d; border-radius: 4px; box-shadow: 0 8px 26px #16252233; }
.result-page { width: min(100% - 32px, 680px); margin-top: 8vh; padding: clamp(26px, 5vw, 48px); border-color: #e0e9e4; border-radius: 16px; box-shadow: 0 24px 70px #17372b12; }
.result-page .eyebrow { display: flex; align-items: center; gap: 8px; }
.result-page .eyebrow::before { content: 'OK'; display: grid; width: 27px; height: 27px; place-items: center; color: white; background: var(--accent); border-radius: 50%; font-size: 9px; letter-spacing: 0; }
.result-page h1 { margin-bottom: 9px; font-size: clamp(25px, 4vw, 32px); }
.result-heading { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.result-panel { display: flex; justify-content: center; align-items: center; margin-top: 24px; padding: clamp(28px, 6vw, 48px) 24px; border: 1px solid #dcebe3; border-left: 4px solid var(--accent); border-radius: 10px; background: linear-gradient(120deg, #f1f8f4, #fbfdfb); text-align: center; }
.result-label { margin: 0; }
.result-duration { display: grid; justify-items: center; gap: 10px; }
.result-duration .result-label { letter-spacing: .12em; }
.result-duration strong { color: var(--accent-dark); font: 700 clamp(26px, 5vw, 38px) 'Manrope', sans-serif; font-variant-numeric: tabular-nums; }
.result-exit { min-height: 46px; margin-top: 24px; padding: 0 20px; box-shadow: 0 5px 14px #176f5b25; }
.page-subtitle { margin: 10px 0 0; color: var(--muted); }
.reports-filter { grid-template-columns: minmax(210px, .7fr) 2fr; align-items: end; }
.reports-page { max-width: 1600px; }
.reports-grid { min-width: 1380px; }
.reports-grid th, .reports-grid td { padding-left: 18px; padding-right: 18px; }
.reports-grid th:first-child, .reports-grid td:first-child { min-width: 128px; }
.reports-grid .report-action a { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; color: white; background: var(--accent); border-radius: 5px; font-size: 13px; font-weight: 700; text-decoration: none; }
.reports-grid .report-action a:hover { background: var(--accent-dark); }
.report-stats { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); gap: 12px; }
.report-stats div { display: grid; gap: 5px; padding: 12px 14px; background: #f7faf8; border: 1px solid #e7eeea; border-radius: 7px; }
.report-stats span, .attempt-summary span { color: var(--muted); font-size: 11px; font-weight: 700; }
.report-stats strong { color: var(--ink); font: 700 20px 'Manrope', sans-serif; font-variant-numeric: tabular-nums; }
.report-section { margin-top: 34px; }
.attempt-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 34px; }
.attempt-summary div { display: grid; align-content: start; gap: 7px; min-width: 0; padding: 16px; background: white; border: 1px solid var(--line); border-radius: 8px; }
.attempt-summary strong { overflow-wrap: anywhere; font-size: 14px; }
.report-section .section-heading { margin-bottom: 12px; }
.answer-report-grid { width: 100%; table-layout: fixed; }
.answer-report-grid th, .answer-report-grid td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; line-height: 1.5; }
.answer-report-grid th:nth-child(1), .answer-report-grid td:nth-child(1) { width: 5%; }
.answer-report-grid th:nth-child(2), .answer-report-grid td:nth-child(2) { width: 23%; }
.answer-report-grid th:nth-child(3), .answer-report-grid td:nth-child(3) { width: 15%; }
.answer-report-grid th:nth-child(4), .answer-report-grid td:nth-child(4) { width: 10%; }
.answer-report-grid th:nth-child(5), .answer-report-grid td:nth-child(5) { width: 15%; }
.answer-report-grid th:nth-child(6), .answer-report-grid td:nth-child(6) { width: 16%; }
.answer-report-grid th:nth-child(7), .answer-report-grid td:nth-child(7) { width: 16%; }
.answer-report-grid td:nth-child(7) { color: var(--accent-dark); font-weight: 600; }

@media (max-width: 640px) {
    .topbar { align-items: flex-start; flex-direction: column; gap: 0; padding: 16px 20px 0; }
    .brand img { width: 116px; max-height: 42px; }
    nav { gap: 20px; min-height: 48px; }
    nav { flex-wrap: wrap; }
    .page { padding: 32px 16px 48px; }
    .page-heading { align-items: flex-start; }
    .form-layout { grid-template-columns: minmax(0, 1fr); padding: 20px; }
    .field.full { grid-column: auto; }
    h1 { font-size: 26px; }
    .selection-bar, .link-columns, .reports-filter { grid-template-columns: minmax(0, 1fr); }
    .question-bank-toolbar { align-items: stretch; flex-direction: column; }
    .question-bank-toolbar .field { flex-basis: auto; }
    .question-bank-toolbar .question-bank-actions { justify-content: flex-start; }
    .linked-questions-heading { flex-direction: column; }
    .linked-questions-heading .question-bank-actions { flex-wrap: wrap; }
    .question-bank-grid .pager a, .question-bank-grid .pager span { min-width: 34px; margin: 2px; padding: 7px 9px; }
    .question-page-summary { text-align: left; }
    .report-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attempt-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .section-heading { align-items: flex-start; }
    .generated-link { align-items: stretch; flex-direction: column; }
    .student-page { margin: 20px auto; padding: 24px; }
    .exam-topbar { padding: 14px 18px; }
    .exam-topbar h1 { max-width: 55vw; font-size: 17px; }
    .exam-topbar { gap: 10px; }
    .exam-brand-heading { gap: 10px; }
    .exam-brand-logo { width: 76px; max-height: 40px; }
    .exam-page { padding: 24px 16px 48px; }
    .question-panel { padding: 24px 18px; border-radius: 10px; }
    .question-heading { margin-bottom: 20px; }
    .question-panel h2 { font-size: 20px; }
    .answer-options label { min-height: 58px; padding: 12px; }
    .question-actions { flex-wrap: wrap; }
    .question-actions .button { flex: 1 1 auto; }
    .question-actions .submit-button { margin-left: 0; }
    .result-page { margin-top: 20px; }
    .answer-report-grid { min-width: 780px; }
}

@media print {
    @page { margin: 14mm; }
    body { background: #fff !important; color: #111; font-size: 10pt; }
    .topbar, .report-page-actions, .report-filter-control, .message, .no-print { display: none !important; }
    .page { max-width: none; padding: 0; }
    .page-heading { margin-bottom: 16px; }
    .reports-filter .report-stats { grid-column: 1 / -1; }
    .reports-grid { min-width: 0; }
    .attempt-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 20px; }
    .attempt-summary div { padding: 8px; break-inside: avoid; }
    .report-section { margin-top: 20px; break-inside: auto; }
    .table-wrap { overflow: visible; border: 0; }
    .data-grid { width: 100%; font-size: 8pt; }
    .data-grid th, .data-grid td { padding: 5px 6px; white-space: normal !important; }
    .answer-report-grid { min-width: 0; }
    .answer-report-grid th, .answer-report-grid td { overflow-wrap: anywhere; }
    .data-grid tr { break-inside: avoid; }
}
