:root {
  --navy: #071633;
  --ink: #12223f;
  --muted: #61708c;
  --blue: #2b5cff;
  --violet: #8a44ea;
  --orange: #ff9e36;
  --aqua: #53bcc3;
  --line: #d7e0f1;
  --soft-blue: #f2f6ff;
  --soft-violet: #f6f2ff;
  --soft-aqua: #effbfb;
  font-family: Inter, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }

@page { size: A4; margin: 0; }

body {
  margin: 0;
  background: #e9edf5;
  font-size: 10pt;
  line-height: 1.35;
}

.screen-bar {
  display: flex;
  max-width: 210mm;
  margin: 0 auto;
  padding: 14px 0;
  align-items: center;
  justify-content: space-between;
}

.screen-bar a { color: var(--blue); font-weight: 700; text-decoration: none; }

.screen-bar button {
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.sheet {
  position: relative;
  width: 210mm;
  height: 297mm;
  margin: 0 auto 16px;
  padding: 0 14mm 9mm;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 30px rgba(20, 46, 102, 0.15);
  break-after: page;
}

.sheet-topbar { height: 3mm; margin: 0 -14mm 5mm; background: var(--blue); }

.sheet-header { display: flex; align-items: flex-start; justify-content: space-between; }
.sheet-header img { width: 40mm; height: auto; }
.sheet-kind { text-align: right; }
.sheet-kind strong { display: block; color: var(--blue); font-size: 10pt; letter-spacing: 0.05em; text-transform: uppercase; }
.sheet-kind span { color: var(--muted); font-size: 9pt; }

h1 { margin: 2mm 0 1mm; color: var(--navy); font-size: 24pt; line-height: 1.1; }
h2 { margin: 0 0 1.6mm; color: var(--blue); font-size: 8.5pt; letter-spacing: 0.06em; text-transform: uppercase; }
p { margin: 0; }

.objective { color: var(--muted); font-size: 9.5pt; }
.objective b { color: var(--ink); }

.student { display: grid; margin: 4mm 0 4mm; grid-template-columns: 2.4fr 1fr 1fr; column-gap: 6mm; }
.student label { color: var(--blue); font-size: 8pt; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.student span { display: block; height: 6mm; border-bottom: 1px solid #b9c6e4; }

.mission {
  display: grid;
  margin-bottom: 3.5mm;
  padding: 3mm 5mm;
  border: 1px solid #cfeff0;
  border-radius: 4mm;
  background: var(--soft-aqua);
  grid-template-columns: 22mm 1fr;
  align-items: center;
}

.mission h2 { margin: 0; color: var(--violet); }
.mission ol { display: grid; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(3, 1fr); gap: 4mm; }
.mission li { display: flex; align-items: center; gap: 2.5mm; }
.mission i {
  display: grid; width: 6.5mm; height: 6.5mm; flex: none; border: 1px solid var(--line);
  border-radius: 50%; background: #fff; color: var(--blue); font-size: 8pt; font-style: normal; font-weight: 800; place-items: center;
}
.mission strong { display: block; font-size: 8.5pt; }
.mission small { color: var(--muted); font-size: 7.5pt; }

.facts { display: grid; margin: 0 0 3.5mm; padding: 0; list-style: none; grid-template-columns: repeat(4, 1fr); gap: 3mm; }
.facts li { padding: 1.8mm 3mm; border-radius: 2.5mm; background: var(--soft-blue); }
.facts span { display: block; color: var(--muted); font-size: 7pt; text-transform: uppercase; letter-spacing: 0.05em; }
.facts strong { font-size: 8.5pt; }

.situation { display: grid; margin-bottom: 3.5mm; grid-template-columns: 1fr 78mm; gap: 5mm; align-items: center; }
.situation p { font-size: 9.5pt; }
.situation .question { margin: 1.5mm 0; font-weight: 800; }
.data { margin: 0; padding-left: 4.5mm; font-size: 9pt; }
.figures { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 2mm; }
.figures figure { margin: 0; padding: 1.5mm; border: 1px solid var(--line); border-radius: 3mm; text-align: center; }
.figures svg { width: 100%; height: auto; font-size: 12px; fill: var(--ink); }
.figures figcaption { color: var(--muted); font-size: 7.5pt; }

.hint-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; }
.hint-cards article { display: flex; padding: 2.2mm 3mm; border: 1px solid var(--line); border-radius: 3mm; align-items: center; gap: 2.5mm; }
.hint-cards i { width: 4.2mm; height: 4.2mm; flex: none; border-radius: 50%; }
.d-blue { background: var(--blue); } .d-violet { background: var(--violet); } .d-orange { background: var(--orange); } .d-aqua { background: var(--aqua); }
.hint-cards strong { display: block; font-size: 8.5pt; }
.hint-cards small { color: var(--muted); font-size: 7.5pt; }
.hints { margin-bottom: 3.5mm; }

.work { margin-bottom: 3.5mm; }
.work-heading { display: flex; align-items: baseline; justify-content: space-between; }
.work-heading h2 { margin-bottom: 1.6mm; color: var(--navy); font-size: 11pt; }
.work-heading span { color: var(--muted); font-size: 8pt; }

table { width: 100%; border: 1px solid var(--line); border-collapse: separate; border-spacing: 0; border-radius: 3mm; overflow: hidden; }
thead th { padding: 2mm 3mm; background: var(--soft-blue); color: var(--navy); font-size: 8pt; letter-spacing: 0.05em; text-align: left; text-transform: uppercase; }
tbody td, tbody th { height: var(--row-h, 13mm); padding: 0 3mm; border-top: 1px solid var(--line); font-size: 9pt; text-align: left; }
tbody th { width: 46mm; font-weight: 800; }
tbody td:first-child { width: 11mm; color: var(--muted); font-weight: 800; }
tbody td + th + td { border-left: 1px solid var(--line); }
tbody td:last-child { width: 38mm; border-left: 1px solid var(--line); text-align: right; vertical-align: bottom; padding-bottom: 2mm; }
tbody td:last-child span { color: var(--muted); font-size: 9pt; }
tbody tr.final { background: var(--soft-violet); }
tbody tr.final th { color: var(--violet); }

.bottom { display: grid; grid-template-columns: 1.55fr 1fr; gap: 5mm; }
.bottom section { padding: 3mm 4mm; border: 1px solid #ddd6f6; border-radius: 3.5mm; background: var(--soft-violet); }
.bottom .explain { background: var(--soft-blue); border-color: var(--line); }
.bottom .explain h2 { color: var(--violet); }
.bottom .explain p { font-weight: 800; font-size: 9pt; }
.bottom .check h2 { color: var(--blue); }
.lines i { display: block; height: 7mm; border-bottom: 1px solid #b9c6e4; }
.check ul { margin: 0; padding: 0; list-style: none; font-size: 8.5pt; }
.check li { display: flex; align-items: center; gap: 2mm; padding: 0.8mm 0; }
.check li::before { content: ""; width: 3.6mm; height: 3.6mm; border: 1px solid #aebbe0; border-radius: 1mm; background: #fff; }

.sheet-footer {
  position: absolute; right: 14mm; bottom: 6mm; left: 14mm;
  display: flex; padding-top: 2mm; border-top: 0.8mm solid var(--aqua);
  justify-content: space-between; color: var(--muted); font-size: 7.5pt;
}

.key-result { margin: 6mm 0; padding: 6mm; border-radius: 4mm; background: #e9f9f3; }
.key-result span { display: block; color: var(--muted); font-size: 8pt; text-transform: uppercase; }
.key-result strong { color: #14a47a; font-size: 26pt; }
.key-block { margin-bottom: 6mm; padding: 5mm; border: 1px solid var(--line); border-radius: 4mm; }
.key-block ol { margin: 0 0 3mm; padding-left: 5mm; }
.key-block li, .key-block p { margin-bottom: 1.5mm; }

@media print {
  body { background: #fff; }
  .screen-bar { display: none; }
  .sheet { margin: 0; box-shadow: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}