/* V227 — one mobile rhythm for all roles. Semantic colors keep school branding. */
@media screen and (max-width:780px){
 html body #app :is(.topbar,.premium-teacher-head,.dm-student-header){box-sizing:border-box;min-height:72px!important;height:auto!important;padding:calc(10px + env(safe-area-inset-top)) 12px 10px!important;gap:8px!important;background:var(--surface)!important;border-bottom:1px solid var(--dm-line)!important;box-shadow:none!important}
 html body #app .topbar{grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important}
 html body #app :is(.topbar-main,.topbar-title-wrap,.teacher-school-brand,.dm-student-brand){min-width:0!important;max-width:100%;flex:1;gap:8px!important}
 html body #app :is(.mobile-school-brand,.teacher-school-brand,.dm-student-brand) strong{font-size:14px!important;font-weight:650!important;line-height:1.35!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;max-width:100%!important;color:var(--dm-ink)!important}
 html body #app :is(.mobile-school-brand,.teacher-school-brand,.dm-student-brand) small{font-size:11px!important;line-height:1.35;color:var(--dm-muted)!important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}
 html body #app :is(.mobile-school-brand,.teacher-school-brand,.dm-student-brand) :is(.school-brand-logo,.school-brand-initials){width:32px!important;height:32px!important;flex:0 0 32px!important;border-radius:10px!important}
 html body #app :is(.topbar-right,.teacher-head-actions,.dm-super-header-actions){display:flex!important;align-items:center!important;gap:2px!important;flex-shrink:0!important;width:auto!important;padding:0!important}
 html body #app :is(.topbar,.premium-teacher-head,.dm-student-header) :is(.icon-btn,.dm-profile-button,.teacher-logout){box-sizing:border-box;width:44px!important;height:44px!important;min-height:44px!important;flex:0 0 44px!important;padding:10px!important;border-radius:14px!important;display:grid!important;place-items:center!important}
 html body #app :is(.topbar,.premium-teacher-head,.dm-student-header) :is(.icon-btn,.teacher-logout){background:transparent!important;color:var(--dm-ink-2)!important;border-color:transparent!important;box-shadow:none!important}
 html body #app :is(.topbar,.premium-teacher-head,.dm-student-header) .icon{width:22px!important;height:22px!important}
 html body #app .teacher-logout>span{display:none!important}
 html body #app .dm-header-context{grid-column:1/-1!important;margin:0!important;min-width:0}
 html body #app .dm-header-context:empty{display:none!important}
 html body #app .dm-super-header-copy>span{font-size:11px!important;color:var(--dm-muted)!important}
 html body #app .dm-super-header-copy h2{font-size:17px!important}
 html body #app :is(.content,.dm-student-content){padding:18px 14px calc(110px + env(safe-area-inset-bottom))!important;min-width:0}
 html body #app .dm-teacher-screen{padding:18px 14px calc(110px + env(safe-area-inset-bottom))!important}
 html body #app #content :is(.hero h1,.dm-student-heading h1){font-size:25px!important;line-height:1.2!important;letter-spacing:-.035em!important;overflow-wrap:anywhere}
 html body #app :is(#content,.dm-teacher-screen) :is(.panel-head h2,.panel-head h3,.dm-teacher-home-section h2,.teacher-section-head h2){font-size:17px!important;line-height:1.35!important;letter-spacing:-.02em}
 html body #app :is(#content,.dm-teacher-screen) :is(.hero p,.panel-sub,.field-help,.teacher-section-head p,.dm-teacher-priority){font-size:13px!important;line-height:1.5!important;color:var(--dm-muted)!important}
 html body #app :is(#content,.dm-teacher-screen) :is(.btn,.icon-btn,.dm-text-button){min-height:44px!important;font-size:13px!important;line-height:1.4!important;box-sizing:border-box}
 html body #app :is(#content,.dm-teacher-screen) :is(.icon-btn,.dm-text-button){min-width:44px!important}
 html body #app :is(#content,.dm-teacher-screen) :is(.panel,.dm-teacher-home-section,.teacher-own-course){border-radius:18px!important;box-shadow:0 4px 18px #21123805!important}
 html body #app #content :is(.panel-head,.panel-body){padding:16px!important}
 html body #app #content :is(.hero-actions,.panel-head,.toolbar,.actions){gap:8px!important}
 html body #app #content .dm-mobile-welcome strong{font-size:22px!important;line-height:1.3!important;color:var(--dm-ink)!important}
 html body #app #content .dm-mobile-welcome small{font-size:13px!important;color:var(--dm-muted)!important}
 html body #app #content :is(.admin-dashboard-hero,.dm-secretary-hero){padding:18px!important;border-radius:20px!important;min-height:0!important}
 html body #app #content .home-quick-actions{gap:10px!important}
 html body #app #content .home-quick-actions>button{min-height:60px!important;font-size:13px!important;padding:12px!important;border-radius:16px!important}
 html body #app #content .home-quick-actions>button>span{width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:11px!important}
 html body #app #content .admin-dashboard-scope{margin:12px 0!important}
 html body #app #content .dashboard-kpi{padding:16px!important;min-height:0!important}
 html body #app #content .dashboard-kpi :is(.kpi-label,.kpi-sub,.dashboard-kpi-sub){font-size:12px!important;line-height:1.4!important}
 html body #app #content .dashboard-kpi strong{font-size:25px!important;line-height:1.2!important;overflow-wrap:anywhere}
 html body #app #content .dm-dashboard-section-label{font-size:13px!important;margin:20px 0 10px!important}
 html body #app :is(.mobile-nav,.teacher-bottom-nav,.dm-student-nav){box-sizing:border-box!important;position:fixed!important;left:12px!important;right:12px!important;width:auto!important;max-width:none!important;transform:none!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;height:72px!important;padding:6px!important;gap:2px!important;border:1px solid var(--dm-line)!important;border-radius:24px!important;background:var(--surface)!important;box-shadow:0 6px 24px #21123812!important;z-index:50}
 html body #app :is(.mobile-nav,.teacher-bottom-nav,.dm-student-nav) button{position:relative;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;min-width:0!important;min-height:58px!important;padding:4px 2px!important;border-radius:18px!important;font-size:10px!important;font-weight:550!important;line-height:1.2!important;background:transparent!important;color:var(--dm-muted)!important}
 html body #app :is(.mobile-nav,.teacher-bottom-nav,.dm-student-nav) button.active{background:var(--dm-brand-soft)!important;color:var(--dm-accent-text)!important;font-weight:700!important}
 html body #app :is(.mobile-nav,.teacher-bottom-nav,.dm-student-nav) .dm-tab-icon{display:grid!important;place-items:center!important;width:28px!important;height:28px!important;padding:0!important;border-radius:9px!important;background:transparent!important;color:inherit!important;box-shadow:none!important}
 html body #app :is(.mobile-nav,.teacher-bottom-nav,.dm-student-nav) .icon{width:22px!important;height:22px!important;color:inherit!important}
 html body #app :is(.mobile-nav,.teacher-bottom-nav,.dm-student-nav) button>span{font-size:11px!important;color:inherit!important}
 html body #app :is(.dm-menu-count,.teacher-nav-message-count,.dm-student-nav b){top:2px!important;right:8px!important;font-size:10px!important;line-height:1!important;min-width:18px!important;height:18px!important;box-sizing:border-box!important;display:grid;place-items:center}
 html body #app .dm-student-nav button{flex:1!important}
 html body #app #content :is(.dm-student-chips button,.dm-access-filter-chips button,.dm-task-filters button){min-height:40px!important;padding:8px 10px!important;font-size:12px!important}
 html body #app #content .student-name-link{min-height:44px!important;display:flex;align-items:center;font-size:15px!important;line-height:1.35!important;text-align:left;overflow-wrap:anywhere}
 html body #app #content .dm-student-mobile-detail{font-size:12px!important;line-height:1.5!important}
 html body #app #content .students-table-wrap tr{padding:12px!important;border-radius:16px!important}
 html body #app :is(.dm-course-heading h3,.teacher-own-course h3,.dm-master-card h3){font-size:16px!important;line-height:1.35!important;overflow-wrap:anywhere}
 html body #app :is(.dm-course-heading p,.dm-course-meta,.teacher-own-course p,.teacher-own-course .grow>span){font-size:12px!important;line-height:1.5!important}
 html body #app #content :is(input:not([type=checkbox]):not([type=radio]),select,textarea){min-height:44px!important;font-size:16px!important;box-sizing:border-box;max-width:100%}
 html body #app .dm-student-premium{padding:18px!important;background:var(--surface)!important;border:1px solid var(--dm-line)!important}
 html body #app .dm-student-premium h2{font-size:23px!important;color:var(--dm-ink)!important}
 html body #app .dm-student-premium .dm-sprint-intro{font-size:13px!important;color:var(--dm-muted)!important}
 html body #app .dm-student-kpis{gap:10px!important}
 html body #app .dm-student-kpis button{padding:15px!important;gap:8px!important;border-radius:16px!important}
 html body #app .dm-student-kpis small{font-size:12px!important;line-height:1.4!important}
 html body #app .dm-student-kpis strong{font-size:23px!important}
 html body #app #content .dm-student-menu .btn{justify-content:flex-start!important;text-align:left!important;padding:12px 14px!important}
 html body #app #content .dm-student-chat-title{min-height:60px!important;padding:12px 14px!important}
 html body #app #content .dm-receive-only{font-size:12px!important;line-height:1.5!important;color:var(--dm-muted)!important}
 html body #app #content .dm-student-date{flex-basis:72px!important}
 html body #app #content .dm-student-row small{font-size:12px!important}
 html body #app .dm-mobile-primary-action{bottom:calc(94px + env(safe-area-inset-bottom))!important}
 html body #app .dm-mobile-primary-action .btn{min-height:48px!important;font-size:13px!important;padding:12px 16px!important;box-shadow:0 6px 18px #21123818!important}
 html body:has(#modalWrap) #app .dm-mobile-primary-action,html body.dm-mobile-editing #app .dm-mobile-primary-action{display:none!important}
 html body #modalWrap .modal{box-sizing:border-box;max-width:calc(100vw - 20px)!important;max-height:calc(var(--dm-mobile-visible-height,100dvh) - 20px)!important}
 html body #modalWrap :is(.modal-head,.modal-foot){padding:14px 16px!important;gap:10px!important;flex-shrink:0}
 html body #modalWrap .modal-head h2{font-size:19px!important;line-height:1.3;overflow-wrap:anywhere}
 html body #modalWrap :is(.modal-head .icon-btn,.dm-access-close){width:44px!important;height:44px!important;min-height:44px!important;flex:0 0 44px!important;padding:11px!important;border:1px solid var(--dm-line)!important;background:var(--surface-2)!important;color:var(--dm-ink-2)!important;border-radius:14px!important}
 html body #modalWrap :is(.btn,.dm-selection-actions .btn){min-height:44px!important;font-size:12px!important;line-height:1.4!important}
 html body #modalWrap :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),textarea,select){font-size:16px!important;min-height:44px!important;box-sizing:border-box;max-width:100%}
 html body #modalWrap :is(.dm-card-dialog,.dm-smart-scanner-dialog,.dm-wa-dialog){max-width:100vw!important;max-height:100dvh!important}
 html body #modalWrap :is(.dm-card-dialog,.dm-smart-scanner-dialog)>.modal-head{padding-top:calc(10px + env(safe-area-inset-top))!important}
}
@media screen{
 html body #mobileMorePortal .mobile-more-backdrop{background:var(--dm-scrim)!important}
 html body #mobileMorePortal .mobile-more-sheet{box-sizing:border-box;display:flex!important;flex-direction:column!important;max-height:calc(var(--dm-mobile-visible-height,100dvh) - env(safe-area-inset-top) - 12px)!important;padding:8px 16px calc(12px + env(safe-area-inset-bottom))!important;overflow:hidden!important;border-radius:26px 26px 0 0!important;background:var(--surface)!important;color:var(--dm-ink)!important}
 html body #mobileMorePortal .mobile-more-head{margin:0 0 12px!important;flex-shrink:0;min-width:0}
 html body #mobileMorePortal .mobile-more-head>div{min-width:0}
 html body #mobileMorePortal .mobile-more-head strong{font-size:21px!important;letter-spacing:-.025em;color:var(--dm-ink)!important}
 html body #mobileMorePortal .mobile-more-head small{font-size:12px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dm-muted)!important}
 html body #mobileMorePortal .mobile-more-head .icon-btn{width:44px!important;height:44px!important;min-height:44px!important;padding:11px!important;background:var(--surface-2)!important;color:var(--dm-ink-2)!important;border:1px solid var(--dm-line)!important;border-radius:14px!important}
 html body #mobileMorePortal .mobile-more-grid{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:auto!important;overscroll-behavior:contain;gap:16px!important;padding:0 0 14px!important}
 html body #mobileMorePortal .dm-menu-section h3{font-size:12px;letter-spacing:.03em;font-weight:600;color:var(--dm-muted);margin:0 0 8px}
 html body #mobileMorePortal .dm-menu-section>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 html body #mobileMorePortal .mobile-more-grid button{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:9px!important;box-sizing:border-box;min-height:54px!important;min-width:0;padding:12px!important;border:1px solid var(--dm-line)!important;border-radius:14px!important;background:var(--surface-2)!important;color:var(--dm-ink)!important;font-size:13px!important;font-weight:550!important;text-align:left}
 html body #mobileMorePortal .mobile-more-grid button>span{min-width:0;overflow-wrap:anywhere;line-height:1.4}
 html body #mobileMorePortal .mobile-more-grid button>.icon{width:20px!important;height:20px!important;flex:0 0 20px;color:var(--dm-accent-text)!important}
 html body #mobileMorePortal .mobile-more-grid button.active{background:var(--dm-brand-soft)!important;border-color:var(--dm-brand-border)!important;color:var(--dm-accent-text)!important}
 html body #mobileMorePortal :is(.mobile-more-logout,.mobile-more-support){display:flex!important;align-items:center;justify-content:center;gap:9px;min-height:48px!important;flex-shrink:0;font-size:13px!important;font-weight:600!important;color:var(--dm-ink)!important;background:var(--surface-2)!important;border:1px solid var(--dm-line)!important;border-radius:14px!important;margin:8px 0 0!important}
 html body #mobileMorePortal .dm-menu-count{right:5px!important;top:3px!important}
 html body:has(#mobileMorePortal) {overflow:hidden!important}
 html body:has(#mobileMorePortal) #app{pointer-events:none}
 html body :is(#app,#modalWrap,#mobileMorePortal) :is(button,a,summary,label.btn){touch-action:manipulation;-webkit-tap-highlight-color:transparent}
 html body :is(#app,#modalWrap,#mobileMorePortal) :is(button,a,input,textarea,select,summary):focus-visible{outline:2px solid var(--dm-accent-text)!important;outline-offset:3px}
}
@media screen and (max-width:360px){html body #mobileMorePortal .dm-menu-section>div{grid-template-columns:1fr}html body #app :is(.mobile-school-brand,.teacher-school-brand) .school-brand-logo{display:none!important}html body #app :is(.mobile-school-brand,.teacher-school-brand) .school-brand-initials{display:none!important}html body #app :is(.mobile-nav,.teacher-bottom-nav,.dm-student-nav) button>span{font-size:10px!important}}
@media screen and (max-height:500px) and (max-width:900px){html body #mobileMorePortal .mobile-more-sheet{max-height:calc(100dvh - 8px)!important}html body #mobileMorePortal .dm-menu-section>div{grid-template-columns:repeat(3,minmax(0,1fr))}html body #mobileMorePortal .mobile-more-grid{gap:10px!important}html body #mobileMorePortal .mobile-more-head{margin-bottom:6px!important}html body #app :is(.mobile-nav,.teacher-bottom-nav,.dm-student-nav){height:62px!important}html body #app :is(.mobile-nav,.teacher-bottom-nav,.dm-student-nav) button{min-height:48px!important}}
@media(prefers-reduced-motion:no-preference){html body #app :is(.mobile-nav,.teacher-bottom-nav,.dm-student-nav) button{transition:background-color .18s ease,color .18s ease!important}html body :is(#app,#modalWrap,#mobileMorePortal) button:active{filter:brightness(.96)}}
@media(prefers-reduced-motion:reduce){html body :is(#app,#modalWrap,#mobileMorePortal) *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media screen and (max-width:780px){
 html body #app :is(.mobile-nav,.teacher-bottom-nav,.dm-student-nav) button>.dm-menu-count{color:var(--dm-badge-text)!important;font-size:10px!important}
 html body #app :is(.mobile-nav,.teacher-bottom-nav,.dm-student-nav) button.active>.dm-tab-icon{background:transparent!important;color:var(--dm-accent-text)!important;box-shadow:none!important}
}
@media screen and (max-width:780px){
 html body #app :is(.topbar,.premium-teacher-head) :is(.dm-communication-button,.dm-notification-bell,.dm-browser-nav button){box-sizing:border-box;width:44px!important;height:44px!important;min-height:44px!important;flex:0 0 44px!important;padding:10px!important;display:grid!important;place-items:center!important;border-radius:14px!important}
 html body #app .topbar .dm-browser-nav{display:none!important}
}
/* Student welcome uses theme-aware surfaces; decorative gradients never hide text. */
@media screen{
 html body #app #content .dm-student-premium{background:var(--dm-brand-soft)!important;color:var(--dm-ink)!important;border:1px solid var(--dm-brand-border)!important;box-shadow:none!important}
 html body #app #content .dm-student-premium::after{border-color:var(--dm-brand-border)!important;opacity:.35}
 html body #app #content .dm-student-premium :is(h2,strong){color:var(--dm-ink)!important}
 html body #app #content .dm-student-premium :is(p,small,span){color:var(--dm-muted)!important}
 html body #app #content .dm-student-premium .dm-next-lesson{border-color:var(--dm-brand-border)!important;gap:6px}
 html body #app #content .dm-student-premium .dm-next-lesson>span{margin-bottom:4px!important}
 html body #app #content .dm-student-premium .btn{background:var(--surface)!important;color:var(--dm-accent-text)!important;border:1px solid var(--dm-brand-border)!important;margin-top:8px!important}
}
@media screen and (max-width:780px){
 html body #app nav.mobile-nav.dm-super-mobile-nav button.active>.dm-tab-icon{background:transparent!important;color:var(--dm-accent-text)!important}
 html body #app :is(.dm-teacher-agenda-icon,.dm-teacher-shortcuts>button>span,.dm-teacher-overview>button>span>.icon){background:var(--dm-brand-soft)!important;color:var(--dm-accent-text)!important}
 html body #app .dm-teacher-home-section-head .dm-text-button{color:var(--dm-accent-text)!important}
 html body #app .dm-teacher-overview>button{border-radius:16px!important;padding:15px!important}
 html body #app .dm-teacher-overview>button>span{font-size:12px!important;color:var(--dm-muted)!important}
 html body #app .dm-teacher-overview>button>small{font-size:12px!important;color:var(--dm-muted)!important}
 html body #app .dm-teacher-shortcuts>button{min-height:68px!important}
 html body #app .dm-teacher-shortcuts>button strong{font-size:14px!important}
 html body #app .dm-teacher-shortcuts>button small{font-size:12px!important;color:var(--dm-muted)!important}
}
@media(prefers-reduced-motion:no-preference) and (max-width:780px){html body #app #content>.hero,html body #app #content>.hero~:is(.panel,.card-grid,.table-wrap,.kpi-grid){animation-duration:.18s!important}}