*{box-sizing:border-box}
:root{
  --wine-950:#570817;
  --wine-900:#6d0d20;
  --wine-800:#83132a;
  --wine-700:#9a1933;
  --wine-600:#b82140;
  --red:#d12646;
  --rose:#fff0f3;
  --ink:#201a20;
  --muted:#756b72;
  --line:#eadde1;
}
html,body{margin:0;min-height:100%;font-family:Inter,"Segoe UI",Arial,sans-serif;background:#fbf8f9;color:var(--ink)}
body{min-height:100vh}
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(520px,1.15fr) minmax(500px,.85fr)}
.brand-side{
  position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  padding:48px 6.2vw 38px;color:#fff;
  background:
    radial-gradient(circle at 92% 14%,rgba(255,255,255,.08),transparent 18%),
    linear-gradient(145deg,#5b0919 0%,#821229 43%,#c02644 100%);
}
.brand-side:before,.brand-side:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%;pointer-events:none}
.brand-side:before{width:500px;height:500px;right:-210px;top:-180px;box-shadow:0 0 0 48px rgba(255,255,255,.025)}
.brand-side:after{width:640px;height:640px;right:-280px;bottom:-390px;box-shadow:0 0 0 58px rgba(255,255,255,.03)}
.brand-top{position:relative;z-index:1;display:flex;align-items:center;gap:14px}
.brand-mark{width:46px;height:46px;border-radius:15px;background:rgba(255,255,255,.1);display:grid;place-items:center;border:1px solid rgba(255,255,255,.12)}
.brand-mark span{width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.09)}
.brand-name{display:flex;align-items:center;gap:14px}
.brand-name strong{font-size:27px;letter-spacing:-.04em}
.brand-name small{max-width:190px;padding-left:14px;border-left:1px solid rgba(255,255,255,.24);font-size:10px;line-height:1.45;letter-spacing:.18em;color:#e8cbd2}
.brand-copy{position:relative;z-index:1;max-width:760px;margin-top:50px}
.eyebrow{display:block;margin-bottom:14px;font-size:12px;font-weight:800;letter-spacing:.12em;color:#ffdbe3}
.brand-copy h1{max-width:720px;margin:0;font-size:clamp(42px,4vw,70px);line-height:1.02;letter-spacing:-.055em}
.brand-copy p{max-width:660px;margin:20px 0 0;font-size:18px;line-height:1.55;color:#f2dce1}
.feature-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:34px}
.feature-row div{min-height:100px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:13px;border-radius:15px;background:rgba(81,4,22,.23);border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(3px)}
.feature-row i{font-style:normal;font-size:26px;color:#ffd7df}
.feature-row span{font-size:12px;font-weight:700;text-align:center}
.brand-foot{position:relative;z-index:1;display:flex;justify-content:space-between;gap:18px;align-items:end;margin-top:34px;color:#efd3da}
.brand-foot span{font-size:11px;font-weight:700}.brand-foot small{font-size:10px;letter-spacing:.08em;text-transform:uppercase}

.access-side{position:relative;display:grid;place-items:center;padding:50px 6vw;background:linear-gradient(145deg,#fff 0%,#fffafa 65%,#f9edef 100%)}
.access-watermark{position:absolute;right:-120px;top:-120px;width:430px;height:430px;border:34px solid rgba(165,25,51,.035);border-radius:50%}
.login-card{position:relative;z-index:1;width:min(100%,520px);padding:38px 40px 34px;border:1px solid var(--line);border-radius:25px;background:rgba(255,255,255,.96);box-shadow:0 28px 70px rgba(75,21,33,.11)}
.login-eyebrow{display:block;color:#a11a34;font-size:12px;font-weight:800;letter-spacing:.13em}
.login-card h2{margin:8px 0 8px;font-size:34px;line-height:1.1;letter-spacing:-.04em}
.login-card>p{margin:0 0 26px;font-size:15px;line-height:1.55;color:var(--muted)}
.login-error{margin-bottom:16px;padding:11px 13px;border:1px solid #efc5cf;border-radius:11px;background:#fff1f4;color:#9e1a33;font-size:13px;font-weight:650}
.login-form{display:grid;gap:18px}
.login-form label>span{display:block;margin-bottom:7px;font-size:13px;font-weight:750;color:#2d252a}
.input-box{position:relative;display:flex;align-items:center;min-height:57px;border:1px solid #d9cbd0;border-radius:13px;background:#fbfbfc;transition:.16s ease}
.input-box:focus-within{border-color:#d68597;box-shadow:0 0 0 4px rgba(183,31,61,.07);background:#fff}
.input-box>i{width:48px;text-align:center;font-style:normal;font-size:19px;color:#73656c}
.input-box input{width:100%;height:55px;border:0;outline:0;background:transparent;padding:0 10px 0 0;font-size:15px;color:#31272c}
.input-box input::placeholder{color:#9d9297}
.password-toggle{width:48px;height:48px;border:0;background:transparent;color:#75666c;font-size:17px;cursor:pointer}
.login-submit{min-height:58px;margin-top:4px;display:flex;justify-content:center;align-items:center;gap:15px;border:0;border-radius:13px;background:linear-gradient(135deg,#8d152d,#c52745);color:#fff;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 12px 25px rgba(142,21,45,.18);transition:.16s ease}
.login-submit:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(142,21,45,.22)}
.login-submit b{font-size:20px;font-weight:400}
.login-note{display:flex;gap:10px;align-items:flex-start;margin-top:22px;padding:13px;border-radius:12px;background:#fff1f4;color:#8d4856}
.login-note>span{width:21px;height:21px;display:grid;place-items:center;border:1px solid #c97b8a;border-radius:50%;font-size:11px;font-weight:800;flex:0 0 auto}
.login-note p{margin:1px 0 0;font-size:11px;line-height:1.45}.login-note strong{color:#8f1a31}
.side-caption{position:absolute;right:38px;top:34px;display:flex;flex-direction:column;font-size:9px;font-weight:700;letter-spacing:.18em;color:#c1b3b7}
.side-caption:before{content:"";width:28px;height:1px;margin-bottom:8px;background:#c9bfc2}

@media(max-width:1100px){
  .login-shell{grid-template-columns:1fr}
  .brand-side{min-height:520px;padding:34px 7vw}
  .brand-copy{margin-top:55px}.brand-copy h1{font-size:48px}
  .feature-row{grid-template-columns:repeat(5,1fr)}
  .access-side{min-height:650px}
  .side-caption{display:none}
}
@media(max-width:700px){
  .brand-side{min-height:420px;padding:28px 24px}
  .brand-name small{display:none}
  .brand-copy h1{font-size:38px}
  .brand-copy p{font-size:15px}
  .feature-row{display:none}
  .brand-foot small{display:none}
  .access-side{padding:28px 18px;min-height:560px}
  .login-card{padding:28px 22px;border-radius:20px}
  .login-card h2{font-size:29px}
}