.login-body {
  min-width: 320px;
  min-height: 100vh;
  color: #172033;
  background:
    radial-gradient(circle at 12% 18%, rgba(109, 94, 252, 0.12), transparent 32rem),
    radial-gradient(circle at 88% 82%, rgba(37, 155, 180, 0.12), transparent 30rem),
    linear-gradient(145deg, #f3f5fb 0%, #edf2f8 52%, #f5f2fa 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.login-main {
  min-height: 100vh;
}

.login-page {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 6.5rem 1.5rem 2.5rem;
  overflow: hidden;
}

.login-page::before,
.login-page::after {
  position: absolute;
  width: 20rem;
  height: 20rem;
  border: 1px solid rgba(79, 70, 229, 0.08);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.login-page::before { top: -11rem; right: -7rem; }
.login-page::after { bottom: -13rem; left: -6rem; }

.login-brand {
  position: absolute;
  top: 2rem;
  left: clamp(1.5rem, 4vw, 4rem);
  display: inline-flex;
  gap: 0.7rem;
  align-items: center;
  color: #20273a;
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.login-brand:hover { color: #3730a3; }

.login-brand__mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  color: #fff;
  background: linear-gradient(145deg, #635bff, #4338ca);
  border-radius: 0.65rem;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.24);
  place-items: center;
}

.login-shell {
  z-index: 1;
  width: min(100%, 420px);
  animation: login-enter 220ms ease-out both;
}

.login-card {
  padding: clamp(2rem, 6vw, 2.75rem);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 1rem;
  box-shadow: 0 22px 55px rgba(30, 41, 76, 0.12), 0 5px 16px rgba(30, 41, 76, 0.07);
  backdrop-filter: blur(10px);
}

.login-title {
  margin: 0;
  color: #161d2e;
  font-size: 1.75rem;
  font-weight: 750;
  letter-spacing: -0.035em;
}

.login-subtitle {
  margin: 0.55rem 0 2rem;
  color: #667085;
  font-size: 0.925rem;
}

.login-alert {
  margin-bottom: 1.25rem;
  padding: 0.8rem 0.9rem;
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.6rem;
  font-size: 0.875rem;
}

.login-field { margin-bottom: 1.25rem; }

.login-label {
  display: block;
  margin-bottom: 0.5rem;
  color: #344054;
  font-size: 0.875rem;
  font-weight: 650;
}

.login-input-wrap { position: relative; }

.login-input-icon {
  position: absolute;
  top: 50%;
  left: 0.9rem;
  width: 1.15rem;
  height: 1.15rem;
  color: #98a2b3;
  pointer-events: none;
  transform: translateY(-50%);
}

.login-input {
  width: 100%;
  height: 3rem;
  padding: 0.7rem 2.8rem 0.7rem 2.7rem;
  color: #172033;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 0.6rem;
  outline: 0;
  font-size: 0.95rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.login-input::placeholder { color: #98a2b3; }

.login-input:hover { border-color: #aeb6c2; }

.login-input:focus {
  border-color: #5b54e8;
  box-shadow: 0 0 0 4px rgba(91, 84, 232, 0.14), 0 2px 5px rgba(16, 24, 40, 0.05);
}

.login-input[aria-invalid="true"] { border-color: #dc2626; }

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.65rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: #667085;
  background: transparent;
  border: 0;
  border-radius: 0.4rem;
  transform: translateY(-50%);
  place-items: center;
}

.password-toggle:hover { color: #3730a3; background: #f1f0ff; }
.password-toggle:focus-visible { outline: 3px solid rgba(91, 84, 232, 0.28); }
.password-toggle svg { width: 1.15rem; height: 1.15rem; }
.password-toggle .eye-off { display: none; }
.password-toggle[aria-pressed="true"] .eye-on { display: none; }
.password-toggle[aria-pressed="true"] .eye-off { display: block; }

.login-error {
  margin: 0.4rem 0 0;
  color: #b42318;
  font-size: 0.8rem;
}

.login-options {
  display: flex;
  justify-content: flex-end;
  margin: -0.45rem 0 1.4rem;
}

.login-link {
  color: #4f46e5;
  font-size: 0.85rem;
  font-weight: 650;
  text-decoration: none;
}

.login-link:hover { color: #3730a3; text-decoration: underline; }
.login-link:focus-visible { outline: 3px solid rgba(91, 84, 232, 0.25); outline-offset: 3px; }

.login-submit {
  width: 100%;
  min-height: 3rem;
  color: #fff;
  background: #4f46e5;
  border: 1px solid #4f46e5;
  border-radius: 0.65rem;
  box-shadow: 0 5px 12px rgba(79, 70, 229, 0.2);
  font-size: 0.95rem;
  font-weight: 650;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.login-submit:hover { background: #4338ca; border-color: #4338ca; box-shadow: 0 8px 18px rgba(79, 70, 229, 0.27); transform: translateY(-1px); }
.login-submit:active { background: #3730a3; transform: translateY(0); }
.login-submit:focus-visible { outline: 3px solid rgba(91, 84, 232, 0.3); outline-offset: 3px; }

.login-divider {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  margin: 1.6rem 0 0;
  color: #7b8495;
  font-size: 0.8rem;
  text-align: center;
}

.login-divider::before,
.login-divider::after { flex: 1; height: 1px; background: #e4e7ec; content: ""; }

.login-note {
  max-width: 360px;
  margin: 1.25rem auto 0;
  color: #667085;
  font-size: 0.78rem;
  line-height: 1.55;
  text-align: center;
}

@keyframes login-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .login-page { padding: 6rem 1rem 2rem; }
  .login-brand { top: 1.5rem; left: 1.25rem; }
  .login-card { padding: 2rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .login-shell { animation: none; }
  .login-submit, .login-input { transition: none; }
}

/* Premium public signup — deliberately scoped so the existing login is unchanged. */
.signup-main { min-height: 100vh; padding: 0; }
.signup-page { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 49.5%) minmax(0, 50.5%); overflow-x: hidden; }
.signup-marketing { position: relative; display: flex; justify-content: center; overflow: hidden; padding: 2.1rem clamp(2rem, 4.3vw, 4.6rem) 1.6rem; background: radial-gradient(circle at 98% 2%, rgba(129, 140, 248, .2) 0 10rem, transparent 10.1rem), radial-gradient(circle at 96% 72%, rgba(167, 139, 250, .18), transparent 18rem), linear-gradient(145deg, #fff 0%, #f4f7ff 58%, #edf2ff 100%); }
.signup-marketing::after { position: absolute; right: -10rem; bottom: -15rem; width: 32rem; height: 32rem; border-radius: 50%; background: rgba(255,255,255,.46); content: ""; pointer-events: none; }
.signup-marketing__content { position: relative; z-index: 1; width: min(100%, 620px); }
.signup-brand { display: inline-flex; gap: .72rem; align-items: center; color: #101938; font-size: 1.3rem; font-weight: 780; letter-spacing: -.035em; text-decoration: none; }
.signup-brand:hover { color: #312e81; }
.signup-brand__mark, .signup-card__mark { display: grid; color: white; background: linear-gradient(145deg, #7166ff, #4338e8); box-shadow: 0 8px 18px rgba(79,70,229,.28); place-items: center; }
.signup-brand__mark { width: 2.4rem; height: 2.4rem; border-radius: .7rem; }
.signup-brand__mark svg, .signup-card__mark svg { width: 1.45rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2.8; }
.signup-eyebrow { margin: 2.1rem 0 .8rem; color: #5c4cf5; font-size: .72rem; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; }
.signup-value-title { margin: 0; color: #111b48; font-size: clamp(2.15rem, 3.2vw, 3.05rem); font-weight: 790; line-height: 1.08; letter-spacing: -.048em; }
.signup-value-copy { max-width: 570px; margin: .75rem 0 1.65rem; color: #556589; font-size: 1rem; line-height: 1.52; }
.signup-features { display: grid; gap: .85rem; }
.signup-feature { display: grid; grid-template-columns: 3.35rem 1fr; gap: 1rem; align-items: center; }
.signup-feature__icon { display: grid; width: 3.35rem; height: 3.35rem; border-radius: .8rem; place-items: center; }
.signup-feature__icon svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.signup-feature__icon--violet { color: #6339ee; background: #e8e1ff; }
.signup-feature__icon--blue { color: #287bf5; background: #dceaff; }
.signup-feature__icon--green { color: #17a77d; background: #d9f5ec; }
.signup-feature h2 { margin: 0 0 .12rem; color: #15204b; font-size: .98rem; font-weight: 760; }
.signup-feature p { max-width: 470px; margin: 0; color: #58698e; font-size: .88rem; line-height: 1.42; }
.signup-editor { position: relative; width: min(78%, 410px); margin: 1.45rem auto 0; }
.signup-editor__window { padding: .75rem .85rem .85rem; background: rgba(255,255,255,.92); border: 1px solid rgba(143,157,205,.18); border-radius: 1rem; box-shadow: 0 20px 38px rgba(69,79,139,.14); }
.signup-editor__bar { display: flex; gap: .3rem; height: .75rem; }
.signup-editor__bar i { width: .48rem; height: .48rem; border-radius: 50%; background: #fc6471; }
.signup-editor__bar i:nth-child(2) { background: #f4cc5b; }.signup-editor__bar i:nth-child(3) { background: #57c98d; }
.signup-editor__workspace { display: grid; grid-template-columns: 2.6rem 1fr; gap: .65rem; height: 7.2rem; }
.signup-editor__slides { display: grid; gap: .4rem; }.signup-editor__slides span { border-radius: .28rem; background: linear-gradient(145deg,#e5e9f8,#c5cdf2); }.signup-editor__slides span:first-child { outline: 2px solid #7569f8; }
.signup-editor__stage { display: grid; border-radius: .42rem; background: linear-gradient(145deg,#dcd9ff,#9da8f3); place-items: center; }
.signup-editor__play { display: grid; width: 2.25rem; height: 2.25rem; color: #fff; background: #6957f5; border-radius: 50%; box-shadow: 0 6px 12px rgba(79,70,229,.25); place-items: center; }
.signup-editor__play svg { width: 1.2rem; fill: currentColor; }.signup-editor__timeline { display: flex; height: 1.15rem; margin: .65rem 0 0 3.25rem; overflow: hidden; border-radius: .3rem; }.signup-editor__timeline span { flex: 1; background: #d4bdfb; }.signup-editor__timeline span:nth-child(2){background:#adc5fb}.signup-editor__timeline span:nth-child(3){background:#abebd6}
.signup-editor__note { position: absolute; right: -5.7rem; bottom: 3.2rem; display: flex; gap: .6rem; align-items: center; padding: .85rem 1.1rem; color: #17204b; background: #fff; border-radius: .8rem; box-shadow: 0 12px 28px rgba(72,78,135,.15); font-size: .72rem; line-height: 1.35; transform: rotate(6deg); }
.signup-editor__note svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: #5c46f2; stroke-linejoin: round; stroke-width: 1.6; }
.signup-trust { display: flex; gap: .55rem; align-items: center; margin: 1.45rem 0 0; color: #5d6d91; font-size: .77rem; }.signup-trust svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: #5364f3; stroke-width: 1.7; }

.signup-form-panel { position: relative; display: flex; align-items: center; justify-content: center; padding: 5.4rem clamp(1.5rem,4vw,4rem) 2rem; background: radial-gradient(circle at 80% 19%, rgba(240,210,247,.32), transparent 20rem), linear-gradient(150deg,#f7faff,#fff 52%,#f7f5ff); }
.signup-signin { position: absolute; top: 2rem; right: clamp(1.5rem,4vw,4rem); display: flex; gap: 1rem; align-items: center; color: #607096; font-size: .86rem; }
.signup-signin a { padding: .55rem 1.15rem; color: #4338e8; border: 1px solid #ccd3e8; border-radius: .65rem; background: rgba(255,255,255,.72); font-weight: 700; text-decoration: none; }
.signup-signin a:hover { border-color: #7c73ef; background: #fff; }.signup-signin a:focus-visible, .signup-mobile-signin a:focus-visible { outline: 3px solid rgba(91,84,232,.25); outline-offset: 3px; }
.signup-card { width: min(100%, 590px); padding: 1.8rem clamp(1.7rem,3vw,3.2rem) 1.7rem; background: rgba(255,255,255,.97); border: 1px solid #e6e9f3; border-radius: 1.25rem; box-shadow: 0 20px 55px rgba(48,56,100,.1); }
.signup-card__mark { width: 3.15rem; height: 3.15rem; margin: 0 auto 1.15rem; border: 7px solid #eeecff; border-radius: .9rem; }.signup-card__mark svg { width: 1.35rem; }
.signup-card h2 { margin: 0; color: #111938; font-size: 1.62rem; font-weight: 780; letter-spacing: -.04em; text-align: center; }
.signup-card__subtitle { margin: .4rem 0 1.35rem; color: #66749a; font-size: .88rem; text-align: center; }
.signup-form .login-field { margin-bottom: .82rem; }.signup-form .login-label { margin-bottom: .35rem; color: #303b61; font-size: .82rem; }.signup-form .login-input { height: 3.25rem; border-radius: .7rem; }.signup-form .login-input-icon, .signup-form .password-toggle svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.signup-password-help { display: flex; gap: .35rem; align-items: center; margin: .35rem 0 0; color: #68779a; font-size: .69rem; line-height: 1.35; }.signup-password-help svg { flex: 0 0 auto; width: .9rem; height: .9rem; fill: none; stroke: #20b981; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.signup-submit { display: flex; gap: .7rem; align-items: center; justify-content: center; min-height: 3.35rem; margin-top: .3rem; background: linear-gradient(105deg,#4937f0,#5541e8); border: 0; border-radius: .72rem; }.signup-submit svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.signup-submit:disabled { cursor: wait; opacity: .72; transform: none; }
.signup-card .login-divider { margin-top: 1.2rem; }.signup-legal { margin: 1rem 0 0; color: #7c89a8; font-size: .72rem; line-height: 1.55; text-align: center; }.signup-legal span { color: #4939df; font-weight: 600; }.signup-mobile-signin { display: none; }

@media (max-width: 1100px) { .signup-marketing { padding-right: 2.3rem; padding-left: 2.3rem; }.signup-editor__note { right: -2rem; }.signup-value-title { font-size: 2.3rem; } }
@media (max-width: 900px) {
  .signup-page { display: flex; flex-direction: column; }
  .signup-form-panel { order: 1; min-height: 100vh; padding: 5rem 1.25rem 2rem; }
  .signup-marketing { order: 2; padding: 2rem 1.5rem; }.signup-marketing__content { width: min(100%,620px); margin: auto; }.signup-brand, .signup-eyebrow, .signup-editor, .signup-trust { display: none; }.signup-value-title { font-size: 2rem; }.signup-features { margin-top: 1.5rem; }
}
@media (max-width: 560px) {
  .signup-form-panel { min-height: 100vh; padding: 1.25rem; align-items: flex-start; }.signup-signin { display: none; }.signup-card { padding: 1.5rem 1.25rem; border-radius: 1rem; }.signup-card h2 { font-size: 1.45rem; }.signup-mobile-signin { display: block; margin: 1rem 0 0; color: #697695; font-size: .78rem; text-align: center; }.signup-mobile-signin a { color: #4939df; font-weight: 700; text-decoration: none; }.signup-marketing { padding: 2.2rem 1.25rem; }.signup-feature { grid-template-columns: 3rem 1fr; }.signup-feature__icon { width: 3rem; height: 3rem; }
}
.login-brand,.signup-brand{gap:0;font-size:inherit;font-weight:inherit;letter-spacing:normal}.login-brand__mark,.signup-brand__mark{display:none}.signup-card__mark{width:auto;height:auto;margin:0 auto 1.15rem;background:none;border:0;border-radius:0;box-shadow:none}.signup-card__mark .demlivo-logo__mark{width:48px;height:48px}