:root {
  color-scheme: dark;
  --ink: #f8f9fb;
  --muted: #9ba3b3;
  --panel: rgba(24, 28, 38, 0.88);
  --line: rgba(255, 255, 255, 0.1);
  --accent: #a7f06d;
  --accent-deep: #1d2d16;
  --danger: #ff8c8c;
  --success: #b7f58c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 12%, rgba(74, 119, 255, 0.18), transparent 28rem),
    radial-gradient(circle at 88% 82%, rgba(167, 240, 109, 0.12), transparent 24rem),
    #0b0e14;
  font-family: "DM Sans", system-ui, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

button, input { font: inherit; }

.shell {
  min-height: 100vh;
  display: grid;
  place-content: center;
  padding: 48px 20px 32px;
}

.uploader {
  width: min(100%, 620px);
  padding: clamp(28px, 6vw, 48px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(18px);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px var(--accent); }

h1 {
  margin: 16px 0 8px;
  font: 800 clamp(2.15rem, 8vw, 3.8rem)/1 "Manrope", sans-serif;
  letter-spacing: -0.055em;
}

.intro { margin: 0 0 34px; color: var(--muted); font-size: 1.03rem; line-height: 1.6; }
.access-label { display: block; margin-bottom: 9px; font-weight: 600; font-size: 0.92rem; }
.access-wrap { position: relative; display: flex; align-items: center; margin-bottom: 20px; }
.access-wrap > svg { position: absolute; left: 15px; width: 20px; fill: none; stroke: var(--muted); stroke-width: 1.8; }

.access-wrap input {
  width: 100%;
  min-height: 52px;
  padding: 0 76px 0 46px;
  color: var(--ink);
  background: #11151d;
  border: 1px solid var(--line);
  border-radius: 13px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.access-wrap input:focus { border-color: rgba(167,240,109,.65); box-shadow: 0 0 0 4px rgba(167,240,109,.09); }
.reveal, .clear-button { color: var(--muted); background: none; border: 0; cursor: pointer; }
.reveal { position: absolute; right: 12px; padding: 8px; font-size: .85rem; }
.reveal:hover, .clear-button:hover { color: var(--ink); }

.drop-zone {
  width: 100%;
  min-height: 238px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px;
  color: var(--ink);
  background: rgba(10, 13, 19, 0.54);
  border: 1px dashed rgba(255,255,255,.24);
  border-radius: 18px;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s;
}

.drop-zone:hover, .drop-zone.is-dragging { border-color: var(--accent); background: rgba(167,240,109,.055); transform: translateY(-2px); }
.drop-zone:focus-visible, button:focus-visible { outline: 3px solid rgba(167,240,109,.52); outline-offset: 3px; }
.upload-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 7px; color: var(--accent); background: var(--accent-deep); border: 1px solid rgba(167,240,109,.22); border-radius: 15px; }
.upload-icon svg { width: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drop-title { font: 700 1.1rem "Manrope", sans-serif; }
.drop-copy { color: var(--muted); }
.drop-copy strong { color: var(--accent); font-weight: 600; }
.drop-limit { margin-top: 8px; color: #737c8d; font-size: .82rem; }

.selection { margin-top: 18px; padding: 16px; background: #11151d; border: 1px solid var(--line); border-radius: 14px; }
.selection-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.selection-title { display: block; font-weight: 700; }
.selection-total { color: var(--muted); font-size: .84rem; }
.clear-button { padding: 6px 0 6px 10px; font-size: .85rem; }
.file-list { max-height: 150px; margin: 13px 0 0; padding: 0; overflow: auto; list-style: none; }
.file-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); }
.file-badge { display: grid; place-items: center; flex: 0 0 32px; height: 32px; color: var(--accent); background: var(--accent-deep); border-radius: 8px; font-size: .65rem; font-weight: 700; text-transform: uppercase; }
.file-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.file-size { flex: 0 0 auto; color: var(--muted); font-size: .8rem; }

.submit-button {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  color: #0c1209;
  background: var(--accent);
  border: 0;
  border-radius: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(167,240,109,.15);
  transition: transform .18s, opacity .18s, box-shadow .18s;
}

.submit-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(167,240,109,.22); }
.submit-button:disabled { cursor: not-allowed; opacity: .38; }
.spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(12,18,9,.3); border-top-color: #0c1209; border-radius: 50%; animation: spin .7s linear infinite; }
.is-uploading .spinner { display: block; }
.status { min-height: 24px; margin: 14px 0 -8px; text-align: center; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.status.error { color: var(--danger); }
.status.success { color: var(--success); }
.privacy-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px 0 0; color: #747d8c; font-size: .82rem; }
.privacy-note svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (max-width: 560px) {
  .shell { display: block; padding: 18px 12px 24px; }
  .uploader { padding: 26px 19px; border-radius: 22px; }
  .drop-zone { min-height: 210px; padding: 20px; }
  .privacy-note { padding: 0 12px; text-align: center; }
}