/* Stella Studio Login Experience v2.4.0
   Full-screen login + interactive CSS 3D robot assistant.
   Kept separate from index.html so it stays easy to maintain on Hostinger. */

.robot-login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  background: #f8fafc;
  overflow: hidden;
}

.login-full-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(430px, .88fr);
}

.login-visual-panel {
  --panel-ink: #eef6ff;
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 58px);
  color: var(--panel-ink);
  background:
    radial-gradient(circle at 72% 30%, rgba(80, 188, 255, .22), transparent 27%),
    radial-gradient(circle at 18% 78%, rgba(74, 222, 128, .11), transparent 28%),
    linear-gradient(145deg, #07111f 0%, #0b1a30 50%, #102a43 100%);
}

.login-grid-glow {
  position: absolute;
  inset: 0;
  z-index: -4;
  opacity: .24;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, transparent 1%, #000 20%, #000 78%, transparent 100%);
}

.login-ambient {
  position: absolute;
  z-index: -3;
  width: 38vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(76px);
  opacity: .18;
  pointer-events: none;
}

.login-ambient-one { right: -18%; top: -15%; background: #38bdf8; }
.login-ambient-two { left: -24%; bottom: -28%; background: #22c55e; }

.login-visual-top {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.login-brand-mark,
.login-mobile-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-brand-logo {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
}

.login-brand-mark strong,
.login-mobile-brand strong {
  display: block;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.01em;
}

.login-brand-mark span,
.login-mobile-brand span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  opacity: .68;
}

.login-security-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: rgba(239,246,255,.86);
  font-size: 11px;
  font-weight: 700;
  backdrop-filter: blur(10px);
}

/* === Interactive robot v2.4: clean geometry + articulated privacy arms === */
.robot-stage {
  --head-rotate-x: 0deg;
  --head-rotate-y: 0deg;
  --body-rotate-y: 0deg;
  --pupil-x: 0px;
  --pupil-y: 0px;
  position: absolute;
  z-index: 2;
  top: 50%;
  right: clamp(3%, 7vw, 12%);
  width: clamp(330px, 33vw, 490px);
  height: clamp(440px, 67vh, 630px);
  transform: translateY(-47%);
  perspective: 1200px;
  transform-style: preserve-3d;
  pointer-events: none;
}

.robot-halo {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 82%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) translateZ(-110px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.24), rgba(14,165,233,.08) 44%, transparent 72%);
  filter: blur(2px);
}

.robot-orbit {
  position: absolute;
  left: 50%;
  top: 43%;
  border: 1px solid rgba(125,211,252,.13);
  border-radius: 50%;
  transform-style: preserve-3d;
}
.robot-orbit-one {
  width: 78%;
  aspect-ratio: 1;
  transform: translate(-50%,-50%) rotateX(66deg) rotateZ(-9deg) translateZ(-45px);
  animation: robotOrbit 14s linear infinite;
}
.robot-orbit-two {
  width: 61%;
  aspect-ratio: 1;
  transform: translate(-50%,-50%) rotateX(70deg) rotateZ(31deg) translateZ(-20px);
  border-color: rgba(45,212,191,.10);
  animation: robotOrbitReverse 18s linear infinite;
}

.robot-floor-shadow {
  position: absolute;
  left: 50%;
  bottom: 3%;
  width: 66%;
  height: 8%;
  transform: translateX(-50%) rotateX(68deg) translateZ(-80px);
  border-radius: 50%;
  background: rgba(0,0,0,.40);
  filter: blur(17px);
}

.robot-character {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 286px;
  height: 486px;
  transform: translateX(-50%) rotateY(var(--body-rotate-y));
  transform-origin: 50% 86%;
  transform-style: preserve-3d;
  filter: drop-shadow(0 28px 30px rgba(0,0,0,.26));
  animation: robotFloat 5.5s ease-in-out infinite;
}

.robot-antenna {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 0;
  width: 44px;
  height: 58px;
  transform: translateX(-50%) translateZ(16px);
}
.robot-antenna-stem {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 7px;
  height: 38px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg,#64748b,#d7e3ed 50%,#475569);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.robot-antenna-light {
  position: absolute;
  left: 50%;
  top: 0;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  border: 3px solid #a5f3fc;
  border-radius: 50%;
  background: #06b6d4;
  box-shadow: 0 0 0 5px rgba(34,211,238,.10), 0 0 24px rgba(34,211,238,.78);
  animation: robotBeacon 2.3s ease-in-out infinite;
}

.robot-head-space {
  position: absolute;
  z-index: 17;
  left: 50%;
  top: 44px;
  width: 184px;
  height: 170px;
  transform: translateX(-50%);
  transform-style: preserve-3d;
}

.robot-head {
  position: absolute;
  inset: 0;
  transform: rotateX(var(--head-rotate-x)) rotateY(var(--head-rotate-y));
  transform-origin: 50% 78%;
  transform-style: preserve-3d;
  transition: transform .09s linear;
}

.robot-head-shell {
  position: absolute;
  z-index: 3;
  inset: 13px 10px 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 40px 40px 50px 50px / 35px 35px 42px 42px;
  background:
    linear-gradient(112deg, rgba(255,255,255,.60), transparent 22% 72%, rgba(15,23,42,.18)),
    linear-gradient(145deg,#d8e4ee 0%,#8da2b4 47%,#526679 100%);
  box-shadow:
    inset 0 6px 12px rgba(255,255,255,.32),
    inset 0 -12px 22px rgba(15,23,42,.23),
    0 18px 25px rgba(0,0,0,.23);
  transform: translateZ(26px);
}
.robot-head-shell::before {
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:35px 35px 45px 45px;
  pointer-events:none;
}
.robot-head-highlight {
  position:absolute;
  left:22px;
  top:11px;
  width:72px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.56),rgba(255,255,255,0));
  transform:rotate(-4deg);
}

.robot-ear {
  position:absolute;
  z-index:1;
  top:62px;
  width:29px;
  height:53px;
  border:1px solid rgba(255,255,255,.20);
  background:linear-gradient(90deg,#43566a,#a8bac8 50%,#38495b);
  box-shadow:0 6px 12px rgba(0,0,0,.18), inset 0 2px 5px rgba(255,255,255,.18);
}
.robot-ear-left { left:-6px; border-radius:16px 7px 7px 16px; transform:translateZ(9px); }
.robot-ear-right { right:-6px; border-radius:7px 16px 16px 7px; transform:translateZ(9px); }
.robot-ear span {
  position:absolute;
  inset:12px 7px;
  border-radius:8px;
  background:#0f2133;
  box-shadow:inset 0 0 0 2px rgba(34,211,238,.32), 0 0 10px rgba(34,211,238,.15);
}

.robot-visor {
  position:absolute;
  z-index:6;
  left:50%;
  top:45px;
  width:126px;
  height:58px;
  overflow:hidden;
  transform:translateX(-50%) translateZ(13px);
  border:2px solid rgba(103,232,249,.34);
  border-radius:20px 20px 24px 24px;
  background:
    radial-gradient(circle at 50% 70%, rgba(34,211,238,.10), transparent 44%),
    linear-gradient(180deg,#06131f,#081f31 62%,#071521);
  box-shadow:inset 0 0 18px rgba(34,211,238,.10), 0 0 18px rgba(34,211,238,.16);
  transition:box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}
.robot-visor::before {
  content:"";
  position:absolute;
  left:9px;
  right:9px;
  top:8px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(165,243,252,.44),transparent);
}
.robot-visor-scan {
  position:absolute;
  left:8px;
  right:8px;
  top:11px;
  height:2px;
  border-radius:999px;
  background:rgba(103,232,249,.47);
  box-shadow:0 0 8px rgba(34,211,238,.58);
  animation:robotScan 3.6s ease-in-out infinite;
}

.robot-eye {
  position:absolute;
  z-index:3;
  top:20px;
  width:34px;
  height:16px;
  overflow:hidden;
  border-radius:10px;
  background:linear-gradient(180deg,#8af8ff,#22d3ee);
  box-shadow:0 0 8px rgba(34,211,238,.92),0 0 19px rgba(34,211,238,.50);
  transform-origin:center;
  animation:robotBlink 7s infinite;
  transition:transform .18s ease, opacity .18s ease, background .18s ease, box-shadow .18s ease;
}
.robot-eye-left { left:19px; }
.robot-eye-right { right:19px; }
.robot-pupil {
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:10px;
  transform:translate(calc(-50% + var(--pupil-x)),calc(-50% + var(--pupil-y)));
  border-radius:50%;
  background:#e8feff;
  box-shadow:0 0 6px #fff,0 0 11px rgba(255,255,255,.62);
  transition:transform .07s linear, opacity .16s ease;
}

.robot-mouth {
  position:absolute;
  z-index:4;
  left:50%;
  top:118px;
  display:flex;
  gap:4px;
  transform:translateX(-50%);
}
.robot-mouth span {
  width:6px;
  height:3px;
  border-radius:999px;
  background:#67e8f9;
  box-shadow:0 0 6px rgba(34,211,238,.66);
  opacity:.72;
}
.robot-mouth span:nth-child(2),.robot-mouth span:nth-child(4){opacity:.45}

.robot-neck {
  position:absolute;
  z-index:8;
  left:50%;
  top:198px;
  width:68px;
  height:54px;
  transform:translateX(-50%) translateZ(4px);
  border-radius:14px;
  background:linear-gradient(90deg,#3e5267,#9fb2c1 48%,#384b5d);
  box-shadow:inset 0 5px 8px rgba(255,255,255,.13),0 7px 12px rgba(0,0,0,.15);
}
.robot-neck span {
  position:absolute;
  left:10px;
  right:10px;
  height:4px;
  border-radius:999px;
  background:#1b2b3d;
  box-shadow:0 1px 0 rgba(255,255,255,.14);
}
.robot-neck span:nth-child(1){top:11px}.robot-neck span:nth-child(2){top:24px}.robot-neck span:nth-child(3){top:37px}

.robot-torso {
  position:absolute;
  z-index:7;
  left:50%;
  top:235px;
  width:236px;
  height:235px;
  transform:translateX(-50%) translateZ(0);
  border:1px solid rgba(255,255,255,.16);
  border-radius:58px 58px 32px 32px / 38px 38px 24px 24px;
  background:
    linear-gradient(105deg,rgba(255,255,255,.30),transparent 22% 75%,rgba(15,23,42,.20)),
    linear-gradient(160deg,#aebfcd,#5f7488 54%,#34475b);
  box-shadow:inset 0 8px 12px rgba(255,255,255,.15),inset 0 -18px 24px rgba(15,23,42,.20),0 21px 24px rgba(0,0,0,.22);
  transform-style:preserve-3d;
}
.robot-torso::after {
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  height:28px;
  border-radius:9px;
  background:repeating-linear-gradient(90deg,#26394c 0 8px,#52677a 8px 12px);
  opacity:.62;
}

.robot-shoulder {
  position:absolute;
  z-index:-1;
  top:25px;
  width:64px;
  height:76px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(135deg,#a5b7c6,#455a6d 68%);
  box-shadow:0 8px 12px rgba(0,0,0,.17);
}
.robot-shoulder-left { left:-34px; border-radius:30px 10px 18px 32px; transform:rotate(8deg); }
.robot-shoulder-right { right:-34px; border-radius:10px 30px 32px 18px; transform:rotate(-8deg); }

.robot-chest-panel {
  position:absolute;
  left:50%;
  top:31px;
  width:142px;
  height:136px;
  transform:translateX(-50%) translateZ(15px);
  border:1px solid rgba(103,232,249,.22);
  border-radius:26px;
  background:linear-gradient(155deg,#15283a,#0a1725 68%,#0d2233);
  box-shadow:inset 0 0 22px rgba(34,211,238,.055),0 7px 13px rgba(0,0,0,.15);
}
.robot-core {
  position:absolute;
  left:50%;
  top:28px;
  width:42px;
  height:42px;
  transform:translateX(-50%);
  border:8px solid #1b4155;
  border-radius:50%;
  background:#67e8f9;
  box-shadow:0 0 0 4px rgba(34,211,238,.13),inset 0 0 10px #fff,0 0 24px rgba(34,211,238,.48);
  animation:robotCore 2.5s ease-in-out infinite;
}
.robot-core-ring {
  position:absolute;
  left:50%;
  top:20px;
  width:58px;
  height:58px;
  transform:translateX(-50%);
  border:1px dashed rgba(125,211,252,.38);
  border-radius:50%;
  animation:robotRing 8s linear infinite;
}
.robot-chest-line {position:absolute;left:21px;right:21px;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,#31536a,transparent)}
.robot-chest-line-one{top:86px}.robot-chest-line-two{top:99px}
.robot-status-light {position:absolute;bottom:17px;width:7px;height:7px;border-radius:50%;box-shadow:0 0 8px currentColor}
.robot-status-one{left:48px;background:#22c55e;color:#22c55e}.robot-status-two{left:67px;background:#38bdf8;color:#38bdf8}.robot-status-three{left:86px;background:#fbbf24;color:#fbbf24}

.robot-rest-arm {
  position:absolute;
  z-index:5;
  top:275px;
  width:58px;
  height:182px;
  transition:opacity .22s ease;
}
.robot-rest-arm-left { left:1px; transform:rotate(7deg) translateZ(-8px); }
.robot-rest-arm-right { right:1px; transform:rotate(-7deg) translateZ(-8px); }
.robot-rest-upper,.robot-rest-lower {
  position:absolute;
  left:10px;
  width:38px;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(90deg,#34485b,#91a5b5 47%,#33475a);
  box-shadow:inset 3px 2px 5px rgba(255,255,255,.10);
}
.robot-rest-upper { top:0;height:78px;border-radius:23px 23px 16px 16px; }
.robot-rest-joint {position:absolute;z-index:2;left:11px;top:67px;width:36px;height:36px;border:7px solid #4b6073;border-radius:50%;background:#102437;box-shadow:inset 0 0 0 3px rgba(103,232,249,.20)}
.robot-rest-lower {top:92px;height:82px;border-radius:16px 16px 23px 23px}

/* Articulated privacy arms stay hidden at rest and fold over the visor on password focus. */
.robot-privacy-arm {
  position:absolute;
  z-index:6;
  top:244px;
  width:65px;
  height:220px;
  transform-origin:50% 18px;
  opacity:.01;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.18,.82,.24,1.05),opacity .18s ease,z-index 0s linear .22s;
}
.robot-privacy-arm-left { left:14px; transform:rotate(5deg) translateZ(5px); }
.robot-privacy-arm-right { right:14px; transform:rotate(-5deg) translateZ(5px); }

.robot-upper-arm {
  position:absolute;
  left:12px;
  top:0;
  width:41px;
  height:88px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px 24px 17px 17px;
  background:linear-gradient(90deg,#31465a,#9aabba 48%,#304458);
  box-shadow:inset 3px 2px 6px rgba(255,255,255,.12),0 7px 12px rgba(0,0,0,.13);
}
.robot-elbow {
  position:absolute;
  z-index:4;
  left:12px;
  top:75px;
  width:41px;
  height:41px;
  border:8px solid #53697c;
  border-radius:50%;
  background:#0b1d2e;
  box-shadow:inset 0 0 0 3px rgba(34,211,238,.22),0 4px 8px rgba(0,0,0,.18);
}
.robot-forearm {
  position:absolute;
  left:14px;
  top:104px;
  width:37px;
  height:82px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:17px 17px 23px 23px;
  background:linear-gradient(90deg,#2d4358,#8fa4b6 48%,#2b4054);
  box-shadow:inset 3px 2px 5px rgba(255,255,255,.10);
}
.robot-wrist {
  position:absolute;
  z-index:5;
  left:16px;
  top:178px;
  width:33px;
  height:18px;
  border-radius:8px;
  background:#162c3f;
  box-shadow:inset 0 0 0 2px rgba(34,211,238,.14);
}
.robot-hand {
  position:absolute;
  z-index:7;
  left:2px;
  top:188px;
  width:61px;
  height:38px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:19px 19px 15px 15px;
  background:linear-gradient(105deg,#8ea3b4,#d4e0e9 48%,#70879a);
  box-shadow:inset -5px -4px 8px rgba(15,23,42,.15),0 6px 11px rgba(0,0,0,.16);
}
.robot-hand::before {
  content:"";
  position:absolute;
  inset:7px 8px;
  border-radius:10px;
  background:#21374a;
  box-shadow:inset 0 0 0 1px rgba(103,232,249,.22);
}
.robot-hand i {
  position:absolute;
  z-index:2;
  top:12px;
  width:6px;
  height:14px;
  border-radius:999px;
  background:#75e8f4;
  box-shadow:0 0 6px rgba(34,211,238,.55);
}
.robot-hand i:nth-child(1){left:17px}.robot-hand i:nth-child(2){left:28px}.robot-hand i:nth-child(3){left:39px}

.robot-message {
  position:absolute;
  z-index:22;
  right:1%;
  top:17%;
  display:flex;
  align-items:center;
  gap:9px;
  max-width:205px;
  padding:10px 13px;
  border:1px solid rgba(103,232,249,.16);
  border-radius:14px 14px 14px 4px;
  background:rgba(7,19,33,.76);
  box-shadow:0 14px 30px rgba(0,0,0,.17);
  color:rgba(239,246,255,.92);
  font-size:11px;
  font-weight:700;
  line-height:1.45;
  backdrop-filter:blur(12px);
}
.robot-message-icon {
  width:25px;
  height:25px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(34,211,238,.11);
  color:#67e8f9;
  box-shadow:inset 0 0 0 1px rgba(103,232,249,.13);
}

.robot-stage.is-password-focused .robot-visor {
  border-color:rgba(56,189,248,.18);
  box-shadow:inset 0 0 12px rgba(15,23,42,.45),0 0 10px rgba(34,211,238,.08);
  filter:saturate(.55) brightness(.70);
}
.robot-stage.is-password-focused .robot-eye {
  animation:none;
  transform:scaleY(.10);
  background:#38bdf8;
  box-shadow:0 0 5px rgba(56,189,248,.46);
}
.robot-stage.is-password-focused .robot-pupil { opacity:0; }
.robot-stage.is-password-focused .robot-visor-scan { opacity:.16; }
.robot-stage.is-password-focused .robot-rest-arm { opacity:.10; }
.robot-stage.is-password-focused .robot-privacy-arm {
  z-index:25;
  opacity:1;
  transition-delay:0s;
}
/* Left hand covers left half of visor, right hand covers right half. */
.robot-stage.is-password-focused .robot-privacy-arm-left {
  transform:translateY(45px) rotate(-162deg) translateZ(96px);
}
.robot-stage.is-password-focused .robot-privacy-arm-right {
  transform:translateY(45px) rotate(162deg) translateZ(96px);
}
.robot-stage.is-password-focused .robot-privacy-arm-left .robot-hand { transform:rotate(162deg); }
.robot-stage.is-password-focused .robot-privacy-arm-right .robot-hand { transform:rotate(-162deg); }
.robot-stage.is-password-focused .robot-antenna-light {
  background:#f59e0b;
  border-color:#fde68a;
  box-shadow:0 0 0 5px rgba(245,158,11,.10),0 0 24px rgba(245,158,11,.65);
}

.login-visual-copy {
  position: relative;
  z-index: 4;
  width: min(480px, 58%);
  margin-top: auto;
  padding-bottom: clamp(4px, 2.2vh, 24px);
}
.login-visual-eyebrow { margin:0 0 12px; color:#7dd3fc; font-size:10px; font-weight:800; letter-spacing:.22em; }
.login-visual-copy h1 { margin:0; max-width:450px; color:#fff; font-size:clamp(30px,3.4vw,54px); line-height:1.03; letter-spacing:-.04em; font-weight:800; }
.login-visual-copy > p:not(.login-visual-eyebrow) { margin:16px 0 0; max-width:440px; color:rgba(226,232,240,.7); font-size:13px; line-height:1.7; }
.login-feature-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.login-feature-row span { display:inline-flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid rgba(255,255,255,.09); border-radius:10px; background:rgba(255,255,255,.055); color:rgba(239,246,255,.82); font-size:10px; font-weight:700; }
.login-feature-row i { color:#7dd3fc; }

/* === Auth panel === */
.login-auth-panel {
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 94% 5%, rgba(37,99,235,.07), transparent 24%),
    #f8fafc;
}

.login-auth-inner {
  width: min(100%, 500px);
  margin: auto;
  padding: clamp(36px, 6vh, 70px) clamp(26px, 5vw, 66px);
}

.login-mobile-brand { display:none; color:#0f172a; margin-bottom:32px; }
.login-mobile-logo { width:44px; height:44px; border-radius:12px; }
.login-mobile-brand span { color:#64748b; opacity:1; }

.login-auth-heading { margin-bottom:22px; }
.login-auth-eyebrow { margin:0 0 8px; color:#2563eb; font-size:10px; font-weight:900; letter-spacing:.22em; }
.login-auth-heading h2 { margin:0; color:#0f172a; font-size:clamp(29px,3vw,38px); line-height:1.05; letter-spacing:-.035em; font-weight:800; }
.login-auth-heading > p:last-child { margin:11px 0 0; color:#64748b; font-size:13px; line-height:1.65; }

.login-auth-switch { margin-bottom:22px; border-radius:15px; background:#eef2f7; border-color:#e2e8f0; }
.login-auth-switch .auth-mode-button { min-height:44px; }
.login-auth-switch .auth-mode-button.active { border-color:rgba(37,99,235,.12); box-shadow:0 5px 14px rgba(15,23,42,.06); }

.login-auth-form { display:flex; flex-direction:column; gap:17px; }
.login-auth-form.hidden, .login-auth-form[hidden] { display:none !important; }
.login-register-form { gap:13px; }
.login-field-group label { display:block; margin-bottom:7px; color:#334155; font-size:12px; font-weight:750; }
.login-field { position:relative; }
.login-field-icon { position:absolute; z-index:2; left:15px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:14px; pointer-events:none; transition:color .18s ease; }
.login-field input {
  width:100%;
  height:49px;
  border:1px solid #dbe2ea;
  border-radius:13px;
  padding:0 44px 0 43px;
  outline:none;
  background:rgba(255,255,255,.92);
  color:#0f172a;
  font-size:13px;
  box-shadow:0 1px 2px rgba(15,23,42,.02);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.login-field input::placeholder { color:#a8b3c1; }
.login-field input:focus { border-color:#3b82f6; background:#fff; box-shadow:0 0 0 4px rgba(59,130,246,.10), 0 8px 18px rgba(15,23,42,.04); }
.login-field:focus-within .login-field-icon { color:#2563eb; }
.login-password-toggle { position:absolute; z-index:3; right:8px; top:50%; width:34px; height:34px; display:grid; place-items:center; transform:translateY(-50%); border:0; border-radius:9px; background:transparent; color:#94a3b8; cursor:pointer; transition:.18s ease; }
.login-password-toggle:hover { background:#f1f5f9; color:#475569; }

.login-primary-button {
  min-height:49px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:0;
  border-radius:13px;
  padding:0 18px;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 13px 28px rgba(37,99,235,.20);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.login-primary-button:hover { transform:translateY(-1px); box-shadow:0 16px 30px rgba(37,99,235,.26); filter:saturate(1.06); }
.login-primary-button:active { transform:translateY(0); }
.login-primary-button:disabled { cursor:not-allowed; opacity:.62; transform:none; }
.login-register-button { background:linear-gradient(135deg,#059669,#047857); box-shadow:0 13px 28px rgba(5,150,105,.18); }
.login-register-button:hover { box-shadow:0 16px 30px rgba(5,150,105,.24); }

.login-register-password-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.login-auth-error { border:1px solid #fecaca; border-radius:11px; padding:10px 12px; background:#fff1f2; color:#b91c1c; font-size:12px; line-height:1.5; }
.login-tenant-note { margin:0; display:flex; gap:7px; align-items:flex-start; color:#64748b; font-size:10px; line-height:1.55; }
.login-tenant-note i { margin-top:2px; color:#059669; }

.login-auth-footer { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:25px; color:#94a3b8; font-size:10px; font-weight:650; }
.login-auth-footer i { color:#64748b; }

@keyframes robotFloat {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

@keyframes robotBlink {
  0%, 45%, 48%, 100% { transform: scaleY(1); }
  46%, 47% { transform: scaleY(.08); }
}


@keyframes robotBeacon {
  0%,100% { transform:translateX(-50%) scale(1); filter:brightness(1); }
  50% { transform:translateX(-50%) scale(.86); filter:brightness(1.25); }
}
@keyframes robotScan {
  0%,100% { transform:translateY(0); opacity:.22; }
  50% { transform:translateY(30px); opacity:.72; }
}
@keyframes robotCore {
  0%,100% { transform:translateX(-50%) scale(1); filter:brightness(1); }
  50% { transform:translateX(-50%) scale(.92); filter:brightness(1.20); }
}
@keyframes robotRing { to { transform:translateX(-50%) rotate(360deg); } }
@keyframes robotOrbit { to { transform:translate(-50%,-50%) rotateX(66deg) rotateZ(351deg) translateZ(-45px); } }
@keyframes robotOrbitReverse { to { transform:translate(-50%,-50%) rotateX(70deg) rotateZ(-329deg) translateZ(-20px); } }

@media (max-width: 1180px) {
  .login-full-shell { grid-template-columns:minmax(0,1fr) minmax(410px,.9fr); }
  .robot-stage { right:2%; width:390px; }
  .login-visual-copy { width:58%; }
  .login-visual-copy h1 { font-size:38px; }
}

@media (max-width: 960px) {
  .login-full-shell { grid-template-columns: minmax(0, .9fr) minmax(400px, 1.1fr); }
  .login-visual-panel { padding:30px; }
  .login-security-badge, .login-feature-row { display:none; }
  .login-visual-copy { width:100%; padding-bottom:0; }
  .login-visual-copy h1 { max-width:330px; font-size:33px; }
  .login-visual-copy > p:not(.login-visual-eyebrow) { display:none; }
  .robot-stage { top:47%; right:-13%; transform:translateY(-52%) scale(.84); }
}

@media (max-width: 760px) {
  .robot-login-screen { overflow:auto; background:#f8fafc; }
  .login-full-shell { min-height:100dvh; grid-template-columns:1fr; grid-template-rows:210px auto; }
  .login-visual-panel { min-height:210px; height:210px; padding:20px 20px 16px; }
  .login-grid-glow { background-size:32px 32px; opacity:.15; }
  .login-visual-top { align-items:flex-start; }
  .login-brand-mark { display:none; }
  .login-security-badge { display:inline-flex; margin-left:auto; padding:7px 9px; font-size:9px; }
  .login-visual-copy { position:absolute; z-index:7; left:20px; bottom:20px; width:47%; }
  .login-visual-eyebrow { margin-bottom:6px; font-size:8px; }
  .login-visual-copy h1 { font-size:22px; line-height:1.08; }
  .robot-stage { top:auto; right:-12px; bottom:-114px; width:260px; height:355px; transform:scale(.72); transform-origin:bottom right; }
  .robot-message { display:none; }
  .login-auth-panel { min-height:calc(100dvh - 210px); overflow:visible; border-radius:22px 22px 0 0; margin-top:-1px; position:relative; z-index:8; }
  .login-auth-inner { width:100%; max-width:540px; padding:28px 20px max(34px,env(safe-area-inset-bottom)); }
  .login-mobile-brand { display:flex; margin-bottom:25px; }
  .login-auth-heading { margin-bottom:19px; }
  .login-auth-heading h2 { font-size:30px; }
  .login-auth-switch { position:relative; top:auto; z-index:2; }
}

@media (max-width: 520px) {
  .login-full-shell { grid-template-rows:188px auto; }
  .login-visual-panel { min-height:188px; height:188px; }
  .login-security-badge { display:none; }
  .login-visual-copy { bottom:18px; width:52%; }
  .login-visual-copy h1 { font-size:20px; }
  .robot-stage { right:-26px; bottom:-126px; transform:scale(.65); }
  .login-auth-panel { min-height:calc(100dvh - 188px); }
  .login-register-password-grid { grid-template-columns:1fr; gap:13px; }
  .login-auth-inner { padding-left:17px; padding-right:17px; }
  .login-auth-footer { font-size:9px; }
}

@media (max-width: 370px) {
  .login-visual-copy h1 { font-size:18px; }
  .robot-stage { right:-46px; transform:scale(.61); }
  .login-auth-inner { padding-left:14px; padding-right:14px; }
}

@media (prefers-reduced-motion: reduce) {
  .robot-character, .robot-eye { animation:none; }
  .robot-head, .robot-character, .robot-pupil { transition:none; }
  .login-primary-button { transition:none; }
}

/* Login mengikuti mode gelap aplikasi tanpa mengubah komponen dashboard. */
html[data-app-mode="dark"] .login-auth-panel {
  background: radial-gradient(circle at 94% 5%, rgba(59,130,246,.12), transparent 24%), #09111f;
}
html[data-app-mode="dark"] .login-mobile-brand,
html[data-app-mode="dark"] .login-auth-heading h2 { color:#f8fafc; }
html[data-app-mode="dark"] .login-mobile-brand span,
html[data-app-mode="dark"] .login-auth-heading > p:last-child,
html[data-app-mode="dark"] .login-tenant-note,
html[data-app-mode="dark"] .login-auth-footer { color:#94a3b8; }
html[data-app-mode="dark"] .login-field-group label { color:#cbd5e1; }
html[data-app-mode="dark"] .login-field input:not([type="color"]) {
  background:#0f172a !important;
  border-color:#334155 !important;
  color:#f8fafc !important;
}
html[data-app-mode="dark"] .login-field input:not([type="color"]):focus {
  background:#111c2e !important;
  border-color:#3b82f6 !important;
  box-shadow:0 0 0 4px rgba(59,130,246,.12), 0 8px 20px rgba(0,0,0,.16);
}
html[data-app-mode="dark"] .login-password-toggle:hover { background:#1e293b; color:#cbd5e1; }
html[data-app-mode="dark"] .login-auth-switch { background:#0f172a; border-color:#243249; }
html[data-app-mode="dark"] .login-auth-switch .auth-mode-button.active { background:#172033; border-color:#334155; color:#60a5fa; }
html[data-app-mode="dark"] .login-auth-error { background:rgba(127,29,29,.24); border-color:#7f1d1d; color:#fecaca; }