:root {
  --ink:#060b10; --navy:#07121c; --navy2:#0b1a27; --navy3:#102536;
  --gold:#d9ad5c; --gold2:#f0d18d; --gold3:#9a642d; --cream:#f5eedf;
  --text:#f6f3eb; --muted:#97a4ad; --muted2:#6f7d87; --green:#47d178;
  --red:#ed5249; --line:rgba(255,255,255,.075); --card:rgba(14,27,38,.83);
}
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:#030609; color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
body { min-height:100vh; background:radial-gradient(circle at 15% 5%,#10202e 0,transparent 28%),radial-gradient(circle at 85% 90%,#1f1307 0,transparent 27%),#030609; }
.desktop-stage { min-height:100vh; display:grid; place-items:center; padding:22px; }
.phone-shell { position:relative; width:min(430px,100%); height:min(900px,calc(100vh - 44px)); min-height:680px; overflow:hidden; border-radius:38px; border:1px solid rgba(240,209,141,.18); background:linear-gradient(180deg,#08141e,#050a0f); box-shadow:0 36px 110px rgba(0,0,0,.66),0 0 0 8px rgba(255,255,255,.012); isolation:isolate; }
.phone-shell::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(circle at 85% -10%,rgba(217,173,92,.12),transparent 32%),radial-gradient(circle at 0 62%,rgba(41,102,145,.08),transparent 30%); }
.app-content { height:100%; overflow:auto; padding:calc(25px + env(safe-area-inset-top)) 18px calc(104px + env(safe-area-inset-bottom)); scrollbar-width:none; }
.app-content::-webkit-scrollbar { display:none; }
.eyebrow { margin:0; color:var(--gold); text-transform:uppercase; letter-spacing:.14em; font-size:.61rem; font-weight:800; }
.topbar { display:flex; justify-content:space-between; align-items:center; min-height:58px; }
.brand { display:flex; align-items:center; min-width:0; gap:10px; }
.brand img { width:39px; height:39px; filter:drop-shadow(0 8px 17px rgba(0,0,0,.35)); }
.brand-copy { min-width:0; }
.brand-copy h1 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:3px 0 0; font-family:Georgia,"Times New Roman",serif; font-size:1.13rem; font-weight:500; }
.avatar-me { width:39px; height:39px; border:1px solid rgba(240,209,141,.28); border-radius:50%; display:grid; place-items:center; color:#1a1207; background:linear-gradient(145deg,var(--gold2),var(--gold3)); font-weight:850; font-size:.72rem; cursor:pointer; box-shadow:0 7px 25px rgba(0,0,0,.28); }
.live-hero { position:relative; overflow:hidden; display:flex; align-items:flex-end; min-height:183px; margin:14px 0 13px; padding:22px 19px; border-radius:27px; border:1px solid rgba(240,209,141,.13); background:linear-gradient(130deg,rgba(21,41,56,.97),rgba(7,15,22,.92)); box-shadow:inset 0 1px rgba(255,255,255,.025),0 20px 55px rgba(0,0,0,.23); }
.live-hero::after { content:""; position:absolute; width:210px; height:210px; right:-78px; top:-70px; border:1px solid rgba(217,173,92,.11); border-radius:50%; box-shadow:0 0 0 24px rgba(217,173,92,.025),0 0 0 50px rgba(217,173,92,.018); }
.hero-copy { position:relative; z-index:2; max-width:265px; }
.hero-copy h2 { margin:7px 0 8px; font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:1.84rem; line-height:1.02; letter-spacing:-.025em; }
.hero-copy h2 em { color:var(--gold2); font-style:normal; }
.hero-copy > p:last-child { margin:0; color:#a9b3ba; font-size:.74rem; line-height:1.5; max-width:235px; }
.hero-crest { position:absolute; z-index:1; right:3px; bottom:-10px; opacity:.18; }
.hero-crest img { width:132px; height:132px; }
.connection-strip { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 13px; border-radius:15px; background:rgba(7,15,21,.7); border:1px solid var(--line); color:#b3bdc3; font-size:.66rem; }
.connection-strip span { display:flex; align-items:center; gap:7px; }
.connection-strip b { color:#d6dde1; font-size:.64rem; }
.pulse-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(71,209,120,.45); animation:pulse 2s infinite; }
@keyframes pulse { 70%{box-shadow:0 0 0 7px rgba(71,209,120,0)} 100%{box-shadow:0 0 0 0 rgba(71,209,120,0)} }
.section-head { display:flex; align-items:end; justify-content:space-between; margin:22px 2px 9px; }
.section-head h3 { margin:3px 0 0; font-family:Georgia,"Times New Roman",serif; font-size:1.25rem; font-weight:500; }
.encrypted-pill { display:flex; align-items:center; gap:5px; padding:6px 8px; border:1px solid rgba(217,173,92,.14); border-radius:999px; color:#bfa66f; font-size:.58rem; }
.encrypted-pill svg { width:12px; height:12px; }
.family-list { display:grid; gap:8px; }
.member-card { display:grid; grid-template-columns:47px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:72px; padding:10px 10px 10px 11px; border-radius:20px; border:1px solid rgba(255,255,255,.055); background:linear-gradient(100deg,rgba(16,31,43,.94),rgba(10,20,29,.83)); box-shadow:0 10px 28px rgba(0,0,0,.12); }
.member-avatar { width:47px; height:47px; display:grid; place-items:center; border-radius:50%; color:#211507; background:linear-gradient(145deg,#f1d28d,#a56c31); font-family:Georgia,serif; font-size:1rem; box-shadow:inset 0 0 0 2px rgba(255,255,255,.13); }
.member-meta { min-width:0; }
.member-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.88rem; font-weight:720; }
.member-status { display:flex; align-items:center; gap:6px; margin-top:4px; color:#82909a; font-size:.63rem; }
.status-dot { width:6px; height:6px; border-radius:50%; }
.status-dot.family { background:var(--gold); box-shadow:0 0 12px rgba(217,173,92,.35); }
.actions { display:flex; gap:7px; }
.icon-btn { width:39px; height:39px; border:0; border-radius:50%; color:white; display:grid; place-items:center; cursor:pointer; transition:transform .14s ease,filter .14s ease; }
.icon-btn:active { transform:scale(.94); }
.icon-btn svg { width:18px; height:18px; }
.icon-btn.voice { background:linear-gradient(145deg,#56d984,#2eac5d); box-shadow:0 8px 20px rgba(47,178,96,.17); }
.icon-btn.video { background:linear-gradient(145deg,#4ca7e8,#2475b9); box-shadow:0 8px 20px rgba(36,117,185,.17); }
.family-promise { display:flex; gap:13px; align-items:center; margin-top:16px; padding:14px; border-radius:20px; border:1px solid rgba(217,173,92,.11); background:linear-gradient(115deg,rgba(83,55,22,.18),rgba(14,24,31,.7)); }
.promise-icon { flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(240,209,141,.22); color:var(--gold2); font-family:Georgia,serif; font-size:1.25rem; }
.family-promise strong { font-family:Georgia,serif; font-size:.91rem; font-weight:500; color:#f2e6cd; }
.family-promise p { margin:4px 0 0; color:#84919a; font-size:.64rem; line-height:1.45; }
.empty-card { padding:18px; border-radius:20px; background:var(--card); border:1px solid var(--line); }
.empty-card b { font-family:Georgia,serif; }
.empty-card p { margin:5px 0 0; color:var(--muted); font-size:.72rem; line-height:1.5; }
.screen-title { padding:22px 3px 8px; }
.screen-title h2 { margin:6px 0 5px; font-family:Georgia,serif; font-weight:500; font-size:1.85rem; }
.screen-title > p:last-child { margin:0; color:#89969f; font-size:.72rem; line-height:1.52; }
.feature-stage { margin-top:18px; padding:30px 22px; text-align:center; border:1px solid rgba(217,173,92,.12); border-radius:28px; background:radial-gradient(circle at 50% 0,rgba(217,173,92,.13),transparent 38%),rgba(12,23,32,.78); }
.feature-orbit { width:75px; height:75px; margin:0 auto 18px; display:grid; place-items:center; border:1px solid rgba(217,173,92,.25); border-radius:50%; color:var(--gold2); box-shadow:0 0 0 12px rgba(217,173,92,.025),0 0 0 25px rgba(217,173,92,.014); }
.feature-orbit svg { width:29px; height:29px; }
.feature-stage h3 { margin:0; font-family:Georgia,serif; font-weight:500; font-size:1.22rem; }
.feature-stage p { margin:9px auto 18px; max-width:300px; color:#89969e; font-size:.7rem; line-height:1.58; }
.stage-badge { display:inline-flex; padding:7px 10px; border-radius:999px; color:#8fe4ab; background:rgba(71,209,120,.08); border:1px solid rgba(71,209,120,.13); font-size:.59rem; font-weight:800; letter-spacing:.08em; }
.moments-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:15px; }
.moment { position:relative; aspect-ratio:1.12; overflow:hidden; border-radius:22px; border:1px solid var(--line); background:radial-gradient(circle at 70% 20%,rgba(217,173,92,.23),transparent 30%),linear-gradient(140deg,#142b3c,#090e13); }
.moment:nth-child(2) { background:radial-gradient(circle at 30% 30%,rgba(114,74,39,.38),transparent 35%),linear-gradient(145deg,#27190c,#0b0c0e); }
.moment:nth-child(3) { background:radial-gradient(circle at 60% 40%,rgba(45,100,92,.25),transparent 40%),linear-gradient(145deg,#11262a,#080d11); }
.moment:nth-child(4) { background:radial-gradient(circle at 50% 10%,rgba(85,102,150,.22),transparent 35%),linear-gradient(145deg,#121a28,#090c10); }
.moment::before { content:"♥"; position:absolute; top:20px; left:20px; color:rgba(240,209,141,.32); font-size:1.9rem; }
.moment span { position:absolute; left:14px; bottom:13px; font-family:Georgia,serif; font-size:.8rem; }
.identity-card { margin-top:15px; padding:25px 18px; border-radius:27px; text-align:center; border:1px solid rgba(217,173,92,.12); background:radial-gradient(circle at 50% 0,rgba(217,173,92,.13),transparent 40%),rgba(12,23,32,.83); }
.identity-avatar { width:88px; height:88px; margin:auto; display:grid; place-items:center; border-radius:50%; color:#1b1005; background:linear-gradient(145deg,var(--gold2),var(--gold3)); font:500 1.8rem Georgia,serif; border:2px solid rgba(255,255,255,.13); box-shadow:0 17px 40px rgba(0,0,0,.28); }
.identity-card h3 { margin:13px 0 3px; font:500 1.25rem Georgia,serif; }
.identity-card p { margin:0; color:#85929a; font-size:.7rem; }
.identity-card > span { display:inline-block; margin-top:12px; padding:6px 9px; border-radius:999px; color:#cbb176; border:1px solid rgba(217,173,92,.13); font-size:.59rem; }
.settings-list { display:grid; gap:8px; margin-top:14px; }
.setting { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; border:1px solid var(--line); border-radius:18px; background:rgba(13,25,34,.78); }
.setting > div { display:flex; align-items:center; gap:10px; min-width:0; }
.setting svg { flex:0 0 19px; width:19px; color:#bd9f65; }
.setting span { min-width:0; }
.setting b,.setting small { display:block; }
.setting b { font-size:.72rem; }
.setting small { margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#77858e; font-size:.61rem; }
.setting > strong { color:#a4afb6; font-size:.65rem; }
.logout-btn { width:100%; margin-top:14px; padding:13px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:17px; border:1px solid rgba(237,82,73,.15); background:rgba(237,82,73,.06); color:#e99a95; cursor:pointer; font-size:.7rem; }
.logout-btn svg { width:18px; height:18px; }
.bottom-nav { position:absolute; z-index:10; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); height:70px; padding:5px; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid rgba(255,255,255,.065); border-radius:24px; background:rgba(7,15,21,.93); backdrop-filter:blur(20px); box-shadow:0 16px 44px rgba(0,0,0,.38); }
.nav-btn { border:0; border-radius:19px; background:transparent; color:#687680; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; font-size:.57rem; }
.nav-btn svg { width:19px; height:19px; }
.nav-btn.active { color:var(--gold2); background:linear-gradient(180deg,rgba(217,173,92,.11),rgba(217,173,92,.025)); }
.login-shell { background:#050b10; }
.login-view { position:relative; height:100%; overflow:hidden; padding:calc(35px + env(safe-area-inset-top)) 23px calc(24px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; justify-content:center; }
.login-view::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:25px 25px; mask-image:linear-gradient(to bottom,transparent,black 28%,black 70%,transparent); }
.login-aurora { position:absolute; pointer-events:none; filter:blur(10px); border-radius:50%; }
.login-aurora.one { width:310px; height:310px; top:-150px; right:-125px; background:radial-gradient(circle,rgba(217,173,92,.2),transparent 63%); }
.login-aurora.two { width:330px; height:330px; bottom:-220px; left:-130px; background:radial-gradient(circle,rgba(30,92,135,.18),transparent 63%); }
.login-brand { position:relative; z-index:2; text-align:center; }
.login-brand > img { width:95px; height:95px; filter:drop-shadow(0 18px 30px rgba(0,0,0,.38)); }
.login-brand > .eyebrow { margin-top:7px; }
.login-brand h1 { margin:5px 0 0; font:500 1.68rem Georgia,serif; letter-spacing:.11em; }
.login-brand h1 span { color:var(--gold2); }
.gold-rule { display:flex; align-items:center; justify-content:center; gap:8px; margin:10px auto 12px; color:var(--gold); }
.gold-rule i { width:44px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.gold-rule i:last-child { transform:scaleX(-1); }
.gold-rule b { font-size:.62rem; }
.login-tagline { margin:0; font:400 1.12rem/1.18 Georgia,serif; color:#e7e2d7; }
.login-tagline em { color:var(--gold2); font-style:normal; }
.login-card { position:relative; z-index:2; margin-top:22px; padding:17px; border-radius:26px; border:1px solid rgba(240,209,141,.12); background:linear-gradient(160deg,rgba(19,35,47,.88),rgba(8,16,22,.91)); box-shadow:0 24px 60px rgba(0,0,0,.32); }
.secure-chip { display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:13px; color:#b7a071; font-size:.59rem; }
.secure-chip svg { width:14px; height:14px; }
.login-card label { display:block; margin-top:10px; color:#98a4ab; font-size:.62rem; font-weight:700; }
.login-card input { width:100%; margin-top:6px; padding:13px 14px; outline:0; border:1px solid rgba(255,255,255,.075); border-radius:15px; color:#f5f2ea; background:rgba(2,8,12,.55); font-size:.76rem; transition:border-color .18s ease,box-shadow .18s ease; }
.login-card input:focus { border-color:rgba(217,173,92,.45); box-shadow:0 0 0 3px rgba(217,173,92,.07); }
.primary-btn { width:100%; margin-top:15px; padding:13px 14px; border:0; border-radius:16px; display:flex; justify-content:center; gap:9px; align-items:center; color:#1b1207; background:linear-gradient(135deg,#f1d28c,#bd803a); box-shadow:0 12px 28px rgba(163,105,42,.2); font-weight:850; font-size:.72rem; cursor:pointer; }
.primary-btn:disabled { opacity:.6; cursor:progress; }
.form-error { margin-top:10px; padding:9px 10px; border-radius:12px; color:#f0a19c; background:rgba(237,82,73,.07); border:1px solid rgba(237,82,73,.13); font-size:.62rem; line-height:1.4; }
.test-accounts { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px; margin-top:12px; color:#687680; font-size:.55rem; }
.test-accounts button { padding:4px 7px; border-radius:999px; border:1px solid rgba(255,255,255,.065); background:rgba(255,255,255,.025); color:#a4afb6; cursor:pointer; font-size:.55rem; }
.login-foot { position:relative; z-index:2; margin-top:14px; display:flex; justify-content:space-between; align-items:center; gap:10px; color:#59666f; font-size:.54rem; }
.login-foot span { display:flex; align-items:center; gap:4px; }
.login-foot svg { width:12px; height:12px; }
.splash { position:absolute; z-index:60; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:44px; text-align:center; background:radial-gradient(circle at 50% 30%,rgba(171,111,42,.25),transparent 36%),linear-gradient(170deg,#05090d,#08121a 65%,#060707); }
.splash img { width:130px; height:130px; filter:drop-shadow(0 18px 40px rgba(0,0,0,.35)); }
.splash h1 { margin:14px 0 0; font:500 2.1rem Georgia,serif; letter-spacing:.1em; }
.splash h1 span { display:block; margin-top:7px; font-family:Inter,sans-serif; font-size:.68rem; letter-spacing:.44em; color:var(--gold); font-weight:800; }
.splash p { margin:22px 0 0; color:#c8c3b8; font:400 .93rem Georgia,serif; }
.boot-line { display:flex; align-items:center; gap:7px; margin-top:38px; color:#75828a; font-size:.6rem; }
.boot-line i { width:6px; height:6px; border-radius:50%; background:var(--gold); animation:pulse 1.7s infinite; }
.toast { position:absolute; left:50%; bottom:101px; transform:translateX(-50%); z-index:100; width:max-content; max-width:calc(100% - 35px); padding:10px 13px; border-radius:999px; background:#eae3d5; color:#17120b; text-align:center; font-size:.63rem; font-weight:760; box-shadow:0 14px 38px rgba(0,0,0,.42); animation:toastIn .18s ease; }
.toast.gold { background:#dcb365; }
.toast.error { background:#ef8c85; }
@keyframes toastIn { from{opacity:0;transform:translate(-50%,8px)} to{opacity:1;transform:translate(-50%,0)} }
.fatal-view { height:100%; display:flex; flex-direction:column; justify-content:center; padding:30px; text-align:center; }
.fatal-view img { width:100px; height:100px; margin:0 auto 13px; }
.fatal-view h1 { margin:7px 0; font:500 1.7rem Georgia,serif; }
.fatal-view > p { color:#8b98a0; font-size:.72rem; line-height:1.55; }
.code-hint { margin-top:12px; padding:13px; border-radius:16px; background:rgba(217,173,92,.07); border:1px solid rgba(217,173,92,.11); color:#bfaa7a; font-size:.66rem; line-height:1.5; }
.text-btn { margin-top:10px; border:0; background:transparent; color:#8d99a1; cursor:pointer; font-size:.68rem; }
@media (max-width:560px) {
  .desktop-stage { padding:0; display:block; }
  .phone-shell { width:100%; height:100svh; min-height:100svh; border:0; border-radius:0; }
}
@media (max-height:730px) and (min-width:561px) {
  .desktop-stage { padding:8px; }
  .phone-shell { height:calc(100vh - 16px); min-height:0; border-radius:27px; }
  .login-brand > img { width:72px; height:72px; }
  .login-card { margin-top:13px; }
}

/* V0.3 — installable PWA + WebRTC call surfaces */
.topbar-actions { display:flex; align-items:center; gap:7px; }
.install-mini { border:1px solid rgba(217,173,92,.22); background:rgba(217,173,92,.08); color:#d8b36c; padding:7px 10px; border-radius:999px; font-size:.56rem; font-weight:800; cursor:pointer; }
.install-card { width:100%; margin:12px 0 2px; display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:17px; border:1px solid rgba(217,173,92,.14); background:linear-gradient(135deg,rgba(217,173,92,.09),rgba(255,255,255,.025)); color:#f1eee7; text-align:left; cursor:pointer; }
.install-card > span:nth-child(2) { flex:1; display:flex; flex-direction:column; gap:2px; }
.install-card b { font-size:.66rem; }
.install-card small { color:#7f8c94; font-size:.53rem; line-height:1.35; }
.install-card strong { color:#d9ad5c; font-size:1.1rem; font-weight:400; }
.install-mark { width:34px; height:34px; display:grid; place-items:center; flex:0 0 34px; border-radius:11px; border:1px solid rgba(217,173,92,.25); color:#e5bd70; background:#09131b; font:700 1.1rem Georgia,serif; }

.call-overlay { position:absolute; z-index:150; inset:0; overflow:hidden; display:flex; flex-direction:column; align-items:center; color:#fff; background:#05090d; }
.call-overlay svg { width:22px; height:22px; }
.incoming-call { justify-content:center; padding:34px 28px 26px; text-align:center; background:radial-gradient(circle at 50% 29%,rgba(208,157,78,.23),transparent 32%),linear-gradient(160deg,#101317 0%,#05090d 58%,#11100d 100%); }
.call-glow { position:absolute; width:290px; height:290px; border-radius:50%; background:rgba(216,171,90,.07); filter:blur(30px); top:80px; }
.call-kicker { position:relative; margin:0 0 25px; color:#9aa5ac; font-size:.68rem; letter-spacing:.04em; }
.incoming-avatar { position:relative; width:128px; height:128px; display:grid; place-items:center; border-radius:50%; border:2px solid #d7aa59; box-shadow:0 0 0 8px rgba(217,173,92,.045),0 24px 70px rgba(0,0,0,.45); background:linear-gradient(135deg,#263947,#0d171e); color:#efcb85; font:500 2.3rem Georgia,serif; }
.incoming-call h2 { position:relative; margin:20px 0 4px; font:500 2rem Georgia,serif; }
.call-family { position:relative; margin:0; color:#a69372; font-size:.7rem; }
.incoming-actions { position:relative; width:100%; display:flex; justify-content:space-around; gap:34px; margin-top:58px; }
.round-call { border:0; background:transparent; color:#fff; display:flex; flex-direction:column; align-items:center; gap:9px; font-size:.62rem; cursor:pointer; }
.round-call svg { width:28px; height:28px; padding:18px; box-sizing:content-box; border-radius:50%; color:#fff; }
.round-call.decline svg { background:#e74a43; transform:rotate(135deg); }
.round-call.answer svg { background:#35b75a; }
.call-security { position:absolute; bottom:28px; display:flex; align-items:center; gap:6px; color:#64727a; font-size:.54rem; }
.call-security svg { width:13px; height:13px; }

.call-overlay.video-mode { background:#030609; }
.remote-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#081018; }
.local-video { position:absolute; z-index:3; right:14px; top:80px; width:100px; height:142px; object-fit:cover; border-radius:18px; border:1px solid rgba(255,255,255,.18); box-shadow:0 12px 36px rgba(0,0,0,.45); background:#111; transform:scaleX(-1); }
.call-shade { position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 28%,transparent 52%,rgba(0,0,0,.75) 100%); }
.active-call-head { position:relative; z-index:5; width:100%; padding:34px 20px 0; text-align:center; }
.active-call-head p { margin:0 0 5px; color:#d0b273; font-size:.59rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.active-call-head h2 { margin:0; font:500 1.5rem Georgia,serif; text-shadow:0 2px 15px rgba(0,0,0,.6); }
.active-call-head span { display:block; margin-top:5px; color:#bdc5ca; font-size:.62rem; }
.audio-mode { justify-content:flex-start; background:radial-gradient(circle at 50% 37%,rgba(193,142,68,.19),transparent 28%),linear-gradient(160deg,#0b1319,#03070a 70%,#0f0d0b); }
.audio-mode .active-call-head { padding-top:48px; }
.audio-avatar { position:relative; z-index:4; width:150px; height:150px; display:grid; place-items:center; margin-top:85px; border-radius:50%; border:2px solid rgba(224,183,105,.75); background:linear-gradient(145deg,#1d3140,#0b141a); box-shadow:0 28px 80px rgba(0,0,0,.45),0 0 0 12px rgba(217,173,92,.035); color:#e8c77f; font:500 2.6rem Georgia,serif; }
.call-controls { position:absolute; z-index:6; left:0; right:0; bottom:48px; display:flex; justify-content:center; align-items:flex-end; gap:12px; padding:0 16px; }
.call-tool { width:61px; border:0; color:#fff; background:transparent; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; }
.call-tool > span { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:rgba(26,31,34,.72); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.08); font-size:1.15rem; }
.call-tool > span svg { width:21px; height:21px; }
.call-tool small { color:#d4d8da; font-size:.51rem; white-space:nowrap; }
.call-tool.active > span { background:rgba(217,173,92,.26); border-color:rgba(217,173,92,.35); }
.call-tool.hangup > span { background:#ed493f; }
.call-tool.hangup > span svg { transform:rotate(135deg); }
.call-network-note { position:absolute; z-index:6; bottom:16px; display:flex; align-items:center; gap:5px; color:#7f8c92; font-size:.48rem; }
.call-network-note svg { width:11px; height:11px; }

@media (max-width:380px) {
  .call-controls { gap:6px; }
  .call-tool { width:55px; }
  .call-tool > span { width:44px; height:44px; }
  .local-video { width:88px; height:125px; }
}

/* V0.4 — private text messaging + iPhone remote-audio reliability */
.icon-btn.message { position:relative; background:linear-gradient(145deg,#d6ab5c,#9c692f); color:#171006; box-shadow:0 8px 20px rgba(171,111,42,.17); }
.action-badge { position:absolute; right:-3px; top:-4px; min-width:17px; height:17px; padding:0 4px; display:grid; place-items:center; border-radius:999px; background:#ed5249; color:#fff; border:2px solid #0e1b26; font-size:.48rem; line-height:1; }
.chat-status { margin:8px 0 12px; padding:9px 11px; border-radius:13px; font-size:.62rem; }
.chat-status.warn { color:#efc883; background:rgba(217,173,92,.07); border:1px solid rgba(217,173,92,.13); }
.chat-list { display:grid; gap:8px; margin-top:14px; }
.chat-list-item { width:100%; min-height:70px; display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 11px; border:1px solid rgba(255,255,255,.055); border-radius:20px; color:var(--text); background:linear-gradient(100deg,rgba(16,31,43,.94),rgba(10,20,29,.83)); text-align:left; cursor:pointer; }
.chat-avatar { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; color:#211507; background:linear-gradient(145deg,#f1d28d,#a56c31); font:500 .95rem Georgia,serif; }
.chat-avatar.small { width:38px; height:38px; font-size:.78rem; flex:0 0 38px; }
.chat-list-copy { min-width:0; display:flex; flex-direction:column; gap:5px; }
.chat-list-copy b { font-size:.82rem; }
.chat-list-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#82909a; font-size:.61rem; }
.chat-list-side { display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.chat-list-side small { color:#687680; font-size:.52rem; }
.chat-list-side b { min-width:20px; height:20px; padding:0 5px; display:grid; place-items:center; border-radius:999px; background:var(--gold); color:#191006; font-size:.52rem; }
.chat-detail { min-height:calc(100% - 4px); display:flex; flex-direction:column; }
.chat-detail-head { position:sticky; top:-1px; z-index:8; margin:-4px -2px 0; padding:8px 2px 12px; display:flex; align-items:center; gap:8px; background:linear-gradient(180deg,#08141e 82%,rgba(8,20,30,0)); }
.chat-back { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border:0; border-radius:50%; color:#d9dde0; background:rgba(255,255,255,.05); cursor:pointer; }
.chat-back svg { width:19px; }
.chat-peer { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.chat-peer b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 .94rem Georgia,serif; }
.chat-peer small { display:flex; align-items:center; gap:4px; color:#7f8c94; font-size:.49rem; }
.chat-peer small svg { width:11px; height:11px; color:var(--gold); }
.chat-head-actions { display:flex; gap:5px; }
.chat-head-actions button { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.06); border-radius:50%; color:#d7b36c; background:rgba(255,255,255,.035); cursor:pointer; }
.chat-head-actions svg { width:16px; height:16px; }
.message-thread { flex:1; min-height:430px; max-height:calc(100svh - 240px); overflow:auto; padding:15px 2px 18px; display:flex; flex-direction:column; gap:8px; scrollbar-width:none; }
.message-thread::-webkit-scrollbar { display:none; }
.message-row { display:flex; }
.message-row.own { justify-content:flex-end; }
.message-row.other { justify-content:flex-start; }
.message-bubble { max-width:80%; padding:9px 11px 7px; border-radius:17px; box-shadow:0 8px 22px rgba(0,0,0,.12); }
.message-row.other .message-bubble { border-bottom-left-radius:6px; color:#e8ecee; background:#102331; border:1px solid rgba(255,255,255,.05); }
.message-row.own .message-bubble { border-bottom-right-radius:6px; color:#211507; background:linear-gradient(145deg,#ebc87f,#c48b46); }
.message-bubble p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:.73rem; line-height:1.43; }
.message-bubble small { margin-top:4px; display:flex; justify-content:flex-end; align-items:center; gap:4px; color:rgba(255,255,255,.45); font-size:.47rem; }
.message-row.own .message-bubble small { color:rgba(35,20,5,.52); }
.message-bubble small span { font-weight:900; letter-spacing:-.08em; }
.chat-empty { margin:auto; max-width:245px; padding:30px 18px; text-align:center; color:#7c8991; }
.chat-empty > div { color:var(--gold); font-size:1.7rem; }
.chat-empty b { display:block; margin-top:8px; color:#e5d6b8; font:500 .9rem Georgia,serif; }
.chat-empty p { margin:6px 0 0; font-size:.6rem; line-height:1.5; }
.chat-composer { position:sticky; bottom:0; display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:end; gap:7px; padding:9px 0 2px; background:linear-gradient(180deg,rgba(8,20,30,0),#08141e 26%); }
.chat-composer textarea { width:100%; min-height:44px; max-height:112px; resize:none; outline:0; padding:12px 14px; border-radius:18px; border:1px solid rgba(255,255,255,.075); color:#f3f0ea; background:#0d1d29; font-size:.72rem; line-height:1.35; }
.chat-composer textarea:focus { border-color:rgba(217,173,92,.38); box-shadow:0 0 0 3px rgba(217,173,92,.05); }
.chat-composer button { width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; color:#1b1207; background:linear-gradient(145deg,#f0cf88,#bd7e38); cursor:pointer; }
.chat-composer button:disabled { opacity:.55; }
.chat-composer button svg { width:18px; height:18px; }
.family-promise .promise-icon svg { width:19px; height:19px; }
audio[data-remote-audio] { position:absolute; width:1px; height:1px; opacity:.001; pointer-events:none; }
.toast { z-index:220; }
@media (max-width:390px) {
  .actions { gap:4px; }
  .icon-btn { width:35px; height:35px; }
  .icon-btn svg { width:16px; height:16px; }
  .member-card { grid-template-columns:43px minmax(0,1fr) auto; gap:7px; padding-left:9px; padding-right:8px; }
  .member-avatar { width:43px; height:43px; }
  .video-mode .call-controls { gap:3px; padding:0 7px; }
  .video-mode .call-tool { width:51px; }
  .video-mode .call-tool > span { width:42px; height:42px; }
}


/* V0.5 — family admin + installed full-screen mobile foundation */
@media (display-mode: fullscreen), (display-mode: standalone) {
  html, body, #app, .desktop-stage, .phone-shell { width:100%; height:100%; min-height:100%; }
  .desktop-stage { padding:0; display:block; }
  .phone-shell { max-width:none; border:0; border-radius:0; box-shadow:none; }
}
.family-add-card { width:100%; margin:0 0 9px; min-height:58px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 11px; border-radius:18px; border:1px solid rgba(217,173,92,.16); background:linear-gradient(110deg,rgba(217,173,92,.11),rgba(13,27,38,.8)); color:#f4efe5; text-align:left; cursor:pointer; }
.family-add-card > svg { width:20px; height:20px; padding:8px; box-sizing:content-box; border-radius:12px; color:#171006; background:linear-gradient(145deg,#f0d18a,#b87a36); }
.family-add-card > span { display:flex; flex-direction:column; gap:3px; }
.family-add-card b { font-size:.72rem; }
.family-add-card small { color:#88969f; font-size:.56rem; }
.family-add-card strong { padding:5px 8px; border-radius:999px; color:#dcb66d; border:1px solid rgba(217,173,92,.18); font-size:.52rem; }
.admin-panel { margin-top:15px; padding:16px; border-radius:25px; border:1px solid rgba(217,173,92,.15); background:linear-gradient(145deg,rgba(22,39,51,.94),rgba(8,18,25,.94)); box-shadow:0 18px 45px rgba(0,0,0,.18); }
.admin-panel-head { display:flex; gap:11px; align-items:flex-start; }
.admin-shield { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:14px; color:#e6c47c; background:rgba(217,173,92,.08); border:1px solid rgba(217,173,92,.14); }
.admin-shield svg { width:20px; height:20px; }
.admin-panel-head h3 { margin:3px 0 4px; font:500 1.05rem Georgia,serif; }
.admin-panel-head p:last-child { margin:0; color:#85929b; font-size:.6rem; line-height:1.45; }
.admin-invite-form { margin-top:14px; display:grid; gap:9px; }
.admin-invite-form label { color:#9ca7ae; font-size:.58rem; font-weight:750; }
.admin-invite-form input, .admin-invite-form select { width:100%; margin-top:5px; padding:12px 13px; outline:0; border:1px solid rgba(255,255,255,.075); border-radius:14px; color:#f3efe8; background:#091721; font-size:.7rem; }
.admin-invite-form select { appearance:auto; }
.admin-invite-form input:focus, .admin-invite-form select:focus { border-color:rgba(217,173,92,.42); box-shadow:0 0 0 3px rgba(217,173,92,.05); }
.admin-submit { margin-top:2px; }
.admin-submit svg { width:16px; height:16px; }
.admin-note { padding:9px 10px; border-radius:12px; font-size:.59rem; line-height:1.42; }
.admin-note.error { color:#f1a29c; background:rgba(237,82,73,.07); border:1px solid rgba(237,82,73,.13); }
.admin-note.success { color:#9ae4b1; background:rgba(71,209,120,.07); border:1px solid rgba(71,209,120,.13); }
.admin-footnote { display:block; margin-top:10px; color:#66747d; font-size:.52rem; line-height:1.45; }
.onboarding-content { padding-bottom:calc(30px + env(safe-area-inset-bottom)); }
.invite-onboarding { min-height:calc(100svh - 55px); display:flex; flex-direction:column; justify-content:center; text-align:center; padding:20px 6px; }
.invite-onboarding > img { width:100px; height:100px; margin:0 auto 12px; }
.invite-onboarding h1 { margin:7px 0 7px; font:500 1.85rem Georgia,serif; }
.invite-onboarding > p:not(.eyebrow) { max-width:300px; margin:0 auto; color:#8d99a1; font-size:.7rem; line-height:1.55; }
.invite-onboarding form { margin:20px auto 12px; width:100%; max-width:340px; padding:16px; text-align:left; border:1px solid rgba(217,173,92,.13); border-radius:24px; background:rgba(12,25,34,.86); }
.invite-onboarding label { display:block; margin-top:9px; color:#99a5ac; font-size:.61rem; font-weight:700; }
.invite-onboarding input { width:100%; margin-top:6px; padding:13px; border:1px solid rgba(255,255,255,.075); border-radius:14px; outline:0; color:#fff; background:#07131c; }
.invite-onboarding > small { display:flex; justify-content:center; align-items:center; gap:5px; color:#67747c; font-size:.52rem; line-height:1.4; }
.invite-onboarding > small svg { width:12px; height:12px; color:#c7a55f; }