/* Shared classroom scale: paper, block colors, readable type, stable touch targets. */
:root {
  --paper:#fff7e6;
  --paper-soft:#fffcf4;
  --white:#fff;
  --ink:#483b2c;
  --muted:#806f57;
  --line:#eddfc1;
  --line-strong:#ddc89b;
  --blue:#3e9be6;
  --blue-deep:#2675b5;
  --blue-soft:#e6f2fd;
  --green:#317b49;
  --green-soft:#e6f4e9;
  --yellow:#ffc93c;
  --yellow-ink:#8a6509;
  --yellow-soft:#fff2cc;
  --red:#b84938;
  --red-soft:#fff0e9;
  --radius:14px;
  --shadow:0 3px 0 #4a3b2a12;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
}
* { box-sizing:border-box; }
html { min-width:320px; }
body { margin:0;background:var(--paper);color:var(--ink);font:18px/1.55 var(--font);letter-spacing:0;-webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit;color:inherit;letter-spacing:0; }
button,a,input,select,textarea { touch-action:manipulation; }
button,.button {
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;border:2px solid var(--line);border-radius:var(--radius);
  padding:10px 18px;background:var(--white);color:var(--ink);
  font-size:17px;font-weight:700;line-height:1.35;text-decoration:none;
  cursor:pointer;box-shadow:var(--shadow);white-space:nowrap;
  transition:background .15s,border-color .15s,box-shadow .12s,transform .12s;
}
button:hover,.button:hover { border-color:#dcb963;background:var(--yellow-soft); }
button:active,.button:active { transform:translateY(1px);box-shadow:0 1px 0 #4a3b2a12; }
button.primary,.button.primary { background:var(--blue-deep);border-color:#1e6299;color:white;box-shadow:0 3px 0 #1e6299; }
button.primary:hover,.button.primary:hover { background:#206aa5;border-color:#1e6299; }
button.good { background:var(--green);color:white;border-color:#27673c;box-shadow:0 3px 0 #27673c; }
button.danger { color:var(--red);background:var(--red-soft);border-color:#edc2b1; }
button.danger:hover { background:#ffe4d9;border-color:#d8927a; }
button.quiet,.button.quiet { border-color:transparent;background:transparent;box-shadow:none; }
button.quiet:hover,.button.quiet:hover { background:var(--yellow-soft);border-color:transparent; }
button.icon { flex:none;width:46px;min-height:46px;padding:10px; }
button:disabled,.button[aria-disabled=true] { opacity:.42;cursor:not-allowed;transform:none;box-shadow:none; }
button:focus-visible,a:focus-visible { outline:3px solid #d7a31d;outline-offset:4px; }
svg.lucide { flex:none;width:21px;height:21px;stroke-width:1.9; }
input,select,textarea { width:100%;min-height:48px;border:2px solid var(--line-strong);border-radius:11px;padding:10px 13px;background:#fff;font-size:17px;line-height:1.5; }
input::placeholder,textarea::placeholder { color:var(--muted);opacity:1; }
input:focus,select:focus,textarea:focus { outline:3px solid #bfe0f8;outline-offset:2px;border-color:var(--blue); }
input:disabled,select:disabled,textarea:disabled { background:#f6efdf;color:var(--muted);cursor:not-allowed; }
input[type=checkbox],input[type=radio] { flex:none;width:21px;height:21px;min-height:0;margin:0;accent-color:var(--blue-deep); }
input[type=range] { padding:0;min-height:0; }
input[type=number] { font-variant-numeric:tabular-nums; }
input[readonly] { color:var(--muted);background:var(--paper-soft); }
textarea { resize:vertical;line-height:1.7; }
label { display:grid;gap:8px;font-size:16px;font-weight:700;line-height:1.45; }
label.check { display:flex;align-items:center;gap:10px;font-size:16px;font-weight:550; }
h1,h2,h3,p { margin:0; }
h1 { font-size:32px;font-weight:800;line-height:1.3;overflow-wrap:anywhere; }
h2 { font-size:23px;font-weight:800;line-height:1.4; }
h3 { font-size:19px;font-weight:750;line-height:1.45; }
p+p { margin-top:10px; }
a { color:var(--blue-deep);text-underline-offset:3px; }
strong,b { font-weight:750; }
small,.small { font-size:14px;line-height:1.5; }
.muted { color:var(--muted); }
.row { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.between { justify-content:space-between; }
.stack { display:grid;gap:20px; }
.grow { flex:1;min-width:0; }
.hidden,[hidden] { display:none!important; }
.divider { height:2px;background:var(--line);margin:22px 0; }
.eyebrow { font-size:13px;font-weight:600;color:var(--muted);margin-bottom:7px;line-height:1.5; }
.nowrap { white-space:nowrap; }
.loading { min-height:60dvh;display:grid;place-items:center;color:var(--muted);font-size:18px; }
.topbar { position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:88px;padding:15px 34px;border-bottom:3px solid var(--line);background:var(--paper-soft); }
.brand { display:flex;align-items:center;gap:12px;min-width:0;color:var(--ink);text-decoration:none;font-size:26px;font-weight:800;line-height:1.25;white-space:nowrap; }
.brand [data-system-title] { min-width:0;max-width:260px;overflow:hidden;text-overflow:ellipsis; }
.brand-mark { display:grid;place-items:center;flex:none;width:44px;height:44px;border:2px solid #2c85c5;border-radius:13px;background:var(--blue);color:white;box-shadow:0 3px 0 #b9d9eb; }
.brand-mark svg { width:28px;height:28px;stroke-width:1.8; }
.role-label { font-size:14px;font-weight:600;color:var(--muted);padding:4px 0 4px 14px;border-left:2px solid var(--line); }
.topbar-utilities { gap:5px;flex-wrap:nowrap; }
.connection { display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--green);margin-right:8px;white-space:nowrap; }
.connection:before { content:"";width:7px;height:7px;border-radius:50%;background:currentColor; }
.connection.offline { color:var(--red); }
.topnav { display:flex;align-items:center;gap:5px;padding:5px;margin:auto;background:#f3e8cc;border:1px solid #eee3c7;border-radius:30px; }
.topnav button { min-height:45px;padding:10px 21px;border:0;border-radius:24px;background:transparent;color:#79684f;font-size:16px;box-shadow:none; }
.topnav button.active { background:white;color:var(--blue-deep);box-shadow:0 3px 0 #4a3b2a12; }
.topnav button:hover { background:#fffcf4; }
.topnav button.active:hover { background:white; }
.topnav svg { width:20px;height:20px; }
.workspace { display:block;min-height:calc(100dvh - 88px); }
.content { width:100%;max-width:1860px;margin:auto;padding:21px 38px 36px; }
.class-toolbar { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-bottom:17px;margin-bottom:23px;border-bottom:2px solid var(--line); }
.class-toolbar .row { gap:9px; }
.class-label { display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--muted); }
.class-label svg { color:var(--blue-deep); }
.class-toolbar select { width:220px;min-height:44px;padding:9px 13px;background:var(--paper-soft);font-size:16px;font-weight:700; }
.class-toolbar button { min-height:44px;padding:9px 14px;font-size:15px; }
.class-toolbar button.icon { width:44px;padding:9px; }
.class-toolbar .student-entry { background:var(--yellow-soft);border-color:#ead08b;color:var(--yellow-ink); }
.class-toolbar .active { background:var(--blue-soft);border-color:#b5d7ef;color:var(--blue-deep); }
.class-toolbar .clear-data-button { color:var(--red); }
.page-head { display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:23px; }
.head-actions { display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap;max-width:70%; }
.head-actions button { min-height:44px;padding:9px 14px;font-size:15px; }
.head-actions button.icon { width:44px;padding:9px; }
.quiz-select { min-width:180px;max-width:270px;width:240px;min-height:44px;background:var(--paper-soft);font-size:15px; }
.badge { display:inline-flex;align-items:center;justify-content:center;gap:6px;max-width:100%;padding:4px 11px;border:1px solid transparent;border-radius:18px;background:#eee5d1;color:#79674c;font-size:13px;font-weight:700;line-height:1.5;white-space:nowrap; }
.badge svg { width:16px;height:16px; }
.badge.blue { color:var(--blue-deep);background:var(--blue-soft); }
.badge.green { color:var(--green);background:var(--green-soft); }
.badge.yellow { color:var(--yellow-ink);background:var(--yellow-soft); }
.badge.red { color:var(--red);background:var(--red-soft); }
.summary { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:20px 0 22px;border-top:2px solid var(--line);border-bottom:2px solid var(--line);margin-bottom:22px; }
.metric { padding:0 30px;border-left:2px solid var(--line);min-width:0; }
.metric:first-child { padding-left:0;border:0; }
.metric-label { display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;font-weight:600; }
.metric-label svg { color:var(--blue-deep);width:21px;height:21px; }
.metric-value { display:flex;align-items:baseline;gap:8px;margin-top:6px;font-variant-numeric:tabular-nums; }
.metric-value b { font-size:42px;font-weight:800;line-height:1.2;color:var(--blue-deep); }
.metric-value small { font-size:16px;font-weight:500;color:var(--muted); }
.metric:nth-child(2) .metric-value b,.metric:nth-child(2) svg { color:var(--green); }
.metric:nth-child(4) .metric-value b,.metric:nth-child(4) svg { color:var(--yellow-ink); }
.section-head { display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:17px; }
.section-head h2 { display:flex;align-items:center;gap:10px;font-size:22px; }
.section-head h2 svg { color:var(--blue-deep);width:24px;height:24px; }
.chart-grid { display:grid;grid-template-columns:1fr 1.2fr;gap:38px;padding-bottom:22px;margin-bottom:23px;border-bottom:2px solid var(--line); }
.chart-section { min-width:0; }
.chart-section+.chart-section { border-left:2px solid var(--line);padding-left:36px; }
.donut-area { display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:28px;min-height:188px; }
.donut { position:relative;display:grid;place-items:center;width:172px;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--blue) calc(var(--progress)*1%),#e8ddc4 0); }
.donut:before { content:"";position:absolute;inset:16px;border-radius:50%;background:var(--paper); }
.donut strong { position:relative;font-size:36px;font-weight:800;line-height:1.1;text-align:center;color:var(--blue-deep);font-variant-numeric:tabular-nums; }
.donut strong small { display:block;margin-top:9px;font-size:14px;font-weight:550;color:var(--muted); }
.legend-list { display:grid;gap:19px; }
.legend-list>div { display:flex;align-items:center;justify-content:space-between;gap:14px; }
.legend-list span { display:flex;align-items:center;gap:9px;font-size:15px; }
.legend-list b { font-size:17px;white-space:nowrap;font-variant-numeric:tabular-nums; }
.legend-dot { display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--blue); }
.legend-dot.gray { background:#cdbd9c; }
.legend-dot.yellow { background:#ddb33e; }
.legend-inline { display:flex;align-items:center;gap:13px;flex-wrap:wrap;color:var(--muted);font-size:12px;font-weight:550; }
.legend-inline span { display:flex;align-items:center;gap:6px; }
.legend-inline i { display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--green); }
.legend-inline i.red { background:var(--red); }
.legend-inline i.yellow { background:#c59b2d; }
.bar-list { display:grid;gap:13px;padding-top:4px;max-height:265px;overflow:auto; }
.bar-row { display:grid;grid-template-columns:77px minmax(45px,1fr) 49px;align-items:center;gap:14px;font-size:15px; }
.bar-row b { text-align:right;font-size:15px;font-variant-numeric:tabular-nums; }
.bar-track { height:14px;overflow:hidden;border-radius:7px;background:#ece5d5; }
.bar-fill { height:100%;border-radius:7px;background:var(--blue); }
.bar-fill.green { background:#64ad76; }
.bar-fill.yellow { background:#e7b641; }
.bar-fill.red { background:#da7861; }
.stat-foot { margin-top:12px;font-size:12px;line-height:1.6;color:var(--muted); }
.filter-input { width:210px;min-height:40px;padding:7px 11px;font-size:14px;border-radius:11px; }
.table-wrap { max-height:540px;overflow:auto;background:#fff;border:2px solid var(--line);border-radius:14px; }
table { width:100%;border-collapse:collapse;white-space:nowrap;font-size:15px;font-variant-numeric:tabular-nums; }
th,td { padding:13px 17px;text-align:left;border-bottom:1px solid #f0e8d7;vertical-align:middle; }
th { position:sticky;top:0;z-index:1;font-size:14px;font-weight:700;color:#766248;background:var(--paper-soft);border-bottom:2px solid var(--line); }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:#fffdf7; }
td.name-cell { min-width:110px;font-size:16px;font-weight:750; }
.name-cell small { margin-left:8px;font-size:14px;font-weight:500;color:var(--muted); }
.score-cell { font-size:19px;font-weight:800;color:var(--blue-deep); }
.score-cell .badge { margin-left:6px; }
.cell-status { display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:30px;height:30px;border:1px solid transparent;border-radius:8px;background:#f1ebdf;color:#8a7759; }
.cell-status svg { width:18px;height:18px;stroke-width:2.2; }
.cell-status.correct { background:var(--green-soft);color:var(--green); }
.cell-status.wrong,.cell-status.blank { background:var(--red-soft);color:var(--red); }
.cell-status.partial,.cell-status.pending { background:var(--yellow-soft);color:var(--yellow-ink); }
.answer-matrix th:nth-child(n+4),.answer-matrix td:nth-child(n+4) { text-align:center; }
.answer-matrix th:first-child,.answer-matrix td:first-child { position:sticky;left:0;z-index:1;background:#fff; }
.answer-matrix th:first-child { z-index:3;background:var(--paper-soft); }
.empty { display:grid;justify-items:center;gap:12px;padding:58px 22px;text-align:center;color:var(--muted); }
.empty>svg { width:44px;height:44px;stroke-width:1.5;color:#c3a96f; }
.empty h3 { color:var(--ink);font-size:23px; }
.empty p { font-size:15px;max-width:550px; }
.question-list { display:grid;gap:16px; }
.question-row { display:flex;align-items:flex-start;gap:19px;padding:22px;border:2px solid var(--line);border-radius:15px;background:#fff; }
.question-index { display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:11px;background:var(--blue-soft);color:var(--blue-deep);font-size:20px;font-weight:800; }
.question-row p { margin:12px 0;font-size:19px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere; }
.question-actions { display:flex;align-items:center;gap:2px;flex:none; }
.question-actions button.icon { width:40px;min-height:40px;padding:8px; }
.question-options { display:flex;gap:9px 25px;flex-wrap:wrap;font-size:15px;color:var(--muted); }
.question-options span { max-width:100%;overflow-wrap:anywhere; }
.preview-option { display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px; }
.preview-option img { width:110px;height:82px;object-fit:contain;background:white;border:2px solid var(--line);border-radius:9px; }
.preview-option.correct-option img { border-color:#78ac83; }
.correct-option,.correct-text { color:var(--green);font-weight:650; }
.wrong-text { color:var(--red); }
.question-img { display:block;max-width:100%;max-height:230px;object-fit:contain;background:#fff;border:2px solid var(--line);border-radius:11px;margin:14px 0; }
.review-layout { display:grid;grid-template-columns:265px minmax(0,1fr);gap:27px; }
.review-people { display:grid;gap:8px;align-content:start;max-height:70dvh;overflow:auto; }
.review-people button { min-height:53px;justify-content:flex-start;text-align:left;white-space:normal;font-size:15px;box-shadow:none; }
.review-people button.active { background:var(--blue-soft);border-color:var(--blue); }
.review-people .badge { font-size:11px;margin-left:auto;padding:3px 8px; }
.review-detail-title { font-size:23px;margin-bottom:20px; }
.grading-question { padding:0 0 25px;margin-bottom:25px;border-bottom:2px solid var(--line); }
.grading-question:last-child { margin-bottom:0; }
.answer-block { padding:17px 19px;margin:13px 0;border:2px solid var(--line);border-radius:11px;background:white;font-size:18px;white-space:pre-wrap;overflow-wrap:anywhere; }
.answer-images { display:flex;gap:14px;flex-wrap:wrap;margin:15px 0; }
.answer-images img { display:block;max-height:270px;max-width:min(100%,400px);object-fit:contain;border:2px solid var(--line);border-radius:11px;background:white; }
.chosen-options { display:flex;gap:15px;flex-wrap:wrap;margin:13px 0 18px; }
.chosen-options figure { margin:0;min-width:90px;max-width:280px; }
.chosen-options figcaption { margin-bottom:8px;font-size:16px;font-weight:700; }
.chosen-options img { display:block;width:200px;max-width:100%;height:150px;object-fit:contain;background:white;border:2px solid var(--line);border-radius:11px; }
.grade-form { display:grid;grid-template-columns:105px minmax(150px,1fr) auto;align-items:end;gap:13px;margin-top:17px; }
.grade-form input { min-height:46px; }
.rubric { padding:12px 15px;background:var(--yellow-soft);border-left:4px solid var(--yellow);border-radius:0 8px 8px 0;font-size:15px; }
.group-bars { display:grid;gap:22px;max-width:1180px;margin-bottom:30px; }
.group-bar { display:grid;grid-template-columns:140px minmax(80px,1fr) 70px 130px;align-items:center;gap:20px; }
.group-name { min-width:0;font-size:18px;font-weight:750;overflow-wrap:anywhere; }
.group-bar .bar-track { height:29px;border-radius:8px; }
.group-bar .bar-fill { border-radius:8px; }
.group-bar strong { font-size:23px;text-align:right;color:var(--green); }
.group-bar small { text-align:right; }
.roster-toolbar { padding:0 0 23px;gap:18px; }
.roster-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px; }
.roster-entry { display:grid;grid-template-columns:50px 1fr 1fr auto;align-items:center;gap:11px;padding:13px 0;border-bottom:2px solid var(--line); }
.roster-entry>strong { font-size:20px;color:var(--blue-deep);font-variant-numeric:tabular-nums; }
.roster-entry input { min-height:44px;padding:7px 10px;font-size:16px; }
.roster-entry button.icon { width:40px;min-height:40px;padding:8px; }
.roster-lock { margin-bottom:18px; }
.admin-main { max-width:1660px;margin:auto;padding:31px 38px 40px; }
.tenant-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px; }
.tenant-card { display:grid;gap:22px;background:white;border:2px solid var(--line);border-top:6px solid var(--blue);border-radius:15px;padding:24px;box-shadow:0 4px 0 #4a3b2a08;min-width:0; }
.tenant-card:nth-child(3n+2) { border-top-color:#64ad76; }
.tenant-card:nth-child(3n) { border-top-color:var(--yellow); }
.tenant-card h2 { font-size:23px;overflow-wrap:anywhere; }
.tenant-counts { display:flex;gap:29px; }
.tenant-counts b { display:block;font-size:32px;line-height:1.3;color:var(--blue-deep);font-variant-numeric:tabular-nums; }
.tenant-counts small { color:var(--muted);font-size:13px; }
.tenant-actions { display:flex;gap:8px;flex-wrap:wrap; }
.tenant-actions button { font-size:14px;min-height:42px;padding:8px 12px; }
.tenant-actions button.icon { width:42px;padding:9px; }
.admin-section { padding:24px 0;border-top:2px solid var(--line); }
.admin-table-details { padding:15px 0;border-top:1px solid var(--line); }
.admin-table-details summary { display:list-item;padding:8px 0;cursor:pointer;font-size:16px;font-weight:750; }
.admin-table-details .table-wrap { margin-top:14px; }
.modal-scroll-table { max-height:380px; }
.entry-main { display:grid;place-items:center;min-height:calc(100dvh - 88px);padding:40px 24px 65px; }
.entry-content { width:min(100%,550px); }
.entry-content h1 { margin-bottom:28px;text-align:center;font-size:32px; }
.entry-roles { display:grid;gap:20px; }
.role-entry { display:grid;grid-template-columns:58px minmax(0,1fr) 40px;align-items:center;gap:22px;min-height:122px;padding:23px 26px;border:3px solid #bedbf1;border-radius:19px;background:var(--blue-soft);box-shadow:0 5px 0 #bfd7e2;text-decoration:none;color:var(--ink);transition:background .15s,border-color .15s,transform .12s; }
.role-entry strong { font-size:27px;font-weight:800;line-height:1.3; }
.entry-icon { display:grid;place-items:center;width:58px;height:58px;border:2px solid #2c85c5;border-radius:16px;background:var(--blue);color:#fff; }
.entry-icon svg { width:31px;height:31px;stroke-width:1.8; }
.entry-arrow { display:grid;place-items:center;width:40px;height:40px;border:2px solid #c7e1f1;border-radius:50%;color:var(--blue-deep);background:white; }
.entry-arrow svg { width:22px;height:22px; }
.role-entry.student-entry { background:var(--yellow-soft);border-color:#ecd79b;box-shadow:0 5px 0 #e9d6a7; }
.student-entry .entry-icon { background:var(--yellow);border-color:#e2b33a;color:#76570b; }
.student-entry .entry-arrow { color:var(--yellow-ink);border-color:#ead59b; }
.role-entry:hover { background:#d9edfc;border-color:var(--blue);transform:translateY(-1px); }
.role-entry.student-entry:hover { background:#ffeab3;border-color:#d7ac32; }
.role-entry:active { transform:translateY(2px); }
.login-main { display:grid;place-items:center;min-height:calc(100dvh - 88px);padding:35px 24px; }
.login-box { width:min(100%,490px);padding:34px;border:3px solid var(--line);border-top:7px solid var(--yellow);border-radius:19px;background:white;box-shadow:0 12px 38px #4a3b2a0c; }
.login-heading { display:flex;align-items:center;gap:15px;margin-bottom:28px; }
.login-heading h1 { font-size:28px; }
.login-symbol { display:grid;place-items:center;flex:none;width:50px;height:50px;background:var(--blue-soft);color:var(--blue-deep);border:2px solid #c3ddf1;border-radius:14px; }
.login-symbol svg { width:26px;height:26px; }
.login-box .credential-input { min-height:56px;font-size:19px;background:var(--paper-soft); }
.login-box .primary { width:100%;min-height:53px;font-size:18px; }
.login-foot { display:flex;align-items:center;justify-content:space-between;margin-top:25px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;font-weight:600; }
.login-foot a { text-decoration:none; }
.login-foot a:hover { text-decoration:underline; }
.student-shell { max-width:1160px;margin:auto;padding:30px 38px 36px; }
.student-shell>.page-head { padding-bottom:22px;border-bottom:2px solid var(--line); }
.student-head h1 { font-size:28px; }
.student-head .eyebrow { font-size:14px; }
.student-switch { color:var(--blue-deep);border-color:#b5d7ef;background:var(--blue-soft); }
.seat-grid.switch-seat-grid { margin:16px 0 0;grid-template-columns:repeat(6,minmax(0,1fr)); }
.switch-seat-grid button[aria-pressed=true] { opacity:1;background:var(--blue-soft);border-color:#93c0e1; }
.seat-grid { display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:14px;margin-top:28px; }
.seat-grid button { display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:88px;padding:11px 8px;border:2px solid var(--line);border-bottom:4px solid #e1cca1;border-radius:14px;background:white;white-space:normal;overflow-wrap:anywhere;box-shadow:none; }
.seat-grid button strong { font-size:24px;line-height:1.2;color:var(--blue-deep);font-variant-numeric:tabular-nums; }
.seat-grid button small { font-size:13px;font-weight:550;color:var(--muted);line-height:1.35; }
.seat-grid button:hover { background:var(--yellow-soft);border-color:#dab84e; }
.student-quiz-card { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:27px 0;border-bottom:2px solid var(--line); }
.student-quiz-card h2 { font-size:23px;margin-bottom:12px; }
.student-quiz-card>.primary { min-height:51px;font-size:17px; }
.quiz-progress { display:flex;align-items:center;gap:20px;margin-bottom:28px; }
.quiz-progress b { font-size:16px;white-space:nowrap; }
.quiz-progress .bar-track { flex:1;height:8px; }
.quiz-progress>span { min-width:32px;text-align:right;font-variant-numeric:tabular-nums; }
.student-question { max-width:940px;margin:auto;padding-top:10px; }
.answer-session>.page-head { padding-bottom:16px;margin-bottom:17px; }
.answer-session .student-question { padding-top:5px; }
.answer-session .quiz-progress { margin-bottom:20px; }
.student-question .prompt { margin:24px 0 28px;font-size:28px;font-weight:750;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere; }
.answer-session .prompt { margin-top:20px;margin-bottom:23px; }
.answer-options { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px; }
.option { position:relative;display:flex;align-items:center;gap:17px;min-height:97px;padding:21px;border:3px solid var(--line);border-bottom:5px solid #e4d2ab;border-radius:16px;background:white;cursor:pointer;font-size:23px;font-weight:650;line-height:1.5;box-shadow:0 3px 0 #4a3b2a06; }
.option:hover { border-color:#dcb758;background:var(--paper-soft); }
.option.selected { border-color:var(--blue);background:var(--blue-soft);box-shadow:0 3px 0 #b7d8ed; }
.option .letter { flex:none;display:grid;place-items:center;width:43px;height:43px;border:2px solid var(--line);border-radius:11px;background:var(--paper-soft);font-size:22px;font-weight:800; }
.option.selected .letter { background:var(--blue-deep);color:white;border-color:var(--blue-deep); }
.option input { position:absolute;width:1px;height:1px;opacity:0; }
.option:focus-within { outline:3px solid #d8a526;outline-offset:4px; }
.option span:last-child { min-width:0;overflow-wrap:anywhere; }
.option.image-option { flex-direction:column;align-items:stretch;gap:12px;justify-content:flex-start;padding:16px; }
.option-top { display:flex;align-items:center;justify-content:space-between;gap:10px; }
.option-selection { display:grid;place-items:center;opacity:0;width:28px;height:28px;border-radius:50%;background:var(--blue-deep);color:#fff; }
.selected .option-selection { opacity:1; }
.option-selection svg { width:18px;height:18px;stroke-width:2.5; }
.option-media { position:relative;display:block;width:100%;height:180px;overflow:hidden;border-radius:6px;background:white; }
.option-media img { position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain; }
.option-caption { font-size:18px;font-weight:650;line-height:1.5; }
.student-answer-text { min-height:190px;font-size:24px;line-height:1.8;border-radius:14px;padding:18px 20px; }
.question-navigation { display:flex;align-items:center;justify-content:space-between;gap:18px;margin:33px 0 23px; }
.question-navigation button { min-width:132px;min-height:54px;font-size:18px; }
.question-navigation>span { font-size:16px;font-variant-numeric:tabular-nums; }
.question-dots { display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:20px 0; }
.question-dots button { width:40px;min-height:40px;padding:6px;border:2px solid var(--line);border-radius:10px;font-size:14px;box-shadow:none; }
.question-dots button.current { border-color:var(--blue-deep);background:var(--blue-soft);color:var(--blue-deep); }
.question-dots button.answered { color:var(--green);background:var(--green-soft); }
.question-dots button.current.answered { border-color:var(--blue-deep); }
.save-state { font-size:13px;font-weight:550;color:var(--muted); }
.upload-box { position:relative;display:flex;align-items:center;justify-content:center;gap:16px;min-height:160px;padding:25px 20px;border:3px dashed #d9c18b;border-radius:15px;background:var(--paper-soft);color:var(--yellow-ink);cursor:pointer;text-align:center; }
.upload-box:hover { border-color:#c29a2e;background:var(--yellow-soft); }
.upload-box:focus-within { outline:3px solid #bfe0f8;outline-offset:3px; }
.upload-box>svg { width:35px;height:35px; }
.upload-box span { font-size:21px;font-weight:700; }
.upload-box input { position:absolute;inset:0;width:100%;height:100%;min-height:0;opacity:0;cursor:pointer; }
.upload-preview { display:flex;gap:13px;flex-wrap:wrap;margin-top:18px; }
.upload-preview figure { position:relative;width:180px;height:140px;margin:0;overflow:hidden;border:2px solid var(--line);border-radius:11px;background:white; }
.upload-preview img { width:100%;height:100%;object-fit:contain; }
.upload-preview button { position:absolute;top:5px;right:5px;width:32px;min-height:32px;padding:5px;border:1px solid #e4d6b6;border-radius:8px;background:white;box-shadow:0 2px 5px #4a3b2a12; }
.result-score { display:flex;align-items:center;gap:26px;padding:28px 0 30px;margin-bottom:12px;border-bottom:2px solid var(--line); }
.result-score>b { font-size:62px;line-height:1.1;color:var(--blue-deep);font-variant-numeric:tabular-nums; }
.result-score>b small { font-size:22px;font-weight:550;color:var(--muted); }
.result-score h3 { font-size:20px; }
.student-result-row { padding:24px 0;border-bottom:2px solid var(--line); }
.student-result-row h3 { font-size:20px;line-height:1.65;overflow-wrap:anywhere; }
.student-result-row p { font-size:17px;white-space:pre-wrap;line-height:1.7; }
.student-result-row .small { font-size:14px; }
dialog { width:min(640px,94vw);max-height:90dvh;overflow:auto;padding:28px;border:3px solid var(--line);border-radius:19px;background:var(--paper-soft);color:var(--ink);box-shadow:0 20px 65px #4a3b2a2b; }
dialog.wide { width:min(900px,96vw); }
dialog::backdrop { background:#4a3b2a66; }
.modal-head { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:25px; }
.modal-head h2 { font-size:25px;font-weight:800;overflow-wrap:anywhere; }
.modal-head button { align-self:flex-start; }
dialog footer { display:flex;justify-content:flex-end;align-items:center;gap:11px;margin-top:25px;padding-top:20px;border-top:2px solid var(--line); }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:19px; }
.clear-scope { display:grid;gap:12px;margin:0;padding:0;border:0;min-width:0; }
.clear-scope legend { padding:0;margin-bottom:12px;font-weight:700; }
.clear-preview { display:grid;gap:6px;padding:15px 0;border-top:2px solid var(--line);border-bottom:2px solid var(--line);overflow-wrap:anywhere; }
.destructive-note { color:var(--red); }
.span-two { grid-column:1/-1; }
.editor-options { display:grid;gap:11px;margin-top:11px; }
.editor-option { display:grid;grid-template-columns:55px minmax(0,1fr) 40px;align-items:center;gap:12px; }
.editor-option .check { font-weight:750; }
.editor-option input:not([type=radio]):not([type=checkbox]) { min-height:46px; }
.editor-option button.icon { width:39px;min-height:39px;padding:8px; }
.option-editor-main { min-width:0;display:grid;gap:10px; }
.option-editor-text { display:grid;grid-template-columns:minmax(0,1fr) 42px;align-items:center;gap:9px; }
.option-image-upload { position:relative;width:42px;min-height:42px;padding:9px;color:var(--blue-deep);cursor:pointer; }
.option-image-upload input { position:absolute;inset:0;width:100%;height:100%;opacity:0;min-height:0;cursor:pointer; }
.option-image-upload:focus-within { outline:3px solid #bfe0f8;outline-offset:2px; }
.option-editor-image { position:relative;width:160px;height:115px;border:2px solid var(--line);border-radius:10px;background:white;overflow:hidden; }
.option-editor-image>img { width:100%;height:100%;object-fit:contain; }
.option-editor-image button.icon { position:absolute;top:4px;right:4px;width:31px;min-height:31px;padding:6px;border:1px solid #e2d2b1;border-radius:7px;background:white;box-shadow:0 2px 5px #4a3b2a12; }
.option-editor-image button.icon svg { width:17px;height:17px; }
.editor-preview { display:block;max-width:100%;max-height:180px;object-fit:contain;border:1px solid var(--line);border-radius:9px;background:white; }
.upload-field { padding:16px;border:2px dashed #dcca9e;border-radius:12px;background:white; }
.field-label { display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; }
.field-label small { font-size:13px;font-weight:500;color:var(--muted); }
.prompt-image-label { grid-template-columns:160px minmax(0,1fr);align-items:center;gap:15px; }
.upload-field input[type=file] { border:0;padding:7px 0 0;min-height:0;border-radius:0;font-size:14px;background:transparent; }
input[type=file]::file-selector-button { font:600 14px var(--font);padding:9px 12px;margin-right:12px;border:1px solid #b9d6ed;border-radius:8px;color:var(--blue-deep);background:var(--blue-soft);cursor:pointer; }
.type-list { display:flex;gap:14px 20px;flex-wrap:wrap; }
.type-list label { font-size:15px; }
.share-qr { display:block;width:240px;height:240px;margin:0 auto 17px;padding:8px;border:2px solid var(--line);border-radius:13px;background:white; }
.share-code { margin-bottom:17px;text-align:center;color:var(--blue-deep);font-size:32px;font-weight:800;font-variant-numeric:tabular-nums; }
.help { margin-top:6px;font-size:13px;line-height:1.55;color:var(--muted); }
.answer-preview { max-width:440px;white-space:normal;overflow-wrap:anywhere; }
.notice { margin-bottom:18px;padding:12px 16px;border-left:4px solid var(--blue);border-radius:0 8px 8px 0;background:var(--blue-soft);font-size:15px; }
.error { padding:11px 14px;border:2px solid #edb8a4;border-radius:11px;background:var(--red-soft);color:var(--red);font-size:15px;line-height:1.6; }
.error:empty { display:none; }
#toast { position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:min(92vw,660px);padding:14px 25px;border-radius:24px;background:var(--ink);color:white;box-shadow:0 8px 25px #4a3b2a26;z-index:100;font-size:16px;font-weight:600;text-align:center; }
#toast:empty { display:none; }
.board-mode .content { max-width:none;padding:23px 42px 32px; }
.board-mode .class-toolbar { display:none; }
.board-mode .metric-value b { font-size:47px; }
.board-mode table { font-size:18px; }
.board-mode .answer-matrix td.name-cell { font-size:18px; }
.board-mode th { font-size:16px; }
.board-mode th,.board-mode td { padding:13px 19px; }
.board-mode .table-wrap { max-height:calc(100dvh - 550px);min-height:210px; }
.board-mode .topnav button { font-size:18px; }
@media(min-width:1000px) {
  .visual-options.count-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .visual-options.count-3,.visual-options.count-6 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .visual-options.count-4 .option-media { height:145px; }
}
@media(min-width:1700px) {
  .content { padding:24px 46px 40px; }
  .chart-grid { gap:50px; }
  .chart-section+.chart-section { padding-left:45px; }
  .donut-area { grid-template-columns:195px 1fr;gap:35px; }
  .donut { width:184px; }
  .bar-list { gap:15px; }
  .bar-track { height:16px; }
  .table-wrap { max-height:calc(100dvh - 650px);min-height:230px; }
}
@media(max-width:1300px) {
  .topbar { padding:14px 25px;gap:18px; }
  .brand { font-size:24px; }
  .role-label { display:none; }
  .topnav button { padding:10px 18px;font-size:16px; }
  .content { padding:20px 28px 32px; }
  .head-actions { gap:8px; }
  .quiz-select { width:215px;min-width:170px; }
  .head-actions button { padding:9px 12px;font-size:15px; }
  .page-head h1 { font-size:29px; }
  .chart-grid { gap:29px; }
  .chart-section+.chart-section { padding-left:27px; }
  .donut-area { grid-template-columns:165px 1fr;gap:23px; }
  .donut { width:158px; }
  .metric { padding:0 24px; }
  .tenant-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:1000px) {
  .topbar { padding:13px 20px;gap:14px; }
  .brand { font-size:22px;gap:10px; }
  .brand [data-system-title] { max-width:180px; }
  .brand-mark { width:40px;height:40px; }
  .brand-mark svg { width:25px;height:25px; }
  .topnav button { padding:10px 13px;font-size:15px;gap:7px; }
  .topnav svg { width:18px;height:18px; }
  .topbar .connection { display:none; }
  .class-label { display:none; }
  .class-toolbar select { width:190px; }
  .page-head { flex-wrap:wrap;gap:17px; }
  .head-actions { width:100%;max-width:none;justify-content:flex-start; }
  .quiz-select { width:245px; }
  .metric { padding:0 16px; }
  .metric-value b { font-size:38px; }
  .metric-label { font-size:13px;gap:7px; }
  .chart-grid { grid-template-columns:1fr 1fr;gap:24px; }
  .chart-section+.chart-section { padding-left:23px; }
  .donut-area { grid-template-columns:140px 1fr;gap:15px; }
  .donut { width:138px; }
  .donut strong { font-size:31px; }
  .legend-list span { font-size:14px; }
  .legend-list b { font-size:16px; }
  .legend-list { gap:17px; }
  .section-head h2 { font-size:21px; }
  .section-head { flex-wrap:wrap;gap:12px; }
  .roster-grid { grid-template-columns:1fr; }
  .roster-entry { grid-template-columns:52px 1fr 1fr auto; }
  .review-layout { grid-template-columns:230px minmax(0,1fr);gap:20px; }
  .grade-form { grid-template-columns:90px minmax(120px,1fr); }
  .grade-form button { grid-column:1/-1;justify-self:end; }
  .seat-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .student-shell { padding:26px 30px 35px; }
  .student-question .prompt { font-size:26px; }
  .option { padding:20px;font-size:21px; }
}
@media(max-width:760px) {
  body { font-size:16px; }
  .topbar { min-height:75px;flex-wrap:wrap;padding:12px 16px;gap:12px; }
  .brand { font-size:22px;gap:10px; }
  .brand-mark { width:38px;height:38px;border-radius:11px; }
  .topbar-utilities { margin-left:auto;gap:2px; }
  .topbar-utilities button.icon { width:38px;min-height:38px;padding:7px; }
  .topnav { order:3;width:100%;margin:0;justify-content:space-around;padding:4px;gap:2px; }
  .topnav button { flex:1;min-height:42px;padding:8px 10px;font-size:14px;gap:6px; }
  .topnav svg { width:17px;height:17px; }
  .content,.board-mode .content { padding:18px 16px 30px; }
  .class-toolbar { flex-wrap:wrap;gap:12px;margin-bottom:20px; }
  .class-toolbar .row { gap:6px; }
  .class-toolbar .row:last-child { width:100%; }
  .class-toolbar select { width:185px;min-height:42px;font-size:15px; }
  .class-toolbar button { min-height:41px;padding:8px 12px;font-size:14px; }
  .class-toolbar button.icon { width:41px;padding:8px; }
  .page-head { gap:15px;margin-bottom:20px; }
  .page-head h1 { font-size:27px; }
  .eyebrow { font-size:12px; }
  .head-actions { width:100%;max-width:100%;gap:8px; }
  .head-actions button { min-height:41px;padding:8px 11px;font-size:14px; }
  .head-actions button.icon { width:40px;min-height:40px;padding:8px; }
  .quiz-select { flex:1;min-width:170px;max-width:none;width:auto;min-height:42px;font-size:14px; }
  .head-actions .badge { font-size:12px;padding:4px 9px; }
  .badge { font-size:12px;padding:4px 10px; }
  .summary { grid-template-columns:1fr 1fr;gap:19px 0;padding:17px 0 19px;margin-bottom:22px; }
  .metric { padding:0 17px; }
  .metric:nth-child(odd) { padding-left:0;border:0; }
  .metric-label { font-size:13px; }
  .metric-label svg { width:19px;height:19px; }
  .metric-value b,.board-mode .metric-value b { font-size:35px; }
  .metric-value small { font-size:14px; }
  .chart-grid { grid-template-columns:1fr;gap:27px; }
  .chart-section+.chart-section { padding-left:0;border:0; }
  .section-head h2 { font-size:21px; }
  .section-head h2 svg { width:22px;height:22px; }
  .donut-area { grid-template-columns:150px 1fr;gap:24px;min-height:150px; }
  .donut { width:145px; }
  .donut strong { font-size:32px; }
  .legend-list span { font-size:15px; }
  .legend-list b { font-size:16px; }
  .bar-list { gap:14px;max-height:250px; }
  .bar-row { grid-template-columns:71px minmax(40px,1fr) 43px;gap:12px;font-size:14px; }
  .bar-row b { font-size:14px; }
  .bar-track { height:14px; }
  .legend-inline { font-size:12px;gap:10px; }
  .filter-input { width:185px;min-height:40px;font-size:13px; }
  .table-wrap,.board-mode .table-wrap { min-height:0;max-height:510px; }
  table,.board-mode table { font-size:14px; }
  th,.board-mode th { font-size:13px; }
  th,td,.board-mode th,.board-mode td { padding:12px 14px; }
  td.name-cell,.board-mode .answer-matrix td.name-cell { font-size:15px; }
  .name-cell small { font-size:13px; }
  .score-cell { font-size:17px; }
  .question-row { flex-wrap:wrap;padding:17px;gap:12px; }
  .question-index { width:35px;height:35px;font-size:18px;border-radius:10px; }
  .question-row p { font-size:18px;margin:11px 0; }
  .question-row .question-actions { margin-left:auto; }
  .question-options { font-size:14px;gap:8px 16px; }
  .question-row .grow { flex-basis:calc(100% - 48px); }
  .group-bar { grid-template-columns:85px minmax(40px,1fr) 58px;gap:12px; }
  .group-bar .group-name { font-size:16px; }
  .group-bar strong { font-size:21px; }
  .group-bar .bar-track { height:25px; }
  .group-bar>small { grid-column:2/-1;margin-top:-12px;font-size:13px; }
  .roster-entry { grid-template-columns:40px 1fr 1fr auto;gap:7px; }
  .roster-entry>strong { font-size:18px; }
  .roster-entry input { min-height:42px;padding:7px 9px;font-size:14px; }
  .roster-entry button.icon { width:34px;min-height:36px;padding:6px; }
  .review-layout { grid-template-columns:1fr;gap:23px; }
  .review-people { display:flex;overflow:auto;max-height:none;padding-bottom:7px; }
  .review-people button { min-width:158px;font-size:14px; }
  .review-people .badge { font-size:11px; }
  .review-detail-title { font-size:22px; }
  .grading-question h3 { font-size:18px; }
  .answer-block { padding:14px 16px;font-size:17px; }
  .grade-form { gap:12px; }
  .admin-main { padding:23px 16px 35px; }
  .tenant-grid { grid-template-columns:1fr;gap:20px; }
  .tenant-card { padding:22px;gap:20px; }
  .tenant-card h2 { font-size:22px; }
  .tenant-counts b { font-size:30px; }
  .entry-main { min-height:calc(100dvh - 75px);padding:35px 23px 55px; }
  .entry-content h1 { font-size:29px;margin-bottom:24px; }
  .entry-roles { gap:19px; }
  .role-entry { grid-template-columns:50px minmax(0,1fr) 35px;gap:17px;min-height:110px;padding:20px;border-radius:17px; }
  .role-entry strong { font-size:25px; }
  .entry-icon { width:50px;height:50px;border-radius:14px; }
  .entry-icon svg { width:28px;height:28px; }
  .entry-arrow { width:35px;height:35px; }
  .entry-arrow svg { width:20px;height:20px; }
  .login-main { min-height:calc(100dvh - 75px);padding:25px 19px; }
  .login-box { padding:27px;border-radius:17px; }
  .login-heading { gap:12px;margin-bottom:26px; }
  .login-heading h1 { font-size:25px; }
  .login-symbol { width:45px;height:45px;border-radius:12px; }
  .login-box .credential-input { font-size:17px; }
  .login-foot { font-size:13px; }
  .student-shell { padding:23px 19px 33px; }
  .student-shell>.page-head h1 { font-size:26px; }
  .student-head .eyebrow { font-size:12px; }
  .seat-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:10px; }
  .seat-grid.switch-seat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .seat-grid button { min-height:81px;padding:9px 7px; }
  .seat-grid button strong { font-size:22px; }
  .seat-grid button small { font-size:12px; }
  .student-quiz-card { align-items:flex-start;padding:24px 0; }
  .student-quiz-card h2 { font-size:21px; }
  .student-quiz-card>.primary { min-height:47px;font-size:15px; }
  .quiz-progress { gap:12px;margin-bottom:24px; }
  .quiz-progress b { max-width:65%;font-size:15px;white-space:normal; }
  .student-question .prompt { font-size:24px;margin:22px 0; }
  .answer-options { grid-template-columns:1fr;gap:14px; }
  .answer-options.visual-options { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
  .option { min-height:82px;padding:17px;font-size:20px;border-radius:14px; }
  .option.image-option { padding:12px;gap:10px; }
  .image-option .letter { width:34px;height:34px;font-size:18px;border-radius:9px; }
  .option-media { height:140px; }
  .option-caption { font-size:16px; }
  .option .letter { width:39px;height:39px;border-radius:10px;font-size:20px; }
  .student-answer-text { min-height:185px;font-size:22px;padding:16px; }
  .question-navigation { gap:12px; }
  .question-navigation button { min-width:110px;min-height:51px;font-size:17px; }
  .question-navigation>span { font-size:14px; }
  .question-dots button { width:37px;min-height:37px;font-size:13px; }
  .upload-box { min-height:145px;gap:13px; }
  .upload-box span { font-size:18px; }
  .upload-box>svg { width:29px;height:29px; }
  .result-score { gap:20px; }
  .result-score>b { font-size:52px; }
  .result-score>b small { font-size:19px; }
  .result-score h3 { font-size:18px; }
  .student-result-row h3 { font-size:19px; }
  .student-result-row p { font-size:16px; }
  dialog { width:95vw;padding:23px;border-radius:17px; }
  .modal-head { margin-bottom:23px;gap:12px; }
  .modal-head h2 { font-size:23px; }
  dialog label { font-size:15px; }
  dialog input,dialog textarea,dialog select { font-size:16px; }
  dialog button { min-height:45px;font-size:15px; }
  .form-grid { grid-template-columns:1fr;gap:18px; }
  .span-two { grid-column:auto; }
  .editor-option { grid-template-columns:49px minmax(0,1fr) 35px;gap:8px; }
  .editor-option button.icon { width:34px;min-height:37px;padding:6px; }
  .option-editor-text { grid-template-columns:minmax(0,1fr) 36px;gap:5px; }
  .option-image-upload { width:36px;min-height:39px;padding:7px; }
  .option-editor-image { width:135px;height:105px; }
  .editor-option .check { gap:8px; }
  .prompt-image-label { grid-template-columns:1fr;gap:10px; }
  .type-list { gap:13px 17px; }
  .empty h3 { font-size:22px; }
  #toast { font-size:15px;padding:13px 20px; }
}
@media(max-width:370px) {
  .brand [data-system-title] { max-width:128px; }
  .topnav button { padding:8px;font-size:13px;gap:4px; }
  .topnav svg { display:none; }
  .role-entry { padding:17px;gap:13px; }
  .role-entry strong { font-size:23px; }
  .student-shell { padding-left:16px;padding-right:16px; }
  .donut-area { grid-template-columns:133px 1fr;gap:15px; }
  .donut { width:132px; }
  .legend-list span { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none!important;scroll-behavior:auto!important; } }