/* Shared phone interface. Loaded after each page's existing dark theme. */
:root{--mobile-dock-height:68px;--mobile-top-height:88px;--visible-height:100dvh}
body[data-mobile-page]{min-width:0;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.mobile-dock,.mobile-sheet-backdrop,.mobile-close-menu,.mobile-step-close{display:none}
@media(max-width:900px){
 html{scroll-padding-top:calc(var(--mobile-top-height) + env(safe-area-inset-top) + 14px);scroll-padding-bottom:100px}
 body[data-mobile-page]{font-size:16px;line-height:1.6;padding-bottom:calc(var(--mobile-dock-height) + env(safe-area-inset-bottom));background-attachment:scroll}
 body[data-mobile-page] *,body[data-mobile-page] *:before,body[data-mobile-page] *:after{box-sizing:border-box}
 body[data-mobile-page] :is(main,section,article,form,fieldset,.card,.panel,.paper,.content,.lesson-wrap,.account-wrap,.grid,.row,.topbar,.top-actions,.course-card,.catalog-lesson,.speech,.grammar-card,.report-grid,.choice-grid,.layout,.conversation,.editor-workspace){min-width:0;max-width:100%}
 body[data-mobile-page] :is(h1,h2,h3,h4,p,li,label,small,strong,b,a,.ko,.feedback,.answer,.bubble,.ai-message,.task-label){overflow-wrap:anywhere}
 body[data-mobile-page] :is(h1,h2,h3){text-wrap:pretty}
 body[data-mobile-page] :is(img,video,iframe,canvas,svg){max-width:100%}
 body[data-mobile-page] img{height:auto}
 body[data-mobile-page] :is(input:not([type=radio]):not([type=checkbox]):not([type=hidden]),select,textarea){font-size:16px!important;min-height:48px;min-width:0;max-width:100%;border-radius:12px}
 body[data-mobile-page] textarea{width:100%;resize:vertical}
 body[data-mobile-page] :is(button,.btn,a.primary,a.ghost,.trial-link,.catalog-lesson,summary){min-height:48px;touch-action:manipulation;white-space:normal;overflow-wrap:anywhere;line-height:1.4}
 body[data-mobile-page] :is(button,a,input,select,textarea,summary){-webkit-tap-highlight-color:rgba(88,220,255,.15)}
 body[data-mobile-page] :is(button,a,summary):focus-visible{outline:3px solid #58dcff;outline-offset:3px}
 body[data-mobile-page] :is(button,.btn){flex-shrink:0}
 .mobile-dock{position:fixed;inset:auto 0 0;z-index:30;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;min-height:var(--mobile-dock-height);padding:6px max(8px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right));background:rgba(5,12,28,.96);border-top:1px solid rgba(116,196,255,.22);box-shadow:0 -10px 35px #0004;backdrop-filter:blur(22px)}
 .mobile-dock :is(a,button){display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-width:0;min-height:54px;border:0;border-radius:12px;padding:5px 4px;background:transparent;color:#a5bfdb;font:650 11px/1.3 Inter,system-ui,sans-serif;text-decoration:none;box-shadow:none}
 .mobile-dock svg{width:23px;height:23px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8}
 .mobile-dock [aria-current=page],.mobile-dock [aria-expanded=true]{background:linear-gradient(110deg,#17c9ff24,#744dff24);color:#7be5ff}
 .mobile-dock button:after{display:none}
 body.mobile-keyboard-open .mobile-dock,body.mobile-menu-open .mobile-dock,body.mobile-dialog-open .mobile-dock{display:none}
 body.mobile-keyboard-open{padding-bottom:env(safe-area-inset-bottom)}
 body.mobile-menu-open{overflow:hidden;overscroll-behavior:none}
 .app-shell,.layout{grid-template-columns:minmax(0,1fr)}
 .app-shell{display:block}
 .app-shell>.sidebar{position:fixed;inset:0 auto 0 0;top:0;z-index:60;width:min(360px,calc(100vw - 32px));height:var(--visible-height);padding:calc(16px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));transform:translateX(-110%);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;transition:transform .22s ease}
 .app-shell>.sidebar.open{transform:none}
 .app-shell>.sidebar>.brand{width:calc(100% - 44px);margin-bottom:16px;padding:7px 12px}
 .app-shell>.sidebar .progress-card{padding:12px;margin-bottom:12px;flex-shrink:0}
 .app-shell>.sidebar :is(#lesson-list,.school-lessons){min-height:100px;overflow:auto;flex:1;overscroll-behavior:contain}
 .app-shell>.sidebar .lesson-link{min-height:54px;grid-template-columns:30px minmax(0,1fr) 20px;gap:8px}
 .app-shell>.sidebar .lesson-link .name{white-space:normal;overflow:visible;line-height:1.45;font-size:14px}
 .app-shell>.sidebar .school-course{margin-bottom:10px}
 .app-shell>.sidebar .course-links{margin-bottom:12px;gap:8px}
 .app-shell>.sidebar .course-links a{display:flex;align-items:center;min-height:44px}
 .app-shell>.sidebar .danger{width:100%;flex-shrink:0}
 .mobile-close-menu{position:absolute;right:10px;top:calc(12px + env(safe-area-inset-top));display:grid;place-items:center;width:44px;min-height:44px!important;border:1px solid rgba(116,196,255,.25);border-radius:12px;color:#eaf8ff;background:#122444;font-size:25px;line-height:1}
 .sidebar-backdrop.open{display:block;z-index:55;background:#020817b8;backdrop-filter:blur(5px)}
 .menu-button{display:grid!important;gap:4px;align-content:center;justify-content:center;min-width:48px;width:48px;min-height:48px;padding:10px;border:1px solid rgba(116,196,255,.18);border-radius:12px;flex-shrink:0}
 .menu-button span{display:block;width:20px;height:2px;background:#dceeff}
 .app-shell .topbar{height:auto;min-height:78px;gap:10px;padding:calc(12px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));align-items:center}
 .app-shell .topbar>div:not(.top-actions){flex:1;min-width:0}
 .app-shell .topbar h1{font-size:clamp(19px,5vw,26px);line-height:1.25;margin:4px 0 0;overflow-wrap:anywhere}
 .app-shell .topbar .eyebrow{font-size:10px;letter-spacing:.07em;display:block}
 .top-actions{gap:6px}
 .top-actions>.ghost,.school-account,.top-actions .points{display:none!important}
 .account-button{min-width:48px;min-height:48px;justify-content:center;padding:6px}
 #account-label{display:none}
 .app-shell :is(.lesson-wrap,.account-wrap){padding:22px max(16px,env(safe-area-inset-right)) 28px max(16px,env(safe-area-inset-left));max-width:760px}
 .lesson-intro,.school-intro{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin-bottom:18px}
 .lesson-intro>div{flex:1 1 240px}
 .complete-button{margin:0;max-width:100%;padding:10px 12px;gap:8px}
 .complete-button span:last-child{display:inline;font-size:13px}
 .school-intro .complete-button{margin-top:0}
 .school-intro p,.lesson-intro p{font-size:16px;line-height:1.6}
 .school-crumbs{font-size:12px;gap:5px;margin-bottom:16px}
 .tabs,.school-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;overflow:visible;flex-wrap:initial;margin-bottom:18px;border:0;padding:5px;background:#0b162b;border:1px solid rgba(116,196,255,.15);border-radius:16px}
 .tabs button,.school-tabs button{min-width:0;white-space:normal;overflow-wrap:anywhere;min-height:50px;padding:8px 6px;border:0;border-radius:11px;font-size:13px;line-height:1.35;font-weight:650}
 .tabs button[aria-selected=true],.school-tabs button.active,.school-tabs button[aria-pressed=true]{color:#dcf8ff;background:linear-gradient(110deg,#17c9ff25,#744dff25);box-shadow:inset 0 0 0 1px #58dcff38}
 .tabs button span{display:inline-block;margin-left:2px;padding:1px 4px;font-size:10px}
 .panel,.lesson-content>section,.paper{padding:20px 16px;border-radius:20px;margin:16px 0}
 .panel h2,.lesson-content h2{font-family:Inter,system-ui,sans-serif;font-size:24px;line-height:1.35}
 .section-head{flex-wrap:wrap;align-items:flex-start;gap:12px;margin-bottom:18px}
 .section-head>div:first-child{flex:1 1 210px;min-width:0}
 .dialogue-actions{width:100%;justify-content:flex-start;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .dialogue-actions button{font-size:13px;padding:10px}
 .speech{grid-template-columns:30px minmax(0,1fr) 48px!important;gap:8px;padding:12px 10px}
 .speech>div{min-width:0}
 .speech .speaker{width:30px;height:30px;border-radius:10px}
 .speech p{font-size:18px;line-height:1.65}
 .speech .translation{font-size:15px;line-height:1.6}
 .speech-sound{width:48px!important;min-height:48px!important;height:48px}
 .grammar-card{grid-template-columns:minmax(0,1fr);padding:18px;gap:14px}
 .grammar-symbol{width:48px;height:48px;border-radius:14px;font-size:22px}
 .grammar-card p{font-size:16px;line-height:1.75}
 .grammar-card #grammar-copy{min-width:0}
 .word-grid,.account-course-grid,.course-grid,.catalog-lessons{grid-template-columns:repeat(2,minmax(0,1fr))}
 .word-chip{min-width:0;font-size:16px;line-height:1.55;min-height:64px}
 .flashcard{height:clamp(330px,55dvh,470px);margin:0 auto 18px;max-width:100%;width:100%;touch-action:pan-y}
 .flash-front,.flash-back{padding:22px 18px;gap:16px;overflow-y:auto;overscroll-behavior:contain}
 .flashcard strong{font-family:Inter,system-ui,sans-serif;font-size:clamp(26px,7vw,40px);line-height:1.35;margin:0 0 8px}
 .word-example{min-width:0}.word-example b{font-size:17px;line-height:1.65}.word-example small{font-size:15px}
 .swipe-guide{font-size:11px;gap:6px;flex-wrap:wrap;justify-content:center}
 .answer-row{margin:14px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
 .answer-row input{width:100%}.feedback{margin-left:0}
 .task-label{font-size:16px;gap:10px}.task-label span{flex-shrink:0}
 .lesson-content .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lesson-content .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lesson-content .card{padding:16px}
 .lesson-content .card img{height:150px;max-height:180px;width:100%;object-fit:contain}
 .lesson-content .picture img{max-height:150px;width:auto}
 .lesson-content .ko{font-size:26px;line-height:1.7}
 .lesson-content .row{gap:8px;align-items:stretch;flex-wrap:wrap}
 .lesson-content .row>button{flex:1 1 110px;padding:11px 12px}
 .lesson-content .row>input{flex:1 1 100%;width:100%}
 .lesson-content select,.lesson-content input{width:100%}
 .lesson-content .tip,.tip{font-size:15px;line-height:1.75;padding:15px}
 .lesson-nav,.school-lesson-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}
 .lesson-nav button,.school-lesson-nav a{font-size:13px;line-height:1.5;padding:12px;display:flex;justify-content:center;align-items:center;min-width:0}
 .modal{padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));z-index:80}
 .modal-card,dialog{max-height:calc(var(--visible-height) - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;width:min(510px,100%);padding:28px 20px 22px;border-radius:22px}
 .modal-close{width:48px;min-height:48px;right:8px;top:8px}
 .modal-card h2{font-size:25px;line-height:1.3;padding-right:30px}
 .modal-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .modal-actions>button{min-width:0}
 .toast{bottom:calc(var(--mobile-dock-height) + env(safe-area-inset-bottom) + 12px);max-width:calc(100vw - 32px);width:max-content;font-size:14px;text-align:center}
 body.mobile-keyboard-open .toast{bottom:16px}
 .ai-settings,.report-grid{grid-template-columns:minmax(0,1fr)}
 .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.choice-grid label span{min-height:86px;padding:12px}.choice-grid label{min-width:0}.choice-grid small{font-size:13px}
 .ai-chat-head{flex-wrap:wrap;gap:12px}.ai-chat-head>button{width:100%;font-size:14px}
 .ai-messages{height:clamp(180px,42dvh,360px);padding:16px 0;overscroll-behavior:contain}
 .ai-message{max-width:94%;min-width:0}.ai-message p{font-size:18px;line-height:1.6;overflow-wrap:anywhere}
 .ai-text-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
 .ai-text-entry input{width:100%}.ai-text-entry button{padding:10px 12px;font-size:14px}
 .ai-composer{position:sticky;bottom:calc(var(--mobile-dock-height) + env(safe-area-inset-bottom));z-index:12;background:#0b152a;padding:12px;border-radius:14px;box-shadow:0 -8px 20px #05081655}
 body.mobile-keyboard-open .ai-composer{bottom:0}
 .ai-task-cta{grid-template-columns:44px minmax(0,1fr);gap:12px;padding:16px}.ai-task-cta>button{grid-column:1/-1;width:100%}
 .account-topbar #account-logout{min-width:64px;padding:10px;font-size:13px}.account-course{gap:12px}.account-course h3{font-size:22px}.account-course .primary{align-self:stretch;width:100%}
 .account-sidebar small{margin-top:20px}
 .access-body{display:block;padding:0;min-height:100dvh}.access-shell{display:block;min-height:100dvh;width:100%;border-radius:0}
 .access-brand{min-height:0!important;padding:calc(20px + env(safe-area-inset-top)) 20px 12px!important}
 .access-brand .logo-brand{width:min(245px,100%);margin:0!important;padding:8px 12px}.access-brand>div:not(.logo-brand){display:none}.access-brand p,.access-badge{display:none}
 .access-card{padding:20px max(20px,env(safe-area-inset-right)) 28px max(20px,env(safe-area-inset-left))}
 .access-card h2{font-size:27px;line-height:1.25}.trial-intro{margin-bottom:24px;padding-bottom:22px}.trial-intro small{font-size:13px}.auth-tabs button{min-height:48px}
 /* Public beginner lesson: seven steps in a bottom sheet instead of a wide row. */
 body[data-mobile-page=start] .layout{display:block}
 body[data-mobile-page=start] .sidebar{position:relative;inset:auto;height:auto;padding:calc(14px + env(safe-area-inset-top)) 16px 14px;overflow:visible;display:block}
 body[data-mobile-page=start] .sidebar .logo-brand{width:200px;margin:0}
 body[data-mobile-page=start] .intro-side,body[data-mobile-page=start] .sidebar-bottom{display:none}
 body[data-mobile-page=start] .steps{display:none}
 body[data-mobile-page=start].mobile-step-sheet-open .steps{display:grid;position:fixed;inset:auto 12px calc(var(--mobile-dock-height) + env(safe-area-inset-bottom) + 8px);z-index:60;max-height:calc(var(--visible-height) - 130px);overflow:auto;overscroll-behavior:contain;padding:14px;border:1px solid #58dcff44;border-radius:22px;background:#0a142a;box-shadow:0 -10px 60px #0008;gap:6px}
 body[data-mobile-page=start] .steps button{width:100%;white-space:normal;text-align:left;padding:12px;min-height:48px}
 .mobile-sheet-backdrop.open{display:block;position:fixed;inset:0;z-index:50;border:0;border-radius:0;background:#020817b8;backdrop-filter:blur(5px)}
 body[data-mobile-page=start] .topbar{min-height:68px;padding:12px 16px;flex-wrap:wrap;gap:8px}
 body[data-mobile-page=start] .topbar strong{font-size:14px}
 body[data-mobile-page=start] .topbar>a{min-height:44px;display:flex;align-items:center}
 body[data-mobile-page=start] .topbar .tag{font-size:10px}
 body[data-mobile-page=start] .content{padding:20px 16px 28px}
 body[data-mobile-page=start] .grid{grid-template-columns:minmax(0,1fr)}
 body[data-mobile-page=start] .tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 body[data-mobile-page=start] #consonants{grid-template-columns:repeat(2,minmax(0,1fr))}
 body[data-mobile-page=start] .tiles button{min-width:0;padding:10px 5px;min-height:74px}
 body[data-mobile-page=start] .tiles small{font-size:12px}
 body[data-mobile-page=start] .picks{grid-template-columns:minmax(0,1fr)}
 body[data-mobile-page=start] .picks button{width:100%;font-size:17px;padding:14px}
 body[data-mobile-page=start] .equation{gap:10px;font-size:34px}
 body[data-mobile-page=start] .vowel-photo{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
 body[data-mobile-page=start] canvas#writing{height:240px;width:100%}
 body[data-mobile-page=start] .actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
 body[data-mobile-page=start] .actions :is(a,button){width:100%}
 body[data-mobile-page=start] .bottom{display:flex;flex-wrap:wrap;gap:10px}
 body[data-mobile-page=start] .bottom button{flex:1 1 120px}
 body[data-mobile-page=start] footer button{font-size:12px;margin-top:10px}
 /* Café trial and public school pages. */
 body[data-mobile-page=trial]>header{padding:calc(16px + env(safe-area-inset-top)) 16px 16px;gap:12px}
 body[data-mobile-page=trial] .brand{width:210px}
 body[data-mobile-page=trial]>main{padding:22px 16px 28px}
 body[data-mobile-page=trial] .paper{padding:22px 18px}
 body[data-mobile-page=trial] .options button{width:100%;font-size:17px;line-height:1.6}
 body[data-mobile-page=trial] .actions{display:grid;grid-template-columns:minmax(0,1fr)}
 body[data-mobile-page=trial] .chips{flex-wrap:wrap}.chips button{max-width:100%}
 body[data-mobile-page=welcome] .nav{padding:calc(16px + env(safe-area-inset-top)) 16px 16px;gap:10px;flex-wrap:wrap}
 body[data-mobile-page=welcome] .brand{width:200px}.nav-links a{min-height:44px;display:flex;align-items:center}
 body[data-mobile-page=welcome] .wrap{padding-inline:16px}
 body[data-mobile-page=welcome] .hero{grid-template-columns:minmax(0,1fr);padding:34px 0;gap:26px}
 body[data-mobile-page=welcome] .grid,body[data-mobile-page=welcome] .split{grid-template-columns:minmax(0,1fr)}
 body[data-mobile-page=welcome] .actions{display:grid;grid-template-columns:minmax(0,1fr)}
 body[data-mobile-page=welcome] .demo{padding:22px 18px}.bubble:nth-of-type(odd){margin-left:12px}
 body[data-mobile-page=welcome] h1{font-size:clamp(34px,8vw,46px)}
 /* Conversation practice: the composer stays above navigation and keyboard. */
 body[data-mobile-page=practice_bot] .header{padding:calc(14px + env(safe-area-inset-top)) 16px 14px;gap:12px;flex-wrap:wrap}
 body[data-mobile-page=practice_bot] .header nav{gap:8px;flex-wrap:wrap}.header nav :is(a,button){display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px 10px}
 body[data-mobile-page=practice_bot]>main{padding:12px 12px 24px}
 body[data-mobile-page=practice_bot] .heading{gap:12px;flex-wrap:wrap}.heading>div{min-width:0}
 body[data-mobile-page=practice_bot] .layout{grid-template-columns:minmax(0,1fr)}
 body[data-mobile-page=practice_bot] .conversation{padding:16px}
 body[data-mobile-page=practice_bot] .settings{grid-template-columns:minmax(0,1fr) 95px}
 body[data-mobile-page=practice_bot] .settings label{font-size:13px}
 body[data-mobile-page=practice_bot] .minutes-bar{gap:10px;flex-wrap:wrap}
 body[data-mobile-page=practice_bot] .composer{bottom:calc(var(--mobile-dock-height) + env(safe-area-inset-bottom));margin:0 -16px -16px;padding:12px 16px;background:#0b152a}
 body[data-mobile-page=practice_bot].mobile-keyboard-open .composer{bottom:0}
 body[data-mobile-page=practice_bot] .text-form{padding:6px;gap:7px}
 body[data-mobile-page=practice_bot] .text-form input{min-width:0;width:0}
 body[data-mobile-page=practice_bot] .text-form #send{min-width:60px;min-height:48px;padding:5px}
 body[data-mobile-page=practice_bot] .messages{max-height:42dvh;padding:16px 0}
 body[data-mobile-page=practice_bot] .message{max-width:96%;font-size:17px}
 body[data-mobile-page=practice_bot] .translation{font-size:15px}.corrections,.correction p{font-size:14px}
 body[data-mobile-page=practice_bot] :is(.mic,.control){min-width:48px;min-height:48px}
 body[data-mobile-page=practice_bot] .draft-panel>div{flex-wrap:wrap;gap:8px}
 #guide{width:calc(100% - 24px);padding:22px 18px}
 /* Administration and editor also remain usable on a phone. */
 .admin-header{height:auto;min-height:78px;padding:calc(14px + env(safe-area-inset-top)) 16px 14px;gap:12px;flex-wrap:wrap}
 .admin-header .logo-brand{width:185px;margin:0}.admin-actions{flex-wrap:wrap;gap:8px}.admin-actions a{display:inline-flex!important;align-items:center;font-size:12px;padding:10px}
 .admin-main{padding:26px 16px}.admin-heading{gap:14px;flex-wrap:wrap;align-items:flex-start}.admin-heading h1{font-size:32px;line-height:1.2}
 .admin-toolbar{padding:16px;flex-wrap:wrap;gap:10px}.admin-toolbar-actions{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin:0}.admin-search{flex:1 1 100%}
 .admin-table{min-width:0;width:100%}.admin-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
 .admin-table,.admin-table tbody{display:block}.admin-table tr{display:grid;grid-template-columns:minmax(0,1fr);padding:16px;border-bottom:1px solid var(--line);gap:10px}
 .admin-table td{display:block;border:0;padding:0;min-width:0;max-width:100%;font-size:15px}
 .admin-table td[data-mobile-label]:before{content:attr(data-mobile-label);display:block;color:#91a8c6;font-size:12px;margin-bottom:4px}
 .admin-table td>button{margin:4px 6px 4px 0}.admin-table-wrap{overflow:visible}
 .course-editor-shell{display:block!important}.editor-outline{position:relative;width:100%;height:auto;max-height:45dvh;overflow:auto;padding:18px 16px}
 .editor-workspace{width:100%;padding:24px 16px}.editor-titlebar{align-items:stretch;flex-direction:column}.editor-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
 .editor-fields.two{grid-template-columns:minmax(0,1fr)}.editor-block{padding:18px 14px}.outline-add{min-width:48px;min-height:48px}.outline-lesson{min-height:60px!important}
}
@media(max-width:600px){
 .word-grid,.account-course-grid,.course-grid,.catalog-lessons,.lesson-content .grid{grid-template-columns:minmax(0,1fr)}
 .course-card .primary{width:100%;text-align:center}
 .catalog-lesson{align-items:flex-start;gap:10px}.catalog-lesson>div{min-width:0}
 .school-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lesson-content .gallery{grid-template-columns:minmax(0,1fr)}
 .lesson-content .card img{height:170px}
 body[data-mobile-page=welcome] .topics{grid-template-columns:minmax(0,1fr)}
 body[data-mobile-page=welcome] .topic{flex-wrap:wrap}
 .report-grid article{padding:16px}
 body[data-mobile-page=start] .certificate{padding:24px 18px}
}
@media(max-width:360px){
 .app-shell .topbar{padding-inline:12px;gap:7px}.app-shell .topbar h1{font-size:18px}
 .app-shell :is(.lesson-wrap,.account-wrap){padding-inline:12px}
 .panel,.lesson-content>section{padding:18px 14px}
 .speech{grid-template-columns:28px minmax(0,1fr)!important;position:relative;padding-right:10px}
 .speech-sound{grid-column:2;justify-self:end}
 .choice-grid{grid-template-columns:minmax(0,1fr)}
 .ai-text-entry{grid-template-columns:minmax(0,1fr)}
 body[data-mobile-page=start] .topbar .tag{order:3;width:100%;text-align:center}
}
@media(max-width:900px) and (max-height:500px){
 .app-shell .sidebar .school-course,.app-shell .sidebar .progress-card{display:none}
 .flashcard{height:340px}.modal-card,dialog{max-height:calc(var(--visible-height) - 24px)}
 .ai-messages{height:180px}
}
@media(prefers-reduced-motion:reduce){.mobile-dock,.app-shell>.sidebar{transition:none}}
@media(max-width:900px){
 body[data-mobile-page] button{max-width:100%}
 body[data-mobile-page] .avatar img{height:100%}
 body.mobile-step-sheet-open{overflow:hidden;overscroll-behavior:none}
 .mobile-step-close{display:none}
 body.mobile-step-sheet-open .mobile-step-close{display:block;color:#8ae7ff!important}
 .mobile-dock{max-width:none!important}
}

@media(max-width:900px){.modal{top:var(--visible-top,0px);bottom:auto;height:var(--visible-height)}body.mobile-keyboard-open dialog[open]{position:fixed;top:calc(var(--visible-top,0px) + 10px);bottom:auto;margin:0 auto}}
@media(max-width:900px){
 body[data-mobile-page=start] .builder-exercise{padding:16px;margin-top:12px}
 body[data-mobile-page=start] .builder-task h3{font-size:19px;line-height:1.4;margin:5px 0}
 body[data-mobile-page=start] .builder-task .small{font-size:12px;margin:4px 0 12px}
 body[data-mobile-page=start] .builder-exercise .builder-select{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 body[data-mobile-page=start] .builder-preview{grid-template-columns:60px minmax(0,1fr) auto;gap:10px;margin-top:12px}
 body[data-mobile-page=start] .builder-preview .block-diagram{width:60px;height:60px;font-size:23px;border-radius:10px}
 body[data-mobile-page=start] .builder-preview .big{font-size:58px}
 body[data-mobile-page=start] .builder-preview button{font-size:13px;padding:10px;min-width:78px}
 body[data-mobile-page=start] .builder-exercise #builder-explain{font-size:12px;margin:4px 0 12px}
 body[data-mobile-page=start] .builder-help,body[data-mobile-page=start] .writing-panel{padding:8px 16px;margin-block:12px}
 body[data-mobile-page=start] .tiles{position:sticky;top:calc(var(--mobile-top-height) + 6px);z-index:4;padding:8px;background:#0b162bf5;border:1px solid #58dcff30;border-radius:14px;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 body[data-mobile-page=start] #consonants{grid-template-columns:repeat(4,minmax(0,1fr))}
 body[data-mobile-page=start] .tiles button{min-height:48px;padding:6px;font-size:26px}
 body[data-mobile-page=start] .tiles small{display:none}
 body[data-mobile-page=start] .word-view .actions{grid-template-columns:repeat(2,minmax(0,1fr))}
 body[data-mobile-page=start] .word-view .actions button{font-size:14px;padding:10px}
}
@media(min-width:380px) and (max-width:900px){body[data-mobile-page=start] #vowels{grid-template-columns:repeat(6,minmax(0,1fr))}}