/* Phase 7: compact mobile-first UI. Loaded last to defeat legacy grid overrides. */
.app>header{position:relative;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;flex-wrap:nowrap!important;min-height:60px!important;height:60px!important;padding:7px 18px!important;gap:8px!important}
.app>header .identity{display:flex!important;flex:1 1 auto!important;min-width:0!important;width:auto!important;gap:0!important;align-items:center!important}
.app>header .brand{display:flex!important;flex:1 1 auto!important;min-width:0!important;max-width:100%!important;align-items:center!important;gap:7px!important;grid-column:auto!important;margin:0!important}
.app>header .avatar{width:32px!important;height:32px!important;flex:0 0 32px!important;border-radius:10px!important}
.app>header #brandTitle{display:flex!important;flex:1 1 auto!important;min-width:0!important;align-items:center!important;gap:4px!important;flex-wrap:nowrap!important}
.app>header #brandTitle .title-name{min-width:0!important;max-width:none!important;flex:1 1 auto!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important;min-height:32px!important;padding:0!important;text-align:left!important;font-size:13px!important}
.app>header #brandTitle .streak-badge{flex:0 0 auto!important;margin:0!important;padding:2px 4px!important;min-height:28px!important;font-size:10px!important}
.app>header .header-right{display:flex!important;position:static!important;flex:0 0 auto!important;align-items:center!important;gap:1px!important;height:auto!important;right:auto!important;bottom:auto!important}
.app>header .header-right>.iconbtn{width:34px!important;min-width:34px!important;height:40px!important;padding:0!important}
.app>header .header-right svg{width:18px!important;height:18px!important}
.app>header .header-more{font-size:15px;font-weight:700;letter-spacing:1px;line-height:1}
.app>header .header-hidden-refresh,.app>header #themeButton{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;pointer-events:none!important;opacity:0!important}
.app>header .header-more-menu{position:absolute;right:12px;top:calc(100% - 1px);z-index:1400;min-width:178px;padding:6px;background:var(--paper);color:var(--text);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 32px #15231b27}
.app>header .header-more-menu[hidden]{display:none!important}
.app>header .header-more-menu button{display:block;width:100%;min-height:42px;padding:9px 12px;text-align:left;border-radius:8px;font-size:13px}
.app>header .header-more-menu button:hover,.app>header .header-more-menu button:focus-visible{background:var(--bg)}
.app:not(.teacher)>header .header-more-menu .teacher-tools{display:none!important}
.workspace-nav{margin:8px 18px 0!important;padding:3px!important}
.workspace-nav button{min-height:38px!important;padding:6px 14px!important}
.app main{padding:14px 18px 42px!important}
.workspace-heading{margin-bottom:8px!important}
.workspace-heading h1{font-size:17px!important}
.section-kicker{font-size:9px!important;margin-bottom:0!important}
.teacher .studentstrip{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;max-width:100%;gap:5px!important;margin-bottom:9px!important;padding:0 0 3px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.teacher .studentstrip::-webkit-scrollbar{display:none}
.teacher .studentstrip .studentchip{width:max-content!important;min-width:0!important;max-width:none!important;flex:0 0 auto!important;white-space:nowrap!important;word-break:keep-all!important;padding:6px 10px!important;min-height:36px!important;height:36px!important}
.teacher .managebox{padding:9px 11px!important;gap:8px!important;margin-bottom:4px!important}
.teacher .management-links{margin-top:3px!important;gap:1px!important}
.teacher .management-links button{min-height:34px!important;padding:5px 7px!important}
.teacherpanel{margin-bottom:10px!important}
.toolbar{margin-bottom:9px!important}
.searchbox{margin-bottom:8px!important}
.statline{padding:7px 0 9px!important}
.dark .header-more-menu{background:var(--paper);border-color:var(--line);color:var(--text)}
@media(max-width:620px){.app>header{padding:5px 10px!important;height:54px!important;min-height:54px!important;gap:2px!important}.app>header .avatar{width:30px!important;height:30px!important;flex-basis:30px!important}.app>header .brand{gap:4px!important}.app>header .header-right>.iconbtn{width:32px!important;min-width:32px!important}.app>header #brandTitle .title-name{font-size:12px!important}.app>header #brandTitle .streak-badge{font-size:9px!important}.workspace-nav{margin:7px 10px 0!important}.app main{padding:11px 11px 34px!important}.teacher .managebox{flex-wrap:wrap!important}.teacher .manageactions{margin-left:auto}.teacher .manageactions button{min-height:36px!important}.teacher .studentstrip{margin-bottom:7px!important}.workspace-heading h1{font-size:16px!important}.teacher .wordrow{min-height:60px!important;padding:11px 6px!important}.wordrow{min-height:60px!important;padding:11px 6px!important}}
@media(max-width:375px){.app>header{padding-inline:7px!important}.app>header .header-right>.iconbtn{width:30px!important;min-width:30px!important}.app>header #brandTitle .streak-badge{padding-inline:2px!important}.app>header #brandTitle .title-name{font-size:11px!important}}
@media(prefers-reduced-motion:reduce){.app>header *,.teacher .studentstrip *{animation:none!important;transition:none!important}}