:root {
  color-scheme: light;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #f4f6fb;
  color: #1a2233;
}

.container {
  max-width: 760px;
  margin: 36px auto;
  padding: 0 16px;
}

h1 {
  margin-bottom: 8px;
}

.subtitle {
  margin-top: 0;
  color: #55627a;
}

.instructions,
.card {
  background: #fff;
  border: 1px solid #dfe5f1;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(30, 45, 85, 0.05);
}

.instructions {
  margin-bottom: 14px;
}

.instructions h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.instructions ol {
  margin: 8px 0 0 18px;
  padding: 0;
}

.dropzone {
  border: 2px dashed #9bb0da;
  border-radius: 10px;
  min-height: 140px;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  color: #3c4f73;
  background: #f9fbff;
  margin-bottom: 14px;
  cursor: pointer;
}

.dropzone.drag-over {
  border-color: #4e7aff;
  background: #eef3ff;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.btn {
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn.primary {
  background: #2f63ff;
  color: #fff;
}

.btn.primary:disabled {
  opacity: 0.6;
  cursor: wait;
}

.btn.secondary {
  background: #e9eefc;
  color: #27417f;
}

.selected-info {
  margin: 0;
  color: #4e5d7c;
}

.status {
  min-height: 24px;
  margin-bottom: 0;
  font-weight: 600;
}

.status.success {
  color: #0f7a35;
}

.status.error {
  color: #b42318;
}