/* Compact app bars; visual controls are smaller while touch targets stay generous. */
:root{--app-topbar-height:64px}
.topbar{height:var(--app-topbar-height);min-height:var(--app-topbar-height);padding-block:8px;gap:16px}
.topbar .header-right{gap:10px}
.topbar .icon-button{width:44px;height:44px;min-width:44px;min-height:44px;border:0;background:transparent;isolation:isolate}
.topbar .icon-button::before{content:'';position:absolute;inset:5px;border:1px solid var(--line);border-radius:50%;background:#fff;z-index:0}
.topbar .icon-button svg{position:relative;z-index:1;width:18px;height:18px}
.topbar .notification-dot{top:9px;right:9px;width:5px;height:5px;z-index:2}
.topbar .user-chip{min-width:44px;min-height:44px;gap:8px}
.topbar .avatar{width:30px;height:30px;flex-shrink:0;font-size:11px}
.topbar .avatar svg{width:18px;height:18px}

@media(max-width:760px){
 :root{--mobile-topbar-height:calc(56px + env(safe-area-inset-top,0px));--mobile-nav-height:calc(56px + env(safe-area-inset-bottom,0px));--mobile-action-height:64px;scroll-padding-top:calc(var(--mobile-topbar-height) + 12px);scroll-padding-bottom:calc(var(--mobile-nav-height) + 16px)}
 :root:has(.mobile-form-bar){scroll-padding-bottom:calc(var(--mobile-nav-height) + var(--mobile-action-height) + 16px)}
 .topbar{height:var(--mobile-topbar-height);min-height:var(--mobile-topbar-height);padding:calc(5px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 5px max(16px,env(safe-area-inset-left,0px));gap:8px}
 .topbar .mobile-brand{font-size:20px;gap:6px;letter-spacing:-.8px}
 .topbar .mobile-brand .brand-mark{width:28px;height:28px;border-radius:8px}
 .topbar .mobile-brand .brand-mark svg{width:18px;height:18px}
 .topbar .header-right{gap:2px}
 .topbar .user-chip{width:44px;height:44px;gap:0}
 .mobile-bottom{height:var(--mobile-nav-height);min-height:var(--mobile-nav-height);padding:3px max(8px,env(safe-area-inset-right,0px)) calc(3px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));align-items:stretch}
 .mobile-bottom a{min-height:44px;gap:2px;font-size:10.5px;line-height:1.2;border-radius:9px;justify-content:center}
 .mobile-bottom a svg{width:20px;height:20px}
 .mobile-form-bar,.cart-page .mobile-form-bar{bottom:var(--mobile-nav-height);min-height:var(--mobile-action-height);padding-top:8px;padding-bottom:8px;gap:10px}
 .mobile-form-bar>div{min-width:88px}
 .mobile-form-bar>div small,.cart-page .mobile-form-bar>div small{font-size:11px;line-height:1.4}
 .mobile-form-bar>div strong,.cart-page .mobile-form-bar>div strong{font-size:20px;line-height:1.35;letter-spacing:-.4px}
 .mobile-form-bar .button,.cart-page .mobile-form-bar .button{min-height:44px;min-width:132px;padding:10px 14px;font-size:13px;line-height:1.5;border-radius:10px;flex:0 1 190px}
 .mobile-form-bar .button svg{width:17px;height:17px}
 .content{padding-bottom:calc(var(--mobile-nav-height) + 28px)}
 .content:has(.mobile-form-bar){padding-bottom:calc(var(--mobile-nav-height) + var(--mobile-action-height) + 24px)}
 #toast{bottom:calc(var(--mobile-nav-height) + 16px)}
 body:has(.mobile-form-bar) #toast{bottom:calc(var(--mobile-nav-height) + var(--mobile-action-height) + 16px)}
 .keyboard-open #toast,.keyboard-open body:has(.mobile-form-bar) #toast{bottom:16px}
 :root.keyboard-open{scroll-padding-bottom:16px}
}
@media(max-width:360px){
 .topbar{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
 .topbar .mobile-brand{font-size:19px;gap:5px}
 .topbar .header-right{gap:0}
 .mobile-form-bar,.cart-page .mobile-form-bar{gap:8px}
}