/* ==========================================================
   复盘啦双主题设计系统
   白马将军：清朗、克制、高对比的日间交易界面
   黑夜骑士：深海蓝灰、低眩光、长时间盯盘友好的夜间界面
   ========================================================== */

:root,
:root[data-theme="white-general"] {
    color-scheme: light;
    --ui-canvas: #f4f7fb;
    --ui-canvas-deep: #edf2f8;
    --ui-surface: #ffffff;
    --ui-surface-raised: #ffffff;
    --ui-overlay: rgba(17, 27, 45, 0.32);
    --ui-surface-muted: #f7f9fc;
    --ui-surface-active: #edf4ff;
    --ui-dense-surface: #ffffff;
    --ui-dense-header: #f7f9fc;
    --ui-dense-hover: #f0f5fb;
    --ui-dense-divider: #e5ebf3;
    --ui-input: #ffffff;
    --ui-border: #dfe6ef;
    --ui-border-strong: #cbd6e4;
    --ui-text-strong: #111b2d;
    --ui-text: #2f3b4f;
    --ui-text-muted: #617089;
    --ui-text-faint: #8e9bb0;
    --ui-accent: #2f6fed;
    --ui-accent-strong: #1f56c2;
    --ui-accent-soft: #eaf2ff;
    --ui-accent-border: #bfd4ff;
    --ui-on-accent: #ffffff;
    --ui-action-fill: #2f6fed;
    --ui-action-fill-hover: #1f56c2;
    --ui-focus: rgba(47, 111, 237, 0.22);
    --ui-stock-name: #1d55a6;
    --ui-stock-name-soft: rgba(47, 111, 237, 0.10);
    --ui-stock-name-border: rgba(47, 111, 237, 0.24);
    --ui-up: #d32932;
    --ui-down: #128037;
    --stock-up: var(--ui-up);
    --stock-down: var(--ui-down);
    --stock-flat: var(--ui-text-muted);
    --ui-warning: #d48806;
    --ui-up-soft: #fff0f1;
    --ui-down-soft: #eaf9ee;
    --ui-heat-up-1: #ffe8eb;
    --ui-heat-up-2: #ffbdc3;
    --ui-heat-up-3: #db303a;
    --ui-heat-up-text: #a91824;
    --ui-heat-up-text-strong: #ffffff;
    --ui-heat-down-1: #e2f7e8;
    --ui-heat-down-2: #a8e5b8;
    --ui-heat-down-3: #16853b;
    --ui-heat-down-text: #12642b;
    --ui-heat-down-text-strong: #ffffff;
    /* 图表填充独立于文字色：高饱和红绿，避免混入蓝灰后发脏。 */
    --ui-chart-up-start: #db303a;
    --ui-chart-up-end: #b91828;
    --ui-chart-down-start: #16853b;
    --ui-chart-down-end: #09652c;
    --ui-chart-flat: #667386;
    --ui-chart-up-mid: #ff858f;
    --ui-chart-up-mid-text: #7d1420;
    --ui-chart-up-peak: #ad1225;
    --ui-chart-up-peak-text: #ffffff;
    --ui-chart-down-mid: #63cf86;
    --ui-chart-down-mid-text: #104b24;
    --ui-chart-down-peak: #085c29;
    --ui-chart-down-peak-text: #ffffff;
    --ui-on-market-fill: #ffffff;
    --ui-warning-soft: #fff7e6;
    --ui-code: #101a2b;
    --ui-code-text: #dbe7f6;
    --ui-shadow-sm: 0 1px 2px rgba(17, 27, 45, 0.05);
    --ui-shadow-card: 0 8px 24px rgba(27, 47, 78, 0.06);
    --ui-shadow-float: 0 18px 48px rgba(17, 27, 45, 0.16);
    --ui-scrollbar: #bfcbda;
    --ui-scrollbar-hover: #96a7bd;
}

:root[data-theme="night-knight"] {
    color-scheme: dark;
    --ui-canvas: #08111f;
    --ui-canvas-deep: #060d18;
    --ui-surface: #0e1a2b;
    --ui-surface-raised: #122238;
    --ui-overlay: rgba(0, 0, 0, 0.52);
    --ui-surface-muted: #101d30;
    --ui-surface-active: #172c49;
    --ui-dense-surface: #141e2c;
    --ui-dense-header: #1b293a;
    --ui-dense-hover: #223349;
    --ui-dense-divider: #28384c;
    --ui-input: #0b1728;
    --ui-border: #20324b;
    --ui-border-strong: #304761;
    --ui-text-strong: #f1f5fb;
    --ui-text: #d3ddec;
    --ui-text-muted: #96a8c0;
    --ui-text-faint: #667b96;
    --ui-accent: #6ea2ff;
    --ui-accent-strong: #8bb6ff;
    --ui-accent-soft: rgba(70, 126, 224, 0.16);
    --ui-accent-border: rgba(110, 162, 255, 0.34);
    --ui-on-accent: #ffffff;
    --ui-action-fill: #315fba;
    --ui-action-fill-hover: #3868a9;
    --ui-focus: rgba(110, 162, 255, 0.28);
    --ui-stock-name: #f1f5fb;
    --ui-stock-name-soft: rgba(110, 162, 255, 0.15);
    --ui-stock-name-border: rgba(139, 182, 255, 0.30);
    --ui-up: #ff626b;
    --ui-down: #38d67a;
    --ui-warning: #f3b54a;
    --ui-up-soft: #321922;
    --ui-down-soft: #102b20;
    --ui-heat-up-1: #391c24;
    --ui-heat-up-2: #6b202c;
    --ui-heat-up-3: #bb2938;
    --ui-heat-up-text: #ffacb1;
    --ui-heat-up-text-strong: #fff4f4;
    --ui-heat-down-1: #102f23;
    --ui-heat-down-2: #145035;
    --ui-heat-down-3: #18773e;
    --ui-heat-down-text: #72e49b;
    --ui-heat-down-text-strong: #f0fff5;
    --ui-chart-up-start: #dc303d;
    --ui-chart-up-end: #b91b30;
    --ui-chart-down-start: #16853b;
    --ui-chart-down-end: #0b6530;
    --ui-chart-flat: #50627b;
    --ui-chart-up-mid: #aa2636;
    --ui-chart-up-mid-text: #ffffff;
    --ui-chart-up-peak: #ff626b;
    --ui-chart-up-peak-text: #46080e;
    --ui-chart-down-mid: #146033;
    --ui-chart-down-mid-text: #ffffff;
    --ui-chart-down-peak: #38d67a;
    --ui-chart-down-peak-text: #07391d;
    --ui-on-market-fill: #ffffff;
    --ui-warning-soft: rgba(212, 136, 6, 0.14);
    --ui-code: #050b14;
    --ui-code-text: #cbd9eb;
    --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
    --ui-shadow-card: 0 12px 30px rgba(0, 0, 0, 0.22);
    --ui-shadow-float: 0 22px 60px rgba(0, 0, 0, 0.42);
    --ui-scrollbar: #2c405a;
    --ui-scrollbar-hover: #47617f;

    /* 兼容主框架原有 gray / primary 令牌。 */
    --primary-50: #111f34;
    --primary-100: #172d4d;
    --primary-200: #21416e;
    --primary-300: #3868a9;
    --primary-400: #568be2;
    --primary-500: #6ea2ff;
    --primary-600: #8bb6ff;
    --primary-700: #abcaff;
    --gray-50: #08111f;
    --gray-100: #101d30;
    --gray-200: #20324b;
    --gray-300: #304761;
    --gray-400: #667b96;
    --gray-500: #96a8c0;
    --gray-600: #b6c4d7;
    --gray-700: #d3ddec;
    --gray-800: #e3eaf4;
    --gray-900: #f1f5fb;
    --success: #35c98a;
    --warning: #f3b54a;
    --danger: #ff6268;
    --info: #6ea2ff;
    --stock-up: var(--ui-up);
    --stock-down: var(--ui-down);
    --stock-flat: #96a8c0;
}

/* 页内 Tab 基线：复用主升龙头的 30px 纯文字分段控件。 */
.ui-content-tabs { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--ui-border); border-radius: 9px; background: var(--ui-surface-muted); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ui-surface-raised) 80%, transparent); }
.ui-content-tab { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; height: 30px; padding: 0 14px; font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--ui-text-muted); background: transparent; border: 0; border-radius: 7px; cursor: pointer; }
.ui-content-tab:hover { color: var(--ui-text-strong); }
.ui-content-tab[aria-selected="true"] { color: var(--ui-accent-strong); background: var(--ui-surface-raised); box-shadow: var(--ui-shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--ui-border) 72%, transparent); }
.ui-content-tab:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }

/* 行情热力色阶：按涨跌幅绝对值分档（0、1%、3%），不能用于上涨家数占比。 */
.ui-market-heat {
    --ui-heat-cell-bg: var(--ui-surface-muted);
    --ui-heat-cell-text: var(--ui-text-muted);
    background: var(--ui-heat-cell-bg);
    color: var(--ui-heat-cell-text);
}
.ui-market-heat[data-heat="up-1"] { --ui-heat-cell-bg: var(--ui-heat-up-1); --ui-heat-cell-text: var(--ui-heat-up-text); }
.ui-market-heat[data-heat="up-2"] { --ui-heat-cell-bg: var(--ui-heat-up-2); --ui-heat-cell-text: var(--ui-heat-up-text); }
.ui-market-heat[data-heat="up-3"] { --ui-heat-cell-bg: var(--ui-heat-up-3); --ui-heat-cell-text: var(--ui-heat-up-text-strong); }
.ui-market-heat[data-heat="down-1"] { --ui-heat-cell-bg: var(--ui-heat-down-1); --ui-heat-cell-text: var(--ui-heat-down-text); }
.ui-market-heat[data-heat="down-2"] { --ui-heat-cell-bg: var(--ui-heat-down-2); --ui-heat-cell-text: var(--ui-heat-down-text); }
.ui-market-heat[data-heat="down-3"] { --ui-heat-cell-bg: var(--ui-heat-down-3); --ui-heat-cell-text: var(--ui-heat-down-text-strong); }

html,
body {
    scrollbar-color: var(--ui-scrollbar) transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--ui-scrollbar);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--ui-scrollbar-hover);
}

/* 股票名称是交易页面的首要识别对象，不能降级为普通辅助文字。 */
.ui-stock-name {
    color: var(--ui-stock-name);
    font-weight: 780;
    letter-spacing: 0.01em;
}

/* 夜间股票名称统一柔白；覆盖旧页面及链接 hover 的蓝色，不影响代码和涨跌值。 */
html:root[data-theme="night-knight"] body :is(
    .ui-stock-name, .stock-name, .stock-name-line, .stock-name-link,
    .stock-name-text, .stock-name-display, .stock-info-name, .stock-name-default,
    .stock-link, .stock-button, .peer-stock-name, .multi-stock-name,
    .focus-stock-name, .lianban-stock-name, .ladder-stock-name,
    .detail-stock-select, .nc-manual-stock-name, .tech-attack-theme-stock-name,
    .guard-market-stock-name strong
) {
    color: var(--ui-stock-name) !important;
}

.ui-stock-name--focus {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--ui-stock-name-soft);
    box-shadow: inset 0 0 0 1px var(--ui-stock-name-border);
}

body.app-shell {
    background: var(--ui-canvas);
    color: var(--ui-text);
    transition: background-color 180ms ease, color 180ms ease;
}

.app-shell .top-bar {
    background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
    border-bottom-color: var(--ui-border);
    box-shadow: var(--ui-shadow-sm);
    backdrop-filter: saturate(125%) blur(14px);
}

.app-shell .system-title {
    color: var(--ui-text-strong);
    font-weight: 750;
    letter-spacing: -0.02em;
}

.app-shell .system-title img {
    box-shadow: 0 4px 12px rgba(213, 40, 50, 0.18);
}

.theme-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ui-surface-muted) 88%, var(--ui-canvas));
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-text-strong) 7%, transparent), var(--ui-shadow-sm);
    isolation: isolate;
}

.theme-switcher::before {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 28px;
    height: 28px;
    border: 1px solid color-mix(in srgb, var(--ui-border-strong) 72%, transparent);
    border-radius: 50%;
    background: var(--ui-surface-raised);
    box-shadow: 0 2px 7px color-mix(in srgb, var(--ui-text-strong) 13%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ui-text-strong) 4%, transparent);
    content: '';
    transition: transform 420ms cubic-bezier(.22, .7, .28, 1), background-color 360ms ease, border-color 360ms ease;
    z-index: 0;
}

.theme-switcher::after {
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: linear-gradient(105deg,
        transparent 24%,
        color-mix(in srgb, var(--ui-accent) 56%, transparent) 48%,
        transparent 72%);
    background-position: 130% 0;
    background-size: 220% 100%;
    content: '';
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}

:root[data-theme="night-knight"] .theme-switcher::before {
    transform: translateX(30px);
}

.theme-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    width: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ui-text-faint);
    font-family: inherit;
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 260ms ease, transform 260ms ease;
    z-index: 1;
}

.theme-option:hover {
    color: var(--ui-text-strong);
    transform: translateY(-1px);
}

.theme-option.active {
    color: var(--ui-text-strong);
    background: transparent;
    box-shadow: none;
}

.theme-option-icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:root.theme-is-switching .theme-switcher {
    border-color: var(--ui-accent-border);
    box-shadow: 0 0 0 3px var(--ui-focus), var(--ui-shadow-sm);
}

:root.theme-is-switching .theme-switcher::after {
    animation: theme-switch-scan 920ms cubic-bezier(.22, .7, .28, 1);
}

:root.theme-is-switching .theme-option.active .theme-option-icon {
    animation: theme-icon-arrive 760ms cubic-bezier(.22, .7, .28, 1);
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 920ms;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    animation-name: theme-uniform-fade-out;
}

::view-transition-new(root) {
    animation-name: theme-uniform-fade-in;
}

@keyframes theme-uniform-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes theme-uniform-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes theme-switch-scan {
    0% {
        background-position: 130% 0;
        opacity: 0;
    }
    24% {
        opacity: .42;
    }
    78% {
        opacity: .24;
    }
    100% {
        background-position: -130% 0;
        opacity: 0;
    }
}

@keyframes theme-icon-arrive {
    0% {
        opacity: .55;
        transform: scale(.86) rotate(-10deg);
    }
    64% {
        opacity: 1;
        transform: scale(1.04) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

.theme-option-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.theme-option:focus-visible {
    outline: 3px solid var(--ui-focus);
    outline-offset: 2px;
}

.app-shell .sidebar-toggle {
    color: var(--ui-text-muted);
}

.app-shell .sidebar-toggle:hover {
    color: var(--ui-text-strong);
    background: var(--ui-surface-muted);
}

.app-shell .sidebar {
    background: linear-gradient(180deg, var(--ui-surface-muted) 0%, var(--ui-canvas-deep) 100%);
    border-right-color: var(--ui-border);
}

.app-shell .nav-group-header {
    color: var(--ui-text-muted);
}

.app-shell .nav-group-header:hover,
.app-shell .nav-item:hover {
    color: var(--ui-accent-strong);
    background: var(--ui-accent-soft);
}

.app-shell .nav-item {
    color: var(--ui-text);
}

.app-shell .nav-item.active,
.app-shell .nav-item.active:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #3979ee 0%, #2459c4 100%);
    box-shadow: 0 5px 14px rgba(36, 89, 196, 0.22);
}

:root[data-theme="night-knight"] .app-shell .nav-item.active,
:root[data-theme="night-knight"] .app-shell .nav-item.active:hover {
    background: linear-gradient(135deg, #315fba 0%, #234785 100%);
    box-shadow: inset 0 0 0 1px rgba(139, 182, 255, 0.22), 0 7px 18px rgba(0, 0, 0, 0.24);
}

.app-shell .content-area,
.app-shell .iframe-container {
    background: var(--ui-canvas);
}

.app-shell .loading-text,
.app-shell .error-message,
.app-shell .top-notice,
.app-shell .user-name {
    color: var(--ui-text-muted);
}

.app-shell .user-avatar {
    background: var(--ui-accent);
    color: #ffffff;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--ui-accent) 26%, transparent);
}

.app-shell .user-avatar:hover {
    background: var(--ui-accent-strong);
}

.app-shell .user-dropdown {
    color: var(--ui-text);
    background: var(--ui-surface-raised);
    border-color: var(--ui-border);
    box-shadow: var(--ui-shadow-float);
}

.app-shell .dropdown-item:hover {
    background: var(--ui-surface-muted);
}

.app-shell .dropdown-divider {
    background: var(--ui-border);
}

.app-shell .guest-auth-btn {
    color: var(--ui-accent-strong);
    border-color: var(--ui-accent-border);
    background: var(--ui-surface-raised);
}

@media (prefers-reduced-motion: reduce) {
    body.app-shell,
    .theme-option,
    .theme-switcher::before {
        transition: none;
    }

    :root.theme-is-switching .theme-switcher::after,
    :root.theme-is-switching .theme-option.active .theme-option-icon {
        animation: none;
    }
}

/* Shared sector identity palette: categorical only, independent of market heat. */
:root, :root[data-theme="white-general"] {
    --ui-sector-0-text: #1d4ed8;
    --ui-sector-0-bg: #dbeafe;
    --ui-sector-0-border: #60a5fa;
    --ui-sector-1-text: #6d28d9;
    --ui-sector-1-bg: #ede9fe;
    --ui-sector-1-border: #a78bfa;
    --ui-sector-2-text: #0f766e;
    --ui-sector-2-bg: #ccfbf1;
    --ui-sector-2-border: #2dd4bf;
    --ui-sector-3-text: #a84b08;
    --ui-sector-3-bg: #ffedd5;
    --ui-sector-3-border: #fb923c;
    --ui-sector-4-text: #be123c;
    --ui-sector-4-bg: #ffe4e6;
    --ui-sector-4-border: #fb7185;
    --ui-sector-5-text: #0e7490;
    --ui-sector-5-bg: #cffafe;
    --ui-sector-5-border: #22d3ee;
    --ui-sector-6-text: #047857;
    --ui-sector-6-bg: #d1fae5;
    --ui-sector-6-border: #34d399;
    --ui-sector-7-text: #a21caf;
    --ui-sector-7-bg: #fae8ff;
    --ui-sector-7-border: #e879f9;
    --ui-sector-8-text: #4338ca;
    --ui-sector-8-bg: #e0e7ff;
    --ui-sector-8-border: #818cf8;
    --ui-sector-9-text: #3f6212;
    --ui-sector-9-bg: #ecfccb;
    --ui-sector-9-border: #a3e635;
    --ui-sector-10-text: #b91c1c;
    --ui-sector-10-bg: #fee2e2;
    --ui-sector-10-border: #f87171;
    --ui-sector-11-text: #7e22ce;
    --ui-sector-11-bg: #f3e8ff;
    --ui-sector-11-border: #c084fc;
}
:root[data-theme="night-knight"] {
    --ui-sector-0-text: #93c5fd;
    --ui-sector-0-bg: #142f59;
    --ui-sector-0-border: #3b82f6;
    --ui-sector-1-text: #c4b5fd;
    --ui-sector-1-bg: #32205a;
    --ui-sector-1-border: #8b5cf6;
    --ui-sector-2-text: #5eead4;
    --ui-sector-2-bg: #073d37;
    --ui-sector-2-border: #14b8a6;
    --ui-sector-3-text: #fcd34d;
    --ui-sector-3-bg: #4a2a0d;
    --ui-sector-3-border: #f59e0b;
    --ui-sector-4-text: #fda4af;
    --ui-sector-4-bg: #4c1a2c;
    --ui-sector-4-border: #f43f5e;
    --ui-sector-5-text: #67e8f9;
    --ui-sector-5-bg: #093b4c;
    --ui-sector-5-border: #06b6d4;
    --ui-sector-6-text: #6ee7b7;
    --ui-sector-6-bg: #093e2d;
    --ui-sector-6-border: #10b981;
    --ui-sector-7-text: #f0abfc;
    --ui-sector-7-bg: #481c50;
    --ui-sector-7-border: #d946ef;
    --ui-sector-8-text: #a5b4fc;
    --ui-sector-8-bg: #242a5b;
    --ui-sector-8-border: #6366f1;
    --ui-sector-9-text: #bef264;
    --ui-sector-9-bg: #2c3c11;
    --ui-sector-9-border: #84cc16;
    --ui-sector-10-text: #fca5a5;
    --ui-sector-10-bg: #4e1c20;
    --ui-sector-10-border: #ef4444;
    --ui-sector-11-text: #d8b4fe;
    --ui-sector-11-bg: #3e2057;
    --ui-sector-11-border: #a855f7;
}

:root {
    --ui-sector-neutral-text: var(--ui-text-muted);
    --ui-sector-neutral-bg: var(--ui-surface-muted);
    --ui-sector-neutral-border: var(--ui-border-strong);
}
.ui-sector-tag {
    color: var(--ui-sector-tag-text) !important;
    background: var(--ui-sector-tag-bg) !important;
    border-color: var(--ui-sector-tag-border) !important;
}
.ui-sector-tag:is(.active,[aria-selected="true"],[aria-pressed="true"]) {
    box-shadow: inset 0 0 0 1px var(--ui-sector-tag-text);
}
.ui-sector-0 { --ui-sector-tag-text:var(--ui-sector-0-text); --ui-sector-tag-bg:var(--ui-sector-0-bg); --ui-sector-tag-border:var(--ui-sector-0-border); }
.ui-sector-1 { --ui-sector-tag-text:var(--ui-sector-1-text); --ui-sector-tag-bg:var(--ui-sector-1-bg); --ui-sector-tag-border:var(--ui-sector-1-border); }
.ui-sector-2 { --ui-sector-tag-text:var(--ui-sector-2-text); --ui-sector-tag-bg:var(--ui-sector-2-bg); --ui-sector-tag-border:var(--ui-sector-2-border); }
.ui-sector-3 { --ui-sector-tag-text:var(--ui-sector-3-text); --ui-sector-tag-bg:var(--ui-sector-3-bg); --ui-sector-tag-border:var(--ui-sector-3-border); }
.ui-sector-4 { --ui-sector-tag-text:var(--ui-sector-4-text); --ui-sector-tag-bg:var(--ui-sector-4-bg); --ui-sector-tag-border:var(--ui-sector-4-border); }
.ui-sector-5 { --ui-sector-tag-text:var(--ui-sector-5-text); --ui-sector-tag-bg:var(--ui-sector-5-bg); --ui-sector-tag-border:var(--ui-sector-5-border); }
.ui-sector-6 { --ui-sector-tag-text:var(--ui-sector-6-text); --ui-sector-tag-bg:var(--ui-sector-6-bg); --ui-sector-tag-border:var(--ui-sector-6-border); }
.ui-sector-7 { --ui-sector-tag-text:var(--ui-sector-7-text); --ui-sector-tag-bg:var(--ui-sector-7-bg); --ui-sector-tag-border:var(--ui-sector-7-border); }
.ui-sector-8 { --ui-sector-tag-text:var(--ui-sector-8-text); --ui-sector-tag-bg:var(--ui-sector-8-bg); --ui-sector-tag-border:var(--ui-sector-8-border); }
.ui-sector-9 { --ui-sector-tag-text:var(--ui-sector-9-text); --ui-sector-tag-bg:var(--ui-sector-9-bg); --ui-sector-tag-border:var(--ui-sector-9-border); }
.ui-sector-10 { --ui-sector-tag-text:var(--ui-sector-10-text); --ui-sector-tag-bg:var(--ui-sector-10-bg); --ui-sector-tag-border:var(--ui-sector-10-border); }
.ui-sector-11 { --ui-sector-tag-text:var(--ui-sector-11-text); --ui-sector-tag-bg:var(--ui-sector-11-bg); --ui-sector-tag-border:var(--ui-sector-11-border); }
.ui-sector-neutral { --ui-sector-tag-text:var(--ui-sector-neutral-text); --ui-sector-tag-bg:var(--ui-sector-neutral-bg); --ui-sector-tag-border:var(--ui-sector-neutral-border); }