:root{
  --bg:var(--st-bg,#eef2f6);
  --card:var(--st-card,#ffffff);
  --text:var(--st-text,#111827);
  --muted:var(--st-muted,#64748b);
  --border:var(--st-border,#dbe3ee);
  --btn:var(--st-btn,#111827);
  --btnText:var(--st-btn-text,#ffffff);
  --dangerBg:#fee2e2;
  --danger:#991b1b;
  --noticeBg:#fff7ed;
  --notice:#9a3412;
  --noticeBorder:#fed7aa;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Arial,sans-serif;
  background:radial-gradient(circle at top left, rgba(17,24,39,.10), transparent 32%),var(--bg);
  color:var(--text);
}
.page{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.shell{width:100%;max-width:460px}
.lang-top{display:flex;justify-content:flex-end;margin-bottom:10px}
.stayola-lang-global{
  display:inline-flex!important;
  align-items:center;
  gap:6px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--card) 88%, transparent);
  color:var(--text)!important;
  text-decoration:none!important;
  border-radius:999px;
  padding:8px 11px;
  font-weight:1000;
  font-size:12px;
  line-height:1;
  box-shadow:0 4px 16px rgba(15,23,42,.08);
  white-space:nowrap;
}
.card{
  width:100%;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:30px;
  padding:22px;
  box-shadow:0 24px 70px rgba(15,23,42,.14);
}
.logo{
  font-size:32px;
  font-weight:1000;
  letter-spacing:-.05em;
  margin-bottom:6px;
}
.logo span{color:#ea580c}
.logo sup{font-size:12px}
h1{margin:0 0 8px;font-size:26px;letter-spacing:-.04em}
.subtitle{margin:0 0 18px;color:var(--muted);font-size:14px;line-height:1.45}
.msg,.notice{
  margin:0 0 14px;
  padding:12px 13px;
  border-radius:18px;
  font-weight:900;
  font-size:14px;
  line-height:1.35;
}
.msg{background:var(--dangerBg);color:var(--danger)}
.notice{background:var(--noticeBg);color:var(--notice);border:1px solid var(--noticeBorder)}
label{display:block;font-weight:1000;font-size:13px;margin:0 0 7px}
.input{
  width:100%;
  min-height:52px;
  padding:14px 15px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--card);
  color:var(--text);
  font-size:16px;
  outline:none;
}
.input:focus{border-color:#111827;box-shadow:0 0 0 4px rgba(17,24,39,.08)}
.field{margin-bottom:14px}
.pass-wrap{position:relative}
.pass-wrap .input{padding-right:58px}
.eye{
  position:absolute;
  right:7px;
  top:7px;
  width:42px;
  height:38px;
  border:0;
  border-radius:999px;
  background:color-mix(in srgb, var(--card) 70%, var(--bg));
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-weight:1000;
}
.captcha-box{margin:16px 0;display:flex;justify-content:center;min-height:78px;overflow:auto}
.submit{
  width:100%;
  min-height:54px;
  border:0;
  border-radius:999px;
  background:var(--btn);
  color:var(--btnText);
  padding:15px 18px;
  font-size:16px;
  font-weight:1000;
  cursor:pointer;
}
.links{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
  font-size:14px;
}
.links a{color:var(--text);text-decoration:none;font-weight:900}
.security-note{margin-top:16px;color:var(--muted);font-size:12px;line-height:1.45;text-align:center}
@media(min-width:720px){.card{padding:28px}h1{font-size:30px}}