body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    linear-gradient(rgba(13, 12, 13, .38), rgba(13, 12, 13, .54)),
    url('../login-background-v1.png') center / cover fixed no-repeat;
}

.login-page {
  width: min(820px, calc(100% - 32px));
  min-height: 420px;
  margin: 0 auto;
  grid-template-columns: .88fr 1.12fr;
  position: relative;
  isolation: isolate;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 34px 85px rgba(0, 0, 0, .36), 0 10px 24px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.login-page::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #721020, #bd1c36 48%, #e44255 72%, #8e1428);
  box-shadow: 0 1px 8px rgba(167, 25, 48, .32);
}

.login-art {
  position: relative;
  align-items: flex-start;
  padding: 38px;
  text-align: left;
  color: #202126;
  background:
    radial-gradient(circle at 10% 12%, rgba(187, 26, 52, .08), transparent 32%),
    linear-gradient(145deg, #fff 0%, #fbf9f9 58%, #f3eff0 100%);
}
.login-art::after { content:""; position:absolute; left:38px; bottom:38px; width:42px; height:3px; border-radius:3px; background:#b51631; box-shadow:52px 0 0 #e6dadd; transform:none; }
.login-art img { position:absolute; top:34px; left:38px; width:100px; max-width:58%; padding:0; border-radius:0; background:transparent; }
.login-art h1 { margin: 24px 0 8px; font-size: 25px; line-height: 1.1; letter-spacing:.015em; color:#17191e; }
.login-art p { max-width: 280px; margin-top:14px; font-size: 13px; line-height: 1.55; color: #656971; }
.login-brand-title { position:relative; display:inline-block; align-self:center; margin:19px 0 0!important; padding-top:15px; font-family:"Segoe UI",Arial,sans-serif; line-height:1; white-space:nowrap; }
.login-brand-kicker { position:absolute; top:0; right:1px; font-size:11px; font-weight:800; letter-spacing:.2em; color:#a71930; }
.login-brand-title strong { display:flex; align-items:center; gap:0; margin:0; font-family:inherit; font-size:33px; font-weight:780; line-height:1; letter-spacing:0; color:#24262b; text-shadow:none; }
.login-brand-letter, .login-brand-rest { display:inline-block; line-height:1; }
.login-brand-letter { margin-right:2px; letter-spacing:-.045em; }
.login-brand-rest { margin-left:2px; letter-spacing:-.045em; }
.login-brand-bubble { position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; height:31px; margin:0; padding:0 5px 2px; border-radius:7px 7px 7px 2px; background:linear-gradient(145deg,#c51e3b,#9e1229); color:#fff; font-size:.82em; font-weight:800; line-height:1; letter-spacing:-.045em; box-shadow:0 5px 12px rgba(164,18,45,.2),inset 0 1px 0 rgba(255,255,255,.2); }
.login-brand-bubble::after { content:""; position:absolute; left:5px; bottom:-7px; border-width:7px 7px 0 0; border-style:solid; border-color:#9e1229 transparent transparent transparent; }
.login-brand-intro { margin:15px 0 0!important; font-size:13px!important; font-weight:650; line-height:1.45!important; color:#303239!important; }
.login-brand-detail { margin:6px 0 0!important; max-width:275px!important; font-size:11.5px!important; line-height:1.5!important; color:#777a82!important; }
.login-brand-features { display:flex; justify-content:flex-start; flex-wrap:wrap; gap:7px; margin:15px 0 0; padding:0; list-style:none; }
.login-brand-features li { display:flex; align-items:center; gap:6px; padding:5px 8px; border:1px solid #eadcdf; border-radius:99px; background:rgba(255,255,255,.72); color:#5d6067; font-size:10px; font-weight:600; box-shadow:0 2px 7px rgba(45,35,38,.035); }
.login-brand-features li::before { content:""; width:5px; height:5px; flex:0 0 5px; border-radius:50%; background:#b51631; box-shadow:0 0 0 3px rgba(181,22,49,.08); }
.login-panel { position:relative; justify-content:center; padding:34px; border-left:1px solid rgba(222,217,219,.8); background:linear-gradient(160deg,#fff 0%,#fbfafb 48%,#f5f3f4 100%); }
.login-panel::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 100% 0,rgba(167,25,48,.055),transparent 42%); }
.login-box { max-width: 300px; padding: 0; border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; }
.login-box .eyebrow { display:inline-block; padding:5px 8px; border:1px solid #efd8dd; border-radius:99px; background:#fff5f7; letter-spacing:.13em; }
.login-box h2 { margin: 17px 0 10px; font-size:24px; letter-spacing:-.02em; color:#17191e; }
.login-box .help { margin: 0 0 14px; }
.login-box .field { margin: 11px 0; }
.login-box .field label { color:#34363c; }
.login-box .field input { min-height:42px; padding:9px 11px; border-color:#d7d9de; background:rgba(255,255,255,.9); box-shadow:inset 0 1px 2px rgba(16,20,28,.035),0 1px 0 rgba(255,255,255,.7); transition:border-color .18s,box-shadow .18s,background .18s; }
.login-box .field input:focus { outline:0; border-color:#b51a34; background:#fff; box-shadow:0 0 0 3px rgba(181,26,52,.12),0 5px 14px rgba(30,23,26,.07); }
.login-box .btn { margin-top:7px; padding:10px 14px; background:linear-gradient(135deg,#bd1b37 0%,#a1142d 62%,#831023 100%); box-shadow:0 9px 18px rgba(151,18,42,.22),inset 0 1px 0 rgba(255,255,255,.2); transition:transform .18s,box-shadow .18s,filter .18s; }
.login-box .btn:hover { transform:translateY(-1px); filter:brightness(1.04); box-shadow:0 12px 22px rgba(151,18,42,.28),inset 0 1px 0 rgba(255,255,255,.2); }
.login-box .btn:active { transform:translateY(0); box-shadow:0 5px 12px rgba(151,18,42,.2); }

@media (prefers-reduced-motion: reduce) {
  .login-box .field input, .login-box .btn { transition:none; }
}

@media (max-width: 950px) {
  body { padding:18px 0; }
  .login-page { width:calc(100% - 24px); max-width:520px; min-height:0; margin:0 auto; grid-template-columns:1fr; }
  .login-art { display:flex; align-items:center; padding:26px 24px 38px; text-align:center; }
  .login-art::after { left:50%; bottom:18px; transform:translateX(-50%); }
  .login-art img { position:static; width:90px; }
  .login-art h1 { margin:14px 0 2px; font-size:23px; }
  .login-art p { display:none; }
  .login-brand-title { align-self:center; margin-top:14px!important; }
  .login-brand-title strong { font-size:30px; }
  .login-brand-kicker { font-size:10px; }
  .login-brand-bubble { height:28px; }
  .login-brand-features { display:none; }
  .login-panel { min-height:0; padding:30px; border-left:0; border-top:1px solid rgba(222,217,219,.8); }
}

@media (max-width: 550px) {
  .login-page { margin: 0 auto; }
  .login-panel { padding: 22px 18px; }
  .login-box h2 { margin: 22px 0 18px; }
}