:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 20px;
  color: #182536;
  background: #f3f7fb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: #f3f7fb;
}

button, input, textarea { font: inherit; }

button {
  min-height: 52px;
  padding: 12px 18px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: #2459a6;
  cursor: pointer;
  touch-action: manipulation;
}

button:disabled { opacity: .55; cursor: wait; }
button.secondary { color: #21436d; background: #e2ebf7; }
button.choice { width: 100%; color: #182536; background: #fff; border: 2px solid #dce6f1; text-align: left; }
button.choice[aria-pressed="true"] { border-color: #2459a6; background: #e8f0fc; }

.app { width: min(100%, 820px); margin: 0 auto; }
.panel, .question-card, .task-card { padding: clamp(20px, 4vw, 34px); border-radius: 22px; background: #fff; box-shadow: 0 8px 28px rgb(24 48 78 / 8%); }
.panel { margin-top: clamp(20px, 8vh, 72px); }
h1 { margin: 0 0 12px; font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.2; }
h2 { margin: 0 0 12px; font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 1.3; }
p { line-height: 1.5; }
.muted { color: #586a7e; }
.stack { display: grid; gap: 14px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kid-choice { width: 100%; min-height: 76px; font-size: 1.2rem; }
.pin-input, .answer-input { width: 100%; min-height: 58px; padding: 12px 16px; border: 2px solid #cad8e8; border-radius: 14px; background: #fff; }
.pin-input { text-align: center; letter-spacing: .4em; font-size: 1.5rem; }
.progress-meter { display: block; width: 100%; height: 14px; border: 0; border-radius: 999px; overflow: hidden; background: #dfe8f2; accent-color: #3d8b64; }
.progress-meter::-webkit-progress-bar { border-radius: 999px; background: #dfe8f2; }
.progress-meter::-webkit-progress-value { border-radius: 999px; background: #3d8b64; }
.task-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; border: 1px solid #e2eaf3; text-align: left; color: inherit; }
.task-card > span:first-child { font-weight: 650; }
.task-card:disabled { opacity: .76; color: #586a7e; background: #f4f7fa; cursor: not-allowed; }
.status { color: #586a7e; white-space: nowrap; }
.debt-group { padding: 16px 0; border-top: 1px solid #e2eaf3; }
.debt-group h3 { margin: 0; font-size: 1rem; color: #8c3c31; }
.handwriting-story { padding: 18px; border-radius: 14px; background: #f5f8fc; white-space: pre-wrap; line-height: 1.7; }
.handwriting-card ol { padding-left: 1.5em; line-height: 1.6; }
.photo-input { width: 100%; min-height: 52px; padding: 12px; border: 2px dashed #cad8e8; border-radius: 14px; background: #fff; }
.submission-photo { display: block; width: 100%; max-height: 75vh; object-fit: contain; border-radius: 12px; background: #eef2f6; }
.review-comment { min-height: 80px; resize: vertical; }
.question-card { margin-top: 14px; }
.question { margin: 16px 0 24px; white-space: pre-wrap; line-height: 1.55; }
.lesson-image { display: block; width: 100%; max-height: 55vh; object-fit: contain; border-radius: 12px; background: #eef2f6; }
.resource-links { display: grid; gap: 8px; margin: 0; padding-left: 1.25em; }
.resource-links a { color: #2459a6; overflow-wrap: anywhere; }
.choices { display: grid; gap: 12px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.actions button { flex: 1 1 180px; }
.error { min-height: 1.5em; color: #a12e28; }
.connection-badge { position: fixed; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; width: fit-content; max-width: 600px; margin: auto; padding: 10px 14px; border-radius: 12px; color: #fff; background: #5b6571; font-size: .82rem; }
.photo-tools { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e2eaf3; }
.photo-tools summary { min-height: 48px; padding: 10px 0; color: #2459a6; cursor: pointer; }
.photo-tools input { width: 100%; min-height: 48px; }
.complete-mark { color: #236a45; font-weight: 700; }

@media (orientation: landscape) and (min-width: 760px) {
  .panel { margin-top: 4vh; }
  .question-card { padding: 28px 36px; }
}