/* [project]/app/globals.css [app-client] (css) */
* {
  box-sizing: border-box;
}

body {
  color: #0c3147;
  background: #f7f2e8;
  margin: 0;
  font-family: Arial, sans-serif;
}

.top {
  background: #fffdf8;
  border-bottom: 1px solid #e5dccd;
  align-items: center;
  gap: 28px;
  height: 82px;
  padding: 0 4.5%;
  display: flex;
}

.brand {
  align-items: center;
  gap: 12px;
  min-width: 350px;
  display: flex;
}

.brand b {
  font: 700 19px Georgia, serif;
}

.brand small {
  color: #8b7452;
  margin-top: 3px;
  display: block;
}

.logo {
  font-size: 36px;
}

nav {
  flex: 1;
  justify-content: center;
  gap: 26px;
  display: flex;
}

nav a {
  font-size: 14px;
}

.actions {
  gap: 7px;
  display: flex;
}

.actions button {
  background: #fffaf1;
  border: 1px solid #dfd6c8;
  border-radius: 8px;
  padding: 10px 12px;
}

.actions .on {
  background: #efe3ca;
}

.actions .login {
  color: #fff;
  background: #0a354d;
  border-color: #0a354d;
  padding-inline: 20px;
}

.hero {
  background: linear-gradient(105deg, #092c3b 0%, #173c45 43%, #9b7b46 100%);
  height: 480px;
  position: relative;
  overflow: hidden;
}

.hero:after {
  content: "";
  background: linear-gradient(90deg, #04202c33, #1a19100d), radial-gradient(circle at 80%, #efc7763d, #0000 30%);
  position: absolute;
  inset: 0;
}

.heroContent {
  z-index: 2;
  color: #fff;
  max-width: 900px;
  padding: 82px 8%;
  position: relative;
}

.eyebrow, .intro > span, .journey small {
  color: #d6a84f;
  letter-spacing: 2.4px;
  font-size: 12px;
  font-weight: 700;
}

.hero h1 {
  max-width: 680px;
  margin: 18px 0;
  font: 58px / 1.02 Georgia, serif;
}

.hero p {
  font-size: 19px;
}

.search {
  background: #fff;
  border-radius: 11px;
  align-items: center;
  max-width: 730px;
  margin-top: 32px;
  padding: 7px;
  display: flex;
  box-shadow: 0 10px 28px #0003;
}

.search span {
  color: #777;
  padding: 0 10px;
  font-size: 25px;
}

.search input {
  border: 0;
  outline: 0;
  flex: 1;
  font-size: 15px;
}

.search button {
  color: #fff;
  background: #b98938;
  border: 0;
  border-radius: 7px;
  padding: 15px 28px;
  font-weight: bold;
}

.vintage {
  opacity: .48;
  width: 440px;
  height: 350px;
  position: absolute;
  top: 60px;
  right: 5%;
  transform: rotate(-2deg);
}

.photo {
  color: #e7d9bb;
  background: linear-gradient(#bda97d, #746449);
  border: 8px solid #e8d8b7;
  width: 170px;
  height: 215px;
  padding: 12px;
  font: 18px Georgia;
  position: absolute;
  box-shadow: 0 12px 30px #0008;
}

.p1 {
  top: 15px;
  right: 180px;
  transform: rotate(-8deg);
}

.p2 {
  top: 85px;
  right: 30px;
  transform: rotate(8deg);
}

.compass {
  color: #d4ae64;
  font-size: 120px;
  position: absolute;
  bottom: 0;
  right: 0;
}

.stats {
  z-index: 4;
  background: #fffdf9;
  border: 1px solid #e5d9c7;
  border-radius: 14px;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1160px;
  margin: -35px auto 0;
  display: grid;
  position: relative;
  box-shadow: 0 12px 35px #523b1915;
}

.stats div {
  text-align: center;
  border-right: 1px solid #ece2d4;
  padding: 25px;
}

.stats div:last-child {
  border: 0;
}

.stats b {
  font: 29px Georgia;
  display: block;
}

.stats span {
  color: #756e66;
  font-size: 13px;
}

.intro {
  text-align: center;
  max-width: 760px;
  margin: 75px auto 40px;
  padding: 0 20px;
}

.intro h2, .journey h2 {
  margin: 12px;
  font: 40px Georgia;
}

.intro p, .cards p, .journey p {
  color: #68767a;
  line-height: 1.65;
}

.cards {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1180px;
  margin: auto;
  padding: 0 20px 80px;
  display: grid;
}

.cards article {
  background: #fffdf9;
  border: 1px solid #e5dccd;
  border-radius: 14px;
  min-height: 205px;
  padding: 27px;
  box-shadow: 0 5px 20px #59431e0d;
}

.cards i {
  color: #ae7f31;
  font-size: 29px;
  font-style: normal;
}

.cards h3 {
  margin: 13px 0 5px;
  font: 22px Georgia;
}

.cards b {
  color: #ad7d2d;
}

.journey {
  color: #fff;
  background: #0b3044;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: 55px;
  padding: 65px 8%;
  display: grid;
}

.journey h2 {
  margin-left: 0;
}

.journey p {
  color: #d4dde0;
}

.map {
  color: #263c42;
  background: radial-gradient(circle, #dfcea5, #ad9870);
  border: 1px solid #a18a60;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  gap: 11px;
  height: 220px;
  font: 17px Georgia;
  display: flex;
  box-shadow: inset 0 0 60px #6b543755;
}

.map em {
  color: #943c32;
  font-size: 24px;
}

footer {
  color: #fff;
  background: #072536;
  gap: 20px;
  padding: 35px 6%;
  display: flex;
}

footer span {
  color: #d6b976;
}

footer small {
  margin-left: auto;
}

@media (max-width: 950px) {
  nav {
    display: none;
  }

  .brand {
    flex: 1;
    min-width: 0;
  }

  .brand b {
    font-size: 14px;
  }

  .brand small {
    font-size: 10px;
  }

  .heroContent {
    padding: 70px 25px;
  }

  .hero h1 {
    font-size: 43px;
  }

  .vintage {
    opacity: .18;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
    margin: -25px 15px 0;
  }

  .cards, .journey {
    grid-template-columns: 1fr;
  }

  .actions .login {
    display: none;
  }
}

.apiNote, .apiError {
  margin-top: 12px;
  font-size: 12px;
}

.apiNote {
  color: #e7d4a8;
}

.apiError {
  color: #ffd0c9;
}

.results {
  max-width: 1160px;
  margin: 35px auto 0;
  padding: 0 20px;
}

.resultsHead {
  align-items: center;
  gap: 12px;
  display: flex;
}

.resultsHead h2 {
  margin: 0;
  font: 30px Georgia;
}

.resultsHead span {
  color: #fff;
  background: #b98938;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 12px;
}

.resultGrid {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
  display: grid;
}

.resultGrid article {
  background: #fffdf9;
  border: 1px solid #e5dccd;
  border-radius: 12px;
  align-items: center;
  gap: 13px;
  padding: 15px;
  display: flex;
}

.resultGrid h3 {
  margin: 0 0 5px;
  font: 19px Georgia;
}

.resultGrid small {
  color: #80776c;
}

.avatar {
  background: #dce8ec;
  border-radius: 50%;
  place-items: center;
  width: 45px;
  height: 45px;
  font-weight: bold;
  display: grid;
}

.avatar.female {
  background: #eee1df;
}

.noResults {
  color: #746f69;
  background: #fffdf9;
  border: 1px solid #e5dccd;
  border-radius: 10px;
  padding: 18px;
}

@media (max-width: 950px) {
  .resultGrid {
    grid-template-columns: 1fr;
  }
}

.clickableResult {
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.clickableResult:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px #49361918;
}

.personPage {
  color: #0c3147;
  background: #f7f2e8;
  min-height: 100vh;
  padding-bottom: 70px;
}

.personTop {
  background: #fffdf8;
  border-bottom: 1px solid #e5dccd;
  justify-content: space-between;
  align-items: center;
  height: 76px;
  padding: 0 7%;
  display: flex;
}

.personTop button {
  color: #0c3147;
  cursor: pointer;
  background: none;
  border: 0;
  font-weight: 700;
}

.personTop b {
  font-family: Georgia, serif;
}

.personHero {
  color: #fff;
  background: linear-gradient(110deg, #092c3b, #856d45);
  align-items: center;
  gap: 25px;
  padding: 55px 9%;
  display: flex;
}

.personHero h1 {
  margin: 7px 0;
  font: 48px Georgia;
}

.personHero small {
  color: #e1b660;
  letter-spacing: 2px;
}

.personHero p {
  color: #e7e0d4;
  margin: 0;
}

.bigAvatar {
  color: #0b3449;
  background: #d9e6ea;
  border: 4px solid #fff4;
  border-radius: 50%;
  place-items: center;
  width: 105px;
  height: 105px;
  font: 700 34px Georgia;
  display: grid;
}

.bigAvatar.female {
  background: #eadcdb;
}

.personGrid {
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  max-width: 1100px;
  margin: -24px auto 25px;
  padding: 0 20px;
  display: grid;
}

.personGrid article {
  background: #fffdf9;
  border: 1px solid #e5dccd;
  padding: 23px;
}

.personGrid article:first-child {
  border-radius: 12px 0 0 12px;
}

.personGrid article:last-child {
  border-radius: 0 12px 12px 0;
}

.personGrid span {
  color: #897e70;
  margin-bottom: 7px;
  font-size: 12px;
  display: block;
}

.personGrid b {
  font: 18px Georgia;
}

.personCard {
  background: #fffdf9;
  border: 1px solid #e5dccd;
  border-radius: 14px;
  max-width: 1060px;
  margin: 25px auto;
  padding: 30px;
}

.personCard h2 {
  margin-top: 0;
  font: 28px Georgia;
}

.personCard p {
  color: #68767a;
  line-height: 1.65;
}

.relationInfo {
  border-top: 1px solid #eee2d2;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding-top: 20px;
  display: grid;
}

.relationInfo b {
  color: #b98938;
}

@media (max-width: 700px) {
  .personHero {
    padding: 35px 20px;
  }

  .personHero h1 {
    font-size: 34px;
  }

  .personGrid {
    grid-template-columns: 1fr 1fr;
  }

  .personGrid article {
    border-radius: 0 !important;
  }

  .personTop b {
    display: none;
  }
}

.results {
  z-index: 3;
  max-width: 1160px;
  margin: 38px auto 0;
  padding: 0 20px 10px;
  position: relative;
}

.resultGrid {
  margin-bottom: 22px;
}

.stats.statsAfterSearch {
  margin: 22px auto 0;
}

.clickableResult {
  position: relative;
  overflow: hidden;
}

.clickableResult:after {
  content: "→";
  color: #b98938;
  opacity: .7;
  font-size: 22px;
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
}

.clickableResult:hover {
  border-color: #cfb27e;
  box-shadow: 0 10px 26px #4936191f;
}

@media (max-width: 950px) {
  .stats.statsAfterSearch {
    margin: 18px 15px 0;
  }

  .results {
    margin-top: 26px;
  }
}

/* [project]/app/relation.css [app-client] (css) */
.relationSections {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  display: grid;
}

.relationSections h3 {
  margin: 0 0 12px;
  font: 20px Georgia;
}

.relationPerson {
  text-align: left;
  cursor: pointer;
  color: #0c3147;
  background: #fffaf2;
  border: 1px solid #e4d8c7;
  border-radius: 12px;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin-bottom: 9px;
  padding: 13px;
  transition: all .15s;
  display: flex;
}

.relationPerson:hover {
  border-color: #c8a76b;
  transform: translateY(-2px);
  box-shadow: 0 7px 18px #49361916;
}

.relationPerson > span:nth-child(2) {
  flex-direction: column;
  flex: 1;
  display: flex;
}

.relationPerson small {
  color: #a17a38;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
}

.relationPerson b {
  margin: 2px 0;
  font: 17px Georgia;
}

.relationPerson em {
  color: #8b8277;
  font-size: 11px;
  font-style: normal;
}

.relationPerson strong {
  color: #b98938;
  font-size: 20px;
}

.miniAvatar {
  background: #dce8ec;
  border-radius: 50%;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-weight: bold;
  display: grid;
}

.miniAvatar.female {
  background: #eee1df;
}

.emptyRelation {
  background: #faf5eb;
  border-radius: 10px;
  padding: 14px;
  color: #92887c !important;
  font-size: 13px !important;
}

@media (max-width: 850px) {
  .relationSections {
    grid-template-columns: 1fr;
  }
}

/* [project]/app/add-relative.css [app-client] (css) */
.familyHead {
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  display: flex;
}

.familyHead h2 {
  margin: 0;
}

.addRelative, .saveRelative {
  color: #fff;
  cursor: pointer;
  background: #b98938;
  border: 0;
  border-radius: 8px;
  padding: 11px 16px;
  font-weight: bold;
}

.modalBack {
  z-index: 50;
  background: #071b27aa;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

.modal {
  background: #fffdf8;
  border-radius: 16px;
  width: min(560px, 100%);
  padding: 25px;
  box-shadow: 0 20px 70px #0006;
}

.modalHead {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.modalHead h2 {
  margin: 0 0 18px;
  font: 28px Georgia;
}

.modalHead button {
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 28px;
}

.modal label {
  color: #756b60;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 12px;
  display: flex;
}

.modal input, .modal select {
  color: #17394b;
  background: #fff;
  border: 1px solid #d9cdbd;
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
}

.formRow {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.saveRelative {
  width: 100%;
  padding: 14px;
}

.saveRelative:disabled {
  opacity: .6;
}

.formMsg {
  color: #77521d;
  background: #fff0d6;
  border-radius: 8px;
  padding: 11px;
  font-size: 13px;
}

@media (max-width: 600px) {
  .formRow {
    grid-template-columns: 1fr;
  }

  .familyHead {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* [project]/app/add-relative-v08.css [app-client] (css) */
.modal {
  max-height: 90vh;
  overflow: auto;
}

.modal label small {
  color: #9b8e7e;
  font-size: 11px;
}

.duplicateBox {
  background: #fff8e9;
  border: 1px solid #d9b66e;
  border-radius: 10px;
  margin: 0 0 14px;
  padding: 12px;
}

.duplicateBox > b {
  color: #6e5121;
  margin-bottom: 8px;
  display: block;
}

.duplicateBox button {
  text-align: left;
  cursor: pointer;
  color: #17394b;
  background: #fff;
  border: 1px solid #e3d2ad;
  border-radius: 8px;
  width: 100%;
  margin-top: 7px;
  padding: 10px;
}

.duplicateBox button small {
  color: #8b8174;
  margin-left: 5px;
}

.duplicateBox button span {
  color: #ad7d2d;
  margin-top: 4px;
  font-size: 11px;
  font-weight: bold;
  display: block;
}

/* [project]/app/person-v09.css [app-client] (css) */
.personTop {
  gap: 18px;
}

.personTopActions {
  align-items: center;
  gap: 7px;
  display: flex;
}

.personTopActions > button {
  color: #17394b;
  cursor: pointer;
  background: #fffaf1;
  border: 1px solid #d9cdbd;
  border-radius: 8px;
  padding: 8px 10px;
}

.personTopActions .langOn {
  background: #eadfc8;
  border-color: #cdb688;
}

.personTopActions .editPerson {
  color: #fff;
  background: #b98938;
  border-color: #b98938;
  padding-inline: 14px;
  font-weight: 700;
}

.maidenLine {
  font-size: 13px;
  color: #eadcbf !important;
  margin-top: 8px !important;
}

.maidenLine b {
  color: #fff;
}

.personGrid article > small {
  color: #8c8175;
  margin-top: 6px;
  font-size: 11px;
  display: block;
}

.modal input, .modal select {
  width: 100%;
}

@media (max-width: 760px) {
  .personTop {
    flex-wrap: wrap;
    height: auto;
    min-height: 76px;
    padding: 12px 18px;
  }

  .personTopActions {
    justify-content: flex-end;
    width: 100%;
  }

  .personTopActions .editPerson {
    margin-left: auto;
  }
}

/* [project]/app/person-tree-button.css [app-client] (css) */
.personTopActions .treePersonBtn {
  color: #fff;
  background: #0b354b;
  border-color: #0b354b;
  padding-inline: 14px;
  font-weight: 700;
}

/* [project]/app/tree.css [app-client] (css) */
.treePage {
  color: #0b3349;
  background: #f5efe4;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

.treeHeader {
  z-index: 20;
  background: #fffdf8;
  border-bottom: 1px solid #e1d7c8;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 76px;
  padding: 12px 4%;
  display: flex;
  position: sticky;
  top: 0;
}

.treeBrand {
  flex-direction: column;
  display: flex;
}

.treeBrand b {
  font: 18px Georgia, serif;
}

.treeBrand span {
  color: #9a7741;
  margin-top: 3px;
  font-size: 11px;
}

.treeTools {
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  display: flex;
}

.treeTools button, .treeTools select {
  color: #14374b;
  cursor: pointer;
  background: #fffaf1;
  border: 1px solid #d8ccba;
  border-radius: 8px;
  padding: 9px 11px;
}

.treeTools button.active {
  background: #eadfc8;
}

.treeTools label {
  color: #7f7468;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  display: flex;
}

.treeIntro {
  text-align: center;
  padding: 34px 20px 18px;
}

.treeIntro > span {
  letter-spacing: 2px;
  color: #b08134;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: bold;
}

.treeIntro h1 {
  margin: 8px 0;
  font: 42px Georgia;
}

.treeIntro p {
  color: #7a7771;
  margin: 0;
}

.treeCanvas {
  padding: 20px 25px 80px;
  overflow: auto visible;
}

.ancestorArea {
  justify-content: center;
  align-items: flex-start;
  min-width: max-content;
  padding: 10px 40px 35px;
  display: flex;
}

.ancestorBranch {
  flex-direction: column;
  align-items: center;
  margin: 0 10px;
  display: flex;
  position: relative;
}

.parentRow {
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  margin-top: 46px;
  display: flex;
  position: relative;
}

.parentRow:before {
  content: "";
  background: #b7aa95;
  height: 1px;
  position: absolute;
  top: -25px;
  left: 16%;
  right: 16%;
}

.parentRow > .ancestorBranch:before {
  content: "";
  background: #b7aa95;
  width: 1px;
  height: 25px;
  position: absolute;
  top: -25px;
  left: 50%;
}

.ancestorBranch > .treeNode + .parentRow:after {
  content: "";
  background: #b7aa95;
  width: 1px;
  height: 21px;
  position: absolute;
  top: -46px;
  left: 50%;
}

.treeNode {
  z-index: 2;
  background: #fffdf9;
  border: 1px solid #d8dce0;
  border-left: 4px solid #8ab3c9;
  border-radius: 12px;
  align-items: stretch;
  width: 220px;
  min-height: 78px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 16px #3228190f;
}

.treeNode.female {
  border-left-color: #d8a4aa;
}

.treeNode.current {
  outline-offset: 2px;
  outline: 3px solid #c8953d;
}

.nodeMain {
  text-align: left;
  cursor: pointer;
  color: #12364a;
  background: none;
  border: 0;
  flex: 1;
  align-items: center;
  gap: 10px;
  padding: 12px;
  display: flex;
}

.treeAvatar {
  background: #dce9ef;
  border-radius: 50%;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  font-weight: 700;
  display: grid;
}

.treeNode.female .treeAvatar {
  background: #eedfe1;
}

.nodeText {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.nodeText b {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 130px;
  font: 16px Georgia;
  overflow: hidden;
}

.nodeText small {
  color: #8f8578;
  margin-top: 4px;
}

.nodePerson {
  color: #af7d2e;
  cursor: pointer;
  background: #faf5eb;
  border: 0;
  border-left: 1px solid #eee1cf;
  width: 34px;
  font-size: 16px;
}

.ownFamilyArea {
  border-top: 1px solid #d9cdbb;
  min-width: 700px;
  max-width: 1240px;
  margin: 34px auto 0;
  padding-top: 28px;
}

.ownFamilyHeading {
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  display: flex;
}

.ownFamilyHeading > span {
  letter-spacing: 1.8px;
  color: #9b793f;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 11px;
  font-weight: bold;
}

.ownFamilyHeading > div {
  background: #e1d5c3;
  flex: 1;
  height: 1px;
}

.familyUnits {
  gap: 38px;
  display: grid;
}

.familyUnit {
  flex-direction: column;
  align-items: center;
  padding: 4px 20px 26px;
  display: flex;
  position: relative;
}

.familyUnit + .familyUnit {
  border-top: 1px dashed #d8ccb9;
  padding-top: 30px;
}

.familyUnitLabel {
  color: #a37a38;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 14px;
  font-size: 10px;
  font-weight: bold;
}

.coupleRow {
  z-index: 3;
  grid-template-columns: 220px 88px 220px;
  justify-content: center;
  align-items: center;
  display: grid;
  position: relative;
}

.coupleRow.singleParentCouple {
  grid-template-columns: 220px;
}

.couplePerson {
  justify-content: center;
  display: flex;
}

.partnerConnector {
  place-items: center;
  height: 78px;
  display: grid;
  position: relative;
}

.partnerConnector:before, .partnerConnector:after {
  content: "";
  background: #b88a43;
  height: 2px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.partnerConnector:before {
  left: 0;
  right: 50%;
}

.partnerConnector:after {
  left: 50%;
  right: 0;
}

.partnerConnector span {
  color: #b27d2c;
  z-index: 2;
  background: #f5efe4;
  border: 1px solid #c99b50;
  border-radius: 50%;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 14px;
  display: grid;
  position: relative;
}

.familyChildren {
  flex-direction: column;
  align-items: center;
  width: min(100%, 1000px);
  padding-top: 52px;
  display: flex;
  position: relative;
}

.childrenStem {
  background: #b7aa95;
  width: 1px;
  height: 39px;
  position: absolute;
  top: 0;
  left: 50%;
}

.familySectionLabel {
  letter-spacing: 1.5px;
  color: #9b793f;
  text-transform: uppercase;
  z-index: 2;
  background: #f5efe4;
  margin-bottom: 24px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: bold;
  position: relative;
}

.childrenBranch {
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  padding-top: 24px;
  display: flex;
  position: relative;
}

.childrenBranch:before {
  content: "";
  background: #b7aa95;
  height: 1px;
  position: absolute;
  top: 0;
  left: 119px;
  right: 119px;
}

.childBranch {
  padding-top: 0;
  position: relative;
}

.childBranch:before {
  content: "";
  background: #b7aa95;
  width: 1px;
  height: 24px;
  position: absolute;
  top: -24px;
  left: 50%;
}

.familyChildren.oneChild .childrenBranch:before {
  display: none;
}

.familyChildren.oneChild .childBranch:before {
  top: -24px;
}

.treeMessage {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 14px;
  max-width: 600px;
  margin: 100px auto;
  padding: 30px;
}

@media (max-width: 850px) {
  .treeHeader {
    flex-direction: column;
    align-items: flex-start;
  }

  .treeTools {
    width: 100%;
  }

  .treeIntro h1 {
    font-size: 34px;
  }

  .treeCanvas {
    padding-inline: 10px;
  }

  .ownFamilyArea {
    min-width: 620px;
  }
}

@media (max-width: 650px) {
  .treeIntro {
    padding-top: 24px;
  }

  .treeCanvas {
    padding: 10px 0 55px;
  }

  .ancestorArea {
    padding-left: 22px;
    padding-right: 22px;
  }

  .ownFamilyArea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 24px 12px 0;
  }

  .familyUnit {
    padding-left: 0;
    padding-right: 0;
  }

  .coupleRow {
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
    width: 100%;
  }

  .coupleRow.singleParentCouple {
    grid-template-columns: minmax(0, 220px);
  }

  .coupleRow .treeNode {
    width: 100%;
    min-width: 0;
  }

  .coupleRow .nodeMain {
    gap: 7px;
    padding: 9px 8px;
  }

  .coupleRow .treeAvatar {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    font-size: 12px;
  }

  .coupleRow .nodeText b {
    max-width: 80px;
    font-size: 13px;
  }

  .coupleRow .nodeText small {
    font-size: 10px;
  }

  .coupleRow .nodePerson {
    width: 28px;
  }

  .partnerConnector {
    width: 42px;
  }

  .partnerConnector span {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .familyChildren {
    padding-top: 45px;
  }

  .childrenBranch {
    scroll-snap-type: x proximity;
    justify-content: flex-start;
    width: 100%;
    padding: 24px 8px 8px;
    overflow-x: auto;
  }

  .childrenBranch:before {
    left: 118px;
    right: 118px;
  }

  .childBranch {
    scroll-snap-align: center;
    flex: 0 0 220px;
  }

  .childBranch .treeNode {
    width: 220px;
  }
}

.partnerConnector {
  position: relative;
}

.partnerConnector small {
  white-space: nowrap;
  color: #9a7845;
  font-size: 9px;
  font-weight: bold;
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.partnerConnector.divorcedConnector span {
  color: #9d4c58;
  background: #fff6f6;
  border-color: #c98585;
}

.partnerConnector.divorcedConnector small {
  color: #9d4c58;
}

/* [project]/app/search-maiden.css [app-client] (css) */
.maidenSearch {
  margin-top: 4px;
  font-weight: 600;
  display: block;
  color: #a3793d !important;
  font-size: 11px !important;
}

/* [project]/app/auth.css [app-client] (css) */
.authPage, .adminPage {
  color: #0d3348;
  background: #f5efe4;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

.authTop, .adminTop {
  background: #fffdf8;
  border-bottom: 1px solid #e4dacb;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 78px;
  padding: 12px 5%;
  display: flex;
}

.authTop > div:nth-child(2) {
  text-align: center;
}

.authTop b {
  font: 18px Georgia, serif;
}

.authTop small {
  color: #9b7b4c;
  margin-top: 3px;
  display: block;
}

.authTop button, .adminTop button {
  color: #16394d;
  cursor: pointer;
  background: #fffaf1;
  border: 1px solid #d9cdbd;
  border-radius: 8px;
  padding: 9px 11px;
}

.authTop button.active {
  background: #eadfc8;
}

.authWrap {
  grid-template-columns: 1fr 440px;
  align-items: center;
  gap: 70px;
  max-width: 1100px;
  margin: 70px auto;
  padding: 0 25px;
  display: grid;
}

.authIntro span {
  letter-spacing: 2px;
  color: #b1843d;
  font-size: 11px;
  font-weight: bold;
}

.authIntro h1 {
  margin: 12px 0 20px;
  font: 46px / 1.08 Georgia;
}

.authIntro p {
  color: #6f7779;
  line-height: 1.65;
}

.authCard, .adminCard {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 12px 35px #48331914;
}

.authTabs {
  background: #f4eee4;
  border-radius: 10px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 24px;
  padding: 4px;
  display: grid;
}

.authTabs button {
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 11px;
}

.authTabs button.active {
  background: #fff;
  box-shadow: 0 3px 10px #5f482017;
}

.authCard label {
  color: #766d64;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 15px;
  font-size: 12px;
  display: flex;
}

.authCard input {
  border: 1px solid #d9cdbd;
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
}

.primary, .secondary {
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  width: 100%;
  margin-top: 8px;
  padding: 13px;
  font-weight: bold;
}

.primary {
  color: #fff;
  background: #0d354b;
}

.secondary {
  color: #17394c;
  background: #eee5d8;
}

.authMsg {
  color: #77521d;
  background: #fff0d6;
  border-radius: 8px;
  padding: 11px;
  font-size: 13px;
}

.loggedUser {
  background: #f8f2e9;
  border-radius: 10px;
  flex-direction: column;
  gap: 4px;
  margin: 15px 0;
  padding: 18px;
  display: flex;
}

.loggedUser em {
  color: #b17f30;
  font-style: normal;
  font-weight: bold;
}

.adminTop h1 {
  margin: 0;
  font: 30px Georgia;
}

.adminCard {
  max-width: 1000px;
  margin: 45px auto;
}

.userHeader, .userRow {
  grid-template-columns: 1.6fr 1fr 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px;
  display: grid;
}

.userHeader {
  color: #867a6c;
  border-bottom: 1px solid #eadfce;
  font-size: 12px;
}

.userRow {
  border-bottom: 1px solid #f0e8dc;
}

.userRow > div {
  flex-direction: column;
  display: flex;
}

.userRow small {
  color: #8b8174;
}

.userRow select {
  background: #fff;
  border: 1px solid #d8ccbb;
  border-radius: 8px;
  padding: 9px;
}

@media (max-width: 800px) {
  .authWrap {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 35px;
  }

  .authIntro h1 {
    font-size: 36px;
  }

  .userHeader {
    display: none;
  }

  .userRow {
    grid-template-columns: 1fr;
  }

  .adminCard {
    margin: 20px 12px;
  }
}

/* [project]/app/privacy.css [app-client] (css) */
.protectedRelation {
  opacity: .78;
  cursor: default !important;
  background: #f8f4ec !important;
  border-style: dashed !important;
}

.protectedRelation .protectedAvatar, .protectedTreeNode .treeAvatar {
  filter: grayscale();
  background: #ece7de !important;
}

.protectedRelation em {
  max-width: 220px;
}

.protectedTreeNode {
  opacity: .82;
  border-style: dashed;
  box-shadow: none !important;
  border-left-color: #a79f92 !important;
}

.protectedNodeMain {
  cursor: default !important;
}

/* [project]/app/profile.css [app-client] (css) */
.profilePage {
  color: #0e354b;
  background: #f5efe4;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

.profileTop {
  background: #fffdf8;
  border-bottom: 1px solid #e4dacb;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 78px;
  padding: 12px 5%;
  display: flex;
}

.profileTop > button, .profileLang button {
  color: #15394d;
  cursor: pointer;
  background: #fffaf2;
  border: 1px solid #d8ccbc;
  border-radius: 8px;
  padding: 9px 11px;
}

.profileLang {
  gap: 6px;
  display: flex;
}

.profileLang button.active {
  background: #eadfc8;
}

.profileBrand {
  text-align: center;
}

.profileBrand b {
  font: 18px Georgia, serif;
  display: block;
}

.profileBrand small {
  color: #987a4e;
  margin-top: 3px;
  display: block;
}

.profileWrap {
  grid-template-columns: 300px 1fr;
  gap: 26px;
  max-width: 1120px;
  margin: 55px auto;
  padding: 0 22px;
  display: grid;
}

.profileSide, .profileCard {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 12px 35px #48331912;
}

.profileSide {
  text-align: center;
  height: max-content;
}

.profileAvatar {
  color: #17394c;
  background: #dce8ec;
  border: 5px solid #f7f0e5;
  border-radius: 50%;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: 0 auto 16px;
  font: 30px Georgia;
  display: grid;
}

.profileSide h1 {
  margin: 4px 0;
  font: 25px Georgia;
}

.profileSide > span {
  color: #81796e;
  display: block;
}

.profileSide > em {
  color: #8d682c;
  background: #efe3cb;
  border-radius: 999px;
  margin: 12px 0 20px;
  padding: 6px 11px;
  font-size: 12px;
  font-style: normal;
  font-weight: bold;
  display: inline-block;
}

.profileMeta {
  border-top: 1px solid #eee2d1;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding-top: 16px;
  display: flex;
}

.profileMeta small {
  color: #8e8375;
}

.profileMeta b {
  font-size: 14px;
}

.profileCard .eyebrow {
  color: #b0833c;
  letter-spacing: 1.8px;
  font-size: 10px;
  font-weight: bold;
}

.profileCard h2 {
  margin: 7px 0 25px;
  font: 34px Georgia;
}

.profileCard label {
  color: #776e64;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
  font-size: 12px;
  display: flex;
}

.profileCard input {
  color: #18394b;
  background: #fff;
  border: 1px solid #d8ccbc;
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
}

.profileGrid {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  display: grid;
}

.profileRoleLine {
  background: #f7f1e8;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 13px 15px;
  display: flex;
}

.profileRoleLine span {
  color: #7d746a;
  font-size: 12px;
}

.profileRoleLine b {
  color: #9a7130;
}

.passwordBlock {
  border-top: 1px solid #eadfce;
  margin-top: 6px;
  padding-top: 20px;
}

.passwordBlock h3 {
  margin: 0 0 5px;
  font: 21px Georgia;
}

.passwordBlock p {
  color: #8d8378;
  margin: 0 0 18px;
  font-size: 12px;
}

.profilePrimary, .profileSecondary, .profileLogout {
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  width: 100%;
  margin-top: 8px;
  padding: 13px;
  font-weight: bold;
}

.profilePrimary {
  color: #fff;
  background: #0e354b;
}

.profileSecondary {
  color: #16394c;
  background: #eee5d8;
}

.profileLogout {
  color: #9b3e2e;
  background: #fff1ed;
  border: 1px solid #edd0c9;
  margin-top: 14px;
}

.profileError {
  color: #8c3d2a;
  background: #fff0e8;
  border-radius: 8px;
  padding: 11px;
}

.profileSuccess {
  color: #356a3a;
  background: #edf6ed;
  border-radius: 8px;
  padding: 11px;
}

.profileCentered {
  text-align: center;
  max-width: 520px;
  margin: 90px auto;
}

@media (max-width: 800px) {
  .profileWrap {
    grid-template-columns: 1fr;
    margin-top: 25px;
  }

  .profileGrid {
    grid-template-columns: 1fr;
  }

  .profileTop {
    flex-wrap: wrap;
  }

  .profileBrand {
    order: -1;
    width: 100%;
  }
}

/* [project]/app/onboarding.css [app-client] (css) */
.authRegisterGrid, .onboardGrid {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  display: grid;
}

.authCard select, .onboardCard select {
  color: #17394b;
  background: #fff;
  border: 1px solid #d9cdbd;
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
}

.onboardPage {
  color: #0e354b;
  background: #f5efe4;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

.onboardTop {
  background: #fffdf8;
  border-bottom: 1px solid #e3d9ca;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  min-height: 78px;
  padding: 12px 5%;
  display: flex;
}

.onboardTop > b {
  font: 18px Georgia, serif;
}

.onboardTop button {
  color: #15394d;
  cursor: pointer;
  background: #fffaf1;
  border: 1px solid #d8ccbb;
  border-radius: 8px;
  padding: 9px 11px;
}

.onboardTop button.active {
  background: #eadfc8;
}

.onboardWrap {
  grid-template-columns: .9fr 1.1fr;
  align-items: start;
  gap: 45px;
  max-width: 1120px;
  margin: 55px auto;
  padding: 0 22px;
  display: grid;
}

.onboardIntro > span {
  letter-spacing: 2px;
  color: #af813a;
  font-size: 10px;
  font-weight: bold;
}

.onboardIntro h1 {
  margin: 12px 0 18px;
  font: 45px / 1.08 Georgia;
}

.onboardIntro p {
  color: #727a7b;
  line-height: 1.6;
}

.privacyHint {
  color: #4a6c51;
  background: #edf3ee;
  border: 1px solid #d3e3d5;
  border-radius: 10px;
  margin-top: 25px;
  padding: 13px;
  font-size: 13px;
}

.onboardCard {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 12px 35px #48331912;
}

.onboardCard label {
  color: #776e64;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 15px;
  font-size: 12px;
  display: flex;
}

.onboardCard input {
  background: #fff;
  border: 1px solid #d8ccbc;
  border-radius: 8px;
  padding: 12px;
  font-size: 15px;
}

.onboardPrimary, .onboardSecondary, .createOwn {
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  width: 100%;
  padding: 13px;
  font-weight: bold;
}

.onboardPrimary {
  color: #fff;
  background: #0e354b;
}

.onboardSecondary {
  color: #15394d;
  background: #eee5d8;
}

.createOwn {
  color: #946b2d;
  background: #fff5e5;
  border: 1px solid #e7d0a3;
  margin-top: 14px;
}

.onboardError {
  color: #8c3d2a;
  background: #fff0e8;
  border-radius: 8px;
  padding: 11px;
}

.candidateArea {
  border-top: 1px solid #eadfce;
  margin-top: 24px;
  padding-top: 22px;
}

.candidateArea h2 {
  margin: 0 0 6px;
  font: 24px Georgia;
}

.candidateArea > p {
  color: #83796d;
  font-size: 12px;
}

.candidate {
  background: #fff;
  border: 1px solid #e5dac9;
  border-radius: 12px;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px;
  display: grid;
}

.candidateAvatar {
  background: #dce9ef;
  border-radius: 50%;
  place-items: center;
  width: 46px;
  height: 46px;
  font-weight: bold;
  display: grid;
}

.candidateText {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.candidateText b {
  font: 17px Georgia;
}

.candidateText small {
  color: #a77b36;
  margin-top: 2px;
}

.candidateText span, .candidateText em {
  color: #857b70;
  margin-top: 2px;
  font-size: 11px;
  font-style: normal;
}

.candidate > button {
  color: #fff;
  cursor: pointer;
  background: #0e354b;
  border: 0;
  border-radius: 8px;
  max-width: 160px;
  padding: 10px 12px;
}

.candidate > button:disabled {
  color: #6c665f;
  cursor: not-allowed;
  background: #c9c2b7;
}

.onboardDone {
  text-align: center;
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 18px;
  max-width: 650px;
  margin: 100px auto;
  padding: 42px;
}

.doneIcon {
  color: #3e7845;
  background: #e5f1e5;
  border-radius: 50%;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  font-size: 34px;
  display: grid;
}

.onboardDone h1 {
  font: 34px Georgia;
}

.doneActions {
  gap: 10px;
  margin-top: 25px;
  display: grid;
}

.genealogyStatus {
  border-top: 1px solid #eee2d1;
  flex-direction: column;
  gap: 6px;
  margin-top: 17px;
  padding-top: 17px;
  display: flex;
}

.genealogyStatus small {
  color: #8e8375;
}

.genealogyStatus > b {
  font-size: 13px;
  line-height: 1.4;
}

.genealogyButtons {
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 7px;
  display: grid;
}

.genealogyButtons button {
  color: #17394c;
  cursor: pointer;
  background: #edf1f2;
  border: 0;
  border-radius: 8px;
  padding: 10px;
  font-weight: bold;
}

@media (max-width: 800px) {
  .authRegisterGrid, .onboardGrid {
    grid-template-columns: 1fr;
  }

  .onboardWrap {
    grid-template-columns: 1fr;
    margin-top: 30px;
  }

  .onboardIntro h1 {
    font-size: 36px;
  }

  .candidate {
    grid-template-columns: 44px 1fr;
  }

  .candidate > button {
    grid-column: 1 / -1;
    max-width: none;
  }
}

/* [project]/app/relationships.css [app-client] (css) */
.profileRelations {
  text-align: left;
  cursor: pointer;
  color: #17394c;
  background: #fff7e8;
  border: 1px solid #d9c79d;
  border-radius: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 12px;
}

.profileRelations b {
  display: block;
}

.profileRelations small {
  color: #8d7653;
  margin-top: 4px;
  line-height: 1.35;
  display: block;
}

.relationshipsPage {
  color: #0e354b;
  background: #f5efe4;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

.relationshipsTop {
  background: #fffdf8;
  border-bottom: 1px solid #e3d9ca;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  min-height: 78px;
  padding: 12px 5%;
  display: flex;
}

.relationshipsTop > div:nth-child(2) {
  text-align: center;
}

.relationshipsTop b {
  font: 18px Georgia, serif;
  display: block;
}

.relationshipsTop small {
  color: #9a7a49;
  margin-top: 3px;
  display: block;
}

.relationshipsTop button {
  color: #15394d;
  cursor: pointer;
  background: #fffaf1;
  border: 1px solid #d8ccbb;
  border-radius: 8px;
  padding: 9px 11px;
}

.relationshipsTop button.active {
  background: #eadfc8;
}

.relationshipsHero {
  text-align: center;
  max-width: 900px;
  margin: 46px auto 22px;
  padding: 0 20px;
}

.relationshipsHero > span {
  letter-spacing: 2px;
  color: #af813a;
  font-size: 10px;
  font-weight: bold;
}

.relationshipsHero h1 {
  margin: 10px 0;
  font: 42px Georgia;
}

.relationshipsHero p {
  color: #737a7a;
  max-width: 750px;
  margin: auto;
  line-height: 1.6;
}

.relationshipsGrid {
  gap: 22px;
  max-width: 1050px;
  margin: 25px auto 70px;
  padding: 0 22px;
  display: grid;
}

.relSection {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 16px;
  padding: 23px;
}

.relSection h2 {
  margin: 0 0 15px;
  font: 25px Georgia;
}

.relEmpty {
  color: #8a8177;
  font-size: 13px;
}

.relCard {
  border-top: 1px solid #eee4d6;
  grid-template-columns: 52px 1fr minmax(180px, auto);
  align-items: center;
  gap: 13px;
  padding: 14px 0;
  display: grid;
}

.relCard:first-of-type {
  border-top: 0;
}

.relAvatar {
  color: #17394b;
  background: #dce8ec;
  border-radius: 50%;
  place-items: center;
  width: 48px;
  height: 48px;
  font-weight: bold;
  display: grid;
}

.relPerson {
  flex-direction: column;
  display: flex;
}

.relPerson b {
  font: 17px Georgia;
}

.relPerson span {
  color: #8d8377;
  font-size: 11px;
}

.relPerson em {
  color: #a27735;
  margin-top: 4px;
  font-size: 12px;
  font-style: normal;
  font-weight: bold;
}

.relActions {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.relActions button {
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: bold;
}

.relPrimary {
  color: #fff;
  background: #0e354b;
}

.relSecondary {
  color: #17394b;
  background: #eee5d8;
}

.relDanger {
  color: #9b3d2f;
  background: #fff0ed;
  border: 1px solid #eccfc8 !important;
}

.threeActions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  display: flex;
}

.incomingText {
  color: #776f66;
  text-align: right;
  margin-bottom: 8px;
  font-size: 12px;
}

.statusPill {
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: bold;
  display: inline-block;
}

.statusPill.waiting {
  color: #8e6728;
  background: #fff3db;
}

.statusPill.confirmed {
  color: #3f7045;
  background: #e7f2e8;
}

.confirmedSection {
  border-color: #cfdfd0;
}

.relationshipsError, .relationshipsLoading {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 12px;
  max-width: 700px;
  margin: 35px auto;
  padding: 18px;
}

.relationshipsError {
  color: #8f3c2c;
}

@media (max-width: 760px) {
  .relationshipsTop {
    flex-wrap: wrap;
  }

  .relationshipsTop > div:nth-child(2) {
    order: -1;
    width: 100%;
  }

  .relCard {
    grid-template-columns: 48px 1fr;
  }

  .relActions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .relActions > *, .threeActions {
    width: 100%;
  }

  .threeActions button {
    flex: 1;
  }

  .incomingText {
    text-align: left;
  }

  .relationshipsHero h1 {
    font-size: 34px;
  }
}

/* [project]/app/registration-layout-fix.css [app-client] (css) */
.authCard, .authCard *, .onboardCard, .onboardCard * {
  box-sizing: border-box;
}

.authRegisterGrid, .onboardGrid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  display: grid;
}

.authRegisterGrid > *, .onboardGrid > * {
  min-width: 0;
}

.authCard label, .onboardCard label {
  width: 100%;
  min-width: 0;
}

.authCard input, .authCard select, .onboardCard input, .onboardCard select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: block;
}

.authCard label, .onboardCard label {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .authRegisterGrid, .onboardGrid {
    grid-template-columns: 1fr;
  }
}

/* [project]/app/navigation-pages.css [app-client] (css) */
nav a {
  cursor: pointer;
  color: #0c3147;
  padding: 31px 0;
  text-decoration: none;
  position: relative;
}

nav a:hover {
  color: #aa7a30;
}

nav a.navActive {
  color: #a9772d;
  font-weight: 700;
}

nav a.navActive:after {
  content: "";
  background: #b98938;
  border-radius: 3px;
  height: 2px;
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
}

.homeNavCard {
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}

.homeNavCard:hover {
  border-color: #cfb27e;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px #4936191f;
}

.sectionTop .brand {
  cursor: pointer;
}

.sectionHero {
  color: #fff;
  text-align: center;
  background: linear-gradient(110deg, #092c3b, #735f42);
  padding: 62px 20px;
}

.sectionHero > span {
  color: #d7aa53;
  letter-spacing: 2.4px;
  font-size: 11px;
  font-weight: bold;
}

.sectionHero h1 {
  margin: 11px 0;
  font: 44px Georgia;
}

.sectionHero p {
  color: #e1e4df;
  max-width: 760px;
  margin: 0 auto 22px;
  line-height: 1.65;
}

.sectionPrimary, .sectionSecondary {
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding: 12px 18px;
  font-weight: bold;
}

.sectionPrimary {
  color: #fff;
  background: #b98938;
}

.sectionSecondary {
  color: #17394b;
  background: #eee5d8;
}

.directoryWrap {
  max-width: 1160px;
  margin: 42px auto 70px;
  padding: 0 22px;
}

.directorySearch {
  box-sizing: border-box;
  color: #17394b;
  background: #fffdf9;
  border: 1px solid #d9cdbb;
  border-radius: 11px;
  outline: none;
  width: 100%;
  padding: 15px 17px;
  font-size: 15px;
}

.directorySearch:focus {
  border-color: #b98938;
  box-shadow: 0 0 0 3px #b9893815;
}

.directoryGrid {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
  display: grid;
}

.directoryCard {
  cursor: pointer;
  background: #fffdf9;
  border: 1px solid #e4dacb;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 15px;
  transition: all .15s;
  display: flex;
}

.directoryCard:hover {
  border-color: #cdb27f;
  transform: translateY(-2px);
  box-shadow: 0 7px 18px #513c1d12;
}

.directoryCard h3 {
  margin: 0 0 4px;
  font: 18px Georgia;
}

.directoryCard small {
  color: #a77c36;
  display: block;
}

.directoryCard span {
  color: #81786d;
  margin-top: 5px;
  font-size: 11px;
  display: block;
}

.directoryEmpty {
  color: #7c746c;
  background: #fffdf9;
  border: 1px solid #e4dacb;
  border-radius: 10px;
  padding: 18px;
}

.surnameGrid, .placeGrid {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 18px;
  display: grid;
}

.surnameCard, .placeCard {
  text-align: left;
  color: #17394b;
  cursor: pointer;
  background: #fffdf9;
  border: 1px solid #e4dacb;
  border-radius: 11px;
  padding: 16px;
}

.surnameCard b, .placeCard b {
  font: 18px Georgia;
  display: block;
}

.surnameCard span, .placeCard span {
  color: #8c8175;
  margin-top: 5px;
  font-size: 11px;
  display: block;
}

.surnameCard.selected, .placeCard.selected {
  background: #fff7e9;
  border-color: #b98938;
  box-shadow: 0 0 0 2px #b9893812;
}

.selectedDirectory {
  border-top: 1px solid #ded2c1;
  margin-top: 30px;
  padding-top: 25px;
}

.selectedDirectory h2 {
  margin: 0;
  font: 30px Georgia;
}

.historyTimeline {
  max-width: 900px;
  margin: 48px auto 80px;
  padding: 0 22px;
}

.historyTimeline article {
  grid-template-columns: 150px 1fr;
  gap: 25px;
  padding: 0 0 34px;
  display: grid;
  position: relative;
}

.historyTimeline article:before {
  content: "";
  background: #cfbea1;
  width: 1px;
  position: absolute;
  top: 32px;
  bottom: 0;
  left: 75px;
}

.historyYear {
  color: #a47731;
  text-align: right;
  padding-right: 25px;
  font: 22px Georgia;
}

.historyTimeline p {
  color: #5e6d71;
  background: #fffdf9;
  border: 1px solid #e3d8c8;
  border-radius: 12px;
  margin: 0;
  padding: 18px;
  line-height: 1.65;
}

.communityPanel {
  text-align: center;
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 16px;
  max-width: 650px;
  margin: 55px auto 80px;
  padding: 34px;
}

.communityIcon {
  font-size: 50px;
}

.communityPanel p {
  color: #6e7779;
  line-height: 1.6;
}

.communityActions {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
  display: grid;
}

@media (max-width: 950px) {
  .sectionTop nav {
    display: none;
  }

  .directoryGrid {
    grid-template-columns: 1fr;
  }

  .surnameGrid, .placeGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 650px) {
  .surnameGrid, .placeGrid {
    grid-template-columns: 1fr;
  }

  .historyTimeline article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .historyTimeline article:before {
    display: none;
  }

  .historyYear {
    text-align: left;
    padding: 0;
  }

  .communityActions {
    grid-template-columns: 1fr;
  }
}

/* [project]/app/mobile-navigation.css [app-client] (css) */
.sectionTop {
  z-index: 100;
  position: relative;
}

.mobileMenuBtn {
  cursor: pointer;
  background: #fffaf1;
  border: 1px solid #ded4c5;
  border-radius: 10px;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 10px;
  display: none;
}

.mobileMenuBtn span {
  background: #12384d;
  border-radius: 2px;
  width: 100%;
  height: 2px;
  margin: 5px 0;
  transition: transform .2s, opacity .2s;
  display: block;
}

.mobileMenuBtn.open span:first-child {
  transform: translateY(7px)rotate(45deg);
}

.mobileMenuBtn.open span:nth-child(2) {
  opacity: 0;
}

.mobileMenuBtn.open span:nth-child(3) {
  transform: translateY(-7px)rotate(-45deg);
}

.mobileMenuBackdrop {
  display: none;
}

@media (max-width: 950px) {
  .sectionTop {
    gap: 10px;
    height: 72px;
    padding: 0 16px;
  }

  .sectionTop .brand {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .sectionTop .brand .logo {
    flex: none;
    font-size: 29px;
  }

  .sectionTop .brand > div:last-child {
    min-width: 0;
  }

  .sectionTop .brand b {
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    display: block;
    overflow: hidden;
  }

  .sectionTop .brand small {
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 9px;
    overflow: hidden;
  }

  .sectionTop .desktopNav, .sectionTop .desktopActions {
    display: none !important;
  }

  .mobileMenuBtn {
    display: block;
  }

  .mobileMenuBackdrop {
    z-index: 99;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: #04192361;
    display: block;
    position: fixed;
    inset: 72px 0 0;
  }

  .mobileMenuDrawer {
    background: #fffdf8;
    border-left: 1px solid #dfd4c4;
    flex-direction: column;
    width: min(88vw, 380px);
    height: 100%;
    animation: .18s ease-out rdwMenuIn;
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: -12px 0 35px #1823262e;
  }

  @keyframes rdwMenuIn {
    from {
      opacity: .5;
      transform: translateX(25px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .mobileNav {
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
    gap: 0;
    padding: 14px 15px;
    display: flex !important;
  }

  .mobileNav button {
    color: #12384d;
    text-align: left;
    cursor: pointer;
    background: none;
    border: 0;
    border-bottom: 1px solid #eee4d6;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 17px 10px;
    font-size: 16px;
    display: flex;
  }

  .mobileNav button b {
    color: #b98938;
    font-size: 20px;
  }

  .mobileNav button.active {
    color: #a9772d;
    background: #fff7e8;
    border-bottom-color: #0000;
    border-radius: 9px;
    font-weight: 700;
  }

  .mobileMenuBottom {
    background: #faf5ec;
    border-top: 1px solid #e8ddce;
    padding: 16px;
  }

  .mobileLang {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
    display: grid;
  }

  .mobileLang button {
    color: #17394c;
    background: #fffdf8;
    border: 1px solid #d8ccbb;
    border-radius: 8px;
    padding: 11px;
    font-weight: 700;
  }

  .mobileLang button.active {
    background: #eadfc8;
    border-color: #ccb98f;
  }

  .mobileAccount {
    color: #fff;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #0d354b;
    border: 0;
    border-radius: 9px;
    width: 100%;
    padding: 13px;
    font-weight: 700;
    overflow: hidden;
  }
}

/* [project]/app/mobile-layout-fix.css [app-client] (css) */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  position: relative;
}

main, section, footer {
  max-width: 100%;
}

@media (max-width: 700px) {
  .hero {
    height: auto;
    min-height: 430px;
  }

  .heroContent {
    width: 100%;
    max-width: 100%;
    padding: 55px 18px 48px;
  }

  .hero h1 {
    overflow-wrap: anywhere;
    font-size: 38px;
    line-height: 1.05;
  }

  .hero p {
    font-size: 16px;
    line-height: 1.5;
  }

  .search {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0;
    width: 100%;
    max-width: 100%;
    display: grid;
  }

  .search input {
    width: 100%;
    min-width: 0;
  }

  .search button {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 7px;
  }

  .vintage {
    display: none;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
    width: auto;
    margin: -20px 12px 0;
  }

  .stats div {
    padding: 18px 8px;
  }

  .intro {
    margin: 55px auto 30px;
    padding: 0 18px;
  }

  .intro h2 {
    font-size: 32px;
  }

  .cards {
    grid-template-columns: 1fr;
    gap: 13px;
    width: 100%;
    padding: 0 16px 55px;
    display: grid;
  }

  .cards article {
    width: 100%;
    min-width: 0;
  }

  .journey {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    width: 100%;
    max-width: 100%;
    padding: 48px 18px;
    display: grid;
    overflow: hidden;
  }

  .journey > * {
    min-width: 0;
    max-width: 100%;
  }

  .journey h2 {
    overflow-wrap: anywhere;
    margin: 10px 0 18px;
    font-size: 36px;
    line-height: 1.08;
  }

  .journey p {
    overflow-wrap: anywhere;
    font-size: 16px;
    line-height: 1.55;
  }

  .map {
    box-sizing: border-box;
    text-align: center;
    flex-wrap: wrap;
    place-content: center;
    gap: 10px 8px;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 190px;
    padding: 28px 16px;
    font-size: 16px;
    display: flex;
    overflow: hidden;
  }

  .map span {
    white-space: nowrap;
    max-width: 100%;
  }

  .map em {
    flex: none;
    font-size: 20px;
  }

  footer {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    padding: 28px 18px;
    display: grid;
    overflow: hidden;
  }

  footer b, footer span, footer small {
    overflow-wrap: anywhere;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  footer small {
    margin-left: 0 !important;
  }

  .results {
    width: 100%;
    max-width: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }

  .resultGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .resultGrid article {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 390px) {
  .hero h1 {
    font-size: 34px;
  }

  .journey h2 {
    font-size: 31px;
  }

  .map {
    padding: 24px 12px;
    font-size: 15px;
  }
}

/* [project]/app/documents.css [app-client] (css) */
.documentsWrap {
  max-width: 1180px;
  margin: 42px auto 75px;
  padding: 0 22px;
}

.documentsToolbar {
  align-items: center;
  gap: 15px;
  display: flex;
}

.documentsToolbar .directorySearch {
  flex: 1;
}

.documentsToolbar small {
  color: #81786e;
  max-width: 290px;
}

.documentsGrid {
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 20px;
  display: grid;
}

.documentCard {
  background: #fffdf9;
  border: 1px solid #e3d8c8;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px #4c35140b;
}

.documentPreview {
  background: #eee6d9;
  place-items: center;
  height: 170px;
  display: grid;
  overflow: hidden;
}

.documentPreview img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.documentPreview span {
  color: #9b753a;
  border: 1px solid #cdbb98;
  border-radius: 8px;
  padding: 18px;
  font: 28px Georgia;
}

.documentBody {
  padding: 16px;
}

.documentBody > small {
  color: #a47734;
  font-size: 11px;
}

.documentBody h3 {
  margin: 7px 0;
  font: 21px Georgia;
}

.documentBody p {
  color: #6f7778;
  margin: 6px 0;
  font-size: 12px;
  line-height: 1.45;
}

.documentNotes {
  border-top: 1px solid #eee3d5;
  padding-top: 8px;
}

.personLink {
  color: #0d5876;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  font-weight: bold;
}

.documentActions {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  display: flex;
}

.documentActions a, .documentActions button {
  cursor: pointer;
  border: 0;
  border-radius: 7px;
  padding: 9px 11px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
}

.documentActions a {
  color: #fff;
  background: #0e354b;
}

.documentActions button {
  color: #9b3d2f;
  background: #fff0ec;
}

.documentModal textarea {
  box-sizing: border-box;
  width: 100%;
  font: inherit;
  resize: vertical;
  border: 1px solid #d9cdbd;
  border-radius: 8px;
  padding: 11px;
}

.publicCheck {
  align-items: center;
  flex-direction: row !important;
  gap: 9px !important;
  display: flex !important;
}

.publicCheck input {
  width: auto !important;
}

.personDocumentList {
  gap: 8px;
  display: grid;
}

.personDocumentList article {
  border: 1px solid #e9dfd1;
  border-radius: 10px;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  display: grid;
}

.personDocumentList article > span {
  color: #9a7134;
  background: #f0e8db;
  border-radius: 8px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-weight: bold;
  display: grid;
}

.personDocumentList b {
  display: block;
}

.personDocumentList small {
  color: #8b8175;
  margin-top: 3px;
  display: block;
}

.personDocumentList a {
  color: #fff;
  background: #0e354b;
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 11px;
  text-decoration: none;
}

@media (max-width: 950px) {
  .documentsGrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 650px) {
  .documentsGrid {
    grid-template-columns: 1fr;
  }

  .documentsToolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .personDocumentList article {
    grid-template-columns: 40px 1fr;
  }

  .personDocumentList a {
    text-align: center;
    grid-column: 1 / -1;
  }

  .documentModal .formRow {
    grid-template-columns: 1fr;
  }
}

/* [project]/app/deceased-verification.css [app-client] (css) */
.deceasedSection {
  border-color: #d8c5a0;
}

.sectionExplanation {
  color: #756e66;
  margin: -4px 0 10px;
  font-size: 13px;
  line-height: 1.55;
}

.randomVerifierNote {
  color: #8b672e;
  background: #fff6e4;
  border: 1px solid #ead3a5;
  border-radius: 9px;
  margin: 0 0 16px;
  padding: 10px 12px;
  font-size: 12px;
}

.deceasedCard {
  border-top: 1px solid #eee4d6;
  grid-template-columns: 52px 1fr minmax(190px, auto);
  align-items: center;
  gap: 13px;
  padding: 14px 0;
  display: grid;
}

.deceasedCard:first-of-type {
  border-top: 0;
}

.deceasedIcon {
  color: #8d6b37;
  background: #ece5d8;
  border-radius: 50%;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 20px;
  display: grid;
}

.deceasedText {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.deceasedText b {
  color: #17394c;
  font: 17px Georgia;
}

.deceasedText em {
  color: #a27735;
  margin-top: 3px;
  font-size: 12px;
  font-style: normal;
  font-weight: bold;
}

.deceasedText span {
  color: #847a70;
  margin-top: 4px;
  font-size: 11px;
}

.deceasedActions {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.deceasedActions > button {
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: bold;
}

@media (max-width: 760px) {
  .deceasedCard {
    grid-template-columns: 48px 1fr;
  }

  .deceasedActions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .deceasedActions > * {
    width: 100%;
  }
}

/* [project]/app/relative-search-admin.css [app-client] (css) */
.relativeSearchSection {
  border-color: #d8c39c;
}

.relativeSearchBar {
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: 8px;
  display: grid;
}

.relativeSearchBar input {
  box-sizing: border-box;
  border: 1px solid #d8ccbb;
  border-radius: 9px;
  width: 100%;
  min-width: 0;
  padding: 12px;
  font-size: 14px;
}

.relativeSearchBar button {
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  font-size: 20px;
}

.relationshipNotice {
  color: #3f7045;
  background: #e9f4e9;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
}

.relativeSearchResults {
  gap: 9px;
  margin-top: 15px;
  display: grid;
}

.searchRelativeCard {
  background: #fff;
  border: 1px solid #e5dac9;
  border-radius: 11px;
  grid-template-columns: 50px 1fr minmax(220px, auto);
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: grid;
}

.searchRelativePerson {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.searchRelativePerson b {
  font: 17px Georgia;
}

.searchRelativePerson span, .searchRelativePerson small {
  color: #83796e;
  font-size: 11px;
}

.searchRelativePerson em {
  color: #a47934;
  margin-top: 4px;
  font-size: 11px;
  font-style: normal;
}

.searchRelativeAction {
  align-items: center;
  gap: 8px;
  display: flex;
}

.searchRelativeAction select {
  color: #17394c;
  background: #fff;
  border: 1px solid #d8ccbb;
  border-radius: 8px;
  max-width: 190px;
  padding: 9px;
}

.searchRelativeAction strong {
  color: #9a7132;
  white-space: nowrap;
  font-size: 12px;
}

.searchRelativeAction button {
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: bold;
}

.adminRelPage {
  color: #0e354b;
  background: #f5efe4;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

.adminRelTop {
  background: #fffdf8;
  border-bottom: 1px solid #e3d9ca;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  min-height: 78px;
  padding: 12px 5%;
  display: flex;
}

.adminRelTop > div:nth-child(2) {
  text-align: center;
}

.adminRelTop b {
  font: 18px Georgia;
  display: block;
}

.adminRelTop small {
  color: #9b7b4a;
}

.adminRelTop button {
  color: #15394d;
  cursor: pointer;
  background: #fffaf1;
  border: 1px solid #d8ccbb;
  border-radius: 8px;
  padding: 9px 11px;
}

.adminRelWrap {
  grid-template-columns: .8fr 1.2fr;
  align-items: start;
  gap: 40px;
  max-width: 1050px;
  margin: 55px auto;
  padding: 0 22px;
  display: grid;
}

.adminRelIntro > span {
  letter-spacing: 2px;
  color: #ad7e37;
  font-size: 10px;
  font-weight: bold;
}

.adminRelIntro h1 {
  margin: 10px 0 18px;
  font: 42px Georgia;
}

.adminRelIntro p {
  color: #6f7879;
  line-height: 1.6;
}

.adminRelHelp {
  background: #fff7e9;
  border: 1px solid #e6d2aa;
  border-radius: 10px;
  padding: 12px;
  font-size: 12px;
  color: #846534 !important;
}

.adminRelCard {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 12px 35px #48331912;
}

.adminPersonPicker {
  margin-bottom: 18px;
  position: relative;
}

.adminPersonPicker > label, .adminRelationSelect {
  color: #766e65;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  display: flex;
}

.adminPersonPicker input, .adminRelationSelect select {
  box-sizing: border-box;
  color: #17394c;
  background: #fff;
  border: 1px solid #d8ccbb;
  border-radius: 9px;
  width: 100%;
  padding: 12px;
  font-size: 14px;
}

.adminPickerResults {
  z-index: 10;
  background: #fff;
  border: 1px solid #d8ccbb;
  border-radius: 10px;
  max-height: 310px;
  position: absolute;
  top: 66px;
  left: 0;
  right: 0;
  overflow: auto;
  box-shadow: 0 12px 25px #24353a22;
}

.adminPickerResults button {
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #eee5d9;
  flex-direction: column;
  width: 100%;
  padding: 11px;
  display: flex;
}

.adminPickerResults button:hover {
  background: #fff8ec;
}

.adminPickerResults small, .adminPickerResults em {
  color: #8c8175;
  font-size: 11px;
  font-style: normal;
}

.selectedAdminPerson {
  background: #f3eee5;
  border: 1px solid #ded3c3;
  border-radius: 9px;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 11px;
  display: grid;
}

.selectedAdminPerson b {
  grid-column: 1;
}

.selectedAdminPerson small {
  color: #8b8175;
  grid-column: 1;
}

.selectedAdminPerson button {
  color: #8b5a47;
  cursor: pointer;
  background: none;
  border: 0;
  grid-area: 1 / 2 / 3;
  font-size: 22px;
}

.adminRelationSelect {
  margin: 4px 0 20px;
}

.adminRelPrimary {
  color: #fff;
  cursor: pointer;
  background: #0e354b;
  border: 0;
  border-radius: 9px;
  width: 100%;
  padding: 13px;
  font-weight: bold;
}

.adminRelError {
  color: #8d3c2a;
  background: #fff0e8;
  border-radius: 8px;
  padding: 11px;
}

.adminRelSuccess {
  color: #3f7045;
  background: #e9f4e9;
  border-radius: 8px;
  padding: 11px;
}

@media (max-width: 800px) {
  .adminRelWrap {
    grid-template-columns: 1fr;
    margin-top: 30px;
  }

  .adminRelIntro h1 {
    font-size: 34px;
  }

  .searchRelativeCard {
    grid-template-columns: 46px 1fr;
  }

  .searchRelativeAction {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    display: grid;
  }

  .searchRelativeAction select {
    max-width: none;
  }

  .searchRelativeAction button {
    width: 100%;
  }
}

/* [project]/app/notifications-review.css [app-client] (css) */
.notificationBell {
  width: 42px;
  height: 38px;
  font-size: 17px;
  position: relative;
  border-radius: 9px !important;
  padding: 0 !important;
}

.notificationBell span {
  color: #fff;
  background: #b44a3b;
  border: 2px solid #fffdf8;
  border-radius: 999px;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 3px;
  font-size: 10px;
  font-weight: bold;
  display: grid;
  position: absolute;
  top: -7px;
  right: -7px;
}

.mobileNotifications {
  color: #17394c;
  background: #fffdf8;
  border: 1px solid #ded2c0;
  border-radius: 9px;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 10px;
  padding: 11px;
  font-weight: bold;
  display: flex;
}

.mobileNotifications span {
  text-align: left;
  flex: 1;
}

.mobileNotifications b {
  color: #fff;
  background: #b44a3b;
  border-radius: 999px;
  place-items: center;
  min-width: 22px;
  height: 22px;
  font-size: 11px;
  display: grid;
}

.notificationsWrap {
  max-width: 850px;
  margin: 42px auto 75px;
  padding: 0 22px;
}

.notificationCard {
  background: #fffdf9;
  border: 1px solid #e3d8c8;
  border-radius: 12px;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 15px;
  display: grid;
}

.notificationCard.unread {
  background: #fffaf0;
  border-color: #d1b77d;
}

.notificationIcon {
  color: #a77a34;
  background: #ece5d9;
  border-radius: 50%;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.notificationCard.unread .notificationIcon {
  color: #fff;
  background: #b98938;
}

.notificationText b {
  font: 17px Georgia;
}

.notificationText p {
  color: #667476;
  margin: 4px 0;
  font-size: 13px;
}

.notificationText small {
  color: #92877a;
  font-size: 10px;
}

.notificationCard > button {
  color: #fff;
  cursor: pointer;
  background: #0e354b;
  border: 0;
  border-radius: 8px;
  padding: 9px 11px;
  font-weight: bold;
}

.notificationsError {
  color: #8c3d2b;
  background: #fff0e8;
  border-radius: 9px;
  padding: 12px;
}

.profileNotifications {
  background: #edf3f5 !important;
  border-color: #cfdee3 !important;
}

.reviewPage {
  color: #0e354b;
  background: #f5efe4;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

.reviewWrap {
  max-width: 1000px;
  margin: 45px auto 75px;
  padding: 0 22px;
}

.reviewIntro > span {
  letter-spacing: 2px;
  color: #af813a;
  font-size: 10px;
  font-weight: bold;
}

.reviewIntro h1 {
  margin: 10px 0;
  font: 40px Georgia;
}

.reviewIntro p {
  color: #6f7779;
}

.reviewList {
  gap: 12px;
  margin-top: 25px;
  display: grid;
}

.reviewCard {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 14px;
  padding: 18px;
}

.reviewCard.reviewed {
  border-color: #cfe0d0;
}

.reviewCard.dismissed {
  opacity: .78;
  border-color: #e5c7c0;
}

.reviewPeople {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  display: grid;
}

.reviewPeople > div {
  flex-direction: column;
  display: flex;
}

.reviewPeople small {
  color: #8d8377;
}

.reviewPeople > span {
  color: #a57934;
  text-align: center;
  font-weight: bold;
}

.reviewStatus {
  color: #8b682f;
  background: #f1e7d7;
  border-radius: 999px;
  margin: 12px 0 8px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: bold;
  display: inline-block;
}

.reviewActions {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.reviewActions p {
  color: #7a7168;
  width: 100%;
  font-size: 12px;
}

.reviewActions button {
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: bold;
}

.reviewOk {
  color: #3f7145;
  background: #e8f2e8;
}

.reviewNo {
  color: #973f31;
  background: #fff0ed;
}

.reviewOpen {
  color: #5d554d;
  background: #ece7de;
}

@media (max-width: 680px) {
  .notificationCard {
    grid-template-columns: 34px 1fr;
  }

  .notificationCard > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .reviewPeople {
    grid-template-columns: 1fr;
  }

  .reviewPeople > span {
    text-align: left;
  }

  .reviewActions > * {
    width: 100%;
  }
}

/* [project]/app/person-stories.css [app-client] (css) */
.storyHero .sectionSecondary {
  margin-top: 5px;
}

.storyWrap {
  max-width: 950px;
  margin: 42px auto 80px;
  padding: 0 22px;
}

.storyLoading {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 13px;
  max-width: 700px;
  margin: 100px auto;
  padding: 28px;
}

.storyEditor {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 15px;
  margin-bottom: 24px;
  padding: 24px;
  box-shadow: 0 8px 24px #4833190d;
}

.storyEditor h2 {
  color: #14384b;
  margin: 0 0 20px;
  font: 28px Georgia;
}

.storyEditor label {
  color: #766e65;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.storyEditor input, .storyEditor textarea, .storyEditor select {
  box-sizing: border-box;
  color: #17394c;
  background: #fff;
  border: 1px solid #d8ccbb;
  border-radius: 9px;
  width: 100%;
  padding: 12px;
  font: 14px / 1.5 Arial;
}

.storyEditor textarea {
  resize: vertical;
}

.storyTwo {
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  display: grid;
}

.storyCheck {
  align-items: center;
  flex-direction: row !important;
  gap: 9px !important;
  font-weight: normal !important;
  display: flex !important;
}

.storyCheck input {
  width: auto !important;
}

.storyPrimary, .storySecondary {
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  padding: 12px 16px;
  font-weight: bold;
}

.storyPrimary {
  color: #fff;
  background: #0e354b;
}

.storySecondary {
  color: #17394c;
  background: #eee5d8;
}

.storyButtons {
  gap: 9px;
  display: flex;
}

.storyError {
  color: #8d3e2c;
  background: #fff0e8;
  border-radius: 9px;
  padding: 11px 13px;
}

.storySuccess {
  color: #3f7045;
  background: #e9f4e9;
  border-radius: 9px;
  padding: 11px 13px;
}

.storyListSection {
  margin-top: 38px;
}

.storyListSection > h2 {
  color: #14384b;
  font: 29px Georgia;
}

.storyList {
  gap: 12px;
  display: grid;
}

.storyEntry {
  background: #fffdf9;
  border: 1px solid #e3d8c8;
  border-radius: 13px;
  padding: 19px;
}

.storyEntryTop {
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  display: flex;
}

.storyEntryTop small {
  color: #9a8d7d;
}

.storyEntry h3 {
  color: #14384b;
  margin: 5px 0 10px;
  font: 22px Georgia;
}

.storyEntry > p, .originBox p {
  white-space: pre-wrap;
  color: #5f6e71;
  line-height: 1.68;
}

.storyEntryActions {
  gap: 6px;
  display: flex;
}

.storyEntryActions button {
  cursor: pointer;
  border: 0;
  border-radius: 7px;
  padding: 8px 10px;
}

.storyEntryActions button:first-child {
  color: #17394c;
  background: #eee6da;
}

.storyEntryActions button:last-child {
  color: #934032;
  background: #fff0ec;
}

.originBox {
  background: #f7f0e4;
  border-left: 3px solid #b98a3f;
  border-radius: 7px;
  margin-top: 13px;
  padding: 12px;
}

.originBox b {
  color: #9a7133;
}

.originBox p {
  margin: 5px 0 0;
}

.storyEntry footer {
  color: #8d8276;
  background: none;
  border-top: 1px solid #eee3d5;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding-top: 11px;
  font-size: 11px;
  display: flex;
}

.profileStoryButton {
  background: #fff7e8 !important;
  border-color: #e4cfaa !important;
}

.personStories .familyHead {
  align-items: flex-start;
}

.personStoryContent {
  gap: 12px;
  display: grid;
}

.selfStoryCard, .ancestorStoryPreview {
  background: #fffdf9;
  border: 1px solid #e6dccd;
  border-radius: 11px;
  padding: 15px;
}

.selfStoryCard h3, .ancestorStoryPreview h3 {
  color: #17394c;
  margin: 0 0 7px;
  font: 19px Georgia;
}

.selfStoryCard p, .ancestorStoryPreview p {
  white-space: pre-wrap;
  color: #637174;
  margin: 0 0 14px;
  line-height: 1.6;
}

.storyPlaces {
  color: #956e34;
  background: #f3ebdd;
  border-radius: 999px;
  margin-bottom: 14px;
  padding: 7px 11px;
  font-size: 11px;
  display: inline-block;
}

.ancestorStoryPreview > small {
  color: #9b7b4a;
}

.ancestorStoryPreview h3 {
  margin-top: 6px;
}

.storyOriginPreview {
  color: #665f56;
  background: #f7f0e4;
  border-radius: 7px;
  padding: 10px;
  font-size: 12px;
}

@media (max-width: 650px) {
  .storyTwo {
    grid-template-columns: 1fr;
  }

  .storyEntryTop {
    flex-direction: column;
  }

  .storyEntryActions {
    width: 100%;
  }

  .storyEntryActions button {
    flex: 1;
  }

  .storyButtons {
    flex-direction: column;
  }

  .storyButtons button {
    width: 100%;
  }

  .personStories .familyHead {
    flex-direction: column;
    gap: 10px;
  }

  .personStories .familyHead button {
    width: 100%;
  }
}

.uploadHint {
  color: #8a8075;
  margin-top: 5px;
  font-size: 11px;
  font-weight: normal;
  line-height: 1.45;
  display: block;
}

.existingAttachments {
  background: #faf5ec;
  border: 1px solid #e4d8c7;
  border-radius: 10px;
  margin: -4px 0 16px;
  padding: 12px;
}

.existingAttachments > b {
  color: #765e3c;
  margin-bottom: 9px;
  display: block;
}

.attachmentList {
  gap: 8px;
  display: grid;
}

.attachmentItem {
  background: #fff;
  border: 1px solid #e5dbcd;
  border-radius: 8px;
  grid-template-columns: 52px minmax(0, 1fr) auto 32px;
  align-items: center;
  gap: 9px;
  padding: 7px;
  display: grid;
}

.attachmentItem img {
  object-fit: cover;
  border-radius: 6px;
  width: 52px;
  height: 52px;
}

.pdfBadge {
  color: #9a4d3d;
  background: #efe3d5;
  border-radius: 6px;
  place-items: center;
  width: 52px;
  height: 52px;
  font-weight: bold;
  display: grid;
}

.attachmentItem > div {
  min-width: 0;
}

.attachmentItem strong {
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #17394c;
  display: block;
  overflow: hidden;
}

.attachmentItem small {
  color: #918578;
  margin-top: 3px;
  display: block;
}

.attachmentItem > a {
  color: #0e5874;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
}

.attachmentItem > button {
  color: #963e31;
  cursor: pointer;
  background: #fff0ec;
  border: 0;
  border-radius: 7px;
  width: 30px;
  height: 30px;
  font-size: 17px;
}

.storyAttachmentGallery, .personAttachmentGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  display: grid;
}

.storyAttachmentGallery img, .personAttachmentGrid img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #eee5d8;
  border: 1px solid #e5dacb;
  border-radius: 8px;
  width: 100%;
}

.storyPdfLink, .personPdfAttachment {
  text-align: center;
  color: #8c4b3b;
  box-sizing: border-box;
  background: #f5ede2;
  border: 1px solid #e0d3c2;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  min-height: 72px;
  padding: 10px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  display: flex;
}

.personStoryAttachments, .storyPreviewFiles {
  margin-top: 12px;
}

@media (max-width: 650px) {
  .attachmentItem {
    grid-template-columns: 48px minmax(0, 1fr) 30px;
  }

  .attachmentItem img, .pdfBadge {
    width: 48px;
    height: 48px;
  }

  .attachmentItem > a {
    text-align: center;
    background: #edf3f5;
    border-radius: 7px;
    grid-column: 1 / -1;
    padding: 8px;
  }

  .attachmentItem > button {
    grid-area: 1 / 3;
  }

  .storyAttachmentGallery, .personAttachmentGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* [project]/app/community-board.css [app-client] (css) */
.communityBoard {
  max-width: 1040px;
  margin: 38px auto 80px;
  padding: 0 22px;
}

.communityPrivacy {
  color: #7e622e;
  background: #fff6e4;
  border: 1px solid #e7d0a4;
  border-radius: 10px;
  margin-bottom: 18px;
  padding: 11px 13px;
  font-size: 12px;
}

.communityError {
  color: #8d3e2c;
  background: #fff0e8;
  border-radius: 9px;
  padding: 11px 13px;
}

.communityComposer {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 15px;
  margin-bottom: 22px;
  padding: 22px;
  box-shadow: 0 8px 24px #4833190d;
}

.communityComposerHead {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  display: flex;
}

.communityComposerHead h2 {
  color: #14384b;
  margin: 0;
  font: 27px Georgia;
}

.communityComposerHead button {
  color: #806f5c;
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 25px;
}

.communityComposer label {
  color: #766e65;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 13px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.communityComposer input, .communityComposer textarea, .communityComposer select {
  box-sizing: border-box;
  color: #17394c;
  background: #fff;
  border: 1px solid #d8ccbb;
  border-radius: 9px;
  width: 100%;
  padding: 11px;
  font: 14px / 1.45 Arial;
}

.communitySearchFields {
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
  display: grid;
}

.communityComposerActions {
  gap: 8px;
  display: flex;
}

.communityPrimary, .communitySecondary {
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding: 11px 14px;
  font-weight: bold;
}

.communityPrimary {
  color: #fff;
  background: #0e354b;
}

.communitySecondary {
  color: #17394c;
  background: #eee5d8;
}

.communityToolbar {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 20px;
  display: grid;
}

.communityToolbar > input {
  box-sizing: border-box;
  background: #fffdf9;
  border: 1px solid #d8ccbb;
  border-radius: 10px;
  width: 100%;
  padding: 13px;
}

.communityFilters {
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
}

.communityFilters button {
  color: #17394c;
  cursor: pointer;
  background: #fffdf9;
  border: 1px solid #d9ccba;
  border-radius: 999px;
  padding: 8px 11px;
}

.communityFilters button.active {
  color: #fff;
  background: #0e354b;
  border-color: #0e354b;
}

.communityPosts {
  gap: 16px;
  display: grid;
}

.communityPost {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 6px 20px #4833190a;
}

.communityPost.search {
  border-left: 4px solid #8aaac0;
}

.communityPost.help {
  border-left: 4px solid #c49464;
}

.communityPost.exchange {
  border-left: 4px solid #8daa8d;
}

.communityPost.solved {
  opacity: .86;
}

.communityPostHead {
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  display: flex;
}

.communityBadges {
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
}

.categoryBadge, .statusBadge {
  border-radius: 999px;
  align-items: center;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: bold;
  display: inline-flex;
}

.categoryBadge {
  color: #755e3b;
  background: #f1eadf;
}

.statusBadge {
  color: #66706b;
  background: #eef0ef;
}

.statusBadge.solved {
  color: #427248;
  background: #e5f1e5;
}

.communityPost h2 {
  color: #14384b;
  margin: 9px 0 5px;
  font: 25px Georgia;
}

.communityPostHead small {
  color: #8d8275;
}

.communityPostAdmin {
  gap: 6px;
  display: flex;
}

.communityPostAdmin button {
  cursor: pointer;
  border: 0;
  border-radius: 7px;
  padding: 8px 9px;
}

.communityPostAdmin button:first-child {
  color: #17394c;
  background: #ece5da;
}

.communityPostAdmin button:last-child {
  color: #913d31;
  background: #fff0ec;
}

.personSearchMeta {
  color: #665f56;
  background: #f7f0e4;
  border-radius: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 16px;
  margin: 15px 0;
  padding: 12px;
  font-size: 12px;
  display: grid;
}

.communityPostBody {
  white-space: pre-wrap;
  color: #5e6d70;
  line-height: 1.65;
}

.communityStatusActions {
  margin: 11px 0;
}

.communityStatusActions button {
  color: #3f7045;
  cursor: pointer;
  background: #e9f3e9;
  border: 0;
  border-radius: 8px;
  padding: 9px 11px;
  font-weight: bold;
}

.communityComments {
  border-top: 1px solid #eee3d5;
  margin-top: 18px;
  padding-top: 15px;
}

.communityComments h3 {
  margin: 0 0 10px;
  font: 18px Georgia;
}

.communityComment {
  background: #f8f3eb;
  border-radius: 9px;
  margin-bottom: 8px;
  padding: 11px 38px 11px 12px;
  position: relative;
}

.communityComment > div {
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.communityComment b {
  font-size: 12px;
}

.communityComment small {
  color: #978a7d;
  font-size: 10px;
}

.communityComment p {
  white-space: pre-wrap;
  color: #5f6d70;
  margin: 7px 0 0;
  line-height: 1.5;
}

.communityComment > button {
  color: #9a4a3b;
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 17px;
  position: absolute;
  top: 7px;
  right: 7px;
}

.communityReplyBox {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  display: grid;
}

.communityReplyBox textarea {
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid #d8ccbb;
  border-radius: 9px;
  width: 100%;
  padding: 10px;
  font: 13px Arial;
}

.communityReplyBox button {
  color: #fff;
  cursor: pointer;
  background: #0e354b;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  font-weight: bold;
}

@media (max-width: 650px) {
  .communitySearchFields {
    grid-template-columns: 1fr;
  }

  .communityPostHead {
    flex-direction: column;
  }

  .communityPostAdmin {
    width: 100%;
  }

  .communityPostAdmin button {
    flex: 1;
  }

  .personSearchMeta, .communityReplyBox {
    grid-template-columns: 1fr;
  }

  .communityReplyBox button {
    padding: 10px;
  }

  .communityComposerActions {
    flex-direction: column;
  }

  .communityComposerActions button {
    width: 100%;
  }
}

/* [project]/app/private-messages.css [app-client] (css) */
.messageBell {
  font-size: 18px !important;
}

.profileMessagesButton {
  background: #f2eef8 !important;
  border-color: #d9cde5 !important;
}

.messagesShell {
  box-sizing: border-box;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 12px;
  max-width: 1200px;
  height: 680px;
  margin: 34px auto 18px;
  padding: 0 20px;
  display: grid;
}

.messageSidebar, .messageThread {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 14px;
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 7px 24px #4833190d;
}

.messageSidebar {
  flex-direction: column;
  display: flex;
}

.messageSidebarHead {
  border-bottom: 1px solid #ebe1d3;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  display: flex;
}

.messageSidebarHead h2 {
  color: #15384b;
  margin: 0;
  font: 24px Georgia;
}

.newMessageSearch {
  border-bottom: 1px solid #ebe1d3;
  padding: 13px;
  position: relative;
}

.newMessageSearch > b {
  color: #987038;
  margin-bottom: 6px;
  font-size: 11px;
  display: block;
}

.newMessageSearch input {
  box-sizing: border-box;
  border: 1px solid #d7cbbb;
  border-radius: 9px;
  width: 100%;
  padding: 11px 12px;
  font-size: 13px;
}

.messageUserResults {
  z-index: 12;
  background: #fff;
  border: 1px solid #d9cdbd;
  border-radius: 10px;
  max-height: 280px;
  position: absolute;
  top: 72px;
  left: 13px;
  right: 13px;
  overflow: auto;
  box-shadow: 0 12px 28px #222b2e2e;
}

.messageUserResults > p {
  color: #887e72;
  padding: 12px;
  font-size: 12px;
}

.messageUserResults > button {
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #eee4d7;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  display: flex;
}

.messageUserResults > button:hover {
  background: #fff8ed;
}

.messageUserResults > button > span:last-child {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.messageUserResults small {
  color: #8c8277;
}

.conversationList {
  flex: 1;
  overflow: auto;
}

.conversationList > button {
  text-align: left;
  cursor: pointer;
  background: #fffdf9;
  border: 0;
  border-bottom: 1px solid #eee4d7;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 72px;
  padding: 11px;
  display: grid;
}

.conversationList > button.active {
  background: #f3eadb;
}

.conversationList > button:hover {
  background: #faf3e8;
}

.messageAvatar {
  color: #17394c;
  background: #dce9ef;
  border-radius: 50%;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 12px;
  font-weight: bold;
  display: grid;
}

.conversationText {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.conversationText > b {
  color: #17394c;
  font-size: 13px;
}

.conversationText > small {
  color: #837a71;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 4px;
  overflow: hidden;
}

.conversationMeta {
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  align-items: flex-end;
  gap: 7px;
  display: flex;
}

.conversationMeta small {
  color: #9a8f83;
  font-size: 9px;
}

.conversationMeta b {
  box-sizing: border-box;
  color: #fff;
  background: #b78638;
  border-radius: 999px;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  font-size: 10px;
  display: grid;
}

.emptyMessages {
  color: #887e72;
  padding: 18px;
  font-size: 12px;
}

.messageThread {
  flex-direction: column;
  display: flex;
}

.messageEmptyState {
  color: #857a6e;
  text-align: center;
  flex: 1;
  align-content: center;
  place-items: center;
  padding: 30px;
  display: grid;
}

.messageEmptyState > div {
  margin-bottom: 12px;
  font-size: 52px;
}

.threadHead {
  background: #fffaf2;
  border-bottom: 1px solid #e9dfd1;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 10px 15px;
  display: flex;
}

.threadHead > div {
  flex-direction: column;
  display: flex;
}

.threadHead small {
  color: #8d8275;
  margin-top: 2px;
}

.threadBack {
  color: #a47735;
  cursor: pointer;
  background: none;
  border: 0;
  display: none;
}

.threadMessages {
  background: #f8f4ed;
  flex: 1;
  padding: 18px;
  overflow: auto;
}

.privateMessage {
  margin-bottom: 10px;
  display: flex;
}

.privateMessage.mine {
  justify-content: flex-end;
}

.privateMessage.theirs {
  justify-content: flex-start;
}

.privateMessage > div {
  border-radius: 14px;
  max-width: min(75%, 620px);
  padding: 10px 12px 7px;
  box-shadow: 0 2px 7px #3c31210d;
}

.privateMessage.mine > div {
  color: #fff;
  background: #163d52;
  border-bottom-right-radius: 4px;
}

.privateMessage.theirs > div {
  color: #33484f;
  background: #fff;
  border: 1px solid #e3d9cc;
  border-bottom-left-radius: 4px;
}

.privateMessage p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.privateMessage footer {
  background: none;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  padding: 0;
  font-size: 9px;
  display: flex;
}

.privateMessage.mine footer {
  color: #cbd9df;
}

.privateMessage.theirs footer {
  color: #9b9084;
}

.privateMessage footer button {
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: 9px;
  text-decoration: underline;
}

.messageComposer {
  background: #fffdf9;
  border-top: 1px solid #e5dacb;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  padding: 12px;
  display: grid;
}

.messageComposer textarea {
  box-sizing: border-box;
  resize: none;
  border: 1px solid #d6cbbb;
  border-radius: 10px;
  width: 100%;
  padding: 11px;
  font: 14px / 1.45 Arial;
}

.messageComposer button {
  color: #fff;
  cursor: pointer;
  background: #b78638;
  border: 0;
  border-radius: 10px;
  padding: 0 18px;
  font-weight: bold;
}

.messageComposer button:disabled {
  opacity: .5;
  cursor: default;
}

.messagePrivacyNote {
  box-sizing: border-box;
  color: #746d65;
  background: #f2eee8;
  border: 1px solid #dfd5c8;
  border-radius: 9px;
  max-width: 1160px;
  margin: 0 auto 70px;
  padding: 10px 13px;
  font-size: 11px;
}

.messageGlobalError {
  z-index: 50;
  color: #fff;
  background: #8d3e2c;
  border-radius: 9px;
  padding: 11px 15px;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 7px 24px #0000002e;
}

.privateMessageButton {
  color: #17465a !important;
  background: #edf3f5 !important;
}

.commentPrivateMessage {
  cursor: pointer;
  margin-top: 4px;
  color: #17627d !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 10px !important;
}

.commentDeleteButton {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
}

@media (max-width: 760px) {
  .messagesShell {
    grid-template-columns: 1fr;
    height: calc(100vh - 155px);
    min-height: 560px;
    margin-top: 16px;
    padding: 0 10px;
  }

  .messagesShell.hasThread .messageSidebar, .messagesShell:not(.hasThread) .messageThread {
    display: none;
  }

  .messageSidebar, .messageThread {
    border-radius: 11px;
  }

  .threadBack {
    display: block;
  }

  .privateMessage > div {
    max-width: 88%;
  }

  .messageComposer {
    grid-template-columns: 1fr;
  }

  .messageComposer button {
    padding: 11px;
  }

  .messagePrivacyNote {
    margin: 10px 10px 35px;
  }

  .communityPostAdmin {
    flex-wrap: wrap;
  }

  .privateMessageButton {
    flex-basis: 100% !important;
  }
}

/* [project]/app/safety-moderation.css [app-client] (css) */
.profileSecurityButton {
  background: #eef4ef !important;
  border-color: #ccddcf !important;
}

.threadIdentity {
  flex: 1;
  min-width: 0;
}

.threadSafetyActions {
  gap: 5px;
  margin-left: auto;
  flex-direction: row !important;
  display: flex !important;
}

.threadSafetyActions button {
  color: #53676e;
  cursor: pointer;
  background: #fffdf8;
  border: 1px solid #d9cdbd;
  border-radius: 7px;
  padding: 7px 8px;
  font-size: 10px;
}

.threadSafetyActions button.active {
  background: #ece7dd;
}

.threadSafetyActions button.danger {
  color: #8d4437;
}

.threadSafetyActions button.danger.active {
  background: #fff0ec;
  border-color: #e5c4bd;
}

.blockedConversationNotice, .mutedConversationNotice {
  border-bottom: 1px solid #e5dacc;
  padding: 8px 14px;
  font-size: 11px;
}

.blockedConversationNotice {
  color: #8f4034;
  background: #fff0ec;
}

.mutedConversationNotice {
  color: #756d64;
  background: #f3f0eb;
}

.messageSuccessNotice {
  z-index: 51;
  color: #fff;
  background: #3f7045;
  border-radius: 9px;
  padding: 11px 15px;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 7px 24px #00000029;
}

.reportOverlay {
  z-index: 100;
  background: #0f1c2285;
  place-items: center;
  padding: 18px;
  display: grid;
  position: fixed;
  inset: 0;
}

.reportModal {
  background: #fffdf9;
  border: 1px solid #dfd3c1;
  border-radius: 15px;
  width: min(520px, 100%);
  padding: 20px;
  box-shadow: 0 18px 55px #00000040;
}

.reportModalHead {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 13px;
  display: flex;
}

.reportModalHead > div {
  align-items: center;
  gap: 8px;
  display: flex;
}

.reportModalHead span {
  color: #a54e3f;
  font-size: 20px;
}

.reportModalHead h2 {
  color: #16384b;
  margin: 0;
  font: 26px Georgia;
}

.reportModalHead > button {
  color: #766c61;
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 25px;
}

.reportTargetLabel {
  color: #71675c;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: #f5eee4;
  border-radius: 8px;
  margin-bottom: 13px;
  padding: 9px 11px;
  font-size: 12px;
  overflow: hidden;
}

.reportModal label {
  color: #71695f;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 13px;
  font-size: 12px;
  font-weight: bold;
  display: flex;
}

.reportModal select, .reportModal textarea {
  box-sizing: border-box;
  color: #17394c;
  background: #fff;
  border: 1px solid #d7cbbb;
  border-radius: 9px;
  width: 100%;
  padding: 10px;
  font: 13px Arial;
}

.reportButtons {
  gap: 8px;
  display: flex;
}

.reportButtons button {
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding: 11px 13px;
  font-weight: bold;
}

.reportSubmit {
  color: #fff;
  background: #0e354b;
}

.reportCancel {
  color: #17394c;
  background: #eee6da;
}

.reportError {
  color: #8f4034;
  background: #fff0ec;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 12px;
}

.reportContentButton {
  color: #8d6030 !important;
  background: #fff5e8 !important;
}

.commentReportButton {
  cursor: pointer;
  margin-top: 4px;
  margin-left: 8px;
  color: #9a5a3a !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 10px !important;
}

.securityWrap {
  max-width: 900px;
  margin: 40px auto 80px;
  padding: 0 22px;
}

.securityInfoGrid {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 26px;
  display: grid;
}

.securityInfoGrid article {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 13px;
  padding: 18px;
}

.securityInfoGrid h2 {
  color: #17394c;
  margin: 0 0 9px;
  font: 20px Georgia;
}

.securityInfoGrid p {
  color: #667477;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.blockedUsersList {
  gap: 9px;
  display: grid;
}

.blockedUsersList article {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 11px;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px;
  display: grid;
}

.blockedUsersList article > div {
  flex-direction: column;
  display: flex;
}

.blockedUsersList small {
  color: #8e8377;
}

.blockedUsersList button {
  color: #8f4034;
  cursor: pointer;
  background: #fff0ec;
  border: 0;
  border-radius: 8px;
  padding: 9px 11px;
  font-weight: bold;
}

.reportsAdminPage {
  color: #0e354b;
  background: #f5efe4;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

.reportsAdminWrap {
  max-width: 1050px;
  margin: 45px auto 80px;
  padding: 0 22px;
}

.reportAdminFilters {
  flex-wrap: wrap;
  gap: 7px;
  margin: 22px 0;
  display: flex;
}

.reportAdminFilters button {
  color: #17394c;
  cursor: pointer;
  background: #fffdf9;
  border: 1px solid #d8ccba;
  border-radius: 999px;
  padding: 8px 11px;
}

.reportAdminFilters button.active {
  color: #fff;
  background: #0e354b;
  border-color: #0e354b;
}

.adminReportList {
  gap: 13px;
  display: grid;
}

.adminReportCard {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 14px;
  padding: 18px;
}

.adminReportCard.reviewed {
  border-color: #cddfce;
}

.adminReportCard.dismissed {
  opacity: .78;
  border-color: #e0c8c2;
}

.adminReportTop {
  justify-content: space-between;
  gap: 15px;
  display: flex;
}

.adminReportType {
  letter-spacing: 1.2px;
  color: #a17435;
  font-size: 10px;
  font-weight: bold;
}

.adminReportTop h2 {
  margin: 6px 0 4px;
  font: 22px Georgia;
}

.adminReportTop small {
  color: #8d8377;
}

.reportStatus {
  background: #f0e7da;
  border-radius: 999px;
  height: max-content;
  padding: 6px 9px;
  font-size: 10px;
  font-weight: bold;
}

.reportStatus.reviewed {
  color: #407048;
  background: #e5f0e5;
}

.reportStatus.dismissed {
  color: #8c4b3c;
  background: #f3e7e4;
}

.adminReportPeople {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 15px 0;
  display: grid;
}

.adminReportPeople > div {
  background: #f7f1e8;
  border-radius: 8px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}

.adminReportPeople b {
  color: #9b7540;
  margin-bottom: 4px;
  font-size: 10px;
}

.adminReportPeople span {
  font-size: 13px;
}

.adminReportedContent, .adminReportDetails {
  background: #f8f2e9;
  border-left: 3px solid #bd8d43;
  border-radius: 7px;
  margin: 10px 0;
  padding: 11px;
}

.adminReportedContent > b, .adminReportDetails > b {
  color: #8e6a34;
  font-size: 11px;
}

.adminReportedContent pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #52656b;
  margin: 7px 0 0;
  font: 13px / 1.55 Arial;
}

.adminReportDetails p {
  white-space: pre-wrap;
  color: #5f6d70;
  margin: 7px 0 0;
}

.adminReportNote {
  color: #786f65;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
  font-size: 11px;
  display: flex;
}

.adminReportNote textarea {
  box-sizing: border-box;
  border: 1px solid #d8ccbb;
  border-radius: 8px;
  width: 100%;
  padding: 9px;
  font: 13px Arial;
}

.adminReportActions {
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
}

.adminReportActions button {
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding: 9px 11px;
  font-weight: bold;
}

@media (max-width: 760px) {
  .threadHead {
    flex-wrap: wrap;
  }

  .threadIdentity {
    min-width: 120px;
  }

  .threadSafetyActions {
    width: 100%;
    margin-left: 0;
  }

  .threadSafetyActions button {
    flex: 1;
  }

  .securityInfoGrid {
    grid-template-columns: 1fr;
  }

  .blockedUsersList article {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .blockedUsersList article > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .adminReportPeople {
    grid-template-columns: 1fr;
  }

  .adminReportTop {
    flex-direction: column;
  }

  .adminReportActions button {
    width: 100%;
  }
}

/* [project]/app/family-chronicle.css [app-client] (css) */
.profileChronicleButton {
  background: #f8f0df !important;
  border-color: #e5d0a6 !important;
}

.personChronicleBtn {
  color: #765a2d !important;
  background: #f4ead7 !important;
}

.chronicleWrap {
  max-width: 1120px;
  margin: 36px auto 90px;
  padding: 0 22px;
}

.chronicleLoading {
  color: #756c62;
  background: #fffdf9;
  border: 1px solid #e1d6c6;
  border-radius: 12px;
  padding: 24px;
}

.chronicleScope {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  display: flex;
}

.chronicleScope button, .chronicleTools button {
  color: #17394c;
  cursor: pointer;
  background: #fffdf9;
  border: 1px solid #d8ccba;
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: bold;
}

.chronicleScope button.active, .chronicleTools button.active {
  color: #fff;
  background: #0e354b;
  border-color: #0e354b;
}

.chronicleStats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 20px;
  display: grid;
}

.chronicleStats article {
  background: #fffdf9;
  border: 1px solid #e1d6c6;
  border-radius: 11px;
  flex-direction: column;
  gap: 5px;
  padding: 13px;
  display: flex;
}

.chronicleStats span {
  color: #98733d;
  text-transform: uppercase;
  letter-spacing: .7px;
  font-size: 10px;
}

.chronicleStats b {
  color: #17394c;
  font: 22px Georgia;
}

.chronicleTools {
  gap: 10px;
  margin-bottom: 30px;
  display: grid;
}

.chronicleTools > input {
  box-sizing: border-box;
  background: #fffdf9;
  border: 1px solid #d8ccbb;
  border-radius: 10px;
  width: 100%;
  padding: 13px;
  font-size: 14px;
}

.chronicleTools > div {
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
}

.chronicleTimeline {
  position: relative;
}

.chronicleYear {
  grid-template-columns: 105px minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 28px;
  display: grid;
}

.chronicleYearLabel {
  color: #fff;
  text-align: center;
  z-index: 2;
  background: #0e354b;
  border-radius: 999px;
  align-self: start;
  padding: 8px 12px;
  font: 17px Georgia;
  position: sticky;
  top: 92px;
}

.chronicleYearItems {
  gap: 12px;
  display: grid;
  position: relative;
}

.chronicleYearItems:before {
  content: "";
  background: #dbc6a6;
  width: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
}

.chronicleEntry {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 14px;
  padding: 17px;
  position: relative;
  box-shadow: 0 5px 18px #3d301f0a;
}

.chronicleDot {
  box-sizing: content-box;
  background: #b5863d;
  border: 3px solid #f5efe4;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 25px;
  left: -19px;
}

.chronicleEntryHead {
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  display: flex;
}

.chronicleEntryHead small {
  color: #9a8b78;
  font-size: 11px;
}

.chronicleEntry h2 {
  color: #17394c;
  margin: 5px 0 8px;
  font: 23px Georgia;
}

.chronicleType {
  white-space: nowrap;
  color: #765e3a;
  background: #efe8dc;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: bold;
}

.chronicleType.life {
  color: #28546a;
  background: #e8f0f3;
}

.chronicleType.family {
  color: #654a7b;
  background: #eee8f4;
}

.chronicleType.stories {
  color: #8a642f;
  background: #f7eddb;
}

.chronicleType.documents {
  color: #426b45;
  background: #e8f1e7;
}

.chroniclePlace, .chronicleOrigin {
  color: #796b59;
  margin: 7px 0;
  font-size: 12px;
}

.chronicleText {
  white-space: pre-wrap;
  color: #586a6f;
  line-height: 1.65;
}

.chronicleSource {
  color: #776d61;
  background: #f7f1e8;
  border-radius: 8px;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  padding: 9px 11px;
  font-size: 10px;
  display: flex;
}

.chronicleMedia {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  display: grid;
}

.chronicleMedia img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid #dfd4c5;
  border-radius: 8px;
  width: 100%;
}

.chroniclePdf {
  text-align: center;
  color: #8b4e3c;
  background: #f5ede2;
  border: 1px solid #dfd3c2;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  min-height: 84px;
  padding: 9px;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  display: flex;
}

.chronicleLinks {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  display: flex;
}

.chronicleLinks button, .chronicleLinks a {
  color: #164b61;
  cursor: pointer;
  background: #edf3f5;
  border: 0;
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
}

@media (max-width: 850px) {
  .chronicleStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chronicleStats article:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 650px) {
  .chronicleYear {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .chronicleYearLabel {
    width: max-content;
    position: static;
  }

  .chronicleYearItems {
    padding-left: 15px;
  }

  .chronicleYearItems:before {
    left: 3px;
  }

  .chronicleDot {
    left: -19px;
  }

  .chronicleEntryHead {
    flex-direction: column;
  }

  .chronicleMedia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chronicleStats {
    grid-template-columns: 1fr 1fr;
  }
}

/* [project]/app/family-chronicle-marriage.css [app-client] (css) */
.chronicleMarriage {
  color: #755b7e;
  margin: 7px 0;
  font-size: 12px;
}

/* [project]/app/marriage-self-service.css [app-client] (css) */
.profileMarriageButton {
  background: #fbf0f1 !important;
  border-color: #e6cbd0 !important;
}

.marriageHeroButtons {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 7px;
  display: flex;
}

.marriageWrap {
  max-width: 900px;
  margin: 38px auto 80px;
  padding: 0 22px;
}

.marriageInfo {
  color: #765d34;
  background: #fff6e7;
  border: 1px solid #e3cfaa;
  border-radius: 11px;
  margin-bottom: 18px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.55;
}

.marriageList {
  gap: 15px;
  display: grid;
}

.marriageCard {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 7px 22px #3f311f0d;
}

.marriageCardHead {
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 18px;
  display: flex;
}

.marriageCardHead span {
  color: #9b7844;
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 5px;
  font-size: 10px;
  display: block;
}

.marriageCardHead h2 {
  color: #17394c;
  margin: 0;
  font: 25px Georgia;
}

.marriageCardHead small {
  color: #968a7d;
}

.marriageStatus {
  white-space: nowrap;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 10px;
  font-weight: bold;
}

.marriageStatus.married {
  color: #865064;
  background: #f4e7eb;
}

.marriageStatus.partner {
  color: #66706a;
  background: #eef1ef;
}

.marriageFields {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.marriageFields label {
  color: #736a60;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: bold;
  display: flex;
}

.marriageFields input {
  box-sizing: border-box;
  color: #17394c;
  background: #fff;
  border: 1px solid #d7cbbb;
  border-radius: 9px;
  width: 100%;
  padding: 11px 12px;
  font-size: 14px;
}

.marriageConfirm {
  color: #625b53;
  background: #f8f2e8;
  border-radius: 9px;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 0;
  padding: 12px;
  font-size: 12px;
  line-height: 1.45;
  display: flex;
}

.marriageConfirm input {
  margin-top: 2px;
}

.marriageSave {
  color: #fff;
  cursor: pointer;
  background: #0e354b;
  border: 0;
  border-radius: 9px;
  margin-top: 16px;
  padding: 11px 15px;
  font-weight: bold;
}

.marriageSave:disabled {
  opacity: .45;
  cursor: default;
}

.marriageError {
  color: #8d4034;
  background: #fff0ec;
  border-radius: 8px;
  padding: 10px 12px;
}

.marriageSuccess {
  color: #3d7045;
  background: #eaf4ea;
  border-radius: 8px;
  padding: 10px 12px;
}

.noMarriagePartner {
  text-align: center;
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 14px;
  padding: 24px;
}

.noMarriagePartner p {
  color: #667477;
}

.noMarriagePartner button {
  color: #fff;
  cursor: pointer;
  background: #0e354b;
  border: 0;
  border-radius: 9px;
  padding: 10px 13px;
  font-weight: bold;
}

@media (max-width: 650px) {
  .marriageCardHead {
    flex-direction: column;
  }

  .marriageFields {
    grid-template-columns: 1fr;
  }

  .marriageSave {
    width: 100%;
  }
}

/* [project]/app/divorce-support.css [app-client] (css) */
.marriageStatus.divorced {
  color: #9b4453;
  background: #f8e3e5;
}

.divorceSection {
  border-top: 1px dashed #ddcbbb;
  margin-top: 16px;
  padding-top: 15px;
}

.divorceConfirm {
  background: #fff1f2 !important;
}

.divorceInfo {
  color: #86515a;
  background: #fff5f5;
  border-radius: 8px;
  margin: 8px 0 14px;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.5;
}

.chronicleDivorce {
  color: #944e59;
  margin: 7px 0;
  font-size: 12px;
}

/* [project]/app/document-upload-security.css [app-client] (css) */
.documentFileHint {
  color: #8a8075;
  margin-top: 5px;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.4;
  display: block;
}

/* [project]/app/evidence-status.css [app-client] (css) */
.profileEvidenceButton {
  background: #f4f0e6 !important;
  border-color: #ddcfb1 !important;
}

.documentsHeroActions {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  display: flex;
}

.documentEvidenceBadge {
  color: #6d6559;
  background: #f0ece4;
  border-radius: 999px;
  margin: 6px 0 2px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: bold;
  display: inline-block;
}

.documentEvidenceBadge.document_archive {
  color: #416844;
  background: #e7f0e6;
}

.documentEvidenceBadge.document {
  color: #315c6d;
  background: #e7eff2;
}

.documentEvidenceBadge.archive_reference {
  color: #7a6031;
  background: #f5eddc;
}

.documentEvidenceBadge.unconfirmed {
  color: #8a5449;
  background: #f3e7e4;
}

.evidenceWrap {
  max-width: 1120px;
  margin: 36px auto 90px;
  padding: 0 22px;
}

.evidenceStats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 20px;
  display: grid;
}

.evidenceStats article {
  background: #fffdf9;
  border: 1px solid #e1d6c6;
  border-radius: 11px;
  flex-direction: column;
  gap: 5px;
  padding: 13px;
  display: flex;
}

.evidenceStats span {
  color: #98733d;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 10px;
}

.evidenceStats b {
  color: #17394c;
  font: 22px Georgia;
}

.evidenceTools {
  gap: 10px;
  margin-bottom: 24px;
  display: grid;
}

.evidenceTools > input {
  box-sizing: border-box;
  background: #fffdf9;
  border: 1px solid #d8ccbb;
  border-radius: 10px;
  width: 100%;
  padding: 13px;
}

.evidenceTools > div {
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
}

.evidenceTools button {
  color: #17394c;
  cursor: pointer;
  background: #fffdf9;
  border: 1px solid #d8ccba;
  border-radius: 999px;
  padding: 8px 11px;
  font-weight: bold;
}

.evidenceTools button.active {
  color: #fff;
  background: #0e354b;
  border-color: #0e354b;
}

.evidenceGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.evidenceCard {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 14px;
  padding: 17px;
  box-shadow: 0 5px 18px #3d301f0a;
}

.evidenceCardHead {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.evidenceCardHead > small {
  color: #93877a;
  font-size: 9px;
}

.evidenceBadge {
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: bold;
  display: inline-block;
}

.evidenceBadge.level4 {
  color: #37633d;
  background: #e4f0e4;
}

.evidenceBadge.level3 {
  color: #315c6d;
  background: #e6eef2;
}

.evidenceBadge.level2 {
  color: #7b6030;
  background: #f5eddc;
}

.evidenceBadge.level1 {
  color: #8c5148;
  background: #f3e5e2;
}

.evidenceCard h2 {
  color: #17394c;
  margin: 10px 0 8px;
  font: 22px Georgia;
}

.evidenceCard p {
  color: #6d665e;
  font-size: 12px;
  line-height: 1.5;
}

.evidencePerson {
  color: #2c647c;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-weight: bold;
}

.evidenceDate {
  color: #97723c !important;
}

.evidenceAuthor {
  color: #94887c;
  margin-top: 10px;
  display: block;
}

.evidenceActions {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
  display: flex;
}

.evidenceActions button, .evidenceActions a {
  color: #164b61;
  cursor: pointer;
  background: #edf3f5;
  border: 0;
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
}

.evidenceError {
  color: #8d4034;
  background: #fff0ec;
  border-radius: 8px;
  padding: 10px 12px;
}

.evidenceLoading {
  color: #756c62;
}

@media (max-width: 850px) {
  .evidenceStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .evidenceStats article:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 650px) {
  .evidenceGrid {
    grid-template-columns: 1fr;
  }
}

/* [project]/app/migration-map.css [app-client] (css) */
.profileMapButton {
  background: #eef3ef !important;
  border-color: #cad8ce !important;
}

.migrationWrap {
  max-width: 1180px;
  margin: 36px auto 90px;
  padding: 0 22px;
}

.migrationScope {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 17px;
  display: flex;
}

.migrationScope button, .migrationTools button {
  color: #17394c;
  cursor: pointer;
  background: #fffdf9;
  border: 1px solid #d8ccba;
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: bold;
}

.migrationScope button.active, .migrationTools button.active {
  color: #fff;
  background: #0e354b;
  border-color: #0e354b;
}

.migrationStats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 18px;
  display: grid;
}

.migrationStats article {
  background: #fffdf9;
  border: 1px solid #e1d6c6;
  border-radius: 11px;
  flex-direction: column;
  gap: 5px;
  padding: 13px;
  display: flex;
}

.migrationStats span {
  color: #98733d;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 10px;
}

.migrationStats b {
  color: #17394c;
  font: 22px Georgia;
}

.migrationTools {
  gap: 10px;
  margin-bottom: 15px;
  display: grid;
}

.migrationTools > input {
  box-sizing: border-box;
  background: #fffdf9;
  border: 1px solid #d8ccbb;
  border-radius: 10px;
  width: 100%;
  padding: 13px;
}

.migrationTools > div {
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
}

.migrationNotice {
  color: #796b59;
  background: #f7f1e7;
  border: 1px solid #e5d8c4;
  border-radius: 9px;
  margin-bottom: 12px;
  padding: 9px 11px;
  font-size: 10px;
}

.migrationMapShell {
  background: #e9ece8;
  border: 1px solid #d9d0c3;
  border-radius: 15px;
  min-height: 540px;
  position: relative;
  overflow: hidden;
}

.migrationMap {
  width: 100%;
  min-height: 540px;
}

.migrationMapOverlay {
  text-align: center;
  color: #6d665e;
  z-index: 500;
  background: #f7f3ebd1;
  justify-content: center;
  align-items: center;
  padding: 35px;
  display: flex;
  position: absolute;
  inset: 0;
}

.migrationMapError {
  color: #8d4a40;
  background: #fff4f1e6;
}

.migrationLegend {
  color: #6d665e;
  flex-wrap: wrap;
  gap: 13px;
  padding: 12px 2px 22px;
  font-size: 10px;
  display: flex;
}

.migrationLegend span {
  align-items: center;
  gap: 5px;
  display: flex;
}

.migrationMarker {
  box-sizing: border-box;
  color: #fff;
  background: #7c8d87;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-style: normal;
  font-weight: bold;
  display: inline-flex;
}

.migrationLeafletIcon {
  background: none !important;
  border: 0 !important;
}

.migrationLeafletIcon .migrationMarker {
  border: 3px solid #ffffffeb;
  width: 30px;
  height: 30px;
  font-size: 13px;
  box-shadow: 0 2px 7px #0000003d;
}

.migrationMarker.birth {
  background: #49758a;
}

.migrationMarker.residence {
  background: #708552;
}

.migrationMarker.migration {
  background: #ac7533;
}

.migrationMarker.marriage {
  background: #9a6074;
}

.migrationMarker.divorce {
  background: #934b56;
}

.migrationMarker.death {
  background: #5c5967;
}

.migrationMarker.other {
  background: #7c8d87;
}

.migrationPopup {
  gap: 4px;
  min-width: 160px;
  display: grid;
}

.migrationPopup b {
  color: #17394c;
  font-size: 14px;
}

.migrationPopup small {
  color: #9a7845;
}

.migrationPopup span {
  color: #615b54;
  font-size: 11px;
}

.migrationCards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.migrationCard {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 12px;
  padding: 14px;
}

.migrationCardHead {
  align-items: flex-start;
  gap: 9px;
  display: flex;
}

.migrationCardHead small {
  color: #9a7845;
  font-size: 9px;
}

.migrationCard h2 {
  color: #17394c;
  margin: 3px 0;
  font: 19px Georgia;
}

.migrationCard p {
  color: #716a61;
  font-size: 11px;
}

.migrationCardActions {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.migrationCardActions button {
  color: #164b61;
  cursor: pointer;
  background: #edf3f5;
  border: 0;
  border-radius: 7px;
  padding: 7px 8px;
  font-size: 10px;
  font-weight: bold;
}

.migrationMissing {
  border-top: 1px solid #ddcfbd;
  margin-top: 32px;
  padding-top: 22px;
}

.migrationMissingHead h2 {
  color: #17394c;
  margin: 0 0 5px;
  font: 26px Georgia;
}

.migrationMissingHead p {
  color: #736b62;
  font-size: 11px;
}

.migrationMissingGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  display: grid;
}

.migrationMissingGrid article {
  background: #f8f3eb;
  border: 1px solid #e6dbca;
  border-radius: 9px;
  gap: 4px;
  padding: 11px;
  display: grid;
}

.migrationMissingGrid small {
  color: #9b7843;
  font-size: 9px;
}

.migrationMissingGrid b {
  color: #17394c;
}

.migrationMissingGrid span {
  color: #7a7269;
  font-size: 10px;
}

.migrationError {
  color: #8d4034;
  background: #fff0ec;
  border-radius: 8px;
  padding: 10px 12px;
}

@media (max-width: 850px) {
  .migrationStats, .migrationCards, .migrationMissingGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .migrationMapShell, .migrationMap {
    min-height: 470px;
  }
}

@media (max-width: 600px) {
  .migrationCards, .migrationMissingGrid {
    grid-template-columns: 1fr;
  }

  .migrationMapShell, .migrationMap {
    min-height: 430px;
  }
}

/* [project]/app/duplicate-detection.css [app-client] (css) */
.profileDuplicateButton {
  background: #f5eee8 !important;
  border-color: #decbbd !important;
}

.duplicateWrap {
  max-width: 1000px;
  margin: 36px auto 90px;
  padding: 0 22px;
}

.duplicateSafety {
  color: #755d35;
  background: #fff6e8;
  border: 1px solid #e7d2ab;
  border-radius: 10px;
  margin-bottom: 18px;
  padding: 11px 13px;
  font-size: 11px;
  line-height: 1.55;
}

.duplicateStats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
  display: grid;
}

.duplicateStats article {
  background: #fffdf9;
  border: 1px solid #e1d6c6;
  border-radius: 11px;
  flex-direction: column;
  gap: 5px;
  padding: 13px;
  display: flex;
}

.duplicateStats span {
  color: #98733d;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 10px;
}

.duplicateStats b {
  color: #17394c;
  font: 22px Georgia;
}

.duplicateRefresh {
  color: #17394c;
  cursor: pointer;
  background: #fffdf9;
  border: 1px solid #d6c9b7;
  border-radius: 8px;
  margin-bottom: 18px;
  padding: 9px 11px;
  font-weight: bold;
}

.duplicateList {
  gap: 14px;
  display: grid;
}

.duplicateCard {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 5px 18px #3d301f0a;
}

.duplicateCardTop {
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  display: flex;
}

.duplicateCardTop small {
  color: #9a7845;
  text-transform: uppercase;
  font-size: 9px;
}

.duplicateCardTop h2 {
  color: #17394c;
  margin: 5px 0 0;
  font: 23px Georgia;
}

.duplicateScore {
  color: #557047;
  white-space: nowrap;
  background: #edf2e8;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 10px;
  font-weight: bold;
}

.duplicateReasons {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 13px 0;
  display: flex;
}

.duplicateReasons b {
  color: #6f675d;
  font-size: 10px;
}

.duplicateReasons span {
  color: #776547;
  background: #f2ece2;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 9px;
}

.duplicatePeople {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.dupPerson {
  background: #faf7f1;
  border: 1px solid #e6dccd;
  border-radius: 10px;
  padding: 13px;
}

.dupPerson h3 {
  color: #17394c;
  margin: 0 0 8px;
  font: 19px Georgia;
}

.dupPerson p {
  color: #716a61;
  margin: 4px 0;
  font-size: 10px;
}

.dupPerson button {
  color: #164b61;
  cursor: pointer;
  background: #e9f0f2;
  border: 0;
  border-radius: 7px;
  margin-top: 10px;
  padding: 7px 9px;
  font-size: 10px;
  font-weight: bold;
}

.duplicateActions {
  border-top: 1px dashed #ddd1bf;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding-top: 12px;
  display: flex;
}

.duplicateActions button {
  color: #8a5149;
  cursor: pointer;
  background: #f3e8e5;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: bold;
}

.duplicateActions small {
  color: #8a8075;
}

.duplicateError {
  color: #8d4034;
  background: #fff0ec;
  border-radius: 8px;
  padding: 10px 12px;
}

.duplicateLoading {
  color: #756c62;
}

@media (max-width: 650px) {
  .duplicateStats, .duplicatePeople {
    grid-template-columns: 1fr;
  }

  .duplicateCardTop {
    flex-direction: column;
  }

  .duplicateActions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* [project]/app/privacy-settings.css [app-client] (css) */
.profilePrivacyButton {
  background: #edf3f4 !important;
  border-color: #c8d8dc !important;
}

.privacyWrap {
  max-width: 760px;
  margin: 36px auto 90px;
  padding: 0 22px;
}

.privacyInfo {
  color: #766a5b;
  background: #f7f1e7;
  border: 1px solid #e4d8c6;
  border-radius: 10px;
  margin-bottom: 16px;
  padding: 11px 13px;
  font-size: 11px;
  line-height: 1.55;
}

.privacyCard {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 14px;
  margin-bottom: 12px;
  padding: 18px;
}

.privacyCard h2 {
  color: #17394c;
  margin: 0 0 14px;
  font: 21px Georgia;
}

.privacyToggle {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  display: flex;
}

.privacyToggle > div {
  gap: 5px;
  display: grid;
}

.privacyToggle b {
  color: #17394c;
}

.privacyToggle small, .privacyRadio small {
  color: #8a8177;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.45;
  display: block;
}

.privacyToggle input {
  width: 20px;
  height: 20px;
}

.privacyRadio {
  color: #5f5a54;
  border-bottom: 1px dashed #e5d9c9;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  display: flex;
}

.privacyRadio:last-child {
  border-bottom: 0;
}

.privacyRadio input {
  margin-top: 3px;
}

.privacyRadio span {
  gap: 4px;
  display: grid;
}

.privacyActions {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
  display: flex;
}

.privacyActions button {
  color: #17394c;
  cursor: pointer;
  background: #fffdf9;
  border: 1px solid #d3c7b7;
  border-radius: 8px;
  padding: 9px 11px;
  font-weight: bold;
}

.privacyActions .privacySave {
  color: #fff;
  background: #0e354b;
  border-color: #0e354b;
}

.privacySuccess {
  color: #3d7045;
  background: #eaf4ea;
  border-radius: 8px;
  padding: 10px 12px;
}

.privacyError {
  color: #8d4034;
  background: #fff0ec;
  border-radius: 8px;
  padding: 10px 12px;
}

@media (max-width: 600px) {
  .privacyToggle {
    align-items: flex-start;
  }

  .privacyActions {
    display: grid;
  }
}

/* [project]/app/system-admin.css [app-client] (css) */
.profileSystemButton {
  background: #f1eee9 !important;
  border-color: #d5cdc0 !important;
}

.systemWrap {
  max-width: 1120px;
  margin: 36px auto 90px;
  padding: 0 22px;
}

.systemSection {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 15px;
  margin-bottom: 18px;
  padding: 20px;
}

.systemSectionHead {
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 14px;
  display: flex;
}

.systemSectionHead h2 {
  color: #17394c;
  margin: 0 0 5px;
  font: 25px Georgia;
}

.systemSectionHead p {
  color: #776f66;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}

.systemPrimary, .systemSecondary {
  cursor: pointer;
  white-space: nowrap;
  border-radius: 8px;
  padding: 9px 11px;
  font-weight: bold;
}

.systemPrimary {
  color: #fff;
  background: #0e354b;
  border: 0;
}

.systemSecondary {
  color: #17394c;
  background: #fffdf9;
  border: 1px solid #d2c6b5;
}

.systemWarning {
  color: #785e31;
  background: #fff3df;
  border: 1px solid #e8cf9f;
  border-radius: 9px;
  margin-bottom: 10px;
  padding: 10px 12px;
  font-size: 10px;
  line-height: 1.5;
}

.systemPath {
  color: #746b61;
  font-size: 10px;
}

.systemPath code {
  background: #f1ece4;
  border-radius: 5px;
  padding: 3px 6px;
}

.backupList {
  gap: 9px;
  margin-top: 14px;
  display: grid;
}

.backupCard {
  background: #faf7f1;
  border: 1px solid #e4dacb;
  border-radius: 10px;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px;
  display: grid;
}

.backupCard h3 {
  color: #17394c;
  margin: 5px 0 2px;
  font-size: 14px;
}

.backupCard small {
  color: #8d8378;
}

.backupType {
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: bold;
  display: inline-block;
}

.backupType.auto {
  color: #456a47;
  background: #e8f0e7;
}

.backupType.manual {
  color: #416076;
  background: #e8eef3;
}

.backupMeta {
  color: #716a62;
  gap: 4px;
  font-size: 10px;
  display: grid;
}

.backupCard > button {
  color: #8c5047;
  cursor: pointer;
  background: #f3e7e4;
  border: 0;
  border-radius: 7px;
  padding: 8px 9px;
  font-weight: bold;
}

.auditTools {
  grid-template-columns: 1fr 230px;
  gap: 9px;
  margin-bottom: 13px;
  display: grid;
}

.auditTools input, .auditTools select {
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #d7cbbb;
  border-radius: 8px;
  width: 100%;
  padding: 10px;
}

.auditList {
  gap: 6px;
  display: grid;
}

.auditRow {
  color: #625c55;
  border-bottom: 1px solid #eee4d6;
  grid-template-columns: 150px minmax(170px, 1.3fr) minmax(130px, 1fr) minmax(130px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 3px;
  font-size: 10px;
  display: grid;
}

.auditRow b {
  color: #17394c;
  display: block;
}

.auditRow small {
  color: #91867a;
  margin-top: 2px;
  display: block;
}

.auditTarget {
  overflow-wrap: anywhere;
}

.auditRow summary {
  cursor: pointer;
  color: #276077;
  font-weight: bold;
}

.auditRow pre {
  white-space: pre-wrap;
  background: #f3eee7;
  border-radius: 7px;
  max-width: 420px;
  padding: 8px;
  font-size: 9px;
  overflow: auto;
}

.systemError {
  color: #8d4034;
  background: #fff0ec;
  border-radius: 8px;
  padding: 10px 12px;
}

.systemSuccess {
  color: #3d7045;
  background: #eaf4ea;
  border-radius: 8px;
  padding: 10px 12px;
}

@media (max-width: 850px) {
  .backupCard {
    grid-template-columns: 1fr;
  }

  .auditRow {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .systemSectionHead {
    flex-direction: column;
  }

  .auditTools, .auditRow {
    grid-template-columns: 1fr;
  }
}

/* [project]/app/beta-access.css [app-client] (css) */
.profileBetaButton {
  background: #f1edf7 !important;
  border-color: #d3c6df !important;
}

.betaLoginInfo {
  color: #675479;
  background: #f3edf8;
  border: 1px solid #d8cbe2;
  border-radius: 10px;
  margin-top: 14px;
  padding: 11px 13px;
  font-size: 11px;
  line-height: 1.55;
}

.betaCodeLabel {
  background: #f7f1fb;
  border-radius: 10px;
  padding: 11px;
}

.betaCodeLabel small, .authCard label small {
  color: #8a7d91;
  margin-top: 5px;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.4;
  display: block;
}

.betaWrap {
  max-width: 1050px;
  margin: 36px auto 90px;
  padding: 0 22px;
}

.betaSafety {
  color: #765c30;
  background: #fff5e4;
  border: 1px solid #e5cea4;
  border-radius: 10px;
  margin-bottom: 18px;
  padding: 11px 13px;
  font-size: 11px;
  line-height: 1.55;
}

.betaStats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 18px;
  display: grid;
}

.betaStats article {
  background: #fffdf9;
  border: 1px solid #e1d6c6;
  border-radius: 11px;
  flex-direction: column;
  gap: 5px;
  padding: 13px;
  display: flex;
}

.betaStats span {
  color: #98733d;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 10px;
}

.betaStats b {
  color: #17394c;
  font: 22px Georgia;
}

.betaCreateCard, .betaNewCodes, .betaListSection {
  background: #fffdf9;
  border: 1px solid #e2d8c8;
  border-radius: 14px;
  margin-bottom: 14px;
  padding: 18px;
}

.betaCreateCard h2, .betaNewCodes h2, .betaListSection h2 {
  color: #17394c;
  margin: 0 0 14px;
  font: 23px Georgia;
}

.betaCreateCard label {
  color: #6f675d;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: bold;
  display: grid;
}

.betaCreateCard input {
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #d7cbbb;
  border-radius: 8px;
  width: 100%;
  padding: 10px;
}

.betaCreateGrid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.betaDays {
  align-items: center;
  gap: 8px;
  display: flex;
}

.betaDays span {
  color: #83796e;
  font-weight: normal;
}

.betaPrimary {
  color: #fff;
  cursor: pointer;
  background: #0e354b;
  border: 0;
  border-radius: 8px;
  padding: 10px 13px;
  font-weight: bold;
}

.betaNewCodes {
  background: #fbf8fd;
  border-color: #cfc0dc;
}

.betaNewCodesHead {
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  display: flex;
}

.betaNewCodesHead p {
  color: #756a7d;
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
}

.betaNewCodesHead button {
  color: #644b79;
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #cbbbd9;
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: bold;
}

.betaCodeGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 14px;
  display: grid;
}

.betaCodeGrid code {
  color: #4e3d5d;
  text-align: center;
  -webkit-user-select: all;
  user-select: all;
  background: #eee7f3;
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  display: block;
}

.betaInviteList {
  gap: 8px;
  display: grid;
}

.betaInvite {
  background: #faf7f1;
  border: 1px solid #e6dccd;
  border-radius: 10px;
  grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.3fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: grid;
}

.betaInvite h3 {
  color: #17394c;
  margin: 5px 0 2px;
  font-size: 14px;
}

.betaInvite p {
  color: #7b7269;
  margin: 3px 0 0;
  font-size: 10px;
}

.betaStatus {
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: bold;
  display: inline-block;
}

.betaStatus.active {
  color: #416a45;
  background: #e6f0e6;
}

.betaStatus.reserved {
  color: #7a6332;
  background: #f5eedb;
}

.betaStatus.used {
  color: #3f6175;
  background: #e5edf3;
}

.betaStatus.expired {
  color: #7d746b;
  background: #eeeae5;
}

.betaStatus.revoked {
  color: #8b4b4b;
  background: #f2e3e3;
}

.betaInviteMeta {
  color: #706961;
  gap: 4px;
  font-size: 10px;
  display: grid;
}

.betaInvite > button {
  color: #8c4d4d;
  cursor: pointer;
  background: #f2e4e4;
  border: 0;
  border-radius: 7px;
  padding: 8px 9px;
  font-weight: bold;
}

.betaError {
  color: #8d4034;
  background: #fff0ec;
  border-radius: 8px;
  padding: 10px 12px;
}

.betaSuccess {
  color: #3d7045;
  background: #eaf4ea;
  border-radius: 8px;
  padding: 10px 12px;
}

@media (max-width: 780px) {
  .betaStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .betaInvite {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .betaCreateGrid, .betaCodeGrid {
    grid-template-columns: 1fr;
  }

  .betaNewCodesHead {
    flex-direction: column;
  }
}

/* [project]/app/privacy-rules.css [app-client] (css) */
.profilePrivacyRulesButton {
  background: #f4f1eb !important;
  border-color: #d8cfc1 !important;
}

.privacyRegisterConsent {
  background: #f8f3fb;
  border: 1px solid #dccfe4;
  border-radius: 10px;
  gap: 7px;
  margin: 10px 0;
  padding: 11px;
  display: grid;
}

.privacyRegisterConsent label {
  align-items: flex-start;
  line-height: 1.45;
  flex-direction: row !important;
  gap: 9px !important;
  margin: 0 !important;
  font-weight: normal !important;
  display: flex !important;
}

.privacyRegisterConsent input {
  margin-top: 3px;
  width: auto !important;
}

.privacyRegisterConsent button {
  color: #654c78;
  cursor: pointer;
  background: none;
  border: 0;
  width: max-content;
  padding: 0;
  font-size: 10px;
  font-weight: bold;
}

.privacyRulesPage {
  color: #17394c;
  background: #f6f0e6;
  min-height: 100vh;
}

.privacyRulesTop {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 22px;
  display: grid;
}

.privacyRulesTop > button, .privacyRulesTop > div:last-child button {
  color: #17394c;
  cursor: pointer;
  background: none;
  border: 0;
  font-weight: bold;
}

.privacyRulesTop > div:nth-child(2) {
  text-align: center;
  display: grid;
}

.privacyRulesTop small {
  color: #95723e;
}

.privacyRulesTop > div:last-child {
  justify-self: end;
}

.privacyRulesTop .active {
  color: #9c6d2b;
}

.privacyRulesHero {
  text-align: center;
  max-width: 900px;
  margin: 20px auto 0;
  padding: 46px 22px 32px;
}

.privacyRulesHero > span {
  color: #a17739;
  letter-spacing: 1.5px;
  font-size: 10px;
  font-weight: bold;
}

.privacyRulesHero h1 {
  margin: 10px 0 14px;
  font: 42px Georgia;
}

.privacyRulesHero p {
  color: #657276;
  max-width: 720px;
  margin: 0 auto 12px;
  line-height: 1.65;
}

.privacyRulesHero small {
  color: #918474;
}

.privacyRulesContent {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 22px 80px;
}

.privacyRulesContent article {
  background: #fffdf9;
  border: 1px solid #e1d7c8;
  border-radius: 13px;
  margin-bottom: 10px;
  padding: 18px 20px;
}

.privacyRulesContent h2 {
  color: #17394c;
  margin: 0 0 10px;
  font: 21px Georgia;
}

.privacyRulesContent p {
  color: #5f6665;
  margin: 7px 0;
  font-size: 13px;
  line-height: 1.65;
}

.privacyRulesNote {
  color: #765c31;
  background: #fff4df;
  border: 1px solid #e6cc9e;
  border-radius: 10px;
  margin-top: 16px;
  padding: 13px 15px;
  font-size: 11px;
  line-height: 1.55;
}

.privacyRulesLogin {
  color: #fff;
  cursor: pointer;
  background: #0e354b;
  border: 0;
  border-radius: 9px;
  margin: 20px auto 0;
  padding: 11px 15px;
  font-weight: bold;
  display: block;
}

@media (max-width: 650px) {
  .privacyRulesTop {
    grid-template-columns: 1fr 1fr;
  }

  .privacyRulesTop > div:nth-child(2) {
    grid-area: 2 / 1 / auto / -1;
  }

  .privacyRulesHero h1 {
    font-size: 32px;
  }
}

/*# sourceMappingURL=app_f5616c3b._.css.map*/