/* ATREYA_AUTH_R8R2_FLAT_DUPLICATE_ERASE
   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-r8r2-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-r8r2-active #app {
  min-height: 100dvh !important;
  background: transparent !important;
}

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

.atreya-auth-r8r2-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-r8r2-viewport {
  width: 100%;
  min-height: 870px;
  position: relative;
  overflow: hidden;
  background: #fffaf1;
}

.atreya-auth-r8r2-stage {
  width: 1808px;
  height: 870px;
  position: absolute;
  left: 50%;
  top: 0;
  transform-origin: top center;
  background: #fffaf1 url('/assets/atreya-auth-r8r2-approved-reference.png?v=r8r2') 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-r8r2-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-r8r2-hit:focus-visible {
  outline: 2px solid rgba(192,119,16,.55);
  border-radius: 12px;
}
.atreya-auth-r8r2-hit.logo { left: 202px; top: 7px; width: 220px; height: 68px; }
.atreya-auth-r8r2-hit.home { left: 505px; top: 16px; width: 62px; height: 52px; }
.atreya-auth-r8r2-hit.features { left: 578px; top: 16px; width: 86px; height: 52px; }
.atreya-auth-r8r2-hit.how { left: 668px; top: 16px; width: 111px; height: 52px; }
.atreya-auth-r8r2-hit.guruji { left: 792px; top: 16px; width: 69px; height: 52px; }
.atreya-auth-r8r2-hit.testimonials { left: 870px; top: 16px; width: 112px; height: 52px; }
.atreya-auth-r8r2-hit.pricing { left: 982px; top: 16px; width: 72px; height: 52px; }
.atreya-auth-r8r2-hit.blog { left: 1054px; top: 16px; width: 64px; height: 52px; }
.atreya-auth-r8r2-hit.login { left: 1242px; top: 18px; width: 90px; height: 48px; }
.atreya-auth-r8r2-hit.register { left: 1337px; top: 18px; width: 160px; height: 48px; }

/* R8R1 STATIC-DUPLICATE ERASERS
   The approved reference contains a photographed auth card and theme control.
   The live UI must cover those originals completely so only one functional block is visible.
   These are intentionally borderless and sit below the real live controls. */
.atreya-auth-r8r2-static-card-erase {
  position: absolute;
  z-index: 18;
  left: 1148px;
  top: 100px;
  width: 526px;
  height: 664px;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #fffdf8 0%, #fffaf1 72%, #fff9ef 100%);
  box-shadow: none;
}
.atreya-auth-r8r2-static-theme-erase {
  position: absolute;
  z-index: 18;
  left: 1588px;
  top: 752px;
  width: 214px;
  height: 92px;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #fffaf1 0%, #fff9ee 100%);
  box-shadow: none;
}

/* Exact auth-card overlay area from the approved screen. */
.atreya-auth-r8r2-card {
  position: absolute;
  z-index: 20;
  left: 1164px;
  top: 118px;
  width: 490px;
  height: 629px;
  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-r8r2-card-head {
  margin: 0 0 18px;
}
.atreya-auth-r8r2-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-r8r2-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-r8r2-card .sub {
  margin: 0;
  color: #665647 !important;
  font: 400 15px/1.42 Arial, Helvetica, sans-serif;
}

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

.atreya-auth-r8r2-fields {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px 14px;
  margin-top: 18px;
}
.atreya-auth-r8r2-field {
  min-width: 0;
  margin: 0 !important;
}
.atreya-auth-r8r2-field.span-2 { grid-column: 1 / -1; }
.atreya-auth-r8r2-field > label {
  display: block;
  margin: 0 0 7px !important;
  color: #251608 !important;
  font: 700 13px/1.15 Arial, Helvetica, sans-serif !important;
}
.atreya-auth-r8r2-control {
  min-width: 0;
  height: 52px;
  position: relative;
}
.atreya-auth-r8r2-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-r8r2-control .field-icon svg,
.atreya-auth-r8r2-password-eye svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round;
}
.atreya-auth-r8r2-control input,
.atreya-auth-r8r2-control select,
.atreya-auth-r8r2-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-r8r2-control select { appearance: auto; padding-right: 16px !important; }
.atreya-auth-r8r2-control input::placeholder,
.atreya-auth-r8r2-control textarea::placeholder { color: #938271 !important; opacity: 1 !important; }
.atreya-auth-r8r2-control input:focus,
.atreya-auth-r8r2-control select:focus,
.atreya-auth-r8r2-control textarea:focus {
  border-color: #d69a37 !important;
  box-shadow: 0 0 0 3px rgba(214,154,55,.10) !important;
}
.atreya-auth-r8r2-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-r8r2-root.is-login .atreya-auth-r8r2-fields { grid-template-columns: 1fr; gap: 15px; }
.atreya-auth-r8r2-root.is-login .atreya-auth-r8r2-card-head { margin-bottom: 14px; }
.atreya-auth-r8r2-root.is-login .atreya-auth-r8r2-field { grid-column: 1 / -1; }

.atreya-auth-r8r2-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-r8r2-remember {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  white-space: nowrap;
}
.atreya-auth-r8r2-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-r8r2-remember input:checked::after {
  content: "✓";
  color: #a75d04;
  font-size: 14px;
  font-weight: 800;
}
.atreya-auth-r8r2-login-tools a,
.atreya-auth-r8r2-account-line a {
  color: #a76006 !important;
  text-decoration: none !important;
  font-weight: 700;
}

.atreya-auth-r8r2-submit-wrap {
  position: relative;
  margin-top: 8px;
}
.atreya-auth-r8r2-submit-wrap button[type="submit"],
.atreya-auth-r8r2-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-r8r2-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-r8r2-root.is-register .atreya-auth-r8r2-submit-icon { display: none; }

.atreya-auth-r8r2-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-r8r2-divider::before,
.atreya-auth-r8r2-divider::after {
  content: "";
  height: 1px;
  background: #e6d8c1;
}
.atreya-auth-r8r2-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-r8r2-security {
  margin-top: 18px;
  text-align: center;
  color: #76695d;
  font-size: 11px;
}
.atreya-auth-r8r2-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-r8r2-root.is-register .atreya-auth-r8r2-static-card-erase { top: 94px; height: 716px; }
.atreya-auth-r8r2-root.is-register .atreya-auth-r8r2-card { height: 690px; top: 105px; padding-top: 28px; }
.atreya-auth-r8r2-root.is-register .atreya-auth-r8r2-card h1 { font-size: 42px !important; margin-top: 10px; }
.atreya-auth-r8r2-root.is-register .atreya-auth-r8r2-card .sub { font-size: 13px; line-height: 1.35; }
.atreya-auth-r8r2-root.is-register .atreya-auth-r8r2-fields { margin-top: 14px; gap: 10px 12px; }
.atreya-auth-r8r2-root.is-register .atreya-auth-r8r2-control { height: 47px; }
.atreya-auth-r8r2-root.is-register .atreya-auth-r8r2-control input,
.atreya-auth-r8r2-root.is-register .atreya-auth-r8r2-control select { height: 47px !important; min-height: 47px !important; }
.atreya-auth-r8r2-root.is-register .atreya-auth-r8r2-field > label { margin-bottom: 5px !important; font-size: 11.5px !important; }
.atreya-auth-r8r2-root.is-register .atreya-auth-r8r2-submit-wrap { margin-top: 12px; }
.atreya-auth-r8r2-root.is-register .atreya-auth-r8r2-submit-wrap button[type="submit"],
.atreya-auth-r8r2-root.is-register .atreya-auth-r8r2-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-r8r2-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-r8r2-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-r8r2-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-r8r2-viewport { display: none !important; }
  .atreya-auth-r8r2-root { overflow: visible; }
  .atreya-auth-r8r2-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-r8r2-approved-reference.png?v=r8r2') 18% top / auto 780px no-repeat,
      #fffaf1;
  }
  .atreya-auth-r8r2-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-r8r2-mobile-card .atreya-auth-r8r2-card-head h1 { font-size: 40px !important; }
  .atreya-auth-r8r2-mobile-card .atreya-auth-r8r2-fields { grid-template-columns: 1fr; }
  .atreya-auth-r8r2-mobile-card .atreya-auth-r8r2-field { grid-column: 1 / -1; }
  html[data-theme="light"] body.atreya-auth-r8r2-active .atreya-common-theme-toggle { right: 14px !important; bottom: 14px !important; transform: scale(.92); transform-origin: right bottom; }
}