/* Shared styles for the auth pages: login, signup, forgot, reset. */
*{box-sizing:border-box}
body{margin:0;background:#fff;color:#1B1714;font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
input:focus{outline:none;border-color:#FF5A36 !important;box-shadow:0 0 0 4px rgba(255,90,54,.12)}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1);opacity:.5}50%{transform:translate(14px,-12px) scale(1.1);opacity:.75}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes livedot{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.btn-primary[disabled]{opacity:.6;cursor:not-allowed}
.msg{font-size:14px;font-weight:600;padding:11px 14px;border-radius:11px;margin-bottom:16px;display:none}
.msg.err{display:block;background:#FFF1ED;color:#C0381A;border:1px solid #FBD9CC}
.msg.ok{display:block;background:#ECFBF1;color:#1B7A43;border:1px solid #CDEFD9}

/* Mobile: show the FORM panel first, compact the brand panel. The two-panel
   layouts are <wrap> > [brand div][form div]; reorder the form above the brand. */
@media (max-width:760px){
  .auth-wrap{align-content:flex-start}
  .auth-wrap > div:nth-child(2){order:-1}
  .auth-wrap > div:first-child{min-height:auto;padding:32px 28px !important}
}