:root {
  --yhcp-primary: #990099;
  --yhcp-primary-deep: #731f88;
  --yhcp-primary-soft: rgba(153, 0, 153, 0.1);
  --yhcp-pink: #cf4cbf;
  --yhcp-ink: #2f2036;
  --yhcp-muted: #6d5b73;
  --yhcp-border: rgba(153, 0, 153, 0.14);
  --yhcp-surface: rgba(255, 255, 255, 0.96);
  --yhcp-field: #fff;
  --yhcp-focus: rgba(153, 0, 153, 0.14);
  --yhcp-shadow: 0 24px 70px rgba(70, 23, 76, 0.12);
}

* {
  box-sizing: border-box;
}

body.yhcp-form-page,
body.app-login {
  min-height: 100vh;
  color: var(--yhcp-ink);
  background:
    radial-gradient(circle at top left, rgba(207, 76, 191, 0.14), transparent 34%),
    radial-gradient(circle at bottom right, rgba(115, 31, 136, 0.1), transparent 38%),
    #fbf8fc;
}

html:has(body.app-login),
body.app-login {
  min-height: 100%;
  background: #fff !important;
}

body.app-login {
  height: auto !important;
  overflow-x: hidden;
}

body.app-login .app-auth-wrapper {
  width: 100%;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: auto !important;
  margin: 0 !important;
  background: #fff !important;
}

body.app-login .auth-main-col {
  padding-right: 0;
  padding-left: 0;
}

.yhcp-form-card,
.app-auth-body,
.invite-card,
.signup-container,
.membership-container {
  border: 1px solid var(--yhcp-border);
  border-radius: 24px;
  background: var(--yhcp-surface);
  box-shadow: var(--yhcp-shadow);
}

.yhcp-form-card h1,
.yhcp-form-card h2,
.invite-card h1,
.signup-container h2,
.membership-container h2,
.auth-heading {
  color: var(--yhcp-ink);
  letter-spacing: -0.03em;
}

.yhcp-highlight,
.membership-hero h1,
.invite-card h1 {
  color: var(--yhcp-primary-deep);
}

.form-control,
.form-select,
.form-input,
form input,
form textarea,
form select {
  max-width: 100%;
  border: 1px solid var(--yhcp-border) !important;
  border-radius: 14px !important;
  background-color: var(--yhcp-field) !important;
  color: var(--yhcp-ink) !important;
  box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
.form-input:focus,
form input:focus,
form textarea:focus,
form select:focus {
  border-color: rgba(153, 0, 153, 0.55) !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 4px var(--yhcp-focus) !important;
  outline: none !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--yhcp-ink);
  box-shadow: 0 0 0 1000px #fff inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

.app-btn-primary,
.submit-btn,
.check-btn,
.form-submit-btn,
.invite-actions a:first-child {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--yhcp-primary), var(--yhcp-pink)) !important;
  box-shadow: 0 16px 30px rgba(153, 0, 153, 0.2);
}

.app-btn-primary:hover,
.submit-btn:hover,
.check-btn:hover,
.form-submit-btn:hover,
.invite-actions a:first-child:hover {
  filter: brightness(0.96);
}

.alert-warning {
  border-color: rgba(153, 0, 153, 0.12);
  background: #fff6d8;
  color: #5d4a18;
}

@media (max-width: 640px) {
  body.yhcp-form-page,
  body.app-login {
    background: #fbf8fc;
  }

  .app-auth-wrapper {
    min-height: 100svh;
    padding: 14px;
  }

  .app-auth-body,
  .invite-card,
  .signup-container,
  .membership-container {
    width: 100%;
    border-radius: 18px;
    padding: 20px !important;
  }

  .app-auth-branding img {
    max-width: min(190px, 78vw);
  }
}