:root{
  --bg:#F4F5F7; --ink:#1D1D1F; --muted:#6E6E73; --line:rgba(29,29,31,0.16);
  --glass-bg:rgba(255,255,255,0.55); --glass-border:rgba(255,255,255,0.9); --radius:18px;
  --primary:#1B2A4A; --secondary:#C9A227; --error:#C0392B;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{ background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.6; position:relative; overflow-x:hidden; min-height:100vh; display:flex; align-items:center; justify-content:center; }
h1{ font-family:'Fraunces',serif; font-weight:500; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

.blob{ position:fixed; border-radius:50%; filter:blur(80px); z-index:0; opacity:0.2; pointer-events:none; }
.blob-1{ width:480px; height:480px; background:var(--primary); top:-200px; left:-160px; }
.blob-2{ width:420px; height:420px; background:var(--secondary); bottom:-200px; right:-160px; }

.glass{
  background:var(--glass-bg); backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--glass-border); border-radius:var(--radius); box-shadow:0 8px 36px -14px rgba(29,29,31,0.14);
}

.brand-mark{ position:relative; width:36px; height:36px; border-radius:9px; overflow:hidden; flex-shrink:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; margin:0 auto 1.125rem; }
.brand-mark span{ display:block; }
.brand-mark .q1{ background:#1B2A4A; } .brand-mark .q2{ background:#00B7C2; }
.brand-mark .q3{ background:#D9541E; } .brand-mark .q4{ background:#6FA8C9; }
.brand-mark .cross{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:22px; height:22px; }
.brand-mark .cross::before, .brand-mark .cross::after{ content:""; position:absolute; background:#fff; }
.brand-mark .cross::before{ top:0; left:7px; width:8px; height:22px; }
.brand-mark .cross::after{ top:7px; left:0; width:22px; height:8px; }

.auth-card{ width:92%; max-width:400px; padding:2.5rem 2.25rem; text-align:center; position:relative; z-index:1; }
.auth-card h1{ font-size:1.6rem; margin-bottom:0.375rem; }
.auth-sub{ font-size:0.86rem; color:var(--muted); margin-bottom:1.625rem; }

.mode-toggle{ display:flex; background:rgba(0,0,0,0.05); border-radius:100px; padding:0.25rem; margin-bottom:1.5rem; }
.mode-btn{
  flex:1; padding:0.5625rem; border:none; background:none; border-radius:100px; font-size:0.84rem; font-weight:600;
  color:var(--muted); cursor:pointer; transition:all .2s;
}
.mode-btn.active{ background:var(--ink); color:#fff; }

.field{ margin-bottom:0.875rem; text-align:left; }
.field label{ display:block; font-size:0.78rem; color:var(--muted); margin-bottom:0.25rem; }
.field input{
  width:100%; padding:0.6875rem 0.8125rem; border:1px solid var(--line); border-radius:10px;
  font-family:'Inter',sans-serif; font-size:0.9rem; background:rgba(255,255,255,0.75);
}
.field input.invalid{ border-color:var(--error); }
.field-error{ display:none; color:var(--error); font-size:0.72rem; margin-top:0.1875rem; text-align:left; }

.auth-submit{
  width:100%; background:var(--ink); color:#fff; border:none; padding:0.8125rem; border-radius:100px;
  font-weight:600; font-size:0.9rem; cursor:pointer; margin-top:0.375rem;
}
.auth-submit:disabled{ opacity:0.6; cursor:default; }

.form-msg{
  font-size:0.82rem; margin-top:0.875rem; padding:0.625rem 0.75rem; border-radius:10px; display:none;
}
.form-msg.error{ display:block; background:rgba(192,57,43,0.1); color:var(--error); }
.form-msg.success{ display:block; background:rgba(15,110,86,0.1); color:#0F6E56; }
.legal-consent{ margin-top:0.25rem; }
.legal-consent label{ display:flex; align-items:flex-start; gap:0.55rem; font-size:0.78rem; line-height:1.45; color:var(--muted); cursor:pointer; }
.legal-consent input{ width:1rem; height:1rem; margin-top:0.12rem; accent-color:var(--ink); flex:0 0 auto; }
.legal-consent a{ color:var(--ink); text-decoration:underline; }

.back-link{ display:block; margin-top:1.375rem; font-size:0.82rem; color:var(--muted); }
.setup-note{
  position:fixed; bottom:16px; left:16px; right:16px; max-width:400px; margin:0 auto;
  font-size:0.72rem; color:var(--muted); background:rgba(255,255,255,0.8); border:1px solid var(--line);
  border-radius:10px; padding:0.625rem 0.75rem; text-align:left; z-index:2;
}