:root {
    color-scheme: dark;
    --nx-color-background: #000000;
    --nx-color-background-accent: rgb(37 99 235 / 16%);
    --nx-color-surface: #080b10;
    --nx-color-surface-raised: #0e131b;
    --nx-color-surface-soft: #151c27;
    --nx-color-border: #263244;
    --nx-color-border-strong: #3a4a60;
    --nx-color-text: #f7f9fc;
    --nx-color-text-muted: #aab6c7;
    --nx-color-text-subtle: #78869a;
    --nx-color-accent: #60a5fa;
    --nx-color-accent-strong: #2563eb;
    --nx-color-accent-hover: #1d4ed8;
    --nx-color-accent-soft: rgb(59 130 246 / 18%);
    --nx-color-on-accent: #ffffff;
    --nx-color-success: #4ade80;
    --nx-color-success-soft: rgb(34 197 94 / 15%);
    --nx-color-warning: #fbbf24;
    --nx-color-warning-soft: rgb(245 158 11 / 15%);
    --nx-color-danger: #fb7185;
    --nx-color-danger-soft: rgb(244 63 94 / 15%);
    --nx-color-overlay: rgb(0 0 0 / 82%);
    --nx-shadow-card: 0 18px 50px rgb(0 0 0 / 65%);
    --nx-shadow-popup: 0 30px 90px rgb(0 0 0 / 78%);
    --nx-radius-control: .6rem;
    --nx-radius-card: 1rem;
    --nx-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --nx-font-size-body: .9375rem;
    --nx-font-size-label: .875rem;
    --nx-font-size-small: .8125rem;
    --nx-font-size-caption: .75rem;
    --nx-line-height: 1.5;
    --nx-font-weight-body: 400;
    --nx-font-weight-label: 500;
    --nx-menu-color: var(--nx-color-text);
    --nx-menu-font-size: var(--nx-font-size-label);
    --nx-menu-font-weight: var(--nx-font-weight-label);
    --nx-field-label-size: var(--nx-form-label-size);
    --nx-form-label-size: .8125rem;
    --nx-form-label-tracking: .055em;
    --nx-form-label-color: var(--nx-color-text-muted);
    --nx-form-input-surface: color-mix(in srgb, var(--nx-color-surface-soft) 80%, var(--nx-panel-surface));
    --nx-form-input-border: color-mix(in srgb, var(--nx-color-border) 75%, var(--nx-color-surface-soft));
    --nx-form-input-hover-border: color-mix(in srgb, var(--nx-color-accent) 55%, var(--nx-color-border));
    --nx-list-row-height: 3.5rem;
    --nx-list-cell-padding: .75rem 1rem;

    /* Shared roles. Only theme palettes above/below contain literal colors. */
    --nx-color-danger-strong: color-mix(in srgb, var(--nx-color-danger) 78%, black);
    --nx-color-danger-hover: color-mix(in srgb, var(--nx-color-danger) 88%, black);
    --nx-content-surface: var(--nx-color-surface-raised);
    --nx-panel-surface: var(--nx-color-surface-raised);
    --nx-chrome-surface: color-mix(in srgb, var(--nx-color-surface-soft) 55%, var(--nx-panel-surface));
    --nx-navigation-surface: var(--nx-chrome-surface);
    --nx-chrome-background: var(--nx-chrome-surface);
    --nx-workspace-background: var(--nx-content-surface);
    --nx-toolbar-surface: var(--nx-panel-surface);
    --nx-list-divider: color-mix(in srgb, var(--nx-color-border) 65%, transparent);
    --nx-list-radius: var(--nx-radius-card);
    --nx-list-radius-small: .5rem;
    --nx-list-radius-large: 1rem;
    --nx-list-radius-full: 999px;
    --nx-list-selection-shadow: none;
    --nx-control-shadow: none;
    --nx-primary-shadow: none;
    --nx-focus-color: color-mix(in srgb, var(--nx-color-accent) 42%, transparent);
    --nx-drag-glow: color-mix(in srgb, var(--nx-color-accent) 70%, transparent);
    --nx-drag-surface: color-mix(in srgb, var(--nx-color-accent) 18%, var(--nx-panel-surface));
    --nx-drag-shadow-color: color-mix(in srgb, var(--nx-color-accent) 22%, transparent);
    --nx-drop-shadow-color: color-mix(in srgb, var(--nx-color-accent) 16%, transparent);
    --nx-on-accent-divider: color-mix(in srgb, var(--nx-color-on-accent) 30%, transparent);
    --nx-indicator-weight: var(--nx-font-weight-label);
    --nx-text-edit-hover-border: var(--nx-input-hover-border);
    --nx-text-area-hover-border: var(--nx-input-hover-border);
    --nx-combo-box-hover-border: var(--nx-input-hover-border);
    --nx-text-area-padding: .72rem 2.85rem .72rem .85rem;
    --nx-text-area-min-height: 6rem;
    --nx-text-area-max-height: 18rem;
    --nx-menu-item-height: 2.75rem;
    --nx-menu-item-padding: .6rem .7rem;
    --nx-menu-item-radius: var(--nx-radius-control);
    --nx-toolbar-padding: 1rem;
    --nx-toolbar-gap: .75rem;
    --nx-checklist-row-height: 2rem;
    --nx-list-surface: var(--nx-panel-surface);
    --nx-list-header-surface: var(--nx-chrome-surface);
    --nx-tree-list-color: var(--nx-color-text);
    --nx-tree-list-muted: var(--nx-color-text-muted);
    --nx-tree-list-border: var(--nx-color-border);
    --nx-tree-list-surface: var(--nx-list-surface);
    --nx-tree-list-header-surface: var(--nx-list-header-surface);
    --nx-tree-list-accent: var(--nx-color-accent);
    --nx-tree-list-danger: var(--nx-color-danger);
    --nx-input-surface: var(--nx-color-surface);
    --nx-input-color: var(--nx-color-text);
    --nx-input-border: var(--nx-color-border-strong);
    --nx-input-hover-border: var(--nx-color-text-muted);
    --nx-input-placeholder: var(--nx-color-text-subtle);
    --nx-input-readonly-surface: var(--nx-color-surface-soft);
    --nx-control-height: 2.75rem;
    --nx-control-padding: .65rem .8rem;
    --nx-field-spacing: .75rem;
    --nx-heading-size: 1rem;
    --nx-heading-weight: 600;
    --nx-focus-ring: 0 0 0 3px color-mix(in srgb, var(--nx-color-accent) 22%, transparent);
    --nx-selection-surface: var(--nx-color-accent-soft);
    --nx-selection-border: color-mix(in srgb, var(--nx-color-accent) 35%, var(--nx-color-border));
    --nx-hover-surface: var(--nx-color-surface-soft);
    --nx-card-surface: var(--nx-panel-surface);
    --nx-card-header-surface: var(--nx-chrome-background);
    --nx-card-footer-surface: var(--nx-chrome-background);
    --nx-editor-surface: var(--nx-panel-surface);
    --nx-editor-body-padding: .5rem;
    --nx-editor-body-outline: 1px solid var(--nx-color-border);
    --nx-editor-field-gap: .25rem;
    --nx-editor-label-color: var(--nx-color-text-muted);
    --nx-editor-label-weight: var(--nx-heading-weight);
    --nx-editor-header-surface: var(--nx-chrome-background);
    --nx-editor-footer-surface: var(--nx-chrome-background);

    /* Component aliases are public and can be overridden at any ancestor. */
    --nx-popup-surface: var(--nx-panel-surface);
    --nx-popup-inset: .75rem;
    --nx-popup-field-spacing: .65rem;
    --nx-popup-header-padding: .5rem var(--nx-popup-inset);
    --nx-popup-body-padding: .5rem;
    --nx-popup-footer-padding: .5rem var(--nx-popup-inset);
    --nx-popup-radius: .85rem;
    --nx-popup-header-surface: var(--nx-chrome-background);
    --nx-popup-footer-surface: var(--nx-chrome-background);
    --nx-popup-border: var(--nx-color-border);
    --nx-popup-color: var(--nx-color-text);
    --nx-popup-accent: var(--nx-color-accent);
    --nx-popup-shadow: var(--nx-shadow-popup);
    --nx-date-time-color: var(--nx-input-color);
    --nx-date-time-button-width: 2.1rem;
    --nx-date-time-period-width: calc(2ch + .5rem);
    --nx-date-time-period-gap: .15rem;
    --nx-date-time-surface: var(--nx-input-surface);
    --nx-date-time-border: var(--nx-input-border);
    --nx-date-time-muted: var(--nx-color-text-muted);
    --nx-date-time-selection: var(--nx-color-accent-soft);
    --nx-date-time-soft: var(--nx-color-surface-soft);
    --nx-date-time-accent: var(--nx-color-accent);
    --nx-text-edit-color: var(--nx-input-color);
    --nx-text-edit-surface: var(--nx-input-surface);
    --nx-text-edit-readonly-surface: var(--nx-input-readonly-surface);
    --nx-text-edit-border: var(--nx-input-border);
    --nx-text-edit-placeholder: var(--nx-input-placeholder);
    --nx-text-edit-accent: var(--nx-color-accent);
    --nx-text-area-color: var(--nx-input-color);
    --nx-text-area-surface: var(--nx-input-surface);
    --nx-text-area-readonly-surface: var(--nx-input-readonly-surface);
    --nx-text-area-border: var(--nx-input-border);
    --nx-text-area-placeholder: var(--nx-input-placeholder);
    --nx-text-area-muted: var(--nx-color-text-muted);
    --nx-text-area-accent: var(--nx-color-accent);
    --nx-combo-box-color: var(--nx-input-color);
    --nx-combo-box-surface: var(--nx-input-surface);
    --nx-combo-box-dropdown-surface: var(--nx-color-surface-raised);
    --nx-combo-box-readonly-surface: var(--nx-input-readonly-surface);
    --nx-combo-box-border: var(--nx-input-border);
    --nx-combo-box-placeholder: var(--nx-input-placeholder);
    --nx-combo-box-muted: var(--nx-color-text-muted);
    --nx-combo-box-accent: var(--nx-color-accent);
    --nx-combo-box-selection: var(--nx-color-accent-soft);
    --nx-combo-box-shadow: var(--nx-shadow-popup);
    --nx-drop-down-color: var(--nx-color-text);
    --nx-drop-down-trigger-surface: var(--nx-button-surface);
    --nx-drop-down-surface: var(--nx-color-surface-raised);
    --nx-drop-down-border: var(--nx-color-border-strong);
    --nx-drop-down-muted: var(--nx-color-text-muted);
    --nx-drop-down-accent: var(--nx-color-accent);
    --nx-drop-down-shadow: var(--nx-shadow-popup);
    --nx-page-surface: var(--nx-content-surface);
    --nx-page-header-surface: var(--nx-chrome-background);
    --nx-page-body-surface: var(--nx-workspace-background);
    --nx-page-footer-surface: var(--nx-chrome-background);
    --nx-page-drawer-surface: var(--nx-navigation-surface);
    --nx-page-border: var(--nx-color-border);
    --nx-page-color: var(--nx-color-text);
    --nx-page-overlay: var(--nx-color-overlay);
    --nx-button-color: var(--nx-color-text);
    --nx-button-font-size: var(--nx-font-size-label);
    --nx-button-height: 2.5rem;
    --nx-button-icon-size: 2.2rem;
    --nx-button-icon-padding: .3rem;
    --nx-button-padding: .58rem .85rem;
    --nx-button-hover-surface: color-mix(in srgb, var(--nx-color-accent) 11%, var(--nx-color-surface-soft));
    --nx-button-hover-border: var(--nx-color-accent);
    --nx-button-surface: var(--nx-color-surface-soft);
    --nx-button-border: var(--nx-color-border-strong);
    --nx-button-primary-surface: var(--nx-color-accent-strong);
    --nx-button-primary-border: var(--nx-color-accent-strong);
    --nx-button-primary-color: var(--nx-color-on-accent);
    --nx-button-focus: color-mix(in srgb, var(--nx-color-accent) 42%, transparent);
    --nx-alert-color: var(--nx-color-text);
    --nx-alert-surface: var(--nx-color-surface-raised);
    --nx-alert-border: var(--nx-color-border);
    --nx-alert-muted: var(--nx-color-text-muted);
    --nx-toast-color: var(--nx-color-text);
    --nx-toast-surface: var(--nx-color-surface-raised);
    --nx-toast-border: var(--nx-color-border);
    --nx-toast-muted: var(--nx-color-text-muted);
    --nx-toast-shadow: var(--nx-shadow-popup);
    --nx-message-box-color: var(--nx-color-text);
    --nx-message-box-surface: var(--nx-color-surface-raised);
    --nx-message-box-border: var(--nx-color-border);
    --nx-message-box-muted: var(--nx-color-text-muted);
    --nx-message-box-shadow: var(--nx-shadow-popup);
    --nx-prompt-color: var(--nx-color-text);
    --nx-prompt-surface: var(--nx-color-surface-raised);
    --nx-prompt-border: var(--nx-color-border);
    --nx-prompt-muted: var(--nx-color-text-muted);
    --nx-prompt-shadow: var(--nx-shadow-popup);
    --nx-tabs-color: var(--nx-color-text);
    --nx-tabs-image-filter: none;
    --nx-menu-image-filter: var(--nx-tabs-image-filter);
    --nx-tabs-muted: var(--nx-color-text-muted);
    --nx-tabs-surface: var(--nx-content-surface);
    --nx-tabs-navigation-surface: var(--nx-navigation-surface);
    --nx-tabs-tab-surface: var(--nx-hover-surface);
    --nx-tabs-border: var(--nx-color-border);
    --nx-tabs-accent: var(--nx-color-accent);
    --nx-tabs-selection: var(--nx-selection-surface);
    --nx-tabs-selection-border: var(--nx-selection-border);
    --nx-tabs-active-surface: transparent;
    --nx-tabs-font-size: var(--nx-font-size-label);
    --nx-tabs-font-weight: var(--nx-heading-weight);
    --nx-tabs-focus: color-mix(in srgb, var(--nx-color-accent) 42%, transparent);
    --nx-badge-neutral: var(--nx-color-text-muted);
    --nx-badge-neutral-soft: var(--nx-color-surface-soft);
    --nx-badge-accent: var(--nx-color-accent);
    --nx-badge-accent-soft: var(--nx-color-accent-soft);
    --nx-badge-success: var(--nx-color-success);
    --nx-badge-success-soft: var(--nx-color-success-soft);
    --nx-badge-warning: var(--nx-color-warning);
    --nx-badge-warning-soft: var(--nx-color-warning-soft);
    --nx-badge-danger: var(--nx-color-danger);
    --nx-badge-danger-soft: var(--nx-color-danger-soft);
    --nx-chip-neutral: var(--nx-color-text-muted);
    --nx-chip-neutral-soft: var(--nx-color-surface-soft);
    --nx-chip-accent: var(--nx-color-accent);
    --nx-chip-accent-soft: var(--nx-color-accent-soft);
    --nx-chip-success: var(--nx-color-success);
    --nx-chip-success-soft: var(--nx-color-success-soft);
    --nx-chip-warning: var(--nx-color-warning);
    --nx-chip-warning-soft: var(--nx-color-warning-soft);
    --nx-chip-danger: var(--nx-color-danger);
    --nx-chip-danger-soft: var(--nx-color-danger-soft);
    --nx-avatar-color: var(--nx-color-accent);
    --nx-avatar-surface: var(--nx-color-accent-soft);
    --nx-avatar-border: color-mix(in srgb, var(--nx-color-accent) 28%, var(--nx-color-border));
    --nx-avatar-status-border: var(--nx-color-surface-raised);
    --nx-avatar-online: var(--nx-color-success);
    --nx-avatar-away: var(--nx-color-warning);
    --nx-avatar-busy: var(--nx-color-danger);
    --nx-avatar-offline: var(--nx-color-text-subtle);
}

/* Obsidian: near-black workspace with deliberate, opaque elevation levels. */
:root[data-nx-theme="obsidian"] {
    color-scheme: dark;
    --nx-color-background: #020304;
    --nx-color-background-accent: transparent;
    --nx-color-surface: #040609;
    --nx-color-surface-raised: #080c11;
    --nx-color-surface-soft: #0d151e;
    --nx-color-border: #222c3a;
    --nx-color-border-strong: #334356;
    --nx-color-text: #edf3fc;
    --nx-color-text-muted: #b4c2d4;
    --nx-color-text-subtle: #8c9db3;
    --nx-color-accent: #89b9ff;
    --nx-color-accent-strong: #194096;
    --nx-color-accent-hover: #204fae;
    --nx-color-accent-soft: #0f1c30;
    --nx-color-on-accent: #ffffff;
    --nx-color-success: #77dbaa;
    --nx-color-success-soft: #142d26;
    --nx-color-warning: #ebc17d;
    --nx-color-warning-soft: #30281b;
    --nx-color-danger: #f699a8;
    --nx-color-danger-soft: #341e28;
    --nx-color-overlay: rgb(2 4 8 / 78%);
    --nx-content-surface: var(--nx-color-surface);
    --nx-panel-surface: var(--nx-color-surface-raised);
    --nx-chrome-surface: #0b1017;
    --nx-chrome-background: var(--nx-chrome-surface);
    --nx-navigation-surface: #080d13;
    --nx-workspace-background: var(--nx-content-surface);
    --nx-toolbar-surface: #0a0f16;
    --nx-list-header-surface: #0c121a;
    --nx-list-divider: #18212c;
    --nx-input-surface: #05090d;
    --nx-input-hover-border: #566e8c;
    --nx-selection-surface: var(--nx-color-accent-soft);
    --nx-selection-border: #3c5f8c;
    --nx-hover-surface: #0f1925;
    --nx-button-surface: #101927;
    --nx-button-hover-surface: #182538;
    --nx-button-hover-border: #567092;
    --nx-button-primary-surface: var(--nx-color-accent-strong);
    --nx-button-primary-hover-surface: var(--nx-color-accent-hover);
    --nx-shadow-card: 0 12px 32px rgb(0 0 0 / 24%);
    --nx-shadow-popup: 0 32px 96px rgb(0 0 0 / 70%);
    --nx-control-shadow: none;
    --nx-primary-shadow: none;
}

/* Black canvas, near-black panels, and gently tinted navigation/header/footer. */
:root[data-nx-theme="oled-classic"] {
    color-scheme: dark;
    --nx-color-background: #000000;
    --nx-color-background-accent: transparent;
    --nx-color-surface: #000000;
    --nx-color-surface-raised: #090d12;
    --nx-color-surface-soft: #141c27;
    --nx-color-border: #202a38;
    --nx-color-border-strong: #303e52;
    --nx-color-text: #f7f9fc;
    --nx-color-text-muted: #c2cbd6;
    --nx-color-text-subtle: #96a2b2;
    --nx-color-accent: #60a5fa;
    --nx-color-accent-strong: #2563eb;
    --nx-color-accent-hover: #1d4ed8;
    --nx-color-accent-soft: rgb(59 130 246 / 14%);
    --nx-color-on-accent: #ffffff;
    --nx-color-success: #4ade80;
    --nx-color-success-soft: rgb(34 197 94 / 12%);
    --nx-color-warning: #fbbf24;
    --nx-color-warning-soft: rgb(245 158 11 / 12%);
    --nx-color-danger: #fb7185;
    --nx-color-danger-soft: rgb(244 63 94 / 12%);
    --nx-color-overlay: rgb(0 0 0 / 82%);
    --nx-shadow-card: none;
    --nx-shadow-popup: 0 24px 70px rgb(0 0 0 / 80%);
    --nx-content-surface: var(--nx-color-surface);
    --nx-input-surface: #06090d;
}

:root[data-nx-theme="light"] {
    color-scheme: light;
    --nx-tabs-image-filter: brightness(.45) contrast(1.2);
    --nx-color-background: #f3f7fc;
    --nx-color-background-accent: rgb(37 99 235 / 10%);
    --nx-color-surface: #ffffff;
    --nx-color-surface-raised: #ffffff;
    --nx-color-surface-soft: #edf3fa;
    --nx-color-border: #d6e0ec;
    --nx-color-border-strong: #b9c7d8;
    --nx-color-text: #102036;
    --nx-color-text-muted: #52647b;
    --nx-color-text-subtle: #718198;
    --nx-color-accent: #2563eb;
    --nx-color-accent-strong: #1d4ed8;
    --nx-color-accent-hover: #1e40af;
    --nx-color-accent-soft: rgb(37 99 235 / 11%);
    --nx-color-success: #15803d;
    --nx-color-success-soft: #e4f7eb;
    --nx-color-warning: #a16207;
    --nx-color-warning-soft: #fff5d9;
    --nx-color-danger: #be123c;
    --nx-color-danger-soft: #ffe8ed;
    --nx-color-overlay: rgb(15 23 42 / 58%);
    --nx-shadow-card: 0 16px 42px rgb(30 50 80 / 10%);
    --nx-shadow-popup: 0 24px 65px rgb(15 23 42 / 28%);
}

:root[data-nx-theme="dark"],
:root[data-nx-theme="system"] {
    color-scheme: dark;
    --nx-color-background: #08111f;
    --nx-color-background-accent: rgb(37 99 235 / 18%);
    --nx-color-surface: #101b2d;
    --nx-color-surface-raised: #162338;
    --nx-color-surface-soft: #1b2a42;
    --nx-color-border: #2a3b55;
    --nx-color-border-strong: #3c5272;
    --nx-color-text: #f1f6ff;
    --nx-color-text-muted: #a8b6ca;
    --nx-color-text-subtle: #7f90a8;
    --nx-color-accent: #60a5fa;
    --nx-color-accent-strong: #3b82f6;
    --nx-color-accent-hover: #2563eb;
    --nx-color-accent-soft: rgb(59 130 246 / 18%);
    --nx-color-success: #4ade80;
    --nx-color-success-soft: rgb(34 197 94 / 16%);
    --nx-color-warning: #fbbf24;
    --nx-color-warning-soft: rgb(245 158 11 / 16%);
    --nx-color-danger: #fb7185;
    --nx-color-danger-soft: rgb(244 63 94 / 16%);
    --nx-color-overlay: rgb(2 8 23 / 72%);
    --nx-shadow-card: 0 18px 48px rgb(0 0 0 / 24%);
    --nx-shadow-popup: 0 28px 80px rgb(0 0 0 / 48%);
}

:root[data-nx-theme="office"] {
    color-scheme: light;
    --nx-tabs-image-filter: brightness(.45) contrast(1.2);
    --nx-color-background: #f5f5f5;
    --nx-color-background-accent: rgb(15 108 189 / 10%);
    --nx-color-surface: #ffffff;
    --nx-color-surface-raised: #ffffff;
    --nx-color-surface-soft: #f0f0f0;
    --nx-color-border: #d1d1d1;
    --nx-color-border-strong: #b3b3b3;
    --nx-color-text: #242424;
    --nx-color-text-muted: #616161;
    --nx-color-text-subtle: #767676;
    --nx-color-accent: #0f6cbd;
    --nx-color-accent-strong: #0f6cbd;
    --nx-color-accent-hover: #115ea3;
    --nx-color-accent-soft: rgb(15 108 189 / 11%);
    --nx-color-success: #107c10;
    --nx-color-success-soft: #e7f4e4;
    --nx-color-warning: #9d5d00;
    --nx-color-warning-soft: #fff4ce;
    --nx-color-danger: #c50f1f;
    --nx-color-danger-soft: #fde7e9;
    --nx-color-overlay: rgb(36 36 36 / 56%);
    --nx-shadow-card: 0 8px 24px rgb(0 0 0 / 10%);
    --nx-shadow-popup: 0 24px 65px rgb(0 0 0 / 26%);
}

:root[data-nx-theme="mist"] {
    color-scheme: light;
    --nx-tabs-image-filter: brightness(.45) contrast(1.2);
    --nx-color-background: #dce5e9;
    --nx-color-background-accent: rgb(55 111 126 / 10%);
    --nx-color-surface: #e8eef0;
    --nx-color-surface-raised: #f0f4f5;
    --nx-color-surface-soft: #d4dfe3;
    --nx-color-border: #b7c7cd;
    --nx-color-border-strong: #93a9b1;
    --nx-color-text: #1c3037;
    --nx-color-text-muted: #526970;
    --nx-color-text-subtle: #687d83;
    --nx-color-accent: #287a8d;
    --nx-color-accent-strong: #216879;
    --nx-color-accent-hover: #195766;
    --nx-color-accent-soft: rgb(40 122 141 / 13%);
    --nx-color-success: #367a50;
    --nx-color-success-soft: #d3e8da;
    --nx-color-warning: #91651f;
    --nx-color-warning-soft: #eee1c7;
    --nx-color-danger: #a34450;
    --nx-color-danger-soft: #efd8dc;
    --nx-color-overlay: rgb(27 45 52 / 55%);
    --nx-shadow-card: 0 14px 36px rgb(40 62 70 / 13%);
    --nx-shadow-popup: 0 22px 58px rgb(27 45 52 / 30%);
}

:root[data-nx-theme="sandstone"] {
    color-scheme: light;
    --nx-tabs-image-filter: brightness(.45) contrast(1.2);
    --nx-color-background: #e1d7c7;
    --nx-color-background-accent: rgb(153 91 52 / 9%);
    --nx-color-surface: #ede5d9;
    --nx-color-surface-raised: #f4ede3;
    --nx-color-surface-soft: #d9cdbb;
    --nx-color-border: #c1b19b;
    --nx-color-border-strong: #a18e75;
    --nx-color-text: #382c24;
    --nx-color-text-muted: #6f5d50;
    --nx-color-text-subtle: #837064;
    --nx-color-accent: #a05235;
    --nx-color-accent-strong: #88442d;
    --nx-color-accent-hover: #713824;
    --nx-color-accent-soft: rgb(160 82 53 / 13%);
    --nx-color-success: #59733d;
    --nx-color-success-soft: #dce3ca;
    --nx-color-warning: #93611c;
    --nx-color-warning-soft: #eee0bd;
    --nx-color-danger: #a13f3b;
    --nx-color-danger-soft: #edd2cd;
    --nx-color-overlay: rgb(56 44 36 / 57%);
    --nx-shadow-card: 0 14px 36px rgb(76 57 42 / 14%);
    --nx-shadow-popup: 0 22px 58px rgb(56 44 36 / 31%);
}

:root[data-nx-theme="vs-dark"] {
    color-scheme: dark;
    --nx-color-background: #181818;
    --nx-color-background-accent: rgb(0 122 204 / 12%);
    --nx-color-surface: #1f1f1f;
    --nx-color-surface-raised: #252526;
    --nx-color-surface-soft: #2d2d30;
    --nx-color-border: #3f3f46;
    --nx-color-border-strong: #55555c;
    --nx-color-text: #f1f1f1;
    --nx-color-text-muted: #c2c2c2;
    --nx-color-text-subtle: #969696;
    --nx-color-accent: #4daafc;
    --nx-color-accent-strong: #0078d4;
    --nx-color-accent-hover: #026ec1;
    --nx-color-accent-soft: rgb(0 122 204 / 20%);
    --nx-color-success: #89d185;
    --nx-color-success-soft: rgb(78 201 176 / 14%);
    --nx-color-warning: #cca700;
    --nx-color-warning-soft: rgb(204 167 0 / 14%);
    --nx-color-danger: #f48771;
    --nx-color-danger-soft: rgb(244 135 113 / 14%);
    --nx-color-overlay: rgb(0 0 0 / 68%);
    --nx-shadow-card: 0 16px 42px rgb(0 0 0 / 30%);
    --nx-shadow-popup: 0 28px 78px rgb(0 0 0 / 52%);
}

:root[data-nx-theme="graphite"] {
    color-scheme: dark;
    --nx-color-background: #111315;
    --nx-color-background-accent: rgb(122 162 247 / 11%);
    --nx-color-surface: #191c20;
    --nx-color-surface-raised: #20242a;
    --nx-color-surface-soft: #292e35;
    --nx-color-border: #383e47;
    --nx-color-border-strong: #505866;
    --nx-color-text: #f2f3f5;
    --nx-color-text-muted: #b5bbc5;
    --nx-color-text-subtle: #858d99;
    --nx-color-accent: #7aa2f7;
    --nx-color-accent-strong: #527edb;
    --nx-color-accent-hover: #4169c1;
    --nx-color-accent-soft: rgb(122 162 247 / 16%);
    --nx-color-success: #9ece6a;
    --nx-color-success-soft: rgb(158 206 106 / 14%);
    --nx-color-warning: #e0af68;
    --nx-color-warning-soft: rgb(224 175 104 / 14%);
    --nx-color-danger: #f7768e;
    --nx-color-danger-soft: rgb(247 118 142 / 14%);
    --nx-color-overlay: rgb(5 6 8 / 72%);
    --nx-shadow-card: 0 18px 46px rgb(0 0 0 / 28%);
    --nx-shadow-popup: 0 28px 80px rgb(0 0 0 / 50%);
}

:root[data-nx-theme="solarized-dark"] {
    color-scheme: dark;
    --nx-color-background: #002b36;
    --nx-color-background-accent: rgb(38 139 210 / 13%);
    --nx-color-surface: #073642;
    --nx-color-surface-raised: #0b414d;
    --nx-color-surface-soft: #124b56;
    --nx-color-border: #285763;
    --nx-color-border-strong: #3d6b75;
    --nx-color-text: #fdf6e3;
    --nx-color-text-muted: #b7c5c2;
    --nx-color-text-subtle: #93a1a1;
    --nx-color-accent: #52a9e0;
    --nx-color-accent-strong: #268bd2;
    --nx-color-accent-hover: #1f75b2;
    --nx-color-accent-soft: rgb(38 139 210 / 18%);
    --nx-color-success: #9fbf2f;
    --nx-color-success-soft: rgb(133 153 0 / 18%);
    --nx-color-warning: #e4b936;
    --nx-color-warning-soft: rgb(181 137 0 / 18%);
    --nx-color-danger: #ef6f6c;
    --nx-color-danger-soft: rgb(220 50 47 / 18%);
    --nx-color-overlay: rgb(0 24 30 / 76%);
    --nx-shadow-card: 0 18px 48px rgb(0 20 26 / 32%);
    --nx-shadow-popup: 0 28px 80px rgb(0 20 26 / 56%);
}

:root[data-nx-theme="aubergine"] {
    color-scheme: dark;
    --nx-color-background: #190f1d;
    --nx-color-background-accent: rgb(181 112 214 / 13%);
    --nx-color-surface: #24162a;
    --nx-color-surface-raised: #302038;
    --nx-color-surface-soft: #3b2944;
    --nx-color-border: #513b5c;
    --nx-color-border-strong: #6a4e77;
    --nx-color-text: #f7eff8;
    --nx-color-text-muted: #cbb8cf;
    --nx-color-text-subtle: #9d86a3;
    --nx-color-accent: #d19ae8;
    --nx-color-accent-strong: #a85dcc;
    --nx-color-accent-hover: #9146b5;
    --nx-color-accent-soft: rgb(181 112 214 / 18%);
    --nx-color-success: #86c985;
    --nx-color-success-soft: rgb(96 180 111 / 15%);
    --nx-color-warning: #e8bd69;
    --nx-color-warning-soft: rgb(224 167 67 / 15%);
    --nx-color-danger: #ef8495;
    --nx-color-danger-soft: rgb(225 83 108 / 16%);
    --nx-color-overlay: rgb(16 7 19 / 76%);
    --nx-shadow-card: 0 18px 48px rgb(7 2 9 / 34%);
    --nx-shadow-popup: 0 28px 80px rgb(7 2 9 / 58%);
}

:root[data-nx-theme="forest"] {
    color-scheme: dark;
    --nx-color-background: #0b1713;
    --nx-color-background-accent: rgb(54 179 126 / 12%);
    --nx-color-surface: #12231d;
    --nx-color-surface-raised: #193029;
    --nx-color-surface-soft: #213d34;
    --nx-color-border: #315448;
    --nx-color-border-strong: #456e60;
    --nx-color-text: #edf7f2;
    --nx-color-text-muted: #aec7bb;
    --nx-color-text-subtle: #7f9e90;
    --nx-color-accent: #67d6a5;
    --nx-color-accent-strong: #2eaa78;
    --nx-color-accent-hover: #248c63;
    --nx-color-accent-soft: rgb(54 179 126 / 18%);
    --nx-color-success: #75d28d;
    --nx-color-success-soft: rgb(76 190 111 / 16%);
    --nx-color-warning: #e4bf62;
    --nx-color-warning-soft: rgb(210 163 55 / 16%);
    --nx-color-danger: #ee7d79;
    --nx-color-danger-soft: rgb(222 83 78 / 16%);
    --nx-color-overlay: rgb(4 15 11 / 76%);
    --nx-shadow-card: 0 18px 48px rgb(0 8 5 / 32%);
    --nx-shadow-popup: 0 28px 80px rgb(0 8 5 / 56%);
}

@media (prefers-color-scheme: light) {
    :root[data-nx-theme="system"] {
        color-scheme: light;
        --nx-tabs-image-filter: brightness(.45) contrast(1.2);
        --nx-color-background: #f3f7fc;
        --nx-color-background-accent: rgb(37 99 235 / 10%);
        --nx-color-surface: #ffffff;
        --nx-color-surface-raised: #ffffff;
        --nx-color-surface-soft: #edf3fa;
        --nx-color-border: #d6e0ec;
        --nx-color-border-strong: #b9c7d8;
        --nx-color-text: #102036;
        --nx-color-text-muted: #52647b;
        --nx-color-text-subtle: #718198;
        --nx-color-accent: #2563eb;
        --nx-color-accent-strong: #1d4ed8;
        --nx-color-accent-hover: #1e40af;
        --nx-color-accent-soft: rgb(37 99 235 / 11%);
        --nx-color-success: #15803d;
        --nx-color-success-soft: #e4f7eb;
        --nx-color-warning: #a16207;
        --nx-color-warning-soft: #fff5d9;
        --nx-color-danger: #be123c;
        --nx-color-danger-soft: #ffe8ed;
        --nx-color-overlay: rgb(15 23 42 / 58%);
        --nx-shadow-card: 0 16px 42px rgb(30 50 80 / 10%);
        --nx-shadow-popup: 0 24px 65px rgb(15 23 42 / 28%);
    }
}

/* Tone-derived roles resolve on the indicator, where its semantic tone is known. */
.nx-badge { --nx-badge-outline-border: color-mix(in srgb, var(--nx-badge-tone) 40%, var(--nx-color-border)); }
.nx-chip {
    --nx-chip-tone-border: color-mix(in srgb, var(--nx-chip-tone) 24%, var(--nx-color-border));
    --nx-chip-hover-surface: color-mix(in srgb, var(--nx-chip-tone) 17%, transparent);
}
.nx-toast {
    --nx-toast-icon-surface: color-mix(in srgb, var(--nx-toast-tone) 14%, transparent);
    --nx-toast-hover-surface: color-mix(in srgb, var(--nx-toast-tone) 12%, transparent);
}

/* Resolve form roles at the form/field so all composite and native inputs agree. */
:where(.nx-editor, .nx-field, .nx-popup__dialog) {
    --nx-input-surface: var(--nx-form-input-surface);
    --nx-input-border: var(--nx-form-input-border);
    --nx-input-hover-border: var(--nx-form-input-hover-border);
    --nx-text-edit-surface: var(--nx-input-surface);
    --nx-text-edit-border: var(--nx-input-border);
    --nx-text-edit-hover-border: var(--nx-input-hover-border);
    --nx-text-area-surface: var(--nx-input-surface);
    --nx-text-area-border: var(--nx-input-border);
    --nx-text-area-hover-border: var(--nx-input-hover-border);
    --nx-combo-box-surface: var(--nx-input-surface);
    --nx-combo-box-border: var(--nx-input-border);
    --nx-combo-box-hover-border: var(--nx-input-hover-border);
    --nx-date-time-surface: var(--nx-input-surface);
    --nx-date-time-border: var(--nx-input-border);
}

/* Reusable compact check-list presentation; checks carry selection. */
:root .nx-tree-list.nx-checklist {
    --nx-row-gap: 0;
    --nx-row-radius: 0;
    --nx-row-min-height: var(--nx-checklist-row-height);
    --nx-selected-surface: var(--nx-tree-list-surface);
    --nx-selected-border: var(--nx-tree-list-border);
}

@media (max-width: 600px) {
    :root { --nx-toolbar-padding: .6rem .75rem; --nx-toolbar-gap: .5rem; }
}

* { box-sizing: border-box; }

/* Native hosts used while the application circuit is unavailable. */
.nx-native-dialog {
    background: var(--nx-popup-surface);
    color: var(--nx-popup-color);
    border: 1px solid var(--nx-popup-border);
    border-radius: var(--nx-popup-radius);
    box-shadow: var(--nx-popup-shadow);
}
.nx-native-dialog::backdrop { background: var(--nx-color-overlay); }
.nx-native-button {
    background: var(--nx-button-primary-surface);
    color: var(--nx-button-primary-color);
    border: 1px solid var(--nx-button-primary-border);
    border-radius: var(--nx-radius-control);
    min-height: var(--nx-button-height);
    padding: var(--nx-button-padding);
    font: inherit;
    font-weight: var(--nx-heading-weight);
    box-shadow: var(--nx-primary-shadow);
    cursor: pointer;
}
.nx-native-button:hover { background: var(--nx-button-primary-hover-surface, var(--nx-color-accent-hover)); }
.nx-native-button--neutral { background: var(--nx-button-surface); border-color: var(--nx-button-border); color: var(--nx-button-color); box-shadow: var(--nx-control-shadow); }
.nx-native-button--neutral:hover { background: var(--nx-button-hover-surface); border-color: var(--nx-button-hover-border); }
.nx-native-button:disabled { opacity: .52; cursor: not-allowed; }
.nx-system-notice { background: var(--nx-color-warning-soft); color: var(--nx-color-text); box-shadow: var(--nx-shadow-card); }


button, input, select, textarea { font: inherit; }

button,
a,
input,
select,
textarea,
[role="button"] {
    touch-action: manipulation;
}

/* iOS Safari zooms the viewport when a focused form control is below 16px. */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 900px) {
        input,
        select,
        textarea {
            font-size: 16px !important;
        }
    }
}
a { color: var(--nx-color-accent); }
h1:focus { outline: none; }
:focus-visible { outline-color: var(--nx-color-accent); }

.invalid { outline: 1px solid var(--nx-color-danger); }
.validation-message { color: var(--nx-color-danger); }
.blazor-error-boundary { background: var(--nx-color-danger-soft); border: 1px solid color-mix(in srgb, var(--nx-color-danger) 45%, transparent); color: var(--nx-color-danger); padding: 1rem; }
.blazor-error-boundary::after { content: "An error has occurred."; }
.darker-border-checkbox.form-check-input { border-color: var(--nx-color-border-strong); }
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--nx-color-text-muted); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }

/* Native Blazor inputs inside shared forms use the same defaults as Nx inputs.
   Exclude Nx internal inputs: their owning control supplies its border and surface. */
:where(.nx-editor, .nx-field, .nx-filter-builder) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([class*="nx-"]), select:not([class*="nx-"]), textarea:not([class*="nx-"])) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: var(--nx-control-height);
    padding: var(--nx-control-padding);
    border: 1px solid var(--nx-input-border);
    border-radius: var(--nx-radius-control);
    background: var(--nx-input-surface);
    color: var(--nx-input-color);
    font: inherit;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
:where(.nx-editor, .nx-field, .nx-filter-builder) :where(input, select, textarea):not([class*="nx-"]):hover:not(:disabled):not(:focus) { border-color: var(--nx-input-hover-border); }
:where(.nx-editor, .nx-field, .nx-filter-builder) :where(input, select, textarea):not([class*="nx-"]):focus { border-color: var(--nx-color-accent); box-shadow: var(--nx-focus-ring); outline: none; }
:where(.nx-editor, .nx-field, .nx-filter-builder) :where(input, textarea):not([class*="nx-"])::placeholder { color: var(--nx-input-placeholder); opacity: 1; }
:where(.nx-editor, .nx-field, .nx-filter-builder) :where(input, textarea):not([class*="nx-"])[readonly] { background: var(--nx-input-readonly-surface); }
:where(.nx-editor, .nx-field, .nx-filter-builder) :where(input, select, textarea):not([class*="nx-"]):disabled { opacity: .55; cursor: not-allowed; }
:where(.nx-editor, .nx-field, .nx-filter-builder) :where(input, select, textarea):not([class*="nx-"]).invalid { border-color: var(--nx-color-danger); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--nx-color-accent-strong); }
body { font-family: var(--nx-font-family); font-size: var(--nx-font-size-body); font-weight: var(--nx-font-weight-body); line-height: var(--nx-line-height); color: var(--nx-color-text); background: var(--nx-color-background); }

/* Shared close control for popup and editor headings. */
.nx-popup-header { --nx-card-header-gap: .35rem; }
.nx-close-button > svg { display: block; transform: translateY(1px); }
.nx-close-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: var(--nx-button-icon-size);
    height: var(--nx-button-icon-size);
    padding: 0;
    border: 1px solid var(--nx-button-border);
    border-radius: var(--nx-button-radius, var(--nx-radius-control));
    background: var(--nx-button-surface);
    color: var(--nx-button-color);
    font: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.nx-close-button:hover { background: var(--nx-button-hover-surface); color: var(--nx-button-color); }
.nx-close-button:focus-visible { outline: 2px solid var(--nx-color-accent); outline-offset: 2px; }

@media (max-width: 600px), (pointer: coarse) {
    :root {
        --nx-button-icon-size: 2.5rem;
        --nx-button-icon-padding: .35rem;
    }
}

/* Semantic foreground for inline status content and icons. */
.nx-text-success { color: var(--nx-color-success); }

.nx-text-muted { color: var(--nx-color-text-muted); }

/* Full-screen combo pickers use the page header, body and footer theme roles. */
.nx-combo-box__picker { background: var(--nx-page-body-surface); color: var(--nx-page-body-color, var(--nx-color-text)); font: inherit; }
.nx-combo-box__picker::backdrop { background: var(--nx-color-overlay); }
.nx-combo-box__picker-header { background: var(--nx-page-header-surface); color: var(--nx-page-header-color, var(--nx-color-text)); border-bottom: 1px solid var(--nx-page-border); }
.nx-combo-box__picker-toolbar > strong { font-size: var(--nx-heading-size); font-weight: var(--nx-heading-weight); line-height: 1.35; }
.nx-combo-box__picker-footer { background: var(--nx-page-footer-surface); color: var(--nx-page-footer-color, var(--nx-color-text)); border-top: 1px solid var(--nx-page-border); }
.nx-combo-box__picker-search { background: var(--nx-input-surface); border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-control); }
.nx-combo-box__picker-search:focus-within { border-color: var(--nx-color-accent); box-shadow: var(--nx-focus-ring); }
.nx-combo-box__picker-back { color: inherit; }
.nx-combo-box__picker > .nx-combo-box__dropdown { background: var(--nx-page-body-surface); }
.nx-combo-box__picker .nx-combo-box__dropdown .nx-combo-box__option { background: var(--nx-panel-surface); border-bottom: 1px solid var(--nx-color-border); font: inherit; text-align: start; }
.nx-combo-box__picker .nx-combo-box__dropdown .nx-combo-box__option--selected { background: var(--nx-selection-surface); color: inherit; }
.nx-combo-box__picker .nx-combo-box__dropdown .nx-combo-box__option:hover,
.nx-combo-box__picker .nx-combo-box__dropdown .nx-combo-box__option--active { background: var(--nx-color-surface-soft); }
.nx-combo-box__picker .nx-combo-box__check { color: var(--nx-color-accent); }
.nx-combo-box__picker .nx-combo-box__dropdown .nx-combo-box__option:last-child { border-bottom: 0; }

.nx-combo-box__picker-placeholder { color: var(--nx-combo-box-placeholder, var(--nx-color-text-subtle)); }

/* Shared opt-in phone editor chrome. Desktop layouts keep their existing slots. */
:root {
    --nx-mobile-editor-header-surface: var(--nx-color-surface-soft);
    --nx-mobile-editor-footer-surface: var(--nx-chrome-surface);
}
.nx-mobile-back, .nx-mobile-actions, .nx-mobile-save-label { display: none; }
@media (max-width: 600px) {
    .nx-mobile-editor.nx-editor { overflow: hidden !important; }
    .nx-mobile-editor.nx-editor > .nx-editor__form,
    .nx-mobile-editor.nx-editor > .nx-editor__form > .nx-editor__layout {
        flex: 1 1 0 !important;
        min-height: 0;
        overflow: hidden;
    }
    .nx-mobile-editor.nx-editor > .nx-editor__form > .nx-editor__layout > .nx-editor__navigation {
        display: block;
        flex: 0 0 auto;
        position: static;
    }
    .nx-mobile-editor.nx-editor > .nx-editor__form > .nx-editor__layout > .nx-editor__body {
        flex: 1 1 0 !important;
        min-height: 0;
        overflow: auto;
    }
    .nx-mobile-editor .nx-editor__header {
        background: var(--nx-mobile-editor-header-surface);
        padding: max(.4rem, env(safe-area-inset-top)) .65rem .4rem;
    }
    .nx-mobile-editor .nx-editor__heading { justify-content: flex-start; gap: .5rem; }
    .nx-mobile-editor .nx-editor__heading-content { font-size: 1rem; font-weight: 600; text-transform: none; }
    .nx-mobile-editor .nx-editor__heading-actions,
    .nx-mobile-editor .nx-editor__heading > .nx-close-button:not(.nx-mobile-back) { display: none; }
    .nx-mobile-editor .nx-mobile-back {
        display: inline-flex;
        flex: 0 0 auto;
        min-width: 2.75rem;
        min-height: 2.75rem;
        margin: 0;
        border: 0;
        background: transparent;
        order: -1;
    }
    .nx-mobile-editor .nx-mobile-actions {
        display: flex;
        flex: 0 0 auto;
        justify-content: flex-end;
        gap: .5rem;
        padding: .5rem max(.75rem, env(safe-area-inset-right)) max(.5rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
        border-top: 1px solid var(--nx-color-border);
        background: var(--nx-mobile-editor-footer-surface);
    }
    .nx-mobile-actions .nx-mobile-save-label { display: inline; white-space: nowrap; }
    /* Outrank the scoped icon-only sizing when a compact header action is
       presented with its caption in the phone footer. */
    .nx-mobile-editor .nx-mobile-actions .nx-split-button__main,
    .nx-mobile-editor .nx-mobile-actions .nx-split-button.nx-split-button--icon-only > .nx-split-button__main {
        width: auto;
        min-width: max-content;
        flex: 0 0 auto;
        padding-inline: .85rem;
        white-space: nowrap;
        overflow-wrap: normal;
        gap: .5rem;
    }
    .nx-mobile-editor .nx-field > label {
        text-transform: none;
        letter-spacing: normal;
        font-size: var(--nx-font-size-small);
    }
}
@media (max-width: 600px) {
    .nx-mobile-actions .nx-editor-actions__cancel,
    .nx-mobile-actions button[aria-label="Close"] { display: none; }
    .nx-mobile-actions:has(.nx-editor-actions):not(:has(.nx-split-button, button[type="submit"])) { display: none; }
}

/* Optional area/item headings reuse the existing phone header footprint. */
.nx-editor__mobile-heading { display: none; }
@media (max-width: 600px) {
    .nx-mobile-editor .nx-editor__desktop-heading { display: none; }
    .nx-mobile-editor .nx-editor__mobile-heading { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
    .nx-editor__mobile-heading > strong { font-size: 1rem; font-weight: 600; line-height: 1.25; }
    .nx-editor__mobile-heading > span { font-size: var(--nx-font-size-small); font-weight: 400; line-height: 1.3; color: var(--nx-color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}