:root {
  --bg: #f6f5f2; --panel: #ffffff; --ink: #1f2328; --dim: #6b6f76; --line: #e2e0db;
  --accent: #b5652b; --cool: #2f6f8f; --good: #2e7d4f; --bad: #b23b3b;
  --solo: #7a7f87; --joint: #2f6f8f; --encounter: #6a5acd; --public: #b5652b;
  --district: #efece6; --street: #d8d4cc; --chip: #eeebe5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161a; --panel: #1c1f24; --ink: #e8e6e1; --dim: #9a968f; --line: #2c3037;
    --accent: #e0a458; --cool: #6a9fb5; --good: #6cc08b; --bad: #e07a7a;
    --solo: #9aa0a8; --joint: #6a9fb5; --encounter: #a99cf0; --public: #e0a458;
    --district: #22262c; --street: #343940; --chip: #262a31;
  }
}
:root[data-theme="dark"] {
  --bg: #14161a; --panel: #1c1f24; --ink: #e8e6e1; --dim: #9a968f; --line: #2c3037;
  --accent: #e0a458; --cool: #6a9fb5; --good: #6cc08b; --bad: #e07a7a;
  --solo: #9aa0a8; --joint: #6a9fb5; --encounter: #a99cf0; --public: #e0a458;
  --district: #22262c; --street: #343940; --chip: #262a31;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", "PingFang SC", "Noto Sans CJK SC", sans-serif; }
body { overflow-x: hidden; }
.muted { color: var(--dim); font-weight: normal; }
.small { font-size: 12px; }
h2 { font-size: 15px; margin: 0 0 10px; letter-spacing: .02em; }
button, select, input { font: inherit; color: inherit; }
.btn, select { min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); cursor: pointer; }
.top { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 12px 16px;
  border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 5; }
.brand { font-weight: 700; font-size: 17px; }
.field { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); }
.field select { color: var(--ink); max-width: 70vw; }
.status { font-size: 13px; color: var(--dim); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px;
  background: var(--chip); color: var(--dim); }
.badge.live { background: var(--good); color: #fff; }
.controls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 10px 16px;
  border-bottom: 1px solid var(--line); }
.controls .grow { flex: 1 1 260px; }
.controls input[type=range] { flex: 1; min-height: 44px; accent-color: var(--accent); }
.days { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { min-height: 44px; min-width: 44px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); cursor: pointer; }
.chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip:disabled { opacity: .4; cursor: default; }
.follow { display: flex; gap: 8px; align-items: center; font-size: 13px; min-height: 44px; }
.follow input { width: 22px; height: 22px; }
.layout { display: grid; gap: 14px; padding: 14px 16px 40px;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "map feed" "res feed"; }
.map-panel { grid-area: map; } .feed-panel { grid-area: feed; } .layout > .panel:nth-child(2) { grid-area: res; }
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "map" "feed" "res"; padding: 12px 16px 40px; }
}
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; min-width: 0; }
.map svg { width: 100%; height: auto; display: block; touch-action: manipulation; }
.map .district { fill: var(--district); stroke: var(--line); }
.map .street { stroke: var(--street); stroke-width: 10; stroke-linecap: round; }
.map .dlabel { fill: var(--dim); font-size: 9px; }
.map .loc { fill: var(--panel); stroke: var(--dim); stroke-width: 1; cursor: pointer; }
.map .loc.busy { fill: var(--accent); stroke: var(--accent); }
.map .loc.sel { stroke: var(--ink); stroke-width: 2.5; }
.map .home { fill: var(--panel); stroke: var(--cool); stroke-dasharray: 3 2; cursor: pointer; }
.map .home.busy { fill: var(--cool); }
.map .count { fill: #fff; font-size: 9px; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.map .llabel { fill: var(--ink); font-size: 6.5px; text-anchor: middle; pointer-events: none; }
.map .llabel.dim { fill: var(--dim); }
.place-info { margin-top: 8px; font-size: 14px; }
.places { margin-top: 10px; }
.places summary { cursor: pointer; min-height: 36px; color: var(--dim); }
.place-row { padding: 8px 0; border-top: 1px solid var(--line); }
.place-row b { font-weight: 600; }
.names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.name { min-height: 36px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--chip); cursor: pointer; font-size: 13px; }
.residents { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.rcard { text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 12px;
  padding: 10px 12px; cursor: pointer; min-height: 44px; }
.rcard:hover, .name:hover, .chip:hover { border-color: var(--accent); }
.rcard .role { color: var(--dim); font-size: 12px; }
.rcard .now { font-size: 12px; margin-top: 4px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: 6px; border-radius: 3px; background: var(--chip); margin-top: 6px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--good); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ev { border-top: 1px solid var(--line); padding: 10px 0; }
.ev .head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ev .title { font-weight: 600; }
.ev .meta { font-size: 12px; color: var(--dim); }
.ev .sum { margin-top: 4px; font-size: 14px; }
.ev .deltas { font-size: 12px; color: var(--dim); margin-top: 4px; }
.type { font-size: 11px; padding: 1px 7px; border-radius: 999px; color: #fff; background: var(--solo); }
.type.joint { background: var(--joint); } .type.encounter { background: var(--encounter); } .type.public { background: var(--public); }
.sched { font-size: 13px; color: var(--dim); border: 1px dashed var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }
.drawer { position: fixed; inset: 0 0 0 auto; width: min(720px, 100vw); background: var(--panel);
  border-left: 1px solid var(--line); z-index: 10; display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0,0,0,.18); }
.drawer[hidden] { display: none; }
.drawer-head { display: flex; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; }
.drawer-body { overflow-y: auto; padding: 14px 16px 60px; }
.drawer-body h3 { font-size: 14px; margin: 18px 0 8px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 14px; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; }
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; font-size: 13px; width: 100%; }
th, td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--dim); font-weight: 500; }
tr.cur td { background: var(--chip); }
.sparks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.spark { border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; font-size: 12px; }
.spark svg { width: 100%; height: 34px; display: block; }
.spark path { fill: none; stroke: var(--cool); stroke-width: 1.6; }
.spark .wk { stroke: var(--line); stroke-width: 1; }
.spark .cur { fill: var(--accent); }
.spark .v { float: right; font-weight: 600; }
.act { border-top: 1px solid var(--line); padding: 10px 0; }
.act p { margin: 6px 0; white-space: pre-wrap; font-size: 14px; }
.act details summary { cursor: pointer; color: var(--dim); font-size: 13px; min-height: 32px; }
.diary { white-space: pre-wrap; font-size: 14px; background: var(--chip); border-radius: 10px; padding: 10px 12px; }
.empty { color: var(--dim); font-size: 13px; padding: 8px 0; }

/* ---------------------------------------------------------------- 3D world mode (v1) */
body.world-mode { overflow: hidden; height: 100vh; height: 100dvh; background: #9cc7e8; }
.world { position: fixed; inset: 0; z-index: 0; }
.world canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.labels { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.labels.off .tag, .labels.off .bubble { display: none; }
.tag { font: 600 12px/1.2 system-ui, "PingFang SC", "Noto Sans CJK SC", sans-serif; color: #fff;
  padding: 2px 8px; border-radius: 999px; background: rgba(30, 40, 60, .55); white-space: nowrap;
  pointer-events: auto; cursor: pointer; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.tag.sel { background: #e0a458; color: #1c1f24; text-shadow: none; }
.bubble { font: 13px/1.35 system-ui, "PingFang SC", "Noto Sans CJK SC", sans-serif; color: #2b2b2b;
  background: rgba(255, 252, 244, .94); border-radius: 12px; padding: 6px 10px; max-width: 220px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); margin-bottom: 6px; pointer-events: auto; cursor: pointer;
  position: relative; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px;
  border: 6px solid transparent; border-bottom: 0; border-top-color: rgba(255, 252, 244, .94); }
.bubble .k { font-size: 11px; color: #8a6a3a; display: block; }
.place-tag { font: 600 12px/1.2 system-ui, "PingFang SC", sans-serif; color: #3b2f1f; background: rgba(255, 246, 225, .85);
  border: 1px solid rgba(160, 120, 70, .5); padding: 2px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; }
.place-tag.busy { background: #ffe1a8; }
.hud { position: fixed; left: 12px; top: 10px; z-index: 3; display: flex; flex-direction: column; gap: 8px;
  max-width: calc(100vw - 24px); pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-title { font: 700 18px/1.2 system-ui, sans-serif; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.45); }
.hud-title .muted { color: #f4ecd8; font-size: 13px; font-weight: 500; }
.hud-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.hbtn { min-height: 40px; padding: 6px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.6);
  background: rgba(255, 252, 244, .82); color: #2b2b2b; cursor: pointer; font-size: 13px; backdrop-filter: blur(6px); }
.hbtn[aria-pressed="true"] { background: #e0a458; border-color: #e0a458; }
.loading { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.loading.done { display: none; }
.loading-bar { width: 140px; height: 6px; background: rgba(255,255,255,.35); border-radius: 3px; overflow: hidden; }
.loading-bar i { display: block; height: 100%; width: 0; background: #ffe1a8; transition: width .3s; }
.xr-slot button { z-index: 4 !important; }
.ui { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 2; overflow-y: auto;
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px);
  border-left: 1px solid var(--line); transition: transform .25s ease; }
.ui.hidden { transform: translateX(105%); }
.ui .top { position: sticky; }
.ui .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; padding: 10px 12px 60px; }
.ui .layout > .panel { grid-area: auto !important; }
.ui .residents { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.drawer { z-index: 5; }
.drawer-head #btnFollow { margin-left: auto; }
@media (max-width: 700px) {
  .ui { top: auto; height: 46vh; width: 100vw; border-left: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; }
  .ui.hidden { transform: translateY(102%); }
  .hud-title { font-size: 15px; }
}