:root{
  --bg:#171827;--bg2:#24233b;--card:rgba(255,255,255,.115);--card2:rgba(255,255,255,.075);
  --text:#fbfbff;--muted:#c9c7da;--accent:#f7b267;--accent2:#8dd7cf;--danger:#ff8c8c;
  --shadow:0 18px 60px rgba(0,0,0,.22);--soft-shadow:0 12px 32px rgba(0,0,0,.16);
  font-family:ui-rounded,"SF Pro Rounded",Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{min-height:100vh;background-image:radial-gradient(circle at 15% 0%,rgba(247,178,103,.25),transparent 34%),radial-gradient(circle at 90% 20%,rgba(141,215,207,.22),transparent 32%),linear-gradient(145deg,var(--bg),var(--bg2));background-attachment:fixed;transition:background .55s ease,color .25s ease}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.wide{width:100%}.shell{min-height:100vh;padding:clamp(16px,2vw,30px)}

/* Header / family portals */
.topbar{display:flex;align-items:center;gap:18px;margin-bottom:20px}.brand{display:flex;align-items:center;gap:12px;min-width:max-content}.brand-button{border:0;background:transparent;color:inherit;padding:0;text-align:left}.logo{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;font-size:30px;background:linear-gradient(145deg,var(--accent),var(--accent2));box-shadow:var(--shadow);position:relative;overflow:hidden}.logo:after{content:"";position:absolute;inset:2px;border:1px solid rgba(255,255,255,.35);border-radius:16px;pointer-events:none}.brand h1{font-size:clamp(26px,3vw,42px);margin:0;letter-spacing:-.04em}.brand small{display:block;color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800}.member-strip{display:flex;gap:9px;align-items:center;overflow:auto;flex:1;padding:5px 3px;scrollbar-width:thin}.member-portal{--person-a:var(--accent);--person-b:var(--accent2);border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.06);color:var(--text);min-width:80px;padding:7px 9px 8px;border-radius:19px;display:grid;justify-items:center;gap:4px;backdrop-filter:blur(16px);transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}.member-portal:hover,.member-portal:focus,.member-portal.active{transform:translateY(-2px);outline:none;border-color:var(--person-a);background:rgba(255,255,255,.12);box-shadow:0 7px 24px rgba(0,0,0,.16)}.portal-art{width:58px;height:36px;display:flex;align-items:center;justify-content:space-around;border-radius:14px;background:linear-gradient(135deg,var(--person-a),var(--person-b));color:#171827;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}.portal-art b{font-size:21px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}.portal-art i{font-style:normal;font-size:12px;opacity:.75}.portal-name{font-size:12px;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.family-portal{--person-a:#f7b267;--person-b:#8dd7cf}.actions{display:flex;gap:9px;white-space:nowrap}.icon-btn,.primary,.ghost,.danger,.tab-btn{border:0;border-radius:14px;padding:11px 14px;transition:transform .16s ease,filter .16s ease,background .16s ease}.icon-btn,.ghost,.tab-btn{background:var(--card2);color:var(--text)}.icon-btn:hover,.ghost:hover,.tab-btn:hover{background:rgba(255,255,255,.12)}.primary{background:linear-gradient(145deg,var(--accent),var(--accent2));color:#171827;font-weight:900}.primary:hover{filter:brightness(1.06)}.danger{background:rgba(255,90,90,.18);color:#ffd6d6}.compact{padding-inline:13px}.small-btn{padding:5px 10px}

/* Layout */
.grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr);gap:18px}.left,.right{display:grid;gap:18px;align-content:start}.card{background:var(--card);border:1px solid rgba(255,255,255,.115);box-shadow:var(--shadow);border-radius:28px;padding:20px;backdrop-filter:blur(22px);position:relative}.card h2{margin:0 0 14px;font-size:21px;letter-spacing:-.02em}.section-kicker{color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:10px;font-weight:900;margin-bottom:4px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.focus-badge,.timeout-pill{padding:8px 12px;border-radius:99px;background:rgba(255,255,255,.10);font-size:12px;color:var(--muted)}.footer-note{text-align:center;color:rgba(255,255,255,.38);font-size:11px;padding:18px 0 4px}

/* Hero */
.hero{overflow:hidden;min-height:225px;display:flex;align-items:center;justify-content:space-between;gap:24px}.hero:before{content:"";position:absolute;inset:-45%;background:conic-gradient(from 90deg at 50% 50%,var(--accent),transparent 18%,var(--accent2),transparent 38%,var(--accent),transparent 70%);opacity:.12;animation:drift 24s linear infinite}.hero>*{position:relative;z-index:1}@keyframes drift{to{transform:rotate(360deg)}}.hero-copy{max-width:62%}.eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900}.hero h2{font-size:clamp(32px,4vw,58px);margin:6px 0 6px;letter-spacing:-.055em;line-height:.98}.hero p{margin:0;color:var(--muted);font-size:clamp(14px,1.5vw,19px);line-height:1.45}.hero-next{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;margin-top:18px;width:max-content;max-width:100%;padding:9px 12px;border-radius:15px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.09)}.hero-next span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:900}.hero-next strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hero-next small{color:var(--muted)}.hero-family-art{width:min(430px,40%);min-width:310px;min-height:180px;display:grid;place-items:center;position:relative}.mosaic-halo{position:absolute;width:88%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.11),transparent 62%);filter:blur(3px)}.family-portraits{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;position:relative;z-index:2}.family-person{--person-a:#f7b267;--person-b:#8dd7cf;width:94px;min-height:110px;border:1px solid rgba(255,255,255,.22);border-radius:28px;background:linear-gradient(150deg,var(--person-a),var(--person-b));color:#171827;display:grid;place-items:center;align-content:center;gap:3px;box-shadow:0 15px 34px rgba(0,0,0,.2),inset 0 0 0 2px rgba(255,255,255,.24);transform:rotate(var(--tilt,0deg));transition:.2s}.family-person:hover,.family-person:focus{transform:translateY(-5px) rotate(0);outline:3px solid rgba(255,255,255,.65)}.portrait-motif{font-size:14px;opacity:.65}.portrait-avatar{font-size:38px;line-height:1.1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}.portrait-name{font-size:12px;font-weight:900;max-width:82px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.focus-hero{--person-a:var(--accent);--person-b:var(--accent2);background:linear-gradient(120deg,rgba(255,255,255,.13),rgba(255,255,255,.08)),radial-gradient(circle at 90% 30%,rgba(255,255,255,.12),transparent 35%)}.focus-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}.focus-character{min-width:235px;min-height:180px;display:grid;place-items:center;align-content:center;position:relative}.focus-avatar{font-size:82px;z-index:2;filter:drop-shadow(0 10px 16px rgba(0,0,0,.25))}.focus-theme-name{z-index:2;font-weight:900;margin-top:5px}.theme-scene{--person-a:var(--accent);--person-b:var(--accent2);position:absolute;inset:5px;border-radius:32px;background:radial-gradient(circle at 25% 35%,var(--person-a),transparent 25%),radial-gradient(circle at 75% 65%,var(--person-b),transparent 28%);opacity:.42;display:flex;justify-content:space-between;align-items:flex-start;padding:16px;font-size:24px}.theme-scene span:nth-child(2){align-self:end;font-size:30px}.theme-scene span:nth-child(3){align-self:center}.focus-character .theme-scene{z-index:1}

/* Lists */
.calendar-list,.task-list,.note-list,.shopping-list{display:grid;gap:10px}.event{display:grid;grid-template-columns:88px 1fr auto;gap:14px;align-items:center;padding:13px;border-radius:18px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.05)}.event .when{font-weight:900}.event .title{font-weight:900;font-size:17px}.event .sub,.muted{color:var(--muted);font-size:13px}.chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}.chip{--person-a:var(--accent);--person-b:var(--accent2);font-size:11px;padding:4px 8px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid var(--person-a);display:inline-flex;gap:4px;align-items:center}.task,.shopping-item{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.08)}.task:last-child,.shopping-item:last-child{border-bottom:0}.task-copy{flex:1}.check{width:25px;height:25px;border-radius:9px;border:2px solid var(--accent2);background:transparent;color:var(--text);display:grid;place-items:center;padding:0}.readonly-check{width:25px;text-align:center;color:var(--accent2)}.done{text-decoration:line-through;opacity:.56}.note{background:rgba(255,255,255,.065);border-radius:16px;padding:12px;line-height:1.4;border-left:3px solid var(--accent)}.meal-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}.meal-row:last-child{border-bottom:0}.empty{padding:20px;text-align:center;color:var(--muted);border:1px dashed rgba(255,255,255,.16);border-radius:18px}

/* Forms / auth */
.login-wrap,.pair-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(480px,100%);padding:32px;border-radius:32px;background:var(--card);border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow);backdrop-filter:blur(24px);position:relative;overflow:hidden}.auth-card>*{position:relative;z-index:2}.auth-card .logo{margin-bottom:18px}.auth-card h1{font-size:44px;margin:0;letter-spacing:-.05em}.auth-card p{color:var(--muted)}.login-mosaic{position:absolute;right:-25px;top:-25px;display:grid;grid-template-columns:repeat(2,70px);gap:6px;transform:rotate(8deg);opacity:.28}.login-mosaic span{height:70px;border-radius:22px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:30px}.auth-art:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-120px;bottom:-130px;background:radial-gradient(circle,var(--accent2),transparent 66%);opacity:.25}.auth-card label,.modal label{display:grid;gap:7px;margin:14px 0;font-size:12px;font-weight:800;color:var(--muted)}input,select,textarea{width:100%;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18);color:var(--text);border-radius:13px;padding:12px 13px;outline:none}select option{background:#22233a;color:#fff}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,255,255,.08)}textarea{min-height:90px;resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.inline-check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:9px!important}.inline-check input{width:auto}.setting-check{padding:12px;border-radius:15px;background:rgba(255,255,255,.05);align-self:end}.save-status{margin-left:10px;color:var(--accent2);font-size:12px;font-weight:800}.error-text{color:#ffc4c4;font-size:12px}.form-actions{display:flex;align-items:center;gap:12px;margin-top:16px}.field-group{margin:15px 0}.field-label{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:7px}

/* Modals */
.modal-backdrop{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.58);display:grid;place-items:center;padding:18px}.modal{width:min(740px,100%);max-height:92vh;overflow:auto;background:#22233a;border:1px solid rgba(255,255,255,.14);border-radius:28px;padding:24px;box-shadow:var(--shadow)}.modal-wide{width:min(1040px,100%)}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.modal h2{margin:0;font-size:30px;letter-spacing:-.035em}.modal h3{margin:18px 0 7px}.people-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}.person-check{margin:0!important}.person-check input{display:none}.person-check span{--person-a:var(--accent);display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:13px;background:rgba(255,255,255,.07);border:1px solid transparent}.person-check input:checked+span{border-color:var(--person-a);background:rgba(255,255,255,.16)}.person-check b{font-size:18px}.tab-row{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.tab-btn.active{background:linear-gradient(145deg,var(--accent),var(--accent2));color:#171827;font-weight:900}.settings-layout{display:grid;grid-template-columns:190px 1fr;gap:22px;margin-top:22px}.settings-nav{display:grid;gap:7px;align-content:start}.settings-nav-btn{border:0;border-radius:14px;padding:12px;text-align:left;background:transparent;color:var(--muted);font-weight:800}.settings-nav-btn:hover,.settings-nav-btn.active{background:rgba(255,255,255,.09);color:var(--text)}.settings-content{min-width:0}.settings-content>h3{font-size:27px;margin-top:4px}.settings-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.profile-preview{--person-a:var(--accent);--person-b:var(--accent2);position:relative;overflow:hidden;min-height:125px;border-radius:25px;padding:18px;display:flex;align-items:center;gap:15px;background:rgba(255,255,255,.08);border:1px solid var(--person-a)}.profile-preview>*:not(.theme-scene){position:relative;z-index:2}.profile-preview .theme-scene{right:0;left:auto;width:40%;opacity:.55}.profile-avatar{width:76px;height:76px;border-radius:25px;display:grid;place-items:center;background:linear-gradient(145deg,var(--person-a),var(--person-b));font-size:42px;box-shadow:var(--soft-shadow)}.profile-preview h3{font-size:27px;margin:0}.profile-preview p{margin:4px 0 0;color:var(--muted)}.profile-preview.mini{min-height:95px;margin:16px 0}.profile-preview.mini .profile-avatar{width:60px;height:60px;font-size:33px}.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:8px 0 18px}.theme-tile{--person-a:var(--accent);--person-b:var(--accent2);border:1px solid rgba(255,255,255,.11);border-radius:18px;padding:11px;background:rgba(255,255,255,.05);color:var(--text);text-align:left;min-height:116px}.theme-tile:hover,.theme-tile.active{border-color:var(--person-a);background:rgba(255,255,255,.12);box-shadow:0 0 0 2px rgba(255,255,255,.05)}.theme-mini-art{height:48px;border-radius:13px;background:linear-gradient(135deg,var(--person-a),var(--person-b));display:flex;align-items:center;justify-content:space-around;color:#171827;font-size:19px;margin-bottom:8px}.theme-tile strong{display:block}.theme-tile small{display:block;color:var(--muted);margin-top:2px}.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:7px;margin:8px 0 18px}.avatar-choice{height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.05);font-size:24px}.avatar-choice:hover,.avatar-choice.active{border-color:var(--accent);background:rgba(255,255,255,.13);transform:translateY(-1px)}.people-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;margin-top:14px}.person-admin-card{--person-a:var(--accent);--person-b:var(--accent2);border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:12px;background:rgba(255,255,255,.06);color:var(--text);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;text-align:left}.person-admin-card:hover{border-color:var(--person-a);transform:translateY(-1px)}.person-admin-card.inactive{opacity:.48}.person-admin-avatar{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,var(--person-a),var(--person-b));font-size:28px}.person-admin-copy{display:grid;gap:2px;min-width:0}.person-admin-copy strong{font-size:16px}.person-admin-copy span,.person-admin-copy small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.edit-pill{font-size:11px;padding:6px 8px;border-radius:99px;background:rgba(255,255,255,.08)}.toggle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}.toggle-card{display:flex!important;align-items:flex-start;gap:9px!important;margin:0!important;padding:11px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}.toggle-card input{width:auto;margin-top:3px}.toggle-card span{display:grid;gap:2px}.toggle-card small{font-weight:500;color:var(--muted)}.pair-card{text-align:center;padding:18px}.pair-illustration{font-size:48px;margin:12px 0}.pair-illustration span{font-size:26px;color:var(--muted)}.pair-code{font-size:clamp(34px,6vw,64px);letter-spacing:.15em;font-weight:900;margin:22px 0;color:var(--accent2)}

/* Ambient */
.ambient{position:fixed;inset:0;z-index:40;display:grid;place-items:center;text-align:center;padding:30px;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.12),transparent 30%),linear-gradient(145deg,var(--bg),var(--bg2));animation:ambientIn .7s ease}.ambient-inner{width:min(1000px,100%)}.ambient-brand{text-transform:uppercase;letter-spacing:.15em;font-size:12px;color:var(--muted);font-weight:900}.ambient .big-time{font-size:clamp(70px,14vw,180px);font-weight:250;letter-spacing:-.07em;line-height:1}.ambient .date{font-size:clamp(18px,3vw,34px);color:var(--muted)}.ambient .next{margin:24px 0;font-size:clamp(18px,2vw,28px)}.ambient .family-portraits{margin-top:24px}.ambient-hint{margin-top:20px;color:rgba(255,255,255,.42);font-size:12px}@keyframes ambientIn{from{opacity:0}to{opacity:1}}

/* Theme palettes */
body.theme-enchanted{--bg:#432d46;--bg2:#665068;--accent:#f3b6cf;--accent2:#b9ddb5}body.theme-fairy{--bg:#282446;--bg2:#544f79;--accent:#f5d6ff;--accent2:#9fe8ef}body.theme-dragon{--bg:#241e24;--bg2:#50342e;--accent:#f0a45d;--accent2:#a9c979}body.theme-dino{--bg:#21342c;--bg2:#415a3a;--accent:#c6df6f;--accent2:#e6b968}body.theme-cyber{--bg:#111827;--bg2:#172554;--accent:#22d3ee;--accent2:#a78bfa}body.theme-space{--bg:#101225;--bg2:#28204a;--accent:#b9a8ff;--accent2:#82d4ff}body.theme-woodland{--bg:#2e342b;--bg2:#5b5140;--accent:#d8b27c;--accent2:#a4c2a0}body.theme-homestead{--bg:#3c3028;--bg2:#6b5341;--accent:#e7c38e;--accent2:#abc18b}body.theme-storybook{--bg:#463241;--bg2:#40546b;--accent:#ffb7a5;--accent2:#a9d8ff}body.theme-ocean{--bg:#143848;--bg2:#254f67;--accent:#8be0dc;--accent2:#9bbcff}body.theme-retro{--bg:#21173a;--bg2:#3f2054;--accent:#ff8bd8;--accent2:#7ee7ff}body.theme-minimal{--bg:#171827;--bg2:#24233b;--accent:#f7b267;--accent2:#8dd7cf}

/* Accessibility / TV remote */
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

@media(max-width:1100px){.hero-copy{max-width:58%}.hero-family-art{min-width:280px}.family-person{width:82px;min-height:98px}.portrait-avatar{font-size:32px}.settings-layout{grid-template-columns:160px 1fr}}
@media(max-width:900px){.topbar{flex-wrap:wrap}.member-strip{order:3;width:100%}.grid{grid-template-columns:1fr}.hero{min-height:210px}.event{grid-template-columns:75px 1fr}.event>.event-actions{display:none}.settings-layout{grid-template-columns:1fr}.settings-nav{display:flex;overflow:auto}.settings-nav-btn{white-space:nowrap}.toggle-grid{grid-template-columns:1fr}.profile-preview .theme-scene{display:none}}
@media(max-width:650px){.shell{padding:12px}.topbar{gap:10px}.brand h1{font-size:28px}.logo{width:45px;height:45px;border-radius:15px;font-size:25px}.actions{margin-left:auto}.icon-btn{padding:9px 10px}.member-portal{min-width:72px}.hero{display:block;padding:18px}.hero-copy{max-width:100%}.hero-family-art{width:100%;min-width:0;margin-top:18px;min-height:120px}.family-person{width:72px;min-height:86px;border-radius:22px}.portrait-avatar{font-size:28px}.hero-next{grid-template-columns:auto 1fr;max-width:100%}.hero-next small{grid-column:2}.focus-character{min-width:0;margin-top:16px}.form-row{grid-template-columns:1fr}.modal{padding:18px;border-radius:22px}.settings-title-row{display:grid}.theme-grid{grid-template-columns:repeat(2,1fr)}.people-admin-grid{grid-template-columns:1fr}.pair-code{letter-spacing:.08em}.event{grid-template-columns:68px 1fr;padding:11px}.focus-badge{display:none}}
@media(min-width:1500px){.shell{padding:32px 44px}.card{padding:26px}.grid{gap:24px}.left,.right{gap:24px}.event{padding:17px}.card h2{font-size:24px}.hero{min-height:260px}.family-person{width:106px;min-height:124px}.portrait-avatar{font-size:44px}}