/* Structural source: UI Vault login-004 (bundled locally). */
@import url("./login-base.css");

:root {
  --background: var(--ui-bg);
  --background-secondary: var(--ui-gray-50);
  --text: var(--ui-text);
  --muted: var(--ui-muted);
  --dark-button: var(--ui-deep);
  --dark-button-hover: var(--ui-text);
  --error: var(--ui-danger);
  --error-soft: rgba(var(--ui-danger-rgb), .1);
  --transition-duration: .9s;
  --ease-smooth: cubic-bezier(.22, 1, .36, 1);
  --soft-shadow: 10px 12px 34px rgba(var(--ui-text-rgb), .08);
}

body {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--ui-bg);
  color: var(--text);
  font-family: var(--font-body);
}

.auth-wrapper {
  position: relative;
  min-height: 100svh;
  padding: 72px 32px 32px;
}

.auth-back {
  position: absolute;
  top: 25px;
  left: 32px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ui-text);
  font-size: var(--fs-ui);
  font-weight: 700;
  text-decoration: none;
}

.auth-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
}

.auth-back:hover svg { transform: translateX(-3px); }
.auth-back:focus-visible { outline: 2px solid var(--ui-text); outline-offset: 5px; }

.auth-container {
  width: min(1220px, calc(100vw - 64px));
  height: min(720px, calc(100svh - 104px));
  min-height: 620px;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(var(--ui-text-rgb), .1), 0 0 0 1px var(--ui-glass-line);
}

/* The form sits on --ui-surface, one step above the page, so the card keeps
   its edge in dark mode too, where the shadow alone disappears. */
.form-panel { background: var(--ui-surface); }
.form-content { width: min(430px, 78%); }
.form-mark {
  width: 104px;
  margin: 0 auto 16px;
  color: rgba(var(--ui-text-rgb), .55);
}

.form-content h1,
.overlay-content h2 {
  font-family: var(--font-display);
  font-weight: 800;
}

.form-content h1 {
  max-width: 410px;
  margin: 0 auto 28px;
  font-size: clamp(36px, 3.4vw, 51px);
  letter-spacing: -.06em;
}

.social-buttons { gap: 12px; margin-bottom: 28px; }
.social-button {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(var(--ui-text-rgb), .14);
  border-radius: 10px;
  background: var(--ui-bg);
  box-shadow: none;
  color: var(--ui-text);
  font-size: 16px;
}
.social-button:hover {
  background: var(--ui-text);
  color: var(--ui-bg);
  transform: translateY(-2px);
}
.form-description { margin-bottom: 22px; color: var(--ui-muted); font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em; }
.fields { gap: 12px; margin-bottom: 23px; }
.input-group { border-radius: 10px; background: var(--ui-bg); box-shadow: inset 0 0 0 1px rgba(var(--ui-text-rgb), .13); }
.input-group:focus-within { border-color: var(--ui-text); box-shadow: inset 0 0 0 1px var(--ui-text); }
.input-group input { padding: 16px 17px; font-family: var(--font-body); font-size: var(--fs-body); }
.input-group input::placeholder { color: var(--ui-muted); }
.field-error { color: var(--error); font-family: var(--font-body); font-size: var(--fs-label); }
.forgot-password { margin-bottom: 30px; color: var(--ui-muted); border-color: var(--ui-muted); font-family: var(--font-body); font-size: var(--fs-ui); }

.primary-button,
.ghost-button {
  min-width: 0;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: .1em;
}

.primary-button {
  padding: 17px 26px;
  border-color: var(--ui-deep);
  background: linear-gradient(to right, var(--ui-text) 0%, var(--ui-text) 100%) left / 0% 100% no-repeat, var(--ui-deep);
  box-shadow: none;
}

.primary-button:hover { box-shadow: 0 10px 22px rgba(var(--ui-text-rgb), .18); }

/* Showcase panel — fixed inverse surface in both themes (design intent). */
.overlay { background: var(--ui-inverse); color: var(--ui-inverse-text); }
.overlay-content h2 { margin-bottom: 24px; color: var(--ui-inverse-text); font-size: clamp(34px, 3vw, 48px); letter-spacing: -.065em; }
.overlay-content p { color: rgba(var(--ui-inverse-text-rgb), .65); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; }
.ghost-button {
  padding: 16px 24px;
  border-color: rgba(var(--ui-inverse-text-rgb), .78);
  background: linear-gradient(to right, var(--ui-inverse-text) 0%, var(--ui-inverse-text) 100%) left / 0% 100% no-repeat, transparent;
  box-shadow: none;
  color: var(--ui-inverse-text);
}
.ghost-button:hover { color: var(--ui-inverse); box-shadow: none; }
/* The showcase panel is inverse in both themes, so everything on it reads from --ui-inverse*. */
.decor-circle { background: rgba(var(--ui-inverse-text-rgb), .05); box-shadow: inset 14px 14px 30px rgba(var(--ui-inverse-text-rgb), .035), inset -14px -14px 30px rgba(var(--ui-shadow-rgb), .25); }
.form-content button:focus-visible,
.forgot-password:focus-visible { outline: 2px solid var(--ui-text); outline-offset: 4px; }
.overlay-content button:focus-visible { outline: 2px solid var(--ui-inverse-text); outline-offset: 4px; }

@media (max-width: 1023.98px) {
  .auth-wrapper { padding: 72px 20px 20px; }
  .auth-back { left: 20px; }
  .auth-container { width: 100%; height: min(790px, calc(100svh - 92px)); min-height: 680px; }
}

@media (max-width: 479.98px) {
  .auth-wrapper { padding: 0; }
  .auth-back { top: 20px; left: 20px; color: var(--ui-bg); }
  .auth-container { min-height: 100svh; border-radius: 0; }
  .form-content h1 { font-size: clamp(34px, 10vw, 42px); }
  .social-button { width: 45px; height: 45px; }
  .overlay-content p { margin-bottom: 24px; font-size: var(--fs-ui); }
  .overlay-content { padding-top: 48px; } /* clear the "Back to MIRA" link */
  .ghost-button { padding: 13px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}