:root,
:root[data-theme="Dark"] {
    --app-shell-background:
        radial-gradient(circle at top, rgba(52, 72, 108, 0.45), transparent 40%),
        linear-gradient(180deg, #0b1020 0%, #090b12 100%);
    --home-panel-surface: rgba(12, 17, 28, 0.86);
    --home-panel-border: rgba(255, 255, 255, 0.08);
    --home-panel-shadow: 0 26px 60px rgba(0, 0, 0, 0.34);
    --home-entry-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
    --home-entry-border: rgba(255, 255, 255, 0.1);
    --home-entry-hover-surface: linear-gradient(180deg, rgba(122, 162, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%);
    --home-entry-hover-border: rgba(122, 162, 255, 0.35);
    --home-entry-index-surface: rgba(255, 255, 255, 0.08);
    --rtc-status-connected: #4caf50;
    --rtc-status-listening: #ffb300;
    --rtc-status-error: #ff6b6b;
    --rtc-primary-surface: #4caf50;
    --rtc-primary-border: rgba(76, 175, 80, 0.5);
    --rtc-primary-shadow: 0 10px 20px rgba(76, 175, 80, 0.24);
    --rtc-secondary-surface: rgba(255, 255, 255, 0.06);
    --rtc-secondary-hover-surface: rgba(255, 255, 255, 0.12);
    --rtc-transcript-surface: rgba(0, 0, 0, 0.26);
    --rtc-transcript-border: rgba(255, 255, 255, 0.08);
    --rtc-transcript-empty: rgba(255, 255, 255, 0.45);
    --rtc-transcript-item-surface: rgba(255, 255, 255, 0.04);
    --rtc-transcript-item-border: rgba(255, 255, 255, 0.06);
    --rtc-transcript-assistant-border: rgba(76, 175, 80, 0.18);
    --rtc-transcript-user-surface: rgba(122, 162, 255, 0.12);
    --rtc-transcript-user-border: rgba(122, 162, 255, 0.28);
    --chat-expanded-surface: rgba(10, 10, 10, 0.45);
    --chat-expanded-border: rgba(255, 255, 255, 0);
    --chat-toggle-surface: rgba(40, 40, 40, 0.6);
    --chat-toggle-border: rgba(255, 255, 255, 0.1);
    --chat-message-surface: rgba(0, 0, 0, 0.45);
    --chat-message-border: rgba(255, 255, 255, 0.08);
    --chat-message-bot-surface: rgba(0, 0, 0, 0.45);
    --chat-message-user-surface: rgba(0, 0, 0, 0.45);
    --chat-message-user-border: rgba(255, 255, 255, 0.08);
    --chat-link-color: #9ecbff;
    --chat-link-hover-color: #c7e0ff;
    --chat-blockquote-border: rgba(255, 255, 255, 0.22);
    --chat-blockquote-color: rgba(255, 255, 255, 0.82);
    --chat-pre-surface: rgba(0, 0, 0, 0.38);
    --chat-code-surface: rgba(0, 0, 0, 0.3);
    --chat-table-border: rgba(255, 255, 255, 0.16);
    --chat-table-header-surface: rgba(255, 255, 255, 0.08);
    --chat-system-surface: rgba(0, 0, 0, 0.3);
    --chat-system-border: rgba(255, 255, 255, 0.15);
    --chat-system-color: #aaa;
    --chat-thought-surface: rgba(255, 255, 255, 0.05);
    --chat-thought-title: rgba(255, 255, 255, 0.86);
    --chat-thought-detail: rgba(255, 255, 255, 0.68);
    --chat-input-surface: rgba(30, 30, 30, 0.7);
    --chat-input-border: rgba(255, 255, 255, 0.1);
    --chat-input-text: #fff;
    --chat-toolbar-color: #888;
    --chat-outbox-border: rgba(255, 193, 7, 0.35);
    --chat-outbox-shadow: 0 0 12px rgba(255, 193, 7, 0.08);
    --status-bar-surface: rgba(0, 0, 0, 0.4);
    --status-bar-border: rgba(255, 255, 255, 0.1);
    --status-bar-shadow: none;
    --status-online-color: #4caf50;
    --status-toggle-surface: rgba(255, 255, 255, 0.15);
    --status-toggle-active-surface: rgba(255, 255, 255, 0.45);
    --status-toggle-knob: #fff;
    --status-divider: rgba(255, 255, 255, 0.1);
    --action-button-surface: rgba(255, 255, 255, 0.05);
    --action-button-border: rgba(255, 255, 255, 0.1);
    --action-button-hover-surface: rgba(255, 255, 255, 0.15);
    --settings-item-surface: rgba(255, 255, 255, 0.04);
    --settings-item-border: rgba(255, 255, 255, 0.1);
    --settings-input-surface: rgba(0, 0, 0, 0.35);
    --settings-input-border: rgba(255, 255, 255, 0.16);
    --settings-button-surface: rgba(0, 0, 0, 0.35);
    --settings-button-border: rgba(255, 255, 255, 0.16);
    --settings-button-hover-surface: rgba(255, 255, 255, 0.14);
    --settings-hint-success: #7fd18c;
    --settings-hint-error: #ff6b6b;
    --settings-page-background:
        linear-gradient(180deg, rgba(12, 15, 60, 0.08), rgba(68, 49, 140, 0.16)),
        url("../../models/images/settings-ui/bg-night.png") center center / cover no-repeat;
    --settings-page-overlay:
        radial-gradient(circle at 50% 8%, rgba(255, 189, 237, 0.18), transparent 30%),
        radial-gradient(circle at 10% 72%, rgba(255, 198, 139, 0.14), transparent 22%),
        linear-gradient(180deg, rgba(11, 13, 54, 0.1), rgba(45, 31, 103, 0.14));
    --settings-page-text: #fff7ff;
    --settings-page-stars-primary: rgba(255, 255, 255, 0.9);
    --settings-page-stars-secondary: rgba(255, 213, 251, 0.82);
    --settings-page-stars-opacity: 0.36;
    --settings-title-color: #fffafc;
    --settings-title-shadow:
        0 0 10px rgba(255, 210, 238, 0.42),
        0 0 20px rgba(255, 183, 226, 0.2);
    --settings-title-star-color: #ffeab0;
    --settings-title-star-shadow: 0 0 10px rgba(255, 222, 157, 0.85);
    --settings-hero-border: rgba(255, 255, 255, 0.55);
    --settings-hero-surface: rgba(159, 119, 210, 0.24);
    --settings-hero-shadow:
        0 13px 35px rgba(20, 18, 60, 0.45),
        0 0 26px rgba(255, 181, 233, 0.18),
        inset 0 1px 18px rgba(255, 255, 255, 0.24);
    --settings-hero-avatar-base: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.98), rgba(250, 237, 255, 0.82));
    --settings-hero-avatar-base-shadow: inset 0 0 16px rgba(255, 255, 255, 0.42);
    --settings-hero-title-color: #fff7ff;
    --settings-hero-title-shadow: 0 1px 8px rgba(31, 17, 72, 0.4);
    --settings-hero-edit-color: #ffe6f4;
    --settings-hero-subtitle-color: rgba(255, 247, 255, 0.8);
    --settings-hero-heart-color: #ffb3d4;
    --settings-hero-heart-shadow: 0 0 8px rgba(255, 169, 214, 0.8);
    --settings-hero-badge-border: rgba(255, 255, 255, 0.33);
    --settings-hero-badge-surface: rgba(80, 60, 156, 0.28);
    --settings-hero-badge-color: rgba(255, 255, 255, 0.9);
    --settings-group-border: rgba(255, 255, 255, 0.38);
    --settings-group-surface:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
        rgba(128, 105, 190, 0.43);
    --settings-group-shadow:
        0 12px 28px rgba(22, 18, 70, 0.35),
        inset 0 1px 15px rgba(255, 255, 255, 0.14);
    --settings-group-panel-border: rgba(255, 255, 255, 0.22);
    --settings-group-panel-surface:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        rgba(110, 90, 182, 0.28);
    --settings-group-panel-shadow:
        inset 0 1px 14px rgba(255, 255, 255, 0.12),
        0 10px 22px rgba(19, 13, 72, 0.16);
    --settings-group-title-color: #fff8ff;
    --settings-group-title-shadow: 0 0 12px rgba(255, 220, 161, 0.5);
    --settings-row-border: rgba(255, 255, 255, 0.14);
    --settings-row-label-color: #fff9ff;
    --settings-select-surface: rgba(255, 255, 255, 0.04);
    --settings-select-border: rgba(255, 255, 255, 0.18);
    --settings-select-color: #fff7ff;
    --settings-select-focus-border: rgba(255, 255, 255, 0.28);
    --settings-select-focus-ring: rgba(255, 255, 255, 0.08);
    --settings-toggle-on-surface: linear-gradient(180deg, #ff98b2, #f48da8);
    --settings-toggle-off-surface: rgba(255, 255, 255, 0.24);
    --settings-toggle-border: rgba(255, 255, 255, 0.28);
    --settings-toggle-knob: #ffffff;
    --settings-toggle-knob-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    --settings-memory-btn-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
    --settings-memory-btn-hover-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.1));
    --settings-memory-btn-border: rgba(255, 255, 255, 0.22);
    --settings-memory-btn-color: #fff8ff;
    --settings-nav-surface: rgba(218, 210, 242, 0.68);
    --settings-nav-border: rgba(255, 255, 255, 0.5);
    --settings-nav-shadow:
        0 12px 30px rgba(19, 13, 72, 0.35),
        inset 0 1px 15px rgba(255, 255, 255, 0.36);
    --settings-nav-item-color: rgba(74, 61, 112, 0.72);
    --settings-nav-item-active-color: #705092;
    --settings-nav-item-active-surface:
        radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.6), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(235, 182, 245, 0.32));
    --settings-nav-item-active-shadow: inset 0 0 22px rgba(255, 255, 255, 0.24), 0 0 18px rgba(255, 185, 232, 0.24);
    --settings-nav-icon-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
    --settings-hint-color: rgba(255, 247, 255, 0.78);
    --panel-page-background:
        linear-gradient(180deg, rgba(12, 15, 60, 0.08), rgba(68, 49, 140, 0.16)),
        url("../../models/images/settings-ui/bg-night.png") center center / cover no-repeat;
    --panel-page-overlay:
        radial-gradient(circle at 50% 8%, rgba(255, 189, 237, 0.18), transparent 30%),
        radial-gradient(circle at 10% 72%, rgba(255, 198, 139, 0.14), transparent 22%),
        linear-gradient(180deg, rgba(11, 13, 54, 0.1), rgba(45, 31, 103, 0.14));
    --panel-page-text: #fff7ff;
    --panel-page-stars-primary: rgba(255, 255, 255, 0.9);
    --panel-page-stars-secondary: rgba(255, 213, 251, 0.82);
    --panel-page-stars-opacity: 0.36;
    --panel-page-title-color: #fffafc;
    --panel-page-title-shadow:
        0 0 10px rgba(255, 210, 238, 0.38),
        0 0 18px rgba(255, 183, 226, 0.16);
    --panel-page-title-star-color: #ffeab0;
    --panel-page-title-star-shadow: 0 0 10px rgba(255, 222, 157, 0.85);
    --panel-modal-border: rgba(255, 255, 255, 0.38);
    --panel-modal-surface:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
        rgba(128, 105, 190, 0.43);
    --panel-modal-shadow:
        0 12px 28px rgba(22, 18, 70, 0.35),
        inset 0 1px 15px rgba(255, 255, 255, 0.14);
    --panel-header-divider: rgba(255, 255, 255, 0.12);
    --panel-header-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
    --panel-kicker-border: rgba(255, 255, 255, 0.33);
    --panel-kicker-surface: rgba(80, 60, 156, 0.28);
    --panel-kicker-color: rgba(255, 255, 255, 0.9);
    --panel-title-color: #fff8ff;
    --panel-title-shadow: 0 0 12px rgba(255, 220, 161, 0.18);
    --panel-title-icon-surface: rgba(255, 255, 255, 0.14);
    --panel-title-icon-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 18px rgba(255, 181, 233, 0.12);
    --panel-empty-border: rgba(255, 255, 255, 0.12);
    --panel-empty-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
    --panel-empty-color: rgba(255, 255, 255, 0.7);
    --panel-item-border: rgba(255, 255, 255, 0.22);
    --panel-item-surface:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
        rgba(128, 105, 190, 0.24);
    --panel-item-shadow:
        0 12px 24px rgba(22, 18, 70, 0.22),
        inset 0 1px 10px rgba(255, 255, 255, 0.08);
    --panel-item-hover-border: rgba(255, 255, 255, 0.3);
    --panel-item-hover-surface:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
        rgba(128, 105, 190, 0.28);
    --panel-date-color: rgba(255, 247, 255, 0.94);
    --panel-chip-border: rgba(255, 255, 255, 0.2);
    --panel-chip-surface: rgba(255, 255, 255, 0.1);
    --panel-chip-color: rgba(255, 255, 255, 0.76);
    --panel-content-color: rgba(255, 255, 255, 0.86);
    --panel-content-border: rgba(255, 255, 255, 0.16);
    --panel-content-surface:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(128, 105, 190, 0.18);
    --panel-content-shadow:
        0 12px 24px rgba(22, 18, 70, 0.18),
        inset 0 1px 10px rgba(255, 255, 255, 0.08);
    --panel-divider: rgba(255, 255, 255, 0.12);
    --todo-section-border: rgba(255, 255, 255, 0.2);
    --todo-section-surface: rgba(80, 60, 156, 0.24);
    --todo-section-color: rgba(255, 245, 255, 0.88);
    --todo-count-surface: rgba(255, 255, 255, 0.2);
    --todo-count-color: rgba(255, 255, 255, 0.92);
    --todo-checkbox-border: rgba(255, 255, 255, 0.36);
    --todo-checkbox-checked-surface: linear-gradient(180deg, rgba(255, 182, 214, 0.72), rgba(240, 148, 183, 0.72));
    --todo-checkbox-checked-border: rgba(255, 255, 255, 0.44);
    --todo-checkbox-check-color: #fff;
    --todo-text-color: rgba(255, 247, 255, 0.9);
    --todo-action-surface: rgba(255, 255, 255, 0.12);
    --todo-action-border: rgba(255, 255, 255, 0.14);
    --todo-action-color: rgba(255, 255, 255, 0.68);
    --todo-action-hover-surface: rgba(255, 255, 255, 0.2);
    --todo-action-hover-color: #fff;
    --diary-item-hover-surface: rgba(255, 255, 255, 0.05);
    --diary-arrow-color: #555;
    --diary-content-color: #ccc;
    --back-to-list-surface: rgba(255, 255, 255, 0.08);
    --back-to-list-border: rgba(255, 255, 255, 0.2);
    --todo-section-color: rgba(255, 255, 255, 0.55);
    --todo-border: rgba(255, 255, 255, 0.05);
    --todo-accent: #ff4d4f;
    --todo-text-color: #ccc;
    --todo-action-color: #666;
    --todo-add-surface: rgba(255, 255, 255, 0.05);
    --todo-add-border: rgba(255, 255, 255, 0.2);
    --todo-add-color: #aaa;
    --login-overlay-surface: rgba(0, 0, 0, 0.75);
    --login-card-surface: rgba(15, 15, 15, 0.95);
    --login-card-border: rgba(255, 255, 255, 0.12);
    --login-card-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    --login-subtitle-color: #aaa;
    --login-input-surface: rgba(0, 0, 0, 0.35);
    --login-input-border: rgba(255, 255, 255, 0.15);
    --login-hint-color: #9aa0a6;
    --login-button-surface: #4caf50;
    --login-button-shadow: 0 8px 20px rgba(76, 175, 80, 0.25);
}