.sidebar { position:fixed; left:0; top:0; bottom:0; width:244px; background:linear-gradient(170deg,#1a0e0a 0%,#2a1208 40%,#1a1428 100%); display:flex; flex-direction:column; z-index:30; overflow:auto; box-shadow:4px 0 24px rgba(0,0,0,.3); }
.sidebar-overlay { position:fixed; inset:0; background:rgba(15,23,42,.48); opacity:0; pointer-events:none; transition:.22s; z-index:20; }
.logo-area { padding:22px 18px 16px; border-bottom:1px solid rgba(255,255,255,.07); }
.logo-row { display:flex; gap:11px; align-items:center; }
.brand-with-logo { align-items:flex-start; gap:12px; }
.brand-logo { width:86px; height:auto; object-fit:contain; flex-shrink:0; filter:drop-shadow(0 6px 16px rgba(0,0,0,.28)); }
.brand-copy { min-width:0; }
.logo-badge { width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg,var(--primary),#c43d22); display:flex; align-items:center; justify-content:center; font-size:22px; }
.logo-text h1 { font-size:13px; font-weight:800; color:#fff; line-height:1.2; }
.brand-copy h1 { font-size:14px; line-height:1.1; }
.logo-text p { font-size:10px; color:rgba(255,255,255,.4); margin-top:3px; text-transform:uppercase; letter-spacing:.7px; }
.system-ver { font-size:9px; color:var(--primary); font-weight:700; margin-top:2px; }
.nav { padding:10px; flex:1; }
.nav-label { font-size:9px; font-weight:800; color:rgba(255,255,255,.2); text-transform:uppercase; letter-spacing:1.2px; padding:10px 10px 5px; }
.nav-item { display:flex; align-items:center; gap:9px; padding:9px 12px; cursor:pointer; font-size:12.5px; color:rgba(255,255,255,.45); border-radius:10px; transition:.18s; }
.nav-item:hover { background:rgba(255,255,255,.07); color:rgba(255,255,255,.8); }
.nav-item.active { background:linear-gradient(90deg,var(--primary),#c43d22); color:#fff; font-weight:700; box-shadow:0 4px 14px rgba(238,77,45,.35); }
.ico { width:22px; text-align:center; }
.sidebar-footer { padding:12px 18px; font-size:10px; color:rgba(255,255,255,.2); border-top:1px solid rgba(255,255,255,.05); }
.sidebar-meta { margin-top:8px; font-size:9px; color:rgba(255,255,255,.3); }
.hub-pill { display:inline-block; background:rgba(238,77,45,.15); color:var(--primary); border:1px solid rgba(238,77,45,.25); border-radius:6px; padding:3px 9px; font-size:9px; font-weight:800; letter-spacing:.5px; margin-top:8px; text-transform:uppercase; }
.main { margin-left:244px; min-height:100vh; display:flex; flex-direction:column; }
.topbar { padding:0 28px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; position:sticky; top:0; z-index:5; box-shadow:var(--shadow); }
.topbar-brand { display:flex; align-items:center; padding-right:4px; }
.topbar-logo { width:82px; height:auto; object-fit:contain; display:block; }
.topbar h2 { font-size:17px; font-weight:900; font-family:'Barlow Condensed',sans-serif; }
.topbar p { font-size:11px; color:var(--muted); }
.topbar-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sidebar-toggle { display:none; width:38px; height:38px; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text); font-size:18px; cursor:pointer; flex-shrink:0; }
.content { padding:24px 28px; flex:1; }
.page { display:none; }
.page.active { display:block; }
.page-title { margin-bottom:18px; font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:900; }
.grid-2 { display:grid; grid-template-columns:1.3fr .9fr; gap:16px; }
.stack { display:grid; gap:16px; }
.summary { display:grid; gap:10px; }
@media (max-width:1100px) { .grid-2 { grid-template-columns:1fr; } }
@media (max-width:820px) {
  .sidebar { width:280px; transform:translateX(-100%); transition:transform .24s ease; }
  body.sidebar-open .sidebar { transform:translateX(0); }
  body.sidebar-open .sidebar-overlay { opacity:1; pointer-events:auto; }
  .main { margin-left:0; }
  .topbar { padding:14px 20px; align-items:flex-start; }
  .topbar-brand { order:2; }
  .topbar-right { width:100%; }
  .sidebar-toggle { display:inline-flex; align-items:center; justify-content:center; }
}
@media (max-width:640px) {
  .content { padding:16px; }
  .topbar { padding:12px 14px; }
  .brand-logo { width:78px; }
  .topbar-logo { width:68px; }
  .topbar-right { gap:8px; }
  .pill { font-size:11px; padding:6px 10px; }
  .sidebar { width:86vw; max-width:320px; }
}