/* One account, one OA. Desktop geometry is unchanged above 1099px. */
.mobile-nav-backdrop,.mobile-nav-close{display:none}
@media(max-width:1099px){
 #mainApp [hidden]{display:none!important}
 html,body{min-width:0;width:100%;max-width:100%;overflow:hidden}
 body{height:100vh;height:100dvh;-webkit-text-size-adjust:100%;text-size-adjust:100%}
 #mainApp{width:100%;height:100vh;height:100dvh;min-height:0;overflow:hidden}
 #mainApp .main{width:100%;min-height:0}
 #mainApp .content{min-width:0;min-height:0;padding:16px 12px calc(24px + env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;scroll-padding-top:12px}
 #mainApp .content{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
 #mainApp .page{min-width:0;max-width:100%;padding-inline:0!important}
 #mainApp .topbar{padding:calc(10px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));gap:8px;flex-wrap:wrap}
 #mainApp .topbar-left{width:100%;min-width:0;gap:8px;flex-wrap:wrap}
 #mainApp .page-title{font-size:18px;line-height:1.4;overflow-wrap:anywhere}
 #mainApp .mobile-menu-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;flex:none;border:1px solid #e4d7e8;border-radius:10px;background:#fff8f0;color:#73507f;padding:8px}
 #mainApp .topbar-right{width:100%;gap:6px;justify-content:flex-end;flex-wrap:wrap}
 #mainApp .topbar-right .icon-btn{width:44px;height:44px;flex:none}
 #mainApp .topbar-right .btn-secondary{min-height:36px;padding:6px 8px;font-size:11px;white-space:normal;max-width:44%}
 #mainApp .topbar-right #accountInfoBtn{display:none}
 #mainApp .topbar nav.hm-hr-tabs,#mainApp .topbar #posterCategoryTabs{width:100%;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding:4px 0;gap:6px;-webkit-overflow-scrolling:touch}
 #mainApp .topbar nav.hm-hr-tabs button,#mainApp .topbar #posterCategoryTabs button{flex:none;min-height:40px}
 #mainApp .sidebar,#mainApp .sidebar.collapsed{position:fixed;inset:0 auto 0 0;left:0;width:min(320px,88vw);height:100vh;height:100dvh;z-index:210;transform:translateX(-105%);transition:transform .2s ease;overflow:hidden;box-shadow:12px 0 40px #160d2840;border:0;display:flex;flex-direction:column}
 #mainApp .sidebar.open{transform:translateX(0)}
 #mainApp .sidebar-header{min-width:0;min-height:150px;padding:calc(18px + env(safe-area-inset-top)) 16px 68px;border:0}
 #mainApp .sidebar-header .genz-logo-frame{width:145px;height:48px}
 #mainApp .sidebar-header .logo-text{display:none}
 #mainApp #sidebarToggle{display:none}
 #mainApp .mobile-nav-close{display:grid;place-items:center;position:absolute;right:12px;top:calc(18px + env(safe-area-inset-top));width:44px;height:44px;border:1px solid #e6cba652;border-radius:10px;background:#ffffff0d;color:#fff;font-size:27px;cursor:pointer}
 #mainApp .sidebar>#langToggle{position:absolute!important;top:calc(90px + env(safe-area-inset-top));left:16px;right:auto;width:52px;height:40px;z-index:2}
 #mainApp .sidebar>.account-circle{position:absolute;top:calc(88px + env(safe-area-inset-top));left:80px;right:auto;width:44px;height:44px;z-index:2}
 #mainApp .sidebar>.tiktok-corner-badge{display:none}
 #mainApp .sidebar-nav{flex:1;overflow-y:auto;min-height:0;padding:8px 12px calc(24px + env(safe-area-inset-bottom))!important;-webkit-overflow-scrolling:touch}
 #mainApp .console-nav-group summary{padding:8px 10px;color:#f0dded}
 #mainApp .console-nav-group .nav-section-title{font-size:14px;letter-spacing:0;margin:0;padding:5px 0}
 #mainApp .console-nav-panel{position:static;min-width:0;max-height:none;border:0;background:transparent;box-shadow:none;padding:0 0 6px}
 #mainApp .nav-item{min-height:44px;padding:11px 14px;white-space:normal}
 #mainApp .console-subnav{display:none!important}
 #mainApp .mobile-nav-backdrop:not([hidden]){display:block;position:fixed;inset:0;width:100%;height:100%;border:0;z-index:205;background:#160d2870;backdrop-filter:blur(2px)}
 #mainApp .page-toolbar,#mainApp .toolbar-left,#mainApp .toolbar-right,#mainApp .filter-group,#mainApp .card-header{flex-wrap:wrap;gap:10px;min-width:0}
 #mainApp .toolbar-left,#mainApp .toolbar-right{width:100%;margin:0}
 #mainApp .page-toolbar input,#mainApp .page-toolbar select,#mainApp .hm-toolbar input:not([type=checkbox]),#mainApp .hm-toolbar select{max-width:100%;min-width:0}
 #mainApp .search-box{width:100%;min-width:0;max-width:100%}
 #mainApp .hm-toolbar{flex-wrap:wrap;min-width:0;gap:10px}
 #mainApp .hm-toolbar>label{max-width:100%;min-width:0}
 #mainApp .hm-toolbar label input[type=file]{max-width:100%;width:100%}
 #mainApp .kpi-grid,#mainApp .revenue-cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #mainApp .charts-row,#mainApp .dashboard-grid,#mainApp .table-row,#mainApp .users-perm-grid{grid-template-columns:1fr!important;gap:12px}
 #mainApp .revenue-card{min-width:0;padding:14px 12px}
 #mainApp .revenue-card-value{font-size:24px;overflow-wrap:anywhere}
 #mainApp .kpi-value{font-size:26px;overflow-wrap:anywhere}
 #mainApp .revenue-card-label{font-size:12px;line-height:1.5}
 #mainApp .card{max-width:100%;min-width:0;overflow:hidden}
 #mainApp .card-header{padding:14px 12px}
 #mainApp .card-title{font-size:15px;line-height:1.5}
 #mainApp .table-wrap{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
 #mainApp .data-table{font-size:13px}
 #mainApp .data-table th,#mainApp .data-table td{padding:10px;white-space:nowrap}
 #mainApp .pagination{flex-wrap:wrap;gap:6px;padding:12px}
 #mainApp .hm-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
 #mainApp .rb-editor{flex-direction:column}
 #mainApp .rb-toolbox{flex:auto;width:100%;padding:14px}
 #mainApp .rb-toolbox button{display:inline-flex;width:calc(50% - 7px);margin:8px 4px 0 0;padding:12px 8px;gap:6px}
 #mainApp .rb-plan-section{width:100%}
 #mainApp .co-heading{flex-wrap:wrap}
 #mainApp .ct-shell>header,#mainApp .rb-heading{flex-wrap:wrap}
 #mainApp .performance-toolbar{flex-wrap:wrap;gap:10px}
 #mainApp .performance-toolbar label{min-width:0;flex:1 1 140px}
 #mainApp .legend-banner{padding:18px;min-height:0}
 #mainApp .legend-banner h2{font-size:20px}
 #mainApp .legend-banner-meta{min-width:0}
 #mainApp input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),#mainApp select,#mainApp textarea,.modal input,.modal select,.modal textarea{font-size:16px}
 .modal-overlay{padding:12px 8px calc(12px + env(safe-area-inset-bottom));align-items:center}
 .modal-overlay .modal{width:100%!important;max-width:100%!important;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px - env(safe-area-inset-bottom));min-width:0;margin:0;overflow:auto}
 .modal-header,.modal-body,.modal-footer{padding:14px}
 .modal-body .form-row,.modal-body .form-grid{grid-template-columns:1fr!important}
 .modal-close{min-width:44px;min-height:44px}
 .modal-footer{flex-wrap:wrap}
 #financePortal{width:100%;height:100vh;height:100dvh;min-height:0!important;overflow:auto;-webkit-overflow-scrolling:touch}
 #financePortal [hidden]{display:none!important}
 #finHeader{padding:calc(10px + env(safe-area-inset-top)) 12px 10px!important;flex-wrap:wrap;gap:12px}
 #finHeader>div{max-width:100%;flex-wrap:wrap;gap:10px!important}
 #finHeader button{min-height:40px}
 #finLayout{flex-direction:column;min-height:0!important}
 #finSidebar{width:100%!important;flex-direction:row!important;padding:8px!important;overflow-x:auto}
 #finSidebar .fin-nav-item{flex:none;white-space:nowrap;padding:10px 14px!important}
 #finContent{width:100%;min-width:0;padding:14px 12px calc(24px + env(safe-area-inset-bottom))!important}
 #finContent input,#finContent select{min-width:0!important;max-width:100%;font-size:16px!important}
 #finRecItem{flex:1 0 100%!important;width:100%!important}
 #finRecCategory,#finRecAmount{width:calc(50% - 6px)!important}
 #financePortal .table-wrap{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
 #oaAssistant{right:max(10px,env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom))}
 #oaAssistantPanel{max-width:calc(100vw - 24px);max-height:calc(100dvh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
 #loginOverlay.halloween-login{padding:calc(76px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));min-height:100%;height:100vh;height:100dvh;align-items:flex-start;-webkit-overflow-scrolling:touch}
 #loginOverlay.halloween-login .login-card{width:440px;max-width:100%;margin:auto;padding:20px 24px 24px;border-radius:24px}
 #loginOverlay.halloween-login .login-input{font-size:16px;min-height:48px}
 #loginOverlay.halloween-login .login-btn{min-height:48px;font-size:16px}
 #loginOverlay.halloween-login #loginLangToggle{top:calc(14px + env(safe-area-inset-top))!important;right:max(16px,env(safe-area-inset-right))!important;min-height:40px}
 #loginOverlay.halloween-login .login-logo{max-width:320px;margin-inline:auto}
 #loginOverlay .hln-aurora{filter:blur(35px);animation:none}
 #loginOverlay .hln-corner-label{top:calc(20px + env(safe-area-inset-top));left:16px;max-width:130px}
 #loginOverlay.halloween-login .login-input:focus{scroll-margin-block:24px}
}
@media(max-width:480px){
 #mainApp .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #mainApp .revenue-cards-grid{grid-template-columns:1fr}
 #mainApp #attTable .att-team-td{position:static}
 #mainApp #attTable thead tr:first-child th:first-child{left:auto}
 #mainApp #attTable td.att-name-td,#mainApp #attTable thead tr:first-child th:nth-child(2){left:0}
 #mainApp #officeAttTable .office-att-dept{position:static}
 #mainApp #officeAttTable .office-att-name{left:0;min-width:110px}
 #mainApp .topbar-right #mcCoverageBtn,#mainApp .topbar-right #opsCoverageBtn{max-width:36%;font-size:10px}
 #mainApp .content{padding-inline:10px}
 #mainApp .activity-banner{padding:18px;gap:12px}
 #mainApp .activity-banner strong{font-size:24px}
 #mainApp .activity-banner em{font-size:32px}
 #loginOverlay.halloween-login .login-card{padding:16px 20px 22px}
 #loginOverlay .hln-ghost-right{right:-48px;opacity:.6}
 #loginOverlay .hln-ghost-left{left:-48px;opacity:.6}
}
@media(max-width:1099px) and (prefers-reduced-motion:reduce){#mainApp .sidebar{transition:none}}