:root { color-scheme: dark; --night:#0b151b; --night-2:#14262f; --paper:#f3eee3; --paper-2:#d8cdbd; --muted:#819296; --line:rgba(243,238,227,.13); --amber:#e9b85d; --amber-soft:#f2d68f; --rose:#d88375; --sage:#89b9a6; --sans:"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif; --mono:"SFMono-Regular","Roboto Mono",Menlo,Consolas,monospace; }
* { box-sizing:border-box; }
html,body { margin:0; background:#060c10; color:var(--paper); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
body { min-width:320px; }
button { font:inherit; cursor:pointer; }
#app { min-height:100dvh; }
.phone { width:min(100%,430px); height:100dvh; min-height:650px; margin:0 auto; overflow:hidden; background:linear-gradient(160deg,#0c181f 0%,#12262e 100%); position:relative; }
.topbar { height:45px; padding:max(9px,env(safe-area-inset-top)) 16px 8px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(9,18,24,.86); }
.brand { display:flex; gap:8px; align-items:center; font-size:13px; letter-spacing:.09em; }.mark { width:17px; height:17px; border:1px solid var(--amber); border-radius:50%; position:relative; }.mark:before,.mark:after { content:""; position:absolute; left:50%; top:50%; background:var(--amber); transform:translate(-50%,-50%); }.mark:before { width:9px; height:1px; }.mark:after { width:1px; height:9px; }.clock { color:var(--amber-soft); font:9px var(--mono); }
.screen { height:calc(100% - 45px - 66px); min-height:0; padding:11px 15px 8px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; }.identity { height:31px; display:flex; justify-content:space-between; align-items:center; }.identity-left { display:flex; align-items:center; gap:9px; }.portrait { width:30px; height:30px; border:1px solid rgba(232,184,92,.72); border-radius:50%; background-color:#2c4a51; background-repeat:no-repeat; background-size:400% 200%; background-origin:border-box; flex:0 0 auto; }.person-name { font-size:12px; }.person-meta { color:var(--muted); font-size:9px; margin-top:2px; }.live { border:0; padding:0; color:var(--sage); background:transparent; font-size:9px; display:flex; align-items:center; gap:5px; }.live i { width:5px; height:5px; border-radius:50%; background:var(--sage); }
.moment { height:96px; margin:8px 0 7px; display:grid; grid-template-columns:89px 1fr; gap:10px; }.moment-img { width:89px; height:96px; object-fit:cover; object-position:center 48%; border:1px solid var(--line); filter:saturate(.78) contrast(.95); }.moment-copy { min-width:0; padding:2px 0; display:flex; flex-direction:column; justify-content:space-between; }.eyebrow { color:var(--amber); font-size:8px; letter-spacing:.13em; }.moment h1 { margin:7px 0 0; font-size:18px; line-height:1.35; font-weight:400; }.moment-text { color:var(--paper-2); font-size:10px; line-height:1.5; margin-top:5px; }.moment-time { color:var(--muted); font:8px var(--mono); }
.event-strip { height:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }.event { min-width:0; padding:5px 7px; border:1px solid var(--line); background:rgba(243,238,227,.035); }.event-time { color:var(--amber-soft); font:7px var(--mono); }.event-text { color:var(--paper-2); font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.data-row { height:46px; display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:10px; margin-top:7px; }.data { border-top:1px solid var(--line); padding-top:8px; min-width:0; }.data-label { color:var(--muted); font-size:8px; }.data-value { margin-top:5px; font:12px var(--mono); white-space:nowrap; }.data-value.sage { color:var(--sage); }.data-value.rose { color:var(--rose); }
.two-col { display:grid; grid-template-columns:1.08fr .92fr; gap:8px; margin-top:8px; align-items:stretch; }.panel { min-width:0; padding:8px 9px; border:1px solid var(--line); background:rgba(9,18,24,.25); }.panel-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; }.panel-title { font-size:10px; }.panel-link { color:var(--muted); font-size:7px; }.family-panel,.asset-panel { min-height:176px; }.family-list,.asset-list { display:grid; gap:6px; }.family-member { padding:5px 0; border-bottom:1px solid rgba(243,238,227,.08); }.family-member:last-child { border-bottom:0; }.member-name { display:flex; align-items:baseline; justify-content:space-between; gap:5px; font-size:9px; }.member-name small { color:var(--amber-soft); font-size:7px; }.member-detail,.member-income { color:var(--muted); font-size:7px; line-height:1.35; margin-top:2px; }.member-income { color:var(--paper-2); }.asset-list { grid-template-columns:1fr 1fr; gap:6px 8px; }.asset-group { min-width:0; border-top:1px solid rgba(243,238,227,.08); padding-top:4px; }.asset-group span { color:var(--muted); display:block; font-size:7px; }.asset-group b { color:var(--paper-2); display:block; font:8px var(--mono); font-weight:400; line-height:1.3; margin-top:2px; overflow-wrap:anywhere; }.asset-group.total { border-top-color:rgba(232,184,92,.5); }.asset-group.total b { color:var(--amber-soft); }.world-panel { margin-top:8px; }.world-number { font:15px var(--mono); letter-spacing:-.04em; margin-top:3px; }.world-caption { color:var(--muted); font-size:7px; margin-top:2px; }.world-change { color:var(--sage); font:7px var(--mono); margin-top:4px; }.world-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:5px; }.world-metric { border-top:1px solid rgba(243,238,227,.08); padding-top:3px; }.world-metric span { color:var(--muted); font-size:7px; display:block; }.world-metric b { color:var(--paper-2); font:8px var(--mono); font-weight:400; display:block; margin-top:2px; }
.choice { min-height:129px; max-height:42vh; overflow-y:auto; margin-top:8px; padding:8px 10px; border:1px solid rgba(232,184,92,.65); background:var(--night-2); position:relative; scrollbar-width:thin; }.choice:before { content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:3px; background:var(--amber); }.choice-head { display:flex; justify-content:space-between; align-items:baseline; }.choice-kicker { color:var(--amber); font-size:8px; letter-spacing:.1em; }.choice-meta { color:var(--muted); font-size:8px; }.choice h2 { margin:4px 0 0; font-weight:400; font-size:14px; line-height:1.25; }.choice-copy { color:var(--paper-2); font-size:8px; line-height:1.45; margin-top:3px; }.options { display:grid; gap:4px; margin-top:7px; }.option { min-height:31px; height:auto; padding:6px 7px; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; border:1px solid rgba(243,238,227,.14); background:rgba(243,238,227,.045); color:var(--paper); text-align:left; }.option:active { border-color:var(--amber); background:rgba(232,184,92,.08); }.option > span:first-child { min-width:0; line-height:1.35; }.option-name { font-size:8px; }.option-desc { color:var(--muted); font-size:7px; margin-left:5px; }.arrow { color:var(--amber); font-size:11px; flex:0 0 auto; }.choice-empty { color:var(--muted); font-size:9px; padding:7px 0; }
.choice.choice--scroll-safe { max-height:42vh; overflow-y:auto; }
.bottom-nav { height:66px; padding:7px 10px calc(7px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); background:rgba(8,16,21,.96); }.nav-item { min-height:45px; padding:0; border:0; background:transparent; color:#789099; display:grid; place-items:center; gap:2px; font-size:8px; }.nav-icon { width:16px; height:16px; border:1px solid currentColor; }.nav-item.active { color:var(--amber-soft); }.nav-item.active .nav-icon { border-color:var(--amber); box-shadow:inset 0 0 0 4px rgba(232,184,92,.08); }
@media (max-width:359px) { .two-col { grid-template-columns:1fr; }.family-panel,.asset-panel { min-height:0; }.asset-list { grid-template-columns:1fr 1fr; } }
@media (min-width:760px) { body { padding:20px 0; }.phone { min-height:812px; box-shadow:0 22px 80px rgba(0,0,0,.42); border:1px solid rgba(243,238,227,.08); } }