/* ATREYA_AUTH_R8_APPROVED_SANCTUARY_EXACT
   Approved-screen implementation.
   Desktop uses the approved 1808x870 visual as the exact stage skin,
   while the live authentication form is rebuilt over the card area.
   Existing auth handlers and theme continuity are preserved.
*/

html[data-theme="light"] body.atreya-auth-r8-active {
  margin: 0 !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  background: #fffaf1 !important;
  color: #261407 !important;
}
html[data-theme="light"] body.atreya-auth-r8-active #app {
  min-height: 100dvh !important;
  background: transparent !important;
}

.atreya-auth-r8-root,
.atreya-auth-r8-root * { box-sizing: border-box; }

.atreya-auth-r8-root {
  width: 100%;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  background: #fffaf1;
}

/* Outer viewport keeps transformed 1808 x 870 stage in normal page flow. */
.atreya-auth-r8-viewport {
  width: 100%;
  min-height: 870px;
  position: relative;
  overflow: hidden;
  background: #fffaf1;
}

.atreya-auth-r8-stage {
  width: 1808px;
  height: 870px;
  position: absolute;
  left: 50%;
  top: 0;
  transform-origin: top center;
  background: #fffaf1 url('/assets/atreya-auth-r8-approved-reference.png?v=r8') center top / 1808px 870px no-repeat;
  font-family: Arial, Helvetica, sans-serif;
}

/* The approved image already contains the exact header. These transparent hit areas
   preserve navigation without redrawing or disturbing the approved appearance. */
.atreya-auth-r8-hit {
  position: absolute;
  z-index: 30;
  display: block;
  background: transparent;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  color: transparent !important;
  font-size: 0;
  outline-offset: 2px;
}
.atreya-auth-r8-hit:focus-visible {
  outline: 2px solid rgba(192,119,16,.55);
  border-radius: 12px;
}
.atreya-auth-r8-hit.logo { left: 202px; top: 7px; width: 220px; height: 68px; }
.atreya-auth-r8-hit.home { left: 505px; top: 16px; width: 62px; height: 52px; }
.atreya-auth-r8-hit.features { left: 578px; top: 16px; width: 86px; height: 52px; }
.atreya-auth-r8-hit.how { left: 668px; top: 16px; width: 111px; height: 52px; }
.atreya-auth-r8-hit.guruji { left: 792px; top: 16px; width: 69px; height: 52px; }
.atreya-auth-r8-hit.testimonials { left: 870px; top: 16px; width: 112px; height: 52px; }
.atreya-auth-r8-hit.pricing { left: 982px; top: 16px; width: 72px; height: 52px; }
.atreya-auth-r8-hit.blog { left: 1054px; top: 16px; width: 64px; height: 52px; }
.atreya-auth-r8-hit.login { left: 1242px; top: 18px; width: 90px; height: 48px; }
.atreya-auth-r8-hit.register { left: 1337px; top: 18px; width: 160px; height: 48px; }

/* Exact auth-card overlay area from the approved screen. */
.atreya-auth-r8-card {
  position: absolute;
  z-index: 20;
  left: 1165px;
  top: 119px;
  width: 488px;
  height: 627px;
  padding: 34px 38px 27px;
  overflow: hidden;
  border: 1px solid rgba(218,168,85,.70);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 6%, rgba(255,233,178,.17), transparent 25%),
    linear-gradient(145deg, rgba(255,255,252,.995), rgba(255,249,237,.995));
  box-shadow: 0 24px 58px rgba(113,69,11,.11);
  color: #251307;
}

.atreya-auth-r8-card-head {
  margin: 0 0 18px;
}
.atreya-auth-r8-pill {
  display: inline-flex;
  height: 34px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid #e3c68e;
  border-radius: 999px;
  background: #fff9e9;
  color: #8b5509;
  font: 800 10.5px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 1.45px;
  text-transform: uppercase;
}
.atreya-auth-r8-card h1 {
  margin: 14px 0 10px;
  color: #241204 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 49px !important;
  line-height: .98 !important;
  font-weight: 700 !important;
  letter-spacing: -2.1px !important;
}
.atreya-auth-r8-card .sub {
  margin: 0;
  color: #665647 !important;
  font: 400 15px/1.42 Arial, Helvetica, sans-serif;
}

.atreya-auth-r8-live,
.atreya-auth-r8-live form {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.atreya-auth-r8-live form > :where(h1,h2,h3,p) { display: none !important; }
.atreya-auth-r8-hidden { display: none !important; }

.atreya-auth-r8-fields {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px 14px;
  margin-top: 18px;
}
.atreya-auth-r8-field {
  min-width: 0;
  margin: 0 !important;
}
.atreya-auth-r8-field.span-2 { grid-column: 1 / -1; }
.atreya-auth-r8-field > label {
  display: block;
  margin: 0 0 7px !important;
  color: #251608 !important;
  font: 700 13px/1.15 Arial, Helvetica, sans-serif !important;
}
.atreya-auth-r8-control {
  min-width: 0;
  height: 52px;
  position: relative;
}
.atreya-auth-r8-control .field-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  z-index: 2;
  width: 19px;
  height: 19px;
  transform: translateY(-50%);
  color: #a7640a;
  pointer-events: none;
}
.atreya-auth-r8-control .field-icon svg,
.atreya-auth-r8-password-eye svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round;
}
.atreya-auth-r8-control input,
.atreya-auth-r8-control select,
.atreya-auth-r8-control textarea {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 42px 0 48px !important;
  border: 1px solid #e3cda7 !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.96) !important;
  color: #2a1a0d !important;
  font: 400 14px/1 Arial, Helvetica, sans-serif !important;
  outline: none !important;
  box-shadow: none !important;
}
.atreya-auth-r8-control select { appearance: auto; padding-right: 16px !important; }
.atreya-auth-r8-control input::placeholder,
.atreya-auth-r8-control textarea::placeholder { color: #938271 !important; opacity: 1 !important; }
.atreya-auth-r8-control input:focus,
.atreya-auth-r8-control select:focus,
.atreya-auth-r8-control textarea:focus {
  border-color: #d69a37 !important;
  box-shadow: 0 0 0 3px rgba(214,154,55,.10) !important;
}
.atreya-auth-r8-password-eye {
  width: 27px; height: 27px;
  position: absolute; z-index: 3; right: 12px; top: 50%; transform: translateY(-50%);
  padding: 4px; border: 0; background: transparent; color: #a5640c; cursor: pointer;
}

/* Login exact rhythm */
.atreya-auth-r8-root.is-login .atreya-auth-r8-fields { grid-template-columns: 1fr; gap: 15px; }
.atreya-auth-r8-root.is-login .atreya-auth-r8-card-head { margin-bottom: 14px; }
.atreya-auth-r8-root.is-login .atreya-auth-r8-field { grid-column: 1 / -1; }

.atreya-auth-r8-login-tools {
  height: 40px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #493b2f;
  font-size: 13px;
}
.atreya-auth-r8-remember {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  white-space: nowrap;
}
.atreya-auth-r8-remember input {
  appearance: none;
  width: 20px; height: 20px;
  margin: 0;
  border: 1.5px solid #c27a15;
  border-radius: 4px;
  background: #fff;
  display: grid;
  place-items: center;
}
.atreya-auth-r8-remember input:checked::after {
  content: "✓";
  color: #a75d04;
  font-size: 14px;
  font-weight: 800;
}
.atreya-auth-r8-login-tools a,
.atreya-auth-r8-account-line a {
  color: #a76006 !important;
  text-decoration: none !important;
  font-weight: 700;
}

.atreya-auth-r8-submit-wrap {
  position: relative;
  margin-top: 8px;
}
.atreya-auth-r8-submit-wrap button[type="submit"],
.atreya-auth-r8-submit-wrap input[type="submit"] {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  border: 1px solid #df9c29 !important;
  border-radius: 13px !important;
  background: linear-gradient(96deg,#ffe08c 0%,#f1a91f 100%) !important;
  color: #1f1204 !important;
  font: 800 17px/1 Arial, Helvetica, sans-serif !important;
  box-shadow: 0 10px 22px rgba(204,130,18,.19) !important;
  cursor: pointer;
}
.atreya-auth-r8-submit-icon {
  position: absolute;
  left: 118px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: #271603;
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
}
.atreya-auth-r8-root.is-register .atreya-auth-r8-submit-icon { display: none; }

.atreya-auth-r8-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 19px 0 14px;
  color: #685747;
  font-size: 12px;
}
.atreya-auth-r8-divider::before,
.atreya-auth-r8-divider::after {
  content: "";
  height: 1px;
  background: #e6d8c1;
}
.atreya-auth-r8-secondary {
  width: 100%;
  height: 52px;
  border: 1px solid #dfa74d;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: rgba(255,255,255,.55);
  color: #a26008 !important;
  text-decoration: none !important;
  font-weight: 800;
  font-size: 14px;
}
.atreya-auth-r8-security {
  margin-top: 18px;
  text-align: center;
  color: #76695d;
  font-size: 11px;
}
.atreya-auth-r8-account-line {
  margin-top: 14px;
  text-align: center;
  color: #5f5042;
  font-size: 12.5px;
}

/* Register is the same approved visual language, compacted into the same screen card. */
.atreya-auth-r8-root.is-register .atreya-auth-r8-card { height: 690px; top: 105px; padding-top: 28px; }
.atreya-auth-r8-root.is-register .atreya-auth-r8-card h1 { font-size: 42px !important; margin-top: 10px; }
.atreya-auth-r8-root.is-register .atreya-auth-r8-card .sub { font-size: 13px; line-height: 1.35; }
.atreya-auth-r8-root.is-register .atreya-auth-r8-fields { margin-top: 14px; gap: 10px 12px; }
.atreya-auth-r8-root.is-register .atreya-auth-r8-control { height: 47px; }
.atreya-auth-r8-root.is-register .atreya-auth-r8-control input,
.atreya-auth-r8-root.is-register .atreya-auth-r8-control select { height: 47px !important; min-height: 47px !important; }
.atreya-auth-r8-root.is-register .atreya-auth-r8-field > label { margin-bottom: 5px !important; font-size: 11.5px !important; }
.atreya-auth-r8-root.is-register .atreya-auth-r8-submit-wrap { margin-top: 12px; }
.atreya-auth-r8-root.is-register .atreya-auth-r8-submit-wrap button[type="submit"],
.atreya-auth-r8-root.is-register .atreya-auth-r8-submit-wrap input[type="submit"] { height: 50px !important; min-height: 50px !important; font-size: 15px !important; }

/* Existing common theme switcher, styled to the approved visual. */
html[data-theme="light"] body.atreya-auth-r8-active .atreya-common-theme-toggle {
  position: fixed !important;
  right: 28px !important;
  bottom: 28px !important;
  z-index: 9999 !important;
  min-width: 143px !important;
  height: 54px !important;
  padding: 6px 18px 6px 8px !important;
  border: 1px solid #e6d6bb !important;
  border-radius: 999px !important;
  background: rgba(255,253,247,.96) !important;
  box-shadow: 0 12px 28px rgba(101,62,10,.11) !important;
  color: #6c4515 !important;
}
html[data-theme="light"] body.atreya-auth-r8-active .atreya-common-theme-toggle .atreya-theme-icon {
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
  background: #062d63 !important; color: #ffe78f !important;
}

/* At desktop sizes the exact stage is scaled uniformly by JS. */
@media (min-width: 1180px) {
  .atreya-auth-r8-mobile { display: none !important; }
}

/* Responsive fallback keeps the same approved brand when a full 1808px stage would be too small. */
@media (max-width: 1179px) {
  .atreya-auth-r8-viewport { display: none !important; }
  .atreya-auth-r8-root { overflow: visible; }
  .atreya-auth-r8-mobile {
    display: block;
    min-height: 100dvh;
    padding: 22px 16px 90px;
    background:
      linear-gradient(rgba(255,252,244,.22), rgba(255,252,244,.55)),
      url('/assets/atreya-auth-r8-approved-reference.png?v=r8') 18% top / auto 780px no-repeat,
      #fffaf1;
  }
  .atreya-auth-r8-mobile-card {
    width: min(100%, 560px);
    margin: 300px auto 0;
    padding: 28px 22px 24px;
    border: 1px solid rgba(218,168,85,.75);
    border-radius: 25px;
    background: rgba(255,253,247,.98);
    box-shadow: 0 24px 58px rgba(113,69,11,.12);
  }
  .atreya-auth-r8-mobile-card .atreya-auth-r8-card-head h1 { font-size: 40px !important; }
  .atreya-auth-r8-mobile-card .atreya-auth-r8-fields { grid-template-columns: 1fr; }
  .atreya-auth-r8-mobile-card .atreya-auth-r8-field { grid-column: 1 / -1; }
  html[data-theme="light"] body.atreya-auth-r8-active .atreya-common-theme-toggle { right: 14px !important; bottom: 14px !important; transform: scale(.92); transform-origin: right bottom; }
}