* { box-sizing: border-box; }

:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202735;
  background: #f2f5f9;
  font-synthesis: none;
}

body { min-width: 320px; min-height: 100vh; margin: 0; }
.page { width: min(860px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 36px; }
.intro { margin-bottom: 25px; }
.home-link { display: inline-block; margin-bottom: 18px; color: #4057b0; font-size: .92rem; font-weight: 750; text-decoration: none; }
.home-link:hover { text-decoration: underline; }
.eyebrow { margin: 0; color: #5369b2; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 8px 0; font-size: clamp(2.4rem, 8vw, 4rem); letter-spacing: -.055em; }
.intro > p:last-child { max-width: 650px; color: #5e6878; line-height: 1.65; }
.practice-card { padding: clamp(20px, 5vw, 36px); border: 1px solid #e0e5ed; border-radius: 20px; background: #fff; box-shadow: 0 18px 50px #27365512; }
.toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.toolbar-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.field { display: grid; gap: 8px; }
label { font-weight: 750; }
select { min-height: 46px; min-width: 230px; padding: 0 36px 0 13px; border: 1px solid #cbd3df; border-radius: 9px; background: #fff; color: inherit; font: inherit; }
select:focus, button:focus-visible, .preposition-chip:focus-visible, .drop-slot:focus-visible { outline: 3px solid #ccd5ff; outline-offset: 2px; }
button { min-height: 46px; padding: 0 17px; border: 0; border-radius: 9px; background: #475fc0; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
button:hover { background: #34499f; }
button:disabled { cursor: not-allowed; opacity: .55; }
button.secondary { border: 1px solid #cbd3df; background: #fff; color: #354052; }
button.secondary:hover { background: #f3f5f9; }
.exercise-heading-row { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
h2 { margin: 0; font-size: 1.45rem; }
.hint { margin: 7px 0 16px; color: #697386; line-height: 1.5; }
.level-note { margin: -8px 0 16px; color: #7a8496; font-size: .85rem; line-height: 1.45; }
.progress-section { margin: 8px 0 18px; }
.progress-label { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 7px; color: #606b7d; font-size: .88rem; }
.progress-label strong { color: #354b9e; }
.progress-track { height: 10px; overflow: hidden; border-radius: 999px; background: #e9edf3; }
.progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #596fc4, #7888dd); transition: width .2s ease; }
.page-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.page-navigation-bottom { margin: 14px 0 0; }
.page-indicator { min-width: 110px; color: #697386; font-size: .9rem; font-weight: 700; text-align: center; }
.level-badge { padding: 7px 11px; border: 1px solid #d5ddf5; border-radius: 999px; background: #eff2ff; color: #4057b0; font-size: .85rem; font-weight: 800; }
.preposition-bank { display: flex; flex-wrap: wrap; gap: 9px; min-height: 46px; margin: 4px 0 4px; padding: 13px; border: 1px dashed #c7d0e0; border-radius: 12px; background: #f8f9fc; }
.preposition-bank.over { border-color: #475fc0; background: #e3e9ff; }
.preposition-chip { min-height: 38px; padding: 0 14px; border: 1px solid #b8c4ed; border-radius: 999px; background: #fff; color: #354b9e; font-size: .95rem; }
.preposition-chip:hover { background: #edf0ff; }
.preposition-chip.selected { outline: 3px solid #cbd4ff; background: #e9edff; }
.preposition-chip.used { display: none; }
.interaction-status { min-height: 1.4em; margin: 8px 2px 16px; color: #687386; font-size: .9rem; }
.sentence-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: exercise; }
.sentence-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(92px, auto); align-items: center; gap: 10px; padding: 15px 16px; border: 1px solid #e5e9f0; border-radius: 12px; background: #fff; }
.sentence-number { color: #8b95a8; font-size: .9rem; font-weight: 800; }
.sentence-text { line-height: 1.7; }
.drop-slot { display: inline-flex; min-width: 86px; min-height: 34px; align-items: center; justify-content: center; margin: 0 3px; padding: 2px 10px; border: 1px dashed #9eacd6; border-radius: 8px; background: #f0f3ff; color: #354b9e; font: inherit; font-weight: 800; vertical-align: middle; cursor: pointer; }
.drop-slot:not(.filled) { border-color: #c7ccd5; background: #f1f2f4; color: #7a8391; font-weight: 600; }
.drop-slot.over { border-color: #475fc0; background: #e3e9ff; }
.drop-slot.filled { border-style: solid; background: #e8edff; }
.drop-slot.filled[draggable="true"] { cursor: grab; }
.drop-slot.filled[draggable="true"]:active { cursor: grabbing; }
.drop-slot:disabled { cursor: default; opacity: 1; }
.row-result { min-width: 92px; font-size: .83rem; font-weight: 800; text-align: right; }
.row-result.correct { color: #18734a; }
.row-result.incorrect { color: #b33e38; }
.sentence-row.is-correct { border-color: #b8e1ce; background: #f8fffb; }
.sentence-row.is-incorrect { border-color: #f0c1bd; background: #fffafa; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.result-summary { min-height: 1.5em; margin: 17px 0 0; font-weight: 750; }
.storage-note { margin: 8px 0 0; color: #788397; font-size: .84rem; }
footer { padding: 20px 4px; color: #687386; font-size: .93rem; }

@media (max-width: 600px) {
  .page { padding-top: 28px; }
  .toolbar { align-items: flex-start; flex-direction: column; }
  .toolbar-actions { width: 100%; align-items: flex-end; flex-direction: column; }
  .toolbar-actions button { width: min(100%, 210px); }
  select { width: 100%; }
  .field { width: 100%; }
  .sentence-row { grid-template-columns: 24px minmax(0, 1fr); align-items: start; padding: 13px; }
  .row-result { grid-column: 2; text-align: left; }
  .drop-slot { min-width: 74px; }
  .actions { flex-direction: column; }
  .actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
@media print {
  body { background: #fff; }
  .page { width: 100%; padding: 0; }
  .home-link, .toolbar, .preposition-bank, .interaction-status, .actions, .storage-note, footer { display: none !important; }
  .practice-card { padding: 0; border: 0; box-shadow: none; }
}