:root{
  --bg:#eef3f8;
  --bg-2:#dde8f3;
  --card:#ffffff;
  --fg:#1b2733;
  --muted:#66757f;
  --line:#d6e0ea;
  --accent:#0082c9;
  --accent-dark:#006ca6;
  --ring:rgba(0,130,201,.18);
  --danger-bg:#fdecec;
  --danger-fg:#a12a2a;
  --danger-line:#f3c6c6;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  color:var(--fg);
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.auth{display:flex;flex-direction:column}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.auth-wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 20px 32px;
}
.login-card{
  width:min(408px,100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(20,52,80,.12),0 2px 6px rgba(20,52,80,.05);
  padding:38px 34px 30px;
}
.login-card.center{text-align:center}
.brand-mark{color:var(--accent);display:flex;justify-content:center;margin-bottom:10px}
h1{font-size:26px;line-height:1.25;margin:0 0 6px;letter-spacing:-.2px;text-align:center}
.login-card.center h1{font-size:24px}
.sub{margin:0 0 26px;text-align:center;color:var(--muted);font-size:15px}
.code{font-size:52px;font-weight:700;line-height:1;color:var(--accent);margin:6px 0 10px;letter-spacing:-1px}

form{display:block}
label{display:block;font-size:13px;font-weight:600;color:#3c4a57;margin:0 0 6px}
input[type=email],input[type=password]{
  width:100%;
  padding:11px 12px;
  margin-bottom:16px;
  font:inherit;
  font-size:15px;
  color:var(--fg);
  background:#fff;
  border:1px solid var(--line);
  border-radius:9px;
  transition:border-color .15s,box-shadow .15s;
}
input[type=email]::placeholder,input[type=password]::placeholder{color:#9aa8b4}
input[type=email]:focus,input[type=password]:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--ring);
}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:14px;margin:2px 0 18px}
.check{display:flex;align-items:center;gap:8px;font-weight:400;color:var(--muted);margin:0;cursor:pointer}
.check input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
.btn{
  display:block;
  width:100%;
  padding:12px 16px;
  border:0;
  border-radius:9px;
  background:var(--accent);
  color:#fff;
  font:inherit;
  font-weight:600;
  text-align:center;
  cursor:pointer;
  transition:background .15s;
}
.btn:hover{background:var(--accent-dark);text-decoration:none}
.btn:active{transform:translateY(1px)}
.error{
  margin:0 0 14px;
  padding:10px 12px;
  background:var(--danger-bg);
  color:var(--danger-fg);
  border:1px solid var(--danger-line);
  border-radius:9px;
  font-size:14px;
}
.hint{margin:18px 0 0;text-align:center;color:var(--muted);font-size:13px}

.auth-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  width:100%;
  max-width:960px;
  margin:0 auto;
  padding:18px 24px 26px;
  color:#5f7180;
  font-size:13px;
}
.auth-footer nav{display:flex;gap:16px;flex-wrap:wrap}
.auth-footer a{color:#5f7180}
.auth-footer a:hover{color:var(--accent)}

.page .topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  max-width:960px;
  margin:0 auto;
  padding:22px 24px 8px;
}
.logo{display:flex;align-items:center;gap:10px;color:var(--accent);font-weight:700;font-size:18px}
.logo span{color:var(--fg)}
.topbar nav{display:flex;gap:18px}
.topbar nav a{color:var(--muted);font-size:15px}
.topbar nav a:hover{color:var(--accent);text-decoration:none}
.sheet{
  width:100%;
  max-width:760px;
  margin:18px auto 40px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 14px 34px rgba(20,52,80,.09);
  padding:36px 40px 30px;
}
.sheet h1{text-align:left;font-size:28px;margin-bottom:14px}
.sheet h2{font-size:19px;margin:28px 0 8px}
.sheet p{margin:0 0 12px;color:#33414e}
.sheet ul{margin:0 0 12px;padding-left:22px;color:#33414e}
.sheet li{margin:4px 0}

@media (max-width:520px){
  .auth-wrap{padding:32px 16px 20px}
  .login-card{padding:30px 22px 24px;border-radius:14px}
  h1{font-size:23px}
  .sheet{padding:26px 20px 20px;border-radius:14px;margin:12px 12px 28px}
  .sheet h1{font-size:24px}
  .auth-footer{padding:16px 18px 22px;justify-content:center;text-align:center}
}