body.dark-mode {
    --page-bg: #15181d;
    --panel-bg: rgba(22, 25, 30, 0.96);
    --panel-border: #3a414c;
    --panel-soft: #252a32;
    --panel-raised: #202631;
    --text-main: #f5f7fb;
    --text-muted: #b8c0cc;
    --shadow-soft: rgba(0, 0, 0, 0.32);
    --shadow-panel: rgba(0, 0, 0, 0.42);
    --accent: #7aa7ff;
    --accent-soft: rgba(122, 167, 255, 0.14);
}

body.dark-mode .topbar,
body.dark-mode .coords-panel,
body.dark-mode .colorPickerBar,
body.dark-mode .palette-popup,
body.dark-mode .login-popup,
body.dark-mode .login-settingsPopup,
body.dark-mode .avatar-editor-popup,
body.dark-mode .tools-dropdown {
    background: var(--panel-bg);
    border-color: var(--panel-border);
    color: var(--text-main);
}

body.dark-mode .title,
body.dark-mode .login-button,
body.dark-mode .tools-menu-button,
body.dark-mode .coord-field input,
body.dark-mode .btn,
body.dark-mode .login-header h2,
body.dark-mode .login-form input {
    color: var(--text-main);
}

body.dark-mode .logo,
body.dark-mode .login-logo,
body.dark-mode .login-button,
body.dark-mode .tools-menu-button,
body.dark-mode .avatar-editor-close,
body.dark-mode .avatar-pixel-grid,
body.dark-mode .expand-btn,
body.dark-mode .btn,
body.dark-mode .btn-cancel,
body.dark-mode .coord-field input,
body.dark-mode .cooldown-indicator,
body.dark-mode .login-form input {
    background: var(--panel-soft);
    border-color: var(--panel-border);
}

body.dark-mode .expand-btn svg path {
    stroke: #F5F7FBFF;
}

body.dark-mode .logo,
body.dark-mode .login-logo {
    background: #eef1f7;
    border-color: #566172;
    box-shadow:
            0 5px 14px rgba(0, 0, 0, 0.34),
            inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

body.dark-mode .login-close {
    background: #3a2529;
    border-color: #75424a;
    color: #ffb8c0;
    box-shadow:
            0 3px 10px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.dark-mode .login-button:hover,
body.dark-mode .tools-menu-button:hover,
body.dark-mode .side-panel.menu-open .tools-menu-button,
body.dark-mode .expand-btn:hover,
body.dark-mode .btn:hover,
body.dark-mode .login-close:hover,
body.dark-mode .side-action:hover,
body.dark-mode .side-action.active {
    background: #303743;
    border-color: #4a5361;
    color: var(--text-main);
    box-shadow: none;
}

body.dark-mode .btn-cancel:hover {
    background: #2a1719;
    border-color: #7f1d1d;
    color: var(--text-main);
}

body.dark-mode .btn-eraser.active,
body.dark-mode .admin-ban-btn {
    background: #2a1719;
    border-color: #75424a;
    color: #ffb4ab;
}

body.dark-mode .admin-ban-btn:hover:not(:disabled) {
    background: #3a2024;
    border-color: #98545f;
}

body.dark-mode .admin-unban-btn {
    background: #17281d;
    border-color: #315f3c;
    color: #8ee0a2;
}

body.dark-mode .admin-unban-btn:hover:not(:disabled) {
    background: #1f3527;
    border-color: #4f8a5e;
}

body.dark-mode .login-close:hover {
    background: #4a2c32;
    border-color: #98545f;
    color: #ffd6da;
}

body.dark-mode .current-color:hover,
body.dark-mode .swatch:hover {
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.16);
}

body.dark-mode .login-popup {
    background: #171b22;
    border-color: #4a5361;
    box-shadow:
            0 24px 70px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.dark-mode .login-overlay {
    background: rgba(7, 9, 12, 0.58);
}

body.dark-mode .avatar-editor-overlay {
    background: rgba(7, 9, 12, 0.58);
}

body.dark-mode .palette-popup,
body.dark-mode .coords-panel,
body.dark-mode .colorPickerBar,
body.dark-mode .login-button,
body.dark-mode .tools-dropdown,
body.dark-mode .tools-menu-button,
body.dark-mode .login-settingsPopup,
body.dark-mode .avatar-editor-popup {
    box-shadow: 0 8px 28px var(--shadow-soft);
}

body.dark-mode .sep {
    background: var(--panel-border);
}

body.dark-mode .coord-field,
body.dark-mode .coord-field-info,
body.dark-mode .coords,
body.dark-mode .login-header p,
body.dark-mode .login-footer,
body.dark-mode .login-form label,
body.dark-mode .login-form label::after {
    color: var(--text-muted);
}

body.dark-mode .coord-field-info {
    border-left-color: var(--panel-border);
}

body.dark-mode .login-footer button {
    color: var(--text-main);
}

body.dark-mode .login-footer .forgot-password-btn,
body.dark-mode .login-footer #forgotPasswordBackBtn,
body.dark-mode .login-footer a {
    background: #202631;
    border-color: #3a414c;
    color: #e7ecf5;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

body.dark-mode .login-footer .forgot-password-btn:hover,
body.dark-mode .login-footer #forgotPasswordBackBtn:hover,
body.dark-mode .login-footer a:hover {
    background: #28303c;
    border-color: #7aa7ff;
}

body.dark-mode .password-reset-popup .login-header p {
    color: var(--text-muted);
}

body.dark-mode .login-form input::placeholder {
    color: #8993a3;
}

body.dark-mode .login-form input:focus {
    border-color: #7aa7ff;
    box-shadow:
            0 0 0 3px rgba(122, 167, 255, 0.2),
            inset 0 1px 2px rgba(0, 0, 0, 0.22);
}

body.dark-mode .login-form.was-submitted label:has(input.field-error) {
    color: #ffb4ab;
}

body.dark-mode .login-form.was-submitted label:has(input.field-error) input {
    background: #2a1719;
    border-color: #f97066;
    box-shadow:
            0 0 0 3px rgba(249, 112, 102, 0.16),
            inset 0 1px 2px rgba(0, 0, 0, 0.22);
}

body.dark-mode .login-form.was-submitted label:has(input.field-error)::after {
    color: #ffb4ab;
}

body.dark-mode .login-settingsPopup::before {
    background: var(--panel-bg);
    border-color: var(--panel-border);
}

body.dark-mode .account-card,
body.dark-mode .settings-action:hover {
    background: var(--panel-soft);
    border-color: var(--panel-border);
}

body.dark-mode .settings-action-icon {
    background: #1d222a;
    border-color: var(--panel-border);
    color: var(--accent);
}

body.dark-mode .settings-action-danger {
    color: #ff8f99;
}

body.dark-mode .settings-action-danger .settings-action-icon {
    background: #2a1719;
    border-color: #75424a;
    color: #ff8f99;
}

body.dark-mode .settings-action-danger:hover {
    background: #2a1719;
    border-color: #75424a;
}

body.dark-mode .login-avatar,
body.dark-mode .avatar-preview,
body.dark-mode .avatar-color {
    border-color: var(--panel-border);
}

body.dark-mode .avatar-pixel-cell {
    box-shadow: inset 0 0 0 1px rgba(245, 247, 251, 0.1);
}

body.dark-mode .avatar-editor-btn-soft {
    background: var(--panel-soft);
    border-color: var(--panel-border);
    color: var(--text-main);
}

.theme-icon-moon,
body.dark-mode .theme-icon-sun {
    display: none;
}

body.dark-mode .theme-icon-moon {
    display: block;
}

body.dark-mode .login-button,
body.dark-mode .tools-menu-button {
    color: var(--text-main);
    background:
            linear-gradient(135deg, rgba(37, 42, 50, 0.98), rgba(25, 31, 40, 0.96)) padding-box,
            linear-gradient(135deg, rgba(122, 167, 255, 0.82), rgba(66, 214, 107, 0.62), rgba(255, 202, 58, 0.68)) border-box;
    border-color: transparent;
    box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.34),
            0 4px 12px rgba(122, 167, 255, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.dark-mode .login-button:hover,
body.dark-mode .tools-menu-button:hover,
body.dark-mode .side-panel.menu-open .tools-menu-button {
    background:
            linear-gradient(135deg, rgba(48, 55, 67, 0.98), rgba(30, 38, 50, 0.98)) padding-box,
            linear-gradient(135deg, #7aa7ff 0%, #42d66b 64%, #ffca3a 100%) border-box;
    border-color: transparent;
    box-shadow:
            0 16px 34px rgba(0, 0, 0, 0.42),
            0 5px 16px rgba(122, 167, 255, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.dark-mode .login-button.logged-in {
    background:
            linear-gradient(135deg, rgba(31, 43, 35, 0.98), rgba(26, 34, 46, 0.98)) padding-box,
            linear-gradient(135deg, #42d66b 0%, #7aa7ff 58%, #ffca3a 100%) border-box;
}

body.dark-mode .tools-menu-button svg {
    color: #9bbcff;
    background: rgba(122, 167, 255, 0.14);
    border-color: rgba(122, 167, 255, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.dark-mode .login-dot {
    background: linear-gradient(135deg, #7aa7ff, #42d66b);
    box-shadow:
            0 0 0 3px rgba(122, 167, 255, 0.1),
            0 0 14px rgba(66, 214, 107, 0.38);
}

body.dark-mode .login-avatar {
    border-color: rgba(245, 247, 251, 0.74);
    box-shadow:
            0 0 0 1px rgba(122, 167, 255, 0.28),
            0 6px 14px rgba(0, 0, 0, 0.34);
}

body.dark-mode .login-avatar::after {
    border-color: #1d222a;
}