@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --bg: #07090e;
  --card: rgba(18, 24, 34, 0.85);
  --card-border: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.12);
  --text: #f1f5f9;
  --muted: #94a3b8;
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --danger: #ef4444;
  --touch: 3.5rem;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(55rem 40rem at 20% -10%, rgba(59, 130, 246, 0.18), transparent 60%),
    radial-gradient(45rem 35rem at 85% 10%, rgba(147, 51, 234, 0.14), transparent 55%),
    radial-gradient(80rem 60rem at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.6) 100%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  padding: 1.5rem;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
}
.card {
  width: min(28rem, 100%);
  background: var(--card);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--card-border);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border-radius: 1.25rem;
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.logo-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(147, 51, 234, 0.25));
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #60a5fa;
  margin-bottom: 0.25rem;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}
h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.subhead {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0;
}
form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
label {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
}
input {
  min-height: var(--touch);
  padding: 0 1.1rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: rgba(10, 14, 22, 0.6);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(10, 14, 22, 0.9);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}
.pwrow {
  display: flex;
  gap: 0.5rem;
}
.pwrow input {
  flex: 1 1 auto;
  min-width: 0;
}
.reveal-btn {
  flex: 0 0 auto;
  min-height: var(--touch);
  padding: 0 1.15rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.reveal-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.reveal-btn[aria-pressed='true'] {
  color: var(--accent-hover);
  border-color: var(--accent);
  background: rgba(59, 130, 246, 0.1);
}
#code {
  letter-spacing: 0.45em;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 600;
  font-family: ui-monospace, monospace;
}
.submit-btn {
  min-height: var(--touch);
  border: none;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  color: #ffffff;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition:
    transform 0.08s,
    box-shadow 0.15s,
    filter 0.15s;
  margin-top: 0.4rem;
}
.submit-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
}
.submit-btn:active {
  transform: scale(0.98);
}
.submit-btn:disabled {
  opacity: 0.5;
  cursor: default;
  filter: none;
  box-shadow: none;
}
.err {
  color: var(--danger);
  font-size: 0.9rem;
  min-height: 1.3em;
  text-align: center;
  font-weight: 500;
}