/*
  ZIGMA LOGIN / CINEMATIC STUDIO V3 / CLEAN GREEN
  Full-screen photographic stage, seven unboxed business chapters, stable secure form.
  Pure CSS animation + small ES5 scene script; existing authentication routing preserved; alphabet CAPTCHA handled by core PHP.
*/
:root {
  --zl-bg: #041613;
  --zl-green: #8de9a5;
  --zl-green-deep: #009f63;
  --zl-white: #f6fff8;
  --zl-muted: #b4c9be;
  --zl-line: rgba(205, 244, 225, .20);
  --zl-scene-speed: 15000ms;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 300px; background: var(--zl-bg); }
body.zigma-login-page {
  margin: 0; min-width: 300px; background: var(--zl-bg);
  color: var(--zl-white); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.zigma-login-page button, .zigma-login-page input { font: inherit; }
.zigma-login-page button { cursor: pointer; }
.zigma-login-page button:focus-visible, .zigma-login-page input:focus-visible {
  outline: 2px solid #9df5b7; outline-offset: 3px;
}
.zl-stage {
  --zl-edge: clamp(27px, 5.1vw, 108px);
  position: relative; isolation: isolate; width: 100%; min-height: 760px;
  height: 100vh; height: 100svh; overflow: hidden; background: var(--zl-bg);
}
/* The full browser viewport is the image canvas. No center card and no split background. */
.zl-scene-deck { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.zl-scene {
  position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden;
  transition: opacity 1600ms cubic-bezier(.22,.61,.36,1), visibility 1600ms;
  will-change: opacity;
}
.zl-scene.is-current { visibility: visible; opacity: 1; z-index: 1; }
.zl-scene-photo {
  position: absolute; inset: -3%; background-size: cover; background-position: center;
  transform: scale(1.075); filter: saturate(1.07) brightness(.92) contrast(1.04);
  will-change: transform;
}
.zl-scene.is-current .zl-scene-photo { animation: zl-camera-drift 15s ease-out both; }
@keyframes zl-camera-drift {
  0% { transform: scale(1.095) translate3d(-.7%, .35%, 0); }
  100% { transform: scale(1.02) translate3d(.85%, -.3%, 0); }
}
/* Keep the environment visible and place contrast only where text is actually present. */
.zl-scene-shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(2,20,14,.71) 0%, rgba(2,20,14,.33) 25%,
      rgba(5,25,16,.02) 52%, rgba(2,20,13,.44) 70%, rgba(2,17,11,.76) 100%),
      linear-gradient(0deg, rgba(1,15,14,.88) 0%, rgba(1,20,18,.2) 28%, transparent 58%, rgba(2,18,17,.23) 100%);
}
.zl-scene--recovery .zl-scene-photo { background-position: center 57%; filter: saturate(1.0) brightness(.96) contrast(1.01); }
.zl-scene--restoration .zl-scene-photo { background-position: center 50%; filter: saturate(1.16) brightness(.88) contrast(1.02); }
.zl-scene--fuel .zl-scene-photo { background-position: center 48%; filter: saturate(.98) brightness(.87) contrast(1.04); }
.zl-scene--iot .zl-scene-photo { background-position: 65% center; filter: saturate(.92) brightness(.79) contrast(1.04); }
.zl-scene--carbon .zl-scene-photo { background-position: 42% center; filter: saturate(1.09) brightness(.87); }
.zl-scene--erp .zl-scene-photo { background-position: 66% center; filter: saturate(.90) brightness(.77) contrast(1.04); }
.zl-right-veil {
  position: absolute; inset: 0 0 0 auto; width: 55%; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(3,28,18,.17) 15%,
    rgba(2,24,16,.67) 52%, rgba(2,19,13,.91) 100%);
}
/* Corporate header floats on the scene, never in a boxed navigation bar. */
.zl-global-head {
  position: absolute; z-index: 20; left: var(--zl-edge); right: var(--zl-edge); top: 33px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.zl-global-brand { display: flex; align-items: center; color: var(--zl-white); }
.zl-brand-mark { display: grid; place-items: center; width: 118px; height: 118px; padding: 0; border-radius: 0;
  overflow: visible; background: transparent; box-shadow: none; }
.zl-brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 1px rgba(245,255,244,.80)) drop-shadow(0 0 2px rgba(244,255,245,.38)); }
/* Editorial scene text: large headline, clear caption and linear operation stages. */
.zl-scene-copy {
  position: absolute; left: var(--zl-edge); top: 49%; transform: translate3d(0, -43%, 0);
  width: min(715px, 54vw); z-index: 3; opacity: 0; color: white;
  text-shadow: 0 2px 28px rgba(0,0,0,.34);
}
.zl-scene.is-current .zl-scene-copy { animation: zl-story-in 1000ms cubic-bezier(.17,.72,.24,1) 220ms both; }
@keyframes zl-story-in {
  from { opacity: 0; transform: translate3d(-12px, -43%, 0); }
  to { opacity: 1; transform: translate3d(0, -43%, 0); }
}
.zl-copy-tag { display:flex; align-items: center; gap: 14px; margin-bottom: 28px;
  color: #d9ffe1; font-size: 11px; font-weight: 800; letter-spacing: .23em; }
.zl-copy-index { width: 41px; height: 41px; border: 1px solid rgba(209,255,213,.61); border-radius: 50%;
  display:grid; place-items:center; background: rgba(4,45,36,.35); font-size: 12px; letter-spacing: .02em; }
.zl-copy-divider { width: 35px; height: 1px; background: rgba(191,255,204,.70); }
.zl-scene-copy h1 { margin: 0; max-width: 750px; font-size: clamp(53px, 5.3vw, 91px);
  font-weight: 800; line-height: 1.06; letter-spacing: -.057em; }
.zl-scene-copy h1 em { color: #94f4a8; font-style: normal; text-shadow: 0 4px 28px rgba(5,50,27,.20); }
.zl-scene-copy p { margin: 29px 0 0; width: min(540px,100%); font-size: 17px; font-weight: 450;
  line-height: 1.68; color: rgba(246,255,250,.89); }
/* Sign-in stays in a fixed right rail: no opaque login card or moving wrapper. */
.zl-form-side {
  position: absolute; z-index: 23; width: clamp(355px, 30vw, 440px); right: clamp(42px, 7.5vw, 144px);
  top: 45.5%; transform: translateY(-45%); padding-left: 32px;
  border-left: 1px solid rgba(219,255,231,.19);
}
.zl-form-panel { position: relative; width: 100%; }
.zl-form-panel::before { content: ""; position: absolute; z-index: -1; left: -34px; top: 7px;
  width: 2px; height: 47px; background: linear-gradient(#a5fac0, rgba(115,227,155,.1)); box-shadow: 0 0 20px rgba(115,227,155,.15); }
.zl-topline { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: #ceeed7;
  font-size: 11px; letter-spacing: .17em; white-space: nowrap; }
.zl-topline-label { font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.zl-topline-end { display:flex; align-items:center; gap: 7px; margin-left: auto; color: rgba(228,250,234,.7); letter-spacing: .11em; font-size: 9px; }
.zl-topline-end i { width: 6px; height: 6px; background: #8af6a9; border-radius: 100%; box-shadow: 0 0 9px #67eb8e; }
.zl-welcome-tag { display:flex;align-items:center;gap:9px; color: #93f8ad; letter-spacing: .23em;
  font-size: 10px; font-weight: 800; margin-bottom: 12px; }
.zl-welcome-tag span { width: 18px; height: 2px; background: #8decaa; }
.zl-greeting h2 { margin: 0; color: #f8fff9; font-size: clamp(26px, 2.3vw, 33px); font-weight: 750; line-height: 1.08; letter-spacing: -.049em; }
.zl-greeting h2 em { font-style: normal; color: #93f4ac; }
.zl-greeting p { margin: 12px 0 28px; color: #c3d9ce; font-size: 13px; line-height: 1.55; }
#login_form { display: block; margin: 0; padding:0; width:100%; }
.zl-field-block { margin-bottom: 18px; position:relative; }
.zl-field-block>label, .zl-label-row label { display:block; margin:0 0 9px; color:#effcf3;
  font-size: 11px; font-weight: 750; letter-spacing: .015em; }
.zl-label-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }
.zl-label-row label { margin:0; }
.zl-label-row>span { color: rgba(217,248,228,.67); font-size:10px; }
.zl-input-wrap {
  height:54px; position:relative; display:flex;align-items:center; gap:11px;
  border:1px solid rgba(205,242,226,.23); border-radius:12px;
  background: rgba(15,45,39,.70); -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px);
  transition: background .23s ease, border-color .23s ease, box-shadow .23s ease, transform .23s ease;
}
.zl-input-wrap>svg { width:18px; height:18px; margin-left:17px; flex:none;
  stroke:#b7d6c5; fill:none; stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round; }
.zl-input-wrap input {
  flex:1; min-width:0; height:100%; background:transparent!important; border:0!important;
  outline:none!important; box-shadow:none!important; border-radius:12px;
  padding:0 15px 0 0; font-size:14px; color:white!important;
  -webkit-text-fill-color:white; caret-color:#abffc1;
}
.zl-input-wrap input::placeholder { color:rgba(211,231,220,.53); opacity:1; }
.zl-input-wrap:hover { border-color:rgba(149,250,184,.55); background:rgba(21,59,48,.79); }
.zl-field-block.zl-is-focused .zl-input-wrap, .zl-input-wrap:focus-within {
  border-color:#96eeb0; box-shadow:0 0 0 3px rgba(131,246,168,.13),0 13px 25px rgba(0,0,0,.16);
  background:rgba(16,60,46,.87); transform:translateY(-1px);
}
.zl-field-block.zl-is-focused .zl-input-wrap>svg { stroke:#9affb3; }
/* Explicitly override Chrome/Edge autofill to avoid the bright-white fields in the live screenshot. */
.zl-input-wrap input:-webkit-autofill,
.zl-input-wrap input:-webkit-autofill:hover,
.zl-input-wrap input:-webkit-autofill:focus,
.zl-input-wrap input:-webkit-autofill:active {
  -webkit-box-shadow:0 0 0 100px #18362f inset!important;
  -webkit-text-fill-color:#f8fff9!important;
  caret-color:white!important;
  transition:background-color 99999s ease-out 0s;
}
.zl-input-gleam { pointer-events:none;position:absolute;bottom:0;left:13%;right:13%;height:1px;
  background:linear-gradient(90deg,transparent,#84ffae,transparent);opacity:0;transition:opacity .25s ease; }
.zl-is-focused .zl-input-gleam { opacity:.85; }
.zl-toggle-password { width:43px; height:43px; display:grid;place-items:center;background:none;border:0;color:#b8daca;flex:none;margin-right:5px; border-radius:9px; }
.zl-toggle-password:hover { background:rgba(190,250,209,.09); }
.zl-toggle-password svg { width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round; }
.zl-field-error:empty { display:none; }
.zl-field-error { margin:7px 0 0; color:#ffb9ae; font-size:11px; line-height:1.35; }
.zl-has-error .zl-input-wrap { border-color:#ff9790; box-shadow:0 0 0 2px rgba(249,90,83,.11); }
.zl-error-shake { animation:zl-input-shake .35s ease both; }
@keyframes zl-input-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.zl-login-error { margin: 0 0 12px; border:1px solid rgba(255,140,130,.28);border-radius:10px;
  background:rgba(145,29,32,.28); padding:12px 13px; color:#ffe3dc;font-size:12px;line-height:1.45; }
.zl-error-appear { animation:zl-error-pop .26s ease both; }
@keyframes zl-error-pop { from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none} }
.zl-captcha-block { margin-bottom:13px; }
.zl-captcha-block .zl-label-row {margin-bottom:7px;}
.zl-captcha-block .zl-label-row label {font-size:10px;font-weight:600;color:rgba(215,240,222,.69);}
.zl-captcha-image-row {display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:8px;}
.zl-captcha-art {display:block;position:relative;width:168px;height:49px;flex:none;max-width:59%;overflow:hidden;
  background:#edf4ee;border:1px solid rgba(205,232,214,.22);border-radius:7px;
  box-shadow:none;
}
/* One-time entry fade; refreshed codes use the image opacity transition below. */
.zl-captcha-art {animation:zl-captcha-entry .7s ease-out 1;}
@keyframes zl-captcha-entry {from{opacity:.35}to{opacity:1}}
/* Readable CAPTCHA: full opacity/colour at rest (no fade or desaturation), fade out/in when refreshed. */
.zl-captcha-art img {display:block;width:100%;height:100%;object-fit:fill;opacity:1;
  transition:opacity .48s ease,filter .48s ease;filter:blur(0) contrast(1.0) saturate(1);}
.zl-captcha-refreshing img {opacity:.2;filter:blur(1.1px) contrast(1) saturate(.78);}
.zl-captcha-loaded img {opacity:1;filter:blur(0) contrast(1.0) saturate(1);}
.zl-captcha-art:not(.zl-captcha-refreshing):hover img {opacity:1;filter:blur(0) contrast(1.04);}
@media(prefers-reduced-motion: reduce) {
  .zl-captcha-art img {transition:none!important;filter:blur(0) contrast(1);}
}
.zl-captcha-failed {border-color:#ffa59d;}
.zl-refresh {flex:none;display:grid;place-items:center;width:38px;height:42px;padding:0;border-radius:9px;
  border:1px solid rgba(203,242,218,.16);color:rgba(211,255,224,.78);background:rgba(26,64,49,.45);transition:background .2s ease,transform .2s ease,border-color .2s ease;}
.zl-refresh:hover {background:rgba(38,99,66,.90);border-color:#91f0b1;}
.zl-refresh svg {width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.zl-refreshing svg {animation:zl-spin .65s linear 1;}
@keyframes zl-spin {to{transform:rotate(360deg)} }
.zl-captcha-image-row p {margin:0;max-width:100px;font-size:10px;line-height:1.6;color:rgba(215,246,227,.77);}
.zl-text-link {display:inline;appearance:none;background:none;border:0;padding:0;color:#9bffb8;text-decoration:underline;text-underline-offset:3px;font-size:inherit;font-weight:700;}
.zl-text-link:hover {color:white;}
.zl-submit {position:relative;display:flex;justify-content:center;align-items:center;gap:11px;width:100%;height:55px;
  padding:0 20px;border:1px solid rgba(150,255,179,.32);border-radius:12px;
  background:linear-gradient(98deg,#14bf69 0%,#079655 100%);color:white;font-size:14px;font-weight:800;letter-spacing:.02em;
  box-shadow:0 13px 26px rgba(0,113,57,.27),inset 0 1px 0 rgba(255,255,255,.21);
  overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;}
.zl-submit:hover:not(:disabled) {transform:translateY(-2px);box-shadow:0 17px 32px rgba(0,127,67,.4);filter:brightness(1.07);}
.zl-submit:active:not(:disabled) {transform:translateY(0);}
.zl-submit:disabled {cursor:wait;opacity:.84;}
.zl-submit-icon {display:grid;place-items:center;transition:transform .2s ease;}
.zl-submit-icon svg {width:20px;height:20px;fill:none;stroke:white;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.zl-submit:hover .zl-submit-icon {transform:translateX(5px);}
.zl-spinner {display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:white;border-radius:50%;animation:zl-spin .65s linear infinite;}
.zl-is-loading .zl-spinner {display:block;}.zl-is-loading .zl-submit-icon {display:none;}
.zl-submit-progress {position:absolute;bottom:0;left:0;width:35%;height:2px;transform:translateX(-110%);background:white;opacity:0;}
.zl-is-loading .zl-submit-progress {opacity:.8;animation:zl-submit-load 1.2s linear infinite;}
@keyframes zl-submit-load {to{transform:translateX(310%)}}
.zl-security-note {display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;
  margin:18px 0 0;color:rgba(218,245,229,.68);font-size:10px;white-space:nowrap;}
.zl-security-note svg {width:13px;height:13px;fill:none;stroke:#9aeab4;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
/* Bottom player: legible cinematic timeline, not tiny cards. */
.zl-bottom-bar {position:absolute;z-index:24;left:var(--zl-edge);right:var(--zl-edge);bottom:50px;
  display:grid;grid-template-columns:137px minmax(0,1fr) 180px;align-items:end;gap:27px;}
.zl-bottom-meta {display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:50px;color:#e5f5eb;}
.zl-current-label {font-size:10px;letter-spacing:.15em;font-weight:800;color:rgba(223,246,231,.74);white-space:nowrap;}
.zl-numbers {display:flex;align-items:baseline;gap:7px;font-size:14px;font-weight:650;letter-spacing:.03em;}
.zl-current-number {font-size:29px;line-height:1;font-weight:800;letter-spacing:-.03em;color:#adffc0;}
.zl-separator {color:rgba(216,255,225,.42);margin:0 2px;}
.zl-scene-pagination {display:flex;gap:10px;width:100%;align-items:flex-start;}
.zl-scene-dot {flex:1;min-width:0;border:0;background:transparent;padding:6px 0;text-align:left;color:rgba(227,251,235,.70);
  display:flex;flex-direction:column;gap:10px;opacity:.67;transition:opacity .2s ease,color .2s ease;}
.zl-scene-dot:hover, .zl-scene-dot.is-current {opacity:1;color:white;}
.zl-progress-line {display:block;width:100%;height:3px;position:relative;overflow:hidden;border-radius:99px;background:rgba(216,251,228,.33);}
.zl-progress-line::after {content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#41ed95,#b7ffc6);}
.zl-scene-dot.is-current .zl-progress-line::after {animation:zl-story-progress var(--zl-scene-speed) linear both;}
@keyframes zl-story-progress {to{transform:scaleX(1)}}
.zl-progress-name {display:flex;align-items:baseline;gap:6px;overflow:hidden;white-space:nowrap;font-size:11px;line-height:1.3;font-weight:700;}
.zl-progress-name b {font-size:9px;font-weight:800;color:#acfac2;}
.zl-progress-name span {overflow:hidden;text-overflow:ellipsis;}
.zl-player-actions {display:flex;align-items:center;justify-content:flex-end;gap:6px;min-height:50px;}
.zl-skip, .zl-motion-toggle {display:grid;place-items:center;flex:none;border:1px solid rgba(212,248,226,.25);color:#f1fff5;
  background:rgba(12,45,38,.56);border-radius:100px;height:38px;transition:background .2s ease,border-color .2s ease,transform .2s ease;}
.zl-skip {width:38px;padding:0;}
.zl-skip svg {width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.zl-motion-toggle {display:flex;align-items:center;justify-content:center;gap:7px;padding:0 11px;font-size:11px;}
.zl-motion-glyph {font-size:12px;font-weight:700;color:#aff8be;}
.zl-skip:hover, .zl-motion-toggle:hover {background:rgba(62,120,81,.60);border-color:rgba(171,255,201,.68);transform:translateY(-2px);}
.zl-footnote {position:absolute;z-index:20;left:var(--zl-edge);right:var(--zl-edge);bottom:15px;display:flex;justify-content:space-between;align-items:center;gap:18px;
  color:rgba(227,244,234,.53);font-size:10px;line-height:1.5;letter-spacing:.015em;pointer-events:none;}
/* Pause controls affect only the scene drift and timeline; login stays interactive. */
.zl-motion-paused .zl-scene-photo, .zl-motion-paused .zl-scene-dot .zl-progress-line::after {animation-play-state:paused!important;}
@media(max-width:1450px) {
  .zl-stage {--zl-edge:clamp(30px,4.3vw,66px)}
  .zl-form-side {right:4.4vw;width:405px;}
  .zl-scene-copy {width:50vw;}.zl-scene-copy h1 {font-size:clamp(48px,5.0vw,76px)}
  .zl-bottom-bar {grid-template-columns:120px minmax(0,1fr) 180px;gap:14px;}
  .zl-progress-name {font-size:10px;}
}
@media(max-height:830px) and (min-width:851px) {
  .zl-global-head {top:24px;}
  .zl-global-brand .zl-brand-mark {width:102px;height:102px;}.zl-global-brand img {width:100%;height:100%;}
  .zl-scene-copy {top:49%;}.zl-scene-copy h1 {font-size:clamp(45px,4.55vw,70px);}
  .zl-scene-copy p {font-size:15px;margin-top:22px;}
  .zl-copy-tag {margin-bottom:18px;}
  .zl-form-side {top:45%;transform:translateY(-44%);}
  .zl-topline {margin-bottom:19px;}.zl-greeting p {margin-bottom:18px;}
  .zl-greeting h2 {font-size:29px;}.zl-field-block {margin-bottom:13px;}
  .zl-input-wrap {height:48px;}.zl-captcha-art {height:51px;}
  .zl-captcha-image-row {margin-bottom:9px;}.zl-submit {height:49px;}
  .zl-bottom-bar {bottom:41px;}.zl-footnote {bottom:12px;}
}
@media(max-width:1120px) and (min-width:851px) {
  .zl-form-side {width:350px;right:3vw;padding-left:22px;}
  .zl-scene-copy {left:3.4vw;width:51vw;}.zl-scene-copy h1 {font-size:clamp(40px,4.5vw,55px);}
  .zl-scene-copy p {font-size:13px;max-width:350px;}
  .zl-progress-name {font-size:0;}.zl-progress-name b {font-size:10px;}
  .zl-bottom-bar {grid-template-columns:112px minmax(0,1fr) 180px;}
}
/* Tablet/mobile: full-bleed scene continues above and behind the form; form never joins carousel. */
@media(max-width:850px) {
  .zl-stage {--zl-edge:24px;height:auto;min-height:950px;}
  .zl-global-head {top:18px;left:24px;right:24px;}
  .zl-brand-mark {width:96px;height:96px;padding:0;} .zl-brand-mark img {width:100%;height:100%;}
  .zl-scene-shade {background:linear-gradient(180deg,rgba(3,23,19,.34) 0%,rgba(3,23,19,.44) 25%,rgba(2,19,18,.88) 45%,rgba(2,19,18,.96) 74%,rgba(2,19,18,.95) 100%);}
  .zl-right-veil {width:100%;background:linear-gradient(180deg,transparent 1%,rgba(2,22,20,.10) 19%,rgba(2,18,17,.74) 41%,rgba(2,18,17,.63) 100%);}
  .zl-scene-photo {background-position:43% center!important;}
  .zl-scene-copy {top:122px;left:24px;width:calc(100% - 48px);transform:none;}
  .zl-scene.is-current .zl-scene-copy {animation:zl-story-mobile-in .95s ease .12s both;}
  @keyframes zl-story-mobile-in {from{opacity:0;transform:translate3d(0,11px,0)}to{opacity:1;transform:none}}
  .zl-copy-tag {font-size:9px;margin-bottom:11px;gap:8px;}
  .zl-copy-index {width:28px;height:28px;font-size:10px;}.zl-copy-divider {width:16px;}
  .zl-scene-copy h1 {font-size:clamp(35px,6.5vw,49px);line-height:1.08;letter-spacing:-.044em;}
  .zl-scene-copy p {margin-top:10px;font-size:12px;max-width:490px;line-height:1.5;}
  .zl-form-side {position:relative;left:auto;right:auto;top:auto;transform:none;border-left:none;
    width:min(455px,calc(100% - 48px));margin:298px auto 165px;padding:0;}
  .zl-form-panel::before {display:none;}
  .zl-topline {margin-bottom:16px;}
  .zl-greeting h2 {font-size:29px;}.zl-greeting p {margin-bottom:21px;}
  .zl-bottom-bar {bottom:55px;left:24px;right:24px;grid-template-columns:88px minmax(0,1fr) 129px;gap:12px;align-items:end;}
  .zl-current-label {font-size:8px;}.zl-current-number {font-size:23px;}
  .zl-motion-text {display:none;}.zl-motion-toggle {width:38px;padding:0;}
  .zl-progress-name {display:none;}.zl-scene-dot {padding:5px 0;min-height:40px;justify-content:flex-start;}
  .zl-progress-line {height:4px;}.zl-scene-pagination {gap:8px;}
  .zl-footnote {bottom:20px;left:24px;right:24px;font-size:9px;}
  .zl-footnote span:last-child {display:none;}
}
@media(max-width:520px) {
  .zl-stage {--zl-edge:18px;min-height:930px;}
  .zl-global-head {left:18px;right:18px;top:17px;}
  .zl-brand-mark {width:87px;height:87px;padding:0;} .zl-brand-mark img {width:100%;height:100%;}
  .zl-scene-copy {left:18px;top:110px;width:calc(100% - 36px);}
  .zl-scene-copy h1 {font-size:clamp(29px,8.0vw,39px);line-height:1.05;}
  .zl-scene-copy p {font-size:11px;max-width:350px;margin-top:9px;}
  .zl-copy-tag {font-size:8px;letter-spacing:.14em;margin-bottom:9px;}
  .zl-form-side {width:calc(100% - 36px);margin:264px auto 155px;}
  .zl-topline {margin-bottom:14px;}
  .zl-greeting h2 {font-size:27px;}.zl-greeting p {font-size:12px;margin-top:8px;margin-bottom:17px;}
  .zl-welcome-tag {font-size:9px;margin-bottom:8px;}
  .zl-field-block {margin-bottom:15px;}
  .zl-input-wrap {height:50px;}.zl-field-block>label, .zl-label-row label {font-size:10px;margin-bottom:8px;}
  .zl-captcha-art {width:155px;height:46px;max-width:58%;}
  .zl-captcha-image-row {gap:8px;}.zl-refresh {width:36px;height:40px;}
  .zl-submit {height:52px;}.zl-security-note {font-size:9px;margin-top:15px;}
  .zl-bottom-bar {left:18px;right:18px;bottom:45px;grid-template-columns:65px minmax(0,1fr) 103px;gap:8px;}
  .zl-current-label {display:none;}.zl-current-number {font-size:24px;}
  .zl-numbers {gap:4px;}.zl-scene-pagination {gap:5px;}
  .zl-player-actions {gap:3px;}.zl-skip,.zl-motion-toggle {height:32px;}.zl-skip {width:32px;}
  .zl-motion-toggle {width:32px;padding:0;}.zl-motion-text {display:none;}
  .zl-footnote {left:18px;right:18px;bottom:18px;font-size:8px;}
}
@media(max-width:350px) {
  .zl-stage {min-height:915px;}.zl-scene-copy h1 {font-size:28px;}
  .zl-form-side {margin-top:251px;}.zl-greeting h2 {font-size:24px;}
  .zl-captcha-art {width:146px;height:44px;}
  .zl-captcha-image-row {gap:6px;}.zl-security-note {font-size:8px;}
}
@media(prefers-reduced-motion: reduce) {
  *, *::before, *::after {animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .zl-scene-photo {transform:none!important;}
  .zl-scene.is-current .zl-scene-copy {opacity:1;transform:translate3d(0,-43%,0);}
  @media(max-width:850px){.zl-scene.is-current .zl-scene-copy {transform:none;}}
  .zl-scene.is-current .zl-progress-line::after {transform:scaleX(1);}
}

/* Quiet verification row: editable, legible and keyboard focusable. */
.zl-captcha-block .zl-captcha-input {height:44px;background:rgba(12,42,35,.50);border-color:rgba(205,242,226,.17);}
.zl-captcha-block .zl-captcha-input input {font-size:13px;}
.zl-captcha-block .zl-captcha-input>svg {width:16px;height:16px;}
.zl-captcha-block.zl-is-focused .zl-captcha-input,
.zl-captcha-block .zl-captcha-input:focus-within {border-color:#96eeb0;background:rgba(16,60,46,.83);}

/* Small, non-looping password icon response on focus and visibility toggle. */
.zl-password-icon { transform-origin: 50% 50%; }
.zl-password-icon .zl-lock-shackle { transition: transform .35s cubic-bezier(.18,.85,.3,1.25); }
.zl-password-field.zl-is-focused .zl-password-icon { animation: zl-lock-focus .48s ease-out 1 both; }
.zl-password-field.zl-is-focused .zl-lock-shackle { transform: translateY(-1.4px); }
@keyframes zl-lock-focus {
  0% { transform: scale(1) rotate(0deg); }
  45% { transform: scale(1.13) rotate(-8deg); }
  100% { transform: scale(1.035) rotate(0deg); }
}
.zl-toggle-password svg { transition: transform .28s cubic-bezier(.18,.85,.3,1.15), color .25s ease; }
.zl-toggle-password:hover svg { transform: scale(1.12); }
.zl-toggle-password[aria-pressed="true"] svg { transform: rotate(-7deg) scale(1.07); }

/* Compact help and native checkbox integrated into the existing form. */
.zl-captcha-image-row .zl-captcha-help {
  flex: 1; max-width: none; min-width: 60px; margin: 0;
  color: rgba(219,248,230,.84); font-size: 11px; line-height: 1.4;
}
.zl-robot-block { margin: 3px 0 15px; }
.zl-robot-label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  color: rgba(239,255,245,.92); font-size: 12px; font-weight: 550; letter-spacing: .01em;
}
.zl-robot-label input { width: 17px; height: 17px; margin: 0; flex: none;
  cursor: pointer; accent-color: #39c17d;
}
.zl-robot-block .zl-field-error { margin-top: 4px; }
.zl-robot-has-error .zl-robot-label { color: #ffd5c8; }
@media (max-width: 520px) {
  .zl-captcha-image-row .zl-captcha-help { font-size: 10px; line-height: 1.38; }
  .zl-robot-block { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .zl-password-field.zl-is-focused .zl-password-icon { animation: none !important; }
  .zl-password-icon .zl-lock-shackle, .zl-toggle-password svg { transition: none !important; }
}


/* ------------------------------------------------------------------------
   Focus and confirmation polish - scoped to the existing login inputs.
   Transitions are one-shot; the cinematic layout and scene styles are untouched.
   ------------------------------------------------------------------------ */
.zl-field-block .zl-input-wrap {
  transition: border-color .3s ease, background-color .3s ease,
    box-shadow .3s ease, transform .3s cubic-bezier(.22,.7,.22,1);
}
.zl-input-wrap > svg {
  transition: stroke .26s ease, transform .36s cubic-bezier(.2,.8,.2,1);
  transform-origin: 50% 50%;
}
.zl-field-block.zl-is-focused .zl-input-wrap > svg,
.zl-input-wrap:focus-within > svg {transform: translateY(-1px) scale(1.1);stroke:#a1ffd0;}
.zl-field-block.zl-is-focused > label,
.zl-field-block.zl-is-focused .zl-label-row label,
.zl-field-block:focus-within > label,
.zl-field-block:focus-within .zl-label-row label {
  color:#aeffca;
  transition:color .26s ease;
}
.zl-input-gleam {transform:scaleX(.12);transform-origin:center;
  transition:opacity .3s ease,transform .45s cubic-bezier(.22,.66,.24,1);}
.zl-field-block.zl-is-focused .zl-input-gleam,
.zl-input-wrap:focus-within .zl-input-gleam {opacity:.88;transform:scaleX(1);}
.zl-field-block.zl-field-filled:not(.zl-has-error) .zl-input-wrap:not(:focus-within) {
  border-color:rgba(149,247,188,.37);
}
.zl-captcha-block.zl-is-focused .zl-captcha-input > svg,
.zl-captcha-block .zl-captcha-input:focus-within > svg {transform:translateY(-1px) scale(1.08);}

/* Eye slash disappears when visible; short blink on each toggle. */
.zl-toggle-password {transition:color .25s ease,background-color .25s ease;}
.zl-toggle-password .zl-eye-slash {
  opacity:.88;transform-origin:center;
  transition:opacity .28s ease,transform .34s ease;
}
.zl-toggle-password[aria-pressed="true"] .zl-eye-slash {
  opacity:0;transform:scale(.65) rotate(-16deg);
}
.zl-toggle-password[aria-pressed="true"] {color:#a5ffbf;}
.zl-toggle-password.zl-eye-animating svg {
  animation:zl-eye-state-change .36s ease-out 1;
}
@keyframes zl-eye-state-change {
  0% {transform:scale(1) rotate(0deg);}
  42% {transform:scale(.92) rotate(6deg);}
  100% {transform:scale(1.06) rotate(0deg);}
}

/* Simple white checkbox above the optional CAPTCHA details. No card or border. */
.zl-robot-block {margin:2px 0 17px;}
.zl-robot-label {
  display:inline-flex;align-items:center;gap:11px;min-height:29px;
  width:auto;padding:0;border:none;border-radius:0;
  background:transparent;box-shadow:none;
  color:#fff;font-size:13px;font-weight:600;cursor:pointer;
}
.zl-robot-label:hover,.zl-robot-label:focus-within,
.zl-robot-has-error .zl-robot-label {border:none;background:none;box-shadow:none;color:#fff;}
.zl-robot-label input {width:18px;height:18px;min-width:18px;margin:0;accent-color:#32cf7a;cursor:pointer;}
.zl-robot-label input:focus-visible {outline:2px solid #a8ffce;outline-offset:3px;}
.zl-robot-title {flex:none;}
.zl-robot-label::after {display:none;content:none;}
.zl-robot-block .zl-field-error {margin-top:6px;}
.zl-captcha-block[hidden] {display:none!important;}
.zl-captcha-timer-label {font-size:11px;color:rgba(221,247,231,.78);}
.zl-captcha-timer-label strong {font-weight:700;color:#baffd0;font-variant-numeric:tabular-nums;}
.zl-refresh:disabled {cursor:wait;opacity:.68;}
@media(prefers-reduced-motion:reduce) {
 .zl-input-wrap,.zl-input-wrap>svg,.zl-input-gleam,.zl-toggle-password,
 .zl-toggle-password .zl-eye-slash {transition:none!important;}
 .zl-toggle-password.zl-eye-animating svg {animation:none!important;}
}