/* ============================================================
   MiMi — auth pages (sign in / sign up)
   Self-contained: carries the same design tokens as the homepage
   so these pages don't depend on style.css.
   ============================================================ */
:root{
  --ink:#1A1030;
  --ink-soft:#645C7C;
  --violet:#8731E8;
  --violet-deep:#5A15AC;
  --lilac:#F4EEFF;
  --lilac-deep:#E7DBFF;
  --amber:#FFC24A;
  --paper:#FFFFFF;
  --line:rgba(26,16,48,.12);
  --danger:#C0392B;
  --ok:#1B7A4B;
  --r-sm:10px; --r-md:16px; --r-lg:22px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
.auth-body{
  margin:0;color:var(--ink);background:var(--paper);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:var(--violet-deep)}
h1,h2{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;letter-spacing:-.025em;margin:0;line-height:1.05}
svg{display:block}

/* ---------- shell ---------- */
.auth-shell{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}

/* ---------- brand panel ---------- */
.auth-brand{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(150deg,#8731E8 0%,#5A15AC 52%,#33076B 100%);
  padding:clamp(32px,4vw,56px);
  display:flex;flex-direction:column;justify-content:space-between;
}
.auth-brand::before,.auth-brand::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;pointer-events:none}
.auth-brand::before{width:360px;height:360px;background:#C9A5FF;top:-120px;right:-90px}
.auth-brand::after{width:300px;height:300px;background:#FFC24A;bottom:-110px;left:-70px;opacity:.22}
.auth-brand > *{position:relative;z-index:1}

.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:#fff;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:-.03em}
.logo__mark{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.logo__mark svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.1;stroke-linecap:round}

.auth-eyebrow{font-family:"DM Mono",monospace;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);margin:0 0 14px}
.auth-brand__head{font-size:clamp(2rem,3.4vw,3rem);margin-bottom:22px}
.auth-brand__sub{color:rgba(255,255,255,.8);max-width:34ch;margin:0 0 26px}

.auth-preview{
  display:inline-flex;align-items:baseline;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);border-radius:999px;
  padding:11px 20px;font-family:"DM Mono",monospace;font-size:1.05rem;margin-bottom:26px;
  max-width:100%;overflow:hidden;
}
.auth-preview__prefix{color:rgba(255,255,255,.6)}
#brandHandle{color:#fff;font-weight:500}

.auth-ticks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.auth-ticks li{display:flex;align-items:center;gap:11px;font-size:.96rem;color:rgba(255,255,255,.92)}
.auth-ticks svg{width:18px;height:18px;flex:none;stroke:var(--amber);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

.auth-chips{display:flex;flex-wrap:wrap;gap:9px}
.auth-chips span{font-family:"DM Mono",monospace;font-size:.78rem;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);padding:7px 13px;border-radius:999px}

.auth-brand__foot{font-family:"DM Mono",monospace;font-size:.72rem;color:rgba(255,255,255,.5);letter-spacing:.04em}

/* ---------- form panel ---------- */
.auth-main{display:flex;align-items:center;justify-content:center;padding:clamp(28px,5vw,56px)}
.auth-card{width:100%;max-width:400px}
.auth-card__head{margin-bottom:26px}
.auth-card__head h2{font-size:1.7rem;margin-bottom:6px}
.auth-card__head p{margin:0;color:var(--ink-soft);font-size:.95rem}
.auth-card__head a{font-weight:700;text-decoration:none}
.auth-card__head a:hover{text-decoration:underline}

/* ---------- social buttons ---------- */
.social-btns{display:grid;gap:10px}
.social-btn{
  display:flex;align-items:center;gap:12px;
  border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:13px 16px;text-decoration:none;color:var(--ink);
  font-weight:600;font-size:.95rem;background:#fff;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.social-btn svg{flex:none}
.social-btn span{flex:1}
.social-btn:hover{border-color:var(--ink);transform:translateY(-1px);box-shadow:0 4px 14px rgba(26,16,48,.08)}
.social-btn.is-soon{opacity:.62}
.social-btn.is-soon:hover{border-color:var(--line);transform:none;box-shadow:none;cursor:default}

/* ---------- divider ---------- */
.auth-divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--ink-soft);font-size:.82rem}
.auth-divider::before,.auth-divider::after{content:"";height:1px;background:var(--line);flex:1}

/* ---------- form ---------- */
.auth-form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field__label{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;font-weight:700;color:var(--ink)}
.field__aux{font-weight:600;font-size:.82rem;text-decoration:none}
.field__aux:hover{text-decoration:underline}
.field input{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:13px 14px;font-family:inherit;font-size:1rem;color:var(--ink);background:#fff;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field input::placeholder{color:#B4ACC6}
.field input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(135,49,232,.14)}
.field__hint{font-size:.8rem;color:var(--ink-soft);min-height:1em}
.field__hint.is-bad{color:var(--danger)}
.field__hint.is-ok{color:var(--ok)}

/* password field with toggle */
.field__pw{position:relative;display:flex}
.field__pw input{padding-right:46px}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:0;padding:8px;cursor:pointer;color:var(--ink-soft);border-radius:8px;
}
.pw-toggle:hover{color:var(--violet)}
.pw-toggle .eye{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pw-toggle.is-on .eye{stroke:var(--violet)}

/* handle field (matches homepage claim field) */
.handle-field{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;padding-left:14px;transition:border-color .16s ease,box-shadow .16s ease}
.handle-field:focus-within{border-color:var(--violet);box-shadow:0 0 0 4px rgba(135,49,232,.14)}
.handle-field__prefix{font-family:"DM Mono",monospace;color:var(--ink-soft);flex:none;user-select:none;font-size:.95rem}
.handle-field input{border:0;box-shadow:none;padding-left:2px;font-family:"DM Mono",monospace}
.handle-field input:focus{box-shadow:none}
.handle-field.is-ok{border-color:var(--ok)}
.handle-field.is-bad{border-color:var(--danger)}
.handle-msg{font-size:.8rem;min-height:1em;color:var(--ink-soft)}
.handle-msg.is-ok{color:var(--ok)}
.handle-msg.is-bad{color:var(--danger)}
.handle-msg strong{color:var(--violet-deep)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:700;font-size:1rem;padding:14px 22px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.btn--primary{background:var(--violet);color:#fff;box-shadow:0 6px 18px rgba(135,49,232,.28)}
.btn--primary:hover{background:var(--violet-deep);transform:translateY(-2px)}
.btn--full{width:100%;margin-top:4px}

.auth-terms{font-size:.8rem;color:var(--ink-soft);text-align:center;margin:2px 0 0;line-height:1.5}
.auth-terms a{font-weight:600;text-decoration:none}
.auth-terms a:hover{text-decoration:underline}

.auth-alert{background:#FDEDEA;border:1px solid #F3C4BC;color:var(--danger);padding:12px 15px;border-radius:var(--r-sm);font-size:.9rem;margin-bottom:20px}

/* honeypot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------- focus visibility (quality floor) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:8px}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .auth-shell{grid-template-columns:1fr}
  .auth-brand{
    padding:26px 24px;
    flex-direction:row;align-items:center;justify-content:space-between;gap:16px;
    min-height:auto;
  }
  .auth-brand__mid{display:none}
  .auth-brand__foot{display:none}
  .auth-main{padding:32px 22px 56px}
}
@media (max-width:420px){
  .auth-card__head h2{font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms !important}
}