:root {
  --bg: #070a12;
  --surface: rgba(12, 18, 34, .86);
  --surface-2: rgba(15, 24, 44, .92);
  --text: #eef6ff;
  --muted: #9fb0c8;
  --line: rgba(102, 132, 178, .28);
  --line-strong: rgba(105, 247, 212, .55);
  --accent: #55f7d4;
  --accent-2: #7c5cff;
  --danger: #ff5b7d;
  --shadow: 0 22px 70px rgba(0, 0, 0, .45);
  --radius: 18px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

:root[data-theme="light"] {
  --bg: #eef4f8;
  --surface: rgba(255, 255, 255, .88);
  --surface-2: rgba(247, 251, 255, .94);
  --text: #101827;
  --muted: #5c6b80;
  --line: rgba(38, 58, 86, .18);
  --line-strong: rgba(0, 166, 139, .55);
  --accent: #008f7a;
  --accent-2: #5e49e8;
  --danger: #d92d5b;
  --shadow: 0 22px 60px rgba(22, 35, 54, .18);
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  background:
    radial-gradient(900px 540px at 12% 6%, rgba(85, 247, 212, .16), transparent 58%),
    radial-gradient(700px 500px at 92% 16%, rgba(124, 92, 255, .16), transparent 55%),
    linear-gradient(to right, rgba(85, 247, 212, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124, 92, 255, .05) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, 56px 56px, 56px 56px, auto;
}

button,
input,
a { font: inherit; }

.shell {
  width: min(980px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 18px 0 46px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.mark,
.icon-button,
.ghost-button,
.mini-button,
.password-row button,
.dropzone button {
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(15, 24, 44, .72);
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

:root[data-theme="light"] .mark,
:root[data-theme="light"] .icon-button,
:root[data-theme="light"] .ghost-button,
:root[data-theme="light"] .mini-button,
:root[data-theme="light"] .password-row button,
:root[data-theme="light"] .dropzone button {
  background: rgba(255, 255, 255, .82);
}

.mark:hover,
.icon-button:hover,
.ghost-button:hover,
.mini-button:hover,
.password-row button:hover,
.dropzone button:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  box-shadow: 0 0 0 4px rgba(85, 247, 212, .09);
}

.mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 800;
}

.icon-button {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: var(--accent);
  font-size: 19px;
}

.gate,
.workspace {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.gate {
  max-width: 620px;
  margin: 64px auto 0;
  padding: clamp(24px, 5vw, 42px);
}

.stamp {
  display: inline-flex;
  width: fit-content;
  padding: 7px 11px;
  margin-bottom: 16px;
  border: 1px solid rgba(85, 247, 212, .32);
  border-radius: 999px;
  background: rgba(85, 247, 212, .1);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1,
h2,
p { margin-top: 0; }

h1 {
  margin-bottom: 24px;
  font-size: clamp(38px, 8vw, 76px);
  line-height: .95;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(22px, 4vw, 32px);
  line-height: 1;
}

.login-form label {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.password-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}

input[type="password"] {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(5, 8, 16, .56);
  color: var(--text);
  padding: 15px 16px;
  outline: none;
}

:root[data-theme="light"] input[type="password"] {
  background: rgba(255, 255, 255, .82);
}

input[type="password"]:focus {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 4px rgba(85, 247, 212, .10);
}

.password-row button,
.dropzone button,
.ghost-button,
.secondary-button {
  min-height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  font-weight: 800;
}

.password-row button,
.dropzone button[type="submit"] {
  border-color: rgba(85, 247, 212, .52);
  background: linear-gradient(135deg, rgba(85, 247, 212, .95), rgba(124, 92, 255, .86));
  color: #061018;
}

.secondary-button,
.ghost-button {
  color: var(--accent);
}

.message {
  min-height: 24px;
  margin: 16px 0 0;
  color: var(--accent);
  font-weight: 700;
}

.workspace {
  padding: clamp(18px, 4vw, 34px);
}

.hero,
.files-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.dropzone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-top: 12px;
  padding: 20px;
  border: 1px dashed rgba(85, 247, 212, .42);
  border-radius: var(--radius);
  background:
    radial-gradient(420px 160px at 0% 0%, rgba(85, 247, 212, .10), transparent 65%),
    rgba(5, 8, 16, .28);
}

.dropzone.is-dragging {
  border-color: var(--accent);
  background:
    radial-gradient(520px 180px at 0% 0%, rgba(85, 247, 212, .20), transparent 65%),
    rgba(85, 247, 212, .08);
}

.dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.drop-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.drop-copy strong {
  overflow-wrap: anywhere;
  font-size: clamp(22px, 4vw, 34px);
  line-height: 1.05;
}

.drop-copy span,
.file-main span {
  color: var(--muted);
  font-weight: 650;
}

.upload-actions {
  display: flex;
  gap: 10px;
}

.progress-shell {
  height: 12px;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(5, 8, 16, .42);
}

.progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.files {
  margin-top: 30px;
}

.file-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.file-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(5, 8, 16, .24);
}

.file-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.file-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-actions {
  display: flex;
  gap: 10px;
}

.mini-button {
  display: inline-grid;
  place-items: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
}

.mini-button.danger {
  border-color: rgba(255, 91, 125, .46);
  color: var(--danger);
}

.empty {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(5, 8, 16, .24);
  color: var(--muted);
  font-weight: 750;
}

@media (max-width: 720px) {
  .password-row,
  .dropzone,
  .file-item {
    grid-template-columns: 1fr;
  }

  .hero,
  .files-head {
    display: grid;
  }

  .upload-actions,
  .file-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .password-row button,
  .dropzone button,
  .ghost-button,
  .mini-button {
    width: 100%;
  }
}