* { box-sizing: border-box; }

:root {
  --max: 640px;
  --gap: 12px;
  --bg: #121212;
  --text: #e0e0e0;
  --accent: #4a90e2;
  --border: #333;
  --button-bg: #1e1e1e;
  --button-hover: #2a2a2a;
}

html, body { height: 100%; }

body {
  margin: 0;
  padding: 16px;
  font: 16px system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4;
  background: var(--bg);
  color: var(--text);
}

.container {
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}

input[type="file"],
button,
#status,
progress {
  display: block;
  width: 100%;
  margin: 0 0 var(--gap);
}

button {
  padding: 12px 16px;
  min-height: 44px;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--text);
  cursor: pointer;
}

button:hover { background: var(--button-hover); }
button:active { transform: translateY(1px); }

#status {
  min-height: 1.2em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

progress {
  height: 20px;
  appearance: none;
  width: 100%;
}
progress::-webkit-progress-bar { background: #2a2a2a; border-radius: 8px; }
progress::-webkit-progress-value { background: var(--accent); border-radius: 8px; }
progress::-moz-progress-bar { background: var(--accent); border-radius: 8px; }

@media (min-width: 480px) {
  body { padding: 24px; }
  :root { --gap: 14px; }
}