:root{
  --topbar-h: 84px;
  --vh: 1vh;
}

html, body{
  height: 100%;
  background: #001d37;
}

.view.view-login { margin: 0; }

.view-login.hero-login{
  position: relative;
  height: calc((var(--vh) * 100) - var(--topbar-h));
  min-height: calc((var(--vh) * 100) - var(--topbar-h));
  overflow: hidden;
}

.view-login.hero-login{
  height: calc(100vh - 84px);
  min-height: calc(100vh - 84px);
}


@supports (height: 100dvh){
  .view-login.hero-login{
    height: calc(100dvh - var(--topbar-h));
    min-height: calc(100dvh - var(--topbar-h));
  }
}

.view-login.hero-login::before{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0; left:0; 
  z-index:0;
  background: linear-gradient(to bottom, #001d37 0%, #7b8a96 40%, #ffffff 78%, #ffffff 100%);
  pointer-events:none;
}

.view-login .login-bg{
  position: relative;
  z-index: 1;
  height: 100%;
}

@media (min-width: 900px){
  .view-login .login-bg{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px;
  }
}

@supports (display: grid){
  @media (min-width: 900px){
    .view-login .login-bg{
      display: grid; 
    }
  }
}


@media (min-width: 900px){
  .view-login .login-bg{
    display: grid;
    grid-template-columns: minmax(540px, 1fr) minmax(480px, 520px);
    align-items: center;
    gap: clamp(24px, 5vw, 72px);
    padding: clamp(16px, 3vw, 32px);
  }
}

.hero-login .login-intro{ transition: transform .35s ease; }
.hero-login[data-state="form"] .login-intro{ transform: translateX(-28px); }

.intro-top{ display:flex; align-items:center; justify-content:flex-start; }
.intro-logo{ width: min(38vw, 680px); height:auto; display:block; }

.intro-desc{
  align-self:end; margin-top: clamp(8px, 5vh, 24px);
  width: min(860px, 86%); color:#fff;
  display: grid; grid-template-columns: 1.5fr 1fr;
  column-gap: clamp(18px, 2.4vw, 32px); row-gap: 8px; align-items: center;
}
.intro-desc h1{ margin:0 0 .6rem 0; font-size: clamp(22px, 2.6vw, 36px); }

.intro-actions{ grid-column: 2; display:flex; flex-direction:column; gap:10px; }

.intro-actions > * + * { margin-top: 10px; }

@supports (gap: 10px) {
  .intro-actions > * + * { margin-top: 0; }
}

.btn{ background-color: #0099FF; }

.view-login .login-form-area{

  right: 24px;
  width: 520px;
  max-width: 520px;
  height: 580px;
  max-height: 620px;
  left: auto;       
  top: 50%;
  transform: translate(0, -50%); 
}

.view-login .login-form-area{
  position:absolute; top:50%; right: clamp(24px, 5vw, 72px);
  width: min(520px, 32vw);
  height: min(580px, calc((var(--vh) * 100) - var(--topbar-h) - 96px));
  max-height: min(620px, calc((var(--vh) * 100) - var(--topbar-h) - 72px));
  display:flex; flex-direction:column; justify-content:center; gap:22px;
  padding:28px; border-radius:16px;
  background: #001d37; border: 1px solid rgba(120,100,170,0.35);
  box-shadow: 0 22px 60px rgba(0,0,0,.60);
  backdrop-filter: blur(12px);
  transition: transform .35s ease, opacity .35s ease;
}

@supports not (backdrop-filter: blur(1px)) {
  .view-login .login-form-area{
    background: rgba(0, 29, 55, 0.92); 
  }
}

@media (min-width: 900px){
  .hero-login[data-state="intro"] .login-form-area{
    left: auto; right: 24px;           
    opacity: 0;
    transform: translate(24px, -50%);   
    pointer-events: none;
  }
  .hero-login[data-state="form"] .login-form-area{
    left: auto; right: 24px;          
    opacity: 1;
    transform: translate(0, -50%);
    pointer-events: auto;
  }
}


@media (min-width: 900px){
  .hero-login[data-state="intro"] .login-form-area{
    opacity:0; transform: translate(48px, -50%); pointer-events:none;
  }
  .hero-login[data-state="form"] .login-form-area{
    opacity:1; transform: translate(0, -50%); pointer-events:auto;
  }
}

.view-login .muted{
  color: rgba(255,255,255,.9);
  font-size:14px; line-height:1.55; text-align:center; margin:0;
  max-width:52ch; align-self:center;
}

.view-login .form{ display:grid; gap:18px; }
.login-btn{ width:100%; }

.view-login .input-group input{
  width:100%; padding:14px 44px 12px 10px; background:transparent;
  border:none; border-bottom:1.5px solid rgba(255,255,255,.38);
  border-radius:0; font-size:16px; color:#fff; outline:none;
  transition:border-color .25s ease;
}

.view-login { isolation: isolate; }
.view-login .login-form-area { 
  height: calc(100vh - 84px - 12vh);
  max-height: calc(100vh - 84px - 6vh);
  z-index: 10; 
}

.input-group{ position:relative; margin:18px 0 4px; }
.input-group input{
  width:100%; padding:14px 44px 12px 10px; background:transparent;
  border:none; border-bottom:1.5px solid rgba(255,255,255,.38);
  border-radius:0; font-size:16px; color:#fff; outline:none;
  transition:border-color .25s ease;
}
.input-group input::placeholder{ color:rgba(255,255,255,.6); }

.input-group .icon{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; pointer-events:none;
}
.input-group .icon img{ width:100%; height:auto; display:block; }

@media (max-width: 899.98px){
  
  .view-login .login-bg{ display:block; padding: 6vh 0; }
  .view-login .login-intro{ display:none; }
  .view-login .login-form-area{
    position:relative; top:auto; right:auto;
    width:min(560px, 92vw); margin:0 auto;
    height: min(620px, calc(100dvh - var(--topbar-h) - 12vh));
    max-height: calc(100dvh - var(--topbar-h) - 6vh);
    transform:none !important; opacity:1 !important; pointer-events:auto;
  }
}

.kbd-only {
  pointer-events: auto;
}

.intro-actions{ display:flex; flex-direction:column; }

.intro-actions > * + * { 
  margin-top: 10px !important;  
  display: block;               
}

@supports (gap: 10px) {
  .intro-actions{ gap: 10px; }
  .intro-actions > * + * { margin-top: 0 !important; }
}

.intro-device-msg {
  margin-top: 1.5rem;
  max-width: 420px;
  font-size: 0.95rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}