/* ShopKichele — layout.css (extracted from index.html) */
/* ============ LAYOUT ============ */ 
#app{min-height:100dvh;display:flex;flex-direction:column} 
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px; 
  padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;background:var(--brand);color:#fff} 
.topbar .icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:18px} 
.topbar .brandlogo{width:32px;height:32px;border-radius:12px;object-fit:contain;background:#fff;padding:2px;flex:none} 
.lucide{width:1.15em;height:1.15em;stroke-width:2;vertical-align:-.18em} 
.bottomnav .lucide{width:22px;height:22px} 
.topbar .lucide{width:20px;height:20px} 
.status-dot .lucide{width:14px;height:14px} 
.sk-badge{position:absolute;top:2px;right:2px;background:var(--accent);color:#fff;font-size:10px;min-width:16px;height:16px; 
  border-radius:8px;display:grid;place-items:center;padding:0 4px} 
main{flex:1;padding:14px 14px calc(var(--nav-h) + 24px + var(--safe-b));max-width:1100px;width:100%;margin:0 auto} 
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr); 
  background:var(--surface);border-top:1px solid var(--line);padding-bottom:var(--safe-b)} 
.bottomnav button{height:var(--nav-h);display:flex;flex-direction:column;align-items:center;justify-content:center; 
  gap:3px;font-size:11px;color:var(--muted)} 
.bottomnav button .ico{font-size:19px} 
.bottomnav button[aria-current="page"]{color:var(--brand);font-weight:600} 
@media(min-width:900px){ 
  .bottomnav{top:0;bottom:0;right:auto;width:210px;grid-template-columns:1fr;grid-auto-rows:56px; 
    align-content:start;border-top:0;border-right:1px solid var(--line);padding-top:76px} 
  .bottomnav button{flex-direction:row;justify-content:flex-start;gap:12px;padding:0 18px;height:52px;font-size:14px} 
  main{padding-left:230px;max-width:1240px} 
  .topbar{padding-left:230px} 
}