:root {
  --white: oklch(98.5% 0 0); /* zinc-50 */

  --red-50: oklch(97.1% 0.013 17.38);
  --red-100: oklch(93.6% 0.032 17.717);
  --red-200: oklch(88.5% 0.062 18.334);
  --red-300: oklch(80.8% 0.114 19.571);
  --red-400: oklch(70.4% 0.191 22.216);
  --red-500: oklch(63.7% 0.237 25.331);
  --red-600: oklch(57.7% 0.245 27.325);
  --red-700: oklch(50.5% 0.213 27.518);
  --red-800: oklch(44.4% 0.177 26.899);
  --red-900: oklch(39.6% 0.141 25.723);
  --red-950: oklch(25.8% 0.092 26.042);

  --yellow-50: oklch(98.7% 0.026 102.212);
  --yellow-100: oklch(97.3% 0.071 103.193);
  --yellow-200: oklch(94.5% 0.129 101.54);
  --yellow-300: oklch(90.5% 0.182 98.111);
  --yellow-400: oklch(85.2% 0.199 91.936);
  --yellow-500: oklch(79.5% 0.184 86.047);
  --yellow-600: oklch(68.1% 0.162 75.834);
  --yellow-700: oklch(55.4% 0.135 66.442);
  --yellow-800: oklch(47.6% 0.114 61.907);
  --yellow-900: oklch(42.1% 0.095 57.708);
  --yellow-950: oklch(28.6% 0.066 53.813);

  --sky-50: oklch(97.7% 0.013 236.62);
  --sky-100: oklch(95.1% 0.026 236.824);
  --sky-200: oklch(90.1% 0.058 230.902);
  --sky-300: oklch(82.8% 0.111 230.318);
  --sky-400: oklch(74.6% 0.16 232.661);
  --sky-500: oklch(68.5% 0.169 237.323);
  --sky-600: oklch(58.8% 0.158 241.966);
  --sky-700: oklch(50% 0.134 242.749);
  --sky-800: oklch(44.3% 0.11 240.79);
  --sky-900: oklch(39.1% 0.09 240.876);
  --sky-950: oklch(29.3% 0.066 243.157);

  --indigo-50: oklch(96.2% 0.018 272.314);
  --indigo-100: oklch(93% 0.034 272.788);
  --indigo-200: oklch(87% 0.065 274.039);
  --indigo-300: oklch(78.5% 0.115 274.713);
  --indigo-400: oklch(67.3% 0.182 276.935);
  --indigo-500: oklch(58.5% 0.233 277.117);
  --indigo-600: oklch(51.1% 0.262 276.966);
  --indigo-700: oklch(45.7% 0.24 277.023);
  --indigo-800: oklch(39.8% 0.195 277.366);
  --indigo-900: oklch(35.9% 0.144 278.697);
  --indigo-950: oklch(25.7% 0.09 281.288);

  --slate-50: oklch(98.4% 0.003 247.858);
  --slate-100: oklch(96.8% 0.007 247.896);
  --slate-200: oklch(92.9% 0.013 255.508);
  --slate-300: oklch(86.9% 0.022 252.894);
  --slate-400: oklch(70.4% 0.04 256.788);
  --slate-500: oklch(55.4% 0.046 257.417);
  --slate-600: oklch(44.6% 0.043 257.281);
  --slate-700: oklch(37.2% 0.044 257.287);
  --slate-800: oklch(27.9% 0.041 260.031);
  --slate-900: oklch(20.8% 0.042 265.755);
  --slate-950: oklch(12.9% 0.042 264.695);

  --zinc-50: oklch(98.5% 0 0);
  --zinc-100: oklch(96.7% 0.001 286.375);
  --zinc-200: oklch(92% 0.004 286.32);
  --zinc-300: oklch(87.1% 0.006 286.286);
  --zinc-400: oklch(70.5% 0.015 286.067);
  --zinc-500: oklch(55.2% 0.016 285.938);
  --zinc-600: oklch(44.2% 0.017 285.786);
  --zinc-700: oklch(37% 0.013 285.805);
  --zinc-800: oklch(27.4% 0.006 286.033);
  --zinc-900: oklch(21% 0.006 285.885);
  --zinc-950: oklch(14.1% 0.005 285.823);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
  color: var(--slate-300);
  background: var(--zinc-900);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}

.page {
  width: 100%;
  display: flex;
  justify-content: center;
}

.card {
  width: min(560px, 100%);
  background: var(--slate-900);
  border: 1px solid color-mix(in oklab, var(--slate-400) 18%, transparent);
  border-radius: 20px;
  padding: 28px 26px 24px;
  box-shadow: 0 20px 50px color-mix(in oklab, var(--zinc-950) 50%, transparent);
}

.card__title {
  margin: 12px 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--white);
}

.card__title h1 {
  margin: 0;
  font-size: 28px;
}

.card__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.card__head p {
  margin: 0;
  color: var(--slate-400);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: color-mix(in oklab, var(--sky-500) 12%, transparent);
  color: var(--sky-300);
  border: 1px solid color-mix(in oklab, var(--sky-500) 25%, transparent);
}

.form {
  margin: 22px 0 18px;
  display: grid;
  gap: 14px;
}

input[type="file"] {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.file {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px dashed color-mix(in oklab, var(--slate-400) 32%, transparent);
  cursor: pointer;
  background: color-mix(in oklab, var(--slate-800) 60%, transparent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.file--drag {
  border-color: color-mix(in oklab, var(--sky-400) 80%, transparent);
  background: color-mix(in oklab, var(--sky-800) 20%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--sky-400) 30%, transparent);
}

.file__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate-400);
}

.file__name {
  font-size: 15px;
  color: var(--white);
  word-break: break-all;
}

.file__hint {
  font-size: 12px;
  color: var(--slate-500);
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--yellow-500);
  color: var(--zinc-800);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button:not(:disabled):hover {
  transform: translateY(-1px);
}

.status {
  display: grid;
  gap: 10px;
  margin-bottom: 8px;
}

.status__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.status__row[hidden] {
  display: none;
}

progress {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  appearance: none;
  background: color-mix(in oklab, var(--slate-400) 15%, transparent);
}

progress::-webkit-progress-bar {
  background: color-mix(in oklab, var(--slate-400) 20%, transparent);
  border-radius: 999px;
}

progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--indigo-800), var(--indigo-600));
  border-radius: 999px;
}

progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--indigo-800), var(--indigo-600));
}

.progress--file::-webkit-progress-value {
  opacity: 0.555;
}

.progress--file::-moz-progress-bar {
  background: linear-gradient(90deg, var(--emerald-700), var(--emerald-500));
}

.status__percent,
#percent,
#total-percent {
  min-width: 3.75ch;
  font-size: 13px;
  color: var(--slate-300);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.status__text {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: 0;
  font-size: 13px;
  color: var(--slate-400);
}

.status__text--main {
  font-weight: 600;
}

.status__text-left,
#status-text-left {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status__text-right,
#status-text-right {
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.status__uploads {
  display: grid;
  gap: 14px;
}

.status__uploads[hidden] {
  display: none;
}

.status__file {
  display: grid;
  gap: 8px;
}

@media (max-width: 480px) {
  .card {
    padding: 22px 18px;
  }

  .card__title h1 {
    font-size: 24px;
  }
}