/* Zeno Workspace login - fluid galaxy light UI */
:root {
  --zeno-green: #138a5a;
  --zeno-teal: #25b6c6;
  --zeno-blue: #1e47a8;
  --zeno-violet: #7417b4;
  --zeno-ink: #101a34;
  --zeno-ink-soft: #5e6a84;
  --zeno-card: rgba(255, 255, 255, 0.74);
  --zeno-line: rgba(16, 26, 52, 0.11);
  --zeno-shadow: 0 36px 120px rgba(16, 26, 52, 0.17);
  --pointer-x: 0px;
  --pointer-y: 0px;
}

html {
  background: #edf3fb;
}

body,
body.bg-100 {
  min-height: 100vh !important;
  height: 100vh !important;
  margin: 0;
  overflow: hidden !important;
  color: var(--zeno-ink);
  font-family: "Manrope", sans-serif;
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 36px 16px;
  background:
    radial-gradient(circle at 18% 18%, rgba(116, 23, 180, 0.15), transparent 24%),
    radial-gradient(circle at 85% 16%, rgba(37, 182, 198, 0.17), transparent 22%),
    radial-gradient(circle at 72% 84%, rgba(19, 138, 90, 0.14), transparent 24%),
    radial-gradient(circle at 16% 82%, rgba(30, 71, 168, 0.15), transparent 24%),
    linear-gradient(180deg, #f7fbff 0%, #edf3fb 56%, #e8f0fb 100%) !important;
}

#wrapwrap {
  min-height: 100vh;
  display: flex !important;
  flex-direction: column;
  background: transparent !important;
}

#wrapwrap > main {
  flex: 1 0 auto;
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
}

.cursor-glow {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(37, 182, 198, 0.18) 0%, rgba(37, 182, 198, 0.06) 34%, transparent 70%),
    radial-gradient(circle, rgba(116, 23, 180, 0.12) 0%, transparent 64%);
  filter: blur(24px);
  mix-blend-mode: screen;
}

.zeno-loader {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.86), rgba(239, 245, 255, 0.95) 42%, rgba(232, 240, 251, 0.98) 100%);
  transition: opacity 0.42s ease, visibility 0.42s ease;
}

.zeno-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.zeno-loader-core {
  position: relative;
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-mark {
  position: relative;
  z-index: 3;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 44px rgba(30, 71, 168, 0.18);
  overflow: hidden;
}

.loader-mark img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 16px rgba(30, 71, 168, 0.18));
}

.loader-orbit {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid transparent;
}

.orbit-a {
  border-top-color: rgba(37, 182, 198, 0.95);
  border-right-color: rgba(30, 71, 168, 0.72);
  animation: loaderSpin 1.15s linear infinite;
}

.orbit-b {
  inset: 12px;
  border-bottom-color: rgba(116, 23, 180, 0.92);
  border-left-color: rgba(19, 138, 90, 0.82);
  animation: loaderSpinReverse 1.6s linear infinite;
}

@keyframes loaderSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loaderSpinReverse {
  to {
    transform: rotate(-360deg);
  }
}

.bg-scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.nebula,
.halo,
.light-trail {
  position: absolute;
}

.nebula {
  border-radius: 999px;
  filter: blur(26px);
  opacity: 0.75;
}

.nebula-a {
  width: 320px;
  height: 320px;
  left: 10%;
  top: 14%;
  background: radial-gradient(circle, rgba(116, 23, 180, 0.22), transparent 70%);
}

.nebula-b {
  width: 300px;
  height: 300px;
  right: 12%;
  top: 16%;
  background: radial-gradient(circle, rgba(37, 182, 198, 0.22), transparent 72%);
}

.nebula-c {
  width: 360px;
  height: 360px;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(30, 71, 168, 0.15), transparent 72%);
}

.halo {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  opacity: 0.55;
}

.halo-a {
  width: 780px;
  height: 780px;
  left: -140px;
  top: 50%;
  transform: translateY(-50%);
}

.halo-b {
  width: 620px;
  height: 620px;
  right: -120px;
  top: 18%;
}

.light-trail {
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  opacity: 0.68;
  transform-origin: center;
}

.trail-a {
  width: 620px;
  height: 2px;
  left: 10%;
  top: 36%;
  transform: rotate(-16deg);
}

.trail-b {
  width: 540px;
  height: 2px;
  right: 10%;
  top: 60%;
  transform: rotate(12deg);
}

.trail-c {
  width: 380px;
  height: 2px;
  left: 38%;
  top: 22%;
  transform: rotate(32deg);
}

#particles {
  position: absolute;
  inset: 0;
}

.particle {
  position: absolute;
  border-radius: 999px;
  animation: particleFloat ease-in-out infinite;
}

@keyframes particleFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.24;
  }

  50% {
    transform: translate3d(0, -60px, 0) scale(1.18);
    opacity: 0.9;
  }
}

.zeno-shell {
  position: relative;
  z-index: 2;
  width: min(100%, 1280px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  perspective: 1800px;
}

.card-wrap {
  position: relative;
  width: min(100%, 560px);
}

.card-wrap::before,
.card-wrap::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 40px;
  pointer-events: none;
}

.card-wrap::before {
  background: linear-gradient(135deg, rgba(116, 23, 180, 0.08), rgba(37, 182, 198, 0.08), rgba(19, 138, 90, 0.08));
  filter: blur(4px);
  transform: translate3d(calc(var(--pointer-x) * -0.1), calc(var(--pointer-y) * -0.1), -30px);
}

.card-wrap::after {
  inset: -22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0.55;
  transform: translate3d(calc(var(--pointer-x) * 0.08), calc(var(--pointer-y) * 0.08), -10px);
}

.login-card {
  position: relative;
  width: 100%;
  padding: 40px 38px 32px;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: var(--zeno-card);
  backdrop-filter: blur(24px);
  box-shadow: var(--zeno-shadow);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.14s ease-out, box-shadow 0.18s ease-out;
  transform: rotateX(calc(var(--pointer-y) * -0.05deg)) rotateY(calc(var(--pointer-x) * 0.06deg));
}

.login-card:hover {
  box-shadow: 0 44px 128px rgba(16, 26, 52, 0.2);
}

.card-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at calc(50% + (var(--pointer-x) * 6px)) calc(18% + (var(--pointer-y) * 4px)), rgba(255, 255, 255, 0.8), transparent 24%),
    radial-gradient(circle at 12% 90%, rgba(116, 23, 180, 0.12), transparent 22%),
    radial-gradient(circle at 88% 14%, rgba(37, 182, 198, 0.14), transparent 22%);
}

.card-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(37, 182, 198, 0.06), transparent 32%, rgba(30, 71, 168, 0.08) 66%, rgba(19, 138, 90, 0.06) 100%);
}

.brand,
.ke-login-form,
.ke-reset-form,
.ke-reset-success,
.card-footer {
  position: relative;
  z-index: 2;
}

.brand {
  margin-bottom: 0;
  text-align: center;
}

.brand-floating {
  position: relative;
  z-index: 4;
  width: min(100%, 420px);
}

.brand-title-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
}

.brand-heading {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0;
}

.brand-name {
  font-family: "Sora", sans-serif;
  font-size: 50px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(90deg, var(--zeno-violet) 0%, var(--zeno-blue) 42%, var(--zeno-teal) 82%);
  -webkit-background-clip: text;
  background-clip: text;
  white-space: nowrap;
}

.brand-scope-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 154px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(30, 71, 168, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 10px 24px rgba(30, 71, 168, 0.08);
  color: #27457f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.alerts-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.alert-box {
  padding: 12px 14px;
  border-radius: 14px;
  border-left: 4px solid var(--zeno-blue);
  border: 1px solid rgba(30, 71, 168, 0.12);
  background: rgba(30, 71, 168, 0.06);
  color: var(--zeno-ink);
  font-size: 14px;
}

.alert-box.error,
.alert-box.warning {
  border-left-color: var(--zeno-violet);
  border-color: rgba(116, 23, 180, 0.14);
  background: rgba(116, 23, 180, 0.08);
}

.field {
  margin-bottom: 18px;
  width: 100%;
}

.field label {
  display: block;
  margin-bottom: 8px;
  color: #4e5d7b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
}

.input-wrap {
  position: relative;
  width: 100%;
}

.input-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18px;
  display: flex;
  align-items: center;
  z-index: 2;
  pointer-events: none;
}

.input-icon svg,
.password-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #8290ab;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}

.field:first-of-type .input-icon svg {
  stroke: #7a2cd3;
}

.field:nth-of-type(2) .input-icon svg {
  stroke: #2f6cc9;
}

.ke-login-form input[type="text"],
.ke-login-form input[type="password"],
.ke-reset-form input[type="text"],
.ke-reset-form input[type="password"],
.ke-reset-form input[type="email"],
.ke-reset-form .form-control {
  width: 100%;
  height: 60px;
  border-radius: 18px;
  border: 1px solid var(--zeno-line);
  background: rgba(255, 255, 255, 0.92);
  color: var(--zeno-ink);
  padding: 0 56px 0 50px;
  font-size: 15px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
  box-shadow: none !important;
  outline: none !important;
}

.ke-login-form input::placeholder,
.ke-reset-form input::placeholder,
.ke-reset-form .form-control::placeholder {
  color: #97a2b4;
}

.ke-login-form input:focus,
.ke-reset-form input:focus,
.ke-reset-form .form-control:focus {
  border-color: rgba(37, 182, 198, 0.5);
  box-shadow: 0 0 0 4px rgba(37, 182, 198, 0.12) !important;
  background: rgba(255, 255, 255, 0.98);
  transform: translateY(-1px);
}

.focus-line {
  display: none;
}

.password-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 0;
  background: transparent;
  z-index: 3;
  border-radius: 999px;
  transition: background 0.16s ease, transform 0.16s ease;
}

.password-toggle svg {
  stroke: #607399;
}

.password-toggle:hover {
  background: rgba(37, 182, 198, 0.1);
  transform: translateY(-50%) scale(1.04);
}

.password-toggle:hover svg {
  stroke: var(--zeno-violet);
}

.forgot-row {
  display: flex;
  justify-content: flex-end;
  margin: -2px 0 18px;
}

.forgot-row a {
  color: var(--zeno-blue);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.forgot-row a:hover {
  color: var(--zeno-violet);
  text-decoration: underline;
}

.reset-banner {
  margin-bottom: 22px;
  text-align: left;
}

.reset-title {
  margin-top: 0;
  font-family: "Sora", sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--zeno-ink);
}

.reset-copy {
  margin-top: 8px;
  color: var(--zeno-ink-soft);
  font-size: 14px;
  line-height: 1.6;
  max-width: 420px;
}

.reset-actions {
  margin-top: 14px;
  text-align: center;
}

.reset-actions a {
  color: var(--zeno-blue);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.reset-actions a:hover {
  color: var(--zeno-violet);
  text-decoration: underline;
}

.reset-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  text-decoration: none;
}

.ke-reset-form,
.ke-reset-success {
  width: 100%;
}

.ke-reset-form .field-login,
.ke-reset-form .field-password,
.ke-reset-form .field-confirm_password,
.ke-reset-form .field-name {
  width: 100%;
}

.btn-login {
  position: relative;
  width: 100%;
  height: 60px;
  border: 0;
  border-radius: 20px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
  background: linear-gradient(92deg, var(--zeno-violet) 0%, var(--zeno-blue) 28%, var(--zeno-teal) 66%, var(--zeno-green) 100%);
  background-size: 140% 140%;
  background-position: 0% 50%;
  box-shadow: 0 22px 40px rgba(30, 71, 168, 0.24);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease, background-position 0.24s ease;
}

.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 46px rgba(30, 71, 168, 0.28);
  background-position: 100% 50%;
  filter: saturate(1.12) brightness(1.02);
}

.workspace-actions {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.workspace-actions-stack {
  margin-top: 20px;
}

.btn-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(16, 26, 52, 0.1);
  background: rgba(255, 255, 255, 0.68);
  color: var(--zeno-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.btn-secondary-action:hover {
  transform: translateY(-1px);
  border-color: rgba(30, 71, 168, 0.18);
  box-shadow: 0 14px 28px rgba(30, 71, 168, 0.12);
}

.btn-secondary-action-wide {
  display: inline-flex;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--zeno-blue);
  justify-content: center;
}

.btn-secondary-action-wide:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--zeno-violet);
  text-decoration: underline;
}

.company-add-panel {
  position: relative;
  z-index: 2;
}

.zeno-shell-launchpad {
  width: min(100%, 1180px);
  /* nudge the whole launchpad up a touch from dead-centre */
  transform: translateY(-6vh);
}

.launchpad-wrap,
.mode-home-card {
  width: min(100%, 980px);
  padding: 38px;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: var(--zeno-card);
  backdrop-filter: blur(24px);
  box-shadow: var(--zeno-shadow);
}

.launchpad-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.launchpad-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 260px;
  padding: 28px;
  border-radius: 28px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 249, 255, 0.74));
  box-shadow: 0 18px 40px rgba(30, 71, 168, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.launchpad-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 54px rgba(30, 71, 168, 0.14);
  border-color: rgba(30, 71, 168, 0.16);
}

.launchpad-card-nexus {
  background:
    radial-gradient(circle at top right, rgba(116, 23, 180, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 247, 255, 0.76));
}

.launchpad-card-workspace {
  background:
    radial-gradient(circle at top right, rgba(37, 182, 198, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(243, 249, 255, 0.78));
}

.launchpad-kicker {
  color: #7080a0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.launchpad-title,
.mode-home-title {
  font-family: "Sora", sans-serif;
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  color: var(--zeno-ink);
}

.launchpad-copy,
.mode-home-copy {
  color: var(--zeno-ink-soft);
  font-size: 16px;
  line-height: 1.7;
  max-width: 44ch;
}

.launchpad-link {
  margin-top: auto;
  color: var(--zeno-blue);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.mode-home-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
  text-align: center;
  align-items: center;
}

.mode-home-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}

.mode-home-actions .btn-login {
  max-width: 320px;
}

.btn-login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.2) 40%, transparent 66%);
  transform: translateX(-120%);
  animation: shine 5s ease-in-out infinite;
}

@keyframes shine {
  0%,
  64%,
  100% {
    transform: translateX(-120%);
  }

  18%,
  26% {
    transform: translateX(120%);
  }
}

.card-footer {
  margin-top: 18px;
  color: var(--zeno-ink-soft);
  text-align: center;
  font-size: 13px;
}

.o_login_auth {
  position: relative;
  margin-top: 14px;
}

@media (max-width: 1024px) {
  .halo-a {
    width: 620px;
    height: 620px;
  }

  .halo-b {
    width: 500px;
    height: 500px;
  }
}

@media (max-width: 767px) {
  body {
    padding: 18px 12px;
  }

  .cursor-glow,
  .halo,
  .trail-c {
    display: none;
  }

  .card-wrap {
    width: min(100%, 520px);
  }

  .login-card {
    padding: 30px 20px 24px;
    border-radius: 28px;
    transform: none;
  }

  .login-card .card-title {
    padding: 16px 16px 18px;
  }

  .brand-heading {
    gap: 8px;
  }

  .brand-floating {
    width: calc(100% - 24px);
  }

  .brand-name {
    font-size: 40px;
  }

  .brand-scope-badge {
    min-width: 136px;
    padding: 8px 14px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }

  .launchpad-wrap,
  .mode-home-card {
    width: 100%;
    padding: 24px 18px;
    border-radius: 28px;
  }

  .launchpad-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .launchpad-card {
    min-height: 0;
    padding: 22px 18px;
    border-radius: 24px;
  }

  .launchpad-title,
  .mode-home-title {
    font-size: 28px;
  }

  .launchpad-copy,
  .mode-home-copy {
    font-size: 14px;
  }

  .mode-home-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .mode-home-actions .btn-login,
  .mode-home-actions .btn-secondary-action {
    width: 100%;
    max-width: none;
  }
}

/* ============================================================
   NEXUS — cross-company analytics dashboard
   ============================================================ */

/* Tall pages (Nexus + Add Company) need to scroll; the base body is locked
   to 100vh/overflow:hidden for the login card. Scope the unlock via :has(). */
body:has(.zeno-shell-nexus),
body:has(.ke-company-form) {
  height: auto !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
  align-items: flex-start;
  padding: 40px 22px 64px;
}

body:has(.zeno-shell-nexus) #wrapwrap,
body:has(.ke-company-form) #wrapwrap {
  min-height: auto;
}

body:has(.zeno-shell-nexus) #wrapwrap > main,
body:has(.ke-company-form) #wrapwrap > main {
  align-items: flex-start;
}

.zeno-shell-nexus {
  width: min(100%, 1220px);
  justify-content: flex-start;
  align-items: stretch;
}

.nexus-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.nexus-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.nexus-topbar .brand-heading {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.nexus-topbar .brand-name {
  font-size: 30px;
}

.nexus-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-nexus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(16, 26, 52, 0.1);
  background: rgba(255, 255, 255, 0.72);
  color: var(--zeno-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.btn-nexus:hover {
  transform: translateY(-1px);
  border-color: rgba(30, 71, 168, 0.2);
  box-shadow: 0 14px 28px rgba(30, 71, 168, 0.12);
  color: var(--zeno-blue);
}

.btn-nexus-primary {
  color: #fff;
  border: 0;
  background: linear-gradient(92deg, var(--zeno-violet) 0%, var(--zeno-blue) 46%, var(--zeno-teal) 100%);
  box-shadow: 0 16px 30px rgba(30, 71, 168, 0.22);
}

.btn-nexus-primary:hover {
  color: #fff;
  filter: saturate(1.12) brightness(1.03);
}

.nexus-head {
  margin-top: 4px;
}

.nexus-kicker {
  color: #7080a0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.nexus-title {
  font-family: "Sora", sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.08;
  color: var(--zeno-ink);
  margin-top: 6px;
}

.nexus-sub {
  color: var(--zeno-ink-soft);
  font-size: 15px;
  margin-top: 6px;
}

/* KPI cards */
.nexus-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.kpi-card {
  position: relative;
  padding: 20px 20px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 249, 255, 0.72));
  box-shadow: 0 16px 38px rgba(30, 71, 168, 0.1);
  overflow: hidden;
}

.kpi-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--zeno-violet), var(--zeno-blue), var(--zeno-teal));
}

.kpi-revenue::before { background: linear-gradient(90deg, var(--zeno-violet), var(--zeno-blue)); }
.kpi-collected::before { background: linear-gradient(90deg, var(--zeno-blue), var(--zeno-teal)); }
.kpi-outstanding::before { background: linear-gradient(90deg, #d98324, #e0a458); }
.kpi-profit::before { background: linear-gradient(90deg, var(--zeno-teal), var(--zeno-green)); }
.kpi-count::before { background: linear-gradient(90deg, var(--zeno-ink-soft), var(--zeno-blue)); }

.kpi-label {
  color: #7080a0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kpi-value {
  font-family: "Sora", sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--zeno-ink);
  margin-top: 10px;
  line-height: 1;
}

.kpi-outstanding .kpi-value { color: #b06a12; }
.kpi-profit .kpi-value { color: #14795a; }

.kpi-foot {
  color: var(--zeno-ink-soft);
  font-size: 11.5px;
  margin-top: 8px;
  line-height: 1.4;
}

/* Panels */
.nexus-panel {
  padding: 24px 26px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: var(--zeno-card);
  backdrop-filter: blur(24px);
  box-shadow: var(--zeno-shadow);
}

.panel-title {
  font-family: "Sora", sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--zeno-ink);
  margin-bottom: 18px;
  letter-spacing: 0.01em;
}

/* Revenue bars */
.rev-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rev-row {
  display: grid;
  grid-template-columns: minmax(120px, 220px) 1fr auto;
  align-items: center;
  gap: 16px;
}

.rev-name {
  font-weight: 700;
  color: var(--zeno-ink);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rev-bar-track {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: rgba(30, 71, 168, 0.08);
  overflow: hidden;
}

.rev-bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--zeno-violet), var(--zeno-blue) 55%, var(--zeno-teal));
  box-shadow: 0 4px 12px rgba(30, 71, 168, 0.2);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.rev-val {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  color: var(--zeno-ink);
  font-size: 14px;
  min-width: 90px;
  text-align: right;
}

.rev-empty {
  color: var(--zeno-ink-soft);
  font-size: 14px;
}

/* Breakdown table */
.nexus-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.nexus-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.nexus-table thead th {
  text-align: right;
  padding: 10px 14px;
  color: #7080a0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--zeno-line);
  white-space: nowrap;
}

.nexus-table thead th.col-name { text-align: left; }

.nexus-table tbody td {
  text-align: right;
  padding: 14px;
  color: var(--zeno-ink);
  border-bottom: 1px solid rgba(16, 26, 52, 0.06);
  white-space: nowrap;
}

.nexus-table tbody tr:hover td {
  background: rgba(30, 71, 168, 0.035);
}

.nexus-table tbody td.col-name {
  text-align: left;
  font-weight: 700;
}

.nexus-table tbody td.col-out { color: #b06a12; font-weight: 600; }
.nexus-table tbody td.col-profit { color: #14795a; font-weight: 600; }

/* Add Company form */
.ke-company-form {
  width: 100%;
}

.ke-company-form .field-row {
  display: flex;
  gap: 16px;
}

.ke-company-form .field-row .field {
  flex: 1;
}

.ke-company-form input[type="text"] {
  padding-left: 18px !important;
}

.ke-select {
  width: 100%;
  height: 60px;
  border-radius: 18px;
  border: 1px solid var(--zeno-line);
  background: rgba(255, 255, 255, 0.92);
  color: var(--zeno-ink);
  padding: 0 44px 0 18px;
  font-size: 15px;
  font-family: "Manrope", sans-serif;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232f6cc9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
  outline: none !important;
}

.ke-select:focus {
  border-color: rgba(37, 182, 198, 0.5);
  box-shadow: 0 0 0 4px rgba(37, 182, 198, 0.12) !important;
}

@media (max-width: 980px) {
  .nexus-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ke-company-form .field-row { flex-direction: column; gap: 0; }
}

@media (max-width: 560px) {
  .nexus-kpis { grid-template-columns: 1fr; }
  .rev-row { grid-template-columns: 1fr auto; }
  .rev-bar-track { display: none; }
}

/* ============================================================
   WORKSPACE HOME — curated app tiles
   ============================================================ */
.ws-panel {
  padding: 22px 24px;
}

.ws-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.ws-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 249, 255, 0.7));
  box-shadow: 0 10px 26px rgba(30, 71, 168, 0.08);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.ws-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(30, 71, 168, 0.15);
  border-color: rgba(30, 71, 168, 0.18);
}

.ws-tile-mono {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Sora", sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--zeno-violet), var(--zeno-blue));
  box-shadow: 0 8px 18px rgba(116, 23, 180, 0.22);
}
.ws-tile-mono svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ws-tile-violet .ws-tile-mono { background: linear-gradient(135deg, var(--zeno-violet), var(--zeno-blue)); }
.ws-tile-blue .ws-tile-mono   { background: linear-gradient(135deg, var(--zeno-blue), var(--zeno-teal)); box-shadow: 0 8px 18px rgba(30, 71, 168, 0.22); }
.ws-tile-teal .ws-tile-mono   { background: linear-gradient(135deg, var(--zeno-teal), var(--zeno-green)); box-shadow: 0 8px 18px rgba(37, 182, 198, 0.22); }
.ws-tile-green .ws-tile-mono  { background: linear-gradient(135deg, var(--zeno-green), var(--zeno-teal)); box-shadow: 0 8px 18px rgba(19, 138, 90, 0.22); }

.ws-tile-body {
  flex: 1 1 auto;
  min-width: 0;
}

.ws-tile-name {
  font-family: "Sora", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--zeno-ink);
  line-height: 1.1;
}

.ws-tile-desc {
  color: var(--zeno-ink-soft);
  font-size: 12.5px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-tile-arrow {
  flex: 0 0 auto;
  color: var(--zeno-blue);
  font-size: 18px;
  font-weight: 700;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.ws-tile:hover .ws-tile-arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 560px) {
  .ws-tiles { grid-template-columns: 1fr; }
}

/* ============================================================
   WORKSPACE — quick create bar
   ============================================================ */
.ws-quickbar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(245, 249, 255, 0.66));
  box-shadow: 0 14px 34px rgba(30, 71, 168, 0.09);
}

.ws-quickbar-label {
  font-family: "Sora", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7080a0;
  flex: 0 0 auto;
}

.ws-quickbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ws-quick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--zeno-ink);
  font-size: 13.5px;
  font-weight: 700;
  border: 1px solid rgba(30, 71, 168, 0.14);
  background: rgba(255, 255, 255, 0.9);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.ws-quick:hover {
  transform: translateY(-2px);
  color: #fff;
  border-color: transparent;
  background: linear-gradient(92deg, var(--zeno-violet), var(--zeno-blue) 60%, var(--zeno-teal));
  box-shadow: 0 14px 28px rgba(30, 71, 168, 0.24);
}

.ws-quick-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zeno-violet), var(--zeno-blue));
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.ws-quick:hover .ws-quick-plus {
  background: rgba(255, 255, 255, 0.25);
}

@media (max-width: 767px) {
  .ws-quickbar { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   WORKSPACE — getting started checklist
   ============================================================ */
.ws-setup {
  border: 1px solid rgba(30, 71, 168, 0.16);
  background: linear-gradient(120deg, rgba(116, 23, 180, 0.06), rgba(37, 182, 198, 0.06));
}

.ws-setup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}

.ws-setup-sub {
  color: var(--zeno-ink-soft);
  font-size: 13px;
  margin-top: 4px;
}

.ws-setup-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.ws-setup-bar {
  position: relative;
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: rgba(30, 71, 168, 0.1);
  overflow: hidden;
}

.ws-setup-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--zeno-violet), var(--zeno-blue) 55%, var(--zeno-teal));
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ws-setup-pct {
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--zeno-blue);
  min-width: 38px;
  text-align: right;
}

.ws-setup-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.ws-setup-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 15px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.86);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.ws-setup-item.is-pending:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(30, 71, 168, 0.14);
  border-color: rgba(30, 71, 168, 0.2);
}

.ws-setup-item.is-done {
  opacity: 0.62;
}

.ws-setup-check {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  border: 2px solid rgba(30, 71, 168, 0.25);
  background: transparent;
}

.is-done .ws-setup-check {
  border-color: transparent;
  background: linear-gradient(135deg, var(--zeno-teal), var(--zeno-green));
}

.ws-setup-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ws-setup-label {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--zeno-ink);
}

.is-done .ws-setup-label {
  text-decoration: line-through;
}

.ws-setup-hint {
  color: var(--zeno-ink-soft);
  font-size: 11.5px;
  margin-top: 2px;
}

.ws-setup-arrow {
  flex: 0 0 auto;
  color: var(--zeno-blue);
  font-weight: 700;
}

/* ============================================================
   ADD COMPANY — clean, fully-visible form card
   (the login card-glow/aura look blotchy on this taller form)
   ============================================================ */
body:has(.ke-company-form) .zeno-shell {
  justify-content: flex-start;
}

body:has(.ke-company-form) .card-wrap {
  width: min(100%, 560px);
}

.login-card:has(.ke-company-form) {
  background: #ffffff !important;
  backdrop-filter: none;
}

.login-card:has(.ke-company-form) .card-glow,
.login-card:has(.ke-company-form) .card-aura {
  display: none !important;
}

/* full-width select + inputs, consistent look */
.ke-company-form .ke-select,
.ke-company-form input[type="text"] {
  width: 100%;
}

/* ============================================================
   ADD COMPANY — consistent, clearly-boxed fields
   (City/Phone/Email were faint white-on-white; unify all)
   ============================================================ */
.ke-company-form input[type="text"],
.ke-company-form .ke-select {
  height: 56px !important;
  background: #f4f7fc !important;
  border: 1px solid rgba(16, 26, 52, 0.14) !important;
  border-radius: 14px !important;
  padding: 0 16px !important;
  font-size: 15px;
  color: var(--zeno-ink);
  box-shadow: none !important;
}

.ke-company-form .ke-select {
  padding-right: 42px !important;
  background-position: right 16px center;
}

.ke-company-form input[type="text"]:hover,
.ke-company-form .ke-select:hover {
  border-color: rgba(30, 71, 168, 0.28) !important;
}

.ke-company-form input[type="text"]:focus,
.ke-company-form .ke-select:focus {
  border-color: rgba(37, 182, 198, 0.6) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(37, 182, 198, 0.14) !important;
  transform: none !important;
}

.ke-company-form input::placeholder {
  color: #9aa6bd;
}

.ke-company-form .field {
  margin-bottom: 16px;
}

.ke-company-form .field-row {
  gap: 18px;
}

/* Add Company button: clean solid gradient, no shine streak */
.ke-company-form .btn-login,
.btn-login.btn-no-shine {
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
}
.ke-company-form .btn-shine,
.btn-no-shine .btn-shine {
  display: none !important;
}

/* Add Company: box-sizing so inputs don't overflow (was 34px extra on right,
   making field right-edges uneven vs the selects/button) */
.ke-company-form,
.ke-company-form .field,
.ke-company-form .field-row,
.ke-company-form input[type="text"],
.ke-company-form .ke-select,
.ke-company-form .btn-login {
  box-sizing: border-box !important;
}

/* Add Company button: kill the vertical white seam (bg-size 100% + repeat wrap).
   no-repeat + solid fallback = clean gradient, no white line. */
.ke-company-form .btn-login {
  background-color: #1e47a8 !important;
  background-repeat: no-repeat !important;
  background-size: 101% 101% !important;
  background-position: center !important;
}

/* ============================================================= */
/*  ADD COMPANY — clean, purpose-built form (v37 rebuild)         */
/* ============================================================= */
body:has(.zeno-add-page) {
  height: auto !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;
}

.zeno-add-page {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 26px;
  padding: 54px 20px 72px;
  box-sizing: border-box;
}

.zeno-add-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.zeno-add-brand .brand-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.zeno-add-brand .brand-name {
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(92deg, var(--zeno-violet) 0%, var(--zeno-blue) 46%, var(--zeno-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.zeno-add-brand .brand-scope-badge {
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--zeno-ink-soft);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--zeno-line);
  border-radius: 999px;
  padding: 7px 18px;
  backdrop-filter: blur(8px);
}

/* --- Card --- */
.zeno-add-card {
  width: 100%;
  max-width: 560px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid rgba(16, 26, 52, 0.07);
  border-radius: 26px;
  box-shadow: 0 34px 90px rgba(16, 26, 52, 0.15), 0 2px 8px rgba(16, 26, 52, 0.05);
  padding: 40px 42px 34px;
}
@media (max-width: 600px) {
  .zeno-add-card { padding: 28px 22px 26px; border-radius: 22px; }
  .zeno-add-page { padding: 34px 16px 56px; gap: 20px; }
  .zeno-add-brand .brand-name { font-size: 34px; }
}

.zeno-add-head h1 {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: 27px;
  letter-spacing: -0.01em;
  color: var(--zeno-ink);
}
.zeno-add-head p {
  margin: 9px 0 0;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--zeno-ink-soft);
}

/* --- Server error banner --- */
.zeno-add-error {
  margin-top: 20px;
  padding: 13px 16px;
  border-radius: 13px;
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.22);
  color: #b02a1a;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 500;
}

/* --- Form --- */
.zeno-add-form {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.zf-row {
  display: flex;
  gap: 16px;
}
.zf-row .zf-field { flex: 1 1 0; min-width: 0; }
@media (max-width: 520px) {
  .zf-row { flex-direction: column; gap: 18px; }
}

.zf-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.zf-field label {
  font-family: "Manrope", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5e6a84;
  margin-bottom: 8px;
}
.zf-field label .req { color: #c0392b; margin-left: 1px; }

.zf-field input,
.zf-field select {
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  border-radius: 13px;
  border: 1px solid rgba(16, 26, 52, 0.14);
  background: #f5f8fd;
  color: var(--zeno-ink);
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  padding: 0 16px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.zf-field input::placeholder { color: #9aa6bd; }

.zf-field select {
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235e6a84' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.zf-field input:hover,
.zf-field select:hover { border-color: rgba(30, 71, 168, 0.30); }

.zf-field input:focus,
.zf-field select:focus {
  border-color: var(--zeno-teal);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 182, 198, 0.15);
}

/* --- Error state --- */
.zf-field.has-error input,
.zf-field.has-error select {
  border-color: #d0402e;
  background: rgba(192, 57, 43, 0.04);
}
.zf-field.has-error input:focus,
.zf-field.has-error select:focus {
  box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.13);
}
.zf-error {
  font-family: "Manrope", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: #c0392b;
  margin-top: 6px;
  display: none;
}
.zf-field.has-error .zf-error { display: block; }

/* --- Actions --- */
.zf-submit {
  margin-top: 10px;
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  color: #ffffff;
  font-family: "Sora", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background-color: var(--zeno-blue);
  background-image: linear-gradient(92deg, var(--zeno-violet) 0%, var(--zeno-blue) 44%, var(--zeno-teal) 80%, var(--zeno-green) 100%);
  background-repeat: no-repeat;
  background-size: 101% 101%;
  background-position: center;
  box-shadow: 0 18px 34px rgba(30, 71, 168, 0.24);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.zf-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 44px rgba(30, 71, 168, 0.30);
  filter: saturate(1.07);
}
.zf-submit:active { transform: translateY(0); }
.zf-submit:disabled { opacity: 0.72; cursor: default; transform: none; }

.zf-cancel {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--zeno-blue);
  text-decoration: none;
}
.zf-cancel:hover { text-decoration: underline; }

/* ============================================================= */
/*  ZENO LOGIN — SynqChain-style, WHITE theme (v41)             */
/* ============================================================= */
:root { --zsl-teal:#25b6c6; --zsl-blue:#1e47a8; --zsl-violet:#7417b4; --zsl-ink:#0f1830; --zsl-ink-soft:#5a6580; }

body:has(.zsl) {
  display:block !important; height:auto !important; min-height:100vh !important;
  overflow-x:hidden !important; overflow-y:auto !important;
  padding:0 !important; margin:0 !important; background:#f4f7fd !important;
}
body:has(.zsl) #wrapwrap,
body:has(.zsl) #wrapwrap > main {
  display:block !important; height:auto !important; min-height:100vh !important;
  padding:0 !important; margin:0 !important; background:transparent !important;
}
body:has(.zsl) header, body:has(.zsl) footer, body:has(.zsl) .o_footer { display:none !important; }
html:has(.zsl) { background:#f4f7fd; }

.zsl {
  position:relative; min-height:100vh; width:100%;
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px; box-sizing:border-box;
  font-family:"Manrope",-apple-system,sans-serif; color:var(--zsl-ink); overflow:hidden;
}

/* --- soft light backdrop --- */
.zsl-bg {
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(120% 120% at 50% 30%, #ffffff 0%, #eef3fb 60%, #e7eef9 100%);
}
.zsl-defs { position:absolute; width:0; height:0; }
/* STATIC soft-blur mist — no SVG turbulence filter, no animation.
   The animated feTurbulence recomputed fractal noise every frame and pegged
   the GPU (Mac heating up). Plain blurred gradients look nearly identical and
   cost effectively nothing once painted. */
.zsl-smoke { position:absolute; inset:-20%; }
.zsl-smoke.s1 {
  background:
    radial-gradient(closest-side at 16% 46%, rgba(116,23,180,.20), transparent 70%),
    radial-gradient(closest-side at 52% 40%, rgba(30,71,168,.16), transparent 64%),
    radial-gradient(closest-side at 84% 54%, rgba(37,182,198,.20), transparent 70%);
  filter:blur(46px);
  opacity:.8;
}
.zsl-smoke.s2 {
  background:
    radial-gradient(closest-side at 26% 66%, rgba(37,182,198,.14), transparent 68%),
    radial-gradient(closest-side at 74% 78%, rgba(116,23,180,.12), transparent 68%);
  filter:blur(54px);
  opacity:.7;
}

/* --- centred split grid --- */
.zsl-grid {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:44px; width:100%; max-width:900px;
}

/* --- LEFT · lockup + badge --- */
.zsl-lockup { display:flex; flex-direction:column; align-items:center; text-align:center; }
.zsl-logo { margin-bottom:16px; }
.zsl-logo img { width:118px; height:118px; object-fit:contain; filter:drop-shadow(0 14px 30px rgba(37,182,198,.28)); }
.zsl-name { font-family:"Sora",sans-serif; font-weight:800; font-size:44px; letter-spacing:-.02em; margin:0; color:var(--zsl-ink); }
.zsl-name-accent {
  background:linear-gradient(92deg,var(--zsl-violet),var(--zsl-blue) 45%,var(--zsl-teal));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.zsl-badge {
  margin-top:18px; display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:6px 16px; border-radius:999px; border:1px solid rgba(16,26,52,.12);
  background:rgba(255,255,255,.75); padding:8px 18px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color:#46506a;
  backdrop-filter:blur(8px); box-shadow:0 6px 18px rgba(16,26,52,.06);
}
.zsl-badge span { display:inline-flex; align-items:center; gap:8px; }
.zsl-dot { width:5px; height:5px; border-radius:50%; background:var(--zsl-teal); box-shadow:0 0 6px rgba(37,182,198,.7); }

/* --- RIGHT · white form card --- */
.zsl-card {
  position:relative;
  border-radius:20px; border:1px solid rgba(16,26,52,.08);
  background:#ffffff; box-shadow:0 30px 80px rgba(16,26,52,.14), 0 2px 8px rgba(16,26,52,.05);
  padding:34px 32px;
}

/* --- form (shared login + reset) --- */
.zsl-form { display:flex; flex-direction:column; }
.zsl-heading { text-align:center; font-family:"Sora",sans-serif; font-weight:800; font-size:23px; letter-spacing:-.01em; margin:0 0 24px; color:var(--zsl-ink); }
.zsl-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#5e6a84; margin:0 0 7px; }
.zsl-field { position:relative; margin-bottom:16px; }
.zsl-field input,
.zsl-form .form-control {
  box-sizing:border-box; width:100%; height:48px; border-radius:12px;
  border:1px solid rgba(16,26,52,.15); background:#f5f8fc; color:var(--zsl-ink);
  font-family:"Manrope",sans-serif; font-size:14.5px; padding:0 44px 0 15px; outline:none;
  transition:border-color .16s, box-shadow .16s, background .16s;
}
.zsl-form .form-control { padding:0 15px; margin-bottom:16px; }
.zsl-field input::placeholder { color:#9aa6bd; }
.zsl-field input:focus,
.zsl-form .form-control:focus {
  border-color:var(--zsl-teal); background:#fff;
  box-shadow:0 0 0 4px rgba(37,182,198,.15);
}
.zsl-eye {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:0; background:transparent; cursor:pointer;
  display:grid; place-items:center; color:#8a95ac; border-radius:8px; transition:.15s;
}
.zsl-eye:hover { color:var(--zsl-blue); background:rgba(16,26,52,.05); }
.zsl-eye svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.zsl-forgot { text-align:right; margin:2px 0 22px; }
.zsl-forgot a { font-size:12.5px; font-weight:600; color:var(--zsl-blue); text-decoration:none; }
.zsl-forgot a:hover { text-decoration:underline; }
.zsl-forgot-center { text-align:center; margin:14px 0 0; }

.zsl-btn {
  display:flex; align-items:center; justify-content:center; gap:9px;
  height:50px; border:0; border-radius:12px; cursor:pointer;
  font-family:"Sora",sans-serif; font-size:14.5px; font-weight:700; color:#fff; text-decoration:none;
  background:linear-gradient(92deg,var(--zsl-violet) 0%,var(--zsl-blue) 45%,var(--zsl-teal) 100%);
  background-repeat:no-repeat; background-size:150% 100%; background-position:0 0;
  box-shadow:0 14px 30px -8px rgba(30,71,168,.45);
  transition:background-position .45s ease, transform .15s, box-shadow .15s;
}
.zsl-btn:hover { background-position:100% 0; transform:translateY(-2px); box-shadow:0 20px 40px -8px rgba(30,71,168,.5); }
.zsl-btn:active { transform:translateY(0); }
.zsl-btn svg { width:17px; height:17px; fill:none; stroke:#fff; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }

.zsl-form .alert-box { padding:10px 13px; border-radius:10px; font-size:13px; margin-bottom:14px; background:rgba(37,182,198,.10); color:#0d5b66; border:1px solid rgba(37,182,198,.25); }
.zsl-form .alert-box.error { padding:10px 13px; border-radius:10px; margin-bottom:14px; background:rgba(192,57,43,.08); color:#b02a1a; border:1px solid rgba(192,57,43,.22); }

/* reset success */
.zsl-success { text-align:center; align-items:center; }
.zsl-success-ic { width:54px; height:54px; margin:2px auto 14px; border-radius:50%; display:grid; place-items:center; background:rgba(19,138,90,.10); }
.zsl-success-ic svg { width:26px; height:26px; fill:none; stroke:#138a5a; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.zsl-success h3 { font-family:"Sora",sans-serif; font-size:20px; margin:0 0 8px; color:var(--zsl-ink); }
.zsl-success p { color:var(--zsl-ink-soft); font-size:13.5px; margin:0 0 20px; }

/* responsive */
@media (max-width:860px) {
  .zsl-grid { grid-template-columns:1fr; max-width:420px; gap:26px; }
  .zsl-logo img { width:88px; height:88px; }
  .zsl-name { font-size:36px; }
}
@media (max-width:480px) {
  .zsl-card { padding:26px 20px; }
}

/* login error — smaller, at the bottom (below the button) */
.zsl-alerts { margin-top:14px; }
/* collapse the empty alerts wrapper so the forgot-password link sits at a
   standard distance below the button (no phantom gap on a clean form) */
.zsl-alerts:empty { margin-top:0; }
.zsl-form .alert-box,
.zsl-form .alert-box.error {
  padding:7px 12px; border-radius:9px; font-size:12px; line-height:1.4; text-align:center;
}
.zsl-alerts .alert-box { margin-bottom:0; }

/* Launchpad: drop the outer wrapper box — let the two cards float freely. */
.launchpad-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}
/* Launchpad wordmark — match the login "Zeno OS" (Sora) sizing. */
.zsl-name-launch { font-size: 50px; letter-spacing: -0.01em; }

/* Launchpad: card icon tiles + animated "Enter →" arrow */
.launchpad-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 2px;
}
.launchpad-icon svg { width: 26px; height: 26px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-icon-nexus { background: linear-gradient(135deg, rgba(116,23,180,.16), rgba(30,71,168,.14)); }
.lp-icon-nexus svg { stroke: #7417b4; }
.lp-icon-workspace { background: linear-gradient(135deg, rgba(30,71,168,.13), rgba(37,182,198,.18)); }
.lp-icon-workspace svg { stroke: #1189a0; }

.launchpad-link { display: inline-flex !important; align-items: center; gap: 7px; }
.lp-arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.launchpad-card:hover .lp-arrow { transform: translateX(4px); }

/* ==========================================================================
   Login intro reveal
   Start: only the lockup, floated toward centre; the card waits, hidden.
   Click the lockup → logo glides right→left into its column, then the
   sign-in card animates in. Progressive enhancement (see <noscript>).
   ========================================================================== */
.zsl-lockup { transition: transform .85s cubic-bezier(.22, 1, .36, 1), opacity .5s ease; }
.zsl.is-intro .zsl-lockup { cursor: pointer; }
.zsl.is-intro .zsl-lockup:focus-visible {
  outline: 2px solid var(--zeno-teal); outline-offset: 12px; border-radius: 22px;
}

/* card gets the reveal transition on top of its existing hover transitions */
.zsl-card {
  transition:
    opacity .6s ease .3s,
    transform .8s cubic-bezier(.22, 1, .36, 1) .3s,
    border-color .16s, box-shadow .16s, background .16s;
}

/* intro state */
.zsl.is-intro .zsl-lockup { transform: translateX(230px); }
.zsl.is-intro .zsl-card {
  opacity: 0; transform: translateX(42px) scale(.965); pointer-events: none;
}

/* open state */
.zsl.is-open .zsl-lockup { transform: translateX(0); }
.zsl.is-open .zsl-card { opacity: 1; transform: none; pointer-events: auto; }

/* click-to-enter hint */
.zsl-enter-hint {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 8px;
  font-family: "Sora", sans-serif; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em; color: #5e6a84;
  opacity: 1; transition: opacity .4s ease, transform .4s ease;
}
.zsl-enter-hint svg {
  width: 15px; height: 15px; fill: none; stroke: var(--zeno-blue);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  animation: zslHintNudge 1.7s ease-in-out infinite;
}
.zsl.is-open .zsl-enter-hint { opacity: 0; transform: translateY(8px); pointer-events: none; }
@keyframes zslHintNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* mobile: stack — logo on top, card slides up (no sideways drift) */
@media (max-width: 860px) {
  .zsl.is-intro .zsl-lockup { transform: none; }
  .zsl.is-intro .zsl-card { transform: translateY(26px) scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
  .zsl-lockup, .zsl-card { transition: none !important; }
  .zsl-enter-hint svg { animation: none; }
}

/* Launchpad cards → minimal + centered (icon · title · Enter →) */
.launchpad-card {
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 18px;
  min-height: 230px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.launchpad-icon { width: 64px; height: 64px; border-radius: 17px; margin: 0; transition: transform .18s ease; }
.launchpad-icon svg { width: 32px; height: 32px; }
.launchpad-title { transition: color .18s ease; }
.launchpad-link { margin-top: 0 !important; justify-content: center; font-size: 15px; line-height: 1; }
.launchpad-link .lp-arrow { flex: none; }
/* obvious per-card hover — you can tell which card is selected */
.launchpad-card-nexus:hover {
  border-color: rgba(116,23,180,.5) !important;
  box-shadow: 0 24px 54px rgba(116,23,180,.22) !important;
}
.launchpad-card-nexus:hover .launchpad-title { color: #7417b4; }
.launchpad-card-workspace:hover {
  border-color: rgba(37,182,198,.55) !important;
  box-shadow: 0 24px 54px rgba(37,182,198,.24) !important;
}
.launchpad-card-workspace:hover .launchpad-title { color: #1189a0; }
.launchpad-card:hover .launchpad-icon { transform: scale(1.06); }

/* Launchpad: more breathing room between "Zeno OS / LAUNCHER" and the cards. */
.zeno-shell-launchpad { gap: 48px; }

/* Tighten the gap under the sign-in button: collapse the empty alerts wrapper
   and pull the (centered) Forgot-password link closer. */
.zsl-alerts { margin-top: 0; font-size: 0; }
.zsl-alerts .alert-box { font-size: 13px; }
.zsl-alerts .alert-box:first-child { margin-top: 14px; }
.zsl-forgot-center { margin-top: 14px; }

/* Tighten the button → Forgot-password gap (kill stray button/alerts spacing). */
.zsl-form .zsl-btn { margin-bottom: 0 !important; }
.zsl-form .zsl-alerts { margin: 0 !important; padding: 0 !important; }
.zsl-form .zsl-forgot-center { margin-top: 12px !important; }

/* Wrong login/password → NO text badge; the fields flag red + shake once. */
.zsl-error .zsl-field input {
  border-color: #e0402e !important;
  background: rgba(224, 64, 46, 0.05) !important;
}
.zsl-error .zsl-field input:focus {
  box-shadow: 0 0 0 4px rgba(224, 64, 46, 0.15) !important;
}
.zsl-error .zsl-field { animation: zslShake 0.5s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes zslShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}
/* keep the shake even for reduced-motion users — it's brief feedback, and it's
   the ONLY error cue now that the text is gone */
@media (prefers-reduced-motion: reduce) {
  .zsl-error .zsl-field { animation: zslShake 0.5s cubic-bezier(.36, .07, .19, .97) both; }
}