:root { color-scheme: light dark; }

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  margin: 0;
  padding: 24px;
  display: grid;
  place-items: center;
}

.card {
  width: min(760px, 100%);
  border: 1px solid color-mix(in oklab, CanvasText 20%, transparent);
  border-radius: 14px;
  padding: 18px 18px 14px;
  transition: filter 120ms ease, opacity 120ms ease;
}

h1 { margin: 4px 0 14px; font-size: 20px; }

label { display: grid; gap: 6px; margin: 10px 0; }

input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, CanvasText 18%, transparent);
  background: color-mix(in oklab, Canvas 92%, black);
}

.secure-field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.secure-field input[type="password"] {
  -webkit-text-security: disc;
}

.row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

button {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, CanvasText 18%, transparent);
  background: color-mix(in oklab, Canvas 92%, black);
  cursor: pointer;
}

button:disabled { opacity: 0.6; cursor: not-allowed; }

button.hold {
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.out { margin-top: 14px; }
.out-row { display: grid; gap: 8px; }

.msg { margin: 10px 0 0; min-height: 18px; opacity: 0.85; }
.note { margin-top: 14px; font-size: 12px; opacity: 0.75; }

body.panic main.card {
  filter: blur(10px);
  opacity: 0.15;
}