/* The shared shell owns both bars; wider desktop layouts retain their sizing. */
.company-picker{display:contents}
.company-name{display:none}
@media(max-width:1000px){
 .shell{--mobile-top-row:68px;--mobile-company-row:58px}
 .shell .topbar{position:sticky;top:0;z-index:26;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:var(--mobile-top-row) minmax(var(--mobile-company-row),auto);gap:0 10px;height:auto;min-height:0;padding:env(safe-area-inset-top,0px) 16px 0;border-bottom:1px solid var(--line);background:var(--surface);box-shadow:0 3px 12px #0f172a08}
 .shell .topbar-brand{min-width:0;max-width:100%;align-self:center}
 .shell .topbar-brand alvin-logo.brand{width:109px;max-width:100%;height:36px}
 .shell .topbar-brand alvin-logo.brand img{width:100%;height:36px;object-fit:contain;object-position:left center}
 .shell .top-tools{gap:6px;min-width:0;align-items:center}
 .shell .top-tools>.icon-btn,.shell .top-tools>.theme-toggle.icon-btn{width:44px;height:44px;min-width:44px;padding:10px;flex:none;border-radius:12px}
 .shell .topbar .icon{width:24px;height:24px}
 .shell .top-tools .language-switcher select{height:44px;min-height:44px;min-width:60px;padding:8px;font-size:16px;border-radius:12px}
 .shell .top-tools .divider,.shell .top-tools .avatar,.shell .top-tools .search-box{display:none}
 .shell .company-select{gap:10px;align-items:center;min-width:0;width:100%;min-height:var(--mobile-company-row);border-top:1px solid var(--line);padding:4px 0}
 .shell .company-select .mobile-toggle{width:44px;height:44px;min-width:44px;padding:10px;border-radius:12px;flex:none}
 .shell .company-select .company-icon,.shell .company-select .dev-tag{display:none}
 .shell .company-picker{display:flex;align-items:center;position:relative;flex:1;min-width:0;min-height:44px;padding:6px 30px 6px 0}
 .shell .company-picker:after{content:'';position:absolute;right:10px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
 .shell .company-name{display:block;min-width:0;font-size:17px;font-weight:600;line-height:22px;white-space:normal;overflow-wrap:anywhere}
 .shell .company-picker #company-select{position:absolute;inset:0;width:100%;height:100%;min-height:44px;max-width:100%;opacity:0;font-size:16px;cursor:pointer}
 .shell .company-picker:focus-within{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}
 html:has(.shell){scroll-padding-top:calc(var(--mobile-top-row,68px) + var(--mobile-company-row,58px) + env(safe-area-inset-top,0px) + 12px)}
}
@media(max-width:680px){
 .shell{--mobile-bottom-height:58px;--mobile-bottom-clearance:calc(var(--mobile-bottom-height) + env(safe-area-inset-bottom,0px) + 24px)}
 .shell .topbar{padding-right:max(12px,env(safe-area-inset-right,0px));padding-left:max(12px,env(safe-area-inset-left,0px));gap:0 8px}
 .shell .top-tools>[data-action=notifications]{display:none}
 .shell .content{padding-bottom:var(--mobile-bottom-clearance);min-width:0}
 .shell .phone-bottom-nav{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;height:calc(var(--mobile-bottom-height) + env(safe-area-inset-bottom,0px));padding:1px env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px #0f172a08;z-index:25;overflow:visible}
 .shell .phone-bottom-nav>button{height:56px;min-height:56px;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:2px 1px;font-size:12px!important;line-height:16px;color:var(--muted);white-space:normal;overflow-wrap:normal;word-break:normal;touch-action:manipulation}
 .shell .phone-bottom-nav>button .icon{width:25px;height:25px}
 .shell .phone-bottom-nav>button.active{color:#2563EB}
 .shell .phone-bottom-nav>button[aria-current=page]{font-weight:600}
 .shell .mobile-expense-menu{position:relative;min-width:0;height:56px;display:flex;justify-content:center}
 .shell .phone-bottom-nav .mobile-expense-add{width:64px;height:64px;min-width:64px;border-radius:19px;background:linear-gradient(135deg,#2563EB,#0EA5E9);transform:translateY(-24px);touch-action:manipulation}
 .shell .phone-bottom-nav .mobile-expense-add .icon{width:28px;height:28px}
 .shell .phone-bottom-nav .mobile-expense-add:active{transform:translateY(-24px) scale(.96)}
 .mobile-expense-caption{position:absolute;top:41px;left:0;right:0;pointer-events:none;text-align:center;font-size:12px;line-height:15px;color:var(--muted);white-space:normal}
 .shell .mobile-expense-options{bottom:84px;width:250px;max-width:calc(100vw - 24px)}
 .shell .phone-bottom-nav .mobile-expense-options button{min-height:48px}
 .mobile-sidebar-close{width:44px;height:44px}
 #toasts{bottom:calc(58px + env(safe-area-inset-bottom,0px) + 24px)}
 html:has(.shell){scroll-padding-bottom:calc(58px + env(safe-area-inset-bottom,0px) + 24px)}
 #modal{max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px)}
}
@media(max-width:680px) and (prefers-reduced-motion:reduce){
 .shell .phone-bottom-nav .mobile-expense-add{transition:none}
}