.oge-test-page { --oge: #0f8b8d; --oge-dark: #086467; }
.oge-test-page .test-hero { background: radial-gradient(circle at 85% 15%, rgba(15,139,141,.13), transparent 28%), linear-gradient(180deg,#eefbfa,#fff); }
.oge-test-page .button-start { background: var(--oge); }
.oge-test-page .button-start:hover { background: var(--oge-dark); }
.oge-scale-note { margin: 10px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.oge-context-card { border-color: #9ed8d5; background: linear-gradient(145deg,#effcfb,#fff); }
.oge-context-card .wheel-context-grid { display:block; }
.oge-context-card .wheel-context-figures { display:grid; width:min(100%,920px); grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:24px; margin:24px auto 6px; }
.oge-context-card .wheel-context-figures figure { position:relative; overflow:hidden; margin:0; border-radius:18px; background:#fff; text-align:center; }
.oge-context-card .wheel-context-figures img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:contain; padding:8px; margin:auto; border:1px solid rgba(116,138,170,.24); border-radius:18px; }
.oge-context-card .wheel-context-figures figcaption { margin-top:8px; color:var(--muted); font-size:.92rem; }
.oge-diagram { width: min(100%,860px); height: auto; display: block; margin: 24px auto; color: #214d72; }
.oge-diagram path, .oge-diagram circle { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.oge-diagram text { fill: currentColor; stroke: none; font: 700 18px Inter,system-ui,sans-serif; text-anchor: middle; }
.oge-diagram .dimension { stroke-width: 2; }
.oge-diagram .mark { stroke-width: 4; }
.oge-diagram .arc { stroke: var(--oge); stroke-width: 3; }
.oge-diagram .right-angle { stroke-width: 2; }
.oge-diagram .point { fill: currentColor; stroke: none; }
.oge-diagram .dash { stroke-dasharray: 7 7; }
.wheel-diagram { max-width: 420px; }
.number-line { max-width: 850px; margin-block: 18px; }
.number-line path { stroke-width: 3; }
.number-line circle { fill: var(--oge); stroke: none; }
.geometry-diagram { max-width: 620px; max-height: 370px; }
.geometry-diagram--wide { max-width: 740px; }
.geometry-diagram--reduced { max-width: 372px; }
.geometry-diagram--wide.geometry-diagram--reduced { max-width: 444px; }
.geometry-diagram--tall { max-height: 390px; }
.grid-angle .grid, .graph .grid { stroke: #c6d8e4; stroke-width: 1; }
.grid-angle .curve, .graph .curve { stroke: var(--oge); stroke-width: 4; }
.graph .axes { stroke-width: 2.2; }
.table-scroll { overflow-x: auto; margin: 18px 0; }
.tyre-table { width: min(100%,760px); margin-inline: auto; border-collapse: collapse; font-size: .92rem; text-align: center; }
.tyre-table th, .tyre-table td { padding: 9px 12px; border: 1px solid #abc7d7; }
.tyre-table thead th { background: #e5f7f6; color: var(--secondary); }
.tyre-table tbody th { background: #f2f8fb; color: var(--secondary); }
.math-fraction { width: 1.3em; display: inline-grid; vertical-align: middle; line-height: 1; text-align: center; }
.math-fraction span:first-child { padding-bottom: 2px; border-bottom: 1px solid currentColor; }
.math-fraction span:last-child { padding-top: 2px; }
.inline-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 16px 0; padding: 0; list-style-position: inside; }
.inline-options li, .interval-grid div { padding: 12px 14px; border: 1px solid #c9dbe6; border-radius: 12px; background: #f7fbfd; color: var(--secondary); font-weight: 700; }
.graph-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.graph-grid figure { margin: 0; padding: 10px; border: 1px solid #cbdde8; border-radius: 14px; background: #fff; text-align: center; }
.graph-grid figcaption { color: var(--secondary); font-weight: 850; }
.graph { margin: 0 auto; }
.interval-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 18px 0; }
.interval-grid div { display: flex; gap: 10px; align-items: center; }
.interval-grid b { color: var(--oge-dark); }
.condition-list { margin: 12px 0 16px; padding-left: 25px; list-style: decimal; }
.condition-list li { margin-bottom: 8px; padding-left: 5px; }
.statement-options { display: grid; gap: 13px; margin: 20px 0 22px; }
.statement-options > div { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; align-items: start; color: #284d69; }
.statement-options b { color: var(--oge-dark); }
.work-label { display: grid; gap: 8px; margin: 18px 0; color: var(--secondary); font-weight: 800; }
.solution-input { width: 100%; resize: vertical; padding: 14px 15px; border: 1px solid #bdd2e1; border-radius: 13px; background: #fff; color: var(--ink); line-height: 1.5; }
.quality-grid { margin: 18px 0 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 0; border: 0; }
.quality-grid legend { grid-column: 1 / -1; margin-bottom: 5px; color: var(--secondary); font-weight: 850; }
.quality-grid label { min-height: 72px; display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: center; padding: 13px; border: 1px solid #bdd2e1; border-radius: 13px; background: #fff; color: #284d69; font-size: .88rem; font-weight: 720; cursor: pointer; }
.quality-grid input { width: 18px; height: 18px; margin: 0; accent-color: var(--oge); }
.quality-grid label:hover, .quality-grid label:has(input:checked) { border-color: var(--oge); background: #e9f8f7; }
.oge-result-numbers { grid-template-columns: repeat(3,minmax(0,1fr)); }
.task-card.is-partial { border-color: #d5ad55; background: #fffaf0; }

html[data-theme="dark"] .oge-test-page .test-hero { background: radial-gradient(circle at 85% 15%, rgba(100,210,207,.13), transparent 28%), linear-gradient(180deg,#0b2529,#081722); }
html[data-theme="dark"] .oge-context-card { border-color: #285c5c; background: linear-gradient(145deg,#113536,#102431); }
html[data-theme="dark"] .tyre-table th, html[data-theme="dark"] .tyre-table td { border-color: var(--line); }
html[data-theme="dark"] .tyre-table thead th, html[data-theme="dark"] .tyre-table tbody th { background: #153d3d; }
html[data-theme="dark"] .inline-options li, html[data-theme="dark"] .interval-grid div, html[data-theme="dark"] .graph-grid figure, html[data-theme="dark"] .solution-input, html[data-theme="dark"] .quality-grid label { border-color: var(--line); background: var(--surface); color: var(--muted); }
html[data-theme="dark"] .quality-grid label:hover, html[data-theme="dark"] .quality-grid label:has(input:checked) { border-color: #64d2cf; background: #153d3d; }
html[data-theme="dark"] .oge-diagram { color: #b9d9e8; }
html[data-theme="dark"] .statement-options > div { color: var(--muted); }
html[data-theme="dark"] .grid-angle .grid, html[data-theme="dark"] .graph .grid { stroke: #345366; }
html[data-theme="dark"] .task-card.is-partial { border-color: #8c6c35; background: #302817; }

@media (max-width: 900px) {
  .wheel-context-grid, .quality-grid { grid-template-columns: 1fr; }
  .oge-context-card .wheel-context-figures { width:min(100%,760px); margin-inline:auto; }
}
@media (max-width: 760px) {
  .inline-options, .graph-grid, .interval-grid { grid-template-columns: 1fr; }
  .oge-context-card .wheel-context-figures { grid-template-columns:1fr; }
  .graph-grid { max-width: 340px; margin-inline: auto; }
  .oge-result-numbers { grid-template-columns: 1fr; }
  .tyre-table { min-width: 600px; }
}
@media (max-width: 430px) {
  .quality-grid label { min-height: 62px; }
}


.task-illustration { display:grid; gap:16px; margin:14px 0 6px; }
.task-illustration--dual { grid-template-columns: repeat(2, minmax(0,1fr)); align-items:center; }
.task-illustration--stack { grid-template-columns: 1fr; }
.task-illustration figure, .task-watermark { position:relative; margin:0; }
.task-illustration img { width:100%; height:auto; display:block; border-radius:18px; border:1px solid rgba(116,138,170,.24); background:#fff; }
.task-illustration figcaption { margin-top:8px; color:var(--muted); font-size:.92rem; text-align:center; }
.wheel-figure { overflow:hidden; border-radius:18px; background:#fff; }
.wheel-figure img { aspect-ratio: 16 / 10; object-fit:contain; padding:8px; }
.latex-options { list-style:none; padding:0; display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:10px; }
.latex-options li { background:#f6f9fc; border:1px solid rgba(116,138,170,.25); border-radius:14px; padding:10px 12px; text-align:center; font-weight:600; }
.math-like { font-family: "Times New Roman", Georgia, serif; font-size: 1.1rem; }
.task-formula { max-width: 620px; margin: 8px auto 16px; overflow-x: auto; }
.graph-match-scroll { width:100%; overflow-x:auto; margin:24px 0 10px; padding-bottom:8px; }
.graph-match-diagram { width:min(85%,892px); max-width:892px; margin:0 auto; }
.graph-formulas { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:760px; margin-inline:auto; padding:0; list-style:none; }
.interval-diagram-image { max-width: 920px; }
.tangent-diagram { width: min(100%,255px); margin: 18px auto; }
.tangent-grid .grid { stroke: rgba(76,97,130,.38); stroke-width: 1; fill:none; }
.tangent-grid .axes { stroke: currentColor; stroke-width: 4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.oge-scale-link { margin:.8rem 0 0; font-weight:600; }
.oge-scale-link a { color:inherit; }
.score-scale-inline { margin-top:24px; padding:clamp(20px,4vw,34px); border-radius:24px; background:#f7fbff; border:1px solid rgba(116,138,170,.22); text-align:left; }
.score-scale-inline .score-scale-title { margin:0 auto 20px; text-align:center; }
.score-scale-inline .score-scale-title small { display:block; margin-top:8px; color:var(--muted); font-size:.72em; font-weight:650; }
.score-scale-inline .score-table { width:100%; max-width:760px; margin-inline:auto; }
.score-scale-inline .scale-source-link { margin:18px 0 0; text-align:center; font-weight:750; }
.score-scale-inline .scale-source-link a { color:var(--primary-dark); text-decoration:underline; text-underline-offset:4px; }
.result-honesty-note { max-width:880px; margin:18px auto 0; padding:16px 18px; border-left:4px solid var(--oge); border-radius:12px; background:#eef9f8; color:#284d69; text-align:left; }
.check-button.is-locked, .check-button:disabled { opacity:.65; cursor:not-allowed; }
html[data-theme="dark"] .score-scale-inline { background:#102431; border-color:var(--line); }
html[data-theme="dark"] .result-honesty-note { background:#153d3d; color:var(--muted); }
@media (max-width: 760px) {
  .task-illustration--dual, .oge-context-card .task-illustration--dual, .latex-options, .graph-formulas { grid-template-columns:1fr; }
  .oge-diagram { max-width:100%; margin-block:18px; }
  .graph-match-scroll { margin-inline:-6px; width:calc(100% + 12px); }
  .graph-match-diagram { width:663px; max-width:none; margin:0; }
  .interval-diagram-image { width:100%; }
  .tangent-diagram { width:min(68vw,232px); }
  .score-scale-inline { padding:18px 12px; margin-inline:-6px; }
  .score-scale-inline .score-table { min-width:590px; }
  .result-honesty-note { padding:14px; }
  .geometry-diagram--reduced, .geometry-diagram--wide.geometry-diagram--reduced { width:min(60%,444px); }
}
@media (max-width: 430px) {
  .statement-options > div { grid-template-columns:24px minmax(0,1fr); gap:7px; }
  .task-illustration img { border-radius:13px; }
}