.v4-guest { margin: 0; color: #f7faff; background: #09182f; font: 14.5px/1.55 Inter, "Segoe UI", system-ui, sans-serif; }
.v4-guest *, .v4-guest *::before, .v4-guest *::after { box-sizing: border-box; }
.v4-guest h1, .v4-guest h2 { margin: 0; letter-spacing: -.01em; }
.v4-guest a { text-decoration: none; }
.login-wrap { display: grid; min-height: 100vh; }
.login-art { display: flex; flex-direction: column; }
.la-top { position: relative; display: flex; }
.login-form { display: grid; place-items: center; }
  .lf-card{width:100%;max-width:404px}
  .lf-card .lf-h{font-size:25px;font-weight:800;letter-spacing:-.02em}
  .lf-card .lf-sub{color:#7488a0;font-size:13.5px;margin-top:6px;margin-bottom:26px}
  .lf-field{margin-bottom:16px}
  .lf-field label{display:block;font-size:12.5px;font-weight:600;color:#42566e;margin-bottom:7px}
  .lf-input{position:relative}
  .lf-input input{width:100%;font-family:inherit;font-size:14px;padding:13px 15px 13px 44px;border:1px solid #d8e2ee;border-radius:12px;background:#fff;outline:0;transition:.15s}
  .lf-input input:focus{border-color:#4f95dd;box-shadow:0 0 0 3px #e6f0fb}
  .lf-input svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#7488a0}
  .lf-btn{width:100%;border:0;font-family:inherit;font-size:14.5px;font-weight:700;color:#fff;padding:14px;border-radius:12px;cursor:pointer;
    background:linear-gradient(135deg,#1b5fa8,#2476c9);box-shadow:0 10px 24px rgba(36,118,201,.32);transition:.15s}
  .lf-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.v4-guest .login-wrap{
  min-height:100svh;
  position:relative;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:1fr auto;
  background:
    linear-gradient(180deg,#07152b98,transparent 38%),
    linear-gradient(105deg,#091c3574 8%,#0b214e90 46%,#07152be8 100%),
    url('./imv.webp') center / cover no-repeat #09182f;
}
.v4-guest .login-art{position:absolute;inset:0 0 auto;padding:24px clamp(28px,4vw,60px) 0;background:none}
.v4-guest .login-art::before{display:none}
.v4-login-logo{justify-content:space-between;align-items:center;gap:16px}
.v4-login-home{display:block;width:min(248px,48%)}
.v4-login-logo img{display:block;width:100%;height:auto}
.v4-login-home:focus-visible{outline:2px solid #ffbe42;outline-offset:4px}
.v4-login-logo p{margin:0;color:#dce7fa;font-size:clamp(14px,1.3vw,19px);line-height:1.4;text-align:right}
.v4-login-support{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px 24px;
  padding:20px 24px;color:#e2ecfd;background:#09182f8c;border-top:1px solid #c7daff32;
}
.v4-login-support a,.v4-login-help{display:inline-flex;align-items:center;gap:9px}
.v4-login-support a{color:#fff}
.v4-login-support a:hover{text-decoration:underline}
.v4-login-support a:focus-visible{outline:2px solid #ffbe42;outline-offset:4px;border-radius:2px}
.v4-login-support svg{width:17px;height:17px;color:#b9d3f1;flex:none}
.v4-login-extension{color:#d4ddfa}
.v4-login-info{
  width:100%;padding:24px clamp(22px,3vw,40px) 28px;
  border-top:1px solid #c7daff32;
}
.v4-login-info h2{font-size:17px;line-height:1.25}
.v4-login-info p{margin:6px 0 0;color:#d4ddfa;font-size:13px;line-height:1.45}
.v4-login-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:14px 0 0}
.v4-feature-top{display:flex;align-items:center;margin-bottom:8px}
.v4-login-features li:not(:last-child) .v4-feature-top::after{content:"";flex:1;border-top:2px dashed #d5dfff66;margin-left:14px}
.v4-feature-number{display:grid;place-items:center;width:26px;height:26px;margin:4px 5px;color:#14204d;background:#ffbe42;border-radius:7px;transform:rotate(45deg)}
.v4-feature-number b{font-size:13px;transform:rotate(-45deg)}
.v4-login-features strong{display:flex;align-items:center;gap:5px;font-size:13px;line-height:1.25}
.v4-login-features svg{width:15px;height:15px;color:#ffcb62;flex:none}
.v4-login-features small{display:block;margin-top:5px;color:#d4ddfa;font-size:12px;line-height:1.45}
.v4-guest .login-form{
  grid-template-columns:minmax(0,620px);justify-content:center;align-content:center;
  padding:clamp(20px,3.2vw,46px);background:transparent;
}
.v4-guest .login-wrap--password .login-form{
  padding-block:clamp(16px,3svh,32px);
}
@property --v4-login-orbit{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
@keyframes v4-login-orbit{
  to{--v4-login-orbit:360deg}
}
.v4-login-panel{
  position:relative;
  width:100%;color:#f7faff;border:1px solid #c7daff42;border-radius:24px;
  background:linear-gradient(#0b1d384d,#0b1d384d),url('./login-pattern.svg'),#0b1d38b8;
  box-shadow:0 20px 34px -24px #050d25c9,0 0 26px #478cfd24;backdrop-filter:blur(12px);
}
@supports(mask-composite:exclude){
  .v4-login-panel::before{
    content:"";
    position:absolute;inset:-2px;padding:3px;border-radius:25px;pointer-events:none;
    background:conic-gradient(from var(--v4-login-orbit,0deg),transparent 0deg 245deg,#478cf522 270deg,#569dffab 318deg,#c4ebff 345deg,transparent 360deg);
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude;
    animation:v4-login-orbit 16s linear infinite;
  }
}
@media(prefers-reduced-motion:reduce){
  .v4-login-panel::before{animation:none;opacity:.65}
}
.v4-guest .lf-card{max-width:none}
.v4-login-card-head,.v4-login-card-body{padding:27px clamp(22px,3vw,40px)}
.v4-login-card-head{padding-top:34px;padding-bottom:0}
.v4-login-card-head .lf-h{font-size:clamp(25px,2.4vw,32px)}
.login-wrap--password .v4-login-card-head .lf-h{line-height:1.2}
.v4-login-card-head .lf-sub{margin-bottom:0;color:#d4ddfa}
.v4-login-method{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.v4-login-mark{display:grid;place-items:center;width:37px;height:37px;color:#16254e;background:#ffbe42;border-radius:10px}
.v4-login-mark svg{width:21px;height:21px}
.v4-login-tag{color:#ffdb88;font-weight:700;letter-spacing:.08em;font-size:11px;text-transform:uppercase}
.v4-guest .lf-field label{color:#e3ecfc}
.v4-guest .lf-input input{min-width:0;min-height:50px;width:100%;color-scheme:dark;color:#fff;background:#d2e2ff12;border-color:#c7daff42}
.v4-guest .lf-input input::placeholder,.v4-guest .lf-input svg{color:#b9c9e5}
.v4-guest .lf-input input:focus{border-color:#9ec7ff;box-shadow:0 0 0 3px #86b9ff40}
.v4-guest .lf-input svg{pointer-events:none}
.v4-guest .lf-btn{
  display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;margin-top:6px;
  text-align:center;color:#fff;background:linear-gradient(105deg,#1a589c,#2476c9);box-shadow:0 10px 23px #1f6dbb44;
}
.v4-guest .lf-btn:focus-visible{outline:3px solid #c68000;outline-offset:3px}
.v4-guest .lf-btn span{font-size:18px;line-height:1}
.v4-esi-note{margin:10px 0 0;font-size:12px;color:#d4ddfa}
@media(min-width:768px) and (max-height:800px){
  .login-wrap--password .v4-login-card-head{padding-top:22px}
  .login-wrap--password .v4-login-card-body{padding-block:20px}
  .login-wrap--password .lf-field{margin-bottom:12px}
  .v4-guest .login-wrap--password .lf-btn{min-height:50px}
}
@media(max-width:1240px){
  .v4-guest .login-wrap{grid-template-rows:auto 1fr auto}
  .v4-guest .login-art{position:static;display:flex;padding:20px 24px 0}
  .v4-login-home{width:min(175px,48%)}
}
@media(max-width:880px){
  .v4-guest .login-form{align-content:start}
}
@media(max-width:500px){
  .v4-guest .login-art{padding-inline:20px}
  .v4-login-home{width:min(156px,48%)}
  .v4-login-help{justify-content:center;width:100%}
  .v4-login-features{grid-template-columns:1fr}
  .v4-login-features li{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:start;gap:10px}
  .v4-feature-top{margin-bottom:0}
  .v4-login-features li:not(:last-child) .v4-feature-top::after{display:none}
  .v4-login-features small{margin-top:4px}
}

.v4-guest .lf-btn span { font-size: inherit; }
.v4-guest .lf-btn span[aria-hidden="true"] { font-size: 18px; }
.v4-guest .lf-btn:disabled, .v4-guest .lf-btn[aria-busy="true"] { cursor: wait; }
.v4-guest .lf-input .esi-login__input--password { padding-right: 54px; }
.esi-login__password-toggle {
  position: absolute; top: 3px; right: 4px; width: 44px; height: 44px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px;
  color: #d4ddfa; background: transparent; cursor: pointer;
}
.esi-login__password-toggle:hover { background: #c7daff24; }
.v4-guest .lf-input .esi-login__password-toggle svg { position: static; transform: none; }
.esi-login__password-toggle .esi-login__eye-hide,
.esi-login__password-toggle[aria-pressed="true"] .esi-login__eye-show { display: none; }
.esi-login__password-toggle[aria-pressed="true"] .esi-login__eye-hide { display: block; }
.esi-login__error, .esi-login__caps-warning { margin: 4px 0 0; color: #ffd0cb; font-size: 13px; }
.esi-login__error:empty { display: none; }
.esi-login__notice { margin: 0 0 12px; color: #ffdfa3; }
.esi-login__captcha { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.esi-login__captcha img { max-width: 100%; border-radius: 8px; cursor: pointer; }
.esi-login__captcha-input { width: 100%; padding: 10px; border: 1px solid #c7daff42; border-radius: 10px; color: #fff; background: #d2e2ff12; font: inherit; }
.esi-login__separator { margin: 12px 0 8px; text-align: center; color: #d4ddfa; font-size: 12px; }
.esi-login__secondary-button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px; border: 1px solid #c7daff42; border-radius: 10px; color: #e2ecfd;
}
.esi-login__secondary-button:hover { background: #c7daff24; }
.esi-login__secure-note { display: flex; align-items: center; gap: 6px; margin: 10px 0; color: #d4ddfa; font-size: 12px; }
.esi-login__guide { color: #d4ddfa; font-size: 13px; }
.esi-login__guide summary { display: flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; }
.esi-login__guide summary::-webkit-details-marker { display: none; }
.esi-login__guide summary .esi-login__chevron { margin-left: auto; }
.esi-login__guide[open] .esi-login__chevron { transform: rotate(180deg); }
.esi-login__steps { display: grid; gap: 8px; list-style: none; padding: 0; }
.esi-login__steps li { display: flex; gap: 8px; }
.esi-login__steps p, .esi-login__guide-note { margin: 0; }
.esi-login__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.v4-guest .lf-btn .esi-login__spinner { display: none; width: 16px; height: 16px; border: 2px solid #ffffff70; border-top-color: #fff; border-radius: 50%; }
.v4-guest .lf-btn[aria-busy="true"] .esi-login__spinner { display: inline-block; animation: v3-login-spin .7s linear infinite; }
@keyframes v3-login-spin { to { transform: rotate(360deg); } }
.v4-guest :is(.esi-login__password-toggle, .esi-login__secondary-button, .esi-login__captcha img, .esi-login__guide summary):focus-visible {
  outline: 2px solid #ffbe42; outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .v4-guest .lf-btn { transition: none; transform: none; }
  .v4-guest .lf-btn[aria-busy="true"] .esi-login__spinner { animation: none; }
}