/* -- APP SHELL -- */
#app{
  display:none;flex-direction:column;
  min-height:100vh;
  padding-bottom:var(--bot-h); /* space for fixed footer */
}

/* -- TOP BAR -- */
#app > .topbar{background:var(--blue-dk);color:rgba(255,255,255,.8);padding:4px 14px;font-size:.7rem;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-shrink:0}
#app > .topbar a{color:rgba(255,255,255,.75);text-decoration:none;cursor:pointer}#app > .topbar a:hover{color:white}

/* -- NAV -- */
#app > nav{background:linear-gradient(180deg,#1557b0,var(--blue));padding:0 12px;display:flex;align-items:center;justify-content:center;gap:7px;height:var(--nav-h);position:sticky;top:0;z-index:500;box-shadow:0 2px 8px rgba(0,0,0,.2);flex-shrink:0}
.n-logo{font-size:1.25rem;font-weight:800;color:white;cursor:pointer;letter-spacing:-.5px;flex-shrink:0}.n-logo span{color:var(--yellow)}
.n-search{flex:0 1 clamp(300px,56vw,820px);display:flex;min-width:0}
.n-search input{flex:1;min-width:0;padding:8px 11px;border:none;outline:none;font-family:'Inter',sans-serif;font-size:.85rem;border-radius:4px 0 0 4px}
.n-search button{background:var(--orange);border:none;cursor:pointer;padding:0 11px;border-radius:0 4px 4px 0;flex-shrink:0;height:34px;display:flex;align-items:center;-webkit-tap-highlight-color:transparent}
.n-right{display:flex;align-items:center;gap:4px;flex-shrink:0}
.nbtn{background:none;border:none;cursor:pointer;color:white;font-family:'Inter',sans-serif;padding:5px 8px;border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:background .2s;white-space:nowrap;line-height:1.2;-webkit-tap-highlight-color:transparent}
.nbtn:hover{background:rgba(255,255,255,.15)}
.nbtn .nt{font-size:.58rem;opacity:.75}.nbtn .nb{font-weight:700;font-size:.8rem}

/* Theme switch */
.theme-btn{border:1px solid #bfc8d8;background:linear-gradient(180deg,#ffffff,#f3f4f6);color:#0f172a;border-radius:999px;padding:4px 8px 4px 10px;font:700 .78rem 'Inter',sans-serif;display:inline-flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;min-width:82px;justify-content:space-between;box-shadow:inset 0 1px 1px rgba(255,255,255,.8)}
.theme-btn .nt{position:static;left:auto;font-size:.78rem;opacity:1;color:inherit}
.theme-btn .nb{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid #dbe0e6;box-shadow:0 1px 3px rgba(0,0,0,.12);font-size:.72rem;color:#0f172a;font-weight:700}
.theme-btn:hover{border-color:var(--blue)}
body.dark-mode .theme-btn{background:linear-gradient(180deg,#0f172a,#0b1220);color:#e5e7eb;border-color:#334155}
body.dark-mode .theme-btn .nb{background:#f8fafc;border-color:#cbd5e1;color:#0f172a}

/* Slightly larger cart action */
.cart-btn{padding:6px 10px}
.cart-btn .nt{font-size:.62rem}
.cart-btn .nb{font-size:.86rem}
/* Account type badge - replaces toggle */
.acc-badge{display:flex;align-items:center;padding:4px 10px;border-radius:20px;font-size:.68rem;font-weight:700;white-space:nowrap;flex-shrink:0}
.acc-badge.retail{background:#fff3e0;color:#e65100}
.acc-badge.wholesale{background:var(--blue-lt);color:var(--blue)}
.acc-badge.admin{background:#fce4e4;color:#c62828}

/* -- SUBNAV -- */
#app > .subnav{background:#232f3e;padding:0 12px;display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;flex-shrink:0}
#app > .subnav::-webkit-scrollbar{display:none}
.snbtn{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.75);font-family:'Inter',sans-serif;font-size:.72rem;padding:7px 8px;white-space:nowrap;border-radius:3px;transition:all .2s;-webkit-tap-highlight-color:transparent}
.snbtn:hover,.snbtn.on{color:white;background:rgba(255,255,255,.12);outline:1px solid rgba(255,255,255,.2)}

body.dark-mode #app > nav{background:linear-gradient(180deg,#0b1b34,#0f274a)}
body.dark-mode .n-search input{background:#0f172a;color:#e5e7eb}
body.dark-mode .nbtn:hover{background:rgba(255,255,255,.08)}

/* -- PAGES -- */
.page{display:none;flex:1;animation:fadeIn .25s ease}.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}