/* V33 / V74 — Stable login alignment and Sagroth graphite/burgundy theme. */
html[data-active-view="login"],
html[data-active-view="login"] body {
  background: #171719 !important;
}

html[data-active-view="login"] #inner-page-shell {
  isolation: isolate;
  background:
    radial-gradient(ellipse 34% 58% at 0% 34%, rgba(113,32,43,.12), transparent 72%),
    radial-gradient(ellipse 32% 54% at 100% 66%, rgba(99,29,39,.09), transparent 74%),
    radial-gradient(ellipse at 50% 0%, #2a2a2c 0%, #1e1e20 42%, #171719 100%) !important;
}

html[data-active-view="login"] #inner-page-shell::before {
  content: "";
  display: block !important;
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(177,52,65,.24), transparent) left 11% top 190px / 76px 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(177,52,65,.19), transparent) right 11% top 70% / 76px 1px no-repeat,
    radial-gradient(circle at -5% 34%, transparent 0 215px, rgba(172,68,78,.045) 216px 217px, transparent 218px),
    radial-gradient(circle at 105% 68%, transparent 0 235px, rgba(172,68,78,.04) 236px 237px, transparent 238px);
}

html[data-active-view="login"] #inner-page-shell::after {
  content: "";
  display: block !important;
  position: absolute;
  z-index: 0;
  inset: 104px max(26px, calc(50% - 610px)) 48px;
  pointer-events: none;
  border-right: 1px solid rgba(185,185,190,.04);
  border-left: 1px solid rgba(185,185,190,.04);
  background: linear-gradient(90deg, rgba(130,42,53,.02), transparent 9%, transparent 91%, rgba(130,42,53,.02));
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 84%, transparent);
}

html[data-active-view="login"] .inner-page-body {
  position: relative;
  z-index: 1;
}

/* One owner for horizontal geometry: title and card can no longer diverge. */
html:not([data-active-view]) body.s2-auth-document .login-layout {
  display: block !important;
  width: min(520px, 100%) !important;
  max-width: 520px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

html:not([data-active-view]) body.s2-auth-document .login-layout > .s2-auth-title,
html:not([data-active-view]) body.s2-auth-document .login-layout > .login-card {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  box-sizing: border-box;
}

.s2-auth-document .s2-auth-title {
  border-bottom-color: #3e3e42;
}

.s2-auth-document .s2-auth-icon {
  border-color: #48484d;
  background: linear-gradient(145deg, #2b2b2e, #232326);
  color: #d7d7db;
}

.s2-auth-document .s2-auth-title h1 {
  color: #ededee;
}

.s2-auth-document .s2-auth-title p {
  color: #aaa9ae;
}

html:not([data-active-view]) body.s2-auth-document .login-card {
  border-color: #414146 !important;
  background: linear-gradient(145deg, #272729, #202022) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.018) !important;
}

html:not([data-active-view]) body.s2-auth-document .field input {
  border-color: #48484d !important;
  background: #19191b !important;
  color: #ededee !important;
}

html:not([data-active-view]) body.s2-auth-document .field input::placeholder {
  color: #aaa9ae !important;
}

html:not([data-active-view]) body.s2-auth-document .field input:focus {
  border-color: #96515a !important;
  background: #1e1d1f !important;
  outline: 0 !important;
  box-shadow: 0 0 0 1px rgba(150,81,90,.1) !important;
}

.s2-auth-document .field-symbol {
  color: #c9c9ce !important;
}

html:not([data-active-view]) body.s2-auth-document .toggle-password {
  border-left-color: #414146;
  color: #b8b8be;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

html:not([data-active-view]) body.s2-auth-document .toggle-password:hover {
  border-left-color: #6f4b51;
  background: rgba(137,43,54,.13);
  color: #e0afb5;
}

html:not([data-active-view]) body.s2-auth-document .login-card .submit-button {
  border-color: #ae535d !important;
  background: linear-gradient(#99323e, #782630) !important;
  color: #fff !important;
  box-shadow: inset 0 1px rgba(255,255,255,.08) !important;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

html:not([data-active-view]) body.s2-auth-document .login-card .submit-button:hover {
  border-color: #c27680 !important;
  background: linear-gradient(#aa414d, #8d303b) !important;
  transform: translateY(-1px);
}

.s2-auth-document .login-links {
  margin-top: 14px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  gap: 2px !important;
  line-height: 1.45;
  color: #aaa9ae;
}

html:not([data-active-view]) body.s2-auth-document .login-links a {
  color: #dedee2 !important;
  text-decoration-color: #dedee2;
  transition: color .16s ease, text-decoration-color .16s ease;
}

html:not([data-active-view]) body.s2-auth-document .login-links a:hover {
  color: #f2c7cc !important;
  text-decoration-color: #c27680;
}

html:not([data-active-view]) body.s2-auth-document :is(button, a):focus-visible {
  outline: 2px solid #d3a0a5 !important;
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  html[data-active-view="login"] #inner-page-shell {
    background: radial-gradient(ellipse at 50% 0%, #29292b 0%, #1e1e20 43%, #171719 100%) !important;
  }

  html[data-active-view="login"] #inner-page-shell::before,
  html[data-active-view="login"] #inner-page-shell::after {
    display: none !important;
  }
}

@media (max-width: 600px) {
  html:not([data-active-view]) body.s2-auth-document .login-layout {
    width: 100% !important;
  }

  .s2-auth-document .s2-auth-title {
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s2-auth-document .toggle-password,
  .s2-auth-document .submit-button,
  .s2-auth-document .login-links a {
    transition: none !important;
  }
}