:root{--bg: #1a1410;--panel: #261e18;--panel-2: #32261c;--ink: #f4eadc;--muted: #b6a48c;--line: #4a3b2c;--accent: #e07a2f;--accent-ink: #1a140c;--good: #7cb89a;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--nav-h: 2.75rem;--touch: 2.75rem}*{box-sizing:border-box}html,body,#app{min-height:100%;min-height:100dvh}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 Segoe UI,system-ui,sans-serif;overscroll-behavior:none}button,input{font:inherit}button{touch-action:manipulation}a{color:inherit;text-decoration:none}.app-shell{display:grid;grid-template-rows:auto auto auto minmax(0,1fr);min-height:100dvh;padding-top:var(--safe-top)}.app-header{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;padding:.45rem 1.1rem .3rem}.brand{font-weight:700;letter-spacing:.04em}.brand-sub{color:var(--muted);font-size:.78rem}.header-actions{display:flex;align-items:center;gap:.5rem}.sign-out{min-height:var(--touch);padding:0 .75rem;border:0;border-radius:.75rem;background:transparent;color:var(--muted);font-weight:650}.offline-banner{margin:0 1.1rem .5rem;padding:.55rem .75rem;border-radius:.65rem;background:var(--panel-2);color:var(--muted);font-size:.85rem}.app-main{min-height:0;overflow:auto;padding:0 1.1rem calc(var(--safe-bottom) + .75rem)}.app-nav{display:grid;grid-template-columns:repeat(4,1fr);height:var(--nav-h);background:color-mix(in srgb,var(--panel) 92%,black);border-bottom:1px solid var(--line)}.app-nav a{display:flex;align-items:center;justify-content:center;min-height:var(--touch);color:var(--muted);font-size:.8rem;font-weight:600}.app-nav a.active{color:var(--accent)}.page{display:grid;gap:1rem;padding-top:.35rem}.page h1{margin:0;font-size:1.55rem}.lede{margin:0;color:var(--muted)}.card{display:grid;gap:.55rem;padding:1rem 1.05rem;background:var(--panel);border:1px solid var(--line);border-radius:1rem}.card h2,.card h3{margin:0;font-size:1.05rem}.dutch{font-size:1.7rem;font-weight:700;letter-spacing:.01em}.english{color:var(--muted)}.note{color:var(--muted);font-size:.9rem}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);padding:0 1rem;border:0;border-radius:.85rem;background:var(--accent);color:var(--accent-ink);font-weight:700}.btn:disabled,.choice:disabled{opacity:.55}.btn.ghost{background:var(--panel-2);color:var(--ink);border:1px solid var(--line)}.btn-row{display:grid;gap:.65rem}.btn-row.split{grid-template-columns:1fr 1fr}.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}.stat{padding:.85rem;background:var(--panel-2);border-radius:.85rem}.stat b{display:block;font-size:1.4rem}.stat span,.hint{color:var(--muted);font-size:.8rem}.field{display:grid;gap:.35rem}.field span{color:var(--muted);font-size:.85rem;font-weight:600}.error{color:#e08a7a;font-size:.9rem}.choices,.typed-form{display:grid;gap:.65rem}.choice,.answer-input{min-height:var(--touch);padding:0 1rem;border:1px solid var(--line);border-radius:.85rem;background:var(--panel-2);color:var(--ink);font-weight:650}.choice{text-align:left}.choice.right{border-color:var(--good);color:var(--good)}.choice.wrong{opacity:.55}.answer-input{width:100%}.answer-input:disabled{opacity:.7}.done{color:var(--good);font-size:.85rem;font-weight:650}.unit-list{display:grid;gap:.55rem;padding:0;margin:0;list-style:none}.unit-list a,.unit-list li{display:block;padding:.85rem .9rem;background:var(--panel-2);border-radius:.8rem}@media(min-width:720px){.app-shell{max-width:28rem;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}}