/* SagesLink UI theme layer. Loaded after feature styles so product modules keep
   their layout while the shell and shared primitives receive one visual system. */

:root,
html[data-sages-theme="vermilion"] {
    --theme-accent: #a6333c;
    --theme-accent-strong-rgb: 116, 31, 41;
    --theme-accent-strong: #741f29;
    --theme-accent-hover: #8c2b34;
    --theme-accent-soft: #f3dfe0;
    --theme-accent-soft-rgb: 243, 223, 224;
    --theme-accent-faint: #fbf4f3;
    --theme-accent-faint-rgb: 251, 244, 243;
    --theme-accent-rgb: 166, 51, 60;
    --theme-header: #51131b;
    --theme-header-rgb: 81, 19, 27;
    --theme-header-strong: #74202a;
    --theme-header-text: #fff8f7;
    --theme-header-muted: #e8bdc0;
    --theme-canvas: #f7f4f2;
    --theme-canvas-deep: #f0eae7;
    --theme-surface: #fffdfc;
    --theme-surface-rgb: 255, 253, 252;
    --theme-surface-raised: #fffefd;
    --theme-sidebar: #fbf8f6;
    --theme-border: #dfd2d0;
    --theme-border-rgb: 223, 210, 208;
    --theme-border-strong: #cfbab8;
    --theme-border-strong-rgb: 207, 186, 184;
    --theme-text: #251d20;
    --theme-text-rgb: 37, 29, 32;
    --theme-muted: #685a5e;
    --theme-muted-rgb: 104, 90, 94;
    --theme-subtle: #837478;
    --theme-success: #27805c;
    --theme-warning: #a76822;
    --theme-danger: #b13f46;
    --theme-shadow: 0 12px 34px rgba(87, 39, 42, .075);
    --theme-shadow-raised: 0 20px 54px rgba(87, 39, 42, .13);
    --theme-radius: 12px;
    --theme-control-radius: 9px;
    --theme-font-body: Inter, "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --theme-font-heading: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --theme-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --bg: var(--theme-canvas);
    --panel: var(--theme-surface);
    --panel-strong: var(--theme-surface-raised);
    --line: var(--theme-border);
    --text: var(--theme-text);
    --muted: var(--theme-muted);
    --primary: var(--theme-accent);
    --primary-strong: var(--theme-accent-strong);
    --accent: var(--theme-accent);
    --success: var(--theme-success);
    --danger: var(--theme-danger);
    --shadow: var(--theme-shadow);
    --radius: var(--theme-radius);
}

html[data-sages-theme="indigo"] {
    --theme-accent: #2e62ad;
    --theme-accent-strong-rgb: 29, 68, 126;
    --theme-accent-strong: #1d447e;
    --theme-accent-hover: #28579a;
    --theme-accent-soft: #dce9f8;
    --theme-accent-soft-rgb: 220, 233, 248;
    --theme-accent-faint: #f3f7fc;
    --theme-accent-faint-rgb: 243, 247, 252;
    --theme-accent-rgb: 46, 98, 173;
    --theme-header: #102640;
    --theme-header-rgb: 16, 38, 64;
    --theme-header-strong: #1e4166;
    --theme-header-text: #f7faff;
    --theme-header-muted: #bed0e8;
    --theme-canvas: #f2f5f9;
    --theme-canvas-deep: #e8eef5;
    --theme-surface: #fbfdff;
    --theme-surface-rgb: 251, 253, 255;
    --theme-surface-raised: #fefeff;
    --theme-sidebar: #f5f8fb;
    --theme-border: #d2deeb;
    --theme-border-rgb: 210, 222, 235;
    --theme-border-strong: #bdcddd;
    --theme-border-strong-rgb: 189, 205, 221;
    --theme-text: #182536;
    --theme-text-rgb: 24, 37, 54;
    --theme-muted: #596a7f;
    --theme-muted-rgb: 89, 106, 127;
    --theme-subtle: #788ba1;
    --theme-success: #287b5c;
    --theme-warning: #9a6726;
    --theme-danger: #b3474e;
    --theme-shadow: 0 12px 34px rgba(28, 60, 94, .075);
    --theme-shadow-raised: 0 20px 54px rgba(28, 60, 94, .13);
}

html[data-sages-theme="forest"] {
    --theme-accent: #157a55;
    --theme-accent-strong-rgb: 15, 98, 69;
    --theme-accent-strong: #0f6245;
    --theme-accent-hover: #0f6646;
    --theme-accent-soft: #dff3e9;
    --theme-accent-soft-rgb: 223, 243, 233;
    --theme-accent-faint: #f1f8f4;
    --theme-accent-faint-rgb: 241, 248, 244;
    --theme-accent-rgb: 21, 122, 85;
    --theme-header: #15231e;
    --theme-header-rgb: 21, 35, 30;
    --theme-header-strong: #24362f;
    --theme-header-text: #f6fbf8;
    --theme-header-muted: #bdd7ce;
    --theme-canvas: #f4f6f3;
    --theme-canvas-deep: #e9eeeb;
    --theme-surface: #ffffff;
    --theme-surface-rgb: 255, 255, 255;
    --theme-surface-raised: #ffffff;
    --theme-sidebar: #f6f8f6;
    --theme-border: #e2e8e4;
    --theme-border-rgb: 226, 232, 228;
    --theme-border-strong: #ced9d2;
    --theme-border-strong-rgb: 206, 217, 210;
    --theme-text: #17211d;
    --theme-text-rgb: 23, 33, 29;
    --theme-muted: #65756d;
    --theme-muted-rgb: 101, 117, 109;
    --theme-subtle: #7f8e87;
    --theme-success: #27775a;
    --theme-warning: #9c6827;
    --theme-danger: #aa464b;
    --theme-shadow: 0 12px 34px rgba(29, 74, 60, .075);
    --theme-shadow-raised: 0 20px 54px rgba(29, 74, 60, .13);
}

html[data-sages-theme="plum"] {
    --theme-accent: #815271;
    --theme-accent-strong-rgb: 96, 58, 85;
    --theme-accent-strong: #603a55;
    --theme-accent-hover: #704663;
    --theme-accent-soft: #eee4ec;
    --theme-accent-soft-rgb: 238, 228, 236;
    --theme-accent-faint: #f8f3f7;
    --theme-accent-faint-rgb: 248, 243, 247;
    --theme-accent-rgb: 129, 82, 113;
    --theme-header: #45233f;
    --theme-header-rgb: 69, 35, 63;
    --theme-header-strong: #643756;
    --theme-header-text: #fff8fd;
    --theme-header-muted: #dec4d5;
    --theme-canvas: #f5f2f5;
    --theme-canvas-deep: #ece7ec;
    --theme-surface: #fefcff;
    --theme-surface-rgb: 254, 252, 255;
    --theme-surface-raised: #fffefe;
    --theme-sidebar: #f8f5f8;
    --theme-border: #e2dbe1;
    --theme-border-rgb: 226, 219, 225;
    --theme-border-strong: #d2c7d0;
    --theme-border-strong-rgb: 210, 199, 208;
    --theme-text: #2d252c;
    --theme-text-rgb: 45, 37, 44;
    --theme-muted: #746a72;
    --theme-muted-rgb: 116, 106, 114;
    --theme-subtle: #978d95;
    --theme-success: #30785d;
    --theme-warning: #9b6728;
    --theme-danger: #ad424c;
    --theme-shadow: 0 12px 34px rgba(72, 39, 65, .075);
    --theme-shadow-raised: 0 20px 54px rgba(72, 39, 65, .13);
}

html[data-sages-theme],
html[data-sages-theme] body {
    min-height: 100%;
    background: var(--theme-canvas);
    color: var(--theme-text);
}

html[data-sages-theme] body {
    font-family: var(--theme-font-body);
    font-size: 14px;
    font-synthesis: none;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

html[data-sages-theme] :is(h1, h2, h3, h4, h5, h6, .topbar-brand strong, .sidebar-menu-group-copy strong) {
    font-family: var(--theme-font-heading);
    font-weight: 720;
    letter-spacing: -.018em;
}

html[data-sages-theme] :is(button, input, select, textarea) {
    font: inherit;
}

html[data-sages-theme] :is(code, pre, kbd, samp, [data-code], [class*="-code"], [class*="-metric"] strong) {
    font-family: var(--theme-font-mono);
    font-variant-numeric: tabular-nums;
}

html[data-sages-theme] body::before {
    background:
        radial-gradient(circle at 86% 3%, rgba(var(--theme-accent-rgb), .075), transparent 22%),
        linear-gradient(115deg, rgba(var(--theme-accent-rgb), .025), transparent 32%);
    background-size: auto;
    mask-image: none;
}

html[data-sages-theme] .console-shell {
    background: var(--theme-canvas);
}

/* Single-row application header: brand, product domains and utilities share one line. */
html[data-sages-theme] .topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(220px, auto) minmax(0, 1fr) auto;
    grid-template-rows: 60px;
    align-items: center;
    gap: 0 14px;
    padding: 0 18px;
    overflow: hidden;
    border: 0;
    border-top: 4px solid var(--theme-header);
    border-bottom: 1px solid var(--theme-border);
    background: rgba(var(--theme-surface-rgb), .985);
    box-shadow: 0 7px 22px rgba(var(--theme-text-rgb), .07);
    backdrop-filter: none;
}

html[data-sages-theme] .topbar::before {
    display: none;
}

html[data-sages-theme] .topbar::after {
    display: none;
}

html[data-sages-theme] .topbar-brand,
html[data-sages-theme] .top-nav,
html[data-sages-theme] .topbar-actions {
    position: relative;
    z-index: 1;
}

html[data-sages-theme] .topbar-brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    gap: 10px;
}

html[data-sages-theme] .brand-mark {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid var(--theme-border);
    border-radius: 7px;
    background: var(--theme-surface-raised);
    box-shadow: none;
}

html[data-sages-theme] .brand-mark img {
    padding: 4px;
}

html[data-sages-theme] .topbar-brand h1 {
    overflow: hidden;
    margin: 0;
    color: var(--theme-text);
    font-size: 15px;
    font-weight: 760;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-sages-theme] .topbar-brand p {
    display: none;
}

html[data-sages-theme] .top-nav {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0;
    background: transparent;
    scrollbar-color: var(--theme-border-strong) transparent;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}

html[data-sages-theme] .top-nav button {
    position: relative;
    flex: 0 0 auto;
    min-height: 56px;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--theme-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none;
    font-size: 12px;
    font-weight: 620;
    scroll-snap-align: center;
    transition: color .16s ease, background .16s ease;
}

html[data-sages-theme] .top-nav button::after {
    position: absolute;
    right: 13px;
    bottom: 0;
    left: 13px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    content: "";
}

html[data-sages-theme] .top-nav button:hover {
    background: var(--theme-accent-faint) !important;
    color: var(--theme-accent-strong) !important;
}

html[data-sages-theme] .top-nav button.active {
    border: 0;
    background: linear-gradient(180deg, transparent, rgba(var(--theme-accent-rgb), .09)) !important;
    color: var(--theme-accent-strong) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none;
    font-weight: 760;
}

html[data-sages-theme] .top-nav button.active::after {
    background: var(--theme-accent);
}

html[data-sages-theme] .topbar-actions {
    grid-column: 3;
    grid-row: 1;
    gap: 7px;
}

html[data-sages-theme] .topbar-actions :is(.ghost-btn, .secondary-btn) {
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--theme-border-strong);
    border-radius: var(--theme-control-radius);
    background: var(--theme-surface-raised);
    color: var(--theme-text);
    box-shadow: none;
}

html[data-sages-theme] .topbar-actions :is(.ghost-btn, .secondary-btn):hover {
    border-color: rgba(var(--theme-accent-rgb), .28);
    background: var(--theme-accent-faint);
    color: var(--theme-accent-strong);
}

html[data-sages-theme] .theme-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.theme-picker-trigger-icon {
    position: relative;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.theme-picker-trigger-icon::before,
.theme-picker-trigger-icon::after {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.theme-picker-trigger-icon::before { top: 2px; left: 2px; }
.theme-picker-trigger-icon::after { right: 2px; bottom: 2px; }

html[data-sages-theme] .console-main {
    grid-template-columns: 252px minmax(0, 1fr);
    min-height: calc(100dvh - 64px);
    background: var(--theme-canvas);
}

html[data-sages-theme] .sidebar {
    min-width: 0;
    padding: 14px 12px 22px;
    overflow-y: auto;
    border: 0;
    border-right: 1px solid var(--theme-border);
    background:
        linear-gradient(180deg, rgba(var(--theme-accent-rgb), .035), transparent 120px),
        var(--theme-sidebar);
    box-shadow: inset -12px 0 22px rgba(var(--theme-accent-rgb), .018);
    backdrop-filter: none;
}

html[data-sages-theme] .sidebar-identity {
    min-height: 42px;
    margin: 0 3px 12px;
    padding: 7px 8px 10px;
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-muted);
}

html[data-sages-theme] .sidebar-identity strong { color: var(--theme-text); }

html[data-sages-theme] .sidebar-identity em,
html[data-sages-theme] .sidebar-identity em.admin {
    border: 1px solid rgba(var(--theme-accent-rgb), .17);
    background: var(--theme-accent-soft);
    color: var(--theme-accent-strong);
}

html[data-sages-theme] .sidebar .sidebar-menu {
    gap: 5px;
}

html[data-sages-theme] .sidebar-menu-group {
    border: 1px solid transparent;
    border-radius: 10px;
}

html[data-sages-theme] .sidebar-menu-group:hover {
    border-color: var(--theme-border);
    background: rgba(255, 255, 255, .58);
}

html[data-sages-theme] .sidebar-menu-group.has-active {
    border-color: rgba(var(--theme-accent-rgb), .14);
    background: linear-gradient(110deg, rgba(var(--theme-accent-rgb), .075), rgba(255, 255, 255, .42));
}

html[data-sages-theme] .sidebar .sidebar-menu .sidebar-menu-group-toggle {
    min-height: 42px;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    padding: 6px 8px;
    color: var(--theme-text);
}

html[data-sages-theme] .sidebar-menu-group-icon {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    color: var(--theme-muted);
}

html[data-sages-theme] .sidebar-menu-group.has-active .sidebar-menu-group-icon,
html[data-sages-theme] .sidebar-menu-group.expanded .sidebar-menu-group-icon {
    background: var(--theme-accent-soft);
    color: var(--theme-accent-strong);
}

html[data-sages-theme] .sidebar-menu-group-copy strong { color: var(--theme-text); }
html[data-sages-theme] .sidebar-menu-group-copy small { color: var(--theme-subtle); }
html[data-sages-theme] .sidebar-menu-group-state { color: var(--theme-subtle); }
html[data-sages-theme] .sidebar-menu-group-state i { background: var(--theme-accent); color: var(--theme-accent); }

html[data-sages-theme] .sidebar-menu-group-items {
    gap: 2px;
    padding: 2px 6px 7px 36px;
}

html[data-sages-theme] .sidebar-menu-group-items::before {
    left: 20px;
    background: linear-gradient(var(--theme-border), rgba(var(--theme-accent-rgb), .26), var(--theme-border));
}

html[data-sages-theme] .sidebar .sidebar-menu .sidebar-menu-item {
    min-height: 35px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--theme-muted);
    box-shadow: none;
}

html[data-sages-theme] .sidebar .sidebar-menu .sidebar-menu-item::before {
    left: -16px;
    width: 3px;
    height: 16px;
    background: transparent;
}

html[data-sages-theme] .sidebar .sidebar-menu .sidebar-menu-item:hover {
    border-color: var(--theme-border);
    background: var(--theme-surface);
    color: var(--theme-text);
}

html[data-sages-theme] .sidebar .sidebar-menu .sidebar-menu-item.active {
    border-color: rgba(var(--theme-accent-rgb), .16);
    background: var(--theme-accent-soft);
    color: var(--theme-accent-strong);
    box-shadow: inset 3px 0 var(--theme-accent);
    font-weight: 740;
}

html[data-sages-theme] .sidebar .sidebar-menu .sidebar-menu-item.active::before {
    background: var(--theme-accent);
}

html[data-sages-theme] .content {
    min-width: 0;
    padding: 20px 22px 28px;
    background:
        radial-gradient(circle at 90% 0%, rgba(var(--theme-accent-rgb), .055), transparent 20%),
        var(--theme-canvas);
}

html[data-sages-theme] .view-titlebar {
    min-height: 62px;
    margin-bottom: 16px;
    border-bottom-color: var(--theme-border);
}

html[data-sages-theme] .view-titlebar span { color: var(--theme-accent); }
html[data-sages-theme] .view-titlebar h2 { color: var(--theme-text); font-weight: 760; }

/* Shared product surfaces use tokens, while feature modules keep their layouts. */
html[data-sages-theme] :is(
    .hero-panel, .table-card, .metric-card, .surface, .ops-card, .timeline-card,
    .entity-card, .template-card, .agent-card, .design-panel, .workflow-palette,
    .workflow-canvas, .workflow-node-editor, .modal, .profile-card,
    .document-simple-section, .document-agent-group
) {
    border-color: var(--theme-border);
    border-radius: var(--theme-radius);
    background: var(--theme-surface);
    color: var(--theme-text);
    box-shadow: var(--theme-shadow);
}

html[data-sages-theme] :is(.hero-panel, .document-page-head, .document-intelligence-hero) {
    border-color: rgba(var(--theme-accent-rgb), .18);
    background:
        linear-gradient(108deg, rgba(var(--theme-accent-rgb), .075), transparent 34%),
        var(--theme-surface);
}

html[data-sages-theme] :is(.hero-panel, .section-head, .table-card) h2,
html[data-sages-theme] :is(.hero-panel, .section-head, .table-card) h3 {
    color: var(--theme-text);
}

html[data-sages-theme] :is(.muted, .hero-panel p, .section-head p, .table-card small) {
    color: var(--theme-muted);
}

/* Keep feature layouts, but retire oversized card and panel rounding. */
html[data-sages-theme] .content :is(
    [class$="-card"], [class*="-card "],
    [class$="-panel"], [class*="-panel "],
    [class$="-hero"], [class*="-hero "],
    [class$="-banner"], [class*="-banner "]
) {
    border-radius: var(--theme-radius) !important;
}

html[data-sages-theme] :is(.modal, dialog, [class$="-dialog"], [class*="-dialog "]) {
    border-radius: var(--theme-radius) !important;
}

html[data-sages-theme] .content :is(
    [class$="-badge"], [class*="-badge "],
    [class$="-chip"], [class*="-chip "],
    [class$="-tag"], [class*="-tag "]
) {
    border-radius: 5px !important;
}

html[data-sages-theme] :is(.primary-btn, button.primary-btn) {
    border: 1px solid var(--theme-accent-strong);
    border-radius: var(--theme-control-radius);
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-strong));
    color: #fffafa;
    box-shadow: 0 7px 16px rgba(var(--theme-accent-rgb), .18);
}

html[data-sages-theme] :is(.primary-btn, button.primary-btn):hover {
    background: linear-gradient(135deg, var(--theme-accent-hover), var(--theme-accent-strong));
    box-shadow: 0 9px 20px rgba(var(--theme-accent-rgb), .22);
}

html[data-sages-theme] :is(.secondary-btn, .ghost-btn, .mini-btn) {
    border-color: var(--theme-border-strong);
    border-radius: var(--theme-control-radius);
    background: var(--theme-surface-raised);
    color: var(--theme-text);
    box-shadow: none;
}

html[data-sages-theme] :is(.secondary-btn, .ghost-btn, .mini-btn):hover {
    border-color: rgba(var(--theme-accent-rgb), .34);
    background: var(--theme-accent-faint);
    color: var(--theme-accent-strong);
}

html[data-sages-theme] :is(button, a, input, textarea, select):focus-visible {
    outline: 3px solid rgba(var(--theme-accent-rgb), .22);
    outline-offset: 2px;
}

html[data-sages-theme] :is(.field input, .field textarea, .field select, input, textarea, select) {
    border-color: var(--theme-border-strong);
    border-radius: var(--theme-control-radius);
}

html[data-sages-theme] :is(.field input, .field textarea, .field select, input, textarea, select):focus {
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb), .10);
}

html[data-sages-theme] :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
    accent-color: var(--theme-accent);
}

html[data-sages-theme] .content [role="tab"][aria-selected="true"] {
    border-color: rgba(var(--theme-accent-rgb), .26);
    background: var(--theme-accent-soft);
    color: var(--theme-accent-strong);
}

html[data-sages-theme] .content table th {
    border-color: var(--theme-border);
    background: var(--theme-accent-faint);
    color: var(--theme-muted);
}

html[data-sages-theme] .content table td {
    border-color: var(--theme-border);
    color: var(--theme-text);
}

html[data-sages-theme] .content table tbody tr:hover td {
    background: rgba(var(--theme-accent-rgb), .035);
}

html[data-sages-theme] .notice-bar {
    border-color: rgba(var(--theme-accent-rgb), .2);
    background: var(--theme-accent-soft);
    color: var(--theme-accent-strong);
}

/* Enterprise intelligence shell: bold business domains without sacrificing density. */
html[data-sages-theme] .topbar {
    grid-template-columns: 116px minmax(0, 1fr) auto;
    grid-template-rows: 86px;
    gap: 0 14px;
    padding-inline: 18px 20px;
    border-top: 0;
    border-bottom: 1px solid rgba(var(--theme-border-rgb), .92);
    background:
        radial-gradient(circle at 74% -55%, rgba(var(--theme-accent-rgb), .14), transparent 38%),
        linear-gradient(104deg, rgba(var(--theme-surface-rgb), .99), rgba(var(--theme-accent-faint-rgb), .82));
    box-shadow: 0 10px 34px rgba(var(--theme-text-rgb), .085);
    backdrop-filter: blur(18px);
}

html[data-sages-theme] .topbar::before { display: none; }

html[data-sages-theme] .topbar-brand {
    min-width: 0;
    gap: 8px;
}

html[data-sages-theme] .topbar-brand h1 {
    color: var(--theme-text);
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: .02em;
    white-space: nowrap;
}

html[data-sages-theme] .brand-mark {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border: 1px solid rgba(var(--theme-accent-rgb), .26);
    border-radius: 12px;
    background: linear-gradient(145deg, var(--theme-accent), var(--theme-accent-strong));
    box-shadow: 0 10px 26px rgba(var(--theme-accent-strong-rgb), .23);
}

html[data-sages-theme] .brand-mark img {
    padding: 5px;
    filter: brightness(0) invert(1);
}

html[data-sages-theme] .top-nav {
    align-items: center;
    gap: 6px;
    padding: 6px 3px;
    scrollbar-width: none;
}

html[data-sages-theme] .top-nav::-webkit-scrollbar { height: 0; }

html[data-sages-theme] .top-nav button {
    position: relative;
    flex: 1 1 82px;
    width: auto;
    min-width: 82px;
    max-width: 126px;
    min-height: 62px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 7px 6px;
    border: 1px solid rgba(var(--theme-border-rgb), .94);
    border-radius: 14px;
    background: rgba(var(--theme-surface-rgb), .86) !important;
    color: var(--theme-text) !important;
    text-align: left;
    box-shadow: 0 5px 16px rgba(var(--theme-text-rgb), .045);
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

html[data-sages-theme] .top-nav button::after { display: none; }

html[data-sages-theme] .top-nav button:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--theme-accent-rgb), .42);
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    box-shadow: 0 11px 26px rgba(var(--theme-accent-strong-rgb), .105);
}

html[data-sages-theme] .top-nav button.active {
    border-color: rgba(var(--theme-accent-rgb), .58);
    background: linear-gradient(145deg, var(--theme-surface), var(--theme-accent-soft)) !important;
    color: var(--theme-text) !important;
    box-shadow: 0 12px 28px rgba(var(--theme-accent-strong-rgb), .14), inset 0 0 0 1px rgba(var(--theme-accent-rgb), .08);
}

html[data-sages-theme] .top-nav button.active .top-nav-card-copy strong {
    color: var(--theme-text) !important;
    -webkit-text-fill-color: var(--theme-text) !important;
}

html[data-sages-theme] .top-nav button.active .top-nav-card-copy small {
    color: var(--theme-muted) !important;
    -webkit-text-fill-color: var(--theme-muted) !important;
}

html[data-sages-theme] .top-nav-card-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--theme-accent-rgb), .18);
    border-radius: 10px;
    background: var(--theme-accent-faint);
    color: var(--theme-accent-strong);
    -webkit-text-fill-color: var(--theme-accent-strong) !important;
    font-size: 14px;
    font-weight: 850;
    line-height: 1;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

html[data-sages-theme] .top-nav button.active .top-nav-card-icon {
    border-color: var(--theme-accent);
    background: linear-gradient(145deg, var(--theme-accent), var(--theme-accent-strong));
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 7px 18px rgba(var(--theme-accent-strong-rgb), .24);
}

html[data-sages-theme] .top-nav button:hover .top-nav-card-icon { transform: scale(1.04); }

html[data-sages-theme] .top-nav-card-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

html[data-sages-theme] .top-nav-card-copy strong,
html[data-sages-theme] .top-nav-card-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-sages-theme] .top-nav-card-copy strong {
    color: var(--theme-text);
    font-size: 11px;
    font-weight: 780;
    line-height: 1.25;
}

html[data-sages-theme] .top-nav-card-copy small {
    color: var(--theme-subtle);
    font-size: 9.5px;
    font-weight: 590;
    line-height: 1.25;
}

html[data-sages-theme] .topbar-actions {
    gap: 6px;
}

html[data-sages-theme] .topbar-actions :is(.ghost-btn, .secondary-btn) {
    min-height: 35px;
    border-color: rgba(var(--theme-border-rgb), .96);
    background: rgba(var(--theme-surface-rgb), .86);
    box-shadow: 0 3px 12px rgba(var(--theme-text-rgb), .035);
}

html[data-sages-theme] .system-settings-utilities {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
    padding: 15px;
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--theme-surface), var(--theme-accent-faint));
    box-shadow: 0 9px 26px rgba(var(--theme-text-rgb), .055);
}

html[data-sages-theme] .system-settings-utilities > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

html[data-sages-theme] .system-settings-utilities > header span {
    color: var(--theme-accent-strong);
    font-size: 10px;
    font-weight: 780;
    letter-spacing: .08em;
}

html[data-sages-theme] .system-settings-utilities > header h3 {
    margin: 2px 0 0;
    color: var(--theme-text);
    font-size: 17px;
}

html[data-sages-theme] .system-settings-utilities > header p {
    margin: 0;
    color: var(--theme-muted);
    font-size: 11px;
}

html[data-sages-theme] .system-settings-utility-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

html[data-sages-theme] .system-settings-utility-item {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 11px;
    border: 1px solid var(--theme-border);
    border-radius: 11px;
    background: rgba(var(--theme-surface-rgb), .88);
}

html[data-sages-theme] .system-settings-utility-item > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

html[data-sages-theme] .system-settings-utility-item strong {
    color: var(--theme-text);
    font-size: 12px;
}

html[data-sages-theme] .system-settings-utility-item small {
    overflow: hidden;
    color: var(--theme-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-sages-theme] .system-settings-utility-item :is(.ghost-btn, .theme-picker-trigger) {
    flex: 0 0 auto;
    min-height: 34px;
    white-space: nowrap;
}

html[data-sages-theme] .console-main {
    grid-template-columns: 244px minmax(0, 1fr);
    min-height: calc(100dvh - 86px);
}

@media (min-width: 981px) {
    html[data-sages-theme] .segaswork-content { height: calc(100dvh - 86px); }
}

html[data-sages-theme] .sidebar {
    position: sticky;
    top: 86px;
    height: calc(100dvh - 86px);
    padding: 13px 10px 20px;
    border-right: 1px solid rgba(255, 255, 255, .06);
    background:
        radial-gradient(circle at 14% -2%, rgba(var(--theme-accent-rgb), .20), transparent 29%),
        linear-gradient(180deg, var(--theme-header-strong), var(--theme-header) 190px);
    color: var(--theme-header-muted);
    box-shadow: 12px 0 34px rgba(var(--theme-text-rgb), .075);
    scrollbar-color: rgba(var(--theme-accent-rgb), .42) transparent;
}

html[data-sages-theme] .sidebar-identity {
    min-height: 46px;
    margin: 0 5px 10px;
    padding: 7px 7px 10px;
    border-bottom-color: rgba(255, 255, 255, .1);
    color: var(--theme-header-muted);
}

html[data-sages-theme] .sidebar-identity strong { color: var(--theme-header-text); }

html[data-sages-theme] .sidebar-identity em,
html[data-sages-theme] .sidebar-identity em.admin {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(var(--theme-accent-rgb), .24);
    color: var(--theme-header-text);
}

html[data-sages-theme] .sidebar .sidebar-menu { gap: 6px; }

html[data-sages-theme] .sidebar-menu-group {
    border-radius: 13px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

html[data-sages-theme] .sidebar-menu-group:hover {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .04);
}

html[data-sages-theme] .sidebar-menu-group.has-active {
    border-color: rgba(var(--theme-accent-rgb), .24);
    background: linear-gradient(145deg, rgba(var(--theme-accent-rgb), .16), rgba(255, 255, 255, .045));
    box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 8px 20px rgba(3, 15, 10, .09);
}

html[data-sages-theme] .sidebar .sidebar-menu .sidebar-menu-group-toggle {
    min-height: 50px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 7px 8px;
    color: var(--theme-header-text);
}

html[data-sages-theme] .sidebar-menu-group-copy strong { color: var(--theme-header-text); }

html[data-sages-theme] .sidebar-menu-group-copy small,
html[data-sages-theme] .sidebar-menu-group-state,
html[data-sages-theme] .sidebar-menu-group-icon {
    color: var(--theme-header-muted);
}

html[data-sages-theme] .sidebar-menu-group-icon {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    background: rgba(3, 16, 11, .18);
}

html[data-sages-theme] .sidebar-menu-group.has-active .sidebar-menu-group-icon,
html[data-sages-theme] .sidebar-menu-group.expanded .sidebar-menu-group-icon {
    border-color: rgba(var(--theme-accent-rgb), .32);
    background: linear-gradient(145deg, rgba(var(--theme-accent-rgb), .30), rgba(var(--theme-accent-rgb), .16));
    color: var(--theme-header-text);
}

html[data-sages-theme] .sidebar-menu-group-items {
    padding: 2px 6px 8px 38px;
}

html[data-sages-theme] .sidebar-menu-group-items::before {
    left: 22px;
    background: linear-gradient(rgba(255, 255, 255, .08), rgba(var(--theme-accent-rgb), .62), rgba(255, 255, 255, .06));
}

html[data-sages-theme] .sidebar .sidebar-menu .sidebar-menu-item {
    min-height: 34px;
    color: var(--theme-header-muted);
}

html[data-sages-theme] .sidebar .sidebar-menu .sidebar-menu-item:hover {
    border-color: rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .07);
    color: var(--theme-header-text);
    transform: translateX(1px);
}

html[data-sages-theme] .sidebar .sidebar-menu .sidebar-menu-item.active {
    border-color: rgba(var(--theme-accent-rgb), .24);
    background: linear-gradient(90deg, rgba(var(--theme-accent-rgb), .30), rgba(var(--theme-accent-rgb), .10));
    color: #ffffff;
    box-shadow: inset 3px 0 var(--theme-accent), 0 5px 15px rgba(var(--theme-text-rgb), .12);
}

html[data-sages-theme] .sidebar .sidebar-menu .sidebar-menu-item.active::before {
    background: var(--theme-accent);
    box-shadow: 0 0 0 4px rgba(var(--theme-accent-rgb), .12), 0 0 12px rgba(var(--theme-accent-rgb), .28);
}

html[data-sages-theme] .content {
    padding: 19px 22px 28px;
    background:
        radial-gradient(circle at 88% -6%, rgba(var(--theme-accent-rgb), .075), transparent 24%),
        var(--theme-canvas);
}

html[data-sages-theme] .view-titlebar {
    min-height: 58px;
    margin-bottom: 14px;
}

html[data-sages-theme] .view-titlebar span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

html[data-sages-theme] .view-titlebar h2 {
    font-size: clamp(24px, 2vw, 29px);
    letter-spacing: -.035em;
}

/* SagesWork conversation stays neutral like modern general-purpose chat tools. */
html[data-sages-theme] .segaswork-shell .sw-composer-wrap {
    background: #ffffff !important;
}

html[data-sages-theme] .segaswork-shell .sw-composer,
html[data-sages-theme] .segaswork-shell .sw-composer-wrap.empty-active .sw-composer,
html[data-sages-theme] .segaswork-shell .sw-composer-wrap.conversation-active .sw-composer {
    border: 1px solid #dde2e9 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(28, 43, 67, .07) !important;
}

html[data-sages-theme] .segaswork-shell .sw-composer:focus-within {
    border-color: #dde2e9 !important;
    box-shadow: 0 2px 8px rgba(28, 43, 67, .07) !important;
}

html[data-sages-theme] .segaswork-shell .sw-composer.drag-active {
    border-color: #8f949c !important;
    background: #fafafa !important;
    box-shadow: 0 0 0 3px rgba(32, 33, 36, .07) !important;
}

html[data-sages-theme] .segaswork-shell .sw-composer textarea,
html[data-sages-theme] .segaswork-shell .sw-composer textarea:focus {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #2f3033 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html[data-sages-theme] .segaswork-shell .sw-composer :is(button, select):focus-visible {
    outline: 2px solid rgba(47, 48, 51, .18) !important;
    outline-offset: 1px;
}

html[data-sages-theme] .segaswork-shell .sw-composer textarea,
html[data-sages-theme] .segaswork-shell .sw-composer textarea:hover,
html[data-sages-theme] .segaswork-shell .sw-composer textarea:focus,
html[data-sages-theme] .segaswork-shell .sw-composer textarea:focus-visible {
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-sages-theme] .segaswork-shell :is(
    .sw-composer-pill,
    .sw-composer-pill.model-mode,
    .sw-composer-pill.runtime-mode,
    .sw-composer-pill.attachment
) {
    border-color: #e1e3e7 !important;
    border-radius: 6px !important;
    background: #f7f7f8 !important;
    color: #55585f !important;
}

html[data-sages-theme] .segaswork-shell :is(.sw-composer-pill, .sw-composer-base-action):hover,
html[data-sages-theme] .segaswork-shell :is(.sw-composer-pill, .sw-composer-base-action):focus-visible,
html[data-sages-theme] .segaswork-shell .sw-composer-base-action.active {
    border-color: #d4d6da !important;
    background: #f1f1f2 !important;
    color: #2f3033 !important;
}

html[data-sages-theme] .segaswork-shell .sw-composer-pill select {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

html[data-sages-theme] .segaswork-shell .sw-composer-tool-group + .sw-composer-tool-group {
    border-left-color: #e4e5e7 !important;
}

html[data-sages-theme] .segaswork-shell .sw-send-button {
    border-radius: 7px !important;
    background: #303136 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-sages-theme] .segaswork-shell .sw-send-button:disabled {
    background: #eceef1 !important;
    color: #a5a9b0 !important;
}

html[data-sages-theme] .segaswork-shell :is(.sw-composer-add-menu, .sw-document-popover) {
    border-color: #dedfe3 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 38px rgba(32, 33, 36, .14) !important;
}

html[data-sages-theme] .segaswork-shell .sw-chat-head .sw-runtime-chip,
html[data-sages-theme] .segaswork-shell .sw-message-actions button:hover,
html[data-sages-theme] .segaswork-shell .sw-message-actions button.active {
    color: #4e5157 !important;
}

html[data-sages-theme] .segaswork-shell .sw-message.user .sw-message-avatar {
    background: #e8e9ec !important;
    color: #414348 !important;
}

html[data-sages-theme] .segaswork-shell .sw-message-avatar {
    border-radius: 7px !important;
    background: #3d3f44 !important;
    box-shadow: none !important;
}

html[data-sages-theme] .segaswork-shell .sw-message.user .sw-message-body {
    border-color: #e2e3e6 !important;
    border-radius: 9px 4px 9px 9px !important;
    background: #f5f5f6 !important;
}

html[data-sages-theme] .segaswork-shell .sw-message-actions button:hover,
html[data-sages-theme] .segaswork-shell .sw-message-actions button.active {
    background: #f1f1f2 !important;
}

html[data-sages-theme] .portal-shell.login-only {
    background:
        radial-gradient(circle at 20% 0%, rgba(var(--theme-accent-rgb), .12), transparent 34%),
        linear-gradient(145deg, var(--theme-canvas), var(--theme-canvas-deep));
}

html[data-sages-theme] .portal-shell.login-only .portal-login {
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    background: var(--theme-surface);
    box-shadow: var(--theme-shadow-raised);
}

html[data-sages-theme] .portal-login .eyebrow { color: var(--theme-accent); }

/* Theme picker */
body.theme-picker-open { overflow: hidden; }

.theme-picker-layer {
    position: fixed;
    z-index: 14000;
    inset: 0;
    display: grid;
    justify-items: end;
}

.theme-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 19, 22, .34);
    backdrop-filter: blur(3px);
}

.theme-picker-panel {
    position: relative;
    z-index: 1;
    width: min(430px, calc(100vw - 24px));
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-left: 1px solid var(--theme-border);
    background: var(--theme-surface);
    color: var(--theme-text);
    box-shadow: -24px 0 70px rgba(40, 22, 28, .18);
    animation: theme-picker-enter .22s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes theme-picker-enter {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: translateX(0); }
}

.theme-picker-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--theme-border);
}

.theme-picker-header span {
    color: var(--theme-accent);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .08em;
}

.theme-picker-header h2 {
    margin: 5px 0 7px;
    color: var(--theme-text);
    font-size: 23px;
    letter-spacing: -.025em;
}

.theme-picker-header p {
    max-width: 34em;
    margin: 0;
    color: var(--theme-muted);
    font-size: 12px;
    line-height: 1.65;
}

.theme-picker-close {
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--theme-border-strong);
    border-radius: var(--theme-control-radius);
    background: var(--theme-surface-raised);
    color: var(--theme-muted);
    cursor: pointer;
}

.theme-picker-options {
    display: grid;
    gap: 11px;
    padding: 22px 0;
}

.theme-option {
    width: 100%;
    min-height: 84px;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    background: var(--theme-surface-raised);
    color: var(--theme-text);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.theme-option:hover {
    border-color: rgba(var(--theme-accent-rgb), .36);
    background: var(--theme-accent-faint);
    transform: translateY(-1px);
}

.theme-option:active { transform: translateY(0) scale(.99); }

.theme-option.selected {
    border-color: var(--theme-accent);
    background: var(--theme-accent-faint);
    box-shadow: inset 3px 0 var(--theme-accent);
}

.theme-option-preview {
    height: 58px;
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    grid-template-rows: 1fr;
    overflow: hidden;
    border: 1px solid rgba(40, 32, 36, .1);
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(40, 30, 34, .08);
}

.theme-option-preview i {
    display: block;
    background: var(--theme-swatch);
}

.theme-option-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.theme-option-copy strong {
    color: var(--theme-text);
    font-size: 14px;
}

.theme-option-copy small {
    overflow: hidden;
    color: var(--theme-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-option-state {
    color: var(--theme-subtle);
    font-size: 11px;
    font-weight: 680;
    white-space: nowrap;
}

.theme-option.selected .theme-option-state { color: var(--theme-accent-strong); }

.theme-picker-panel > footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--theme-border);
}

.theme-picker-status {
    color: var(--theme-muted);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 1180px) {
    html[data-sages-theme] .topbar {
        grid-template-columns: 108px minmax(0, 1fr) auto;
        gap: 0 10px;
        padding-inline: 14px;
    }
    html[data-sages-theme] .top-nav button { flex: 0 0 104px; width: 104px; min-width: 104px; }
    html[data-sages-theme] .topbar-actions { gap: 5px; }
    html[data-sages-theme] .topbar-actions :is(.ghost-btn, .secondary-btn) { padding-inline: 8px; }
    html[data-sages-theme] .topbar-actions .client-download-link { display: none; }
    html[data-sages-theme] .console-main { grid-template-columns: 226px minmax(0, 1fr); }
}

@media (max-width: 900px) {
    html[data-sages-theme] .topbar {
        grid-template-columns: 104px minmax(0, 1fr) auto;
        grid-template-rows: 76px;
        gap: 0 8px;
        padding-inline: 10px;
    }
    html[data-sages-theme] .topbar-brand { grid-column: 1; }
    html[data-sages-theme] .topbar-brand p { display: none; }
    html[data-sages-theme] .top-nav { grid-column: 2; grid-row: 1; width: auto; gap: 6px; padding-block: 7px; }
    html[data-sages-theme] .top-nav button {
        flex-basis: 100px;
        width: 100px;
        min-width: 100px;
        min-height: 60px;
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 7px;
        padding: 7px 8px;
        border-radius: 12px;
    }
    html[data-sages-theme] .top-nav-card-icon { width: 28px; height: 28px; border-radius: 9px; }
    html[data-sages-theme] .top-nav-card-copy small { display: none; }
    html[data-sages-theme] .topbar-actions { grid-column: 3; grid-row: 1; }
    html[data-sages-theme] .topbar-actions .client-download-link { display: none; }
    html[data-sages-theme] .topbar-actions #refresh-view { display: none; }
    html[data-sages-theme] .topbar .theme-picker-trigger > span:last-child { display: none; }
    html[data-sages-theme] .console-main { grid-template-columns: 1fr; min-height: calc(100dvh - 76px); }
    html[data-sages-theme] .sidebar {
        position: static;
        top: auto;
        height: auto;
        max-height: 42vh;
        border-right: 0;
        border-bottom: 1px solid var(--theme-border);
    }
    html[data-sages-theme] .system-settings-utility-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1480px) and (min-width: 901px) {
    html[data-sages-theme] .top-nav button {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 28px 15px;
        justify-items: center;
        gap: 3px;
        padding: 5px 4px;
        text-align: center;
    }
    html[data-sages-theme] .top-nav-card-copy { width: 100%; }
    html[data-sages-theme] .top-nav-card-copy strong { font-size: 10.5px; }
    html[data-sages-theme] .top-nav-card-copy small { display: none; }
}

@media (max-width: 680px) {
    html[data-sages-theme] .topbar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: 66px;
        gap: 0 6px;
        padding-inline: 8px;
    }
    html[data-sages-theme] .topbar-brand > div:last-child { display: none; }
    html[data-sages-theme] .brand-mark { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; }
    html[data-sages-theme] .top-nav { gap: 5px; padding-block: 6px; }
    html[data-sages-theme] .top-nav button {
        width: 98px;
        min-height: 54px;
        grid-template-columns: 27px minmax(0, 1fr);
        gap: 6px;
        padding: 6px 7px;
    }
    html[data-sages-theme] .top-nav-card-icon { width: 27px; height: 27px; font-size: 12px; }
    html[data-sages-theme] .top-nav-card-copy strong { font-size: 11px; }
    html[data-sages-theme] .topbar-brand p { display: none; }
    html[data-sages-theme] .topbar-actions .client-download-link { display: none; }
    html[data-sages-theme] .topbar-actions :is(.ghost-btn, .secondary-btn) { min-height: 34px; padding: 6px 8px; }
    html[data-sages-theme] .topbar .theme-picker-trigger > span:last-child { display: none; }
    html[data-sages-theme] .console-main { min-height: calc(100dvh - 66px); }
    html[data-sages-theme] .content { padding: 16px 12px 22px; }
    html[data-sages-theme] .system-settings-utilities > header {
        align-items: start;
        flex-direction: column;
        gap: 4px;
    }
    html[data-sages-theme] .system-settings-utility-item { align-items: flex-start; }
    html[data-sages-theme] .system-settings-utility-item small { white-space: normal; }
    .theme-picker-panel { width: 100%; padding: 20px 16px; }
    .theme-option { grid-template-columns: 88px minmax(0, 1fr); }
    .theme-option-state { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .theme-picker-panel { animation: none; }
    .theme-option { transition: none; }
    html[data-sages-theme] :is(.top-nav button, .top-nav-card-icon, .sidebar-menu-group, .sidebar-menu-item) { transition: none; }
}

/* The native macOS client owns its own navigation chrome. */
html.sageslink-native-client[data-sages-theme] .topbar { display: none; }

/* Keep the primary product switcher optically centered in the viewport. */
@media (min-width: 681px) {
    html[data-sages-theme] .topbar {
        grid-template-columns: minmax(0,1fr) max-content minmax(0,1fr);
    }
    html[data-sages-theme] .topbar-brand { justify-self: start; }
    html[data-sages-theme] .top-nav {
        width: max-content;
        max-width: 100%;
        justify-self: center;
        justify-content: center;
    }
    html[data-sages-theme] .top-nav > button {
        flex: 0 0 clamp(96px,7.5vw,116px);
        width: clamp(96px,7.5vw,116px);
        min-width: clamp(96px,7.5vw,116px);
        max-width: clamp(96px,7.5vw,116px);
    }
    html[data-sages-theme] .topbar-actions { justify-self: end; }
}
html.sageslink-native-client[data-sages-theme] .console-main > .sidebar { display: none; }
html.sageslink-native-client[data-sages-theme] .console-main {
    grid-template-columns: minmax(0, 1fr);
    min-height: 100dvh;
}

/* 20260826 SagesBiz-only navigation: business domains stay local; suite products open independent sessions. */
html[data-sages-theme] .topbar {
    overflow: visible;
}

html[data-sages-theme] .top-nav-more {
    position: relative;
    flex: 0 0 auto;
}

html[data-sages-theme] .top-nav .top-nav-more-trigger {
    width: 94px;
    min-width: 94px;
    max-width: 94px;
    grid-template-columns: 22px minmax(0, 1fr);
}

html[data-sages-theme] .top-nav-more-trigger svg,
html[data-sages-theme] .suite-product-trigger svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html[data-sages-theme] .top-nav-more-trigger b {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-sages-theme] .top-nav-more-panel {
    position: absolute;
    z-index: 240;
    top: calc(100% + 8px);
    left: 50%;
    display: grid;
    grid-template-columns: repeat(2, minmax(176px, 1fr));
    gap: 8px;
    width: min(520px, calc(100vw - 32px));
    max-height: min(560px, calc(100dvh - 110px));
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    background: var(--theme-surface-raised);
    box-shadow: 0 20px 48px rgba(var(--theme-text-rgb), .18);
    transform: translateX(-50%);
}

html[data-sages-theme] .top-nav-more-panel[hidden],
html[data-sages-theme] .suite-product-panel[hidden] {
    display: none;
}

html[data-sages-theme] .top-nav-more-panel > button {
    width: 100%;
    max-width: none;
    min-height: 58px;
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 8px 10px;
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    background: var(--theme-surface) !important;
    box-shadow: none;
}

html[data-sages-theme] .top-nav-more-panel > button:hover,
html[data-sages-theme] .top-nav-more-panel > button.active {
    transform: none;
    border-color: rgba(var(--theme-accent-rgb), .38);
    background: var(--theme-accent-faint) !important;
    box-shadow: none;
}

html[data-sages-theme] .topbar-actions {
    position: relative;
    z-index: 250;
}

html[data-sages-theme] .suite-product-switcher {
    position: relative;
}

html[data-sages-theme] .suite-product-trigger {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(var(--theme-border-rgb), .96);
    border-radius: var(--theme-control-radius);
    background: rgba(var(--theme-surface-rgb), .9);
    color: var(--theme-text);
    cursor: pointer;
}

html[data-sages-theme] .suite-product-trigger:hover,
html[data-sages-theme] .suite-product-trigger[aria-expanded="true"] {
    border-color: rgba(var(--theme-accent-rgb), .34);
    background: var(--theme-accent-faint);
    color: var(--theme-accent-strong);
}

html[data-sages-theme] :is(.suite-product-trigger, .top-nav-more-trigger, .suite-product-item):focus-visible {
    outline: 3px solid rgba(var(--theme-accent-rgb), .26);
    outline-offset: 2px;
}

html[data-sages-theme] .suite-product-panel {
    position: absolute;
    z-index: 260;
    top: calc(100% + 10px);
    right: 0;
    width: min(390px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    background: var(--theme-surface-raised);
    box-shadow: 0 20px 48px rgba(var(--theme-text-rgb), .18);
}

html[data-sages-theme] .suite-product-panel > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px 11px;
    border-bottom: 1px solid var(--theme-border);
}

html[data-sages-theme] .suite-product-panel > header strong {
    color: var(--theme-text);
    font-size: 14px;
}

html[data-sages-theme] .suite-product-panel > header span,
html[data-sages-theme] .suite-product-panel > footer {
    color: var(--theme-muted);
    font-size: 10px;
}

html[data-sages-theme] .suite-product-list {
    display: grid;
    gap: 2px;
    padding: 7px;
}

html[data-sages-theme] .suite-product-item {
    width: 100%;
    min-height: 66px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--theme-text);
    text-align: left;
    text-decoration: none;
}

html[data-sages-theme] a.suite-product-item:hover {
    border-color: var(--theme-border);
    background: var(--theme-accent-faint);
}

html[data-sages-theme] button.suite-product-item:disabled {
    cursor: not-allowed;
    opacity: .68;
}

html[data-sages-theme] button.suite-product-item[aria-current="page"] {
    opacity: 1;
}

html[data-sages-theme] .suite-product-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--theme-accent-rgb), .22);
    border-radius: 10px;
    background: var(--theme-accent-faint);
    color: var(--theme-accent-strong);
    font-size: 12px;
    font-weight: 820;
}

html[data-sages-theme] .suite-product-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
}

html[data-sages-theme] .suite-product-copy strong {
    font-size: 12px;
}

html[data-sages-theme] .suite-product-copy small,
html[data-sages-theme] .suite-product-copy em {
    overflow: hidden;
    color: var(--theme-muted);
    font-size: 10px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-sages-theme] .suite-product-copy em {
    color: var(--theme-subtle);
}

html[data-sages-theme] .suite-product-status {
    padding: 3px 6px;
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    color: var(--theme-muted);
    background: var(--theme-surface);
    font-size: 10px;
    font-weight: 760;
    white-space: nowrap;
}

html[data-sages-theme] .suite-product-status.current,
html[data-sages-theme] .suite-product-status.configured {
    border-color: rgba(var(--theme-accent-rgb), .22);
    color: var(--theme-accent-strong);
    background: var(--theme-accent-soft);
}

html[data-sages-theme] .suite-product-panel > footer {
    padding: 9px 14px 11px;
    border-top: 1px solid var(--theme-border);
    line-height: 1.5;
}

html[data-sages-theme] .suite-product-state {
    display: grid;
    gap: 3px;
    padding: 16px 12px;
    color: var(--theme-muted);
}

html[data-sages-theme] .suite-product-state strong {
    color: var(--theme-text);
    font-size: 12px;
}

html[data-sages-theme] .suite-product-state span {
    font-size: 10px;
}

html[data-sages-theme] .suite-product-state button {
    width: max-content;
    min-height: 34px;
    margin-top: 7px;
    padding: 5px 10px;
    border: 1px solid var(--theme-border-strong);
    border-radius: 7px;
    background: var(--theme-surface);
    color: var(--theme-text);
    cursor: pointer;
}

@media (max-width: 1180px) {
    html[data-sages-theme] .top-nav .top-nav-more-trigger {
        width: 84px;
        min-width: 84px;
        max-width: 84px;
    }
    html[data-sages-theme] .suite-product-trigger span { display: none; }
}

@media (max-width: 680px) {
    html[data-sages-theme] .top-nav-more-panel,
    html[data-sages-theme] .suite-product-panel {
        position: fixed;
        top: 72px;
        right: 8px;
        left: 8px;
        width: auto;
        max-height: calc(100dvh - 80px);
        transform: none;
    }
    html[data-sages-theme] .top-nav-more-panel {
        grid-template-columns: 1fr;
    }
    html[data-sages-theme] .suite-product-trigger {
        width: 36px;
        min-height: 36px;
        justify-content: center;
        padding: 6px;
    }
}