:root { /* Light Mode Colors */
    --primary-color: #6366f1; --primary-hover: #4f46e5; --success-color: #16a34a; --success-hover: #15803d; --danger-color: #dc2626;
    --background-color: #f8fafc; --card-background: #ffffff; --text-primary: #1e293b; --text-secondary: #64748b; --border-color: #e2e8f0;
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}
body.dark-mode { /* Dark Mode Colors */
    --background-color: #0f172a; --card-background: #1e293b; --text-primary: #f1f5f9; --text-secondary: #94a3b8; --border-color: #334155;
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--background-color); color: var(--text-primary); margin: 0; }
.container { max-width: 1600px; margin: 0 auto; padding: 0 2rem; }
.app-navbar { background: var(--card-background); border-bottom: 1px solid var(--border-color); padding: 0.75rem 0; }
.app-navbar .container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.25rem; font-weight: 700; text-decoration: none; color: var(--primary-color); }
.app-navbar nav { display: flex; align-items: center; gap: 1rem; }
.nav-link { text-decoration: none; color: var(--text-secondary); font-weight: 500; transition: color 0.2s; }
.nav-link:hover { color: var(--primary-color); }

.app-container { display: flex; gap: 2rem; width: 100%; padding: 2rem; box-sizing: border-box; height: calc(100vh - 65px); }
.sidebar { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.main-content { flex-grow: 1; background: var(--card-background); border-radius: 1rem; box-shadow: var(--shadow); border: 1px solid var(--border-color); display: flex; flex-direction: column; overflow: hidden; }
.card { background: var(--card-background); border-radius: 1rem; padding: 1.5rem; box-shadow: var(--shadow); border: 1px solid var(--border-color); }
.upload-card { display: flex; flex-direction: column; height: 100%; }
.upload-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-shrink: 0; }
#drop-zone { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border: 2px dashed var(--border-color); border-radius: 0.75rem; cursor: pointer; }
#drop-zone.active { border-color: var(--primary-color); background-color: rgba(79, 70, 229, 0.05); }
#drop-zone span { font-size: 0.9rem; color: var(--text-secondary); }
#file-preview-list { overflow-y: auto; display: none; margin-top: 1rem; flex-grow: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; background: var(--background-color); padding: 1rem; border-radius: 8px; }
.thumbnail-item { position: relative; width: 80px; height: 80px; border-radius: 8px; overflow: hidden; background-color: var(--border-color); box-shadow: 0 2px 4px rgba(0,0,0,0.1); cursor: grab; }
.thumbnail-item img { width: 100%; height: 100%; object-fit: cover; }
.thumbnail-delete { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; background-color: rgba(0, 0, 0, 0.6); color: white; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; cursor: pointer; }
.settings-card { flex-shrink: 0; }
.settings-card label { font-weight: 500; margin-bottom: 0.5rem; display: block; font-size: 0.9rem; }
.control-group { margin-bottom: 1.25rem; }
input, select { width: 100%; padding: 0.5rem; box-sizing: border-box; border: 1px solid var(--border-color); border-radius: 0.5rem; background-color: var(--background-color); color: var(--text-primary); }
.segmented-control { display: flex; border: 1px solid var(--border-color); border-radius: 0.5rem; overflow: hidden; }
.segmented-control input { display: none; }
.segmented-control label { flex: 1; text-align: center; padding: 0.65rem 0.5rem; cursor: pointer; border-right: 1px solid var(--border-color); font-size: 0.9rem; }
.segmented-control label:last-child { border-right: none; }
.segmented-control input:checked + label { background-color: var(--primary-color); color: white; font-weight: 500; }
.info-text { font-size: 0.85rem; color: var(--text-secondary); padding: 0.5rem 0; }
.button, .button-secondary, .button-icon { border: none; border-radius: 0.5rem; cursor: pointer; font-weight: 600; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; }
.button { padding: 0.75rem; font-size: 1rem; color: #fff; background-color: var(--primary-color); }
.button.download { background-color: var(--success-color); }
.button:hover:not(:disabled) { background-color: var(--primary-hover); }
.button.download:hover { background-color: var(--success-hover); }
.button-secondary { background-color: var(--background-color); border: 1px solid var(--border-color); color: var(--text-primary); padding: 0.5rem 1rem; font-size: 0.9rem; }
.button-icon { background: transparent; color: var(--text-secondary); padding: 0.25rem; width: 32px; height: 32px; font-size: 1.5rem; }
.button-icon:hover { color: var(--text-primary); background-color: var(--background-color); }
#results-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); }
#results-header h2 { margin: 0; }
#results-grid-wrapper { flex-grow: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#empty-state { display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--text-secondary); }
#empty-state svg { width: 48px; height: 48px; margin-bottom: 1rem; }
#empty-state p { font-size: 1rem; }
#progress-bar-container { width: 100%; max-width: 600px; padding: 1rem 1.5rem 0; }
#progress-bar-bg { background: var(--border-color); border-radius: 4px; overflow: hidden; }
#progress-bar { width: 0%; height: 8px; background: var(--primary-color); border-radius: 4px; transition: width 0.3s; }
#progress-text { font-size: 0.9rem; text-align: center; margin-bottom: 0.5rem; color: var(--text-secondary); }
#video-preview-container { width: 100%; max-width: 600px; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
#video-preview, #gif-preview { width: 100%; border: 1px solid var(--border-color); border-radius: 8px; background: #000; }
#gif-preview { display: none; }
#downloadBtn { width: 100%; }