:root {
  --paper:#f3f1eb;
  --ink:#151714;
  --muted:#676b63;
  --blue:#0018a8;
  --peach:#ffc9ca;
  --line:rgba(21,23,20,.14);
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'DM Serif Display',Georgia,serif;
}
* { box-sizing:border-box; }
body {
  margin:0; min-height:100vh; min-height:100svh; padding:64px 24px 30px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
.bg-wrapper { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.background { position:absolute; inset:0; background:linear-gradient(135deg,#faf9f6,var(--paper) 65%); }
.background::after {
  content:''; position:absolute; width:clamp(600px,70vw,1100px); aspect-ratio:1;
  right:clamp(-560px,-34vw,-260px); top:clamp(-620px,-37vw,-280px);
  border:clamp(75px,9vw,140px) solid var(--peach); border-radius:50%; opacity:.56;
}
.background::before {
  content:''; position:absolute; width:clamp(440px,50vw,800px); aspect-ratio:1;
  left:-30%; bottom:-65%; border:1px solid rgba(0,24,168,.12); border-radius:50%;
}
.overlay { display:none; }
.login-card {
  width:min(450px,100%); padding:38px 40px 32px; background:rgba(250,249,246,.96);
  border:1px solid rgba(21,23,20,.09); border-radius:24px;
  box-shadow:0 20px 70px rgba(43,40,32,.065); animation:fadeIn .6s ease both;
}
.wordmark { display:flex; align-items:baseline; gap:5px; white-space:nowrap; }
.wordmark .solid { font-size:1.9rem; font-weight:700; letter-spacing:-.055em; line-height:1; }
.wordmark .studio { font-size:.9rem; font-weight:500; letter-spacing:-.025em; }
.brand-by { margin-left:auto; color:var(--blue); font-family:var(--serif); font-style:italic; font-size:1rem; }
.wordmark-rule { height:1px; background:var(--line); margin:24px 0 32px; }
.login-eyebrow { margin:0 0 12px; font-size:.64rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.login-card h2 { margin:0 0 30px; font-weight:500; font-size:2.3rem; line-height:1.1; letter-spacing:-.055em; }
.login-card h2 em { display:block; font-family:var(--serif); font-weight:400; color:#a75f50; letter-spacing:-.025em; }
form { display:flex; flex-direction:column; }
.field-label { font-size:.75rem; font-weight:600; margin:0 0 8px; }
input:not([type='hidden']) {
  font:inherit; font-size:.88rem; height:52px; width:100%; margin:0 0 20px; padding:0 15px;
  color:var(--ink); border:1px solid var(--line); border-radius:10px; background:#fff;
  outline:none; transition:border-color .2s,box-shadow .2s;
}
input::placeholder { color:#93978f; }
input:not([type='hidden']):focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,24,168,.08); }
.login-card button {
  font:inherit; font-size:.87rem; font-weight:600; min-height:52px; padding:13px 18px;
  border:0; border-radius:99px; background:var(--blue); color:#fff; cursor:pointer;
  transition:background .2s,transform .2s;
}
.login-card button:hover { background:#001486; transform:translateY(-1px); }
.login-card button:focus-visible,.textlink:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.login-card button:disabled { opacity:.65; cursor:wait; transform:none; }
.forgot-password { text-align:center; margin-top:22px; }
.textlink { color:var(--muted); font-size:.77rem; text-decoration:none; cursor:pointer; }
.textlink:hover { color:var(--blue); text-decoration:underline; text-underline-offset:4px; }
.notice { margin:0 0 24px; border:1px solid #ceded0; padding:13px 15px; border-radius:10px; background:#eef4ed; color:#37593c; font-size:.8rem; line-height:1.5; }
.error { border-color:#e9c8bf; background:#faeee9; color:#914e40; }
.footer { margin-top:28px; color:var(--muted); font-size:.68rem; }
.footer span { margin-left:4px; font-family:var(--serif); font-style:italic; }
.spinner { display:inline-block; width:19px; height:19px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle; }
.fade-in { animation:fadeInContent .3s both; }
.fade-out { animation:fadeOutContent .3s both; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes fadeInContent { from { opacity:0; } to { opacity:1; } }
@keyframes fadeOutContent { from { opacity:1; } to { opacity:0; } }
@media (max-width:520px) {
  body { padding:40px 18px 24px; }
  .login-card { padding:30px 26px 28px; border-radius:20px; }
  .background::after { right:-390px; top:-330px; opacity:.4; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
}