:root{--navy:#123b63;--navy2:#0d2d4b;--blue:#2563eb;--ink:#1f2937;--muted:#64748b;--line:#dbe3ee;--bg:#f4f7fb;--green:#059669;--red:#dc2626}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}button,input{font:inherit}button{cursor:pointer}
.topbar{position:sticky;top:0;z-index:50;background:linear-gradient(135deg,var(--navy),#1d5b8f);color:#fff;box-shadow:0 5px 20px #0002}.topbar-inner{max-width:1500px;margin:auto;padding:13px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-mark{width:42px;height:42px;border-radius:13px;background:#ffffff24;border:1px solid #ffffff30;display:grid;place-items:center;font-size:20px;flex:none}.brand-title{font-weight:800;font-size:15px}.brand-sub{font-size:10px;opacity:.76;margin-top:2px;letter-spacing:.12em;text-transform:uppercase}.top-actions{display:flex;gap:8px;flex:none}.btn{border:0;border-radius:11px;padding:9px 13px;font-weight:700;font-size:12px;transition:.18s;display:inline-flex;align-items:center;gap:7px;text-decoration:none}.btn-light{background:#fff;color:var(--navy)}.btn-ghost{background:#ffffff12;color:#fff;border:1px solid #ffffff2b}.btn:hover{transform:translateY(-1px)}
.container{max-width:1500px;margin:auto;padding:20px 18px 42px}.hero{background:linear-gradient(135deg,#fff,#f8fbff);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 12px 35px #123b6314;margin-bottom:18px}.hero h1{margin:0;color:var(--navy);font-size:clamp(20px,3vw,30px);line-height:1.15}.hero p{margin:7px 0 0;color:var(--muted);font-size:13px}.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:18px}.stats{display:flex;gap:9px;flex-wrap:wrap;margin-top:17px}.stat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:10px 13px;min-width:105px}.stat-label{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:800}.stat-value{font-size:19px;font-weight:850;color:var(--navy);margin-top:2px}
.searchbar{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 12px;box-shadow:0 5px 18px #123b630d;margin-bottom:14px}.search-icon{color:var(--muted);font-size:18px}.searchbar input{border:0;outline:0;width:100%;font-size:13px;background:transparent;color:var(--ink)}
.table-wrap{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 12px 35px #123b6314}.table-scroll{overflow:auto;max-height:calc(100vh - 260px)}.data-table{width:100%;border-collapse:separate;border-spacing:0;min-width:1200px;font-size:12px}.data-table th{position:sticky;top:0;z-index:5;background:#edf3fa;color:#52657b;font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:850;padding:11px 10px;border-bottom:1px solid var(--line);white-space:nowrap}.data-table td{padding:9px 10px;border-bottom:1px solid #e8edf3;vertical-align:middle;white-space:nowrap}.data-table tbody tr:hover{background:#f8fbff}.family-head-row{background:#f7fbff}.family-head-row td:first-child{border-left:3px solid var(--navy)}.family-members td{background:#fbfdff}.family-members .name-cell{padding-left:24px;font-weight:600}.no-cell{width:70px;text-align:center;font-weight:900;color:var(--navy);font-size:13px}.no-badge{display:inline-grid;place-items:center;min-width:27px;height:27px;padding:0 7px;border-radius:9px;background:#dbeafe;color:var(--navy)}.kk-cell{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#475569;font-size:11px}.name-cell{font-weight:750;color:#263b52}.family-head-row .name-cell{font-weight:900;color:var(--navy)}.relation{font-weight:700;color:#475569}.relation.kepala{color:var(--navy)}.family-toggle{width:27px;height:27px;border-radius:8px;border:1px solid #d7e1ec;background:#fff;color:var(--navy);font-weight:900;transition:.18s}.family-toggle.open{transform:rotate(90deg);background:#edf5ff}
.status{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:850}.status-tervalidasi{background:#dcfce7;color:#166534}.status-sedang{background:#fef3c7;color:#92400e}.status-belum{background:#fee2e2;color:#991b1b}.status-lain{background:#e2e8f0;color:#475569}.hidden{display:none}.empty,.loading{text-align:center;padding:50px 20px;color:var(--muted)}.empty strong{display:block;color:var(--navy);font-size:15px;margin-bottom:5px}.spinner{width:26px;height:26px;border:3px solid #dbeafe;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 10px}@keyframes spin{to{transform:rotate(360deg)}}.error{margin:14px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:14px;padding:12px 14px;font-size:12px}.source-note{font-size:10px;color:#94a3b8;margin-top:10px}
.portal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}.env-card{display:block;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 12px 35px #123b6314;transition:.2s;text-decoration:none;color:inherit}.env-card:hover{transform:translateY(-2px);border-color:#bfd2e7}.env-top{display:flex;align-items:center;justify-content:space-between}.env-icon{width:46px;height:46px;border-radius:14px;background:#eef5ff;display:grid;place-items:center;color:var(--navy);font-weight:900;font-size:21px}.env-name{font-size:17px;font-weight:850;color:var(--navy);margin-top:16px}.env-desc{font-size:11px;color:var(--muted);margin-top:3px}.arrow{font-size:20px;color:#94a3b8}.footer{text-align:center;color:#94a3b8;font-size:10px;padding:20px}
@media(max-width:760px){.topbar-inner{padding:10px 12px}.brand-mark{width:37px;height:37px}.brand-title{font-size:13px}.brand-sub{font-size:8px}.top-actions .btn span{display:none}.container{padding:12px 10px 30px}.hero{padding:17px;border-radius:16px}.hero-row{align-items:flex-start;flex-direction:column}.portal-grid{grid-template-columns:1fr}.table-wrap{border-radius:14px}.table-scroll{max-height:none}}


/* =========================================================
   LANDING PAGE MONITORING MPHJ
   Mengikuti karakter halaman awal Verval
========================================================= */
body.landing{
  min-height:100vh;
  background:
    radial-gradient(circle at 10% 15%,rgba(124,58,237,.06),transparent 28%),
    radial-gradient(circle at 90% 25%,rgba(22,163,74,.06),transparent 28%),
    radial-gradient(circle at 50% 90%,rgba(220,38,38,.045),transparent 30%),
    #eef2f7;
  overflow-x:hidden;
}
.landing-watermark{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.landing-watermark .wm-cross{
  width:min(520px,72vw);height:min(520px,72vw);
  border-radius:50%;
  opacity:.035;
  background:
    linear-gradient(#123b63,#123b63) center/18% 82% no-repeat,
    linear-gradient(#123b63,#123b63) center 31%/58% 18% no-repeat;
  filter:blur(.2px);
}
.landing-content{position:relative;z-index:5;padding-top:92px;padding-bottom:90px}
.landing-header{
  position:fixed;top:10px;left:12px;right:12px;z-index:9999;
  background:rgba(49,93,130,.86);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.20);border-radius:18px;
  box-shadow:0 10px 30px rgba(18,59,99,.18),0 3px 10px rgba(0,0,0,.08);
}
.landing-header-inner{
  max-width:1100px;margin:auto;padding:11px 16px;
  display:flex;align-items:center;justify-content:center;gap:11px;
}
.landing-logo{
  width:39px;height:39px;border-radius:12px;flex:none;
  display:grid;place-items:center;color:#fff;font-size:20px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15);
}
.landing-head-title{font-weight:800;font-size:13px;line-height:1.15;letter-spacing:.01em}
.landing-head-sub{font-size:8px;letter-spacing:.10em;opacity:.68;margin-top:3px}
.landing-hero{
  position:relative;overflow:hidden;isolation:isolate;
  max-width:1180px;margin:0 auto;border-radius:0 0 32px 32px;
  background:rgba(255,255,255,.78);
  box-shadow:0 18px 55px rgba(18,59,99,.06);
}
.landing-hero:before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(124,58,237,.12);
  animation:heroLiturgicalColor 36s ease-in-out infinite;
}
.landing-hero-inner{text-align:center;padding:45px 20px 38px}
.landing-kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.86);
  box-shadow:0 5px 18px rgba(18,59,99,.06);
  color:#123b63;font-size:9px;font-weight:900;letter-spacing:.20em;
}
.landing-kicker i{width:6px;height:6px;border-radius:50%;background:#16a34a}
.landing-hero h1{
  margin:16px 0 0;color:#123b63;
  font-size:clamp(28px,5vw,52px);font-weight:950;
  line-height:.98;letter-spacing:-.045em;
}
.landing-hero .welcome{
  margin:15px 0 0;color:#334155;font-size:16px;font-weight:750;
}
.landing-hero .intro{
  max-width:720px;margin:9px auto 0;color:#64748b;
  font-size:12px;line-height:1.75;
}
.landing-hero .intro strong{color:#123b63}
.portal-section{
  max-width:1100px;margin:18px auto 0;padding:0 16px;
}
.portal-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:12px;
}
.portal-section-head .eyebrow{
  font-size:9px;font-weight:900;letter-spacing:.20em;color:#7c2d12;
}
.portal-section-head h2{
  margin:4px 0 0;color:#123b63;font-size:20px;font-weight:900;letter-spacing:-.02em;
}
.portal-section-head p{margin:4px 0 0;color:#64748b;font-size:11px}
.portal-grid-premium{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;
}
.env-card-premium{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:165px;padding:19px;border-radius:24px;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.90);
  box-shadow:0 15px 40px rgba(18,59,99,.075);
  color:inherit;text-decoration:none;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.env-card-premium:before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.55;
  background:linear-gradient(135deg,rgba(249,115,22,.07),rgba(255,255,255,.68) 38%,rgba(22,101,52,.07));
}
.env-card-premium:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 48px rgba(18,59,99,.12);
  border-color:rgba(191,210,231,.95);
}
.env-card-top{display:flex;align-items:center;justify-content:space-between}
.env-symbol{
  width:45px;height:45px;border-radius:15px;
  display:grid;place-items:center;color:#123b63;font-weight:950;font-size:19px;
  background:#eef5ff;border:1px solid #dce8f5;
}
.env-arrow{
  width:31px;height:31px;border-radius:50%;display:grid;place-items:center;
  color:#123b63;background:#f3f6fa;font-size:18px;
}
.env-card-premium h3{margin:15px 0 0;color:#123b63;font-size:16px;font-weight:900}
.env-card-premium .desc{margin:4px 0 0;color:#64748b;font-size:10px;line-height:1.55}
.env-card-premium .tag{
  display:inline-flex;margin-top:13px;padding:4px 8px;border-radius:999px;
  background:#edfdf5;color:#166534;font-size:8px;font-weight:850;
}
.monitor-note{
  max-width:1100px;margin:15px auto 0;padding:0 16px;
}
.monitor-note-card{
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9);border-radius:20px;
  padding:14px 16px;box-shadow:0 12px 30px rgba(18,59,99,.055);
  color:#64748b;font-size:10px;line-height:1.65;text-align:center;
}
.monitor-note-card strong{color:#123b63}
.landing-footer{
  position:fixed!important;left:12px!important;right:12px!important;bottom:10px!important;
  z-index:99999!important;background:rgba(49,93,130,.86);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.20);border-radius:18px;
  box-shadow:0 10px 30px rgba(49,93,130,.20),0 2px 8px rgba(0,0,0,.07);
  color:#fff;text-align:center;padding:7px 14px 6px;
}
.landing-footer-title{font-size:9px;font-weight:850;letter-spacing:.045em}
.landing-footer-info{font-size:7px;opacity:.62;margin-top:2px}
.landing-footer-copy{font-size:6.5px;opacity:.42;margin-top:3px;padding-top:3px;border-top:1px solid rgba(255,255,255,.1)}
@media(max-width:640px){
  .landing-header{top:8px;left:8px;right:8px;border-radius:15px}
  .landing-header-inner{padding:9px 11px}
  .landing-logo{width:35px;height:35px;font-size:17px}
  .landing-head-title{font-size:11px}.landing-head-sub{font-size:7px}
  .landing-content{padding-top:76px;padding-bottom:70px}
  .landing-hero{border-radius:0 0 25px 25px}
  .landing-hero-inner{padding:34px 16px 28px}
  .landing-kicker{font-size:7.5px;letter-spacing:.15em}
  .landing-hero .welcome{font-size:14px}
  .landing-hero .intro{font-size:10px}
  .portal-section{padding:0 10px}
  .portal-section-head h2{font-size:17px}
  .portal-grid-premium{grid-template-columns:1fr;gap:10px}
  .env-card-premium{min-height:145px;border-radius:20px;padding:16px}
  .landing-footer{left:8px!important;right:8px!important;bottom:8px!important;border-radius:15px}
}


/* =========================================================
   SHARED PREMIUM NAVIGATION — MPHJ
   Semua halaman tetap di tab/window yang sama.
========================================================= */
.env-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 8% 14%,rgba(124,58,237,.045),transparent 25%),
    radial-gradient(circle at 92% 25%,rgba(22,163,74,.045),transparent 25%),
    #eef2f7;
  padding-top:92px;
  padding-bottom:92px;
}
.env-watermark{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.env-watermark img{width:min(620px,75vw);opacity:.035;object-fit:contain}
.env-content{position:relative;z-index:10}

.env-header{
  position:fixed;top:10px;left:12px;right:12px;z-index:9999;
  background:rgba(49,93,130,.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.20);border-radius:18px;
  box-shadow:0 10px 30px rgba(18,59,99,.18),0 3px 10px rgba(0,0,0,.08);
}
.env-header-inner{
  max-width:1250px;margin:auto;padding:8px 12px 7px;
}
.env-brand-row{
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.env-brand-logo{
  width:36px;height:36px;border-radius:11px;flex:0 0 auto;
  display:grid;place-items:center;overflow:hidden;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.15);
}
.env-brand-logo img{width:78%;height:78%;object-fit:contain}
.env-brand-title{color:#fff;font-size:12px;font-weight:850;line-height:1.15}
.env-brand-sub{margin-top:2px;color:#fff;opacity:.67;font-size:7.5px;letter-spacing:.09em}

.env-nav{
  display:flex;align-items:center;justify-content:center;
  gap:5px;margin-top:7px;overflow-x:auto;
  scrollbar-width:none;
}
.env-nav::-webkit-scrollbar{display:none}
.env-nav a{
  flex:0 0 auto;text-decoration:none;color:rgba(255,255,255,.72);
  border:1px solid transparent;border-radius:9px;
  padding:5px 9px;font-size:8px;font-weight:800;
  letter-spacing:.035em;white-space:nowrap;
  transition:.18s;
}
.env-nav a:hover{
  color:#fff;background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.12);
}
.env-nav a.active{
  color:#123b63;background:#fff;
  border-color:rgba(255,255,255,.85);
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.env-hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.88);
  border-radius:0 0 28px 28px;
  box-shadow:0 16px 45px rgba(18,59,99,.06);
}
.env-hero:before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(124,58,237,.04);
  animation:heroLiturgicalColor 36s ease-in-out infinite;
}
.env-hero-inner{padding:25px 20px 20px}
.env-backline{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:9px;
}
.env-back{
  text-decoration:none;color:#123b63;background:rgba(255,255,255,.78);
  border:1px solid #dbe7f2;border-radius:10px;padding:7px 10px;
  font-size:10px;font-weight:800;
}
.env-current{
  color:#64748b;font-size:8px;font-weight:800;
  letter-spacing:.10em;text-transform:uppercase;
}
.env-hero h1{
  margin:0;color:#123b63;font-size:clamp(22px,3.5vw,34px);
  line-height:1.08;font-weight:950;letter-spacing:-.035em;
}
.env-hero p{margin:6px 0 0;color:#64748b;font-size:11px;line-height:1.55}

.env-actionbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-top:14px;
}
.env-actionbar .top-actions{margin-left:auto}
.env-premium-btn{
  border:1px solid #d7e3ef;border-radius:10px;padding:8px 11px;
  background:#fff;color:#123b63;font-size:10px;font-weight:800;
  box-shadow:0 4px 12px rgba(18,59,99,.05);
}
.env-premium-btn.primary{background:#edf5ff}
.env-premium-btn:hover{transform:translateY(-1px)}

.env-footer{
  position:fixed;left:12px;right:12px;bottom:10px;z-index:9999;
  background:rgba(49,93,130,.88);color:#fff;text-align:center;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.20);border-radius:18px;
  box-shadow:0 10px 30px rgba(18,59,99,.18),0 3px 10px rgba(0,0,0,.08);
}
.env-footer-inner{max-width:1100px;margin:auto;padding:7px 14px 6px}
.env-footer-title{font-size:8px;font-weight:850;letter-spacing:.045em}
.env-footer-info{margin-top:2px;font-size:6.5px;opacity:.62}
.env-footer-copy{
  margin-top:3px;padding-top:3px;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:6px;opacity:.42;
}
@media(max-width:760px){
  .env-page{padding-top:86px;padding-bottom:82px}
  .env-header{top:8px;left:8px;right:8px;border-radius:15px}
  .env-header-inner{padding:7px 8px 6px}
  .env-brand-logo{width:33px;height:33px;border-radius:10px}
  .env-brand-title{font-size:10px}
  .env-brand-sub{font-size:6.5px}
  .env-nav{justify-content:flex-start}
  .env-nav a{font-size:7px;padding:5px 8px}
  .env-hero{border-radius:0 0 22px 22px}
  .env-hero-inner{padding:19px 13px 15px}
  .env-backline{align-items:flex-start}
  .env-current{font-size:7px;text-align:right}
  .env-actionbar{margin-top:11px}
  .env-actionbar .top-actions{margin-left:0;width:100%}
  .env-actionbar .top-actions .btn{flex:1;justify-content:center}
  .env-footer{left:8px;right:8px;bottom:8px;border-radius:15px}
}


/* =========================================================
   PREMIUM FINISH — MONITORING MPHJ
========================================================= */
.source-note{font-size:9px;color:#64748b}
.stats{position:relative;z-index:2}
.stat{
  transition:transform .2s ease,box-shadow .2s ease;
  border:1px solid rgba(255,255,255,.78)!important;
  box-shadow:0 8px 24px rgba(18,59,99,.055)!important;
}
.stat:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(18,59,99,.09)!important}
.searchbar{
  box-shadow:0 10px 28px rgba(18,59,99,.06)!important;
  border:1px solid rgba(255,255,255,.9)!important;
}
.table-wrap{
  box-shadow:0 14px 38px rgba(18,59,99,.075)!important;
  border:1px solid rgba(255,255,255,.86)!important;
}
.data-table tbody tr{transition:background .16s ease}
.data-table tbody tr:hover{background:rgba(238,245,255,.55)}
.status-pill{font-weight:850;white-space:nowrap}

/* =========================================================
   STATISTIK MONITORING MPHJ — 3 STATUS + TOTAL KK
========================================================= */
.stats-four{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin-top:14px;
}
.stats-four .stat{
  min-width:0;
  padding:11px 10px!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.stats-four .stat-label{
  font-size:7px!important;
  line-height:1.35;
  font-weight:900;
  letter-spacing:.045em;
}
.stats-four .stat-value{
  margin-top:4px;
  font-size:22px!important;
  line-height:1;
  font-weight:950;
}
.stats-four .stat-total .stat-label{color:#123b63}
.stats-four .stat-total .stat-value{color:#123b63}
.stats-four .stat-belum .stat-label{color:#b91c1c}
.stats-four .stat-belum .stat-value{color:#b91c1c}
.stats-four .stat-sedang .stat-label{color:#a16207}
.stats-four .stat-sedang .stat-value{color:#a16207}
.stats-four .stat-valid .stat-label{color:#166534}
.stats-four .stat-valid .stat-value{color:#166534}

@media(max-width:760px){
  .stats-four{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  .stats-four .stat{
    padding:9px 8px!important;
    border-radius:13px!important;
  }
  .stats-four .stat-label{font-size:6.5px!important}
  .stats-four .stat-value{font-size:19px!important}
}


/* =========================================================
   MPHJ COLOR SYSTEM — 4 LINGKUNGAN
   SION     = MAROON
   BETLEHEM = ORANGE
   BETANIA  = GREEN
   SILOAM   = BLUE
========================================================= */

.theme-sion{
  --theme:#991b1b;--theme-dark:#6f1717;--theme-soft:#fff1f2;
  --theme-line:#fecdd3;--theme-glow:rgba(153,27,27,.22);
}
.theme-betlehem{
  --theme:#d97706;--theme-dark:#b45309;--theme-soft:#fff7ed;
  --theme-line:#fed7aa;--theme-glow:rgba(217,119,6,.23);
}
.theme-betania{
  --theme:#15803d;--theme-dark:#166534;--theme-soft:#f0fdf4;
  --theme-line:#bbf7d0;--theme-glow:rgba(21,128,61,.21);
}
.theme-siloam{
  --theme:#2563eb;--theme-dark:#1d4ed8;--theme-soft:#eff6ff;
  --theme-line:#bfdbfe;--theme-glow:rgba(37,99,235,.22);
}

/* Home cards */
.theme-grid{gap:14px}
.theme-grid .mphj-card{
  --theme:#123b63;
  min-height:190px;
  padding:20px;
  border-radius:25px;
  border:1px solid var(--theme-line,rgba(255,255,255,.9));
  background:
    linear-gradient(145deg,var(--theme-soft,#f8fafc) 0%,rgba(255,255,255,.92) 42%,#fff 100%);
  box-shadow:0 16px 38px rgba(15,23,42,.08);
}
.theme-grid .mphj-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(135deg,var(--theme),transparent 62%);
  opacity:.075;
}
.theme-grid .mphj-card-glow{
  position:absolute;
  width:180px;height:180px;right:-75px;bottom:-95px;
  border-radius:50%;background:var(--theme);
  opacity:.13;filter:blur(3px);z-index:-1;
}
.theme-grid .mphj-card:hover{
  transform:translateY(-5px);
  border-color:var(--theme-line);
  box-shadow:0 24px 50px rgba(15,23,42,.12),0 8px 22px var(--theme-glow);
}
.theme-grid .mphj-symbol{
  background:var(--theme);
  border-color:rgba(255,255,255,.75);
  color:#fff;
  box-shadow:0 8px 18px var(--theme-glow);
}
.theme-grid .mphj-arrow{
  background:var(--theme-soft);
  color:var(--theme-dark);
  border:1px solid var(--theme-line);
}
.theme-grid .mphj-card h3{
  color:var(--theme-dark);
  font-size:22px;
  letter-spacing:-.025em;
  margin-top:5px;
}
.theme-grid .mphj-card p{color:#64748b;max-width:380px}
.theme-grid .theme-label{
  margin-top:14px;
  font-size:8px;font-weight:950;letter-spacing:.17em;
  color:var(--theme);
}
.theme-grid .mphj-tag{
  display:inline-flex;
  margin-top:12px;
  padding:7px 10px;
  border-radius:999px;
  background:var(--theme);
  color:#fff;
  font-size:8px;font-weight:900;letter-spacing:.08em;
  box-shadow:0 7px 16px var(--theme-glow);
}

/* Individual environment pages */
.env-sion{
  --theme:#991b1b;--theme-dark:#6f1717;--theme-soft:#fff1f2;
  --theme-line:#fecdd3;--theme-glow:rgba(153,27,27,.20);
}
.env-betlehem{
  --theme:#d97706;--theme-dark:#b45309;--theme-soft:#fff7ed;
  --theme-line:#fed7aa;--theme-glow:rgba(217,119,6,.21);
}
.env-betania{
  --theme:#15803d;--theme-dark:#166534;--theme-soft:#f0fdf4;
  --theme-line:#bbf7d0;--theme-glow:rgba(21,128,61,.19);
}
.env-siloam{
  --theme:#2563eb;--theme-dark:#1d4ed8;--theme-soft:#eff6ff;
  --theme-line:#bfdbfe;--theme-glow:rgba(37,99,235,.20);
}

.env-page{
  background:
    radial-gradient(circle at 8% 14%,var(--theme-glow),transparent 24%),
    radial-gradient(circle at 92% 24%,rgba(255,255,255,.65),transparent 28%),
    #f4f6fa;
}
.env-header{
  background:linear-gradient(135deg,var(--theme-dark),var(--theme));
  box-shadow:0 12px 32px var(--theme-glow),0 4px 12px rgba(0,0,0,.08);
}
.env-nav a.active{
  color:var(--theme-dark);
}
.env-hero:before{
  background:var(--theme-glow);
  animation:none;
}
.env-back{
  color:var(--theme-dark);
  border-color:var(--theme-line);
}
.env-hero h1{color:var(--theme-dark)}
.env-premium-btn{
  color:var(--theme-dark);
  border-color:var(--theme-line);
}
.env-premium-btn.primary{
  background:var(--theme-soft);
}
.env-footer{
  background:linear-gradient(135deg,var(--theme-dark),var(--theme));
  box-shadow:0 12px 32px var(--theme-glow),0 4px 12px rgba(0,0,0,.08);
}
.env-page .stat-total{
  border-color:var(--theme-line)!important;
}
.env-page .stat-total .stat-label,
.env-page .stat-total .stat-value{
  color:var(--theme-dark);
}
.env-page .table-wrap{
  box-shadow:0 16px 40px rgba(15,23,42,.075);
}
.env-page .data-table th{
  background:var(--theme-soft);
  color:var(--theme-dark);
}
.env-page .family-head-row td:first-child{
  border-left-color:var(--theme);
}
.env-page .no-badge{
  background:var(--theme-soft);
  color:var(--theme-dark);
}
.env-page .family-toggle.open{
  background:var(--theme-soft);
  color:var(--theme-dark);
  border-color:var(--theme-line);
}

/* Mobile home cards */
@media(max-width:760px){
  .theme-grid{gap:10px}
  .theme-grid .mphj-card{min-height:166px;padding:16px;border-radius:21px}
  .theme-grid .mphj-card h3{font-size:20px}
  .theme-grid .theme-label{font-size:7px}
  .theme-grid .mphj-card p{font-size:10px}
}