html, body { min-height: 100%; }
body { background: #f5f7fb; color: #1f2937; }
.site-nav { background: #111827 !important; }
.site-main { min-height: calc(100vh - 130px); }
.navbar-brand { letter-spacing: .2px; }
.nav-link.active { color: #fff !important; font-weight: 600; }
.hero-card { background: linear-gradient(135deg, #ffffff, #eef4ff); border: 1px solid #dbe5f5; }
.info-panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.04); }
.profile-preview { width: 140px; height: 140px; object-fit: cover; border: 6px solid #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
.tree-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.tree-node-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1rem; box-shadow: 0 10px 20px rgba(15,23,42,0.05); }
.card, .info-panel, .hero-card { overflow: hidden; }
.dropdown-menu { border: 1px solid #e5e7eb; }
@media (max-width: 767.98px) { .hero-card { padding: 1.25rem !important; } }

@media (max-width: 767.98px) {
  .site-main { min-height: calc(100vh - 110px); }
  .navbar-brand { font-size: 1.1rem; }
  .hero-card { padding: 1rem !important; }
  .profile-preview { width: 104px; height: 104px; }
}
img { max-width: 100%; height: auto; }

/* Indian Family History public content pages */
.ifh-hero,
.ifh-page-hero {
  background: radial-gradient(circle at top left, rgba(37, 99, 235, .12), transparent 30%), linear-gradient(135deg, #ffffff 0%, #eef4ff 100%);
  border: 1px solid #dbe5f5;
  padding: 2rem;
}
.ifh-hero .lead,
.ifh-page-hero .lead { color: #334155; }
.ifh-question-card,
.ifh-mini-card,
.ifh-stats-panel,
.ifh-gradient-card,
.ifh-feature-card,
.ifh-benefit-card,
.ifh-legal-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1.25rem;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .06);
}
.ifh-question-card,
.ifh-mini-card,
.ifh-stats-panel,
.ifh-gradient-card,
.ifh-feature-card,
.ifh-benefit-card { padding: 1.25rem; }
.ifh-stats-panel,
.ifh-gradient-card { background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%); }
.ifh-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .75rem;
  color: #2563eb;
  font-weight: 800;
}
.ifh-check-list {
  list-style: none;
  padding-left: 0;
}
.ifh-check-list li {
  position: relative;
  padding-left: 1.65rem;
  margin-bottom: .55rem;
  color: #334155;
}
.ifh-check-list li::before {
  content: "\F26A";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: .02rem;
  color: #2563eb;
  font-weight: 700;
}
.ifh-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  color: #2563eb;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.ifh-chip {
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1e3a8a;
  border-radius: 999px;
  padding: .55rem .85rem;
  font-weight: 700;
  font-size: .88rem;
  text-align: center;
}
.ifh-accordion .accordion-item {
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: .75rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}
.ifh-accordion .accordion-button { font-weight: 700; }
.ifh-legal-card {
  padding: 1.5rem;
  color: #334155;
}
.ifh-legal-card h2 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin-top: 1.4rem;
  margin-bottom: .55rem;
}
.ifh-legal-card h2:first-child { margin-top: 0; }
.ifh-legal-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: #1e293b;
  margin-top: 1rem;
}
.ifh-legal-card p,
.ifh-legal-card li { line-height: 1.75; }
.ifh-legal-card ul { padding-left: 1.2rem; }
.ifh-legal-page { max-width: 980px; margin: 0 auto; }
@media (min-width: 768px) {
  .ifh-hero,
  .ifh-page-hero { padding: 3rem; }
  .ifh-feature-card,
  .ifh-benefit-card,
  .ifh-question-card,
  .ifh-mini-card,
  .ifh-stats-panel,
  .ifh-gradient-card { padding: 1.5rem; }
  .ifh-legal-card { padding: 2.25rem; }
}
@media (max-width: 575.98px) {
  .ifh-hero,
  .ifh-page-hero { padding: 1.25rem; }
  .ifh-hero .display-5,
  .ifh-page-hero .display-6 { font-size: 2rem; }
  .navbar-brand { max-width: 250px; white-space: normal; line-height: 1.15; }
}

/* Professional login and registration pages */
.auth-page {
  position: relative;
  padding: 1rem 0 2.5rem;
}
.auth-page::before {
  content: "";
  position: absolute;
  inset: -32px -24px auto -24px;
  height: 280px;
  background:
    radial-gradient(circle at 16% 18%, rgba(37, 99, 235, .18), transparent 34%),
    radial-gradient(circle at 88% 14%, rgba(14, 165, 233, .16), transparent 30%),
    linear-gradient(135deg, rgba(15, 23, 42, .06), rgba(37, 99, 235, .04));
  z-index: -1;
  border-radius: 0 0 36px 36px;
}
.auth-shell {
  display: grid;
  grid-template-columns: minmax(280px, .92fr) minmax(340px, 1.08fr);
  gap: 1.5rem;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
}
.auth-shell-wide { max-width: 1180px; }
.auth-visual-panel,
.auth-card {
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .10);
  overflow: hidden;
}
.auth-visual-panel {
  position: relative;
  min-height: 100%;
  padding: 2rem;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .95), rgba(30, 64, 175, .86)),
    radial-gradient(circle at top right, rgba(255, 255, 255, .18), transparent 36%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.auth-visual-panel::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 210px;
  height: 210px;
  border: 34px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
}
.auth-brand-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  width: fit-content;
  padding: .55rem .85rem;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: .02em;
}
.auth-visual-panel h1 {
  position: relative;
  z-index: 1;
  font-size: clamp(2rem, 4vw, 3.35rem);
  font-weight: 900;
  line-height: 1.06;
  margin: 2rem 0 1rem;
}
.auth-visual-panel p {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, .82);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 560px;
}
.auth-feature-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-top: 2rem;
}
.auth-feature-grid > div {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem .95rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
  font-weight: 700;
}
.auth-feature-grid i { font-size: 1.15rem; color: #bfdbfe; }
.auth-card {
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(226, 232, 240, .92);
  padding: 1.5rem;
}
.auth-card-large { padding: 1.65rem; }
.auth-card-header { margin-bottom: 1.15rem; }
.auth-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  padding: .35rem .8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  margin-bottom: .75rem;
}
.auth-card-header h2 {
  color: #0f172a;
  font-weight: 900;
  margin-bottom: .45rem;
}
.auth-card-header p {
  color: #64748b;
  margin: 0 auto;
  max-width: 520px;
  line-height: 1.65;
}
.auth-google-first {
  position: relative;
  margin-top: .75rem;
}
.auth-option-label {
  text-align: center;
  height: 0;
}
.auth-option-label span {
  position: relative;
  top: -2px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .75rem;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  box-shadow: 0 8px 18px rgba(22, 163, 74, .18);
  font-size: .75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  z-index: 2;
}
.auth-google-box {
  border: 1px solid #bfdbfe;
  background: linear-gradient(135deg, #f8fbff 0%, #eff6ff 100%);
  border-radius: 22px;
  padding: 1.25rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.auth-google-copy {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1rem;
}
.auth-google-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #dc2626;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 20px rgba(15, 23, 42, .07);
  font-size: 1.25rem;
}
.auth-google-copy strong {
  display: block;
  color: #0f172a;
  font-size: 1rem;
}
.auth-google-copy small {
  display: block;
  color: #64748b;
  line-height: 1.45;
}
.auth-google-button-wrap {
  display: flex;
  justify-content: center;
  min-height: 44px;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 1.35rem 0 1.15rem;
  color: #64748b;
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: #e2e8f0;
}
.auth-form .form-label {
  color: #334155;
  font-weight: 800;
  margin-bottom: .45rem;
}
.auth-input-icon {
  position: relative;
}
.auth-input-icon > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  z-index: 2;
}
.auth-input-icon .form-control {
  padding-left: 2.55rem;
}
.auth-form .form-control,
.auth-password-group .form-control,
.auth-password-group .input-group-text,
.auth-password-group .btn,
.auth-input-icon .form-control {
  min-height: 48px;
  border-color: #d7dee9;
}
.auth-form .form-control,
.auth-input-icon .form-control {
  border-radius: 14px;
}
.auth-password-group .input-group-text {
  border-radius: 14px 0 0 14px;
  background: #f8fafc;
  color: #64748b;
}
.auth-password-group .btn {
  border-radius: 0 14px 14px 0;
}
.auth-submit-btn {
  min-height: 50px;
  border-radius: 15px;
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: 0 14px 24px rgba(37, 99, 235, .20);
}
.auth-link-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem;
  font-weight: 700;
  font-size: .92rem;
}
.auth-link-row a,
.auth-bottom-note a { text-decoration: none; }
.auth-link-row a:hover,
.auth-bottom-note a:hover { text-decoration: underline; }
.auth-choice-row,
.auth-google-gender {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.auth-google-gender { margin-bottom: 1rem; }
.auth-choice-card {
  flex: 1 1 132px;
  cursor: pointer;
  margin: 0;
}
.auth-choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.auth-choice-card span {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .8rem 1rem;
  border-radius: 16px;
  border: 1px solid #d7dee9;
  background: #fff;
  color: #334155;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.auth-choice-card input:checked + span {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: 0 12px 22px rgba(37, 99, 235, .13);
}
.auth-choice-card span i { font-size: 1.1rem; }
.auth-terms-box {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
  color: #475569;
  line-height: 1.55;
  font-weight: 600;
}
.auth-terms-box input { margin-top: .25rem; }
.auth-modal-content { border-radius: 22px; overflow: hidden; }
.auth-modal-content .modal-header {
  background: #0f172a;
  color: #fff;
}
.auth-modal-content .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.auth-bottom-note { color: #64748b; font-weight: 700; }
@media (min-width: 992px) {
  .auth-login-page .auth-card { align-self: center; }
}
@media (max-width: 991.98px) {
  .auth-page { padding-top: .5rem; }
  .auth-shell,
  .auth-shell-wide {
    grid-template-columns: 1fr;
    max-width: 720px;
  }
  .auth-visual-panel {
    min-height: auto;
    padding: 1.5rem;
  }
  .auth-visual-panel h1 { margin-top: 1.35rem; }
  .auth-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1.25rem;
  }
  .auth-feature-grid > div {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 575.98px) {
  .auth-page { padding: 0 0 1rem; }
  .auth-page::before { height: 180px; }
  .auth-shell { gap: 1rem; }
  .auth-visual-panel,
  .auth-card {
    border-radius: 20px;
  }
  .auth-visual-panel { padding: 1.15rem; }
  .auth-visual-panel h1 { font-size: 1.85rem; }
  .auth-visual-panel p { font-size: .96rem; }
  .auth-feature-grid { grid-template-columns: 1fr; }
  .auth-feature-grid > div { flex-direction: row; align-items: center; }
  .auth-card,
  .auth-card-large { padding: 1rem; }
  .auth-card-header h2 { font-size: 1.45rem; }
  .auth-google-box { padding: 1rem; border-radius: 18px; }
  .auth-google-copy { align-items: flex-start; }
  .auth-link-row { justify-content: center; text-align: center; }
  .auth-choice-card { flex-basis: 100%; }
  .auth-google-gender .auth-choice-card { flex-basis: calc(50% - .4rem); }
  .auth-divider { margin: 1.1rem 0 1rem; }
}

/* Clean premium auth pages: Google first, manual second */
.auth-clean-page {
  position: relative;
  padding: .35rem 0 2.2rem;
}
.auth-clean-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 16%, rgba(37, 99, 235, .10), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(245, 158, 11, .10), transparent 24%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 52%, #f8fafc 100%);
}
.auth-clean-shell {
  width: min(100%, 1100px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 1.25rem;
  align-items: stretch;
}
.auth-clean-shell-wide { width: min(100%, 1180px); }
.auth-clean-identity,
.auth-clean-card {
  border: 1px solid rgba(226, 232, 240, .95);
  border-radius: 26px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
}
.auth-clean-identity {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  padding: 2.15rem;
  color: #fff;
  background:
    linear-gradient(150deg, rgba(15, 23, 42, .98) 0%, rgba(30, 64, 175, .92) 68%, rgba(37, 99, 235, .92) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-clean-identity::before,
.auth-clean-identity::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
}
.auth-clean-identity::before {
  width: 240px;
  height: 240px;
  right: -98px;
  top: -70px;
}
.auth-clean-identity::after {
  width: 150px;
  height: 150px;
  left: -52px;
  bottom: -48px;
}
.auth-clean-logo {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  font-size: 1.65rem;
  color: #fbbf24;
  margin-bottom: 1.3rem;
}
.auth-clean-eyebrow,
.auth-clean-identity h1,
.auth-clean-identity p,
.auth-clean-points { position: relative; z-index: 1; }
.auth-clean-eyebrow {
  display: inline-flex;
  width: fit-content;
  color: #bfdbfe;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: .85rem;
}
.auth-clean-identity h1 {
  max-width: 460px;
  font-size: clamp(2.15rem, 4vw, 3.65rem);
  line-height: 1.02;
  font-weight: 950;
  letter-spacing: -.055em;
  margin: 0 0 1rem;
}
.auth-clean-identity p {
  max-width: 520px;
  color: rgba(255, 255, 255, .82);
  font-size: 1rem;
  line-height: 1.75;
  margin: 0;
}
.auth-clean-points {
  display: grid;
  gap: .7rem;
  margin-top: 1.75rem;
}
.auth-clean-points span {
  display: flex;
  align-items: center;
  gap: .72rem;
  width: fit-content;
  max-width: 100%;
  padding: .72rem .9rem;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .92);
  font-weight: 800;
  backdrop-filter: blur(8px);
}
.auth-clean-points i { color: #fde68a; }
.auth-clean-card {
  background: rgba(255, 255, 255, .98);
  padding: 2rem;
}
.auth-clean-card-wide { padding: 2rem; }
.auth-clean-header {
  text-align: left;
  margin-bottom: 1.25rem;
}
.auth-clean-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #dbeafe;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .7rem;
}
.auth-clean-header h2 {
  color: #0f172a;
  font-size: clamp(1.75rem, 3vw, 2.3rem);
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -.035em;
  margin: 0 0 .45rem;
}
.auth-clean-header p {
  color: #64748b;
  line-height: 1.62;
  margin: 0;
}
.auth-clean-google-card {
  border: 1px solid #dbeafe;
  border-radius: 22px;
  padding: 1.2rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 55%, #eff6ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 12px 28px rgba(37, 99, 235, .07);
}
.auth-clean-google-register { padding-bottom: 1.25rem; }
.auth-clean-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}
.auth-clean-section-title strong {
  color: #0f172a;
  font-size: 1rem;
  font-weight: 950;
}
.auth-clean-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .72rem;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  box-shadow: 0 8px 18px rgba(22, 163, 74, .18);
  font-size: .73rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.auth-clean-help {
  color: #64748b;
  font-size: .92rem;
  margin: -.3rem 0 .85rem;
}
.auth-clean-google-btn {
  display: flex;
  justify-content: center;
  min-height: 44px;
}
.auth-clean-divider {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1.35rem 0 1.15rem;
  color: #64748b;
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.auth-clean-divider::before,
.auth-clean-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: #e2e8f0;
}
.auth-clean-form { display: grid; gap: 1rem; }
.auth-clean-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .95rem;
}
.auth-clean-field { display: grid; gap: .42rem; }
.auth-clean-field label,
.auth-clean-label-row label {
  color: #334155;
  font-weight: 900;
  font-size: .92rem;
}
.auth-clean-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.auth-clean-label-row a,
.auth-clean-links a,
.auth-clean-bottom a,
.auth-clean-terms a {
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 850;
}
.auth-clean-label-row a:hover,
.auth-clean-links a:hover,
.auth-clean-bottom a:hover,
.auth-clean-terms a:hover { text-decoration: underline; }
.auth-clean-input {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-clean-input > i {
  position: absolute;
  left: 14px;
  color: #64748b;
  font-size: 1rem;
  z-index: 2;
}
.auth-clean-input .form-control {
  width: 100%;
  min-height: 52px;
  padding: .75rem .95rem .75rem 2.7rem;
  border: 1px solid #d7dee9;
  border-radius: 16px;
  background: #fff;
  color: #0f172a;
  box-shadow: none;
}
.auth-clean-input .form-control:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 .22rem rgba(37, 99, 235, .12);
}
.auth-clean-password .form-control { padding-right: 3.1rem; }
.auth-clean-password .toggle-password {
  position: absolute;
  right: 8px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: #f1f5f9;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.auth-clean-password .toggle-password:hover { background: #e2e8f0; }
.auth-clean-primary {
  min-height: 52px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: #fff;
  font-weight: 950;
  letter-spacing: .01em;
  box-shadow: 0 16px 26px rgba(37, 99, 235, .22);
}
.auth-clean-primary:hover {
  filter: brightness(.98);
  box-shadow: 0 18px 30px rgba(37, 99, 235, .28);
}
.auth-clean-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  color: #cbd5e1;
  font-size: .93rem;
}
.auth-clean-links span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #cbd5e1;
}
.auth-clean-choice-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.auth-clean-manual-choice { max-width: 420px; margin-bottom: 0; }
.auth-clean-choice {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.auth-clean-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.auth-clean-choice span {
  min-height: 50px;
  border: 1px solid #d7dee9;
  border-radius: 16px;
  background: #fff;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-weight: 950;
  transition: all .16s ease;
}
.auth-clean-choice input:checked + span {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: 0 12px 24px rgba(37, 99, 235, .13);
}
.auth-clean-terms {
  display: flex;
  align-items: flex-start;
  gap: .68rem;
  padding: .95rem;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
  color: #475569;
  line-height: 1.55;
  font-size: .92rem;
}
.auth-clean-terms input { margin-top: .22rem; flex: 0 0 auto; }
.auth-clean-bottom {
  text-align: center;
  margin: -.2rem 0 0;
  color: #64748b;
  font-weight: 750;
}
.auth-clean-modal { border-radius: 22px; overflow: hidden; }
.auth-clean-modal .modal-header {
  background: #0f172a;
  color: #fff;
}
.auth-clean-modal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
@media (max-width: 991.98px) {
  .auth-clean-shell,
  .auth-clean-shell-wide {
    width: min(100%, 760px);
    grid-template-columns: 1fr;
  }
  .auth-clean-identity {
    min-height: auto;
    padding: 1.55rem;
    justify-content: flex-start;
  }
  .auth-clean-identity h1 { max-width: 100%; }
  .auth-clean-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .auth-clean-points span {
    width: 100%;
    justify-content: center;
    text-align: center;
    border-radius: 18px;
    flex-direction: column;
    gap: .35rem;
  }
}
@media (max-width: 575.98px) {
  .auth-clean-page { padding: 0 0 1rem; }
  .auth-clean-shell { gap: .85rem; }
  .auth-clean-identity,
  .auth-clean-card {
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .08);
  }
  .auth-clean-identity { padding: 1.25rem; }
  .auth-clean-logo { width: 48px; height: 48px; border-radius: 16px; font-size: 1.35rem; margin-bottom: 1rem; }
  .auth-clean-identity h1 { font-size: 2rem; letter-spacing: -.04em; }
  .auth-clean-identity p { font-size: .95rem; line-height: 1.65; }
  .auth-clean-points { grid-template-columns: 1fr; margin-top: 1.05rem; gap: .55rem; }
  .auth-clean-points span { flex-direction: row; justify-content: flex-start; border-radius: 999px; }
  .auth-clean-card,
  .auth-clean-card-wide { padding: 1.05rem; }
  .auth-clean-header { margin-bottom: 1rem; }
  .auth-clean-header h2 { font-size: 1.55rem; }
  .auth-clean-google-card { padding: .95rem; border-radius: 18px; }
  .auth-clean-section-title { align-items: flex-start; flex-direction: column; gap: .55rem; }
  .auth-clean-google-btn { justify-content: flex-start; overflow: hidden; }
  .auth-clean-grid,
  .auth-clean-choice-row { grid-template-columns: 1fr; }
  .auth-clean-manual-choice { max-width: none; }
  .auth-clean-links { flex-wrap: wrap; }
  .auth-clean-divider { margin: 1.1rem 0 .95rem; }
}

/* Final minimal auth pages: Google first, manual second, no extra marketing blocks */
.auth-min-page {
  min-height: calc(100vh - 170px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem 3rem;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.auth-min-card {
  width: min(100%, 460px);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
  padding: 1.65rem;
}
.auth-min-register-card { width: min(100%, 720px); }
.auth-min-head {
  text-align: center;
  margin-bottom: 1.25rem;
}
.auth-min-head h1 {
  margin: 0 0 .35rem;
  color: #0f172a;
  font-size: clamp(1.65rem, 4vw, 2rem);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -.03em;
}
.auth-min-head p {
  margin: 0;
  color: #64748b;
  font-size: .96rem;
}
.auth-min-google {
  display: grid;
  gap: .85rem;
  padding: 1rem;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background: #f8fbff;
}
.auth-min-google-btn {
  display: flex;
  justify-content: center;
  min-height: 44px;
  overflow: hidden;
}
.auth-min-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.15rem 0;
  color: #94a3b8;
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.auth-min-divider::before,
.auth-min-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}
.auth-min-form { display: grid; gap: .95rem; }
.auth-min-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}
.auth-min-field { display: grid; gap: .38rem; }
.auth-min-field label,
.auth-min-row-label label,
.auth-min-gender-title {
  color: #334155;
  font-size: .9rem;
  font-weight: 800;
}
.auth-min-row-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
}
.auth-min-row-label a,
.auth-min-bottom a,
.auth-min-terms a {
  color: #1d4ed8;
  font-weight: 800;
  text-decoration: none;
}
.auth-min-row-label a:hover,
.auth-min-bottom a:hover,
.auth-min-terms a:hover { text-decoration: underline; }
.auth-min-input {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-min-input > i {
  position: absolute;
  left: 13px;
  z-index: 2;
  color: #64748b;
}
.auth-min-input .form-control {
  width: 100%;
  min-height: 50px;
  padding: .72rem .9rem .72rem 2.55rem;
  border: 1px solid #d7dee9;
  border-radius: 14px;
  color: #0f172a;
  background: #ffffff;
  box-shadow: none;
}
.auth-min-input .form-control:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 .18rem rgba(37, 99, 235, .12);
}
.auth-min-password .form-control { padding-right: 3rem; }
.auth-min-password .toggle-password {
  position: absolute;
  right: 7px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: #f1f5f9;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.auth-min-password .toggle-password:hover { background: #e2e8f0; }
.auth-min-submit {
  min-height: 50px;
  border: 0;
  border-radius: 14px;
  background: #1d4ed8;
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(29, 78, 216, .20);
}
.auth-min-submit:hover { background: #1e40af; }
.auth-min-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-top: 1rem;
  color: #64748b;
  font-size: .94rem;
}
.auth-min-gender {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.auth-min-gender label {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.auth-min-gender input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.auth-min-gender span {
  min-height: 46px;
  border: 1px solid #d7dee9;
  border-radius: 14px;
  background: #fff;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 850;
}
.auth-min-gender input:checked + span {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}
.auth-min-manual-gender { max-width: 360px; }
.auth-min-terms {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .85rem;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  color: #475569;
  line-height: 1.5;
  font-size: .9rem;
}
.auth-min-terms input { flex: 0 0 auto; margin-top: .2rem; }
.auth-min-modal { border-radius: 18px; overflow: hidden; }
.auth-min-modal .modal-header {
  padding: .9rem 1rem;
  background: #0f172a;
  color: #fff;
}
.auth-min-modal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
@media (max-width: 767.98px) {
  .auth-min-page { padding: 1rem .75rem 2rem; }
  .auth-min-card,
  .auth-min-register-card {
    width: 100%;
    padding: 1.1rem;
    border-radius: 18px;
  }
  .auth-min-grid,
  .auth-min-gender { grid-template-columns: 1fr; }
  .auth-min-manual-gender { max-width: none; }
  .auth-min-google-btn { justify-content: flex-start; }
  .auth-min-bottom { flex-wrap: wrap; text-align: center; }
}


/* Homepage sample family tree image */
.ifh-sample-tree-card {
  margin: 0;
  background: #ffffff;
  border: 1px solid #dbe5f5;
  border-radius: 1.25rem;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ifh-sample-tree-media {
  position: relative;
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
  padding: .75rem;
}
.ifh-sample-tree-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: cover;
  border-radius: .95rem;
  border: 1px solid rgba(30, 64, 175, .12);
}
.ifh-sample-tree-caption {
  padding: .95rem 1.05rem 1.1rem;
  color: #334155;
  background: #ffffff;
}
.ifh-sample-tree-caption strong {
  display: block;
  color: #0f172a;
  font-weight: 800;
  margin-bottom: .15rem;
}
.ifh-sample-tree-caption span {
  display: block;
  font-size: .92rem;
  line-height: 1.55;
}
.ifh-question-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.25rem;
}
@media (max-width: 991.98px) {
  .ifh-sample-tree-card { margin-top: .25rem; }
}
@media (max-width: 575.98px) {
  .ifh-sample-tree-media { padding: .55rem; }
  .ifh-sample-tree-caption { padding: .85rem; }
  .ifh-question-list-grid { grid-template-columns: 1fr; }
}

/* Professional notification dropdown */
.notification-dropdown .notification-menu{
    width:min(390px, calc(100vw - 24px));
    max-height:min(520px, calc(100vh - 88px));
    overflow:hidden;
    border:0;
    border-radius:1.1rem;
}
.notification-menu-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:.75rem;
    padding:1rem 1rem .85rem;
    border-bottom:1px solid #eef2f7;
    background:linear-gradient(135deg,#f8fafc,#ffffff);
}
.notification-subtitle{display:block;font-size:.74rem;color:#64748b;font-weight:500;margin-top:.12rem;}
.notification-pill{display:inline-flex;align-items:center;border-radius:999px;background:#fee2e2;color:#b91c1c;font-size:.72rem;font-weight:700;padding:.22rem .5rem;white-space:nowrap;}
.notification-list{max-height:430px;overflow:auto;padding:.35rem;}
.notification-item{border:1px solid transparent;border-radius:.9rem;margin:.28rem 0;background:#fff;}
.notification-item.is-unread{background:#f8fbff;border-color:#dbeafe;box-shadow:0 8px 20px rgba(37,99,235,.08);}
.notification-main{width:100%;display:flex;align-items:center;gap:.65rem;border:0;background:transparent;text-align:left;padding:.72rem .7rem;}
.notification-dot{width:9px;height:9px;border-radius:999px;background:#cbd5e1;flex:0 0 auto;}
.notification-item.is-unread .notification-dot{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.10);}
.notification-text{min-width:0;flex:1;}
.notification-title{display:block;font-size:.9rem;font-weight:750;color:#0f172a;line-height:1.25;}
.notification-time{display:block;font-size:.72rem;color:#64748b;margin-top:.16rem;}
.notification-chevron{color:#94a3b8;transition:transform .18s ease;}
.notification-main[aria-expanded="true"] .notification-chevron{transform:rotate(180deg);}
.notification-detail{padding:0 .8rem .85rem 2rem;}
.notification-detail p{font-size:.82rem;line-height:1.45;color:#475569;margin:0 0 .65rem;white-space:normal;}
.notification-actions{display:flex;flex-wrap:wrap;gap:.4rem;}
.notification-empty{padding:1.25rem;text-align:center;color:#64748b;font-size:.88rem;}
@media (max-width:575.98px){
    .notification-dropdown .notification-menu{width:calc(100vw - 16px);}
    .notification-list{max-height:70vh;}
}


/* Final notification/invitation workflow refinement */
.notification-dropdown .dropdown-toggle::after{display:none;}
.notification-dropdown .notification-menu{border:0;border-radius:1rem;overflow:hidden;z-index:1080;}
.notification-head-actions{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;justify-content:flex-end;}
.notification-read-all{border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:999px;font-size:.72rem;font-weight:700;padding:.22rem .55rem;line-height:1.2;cursor:pointer;}
.notification-read-all:hover,.notification-read-all:focus{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8;}
.notification-title-row{display:flex;align-items:center;gap:.45rem;justify-content:space-between;min-width:0;}
.notification-title-row .notification-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.notification-state{display:inline-flex;align-items:center;border-radius:999px;font-size:.65rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;padding:.15rem .42rem;background:#e2e8f0;color:#475569;flex:0 0 auto;}
.notification-item.is-unread .notification-state{background:#dbeafe;color:#1d4ed8;}
.notification-main{cursor:pointer;touch-action:manipulation;}
.notification-main:hover,.notification-main:focus{background:#f8fafc;outline:none;}
.notification-item.is-unread .notification-title{font-weight:800;}
.invite-action-message{display:none;border-radius:.75rem;padding:.7rem .85rem;font-weight:700;}
.invite-action-message.is-success{display:block;background:#ecfdf3;color:#027a48;border:1px solid #abefc6;}
.invite-action-message.is-error{display:block;background:#fef3f2;color:#b42318;border:1px solid #fecdca;}
.invite-action-message.is-info{display:block;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;}
.member-approval-notice{background:#fff7ed;border:1px solid #fed7aa;border-radius:.9rem;padding:.85rem;color:#9a3412;font-weight:700;}
.member-approval-notice.is-visible{display:block;}
.node.is-pending-approval .node-content,.node.is-pending-approval .node-content.active{box-shadow:0 0 0 3px rgba(245,158,11,.24),0 12px 28px rgba(15,23,42,.12)!important;}
.node-pending-badge{display:inline-flex;align-items:center;justify-content:center;margin-top:.2rem;border-radius:999px;background:#f59e0b;color:#111827;font-size:9px;font-weight:800;line-height:1;padding:.22rem .38rem;white-space:nowrap;}
@media(max-width:575.98px){
  .notification-head-actions{width:100%;justify-content:flex-start;margin-top:.4rem;}
  .notification-title-row{align-items:flex-start;}
  .notification-title-row .notification-title{white-space:normal;}
}

/* Final notification clarity and per-user action guidance */
.notification-action-help{margin:.25rem 0 .7rem;padding:.65rem .75rem;border:1px solid #bfdbfe;background:#eff6ff;color:#1e3a8a;border-radius:.75rem;font-size:.78rem;line-height:1.45;display:flex;gap:.35rem;flex-direction:column;}
.notification-action-help strong{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:#1d4ed8;}
.notification-private-note{margin-top:.55rem;font-size:.7rem;color:#64748b;display:flex;align-items:center;gap:.25rem;}
.notification-item.is-read .notification-action-help{background:#f8fafc;border-color:#e2e8f0;color:#334155;}
.notification-actions .btn{min-height:32px;display:inline-flex;align-items:center;justify-content:center;}

/* Final professional approval notification experience */
.notification-item[data-notification-id]{position:relative;}
.notification-item.is-unread{border-left:4px solid #2563eb;}
.notification-detail{background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);border-top:1px solid #e2e8f0;}
.notification-actions .btn-primary{font-weight:700;box-shadow:0 8px 18px rgba(37,99,235,.18);}
.notification-action-help{position:relative;}
.notification-action-help strong{display:flex;align-items:center;gap:.25rem;}
.notification-private-note{border-top:1px dashed #cbd5e1;padding-top:.45rem;}
.notification-item.is-read{opacity:.94;}
.notification-item.is-read .notification-dot{background:#94a3b8;}
@media(max-width:575.98px){
  .notification-detail{padding:.75rem!important;}
  .notification-actions{display:grid!important;grid-template-columns:1fr;}
  .notification-actions .btn{width:100%;min-height:38px;}
}

/* Final professional notification review UI */
.notification-menu-head strong{display:block;font-size:1rem;line-height:1.2;color:#0f172a;}
.notification-type-icon{width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;background:#e2e8f0;color:#334155;font-size:1rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);}
.notification-type-approval .notification-type-icon{background:#fff7ed;color:#c2410c;}
.notification-type-invite .notification-type-icon{background:#ecfdf5;color:#047857;}
.notification-type-request .notification-type-icon{background:#eff6ff;color:#1d4ed8;}
.notification-type-privacy .notification-type-icon{background:#f5f3ff;color:#6d28d9;}
.notification-summary-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:.2rem;}
.notification-kind{display:inline-flex;align-items:center;border-radius:999px;background:#f1f5f9;color:#475569;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.035em;padding:.14rem .45rem;}
.notification-type-approval .notification-kind{background:#ffedd5;color:#c2410c;}
.notification-type-invite .notification-kind{background:#dcfce7;color:#047857;}
.notification-type-request .notification-kind{background:#dbeafe;color:#1d4ed8;}
.notification-type-privacy .notification-kind{background:#ede9fe;color:#6d28d9;}
.notification-detail-status{margin:0 0 .55rem;}
.notification-detail-label{display:inline-flex;align-items:center;border-radius:.7rem;background:#ffffff;border:1px solid #e2e8f0;color:#334155;font-size:.76rem;font-weight:800;padding:.38rem .55rem;box-shadow:0 5px 12px rgba(15,23,42,.04);}
.notification-type-approval .notification-detail-label{border-color:#fdba74;background:#fff7ed;color:#9a3412;}
.notification-type-approval.is-unread{background:linear-gradient(180deg,#fff7ed 0%,#ffffff 72%);border-color:#fdba74;border-left-color:#f97316;}
.notification-type-approval .notification-action-help{background:#fff7ed;border-color:#fdba74;color:#7c2d12;}
.notification-type-approval .notification-action-help strong{color:#c2410c;}
.notification-main{position:relative;min-height:62px;}
.notification-main:focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:-3px;}
.notification-actions .btn{border-radius:.65rem;font-weight:800;}
.notification-actions .btn-primary{background:#1d4ed8;border-color:#1d4ed8;}
.notification-actions .btn-primary:hover,.notification-actions .btn-primary:focus{background:#1e40af;border-color:#1e40af;}
.notification-private-note{background:#f8fafc;border-radius:.65rem;padding:.48rem .55rem!important;}
@media(max-width:575.98px){
  .notification-main{align-items:flex-start;padding:.85rem .75rem;}
  .notification-type-icon{width:32px;height:32px;}
  .notification-summary-row{align-items:flex-start;flex-direction:column;gap:.18rem;}
  .notification-kind{font-size:.64rem;}
}


/* Simple Family Network Role guide */
.admin-role-guide{
    border:1px solid rgba(37,99,235,.14);
    background:linear-gradient(135deg,rgba(239,246,255,.96),rgba(255,255,255,.98));
    border-radius:16px;
    padding:12px 14px;
    box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.admin-role-guide-title{
    font-weight:800;
    color:#0f172a;
    margin-bottom:4px;
    display:flex;
    align-items:center;
}
.admin-role-guide-text{
    color:#475569;
    font-size:.9rem;
    line-height:1.45;
}
.admin-role-guide-list{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:9px;
}
.admin-role-guide-list span{
    display:inline-flex;
    align-items:center;
    gap:4px;
    border:1px solid rgba(148,163,184,.22);
    background:#fff;
    color:#334155;
    border-radius:999px;
    padding:6px 10px;
    font-size:.78rem;
    line-height:1.2;
    box-shadow:0 4px 10px rgba(15,23,42,.04);
}
.admin-network-role-select{
    min-width:145px;
}
@media (max-width: 767.98px){
    .admin-role-guide-list span{width:100%;justify-content:flex-start;border-radius:12px;}
    .admin-network-role-select{min-width:100%;}
}

/* Final user-friendly notification and visitor join request refinements */
.notification-step-box{margin:.25rem 0 .75rem;padding:.7rem .8rem;border:1px solid #e2e8f0;background:#fff;border-radius:.8rem;color:#334155;font-size:.78rem;line-height:1.45;}
.notification-step-box strong{display:flex;align-items:center;gap:.25rem;text-transform:uppercase;letter-spacing:.04em;font-size:.73rem;color:#0f172a;margin-bottom:.35rem;}
.notification-step-box ol{margin:0;padding-left:1.05rem;}
.notification-step-box li{margin:.18rem 0;}
.notification-type-request .notification-step-box{border-color:#bfdbfe;background:#eff6ff;}
.notification-type-request .notification-step-box strong{color:#1d4ed8;}
.public-join-shell{position:fixed;top:calc(var(--ft-navbar-height,64px) + 12px);left:14px;z-index:1078;width:min(350px,calc(100vw - 28px));display:flex;flex-direction:column;align-items:flex-start;transition:width .22s ease,opacity .18s ease,transform .18s ease;}
.public-join-shell.public-join-collapsed{width:46px;}
.public-join-toggle{min-height:42px;border:0;border-radius:.75rem;box-shadow:0 12px 30px rgba(37,99,235,.22);display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font-weight:800;}
.public-join-shell:not(.public-join-collapsed) .public-join-toggle{width:100%;justify-content:space-between;border-bottom-left-radius:0;border-bottom-right-radius:0;}
.public-join-shell.public-join-collapsed .public-join-toggle{width:46px;height:42px;padding-left:0;padding-right:0;}
.public-join-shell.public-join-collapsed .public-join-label,.public-join-shell.public-join-collapsed .public-join-chevron{display:none;}
#publicJoinPanel{width:100%;max-height:calc(100vh - var(--ft-navbar-height,64px) - 64px);overflow:auto;background:rgba(255,255,255,.98);border:1px solid #dbeafe;border-top:0;border-radius:0 0 1rem 1rem;box-shadow:0 18px 42px rgba(15,23,42,.16);padding:1rem;}
.public-join-shell.public-join-collapsed #publicJoinPanel{display:none;}
.public-join-title{font-size:.95rem;font-weight:850;color:#0f172a;margin-bottom:.65rem;display:flex;align-items:center;}
.public-join-steps{display:grid;gap:.42rem;margin-bottom:.85rem;}
.public-join-steps div{font-size:.78rem;color:#475569;display:flex;gap:.45rem;align-items:flex-start;}
.public-join-steps span{width:20px;height:20px;border-radius:999px;background:#dbeafe;color:#1d4ed8;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:900;flex:0 0 auto;}
.public-join-form .form-control{border-radius:.65rem;}
.public-join-help,.public-join-login-note{font-size:.72rem;color:#64748b;margin-top:.55rem;line-height:1.35;}
.public-join-login-note{padding-top:.55rem;border-top:1px dashed #cbd5e1;}
body.family-tree-child-popup-open .public-join-shell{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateX(-12px);}
.join-request-card-focus{border-color:#2563eb!important;box-shadow:0 0 0 4px rgba(37,99,235,.14),0 16px 36px rgba(15,23,42,.10)!important;background:#f8fbff!important;}
.join-request-simple-guide{border:1px solid #dbeafe;background:#eff6ff;color:#1e3a8a;border-radius:1rem;padding:1rem;margin-bottom:1rem;}
.join-request-simple-guide strong{display:block;color:#1d4ed8;margin-bottom:.35rem;}
.join-request-simple-guide ol{margin:0;padding-left:1.2rem;font-size:.86rem;}
@media (max-width:767.98px){.public-join-shell{top:calc(var(--ft-navbar-height,56px) + 8px);left:10px;width:min(330px,calc(100vw - 20px));}.public-join-shell.public-join-collapsed{width:44px}.public-join-shell.public-join-collapsed .public-join-toggle{width:44px}.notification-step-box{font-size:.76rem}}


/* Final notification clarity: exact item and decision guidance */
.notification-target-box{
  margin:10px 0;
  padding:10px 11px;
  border:1px solid rgba(37,99,235,.18);
  border-radius:13px;
  background:linear-gradient(180deg,#eff6ff 0%,#ffffff 100%);
}
.notification-target-box strong{
  display:flex;
  align-items:center;
  color:#1e3a8a;
  font-size:.82rem;
  margin-bottom:7px;
}
.notification-target-row{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:8px;
  padding:5px 0;
  border-top:1px dashed rgba(37,99,235,.18);
  font-size:.8rem;
}
.notification-target-row:first-of-type{border-top:0;}
.notification-target-row span{color:#64748b;font-weight:700;}
.notification-target-row b{color:#0f172a;font-weight:800;}
@media(max-width:575.98px){
  .notification-target-row{grid-template-columns:1fr;gap:2px;}
}