:root{--primary-color:#6366f1;--primary-hover:#4f46e5;--bg-color:#0f172a;--text-main:#f8fafc;--text-muted:#94a3b8;--card-bg:#1e293bb3;--card-border:#ffffff1a;--line-color:#3b82f6;--danger-color:#ef4444;--danger-hover:#dc2626}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-color);color:var(--text-main);background-image:radial-gradient(circle at 15%,#6366f126,#0000 25%),radial-gradient(circle at 85% 30%,#3b82f626,#0000 25%);min-height:100vh;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;overflow-x:auto}.app-container{flex-direction:column;align-items:center;max-width:100vw;margin:0 auto;padding:2rem;display:flex}.header{text-align:center;flex-direction:column;align-items:center;margin-bottom:1rem;animation:.8s ease-out fadeInDown;display:flex}.header h1{background:linear-gradient(135deg,#a855f7,#3b82f6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.25rem;font-size:2rem;font-weight:800}.header p{color:var(--text-muted);max-width:600px;margin-bottom:.5rem;font-size:.9rem}@media (width<=768px){.header h1{font-size:1.5rem}.header p{font-size:.8rem}.app-container{padding:1rem .5rem}.admin-toggle{align-self:center;margin-bottom:1rem;position:relative;top:0;right:0}}button{cursor:pointer;border:none;border-radius:8px;font-family:inherit;font-weight:600;transition:all .3s}.btn-primary{background:var(--primary-color);color:#fff;padding:.75rem 1.5rem;box-shadow:0 4px 14px #6366f163}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 6px 20px #6366f166}.btn-secondary{color:var(--text-muted);border:1px solid var(--card-border);background:0 0;padding:.75rem 1.5rem}.btn-secondary:hover{color:#fff;background:#ffffff0d}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#0f172acc;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:fixed;inset:0}.modal{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;width:90%;max-width:400px;padding:2rem;animation:.4s cubic-bezier(.16,1,.3,1) slideUp;box-shadow:0 25px 50px -12px #00000080}.modal h2{margin-bottom:1.5rem;font-size:1.5rem}.form-group{flex-direction:column;margin-bottom:1.25rem;display:flex}.form-group label{color:var(--text-muted);margin-bottom:.5rem;font-size:.875rem}.form-group input{border:1px solid var(--card-border);color:#fff;background:#0003;border-radius:8px;padding:.75rem;font-size:1rem;transition:border-color .3s}.form-group input:focus{border-color:var(--primary-color);outline:none}.form-group small{color:var(--text-muted);margin-top:.25rem;font-size:.75rem}.modal-actions{justify-content:flex-end;gap:1rem;margin-top:2rem;display:flex}.tree-container{justify-content:center;width:100%;padding:2rem;display:flex;overflow-x:auto}.tf-tree{text-align:center;font-size:16px}.tf-tree ul{justify-content:center;padding-top:20px;list-style:none;transition:all .5s;display:flex;position:relative}.tf-tree li{float:left;text-align:center;padding:20px 5px 0;list-style-type:none;transition:all .5s;position:relative}.tf-tree li:before,.tf-tree li:after{content:"";border-top:2px solid var(--line-color);width:50%;height:20px;position:absolute;top:0;right:50%}.tf-tree li:after{border-left:2px solid var(--line-color);left:50%;right:auto}.tf-tree li:only-child:after,.tf-tree li:only-child:before{display:none}.tf-tree li:only-child{padding-top:0}.tf-tree li:first-child:before,.tf-tree li:last-child:after{border:0}.tf-tree li:last-child:before{border-right:2px solid var(--line-color);border-radius:0 5px 0 0}.tf-tree li:first-child:after{border-radius:5px 0 0}.tf-tree ul ul:before{content:"";border-left:2px solid var(--line-color);width:0;height:20px;position:absolute;top:0;left:50%}.tf-nc{background:var(--card-bg);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;flex-direction:row;justify-content:center;align-items:center;gap:1.5rem;min-width:150px;padding:1rem;transition:all .3s cubic-bezier(.25,.8,.25,1);animation:.5s cubic-bezier(.175,.885,.32,1.275) popIn;display:inline-flex;position:relative;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.tf-nc:hover{border-color:var(--primary-color);transform:translateY(-5px)scale(1.02);box-shadow:0 20px 25px -5px #0003,0 10px 10px -5px #0000001a}.person{flex-direction:column;justify-content:center;align-items:center;min-width:100px;display:flex}.couple-divider{color:#ec4899;font-size:1.2rem;animation:2s infinite pulse}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.node-photo,.node-photo-placeholder{object-fit:cover;border:2px solid var(--primary-color);border-radius:50%;width:60px;height:60px;margin-bottom:.75rem;box-shadow:0 0 10px #6366f180}.spouse .node-photo,.spouse .node-photo-placeholder{border-color:#ec4899;box-shadow:0 0 10px #ec489980}.node-photo-placeholder{color:#fff;background:linear-gradient(135deg,#3b82f6,#a855f7);justify-content:center;align-items:center;font-size:1.5rem;font-weight:700;display:flex}.spouse .node-photo-placeholder{background:linear-gradient(135deg,#ec4899,#f43f5e)}.node-name{color:var(--text-main);text-align:center;margin-bottom:.25rem;font-size:1.1rem;font-weight:700}.node-address{color:var(--text-muted);text-align:center;margin-bottom:.5rem;font-size:.8rem}.node-actions{opacity:0;justify-content:center;gap:.5rem;width:100%;transition:opacity .3s,bottom .3s;display:flex;position:absolute;bottom:-15px}.tf-nc:hover .node-actions{opacity:1;bottom:-20px}.admin-toggle{z-index:100;position:absolute;top:1.5rem;right:1.5rem}.btn-edit{color:#fff;background:#f59e0b}.btn-edit:hover{background:#d97706;transform:scale(1.1)}.btn-add,.btn-delete,.btn-edit{border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:1.2rem;font-weight:700;display:flex;box-shadow:0 4px 6px #0000004d}.btn-add{background:var(--primary-color);color:#fff}.btn-add:hover{background:var(--primary-hover);transform:scale(1.1)}.btn-delete{background:var(--danger-color);color:#fff}.btn-delete:hover{background:var(--danger-hover);transform:scale(1.1)}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes popIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.zoom-controls{z-index:100;background:var(--card-bg);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:8px;gap:.5rem;padding:.5rem;display:flex;position:fixed;bottom:2rem;right:2rem;box-shadow:0 10px 15px -3px #00000080}.zoom-controls button{background:var(--primary-color);color:#fff;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.2rem;font-weight:700;display:flex}.zoom-controls button[title=Reset]{width:auto;padding:0 1rem;font-size:1rem}.zoom-controls button:hover{background:var(--primary-hover);transform:scale(1.05)}.tree-wrapper{cursor:grab;background:#0003;border:1px solid #ffffff0d;border-radius:12px;width:100%;min-height:60vh}.tree-wrapper:active{cursor:grabbing}.tf-tree li:hover>ul:before,.tf-tree li:hover>ul>li:before,.tf-tree li:hover>ul>li:after{filter:drop-shadow(0 0 6px #38bdf8);z-index:5;border-color:#38bdf8!important}.node-actions button,.admin-toggle button,.zoom-controls button{cursor:pointer!important}.tf-nc{cursor:default}.official-banner{color:#c084fc;text-transform:uppercase;letter-spacing:1px;background:#a855f726;border:1px solid #a855f74d;border-radius:20px;margin-bottom:.5rem;padding:.25rem .75rem;font-size:.75rem;font-weight:700;display:inline-block;box-shadow:0 4px 6px #0000001a}.hadith-container{background:var(--card-bg);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;max-width:800px;margin:.5rem auto;padding:.75rem 1.5rem;box-shadow:0 10px 15px -3px #0000004d}.arabic{color:#f8fafc;text-align:center;text-shadow:0 2px 4px #00000080;margin-bottom:.5rem;font-family:Amiri,serif;font-size:1.4rem;line-height:2.2rem}.translation{color:var(--text-muted);font-size:.8rem;font-style:italic;line-height:1.4}@media (width<=768px){.official-banner{letter-spacing:.5px;padding:.25rem .5rem;font-size:.6rem}.hadith-container{margin:.5rem 0;padding:1rem}.arabic{font-size:1.1rem;line-height:1.8rem}.translation{font-size:.7rem}.zoom-controls{transform-origin:100% 100%;bottom:1rem;right:1rem;transform:scale(.8)}.tf-nc{gap:.5rem;min-width:100px;padding:.5rem}.node-photo,.node-photo-placeholder{width:40px;height:40px;font-size:1rem}.node-name{font-size:.9rem}}