/* Zetka Admin login — SaaSAble-aligned authentication screen. */
:root {
  --primary: #626ee8;
  --primary-strong: #5965df;
  --primary-soft: #eff0ff;
  --lavender: #f7f5ff;
  --text: #2f313a;
  --muted: #767985;
  --faint: #a6a9b3;
  --line: #e8e8ef;
  --line-strong: #e1e2ea;
  --danger: #d95e66;
  --success: #47ae68;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; min-width: 0; min-height: 100%; margin: 0; }
body {
  overflow-x: hidden;
  background: #fff;
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input { font: inherit; }
button { cursor: pointer; }

.page {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(570px, 1.16fr) minmax(470px, .84fr);
  background: #fff;
}

.left {
  position: relative;
  min-width: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 56px 88px;
  background: #fff;
}
.login { width: min(455px, 100%); }
h1 {
  margin: 0;
  color: #25272e;
  font-size: 38px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -1.1px;
  text-align: center;
}
.subtitle {
  margin: 11px 0 54px;
  color: #60636d;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: center;
}
.notice {
  min-height: 58px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 16px;
  padding: 13px 15px;
  border: 0;
  border-radius: 6px;
  background: #f1fbfd;
  color: #54717a;
  font-size: 11.5px;
  line-height: 1.42;
}
.notice b { flex: 0 0 auto; color: #1691a3; font-size: 16px; line-height: 1.2; }

.role-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 21px 0 18px;
}
.role {
  height: 39px;
  padding: 0 12px;
  border: 1px solid #e5e5ed;
  border-radius: 7px;
  background: #fff;
  color: #3d4049;
  font-size: 11.5px;
  font-weight: 500;
  box-shadow: none;
}
.role.active {
  border-color: #cfd3ff;
  color: var(--primary);
  box-shadow: inset 0 0 0 1px #f1f2ff;
}

.field { margin-bottom: 14px; }
.field label {
  display: block;
  margin-bottom: 7px;
  color: #444750;
  font-size: 11.5px;
  font-weight: 500;
}
.input-wrap { position: relative; }
.input-wrap input {
  width: 100%;
  height: 43px;
  padding: 0 42px 0 12px;
  border: 1px solid #e4e5ec;
  border-radius: 7px;
  background: #fff;
  color: #3b3e47;
  outline: 0;
  box-shadow: none;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.input-wrap input::placeholder { color: #b0b2ba; }
.input-wrap input:focus {
  border-color: #c8ccfb;
  box-shadow: 0 0 0 3px rgba(98, 110, 232, .08);
}
.eye {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #8b8e98;
  font-size: 15px;
}
.eye:hover { background: #f7f7fb; color: var(--primary); }
.field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -3px 0 23px;
  font-size: 10.5px;
}
.remember { display: inline-flex; align-items: center; gap: 7px; color: #777a84; }
.remember input { width: 14px; height: 14px; accent-color: var(--primary); }
.help { padding: 0; border: 0; background: none; color: var(--primary); font-size: 10.5px; }
.help:hover { color: var(--primary-strong); }
.submit {
  width: 112px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--primary);
  border-radius: 7px;
  background: var(--primary);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  box-shadow: none;
}
.submit:hover { border-color: var(--primary-strong); background: var(--primary-strong); }
.submit:disabled { opacity: .6; cursor: wait; }
.error {
  display: block;
  min-height: 18px;
  margin-top: 10px;
  color: var(--danger);
  font-size: 10.5px;
}
.success { display: none; padding: 42px 0; text-align: center; }
.success-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #e9f8ed;
  color: var(--success);
  font-size: 25px;
}
.success h2 { margin: 0 0 8px; color: #2f3139; font-size: 27px; font-weight: 600; }
.success p { margin: 0; color: var(--muted); }
.footer {
  position: absolute;
  right: 0;
  bottom: 22px;
  left: 0;
  color: #868994;
  font-size: 10px;
  text-align: center;
}
.footer span + span::before { content: "|"; margin: 0 11px; color: #dadbe2; }

.right {
  position: relative;
  min-width: 0;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 67px 34px 0;
  background: #f7f5ff;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-size: 27px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.65px;
}
.mark { width: 28px; height: 28px; }
.brand-copy {
  max-width: 500px;
  margin: 13px 0 62px;
  color: #7e818b;
  font-size: 11.5px;
  line-height: 1.45;
  text-align: center;
}
.mock {
  width: min(620px, 116%);
  height: 590px;
  overflow: hidden;
  border: 1px solid #e4e3ee;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: #fff;
  box-shadow: 0 28px 75px rgba(62, 55, 107, .09);
  transform: translateX(8%);
}
.mock-top {
  height: 47px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid #eeeeF3;
  background: #fff;
}
.mock-dot { width: 6px; height: 6px; border-radius: 50%; background: #e2e1ec; }
.mock-body { height: calc(100% - 47px); display: grid; grid-template-columns: 118px minmax(0, 1fr); }
.mock-side { padding: 14px 9px; border-right: 1px solid #efeff4; background: #fff; }
.mini-logo { margin-bottom: 17px; color: var(--primary); font-size: 8.5px; font-weight: 700; }
.mini-nav { height: 22px; margin: 4px 0; border-radius: 4px; background: #f8f8fb; }
.mini-nav.active { background: #e2e3ff; }
.mock-content { min-width: 0; padding: 25px 22px; }
.mini-tabs { width: 54%; height: 22px; margin-bottom: 22px; border-bottom: 2px solid #33353d; }
.mini-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #ececf2;
  border-radius: 8px;
}
.mini-metric { height: 86px; padding: 12px; border-right: 1px solid #efeff3; }
.mini-metric:last-child { border-right: 0; }
.mini-metric::before { content: ""; display: block; width: 43px; height: 5px; border-radius: 4px; background: #ececf4; }
.mini-metric::after { content: ""; display: block; width: 61px; height: 11px; margin-top: 21px; border-radius: 4px; background: #dfe1ff; }
.mini-chart {
  position: relative;
  height: 208px;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #ececf2;
  border-radius: 8px;
  background: repeating-linear-gradient(to bottom, #fff 0, #fff 40px, #f2f2f6 41px);
}
.mini-chart svg { position: absolute; inset: 19px 17px; width: calc(100% - 34px); height: calc(100% - 38px); }

@media (max-width: 980px) {
  .page { grid-template-columns: 1fr; }
  .right { display: none; }
  .left { min-height: 100vh; padding: 42px 24px 88px; }
  .subtitle { margin-bottom: 38px; }
}
@media (max-width: 520px) {
  .left { align-items: flex-start; padding-top: 64px; }
  h1 { font-size: 34px; }
  .role-row { grid-template-columns: 1fr; }
  .role:not(.active) { display: none; }
  .submit { width: 100%; }
  .footer { position: static; margin-top: 44px; }
}

/* v7 — one universal sign-in form */
.role-row{display:none!important}
.login{width:min(470px,100%)}
.subtitle{margin-bottom:38px}
.notice{margin:0 0 22px;padding:12px 14px;border:1px solid #e2f2f5;background:#f5fbfc}
#loginForm{padding-top:2px}
.submit{width:100%;height:42px}
.error{text-align:left}
@media(max-width:520px){.submit{width:100%}}

/* v8 — product information panel + final authentication polish */
.page{grid-template-columns:minmax(560px,1.05fr) minmax(520px,.95fr)}
.left{padding:56px 64px 88px}
.login{width:min(455px,100%)}
.subtitle{max-width:420px;margin:10px auto 34px;color:#70737d}
.notice{margin-bottom:20px;border-color:#e5f1f4;background:#f7fbfc;color:#63777e}
.notice b{color:#3f9aa8}
.input-wrap input{height:45px;border-radius:8px}
.submit{height:43px;border-radius:8px;font-weight:600}
.right{align-items:stretch;justify-content:center;padding:48px 54px;background:linear-gradient(180deg,#f8f7ff 0%,#f4f3ff 100%)}
.productIntro{width:min(590px,100%);margin:0 auto}
.productIntro .brand{justify-content:flex-start;font-size:25px}
.productIntro>h2{max-width:520px;margin:28px 0 10px;color:#292c35;font-size:31px;line-height:1.16;font-weight:650;letter-spacing:-.65px;text-align:left}
.productIntro .brand-copy{max-width:540px;margin:0 0 30px;color:#777b87;font-size:12.5px;line-height:1.6;text-align:left}
.featureGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.featureCard{min-height:118px;display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid #e5e5ef;border-radius:12px;background:rgba(255,255,255,.82);box-shadow:0 8px 24px rgba(65,61,106,.035)}
.featureIcon{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;border:1px solid #e1e3fb;border-radius:9px;background:#f0f1ff;color:var(--primary)}
.featureIcon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.featureCard strong{display:block;margin:1px 0 5px;color:#393c46;font-size:11.5px;font-weight:650}
.featureCard small{display:block;color:#878a95;font-size:10px;line-height:1.48}
.roleInfo{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-top:14px;padding:16px;border:1px solid #e5e5ef;border-radius:12px;background:#fff}
.roleInfoLabel{display:block;margin-bottom:4px;color:#9295a0;font-size:9.5px;font-weight:550}
.roleInfo strong{display:block;max-width:290px;color:#444751;font-size:11px;line-height:1.45;font-weight:600}
.rolePills{display:flex;justify-content:flex-end;gap:5px;flex-wrap:wrap}
.rolePills span{padding:5px 8px;border:1px solid #e1e3fb;border-radius:999px;background:#f4f5ff;color:#626bd5;font-size:8.5px;font-weight:600;white-space:nowrap}
.productFoot{display:flex;align-items:center;gap:7px;margin-top:18px;color:#9295a0;font-size:9.5px}
.statusDot{width:7px;height:7px;border-radius:50%;background:#67ba7b;box-shadow:0 0 0 3px rgba(103,186,123,.12)}
.productFootSep{color:#c7c9d1}
@media(max-width:1180px){.right{padding:44px 34px}.featureGrid{grid-template-columns:1fr}.featureCard{min-height:88px}.roleInfo{flex-direction:column}.rolePills{justify-content:flex-start}}
@media(max-width:980px){.page{grid-template-columns:1fr}.right{display:none}.left{padding:42px 24px 88px}}

/* v16 — authentication typography and iconography aligned with the product UI */
:root{--font-ui:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--radius-control:8px;--radius-card:12px;--weight-medium:500;--weight-semibold:600;--weight-bold:700}
body{font-family:var(--font-ui);font-size:13px;line-height:1.5;letter-spacing:-.004em}
h1{font-size:37px;line-height:1.06;font-weight:var(--weight-semibold);letter-spacing:-.035em}
.subtitle{font-size:13px;line-height:1.55;color:#6d707b}
.notice{font-size:11.5px;line-height:1.5;border-radius:var(--radius-control)}
.notice b{width:18px;height:18px;display:grid;place-items:center;color:#1691a3;font-size:0}.notice b svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.field label{font-size:11.5px;font-weight:var(--weight-medium)}
.input-wrap input{height:44px;border-radius:var(--radius-control);font-size:12px}
.field-row,.help{font-size:11px}
.submit{height:40px;border-radius:var(--radius-control);font-size:12px;font-weight:var(--weight-semibold)}
.eye{font-size:0}.eye svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.eye .eyeClosed{display:none}.eye.isVisible .eyeOpen{display:none}.eye.isVisible .eyeClosed{display:block}
.success-mark{font-size:0}.success-mark svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.success h2{font-size:26px;font-weight:var(--weight-semibold);letter-spacing:-.02em}
.brand span{font-weight:var(--weight-bold);letter-spacing:-.025em}
.productIntro h2{font-weight:var(--weight-semibold);letter-spacing:-.03em}
.brand-copy,.featureCard small,.roleInfoLabel,.productFoot{line-height:1.5}
.featureCard strong,.roleInfo strong{font-weight:var(--weight-semibold)}
.featureIcon svg,.mark{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.mark{stroke:none}

/* v17 — login final visual QA */
.left{padding-left:clamp(32px,5vw,64px);padding-right:clamp(32px,5vw,64px)}
.login{width:min(470px,100%)}
.productIntro>h2{font-size:clamp(28px,2.2vw,34px)}
.featureCard{min-height:104px;padding:14px}.featureCard strong{font-size:12px}.featureCard small{font-size:10.5px;line-height:1.5}
.roleInfoLabel,.productFoot{font-size:10px}.roleInfo strong{font-size:11.5px}.rolePills span{font-size:9.5px}
@media(max-width:1180px) and (min-width:981px){.page{grid-template-columns:minmax(500px,1fr) minmax(440px,.88fr)}.right{padding-left:30px;padding-right:30px}.featureGrid{grid-template-columns:1fr}.featureCard{min-height:78px}.roleInfo{margin-top:10px}}

/* v27 — public demo registration + legal center */
button,input,select{font:inherit}
.demoEntry{margin-top:2px}
.authDivider{display:flex;align-items:center;gap:12px;margin:18px 0;color:#a1a4ae;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.authDivider::before,.authDivider::after{content:"";height:1px;flex:1;background:#ececf2}
.authDivider span{padding:0 4px;background:#fff}
.demoEntryButton{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) 18px;align-items:center;gap:11px;padding:11px 12px;border:1px solid #e4e5ee;border-radius:10px;background:#fff;color:#3b3e47;text-align:left;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .15s ease}
.demoEntryButton:hover{border-color:#d2d5fb;background:#fbfbff;box-shadow:0 6px 18px rgba(69,65,110,.06);transform:translateY(-1px)}
.demoEntryIcon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#eff0ff;color:var(--primary)}
.demoEntryIcon svg,.demoEntryArrow,.backAuth svg,.demoHeadingIcon svg,.legalHeaderActions svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.demoEntryButton strong{display:block;margin-bottom:2px;font-size:11.5px;font-weight:600}
.demoEntryButton small{display:block;color:#888b96;font-size:9.5px;line-height:1.35}
.demoEntryArrow{color:#9ca0aa}
.demoFormView{width:100%}
.backAuth{display:inline-flex;align-items:center;gap:6px;margin:0 0 21px;padding:0;border:0;background:none;color:#6d7180;font-size:10.5px;font-weight:500}
.backAuth:hover{color:var(--primary)}
.backAuth svg{width:15px;height:15px}
.demoHeading{display:flex;align-items:flex-start;gap:13px;margin-bottom:22px}
.demoHeading h1{text-align:left;font-size:30px;line-height:1.05}
.demoHeading .subtitle{margin:6px 0 0;text-align:left;font-size:11.5px}
.demoHeadingIcon{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;background:#eff0ff;color:var(--primary)}
.demoGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.demoGrid .field{min-width:0}
.select-wrap{position:relative}
.select-wrap::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:1.5px solid #858995;border-bottom:1.5px solid #858995;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.select-wrap select{width:100%;height:44px;padding:0 38px 0 12px;border:1px solid #e4e5ec;border-radius:8px;background:#fff;color:#3b3e47;outline:none;appearance:none;transition:border-color .14s ease,box-shadow .14s ease}
.select-wrap select:focus{border-color:#c8ccfb;box-shadow:0 0 0 3px rgba(98,110,232,.08)}
.captchaBox{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:16px;align-items:end;margin:4px 0 13px;padding:12px 13px;border:1px solid #e7e8ef;border-radius:10px;background:#fafafd}
.captchaBox>div:first-child>span{display:block;margin-bottom:5px;color:#858995;font-size:9.5px}
.captchaBox>div:first-child>strong{display:block;color:#343741;font-size:15px;font-weight:600}
.captchaField{margin:0}.captchaField label{font-size:9.5px}.captchaField .input-wrap input{height:38px;padding-right:12px;text-align:center;font-size:14px;font-weight:600}
.legalCheck{display:flex;align-items:flex-start;gap:9px;margin:11px 0;color:#6f727d;font-size:9.6px;line-height:1.48}
.legalCheck input{width:14px;height:14px;flex:0 0 auto;margin:2px 0 0;accent-color:var(--primary)}
.inlineLegalLink{padding:0;border:0;background:none;color:var(--primary);font:inherit;font-weight:600;text-decoration:underline;text-decoration-color:#d9dbfb;text-underline-offset:2px}
.inlineLegalLink:hover{color:var(--primary-strong);text-decoration-color:currentColor}
.demoSuccess .secondaryAuthButton{margin-top:22px}
.secondaryAuthButton{height:40px;padding:0 17px;border:1px solid #dedfe7;border-radius:8px;background:#fff;color:#555965;font-size:11px;font-weight:600}
.secondaryAuthButton:hover{border-color:#cdd0f7;color:var(--primary);background:#fbfbff}
.legalFooter{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;padding:0 20px}
.legalFooter button{padding:0;border:0;background:none;color:#777b87;font-size:10px}
.legalFooter button:hover{color:var(--primary)}
.legalFooter button::before{content:"|";margin:0 11px;color:#dadbe2}
.productLegalLink{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-decoration-color:#d6d7e0;text-underline-offset:2px}
.productLegalLink:hover{color:var(--primary);text-decoration-color:#c8cbf8}
body.legalOpen{overflow:hidden}
.legalModal{position:fixed;inset:0;z-index:1200}
.legalBackdrop{position:absolute;inset:0;background:rgba(24,25,33,.38);backdrop-filter:blur(3px)}
.legalDialog{position:absolute;inset:24px;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;border:1px solid #e2e3ea;border-radius:16px;background:#fff;box-shadow:0 28px 90px rgba(24,25,48,.22)}
.legalDialogHeader{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 18px 14px 22px;border-bottom:1px solid #ececf1;background:#fff}
.legalEyebrow{display:block;margin-bottom:2px;color:var(--primary);font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.11em}
.legalDialogHeader h2{margin:0;color:#30333c;font-size:18px;line-height:1.2;font-weight:650;letter-spacing:-.02em}
.legalHeaderActions{display:flex;align-items:center;gap:7px}
.legalPrint,.legalClose{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 11px;border:1px solid #e3e4eb;border-radius:8px;background:#fff;color:#696d78;font-size:10px;font-weight:600}
.legalPrint:hover,.legalClose:hover{border-color:#cfd2f5;background:#f8f8ff;color:var(--primary)}
.legalClose{width:34px;padding:0}.legalClose svg{width:16px;height:16px}
.legalDialogBody{min-height:0;display:grid;grid-template-columns:300px minmax(0,1fr)}
.legalNav{min-height:0;overflow:auto;padding:16px;border-right:1px solid #ececf1;background:#fafafd}
.legalContact{margin-bottom:15px;padding:13px;border:1px solid #e3e4eb;border-radius:11px;background:#fff;color:#676b77}
.legalContact>strong{display:block;margin-bottom:10px;color:#3e424d;font-size:10.5px;font-weight:650}
.legalContact>div{display:grid;grid-template-columns:57px minmax(0,1fr);gap:7px;margin:5px 0;font-size:8.7px;line-height:1.35}
.legalContact>div span{color:#9a9da7}.legalContact>div b{min-width:0;color:#646873;font-weight:500;overflow-wrap:anywhere}
.legalContact>a{display:inline-block;margin-top:7px;color:var(--primary);font-size:8.7px;text-decoration:none}
.legalNavGroup{margin-bottom:14px}
.legalNavGroup>span{display:block;margin:0 8px 5px;color:#9a9da8;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.legalNavGroup button{width:100%;display:block;margin:2px 0;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:#50545f;text-align:left}
.legalNavGroup button:hover{background:#f0f1f8}.legalNavGroup button.active{background:#ebedff;color:#4f59ca}
.legalNavGroup strong{display:block;font-size:9.5px;font-weight:600;line-height:1.35}
.legalNavGroup small{display:block;display:-webkit-box;overflow:hidden;margin-top:3px;color:#9a9da8;font-size:8px;line-height:1.35;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.legalNavGroup button.active small{color:#7d84d6}
.legalContent{min-width:0;min-height:0;overflow:auto;padding:30px clamp(28px,5vw,72px) 54px;color:#555965}
.legalContent>*{max-width:860px;margin-left:auto;margin-right:auto}
.legalLoading{display:grid;place-items:center;min-height:260px;color:#9295a0;font-size:11px}.legalLoadError{color:var(--danger)}
.legalDocMeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.legalDocMeta span{padding:4px 7px;border:1px solid #e5e6ed;border-radius:999px;background:#fafafd;color:#858995;font-size:8px;font-weight:600}
.legalContent h3{margin:0;color:#292c35;font-size:27px;line-height:1.14;font-weight:650;letter-spacing:-.035em}
.legalDocLead{margin-top:8px!important;margin-bottom:20px!important;color:#828591;font-size:11.5px;line-height:1.55}
.legalBasis{display:grid;gap:4px;margin-top:0!important;margin-bottom:8px!important;padding:11px 13px;border:1px solid #e3e5fb;border-radius:9px;background:#f7f8ff;color:#656b9d;font-size:9.5px;line-height:1.5}.legalBasis strong{color:#4f57a6;font-size:9px}
.legalApplicability{margin-top:0!important;margin-bottom:23px!important;padding:7px 0;color:#858995;font-size:9.5px}.legalApplicability strong{color:#666a75}
.legalText p{margin:0 0 16px;color:#555965;font-size:11px;line-height:1.72;white-space:pre-line}
.legalText p:first-child{color:#444852}
.legalDocumentNotice{margin-top:30px!important;padding:12px 14px;border-top:1px solid #ececf1;background:#fafafd;color:#8b8e99;font-size:9px;line-height:1.55}
.bulkProtectedRecord{display:inline-grid;place-items:center;width:28px;height:28px;color:#8c909b;font-size:12px}
@media(max-width:980px){
  .demoHeading{margin-top:4px}.legalDialog{inset:12px}.legalDialogBody{grid-template-columns:240px minmax(0,1fr)}.legalContent{padding:24px 28px 44px}
}
@media(max-width:720px){
  .legalDialog{inset:0;border:0;border-radius:0}.legalDialogHeader{min-height:62px;padding:12px 14px}.legalPrint span{display:none}.legalPrint{width:34px;padding:0}.legalDialogBody{display:block;overflow:auto}.legalNav{height:auto;overflow:visible;border-right:0;border-bottom:1px solid #ececf1;padding:12px}.legalContact{margin-bottom:10px}.legalNav nav{display:flex;gap:6px;overflow:auto;padding-bottom:3px}.legalNavGroup{display:contents}.legalNavGroup>span,.legalNavGroup small{display:none}.legalNavGroup button{flex:0 0 auto;width:auto;max-width:210px;margin:0;padding:8px 10px;border:1px solid #e5e6ed;background:#fff;white-space:nowrap}.legalContent{overflow:visible;padding:24px 18px 48px}.legalContent h3{font-size:23px}
}
@media(max-width:520px){
  .demoGrid{grid-template-columns:1fr;gap:0}.captchaBox{grid-template-columns:1fr}.captchaField{margin-top:2px}.demoHeading h1{font-size:27px}.legalFooter{gap:7px;margin-top:36px}.legalFooter button::before{display:none}.legalFooter span{flex-basis:100%;margin-bottom:2px}.legalFooter span+span::before{display:none}
}
@media print{
  body.legalOpen{overflow:visible}.page,.legalBackdrop,.legalDialogHeader,.legalNav{display:none!important}.legalModal{position:static!important;display:block!important}.legalDialog{position:static!important;display:block!important;border:0!important;box-shadow:none!important}.legalDialogBody{display:block!important}.legalContent{overflow:visible!important;padding:0!important;color:#000!important}.legalContent h3{font-size:20pt!important;color:#000!important}.legalText p,.legalDocLead,.legalBasis,.legalApplicability,.legalDocumentNotice{color:#111!important}.legalDocMeta{margin-top:0!important}.legalContent>*{max-width:none!important}
}

/* v40 — clear route back to the public landing page */
.homeBackLink{
  width:max-content;display:inline-flex;align-items:center;gap:7px;margin:0 0 30px;
  color:#6e6e73;font-size:11.5px;font-weight:590;line-height:1;text-decoration:none;
  transition:color .16s ease,transform .16s ease
}
.homeBackLink svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s ease}
.homeBackLink:hover{color:#1d1d1f;transform:translateX(-1px)}
.homeBackLink:hover svg{transform:translateX(-2px)}
.homeBackLink:focus-visible{border-radius:6px;outline:3px solid rgba(0,113,227,.16);outline-offset:4px}
@media(max-width:980px){.homeBackLink{margin-bottom:27px}}
@media(max-width:520px){.homeBackLink{margin-bottom:25px}}

/* v35 — calmer 2026 product story on the sign-in screen */
.right{isolation:isolate;justify-content:center;padding:48px 56px;background:linear-gradient(145deg,#f8f7ff 0%,#f2f4ff 48%,#f8f7ff 100%)}
.productIntroMinimal{position:relative;z-index:2;width:min(560px,100%);min-height:620px;display:flex;flex-direction:column;justify-content:center}
.productIntroMinimal .brand{position:relative;z-index:3;font-size:24px}
.loginStory{position:relative;z-index:3;max-width:510px;margin-top:54px}
.storyEyebrow{display:block;margin-bottom:12px;color:#767de0;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.productIntroMinimal .loginStory h2{max-width:500px;margin:0;color:#252832;font-size:clamp(34px,3vw,48px);line-height:1.02;font-weight:650;letter-spacing:-.052em;text-align:left}
.productIntroMinimal .loginStory p{max-width:470px;margin:20px 0 0;color:#737784;font-size:13px;line-height:1.68}
.loginAmbient{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ambientOrb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.7;animation:loginFloat 13s ease-in-out infinite alternate}
.ambientOrbA{width:390px;height:390px;right:-160px;top:-110px;background:radial-gradient(circle at 35% 35%,rgba(125,135,255,.34),rgba(125,135,255,.05) 58%,transparent 72%)}
.ambientOrbB{width:330px;height:330px;left:-170px;bottom:-120px;background:radial-gradient(circle at 55% 45%,rgba(145,103,255,.20),rgba(145,103,255,.03) 62%,transparent 75%);animation-delay:-6s}
.ambientGrid{position:absolute;inset:0;background-image:linear-gradient(rgba(93,101,177,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(93,101,177,.045) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 78%,transparent 100%);opacity:.5}
.motionScene{position:relative;z-index:2;width:300px;height:300px;margin:58px auto 0;perspective:900px}
.motionCore{position:absolute;left:50%;top:50%;width:92px;height:92px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.9);border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(235,237,255,.72));box-shadow:0 30px 70px rgba(76,70,144,.18),inset 0 1px 0 rgba(255,255,255,.95);transform:translate(-50%,-50%) rotate(-5deg);backdrop-filter:blur(20px);animation:coreBreathe 5.5s ease-in-out infinite}
.motionCore span{color:#606be0;font-size:39px;font-weight:760;letter-spacing:-.08em;text-shadow:0 1px 0 #fff}
.orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(104,111,200,.18);border-radius:50%}
.orbit i{position:absolute;left:50%;top:-5px;width:10px;height:10px;border-radius:50%;background:#6974e8;box-shadow:0 0 0 5px rgba(105,116,232,.10),0 4px 14px rgba(73,80,162,.22)}
.orbitOne{width:176px;height:176px;animation:orbitSpinOne 10s linear infinite}
.orbitTwo{width:236px;height:236px;animation:orbitSpinTwo 15s linear infinite reverse}
.orbitTwo i{background:#9c78ef}
.orbitThree{width:286px;height:286px;animation:orbitSpinThree 20s linear infinite;opacity:.65}
.orbitThree i{background:#72a8ee}
.motionGlow{position:absolute;left:50%;top:50%;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(106,116,232,.18),rgba(106,116,232,0) 70%);transform:translate(-50%,-50%);animation:glowPulse 4.8s ease-in-out infinite}
@keyframes loginFloat{to{transform:translate3d(18px,-16px,0) scale(1.06)}}
@keyframes orbitSpinOne{from{transform:translate(-50%,-50%) rotateX(67deg) rotateZ(0)}to{transform:translate(-50%,-50%) rotateX(67deg) rotateZ(360deg)}}
@keyframes orbitSpinTwo{from{transform:translate(-50%,-50%) rotateX(72deg) rotateZ(52deg)}to{transform:translate(-50%,-50%) rotateX(72deg) rotateZ(412deg)}}
@keyframes orbitSpinThree{from{transform:translate(-50%,-50%) rotateX(74deg) rotateZ(-37deg)}to{transform:translate(-50%,-50%) rotateX(74deg) rotateZ(323deg)}}
@keyframes coreBreathe{0%,100%{transform:translate(-50%,-50%) rotate(-5deg) translateY(0)}50%{transform:translate(-50%,-50%) rotate(-2deg) translateY(-8px)}}
@keyframes glowPulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.94)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
@media(max-width:1180px) and (min-width:981px){.right{padding:42px 34px}.productIntroMinimal{min-height:560px}.loginStory{margin-top:40px}.motionScene{width:250px;height:250px;margin-top:44px;transform:scale(.88)}}
@media(prefers-reduced-motion:reduce){.ambientOrb,.motionCore,.orbit,.motionGlow{animation:none!important}}


/* v36 — focused login: form + enlarged ambient Zetka animation only */
#loginFormView>h1{margin-bottom:42px}
.right{display:grid;place-items:center;padding:0;overflow:hidden;background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.92),rgba(247,246,255,.78) 28%,rgba(239,241,255,.96) 72%,#f5f4ff 100%)}
.motionSceneLarge{width:min(540px,78vh,82%);height:min(540px,78vh,82vw);margin:0;filter:drop-shadow(0 34px 60px rgba(79,73,157,.10));transform-style:preserve-3d}
.motionSceneLarge .motionCore{width:148px;height:148px;border-radius:46px;box-shadow:0 42px 100px rgba(76,70,144,.20),inset 0 1px 0 rgba(255,255,255,.98)}
.motionSceneLarge .motionCore span{font-size:62px}
.motionSceneLarge .orbitOne{width:280px;height:280px}
.motionSceneLarge .orbitTwo{width:386px;height:386px}
.motionSceneLarge .orbitThree{width:506px;height:506px}
.motionSceneLarge .orbit i{top:-7px;width:14px;height:14px;box-shadow:0 0 0 7px rgba(105,116,232,.09),0 7px 22px rgba(73,80,162,.20)}
.motionSceneLarge .motionGlow{width:300px;height:300px;background:radial-gradient(circle,rgba(106,116,232,.22),rgba(106,116,232,.05) 42%,rgba(106,116,232,0) 72%)}
@media(max-width:1180px) and (min-width:981px){.motionSceneLarge{width:min(430px,72vh,88%);height:min(430px,72vh,88vw);transform:none}.motionSceneLarge .motionCore{width:124px;height:124px;border-radius:38px}.motionSceneLarge .motionCore span{font-size:52px}.motionSceneLarge .orbitOne{width:230px;height:230px}.motionSceneLarge .orbitTwo{width:315px;height:315px}.motionSceneLarge .orbitThree{width:410px;height:410px}}

/* v37 — public-facing typography aligned with landing and report form */
:root{
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --radius-control:14px;
}
body{
  font-family:var(--font-ui);
  background:#f6f6f8;
  color:#1d1d1f;
  letter-spacing:-.012em;
}
.page{grid-template-columns:minmax(520px,1fr) minmax(480px,.92fr);background:#f6f6f8}
.left{padding:56px clamp(34px,5vw,74px) 88px;background:#fbfbfd}
.login{width:min(430px,100%)}
#loginFormView>h1{
  margin:0 0 36px;
  color:#1d1d1f;
  font-size:clamp(38px,3.25vw,48px);
  line-height:1;
  font-weight:720;
  letter-spacing:-.052em;
  text-align:left;
}
.field{margin-bottom:17px}
.field label{margin-bottom:8px;color:#3a3a3c;font-size:13px;font-weight:620;letter-spacing:-.012em}
.input-wrap input,.select-wrap select{
  height:50px;
  padding-left:15px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  background:rgba(255,255,255,.94);
  color:#1d1d1f;
  font-size:15px;
  letter-spacing:-.015em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.input-wrap input{padding-right:48px}
.input-wrap input::placeholder{color:#a1a1a6}
.input-wrap input:hover,.select-wrap select:hover{border-color:rgba(0,0,0,.17);background:#fff}
.input-wrap input:focus,.select-wrap select:focus{border-color:rgba(0,113,227,.5);background:#fff;box-shadow:0 0 0 4px rgba(0,113,227,.10)}
.eye{top:7px;right:7px;width:36px;height:36px;border-radius:10px;color:#86868b}
.eye:hover{background:#f5f5f7;color:#515154}
.field-row{margin:-2px 0 24px;font-size:11.5px}
.remember{gap:8px;color:#6e6e73}
.remember input{width:15px;height:15px}
.help{color:#5e66d7;font-size:11.5px;font-weight:560}
.submit{
  width:100%;height:50px;padding:0 20px;border:0;border-radius:999px;
  background:#1d1d1f;color:#fff;font-size:14px;font-weight:650;letter-spacing:-.014em;
  box-shadow:0 7px 18px rgba(0,0,0,.12);transition:transform .14s ease,box-shadow .16s ease,background .16s ease
}
.submit:hover{border:0;background:#000;box-shadow:0 9px 22px rgba(0,0,0,.16);transform:translateY(-1px)}
.submit:active{transform:scale(.993)}
.error{margin-top:11px;font-size:12px;line-height:1.4}
.authDivider{margin:20px 0;color:#a1a1a6;font-size:10px}
.demoEntryButton{border-radius:14px;padding:12px 13px}
.demoEntryButton strong{font-size:13px}.demoEntryButton small{font-size:10.5px}
.footer,.legalFooter button{font-family:var(--font-ui);font-size:10.5px;letter-spacing:-.005em}
.right{background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.97),rgba(249,249,252,.86) 30%,rgba(241,242,250,.97) 72%,#f5f5f8 100%)}
@media(max-width:980px){.left{background:#fbfbfd}.login{width:min(440px,100%)}#loginFormView>h1{text-align:center}}


/* v38 — reuse the public landing visual language on the sign-in screen */
.loginLandingCanvas{
  --lmx:0px;--lmy:0px;--lrx:0deg;--lry:0deg;
  position:relative;isolation:isolate;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(145deg,#fbfbfd 0%,#f4f4f7 48%,#f0f0f4 100%);
}
.loginLandingScene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.loginLandingScene::after{content:"";position:absolute;inset:0;opacity:.20;background-image:linear-gradient(rgba(30,30,38,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(30,30,38,.045) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,transparent,black 18%,black 76%,transparent)}
.loginAurora{position:absolute;border-radius:50%;filter:blur(3px);opacity:.72;mix-blend-mode:multiply}
.loginAuroraA{width:min(48vw,680px);aspect-ratio:1;right:-18%;top:-23%;background:radial-gradient(circle at 35% 38%,rgba(255,171,105,.62),rgba(244,123,32,.14) 42%,transparent 70%);animation:loginDriftA 15s ease-in-out infinite alternate}
.loginAuroraB{width:min(44vw,600px);aspect-ratio:1;right:8%;bottom:-28%;background:radial-gradient(circle at 42% 36%,rgba(111,125,241,.34),rgba(181,110,234,.14) 44%,transparent 72%);animation:loginDriftB 18s ease-in-out infinite alternate}
.loginAuroraC{width:min(34vw,440px);aspect-ratio:1;left:-20%;bottom:-18%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(244,123,32,.08) 48%,transparent 73%);animation:loginDriftC 20s ease-in-out infinite alternate}
.loginGrain{position:absolute;inset:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.loginLandingVisual{position:relative;z-index:2;width:min(78%,610px);aspect-ratio:1;perspective:1100px;transform:translate3d(var(--lmx),var(--lmy),0);transition:transform .3s cubic-bezier(.2,.8,.2,1);animation:loginVisualIn 1.05s cubic-bezier(.2,.8,.2,1) both}
.loginHalo{position:absolute;inset:9%;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.98),rgba(255,255,255,.58) 25%,rgba(245,130,49,.17) 47%,rgba(116,126,241,.11) 66%,transparent 73%);filter:drop-shadow(0 36px 70px rgba(50,46,70,.09));animation:loginHaloPulse 7s ease-in-out infinite}
.loginOrb{position:absolute;inset:20%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.8);border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(255,255,255,.52));box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -25px 60px rgba(111,125,241,.05),0 38px 90px rgba(59,56,74,.13);backdrop-filter:blur(28px) saturate(155%);-webkit-backdrop-filter:blur(28px) saturate(155%);transform:rotateX(var(--lrx)) rotateY(var(--lry));transition:transform .18s ease-out}
.loginOrb::before{content:"";position:absolute;inset:7%;border:1px solid rgba(35,35,45,.055);border-radius:50%}
.loginOrb::after{content:"";position:absolute;width:46%;height:18%;left:27%;top:12%;border-radius:50%;background:rgba(255,255,255,.7);filter:blur(18px);transform:rotate(-18deg)}
.loginOrbMark{position:relative;z-index:2;width:32%;aspect-ratio:1;display:grid;place-items:center;border-radius:29%;color:white;background:linear-gradient(145deg,#ffa763 0%,#f47b20 58%,#d55e0e 100%);box-shadow:0 26px 56px rgba(244,123,32,.27),inset 0 1px 0 rgba(255,255,255,.38);animation:loginCoreFloat 5.8s ease-in-out infinite}
.loginOrbMark svg{width:58%;height:58%;filter:drop-shadow(0 3px 8px rgba(110,50,5,.12))}
.loginRing{position:absolute;left:50%;top:50%;border:1px solid rgba(54,54,67,.10);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.loginRingOne{width:72%;height:72%;animation:loginSpin 22s linear infinite}
.loginRingTwo{width:91%;height:91%;border-style:dashed;border-color:rgba(54,54,67,.075);animation:loginSpinReverse 31s linear infinite}
.loginNode{position:absolute;width:54px;height:54px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.88);border-radius:18px;color:#4d4d55;background:rgba(255,255,255,.68);box-shadow:0 16px 38px rgba(50,48,66,.11),inset 0 1px 0 rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
.loginNode svg{width:22px;height:22px;stroke-width:1.65}.loginNode1{left:3%;top:34%;animation:loginNodeFloat 5.1s ease-in-out infinite}.loginNode2{right:2%;top:20%;animation:loginNodeFloat 6.2s ease-in-out -1.7s infinite}.loginNode3{right:5%;bottom:19%;animation:loginNodeFloat 5.7s ease-in-out -3.1s infinite}.loginNode4{left:14%;bottom:5%;animation:loginNodeFloat 6.6s ease-in-out -2.2s infinite}
@keyframes loginVisualIn{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:translate3d(var(--lmx),var(--lmy),0) scale(1)}}
@keyframes loginDriftA{to{transform:translate(-7vw,10vh) scale(1.08)}}@keyframes loginDriftB{to{transform:translate(5vw,-10vh) scale(.93)}}@keyframes loginDriftC{to{transform:translate(10vw,-7vh) scale(1.08)}}
@keyframes loginCoreFloat{50%{transform:translateY(-8px) rotate(2deg)}}@keyframes loginHaloPulse{50%{transform:scale(1.035);filter:drop-shadow(0 42px 84px rgba(50,46,70,.12))}}@keyframes loginSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes loginSpinReverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}@keyframes loginNodeFloat{50%{transform:translateY(-9px) rotate(3deg)}}
@media(max-width:1180px) and (min-width:981px){.loginLandingVisual{width:min(86%,500px)}.loginNode{width:48px;height:48px;border-radius:16px}.loginNode svg{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){.loginAurora,.loginLandingVisual,.loginHalo,.loginOrbMark,.loginRing,.loginNode{animation:none!important;transition:none!important}.loginLandingVisual,.loginOrb{transform:none!important}}


/* v39 — refreshed legal center aligned with the public landing */
.legalBackdrop{
  background:rgba(23,23,27,.34);
  backdrop-filter:blur(16px) saturate(125%);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
}
.legalDialog{
  inset:clamp(18px,3.4vw,52px);
  max-width:1440px;
  margin:auto;
  border:1px solid rgba(255,255,255,.72);
  border-radius:28px;
  background:rgba(251,251,253,.96);
  box-shadow:0 34px 100px rgba(24,24,30,.24),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(28px) saturate(145%);
  -webkit-backdrop-filter:blur(28px) saturate(145%);
}
.legalDialogHeader{
  min-height:92px;
  padding:18px 22px 18px 30px;
  border-bottom:1px solid rgba(0,0,0,.07);
  background:rgba(255,255,255,.72);
}
.legalHeaderCopy{min-width:0}
.legalEyebrow{margin-bottom:5px;color:#d9630e;font-size:10px;font-weight:720;letter-spacing:.12em}
.legalDialogHeader h2{color:#1d1d1f;font-size:25px;font-weight:720;letter-spacing:-.04em}
.legalHeaderCopy p{margin:5px 0 0;color:#7a7a80;font-size:12px;line-height:1.35}
.legalHeaderActions{gap:9px}
.legalPrint,.legalClose{
  height:42px;
  border:1px solid rgba(0,0,0,.09);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  color:#515154;
  font-size:12px;
  font-weight:640;
  box-shadow:0 2px 8px rgba(0,0,0,.035);
  transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;
}
.legalPrint{padding:0 16px}
.legalClose{width:42px;padding:0}
.legalPrint:hover,.legalClose:hover{border-color:rgba(0,0,0,.13);background:#fff;color:#1d1d1f;box-shadow:0 7px 18px rgba(0,0,0,.08);transform:translateY(-1px)}
.legalPrint:focus-visible,.legalClose:focus-visible,.legalNavGroup button:focus-visible,.legalContact a:focus-visible{outline:4px solid rgba(244,123,32,.16);outline-offset:2px}
.legalDialogBody{grid-template-columns:320px minmax(0,1fr)}
.legalNav{
  padding:22px 18px 28px;
  border-right:1px solid rgba(0,0,0,.07);
  background:linear-gradient(155deg,rgba(248,248,250,.94),rgba(242,242,246,.82));
}
.legalContact{
  margin-bottom:22px;
  padding:17px;
  border:1px solid rgba(0,0,0,.075);
  border-radius:17px;
  background:rgba(255,255,255,.82);
  color:#515154;
  box-shadow:0 10px 28px rgba(44,44,54,.055),inset 0 1px 0 #fff;
}
.legalContact>strong{margin-bottom:12px;color:#1d1d1f;font-size:12px;font-weight:700}
.legalContact>div{grid-template-columns:66px minmax(0,1fr);gap:9px;margin:7px 0;font-size:10.5px;line-height:1.45}
.legalContact>div span{color:#98989d}.legalContact>div b{color:#515154;font-weight:560}
.legalContact>a{margin-top:10px;color:#d9630e;font-size:10.5px;font-weight:650}
.legalContact>a:hover{color:#ad4a07;text-decoration:underline;text-underline-offset:3px}
.legalNavGroup{margin-bottom:20px}
.legalNavGroup>span{margin:0 12px 7px;color:#8a8a90;font-size:9px;font-weight:720;letter-spacing:.105em}
.legalNavGroup button{
  position:relative;
  margin:3px 0;
  padding:11px 13px 11px 15px;
  border:1px solid transparent;
  border-radius:13px;
  color:#3a3a3d;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.legalNavGroup button:hover{border-color:rgba(0,0,0,.055);background:rgba(255,255,255,.78);transform:translateX(2px)}
.legalNavGroup button.active{border-color:rgba(244,123,32,.16);background:rgba(244,123,32,.10);color:#b44d07}
.legalNavGroup button.active::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:3px;border-radius:999px;background:#f47b20}
.legalNavGroup strong{font-size:11.5px;font-weight:650;line-height:1.4}
.legalNavGroup small{margin-top:4px;color:#929297;font-size:9.5px;line-height:1.45}
.legalNavGroup button.active small{color:#bf6b31}
.legalContent{
  padding:clamp(38px,5vw,72px) clamp(30px,6vw,92px) 72px;
  color:#424245;
  scroll-behavior:smooth;
}
.legalContent>*{max-width:820px}
.legalLoading{min-height:320px;color:#86868b;font-size:14px}
.legalDocMeta{gap:8px;margin-bottom:18px}
.legalDocMeta span{padding:6px 10px;border:1px solid rgba(0,0,0,.075);background:#f5f5f7;color:#6e6e73;font-size:10px;font-weight:640;letter-spacing:.01em}
.legalContent h3{color:#1d1d1f;font-size:clamp(32px,3.2vw,46px);line-height:1.04;font-weight:730;letter-spacing:-.052em}
.legalDocLead{margin-top:14px!important;margin-bottom:28px!important;color:#6e6e73;font-size:16px;line-height:1.55}
.legalBasis{gap:7px;margin-bottom:12px!important;padding:16px 18px;border:1px solid rgba(0,113,227,.10);border-radius:15px;background:rgba(0,113,227,.055);color:#4e5966;font-size:12px;line-height:1.55}
.legalBasis strong{color:#2e4d68;font-size:11px}
.legalApplicability{margin-bottom:30px!important;padding:8px 2px;color:#7a7a80;font-size:12px;line-height:1.55}.legalApplicability strong{color:#3a3a3d}
.legalText p{margin:0 0 22px;color:#424245;font-size:16px;line-height:1.75;white-space:pre-line}
.legalText p:first-child{color:#303033}
.legalDocumentNotice{margin-top:42px!important;padding:17px 18px;border:0;border-radius:14px;background:#f5f5f7;color:#707075;font-size:11px;line-height:1.6}
@media(max-width:980px){
  .legalDialog{inset:12px}.legalDialogBody{grid-template-columns:270px minmax(0,1fr)}.legalContent{padding:38px 34px 56px}
}
@media(max-width:720px){
  .legalDialog{inset:0;margin:0;border:0;border-radius:0}.legalDialogHeader{min-height:78px;padding:12px 14px 12px 18px}.legalHeaderCopy p{display:none}.legalEyebrow{font-size:8.5px}.legalDialogHeader h2{font-size:20px}.legalPrint,.legalClose{height:38px}.legalPrint{width:38px;padding:0}.legalClose{width:38px}
  .legalDialogBody{display:block;overflow:auto}.legalNav{overflow:visible;padding:14px;border-right:0;border-bottom:1px solid rgba(0,0,0,.07)}.legalContact{margin-bottom:12px;padding:14px}.legalNav nav{display:flex;gap:7px;overflow:auto;padding:1px 1px 5px;scrollbar-width:none}.legalNav nav::-webkit-scrollbar{display:none}.legalNavGroup{display:contents}.legalNavGroup>span,.legalNavGroup small{display:none}.legalNavGroup button{flex:0 0 auto;width:auto;max-width:220px;margin:0;padding:9px 12px;border:1px solid rgba(0,0,0,.075);border-radius:999px;background:#fff;white-space:nowrap}.legalNavGroup button:hover{transform:none}.legalNavGroup button.active::before{display:none}
  .legalContent{overflow:visible;padding:30px 20px 52px}.legalContent h3{font-size:30px}.legalDocLead{font-size:14px}.legalText p{font-size:15px;line-height:1.72}
}
@media(max-width:520px){
  .legalContact>div{grid-template-columns:62px minmax(0,1fr)}.legalContent{padding-left:17px;padding-right:17px}.legalDocMeta span{font-size:9px}.legalContent h3{font-size:27px}.legalBasis{padding:14px}.legalDocumentNotice{margin-top:34px!important}
}
@media print{
  .legalHeaderCopy p{display:none!important}.legalText p{font-size:11pt!important;line-height:1.55!important}.legalDocLead{font-size:11pt!important}
}

/* v41 — keep the refreshed sign-in layout inside narrow viewports */
@media(max-width:980px){
  .page{display:block;min-height:100vh;min-height:100svh}
  .right{display:none}
  .left{display:block;width:100%;min-height:100vh;min-height:100svh;padding:42px 24px 72px}
  .login{width:min(440px,100%);margin:0 auto}
  .footer{width:100%;margin:44px auto 0}
}
@media(max-width:520px){
  .left{align-items:flex-start;padding:42px 18px 48px}
  .login{width:100%;max-width:440px}
  #loginFormView>h1{text-align:center}
}