/* ─────────────────────────────────────────────────────────────────────────
   Chord Stand — login page styles.
   Mirrors the design tokens of the main app (light by default, dark via
   prefers-color-scheme) so the gate looks like part of the product.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --ground:#FAFAF7;
  --panel:#FFFFFF;
  --panel-2:#F2F4F3;
  --ink:#15191B;
  --ink-soft:#5C6467;
  --ink-faint:#8D9598;
  --rule:#DCE2E1;
  --accent:#0E5F6E;
  --accent-ink:#FFFFFF;
  --accent-wash:#E4F0F2;
  --brass:#8A6520;
  --danger:#8E2C22;
  --shadow:0 1px 2px rgba(12,26,30,.05), 0 10px 30px rgba(12,26,30,.07);
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#0D1416;
    --panel:#141D20;
    --panel-2:#1B2529;
    --ink:#E9F0F0;
    --ink-soft:#95A5A8;
    --ink-faint:#6E7C80;
    --rule:#243135;
    --accent:#5FD3E3;
    --accent-ink:#07181C;
    --accent-wash:#122A30;
    --brass:#D9AF64;
    --danger:#E88E82;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.35);
  }
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body.login-page{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  display:grid;
  place-items:center;
  padding:24px;
}

.login-card{
  width:100%;
  max-width:380px;
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:34px 30px 28px;
}

.login-eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); margin:0 0 6px;
}
.login-h1{
  font-family:Fraunces, ui-serif, Georgia, serif;
  font-weight:700; font-size:30px; line-height:1.05;
  margin:0 0 22px; letter-spacing:-.015em;
}

.login-flash{
  font-size:14px;
  padding:9px 13px; border-radius:10px;
  margin:0 0 18px;
  border:1px solid var(--rule);
  background:var(--panel-2);
  color:var(--ink-soft);
}
.login-flash--bad{
  color:var(--danger); border-color:var(--danger);
  background:color-mix(in srgb, var(--danger) 8%, var(--panel-2));
}
.login-flash--info{
  color:var(--accent); border-color:var(--accent);
  background:var(--accent-wash);
}

.login-form{ display:flex; flex-direction:column; gap:14px; }

.login-field{ display:flex; flex-direction:column; gap:6px; }

.login-label{
  font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint);
}

.login-field input{
  font:inherit; font-size:16px; color:var(--ink);
  background:var(--panel-2);
  border:1px solid var(--rule);
  border-radius:10px;
  padding:10px 13px;
  width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.login-field input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.login-field input:autofill{
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
}

.login-submit{
  margin-top:6px;
  font:inherit; font-weight:600; font-size:15px;
  background:var(--accent); color:var(--accent-ink);
  border:1px solid transparent;
  border-radius:10px;
  padding:11px 18px;
  cursor:pointer;
  transition:filter .12s ease;
}
.login-submit:hover{ filter:brightness(1.08); }
.login-submit:focus-visible{
  outline:2.5px solid var(--accent);
  outline-offset:2px;
}

.login-foot{
  margin:22px 0 0;
  text-align:center;
  font-size:12.5px;
  color:var(--ink-faint);
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; }
}