/* An application shell: toolbar, scrolling screen and persistent touch controls. */
:root{--tab-height:72px;--rail:96px;--toolbar:64px;background:#edf3f0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;width:100%;overflow:hidden;overscroll-behavior:none}body{padding:0}#app{height:100dvh;overflow:hidden;position:relative}#mainContent{height:100%;min-height:0;max-width:none;padding:0!important;margin:0 0 0 var(--rail)!important;display:flex;flex-direction:column;overflow:hidden;background:#f6f9f6}.app-toolbar{height:calc(var(--toolbar) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 24px 0;flex-shrink:0;display:flex;align-items:center;gap:16px;border-bottom:1px solid #e4ebe6;background:#fff;z-index:12}.app-toolbar h1{font-size:21px;line-height:1.3;flex:1;margin:0;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-stars{border-radius:24px;background:#fff4d2;padding:7px 12px;font-weight:750;color:#825a08;white-space:nowrap}.app-mark{font-size:28px}.app-back{border:0;background:transparent;padding:8px 4px;min-width:72px;text-align:left;font-weight:700}.toolbar-spacer{width:64px}.screen-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding:20px;padding:20px max(24px,calc((100% - 1120px)/2)) 32px}.screen-hint{font-size:15px;margin:0 0 18px}.sidebar{width:var(--rail);padding:24px 8px 16px;align-items:center;border-right:0;background:#e7efe9;z-index:15}.sidebar .brand{font-size:26px}.sidebar .brand span{display:none}.sidebar nav{margin-top:40px;gap:10px;width:100%}.sidebar nav a{padding:12px 4px;flex-direction:column;gap:6px;font-size:13px;border-radius:20px}.sidebar nav a span{font-size:25px}.sidebar nav a.active{background:#fff;color:#17654d;box-shadow:0 3px 12px #285a3710}.sidebar-bottom{padding:12px 0 0;text-align:center;font-size:12px}.sidebar-bottom p{display:none}.sidebar-bottom a{font-size:12px}.hero{border:0;padding:26px;border-radius:26px;background:linear-gradient(120deg,#d8f0d9,#e7f3df)}.hero h2{font-size:28px}.hero .row .primary{min-height:54px;border-radius:18px}.stats{gap:12px;margin:18px 0 24px}.stats>div{border:0;background:#fff;border-radius:20px;padding:16px;flex-direction:column;align-items:flex-start;gap:4px}.stats strong{font-size:26px}.cards{gap:14px}.entry{border:0;box-shadow:0 2px 0 #e1e9e4;border-radius:24px;min-height:154px}.entry:active,.word-tile:active,.btn:active{transform:scale(.98)}.entry b{display:none}.entry-icon{background:#eef6e8;width:54px;height:54px;border-radius:18px;display:grid;place-items:center}.panel{border:0;border-radius:24px;box-shadow:0 1px 0 #e1e9e4;margin:16px 0}.tabs{position:sticky;top:-20px;background:#f6f9f6;z-index:8;padding:8px 0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;margin:0 0 12px}.tabs button{flex-shrink:0;border:0;border-radius:16px;background:#e8efe9}.tabs .selected{background:#177663;color:#fff}.word-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.word-tile{border:0;background:#f0f6f0;border-radius:20px;min-height:140px}.learning{width:100%;max-width:860px;margin:16px auto;padding:24px}.hud{position:sticky;top:-20px;z-index:7;border-radius:16px;margin:0 auto 12px;min-height:48px}.action-bar{position:relative;bottom:auto!important;flex-shrink:0;max-width:none;width:100%;margin:0;border:0;border-top:1px solid #e0e8e2;border-radius:0;padding:12px max(24px,calc((100% - 860px)/2)) calc(12px + env(safe-area-inset-bottom));background:#fff;z-index:12;align-items:stretch}.action-bar .btn{min-height:52px;border-radius:16px}.action-bar .primary{flex:1}.screen-scroll .result{margin:24px auto;max-width:860px}.screen-scroll .result .row{justify-content:center}.modal-shade{padding:24px;background:#19362966;backdrop-filter:blur(3px)}.modal{border-radius:28px;padding:24px;max-height:88dvh;overscroll-behavior:contain}.modal .section-head{position:sticky;top:-24px;background:#fff;padding:14px 0;z-index:1}.modal .section-head h2{font-size:20px}.modal:before{content:none}#toast-root{bottom:calc(28px + env(safe-area-inset-bottom));max-width:min(480px,90vw);box-shadow:0 8px 30px #0002}html[data-view=focus] .sidebar,html[data-view=focus] .tabbar,html[data-view=detail] .tabbar{display:none}html[data-view=focus] #mainContent{margin-left:0!important}html[data-view=focus] .app-toolbar h1,html[data-view=detail] .app-toolbar h1{text-align:center}html[data-view=focus] .screen-scroll{padding-left:max(20px,calc((100% - 900px)/2));padding-right:max(20px,calc((100% - 900px)/2))}html[data-view=focus] .sentence{margin:20px 0}.feedback{margin:14px 0 6px}.big-emoji{margin:16px 0}.recorder .primary{border-radius:24px;min-height:56px;min-width:160px}.steps{margin-bottom:12px}.btn{user-select:none;-webkit-user-select:none}.btn:disabled{transform:none}
@media(max-width:767px){:root{--toolbar:58px}.sidebar{display:none}#mainContent{margin:0!important}.app-toolbar{padding-left:16px;padding-right:16px;gap:10px}.app-toolbar h1{font-size:19px}.app-stars{font-size:13px;padding:6px 10px}.screen-scroll{padding:16px 16px 24px}.tabbar{height:calc(var(--tab-height) + env(safe-area-inset-bottom));padding:7px 12px calc(7px + env(safe-area-inset-bottom));border:0;box-shadow:0 -1px 0 #dfe8e1;background:#fff}.tabbar a{border-radius:18px;gap:3px;min-height:54px;font-size:12px}.tabbar a span{font-size:24px}.tabbar a.active{background:#e8f3e8;color:#17634e}html[data-view=root] #mainContent{padding-bottom:calc(var(--tab-height) + env(safe-area-inset-bottom))!important}.hero{padding:22px}.hero h2{font-size:23px;margin:14px 0 8px}.hero progress{margin:16px 0 20px}.hero .row{display:grid;grid-template-columns:1fr}.hero .row>.btn:not(.primary){background:#fff8;border:0}.planet{display:none}.stats>div{padding:14px 10px;border-radius:18px}.stats strong{font-size:25px}.stats span{font-size:12px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.entry{padding:18px 14px;min-height:166px;gap:8px}.entry strong{font-size:16px}.entry>span:not(.entry-icon){font-size:13px}.word-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.word-tile{padding:16px 8px}.panel{padding:18px}.learning{padding:20px 14px}.action-bar{padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px}.action-bar .btn{padding:10px 14px;min-height:52px}.hud,.tabs{top:-16px}.hud{font-size:13px;padding:12px}.modal-shade{align-items:flex-end;padding:0}.modal{width:100%;max-height:92dvh;border-radius:28px 28px 0 0;padding:10px 22px calc(22px + env(safe-area-inset-bottom));animation:sheet-in .18s ease-out}.modal:before{content:'';display:block;width:38px;height:5px;border-radius:9px;background:#cad6ce;margin:0 auto 4px}.modal .section-head{top:-10px}.modal .row{display:grid;grid-template-columns:1fr;width:100%}.modal .row button{width:100%}html[data-view=root] #toast-root{bottom:calc(86px + env(safe-area-inset-bottom))}.screen-hint{font-size:14px;margin-bottom:14px}.sentence{font-size:26px}.list-row .row{flex-wrap:wrap}.list-row{gap:10px}.app-back{min-width:62px}.toolbar-spacer{width:62px}}
@media(min-width:768px) and (max-width:1100px){.screen-scroll{padding:22px 26px}.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.word-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.planet{display:grid;font-size:76px}.hero h2{font-size:26px}.hero{padding:24px}.app-toolbar{padding-left:26px;padding-right:26px}.modal{width:560px}.stats>div{flex-direction:row;align-items:center}.entry{padding:20px 16px}.entry strong{font-size:16px}}
@media(prefers-reduced-motion:reduce){.modal{animation:none}.btn:active,.entry:active,.word-tile:active{transform:none}}@keyframes sheet-in{from{transform:translateY(30px);opacity:.5}to{transform:translateY(0);opacity:1}}
.word-meaning{font-size:22px!important;color:#375b43;font-weight:750}.letter-pool .letter-correct:disabled{background:#d6f2dd;color:#155d31;border:2px solid #278b4c;opacity:1}.letter-pool .letter-error{background:#ffe1dc;color:#a1271a;border:2px solid #c54b3b;animation:letter-shake .25s}.spelling-correct .btn{background:#def3e3;border-color:#37965b;color:#155d31}.auto-next-hint{align-self:center;color:#42664b;font-weight:650;font-size:14px}#voice-status{font-size:14px;min-height:24px;color:#647768}@keyframes letter-shake{25%,75%{transform:translateX(-4px)}50%{transform:translateX(4px)}}