@media(prefers-color-scheme: dark) {
    :root {
        --main-color: var(--color-rgb-181-181-181);
        --main-panel-bg: var(--color-hex-1f2937);
        --main-panel-border: var(--color-hex-374151);
        --nav-link-color-dark: var(--color-rgb-181-181-181);
        --nav-link-hover-bg-dark: var(--color-rgba-255-255-255-0-1);
        --nav-link-hover-color-dark: var(--color-hex-f3f4f6);
        --nav-link-active-bg-dark: var(--color-hex-3d5a80);
        --nav-link-active-color-dark: var(--color-hex-e0e7ff);
        --table-bg: var(--color-text);
        --table-border-color: var(--color-hex-334155);
        --table-head-bg: var(--color-hex-1f2937);
        --table-head-color: var(--color-hex-cbd5e0);
        --table-cell-bg: var(--color-text);
        --table-cell-color: var(--color-hex-e2e8f0);
        --table-row-hover-bg: var(--color-hex-1f2937);
        --table-shadow: 0 20px 40px var(--color-rgba-0-0-0-0-24);
    }

    body, nav{
        background-color: var(--color-text);
        color: var(--main-color);
    }
    
    a {
        color: var(--main-color);
    }

    a:hover {
        background-color: var(--color-rgba-255-255-255-0-08);
        color : var(--color-hex-f3f4f6);
    }

    /* Credit warning banner dark mode */
    .credit-warning {
        background-color: var(--color-hex-854d0e);
        color: var(--color-hex-fef3c7);
        border-bottom-color: var(--color-hex-ca8a04);
    }

    .credit-warning-critical {
        background-color: var(--color-hex-7f1d1d);
        color: var(--color-hex-fee2e2);
        border-bottom-color: var(--color-danger);
    }

    .credit-warning-banner a,
    .credit-warning-critical a {
        color: inherit;
    }

    nav#main-nav a,
    .nav-submenu a {
        color: var(--nav-link-color-dark);
    }

    nav#main-nav a:hover,
    .nav-submenu a:hover {
        background-color: var(--nav-link-hover-bg-dark);
        color: var(--nav-link-hover-color-dark);
    }

    /* Active menu item dark mode */
    nav#main-nav a.active,
    .nav-submenu a.active {
        background-color: var(--nav-link-active-bg-dark);
        color: var(--nav-link-active-color-dark);
    }

    /* Disabled menu item dark mode */
    nav#main-nav a.disabled {
        opacity: 0.4;
    }

    nav#main-nav a.disabled::after {
        color: var(--color-hex-8a8a8a);
    }

    /* Top nav toggle button */
    nav#top-nav .nav-toggle:hover {
        background-color: var(--color-rgba-255-255-255-0-1);
    }

    .nav-profile-dropdown {
        background-color: var(--color-hex-3d3d3d);
        border-color: var(--color-hex-555);
    }

    .nav-profile-dropdown-item:hover {
        background-color: var(--color-rgba-255-255-255-0-1);
    }

    /* Reminders link with pending reminders */
    #main-nav .reminders-link.has-reminders {
        color: var(--color-hex-ef5350);
    }

    #main-nav .reminders-link.has-reminders svg {
        fill: var(--color-hex-ef5350);
    }

    #main-nav .reminders-link.has-reminders:hover {
        color: var(--color-hex-f44336);
        background-color: var(--color-rgba-239-83-80-0-15);
    }

    .reminder-badge {
        background-color: var(--color-hex-ef5350);
    }

    /* Overlay dark mode */
    .nav-overlay {
        background: var(--color-rgba-0-0-0-0-7);
    }

    input, textarea, select {
        background-color: var(--color-hex-1f2937);
        color: var(--color-hex-f3f4f6);
        border: 1px solid var(--color-hex-4b5563);
    }

    input::placeholder,
    textarea::placeholder {
        color: var(--color-hex-9ca3af);
    }

    .message.error, .message.alert {
        background-color: var(--color-hex-d55a4d);
        border: 1px solid var(--color-hex-ea727e);
        
    }

    .message.warning {
        background-color: var(--color-hex-eded95);
        color: var(--main-color);
    }

    .dialog-box {
        background-color: var(--color-hex-3d3d3d);
    }

    .dialog-title {
        color: var(--color-border);
    }

    .dialog-message {
        color: var(--color-hex-9ca3af);
    }

    .dialog-close-btn {
        color: var(--color-hex-9ca3af);
    }

    .dialog-close-btn:hover,
    .dialog-close-btn:focus-visible {
        background: var(--color-rgba-255-255-255-0-08);
        color: var(--color-hex-f3f4f6);
    }

    .dialog-input {
        background: var(--color-hex-2d2d2d);
        border-color: var(--color-hex-555);
        color: var(--color-border);
    }

    .dialog-input:focus {
        border-color: var(--color-hex-4ade80);
        box-shadow: 0 0 0 2px var(--color-rgba-74-222-128-0-2);
    }

    .dialog-input.input-error {
        border-color: var(--color-danger);
        box-shadow: 0 0 0 2px var(--color-rgba-239-68-68-0-2);
    }

    .dialog-input::placeholder {
        color: var(--color-hex-6b7280);
    }

    .neo-toast {
        background: var(--color-hex-22c55e);
        color: var(--color-hex-000);
    }

    .neo-toast-error {
        background: var(--color-danger);
        color: var(--color-surface);
    }

    /* Status badge dark mode */
    .status-badge {
        background: var(--color-hex-16a34a);
    }

    /* Profile section dark mode */
    .profile-section {
        background: var(--color-hex-2d2d2d);
    }

    .profile-form .profile-avatar {
        border-color: var(--color-hex-4b5563);
        background: var(--color-hex-2d2d2d);
    }

    .profile-card {
        background: var(--color-hex-242a30);
        border-color: var(--color-hex-374151);
        box-shadow: none;
    }

    .profile-form .avatar-editor:hover {
        border-color: var(--color-hex-4b5563);
        background: var(--color-hex-2d2d2d);
    }

    .file-drop-target.is-drag-active {
        border-color: var(--color-info);
        background: var(--color-rgba-59-130-246-0-16);
        color: var(--color-hex-e2e8f0);
    }

    .drop-target-field.is-drag-active {
        background: var(--color-hex-1e293b);
    }

    .avatar-crop-editor canvas {
        border-color: var(--color-hex-4b5563);
        background: var(--color-hex-2d2d2d);
    }

    /* Chat component dark mode */
    .neo-chat-box .composer {
        background: var(--color-hex-2d2d2d);
        border-color: var(--color-hex-444);
    }

    .neo-chat-box .composer button.send .send-spinner {
        border-color: var(--color-rgba-255-255-255-0-3);
        border-top-color: var(--color-surface);
    }

    .neo-chat-box .composer .voice-input-btn {
        color: var(--color-hex-9ca3af);
    }

    .neo-chat-box .composer .voice-input-btn:hover {
        border-color: var(--color-hex-4b5563);
        background: var(--color-rgba-148-163-184-0-08);
        color: var(--color-hex-e5e7eb);
    }

    .neo-chat-box .composer .voice-input-btn.is-recording {
        border-color: transparent;
        background: transparent;
        color: var(--color-surface);
        box-shadow: none;
    }

    .neo-chat-box .composer .voice-input-btn.is-recording:hover {
        border-color: transparent;
        background: transparent;
        color: var(--color-surface);
    }

    .neo-chat-box .composer .voice-input-btn.is-recording.is-busy,
    .neo-chat-box .composer .voice-input-btn.is-busy {
        border-color: transparent;
        background: transparent;
        color: var(--color-surface);
        box-shadow: none;
    }

    .neo-chat-box .composer .voice-status {
        color: var(--color-hex-cbd5e1);
    }

    .neo-chat-box .composer .voice-status-time {
        color: var(--color-hex-e2e8f0);
    }

    .neo-chat-box .composer .voice-status.is-recording .voice-status-label {
        color: var(--color-hex-fca5a5);
    }

    .neo-chat-box .composer .voice-status.is-busy .voice-status-label {
        color: var(--color-hex-99f6e4);
    }

    .neo-chat-box .composer .voice-wave-bar {
        background: var(--color-hex-64748b);
    }

    .neo-chat-box .composer .attachment-preview-item {
        background: var(--color-hex-3d3d3d);
        border-color: var(--color-hex-555);
    }

    .neo-chat-box .composer .attachment-preview-thumb {
        background: var(--color-hex-252526);
        color: var(--color-hex-9ca3af);
    }

    .neo-chat-box .composer .attachment-name {
        color: var(--color-hex-e0e0e0);
    }

    .neo-chat-box .composer .attachment-meta {
        color: var(--color-hex-9ca3af);
    }

    .neo-chat-box .composer .attachment-excerpt {
        background: var(--color-hex-252526);
        color: var(--color-hex-e5e7eb);
    }

    .neo-chat-box .composer .attachment-remove {
        color: var(--color-hex-9ca3af);
        background: var(--color-rgba-17-24-39-0-9);
    }

    .neo-chat-box .composer .attachment-remove:hover {
        color: var(--color-hex-f87171);
        background: var(--color-hex-4a2c2c);
    }

    .neo-chat-box .composer-hint {
        color: var(--color-hex-9ca3af);
    }

    .neo-chat-box .selected-project-item-strip {
        color: var(--color-hex-9ca3af);
    }

    .neo-chat-box .selected-project-item-link {
        color: var(--color-hex-f3f4f6);
    }

    .neo-chat-box .selected-project-item-clear {
        color: var(--color-hex-9ca3af);
    }

    .neo-chat-box .chat-context-bar {
        border-top-color: var(--color-hex-3f3f46);
    }

    .neo-chat-box .chat-context-bar label {
        color: var(--color-hex-9ca3af);
    }

    .neo-chat-box .chat-context-select,
    .neo-chat-box .chat-context-project-select {
        background: var(--color-hex-1f2937);
        border-color: var(--color-hex-6b7280);
        color: var(--color-hex-f3f4f6);
    }

    .neo-chat-box .chat-context-project-item-link {
        color: var(--color-hex-9ca3af);
    }

    .neo-chat-box .chat-helper-actions .chat-attachment-picker-trigger,
    .neo-chat-box .chat-helper-actions .chat-canvas-toggle,
    .neo-chat-box .chat-helper-actions .share-toggle {
        color: var(--color-hex-9ca3af);
    }

    .neo-chat-box .chat-helper-actions .chat-attachment-picker-trigger:hover,
    .neo-chat-box .chat-helper-actions .chat-canvas-toggle:hover,
    .neo-chat-box .chat-helper-actions .share-toggle:hover {
        border-color: var(--color-hex-4b5563);
        background: var(--color-rgba-148-163-184-0-08);
        color: var(--color-hex-e5e7eb);
    }

    .neo-chat-box .chat-helper-actions .share-toggle.shared {
        background: var(--color-rgba-59-130-246-0-14);
        border-color: var(--color-rgba-96-165-250-0-35);
        color: var(--color-hex-93c5fd);
    }

    .neo-chat-box .chat-canvas-toggle.is-active {
        background: var(--color-rgba-45-212-191-0-12);
        border-color: var(--color-rgba-45-212-191-0-35);
        color: var(--color-hex-99f6e4);
    }

    .neo-chat-box .chat-canvas-panel {
        background: linear-gradient(180deg, var(--color-hex-17171a) 0%, var(--color-hex-111827) 100%);
        border-color: var(--color-hex-374151);
        box-shadow: none;
    }

    .neo-chat-box .chat-canvas-header {
        background: linear-gradient(180deg, var(--color-hex-1f2937) 0%, var(--color-hex-111827) 100%);
        border-bottom-color: var(--color-hex-374151);
    }

    .neo-chat-box .chat-canvas-title {
        color: var(--color-hex-f3f4f6);
    }

    .neo-chat-box .chat-canvas-subtitle,
    .neo-chat-box .chat-canvas-markdown {
        color: var(--color-hex-d1d5db);
    }

    .neo-chat-box .chat-canvas-close {
        color: var(--color-hex-9ca3af);
    }

    .neo-chat-box .chat-canvas-close:hover {
        background: var(--color-hex-374151);
        color: var(--color-hex-f9fafb);
    }

    .neo-chat-box .chat-canvas-markdown h1,
    .neo-chat-box .chat-canvas-markdown h2,
    .neo-chat-box .chat-canvas-markdown h3 {
        color: var(--color-hex-f9fafb);
    }

    .neo-chat-box .chat-canvas-markdown a {
        color: var(--color-hex-5eead4);
    }

    .neo-chat-box .chat-canvas-toggle.is-active {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-surface);
    }

    .neo-chat-box .chat-context-issue-btn {
        background: var(--color-hex-1f1f22);
        border-color: var(--color-hex-4b5563);
        color: var(--color-border);
    }

    .neo-chat-box .chat-context-issue-btn:hover {
        background: var(--color-hex-374151);
        border-color: var(--color-hex-64748b);
    }

    .neo-chat-box .chat-github-issue-link {
        background: var(--color-hex-1f2937);
        border-color: var(--color-hex-374151);
        color: var(--color-hex-e5e7eb);
    }

    .neo-chat-box .chat-github-issue-link:hover {
        background: var(--color-rgba-59-130-246-0-22);
        color: var(--color-hex-93c5fd);
    }

    .neo-chat-box .chat-github-issue-link .issue-repo,
    .github-issue-dialog-meta {
        color: var(--color-hex-9ca3af);
    }

    .github-issue-dialog-status {
        background: var(--color-hex-1f2937);
        border-color: var(--color-hex-374151);
    }

    .github-issue-dialog-status.is-error {
        background: var(--color-rgba-239-68-68-0-16);
        border-color: var(--color-rgba-239-68-68-0-35);
    }

    .neo-chat-box .chat-context-github-help {
        color: var(--color-hex-9ca3af);
    }

    .settings-page .status-pill.status-info {
        background: var(--color-rgba-59-130-246-0-22);
        color: var(--color-hex-93c5fd);
    }

    .settings-page .code-display,
    .settings-page .list-compact {
        color: var(--color-border);
    }

    .settings-page {
        --panel-bg: var(--main-panel-bg);
        --border-color: var(--main-panel-border);
        --text-muted: var(--color-hex-9ca3af);
        --success-color-dark: var(--color-hex-86efac);
    }

    .settings-page .settings-panel {
        background: var(--panel-bg);
        border-color: var(--border-color);
        box-shadow: none;
    }

    button.secondary,
    a.secondary {
        background: var(--panel-bg);
        color: var(--main-color);
        border-color: var(--border-color);
    }

    button.secondary:hover,
    a.secondary:hover {
        background: var(--color-rgba-255-255-255-0-08);
        border-color: var(--border-color);
    }

    button.secondary:focus-visible,
    a.secondary:focus-visible {
        outline: 2px solid var(--color-hex-9ca3af);
        outline-offset: 2px;
    }

    button.icon-btn:hover,
    a.icon-btn:hover,
    button.icon-btn:focus-visible,
    a.icon-btn:focus-visible {
        background: var(--color-rgba-255-255-255-0-1);
    }

    .settings-page .settings-page-kicker {
        color: var(--success-color-dark);
    }

    .settings-page .settings-page-summary,
    .settings-page .settings-section-intro,
    .settings-page .supporting-text {
        color: var(--text-muted);
    }

    .settings-page .status-pill.status-muted {
        background: var(--color-rgba-148-163-184-0-18);
        color: var(--color-hex-cbd5e1);
    }

    .settings-page .status-pill.status-progress {
        background: var(--color-rgba-245-158-11-0-18);
        color: var(--color-hex-fcd34d);
    }

    .settings-page .status-pill.status-live {
        background: var(--color-rgba-34-197-94-0-18);
        color: var(--color-hex-86efac);
    }

    .settings-page .status-pill.status-warning {
        background: var(--color-rgba-239-68-68-0-18);
        color: var(--color-hex-fca5a5);
    }

    .settings-page .upload-surface {
        border-color: var(--border-color);
        background: linear-gradient(135deg, var(--color-rgba-46-139-87-0-12), var(--color-rgba-255-255-255-0-03));
    }

    .settings-page .upload-preview {
        background: var(--color-surface);
        border: 1px solid var(--color-hex-d0d7de);
        border-radius: 0.5rem;
        padding: 0.35rem;
        box-sizing: border-box;
        filter: none;
    }

    .settings-page .offer-card.is-active {
        border-color: var(--color-hex-3aaf6a);
    }

    .settings-page .offer-card.is-pending {
        border-color: var(--color-hex-e0b030);
    }

    /* Attachment info box in sent messages - dark mode */
    .neo-chat-box .attachment-info-box {
        background: var(--color-hex-2d2d2d);
        border-color: var(--color-hex-444);
        color: var(--color-hex-9ca3af);
    }

    .neo-chat-box .attachment-info-name {
        color: var(--color-hex-e0e0e0);
    }

    .neo-chat-box .attachment-info-meta {
        color: var(--color-hex-9ca3af);
    }

    .neo-chat-box .attachment-info-time {
        color: var(--color-hex-6b7280);
    }

    /* Chat attachment previews - dark mode */
    .neo-chat-box .chat-attachment-preview {
        border-color: var(--color-hex-444);
        background: var(--color-hex-2d2d2d);
    }

    .neo-chat-box .chat-attachment-name {
        color: var(--color-hex-e0e0e0);
    }

    .neo-chat-box .chat-attachment-size,
    .neo-chat-box .chat-attachment-label {
        color: var(--color-hex-9ca3af);
    }

    .neo-chat-box .chat-attachment-text-preview {
        background: var(--color-hex-1e1e1e);
        color: var(--color-hex-d4d4d4);
    }

    .neo-chat-box .chat-attachment-link {
        color: var(--color-hex-e0e0e0);
    }

    .neo-chat-box.is-shared-chat .chat-response[data-shared-role="user"] .message-avatar {
        background: var(--color-rgba-59-130-246-0-22);
        border-color: var(--color-hex-60a5fa);
        color: var(--color-hex-93c5fd);
    }

    .neo-chat-box.is-shared-chat .chat-response[data-shared-role="assistant"] .message-avatar {
        background: var(--color-rgba-46-139-87-0-12);
        border-color: var(--color-rgba-46-139-87-0-25);
        color: var(--color-hex-6ee7b7);
    }

    .neo-chat-box .composer textarea,
    .neo-chat-box .composer input {
        background: transparent;
        color: var(--main-color);
    }

    .neo-chat-box .selection-action-popover {
        background: var(--color-hex-111827);
        border-color: var(--color-hex-374151);
    }

    .neo-chat-box .selection-action-title {
        color: var(--color-hex-9ca3af);
    }

    .neo-chat-box .selection-action-btn {
        color: var(--color-hex-e5e7eb);
    }

    .neo-chat-box .selection-action-btn:hover {
        background: var(--color-rgba-255-255-255-0-08);
    }

    .neo-chat-box .todo-sidebar {
        border-color: var(--color-hex-4b5563);
        background: var(--color-hex-1f2937);
        box-shadow: 0 10px 24px var(--color-rgba-0-0-0-0-35);
    }

    .neo-chat-box .todo-sidebar-header {
        border-bottom-color: var(--color-hex-374151);
        background: linear-gradient(180deg, var(--color-hex-1f2937) 0%, var(--color-text) 100%);
    }

    .neo-chat-box .todo-sidebar-title,
    .neo-chat-box .todo-sidebar-list-title {
        color: var(--color-hex-fbbf24);
    }

    .neo-chat-box .todo-sidebar-item:hover {
        background: var(--color-rgba-251-191-36-0-15);
    }

    .neo-chat-box .todo-sidebar-item-text {
        color: var(--color-border);
    }

    .neo-chat-box .todo-sidebar-item-meta {
        color: var(--color-hex-9ca3af);
    }

    .neo-chat-box .todo-sidebar-item-remove {
        color: var(--color-hex-fca5a5);
    }

    .neo-chat-box .todo-sidebar-item-remove:hover {
        color: var(--color-hex-f87171);
    }

    .neo-chat-box .todo-sidebar-item.is-done .todo-sidebar-item-text {
        color: var(--color-hex-9ca3af);
    }

    .neo-chat-box .todo-sidebar-restore {
        background: var(--color-text);
        border-color: var(--color-hex-4b5563);
        color: var(--color-border);
        box-shadow: 0 6px 16px var(--color-rgba-0-0-0-0-35);
    }

    .neo-chat-box .todo-sidebar-restore:hover {
        background: var(--color-hex-1f2937);
    }

    .chat-response .message,
    .chat-response.user .response-content {
        background: linear-gradient(135deg, var(--color-hex-1e3a8a) 0%, var(--color-info) 100%);
    }

    /* Chat action bar dark mode */
    .chat-action-bar {
        border-top-color: var(--color-hex-374151);
    }

    .chat-action-bar .action-btn {
        background: transparent;
        color: var(--color-hex-6b7280);
    }

    .chat-action-bar .action-btn:hover {
        background: var(--color-hex-374151);
        color: var(--color-hex-9ca3af);
    }

    .chat-action-bar .action-delete:hover {
        background: var(--color-hex-450a0a);
        color: var(--color-hex-fca5a5);
    }

    .chat-action-bar .action-copy:hover {
        background: var(--color-hex-0c4a6e);
        color: var(--color-hex-7dd3fc);
    }

    .chat-action-bar .action-copy.copied {
        background: var(--color-hex-064e3b);
        color: var(--color-hex-6ee7b7);
    }

    .chat-action-bar .action-show-prompt:hover {
        background: var(--color-hex-0c4a6e);
        color: var(--color-hex-7dd3fc);
    }

    /* Prompt dialog dark mode */
    .dialog-box .prompt-content {
        background: var(--color-hex-1e293b);
        color: var(--main-color);
    }

    /* Delete link dark mode */
    .delete-link {
        color: var(--color-hex-9ca3af);
    }

    .delete-link:hover {
        color: var(--color-hex-fca5a5);
    }

    .chat-response .answer,
    .chat-response.assistant .response-content {
        background: var(--color-hex-1e293b);
        color: var(--main-color);
    }

    /* Error messages from image generation */
    .chat-response.error .response-content {
        background: var(--color-hex-450a0a);
        border-color: var(--color-hex-7f1d1d);
        color: var(--color-hex-fca5a5);
    }

    .chat-response .answer h1,
    .chat-response .answer h2,
    .chat-response .answer h3,
    .chat-response .response-content h1,
    .chat-response .response-content h2,
    .chat-response .response-content h3 {
        color: var(--color-hex-93c5fd);
    }

    .chat-response .answer code,
    .chat-response .response-content code {
        background: var(--color-hex-334155);
    }

    .chat-response .answer pre,
    .chat-response .response-content pre {
        background: var(--color-hex-1a1a1a);
    }

    .neo-chat-box .welcome-message {
        background: linear-gradient(135deg, var(--color-hex-1e3a8a) 0%, var(--color-hex-1e40af) 100%);
        color: var(--color-hex-93c5fd);
    }

    .neo-chat-box .generated-image {
        background: var(--color-hex-1e293b);
        border-color: var(--color-hex-374151);
    }

    .neo-chat-box .generated-image .image-caption {
        color: var(--color-hex-9ca3af);
    }

    /* Image generation options dark mode */
    .neo-chat-box .image-options {
        background: var(--color-hex-1e293b);
        border-color: var(--color-hex-374151);
    }

    .neo-chat-box .generation-mode-options {
        background: var(--color-hex-1e293b);
        border-color: var(--color-hex-374151);
    }

    .neo-chat-box .mode-hint {
        color: var(--color-hex-9ca3af);
    }

    .neo-chat-box .option-group label {
        color: var(--color-hex-9ca3af);
    }

    .neo-chat-box .image-option {
        background: var(--color-text);
        border-color: var(--color-hex-374151);
        color: var(--color-border);
    }

    .neo-chat-box .image-option:focus {
        border-color: var(--color-info);
        box-shadow: 0 0 0 2px var(--color-rgba-59-130-246-0-3);
    }

    /* Toggle switch dark mode */
    .neo-chat-box .toggle-track {
        background: var(--color-hex-4b5563);
    }

    .neo-chat-box .toggle-track::after {
        background: var(--color-border);
    }

    .neo-chat-box .toggle-switch input:checked + .toggle-track {
        background: var(--color-toggle-accent);
    }

    .neo-chat-box .toggle-switch input:focus + .toggle-track {
        box-shadow: 0 0 0 2px var(--color-rgba-74-222-128-0-3);
    }

    /* Image generating indicator dark mode */
    .image-generating-indicator {
        background: linear-gradient(135deg, var(--color-hex-1e293b) 0%, var(--color-hex-1e3a5f) 100%);
        border-color: var(--color-hex-374151);
    }

    /* PDF download link dark mode */
    .pdf-download-link {
        background: var(--color-hex-1e293b);
        border-color: var(--color-hex-374151);
        color: var(--color-hex-4ade80);
    }

    .pdf-download-link:hover {
        background: var(--color-hex-1e3a5f);
        border-color: var(--color-hex-4ade80);
    }

    .generating-spinner {
        border-color: var(--color-hex-4b5563);
        border-top-color: var(--color-hex-4ade80);
    }

    .generating-text {
        color: var(--color-border);
    }

    .generating-timer {
        background: var(--color-hex-374151);
        color: var(--color-hex-9ca3af);
        border-color: var(--color-hex-4b5563);
    }

    /* Staged generation preview dark mode */
    .stage-preview-container {
        border-top-color: var(--color-hex-4b5563);
    }

    .stage-preview-image {
        border-color: var(--color-hex-4ade80);
    }

    .stage-preview-label {
        color: var(--color-hex-9ca3af);
    }

    /* Image generation info dark mode */
    .image-generation-info {
        background: var(--color-hex-451a03);
        border-color: var(--color-hex-92400e);
        color: var(--color-hex-fcd34d);
    }

    /* Image generation error dark mode */
    .image-generation-error {
        background: var(--color-hex-450a0a);
        border-color: var(--color-hex-7f1d1d);
        color: var(--color-hex-fca5a5);
    }

    .image-generation-error .retry-button {
        background: var(--color-hex-b91c1c);
    }

    .image-generation-error .retry-button:hover {
        background: var(--color-danger);
    }

    .orphan-retry .orphan-notice {
        color: var(--text-secondary);
    }

    .chat-response .loading {
        background: var(--color-hex-1e293b);
    }

    .typing-indicator::before {
        color: var(--color-hex-7a7a7a);
    }

    /* Reminders dark mode */
    .reminder-entry.overdue td {
        background-color: var(--color-hex-4a1515);
    }

    .reminders-section h2.overdue {
        color: var(--color-hex-ef5350);
    }

    .reminder-actions .reminder-action-btn:hover {
        background-color: var(--color-hex-3d3d3d);
        border-color: var(--color-hex-555);
    }

    .empty-state {
        color: var(--color-hex-888);
    }

    .completed-section summary {
        color: var(--color-hex-888);
    }

    /* Notification Bell Dark Mode */
    .notification-bell-button:hover {
        background-color: var(--color-rgba-255-255-255-0-1);
    }

    .notification-dropdown {
        background: var(--color-hex-1f2937);
        border-color: var(--color-hex-374151);
    }

    .notification-header {
        background: var(--color-text);
        border-color: var(--color-hex-374151);
    }

    .notification-header h3 {
        color: var(--color-hex-f9fafb);
    }

    .notification-mark-all-read {
        color: var(--color-hex-818cf8);
    }

    .notification-mark-all-read:hover {
        background-color: var(--color-hex-1e1b4b);
    }

    .notification-item {
        border-color: var(--color-hex-374151);
    }

    .notification-item:hover {
        background-color: var(--color-text);
    }

    .notification-item.unread {
        background-color: var(--color-hex-1e1b4b);
    }

    .notification-item.unread:hover {
        background-color: var(--color-hex-312e81);
    }

    .notification-icon {
        background-color: var(--color-hex-374151);
        color: var(--color-hex-9ca3af);
    }

    .notification-item.unread .notification-icon {
        background-color: var(--color-hex-6366f1);
        color: var(--color-surface);
    }

    /* Due reminders - need attention */
    .notification-item.due {
        background-color: var(--color-hex-422006);
    }

    .notification-item.due:hover {
        background-color: var(--color-hex-78350f);
    }

    .notification-item.due .notification-icon {
        background-color: var(--color-warning);
        color: var(--color-surface);
    }

    /* Overdue reminders - urgent */
    .notification-item.overdue {
        background-color: var(--color-hex-450a0a);
    }

    .notification-item.overdue:hover {
        background-color: var(--color-hex-7f1d1d);
    }

    .notification-item.overdue .notification-icon {
        background-color: var(--color-danger);
        color: var(--color-surface);
    }

    .notification-item.overdue .notification-title {
        color: var(--color-hex-fca5a5);
    }

    .notification-item.overdue .notification-time {
        color: var(--color-hex-f87171);
        font-weight: 600;
    }

    .notification-title {
        color: var(--color-hex-f9fafb);
    }

    .notification-message {
        color: var(--color-hex-9ca3af);
    }

    .notification-time {
        color: var(--color-hex-6b7280);
    }

    .notification-empty,
    .notification-loading {
        color: var(--color-hex-9ca3af);
    }

    .notification-footer {
        background: var(--color-text);
        border-color: var(--color-hex-374151);
    }

    .notification-footer a {
        color: var(--color-hex-818cf8);
    }

    /* Folder tabs dark mode */
    .folder-tabs {
        border-bottom-color: var(--color-hex-374151);
    }

    .folder-tab {
        background: var(--color-hex-1f2937);
        color: var(--color-hex-9ca3af);
        border-color: var(--color-hex-374151);
    }

    .folder-tab:hover {
        background: var(--color-hex-374151);
        color: var(--color-hex-f3f4f6);
    }

    /* Image chats gallery dark mode */
    .chat-card {
        background: var(--color-hex-1f2937);
        border-color: var(--color-hex-374151);
    }

    .chat-card:hover {
        box-shadow: 0 4px 12px var(--color-rgba-0-0-0-0-3);
    }

    .chat-card .thumbnail {
        background: var(--color-text);
    }

    .chat-card .thumbnail-placeholder {
        color: var(--color-hex-4b5563);
    }

    .chat-card .card-title {
        color: var(--color-hex-f3f4f6);
    }

    .chat-card .card-meta {
        color: var(--color-hex-9ca3af);
    }

    .share-copy-btn,
    .chat-card .share-toggle,
    .project-assign-select,
    .chat-card .name-input {
        border-color: var(--color-hex-374151);
        background: var(--color-hex-1f2937);
        color: var(--color-hex-f3f4f6);
    }

    .share-copy-btn:hover,
    .chat-card .share-toggle:hover {
        background: var(--color-hex-374151);
    }

    .chat-card .share-toggle.shared {
        background: var(--color-hex-1e3a5f);
        border-color: var(--color-info);
        color: var(--color-hex-bfdbfe);
    }

    .folder-tab.active {
        background: var(--color-primary);
        color: var(--color-surface);
        border-color: var(--color-primary);
        border-bottom-color: var(--color-primary);
    }

    /* Communication dark mode */
    .communication-page {
        color: var(--color-hex-e2e8f0);
    }

    .communication-page .mail-message-list td.sender.known-contact {
        background: var(--color-hex-3a3a20);
    }

    .communication-page .mail-message-list td.sender.tentative-contact {
        background: var(--color-hex-2b3136);
    }

    /* Communication dark mode: responsive overrides */
    @media (max-width: 720px) {
        .communication-page .mail-message-list {
            border-color: var(--color-hex-334155);
        }

        .communication-page .mail-message-list td,
        .communication-page .mail-message-list tr.mail-row:hover td,
        .communication-page .mail-message-list td.sender.known-contact,
        .communication-page .mail-message-list td.sender.tentative-contact {
            background: transparent;
        }

        .communication-page .mail-message-list tr.mail-row {
            border-bottom-color: var(--color-hex-334155);
        }
    }

    .communication-page .mail-message-list .table-link.link-accent {
        color: var(--color-hex-6ee7b7);
    }

    .communication-page .mail-message-list .table-link.link-accent:hover {
        color: var(--color-hex-bbf7d0);
        background: transparent;
    }

    .communication-page .mail-message-list td[data-label]::before,
    .communication-page .meta-bar,
    .communication-page .mail-message-list td.date,
    .communication-page .table-secondary-copy,
    .communication-page .progress-meter-label,
    .communication-page .meta-label,
    .communication-page .supporting-text {
        color: var(--color-hex-94a3b8);
    }

    .communication-page .table-primary-copy,
    .communication-page .mail-message-list td.sender,
    .communication-page .bulk-actions-toolbar .bulk-count,
    .communication-page .empty-state h1,
    .communication-page .dialog-message {
        color: var(--color-hex-e2e8f0);
    }

    .communication-page .mail-message-list .table-select-cell .reply-shortcut {
        color: var(--color-hex-fbbf24);
    }

    .communication-page .mail-message-list .table-select-cell .reply-shortcut:hover {
        color: var(--color-hex-fde68a);
    }

    .communication-page .bulk-actions-toolbar {
        background: var(--color-hex-1f2937);
        border-color: var(--color-hex-334155);
    }

    .communication-page .toolbar-btn-compact {
        background: var(--color-rgba-255-255-255-0-08);
        border-color: var(--color-rgba-255-255-255-0-18);
        color: var(--color-hex-cbd5e0);
        box-shadow: none;
    }

    .communication-page .toolbar-btn-compact:hover {
        background: var(--color-rgba-255-255-255-0-12);
        color: var(--color-hex-f8fafc);
    }

    .communication-page .toolbar-btn-compact .button-icon {
        color: var(--color-hex-f8fafc);
        text-shadow: 0 1px 2px var(--color-rgba-0-0-0-0-35);
    }

    .communication-page #open-communication-chat.toolbar-btn-compact .button-icon,
    .communication-page #refresh-mail-list-btn.toolbar-btn-compact .button-icon,
    .communication-page #toggle-summary-btn.toolbar-btn-compact .button-icon,
    .communication-page .pagination-buttons .toolbar-btn-compact .button-icon {
        color: var(--color-hex-7dd3fc);
    }

    .communication-page .folder-tab.active.toolbar-btn-compact {
        background: var(--color-rgba-255-255-255-0-12);
        border-color: var(--color-hex-7dd3fc);
        color: var(--color-hex-f8fafc);
        box-shadow: 0 0 0 1px var(--color-rgba-0-102-204-0-2);
    }

    .communication-page .folder-tab.active.toolbar-btn-compact .button-icon {
        color: var(--color-hex-7dd3fc);
    }

    .process-flow-shell {
        background: linear-gradient(180deg, var(--color-hex-111827) 0%, var(--color-hex-1f2937) 100%);
        border-color: var(--color-hex-374151);
        box-shadow: none;
    }

    .process-flow-head span,
    .process-flow-stage-meta p {
        color: var(--color-hex-9ca3af);
    }

    .process-flow-stage-meta h3 {
        color: var(--color-hex-93c5fd);
    }

    .process-flow-stage-branch::before,
    .process-flow-stage-branch::after,
    .process-flow-node:not(:last-child)::after {
        border-top-color: var(--color-hex-4b5563);
    }

    .process-flow-stage-branch::before {
        border-left-color: var(--color-hex-4b5563);
    }

    .process-flow-node-dot {
        box-shadow: 0 0 0 4px var(--color-rgba-125-211-252-0-12);
    }

    .process-flow-node-card {
        background: var(--color-hex-111827);
        border-color: var(--color-hex-374151);
        box-shadow: none;
    }

    .tone-btn {
        background: var(--tone-btn-bg-dark, var(--color-hex-2d3237));
        color: var(--tone-btn-fg-dark, var(--color-hex-ddd));
        border-color: var(--tone-btn-border-dark, var(--color-hex-3d4247));
    }

    .tone-btn:hover {
        background: var(--color-hex-3a4147);
    }

    .tone-btn.active,
    .tone-btn[aria-pressed='true'] {
        background: var(--color-hex-2d7a57);
        border-color: var(--color-hex-2d7a57);
        color: var(--color-surface);
    }

    .neo-generated-image .image-container {
        background-color: var(--color-surface-secondary-dark, var(--color-hex-2a2a2a));
    }

    .neo-generated-image .loading-placeholder {
        color: var(--color-text-secondary-dark, var(--color-hex-aaa));
    }

    .neo-generated-image .loading-spinner {
        border-color: var(--color-border-dark, var(--color-hex-444));
        border-top-color: var(--color-primary-dark, var(--color-hex-4da6ff));
    }

    .neo-generated-image .retry-btn {
        border-color: var(--color-border-dark, var(--color-hex-444));
        background: var(--color-surface-secondary-dark, var(--color-hex-2a2a2a));
        color: var(--color-text-primary-dark, var(--color-hex-e0e0e0));
    }

    .neo-generated-image .retry-btn:hover {
        background: var(--color-surface-tertiary-dark, var(--color-hex-333));
    }

    .neo-subject-properties .project-badge,
    .neo-subject-properties .tag {
        background: var(--color-hex-1f2937);
        color: var(--color-hex-e5e7eb);
    }

    .neo-subject-properties .project-add-select,
    .neo-subject-properties .tag-input,
    .neo-subject-properties .description-textarea,
    .neo-subject-properties .appearance-textarea,
    .neo-subject-properties .drop-message {
        background: var(--color-hex-111827);
        color: var(--color-hex-f3f4f6);
        border-color: var(--color-hex-4b5563);
    }

    .neo-subject-properties .empty-projects,
    .neo-subject-properties .editor-help,
    .neo-subject-properties .appearance-intro,
    .neo-subject-properties .properties-section-header,
    .neo-subject-properties .editor-status.saving,
    .neo-subject-properties .appearance-status.saving {
        color: var(--color-hex-9ca3af);
    }

    .process-flow-node-card::after {
        border-color: var(--color-hex-6b7280);
        background: var(--color-hex-111827);
    }

    @media (max-width: 760px) {
        .process-flow-node:not(:last-child)::after {
            border-left-color: var(--color-hex-4b5563);
        }
    }

    /* Reference Subjects Component dark mode */
    .neo-reference-subjects .subject-card {
        border-color: var(--color-hex-374151);
        background: var(--color-hex-1f2937);
    }

    .neo-reference-subjects .subject-name {
        color: var(--color-hex-f3f4f6);
    }

    .neo-reference-subjects .image-count {
        color: var(--color-hex-9ca3af);
    }

    .neo-reference-subjects .empty-message {
        color: var(--color-hex-9ca3af);
    }

    .action-tile {
        background: var(--color-hex-1f2937);
        border-color: var(--color-hex-374151);
        color: var(--color-hex-f3f4f6);
    }

    .action-tile:hover {
        background: var(--color-hex-111827);
        border-color: var(--color-hex-4b5563);
    }

    .action-tile-icon {
        background: rgba(148, 163, 184, 0.14);
        color: #cbd5e1;
    }

    .selection-card {
        border-color: var(--color-hex-374151);
    }

    .selection-card:hover {
        background: var(--color-text);
    }

    .selection-card:has(input[type="radio"]:checked),
    .selection-card:has(input[type="checkbox"]:checked) {
        border-color: var(--color-info);
        background: var(--color-hex-1e3a5f);
    }

    .metric-card,
    .option-item {
        background: var(--color-hex-111827);
        border-color: var(--color-hex-374151);
    }

    .progress-meter-bar,
    .progress-meter-bar::-webkit-progress-bar {
        background: var(--color-hex-374151);
    }

    .progress-meter-label {
        color: var(--color-hex-f3f4f6);
    }

    .selection-card-copy small,
    .breadcrumb-inline,
    .timestamp-label,
    .recording-status-row {
        color: var(--color-hex-9ca3af);
    }

    .status-pill.status-danger {
        background: #7f1d1d;
        color: #fca5a5;
    }

    .title-edit-input,
    .asset-select {
        background: var(--color-hex-1f2937);
        color: var(--color-hex-f3f4f6);
        border-color: var(--color-hex-4b5563);
    }

    .asset-card {
        background: var(--color-hex-111827);
        border-color: var(--color-hex-374151);
    }

    .asset-preview {
        background: var(--color-hex-1f2937);
    }

    .asset-toggle-indicator {
        background: rgba(17, 24, 39, 0.92);
        border-color: var(--color-hex-4b5563);
    }

    .asset-meta,
    .danger-panel-copy p {
        color: var(--color-hex-9ca3af);
    }

    .danger-panel {
        background: var(--color-hex-111827);
        border-color: rgba(248, 113, 113, 0.5);
    }

    .recording-trigger.is-recording {
        background: rgba(198, 40, 40, 0.14);
        color: #fca5a5;
        border-color: rgba(248, 113, 113, 0.35);
    }

    .preview-placeholder.type-voice {
        color: #93c5fd;
    }

    .preview-placeholder.type-file {
        color: var(--color-hex-cbd5e1);
    }

    .dialog-lightbox-image {
        background: var(--color-hex-111827);
    }

    /* Landing page dark mode */
    .landing-hero h1 {
        color: var(--color-hex-f3f4f6);
    }

    .landing-hero .tagline {
        color: var(--color-hex-9ca3af);
    }

    .landing-cta .cta-secondary {
        background-color: var(--color-hex-1f2937);
        color: var(--color-hex-f3f4f6);
        border-color: var(--color-hex-374151);
    }

    .landing-cta .cta-secondary:hover {
        background-color: var(--color-hex-374151);
        border-color: var(--color-hex-4b5563);
    }

    /* No Credits Dialog dark mode */
    .no-credits-feature-name {
        background: var(--color-hex-1f2937);
        color: var(--color-hex-9ca3af);
    }

    /* System status banner dark mode */
    .system-status-banner {
        background: var(--color-hex-3e2723);
        color: var(--color-hex-ffcc80);
        border-color: var(--color-hex-5d4037);
    }

    .system-status-header {
        color: var(--color-hex-ffb74d);
    }

    .system-status-item.down .status-label {
        background: var(--color-hex-7f1d1d);
        color: var(--color-hex-fecaca);
    }

    .system-status-item.degraded .status-label {
        background: var(--color-hex-78350f);
        color: var(--color-hex-fef3c7);
    }

    .status-message {
        color: var(--color-hex-bcaaa4);
    }

    /* Sign-in / Sign-up dark mode */
    body#signin,
    body#signup,
    body#login-success {
        background: linear-gradient(135deg, var(--color-hex-1a1a1a) 0%, var(--color-hex-232323) 50%, var(--color-hex-1e1e1e) 100%);
    }

    body#signin h1,
    body#signup h1,
    body#login-success h1 {
        color: var(--color-border);
    }

    body#signin form,
    body#signup form {
        background: var(--color-hex-2a2a2a);
        border-color: var(--color-hex-3a3a3a);
    }

    body#signin form p,
    body#signup form p,
    body#signin #passkey-section p {
        color: var(--color-hex-9ca3af);
    }

    body#signin #passkey-section {
        background: var(--color-hex-2a2a2a);
        border-color: var(--color-hex-3a3a3a);
    }

    /* Pricing plans dark mode */
    .pricing-hero h1 { color: var(--color-border); }
    .pricing-subtitle { color: var(--color-hex-9ca3af); }

    section#pricing-plans .plan {
        background-color: var(--color-hex-2a2a2a);
        border-color: var(--color-hex-3a3a3a);
    }

    section#pricing-plans .plan.preferred {
        border-color: var(--color-hex-4caf50);
        box-shadow: 0 8px 24px var(--color-rgba-0-0-0-0-3);
    }

    section#pricing-plans .plan-badge { background: var(--color-hex-4caf50); }
    section#pricing-plans .plan h2 { color: var(--color-border); }
    section#pricing-plans .plan-tagline { color: var(--color-hex-9ca3af); }
    section#pricing-plans .price-amount { color: var(--color-border); }
    section#pricing-plans .price-meta { color: var(--color-hex-9ca3af); }
    section#pricing-plans .plan-features li {
        color: var(--color-border);
        border-bottom-color: var(--color-hex-3a3a3a);
    }
    section#pricing-plans .plan-features li::before { color: var(--color-hex-81c784); }

    section#pricing-plans .plan select {
        background: var(--color-hex-333);
        border-color: var(--color-hex-555);
        color: var(--color-border);
    }

    section#pricing-plans .plan button { background: var(--color-hex-4caf50); }
    section#pricing-plans .plan button:hover { background: var(--color-hex-43a047); }

    .pricing-footer p { color: var(--color-hex-9ca3af); }

    .admin-support-ticket-list {
        background: var(--color-hex-2a2a2a);
        border-color: var(--color-hex-3a3a3a);
    }

    .admin-support-ticket-list .btn-refresh {
        background: var(--color-hex-333);
        border-color: var(--color-hex-555);
        color: var(--color-border);
    }

    .admin-support-ticket-list .btn-refresh:hover {
        background: var(--color-hex-3a3a3a);
    }

    .support-ticket-table tr.ticket-row:hover td {
        background: var(--color-hex-1f2937);
    }

    .support-ticket-dialog-message {
        border-color: var(--color-hex-3a3a3a);
    }

    .support-ticket-dialog-message header,
    .support-ticket-dialog-empty {
        color: var(--color-hex-9ca3af);
    }

    .support-ticket-dialog-overview,
    .support-ticket-dialog-description h3,
    .support-ticket-dialog-thread h3,
    .support-ticket-dialog-body {
        color: var(--color-border);
    }

    .support-ticket-dialog-body a {
        color: var(--color-hex-93c5fd);
    }

    .support-ticket-detail {
        border-top-color: var(--color-hex-3a3a3a);
    }

    .support-ticket-detail .detail-meta,
    .support-ticket-detail .detail-message header {
        color: var(--color-hex-9ca3af);
    }

    .support-ticket-detail .detail-message {
        border-color: var(--color-hex-3a3a3a);
    }

    .status-badge.status-new,
    .status-badge.status-open {
        background: var(--color-hex-14532d);
        color: var(--color-hex-bbf7d0);
    }

    .status-badge.status-closed {
        background: var(--color-hex-374151);
        color: var(--color-border);
    }

    .status-badge.status-unknown {
        background: var(--color-hex-78350f);
        color: var(--color-hex-fde68a);
    }

    .summary-hover .summary-postit {
        background: var(--color-hex-4a4520);
        border-color: var(--color-hex-6b6320);
        color: var(--color-hex-fde68a);
        box-shadow: 2px 3px 10px var(--color-rgba-0-0-0-0-4);
    }

    /* Navigation loading bar */
    .nav-loading-bar {
        background: linear-gradient(90deg, var(--color-hex-fbbf24), var(--color-hex-4ade80));
        box-shadow: 0 1px 8px var(--color-rgba-0-0-0-0-4);
    }

    /* neo-file-upload component */
    .nfu-drop-zone {
        background: var(--color-hex-1e293b);
        border-color: var(--color-hex-475569);
        color: var(--color-hex-94a3b8);
    }
    .nfu-drop-zone:hover {
        border-color: var(--primary-color, var(--color-info));
        background: var(--color-hex-1e3a5f, #1e3a5f);
    }
    .nfu-drop-title {
        color: var(--color-hex-e2e8f0);
    }
    .nfu-drop-icon {
        background: var(--color-hex-334155, #334155);
    }
    .nfu-file-item {
        background: var(--color-hex-1e293b);
        border-color: var(--color-hex-475569);
    }
    .nfu-file-name {
        color: var(--color-hex-e2e8f0);
    }
    .nfu-file-meta {
        color: var(--color-hex-94a3b8);
    }
    .nfu-file-thumb-generic {
        color: var(--color-hex-94a3b8);
    }
    .nfu-file-thumb {
        background: var(--color-hex-334155, #334155);
    }
    .nfu-progress {
        background: var(--color-hex-475569);
    }
    .nfu-file-remove:hover {
        background: var(--color-hex-3b1414, #3b1414);
    }

}