:root {
  --bg: #f1f5f9;
  --bg-alt: #e2e8f0;
  --text: #0f172a;
  --primary: #38bdf8;
}

[data-theme="dark"] {
  --bg: #1e293b;
  --bg-alt: #0f172a;
  --text: #f1f5f9;
  --primary: #38bdf8;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  margin:0;padding:0;
}

.container {
  max-width:600px;margin:50px auto;background:var(--bg-alt);padding:30px;border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,0.5);
}

h1{text-align:center;color:var(--primary);margin-bottom:20px;}

.drag-drop {
  border: 2px dashed var(--primary);
  padding: 30px;
  text-align: center;
  border-radius: 12px;
  cursor: pointer;
  margin-bottom:15px;
  transition: background 0.3s;
}

.drag-drop.dragover { background: rgba(56,189,248,0.1); }

input[type=file]{display:none;}

label{display:block;margin-top:10px;}
input, select{width:100%;padding:10px;margin-top:5px;border-radius:6px;border:1px solid #64748b;}

button {
  width:100%;padding:12px;margin-top:20px;background:var(--primary);color:var(--text);
  border:none;font-weight:bold;border-radius:8px;cursor:pointer;
}
button:hover{background:#0ea5e9;}

.progress-container{
  width:100%;background:#334155;border-radius:8px;overflow:hidden;margin-top:20px;height:25px;
  position:relative;
}
.progress-bar{
  height:100%;width:0%;background:var(--primary);text-align:center;color:var(--text);
  line-height:25px;font-weight:bold;
  transition: width 0.3s;
}
.result{margin-top:20px;text-align:center;}
.result img{max-width:100%;border-radius:8px;margin-top:10px;}
.toggle-btn{
  position:absolute;top:10px;right:10px;padding:8px 12px;background:var(--primary);
  border:none;border-radius:6px;color:var(--text);cursor:pointer;
}