:root {
  color-scheme: dark;
  --black: #050504;
  --charcoal: #0d0b09;
  --ivory: #f5eee4;
  --soft-ivory: #ded1bd;
  --muted: #9d9386;
  --gold: #ffe2a8;
  --champagne: #f3c982;
  --amber: #d99a52;
  --rose: #c88178;
  --line: rgba(243, 217, 177, 0.18);
  --line-strong: rgba(243, 217, 177, 0.34);
}

* { box-sizing: border-box; }

html { min-width: 320px; min-height: 100%; background: var(--black); }

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ivory);
  background:
    radial-gradient(circle at 72% 22%, rgba(217, 154, 82, 0.1), transparent 31%),
    radial-gradient(circle at 17% 81%, rgba(200, 129, 120, 0.055), transparent 28%),
    var(--black);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    radial-gradient(circle at 12% 17%, rgba(255, 238, 207, 0.5) 0 1px, transparent 1.4px),
    radial-gradient(circle at 78% 31%, rgba(243, 201, 130, 0.34) 0 1px, transparent 1.4px),
    radial-gradient(circle at 39% 72%, rgba(255, 244, 224, 0.3) 0 1px, transparent 1.4px),
    radial-gradient(circle at 91% 84%, rgba(200, 129, 120, 0.3) 0 1px, transparent 1.4px);
  background-size: 290px 290px, 410px 410px, 510px 510px, 650px 650px;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

:focus-visible { outline: 1px solid var(--champagne); outline-offset: 4px; }

.auth-page {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  justify-content: center;
  padding: 18px 24px 24px;
}

.auth-page::before {
  content: "";
  position: fixed;
  z-index: 0;
  top: 42%;
  left: 50%;
  width: min(900px, 92vw);
  height: min(720px, 84vh);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(217, 154, 82, 0.075), rgba(200, 129, 120, 0.022) 42%, transparent 72%);
  filter: blur(12px);
}

.auth-panel-wrap { position: relative; z-index: 1; width: min(100%, 560px); margin: auto 0; }
.auth-panel { width: 100%; }

.auth-back {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  color: rgba(222, 209, 189, 0.72);
  font-size: 12px;
  transition: color 250ms ease, transform 250ms ease;
}
.auth-back:hover { color: var(--ivory); transform: translateX(-2px); }

.legarya-brand { display: inline-flex; align-items: baseline; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(34px, 3vw, 36px); font-weight: 600; line-height: 0.9; }
.legarya-prefix { color: var(--ivory); text-shadow: 0 1px 8px rgba(255, 240, 220, 0.05); }
.legarya-word { display: inline-flex; align-items: baseline; white-space: nowrap; }
.rya-glow {
  color: var(--gold);
  text-shadow: 0 0 4px rgba(255, 238, 200, 0.7), 0 0 10px rgba(243, 201, 130, 0.52), 0 0 22px rgba(217, 154, 82, 0.3), 0 0 38px rgba(200, 129, 120, 0.1);
}
.byline { margin: 5px 0 0; color: var(--muted); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }

.auth-heading { margin-top: 22px; }
.auth-heading h1 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(36px, 3.6vw, 46px); font-weight: 400; line-height: 0.98; }
.auth-heading p { max-width: 460px; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.auth-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 18px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(14, 12, 10, 0.68); }
.auth-mode {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  transition: color 280ms ease, background 280ms ease, box-shadow 280ms ease;
}
.auth-mode[aria-selected="true"] { color: #171109; background: linear-gradient(145deg, #fff0d2, #f3c982); box-shadow: inset 0 1px rgba(255,255,255,.48), 0 5px 18px rgba(217,154,82,.13); }

.provider-stack { margin-top: 14px; }
.google-signin { display: flex; width: min(100%, 400px); min-height: 44px; justify-content: center; margin-inline: auto; overflow: hidden; border-radius: 999px; }
.google-signin > div, .google-signin iframe { display: block; max-width: 100% !important; margin-inline: auto !important; }
.google-placeholder { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 999px; color: var(--soft-ivory); background: rgba(12, 10, 8, 0.74); }

.auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 13px; margin: 13px 0; }
.auth-divider span { height: 1px; background: var(--line); }
.auth-divider p { margin: 0; color: var(--muted); font-size: 10px; text-transform: uppercase; }

.auth-form { display: grid; gap: 12px; }
.form-group { display: grid; gap: 6px; }
.form-label-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
label { color: var(--soft-ivory); font-size: 12px; }
input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(243, 217, 177, 0.18);
  border-radius: 9px;
  outline: none;
  color: var(--ivory);
  background: linear-gradient(180deg, rgba(255, 244, 224, 0.045), rgba(11, 9, 8, 0.74));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  transition: border-color 250ms ease, box-shadow 250ms ease, background 250ms ease;
}
input::placeholder { color: rgba(157, 147, 134, 0.58); }
input:focus { border-color: rgba(255, 226, 168, 0.5); background: rgba(20, 16, 12, 0.82); box-shadow: 0 0 0 3px rgba(243, 201, 130, 0.07), 0 0 18px rgba(217, 154, 82, 0.06); }

.password-field { position: relative; }
.password-field input { padding-right: 68px; }
.password-toggle, .text-link {
  min-height: 44px;
  border: 0;
  color: var(--champagne);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
}
.password-toggle { position: absolute; top: 1px; right: 8px; padding: 0 8px; }
.text-link:hover { color: var(--gold); }

.check-row { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.check-row input { width: 17px; height: 17px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--champagne); }
.check-row a { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(243, 201, 130, 0.35); text-underline-offset: 3px; }

.auth-submit, .secondary-action {
  display: inline-flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: transform 300ms cubic-bezier(.22,1,.36,1), box-shadow 300ms ease, border-color 300ms ease, background 300ms ease;
}
.auth-submit { border: 1px solid rgba(255,236,202,.72); color: #171109; background: linear-gradient(145deg, #fff0d2, #f5d69a 48%, #e9b96d); box-shadow: inset 0 1px rgba(255,255,255,.5), 0 8px 25px rgba(217,154,82,.17), 0 0 20px rgba(255,226,168,.09); }
.secondary-action { border: 1px solid var(--line-strong); color: var(--soft-ivory); background: rgba(15, 12, 10, 0.6); }
.auth-submit:hover, .secondary-action:hover { transform: translateY(-2px); }
.auth-submit:hover { box-shadow: inset 0 1px rgba(255,255,255,.62), 0 12px 31px rgba(217,154,82,.23), 0 0 28px rgba(255,226,168,.15); }
.secondary-action:hover { border-color: rgba(255,229,188,.56); box-shadow: 0 8px 25px rgba(217,154,82,.1); }
.auth-submit:disabled, .secondary-action:disabled { cursor: wait; opacity: 0.55; transform: none; }

.auth-toggle { margin: 10px 0 0; color: var(--muted); text-align: center; font-size: 11px; }
.auth-toggle button { min-height: 44px; padding: 0 7px; border: 0; color: var(--gold); background: transparent; cursor: pointer; }
.auth-message { min-height: 18px; margin: 4px 0 0; color: var(--champagne); text-align: center; font-size: 11px; line-height: 1.45; }
.auth-message:empty { min-height: 0; margin-top: 0; }
.auth-message.error-state { color: #e7a49c; }

.auth-dialog { width: min(calc(100% - 32px), 440px); padding: 0; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--ivory); background: rgba(10, 8, 7, 0.98); box-shadow: 0 24px 90px rgba(0,0,0,.7), 0 0 45px rgba(217,154,82,.1); }
.auth-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(8px); }
.dialog-card { padding: 30px; }
.dialog-card h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; font-weight: 400; }
.dialog-card > p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }

.single-auth .auth-heading { margin-top: 24px; }
.single-auth .auth-form { margin-top: 20px; }
.otp-input { text-align: center; font-size: 22px; letter-spacing: 0.28em; }

.legal-shell { width: min(calc(100% - 40px), 900px); margin: 0 auto; padding: 38px 0 90px; }
.legal-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.legal-header .legarya-brand { font-size: 32px; }
.legal-return { min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); font-size: 12px; }
.legal-return:hover { color: var(--ivory); }
.legal-document { padding-top: 70px; }
.legal-eyebrow { color: var(--champagne); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.legal-document h1 { margin: 14px 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(48px, 8vw, 76px); font-weight: 400; }
.legal-updated { color: var(--muted); font-size: 12px; }
.legal-document section { margin-top: 45px; }
.legal-document h2 { margin: 0; color: var(--soft-ivory); font-family: "Cormorant Garamond", Georgia, serif; font-size: 28px; font-weight: 400; }
.legal-document p { color: var(--muted); font-size: 14px; line-height: 1.8; }
.legal-document a { color: var(--gold); }
.legal-confirmation { margin-top: 55px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--soft-ivory) !important; }

@media (max-width: 520px) {
  .auth-page { padding: 24px 20px 38px; }
  .auth-back { margin-bottom: 14px; }
  .legarya-brand { font-size: 36px; }
  .auth-heading { margin-top: 26px; }
  .auth-heading h1 { font-size: clamp(38px, 12vw, 42px); }
  .auth-heading p { margin-top: 10px; font-size: 13px; line-height: 1.6; }
  .auth-modes { margin-top: 20px; }
  .provider-stack { margin-top: 16px; }
  .auth-divider { margin: 15px 0; }
  .auth-form { gap: 14px; }
  input[type="text"], input[type="email"], input[type="password"] { min-height: 48px; }
  .password-toggle { top: 2px; }
  .auth-submit, .secondary-action { min-height: 48px; }
  .auth-toggle { margin-top: 14px; font-size: 12px; }
  .dialog-actions { grid-template-columns: 1fr; }
  .legal-header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .legal-document { padding-top: 45px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
