/* kb-auth pages: Glookast brand tokens (same as site/src/css/custom.css), light and dark */
:root {
  --green: #63bc46; --green-ink: #3f7f29; --green-ink-hover: #356b22;
  --black: #231f20; --graphite: #3a3a3a; --tint: #b3b3b3;
  --bg: #f5f5f5; --surface: #ffffff; --text: #231f20; --muted: #5e5a5b; --border: #d9d9d9;
  --note-bg: #f0f7ec; --error: #b3261e; --error-bg: #fdecea;
  --button: var(--green-ink); --button-hover: var(--green-ink-hover); --button-text: #ffffff;
  --link: var(--green-ink);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1f1f1f; --surface: #2a2a2a; --text: #e8e6e7; --muted: #b3b3b3; --border: #3f3f3f;
    --note-bg: #22301c; --error: #f2b8b5; --error-bg: #3b1d1b;
    --button: var(--green); --button-hover: #74c45a; --button-text: #231f20; --link: var(--green);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font: 15px/1.55 Verdana, Geneva, "DejaVu Sans", sans-serif;
  padding-bottom: 3.25rem; /* room for the fixed legal footer */
}
.bar {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--graphite); border-bottom: 4px solid var(--green);
  padding: 0.65rem 1rem;
}
.bar-logo { height: 2.25rem; width: auto; display: block; }
.bar-title { color: #ffffff; font-weight: 700; font-size: 1.0625rem; padding-left: 0.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.35); }
main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 2.5rem 1rem; }
.card {
  width: 100%; max-width: 26rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 1.75rem 1.5rem;
}
.card-logo img { display: block; height: 2.6rem; width: auto; margin: 0 auto 1.25rem; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 0.5rem; }
.lead { color: var(--muted); margin: 0 0 1.25rem; }
label { display: block; font-weight: 700; font-size: 0.875rem; margin: 1rem 0 0.35rem; }
input {
  width: 100%; font: inherit; font-size: 1rem; padding: 0.65rem 0.75rem;
  border: 1px solid var(--tint); border-radius: 6px; background: var(--surface); color: var(--text);
}
input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(99, 188, 70, 0.4); }
button, .button {
  display: block; width: 100%; margin-top: 1.25rem; padding: 0.7rem 1rem; text-align: center;
  font: inherit; font-weight: 700; border-radius: 6px; cursor: pointer; text-decoration: none;
  background: var(--button); color: var(--button-text); border: 1px solid var(--button);
}
button:hover, .button:hover { background: var(--button-hover); border-color: var(--button-hover); }
button.secondary, .button.secondary { background: transparent; color: var(--link); border-color: var(--link); }
button.secondary:hover, .button.secondary:hover { background: var(--note-bg); }
button:focus-visible, .button:focus-visible, a:focus-visible { outline: 3px solid rgba(99, 188, 70, 0.6); outline-offset: 2px; }
a { color: var(--link); }
.links { margin: 1rem 0 0; font-size: 0.875rem; text-align: center; }
.hint { color: var(--muted); font-size: 0.8125rem; margin: 0.35rem 0 0; }
.help { color: var(--muted); font-size: 0.875rem; max-width: 26rem; text-align: center; margin: 1.25rem 0 0; }
.notice, .error { border-radius: 6px; padding: 0.65rem 0.8rem; font-size: 0.875rem; margin: 0 0 1rem; }
.notice { background: var(--note-bg); border-left: 4px solid var(--green); }
.error { background: var(--error-bg); color: var(--error); border-left: 4px solid var(--error); }
.divider { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); font-size: 0.8125rem; margin: 1.5rem 0 0; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.steps { padding-left: 1.25rem; margin: 0 0 1rem; }
.qr { display: flex; justify-content: center; background: #ffffff; border-radius: 6px; padding: 0.75rem; }
.qr svg { width: 12rem; height: 12rem; }
.key { word-break: break-all; font-size: 0.8125rem; }
/* Legal notice: always visible, on every page of the tool (CLAUDE.md, GT-173) */
.legal {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--graphite); color: #d9d7d8; border-top: 2px solid var(--green);
  font-size: 0.75rem; line-height: 1.4; text-align: center; padding: 0.55rem 1rem;
}
@media (max-width: 600px) {
  body { padding-bottom: 4.25rem; }
  .bar-logo { height: 1.875rem; }
  main { padding: 1.25rem 1rem; }
  .card { padding: 1.25rem 1rem; border: 0; background: transparent; }
}