body { background: #f4f6f9; }
.sidebar { width: 230px; min-height: 100vh; background: #1e2a3a; }
.sidebar .brand { color: #fff; font-weight: 700; padding: 1rem 1.25rem; border-bottom: 1px solid #2c3b50; }
.sidebar a { color: #b8c4d4; text-decoration: none; display: block; padding: .5rem 1.25rem; font-size: .93rem; }
.sidebar a:hover, .sidebar a.active { background: #2c3b50; color: #fff; }
.sidebar .section { color: #6f8199; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; padding: 1rem 1.25rem .25rem; }
.sidebar .soon { opacity: .45; pointer-events: none; }
.sidebar .soon::after { content: "soon"; float: right; font-size: .62rem; border: 1px solid #55677f; border-radius: 4px; padding: 0 .3rem; }
.main { flex: 1; min-width: 0; }
.log-tail { background: #111; color: #cfd8dc; font-size: .78rem; max-height: 320px; overflow: auto; white-space: pre-wrap; }
@media (max-width: 767px) { .sidebar { width: 100%; min-height: 0; } .layout { flex-direction: column; } }