/* Layout — app chrome shared by every page: global html/body, the email verification banner
   (base.html), sidebar / mobile bars / drawers / notification panel (partials/navbar.html).
   Moved out of the templates' <style> blocks on 2026-10-10 (docs/superpowers/plans/
   2026-10-10-seasonal-events.md). Colours go through tokens, so themes and seasonal looks
   (static/css/event-<slug>.css) recolour the chrome without per-page edits. */

/* Global overscroll/body background — matches the app theme */
html, body { background: var(--bg); margin: 0; }
/* Kill rubber-band overscroll so fixed mobile drawers (sitting just below
   the viewport) can't peek into view when scrolling past the page end. */
html, body { overscroll-behavior-y: none; }

/* ── Email verification banner (authenticated, unverified) ── */
.ev-banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    padding: 12px 20px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    font-family: var(--font-sans); font-size: 13px; color: var(--text-secondary);
}
.ev-banner[hidden] { display: none; }
.ev-banner-text { flex: 1 1 240px; }
.ev-banner-text b { color: var(--text-primary); }
.ev-banner-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-banner-form input {
    width: 110px; padding: 7px 10px; border-radius: 8px;
    background: var(--bg); border: 1px solid var(--border);
    color: var(--text-primary); font-size: 15px; letter-spacing: 3px; text-align: center;
    font-family: var(--font-sans);
}
.ev-btn {
    padding: 7px 14px; border-radius: 8px; border: none; cursor: pointer;
    background: var(--accent); color: var(--text-on-accent); font-weight: 700; font-size: 13px;
    font-family: var(--font-sans);
}
.ev-btn-ghost { background: transparent; color: var(--accent); border: 1px solid var(--border-accent); }
.ev-btn:disabled { opacity: 0.5; cursor: default; }
.ev-banner-msg { flex-basis: 100%; font-size: 12px; color: var(--text-muted); }
.ev-banner-msg.ok { color: #4ADE80; }
.ev-banner-msg.err { color: #F87171; }

/* ── Plan strips above the page (partials/navbar.html; moved out of its <style> 2026-10-12) ──
   .hub-readonly — режим перегляду (Free); .hub-subwarn — «закінчується» / пільгові дні
   (SubscriptionService.ending_notice). Same look, one shape. */
.hub-readonly, .hub-subwarn {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; flex-wrap: wrap;
    padding: 9px 16px;
    background: var(--warning-dim);
    border-bottom: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
    font-family: var(--font-sans);
    font-size: var(--text-caption); font-weight: 600;
    color: var(--text-primary);
}
.hub-readonly a, .hub-subwarn a { color: var(--warning); font-weight: 800; white-space: nowrap; text-decoration: none; }
.hub-readonly a:hover, .hub-subwarn a:hover { text-decoration: underline; }
.hub-readonly-preview { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }

/* ==========================================================
   Chrome: sidebar (desktop) + bottom-nav (mobile) + drawers
   ========================================================== */

/* Body layout — content shifted right by sidebar on desktop, padded bottom by nav on mobile.
   Only on pages that include the chrome (auth, legal and the client portal don't). */
body:has(.hub-sidebar) { padding-left: 220px; }
@media (max-width: 768px) {
    body:has(.hub-sidebar) { padding-left: 0; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ── Sidebar (desktop, >768px) ────────────────────────── */
.hub-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
    width: 220px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    font-family: var(--font-sans);
    display: flex; flex-direction: column;
    overflow-y: auto;
}
@media (max-width: 768px) { .hub-sidebar { display: none; } }

.hub-sidebar-logo {
    display: block;
    padding: 20px var(--space-5);
    font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em;
    color: var(--text-primary); text-decoration: none;
    flex-shrink: 0;
}
.hub-sidebar-logo span { color: var(--accent); }

.hub-sidebar-nav {
    flex: 1;
    padding: 0 var(--space-3) var(--space-4);
    display: flex; flex-direction: column;
    gap: var(--space-1);
    overflow-y: auto;
}
/* Навігація ⇄ каталог модулів — як меню у Warcraft III, лише вбік: старе від'їжджає вліво,
   нове виїжджає зліва з легким доводом (Fiobs 2026-09-25). Класи ставить скрипт нижче. */
.hub-sidebar-nav.is-sliding-out, .hub-sidebar-utility.is-sliding-out { animation: hub-nav-out 0.28s cubic-bezier(0.45, 0, 0.7, 0.4) forwards; }
.hub-sidebar-nav.is-sliding-in, .hub-sidebar-utility.is-sliding-in { animation: hub-nav-in 0.46s cubic-bezier(0.22, 1, 0.36, 1.08) both; }
@keyframes hub-nav-out { to { transform: translateX(-105%); opacity: 0.6; } }
@keyframes hub-nav-in { from { transform: translateX(-105%); } }
@media (prefers-reduced-motion: reduce) { .hub-sidebar-nav.is-sliding-out, .hub-sidebar-nav.is-sliding-in, .hub-sidebar-utility.is-sliding-out, .hub-sidebar-utility.is-sliding-in { animation: none; } }

.hub-sidebar-section {
    padding: var(--space-4) var(--space-3) var(--space-2);
    margin: 0;
    font-size: var(--text-label); font-weight: 700; letter-spacing: 0.1em;
    color: var(--text-muted); text-transform: uppercase;
}

.hub-sidebar-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 0.88rem; font-weight: 600;
    color: var(--text-muted); text-decoration: none;
    border: 1px solid transparent;
    background: none; cursor: pointer; width: 100%;
    font-family: var(--font-sans); text-align: left;
    transition: color var(--transition), background-color var(--transition);
}
.hub-sidebar-item:hover { color: var(--text-primary); background: var(--surface-hover); }
.hub-sidebar-item.active {
    color: var(--accent);
    background: var(--accent-dim);
}
.hub-sidebar-item svg { flex-shrink: 0; width: 16px; height: 16px; }

/* Module colour comes from MODULE_CATALOG as --mod-color (tint 0x18 = 9.4 %) */
.hub-sidebar-mod-icon {
    background: color-mix(in srgb, var(--mod-color) 9.4%, transparent); color: var(--mod-color);
    width: 18px; height: 18px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hub-sidebar-mod-icon svg { width: 11px; height: 11px; }

.hub-sidebar-empty {
    padding: var(--space-2) var(--space-3);
    font-size: 0.72rem; color: var(--text-disabled);
    line-height: 1.4;
}

.hub-sidebar-add {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-1);
    border-radius: var(--radius-sm);
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em;
    color: var(--accent); background: var(--accent-dim);
    border: 1px solid transparent;
    font-family: var(--font-sans); cursor: pointer; width: 100%;
    text-align: left;
    transition: background-color var(--transition);
}
.hub-sidebar-add:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.hub-sidebar-add { text-decoration: none; }

.hub-sidebar-utility {
    padding: var(--space-3);
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: var(--space-1);
    flex-shrink: 0;
}
/* Нижній рядок меню: версія, документи, контакти (sidebar — .hub-sidebar-meta, «Ще» — .hub-drawer-meta) */
.hub-sidebar-meta, .hub-drawer-meta {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
    padding: var(--space-2) var(--space-3) 0;
    font-family: var(--font-sans);
}
.hub-sidebar-meta a, .hub-drawer-meta a {
    font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.02em; text-decoration: none;
    transition: color var(--transition);
}
.hub-sidebar-meta a:hover, .hub-drawer-meta a:hover { color: var(--accent); }
.hub-drawer-meta { padding: var(--space-3) var(--space-3) 0; border-top: 1px solid var(--border); margin-top: var(--space-2); }
.hub-drawer-meta a { font-size: 0.78rem; }

/* ── Меню «Збоку» (полігон — «Пульс», Fiobs 2026-10-12) ─────────────────────────────────
   Те саме меню (navbar.html), інше розташування — сторінка вмикає класом body.nav-side: смужка іконок,
   при наведенні праворуч висувається панель з назвами. Пункт підсвічується цілим — одна підкладка (::before)
   під іконкою і назвою: у складеному меню вона обрізана до клітинки з іконкою, при розгортанні відкривається
   на весь пункт. Роздільники груп тягнуться на всю ширину розгорнутого меню. Анімується лише transform,
   opacity і clip-path. Назва пункту — span.hub-label, логотип — «V» + .hub-logo-rest.
   TODO-NAV-SIDE: на сторінках сервісу вигляд вимкнено до наступного оновлення (Fiobs 2026-10-12: «зараз
   залишимо по старому, додамо в наступному оновленні»); живе лише на Пульсі. Увімкнути — греп TODO-NAV-SIDE.
   Вигляд «Зверху» прибрано зовсім («не зайшло, його не буде»). */
.hub-sidebar-logo .hub-logo-rest { color: inherit; }
.hub-bell .hub-label { display: none; }
@media (min-width: 769px) {
    body.nav-side { --nav-ease: cubic-bezier(0.22, 1, 0.36, 1); }
    body.nav-side .hub-sidebar-empty, body.nav-side .hub-sidebar-meta,
    body.nav-side .hub-sidebar-section:first-child { display: none; }
    body.nav-side #sidebar-modules { display: contents; }
    body.nav-side .hub-bell .hub-label { display: block; }
    /* Пункт (і тема, і дзвіночок) — клітинка з іконкою; фон малює підкладка ::before */
    body.nav-side :is(.hub-sidebar-item, .hub-sidebar-add, .hub-bell) {
        position: relative; z-index: 1; margin: 0; padding: 0; gap: 0;
        justify-content: center; border: none; border-radius: 0; background: none;
    }
    body.nav-side :is(.hub-sidebar-item, .hub-sidebar-add, .hub-bell)::before {
        content: ""; position: absolute; z-index: -1; border-radius: 8px; background: transparent;
        transition: clip-path 0.26s var(--nav-ease), background-color 0.15s ease;
    }
    body.nav-side :is(.hub-sidebar-item, .hub-sidebar-add, .hub-bell):hover::before { background: var(--surface-hover); }
    body.nav-side .hub-sidebar-item.active::before { background: var(--accent-dim); }
    body.nav-side .hub-sidebar-item.active:hover::before { background: color-mix(in srgb, var(--accent) 18%, transparent); }
    /* Іконки — як у звичайному меню: пункти ядра приглушені, модулі — своїм кольором, «+» — акцентом */
    body.nav-side :is(.hub-sidebar-item, .hub-sidebar-add, .hub-bell) > svg { width: 18px; height: 18px; color: var(--text-muted); transition: color 0.15s ease; }
    body.nav-side :is(.hub-sidebar-item, .hub-bell):hover > svg { color: var(--text-primary); }
    body.nav-side .hub-sidebar-item.active > svg, body.nav-side .hub-sidebar-add > svg { color: var(--accent); }
    body.nav-side .hub-sidebar-mod-icon { width: 22px; height: 22px; }
    body.nav-side .hub-sidebar-mod-icon svg { width: 13px; height: 13px; }
    body.nav-side .hub-label {
        position: absolute; font-weight: 600; color: var(--text-secondary);
        opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.24s var(--nav-ease);
    }
    body.nav-side .hub-sidebar-item.active .hub-label, body.nav-side .hub-sidebar-add .hub-label { color: var(--accent); }
    body.nav-side :is(.hub-sidebar-item, .hub-bell):hover .hub-label { color: var(--text-primary); }

    /* Смужка 56 px, при наведенні праворуч висувається ще 152 px з назвами — під найдовшу («Встановити
       застосунок», 145 px); назва — за 13 px від іконки, як у звичайному меню (Fiobs 2026-10-12: «надто
       широка… відступ від іконок величезний»). Підкладка розгорнутого меню (::after) — одна на смужку й
       панель: тінь падає лише назовні, шва між складеною і розгорнутою частинами немає (Fiobs: «чітко видно,
       де згорнута частина, а де розгорнута»). Складена — та сама підкладка, стиснута transform і прозора. */
    body.nav-side { --rail-w: 56px; --rail-panel: 152px; --rail-k: 0.2692; }  /* 56 / 208 */
    body.nav-side:has(.hub-sidebar) { padding-left: var(--rail-w); }
    body.nav-side .hub-sidebar { width: var(--rail-w); overflow: visible; }
    body.nav-side .hub-sidebar::after {
        content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--rail-w) + var(--rail-panel)); z-index: 0;
        background: var(--surface); border-right: 1px solid var(--border); box-shadow: 14px 0 28px rgba(0, 0, 0, 0.28);
        transform: scaleX(var(--rail-k)); transform-origin: left; opacity: 0; pointer-events: none;
        transition: transform 0.26s var(--nav-ease), opacity 0.2s ease;
    }
    body.nav-side .hub-sidebar:hover::after, body.nav-side .hub-sidebar:focus-within::after { transform: none; opacity: 1; pointer-events: auto; }
    body.nav-side .hub-sidebar-head { position: relative; z-index: 1; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0 8px; }
    body.nav-side .hub-sidebar-head .hub-sidebar-logo { align-self: stretch; margin: 0; padding: 2px 0 8px 22px; font-size: 1.15rem; white-space: nowrap; }
    body.nav-side .hub-logo-rest { opacity: 0; transition: opacity 0.18s ease; }
    body.nav-side .hub-sidebar:is(:hover, :focus-within) .hub-logo-rest { opacity: 1; transition-delay: 0.05s; }
    body.nav-side .hub-sidebar-nav, body.nav-side .hub-sidebar-utility {
        position: relative; z-index: 1; flex: 0 0 auto; align-items: center; gap: 2px;
        padding: 7px 0; border: none; overflow: visible;
    }
    body.nav-side .hub-sidebar-utility { margin-top: auto; }
    body.nav-side :is(.hub-sidebar-item, .hub-sidebar-add, .hub-bell) { width: 40px; height: 32px; }
    body.nav-side :is(.hub-sidebar-item, .hub-sidebar-add, .hub-bell)::before {
        top: 0; bottom: 0; left: -2px; width: calc(var(--rail-w) + var(--rail-panel) - 12px);
        clip-path: inset(0 calc(100% - 44px) 0 0 round 8px);
    }
    body.nav-side .hub-sidebar:is(:hover, :focus-within) :is(.hub-sidebar-item, .hub-sidebar-add, .hub-bell)::before { clip-path: inset(0 round 8px); }
    body.nav-side .hub-label { left: calc(100% + 2px); top: 50%; white-space: nowrap; font-size: 13px; transform: translate(-6px, -50%); }
    body.nav-side .hub-sidebar:is(:hover, :focus-within) .hub-label { opacity: 1; transform: translate(0, -50%); transition-delay: 0.05s; }
    /* Роздільники груп — горизонтальні, на всю ширину розгорнутого меню */
    body.nav-side :is(.hub-sidebar-nav, .hub-sidebar-utility)::before, body.nav-side .hub-sidebar-section::before {
        content: ""; position: absolute; left: 0; top: 0; height: 1px; width: calc(var(--rail-w) + var(--rail-panel));
        background: var(--border); transform: scaleX(var(--rail-k)); transform-origin: left;
        transition: transform 0.26s var(--nav-ease);
    }
    body.nav-side .hub-sidebar:is(:hover, :focus-within) :is(.hub-sidebar-nav, .hub-sidebar-utility, .hub-sidebar-section)::before { transform: none; }
    body.nav-side .hub-sidebar-section { position: relative; align-self: stretch; height: 1px; margin: 5px 0; padding: 0; font-size: 0; color: transparent; }
    body.nav-side .hub-sidebar-section::before { top: 0; }
    body.nav-side .notif-panel { top: 8px; left: calc(var(--rail-w) + 8px); }
}
/* Низький екран — уся смужка не вміщається: два рідкісні пункти ховаються */
@media (min-width: 769px) and (max-height: 760px) {
    body.nav-side .hub-sidebar .js-install-link, body.nav-side .hub-sidebar-utility button[onclick*="CoachMarks"] { display: none; }
}
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
    body.nav-side .hub-sidebar *, body.nav-side .hub-sidebar *::before, body.nav-side .hub-sidebar::after { transition: none !important; }
}
/* TODO-NAV-SIDE: перемикач вигляду меню для суперюзера (navbar.html, ?nav_preview=) — вимкнений разом із виглядом */
.nav-preview { display: none; }
@media (min-width: 769px) {
    .nav-preview {
        position: fixed; right: 16px; bottom: 16px; z-index: 400;
        display: flex; align-items: center; gap: 2px; padding: 3px;
        border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--border-strong);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
        font-family: var(--font-sans); font-size: var(--text-caption); font-weight: 700;
    }
    body:has(.hw-preview) .nav-preview { bottom: 64px; }  /* над перемикачем превʼю свята */
    .nav-preview-label { padding: 0 6px 0 10px; color: var(--text-muted); }
    .nav-preview a {
        padding: 6px 12px; border-radius: var(--radius-pill); color: var(--text-secondary);
        text-decoration: none; white-space: nowrap; transition: color 0.15s ease, background-color 0.15s ease;
    }
    .nav-preview a:hover { color: var(--text-primary); background: var(--surface-hover); }
    .nav-preview a[aria-current="true"] { color: var(--accent); background: var(--accent-dim); }
}

/* ── Theme toggle (KAN-4): icon + label switch purely via [data-theme] ── */
.js-theme-toggle .th-ic-sun,
.js-theme-toggle .th-label-dark { display: none; }
[data-theme="light"] .js-theme-toggle .th-ic-moon,
[data-theme="light"] .js-theme-toggle .th-label-light { display: none; }
[data-theme="light"] .js-theme-toggle .th-ic-sun { display: block; }
[data-theme="light"] .js-theme-toggle .th-label-dark { display: inline; }
/* Theme wave (Fiobs 2026-10-09): View Transitions API + clip-path circle from the
   button. Dark → light: the new screen grows out of the button; light → dark: the
   old screen collapses back into it. The classes live on <html> only while a
   theme switch runs, so other view transitions keep their default cross-fade. */
html.theme-vt::view-transition-old(root),
html.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-vt-grow::view-transition-new(root) { animation: hub-theme-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
html.theme-vt-shrink::view-transition-old(root) { animation: hub-theme-shrink 0.6s cubic-bezier(0.55, 0, 0.8, 0.4) both; z-index: 1; }
html.theme-vt-shrink::view-transition-new(root) { z-index: 0; }
@keyframes hub-theme-grow {
    from { clip-path: circle(0 at var(--vt-x) var(--vt-y)); }
    to   { clip-path: circle(var(--vt-r) at var(--vt-x) var(--vt-y)); }
}
@keyframes hub-theme-shrink {
    from { clip-path: circle(var(--vt-r) at var(--vt-x) var(--vt-y)); }
    to   { clip-path: circle(0 at var(--vt-x) var(--vt-y)); }
}

/* ── Bottom-nav (mobile, ≤768px) ──────────────────────── */
.hub-bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface);
    border-top: 1px solid var(--border);
    font-family: var(--font-sans);
}
@media (max-width: 768px) { .hub-bottom-nav { display: flex; } }

.hub-bottom-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); text-decoration: none;
    font-family: var(--font-sans); font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.02em;
    transition: color var(--transition);
}
.hub-bottom-item svg { width: 22px; height: 22px; }
.hub-bottom-item:hover { color: var(--text-primary); }
.hub-bottom-item.active { color: var(--accent); }

/* ── Bottom-sheet drawers (mobile) ────────────────────── */
.hub-drawer-overlay {
    position: fixed; inset: 0; z-index: 199;
    background: rgba(0,0,0,0.55);
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s;
}
.hub-drawer-overlay.open { opacity: 1; pointer-events: auto; }

.hub-drawer {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-3) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.34,1.3,0.64,1);
    max-height: 70vh; overflow-y: auto;
    font-family: var(--font-sans);
}
.hub-drawer.open { transform: translateY(0); }
.hub-drawer-handle {
    width: 36px; height: 4px; border-radius: 2px;
    background: var(--border-strong);
    margin: 0 auto var(--space-3);
}
.hub-drawer-title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-label); font-weight: 700; letter-spacing: 0.1em;
    color: var(--text-muted); text-transform: uppercase;
}
.hub-drawer-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-sm);
    background: none; border: none; cursor: pointer;
    color: var(--text-primary); text-decoration: none;
    font-family: var(--font-sans); font-size: 0.92rem; font-weight: 600;
    width: 100%; text-align: left;
    transition: background-color var(--transition);
}
.hub-drawer-item:hover, .hub-drawer-item:active { background: var(--surface-hover); }
.hub-drawer-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); }
.hub-drawer-empty {
    padding: var(--space-5) var(--space-3);
    text-align: center;
    font-size: 0.85rem; color: var(--text-muted);
    line-height: 1.5;
}
.hub-drawer-cta {
    margin-top: var(--space-4); width: 100%;
}
.hub-drawer-divider {
    border: none; border-top: 1px solid var(--border);
    margin: var(--space-2) 0;
}
/* Mobile-only chrome — never render on desktop (belt-and-suspenders so the
   bottom-sheets can't peek under any circumstance on wide screens). */
@media (min-width: 769px) {
    .hub-drawer, .hub-drawer-overlay { display: none !important; }
}


/* ── Notifications: bell + badge ───────────────────────── */
.hub-sidebar-head { display: flex; align-items: center; gap: 2px; padding-right: var(--space-3); }
.hub-sidebar-head .hub-sidebar-logo { margin-right: auto; }
.hub-bell {
    position: relative; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-sm);
    background: none; border: 1px solid transparent;
    color: var(--text-muted); cursor: pointer;
    transition: color var(--transition), background-color var(--transition);
}
.hub-bell:hover { color: var(--text-primary); background: var(--surface-hover); }
.hub-bell-badge {
    position: absolute; top: 3px; right: 3px;
    min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
    border-radius: var(--radius-pill); background: #EF4444; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
    display: none;
}
.hub-bell-badge.show { display: block; animation: hub-bell-blink 1.2s ease-in-out infinite; }
@keyframes hub-bell-blink {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
    50%      { opacity: 0.55; transform: scale(0.9); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}

/* ── Mobile top-bar (≤768px) ───────────────────────────── */
.hub-topbar { display: none; }
.hub-topbar-brand { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); text-decoration: none; margin-right: auto; }
.hub-topbar-brand span { color: var(--accent); }
@media (max-width: 768px) {
    .hub-topbar {
        display: flex; align-items: center; gap: 2px;
        position: sticky; top: 0; z-index: 90;
        height: 52px; padding: 0 var(--space-4);
        background: var(--surface); border-bottom: 1px solid var(--border);
    }
}

/* ── Notification panel ────────────────────────────────── */
.notif-overlay { position: fixed; inset: 0; z-index: 110; display: none; }
.notif-overlay.open { display: block; }
.notif-panel {
    position: fixed; z-index: 120;
    top: 56px; left: 232px; width: 360px; max-width: calc(100vw - 24px);
    max-height: 70vh; display: none; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    overflow: hidden;
}
.notif-panel.open { display: flex; }
@media (max-width: 768px) { .notif-panel { top: 56px; left: 8px; right: 8px; width: auto; } }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.notif-title { font-weight: 700; font-size: var(--text-body); color: var(--text-primary); }
.notif-actions { display: flex; gap: var(--space-4); flex-shrink: 0; }
.notif-action { background: none; border: none; font-size: var(--text-caption); font-weight: 600; cursor: pointer; font-family: var(--font-sans); padding: 0; color: var(--accent); }
.notif-action:hover { color: var(--accent-hover); }
.notif-action.muted { color: var(--text-muted); }
.notif-action.muted:hover { color: var(--text-secondary); }
.notif-list { overflow-y: auto; }
.notif-item { position: relative; display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); cursor: pointer; transition: background-color var(--transition); }
.notif-item:hover { background: var(--surface-hover); }
.notif-item.unread { background: var(--surface-hover); }
.notif-icon { background: color-mix(in srgb, var(--mod-color) 10.2%, transparent); color: var(--mod-color); flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.notif-body-wrap { flex: 1; min-width: 0; padding-right: 14px; }
.notif-udot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: middle; }
.notif-item-title { font-size: var(--text-body); font-weight: 600; color: var(--text-primary); }
.notif-item-text { font-size: var(--text-caption); color: var(--text-secondary); margin-top: 2px; }
.notif-item-time { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.notif-dismiss { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border: none; background: none; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; border-radius: var(--radius-sm); opacity: 0; transition: opacity var(--transition), color var(--transition); }
.notif-item:hover .notif-dismiss { opacity: 1; }
.notif-dismiss:hover { color: var(--text-primary); background: var(--surface-raised); }
.notif-empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--text-muted); font-size: var(--text-body); }
.notif-gear { display: flex; align-items: center; }
.notif-push-cta { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); color: var(--accent); font-size: var(--text-caption); font-weight: 600; text-decoration: none; }
.notif-push-cta[hidden] { display: none; }
.notif-push-cta:hover { background: var(--surface-hover); color: var(--accent-hover); }