.access-art {
  position: relative;
  isolation: isolate;
  flex: 1 1 180px;
  min-height: 180px;
  width: 100%;
  --access-accent: var(--login-accent, var(--recovery-accent, #0f766e));
  --access-secondary: var(
    --login-secondary,
    var(--recovery-secondary, #2563a6)
  );
  --access-surface: var(--recovery-surface, #fff);
  --access-ink: var(--recovery-ink, #213c40);
}
.access-art > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.access-halo {
  fill: var(--access-accent);
  opacity: 0.06;
}
.access-orbit {
  stroke: var(--access-accent);
  stroke-opacity: 0.22;
  stroke-dasharray: 3 7;
}
.access-link {
  stroke: var(--access-secondary);
  stroke-opacity: 0.15;
  stroke-width: 2;
}
.access-card {
  fill: var(--access-surface);
  stroke: color-mix(in srgb, var(--access-accent) 20%, var(--access-surface));
  stroke-width: 1.5;
  filter: drop-shadow(0 8px 12px #0f172a0a);
}
.access-accent {
  fill: var(--access-accent);
}
.access-secondary {
  fill: var(--access-secondary);
}
.access-accent-soft {
  fill: color-mix(in srgb, var(--access-accent) 14%, var(--access-surface));
}
.access-secondary-soft {
  fill: color-mix(in srgb, var(--access-secondary) 17%, var(--access-surface));
}
.access-grid {
  fill: color-mix(in srgb, var(--access-ink) 6%, var(--access-surface));
}
.access-check {
  stroke: var(--login-accent-ink, var(--recovery-accent-ink, #fff));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.access-large-check {
  stroke-width: 4;
}
.access-accent-stroke {
  stroke: var(--access-accent);
  stroke-opacity: 0.65;
  stroke-width: 5;
  stroke-linecap: round;
}
.access-secondary-stroke {
  stroke: var(--access-secondary);
  stroke-opacity: 0.6;
  stroke-width: 5;
  stroke-linecap: round;
}
.access-muted-line {
  stroke: var(--access-ink);
  stroke-opacity: 0.15;
  stroke-width: 4;
  stroke-linecap: round;
}
.access-dot {
  fill: var(--access-accent);
  opacity: 0.55;
}
.access-spark {
  stroke: var(--access-secondary);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.5;
}
.signin-story {
  justify-content: flex-start;
  gap: 24px;
}
.signin-story:after {
  display: none;
}
.signin-story-copy {
  flex: none;
}
.signin-story .access-art {
  --access-surface: #fff;
  --access-ink: #213c40;
  min-height: 180px;
}
.signin-story .access-halo {
  fill: #fff;
  opacity: 0.06;
}
.signin-story .access-orbit {
  stroke: #fff;
  stroke-opacity: 0.2;
}
.signin-story .access-link {
  stroke: #fff;
  stroke-opacity: 0.15;
}
.signin-story .access-dot,
.signin-story .access-spark {
  fill: #fff;
  stroke: #fff;
  opacity: 0.35;
}
.signin-story.is-quiet .access-art {
  min-height: 340px;
}
.signin-story h1 {
  margin: 10px 0 15px;
}
.signin-story-rule {
  margin-top: 20px;
}
.signin-brand {
  flex: none;
}
.auth-shell .auth-recovery-art {
  min-height: 100%;
  justify-content: flex-start;
  gap: 24px;
}
.auth-recovery-art .auth-copy {
  flex: none;
  margin: 8px 0 0;
}
.auth-recovery-art .auth-copy h1 {
  margin: 12px 0 18px;
}
.auth-art .access-art {
  height: auto;
  max-width: none;
  margin: 0;
  min-height: 220px;
  flex: 1 1 220px;
}
.auth-recovery-art .brand {
  flex: none;
}
.auth-recovery-art .recovery-art-caption {
  flex: none;
  margin: 0 auto;
  min-height: 40px;
}
.auth-recovery-art.is-quiet .access-art {
  min-height: 400px;
}
@media (max-width: 760px) {
  .signin-story {
    gap: 16px;
  }
  .signin-story .access-art {
    min-height: 125px;
    flex-basis: 125px;
  }
  .signin-story.is-quiet .access-art {
    min-height: 190px;
  }
  .auth-shell .auth-recovery-art {
    min-height: 0;
    gap: 18px;
  }
  .auth-art .access-art {
    min-height: 150px;
    flex-basis: 150px;
  }
  .auth-recovery-art.is-quiet .access-art {
    min-height: 190px;
  }
  .auth-recovery-art .auth-copy {
    margin: 0;
  }
  .auth-recovery-art .auth-copy h1 {
    font-size: 32px;
    margin: 8px 0;
  }
  .auth-recovery-art .recovery-art-caption {
    margin: 0 auto;
  }
}

.access-art svg {
  max-width: 100%;
}
.access-art[data-art-style='minimal'] .access-card,
.access-art[data-art-style='panorama'] .access-card {
  stroke-opacity: 0.3;
  filter: drop-shadow(0 12px 20px #0d354620);
}

.access-art[data-art-style='custom'] {
  overflow: hidden;
  border-radius: 24px;
  min-height: 240px;
}
.access-art[data-art-style='custom'] > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.signin-story:has([data-art-style='cutout']),
.auth-recovery-art:has([data-art-style='cutout']),
.appearance-signin > section:has([data-art-style='cutout']),
.appearance-recovery-story:has([data-art-style='cutout']) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.signin-story > .access-art[data-art-style='cutout'],
.auth-recovery-art > .access-art[data-art-style='cutout'],
.appearance-signin > section > .access-art[data-art-style='cutout'],
.appearance-recovery-story > .access-art[data-art-style='cutout'] {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 100%;
  z-index: -1;
  pointer-events: none;
}
.access-art[data-art-style='cutout'] > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.access-art[data-art-style='cutout'] {
  overflow: hidden;
}
.access-art-thumbnail .access-art[data-art-style='custom'] {
  border-radius: 12px;
  min-height: 0;
}

.appearance-live-preview .access-art {
  --access-accent: var(--preview-accent);
  --access-secondary: var(--preview-secondary);
  --access-surface: var(--preview-surface);
  --access-ink: var(--preview-ink);
  --login-accent-ink: var(--preview-accent-ink);
}
.appearance-signin > section .access-art {
  --access-surface: #fff;
  --access-ink: #213c40;
}

.signin-page,
.platform-signin,
#app:has(> .auth-shell) {
  position: relative;
  isolation: isolate;
}
.signin-page::before,
.platform-signin::before,
#app:has(> .auth-shell)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    var(--login-accent, var(--recovery-accent, #0f766e)),
    var(--login-secondary, var(--recovery-secondary, #0f766e))
  );
  mask: url('/assets/workgrid-geometry.svg') center top / 1100px 1283px repeat;
  opacity: 0.18;
  pointer-events: none;
  z-index: -1;
}
.signin-frame {
  position: relative;
  isolation: isolate;
}
.signin-panel {
  background: var(--brand-surface, #fff);
}
#app:has(> .auth-shell) {
  padding: clamp(16px, 3vw, 40px);
  min-height: 100dvh;
  background: var(--recovery-canvas, #f5f8f9);
}
#app > .auth-shell {
  position: relative;
  max-width: 1200px;
  min-height: calc(100dvh - 2 * clamp(16px, 3vw, 40px));
  margin: auto;
  border: 1px solid
    color-mix(
      in srgb,
      var(--recovery-ink, #213c40) 14%,
      var(--recovery-surface, #fff)
    );
  border-radius: 22px;
  overflow: hidden;
  background: var(--recovery-surface, #fff);
  box-shadow: 0 18px 55px
    color-mix(in srgb, var(--recovery-ink, #213c40) 10%, transparent);
}
@media (max-width: 650px) {
  .signin-page::before,
  #app:has(> .auth-shell)::before {
    mask-size: 760px 887px;
    opacity: 0.13;
  }
}
@media print, (forced-colors: active) {
  .signin-page::before,
  .platform-signin::before,
  #app:has(> .auth-shell)::before {
    display: none;
  }
}