/* Screen-only shell. Existing module permissions and physical output are unchanged. */
@media screen {
  #app > .side { min-width: 0; }
  #app > .main { min-width: 0; }
  #app > .side #nav button { min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; }
  #app :is(.mobile-menu-toggle-v102,.mobile-menu-header-v102,.mobile-menu-backdrop-v102) { display: none; }
  #app :is(.mobile-menu-toggle-v102,.mobile-menu-close-v102):focus-visible,
  #app > .side button:focus-visible { outline: 3px solid #66e0d3; outline-offset: 2px; }
}
@media screen and (max-width: 720px) {
  #app { display: block; height: 100vh; height: 100dvh; overflow: hidden; }
  #app > .main { height: 100vh; height: 100dvh; padding-bottom: 0; overscroll-behavior-y: contain; }
  #app.mobile-nav-open-v102 > .main { overflow: hidden; }
  #app > .main > .topbar { min-height: 64px; gap: 9px; padding: 10px 12px; }
  #app > .main > .topbar h1 { flex: 1; font-size: 16px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
  #app > .main > .topbar .clock,
  #app > .main > .topbar::after { display: none; }
  #app > .main > .topbar .brand-logo-topbar { width: 38px; height: 36px; border-radius: 9px; }
  #app .mobile-menu-toggle-v102:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; min-height: 42px; padding: 9px 10px; border: 1px solid #b5dfda; border-radius: 10px; background: #fff; color: #00766d; font-size: 13px; font-weight: 750; }
  #app .mobile-menu-icon-v102 { display: block; width: 16px; height: 12px; border-block: 2px solid currentColor; position: relative; }
  #app .mobile-menu-icon-v102::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid currentColor; }
  /* Closed before JavaScript starts: the legacy bottom bar never flashes. */
  #app > .side { position: fixed; inset: 0 auto 0 0; z-index: 38; width: min(304px,calc(100vw - 36px)); height: 100vh; height: 100dvh; max-height: 100dvh; display: flex; flex-direction: column; gap: 0; padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); border: 0; border-right: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg,#00766d,#04332f); box-shadow: 12px 0 36px rgba(4,51,47,.22); transform: translateX(-100%); visibility: hidden; pointer-events: none; overflow: hidden; }
  #app.mobile-nav-open-v102 > .side { transform: translateX(0); visibility: visible; pointer-events: auto; }
  #app > .side .mobile-menu-header-v102:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; margin-bottom: 12px; color: #fff; font-size: 14px; }
  #app .mobile-menu-close-v102 { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; color: #fff; background: rgba(255,255,255,.09); font-size: 27px; line-height: 1; }
  #app > .side .brand-logo-sidebar { display: flex; height: 62px; margin: 0 0 10px; border-radius: 12px; }
  #app > .side #nav { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: flex-start; gap: 5px; width: 100%; height: auto; min-height: 0; margin: 0; padding: 2px 4px 8px 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: none; scrollbar-width: thin; }
  #app > .side #nav::-webkit-scrollbar { display: block; width: 5px; }
  #app > .side #nav button { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 11px; width: 100%; min-width: 0; height: auto; min-height: 44px; padding: 10px 12px; font-size: 14px; line-height: 1.3; border-radius: 10px; scroll-snap-align: none; }
  #app > .side #nav button .ic { flex: 0 0 22px; width: 22px; font-size: 17px; line-height: 1.2; }
  #app > .side #nav button.active { background: #009587; box-shadow: 0 4px 12px rgba(0,44,40,.16); }
  #app > .side .who { display: block; flex: 0 0 auto; margin-top: 8px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.12); }
  #app > .side .who :is(.nm,.rl) { overflow-wrap: anywhere; }
  #app > .side .who button { min-height: 40px; margin-top: 7px; font-size: 13px; }
  #app .mobile-menu-backdrop-v102:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 37; background: rgba(4,32,29,.48); }
}
@media screen and (max-width: 720px) and (max-height: 540px) {
  #app > .side .brand-logo-sidebar { display: none; }
}