/* UstozOne mobile app contract — v24.1.5
   Mobile is a first-class app surface, not a shrunken desktop page. */
@media (max-width:760px){
  :root{--content-pad:12px;--mobile-nav-h:68px}
  html{width:100%;min-height:100%;overflow-x:hidden;overflow-y:auto;background:#f3f6fa}
  body{width:100%;min-height:100dvh;height:auto;overflow-x:hidden;overflow-y:auto;background:#f3f6fa;-webkit-tap-highlight-color:transparent;-webkit-overflow-scrolling:touch}
  .app-shell{width:100%;max-width:none;min-height:100dvh;height:auto!important;background:#f3f6fa;overflow-x:hidden;overflow-y:visible}
  .app-view{min-height:100dvh;height:auto!important;overflow-x:hidden;overflow-y:visible;padding-bottom:calc(var(--mobile-nav-h) + var(--safe-bottom) + 8px);background:#f3f6fa}
  .page{width:100%;min-width:0;padding:12px 12px 24px}
  .stack{gap:10px}
  .row{gap:8px}

  /* Native-app header: one compact hierarchy, no desktop-sized whitespace. */
  .topbar{position:sticky;top:0;z-index:45;min-height:56px;padding:calc(7px + var(--safe-top)) 12px 7px;background:rgba(255,255,255,.98);border-bottom:1px solid #dfe6ef;backdrop-filter:saturate(130%) blur(14px)}
  .topbar-main{gap:6px}
  .topbar .icon-btn.flat{width:36px;height:36px;flex-basis:36px;border-radius:10px;background:#f4f7fb;border:1px solid #e3e9f1;color:#17345f}
  .topbar-title{font-size:16px;line-height:1.15;letter-spacing:-.025em}
  .topbar-sub{max-width:68vw;margin-top:2px;font-size:9.5px;line-height:1.2}
  .topbar-right{display:flex;align-items:center;gap:4px}
  .topbar-actions{gap:4px}
  .topbar-right .icon-btn,.topbar-actions .icon-btn{width:36px;height:36px;border-radius:10px}
  .topbar-wallet-chip{min-height:36px;padding:0 8px;border-radius:10px}
  .topbar-profile-chip{min-height:36px}
  .topbar-profile-chip .avatar.sm{width:32px;height:32px;border-radius:9px}

  /* Real mobile bottom tab bar with labels. */
  .bottom-nav{left:0;right:0;bottom:0;transform:none;width:100%;max-width:none;min-height:var(--mobile-nav-h);display:grid;grid-template-columns:repeat(var(--nav-count,5),minmax(0,1fr));align-items:end;padding:6px 5px calc(5px + var(--safe-bottom));background:rgba(255,255,255,.98);border-top:1px solid #dce4ee;box-shadow:0 -8px 24px rgba(16,35,63,.07);backdrop-filter:saturate(130%) blur(14px)}
  .bottom-nav .desktop-nav-brand{display:none!important}
  .bottom-nav .nav-item{width:100%;min-width:0;min-height:52px;margin:0;padding:4px 2px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:10px;color:#7d8b9f;font-size:9px;font-weight:700}
  .bottom-nav .nav-item .nav-icon-wrap{min-width:28px;min-height:26px}
  .bottom-nav .nav-item i{font-size:16px}
  .bottom-nav .nav-label{display:block!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8.5px;line-height:1.05}
  .bottom-nav .nav-item.active{background:transparent;color:#125fff}
  .bottom-nav .nav-item.active .nav-icon-wrap{background:#edf4ff;border-radius:9px;padding:2px 7px}
  .bottom-nav .nav-item.create{width:auto;height:auto;min-height:52px;margin:0;background:transparent;color:#125fff;border-radius:10px}
  .bottom-nav .nav-item.create .nav-icon-wrap{width:30px;height:30px;min-width:30px;min-height:30px;border-radius:10px;background:#125fff;color:#fff;box-shadow:0 5px 12px rgba(18,95,255,.22)}
  .bottom-nav .nav-item.create i{font-size:14px}
  .nav-unread{top:-4px;right:-7px}

  /* Common surfaces: app rows/cards, not floating website panels. */
  .card{padding:13px;border-radius:12px;box-shadow:none}
  .section-title{margin-top:2px;gap:8px}
  .section-title h3{font-size:14px}
  .title-lg{font-size:24px}
  .title-md{font-size:17px}
  .btn{min-height:44px;border-radius:10px;font-size:12px}
  .btn.small{min-height:40px;border-radius:9px}
  .icon-btn{width:40px;height:40px;border-radius:10px}
  .input,.textarea,.select{font-size:16px;border-radius:10px}
  .input{height:46px}
  .textarea{min-height:88px}
  .badge{border-radius:7px}

  /* Mobile sheets always behave like native bottom drawers. */
  .sheet-backdrop{background:rgba(8,18,34,.42)}
  .action-sheet,.action-sheet.confirm-sheet,.action-sheet.test-export-sheet{top:auto!important;left:0!important;right:0!important;bottom:0!important;transform:none!important;width:100%!important;max-width:none!important;max-height:min(88dvh,760px);overflow:auto;border-width:1px 0 0!important;border-radius:18px 18px 0 0!important;padding:14px 14px calc(16px + var(--safe-bottom))!important;box-shadow:0 -18px 52px rgba(8,24,48,.17)!important}
  .action-sheet>.sheet-handle{display:block;width:42px;height:4px;margin:0 auto 12px;border-radius:99px;background:#d4dce6}

  /* Home: useful actions first. */
  .market-home-v1{gap:10px;padding:10px 10px 22px}
  .home-communication-hub{border-radius:13px;box-shadow:none}
  .home-communication-hub>header{padding:12px 13px}
  .home-communication-hub>header h1{font-size:18px}
  .home-communication-grid>button{min-height:70px;padding:10px 8px;justify-items:center;text-align:center}
  .home-communication-grid>button>span{width:32px;height:32px;border-radius:9px}
  .home-communication-grid strong{font-size:10px}
  .home-communication-grid small{display:none}
  .home-market-actions{grid-template-columns:1fr 1fr;gap:8px}
  .home-market-actions>button{min-height:62px;padding:9px;border-radius:12px;grid-template-columns:34px minmax(0,1fr) 10px}
  .home-market-actions>button>span{width:34px;height:34px;border-radius:9px}
  .home-market-actions strong{font-size:10.5px}
  .home-market-actions small{display:none}
  .home-english-strip,.home-ai-strip{min-height:66px;padding:11px 12px;border-radius:12px;box-shadow:none}
  .home-english-strip small,.home-ai-strip small{display:none}
  .home-feed-section{gap:7px}
  .home-section-head{min-height:auto;padding:4px 2px}
  .home-section-head h2{font-size:14px}
  .home-section-head small{display:none}
  .home-tail-stream{gap:8px}

  /* School: no oversized hero, no duplicate web-style cards. */
  .school-subjects-page{gap:12px;padding:12px 10px 24px}
  .school-subjects-live>header .eyebrow{display:none}
  .school-subjects-live h2,.school-subject-group h2{font-size:13px}
  .school-subject-group header small{font-size:8px}
  .school-subject-live-grid,.school-subject-grid{grid-template-columns:1fr!important;gap:7px!important}
  .school-subject-card,.school-subject-card.is-featured{grid-template-columns:44px minmax(0,1fr) 32px!important;min-height:68px!important;padding:9px 10px!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important}
  .school-subject-icon,.school-subject-card.is-featured .school-subject-icon{width:42px!important;height:42px!important;border-radius:10px!important;font-size:17px!important}
  .school-subject-title strong,.school-subject-card.is-featured .school-subject-title strong{font-size:12px!important}
  .school-subject-copy>small,.school-subject-card.is-featured .school-subject-copy>small{display:none!important}
  .school-subject-badge{min-height:18px;padding:0 5px;font-size:7px}
  .school-subject-deco{display:none!important}
  .school-subject-cta,.school-subject-card.is-featured .school-subject-cta{grid-column:auto!important;justify-self:end!important;width:30px;height:30px;min-height:30px!important;padding:0!important;border-radius:8px!important;font-size:0!important}
  .school-subject-cta i{font-size:9px!important}

  /* Subject hubs: choice lists, not marketing banners. */
  .school-subject-hub-page{gap:10px;padding:12px 10px 24px}
  .school-subject-main-split,.school-subject-subgrid{grid-template-columns:1fr!important;gap:8px!important}
  .school-subject-section-card,.school-english-track-grid .school-subject-section-card{grid-template-columns:42px minmax(0,1fr) 30px;min-height:72px!important;padding:10px!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important;align-items:center!important}
  .school-subject-section-icon{width:40px;height:40px;border-radius:10px;font-size:16px}
  .school-subject-section-copy{gap:2px}
  .school-subject-section-kicker{font-size:7px}
  .school-subject-section-copy strong,.school-english-track-grid .school-subject-section-copy strong{font-size:12.5px!important}
  .school-subject-section-copy small,.school-english-track-grid .school-subject-section-copy small{display:none!important}
  .school-subject-section-arrow{width:30px;height:30px;border-radius:8px}
  .school-english-track-grid .school-subject-section-card:before{display:none}

  /* English learning dashboard: lesson-first; secondary analytics stay compact. */
  .el-page{width:100%!important;margin:0 0 calc(var(--mobile-nav-h) + 8px)!important;padding:10px!important;gap:10px!important}
  .el-master-hero{padding:14px!important;border-radius:13px!important;gap:10px!important}
  .el-master-hero h1{font-size:21px!important;line-height:1.1!important;margin:4px 0 5px!important}
  .el-master-hero p{display:none!important}
  .el-master-tags{gap:5px!important;margin-top:8px!important}
  .el-master-tags span{font-size:8px!important;padding:5px 7px!important}
  .el-master-score{min-width:82px!important;padding:9px!important;border-radius:10px!important}
  .el-master-score strong{font-size:24px!important}
  .el-master-score span{font-size:8px!important}
  .el-section{padding:13px!important;border-radius:12px!important}
  .el-section>header{margin-bottom:10px!important;align-items:center!important}
  .el-section>header>span{display:none!important}
  .el-section h2{font-size:16px!important}
  .el-kicker{font-size:8px!important}
  .el-goal-section{padding:12px!important}
  .el-goal-grid{display:flex!important;gap:7px!important;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .el-goal-grid::-webkit-scrollbar{display:none}
  .el-goal-choice{flex:0 0 auto;min-width:116px!important;padding:9px 10px!important;border-radius:10px!important}
  .el-goal-choice strong{font-size:11px!important}
  .el-goal-choice small{display:none!important}
  .el-diagnostic-card{padding:12px!important;border-radius:12px!important;gap:10px!important}
  .el-diagnostic-card h2{font-size:14px!important;margin:2px 0!important}
  .el-diagnostic-card p{display:none!important}
  .el-diagnostic-card .btn{width:auto!important;min-width:120px}
  .el-today{padding:14px!important;border-radius:13px!important;gap:12px!important}
  .el-today h2{font-size:18px!important;margin:3px 0!important}
  .el-today p{display:none!important}
  .el-today-copy>div{margin-top:8px!important;gap:10px!important}
  .el-today .btn{width:auto!important;align-self:stretch;min-width:108px}
  .el-stats{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .el-stats>div{padding:10px!important;border-radius:10px!important}
  .el-stats span{font-size:9px!important}
  .el-stats strong{margin-top:4px!important;font-size:15px!important}
  .el-mastery-grid{gap:8px!important}
  .el-skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .el-skill{padding:10px!important;border-radius:9px!important}
  .el-skill span{font-size:9px!important}.el-skill strong{font-size:16px!important;margin:5px 0!important}
  .el-focus-row{padding:9px!important}
  .el-mastery-rules{grid-template-columns:1fr!important;gap:7px!important}
  .el-roadmap{gap:6px!important}
  .el-lesson-row,.el-test-row{min-height:60px;padding:9px 10px!important;border-radius:10px!important;gap:9px!important}
  .el-lesson-row small,.el-test-row small{font-size:8.5px!important;line-height:1.3}
  .el-level-grid{display:flex!important;overflow-x:auto;gap:7px!important;scrollbar-width:none}
  .el-level-grid::-webkit-scrollbar{display:none}
  .el-level{flex:0 0 112px;min-height:88px!important;padding:10px!important;border-radius:10px!important}
  .el-level span{font-size:15px!important}.el-level strong{font-size:10px!important;margin:5px 0!important}.el-level small{font-size:8px!important}
  .el-ielts-grid{display:flex!important;overflow-x:auto;gap:7px!important;scrollbar-width:none}
  .el-ielts-grid::-webkit-scrollbar{display:none}
  .el-ielts-band{flex:0 0 92px!important;min-width:92px!important}
  .el-roadmap-note{font-size:9px!important;line-height:1.4}

  /* Lessons and tests: readable, touch-friendly, no desktop widths. */
  .el-lesson-page,.el-test-page{max-width:none!important}
  .el-lesson-head{padding:8px 2px 2px!important;align-items:flex-start!important}
  .el-lesson-head h1{font-size:23px!important;margin:3px 0!important}
  .el-lesson-head p{font-size:10px!important}
  .el-card{padding:14px!important;border-radius:12px!important}
  .el-card h2{font-size:17px!important;margin:4px 0 10px!important}
  .el-explain{font-size:13px!important;line-height:1.55!important}
  .el-word-grid{grid-template-columns:1fr!important;gap:6px!important}
  .el-examples button,.el-word-grid button{min-height:46px;border-radius:9px!important}
  .el-exercise{padding:11px!important;border-radius:10px!important}
  .el-ex-q{align-items:flex-start!important}
  .el-ex-q strong{font-size:13px!important;line-height:1.4}
  .el-options{grid-template-columns:1fr!important;gap:7px!important}
  .el-options button,.el-order-tokens button{min-height:44px;border-radius:9px!important}
  .el-speaking p{font-size:14px!important}
  .el-speaking-actions{gap:7px!important}
  .el-finish{padding:13px!important;border-radius:12px!important;box-shadow:none!important}
  .el-finish small{font-size:9px!important}
  .el-test-head{padding:13px!important;border-radius:12px!important;gap:10px!important}
  .el-test-head h1{font-size:20px!important}
  .el-test-head p{display:none!important}
  .el-test-goals{grid-template-columns:1fr!important;gap:10px!important}
  .el-test-meta{grid-template-columns:1fr 1fr!important}
  .el-test-submit{padding:12px!important;border-radius:12px!important}
  .el-test-submit small{display:none!important}
  .el-diagnostic-block>header small{display:none!important}

  /* Horizontal overflow is never allowed to break the phone viewport. */
  table{max-width:100%}
  .tabs,.chip-row,.filter-row{max-width:100%}
  .math-quickbar,.diagram-tools{overscroll-behavior-x:contain}
}

@media (max-width:390px){
  .bottom-nav .nav-label{font-size:8px}
  .home-market-actions{grid-template-columns:1fr}
  .el-master-hero{flex-direction:column!important;align-items:stretch!important}
  .el-master-score{width:100%!important;display:flex!important;align-items:baseline!important;justify-content:space-between!important}
  .el-today{flex-direction:column!important;align-items:stretch!important}
  .el-today .btn{width:100%!important}
}