@layer layout {
.side { background: var(--bg-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.side-h { padding: 14px 12px 10px 14px; display: flex; align-items: center; gap: 11px; }
.side-h .name { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-17); letter-spacing: -0.01em; line-height: 1.1; }
.side-h .org { font-size: var(--fs-11); color: var(--fg-3); }
.side-h .sw { margin-left: auto; color: var(--fg-3); width: 26px; height: 26px; border-radius: var(--r-7); display: grid; place-items: center; }
.side-h .sw:hover { background: var(--bg-4); color: var(--fg); }

.newbug { margin: 2px 12px 8px; height: 34px; border-radius: var(--r-9); background: var(--fg); color: var(--fg-on-light); font-weight: 600; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; }
.newbug:hover { background: var(--white); }
.newbug kbd { margin-left: auto; background: rgb(var(--ink-rgb) / 0.1); border-color: rgb(var(--ink-rgb) / 0.18); color: var(--fg-on-light); }

.side-scroll { overflow: auto; flex: 1; padding: 2px 8px 12px; }
.sec { margin-top: 12px; }
.sec-t { font-size: var(--fs-10-5); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-4); font-weight: 600; padding: 0 8px 6px; display: flex; align-items: center; }
.sec-t button { margin-left: auto; color: var(--fg-4); }
.sec-t button:hover { color: var(--fg); }

.nav { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border-radius: var(--r-7); color: var(--fg-2); width: 100%; text-align: left; position: relative; white-space: nowrap; }
.nav:hover { background: var(--bg-3); color: var(--fg); }
.nav.on, .nav.active { background: var(--sel); color: var(--fg); }
.nav .lbl { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nav .n { margin-left: auto; font-size: var(--fs-11); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.nav .n.qa { color: var(--accent-2); font-weight: 700; }
.nav .n.hot { color: var(--fg-on-accent); background: var(--warn); border-radius: var(--r-9); padding: 0 6px; font-weight: 700; line-height: 17px; }
.nav .sq { width: 10px; height: 10px; border-radius: var(--r-3); flex: none; background: var(--c); }
.nav .sq.round { border-radius: var(--r-round); }
.nav .dot { width: 9px; height: 9px; border-radius: var(--r-round); flex: none; border: 2px solid var(--c); }
.nav .dia { width: 9px; height: 9px; transform: rotate(45deg); border-radius: var(--r-2); flex: none; background: var(--c); }
.nav .sub { font-size: var(--fs-11); color: var(--fg-3); margin-left: auto; font-variant-numeric: tabular-nums; }
.nav.child { padding-left: 40px; }
.nav.child2 { padding-left: 62px; height: 28px; font-size: var(--fs-12-5); }
.nav.muted-action { color: var(--fg-3); }
.folder .chev { color: var(--fg-4); transition: transform var(--t-base); }
.folder.shut .chev { transform: rotate(-90deg); }

.livebadge { font-size: var(--fs-9-5); font-weight: 700; letter-spacing: 0.06em; color: var(--accent); margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.livebadge::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-round); background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.mini-prog { width: 42px; height: 4px; border-radius: var(--r-2); background: var(--bg-5); overflow: hidden; margin-left: auto; flex: none; display: inline-block; }
.mini-prog i { display: block; height: 100%; background: var(--loop); }

}