*{box-sizing:border-box}body{margin:0;background:#f5f8f5;color:#26382f;font-family:system-ui,Arial}header{position:sticky;top:0;z-index:5;background:white;border-bottom:1px solid #dde7df;padding:16px 5%;display:flex;justify-content:space-between;gap:15px;align-items:center}nav{display:flex;gap:6px;overflow:auto}button{border:0;border-radius:9px;padding:10px 14px;cursor:pointer;background:#eaf2ed;color:#245d43}header button{background:transparent}.page{display:none;padding:35px 5%;max-width:1450px;margin:auto}.page.on{display:block}.hero{padding:70px 8%;border:1px solid #d9e8dd;border-radius:28px;background:linear-gradient(135deg,#e6f2ea,#fff)}.hero h1{font-size:clamp(38px,7vw,72px);margin:12px 0;color:#193c2c}.hero h3{font-weight:500}.hero p{max-width:650px;line-height:1.7;color:#69776f}.hero button,.login button,.relbox button,.head button{background:#216b4c;color:white}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:20px}.stat{background:#fff;padding:22px;border:1px solid #dce7df;border-radius:16px}.stat b{font-size:30px;color:#216b4c;display:block}.toolbar,.relbox,.head{display:flex;gap:10px;align-items:center;margin-bottom:15px}.toolbar input,.relbox select,.login input{padding:11px;border:1px solid #d4e0d8;border-radius:9px}.treebox{height:68vh;overflow:auto;background:#fff;border:1px solid #dce6df;border-radius:18px;padding:40px}.tree{display:flex;flex-direction:column;align-items:center;gap:30px;min-width:1000px}.row{display:flex;gap:22px;justify-content:center}.family{display:flex;flex-direction:column;align-items:center}.couple{display:flex}.member{width:150px;min-height:105px;background:white;border:1px solid #d2e1d7;border-radius:13px;padding:12px;text-align:center;box-shadow:0 4px 15px #23402c10;cursor:pointer}.member:hover{border-color:#4f9270}.avatar{width:42px;height:42px;border-radius:50%;margin:auto;background:#e5f0e8;display:grid;place-items:center;font-weight:800;color:#347154}.children{display:flex;gap:12px;margin-top:25px}.login{max-width:400px;margin:40px auto;background:white;padding:30px;border-radius:18px;border:1px solid #dce6df}.login input{display:block;width:100%;margin:10px 0}.modal{position:fixed;inset:0;background:#17352788;display:grid;place-items:center;padding:20px;z-index:10}.card{background:white;max-width:650px;width:100%;max-height:90vh;overflow:auto;padding:30px;border-radius:18px;position:relative}.x{position:absolute;right:12px;top:12px;border-radius:50%}.profile{display:grid;grid-template-columns:100px 1fr;gap:20px}.profile img{width:100px;height:100px;object-fit:cover;border-radius:18px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grid div{background:#f5f8f5;padding:12px;border-radius:9px}.hide{display:none!important}table{width:100%;border-collapse:collapse;background:white}td,th{padding:11px;border-bottom:1px solid #edf1ee;text-align:left}@media(max-width:700px){header{flex-direction:column;align-items:flex-start}.stats{grid-template-columns:1fr}.toolbar,.relbox,.head{flex-wrap:wrap}.toolbar input,.relbox select{flex:1}.grid{grid-template-columns:1fr}.treebox{height:65vh;padding:25px}.hero{padding:45px 7%}}