/* wltd-vault — one stylesheet, no fonts, no images, nothing fetched: the CSP
 * on this origin is 'self' and nothing else. Every style is a class here;
 * a style attribute would silently do nothing. */

:root {
  color-scheme: dark;
  --bg: #000;
  --surface: rgba(255, 255, 255, .06);
  --surface-2: rgba(255, 255, 255, .1);
  --surface-3: rgba(255, 255, 255, .14);
  --hair: rgba(255, 255, 255, .1);
  --ink: #f5f5f7;
  --ink-2: rgba(235, 235, 245, .6);
  --ink-3: rgba(235, 235, 245, .3);
  --red: #ff453a;
  --green: #30d158;
  --sheet: #1c1c1e;
  --radius: 16px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100dvh;
  background: var(--bg); color: var(--ink);
  font: 17px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}
button { font: inherit; color: inherit; }
.hidden { display: none !important; }

.app { max-width: 600px; margin: 0 auto; padding: 0 20px calc(48px + env(safe-area-inset-bottom)); }

/* ── top bar: translucent, content scrolls under it ─────────── */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 20px 0; margin: 0 -20px;
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.bar .title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.bar .slot { width: 84px; display: flex; }
.bar .slot.end { justify-content: flex-end; }
.tbtn {
  display: flex; align-items: center; gap: 2px; padding: 8px 0; margin: 0 -2px;
  border: 0; background: none; font-size: 17px; cursor: pointer;
  transition: opacity 120ms var(--ease-out);
}
.tbtn:active { opacity: .5; }
.tbtn svg { width: 12px; height: 20px; }

/* ── views ─────────────────────────────────────────────────── */
.view { animation: rise 240ms var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.hero {
  min-height: calc(100dvh - 56px - env(safe-area-inset-top));
  display: flex; flex-direction: column; justify-content: center;
  padding-bottom: 10vh;
}
h1 { font-size: 34px; line-height: 1.1; letter-spacing: -.025em; font-weight: 700; margin: 28px 0 20px; }
h1.center { text-align: center; margin: 0 0 28px; }
.glyph { width: 56px; height: 56px; margin: 0 auto 28px; color: var(--ink); }
.glyph svg { width: 100%; height: 100%; }
.glyph.green { color: var(--green); }
.glyph.dim { color: var(--ink-3); }
.pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink-2); margin: 0 auto;
  animation: pulse 900ms ease-in-out infinite alternate;
}
@keyframes pulse { to { opacity: .25; transform: scale(.8); } }

/* ── fields ────────────────────────────────────────────────── */
.field { position: relative; margin-bottom: 12px; }
.field input {
  width: 100%; height: 54px; padding: 0 18px; border: 0; border-radius: 14px;
  background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: 17px; outline: none;
  transition: box-shadow 160ms var(--ease-out), background 160ms var(--ease-out);
}
.field input.has-eye { padding-right: 56px; }
.field input::placeholder { color: var(--ink-3); }
.field input:focus { background: var(--surface-3); box-shadow: 0 0 0 2px rgba(255, 255, 255, .28); }
.field .eye {
  position: absolute; right: 7px; top: 7px; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: none; color: var(--ink-2); cursor: pointer;
  transition: transform 120ms var(--ease-out), color 120ms;
}
.field .eye:active { transform: scale(.92); }
.field .eye.on { color: var(--ink); }
.field .eye svg { width: 22px; height: 22px; }

/* ── buttons ───────────────────────────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 52px; border: 0; border-radius: 999px;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em; cursor: pointer;
  transition: transform 120ms var(--ease-out), opacity 160ms var(--ease-out), background 160ms;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .35; cursor: default; transform: none; }
.btn.primary { background: var(--ink); color: #000; }
.btn.primary.destructive { background: var(--red); color: #fff; }
.btn.secondary { background: var(--surface-2); color: var(--ink); }
.btn.ghost { background: none; color: var(--ink-2); height: 44px; font-weight: 500; }
.btn.busy { pointer-events: none; }
.btn .spin {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .2); border-top-color: #000;
  animation: spin 640ms linear infinite;
}
.btn.busy .spin { display: block; }
.btn.busy .label { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.stack { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

/* ── status and error lines ────────────────────────────────── */
.status { min-height: 18px; margin-top: 14px; font-size: 13px; color: var(--ink-2); text-align: center; font-variant-numeric: tabular-nums; }
.status.left { text-align: left; }
.err { margin-top: 14px; font-size: 14px; color: var(--red); text-align: center; }

/* ── passphrase chips ──────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; cursor: pointer; }
.chip {
  padding: 8px 12px; border-radius: 10px; background: var(--surface);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px;
  transition: background 120ms;
}
.chips:active .chip { background: var(--surface-3); }

/* ── grouped lists ─────────────────────────────────────────── */
.section {
  margin: 30px 0 8px 4px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2);
}
.group { background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.group + .group { margin-top: 14px; }
.cell {
  position: relative; display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 54px; padding: 10px 16px;
  border: 0; background: none; text-align: left; cursor: pointer;
  transition: background 120ms var(--ease-out);
}
.cell + .cell::before, .cell + .bar-line + .cell::before {
  content: ""; position: absolute; left: 16px; right: 0; top: 0; height: 1px; background: var(--hair);
}
.cell.media + .cell::before { left: 114px; }
.cell:active:not(.static) { background: var(--surface-2); }
.cell:disabled { cursor: default; }
.cell.static { cursor: default; }
.cell .grow { flex: 1; min-width: 0; }
.cell .t { display: block; font-size: 17px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .m { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .v { font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; flex: none; }
.cell .v.ok { color: var(--green); }
.cell .chev { width: 8px; height: 14px; color: var(--ink-3); flex: none; }
.cell.red .t { color: var(--red); }
.cell.media { padding: 12px 16px; }
.thumb {
  width: 84px; aspect-ratio: 16 / 9; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center; color: var(--ink-3);
  background: linear-gradient(135deg, #1a1a1c, #2a2a2e);
}
.thumb svg { width: 22px; height: 22px; }
.empty { padding: 44px 0; text-align: center; color: var(--ink-3); font-size: 15px; }
.empty .glyph { width: 40px; height: 40px; margin-bottom: 12px; color: var(--ink-3); }

/* ── switch ────────────────────────────────────────────────── */
.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: rgba(120, 120, 128, .32); transition: background 200ms var(--ease-out); }
.switch span::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  transition: transform 220ms var(--ease-out);
}
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { transform: translateX(20px); }

/* ── progress ──────────────────────────────────────────────── */
.bar-line { height: 3px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.bar-line i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--ink); transition: width 200ms linear; }
.bar-line.inset { margin: 0 16px; }
.bar-line.hero-bar { margin: 24px 0 20px; }

/* ── player ────────────────────────────────────────────────── */
.stage { margin: 0 -20px; background: #000; }
.stage video { display: block; width: 100%; max-height: 68vh; background: #000; }
@media (min-width: 640px) { .stage { margin: 0; border-radius: var(--radius); overflow: hidden; } }
.ptitle { margin: 18px 0 3px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.pmeta { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ── link card ─────────────────────────────────────────────── */
.card { margin-top: 14px; padding: 16px; border-radius: var(--radius); background: var(--surface); }
.card .btn { margin-top: 14px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.55; color: var(--ink-2); word-break: break-all; }
.card .t { font-size: 17px; font-weight: 500; overflow-wrap: anywhere; }
.card .m { margin-top: 2px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ── sheet ─────────────────────────────────────────────────── */
dialog.sheet {
  width: 100%; max-width: none; margin: auto 0 0; padding: 0; border: 0; background: transparent;
}
dialog.sheet::backdrop { background: rgba(0, 0, 0, .55); }
.sheet-body {
  max-width: 600px; margin: 0 auto; padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0; background: var(--sheet);
}
.sheet-title { margin: 0 0 18px; text-align: center; font-size: 17px; font-weight: 600; }
dialog[open].sheet { animation: sheet-up 260ms var(--ease-out); }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
@media (min-width: 640px) {
  dialog.sheet { width: 340px; margin: auto; }
  .sheet-body { border-radius: 22px; padding-bottom: 20px; }
}

/* ── the friend's page ─────────────────────────────────────── */
.big { font-size: 64px; line-height: 1; font-weight: 700; letter-spacing: -.035em; text-align: center; font-variant-numeric: tabular-nums; }

@media (hover: hover) and (pointer: fine) {
  .cell:not(.static):not(:disabled):hover { background: rgba(255, 255, 255, .04); }
  .btn.secondary:hover { background: var(--surface-3); }
  .btn.ghost:hover { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .view, dialog[open].sheet { animation: none; }
  .btn, .cell, .switch span, .switch span::after, .field input { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .bar { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
}