:root {
  --gray-0: #1C1C1E; --gray-1: #232326; --gray-2: #2C2C30; --gray-3: #38383D; --gray-4: #4A4A50;
  --gray-6: #9A9AA1; --gray-7: #C7C7CC; --gray-8: #F2F2F3;
  --accent-9: #E4B123; --accent-hover: #EFC04A; --accent-muted: #3A331A; --accent-border: #6B551D;
  --danger-9: #C4554A; --danger-muted: #2E1B19;
  --font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--gray-0); color: var(--gray-8); font-family: var(--font-mono);
  display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px;
}
.login-wrap { width: 100%; max-width: 380px; }
.login-card {
  background: var(--gray-1); border: 1px solid var(--gray-3); border-radius: 10px; padding: 32px 28px;
}
.login-logo { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.login-logo span { color: var(--accent-9); }
.login-sub { color: var(--gray-6); font-size: 12px; margin-top: 6px; margin-bottom: 24px; }
form { display: flex; flex-direction: column; gap: 14px; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld span { font-size: 12px; color: var(--gray-7); }
.fld input {
  background: #232326; border: 1px solid var(--gray-4); border-radius: 6px; color: var(--gray-8);
  font-family: var(--font-mono); font-size: 14px; padding: 10px 12px; outline: none;
}
.fld input:focus { border-color: var(--accent-9); box-shadow: 0 0 0 3px var(--accent-muted); }
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { flex: 1; padding-right: 42px; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 6px; margin: 0; cursor: pointer;
  color: var(--gray-6); display: flex; align-items: center; border-radius: 6px;
}
.pw-toggle:hover { color: var(--gray-8); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent-9); outline-offset: 1px; }
.pw-toggle svg { width: 18px; height: 18px; }
.login-btn {
  margin-top: 6px; background: var(--accent-9); color: #1C1C1E; border: 1px solid var(--accent-9);
  border-radius: 6px; font-family: var(--font-mono); font-weight: 500; font-size: 14px; padding: 11px;
  cursor: pointer; transition: background 0.1s;
}
.login-btn:hover { background: var(--accent-hover); }
.login-btn:disabled { opacity: 0.6; cursor: default; }
.err {
  background: var(--danger-muted); border: 1px solid var(--danger-9); color: #E4938B;
  border-radius: 6px; padding: 9px 12px; font-size: 12px;
}
.setup {
  background: var(--accent-muted); border: 1px solid var(--accent-border); border-radius: 6px;
  padding: 12px 14px; font-size: 12px; color: var(--gray-7);
}
.setup-hint { line-height: 1.5; }
.setup-secret {
  margin-top: 10px; font-size: 15px; letter-spacing: 0.12em; color: var(--accent-hover);
  word-break: break-all; user-select: all;
}
.setup-otpauth { margin-top: 8px; font-size: 10px; color: var(--gray-6); word-break: break-all; user-select: all; }
.login-foot { color: var(--gray-6); font-size: 11px; text-align: center; margin-top: 18px; line-height: 1.5; }