/* 08-dark-mode: karanlik tema override'lari (components sonrasi yuklenmeli) */
        /* ============================================
           KARANLIK MOD
           ============================================ */
        body.dark-mode {
            --secondary-color: #101827;
            --text-dark: #e2e8f0;
            --text-light: #94a3b8;
            --border-color: #263449;
            --background: #0b111f;
            --surface-alt: #172234;
            --surface-white: #101827;
            background:
                radial-gradient(circle at 15% 0%, rgba(6, 182, 212, 0.08) 0%, transparent 45%),
                radial-gradient(circle at 85% 100%, rgba(14, 116, 144, 0.10) 0%, transparent 45%),
                linear-gradient(160deg, #0a0f1a 0%, #0b111f 55%, #0a161a 100%);
        }

        body.dark-mode .container {
            box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(38, 52, 73, 0.8);
        }

        body.dark-mode .settings-section,
        body.dark-mode .mod-item,
        body.dark-mode .empty-message,
        body.dark-mode .action-buttons,
        body.dark-mode .tabs-navigation,
        body.dark-mode .modal-body,
        body.dark-mode .settings-subcard,
        body.dark-mode .filename-input-wrap,
        body.dark-mode .modal-filename-bar {
            background: var(--surface-alt);
        }

        body.dark-mode .bg-audio-track-row {
            background: var(--surface-white);
        }

        body.dark-mode .modal-content,
        body.dark-mode .loader-style-select,
        body.dark-mode .mod-item-name-input,
        body.dark-mode .mod-item-id-input,
        body.dark-mode .mod-item-weapon-select,
        body.dark-mode .mod-search-input,
        body.dark-mode .btn-secondary,
        body.dark-mode .btn-delete-selected,
        body.dark-mode .btn-bulk-id,
        body.dark-mode .btn-bg-audio-remove,
        body.dark-mode .btn-reset-settings,
        body.dark-mode .bg-audio-track-name-input,
        body.dark-mode #outputFileName {
            background: var(--surface-white);
            color: var(--text-dark);
        }

        /* Karanlık modda shorthand arkaplan oku silmesin diye ikon yeniden verilir */
        body.dark-mode .loader-style-select {
            background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2394a3b8' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 12px;
        }

        body.dark-mode .upload-area {
            background: var(--surface-alt);
        }

        body.dark-mode .tab-btn {
            color: var(--text-light);
        }

        body.dark-mode ::placeholder {
            color: var(--text-light);
            opacity: 0.7;
        }

        body.dark-mode .bg-image-slot {
            background: var(--surface-white);
        }

        body.dark-mode pre#previewCode {
            background: #0b111f;
            color: #e2e8f0;
        }

        .dark-mode-toggle {
            position: absolute;
            top: 18px;
            right: 20px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border: 1.5px solid rgba(255, 255, 255, 0.5);
            background: rgba(255, 255, 255, 0.12);
            color: white;
            border-radius: 999px;
            font-family: inherit;
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            z-index: 2;
        }

        .dark-mode-toggle:hover {
            background: rgba(255, 255, 255, 0.22);
        }

        body.dark-mode .bulk-id-input {
            background: var(--surface-white);
            color: var(--text-dark);
        }