:root{--red:#8b1e1e;--line:#c8c8c8;--text:#444;--muted:#777;--bg:#fff;--light-red:#fff4f4}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--text);font-family:Arial,Helvetica,sans-serif}
.topbar{background:#fff;border-bottom:1px solid #ddd;padding:14px 18px;display:flex;align-items:center;position:sticky;top:0;z-index:20}.brand{font-size:20px;font-weight:700;color:var(--red)}.btn-view{margin-left:auto;background:#6b4bb6;color:#fff;border:0;border-radius:6px;padding:10px 16px;font-weight:700;cursor:pointer}.btn-save{background:#168a4a;color:#fff;border:0;border-radius:6px;padding:10px 16px;font-weight:700;cursor:pointer}.btn-add{background:#b12b2b;color:#fff;border:0;border-radius:6px;padding:10px 16px;font-weight:700;cursor:pointer}.btn-save:hover,.btn-add:hover,.btn-view:hover{filter:brightness(.94)}
.page{width:90vw;max-width:1450px;margin:0 auto;padding:18px 10px 50px}.intro h2{font-size:21px;margin:0 0 8px}.intro p{line-height:1.6;text-align:justify}.notice{text-align:center;color:#b12b2b;font-size:12px}.howto{background:#fff8f8;border:1px solid #efcaca;border-left:4px solid var(--red);padding:10px 12px;margin:12px 0 14px;line-height:1.6;font-size:14px}
.search-area{background:#fff4f4;border:2px solid var(--red);border-radius:8px;padding:10px 12px;margin:0 0 12px;position:sticky;top:59px;z-index:15;box-shadow:0 2px 8px rgba(0,0,0,.08)}.search-area label{display:block;font-size:13px;font-weight:700;color:var(--red);margin-bottom:5px}.search-area input{display:block;width:100%;padding:11px 13px;border:1px solid #c99999;border-radius:6px;background:#fff;font-size:14px;outline:none}.search-area input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(139,30,30,.12)}
#tree{list-style:none;margin:0;padding:10px 8px 35px;text-align:left;overflow-x:auto}.family{list-style:none;position:relative;margin:0;padding:0 0 0 34px}.family.root{padding-left:0}.children{position:relative;margin:0;padding:8px 0 4px 28px;list-style:none}.children:before{content:"";position:absolute;left:0;top:0;bottom:22px;width:1px;background:var(--line)}.child-family:before{content:"";position:absolute;left:0;top:25px;width:28px;height:1px;background:var(--line)}.child-family:only-child:before{width:18px}
.card{position:relative;z-index:2;display:inline-block;width:560px;min-width:560px;max-width:560px;box-sizing:border-box;margin:5px 0;padding:9px 12px;border:1px solid #ddd;border-radius:7px;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.06);cursor:pointer;transition:.15s}.card:hover{border-color:var(--red);box-shadow:0 4px 12px rgba(0,0,0,.11)}.card.root-card{min-width:560px;max-width:560px;border:2px solid var(--red);box-shadow:0 3px 12px rgba(0,0,0,.1)}.card.selected{border-color:var(--red);background:#fff8f8}.couple{display:flex;align-items:stretch;justify-content:center}.person{flex:1;padding:0 14px;text-align:left}.person+.person{border-left:1px solid #ddd}.single{text-align:left}.name{font-weight:700;font-size:14px;line-height:1.35;margin-bottom:6px;cursor:pointer}.detail{font-size:11px;line-height:1.45;color:#555}.detail b{font-weight:700;color:#333}.dod{color:#7a2f8f;font-weight:700}.parents{margin-top:7px;padding-top:6px;border-top:1px solid #eee;font-size:10.5px;line-height:1.45;color:#2f6f8f;overflow-wrap:anywhere}.marriage{margin-top:7px;padding:6px 8px;text-align:center;font-size:12px;color:var(--red);background:#fff3f3;border:1px solid #f1d4d4;border-radius:5px}.toggle{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:24px;height:24px;padding:0;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:17px;line-height:24px;text-align:center;z-index:4}.has-toggle{padding-left:46px}
.search-results{padding:15px}.result{display:block;padding:11px 13px;border-bottom:1px solid #eee;cursor:pointer}.result:hover{background:#faf3f3}.result:hover{background:#faf3f3}
.panel{background:#fff;border:1px solid #ddd;border-radius:7px;padding:18px;margin-bottom:18px}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.field label{display:block;font-size:12px;font-weight:700;margin-bottom:5px}.field input,.field select{width:100%;padding:9px;border:1px solid #ccc;border-radius:5px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.searchable{position:relative}.options{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid #ccc;max-height:180px;overflow:auto;z-index:30}.options div{padding:8px;font-size:13px;cursor:pointer}.options div:hover{background:#f5eaea}
.table-search{background:#fff4f4;border:2px solid var(--red);border-radius:8px;padding:10px 12px;margin:0 0 12px;box-shadow:0 2px 8px rgba(0,0,0,.06)}.table-search label{display:block;font-size:13px;font-weight:700;color:var(--red);margin-bottom:5px}.table-search input{width:100%;padding:11px 13px;border:1px solid #c99999;border-radius:6px;font-size:14px;outline:none}.table-search input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(139,30,30,.12)}.table-wrap{overflow:auto;max-height:65vh;border:1px solid #ddd}.people-table{width:100%;border-collapse:collapse;font-size:13px;min-width:900px}.people-table th,.people-table td{padding:9px 8px;border-bottom:1px solid #eee;text-align:left;white-space:nowrap}.people-table th{background:#f5f5f5;position:sticky;top:0;z-index:3;box-shadow:0 1px 0 #ddd}.people-table td:nth-child(1){font-weight:700}.people-table .btn-edit{background:#5b4bb7;color:#fff;border:0;border-radius:5px;padding:7px 10px;font-weight:700}.people-table .btn-delete{background:#c43d3d;color:#fff;border:0;border-radius:5px;padding:7px 10px;margin-left:5px;font-weight:700}
.modal{display:none;position:fixed;inset:0;background:#0008;z-index:50;align-items:center;justify-content:center;padding:15px}.modal.show{display:flex}.modal-box{background:#fff;width:min(480px,96vw);border-radius:8px;padding:20px;position:relative}.close{position:absolute;right:12px;top:7px;font-size:24px;cursor:pointer}.modal h2{margin:0 0 12px;color:var(--red)}.row{padding:7px 0;border-bottom:1px solid #eee;font-size:13px}.row b{display:inline-block;width:140px}.modal .marriage{margin-top:0}
@media(max-width:767px){.page{width:100%;padding-left:8px;padding-right:8px}.topbar{padding:12px}.form-grid{grid-template-columns:1fr 1fr}.couple{flex-direction:column}.person+.person{border-left:0;border-top:1px solid #eee;margin-top:8px;padding-top:8px}.card{width:auto;min-width:185px;max-width:340px}.root-card{width:auto;min-width:220px;max-width:340px}.person{padding:0 8px}.search-area{top:57px}.table-wrap{max-height:none}}@media(max-width:500px){.form-grid{grid-template-columns:1fr}}

.howto strong:last-of-type{display:block;text-align:center;margin-top:4px}
.search-results .result b{display:block;color:var(--red);font-size:15px}
.search-results .result{cursor:pointer}

.contact-note{text-align:center;font-weight:700;margin-top:4px;color:#444}.result b{color:var(--red);font-size:15px}.result{border:1px solid #eee;border-radius:6px;margin:5px 0;background:#fff}.result:hover{background:#fff8f8}.parents b{color:#2f6f8f}.dod b{color:#8b1e1e}.marriage{background:#fff8e8;color:#8b1e1e}

/* Final source-data update presentation */
.intro h2{text-align:center}
.howto{text-align:center}
.contact-note{color:#8b1e1e !important;font-weight:700;text-align:center;margin-top:4px}

.login-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:99999}.login-overlay.show{display:flex}.login-box{width:min(420px,92vw);background:#fff;border-radius:12px;padding:28px;box-shadow:0 18px 50px rgba(0,0,0,.25)}.login-box h2{margin-top:0}.login-box input{width:100%;box-sizing:border-box;padding:11px;margin:10px 0 14px;border:1px solid #ccc;border-radius:7px}.login-box .btn-save{width:100%}.login-message{color:#b42318;min-height:20px;margin-top:10px}.save-status{text-align:center;min-height:26px;margin:8px 0;font-weight:600}.save-status.ok{color:#16794b}.save-status.error{color:#b42318}


.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;align-items:center;justify-content:center;padding:20px}.modal-overlay.show{display:flex}.password-modal{position:relative;width:min(460px,100%);background:#fff;border-radius:12px;padding:26px;box-shadow:0 18px 60px rgba(0,0,0,.25)}.password-modal h2{margin:0 0 8px}.password-modal p{margin:0 0 18px;color:#666}.password-modal label{display:block;margin:12px 0 6px;font-weight:600}.password-modal input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #ccc;border-radius:7px}.modal-close{position:absolute;right:12px;top:8px;border:0;background:none;font-size:28px;cursor:pointer;color:#666}.modal-actions{display:flex;gap:10px;margin-top:18px;justify-content:flex-end}

/* Admin responsive layout */
.admin-page .topbar{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 18px}
.admin-page .brand{flex:1 1 220px;min-width:0}
.admin-page .top-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 1 auto;flex-wrap:wrap}
.admin-page .top-actions a{display:inline-flex;text-decoration:none;align-items:center;justify-content:center}
.admin-page .top-actions button,.admin-page .top-actions a{font:inherit}
.admin-page .btn-logout{background:#444;color:#fff;border:0;border-radius:6px;padding:10px 16px;font-weight:700;cursor:pointer}
.admin-page .btn-logout:hover{filter:brightness(.92)}
.admin-page .btn-logout:disabled,.admin-page .btn-save:disabled{opacity:.6;cursor:wait}
.admin-page .page{width:min(94vw,1450px);padding-top:20px}
.admin-page .panel{overflow:visible}
.admin-page .section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.admin-page .section-heading h3{margin:0}
.admin-page .record-count{font-size:12px;color:#777;white-space:nowrap}
.admin-page .date-help{background:#fff8e8;border:1px solid #eed6a0;border-radius:6px;padding:9px 11px;margin:0 0 15px;font-size:13px;line-height:1.5;color:#59491f}
.admin-page code{background:#fff;padding:2px 5px;border:1px solid #e7dfc9;border-radius:4px}
.admin-page .full-btn{width:100%}
.admin-page .actions-cell{white-space:normal!important;min-width:135px}
.admin-page .btn-row-delete{background:#c43d3d;color:#fff;border:0;border-radius:5px;padding:7px 10px;font-weight:700;margin-left:5px;cursor:pointer}
.admin-page .empty-row{text-align:center!important;color:#777;padding:24px!important}
@media(max-width:900px){
 .admin-page .form-grid{grid-template-columns:1fr 1fr}
 .admin-page .people-table{min-width:1050px}
}
@media(max-width:700px){
 .admin-page .topbar{position:sticky;top:0;padding:10px 12px;align-items:stretch}
 .admin-page .brand{flex:1 0 100%;font-size:18px;text-align:center}
 .admin-page .top-actions{flex:1 0 100%;justify-content:center}
 .admin-page .top-actions a,.admin-page .top-actions button{flex:1 1 30%;min-width:0;padding:9px 8px;font-size:12px}
 .admin-page .page{width:100%;padding:12px 8px 35px}
 .admin-page .panel{padding:12px;margin-bottom:12px}
 .admin-page .form-grid{grid-template-columns:1fr}
 .admin-page .date-help{font-size:12px}
 .admin-page .section-heading{align-items:flex-start}
 .admin-page .table-wrap{max-height:none;overflow-x:auto;-webkit-overflow-scrolling:touch}
 .admin-page .people-table th,.admin-page .people-table td{padding:8px 7px;font-size:12px}
 .admin-page .modal-actions{flex-direction:column-reverse}
 .admin-page .modal-actions button{width:100%}
}
@media(max-width:420px){
 .admin-page .top-actions a,.admin-page .top-actions button{font-size:11px;padding:8px 5px}
 .admin-page .brand{font-size:17px}
 .admin-page .panel h2{font-size:19px}
}

.person-head{display:flex;gap:12px;align-items:flex-start}.person-photo{width:110px;height:110px;min-width:110px;border-radius:10px;object-fit:contain;border:1px solid #ddd;background:#fafafa}.person-info{flex:1;min-width:0}.meta-line{font-size:11px;line-height:1.5;color:#555;margin-top:3px}.classification{font-weight:400;color:inherit}.mobile-link{color:#2f6f8f;text-decoration:none}.modal-photo{width:220px;height:180px;border-radius:10px;object-fit:contain;display:block;margin:0 auto 12px;border:1px solid #ddd}.photo-preview{width:180px;height:140px;border-radius:10px;object-fit:contain;border:1px solid #ccc;background:#fafafa;display:block;margin-top:7px}.photo-help{font-size:11px;color:#777;margin-top:5px}
@media(max-width:767px){.card{width:auto;min-width:240px;max-width:420px}.root-card{width:auto;min-width:260px;max-width:420px}}

@media(max-width:767px){.person-photo{width:92px;height:92px;min-width:92px}.modal-photo{width:200px;height:160px}}
.result-profession{font-weight:600;color:#666;font-size:13px}

/* Requested genealogy frontend refinements */
.topbar{position:relative;justify-content:center}
.topbar .brand{margin:0;text-align:center;font-size:26px;line-height:1.25}
.search-area{position:relative;top:auto}
.search-area label{font-size:15px}
.search-area input{padding:14px 16px;font-size:16px;min-height:48px;box-sizing:border-box}
.card{width:680px;min-width:680px;max-width:680px}
.card.pink-highlight{background:#fff8f8}
@media(max-width:767px){
 .card{width:auto;min-width:240px;max-width:420px}
 .root-card{width:auto;min-width:260px;max-width:420px}
 .topbar .brand{font-size:21px}
}


/* Revision 2: navigation, photo popup, sharing and footer */
.page-nav-buttons{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin:18px auto 10px}
.page-nav-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 25px;border-radius:10px;text-decoration:none;font-weight:700;font-size:16px;border:1px solid #d6b36a;background:linear-gradient(135deg,#fff7dc,#f2d58d);color:#5b3a00;box-shadow:0 3px 10px rgba(0,0,0,.12);transition:transform .18s ease,box-shadow .18s ease}
.page-nav-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.person-photo{cursor:pointer}
.photo-popup-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72)}
#photo-popup-modal{display:none;position:fixed;inset:0;z-index:99999;align-items:center;justify-content:center;padding:20px}
#photo-popup-modal.open{display:flex}
.photo-popup-box{position:relative;z-index:2;max-width:min(92vw,900px);max-height:90vh;padding:10px;border-radius:12px;background:#fff;box-shadow:0 12px 40px rgba(0,0,0,.4)}
#photo-popup-image{display:block;max-width:88vw;max-height:82vh;width:auto;height:auto;object-fit:contain;border-radius:8px}
.photo-popup-close{position:absolute;right:-12px;top:-12px;width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:#222;font-size:28px;line-height:32px;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.3);z-index:3}
.share-buttons{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin:28px auto 12px;padding:0 12px}
.share-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;border-radius:8px;text-decoration:none;font-weight:700;font-size:15px;box-shadow:0 3px 10px rgba(0,0,0,.12)}
.facebook-share{background:#1877f2;color:#fff}
.whatsapp-share{background:#25d366;color:#fff}
.site-footer{text-align:center;padding:18px 12px;margin-top:0;background:#f7f7f7;border-top:1px solid #ddd;color:#444;font-size:14px;line-height:1.7}
.site-footer a{font-weight:700;text-decoration:none}
@media(max-width:767px){
 .page-nav-btn{padding:10px 20px;font-size:15px}
 .share-btn{width:calc(100% - 24px);max-width:330px}
 .site-footer{font-size:13px}
}

/* Final header refinement */
.topbar.genealogy-header{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  width:100%;
  box-sizing:border-box;
  padding:12px 22px;
}
.genealogy-header .brand{
  grid-column:2;
  grid-row:1;
  margin:0;
  text-align:center;
  white-space:nowrap;
}
.genealogy-header .header-home{
  grid-column:1;
  grid-row:1;
  justify-self:start;
  margin:0;
}
.genealogy-header .header-contact{
  grid-column:3;
  grid-row:1;
  justify-self:end;
  margin:0;
}
@media(max-width:767px){
  .topbar.genealogy-header{
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:10px 12px;
  }
  .genealogy-header .brand{
    grid-column:1 / -1;
    grid-row:1;
    white-space:normal;
    font-size:21px;
    order:0;
  }
  .genealogy-header .header-home{
    grid-column:1;
    grid-row:2;
    justify-self:start;
    order:1;
  }
  .genealogy-header .header-contact{
    grid-column:2;
    grid-row:2;
    justify-self:end;
    order:2;
  }
}

/* Revision 3: requested exact green-highlight cards */
.card{background:#fff}
.card.selected{background:#fff}
.card.green-highlight{background:#fff8d9}
.card.pink-highlight{background:#fff}
.howto .contact-note{display:inline;margin-left:12px;white-space:nowrap}
@media(max-width:767px){
  .howto .contact-note{white-space:normal;margin-left:8px}
}

/* Final revision: two-line instructions */
.howto .howto-line{display:block;line-height:1.65;margin:2px 0}
.howto .contact-note{display:block}

/* Backend/admin refinements: photo preview + table thumbnail */
#photoPreview{
  display:block;
  width:90px;
  height:90px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid #d7d7d7;
  background:#f7f7f7;
}
#photoPreview.has-photo{object-fit:cover}
.table-photo-thumb{
  display:block;
  width:42px;
  height:42px;
  object-fit:cover;
  border-radius:5px;
  border:1px solid #d7d7d7;
  background:#fff;
  cursor:pointer;
}
.photo-thumb-cell{
  width:54px;
  text-align:center;
  vertical-align:middle;
}

/* Final: requested light-yellow highlighted cards and white photo thumbnails */
.card.green-highlight{background:#fff8d9}
.table-photo-thumb{background:#fff}
.person-id-cell{font-weight:700;white-space:nowrap}

.public-status{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800}.public-status.is-public{background:#e7f6ea;color:#216b2b}.public-status.is-unpublic{background:#f2f2f2;color:#666}.btn-public-toggle{border:0;border-radius:5px;padding:7px 9px;font-weight:700;cursor:pointer;margin-right:5px}.btn-public-toggle.make-unpublic{background:#e6a23c;color:#fff}.btn-public-toggle.make-public{background:#2e8b57;color:#fff}.status-cell{white-space:nowrap}

/* Default photo utility - kept outside the member Add/Edit form */
.default-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:16px}
.default-photo-card{display:flex;align-items:center;gap:14px;border:1px solid #d9dee5;border-radius:10px;padding:12px;background:#fff}
.default-photo-image{width:72px;height:72px;object-fit:contain;border:1px solid #e2e6eb;border-radius:8px;background:#fff;flex:0 0 72px}
.default-photo-info{min-width:0;flex:1}
.default-photo-info strong{display:block;margin-bottom:7px;color:#1f2937}
.default-photo-link{display:block;width:100%;box-sizing:border-box;padding:8px 9px;border:1px solid #d7dce2;border-radius:6px;background:#f7f8fa;color:#4b5563;font-size:12px;margin-bottom:8px}
.default-photo-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.default-photo-actions .btn-view,.btn-copy-link{font-size:13px;padding:6px 10px;border-radius:5px}
.btn-copy-link{border:1px solid #c9ced6;background:#fff;cursor:pointer}
.btn-copy-link:hover{background:#f3f4f6}
@media (max-width:760px){.default-photo-grid{grid-template-columns:1fr}.default-photo-card{align-items:flex-start}.default-photo-link{font-size:11px}}

/* Multi-spouse selector and sortable backend table */
.spouse-search{position:relative}
.relation-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.relation-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:#eef5ff;border:1px solid #c9d9ef;font-size:13px}
.relation-chip button{border:0;background:transparent;cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
.people-table thead th[onclick]{cursor:pointer;user-select:none}
.people-table thead th[onclick]:hover{filter:brightness(.95)}
.public-status-select{min-width:105px;padding:6px 8px;border-radius:6px;border:1px solid #cfd5dd;background:#fff;font-weight:600}
.public-status-select.is-public{border-color:#8cc99b}
.public-status-select.is-unpublic{border-color:#e2a1a1}
.table-photo-thumb{display:block;width:48px;height:48px;object-fit:cover;border-radius:6px}