:root {
    --theme-background: var(--theme-surface-secondary);
    --theme-card-radius: 12px;
    --theme-card-shadow: var(--theme-shadow-sm);
    --theme-card-border: var(--theme-border-primary);
    --theme-card-hover-shadow: var(--theme-shadow-md);
    --theme-button-radius: 10px;
    --theme-button-transform: translateY(-1px);
    --theme-input-radius: 10px;
    --theme-table-radius: 10px;
    --theme-table-header-bg: var(--theme-surface-secondary);
    --theme-table-row-hover-bg: var(--theme-surface-hover);
    --theme-sidebar-shadow: inset -1px 0 0 var(--theme-nav-border);
    --theme-sidebar-header-bg: var(--theme-nav-bg-raised);
    --theme-sidebar-block-radius: 18px;
    --theme-nav-item-radius: 14px;
    --theme-badge-radius: 999px;
    --theme-alert-radius: 16px;
    --theme-focus-ring-color: rgba(46, 125, 50, 0.18);
    --theme-glass-blur: none;
    --theme-card-bg: var(--theme-surface-primary);
    --theme-card-header-bg: transparent;
    --theme-input-bg: var(--theme-surface-primary);
    --theme-input-border: var(--theme-border-muted);
    --theme-input-focus-border: var(--theme-accent);
    --theme-input-focus-shadow: 0 0 0 4px var(--theme-focus-ring-color);
    --theme-chart-1: #2e7d32;
    --theme-chart-2: #66bb6a;
    --theme-chart-3: #1565c0;
    --theme-chart-4: #42a5f5;
    --theme-chart-5: #8d6e63;
    --theme-chart-6: #c8a165;
    --theme-chart-text: var(--theme-text-muted);
    --theme-chart-grid: var(--theme-border-light);
}

html[data-theme] {
    color-scheme: light;
    background: var(--theme-background);
}

html[data-theme],
html[data-theme] body,
html[data-theme] .trace-shell,
html[data-theme] .trace-content,
html[data-theme] .trace-page-frame,
html[data-theme] .auth-shell {
    background: var(--theme-background);
    color: var(--theme-text-strong);
    transition: background-color 0.22s ease, color 0.22s ease;
}

html[data-theme] body {
    font-family: var(--font-family-sans);
}

html[data-theme="carbon-dark"],
html[data-theme="hydrogen-mint"],
html[data-theme="climate-audit"] {
    --gs-emerald-50: var(--theme-primary-soft);
    --gs-emerald-100: var(--theme-primary-soft-strong);
    --gs-success-50: var(--theme-success-soft);
    --gs-warning-50: var(--theme-warning-soft);
    --gs-danger-50: var(--theme-danger-soft);
    --gs-gold-50: var(--theme-warning-soft);
    --gs-gold-200: color-mix(in srgb, var(--theme-warning-accent) 36%, var(--theme-border-light));
    --gs-gold-400: color-mix(in srgb, var(--theme-warning-accent) 72%, var(--theme-border-light));
    --gs-gold-500: var(--theme-warning-accent);
    --gs-gold-600: color-mix(in srgb, var(--theme-warning-accent) 86%, var(--theme-text-primary));
    --gs-success-500: var(--theme-success-accent);
    --gs-warning-500: var(--theme-warning-accent);
    --gs-danger-500: var(--theme-danger-accent);
}

html[data-theme] a {
    color: var(--theme-primary);
}

html[data-theme] a:hover,
html[data-theme] a:focus {
    color: var(--theme-primary-hover);
}

html[data-theme] .trace-sidebar {
    background: var(--trace-menu-bg);
    box-shadow: var(--theme-sidebar-shadow);
    color: var(--trace-menu-text);
}

html[data-theme] .trace-sidebar-header,
html[data-theme] .trace-user-panel,
html[data-theme] .trace-mobile-nav,
html[data-theme] .trace-mobile-panel-header {
    background: var(--theme-sidebar-header-bg);
    border-color: var(--trace-menu-border);
    backdrop-filter: var(--theme-glass-blur);
}

html[data-theme] .trace-nav-block {
    background: var(--trace-menu-surface);
    border-color: var(--trace-menu-border);
    border-radius: var(--theme-sidebar-block-radius);
    box-shadow: var(--theme-nav-block-shadow, none);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

html[data-theme] .trace-nav-group {
    border-top-color: var(--trace-menu-border);
}

html[data-theme] .trace-nav-group-toggle {
    border-radius: var(--theme-nav-item-radius);
    color: var(--trace-menu-text-muted);
}

html[data-theme] .trace-nav-group-toggle:hover {
    background: var(--theme-nav-toggle-hover-bg, var(--trace-menu-surface-strong));
    color: var(--trace-menu-text);
}

html[data-theme] .trace-navigation-item {
    border-radius: var(--theme-nav-item-radius);
    color: var(--trace-menu-text-muted);
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

html[data-theme] .trace-navigation-item:hover {
    background: var(--theme-nav-item-hover-bg, var(--trace-menu-surface));
    color: var(--trace-menu-text);
    transform: var(--theme-nav-hover-transform, none);
}

html[data-theme] .trace-navigation-item.active {
    background: var(--trace-menu-surface-strong);
    border-color: var(--trace-menu-border-strong);
    box-shadow: var(--theme-nav-active-shadow, none);
    color: var(--trace-menu-text);
}

html[data-theme] .trace-navigation-item.active::before {
    background: var(--trace-menu-active-bar);
}

html[data-theme] .trace-brand,
html[data-theme] .trace-brand:hover,
html[data-theme] .trace-user-name,
html[data-theme] .trace-user-link {
    color: var(--trace-menu-text);
}

html[data-theme] .trace-user-link,
html[data-theme] .trace-mobile-toggle {
    background: var(--theme-nav-action-bg, var(--trace-menu-surface));
    border-color: var(--trace-menu-border);
    border-radius: var(--theme-button-radius);
    color: var(--trace-menu-text);
}

html[data-theme] .trace-user-link:hover,
html[data-theme] .trace-mobile-toggle:hover {
    background: var(--theme-button-primary-hover-bg, var(--theme-primary-hover));
    border-color: var(--theme-button-primary-border-hover, var(--theme-primary-active));
    color: var(--theme-button-primary-text, var(--kendo-color-on-primary, #fff));
}

html[data-theme] .trace-user-avatar--initials {
    background: var(--theme-primary);
    border-radius: var(--theme-avatar-radius, 10px);
    color: var(--kendo-color-on-primary, #fff);
}

html[data-theme] .vvb-stage-card,
html[data-theme] .site-telemetry-export-panel,
html[data-theme] .vvb-project-detail-card,
html[data-theme] .vvb-site-detail-device-card,
html[data-theme] .vvb-pd-device-card,
html[data-theme] .vvb-card,
html[data-theme] .vvb-panel,
html[data-theme] .vvb-data-review-panel,
html[data-theme] .vvb-report-draft-panel,
html[data-theme] .vvb-site-audit-panel,
html[data-theme] .auth-card,
html[data-theme] .modal-content,
html[data-theme] .k-window,
html[data-theme] .k-dialog {
    background: var(--theme-card-bg);
    border-color: var(--theme-card-border);
    border-radius: var(--theme-card-radius);
    box-shadow: var(--theme-card-shadow);
    color: var(--theme-text-strong);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}

html[data-theme] .k-popup,
html[data-theme] .k-list-container,
html[data-theme] .k-menu-popup,
html[data-theme] .k-context-menu,
html[data-theme] .k-calendar,
html[data-theme] .k-tabstrip-content,
html[data-theme] .k-content {
    background: var(--theme-card-bg);
    border-color: var(--theme-card-border);
    color: var(--theme-text-strong);
}

html[data-theme] .k-list-container,
html[data-theme] .k-menu-popup,
html[data-theme] .k-context-menu,
html[data-theme] .k-calendar {
    border-radius: var(--theme-input-radius);
    box-shadow: var(--theme-card-shadow);
}

html[data-theme] .vvb-card-header,
html[data-theme] .vvb-stage-card-header,
html[data-theme] .k-window-titlebar,
html[data-theme] .modal-header {
    background: var(--theme-card-header-bg);
    border-color: var(--theme-border-light);
}

html[data-theme] .vvb-stage-card-body,
html[data-theme] .k-window-content,
html[data-theme] .k-dialog-content {
    background: transparent;
    color: var(--theme-text-strong);
}

html[data-theme] .vvb-document-detail-fact,
html[data-theme] .vvb-document-detail-annotation-item,
html[data-theme] .vvb-document-detail-version-item,
html[data-theme] .vvb-utility-invoice-preview-frame,
html[data-theme] .vvb-kpi,
html[data-theme] .vvb-card,
html[data-theme] .vvb-activity,
html[data-theme] .vvb-assignment-card,
html[data-theme] .vvb-stage-metric,
html[data-theme] .vvb-review-panel,
html[data-theme] .vvb-device-detail-links .vvb-device-link:hover,
html[data-theme] .vvb-document-review-card,
html[data-theme] .vvb-document-review-toggle,
html[data-theme] .vvb-document-side-card,
html[data-theme] .vvb-clar-inbox-panel,
html[data-theme] .vvb-clar-inbox-empty,
html[data-theme] .vvb-clar-thread-card,
html[data-theme] .vvb-clar-thread-toggle,
html[data-theme] .vvb-clar-thread-message,
html[data-theme] .vvb-clar-thread-meta-pill,
html[data-theme] .vvb-clar-thread-empty,
html[data-theme] .vvb-clar-qa-panel,
html[data-theme] .vvb-clar-modal-switch,
html[data-theme] .vvb-da-file-input::file-selector-button,
html[data-theme] .vvb-clar-card-footer,
html[data-theme] .vvb-contract-preview-card,
html[data-theme] .vvb-report-draft-required-action-icon,
html[data-theme] .vvb-report-draft-section-card,
html[data-theme] .vvb-report-draft-side-card,
html[data-theme] .vvb-report-finalisation-panel,
html[data-theme] .vvb-report-finalisation-side-card,
html[data-theme] .vvb-report-finalisation-document-preview,
html[data-theme] .vvb-report-approval-summary-facts div,
html[data-theme] .vvb-registry-submission-panel,
html[data-theme] .vvb-registry-submission-side-card,
html[data-theme] .vvb-site-audit-detail-card,
html[data-theme] .vvb-site-audit-severity-option,
html[data-theme] .vvb-device-table tr,
html[data-theme] .vvb-proponent-status-table tr,
html[data-theme] .vvb-proponent-project-table-grid tr,
html[data-theme] .vvb-remote-visit-card,
html[data-theme] .vvb-proponent-remote-visit-card,
html[data-theme] .vvb-remote-call-context-card,
html[data-theme] .vvb-remote-call-note-panel,
html[data-theme] .vvb-remote-call-map-card,
html[data-theme] .vvb-data-received-health-card,
html[data-theme] .vvb-data-received-scope-card,
html[data-theme] .vvb-data-received-document-card,
html[data-theme] .vvb-data-received-fact-card,
html[data-theme] .vvb-data-received-gauge-card,
html[data-theme] .vvb-data-received-document-list li,
html[data-theme] .vvb-data-received-scope-list li,
html[data-theme] .vvb-data-received-document-manifest-row,
html[data-theme] .trace-account-nav__list,
html[data-theme] .trace-account-card,
html[data-theme] .seed-version-badge,
html[data-theme] .vvb-project-clarification-grid .k-table-row,
html[data-theme] .vvb-data-review-grid .k-table-row,
html[data-theme] .vvb-document-review-inline-action.k-button,
html[data-theme] .vvb-project-sites-grid .k-table-row,
html[data-theme] .vvb-device-grid .k-table-row,
html[data-theme] .vvb-remote-call-action-buttons .k-button:not(.k-button-solid-primary),
html[data-theme] .vvb-remote-call-response-actions .k-button:not(.k-button-solid-primary),
html[data-theme] .vvb-remote-call-findings-grid .k-grid-header,
html[data-theme] .vvb-remote-call-findings-grid .k-grid-content,
html[data-theme] .vvb-document-detail-upload-widget .k-upload-dropzone,
html[data-theme] .vvb-clar-modal-upload-widget .k-upload-dropzone,
html[data-theme] .vvb-proponent-document-upload-window .k-upload-dropzone,
html[data-theme] .vvb-proponent-document-upload-widget .k-upload-dropzone,
html[data-theme] .vvb-project-overview-stat,
html[data-theme] .vvb-project-overview-panel,
html[data-theme] .vvb-project-overview-panel-head,
html[data-theme] .vvb-site-detail-stat,
html[data-theme] .vvb-site-detail-device-summary-item,
html[data-theme] .vvb-site-detail-device-note,
html[data-theme] .vvb-utility-invoice-upload-state,
html[data-theme] .ledger-coverage-banner,
html[data-theme] .ledger-coverage-item,
html[data-theme] .ledger-coverage-note,
html[data-theme] .ledger-breakdown-step,
html[data-theme] .ledger-breakdown-audit,
html[data-theme] .ledger-breakdown-summary,
html[data-theme] .project-location-section,
html[data-theme] .site-map-shell,
html[data-theme] .site-map-toolbar,
html[data-theme] .site-map-footer,
html[data-theme] .site-telemetry-export-check,
html[data-theme] .vvb-project-data-heatmap-corner,
html[data-theme] .vvb-project-data-heatmap-rule {
    background: var(--theme-surface-raised);
    border-color: var(--theme-border-light);
    color: var(--theme-text-strong);
}

html[data-theme] .vvb-document-grid-action-query,
html[data-theme] .vvb-document-grid-action-query:hover,
html[data-theme] .vvb-document-grid-action-query:focus-visible,
html[data-theme] .vvb-assignment-chip-stage-1,
html[data-theme] .vvb-assignment-chip-stage-4,
html[data-theme] .vvb-assignment-chip-stage-7,
html[data-theme] .vvb-assignment-chip-stage-10,
html[data-theme] .vvb-data-review-badge.is-warning,
html[data-theme] .vvb-report-draft-required-action:disabled,
html[data-theme] .vvb-report-draft-required-action[aria-disabled="true"],
html[data-theme] .vvb-report-draft-alert,
html[data-theme] .vvb-report-finalisation-alert,
html[data-theme] .vvb-report-finalisation-blocker-item,
html[data-theme] .vvb-registry-submission-banner,
html[data-theme] .vvb-proponent-summary-item.is-warning,
html[data-theme] .vvb-data-received-document-manifest-row.is-missing,
html[data-theme] .vvb-data-received-document-chip.is-missing,
html[data-theme] .site-telemetry-snapshot-problem.is-warning {
    background: var(--theme-warning-soft);
    border-color: color-mix(in srgb, var(--theme-warning-accent) 36%, var(--theme-border-light));
    color: var(--theme-text-primary);
}

html[data-theme] .vvb-data-review-spotlight.is-critical {
    background: var(--theme-danger-soft);
    border-color: color-mix(in srgb, var(--theme-danger-accent) 36%, var(--theme-border-light));
    color: var(--theme-text-primary);
}

html[data-theme] .vvb-data-review-spotlight.is-warning {
    background: var(--theme-warning-soft);
    border-color: color-mix(in srgb, var(--theme-warning-accent) 36%, var(--theme-border-light));
    color: var(--theme-text-primary);
}

html[data-theme] .vvb-clar-thread-message.is-proponent {
    background: var(--theme-surface-tint);
    border-color: var(--theme-border-muted);
    color: var(--theme-text-primary);
}

html[data-theme] .vvb-clar-modal-switch-track {
    background: var(--theme-surface-muted);
    box-shadow: inset 0 0 0 1px var(--theme-border-light);
}

html[data-theme] .vvb-clar-modal-switch-thumb {
    background: var(--theme-surface-raised);
    border: 1px solid var(--theme-border-light);
}

html[data-theme] .vvb-data-received-gauge {
    background:
        radial-gradient(circle at center, var(--theme-card-bg) 0 55%, transparent 56% 100%),
        var(--vvb-data-received-gauge-fill) calc(var(--vvb-data-received-gauge-value) * 1%);
}

html[data-theme] #proponentDocumentUploadType-list .k-list-item:hover,
html[data-theme] #proponentDocumentUploadType-list .k-hover {
    background: var(--theme-surface-tint);
    color: var(--theme-primary);
}

html[data-theme] .vvb-proponent-document-type-option-category {
    background: var(--theme-surface-muted);
    color: var(--theme-text-muted);
}

html[data-theme] .vvb-site-audit-input,
html[data-theme] .vvb-site-audit-select,
html[data-theme] .vvb-site-audit-textarea,
html[data-theme] .vvb-site-visit-note-textarea,
html[data-theme] .vvb-proponent-project-filter select,
html[data-theme] .vvb-site-audit-field .k-picker-solid,
html[data-theme] .vvb-report-finalisation-side-card textarea.form-control:focus {
    background: var(--theme-input-bg);
    border-color: var(--theme-input-border);
    color: var(--theme-input-text);
}

html[data-theme] .vvb-project-overview-panel-head,
html[data-theme] .site-map-toolbar,
html[data-theme] .site-map-footer,
html[data-theme] .vvb-project-data-heatmap-corner,
html[data-theme] .vvb-project-data-heatmap-rule {
    background: var(--theme-surface-secondary);
}

html[data-theme] .site-telemetry-export-check:has(input:checked) {
    background: color-mix(in srgb, var(--theme-success-accent) 9%, var(--theme-card-bg));
    border-color: color-mix(in srgb, var(--theme-success-accent) 34%, var(--theme-border-light));
    color: var(--theme-text-primary);
}

html[data-theme] .site-map-loading,
html[data-theme] .vvb-site-detail-map-loading {
    background: color-mix(in srgb, var(--theme-card-bg) 84%, transparent);
    color: var(--theme-text-strong);
}

html[data-theme] .vvb-project-data-heatmap-cell.is-empty,
html[data-theme] .vvb-project-data-heatmap-legend-cell.is-empty {
    background: var(--theme-surface-muted);
    border-color: var(--theme-border-light);
    color: var(--theme-text-subtle);
}

html[data-theme] .vvb-platform-organization-title,
html[data-theme] .vvb-dashboard-hero-title,
html[data-theme] .vvb-document-detail-title,
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3,
html[data-theme] h4,
html[data-theme] h5,
html[data-theme] h6 {
    color: var(--theme-text-primary);
}

html[data-theme] .vvb-platform-organization-subtitle,
html[data-theme] .vvb-dashboard-hero-subtitle,
html[data-theme] .vvb-document-detail-subtitle,
html[data-theme] .text-muted {
    color: var(--theme-text-muted) !important;
}

html[data-theme] .k-button,
html[data-theme] .btn,
html[data-theme] .login-btn,
html[data-theme] .vvb-hero-action,
html[data-theme] .vvb-workspace-action-btn,
html[data-theme] .vvb-platform-organizations-filter {
    border-radius: var(--theme-button-radius);
    transition: transform 0.16s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

html[data-theme] .k-button:hover,
html[data-theme] .btn:hover,
html[data-theme] .login-btn:hover,
html[data-theme] .vvb-hero-action:hover,
html[data-theme] .vvb-workspace-action-btn:hover,
html[data-theme] .vvb-platform-organizations-filter:hover {
    transform: var(--theme-button-transform);
}

html[data-theme] .k-button-solid-primary,
html[data-theme] .btn-primary,
html[data-theme] .login-btn,
html[data-theme] .vvb-hero-action.is-primary,
html[data-theme] .vvb-platform-organizations-filter.is-active {
    background: var(--theme-button-primary-bg, var(--theme-primary));
    border-color: var(--theme-button-primary-border);
    box-shadow: var(--theme-button-primary-shadow);
    color: var(--theme-button-primary-text, #fff);
}

html[data-theme] .k-button-solid-primary:hover,
html[data-theme] .k-button-solid-primary:focus,
html[data-theme] .btn-primary:hover,
html[data-theme] .btn-primary:focus,
html[data-theme] .login-btn:hover,
html[data-theme] .login-btn:focus,
html[data-theme] .vvb-hero-action.is-primary:hover,
html[data-theme] .vvb-hero-action.is-primary:focus {
    background: var(--theme-button-primary-hover-bg, var(--theme-primary-hover));
    border-color: var(--theme-button-primary-border-hover);
    color: var(--theme-button-primary-text, #fff);
}

html[data-theme] .k-button-solid-base,
html[data-theme] .btn-light,
html[data-theme] .btn-secondary,
html[data-theme] .vvb-hero-action.is-secondary {
    background: var(--theme-button-base-bg, var(--theme-surface-primary));
    border-color: var(--theme-border-muted);
    color: var(--theme-text-secondary);
}

html[data-theme] .k-button-solid-base:hover,
html[data-theme] .k-button-solid-base:focus,
html[data-theme] .btn-light:hover,
html[data-theme] .btn-light:focus,
html[data-theme] .btn-secondary:hover,
html[data-theme] .btn-secondary:focus,
html[data-theme] .vvb-hero-action.is-secondary:hover,
html[data-theme] .vvb-hero-action.is-secondary:focus {
    background: var(--theme-button-base-hover-bg, var(--theme-surface-hover));
    border-color: var(--theme-button-base-border-hover);
    color: var(--theme-text-primary);
}

html[data-theme] .form-control,
html[data-theme] .form-select,
html[data-theme] .k-input,
html[data-theme] .k-input-solid,
html[data-theme] .k-picker,
html[data-theme] .k-dropdownlist,
html[data-theme] .k-multiselect,
html[data-theme] .k-multiselect .k-input-values,
html[data-theme] .k-textbox,
html[data-theme] .select2-container .select2-selection {
    background: var(--theme-input-bg);
    border-color: var(--theme-input-border);
    border-radius: var(--theme-input-radius);
    color: var(--theme-text-strong);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

html[data-theme] .form-control:focus,
html[data-theme] .form-select:focus,
html[data-theme] .k-input:focus,
html[data-theme] .k-input.k-focus,
html[data-theme] .k-input-solid.k-focus,
html[data-theme] .k-picker.k-focus,
html[data-theme] .k-dropdownlist.k-focus,
html[data-theme] .k-multiselect.k-focus,
html[data-theme] .k-textbox:focus,
html[data-theme] .select2-container--focus .select2-selection {
    background: var(--theme-input-bg);
    border-color: var(--theme-input-focus-border);
    box-shadow: var(--theme-input-focus-shadow);
    color: var(--theme-text-strong);
    outline: none;
}

html[data-theme] .k-grid,
html[data-theme] .k-list,
html[data-theme] .k-popup,
html[data-theme] .k-list-ul,
html[data-theme] .k-list-content,
html[data-theme] .k-list-item,
html[data-theme] .table {
    background: var(--theme-card-bg);
    border-color: var(--theme-card-border);
    color: var(--theme-text-strong);
}

html[data-theme] .k-list-item:hover,
html[data-theme] .k-list-item.k-hover,
html[data-theme] .k-list-item.k-focus,
html[data-theme] .k-list-item.k-selected,
html[data-theme] .k-chip,
html[data-theme] .k-chip:hover,
html[data-theme] .k-chip.k-hover {
    background: var(--theme-surface-tint);
    border-color: var(--theme-border-muted);
    color: var(--theme-text-primary);
}

html[data-theme] .k-grid,
html[data-theme] .table-responsive {
    border-radius: var(--theme-table-radius);
    box-shadow: var(--theme-table-shadow, none);
    overflow: hidden;
}

html[data-theme] .k-grid-header,
html[data-theme] .k-table-thead,
html[data-theme] .vvb-document-grid .k-table-th,
html[data-theme] .table thead {
    background: var(--theme-table-header-bg);
    color: var(--theme-text-secondary);
}

html[data-theme] .k-grid-header {
    border-bottom: 1px solid var(--theme-border-primary);
}

html[data-theme] .k-grid-header .k-table-th,
html[data-theme] .k-grid-header .k-header {
    box-shadow: inset 0 -1px 0 var(--theme-border-primary);
}

html[data-theme] .k-table-th,
html[data-theme] .k-table-td,
html[data-theme] .table th,
html[data-theme] .table td {
    border-color: var(--theme-border-light);
}

html[data-theme] .k-table-tbody > .k-table-row:hover,
html[data-theme] .table tbody tr:hover {
    background: var(--theme-table-row-hover-bg);
}

html[data-theme] .k-pager,
html[data-theme] .pagination {
    background: var(--theme-card-bg);
    border-color: var(--theme-border-light);
    border-radius: var(--theme-button-radius);
}

html[data-theme] .badge,
html[data-theme] .k-badge,
html[data-theme] [class*="badge"],
html[data-theme] [class*="pill"] {
    border-radius: var(--theme-badge-radius);
}

html[data-theme] .alert,
html[data-theme] .k-notification,
html[data-theme] .trace-toast-notification {
    border-radius: var(--theme-alert-radius);
    box-shadow: var(--theme-alert-shadow, var(--theme-shadow-xs));
}

html[data-theme] .alert-success,
html[data-theme] .trace-toast-notification--success {
    background: var(--theme-success-soft);
    border-color: color-mix(in srgb, var(--theme-success-accent) 24%, transparent);
    color: var(--theme-success);
}

html[data-theme] .alert-danger,
html[data-theme] .trace-toast-notification--error {
    background: var(--theme-danger-soft);
    border-color: color-mix(in srgb, var(--theme-danger-accent) 24%, transparent);
    color: var(--theme-danger);
}

html[data-theme] .alert-warning,
html[data-theme] .trace-toast-notification--warning {
    background: var(--theme-warning-soft);
    border-color: color-mix(in srgb, var(--theme-warning-accent) 24%, transparent);
    color: var(--theme-warning);
}

html[data-theme] .alert-info,
html[data-theme] .trace-toast-notification--info {
    background: var(--theme-info-soft);
    border-color: color-mix(in srgb, var(--theme-info) 24%, transparent);
    color: var(--theme-info);
}

html[data-theme] .breadcrumb,
html[data-theme] .vvb-detail-breadcrumb {
    color: var(--theme-text-muted);
}

html[data-theme] .nav-tabs,
html[data-theme] .k-tabstrip-items-wrapper,
html[data-theme] .accordion,
html[data-theme] .k-panelbar {
    border-color: var(--theme-border-light);
}

html[data-theme] .nav-tabs .nav-link,
html[data-theme] .k-tabstrip-item,
html[data-theme] .accordion-button {
    border-radius: var(--theme-button-radius);
    color: var(--theme-text-secondary);
}

html[data-theme] .nav-tabs .nav-link.active,
html[data-theme] .k-tabstrip-item.k-active,
html[data-theme] .accordion-button:not(.collapsed) {
    background: var(--theme-surface-tint);
    color: var(--theme-primary);
}

html[data-theme] .k-chart,
html[data-theme] .project-summary-methodology-chart,
html[data-theme] .vvb-project-data-chart {
    color: var(--theme-chart-text);
}

.vvb-theme-management-card {
    grid-column: 1 / -1;
}

.theme-preview-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.theme-preview-card {
    appearance: none;
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-card-border);
    border-radius: var(--theme-card-radius);
    box-shadow: var(--theme-shadow-xs);
    color: var(--theme-text-strong);
    cursor: pointer;
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    text-align: left;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.theme-preview-card:hover {
    border-color: var(--theme-primary);
    box-shadow: var(--theme-card-hover-shadow);
    transform: translateY(-2px);
}

.theme-preview-card:focus-visible {
    border-color: var(--theme-primary);
    box-shadow: var(--theme-input-focus-shadow);
    outline: none;
}

.theme-preview-card.is-selected {
    border-color: var(--theme-primary);
    box-shadow: var(--theme-card-hover-shadow), inset 0 0 0 1px var(--theme-primary);
}

.theme-custom-option {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.theme-custom-preview-card {
    width: 100%;
}

.theme-preview-card-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.theme-preview-title {
    color: var(--theme-text-primary);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

.theme-selected-indicator {
    align-items: center;
    background: var(--theme-surface-muted);
    border: 1px solid var(--theme-border-muted);
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 22px;
    height: 22px;
    justify-content: center;
    width: 22px;
}

.theme-preview-card.is-selected .theme-selected-indicator {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
}

.theme-preview-card.is-selected .theme-selected-indicator::after {
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    content: "";
    height: 10px;
    transform: rotate(45deg) translate(-1px, -1px);
    width: 6px;
}

.theme-mini-preview {
    background: var(--preview-bg);
    border: 1px solid color-mix(in srgb, var(--preview-primary) 24%, transparent);
    border-radius: calc(var(--theme-card-radius) - 6px);
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 122px;
    overflow: hidden;
}

.theme-mini-sidebar {
    background: var(--preview-sidebar);
    display: grid;
    gap: 8px;
    padding: 14px 10px;
}

.theme-mini-sidebar span {
    background: color-mix(in srgb, var(--preview-primary) 48%, var(--preview-surface));
    border-radius: 999px;
    height: 8px;
}

.theme-mini-sidebar span:first-child {
    background: var(--preview-accent);
}

.theme-mini-workspace {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.theme-mini-card {
    background: var(--preview-surface);
    border: 1px solid color-mix(in srgb, var(--preview-text) 10%, transparent);
    border-radius: calc(var(--theme-card-radius) - 8px);
    display: grid;
    padding: 12px;
}

.theme-mini-chart {
    align-items: end;
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, 1fr);
    height: 42px;
}

.theme-mini-chart span {
    background: var(--preview-primary);
    border-radius: 999px 999px 3px 3px;
    min-height: 18px;
}

.theme-mini-chart span:nth-child(2) {
    background: var(--preview-accent);
    min-height: 32px;
}

.theme-mini-chart span:nth-child(3) {
    background: color-mix(in srgb, var(--preview-primary) 70%, var(--preview-accent));
    min-height: 24px;
}

.theme-mini-table {
    display: grid;
    gap: 5px;
}

.theme-mini-table span {
    background: color-mix(in srgb, var(--preview-text) 14%, var(--preview-surface));
    border-radius: 999px;
    height: 6px;
}

.theme-preview-swatches {
    display: grid;
    gap: 8px;
}

.theme-swatch-item {
    align-items: center;
    color: var(--theme-text-secondary);
    display: flex;
    font-size: 12px;
    font-weight: 700;
    gap: 8px;
    min-width: 0;
}

.theme-swatch {
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    flex: 0 0 18px;
    height: 18px;
    width: 18px;
}

.theme-preview-component-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.theme-preview-button,
.theme-preview-badge {
    align-items: center;
    border-radius: var(--theme-button-radius);
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    justify-content: center;
    min-height: 30px;
    padding: 0 10px;
}

.theme-preview-button.is-primary {
    background: var(--theme-button-primary-bg, var(--theme-primary));
    color: var(--theme-button-primary-text, #fff);
}

.theme-preview-button.is-secondary {
    background: var(--theme-button-base-bg, var(--theme-surface-primary));
    border: 1px solid var(--theme-border-muted);
    color: var(--theme-text-secondary);
}

.theme-preview-badge {
    background: var(--theme-success-soft);
    color: var(--theme-success);
}

.theme-preview-table {
    border: 1px solid var(--theme-border-light);
    border-radius: calc(var(--theme-table-radius) - 4px);
    display: grid;
    overflow: hidden;
}

.theme-preview-table-row {
    display: grid;
    font-size: 11px;
    font-weight: 700;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 8px 10px;
}

.theme-preview-table-row.is-head {
    background: var(--theme-table-header-bg);
    color: var(--theme-text-muted);
    text-transform: uppercase;
}

.theme-custom-controls {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.theme-custom-color-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.theme-custom-color-label {
    color: var(--theme-text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.theme-custom-color-input-row {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.theme-custom-color-input-row input[type="color"] {
    appearance: none;
    background: var(--theme-input-bg);
    border: 1px solid var(--theme-input-border);
    border-radius: 8px;
    cursor: pointer;
    flex: 0 0 38px;
    height: 32px;
    padding: 3px;
    width: 38px;
}

.theme-custom-color-input-row input[type="color"]:focus-visible {
    border-color: var(--theme-input-focus-border);
    box-shadow: var(--theme-input-focus-shadow);
    outline: none;
}

.theme-custom-color-input-row input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.theme-custom-color-input-row input[type="color"]::-webkit-color-swatch,
.theme-custom-color-input-row input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: 5px;
}

.theme-custom-color-value {
    color: var(--theme-text-secondary);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    min-width: 0;
}

@media (max-width: 1399.98px) {
    .theme-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .theme-preview-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme] *,
    html[data-theme] *::before,
    html[data-theme] *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}