.tp-login{
  width:100%;
  min-height:calc(100vh - 56px);
  display:grid;
  align-items:center;
  padding:clamp(24px,7vh,72px) 0;
}
.tp-login__card{
  position:relative;
  width:min(100%,470px);
  margin:0 auto;
  overflow:hidden;
  border:1px solid var(--tp-line);
  border-radius:18px;
  background:var(--tp-surface);
  box-shadow:0 22px 58px rgba(42,45,70,.11);
}
.tp-login__card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,var(--tp-accent),var(--tp-accent-strong));
}
.tp-login__inner{padding:32px 34px 34px}
.tp-login__brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:28px;
}
.tp-login__mark{
  width:54px;
  height:54px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:linear-gradient(145deg,var(--tp-accent),var(--tp-accent-strong));
  color:#fff;
  box-shadow:0 10px 24px color-mix(in srgb,var(--tp-accent) 28%,transparent);
  font-size:18px;
  font-weight:900;
  letter-spacing:-.06em;
  line-height:1;
}
.tp-login__brand-copy{min-width:0}
.tp-login__brand-name{
  display:block;
  color:var(--tp-ink);
  font-size:18px;
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.15;
}
.tp-login__brand-note{
  display:block;
  margin-top:4px;
  color:var(--tp-muted);
  font-size:12px;
  font-weight:750;
  letter-spacing:.04em;
  line-height:1.35;
  text-transform:uppercase;
}
.tp-login__intro{margin-bottom:24px}
.tp-login__eyebrow{
  margin:0 0 6px;
  color:var(--tp-accent-text);
  font-size:12px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.tp-login__title{
  margin:0;
  color:var(--tp-ink);
  font-size:28px;
  font-weight:880;
  letter-spacing:-.035em;
  line-height:1.12;
}
.tp-login__lead{
  margin:9px 0 0;
  color:var(--tp-muted);
  font-size:14px;
  line-height:1.55;
}
.tp-login__error{
  margin:0 0 20px;
  padding:13px 14px;
  border:1px solid color-mix(in srgb,var(--tp-danger) 34%,var(--tp-line));
  border-radius:10px;
  background:var(--tp-danger-soft);
  color:var(--tp-danger);
  overflow-wrap:anywhere;
}
.tp-login__error strong{
  display:block;
  margin-bottom:2px;
  color:inherit;
  font-size:14px;
  line-height:1.35;
}
.tp-login__error span{display:block;font-size:13px;line-height:1.45}
.tp-login__form{display:grid;gap:18px}
.tp-login__field{min-width:0}
.tp-login__label-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
}
.tp-login__label{
  color:var(--tp-ink);
  font-size:14px;
  font-weight:780;
  line-height:1.35;
}
.tp-login__optional{
  color:var(--tp-muted);
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}
.tp-login__input{
  width:100%;
  min-width:0;
  min-height:46px;
  padding:10px 12px;
  border:1px solid var(--tp-line);
  border-radius:10px;
  background:var(--tp-surface);
  color:var(--tp-ink);
  caret-color:var(--tp-ink);
  font:400 16px/1.4 var(--tp-font);
  box-shadow:0 1px 2px rgba(16,24,40,.03);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.tp-login__input::placeholder{color:var(--tp-faint);opacity:1}
.tp-login__input:hover{border-color:color-mix(in srgb,var(--tp-muted) 54%,var(--tp-line))}
.tp-login__input:focus{
  border-color:var(--tp-accent);
  outline:3px solid color-mix(in srgb,var(--tp-focus) 25%,transparent);
  outline-offset:1px;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--tp-accent) 18%,transparent);
}
.tp-login__input:-webkit-autofill,
.tp-login__input:-webkit-autofill:hover,
.tp-login__input:-webkit-autofill:focus,
.tp-login__input:autofill{
  -webkit-text-fill-color:var(--tp-ink);
  caret-color:var(--tp-ink);
  -webkit-box-shadow:0 0 0 1000px var(--tp-surface) inset;
  box-shadow:0 0 0 1000px var(--tp-surface) inset;
  border-color:var(--tp-line);
  transition:background-color 9999s ease-out 0s;
}
.tp-login__input:-webkit-autofill:focus,
.tp-login__input:autofill:focus{
  border-color:var(--tp-accent);
  -webkit-box-shadow:0 0 0 1000px var(--tp-surface) inset,0 0 0 3px color-mix(in srgb,var(--tp-focus) 25%,transparent);
  box-shadow:0 0 0 1000px var(--tp-surface) inset,0 0 0 3px color-mix(in srgb,var(--tp-focus) 25%,transparent);
}
.tp-login__help{
  margin:7px 0 0;
  color:var(--tp-muted);
  font-size:12px;
  line-height:1.5;
}
.tp-login__submit{
  width:100%;
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:2px;
  padding:10px 16px;
  border:1px solid var(--tp-accent);
  border-radius:10px;
  background:linear-gradient(135deg,var(--tp-accent),var(--tp-accent-strong));
  color:#fff;
  font:800 14px/1.3 var(--tp-font);
  box-shadow:0 8px 20px color-mix(in srgb,var(--tp-accent) 22%,transparent);
  cursor:pointer;
}
.tp-login__submit:hover{filter:brightness(1.03)}
.tp-login__submit:focus-visible{outline:3px solid var(--tp-focus);outline-offset:3px}
.tp-login__footer{
  margin:22px 0 0;
  padding-top:18px;
  border-top:1px solid var(--tp-line);
  color:var(--tp-muted);
  font-size:12px;
  line-height:1.5;
  text-align:center;
}
html[data-theme="dark"] .tp-login__card,
html.dark .tp-login__card{box-shadow:0 22px 58px rgba(0,0,0,.32)}
html[data-theme="dark"] .tp-login__mark,
html.dark .tp-login__mark{box-shadow:0 10px 28px rgba(0,0,0,.28)}
@media(max-width:520px){
  .tp-login{min-height:0;padding:22px 0 30px;align-items:start}
  .tp-login__card{border-radius:14px}
  .tp-login__inner{padding:27px 20px 24px}
  .tp-login__brand{margin-bottom:23px}
  .tp-login__mark{width:50px;height:50px;border-radius:14px}
  .tp-login__title{font-size:25px}
  .tp-login__form{gap:16px}
  .tp-login__footer{margin-top:19px}
}
@media(max-width:340px){
  .tp-login__inner{padding-left:16px;padding-right:16px}
  .tp-login__brand{gap:11px}
  .tp-login__brand-note{font-size:11px}
  .tp-login__label-row{display:block}
  .tp-login__optional{display:block;margin-top:2px}
}
@media(max-height:700px) and (min-width:521px){
  .tp-login{align-items:start;padding-top:26px;padding-bottom:34px}
}
@media(prefers-reduced-motion:reduce){
  .tp-login__input{transition:none}
}