:root { --pico-font-size: 100%; }
body { font-size: 16px; }
.topnav ul li a.brand { text-decoration: none; }
.inline { display: inline; margin: 0; }
.msg { padding: .75rem 1rem; border-radius: .5rem; margin-bottom: 1rem; background: var(--pico-card-background-color); border: 1px solid var(--pico-muted-border-color); }
.msg-error { border-color: #dc2626; }
.msg-success { border-color: #16a34a; }
button, [role=button], input[type=submit] { min-height: 44px; }
input, select, textarea { font-size: 16px; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: .25rem 0; }
.statement img { max-width: 100%; height: auto; }
.card { padding: 1rem; border: 1px solid var(--pico-muted-border-color); border-radius: .75rem; margin-bottom: 1rem; background: var(--pico-card-background-color); }
.muted { color: var(--pico-muted-color); }
.grid-2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.toolbar { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .5rem; }
.toolbar button { min-height: 36px; padding: .25rem .6rem; font-size: 14px; }
.timerbar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 1rem; padding: .5rem .75rem; background: var(--pico-background-color); border-bottom: 1px solid var(--pico-muted-border-color); font-size: 15px; }
.tasknav { display: flex; flex-wrap: wrap; gap: .35rem; margin: .75rem 0; }
.tasknav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--pico-muted-border-color); border-radius: .5rem; text-decoration: none; }
.tasknav a.answered { background: #dcfce7; border-color: #16a34a; color: #14532d; }
.tasknav a.current { outline: 2px solid var(--pico-primary); }
.answer-row { display: flex; gap: .5rem; align-items: center; }
.answer-row input { flex: 1; margin-bottom: 0; }
.answer-row button { min-width: 44px; margin-bottom: 0; }
.pager { display: flex; justify-content: space-between; margin: 1rem 0; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.photos figure { margin: 0; }
.photos img { width: 100%; height: 140px; object-fit: cover; border-radius: .5rem; }
.review-photo { max-width: 100%; transition: transform .2s; }
.card.wrong { border-color: #dc2626; }