.shell { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 18px 14px; background: var(--bg-2); border-right: 1px solid var(--line); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; color: var(--text); text-decoration: none !important; }
.brand img { width: 46px; height: 46px; border-radius: 12px; background: #000; box-shadow: 0 0 0 1px rgba(34, 211, 238, .25), 0 0 18px rgba(34, 211, 238, .18); }
.brand b i, .brandline b i { font-style: normal; color: var(--accent); }
.brand b { font-family: var(--font-display); letter-spacing: .02em; display: block; line-height: 1.1; white-space: nowrap; font-size: 1.12rem; }
.brand small { color: var(--muted); letter-spacing: .22em; font-size: .62rem; }
.nav-label { font-size: .66rem; letter-spacing: .2em; color: var(--faint); padding: 14px 10px 6px; text-transform: uppercase; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; color: var(--muted); text-decoration: none !important; font-weight: 500; }
.nav a:hover { background: var(--surface); color: var(--text); }
.nav a.active { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.nav a .badge { margin-left: auto; }
.sidebar-bottom { margin-top: auto; padding-top: 14px; display: grid; gap: 10px; }
.user-chip { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 700; font-size: .85rem; flex: none; }
.user-chip b { display: block; line-height: 1.2; font-size: .9rem; } .user-chip small { color: var(--muted); text-transform: capitalize; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 28px; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--line); }
.topbar h2 { margin: 0; } .top-actions { display: flex; gap: 10px; align-items: center; }
.menu-btn { display: none; }
.content { padding: 24px 28px 48px; display: grid; gap: 20px; max-width: 1500px; width: 100%; margin: 0 auto; align-content: start; }
footer.foot { padding: 20px 28px 28px; color: var(--faint); font-size: .8rem; border-top: 1px solid var(--line); }
.banner { padding: 10px 28px; font-size: .86rem; background: color-mix(in srgb, var(--amber) 14%, var(--bg)); border-bottom: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); color: var(--text); }
.banner b { color: var(--amber); } body.diy-mode .banner b { color: var(--accent-2); }

.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .row.between { justify-content: space-between; }

@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(80vw, 300px); transform: translateX(-102%); transition: transform .25s; box-shadow: var(--shadow); }
  .sidebar.open { transform: none; }
  .menu-btn { display: inline-flex; }
  .topbar, .content, footer.foot, .banner { padding-left: 16px; padding-right: 16px; }
  .cols-2, .cols-3 { grid-template-columns: 1fr; }
}