:root {
  color: #e8eee9;
  background: #0c110e;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  isolation: isolate;
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: #0c110e;
}

button, input { font: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.shell {
  min-height: 100vh;
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px clamp(24px, 5vw, 80px) 48px;
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #edf3ef;
  text-decoration: none;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -.02em;
}

.brand svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: #dce6df;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.privacy {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #99a49d;
  font-size: 14px;
}

.privacy i { width: 8px; height: 8px; border-radius: 50%; background: #59635d; }
.privacy.unlocked i { background: #b9cabe; }

.login-view {
  min-height: calc(100vh - 120px);
  display: grid;
  grid-template-columns: minmax(0, 640px);
  align-content: center;
}

.approval-open .login-view {
  grid-template-columns: minmax(0, .9fr) minmax(360px, .7fr);
  gap: clamp(48px, 8vw, 128px);
  align-items: center;
}

.login-copy { padding: 64px 0; }

h1 {
  margin: 0;
  font-size: clamp(64px, 8vw, 112px);
  line-height: .96;
  letter-spacing: -.055em;
  font-weight: 560;
}

.login-copy > p:not(.error) {
  max-width: 520px;
  margin: 24px 0 0;
  color: #aab5ae;
  font-size: 19px;
  line-height: 1.55;
}

.action, .upload-action, .quiet-action, .file-download {
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 650;
  transition: background-color 140ms ease, color 140ms ease;
}

.action {
  min-height: 52px;
  margin-top: 32px;
  padding: 0 24px;
  color: #142019;
  background: #dce6df;
}

.action:hover, .upload-action:hover { background: #f0f4f1; }
.action:active, .upload-action:active { background: #cbd8cf; }
.action:disabled { cursor: wait; color: #6f7a73; background: #27312b; }

.action:focus-visible, .quiet-action:focus-visible, .file-download:focus-visible,
.brand:focus-visible, #fileInput:focus-visible + .upload-action {
  outline: 2px solid #e8eee9;
  outline-offset: 4px;
}

.approval-stage { display: grid; place-items: center; padding: 32px; }

.qr-panel {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-frame {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 20px;
  border-radius: 12px;
  background: #edf3ef;
  cursor: pointer;
  touch-action: manipulation;
}

.qr-frame:focus-visible { outline: 3px solid #edf3ef; outline-offset: 5px; }

.qr-frame canvas { display: block; width: 100% !important; height: 100% !important; }
.short-code { width: 100%; margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.short-code span, .qr-panel p { color: #89958d; font-size: 14px; }
.short-code strong { font-family: ui-monospace, "Cascadia Code", monospace; font-size: 22px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.qr-panel p { margin: 16px 0 0; }
.error { min-height: 24px; margin: 16px 0 0; color: #e3a9a2; }

.vault-view { padding-top: clamp(80px, 10vw, 144px); }
.vault-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.vault-head h1 { font-size: clamp(64px, 8vw, 112px); }
.vault-actions { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }
.vault-actions input { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden; }
.upload-action, .quiet-action { display: inline-grid; place-items: center; min-height: 48px; padding: 0 20px; }
.upload-action { color: #142019; background: #dce6df; }
.quiet-action { color: #ccd6cf; background: #1a231d; }
.quiet-action:hover { background: #222d26; }
.quiet-action:active { background: #111914; }
.operation-status { min-height: 24px; margin: 32px 0 16px; color: #94a098; font-size: 14px; }
.file-table { border-top: 1px solid #273029; }
.file-row { display: grid; grid-template-columns: minmax(200px, 1fr) 120px 168px 104px; align-items: center; gap: 24px; min-height: 72px; padding: 0 8px; border-bottom: 1px solid #202922; }
.file-labels { min-height: 48px; color: #7f8b83; font-size: 12px; font-weight: 650; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 610; }
.file-meta { color: #8e9a92; font-size: 14px; font-variant-numeric: tabular-nums; }
.file-download { justify-self: end; padding: 8px 12px; color: #d6e0d9; background: transparent; }
.file-download:hover { color: #f5f8f6; background: #1a231d; }
.file-download:active { background: #111914; }
.file-download:disabled { cursor: wait; color: #667169; }
.empty-files { padding: 72px 8px; color: #89958d; text-align: center; }

@media (max-width: 840px) {
  .approval-open .login-view { grid-template-columns: 1fr; gap: 0; padding: 64px 0 40px; }
  .approval-open .login-copy { padding: 0 0 40px; }
  .approval-stage { padding: 0; justify-items: start; }
  .vault-head { align-items: flex-start; flex-direction: column; }
  .vault-actions { padding: 0; }
  .file-row { grid-template-columns: minmax(168px, 1fr) 88px 88px; }
  .file-row > :nth-child(3) { display: none; }
}

@media (max-width: 560px) {
  .shell { padding: 24px 20px 40px; }
  .privacy span { display: none; }
  .login-view { min-height: calc(100vh - 96px); }
  h1, .vault-head h1 { font-size: 64px; }
  .approval-open .login-view { padding-top: 48px; }
  .qr-panel { width: 100%; }
  .vault-actions { width: 100%; }
  .upload-action, .quiet-action { flex: 1; padding-inline: 12px; }
  .file-labels { display: none; }
  .file-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; min-height: 80px; }
  .file-row > :nth-child(2), .file-row > :nth-child(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}