.login-view {
  position:relative;
  min-height:100dvh;
  padding:clamp(28px,7vw,70px) 18px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:linear-gradient(155deg,#020202 0%,#080705 55%,#020202 100%)
}
.login-view::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 16%,rgba(247,217,139,.12),transparent 26%),linear-gradient(115deg,transparent 0 66%,rgba(199,149,60,.06) 66% 67%,transparent 67%);
  pointer-events:none
}
.ambient {
  position:absolute;
  border-radius:50%;
  filter:blur(2px);
  opacity:.5
}
.ambient-one {
  width:360px;
  height:360px;
  right:-230px;
  top:-130px;
  border:30px solid rgba(247,217,139,.12)
}
.ambient-two {
  width:220px;
  height:220px;
  left:-170px;
  bottom:-60px;
  border:1px solid rgba(247,217,139,.25)
}
.login-card {
  position:relative;
  z-index:2;
  width:min(100%,430px);
  padding:28px 22px 22px;
  border-radius:30px;
  border:1px solid rgba(247,217,139,.2);
  background:linear-gradient(145deg,rgba(18,18,15,.95),rgba(6,6,5,.96));
  box-shadow:0 32px 90px rgba(0,0,0,.64),inset 0 0 0 1px rgba(255,255,255,.025);
  backdrop-filter:blur(18px)
}
.login-brand {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid var(--line-soft);
  padding-bottom:18px
}
.login-brand img {
  width:150px;
  max-height:76px;
  object-fit:contain;
  object-position:left center
}
.login-brand span {
  color:var(--gold);
  font-size:10px;
  font-weight:800;
  letter-spacing:1.5px;
  text-align:right
}
.login-heading {
  padding:26px 0 16px
}
.login-heading h1 {
  margin:0;
  font-size:clamp(29px,8vw,38px);
  line-height:1.06;
  letter-spacing:-1px
}
.login-heading>p:last-child {
  margin:12px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.55
}
.field {
  display:grid;
  gap:7px;
  margin:14px 0
}
.field>span:first-child {
  font-size:11px;
  color:var(--champagne);
  font-weight:700
}
.input-shell {
  height:54px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border-radius:16px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.035);
  transition:.2s ease
}
.input-shell:focus-within {
  border-color:var(--gold-2);
  box-shadow:0 0 0 3px rgba(247,217,139,.07)
}
.input-shell>.icon {
  color:var(--gold);
  flex:0 0 auto
}
.input-shell input {
  min-width:0;
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-size:14px
}
.input-shell input::placeholder {
  color:var(--muted-2)
}
.icon-button {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  color:var(--champagne);
  border:1px solid var(--line-soft)
}
.icon-button.compact {
  width:34px;
  height:34px;
  border:0;
  background:transparent
}
.form-message {
  min-height:20px;
  margin:8px 0;
  color:var(--danger);
  font-size:11px
}
.primary-button {
  min-height:54px;
  padding:0 18px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:linear-gradient(135deg,var(--champagne),#d0a352);
  color:#191307;
  font-weight:800;
  box-shadow:0 12px 34px rgba(199,149,60,.22);
  transition:transform .2s ease,filter .2s ease
}
.primary-button:hover {
  filter:brightness(1.05)
}
.primary-button:active {
  transform:scale(.985)
}
.primary-button.full {
  width:100%
}
.login-security {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:18px;
  color:var(--muted-2);
  font-size:10px
}
.login-security .icon {
  width:16px;
  height:16px;
  color:var(--gold-2)
}