/**
 * Layout — Header, Navigation, Main
 */

/* ===== HEADER ===== */
.header { background: var(--bg2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.header-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; height: 56px; gap: 16px; }
.logo { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 900; color: var(--accent); text-decoration: none; flex-shrink: 0; }
.logo-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; font-family: monospace; flex-shrink: 0; }

/* ===== NAVIGATION ===== */
.nav-primary { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav-primary::-webkit-scrollbar { display: none; }
.nav-btn { padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); background: none; border: none; cursor: pointer; transition: all .2s; white-space: nowrap; }
.nav-btn:hover { background: var(--bg3); color: var(--text); }
.nav-btn.active { background: var(--accent); color: #fff; }

.nav-secondary { display: none; background: var(--bg2); border-bottom: 1px solid var(--border); position: sticky; top: 56px; z-index: 99; }
.nav-secondary.active { display: block; }
.nav-secondary-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; gap: 2px; height: 40px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.nav-sub-btn { padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); background: none; border: none; cursor: pointer; transition: all .15s; white-space: nowrap; }
.nav-sub-btn:hover { background: var(--bg3); color: var(--text); }
.nav-sub-btn.active { background: var(--text); color: #fff; }

.user-area { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; }
.shop-selector { padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; border: 1px solid var(--border); background: var(--bg3); color: var(--text); cursor: pointer; font-family: var(--font); }
.user-info { text-align: right; }
.user-name { font-size: 13px; font-weight: 700; }
.user-role { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.btn-logout { padding: 6px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--text-secondary); background: var(--bg3); border: none; cursor: pointer; transition: all .2s; }
.btn-logout:hover { background: var(--red-bg); color: var(--red); }

/* ===== MAIN ===== */
.main { max-width: 1400px; margin: 0 auto; padding: 20px; }
.page { display: none; }
.page.active { display: block; }