/* Broky auth — product theme (soft light). Mirrors design_handoff_broky_product_theme. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
input:focus { outline: none; }

#ba2-root[data-accent="blue"]  { --accent:#2563eb; --accent-ink:#1d4ed8; --accent-soft:#e8f0ff; }
#ba2-root[data-accent="green"] { --accent:#16a34a; --accent-ink:#15803d; --accent-soft:#e7f7ec; }

@keyframes ba2-float-s { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
@keyframes ba2-look    { 0%,100%{ transform:rotate(-2.5deg) } 50%{ transform:rotate(2.5deg) } }
@keyframes ba2-spin    { to { transform:rotate(360deg) } }
@keyframes ba2-pulse   { 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5) } 70%{ box-shadow:0 0 0 8px rgba(34,197,94,0) } 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0) } }
@keyframes ba2-fly     { 0%{ opacity:0; transform:translate(var(--fx),var(--fy)) scale(.5) } 18%{ opacity:1; transform:translate(calc(var(--fx)*.6),calc(var(--fy)*.6)) scale(1) } 72%{ opacity:1; transform:translate(0,0) scale(1) } 88%,100%{ opacity:0; transform:translate(0,0) scale(.85) } }
@keyframes ba2-paper   { 0%,100%{ transform:translateY(0) rotate(var(--r)) } 50%{ transform:translateY(-9px) rotate(var(--r)) } }
@keyframes ba2-bob     { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-4px) } }
@keyframes ba2-slidein { from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

.ba2-radar { border-radius:50%; background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.16) 44deg, transparent 74deg); animation: ba2-spin 4s linear infinite; -webkit-mask:radial-gradient(circle,#000 60%,transparent 62%); mask:radial-gradient(circle,#000 60%,transparent 62%); }
.ba2-float-s { animation: ba2-float-s 5s ease-in-out infinite; }
.ba2-look { animation: ba2-look 5s ease-in-out infinite; transform-origin:50% 90%; }
.ba2-fly { animation: ba2-fly 5.5s ease-in-out infinite; }
.ba2-paper { animation: ba2-paper 6s ease-in-out infinite; }
.ba2-chip { transform:translate(-50%,-50%); background:var(--card); color:var(--ink); border-radius:10px; box-shadow:var(--soft); padding:7px 11px; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.ba2-btn { transition: transform .14s ease, box-shadow .14s ease; }
.ba2-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(15,20,32,.4); }
.ba2-btn:disabled { opacity:.65; cursor:default; transform:none; box-shadow:none; }
.ba2-field { animation: ba2-slidein .4s ease both; }

/* Labels + fields */
.ba2-lbl { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.ba2-inp { width:100%; font-size:15px; font-family:inherit; color:var(--ink); background:var(--field); padding:12px 13px; border:1.5px solid var(--line); border-radius:11px; transition:border-color .15s ease, box-shadow .15s ease; }
.ba2-inp-pw { padding-right:48px; }
.ba2-inp:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent); }
.ba2-inp.err { border-color:var(--err); }
.ba2-pwtoggle { position:absolute; right:6px; display:flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; background:none; border:none; border-radius:8px; cursor:pointer; color:var(--faint); transition:color .15s ease, background .15s ease; }
.ba2-pwtoggle:hover { color:var(--ink); background:var(--hair); }
.ba2-pwtoggle svg { display:block; }
.ba2-err { color:var(--err); font-size:12px; font-family:'IBM Plex Mono',monospace; }

/* Banner (success / error) */
.ba2-banner { display:flex; align-items:center; gap:9px; border-radius:11px; padding:12px 14px; margin-bottom:18px; font-size:13.5px; font-weight:600; line-height:1.4; }
.ba2-banner.ok  { background:var(--pos-bg); color:var(--pos); border:1px solid color-mix(in srgb,var(--pos) 30%,transparent); }
.ba2-banner.err { background:#fdecec; color:var(--err); border:1px solid color-mix(in srgb,var(--err) 30%,transparent); }
.ba2-banner.info{ background:var(--accent-soft); color:var(--accent-ink); border:1px solid color-mix(in srgb,var(--accent) 26%,transparent); }

/* Mode: signup-only / signin-only fields toggled by root data-mode */
#ba2-root[data-mode="signin"] .ba2-signup-only { display:none !important; }
#ba2-root[data-mode="signup"] .ba2-signin-only { display:none !important; }

/* Busy state */
#card.busy { opacity:.6; pointer-events:none; }

@media (max-width: 900px) {
  .ba2-grid { grid-template-columns: 1fr !important; }
  .ba2-creative { display: none !important; }
  .ba2-mobilebar { display: flex !important; }
  /* On mobile the brand bar covers identity — the "Broky is online" presence row is redundant. */
  .ba2-presence { display: none !important; }
  .ba2-formpanel { padding: 30px 20px calc(30px + env(safe-area-inset-bottom, 0px)) !important; align-items: stretch !important; justify-content: flex-start !important; }
  .ba2-formpanel #card { max-width: 440px; margin: 0 auto; }
}
@media (max-width: 620px) {
  #ba2-root h2 { font-size: 25px !important; }
  .ba2-inp { font-size: 16px; }            /* ≥16px stops iOS zoom-on-focus */
  .ba2-mobilebar { margin-bottom: 22px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ba2-radar, .ba2-float-s, .ba2-look, .ba2-fly, .ba2-paper, .ba2-field,
  [style*="ba2-bob"], [style*="ba2-pulse"] { animation: none !important; }
}