:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  color: #20313f;
  background: #f4f6f7;
  --ink: #20313f;
  --muted: #566773;
  --accent: #245e69;
  --line: #dce3e7;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.55; }
button, summary { font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, summary:focus-visible { outline: 3px solid #ac6d2b; outline-offset: 4px; }
[hidden] { display: none !important; }
h1, h2, p { margin-top: 0; }
p { margin-bottom: 16px; }
.login-shell { width: min(100% - 32px, 480px); margin-inline: auto; padding: max(24px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom)); }
.brand { display: flex; gap: 13px; align-items: center; margin: 8px 6px 26px; }
.brand-mark { display: grid; grid-template-columns: repeat(2, 11px); gap: 4px; transform: rotate(-8deg); }
.brand-mark i { width: 11px; height: 11px; background: var(--accent); border-radius: 2px; }
.brand-mark i:nth-child(2) { background: #78a9ab; }
.brand-mark i:nth-child(3) { background: #ba9bb6; }
.brand-name { display: block; font-size: 1.3rem; font-weight: 750; line-height: 1.3; letter-spacing: -.04em; }
.brand-subtitle { display: block; color: var(--muted); font-size: .8rem; }
.login-card { background: white; border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.eyebrow { color: var(--accent); font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
h1 { font-size: clamp(1.75rem, 7vw, 2.25rem); line-height: 1.15; letter-spacing: -.045em; margin-bottom: 14px; }
h2 { font-size: 1.15rem; line-height: 1.3; letter-spacing: -.02em; margin-bottom: 10px; }
.intro { color: var(--muted); font-size: .95rem; }
.demo-note { background: #f0eaf1; color: #5f4460; border-radius: 9px; padding: 11px 13px; font-size: .8rem; }
.notice { border: 1px solid #bbd8d3; border-left: 4px solid var(--accent); background: #edf6f3; color: #244e45; border-radius: 9px; padding: 13px; margin-block: 20px; font-size: .87rem; overflow-wrap: anywhere; }
.notice-error { border-color: #e5bba9; border-left-color: #9b3f23; background: #fff3ed; color: #7b351f; }
.pairing-panel { background: #f2f5f6; border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-block: 20px; }
.pairing-panel > p { font-size: .88rem; }
.code-label { display: block; color: var(--muted); font-size: .75rem; margin-bottom: 7px; }
.pairing-code { display: block; background: white; border: 1px solid #c2d2d8; border-radius: 8px; padding: 12px; margin-bottom: 10px; color: var(--ink); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 1rem; font-weight: 650; line-height: 1.55; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.login-actions { display: grid; gap: 10px; margin-top: 20px; }
.button { width: 100%; min-height: 50px; border: 1px solid transparent; border-radius: 10px; padding: 13px 15px; font-size: .95rem; font-weight: 650; line-height: 1.35; transition: background-color .12s ease; }
.button-primary { color: white; background: var(--accent); }
.button-primary:hover:enabled { background: #194952; }
.button-secondary { color: var(--ink); background: white; border-color: #bbc9d0; }
.button-secondary:hover:enabled { background: #edf3f4; }
.button-small { min-height: 44px; padding: 10px 12px; font-size: .82rem; }
.field-hint { margin: 12px 0 0; color: var(--muted); font-size: .8rem; }
.pairing-panel > .field-hint { font-size: .8rem; }
#check-button { margin-top: 16px; }
.help { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 8px; font-size: .8rem; color: var(--muted); }
.help summary { cursor: pointer; min-height: 44px; padding-block: 12px; color: var(--ink); font-weight: 600; }
.help p { margin-block: 4px 12px; }
footer { padding: 22px 8px 0; color: var(--muted); font-size: .73rem; text-align: center; }
@media (max-width: 380px) {
  .login-shell { width: calc(100% - 24px); }
  .login-card { padding: 22px 18px; }
  .pairing-panel { padding: 15px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }