#app { max-width: 760px; margin: 0 auto; padding: 18px 16px; }
.net { font-size: 1.1rem; color: #9fd7b3; }
.net.off { color: #ffb4a9; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .35; } }

.msg-icon { font-size: 3.4rem; margin-top: 10px; }
#v-msg h1, #v-sent h1 { font-size: 1.8rem; }
#v-msg p, #v-sent p { font-size: 1.15rem; color: var(--muted); max-width: 32em; margin: 0 auto 1em; }

.enter { display: flex; gap: 10px; max-width: 420px; margin: 18px auto; }
.enter input { font-size: 1.5rem; text-align: center; letter-spacing: .12em; text-transform: uppercase; }

.head { text-align: center; }
.reader-no { font-size: 1.3rem; }
.reader-no strong { font-size: 2.2rem; color: var(--brand); }
.leitsatz { font-size: 1.2rem; font-weight: 600; margin: .4em 0; }

.crit { border: 1px solid var(--line); }
.crit legend { font-size: 1.35rem; font-weight: 700; padding: 0 6px; }
.crit .help { color: var(--muted); margin: 0 0 12px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 520px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.step {
  appearance: none; font: inherit; color: var(--ink); cursor: pointer; touch-action: manipulation;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 92px; padding: 10px 8px; border-radius: 14px; border: 2px solid var(--line); background: #fff;
}
.step .num { font-size: 1.9rem; font-weight: 800; line-height: 1; }
.step .word { font-size: .95rem; text-align: center; line-height: 1.2; }
.step.s6, .step.s5 { background: #eef7f0; }
.step.s4, .step.s3 { background: #f6f8fb; }
.step.s2, .step.s1 { background: #fbf3f1; }
.step.on { border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: 0 0 0 3px #9cc3e6; }

.actions { text-align: center; margin: 16px 0 6px; }
.actions .big { width: 100%; max-width: 440px; }

.summary { max-width: 440px; margin: 0 auto 18px; text-align: left; }
.summary div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 8px 0; }
.summary span { color: var(--muted); }