:root {
  --auth-bg: #f4f8f3;
  --auth-bg-soft: #eef5ec;
  --auth-mint: #dcebdd;
  --auth-mint-strong: #c5dec8;
  --auth-green: #5d8f68;
  --auth-green-deep: #294d36;
  --auth-surface: rgba(255, 255, 255, 0.78);
  --auth-surface-solid: #fffdfc;
  --auth-border: rgba(71, 110, 79, 0.16);
  --auth-text: #173124;
  --auth-muted: #6e7e72;
  --auth-highlight: rgba(255, 255, 255, 0.72);
  --auth-danger: #a84f4d;
  --auth-danger-bg: #fff3f0;
  --auth-success: #3d7655;
  --auth-success-bg: #f0faf2;
  --auth-shadow: rgba(41, 77, 54, 0.09);
}

.auth-portal {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--auth-text);
  background: var(--auth-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.auth-portal * { box-sizing: border-box; }
.auth-portal a { color: inherit; }
.auth-portal [x-cloak] { display: none !important; }

.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(480px, 0.94fr);
  min-height: 100vh;
}

.auth-story {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-right: 1px solid var(--auth-border);
  padding: clamp(2rem, 5vw, 5.5rem);
  color: var(--auth-green-deep);
  background:
    radial-gradient(circle at 76% 12%, rgba(255, 255, 255, 0.88), transparent 26%),
    radial-gradient(circle at 8% 88%, rgba(197, 222, 200, 0.64), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(238, 245, 236, 0.76));
  backdrop-filter: blur(18px);
  box-shadow: inset -1px 0 0 var(--auth-highlight), 1.25rem 0 3rem rgba(83, 119, 89, 0.035);
  isolation: isolate;
}

.auth-story::before,
.auth-story::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.auth-story::before {
  top: 8%;
  right: -6rem;
  width: 28rem;
  height: 28rem;
  border: 1px solid rgba(93, 143, 104, 0.16);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.58), rgba(220, 235, 221, 0.12) 62%, transparent 70%);
  box-shadow: 0 0 0 2rem rgba(255, 255, 255, 0.16), 0 0 0 5rem rgba(197, 222, 200, 0.1);
  filter: blur(0.2px);
}

.auth-story::after {
  bottom: 11%;
  left: 8%;
  width: 18rem;
  height: 4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.76);
  border-bottom: 1px solid rgba(93, 143, 104, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  filter: blur(0.4rem);
  opacity: 0.72;
  transform: rotate(-16deg);
}

.auth-story-content,
.auth-story-footer,
.auth-brand { position: relative; z-index: 1; }

.auth-brand {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.auth-brand-mark {
  display: grid;
  width: 2.9rem;
  height: 2.9rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--auth-border);
  border-radius: 1rem;
  background: var(--auth-surface-solid);
  box-shadow: inset 0 1px 0 var(--auth-highlight), 0 0.8rem 1.8rem rgba(66, 105, 74, 0.1);
}

.auth-brand-mark img { width: 100%; height: 100%; object-fit: contain; padding: 0.3rem; }
.auth-brand-name { font-size: 1.05rem; font-weight: 850; letter-spacing: -0.04em; }
.auth-brand-meta { display: block; margin-top: 0.2rem; color: var(--auth-green); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }

.auth-story-content { max-width: 39rem; margin: auto 0; padding: 4rem 0; }
.auth-eyebrow { color: var(--auth-green); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.2em; text-transform: uppercase; }
.auth-story h1 { max-width: 35rem; margin: 1.1rem 0 1.35rem; color: var(--auth-green-deep); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.8rem, 5vw, 4.7rem); font-weight: 400; letter-spacing: -0.065em; line-height: 0.96; }
.auth-story h1 em { color: var(--auth-green); font-style: italic; }
.auth-story-copy { max-width: 29rem; color: var(--auth-muted); font-size: 1rem; line-height: 1.75; }

.auth-story-points { display: grid; gap: 0.8rem; max-width: 23rem; margin: 2.4rem 0 0; padding: 0; list-style: none; }
.auth-story-points li { display: flex; align-items: center; gap: 0.75rem; color: var(--auth-green-deep); font-size: 0.82rem; font-weight: 650; }
.auth-story-points i { display: grid; width: 1.8rem; height: 1.8rem; flex: 0 0 auto; place-items: center; border: 1px solid var(--auth-border); border-radius: 0.65rem; color: var(--auth-green); background: rgba(255, 255, 255, 0.56); box-shadow: inset 0 1px 0 var(--auth-highlight); }
.auth-story-footer { color: rgba(41, 77, 54, 0.52); font-size: 0.72rem; }

.auth-workspace { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: clamp(1.5rem, 5vw, 5.5rem); background: var(--auth-bg); }
.auth-panel { width: min(100%, 31rem); }
.auth-panel-wide { width: min(100%, 42rem); }
.auth-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2.25rem; }
.auth-mobile-brand { display: none; }
.auth-back-link { border: 0; color: var(--auth-muted); background: transparent; cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 750; text-decoration: none; }
.auth-back-link:hover { color: var(--auth-green); }
.auth-kicker { color: var(--auth-green); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.18em; text-transform: uppercase; }
.auth-title { margin: 0.6rem 0 0; color: var(--auth-text); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.2rem, 5vw, 3.55rem); font-weight: 400; letter-spacing: -0.06em; line-height: 0.98; }
.auth-title em { color: var(--auth-green); font-style: italic; }
.auth-subtitle { max-width: 30rem; margin: 0.95rem 0 0; color: var(--auth-muted); font-size: 0.9rem; line-height: 1.7; }

.auth-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; margin: 2rem 0 1.7rem; padding: 0.3rem; border: 1px solid var(--auth-border); border-radius: 0.95rem; background: rgba(220, 235, 221, 0.56); box-shadow: inset 0 1px 0 var(--auth-highlight); }
.auth-mode-switch button { min-height: 2.55rem; border: 1px solid transparent; border-radius: 0.7rem; color: var(--auth-muted); background: transparent; cursor: pointer; font: inherit; font-size: 0.76rem; font-weight: 800; transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s; }
.auth-mode-switch button[aria-selected="true"] { border-color: var(--auth-border); color: var(--auth-green-deep); background: var(--auth-surface-solid); box-shadow: inset 0 1px 0 var(--auth-highlight), 0 0.35rem 1rem var(--auth-shadow); }

.auth-form { display: grid; gap: 1.05rem; }
.auth-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.95rem; }
.auth-field { display: grid; gap: 0.42rem; }
.auth-field-full { grid-column: 1 / -1; }
.auth-field label { color: var(--auth-green-deep); font-size: 0.72rem; font-weight: 800; }
.auth-required { color: var(--auth-green); }
.auth-field input,
.auth-field textarea,
.auth-field select { width: 100%; min-height: 2.9rem; border: 1px solid var(--auth-border); border-radius: 0.72rem; outline: none; padding: 0.72rem 0.82rem; color: var(--auth-text); background: rgba(255, 255, 255, 0.86); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 14px rgba(41, 77, 54, 0.04); font: inherit; font-size: 0.84rem; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; }
.auth-field textarea { min-height: 7.25rem; resize: vertical; }
.auth-field input:focus, .auth-field textarea:focus, .auth-field select:focus { border-color: rgba(93, 143, 104, 0.55); background: var(--auth-surface-solid); box-shadow: 0 0 0 3px rgba(93, 143, 104, 0.12), inset 0 1px 0 var(--auth-highlight); }
.auth-field-error { color: var(--auth-danger); font-size: 0.7rem; line-height: 1.4; }
.auth-error { margin-bottom: 1rem; padding: 0.8rem 0.9rem; border: 1px solid rgba(168, 79, 77, 0.2); border-radius: 0.75rem; color: var(--auth-danger); background: var(--auth-danger-bg); font-size: 0.78rem; line-height: 1.5; }
.auth-message-list { display: grid; gap: 0.55rem; margin-bottom: 1rem; }
.auth-message { padding: 0.75rem 0.85rem; border: 1px solid var(--auth-border); border-radius: 0.72rem; color: var(--auth-muted); background: rgba(255, 255, 255, 0.7); font-size: 0.78rem; }
.auth-message.error, .auth-message.danger { border-color: rgba(168, 79, 77, 0.2); color: var(--auth-danger); background: var(--auth-danger-bg); }
.auth-message.success { border-color: rgba(61, 118, 85, 0.2); color: var(--auth-success); background: var(--auth-success-bg); }

.auth-password-wrap { position: relative; }
.auth-password-wrap input { padding-right: 3rem; }
.auth-password-toggle { position: absolute; top: 50%; right: 0.85rem; border: 0; color: var(--auth-muted); background: transparent; cursor: pointer; transform: translateY(-50%); }
.auth-password-toggle:hover { color: var(--auth-green); }
.auth-inline { display: flex; align-items: center; justify-content: flex-end; }
.auth-inline a { color: var(--auth-green); font-size: 0.76rem; font-weight: 800; text-decoration: none; }
.auth-inline a:hover { text-decoration: underline; }
.auth-primary-button, .auth-secondary-button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: 0.55rem; border-radius: 0.78rem; padding: 0.75rem 1rem; cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 850; text-decoration: none; transition: background 0.2s, box-shadow 0.2s, transform 0.2s; }
.auth-primary-button { border: 1px solid rgba(41, 77, 54, 0.12); color: #fff; background: linear-gradient(180deg, #78ae82 0%, #4f875f 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 24px rgba(54, 100, 67, 0.16); }
.auth-primary-button:hover { background: linear-gradient(180deg, #84b98c 0%, #588f66 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 12px 28px rgba(54, 100, 67, 0.2); transform: translateY(-1px); }
.auth-secondary-button { border: 1px solid var(--auth-border); color: var(--auth-green-deep); background: rgba(255, 255, 255, 0.56); box-shadow: inset 0 1px 0 var(--auth-highlight); }
.auth-secondary-button:hover { border-color: rgba(93, 143, 104, 0.35); background: var(--auth-surface-solid); transform: translateY(-1px); }
.auth-form-note { margin: 0; color: var(--auth-muted); font-size: 0.71rem; line-height: 1.55; text-align: center; }
.auth-form-note a, .auth-link-button { color: var(--auth-green); font-weight: 750; }
.auth-link-button { border: 0; padding: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 800; }
.auth-link-button:hover, .auth-form-note a:hover { text-decoration: underline; }
.auth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.35rem 0; color: var(--auth-muted); font-size: 0.68rem; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; content: ""; background: var(--auth-border); }
.auth-mode-body { position: relative; min-height: 35rem; }
.auth-state { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; }
.auth-state-enter, .auth-state-leave { will-change: transform, opacity; transition: transform 600ms cubic-bezier(.22, 1, .36, 1), opacity 280ms ease; }
.auth-state-enter-start, .auth-state-leave-end { opacity: 0; transform: translate3d(0, 0.65rem, 0); }
.auth-state-enter-end, .auth-state-leave-start { opacity: 1; transform: translate3d(0, 0, 0); }
.auth-mode-switch button:disabled, .auth-link-button:disabled { cursor: wait; opacity: 0.72; }

.auth-portal--security { background: var(--auth-bg); }
.auth-portal--security .auth-workspace { background: var(--auth-bg); }
.auth-security-card { width: min(100%, 34rem); padding: clamp(1.4rem, 4vw, 2.5rem); border: 1px solid var(--auth-border); border-radius: 1.35rem; background: var(--auth-surface); box-shadow: inset 0 1px 0 var(--auth-highlight), 0 1.7rem 4rem var(--auth-shadow); backdrop-filter: blur(18px); }
.auth-security-icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border: 1px solid var(--auth-border); border-radius: 1rem; color: var(--auth-green); background: var(--auth-mint); box-shadow: inset 0 1px 0 var(--auth-highlight); font-size: 1.25rem; }
.auth-security-card .auth-title { font-size: clamp(2rem, 4vw, 3rem); }
.auth-security-card .auth-subtitle { margin-bottom: 1.5rem; }
.auth-security-destination { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.65rem; padding: 0.55rem 0.7rem; border: 1px solid var(--auth-border); border-radius: 0.65rem; color: var(--auth-green-deep); background: rgba(220, 235, 221, 0.62); font-size: 0.76rem; font-weight: 750; }
.auth-code-input { width: 100%; min-height: 4rem; border: 1px solid var(--auth-border); border-radius: 0.85rem; outline: none; color: var(--auth-text); background: rgba(255, 255, 255, 0.86); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 14px rgba(41, 77, 54, 0.04); font: inherit; font-size: 1.5rem; font-weight: 800; letter-spacing: 0.3em; text-align: center; }
.auth-code-input:focus { border-color: rgba(93, 143, 104, 0.55); box-shadow: 0 0 0 3px rgba(93, 143, 104, 0.12), inset 0 1px 0 var(--auth-highlight); }
.auth-security-actions { display: grid; gap: 0.7rem; margin-top: 0.8rem; }
.auth-security-note { display: flex; gap: 0.6rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--auth-border); color: var(--auth-muted); font-size: 0.72rem; line-height: 1.5; }
.auth-security-note i { color: var(--auth-green); }
.auth-session-card { margin: 1.3rem 0; padding: 1rem; border: 1px solid var(--auth-border); border-radius: 0.9rem; background: rgba(220, 235, 221, 0.5); box-shadow: inset 0 1px 0 var(--auth-highlight); }
.auth-session-status { color: var(--auth-green); font-size: 0.65rem; font-weight: 850; letter-spacing: 0.16em; text-transform: uppercase; }
.auth-session-device { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.auth-session-device-icon { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 1px solid var(--auth-border); border-radius: 0.7rem; color: var(--auth-green); background: rgba(255, 255, 255, 0.68); }
.auth-session-device-name { color: var(--auth-text); font-size: 0.84rem; font-weight: 800; }
.auth-session-device-meta, .auth-session-time { color: var(--auth-muted); font-size: 0.7rem; }
.auth-session-time { margin-top: 0.8rem; }
.auth-success-panel { display: flex; align-items: flex-start; gap: 0.8rem; margin: 1.8rem 0; padding: 1rem; border: 1px solid rgba(61, 118, 85, 0.2); border-radius: 0.9rem; color: var(--auth-success); background: var(--auth-success-bg); font-size: 0.82rem; line-height: 1.5; }
.auth-success-panel p { margin: 0.25rem 0 0; color: var(--auth-muted); font-size: 0.75rem; }
.auth-success-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border: 1px solid rgba(61, 118, 85, 0.2); border-radius: 50%; color: var(--auth-green); background: var(--auth-mint); }

.auth-setup-progress { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 0.45rem; margin: 1.8rem 0 2rem; }
.auth-setup-step { display: grid; justify-items: center; gap: 0.4rem; color: var(--auth-muted); font-size: 0.66rem; font-weight: 800; text-align: center; }
.auth-setup-step span { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--auth-border); border-radius: 50%; color: var(--auth-muted); background: var(--auth-surface-solid); }
.auth-setup-step.is-active { color: var(--auth-green); }
.auth-setup-step.is-active span { border-color: rgba(93, 143, 104, 0.4); color: #fff; background: var(--auth-green); }
.auth-setup-line { height: 1px; margin-top: 1rem; background: var(--auth-border); }
.auth-setup-line.is-active { background: var(--auth-mint-strong); }
.auth-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.auth-method-card { display: flex; min-height: 10rem; flex-direction: column; align-items: flex-start; border: 1px solid var(--auth-border); border-radius: 0.9rem; padding: 1rem; color: var(--auth-text); background: rgba(255, 255, 255, 0.66); cursor: pointer; font: inherit; text-align: left; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.auth-method-card:hover { border-color: rgba(93, 143, 104, 0.38); box-shadow: 0 0.8rem 1.8rem var(--auth-shadow); transform: translateY(-1px); }
.auth-method-card:disabled { cursor: not-allowed; opacity: 0.58; transform: none; }
.auth-method-icon { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border: 1px solid var(--auth-border); border-radius: 0.75rem; color: var(--auth-green); background: var(--auth-mint); }
.auth-method-title { margin-top: auto; font-size: 0.85rem; font-weight: 850; }
.auth-method-copy { margin-top: 0.35rem; color: var(--auth-muted); font-size: 0.7rem; line-height: 1.45; }
.auth-method-meta { margin-top: 0.7rem; color: var(--auth-green); font-size: 0.68rem; font-weight: 800; }
.auth-qr { display: block; width: 11rem; height: 11rem; margin: 1rem auto; padding: 0.7rem; border: 1px solid var(--auth-border); border-radius: 0.85rem; background: var(--auth-surface-solid); box-shadow: inset 0 1px 0 var(--auth-highlight); }
.auth-secret { margin: 0 0 1rem; overflow-wrap: anywhere; border: 1px solid var(--auth-border); border-radius: 0.65rem; padding: 0.7rem; color: var(--auth-green-deep); background: rgba(220, 235, 221, 0.5); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; font-weight: 800; text-align: center; }
.auth-backup-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; margin: 1rem 0 1.2rem; }
.auth-backup-code { border: 1px solid var(--auth-border); border-radius: 0.55rem; padding: 0.65rem 0.3rem; color: var(--auth-green-deep); background: rgba(220, 235, 221, 0.5); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; font-weight: 800; text-align: center; }
.auth-backup-actions { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0.7rem; }
.auth-backup-actions form, .auth-backup-actions button { width: 100%; }
.auth-small-heading { margin: 0; color: var(--auth-text); font-family: Georgia, "Times New Roman", serif; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.04em; }
.auth-small-copy { margin: 0.5rem 0 1rem; color: var(--auth-muted); font-size: 0.8rem; line-height: 1.6; }

@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-story { min-height: 9.5rem; height: 9.5rem; padding: 1.15rem 1.35rem; }
  .auth-story-content, .auth-story-footer { display: none; }
  .auth-story::before { top: -9rem; right: -5rem; width: 20rem; height: 20rem; }
  .auth-story::after { bottom: 1rem; left: 42%; width: 12rem; }
  .auth-workspace { min-height: calc(100vh - 9.5rem); padding: 2rem 1.35rem 3rem; }
  .auth-mobile-brand { display: none; }
  .auth-panel-top { margin-bottom: 1.8rem; }
  .auth-mode-body { min-height: 37rem; }
}

@media (max-width: 560px) {
  .auth-story { min-height: 7rem; height: 7rem; }
  .auth-story .auth-brand-mark { width: 2.35rem; height: 2.35rem; }
  .auth-workspace { min-height: calc(100vh - 7rem); align-items: flex-start; padding: 1rem; }
  .auth-panel { padding-top: 0.4rem; }
  .auth-panel-top { align-items: flex-start; }
  .auth-form-grid { grid-template-columns: 1fr; }
  .auth-field-full { grid-column: auto; }
  .auth-title { font-size: 2.65rem; }
  .auth-title br { display: none; }
  .auth-mode-switch { margin-top: 1.5rem; }
  .auth-mode-body { min-height: 47rem; }
  .auth-security-card { padding: 1.25rem; }
  .auth-method-grid { grid-template-columns: 1fr; }
  .auth-backup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-backup-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-portal *, .auth-portal *::before, .auth-portal *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  .auth-state-enter-start, .auth-state-leave-end { transform: none; }
}