/* Route workspaces reserve space for the fixed bottom navigation. */
html{--app-nav-height:59px}
html,body{height:100%;min-height:0;overflow:hidden;background:#103378}
body .app-frame:has(.screen.is-active){position:fixed!important;inset:0!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;margin:0!important;padding:env(safe-area-inset-top,0px) 0 0!important;overflow:hidden!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#103378!important}
body .app-frame:has(.screen.is-active)::before,body .app-frame:has(.screen.is-active)::after{display:none!important}
body .app-frame>.topbar{position:relative!important;inset:auto!important;transform:none!important;translate:none!important;display:flex;flex:0 0 auto;min-width:0;align-self:stretch;gap:8px;width:100%;max-width:none;height:auto;min-height:56px;margin:0;padding:7px max(14px,env(safe-area-inset-right,0px)) 7px max(14px,env(safe-area-inset-left,0px));border-radius:0;border:0;border-bottom:1px solid #ffffff25;box-shadow:none;z-index:35;background:#103378}
body .app-frame>main#main-content{position:relative!important;display:block!important;flex:1 1 0!important;width:100%!important;max-width:none!important;min-width:0!important;min-height:0!important;height:auto!important;max-height:none!important;margin:0!important;padding:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:contain;scrollbar-width:thin;scroll-padding-block:12px;background:#f2f5fc;isolation:isolate}
body #main-content>.screen:not([data-screen="mixer"]){--workspace-bg:#f2f5fc;--workspace-gutter:clamp(14px,2.5vw,36px);width:100%;max-width:none;min-height:100%;margin:0;padding:var(--workspace-gutter);padding-bottom:24px;background:var(--workspace-bg);border:0;border-radius:0;box-shadow:none;animation:none}
body #main-content>.screen[data-screen="inicio"]{--workspace-bg:#eaf1ff}
body #main-content>.screen[data-screen="feed"],body #main-content>.screen[data-screen="perfil"]{--workspace-bg:#fff}
body #main-content>.screen[data-screen="mi-crew"]{--workspace-bg:#edf5f7}
body #main-content>.screen[data-screen="agenda"],body #main-content>.screen[data-screen="asesorias"]{--workspace-bg:#edf2fc}
body #main-content>.screen[data-screen="merch"]{--workspace-bg:#fff7f2}
body #main-content>.screen[data-screen="explorar"],body #main-content>.screen[data-screen="espacio"]{--workspace-bg:#e8efff}
body #main-content>.screen.admin-screen{--workspace-bg:#edf2fb}
/* Intro is the section's header, attached to its canvas rather than a floating card. */
body #main-content>.screen:not([data-screen="mixer"])>.page-intro:not(.feed-page-intro){width:100%;max-width:100%;margin:0 0 18px;padding:16px var(--workspace-gutter);border:0;border-radius:0;box-shadow:none}
body #main-content>.screen:not([data-screen="mixer"])>.page-intro::after{display:none}
body #main-content>.screen>.welcome-card,body #main-content>.screen>.merch-hero{width:100%;max-width:100%;margin:0 0 18px;border:0;border-radius:0;box-shadow:none}
body #main-content>.screen>.profile-page-intro{padding-bottom:13px;border-bottom:1px solid #dbe5f7}
/* Full-width workspace, readable content width where photos or paragraphs require it. */
body #main-content>.feed-screen{padding-top:10px}
body #main-content>.feed-screen>.feed-page-intro{max-width:760px;margin:0 auto 10px;padding:0;background:none;border:0;box-shadow:none}
body #main-content>.feed-screen>.feed-content{max-width:760px;margin-inline:auto}
body #main-content>.profile-screen>.my-profile-shell{max-width:1100px;margin-inline:auto}
body #main-content>.screen>.crew-content{width:100%}
body #main-content .feed-posts-panel .social-post-card{box-shadow:none}
/* Fixed to the bottom edge on every route except Mixer. */
body .app-frame:has(.screen.is-active)>.tab-bar{position:fixed!important;inset:auto 0 0!important;display:flex!important;flex-direction:row!important;flex:0 0 auto!important;align-items:center!important;justify-content:space-evenly!important;gap:3px!important;width:100%!important;max-width:none!important;min-height:0!important;max-height:none!important;height:auto!important;margin:0!important;padding:6px max(7px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(7px,env(safe-area-inset-left,0px))!important;border:0!important;border-top:1px solid #ffffff2b!important;border-radius:0!important;transform:none!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;scrollbar-width:none;z-index:50;background:#103378!important;box-shadow:none!important;backdrop-filter:none!important}
body .app-frame>.tab-bar>.tab{display:flex;flex:0 0 auto;min-width:70px;max-width:none;height:46px;margin:0;padding:5px 7px;border-radius:10px;gap:3px;font-size:10px;color:#edf3ff;text-align:center}
body .app-frame>.tab-bar>.tab.is-selected{background:#1457ff;color:white}body .app-frame>.tab-bar>.tab.is-selected:before{top:0;height:2px;width:24px}
body .app-frame>.tab-bar>.tab svg{width:20px;height:20px;flex:none}body .app-frame>.tab-bar>.tab span{max-width:100%;white-space:nowrap;overflow:visible;text-overflow:clip}
body .app-frame>.tab-bar>.account-tab{position:relative}
body .app-frame>.tab-bar>.account-tab img,body .app-frame>.tab-bar>.account-tab>svg{width:22px;height:22px;flex:0 0 22px}
body .app-frame>.tab-bar>.account-tab img{object-fit:cover;border:1px solid #ffffffbd;border-radius:50%}
body .app-frame>.tab-bar>.account-tab img[hidden],body .app-frame>.tab-bar>.account-tab>svg[hidden]{display:none}
body .app-frame>.tab-bar>.account-tab.is-selected{color:#fff;background:#008f3a}
body .app-frame>.tab-bar>.account-tab.is-selected:before{background:#b2ffc7}
body .app-frame>.topbar .topbar-cart{position:relative;overflow:visible}
body .app-frame>.topbar .topbar-cart>b{position:absolute;top:-3px;right:-4px;display:grid;min-width:15px;height:15px;place-items:center;padding:0 3px;color:#fff;border:1px solid #103378;border-radius:99px;background:#ff5a1f;font:800 9px/1 system-ui}

/* Handheld glass dock floats above a fluid page canvas instead of creating a bottom band. */
@media(max-width:700px) and (orientation:portrait){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content{bottom:0!important}
 body #main-content>.screen:not([data-screen="mixer"]){min-height:100%;padding-bottom:calc(86px + var(--phone-nav-safe,env(safe-area-inset-bottom,0px)))}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  inset:auto 12px calc(var(--phone-nav-safe,env(safe-area-inset-bottom,0px)) + 10px)!important;
  width:calc(100% - 24px)!important;height:56px!important;min-height:56px!important;max-height:56px!important;
  border:1px solid #ffffff45!important;border-radius:30px!important;
  background:linear-gradient(135deg,rgba(25,39,57,.78),rgba(6,13,23,.82))!important;
  box-shadow:0 8px 28px #0005,inset 0 1px #ffffff45!important;
  -webkit-backdrop-filter:blur(22px) saturate(165%)!important;backdrop-filter:blur(22px) saturate(165%)!important;
  overflow-x:auto!important;overflow-y:visible!important;isolation:isolate
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab{height:46px!important;border-radius:24px!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab.is-selected:not([data-tab="feed"]){background:#ffffff27!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.account-tab.is-selected{background:#008f3a!important;box-shadow:inset 0 0 0 1px #b2ffc7!important}
}

/* Keep the same adaptive glass treatment on tablet docks and the landscape rail. */
@media(min-width:701px) and (max-width:1366px) and (any-pointer:coarse){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  border:1px solid #ffffff50!important;
  background:linear-gradient(135deg,rgba(25,42,68,.78),rgba(8,18,35,.84))!important;
  box-shadow:0 10px 32px #06173638,inset 0 1px #ffffff4a!important;
  -webkit-backdrop-filter:blur(22px) saturate(165%)!important;backdrop-filter:blur(22px) saturate(165%)!important
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.account-tab.is-selected{background:#008f3a!important;box-shadow:inset 0 0 0 1px #b2ffc7!important}
}

/* Avatar and fallback icon are mutually exclusive, including in browsers that style hidden SVGs. */
#account-button[data-avatar-state="photo"]>#account-button-avatar{display:block!important}
#account-button[data-avatar-state="photo"]>#account-button-avatar-fallback,
#account-button[data-avatar-state="icon"]>#account-button-avatar{display:none!important}
#account-button[data-avatar-state="icon"]>#account-button-avatar-fallback{display:block!important}
#account-button>#account-button-avatar[hidden],#account-button>#account-button-avatar-fallback[hidden]{display:none!important}
body #main-content .admin-save-bar{bottom:0}body #main-content .admin-app-nav{top:0}
/* Mixer has its own navigation and uses the recovered bottom space. */
body .app-frame:has(.mixer-screen.is-active){padding-bottom:0!important}
body .app-frame:has(.mixer-screen.is-active)>.tab-bar{display:none!important}
body .app-frame:has(.mixer-screen.is-active)>.topbar{display:none!important}
body #main-content>.mixer-screen.is-active{min-height:100%;height:auto;background:#103fae}
body #main-content>.mixer-screen .mx-project-home,body #main-content>.mixer-screen .mx-studio{min-height:calc(100dvh - 140px - env(safe-area-inset-bottom,0px))}
@media(max-width:700px){body #main-content>.screen:not([data-screen="mixer"]){--workspace-gutter:12px;padding-bottom:16px}body .app-frame:has(.screen.is-active)>.tab-bar{justify-content:flex-start!important}body .app-frame>.tab-bar>.tab{flex:0 0 auto;min-width:70px;font-size:10px}body #main-content>.screen:not([data-screen="mixer"])>.page-intro:not(.feed-page-intro){padding-block:13px;margin-bottom:13px}body #main-content>.feed-screen{--workspace-gutter:8px}body #main-content>.feed-screen>.feed-page-intro{padding-inline:4px}}
@media(max-height:500px) and (orientation:landscape){html{--app-nav-height:53px}body .app-frame>.topbar{min-height:44px;padding-block:4px}body .app-frame>.tab-bar>.tab{height:40px;flex-direction:row;gap:6px;max-width:none}body .app-frame>.tab-bar>.tab svg{width:17px;height:17px}}

/* Keep all header controls inside the viewport and outside the status area. */
body .app-frame>.topbar .topbar-actions{flex:0 0 auto;margin-left:auto;gap:6px}
body .app-frame>.topbar .brand{min-width:0;flex:0 1 auto;gap:7px}
body .app-frame>.topbar .brand-wordmark{font-size:clamp(10px,2.9vw,16px)}
body .app-frame>.topbar .brand-mark{width:32px;height:32px;flex:0 0 32px}
body .app-frame>.topbar [hidden]{display:none!important}
body #main-content>.screen:not([data-screen="mixer"]){overflow-wrap:break-word}
body #main-content .section-heading{min-width:0;flex-wrap:wrap;gap:10px}
body #main-content .section-heading>*{min-width:0;max-width:100%}
body #main-content .admin-detail-tabs{top:0}
@media(max-width:699px){
 body .app-frame>.topbar{min-height:54px;padding:7px max(10px,env(safe-area-inset-right,0px)) 7px max(10px,env(safe-area-inset-left,0px));backdrop-filter:none;-webkit-backdrop-filter:none}
 body .app-frame>.topbar .icon-button,body .app-frame>.topbar .home-announcement-button,body .app-frame>.topbar .crew-announcement-button{width:36px;height:36px;min-width:36px;min-height:36px;padding:6px;flex:0 0 36px}
 body .app-frame>.topbar .topbar-account{min-height:36px;padding:0 8px}
 body #main-content>.screen>.welcome-card{border-radius:16px;min-height:0}
 body #main-content .welcome-copy{max-width:100%;width:100%;padding:18px}
 body #main-content .welcome-copy :is(h1,h2){font-size:clamp(27px,7.5vw,36px);line-height:1.04}
 body #main-content .welcome-copy p{max-width:100%}
 body #main-content .welcome-copy .button{max-width:100%;white-space:normal;text-align:center;padding:12px;font-size:11px}
 body #main-content .welcome-art{display:none}
 body #main-content .admin-app-nav{width:100%;margin:0 0 12px;padding:8px 0}
}
@media(max-width:360px){body .app-frame>.topbar .brand-wordmark{display:none}}

/* Compact, crisp controls on phone portrait; leave tablet and landscape sizing intact. */
@media(max-width:699px) and (orientation:portrait){
 body .app-frame>.topbar{min-height:52px;padding-top:8px;padding-bottom:5px}
 body .app-frame>.topbar .icon-button,
 body .app-frame>.topbar .home-announcement-button,
 body .app-frame>.topbar .crew-announcement-button{position:relative;top:3px;width:32px;height:32px;min-width:32px;min-height:32px;flex:0 0 32px}
 body .app-frame>.topbar .back-button{position:relative;top:3px;min-height:32px;padding:5px 8px}
 body .app-frame>.topbar .icon-button svg{width:18px;height:18px}
 body .app-frame>.topbar .home-announcement-button svg,
 body .app-frame>.topbar .crew-announcement-button svg{width:17px;height:17px}
 body .app-frame>.topbar .topbar-actions{gap:5px}
}

/* Opaque device edges, one compact navigation band. */
html,body{background:#103378!important}
body .app-frame>.topbar{background:#103378!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
body .app-frame>.topbar .home-announcement-button,body .app-frame>.topbar .crew-announcement-button{display:grid;place-items:center;align-self:center;width:32px;height:32px;min-height:32px;min-width:32px;flex:0 0 32px;padding:0;line-height:1;border:1px solid #ffffff66;border-radius:10px;box-shadow:none;transform:none}
body .app-frame>.topbar .home-announcement-button svg,body .app-frame>.topbar .crew-announcement-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
body .app-frame:has(.screen.is-active)>.tab-bar{height:calc(var(--app-nav-height) + env(safe-area-inset-bottom,0px))!important;box-sizing:border-box!important;padding-top:4px!important;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))!important;-webkit-backdrop-filter:none!important}
html{--app-nav-height:53px}
body .app-frame>.tab-bar>.tab{height:44px;padding:3px 7px}
@media(max-height:500px) and (orientation:landscape){html{--app-nav-height:49px}body .app-frame>.tab-bar>.tab{height:40px}}
/* Composer header is outside its scrollable content, including camera mode. */
#feed-compose-dialog{height:min(860px,92dvh);max-height:92dvh;overflow:hidden;box-sizing:border-box;background:#f6f8ff;backdrop-filter:none;-webkit-backdrop-filter:none}
#feed-compose-dialog::backdrop{background:#06163899;backdrop-filter:none;-webkit-backdrop-filter:none}
#feed-compose-dialog .compose-source-grid>button{touch-action:manipulation;isolation:isolate}
#feed-compose-dialog .compose-source-grid>button>*{pointer-events:none}
#feed-compose-dialog .compose-nav{backdrop-filter:none;-webkit-backdrop-filter:none}
#feed-compose-dialog .feed-compose-sheet{display:flex;flex-direction:column;max-height:inherit;height:100%;min-height:0;overflow:hidden}
#feed-compose-dialog .compose-nav{position:relative;flex:0 0 auto;top:auto;z-index:5;background:#103378;padding:10px 14px;min-height:64px}
#feed-compose-dialog .compose-nav>[data-close-feed-compose]{width:auto;min-width:62px;padding:0 10px;font:700 13px system-ui;border-radius:10px;color:#fff}
#feed-compose-dialog .social-post-form{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:#f6f8ff}
#compose-shutter{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#compose-shutter.is-recording{background:#ee3232!important;animation:capturePulse .8s infinite alternate}
.compose-capture-hint{color:#e5edff;font-size:11px;line-height:1.5;text-align:center}
@keyframes capturePulse{to{box-shadow:0 0 0 7px #ff5a1f55}}
@media(max-width:699px){
 #feed-compose-dialog{inset:0;height:100%;max-height:100%;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);background:#103378;border-radius:0}
 #feed-compose-dialog .compose-nav{padding:8px 12px;min-height:58px}
 #feed-compose-dialog .compose-nav>div>span{display:none}
 #feed-compose-dialog #compose-viewfinder{height:clamp(160px,42dvh,480px)}
 #feed-compose-dialog .compose-camera-controls{padding:10px;gap:8px}
}
@media(prefers-reduced-motion:reduce){#compose-shutter.is-recording{animation:none}}

/* Compact floating navigation inspired by the supplied reference. */
body .app-frame:has(.screen.is-active:not(.mixer-screen)){padding-bottom:0!important}
body #main-content>.screen:not([data-screen="mixer"]){padding-bottom:calc(82px + min(env(safe-area-inset-bottom,0px),24px))}
body .app-frame:has(.screen.is-active)>.tab-bar{inset:auto 12px max(8px,min(env(safe-area-inset-bottom,0px),24px))!important;width:calc(100% - 24px)!important;height:56px!important;padding:4px!important;border:1px solid #ffffff40!important;border-radius:30px!important;background:#09285af5!important;box-shadow:0 4px 18px #06173635,inset 0 1px #ffffff24!important;gap:2px!important;justify-content:space-evenly!important}
body .app-frame>.tab-bar>.tab{position:relative;display:flex;align-items:center;justify-content:center;flex:1 0 48px;min-width:48px;max-width:100px;height:46px;padding:8px;border:0;border-radius:25px;color:#f3f6ff;background:transparent!important;box-shadow:none!important;transform:none!important}
body .app-frame>.tab-bar>.tab>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body .app-frame>.tab-bar>.tab svg{width:25px;height:25px}
body .app-frame>.tab-bar>.tab.is-selected{background:#ffffff24!important;color:#fff}
body .app-frame>.tab-bar>.tab.is-selected:before{display:none}
body .app-frame>.tab-bar>.tab.is-selected svg{stroke-width:2.5}
body .app-frame>.topbar{min-height:50px;padding-block:3px;border-bottom:0}
body .app-frame>.topbar .topbar-actions{gap:2px}
body .app-frame>.topbar .icon-button,body .app-frame>.topbar .home-announcement-button,body .app-frame>.topbar .crew-announcement-button{width:36px;height:40px;min-width:36px;min-height:40px;flex:0 0 36px;border:0;background:transparent;box-shadow:none;border-radius:0}
body .app-frame>.topbar .home-announcement-button{color:#ff935d}
body .app-frame>.topbar .crew-announcement-button{color:#71e3a2}
body .app-frame>.topbar .icon-button svg{width:23px;height:23px}
body .app-frame>.topbar .home-announcement-button svg,body .app-frame>.topbar .crew-announcement-button svg{width:25px;height:25px}
body .app-frame>.topbar .topbar-account{width:40px;height:40px;min-height:40px;padding:0;border:0;background:transparent;box-shadow:none}
body .app-frame>.topbar .topbar-account>span{display:none}
body .app-frame>.topbar .topbar-account img{width:29px;height:29px;flex-basis:29px;border:1px solid #ffffffaa;box-shadow:none}
body .app-frame>.topbar .brand-mark{display:none}
body .app-frame>.topbar .brand-wordmark{font-size:clamp(13px,3.4vw,18px);letter-spacing:.06em}
body #main-content .admin-save-bar{bottom:calc(72px + min(env(safe-area-inset-bottom,0px),24px))}
@media(max-width:700px){body .app-frame:has(.screen.is-active)>.tab-bar{justify-content:flex-start!important}body .app-frame>.tab-bar>.tab{flex:1 0 52px;min-width:52px}}
@media(min-width:701px){body .app-frame:has(.screen.is-active)>.tab-bar{max-width:760px!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important}}
@media(max-width:360px){body .app-frame>.topbar .brand-wordmark{display:block;font-size:12px}}

/* Tablet navigation stays at the bottom; the left rail is for wider touch desktops. */
@media(min-width:701px) and (any-pointer:coarse){
 body .app-frame:has(.screen.is-active)>.tab-bar{max-width:560px!important;height:54px!important}
 body .app-frame>.tab-bar>.tab{flex:1 0 44px;min-width:44px;max-width:56px;height:44px;padding:8px}
 body .app-frame>.tab-bar>.tab svg{width:23px;height:23px}
}
@media(min-width:1367px) and (min-height:600px) and (orientation:landscape) and (any-pointer:coarse){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  top:calc(env(safe-area-inset-top,0px) + 62px)!important;
  right:auto!important;bottom:calc(env(safe-area-inset-bottom,0px) + 12px)!important;
  left:max(10px,env(safe-area-inset-left,0px))!important;
  width:60px!important;max-width:60px!important;height:auto!important;
  flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;
  padding:6px!important;gap:5px!important;border-radius:24px!important;
  transform:none!important;overflow-x:hidden!important;overflow-y:auto!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab{
  flex:0 0 44px;min-height:44px;height:44px;min-width:44px;width:44px;max-width:44px;padding:9px;border-radius:16px;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content{
  width:calc(100% - 82px - env(safe-area-inset-left,0px))!important;
  margin-left:calc(82px + env(safe-area-inset-left,0px))!important;
 }
 body #main-content>.screen:not([data-screen="mixer"]){padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
 body #main-content .admin-save-bar{bottom:0}
}

/* Feed retains its subtle size emphasis and CEEJAY orange across layouts. */
body .app-frame>.tab-bar>.tab[data-tab="feed"]{background:#ff5a1f!important;color:#fff;border-radius:16px;transform:scale(1.04)!important;box-shadow:inset 0 0 0 1px #ffc29b!important;z-index:1}
body .app-frame>.tab-bar>.tab[data-tab="feed"] svg{width:27px;height:27px}
body .app-frame>.tab-bar>.tab[data-tab="feed"].is-selected{background:#ff5a1f!important;box-shadow:inset 0 0 0 2px #fff1e8!important}

/* Phone viewport: content fills the screen; only the floating dock overlays it. */
@media(max-width:700px) and (orientation:portrait){
 body .app-frame:has(.screen.is-active:not(.mixer-screen)){
  top:0!important;bottom:auto!important;height:100dvh!important;max-height:100dvh!important;
  padding-bottom:0!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content{
  flex:1 1 auto!important;min-height:0!important;margin-bottom:0!important;padding-bottom:0!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  inset:auto 10px max(6px,min(env(safe-area-inset-bottom,0px),16px))!important;
  width:calc(100% - 20px)!important;max-width:none!important;
  height:54px!important;min-height:54px!important;max-height:54px!important;
  padding:3px!important;margin:0!important;border:1px solid #ffffff40!important;
  border-radius:28px!important;background:#09285af5!important;
  box-shadow:0 4px 16px #06173630!important;transform:none!important;
 }
 body #main-content>.screen:not([data-screen="mixer"]){
  min-height:100%;padding-bottom:calc(70px + min(env(safe-area-inset-bottom,0px),16px));
 }
 body #main-content .admin-save-bar{bottom:calc(64px + min(env(safe-area-inset-bottom,0px),16px))}
}

/* Use one measured viewport for both the content canvas and floating dock. */
@media(max-width:700px){
 body .app-frame:has(.screen.is-active:not(.mixer-screen)){
  top:0!important;bottom:auto!important;height:var(--app-viewport-height,100dvh)!important;
  max-height:none!important;padding-bottom:0!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content{
  position:absolute!important;top:var(--app-content-top,calc(50px + env(safe-area-inset-top,0px)))!important;
  right:0!important;bottom:0!important;left:0!important;
  width:100%!important;height:auto!important;max-height:none!important;
  margin:0!important;padding:0!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  position:absolute!important;top:auto!important;bottom:max(6px,min(env(safe-area-inset-bottom,0px),16px))!important;
 }
}

/* Keep Feed square with rounded corners in portrait tablets. */
@media(min-width:701px) and (orientation:portrait) and (any-pointer:coarse){
 body .app-frame>.tab-bar>.tab[data-tab="feed"]{
  flex:0 0 44px;width:44px;min-width:44px;max-width:44px;
  height:44px;min-height:44px;max-height:44px;aspect-ratio:1;
  padding:8px;border-radius:16px;align-self:center;
 }
}

/* Compact announcement controls and a quieter editor. */
body .app-frame>.topbar .home-announcement-button,body .app-frame>.topbar .crew-announcement-button{width:34px;height:34px;min-width:34px;min-height:34px;flex:0 0 34px;border-radius:11px;color:#fff;border:1px solid #ffffff60;box-shadow:inset 0 1px #ffffff30}
body .app-frame>.topbar .home-announcement-button{background:#ff5a1f}
body .app-frame>.topbar .crew-announcement-button{background:#008f3a}
body .app-frame>.topbar .home-announcement-button svg,body .app-frame>.topbar .crew-announcement-button svg{width:22px;height:22px;stroke:#fff}
#announcement-editor-dialog{width:min(540px,calc(100% - 24px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px);background:#fff;border:1px solid #c9d8f4;border-radius:20px;backdrop-filter:none;-webkit-backdrop-filter:none}
#announcement-editor-dialog .announcement-editor-sheet{padding:16px}
#announcement-editor-dialog .notifications-heading{position:sticky;top:-16px;z-index:3;margin:-16px -16px 14px;padding:14px 16px;background:#fff;border-bottom:1px solid #e4ebf8}
#announcement-editor-dialog .notifications-heading h2{font:800 21px/1.15 system-ui;color:#123675;text-transform:none;margin:0}
#announcement-editor-dialog .notifications-close{width:36px;height:36px;min-width:36px;display:grid;place-items:center;padding:0;border:0;border-radius:11px;background:#edf3ff;color:#1457ff;font-size:25px}
#announcement-editor-dialog .announcement-field{display:block;margin:10px 0;font-size:12px;color:#173b70}
#announcement-editor-dialog .announcement-field[hidden]{display:none}
#announcement-editor-dialog .announcement-field>span{margin-left:5px;font-size:10px;color:#627495}
#announcement-editor-dialog .announcement-field input,#announcement-editor-dialog .announcement-field textarea,#announcement-editor-dialog .announcement-field select{display:block;margin-top:5px;min-height:42px;border:1px solid #d3dff2;border-radius:10px;padding:10px 12px;background:#f7f9fe;font-size:16px;font-weight:400}
#announcement-editor-dialog .announcement-upload-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
#announcement-editor-dialog .announcement-upload-card{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-width:0;min-height:105px;margin:0;padding:10px 5px;border:1px dashed #a9bfe9;border-radius:12px;background:#f3f7ff;box-shadow:none;overflow:hidden;cursor:pointer;text-align:center}
#announcement-editor-dialog .announcement-format-icon svg{width:38px;height:30px;fill:none;stroke:#1457ff;stroke-width:1.7;stroke-linecap:round}
#announcement-editor-dialog .announcement-upload-card strong{font-size:11px;color:#173b70}
#announcement-editor-dialog .announcement-upload-card small{font-size:10px;color:#567199}
#announcement-editor-dialog .announcement-upload-card img:not([hidden]){position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;border:0;border-radius:11px;background:#eaf1ff}
#announcement-editor-dialog .announcement-upload-card:has(img:not([hidden])){border-style:solid;border-color:#1457ff}
#announcement-editor-dialog .announcement-upload-card input[type=file]{z-index:2!important}
.announcement-format-help{margin-top:8px;color:#5b7294;font-size:11px}
.announcement-format-help summary{cursor:pointer;width:max-content;padding:5px 0}
.announcement-format-help p{margin:5px 0;line-height:1.6}
#announcement-editor-dialog .announcement-editor-status:empty{display:none}
#announcement-editor-dialog .announcement-editor-status{font-size:12px;line-height:1.4;margin:10px 0}
#announcement-editor-dialog .announcement-editor-actions{position:sticky;bottom:-16px;z-index:3;margin:14px -16px -16px;padding:12px 16px;background:#fff;border-top:1px solid #e4ebf8;align-items:center;justify-content:space-between}
#announcement-editor-dialog .announcement-editor-actions .button{min-height:42px;padding:10px 14px;font-size:12px;border-radius:10px;box-shadow:none}
#announcement-editor-dialog #announcement-unpublish{border:0;background:transparent;color:#a34127;padding-left:0}

/* The outer canvas belongs to the page, never to the navigation bar. */
html,body{background:var(--active-page-color,#eaf1ff)!important}
body .app-frame:has(.screen.is-active:not(.mixer-screen)){background:var(--active-page-color,#eaf1ff)!important}
body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content{background:var(--active-page-color,#eaf1ff)}
body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:env(safe-area-inset-top,0px);background:#103378;pointer-events:none}
@media(max-width:700px) and (orientation:portrait){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{bottom:max(4px,min(env(safe-area-inset-bottom,0px),8px))!important}
}

/* Keep the cart count inside the dock's safe area without clipping digits. */
body .app-frame>.tab-bar>.tab.cart-tab{overflow:visible}
body .app-frame>.tab-bar>.tab.cart-tab #tab-cart-count{
 position:absolute;top:5px;right:7px;bottom:auto;left:auto;
 display:flex;align-items:center;justify-content:center;
 width:max-content;min-width:18px;height:auto;min-height:18px;
 padding:2px 5px;margin:0;border:1px solid #ffccb4;border-radius:999px;
 background:#ff5a1f;color:#fff;font:800 10px/1.1 system-ui;
 white-space:nowrap;overflow:visible;text-overflow:clip;transform:none;z-index:3;
}

/* Phone overlays stay inside the visible viewport, with the page behind them. */
@media(max-width:700px){
 body .app-frame:has(.screen.is-active:not(.mixer-screen)){
  top:var(--app-viewport-top,0px)!important;
  height:var(--app-viewport-height,100dvh)!important;
  min-height:0!important;max-height:none!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  display:flex!important;bottom:max(6px,min(env(safe-area-inset-bottom,0px),16px))!important;
  height:54px!important;min-height:54px!important;max-height:54px!important;z-index:50;
 }
}

/* Phone portrait only: solid status area and edge-attached navigation. */
@media(max-width:700px) and (orientation:portrait){
 html,body{background:#103378!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen)){
  background:#103378!important;
  --phone-nav-safe:max(0px,calc(env(safe-area-inset-bottom,0px) - var(--standalone-bottom-gap,0px)));
  --phone-nav-height:calc(52px + var(--phone-nav-safe));
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar{
  background:#103378!important; background-image:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:none!important;filter:none!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar::before{
  background:#103378!important;background-image:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  inset:auto 0 0!important;width:100%!important;max-width:none!important;
  height:var(--phone-nav-height)!important;min-height:var(--phone-nav-height)!important;
  max-height:var(--phone-nav-height)!important;
  padding:4px max(6px,env(safe-area-inset-right,0px)) calc(4px + var(--phone-nav-safe)) max(6px,env(safe-area-inset-left,0px))!important;
  border:1px solid #ffffff30!important;border-bottom:0!important;
  border-radius:20px 20px 0 0!important;background:#103378!important;
  box-shadow:0 -3px 12px #06173620!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  align-items:center!important;gap:4px!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab{
  flex:1 0 58px;min-width:58px;max-width:82px;height:44px;
  flex-direction:column;gap:2px;padding:3px 4px;border-radius:14px;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab>span:not(.cart-count){
  position:static;width:auto;height:auto;margin:0;padding:0;clip-path:none;
  overflow:visible;font-size:9px;line-height:12px;white-space:nowrap;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab svg{width:22px;height:22px}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab[data-tab="feed"] svg{width:24px;height:24px}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content{
  bottom:var(--phone-nav-height)!important;
 }
 body #main-content>.screen:not([data-screen="mixer"]){padding-bottom:20px}
 body .app-frame>.topbar *,body .app-frame>.topbar *::before,body .app-frame>.topbar *::after{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  filter:none!important;text-shadow:none!important;box-shadow:none!important;
 }
 body .app-frame>.topbar .brand-wordmark{color:#fff!important;opacity:1!important}
 body .app-frame>.topbar .brand-wordmark b{color:#ffad7b!important}
 body .app-frame>.topbar .notification-button{background:transparent!important;color:#fff!important}
 body .app-frame>.topbar .home-announcement-button{background:#ff5a1f!important;color:#fff!important}
 body .app-frame>.topbar .crew-announcement-button{background:#008f3a!important;color:#fff!important}
 body .app-frame>.topbar .topbar-account{background:#1457ff!important;border-radius:12px!important}
 body .app-frame>.topbar .topbar-account img{opacity:1!important}
 body #main-content .admin-save-bar{bottom:0}
}

/* Solid, sharp controls for the installed phone header. */
@media(max-width:700px) and (orientation:portrait){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar,
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar::before{
  background:#103378!important;background-image:none!important;
  box-shadow:none!important;filter:none!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;transform:none!important;opacity:1!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar :is(.brand,.brand-wordmark,.brand-wordmark b,.topbar-actions,.topbar-actions button,.topbar-actions button svg,.topbar-account,.topbar-account img){
  filter:none!important;-webkit-filter:none!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;box-shadow:none!important;text-shadow:none!important;
  opacity:1!important;transform:none!important;transition:none!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar .brand-wordmark{
  color:#fff!important;font-family:Arial,Helvetica,sans-serif!important;font-size:16px!important;
  font-weight:900!important;letter-spacing:.06em!important;-webkit-font-smoothing:antialiased;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar .brand-wordmark b{color:#ffad7b!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar .topbar-actions .notification-button{
  background:transparent!important;border:0!important;color:#fff!important
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar .home-announcement-button{
  background:#ff5a1f!important;border:1px solid #ffb08d!important;border-radius:11px!important
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar .crew-announcement-button{
  background:#008f3a!important;border:1px solid #71d99b!important;border-radius:11px!important
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar .topbar-account{
  background:#1457ff!important;border:1px solid #7da5ff!important;border-radius:12px!important
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar .topbar-account img{
  border:1px solid #dce8ff!important;border-radius:50%!important;object-fit:cover!important
 }
}

/* Final phone header reset: no translucent fills, glow, blur, or animated scaling. */
@media(max-width:700px) and (orientation:portrait){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar,
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar *{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  -webkit-filter:none!important;filter:none!important;box-shadow:none!important;
  text-shadow:none!important;transition:none!important;animation:none!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar .topbar-account,
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar .home-announcement-button,
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar .crew-announcement-button{
  background-image:none!important;opacity:1!important;transform:none!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar .home-announcement-button{background-color:#ff5a1f!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar .crew-announcement-button{background-color:#008f3a!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar .topbar-account{background-color:#1457ff!important}
}

/* Full-screen creator: native picker, camera preview, and publish editor share the full canvas. */
#feed-compose-dialog[open]{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)!important;overflow:hidden!important;border:0!important;border-radius:0!important;background:#071a3b!important;box-shadow:none!important}
#feed-compose-dialog .feed-compose-sheet{height:100%!important;max-height:none!important;min-height:0!important}
#feed-compose-dialog .social-post-form{min-height:0!important}
#feed-compose-dialog #compose-library-open{position:relative;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#feed-compose-dialog #compose-library-open input[type=file]{position:absolute!important;inset:0!important;z-index:4!important;width:100%!important;height:100%!important;opacity:0!important;cursor:pointer!important}
#feed-compose-dialog #compose-library-open:focus-within{outline:3px solid #ff9d72;outline-offset:3px}
#feed-compose-dialog[data-step=camera] .feed-compose-sheet{position:relative;background:#071a3b}
#feed-compose-dialog[data-step=camera] .compose-nav{position:absolute;inset:0 0 auto;min-height:calc(58px + env(safe-area-inset-top,0px));padding:calc(8px + env(safe-area-inset-top,0px)) 14px 8px;background:linear-gradient(#06152dcc,transparent);border:0}
#feed-compose-dialog[data-step=camera] .compose-nav>div>span{display:none}
#feed-compose-dialog[data-step=camera] .compose-journey,#feed-compose-dialog[data-step=camera] .compose-footer,#feed-compose-dialog[data-step=camera] #social-post-status{display:none!important}

/* Keep the global header crisp on iOS standalone and Safari at every size. */
body .app-frame>.topbar,
body .app-frame>.topbar::before,
body .app-frame>.topbar::after,
body .app-frame>.topbar *,
body .app-frame>.topbar *::before,
body .app-frame>.topbar *::after{
 -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
 -webkit-filter:none!important;filter:none!important;
 text-shadow:none!important;box-shadow:none!important;
 opacity:1!important;transform:none!important;transition:none!important;animation:none!important;
}
body .app-frame>.topbar{background:#103378!important;background-image:none!important}
body .app-frame>.topbar .brand-wordmark{color:#fff!important;-webkit-font-smoothing:antialiased}
body .app-frame>.topbar .brand-wordmark b{color:#ffad7b!important}
body .app-frame>.topbar .home-announcement-button{background:#ff5a1f!important}
body .app-frame>.topbar .crew-announcement-button{background:#008f3a!important}
body .app-frame>.topbar .topbar-account{background:#1457ff!important}
#feed-compose-dialog[data-step=camera] .social-post-form{position:absolute;inset:0;overflow:hidden;background:#071a3b}
#feed-compose-dialog[data-step=camera] #compose-camera:not([hidden]){position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;background:#071a3b;overflow:hidden}
#feed-compose-dialog[data-step=camera] #compose-viewfinder{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;object-fit:cover;background:#071a3b;touch-action:manipulation}
#feed-compose-dialog[data-step=camera] .compose-camera-label{position:absolute;top:calc(66px + env(safe-area-inset-top,0px));left:50%;z-index:2;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:8px 13px;border:1px solid #ffffff45;border-radius:999px;background:#06152d88;color:#fff;font:600 12px/1.3 system-ui;text-align:center}
#feed-compose-dialog[data-step=camera] .compose-camera-status:not([hidden]){position:absolute;top:calc(112px + env(safe-area-inset-top,0px));left:50%;z-index:5;width:min(440px,calc(100% - 32px));margin:0;padding:11px 14px;transform:translateX(-50%);border:1px solid #ffffff55;border-radius:14px;background:#071a3beF;color:#fff;font:650 13px/1.45 system-ui;text-align:center;box-shadow:0 8px 28px #0005}
#feed-compose-dialog[data-step=camera] .compose-camera-controls{position:absolute;inset:auto 0 0;z-index:3;display:grid;grid-template-columns:minmax(84px,1fr) 82px minmax(84px,1fr);align-items:center;justify-items:center;gap:10px;padding:22px 18px calc(20px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,#06152de8 36%);color:#fff}
#feed-compose-dialog[data-step=camera] #compose-flip{justify-self:start;min-height:42px;padding:9px 12px;border:1px solid #ffffff55;border-radius:14px;background:#ffffff1b;color:#fff;font-size:13px}
#feed-compose-dialog[data-step=camera] #compose-shutter{grid-column:2;grid-row:1;width:76px;height:76px;border:5px solid #fff;border-radius:50%;background:#ff5a1f;color:#fff;font-size:0;box-shadow:inset 0 0 0 4px #ff5a1f,0 4px 20px #0005;transition:transform .15s,background .15s}
#feed-compose-dialog[data-step=camera] #compose-shutter:before{content:"";display:block;width:23px;height:23px;margin:auto;border-radius:50%;background:#fff;transition:all .18s}
#feed-compose-dialog[data-step=camera] #compose-shutter.is-recording{background:#e52635;animation:composeRecordPulse 1s infinite}
#feed-compose-dialog[data-step=camera] #compose-shutter.is-recording:before{width:22px;height:22px;border-radius:6px}
#feed-compose-dialog[data-step=camera] .compose-capture-hint{grid-column:1/-1;grid-row:2;margin:0;color:#fff;font-size:12px;line-height:1.45;text-shadow:0 1px 4px #000;text-align:center}
#feed-compose-dialog[data-step=camera] .compose-recording-indicator:not([hidden]){position:absolute;top:calc(68px + env(safe-area-inset-top,0px));right:16px;z-index:4;display:flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border:1px solid #ffffff4d;border-radius:999px;background:#7e101dd9;color:#fff;font:700 12px system-ui;box-shadow:0 4px 18px #0004}
.compose-recording-indicator i{width:9px;height:9px;border-radius:50%;background:#ff3345;box-shadow:0 0 0 4px #ff334533;animation:composeRecordDot .75s infinite alternate}
.compose-recording-indicator span{font-variant-numeric:tabular-nums;font-weight:800}
.compose-recording-indicator em{position:absolute;left:8px;right:8px;bottom:-5px;height:3px;overflow:hidden;border-radius:3px;background:#ffffff45}
.compose-recording-indicator em:before{content:"";display:block;width:var(--record-progress,0%);height:100%;background:#ff5a1f;transition:width .1s linear}
@keyframes composeRecordDot{to{opacity:.35;transform:scale(.82)}}
@keyframes composeRecordPulse{50%{box-shadow:inset 0 0 0 4px #e52635,0 0 0 9px #ed334a55,0 4px 20px #0005}}
#feed-compose-dialog[data-step=preview] #compose-edit:not([hidden]),#feed-compose-dialog[data-step=caption] #compose-edit:not([hidden]){overflow-y:auto;overscroll-behavior:contain}
#feed-compose-dialog #social-media-input{position:fixed!important;top:0!important;left:0!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;opacity:.001!important;pointer-events:none!important;clip-path:inset(50%)!important}
#feed-compose-dialog[data-step=preview] #social-media-preview{min-height:0;height:min(68dvh,760px);border-radius:0}
#feed-compose-dialog[data-step=preview] #social-media-preview>img,#feed-compose-dialog[data-step=preview] #social-media-preview>video{height:100%;max-height:100%;object-fit:contain}
#feed-compose-dialog[data-step=caption] #compose-edit{padding-bottom:18px}
@media(max-width:699px){
 #feed-compose-dialog[open]{padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)!important}
 #feed-compose-dialog[data-step=camera] .compose-nav{padding-inline:12px}
 #feed-compose-dialog[data-step=camera] .compose-camera-controls{grid-template-columns:minmax(70px,1fr) 78px minmax(70px,1fr);padding-inline:14px}
 #feed-compose-dialog[data-step=camera] #compose-shutter{width:72px;height:72px}
 #feed-compose-dialog[data-step=camera] .compose-capture-hint{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.compose-recording-indicator i,#feed-compose-dialog[data-step=camera] #compose-shutter.is-recording{animation:none!important}}

/* Final phone dock: a true floating glass capsule, with the full page scrolling beneath it. */
@media(max-width:700px) and (orientation:portrait){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content{
  top:var(--app-content-top,calc(50px + env(safe-area-inset-top,0px)))!important;
  right:0!important;bottom:0!important;left:0!important;
  width:100%!important;height:auto!important;max-height:none!important;margin:0!important;padding:0!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  position:absolute!important;top:auto!important;right:12px!important;bottom:calc(var(--phone-nav-safe,env(safe-area-inset-bottom,0px)) + 10px)!important;left:12px!important;
  display:flex!important;width:auto!important;max-width:none!important;height:56px!important;min-height:56px!important;max-height:56px!important;
  flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:3px!important;
  margin:0!important;padding:4px!important;overflow-x:auto!important;overflow-y:hidden!important;
  border:1px solid #ffffff55!important;border-radius:999px!important;
  background:linear-gradient(135deg,rgba(29,43,60,.76),rgba(7,14,25,.78))!important;
  box-shadow:0 8px 28px #0005,inset 0 1px #ffffff54!important;
  -webkit-backdrop-filter:blur(22px) saturate(170%)!important;backdrop-filter:blur(22px) saturate(170%)!important;
  z-index:50!important;isolation:isolate
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab{
  flex:1 0 50px!important;min-width:50px!important;max-width:82px!important;height:46px!important;min-height:46px!important;
  border:0!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab>span{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab.is-selected:not([data-tab="feed"]){background:#ffffff2b!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab[data-tab="feed"]{background:#ff5a1f!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.account-tab{
  order:99!important;flex:0 0 46px!important;width:46px!important;min-width:46px!important;max-width:46px!important;
  height:46px!important;min-height:46px!important;padding:0!important;border:2px solid #19c765!important;border-radius:50%!important;
  background:#081a34aa!important;box-shadow:0 0 0 2px #0b1529a8!important
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.account-tab>img,
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.account-tab>svg{width:25px!important;height:25px!important;flex:0 0 25px!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.account-tab>img{object-fit:cover!important;border:0!important;border-radius:50%!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.account-tab>svg{fill:none!important;stroke:#fff!important;stroke-width:1.8!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.account-tab.is-selected{background:#078b40!important;border-color:#54e891!important;box-shadow:0 0 0 2px #071b32,inset 0 0 0 1px #c2ffd7!important}
 body #main-content>.screen:not([data-screen="mixer"]){min-height:100%;padding-bottom:calc(84px + var(--phone-nav-safe,env(safe-area-inset-bottom,0px)))}
}

/* Tablet docks keep their existing shape and placement, with the translucent glass finish. */
@media(min-width:701px) and (max-width:1366px) and (any-pointer:coarse){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  background:linear-gradient(135deg,rgba(25,42,68,.76),rgba(8,18,35,.8))!important;
  -webkit-backdrop-filter:blur(22px) saturate(165%)!important;backdrop-filter:blur(22px) saturate(165%)!important;
  border-color:#ffffff58!important;box-shadow:0 10px 32px #06173638,inset 0 1px #ffffff50!important
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.account-tab{order:99!important;flex:0 0 46px!important;width:46px!important;min-width:46px!important;height:46px!important;border:2px solid #19c765!important;border-radius:50%!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.account-tab>span{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.account-tab.is-selected{background:#078b40!important;border-color:#54e891!important}
}

/* Let the active page canvas fill the complete device viewport behind the glass dock. */
html,body{height:100%;min-height:100%;background:var(--active-page-color,#eaf1ff)!important}
body .app-frame:has(.screen.is-active:not(.mixer-screen)){
 height:var(--app-viewport-height,100dvh)!important;min-height:100dvh!important;
 background:var(--active-page-color,#eaf1ff)!important
}
body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content{
 background:var(--active-page-color,#eaf1ff)!important
}
body #main-content>.screen:not([data-screen="mixer"]){min-height:100%;height:auto;padding-bottom:24px}
@media(max-width:700px) and (orientation:portrait){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content{
  top:var(--app-content-top,calc(50px + env(safe-area-inset-top,0px)))!important;
  bottom:0!important;height:auto!important;min-height:0!important
 }
 body #main-content>.screen:not([data-screen="mixer"]){padding-bottom:calc(92px + var(--phone-nav-safe,env(safe-area-inset-bottom,0px)))!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  position:fixed!important;inset:auto 12px calc(var(--phone-nav-safe,env(safe-area-inset-bottom,0px)) + 10px)!important;
  width:auto!important;height:56px!important;min-height:56px!important;max-height:56px!important;
  border:1px solid #ffffff59!important;border-radius:999px!important;
  background:linear-gradient(135deg,rgba(27,41,58,.56),rgba(5,12,22,.62))!important;
  box-shadow:0 8px 28px #0005,inset 0 1px #ffffff5c!important;
  -webkit-backdrop-filter:blur(20px) saturate(170%)!important;backdrop-filter:blur(20px) saturate(170%)!important;
  z-index:60!important
 }
}
/* Full-page canvas with a small floating dock; the page scrolls behind it without color bands. */
html,body{background:#103378!important}
body .app-frame:has(.screen.is-active:not(.mixer-screen)){
 height:var(--app-viewport-height,100dvh)!important;min-height:0!important;max-height:none!important;
 background:var(--active-page-color,#eaf1ff)!important;overflow:hidden!important
}
body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar{background:#103378!important;background-image:none!important}
body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar::before{
 content:""!important;position:absolute!important;inset:calc(-1 * env(safe-area-inset-top,0px)) 0 auto!important;
 height:env(safe-area-inset-top,0px)!important;background:#103378!important;pointer-events:none!important
}
body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content{
 position:absolute!important;top:var(--app-content-top,calc(50px + env(safe-area-inset-top,0px)))!important;
 right:0!important;bottom:0!important;left:0!important;width:100%!important;height:auto!important;min-height:0!important;
 overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:contain!important;
 background:var(--active-page-color,#eaf1ff)!important
}
body #main-content>.screen:not([data-screen="mixer"]){height:auto!important;min-height:100%!important;padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))!important}
body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
 position:fixed!important;inset:auto 12px calc(env(safe-area-inset-bottom,0px) + 8px)!important;
 width:auto!important;height:58px!important;min-height:58px!important;max-height:58px!important;
 overflow:visible!important;border:1px solid #ffffff65!important;border-radius:999px!important;
 background:rgba(8,19,39,.48)!important;box-shadow:0 7px 24px #020c2d38,inset 0 1px #ffffff57!important;
 -webkit-backdrop-filter:blur(14px) saturate(155%)!important;backdrop-filter:blur(14px) saturate(155%)!important;
 z-index:60!important
}
@media(max-width:700px) and (orientation:portrait){
 html,body{background:#103378!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen)){padding-top:env(safe-area-inset-top,0px)!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{left:10px!important;right:10px!important;bottom:calc(env(safe-area-inset-bottom,0px) + 8px)!important}
}

/* Feed flows to its real content height; media is not cropped to the viewport. */
body #main-content>.feed-screen.is-active{
 height:max-content!important;min-height:100%!important;overflow:visible!important;
 padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important
}
body #main-content>.feed-screen.is-active>.feed-content{
 width:100%!important;max-width:100%!important;margin:0!important;gap:0!important
}
body #main-content>.feed-screen.is-active>.feed-content>.feed-posts-panel{
 width:100%!important;max-width:none!important;min-height:100%;overflow:visible!important
}
body #main-content>.feed-screen.is-active .feed-posts-panel>.social-feed{
 width:100%!important;max-width:none!important;gap:14px!important;margin:0!important
}
body #main-content>.feed-screen.is-active .feed-posts-panel .social-post-card{
 width:100%!important;max-width:none!important;margin:0!important
}
body #main-content>.feed-screen.is-active .feed-posts-panel .social-post-card>img,
body #main-content>.feed-screen.is-active .feed-posts-panel .social-post-card>video{
 display:block;width:100%;height:auto;max-height:none!important;object-fit:contain
}
@media(max-width:700px){
 body #main-content>.feed-screen.is-active{--workspace-gutter:0px;padding-inline:0!important}
 body #main-content>.feed-screen.is-active>.feed-page-intro{width:auto;max-width:none;margin:0;padding:8px 14px}
 body #main-content>.feed-screen.is-active .feed-posts-panel .social-post-card{border-radius:0!important;border-inline:0!important}
}

/* Keep the page color visible beneath the floating dock; let every nav item scroll into view. */
html,body{background:var(--active-page-color,#eaf1ff)!important}
body .app-frame:has(.screen.is-active:not(.mixer-screen)),
body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content{
 background:var(--active-page-color,#eaf1ff)!important
}
body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
 justify-content:flex-start!important;flex-wrap:nowrap!important;
 overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain!important;
 -webkit-overflow-scrolling:touch!important;touch-action:pan-x!important;
 scroll-padding-inline:8px!important;scrollbar-width:none!important
}
body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar::-webkit-scrollbar{display:none!important}
body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab{
 flex:0 0 52px!important;min-width:52px!important;max-width:52px!important
}
body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.account-tab{
 order:99!important;flex-basis:52px!important;min-width:52px!important;max-width:52px!important
}

/* Match the iOS safe-area strip to the solid header and lower the dock slightly. */
body .app-frame:has(.screen.is-active:not(.mixer-screen)){
 background:var(--active-page-color,#eaf1ff)!important
}
body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar{
 background:#103378!important;background-image:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar::before{
 background:#103378!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
 bottom:calc(env(safe-area-inset-bottom,0px) + 2px)!important
}
body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
 background:rgba(8,19,39,.48)!important;border:1px solid #ffffff65!important;
 box-shadow:0 7px 24px #020c2d38,inset 0 1px #ffffff57!important;
 -webkit-backdrop-filter:blur(14px) saturate(155%)!important;backdrop-filter:blur(14px) saturate(155%)!important
}
/* Keep only the status-safe-area strip in the header color; the bottom edge follows the page. */
html,body{background:var(--active-page-color,#eaf1ff)!important}
body .app-frame:has(.screen.is-active:not(.mixer-screen)){background:var(--active-page-color,#eaf1ff)!important}
body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar::before{
 content:""!important;position:fixed!important;top:0!important;right:0!important;bottom:auto!important;left:0!important;
 width:100vw!important;height:env(safe-area-inset-top,0px)!important;z-index:34!important;
 background:#103378!important;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:none!important
}
@media(max-width:700px) and (orientation:portrait){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  bottom:calc(env(safe-area-inset-bottom,0px) + 2px)!important
 }
}


/* Phone portrait reference: real header and footer surfaces, without covering layers. */
@media(max-width:700px) and (orientation:portrait){
 body .app-frame:has(.screen.is-active:not(.mixer-screen)){
  display:flex!important;flex-direction:column!important;padding:0!important;background:#103378!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))::before,
 body .app-frame:has(.screen.is-active:not(.mixer-screen))::after,
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar::before,
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar::after{content:none!important;display:none!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.topbar{
  position:relative!important;inset:auto!important;flex:0 0 auto!important;height:auto!important;
  min-height:calc(50px + env(safe-area-inset-top,0px))!important;
  padding:calc(6px + env(safe-area-inset-top,0px)) 10px 6px!important;
  background:#103378!important;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content{
  position:relative!important;inset:auto!important;flex:1 1 0!important;height:auto!important;min-height:0!important;
 }
 body #main-content>.screen:not([data-screen="mixer"]){padding-bottom:16px!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  position:relative!important;inset:auto!important;transform:none!important;flex:0 0 auto!important;
  width:100%!important;max-width:none!important;height:auto!important;min-height:64px!important;max-height:none!important;
  margin:0!important;padding:4px 4px clamp(6px, env(safe-area-inset-bottom,0px),12px)!important;
  align-items:center!important;justify-content:flex-start!important;gap:0!important;
  border-radius:16px 16px 0 0!important;background:#103378!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:0!important;border-top:1px solid #ffffff40!important;box-shadow:none!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab{
  display:flex!important;flex-direction:column!important;flex:0 0 calc(100% / 7)!important;width:calc(100% / 7)!important;min-width:0!important;max-width:none!important;
  height:48px!important;padding:5px 2px!important;gap:3px!important;border-radius:13px!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab>span{
  position:static!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;
  clip:auto!important;clip-path:none!important;overflow:visible!important;font-size:9px!important;line-height:12px!important;white-space:nowrap!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab[data-tab="feed"]{
  height:50px!important;background:#ff5a1f!important;border:1px solid #ffb389!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.account-tab>span{display:none!important}
}

/* Tablet layout owns both its position and transform; phone rules cannot offset it. */
@media(min-width:701px) and (orientation:portrait){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  inset:auto auto calc(env(safe-area-inset-bottom,0px) + 10px) 50%!important;
  width:min(560px,calc(100% - 32px))!important;max-width:560px!important;
  height:58px!important;min-height:58px!important;max-height:58px!important;
  transform:translateX(-50%)!important;translate:none!important;
  flex-direction:row!important;justify-content:center!important;padding:4px!important;
 }
}
@media(min-width:1367px) and (min-height:600px) and (orientation:landscape) and (any-pointer:coarse){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  inset:calc(env(safe-area-inset-top,0px) + 62px) auto auto max(10px,env(safe-area-inset-left,0px))!important;
  width:64px!important;max-width:64px!important;height:max-content!important;min-height:0!important;max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 74px)!important;
  transform:none!important;translate:none!important;flex-direction:column!important;
  padding:6px!important;gap:5px!important;justify-content:flex-start!important;border-radius:24px!important;
  overflow-x:hidden!important;overflow-y:auto!important;touch-action:pan-y!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab{
  flex:0 0 44px!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content{
  left:82px!important;right:0!important;width:auto!important;margin-left:0!important;
 }
}

/* Phone footer uses the full layout viewport, without a second blank bottom strip. */
@media(max-width:700px) and (orientation:portrait){
 html,body{background:#103378!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen)){
  top:0!important;bottom:0!important;height:100%!important;
 }
}

/* Installed portrait phones: anchor the single footer to the full app viewport. */
@media(max-width:700px) and (orientation:portrait) and (display-mode:standalone){
 body .app-frame:has(.screen.is-active:not(.mixer-screen)){
  height:var(--app-viewport-height,100dvh)!important;bottom:auto!important;
 }
}

/* Keep phone navigation controls above their blue surface. */
@media(max-width:700px) and (orientation:portrait){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  z-index:70!important;isolation:isolate!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar::before,
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar::after{
  content:none!important;display:none!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab{
  position:relative!important;z-index:2!important;
 }
}

/* Compact phone footer: preserve labels and 44px touch targets. */
@media(max-width:700px) and (orientation:portrait){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  min-height:56px!important;padding-top:3px!important;padding-bottom:clamp(4px,env(safe-area-inset-bottom,0px),8px)!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab{
  height:44px!important;min-height:44px!important;padding:3px 2px!important;gap:2px!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab[data-tab="feed"]{
  height:46px!important;min-height:46px!important;
 }
}

/* Floating bottom navigation: the page scroll viewport extends behind this single dock. */
body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content{
 position:absolute!important;top:var(--app-content-top,calc(50px + env(safe-area-inset-top,0px)))!important;
 right:0!important;bottom:0!important;left:0!important;height:auto!important;min-height:0!important;
 overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:contain!important;
}
body #main-content>.screen:not([data-screen="mixer"]){
 height:auto!important;min-height:100%!important;
 padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;
}
body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
 position:fixed!important;inset:auto 14px calc(env(safe-area-inset-bottom,0px) + 10px)!important;
 display:flex!important;flex-direction:row!important;align-items:center!important;
 width:auto!important;max-width:760px!important;height:58px!important;min-height:58px!important;max-height:58px!important;
 margin:0 auto!important;padding:4px!important;box-sizing:border-box!important;
 border:1px solid #ffffff65!important;border-radius:999px!important;
 background:rgba(8,19,39,.48)!important;box-shadow:0 7px 24px #020c2d38,inset 0 1px #ffffff57!important;
 -webkit-backdrop-filter:blur(18px) saturate(165%)!important;backdrop-filter:blur(18px) saturate(165%)!important;
 transform:none!important;z-index:80!important;isolation:isolate!important;
}
/* Desktop docks end with the seventh control; tablet rules below keep their own layout. */
@media(min-width:900px) and (pointer:fine) and (hover:hover) and (not (any-pointer:coarse)){
 body .app-frame[data-nav-mode="full"]:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  inset:auto auto calc(env(safe-area-inset-bottom,0px) + 10px) 50%!important;
  width:max-content!important;
  min-width:0!important;
  max-width:calc(100vw - 28px)!important;
  margin:0!important;
  transform:translateX(-50%)!important;
 }
}
@media(max-width:700px) and (orientation:portrait){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  left:12px!important;right:12px!important;width:auto!important;max-width:none!important;
  bottom:calc(env(safe-area-inset-bottom,0px) + 10px)!important;
  overflow-x:auto!important;overflow-y:visible!important;overscroll-behavior-x:contain!important;
  -webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar::-webkit-scrollbar{display:none!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab{
  flex:1 0 48px!important;min-width:48px!important;max-width:76px!important;height:48px!important;min-height:48px!important;
 }
 body #main-content>.screen:not([data-screen="mixer"]){padding-bottom:calc(68px + var(--phone-nav-safe,env(safe-area-inset-bottom,0px)))!important}
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  bottom:calc(var(--phone-nav-safe,env(safe-area-inset-bottom,0px)) + 10px)!important
 }
}
@media(min-width:701px) and (max-width:1366px) and (orientation:portrait) and (any-pointer:coarse){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  left:50%!important;right:auto!important;bottom:calc(env(safe-area-inset-bottom,0px) + 12px)!important;
  width:min(760px,calc(100% - 32px))!important;max-width:760px!important;transform:translateX(-50%)!important;
 }
 body #main-content>.screen:not([data-screen="mixer"]){padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))!important}
}
@media(min-width:1367px) and (min-height:600px) and (orientation:landscape) and (any-pointer:coarse){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  inset:calc(env(safe-area-inset-top,0px) + 62px) auto auto max(10px,env(safe-area-inset-left,0px))!important;
  width:64px!important;max-width:64px!important;height:max-content!important;min-height:0!important;max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 74px)!important;
  padding:6px!important;transform:none!important;flex-direction:column!important;border-radius:24px!important;
  overflow-x:hidden!important;overflow-y:auto!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content{left:82px!important}
}
@media(min-width:701px) and (max-width:1366px) and (orientation:portrait){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  left:50%!important;right:auto!important;bottom:calc(env(safe-area-inset-bottom,0px) + 12px)!important;
  width:min(760px,calc(100% - 32px))!important;max-width:760px!important;transform:translateX(-50%)!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab{
  flex:1 1 52px!important;min-width:52px!important;max-width:92px!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.tab>span{
  position:static!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;
  overflow:visible!important;clip:auto!important;clip-path:none!important;
  font-size:9px!important;line-height:11px!important;white-space:nowrap!important
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>.tab-bar>.account-tab>span{display:inline!important}
}


/* Keep the app frame at the original viewport bounds; let the extended scroll canvas escape its clip. */
html,body{background:#103378!important}
body .app-frame:has(.screen.is-active:not(.mixer-screen)){overflow:visible!important;background:var(--active-page-color,#eaf1ff)!important}
body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content{background:var(--active-page-color,#eaf1ff)!important}
@media(max-width:700px) and (orientation:portrait){
 body .app-frame:has(.screen.is-active:not(.mixer-screen)){
  top:0!important;right:0!important;bottom:0!important;left:0!important;
  height:auto!important;min-height:0!important
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content{
  position:fixed!important;top:var(--app-content-top,calc(50px + env(safe-area-inset-top,0px)))!important;
  right:0!important;bottom:auto!important;left:0!important;
  height:calc(var(--app-viewport-height,100dvh) - var(--app-content-top,calc(50px + env(safe-area-inset-top,0px))))!important;
  min-height:0!important;max-height:none!important
 }
}

/* Profile alone uses the whole canvas; the shared header remains unchanged elsewhere. */
body .app-frame:has(>.topbar + main > .profile-screen.is-active){
 padding-top:0!important;
 background:#fff!important;
}
body .app-frame:has(>.topbar + main > .profile-screen.is-active)>.topbar{
 display:none!important;
}
body .app-frame:has(>.topbar + main > .profile-screen.is-active)>main#main-content{
 top:0!important;
 bottom:0!important;
 height:auto!important;
 background:#fff!important;
}
body #main-content>.profile-screen.is-active{
 padding-top:calc(env(safe-area-inset-top,0px) + 8px)!important;
}
body #main-content>.profile-screen>.profile-page-intro{
 justify-content:flex-end;
 min-height:36px;
 margin-bottom:8px;
 padding:0!important;
 border:0!important;
}
body #main-content>.profile-screen .profile-settings-icon{
 width:38px;
 height:38px;
 flex-basis:38px;
 margin-right:-5px;
 border-radius:13px;
}
body #main-content>.profile-screen .profile-settings-icon svg{width:20px;height:20px}
@media(max-width:700px) and (orientation:portrait){
 body .app-frame:has(>.topbar + main > .profile-screen.is-active)>main#main-content{
  position:fixed!important;
  top:0!important;
  bottom:auto!important;
  height:var(--app-viewport-height,100dvh)!important;
 }
}

/* The compact section menu belongs to Inicio only, before the wordmark. */
body .app-frame>.topbar .topbar-overflow{display:none!important}
body .app-frame:has(#main-content>.screen[data-screen="inicio"].is-active)>.topbar .topbar-overflow{display:block!important}

/* Cotizar servicio: compact request flow and enough final scroll clearance for the floating dock. */
body #main-content>.screen[data-screen="cotizar-servicio"]{
 --workspace-gutter:clamp(10px,2vw,20px);
 padding-top:8px!important;
 padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;
}
body #main-content>.screen[data-screen="cotizar-servicio"]>.page-intro{
 max-width:720px!important;
 margin:0 auto 8px!important;
 padding:10px 13px!important;
 border-top:2px solid #ff5a1f!important;
 border-radius:14px!important;
 background:linear-gradient(115deg,#2467ed,#103d9e)!important;
}
body #main-content>.screen[data-screen="cotizar-servicio"]>.page-intro .eyebrow{
 font-size:9px!important;
 letter-spacing:.1em!important;
}
body #main-content>.screen[data-screen="cotizar-servicio"]>.page-intro h1{
 margin:3px 0!important;
 font-size:clamp(21px,3vw,27px)!important;
 line-height:1.05!important;
}
body #main-content>.screen[data-screen="cotizar-servicio"]>.page-intro p{
 margin:4px 0 0!important;
 font-size:11px!important;
 line-height:1.35!important;
}
body #main-content>.screen[data-screen="cotizar-servicio"] .service-inquiry-form{
 max-width:720px;
 gap:8px;
 margin:0 auto;
 padding:12px;
 border:1px solid #b4caff;
 border-top:3px solid #ff5a1f;
 border-radius:16px;
 background:linear-gradient(160deg,#fff,#f5f8ff);
 box-shadow:0 8px 22px #1347a714;
}
body #main-content>.screen[data-screen="cotizar-servicio"] .service-inquiry-form label{
 gap:3px;
 color:#294269;
 font-size:10px;
 line-height:1.25;
}
body #main-content>.screen[data-screen="cotizar-servicio"] .service-inquiry-form :is(select,input){
 min-height:39px;
 padding:8px 10px;
 border-color:#bfd0ed;
 border-radius:10px;
 background:#f8faff;
 color:#102653;
 font:500 16px/1.2 system-ui,sans-serif;
}
body #main-content>.screen[data-screen="cotizar-servicio"] .service-inquiry-form select{font-weight:650}
body #main-content>.screen[data-screen="cotizar-servicio"] .service-inquiry-form input::placeholder{color:#687a99;opacity:1}
body #main-content>.screen[data-screen="cotizar-servicio"] .service-configurator:has(>.service-config-prompt){display:none}
body #main-content>.screen[data-screen="cotizar-servicio"] .service-configurator{gap:7px}
body #main-content>.screen[data-screen="cotizar-servicio"] .service-config-section{gap:6px;padding:9px;border-radius:12px}
body #main-content>.screen[data-screen="cotizar-servicio"] .service-choice-grid{gap:6px}
body #main-content>.screen[data-screen="cotizar-servicio"] .service-config-choice{min-height:49px;padding:8px;border-radius:10px}
body #main-content>.screen[data-screen="cotizar-servicio"] .service-config-field{gap:4px;padding:8px;border-radius:11px}
body #main-content>.screen[data-screen="cotizar-servicio"] .service-config-field textarea{min-height:65px;padding:8px 10px;font:500 16px/1.3 system-ui,sans-serif}
body #main-content>.screen[data-screen="cotizar-servicio"] .service-config-package{min-height:55px;padding:6px 3px}
body #main-content>.screen[data-screen="cotizar-servicio"] .service-config-info,
body #main-content>.screen[data-screen="cotizar-servicio"] .service-quote-summary{gap:6px;padding:9px;border-radius:12px}
body #main-content>.screen[data-screen="cotizar-servicio"] .service-form-subheading{
 margin:2px 0 0;
 padding-top:8px;
 border-top:1px solid #dce6f7;
 color:#1457cf;
 font:850 11px/1.2 system-ui,sans-serif;
 letter-spacing:.07em;
 text-transform:uppercase;
}
body #main-content>.screen[data-screen="cotizar-servicio"] .service-contact-fields{
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:8px 10px;
}
body #main-content>.screen[data-screen="cotizar-servicio"] .service-contact-fields label:is(:nth-child(1),:nth-child(2),:nth-child(5)){grid-column:1/-1}
body #main-content>.screen[data-screen="cotizar-servicio"] .checkout-note{
 margin:1px 0;
 padding-left:8px;
 border-left:2px solid #ff5a1f;
 color:#52617d;
 font-size:10px;
 line-height:1.4;
 text-align:left;
}
body #main-content>.screen[data-screen="cotizar-servicio"] .service-inquiry-form>.button{
 min-height:41px;
 padding:9px 12px;
 border-radius:11px;
 font-size:11px;
 font-weight:850;
}
@media(min-width:361px) and (max-width:520px){
 body #main-content>.screen[data-screen="cotizar-servicio"] .service-choice-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
 }
}
@media(max-width:360px){
 body #main-content>.screen[data-screen="cotizar-servicio"] .service-contact-fields{grid-template-columns:1fr}
 body #main-content>.screen[data-screen="cotizar-servicio"] .service-contact-fields label{grid-column:1/-1}
}

/* The floating dock overlays the scroll canvas. Reserve room only at the end of each page. */
body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content{
 scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;
}
body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content>.screen.is-active:not([data-screen="mixer"]){
 padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;
}
@media(max-width:700px) and (orientation:portrait){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content{
  scroll-padding-bottom:calc(96px + var(--phone-nav-safe,env(safe-area-inset-bottom,0px)))!important;
 }
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content>.screen.is-active:not([data-screen="mixer"]){
  padding-bottom:calc(96px + var(--phone-nav-safe,env(safe-area-inset-bottom,0px)))!important;
 }
}
@media(min-width:1367px) and (min-height:600px) and (orientation:landscape) and (any-pointer:coarse){
 body .app-frame:has(.screen.is-active:not(.mixer-screen))>main#main-content>.screen.is-active:not([data-screen="mixer"]){
  padding-bottom:24px!important;
 }
}

/* Compact course previews keep both actions and the next course in view. */
body #main-content>.screen[data-screen="tienda"]>.page-intro{
 margin-bottom:11px!important;
 padding:11px 14px!important;
}
body #main-content>.screen[data-screen="tienda"]>.page-intro h1{
 margin:5px 0 3px!important;
 font-size:clamp(22px,5.8vw,28px)!important;
 line-height:1.02!important;
}
body #main-content>.screen[data-screen="tienda"]>.page-intro p{
 margin:0!important;
 font-size:11px!important;
 line-height:1.35!important;
}
body #main-content>.screen[data-screen="tienda"] .store-tools{
 margin-bottom:10px!important;
}
body #main-content>.screen[data-screen="tienda"] #product-list{
 gap:11px!important;
}
body #main-content>.screen[data-screen="tienda"] .course-product-card{
 padding:12px!important;
 border-radius:16px!important;
}
body #main-content>.screen[data-screen="tienda"] .course-product-card .product-image{
 width:calc(100% + 24px)!important;
 height:140px!important;
 max-height:140px!important;
 margin:-12px -12px 10px!important;
 object-fit:cover!important;
}
body #main-content>.screen[data-screen="tienda"] .course-product-card h2{
 margin:5px 0!important;
 font-size:18px!important;
 line-height:1.07!important;
}
body #main-content>.screen[data-screen="tienda"] .course-product-card p{
 font-size:11px!important;
 line-height:1.35!important;
}
body #main-content>.screen[data-screen="tienda"] .course-product-card .product-buy{
 gap:8px!important;
 margin-top:10px!important;
}
body #main-content>.screen[data-screen="tienda"] .course-product-card .product-buy .button{
 min-height:44px!important;
 padding:9px 12px!important;
 font-size:10px!important;
}

/* Secondary screens reuse the existing dock as one floating Home control. */
body .app-frame[data-nav-mode="home"]:has(>main#main-content>.screen.is-active)>.tab-bar{
 --compact-home-safe:env(safe-area-inset-bottom,0px);
 position:fixed!important;
 inset:auto auto calc(var(--compact-home-safe) + 10px) max(12px,env(safe-area-inset-left,0px))!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 width:58px!important;
 min-width:58px!important;
 max-width:58px!important;
 height:58px!important;
 min-height:58px!important;
 max-height:58px!important;
 padding:4px!important;
 overflow:hidden!important;
 border:1px solid #ffffff91!important;
 border-radius:20px!important;
 background:linear-gradient(145deg,rgba(25,88,214,.92),rgba(8,47,123,.92))!important;
 box-shadow:0 8px 24px #09285a48,inset 0 1px #ffffff6b!important;
 -webkit-backdrop-filter:blur(18px) saturate(165%)!important;
 backdrop-filter:blur(18px) saturate(165%)!important;
 transform:none!important;
}
body .app-frame[data-nav-mode="home"]:has(>main#main-content>.screen.is-active)>.tab-bar>.tab:not([data-tab="inicio"]){
 display:none!important;
}
body .app-frame[data-nav-mode="home"]:has(>main#main-content>.screen.is-active)>.tab-bar>.tab[data-tab="inicio"]{
 display:flex!important;
 flex:0 0 48px!important;
 width:48px!important;
 min-width:48px!important;
 max-width:48px!important;
 height:48px!important;
 min-height:48px!important;
 max-height:48px!important;
 padding:0!important;
 border-radius:16px!important;
 background:#ffffff28!important;
 transform:none!important;
}
body .app-frame[data-nav-mode="home"]:has(>main#main-content>.screen.is-active)>.tab-bar>.tab[data-tab="inicio"]>span{
 display:none!important;
}
body .app-frame[data-nav-mode="home"]:has(>main#main-content>.screen.is-active)>.tab-bar>.tab[data-tab="inicio"]>svg{
 width:27px!important;
 height:27px!important;
}
body .app-frame[data-nav-mode="home"]:has(>main#main-content>.screen.is-active)>main#main-content>.screen.is-active:not([data-screen="mixer"]){
 padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;
}
@media(max-width:700px) and (orientation:portrait){
 body .app-frame[data-nav-mode="home"]:has(>main#main-content>.screen.is-active)>.tab-bar{
  --compact-home-safe:var(--phone-nav-safe,env(safe-area-inset-bottom,0px));
 }
 body .app-frame[data-nav-mode="home"]:has(>main#main-content>.screen.is-active)>main#main-content>.screen.is-active:not([data-screen="mixer"]){
  padding-bottom:calc(84px + var(--phone-nav-safe,env(safe-area-inset-bottom,0px)))!important;
 }
}
@media(min-width:1367px) and (min-height:600px) and (orientation:landscape) and (any-pointer:coarse){
 body .app-frame[data-nav-mode="home"]:has(>main#main-content>.screen.is-active)>main#main-content{
  left:0!important;
 }
}

/* Denser content in work areas; the fixed app header and floating dock stay untouched. */
body #main-content>.screen:not([data-screen="inicio"]):not([data-screen="perfil"]):not([data-screen="feed"]):not([data-screen="mixer"])>.page-intro:not(.feed-page-intro){
 margin-bottom:10px;
 padding-block:10px;
}
body #main-content>.screen:not([data-screen="inicio"]):not([data-screen="perfil"]):not([data-screen="feed"]):not([data-screen="mixer"])>.page-intro h1{
 font-size:clamp(20px,2.5vw,27px);
 line-height:1.1;
 margin:3px 0;
}
body #main-content>.screen:not([data-screen="inicio"]):not([data-screen="perfil"]):not([data-screen="feed"]):not([data-screen="mixer"])>.page-intro p{
 font-size:12px;
 line-height:1.38;
 margin-top:3px;
}
body #main-content>.screen:not([data-screen="inicio"]):not([data-screen="perfil"]):not([data-screen="feed"]):not([data-screen="mixer"]) .section-heading{
 margin-block:10px 7px;
}
body #main-content>.screen:not([data-screen="inicio"]):not([data-screen="perfil"]):not([data-screen="feed"]):not([data-screen="mixer"]) .section-heading h2{
 font-size:18px;
 line-height:1.15;
}
body #main-content>.screen .explore-options,
body #main-content>.screen .explore-grid,
body #main-content>.screen .space-hub-grid,
body #main-content>.screen .crew-list{gap:8px;}
body #main-content>.screen .explore-options,
body #main-content>.screen .explore-grid{align-items:start;}
body #main-content>.screen .explore-card{
 padding:12px 13px;
 border-radius:12px;
}
body #main-content>.screen .explore-card h2{
 margin:4px 0;
 font-size:19px;
 line-height:1.08;
}
body #main-content>.screen .explore-card p{
 margin:4px 0 7px;
 font-size:11px;
 line-height:1.35;
}
body #main-content>.screen .space-hub-card{
 min-height:84px;
 padding:10px 12px;
}
body #main-content>.screen .space-hub-card b{font-size:17px;}
body #main-content>.screen :is(.crew-hub-banner,.crew-detail-hero,.crew-group-card,.crew-pane,.advisory-overview,.advisory-section){
 padding:12px;
}
body #main-content>.screen .advisory-folder summary{padding:11px;}
body #main-content>.screen .advisory-folder-body{padding:12px;}

/* Admin record: preserve every field and action while reducing stacked empty space. */
body #main-content>.admin-screen .admin-app-nav{
 gap:3px;
 margin-bottom:8px;
 padding:4px;
}
body #main-content>.admin-screen .admin-app-nav button{
 flex:0 0 auto;
 min-height:42px;
 padding:7px 10px;
 font-size:11px;
}
body #main-content>.admin-screen .admin-back-link{
 min-height:36px;
 margin:2px 0 7px;
 padding:6px 11px;
 font-size:11px;
}
body #main-content>.admin-screen .admin-person-hero{
 margin:0 0 8px;
 padding:11px 13px;
 border-radius:12px;
}
body #main-content>.admin-screen .admin-person-hero .eyebrow{
 font-size:9px;
 line-height:1.3;
 letter-spacing:.09em;
}
body #main-content>.admin-screen .admin-person-hero h1{
 margin:4px 0;
 font-size:clamp(20px,3.2vw,27px);
 line-height:1.12;
}
body #main-content>.admin-screen .admin-person-hero p{
 margin:2px 0 0;
 font-size:12px;
 line-height:1.35;
}
body #main-content>.admin-screen .admin-detail-tabs{
 gap:4px;
 margin:7px 0;
 padding:3px;
 border-radius:10px;
}
body #main-content>.admin-screen .admin-detail-tabs button{
 min-height:42px;
 padding:8px 9px;
 font-size:12px;
 line-height:1.2;
}
body #main-content>.admin-screen :is(.admin-detail-section,.admin-class-plan){
 gap:7px;
 margin:7px 0;
 padding:10px 11px;
 border-radius:12px;
}
body #main-content>.admin-screen .admin-detail-section h2{
 margin:0 0 5px;
 font-size:17px;
 line-height:1.2;
}
body #main-content>.admin-screen .admin-form-pair{gap:8px;}
body #main-content>.admin-screen .admin-detail-section label,
body #main-content>.admin-screen .admin-class-plan label{
 gap:4px;
 font-size:12px;
 line-height:1.3;
}
body #main-content>.admin-screen :is(input,select,textarea){
 min-height:42px;
 padding:8px 10px;
 line-height:1.3;
}
body #main-content>.admin-screen textarea{min-height:76px;}
body #main-content>.admin-screen :is(.admin-session-list,.session-fields){gap:7px;}
body #main-content>.admin-screen .admin-session>summary{
 gap:8px;
 padding:9px 10px;
}
body #main-content>.admin-screen .admin-session-body{gap:8px;padding:9px;}
body #main-content>.admin-screen .session-edit-block{padding:10px;}
body #main-content>.admin-screen .session-edit-block>h3{margin-bottom:8px;}
body #main-content>.admin-screen .admin-app-grid{gap:7px;}
body #main-content>.admin-screen :is(.admin-app-card,.admin-app-card.blue,.admin-app-card.orange){
 min-height:88px;
 padding:10px;
}
body #main-content>.admin-screen :is(.admin-app-card,.admin-app-card.blue,.admin-app-card.orange)>strong{font-size:25px;}
body #main-content>.admin-screen .admin-workspace-columns{gap:9px;}
body #main-content>.admin-screen :is(.admin-workspace-columns>.admin-app-section,.admin-shortcuts){padding:10px;}
body #main-content>.admin-screen :is(.admin-meeting-card,.admin-person-card){padding:9px 10px;}

@media(max-width:700px){
 body #main-content>.admin-screen .admin-person-hero h1{font-size:21px;}
 body #main-content>.admin-screen .admin-app-nav button{min-height:42px;}
 body #main-content>.admin-screen .admin-form-pair{grid-template-columns:1fr;}
}

/* Pull to refresh moves the current canvas while the approved bars remain fixed. */
body .app-frame.pull-refresh-pulling>main#main-content{
 transform:translate3d(0,var(--pull-refresh-distance,0px),0)!important;
 transition:none!important;
 will-change:transform;
}
body .app-frame.pull-refresh-loading>main#main-content{
 transform:translate3d(0,68px,0)!important;
 transition:transform .2s ease-out!important;
 will-change:transform;
}
body .app-frame.pull-refresh-settling>main#main-content{
 transform:translate3d(0,0,0)!important;
 transition:transform .22s ease-out!important;
}
body .app-frame .pull-refresh-indicator{
 position:fixed;
 left:50%;
 z-index:49;
 display:flex;
 align-items:center;
 gap:8px;
 padding:7px 12px 7px 8px;
 border:1px solid #ffffff9c;
 border-radius:999px;
 color:#fff;
 background:linear-gradient(130deg,#174db7,#103378);
 box-shadow:0 7px 22px #071e5b38;
 font:700 11px/1.2 system-ui,sans-serif;
 white-space:nowrap;
 pointer-events:none;
 opacity:0;
 transform:translate(-50%,-16px) scale(.92);
 transition:opacity .16s ease,transform .16s ease;
}
body .app-frame:is(.pull-refresh-pulling,.pull-refresh-loading) .pull-refresh-indicator{
 opacity:1;
 transform:translate(-50%,0) scale(1);
}
body .app-frame .pull-refresh-glyph{
 position:relative;
 display:grid;
 place-items:center;
 width:24px;
 height:24px;
 flex:0 0 24px;
 border-radius:50%;
 background:#ff5a1f;
}
body .app-frame .pull-refresh-glyph svg{
 width:15px;
 height:15px;
 fill:none;
 stroke:currentColor;
 stroke-width:2;
 stroke-linecap:round;
 stroke-linejoin:round;
 transition:transform .16s ease;
}
body .app-frame.pull-refresh-ready .pull-refresh-glyph svg{transform:rotate(180deg);}
body .app-frame.pull-refresh-loading .pull-refresh-glyph svg{opacity:0;}
body .app-frame.pull-refresh-loading .pull-refresh-glyph::after{
 content:"";
 position:absolute;
 inset:4px;
 border:2px solid #ffffff75;
 border-top-color:#fff;
 border-radius:50%;
 animation:ceejay-pull-spin .65s linear infinite;
}
@keyframes ceejay-pull-spin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){
 body .app-frame .pull-refresh-indicator,
 body .app-frame .pull-refresh-glyph svg,
 body .app-frame:is(.pull-refresh-loading,.pull-refresh-settling)>main#main-content{transition:none!important;}
 body .app-frame.pull-refresh-loading .pull-refresh-glyph::after{animation-duration:1.4s;}
}

/* iPad landscape: keep the seven destinations together in a bottom pill. */
@media(min-width:701px) and (max-width:1366px) and (orientation:landscape) and (any-pointer:coarse){
 body .app-frame[data-nav-mode="full"]:has(.screen.is-active:not(.mixer-screen))>.tab-bar{
  inset:auto auto calc(env(safe-area-inset-bottom,0px) + 10px) 50%!important;
  width:max-content!important;max-width:calc(100vw - 28px)!important;
  margin:0!important;justify-content:center!important;
  transform:translateX(-50%)!important;
 }
}

/* Three compact agendas share the established event color language. */
.professional-agenda-panel{border-top:3px solid #1955ff}
#professional-agenda-list .personal-event-card{width:100%;text-align:left;color:inherit;font:inherit;cursor:pointer}
#professional-agenda-list .personal-event-card:focus-visible{outline:3px solid #ff5a1f;outline-offset:3px}
#professional-calendar-week .personal-calendar-day{min-height:64px}
#professional-calendar-day-title{font-size:16px;margin:14px 0 10px}