:root{
  --green-950:#06291f;--green-900:#0b3b2d;--green-800:#11533f;--green-700:#1d6b52;
  --gold-700:#916811;--gold-600:#b98722;--gold-500:#d5af39;--gold-300:#efd989;
  --cream:#fffaf0;--paper:#fffdf8;--ink:#203029;--muted:#66736d;--line:#e8dbb9;
  --male:#0d7180;--male-soft:#e9f8fa;--female:#a24468;--female-soft:#fff0f6;
  --shadow:0 18px 50px rgba(6,41,31,.12);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#faf6ed,#f4ecda)}
a{text-decoration:none;color:inherit}img{display:block;max-width:100%}button,input,select,textarea{font:inherit}
.btn{display:inline-flex;justify-content:center;align-items:center;padding:11px 16px;border:0;border-radius:12px;font-weight:800;cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-1px)}
.btn-light{background:#fff;color:var(--green-900)}.btn-gold{background:linear-gradient(135deg,var(--gold-300),var(--gold-500));color:#3c2b05}.btn-primary{background:linear-gradient(135deg,var(--green-800),var(--green-950));color:#fff}.btn-soft{background:#f0e7ce;color:var(--green-900)}.btn-outline{border:1px solid rgba(255,255,255,.38);background:transparent;color:inherit}.full{width:100%}
.hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(circle at 18% 10%,rgba(239,217,137,.22),transparent 24%),radial-gradient(circle at 85% 15%,rgba(239,217,137,.16),transparent 20%),linear-gradient(135deg,var(--green-950),var(--green-700))}.hero:before,.hero:after{content:"";position:absolute;width:210px;height:210px;border:1px solid rgba(239,217,137,.19);transform:rotate(45deg)}.hero:before{right:-115px;top:45px}.hero:after{left:-120px;bottom:-100px}.arabesque{position:absolute;inset:0;opacity:.12;background-image:linear-gradient(30deg,transparent 12%,rgba(255,255,255,.45) 12.5%,transparent 13%),linear-gradient(150deg,transparent 12%,rgba(255,255,255,.45) 12.5%,transparent 13%);background-size:64px 110px}
.topbar{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px clamp(16px,4vw,62px)}.brand{display:flex;align-items:center;gap:10px;color:var(--gold-300);font-weight:900;font-size:25px}.brand span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--gold-300);font-size:25px}.nav-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-content{position:relative;z-index:2;max-width:900px;margin:10px auto 0;padding:14px 18px 58px;text-align:center}.bismillah{margin:0 0 8px;font-size:28px;color:var(--gold-300);font-weight:800}.hero h1{margin:0;font-family:Georgia,'Times New Roman',serif;font-size:clamp(44px,8vw,74px);line-height:1}.hero h2{margin:14px 0 10px;font-size:28px;color:var(--gold-300)}.hero p{max-width:730px;margin:0 auto;color:#e2eee8;line-height:1.7;font-size:16px}
.page-shell{position:relative;z-index:3;max-width:1540px;margin:-24px auto 0;padding:0 16px 56px}.search-panel,.search-results,.focus-lineage-panel,.tree-wrap,.panel,.form-card,.login-card{background:rgba(255,255,255,.97);border:1px solid rgba(185,135,34,.23);border-radius:24px;box-shadow:var(--shadow)}
.search-panel{padding:18px;margin-bottom:20px}.family-search{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px}.search-input-wrap{position:relative}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:18px;color:#8c7440}.family-search input{width:100%;height:48px;border:1px solid #d9d0b6;border-radius:12px;padding:0 14px 0 42px;outline:none}.family-search input:focus{border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(213,175,57,.15)}
.section-heading,.tree-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px}.section-heading span,.tree-heading span,.focus-heading span{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-700);font-weight:900}.section-heading h2,.tree-heading h2,.focus-heading h2{margin:4px 0 0;font-family:Georgia,'Times New Roman',serif;color:var(--green-900)}.search-results{padding:22px;margin-bottom:20px}.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.result-card{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;padding:18px;border-radius:20px;background:linear-gradient(180deg,#fffefb,#fff9ee);border:1px solid #eadcb8}.result-card.male{border-left:5px solid var(--male)}.result-card.female{border-left:5px solid var(--female)}.result-seal{position:absolute;right:14px;top:14px;padding:7px 9px;border-radius:999px;background:var(--green-900);color:var(--gold-300);font-size:10px;font-weight:900}.result-photo{width:72px;height:72px;border-radius:18px;object-fit:cover;border:3px solid var(--gold-300)}.result-placeholder{display:grid;place-items:center;background:#f1e6c5;color:var(--green-900);font-size:28px}.result-info h3{margin:0;padding-right:75px;font-family:Georgia,'Times New Roman',serif;font-size:23px;color:var(--green-900)}.result-urdu{color:var(--gold-700);margin:3px 0 7px}.result-info p{margin:5px 0;font-size:13px;color:#4c5953}.result-button{margin-top:8px}.empty-state,.no-descendants{padding:28px;border-radius:17px;border:1px dashed var(--gold-500);background:#fff9ec;text-align:center;color:var(--muted)}
.focus-lineage-panel{margin-bottom:20px;padding:22px;background:radial-gradient(circle at top left,rgba(239,217,137,.18),transparent 24%),linear-gradient(135deg,var(--green-950),#0e6048);color:#fff;border:2px solid rgba(239,217,137,.4)}.focus-heading{display:flex;justify-content:space-between;align-items:center;gap:18px}.focus-heading h2{color:#fff;font-size:34px}.focus-heading p{margin:5px 0 0;color:#dceae4}.focus-big-seal{min-width:145px;padding:12px 15px;border:1px solid rgba(239,217,137,.35);border-radius:16px;background:rgba(255,255,255,.08);text-align:center}.focus-big-seal small{display:block;color:#dbe8e2;font-size:10px;text-transform:uppercase;letter-spacing:.12em}.focus-big-seal strong{display:block;margin-top:5px;color:var(--gold-300);font-size:22px}.lineage-path{display:flex;align-items:stretch;gap:8px;overflow:auto;margin-top:18px;padding:14px;border-radius:16px;background:rgba(255,255,255,.08)}.line-person{min-width:150px;padding:12px;border-radius:13px;border:1px solid rgba(255,255,255,.2);text-align:center;background:rgba(0,0,0,.10)}.line-person.active{border-color:var(--gold-300);background:rgba(213,175,57,.15)}.line-person small{display:block;color:#cfe0d8;font-size:10px}.line-person b{display:block;color:#fff;margin:4px 0;font-family:Georgia,'Times New Roman',serif}.line-person span{color:var(--gold-300);font-size:13px}.line-arrow{align-self:center;color:var(--gold-300);font-size:25px;font-weight:900}.focus-footer{margin-top:12px;font-size:13px;color:#e2eee8}.focus-footer a{float:right;color:var(--gold-300);font-weight:900}
.tree-wrap{position:relative;overflow:hidden;padding:25px 18px}.tree-heading{padding:10px 12px 16px;border-bottom:1px solid #ede3c4}.tree-heading h2{font-size:30px}.tree-heading p{max-width:470px;margin:0;text-align:right;color:var(--muted);line-height:1.6;font-size:13px}.family-root-block{margin-bottom:40px}
.root-ancestor-heading{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;overflow:hidden;padding:26px 26px 26px 34px;border-radius:28px;border:4px double var(--gold-500);background:radial-gradient(circle at 10% 20%,rgba(239,217,137,.18),transparent 24%),linear-gradient(135deg,var(--green-950),var(--green-700));color:#fff}.selected-root-heading{background:radial-gradient(circle at 10% 20%,rgba(239,217,137,.20),transparent 24%),linear-gradient(135deg,#5d430d,var(--green-800))}.root-pattern{position:absolute;width:150px;height:150px;border:1px solid rgba(239,217,137,.18);transform:rotate(45deg)}.pattern-left{left:-90px;top:-85px}.pattern-right{right:-80px;bottom:-80px}.root-medallion{position:absolute;left:12px;top:12px;width:70px;height:70px;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);background:linear-gradient(135deg,var(--gold-300),var(--gold-500));color:#3b2b07;display:flex;flex-direction:column;justify-content:center;align-items:center;border:3px solid rgba(255,255,255,.8)}.root-medallion span{font-size:12px;font-weight:900}.root-medallion strong{font-size:11px;margin-top:2px}.root-person{position:relative;z-index:1;display:flex;align-items:center;gap:20px;padding-left:62px}.root-photo{width:104px;height:104px;border-radius:24px;object-fit:cover;border:4px solid var(--gold-300);box-shadow:0 8px 20px rgba(0,0,0,.18)}.root-placeholder{display:grid;place-items:center;background:#f1e6c5;color:var(--green-900);font-size:38px}.root-label{display:inline-block;margin-bottom:4px;font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--gold-300);font-weight:900}.root-name-block h2{margin:0;font-family:Georgia,'Times New Roman',serif;font-size:clamp(31px,4vw,47px);line-height:1.05}.root-urdu{margin-top:5px;color:var(--gold-300);font-size:22px}.root-subline{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:8px;color:#e4eee9;font-size:13px}.root-subline small{color:#f4e4ac;font-size:14px}.root-info-panel{position:relative;z-index:1;min-width:260px;padding:15px 17px;border-radius:18px;border:1px solid rgba(239,217,137,.35);background:rgba(255,255,255,.08)}.root-arabic-title{text-align:right;color:var(--gold-300);font-size:17px;font-weight:800;margin-bottom:7px}.root-detail{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;padding:7px 0;border-top:1px solid rgba(255,255,255,.12)}.root-detail span{color:#cfe0d8;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.root-detail b{color:#fff;font-size:13px}.root-detail small{grid-column:2;color:#f1dda0;font-size:13px}.root-own-link{display:block;margin-top:9px;color:var(--gold-300);font-size:12px;font-weight:900;text-align:right}
.root-drop{position:relative;height:45px}.root-drop:before{content:"";position:absolute;left:50%;top:0;height:32px;border-left:3px solid var(--gold-500)}.root-drop span{position:absolute;left:50%;top:31px;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:var(--gold-500);box-shadow:0 0 0 5px #fff}
.branch-garden{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:22px;align-items:start}.branch-family-panel{position:relative;overflow:hidden;padding:0 15px 18px;border-radius:24px;border:2px solid var(--branch-color);background:linear-gradient(180deg,#fff,var(--branch-soft));box-shadow:0 14px 32px rgba(8,38,29,.09)}.branch-family-panel:before{content:"";position:absolute;inset:0 0 auto;height:7px;background:linear-gradient(90deg,var(--branch-deep),var(--branch-color),var(--gold-300))}.branch-panel-title{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:12px;align-items:center;padding:22px 5px 15px;border-bottom:1px solid rgba(0,0,0,.08)}.branch-symbol{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--branch-color),var(--branch-deep));color:#fff;display:grid;place-items:center;font-family:Georgia,'Times New Roman',serif;font-size:27px;font-weight:900;box-shadow:0 8px 18px rgba(0,0,0,.14)}.branch-panel-title small{display:block;color:var(--branch-deep);text-transform:uppercase;letter-spacing:.11em;font-size:9px;font-weight:900}.branch-panel-title h3{margin:3px 0 1px;font-family:Georgia,'Times New Roman',serif;font-size:23px;color:var(--branch-deep)}.branch-panel-title span{color:#766226;font-size:14px}.branch-panel-title a{padding:7px 9px;border-radius:9px;background:#fff;color:var(--branch-deep);font-size:10px;font-weight:900;border:1px solid rgba(0,0,0,.08)}
.tree{overflow:auto}.tree ul{position:relative;display:flex;justify-content:center;width:max-content;min-width:100%;margin:0;padding:25px 0 0}.tree li{position:relative;list-style:none;text-align:center;padding:27px 10px 0}.tree li:before,.tree li:after{content:"";position:absolute;top:0;right:50%;width:50%;height:27px;border-top:2px solid var(--branch-color)}.tree li:after{left:50%;right:auto;border-left:2px solid var(--branch-color)}.tree li:only-child:before,.tree li:only-child:after{display:none}.tree li:only-child{padding-top:0}.tree li:first-child:before,.tree li:last-child:after{border:0}.tree li:last-child:before{border-right:2px solid var(--branch-color);border-radius:0 10px 0 0}.tree li:first-child:after{border-radius:10px 0 0 0}.tree ul ul:before{content:"";position:absolute;left:50%;top:0;height:27px;border-left:2px solid var(--branch-color)}
.member-card{position:relative;width:286px;min-height:198px;padding:16px;border-radius:23px;border:1px solid rgba(0,0,0,.10);background:radial-gradient(circle at top right,rgba(239,217,137,.18),transparent 22%),linear-gradient(180deg,#fffefc,var(--branch-soft));box-shadow:0 12px 27px rgba(8,38,29,.08);text-align:left;overflow:hidden}.member-card:before{content:"";position:absolute;inset:0;border:1px solid rgba(213,175,57,.32);border-radius:18px;margin:7px;pointer-events:none}.member-card.male{border-left:5px solid var(--male)}.member-card.female{border-left:5px solid var(--female)}.member-card.direct-branch-root{padding-top:43px;border-width:2px}.branch-crown{position:absolute;left:15px;top:0;height:31px;padding:0 12px;border-radius:0 0 12px 12px;background:linear-gradient(135deg,var(--branch-deep),var(--branch-color));color:#fff;display:flex;align-items:center;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.09em}.arab-corner{position:absolute;width:22px;height:22px;border:2px solid rgba(213,175,57,.35)}.corner-tl{left:9px;top:9px;border-right:0;border-bottom:0;border-radius:7px 0 0 0}.corner-br{right:9px;bottom:9px;border-left:0;border-top:0;border-radius:0 0 7px 0}.person-seal{position:absolute;right:14px;top:13px;width:59px;height:59px;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);background:linear-gradient(135deg,var(--gold-300),var(--gold-500));color:#3a2b07;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.85);box-shadow:0 7px 16px rgba(0,0,0,.13)}.person-seal strong{font-size:10px;line-height:1;font-weight:900}.person-seal small{font-size:9px;margin-top:3px;font-weight:900}.member-topline{height:24px}.gender-chip{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:9px;font-weight:900}.gender-chip.male{background:var(--male-soft);color:var(--male)}.gender-chip.female{background:var(--female-soft);color:var(--female)}.member-main{display:flex;gap:13px;align-items:flex-start;margin-top:9px}.member-photo{width:70px;height:82px;border-radius:34px 34px 16px 16px;object-fit:cover;border:3px solid var(--gold-300);flex:0 0 70px}.member-photo.placeholder{display:grid;place-items:center;background:#f1e6c5;color:var(--green-900);font-size:29px}.member-content{min-width:0;padding-right:53px}.member-content h3{margin:0;font-family:Georgia,'Times New Roman',serif;color:var(--branch-deep);font-size:22px;line-height:1.12}.urdu-name{margin-top:3px;color:var(--gold-700);font-size:16px}.relation-line{margin-top:7px}.relation-line span{display:block;color:#4f5b55;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:900}.relation-line small{display:block;margin-top:2px;color:#6d7872;font-size:13px}.spouse-line{display:flex;gap:9px;align-items:flex-start;margin-top:11px;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.72);border:1px solid rgba(213,175,57,.22);font-size:11px}.spouse-icon{color:var(--gold-600);font-size:10px;margin-top:2px}.spouse-line b{display:block;color:#5c4b1d}.spouse-line small{display:block;color:#77642c;margin-top:2px;font-size:12px}.member-dates{margin-top:7px;color:#6e7973;font-size:10px}.member-footer{display:flex;justify-content:space-between;align-items:center;gap:9px;margin-top:11px;padding-top:9px;border-top:1px solid rgba(0,0,0,.08)}.chain-pill{padding:5px 8px;border-radius:999px;background:var(--branch-deep);color:#fff;font-size:9px;font-weight:900}.own-tree-link{color:var(--branch-deep);font-size:10px;font-weight:900}.own-tree-link b{font-size:15px}
.branch-theme-1{--branch-color:#1c7b5e;--branch-deep:#0b5943;--branch-soft:#edf9f3}.branch-theme-2{--branch-color:#146f97;--branch-deep:#0a4b68;--branch-soft:#edf8ff}.branch-theme-3{--branch-color:#8b5daf;--branch-deep:#603a84;--branch-soft:#f6f0ff}.branch-theme-4{--branch-color:#b96a17;--branch-deep:#884b0c;--branch-soft:#fff4e7}.branch-theme-5{--branch-color:#a84469;--branch-deep:#782646;--branch-soft:#fff0f6}.branch-theme-6{--branch-color:#71820f;--branch-deep:#4e5e08;--branch-soft:#f6fae8}.branch-theme-7{--branch-color:#168a81;--branch-deep:#0e625c;--branch-soft:#ebfaf8}.branch-theme-8{--branch-color:#885033;--branch-deep:#64361e;--branch-soft:#faf1ec}.branch-theme-9{--branch-color:#4c63c3;--branch-deep:#34469b;--branch-soft:#eef1ff}.branch-theme-10{--branch-color:#c76b59;--branch-deep:#944337;--branch-soft:#fff2ef}.branch-theme-11{--branch-color:#2d8b42;--branch-deep:#20632f;--branch-soft:#eef9f0}.branch-theme-12{--branch-color:#7b55a0;--branch-deep:#583878;--branch-soft:#f6effe}
footer{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:22px;background:var(--green-950);color:#e0ebe6;text-align:center}footer strong{color:var(--gold-300)}
/* Admin */.admin-body{min-height:100vh;background:linear-gradient(180deg,#f8f2e4,#edf4f0)}.admin-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px clamp(16px,4vw,60px);background:linear-gradient(135deg,var(--green-950),var(--green-700));color:#fff}.admin-header h1{margin:0;font-family:Georgia,'Times New Roman',serif}.admin-header p{margin:4px 0 0;color:var(--gold-300)}.compact-header{padding-top:15px;padding-bottom:15px}.admin-shell,.form-shell{max-width:1200px;margin:28px auto;padding:0 18px 50px}.panel{overflow:hidden}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px;border-bottom:1px solid #ece3c8}.panel-heading h2{margin:0;color:var(--green-900);font-family:Georgia,'Times New Roman',serif}.panel-heading p{margin:5px 0 0;color:var(--muted)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:820px}th,td{padding:14px 16px;text-align:left;border-bottom:1px solid #eee}th{background:#fbf7ed;color:#725c22;text-transform:uppercase;letter-spacing:.08em;font-size:11px}.avatar{width:46px;height:46px;border-radius:12px;object-fit:cover;border:2px solid var(--gold-300)}.avatar-empty{display:grid;place-items:center;background:#f1e6c5;color:var(--green-900)}.gender-badge{display:inline-block;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:900}.gender-badge.male{background:var(--male-soft);color:var(--male)}.gender-badge.female{background:var(--female-soft);color:var(--female)}.actions{display:flex;gap:12px;align-items:center}.actions a,.actions button{border:0;background:none;padding:0;color:var(--green-800);font-weight:900;cursor:pointer}.actions button{color:#9c2727}.form-card{padding:22px}.form-card h2{margin:0 0 15px;color:var(--green-900);font-family:Georgia,'Times New Roman',serif}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.span-2{grid-column:1/-1}label{display:block;color:#3f4b46;font-size:13px;font-weight:800}input,select,textarea{width:100%;margin-top:7px;padding:12px 13px;border:1px solid #d9d2bf;border-radius:11px;background:#fff;outline:none}.input-action{display:flex;gap:8px;align-items:end}.input-action input{flex:1}.mini-btn{border:0;border-radius:10px;padding:11px;background:#f0e4bd;color:#5b460d;font-weight:900;white-space:nowrap}.sticky-actions{position:sticky;bottom:14px;display:flex;justify-content:flex-end;gap:12px;padding:14px;border-radius:15px;background:rgba(255,255,255,.94);box-shadow:0 8px 28px rgba(0,0,0,.12)}.login-card{width:min(430px,calc(100% - 28px));margin:7vh auto;padding:32px}.login-emblem{width:80px;height:80px;margin:auto;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,var(--green-800),var(--green-950));color:var(--gold-300);border:4px solid var(--gold-300);font-size:38px;font-weight:900}.login-card h1{text-align:center;color:var(--green-900);font-family:Georgia,'Times New Roman',serif}.login-card>p{text-align:center;color:var(--green-700)}.login-card form{display:grid;gap:16px}.login-card small{display:block;text-align:center;margin-top:12px;color:var(--muted)}.back-link{display:block;text-align:center;margin-top:18px;color:var(--green-700);font-weight:900}.alert{padding:12px 14px;border-radius:11px;margin-bottom:16px}.alert.success{background:#e6f7ed;color:#14693a}.alert.error{background:#ffe7e7;color:#982020}
@media(max-width:980px){.result-grid{grid-template-columns:1fr}.root-ancestor-heading{grid-template-columns:1fr}.root-info-panel{width:100%;min-width:0}.focus-heading,.tree-heading{flex-direction:column;align-items:flex-start}.tree-heading p{text-align:left}.branch-garden{grid-template-columns:1fr}.branch-family-panel{padding-left:10px;padding-right:10px}}
@media(max-width:720px){.topbar,.admin-header{flex-direction:column;align-items:flex-start}.hero-content{padding-bottom:48px}.hero h1{font-size:46px}.page-shell{margin:-18px auto 0;padding:0 10px 45px}.family-search{grid-template-columns:1fr}.search-panel,.search-results,.focus-lineage-panel,.tree-wrap{border-radius:18px}.focus-heading{align-items:flex-start}.focus-big-seal{width:100%}.focus-footer a{float:none;display:block;margin-top:8px}.root-ancestor-heading{padding:20px 16px;border-radius:22px}.root-medallion{position:relative;left:auto;top:auto;width:64px;height:64px;margin-bottom:5px}.root-person{padding-left:0;align-items:flex-start}.root-photo{width:84px;height:84px}.root-name-block h2{font-size:28px}.root-urdu{font-size:19px}.root-info-panel{padding:13px}.branch-panel-title{grid-template-columns:48px minmax(0,1fr)}.branch-panel-title>a{grid-column:1/-1;text-align:center}.branch-symbol{width:44px;height:44px}.tree{overflow:visible}.tree ul{display:block;width:100%;min-width:0;padding-top:12px}.tree ul ul{padding-left:0}.tree li{display:block;padding:12px 0 0 23px;text-align:left}.tree li:before,.tree li:after{display:none}.tree ul ul:before{left:9px;top:0;height:100%;border-left:2px solid var(--branch-color)}.member-card{width:100%;max-width:100%}.member-content{padding-right:47px}.result-card{grid-template-columns:1fr}.result-seal{position:static;justify-self:start}.result-info h3{padding-right:0}.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}table{min-width:680px}}
@media(max-width:430px){.brand{font-size:21px}.nav-actions{width:100%}.nav-actions .btn{flex:1}.hero h1{font-size:40px}.hero h2{font-size:24px}.root-person{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px}.root-photo{width:72px;height:72px}.root-medallion{width:58px;height:58px}.root-name-block h2{font-size:24px}.root-urdu{font-size:17px}.member-main{gap:10px}.member-photo{width:60px;height:72px;flex-basis:60px}.member-content h3{font-size:20px}.person-seal{width:52px;height:52px}.member-card{padding:14px}.branch-family-panel{border-radius:19px}.branch-panel-title h3{font-size:20px}}
@media print{.no-print,.search-panel,.search-results,.result-button,.own-tree-link,.root-own-link,footer,.nav-actions{display:none!important}body{background:#fff}.page-shell{margin:0;padding:0}.hero{background:#fff;color:#000;border-bottom:2px solid var(--gold-500)}.hero h1,.hero h2,.hero p,.bismillah,.brand{color:#000!important}.tree-wrap,.focus-lineage-panel,.root-ancestor-heading,.branch-family-panel,.member-card{box-shadow:none}.focus-lineage-panel,.root-ancestor-heading{background:#fff!important;color:#000;border-color:#777}.focus-heading h2,.focus-heading p,.root-name-block h2,.root-urdu,.root-detail b,.root-arabic-title{color:#000!important}.branch-garden{display:block}.branch-family-panel{page-break-inside:avoid;margin-bottom:14px}}


/* =========================================================
   V7 — GOLDEN DESCENDANT CONNECTIONS + MOBILE EASY VIEW
   ========================================================= */
:root{
  --connector-gold:#d7ad35;
  --connector-gold-dark:#a97812;
  --connector-glow:rgba(215,173,53,.22);
}
html,body{max-width:100%;overflow-x:hidden}

/* Root to main branches */
.root-drop{height:58px}
.root-drop:before{
  height:46px!important;
  border-left:4px solid var(--connector-gold)!important;
  filter:drop-shadow(0 0 3px var(--connector-glow));
}
.root-drop span{
  top:43px!important;width:15px!important;height:15px!important;
  background:var(--connector-gold)!important;
  border:3px solid #fff!important;
  box-shadow:0 0 0 3px var(--connector-gold-dark),0 0 0 7px #fff!important;
}

/* Keep all main child branch panels in one connected family row on desktop */
.branch-garden{
  position:relative;
  display:flex!important;
  align-items:flex-start;
  gap:26px;
  padding:40px 12px 18px;
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:var(--gold-500) #f4ecd5;
}
.branch-garden::-webkit-scrollbar{height:9px}
.branch-garden::-webkit-scrollbar-track{background:#f4ecd5;border-radius:999px}
.branch-garden::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--gold-600),var(--gold-300));border-radius:999px}
.branch-garden:has(.branch-family-panel:nth-child(2)):before{
  content:"";
  position:absolute;
  left:222px;
  right:222px;
  top:17px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--connector-gold-dark),var(--connector-gold),var(--connector-gold-dark));
  box-shadow:0 0 0 3px #fff,0 3px 10px var(--connector-glow);
}
.branch-family-panel{
  flex:0 0 430px;
  width:430px;
  overflow:visible!important;
  scroll-snap-align:start;
}
.branch-family-panel:after{
  content:"";
  position:absolute;
  left:50%;
  top:-39px;
  transform:translateX(-50%);
  width:4px;
  height:39px;
  border-radius:999px;
  background:var(--connector-gold);
  box-shadow:0 0 0 3px #fff,0 2px 8px var(--connector-glow);
}

/* Branch heading connects directly to its first descendant */
.branch-tree{position:relative;padding-top:34px}
.branch-tree:before{
  content:"";
  position:absolute;
  left:50%;top:0;
  width:4px;height:34px;
  transform:translateX(-50%);
  background:var(--connector-gold);
  border-radius:999px;
  box-shadow:0 0 0 3px #fff,0 2px 7px var(--connector-glow);
}
.branch-tree:after{
  content:"";
  position:absolute;
  left:50%;top:28px;
  width:12px;height:12px;
  transform:translateX(-50%);
  border-radius:50%;
  background:var(--connector-gold);
  border:3px solid #fff;
  box-shadow:0 0 0 2px var(--connector-gold-dark);
}

/* Every parent-to-child connector is always gold */
.tree ul{padding-top:32px!important}
.tree li{padding-top:32px!important}
.tree li:before,.tree li:after{
  height:32px!important;
  border-color:var(--connector-gold)!important;
  border-width:3px!important;
  filter:drop-shadow(0 1px 1px var(--connector-glow));
}
.tree li:last-child:before{border-right-color:var(--connector-gold)!important}
.tree ul ul:before{
  height:32px!important;
  border-left:3px solid var(--connector-gold)!important;
  filter:drop-shadow(0 1px 1px var(--connector-glow));
}
.tree li > .member-card:after{
  content:"";
  position:absolute;
  left:50%;top:-8px;
  transform:translateX(-50%);
  width:12px;height:12px;
  border-radius:50%;
  background:var(--connector-gold);
  border:3px solid #fff;
  box-shadow:0 0 0 2px var(--connector-gold-dark);
  z-index:4;
}

/* Golden connection indicator inside each card */
.member-card{border-top:3px solid var(--connector-gold)!important}
.branch-crown{box-shadow:0 5px 14px rgba(0,0,0,.12),0 0 0 2px rgba(215,173,53,.18)}

.mobile-branch-toggle{display:none}

@media(max-width:720px){
  /* Simple single-column mobile branch view */
  .tree-wrap{padding:18px 8px!important;overflow:visible!important}
  .tree-heading{padding-left:8px;padding-right:8px}
  .family-root-block{margin-bottom:24px}
  .root-drop{height:38px}
  .root-drop:before{height:29px!important}
  .root-drop span{top:26px!important;width:12px!important;height:12px!important}

  .branch-garden{
    display:block!important;
    padding:18px 0 0!important;
    overflow:visible!important;
    scroll-snap-type:none;
  }
  .branch-garden:before{display:none!important}
  .branch-family-panel{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 18px!important;
    border-width:1px!important;
  }
  .branch-family-panel:after{
    left:24px!important;
    top:-19px!important;
    height:19px!important;
    width:3px!important;
    transform:none!important;
  }
  .branch-family-panel + .branch-family-panel:before{
    content:"";
    position:absolute;
    left:24px;
    top:-19px;
    width:11px;height:11px;
    border-radius:50%;
    background:var(--connector-gold);
    border:2px solid #fff;
    box-shadow:0 0 0 2px var(--connector-gold-dark);
    z-index:5;
  }

  .branch-panel-title{
    position:relative;
    grid-template-columns:46px minmax(0,1fr) auto!important;
    gap:10px!important;
    padding:16px 4px 13px!important;
  }
  .branch-panel-title .branch-open-link{display:none}
  .mobile-branch-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-width:42px;
    min-height:38px;
    border:1px solid rgba(0,0,0,.09);
    border-radius:11px;
    background:#fff;
    color:var(--branch-deep);
    font-weight:900;
    cursor:pointer;
  }
  .mobile-branch-toggle span{display:none}
  .mobile-branch-toggle b{font-size:22px;line-height:1}
  .mobile-collapsed .branch-tree{display:none}
  .mobile-collapsed{padding-bottom:0!important}

  /* Vertical gold family spine with short links to each card */
  .branch-tree{padding:16px 0 0 0!important}
  .branch-tree:before,.branch-tree:after{display:none}
  .tree ul{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    padding:0!important;
  }
  .tree ul ul{
    position:relative;
    margin:0!important;
    padding:0 0 0 24px!important;
  }
  .tree ul ul:before{
    display:block!important;
    left:9px!important;
    top:-8px!important;
    bottom:0!important;
    width:3px!important;
    height:auto!important;
    border:0!important;
    background:linear-gradient(180deg,var(--connector-gold),var(--connector-gold-dark))!important;
    border-radius:999px;
    box-shadow:0 0 0 2px #fff,0 2px 7px var(--connector-glow);
  }
  .tree li{
    display:block!important;
    position:relative!important;
    padding:10px 0 0 24px!important;
    text-align:left!important;
  }
  .tree > ul > li{padding-left:0!important;padding-top:0!important}
  .tree li:before,.tree li:after{display:none!important}
  .tree ul ul > li:before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:9px!important;
    top:41px!important;
    width:17px!important;
    height:3px!important;
    border:0!important;
    background:var(--connector-gold)!important;
    border-radius:999px;
    filter:none!important;
    box-shadow:0 0 0 2px #fff;
  }
  .tree ul ul > li:after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:5px!important;
    top:37px!important;
    width:11px!important;
    height:11px!important;
    border:2px solid #fff!important;
    border-radius:50%!important;
    background:var(--connector-gold)!important;
    box-shadow:0 0 0 2px var(--connector-gold-dark)!important;
  }
  .tree li > .member-card:after{display:none!important}

  .member-card{
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    padding:13px!important;
    border-radius:18px!important;
    box-shadow:0 7px 20px rgba(8,38,29,.08)!important;
  }
  .member-card.direct-branch-root{padding-top:42px!important}
  .member-main{gap:10px!important}
  .member-photo{width:58px!important;height:68px!important;flex-basis:58px!important}
  .member-content{padding-right:46px!important}
  .member-content h3{font-size:19px!important;line-height:1.16!important}
  .urdu-name{font-size:15px!important}
  .person-seal{width:48px!important;height:48px!important;right:10px!important;top:10px!important}
  .person-seal strong{font-size:9px!important}
  .member-footer{align-items:center!important}
  .own-tree-link{font-size:10px!important;padding:5px 0}
  .spouse-line{padding:8px!important}
}

@media(max-width:430px){
  .page-shell{padding-left:7px!important;padding-right:7px!important}
  .search-panel,.search-results,.focus-lineage-panel,.tree-wrap{border-radius:15px!important}
  .root-ancestor-heading{padding:16px 12px!important}
  .root-person{grid-template-columns:62px minmax(0,1fr)!important}
  .root-photo{width:62px!important;height:62px!important;border-radius:17px!important}
  .root-name-block h2{font-size:22px!important}
  .root-info-panel{padding:10px!important}
  .branch-family-panel{border-radius:16px!important;padding-left:7px!important;padding-right:7px!important}
  .branch-panel-title{grid-template-columns:40px minmax(0,1fr) 38px!important}
  .branch-symbol{width:40px!important;height:40px!important;font-size:20px!important}
  .branch-panel-title h3{font-size:18px!important}
  .branch-panel-title span{font-size:12px!important}
  .tree ul ul{padding-left:19px!important}
  .tree li{padding-left:19px!important}
  .tree ul ul:before{left:7px!important}
  .tree ul ul > li:before{left:7px!important;width:14px!important}
  .tree ul ul > li:after{left:3px!important}
}

@media print{
  .mobile-branch-toggle{display:none!important}
  .branch-garden{display:block!important;overflow:visible!important;padding-top:0!important}
  .branch-garden:before,.branch-family-panel:after{display:none!important}
  .branch-family-panel{width:100%!important;margin-bottom:15px!important}
}


/* =========================================================
   V8 — AUTO RESPONSIVE COMPACT TREE FOR LONG FAMILY LINES
   ========================================================= */
:root{
  --compact-card-width:clamp(176px,16vw,218px);
  --compact-photo:48px;
}

/* Full-width stacked main branches give every long lineage maximum room */
.branch-garden{
  display:block!important;
  padding:24px 0 6px 32px!important;
  overflow:visible!important;
  scroll-snap-type:none!important;
}
.branch-garden:before{
  display:block!important;
  left:14px!important;
  right:auto!important;
  top:0!important;
  bottom:0!important;
  width:4px!important;
  height:auto!important;
  background:linear-gradient(180deg,var(--connector-gold),var(--connector-gold-dark))!important;
  border-radius:999px;
  box-shadow:0 0 0 3px #fff,0 3px 10px var(--connector-glow);
}
.branch-family-panel{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0 0 24px!important;
  scroll-snap-align:none!important;
}
.branch-family-panel:after{
  left:-20px!important;
  top:30px!important;
  width:21px!important;
  height:4px!important;
  transform:none!important;
  background:var(--connector-gold)!important;
  box-shadow:0 0 0 3px #fff,0 2px 8px var(--connector-glow)!important;
}
.branch-family-panel:before{
  content:"";position:absolute;left:-25px;top:26px;width:12px;height:12px;border-radius:50%;
  background:var(--connector-gold);border:3px solid #fff;box-shadow:0 0 0 2px var(--connector-gold-dark);z-index:6;
}

/* Easy view controls */
.tree-view-toolbar{
  position:sticky;top:8px;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin:0 0 10px;padding:10px;border:1px solid #e6dab6;border-radius:16px;
  background:rgba(255,253,247,.94);backdrop-filter:blur(10px);box-shadow:0 8px 22px rgba(8,39,29,.08);
}
.view-mode-group,.tree-action-group{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.view-control{
  min-height:38px;padding:8px 12px;border:1px solid #ded4b7;border-radius:10px;background:#fff;color:var(--green-900);
  font-size:12px;font-weight:850;cursor:pointer;white-space:nowrap;
}
.view-control span{color:var(--gold-700);margin-right:4px}
.view-control:hover,.view-control.active{background:linear-gradient(135deg,var(--green-800),var(--green-950));color:#fff;border-color:var(--green-800)}
.view-control.active span,.view-control:hover span{color:var(--gold-300)}
.compact-view-note{margin:0 0 18px;padding:9px 12px;border-radius:11px;background:#fff8e8;border-left:4px solid var(--gold-500);font-size:12px;color:#5d665f}
.compact-view-note b{color:var(--green-900)}

/* Compact person boxes: important name details only */
.member-card{
  width:var(--compact-card-width)!important;
  min-height:0!important;
  padding:42px 11px 11px!important;
  border-radius:17px!important;
  transition:width .2s ease,box-shadow .2s ease,transform .2s ease;
}
.member-card:hover{transform:translateY(-2px);box-shadow:0 13px 27px rgba(8,38,29,.12)!important}
.member-card.direct-branch-root{padding-top:46px!important}
.member-main{display:grid!important;grid-template-columns:var(--compact-photo) minmax(0,1fr)!important;gap:9px!important;align-items:center!important}
.member-photo{
  width:var(--compact-photo)!important;height:54px!important;flex-basis:var(--compact-photo)!important;
  margin:0!important;border-radius:13px!important;border-width:2px!important;
}
.member-content{padding:0 34px 0 0!important;min-width:0!important}
.member-content h3{
  font-size:clamp(14px,1.25vw,18px)!important;line-height:1.14!important;margin:0!important;
  overflow-wrap:anywhere;
}
.urdu-name{font-size:13px!important;line-height:1.45!important;margin-top:2px!important}
.relation-line{margin-top:4px!important;font-size:9px!important;line-height:1.3!important}
.relation-line small{font-size:11px!important}
.member-topline{position:absolute!important;left:10px!important;top:10px!important}
.gender-chip{font-size:8px!important;padding:4px 7px!important}
.person-seal{width:42px!important;height:42px!important;right:8px!important;top:8px!important}
.person-seal strong{font-size:8px!important}.person-seal small{font-size:7px!important}
.branch-crown{top:-12px!important;left:10px!important;font-size:8px!important;padding:6px 9px!important}
.member-details-toggle{
  position:absolute;right:8px;bottom:7px;z-index:8;display:inline-flex;align-items:center;gap:4px;
  padding:4px 7px;border:1px solid rgba(167,125,24,.28);border-radius:999px;background:#fffaf0;color:var(--green-900);
  font-size:8px;font-weight:900;cursor:pointer;
}
.member-details-toggle b{font-size:13px;line-height:1;color:var(--gold-700)}
.member-extra{display:none;margin-top:9px;padding-top:9px;border-top:1px dashed rgba(181,139,34,.35)}
.member-card.details-open{width:clamp(230px,21vw,290px)!important}
.member-card.details-open .member-extra,.details-mode .member-extra{display:block}
.details-mode .member-card{width:clamp(230px,21vw,290px)!important}
.details-mode .member-details-toggle{display:none}
.spouse-line{margin-top:0!important;padding:7px!important;font-size:10px!important}
.spouse-line small,.spouse-line em{display:block;font-size:9px!important;font-style:normal}
.member-dates{display:flex;justify-content:space-between;gap:8px;margin-top:6px!important;padding:6px 7px;border-radius:8px;background:#fff;font-size:9px!important}
.member-dates span{font-weight:800;color:#79631d}.member-dates b{font-weight:700;color:#56625c}
.member-footer{margin-top:7px!important;padding-top:6px!important;gap:6px!important}
.chain-pill{font-size:8px!important;padding:4px 6px!important}.own-tree-link{font-size:9px!important}

/* Descendant collapse control */
.descendant-toggle{
  position:relative;z-index:10;display:inline-flex;align-items:center;gap:5px;margin:8px auto -1px;padding:4px 8px;
  border:1px solid var(--connector-gold);border-radius:999px;background:#fff;color:var(--green-900);font-size:8px;font-weight:900;cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,.05);
}
.descendant-toggle b{font-size:12px;color:var(--gold-700)}
.descendants-collapsed > .descendant-list{display:none!important}
.descendants-collapsed > .descendant-toggle{margin-bottom:2px}

/* Long trees fit automatically while retaining a readable minimum size */
.branch-tree{
  width:100%;max-width:100%;overflow-x:auto!important;overflow-y:visible!important;padding:30px 8px 15px!important;
  scrollbar-width:thin;scrollbar-color:var(--gold-500) #f4ecd5;
}
.branch-tree::-webkit-scrollbar{height:8px}.branch-tree::-webkit-scrollbar-track{background:#f4ecd5;border-radius:99px}.branch-tree::-webkit-scrollbar-thumb{background:var(--gold-500);border-radius:99px}
.branch-tree > ul{transform-origin:top center}
.branch-tree.auto-fitted{overflow-x:hidden!important}
.branch-tree.needs-horizontal-scroll{background:linear-gradient(90deg,rgba(255,250,238,.85),transparent 5%,transparent 95%,rgba(255,250,238,.85));border-radius:14px}
.tree ul{gap:0!important}
.tree li{padding-left:6px!important;padding-right:6px!important}

/* Branch accordion button works on desktop, tablet and mobile */
.mobile-branch-toggle{
  display:inline-flex!important;align-items:center;justify-content:center;gap:6px;min-height:36px;
  padding:7px 10px;border:1px solid rgba(0,0,0,.09);border-radius:10px;background:#fff;color:var(--branch-deep);
  font-size:10px;font-weight:900;cursor:pointer;
}
.mobile-branch-toggle b{font-size:17px;line-height:1}
.branch-collapsed .branch-tree,.mobile-collapsed .branch-tree{display:none!important}
.branch-collapsed{padding-bottom:0!important}

@media(max-width:1100px){
  :root{--compact-card-width:190px;--compact-photo:46px}
  .tree-view-toolbar{position:relative;top:auto;align-items:flex-start;flex-direction:column}
  .view-mode-group,.tree-action-group{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .view-control{flex:0 0 auto}
  .branch-garden{padding-left:26px!important}
  .branch-family-panel:after{left:-16px!important;width:17px!important}
  .branch-family-panel:before{left:-21px!important}
  .branch-panel-title{grid-template-columns:52px minmax(0,1fr) auto auto!important}
  .branch-open-link{font-size:9px!important}
}

@media(max-width:720px){
  :root{--compact-card-width:100%;--compact-photo:52px}
  .tree-heading p{font-size:12px!important}
  .compact-view-note{font-size:11px}
  .tree-view-toolbar{padding:8px;margin-bottom:9px}
  .tree-action-group .view-control{font-size:10px;padding:7px 9px}
  .branch-garden{padding:16px 0 0 19px!important}
  .branch-garden:before{left:7px!important;width:3px!important}
  .branch-family-panel{margin-bottom:15px!important}
  .branch-family-panel:after{left:-12px!important;top:27px!important;width:13px!important;height:3px!important}
  .branch-family-panel:before{left:-16px!important;top:23px!important;width:10px!important;height:10px!important;border-width:2px!important}
  .branch-panel-title{grid-template-columns:42px minmax(0,1fr) 40px!important;gap:8px!important;padding:13px 4px 11px!important}
  .branch-open-link{display:none!important}
  .mobile-branch-toggle{width:38px!important;min-width:38px!important;padding:0!important}
  .mobile-branch-toggle span{display:none!important}
  .branch-tree{padding:10px 0 10px!important;overflow:visible!important}
  .branch-tree > ul{zoom:1!important}

  /* Mobile becomes a clean vertical family route */
  .tree ul{display:block!important;width:100%!important;min-width:0!important;padding:0!important}
  .tree ul ul{position:relative;margin:0!important;padding:0 0 0 22px!important}
  .tree ul ul:before{display:block!important;left:7px!important;top:-7px!important;bottom:0!important;height:auto!important;width:3px!important;border:0!important;background:linear-gradient(180deg,var(--connector-gold),var(--connector-gold-dark))!important}
  .tree li{display:block!important;padding:9px 0 0 20px!important;text-align:left!important}
  .tree > ul > li{padding-left:0!important;padding-top:0!important}
  .tree li:before,.tree li:after{display:none!important}
  .tree ul ul > li:before{content:""!important;display:block!important;position:absolute!important;left:7px!important;top:37px!important;width:15px!important;height:3px!important;border:0!important;background:var(--connector-gold)!important;border-radius:99px}
  .tree ul ul > li:after{content:""!important;display:block!important;position:absolute!important;left:3px!important;top:33px!important;width:10px!important;height:10px!important;border:2px solid #fff!important;border-radius:50%!important;background:var(--connector-gold)!important;box-shadow:0 0 0 2px var(--connector-gold-dark)!important}
  .tree li > .member-card:after{display:none!important}
  .member-card,.member-card.details-open,.details-mode .member-card{width:100%!important;max-width:none!important}
  .member-card{padding:39px 10px 9px!important}
  .member-main{grid-template-columns:52px minmax(0,1fr)!important}
  .member-photo{width:52px!important;height:57px!important}
  .member-content{padding-right:38px!important}
  .member-content h3{font-size:17px!important}
  .member-details-toggle{right:7px;bottom:6px}
  .descendant-toggle{margin-left:26px}
}

@media(max-width:430px){
  .view-control{font-size:9px;padding:7px 8px;min-height:34px}
  .compact-view-note{display:none}
  .branch-garden{padding-left:15px!important}
  .branch-garden:before{left:5px!important}
  .branch-family-panel:after{left:-10px!important;width:11px!important}
  .branch-family-panel:before{left:-14px!important}
  .tree ul ul{padding-left:18px!important}
  .tree li{padding-left:17px!important}
  .member-content h3{font-size:16px!important}
  .urdu-name{font-size:12px!important}
  .relation-line{font-size:8px!important}
}

@media print{
  .tree-view-toolbar,.compact-view-note,.member-details-toggle,.descendant-toggle,.mobile-branch-toggle{display:none!important}
  .member-extra{display:block!important}
  .member-card{width:240px!important}
  .branch-collapsed .branch-tree,.mobile-collapsed .branch-tree,.descendants-collapsed > .descendant-list{display:block!important}
  .branch-tree > ul{zoom:1!important}
}


/* =========================================================
   V9 — NESTED COLOUR ROUTES + FULL ADMIN CUSTOMIZATION
   ========================================================= */
.branch-origin-head{display:flex;align-items:center;gap:9px;margin:-2px 0 7px;padding:7px 10px;border-radius:10px;background:#fffaf0;border:1px solid color-mix(in srgb,var(--node-color,var(--branch-color)) 36%,#e5d8b5);font-size:10px;color:#5c665f}
.branch-origin-head span{padding:4px 7px;border-radius:999px;background:var(--node-color,var(--branch-color));color:#fff;font-weight:900;letter-spacing:.06em}
.branch-origin-head b{color:var(--node-deep,var(--branch-deep));font-size:11px}
.branch-origin-head i{margin-left:auto;width:46px;height:7px;border-radius:99px;background:var(--origin-color);box-shadow:0 0 0 2px #fff,0 0 0 3px color-mix(in srgb,var(--origin-color) 40%,#ddd)}
.branch-panel-title h3 em{font-size:.55em;font-style:normal;color:var(--branch-deep);white-space:nowrap}

/* Every card states where the route came from. */
.origin-label{position:absolute;left:10px;right:62px;top:-11px;z-index:12;display:flex;align-items:center;gap:6px;min-height:23px;padding:4px 8px;border-radius:999px;background:#fff;border:1px solid color-mix(in srgb,var(--node-color) 55%,#ddd);box-shadow:0 4px 10px rgba(0,0,0,.06);font-size:8px;color:#59655f;white-space:nowrap;overflow:hidden}
.origin-label i{width:10px;height:10px;border-radius:50%;background:var(--node-color);box-shadow:0 0 0 3px var(--node-soft);flex:0 0 10px}
.origin-label span{overflow:hidden;text-overflow:ellipsis}
.origin-label b{margin-left:auto;color:var(--node-deep);font-size:9px}
.member-card:has(.origin-label){margin-top:12px}

/* A parent with two or more children visibly carries all outgoing colour codes. */
.multi-branch-band{margin:8px -3px 0;padding:7px;border-radius:11px;background:linear-gradient(180deg,#fff,#fffaf0);border:1px solid #eadfbe}
.split-caption{display:flex;justify-content:space-between;gap:6px;align-items:center;margin-bottom:6px;font-size:8px;color:#6c756f}
.split-caption b{color:var(--green-900);text-transform:uppercase;letter-spacing:.05em}
.split-items{display:flex;gap:5px;flex-wrap:wrap}
.split-items a{display:grid;grid-template-columns:8px auto minmax(0,1fr);align-items:center;gap:4px;max-width:100%;padding:4px 6px;border-radius:8px;background:color-mix(in srgb,var(--split-color) 10%,#fff);border:1px solid color-mix(in srgb,var(--split-color) 42%,#ddd);font-size:8px;color:#4f5a55}
.split-items a i{width:8px;height:18px;border-radius:99px;background:var(--split-color)}
.split-items a b{color:color-mix(in srgb,var(--split-color) 75%,#111);font-size:8px}
.split-items a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.has-split-routes>.descendant-toggle{border-color:var(--gold-500);background:linear-gradient(135deg,#fff,#fff7df)}

/* Child connector colour belongs to that exact route, not only the first main branch. */
.branch-node{--branch-color:var(--node-color)!important;--branch-soft:var(--node-soft)!important;--branch-deep:var(--node-deep)!important}
.tree li:before,.tree li:after,.tree ul ul:before{border-color:var(--node-color,var(--connector-gold))!important}
.member-card{border-top:4px solid var(--node-color)!important}
.person-seal{background:linear-gradient(145deg,var(--node-soft),#fff)!important;border-color:var(--node-color)!important;color:var(--node-deep)!important}
.chain-pill{border-color:color-mix(in srgb,var(--node-color) 38%,#ddd)!important;color:var(--node-deep)!important;background:var(--node-soft)!important}
.after-name-line{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:4px;font-size:9px;font-weight:900;color:var(--node-deep)}
.after-name-line span,.after-name-line small{display:inline-block;padding:3px 6px;border-radius:999px;background:var(--node-soft);border:1px solid color-mix(in srgb,var(--node-color) 35%,#ddd)}
.root-after-name{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:7px 0 2px}
.root-after-name span,.root-after-name small{padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(239,216,140,.35);color:var(--gold-300);font-weight:900}
.member-notes{margin-top:7px;padding:8px;border-radius:9px;background:#fffaf0;border-left:3px solid var(--node-color);font-size:10px;line-height:1.45;color:#59635e}
.photo-hidden .member-main{display:block!important}.photo-hidden .member-content{padding-left:0!important}

/* Root clearly shows all immediate son/daughter colours together. */
.root-child-colors{grid-column:1/-1;position:relative;z-index:2;margin-top:2px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(239,216,140,.28)}
.root-child-colors>small{display:block;color:#e1ece7;margin-bottom:7px;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.root-child-colors>div{display:flex;gap:7px;flex-wrap:wrap}
.root-child-colors span{display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:#fff;color:#4d5752;font-size:9px;font-weight:800}
.root-child-colors i{width:13px;height:13px;border-radius:50%;background:var(--root-child-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--root-child-color) 18%,#fff)}
.root-child-colors b{color:var(--root-child-color)}

/* Admin customization controls. */
.form-intro{margin:-6px 0 16px;color:var(--muted);font-size:13px}
.display-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.toggle-option{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid #e8dfc5;border-radius:13px;background:#fffdf8;cursor:pointer}
.toggle-option input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--green-800);flex:0 0 18px}
.toggle-option span{display:flex;flex-direction:column;gap:2px}.toggle-option b{color:var(--green-900);font-size:13px}.toggle-option small,.field-help{color:var(--muted);font-size:10px;line-height:1.4}
.settings-toggles{margin-top:16px}
footer a{color:var(--gold-300);font-weight:900;border-bottom:1px dashed currentColor}

@media(max-width:1100px){
 .origin-label{right:54px}.root-child-colors>div{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}.root-child-colors span{flex:0 0 auto}
}
@media(max-width:720px){
 .branch-origin-head{margin:0 0 6px;flex-wrap:wrap}.branch-origin-head i{width:100%;height:4px;order:3}
 .origin-label{position:relative;left:auto;right:auto;top:auto;margin:-28px 45px 8px 0;width:calc(100% - 45px)}
 .member-card:has(.origin-label){margin-top:5px;padding-top:43px!important}
 .multi-branch-band{margin-top:7px}.split-caption{align-items:flex-start;flex-direction:column}.split-items{display:grid;grid-template-columns:1fr 1fr;width:100%}.split-items a{min-width:0}
 .tree ul ul:before{background:linear-gradient(180deg,var(--node-color),color-mix(in srgb,var(--node-color) 70%,#8b6519))!important}
 .tree ul ul>li:before,.tree ul ul>li:after{background:var(--node-color)!important}
 .display-option-grid{grid-template-columns:1fr}
 .root-child-colors{margin-top:10px}
}
@media(max-width:430px){
 .split-items{grid-template-columns:1fr}.origin-label{font-size:7px}.origin-label b{font-size:8px}.after-name-line{font-size:8px}
}
@media print{.origin-label{box-shadow:none}.multi-branch-band{break-inside:avoid}.branch-origin-head{border-color:#aaa}}

.inline-check{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:11px;color:var(--green-900);font-weight:800}.inline-check input{width:16px;height:16px;margin:0;accent-color:var(--green-800)}


/* =============================================================
   VERSION 10 — 50/50 MAIN ROUTES + CLICKABLE ROUTE BOXES + MEDIA
   ============================================================= */
.brand{gap:10px}
.brand-logo{width:54px;height:54px;object-fit:contain;border-radius:14px;background:#fff;padding:4px;border:2px solid var(--gold-300);box-shadow:0 8px 20px rgba(0,0,0,.16)}
.hero-content{max-width:1280px;text-align:left}
.hero-content.hero-with-gallery{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.85fr);gap:42px;align-items:center;padding-top:24px}
.hero-copy{position:relative;z-index:2}
.hero-copy .bismillah,.hero-copy h1,.hero-copy h2,.hero-copy p{margin-left:0;margin-right:0;text-align:left}
.hero-copy h2{text-align:left}
.hero-without-gallery .hero-copy{max-width:900px;margin:0 auto;text-align:center}
.hero-without-gallery .hero-copy .bismillah,.hero-without-gallery .hero-copy h1,.hero-without-gallery .hero-copy h2,.hero-without-gallery .hero-copy p{text-align:center;margin-left:auto;margin-right:auto}
.hero-gallery{position:relative;height:330px;min-width:0}
.hero-gallery-item{position:absolute;margin:0;overflow:hidden;border:5px solid rgba(239,216,140,.95);background:#fff;box-shadow:0 20px 44px rgba(0,0,0,.25)}
.hero-gallery-item img{width:100%;height:100%;object-fit:cover}
.hero-gallery-item-1{width:68%;height:78%;left:0;top:6%;border-radius:40px 10px 40px 10px;transform:rotate(-2deg)}
.hero-gallery-item-2{width:48%;height:58%;right:0;top:0;border-radius:12px 36px 12px 36px;transform:rotate(3deg)}
.hero-gallery-item-3{width:50%;height:50%;right:5%;bottom:0;border-radius:32px 10px 32px 10px;transform:rotate(-2deg)}
.hero-gallery-seal{position:absolute;left:48%;top:48%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold-300),var(--gold-500));color:#3a2a05;border:5px solid var(--green-900);box-shadow:0 12px 26px rgba(0,0,0,.25);font-size:21px;font-weight:900;z-index:5}

/* Two main routes always receive equal desktop space. More routes continue in 2-column rows. */
.branch-garden{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important;align-items:start!important;overflow:visible!important;padding:18px 0 0!important}
.branch-family-panel{width:100%!important;min-width:0!important;margin:0!important;height:auto;align-self:start}
.branch-family-panel .branch-tree{width:100%;min-width:0;overflow:auto}
.branch-family-panel .tree>ul{min-width:max-content}
.route-count-1{grid-template-columns:minmax(0,1fr)!important}
.route-count-1 .branch-family-panel{max-width:100%}
.branch-garden:before,.branch-family-panel:before,.branch-family-panel:after{display:none!important}
.root-drop{height:34px}

/* Route boxes inside the parent are true clickable navigation cards. */
.root-child-colors{grid-column:1/-1;position:relative;z-index:3;margin-top:4px;padding:13px 15px;border-radius:17px;background:rgba(255,255,255,.09);border:1px solid rgba(239,216,140,.30)}
.root-child-colors>small{display:block;color:#e7efe9;font-size:11px;margin-bottom:9px}
.root-route-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.root-route-box{display:flex;align-items:center;gap:9px;min-width:0;padding:10px 11px;border-radius:13px;background:#fff;color:#203029;border:2px solid color-mix(in srgb,var(--root-child-color) 55%,#e8ddbd);box-shadow:0 8px 18px rgba(0,0,0,.10);transition:.18s}
.root-route-box:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.16);border-color:var(--root-child-color)}
.root-route-box>i{width:12px;height:38px;border-radius:99px;background:var(--root-child-color);flex:0 0 12px}
.root-route-box>span{display:flex;flex-direction:column;min-width:0;flex:1}
.root-route-box b{font-size:12px;color:var(--root-child-color);letter-spacing:.05em}
.root-route-box small{font-size:13px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#27362f}
.root-route-box em{font-style:normal;font-size:10px;font-weight:900;color:#6e775f;white-space:nowrap}

.branch-origin-head{cursor:pointer;transition:.18s;text-decoration:none}
.branch-origin-head:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.07);border-color:var(--origin-color)}
.branch-origin-head em{margin-left:auto;font-style:normal;font-size:10px;font-weight:900;color:var(--node-deep,var(--branch-deep));white-space:nowrap}
.branch-origin-head i{margin-left:0!important}
.multi-branch-band .split-items a{position:relative;min-height:45px}
.multi-branch-band .split-items a:after{content:'Open ›';margin-left:auto;font-size:9px;font-weight:900;color:var(--split-color)}

/* Admin homepage media controls */
.media-setting-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
.media-upload-card{display:flex;flex-direction:column;gap:9px;padding:13px;border:1px solid #e6dab7;border-radius:17px;background:linear-gradient(180deg,#fffefb,#faf4e5)}
.media-upload-title{font-size:13px;font-weight:900;color:var(--green-900)}
.media-upload-card>img,.media-empty{width:100%;height:132px;border-radius:12px;object-fit:cover;background:#efe6cf;border:1px dashed #c9b678}
.media-empty{display:grid;place-items:center;color:#8a7745;font-weight:900}
.media-upload-card input[type=file]{padding:8px;font-size:11px}
.remove-media{display:flex;gap:7px;align-items:center;color:#8e2b2b;font-size:11px;font-weight:800}
.remove-media input{width:auto;margin:0}
.single-setting-toggle{margin-top:14px;grid-template-columns:minmax(0,420px)}

@media(max-width:1180px){
  .hero-content.hero-with-gallery{grid-template-columns:minmax(0,1fr) 380px;gap:24px}
  .hero-gallery{height:285px}
  .branch-garden{gap:14px!important}
  .media-setting-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1023px){
  .branch-garden{grid-template-columns:1fr!important}
  .hero-content.hero-with-gallery{grid-template-columns:1fr;text-align:center}
  .hero-copy .bismillah,.hero-copy h1,.hero-copy h2,.hero-copy p{text-align:center;margin-left:auto;margin-right:auto}
  .hero-gallery{width:min(620px,100%);height:300px;margin:0 auto}
}
@media(max-width:720px){
  .brand-logo{width:44px;height:44px;border-radius:11px}
  .hero-gallery{height:245px}
  .hero-gallery-item-1{width:72%;height:76%}
  .hero-gallery-item-2{width:46%;height:54%}
  .hero-gallery-item-3{width:48%;height:45%}
  .hero-gallery-seal{width:64px;height:64px;font-size:17px}
  .root-route-grid{grid-template-columns:1fr}
  .root-route-box{padding:9px}
  .branch-garden{display:block!important;padding-top:10px!important}
  .branch-family-panel{margin-bottom:15px!important}
  .branch-origin-head em{width:100%;margin-left:0;text-align:right}
  .media-setting-grid{grid-template-columns:1fr}
}
@media(max-width:430px){
  .hero-gallery{height:205px}
  .hero-gallery-seal{width:56px;height:56px;font-size:15px;border-width:4px}
}
@media print{
  .hero-gallery{display:none!important}
  .branch-garden{display:block!important}
  .root-route-box{box-shadow:none}
}


/* =============================================================
   VERSION 11 — DEDICATED MOBILE/TABLET FAMILY READER
   Desktop above 1100px remains unchanged.
   ============================================================= */
.mobile-family-list{display:none}

@media(max-width:1100px){
  html,body{max-width:100%;overflow-x:hidden}
  body{background:linear-gradient(180deg,#faf6ed,#f5eedc)}
  .page-shell{width:100%;max-width:100%;padding-left:12px;padding-right:12px}
  .tree-wrap{overflow:hidden!important;padding:18px 12px!important}
  .tree-heading{margin-bottom:12px}
  .tree-heading h2{font-size:25px;line-height:1.2}
  .tree-heading p{font-size:12px;line-height:1.55}

  /* Tablet and mobile use one route per row. */
  .branch-garden{display:block!important;width:100%!important;padding:10px 0 0!important}
  .branch-family-panel{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0 0 16px!important;padding:12px!important;overflow:hidden!important}
  .branch-origin-head{width:100%;max-width:100%;min-width:0;overflow:hidden}
  .branch-origin-head b,.branch-origin-head em{white-space:normal;overflow-wrap:break-word}
  .branch-panel-title{width:100%;min-width:0;grid-template-columns:48px minmax(0,1fr) 44px!important;gap:9px!important;padding:12px 2px!important}
  .branch-panel-title>div:nth-child(2){min-width:0}
  .branch-panel-title h3{font-size:21px!important;line-height:1.15!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important}
  .branch-panel-title span{white-space:normal;overflow-wrap:break-word}
  .branch-open-link{display:none!important}
  .mobile-branch-toggle{display:inline-flex!important;width:42px!important;min-width:42px!important;height:42px!important;padding:0!important;border-radius:50%!important;align-items:center;justify-content:center}
  .mobile-branch-toggle span{display:none!important}

  /* Hide the desktop diagram only on tablet/mobile. */
  .desktop-branch-tree{display:none!important}
  .mobile-family-list{display:block;width:100%;min-width:0;padding:4px 0 2px}
  .branch-collapsed .mobile-family-list,.mobile-collapsed .mobile-family-list{display:none!important}

  /* A flat full-width reading lane prevents deep generations becoming narrow. */
  .mobile-flat-node{position:relative;width:100%;min-width:0;padding:8px 0 8px 26px;margin:0}
  .mobile-flat-node:before{content:"";position:absolute;left:8px;top:0;bottom:0;width:3px;border-radius:99px;background:linear-gradient(180deg,var(--connector-gold),#a87917)}
  .mobile-flat-node:after{content:"";position:absolute;left:3px;top:43px;width:13px;height:13px;border-radius:50%;background:var(--node-color);border:3px solid #fff;box-shadow:0 0 0 2px var(--connector-gold)}
  .mobile-flat-node:last-child:before{bottom:43px}
  .mobile-flat-root{padding-top:2px}
  .mobile-flat-root:before{top:43px}
  .mobile-route-meta{display:flex;align-items:center;gap:6px;min-width:0;margin:0 0 6px;padding-left:2px;font-size:10px;color:#64716b}
  .mobile-route-meta span,.mobile-route-meta b{flex:0 0 auto;padding:4px 7px;border-radius:999px;font-size:9px;font-weight:900}
  .mobile-route-meta span{background:var(--node-soft);color:var(--node-deep);border:1px solid color-mix(in srgb,var(--node-color) 35%,#ddd)}
  .mobile-route-meta b{background:var(--node-color);color:#fff}
  .mobile-route-meta em{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal}

  /* Full-width compact card with protected text width. */
  .mobile-family-list .member-card{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:39px 12px 11px!important;border-radius:17px!important;overflow:visible!important}
  .mobile-family-list .member-card:before,.mobile-family-list .member-card:after{display:none!important}
  .mobile-family-list .member-main{display:grid!important;grid-template-columns:58px minmax(0,1fr)!important;gap:11px!important;align-items:start!important;width:100%!important;min-width:0!important}
  .mobile-family-list .member-main-no-photo{grid-template-columns:minmax(0,1fr)!important}
  .mobile-family-list .member-photo{width:58px!important;height:66px!important;min-width:58px!important;object-fit:cover!important;margin:0!important;border-radius:12px!important}
  .mobile-family-list .member-content{display:block!important;min-width:0!important;width:auto!important;padding:0 48px 0 0!important}
  .mobile-family-list .member-content h3{display:block!important;width:100%!important;max-width:100%!important;margin:0!important;font-size:19px!important;line-height:1.18!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;hyphens:none!important}
  .mobile-family-list .urdu-name{display:block!important;width:100%!important;font-size:14px!important;line-height:1.65!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important}
  .mobile-family-list .relation-line{font-size:9px!important;line-height:1.4!important;white-space:normal!important}
  .mobile-family-list .person-seal{right:9px!important;top:34px!important;width:46px!important;height:46px!important;font-size:9px!important}
  .mobile-family-list .person-seal strong{font-size:9px!important;max-width:40px;overflow:hidden;text-overflow:ellipsis}
  .mobile-family-list .person-seal small{font-size:8px!important}
  .mobile-family-list .member-details-toggle{right:8px!important;bottom:7px!important;top:auto!important;min-height:31px!important;padding:6px 9px!important;font-size:9px!important}
  .mobile-family-list .gender-chip{font-size:8px!important;padding:4px 7px!important}
  .mobile-family-list .origin-label{position:absolute!important;left:10px!important;right:70px!important;top:-10px!important;width:auto!important;max-width:calc(100% - 80px)!important;margin:0!important;min-width:0!important}
  .mobile-family-list .origin-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-family-list .multi-branch-band{margin-top:9px!important;padding:8px!important}
  .mobile-family-list .split-caption{display:flex!important;flex-direction:row!important;align-items:center!important}
  .mobile-family-list .split-items{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  .mobile-family-list .split-items a{min-width:0!important;max-width:100%!important}
  .mobile-family-list .split-items a span{white-space:normal!important;overflow-wrap:break-word!important}
  .mobile-family-list .member-extra{padding-top:8px!important}

  /* Remove every legacy mobile tree rail to avoid the many parallel lines. */
  .mobile-family-list ul,.mobile-family-list li,.mobile-family-list .descendant-toggle{display:none!important}

  /* Root route choices are easy full-width buttons. */
  .root-route-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .root-route-box{min-width:0!important}
  .root-route-box small{white-space:normal!important;line-height:1.25!important}

  /* Keep search and controls usable on tablets. */
  .tree-view-toolbar{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;gap:8px;padding:8px;margin:0 -2px 10px;background:rgba(255,253,248,.95);backdrop-filter:blur(8px);border-radius:13px;box-shadow:0 5px 16px rgba(0,0,0,.06)}
  .tree-view-toolbar .view-mode-group,.tree-view-toolbar .tree-action-group{display:flex;gap:6px;flex-wrap:wrap}
  .tree-action-group #fitTrees{display:none}
}

@media(max-width:720px){
  .topbar{padding:12px 14px!important;gap:10px!important}
  .brand{max-width:100%;min-width:0;font-size:20px!important}
  .brand b{min-width:0;white-space:normal;line-height:1.1}
  .nav-actions{width:100%;display:grid!important;grid-template-columns:1fr 1fr!important}
  .nav-actions .btn{width:100%;padding:9px 8px!important;font-size:11px}
  .hero-content.hero-with-gallery{padding:10px 14px 38px!important;gap:18px!important}
  .hero-copy h1{font-size:38px!important;line-height:1.05!important}
  .hero-copy h2{font-size:22px!important}
  .hero-copy p{font-size:13px!important;line-height:1.55!important}
  .hero-gallery{height:175px!important}
  .page-shell{padding-left:8px!important;padding-right:8px!important}
  .search-panel{padding:12px!important}
  .family-search{grid-template-columns:1fr!important}
  .tree-wrap{padding:14px 8px!important;border-radius:16px!important}
  .tree-heading{padding-left:5px;padding-right:5px}
  .tree-heading h2{font-size:22px!important}
  .tree-view-toolbar{overflow-x:auto;flex-wrap:nowrap!important}
  .tree-view-toolbar .view-mode-group,.tree-view-toolbar .tree-action-group{flex-wrap:nowrap!important;flex:0 0 auto}
  .view-control{white-space:nowrap;font-size:9px!important;padding:7px 8px!important}
  .compact-view-note{font-size:10px;padding:8px!important}

  .root-ancestor-heading{padding:16px 12px!important;border-radius:18px!important}
  .root-person{display:grid!important;grid-template-columns:68px minmax(0,1fr)!important;gap:10px!important;align-items:start!important}
  .root-photo{width:68px!important;height:68px!important;min-width:68px!important}
  .root-name-block{min-width:0!important}
  .root-name-block h2{font-size:23px!important;line-height:1.15!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important}
  .root-urdu{font-size:16px!important;line-height:1.55!important}
  .root-info-panel{padding:10px!important}
  .root-medallion{width:52px!important;height:52px!important;font-size:9px!important}
  .root-child-colors{padding:9px!important}
  .root-route-grid{grid-template-columns:1fr!important}
  .root-route-box{padding:8px!important}

  .branch-family-panel{padding:9px!important;border-radius:17px!important}
  .branch-origin-head{padding:7px 8px!important;font-size:9px!important}
  .branch-origin-head em{display:none!important}
  .branch-panel-title{grid-template-columns:42px minmax(0,1fr) 38px!important}
  .branch-symbol{width:40px!important;height:40px!important;font-size:18px!important}
  .branch-panel-title h3{font-size:18px!important}
  .branch-panel-title small{font-size:8px!important}
  .mobile-branch-toggle{width:36px!important;min-width:36px!important;height:36px!important}

  .mobile-flat-node{padding-left:22px!important}
  .mobile-flat-node:before{left:6px!important;width:3px!important}
  .mobile-flat-node:after{left:1px!important;top:41px!important}
  .mobile-route-meta{gap:4px!important;font-size:9px!important}
  .mobile-route-meta span,.mobile-route-meta b{padding:3px 6px!important;font-size:8px!important}
  .mobile-family-list .member-main{grid-template-columns:52px minmax(0,1fr)!important;gap:9px!important}
  .mobile-family-list .member-photo{width:52px!important;height:60px!important;min-width:52px!important}
  .mobile-family-list .member-content{padding-right:42px!important}
  .mobile-family-list .member-content h3{font-size:17px!important}
  .mobile-family-list .person-seal{width:40px!important;height:40px!important;right:7px!important}
  .mobile-family-list .split-items{grid-template-columns:1fr!important}
}

@media(max-width:390px){
  .mobile-family-list .member-card{padding-left:9px!important;padding-right:9px!important}
  .mobile-family-list .member-main{grid-template-columns:46px minmax(0,1fr)!important}
  .mobile-family-list .member-photo{width:46px!important;height:54px!important;min-width:46px!important}
  .mobile-family-list .member-content h3{font-size:16px!important}
  .mobile-family-list .urdu-name{font-size:13px!important}
  .mobile-route-meta em{display:none!important}
}

@media print{
  .mobile-family-list{display:none!important}
  .desktop-branch-tree{display:block!important}
}


/* ======================================================================
   VERSION 12 — ISOLATED MOBILE/TABLET READER
   Uses dedicated mreader-* classes so desktop tree CSS cannot squeeze names.
   ====================================================================== */
.mobile-family-list .mreader-card{display:none}

@media (max-width:1100px){
  html,body{max-width:100%;overflow-x:hidden!important}
  .desktop-branch-tree{display:none!important}
  .mobile-family-list{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;padding:4px 0 8px!important;overflow:visible!important}
  .branch-collapsed .mobile-family-list,.mobile-collapsed .mobile-family-list{display:none!important}
  .branch-family-panel{overflow:visible!important;contain:none!important}

  /* Every generation keeps the same usable width. Depth is shown by badges,
     not by repeated indentation that makes long names one-letter wide. */
  .mobile-flat-node{
    --spine-x:10px;
    position:relative!important;display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;
    margin:0!important;padding:10px 0 12px 32px!important;box-sizing:border-box!important;
  }
  .mobile-flat-node:before{
    content:""!important;display:block!important;position:absolute!important;left:var(--spine-x)!important;top:0!important;bottom:0!important;
    width:3px!important;height:auto!important;border:0!important;border-radius:99px!important;
    background:linear-gradient(180deg,#e1bd4f,#a97611)!important;box-shadow:0 0 0 2px rgba(255,255,255,.9)!important;
  }
  .mobile-flat-node:after{
    content:""!important;display:block!important;position:absolute!important;left:4px!important;top:46px!important;width:13px!important;height:13px!important;
    border:3px solid #fff!important;border-radius:50%!important;background:var(--node-color,var(--branch-color))!important;
    box-shadow:0 0 0 2px #b9891e!important;
  }
  .mobile-flat-node:last-child:before{bottom:47px!important}
  .mobile-route-meta{display:none!important}

  /* Completely separate card layout. */
  .mobile-family-list .mreader-card{
    position:relative!important;display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;
    margin:0!important;padding:12px!important;box-sizing:border-box!important;overflow:hidden!important;
    border:1px solid color-mix(in srgb,var(--node-color) 36%,#ded4b9)!important;border-left:6px solid var(--node-color)!important;border-radius:18px!important;
    background:radial-gradient(circle at 100% 0,rgba(230,197,93,.15),transparent 25%),linear-gradient(180deg,#fffefb,var(--node-soft))!important;
    box-shadow:0 10px 24px rgba(7,43,32,.09)!important;text-align:left!important;
  }
  .mobile-family-list .mreader-card:before,.mobile-family-list .mreader-card:after{display:none!important}
  .mreader-card-top{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important;margin-bottom:8px!important;padding-right:0!important}
  .mreader-gender,.mreader-route-chip,.mreader-generation{
    display:inline-flex!important;align-items:center!important;min-width:0!important;padding:5px 8px!important;border-radius:999px!important;
    font-size:10px!important;line-height:1!important;font-weight:900!important;white-space:nowrap!important;
  }
  .mreader-gender.male{background:var(--male-soft)!important;color:var(--male)!important}
  .mreader-gender.female{background:var(--female-soft)!important;color:var(--female)!important}
  .mreader-route-chip{background:var(--node-color)!important;color:#fff!important}
  .mreader-generation{background:#f8f1d9!important;color:#6a5217!important;border:1px solid rgba(190,145,28,.26)!important}
  .mreader-origin{
    display:flex!important;align-items:center!important;gap:7px!important;width:100%!important;min-width:0!important;margin:0 0 9px!important;padding:7px 9px!important;
    border-radius:10px!important;background:#fff!important;border:1px solid color-mix(in srgb,var(--node-color) 32%,#ddd)!important;color:#5d6862!important;font-size:11px!important;
  }
  .mreader-origin i{width:10px!important;height:10px!important;border-radius:50%!important;background:var(--node-color)!important;flex:0 0 10px!important}
  .mreader-origin span{display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}

  .mreader-main{
    display:grid!important;grid-template-columns:58px minmax(0,1fr) 50px!important;gap:10px!important;align-items:start!important;
    width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;
  }
  .mreader-no-photo .mreader-main{grid-template-columns:minmax(0,1fr) 50px!important}
  .mreader-photo{
    display:block!important;width:58px!important;height:66px!important;min-width:58px!important;max-width:58px!important;margin:0!important;
    object-fit:cover!important;border-radius:15px!important;border:3px solid var(--gold-300)!important;box-sizing:border-box!important;
  }
  .mreader-placeholder{display:grid!important;place-items:center!important;background:#f3e8c8!important;color:var(--green-900)!important;font-size:28px!important}
  .mreader-copy{
    display:block!important;min-width:0!important;max-width:100%!important;width:auto!important;padding:0!important;margin:0!important;
    writing-mode:horizontal-tb!important;text-orientation:mixed!important;
  }
  .mreader-copy h3{
    display:block!important;width:auto!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:0!important;
    font-family:Georgia,'Times New Roman',serif!important;font-size:clamp(18px,4.8vw,23px)!important;line-height:1.18!important;font-weight:800!important;
    color:var(--node-deep,var(--green-900))!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;hyphens:none!important;
    writing-mode:horizontal-tb!important;letter-spacing:normal!important;
  }
  .mreader-urdu{
    display:block!important;width:auto!important;max-width:100%!important;min-width:0!important;margin:4px 0 0!important;padding:0!important;
    font-size:15px!important;line-height:1.7!important;color:#846612!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;
    writing-mode:horizontal-tb!important;
  }
  .mreader-after-name{display:flex!important;gap:5px!important;flex-wrap:wrap!important;margin-top:5px!important}
  .mreader-after-name span,.mreader-after-name small{padding:3px 6px!important;border-radius:999px!important;background:var(--node-soft)!important;color:var(--node-deep)!important;font-size:10px!important;font-weight:900!important}
  .mreader-relation{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important;margin-top:6px!important}
  .mreader-relation span{font-size:10px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.06em!important;color:#4d5a54!important}
  .mreader-relation small{font-size:12px!important;color:#6d7872!important}
  .mreader-seal{
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:50px!important;height:50px!important;min-width:50px!important;
    clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)!important;
    background:linear-gradient(145deg,var(--node-soft),#fff)!important;border:2px solid var(--node-color)!important;color:var(--node-deep)!important;
    box-shadow:0 6px 14px rgba(0,0,0,.10)!important;
  }
  .mreader-seal strong{display:block!important;max-width:43px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:9px!important;line-height:1!important}
  .mreader-seal small{font-size:8px!important;margin-top:3px!important;font-weight:900!important}

  .mreader-route-split{margin-top:10px!important;padding:9px!important;border-radius:12px!important;background:#fffaf0!important;border:1px solid rgba(185,139,27,.25)!important}
  .mreader-route-title{margin-bottom:7px!important;color:#5a665f!important;font-size:10px!important;font-weight:900!important}
  .mreader-route-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;width:100%!important;min-width:0!important}
  .mreader-child-route{
    display:grid!important;grid-template-columns:8px minmax(0,1fr) auto!important;gap:7px!important;align-items:center!important;min-width:0!important;padding:8px!important;
    border-radius:10px!important;background:color-mix(in srgb,var(--child-route) 9%,#fff)!important;border:1px solid color-mix(in srgb,var(--child-route) 40%,#ddd)!important;
  }
  .mreader-child-route i{width:8px!important;height:28px!important;border-radius:999px!important;background:var(--child-route)!important}
  .mreader-child-route span{display:block!important;min-width:0!important}
  .mreader-child-route b{display:block!important;color:#33413a!important;font-size:10px!important}
  .mreader-child-route small{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#59655f!important;font-size:10px!important}
  .mreader-child-route em{font-style:normal!important;font-size:9px!important;font-weight:900!important;color:#6b561c!important}

  .mreader-extra{display:none!important;margin-top:10px!important;padding-top:9px!important;border-top:1px dashed rgba(180,136,25,.34)!important}
  .mreader-card.details-open .mreader-extra,.details-mode .mreader-card .mreader-extra{display:block!important}
  .mreader-detail-row{display:grid!important;grid-template-columns:56px minmax(0,1fr)!important;gap:6px 8px!important;padding:7px 8px!important;margin-top:6px!important;border-radius:9px!important;background:#fff!important;font-size:11px!important}
  .mreader-detail-row span{color:#7b631e!important;font-weight:900!important}
  .mreader-detail-row b{min-width:0!important;color:#44514b!important;overflow-wrap:break-word!important}
  .mreader-detail-row small{grid-column:2!important;color:#6d7772!important;font-size:12px!important}
  .mreader-notes{margin-top:7px!important;padding:8px!important;border-left:3px solid var(--node-color)!important;border-radius:8px!important;background:#fff!important;color:#59635e!important;font-size:11px!important;line-height:1.5!important}
  .mreader-open-tree{display:inline-flex!important;align-items:center!important;gap:5px!important;margin-top:8px!important;color:var(--node-deep)!important;font-size:11px!important;font-weight:900!important}
  .mreader-details{
    position:static!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;width:100%!important;min-height:38px!important;
    margin-top:10px!important;padding:8px 10px!important;border:1px solid rgba(172,127,21,.28)!important;border-radius:11px!important;background:#fffaf0!important;color:var(--green-900)!important;
    font-size:11px!important;font-weight:900!important;
  }
  .mreader-details b{font-size:16px!important;color:#9a7116!important;line-height:1!important}
}

@media (max-width:560px){
  .branch-family-panel{padding:8px!important}
  .mobile-flat-node{padding-left:27px!important}
  .mobile-flat-node{--spine-x:7px}
  .mobile-flat-node:after{left:1px!important}
  .mreader-main{grid-template-columns:50px minmax(0,1fr) 43px!important;gap:8px!important}
  .mreader-no-photo .mreader-main{grid-template-columns:minmax(0,1fr) 43px!important}
  .mreader-photo{width:50px!important;height:58px!important;min-width:50px!important;max-width:50px!important}
  .mreader-seal{width:43px!important;height:43px!important;min-width:43px!important}
  .mreader-copy h3{font-size:18px!important}
  .mreader-urdu{font-size:14px!important}
  .mreader-route-grid{grid-template-columns:1fr!important}
}

@media (max-width:370px){
  .mreader-card{padding:10px!important}
  .mreader-main{grid-template-columns:44px minmax(0,1fr)!important}
  .mreader-no-photo .mreader-main{grid-template-columns:minmax(0,1fr)!important}
  .mreader-photo{width:44px!important;height:52px!important;min-width:44px!important;max-width:44px!important}
  .mreader-seal{display:none!important}
  .mreader-copy h3{font-size:17px!important}
}

@media print{
  .mobile-family-list{display:none!important}
}


/* V13 — dedicated G0 mobile root reader and PDF permission settings */
.mobile-root-reader{display:none}
.permission-note{margin:12px 0 0;padding:10px 12px;border-left:4px solid var(--gold-500);border-radius:9px;background:#fff8e7;color:#5d665f;font-size:12px;line-height:1.55}

@media (max-width:720px){
  html,body{max-width:100%;overflow-x:hidden!important}
  .root-ancestor-heading{display:none!important}
  .mobile-root-reader{
    position:relative;display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0 0 34px!important;padding:14px!important;
    border:3px double var(--connector-gold)!important;border-radius:20px!important;
    background:radial-gradient(circle at 100% 0,rgba(230,197,93,.17),transparent 26%),linear-gradient(180deg,#fffef9,#f7fbf8)!important;
    box-shadow:0 12px 28px rgba(7,43,32,.10)!important;color:#20342b!important;box-sizing:border-box!important;
    writing-mode:horizontal-tb!important;text-orientation:mixed!important;
  }
  .mobile-root-reader:after{
    content:"";position:absolute;left:28px;bottom:-35px;width:4px;height:35px;border-radius:99px;background:var(--connector-gold);box-shadow:0 0 0 2px #fff;
  }
  .mobile-root-reader *{writing-mode:horizontal-tb!important;text-orientation:mixed!important;box-sizing:border-box!important}
  .mobile-root-top{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;margin-bottom:11px!important;padding-bottom:10px!important;border-bottom:1px solid rgba(190,145,28,.25)!important}
  .mobile-root-g0{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:46px!important;height:30px!important;padding:0 10px!important;border-radius:999px!important;background:linear-gradient(135deg,var(--gold-300),var(--connector-gold))!important;color:#3d2c06!important;font-size:13px!important;font-weight:1000!important;white-space:nowrap!important}
  .mobile-root-top>b{display:block!important;min-width:0!important;flex:1!important;color:var(--green-900)!important;font-size:12px!important;line-height:1.2!important;text-transform:uppercase!important;letter-spacing:.08em!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important}
  .mobile-root-seal{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-width:58px!important;width:58px!important;height:46px!important;border-radius:12px!important;border:1px solid rgba(190,145,28,.38)!important;background:#fff9e9!important;color:#725512!important}
  .mobile-root-seal small{font-size:7px!important;line-height:1!important;text-transform:uppercase!important;font-weight:900!important;white-space:nowrap!important}
  .mobile-root-seal strong{display:block!important;max-width:52px!important;margin-top:4px!important;font-size:10px!important;line-height:1!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .mobile-root-main{display:grid!important;grid-template-columns:70px minmax(0,1fr)!important;gap:12px!important;align-items:start!important;width:100%!important;min-width:0!important}
  .mobile-root-reader:not(:has(.mobile-root-photo)) .mobile-root-main{grid-template-columns:minmax(0,1fr)!important}
  .mobile-root-photo{display:block!important;width:70px!important;height:78px!important;min-width:70px!important;max-width:70px!important;object-fit:cover!important;border-radius:17px!important;border:3px solid var(--gold-300)!important;background:#f3e8c8!important}
  .mobile-root-placeholder{display:grid!important;place-items:center!important;color:var(--green-900)!important;font-size:30px!important}
  .mobile-root-copy{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;padding:0!important;margin:0!important}
  .mobile-root-copy h2{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:0!important;color:var(--green-900)!important;font-family:Georgia,'Times New Roman',serif!important;font-size:clamp(21px,6vw,27px)!important;line-height:1.16!important;font-weight:900!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;hyphens:none!important;letter-spacing:normal!important}
  .mobile-root-urdu{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;margin-top:5px!important;color:#856615!important;font-size:17px!important;line-height:1.75!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;text-align:right!important}
  .mobile-root-after,.mobile-root-relation{display:flex!important;gap:6px!important;align-items:center!important;flex-wrap:wrap!important;margin-top:7px!important;min-width:0!important}
  .mobile-root-after span,.mobile-root-after small,.mobile-root-relation span,.mobile-root-relation small{display:inline-flex!important;max-width:100%!important;padding:4px 7px!important;border-radius:999px!important;background:#eef7f2!important;color:#365a49!important;font-size:10px!important;font-weight:900!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important}
  .mobile-root-routes{margin-top:12px!important;padding:10px!important;border-radius:14px!important;background:#fffaf0!important;border:1px solid rgba(190,145,28,.27)!important}
  .mobile-root-route-title{margin-bottom:8px!important;color:#66521b!important;font-size:11px!important;font-weight:900!important}
  .mobile-root-route-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important;min-width:0!important}
  .mobile-root-route{display:grid!important;grid-template-columns:8px minmax(0,1fr) auto!important;gap:7px!important;align-items:center!important;min-width:0!important;padding:9px!important;border-radius:11px!important;background:color-mix(in srgb,var(--route-color) 9%,#fff)!important;border:1px solid color-mix(in srgb,var(--route-color) 42%,#ddd)!important}
  .mobile-root-route>i{width:8px!important;height:34px!important;border-radius:99px!important;background:var(--route-color)!important}
  .mobile-root-route>span{display:block!important;min-width:0!important;max-width:100%!important}
  .mobile-root-route b{display:block!important;color:var(--route-color)!important;font-size:10px!important;line-height:1.15!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important}
  .mobile-root-route small{display:block!important;margin-top:3px!important;color:#34443c!important;font-size:10px!important;line-height:1.25!important;font-weight:800!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important}
  .mobile-root-route em{font-style:normal!important;color:#6e5b25!important;font-size:9px!important;font-weight:900!important;white-space:nowrap!important}
  .mobile-root-extra{display:none!important;margin-top:11px!important;padding-top:10px!important;border-top:1px dashed rgba(190,145,28,.33)!important}
  .mobile-root-reader.details-open .mobile-root-extra,.details-mode .mobile-root-reader .mobile-root-extra{display:block!important}
  .mobile-root-detail{display:grid!important;grid-template-columns:58px minmax(0,1fr)!important;gap:6px 8px!important;margin-top:6px!important;padding:8px!important;border-radius:10px!important;background:#fff!important;font-size:11px!important}
  .mobile-root-detail>span{color:#7a601b!important;font-weight:900!important}
  .mobile-root-detail>b{min-width:0!important;color:#3f4e47!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important}
  .mobile-root-detail>small{grid-column:2!important;color:#69756f!important;font-size:12px!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important}
  .mobile-root-notes{margin-top:7px!important;padding:8px!important;border-radius:9px!important;background:#fff!important;border-left:3px solid var(--connector-gold)!important;color:#58635e!important;font-size:11px!important;line-height:1.55!important}
  .mobile-root-open{display:inline-flex!important;margin-top:9px!important;color:var(--green-900)!important;font-size:11px!important;font-weight:900!important}
  .mobile-root-details{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;width:100%!important;min-height:40px!important;margin-top:11px!important;padding:8px 10px!important;border:1px solid rgba(190,145,28,.30)!important;border-radius:12px!important;background:#fff9e9!important;color:var(--green-900)!important;font-size:11px!important;font-weight:900!important}
  .mobile-root-details b{font-size:17px!important;color:#9a7116!important}
  .family-root-block>.root-drop{display:none!important}
  .branch-garden{margin-top:0!important}
}

@media (max-width:480px){
  .mobile-root-reader{padding:12px!important;border-radius:17px!important}
  .mobile-root-main{grid-template-columns:58px minmax(0,1fr)!important;gap:9px!important}
  .mobile-root-photo{width:58px!important;height:66px!important;min-width:58px!important;max-width:58px!important}
  .mobile-root-copy h2{font-size:21px!important}
  .mobile-root-urdu{font-size:15px!important}
  .mobile-root-route-grid{grid-template-columns:1fr!important}
}

@media print{.mobile-root-reader{display:none!important}}

/* =========================================================
   V14 — SPECIAL START LOGO, BIG HEADING ROLLER & SPOUSE PROFILE
   ========================================================= */
html.splash-open,html.splash-open body{overflow:hidden!important}
.app-splash{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;color:#fff;background:
radial-gradient(circle at 50% 34%,rgba(239,216,140,.18),transparent 28%),linear-gradient(145deg,#041c16,#0b4636 58%,#08281f);opacity:1;visibility:visible;transition:opacity .62s ease,visibility .62s ease}
.app-splash.splash-leaving{opacity:0;visibility:hidden}
.splash-pattern{position:absolute;inset:0;opacity:.11;background-image:linear-gradient(30deg,transparent 12%,rgba(255,255,255,.42) 12.5%,transparent 13%),linear-gradient(150deg,transparent 12%,rgba(255,255,255,.42) 12.5%,transparent 13%);background-size:68px 116px}
.splash-emblem{position:relative;width:min(210px,48vw);aspect-ratio:1;margin-bottom:18px;animation:splashFloat 2.4s ease-in-out infinite;filter:drop-shadow(0 20px 28px rgba(0,0,0,.34))}
.splash-emblem img{width:100%;height:100%;object-fit:contain;border-radius:28px}
.app-splash h1{position:relative;margin:0;color:#fff;font-family:Georgia,'Times New Roman',serif;font-size:clamp(34px,6vw,62px);letter-spacing:.02em}
.app-splash p{position:relative;margin:8px 0 0;color:var(--gold-300,#efd88c);font-size:clamp(20px,3vw,30px);font-weight:800}
.app-splash small{position:relative;color:#dce9e3;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.splash-gold-line{position:relative;width:min(360px,72vw);height:18px;margin:18px 0 12px}
.splash-gold-line:before{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:linear-gradient(90deg,transparent,var(--gold-500),transparent)}
.splash-gold-line i{position:absolute;left:50%;top:1px;width:16px;height:16px;transform:translateX(-50%) rotate(45deg);background:var(--gold-500);border:3px solid #0b4636}
@keyframes splashFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.018)}}

.hero{position:relative;min-height:540px;overflow:hidden;background:linear-gradient(135deg,#061f18,#0e6048)}
.hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity 1s ease,transform 1s ease;transform:scale(1.035)}
.hero-slide img{width:100%;height:100%;object-fit:var(--hero-image-fit,cover);object-position:center;background:#08281f}
.hero-slide.active{opacity:1;visibility:visible;transform:scale(1)}
.hero-effect-slide .hero-slide{opacity:1;visibility:visible;transform:translateX(100%);transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.hero-effect-slide .hero-slide.active{transform:translateX(0)}
.hero-effect-slide .hero-slide.active~.hero-slide{transform:translateX(100%)}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(3,29,22,.84),rgba(5,48,37,.54) 50%,rgba(3,29,22,.78)),linear-gradient(0deg,rgba(2,24,18,.62),transparent 58%)}
.hero-no-images .hero-overlay{background:radial-gradient(circle at 20% 20%,rgba(239,216,140,.16),transparent 24%),linear-gradient(135deg,#061f18,#0e6048)}
.hero .arabesque{z-index:2;pointer-events:none}
.hero .topbar{position:relative;z-index:8;background:linear-gradient(180deg,rgba(2,22,17,.58),transparent)}
.brand-logo{width:54px;height:54px;object-fit:contain;border-radius:14px;background:rgba(255,255,255,.10);padding:3px;border:1px solid rgba(239,216,140,.45);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.brand{display:flex;align-items:center;gap:12px}
.hero-content{position:relative;z-index:6;display:flex;align-items:center;min-height:430px;max-width:1320px;margin:0 auto;padding:40px clamp(20px,6vw,88px) 84px}
.hero-copy{max-width:800px;padding:28px 30px;border:1px solid rgba(239,216,140,.22);border-radius:26px;background:rgba(3,37,28,.42);backdrop-filter:blur(5px);box-shadow:0 22px 60px rgba(0,0,0,.18)}
.hero-text-left{justify-content:flex-start;text-align:left}.hero-text-left .hero-copy{margin-right:auto}.hero-text-left .hero-copy p{margin-left:0;margin-right:auto}
.hero-text-center{justify-content:center;text-align:center}.hero-text-center .hero-copy{margin:auto}.hero-text-center .hero-copy p{margin-left:auto;margin-right:auto}
.hero-text-right{justify-content:flex-end;text-align:right}.hero-text-right .hero-copy{margin-left:auto}.hero-text-right .hero-copy p{margin-left:auto;margin-right:0}
.hero h1{font-size:clamp(44px,6vw,78px);text-shadow:0 5px 20px rgba(0,0,0,.35)}
.hero h2{text-shadow:0 4px 18px rgba(0,0,0,.28)}
.hero-arrow{position:absolute;z-index:9;top:52%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(239,216,140,.62);background:rgba(4,40,30,.62);color:#fff;font-size:36px;line-height:1;cursor:pointer;backdrop-filter:blur(5px);box-shadow:0 10px 24px rgba(0,0,0,.18);transition:.2s}
.hero-arrow:hover{background:var(--gold-500);color:#342500}.hero-prev{left:22px}.hero-next{right:22px}
.hero-dots{position:absolute;z-index:9;left:50%;bottom:28px;transform:translateX(-50%);display:flex;gap:9px;padding:8px 12px;border-radius:999px;background:rgba(3,31,24,.55);backdrop-filter:blur(5px)}
.hero-dots button{width:10px;height:10px;border:0;border-radius:50%;padding:0;background:rgba(255,255,255,.55);cursor:pointer;transition:.25s}
.hero-dots button.active{width:30px;border-radius:999px;background:var(--gold-500)}
.hero-display-static .hero-slide:not(:first-child){display:none}

.route-code-top{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#fff8e3;border:1px solid rgba(212,175,55,.42);color:var(--branch-deep,var(--green-900));font-size:9px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;margin-left:auto}
.root-gender,.mobile-root-gender{display:inline-flex;align-items:center;width:max-content;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:900;margin:5px 0 8px}
.root-gender.male,.mobile-root-gender.male{background:#e8f8fa;color:#0e717c}.root-gender.female,.mobile-root-gender.female{background:#fff0f5;color:#a14669}
.result-badges{display:flex;gap:7px;flex-wrap:wrap;margin:7px 0}.result-badges span,.result-badges b{padding:5px 8px;border-radius:999px;font-size:10px}.result-badges span{background:#edf8f6;color:#0f6651}.result-badges b{background:#fff4d8;color:#705313}

.spouse-profile,.mreader-spouse,.root-spouse,.mobile-root-spouse{display:flex;align-items:center;gap:11px;padding:11px;border-radius:15px;border:1px solid rgba(212,175,55,.30);background:linear-gradient(135deg,#fffdf7,#f7f0dd);min-width:0}
.spouse-profile-photo,.mreader-spouse-photo,.root-spouse-photo,.mobile-root-spouse-photo{width:54px;height:54px;flex:0 0 54px;object-fit:cover;border-radius:50%;border:3px solid var(--gold-300,#efd88c);background:#efe5c7}
.spouse-profile-placeholder,.mreader-spouse-placeholder,.root-spouse-placeholder,.mobile-root-spouse-placeholder{display:grid;place-items:center;color:#66511a;font-size:24px}
.spouse-profile-copy,.mreader-spouse-copy,.root-spouse-copy,.mobile-root-spouse-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.spouse-profile-copy>small,.mreader-spouse-copy>small,.root-spouse-copy>small,.mobile-root-spouse-copy>small{font-size:8px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:#8a7132}
.spouse-profile-copy>b,.mreader-spouse-copy>b,.root-spouse-copy>b,.mobile-root-spouse-copy>b{font-size:14px;color:var(--green-900);overflow-wrap:anywhere}
.spouse-profile-copy>em,.mreader-spouse-copy>em,.root-spouse-copy>em,.mobile-root-spouse-copy>em{font-style:normal;font-size:13px;color:#705e2a}
.spouse-profile-meta,.mreader-spouse-meta,.root-spouse-meta,.mobile-root-spouse-meta{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.spouse-gender,.spouse-route{padding:3px 6px;border-radius:999px;font-size:8px;font-weight:900}.spouse-gender.male{background:#e8f8fa;color:#0e717c}.spouse-gender.female{background:#fff0f5;color:#a14669}.spouse-gender.unknown{background:#f0eee7;color:#6c706d}.spouse-route{background:#fff3cc;color:#72520c;border:1px solid rgba(212,175,55,.34)}
.root-spouse{margin-top:9px;background:rgba(255,255,255,.10);border-color:rgba(239,216,140,.30)}.root-spouse-copy>b,.root-spouse-copy>em{color:#fff}.root-spouse-copy>small{color:var(--gold-300)}
.mobile-root-spouse{margin-top:8px}

.spouse-admin-card{border-top:5px solid var(--gold-500)}
.current-spouse-photo{display:flex;align-items:center;gap:12px;margin:10px 0;padding:10px;border-radius:12px;background:#faf5e7;border:1px solid #eadcb5}.current-spouse-photo img{width:74px;height:74px;border-radius:16px;object-fit:cover;border:3px solid var(--gold-300)}.current-spouse-photo span{font-size:12px;font-weight:800;color:#68551f}
.two-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-media-grid{grid-template-columns:repeat(5,minmax(140px,1fr))}.hero-media-grid .media-upload-card img,.hero-media-grid .media-empty{height:115px}

@media(max-width:1100px){
  .hero{min-height:500px}.hero-content{min-height:390px;padding-left:54px;padding-right:54px}.hero-copy{max-width:720px}.hero-media-grid{grid-template-columns:repeat(3,minmax(150px,1fr))}
}
@media(max-width:720px){
  .app-splash h1{font-size:36px}.splash-emblem{width:min(180px,52vw)}
  .hero{min-height:470px}.hero-content{min-height:340px;padding:26px 14px 68px;align-items:flex-end}.hero-copy{width:100%;padding:22px 18px;border-radius:20px}.hero h1{font-size:38px;line-height:1.08}.hero h2{font-size:22px}.hero-copy>p:last-child{font-size:14px;line-height:1.55}
  .hero-arrow{width:42px;height:42px;font-size:30px;top:46%}.hero-prev{left:9px}.hero-next{right:9px}.hero-dots{bottom:16px}
  .brand-logo{width:44px;height:44px}.brand{font-size:20px}
  .spouse-profile,.mreader-spouse,.mobile-root-spouse{width:100%;align-items:flex-start}.root-spouse{background:rgba(255,255,255,.08)}
  .route-code-top{font-size:8px;padding:4px 7px}.member-topline{gap:5px;flex-wrap:wrap}
  .two-media-grid,.hero-media-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:430px){
  .hero{min-height:435px}.hero-content{min-height:320px}.hero h1{font-size:32px}.hero h2{font-size:20px}.bismillah{font-size:20px}
  .hero-text-left,.hero-text-center,.hero-text-right{text-align:center;justify-content:center}.hero-text-left .hero-copy,.hero-text-right .hero-copy{margin-left:auto;margin-right:auto}
  .hero-arrow{top:43%;width:38px;height:38px}.hero-dots{gap:6px;padding:6px 9px}.hero-dots button{width:8px;height:8px}.hero-dots button.active{width:22px}
  .spouse-profile-photo,.mreader-spouse-photo,.mobile-root-spouse-photo{width:48px;height:48px;flex-basis:48px}.two-media-grid,.hero-media-grid{grid-template-columns:1fr}
}
@media print{.app-splash,.hero-arrow,.hero-dots{display:none!important}.hero-slide{display:none!important}.hero-slide:first-child{display:block!important;opacity:.12!important;visibility:visible!important}.hero-overlay{background:rgba(255,255,255,.92)!important}.hero-copy{background:transparent!important;border:0!important;box-shadow:none!important}.spouse-profile,.mreader-spouse,.root-spouse,.mobile-root-spouse{break-inside:avoid}}


/* V15: Search repair, OTP PDF access and global member display controls */
.search-help{margin:9px 4px 0;color:var(--muted,#66736d);font-size:12px;line-height:1.5}
.pdf-gate-body{display:grid;place-items:center;padding:22px}
.pdf-gate-card{width:min(520px,100%);background:#fff;border:2px solid var(--gold-500,#d4af37);border-radius:26px;padding:30px;box-shadow:0 22px 60px rgba(5,45,34,.16);text-align:center}
.pdf-gate-card h1{font-family:Georgia,'Times New Roman',serif;color:var(--green-900,#0c3b2d);font-size:34px;margin:7px 0 10px}
.pdf-gate-card>p{color:#66736d;line-height:1.65;margin:0 0 18px}
.pdf-gate-card form{display:grid;gap:15px;text-align:left}
.pdf-gate-icon{width:82px;height:82px;margin:0 auto 10px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(135deg,var(--green-900,#0c3b2d),#17644c);border:4px solid var(--gold-500,#d4af37);color:#fff;font-size:21px;font-weight:900;letter-spacing:.08em}
.otp-input{text-align:center;font-size:30px!important;font-weight:900;letter-spacing:.34em;padding-left:1.05em!important;font-variant-numeric:tabular-nums}
.otp-admin-panel{margin-bottom:22px}
.otp-admin-content{padding:20px 24px;display:grid;gap:17px}
.otp-status{padding:7px 12px;border-radius:999px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.otp-status.active{background:#e4f7ea;color:#176335}.otp-status.inactive{background:#f3eee1;color:#786b4c}
.generated-otp{padding:20px;border-radius:18px;background:linear-gradient(135deg,#0b3d2e,#17664d);color:#fff;text-align:center;border:2px solid var(--gold-500,#d4af37)}
.generated-otp small,.generated-otp span{display:block;color:#e1ede8}.generated-otp strong{display:block;color:#f3dc8b;font-size:46px;letter-spacing:.18em;margin:7px 0;font-variant-numeric:tabular-nums}
.otp-current-info{padding:15px 17px;border-radius:14px;background:#fbf7eb;border:1px solid #eadfbf;display:flex;flex-direction:column;gap:4px}.otp-current-info span{font-size:13px;color:#67726d;line-height:1.55}
.otp-actions{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.otp-generate-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.otp-generate-form label{min-width:150px}.otp-generate-form select{margin-top:5px}
.setting-callout{margin-top:14px;padding:13px 15px;border-radius:12px;background:#f8f2df;border-left:4px solid var(--gold-500,#d4af37);font-size:13px;line-height:1.55;color:#5c543e}
.global-display-card{border-top:5px solid var(--gold-500,#d4af37)}
.global-member-options{margin-top:16px}
.apply-all-check{display:flex!important;gap:11px;align-items:flex-start;margin-top:18px;padding:15px;border:1px dashed var(--gold-500,#d4af37);border-radius:14px;background:#fffaf0}.apply-all-check input{width:auto;margin:3px 0 0}.apply-all-check span{display:flex;flex-direction:column}.apply-all-check small{color:#6a746f;margin-top:4px;line-height:1.5}
@media(max-width:700px){.pdf-gate-card{padding:22px 16px;border-radius:20px}.pdf-gate-card h1{font-size:28px}.otp-input{font-size:25px!important}.otp-actions,.otp-generate-form{display:grid;width:100%}.otp-actions .btn,.otp-generate-form .btn{width:100%}.generated-otp strong{font-size:36px}.otp-admin-content{padding:16px}.otp-status{align-self:flex-start}}


/* Version 16: optional member gender */
.gender-badge.unknown{background:#f0ede5;color:#6d6a62;border:1px dashed #bcb5a4}
.member-card.unknown,.mreader-card.unknown,.mobile-root-reader.unknown{--gender-accent:#8a8170}
.member-card.unknown{border-left-color:#8a8170}
.result-card.unknown{border-top-color:#8a8170}
.member-photo.placeholder,.mreader-placeholder,.mobile-root-placeholder,.root-placeholder{font-family:Georgia,"Times New Roman",serif}

/* =============================================================
   VERSION 17 — DESKTOP PARENT-ROUTE LABEL REPAIR
   Keeps the label fully inside each card so it cannot be clipped
   by the tree scroll area or by the card's ornamental border.
   ============================================================= */
@media (min-width:1101px){
  .member-card{
    overflow:hidden!important;
  }

  .origin-label{
    position:relative!important;
    inset:auto!important;
    z-index:5!important;
    display:grid!important;
    grid-template-columns:12px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:7px!important;
    width:calc(100% - 64px)!important;
    max-width:calc(100% - 64px)!important;
    min-height:31px!important;
    margin:0 64px 9px 0!important;
    padding:6px 9px!important;
    border-radius:11px!important;
    background:linear-gradient(135deg,#fffefb,#f7f1df)!important;
    border:1px solid color-mix(in srgb,var(--node-color) 48%,#d9ceb1)!important;
    box-shadow:0 5px 12px rgba(8,38,29,.06)!important;
    color:#52615a!important;
    font-size:9px!important;
    line-height:1.25!important;
    white-space:normal!important;
    overflow:visible!important;
  }
  .origin-label i{
    width:11px!important;
    height:11px!important;
    min-width:11px!important;
    border-radius:50%!important;
    background:var(--node-color)!important;
    box-shadow:0 0 0 3px var(--node-soft)!important;
  }
  .origin-label span{
    display:block!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-weight:700!important;
  }
  .origin-label b{
    margin:0!important;
    padding:3px 6px!important;
    border-radius:999px!important;
    background:var(--node-soft)!important;
    color:var(--node-deep)!important;
    border:1px solid color-mix(in srgb,var(--node-color) 34%,#ddd)!important;
    font-size:8px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  .member-card:has(.origin-label){
    margin-top:0!important;
    padding-top:14px!important;
  }
  .member-card.direct-branch-root:has(.origin-label){
    padding-top:45px!important;
  }

  /* Keep the top seal clear of the parent label. */
  .member-card:has(.origin-label) .person-seal{
    top:13px!important;
  }
  .member-card:has(.origin-label) .member-topline{
    margin-top:1px!important;
  }

  /* Give a long single route enough room on standard desktop screens. */
  .branch-family-panel .branch-tree{
    padding-top:2px!important;
  }
}


@media print{
  .origin-label{
    position:relative!important;
    inset:auto!important;
    margin:0 0 8px!important;
    width:100%!important;
    max-width:100%!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
}
@media (min-width:1101px){
  .member-card:not(:has(.person-seal)) .origin-label{
    width:100%!important;
    max-width:100%!important;
    margin-right:0!important;
  }
}


/* V18: visitor-selectable tree angles, attractive font themes and stretchable desktop cards */
.font-heritage .member-content h3,.font-heritage .root-name-block h2,.font-heritage .branch-panel-title h3,.font-heritage .tree-heading h2{font-family:Georgia,"Times New Roman",serif;letter-spacing:.01em}
.font-arabic .member-content h3,.font-arabic .root-name-block h2,.font-arabic .branch-panel-title h3,.font-arabic .tree-heading h2{font-family:"Traditional Arabic","Arabic Typesetting","Times New Roman",serif;font-weight:700;letter-spacing:.02em}
.font-classic .member-content h3,.font-classic .root-name-block h2,.font-classic .branch-panel-title h3,.font-classic .tree-heading h2{font-family:Garamond,"Palatino Linotype",serif;font-weight:700}
.font-modern .member-content h3,.font-modern .root-name-block h2,.font-modern .branch-panel-title h3,.font-modern .tree-heading h2{font-family:Arial,"Segoe UI",sans-serif;font-weight:800;letter-spacing:-.02em}
.font-arabic .urdu-name,.font-arabic .root-urdu,.font-arabic [dir="rtl"]{font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Traditional Arabic",serif}

@media (min-width:1101px){
  .member-card{width:var(--desktop-card-width,310px);max-width:none}
  .tree-layout-group{display:flex;gap:6px;flex-wrap:wrap}
  .box-stretch-control{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid #dfd2aa;border-radius:12px;background:#fffaf0;font-size:12px;font-weight:800;color:#5d512e}
  .box-stretch-control input{width:130px;margin:0;padding:0;box-shadow:none}
  .box-stretch-control output{min-width:42px;color:var(--green-900)}

  /* Left-to-right readable lineage. Each generation stays clear even for long trees. */
  .tree-wrap.layout-flow .branch-garden{grid-template-columns:1fr!important}
  .tree-wrap.layout-flow .branch-family-panel{min-width:0}
  .tree-wrap.layout-flow .desktop-branch-tree{overflow:auto;padding:14px 4px}
  .tree-wrap.layout-flow .desktop-branch-tree>ul{display:block;width:auto;min-width:0;padding:0 0 0 30px}
  .tree-wrap.layout-flow .desktop-branch-tree ul{display:block;width:auto;min-width:0;padding-top:0;margin:0}
  .tree-wrap.layout-flow .desktop-branch-tree li{display:grid;grid-template-columns:var(--desktop-card-width,310px) minmax(30px,1fr);align-items:start;text-align:left;padding:14px 0 14px 28px;min-width:0}
  .tree-wrap.layout-flow .desktop-branch-tree li:before{display:block;top:50%;left:0;right:auto;width:27px;height:0;border-top:3px solid var(--connector-gold);border-right:0}
  .tree-wrap.layout-flow .desktop-branch-tree li:after{display:none}
  .tree-wrap.layout-flow .desktop-branch-tree ul ul:before{display:block;left:14px;top:0;height:100%;border-left:3px solid var(--connector-gold)}
  .tree-wrap.layout-flow .desktop-branch-tree li>ul{grid-column:2;margin-top:0;padding-left:22px}
  .tree-wrap.layout-flow .member-card{margin:0}

  /* Route-panel view prioritises separate branch reading and avoids congested cross-branch lines. */
  .tree-wrap.layout-routes .branch-garden{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start;gap:22px}
  .tree-wrap.layout-routes .branch-family-panel{min-width:0;overflow:hidden}
  .tree-wrap.layout-routes .desktop-branch-tree{overflow:auto;max-height:72vh;padding:12px}
  .tree-wrap.layout-routes .desktop-branch-tree>ul{justify-content:flex-start;min-width:max-content}
  .tree-wrap.layout-routes .root-drop{height:28px}
  .tree-wrap.layout-routes .branch-panel-title{position:sticky;top:0;z-index:8;background:var(--branch-soft,#fff);box-shadow:0 8px 16px rgba(0,0,0,.06)}

  .tree-wrap.layout-classic .branch-garden{align-items:start}
}
@media (max-width:1100px){
  .tree-layout-group,.box-stretch-control{display:none!important}
  .tree-wrap.layout-flow,.tree-wrap.layout-routes,.tree-wrap.layout-classic{--desktop-card-width:100%}
}


/* V19 — private-content watermark and anti-copy protection */
.protected-content,
.protected-content *:not(input):not(textarea){
    -webkit-user-select:none!important;
    user-select:none!important;
    -webkit-touch-callout:none!important;
}
.protected-content img{
    -webkit-user-drag:none!important;
    user-drag:none!important;
    pointer-events:none;
}
.protected-content a img,
.protected-content button img{pointer-events:none}
.privacy-watermark-layer{
    position:fixed;
    inset:-90px;
    z-index:99970;
    pointer-events:none;
    background-image:var(--privacy-watermark-image);
    background-repeat:repeat;
    background-size:520px 210px;
    opacity:var(--privacy-watermark-opacity,.24);
    mix-blend-mode:multiply;
}
.privacy-corner-stamp{
    position:fixed;
    z-index:99972;
    right:12px;
    bottom:12px;
    width:min(430px,calc(100vw - 24px));
    padding:10px 14px;
    border:2px solid rgba(139,104,22,.72);
    border-radius:13px;
    background:rgba(255,251,235,.91);
    color:#6f5310;
    text-align:center;
    pointer-events:none;
    box-shadow:0 8px 30px rgba(0,0,0,.14);
}
.privacy-corner-stamp strong{display:block;font-size:12px;letter-spacing:.09em}
.privacy-corner-stamp span{display:block;font-size:9px;font-weight:800;letter-spacing:.04em;margin-top:2px}
.privacy-protection-notice{
    position:fixed;
    z-index:100000;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(520px,calc(100vw - 30px));
    padding:28px 22px;
    border:4px double var(--gold-500,#d4af37);
    border-radius:24px;
    background:linear-gradient(145deg,#08281f,#145440);
    color:#fff;
    text-align:center;
    box-shadow:0 30px 100px rgba(0,0,0,.58);
}
.privacy-protection-notice[hidden]{display:none!important}
.privacy-notice-emblem{font-size:34px;margin-bottom:8px}
.privacy-protection-notice strong{display:block;color:#efd88c;font-size:25px;font-family:Georgia,'Times New Roman',serif;text-transform:uppercase}
.privacy-protection-notice p{margin:9px 0;font-weight:800;line-height:1.5}
.privacy-protection-notice small{color:#d9e8e1;font-weight:700}
.privacy-alert-active #protectedShijraContent,
.privacy-alert-active .hero,
.privacy-alert-active footer{filter:blur(12px);opacity:.22}

/* Put a readable security stamp directly over important data boxes as well. */
.protected-content .member-card,
.protected-content .mobile-member-card,
.protected-content .result-card,
.protected-content .root-monument,
.protected-content .root-ancestor-heading,
.protected-content .focus-passport,
.protected-content .branch-family-panel{isolation:isolate}
.protected-content .member-card .member-content,
.protected-content .mobile-member-card .mobile-member-main,
.protected-content .result-card .result-info{position:relative;z-index:1}
.protected-content .member-card .member-content:after,
.protected-content .mobile-member-card .mobile-member-main:after,
.protected-content .result-card .result-info:after{
    content:"PRIVATE • NO COPY • KRAFTPAGE";
    position:absolute;
    z-index:8;
    left:50%;
    top:50%;
    width:118%;
    transform:translate(-50%,-50%) rotate(-17deg);
    color:rgba(139,104,22,.20);
    font-size:14px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.08em;
    text-align:center;
    pointer-events:none;
    white-space:nowrap;
}
.privacy-admin-preview{
    margin-top:16px;
    min-height:128px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    overflow:hidden;
    border:2px dashed #d4af37;
    border-radius:18px;
    background:
      repeating-linear-gradient(-24deg,rgba(184,136,34,.05) 0 30px,rgba(184,136,34,.16) 31px 33px),
      #fffaf0;
    color:#765913;
    text-align:center;
    transform:translateZ(0);
}
.privacy-admin-preview strong{font-size:20px;letter-spacing:.09em}
.privacy-admin-preview span{font-size:12px;font-weight:800}

@media(max-width:700px){
    .privacy-watermark-layer{background-size:360px 150px;inset:-50px;opacity:calc(var(--privacy-watermark-opacity,.24) + .02)}
    .privacy-corner-stamp{right:7px;bottom:7px;width:calc(100vw - 14px);padding:8px 9px}
    .privacy-corner-stamp strong{font-size:10px}
    .privacy-corner-stamp span{font-size:8px}
    .privacy-protection-notice{padding:24px 15px}
    .privacy-protection-notice strong{font-size:21px}
}

@media print{
    body.protected-content{background:#fff!important;min-height:100vh!important}
    body.protected-content > *{display:none!important}
    body.protected-content:before{
        content:"THIS IS PRIVATE CONTENT\A COPY, PRINT, PDF DOWNLOAD OR SCREENSHOT IS PROHIBITED\A CONTACT KRAFTPAGE WEB SOLUTION — KRAFTPAGE.IN";
        white-space:pre-line;
        position:fixed;
        inset:0;
        display:flex!important;
        align-items:center;
        justify-content:center;
        padding:40px;
        border:12px double #9a731a;
        color:#6f5310;
        background:#fffaf0;
        font:900 28px/1.7 Arial,sans-serif;
        text-align:center;
    }
}


/* ======================================================================
   VERSION 20 — CLEAN PRIVACY OVERLAY + RELIABLE DESKTOP BOX STRETCH
   ====================================================================== */
.privacy-corner-stamp{display:none!important}

/* Strong, screenshot-visible watermark. A browser cannot block the phone's
   hardware screenshot function, so the mobile protection is a persistent
   identifying overlay plus an app-switcher privacy veil. */
.privacy-watermark-layer{
  position:fixed!important;
  inset:-60px!important;
  width:auto!important;
  height:auto!important;
  z-index:2147483000!important;
  pointer-events:none!important;
  transform:translateZ(0)!important;
  -webkit-transform:translateZ(0)!important;
  will-change:transform!important;
  background-attachment:fixed!important;
}
.privacy-inactive-veil{
  display:none;position:fixed;inset:0;z-index:2147483640;align-items:center;justify-content:center;
  flex-direction:column;gap:9px;padding:24px;text-align:center;color:#efd88c;
  background:linear-gradient(145deg,#06261d,#124f3d);
}
.privacy-inactive-veil strong{font:900 clamp(22px,5vw,42px)/1.2 Georgia,serif;letter-spacing:.08em}
.privacy-inactive-veil span{font-size:14px;font-weight:800;color:#e7f0ec}
.privacy-window-inactive .privacy-inactive-veil{display:flex}

/* Slider with direct minus/plus controls. */
@media (min-width:1101px){
  .box-stretch-control{
    display:grid!important;
    grid-template-columns:auto 30px minmax(120px,180px) 30px 54px!important;
    align-items:center!important;
    gap:7px!important;
    min-width:330px!important;
  }
  .box-stretch-control>span{white-space:nowrap}
  .box-stretch-control input[type="range"]{width:100%!important;min-width:120px!important;cursor:ew-resize!important}
  .box-size-step{
    width:30px;height:30px;border:1px solid #d9c584;border-radius:9px;background:#fff;color:var(--green-900);
    font-size:20px;font-weight:900;line-height:1;cursor:pointer
  }
  .box-size-step:hover{background:#f4e7bd}
  .box-stretch-control output{text-align:right!important;font-variant-numeric:tabular-nums}

  /* Override all older compact/details fixed widths. */
  #familyTreeWrap .desktop-branch-tree .member-card,
  #familyTreeWrap .desktop-branch-tree .member-card.details-open,
  #familyTreeWrap.details-mode .desktop-branch-tree .member-card,
  #familyTreeWrap.compact-mode .desktop-branch-tree .member-card,
  #familyTreeWrap.layout-classic .member-card,
  #familyTreeWrap.layout-flow .member-card,
  #familyTreeWrap.layout-routes .member-card{
    width:var(--desktop-card-width,310px)!important;
    min-width:var(--desktop-card-width,310px)!important;
    max-width:var(--desktop-card-width,310px)!important;
    flex:0 0 var(--desktop-card-width,310px)!important;
  }
  #familyTreeWrap .desktop-branch-tree li{
    min-width:calc(var(--desktop-card-width,310px) + 12px)!important;
  }
  #familyTreeWrap.layout-flow .desktop-branch-tree li{
    grid-template-columns:var(--desktop-card-width,310px) minmax(30px,1fr)!important;
  }
}

@media (max-width:1100px){
  .privacy-watermark-layer{
    inset:-30px!important;
    background-size:275px 112px!important;
    opacity:calc(var(--privacy-watermark-opacity,.24) + .08)!important;
    mix-blend-mode:multiply!important;
  }
  .box-stretch-control{display:none!important}
}

@media (max-width:500px){
  .privacy-watermark-layer{
    background-size:225px 92px!important;
    opacity:calc(var(--privacy-watermark-opacity,.24) + .10)!important;
  }
}


/* ======================================================================
   VERSION 21 — BEST-EFFORT SCREENSHOT BLUR + OPTIONAL HOLD-TO-VIEW
   ====================================================================== */
.privacy-screen-blur-shield{
  display:none;position:fixed;inset:0;z-index:2147483635;align-items:center;justify-content:center;
  flex-direction:column;gap:8px;padding:24px;text-align:center;color:#efd88c;
  background:linear-gradient(145deg,rgba(5,34,26,.98),rgba(15,77,59,.98));
  pointer-events:none
}
.privacy-screen-blur-shield strong{font:900 clamp(21px,5vw,40px)/1.15 Georgia,serif;letter-spacing:.08em}
.privacy-screen-blur-shield span{font-size:13px;font-weight:800;color:#dceae4}
.privacy-screen-blurred #protectedShijraContent,
.privacy-screen-blurred .hero,
.privacy-screen-blurred footer{
  filter:blur(24px)!important;
  opacity:.08!important;
  visibility:hidden!important;
}
.privacy-screen-blurred .privacy-screen-blur-shield{display:flex}
.mobile-secure-reveal{display:none}
@media(max-width:1100px){
  .mobile-secure-reveal{
    display:block;position:fixed;z-index:2147483642;left:50%;bottom:12px;transform:translateX(-50%);
    width:min(360px,calc(100vw - 24px));pointer-events:auto
  }
  .mobile-secure-reveal button{
    width:100%;border:2px solid #d4af37;border-radius:18px;padding:12px 16px;
    background:linear-gradient(135deg,#0a3529,#17654e);color:#fff;box-shadow:0 14px 35px rgba(0,0,0,.28);
    touch-action:none;user-select:none;-webkit-user-select:none
  }
  .mobile-secure-reveal b{display:block;color:#efd88c;font-size:16px}
  .mobile-secure-reveal span{display:block;margin-top:2px;font-size:10px;font-weight:700;color:#dce9e4}
  .privacy-mobile-revealed .mobile-secure-reveal button{background:linear-gradient(135deg,#6c5110,#b48620)}
}


/* ======================================================================
   V22 — MOBILE SIBLING SWIPE ROUTES
   Siblings sit side-by-side. Only the active sibling's descendants continue.
   Desktop family tree remains unchanged.
   ====================================================================== */
.mobile-sibling-group{display:none}

@media (max-width:1100px){
  .mobile-sibling-group{
    display:block!important;position:relative!important;width:100%!important;min-width:0!important;max-width:100%!important;
    margin:2px 0 12px!important;padding:12px 0 0 27px!important;box-sizing:border-box!important;
  }
  .mobile-sibling-group:before{
    content:"";position:absolute;left:7px;top:0;bottom:0;width:3px;border-radius:99px;
    background:linear-gradient(180deg,#e3c052,#a97710);box-shadow:0 0 0 2px rgba(255,255,255,.9)
  }
  .mobile-sibling-group:after{
    content:"";position:absolute;left:1px;top:34px;width:13px;height:13px;border:3px solid #fff;border-radius:50%;
    background:var(--branch-color,var(--green-700));box-shadow:0 0 0 2px #b9891e
  }
  .mobile-sibling-heading{
    display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 8px 9px 0;padding:10px 11px;
    border:1px solid rgba(185,139,27,.28);border-radius:13px;background:linear-gradient(135deg,#fffaf0,#f7f2e5)
  }
  .mobile-sibling-heading div:first-child{min-width:0}
  .mobile-sibling-heading small{display:block;color:#7b672d;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-sibling-heading strong{display:block;margin-top:3px;color:var(--green-900);font-size:12px;line-height:1.35}
  .mobile-sibling-arrows{display:flex;gap:5px;flex:0 0 auto}
  .mobile-sibling-arrows button{
    width:34px;height:34px;border:1px solid rgba(181,134,21,.36);border-radius:50%;background:#fff;color:#806015;
    font-size:24px;line-height:1;display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,.05)
  }
  .mobile-sibling-tabs{
    display:flex!important;gap:7px!important;width:100%!important;overflow-x:auto!important;scrollbar-width:none!important;
    padding:0 30px 8px 1px!important;overscroll-behavior-inline:contain!important
  }
  .mobile-sibling-tabs::-webkit-scrollbar{display:none}
  .mobile-sibling-tab{
    display:grid;grid-template-columns:8px auto minmax(72px,1fr);align-items:center;gap:6px;flex:0 0 auto;max-width:210px;
    padding:7px 9px;border:1px solid color-mix(in srgb,var(--sibling-color) 36%,#ddd);border-radius:999px;
    background:#fff;color:#46524c;box-shadow:0 4px 12px rgba(0,0,0,.04)
  }
  .mobile-sibling-tab i{width:8px;height:8px;border-radius:50%;background:var(--sibling-color)}
  .mobile-sibling-tab b{font-size:9px;color:#765a15}
  .mobile-sibling-tab span{font-size:10px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-sibling-tab.active{background:color-mix(in srgb,var(--sibling-color) 10%,#fff);border-color:var(--sibling-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--sibling-color) 16%,transparent)}

  .mobile-sibling-track{
    display:grid!important;grid-auto-flow:column!important;grid-auto-columns:min(88%,380px)!important;gap:12px!important;
    width:100%!important;min-width:0!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;
    padding:4px 32px 12px 1px!important;scroll-snap-type:x mandatory!important;scroll-padding-inline:1px!important;
    overscroll-behavior-inline:contain!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important
  }
  .mobile-sibling-track::-webkit-scrollbar{display:none}
  .mobile-sibling-slide{
    position:relative;display:block!important;min-width:0!important;max-width:100%!important;scroll-snap-align:start!important;
    opacity:.73;transform:scale(.975);transform-origin:center;transition:opacity .2s ease,transform .2s ease
  }
  .mobile-sibling-slide.active{opacity:1;transform:scale(1)}
  .mobile-sibling-slide .mreader-card{height:100%;box-shadow:0 13px 28px rgba(7,43,32,.12)!important}
  .mobile-sibling-position{
    position:absolute;z-index:4;right:8px;top:-5px;display:flex;align-items:center;gap:4px;padding:4px 7px;border-radius:999px;
    background:var(--node-color);color:#fff;box-shadow:0 5px 12px rgba(0,0,0,.12)
  }
  .mobile-sibling-position b{font-size:10px}.mobile-sibling-position span{font-size:8px;font-weight:800}
  .mobile-swipe-hint{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 28px 10px 0;color:#78631d;font-size:9px;font-weight:800;text-align:center}
  .mobile-swipe-hint b{font-size:17px;color:#9b7414}.mobile-swipe-hint em{font-style:normal;color:#68736d}

  .mobile-sibling-panels{position:relative;width:100%;min-width:0}
  .mobile-sibling-continuation{display:none!important;width:100%!important;min-width:0!important;max-width:100%!important}
  .mobile-sibling-continuation.active{display:block!important}
  .mobile-route-continues{
    display:grid;grid-template-columns:10px auto minmax(0,1fr);align-items:center;gap:7px;margin:0 8px 5px 0;padding:8px 10px;
    border-radius:11px;background:color-mix(in srgb,var(--node-color) 8%,#fff);border:1px solid color-mix(in srgb,var(--node-color) 34%,#ddd)
  }
  .mobile-route-continues i{width:10px;height:27px;border-radius:99px;background:var(--node-color)}
  .mobile-route-continues span{font-size:10px;color:#4e5a54}.mobile-route-continues span b{color:var(--node-deep);font-size:11px}
  .mobile-route-continues em{font-style:normal;font-size:10px;color:#6b746f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
  .mobile-route-end{display:flex;align-items:center;gap:8px;margin:0 8px 12px 0;padding:11px;border:1px dashed rgba(181,134,21,.45);border-radius:12px;background:#fffaf0;color:#78631d;font-size:10px;font-weight:800}
  .mobile-route-end i{width:11px;height:11px;border-radius:50%;background:var(--node-color);box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(181,134,21,.35)}

  /* Nested route readers keep their full width and do not inherit horizontal slide width. */
  .mobile-sibling-continuation > .mobile-flat-node,
  .mobile-sibling-continuation > .mobile-sibling-group{width:100%!important;max-width:100%!important}
}

@media (max-width:500px){
  .mobile-sibling-track{grid-auto-columns:88%!important;gap:10px!important;padding-right:26px!important}
  .mobile-sibling-group{padding-left:25px!important}
  .mobile-sibling-heading{margin-right:5px!important}
  .mobile-sibling-arrows button{width:31px;height:31px;font-size:21px}
  .mobile-sibling-tab{max-width:175px;padding:6px 8px}
  .mobile-route-continues{grid-template-columns:8px minmax(0,1fr)}
  .mobile-route-continues em{grid-column:2;text-align:left;white-space:normal}
}

@media (min-width:1101px){
  .mobile-sibling-group{display:none!important}
}


/* V22.1 — root-level siblings also use the mobile swipe reader. */
.mobile-root-route-reader{display:none}
@media(max-width:1100px){
  .mobile-root-route-reader{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;margin-top:10px!important}
  .mobile-root-route-reader + .root-drop,
  .mobile-root-route-reader ~ .branch-garden{display:none!important}
  .mobile-root-route-reader > .mobile-flat-node,
  .mobile-root-route-reader > .mobile-sibling-group{width:100%!important;max-width:100%!important}
}
@media(min-width:1101px){.mobile-root-route-reader{display:none!important}}


/* ======================================================================
   VERSION 23 — SINGLE MOBILE ROUTE RAIL, STABLE SIBLING SWIPE,
   MOUSE-DRAG DESKTOP BOX RESIZING, QUICK TOP/BOTTOM NAVIGATION
   ====================================================================== */
@media (max-width:1100px){
  /* One continuous route rail only. Nested sibling readers no longer draw
     additional parallel gold lines. */
  .mobile-root-route-reader{
    position:relative!important;
    padding:8px 8px 20px 38px!important;
    overflow:visible!important;
  }
  .mobile-root-route-reader:before{
    content:""!important;display:block!important;position:absolute!important;
    left:15px!important;top:8px!important;bottom:18px!important;width:4px!important;
    border-radius:999px!important;background:linear-gradient(180deg,#e4c253,#a97812)!important;
    box-shadow:0 0 0 2px rgba(255,255,255,.94)!important;z-index:0!important;
  }
  .mobile-root-route-reader:after{display:none!important}

  .mobile-sibling-group,
  .mobile-flat-node{
    position:relative!important;width:100%!important;max-width:100%!important;min-width:0!important;
    padding-left:0!important;margin-left:0!important;
  }
  .mobile-sibling-group:before,
  .mobile-flat-node:before{
    content:""!important;display:block!important;position:absolute!important;
    left:-21px!important;top:43px!important;width:21px!important;height:3px!important;
    border:0!important;border-radius:99px!important;background:#bd8c1c!important;
    box-shadow:none!important;z-index:1!important;
  }
  .mobile-sibling-group:after,
  .mobile-flat-node:after{
    content:""!important;display:block!important;position:absolute!important;
    left:-28px!important;top:36px!important;width:13px!important;height:13px!important;
    border:3px solid #fff!important;border-radius:50%!important;
    background:var(--node-color,var(--branch-color,var(--green-700)))!important;
    box-shadow:0 0 0 2px #b9891e!important;z-index:2!important;
  }
  .mobile-flat-node:last-child:before{bottom:auto!important}
  .mobile-sibling-continuation > .mobile-sibling-group,
  .mobile-sibling-continuation > .mobile-flat-node{padding-left:0!important}

  /* Cleaner selected route label: no large explanatory box. */
  .mobile-active-route-label{
    display:flex!important;align-items:center!important;gap:7px!important;width:min(100%,520px)!important;
    margin:3px 0 8px!important;padding:0 2px!important;color:#5d6862!important;min-width:0!important;
  }
  .mobile-active-route-label i{width:9px!important;height:9px!important;flex:0 0 9px!important;border-radius:50%!important;background:var(--node-color)!important}
  .mobile-active-route-label b{
    display:block!important;min-width:0!important;max-width:58%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
    color:var(--node-deep)!important;font-size:10px!important
  }
  .mobile-active-route-label span{
    display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
    font-size:10px!important;color:#6d7772!important
  }
  .mobile-route-continues,.mobile-swipe-hint{display:none!important}

  /* Long route strings never expand the page. */
  .mreader-route-chip,.mobile-sibling-tab b,.mreader-child-route b{
    max-width:120px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important
  }
  .mobile-sibling-tab{max-width:190px!important;min-width:0!important}
  .mobile-sibling-track{
    scroll-snap-stop:normal!important;touch-action:pan-x pan-y!important;
    overscroll-behavior-x:contain!important;contain:layout paint!important;
  }
  .mobile-sibling-slide{transition:opacity .16s ease!important;transform:none!important}
  .mobile-sibling-slide.active{transform:none!important}
  .mobile-sibling-group.is-swiping .mobile-sibling-slide{transition:none!important}
  .mobile-sibling-panels{contain:layout!important;overflow-anchor:none!important}
  .mobile-sibling-continuation{overflow-anchor:none!important}

  /* Stop footer visual flicker when browser bars resize the viewport. */
  body{min-height:100svh!important}
  main{min-height:55svh!important}
  footer{min-height:70px!important;contain:layout paint!important;transform:translateZ(0)!important}
}

@media (min-width:1101px){
  .box-stretch-control{flex-wrap:wrap!important;max-width:540px!important}
  .box-width-preset{
    height:32px!important;min-width:108px!important;padding:0 28px 0 9px!important;border:1px solid #dfd2aa!important;
    border-radius:9px!important;background:#fff!important;color:#5d512e!important;font-size:11px!important;font-weight:800!important
  }
  #familyTreeWrap .desktop-branch-tree .member-card{position:relative!important}
  .desktop-card-resizer{
    display:block!important;position:absolute!important;right:0!important;top:50%!important;z-index:30!important;
    width:15px!important;height:58px!important;transform:translate(50%,-50%)!important;
    border:2px solid #fff!important;border-radius:999px!important;background:linear-gradient(180deg,var(--gold-300),var(--gold-600))!important;
    box-shadow:0 5px 14px rgba(0,0,0,.18)!important;cursor:ew-resize!important;touch-action:none!important
  }
  .desktop-card-resizer:before{
    content:"⋮"!important;display:grid!important;place-items:center!important;width:100%!important;height:100%!important;
    color:#563f08!important;font-size:18px!important;font-weight:900!important;line-height:1!important
  }
  .desktop-box-resizing,.desktop-box-resizing *{cursor:ew-resize!important;user-select:none!important}
}
@media (max-width:1100px){.desktop-card-resizer,.box-width-preset{display:none!important}}

.quick-page-nav{
  position:fixed;right:18px;bottom:18px;z-index:220;display:flex;flex-direction:column;gap:8px
}
.quick-page-nav button{
  width:42px;height:42px;border:2px solid var(--gold-500);border-radius:50%;background:var(--green-900);color:#fff;
  font-size:21px;font-weight:900;box-shadow:0 8px 22px rgba(0,0,0,.18);cursor:pointer
}
.quick-page-nav button:hover{background:var(--gold-500);color:#3d2b05}
@media (max-width:1100px){.quick-page-nav{display:none!important}}


/* ======================================================================
   VERSION 24 — DESKTOP SINGLE-ROUTE READER, CLICKABLE SIBLINGS & ROUTE COLOUR ADMIN
   Mobile reader remains unchanged.
   ====================================================================== */
@media (min-width:1101px){
  .desktop-sibling-view-group{display:flex;gap:7px;align-items:center;padding:5px;border:1px solid #e5d8b5;border-radius:13px;background:#fffaf0}
  .desktop-sibling-view-group .view-control{white-space:nowrap}
  .desktop-main-route-switcher{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;margin:10px 0 16px;padding:13px 15px;border:1px solid #e2d3a6;border-radius:17px;background:linear-gradient(135deg,#fffdf8,#f6efdc);box-shadow:0 8px 22px rgba(50,37,6,.06)}
  .desktop-main-route-switcher>div:first-child small{display:block;color:#8a6b18;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.12em}
  .desktop-main-route-switcher>div:first-child strong{display:block;color:var(--green-900);font-size:14px;margin-top:3px}
  .desktop-main-route-buttons,.desktop-sibling-buttons{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding:2px}
  .desktop-main-route-buttons button,.desktop-sibling-buttons button{display:grid;grid-template-columns:8px auto minmax(80px,1fr);gap:7px;align-items:center;min-width:max-content;padding:8px 10px;border:1px solid color-mix(in srgb,var(--switch-color) 42%,#d7cba9);border-radius:11px;background:color-mix(in srgb,var(--switch-color) 8%,#fff);color:#425048;cursor:pointer;transition:.18s}
  .desktop-main-route-buttons button:hover,.desktop-main-route-buttons button.active,.desktop-sibling-buttons button:hover,.desktop-sibling-buttons button.active{transform:translateY(-1px);box-shadow:0 7px 16px rgba(0,0,0,.09);background:color-mix(in srgb,var(--switch-color) 15%,#fff);border-color:var(--switch-color)}
  .desktop-main-route-buttons i,.desktop-sibling-buttons i{width:8px;height:30px;border-radius:99px;background:var(--switch-color)}
  .desktop-main-route-buttons b,.desktop-sibling-buttons b{font-size:10px;color:var(--switch-color);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .desktop-main-route-buttons span,.desktop-sibling-buttons span{font-size:11px;font-weight:900;color:#33413a;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .desktop-sibling-switcher{display:none;grid-template-columns:32px minmax(0,1fr) 32px;gap:7px;align-items:center;width:min(100%,calc(var(--desktop-card-width,310px) * 2.2));margin:7px auto 4px;padding:7px;border:1px solid #eadcb6;border-radius:13px;background:rgba(255,251,239,.96);box-shadow:0 6px 16px rgba(0,0,0,.05);position:relative;z-index:7}
  .desktop-single-route .desktop-sibling-switcher{display:grid}
  .desktop-sibling-prev,.desktop-sibling-next{width:32px;height:32px;border:1px solid #d9c584;border-radius:10px;background:#fff;color:#6e5515;font-size:23px;font-weight:900;cursor:pointer}
  .desktop-sibling-prev:hover,.desktop-sibling-next:hover{background:#f5e9c4}

  .desktop-single-route .branch-garden{grid-template-columns:minmax(0,1fr)!important}
  .desktop-single-route .branch-family-panel{width:100%;max-width:none}
  .desktop-single-route .branch-family-panel.route-panel-hidden{display:none!important}
  .desktop-single-route .branch-node.route-node-hidden{display:none!important}
  .desktop-single-route .descendant-list>.branch-node:not(.route-node-hidden):before,
  .desktop-single-route .descendant-list>.branch-node:not(.route-node-hidden):after{display:none!important}
  .desktop-single-route .desktop-branch-tree>ul{justify-content:center}
  .desktop-single-route .desktop-branch-tree{overflow:auto;padding-bottom:22px}
  .desktop-single-route.layout-routes .desktop-branch-tree{max-height:none}

  .desktop-card-route-tools{position:absolute;right:10px;bottom:9px;z-index:25;display:flex;gap:5px;opacity:.25;transition:.18s}
  .member-card:hover .desktop-card-route-tools,.desktop-card-route-tools:focus-within{opacity:1}
  .desktop-card-route-tools button{width:28px;height:28px;border:1px solid rgba(184,136,34,.42);border-radius:9px;background:rgba(255,253,245,.96);color:var(--node-deep,var(--green-900));font-size:18px;font-weight:900;line-height:1;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.07)}
  .desktop-card-route-tools button:hover{background:#f3e5b8}
  .desktop-card-route-tools .desktop-focus-route{font-size:16px}
  .desktop-card-route-tools .desktop-card-children.collapsed{transform:rotate(-90deg)}
  .desktop-card-resizer{right:-8px!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;height:64px!important;width:15px!important;border-radius:9px!important}
  .desktop-card-resizer:before{content:"↔"!important;position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;color:#6b510d!important;font-size:11px!important;font-weight:900!important}
}
@media (max-width:1100px){
  .desktop-sibling-view-group,.desktop-main-route-switcher,.desktop-sibling-switcher,.desktop-card-route-tools{display:none!important}
}

.route-colour-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.route-colour-admin-card{display:grid;grid-template-columns:10px minmax(0,1fr) 54px auto;gap:12px;align-items:center;padding:14px;border:1px solid color-mix(in srgb,var(--admin-route-color) 40%,#ded5bc);border-radius:16px;background:color-mix(in srgb,var(--admin-route-color) 7%,#fff);box-shadow:0 7px 18px rgba(0,0,0,.04)}
.route-colour-admin-card>i{width:10px;height:52px;border-radius:99px;background:var(--admin-route-color)}
.route-colour-admin-card small{display:block;color:#69736e;font-size:10px}
.route-colour-admin-card strong{display:block;color:#20352c;font-size:15px;margin:2px 0}
.route-colour-admin-card span{display:block;color:#7b6421;font-size:13px}
.route-colour-admin-card input[type=color]{width:50px;height:42px;padding:3px;border-radius:10px;cursor:pointer}
.route-colour-admin-card .btn{white-space:nowrap}
@media(max-width:850px){.route-colour-admin-grid{grid-template-columns:1fr}.route-colour-admin-card{grid-template-columns:9px minmax(0,1fr) 48px}.route-colour-admin-card .btn{grid-column:2/-1;width:100%}}


/* ======================================================================
   VERSION 25 — SIMPLE DESKTOP ALL-SIBLING VIEW
   Desktop only. The proven mobile sibling reader remains untouched.
   ====================================================================== */
@media (min-width:1101px){
  /* Each main family route receives the complete desktop width. This avoids
     half-width panels cutting sibling cards at the centre of the screen. */
  #familyTreeWrap .branch-garden,
  #familyTreeWrap.layout-classic .branch-garden,
  #familyTreeWrap.layout-routes .branch-garden,
  #familyTreeWrap.layout-flow .branch-garden{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:24px!important;
    width:100%!important;
    overflow:visible!important;
  }
  #familyTreeWrap .branch-family-panel{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    overflow:visible!important;
  }

  /* V24 single-route choices are intentionally removed. All siblings stay in
     the document and the route-name strip works only as quick navigation. */
  .desktop-sibling-view-group,.desktop-sibling-switcher{display:none!important}
  #familyTreeWrap.desktop-single-route .branch-family-panel.route-panel-hidden,
  #familyTreeWrap.desktop-single-route .branch-node.route-node-hidden{display:block!important}
  #familyTreeWrap.desktop-single-route .branch-garden{grid-template-columns:minmax(0,1fr)!important}
  #familyTreeWrap .desktop-main-route-switcher{
    position:sticky;top:8px;z-index:40;
    grid-template-columns:minmax(205px,auto) minmax(0,1fr)!important;
  }
  #familyTreeWrap .desktop-main-route-buttons button{scroll-snap-align:center}

  /* Full-width sibling viewport with permanent navigation near the top.
     The tree can still be very wide, but no sibling is removed or hidden. */
  #familyTreeWrap .desktop-branch-tree{
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    padding:14px 54px 30px!important;
    scroll-behavior:smooth!important;
    scroll-snap-type:x proximity!important;
    scroll-padding-inline:70px!important;
    overscroll-behavior-inline:contain!important;
    scrollbar-gutter:stable both-edges!important;
    border:1px solid color-mix(in srgb,var(--branch-color) 20%,#e6dcc0)!important;
    border-radius:18px!important;
    background:
      linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,255,255,.72) 36px,transparent 70px),
      linear-gradient(270deg,rgba(255,255,255,.98),rgba(255,255,255,.72) 36px,transparent 70px),
      linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,253,247,.36))!important;
  }
  #familyTreeWrap .desktop-branch-tree>ul{
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    justify-content:flex-start!important;
    margin-inline:auto!important;
  }
  #familyTreeWrap .desktop-branch-tree li.branch-node>.member-card{
    scroll-snap-align:center!important;
    scroll-margin-inline:74px!important;
  }
  #familyTreeWrap.layout-routes .desktop-branch-tree{max-height:none!important}

  .desktop-tree-pan-controls{
    display:grid!important;
    grid-template-columns:auto auto minmax(170px,1fr) auto!important;
    gap:8px!important;
    align-items:center!important;
    position:sticky!important;
    top:78px!important;
    z-index:35!important;
    margin:10px 4px 8px!important;
    padding:8px!important;
    border:1px solid #dfcf9e!important;
    border-radius:14px!important;
    background:rgba(255,252,242,.96)!important;
    box-shadow:0 8px 20px rgba(45,34,8,.08)!important;
    backdrop-filter:blur(8px)!important;
  }
  .desktop-tree-pan-controls button{
    min-height:36px!important;
    padding:7px 12px!important;
    border:1px solid #d8c27d!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#5d4710!important;
    font-size:12px!important;
    font-weight:900!important;
    cursor:pointer!important;
    white-space:nowrap!important;
  }
  .desktop-tree-pan-controls button:hover:not(:disabled){background:#f5e8bd!important;transform:translateY(-1px)}
  .desktop-tree-pan-controls button:disabled{opacity:.38!important;cursor:default!important}
  .desktop-tree-pan-status{
    min-width:0!important;
    text-align:center!important;
    color:var(--branch-deep,var(--green-900))!important;
    font-size:11px!important;
    font-weight:900!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .desktop-tree-pan-controls.no-overflow .desktop-tree-pan-center{display:none!important}

  /* One simple card control only: collapse/expand descendants. */
  .desktop-card-route-tools{right:10px!important;bottom:9px!important;opacity:.55!important}
  .member-card:hover .desktop-card-route-tools{opacity:1!important}
  .desktop-card-route-tools .desktop-focus-route{display:none!important}
  .desktop-card-route-tools:has(.desktop-card-children:only-child){display:flex!important}

  /* Keep the resize handle easy to grab without covering another sibling. */
  .desktop-card-resizer{right:-7px!important;z-index:60!important}
}
@media print{.desktop-tree-pan-controls{display:none!important}}


/* ======================================================================
   VERSION 26 — BALANCED DESKTOP SIBLINGS + COMPACT FLOATING TREE TOOLS
   Desktop only. Mobile/tablet markup and behaviour remain unchanged.
   ====================================================================== */
.desktop-floating-tree-tools{display:none}
@media (min-width:1101px){
  /* Remove the previous large pan strip and the old vertical quick buttons. */
  .desktop-tree-pan-controls,.quick-page-nav{display:none!important}

  /* Keep horizontal movement possible while removing the heavy browser bar. */
  #familyTreeWrap .desktop-branch-tree{
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
    scrollbar-gutter:auto!important;
    padding:20px 64px 34px!important;
  }
  #familyTreeWrap .desktop-branch-tree::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}

  /* The first entered child is the main continuing descendant. Remaining
     siblings are physically arranged on its left and right by JavaScript. */
  #familyTreeWrap .desktop-sibling-group{
    align-items:flex-start!important;
    justify-content:center!important;
    gap:18px!important;
    padding-inline:34px!important;
  }
  #familyTreeWrap .desktop-sibling-group>li.branch-node{
    flex:0 0 auto!important;
  }
  #familyTreeWrap .desktop-sibling-group>li.desktop-main-descendant{
    z-index:8!important;
    padding-inline:18px!important;
  }
  #familyTreeWrap .desktop-sibling-group>li.desktop-side-sibling{
    z-index:4!important;
    opacity:.96!important;
  }
  #familyTreeWrap .desktop-sibling-group>li.desktop-main-descendant>.member-card{
    width:clamp(340px,calc(var(--desktop-card-width,310px) + 96px),716px)!important;
    min-width:clamp(340px,calc(var(--desktop-card-width,310px) + 96px),716px)!important;
    max-width:clamp(340px,calc(var(--desktop-card-width,310px) + 96px),716px)!important;
    min-height:calc(var(--compact-card-height,132px) + 20px)!important;
    border-width:2px!important;
    box-shadow:0 18px 38px color-mix(in srgb,var(--node-color,var(--branch-color)) 18%,rgba(0,0,0,.12))!important;
    transform:translateY(-5px)!important;
  }
  #familyTreeWrap .desktop-sibling-group>li.desktop-side-sibling>.member-card{
    width:max(260px,calc(var(--desktop-card-width,310px) - 24px))!important;
    min-width:max(260px,calc(var(--desktop-card-width,310px) - 24px))!important;
    max-width:max(260px,calc(var(--desktop-card-width,310px) - 24px))!important;
  }
  .desktop-main-route-badge{
    position:absolute!important;
    left:50%!important;
    top:-14px!important;
    transform:translateX(-50%)!important;
    z-index:75!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:5px!important;
    padding:6px 12px!important;
    border:2px solid #fff8df!important;
    border-radius:999px!important;
    background:linear-gradient(135deg,var(--gold-300,#efd88c),var(--gold-500,#d4af37))!important;
    color:#4f3905!important;
    box-shadow:0 7px 16px rgba(64,44,2,.18)!important;
    font-size:9px!important;
    font-weight:950!important;
    letter-spacing:.11em!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
    pointer-events:none!important;
  }
  .desktop-main-route-badge:before{content:"◆";font-size:8px}

  /* Compact floating popup replaces the previous fixed arrows. */
  .desktop-floating-tree-tools{
    position:fixed!important;
    right:18px!important;
    bottom:18px!important;
    z-index:5000!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-end!important;
    gap:8px!important;
  }
  .desktop-floating-tree-toggle{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    min-width:74px!important;
    height:42px!important;
    padding:0 13px!important;
    border:1px solid #d7bd6f!important;
    border-radius:999px!important;
    background:linear-gradient(135deg,var(--green-900,#0c3b2d),#145c46)!important;
    color:#fff!important;
    box-shadow:0 11px 28px rgba(8,44,34,.24)!important;
    font-size:11px!important;
    font-weight:900!important;
    cursor:pointer!important;
  }
  .desktop-floating-tree-toggle b{color:var(--gold-300,#efd88c);font-size:16px}
  .desktop-floating-tree-tools.open .desktop-floating-tree-toggle{background:linear-gradient(135deg,#795909,var(--gold-500,#d4af37))!important;color:#fff!important}
  .desktop-floating-tree-menu{
    width:224px!important;
    padding:12px!important;
    border:1px solid #dec989!important;
    border-radius:18px!important;
    background:rgba(255,252,242,.97)!important;
    box-shadow:0 18px 46px rgba(38,28,4,.20)!important;
    backdrop-filter:blur(12px)!important;
  }
  .desktop-floating-tree-menu[hidden]{display:none!important}
  .desktop-floating-tree-title{display:flex;justify-content:space-between;align-items:end;gap:8px;margin:0 2px 9px;color:var(--green-900,#0c3b2d)}
  .desktop-floating-tree-title strong{font-size:13px}
  .desktop-floating-tree-title small{font-size:9px;color:#88733b}
  .desktop-floating-tree-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .desktop-floating-tree-grid button{
    min-width:0!important;
    min-height:48px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    padding:5px!important;
    border:1px solid #e1d2a6!important;
    border-radius:12px!important;
    background:#fff!important;
    color:#5b4610!important;
    box-shadow:0 5px 12px rgba(53,39,6,.06)!important;
    font-size:18px!important;
    font-weight:900!important;
    cursor:pointer!important;
  }
  .desktop-floating-tree-grid button:hover{background:#f5e7b9!important;transform:translateY(-1px)!important}
  .desktop-floating-tree-grid button span{font-size:8px!important;text-transform:uppercase!important;letter-spacing:.05em!important}
  .desktop-floating-tree-grid button[data-tree-tool="bottom"]{grid-column:4}

  /* The first route stays centred after loading, resizing or adding siblings. */
  #familyTreeWrap .desktop-sibling-group>li.desktop-main-descendant>.member-card{scroll-snap-align:center!important}
}
@media print{.desktop-floating-tree-tools,.desktop-main-route-badge{display:none!important}}


/* ======================================================================
   VERSION 27 — MAIN ROUTE FIRST, ALL SIBLINGS TO THE RIGHT
   Desktop only. Mobile/tablet layout remains exactly as V23–V26.
   ====================================================================== */
@media (min-width:1101px){
  /* Remove all previous large/fixed arrow navigation. */
  .desktop-tree-pan-controls,.quick-page-nav{display:none!important}

  /* Mouse-driven panning. Drag any empty part of the tree horizontally. */
  #familyTreeWrap .desktop-branch-tree{
    cursor:grab!important;
    overscroll-behavior-inline:contain!important;
    scroll-behavior:auto;
    user-select:none!important;
  }
  #familyTreeWrap .desktop-branch-tree.desktop-tree-dragging{
    cursor:grabbing!important;
    scroll-behavior:auto!important;
  }
  #familyTreeWrap .desktop-branch-tree .member-card,
  #familyTreeWrap .desktop-branch-tree a,
  #familyTreeWrap .desktop-branch-tree button{cursor:default}
  #familyTreeWrap .desktop-branch-tree a,
  #familyTreeWrap .desktop-branch-tree button,
  #familyTreeWrap .desktop-card-resizer{cursor:pointer!important}
  #familyTreeWrap .desktop-card-resizer{cursor:ew-resize!important}

  /* The first entered child is the main route. Every sibling follows on its
     right side only; no sibling is placed on the left. */
  #familyTreeWrap .desktop-sibling-group.desktop-siblings-right{
    justify-content:flex-start!important;
    align-items:flex-start!important;
    gap:18px!important;
    padding-left:34px!important;
    padding-right:80px!important;
  }
  #familyTreeWrap .desktop-sibling-group.desktop-siblings-right>li.branch-node{
    order:2!important;
    flex:0 0 auto!important;
  }
  #familyTreeWrap .desktop-sibling-group.desktop-siblings-right>li.desktop-main-descendant{
    order:1!important;
    z-index:9!important;
    padding-left:0!important;
    padding-right:22px!important;
  }
  #familyTreeWrap .desktop-sibling-group.desktop-siblings-right>li.desktop-right-sibling{
    order:2!important;
    z-index:4!important;
    opacity:.97!important;
  }
  #familyTreeWrap .desktop-sibling-group.desktop-siblings-right>li.desktop-main-descendant>.member-card{
    width:clamp(350px,calc(var(--desktop-card-width,310px) + 96px),716px)!important;
    min-width:clamp(350px,calc(var(--desktop-card-width,310px) + 96px),716px)!important;
    max-width:clamp(350px,calc(var(--desktop-card-width,310px) + 96px),716px)!important;
    transform:translateY(-5px)!important;
  }
  #familyTreeWrap .desktop-sibling-group.desktop-siblings-right>li.desktop-right-sibling>.member-card{
    width:max(260px,calc(var(--desktop-card-width,310px) - 18px))!important;
    min-width:max(260px,calc(var(--desktop-card-width,310px) - 18px))!important;
    max-width:max(260px,calc(var(--desktop-card-width,310px) - 18px))!important;
  }

  /* Tiny bindu menu only — no floating arrows. */
  .desktop-floating-tree-tools.desktop-mini-tools{
    right:14px!important;
    bottom:14px!important;
    gap:6px!important;
  }
  .desktop-floating-tree-toggle.desktop-mini-dot{
    min-width:34px!important;
    width:34px!important;
    height:34px!important;
    padding:0!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
    font-size:12px!important;
    letter-spacing:1px!important;
    line-height:1!important;
    color:var(--gold-300,#efd88c)!important;
  }
  .desktop-floating-tree-menu.desktop-mini-menu{
    width:190px!important;
    padding:10px!important;
    border-radius:15px!important;
  }
  .desktop-mini-menu .desktop-floating-tree-title{
    display:block!important;
    margin-bottom:8px!important;
  }
  .desktop-mini-menu .desktop-floating-tree-title strong{display:block!important}
  .desktop-mini-menu .desktop-floating-tree-title small{display:block!important;margin-top:2px!important;line-height:1.35!important}
  .desktop-floating-tree-grid.desktop-mini-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .desktop-mini-grid button{
    min-height:43px!important;
    padding:4px!important;
    font-size:14px!important;
  }
  .desktop-mini-grid button b{font-size:15px!important;line-height:1!important}
  .desktop-mini-grid button span{font-size:7px!important}
}
@media print{.desktop-mini-tools{display:none!important}}


/* ================================================================
   V28 DESKTOP EASY ROUTE READER
   Desktop only. Mobile and tablet rules below 1101px are untouched.
   ================================================================ */
.desktop-easy-route-view{display:none}

@media (min-width:1101px){
  body.desktop-easy-v28 .desktop-floating-tree-tools,
  body.desktop-easy-v28 .desktop-tree-pan-controls,
  body.desktop-easy-v28 .quick-page-nav{display:none!important}

  body.desktop-easy-v28 #familyTreeWrap .tree-layout-group,
  body.desktop-easy-v28 #familyTreeWrap .tree-action-group{display:none!important}

  body.desktop-easy-v28 #familyTreeWrap .desktop-connected-tree-legacy{display:none!important}
  body.desktop-easy-v28 #familyTreeWrap .desktop-easy-route-view{display:block!important}

  body.desktop-easy-v28 #familyTreeWrap .branch-garden{
    display:block!important;
    grid-template-columns:none!important;
    width:100%!important;
    max-width:none!important;
    overflow:visible!important;
  }

  body.desktop-easy-v28 #familyTreeWrap .branch-family-panel{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0 0 34px!important;
    overflow:visible!important;
    border-radius:24px!important;
  }

  body.desktop-easy-v28 #familyTreeWrap .branch-panel-title{
    position:sticky;
    top:8px;
    z-index:80;
    background:rgba(255,253,247,.96)!important;
    backdrop-filter:blur(10px);
    box-shadow:0 10px 26px rgba(7,49,37,.08);
  }

  body.desktop-easy-v28 .desktop-main-route-switcher{
    position:sticky;
    top:0;
    z-index:90;
    border-radius:18px!important;
    background:rgba(255,253,247,.97)!important;
    backdrop-filter:blur(10px);
    box-shadow:0 12px 28px rgba(7,49,37,.10);
  }

  .desktop-easy-route-ladder{
    width:min(100%,1320px);
    margin:0 auto;
    padding:20px clamp(16px,2.5vw,36px) 38px;
  }

  .desktop-easy-route-help{
    margin:0 auto 18px;
    padding:12px 16px;
    border:1px solid rgba(184,136,34,.28);
    border-radius:14px;
    background:linear-gradient(135deg,#fffdf6,#f8f1df);
    color:#5f5a4b;
    font-size:13px;
    line-height:1.55;
  }
  .desktop-easy-route-help b{color:var(--green-900,#0c3b2d)}

  .desktop-easy-generation-row{
    display:grid;
    grid-template-columns:minmax(360px,clamp(360px,var(--desktop-card-width,420px),620px)) minmax(320px,1fr);
    gap:clamp(28px,4vw,64px);
    align-items:start;
    position:relative;
    width:100%;
    max-width:1240px;
    margin:0 auto;
  }

  .desktop-easy-main-column{position:relative;min-width:0}
  .desktop-easy-step{
    display:flex;
    align-items:center;
    gap:9px;
    width:max-content;
    max-width:100%;
    margin:0 auto 8px;
    padding:6px 11px;
    border-radius:999px;
    background:var(--node-soft,#f4f1e6);
    border:1px solid color-mix(in srgb,var(--node-color,#d4af37) 38%,#d8d0b7);
    color:var(--node-deep,var(--green-900,#0c3b2d));
    box-shadow:0 5px 14px rgba(0,0,0,.05);
  }
  .desktop-easy-step span{
    display:grid;place-items:center;min-width:34px;height:24px;padding:0 7px;border-radius:999px;
    background:var(--node-color,#d4af37);color:#fff;font-size:10px;font-weight:900
  }
  .desktop-easy-step b{font-size:10px;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .desktop-easy-main-card{
    position:relative;
    width:100%;
    min-width:0;
    border:2px solid color-mix(in srgb,var(--node-color,#d4af37) 50%,#d9cfb1);
    border-left:8px solid var(--node-color,#d4af37);
    border-radius:22px;
    padding:18px 18px 16px;
    background:
      radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--node-color,#d4af37) 13%,transparent),transparent 28%),
      linear-gradient(180deg,#fffefb,var(--node-soft,#f7f3e7));
    box-shadow:0 16px 34px rgba(7,49,37,.11);
    overflow:hidden;
  }
  .desktop-easy-main-card:before,
  .desktop-easy-main-card:after{
    content:"";position:absolute;width:42px;height:42px;border:2px solid rgba(212,175,55,.24);pointer-events:none
  }
  .desktop-easy-main-card:before{left:10px;top:10px;border-right:0;border-bottom:0;border-radius:16px 0 0 0}
  .desktop-easy-main-card:after{right:10px;bottom:10px;border-left:0;border-top:0;border-radius:0 0 16px 0}

  .desktop-easy-card-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-right:92px;margin-bottom:8px}
  .desktop-easy-route-chip,.desktop-easy-generation{
    display:inline-flex;align-items:center;min-height:27px;padding:5px 10px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.05em
  }
  .desktop-easy-route-chip{background:var(--node-color,#d4af37);color:#fff}
  .desktop-easy-generation{background:#fff;border:1px solid rgba(184,136,34,.25);color:#756532}

  .desktop-easy-origin{
    display:flex;align-items:center;gap:8px;width:calc(100% - 88px);margin:0 0 12px;padding:7px 10px;
    border-radius:10px;background:rgba(255,255,255,.78);border:1px solid rgba(184,136,34,.24);color:#5f675f;font-size:11px
  }
  .desktop-easy-origin i{width:10px;height:10px;border-radius:50%;background:var(--node-color,#d4af37);box-shadow:0 0 0 4px var(--node-soft,#f4f1e6);flex:0 0 10px}
  .desktop-easy-origin span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .desktop-easy-card-main{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:15px;align-items:center}
  .desktop-easy-photo{width:80px;height:88px;border-radius:16px 16px 24px 24px;object-fit:cover;border:3px solid rgba(212,175,55,.60);box-shadow:0 8px 18px rgba(0,0,0,.10)}
  .desktop-easy-placeholder{display:grid;place-items:center;background:#f3ead1;color:var(--green-900,#0c3b2d);font-size:30px;font-weight:900}
  .desktop-easy-copy{min-width:0}
  .desktop-easy-gender{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
  .desktop-easy-gender.male{background:#e9f7f8;color:#0e717c}
  .desktop-easy-gender.female{background:#fff0f5;color:#9f4267}
  .desktop-easy-gender.unspecified{background:#f1eee4;color:#6d6759}
  .desktop-easy-copy h3{margin:0;color:var(--node-deep,var(--green-900,#0c3b2d));font-family:var(--tree-name-font,Georgia,'Times New Roman',serif);font-size:clamp(24px,2.1vw,34px);line-height:1.08;overflow-wrap:anywhere}
  .desktop-easy-urdu{margin-top:6px;color:#8b6816;font-size:18px;line-height:1.8}
  .desktop-easy-after{margin-top:5px;color:#6c5d2e;font-size:12px;font-weight:800}
  .desktop-easy-after small{display:block;font-size:13px;margin-top:3px}
  .desktop-easy-relation{margin-top:8px;color:#59645f;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}
  .desktop-easy-relation small{display:block;margin-top:3px;font-size:13px;text-transform:none;letter-spacing:0;font-weight:600}
  .desktop-easy-seal{
    width:72px;height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
    background:linear-gradient(135deg,#f1df9d,var(--gold-500,#d4af37));color:#4a3706;box-shadow:0 8px 18px rgba(0,0,0,.12)
  }
  .desktop-easy-seal strong{max-width:58px;font-size:10px;line-height:1.05;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .desktop-easy-seal small{font-size:9px;font-weight:900;margin-top:4px}

  .desktop-easy-details{
    position:absolute!important;right:14px!important;bottom:12px!important;top:auto!important;z-index:20!important;
    border:1px solid rgba(184,136,34,.36)!important;border-radius:999px!important;padding:7px 11px!important;background:rgba(255,253,246,.96)!important;
    color:var(--green-900,#0c3b2d)!important;font-size:10px!important;font-weight:900!important;box-shadow:0 5px 12px rgba(0,0,0,.07)!important
  }
  .desktop-easy-extra{display:none;margin-top:14px;padding:13px 14px 38px;border-top:1px solid rgba(184,136,34,.22);font-size:12px}
  .desktop-easy-main-card.details-open .desktop-easy-extra{display:block}
  .desktop-easy-open{display:inline-flex;margin-top:9px;color:var(--node-deep,var(--green-900,#0c3b2d));font-weight:900;border-bottom:1px dashed currentColor}
  .desktop-easy-detail-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed #ded6c1}
  .desktop-easy-detail-row span{color:#81734d;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
  .desktop-easy-notes{margin-top:10px;line-height:1.6;color:#59645f}
  .desktop-easy-spouse{margin-top:8px}

  .desktop-easy-children-panel{
    position:relative;
    margin-top:38px;
    min-width:0;
    padding:16px;
    border-radius:20px;
    background:linear-gradient(180deg,#fffdf8,#f8f3e7);
    border:1px solid rgba(184,136,34,.28);
    box-shadow:0 12px 28px rgba(7,49,37,.07);
  }
  .desktop-easy-children-panel:before{
    content:"";position:absolute;left:-42px;top:46px;width:42px;border-top:3px solid var(--node-color,#d4af37)
  }
  .desktop-easy-children-panel:after{
    content:"";position:absolute;left:-47px;top:40px;width:12px;height:12px;border-radius:50%;background:var(--node-color,#d4af37);box-shadow:0 0 0 5px #fff,0 0 0 7px rgba(212,175,55,.42)
  }
  .desktop-easy-children-heading{display:flex;justify-content:space-between;gap:14px;align-items:end;margin-bottom:11px;padding-bottom:10px;border-bottom:1px solid #e9dec0}
  .desktop-easy-children-heading small{color:#81734d;font-size:10px;text-transform:uppercase;letter-spacing:.09em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .desktop-easy-children-heading strong{color:var(--green-900,#0c3b2d);font-size:13px;white-space:nowrap}
  .desktop-easy-child-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
  .desktop-easy-child-choice{
    display:grid;grid-template-columns:11px minmax(0,1fr) auto;gap:10px;align-items:center;min-width:0;
    padding:11px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--choice-color,#d4af37) 36%,#ddd3b8);
    background:#fff;color:#44514b;transition:transform .18s,box-shadow .18s,border-color .18s
  }
  .desktop-easy-child-choice:hover{transform:translateY(-2px);box-shadow:0 9px 18px rgba(0,0,0,.07);border-color:var(--choice-color,#d4af37)}
  .desktop-easy-child-choice>i{width:11px;height:42px;border-radius:999px;background:var(--choice-color,#d4af37)}
  .desktop-easy-child-choice div{min-width:0}
  .desktop-easy-child-choice small{display:block;color:#8a7a4e;font-size:8px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
  .desktop-easy-child-choice strong{display:block;color:#233d33;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .desktop-easy-child-choice span{display:block;color:#846c2a;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
  .desktop-easy-child-choice>b{max-width:96px;padding:5px 7px;border-radius:999px;background:color-mix(in srgb,var(--choice-color,#d4af37) 14%,#fff);color:color-mix(in srgb,var(--choice-color,#d4af37) 72%,#16372b);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .desktop-easy-child-choice.main-choice{grid-column:1/-1;border-width:2px;background:color-mix(in srgb,var(--choice-color,#d4af37) 8%,#fff)}
  .desktop-easy-child-choice.main-choice small{color:var(--choice-color,#d4af37);font-weight:900}
  .desktop-easy-child-choice.sibling-choice{opacity:.94}
  .desktop-easy-children-panel.route-end{min-height:136px;display:flex;flex-direction:column;justify-content:center}
  .desktop-easy-end-mark{display:grid;place-items:center;width:42px;height:42px;margin:6px auto 0;border-radius:50%;background:var(--node-color,#d4af37);color:#fff;box-shadow:0 0 0 7px #fff,0 0 0 9px rgba(212,175,55,.28)}

  .desktop-easy-golden-connector{
    position:relative;
    width:min(100%,1240px);
    height:64px;
    margin:0 auto;
  }
  .desktop-easy-golden-connector:before{
    content:"";position:absolute;left:calc(clamp(360px,var(--desktop-card-width,420px),620px) / 2);top:0;height:64px;border-left:4px solid var(--gold-500,#d4af37);transform:translateX(-50%)
  }
  .desktop-easy-golden-connector span,
  .desktop-easy-golden-connector i{position:absolute;left:calc(clamp(360px,var(--desktop-card-width,420px),620px) / 2);transform:translateX(-50%);border-radius:50%}
  .desktop-easy-golden-connector span{top:13px;width:13px;height:13px;background:#fff;border:4px solid var(--gold-500,#d4af37)}
  .desktop-easy-golden-connector i{bottom:0;width:14px;height:14px;background:var(--gold-500,#d4af37);box-shadow:0 0 0 5px #fff}

  body.desktop-easy-v28 #familyTreeWrap.view-details .desktop-easy-main-card .desktop-easy-extra{display:block}
  body.desktop-easy-v28 #familyTreeWrap.view-details .desktop-easy-details{display:none!important}

  body.desktop-easy-v28 .box-stretch-control{margin-left:auto}
  body.desktop-easy-v28 .box-stretch-control input{width:150px}
}

@media (min-width:1101px) and (max-width:1280px){
  .desktop-easy-generation-row{grid-template-columns:minmax(340px,430px) minmax(300px,1fr);gap:34px}
  .desktop-easy-golden-connector:before,.desktop-easy-golden-connector span,.desktop-easy-golden-connector i{left:215px}
  .desktop-easy-copy h3{font-size:25px}
  .desktop-easy-child-list{grid-template-columns:1fr}
}

@media print{
  .desktop-easy-route-help{display:none!important}
  .desktop-easy-main-card,.desktop-easy-children-panel{box-shadow:none!important;background:#fff!important}
}


/* ================================================================
   V29 — Desktop sibling text and instant same-panel route promotion.
   All selectors are desktop-only; mobile/tablet sibling reader unchanged.
   ================================================================ */
.desktop-only-admin-card{border-top:4px solid #d4af37}
@media (min-width:1101px){
  .desktop-easy-route-help{display:flex;align-items:center;justify-content:space-between;gap:18px;position:sticky;top:78px;z-index:72}
  .desktop-easy-route-help>div{min-width:0}
  .desktop-route-back{flex:0 0 auto;border:1px solid rgba(184,136,34,.38);border-radius:999px;padding:8px 12px;background:#fff;color:var(--green-900,#0c3b2d);font-size:10px;font-weight:900;cursor:pointer;box-shadow:0 5px 14px rgba(0,0,0,.06)}
  .desktop-route-back:hover{background:#f4e9c7}

  .desktop-easy-child-choice{font:inherit;text-align:left;cursor:pointer;position:relative;appearance:none;width:100%}
  .desktop-easy-child-choice.main-choice{cursor:default}
  .desktop-easy-child-choice.main-choice:hover{transform:none}
  .desktop-easy-choice-copy{min-width:0}
  .desktop-easy-child-choice>u{grid-column:2/-1;justify-self:start;text-decoration:none;margin-top:-3px;padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--choice-color,#d4af37) 11%,#fff);color:color-mix(in srgb,var(--choice-color,#d4af37) 78%,#12392b);font-size:9px;font-weight:900;letter-spacing:.04em}
  .desktop-easy-child-choice.sibling-choice:hover>u{background:var(--choice-color,#d4af37);color:#fff}
  .desktop-easy-choice-route{align-self:start;margin-top:20px}

  .desktop-sibling-text{display:block;max-width:100%;margin:6px 0;color:color-mix(in srgb,var(--choice-color,#d4af37) 68%,#273e34);line-height:1.25;overflow-wrap:anywhere}
  .desktop-sibling-text span,.desktop-sibling-text small{display:block;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;color:inherit!important;margin:0!important}
  .desktop-sibling-text small{margin-top:4px!important;line-height:1.65}
  .desktop-sibling-text.sibling-text-small{font-size:11px;font-weight:700}
  .desktop-sibling-text.sibling-text-normal{font-size:14px;font-weight:700}
  .desktop-sibling-text.sibling-text-h3{font-size:18px;font-weight:800;font-family:var(--tree-name-font,Georgia,'Times New Roman',serif)}
  .desktop-sibling-text.sibling-text-h2{font-size:23px;font-weight:850;font-family:var(--tree-name-font,Georgia,'Times New Roman',serif)}
  .desktop-sibling-text.sibling-text-h1{font-size:clamp(27px,2vw,34px);font-weight:900;font-family:var(--tree-name-font,Georgia,'Times New Roman',serif);line-height:1.08}
  .desktop-easy-child-choice em{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px;color:#69746e;font-size:10px;font-style:normal;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
  .desktop-easy-child-choice em b{font-size:12px;font-weight:700;text-transform:none;letter-spacing:0;color:#806b2d}

  .desktop-easy-route-view{position:relative;min-height:180px}
  .desktop-easy-route-view.desktop-route-is-loading:before{content:"Opening selected sibling route…";position:sticky;top:126px;z-index:120;display:block;width:max-content;max-width:90%;margin:0 auto -42px;padding:10px 16px;border-radius:999px;background:rgba(12,59,45,.94);color:#fff;font-size:11px;font-weight:900;box-shadow:0 10px 24px rgba(0,0,0,.18)}
  .desktop-easy-route-view.desktop-route-is-loading>.desktop-easy-route-ladder{opacity:.38;filter:blur(1px);pointer-events:none}
  .desktop-route-load-error{margin:10px auto;padding:10px 14px;max-width:520px;border-radius:12px;background:#ffe7e7;color:#922626;font-weight:800;text-align:center}

  .desktop-easy-child-choice.sibling-choice:after{content:"↗";position:absolute;right:10px;bottom:8px;color:var(--choice-color,#d4af37);font-size:15px;font-weight:900}
}
@media (max-width:1100px){
  .desktop-sibling-text,.desktop-route-back{display:none!important}
}


/* ================================================================
   V30 — Put the custom desktop sibling text in the exact name slot:
   below English name / before Urdu name, or above English name.
   Mobile and tablet remain unchanged.
   ================================================================ */
@media (min-width:1101px){
  .desktop-easy-child-choice{
    align-items:start;
    min-height:104px;
    padding:12px 13px 11px;
  }
  .desktop-easy-child-choice>i{
    height:58px;
    margin-top:2px;
  }
  .desktop-easy-choice-copy{
    display:flex;
    flex-direction:column;
    align-self:stretch;
    min-height:76px;
  }
  .desktop-easy-choice-copy>small:first-child{
    margin-bottom:4px;
  }
  .desktop-sibling-member-name{
    order:10;
    max-width:100%;
    font-size:15px!important;
    line-height:1.16;
  }
  .desktop-sibling-text{
    order:20;
    width:100%;
    min-height:18px;
    margin:4px 0 3px!important;
    padding:4px 7px;
    border-left:3px solid var(--choice-color,#d4af37);
    border-radius:5px;
    background:color-mix(in srgb,var(--choice-color,#d4af37) 7%,#fff);
  }
  /* Text configured as above is rendered before the name in HTML. */
  .desktop-easy-choice-copy>.desktop-sibling-text:first-of-type{
    order:5;
    margin:0 0 5px!important;
  }
  .desktop-sibling-urdu-name{
    order:30;
    margin-top:2px!important;
    line-height:1.55;
  }
  .desktop-easy-child-choice em{
    order:40;
  }
  .desktop-sibling-text span,
  .desktop-sibling-text small{
    display:block!important;
    max-width:100%;
    white-space:normal!important;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .desktop-sibling-text.sibling-text-small{font-size:10px}
  .desktop-sibling-text.sibling-text-normal{font-size:12px}
  .desktop-sibling-text.sibling-text-h3{font-size:16px}
  .desktop-sibling-text.sibling-text-h2{font-size:20px}
  .desktop-sibling-text.sibling-text-h1{font-size:clamp(23px,1.7vw,30px)}
  .desktop-easy-child-choice:has(.sibling-text-h1),
  .desktop-easy-child-choice:has(.sibling-text-h2){
    min-height:132px;
  }
  .desktop-easy-child-choice>b.desktop-easy-choice-route{
    margin-top:18px;
  }
}


/* V34: image blocks only. Existing V30 mobile tree remains unchanged. */
.tree-inline-image-block{
  width:min(100%,1180px);
  margin:14px auto 18px;
  padding:10px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,246,236,.96));
  border:1px solid rgba(212,175,55,.28);
  box-shadow:0 12px 28px rgba(9,33,26,.06);
  overflow:hidden;
}
.tree-inline-image-block img{
  display:block;
  width:100%;
  max-height:360px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(212,175,55,.2);
  background:#f7f1df;
}
.branch-family-panel .branch-inline-image{width:100%;max-width:none;margin:12px 0 16px}
@media(max-width:860px){
  .tree-inline-image-block{padding:7px;margin:10px auto 14px;border-radius:16px}
  .tree-inline-image-block img{max-height:240px;object-fit:contain;border-radius:12px}
}


/* V35 admin-only main-route colour controls */
.route-colour-admin-card em{
  display:block;
  margin-top:5px;
  color:#6d755f;
  font-size:11px;
  font-style:normal;
  font-weight:700;
}
.route-colour-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.route-colour-actions .btn{white-space:nowrap}

.login-logo-wrap{width:112px;height:112px;margin:0 auto 14px;padding:10px;border-radius:28px;background:linear-gradient(145deg,#fffdf7,#efe1b4);border:3px solid var(--gold-500);box-shadow:0 14px 30px rgba(4,45,34,.16);display:grid;place-items:center;overflow:hidden}.login-logo-wrap img{width:100%;height:100%;object-fit:contain;border-radius:18px}.share-shijra-btn,.install-app-btn{white-space:nowrap}@media(max-width:760px){.login-logo-wrap{width:94px;height:94px}.share-shijra-btn,.install-app-btn{padding:9px 11px;font-size:12px}}