/* ============================================================
   theme.css — dark-theme overrides for the LEGACY per-tool
   stylesheets (tweet-to-video, twitch-downloader, webm-*,
   background-remover, rewards-creator). Loaded LAST so it wins
   over their light "white card" styling without touching their
   layout rules.

   IMPORTANT: .tweet-container (and everything inside it) is
   deliberately left alone — the tweet-to-video tool records that
   DOM subtree with html2canvas and it must keep looking like a
   real white Twitter card in the exported video.
   ============================================================ */

/* Old pages wrapped content in <main> styled as a big white box */
main {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-bottom: 0;
}

/* Legacy page headers (replaced by .page-hero on reworked pages) */
header h1 { text-shadow: none; }

/* ---- Light surface panels → dark panels ---- */
.input-section,
.converter-section,
.downloader-section,
.remover-section,
.tweet-preview,
.video-info,
.download-progress,
.download-complete,
.progress-section,
.result-section,
.file-info,
.gif-info,
.preview-info,
.controls-panel,
.canvas-panel,
.properties-panel,
.panel-section,
.modal-content,
.donation-section {
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: none;
    color: var(--text);
}

.donation-section h3 { color: var(--text); }
.donation-section p { color: var(--muted); }

.panel-section { background: var(--panel-2); }

/* Headings / copy inside legacy sections */
.input-section h2, .converter-section h2, .downloader-section h2, .remover-section h2,
.download-options h4, .download-progress h3, .download-complete h3,
.progress-section h3, .result-section h3,
.creator-layout h3, .creator-layout h4,
.file-details strong, .quality-name {
    color: var(--text);
}

.input-section p, .converter-section > p, .downloader-section > p, .remover-section > p,
.progress-section p, .file-details span, .quality-details, .progress-details,
.download-stats, .option-row label, .conversion-options label, .form-group label,
.url-examples, .url-examples li, .url-examples p {
    color: var(--muted);
}

/* ---- URL examples box (twitch/youtube pages) ---- */
.url-examples {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* ---- Upload dropzones (webm converters) ---- */
.upload-area {
    background: var(--panel-2);
    border: 2px dashed var(--border-strong);
    color: var(--muted);
}
.upload-area:hover, .upload-area.drag-over {
    border-color: var(--accent);
    background: rgba(102, 126, 234, 0.08);
}
.upload-area h3 { color: var(--text); }
.upload-area p { color: var(--muted); }

/* ---- Quality option rows (downloaders) ---- */
.quality-option {
    background: var(--panel-2);
    border: 1.5px solid var(--border);
    color: var(--text);
}
.quality-option:hover { border-color: var(--border-strong); background: var(--panel-3); }
.quality-option.selected {
    border-color: var(--accent);
    background: rgba(102, 126, 234, 0.14);
}

/* ---- Progress bars ---- */
.progress-bar { background: var(--panel-3); border: 1px solid var(--border); }
.progress-fill { background: var(--accent-grad); }

/* ---- Video preview blocks ---- */
.video-details h3 { color: var(--text); }
.video-details p { color: var(--muted); }

/* ---- Success / error blocks ---- */
.error-message, .export-status.error {
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: #fca5a5;
}
.success-message, .export-status.success {
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: #a5f3c9;
}

/* ---- Rewards creator specifics ---- */
.creator-layout .layer-item { background: var(--panel-3); color: var(--text); border-color: var(--border); }
.creator-layout .layer-item.selected { border-color: var(--accent); }
.creator-layout input[type="number"], .creator-layout input[type="color"] {
    background: var(--bg); color: var(--text); border: 1px solid var(--border-strong);
}
.tool-btn, .checkbox-item {
    background: var(--panel-3);
    border: 1px solid var(--border-strong);
    color: var(--text);
}
.tool-btn:hover, .checkbox-item:hover { background: #2a3450; border-color: var(--accent); }
.tool-btn.active, .checkbox-item.selected {
    background: rgba(102, 126, 234, 0.2);
    border-color: var(--accent);
    color: var(--text);
}
.checkbox-item label, .checkbox-item span { color: var(--text); }

/* ---- Background remover option buttons ---- */
.option-btn {
    background: var(--panel-2);
    border: 1.5px solid var(--border-strong);
    color: var(--text);
}
.option-btn:hover { border-color: var(--accent); background: rgba(102, 126, 234, 0.1); }

/* Keep the recorded tweet card light — see note at top */
.tweet-container { background: #ffffff; }