:root{--ink:#1c3030;--muted:#72817e;--green:#224c43;--green2:#326b5d;--gold:#b18a54;--sand:#f7f5f0;--paper:#fff;--line:#e8e7e1;--soft:#eff3ef;--red:#a94343;--shadow:0 14px 44px rgba(24,49,46,.07)}*{box-sizing:border-box}body{margin:0;background:var(--sand);color:var(--ink);font:15px/1.5 'DM Sans',sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit}h1,h2,h3,h4,p{margin:0}h1,h2,h3,.serif{font-family:'Playfair Display',serif}h1{font-size:clamp(36px,4vw,57px);line-height:1.08}h2{font-size:30px;line-height:1.2}h3{font-size:23px}small,.muted{color:var(--muted)}.eyebrow{font:700 11px/1.5 'DM Sans',sans-serif;letter-spacing:.19em;text-transform:uppercase;color:var(--gold)}.shell{min-height:100vh}.topbar{position:sticky;top:0;z-index:10;background:#fffefdf0;backdrop-filter:blur(15px);border-bottom:1px solid var(--line);height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1310px)/2))}.brand{display:flex;align-items:center;gap:12px;cursor:pointer}.mark{background:var(--green);width:42px;height:42px;border-radius:13px;color:white;display:grid;place-items:center;font:600 25px 'Playfair Display',serif}.brand strong{font:700 21px 'Playfair Display',serif}.brand small{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase}.user-pill{display:flex;align-items:center;gap:11px}.avatar{flex-shrink:0;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:#e8eee9;color:var(--green);font-weight:700}.avatar img{width:100%;height:100%;object-fit:cover}.sidebar{width:244px;flex-shrink:0;padding:28px 16px 32px 0}.navgroup{margin:0 0 19px}.navtitle{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#a4aaa5;margin:0 0 13px 13px}.navbutton{border:0;background:transparent;display:flex;align-items:center;gap:12px;width:100%;padding:13px 15px;border-radius:13px;text-align:left;color:#5f716d;font-weight:600;margin:3px 0}.navbutton:hover{background:#e9efea}.navbutton.active{background:var(--green);color:white;box-shadow:0 9px 20px #224c4320}.navbutton .ico{font-size:18px;width:23px;text-align:center}.layout{max-width:1310px;margin:auto;padding:0 24px;display:flex;gap:20px;align-items:flex-start}.main{width:100%;min-width:0;padding:36px 0 80px}.page-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:26px}.page-head h2{margin-top:5px}.btn{border:1px solid transparent;background:var(--green);color:white;padding:11px 18px;border-radius:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:hover{background:var(--green2)}.btn.alt{background:white;color:var(--green);border-color:#d9e3da}.btn.alt:hover{background:var(--soft)}.btn.gold{background:var(--gold)}.btn.small{padding:7px 11px;font-size:12px}.btn.ghost{background:transparent;color:var(--green)}.btn.danger{background:#f9eeee;color:var(--red)}.badge{display:inline-block;background:#eaf1e9;color:var(--green);border-radius:999px;font-size:11px;font-weight:700;padding:5px 10px}.card{background:var(--paper);border:1px solid var(--line);border-radius:19px;box-shadow:var(--shadow);padding:24px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.section-head h3{font-size:21px}.grid{display:grid;gap:18px}.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}.cols4{grid-template-columns:repeat(4,minmax(0,1fr))}.hero{border-radius:23px;background:linear-gradient(105deg,#173a34e8,#173a3488),url('https://images.unsplash.com/photo-1511895426328-dc8714191300?auto=format&fit=crop&w=1700&q=80') center 41%/cover;color:white;padding:42px 44px;min-height:255px;display:flex;flex-direction:column;justify-content:center;gap:12px;margin-bottom:22px;position:relative;overflow:hidden}.hero .eyebrow{color:#e2c49b}.hero p{max-width:460px;color:#e3eae6}.hero .btn{align-self:start;background:white;color:var(--green)}.hero h1{font-size:47px}.quickcard{border:1px solid var(--line);background:white;border-radius:17px;min-height:116px;padding:18px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:13px;box-shadow:0 7px 20px #17372e08}.quickcard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.quickcard .symbol{background:#f2f5ef;border-radius:12px;width:38px;height:38px;display:grid;place-items:center;font-size:20px}.quickcard strong{display:block;font-size:14px}.quickcard small{display:block;font-size:12px;margin-top:2px}.photo-show{height:278px;position:relative;overflow:hidden;border-radius:15px;background:#d6dcd6}.photo-show img{width:100%;height:100%;object-fit:cover;display:block}.photo-overlay{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,#172924a9);color:white;padding:36px 18px 14px}.photo-overlay small{color:#e4eae5}.dots{display:flex;gap:6px;justify-content:center;padding-top:13px}.dot{width:7px;height:7px;border:0;border-radius:99px;padding:0;background:#cdd3cd}.dot.on{width:23px;background:var(--green)}.list-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.list-row:last-child{border:0}.grow{flex:1;min-width:0}.stack{display:flex;flex-direction:column;gap:17px}.member{background:white;border:1px solid var(--line);border-radius:17px;padding:20px;text-align:center;cursor:pointer}.member:hover{box-shadow:var(--shadow)}.member .avatar{margin:0 auto 12px}.member strong{display:block}.search{border:1px solid var(--line);border-radius:11px;background:white;padding:12px 14px;min-width:220px;width:100%;outline-color:var(--green)}.form label{display:block;font-weight:700;font-size:13px;margin:12px 0 5px}.form input,.form textarea,.form select{width:100%;padding:11px 13px;border:1px solid #dce3dc;border-radius:10px;background:white;outline-color:var(--green)}.form textarea{min-height:90px;resize:vertical}.modal-back{position:fixed;inset:0;background:#0e221dcc;z-index:30;display:grid;place-items:center;padding:20px}.modal{background:white;border-radius:20px;max-width:550px;width:100%;max-height:90vh;overflow:auto;padding:25px}.modal header{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.close{border:0;background:#f1f3ef;border-radius:9px;padding:5px 11px;font-size:24px}.profile-cover{height:175px;background:linear-gradient(100deg,#24463a,#9da992);border-radius:20px 20px 0 0}.profile-body{background:white;border:1px solid var(--line);border-top:0;padding:0 28px 28px;border-radius:0 0 20px 20px}.profile-intro{display:flex;gap:17px;align-items:end;transform:translateY(-23px);margin-bottom:-5px}.profile-intro .avatar{border:5px solid white}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin:20px 0}.tab{border:1px solid #e0e6df;padding:8px 14px;border-radius:99px;background:white;color:#547168;font-weight:700}.tab.active{background:var(--green);color:white}.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.photo-grid .photo{aspect-ratio:1/1;border:0;padding:0;border-radius:12px;overflow:hidden;background:#f0f0ea}.photo img{width:100%;height:100%;object-fit:cover}.event{border:1px solid var(--line);padding:17px;border-radius:14px;background:white}.event .dateblock{background:#f0f4ed;color:var(--green);border-radius:12px;padding:9px 13px;min-width:72px;text-align:center}.event .dateblock strong{display:block;font-size:24px;line-height:1.1}.event .dateblock small{color:inherit}.family-node{border:1px solid #dfe6dd;border-radius:15px;background:white;min-width:145px;max-width:195px;padding:15px;text-align:center;cursor:pointer}.family-node:hover{border-color:var(--green);box-shadow:var(--shadow)}.family-node .avatar{margin:0 auto 8px}.family-node.selected{background:#eaf2ec;border:2px solid var(--green)}.tree-column{display:flex;flex-wrap:wrap;gap:13px;align-items:center;justify-content:center;margin:12px 0}.tree-label{text-align:center;color:var(--gold);letter-spacing:.14em;font-size:11px;font-weight:700;text-transform:uppercase;margin-top:22px}.tree-link{text-align:center;font-size:23px;color:#9fac9e}.empty{padding:30px;text-align:center;border:1px dashed #d8dfd5;border-radius:14px;background:#fdfdfa;color:var(--muted)}.auth-screen{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.auth-art{background:linear-gradient(#173a349c,#173a34b9),url('https://images.unsplash.com/photo-1511895426328-dc8714191300?auto=format&fit=crop&w=1400&q=80') center/cover;display:flex;flex-direction:column;justify-content:end;padding:60px;color:white}.auth-art h1{max-width:500px}.auth-panel{display:grid;place-items:center;padding:30px}.auth-panel .card{width:min(440px,100%);padding:34px}.auth-panel .form{margin-top:18px}.auth-panel .btn{width:100%;margin-top:17px}.hint{border-radius:12px;background:#f1f4ee;color:#516a5d;padding:12px 14px;font-size:12px}.flex{display:flex;gap:12px;align-items:center}.wrap{flex-wrap:wrap}.right{margin-left:auto}.mb{margin-bottom:20px}.mt{margin-top:19px}.divider{height:1px;background:var(--line);margin:18px 0}.comment{background:#f6f7f3;border-radius:11px;padding:10px;margin:7px 0;font-size:13px}.post{border:1px solid var(--line);padding:18px;border-radius:14px;margin-bottom:13px}.post img{max-height:350px;width:100%;object-fit:cover;border-radius:12px;margin:12px 0}.tiny{font-size:12px}.checkrow{display:flex;gap:8px;align-items:center}.checkrow input{width:auto!important}.form .remember-row{margin-top:14px;align-items:flex-start}.form .remember-row label{display:inline;margin:0;font-weight:600;cursor:pointer}.remember-row input{margin-top:3px}.remember-note{margin:4px 0 0 24px}#toast{position:fixed;bottom:24px;right:24px;background:var(--green);color:white;padding:13px 20px;border-radius:12px;box-shadow:var(--shadow);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}.mobile-nav{display:none}.banner{background:#fff6e5;border:1px solid #ead6ab;color:#72552d;border-radius:12px;padding:11px 14px;margin-bottom:17px;font-size:12px}@media(max-width:1050px){.sidebar{width:200px}.cols4{grid-template-columns:repeat(2,1fr)}.cols3{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.topbar{height:68px;padding:0 16px}.topbar .user-pill span{display:none}.layout{padding:0 14px}.sidebar{display:none}.main{padding:22px 0 110px}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:15;background:white;border-top:1px solid var(--line);justify-content:space-around;padding:8px}.mobile-nav button{border:0;background:none;color:#647c70;font-size:10px;display:flex;flex-direction:column;align-items:center;gap:3px}.mobile-nav .ico{font-size:21px}.mobile-nav button.active{color:var(--green);font-weight:700}.hero{padding:27px;min-height:230px}.hero h1{font-size:35px}.cols2,.cols3{grid-template-columns:1fr}.cols4{grid-template-columns:repeat(2,1fr)}.page-head{align-items:flex-start;flex-direction:column}.photo-grid{grid-template-columns:repeat(2,1fr)}.auth-screen{grid-template-columns:1fr}.auth-art{min-height:230px;padding:25px}.auth-art h1{font-size:36px}.auth-panel{padding:20px}.profile-body{padding:0 15px 20px}}

/* Version 1.1: atmospheric scenic surroundings, calm readable foreground */
body{background:#e9eee9;position:relative;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(244,247,243,.89),rgba(244,247,243,.84)),var(--scenic-background,linear-gradient(135deg,#dce7de,#f5eee1)) center/cover no-repeat}
.topbar{background:rgba(255,255,255,.95)}
.sidebar .hint{background:rgba(246,249,245,.9)}
.calendar-card{padding:24px}
.calendar-top{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:center;margin-bottom:22px}
.calendar-top h3{font-size:25px}
.calendar-today-link{border:0;background:transparent;color:var(--green);text-decoration:underline;font-size:12px;padding:4px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.cal-weekday{text-align:center;padding:7px 2px;color:var(--muted);font-size:12px;font-weight:700}
.cal-cell{border:1px solid #e0e7df;background:white;min-height:128px;border-radius:10px;text-align:left;padding:9px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;overflow:hidden}
button.cal-cell:hover{border-color:var(--green);background:#f0f6f0;box-shadow:0 2px 12px #224c431c}
.cal-outside{background:rgba(244,246,243,.45);border-color:transparent}
.cal-date{font-weight:700;font-size:14px;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;flex-shrink:0}
.cal-today .cal-date{background:var(--green);color:white}
.cal-event{
 display:block;width:100%;max-width:100%;min-width:0;flex-shrink:0;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 background:var(--event-bg,#f5e5d6);color:var(--event-ink,#824d33);
 border-left:3px solid var(--event-accent,#89523d);
 padding:4px 5px;border-radius:5px;font-size:11px;line-height:1.35;
}
.cal-birthday{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#a36b24}
.cal-more{font-size:10px;color:var(--muted)}
.cal-birthday-row{padding:10px 0}
.list-row.calendar-event-row{
 flex-wrap:wrap;margin:8px 0;padding:12px;border:0;
 border-left:4px solid var(--event-accent,#89523d);border-radius:10px;
 background:var(--paper);
 background:color-mix(in srgb,var(--event-accent,#89523d) 8%,var(--paper));
 overflow-wrap:anywhere;
}
.calendar-event-row>.grow{flex:1 1 180px}
.calendar-event-row>.btn{flex-shrink:0}
.calendar-event-label{
 display:inline-flex;align-items:center;gap:7px;max-width:100%;
 padding:5px 10px;border-radius:7px;font-size:12px;font-weight:700;
 background:var(--event-bg,#f5e5d6);color:var(--event-ink,#824d33);
 overflow-wrap:anywhere;
}
.calendar-event-label::before{
 content:"";width:9px;height:9px;border-radius:50%;flex-shrink:0;
 background:var(--event-accent,#89523d);
}
@media(max-width:760px){.calendar-card{padding:12px}.calendar-top h3{font-size:18px}.calendar-top .btn{font-size:11px;padding:7px}.calendar-grid{gap:2px}.cal-cell{min-height:100px;padding:4px;gap:3px;border-radius:6px}.cal-weekday{font-size:10px}.cal-event,.cal-birthday{font-size:10px;padding:2px}.cal-date{font-size:11px;width:21px;height:21px}}


/* v1.3: warm, welcoming family palette and faint scenic backdrop */
:root{--ink:#44382f;--muted:#796d62;--green:#89523d;--green2:#74422f;--gold:#b47b49;--sand:#f8f1e8;--paper:rgba(255,252,248,.96);--line:#e9dccd;--soft:#f6ece1;--shadow:0 16px 40px rgba(80,55,40,.075)}
body{background:#efe7db;color:var(--ink)}
body::before{z-index:0;opacity:1;background:linear-gradient(90deg,rgba(251,246,239,.87),rgba(251,246,239,.82)),var(--scenic-background,linear-gradient(135deg,#e9d8c1,#f5e9d9)) center/cover no-repeat}
#app{position:relative;z-index:1}
#toast{z-index:60}
.topbar{background:rgba(255,251,246,.95);border-bottom-color:#e7dac9}
.mark{background:var(--green)}
.card,.quickcard,.member,.family-node{background:var(--paper);border-color:var(--line)}
.navbutton{color:#76695d}.navbutton:hover{background:#f3e8da}.navbutton.active{background:var(--green);color:#fff;box-shadow:0 9px 20px rgba(126,76,52,.2)}
.navtitle{color:#968474}
.sidebar .hint{background:rgba(255,250,242,.8);color:#715f4d;border:1px solid #ead9c4}
.scenery-button{border:1px solid #e1d0be;color:#89523d;background:rgba(255,251,246,.86);padding:10px 12px;width:100%;border-radius:12px;font-weight:700;font-size:12px;margin-top:12px;cursor:pointer}
.scenery-button:hover{background:#fff7ef}
.hero{background:linear-gradient(106deg,rgba(66,44,32,.89),rgba(99,67,48,.6)),var(--scenic-background,linear-gradient(125deg,#6d4c38,#d3ac7e)) center/cover no-repeat;color:#fff8ef}
.hero p{color:#f5e9db}.hero .eyebrow{color:#f6cf9d}.hero .btn{background:#fff8ef;color:#75422e}
.quickcard .symbol{background:#f9ece0;color:#95573c}
.profile-cover{background:linear-gradient(105deg,rgba(94,59,41,.86),rgba(155,107,69,.5)),var(--scenic-background,linear-gradient(120deg,#a17a5b,#dcc4a3)) center/cover no-repeat}
.auth-art{background:linear-gradient(100deg,rgba(76,49,34,.85),rgba(126,82,55,.62)),var(--scenic-background,linear-gradient(135deg,#714931,#e4bd93)) center/cover no-repeat}
.family-node:hover{border-color:#bf8a69}.family-node.selected{background:#f9eee2;border:2px solid #a2684b}
.family-node .avatar,.member .avatar{background:#f5e6d7;color:var(--green)}
.family-node{min-width:152px;max-width:215px;display:flex;flex-direction:column;align-items:center;gap:5px;box-shadow:0 6px 18px rgba(93,62,38,.05)}
.relationship-chip{background:#f7eee1;color:#80533b;border:1px solid #ecd6bf;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700;margin:3px 0}
.tree-card{padding:30px}.tree-overview{display:flex;justify-content:space-between;gap:18px;align-items:center;padding-bottom:15px;border-bottom:1px solid var(--line)}
.tree-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.tree-controls .search{max-width:220px}.tree-help{background:#f8f1e8;border-left:3px solid #b97e57;color:#715846;border-radius:8px;padding:12px 15px;font-size:13px;margin:22px 0}
.tree-label{color:#a36a43;margin-top:25px}.tree-link{color:#bda28b}
.tree-empty{color:var(--muted);font-size:13px;padding:12px 18px;background:#fffaf5;border:1px dashed #e8d6c3;border-radius:12px}
.tree-caption{color:var(--muted);font-size:12px;text-align:center;max-width:580px;margin:6px auto 13px}
.pet-node{min-width:165px}.pet-emoji,.pet-preview{font-size:39px}.pet-preview{text-align:center;background:#f6ebde;border-radius:14px;padding:20px;margin-bottom:15px}
.btn.alt{background:#fffcf8;color:var(--green);border-color:#e5d6c6}.btn.alt:hover{background:#faefe2}
.badge{background:#ecebdd;color:#656a46}
.hint{background:#f8efe2;color:#735944}
.form input,.form textarea,.form select{border-color:#e4d5c5}
.selection-list{max-height:180px;overflow-y:auto;border:1px solid #eaded1;border-radius:11px;padding:8px 12px;background:#fffcf8}
.cal-today .cal-date{background:var(--green)}
@media(max-width:760px){.tree-card{padding:15px}.tree-overview{display:block}.tree-controls{justify-content:flex-start;margin-top:13px}.tree-controls .search{max-width:100%}.family-node{min-width:130px;max-width:175px}.scenery-button{display:none}}


/* v1.4: improved contrast + visual bubble tree */
:root{--ink:#34271f;--muted:#5f5145;--paper:rgba(255,252,248,.975);--line:#e8d7c5;--soft:#f8eee4}
body{color:var(--ink)}
small,.muted{color:var(--muted)}
.navtitle{color:#7d6a58}
.hint{color:#5b483c;background:rgba(255,248,241,.92);border:1px solid #ead9c4}
.banner{color:#674b2f}
.list-row b,.list-row p,.member strong,.quickcard strong,.card h3,.profile-body h2{color:var(--ink)}
.quickcard small,.member p,.profile-body .muted{color:var(--muted)}
.tree-card{padding:28px}
.tree-scene{position:relative;min-height:760px;border-radius:24px;overflow:hidden;margin-top:16px;background:linear-gradient(180deg,rgba(255,250,244,.98) 0%,rgba(250,241,229,.93) 100%);border:1px solid #e8d8c7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.tree-art{position:absolute;inset:0;pointer-events:none;opacity:.48}
.tree-canopy{position:absolute;left:50%;top:8%;transform:translateX(-50%);width:76%;height:34%;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(185,167,126,.22),rgba(148,125,86,.28) 45%,rgba(139,92,58,.12) 70%,transparent 74%)}
.tree-scene::after{content:"";position:absolute;left:50%;bottom:55px;transform:translateX(-50%);width:72px;height:320px;border-radius:50px;background:linear-gradient(180deg,#ab7f5b 0%,#885c3f 44%,#6d452f 100%);box-shadow:0 8px 18px rgba(88,57,36,.16)}
.tree-ground{position:absolute;left:8%;right:8%;bottom:20px;height:92px;border-radius:50%;background:radial-gradient(circle at center,rgba(202,182,148,.32),rgba(202,182,148,.12) 48%,transparent 70%)}
.tree-branch{position:absolute;height:12px;border-radius:999px;background:linear-gradient(90deg,#9d7252,#bf916a);box-shadow:0 4px 10px rgba(110,75,48,.12)}
.tree-branch.b1{left:50%;top:37%;width:25%;transform-origin:left center;transform:translateX(-6px) rotate(-32deg)}
.tree-branch.b2{left:50%;top:39%;width:23%;transform-origin:left center;transform:translateX(-6px) rotate(29deg)}
.tree-branch.b3{left:50%;top:48%;width:20%;transform-origin:left center;transform:translateX(-100%) rotate(205deg)}
.tree-branch.b4{left:50%;top:57%;width:23%;transform-origin:left center;transform:translateX(-6px) rotate(20deg)}
.tree-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.tree-svg path{fill:none;stroke:#b88f70;stroke-width:2.4;stroke-linecap:round;opacity:.9}
.tree-svg path.soft{stroke-dasharray:6 6;opacity:.7}
.tree-cluster-label{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);transform:translate(-50%,-50%);z-index:3;padding:5px 10px;border-radius:999px;background:rgba(255,249,241,.86);border:1px solid rgba(188,152,118,.34);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8a6548;backdrop-filter:blur(3px)}
.tree-bubble{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);transform:translate(-50%,-50%);width:172px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:14px 12px 12px;border-radius:999px;border:1px solid #e9d8c9;background:rgba(255,253,249,.96);box-shadow:0 16px 34px rgba(100,66,42,.12);z-index:2;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.tree-bubble:hover{transform:translate(-50%,-53%);border-color:#c69471;box-shadow:0 18px 38px rgba(100,66,42,.18)}
.tree-bubble .avatar{width:56px;height:56px;font-size:22px;margin-bottom:1px;background:#f6e7d7;color:var(--green)}
.tree-bubble strong{color:#3a2c23;font-size:15px;line-height:1.2}
.tree-bubble.selected{width:194px;padding:16px 14px 14px;background:linear-gradient(180deg,rgba(255,249,243,.98),rgba(251,239,226,.98));border:2px solid #9f6c4f;box-shadow:0 18px 38px rgba(100,66,42,.2)}
.tree-bubble.selected .avatar{width:64px;height:64px;font-size:24px}
.relationship-chip{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#f5e7da;color:#7b563d;padding:4px 9px;font-size:11px;font-weight:700;line-height:1.1;margin-top:1px}
.pet-bubble{width:160px;border-style:dashed;background:rgba(255,250,245,.95)}
.pet-emoji{font-size:28px;line-height:1}
.tree-legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.legend-pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 12px;background:#fff8ef;border:1px solid #ead9c6;color:#654f3e;font-size:12px;font-weight:700}
.legend-dot{width:11px;height:11px;border-radius:50%;background:#a16d4e;display:inline-block}
.legend-pill.current .legend-dot{background:#87543d}
.parent-dot{background:#ad835f}.partner-dot{background:#c38e63}.child-dot{background:#7fa171}.step-dot{background:#baa06f}.pet-dot{background:#cb8b6c}
.tree-mobile-groups{display:none}
.tree-mobile-group+.tree-mobile-group{margin-top:18px}
.tree-mobile-label{color:#8a6548;letter-spacing:.12em;font-size:11px;font-weight:800;text-transform:uppercase;margin-bottom:8px}
.tree-empty{color:var(--muted);font-size:13px;padding:12px 18px;background:#fffaf5;border:1px dashed #e8d6c3;border-radius:12px}
.pet-node .pet-emoji{font-size:24px;margin-bottom:4px}
@media(max-width:980px){.tree-scene{min-height:680px}.tree-bubble{width:158px}.tree-bubble.selected{width:182px}}
@media(max-width:760px){.tree-card{padding:16px}.tree-scene{display:none}.tree-mobile-groups{display:block;margin-top:16px}.tree-controls{justify-content:flex-start;margin-top:12px}.tree-column{justify-content:flex-start}.family-node{min-width:142px;max-width:190px}.tree-legend{display:none}}


/* v1.5 publish preview: no illustrated trunk or canopy; preserve clean family bubbles/lines. */
.tree-scene{
  background:
    radial-gradient(ellipse 56% 35% at 50% 46%,rgba(224,201,169,.30),transparent 75%),
    linear-gradient(160deg,rgba(255,252,247,.99),rgba(248,236,221,.96));
  min-height:790px;
}
.tree-scene::after,.tree-art{display:none!important;content:none!important}
/* SVG viewBox is 0–100, so .35 gives a delicate ~3 px connector. */
.tree-svg path{stroke:#ae805d;stroke-width:.35;opacity:.82}
.tree-svg path.soft{stroke:#b79277;stroke-width:.28;stroke-dasharray:1.3 1.1;opacity:.72}
.tree-bubble{box-shadow:0 12px 28px rgba(89,59,39,.13)}
.tree-bubble:focus-visible{outline:3px solid #92664a;outline-offset:4px}
.tree-cluster-label{background:rgba(255,249,240,.93)}
/* Contrast improvements in cream sections */
.navbutton,.navtitle,.page-head .muted,.tree-overview .muted,.tree-help,.tiny.muted,.card .muted{color:#574638}
.btn.alt,.btn.ghost{color:#77432e}
@media(max-width:980px){.tree-scene{min-height:760px}}
/* Live beta: authentication, empty states, admin, forms, and clear contrast */
:root{--ink:#32271e;--muted:#5f5045;--paper:rgba(255,252,247,.97);--line:#decebd}
body{color:var(--ink)}small,.muted{color:var(--muted)}
.navtitle{color:#756253}.hint,.banner{color:#5a4536}.badge{color:#68452f;background:#f3e4d3}
.family-node strong,.card h3,.member strong,.quickcard strong{color:var(--ink)}
.boot-card{width:min(520px,calc(100% - 35px));margin:9vh auto;padding:36px;background:#fffaf5;border:1px solid #ead8c5;border-radius:20px;text-align:center;box-shadow:var(--shadow)}
.boot-card p{margin-top:18px}
.live-auth{min-height:100vh;display:grid;grid-template-columns:43% 57%}
.live-auth-art{background:linear-gradient(120deg,#483525d9,#785b42a8),url('https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=1500&q=80') center/cover;color:#fff8eb;padding:50px;display:flex;flex-direction:column;justify-content:flex-end}
.live-auth-art h1{color:#fff8ef;margin:0 0 18px}.live-auth-art p{max-width:400px;color:#fff4e8}
.live-auth-main{padding:34px;display:grid;place-items:center;background:rgba(250,243,235,.9)}
.live-auth-panel{width:min(640px,100%);background:rgba(255,252,248,.98);border:1px solid #e9d9c8;border-radius:22px;padding:30px;box-shadow:var(--shadow)}
.live-auth-panel .tabs{margin:18px 0}.live-auth-panel .tab.active{background:#86533d}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.form-grid .wide{grid-column:span 2}
.form label{color:#45362c}.form input,.form textarea,.form select{color:#33271f;border-color:#d5bdab;background:#fffefc}
.form .hint{margin-top:12px}
.notice{padding:16px;border-radius:14px;background:#fff7e9;border:1px solid #e6cfac;color:#65482e;margin:14px 0}
.empty-lead{padding:34px;text-align:center;border:1px dashed #d5bda8;border-radius:18px;background:#fffaf3}
.empty-lead h3{margin-bottom:9px}
.admin-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border-bottom:1px solid #e9d9c9;padding:18px 0}
.admin-row:last-child{border:0}
.admin-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:flex-end}
.admin-actions select{border:1px solid #dac6b4;background:white;border-radius:10px;padding:8px;max-width:225px}
.live-photo{display:block;width:100%;height:100%;object-fit:cover;min-height:170px;background:linear-gradient(135deg,#e2cebb,#f5e8d8)}
.photo-grid .photo{min-height:155px}.profile-actions{display:flex;flex-wrap:wrap;gap:8px}
.tree-scene::after,.tree-art{display:none!important}
.tree-scene{background:radial-gradient(ellipse at 50% 55%,#f5e8d6 0%,#fcf7ee 67%)}
.tree-svg path{stroke:#a67c5f;stroke-width:2.2}.tree-bubble{border-color:#dcbda4}
.tree-bubble strong{color:#33261e}.tree-bubble .muted{color:#675344}
.tree-cluster-label{color:#69472f;background:#fff6ea}
.tree-help{color:#624b3a;background:#f8eddf}
.event-card{border:1px solid #e2cfba;border-radius:15px;padding:17px;margin:12px 0;background:#fffdf8}
.event-card .event-head{display:flex;gap:12px;align-items:center;justify-content:space-between}
.event-card p{margin-top:7px}
.member .avatar{margin:0 auto 10px}
.mobile-extra{display:none}
@media(max-width:760px){.live-auth{grid-template-columns:1fr}.live-auth-art{padding:26px;min-height:180px}.live-auth-art h1{font-size:33px}.live-auth-main{padding:16px}.live-auth-panel{padding:21px}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:span 1}.admin-row{grid-template-columns:1fr}.admin-actions{justify-content:flex-start}.mobile-extra{display:inline}.tree-scene{display:none}.tree-mobile-groups{display:block}}
/* Tree connectors stay fine, legible lines at every viewport width. */
.tree-svg path{stroke-width:2px;vector-effect:non-scaling-stroke}

/* v2.1 - RSVP summary, pet pictures, and private family signup review */
.rsvp-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:15px 0 8px}
.rsvp-tile{background:#fdf6ed;border:1px solid #e3cbb4;border-radius:15px;padding:13px 10px;text-align:center;min-width:0;box-shadow:0 3px 11px rgba(88,57,36,.04)}
.rsvp-tile.going{background:#eff4e9;border-color:#bad2b4}.rsvp-tile.maybe{background:#fff5e1;border-color:#e4cf9e}.rsvp-tile.not-going{background:#f9eee9;border-color:#e3c3ba}
.rsvp-count{font-size:28px;line-height:1.1;font-weight:800;color:#513629;font-variant-numeric:tabular-nums;margin-bottom:3px}
.rsvp-tile b{font-size:13px;color:#513a2e}.rsvp-tile p{font-size:11px;color:#594c42;margin:7px 0 0;overflow-wrap:anywhere;line-height:1.4}
.rsvp-inline{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}
.rsvp-inline span{background:#f4e9dc;border:1px solid #e2ceb7;border-radius:100px;padding:3px 7px;font-size:11px;color:#634a38;white-space:nowrap}
.pet-photo-wrap{height:180px;border-radius:15px;background:#f3e7dc;display:grid;place-items:center;overflow:hidden}
.pet-photo-wrap .pet-photo{width:100%;height:100%;object-fit:cover;display:block}
.pet-empty-photo{font-size:55px;line-height:1}
.pet-detail-photo,.pet-form-photo{border-radius:15px;background:#f6ece2;overflow:hidden;min-height:120px;display:grid;place-items:center}
.pet-detail-photo{height:230px}.pet-form-photo{height:145px;margin-bottom:12px}
.pet-detail-photo .pet-photo,.pet-form-photo .pet-photo{width:100%;height:100%;object-fit:cover}.pet-profile-actions{margin-top:12px}.pet-photo-comments{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}.pet-album-section{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}.pet-album-grid .photo{min-height:120px}.pet-photo-comments .section-head{margin-bottom:10px}.profile-music-card{margin:16px 0 2px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}.profile-music-heading{display:flex;align-items:center;gap:12px}.profile-music-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--paper);font-size:20px;color:var(--accent,var(--green));flex-shrink:0}.profile-music-heading .btn{flex-shrink:0}.profile-music-player{display:block;width:100%;height:152px;border:0;border-radius:12px;margin-top:12px;background:var(--paper)}.profile-music-note{margin-top:8px}.quick-reactions{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 8px}.quick-reaction{width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:19px;line-height:1;display:grid;place-items:center;box-shadow:0 2px 7px rgba(24,49,46,.05)}.quick-reaction:hover,.quick-reaction:focus-visible{background:var(--soft);border-color:var(--green);transform:translateY(-1px)}.quick-reaction:disabled{transform:none}
.pet-empty-detail{background:#f7ecdf;text-align:center;font-size:52px;border-radius:15px;padding:25px}
.pet-bubble-photo{width:55px;height:55px;border-radius:50%;background:#f2e1d0;display:grid;place-items:center;font-size:28px;overflow:hidden;margin-bottom:3px}
.pet-bubble-photo .pet-photo{width:100%;height:100%;object-fit:cover}
.tree-mobile-groups .pet-photo{width:43px;height:43px;object-fit:cover;border-radius:50%;margin-right:6px}
.registration-section-title{margin-top:18px;padding-top:19px;border-top:1px solid #e6d5c3}
.registration-section-title h3{font-size:21px;margin-bottom:6px}
.registration-section-title .notice{font-size:12px;margin:11px 0 0}
.registration-group{padding:10px 12px;margin:6px 0;background:#fffaf5;border:1px solid #ead8c7;border-radius:13px}
.family-rel-title{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.family-rel-title label{margin:0!important}.family-rel-title button{flex-shrink:0}
.registration-relative-list{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.registration-relative-row{display:flex;align-items:center;gap:7px}
.registration-relative-row input{flex:1;min-width:0}.registration-relative-row button{min-width:38px}
.admin-details{min-width:0;align-self:start}.admin-relation-review{background:#fff9ef;border:1px solid #e6d7c6;border-radius:12px;padding:12px;margin-top:14px;max-width:650px}
.admin-relation-row{margin-top:12px}.admin-relation-row label{font-size:12px;font-weight:700;color:#513d2b;display:block;margin-bottom:4px}
.admin-relation-row select{display:block;width:100%;padding:9px;border:1px solid #d9c2ab;border-radius:9px;color:#3f3026;background:#fff}
.admin-actions{flex-direction:column;align-items:stretch;justify-content:center;max-width:265px;min-width:205px}.admin-actions select{max-width:none!important;width:100%}
.admin-row{grid-template-columns:minmax(0,1fr) 250px;gap:20px;align-items:start}
@media(max-width:760px){.rsvp-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.rsvp-tile{padding:9px 5px}.rsvp-count{font-size:24px}.rsvp-tile p{font-size:10px}.admin-row{grid-template-columns:minmax(0,1fr)}.admin-actions{max-width:none;min-width:0}.pet-photo-wrap{height:170px}}
/* Administrator-only deletion of people added directly to the family tree. */
.member-list-entry{display:flex;flex-direction:column;gap:9px;min-width:0}
.member-list-entry>.member{flex:1;width:100%}
.member-list-entry>.btn{width:100%}

html[data-theme="spring"]{--ink:#293F30;--muted:#56705E;--green:#517E5A;--green2:#426E4A;--gold:#987299;--sand:#EDF5E9;--paper:#FFFDF8;--line:#C9DECA;--soft:#E2F0DE;--theme-radius:26px;--theme-button-radius:999px;--theme-contrast:#FFFFFF;--theme-decor:"✿";--theme-wash:linear-gradient(90deg,#EDF5E9E8,#EDF5E9D8);--theme-overlay:linear-gradient(105deg,#517E5AE7,#517E5A80)}
html[data-theme="summer"]{--ink:#513721;--muted:#775742;--green:#BA6044;--green2:#9F4F37;--gold:#CE943E;--sand:#FFF2D4;--paper:#FFFDF3;--line:#EBD0AF;--soft:#FFE4BF;--theme-radius:26px;--theme-button-radius:23px;--theme-contrast:#FFFFFF;--theme-decor:"☀";--theme-wash:linear-gradient(90deg,#FFF2D4E8,#FFF2D4D8);--theme-overlay:linear-gradient(105deg,#BA6044E7,#BA604480)}
html[data-theme="fall"]{--ink:#483122;--muted:#715542;--green:#974F2E;--green2:#783B27;--gold:#B07A41;--sand:#F5E6D3;--paper:#FFF9F0;--line:#DEC5A9;--soft:#F0DBBC;--theme-radius:16px;--theme-button-radius:10px;--theme-contrast:#FFFFFF;--theme-decor:"❧";--theme-wash:linear-gradient(90deg,#F5E6D3E8,#F5E6D3D8);--theme-overlay:linear-gradient(105deg,#974F2EE7,#974F2E80)}
html[data-theme="winter"]{--ink:#293F57;--muted:#59738B;--green:#366D96;--green2:#26547C;--gold:#6B9BB9;--sand:#EAF4FA;--paper:#FBFDFF;--line:#CBDBE8;--soft:#E0EDF8;--theme-radius:9px;--theme-button-radius:9px;--theme-contrast:#FFFFFF;--theme-decor:"❄";--theme-wash:linear-gradient(90deg,#EAF4FAE8,#EAF4FAD8);--theme-overlay:linear-gradient(105deg,#366D96E7,#366D9680)}
html[data-theme="lunar"]{--ink:#F6F0E8;--muted:#CCD1E0;--green:#B6A2D9;--green2:#D2BCEB;--gold:#E5C687;--sand:#171F35;--paper:#283452;--line:#536181;--soft:#364365;--theme-radius:14px;--theme-button-radius:12px;--theme-contrast:#1B2134;--theme-decor:"☾";--theme-wash:linear-gradient(90deg,#171F35E8,#171F35D8);--theme-overlay:linear-gradient(105deg,#10172FEF,#B6A2D980)}
html[data-theme="beach"]{--ink:#245459;--muted:#53787B;--green:#16878D;--green2:#126D78;--gold:#C59A6B;--sand:#EAF8F3;--paper:#FFFFFF;--line:#C7E5DC;--soft:#D8F1EA;--theme-radius:30px;--theme-button-radius:999px;--theme-contrast:#FFFFFF;--theme-decor:"≈";--theme-wash:linear-gradient(90deg,#EAF8F3E8,#EAF8F3D8);--theme-overlay:linear-gradient(105deg,#16878DE7,#16878D80)}

/* Family appearance themes: Heritage inherits its original design without overrides. */
html[data-theme]:not([data-theme="heritage"]) body{color:var(--ink);background:var(--sand)}
html[data-theme]:not([data-theme="heritage"]) body::before{
 background:var(--theme-wash),var(--scenic-background) center/cover no-repeat;
}
html[data-theme]:not([data-theme="heritage"]) .topbar{background:var(--paper);border-color:var(--line)}
html[data-theme]:not([data-theme="heritage"]) .hero{
 background:var(--theme-overlay),var(--scenic-background) center/cover no-repeat;
 border-radius:var(--theme-radius);isolation:isolate;
}
html[data-theme]:not([data-theme="heritage"]) .hero::after{
 content:var(--theme-decor);position:absolute;right:6%;top:9%;font-size:clamp(76px,10vw,150px);
 line-height:1;opacity:.15;pointer-events:none;z-index:-1;
}
html[data-theme]:not([data-theme="heritage"]) .hero h1,
html[data-theme]:not([data-theme="heritage"]) .hero p{color:#fff}
html[data-theme]:not([data-theme="heritage"]) .hero .btn{background:#fff;color:var(--green)}
html[data-theme]:not([data-theme="heritage"]) .mark{
 background:var(--green);color:var(--theme-contrast);border-radius:calc(var(--theme-radius)*.6)
}
html[data-theme]:not([data-theme="heritage"]) .card,
html[data-theme]:not([data-theme="heritage"]) .quickcard,
html[data-theme]:not([data-theme="heritage"]) .member,
html[data-theme]:not([data-theme="heritage"]) .family-node,
html[data-theme]:not([data-theme="heritage"]) .event,
html[data-theme]:not([data-theme="heritage"]) .event-card{
 background:var(--paper);border-color:var(--line);border-radius:var(--theme-radius);color:var(--ink)
}
html[data-theme]:not([data-theme="heritage"]) .btn{
 background:var(--green);color:var(--theme-contrast);border-radius:var(--theme-button-radius)
}
html[data-theme]:not([data-theme="heritage"]) .btn:hover{background:var(--green2)}
html[data-theme]:not([data-theme="heritage"]) .btn.alt,
html[data-theme]:not([data-theme="heritage"]) .btn.ghost{
 background:var(--paper);color:var(--green);border-color:var(--line)
}
html[data-theme]:not([data-theme="heritage"]) .btn.danger{background:#F9E4E1;color:#853F32}
html[data-theme]:not([data-theme="heritage"]) .navbutton{color:var(--muted);border-radius:var(--theme-button-radius)}
html[data-theme]:not([data-theme="heritage"]) .navbutton:hover{background:var(--soft)}
html[data-theme]:not([data-theme="heritage"]) .navbutton.active{background:var(--green);color:var(--theme-contrast)}
html[data-theme]:not([data-theme="heritage"]) .navtitle,
html[data-theme]:not([data-theme="heritage"]) .eyebrow{color:var(--gold)}
html[data-theme]:not([data-theme="heritage"]) .sidebar .hint,
html[data-theme]:not([data-theme="heritage"]) .hint,
html[data-theme]:not([data-theme="heritage"]) .quickcard .symbol,
html[data-theme]:not([data-theme="heritage"]) .relationship-chip,
html[data-theme]:not([data-theme="heritage"]) .badge,
html[data-theme]:not([data-theme="heritage"]) .tree-help{
 background:var(--soft);border-color:var(--line);color:var(--ink)
}
html[data-theme]:not([data-theme="heritage"]) .scenery-button{
 background:var(--paper);border-color:var(--line);color:var(--green);border-radius:var(--theme-button-radius)
}
html[data-theme]:not([data-theme="heritage"]) .profile-cover{
 background:var(--theme-overlay),var(--scenic-background) center/cover no-repeat;
 border-radius:var(--theme-radius) var(--theme-radius) 0 0;
}
html[data-theme]:not([data-theme="heritage"]) .profile-body,
html[data-theme]:not([data-theme="heritage"]) .modal,
html[data-theme]:not([data-theme="heritage"]) .boot-card,
html[data-theme]:not([data-theme="heritage"]) .cal-cell,
html[data-theme]:not([data-theme="heritage"]) .selection-list,
html[data-theme]:not([data-theme="heritage"]) .tree-bubble{
 background:var(--paper);border-color:var(--line);color:var(--ink)
}
html[data-theme]:not([data-theme="heritage"]) .tree-scene{
 background:radial-gradient(ellipse at 50% 50%,var(--soft),var(--paper));border-color:var(--line)
}
html[data-theme]:not([data-theme="heritage"]) .tree-svg path{stroke:var(--green)}
html[data-theme]:not([data-theme="heritage"]) .tree-bubble{border-radius:var(--theme-radius)}
html[data-theme]:not([data-theme="heritage"]) .tree-bubble.selected{background:var(--soft);border-color:var(--green)}
html[data-theme]:not([data-theme="heritage"]) .tree-cluster-label{color:var(--ink);background:var(--paper)}
html[data-theme]:not([data-theme="heritage"]) .tree-bubble strong,
html[data-theme]:not([data-theme="heritage"]) .member strong,
html[data-theme]:not([data-theme="heritage"]) .quickcard strong,
html[data-theme]:not([data-theme="heritage"]) .card h3,
html[data-theme]:not([data-theme="heritage"]) .family-node strong,
html[data-theme]:not([data-theme="heritage"]) .list-row b{color:var(--ink)}
html[data-theme]:not([data-theme="heritage"]) .form input,
html[data-theme]:not([data-theme="heritage"]) .form textarea,
html[data-theme]:not([data-theme="heritage"]) .form select,
html[data-theme]:not([data-theme="heritage"]) .search{
 color:var(--ink);background:var(--paper);border-color:var(--line);border-radius:var(--theme-button-radius)
}
html[data-theme]:not([data-theme="heritage"]) .tab{background:var(--paper);border-color:var(--line);color:var(--green)}
html[data-theme]:not([data-theme="heritage"]) .tab.active{background:var(--green);color:var(--theme-contrast)}
html[data-theme]:not([data-theme="heritage"]) .cal-today .cal-date,
html[data-theme]:not([data-theme="heritage"]) .event .dateblock{background:var(--soft);color:var(--ink)}
html[data-theme]:not([data-theme="heritage"]) .comment,
html[data-theme]:not([data-theme="heritage"]) .empty,
html[data-theme]:not([data-theme="heritage"]) .empty-lead,
html[data-theme]:not([data-theme="heritage"]) .notice{background:var(--soft);border-color:var(--line);color:var(--ink)}
html[data-theme]:not([data-theme="heritage"]) .mobile-nav{background:var(--paper);border-color:var(--line)}
html[data-theme]:not([data-theme="heritage"]) .mobile-nav button{color:var(--muted)}
html[data-theme]:not([data-theme="heritage"]) .mobile-nav button.active{color:var(--green)}
html[data-theme]:not([data-theme="heritage"]) .avatar{color:var(--green);background:var(--soft)}
html[data-theme]:not([data-theme="heritage"]) .photo-grid .photo{border-radius:var(--theme-radius)}
html[data-theme]:not([data-theme="heritage"]) .rsvp-tile,
html[data-theme]:not([data-theme="heritage"]) .rsvp-inline span{border-color:var(--line)}
html[data-theme="lunar"]{color-scheme:dark}
html[data-theme="lunar"] .muted,
html[data-theme="lunar"] .card .muted,
html[data-theme="lunar"] small{color:var(--muted)}
html[data-theme="lunar"] .btn.alt,
html[data-theme="lunar"] .btn.ghost{color:#E6CEFF}
html[data-theme="lunar"] .badge,
html[data-theme="lunar"] .relationship-chip{color:var(--ink)}
html[data-theme="lunar"] .cal-outside{background:#202B48}
html[data-theme="lunar"] .rsvp-tile,
html[data-theme="lunar"] .rsvp-inline span,
html[data-theme="lunar"] .admin-relation-review,
html[data-theme="lunar"] .registration-group{background:var(--soft);border-color:var(--line);color:var(--ink)}
html[data-theme="lunar"] .rsvp-tile b,
html[data-theme="lunar"] .rsvp-tile p,
html[data-theme="lunar"] .rsvp-count{color:var(--ink)}
html[data-theme="lunar"] .form label,
html[data-theme="lunar"] .profile-body h2{color:var(--ink)}
/* Admin-only gallery and contained previews */
.theme-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px;margin:15px 0}
.theme-option{display:flex;flex-direction:column;gap:7px;min-height:180px;text-align:left;
 border:2px solid var(--line);border-radius:18px;background:var(--paper);color:var(--ink);padding:16px}
.theme-option.selected{border-color:var(--green);box-shadow:0 0 0 3px var(--soft)}
.theme-option:hover,.theme-option:focus-visible{border-color:var(--green)}
.theme-option-icon{font-size:27px;color:var(--green);line-height:1}
.theme-option>b{font-size:14px}
.theme-option>small{font-size:11px;line-height:1.4;min-height:30px}
.theme-swatches{display:flex;gap:6px;margin-top:auto}
.theme-swatches i{display:block;height:23px;width:23px;border-radius:50%;border:1px solid rgba(100,100,100,.22)}
.theme-option-label{font-size:10px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.07em}
.theme-sample{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;min-height:198px;
 background:var(--sample-bg);color:var(--sample-ink);padding:13px;border-radius:18px;margin-top:12px}
.theme-sample-nav{background:var(--sample-accent);border-radius:var(--sample-radius);
 display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px}
.theme-sample-nav>span{display:grid;place-items:center;width:32px;height:32px;color:var(--sample-contrast);
 background:rgba(255,255,255,.18);font:700 20px Georgia,serif;border-radius:10px}
.theme-sample-nav i{width:29px;height:7px;border-radius:5px;background:rgba(255,255,255,.72)}
.theme-sample-body{min-width:0;display:flex;flex-direction:column;gap:12px}
.theme-sample-hero{background:var(--sample-accent);color:var(--sample-contrast);
 border-radius:var(--sample-radius);padding:14px;display:flex;align-items:center;gap:12px}
.theme-sample-hero>span{font-size:33px}
.theme-sample-hero b{font:700 20px Georgia,serif;display:block}
.theme-sample-hero small{display:block;color:inherit}
.theme-sample-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.theme-sample-cards>div{background:var(--sample-paper);color:var(--sample-ink);
 border-radius:var(--sample-radius);padding:12px;min-height:65px;font-size:18px}
.theme-sample-cards b{display:block;font-size:11px;margin-top:4px}
.theme-apply{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:17px}
.theme-apply p{flex:1;min-width:180px}
@media(max-width:760px){.theme-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.theme-option{padding:12px}.theme-sample{grid-template-columns:43px minmax(0,1fr);gap:8px;padding:8px}.theme-sample-nav{padding:7px}.theme-sample-nav i{width:21px}.theme-sample-hero b{font-size:15px}.theme-sample-cards{gap:5px}.theme-sample-cards>div{padding:7px}.theme-sample-cards b{font-size:10px}}
@media(max-width:400px){.theme-sample-cards{grid-template-columns:repeat(2,1fr)}.theme-sample-cards>div:last-child{display:none}}
@media(prefers-reduced-motion:reduce){html[data-theme] .quickcard:hover{transform:none}}

/* Signup: optional repeatable pet names and breeds (up to 12). */
.registration-pet-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.registration-pet-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;
 align-items:end;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:13px}
.registration-pet-row label{min-width:0;margin:0;font-weight:700}
.registration-pet-row input{display:block;width:100%;margin-top:5px}
.registration-pet-row .btn{margin-bottom:1px;white-space:nowrap}
.registration-pet-group>.muted{margin-top:6px}
@media(max-width:620px){
 .registration-pet-row{grid-template-columns:1fr;gap:7px}
 .registration-pet-row .btn{justify-self:start}
}

/* Accountless children: keep photo actions accessible at narrow screen widths. */
@media(max-width:760px){.profile-intro{flex-wrap:wrap}.profile-intro>.profile-actions{width:100%;padding-bottom:8px}.profile-intro>.profile-actions .btn{max-width:100%}}

/* Photo shortcuts for relatives who do not have logins. */
.tree-child-photo-actions,.child-photo-upload{
 display:flex;flex-direction:column;align-items:flex-start;gap:10px;
 padding:16px 18px;margin:16px 0;border:1px solid var(--line);
 background:var(--soft);border-radius:17px
}
.tree-child-photo-actions strong,.child-photo-upload b{color:var(--ink)}
.tree-child-photo-actions .flex,.child-photo-buttons{gap:10px}
.child-photo-upload .btn{white-space:normal;text-align:center}
@media(max-width:760px){
 .tree-child-photo-actions,.child-photo-upload{padding:13px}
 .tree-child-photo-actions .btn,.child-photo-buttons .btn{min-height:41px}
}

/* Interactive family polls */
.poll-page-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));align-items:start;gap:16px}
.poll-card h3{font-size:20px;margin-top:5px;overflow-wrap:anywhere}
.poll-card .section-head{align-items:flex-start}
.poll-vote{margin-top:14px}
.poll-options{display:flex;flex-direction:column;gap:7px}
.poll-option{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--soft);
 border:1px solid var(--line);border-radius:12px;cursor:pointer;font-weight:600}
.poll-option input{width:18px;height:18px;flex-shrink:0;accent-color:var(--green)}
.poll-option span{overflow-wrap:anywhere}
.poll-results{margin-top:15px;display:flex;flex-direction:column;gap:12px}
.poll-result-label{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:5px}
.poll-result-track{height:9px;background:var(--soft);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.poll-result-fill{height:100%;background:var(--green);border-radius:999px}
@media(max-width:760px){.poll-card{padding:17px}.poll-page-grid{gap:12px}}

/* Social family activity stream */
.family-composer{margin-bottom:16px}
.family-composer textarea{min-height:77px}
.family-composer-buttons{margin-top:12px;gap:9px}
.family-feed-title{margin-top:18px}
.family-feed-title h2{font-size:22px}
.family-feed-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-bottom:21px}
.family-feed-card{padding:18px;min-width:0}
.feed-byline{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.feed-byline b{font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.feed-letter{height:39px;min-width:39px;border-radius:50%;display:grid;place-items:center;background:var(--soft);font-weight:800;color:var(--green)}
.feed-message{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
.feed-actions{align-items:center}
.feed-comment{font-size:12px;border-radius:8px;background:var(--soft);padding:8px 9px;margin-top:7px;overflow-wrap:anywhere}
.feed-reply-form{margin-top:12px}.feed-reply-form .flex{align-items:center;gap:8px}
.feed-reply-form input{flex:1;min-width:0}
.feed-photo-btn{width:100%;padding:0;border:0;background:var(--soft);border-radius:12px;overflow:hidden;cursor:pointer}
.feed-photo-btn .feed-photo-img{display:block;width:100%;max-height:240px;object-fit:cover}
@media(max-width:760px){
 .family-feed-list{grid-template-columns:1fr;gap:12px}
 .family-feed-card,.family-composer{padding:15px}
 .family-composer-buttons .btn{padding:9px 11px;font-size:12px}
}

/* Mobile usability: main destinations and a bottom-sheet More menu. */
.mobile-more-backdrop,.mobile-more-panel{display:none}
@media(max-width:760px){
 .topbar{height:62px;gap:8px;padding:0 13px}
 .topbar .brand{min-width:0;gap:8px}
 .topbar .brand strong{font-size:14px;white-space:nowrap}
 .topbar .brand small{font-size:10px}
 .topbar .mark{width:33px;height:33px;min-width:33px}
 .topbar .user-pill{gap:0}
 .topbar .user-pill .btn{display:none}
 .main{padding:15px 0 calc(92px + env(safe-area-inset-bottom))}
 .layout{padding:0 12px}
 .mobile-nav{z-index:40;justify-content:space-between;gap:0;padding:6px 5px calc(6px + env(safe-area-inset-bottom));
  background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(0,0,0,.07)}
 .mobile-nav button{flex:1;min-height:51px;min-width:0;padding:5px 0;font-size:10px;gap:2px;color:var(--muted)}
 .mobile-nav .ico{font-size:23px}
 .mobile-nav button.active{color:var(--green)}
 .mobile-more-backdrop{display:block;position:fixed;inset:0;background:rgba(10,19,20,.54);z-index:36}
 .mobile-more-panel{display:block;position:fixed;z-index:39;left:0;right:0;
  bottom:calc(65px + env(safe-area-inset-bottom));max-height:min(72dvh,650px);
  overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:22px 22px 0 0;
  padding:19px 16px 16px;box-shadow:0 -10px 35px rgba(0,0,0,.12)}
 .mobile-more-panel .section-head{margin-bottom:13px}
 .mobile-more-panel h3{color:var(--ink);font-size:18px}
 .mobile-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .mobile-more-link{background:var(--soft);border:1px solid var(--line);color:var(--ink);border-radius:13px;
  padding:12px 10px;min-height:55px;display:flex;align-items:center;gap:9px;
  font-size:13px;font-weight:700;text-align:left;overflow-wrap:anywhere}
 .mobile-more-link span{font-size:21px;color:var(--green)}
 .mobile-more-logout{margin-top:14px;width:100%}
 .main>.grid.cols3.mb{display:none}
 .page-head{gap:12px;margin-bottom:16px}
 .page-head h2{font-size:25px}
 .card{padding:17px}
 .hero{padding:21px;min-height:158px}
 .hero h1{font-size:30px}
 .form input,.form textarea,.form select{font-size:16px}
 .modal-back{padding:12px}
 .modal{padding:19px;max-height:88dvh;border-radius:18px}
 .tabs{overflow-x:auto;scrollbar-width:thin;flex-wrap:nowrap}
 .tabs .tab{white-space:nowrap;flex:0 0 auto}
 .section-head{flex-wrap:wrap}
 .section-head .btn{flex-shrink:0}
}
@media(max-width:370px){
 .topbar .brand small{display:none}
 .topbar .brand strong{font-size:13px}
 .mobile-more-link{font-size:12px}
 .cols4{grid-template-columns:1fr}
}

/* Photo previews fit the whole frame, including on small album tiles. */
.photo-grid .photo{min-width:0;min-height:0}
.photo-grid .photo img,
.photo-show img,
.feed-photo-btn .feed-photo-img,
.pet-photo-wrap .pet-photo,
.pet-form-photo .pet-photo{
 object-fit:contain;
 object-position:center;
 min-height:0;
}
.photo-show{height:auto}
.photo-show img{height:278px;background:var(--soft)}
.photo-show .photo-overlay{
 position:static;
 background:var(--soft);
 color:var(--ink);
 padding:12px 14px;
 overflow-wrap:anywhere;
}
.photo-show .photo-overlay small{color:var(--muted)}

/* Full photo viewer: never crop a selected photo. */
.modal.photo-detail-dialog{
 width:100%;
 max-width:min(1000px, calc(100vw - 28px));
 max-height:calc(100dvh - 28px);
 overflow-y:auto;
 padding:20px;
}
.photo-full-viewer{
 display:flex;
 justify-content:center;
 align-items:center;
 width:100%;
 min-height:0;
 border-radius:14px;
 padding:8px;
 background:#1c2325;
}
.photo-full-viewer .photo-full-image{
 display:block;
 flex:0 1 auto;
 width:auto;
 height:auto;
 min-height:0;
 max-width:100%;
 max-height:min(70dvh, 820px);
 object-fit:contain;
 object-position:center center;
 background:transparent;
 border-radius:7px;
}
/* A selected pet photo should also retain its entire original frame. */
.pet-detail-photo{height:auto;min-height:0;max-height:70dvh;padding:8px}
.pet-detail-photo .pet-photo{
 display:block;
 width:auto;
 height:auto;
 min-height:0;
 max-width:100%;
 max-height:65dvh;
 object-fit:contain;
}
@media(max-width:760px){
 .modal.photo-detail-dialog{
  width:100%;
  max-width:calc(100vw - 12px);
  max-height:calc(100dvh - 12px);
  padding:12px;
 }
 .photo-full-viewer{padding:4px;border-radius:10px}
 .photo-full-viewer .photo-full-image{max-height:65dvh}
 .pet-detail-photo .pet-photo{max-height:60dvh}
}


/* Announcement discussions keep long replies readable on phones and all themes. */
.announcement-message,.announcement-comment p{white-space:pre-wrap;overflow-wrap:anywhere}
.announcement-comments-preview .btn{margin-top:9px;max-width:100%;white-space:normal;text-align:left}
.announcement-comment{overflow-wrap:anywhere}

/* A shared name pot with simple administrator controls. */
.santa-pot-list{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.santa-pot-name{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--soft);overflow-wrap:anywhere}
.santa-pot-name>span,.santa-pot-name>.grow{min-width:0}
.santa-pot-name .btn{flex-shrink:0}
.santa-add-name{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;margin-top:18px}
.santa-add-name>label{grid-column:1/-1;margin:0}
.santa-add-name input{width:100%;min-width:0}
.santa-pot-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.santa-mix-status{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.santa-match-list .list-row{align-items:flex-start;flex-wrap:wrap;overflow-wrap:anywhere}
.santa-gift-copy{white-space:pre-wrap;overflow-wrap:anywhere}
.ai-gift-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65}
.ai-gift-results:empty{display:none}
@media(max-width:600px){
 .santa-pot-list,.santa-add-name{grid-template-columns:1fr}
 .santa-add-name>.btn{width:100%}
 .santa-pot-actions>.btn{flex:1 1 auto}
 .santa-match-list .list-row{gap:8px}
}

/* Calendar dashboard: coming up, trips, personal relevance, birthdays */
.calendar-coming-up{margin-bottom:18px;padding:26px}.coming-up-list{display:flex;flex-direction:column;gap:10px}
.coming-up-row{display:flex;align-items:center;gap:13px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);min-width:0}
.coming-up-row.event-coming{border-left:5px solid var(--event-accent,#89523d);background:color-mix(in srgb,var(--event-accent,#89523d) 6%,var(--paper))}
.coming-up-row.birthday-coming{background:linear-gradient(100deg,#fff8e9,#fffdf9);border-color:#ead5ae}
.coming-up-date{width:76px;flex:0 0 76px;text-align:center;padding:8px;border-radius:11px;background:var(--soft)}
.coming-up-date strong{display:block;font-size:14px}.coming-up-date small{font-size:10px;color:var(--muted)}
.badge.attention{background:#fff0d7;color:#8a541f}.quick-rsvp{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.quick-rsvp .btn{padding:5px 9px;font-size:11px}
.calendar-trip-banner{margin:0 0 18px;padding:28px;border-radius:22px;border:1px solid color-mix(in srgb,var(--event-accent,#89523d) 35%,var(--line));border-left:7px solid var(--event-accent,#89523d);background:linear-gradient(115deg,color-mix(in srgb,var(--event-accent,#89523d) 11%,var(--paper)),var(--paper));box-shadow:var(--shadow)}
.trip-banner-top{display:flex;gap:18px;align-items:flex-start;justify-content:space-between}.trip-banner-top h2{margin:4px 0 5px}.trip-banner-description{margin-top:15px;max-width:850px}
.trip-banner-itinerary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:18px}.trip-banner-itinerary>div,.trip-itinerary-row{display:flex;gap:10px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.trip-banner-itinerary span,.trip-itinerary-row span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--event-accent,var(--green));color:white;font-size:11px;font-weight:800;flex:0 0 24px}
.trip-banner-footer{display:flex;justify-content:space-between;gap:15px;align-items:flex-end;flex-wrap:wrap;margin-top:17px}.trip-banner-footer .rsvp-inline{margin:0}
.calendar-relevance-grid{margin-bottom:18px}.calendar-for-you,.calendar-birthdays{min-height:100%}.for-you-group+.for-you-group{margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}
.for-you-row{padding:10px 0;border-bottom:1px solid var(--line)}.for-you-row:last-child{border-bottom:0}.for-you-link,.birthday-spotlight-row,.birthday-day-row{width:100%;border:0;background:transparent;display:flex;align-items:center;gap:10px;text-align:left;padding:10px 0;border-bottom:1px solid var(--line);color:inherit}
.for-you-link:last-child,.birthday-spotlight-row:last-child{border-bottom:0}.for-you-link:hover,.birthday-spotlight-row:hover,.birthday-day-row:hover{background:var(--soft)}
.birthday-spotlight-row{border-radius:10px;padding:10px}.birthday-cake{font-size:20px}.trip-itinerary{margin-top:18px}.trip-itinerary .eyebrow{margin-bottom:8px}.trip-itinerary-row{margin:7px 0}
.event-detail-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media(max-width:760px){.calendar-coming-up{padding:16px}.coming-up-row{align-items:flex-start;flex-wrap:wrap}.coming-up-date{width:68px;flex-basis:68px}.coming-up-row>.btn{width:100%}.trip-banner-top{display:block}.trip-banner-actions{margin-top:15px}.trip-banner-itinerary{grid-template-columns:1fr}.calendar-trip-banner{padding:20px}.trip-banner-footer{align-items:stretch}.quick-rsvp{width:100%}.quick-rsvp .btn{flex:1}.calendar-relevance-grid{grid-template-columns:1fr}}