/* Full-viewport bead scene. One restrained focus layer keeps the form readable. */
.login-layout {
  position: relative; isolation: isolate; display: grid;
  grid-template-columns: minmax(0, 60%) minmax(400px, 40%);
  min-height: 100vh; min-height: 100svh; overflow: hidden;
  background: linear-gradient(151deg, #5b7781 0%, #72838a 36%, #a89b94 72%, #c5aea0 100%);
}
.login-layout::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 64% 80% at 25% 58%, rgb(232 230 226 / 20%), transparent 72%),
    linear-gradient(180deg, rgb(18 37 47 / 13%), transparent 35%, rgb(63 50 48 / 21%));
}
.login-layout::after {
  content: ""; position: absolute; inset: 14px; z-index: 0; pointer-events: none;
  border: 1px solid rgb(255 255 255 / 19%); border-radius: var(--cj-radius-shell);
}
.bead-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.login-bead-canvas { display: block; width: 100%; height: 100%; }
.scene-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent 20%, rgb(74 87 92 / 4%) 43%, rgb(223 219 211 / 15%) 62%, transparent 72%);
}
.scene-wordmark {
  position: absolute; z-index: 2; top: clamp(38px, 5vw, 76px); left: clamp(38px, 5vw, 88px);
  display: grid; gap: 3px; color: #fff; line-height: 1.2;
  text-shadow: 0 1px 2px rgb(29 44 51 / 16%);
}
.scene-wordmark strong { font-size: clamp(33px, 2.8vw, 45px); font-weight: 660; letter-spacing: -.07em; }
.scene-wordmark > span { color: #fbfaf6; font-size: 11px; font-weight: 620; letter-spacing: .26em; }
.scene-wordmark small { margin-top: 6px; color: #fffef1; font-size: 12px; font-weight: 480; letter-spacing: .08em; }
.scene-copy {
  position: absolute; z-index: 2; bottom: clamp(34px, 3.4vw, 56px); left: clamp(38px, 5vw, 88px);
  max-width: min(520px, 46vw); color: #fff; text-shadow: 0 1px 2px rgb(29 44 51 / 18%);
}
.scene-copy p { margin: 0 0 9px; font-size: clamp(26px, 2.55vw, 42px); font-weight: 570; line-height: 1.28; letter-spacing: -.06em; }
.scene-copy span { font-size: 14px; line-height: 1.6; letter-spacing: .02em; }
main.login-card {
  position: relative; z-index: 3; grid-column: 2; display: flex; align-items: center; justify-content: center;
  min-width: 0; margin: 14px 14px 14px 0; padding: 52px clamp(36px, 4.8vw, 92px);
  border: 1px solid var(--cj-line); border-left-color: rgb(255 255 255 / 37%);
  border-radius: 0 var(--cj-radius-shell) var(--cj-radius-shell) 0;
  background: var(--cj-focus); color: var(--cj-graphite);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: none;
}
.login-content { margin: 0; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  main.login-card { background: #f4f2ee; }
}
@media (max-width: 1000px) and (min-width: 768px) {
  .login-layout { grid-template-columns: minmax(0, 53%) minmax(380px, 47%); }
  main.login-card { padding: 40px 28px; }
  .scene-copy { max-width: 39vw; }
}
@media (max-width: 767px) {
  .login-layout { display: block; min-height: 100svh; overflow: visible; background: linear-gradient(164deg, #5e7b85 0%, #809095 39%, #baaaa1 78%, #c9b5aa 100%); }
  .login-layout::after { inset: 8px 8px auto; height: min(38svh, 350px); border-radius: 20px 20px 0 0; border-bottom: 0; }
  .bead-art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .92; }
  .scene-veil { background: linear-gradient(180deg, transparent 9%, rgb(84 99 105 / 4%) 30%, rgb(239 235 228 / 15%) 39%, transparent 50%); }
  .scene-wordmark { top: calc(25px + env(safe-area-inset-top)); left: 27px; gap: 2px; }
  .scene-wordmark strong { font-size: 29px; }
  .scene-wordmark > span { font-size: 10px; }
  .scene-wordmark small { margin-top: 3px; font-size: 11px; }
  .scene-copy { display: none; }
  main.login-card {
    display: block; margin: 0; padding: 32px 26px calc(27px + env(safe-area-inset-bottom));
    padding-top: clamp(355px, 43svh, 430px);
    border: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  main.login-card::before {
    content: ""; position: absolute; z-index: -1; inset: clamp(335px, 41svh, 410px) 0 0;
    border-top: 1px solid rgb(255 255 255 / 72%); border-radius: 25px 25px 0 0;
    background: linear-gradient(180deg, rgb(248 247 243 / 96%), rgb(248 247 243 / 98%));
  }
  .login-content { max-width: 460px; margin: auto; }
  .form-kicker { display: none; }
  body:has(form :focus) .bead-art { opacity: .33; }
  body:has(form :focus) main.login-card { padding-top: clamp(112px, 16svh, 150px); }
  body:has(form :focus) main.login-card::before { inset: clamp(94px, 14svh, 132px) 0 0; }
}
@media (max-width: 767px) and (max-height: 630px) {
  .scene-wordmark strong { font-size: 23px; }
  main.login-card { padding-top: 145px; }
  main.login-card::before { top: 127px; }
}
@media (prefers-reduced-transparency: reduce) {
  main.login-card { background: #f4f2ee; backdrop-filter: none; -webkit-backdrop-filter: none; }
  @media (max-width: 767px) { main.login-card { background: transparent; } main.login-card::before { background: #f4f2ee; } }
}
@media (prefers-reduced-motion: reduce) {
  .bead-art { opacity: .85; }
}