/* ── Brand ── */
.brand { font-family: var(--fd); display: inline-flex; align-items: center }
.bc { color: var(--a); font-style: italic; font-weight: 400 }
.bp { color: var(--ink); font-weight: 500 }
.bdot { width: 4px; height: 4px; border-radius: 50%; background: var(--a); margin-left: 2px; flex-shrink: 0; align-self: flex-end; margin-bottom: 3px }

/* ── Topbar ── */
.topbar { height: 48px; background: var(--w); border-bottom: 1px solid var(--b); display: flex; align-items: center; padding: 0 20px; position: sticky; top: 0; z-index: 100; overflow: visible }
.topbar .brand { font-size: 1.3rem }

/* ── Sidebar ── */
.sidebar { width: 64px; border-right: 1px solid var(--b); padding: 10px 0; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--w); flex-shrink: 0; position: sticky; top: 48px; height: calc(100vh - 48px); overflow-y: auto }
.nb { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--i3); border-radius: 0; transition: color .12s; position: relative }
.nb:hover { color: var(--ink) }
.nb.on { color: var(--ink) }
.nb svg { width: 28px; height: 28px }
.nbdg { position: absolute; top: 4px; right: 2px; background: var(--a); color: #fff; font-size: .5rem; font-weight: 700; padding: 1px 4px; border-radius: 99px; min-width: 14px; text-align: center; border: 1.5px solid var(--w); line-height: 1.4 }
.sava { width: 32px; height: 32px; border-radius: 50%; background: var(--a); display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-size: .82rem; color: #fff; font-style: italic; cursor: pointer; margin-top: auto; margin-bottom: 8px }
.sava:hover { opacity: .85 }

/* ── Mobile bottom nav ── */
.bn { display: none; background: var(--w); border-top: 1px solid var(--b); padding: 0; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100 }
.bni { flex: 1; display: flex; align-items: center; justify-content: center; border: none; border-radius: 0; background: none; cursor: pointer; color: var(--i4); height: 52px; position: relative; transition: color .12s }
.bni:hover { color: var(--i2) }
.bni.on { color: var(--a) }
.bni svg { width: 29px; height: 29px }
.bndg { position: absolute; top: 6px; left: 50%; margin-left: 7px; background: var(--a); color: #fff; font-size: .5rem; font-weight: 700; padding: 1px 4px; border-radius: 99px; min-width: 14px; text-align: center; border: 1.5px solid var(--w); line-height: 1.4 }
.bnsm { width: 28px; height: 28px; border-radius: 50%; background: var(--a); display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-size: .7rem; color: #fff; font-style: italic }

/* ── Notif tabs ── */
.ntabbar { display: flex; border-bottom: 1px solid var(--b); background: var(--w); position: sticky; top: 48px; z-index: 40 }
.ntab { flex: 1; height: 46px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 0; background: none; cursor: pointer; color: var(--i4); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s, border-color .12s }
.ntab svg { width: 21px; height: 21px }
.ntab.on { color: var(--ink); border-bottom-color: var(--ink) }
.ntab:hover { color: var(--i2); background: var(--bs) }