@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: #EDEDED;
    color: #111111;
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    line-height: 24px;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

.app-shell {
    display: flex;
    min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
    width: var(--sidebar-width, 280px);
    flex-shrink: 0;
    background: #E4E4E4;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
    padding: 8px 6px;
}

.sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle.resizing {
    background: rgba(124, 58, 237, 0.35);
}

/* Closes the phone-only drawer (see .sidebar.is-open under Responsive below).
   Hidden on desktop, where the sidebar is never off-canvas. */
.sidebar-drawer-close {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: #111111;
    cursor: pointer;
    z-index: 1;
}
.sidebar-drawer-close:hover { background: rgba(0, 0, 0, 0.1); }
@media (max-width: 640px) {
    .sidebar-drawer-close { display: flex; }
}

.sidebar-nav-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 0 6px;
    height: 36px;
    margin-bottom: 17px;
}

.logo-text {
    font-size: 24px;
    font-weight: 500;
    color: rgba(17, 17, 17, 0.9);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.nav-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-divider {
    height: 1px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.1);
    margin: 8px 8px;
}

.nav-link {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 6px;
    gap: 10px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: rgba(17, 17, 17, 0.65);
    transition: background 0.15s, color 0.15s;
}

.nav-link:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #111111;
}

.nav-link.active {
    background: rgba(0, 0, 0, 0.07);
    color: #111111;
    box-shadow: none;
}

.nav-link:focus-visible,
.tool-card-link:focus-visible,
.edit-link:focus-visible {
    outline: 2px solid #7C3AED;
    outline-offset: 2px;
}

.nav-icon { flex-shrink: 0; }

.nav-link .badge {
    margin-left: auto;
}

.nav-link-all {
    width: 100%;
    margin-top: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.nav-link-all .chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.nav-link-all .chevron.is-open {
    transform: rotate(180deg);
}

.nav-link-all[aria-expanded="true"] {
    background: rgba(0, 0, 0, 0.035);
}

/* A "+" that turns into a "x" on open, used by the two collapsible groups
   (All tools, Lab). Its own class rather than reusing .chevron, which stays
   the trailing right-aligned indicator for Notifications/Recent - the two
   styles are positioned and animated differently and shouldn't be coupled. */
.nav-plus {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.nav-plus.is-open {
    transform: rotate(45deg);
}

/* The Lab row now has two controls: a small toggle to expand/collapse the
   module list, and the existing lab-switcher button beside it (unchanged). */
.nav-lab-row {
    display: flex;
    align-items: center;
    gap: 2px;
}
.nav-lab-row .nav-link-all {
    flex: 1;
    min-width: 0;
}

.nav-list-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: none;
    color: rgba(17, 17, 17, 0.55);
    cursor: pointer;
}
.nav-list-toggle:hover { background: rgba(0, 0, 0, 0.06); color: #111111; }

/* Recent worksheets in the sidebar: two lines in the width of one nav row, so the
   title can be long without pushing the timestamp out. */
.recent-item { height: auto; padding-top: 7px; padding-bottom: 7px; }
.recent-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.recent-title {
    font-size: 13.5px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recent-time { font-size: 11.5px; color: rgba(17, 17, 17, 0.45); }

/* The Lab group is labelled with the lab's own name, so it has to survive a long
   one. min-width:0 is the part that actually matters — without it a flex child
   refuses to shrink below its content and pushes the chevron out of the sidebar. */
.nav-lab-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The lab switcher: one dropdown, the way Slack/Notion/Linear/Vercel all settled
   on it. The trigger is the lab's own name, so the most obvious control is the
   one that actually switches. */
.nav-lab-caret { margin-left: auto; flex-shrink: 0; opacity: .5; }
#labSwitcherBtn[aria-expanded="true"] .nav-lab-caret { opacity: 1; }

.lab-switcher-menu[hidden] { display: none; }
.lab-switcher-menu {
    margin: 2px 0 6px 8px;
    padding: 5px;
    border: 1.6px solid #A3A3A3;
    border-radius: 12px;
    background: #ffffff;
}

.lab-switcher-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 13.5px;
    color: rgba(17, 17, 17, 0.7);
}
.lab-switcher-item:hover { background: rgba(0, 0, 0, 0.05); color: #111111; }
.lab-switcher-item.is-current { font-weight: 700; color: #111111; }
.lab-switcher-tick { width: 13px; flex-shrink: 0; display: flex; color: #7C3AED; }
.lab-switcher-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lab-switcher-foot {
    display: flex;
    gap: 12px;
    margin-top: 4px;
    padding: 7px 8px 3px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.lab-switcher-foot a { font-size: 12.5px; font-weight: 700; color: #7C3AED; }
.lab-switcher-foot a:hover { text-decoration: underline; }

/* ---------- All tools expandable list ---------- */
.all-tools-list[hidden] {
    display: none;
}

.all-tools-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 2px;
    margin-top: 2px;
    animation: slideDown 0.18s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.nav-sublink {
    position: relative;
}

.nav-sublink .badge {
    position: absolute;
    right: 6px;
}

.nav-icon-box {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--tool-color) 12%, transparent);
    color: var(--tool-color);
}

.edit-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #71717A;
}

.edit-link:hover {
    color: #111111;
}

.edit-link[hidden] { display: none; }

.edit-actions[hidden] { display: none; }

.edit-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.edit-save-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    border-radius: 10px;
    border: 1.6px solid #111111;
    background: rgb(207, 177, 251);
    color: #111111;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.edit-save-btn:hover { background: rgb(190, 155, 245); }

.edit-reset-btn {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1.6px solid rgba(0, 0, 0, 0.15);
    background: #ffffff;
    color: #111111;
    cursor: pointer;
}

.edit-reset-btn:hover { background: #F5F5F5; }

.nav-drag-handle[hidden] { display: none; }
.nav-remove-btn[hidden] { display: none; }

.nav-drag-handle {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: rgba(17, 17, 17, 0.35);
    cursor: grab;
}

.nav-remove-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    border-radius: 6px;
    color: rgba(17, 17, 17, 0.4);
    cursor: pointer;
    padding: 0;
}

.nav-remove-btn:hover { background: rgba(220, 38, 38, 0.12); color: #DC2626; }

.sidebar-editing .nav-link { cursor: default; }
.sidebar-editing a.nav-link[draggable="true"] { cursor: grab; }
.sidebar-editing a.nav-link[draggable="true"]:active { cursor: grabbing; }

.badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    line-height: 10px;
    font-weight: 600;
    letter-spacing: 0.25px;
    color: #ffffff;
    background: rgb(5, 150, 105);
    padding: 2px 6px;
    border-radius: 6px;
}

.sidebar-user {
    margin-top: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.sidebar-user:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* The colour lived inline on the <a>, which no dark-theme rule can override —
   the icon sat at 1.18:1 on the dark sidebar, so there was no visible way out.
   It needs its own class precisely so the override below can reach it. */
.sidebar-signout {
    flex-shrink: 0;
    display: flex;
    color: rgba(17, 17, 17, 0.7);
    padding: 4px;
    border-radius: 6px;
}

.sidebar-signout:hover {
    color: rgba(17, 17, 17, 0.95);
    background: rgba(0, 0, 0, 0.06);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgb(207, 176, 251);
    border: 2px solid #000000;
    color: rgba(17, 17, 17, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.user-name {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: rgba(17, 17, 17, 0.65);
}

/* ---------- Main ---------- */
.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.main-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #F5F5F5;
}

.main-header h1 {
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    margin: 0;
}

.main-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1280px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #3F3F46;
    margin: 0 0 12px;
}

/* ---------- Tool grid & cards ---------- */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.tool-grid-4 { grid-template-columns: repeat(2, minmax(0, 288px)); }
.tool-grid-3 { grid-template-columns: repeat(2, minmax(0, 390px)); }

@media (min-width: 640px) {
    .tool-grid-4 { grid-template-columns: repeat(4, minmax(0, 288px)); }
}

@media (min-width: 1024px) {
    .tool-grid-3 { grid-template-columns: repeat(3, minmax(0, 390px)); }
}

.tool-card { height: 92px; }

.tool-card-link {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 92px;
    padding: 12px;
    gap: 16px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--tool-color) 12%, transparent);
    border: 1.6px solid var(--tool-color);
    color: var(--tool-color);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    animation: cardIn 0.3s ease-out backwards;
}

.tool-grid .tool-card:nth-child(1) .tool-card-link { animation-delay: 0.02s; }
.tool-grid .tool-card:nth-child(2) .tool-card-link { animation-delay: 0.06s; }
.tool-grid .tool-card:nth-child(3) .tool-card-link { animation-delay: 0.10s; }
.tool-grid .tool-card:nth-child(4) .tool-card-link { animation-delay: 0.14s; }
.tool-grid .tool-card:nth-child(5) .tool-card-link { animation-delay: 0.18s; }
.tool-grid .tool-card:nth-child(6) .tool-card-link { animation-delay: 0.22s; }

@keyframes cardIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.tool-card-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--tool-color) 35%, transparent);
}

.tool-card-link:active {
    transform: translateY(-1px);
}

.tool-icon { flex-shrink: 0; }

.tool-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tool-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 22.5px;
    color: #111111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-chevron {
    flex-shrink: 0;
    opacity: 0.6;
}

.badge-card {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* ---------- Home tool groups (grouped list rows) ---------- */
.home-tool-groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}
@media (min-width: 720px)  { .home-tool-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Desktop only: Counters and Timing are both short, so they stack in one
   column (Timing under Counters) instead of sitting beside each other with
   Annotators/Calculators towering over them. Named areas, not just a 3rd
   auto-flow column, because Annotators/Calculators need to span both of
   Counters+Timing's rows. */
@media (min-width: 1080px) {
    .home-tool-groups {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "counters   calculators  annotators"
            "timing     calculators  annotators";
    }
    .home-tool-groups [data-group="counters"]    { grid-area: counters; }
    .home-tool-groups [data-group="timing"]      { grid-area: timing; }
    .home-tool-groups [data-group="annotators"]  { grid-area: annotators; }
    .home-tool-groups [data-group="calculators"] { grid-area: calculators; }
}

.tool-group {
    background: #ffffff;
    border: 1.6px solid #111111;
    border-radius: 16px;
    padding: 14px 14px 8px;
    animation: cardIn 0.3s ease-out backwards;
}
.home-tool-groups > .tool-group:nth-child(2) { animation-delay: 0.06s; }
.home-tool-groups > .tool-group:nth-child(3) { animation-delay: 0.12s; }

.tool-group-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 2px 4px 10px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #52525B;
}
.tool-group-title svg { color: #A1A1AA; }

.tool-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.tool-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.15s ease-out;
}
.tool-row:hover { background: color-mix(in srgb, var(--tool-color) 9%, transparent); }
.tool-row:focus-visible { outline: 2px solid var(--tool-color); outline-offset: 1px; }

.tool-row-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tool-color) 14%, transparent);
    /* Darkened toward black so the BRIGHT tool colours (sky Dilution, orange Plate)
       clear 3:1 on their own light tint — full colour measured 2.4:1 before this. */
    color: color-mix(in srgb, var(--tool-color) 72%, #000000);
}

.tool-row-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tool-row-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 600;
    color: #111111;
}
.tool-row-desc {
    font-size: 12.5px;
    color: #71717A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tool-row-chevron { flex-shrink: 0; margin-left: auto; color: #C4C4CC; transition: color 0.15s ease-out; }
.tool-row:hover .tool-row-chevron { color: var(--tool-color); }

.badge-new {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #7C3AED;
    background: rgba(124, 58, 237, 0.12);
    padding: 1px 6px;
    border-radius: 999px;
}

/* dark — co-located so a dark surface never keeps a near-black text/icon */
:root[data-theme="dark"] .tool-group { background: #202023; border-color: #3A3A3F; }
:root[data-theme="dark"] .tool-group-title { color: #A1A1AA; }
:root[data-theme="dark"] .tool-group-title svg { color: #71717A; }
/* Dark: keep the per-tool tint on the square but LIGHTEN the icon itself toward
   white — a dark tool colour (Master Mix, Medium/Buffer, Gel/Blot) on its own dark
   tint is the "dark icon on a dark surface" trap and measured 2.1–2.7:1 before this. */
:root[data-theme="dark"] .tool-row-icon {
    background: color-mix(in srgb, var(--tool-color) 22%, transparent);
    color: color-mix(in srgb, var(--tool-color) 56%, #ffffff);
}
:root[data-theme="dark"] .tool-row:hover { background: color-mix(in srgb, var(--tool-color) 16%, transparent); }
:root[data-theme="dark"] .tool-row-name { color: #F4F4F5; }
:root[data-theme="dark"] .tool-row-desc { color: #A1A1AA; }
:root[data-theme="dark"] .tool-row-chevron { color: #52525B; }
:root[data-theme="dark"] .badge-new { color: #C4B5FD; background: rgba(167, 139, 250, 0.18); }

/* ---------- Mobile bottom tab bar ---------- */
/* display:none by default; the max-width:640px block under Responsive turns
   it on. A tab either navigates (Home) or opens the sidebar drawer scrolled
   to / expanded on the matching section — see the mobileTabbar script above. */
.mobile-tabbar {
    display: none;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    background: #ffffff;
    border-top: 1.6px solid #D4D4D4;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}

.mtab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    border: none;
    background: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(17, 17, 17, 0.55);
    cursor: pointer;
    position: relative;
}
.mtab:active { background: rgba(0, 0, 0, 0.06); }
.mtab.is-active, .mtab.is-open-target { color: #7C3AED; }

.mtab-badge {
    position: absolute;
    top: 2px;
    right: 24%;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9999px;
    background: #DC2626;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* Dims the page behind the open drawer; tapping it closes the drawer. */
.sidebar-backdrop { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .sidebar { width: var(--sidebar-width, 220px); }
}

@media (max-width: 640px) {
    .app-shell { flex-direction: column; }

    /* The sidebar becomes a full-screen off-canvas drawer instead of staying
       on screen as a row — its own vertical layout (logo / scrolling nav /
       user row pinned to the bottom via margin-top:auto) needs no changes at
       all, since flex-direction stays column. The bottom tab bar opens it. */
    .sidebar {
        position: fixed;
        inset: 0;
        z-index: 200;
        width: 100%;
        height: 100%;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
    .sidebar.is-open { transform: translateX(0); }
    .sidebar-resize-handle { display: none; }

    .tool-grid-4, .tool-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tool-card, .tool-card-link { width: 100%; }

    .mobile-tabbar { display: flex; }
    .sidebar-backdrop[hidden] { display: none; }
    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 190;
        background: rgba(0, 0, 0, 0.4);
    }
    body.drawer-open { overflow: hidden; }

    /* Room for the fixed tab bar so it never covers the last row of content. */
    .main-content { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* ---------- Notifications ---------- */

.notify-count {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 9999px;
    background: #DC2626;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 18px;
}
/* When a count is present it takes the auto margin, so the chevron just trails it. */
.notify-count + .chevron { margin-left: 6px; }

.notify-list { padding: 2px 4px 0; }

/* Category filter chips. Only rendered when the list spans more than one
   category, so the row never shows a single lonely "All". */
.notify-filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 4px 6px; }
.notify-filter {
    border: 1.4px solid #D4D4D4; background: #ffffff;
    border-radius: 9999px; padding: 3px 10px;
    font-family: inherit; font-size: 11.5px; font-weight: 700; color: rgba(17, 17, 17, 0.62);
    cursor: pointer;
}
.notify-filter:hover { background: #F5F5F5; }
.notify-filter.is-active { background: rgb(207, 177, 251); border-color: #111111; color: #111111; }

.notify-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 8px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(17, 17, 17, 0.75);
}
/* display:flex ignores [hidden] — the trap documented across this codebase. */
.notify-item[hidden] { display: none; }
.notify-item:hover { background: rgba(0, 0, 0, 0.06); }

.notify-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-top: 5px;
    border-radius: 50%;
    background: transparent;
}
.notify-item.is-unread .notify-dot { background: #7C3AED; }
.notify-item.is-unread .notify-message { font-weight: 700; color: #111111; }

.notify-message { display: block; }
.notify-time { display: block; margin-top: 2px; font-size: 11.5px; color: rgba(17, 17, 17, 0.45); }

.notify-empty {
    margin: 4px 8px 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(17, 17, 17, 0.5);
}

.notify-readall { margin: 4px 8px 6px; }
.notify-readall button {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: #7C3AED;
}
.notify-readall button:hover { text-decoration: underline; }

/* ---------- Dark mode ---------- */
:root[data-theme="dark"] {
    color-scheme: dark;
}
:root[data-theme="dark"] html,
:root[data-theme="dark"] body {
    background: #18181B;
    color: #E4E4E7;
}
:root[data-theme="dark"] .sidebar { background: #212124; }
:root[data-theme="dark"] .logo-text { color: rgba(255, 255, 255, 0.9); }
:root[data-theme="dark"] .nav-divider { background: rgba(255, 255, 255, 0.1); }
:root[data-theme="dark"] .nav-link { color: rgba(255, 255, 255, 0.65); }
:root[data-theme="dark"] .nav-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
:root[data-theme="dark"] .nav-link.active { background: rgba(255, 255, 255, 0.09); color: #fff; }
:root[data-theme="dark"] .nav-link-all[aria-expanded="true"] { background: rgba(255, 255, 255, 0.05); }
:root[data-theme="dark"] .nav-list-toggle { color: rgba(255, 255, 255, 0.55); }
:root[data-theme="dark"] .nav-list-toggle:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
:root[data-theme="dark"] .edit-link { color: rgba(255, 255, 255, 0.45); }
:root[data-theme="dark"] .edit-link:hover { color: #fff; }
/* Same trap as the modal close: dark grips on a dark sidebar. */
:root[data-theme="dark"] .nav-drag-handle { color: rgba(255, 255, 255, 0.35); }
:root[data-theme="dark"] .nav-remove-btn { color: rgba(255, 255, 255, 0.4); }
:root[data-theme="dark"] .recent-time { color: rgba(255, 255, 255, 0.4); }
:root[data-theme="dark"] .lab-switcher-menu { background: #212124; border-color: #3F3F46; }
:root[data-theme="dark"] .lab-switcher-item { color: rgba(255, 255, 255, 0.7); }
:root[data-theme="dark"] .lab-switcher-item:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
:root[data-theme="dark"] .lab-switcher-item.is-current { color: #ffffff; }
:root[data-theme="dark"] .lab-switcher-tick { color: #C4B5FD; }
:root[data-theme="dark"] .lab-switcher-foot { border-top-color: rgba(255, 255, 255, 0.1); }
:root[data-theme="dark"] .lab-switcher-foot a { color: #C4B5FD; }
:root[data-theme="dark"] .edit-reset-btn { background: #2A2A2E; color: #E4E4E7; }
:root[data-theme="dark"] .sidebar-user:hover { background: rgba(255, 255, 255, 0.07); }
:root[data-theme="dark"] .user-name { color: rgba(255, 255, 255, 0.7); }
:root[data-theme="dark"] .sidebar-signout { color: rgba(255, 255, 255, 0.7); }
:root[data-theme="dark"] .sidebar-signout:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
:root[data-theme="dark"] .main-header { background: #212124; }
:root[data-theme="dark"] .main-header h1 { color: #E4E4E7; }
:root[data-theme="dark"] .section-title { color: #D4D4D8; }
:root[data-theme="dark"] .tool-name,
:root[data-theme="dark"] .tool-chevron { color: #E4E4E7; }
:root[data-theme="dark"] .sidebar-resize-handle:hover,
:root[data-theme="dark"] .sidebar-resize-handle.resizing { background: rgba(124, 58, 237, 0.5); }
:root[data-theme="dark"] .sidebar-drawer-close { background: rgba(255, 255, 255, 0.08); color: #E4E4E7; }
:root[data-theme="dark"] .sidebar-drawer-close:hover { background: rgba(255, 255, 255, 0.14); }
:root[data-theme="dark"] .mobile-tabbar { background: #212124; border-top-color: #3F3F46; }
:root[data-theme="dark"] .mtab { color: rgba(255, 255, 255, 0.55); }
:root[data-theme="dark"] .mtab:active { background: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .mtab.is-active, :root[data-theme="dark"] .mtab.is-open-target { color: #C4B5FD; }
:root[data-theme="dark"] .notify-item { color: rgba(255, 255, 255, 0.7); }
:root[data-theme="dark"] .notify-item:hover { background: rgba(255, 255, 255, 0.07); }
:root[data-theme="dark"] .notify-item.is-unread .notify-message { color: #E4E4E7; }
:root[data-theme="dark"] .notify-time { color: rgba(255, 255, 255, 0.4); }
:root[data-theme="dark"] .notify-empty { color: rgba(255, 255, 255, 0.5); }
:root[data-theme="dark"] .notify-filter { background: #212124; border-color: #3F3F46; color: rgba(255, 255, 255, 0.65); }
:root[data-theme="dark"] .notify-filter:hover { background: #2A2A2E; }
/* The lavender fill keeps dark text in both themes — same exception as the
   active tab and .lab-btn. */
:root[data-theme="dark"] .notify-filter.is-active { background: rgb(207, 177, 251); border-color: #C4B5FD; color: #111111; }