@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600&family=Noto+Serif+Thai:wght@500;600&display=swap";:root{color:#27231c;--bg:#f6f3ec;--surface:#fff;--warm:#fbf8f2;--text:#27231c;--muted:#756f65;--line:#ddd4c4;--green:#315c4a;--green2:#244538;--soft:#e3eee8;--gold:#b7853d;--shadow:0 16px 42px #43341a1c;background:#f6f3ec;font-family:Noto Sans Thai,system-ui,sans-serif}*{box-sizing:border-box}body{background:var(--bg);min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button{cursor:pointer}.shell{min-height:100vh}.topbar{z-index:30;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fffffff0;align-items:center;gap:18px;min-height:72px;padding:10px 24px;display:flex;position:sticky;top:0}.brand{min-width:198px;color:var(--text);align-items:center;gap:11px;text-decoration:none;display:flex}.brand>b{color:#fff;background:var(--green);border-radius:50%;place-items:center;width:40px;height:40px;font:600 20px Noto Serif Thai;display:grid}.brand strong,.brand small{display:block}.brand strong{font:600 17px Noto Serif Thai}.brand small{color:var(--muted);font-size:10px}.search{flex:1;max-width:500px;margin-left:auto;position:relative}.search label{min-height:42px;color:var(--muted);background:var(--warm);border:1px solid #0000;border-radius:12px;align-items:center;gap:9px;padding:0 14px;display:flex}.search label:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--soft)}.search input{width:100%;color:var(--text);background:0 0;border:0;outline:0;padding:8px 0}.results{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:13px;padding:6px;position:absolute;top:calc(100% + 8px);left:0;right:0}.results button{text-align:left;background:0 0;border:0;border-radius:9px;align-items:center;gap:9px;width:100%;padding:9px;display:flex}.results button:hover{background:var(--soft)}.results strong,.results small{display:block}.results small{color:var(--muted)}.btn{border:0;border-radius:10px;min-height:40px;padding:9px 16px;font-weight:600}.primary{color:#fff;background:var(--green)}.primary:hover{background:var(--green2)}.secondary{color:var(--green);background:var(--soft)}.full{width:100%}.small{min-height:34px;padding:7px 11px;font-size:12px}.profile{color:#fff;background:var(--gold);border:0;border-radius:50%;place-items:center;width:40px;height:40px;display:grid}.layout{grid-template-columns:190px minmax(0,1fr) 260px;min-height:calc(100vh - 72px);display:grid}.sidebar{background:var(--surface);border-right:1px solid var(--line);padding:24px 13px}.sidebar nav{position:sticky;top:96px}.sidebar button{width:100%;min-height:44px;color:var(--muted);text-align:left;background:0 0;border:0;border-radius:11px;align-items:center;gap:11px;margin-bottom:5px;padding:9px 12px;display:flex}.sidebar button span{text-align:center;width:22px;font-size:18px}.sidebar button:hover,.sidebar button.active{color:var(--green);background:var(--soft)}main{min-width:0;padding:28px}.heading{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px;display:flex}.heading h1{margin:2px 0 1px;font:600 clamp(26px,3vw,38px) Noto Serif Thai}.heading p{color:var(--muted);margin:0;font-size:13px}.heading .eyebrow{color:var(--gold);letter-spacing:.08em;font-size:11px;font-weight:600}.toolbar{align-items:center;gap:7px;margin-bottom:12px;display:flex}.toolbar>span{flex:1}.chip{min-height:34px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:6px 11px;font-size:12px}.chip:hover,.chip.active{color:var(--green);background:var(--soft);border-color:var(--green)}.tree{background-color:var(--surface);background-image:radial-gradient(var(--line) .8px,transparent .8px);border:1px solid var(--line);background-size:20px 20px;border-radius:17px;min-height:520px;padding:25px 22px;overflow:auto;box-shadow:0 8px 30px #43341a0f}.tree-row{z-index:2;justify-content:center;gap:20px;display:flex;position:relative}.person{width:156px;min-height:74px;color:var(--text);text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:13px;grid-template-columns:42px 1fr;align-items:center;gap:10px;padding:10px;display:grid;box-shadow:0 6px 15px #43341a1a}.person.selected{background:var(--soft);border:2px solid var(--green)}.person strong,.person small{display:block}.person strong{font-size:12px}.person small{color:var(--muted);margin-top:3px;font-size:10px}.avatar{color:#fff;border-radius:50%;flex:none;place-items:center;width:42px;height:42px;font-size:12px;font-weight:600;display:grid}.avatar.green{background:var(--green)}.avatar.gold{background:var(--gold)}.avatar.large{width:82px;height:82px;font:600 24px Noto Serif Thai}.down{background:var(--line);width:1px;height:32px;margin:auto;display:block}.across{background:var(--line);width:min(360px,60%);height:1px;margin:0 auto 32px;display:block}.across.short{width:min(250px,44%)}.details{background:var(--surface);border-left:1px solid var(--line);padding:28px 20px}.identity{text-align:center}.identity .avatar{margin:0 auto 13px}.identity h2{margin:0;font:600 18px Noto Serif Thai}.identity em,.profile-modal em{color:var(--green);background:var(--soft);border-radius:999px;margin-top:8px;padding:5px 10px;font-size:10px;font-style:normal;font-weight:600;display:inline-block}.facts{border-top:1px solid var(--line);margin:24px 0 18px}.facts div{border-bottom:1px solid var(--line);padding:12px 0}.facts dt{color:var(--muted);font-size:10px}.facts dd{margin:3px 0 0;font-size:12px}.placeholder{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:17px;place-items:center;min-height:420px;padding:40px;display:grid}.placeholder>b{width:70px;height:70px;color:var(--green);background:var(--soft);border-radius:50%;place-items:center;font-size:30px;display:grid}.placeholder h2{margin:14px 0 2px;font-family:Noto Serif Thai}.placeholder p{color:var(--muted);margin:0 0 18px}.mobile-summary,.mobile-nav{display:none}.backdrop{z-index:100;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#1b19148c;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.modal{background:var(--surface);width:min(440px,100%);box-shadow:var(--shadow);border-radius:18px;padding:22px}.modal header{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.modal h2{margin:0;font:600 21px Noto Serif Thai}.modal header button{width:38px;height:38px;color:var(--muted);background:var(--warm);border:0;border-radius:50%;place-items:center;font-size:22px;display:grid}.form{gap:14px;display:grid}.form label{color:var(--muted);gap:6px;font-size:12px;display:grid}.form input,.form select{background:var(--warm);border:1px solid var(--line);border-radius:10px;min-height:44px;padding:9px 11px}.form p{color:var(--muted);margin:0;font-size:11px}.invite-card,.profile-modal{text-align:center}.invite-card p{color:var(--muted);font-size:13px}.qr{width:130px;height:130px;color:var(--green);background:repeating-linear-gradient(45deg,var(--soft),var(--soft) 6px,#fff 6px,#fff 12px);border:1px solid var(--line);border-radius:15px;place-items:center;margin:0 auto 16px;font-size:20px;font-weight:600;display:grid}.profile-modal .avatar{margin:0 auto 12px}.profile-modal h3{margin:0;font:600 22px Noto Serif Thai}.profile-modal .facts{text-align:left}@media (width<=1100px){.layout{grid-template-columns:76px minmax(0,1fr) 230px}.sidebar button{justify-content:center;font-size:0}.sidebar button span{width:auto;font-size:19px}.brand{min-width:auto}.brand>span{display:none}}@media (width<=820px){body{padding-bottom:70px}.topbar{gap:10px;min-height:62px;padding:9px 13px}.brand>b{width:36px;height:36px}.invite{display:none}.search{max-width:none}.search label{justify-content:center;width:42px;min-height:40px;margin-left:auto;padding:0}.search input{width:0}.search label:focus-within{background:#fff;width:min(330px,100vw - 76px);padding:0 12px;position:absolute;right:0}.search label:focus-within input{width:100%}.results{position:fixed;top:62px;left:10px;right:10px}.layout{display:block}.sidebar,.details{display:none}main{padding:18px 12px}.heading{align-items:center;margin-bottom:14px}.heading h1{font-size:25px}.heading p:not(.eyebrow){font-size:11px}.heading .add{width:42px;min-height:42px;padding:0;font-size:0}.heading .add:first-letter{font-size:22px}.toolbar{overflow:auto}.toolbar>span,.zoom{display:none}.tree{min-height:0;padding:18px 8px}.tree-row{gap:8px}.person{grid-template-columns:36px 1fr;width:min(46%,142px);min-height:65px;padding:8px}.avatar{width:36px;height:36px}.person strong{font-size:11px}.down{height:22px}.across{margin-bottom:22px}.mobile-summary{background:var(--soft);border-radius:14px;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;margin-top:12px;padding:12px;display:grid}.mobile-summary .avatar{width:44px;height:44px}.mobile-summary strong,.mobile-summary small{display:block}.mobile-summary strong{font-size:12px}.mobile-summary small{color:var(--muted);font-size:10px}.mobile-nav{z-index:40;border-top:1px solid var(--line);background:#fffffff5;grid-template-columns:repeat(4,1fr);min-height:66px;padding:7px 6px;display:grid;position:fixed;bottom:0;left:0;right:0}.mobile-nav button{color:var(--muted);background:0 0;border:0;place-items:center;display:grid}.mobile-nav button span{font-size:20px}.mobile-nav button small{font-size:9px}.mobile-nav button.active{color:var(--green)}}@media (width<=420px){.heading .eyebrow{display:none}.tree-row{gap:6px}.person{grid-template-columns:34px 1fr;width:48%;padding:7px}.avatar{width:34px;height:34px}.person strong{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}}.auth-page{place-items:center;min-height:100vh;display:grid}.auth-card{border:1px solid var(--line);background:#fff;border-radius:20px;width:min(440px,100%);padding:28px}.auth-card h1{font-family:Noto Serif Thai}.auth-card>p{color:var(--muted);font-size:13px}.workspace{max-width:1400px;margin:auto}.account-email{overflow-wrap:anywhere;margin-left:auto;font-size:12px}.family-grid{grid-template-columns:280px minmax(0,1fr);gap:20px;display:grid}.members-panel,.person-panel{border:1px solid var(--line);background:#fff;border-radius:16px;padding:20px}.member-card{border:1px solid var(--line);background:var(--warm);text-align:left;width:100%;color:var(--text);border-radius:12px;align-items:center;gap:12px;margin:6px 0;padding:12px;display:flex}.member-card.selected{border-color:var(--green);background:var(--soft)}.member-card strong,.member-card small{overflow-wrap:anywhere;display:block}.member-card small{color:var(--muted)}.relation-groups{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.relation-groups section{background:var(--warm);border-radius:12px;padding:12px}.relation-groups h3{margin-top:0}.relative{text-align:left;border:1px solid var(--line);overflow-wrap:anywhere;background:#fff;border-radius:8px;width:100%;margin:6px 0;padding:10px;display:block}.relation-groups p{color:var(--muted);font-size:12px}.alert{color:#8f2424;overflow-wrap:anywhere;background:#fff0ef;border-radius:9px;padding:12px}.success{color:var(--green);background:var(--soft);border-radius:9px;padding:12px}.toolbar input{border:1px solid var(--line);border-radius:10px;flex:1;min-width:0;padding:10px}.modal{max-height:90vh;overflow:auto}.form textarea{font:inherit;border:1px solid var(--line);background:var(--warm);resize:vertical;border-radius:10px;padding:10px}.facts dd{white-space:pre-wrap;overflow-wrap:anywhere}.relation-line{justify-content:space-between;align-items:center;gap:12px;padding:10px 0;display:flex}.danger{color:#8f2424;background:#fff0ef;margin-top:24px}button:disabled{opacity:.55;cursor:wait}details{margin-top:20px}summary{cursor:pointer}.person-panel h2{overflow-wrap:anywhere;font-size:20px}@media (width<=820px){body{padding-bottom:0}.family-grid{grid-template-columns:1fr}.members-panel{max-height:280px;overflow:auto}.relation-groups{grid-template-columns:1fr}.account-email{max-width:45%;font-size:10px}.auth-page{padding:16px}.workspace .heading{flex-wrap:wrap}.person-panel{padding:15px}.relation-line{align-items:flex-start}.auth-page h1{font-size:26px}}.otp-actions{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}.auth-card input[name=token]{letter-spacing:.18em;text-align:center;font-size:24px}