:root{--ink:#211b38;--muted:#756f89;--cream:#fffaf4;--violet:#7657ff;--violet2:#9c7fff;--peach:#ff9a7a;--mint:#72d7c0;--yellow:#ffd66b;--glass:rgba(255,255,255,.72);--line:rgba(52,38,93,.11);--shadow:0 22px 70px rgba(56,37,104,.16);font-family:Inter,ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;color:var(--ink);background:#f8f4ff}
*{box-sizing:border-box}[hidden]{display:none!important}html{min-height:100%;background:#f8f4ff}body{margin:0;min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at 5% 10%,#fff4df 0,transparent 33%),radial-gradient(circle at 95% 0,#e8ddff 0,transparent 40%),linear-gradient(145deg,#fffdfb,#f4f0ff 52%,#fff8f2)}button,input{font:inherit}.ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-2}.orb{position:absolute;border-radius:50%;filter:blur(16px);opacity:.58;animation:drift 14s ease-in-out infinite alternate}.orb-a{width:310px;height:310px;background:#ffd1be;left:-120px;top:15%}.orb-b{width:440px;height:440px;background:#cdbdff;right:-190px;top:-100px;animation-delay:-5s}.orb-c{width:260px;height:260px;background:#bff2e4;left:45%;bottom:-130px;animation-delay:-9s}.grain{position:absolute;inset:0;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E")}.glass{background:var(--glass);border:1px solid rgba(255,255,255,.72);box-shadow:var(--shadow);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}@keyframes drift{to{transform:translate3d(45px,-30px,0) scale(1.14)}}@keyframes pulse{50%{transform:scale(1.08);opacity:.75}}@keyframes orbit{to{transform:rotate(360deg)}}
.offline-banner{position:fixed;z-index:30;top:12px;left:50%;transform:translateX(-50%);padding:10px 16px;border-radius:999px;background:#302746;color:#fff;font-size:13px;box-shadow:0 12px 28px rgba(0,0,0,.2)}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--yellow);margin-right:7px}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:28px}.auth-card{width:min(560px,100%);padding:38px;border-radius:34px;position:relative;overflow:hidden}.auth-card:after{content:"";position:absolute;width:210px;height:210px;border-radius:46% 54% 63% 37%;background:linear-gradient(135deg,#ae91ff66,#ffb39e55);right:-86px;top:-78px;animation:orbit 18s linear infinite}.brand-lockup{display:flex;align-items:center;gap:12px;position:relative;z-index:1}.brand-lockup strong{display:block;font-size:21px}.brand-lockup small{display:block;color:var(--muted);font-size:12px;margin-top:2px}.brand-mark{width:48px;height:48px;border-radius:17px;background:linear-gradient(145deg,var(--violet),#a783ff);display:grid;place-items:center;color:white;box-shadow:0 12px 25px #7657ff55;position:relative;overflow:hidden}.brand-mark span{font-weight:900;font-size:24px}.brand-mark i{position:absolute;width:18px;height:18px;border:3px solid #ffd6c8;border-left-color:transparent;border-radius:50%;right:-4px;top:-3px}.auth-card h1{font-size:clamp(34px,7vw,54px);line-height:1.02;letter-spacing:-.045em;margin:42px 0 16px}.auth-card h1 em,.hero h1 em{font-style:normal;color:var(--violet)}.auth-card>p{color:var(--muted);line-height:1.65}.auth-card form{display:grid;gap:13px;margin-top:28px}.auth-card label{font-size:12px;font-weight:800;color:#504968;letter-spacing:.03em}.auth-card input{width:100%;margin-top:7px;padding:15px 16px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.8);outline:none}.auth-card input:focus{border-color:#8f72ff;box-shadow:0 0 0 4px #8f72ff18}.auth-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}.btn{border:0;border-radius:15px;padding:13px 17px;font-weight:800;cursor:pointer;transition:.25s transform,.25s box-shadow,.25s background}.btn:hover{transform:translateY(-2px)}.btn.primary{color:white;background:linear-gradient(135deg,var(--violet),#9878ff);box-shadow:0 12px 26px #7657ff45}.btn.soft{background:#eee8ff;color:#6045cf}.btn.ghost{background:rgba(255,255,255,.65);border:1px solid var(--line);color:var(--ink)}.btn.full{width:100%}.demo-link,.text-btn{border:0;background:none;color:#654be0;font-weight:800;cursor:pointer}.demo-link{width:100%;margin-top:18px}.privacy-note{font-size:11px!important;text-align:center;margin-top:18px!important}
.app-shell{width:min(1240px,100%);margin:auto;padding:22px 28px 110px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px}.brand-lockup.compact .brand-mark{width:43px;height:43px;border-radius:15px}.top-actions{display:flex;gap:10px}.icon-btn,.avatar{border:1px solid rgba(255,255,255,.72);background:rgba(255,255,255,.7);box-shadow:0 10px 24px rgba(54,38,100,.1);cursor:pointer}.icon-btn{width:43px;height:43px;border-radius:14px;position:relative;font-size:21px}.icon-btn b{position:absolute;right:-4px;top:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--peach);color:white;font-size:10px;display:grid;place-items:center}.avatar{width:43px;height:43px;border-radius:50%;font-weight:900;color:#fff;background:linear-gradient(145deg,#ff9d7b,#ff7d9e)}
.hero{min-height:350px;border-radius:36px;padding:46px;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;overflow:hidden;position:relative}.hero:before{content:"";position:absolute;inset:auto -80px -150px auto;width:430px;height:430px;border-radius:44% 56% 61% 39%;background:linear-gradient(145deg,#b5a0ff88,#ffd1bf66);animation:orbit 26s linear infinite}.hero-copy{position:relative;z-index:2;max-width:690px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:10px;font-weight:900;color:#776e90}.hero h1{font-size:clamp(42px,6vw,72px);line-height:.98;letter-spacing:-.055em;margin:13px 0 17px}.hero p{color:var(--muted);font-size:16px;line-height:1.6;max-width:610px}.hero-actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}.family-orbit{width:280px;height:280px;position:relative;margin:auto;z-index:2}.orbit-ring{position:absolute;border:1px dashed #8973da55;border-radius:50%;inset:30px;animation:orbit 24s linear infinite}.ring-two{inset:72px;animation-direction:reverse;animation-duration:16s}.member{position:absolute;width:58px;height:58px;border-radius:50%;border:5px solid rgba(255,255,255,.8);box-shadow:0 12px 24px rgba(65,42,104,.18);color:#fff;font-weight:900;background:linear-gradient(145deg,#ff9e7d,#ff7ea2)}.member.center{width:78px;height:78px;left:101px;top:101px;background:linear-gradient(145deg,#7b5cff,#a98aff)}.m1{left:3px;top:37px;background:linear-gradient(145deg,#65cbb8,#87e5cb)}.m2{right:0;top:58px}.m3{left:15px;bottom:23px;background:linear-gradient(145deg,#ffc75e,#ff9d6d)}.m4{right:20px;bottom:4px;background:linear-gradient(145deg,#75a7ff,#8b78ff)}.orbit-heart{position:absolute;left:132px;top:54px;color:#ff788d;font-size:24px;animation:pulse 1.8s ease-in-out infinite}.section-head{display:flex;align-items:end;justify-content:space-between;margin:43px 4px 17px}.section-head h2,.smart-panel h2{margin:4px 0 0;font-size:28px;letter-spacing:-.035em}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.feature-card{min-height:250px;padding:25px;border-radius:27px;position:relative;overflow:hidden;cursor:pointer;transition:.3s transform,.3s box-shadow;border:1px solid rgba(255,255,255,.78);box-shadow:0 16px 40px rgba(64,44,106,.1)}.feature-card:hover{transform:translateY(-6px) rotateX(1deg);box-shadow:0 25px 55px rgba(64,44,106,.16)}.feature-card:after{content:"";position:absolute;width:150px;height:150px;border-radius:42% 58% 70% 30%;right:-65px;bottom:-67px;background:#ffffff66}.feature-event{background:linear-gradient(145deg,#f0eaff,#e5daff)}.feature-meal{background:linear-gradient(145deg,#fff0df,#ffe0ca)}.feature-memory{background:linear-gradient(145deg,#e2f7f1,#c9eee4)}.feature-tree{background:linear-gradient(145deg,#fff4d6,#ffe5a4)}.feature-talk{background:linear-gradient(145deg,#e3edff,#cfddff)}.feature-together{background:linear-gradient(145deg,#ffe5ea,#ffd1df)}.feature-icon{font-size:30px;font-weight:900}.feature-card h3{font-size:23px;letter-spacing:-.03em;margin:23px 0 9px}.feature-card p{color:#665f7b;line-height:1.5;font-size:14px;max-width:320px}.badge{position:absolute;right:18px;top:18px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.7);font-size:10px;font-weight:900;color:#6d6188}.badge.live:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#31c695;margin-right:5px}.mini-row{display:flex;justify-content:space-between;font-size:12px;margin-top:26px}.faces{display:flex;align-items:center;margin-top:22px}.faces i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid #ffd9c2;font-size:9px;font-style:normal;font-weight:900;margin-right:-6px}.faces span{font-size:11px;margin-left:15px}.memory-strip{display:flex;gap:7px;margin-top:20px}.memory-strip span{width:48px;height:38px;border-radius:11px;background:linear-gradient(145deg,#77cfb9,#b9f0df)}.branch-mini{display:flex;align-items:end;justify-content:center;height:55px;gap:15px;margin-top:13px;border-bottom:2px solid #ba913d55}.branch-mini i{display:block;width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid #ffd27a;position:relative}.ptt-mini{margin-top:16px;border:0;border-radius:13px;padding:10px 14px;background:#fff;color:#536cc3;font-weight:900}.progress{height:9px;border-radius:99px;background:#ffffff99;margin-top:25px;overflow:hidden}.progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff7798,#a85fff)}.smart-panel{margin-top:18px;border-radius:28px;padding:25px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center}.spark{width:65px;height:65px;border-radius:22px;display:grid;place-items:center;font-size:29px;background:linear-gradient(145deg,#7559ff,#ff83a7);color:#fff;box-shadow:0 15px 35px #835fff44}.smart-panel p{margin:7px 0 0;color:var(--muted);font-size:13px}.bottom-nav{display:none}.module-view{margin-top:22px}.module-shell{border-radius:30px;padding:28px;background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow)}.module-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.tree-canvas{min-height:470px;border-radius:24px;background:radial-gradient(circle at 50% 45%,#fff 0,#fbf8ff 65%);overflow:auto;padding:18px}.tree-canvas svg{min-width:850px;width:100%;height:450px}.tree-link{fill:none;stroke:#b9a6e5;stroke-width:3}.tree-node rect{fill:#fff;stroke:#eadfff;stroke-width:2;filter:drop-shadow(0 10px 14px rgba(77,50,124,.12))}.tree-node circle{stroke:#fff;stroke-width:5}.tree-node text.name{font-weight:900;fill:#302944}.tree-node text.role{font-size:10px;fill:#817891}.module-list{display:grid;gap:11px}.list-card{display:flex;justify-content:space-between;align-items:center;padding:16px;border-radius:18px;background:#fff;border:1px solid var(--line)}.list-card small{display:block;color:var(--muted);margin-top:4px}.map-mock{height:410px;border-radius:24px;position:relative;overflow:hidden;background:linear-gradient(25deg,#d8ebd3,#e7f2dc 40%,#caddea 41%,#e2eff5 55%,#dce9ce 56%)}.map-mock:before,.map-mock:after{content:"";position:absolute;background:#fff9;border-radius:999px;transform:rotate(-22deg)}.map-mock:before{width:620px;height:28px;left:-70px;top:180px}.map-mock:after{height:620px;width:24px;left:48%;top:-80px}.pin{position:absolute;width:42px;height:42px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#7657ff;box-shadow:0 12px 24px #7657ff55}.pin:after{content:"♥";position:absolute;inset:8px;display:grid;place-items:center;color:white;transform:rotate(45deg);font-size:12px}.pin.p1{left:22%;top:30%}.pin.p2{left:63%;top:59%;background:#ff896f}.pin.p3{left:72%;top:23%;background:#63cbb7}
.modal{width:min(720px,calc(100% - 24px));border:0;border-radius:30px;padding:30px;color:var(--ink)}.modal::backdrop{background:rgba(34,25,55,.45);backdrop-filter:blur(8px)}.modal-close{position:absolute;right:18px;top:14px;border:0;background:none;font-size:30px;color:#786f8b;cursor:pointer}.modal-head h2{font-size:34px;letter-spacing:-.04em;margin:6px 0}.modal-head p{color:var(--muted);line-height:1.5}.invite-box{display:grid;grid-template-columns:1fr auto;gap:8px;margin:22px 0;padding:9px;border-radius:18px;background:#f0ebff}.invite-box code{padding:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-list{display:grid;gap:9px}.role-list>div{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:17px;background:#fff}.role-list i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#e9e0ff;color:#654be0;font-style:normal;font-weight:900}.role-list small{display:block;color:var(--muted);margin-top:3px}.role-list button{border:0;background:none;color:#6f51e6;font-weight:800}.role-list+.btn{margin-top:14px}
.toast{position:fixed;left:50%;bottom:95px;transform:translateX(-50%);z-index:60;background:#2b243d;color:#fff;padding:12px 17px;border-radius:14px;box-shadow:0 14px 35px rgba(0,0,0,.25);animation:toastin .3s ease}@keyframes toastin{from{opacity:0;transform:translate(-50%,15px)}}
@media(max-width:900px){.app-shell{padding:16px 16px 105px}.hero{grid-template-columns:1fr;padding:30px}.family-orbit{display:none}.feature-grid{grid-template-columns:repeat(2,1fr)}.smart-panel{grid-template-columns:auto 1fr}.smart-panel .btn{grid-column:1/-1}.bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;bottom:0;left:0;right:0;z-index:20;padding:8px max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:rgba(255,255,255,.86);backdrop-filter:blur(20px);border-top:1px solid #ffffff}.bottom-nav button{border:0;background:none;color:#7e768e;font-size:10px;font-weight:800;display:grid;gap:3px;place-items:center}.bottom-nav button span{font-size:21px}.bottom-nav button.active{color:#684ce1}.bottom-nav .nav-center span{width:48px;height:48px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,#7657ff,#a783ff);color:#fff;box-shadow:0 13px 25px #7657ff55;font-size:30px}.section-head .text-btn{display:none}}
@media(max-width:620px){.auth-shell{padding:14px}.auth-card{padding:25px;border-radius:27px}.auth-card h1{margin-top:32px}.hero{min-height:385px;border-radius:28px}.hero h1{font-size:45px}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:220px}.section-head{margin-top:30px}.smart-panel{grid-template-columns:1fr}.spark{width:52px;height:52px}.invite-box{grid-template-columns:1fr}.modal{padding:24px 18px}.topbar .brand-lockup small{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}