body[data-ui-theme="trendfirst-brand"],
body:not([data-ui-theme]) {
    /*
     * 核心色板（严格遵循）
     * 系统主底色 #0F172A | 页面背景 #F7F8FA | 卡片 #FFFFFF
     * 主行动色 #C2410C | 品牌渐变 #FF7A00→#FF5A3D→#F2356B
     * 正文 #111827 | AI 信息色 #2563EB
     */

    /* Brand — Logo 渐变 */
    --brand-orange: #ff7a00;
    --brand-coral: #ff5a3d;
    --brand-rose: #f2356b;
    --brand-gradient: linear-gradient(135deg, #ff7a00 0%, #ff5a3d 48%, #f2356b 100%);

    /* 系统主底色（侧栏 / Shell） */
    --shell-base: #0f172a;
    --shell-elevated: #1e293b;
    --shell-border: rgba(255, 255, 255, 0.08);
    --shell-text: #94a3b8;
    --shell-text-hover: #e2e8f0;
    --shell-text-active: #ffffff;
    --shell-hover: rgba(255, 255, 255, 0.06);

    /* Primary / Trust */
    --primary-950: #0f172a;
    --primary-900: #111827;
    --primary-800: #1f2937;
    --primary-700: #334155;

    /* 主行动色 */
    --action-primary: #c2410c;
    --action-primary-hover: #9a3412;
    --action-primary-soft: #fff4ec;
    --action-primary-border: #fdba74;

    /* AI 信息色 */
    --ai-blue: #2563eb;
    --ai-blue-soft: #eff6ff;
    --ai-insight: #f2356b;
    --ai-insight-soft: #fff1f5;

    /* 页面背景 / 卡片 */
    --bg-page: #f7f8fa;
    --bg-subtle: #f9fafb;
    --surface-main: #ffffff;
    --surface-warm: #fff8f3;
    --surface-ai: #f8fafc;

    /* 正文 */
    --text-primary: #111827;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-disabled: #94a3b8;
    --text-inverse: #ffffff;

    /* Border */
    --border-default: #e5e7eb;
    --border-strong: #cbd5e1;
    --border-warm: #fed7aa;

    /* Status */
    --success: #16a34a;
    --success-soft: #ecfdf5;
    --warning: #d97706;
    --warning-soft: #fffbeb;
    --error: #dc2626;
    --error-soft: #fef2f2;

    /* ui-* 桥接 */
    --ui-shell: var(--shell-base);
    --ui-shell-text: var(--shell-text);
    --ui-shell-text-active: var(--shell-text-active);
    --ui-primary: var(--action-primary);
    --ui-primary-hover: var(--action-primary-hover);
    --ui-primary-soft: var(--action-primary-soft);
    --ui-primary-muted: var(--surface-warm);
    --ui-primary-border: var(--action-primary-border);
    --ui-primary-text: var(--action-primary-hover);
    --ui-accent: var(--ai-blue);
    --ui-accent-hover: #1d4ed8;
    --ui-accent-soft: var(--ai-blue-soft);
    --ui-accent-border: #bfdbfe;
    --ui-accent-text: #1e40af;
    --ui-bg: var(--bg-page);
    --ui-surface: var(--surface-main);
    --ui-surface-muted: var(--bg-subtle);
    --ui-border: var(--border-default);
    --ui-text: var(--text-primary);
    --ui-text-muted: var(--text-secondary);
    --ui-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.04);
    --ui-chart-series-1: var(--brand-coral);
    --ui-chart-series-2: var(--brand-orange);
    --ui-chart-series-3: var(--ai-insight);
    --ui-chart-series-4: var(--ai-blue);
    --ui-chart-series-5: var(--success);
    --ui-chart-series-6: var(--warning);
    --ui-chart-series-7: var(--action-primary);
    --ui-chart-series-8: var(--text-tertiary);
    --ui-chart-heatmap-low: var(--action-primary-soft);
    --ui-chart-heatmap-mid: var(--brand-orange);
    --ui-chart-heatmap-high: var(--action-primary-hover);
    --ui-chart-positive: var(--success);
    --ui-chart-neutral: var(--warning);
    --ui-chart-negative: var(--error);
    --ui-chart-grid: var(--border-default);
    --ui-chart-axis: var(--text-tertiary);
    --ui-list-complete-tone: var(--ui-primary);
    --ui-progress-track: var(--border-default);
    /* 进行中：浅主色；完成：主色柔和实心（比纯主色克制，比浅混色更易辨认） */
    --ui-progress-fill: color-mix(in srgb, var(--ui-primary) 38%, var(--ui-surface));
    --ui-progress-fill-complete: color-mix(in srgb, var(--ui-primary) 72%, var(--ui-surface));
    --ui-progress-fill-low: color-mix(in srgb, var(--warning) 30%, var(--ui-surface-muted));
}

body[data-ui-theme="classic-indigo"] {
    --ui-primary: #4f46e5;
    --ui-primary-hover: #4338ca;
    --ui-primary-soft: #eef2ff;
    --ui-primary-muted: #e0e7ff;
    --ui-primary-border: #c7d2fe;
    --ui-primary-text: #3730a3;
    --ui-bg: #f8fafc;
    --ui-surface: #ffffff;
    --ui-surface-muted: #f1f5f9;
    --ui-border: #e2e8f0;
    --ui-text: #0f172a;
    --ui-text-muted: #64748b;
    --ui-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
    --ui-chart-series-1: #4f46e5;
    --ui-chart-series-2: #2563eb;
    --ui-chart-series-3: #7c3aed;
    --ui-chart-series-4: #0891b2;
    --ui-chart-series-5: #059669;
    --ui-chart-series-6: #d97706;
    --ui-chart-series-7: #e11d48;
    --ui-chart-series-8: #475569;
    --ui-chart-heatmap-low: #eef2ff;
    --ui-chart-heatmap-mid: #818cf8;
    --ui-chart-heatmap-high: #3730a3;
    --ui-chart-positive: #059669;
    --ui-chart-neutral: #d97706;
    --ui-chart-negative: #dc2626;
    --ui-chart-grid: #e2e8f0;
    --ui-chart-axis: #64748b;
    --ui-list-complete-tone: var(--ui-primary);
    --ui-progress-track: #e8e8e4;
    --ui-progress-fill: color-mix(in srgb, var(--ui-primary) 38%, var(--ui-surface));
    --ui-progress-fill-complete: color-mix(in srgb, var(--ui-primary) 72%, var(--ui-surface));
    --ui-progress-fill-low: color-mix(in srgb, #d97706 30%, var(--ui-surface-muted));
}

body[data-ui-theme="ops-teal"] {
    --ui-primary: #0f766e;
    --ui-primary-hover: #115e59;
    --ui-primary-soft: #ecfdfa;
    --ui-primary-muted: #ccfbf1;
    --ui-primary-border: #99f6e4;
    --ui-primary-text: #134e4a;
    --ui-bg: #f6f8f7;
    --ui-surface: #ffffff;
    --ui-surface-muted: #eef4f2;
    --ui-border: #d9e2df;
    --ui-text: #10201d;
    --ui-text-muted: #5f716d;
    --ui-shadow: 0 2px 10px rgba(15, 77, 70, 0.1);
    --ui-chart-series-1: #0f766e;
    --ui-chart-series-2: #0891b2;
    --ui-chart-series-3: #047857;
    --ui-chart-series-4: #2563eb;
    --ui-chart-series-5: #65a30d;
    --ui-chart-series-6: #d97706;
    --ui-chart-series-7: #be123c;
    --ui-chart-series-8: #475569;
    --ui-chart-heatmap-low: #ecfdfa;
    --ui-chart-heatmap-mid: #2dd4bf;
    --ui-chart-heatmap-high: #0f766e;
    --ui-chart-positive: #047857;
    --ui-chart-neutral: #d97706;
    --ui-chart-negative: #be123c;
    --ui-chart-grid: #d9e2df;
    --ui-chart-axis: #5f716d;
    --ui-list-complete-tone: var(--ui-primary);
    --ui-progress-track: #dde8e5;
    --ui-progress-fill: color-mix(in srgb, var(--ui-primary) 38%, var(--ui-surface));
    --ui-progress-fill-complete: color-mix(in srgb, var(--ui-primary) 72%, var(--ui-surface));
    --ui-progress-fill-low: color-mix(in srgb, #d97706 30%, var(--ui-surface-muted));
}

body[data-ui-theme="graphite-amber"] {
    --ui-primary: #b45309;
    --ui-primary-hover: #92400e;
    --ui-primary-soft: #fffbeb;
    --ui-primary-muted: #fef3c7;
    --ui-primary-border: #fcd34d;
    --ui-primary-text: #78350f;
    --ui-bg: #f7f7f5;
    --ui-surface: #ffffff;
    --ui-surface-muted: #eeeeea;
    --ui-border: #deded8;
    --ui-text: #1f1f1c;
    --ui-text-muted: #6d6b63;
    --ui-shadow: 0 2px 10px rgba(31, 31, 28, 0.08);
    --ui-chart-series-1: #b45309;
    --ui-chart-series-2: #334155;
    --ui-chart-series-3: #0284c7;
    --ui-chart-series-4: #059669;
    --ui-chart-series-5: #be123c;
    --ui-chart-series-6: #ca8a04;
    --ui-chart-series-7: #0f766e;
    --ui-chart-series-8: #78716c;
    --ui-chart-heatmap-low: #fffbeb;
    --ui-chart-heatmap-mid: #f59e0b;
    --ui-chart-heatmap-high: #92400e;
    --ui-chart-positive: #059669;
    --ui-chart-neutral: #b45309;
    --ui-chart-negative: #be123c;
    --ui-chart-grid: #deded8;
    --ui-chart-axis: #6d6b63;
    --ui-list-complete-tone: var(--ui-primary);
    --ui-progress-track: #e8e4dc;
    --ui-progress-fill: color-mix(in srgb, var(--ui-primary) 38%, var(--ui-surface));
    --ui-progress-fill-complete: color-mix(in srgb, var(--ui-primary) 72%, var(--ui-surface));
    --ui-progress-fill-low: color-mix(in srgb, #b45309 30%, var(--ui-surface-muted));
}

body[data-ui-theme="trendfirst-brand"] .workspace-topbar,
body[data-ui-theme="trendfirst-brand"] .rail-topbar,
body:not([data-ui-theme]) .workspace-topbar,
body:not([data-ui-theme]) .rail-topbar {
    background: var(--surface-main);
    border-bottom-color: var(--border-default);
}

/* 侧栏：系统主底色 #0F172A — 精致深色导航 */
body[data-ui-theme="trendfirst-brand"] .rail,
body:not([data-ui-theme]) .rail {
    background: var(--shell-base);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--shell-text);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
    padding: 12px 10px 14px;
    gap: 12px;
}

body[data-ui-theme="trendfirst-brand"] .rail .rail-header,
body:not([data-ui-theme]) .rail .rail-header {
    position: relative;
    margin: 0 -2px 2px;
    padding-bottom: 12px;
}

body[data-ui-theme="trendfirst-brand"] .rail.expanded .rail-header,
body:not([data-ui-theme]) .rail.expanded .rail-header {
    min-height: 72px;
    padding-bottom: 14px;
}

body[data-ui-theme="trendfirst-brand"] .rail .rail-header::after,
body:not([data-ui-theme]) .rail .rail-header::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

body[data-ui-theme="trendfirst-brand"] .rail .rail-nav,
body:not([data-ui-theme]) .rail .rail-nav {
    gap: 2px;
    padding-top: 6px;
}

body[data-ui-theme="trendfirst-brand"] .rail .nav-item,
body:not([data-ui-theme]) .rail .nav-item {
    height: 40px;
    border-radius: 8px;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

body[data-ui-theme="trendfirst-brand"] .rail .nav-item .nav-icon,
body:not([data-ui-theme]) .rail .nav-item .nav-icon {
    color: #64748b;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    transition: color 0.15s ease;
}

body[data-ui-theme="trendfirst-brand"] .rail .nav-item .nav-label,
body:not([data-ui-theme]) .rail .nav-item .nav-label {
    font-weight: 500;
    font-size: 13.5px;
}

body[data-ui-theme="trendfirst-brand"] .rail .nav-item:hover,
body:not([data-ui-theme]) .rail .nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    border-color: transparent;
    box-shadow: none;
}

body[data-ui-theme="trendfirst-brand"] .rail .nav-item:hover .nav-icon,
body:not([data-ui-theme]) .rail .nav-item:hover .nav-icon {
    color: #cbd5e1;
}

body[data-ui-theme="trendfirst-brand"] .rail .nav-item.active,
body:not([data-ui-theme]) .rail .nav-item.active {
    background: rgba(255, 122, 0, 0.12);
    color: #ffffff;
    border-color: rgba(255, 122, 0, 0.2);
    box-shadow: none;
    font-weight: 600;
}

body[data-ui-theme="trendfirst-brand"] .rail .nav-item.active .nav-icon,
body[data-ui-theme="trendfirst-brand"] .rail .nav-item.active .nav-label,
body[data-ui-theme="trendfirst-brand"] .rail .nav-item.active .nav-arrow,
body:not([data-ui-theme]) .rail .nav-item.active .nav-icon,
body:not([data-ui-theme]) .rail .nav-item.active .nav-label,
body:not([data-ui-theme]) .rail .nav-item.active .nav-arrow {
    color: #ffffff;
}

body[data-ui-theme="trendfirst-brand"] .rail .nav-item.active .nav-icon,
body:not([data-ui-theme]) .rail .nav-item.active .nav-icon {
    color: var(--brand-orange, #ff7a00);
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

body[data-ui-theme="trendfirst-brand"] .rail .nav-item:hover .nav-arrow,
body:not([data-ui-theme]) .rail .nav-item:hover .nav-arrow {
    color: #cbd5e1;
}

body[data-ui-theme="trendfirst-brand"] .rail .nav-arrow,
body:not([data-ui-theme]) .rail .nav-arrow {
    color: #64748b;
    opacity: 0.85;
}

body[data-ui-theme="trendfirst-brand"] .rail .nav-sep,
body:not([data-ui-theme]) .rail .nav-sep {
    height: 1px;
    margin: 8px 12px;
    background: rgba(255, 255, 255, 0.07);
}

body[data-ui-theme="trendfirst-brand"] .rail .subnav,
body:not([data-ui-theme]) .rail .subnav {
    gap: 1px;
    padding: 4px 0 4px 14px;
    margin: 0 0 2px 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.07);
}

body[data-ui-theme="trendfirst-brand"] .rail .subnav-item,
body:not([data-ui-theme]) .rail .subnav-item {
    height: 30px;
    border-radius: 6px;
    color: #94a3b8;
    font-size: 12.5px;
    font-weight: 500;
    padding: 0 10px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body[data-ui-theme="trendfirst-brand"] .rail .subnav-item:hover,
body:not([data-ui-theme]) .rail .subnav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
}

body[data-ui-theme="trendfirst-brand"] .rail .subnav-item.active,
body:not([data-ui-theme]) .rail .subnav-item.active {
    background: transparent;
    color: var(--brand-orange, #ff7a00);
    font-weight: 600;
}

body[data-ui-theme="trendfirst-brand"] .rail:not(.expanded) .nav-item.has-sub .nav-arrow,
body:not([data-ui-theme]) .rail:not(.expanded) .nav-item.has-sub .nav-arrow {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    box-shadow: none;
}

body[data-ui-theme="trendfirst-brand"] .rail:not(.expanded) .nav-item.has-sub.active .nav-arrow,
body:not([data-ui-theme]) .rail:not(.expanded) .nav-item.has-sub.active .nav-arrow {
    background: rgba(255, 122, 0, 0.16);
    border-color: transparent;
    color: var(--brand-orange, #ff7a00);
}

body[data-ui-theme="trendfirst-brand"] .rail .rail-bottom,
body:not([data-ui-theme]) .rail .rail-bottom {
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

body[data-ui-theme="trendfirst-brand"] .rail .user-trigger,
body:not([data-ui-theme]) .rail .user-trigger {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: var(--shell-text-active);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-ui-theme="trendfirst-brand"] .rail .user-trigger:hover,
body:not([data-ui-theme]) .rail .user-trigger:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(253, 186, 116, 0.35);
}

body[data-ui-theme="trendfirst-brand"] .rail .rail-user,
body:not([data-ui-theme]) .rail .rail-user {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fdba74;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body[data-ui-theme="trendfirst-brand"] .rail .user-trigger:hover .rail-user,
body:not([data-ui-theme]) .rail .user-trigger:hover .rail-user {
    border-color: rgba(253, 186, 116, 0.45);
    color: #fdba74;
    background: linear-gradient(145deg, #243044 0%, #111827 100%);
}

body[data-ui-theme="trendfirst-brand"] .rail .user-meta strong,
body:not([data-ui-theme]) .rail .user-meta strong {
    color: #f8fafc;
}

body[data-ui-theme="trendfirst-brand"] .rail .user-meta span,
body:not([data-ui-theme]) .rail .user-meta span {
    color: #94a3b8;
}

body[data-ui-theme="trendfirst-brand"] .rail .sidebar-toggle--edge,
body:not([data-ui-theme]) .rail .sidebar-toggle--edge {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #64748b;
    box-shadow:
        0 2px 8px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.95) inset;
}

body[data-ui-theme="trendfirst-brand"] .rail .sidebar-toggle--edge:hover,
body:not([data-ui-theme]) .rail .sidebar-toggle--edge:hover {
    background: var(--action-primary-soft, #fff4ec);
    border-color: var(--action-primary-border, #fdba74);
    color: var(--action-primary, #c2410c);
    box-shadow:
        0 4px 12px rgba(194, 65, 12, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.95) inset;
}

body[data-ui-theme="trendfirst-brand"] .layout-theme-choice.is-selected,
body:not([data-ui-theme]) .layout-theme-choice.is-selected {
    border-color: var(--action-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--action-primary) 14%, transparent);
}

body[data-ui-theme] {
    /* 答卷列表语义色：跨主题固定，不随主题主色漂移 */
    --ui-list-tone-blue: #2563eb;
    --ui-list-tone-green: #059669;
    --ui-list-tone-orange: #ea580c;
    --ui-list-tone-purple: #7c3aed;
    --ui-list-tone-red: #dc2626;
    --ui-list-tone-amber: #d97706;
    --ui-list-tone-gray: #64748b;
    --ui-list-tone-indigo: #6366f1;
    background-color: var(--ui-bg);
    color: var(--ui-text);
}

/* 右侧内容壳层：统一页面底 #F7F8FA，卡片保持白 */
body[data-ui-theme] .app-content-shell,
body[data-ui-theme] .app-content-main,
body[data-ui-theme] .workspace-shell,
body[data-ui-theme] .workspace-content {
    background-color: var(--ui-bg) !important;
}

.ui-theme-option {
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ui-theme-option:hover {
    border-color: var(--ui-primary-border);
    box-shadow: var(--ui-shadow);
    transform: translateY(-1px);
}

.ui-theme-option.is-selected {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-primary) 18%, transparent), var(--ui-shadow);
}

.ui-theme-swatch {
    background:
        linear-gradient(135deg, var(--preview-primary) 0 50%, var(--preview-surface) 50% 100%);
}

.layout-theme-choice {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
    border: 1px solid var(--ui-border);
    border-radius: 0.5rem;
    background: var(--ui-surface);
    padding: 0.375rem;
    color: var(--ui-text-muted);
    text-align: left;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.layout-theme-choice:hover {
    border-color: var(--ui-primary-border);
    color: var(--ui-primary);
    transform: translateY(-1px);
}

.layout-theme-choice.is-selected {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-primary) 16%, transparent);
    color: var(--ui-primary);
}

.layout-theme-choice__swatch {
    display: block;
    height: 1.375rem;
    border: 1px solid var(--ui-border);
    border-radius: 0.375rem;
    background:
        linear-gradient(135deg, var(--preview-primary) 0 50%, var(--preview-surface) 50% 100%);
}

.layout-theme-choice__label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.15;
}