:root {
  --bg: #09090a;
  --surface: #151416;
  --surface-2: #1d1b1d;
  --surface-3: #252225;
  --text: #f3eee7;
  --muted: #a8a09a;
  --line: rgba(255, 255, 255, .1);
  --accent: #8FAEFF;
  --theme-light: #E8EEFF;
  --theme-glow: #AFC4FF;
  --theme-mid: #5374C8;
  --theme-dark: #10172C;
  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-deep: color-mix(in srgb, var(--accent) 34%, #141316);
  --danger: #d27676;
  --success: #7caa91;
  --phone: 430px;
  --radius: 8px;
  font-family: "Avenir Next", "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: linear-gradient(150deg, #08090c, #17141b 55%, #08090b); color: var(--text); }
body { overflow: hidden; letter-spacing: 0; }
button, input, textarea, select { font: inherit; letter-spacing: 0; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img { display: block; max-width: 100%; }

#app { min-height: 100dvh; }
.phone-shell { position: relative; width: min(100%, var(--phone)); height: 100dvh; margin: 0 auto; overflow: hidden; background: linear-gradient(160deg, var(--theme-dark) 0%, color-mix(in srgb, var(--theme-mid) 26%, #0b0a0d) 42%, #09090b 74%, color-mix(in srgb, var(--theme-mid) 16%, #09090b) 100%); box-shadow: 0 0 80px rgba(0, 0, 0, .85), 0 0 46px color-mix(in srgb, var(--accent) 16%, transparent); }
.view { position: absolute; inset: 0; display: flex; flex-direction: column; background: linear-gradient(165deg, color-mix(in srgb, var(--theme-mid) 34%, var(--theme-dark)) 0%, color-mix(in srgb, var(--theme-dark) 82%, #0a0a0c) 36%, #09090b 72%, color-mix(in srgb, var(--theme-mid) 13%, #09090b) 100%); animation: reveal .2s ease; }
@keyframes reveal { from { opacity: .4; transform: translateY(5px); } }
.scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }

.statusbar { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: calc(34px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 15px 0; display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 11px; font-weight: 700; pointer-events: none; text-shadow: 0 1px 5px #000; }
.status-icons { display: flex; gap: 5px; align-items: center; }
.topbar { min-height: calc(56px + env(safe-area-inset-top)); padding: calc(8px + env(safe-area-inset-top)) 12px 8px; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--theme-glow) 26%, var(--line)); background: linear-gradient(110deg, color-mix(in srgb, var(--theme-dark) 78%, rgba(10,10,12,.86)), color-mix(in srgb, var(--theme-mid) 15%, rgba(10,10,12,.9))); backdrop-filter: blur(20px); }
.topbar h1 { margin: 0; text-align: center; font-size: 16px; font-weight: 700; }
.topbar p { margin: 2px 0 0; text-align: center; color: var(--muted); font-size: 10px; }
.icon-btn { width: 38px; height: 38px; border: 1px solid transparent; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb,var(--theme-mid) 7%,transparent); color:color-mix(in srgb,var(--theme-light) 82%,white); cursor: pointer; transition:border-color .18s ease,background .18s ease,transform .18s ease; }
.icon-btn:hover { border-color:color-mix(in srgb,var(--theme-glow) 28%,transparent); background:color-mix(in srgb,var(--theme-mid) 18%,rgba(255,255,255,.05)); transform:translateY(-1px); }
.icon-btn.gold { color: var(--accent); background: var(--accent-soft); }
.icon-btn.small { width: 32px; height: 32px; }
.ghost-spacer { width: 38px; }

.hero { position: relative; flex: 0 0 43%; min-height: 330px; overflow: hidden; background: var(--theme-dark); }
.hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.hero::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(125deg, color-mix(in srgb, var(--theme-mid) 32%, transparent), transparent 42%, color-mix(in srgb, var(--theme-dark) 20%, transparent)); mix-blend-mode: color; pointer-events: none; }
.hero::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .08) 18%, transparent 42%, color-mix(in srgb, var(--theme-dark) 62%, transparent) 70%, var(--theme-dark) 100%); }
.hero-controls { position: absolute; z-index: 4; top: calc(40px + env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; justify-content: space-between; }
.hero-control-group { display:flex; gap:7px; }
.notification-hero-button { position:relative; width:36px; padding:0; justify-content:center; }
.notification-hero-button b { position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border:1px solid rgba(255,255,255,.7); border-radius:9px; display:grid; place-items:center; background:#d63c4f; color:white; font-size:8px; }
.glass-btn { height: 36px; padding: 0 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 18px; background: rgba(0,0,0,.32); backdrop-filter: blur(14px); display: inline-flex; align-items: center; gap: 7px; color: #fff; font-size: 12px; cursor: pointer; }
.hero-copy { position: absolute; z-index: 3; left: 20px; right: 20px; bottom: 24px; }
.eyebrow { color: var(--accent); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.hero-copy h1 { margin: 6px 0 4px; font-family: Georgia, "Songti SC", serif; font-size: 34px; font-weight: 500; }
.hero-copy p { margin: 0; color: rgba(255,255,255,.76); font-size: 12px; line-height: 1.5; }
.presence { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: rgba(255,255,255,.82); font-size: 11px; }
.presence::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 9px var(--success); }

.home-body { padding: 0 16px calc(104px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, var(--theme-dark), color-mix(in srgb, var(--theme-mid) 15%, #0a0a0c) 46%, #09090b 100%); }
.relation-panel { padding: 14px 0 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; border-bottom: 1px solid var(--line); }
.relation-stage { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 10px; align-items:end; padding:0 1px 10px; }.relation-stage > div:first-child span,.relation-stage > div:first-child strong { display:block; }.relation-stage > div:first-child span { color:var(--theme-glow); font-size:7px; }.relation-stage > div:first-child strong { margin-top:3px; font:500 15px Georgia,"Songti SC",serif; }.relation-stage > b { color:var(--theme-light); font:500 22px Georgia,serif; }.relation-stage-meter { grid-column:1/-1; height:3px; overflow:hidden; border-radius:2px; background:rgba(255,255,255,.08); }.relation-stage-meter i { display:block; height:100%; background:linear-gradient(90deg,var(--theme-mid),var(--theme-glow)); }.relation-stage p { min-width:0; margin:2px 0 0; overflow:hidden; color:var(--muted); font-size:8px; white-space:nowrap; text-overflow:ellipsis; }.relation-stage button { justify-self:end; padding:0; border:0; display:flex; align-items:center; gap:4px; background:transparent; color:var(--theme-glow); font-size:8px; }
.metric { text-align: center; }
.metric b { display: block; font-family: Georgia, serif; color: var(--accent); font-size: 21px; font-weight: 500; }
.metric span { color: var(--muted); font-size: 10px; }
.section-heading { margin: 19px 0 12px; display: flex; align-items: end; justify-content: space-between; }
.section-heading h2 { margin: 0; font-size: 13px; font-weight: 700; }
.section-heading span { color: var(--muted); font-size: 10px; }
.app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px 9px; }
.app-entry { min-width: 0; padding: 0; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; }
.app-entry > span:last-child { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dcd5cf; font-size: 10px; }
.app-icon { position:relative; isolation:isolate; width: 50px; height: 50px; border: 1px solid color-mix(in srgb, var(--theme-glow) 44%, rgba(255,255,255,.1)); border-radius: 5px; display: grid; place-items: center; overflow:hidden; clip-path:polygon(0 7px,7px 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px)); background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--theme-glow) 16%,transparent),transparent 34%),repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px),linear-gradient(155deg,color-mix(in srgb,var(--theme-light) 11%,rgba(255,255,255,.04)),color-mix(in srgb,var(--theme-mid) 34%,rgba(27,27,34,.88)) 46%,color-mix(in srgb,var(--theme-dark) 84%,#0b0c11)); color: color-mix(in srgb, var(--theme-light) 86%, white); box-shadow:inset 0 1px rgba(255,255,255,.18),inset 0 -15px 25px rgba(0,0,0,.24),0 0 0 1px color-mix(in srgb,var(--theme-glow) 8%,transparent),0 10px 24px rgba(0,0,0,.32); backdrop-filter: blur(14px); transition:transform .18s ease,border-color .18s ease,filter .18s ease; }
.app-icon::before { content:""; position:absolute; z-index:1; inset:5px; border:1px solid color-mix(in srgb,var(--theme-glow) 18%,transparent); border-left-color:transparent; border-bottom-color:transparent; transform:rotate(4deg); pointer-events:none; }
.app-icon::after { content:""; position:absolute; z-index:1; width:6px; height:6px; right:4px; bottom:4px; border-right:1px solid var(--theme-glow); border-bottom:1px solid var(--theme-glow); opacity:.85; pointer-events:none; }
.app-entry:hover .app-icon { transform:translateY(-2px) scale(1.025); border-color:color-mix(in srgb,var(--theme-glow) 76%,white); filter:brightness(1.12); }
.app-entry:active .app-icon { transform:translateY(0) scale(.97); }
.app-icon svg { position:relative; z-index:2; filter:drop-shadow(0 0 7px color-mix(in srgb,var(--theme-glow) 42%,transparent)); }

.chat-dock { position: absolute; z-index: 12; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 72px; padding: 9px; border: 1px solid color-mix(in srgb, var(--theme-glow) 34%, rgba(255,255,255,.14)); border-radius: 8px; display: grid; grid-template-columns: 44px 1fr 38px; gap: 8px; align-items: center; background: linear-gradient(110deg, color-mix(in srgb, var(--theme-dark) 74%, rgba(20,18,20,.86)), color-mix(in srgb, var(--theme-mid) 18%, rgba(20,18,20,.9))); backdrop-filter: blur(22px); box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.dock-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,.25); }
.dock-copy { min-width: 0; }
.dock-copy strong { display: block; font-size: 11px; }
.dock-copy span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-input { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: #111; color: var(--text); font-size: 12px; }

.stage { background: linear-gradient(160deg, var(--theme-dark), #08080a 68%, color-mix(in srgb, var(--theme-mid) 16%, #08080a)); }
.stage-scene { position: relative; flex: 1 1 68%; min-height: 0; overflow: hidden; }
.stage-scene > img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: saturate(.82); }
.stage-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--theme-mid) 15%, rgba(0,0,0,.18)), transparent 34%, color-mix(in srgb, var(--theme-dark) 84%, transparent) 78%, var(--theme-dark)); }
.scene-header { position: absolute; z-index: 3; top: calc(42px + env(safe-area-inset-top)); left: 14px; right: 14px; display: flex; justify-content: space-between; }
.scene-caption { position: absolute; z-index: 3; left: 18px; right: 18px; bottom: 18px; }
.scene-caption .scene-kind { color: var(--accent); font-size: 10px; font-weight: 800; }
.scene-caption h2 { margin: 6px 0; font-family: Georgia, "Songti SC", serif; font-size: 24px; font-weight: 500; }
.scene-caption p { margin: 0; max-height: 54px; overflow: auto; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.55; }
.stage-console { flex: 0 0 32%; min-height: 250px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; border-top: 1px solid color-mix(in srgb, var(--theme-glow) 24%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--theme-dark) 78%, #111014), color-mix(in srgb, var(--theme-mid) 12%, #0d0c0f)); }
.mode-switch { position:relative; z-index:6; flex:0 0 34px; display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid color-mix(in srgb,var(--theme-glow) 20%,var(--line)); background:color-mix(in srgb,var(--theme-dark) 88%,rgba(12,12,15,.9)); }.mode-switch button { min-width:0; border:0; border-right:1px solid rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; gap:5px; background:transparent; color:var(--muted); font-size:9px; cursor:pointer; }.mode-switch button:last-child { border-right:0; }.mode-switch button.active { background:color-mix(in srgb,var(--theme-mid) 24%,transparent); color:var(--theme-light); box-shadow:inset 0 -2px var(--theme-glow); }.stage-mode-switch { flex-basis:31px; margin:-2px -3px 8px; border:1px solid color-mix(in srgb,var(--theme-glow) 16%,var(--line)); border-radius:6px; overflow:hidden; }.stage-empty { min-height:72px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--muted); font-size:9px; }.stage-empty svg { color:var(--theme-glow); }
.message-strip { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 1px 8px; scrollbar-width: none; }
.bubble { width: fit-content; max-width: 86%; margin: 0 0 7px; padding: 8px 10px; border-radius: var(--bubble-radius, 7px); background: color-mix(in srgb, var(--surface-2) var(--bubble-opacity, 88%), transparent); color: #e6dfd9; font-size: calc(11px * var(--font-scale, 1)); line-height: 1.45; }
.bubble.user { margin-left: auto; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.action-row { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.action-chip { flex: 0 0 auto; height: 31px; padding: 0 11px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: #d9d1cb; font-size: 11px; cursor: pointer; }
.action-chip.primary { border-color: color-mix(in srgb, var(--accent) 42%, transparent); background: var(--accent-soft); color: var(--theme-light); }
.composer { display: grid; grid-template-columns: 1fr 38px; gap: 7px; }
.composer textarea { height: 38px; min-height: 38px; max-height: 80px; resize: none; padding: 10px 11px; border: 1px solid var(--line); border-radius: 7px; background: #171517; color: var(--text); font-size: 12px; }
.offline-scene-bar { min-height:42px; margin:0 0 7px; padding:6px 7px; border:1px solid color-mix(in srgb,var(--theme-glow) 17%,var(--line)); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; align-items:center; background:rgba(9,10,13,.62); }.offline-scene-bar.active { border-color:color-mix(in srgb,var(--theme-glow) 42%,var(--line)); background:color-mix(in srgb,var(--theme-mid) 14%,rgba(9,10,13,.76)); }.offline-scene-state { min-width:0; display:grid; grid-template-columns:18px minmax(0,1fr); gap:5px; align-items:center; }.offline-scene-state > span { color:var(--theme-glow); }.offline-scene-state strong,.offline-scene-state small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.offline-scene-state strong { color:var(--theme-light); font-size:9px; }.offline-scene-state small { margin-top:2px; color:var(--muted); font-size:7px; }.offline-scene-tools { display:flex; gap:4px; }.offline-scene-tools button { width:28px; height:28px; padding:0; border:1px solid var(--line); border-radius:4px; display:grid; place-items:center; background:rgba(255,255,255,.035); color:var(--muted); }.offline-scene-tools button:last-child { color:#dba8b0; }.offline-scene-bar > p { grid-column:1/-1; max-height:30px; margin:0; overflow:hidden; color:var(--muted); font-size:7px; line-height:1.45; }
.offline-scene-path { grid-column:1/-1; width:100%; min-width:0; height:30px; padding:0 7px; border:1px solid color-mix(in srgb,var(--theme-glow) 20%,var(--line)); border-radius:4px; display:grid; grid-template-columns:14px minmax(0,1fr) auto; gap:5px; align-items:center; background:rgba(255,255,255,.025); color:var(--theme-glow); }.offline-scene-path > span { min-width:0; display:flex; align-items:center; gap:3px; overflow:hidden; }.offline-scene-path b { max-width:82px; overflow:hidden; color:var(--theme-light); font-size:6px; font-weight:500; white-space:nowrap; text-overflow:ellipsis; }.offline-scene-path small { display:flex; align-items:center; gap:3px; color:var(--muted); font-size:6px; white-space:nowrap; }
.offline-scene-form { margin:0 0 7px; padding:8px; border:1px solid color-mix(in srgb,var(--theme-glow) 30%,var(--line)); display:grid; grid-template-columns:1fr 1fr; gap:6px; background:color-mix(in srgb,var(--theme-dark) 88%,rgba(11,12,15,.96)); }.offline-scene-form label { min-width:0; display:grid; gap:3px; }.offline-scene-form-actions { grid-column:1/-1; }.offline-scene-form span { color:var(--muted); font-size:7px; }.offline-scene-form input,.offline-scene-form select { min-width:0; width:100%; height:30px; padding:0 7px; border:1px solid var(--line); border-radius:4px; background:#121216; color:var(--text); font-size:8px; outline:0; }.offline-scene-form input:focus,.offline-scene-form select:focus { border-color:var(--theme-glow); }.offline-scene-form-actions { display:flex; justify-content:flex-end; gap:6px; }.offline-scene-form-actions button { min-height:29px; padding:0 9px; border:1px solid var(--line); border-radius:4px; display:flex; align-items:center; gap:4px; background:rgba(255,255,255,.04); color:var(--muted); font-size:8px; }.offline-scene-form-actions button:last-child { border-color:var(--accent); background:var(--accent); color:var(--theme-dark); font-weight:800; }

.page-content { padding: 14px 15px calc(28px + env(safe-area-inset-bottom)); }
.tabs { display: flex; gap: 6px; padding: 10px 15px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tab small { display:block; margin-bottom:2px; color:var(--theme-glow); font-size:7px; letter-spacing:.08em; }
.tab { flex: 0 0 auto; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 16px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.tab.active { color: #18130b; border-color: var(--accent); background: var(--accent); font-weight: 700; }
.list { display: grid; gap: 10px; }
.list-card { width: 100%; padding: 14px; border: 1px solid color-mix(in srgb, var(--theme-glow) 17%, var(--line)); border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--theme-mid) 10%, rgba(27,25,29,.88)), rgba(18,17,20,.88)); backdrop-filter: blur(14px); text-align: left; cursor: pointer; }
.list-card:hover { border-color: rgba(200,163,101,.36); }
.list-card .meta { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; }
.list-card h3 { margin: 8px 0 5px; font-size: 14px; }
.list-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.avatar-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 11px; align-items: center; }
.avatar-row img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.avatar-row strong { display: block; font-size: 13px; }
.avatar-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.avatar-row { border-left: 2px solid color-mix(in srgb, var(--row-accent, var(--accent)) 72%, transparent); }
.support-color { display: flex !important; align-items: center; gap: 5px; color: color-mix(in srgb, var(--row-accent, var(--accent)) 82%, white) !important; }
.support-color i { width: 7px; height: 7px; border-radius: 50%; background: var(--row-accent, var(--accent)); box-shadow: 0 0 8px color-mix(in srgb, var(--row-accent, var(--accent)) 60%, transparent); }
.badge { min-width: 24px; padding: 4px 7px; border-radius: 12px; text-align: center; background: var(--accent-soft); color: var(--accent); font-size: 9px; font-weight: 800; }

.letter-paper { margin: 8px 0; padding: 22px 18px; border: 1px solid rgba(119,85,50,.28); border-radius: 3px; background: #eee2c9; color: #3d3023; box-shadow: inset 0 0 36px rgba(95,69,39,.11); }
.letter-paper .letter-mark { color: #8c6c47; font-family: Georgia, serif; font-size: 10px; }
.letter-paper h2 { margin: 14px 0 8px; font-family: Georgia, "Songti SC", serif; font-size: 22px; font-weight: 500; }
.letter-paper p { white-space: pre-wrap; font-family: Georgia, "Songti SC", serif; font-size: 14px; line-height: 1.9; }
.letter-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
.btn { min-height: 39px; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--text); font-size: 11px; font-weight: 700; cursor: pointer; }
.btn.primary { border-color: var(--accent); background: var(--accent); color: #17120c; }
.btn.danger { color: #f0a5a5; }
.btn.full { width: 100%; }
.btn:disabled { opacity: .45; cursor: wait; }

.story-cover { position: relative; min-height: 190px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #171519; }
.story-cover img { width: 100%; height: 190px; object-fit: cover; opacity: .65; }
.story-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--theme-mid) 12%, transparent) 10%, transparent 28%, var(--theme-dark)); }
.story-cover-copy { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; }
.story-cover-copy h2 { margin: 5px 0; font-family: Georgia, serif; font-size: 21px; }
.story-cover-copy p { margin: 0; color: rgba(255,255,255,.7); font-size: 10px; }
.choice-stack { display: grid; gap: 8px; margin-top: 12px; }
.choice { min-height: 45px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: center; background: var(--surface); text-align: left; color: var(--text); font-size: 11px; cursor: pointer; }
.choice b { color: var(--accent); font-family: Georgia, serif; font-size: 16px; }

.profile-banner { display: grid; grid-template-columns: 86px 1fr; gap: 14px; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); }
.profile-banner img { width: 86px; height: 108px; border-radius: 7px; object-fit: cover; }
.profile-banner h2 { margin: 5px 0; font-family: Georgia, serif; font-size: 24px; font-weight: 500; }
.profile-banner p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.profile-section { padding: 15px; border-bottom: 1px solid var(--line); }
.profile-section h3 { margin: 0 0 10px; color: var(--accent); font-size: 11px; text-transform: uppercase; }
.profile-section p, .profile-section li { color: #d0c8c1; font-size: 11px; line-height: 1.7; }
.profile-section ul { margin: 0; padding-left: 17px; }
.relationship-profile { padding-top:12px; }.relationship-profile-head { padding:14px; border:1px solid color-mix(in srgb,var(--theme-glow) 28%,var(--line)); border-radius:8px; background:linear-gradient(140deg,color-mix(in srgb,var(--theme-mid) 18%,rgba(23,22,27,.93)),rgba(12,12,15,.96)); }.relationship-profile-head > span { color:var(--theme-glow); font-size:7px; }.relationship-profile-head > div:nth-child(2) { display:flex; align-items:end; justify-content:space-between; gap:10px; margin:5px 0 9px; }.relationship-profile-head h3 { margin:0; font:500 20px Georgia,"Songti SC",serif; }.relationship-profile-head b { color:var(--theme-light); font:500 24px Georgia,serif; }.relationship-profile-head p { margin:10px 0 0; color:var(--muted); font-size:9px; line-height:1.6; }.relationship-profile-meter { height:4px; overflow:hidden; border-radius:2px; background:rgba(255,255,255,.08); }.relationship-profile-meter i { display:block; height:100%; background:linear-gradient(90deg,var(--theme-mid),var(--theme-glow)); }.relationship-profile-metrics { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:9px 0; }.relationship-profile-metrics article { min-width:0; min-height:102px; padding:11px; border:1px solid color-mix(in srgb,var(--theme-glow) 17%,var(--line)); border-radius:7px; background:rgba(12,12,15,.58); }.relationship-profile-metrics span,.relationship-profile-metrics b { display:block; }.relationship-profile-metrics span { color:var(--muted); font-size:8px; }.relationship-profile-metrics b { margin:6px 0; color:var(--theme-glow); font:500 20px Georgia,serif; }.relationship-profile-metrics p { margin:0; color:#cfc8c3; font-size:8px; line-height:1.5; }.relationship-boundary { padding:10px 0; display:grid; grid-template-columns:22px 1fr; gap:7px; align-items:start; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--theme-glow); }.relationship-boundary p { margin:0; color:var(--muted); font-size:8px; line-height:1.55; }.relationship-history { display:grid; }.relationship-history-row { display:grid; grid-template-columns:62px 1fr; gap:9px; padding:11px 0; border-bottom:1px solid var(--line); }.relationship-history-row time { color:var(--muted); font-size:7px; }.relationship-history-row strong { display:block; font-size:9px; }.relationship-history-row p { display:flex; flex-wrap:wrap; gap:5px; margin:6px 0 0; }.relationship-history-row p span { padding:3px 5px; border:1px solid color-mix(in srgb,var(--theme-glow) 24%,var(--line)); border-radius:4px; color:var(--theme-glow); font-size:7px; }.relationship-history-row p span.down { color:#8fc8b2; border-color:rgba(112,190,157,.22); }
.timeline-item { position: relative; padding: 0 0 18px 18px; border-left: 1px solid rgba(200,163,101,.34); }
.timeline-item::before { content: ""; position: absolute; left: -4px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.timeline-item time { color: var(--accent); font-size: 9px; }
.timeline-item h4 { margin: 4px 0; font-size: 12px; }
.timeline-item p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.certainty { padding: 2px 6px; border-radius: 10px; background: rgba(124,170,145,.14); color: #8fbea4; font-size: 9px; }
.certainty.inferred { background: rgba(200,163,101,.13); color: #d5b77f; }
.certainty.unknown { background: rgba(210,118,118,.12); color: #da9292; }
.canon-guide { margin: 0 0 10px; padding: 10px 11px; border-left: 2px solid var(--theme-glow); background: color-mix(in srgb, var(--theme-mid) 10%, rgba(255,255,255,.025)); color: #c9c2bd; font-size: 9px; line-height: 1.65; }
.canon-grid { display: grid; gap: 8px; }
.canon-card { min-width: 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--theme-glow) 20%, var(--line)); border-radius: 7px; background: linear-gradient(145deg, color-mix(in srgb, var(--theme-mid) 8%, var(--surface)), var(--surface)); }
.canon-card h3 { margin: 7px 0 5px; font-size: 12px; }
.canon-card p { margin: 0; color: #cfc7c2; font-size: 10px; line-height: 1.65; overflow-wrap: anywhere; }
.canon-card small { display: block; margin-top: 8px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.canon-settings-note { padding: 9px 10px; border: 1px solid rgba(255,255,255,.07); color: var(--muted); font-size: 9px; line-height: 1.55; }
.context-ledger { margin:0 0 16px; padding:13px; border:1px solid color-mix(in srgb,var(--theme-glow) 30%,var(--line)); border-radius:7px; background:linear-gradient(145deg,color-mix(in srgb,var(--theme-mid) 15%,rgba(19,18,23,.94)),rgba(13,14,18,.96)); }
.context-ledger-heading { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:8px; align-items:center; margin-bottom:11px; }.context-ledger-heading > span { color:var(--theme-glow); }.context-ledger-heading small { display:block; color:var(--muted); font-size:7px; }.context-ledger-heading h3 { margin:2px 0 0; font-size:12px; }.context-ledger-heading b { padding:4px 6px; border:1px solid color-mix(in srgb,var(--theme-glow) 24%,var(--line)); color:var(--theme-light); font-size:8px; font-weight:500; }
.context-source-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }.context-source-grid > div { min-width:0; min-height:62px; padding:9px 8px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.context-source-grid span,.context-source-grid small { display:block; overflow-wrap:anywhere; }.context-source-grid span { color:var(--muted); font-size:7px; }.context-source-grid strong { display:block; margin:5px 0 3px; color:var(--theme-light); font-size:13px; }.context-source-grid small { color:color-mix(in srgb,var(--theme-glow) 55%,var(--muted)); font-size:7px; }
.consistency-audit { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:9px; align-items:center; margin:-5px 0 16px; padding:11px 12px; border:1px solid rgba(105,190,145,.25); border-radius:7px; background:rgba(39,93,65,.12); }.consistency-audit > span { color:#72c99a; }.consistency-audit small { display:block; color:var(--muted); font-size:7px; }.consistency-audit h3 { margin:2px 0 3px; font-size:11px; }.consistency-audit p { margin:0; color:#b9c9bf; font-size:8px; line-height:1.5; overflow-wrap:anywhere; }.consistency-audit b { color:#83d5a8; font-size:12px; }.consistency-audit.failed { border-color:rgba(218,112,112,.32); background:rgba(119,39,46,.13); }.consistency-audit.failed > span,.consistency-audit.failed b { color:#e28b8b; }
.canon-pack { margin: 0 0 14px; padding: 13px; border: 1px solid color-mix(in srgb, var(--theme-glow) 34%, var(--line)); border-radius: 7px; background: linear-gradient(140deg, color-mix(in srgb, var(--theme-mid) 18%, rgba(21,18,28,.92)), rgba(15,14,18,.92)); }
.canon-pack-heading { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 8px; align-items: center; }
.canon-pack-heading > span { width: 28px; height: 28px; display: grid; place-items: center; color: var(--theme-glow); background: var(--accent-soft); border-radius: 7px; }
.canon-pack-heading small { color: var(--theme-glow); font-size: 7px; }
.canon-pack-heading h3 { margin: 2px 0 0; font-size: 12px; }
.canon-pack-heading b { grid-column: 2; margin-top: -4px; color: var(--muted); font-size: 8px; font-weight: 500; }
.canon-anchors { display: grid; gap: 5px; margin-top: 11px; }
.canon-anchors span { position: relative; padding-left: 12px; color: #d7d0cc; font-size: 9px; line-height: 1.5; }
.canon-anchors span::before { content: ""; position: absolute; left: 1px; top: 6px; width: 4px; height: 4px; transform: rotate(45deg); background: var(--theme-glow); }
.canon-pack > p { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.07); color: var(--muted); font-size: 8px; line-height: 1.55; }
.canon-card.pack-entry { border-left-color: var(--theme-glow); }

.form { display: grid; gap: 12px; }
.field { display: grid; gap: 6px; }
.field label { color: var(--muted); font-size: 10px; font-weight: 700; }
.input, .select, .textarea { width: 100%; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text); padding: 11px 12px; font-size: 12px; }
.textarea { min-height: 92px; resize: vertical; }
.switch-row { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.switch { position: relative; width: 40px; height: 22px; border: 0; border-radius: 11px; background: #3a373a; cursor: pointer; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: white; transition: transform .2s; }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(18px); }
.range-row { display: grid; grid-template-columns: 70px 1fr 34px; gap: 8px; align-items: center; font-size: 10px; }
.range-row input { accent-color: var(--accent); }
.empty { padding: 42px 20px; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.7; }
.empty svg { display: block; margin: 0 auto 12px; color: var(--accent); opacity: .7; }
.note { padding: 11px 12px; border-left: 2px solid var(--accent); background: var(--accent-soft); color: #d7c9b8; font-size: 10px; line-height: 1.6; }
.divider { height: 1px; background: var(--line); margin: 14px 0; }

.moment { padding: 15px 0; display: grid; grid-template-columns: 40px 1fr; gap: 10px; border-bottom: 1px solid var(--line); }
.moment > img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.moment h3 { margin: 0; color: #d6b878; font-size: 12px; }
.moment p { margin: 7px 0; font-size: 11px; line-height: 1.55; }
.moment small { color: var(--muted); font-size: 9px; }
.moment-actions { display: flex; gap: 8px; margin-top: 8px; }
.text-action { padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 9px; cursor: pointer; }

.moments-page { padding-bottom:calc(26px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,color-mix(in srgb,var(--theme-dark) 74%,#101116),#0a0a0d); }.moments-cover { position:relative; height:235px; margin-bottom:48px; background:#181920; }.moments-cover > img { width:100%; height:100%; object-fit:cover; }.moments-cover-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(5,6,9,.68)); }.moments-cover > .glass-btn { position:absolute; left:14px; bottom:14px; }.moments-profile { position:absolute; right:17px; bottom:-37px; display:flex; align-items:center; gap:11px; }.moments-profile > strong { max-width:190px; color:#fff; font:600 15px Georgia,"Songti SC",serif; text-shadow:0 2px 8px #000; }.moments-profile > button { width:72px; height:72px; padding:0; overflow:hidden; border:3px solid #101116; border-radius:10px; display:grid; place-items:center; background:linear-gradient(145deg,var(--theme-mid),var(--theme-dark)); color:white; font:500 24px Georgia,serif; }.moments-profile img { width:100%; height:100%; object-fit:cover; }
.moment-compose { margin:0 14px 12px; padding:12px; border:1px solid color-mix(in srgb,var(--theme-glow) 18%,var(--line)); border-radius:9px; background:linear-gradient(140deg,color-mix(in srgb,var(--theme-mid) 9%,rgba(26,24,29,.94)),rgba(14,13,16,.96)); }.moment-compose textarea { width:100%; min-height:76px; padding:0; resize:none; border:0; background:transparent; color:var(--text); font-size:12px; line-height:1.6; outline:0; }.moment-compose-preview { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:8px 0; }.moment-compose-preview figure { position:relative; aspect-ratio:1; margin:0; overflow:hidden; border-radius:6px; background:#090a0d; }.moment-compose-preview img { width:100%; height:100%; object-fit:cover; }.moment-compose-preview button { position:absolute; top:4px; right:4px; width:24px; height:24px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.68); color:white; }.moment-compose-tools { display:grid; grid-template-columns:auto 1fr auto; gap:7px; align-items:center; }.moment-compose-tools > button,.moment-compose-tools > input { height:34px; border:1px solid var(--line); border-radius:6px; background:rgba(10,10,12,.55); color:var(--muted); font-size:9px; }.moment-compose-tools > button { padding:0 9px; display:flex; align-items:center; gap:5px; }.moment-compose-tools > input { min-width:0; padding:0 9px; }.moment-compose-tools .publish { border-color:var(--accent); background:var(--accent); color:var(--theme-dark); font-weight:800; }.moment-compose-tools .publish:disabled { opacity:.38; }
.moments-feed { padding:0 14px; }.moment-pro { padding:15px 0; display:grid; grid-template-columns:40px 1fr; gap:10px; border-bottom:1px solid var(--line); }.moment-avatar { width:40px; height:40px; overflow:hidden; border:1px solid color-mix(in srgb,var(--theme-glow) 26%,var(--line)); border-radius:7px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font:500 15px Georgia,serif; }.moment-avatar img { width:100%; height:100%; object-fit:cover; }.moment-main { min-width:0; }.moment-main h3 { margin:1px 0 7px; color:color-mix(in srgb,var(--theme-light) 72%,var(--accent)); font-size:12px; }.moment-main > p { margin:0 0 9px; color:#ece6e1; font-size:11px; line-height:1.65; white-space:pre-wrap; }.moment-photo-grid { display:grid; gap:4px; max-width:260px; margin:5px 0 8px; }.moment-photo-grid.count-1 { grid-template-columns:minmax(0,210px); }.moment-photo-grid:not(.count-1) { grid-template-columns:repeat(2,minmax(0,1fr)); }.moment-photo { padding:0; overflow:hidden; border:0; border-radius:5px; background:#090a0d; aspect-ratio:1; }.moment-photo img { width:100%; height:100%; object-fit:cover; }.moment-location { margin:6px 0; display:flex; align-items:center; gap:4px; color:var(--theme-glow); font-size:8px; }.moment-meta { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:8px; }.moment-meta button { padding:4px 7px; border:0; border-radius:4px; display:flex; align-items:center; gap:4px; background:rgba(255,255,255,.06); color:var(--muted); font-size:8px; }.moment-reactions { margin-top:8px; padding:7px 9px; border-radius:5px; background:color-mix(in srgb,var(--theme-mid) 9%,rgba(255,255,255,.045)); }.moment-likes { display:flex; align-items:center; gap:5px; padding-bottom:5px; color:var(--theme-glow); font-size:8px; border-bottom:1px solid rgba(255,255,255,.06); }.moment-comment { display:grid; grid-template-columns:auto 1fr; gap:6px; margin-top:5px; font-size:9px; line-height:1.45; }.moment-comment b { color:var(--theme-glow); }.moment-comment span { color:#d8d2cd; }.media-preview { position:fixed; z-index:90; inset:0; padding:22px; border:0; display:grid; place-items:center; background:rgba(0,0,0,.91); }.media-preview img { max-width:100%; max-height:82dvh; border-radius:8px; object-fit:contain; }

.chat-page { background: linear-gradient(155deg, var(--theme-dark), color-mix(in srgb, var(--theme-mid) 24%, #0a0a0d) 48%, #09090b); }
.chat-wallpaper { position: absolute; inset: 0; background-size: cover; background-position: center 16%; opacity: var(--wallpaper-alpha, .2); filter: saturate(.82) contrast(1.05); }
.chat-nav { position: relative; z-index: 5; min-height: calc(72px + env(safe-area-inset-top)); padding: calc(28px + env(safe-area-inset-top)) 10px 8px; display: grid; grid-template-columns: 38px 1fr 140px; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--theme-glow) 24%, transparent); background: linear-gradient(110deg, color-mix(in srgb, var(--theme-dark) 76%, transparent), color-mix(in srgb, var(--theme-mid) 18%, rgba(8,8,10,.78))); backdrop-filter: blur(22px); }
.chat-contact { min-width: 0; padding: 0; border: 0; background: transparent; display: flex; align-items: center; gap: 9px; text-align: left; cursor: pointer; }
.chat-contact img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid color-mix(in srgb, var(--theme-glow) 55%, white); }
.chat-contact span { min-width: 0; }
.chat-contact strong, .chat-contact small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-contact strong { font-size: 13px; }
.chat-contact small { max-width: 180px; margin-top: 2px; color: color-mix(in srgb, var(--theme-light) 58%, var(--muted)); font-size: 9px; }
.chat-nav-actions { display: flex; justify-content: flex-end; }
.chat-mode-switch { flex:0 0 34px; }.chat-context { position:absolute; z-index:6; top:calc(108px + env(safe-area-inset-top)); left:12px; right:12px; height:34px; padding:0 10px; border:1px solid color-mix(in srgb,var(--theme-glow) 26%,var(--line)); border-radius:7px; display:grid; grid-template-columns:16px 1fr 16px; gap:6px; align-items:center; background:linear-gradient(110deg,color-mix(in srgb,var(--theme-mid) 24%,rgba(18,17,21,.92)),color-mix(in srgb,var(--theme-dark) 88%,rgba(12,12,14,.94))); color:var(--theme-light); text-align:left; font-size:9px; backdrop-filter:blur(16px); }
.chat-context svg { color:var(--theme-glow); }
.chat-messages { position: relative; z-index: 2; padding: 18px 13px 132px; display: flex; flex-direction: column; gap: 11px; }
.chat-messages.has-context { padding-top:58px; }
.chat-day { align-self: center; padding: 4px 9px; border: 1px solid color-mix(in srgb, var(--theme-glow) 18%, transparent); border-radius: 10px; background: rgba(8,8,10,.26); color: color-mix(in srgb, var(--theme-light) 64%, var(--muted)); font-size: 9px; backdrop-filter: blur(10px); }
.chat-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-row.mine { justify-content: flex-end; }
.chat-row[role="button"] { outline: none; }
.chat-row[role="button"]:focus-visible .chat-bubble { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), 0 7px 22px rgba(0,0,0,.24); }
.chat-row.chat-target .chat-bubble { animation: chat-target-pulse 1.8s ease; }
@keyframes chat-target-pulse { 0%,100% { box-shadow:0 7px 22px rgba(0,0,0,.24); } 35% { box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent),0 7px 24px rgba(0,0,0,.32); } }
.chat-avatar { flex:0 0 30px; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid color-mix(in srgb, var(--theme-glow) 42%, transparent); box-shadow:0 0 0 2px rgba(8,8,11,.52),0 5px 16px rgba(0,0,0,.3); }
.user-avatar-fallback { display:grid; place-items:center; background:linear-gradient(145deg,var(--theme-mid),var(--theme-dark)); color:var(--theme-light); font:600 11px Georgia,"Songti SC",serif; }
.chat-message-body { max-width: 76%; }
.chat-sender { display:block; margin:0 3px 4px; color:color-mix(in srgb,var(--theme-light) 56%,var(--muted)); font-size:8px; }
.chat-row.mine .chat-sender { text-align:right; color:color-mix(in srgb,var(--theme-glow) 72%,var(--muted)); }
.chat-bubble { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--theme-glow) 18%, rgba(255,255,255,.08)); border-radius: var(--bubble-radius, 7px); background: linear-gradient(135deg, color-mix(in srgb, var(--theme-mid) 14%, rgba(33,31,36,var(--bubble-alpha,.88))), rgba(19,18,22,var(--bubble-alpha,.88))); color: #f3eef1; font-size: calc(12px * var(--font-scale, 1)); line-height: 1.62; box-shadow: 0 7px 22px rgba(0,0,0,.24); backdrop-filter: blur(15px); }
.chat-image { display:block; width:min(220px,60vw); max-height:260px; margin:-4px -5px 8px; border-radius:6px; object-fit:cover; }
.chat-row.mine .chat-bubble { border-color: color-mix(in srgb, var(--accent) 38%, transparent); border-radius: var(--bubble-radius, 7px); background: linear-gradient(135deg, color-mix(in srgb, var(--theme-mid) 72%, #20202a), color-mix(in srgb, var(--theme-dark) 76%, #27222a)); }
.chat-audio { display:block; width:min(230px,62vw); height:34px; margin:0 0 7px; }
.chat-row time { display: block; margin-top: 3px; color: color-mix(in srgb, var(--theme-light) 42%, var(--muted)); font-size: 8px; }
.chat-row.mine time { text-align: right; }
.chat-row time svg { display:inline-block; vertical-align:-1px; color:var(--accent); fill:color-mix(in srgb,var(--accent) 35%,transparent); }
.chat-quote { margin:-3px -4px 8px; padding:6px 8px; border-left:2px solid var(--accent); border-radius:3px; display:grid; gap:2px; background:rgba(255,255,255,.055); }
.chat-quote b { color:var(--theme-glow); font-size:8px; }
.chat-quote span { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:9px; }
.typing { display: flex; gap: 4px; padding: 13px 15px; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--theme-glow); animation: typing 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; }.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%,60%,100% { opacity:.3; transform:translateY(0) } 30% { opacity:1; transform:translateY(-3px) } }
.chat-quick { position: absolute; z-index: 6; left: 0; right: 0; bottom: calc(57px + env(safe-area-inset-bottom)); display: flex; gap: 7px; overflow-x: auto; padding: 8px 12px; scrollbar-width: none; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--theme-dark) 82%, rgba(10,10,12,.92)) 36%); }
.chat-quick button { flex: 0 0 auto; height: 30px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--theme-glow) 24%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--theme-mid) 12%, rgba(22,20,24,.84)); color: color-mix(in srgb, var(--theme-light) 72%, var(--muted)); font-size: 10px; backdrop-filter: blur(12px); cursor: pointer; }
.chat-composer { position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; min-height: calc(58px + env(safe-area-inset-bottom)); padding: 8px 11px calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 38px 38px 1fr 38px; gap: 7px; background: linear-gradient(110deg, color-mix(in srgb, var(--theme-dark) 82%, rgba(12,12,14,.94)), color-mix(in srgb, var(--theme-mid) 16%, rgba(12,12,14,.94))); border-top: 1px solid color-mix(in srgb, var(--theme-glow) 22%, var(--line)); backdrop-filter: blur(22px); }
.chat-composer input { min-width: 0; border: 1px solid color-mix(in srgb, var(--theme-glow) 20%, var(--line)); border-radius: 7px; background: rgba(8,8,10,.5); color: var(--text); padding: 0 11px; font-size: 12px; }
.chat-send { border: 0; border-radius: 7px; display: grid; place-items: center; background: linear-gradient(145deg, var(--theme-glow), var(--accent)); color: var(--theme-dark); cursor: pointer; }
.chat-page.has-compose-context .chat-quick { bottom:calc(103px + env(safe-area-inset-bottom)); }
.chat-page.has-compose-context .chat-messages { padding-bottom:178px; }
.chat-compose-context { position:absolute; z-index:7; left:0; right:0; bottom:calc(58px + env(safe-area-inset-bottom)); min-height:46px; padding:7px 12px; display:grid; grid-template-columns:1fr 30px; gap:8px; align-items:center; border-top:1px solid color-mix(in srgb,var(--theme-glow) 18%,var(--line)); background:color-mix(in srgb,var(--theme-dark) 88%,rgba(12,12,14,.96)); backdrop-filter:blur(18px); }
.chat-compose-context div { min-width:0; display:grid; gap:2px; }
.chat-compose-context b { color:var(--theme-glow); font-size:9px; }
.chat-compose-context span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:9px; }
.chat-compose-context button { width:30px; height:30px; border:0; display:grid; place-items:center; background:transparent; color:var(--muted); }
.chat-jump { position:absolute; z-index:6; right:14px; bottom:calc(102px + env(safe-area-inset-bottom)); min-height:32px; padding:0 11px; border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line)); border-radius:16px; display:none; align-items:center; gap:5px; background:color-mix(in srgb,var(--theme-dark) 84%,var(--accent)); color:var(--theme-light); font-size:9px; box-shadow:0 8px 20px rgba(0,0,0,.3); }
.chat-jump.show { display:flex; }
.chat-page.has-compose-context .chat-jump { bottom:calc(148px + env(safe-area-inset-bottom)); }
.chat-menu-layer { position:absolute; z-index:30; inset:0; }
.chat-menu-backdrop { position:absolute; inset:0; width:100%; border:0; background:rgba(0,0,0,.58); backdrop-filter:blur(3px); }
.chat-menu-sheet { position:absolute; left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom)); padding:12px; border:1px solid color-mix(in srgb,var(--theme-glow) 22%,var(--line)); border-radius:8px; background:linear-gradient(150deg,color-mix(in srgb,var(--theme-dark) 92%,#252129),#111014); box-shadow:0 22px 60px rgba(0,0,0,.55); }
.chat-menu-preview { min-width:0; padding:3px 4px 12px; }
.chat-menu-preview span { color:var(--theme-glow); font-size:9px; }
.chat-menu-preview p { margin:5px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-size:11px; }
.chat-menu-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.chat-menu-actions button { min-width:0; height:62px; padding:7px 3px; border:1px solid color-mix(in srgb,var(--theme-glow) 18%,var(--line)); border-radius:6px; display:grid; place-items:center; align-content:center; gap:5px; background:rgba(255,255,255,.045); color:var(--theme-light); font-size:8px; }
.chat-menu-actions button svg { color:var(--accent); }
.chat-history-page { padding:14px 14px 34px; }
.chat-history-search { display:grid; grid-template-columns:1fr 54px; gap:7px; }
.chat-history-search label { min-width:0; height:40px; padding:0 10px; border:1px solid color-mix(in srgb,var(--theme-glow) 18%,var(--line)); border-radius:7px; display:grid; grid-template-columns:20px 1fr; align-items:center; background:rgba(255,255,255,.035); color:var(--muted); }
.chat-history-search input { min-width:0; border:0; outline:0; background:transparent; color:var(--text); font-size:11px; }
.chat-history-search button,.chat-history-date button { border:1px solid var(--accent); border-radius:7px; background:var(--accent); color:var(--theme-dark); font-size:10px; font-weight:800; }
.chat-history-date { margin-top:8px; display:flex; justify-content:space-between; gap:8px; align-items:center; }
.chat-history-date label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:9px; }
.chat-history-date input { min-height:32px; padding:0 8px; border:1px solid var(--line); border-radius:6px; background:rgba(255,255,255,.035); color:var(--text); color-scheme:dark; }
.chat-history-date button { min-height:30px; padding:0 10px; border-color:var(--line); background:transparent; color:var(--muted); font-weight:500; }
.chat-history-filters { margin:12px 0 4px; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.chat-history-filters button { flex:0 0 auto; min-height:30px; padding:0 11px; border:1px solid var(--line); border-radius:15px; background:transparent; color:var(--muted); font-size:9px; }
.chat-history-filters button.active { border-color:var(--accent); background:var(--accent); color:var(--theme-dark); font-weight:800; }
.chat-history-list { display:grid; gap:7px; }
.chat-history-row { width:100%; min-width:0; padding:11px; border:1px solid color-mix(in srgb,var(--theme-glow) 14%,var(--line)); border-radius:7px; display:grid; grid-template-columns:32px 1fr 16px; gap:9px; align-items:center; background:linear-gradient(120deg,color-mix(in srgb,var(--theme-mid) 10%,rgba(255,255,255,.035)),rgba(255,255,255,.025)); color:var(--text); text-align:left; }
.chat-history-kind { width:32px; height:32px; border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line)); border-radius:6px; display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); }
.chat-history-row div { min-width:0; }
.chat-history-row strong { display:flex; align-items:center; gap:4px; font-size:10px; }
.chat-history-row strong svg { color:var(--accent); fill:color-mix(in srgb,var(--accent) 35%,transparent); }
.chat-history-row p { margin:4px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-size:10px; }
.chat-history-row small { color:var(--muted); font-size:8px; }

.call-hero { position: relative; min-height: 235px; overflow: hidden; border-radius: 8px; }
.call-hero img { width: 100%; height: 235px; object-fit: cover; object-position: center 20%; }
.call-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 20%,var(--theme-dark)); }
.call-hero > div { position:absolute; z-index:2; left:17px; right:17px; bottom:15px; }
.call-hero span { color:var(--theme-glow); font-size:9px; font-weight:800; }.call-hero h2 { margin:5px 0; font:500 25px/1.1 Georgia,"Songti SC",serif; }.call-hero p { margin:0; color:var(--muted); font-size:10px; }
.call-launch { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:12px 0 18px; }
.call-launch button { min-height:58px; border:1px solid color-mix(in srgb,var(--theme-glow) 28%,var(--line)); border-radius:8px; display:flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg,color-mix(in srgb,var(--theme-mid) 28%,rgba(25,23,28,.88)),rgba(17,16,19,.9)); color:var(--theme-light); cursor:pointer; }
.call-log-icon { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }.list-card.avatar-row time { color:var(--muted); font-size:8px; }
.active-call { background:var(--theme-dark); }.active-call-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.active-call-shade { position:absolute; inset:0; background:linear-gradient(180deg,color-mix(in srgb,var(--theme-mid) 18%,rgba(0,0,0,.08)),transparent 36%,var(--theme-dark)); }
.active-call-copy { position:relative; z-index:2; margin:auto 24px 0; text-align:center; }.active-call-copy span { color:var(--theme-glow); font-size:10px; }.active-call-copy h1 { margin:8px 0; font:500 34px/1 Georgia,"Songti SC",serif; }.active-call-copy p { margin:0; font-variant-numeric:tabular-nums; color:var(--theme-light); }
.call-transcript { position:relative; z-index:2; max-height:210px; margin:24px 22px 0; padding:12px; overflow:auto; border:1px solid color-mix(in srgb,var(--theme-glow) 20%,rgba(255,255,255,.12)); border-radius:9px; background:rgba(10,10,13,.48); backdrop-filter:blur(18px); }
.call-transcript p { margin:0 0 9px; color:var(--text); font-size:11px; line-height:1.55; }.call-transcript p:last-child { margin-bottom:0; }.call-transcript b { display:block; margin-bottom:2px; color:var(--theme-glow); font-size:8px; }.call-transcript .user { text-align:right; }
.call-controls { position:relative; z-index:2; padding:44px 34px calc(48px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.call-controls button { border:0; background:transparent; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--text); font-size:9px; }.call-controls button svg { width:48px!important; height:48px!important; padding:14px; border-radius:50%; background:rgba(255,255,255,.14); }.call-controls .hangup svg { background:#d84a53; }

.album-page { padding-bottom:calc(24px + env(safe-area-inset-bottom)); }.album-feature { position:relative; min-height:265px; overflow:hidden; }.album-feature img { width:100%; height:265px; object-fit:cover; }.album-feature::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,var(--theme-dark)); }.album-feature div { position:absolute; z-index:2; left:17px; right:17px; bottom:15px; }.album-feature span { color:var(--theme-glow); font-size:9px; font-weight:800; }.album-feature h2 { margin:5px 0; font:500 25px/1.1 Georgia,"Songti SC",serif; }.album-feature p { margin:0; color:var(--muted); font-size:9px; }
.shared-photo-compose { margin:0 15px 13px; padding:12px; border:1px solid color-mix(in srgb,var(--theme-glow) 24%,var(--line)); border-radius:8px; background:linear-gradient(140deg,color-mix(in srgb,var(--theme-mid) 13%,rgba(24,23,28,.93)),rgba(12,12,15,.95)); }.shared-photo-compose .settings-title { margin-bottom:9px; }.shared-photo-tools { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }.shared-photo-tools input,.shared-photo-tools button { min-width:0; height:38px; border:1px solid var(--line); border-radius:6px; font-size:9px; }.shared-photo-tools input { padding:0 10px; background:rgba(7,8,11,.58); color:var(--text); outline:none; }.shared-photo-tools input:focus { border-color:var(--theme-glow); }.shared-photo-tools button { padding:0 10px; display:flex; align-items:center; gap:5px; border-color:var(--accent); background:var(--accent); color:var(--theme-dark); font-weight:800; }.album-shared-heading { padding:0 15px; }.shared-album-grid { padding:0 15px 17px; display:grid; grid-template-columns:1fr 1fr; gap:7px; }.shared-album-grid figure { min-width:0; margin:0; overflow:hidden; border:1px solid color-mix(in srgb,var(--theme-glow) 18%,var(--line)); border-radius:7px; background:rgba(10,10,13,.72); }.shared-album-grid img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; }.shared-album-grid figcaption { min-width:0; padding:8px; display:grid; gap:3px; }.shared-album-grid figcaption span { overflow:hidden; color:var(--text); font-size:9px; white-space:nowrap; text-overflow:ellipsis; }.shared-album-grid time { color:var(--muted); font-size:7px; }
.offline-footprint-timeline { position:relative; margin:0 15px 18px; padding-left:24px; }.offline-footprint-timeline::before { content:""; position:absolute; left:8px; top:8px; bottom:10px; width:1px; background:linear-gradient(180deg,var(--theme-glow),color-mix(in srgb,var(--theme-mid) 34%,transparent),transparent); opacity:.52; }.offline-footprint { position:relative; min-width:0; padding:11px 0 12px; border-bottom:1px solid var(--line); }.offline-footprint-index { position:absolute; left:-24px; top:13px; width:17px; height:17px; border:1px solid color-mix(in srgb,var(--theme-glow) 52%,var(--line)); border-radius:50%; display:grid; place-items:center; background:var(--theme-dark); color:var(--theme-glow); font:600 6px Georgia,serif; box-shadow:0 0 10px color-mix(in srgb,var(--theme-glow) 20%,transparent); }.offline-footprint.photo { display:grid; grid-template-columns:76px minmax(0,1fr); gap:10px; align-items:center; }.offline-footprint.photo > img { width:76px; height:76px; border-radius:5px; object-fit:cover; }.offline-footprint small { color:var(--theme-glow); font-size:7px; line-height:1.45; }.offline-footprint h3 { margin:5px 0; color:var(--text); font-size:11px; }.offline-footprint p { margin:0; color:var(--muted); font-size:8px; line-height:1.55; }.offline-footprint.scene { display:block; }.offline-footprint-main { min-width:0; }.offline-footprint-main > button { min-height:29px; margin-top:8px; padding:0 9px; border:1px solid color-mix(in srgb,var(--theme-glow) 24%,var(--line)); border-radius:4px; display:flex; align-items:center; gap:5px; background:var(--accent-soft); color:var(--theme-light); font-size:8px; }.offline-footprint-photos { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:8px; }.offline-footprint-photos img { width:100%; aspect-ratio:1; border-radius:4px; object-fit:cover; }
.album-grid { padding:12px 15px 18px; display:grid; grid-template-columns:1.45fr 1fr; gap:8px; }.album-grid figure { margin:0; overflow:hidden; border:1px solid color-mix(in srgb,var(--theme-glow) 18%,var(--line)); border-radius:7px; background:rgba(12,12,14,.5); }.album-grid img { width:100%; height:172px; object-fit:cover; }.album-grid figure:nth-child(2) img { height:172px; }.album-grid figcaption { padding:8px; color:var(--muted); font-size:9px; }
.support-color-guide { margin:0 15px 18px; overflow:hidden; border:1px solid color-mix(in srgb,var(--theme-glow) 28%,var(--line)); border-radius:7px; background:#050608; }.support-color-guide img { display:block; width:100%; height:470px; object-fit:cover; object-position:center 51%; }.support-color-guide figcaption { padding:10px 11px 11px; display:grid; gap:3px; border-top:1px solid color-mix(in srgb,var(--theme-glow) 20%,var(--line)); background:linear-gradient(120deg,color-mix(in srgb,var(--theme-mid) 16%,rgba(18,18,23,.94)),rgba(8,9,12,.96)); }.support-color-guide figcaption span { color:var(--theme-glow); font-size:7px; font-weight:800; }.support-color-guide figcaption strong { font-size:11px; }.support-color-guide figcaption small { color:var(--muted); font-size:8px; }
.xavier-camera { margin:14px 15px 4px; padding:13px; border:1px solid color-mix(in srgb,var(--theme-glow) 24%,var(--line)); border-radius:9px; background:linear-gradient(145deg,color-mix(in srgb,var(--theme-mid) 18%,rgba(24,22,28,.9)),rgba(12,12,15,.94)); }.xavier-camera form { display:grid; grid-template-columns:minmax(0,1fr) 88px auto; gap:6px; }.xavier-camera form input { min-width:0; height:38px; padding:0 8px; border:1px solid var(--line); border-radius:6px; background:rgba(7,8,11,.58); color:var(--text); font-size:8px; }.xavier-camera form button { padding:0 8px; border:1px solid var(--accent); border-radius:6px; display:flex; align-items:center; gap:4px; background:var(--accent); color:var(--theme-dark); font-size:8px; font-weight:800; }.xavier-camera form button:disabled { opacity:.45; }.xavier-camera-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:10px; }.xavier-camera-grid figure { margin:0; overflow:hidden; border-radius:6px; background:#090a0d; }.xavier-camera-grid img { width:100%; aspect-ratio:3/4; object-fit:cover; }.xavier-camera-grid figcaption { padding:7px; color:var(--muted); font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.memory-film { padding:0 15px; display:grid; gap:8px; }.memory-film article { display:grid; grid-template-columns:28px 1fr auto; gap:8px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); }.memory-film article > span { color:var(--accent); font:600 12px Georgia,serif; }.memory-film p { margin:0; font-size:10px; line-height:1.5; }.memory-film time { color:var(--muted); font-size:8px; }

.companion-intro { padding:16px 0 8px; }.companion-intro h2 { margin:7px 0; font:500 25px/1.2 Georgia,"Songti SC",serif; }.companion-intro p { color:var(--muted); font-size:10px; line-height:1.6; }.companion-modes { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:12px 0 14px; }.companion-modes button { min-height:92px; border:1px solid color-mix(in srgb,var(--theme-glow) 24%,var(--line)); border-radius:8px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; padding:14px; background:linear-gradient(145deg,color-mix(in srgb,var(--theme-mid) 25%,rgba(28,26,30,.86)),rgba(16,15,18,.9)); color:var(--theme-light); cursor:pointer; }.companion-modes small { color:var(--muted); font-size:8px; }.companion-audio-panel { margin-bottom:18px; padding:12px; border:1px solid color-mix(in srgb,var(--theme-glow) 20%,var(--line)); border-radius:8px; background:rgba(15,14,18,.72); }.companion-audio-panel > div:first-child { display:grid; grid-template-columns:30px 1fr; gap:8px; align-items:center; }.companion-audio-panel > div:first-child > span { color:var(--accent); }.companion-audio-panel strong,.companion-audio-panel small { display:block; }.companion-audio-panel strong { font-size:11px; }.companion-audio-panel small { margin-top:3px; color:var(--muted); font-size:8px; }
.companion-active > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.companion-overlay { position:absolute; inset:0; background:linear-gradient(180deg,color-mix(in srgb,var(--theme-mid) 15%,rgba(0,0,0,.18)),rgba(0,0,0,.14) 28%,var(--theme-dark) 84%); }.companion-back { position:absolute; z-index:3; top:calc(42px + env(safe-area-inset-top)); left:14px; }.companion-copy { position:relative; z-index:2; width:calc(100% - 38px); margin:auto 19px calc(30px + env(safe-area-inset-bottom)); text-align:center; }.companion-copy > span { color:var(--theme-glow); font-size:10px; }.companion-copy > strong { display:block; margin:12px 0; font:400 44px/1 Georgia,serif; letter-spacing:.04em; }.companion-copy p { color:var(--muted); font-size:11px; }.companion-copy > .btn { margin-top:10px; min-width:150px; }.companion-soundbar { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px; }.companion-soundbar button { min-height:38px; padding:0 7px; border:1px solid var(--line); border-radius:6px; display:flex; align-items:center; justify-content:center; gap:5px; background:rgba(10,10,12,.55); color:var(--muted); font-size:8px; }.companion-soundbar button.on { border-color:var(--accent); background:var(--accent-soft); color:var(--theme-light); }.companion-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:8px; }.companion-actions .btn { min-width:0; margin:0; display:flex; align-items:center; justify-content:center; gap:5px; }
.xavier-pack-panel { margin:0 0 18px; padding:12px; border:1px solid color-mix(in srgb,var(--theme-glow) 22%,var(--line)); border-radius:8px; background:linear-gradient(135deg,color-mix(in srgb,var(--theme-mid) 14%,rgba(20,19,24,.86)),rgba(12,12,15,.9)); }.xavier-pack-panel > div:first-child { display:grid; grid-template-columns:30px 1fr; gap:8px; align-items:center; }.xavier-pack-panel > div:first-child > span { color:var(--accent); }.xavier-pack-panel strong,.xavier-pack-panel small { display:block; }.xavier-pack-panel strong { font-size:11px; }.xavier-pack-panel small { margin-top:3px; color:var(--muted); font-size:8px; line-height:1.5; }.xavier-pack-panel > div:last-child { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }.xavier-pack-panel .btn { flex:1 1 calc(50% - 7px); min-width:0; display:flex; align-items:center; justify-content:center; gap:5px; }

.mission-progress { padding:17px; margin:6px 0 14px; border:1px solid color-mix(in srgb,var(--theme-glow) 24%,var(--line)); border-radius:8px; background:linear-gradient(135deg,color-mix(in srgb,var(--theme-mid) 30%,rgba(30,28,34,.86)),rgba(15,14,17,.9)); }.mission-progress > span { color:var(--muted); font-size:10px; }.mission-progress > strong { float:right; font-size:12px; }.mission-progress > div { clear:both; height:4px; margin-top:13px; overflow:hidden; border-radius:2px; background:rgba(255,255,255,.09); }.mission-progress i { display:block; height:100%; background:linear-gradient(90deg,var(--theme-mid),var(--theme-glow)); transition:width .25s ease; }
.mission-row { width:100%; min-height:64px; padding:11px 12px; border:1px solid color-mix(in srgb,var(--theme-glow) 17%,var(--line)); border-radius:8px; display:grid; grid-template-columns:32px 1fr 18px; gap:8px; align-items:center; background:rgba(19,18,21,.72); text-align:left; cursor:pointer; }.mission-row > span { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }.mission-row strong,.mission-row small { display:block; }.mission-row strong { font-size:11px; }.mission-row small { margin-top:5px; color:var(--muted); font-size:9px; }.mission-row.done { opacity:.62; }.mission-row.done strong { text-decoration:line-through; }
.terminal-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.terminal-strip span { min-height:58px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); border-radius:7px; background:rgba(17,16,19,.7); color:var(--muted); font-size:9px; }.terminal-strip svg { color:var(--accent); }

.memory-tree-link { width:100%; min-height:72px; margin-bottom:12px; padding:12px; border:1px solid color-mix(in srgb,var(--theme-glow) 30%,var(--line)); border-radius:7px; display:grid; grid-template-columns:38px 1fr 20px; gap:9px; align-items:center; background:linear-gradient(120deg,color-mix(in srgb,var(--theme-mid) 24%,rgba(20,19,24,.9)),rgba(11,12,16,.94)); color:var(--text); text-align:left; }.memory-tree-link > span { width:36px; height:36px; display:grid; place-items:center; color:var(--theme-glow); border:1px solid color-mix(in srgb,var(--theme-glow) 28%,transparent); border-radius:50%; }.memory-tree-link strong,.memory-tree-link small { display:block; }.memory-tree-link strong { font-size:11px; }.memory-tree-link small { margin-top:5px; color:var(--muted); font-size:8px; }
.memory-tree-page { padding-bottom:calc(28px + env(safe-area-inset-bottom)); background:radial-gradient(circle at 18% 2%,color-mix(in srgb,var(--theme-mid) 20%,transparent),transparent 31%),linear-gradient(180deg,color-mix(in srgb,var(--theme-dark) 94%,#08090d),#08090d); }
.memory-tree-hero { min-height:158px; padding:20px 17px 17px; display:grid; grid-template-columns:92px 1fr; gap:15px; align-items:center; border-bottom:1px solid color-mix(in srgb,var(--theme-glow) 20%,var(--line)); }.memory-tree-hero > div:last-child > span { color:var(--theme-glow); font-size:8px; font-weight:800; }.memory-tree-hero h2 { margin:7px 0 6px; font:500 20px/1.2 Georgia,"Songti SC",serif; }.memory-tree-hero p { margin:0; color:var(--muted); font-size:9px; line-height:1.6; }
.memory-orbit { position:relative; width:86px; height:86px; display:grid; place-items:center; }.memory-orbit::before,.memory-orbit::after { content:""; position:absolute; border:1px solid color-mix(in srgb,var(--theme-glow) 34%,transparent); border-radius:50%; }.memory-orbit::before { inset:3px; }.memory-orbit::after { inset:12px; border-style:dashed; animation:memory-orbit 18s linear infinite; }.memory-orbit img { width:54px; height:54px; border-radius:50%; object-fit:cover; border:1px solid color-mix(in srgb,var(--theme-light) 55%,white); box-shadow:0 0 24px color-mix(in srgb,var(--theme-glow) 28%,transparent); }.memory-orbit i { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--theme-glow); box-shadow:0 0 8px var(--theme-glow); }.memory-orbit i:nth-of-type(1){top:7px;left:24px}.memory-orbit i:nth-of-type(2){right:4px;bottom:27px}.memory-orbit i:nth-of-type(3){left:9px;bottom:13px}
.memory-vitals { display:grid; grid-template-columns:repeat(3,1fr); min-height:64px; border-bottom:1px solid var(--line); }.memory-vitals div { display:grid; place-content:center; text-align:center; border-right:1px solid var(--line); }.memory-vitals div:last-child { border-right:0; }.memory-vitals b { color:var(--theme-light); font:500 19px/1 Georgia,serif; }.memory-vitals span { margin-top:5px; color:var(--muted); font-size:8px; }
.memory-filters { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; padding:11px 13px; border-bottom:1px solid var(--line); }.memory-filters button { min-width:0; height:37px; padding:0 7px; border:1px solid color-mix(in srgb,var(--theme-glow) 14%,var(--line)); border-radius:5px; display:grid; grid-template-columns:15px 1fr auto; gap:3px; align-items:center; background:rgba(13,14,18,.68); color:var(--muted); font-size:8px; }.memory-filters button.on { border-color:color-mix(in srgb,var(--theme-glow) 62%,white); background:color-mix(in srgb,var(--theme-mid) 25%,rgba(18,19,24,.88)); color:var(--theme-light); }.memory-filters b { color:var(--theme-glow); font-size:8px; }
.memory-branch { position:relative; padding:16px 14px 8px 34px; }.memory-branch::before { content:""; position:absolute; left:21px; top:0; bottom:22px; width:1px; background:linear-gradient(180deg,var(--theme-glow),color-mix(in srgb,var(--theme-mid) 30%,transparent),transparent); opacity:.54; }.memory-node { position:relative; margin:0 0 10px; border:1px solid color-mix(in srgb,var(--theme-glow) 18%,var(--line)); border-radius:7px; background:linear-gradient(120deg,color-mix(in srgb,var(--theme-mid) 12%,rgba(20,20,25,.88)),rgba(11,12,16,.92)); animation:memory-rise .28s ease both; animation-delay:var(--node-delay); }.memory-node.deep { border-color:color-mix(in srgb,var(--theme-glow) 34%,var(--line)); }.memory-node.eternal { border-color:color-mix(in srgb,var(--theme-light) 54%,var(--line)); background:linear-gradient(125deg,color-mix(in srgb,var(--theme-mid) 34%,rgba(27,27,35,.92)),rgba(10,11,16,.94)); box-shadow:inset 0 1px color-mix(in srgb,var(--theme-light) 16%,transparent),0 10px 30px rgba(0,0,0,.2); }.memory-node.merge-source { border-color:var(--theme-glow); box-shadow:0 0 0 1px color-mix(in srgb,var(--theme-glow) 24%,transparent),0 12px 28px rgba(0,0,0,.22); }.memory-node-mark { position:absolute; left:-21px; top:15px; width:15px; height:15px; border:1px solid var(--theme-glow); border-radius:50%; display:grid; place-items:center; background:var(--theme-dark); color:var(--theme-glow); box-shadow:0 0 10px color-mix(in srgb,var(--theme-glow) 42%,transparent); }.memory-node-mark svg { width:9px!important;height:9px!important; }.memory-node-main { padding:12px; }.memory-node-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--theme-glow); font-size:8px; }.memory-node-meta time { color:var(--muted); }.memory-node p { margin:8px 0 6px; color:var(--text); font-size:10px; line-height:1.58; white-space:pre-wrap; }.memory-node small { color:var(--muted); font-size:8px; }.memory-node-actions { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:6px; margin-top:10px; padding-top:9px; border-top:1px solid rgba(255,255,255,.06); }.memory-node-actions button { min-height:29px; padding:0 8px; border:1px solid color-mix(in srgb,var(--theme-glow) 20%,var(--line)); border-radius:4px; display:flex; align-items:center; gap:4px; background:rgba(8,9,12,.46); color:color-mix(in srgb,var(--theme-light) 70%,var(--muted)); font-size:8px; }.memory-node.eternal .memory-node-actions [data-memory-eternal],.memory-node-actions .memory-merge-target { color:var(--theme-light); border-color:color-mix(in srgb,var(--theme-glow) 44%,var(--line)); }.memory-node-actions .memory-delete { margin-left:auto; color:#dca5ae; border-color:rgba(220,120,135,.24); }.memory-edit-form { margin:9px 0 7px; }.memory-edit-form textarea { width:100%; min-height:86px; resize:vertical; padding:10px; border:1px solid color-mix(in srgb,var(--theme-glow) 38%,var(--line)); border-radius:5px; background:rgba(7,8,12,.68); color:var(--text); font:inherit; font-size:10px; line-height:1.55; outline:none; }.memory-edit-form textarea:focus { border-color:var(--theme-glow); box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-glow) 12%,transparent); }.memory-edit-form > div { display:flex; justify-content:flex-end; gap:7px; margin-top:7px; }.memory-edit-form button,.memory-merge-guide button { min-height:30px; padding:0 9px; border:1px solid color-mix(in srgb,var(--theme-glow) 28%,var(--line)); border-radius:4px; display:flex; align-items:center; gap:4px; background:rgba(8,9,12,.62); color:var(--theme-light); font-size:8px; }.memory-merge-guide { min-height:58px; padding:10px 14px; display:grid; grid-template-columns:28px 1fr 32px; gap:8px; align-items:center; border-bottom:1px solid color-mix(in srgb,var(--theme-glow) 28%,var(--line)); background:color-mix(in srgb,var(--theme-mid) 18%,rgba(11,12,16,.94)); }.memory-merge-guide > span { color:var(--theme-glow); }.memory-merge-guide strong,.memory-merge-guide small { display:block; }.memory-merge-guide strong { font-size:10px; }.memory-merge-guide small { margin-top:4px; color:var(--muted); font-size:8px; line-height:1.45; overflow-wrap:anywhere; }.memory-merge-guide button { width:32px; padding:0; justify-content:center; }.memory-tree-empty { margin-left:-20px; }
@keyframes memory-orbit { to { transform:rotate(360deg) } }
@keyframes memory-rise { from { opacity:0; transform:translateY(5px) } to { opacity:1; transform:translateY(0) } }

.story-kinds { min-height:38px; padding:7px 14px; display:flex; gap:7px; align-items:center; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--theme-dark) 82%,transparent); }.story-kinds span { color:var(--muted); font-size:8px; }.story-kinds button { margin-left:auto; padding:6px 9px; border:1px solid color-mix(in srgb,var(--theme-glow) 28%,var(--line)); border-radius:12px; background:var(--accent-soft); color:var(--theme-light); font-size:8px; }
.story-page { background:linear-gradient(180deg,color-mix(in srgb,var(--theme-mid) 14%,transparent),transparent 44%); }.story-system { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:6px 10px; min-height:34px; margin-bottom:11px; }.story-system span { display:flex; align-items:center; gap:4px; min-width:0; color:color-mix(in srgb,var(--theme-light) 58%,var(--muted)); font-size:8px; white-space:nowrap; }.story-progress { display:grid; grid-template-columns:82px 1fr 34px; gap:8px; align-items:center; margin:13px 0; color:var(--muted); font-size:8px; }.story-progress > div { height:3px; overflow:hidden; border-radius:2px; background:rgba(255,255,255,.08); }.story-progress i { display:block; height:100%; background:linear-gradient(90deg,var(--theme-mid),var(--theme-glow)); }.story-progress b { text-align:right; color:var(--theme-light); }
.story-chat-link { width:100%; min-height:42px; margin-top:12px; border:1px solid color-mix(in srgb,var(--theme-glow) 24%,var(--line)); border-radius:7px; display:flex; align-items:center; justify-content:center; gap:7px; background:linear-gradient(120deg,color-mix(in srgb,var(--theme-mid) 28%,rgba(24,22,28,.88)),rgba(14,13,16,.9)); color:var(--theme-light); font-size:10px; }
.check-row { min-height:46px; display:flex; align-items:center; gap:9px; border-bottom:1px solid var(--line); color:var(--text); font-size:10px; }.check-row input { accent-color:var(--accent); }
.choice span strong,.choice span small { display:block; }.choice span strong { font-size:11px; }.choice span small { margin-top:4px; color:var(--muted); font-size:8px; }.story-continue { padding:34px 18px; border:1px solid color-mix(in srgb,var(--theme-glow) 22%,var(--line)); border-radius:8px; background:linear-gradient(145deg,color-mix(in srgb,var(--theme-mid) 23%,rgba(24,22,28,.84)),rgba(14,13,16,.9)); text-align:center; }.story-continue > span { display:grid; place-items:center; color:var(--accent); }.story-continue h2 { margin:12px 0 7px; font:500 21px/1.2 Georgia,"Songti SC",serif; }.story-continue p { margin:0 0 16px; color:var(--muted); font-size:10px; line-height:1.6; }

.offline-branch-map { margin:12px -15px 14px; padding:12px 15px; border-top:1px solid color-mix(in srgb,var(--theme-glow) 22%,var(--line)); border-bottom:1px solid color-mix(in srgb,var(--theme-glow) 16%,var(--line)); background:linear-gradient(120deg,color-mix(in srgb,var(--theme-mid) 10%,rgba(14,14,18,.7)),rgba(8,9,12,.7)); }.offline-branch-heading { display:grid; grid-template-columns:28px 1fr auto; gap:8px; align-items:center; margin-bottom:8px; }.offline-branch-heading > span { width:28px; height:28px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--theme-glow) 24%,var(--line)); border-radius:5px; color:var(--theme-glow); }.offline-branch-heading small,.offline-branch-heading h3 { display:block; }.offline-branch-heading small { color:var(--theme-glow); font-size:6px; }.offline-branch-heading h3 { margin:3px 0 0; font-size:11px; }.offline-branch-heading > b { color:var(--muted); font-size:7px; font-weight:500; }.offline-branch-rows { position:relative; }.offline-branch-row { position:relative; min-width:0; min-height:54px; margin-left:calc(var(--branch-depth) * 14px); padding:8px 0; display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:7px; align-items:start; border-bottom:1px solid rgba(255,255,255,.06); }.offline-branch-row:last-child { border-bottom:0; }.offline-branch-row::before { content:""; position:absolute; left:9px; top:0; bottom:0; width:1px; background:color-mix(in srgb,var(--theme-glow) 24%,transparent); }.offline-branch-row > span { position:relative; z-index:1; width:19px; height:19px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--theme-glow) 32%,var(--line)); border-radius:50%; background:var(--theme-dark); color:var(--theme-glow); }.offline-branch-row small,.offline-branch-row strong,.offline-branch-row p { display:block; min-width:0; }.offline-branch-row small { color:var(--theme-glow); font-size:6px; }.offline-branch-row strong { margin-top:4px; overflow:hidden; color:var(--text); font-size:9px; white-space:nowrap; text-overflow:ellipsis; }.offline-branch-row p { max-height:26px; margin:4px 0 0; overflow:hidden; color:var(--muted); font-size:7px; line-height:1.45; }.offline-branch-row > b { margin-top:2px; padding:3px 5px; border:1px solid var(--line); border-radius:3px; color:var(--muted); font-size:6px; white-space:nowrap; }.offline-branch-row.active > span { border-color:var(--accent); background:var(--accent); color:var(--theme-dark); box-shadow:0 0 12px color-mix(in srgb,var(--accent) 36%,transparent); }.offline-branch-row.active > b { border-color:var(--accent); color:var(--theme-light); }
.offline-branch-row-actions { display:grid; gap:4px; justify-items:end; }.offline-branch-row-actions b { padding:3px 5px; border:1px solid var(--line); border-radius:3px; color:var(--muted); font-size:6px; white-space:nowrap; }.offline-branch-row-actions button { min-width:42px; height:24px; padding:0 5px; border:1px solid color-mix(in srgb,var(--theme-glow) 24%,var(--line)); border-radius:3px; display:flex; align-items:center; justify-content:center; gap:3px; background:rgba(255,255,255,.035); color:var(--muted); font-size:6px; }.offline-branch-row-actions .offline-branch-resume { border-color:color-mix(in srgb,var(--accent) 42%,var(--line)); color:var(--theme-light); }.offline-branch-row-actions .offline-branch-resume:disabled { opacity:.38; color:var(--muted); }.offline-branch-row.active .offline-branch-row-actions b { border-color:var(--accent); color:var(--theme-light); }.offline-branch-row.selected { background:linear-gradient(90deg,color-mix(in srgb,var(--theme-mid) 16%,transparent),transparent); }.offline-branch-row.selected .offline-branch-row-actions button:not(.offline-branch-resume) { border-color:var(--accent); background:var(--accent-soft); color:var(--theme-light); }
.offline-branch-compare { margin:0 0 14px; border:1px solid color-mix(in srgb,var(--theme-glow) 28%,var(--line)); border-radius:7px; overflow:hidden; background:linear-gradient(135deg,color-mix(in srgb,var(--theme-mid) 13%,rgba(16,16,20,.9)),rgba(9,10,13,.94)); }.offline-compare-heading { min-height:46px; padding:8px 10px; display:grid; grid-template-columns:28px 1fr 28px; gap:8px; align-items:center; border-bottom:1px solid var(--line); }.offline-compare-heading > span { width:28px; height:28px; display:grid; place-items:center; color:var(--theme-glow); }.offline-compare-heading small { color:var(--theme-glow); font-size:6px; }.offline-compare-heading h3 { margin:3px 0 0; font-size:11px; }.offline-compare-heading button { width:28px; height:28px; padding:0; border:1px solid var(--line); border-radius:4px; display:grid; place-items:center; background:transparent; color:var(--muted); }.offline-compare-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }.offline-compare-grid > article { min-width:0; padding:10px; border-right:1px solid var(--line); }.offline-compare-grid > article:last-child { border-right:0; }.offline-compare-title { min-width:0; display:grid; grid-template-columns:22px minmax(0,1fr); gap:6px; align-items:center; }.offline-compare-title > span { width:22px; height:22px; display:grid; place-items:center; border:1px solid var(--theme-glow); border-radius:50%; color:var(--theme-glow); font:600 9px Georgia,serif; }.offline-compare-title small { color:var(--muted); font-size:6px; }.offline-compare-title h4 { margin:3px 0 0; overflow:hidden; font-size:8px; white-space:nowrap; text-overflow:ellipsis; }.offline-compare-relations { display:grid; grid-template-columns:1fr 1fr; gap:3px; margin:9px 0; }.offline-compare-relations div { min-width:0; padding:4px; display:flex; justify-content:space-between; gap:3px; background:rgba(255,255,255,.035); }.offline-compare-relations span,.offline-compare-relations b { font-size:6px; }.offline-compare-relations span { color:var(--muted); }.offline-compare-relations b { color:var(--text); }.offline-compare-relations b.up { color:#85d6aa; }.offline-compare-relations b.down { color:#e397a4; }.offline-compare-grid article > p { max-height:48px; margin:0 0 7px; overflow:hidden; color:var(--text); font-size:7px; line-height:1.5; }.offline-compare-grid article > small { min-height:24px; display:block; color:var(--muted); font-size:6px; line-height:1.5; }.offline-compare-photos { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:7px; }.offline-compare-photos img { width:100%; aspect-ratio:1; border-radius:3px; object-fit:cover; }.offline-compare-photo-empty { min-height:31px; margin-top:7px; display:grid; place-items:center; border:1px dashed var(--line); color:var(--muted); font-size:6px; }.offline-branch-compare.incompatible .offline-compare-heading { border-bottom:0; }
.offline-compare-resume { width:100%; height:30px; margin-top:7px; padding:0 5px; border:1px solid color-mix(in srgb,var(--accent) 48%,var(--line)); border-radius:4px; display:flex; align-items:center; justify-content:center; gap:4px; background:color-mix(in srgb,var(--accent) 13%,rgba(255,255,255,.025)); color:var(--theme-light); font-size:6px; }.offline-compare-resume:disabled { border-color:var(--line); background:rgba(255,255,255,.02); color:var(--muted); opacity:.48; }
.capsule-list { display:grid; gap:8px; }.capsule-card { padding:13px; border:1px solid color-mix(in srgb,var(--theme-glow) 24%,var(--line)); border-left:3px solid var(--accent); border-radius:7px; background:linear-gradient(120deg,color-mix(in srgb,var(--theme-mid) 16%,rgba(23,21,26,.9)),rgba(14,13,16,.92)); }.capsule-card .meta { display:flex; justify-content:space-between; color:var(--theme-glow); font-size:8px; }.capsule-card h3 { margin:8px 0 5px; font-size:13px; }.capsule-card p { margin:0; color:var(--text); font-size:10px; line-height:1.55; }.capsule-card small { display:block; margin-top:7px; color:var(--muted); font-size:8px; line-height:1.5; }.capsule-card.context-excluded { border-color:rgba(255,255,255,.08); opacity:.62; }.capsule-card.context-excluded .meta span:last-child { color:#b7adb0; }.offline-capsule .meta span:first-child { display:flex; align-items:center; gap:4px; }.capsule-photo-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:9px; }.capsule-photo-strip img { width:100%; aspect-ratio:1; border-radius:4px; object-fit:cover; }.offline-capsule-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:9px; }.offline-capsule-actions button { min-width:0; min-height:32px; padding:0 7px; border:1px solid color-mix(in srgb,var(--theme-glow) 28%,var(--line)); border-radius:4px; display:flex; align-items:center; justify-content:center; gap:4px; background:var(--accent-soft); color:var(--theme-light); font-size:8px; }.offline-capsule-actions button:first-child { border-color:var(--accent); background:var(--accent); color:var(--theme-dark); font-weight:800; }.offline-capsule-actions button:disabled { border-color:var(--line); background:rgba(255,255,255,.035); color:var(--muted); opacity:.62; }.empty.compact { padding:22px 12px; }
.settings-page { padding-top:10px; }.settings-section { padding:14px; border-bottom:1px solid color-mix(in srgb,var(--theme-glow) 20%,var(--line)); background:linear-gradient(135deg,color-mix(in srgb,var(--theme-mid) 10%,rgba(20,18,22,.72)),rgba(12,11,14,.72)); }.settings-section:first-child { border-top:1px solid color-mix(in srgb,var(--theme-glow) 20%,var(--line)); }.settings-title { display:grid; grid-template-columns:30px 1fr; gap:8px; align-items:start; margin-bottom:11px; }.settings-title > span { width:28px; height:28px; border-radius:7px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }.settings-title h2 { margin:1px 0 3px; font-size:12px; }.settings-title p { margin:0; color:var(--muted); font-size:8px; line-height:1.5; }.permission-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px 12px; }.permission-row { min-width:0; min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:7px; border-bottom:1px solid rgba(255,255,255,.06); color:#d9d2cc; font-size:9px; }.permission-row span { overflow-wrap:anywhere; }.permission-row input { accent-color:var(--accent); }.time-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.settings-save { min-height:46px; margin-top:2px; }.settings-section .range-row { grid-template-columns:88px 1fr 42px; min-height:38px; }.settings-section .range-row b { text-align:right; color:var(--theme-glow); font-size:8px; }
.data-page { padding-top:12px; }.storage-health { margin-bottom:12px; padding:14px; border:1px solid color-mix(in srgb,var(--theme-glow) 24%,var(--line)); border-radius:8px; background:linear-gradient(145deg,color-mix(in srgb,var(--theme-mid) 16%,rgba(24,23,28,.94)),rgba(13,13,16,.96)); }.storage-health-head { display:grid; grid-template-columns:32px 1fr auto; gap:9px; align-items:center; }.storage-health-head > span { width:32px; height:32px; border-radius:7px; display:grid; place-items:center; background:var(--accent-soft); color:var(--theme-glow); }.storage-health-head small,.storage-health-head strong { display:block; }.storage-health-head small { color:var(--muted); font-size:8px; }.storage-health-head strong { margin-top:3px; font-size:13px; }.storage-health-head > b { color:var(--theme-glow); font-size:11px; }.storage-health.warning { border-color:rgba(222,176,93,.42); }.storage-health.warning .storage-health-head > span,.storage-health.warning .storage-health-head > b { color:#e8c177; }.storage-health.blocked { border-color:rgba(220,112,125,.5); }.storage-health.blocked .storage-health-head > span,.storage-health.blocked .storage-health-head > b { color:#ee9ca9; }.storage-meter { height:5px; margin:12px 0; overflow:hidden; border-radius:3px; background:rgba(255,255,255,.08); }.storage-meter i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--theme-mid),var(--theme-glow)); transition:width .25s ease; }.storage-health.warning .storage-meter i { background:#dcae59; }.storage-health.blocked .storage-meter i { background:#d86e7d; }.storage-stats { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; border-top:1px solid rgba(255,255,255,.06); }.storage-stats > div { min-width:0; padding:9px 0 7px; display:flex; justify-content:space-between; gap:6px; border-bottom:1px solid rgba(255,255,255,.06); }.storage-stats span { color:var(--muted); font-size:8px; }.storage-stats b { color:var(--text); font-size:8px; white-space:nowrap; }.storage-health p { margin:10px 0; color:var(--muted); font-size:9px; line-height:1.55; }.storage-health .btn { display:flex; align-items:center; justify-content:center; gap:6px; }.data-card { cursor:default; }

.cloud-vault { margin:12px 0; padding:14px; border:1px solid color-mix(in srgb,#76c59a 34%,var(--line)); border-radius:8px; background:linear-gradient(145deg,rgba(21,31,29,.94),color-mix(in srgb,var(--theme-mid) 9%,rgba(13,14,17,.97))); }
.cloud-vault.unavailable { border-color:var(--line); background:rgba(17,17,21,.88); }
.cloud-vault-head { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:9px; align-items:center; }
.cloud-vault-head > span { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(118,197,154,.25); border-radius:7px; background:rgba(118,197,154,.1); color:#82d2a7; }
.cloud-vault.unavailable .cloud-vault-head > span { border-color:var(--line); background:rgba(255,255,255,.035); color:var(--muted); }
.cloud-vault-head small,.cloud-vault-head h2 { display:block; min-width:0; }
.cloud-vault-head small { color:#82d2a7; font-size:7px; }
.cloud-vault-head h2 { margin:3px 0 0; overflow:hidden; font-size:12px; white-space:nowrap; text-overflow:ellipsis; }
.cloud-vault-head > b { padding:4px 6px; border:1px solid rgba(118,197,154,.22); border-radius:4px; color:#9bd8b5; font-size:7px; white-space:nowrap; }
.cloud-vault.unavailable .cloud-vault-head > b { border-color:var(--line); color:var(--muted); }
.cloud-vault > p { margin:12px 0 0; color:var(--muted); font-size:9px; line-height:1.55; }
.cloud-segments { height:34px; margin:13px 0 12px; padding:3px; display:grid; grid-template-columns:1fr 1fr; gap:3px; border:1px solid var(--line); border-radius:6px; background:rgba(5,7,8,.4); }
.cloud-segments button { min-width:0; border:0; border-radius:4px; background:transparent; color:var(--muted); font-size:9px; font-weight:700; cursor:pointer; }
.cloud-segments button.active { background:rgba(118,197,154,.14); color:#b9e6cb; }
.cloud-auth-form { margin-top:12px; }
.cloud-auth-form .field,.cloud-passphrase { display:grid; gap:6px; margin-bottom:10px; }
.cloud-auth-form .field > span,.cloud-passphrase > span { color:var(--muted); font-size:8px; }
.cloud-auth-form .btn,.cloud-actions .btn { display:flex; align-items:center; justify-content:center; gap:6px; }
.cloud-link { width:100%; min-height:32px; margin-top:6px; border:0; background:transparent; color:var(--muted); font-size:8px; cursor:pointer; }
.cloud-link:hover { color:var(--text); }
.cloud-feedback { margin-top:11px; padding:8px 9px; border:1px solid rgba(118,197,154,.22); border-radius:5px; background:rgba(118,197,154,.07); color:#a8dfbf; font-size:8px; line-height:1.5; }
.cloud-feedback.bad { border-color:rgba(226,129,145,.28); background:rgba(226,129,145,.07); color:#efa3af; }
.cloud-privacy { margin-top:11px; padding-top:10px; display:grid; grid-template-columns:20px 1fr; gap:7px; border-top:1px solid rgba(255,255,255,.07); color:var(--muted); }
.cloud-privacy > span { color:#82d2a7; }
.cloud-privacy p { margin:0; font-size:8px; line-height:1.55; }
.cloud-sync-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:13px 0; }
.cloud-sync-stats div { min-width:0; padding:9px; border:1px solid rgba(255,255,255,.07); border-radius:5px; background:rgba(5,7,8,.26); }
.cloud-sync-stats span,.cloud-sync-stats strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cloud-sync-stats span { color:var(--muted); font-size:7px; }
.cloud-sync-stats strong { margin-top:4px; color:var(--text); font-size:9px; }
.cloud-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.cloud-actions .btn { min-width:0; min-height:38px; padding:0 7px; font-size:8px; }

.offline-scene-path { min-height:34px; padding-inline:8px; gap:6px; }
.offline-scene-path b { max-width:96px; font-size:9px; }
.offline-scene-path small { gap:4px; font-size:8px; }
.offline-branch-heading small,.offline-compare-heading small { font-size:8px; }
.offline-branch-heading > b { font-size:9px; }
.offline-branch-row small,.offline-branch-row-actions b,.offline-branch-row-actions button { font-size:8px; }
.offline-branch-row strong { font-size:11px; }
.offline-branch-row p { max-height:34px; font-size:9px; }
.offline-branch-row-actions button { min-width:48px; height:28px; }
.offline-compare-title small,.offline-compare-relations span,.offline-compare-relations b { font-size:8px; }
.offline-compare-title h4 { font-size:10px; }
.offline-compare-grid article > p { max-height:58px; font-size:9px; }
.offline-compare-grid article > small,.offline-compare-photo-empty,.offline-compare-resume { font-size:8px; }
.offline-compare-resume { min-height:34px; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: calc(95px + env(safe-area-inset-bottom)); max-width: min(340px, calc(100vw - 28px)); padding: 10px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(36,33,35,.96); color: #f4ede6; font-size: 11px; line-height: 1.45; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: .2s ease; box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

html.astryn-booting,html.astryn-booting body,html.invite-locked,html.invite-locked body { overflow:hidden; }
.brand-splash[hidden],.invite-gate[hidden] { display:none; }
.brand-splash { position:fixed; z-index:1200; inset:0; min-height:100dvh; overflow:hidden; background:#05050c; color:#f6e8e1; transition:opacity .56s ease,visibility .56s ease; }
.brand-splash.is-leaving { opacity:0; visibility:hidden; }
.brand-splash > img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; animation:astryn-splash-breathe 4.6s ease-in-out infinite; }
.brand-splash-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(2,2,9,.05),transparent 58%,rgba(2,2,9,.5)); pointer-events:none; }
.brand-splash p { position:absolute; left:0; right:0; bottom:max(26px,calc(env(safe-area-inset-bottom) + 18px)); margin:0; color:rgba(244,229,224,.76); font:500 10px/1.2 Georgia,"Songti SC",serif; text-align:center; letter-spacing:.18em; animation:astryn-status-breathe 2.2s ease-in-out infinite; }
@keyframes astryn-splash-breathe { 0%,100% { transform:scale(1.006); filter:brightness(.94); } 50% { transform:scale(1.025); filter:brightness(1.08); } }
@keyframes astryn-status-breathe { 0%,100% { opacity:.38; } 50% { opacity:1; } }
.invite-gate { position:fixed; z-index:1100; inset:0; min-height:100dvh; overflow:hidden; display:flex; justify-content:center; color:#f6f0f5; font-family:"Songti SC","STSong",Georgia,serif; background:#07070f; }
.invite-gate-backdrop { position:absolute; inset:-12px; background:#07070f url('./assets/brand/astryn-splash.png') center/cover no-repeat; transform:scale(1.04); }
.invite-gate-backdrop::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,4,12,.27) 0%,rgba(5,5,14,.48) 42%,rgba(5,5,13,.94) 75%,#06060c 100%); }
.invite-gate-backdrop::after { content:""; position:absolute; inset:0; opacity:.2; background-image:radial-gradient(circle at 24% 22%,rgba(255,255,255,.65) 0 1px,transparent 1.5px),radial-gradient(circle at 73% 28%,rgba(217,196,255,.6) 0 1px,transparent 1.5px); background-size:97px 131px,149px 113px; }
.invite-gate-panel { position:relative; width:min(430px,100%); min-height:100dvh; padding:max(48px,calc(env(safe-area-inset-top) + 28px)) 28px max(24px,calc(env(safe-area-inset-bottom) + 18px)); display:flex; flex-direction:column; }
.invite-gate-brand { display:grid; justify-items:center; text-align:center; }
.invite-gate-brand img { width:76px; height:76px; border-radius:22px; box-shadow:0 0 34px rgba(210,182,255,.22); }
.invite-gate-brand small { margin-top:13px; color:rgba(229,212,239,.55); font:500 7px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.28em; }
.invite-gate-brand strong { margin-top:5px; color:#f4e9e5; font:400 22px/1.1 Georgia,serif; letter-spacing:.24em; text-indent:.24em; text-shadow:0 0 22px rgba(234,205,255,.38); }
.invite-gate-copy { margin-top:auto; }
.invite-gate-copy > span { display:flex; align-items:center; gap:9px; color:#c4aad2; font:600 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em; }
.invite-gate-copy > span::after { content:""; width:42px; height:1px; background:linear-gradient(90deg,rgba(206,177,222,.7),transparent); }
.invite-gate-copy h1 { margin:13px 0 8px; color:#fff8f2; font:400 25px/1.24 "Songti SC","STSong",Georgia,serif; }
.invite-gate-copy p { margin:0; color:rgba(222,214,225,.62); font:400 11px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
.invite-gate-form { margin-top:24px; }
.invite-gate-form label { display:block; margin-bottom:9px; color:rgba(216,201,223,.66); font:600 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em; }
.invite-code-field { position:relative; }
.invite-code-field input { width:100%; height:52px; padding:0 38px 0 14px; border:1px solid rgba(222,205,232,.25); border-radius:5px; background:rgba(9,8,19,.68); color:#fff8f1; font:500 13px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; outline:none; backdrop-filter:blur(14px); transition:border-color .2s ease,box-shadow .2s ease; }
.invite-code-field input::placeholder { color:rgba(213,202,215,.35); letter-spacing:0; }
.invite-code-field input:focus { border-color:rgba(235,211,247,.68); box-shadow:0 0 0 3px rgba(200,170,226,.09),inset 0 0 24px rgba(170,133,205,.05); }
.invite-code-field i { position:absolute; right:15px; top:50%; width:6px; height:6px; border-radius:50%; background:#ead7ec; box-shadow:0 0 12px #d5abef; transform:translateY(-50%); }
.invite-gate-form button { width:100%; height:48px; margin-top:11px; padding:0 17px; border:1px solid rgba(251,235,234,.76); border-radius:5px; display:flex; align-items:center; justify-content:space-between; background:rgba(245,229,226,.94); color:#17111b; font:700 11px/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; cursor:pointer; box-shadow:0 12px 34px rgba(0,0,0,.22); }
.invite-gate-form button b { font:400 18px/1 Georgia,serif; }
.invite-gate-form button:disabled { opacity:.56; cursor:wait; }
.invite-gate-error { min-height:34px; padding-top:9px; color:#f0aab8; font:500 10px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
.invite-gate-foot { min-height:24px; padding-top:11px; border-top:1px solid rgba(231,215,234,.12); display:grid; grid-template-columns:auto auto 1fr; gap:8px; align-items:center; color:rgba(205,193,210,.42); font:500 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; }
.invite-gate-foot b { color:rgba(234,218,237,.65); font-weight:500; }
.invite-gate-foot i { justify-self:end; color:rgba(194,174,202,.32); font-style:normal; }
@media (min-width:700px) { .brand-splash > img { object-fit:contain; } .invite-gate-panel { padding-inline:34px; } }
@media (prefers-reduced-motion:reduce) { .brand-splash > img,.brand-splash p { animation:none; } .brand-splash { transition-duration:.12s; } }

.life-timeline-page { padding:0 14px 36px; }
.life-tabs { position:sticky; z-index:5; top:0; height:48px; margin:0 -14px 11px; padding:8px 14px; display:flex; gap:5px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--theme-dark) 92%,rgba(10,10,12,.96)); backdrop-filter:blur(18px); }
.life-tabs button { flex:0 0 72px; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--muted); font-size:9px; }
.life-tabs button.active { border-color:var(--accent); background:var(--accent); color:var(--theme-dark); font-weight:800; }
.life-filters { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.life-filters button { flex:0 0 auto; min-height:30px; padding:0 11px; border:1px solid var(--line); border-radius:15px; background:transparent; color:var(--muted); font-size:9px; }
.life-filters button.active { border-color:var(--accent); background:var(--accent); color:var(--theme-dark); font-weight:800; }
.life-summary { min-height:40px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:8px; }
.life-summary small { color:var(--theme-glow); font-size:7px; }
.life-day { position:relative; margin-bottom:15px; padding-left:13px; border-left:1px solid color-mix(in srgb,var(--theme-glow) 24%,var(--line)); }
.life-day h2 { margin:0 0 7px; color:var(--theme-glow); font-size:9px; font-weight:600; }
.life-day > div { display:grid; gap:6px; }
.life-row { width:100%; min-width:0; min-height:66px; padding:9px; border:1px solid color-mix(in srgb,var(--theme-glow) 15%,var(--line)); border-radius:7px; display:grid; grid-template-columns:38px minmax(0,1fr) 16px; gap:9px; align-items:center; background:linear-gradient(120deg,color-mix(in srgb,var(--theme-mid) 9%,rgba(255,255,255,.03)),rgba(255,255,255,.02)); color:var(--text); text-align:left; }
.life-row-icon,.life-row-media { width:38px; height:38px; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line)); border-radius:7px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.life-row-media img { width:100%; height:100%; object-fit:cover; }
.life-row-copy { min-width:0; display:grid; gap:3px; }
.life-row-copy strong,.life-row-copy span,.life-row-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.life-row-copy strong { font-size:10px; }
.life-row-copy span { color:var(--muted); font-size:9px; }
.life-row-copy small { color:var(--theme-glow); font-size:7px; }
.life-create-form { margin:4px 0 14px; padding:12px; border:1px solid color-mix(in srgb,var(--theme-glow) 20%,var(--line)); border-radius:7px; display:grid; gap:8px; background:linear-gradient(130deg,var(--accent-soft),rgba(255,255,255,.025)); }
.life-create-form > div { display:grid; grid-template-columns:112px minmax(0,1fr); gap:7px; }
.life-create-form input,.life-create-form textarea { min-width:0; min-height:38px; padding:8px 9px; border:1px solid var(--line); border-radius:6px; outline:0; background:rgba(7,8,11,.52); color:var(--text); font-size:9px; color-scheme:dark; resize:vertical; }
.life-create-form button { min-height:36px; border:1px solid var(--accent); border-radius:6px; display:flex; align-items:center; justify-content:center; gap:5px; background:var(--accent); color:var(--theme-dark); font-size:9px; font-weight:800; }
.life-promise-list,.life-capsule-list { display:grid; gap:7px; }
.life-promise { min-height:68px; padding:10px; border:1px solid color-mix(in srgb,var(--theme-glow) 17%,var(--line)); border-radius:7px; display:grid; grid-template-columns:34px minmax(0,1fr); gap:9px; align-items:center; background:rgba(255,255,255,.025); }
.life-promise > button { width:34px; height:34px; padding:0; border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line)); border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.life-static-icon { width:34px; height:34px; border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line)); border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.life-promise > div { min-width:0; display:grid; gap:4px; }
.life-promise strong,.life-promise span,.life-promise small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.life-promise strong { font-size:10px; }
.life-promise span { color:var(--muted); font-size:8px; }
.life-promise small { color:var(--theme-glow); font-size:7px; }
.life-promise.done { opacity:.62; }
.life-promise.done strong { text-decoration:line-through; }
.life-capsule { padding:12px; border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.025); }
.life-capsule > div:first-child { display:grid; grid-template-columns:34px minmax(0,1fr); gap:9px; align-items:center; }
.life-capsule > div:first-child > span { width:34px; height:34px; border-radius:7px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.life-capsule strong,.life-capsule small { display:block; }
.life-capsule strong { font-size:10px; }
.life-capsule small { margin-top:4px; color:var(--muted); font-size:8px; }
.life-capsule p { margin:10px 0 0; color:var(--muted); font-size:9px; line-height:1.6; }
.life-capsule.opened { border-color:color-mix(in srgb,var(--accent) 42%,var(--line)); }
.life-capsule.opened p { color:var(--text); }
.life-capsule.due { border-color:color-mix(in srgb,#d5aa62 48%,var(--line)); }
.life-capsule > button { width:100%; min-height:34px; margin-top:10px; border:1px solid var(--accent); border-radius:6px; display:flex; align-items:center; justify-content:center; gap:5px; background:var(--accent); color:var(--theme-dark); font-size:9px; font-weight:800; }
.source-target { border-color:var(--accent) !important; box-shadow:0 0 0 2px var(--accent-soft),0 0 18px color-mix(in srgb,var(--accent) 18%,transparent); }

.group-page { padding:12px 14px 94px; }
.group-participants { display:grid; gap:9px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.group-participants > div:first-child { display:flex; align-items:end; justify-content:space-between; }
.group-participants strong { font-size:11px; }.group-participants small { color:var(--muted); font-size:8px; }
.group-participants > div:last-child { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.group-participants button { min-width:0; height:42px; padding:4px 6px; border:1px solid var(--line); border-radius:6px; display:grid; grid-template-columns:25px minmax(0,1fr) 10px; gap:5px; align-items:center; background:rgba(255,255,255,.025); color:var(--muted); font-size:8px; }
.group-participants button.active { border-color:var(--accent); color:var(--text); background:var(--accent-soft); }
.group-participants img { width:25px; height:25px; border-radius:50%; object-fit:cover; }.group-participants button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.group-messages { display:grid; gap:7px; padding:13px 0; }
.group-message { max-width:88%; padding:9px 10px; border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.03); }.group-message.mine { justify-self:end; border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); background:var(--accent-soft); }
.group-message .meta { display:flex; justify-content:space-between; color:var(--theme-glow); font-size:7px; }.group-message p { margin:5px 0 0; font-size:9px; line-height:1.55; }
.group-typing { min-height:34px; display:flex; align-items:center; gap:7px; color:var(--muted); font-size:8px; }
.group-summaries { display:grid; gap:7px; margin-top:4px; }.group-summaries h3 { margin:0; color:var(--muted); font-size:9px; }
.group-summary { padding:10px; border:1px solid var(--line); border-radius:7px; display:grid; gap:8px; background:rgba(255,255,255,.02); }.group-summary small { color:var(--theme-glow); font-size:7px; }.group-summary p { margin:5px 0 0; color:var(--muted); font-size:8px; line-height:1.5; }.group-summary button { min-height:30px; border:1px solid var(--accent); border-radius:5px; display:flex; align-items:center; justify-content:center; gap:5px; background:var(--accent-soft); color:var(--text); font-size:8px; }.group-summary button:disabled { opacity:.55; }

.restore-preview { margin-bottom:14px; padding:12px; border:1px solid var(--accent); border-radius:7px; background:linear-gradient(130deg,var(--accent-soft),rgba(255,255,255,.025)); }
.restore-preview-head { display:grid; grid-template-columns:34px minmax(0,1fr) 28px; gap:8px; align-items:center; }.restore-preview-head > span { width:34px; height:34px; border-radius:6px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }.restore-preview-head small { color:var(--theme-glow); font-size:7px; }.restore-preview-head h2 { margin:4px 0 0; font-size:11px; }.restore-preview-head > button { width:28px; height:28px; border:0; background:transparent; color:var(--muted); }
.restore-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:11px 0; }.restore-stats div { min-width:0; padding:7px 3px; border:1px solid var(--line); border-radius:5px; display:grid; gap:3px; text-align:center; }.restore-stats span { color:var(--muted); font-size:7px; }.restore-stats b { font-size:10px; }
.restore-preview form { display:grid; gap:8px; }.restore-checks { display:grid; grid-template-columns:1fr 1fr; gap:5px; }.restore-checks label { min-width:0; min-height:34px; padding:6px; border:1px solid var(--line); border-radius:5px; display:flex; align-items:center; gap:6px; color:var(--muted); font-size:8px; }.restore-checks input { accent-color:var(--accent); }
.diagnostics-page { padding:14px; }.diagnostics-status { padding:12px; border:1px solid var(--line); border-radius:7px; display:grid; grid-template-columns:38px minmax(0,1fr); gap:9px; background:rgba(255,255,255,.025); }.diagnostics-status > span { width:38px; height:38px; border-radius:6px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }.diagnostics-status small { color:var(--theme-glow); font-size:7px; }.diagnostics-status h2 { margin:3px 0; font-size:12px; }.diagnostics-status p { margin:0; color:var(--muted); font-size:8px; line-height:1.5; }
.diagnostics-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:12px 0; }.diagnostics-grid article { min-width:0; min-height:58px; padding:9px; border:1px solid var(--line); border-radius:6px; display:grid; align-content:center; gap:5px; background:rgba(255,255,255,.02); }.diagnostics-grid span { color:var(--muted); font-size:7px; }.diagnostics-grid strong { overflow-wrap:anywhere; font-size:9px; }
.diagnostic-logs { margin-top:14px; }.diagnostic-logs h3 { color:var(--muted); font-size:9px; }.diagnostic-logs article { padding:8px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:70px minmax(0,1fr); gap:8px; }.diagnostic-logs time { color:var(--muted); font-size:7px; }.diagnostic-logs strong { font-size:8px; }.diagnostic-logs p { margin:4px 0 0; color:var(--muted); font-size:8px; overflow-wrap:anywhere; }

.global-search-page { padding:13px 14px 34px; }
.global-search-form { display:grid; grid-template-columns:minmax(0,1fr) 54px; gap:7px; }
.global-search-form label { min-width:0; height:42px; padding:0 10px; border:1px solid color-mix(in srgb,var(--theme-glow) 24%,var(--line)); border-radius:7px; display:grid; grid-template-columns:22px minmax(0,1fr); align-items:center; background:rgba(255,255,255,.035); color:var(--theme-glow); }
.global-search-form input { min-width:0; border:0; outline:0; background:transparent; color:var(--text); font-size:10px; }
.global-search-form button { border:1px solid var(--accent); border-radius:7px; background:var(--accent); color:var(--theme-dark); font-size:9px; font-weight:800; }
.global-search-filter { margin:11px 0 9px; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.global-search-filter button { flex:0 0 auto; min-height:30px; padding:0 11px; border:1px solid var(--line); border-radius:15px; background:transparent; color:var(--muted); font-size:9px; }
.global-search-filter button.active { border-color:var(--accent); background:var(--accent); color:var(--theme-dark); font-weight:800; }
.global-search-summary { min-height:30px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:8px; }
.global-search-summary button { min-height:26px; padding:0 8px; border:0; background:transparent; color:var(--theme-glow); font-size:8px; }
.global-search-summary small { color:var(--theme-glow); font-size:7px; }
.global-search-results { display:grid; gap:6px; }
.global-search-result { width:100%; min-width:0; min-height:68px; padding:10px; border:1px solid color-mix(in srgb,var(--theme-glow) 14%,var(--line)); border-radius:7px; display:grid; grid-template-columns:40px minmax(0,1fr) 16px; gap:9px; align-items:center; background:linear-gradient(120deg,color-mix(in srgb,var(--theme-mid) 9%,rgba(255,255,255,.03)),rgba(255,255,255,.02)); color:var(--text); text-align:left; }
.global-search-result-icon,.global-search-media { width:40px; height:40px; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line)); border-radius:7px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.global-search-media img { width:100%; height:100%; object-fit:cover; }
.global-search-copy { min-width:0; display:grid; gap:3px; }
.global-search-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.global-search-copy > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:9px; }
.global-search-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--theme-glow); font-size:7px; }

.notification-page { padding:12px 14px 34px; }
.notification-summary { min-height:64px; margin-bottom:15px; padding:12px; border:1px solid color-mix(in srgb,var(--theme-glow) 20%,var(--line)); border-radius:7px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:linear-gradient(125deg,color-mix(in srgb,var(--theme-mid) 14%,rgba(255,255,255,.04)),rgba(255,255,255,.025)); }
.notification-summary > div { min-width:0; display:flex; align-items:center; gap:10px; }
.notification-summary > div > span { width:36px; height:36px; border-radius:7px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.notification-summary p { min-width:0; margin:0; display:grid; gap:3px; }
.notification-summary strong { font-size:12px; }
.notification-summary small { color:var(--muted); font-size:8px; }
.notification-summary button { min-height:32px; padding:0 10px; border:1px solid var(--accent); border-radius:6px; background:var(--accent); color:var(--theme-dark); font-size:9px; font-weight:800; }
.notification-group { margin-bottom:16px; }
.notification-group h2 { margin:0 0 7px; color:var(--muted); font-size:9px; font-weight:600; }
.notification-group > div { display:grid; gap:6px; }
.notification-row { position:relative; width:100%; min-width:0; min-height:66px; padding:10px 12px 10px 10px; border:1px solid var(--line); border-radius:7px; display:grid; grid-template-columns:36px 1fr auto; gap:9px; align-items:center; background:rgba(255,255,255,.025); color:var(--text); text-align:left; }
.notification-row.unread { border-color:color-mix(in srgb,var(--accent) 48%,var(--line)); background:linear-gradient(115deg,var(--accent-soft),rgba(255,255,255,.03)); }
.notification-icon { width:36px; height:36px; border:1px solid color-mix(in srgb,var(--theme-glow) 24%,var(--line)); border-radius:7px; display:grid; place-items:center; color:var(--accent); background:color-mix(in srgb,var(--theme-mid) 12%,rgba(255,255,255,.03)); }
.notification-copy { min-width:0; display:grid; gap:4px; }
.notification-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.notification-copy span { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; color:var(--muted); font-size:9px; line-height:1.45; }
.notification-row time { align-self:start; padding-top:2px; color:var(--muted); font-size:7px; white-space:nowrap; }
.notification-row > i { position:absolute; top:10px; right:8px; width:6px; height:6px; border-radius:50%; background:#e45464; box-shadow:0 0 0 3px rgba(228,84,100,.12); }
.device-notification-page { display:grid; gap:14px; }
.device-notification-hero { min-height:74px; padding:13px; border:1px solid color-mix(in srgb,var(--theme-glow) 22%,var(--line)); border-radius:7px; display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:center; background:linear-gradient(130deg,var(--accent-soft),rgba(255,255,255,.025)); }
.device-notification-hero > span { width:42px; height:42px; border-radius:7px; display:grid; place-items:center; background:color-mix(in srgb,var(--theme-mid) 22%,rgba(255,255,255,.05)); color:var(--accent); }
.device-notification-hero div { min-width:0; display:grid; gap:4px; }
.device-notification-hero strong { font-size:12px; }
.device-notification-hero small { color:var(--muted); font-size:8px; }
.device-notification-hero button { min-height:32px; padding:0 10px; border:0; border-radius:6px; background:var(--accent); color:var(--theme-dark); font-size:9px; font-weight:800; }
.device-notification-list { border-top:1px solid var(--line); }
.device-notification-list label { min-height:58px; padding:8px 2px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:34px 1fr 24px; gap:9px; align-items:center; }
.device-notification-list label > span:first-child { width:32px; height:32px; border-radius:6px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.device-notification-list label > span:nth-child(2) { min-width:0; display:grid; gap:3px; }
.device-notification-list strong { font-size:10px; }
.device-notification-list small { color:var(--muted); font-size:8px; }
.device-notification-list input { width:18px; height:18px; accent-color:var(--accent); }

@media (min-width: 700px) {
  body { background: radial-gradient(circle at 50% 30%, #272328, #080808 58%); }
  .phone-shell { height: min(900px, calc(100dvh - 28px)); margin-top: 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 26px; }
}

@media (max-height: 700px) {
  .hero { flex-basis: 39%; min-height: 260px; }
  .stage-console { flex-basis: 38%; min-height: 235px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}