:root { --side-nav-background: #101318; --side-nav-text: #eaf5f2; --side-nav-muted: #7f8790; --side-nav-accent: #00a6a6; }
* { box-sizing: border-box; }
.app { min-height: 100vh; display: grid; grid-template-columns: 232px minmax(0, 1fr); background: #f4f6f8; }
.page-workspace { min-width: 0; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 1.05rem .9rem; background: var(--side-nav-background); color: var(--side-nav-text); display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; align-items: center; gap: .72rem; color: inherit; text-decoration: none; padding: .15rem .12rem 1rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-mark { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; background: #fff; color: #101318; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 8px #101318, 0 0 0 1px rgba(255,255,255,.28); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: .95rem; line-height: 1.22; letter-spacing: .01em; }
.brand small { margin-top: .18rem; color: #a5adb7; font-size: .66rem; }
.nav { display: grid; gap: .22rem; margin-top: .78rem; }
.nav a { min-width: 0; display: flex; align-items: center; gap: .58rem; padding: .56rem .54rem; color: #d2d8dd; text-decoration: none; border-radius: 6px; font-size: .82rem; line-height: 1.2; }
.nav a:hover, .nav a.active { color: #fff; background: rgba(255,255,255,.11); }
.nav a.active { font-weight: 800; }
.nav-icon { flex: 0 0 2ch; color: var(--side-nav-accent); font: 900 .76rem/1 Consolas, monospace; letter-spacing: .04em; }
.nav a.active .nav-icon { color: #5ed8cd; }
.sidebar-note { margin-top: auto; padding: .9rem .65rem 0; border-top: 1px solid rgba(255,255,255,.1); color: #99a3ad; font-size: .68rem; line-height: 1.55; }
.app-frame { min-height: 100vh; display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.side-nav { display: none; }
.side-note { display: none; }
@media (max-width: 900px) { .app, .app-frame { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; overflow: visible; } .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; } .sidebar-note { margin-top: .7rem; } }
@media (max-width: 560px) { .nav { grid-template-columns: 1fr; } }