*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); line-height:1.5;
  display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px;
  position:relative; overflow-x:hidden;
}
body::before{
  content:''; position:fixed; top:-200px; left:50%; transform:translateX(-50%); width:800px; height:600px; z-index:0;
  background:radial-gradient(circle, var(--accent-wash) 0%, rgba(238,240,253,0) 65%); pointer-events:none;
}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:36px; width:100%; max-width:380px; box-shadow:0 24px 60px -24px rgba(20,21,26,0.2);
  position:relative; z-index:1;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; margin-bottom:24px; justify-content:center;}
.logo{
  width:34px; height:34px; border-radius:10px; background:var(--ink);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
  font-weight:700; font-size:15px; color:#fff;
}
.brand-name{font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink);}
h1{font-family:var(--font-display); font-size:20px; font-weight:650; margin:0 0 6px; text-align:center;}
p.sub{color:var(--muted); font-size:13.5px; text-align:center; margin:0 0 24px;}
label{font-size:12.5px; font-weight:600; color:var(--muted); display:block; margin-bottom:6px;}
input[type=email], input[type=password], input[type=text]{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); font-size:13.5px; font-family:var(--font-body); outline:none;
  margin-bottom:16px; transition:border-color .15s var(--ease);
}
input:focus{border-color:var(--accent);}
.btn{
  width:100%; border:none; border-radius:999px; padding:13px; font-size:14px; font-weight:600;
  cursor:pointer; background:var(--ink); color:#fff; transition:transform .18s var(--ease), box-shadow .18s var(--ease);
  font-family:var(--font-body);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,21,26,0.18);}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none;}
.error{color:var(--danger); font-size:12.5px; margin:-8px 0 14px; display:none;}
.notice{
  font-size:12.5px; margin:0 0 16px; padding:10px 12px; border-radius:10px; display:none;
  color:var(--good); background:var(--good-wash); border:1px solid rgba(15,143,108,0.3);
}
.notice.ok{color:var(--good); background:var(--good-wash); border:1px solid rgba(15,143,108,0.3); display:block;}
.notice.bad{color:var(--danger); background:#FDECEC; border:1px solid rgba(220,38,38,0.25); display:block;}
.forgot{text-align:right; font-size:12.5px; margin:-10px 0 16px;}
.forgot a{color:var(--muted); text-decoration:none;}
.forgot a:hover{color:var(--accent-ink);}
.switch{text-align:center; font-size:13px; color:var(--muted); margin-top:20px;}
.switch a{color:var(--accent-ink); text-decoration:none; font-weight:600;}