:root {
    --primary: #4f46e5;
    --bg: #f8fafc;
    --sidebar-bg: #ffffff;
    --border: #e2e8f0;
}

body { font-family: 'Segoe UI', sans-serif; margin: 0; background: var(--bg); height: 100vh; overflow: hidden; }
.main-wrapper { display: flex; height: 100%; }

/* Sidebar */
.settings-panel { width: 300px; background: var(--sidebar-bg); border-right: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.control-group label { display: block; font-weight: 600; margin-bottom: 8px; color: #334155; }

/* NEW: Resize Inputs Layout */
.resize-row { display: flex; gap: 10px; }
.resize-row input { flex: 1; } /* Each input takes 50% width */

input[type="number"], input[type="text"] { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 4px; box-sizing: border-box; }
input[type="range"] { width: 100%; accent-color: var(--primary); }
small { color: #64748b; font-size: 0.75rem; display:block; margin-top:4px; }

/* Buttons */
button { border: none; padding: 12px 15px; border-radius: 6px; cursor: pointer; font-weight: 600; transition: 0.2s; margin-bottom: 10px; width: 100%; }
.btn-update { background: var(--primary); color: white; }
.btn-update:hover { background: #4338ca; }
.btn-zip { background: #0f766e; color: white; }
.btn-zip:disabled { background: #cbd5e1; cursor: not-allowed; }
.btn-clear { background: #ef4444; color: white; margin-bottom: 0; }
.actions { margin-top: auto; }

/* Content */
.content-area { flex: 1; padding: 30px; overflow-y: auto; }
.drop-zone { border: 2px dashed var(--border); background: white; padding: 30px; text-align: center; border-radius: 12px; margin-bottom: 30px; transition: 0.2s; }
.drop-zone.dragover { border-color: var(--primary); background: #eff6ff; }
.drop-zone .icon { font-size: 40px; color: var(--primary); margin-bottom: 10px; }

/* Result Card */
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.result-card { background: white; padding: 10px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); text-align: center; }
.img-preview { width: 100%; height: 150px; object-fit: contain; background-color: #eee; border-radius: 4px; margin-bottom: 10px; }
.name-input { margin-bottom: 5px; font-size: 0.9rem; text-align: center; }
.status { font-size: 0.8rem; color: #64748b; margin-bottom: 10px; }
.success { color: green; font-weight: bold; }
.btn-download { display: block; background: var(--primary); color: white; text-decoration: none; padding: 8px; border-radius: 4px; font-size: 0.9rem; }