/* V31: unified presentation layer; operational and permission logic lives in the original app. */
:root{--navy:#101f32;--navy2:#0c1828;--blue:#2563eb;--blue2:#1d4ed8;--accent:#e31b23;--bg:#f5f7fa;--line:#e4e9f0;--text:#1a2b40;--muted:#64748b;--shadow:0 3px 12px rgba(16,31,50,.035)}
body{background:var(--bg)!important;-webkit-font-smoothing:antialiased;line-height:1.5}
#appShell .top{height:72px!important;background:#fff!important;color:var(--text)!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important;padding:0 28px!important;gap:18px!important}
#appShell .brand{gap:18px!important;display:flex!important;align-items:center!important}
#appShell .top-logo-frame{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important;min-width:125px!important}
#appShell .brand-label{color:#64748b!important;letter-spacing:.13em!important;font-size:9px!important;border-left:1px solid var(--line);padding-left:18px}
#appShell .userbar{color:#334155!important;gap:12px!important}#userName{font-weight:600}
#appShell .role{background:#f1f5f9!important;border:1px solid var(--line)!important;color:#475569!important;border-radius:7px!important;padding:5px 8px!important;font-size:10px!important}
#appShell .notif-btn,#appShell .mobile-menu{background:#f8fafc!important;color:#475569!important;border:1px solid var(--line)!important;box-shadow:none!important;border-radius:10px!important;width:40px!important;height:40px!important;display:inline-flex;align-items:center;justify-content:center}
#appShell .notif-count{border-color:#fff!important}
#appShell .notif-menu{border-radius:16px!important;box-shadow:0 20px 60px #101f3226!important}
#appShell aside#side{background:#101f32!important;border-right:0!important;color:#c2ccda!important;padding:20px 14px!important;scrollbar-width:thin;scrollbar-color:#3b4c60 transparent}
#appShell .nav:before{display:none!important}
#appShell .nav-group{margin-bottom:19px!important}
#appShell .nav-group-title{color:#90a0b5!important;font-size:9px!important;font-weight:700!important;letter-spacing:.14em!important;padding:12px 12px 8px!important}
#appShell .nav button{color:#c8d2df!important;background:transparent!important;box-shadow:none!important;border:0!important;border-radius:9px!important;font-size:12px!important;font-weight:500!important;min-height:42px!important;padding:10px 12px!important;gap:12px!important;line-height:1.4!important}
#appShell .nav button:hover{background:#1b3049!important;color:#fff!important}
#appShell .nav button.active{background:#253b55!important;color:#fff!important;font-weight:650!important;box-shadow:inset 3px 0 0 #e31b23!important}
#appShell .nav-icon,#appShell .nav-item-icon{color:inherit!important;background:none!important;width:20px!important;height:20px!important;flex:0 0 20px!important;border:0!important;padding:0!important;border-radius:0!important;display:inline-flex!important;align-items:center;justify-content:center}
.ui-icon{width:19px;height:19px;display:block;flex-shrink:0}
.ui-menu-search{position:relative;margin:0 3px 12px;color:#91a4bc}
.ui-menu-search>.ui-icon{position:absolute;left:12px;top:12px;width:16px;height:16px;pointer-events:none}
.ui-menu-search input{width:100%;height:40px;background:#192b41;color:#fff;border:1px solid #30425a;border-radius:9px;padding:8px 34px;font-size:12px}
.ui-menu-search input::placeholder{color:#9babbe}
.ui-menu-search button{position:absolute;right:4px;top:4px;width:30px;height:32px;background:none;border:0;color:#c8d2df;font-size:18px}
#appShell .nav .ui-filtered,#appShell .nav .ui-group-filtered{display:none!important}
.ui-nav-empty{padding:16px 12px;color:#b8c6d8;font-size:12px}
#appShell .main{padding:32px!important;max-width:1800px!important}
#appShell .page-head{margin-bottom:24px!important;gap:16px!important}
#appShell .page-head h1{font-size:clamp(24px,2.4vw,32px)!important;letter-spacing:-.04em!important;line-height:1.2!important;color:#14273d!important}
.muted{color:var(--muted);line-height:1.6}.eyebrow,.role-eyebrow{color:#6b7d92!important;font-size:10px!important;letter-spacing:.13em!important;font-weight:700!important}
.card,.export-card,.admin-module{background:#fff!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:var(--shadow)!important}
.card{padding:22px!important}.card h3{font-size:16px!important;letter-spacing:-.02em!important;font-weight:650!important}
.section-title{gap:12px!important;margin-bottom:18px!important}.section-title h3{margin:0!important}
.grid{gap:16px!important}.metric,.approval-summary-number{font-size:clamp(25px,2.3vw,34px)!important;font-weight:650!important;letter-spacing:-.04em!important;color:#182d44!important;overflow-wrap:anywhere}
.kpi,.admin-kpi-card{position:relative;border-top:1px solid var(--line)!important;min-height:136px!important;overflow:hidden}
.admin-kpi-card .kpi-top{color:#44617e!important}.admin-kpi-card .kpi-top small{color:#64748b!important;font-size:9px!important}
.kpi:after,.admin-kpi-card:after{content:'';height:3px;position:absolute;bottom:0;left:22px;right:22px;background:#dbeafe;border-radius:3px}
.admin-kpi-card:nth-child(4):after,.admin-kpi-card:nth-child(6):after{background:#fde3b2}.admin-kpi-card:nth-child(5):after{background:#fecaca}
.admin-hero,.role-hero,.exec-hero{background:linear-gradient(115deg,#101f32,#243e59)!important;border:0!important;border-radius:20px!important;padding:30px!important;box-shadow:none!important;position:relative;overflow:hidden;color:#fff!important}
.admin-hero:before{content:'';position:absolute;right:7%;top:-80px;width:240px;height:240px;border:1px solid #ffffff0d;border-radius:50%;pointer-events:none}
.admin-hero h1,.role-hero h1,.exec-hero h1{color:#fff!important;font-weight:650!important;letter-spacing:-.04em!important}
.admin-hero .eyebrow,.role-hero .role-eyebrow,.exec-hero .eyebrow{color:#b7c9dd!important}.admin-hero p,.role-hero p,.exec-hero p{color:#c1cede!important;font-size:13px;line-height:1.7}
.admin-hero-actions{position:relative}.admin-hero-actions .secondary{background:#ffffff12!important;border-color:#ffffff30!important;color:#fff!important}
.admin-module-grid{gap:14px!important}.admin-module{padding:20px!important;min-height:128px!important;grid-template-columns:38px 1fr 16px!important;gap:12px!important}
.admin-module:hover{border-color:#aebfd3!important;background:#fbfdff!important;box-shadow:0 8px 24px #101f3209!important;transform:translateY(-2px)}
.module-icon{width:38px!important;height:38px!important;background:#eef4fa!important;color:#496984!important;border-radius:11px!important}.module-icon svg{width:20px;height:20px}
.admin-module strong{font-size:13px!important;font-weight:650!important}.admin-module small{font-size:12px!important;line-height:1.6!important;color:#64748b!important}.module-arrow{color:#64748b!important}
.primary,.secondary,.danger{min-height:40px!important;border-radius:9px!important;padding:10px 15px!important;line-height:1.35!important;font-size:12px!important;font-weight:600!important;box-shadow:none!important;transition:background .15s ease,transform .15s ease!important}
.primary{background:#e31b23!important;border:1px solid #e31b23!important;color:#fff!important}.primary:hover{background:#c4141c!important;border-color:#c4141c!important;transform:translateY(-1px)}
.secondary{background:#fff!important;border:1px solid #dce3eb!important;color:#40546b!important}.secondary:hover{background:#f1f5f9!important;border-color:#b8c6d6!important}
.danger{background:#fff1f2!important;border:1px solid #fecdd3!important;color:#b42318!important}.danger:hover{background:#ffe4e6!important}
.quick-grid button,.quick-actions button{border:1px solid var(--line)!important;border-radius:11px!important;background:#f8fafc!important;color:#344b63!important;padding:14px!important}
.quick-grid button:hover,.quick-actions button:hover{background:#edf3fa!important;border-color:#bacbdc!important}
.subnav{padding:5px!important;border:1px solid var(--line)!important;border-radius:11px!important;background:#eef2f6!important;gap:4px!important}
.subnav button{background:transparent!important;border:0!important;border-radius:7px!important;color:#64748b!important;padding:9px 13px!important;font-size:12px!important;white-space:nowrap}
.subnav button.active{background:#fff!important;color:#172d45!important;box-shadow:0 2px 5px #101f320a!important}
.toolbar input,.toolbar select,.role-head-actions select,.project-switcher select{background:#fff!important;border:1px solid #dce3eb!important;border-radius:9px!important;color:#334155!important;padding:10px 12px!important;font-size:12px!important;min-height:42px!important}
.toolbar{gap:10px!important;margin:20px 0!important}
.tablewrap{border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:none!important;background:#fff!important;max-width:100%!important;scrollbar-width:thin;scrollbar-color:#b7c5d6 #f1f5f9}
th{background:#f7f9fc!important;color:#65788d!important;font-size:10px!important;font-weight:650!important;letter-spacing:.07em!important;padding:14px 16px!important;white-space:nowrap}
td{font-size:12px!important;color:#344b63!important;padding:15px 16px!important;border-bottom-color:#edf1f6!important;line-height:1.6!important}tbody tr:hover{background:#f8fbff!important}
.tablewrap button{min-height:34px!important;padding:7px 11px!important;font-size:11px!important}
.ui-table-hint{display:flex;align-items:center;gap:7px;color:#6b7d92;font-size:11px;margin:8px 2px 12px}.ui-table-hint .ui-icon{width:14px;height:14px}
.tablewrap:focus-visible{outline:3px solid #93b4e0;outline-offset:3px}.badge{font-size:10px!important;font-weight:650!important;padding:5px 9px!important;line-height:1.5!important;letter-spacing:.01em}
.field label{font-size:12px!important;font-weight:600!important;color:#40546b!important}.field input,.field select,.field textarea{border:1px solid #d7e0eb!important;border-radius:10px!important;background:#fff!important;color:#263c54!important;min-height:44px!important;padding:11px 13px!important;font-size:13px!important}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#7fa6d8!important;box-shadow:0 0 0 3px #2563eb12!important;outline:none}
.modal{z-index:400!important;background:#0c18288c!important;backdrop-filter:blur(4px)!important}.modalbox{border-radius:20px!important;padding:28px!important;box-shadow:0 30px 90px #101f3238!important}.modalbox h2{font-size:23px!important;letter-spacing:-.03em!important}.modal-actions,.actions-sticky{background:#fff!important;padding-top:16px!important;border-top:1px solid var(--line)}
.ui-modal-close{float:right;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#f8fafc;color:#475569;border-radius:9px;margin-left:12px;margin-bottom:8px;font-size:24px}
.empty{padding:40px 24px!important;background:#fafcfe;border:1px dashed #dce5ef;border-radius:12px;font-size:13px}.spinner{display:flex;justify-content:center;align-items:center;gap:10px;font-size:13px}.spinner:before{content:'';width:17px;height:17px;border:2px solid #dbe4ef;border-top-color:#e31b23;border-radius:50%;animation:ui-spin .8s linear infinite}@keyframes ui-spin{to{transform:rotate(360deg)}}
.global-search input{border:1px solid var(--line)!important;background:#f8fafc!important;color:#334155!important;border-radius:10px!important;min-height:40px!important}.global-search input::placeholder{color:#7d8da0!important}.search-results{border-radius:14px!important;box-shadow:0 18px 45px #101f3220!important}
.login{background:#f3f6fa!important;padding:40px!important;min-height:100dvh!important;display:flex!important;align-items:center!important;justify-content:center!important}
.login-shell{width:min(1080px,100%)!important;min-height:580px!important;grid-template-columns:1.08fr 1fr!important;border:1px solid var(--line)!important;border-radius:24px!important;box-shadow:0 18px 65px #172b4010!important;background:#fff!important}
.login-brand-panel{background:linear-gradient(145deg,#101f32,#243e59)!important;padding:54px!important;justify-content:center!important;min-height:0!important}
.login-brand-panel:after{content:''!important;width:360px;height:360px;position:absolute;right:-140px!important;bottom:-160px!important;border:1px solid #ffffff12;border-radius:50%;transform:none!important}
.login-logo-frame{background:#fff!important;border-radius:12px!important;box-shadow:none!important;padding:16px 22px!important;margin:0 0 40px!important;width:260px!important;max-width:100%!important}.logo-caption{display:none!important}.login-brand-panel img{max-height:85px!important}
.login-brand-panel h2{font-size:34px!important;font-weight:600!important;letter-spacing:-.035em!important;line-height:1.22!important;margin:0 0 20px!important}.login-brand-panel p{color:#bdcbda!important;font-size:14px!important;line-height:1.8!important}
.brand-stripe{margin-top:32px!important}.brand-stripe span{height:3px!important}
.login-form-panel{padding:54px 48px!important;margin:0!important;background:#fff!important;border-radius:0!important;display:flex!important;align-items:center!important}.login-card{padding:0!important;background:transparent!important}.login-card h1{font-size:30px!important;font-weight:650!important;margin:12px 0 8px!important;letter-spacing:-.04em!important}.login-card .field{margin:22px 0!important}.login-card .primary{min-height:47px!important;font-size:13px!important}.login-card #resetBtn{border:0!important;background:none!important;color:#60758f!important;font-weight:500!important}
.ui-password-wrap{position:relative}.ui-password-wrap input{padding-right:66px!important}.ui-password-toggle{position:absolute;right:6px;top:6px;height:32px;padding:0 8px;border:0;border-radius:6px;background:#f3f6fa;color:#526a85;font-size:11px;font-weight:600}.ui-login-note{margin-top:25px;font-size:11px;color:#7d8da0;border-top:1px solid var(--line);padding-top:18px}
#appShell .logout-button:after{content:none!important}
@media(min-width:801px){#appShell aside#side{flex:0 0 248px!important;min-width:248px!important;width:248px!important;max-width:248px!important;top:72px!important;height:calc(100dvh - 72px)!important}#appShell .mobile-menu{display:none!important}.admin-module-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(min-width:1450px){.admin-module-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:1100px) and (min-width:801px){#appShell .main{padding:24px!important}.brand-label{display:none!important}.admin-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.global-search{max-width:240px!important}}
@media(max-width:800px){
#appShell .top{height:64px!important;min-height:64px!important;padding:0 14px!important;gap:8px!important}#appShell .top .brand{max-width:38vw!important}#appShell .top-logo-frame{min-width:98px!important;max-width:124px!important;width:124px!important}#appShell .top .brand img{max-width:124px!important}#appShell .userbar{gap:7px!important}
#appShell .main{padding:22px 16px 100px!important}#appShell .page-head h1{font-size:25px!important}.card{padding:18px!important}.grid{gap:12px!important}#appShell .grid.admin-kpis,#appShell .grid:has(>.kpi){grid-template-columns:repeat(2,minmax(0,1fr))!important}.admin-kpi-card{min-height:126px!important;padding:16px!important}.metric{font-size:25px!important}.admin-kpi-card .kpi-top small{font-size:8px!important;letter-spacing:.02em!important}.admin-kpi-card .muted{font-size:11px!important}
.admin-hero,.role-hero,.exec-hero{padding:23px!important;border-radius:16px!important}.admin-hero-actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important}.admin-hero-actions button{width:auto!important;flex:1 1 130px!important}.admin-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.admin-module{display:flex!important;flex-direction:column!important;min-height:160px!important;padding:16px!important;gap:12px!important;position:relative}.admin-module .module-arrow{position:absolute;top:20px;right:16px}.admin-module small{font-size:11px!important}
#appShell aside#side,#appShell .mobile-side-head,#appShell .mobile-drawer-account{background:#101f32!important}#appShell .mobile-side-head{padding:0 4px!important;flex-shrink:0}#appShell .mobile-side-head:before{content:'Your workspace'!important;font-size:14px!important;font-weight:600!important}.ui-menu-search{margin-top:14px}#appShell #drawerLogoutBtn{border-radius:9px!important;background:#223950!important;border-color:#3a4e65!important;color:#fff!important}
#appShell #mobileBottomNav{background:#fff!important;border:1px solid var(--line)!important;border-radius:17px!important;box-shadow:0 6px 30px #101f321a!important;bottom:max(12px,env(safe-area-inset-bottom))!important;left:14px!important;right:14px!important}#appShell #mobileBottomNav button{border-radius:10px!important;color:#6c7f94!important;background:transparent!important;font-size:10px!important;font-weight:600!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}#appShell #mobileBottomNav button.active{background:#fff0f0!important;color:#ce1720!important}
#appShell .notif-menu{position:fixed!important;left:12px!important;right:12px!important;top:72px!important;width:auto!important;max-height:calc(100dvh - 160px)!important}.notif-head{flex-wrap:wrap}.notif-list{max-height:55dvh!important}
.modal{padding:12px!important}.modalbox{padding:20px!important;max-height:90dvh!important}.formgrid{grid-template-columns:minmax(0,1fr)!important}.approval-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.login{padding:20px!important;align-items:center!important}.login-shell{display:grid!important;grid-template-columns:1fr!important;min-height:0!important;border-radius:20px!important}.login-brand-panel{padding:28px!important;min-height:0!important}.login-logo-frame{width:190px!important;margin:0 0 25px!important;padding:12px 18px!important}.login-brand-panel h2{font-size:26px!important;margin-bottom:12px!important}.login-brand-panel p{font-size:12px!important;line-height:1.7!important}.brand-stripe{margin-top:20px!important}.login-form-panel{padding:30px 28px!important}.login-card h1{font-size:27px!important}.login-card .field{margin:18px 0!important}
body.desktop-device #appShell aside#side{position:fixed!important;width:min(310px,88vw)!important;min-width:0!important;max-width:none!important;top:0!important;left:0!important;height:100dvh!important;transform:translate3d(-105%,0,0)!important;z-index:200!important;display:flex!important}body.desktop-device #appShell aside#side.open{transform:translate3d(0,0,0)!important}body.desktop-device #appShell .mobile-menu{display:flex!important}body.desktop-device #appShell .mobile-side-head{display:flex!important}body.desktop-device #appShell .sidebar-overlay{display:block!important}body.desktop-device #appShell #mobileBottomNav{display:grid!important}
}
@media(max-width:380px){#appShell .main{padding:18px 12px 100px!important}.admin-module-grid{grid-template-columns:1fr!important}.admin-module{min-height:105px!important;display:grid!important;grid-template-columns:38px 1fr!important}.admin-module .module-arrow{display:none}.login{padding:12px!important}.login-brand-panel,.login-form-panel{padding:24px!important}}
@media(prefers-reduced-motion:reduce){.spinner:before{animation:none!important}*{scroll-behavior:auto!important}}
@media print{#appShell .top,#appShell aside#side,#mobileBottomNav,.ui-menu-search,.ui-table-hint{display:none!important}#appShell .main{padding:0!important}.tablewrap{overflow:visible!important}table{min-width:0!important}.card{box-shadow:none!important;break-inside:avoid}}


/* V32 responsive hardening: the drawer is controlled by viewport width, not pointer type. */
html{min-width:320px;overflow-x:clip;scroll-padding-top:80px}
body{min-width:320px;overflow-x:clip}
#appShell,#appShell .shell,#appShell .main{min-width:0;max-width:100%}
#appShell .main{overflow-x:clip}
#appShell .sidebar-overlay{display:none}
#appShell .sidebar-overlay.open{display:block;position:fixed;inset:64px 0 0;z-index:190;background:rgba(8,18,32,.58);backdrop-filter:blur(2px)}
#appShell #sideClose{display:none}
#appShell .nav button:focus-visible,#appShell button:focus-visible,#appShell a:focus-visible,#appShell input:focus-visible,#appShell select:focus-visible,#appShell textarea:focus-visible{outline:3px solid #f5a3a6;outline-offset:2px}
@media(max-width:800px){
  #appShell .top{position:sticky;top:0;z-index:180;padding:0 12px!important;min-width:0}
  #appShell .top>div:first-child{gap:8px!important;min-width:0;flex:1 1 auto}
  #appShell .top .brand{max-width:none!important;min-width:0;gap:8px!important}
  #appShell .top-logo-frame{width:auto!important;min-width:0!important;max-width:108px!important;flex:0 1 108px}
  #appShell .top .brand img{width:100%;max-width:108px!important;height:auto;object-fit:contain}
  #appShell .brand-label{display:none!important}
  #appShell .userbar{gap:6px!important;min-width:0;flex:0 0 auto}
  #appShell .userbar #userName,#appShell .userbar .role,#appShell .userbar #logoutBtn{display:none!important}
  #appShell .mobile-menu{display:inline-flex!important;flex:0 0 40px;order:-1}
  #appShell .shell{display:block!important;min-height:calc(100dvh - 64px)!important;width:100%;}
  #appShell aside#side{position:fixed!important;display:flex!important;flex-direction:column!important;top:0!important;bottom:0!important;left:0!important;right:auto!important;width:min(320px,88vw)!important;min-width:0!important;max-width:88vw!important;height:100dvh!important;height:100vh!important;max-height:100dvh!important;box-sizing:border-box!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;transform:translate3d(-105%,0,0)!important;visibility:hidden!important;pointer-events:none!important;transition:transform .22s ease,visibility .22s ease!important;z-index:220!important;padding:14px 12px max(18px,env(safe-area-inset-bottom))!important;box-shadow:none!important}
  #appShell aside#side.open{transform:translate3d(0,0,0)!important;visibility:visible!important;pointer-events:auto!important;box-shadow:18px 0 48px rgba(0,0,0,.18)!important}
  #appShell .mobile-side-head{display:flex!important;align-items:center!important;justify-content:space-between!important;position:sticky!important;top:0!important;min-height:48px!important;z-index:2!important;padding:4px 6px 12px!important}
  #appShell #sideClose{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:38px!important;height:38px!important;border:1px solid #3a4e65!important;border-radius:10px!important;background:#223950!important;color:#fff!important;font-size:25px!important;flex:0 0 38px}
  #appShell .ui-menu-search{flex:0 0 auto;margin-top:8px!important}
  #appShell #nav{flex:1 0 auto;min-height:0;padding-bottom:16px}
  #appShell .mobile-drawer-account{position:sticky!important;bottom:0!important;z-index:2!important;margin-top:auto!important;padding:14px 8px max(8px,env(safe-area-inset-bottom))!important;background:#101f32!important;border-top:1px solid #30425a!important}
  body.nav-open{overflow:hidden!important;touch-action:auto!important}
  #appShell .main{width:100%!important;max-width:100%!important;padding:20px 14px calc(108px + env(safe-area-inset-bottom))!important;box-sizing:border-box!important}
  #appShell .page-head{flex-wrap:wrap!important;align-items:flex-start!important}
  #appShell .page-head>*,#appShell .role-head-actions{min-width:0;max-width:100%}
  #appShell .role-head-actions{display:flex;flex-wrap:wrap;gap:8px}
  #appShell .toolbar{align-items:stretch}
  #appShell .toolbar>*{min-width:0;max-width:100%;flex:1 1 145px}
  #appShell .formgrid{grid-template-columns:minmax(0,1fr)!important}
  #appShell .formgrid>*{min-width:0;max-width:100%}
  #appShell .tablewrap{max-width:100%;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  #appShell .tablewrap table{min-width:760px}
  #appShell .modal{align-items:flex-end!important;padding:8px!important}
  #appShell .modalbox{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 16px)!important;border-radius:18px 18px 12px 12px!important;padding:18px 15px!important;overflow:auto!important;overscroll-behavior:contain}
  #appShell .actions,#appShell .modal-actions{flex-wrap:wrap;gap:8px}
  #appShell .actions>* ,#appShell .modal-actions>*{flex:1 1 120px;min-width:0}
  #appShell #mobileBottomNav{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;position:fixed!important;z-index:170!important;left:10px!important;right:10px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;min-height:62px!important;padding:6px!important;gap:3px!important;box-sizing:border-box!important}
  #appShell #mobileBottomNav button{min-width:0!important;min-height:48px!important;padding:5px 2px!important;white-space:normal!important;line-height:1.2!important;touch-action:manipulation}
  #appShell #mobileBottomNav button .ui-icon{width:19px;height:19px}
  #appShell .notif-menu{z-index:230!important;left:10px!important;right:10px!important;top:70px!important;width:auto!important;max-width:none!important}
  #appShell .approval-toolbar{align-items:stretch!important;flex-wrap:wrap}
  #appShell .approval-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #appShell .health{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #appShell .settings-layout{grid-template-columns:minmax(0,1fr)!important}
  #appShell .settings-nav{display:flex;overflow-x:auto;max-width:100%;gap:6px}
  #appShell .settings-nav button{flex:0 0 auto}
  #appShell .login-shell{width:100%!important;max-width:520px!important}
}
@media(max-width:420px){
  #appShell .top{padding:0 8px!important}
  #appShell .top-logo-frame,#appShell .top .brand img{max-width:88px!important}
  #appShell .notif-btn{width:36px!important;height:36px!important;min-width:36px!important}
  #appShell .main{padding-left:11px!important;padding-right:11px!important}
  #appShell .grid.admin-kpis,#appShell .grid:has(>.kpi){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #appShell .card{padding:14px!important}
  #appShell .metric{font-size:23px!important}
  #appShell .admin-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #appShell .admin-module{padding:12px!important;min-height:142px!important}
  #appShell .login{padding:10px!important}
  #appShell .login-brand-panel,#appShell .login-form-panel{padding:22px 18px!important}
}
@media(max-width:350px){
  #appShell .userbar{gap:4px!important}
  #appShell .notif-btn{width:34px!important;min-width:34px!important}
  #appShell .admin-module-grid{grid-template-columns:minmax(0,1fr)!important}
  #appShell .approval-summary-grid{grid-template-columns:minmax(0,1fr)!important}
}
@media(prefers-reduced-motion:reduce){#appShell aside#side{transition:none!important}}