: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;--corner: .55rem}*{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 minmax(0,1fr) auto;height:100dvh;overflow:hidden;padding-top:var(--safe-top)}.app-shell:not(:has(.app-nav)){grid-template-rows:minmax(0,1fr)}.banners{display:grid;gap:.4rem}.sign-out{justify-self:start;min-height:var(--touch);padding:0 .75rem;border:0;background:transparent;color:var(--muted);font-weight:650}.sync-line{display:flex;align-items:center;justify-content:space-between;gap:.35rem;min-height:var(--touch)}.sync-line .note{margin:0;min-width:0;font-size:.8rem}.sync-line button{flex-shrink:0;min-height:var(--touch);padding:0 .5rem;border:0;background:transparent;color:var(--muted);font-size:.8rem;font-weight:650}.offline-banner{margin:.5rem 1.1rem 0;padding:.55rem .75rem;background:var(--panel-2);color:var(--muted);font-size:.85rem}.app-main{min-height:0;overflow:auto;padding:0 1.1rem .75rem}.app-nav{display:grid;grid-template-columns:repeat(var(--nav-cols, 4),1fr);align-items:center;height:calc(var(--nav-h) + var(--safe-bottom));padding-bottom:var(--safe-bottom);background:color-mix(in srgb,var(--panel) 92%,black);border-top: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:.75rem}.page h1{margin:0;font-size:1.55rem}.lede{margin:0;color:var(--muted)}.card{position:relative;display:grid;gap:.55rem;padding:1rem 1.05rem;background:var(--panel);border:1px solid var(--line)}.from-teacher{position:absolute;top:.35rem;right:.5rem;margin:0;color:var(--muted);font-size:.7rem;font-weight:600;opacity:.65}.card h2,.card h3{margin:0;font-size:1.05rem}.dutch{font-size:1.7rem;font-weight:700;letter-spacing:.01em}.speak-dutch{display:grid;gap:.55rem}.dutch-line{display:flex;align-items:center;gap:.5rem;min-width:0}.dutch-line .dutch{flex:1;min-width:0;margin:0}.speak-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--touch);min-width:var(--touch);min-height:var(--touch);padding:0;border:1px solid var(--line);background:var(--panel-2);color:var(--ink)}.speak-btn svg{display:block;width:1.35rem;height:1.35rem}.speak-hint{margin:0}.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;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}.learn-window{display:flex;flex-wrap:wrap;gap:.4rem}.learn-chip{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);min-width:var(--touch);padding:0 .75rem;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font-weight:700}.learn-chip.active{background:var(--accent);color:var(--accent-ink);border-color:transparent}.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}.stat{padding:.85rem;background:var(--panel-2)}.stat b{display:block;font-size:1.4rem}.stat span{color:var(--muted);font-size:.8rem}.day-dots{display:flex;flex-wrap:wrap;gap:.5rem;padding:.15rem .15rem .35rem;margin:0 0 .85rem;list-style:none}.day-dot{width:.72rem;height:.72rem;border-radius:50%;background:var(--line)}.day-dot.good{background:var(--good)}.day-dot.ok{background:var(--accent)}.day-dot.poor{background:#e08a7a}.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);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)}.unit-list li:has(.word-row){padding:0}.word-row{display:grid;gap:.15rem;width:100%;min-height:var(--touch);padding:.85rem .9rem;border:0;background:transparent;color:inherit;text-align:left}.word-row .dutch{font-size:1.2rem}.sentence-block{display:grid;gap:.55rem;padding-bottom:.75rem;border-bottom:1px solid var(--line)}.sentence-block:last-of-type{border-bottom:0;padding-bottom:0}.dutch-input{font-weight:700}@media(min-width:720px){.app-shell{max-width:28rem;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}}.offline-banner,.card,.stat,.answer-input,.unit-list a,.unit-list li,.word-row{border-radius:var(--corner);corner-shape:bevel}.sign-out,.sync-line button,.speak-btn,.btn,.learn-chip,.choice{border-radius:0;corner-shape:square}@supports not (corner-shape: bevel){.offline-banner,.card,.stat,.answer-input,.unit-list a,.unit-list li,.word-row{clip-path:polygon(var(--corner) 0,calc(100% - var(--corner)) 0,100% var(--corner),100% calc(100% - var(--corner)),calc(100% - var(--corner)) 100%,var(--corner) 100%,0 calc(100% - var(--corner)),0 var(--corner))}}