:root {
  color-scheme: light;
  --page: #f3f6fa;
  --paper: #fff;
  --navy: #111f3a;
  --ink: #15243c;
  --muted: #50617a;
  --line: #dce4ee;
  --blue: #214ec8;
  --blue-soft: #edf3ff;
  --amber: #ffcf61;
  --green: #176448;
  --red: #9b3440;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
button, select, input { font: inherit; }
button, select { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, select:focus-visible, input:focus-visible + span {
  outline: 3px solid #3263e1;
  outline-offset: 3px;
}
[hidden] { display: none !important; }
.shell { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }

.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 68px; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 780; letter-spacing: -.025em; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--navy); flex: none; }
.brand-mark span { width: 18px; height: 23px; background: var(--amber); clip-path: polygon(58% 0, 3% 57%, 45% 57%, 35% 100%, 98% 37%, 52% 37%); }
.header-handle { color: var(--muted); font-size: .84rem; font-weight: 600; }

.hero {
  position: relative;
  display: flex;
  min-height: 206px;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  margin-block: 25px;
  padding: 26px 34px;
  border-radius: 20px;
  color: #fff;
  background: radial-gradient(ellipse at 90% 40%, #24487d 0, transparent 52%), var(--navy);
}
.hero-content { position: relative; z-index: 1; }
.hero h1 { margin: 0; font-size: clamp(2.15rem, 4.1vw, 3.55rem); line-height: 1.03; letter-spacing: -.065em; }
.hero p { margin: 11px 0 19px; color: #d7e4fb; font-size: 1rem; }
.hero-count { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 7px; background: #ffffff13; color: #f1f5ff; font-weight: 650; font-size: .8rem; }
.hero-count > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }

.hero-art { width: 360px; height: 206px; position: absolute; right: 42px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.hero-art::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image: radial-gradient(circle, #b3d2ff70 1px, transparent 1.5px);
  background-size: 16px 16px;
  mask-image: radial-gradient(ellipse, #000 10%, transparent 74%);
}
.orbit { position: absolute; left: 50%; top: 50%; width: 210px; height: 73px; border: 1px solid #9ac5ff9c; border-radius: 50%; transform: translate(-50%, -50%) rotate(var(--rotation)); }
.orbit::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--electron); left: 20%; top: 8%; box-shadow: 0 0 13px var(--electron); }
.orbit-one { --rotation: -15deg; --electron: #dbeaff; }
.orbit-two { --rotation: 45deg; --electron: #ffd375; }
.orbit-three { --rotation: -74deg; --electron: #83b8ff; }
.nucleus { position: absolute; width: 23px; height: 23px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 36% 28%, #fff0b7, #ffd06c 42%, #ec9736 85%); border-radius: 50%; box-shadow: 0 0 29px #ffd57665; }
.star { position: absolute; color: #a8c9f3; font: 400 1rem/1 system-ui, sans-serif; }
.star-one { top: 25%; left: 15%; }
.star-two { top: 76%; right: 21%; }
.star-three { top: 19%; right: 15%; font-size: .7rem; }

.workspace { display: grid; grid-template-columns: minmax(240px, .32fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.sidebar { display: grid; gap: 16px; min-width: 0; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 2px 5px #10234605; }
.filters, .progress-panel { padding: 19px; }
.sidebar h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: .97rem; letter-spacing: -.02em; }
.filter-icon { display: inline-block; width: 15px; height: 13px; background: var(--blue); clip-path: polygon(0 0, 100% 0, 100% 16%, 0 16%, 0 0, 15% 42%, 85% 42%, 85% 58%, 15% 58%, 15% 42%, 32% 84%, 68% 84%, 68% 100%, 32% 100%, 32% 84%); }
.exam-field, .answer-options { border: 0; padding: 0; margin: 0; min-width: 0; }
.exam-field { margin-top: 19px; }
.exam-field legend, .field-label { display: block; color: var(--muted); font-size: .79rem; font-weight: 650; margin: 0 0 7px; padding: 0; }
.exam-switch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; border: 1px solid #e0e7f1; padding: 4px; border-radius: 9px; background: #f2f5fa; }
.exam-switch label, .option { position: relative; }
.exam-switch input, .option input { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; opacity: 0; }
.exam-switch span { display: grid; place-items: center; min-height: 37px; padding-inline: 8px; border-radius: 6px; color: var(--muted); cursor: pointer; font-size: .84rem; font-weight: 760; }
.exam-switch input:checked + span { color: #fff; background: var(--blue); }
.field-label { margin-top: 16px; }
.select-wrap { position: relative; }
.select-wrap::after, .chevron { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.select-wrap::after { position: absolute; top: calc(50% - 3px); right: 13px; pointer-events: none; }
select { appearance: none; width: 100%; min-height: 44px; padding: 8px 28px 8px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; cursor: pointer; font-size: .84rem; }
.progress-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; }
.progress-count { font-size: .87rem; font-weight: 760; font-variant-numeric: tabular-nums; color: var(--blue); white-space: nowrap; }
progress { display: block; width: 100%; height: 8px; margin-top: 13px; appearance: none; border: 0; border-radius: 99px; overflow: hidden; background: #e8eef7; }
progress::-webkit-progress-bar { background: #e8eef7; }
progress::-webkit-progress-value { background: var(--blue); border-radius: 99px; }
progress::-moz-progress-bar { background: var(--blue); border-radius: 99px; }
.progress-detail { margin: 9px 0 0; color: var(--muted); font-size: .79rem; line-height: 1.4; }
.question-map { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 13px; }
.map-button { min-width: 38px; min-height: 38px; border-radius: 7px; background: #fff; border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: .82rem; }
.map-button[aria-current="step"] { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); color: var(--blue); background: var(--blue-soft); }
.map-button.is-answered { background: #eaf6ee; color: var(--green); }
.map-button:hover { border-color: var(--blue); }

.question-panel { padding: 26px 28px 0; }
.question-meta, .question-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.question-meta { justify-content: space-between; gap: 8px 14px; }
.tag { padding: 5px 9px; border-radius: 6px; font-size: .75rem; line-height: 1.25; font-weight: 740; }
.exam-tag { background: #eaf0ff; color: #2349aa; }
.topic-tag { background: #f0f3f7; color: #41516a; }
.question-position { color: var(--muted); font-size: .83rem; font-weight: 650; white-space: nowrap; }
.question-panel h2 { margin: 14px 0 8px; font-size: clamp(1.35rem, 2.5vw, 1.9rem); letter-spacing: -.044em; line-height: 1.16; }
.question-panel h2:focus { outline: none; }
.question-prompt, .question-ask { font-size: .95rem; line-height: 1.56; }
.question-prompt { margin: 0 0 7px; color: #364861; }
.question-ask { margin: 0 0 16px; font-weight: 700; }
.answer-options { display: grid; gap: 7px; }
.option { display: block; }
.option-content { display: flex; align-items: center; gap: 11px; min-height: 46px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); cursor: pointer; font-size: .92rem; line-height: 1.38; }
.option-letter { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 6px; background: #eef2f7; color: #495d79; font-weight: 750; font-size: .83rem; }
.option input:not(:disabled) + .option-content:hover, .option input:checked + .option-content { border-color: var(--blue); background: var(--blue-soft); }
.option input:checked + .option-content .option-letter { background: var(--blue); color: #fff; }
.option input:disabled + .option-content { cursor: default; }
.option.is-correct .option-content { border-color: #75b69a !important; background: #eaf6ee !important; }
.option.is-correct .option-letter { background: var(--green) !important; color: #fff; }
.option.is-incorrect .option-content { border-color: #ce929c !important; background: #fdf0f2 !important; }
.option.is-incorrect .option-letter { background: var(--red) !important; color: #fff; }
.option-state { margin-inline-start: auto; padding-left: 6px; font-size: .75rem; font-weight: 750; color: var(--green); }
.option.is-incorrect .option-state { color: var(--red); }

.answer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 8px 14px; border: 1px solid transparent; border-radius: 8px; font-size: .86rem; font-weight: 730; }
.check-button { color: #fff; background: var(--blue); }
.check-button:not(:disabled):hover { background: #183fae; }
.check-button:disabled { color: #4b5e7a; background: #e6edf8; }
.check-button span { font-size: 1.05rem; }
.solution-button { border-color: #b4c7f1; color: #2349aa; background: var(--blue-soft); }
.solution-button:hover { border-color: var(--blue); }
.solution-button[aria-expanded="true"] .chevron { transform: translateY(2px) rotate(225deg); }
.feedback { margin-top: 15px; padding: 10px 12px; border-radius: 8px; font-size: .88rem; line-height: 1.45; font-weight: 670; background: #eaf6ee; color: var(--green); }
.feedback.is-incorrect { background: #fdf0f2; color: var(--red); }
.feedback:focus { outline: none; }

.solution { margin-top: 17px; padding: 16px; border: 1px solid #d7e2f6; border-radius: 10px; background: #f6f9ff; }
.solution h3 { margin: 0 0 10px; font-size: 1rem; }
.solution ol { padding-left: 23px; margin: 0; }
.solution li { padding-left: 4px; margin-bottom: 10px; color: #364861; font-size: .88rem; line-height: 1.55; }
.solution li:last-child { margin-bottom: 0; }
.solution li::marker { color: var(--blue); font-weight: 750; }
.solution strong { display: block; color: var(--ink); }
.solution p { margin: 2px 0 0; }

.question-navigation { display: flex; justify-content: space-between; gap: 8px; margin-top: 17px; padding: 9px 0; border-top: 1px solid #e7ecf3; }
.nav-button { min-height: 40px; padding: 4px 3px; border: 0; border-radius: 4px; background: transparent; color: var(--blue); font-size: .83rem; font-weight: 710; }
.nav-button span { padding-inline: 2px; }
.nav-button:disabled { color: #68758a; }
.nav-button:not(:disabled):hover { text-decoration: underline; }
.site-footer { display: flex; justify-content: space-between; gap: 7px 14px; flex-wrap: wrap; margin-block: 18px; color: var(--muted); font-size: .76rem; }
.site-footer span:first-child { font-weight: 680; }

@media (max-width: 800px) {
  .shell { width: calc(100% - 36px); }
  .workspace { grid-template-columns: minmax(190px, .42fr) minmax(0, 1fr); gap: 14px; }
  .hero-art { right: -20px; }
  .question-panel { padding-inline: 19px; }
  .filters, .progress-panel { padding: 14px; }
}

@media (max-width: 640px) {
  .shell { width: calc(100% - 28px); }
  .header-inner { min-height: 56px; }
  .brand { font-size: .91rem; gap: 7px; }
  .brand-mark { width: 31px; height: 31px; border-radius: 8px; }
  .header-handle { font-size: .75rem; }
  .hero { margin-block: 13px; min-height: 144px; padding: 17px; border-radius: 14px; }
  .hero h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  .hero p { margin: 7px 0 12px; font-size: .84rem; }
  .hero-count { padding: 5px 8px; font-size: .73rem; }
  .hero-art { right: -118px; opacity: .42; transform: translateY(-50%) scale(.63); }
  .workspace { grid-template-columns: 1fr; gap: 11px; }
  .sidebar { gap: 9px; }
  .panel { border-radius: 12px; }
  .filters { display: grid; grid-template-columns: minmax(101px, .7fr) minmax(0, 1.3fr); gap: 0 11px; padding: 11px 13px; }
  .filters h2 { grid-column: 1 / -1; margin-bottom: 7px; }
  .exam-field { grid-column: 1; grid-row: 2 / span 2; margin: 0; }
  .field-label { grid-column: 2; grid-row: 2; margin: 0 0 5px; }
  .exam-field legend { margin-bottom: 5px; }
  .exam-switch { padding: 2px; }
  .exam-switch span { min-height: 38px; }
  .select-wrap { grid-column: 2; grid-row: 3; }
  .progress-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 10px 13px; }
  .progress-heading, progress, .progress-detail { grid-column: 1; }
  progress { margin-top: 5px; height: 6px; }
  .progress-detail { margin-top: 4px; font-size: .71rem; }
  .question-map { grid-column: 2; grid-row: 1 / span 3; margin: 0; gap: 4px; max-width: 175px; }
  .map-button { min-width: 36px; min-height: 44px; }
  .question-panel { padding: 15px 13px 0; }
  .question-panel h2 { margin-top: 11px; }
  .question-prompt, .question-ask { font-size: .89rem; }
  .option-content { font-size: .87rem; min-height: 47px; gap: 8px; }
  .option-state { font-size: .67rem; }
  .site-footer { margin-block: 13px; }
}

@media (max-width: 350px) {
  .shell { width: calc(100% - 20px); }
  .question-map { max-width: 138px; }
  .map-button { min-width: 31px; }
}

.header-links { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 2px 14px; }
.header-links a { color: var(--blue); font-size: .8rem; font-weight: 700; text-decoration: none; padding-block: 7px; }
.header-links a:hover { text-decoration: underline; }
.header-links a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.session-notice { padding: 15px; margin-bottom: 15px; color: var(--muted); font-size: .9rem; }
.migration-panel p { margin: 0 0 7px; }
.migration-panel p:last-child { margin: 8px 0 0; }
.teacher-hero { min-height: 154px; }
.teacher-hero p { margin-bottom: 0; }
.teacher-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.teacher-filter { width: min(215px, 50%); }
.teacher-filter .field-label { margin-top: 0; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.metric { padding: 14px 16px; }
.metric dt { font-size: .82rem; font-weight: 650; color: var(--muted); }
.metric dd { margin: 5px 0 0; font-size: clamp(1.1rem, 3vw, 1.65rem); font-weight: 760; color: var(--blue); }
.teacher-grid { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.teacher-panel { padding: 17px; }
.teacher-panel h2 { margin: 0 0 12px; font-size: 1.05rem; }
.empty-state { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.student-results details { border-bottom: 1px solid var(--line); padding-block: 8px; }
.student-results details:last-child { border-bottom: 0; }
.student-results summary { display: grid; grid-template-columns: 1fr auto; gap: 8px; cursor: pointer; }
.student-results summary strong { overflow-wrap: anywhere; }
.student-results summary strong::before { content: '▸'; display: inline-block; margin-inline-end: 6px; color: var(--blue); }
.student-results details[open] summary strong::before { content: '▾'; }
.student-email, .question-analysis-topic, .question-analysis-count { display: block; margin-top: 3px; color: var(--muted); font-size: .77rem; overflow-wrap: anywhere; }
.student-score { white-space: nowrap; align-self: start; color: var(--blue); font-size: .8rem; font-weight: 720; }
.student-results ul { padding-left: 20px; margin: 8px 0 0; }
.student-results li { padding-block: 5px; font-size: .83rem; }
.student-results li span { display: block; margin-top: 3px; color: var(--muted); }
.question-results { margin: 0; padding-left: 23px; }
.question-results li { padding: 0 0 11px 3px; font-size: .88rem; }
.question-results li::marker { color: var(--blue); font-weight: 700; }
.question-results progress { margin-top: 6px; height: 5px; }
.question-results progress::-webkit-progress-value { background: #b24c59; }
.question-results progress::-moz-progress-bar { background: #b24c59; }

@media (max-width: 640px) {
  .header-links { gap: 1px 8px; }
  .header-links a { font-size: .71rem; }
  .teacher-grid { grid-template-columns: 1fr; gap: 10px; }
  .metrics { gap: 7px; }
  .metric { padding: 9px; }
  .metric dt { font-size: .7rem; }
}

.login-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.login-card { display: flex; flex-direction: column; align-items: flex-start; padding: 21px; }
.login-card h2 { margin: 0; font-size: 1.2rem; }
.login-card p { margin: 7px 0 17px; color: var(--muted); line-height: 1.5; }
.login-card .button { margin-top: auto; }
.login-card .button, .login-actions .button { text-decoration: none; }
.login-card .button:focus-visible, .login-actions .button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.login-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 640px) {
  .login-grid { grid-template-columns: 1fr; gap: 10px; }
  .login-card { padding: 16px; }
}

.logout-form { display:inline; margin:0; }
.header-links .logout-form button {
  background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer;
}
.header-links .logout-form button:hover { text-decoration:underline; }