/* 云栖·第十二席自习室 V1.0 */

:root {
  color-scheme: dark;
  --ink: #090c0e;
  --ink-soft: #101518;
  --ink-raise: #182025;
  --line: #2a3439;
  --line-strong: #3b484e;
  --text: #edf1f2;
  --text-dim: #a3afb4;
  --text-faint: #718087;
  --warm: #efb45f;
  --warm-deep: #d4963e;
  --cool: #72a9c2;
  --danger: #d47b70;
  --ok: #71b294;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; letter-spacing: 0 !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

body.screen-focus-open,
body.console-open,
body.phone-open,
body.immersive-focus-open { overflow: hidden; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

button { font-family: inherit; cursor: pointer; }
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--warm);
  outline-offset: 2px;
}

.eyebrow {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- 外壳 ---------- */

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0e1316, #0b0e10);
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-seat {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--warm), var(--warm-deep));
  color: #21160a;
  font-weight: 700;
  font-size: 14px;
}
.brand span span { display: flex; flex-direction: column; line-height: 1.25; }
.brand strong { font-size: 14px; }
.brand small { font-size: 11px; color: var(--text-faint); }
.brand-version {
  margin-left: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: rgba(242, 180, 92, 0.1);
  color: var(--warm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.brand-version:empty { display: none; }

.header-center {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  font-size: 12px;
  color: var(--text-dim);
}
.header-center i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text-faint);
}

.scene-nav { display: flex; gap: 6px; }
.scene-nav button {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.scene-nav button:hover { color: var(--text); border-color: #3a464d; }
.scene-nav button.is-active {
  background: var(--warm);
  border-color: var(--warm);
  color: #21160a;
  font-weight: 600;
}

main { flex: 1; padding: 18px 22px 8px; }

.app-footer {
  display: flex;
  gap: 16px;
  padding: 9px 22px 14px;
  font-size: 11px;
  color: var(--text-faint);
}
.app-footer #save-state[data-kind="saved"] { color: var(--ok); }
.app-footer #save-state[data-kind="saving"] { color: var(--warm); }
.app-footer #save-state[data-kind="error"] { color: var(--danger); }
.app-footer #manifest-state[data-source="placeholder"]::before { content: "○ "; }
.app-footer #manifest-state[data-source="real"]::before { content: "● "; color: var(--ok); }

.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translate(-50%, 14px);
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(24, 30, 34, 0.96);
  border: 1px solid var(--line);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 90;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 场景 ---------- */

.scene-shell { width: 100%; }

.scene-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.scene-canvas {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
}

/* 房间底图。素材未到位时（data-placeholder="1"）用渐变画出墙面、桌面与灯光，
   保证"第一眼是空间"这条验收标准在占位阶段也成立。 */
.scene-bg-layer {
  position: absolute;
  inset: 0;
  /* 独立建立一个 stacking context：内部 .scene-bg.is-front 的 z-index:1
     只用来决定两张背景图之间谁在前，绝不能越过这个边界去盖住场景画布里
     后面的人物/屏幕/热区层（v0.9 双层交叉淡入引入的 bug：is-front 的
     z-index 直接叠加在画布的公共层叠顺序里，把整块画布内容都压到背景下面）。 */
  z-index: 0;
}
/* 双层交叉淡入：非 is-front 的一层负责在背后预渲染下一张图，
   is-front 那层负责可见 + 完全不透明，切换时靠 opacity 过渡产生渐显，
   避免长时间挂着时 idle/focus 变体轮换硬切一下。 */
.scene-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: filter 1.2s ease, opacity 0.6s ease;
}
.scene-bg.is-front {
  opacity: 1;
  z-index: 1;
}
/* 时段感知背景：按当前小时给场景底图叠一层色温滤镜，营造昼夜感。 */
.scene-shell[data-daypart="dawn"] .scene-bg { filter: hue-rotate(-8deg) brightness(0.92) saturate(1.05); }
.scene-shell[data-daypart="day"] .scene-bg { filter: none; }
.scene-shell[data-daypart="dusk"] .scene-bg { filter: hue-rotate(-14deg) brightness(0.86) saturate(1.1); }
.scene-shell[data-daypart="night"] .scene-bg { filter: hue-rotate(-24deg) brightness(0.62) saturate(0.9); }
.scene-shell[data-daypart="dawn"] .scene-character-foreground { filter: hue-rotate(-8deg) brightness(0.92) saturate(1.05); }
.scene-shell[data-daypart="day"] .scene-character-foreground { filter: none; }
.scene-shell[data-daypart="dusk"] .scene-character-foreground { filter: hue-rotate(-14deg) brightness(0.86) saturate(1.1); }
.scene-shell[data-daypart="night"] .scene-character-foreground { filter: hue-rotate(-24deg) brightness(0.62) saturate(0.9); }

/* 心流模式：只留计时器与场景，隐藏联络台入口、缩略图与非计时屏幕的干扰元素。 */
body.flow-mode .scene-thumbs,
body.flow-mode .scene-toolbar,
body.flow-mode .app-header,
body.flow-mode .app-footer { display: none !important; }
body.flow-mode .scene-shell[data-scene="study"] .scene-companion { opacity: 0.6; }
.scene-bg[data-placeholder="1"] {
  background:
    radial-gradient(120% 80% at 50% 6%, rgba(242, 180, 92, 0.16), transparent 60%),
    linear-gradient(180deg, #151b1f 0%, #131a1e 58%, #0d1215 58.4%, #0b0f12 100%);
}
/* 桌面 */
.scene-bg[data-placeholder="1"]::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 58%; bottom: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 30%),
    linear-gradient(90deg, #1b2226, #232c31 50%, #1b2226);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
/* 台灯光斑 */
.scene-bg[data-placeholder="1"]::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%; top: 44%; height: 34%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(242, 180, 92, 0.22), transparent 70%);
  filter: blur(2px);
}
.scene-shell[data-scene="bp"] .scene-bg[data-placeholder="1"] {
  background:
    radial-gradient(120% 80% at 50% 6%, rgba(111, 168, 199, 0.16), transparent 60%),
    linear-gradient(180deg, #141a1f 0%, #121a1f 58%, #0c1114 58.4%, #0a0e11 100%);
}
.scene-shell[data-scene="analytics"] .scene-bg[data-placeholder="1"] {
  background:
    radial-gradient(120% 80% at 50% 6%, rgba(143, 134, 201, 0.14), transparent 60%),
    linear-gradient(180deg, #14171f 0%, #12161e 58%, #0c0f14 58.4%, #0a0c10 100%);
}

/* 实体屏幕：透视区域只展示，不接收指针事件 */
.scene-screens { position: absolute; inset: 0; z-index: 1; }
.scene-character-foreground {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  transition: filter 1.2s ease;
}
.scene-character-foreground[hidden] { display: none; }
.scene-character-foreground[data-variant="shenmi-host"] {
  clip-path: polygon(11% 29%, 20% 27%, 27% 37%, 33% 70%, 29% 81%, 13% 77%, 10% 48%);
}
.scene-character-foreground[data-variant="shenmi-confirmed"] {
  clip-path: polygon(17% 26%, 28% 25%, 35% 42%, 42% 74%, 37% 86%, 15% 84%, 13% 51%);
}
.scene-character-foreground[data-variant="qingge-reviewing"] {
  clip-path: polygon(60% 16%, 77% 14%, 85% 42%, 92% 80%, 86% 100%, 55% 100%, 54% 57%);
}
.scene-character-foreground[data-variant="qingge-pointing"] {
  clip-path: polygon(61% 6%, 76% 9%, 80% 47%, 79% 100%, 54% 100%, 53% 68%, 46% 63%, 38% 50%, 39% 34%, 47% 48%, 55% 51%, 58% 19%);
}
.diegetic-screen {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.screen-surface {
  position: absolute;
  top: 0; left: 0;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(160deg, #0f1518, #0b1013);
  box-shadow: 0 0 0 3px #0a0d0f, 0 0 34px rgba(0, 0, 0, 0.6), 0 0 60px rgba(242, 180, 92, 0.06);
}
.diegetic-screen.is-degenerate .screen-surface {
  /* 退化四边形回退：宁可没有透视，也不让屏幕消失 */
  position: relative;
  transform: none !important;
  width: 46% !important;
  height: auto !important;
  margin: 2%;
}

/* 覆盖在四边形上的可访问控件 */
.diegetic-trigger {
  position: absolute;
  top: 0; left: 0;
  pointer-events: auto;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: end center;
  transition: background 0.2s;
}
.diegetic-trigger:hover,
.diegetic-trigger:focus-visible {
  background: rgba(242, 180, 92, 0.10);
}
/* 场景外的常驻放大工具条：不再贴在透视四边形内部（那里太小，鼠标很难精确点中），
   固定在场景舞台下方，尺寸与位置不受透视变换影响，随时可点。 */
.scene-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.scene-zoom-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(242, 180, 92, 0.45);
  background: rgba(11, 14, 16, 0.86);
  color: var(--warm);
  font-size: 13px;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
}
.scene-zoom-button:hover,
.scene-zoom-button:focus-visible {
  background: rgba(242, 180, 92, 0.16);
  border-color: var(--warm);
}
.scene-zoom-button:active {
  transform: scale(0.96);
}
.diegetic-screen.is-opening .screen-surface {
  animation: diegetic-power-on 0.15s ease;
}
@keyframes diegetic-power-on {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.6); }
  100% { filter: brightness(1); }
}
.diegetic-hint {
  margin-bottom: 18px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(11, 14, 16, 0.86);
  border: 1px solid rgba(242, 180, 92, 0.5);
  color: var(--warm);
  font-size: 26px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s;
}
.diegetic-trigger:hover .diegetic-hint,
.diegetic-trigger:focus-visible .diegetic-hint {
  opacity: 1;
  transform: translateY(0);
}

/* 桌上热区：联络台与手机 */
.scene-hotspots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.scene-room-state { position:absolute; z-index:4; inset:0; pointer-events:none; }
.scene-room-state::before { content:""; position:absolute; inset:0; opacity:0; transition:opacity .7s ease,background .7s ease; }
.scene-room-state[data-occupied="false"]::before { opacity:1; background:linear-gradient(180deg,rgba(4,9,10,.06) 0%,rgba(3,8,9,.28) 57%,rgba(2,6,7,.48) 100%); }
.scene-room-state[data-occupied="true"]::before { opacity:1; background:linear-gradient(180deg,rgba(226,184,101,.08) 0%,transparent 32%,rgba(29,85,77,.10) 58%,rgba(5,14,13,.08) 100%); }
.scene-room-status { position:absolute; left:22px; bottom:20px; display:grid; max-width:300px; gap:3px; padding:10px 12px; border:1px solid rgba(176,195,186,.32); border-radius:5px; color:#e5ece7; background:rgba(7,14,12,.76); backdrop-filter:blur(8px); }
.scene-room-status,.scene-room-occupants { z-index:1; }
.scene-room-status small,.scene-room-status span { color:#9cafA7; font-size:10px; }.scene-room-status strong { font-size:13px; }
.scene-room-state[data-occupied="true"] .scene-room-status { border-color:rgba(226,177,100,.5); }
.scene-room-occupants { position:absolute; right:22px; bottom:20px; display:flex; gap:8px; }
.scene-room-occupants > span { display:grid; justify-items:center; gap:3px; }
.scene-room-occupants b { display:grid; width:38px; height:38px; place-items:center; border:2px solid #e5b566; border-radius:50%; color:#f2d9a4; background:#1b2b27; box-shadow:0 5px 15px rgba(0,0,0,.4); font-style:normal; }
.scene-room-occupants i { max-width:88px; overflow:hidden; color:#d8e1dc; font-size:9px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.scene-event-stream { position:absolute; z-index:5; top:22px; left:22px; display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center; width:min(308px,calc(100% - 44px)); padding:8px 10px; border:1px solid rgba(151,184,167,.35); border-radius:5px; color:#e5eee8; background:rgba(7,14,12,.8); box-shadow:0 8px 24px rgba(0,0,0,.18); backdrop-filter:blur(9px); pointer-events:none; }.scene-event-stream[hidden] { display:none; }.scene-event-stream > span { align-self:start; padding-top:2px; color:#9fb7aa; font-size:9px; writing-mode:vertical-rl; letter-spacing:0; }.scene-event-stream > div { display:flex; min-width:0; align-items:center; gap:8px; }.scene-event-stream b { display:grid; flex:0 0 32px; width:32px; height:32px; overflow:hidden; border:1px solid rgba(206,177,111,.55); border-radius:4px; background:#16231f; }.scene-event-stream p { display:grid; min-width:0; gap:2px; margin:0; }.scene-event-stream strong { overflow:visible; font-size:11px; font-weight:500; line-height:1.35; overflow-wrap:anywhere; white-space:normal; }.scene-event-stream small { color:#9fb7aa; font-size:9px; }
.scene-hotspot {
  position: absolute;
  pointer-events: auto;
  border: 1px dashed rgba(232, 238, 240, 0.22);
  border-radius: 10px;
  background: rgba(11, 14, 16, 0.30);
  color: var(--text-dim);
  font-size: 20px;
  display: grid;
  place-items: center;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.scene-hotspot:hover,
.scene-hotspot:focus-visible {
  border-color: var(--warm);
  border-style: solid;
  background: rgba(242, 180, 92, 0.12);
  color: var(--warm);
}

/* 陪学人物层 */
.scene-companion {
  position: absolute;
  right: 4%;
  bottom: 8%;
  width: 26%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.companion-speech {
  margin: 0;
  max-width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(11, 14, 16, 0.9);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 17px;
  line-height: 1.5;
}

.scene-thumbs { display: none; }
.screen-parked { display: none; }

/* ---------- 屏幕聚焦层：无透视、可读、可填写 ---------- */

.screen-focus {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 22px;
}
.screen-focus[hidden] { display: none; }
.screen-focus-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 11, 0.78);
  backdrop-filter: blur(3px);
}
.screen-focus-panel {
  position: relative;
  width: 100%;
  max-width: 1180px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #141a1e, #0f1417);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.screen-focus-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.screen-focus-panel h2 { margin: 0; font-size: 15px; }
.screen-focus-close {
  width: 32px; height: 32px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1;
}
.screen-focus-close:hover { color: var(--text); border-color: #3a464d; }
.screen-focus-body {
  flex: 1;
  overflow: auto;
  padding: 20px;
}
.screen-focus-panel > footer {
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--text-faint);
}

/* 聚焦层里的屏幕内容恢复正常字号 */
.screen-focus-body .screen {
  width: 100%;
  height: auto;
  font-size: 14px;
}

/* ---------- 屏幕内容通用 ---------- */

.screen {
  width: 100%;
  height: 100%;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 15px;
  color: var(--text);
}
.screen-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.screen-head h2 { margin: 2px 0 0; font-size: 19px; }
.screen-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--text-faint);
}

.primary-command, .secondary-command, .text-command, .finish-command {
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 10px 16px;
  font-size: 13px;
  transition: filter 0.18s, background 0.18s, color 0.18s, border-color 0.18s;
}
.primary-command {
  background: linear-gradient(150deg, var(--warm), var(--warm-deep));
  color: #21160a;
  font-weight: 600;
}
.primary-command:hover:not(:disabled) { filter: brightness(1.08); }
.secondary-command {
  background: var(--ink-raise);
  border-color: var(--line);
  color: var(--text);
}
.secondary-command:hover:not(:disabled) { border-color: #3f4c54; }
.secondary-command.is-pausing { border-color: var(--warm); color: var(--warm); }
.text-command {
  background: transparent;
  color: var(--text-dim);
  padding: 8px 10px;
}
.text-command:hover { color: var(--text); }
.finish-command {
  background: transparent;
  border-color: var(--ok);
  color: var(--ok);
}
.finish-command:hover:not(:disabled) { background: rgba(127, 178, 138, 0.12); }
.primary-command:disabled,
.secondary-command:disabled,
.finish-command:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  font-size: 13px;
  text-align: center;
}

.empty-state-icon {
  width: 40px;
  height: 40px;
  color: var(--text-faint);
  opacity: 0.7;
}

.empty-state-icon svg {
  width: 100%;
  height: 100%;
}

.empty-state p {
  margin: 0;
}

/* ---------- 番茄钟屏 ---------- */

.timer-switch { display: flex; gap: 5px; }
.timer-switch button {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
}
.timer-switch button.is-active {
  background: var(--ink-raise);
  border-color: var(--warm);
  color: var(--warm);
}

.timer-ring {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 0;
  border-radius: var(--radius-sm);
  background: radial-gradient(75% 100% at 50% 0%, rgba(242, 180, 92, 0.10), transparent 70%);
}
.timer-ring-svg {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 168px;
  height: 168px;
  transform: translateX(-50%) rotate(-90deg);
  pointer-events: none;
}
.timer-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 4;
}
.timer-ring-progress {
  fill: none;
  stroke: var(--warm);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 339.29;
  stroke-dashoffset: 339.29;
  transition: stroke-dashoffset 0.4s linear;
}
.timer-kind {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}
.timer-value {
  font-size: 54px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.timer-caption { font-size: 12px; color: var(--text-dim); }

.timer-commands { display: flex; align-items: center; gap: 8px; }
.timer-commands .timer-primary { flex: 1; }

.session-block {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.session-block > span { font-size: 11px; color: var(--text-faint); }
.session-time {
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
.session-label { font-size: 11px; color: var(--text-dim); }
.session-commands {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.timer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--text-dim);
}
.timer-meta input {
  width: 54px;
  padding: 5px 7px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
}

/* ---------- 任务屏 ---------- */

.task-progress {
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.task-list { display: grid; gap: 8px; }
.task-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  border-left-width: 3px;
}
.task-row.core { border-left-color: var(--warm); }
.task-row.advance { border-left-color: var(--cool); }
.task-row.fallback { border-left-color: var(--ok); }
.task-row.is-done { opacity: 0.58; }
.task-row.is-done .task-copy strong { text-decoration: line-through; }

.task-check {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.task-check:hover:not(:disabled) { border-color: var(--warm); color: var(--warm); }
.task-row.is-done .task-check {
  background: var(--ok);
  border-color: var(--ok);
  color: #0d1a11;
}
.task-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task-copy span { font-size: 10px; letter-spacing: 0.12em; color: var(--text-faint); }
.task-copy strong { font-size: 14px; }
.task-copy small { font-size: 12px; color: var(--text-dim); }

.task-bar {
  height: 3px;
  border-radius: 999px;
  background: var(--ink-raise);
  overflow: hidden;
}
.task-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--warm), var(--ok));
  transition: width 0.3s;
}

/* ---------- BP 屏 ---------- */

.bp-lock-state { font-size: 11px; color: var(--text-faint); }
.library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.library-view-tabs { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: var(--ink); }
.library-view-tabs button {
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.library-view-tabs button.is-active { background: var(--ink-raise); color: var(--text); }
.library-toolbar label { flex: 0 1 240px; }
.library-toolbar input {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--ink);
  color: var(--text);
}
.bp-form { display: grid; gap: 10px; }
.bp-task {
  display: flex;
  gap: 11px;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  border-left-width: 3px;
  background: rgba(255, 255, 255, 0.02);
}
.bp-task.core { border-left-color: var(--warm); }
.bp-task.advance { border-left-color: var(--cool); }
.bp-task.fallback { border-left-color: var(--ok); }
.bp-sequence {
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  padding-top: 20px;
}
.bp-fields {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(150px, 0.8fr) minmax(110px, 0.5fr);
  gap: 8px;
  min-width: 0;
}
.bp-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-faint);
  min-width: 0;
}
.bp-fields .bp-note { grid-column: 1 / -1; }
.bp-fields input,
.bp-fields select {
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  min-width: 0;
}
.bp-fields input:focus,
.bp-fields select:focus { border-color: var(--warm); }

.bp-total { text-align: right; }
.bp-total span { display: block; font-size: 10px; color: var(--text-faint); }
.bp-total strong { font-size: 20px; font-variant-numeric: tabular-nums; }

.bp-advice {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: rgba(111, 168, 199, 0.08);
  border: 1px solid rgba(111, 168, 199, 0.24);
}
.bp-advice span {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--cool);
  font-weight: 600;
}
.bp-advice p { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; }

.bp-roster { display: grid; gap: 7px; }
.roster-row {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  border-left-width: 3px;
}
.roster-row.core { border-left-color: var(--warm); }
.roster-row.advance { border-left-color: var(--cool); }
.roster-row.fallback { border-left-color: var(--ok); }
.roster-row.is-empty { opacity: 0.5; }
.roster-row span { font-size: 11px; color: var(--text-faint); }
.roster-row strong { font-size: 13px; }
.roster-row small { font-size: 11px; color: var(--text-dim); }

.task-row-actions,
.goal-controls { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.task-row-actions .secondary-command,
.goal-controls .secondary-command { padding: 7px 9px; }
.roster-row.is-current { border-color: color-mix(in srgb, var(--warm) 62%, var(--line)); background: rgba(242, 180, 92, 0.06); }
.roster-row.is-current > strong::after { content: "当前"; margin-left: 7px; color: var(--warm); font-size: 10px; font-weight: 500; }
.task-row.is-current { border-color: color-mix(in srgb, var(--warm) 52%, var(--line)); }
.workbench-task.is-current { padding-inline: 5px; border-radius: 5px; background: rgba(242, 180, 92, 0.06); }

/* ---------- V1.3 云栖任务板 ---------- */

.screen-task-board { gap: 14px; }
.contract-summary { color: var(--text-faint); font-size: 11px; }
.contract-form {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}
.contract-form-grid { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(120px, 1fr)); gap: 9px; }
.contract-form-grid label { display: grid; gap: 5px; color: var(--text-faint); font-size: 11px; }
.contract-title-field { grid-column: span 2; }
.contract-form input,
.contract-form select {
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--ink);
  color: var(--text);
  font: inherit;
}
.contract-form-note { margin: 0; color: var(--text-faint); font-size: 11px; line-height: 1.5; }
.contract-form > .primary-command { justify-self: start; }
.contract-list { display: grid; gap: 10px; }
.contract-card {
  display: grid;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cool);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.018);
}
.contract-card.contract-correction { border-left-color: var(--warm); }
.contract-card.contract-active_locked { border-left-color: var(--ok); }
.contract-card.contract-completed_on_time { border-left-color: var(--ok); opacity: 0.78; }
.contract-card.contract-completed_late,
.contract-card.contract-expired,
.contract-card.contract-canceled_correction { border-left-color: var(--line-strong); opacity: 0.68; }
.contract-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.contract-card > header > div { display: grid; min-width: 0; gap: 3px; }
.contract-card > header span { color: var(--text-faint); font-size: 10px; }
.contract-card > header strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.contract-status { flex: 0 0 auto; padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; }
.contract-offers { display: grid; gap: 7px; }
.contract-offer,
.contract-assignment,
.contract-draft { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.contract-draft { grid-template-columns: minmax(0, 1fr) auto; color: var(--text-dim); font-size: 12px; }
.contract-avatar { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.contract-offer > span:nth-child(2),
.contract-assignment > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.contract-offer strong,
.contract-assignment strong { font-size: 12px; }
.contract-offer small,
.contract-assignment small { color: var(--text-dim); font-size: 11px; line-height: 1.4; }
.contract-offer button,
.contract-assignment button { min-height: 38px; padding: 8px 10px; }

/* ---------- 会议室当前资料摘要 ---------- */

.material-preview-kind { color: var(--cool); font-size: 11px; }
.material-preview-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(111, 168, 199, 0.06); }
.material-preview-icon { width: 64px; height: 76px; display: grid; place-items: center; border: 1px solid rgba(111, 168, 199, 0.42); border-radius: 6px; color: var(--cool); font-size: 12px; font-weight: 700; }
.material-preview-card > div { display: grid; min-width: 0; gap: 7px; }
.material-preview-title { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.material-preview-progress { color: var(--text-dim); font-size: 12px; }

/* 房间里的透视屏只承担“远看一眼”的摘要；点开后恢复完整工具。 */
.diegetic-screen .screen { padding: 28px; gap: 14px; }
.diegetic-screen .screen-head h2 { font-size: 26px; }
.diegetic-screen .screen-timer .timer-switch,
.diegetic-screen .screen-timer .timer-commands,
.diegetic-screen .screen-timer .session-block,
.diegetic-screen .screen-timer .timer-meta { display: none; }
.diegetic-screen .screen-timer .timer-ring { flex: 1; justify-content: center; padding: 0; background: none; }
.diegetic-screen .screen-timer .timer-ring-svg { display: none; }
.diegetic-screen .screen-timer .timer-value { font-size: clamp(42px, 6vw, 76px); }
.diegetic-screen .screen-timer .timer-caption { font-size: 15px; }
.diegetic-screen .screen-tasks .task-row:nth-child(n+2),
.diegetic-screen .screen-tasks .task-bar,
.diegetic-screen .screen-tasks .screen-foot { display: none; }
.diegetic-screen .screen-tasks .task-list { display: grid; align-content: center; flex: 1; }
.diegetic-screen .screen-tasks .task-row { min-height: 86px; padding: 16px; }
.diegetic-screen .screen-tasks .task-copy strong { font-size: 20px; }
.diegetic-screen .screen-task-board .contract-form { display: none; }
.diegetic-screen .screen-task-board .contract-card:nth-child(n+2) { display: none; }
.diegetic-screen .screen-task-board .contract-card { min-height: 122px; align-content: center; }
.diegetic-screen .screen-task-board .contract-offers .contract-offer:nth-child(n+2) { display: none; }
.diegetic-screen .screen-task-board .contract-offer button,
.diegetic-screen .screen-task-board .contract-assignment button { display: none; }
.diegetic-screen .screen-bp-editor .bp-form,
.diegetic-screen .screen-bp-editor .task-row-actions { display: none; }
.diegetic-screen .screen-bp-editor .task-row:nth-child(n+4) { display: none; }
.diegetic-screen .screen-charts .range-tabs { display: none; }
.diegetic-screen .screen-charts .metric-row { margin-top: auto; }
.diegetic-screen .screen-records .history-list,
.diegetic-screen .screen-records .settlement-note,
.diegetic-screen .screen-records .closeness-events-section,
.diegetic-screen .screen-records .save-note { display: none; }
.diegetic-screen .screen-meeting-preview .material-preview-card { flex: 1; }
.diegetic-screen .screen-meeting-preview .screen-foot { display: none; }
.diegetic-screen .material-library-screen .material-library-actions,
.diegetic-screen .material-library-screen .material-open { display: none; }

/* ---------- 数据屏 ---------- */

.range-tabs { display: flex; gap: 5px; }
.range-tabs button {
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
}
.range-tabs button.is-active { border-color: var(--warm); color: var(--warm); }

.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.metric-row article {
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.metric-row span { display: block; font-size: 10px; color: var(--text-faint); }
.metric-row strong { font-size: 19px; font-variant-numeric: tabular-nums; }

.time-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 132px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.chart-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  min-width: 0;
}
.chart-column span { font-size: 9px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.chart-column i {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  overflow: hidden;
}
.chart-column b {
  width: 100%;
  background: linear-gradient(180deg, var(--warm), var(--warm-deep));
  border-radius: 4px 4px 0 0;
}
.chart-column small { font-size: 9px; color: var(--text-faint); }
.chart-caption { margin: 0; font-size: 11px; color: var(--text-faint); }

.qingge-observation {
  margin: 0;
  padding: 12px 14px;
  border-left: 2px solid var(--cool);
  background: rgba(111, 168, 199, 0.07);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
}

.tier-distribution { display: grid; gap: 7px; }
.tier-row {
  display: grid;
  grid-template-columns: 68px 1fr 56px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.tier-row span { color: var(--text-dim); }
.tier-row i {
  height: 5px;
  border-radius: 999px;
  background: var(--ink-raise);
  overflow: hidden;
}
.tier-row b { display: block; height: 100%; border-radius: 999px; }
.tier-row.core b { background: var(--warm); }
.tier-row.advance b { background: var(--cool); }
.tier-row.fallback b { background: var(--ok); }
.tier-row strong { text-align: right; font-variant-numeric: tabular-nums; }

.history-list { display: grid; gap: 6px; }
.history-list article {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.history-list time { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.history-list strong { display: block; font-size: 13px; }
.history-list small { font-size: 11px; color: var(--text-dim); }
.history-list article > span { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-dim); }

.settlement-note {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  color: var(--text-faint);
}
.settlement-note input {
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}
.screen-records .save-note { align-self: flex-start; }

/* ---------- 联络台 ---------- */

.contact-console {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 22px;
}
.contact-console[hidden] { display: none; }
.contact-console-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 11, 0.78);
  backdrop-filter: blur(3px);
}
.contact-console-panel {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: min(720px, 90vh);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #141a1e, #0f1417);
  box-shadow: var(--shadow);
}
.contact-console-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.contact-console-panel h2 { margin: 2px 0 0; font-size: 17px; }
.contact-console-meta { display: flex; align-items: center; gap: 10px; }
.contact-slot {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.contact-console-close {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
}
.contact-console-note { margin: 0; font-size: 12px; color: var(--text-dim); }

/* 桌面三列，给完整活动文案和放大的 Q 版人物留出空间 */
.contact-grid {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  align-content: start;
}
.contact-card { position: relative; min-width: 0; }
.contact-action {
  width: 100%;
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 42px 10px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  text-align: left;
  transition: border-color 0.18s, background 0.18s, opacity 0.18s;
}
.contact-action:hover:not(:disabled) {
  border-color: var(--warm);
  background: rgba(242, 180, 92, 0.08);
}
.contact-action:disabled { cursor: default; opacity: 0.78; }

.contact-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 62px; height: 62px;
  border-radius: 7px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 34%, transparent),
    rgba(20, 26, 30, 0.9));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.contact-avatar-initial {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.contact-avatar[data-placeholder="0"] .contact-avatar-initial { display: none; }
.contact-avatar-image {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.contact-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.contact-current-hero {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  object-fit: cover;
}
.contact-training-clock {
  position: absolute;
  right: 43px;
  bottom: 5px;
  color: var(--text-faint);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.contact-name { font-size: 14px; }
.contact-role { font-size: 10px; color: var(--text-faint); }
.contact-activity {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: normal;
}

.contact-detail-button {
  position: absolute;
  right: 7px;
  bottom: 7px;
  min-width: 34px;
  min-height: 28px;
  padding: 3px 6px;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-size: 10px;
}
.contact-detail-button:hover { color: var(--text); }

/* 状态全部由 CSS 表现，不额外生图 */
.contact-badge {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  border: 1px solid var(--line);
  color: var(--text-faint);
}
.contact-card[data-presence="available"] .contact-badge { border-color: var(--ok); color: var(--ok); }
.contact-card[data-presence="asleep"] .contact-badge { border-color: var(--cool); color: var(--cool); }
.contact-card[data-presence="asleep"] .contact-action { opacity: 0.62; }
.contact-card[data-presence="invited"] .contact-badge { border-color: var(--warm); color: var(--warm); }
.contact-card[data-presence="in_room"] .contact-badge {
  border-color: var(--warm);
  background: var(--warm);
  color: #21160a;
}
.contact-card[data-presence="in_room"] .contact-action {
  border-color: var(--warm);
  background: rgba(242, 180, 92, 0.10);
}
.contact-card[data-presence="busy"] .contact-action { opacity: 0.72; }

.contact-detail-panel {
  min-height: 88px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink-raise);
}
.contact-detail-panel[hidden] { display: none; }
.contact-detail-avatar { width: 72px; height: 72px; border-radius: 6px; }
.contact-detail-copy { min-width: 0; display: grid; gap: 4px; }
.contact-detail-copy strong { font-size: 13px; }
.contact-detail-copy p { margin: 0; color: var(--text); font-size: 12px; line-height: 1.5; }
.contact-detail-copy small { color: var(--text-faint); font-size: 10px; }
.contact-detail-copy .contact-training-meta { color: var(--warm); }
.contact-detail-panel > button {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-size: 17px;
}

/* 亲密度档位徽标：贴在卡片右上角，不挤占状态徽标的位置。 */
.contact-action { position: relative; }
.contact-closeness-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  line-height: 1.4;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text-faint);
}
.contact-closeness-badge[data-tier="recognized"],
.contact-closeness-badge[data-tier="familiar"],
.contact-closeness-badge[data-tier="attuned"] { border-color: var(--accent); color: var(--accent); }
.contact-closeness-badge[data-tier="close"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #1a1210;
}

.contact-console-panel > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.contact-console-hint { font-size: 10px; color: var(--text-faint); }

/* ---------- 手机 ---------- */

.phone-overlay {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  padding: 22px;
}
.phone-overlay[hidden] { display: none; }
.phone-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 11, 0.78);
  backdrop-filter: blur(3px);
}
/* 桌面：逻辑画布 390×780，最大高度不超过视口 88% */
.phone-frame {
  position: relative;
  width: 390px;
  height: 780px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #141a1e, #0d1215);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.phone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.phone-header h2 { margin: 0; font-size: 14px; }
.phone-close {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
}
.phone-body { flex: 1; overflow: auto; overflow-anchor: none; }
.phone-page { padding: 14px; display: flex; flex-direction: column; gap: 11px; }

.phone-tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--line);
}
.phone-tab {
  position: relative;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  font-size: 12px;
  padding: 11px 4px;
}
.phone-tab[aria-selected="true"] { color: var(--warm); }
.phone-unread {
  position: absolute;
  top: 9px;
  right: calc(50% - 22px);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--danger);
}

.phone-note { margin: 0; font-size: 11px; color: var(--text-faint); line-height: 1.5; }

.phone-rank { gap: 12px; }
.phone-rank > section { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, rgba(27,34,33,.96), rgba(13,18,18,.98)); }
.shared-rank-current { display: grid; gap: 8px; text-align: center; box-shadow: inset 0 0 28px rgba(212,164,94,.07); }
.shared-rank-current p,.shared-rank-current h3,.shared-rank-current small,.shared-rank-report h3,.shared-rank-guard h3 { margin: 0; }
.shared-rank-current p,.shared-rank-current small { color: var(--text-faint); font-size: 10px; }
.shared-rank-current h3 { color: #f0c579; font: 650 23px/1.2 "Noto Serif SC","Songti SC",serif; letter-spacing: .08em; }
.shared-rank-stars { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-dim); font-size: 11px; }
.shared-rank-stars strong { color: #f2d399; font-size: 15px; }
.shared-rank-progress { height: 5px; overflow: hidden; border-radius: 999px; background: #29302f; }
.shared-rank-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#9d6a2e,#f0c579); }
.shared-rank-report,.shared-rank-guard { display: grid; gap: 10px; }
.shared-rank-report h3,.shared-rank-guard h3 { font-size: 13px; }
.shared-rank-report-note { margin:-4px 0 0; color:var(--text-faint); font-size:9px; line-height:1.55; }
.shared-rank-report > div { display: grid; gap: 4px; max-height: 360px; overflow: auto; }
.shared-rank-report article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.shared-rank-report article span { display: grid; gap: 2px; }
.shared-rank-report article strong { font-size: 11px; }.shared-rank-report article small { color: var(--text-faint); font-size: 9px; }
.shared-rank-report article b { color: #91c9a7; font-size: 11px; }.shared-rank-report article[data-kind="loss"] b { color: #d58f83; }
.shared-rank-report article small.is-cause { color:#c9b98e; font-size:9px; }
.shared-rank-report article.shared-rank-match { display:grid; align-items:stretch; gap:8px; padding:10px 0; }
.shared-rank-match > header,.shared-rank-match > footer { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.shared-rank-match > header > span { display:grid; gap:2px; }
.shared-rank-match > header > b { flex:0 0 auto; }
.shared-rank-match-lineup { display:grid; gap:4px; }
.shared-rank-report .shared-rank-match-player { display:grid; grid-template-columns:30px 24px minmax(0,1fr); align-items:center; gap:6px; min-width:0; padding:3px 5px; border-radius:6px; background:rgba(255,255,255,.025); }
.shared-rank-match-player > i { display:block; width:30px; height:30px; overflow:hidden; border-radius:50%; }
.shared-rank-match-player > i img { width:100%; height:100%; object-fit:cover; }
.shared-rank-match-player > img { width:24px; height:24px; object-fit:cover; border-radius:4px; }
.shared-rank-report .shared-rank-match-player > small { display:grid; min-width:0; gap:1px; }
.shared-rank-match-player > small strong,.shared-rank-match-player > small span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shared-rank-match-player > small span { display:block; color:var(--text-faint); font-size:9px; }
.shared-rank-match > footer small { min-width:0; line-height:1.4; }
.shared-rank-match > footer button { flex:0 0 auto; padding:5px 7px; border:1px solid rgba(224,181,103,.32); border-radius:5px; color:#dfbd7d; background:rgba(69,50,25,.28); font-size:9px; cursor:pointer; }
.shared-rank-guard header { display: grid; gap: 3px; }.shared-rank-guard header span { color: var(--text-faint); font-size: 9px; }
.shared-rank-guard > div { display: grid; gap: 6px; }
.shared-rank-guard button { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--text-dim); background: #141a1a; text-align: left; }
.shared-rank-guard button.is-done { border-color: rgba(126,187,147,.32); color: #9dd3ad; background: rgba(32,67,45,.34); }
.shared-rank-guard button.is-selected { border-color:rgba(224,181,103,.5); color:#edc77e; background:rgba(73,55,27,.42); }
.shared-rank-guard .shared-rank-confirm { justify-content:center; color:#151611; background:#d3ab65; border-color:#e5c27d; font-weight:700; }
.shared-rank-guard .shared-rank-confirm:disabled { opacity:.42; }
.shared-rank-guard-note { margin:0; color:var(--text-faint); font-size:9px; line-height:1.55; }
.training-outcome-attribution { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:2px 12px; margin:0 14px 10px; padding:9px 11px; border-left:3px solid #78b594; background:rgba(35,68,50,.34); }
.training-outcome-attribution.is-liability { border-left-color:#c77f70; background:rgba(80,39,36,.3); }.training-outcome-attribution strong { font-size:11px; }.training-outcome-attribution span { font-size:10px; }.training-outcome-attribution small { grid-column:1/-1; color:var(--text-faint); font-size:9px; }
.phone-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 30px 16px;
  text-align: center;
}
.phone-empty strong { font-size: 14px; }
.phone-empty p { margin: 0; font-size: 12px; color: var(--text-dim); }

.phone-conversation-heading { display: flex; flex-direction: column; gap: 3px; }
.phone-conversation-heading strong { font-size: 15px; }
.phone-conversation-heading small { font-size: 11px; color: var(--text-faint); }
.phone-conversation-list { display: grid; gap: 5px; }
.phone-conversation-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 66px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
}
.phone-conversation-row:hover,
.phone-conversation-row[data-unread="1"] { border-color: var(--line); background: rgba(255, 255, 255, 0.025); }
.phone-conversation-avatar {
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--ink-raise);
}
.phone-conversation-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.phone-conversation-copy strong { font-size: 13px; }
.phone-conversation-copy small {
  overflow: hidden;
  color: var(--text-faint);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone-conversation-row[data-unread="1"] .phone-conversation-copy small { color: var(--text-dim); }
.phone-conversation-meta { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.phone-conversation-meta time { min-height: 14px; color: var(--text-faint); font-size: 10px; }
.phone-proactive-badge { color: var(--warm); font-size: 9px; font-style: normal; white-space: nowrap; }
.phone-unread-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}

.phone-chat-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.phone-chat-avatar {
  width: 58px; height: 58px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
}
.phone-chat-who { display: flex; flex-direction: column; }
.phone-chat-who strong { font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.phone-chat-who small { font-size: 11px; color: var(--text-faint); }

/* 亲密度档位徽标：跟在聊天头名字后面，跟联络台卡片上的徽标同一套配色逻辑。 */
.phone-chat-closeness {
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text-faint);
}
.phone-chat-closeness[data-tier="recognized"],
.phone-chat-closeness[data-tier="familiar"],
.phone-chat-closeness[data-tier="attuned"] { border-color: var(--accent); color: var(--accent); }
.phone-chat-closeness[data-tier="close"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #1a1210;
}

.phone-thread {
  flex: 1;
  min-height: 220px;
  max-height: 420px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 4px 0;
}
.phone-thread-empty { margin: auto; font-size: 12px; color: var(--text-faint); }
.phone-bubble {
  max-width: 78%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}
.phone-bubble.is-character {
  align-self: flex-start;
  background: var(--ink-raise);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
}
.phone-bubble.is-user {
  align-self: flex-end;
  background: linear-gradient(150deg, var(--warm), var(--warm-deep));
  color: #21160a;
  border-bottom-right-radius: 5px;
}

.phone-recent { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.phone-recent > span { font-size: 10px; color: var(--text-faint); }
.phone-recent-item {
  position: relative;
  min-height: 32px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
}
.phone-recent-item .phone-unread { top: 4px; right: 4px; }

.phone-compose { display: flex; gap: 7px; }
.phone-compose input {
  flex: 1;
  min-width: 0;
  padding: 10px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}
.phone-compose button {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(150deg, var(--warm), var(--warm-deep));
  color: #21160a;
  font-size: 15px;
}

.phone-contact-list { display: grid; gap: 6px; }
.phone-contact {
  position: relative;
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  text-align: left;
}
.phone-contact-initial {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}
.phone-contact[data-placeholder="0"] .phone-contact-initial { display: none; }
.phone-contact-avatar {
  flex: 0 0 auto;
  width: 58px; height: 58px;
  border-radius: 7px;
  object-fit: cover;
}
.empty-state-chibi,
.material-empty-chibi {
  width: 72px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.material-empty-chibi { margin: 0 auto 5px; }
.phone-contact-avatar.chibi-avatar { display: grid; border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); }
.phone-contact-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.phone-contact-copy strong { font-size: 13px; }
.phone-contact-copy small {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
  white-space: normal;
}
.phone-contact[data-presence="busy"] { opacity: 0.56; }
.phone-contact[data-presence="asleep"] { opacity: 0.62; }
.phone-contact[data-presence="in_room"] { border-color: var(--warm); }

.phone-clock {
  display: grid;
  gap: 3px;
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.phone-clock > span { font-size: 10px; color: var(--text-faint); }
.phone-clock strong { font-size: 25px; font-variant-numeric: tabular-nums; }
.phone-clock small { font-size: 11px; color: var(--text-dim); }

.phone-task-list { display: grid; gap: 6px; }
.phone-task {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-size: 12px;
}
.phone-task[data-status="completed"] { opacity: 0.58; }
.phone-task-tier { font-size: 10px; color: var(--text-faint); }
.phone-task strong { font-size: 12px; }
.phone-task-status { font-size: 10px; color: var(--text-dim); }
.phone-actions { display: flex; gap: 7px; }
.phone-actions .primary-command { flex: 1; min-height: 44px; }

/* streak chip in today */
.phone-streak { display: inline-block; margin-top: 2px; font-size: 11px; color: var(--warm); }

/* stats page */
.phone-stats { display: grid; gap: 16px; }
.phone-stats-streak {
  display: flex; align-items: baseline; gap: 6px;
  padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line);
}
.phone-stats-streak strong { font-size: 28px; font-variant-numeric: tabular-nums; }
.phone-stats-streak span { font-size: 12px; color: var(--text-dim); }
.phone-stats-chart {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; align-items: end; height: 120px;
}
.phone-stats-col {
  display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%;
}
.phone-stats-val { font-size: 9px; color: var(--text-faint); min-height: 12px; }
.phone-stats-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.phone-stats-bar { width: 100%; min-height: 3px; background: var(--warm); border-radius: 2px 2px 0 0; transition: height 0.3s; }
.phone-stats-date { font-size: 9px; color: var(--text-faint); }
.phone-stats-summary {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--text-dim);
  padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line);
}
.phone-stats-summary strong { color: var(--text); }

.phone-echo-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--warm) 38%, var(--line));
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, rgba(242, 180, 92, 0.09), rgba(255, 255, 255, 0.02));
}
.phone-echo-card > span { color: var(--warm); font-size: 10px; letter-spacing: 0.08em; }
.phone-echo-card strong { font-size: 14px; }
.phone-echo-card p { margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.55; }
.phone-echo-card small { color: var(--text-faint); font-size: 10px; }
.phone-yunqi-calendar,
.phone-server-timeline { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.phone-yunqi-calendar > header,
.phone-server-timeline > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.phone-yunqi-calendar header strong,
.phone-server-timeline header strong { font-size: 12px; }
.phone-yunqi-calendar header small,
.phone-server-timeline header small { color: var(--text-faint); font-size: 10px; }
.phone-yunqi-calendar > div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.phone-yunqi-calendar time {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 5px;
  color: var(--text-faint);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.phone-yunqi-calendar time[data-active="1"] { background: var(--warm); color: #21160a; font-weight: 700; }
.phone-server-timeline > div { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 8px; align-items: start; }
.phone-server-timeline i { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--cool); }
.phone-server-timeline i[data-type="contract"] { background: var(--warm); }
.phone-server-timeline div > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.phone-server-timeline div strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.phone-server-timeline div small { overflow: hidden; color: var(--text-faint); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.phone-switch, .phone-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.phone-switch span, .phone-field > span { display: flex; flex-direction: column; gap: 2px; }
.phone-switch strong, .phone-field strong { font-size: 13px; }
.phone-switch small, .phone-field small { font-size: 11px; color: var(--text-faint); }
.phone-switch input { width: 20px; height: 20px; accent-color: var(--warm); }
.phone-segment { display: flex; gap: 4px; }
.phone-segment button {
  min-width: 44px;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
}
.phone-segment button.is-active { border-color: var(--warm); color: var(--warm); }

.phone-field.phone-backup {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.phone-backup-actions { display: flex; gap: 8px; }
.phone-backup-actions button {
  flex: 1;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
}
.phone-backup-actions button:hover { border-color: var(--warm); color: var(--warm); }
.phone-backup-status {
  min-height: 14px;
  font-size: 11px;
  color: var(--text-faint);
}

.phone-field.phone-ai-config {
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
}
.phone-ai-input { display: grid; gap: 4px; }
.phone-ai-input > span { color: var(--text-dim); font-size: 11px; }
.phone-ai-input input {
  width: 100%;
  min-height: 38px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--ink);
  color: var(--text);
  font-family: inherit;
}
.phone-ai-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.phone-ai-actions button {
  min-height: 38px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
}
.phone-ai-actions button[type="submit"] { border-color: var(--warm); color: var(--warm); }
.phone-ai-actions button:disabled { opacity: 0.45; }
.phone-ai-state { min-height: 16px; color: var(--text-faint); line-height: 1.45; }

/* 亲密度详情页 */
.phone-closeness-list { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.phone-closeness-row { display: flex; align-items: flex-start; gap: 10px; }
.phone-closeness-avatar {
  flex-shrink: 0;
  width: 58px; height: 58px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600;
  color: var(--accent);
}
.phone-closeness-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.phone-closeness-name { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.phone-closeness-name strong { font-weight: 600; }
.phone-closeness-bar-wrap {
  height: 4px; border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.phone-closeness-bar {
  height: 100%; border-radius: 2px;
  background: var(--accent);
  transition: width 0.4s ease;
  min-width: 2px;
}
.phone-closeness-sub { font-size: 11px; color: var(--text-faint); }
.phone-memory-stamp {
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 7px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 54%, var(--line));
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-dim);
  font-size: 10px;
}
.phone-memory-stamp[hidden] { display: none; }
.phone-memory-stamp time { flex: 0 0 auto; color: var(--text-faint); }

/* ---------- 响应式 ---------- */

/* 1440×1000 基准：场景满宽，屏幕内容略收紧 */
@media (max-width: 1500px) {
  main { padding: 15px 18px 6px; }
  .screen { padding: 20px; }
  .timer-value { font-size: 48px; }
}

/* 手机 390×844：不贴远景透视，改用场景下方缩略入口 */
@media (max-width: 859px) {
  .app-header {
    flex-wrap: wrap;
    gap: 9px;
    padding: 10px 14px;
  }
  .header-center { order: 3; width: 100%; margin-left: 0; }
  .scene-nav { width: 100%; }
  .scene-nav button { flex: 1; min-height: 40px; }

  main { padding: 12px 14px 6px; }

  .scene-shell[data-viewport="mobile"] .scene-stage {
    /* 上半部展示人物裁切，脸与手不被顶部导航切断 */
    aspect-ratio: 4 / 5;
    max-height: 46vh;
  }
  .scene-shell[data-viewport="mobile"] .scene-companion {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: 6%;
    width: 54%;
  }
  .scene-shell[data-viewport="mobile"] .companion-speech { font-size: 13px; padding: 9px 12px; }

  .scene-thumbs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    margin-top: 10px;
  }
  .scene-thumb {
    min-height: 44px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text);
    text-align: left;
  }
  .scene-thumb .thumb-kind { font-size: 10px; color: var(--text-faint); }
  .scene-thumb strong { font-size: 13px; }
  .scene-thumb small { font-size: 11px; color: var(--text-dim); }
  .scene-thumb.is-utility {
    align-items: center;
    justify-content: center;
    border-style: dashed;
  }

  /* 点开后屏幕内容占满可用宽度 */
  .screen-focus { padding: 0; }
  .screen-focus-panel {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: 0;
  }
  .screen-focus-body { padding: 14px; }
  .screen { padding: 0; gap: 13px; }
  .timer-value { font-size: 44px; }
  .metric-row { grid-template-columns: 1fr; }
  .bp-fields { grid-template-columns: minmax(0, 1fr); }
  .bp-fields .bp-title,
  .bp-fields .bp-kind,
  .bp-fields .bp-minutes,
  .bp-fields .bp-note { grid-column: 1; max-width: none; }
  .session-commands { flex-direction: column; align-items: stretch; }
  .session-commands button { min-height: 44px; }

  /* 联络台改为底部抽屉 */
  .contact-console { padding: 0; place-items: end center; }
  .contact-console-panel {
    max-width: 100%;
    width: 100%;
    max-height: 82vh;
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 0;
  }
  .contact-console-panel > footer { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* 手机 UI 直接用设备视口，不画第二层外壳 */
  .phone-overlay { padding: 0; }
  .phone-frame {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: 0;
  }
  .phone-thread { max-height: none; }

  .app-footer { flex-wrap: wrap; gap: 8px; padding: 8px 14px 12px; }
  .toast { left: 14px; right: 14px; bottom: 16px; transform: translateY(14px); text-align: center; }
  .toast.is-visible { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
.scene-shell[data-scene="meeting"] .scene-bg[data-placeholder="1"] {
  background:
    radial-gradient(110% 78% at 48% 8%, rgba(184, 197, 201, 0.12), transparent 62%),
    linear-gradient(180deg, #161a1c 0%, #131719 58%, #0d1112 58.4%, #0a0d0e 100%);
}
.phone-field.phone-memory-field {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.phone-memory-field > select {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--ink);
  color: var(--text);
}
.phone-memory-list { display: grid; gap: 7px; }
.phone-memory-list > small { color: var(--text-faint); }
.phone-memory-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 5px;
}
.phone-memory-row input {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 36px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--ink);
  color: var(--text);
}
.phone-memory-row select {
  min-width: 0;
  min-height: 36px;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--ink);
  color: var(--text-dim);
}
.phone-memory-row button {
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--text-dim);
}
.phone-memory-row button[aria-pressed="true"] { border-color: var(--warm); color: var(--warm); }
.phone-bubble.is-typing {
  min-width: 46px;
  color: var(--text-faint);
  font-weight: 700;
  text-align: center;
}
.phone-dialogue-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text-faint);
  font-size: 10px;
}
.phone-dialogue-state button {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--text-dim);
}

/* ---------- V1.0 外壳与常驻今日工作台 ---------- */

.app-shell { min-height: 100dvh; }

.app-header {
  position: sticky;
  top: 0;
  z-index: 35;
  min-height: 58px;
  padding: 10px 18px;
  background: rgba(9, 12, 14, 0.94);
  backdrop-filter: blur(14px);
}
.brand-seat {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--warm);
}
.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-copy strong { font-size: 15px; }
.brand-copy small { margin-top: 2px; }
.brand-version {
  border-radius: 5px;
  background: transparent;
  border-color: rgba(239, 180, 95, 0.34);
}
.scene-nav { gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; }
.scene-nav button {
  min-height: 34px;
  padding: 6px 13px;
  border: 0;
  border-radius: 4px;
}
.scene-nav button.is-active {
  background: var(--ink-raise);
  color: var(--warm);
  box-shadow: inset 0 -2px var(--warm);
}

.workspace-layout {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 14px 18px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 370px);
  gap: 14px;
  align-items: start;
}
.scene-region { min-width: 0; }
.scene-stage { border-radius: 8px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34); }
.scene-toolbar { margin-top: 8px; gap: 6px; }
.scene-zoom-button {
  min-height: 38px;
  padding: 7px 11px;
  border-radius: 6px;
  border-color: var(--line);
  background: var(--ink-soft);
  color: var(--text-dim);
  font-size: 12px;
}
.scene-zoom-button:hover,
.scene-zoom-button:focus-visible { background: var(--ink-raise); color: var(--warm); }

.today-workbench {
  min-width: 0;
  max-height: calc(100dvh - 91px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-soft);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}
.workbench-head,
.workbench-companion,
.workbench-focus,
.workbench-tasks,
.workbench-review,
.workbench-actions { padding: 15px 16px; }
.workbench-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.phone-chat-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 34px;
  padding: 5px 7px;
  border: 0;
  background: transparent;
  color: var(--warm);
  font-size: 18px;
}
.phone-chat-back span { font-size: 11px; }
.workbench-head h1 { margin: 3px 0 0; font-size: 18px; font-weight: 650; }
.workbench-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text-dim);
  font-size: 11px;
}
.workbench-status[data-kind="active"] { border-color: var(--ok); color: var(--ok); }
.workbench-status[data-kind="finished"] { border-color: var(--cool); color: var(--cool); }
.workbench-state-stack { display: flex; align-items: flex-end; flex-direction: column; gap: 4px; }
.workbench-head-actions { display: flex; align-items: center; gap: 8px; }
.workbench-fullscreen { width: 32px; min-width: 32px; padding: 0; font-size: 18px; }
.workbench-save-state { color: var(--text-faint); font-size: 10px; white-space: nowrap; }
.workbench-save-state[data-kind="saved"] { display: none; }
.workbench-save-state[data-kind="saving"] { color: var(--warm); }
.workbench-save-state[data-kind="local"] { color: var(--cool); }
.workbench-save-state[data-kind="error"] { color: var(--danger); }

.workbench-companion {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}
.workbench-avatar {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 14%, var(--ink));
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}
.chibi-avatar {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: color-mix(in srgb, var(--accent) 13%, var(--ink));
  color: var(--accent);
}
.phone-closeness-avatar.chibi-avatar { overflow: hidden; border-radius: 50%; }
.chibi-avatar-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chibi-avatar-initial { position: relative; z-index: 0; font-weight: 700; }
.chibi-avatar[data-placeholder="0"] .chibi-avatar-initial { visibility: hidden; }
.chibi-avatar[data-chibi-state="focus"] { border-color: color-mix(in srgb, var(--accent) 76%, var(--line)); }
.chibi-avatar[data-chibi-state="respond"] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent); }
.chibi-avatar[data-chibi-state="celebrate"] { background: color-mix(in srgb, var(--warm) 21%, var(--ink)); }
.chibi-avatar[data-chibi-state="concern"] { border-color: color-mix(in srgb, var(--danger) 64%, var(--line)); }
.workbench-avatar.chibi-avatar[data-chibi-state="respond"],
.workbench-avatar.chibi-avatar[data-chibi-state="celebrate"] { animation: chibi-feedback 420ms ease-out; }
@keyframes chibi-feedback {
  0% { transform: translateY(0); }
  45% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
.workbench-companion-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.workbench-companion-copy small { color: var(--text-faint); font-size: 10px; }
.workbench-companion-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-command {
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
}
.icon-command:hover { border-color: var(--line-strong); color: var(--text); }

.workbench-focus { border-bottom: 1px solid var(--line); }
.workbench-focus-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.workbench-focus-meta span { color: var(--warm); font-size: 11px; font-weight: 650; }
.workbench-focus-meta small { color: var(--text-faint); font-size: 10px; }
.workbench-timer-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-top: 9px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--ink);
}
.workbench-timer-switch button {
  min-height: 28px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-faint);
  font-size: 10px;
}
.workbench-timer-switch button.is-active { background: var(--ink-raise); color: var(--warm); }
.workbench-timer-switch button:disabled { cursor: not-allowed; opacity: 0.55; }
.workbench-timer {
  display: block;
  margin: 10px 0 12px;
  font-size: 46px;
  font-weight: 350;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.workbench-primary {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--warm);
  border-radius: 6px;
  background: var(--warm);
  color: #22170a;
  font-size: 13px;
  font-weight: 700;
}
.workbench-primary.is-pausing { background: transparent; color: var(--warm); }
.workbench-primary:disabled { cursor: not-allowed; opacity: 0.48; }
.workbench-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.workbench-metrics > span { display: flex; flex-direction: column; gap: 3px; }
.workbench-metrics > span + span { padding-left: 14px; border-left: 1px solid var(--line); }
.workbench-metrics small { color: var(--text-faint); font-size: 10px; }
.workbench-metrics strong { font-size: 13px; font-variant-numeric: tabular-nums; }

.workbench-tasks { border-bottom: 1px solid var(--line); }
.workbench-tasks > header,
.workbench-review > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.workbench-tasks > header > div { display: flex; align-items: baseline; gap: 8px; }
.workbench-tasks h2,
.workbench-review h2 { margin: 0; font-size: 13px; }
#workbench-goal-progress { color: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.workbench-task-list { max-height: 176px; margin-top: 8px; overflow: auto; }
.workbench-task {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 48px;
  border-top: 1px solid rgba(42, 52, 57, 0.72);
}
.workbench-task:first-child { border-top: 0; }
.workbench-task > button {
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: transparent;
  color: #102019;
  font-size: 12px;
}
.workbench-task > button:hover:not(:disabled) { border-color: var(--warm); }
.workbench-task.is-done > button { border-color: var(--ok); background: var(--ok); }
.workbench-task > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.workbench-task strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.workbench-task small { color: var(--text-faint); font-size: 10px; }
.workbench-task.is-done strong { color: var(--text-dim); text-decoration: line-through; }
.workbench-task.is-contract { grid-template-columns: 42px minmax(0, 1fr); gap: 9px; }
.workbench-task.is-contract > .workbench-contract-avatar {
  display: block;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--ink-raise);
}
.workbench-task.is-contract > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.workbench-contract-countdown { color: var(--warm) !important; font-variant-numeric: tabular-nums; }
.workbench-empty { display: flex; flex-direction: column; gap: 3px; padding: 14px 0 5px; }
.workbench-empty strong { font-size: 12px; }
.workbench-empty span { color: var(--text-faint); font-size: 11px; }

.workbench-review { border-bottom: 1px solid var(--line); background: #131a1d; }
.workbench-review[hidden] { display: none; }
.workbench-review label { display: grid; gap: 5px; margin-top: 10px; color: var(--text-dim); font-size: 11px; }
.workbench-review input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--ink);
  color: var(--text);
  font: inherit;
}
.workbench-review .finish-command { width: 100%; min-height: 40px; margin-top: 11px; }
.workbench-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.workbench-actions button { min-height: 38px; border-radius: 5px; }

/* v1.4 赛训：沿用数据中心的冷静仪表风格，不做手游大厅式卡套。 */
.workbench-training {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: #101619;
}
.workbench-training-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.workbench-training-copy small { color: var(--text-faint); font-size: 10px; }
.workbench-training-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.workbench-training-copy span { overflow: hidden; color: var(--text-dim); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.workbench-training-actions { display: grid; grid-template-columns: 1fr; gap: 5px; }
.workbench-training-actions button { min-height: 30px; padding-inline: 9px; font-size: 10px; white-space: nowrap; }

.analytics-head-actions { display: flex; align-items: center; gap: 10px; }
.analytics-training-entry { min-height: 32px; white-space: nowrap; }
.diegetic-screen .analytics-training-entry { min-height: 26px; padding-inline: 8px; font-size: 9px; }

.training-workspace {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  color: var(--text);
}
.training-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.training-head h2 { margin: 3px 0 0; font-size: clamp(22px, 2vw, 30px); font-weight: 650; }
.training-domain-switch,
.training-tabs,
.hero-filters > div { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: #0d1214; }
.training-domain-switch button,
.training-tabs button,
.hero-filters > div button {
  min-height: 32px;
  padding: 6px 13px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.training-domain-switch button.is-active,
.training-tabs button.is-active,
.hero-filters > div button.is-active { background: #263033; color: var(--text); }
.training-tabs { align-self: flex-start; margin: 14px 0 18px; }
.training-loading { padding: 40px 0; color: var(--text-dim); text-align: center; }
.training-panel[hidden], .training-loading[hidden] { display: none; }

.training-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); }
.training-metrics > span { display: flex; min-height: 76px; flex-direction: column; justify-content: center; gap: 4px; padding: 13px 16px; }
.training-metrics > span + span { border-left: 1px solid var(--line); }
.training-metrics small { color: var(--text-faint); font-size: 10px; }
.training-metrics strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.training-roster-table { margin-top: 14px; border: 1px solid var(--line); }
.training-roster-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.15fr) minmax(100px, .7fr) 72px minmax(120px, .85fr) minmax(190px, 1.35fr) 92px;
  width: 100%;
  min-height: 66px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: inherit;
  text-align: left;
}
button.training-roster-row { cursor: pointer; }
button.training-roster-row:hover { background: rgba(255,255,255,.025); }
.training-roster-row.is-head { min-height: 38px; border-top: 0; color: var(--text-faint); font-size: 10px; }
.training-roster-person { display: flex; align-items: center; gap: 9px; }
.training-character-avatar { display: inline-grid; flex: 0 0 auto; place-items: center; overflow: hidden; }
.training-character-avatar .chibi-avatar { width: 100%; height: 100%; }
.training-character-avatar .chibi-avatar img { max-width: 100%; max-height: 100%; object-fit: contain; }
.training-roster-row > span:not(.training-roster-person) { display: flex; align-items: center; gap: 6px; }
.training-roster-row > span small { display: block; color: var(--text-faint); font-size: 10px; }
.training-mini-hero { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 4px; object-fit: cover; }
.training-top-heroes { display: flex; flex-wrap: wrap; gap: 4px; }
.training-top-heroes > span { display: inline-flex; align-items: center; gap: 3px; color: var(--text-dim); font-size: 10px; font-variant-numeric: tabular-nums; }
.training-status-chip { justify-self: start; padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-dim); font-size: 10px; }
.training-status-chip[data-mode="peak"], .training-status-chip[data-mode="busy"] { border-color: rgba(183,119,119,.45); color: #d69d9d; }
.training-status-chip[data-mode="five_stack"],
.training-status-chip[data-mode="team_ranked"],
.training-status-chip[data-mode="specialist"] { border-color: rgba(209,164,93,.48); color: var(--warm); }

.hero-archive-layout { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 18px; }
.hero-character-rail {
  display: flex;
  max-height: calc(100vh - 250px);
  flex-direction: column;
  gap: 4px;
  padding-right: 8px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.hero-character-rail button {
  display: flex;
  min-height: 66px;
  align-items: center;
  gap: 7px;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  width: 100%;
  min-width: 0;
}
.hero-character-rail button.is-active { border-color: var(--line-strong); background: #192124; color: var(--text); }
.hero-character-rail button span:last-child { min-width: 3em; font-size: 12px; white-space: nowrap; }
.hero-archive-main { min-width: 0; }
.hero-character-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  border: 1px solid var(--line);
}
.hero-character-summary > .training-focus-select { grid-column: 1 / -1; min-width: 0; }
.hero-character-summary h3 { margin: 2px 0 5px; font-size: 22px; }
.hero-character-summary > div > strong { color: var(--text-dim); font-size: 12px; }
.training-xp-track { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.training-xp-track i, .hero-power-track { position: relative; display: block; height: 4px; overflow: hidden; background: #273034; }
.training-xp-track i { width: min(260px, 100%); }
.training-xp-track b, .hero-power-track em { display: block; height: 100%; background: var(--warm); }
.training-xp-track small { color: var(--text-faint); font-size: 9px; white-space: nowrap; }
.training-focus-select { display: grid; gap: 6px; color: var(--text-faint); font-size: 10px; }
.training-focus-select select,
.hero-filters select,
.hero-filters input,
.match-filters select {
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #0c1113;
  color: var(--text);
}
.hero-filters { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.hero-filters input { min-width: 0; margin-left: auto; }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.hero-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); min-height: 106px; gap: 10px; padding: 10px; border: 1px solid var(--line); background: #111719; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hero-card:hover, .hero-card:focus-visible { border-color: var(--warm); background: #161d1f; }
.hero-card.is-unused { opacity: .64; }
.training-hero-portrait { width: 58px; height: 58px; border-radius: 5px; object-fit: cover; }
.hero-card > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.hero-card > div > strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.hero-card > div > small { overflow: hidden; color: var(--text-faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.hero-card > div > b { margin-top: 3px; font-size: 15px; font-variant-numeric: tabular-nums; }
.hero-card-labels { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.hero-card-labels span { padding: 2px 4px; border: 1px solid var(--line); border-radius: 2px; color: var(--warm); font-size: 8px; }
.hero-detail-panel { margin: 12px 0; padding: 12px 0; border-block: 1px solid var(--line-strong); }
.hero-detail-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero-detail-panel > header > div { display: grid; gap: 2px; }
.hero-detail-panel > header small { color: var(--text-faint); font-size: 9px; }
.hero-detail-panel > header strong { font-size: 17px; }
.hero-detail-panel > header button { width: 32px; height: 32px; border: 1px solid var(--line); background: transparent; color: var(--text-dim); font-size: 20px; cursor: pointer; }
.hero-source-summary { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.hero-source-summary > span { display: grid; min-width: 104px; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 10px; border-left: 2px solid var(--warm); background: #111719; }
.hero-source-summary small { grid-column: 1 / -1; color: var(--text-faint); font-size: 9px; }
.hero-source-summary strong { color: var(--warm); font-size: 15px; }
.hero-source-summary em { align-self: end; color: var(--text-dim); font-size: 9px; font-style: normal; }
.hero-growth-chart { display: flex; align-items: end; gap: 3px; height: 84px; margin-top: 12px; padding: 8px 4px 0; border-bottom: 1px solid var(--line); background: linear-gradient(to top, rgba(255,255,255,.025), transparent); }
.hero-growth-chart i { min-width: 3px; max-width: 12px; flex: 1; background: var(--warm); opacity: .76; }
.hero-growth-chart > span { margin: auto; color: var(--text-faint); font-size: 10px; }
.hero-history-list { display: grid; max-height: 230px; margin: 8px 0 0; padding: 0; overflow-y: auto; list-style: none; }
.hero-history-list li { display: grid; grid-template-columns: 112px minmax(100px, .8fr) minmax(150px, 1fr) 56px; align-items: center; gap: 8px; min-height: 34px; border-top: 1px solid var(--line); font-size: 10px; }
.hero-history-list time, .hero-history-list span { color: var(--text-dim); }
.hero-history-list b { color: var(--warm); text-align: right; }

.match-filters { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.match-filters label { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 11px; }
.training-match-list { display: grid; gap: 10px; }
.training-load-more {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #101619;
  color: var(--text-dim);
}
.training-load-more:hover,
.training-load-more:focus-visible { border-color: var(--warm); color: var(--warm); }
.training-match-card { border: 1px solid var(--line); background: #101619; }
.training-match-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.training-match-card > header div { display: flex; align-items: baseline; gap: 10px; }
.training-match-card > header small, .training-match-card time { color: var(--text-faint); font-size: 10px; }
.training-match-card.is-live { border-color: rgba(86, 139, 119, .48); }
.training-live-scoreboard {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr);
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: #0c1414;
  text-align: center;
}
.training-live-scoreboard > span { display: grid; gap: 2px; }
.training-live-scoreboard > span:first-child { text-align: right; }
.training-live-scoreboard > span:nth-child(3) { text-align: left; }
.training-live-scoreboard small { color: var(--text-faint); font-size: 9px; }
.training-live-scoreboard strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.training-live-scoreboard > b { display: flex; align-items: center; gap: 7px; color: #8fc8ac; font-size: 25px; font-variant-numeric: tabular-nums; }
.training-live-scoreboard > b i { color: var(--text-faint); font-size: 15px; font-style: normal; }
.training-live-scoreboard > p { grid-column: 1 / -1; margin: 0; color: var(--text-dim); font-size: 11px; }
.training-match-lineup { display: grid; }
.training-match-player { display: grid; grid-template-columns: 54px 42px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 84px; padding: 8px 12px; border-top: 1px solid var(--line); }
.training-match-player:first-child { border-top: 0; }
.training-match-hero { width: 42px; height: 42px; border-radius: 4px; object-fit: cover; }
.training-match-player-copy { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px 12px; }
.training-match-player-copy > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.training-mvp-badge { display: inline-block; margin-left: 5px; padding: 2px 4px; border: 1px solid rgba(222, 184, 107, .55); border-radius: 3px; color: #e7c57f; font-size: 8px; line-height: 1; vertical-align: 2px; }
.training-mvp-badge.is-loser { border-color: rgba(151, 171, 181, .4); color: #aebdc3; }
.training-match-player-copy > small { grid-column: 1; color: var(--text-dim); font-size: 10px; }
.training-player-numbers { grid-column: 2; grid-row: 1 / span 2; display: grid; min-width: 88px; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.training-player-numbers b { font-size: 14px; }
.training-player-numbers em { color: var(--text-faint); font-size: 9px; font-style: normal; }
.training-player-rating { grid-column: 3; grid-row: 1 / span 2; min-width: 42px; color: var(--warm); font-size: 19px; font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.training-match-detail { grid-column: 1 / -1; }
.training-equipment-row { grid-column: 1 / -1; display: flex; gap: 4px; min-height: 25px; margin-top: 2px; }
.training-equipment-row img { width: 25px; height: 25px; border: 1px solid var(--line); border-radius: 3px; object-fit: cover; }
.training-match-report { border-top: 1px solid var(--line); }
.training-match-report-toggle { width: 100%; padding: 10px 13px; border: 0; background: transparent; color: var(--text-dim); font-size: 11px; text-align: left; cursor: pointer; }
.training-match-report.is-open > .training-match-report-toggle { border-bottom: 1px solid var(--line); color: var(--text); }
.training-report-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.training-report-totals > span { display: grid; gap: 3px; padding: 10px 12px; border-left: 1px solid var(--line); }
.training-report-totals > span:first-child { border-left: 0; }
.training-report-totals small { color: var(--text-faint); font-size: 9px; }
.training-report-totals strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.training-report-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.training-report-map > span { display: grid; gap: 3px; min-width: 0; padding: 9px 12px; border-top: 1px solid var(--line); }
.training-report-map > span:nth-child(even) { border-left: 1px solid var(--line); }
.training-report-map small, .training-compact-lineup h4 { color: var(--text-faint); font-size: 9px; font-weight: 500; }
.training-report-map strong { overflow-wrap: anywhere; color: var(--text-dim); font-size: 10px; font-weight: 500; }
.training-compact-lineup { border-bottom: 1px solid var(--line); }
.training-compact-lineup h4 { margin: 0; padding: 9px 12px; border-bottom: 1px solid var(--line); text-transform: uppercase; }
.training-compact-lineup > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.training-compact-lineup > div > span { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; min-height: 56px; padding: 7px 9px; background: var(--panel); }
.training-compact-lineup > div > span strong { overflow: hidden; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.training-report-draft { border-bottom: 1px solid var(--line); }
.training-report-draft > h4 { margin: 0; padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--text-faint); font-size: 9px; font-weight: 600; }
.training-report-draft > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.training-report-draft > div > div { min-width: 0; padding: 9px 12px; }
.training-report-draft > div > div + div { border-left: 1px solid var(--line); }
.training-report-draft > div > div > strong { display: block; margin-bottom: 6px; font-size: 10px; }
.training-draft-bans { display: flex; gap: 5px; min-height: 30px; margin-bottom: 7px; }
.training-draft-hero { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 3px; object-fit: cover; }
.training-draft-hero.is-banned { filter: grayscale(1) brightness(.7); }
.training-report-draft ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.training-report-draft li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; }
.training-report-draft li span { min-width: 0; }
.training-report-draft li b, .training-report-draft li small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.training-report-draft li b { font-size: 10px; }
.training-report-draft li small { color: var(--text-faint); font-size: 9px; }
.hero-intelligence-summary { display: grid; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.hero-intelligence-summary > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.hero-intelligence-summary > div > span { display: grid; gap: 2px; min-width: 0; padding: 7px 8px; background: var(--panel); }
.hero-intelligence-summary small { color: var(--text-faint); font-size: 9px; }
.hero-intelligence-summary strong { overflow-wrap: anywhere; font-size: 10px; }
.hero-intelligence-summary > p { margin: 0; color: var(--text-dim); font-size: 10px; }
.hero-intelligence-summary > section { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hero-intelligence-summary > section > span { display: grid; gap: 3px; min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 4px; }
.hero-intelligence-summary > section small { overflow-wrap: anywhere; line-height: 1.45; }
.training-report-timeline { display: grid; max-height: 260px; margin: 0; padding: 5px 13px 10px; overflow-y: auto; list-style: none; }
.training-report-timeline li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; min-height: 30px; border-bottom: 1px solid var(--line); font-size: 10px; }
.training-report-timeline time { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.training-report-timeline span { color: var(--text-dim); }
.training-report-timeline b { text-align: right; font-variant-numeric: tabular-nums; }
.training-empty { grid-column: 1 / -1; padding: 42px 18px; border: 1px dashed var(--line); color: var(--text-dim); text-align: center; }
.training-empty p { margin: 6px 0 0; color: var(--text-faint); font-size: 11px; }

@media (max-width: 760px) {
  .library-toolbar { align-items: stretch; flex-direction: column; }
  .library-toolbar label { flex-basis: auto; }
  .workbench-training { padding-inline: 13px; }
  .training-head { align-items: center; }
  .training-domain-switch button, .training-tabs button { min-height: 38px; padding-inline: 12px; }
  .training-tabs { width: 100%; }
  .training-tabs button { flex: 1; }
  .training-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .training-metrics > span:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .training-metrics > span:nth-child(4) { border-top: 1px solid var(--line); }
  .training-roster-table { overflow-x: auto; }
  .training-roster-row { min-width: 850px; }
  .hero-archive-layout { display: block; }
  .hero-character-rail { max-height: none; flex-direction: row; margin-bottom: 10px; padding-bottom: 4px; overflow-x: auto; }
  .hero-character-rail button { width: auto; min-width: 88px; flex-direction: column; gap: 2px; }
  .hero-character-summary { grid-template-columns: auto minmax(0, 1fr); padding: 10px; }
  .hero-character-summary > .training-focus-select { grid-column: 1 / -1; }
  .hero-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-filters > div, .hero-filters input { grid-column: 1 / -1; width: 100%; margin: 0; }
  .hero-filters > div button { flex: 1; }
  .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .hero-card { grid-template-columns: 48px minmax(0, 1fr); min-height: 98px; padding: 8px; }
  .training-hero-portrait { width: 48px; height: 48px; }
  .training-match-player { grid-template-columns: 48px 38px minmax(0, 1fr); padding-inline: 8px; }
  .training-match-player-copy { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; }
  .training-player-numbers { grid-column: 2; grid-row: 1 / span 2; min-width: 72px; }
  .training-player-rating { grid-column: 2; grid-row: 3 / span 2; font-size: 16px; }
  .training-match-detail, .training-equipment-row { grid-column: 1 / -1; }
  .training-match-hero { width: 38px; height: 38px; }
  .training-match-card > header { align-items: flex-start; }
  .training-match-card > header div { align-items: flex-start; flex-direction: column; gap: 2px; }
  .training-live-scoreboard { gap: 8px; padding-inline: 10px; }
  .training-live-scoreboard > b { font-size: 21px; }
  .training-report-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .training-report-totals > span:nth-child(3) { border-top: 1px solid var(--line); border-left: 0; }
  .training-report-totals > span:nth-child(4) { border-top: 1px solid var(--line); }
  .training-compact-lineup > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .training-report-draft > div { grid-template-columns: 1fr; }
  .training-report-draft > div > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .hero-intelligence-summary > section { grid-template-columns: 1fr; }
  .hero-history-list li { grid-template-columns: minmax(95px, 1fr) 58px; padding: 6px 0; }
  .hero-history-list li time, .hero-history-list li span { grid-column: 1; }
  .hero-history-list li b { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 390px) {
  .workbench-training { grid-template-columns: minmax(0, 1fr) 88px; gap: 8px; }
  .workbench-training-actions button { padding-inline: 5px; font-size: 9px; }
  .analytics-head-actions { align-items: flex-end; flex-direction: column; }
  .hero-grid { gap: 5px; }
  .hero-card { grid-template-columns: 42px minmax(0, 1fr); gap: 7px; }
  .training-hero-portrait { width: 42px; height: 42px; }
}

.app-footer { justify-content: flex-end; min-height: 32px; padding: 5px 18px 8px; }
.app-footer #companion-state { margin-left: auto; }
.mobile-dock { display: none; }

/* ---------- V1.2 沉浸陪学 ---------- */

.immersive-focus {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 100dvh;
  overflow: hidden;
  background: #090c0e;
  color: var(--text);
  isolation: isolate;
}
.immersive-focus[hidden] { display: none; }
.immersive-room,
.immersive-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.immersive-room {
  background-color: #111719;
  background-position: center;
  background-size: cover;
  transition: filter 1.2s ease;
}
.immersive-room[data-placeholder="1"] {
  background: #111719;
}
.immersive-focus[data-daypart="dawn"] .immersive-room { filter: hue-rotate(-8deg) brightness(0.92) saturate(1.05); }
.immersive-focus[data-daypart="day"] .immersive-room { filter: none; }
.immersive-focus[data-daypart="dusk"] .immersive-room { filter: hue-rotate(-14deg) brightness(0.86) saturate(1.1); }
.immersive-focus[data-daypart="night"] .immersive-room { filter: hue-rotate(-24deg) brightness(0.58) saturate(0.88); }
.immersive-shade {
  z-index: -1;
  background: rgba(4, 7, 8, 0.42);
  box-shadow: inset 0 0 180px rgba(0, 0, 0, 0.48);
}
.immersive-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 28px;
}
.immersive-brand { display: flex; align-items: baseline; gap: 10px; }
.immersive-brand span { color: var(--warm); font-size: 11px; font-weight: 700; }
.immersive-brand strong { font-size: 15px; font-weight: 650; }
.immersive-header-actions { display: flex; align-items: center; gap: 8px; }
.immersive-icon-command {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(237, 241, 242, 0.28);
  border-radius: 50%;
  background: rgba(9, 12, 14, 0.64);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}
.immersive-icon-command:hover { border-color: var(--warm); color: var(--warm); }
.immersive-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 36vw);
  min-height: 0;
  padding: 2vh max(28px, 6vw) 18px;
  align-items: center;
  gap: 32px;
}
.immersive-focus-copy { min-width: 0; max-width: 720px; }
.immersive-state {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(113, 178, 148, 0.7);
  border-radius: 5px;
  background: rgba(9, 12, 14, 0.58);
  color: #a4d5be;
  font-size: 11px;
  font-weight: 700;
}
.immersive-focus[data-state="paused"] .immersive-state { border-color: rgba(239, 180, 95, 0.68); color: var(--warm); }
.immersive-target-label { margin: 28px 0 7px; color: var(--text-dim); font-size: 12px; }
.immersive-target {
  max-width: 18ch;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 34px;
  font-weight: 560;
  line-height: 1.3;
  text-wrap: balance;
}
.immersive-target-meta { margin: 8px 0 0; color: var(--text-dim); font-size: 12px; }
.immersive-timer {
  display: block;
  margin-top: 34px;
  font-size: 76px;
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.immersive-elapsed { margin: 10px 0 0; color: var(--text-dim); font-size: 12px; }
.immersive-companion {
  position: fixed;
  inset: 0;
  z-index: 2;
  min-width: 0;
  pointer-events: none;
}
.immersive-character {
  position: absolute;
  z-index: 1;
  right: clamp(18px, 4.5vw, 86px);
  bottom: max(-18px, -1.5vh);
  width: clamp(300px, 27vw, 430px);
  aspect-ratio: 1;
  margin-left: auto;
  overflow: visible;
  background: transparent;
}
.immersive-character::before {
  position: absolute;
  z-index: 0;
  right: 14%;
  bottom: 1%;
  width: 39%;
  height: 8%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.56);
  content: "";
  filter: blur(11px);
}
.immersive-character::after {
  position: absolute;
  z-index: 2;
  right: 14%;
  bottom: 40%;
  width: 36%;
  height: 7%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  content: "";
  filter: blur(8px);
}
.immersive-character.chibi-avatar { background: transparent; }
.immersive-character .chibi-avatar-image {
  position: relative;
  z-index: 1;
  object-fit: contain;
  object-position: center bottom;
  transition: filter 800ms ease;
}
.immersive-focus[data-daypart="dawn"] .immersive-character .chibi-avatar-image { filter: brightness(0.76) saturate(0.92) contrast(0.96); }
.immersive-focus[data-daypart="day"] .immersive-character .chibi-avatar-image { filter: brightness(0.88) saturate(0.96) contrast(0.98); }
.immersive-focus[data-daypart="dusk"] .immersive-character .chibi-avatar-image { filter: brightness(0.68) saturate(0.86) contrast(0.95) sepia(0.06); }
.immersive-focus[data-daypart="night"] .immersive-character .chibi-avatar-image { filter: brightness(0.58) saturate(0.82) contrast(0.94); }
.immersive-seat-foreground {
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.immersive-seat-foreground[hidden] { display: none; }
.immersive-focus[data-daypart="dawn"] .immersive-seat-foreground { filter: hue-rotate(-8deg) brightness(0.53) saturate(1.05); }
.immersive-focus[data-daypart="day"] .immersive-seat-foreground { filter: brightness(0.58); }
.immersive-focus[data-daypart="dusk"] .immersive-seat-foreground { filter: hue-rotate(-14deg) brightness(0.5) saturate(1.1); }
.immersive-focus[data-daypart="night"] .immersive-seat-foreground { filter: hue-rotate(-24deg) brightness(0.34) saturate(0.88); }
.immersive-companion-copy {
  position: fixed;
  z-index: 3;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(88px, calc(70px + env(safe-area-inset-bottom)));
  width: min(310px, calc(100vw - 36px));
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid rgba(237, 241, 242, 0.16);
  border-radius: 6px;
  background: rgba(9, 12, 14, 0.78);
  text-align: right;
  backdrop-filter: blur(8px);
}
.immersive-companion-copy strong { font-size: 14px; }
.immersive-companion-copy span { min-width: 0; overflow-wrap: anywhere; color: var(--text-dim); font-size: 11px; }
.immersive-companion.is-empty { align-self: center; }
.immersive-companion.is-empty .immersive-companion-copy { justify-content: center; text-align: center; }
.immersive-controls {
  display: grid;
  grid-template-columns: minmax(128px, 1.4fr) repeat(2, minmax(92px, 1fr));
  gap: 8px;
  width: min(460px, calc(100% - 32px));
  margin: 0 auto max(18px, env(safe-area-inset-bottom));
  padding: 8px;
  border: 1px solid rgba(237, 241, 242, 0.2);
  border-radius: 8px;
  background: rgba(9, 12, 14, 0.9);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(12px);
}
.immersive-controls button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(237, 241, 242, 0.18);
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  white-space: nowrap;
}
.immersive-controls button:hover { border-color: rgba(237, 241, 242, 0.42); color: var(--text); }
.immersive-controls .immersive-primary { border-color: var(--warm); background: var(--warm); color: #22170a; font-weight: 700; }
.immersive-controls .immersive-primary.is-pausing { background: transparent; color: var(--warm); }

@media (max-width: 859px) {
  .immersive-header { padding: 14px 14px 8px; }
  .immersive-brand { align-items: flex-start; flex-direction: column; gap: 2px; }
  .immersive-main {
    position: relative;
    display: block;
    padding: 5vh 18px 112px;
  }
  .immersive-focus-copy { position: relative; z-index: 2; max-width: 78%; }
  .immersive-target-label { margin-top: 22px; }
  .immersive-target { max-width: 13ch; font-size: 26px; line-height: 1.32; }
  .immersive-timer { margin-top: 26px; font-size: 58px; }
  .immersive-companion {
    position: fixed;
    inset: 0;
  }
  .immersive-character { right: -18px; bottom: 132px; width: 270px; }
  .immersive-character::before,
  .immersive-character::after { display: none; }
  .immersive-companion-copy { right: 12px; bottom: 88px; align-items: flex-end; flex-direction: column; gap: 2px; }
  .immersive-companion.is-empty { inset: 0; width: auto; }
  .immersive-controls {
    width: calc(100% - 24px);
    grid-template-columns: minmax(112px, 1.35fr) repeat(2, minmax(76px, 1fr));
    margin-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .immersive-controls button { padding-inline: 8px; }
}

@media (max-width: 380px), (max-width: 859px) and (max-height: 720px) {
  .immersive-main { padding-top: 2vh; }
  .immersive-target-label { margin-top: 16px; }
  .immersive-target { font-size: 23px; }
  .immersive-timer { margin-top: 20px; font-size: 52px; }
  .immersive-character { right: -16px; bottom: 124px; width: 240px; }
  .immersive-companion-copy span { max-width: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  .immersive-room { transition: none; }
  .immersive-character .chibi-avatar-image { transition: none; }
}

@media (max-width: 1100px) and (min-width: 860px) {
  .workspace-layout { grid-template-columns: minmax(0, 1fr) 320px; padding-inline: 12px; }
  .scene-stage { max-height: calc(100dvh - 148px); }
  .workbench-head,
  .workbench-companion,
  .workbench-focus,
  .workbench-tasks,
  .workbench-review,
  .workbench-actions { padding-inline: 13px; }
  .workbench-timer { font-size: 40px; }
}

@media (max-width: 859px) {
  .app-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 9px 12px;
  }
  .brand { min-width: 0; }
  .brand-copy small,
  .brand-version { display: none; }
  .header-center { display: none; }
  .scene-nav { width: 100%; padding: 2px; }
  .scene-nav button { min-height: 44px; padding: 6px 8px; }

  .workspace-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px 12px;
  }
  .today-workbench { order: 1; width: 100%; max-height: none; }
  .scene-region { order: 2; width: 100%; }
  .workbench-head,
  .workbench-companion,
  .workbench-focus,
  .workbench-tasks,
  .workbench-review,
  .workbench-actions { padding: 12px 13px; }
  .workbench-head h1 { font-size: 16px; }
  .workbench-timer { margin-block: 8px 10px; font-size: 40px; }
  .workbench-task-list { max-height: 136px; }
  .workbench-focus-meta small { max-width: 58%; text-align: right; }
  .workbench-actions { grid-template-columns: minmax(0, 1fr) auto; }

  .scene-shell[data-viewport="mobile"] .scene-stage { max-height: 48vh; border-radius: 8px; }
  .scene-thumbs { margin-top: 8px; }
  .scene-thumb { border-radius: 6px; }
  .app-footer { display: none; }
  .app-shell { padding-bottom: 58px; }
  .mobile-dock {
    position: fixed;
    z-index: 34;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 54px;
    padding: 4px 8px max(4px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(9, 12, 14, 0.96);
    backdrop-filter: blur(14px);
  }
  .mobile-dock button {
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-faint);
    font-size: 11px;
  }
  .mobile-dock button[aria-current="page"] { color: var(--warm); background: var(--ink-raise); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-action { min-height: 106px; flex-direction: row; align-items: center; padding: 10px 48px 10px 10px; }
  .contact-avatar { width: 68px; height: 68px; }
  .contact-current-hero { width: 40px; height: 40px; flex-basis: 40px; }
  .contact-badge { margin-left: auto; }
  .contact-detail-panel { grid-template-columns: 64px minmax(0, 1fr) 30px; }
  .contact-detail-avatar { width: 64px; height: 64px; }
}

@media (max-width: 859px) {
  .contract-form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .contract-title-field { grid-column: 1 / -1; }
  .contract-form > .primary-command { width: 100%; }
  .contract-offer,
  .contract-assignment { grid-template-columns: 52px minmax(0, 1fr); }
  .contract-offer > button,
  .contract-assignment > button { grid-column: 1 / -1; width: 100%; }
  .task-row-actions,
  .goal-controls { justify-content: flex-start; }
  .roster-row { grid-template-columns: 54px minmax(0, 1fr); }
  .roster-row .goal-controls { grid-column: 1 / -1; }
  .material-preview-card { grid-template-columns: 50px minmax(0, 1fr); padding: 13px; }
  .material-preview-icon { width: 50px; height: 60px; }
}

@media (max-width: 370px) {
  .brand-copy strong { font-size: 14px; }
  .brand-copy small { font-size: 10px; }
  .workbench-companion { grid-template-columns: 50px minmax(0, 1fr) auto; }
  .workbench-avatar { width: 50px; height: 50px; }
  .workbench-timer { font-size: 36px; }
}

/* ---------- 会议室 PDF 阅读器 ---------- */

.pdf-reader-screen { gap: 10px; padding: 14px; overflow: hidden; background: #111719; }
.pdf-reader-toolbar {
  flex: 0 0 auto;
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.pdf-reader-title { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pdf-reader-title small { color: var(--text-faint); font-size: 9px; }
.pdf-reader-title strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.pdf-page-controls,
.pdf-zoom-controls,
.pdf-reader-actions { display: flex; align-items: center; gap: 4px; }
.pdf-page-controls button,
.pdf-zoom-controls button,
.pdf-reader-actions button,
.material-library-head button {
  min-width: 34px;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--text-dim);
}
.pdf-page-controls button:hover:not(:disabled),
.pdf-zoom-controls button:hover:not(:disabled),
.pdf-reader-actions button:hover:not(:disabled),
.material-library-head button:hover { border-color: var(--line-strong); color: var(--text); }
.pdf-zoom-controls button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.pdf-reader-actions [data-pdf-action="close"] { width: 34px; padding: 0; font-size: 17px; }
.pdf-page-actions {
  flex: 0 0 auto;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.pdf-page-actions > span { margin-right: auto; color: var(--text-faint); font-size: 10px; }
.pdf-page-actions b { color: var(--text-dim); font-weight: 600; }
.pdf-page-actions button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--text-faint);
  font-size: 11px;
}
.pdf-page-actions button[aria-pressed="true"] { border-color: var(--accent); background: rgba(239, 180, 95, 0.09); color: var(--accent); }
.pdf-page-actions button:disabled { opacity: 0.45; }
.pdf-page-controls button:disabled { cursor: default; opacity: 0.35; }
.pdf-page-controls label { display: flex; align-items: center; gap: 5px; color: var(--text-faint); font-size: 11px; }
.pdf-page-controls input {
  width: 50px;
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--ink);
  color: var(--text);
  text-align: center;
}
.pdf-canvas-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 300px;
  overflow: auto;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 14px;
  background: #080b0d;
  scrollbar-gutter: stable;
}
.pdf-reader-screen[data-fit-mode="page"] .pdf-canvas-wrap { align-items: center; }
.pdf-reading-area {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 144px;
  gap: 8px;
}
.pdf-reading-area .pdf-canvas-wrap { min-width: 0; min-height: 0; }
.pdf-companion-rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 8px;
  border-left: 1px solid var(--line);
}
.pdf-companion-rail[hidden] { display: none; }
.pdf-companion-avatar {
  width: 124px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.pdf-companion-rail button {
  min-width: 44px;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--text-faint);
  font-size: 10px;
}
.pdf-reader-screen.is-companion-hidden .pdf-reading-area { grid-template-columns: minmax(0, 1fr) 54px; }
.pdf-reader-screen.is-companion-hidden .pdf-companion-avatar { display: none; }
.pdf-canvas { display: block; max-width: none; background: white; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.42); }
.pdf-reader-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #0c1113;
  color: var(--text-faint);
  text-align: center;
}
.pdf-reader-state[hidden] { display: none; }
.pdf-reader-state[data-kind="error"] { color: var(--danger); }

.material-library-screen { gap: 12px; padding: 16px; background: #121719; overflow: hidden; }
.material-library-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.material-library-head > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.material-library-head small { color: var(--text-faint); font-size: 9px; }
.material-library-head strong { font-size: 15px; }
.material-library-actions { min-width: 0; display: flex; align-items: center; gap: 6px; }
.material-library-head .material-import-button { border-color: rgba(239, 180, 95, 0.48); color: var(--accent); }
.material-library-head button:disabled { cursor: default; opacity: 0.55; }
.material-list { min-height: 0; display: grid; align-content: start; gap: 6px; overflow: auto; }
.material-list[data-loading="1"] { opacity: 0.55; }
.material-row {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  text-align: left;
}
.material-row:hover,
.material-row.is-active { border-color: rgba(239, 180, 95, 0.55); background: rgba(239, 180, 95, 0.07); }
.material-file-mark { color: var(--danger); font: 700 10px ui-monospace, monospace; }
.material-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.material-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.material-copy small { color: var(--text-faint); font-size: 9px; }
.material-open { color: var(--text-faint); }
.material-empty { min-height: 160px; display: grid; place-content: center; gap: 4px; text-align: center; }
.material-empty strong { font-size: 13px; }
.material-empty span { color: var(--text-faint); font-size: 11px; }
.material-empty.is-error strong { color: var(--danger); }

.screen-focus[data-route="reader"] { display: block; padding: 0; }
.screen-focus[data-route="reader"] .screen-focus-backdrop { display: none; }
.screen-focus[data-route="reader"] .screen-focus-panel {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  border: 0;
  border-radius: 0;
}
.screen-focus[data-route="reader"] .screen-focus-panel > header,
.screen-focus[data-route="reader"] .screen-focus-panel > footer { display: none; }
.screen-focus[data-route="reader"] .screen-focus-body { min-height: 0; overflow: hidden; padding: 0; }
.screen-focus[data-route="reader"] .pdf-reader-screen { height: 100%; padding: 12px 16px 16px; }
html:fullscreen .screen-focus[data-route="reader"] {
  width: 100%;
  height: 100%;
  padding: 0;
  background: #111719;
}
html:fullscreen .screen-focus[data-route="reader"] .pdf-reader-screen {
  width: 100%;
  height: 100%;
  padding: 12px 16px 16px;
  background: #111719;
}
.pdf-reader-screen.is-controls-idle .pdf-reader-toolbar { opacity: 0.28; }
.pdf-reader-toolbar { transition: opacity 160ms ease; }
.screen-focus[data-route="material-library"] .screen-focus-panel { height: min(78vh, 760px); }
.screen-focus[data-route="material-library"] .screen-focus-body { min-height: 0; overflow: hidden; }
.screen-focus[data-route="material-library"] .material-library-screen { height: 100%; }

@media (max-width: 859px) {
  .pdf-reader-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding-bottom: 7px;
  }
  .pdf-reader-title { grid-column: 1; }
  .pdf-reader-actions { grid-column: 2; }
  .pdf-page-controls { grid-column: 1; justify-self: start; }
  .pdf-zoom-controls { grid-column: 2; justify-self: end; }
  .pdf-page-controls button,
  .pdf-zoom-controls button,
  .pdf-reader-actions button { min-width: 44px; min-height: 44px; }
  .pdf-page-controls input { min-height: 44px; }
  .pdf-page-actions { min-height: 44px; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .pdf-page-actions::-webkit-scrollbar { display: none; }
  .pdf-page-actions > span { display: none; }
  .pdf-page-actions button { min-width: max-content; min-height: 44px; }
  .pdf-reading-area { display: flex; flex-direction: column; gap: 6px; }
  .pdf-reading-area .pdf-canvas-wrap { order: 2; flex: 1 1 auto; }
  .pdf-companion-rail {
    order: 1;
    min-height: 52px;
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-end;
    padding: 3px 0;
    border: 0;
  }
  .pdf-companion-avatar { width: 84px; }
  .pdf-companion-rail button { min-height: 44px; }
  .pdf-reader-screen.is-companion-hidden .pdf-companion-rail { min-height: 44px; }
  .pdf-canvas-wrap { min-height: 0; padding: 8px; }
  .screen-focus[data-route="reader"] .screen-focus-panel,
  .screen-focus[data-route="material-library"] .screen-focus-panel { height: 100%; }
  .screen-focus[data-route="reader"] .pdf-reader-screen { padding: 10px 12px 12px; }
  .pdf-reader-screen.is-controls-idle .pdf-reader-toolbar { opacity: 1; }
  .pdf-reader-actions [data-pdf-action="library"] { min-width: 54px; padding-inline: 6px; font-size: 11px; }
  .material-library-screen { padding: 14px 12px; }
  .material-library-head { gap: 6px; }
  .material-library-head button { min-height: 44px; padding-inline: 8px; }
  .material-library-actions { gap: 4px; }
}

@media (max-width: 470px) {
  .pdf-reader-title small { display: none; }
  .pdf-reader-title strong { font-size: 12px; }
  .pdf-zoom-controls [data-pdf-action="zoom-out"],
  .pdf-zoom-controls [data-pdf-action="zoom-in"] { display: none; }
  .pdf-page-controls input { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .pdf-reader-toolbar { transition: none; }
  .workbench-avatar.chibi-avatar { animation: none; }
}

/* ---------- v1.1 云栖生活动态 ---------- */
.social-wall { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 20px; }
.social-wall[hidden] { display: none; }
.social-wall-backdrop { position: absolute; inset: 0; background: rgba(6, 9, 11, 0.82); backdrop-filter: blur(4px); }
.social-wall-panel {
  position: relative; width: min(760px, 100%); height: min(820px, 92vh);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden;
  border: 1px solid var(--line); border-radius: 8px; background: #101518; box-shadow: var(--shadow);
}
.social-wall-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 13px; border-bottom: 1px solid var(--line); }
.social-wall-head h2 { margin: 2px 0 0; font-size: 18px; }
.social-wall-head-actions { display: flex; align-items: center; gap: 10px; }
.social-wall-pool { color: var(--text-faint); font-size: 10px; }
.social-wall-head-actions button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--text-dim); font-size: 18px; }
.social-wall-filters { display: flex; gap: 4px; padding: 8px 18px; border-bottom: 1px solid var(--line); }
.social-wall-filters button,
.social-post-actions button { min-height: 32px; padding: 5px 10px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--text-faint); font-size: 11px; }
.social-wall-filters button[aria-selected="true"],
.social-post-actions button[aria-pressed="true"] { border-color: var(--line-strong); color: var(--warm); }
.social-wall-feed { min-height: 0; overflow: auto; padding: 0 18px 24px; scrollbar-gutter: stable; }
.social-post { padding: 18px 0; border-bottom: 1px solid var(--line); }
.social-post > header { display: flex; align-items: center; gap: 12px; }
.social-post-avatar { flex: 0 0 auto; width: 84px; height: 84px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 7px; }
.social-post-who { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.social-post-who strong { font-size: 14px; }
.social-post-who small { color: var(--text-faint); font-size: 10px; }
.social-post-content { margin: 12px 0; color: var(--text); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.social-comments { display: grid; gap: 7px; padding-left: 96px; }
.social-comment { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 8px; }
.social-comment-avatar { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 5px; }
.social-comment p { min-width: 0; margin: 0; padding-top: 2px; color: var(--text-dim); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.social-comment p strong { display: block; margin-bottom: 1px; color: var(--text); font-size: 11px; }
.social-comment[data-relationship="partner"] p strong::after { content: " · 伴侣"; color: var(--warm); font-weight: 500; }
.social-user-marker { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--text-dim); font-size: 11px; }
.social-post-actions { display: flex; gap: 3px; margin: 10px 0 8px 96px; }
.social-reply-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-left: 96px; }
.social-reply-form input { min-width: 0; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--ink); color: var(--text); font: inherit; }
.social-reply-form button { min-width: 56px; border: 1px solid var(--line-strong); border-radius: 5px; background: transparent; color: var(--text); }
.social-wall-empty { min-height: 260px; display: grid; place-content: center; gap: 5px; text-align: center; }
.social-wall-empty strong { font-size: 14px; }
.social-wall-empty span { color: var(--text-faint); font-size: 11px; }

@media (max-width: 859px) {
  .social-wall { padding: 0; place-items: stretch; }
  .social-wall-panel { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .social-wall-head { padding: 13px 14px 11px; }
  .social-wall-pool { display: none; }
  .social-wall-filters { padding-inline: 14px; }
  .social-wall-feed { padding-inline: 14px; }
  .social-post-avatar { width: 76px; height: 76px; }
  .social-comments { padding-left: 0; }
  .social-post-actions, .social-reply-form { margin-left: 0; }
}

/* ---------- 活动矩阵调试页 ---------- */
.activity-debug-body { min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); }
.activity-debug-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 40px; }
.activity-debug-shell > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.activity-debug-shell h1 { margin: 3px 0 0; font-size: 20px; }
.activity-debug-shell output { color: var(--text-faint); font-size: 11px; text-align: right; }
.activity-debug-controls { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)) 42px 42px; gap: 8px; padding: 14px 0; }
.activity-debug-controls label { display: grid; gap: 4px; color: var(--text-faint); font-size: 10px; }
.activity-debug-controls input,
.activity-debug-controls button { min-height: 38px; border: 1px solid var(--line); border-radius: 4px; background: var(--ink); color: var(--text); padding: 7px 9px; }
.activity-debug-table-wrap { overflow: auto; border: 1px solid var(--line); }
.activity-debug-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.activity-debug-table th,
.activity-debug-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.activity-debug-table th { position: sticky; top: 0; background: var(--ink-raise); color: var(--text-faint); font-weight: 600; }
.activity-debug-table tr[data-presence="asleep"] { opacity: 0.55; }
.activity-debug-table td:nth-child(4) { min-width: 220px; }
@media (max-width: 720px) {
  .activity-debug-controls { grid-template-columns: repeat(2, minmax(0, 1fr)) 42px 42px; }
  .activity-debug-shell > header { align-items: flex-start; flex-direction: column; }
  .activity-debug-shell output { text-align: left; }
}

/* ---------- v1.5 沉浸空间与统一终端 ---------- */

.app-header {
  min-height: 52px;
  padding: 8px 18px;
  border-bottom-color: #24292b;
  background: rgba(10, 12, 13, 0.96);
}
.brand-seat { background: #d9a957; }
.header-center { margin-left: auto; }

.workspace-layout {
  max-width: 1920px;
  grid-template-columns: minmax(0, 1fr) clamp(306px, 18vw, 348px);
  gap: 16px;
  padding: 12px 16px 16px;
}
.scene-stage {
  border-color: #282e30;
  border-radius: 6px;
  background: #080a0b;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}
.scene-toolbar,
.scene-thumbs { display: none !important; }

.yunqi-terminal {
  position: sticky;
  top: 12px;
  width: 100%;
  max-height: calc(100dvh - 24px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  border: 6px solid #25292b;
  border-radius: 28px;
  background: #0c0f10;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.5), inset 0 0 0 1px #050607;
  scrollbar-width: thin;
}
.yunqi-terminal::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 5px;
  left: 50%;
  display: block;
  width: 62px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: #34393b;
}
.yunqi-terminal .workbench-head {
  min-height: 64px;
  align-items: center;
  padding: 18px 15px 10px;
  border-bottom: 0;
  background: #101415;
}
.yunqi-terminal .workbench-head h1 { font-size: 17px; }
.yunqi-terminal .workbench-status {
  min-height: 24px;
  border: 0;
  background: #1b2022;
}
.terminal-content {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.terminal-doors {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 8px 12px 12px;
  border-bottom: 1px solid var(--line);
  background: #101415;
}
.terminal-doors button {
  min-width: 0;
  min-height: 72px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 6px 2px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text-faint);
  font-size: 10px;
}
.terminal-doors button i {
  position: relative;
  width: 27px;
  height: 38px;
  border: 1px solid #596266;
  border-bottom-width: 3px;
  background: #171c1e;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.terminal-doors button i::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 18px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #7e8a8f;
}
.terminal-doors button:hover i,
.terminal-doors button:focus-visible i { transform: perspective(60px) rotateY(-12deg); border-color: #9ba6a9; }
.terminal-doors button.is-active { color: var(--warm); border-color: rgba(239, 180, 95, 0.28); background: rgba(239, 180, 95, 0.06); }
.terminal-doors button.is-active i { border-color: var(--warm); background: #252117; transform: perspective(60px) rotateY(-18deg); }
.terminal-doors button.is-active i::after { background: var(--warm); }

.yunqi-terminal .workbench-companion,
.yunqi-terminal .workbench-focus,
.yunqi-terminal .workbench-training,
.yunqi-terminal .workbench-tasks,
.yunqi-terminal .workbench-review,
.yunqi-terminal .workbench-actions { padding: 12px 14px; }
.yunqi-terminal .workbench-companion { grid-template-columns: 54px minmax(0, 1fr) auto; }
.yunqi-terminal .workbench-avatar { width: 54px; height: 54px; }
.yunqi-terminal .workbench-focus { background: #0f1213; }
.yunqi-terminal .workbench-timer { margin: 8px 0 10px; font-size: 39px; }
.yunqi-terminal .workbench-primary { min-height: 40px; }
.yunqi-terminal .workbench-metrics { margin-top: 10px; }
.yunqi-terminal .workbench-task-list { max-height: 122px; }
.yunqi-terminal .workbench-actions { grid-template-columns: minmax(0, 1fr) auto; }

.workbench-training { grid-template-columns: minmax(0, 1fr) auto; }
.five-stack-lineup {
  grid-column: 1 / -1;
  display: grid;
  gap: 0;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}
.five-stack-lineup[hidden] { display: none; }
.five-stack-player {
  display: grid;
  grid-template-columns: 38px 34px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 49px;
  border-bottom: 1px solid rgba(42, 52, 57, 0.72);
}
.five-stack-player .training-character-avatar { width: 38px !important; height: 38px !important; }
.five-stack-hero { width: 34px; height: 34px; border-radius: 4px; object-fit: cover; }
.five-stack-player > span { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.five-stack-player small { color: var(--text-faint); font-size: 9px; }
.five-stack-player strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.terminal-apps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 6px;
  padding: 14px 12px 18px;
  border-top: 1px solid var(--line);
  background: #0c0f10;
}
.terminal-apps button,
.phone-home-apps button {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 10px;
}
.terminal-apps i,
.phone-home-apps i {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #4b5559;
  border-radius: 7px;
  background: #1a2022;
  color: #d9e0e2;
  font-style: normal;
  font-size: 15px;
}
.terminal-apps button:hover i,
.terminal-apps button:focus-visible i,
.phone-home-apps button:hover i,
.phone-home-apps button:focus-visible i { border-color: var(--warm); color: var(--warm); }
[data-terminal-icon="contacts"] i::before,
[data-app-icon="contacts"]::before { content: "◎"; }
[data-terminal-icon="messages"] i::before,
[data-app-icon="messages"]::before { content: "···"; transform: translateY(-2px); }
[data-terminal-icon="training"] i::before,
[data-app-icon="training"]::before { content: "V"; font-size: 13px; font-weight: 700; }
[data-terminal-icon="wall"] i::before,
[data-app-icon="wall"]::before { content: "◫"; }
[data-terminal-icon="screen"] i::before { content: "▣"; }
[data-terminal-icon="panel"] i::before { content: "▤"; }
[data-terminal-icon="stats"] i::before { content: "↗"; }
[data-terminal-icon="settings"] i::before,
[data-app-icon="settings"]::before { content: "⚙"; }
[data-app-icon="bp"]::before { content: "✓"; }
[data-app-icon="analytics"]::before { content: "▥"; }
[data-app-icon="meeting"]::before { content: "▤"; }
.terminal-home-indicator { width: 82px; height: 4px; margin: 0 auto 9px; border-radius: 4px; background: #394043; }

.phone-frame { width: min(410px, calc(100vw - 24px)); border: 6px solid #25292b; border-radius: 28px; background: #0c0f10; }
.phone-header { padding: 14px 15px 10px; background: #101415; }
.phone-tabs { overflow-x: auto; scrollbar-width: none; }
.phone-tab { flex: 0 0 64px; }
.phone-home-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.phone-contact {
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}
.phone-contact-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.phone-contact-invite {
  min-width: 48px;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  color: var(--warm);
  font-size: 10px;
}
.phone-contact-invite:disabled { color: var(--text-faint); cursor: default; opacity: 0.6; }
.phone-contact-dismiss { align-self: flex-end; min-height: 32px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--text-dim); font-size: 10px; }
.phone-about b { color: var(--warm); font-size: 11px; font-weight: 600; }

.training-focus-select { grid-template-columns: 106px minmax(150px, 1fr) auto; align-items: end; }
.training-focus-select > span,
.training-focus-select > small { grid-column: 1 / -1; }
.training-focus-select > small { margin-top: -4px; color: var(--text-faint); font-size: 9px; }
.training-focus-select select,
.training-focus-select button {
  min-width: 0;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--ink);
  color: var(--text);
}
.training-focus-select button { color: var(--warm); white-space: nowrap; }
.training-focus-select button:disabled { color: var(--text-faint); opacity: 0.7; }

@media (max-width: 1100px) and (min-width: 860px) {
  .workspace-layout { grid-template-columns: minmax(0, 1fr) 300px; padding-inline: 10px; }
  .terminal-apps { gap-inline: 3px; }
  .terminal-apps i { width: 31px; height: 31px; }
}

@media (max-width: 859px) {
  .app-header { position: relative; min-height: 48px; display: flex; padding: 7px 11px; }
  .header-center { display: none; }
  .workspace-layout { display: flex; gap: 12px; padding: 8px 0 18px; }
  .scene-region { order: 1; width: 100%; padding: 0 8px; }
  .scene-shell[data-viewport="mobile"] .scene-stage { max-height: none; border-radius: 5px; }
  .yunqi-terminal {
    position: relative;
    top: auto;
    order: 2;
    width: 100%;
    max-height: none;
    display: block;
    border-width: 1px 0 0;
    border-radius: 0;
    box-shadow: none;
  }
  .yunqi-terminal::before { display: none; }
  .terminal-content { overflow: visible; }
  .terminal-doors { padding-inline: 10px; }
  .terminal-doors button { min-height: 68px; }
  .yunqi-terminal .workbench-head,
  .yunqi-terminal .workbench-companion,
  .yunqi-terminal .workbench-focus,
  .yunqi-terminal .workbench-training,
  .yunqi-terminal .workbench-tasks,
  .yunqi-terminal .workbench-review,
  .yunqi-terminal .workbench-actions { padding-inline: 14px; }
  .phone-overlay { align-items: stretch; }
  .phone-frame { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .training-focus-select { grid-template-columns: minmax(0, 1fr); }
  .training-focus-select > span,
  .training-focus-select > small { grid-column: 1; }
}

@media (max-width: 370px) {
  .terminal-apps { gap-inline: 2px; }
  .terminal-apps i { width: 31px; height: 31px; }
  .terminal-doors button span { font-size: 9px; }
  .phone-home-apps { gap-inline: 3px; }
}
.scene-region.is-map-open #scene-root { display: none; }
.base-map { position:relative; min-height:calc(100dvh - 96px); overflow:hidden; border:1px solid #4d5d57; border-radius:8px; background-image:linear-gradient(180deg,rgba(5,16,14,.05) 35%,rgba(5,16,14,.38)),url('/assets/v03/maps/base-map.master.desktop.v2.png'); background-size:cover; background-position:center; box-shadow:inset 0 0 110px rgba(0,0,0,.32),0 18px 42px rgba(0,0,0,.42); }
.base-map[data-daypart="night"],.base-map[data-daypart="evening"] { background-image:linear-gradient(180deg,rgba(3,8,15,.46),rgba(4,9,14,.76)),url('/assets/v03/maps/base-map.master.desktop.v2.png'); }
.base-map::before { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(4,10,9,.22),transparent 28%,transparent 72%,rgba(4,10,9,.26)),linear-gradient(0deg,rgba(4,11,9,.25),transparent 33%); }
.base-map-plan { display:none; }
.base-map-sky { position:absolute; z-index:3; left:24px; top:22px; display:grid; gap:3px; }
.base-map-sky strong { color:#edf3e9; font-size:28px; letter-spacing:.12em; }
.base-map-water { display:none; }
.base-map-water::after { content:""; position:absolute; left:-45%; top:48%; width:190%; aspect-ratio:2/1; border-radius:50%; background:#386f70; box-shadow:inset 0 0 25px rgba(4,27,29,.5); }
.base-map-bridge { position:absolute; z-index:2; left:39%; top:33%; width:24%; padding:5px; transform:rotate(-4deg); border-block:3px double #b98448; color:#d8ad70; background:#563a23; text-align:center; font-size:10px; letter-spacing:.18em; }
.base-map-place { position:absolute; z-index:4; left:var(--x); top:var(--y); display:grid; min-width:105px; transform:translate(-50%,-50%); border:0; color:#d7e3dd; background:transparent; text-align:left; cursor:default; text-shadow:0 1px 8px #07120f; }
.base-map-place i { width:13px; height:13px; margin-bottom:5px; border:2px solid #c4d5c9; border-radius:50%; background:#16251f; box-shadow:0 0 0 5px rgba(180,214,193,.16),0 2px 10px rgba(0,0,0,.55); }.base-map-place strong { color:#f0f5ee; font-size:13px; }.base-map-place small { max-width:130px; margin-top:2px; color:#c1d1c8; font-size:10px; }
.base-map-place.is-enterable { cursor:pointer; }.base-map-place.is-enterable i { border-color:#f1c26e; box-shadow:0 0 0 5px rgba(239,191,101,.16),0 0 20px rgba(244,187,80,.42); }.base-map-place.is-enterable:hover { transform:translate(-50%,-50%) scale(1.06); }.base-map-place.is-enterable:hover strong { color:#ffe0a1; }
.base-map-occupants { max-width:150px; margin-top:4px; color:#efb85f; font-size:9px; line-height:1.3; }
.base-map-motion { position:absolute; z-index:5; right:20px; bottom:18px; padding:8px 11px; border:1px solid rgba(180,198,189,.25); border-radius:999px; color:#dce8e1; background:rgba(8,14,13,.78); font-size:11px; backdrop-filter:blur(10px); }.base-map-motion[hidden] { display:none; }
.base-map-event-stream { position:absolute; z-index:8; left:18px; bottom:18px; display:grid; grid-template-columns:auto 1fr; gap:9px; align-items:center; width:min(340px,calc(100% - 36px)); padding:9px 11px; border:1px solid rgba(151,184,167,.35); border-radius:6px; color:#e5eee8; background:rgba(8,15,13,.88); backdrop-filter:blur(10px); pointer-events:none; }.base-map-event-stream[hidden] { display:none; }.base-map-event-stream > span { align-self:start; padding-top:2px; color:#9fb7aa; font-size:9px; writing-mode:vertical-rl; letter-spacing:0; }.base-map-event-stream > div { display:flex; min-width:0; align-items:center; gap:8px; }.base-map-event-stream b { display:grid; flex:0 0 34px; width:34px; height:34px; overflow:hidden; border:1px solid rgba(206,177,111,.55); border-radius:4px; }.base-map-event-stream p { display:grid; min-width:0; gap:2px; margin:0; }.base-map-event-stream strong { overflow:visible; font-size:11px; font-weight:500; line-height:1.4; overflow-wrap:anywhere; text-overflow:clip; white-space:normal; }.base-map-event-stream small { color:#9fb7aa; font-size:9px; }
.base-map-schedule-toggle { position:absolute; z-index:8; right:20px; top:20px; min-height:40px; padding:0 14px; border:1px solid #53655f; border-radius:4px; color:#dae5df; background:rgba(14,24,21,.88); }
.base-map-schedule { position:absolute; z-index:10; inset:16px 16px 16px auto; width:min(380px,calc(100% - 32px)); overflow:auto; border:1px solid #52645e; border-radius:7px; background:rgba(8,15,13,.96); box-shadow:-18px 0 50px rgba(0,0,0,.45); backdrop-filter:blur(14px); }.base-map-schedule[hidden] { display:none; }.base-map-schedule > header { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; padding:16px; border-bottom:1px solid #2f3e39; background:#101b18; }.base-map-schedule header div { display:grid; }.base-map-schedule header small { color:#81958e; font-size:9px; }.base-map-schedule header strong { color:#e5ece7; }.base-map-schedule header button { width:36px; border:0; color:#aebdb7; background:transparent; font-size:22px; }.base-map-schedule-list { display:grid; padding:8px 14px 16px; }.base-map-schedule-list article { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 2px; border-bottom:1px solid #26342f; }.base-map-schedule-list article span { display:grid; gap:2px; }.base-map-schedule-list article strong { color:#dce6e0; }.base-map-schedule-list article small { color:#a8bab3; }.base-map-schedule-list article em { color:#71857e; font-size:9px; font-style:normal; }.base-map-schedule-list article button { min-width:78px; min-height:36px; border:1px solid #b78b4d; border-radius:4px; color:#efbd71; background:#292117; }.base-map-schedule-list article button:disabled { border-color:#3c4944; color:#75857f; background:#17201d; }
.base-map-schedule-actions { display:grid; gap:6px; flex:0 0 auto; }.base-map-schedule-list article .base-map-schedule-actions button { min-width:96px; min-height:40px; }.base-map-schedule-list article .base-map-schedule-actions button:first-child { border-color:#596d66; color:#c4d3cd; background:#16231f; }
.base-map-appointments { margin:0 -2px 8px; padding:13px; border:1px solid #34473f; border-radius:6px; background:#111d19; }.base-map-appointments h4 { margin:0 0 10px; color:#e1eae5; font-size:13px; }.base-map-appointments ol { display:grid; gap:5px; margin:0 0 12px; padding:0; list-style:none; }.base-map-appointments li { padding:8px 10px; border-left:2px solid #9a7642; background:#17241f; }.base-map-appointments li span { display:grid; gap:2px; }.base-map-appointments li strong { color:#d8e3dd; font-size:11px; }.base-map-appointments li small { color:#8fa39b; font-size:10px; }.base-map-appointment-empty { margin:0 0 12px; color:#80948c; font-size:10px; }
.base-map-appointments form { display:grid; grid-template-columns:1fr 110px; gap:9px; }.base-map-appointments label { display:grid; gap:5px; color:#9fb1aa; font-size:10px; }.base-map-appointments input,.base-map-appointments select { width:100%; min-height:40px; padding:0 8px; border:1px solid #465951; border-radius:4px; color:#e0e9e4; background:#0b1512; color-scheme:dark; }.base-map-appointments form > button { grid-column:1 / -1; min-height:44px; border:1px solid #b78b4d; border-radius:4px; color:#f0c079; background:#2a2117; }.base-map-appointments output { grid-column:1 / -1; padding:8px 10px; border-radius:4px; font-size:10px; }.base-map-appointments output.is-success { color:#a9dfbd; background:#173024; }.base-map-appointments output.is-error { color:#efb5aa; background:#35201c; }
@media (max-width:720px) { .base-map { min-height:72dvh; background-image:linear-gradient(rgba(5,16,14,.18),rgba(5,16,14,.44)),url('/assets/v03/maps/base-map.master.desktop.v2.png'); background-position:center; }.base-map[data-daypart="night"],.base-map[data-daypart="evening"] { background-image:linear-gradient(rgba(3,7,10,.48),rgba(3,8,12,.66)),url('/assets/v03/maps/base-map.master.desktop.v2.png'); }.base-map-place { min-width:78px; }.base-map-place small { display:none; }.base-map-sky strong { font-size:22px; }.base-map-bridge { left:38%; width:28%; }.base-map-schedule-list article { align-items:flex-start; }.base-map-schedule-list article .base-map-schedule-actions button,.base-map-appointments input,.base-map-appointments select { min-height:44px; }.base-map-appointments form { grid-template-columns:1fr; }.base-map-appointments form > button,.base-map-appointments output { grid-column:1; } }

.residence-map { position:relative; min-height:calc(100dvh - 96px); padding:22px; overflow:hidden; border:1px solid #394446; border-radius:8px; background:radial-gradient(circle at 50% 55%,#20352f,#101b19 68%); color:#dfe8e2; }
.residence-map[hidden] { display:none; }.residence-map > header { display:flex; align-items:flex-start; gap:18px; }.residence-map > header button { min-height:40px; padding:0 14px; border:1px solid #51615c; border-radius:4px; color:#cbd8d2; background:#17221f; }.residence-map h2 { margin:3px 0; font-size:25px; }.residence-map header small,.residence-map header p { margin:0; color:#8fa39c; font-size:11px; }
.residence-floor-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:20px 0 12px; }.residence-floor-tabs button { display:grid; gap:3px; min-height:58px; padding:10px 12px; border:1px solid #364641; border-radius:5px; color:#aabcb5; background:#131e1b; text-align:left; }.residence-floor-tabs button small { color:#71867e; font-size:9px; }.residence-floor-tabs button.is-active { border-color:#d4a45e; color:#efbd72; background:#272219; }
.residence-floor-view { position:relative; min-height:530px; }.residence-fan { position:absolute; inset:0; border:1px solid rgba(184,204,194,.2); border-radius:48% 48% 10% 10% / 82% 82% 18% 18%; background:radial-gradient(circle at 50% 66%,rgba(202,163,96,.2) 0 18%,transparent 19%),repeating-conic-gradient(from -58deg at 50% 68%,rgba(97,123,112,.15) 0 8deg,transparent 8deg 18deg); overflow:hidden; }
.residence-center { position:absolute; z-index:3; left:50%; top:68%; display:grid; width:230px; min-height:120px; place-content:center; padding:14px; transform:translate(-50%,-50%); border:2px solid #bd9255; border-radius:50%; background:#24251e; text-align:center; }.residence-center small { color:#a99370; font-size:9px; }.residence-center strong { margin:4px; font-size:18px; }.residence-center span { color:#93a49d; font-size:10px; }.residence-center em { margin-top:7px; color:#efb85f; font-size:9px; font-style:normal; }
.residence-room { position:absolute; z-index:2; left:var(--room-x); top:var(--room-y); display:grid; width:clamp(90px,11vw,145px); min-height:92px; padding:10px; transform:translate(-50%,-50%); border:1px solid #53665e; border-radius:6px 6px 18px 18px; color:#dbe5df; background:rgba(18,31,27,.92); text-align:left; }.residence-room small { margin-top:4px; color:#82978f; font-size:9px; }.residence-room.is-enterable { border-color:#c69855; cursor:pointer; }.residence-room.is-future { border-style:dashed; opacity:.55; }.residence-people { margin-top:8px; color:#efb85f; font-size:9px; }
.residence-fan.is-dense { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-content:start; gap:7px; padding:22px; overflow:visible; }.residence-fan.is-dense .residence-room { position:relative; left:auto; top:auto; width:auto; min-height:74px; transform:none; }.residence-fan.is-dense .residence-center { top:84%; }
.residence-legend { position:absolute; right:22px; bottom:14px; display:flex; gap:14px; color:#82968e; font-size:9px; }.residence-legend span { display:flex; align-items:center; gap:5px; }.residence-legend i { width:8px; height:8px; border-radius:50%; background:#768b83; }.residence-legend i.is-here { background:#efb85f; box-shadow:0 0 8px #efb85f; }.residence-legend i.is-room { border:1px solid #c69855; background:transparent; }.residence-legend i.is-future { border:1px dashed #768b83; background:transparent; }
@media (max-width:720px) { .residence-map { min-height:78dvh; padding:14px; }.residence-map > header { gap:10px; }.residence-map h2 { font-size:20px; }.residence-map header p { display:none; }.residence-floor-tabs { gap:4px; margin-top:14px; }.residence-floor-tabs button { min-height:48px; padding:7px; }.residence-floor-tabs button small { display:none; }.residence-floor-view { min-height:520px; overflow:auto; }.residence-fan { min-width:700px; }.residence-room { width:105px; }.residence-legend { display:none; } }

/* v2.1 统一空间图：背景图只负责氛围，路线、建筑与人物使用稳定坐标。 */
.base-map-routes { position:absolute; z-index:2; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.base-map-routes polyline { fill:none; vector-effect:non-scaling-stroke; stroke:rgba(224,240,214,.36); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 2px rgba(0,0,0,.65)); }.base-map-routes polyline.is-corridor { stroke:rgba(255,212,130,.82); stroke-width:3; }
.base-map-people { position:absolute; z-index:7; inset:0; pointer-events:none; }
.base-map-person { position:absolute; left:var(--x); top:var(--y); display:flex; align-items:center; gap:7px; transform:translate(-50%,-50%); border:0; color:#f4e7c8; background:transparent; pointer-events:none; transition:left 20s linear,top 20s linear; }
.base-map-person b { display:grid; width:32px; height:32px; place-items:center; overflow:hidden; border:2px solid color-mix(in srgb,var(--accent,#efc16f) 78%,#efc16f); border-radius:50%; background:#1b2d28; box-shadow:0 0 0 4px rgba(239,193,111,.14),0 4px 16px rgba(0,0,0,.45); font-size:11px; }
.base-map-person > span { display:none; min-width:100px; padding:6px 8px; border:1px solid #50635c; border-radius:4px; background:rgba(8,15,13,.92); text-align:left; }
.base-map-person span small { color:#9fb0aa; font-size:9px; }
.base-map-person.is-moving b { animation:map-person-pulse 1.4s ease-in-out infinite; }
@keyframes map-person-pulse { 50% { box-shadow:0 0 0 8px rgba(239,193,111,.05),0 4px 18px rgba(0,0,0,.5); } }

.building-tabs { display:flex; gap:6px; margin-top:18px; }
.building-tabs button { min-height:40px; padding:0 18px; border:1px solid #40534c; border-radius:5px; color:#9eb0a9; background:#121e1b; }
.building-tabs button.is-active { border-color:#c79855; color:#f1c77e; background:#2b2319; }
.residence-floor-tabs { overflow-x:auto; }
.residence-floor-tabs button { flex:0 0 auto; min-width:112px; }
.residence-floor-view { min-height:440px; margin-top:14px; padding:18px; border:1px solid #334740; border-radius:7px; background:rgba(7,15,13,.62); }
.floorplan-heading { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.floorplan-heading strong { color:#f0e9d8; font-size:18px; }.floorplan-heading span { color:#849a91; font-size:11px; }
.floorplan-grid { position:relative; display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:7px; padding:28px; border:2px solid #72847d; background:linear-gradient(90deg,transparent 49.7%,rgba(177,153,102,.18) 50%,transparent 50.3%),#14221e; }
.floorplan-grid::before { content:"中央走廊"; position:absolute; left:50%; top:5px; transform:translateX(-50%); color:#7e928a; font-size:9px; letter-spacing:.2em; }
.floorplan-room { position:relative; grid-column:span var(--span); display:grid; min-height:92px; align-content:center; gap:5px; padding:14px; overflow:hidden; border:1px solid #5b6c66; color:#dce7e1; background:#1b2b27; text-align:left; }
.floorplan-room strong { font-size:13px; }.floorplan-room small { color:#8fa29b; font-size:10px; }
.floorplan-people { position:absolute; right:8px; top:7px; display:flex; flex-direction:row-reverse; padding:0; color:inherit; background:transparent; }
.floorplan-people > i { width:36px; height:36px; margin-left:-9px; overflow:hidden; border:2px solid color-mix(in srgb,var(--accent,#efbd70) 72%,#efbd70); border-radius:50%; background:#17221e; box-shadow:0 3px 8px rgba(0,0,0,.35); }
.floorplan-door { position:absolute; left:50%; bottom:-1px; width:25px; height:7px; transform:translateX(-50%); border:1px solid #c9a462; border-bottom:0; background:#14221e; }
.floorplan-room.is-enterable { border-color:#c8954e; cursor:pointer; }.floorplan-room.is-enterable:hover { background:#30271d; }
.floorplan-room.is-common { background:#203630; }.floorplan-room.is-transit { border-style:dashed; background:#17231f; }.floorplan-room.is-future { opacity:.55; }

@media (max-width:720px) {
  .base-map-routes { inset:14% 2% 4%; width:96%; height:82%; }
  .base-map-person > span { position:absolute; left:30px; }
  .base-map-person b { width:28px; height:28px; font-size:9px; }
  .building-tabs { margin-top:12px; }.building-tabs button { flex:1; }
  .residence-floor-view { min-height:0; padding:10px; overflow:auto; }
  .floorplan-grid { min-width:650px; grid-template-columns:repeat(4,150px); padding:24px; }
}

/* v2.1 真实户型：墙体、房门、走廊、垂直交通与人物轨迹共用同一套几何。 */
.floorplan-canvas { position:relative; width:100%; min-width:720px; aspect-ratio:100/64; overflow:hidden; border-radius:8px; background:linear-gradient(135deg,rgba(34,56,49,.9),rgba(13,25,22,.98)); box-shadow:inset 0 0 0 1px rgba(189,161,105,.25); }
.floorplan-canvas > svg,.floorplan-rooms,.floorplan-canvas > .floorplan-people { position:absolute; inset:0; width:100%; height:100%; }
.floorplan-zones { position:absolute; inset:0; z-index:2; pointer-events:none; }.floorplan-zones span { position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1.5625%); width:calc(var(--w) * 1%); height:calc(var(--h) * 1.5625%); display:grid; place-items:center; border:1px dashed rgba(156,178,164,.3); color:rgba(185,202,190,.62); font-size:9px; letter-spacing:0; text-align:center; }
.floorplan-canvas > svg { z-index:1; overflow:visible; }
.floorplan-outline { fill:rgba(25,43,37,.88); stroke:#81928b; stroke-width:.55; vector-effect:non-scaling-stroke; }
.floorplan-wall { fill:none; stroke:#b7c5bd; stroke-width:1.15; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.floorplan-window { fill:none; stroke:#75c4d1; stroke-width:1.8; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.floorplan-corridor { fill:none; stroke:rgba(214,179,111,.72); stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.floorplan-core { fill:#263730; stroke:#d1a866; stroke-width:.45; vector-effect:non-scaling-stroke; }
.floorplan-canvas svg text { fill:#aebdb6; font-size:2.2px; letter-spacing:.08em; }
.floorplan-rooms { z-index:3; }
.floorplan-canvas .floorplan-room { position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1.5625%); width:calc(var(--w) * 1%); height:calc(var(--h) * 1.5625%); min-height:0; display:flex; flex-direction:column; justify-content:center; gap:3px; padding:6px 8px; overflow:visible; transform:none; border:2px solid #63766e; border-radius:3px; background:rgba(24,43,37,.96); box-shadow:inset 0 0 0 1px rgba(8,15,13,.65); }
.floorplan-canvas .floorplan-room strong { font-size:clamp(9px,1vw,13px); line-height:1.15; }.floorplan-canvas .floorplan-room small { min-height:1em; overflow:hidden; color:#9eb0a9; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.floorplan-fixtures { display:flex; align-items:center; justify-content:center; gap:4px; min-height:14px; opacity:.7; }.floorplan-fixtures i { display:block; width:10px; height:6px; border:1px solid rgba(191,207,195,.72); background:rgba(124,151,136,.18); }.floorplan-fixtures .is-bed { width:15px; height:8px; border-radius:2px; }.floorplan-fixtures .is-desk,.floorplan-fixtures .is-table { width:13px; height:7px; }.floorplan-fixtures .is-sofa,.floorplan-fixtures .is-bench { width:15px; height:5px; border-radius:3px; }.floorplan-fixtures .is-screen { width:10px; height:7px; border-color:#78b9c5; }.floorplan-fixtures .is-shelf,.floorplan-fixtures .is-rack { width:5px; height:11px; background:repeating-linear-gradient(0deg,rgba(174,193,181,.42) 0 1px,transparent 1px 3px); }.floorplan-fixtures .is-tree { width:10px; height:10px; border-radius:50%; border-color:#70a66f; }.floorplan-fixtures .is-island { width:18px; height:8px; }.floorplan-fixtures .is-court { width:22px; height:12px; border-color:#c7a260; background:linear-gradient(90deg,transparent 48%,rgba(199,162,96,.6) 49% 51%,transparent 52%); }.floorplan-fixtures .is-car { width:14px; height:7px; border-radius:5px; }.floorplan-fixtures .is-gate { width:12px; height:10px; }.floorplan-fixtures .is-gym { width:18px; height:8px; background:linear-gradient(90deg,#8a9d94 0 15%,transparent 15% 85%,#8a9d94 85%); }
.floorplan-canvas .floorplan-room.is-common { border-color:#9d8759; background:rgba(38,61,51,.98); }.floorplan-canvas .floorplan-room.is-transit { border-style:dashed; }.floorplan-canvas .floorplan-room.is-future { opacity:.48; }
/* The residence is a fan around the shared atrium, so its outer rooms follow the
   facade rather than pretending that the building is a rectangular corridor. */
.floorplan-canvas.is-residence [data-room-id="living_room"] { clip-path:polygon(7% 0,93% 0,100% 14%,94% 100%,6% 100%,0 14%); }
.floorplan-canvas.is-residence [data-room-id="beizhi-room"],.floorplan-canvas.is-residence [data-room-id="baicheng-room"] { clip-path:polygon(8% 0,100% 15%,94% 100%,0 88%); }
.floorplan-canvas.is-residence [data-room-id="linyuan-room"],.floorplan-canvas.is-residence [data-room-id="jiangci-room"] { clip-path:polygon(12% 0,88% 0,100% 100%,0 100%); }
.floorplan-canvas.is-residence [data-room-id="zhaocha-room"] { clip-path:polygon(0 4%,100% 0,88% 100%,0 89%); }
.floorplan-canvas.is-residence [data-room-id="suqing-room"] { clip-path:polygon(0 0,100% 4%,100% 89%,12% 100%); }
.floorplan-canvas.is-residence [data-room-id="seat-12-suite"] { clip-path:polygon(12% 0,100% 10%,92% 100%,0 88%); }.floorplan-canvas.is-residence [data-room-id="shenbao-room"] { clip-path:polygon(10% 0,90% 0,100% 100%,0 100%); }.floorplan-canvas.is-residence [data-room-id="star-soft-suite"] { clip-path:polygon(6% 8%,100% 0,94% 100%,0 90%); }.floorplan-canvas.is-residence [data-room-id="song-mystery-suite"] { clip-path:polygon(0 7%,100% 0,89% 100%,0 90%); }
.floorplan-canvas.is-residence [data-room-id="training-a"],.floorplan-canvas.is-residence [data-room-id="task_room"] { clip-path:polygon(10% 0,100% 10%,91% 100%,0 90%); }.floorplan-canvas.is-residence [data-room-id="training-b"],.floorplan-canvas.is-residence [data-room-id="meeting_room"] { clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); }
.floorplan-canvas .floorplan-door { position:absolute; width:18px; height:6px; border:2px solid #e0b56d; background:#15251f; z-index:2; }
.floorplan-canvas .floorplan-door.is-top { left:50%; top:-2px; bottom:auto; transform:translateX(-50%); border-bottom:0; }.floorplan-canvas .floorplan-door.is-bottom { left:50%; top:auto; bottom:-2px; transform:translateX(-50%); border-top:0; }
.floorplan-canvas .floorplan-door.is-left { left:-2px; top:50%; bottom:auto; width:6px; height:18px; transform:translateY(-50%); border-right:0; }.floorplan-canvas .floorplan-door.is-right { left:auto; right:-2px; top:50%; bottom:auto; width:6px; height:18px; transform:translateY(-50%); border-left:0; }
.floorplan-canvas > .floorplan-people { z-index:4; display:block; right:auto; top:auto; padding:0; pointer-events:none; }
.floorplan-person { position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1.5625%); display:grid; width:34px; height:34px; place-items:center; transform:translate(-50%,-50%); transition:left 20s linear,top 20s linear; }
.floorplan-person i { display:grid; width:32px; height:32px; place-items:center; overflow:hidden; border:2px solid color-mix(in srgb,var(--accent,#efbd70) 75%,#efbd70); border-radius:50%; background:#17241f; box-shadow:0 0 0 4px rgba(239,189,112,.12),0 4px 12px rgba(0,0,0,.45); }
.floorplan-person.is-moving i { animation:map-person-pulse 1.4s ease-in-out infinite; }
@media (max-width:720px) { .floorplan-canvas { min-width:720px; }.floorplan-canvas .floorplan-room { padding:5px 6px; }.floorplan-person { width:30px; height:30px; }.floorplan-person i { width:28px; height:28px; } }

/* Building entry is an elevation first; plans remain a separate, zoomable work surface. */
.cutaway-heading { display:flex; align-items:center; gap:10px; margin:20px 0 12px; color:#dce6df; }.cutaway-heading span { color:#82968e; font-size:11px; }
.building-cutaway { min-height:480px; display:grid; place-items:end center; padding:32px 6% 0; overflow:hidden; background:linear-gradient(180deg,rgba(44,72,61,.38),rgba(11,22,18,.84)); border:1px solid rgba(151,183,160,.22); border-radius:6px; }
.cutaway-shell { width:min(720px,100%); display:flex; flex-direction:column; gap:5px; padding:24px 20px 18px; border:2px solid #a98a58; border-bottom:0; background:repeating-linear-gradient(90deg,rgba(142,105,60,.09) 0 22px,rgba(33,44,34,.14) 22px 24px),#1b2d25; box-shadow:0 -16px 40px rgba(0,0,0,.3) inset; }
.cutaway-roof { height:36px; margin:-53px -32px 12px; clip-path:polygon(50% 0,100% 100%,0 100%); background:repeating-linear-gradient(90deg,#5f553b 0 16px,#4a4432 16px 19px); border-bottom:2px solid #c6a467; }
.cutaway-floor { position:relative; min-height:58px; display:grid; grid-template-columns:110px 1fr auto; align-items:center; gap:12px; padding:10px 14px; border:1px solid rgba(202,176,120,.4); border-radius:2px; color:#e7dfcb; background:rgba(10,23,18,.72); text-align:left; cursor:pointer; }.cutaway-floor:hover,.cutaway-floor:focus-visible { border-color:#efbd72; background:#28372c; outline:0; }.cutaway-floor strong { color:#efbd72; }.cutaway-floor small { color:#9bad9f; font-size:10px; }
.cutaway-occupants { display:flex; min-width:40px; justify-content:flex-end; }.cutaway-occupants i { width:27px; height:27px; margin-left:-7px; overflow:hidden; border:1px solid #e0b56d; border-radius:50%; background:#173126; }.cutaway-occupants i:first-child { margin-left:0; }
.building-cutaway.is-function .cutaway-shell { width:min(780px,100%); min-height:440px; }.building-cutaway.is-function .cutaway-floor { min-height:48px; }.building-cutaway.is-function .cutaway-floor:nth-of-type(n+7) { background:rgba(30,42,34,.92); }
.floorplan-heading { display:flex; align-items:center; gap:10px; margin:20px 0 10px; color:#dfe9e2; }.floorplan-heading span { color:#84988f; font-size:11px; }.map-back { min-height:30px; padding:0 9px; border:1px solid #51615c; border-radius:3px; color:#c4d2ca; background:#17221f; }
.floorplan-wrap { overflow:auto; padding-bottom:12px; }.floorplan-canvas { min-width:760px; min-height:500px; aspect-ratio:1.56; }
@media (max-width:720px) { .building-cutaway { min-height:440px; padding:28px 4% 0; }.cutaway-floor { grid-template-columns:76px 1fr auto; gap:7px; padding:8px; }.cutaway-floor small { font-size:9px; }.floorplan-wrap { margin:0 -8px; }.floorplan-canvas { min-width:700px; min-height:460px; } }

/* v2.1 indoor finish: architectural layers stay code-native so occupancy can light them in real time. */
.cutaway-floor { isolation:isolate; min-height:64px; grid-template-columns:128px 1fr auto; overflow:hidden; background:linear-gradient(90deg,rgba(32,43,32,.94),rgba(12,24,19,.84)); }
.cutaway-floor::after { content:""; position:absolute; z-index:-1; inset:0; opacity:.7; background:repeating-linear-gradient(90deg,transparent 0 24px,rgba(222,185,112,.12) 24px 27px,transparent 27px 52px); }
.cutaway-copy { display:grid; gap:3px; }.cutaway-window-row { display:flex; align-items:center; gap:5px; }.cutaway-window-row i { width:17px; height:22px; border:1px solid rgba(125,191,203,.72); background:linear-gradient(135deg,rgba(101,181,196,.24),rgba(5,21,24,.78)); box-shadow:inset 0 0 8px rgba(78,158,174,.16); }.cutaway-floor.is-occupied .cutaway-window-row i:nth-child(odd) { border-color:#f4c875; background:linear-gradient(135deg,rgba(255,211,122,.78),rgba(105,72,27,.65)); box-shadow:0 0 12px rgba(238,180,82,.25),inset 0 0 8px rgba(255,238,183,.35); }
.floorplan-canvas .floorplan-room { isolation:isolate; border-color:rgba(145,171,156,.88); background:linear-gradient(135deg,rgba(42,62,53,.98),rgba(20,38,33,.98)); }.floorplan-room-light { position:absolute; z-index:-1; inset:5px; opacity:.18; border-radius:2px; background:radial-gradient(circle at 50% 35%,rgba(241,198,113,.9),transparent 58%); transition:opacity .35s ease; }.floorplan-canvas .floorplan-room.is-occupied { border-color:#e8bd70; box-shadow:inset 0 0 0 1px rgba(255,230,170,.18),0 0 18px rgba(221,165,76,.14); }.floorplan-canvas .floorplan-room.is-occupied .floorplan-room-light { opacity:.7; }
.floorplan-fixtures { opacity:.82; }.floorplan-fixtures i { border-color:rgba(210,219,190,.78); background:rgba(124,151,136,.24); box-shadow:inset 0 -2px 0 rgba(5,16,13,.22); }.floorplan-fixtures .is-bed { background:linear-gradient(180deg,#7698a1 0 32%,#d8c09a 32%); }.floorplan-fixtures .is-desk,.floorplan-fixtures .is-table { border-color:#b49762; background:#6e5638; }.floorplan-fixtures .is-sofa,.floorplan-fixtures .is-bench { border-color:#8e9b83; background:#536753; }.floorplan-fixtures .is-screen { background:linear-gradient(135deg,#4c9dad,#173f4c); }.floorplan-room.is-occupied .floorplan-fixtures .is-screen { box-shadow:0 0 8px rgba(103,207,227,.65); }.floorplan-fixtures .is-tree { background:radial-gradient(circle at 35% 35%,#b6dd8f,#356843); }.floorplan-fixtures .is-island { background:#9f8866; }.floorplan-fixtures .is-court { background:linear-gradient(90deg,transparent 48%,rgba(225,194,123,.75) 49% 51%,transparent 52%),#775f3c; }.floorplan-fixtures .is-car { background:#8f9f9b; }.floorplan-fixtures .is-gate { background:linear-gradient(90deg,#657a70 0 20%,transparent 20% 80%,#657a70 80%); }
.floorplan-room[data-room-presentation="lounge"] { background:linear-gradient(135deg,rgba(58,74,54,.98),rgba(29,47,38,.98)); }.floorplan-room[data-room-presentation="dining"] { background:linear-gradient(135deg,rgba(76,64,42,.98),rgba(42,48,35,.98)); }.floorplan-room[data-room-presentation="study"],.floorplan-room[data-room-presentation="library"] { background:linear-gradient(135deg,rgba(39,66,61,.98),rgba(21,43,39,.98)); }.floorplan-room[data-room-presentation="gaming-suite"],.floorplan-room[data-room-presentation="arena"],.floorplan-room[data-room-presentation="stream"] { background:linear-gradient(135deg,rgba(36,51,67,.98),rgba(19,31,43,.98)); }.floorplan-room[data-room-presentation="garden"],.floorplan-room[data-room-presentation="terrace"] { background:linear-gradient(135deg,rgba(46,76,48,.98),rgba(24,54,37,.98)); }.floorplan-room[data-room-presentation="court"] { background:linear-gradient(135deg,rgba(75,59,35,.98),rgba(42,50,34,.98)); }.floorplan-room[data-room-presentation="cinema"] { background:linear-gradient(135deg,rgba(49,42,60,.98),rgba(22,30,38,.98)); }
@media (max-width:720px) { .cutaway-floor { grid-template-columns:84px 1fr auto; }.cutaway-window-row { gap:3px; }.cutaway-window-row i { width:11px; height:18px; } }

/* v2.1 space polish — presentation only. The schedule, routes and room facts remain authoritative. */
.base-map,
.residence-map {
  --space-ink: #091410;
  --space-panel: rgba(10, 23, 19, .86);
  --space-jade: #91b7a4;
  --space-jade-deep: #345c50;
  --space-brass: #d6aa63;
  --space-warm: #f0c879;
  --space-cream: #f3eddd;
  --space-line: rgba(184, 205, 190, .28);
  --space-shadow: 0 18px 46px rgba(0, 0, 0, .42);
}

.base-map {
  isolation:isolate;
  border-color:rgba(196,219,204,.34);
  border-radius:12px;
  background-position:center 48%;
  box-shadow:inset 0 0 0 1px rgba(237,231,200,.08),inset 0 -120px 120px rgba(3,12,10,.2),var(--space-shadow);
  transition:opacity .42s ease,transform .58s cubic-bezier(.2,.72,.2,1),filter .42s ease;
}
.base-map.is-entering { opacity:0; transform:scale(1.025); filter:blur(5px); }
.base-map::before { z-index:1; background:radial-gradient(circle at 49% 38%,transparent 0 31%,rgba(3,11,9,.08) 48%,rgba(3,10,8,.44) 100%),linear-gradient(180deg,rgba(239,222,167,.08),transparent 28%,rgba(1,8,7,.26)); }
.base-map::after { content:""; position:absolute; z-index:2; inset:2.5% 7% 20%; border:1px solid rgba(218,239,225,.18); border-radius:50% 50% 42% 42% / 30% 30% 62% 62%; background:linear-gradient(112deg,transparent 0 32%,rgba(225,244,236,.08) 39%,transparent 48%); box-shadow:inset 0 0 42px rgba(204,237,224,.06); pointer-events:none; }
.base-map-atmosphere { position:absolute; z-index:2; inset:0; overflow:hidden; pointer-events:none; }
.base-map-atmosphere i { position:absolute; width:10px; height:10px; border-radius:50%; background:#f4cf82; box-shadow:0 0 8px 2px rgba(239,190,102,.34); opacity:.72; }
.base-map-atmosphere i:nth-child(1) { left:31%; top:28%; }.base-map-atmosphere i:nth-child(2) { left:66%; top:31%; }.base-map-atmosphere i:nth-child(3) { left:51%; top:55%; }
.base-map[data-daypart="dawn"] { filter:saturate(.92) sepia(.06); }
.base-map[data-daypart="dusk"],.base-map[data-daypart="evening"] { filter:saturate(.92) brightness(.86) sepia(.08); }
.base-map[data-daypart="night"] { filter:saturate(.82) brightness(.72) hue-rotate(-5deg); }
.base-map[data-daypart="night"] .base-map-atmosphere i,.base-map[data-daypart="evening"] .base-map-atmosphere i { opacity:1; box-shadow:0 0 13px 4px rgba(255,197,92,.48); }

.base-map-sky { left:26px; top:24px; padding-left:12px; border-left:2px solid rgba(225,177,92,.78); text-shadow:0 2px 18px rgba(0,0,0,.72); }
.base-map-sky strong { font-family:"Noto Serif SC","Songti SC",serif; font-size:clamp(23px,2.1vw,31px); font-weight:650; letter-spacing:.15em; }
.base-map-sky::after { content:"生活穹顶 · 此刻"; color:rgba(232,240,233,.72); font-size:9px; letter-spacing:.28em; }
.base-map-routes polyline { stroke:rgba(225,238,226,.26); stroke-width:1.15; stroke-dasharray:2 5; filter:drop-shadow(0 1px 3px rgba(0,0,0,.72)); }
.base-map-routes polyline.is-corridor { stroke:rgba(218,166,85,.92); stroke-width:3.2; stroke-dasharray:none; filter:drop-shadow(0 0 4px rgba(238,182,90,.4)); }
.base-map-routes polyline.is-corridor + polyline { opacity:.72; }

.base-map-place { min-width:0; max-width:150px; padding:7px 9px 7px 28px; transform:translate(-50%,calc(-50% + var(--place-shift-y,0px))); border:1px solid rgba(184,211,194,.24); border-radius:4px 10px 10px 4px; background:linear-gradient(90deg,rgba(7,18,15,.86),rgba(7,18,15,.58)); box-shadow:0 7px 20px rgba(0,0,0,.24); backdrop-filter:blur(6px); transition:transform .24s ease,border-color .24s ease,background .24s ease; }
.base-map-place i { position:absolute; left:9px; top:50%; width:9px; height:9px; margin:0; transform:translateY(-50%); border-width:1.5px; box-shadow:0 0 0 4px rgba(180,214,193,.12),0 2px 9px rgba(0,0,0,.48); }
.base-map-place strong { font-family:"Noto Serif SC","Songti SC",serif; font-size:12px; letter-spacing:.04em; }.base-map-place small { margin-top:1px; font-size:9px; }
.base-map-place.is-enterable { border-color:rgba(221,178,102,.4); background:linear-gradient(90deg,rgba(34,27,17,.9),rgba(9,18,15,.62)); }
.base-map-place.is-function { --place-shift-y:64px; }.base-map-place.is-residence { --place-shift-y:48px; }.base-map-place.is-lake_garden { --place-shift-y:42px; }
.base-map-place.is-enterable:hover,.base-map-place.is-enterable:focus-visible { transform:translate(-50%,calc(-50% + var(--place-shift-y,0px) - 2px)); border-color:rgba(244,199,118,.78); outline:0; background:linear-gradient(90deg,rgba(49,36,20,.94),rgba(12,24,19,.72)); }
.base-map-place.is-mall,.base-map-place.is-stadium,.base-map-place.is-league_arena { border-color:rgba(174,192,181,.18); background:rgba(6,14,12,.58); filter:saturate(.78); }
.base-map-occupants { position:absolute; right:-5px; top:-9px; margin:0; padding:2px 6px; border:1px solid rgba(237,192,111,.46); border-radius:999px; color:#f2d194; background:rgba(15,26,21,.9); font-size:8px; }
.base-map-occupants:empty { display:none; }

.base-map-people { z-index:7; }
.base-map-person { z-index:var(--person-layer,1); transition:left 20s linear,top 20s linear,transform .25s ease; }
.base-map-person b,.floorplan-person > i { position:relative; width:31px; height:31px; border:2px solid var(--presence-color,#88af9d); background:#13231d; box-shadow:0 0 0 3px color-mix(in srgb,var(--presence-color,#88af9d) 18%,transparent),0 5px 14px rgba(0,0,0,.48); }
.base-map-person b::after,.floorplan-person > i::after { content:""; position:absolute; right:0; bottom:0; width:7px; height:7px; border:1px solid rgba(5,14,11,.9); border-radius:50%; background:var(--presence-color,#88af9d); box-shadow:0 0 5px var(--presence-color,#88af9d); }
.base-map-person.is-training,.floorplan-person.is-training { --presence-color:#65a9d4; }
.base-map-person.is-study,.floorplan-person.is-study { --presence-color:#e4ba68; }
.base-map-person.is-moving,.floorplan-person.is-moving { --presence-color:#f0ce78; }
.base-map-person.is-busy,.floorplan-person.is-busy { --presence-color:#c8926f; }
.base-map-person.is-sleep,.floorplan-person.is-sleep { --presence-color:#8490b4; }
.base-map-person.is-life,.floorplan-person.is-life { --presence-color:#78b58f; }
.base-map-person.is-moving::before { content:""; position:absolute; left:-20px; top:50%; width:22px; height:2px; transform:translateY(-50%); background:linear-gradient(90deg,transparent,var(--presence-color)); filter:drop-shadow(0 0 3px var(--presence-color)); animation:map-trail 1.3s ease-in-out infinite; }
.base-map-person.is-moving b,.floorplan-person.is-moving > i { animation:map-person-travel 1.35s ease-in-out infinite; }
@keyframes map-trail { 50% { opacity:.28; transform:translate(6px,-50%); } }
@keyframes map-person-travel { 50% { transform:translateY(-2px); box-shadow:0 0 0 6px color-mix(in srgb,var(--presence-color) 10%,transparent),0 7px 17px rgba(0,0,0,.52); } }
.base-map-motion { right:18px; bottom:17px; border-color:rgba(225,190,126,.28); color:#ead8b4; background:rgba(10,20,17,.7); }

.base-map-event-stream,.scene-event-stream { border:1px solid rgba(213,188,132,.3); border-radius:10px; background:linear-gradient(110deg,rgba(11,24,20,.9),rgba(8,16,14,.72)); box-shadow:0 10px 28px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.04); backdrop-filter:blur(14px) saturate(1.1); }
.base-map-event-stream { left:18px; bottom:17px; width:min(315px,calc(100% - 36px)); padding:7px 10px; }
.scene-event-stream { top:auto; left:24px; bottom:24px; width:min(480px,calc(100% - 48px)); padding:11px 14px; }
.base-map-event-stream > span,.scene-event-stream > span { align-self:center; padding:0 7px 0 0; border-right:1px solid rgba(214,184,119,.25); color:#d2ad6a; writing-mode:horizontal-tb; letter-spacing:.12em; white-space:nowrap; }
.base-map-event-stream b,.scene-event-stream b { flex-basis:30px; width:30px; height:30px; border-radius:50%; border-color:rgba(225,190,120,.5); }
.base-map-event-stream strong,.scene-event-stream strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.base-map-event-stream small,.scene-event-stream small { font-size:8px; }
.scene-event-stream b { flex-basis:42px; width:42px; height:42px; }.scene-event-stream strong { font-size:13px; }.scene-event-stream small { font-size:10px; }
.base-map-schedule-toggle { right:18px; top:18px; min-height:36px; border-color:rgba(211,184,127,.35); border-radius:999px; color:#eee4ce; background:rgba(9,20,16,.72); box-shadow:0 5px 16px rgba(0,0,0,.22); backdrop-filter:blur(9px); }

.residence-map { height:calc(100dvh - 96px); min-height:560px; padding:20px 22px 16px; overflow:auto; border-color:rgba(178,203,188,.28); border-radius:12px; background:radial-gradient(circle at 50% 8%,rgba(76,106,86,.23),transparent 34%),linear-gradient(150deg,#13251f,#091511 72%); box-shadow:inset 0 0 0 1px rgba(235,221,180,.05),var(--space-shadow); scroll-behavior:smooth; transition:opacity .32s ease,transform .48s cubic-bezier(.2,.72,.2,1),filter .32s ease; }
.residence-map::before { content:""; position:fixed; z-index:0; inset:64px 28% 0 0; pointer-events:none; opacity:.22; background-image:linear-gradient(rgba(163,192,174,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(163,192,174,.06) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(180deg,black,transparent 88%); }
.residence-map > * { position:relative; z-index:1; }
.residence-map.is-entering { opacity:0; transform:scale(.975); filter:blur(4px); }
.residence-map.is-leaving { opacity:0; transform:scale(.97); filter:blur(5px); }
.residence-map.is-opening-room { transform-origin:var(--room-origin-x,50%) var(--room-origin-y,50%); opacity:.08; transform:scale(1.11); filter:blur(7px); }
.residence-map > header { position:sticky; z-index:9; top:-20px; align-items:center; padding:10px 0 12px; background:linear-gradient(180deg,#10211b 72%,transparent); }
.residence-map > header button,.map-back { border-color:rgba(175,200,186,.28); border-radius:999px; background:rgba(17,33,27,.72); backdrop-filter:blur(8px); }
.residence-map > header h2 { font-family:"Noto Serif SC","Songti SC",serif; font-weight:650; letter-spacing:.1em; }.residence-map > header p { letter-spacing:.08em; }
.residence-map > header > div,.cutaway-heading,.floorplan-heading > strong,.floorplan-heading > span { display:none; }
.floorplan-heading { margin:0 0 8px; }
.building-tabs { margin-top:8px; padding-left:118px; }
.building-tabs button { min-height:36px; padding:0 17px; border-color:rgba(151,181,163,.24); border-radius:999px; background:rgba(12,27,22,.62); }
.building-tabs button.is-active { border-color:rgba(222,177,98,.56); color:#f0cb88; background:linear-gradient(180deg,rgba(72,52,27,.82),rgba(39,31,20,.82)); box-shadow:inset 0 0 0 1px rgba(255,226,167,.08); }
.residence-floor-view { min-height:0; margin-top:10px; padding:14px; border-color:rgba(151,183,165,.2); border-radius:10px; background:linear-gradient(145deg,rgba(8,20,16,.72),rgba(13,29,23,.54)); box-shadow:inset 0 0 32px rgba(0,0,0,.16); }
.residence-floor-view.is-refreshing > * { animation:space-view-in .48s cubic-bezier(.2,.75,.22,1) both; }
@keyframes space-view-in { from { opacity:0; transform:translateY(10px) scale(.992); filter:blur(3px); } to { opacity:1; transform:none; filter:none; } }
.cutaway-heading,.floorplan-heading { margin:0 0 10px; }.cutaway-heading strong,.floorplan-heading strong { font-family:"Noto Serif SC","Songti SC",serif; letter-spacing:.08em; }.cutaway-heading span,.floorplan-heading span { letter-spacing:.06em; }

.building-cutaway { min-height:420px; padding:30px 7% 0; border-color:rgba(159,190,171,.17); border-radius:10px; background:radial-gradient(ellipse at 50% 100%,rgba(68,106,80,.34),transparent 52%),linear-gradient(180deg,rgba(21,48,39,.34),rgba(6,16,13,.72)); box-shadow:inset 0 -28px 55px rgba(0,0,0,.2); }
.building-cutaway::after { content:""; position:absolute; left:12%; right:12%; bottom:0; height:18px; border-radius:50%; background:rgba(0,0,0,.38); filter:blur(10px); }
.cutaway-shell { position:relative; z-index:1; width:min(700px,100%); gap:4px; padding:21px 18px 13px; border-color:rgba(198,158,93,.72); background:repeating-linear-gradient(90deg,rgba(210,173,105,.06) 0 1px,transparent 1px 38px),linear-gradient(90deg,#1a2f26,#11231c); box-shadow:inset 0 -20px 44px rgba(0,0,0,.2),0 16px 32px rgba(0,0,0,.24); }
.cutaway-shell::after { content:""; position:absolute; left:-5%; right:-5%; bottom:-12px; height:14px; border:1px solid rgba(192,152,91,.52); border-radius:2px; background:linear-gradient(180deg,#273c30,#111e18); }
.cutaway-roof { height:31px; margin:-47px -29px 10px; border-bottom-color:rgba(224,181,108,.76); background:repeating-linear-gradient(90deg,#66573b 0 14px,#463d2e 14px 17px); filter:drop-shadow(0 5px 5px rgba(0,0,0,.34)); }
.cutaway-floor { min-height:48px; grid-template-columns:106px minmax(0,1fr) auto; gap:10px; padding:7px 11px; border-color:rgba(195,166,109,.26); background:linear-gradient(90deg,rgba(36,52,39,.94),rgba(12,27,21,.88)); }
.cutaway-floor::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,transparent,rgba(217,174,99,.66),transparent); opacity:.35; }
.cutaway-floor::after { opacity:.45; background:repeating-linear-gradient(90deg,transparent 0 37px,rgba(213,176,106,.1) 37px 39px); }
.cutaway-floor:hover,.cutaway-floor:focus-visible { transform:translateX(3px); border-color:rgba(239,191,112,.65); background:linear-gradient(90deg,rgba(57,70,48,.96),rgba(20,38,29,.92)); }
.cutaway-floor.is-occupied::before { opacity:1; box-shadow:0 0 9px rgba(235,182,91,.44); }
.cutaway-window-row { gap:4px; }.cutaway-window-row i { width:14px; height:17px; border-radius:1px; }
.cutaway-copy strong { font-family:"Noto Serif SC","Songti SC",serif; font-size:12px; }.cutaway-copy small { font-size:9px; }
.cutaway-occupants { align-items:center; min-width:0; padding-right:2px; }.cutaway-occupants i { width:28px; height:28px; margin-left:-8px; border-width:1.5px; box-shadow:0 3px 8px rgba(0,0,0,.4); }.cutaway-occupants i:first-child { margin-left:0; }
.cutaway-more { display:grid; width:27px; height:27px; margin-left:-7px; place-items:center; border:1px solid rgba(225,185,113,.6); border-radius:50%; color:#f0d29b; background:#203429; font-size:9px; font-weight:600; }
.building-cutaway.is-function .cutaway-shell { width:min(735px,100%); min-height:0; }.building-cutaway.is-function .cutaway-floor { min-height:42px; }

.floorplan-wrap { margin:0; padding:6px 0 10px; border-radius:8px; scrollbar-color:rgba(206,169,103,.56) rgba(9,21,17,.5); }
.floorplan-canvas { min-width:740px; min-height:455px; border:1px solid rgba(193,217,200,.25); border-radius:10px; background:linear-gradient(145deg,#1a3028,#0d1d18); box-shadow:inset 0 0 0 8px rgba(5,15,12,.34),inset 0 0 70px rgba(0,0,0,.3),0 12px 28px rgba(0,0,0,.24); }
.floorplan-outline { fill:rgba(28,48,40,.86); stroke:rgba(216,226,208,.86); stroke-width:2.1; }
.floorplan-surface { fill:url(#plan-grid-function); opacity:.7; }.floorplan-canvas.is-residence .floorplan-surface { fill:url(#plan-wood-residence); opacity:.8; }
.floorplan-wall { stroke:rgba(217,225,211,.82); stroke-width:1.45; }.floorplan-window { stroke:#77c0c6; stroke-width:2.2; filter:drop-shadow(0 0 2px rgba(101,193,201,.45)); }
.floorplan-corridor { stroke:rgba(201,161,92,.5); stroke-width:2; stroke-dasharray:1 3; }
.floorplan-core { fill:rgba(43,63,52,.94); stroke:rgba(218,173,97,.78); stroke-width:1; }.floorplan-stairs { fill:none; stroke:rgba(217,205,170,.62); stroke-width:.7; vector-effect:non-scaling-stroke; }
.floorplan-canvas svg text { fill:rgba(226,215,180,.72); font-size:1.8px; letter-spacing:.05em; }
.floorplan-zones span { place-items:end start; padding:0 0 3px 4px; border:0; border-bottom:1px solid rgba(164,191,173,.14); color:rgba(194,211,200,.5); font-size:7px; letter-spacing:.09em; }
.floorplan-canvas .floorplan-room { justify-content:flex-end; gap:5px; padding:7px 8px; overflow:visible; border:1.5px solid rgba(142,170,153,.72); border-radius:4px; background:linear-gradient(145deg,rgba(47,69,58,.96),rgba(19,39,32,.98)); box-shadow:inset 0 0 0 1px rgba(4,13,10,.56),inset 0 -16px 26px rgba(0,0,0,.12); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.floorplan-canvas .floorplan-room::after { content:""; position:absolute; inset:5px; border:1px solid rgba(236,225,189,.035); pointer-events:none; }
.floorplan-room-name { position:absolute; z-index:2; left:6px; top:6px; max-width:calc(100% - 12px); padding:2px 6px 3px; border-left:2px solid rgba(213,169,92,.7); border-radius:1px 5px 5px 1px; background:rgba(8,20,16,.62); box-shadow:0 3px 8px rgba(0,0,0,.14); }
.floorplan-room-name strong { display:block; overflow:hidden; color:#eee8d8; font-family:"Noto Serif SC","Songti SC",serif; font-size:clamp(8px,.9vw,11px)!important; font-weight:600; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.floorplan-canvas .floorplan-room.is-enterable:hover,.floorplan-canvas .floorplan-room.is-enterable:focus-visible { z-index:5; transform:translateY(-2px); border-color:#e0ad5d; outline:0; box-shadow:inset 0 0 0 1px rgba(255,228,172,.12),0 8px 20px rgba(0,0,0,.34),0 0 16px rgba(218,165,76,.16); }
.floorplan-canvas .floorplan-room.is-enterable .floorplan-room-name::after { content:"进入"; margin-left:5px; color:#deb56d; font-family:system-ui,sans-serif; font-size:7px; font-weight:400; }
.floorplan-room-light { inset:auto -2px -2px; height:10px; opacity:0; border-radius:0; background:radial-gradient(ellipse at 50% 100%,rgba(255,204,111,.9),transparent 70%); }
.floorplan-canvas .floorplan-room.is-occupied { border-color:rgba(229,185,105,.88); box-shadow:inset 0 0 0 1px rgba(255,230,170,.12),0 0 14px rgba(221,165,76,.12); }.floorplan-canvas .floorplan-room.is-occupied .floorplan-room-light { opacity:.85; }
.floorplan-fixtures { align-self:center; min-height:20px; gap:5px; opacity:.92; transform:scale(1.12); transform-origin:center bottom; }
.floorplan-fixtures i { border-radius:1px; }
.floorplan-fixtures .is-tea { width:8px; height:8px; border-radius:50%; background:radial-gradient(circle,#d4bc86 0 30%,#5e523c 32%); }
.floorplan-door { filter:drop-shadow(0 0 3px rgba(232,183,94,.24)); }

.floorplan-person { z-index:8; width:34px; height:43px; transition:left 20s linear,top 20s linear,transform .28s ease; }
.floorplan-person > i { width:31px; height:31px; }
.floorplan-person > small { display:none; }
.floorplan-person.is-moving::before { content:""; position:absolute; left:-15px; top:15px; width:18px; height:2px; background:linear-gradient(90deg,transparent,var(--presence-color)); animation:map-trail 1.3s ease-in-out infinite; }
.residence-legend { position:sticky; z-index:7; right:auto; bottom:-16px; justify-content:flex-end; margin:8px 0 -8px; padding:7px 4px 3px; background:linear-gradient(180deg,transparent,#0d1d18 40%); }
.residence-legend i.is-here { background:#78b58f; box-shadow:0 0 8px #78b58f; }

@media (max-width:900px) {
  .building-tabs { padding-left:0; }
  .residence-map { height:auto; min-height:78dvh; }
  .residence-map::before { inset:64px 0 0; }
}
@media (max-width:720px) {
  .base-map { min-height:72dvh; border-radius:8px; background-size:auto 100%; }
  .base-map::after { inset:4% 3% 24%; }
  .base-map-sky { left:14px; top:14px; }.base-map-sky::after { display:none; }
  .base-map-place { max-width:102px; padding:5px 7px 5px 22px; }.base-map-place i { left:7px; }.base-map-place strong { font-size:10px; }
  .base-map-person b { width:27px; height:27px; }.base-map-person b::after { width:6px; height:6px; }
  .base-map-event-stream { left:10px; bottom:10px; width:min(285px,calc(100% - 20px)); }
  .scene-event-stream { left:16px; bottom:16px; width:min(430px,calc(100% - 32px)); }
  .base-map-event-stream > span,.scene-event-stream > span { display:none; }
  .base-map-schedule-toggle { right:12px; top:12px; min-height:34px; }
  .residence-map { padding:12px; overflow:visible; }
  .residence-map > header { top:-12px; padding-top:8px; }.residence-map > header button { min-height:36px; padding:0 11px; }
  .building-tabs { margin-top:4px; }.building-tabs button { min-height:38px; }
  .residence-floor-view { padding:9px; }
  .building-cutaway { min-height:350px; padding:52px 2% 0; }.cutaway-shell { padding-inline:10px; }
  .cutaway-floor { grid-template-columns:72px 1fr auto; }.cutaway-copy small { display:none; }.cutaway-occupants i { width:24px; height:24px; }.cutaway-more { width:23px; height:23px; }
  .floorplan-canvas { min-width:700px; min-height:440px; }.floorplan-room-name strong { font-size:9px!important; }
  .residence-legend { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .base-map,.residence-map,.residence-floor-view > *,.base-map-person,.floorplan-person,.cutaway-floor { transition:none!important; animation:none!important; }
  .base-map-person::before,.floorplan-person::before,.base-map-person b,.floorplan-person > i { animation:none!important; }
}

/* Keep the three room overlays in separate lanes: room status, live event, occupants. */
.scene-event-stream {
  left:50%;
  right:auto;
  bottom:max(22px,env(safe-area-inset-bottom));
  width:clamp(500px,36vw,680px);
  max-width:calc(100% - 660px);
  min-width:360px;
  padding:12px 16px;
  gap:12px;
  transform:translateX(-50%);
}
.scene-event-stream > span { font-size:clamp(11px,.66vw,13px); }
.scene-event-stream > div { gap:11px; }
.scene-event-stream b { flex-basis:46px; width:46px; height:46px; }
.scene-event-stream strong {
  font-size:clamp(15px,.9vw,17px);
  line-height:1.4;
  text-overflow:clip;
  white-space:normal;
}
.scene-event-stream small { font-size:clamp(11px,.68vw,12px); line-height:1.35; }

@media (max-width:1500px) {
  .scene-event-stream {
    left:16px;
    bottom:88px;
    width:min(500px,calc(100% - 32px));
    max-width:none;
    min-width:0;
    transform:none;
  }
}

@media (max-width:720px) {
  .scene-event-stream { left:12px; bottom:82px; width:calc(100% - 24px); padding:10px 12px; }
  .scene-event-stream b { flex-basis:40px; width:40px; height:40px; }
  .scene-event-stream strong { font-size:14px; }
  .scene-event-stream small { font-size:11px; }
}

/* Map and room labels must remain readable instead of silently clipping. */
.base-map-place { max-width:190px; }
.base-map-place strong,.base-map-place small {
  overflow:visible;
  line-height:1.35;
  overflow-wrap:anywhere;
  text-overflow:clip;
  white-space:normal;
}
.base-map-event-stream strong {
  overflow:visible;
  font-size:12px;
  line-height:1.4;
  overflow-wrap:anywhere;
  text-overflow:clip;
  white-space:normal;
}
.base-map-event-stream small { font-size:10px; line-height:1.35; }
.floorplan-room-name { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; overflow:hidden!important; clip-path:inset(50%)!important; white-space:nowrap!important; }
.floorplan-labels { position:absolute; z-index:7; inset:0; pointer-events:none; }
.floorplan-label {
  position:absolute;
  left:calc(var(--x) * 1% + 8px);
  top:calc(var(--y) * 1.5625% + 7px);
  width:calc(var(--w) * 1% - 16px);
  display:flex;
  align-items:flex-start;
  gap:6px;
  padding:3px 7px 4px;
  border-left:2px solid rgba(213,169,92,.82);
  border-radius:2px 6px 6px 2px;
  color:#eee8d8;
  background:rgba(8,20,16,.82);
  box-shadow:0 3px 10px rgba(0,0,0,.2);
}
.floorplan-label strong {
  min-width:0;
  font-family:"Noto Serif SC","Songti SC",serif;
  font-size:clamp(10px,.86vw,13px);
  font-weight:650;
  line-height:1.3;
  overflow-wrap:anywhere;
  white-space:normal;
}
.floorplan-label small { flex:0 0 auto; padding-top:1px; color:#deb56d; font-size:9px; line-height:1.3; }
.floorplan-zones span {
  align-content:end;
  overflow:visible;
  line-height:1.3;
  overflow-wrap:anywhere;
  white-space:normal;
}
.cutaway-copy { min-width:0; }
.cutaway-copy strong,.cutaway-copy small {
  overflow:visible;
  line-height:1.35;
  overflow-wrap:anywhere;
  text-overflow:clip;
  white-space:normal;
}
.scene-room-occupants {
  max-width:38%;
  justify-content:flex-end;
  flex-wrap:wrap-reverse;
}
.scene-room-occupants > span { width:min(140px,15vw); }
.scene-room-occupants i {
  max-width:none;
  width:100%;
  overflow:visible;
  line-height:1.3;
  overflow-wrap:anywhere;
  text-align:center;
  text-overflow:clip;
  white-space:normal;
}

@media (max-width:720px) {
  .base-map-place { max-width:118px; }
  .floorplan-label { left:calc(var(--x) * 1% + 5px); top:calc(var(--y) * 1.5625% + 5px); width:calc(var(--w) * 1% - 10px); padding:3px 5px; }
  .scene-room-occupants { right:12px; max-width:48%; }
  .scene-room-occupants > span { width:min(112px,28vw); }
}

/* v2.1 real architectural plans: SVG walls are the rooms; HTML is labels only. */
.floorplan-canvas > svg { pointer-events:auto; }
.floorplan-surface { fill:url(#plan-grid-residence); opacity:.28; pointer-events:none; }
.floorplan-canvas.is-function .floorplan-surface { fill:url(#plan-grid-function); }
.floorplan-corridor-surface {
  fill:url(#plan-wood-residence);
  stroke:rgba(205,170,103,.7);
  stroke-width:.42;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
}
.floorplan-canvas.is-function .floorplan-corridor-surface { fill:rgba(94,120,107,.15); stroke:rgba(166,188,176,.5); }
.floorplan-spaces { isolation:isolate; }
.floorplan-space {
  fill:rgba(27,47,40,.92);
  stroke:#aebdb6;
  stroke-width:.72;
  vector-effect:non-scaling-stroke;
  outline:none;
  transition:fill .2s ease,stroke .2s ease,filter .2s ease;
}
.floorplan-space-group.is-common > .floorplan-space { fill:rgba(48,77,64,.94); stroke:#c1a568; }
.floorplan-space-group.is-service > .floorplan-space { fill:rgba(35,49,45,.96); stroke:#778b82; }
.floorplan-space-group.is-transit > .floorplan-space { fill:rgba(35,48,43,.96); stroke:#c69d58; stroke-dasharray:2 1; }
.floorplan-space-group.is-future > .floorplan-space { fill:rgba(31,43,39,.72); stroke:#73847d; stroke-dasharray:1.8 1.2; }
.floorplan-space.is-enterable { cursor:pointer; stroke:#e1b360; stroke-width:1.05; }
.floorplan-space.is-enterable:hover,.floorplan-space.is-enterable:focus-visible { fill:rgba(72,59,39,.96); stroke:#ffd28a; filter:drop-shadow(0 0 3px rgba(226,174,86,.42)); }
.floorplan-space-group.is-occupied > .floorplan-space { stroke:#efc16f; filter:drop-shadow(0 0 2px rgba(239,193,111,.4)); }
.floorplan-subspace { pointer-events:none; stroke:rgba(206,218,211,.52); stroke-width:.34; vector-effect:non-scaling-stroke; }
.floorplan-subspace.is-bedroom { fill:rgba(55,81,72,.78); }
.floorplan-subspace.is-personal { fill:rgba(68,73,54,.78); }
.floorplan-subspace.is-personal-alt { fill:rgba(59,69,76,.78); }
.floorplan-subspace.is-bath { fill:rgba(45,76,81,.82); }
.floorplan-subspace.is-storage { fill:rgba(70,61,49,.84); }
.floorplan-door-mark { fill:#0e1b17; stroke:#f2be66; stroke-width:.55; vector-effect:non-scaling-stroke; pointer-events:none; }
.floorplan-furniture { fill:rgba(167,187,175,.28); stroke:rgba(210,222,215,.72); stroke-width:.34; vector-effect:non-scaling-stroke; pointer-events:none; }
.floorplan-furniture .fixture-detail { fill:none; stroke:rgba(226,215,184,.72); stroke-width:.28; vector-effect:non-scaling-stroke; }
.floorplan-furniture .is-tree { fill:rgba(93,141,91,.48); stroke:#8fb989; }
.floorplan-furniture .is-court,.floorplan-furniture .is-platform { fill:rgba(149,111,63,.22); stroke:#d1a666; }
.floorplan-furniture .is-car { fill:rgba(91,115,123,.46); }
.floorplan-furniture .is-bed,.floorplan-furniture .is-sofa,.floorplan-furniture .is-bench { fill:rgba(122,108,78,.55); }
.floorplan-labels { z-index:7; }
.floorplan-label {
  left:calc(var(--lx) * 1%);
  top:calc(var(--ly) * 1.5625%);
  width:auto;
  max-width:170px;
  min-width:54px;
  display:grid;
  justify-items:center;
  gap:1px;
  padding:3px 6px;
  transform:translate(-50%,-50%);
  border:0;
  border-radius:3px;
  background:rgba(7,17,14,.76);
  text-align:center;
}
.floorplan-label strong { font-size:clamp(9px,.76vw,12px); line-height:1.22; }
.floorplan-label small { max-width:160px; padding:0; color:#aebdb5; font-size:8px; line-height:1.22; white-space:normal; }
.floorplan-label.is-service,.floorplan-label.is-transit,.floorplan-label.is-future { min-width:0; background:rgba(10,19,16,.66); }
.floorplan-label.is-enterable { box-shadow:0 0 0 1px rgba(218,171,89,.42),0 3px 9px rgba(0,0,0,.26); }
.floorplan-label.is-enterable::after { content:"进入"; color:#e0b56d; font-size:8px; }
@media (max-width:720px) {
  .floorplan-label { left:calc(var(--lx) * 1%); top:calc(var(--ly) * 1.5625%); width:auto; max-width:150px; padding:2px 5px; }
  .floorplan-label strong { font-size:9px; }
  .floorplan-label small { max-width:140px; font-size:7px; }
}

/* v2.1 architectural art pass: material, joinery, furniture, lived-in detail and light. */
.floorplan-canvas { background:radial-gradient(circle at 48% 42%,#1d342d,#0c1815 76%); box-shadow:inset 0 0 0 1px rgba(203,175,116,.22),0 18px 42px rgba(0,0,0,.28); }
.floorplan-building-shadow { fill:#020705; opacity:.52; transform:translate(0,1.1px); filter:blur(.65px); pointer-events:none; }
.floorplan-surface { fill:#162720; opacity:1; pointer-events:none; }
.floorplan-outer-wall { fill:none; stroke:#d5ddd7; stroke-width:1.4; stroke-linejoin:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 1px 1px rgba(0,0,0,.8)); pointer-events:none; }
.floorplan-space { cursor:pointer; stroke:#a9b7af; stroke-width:.62; }
.floorplan-space-group.is-selected > .floorplan-space { stroke:#ffd68b; stroke-width:1.35; filter:drop-shadow(0 0 3px rgba(236,184,91,.5)); }
.floorplan-space-group.is-material-quiet-wood > .floorplan-space,.floorplan-space-group.is-material-quiet-wood .floorplan-subspace { fill:url(#mat-quiet-wood); }
.floorplan-space-group.is-material-dark-wood > .floorplan-space,.floorplan-space-group.is-material-dark-wood .floorplan-subspace { fill:url(#mat-dark-wood); }
.floorplan-space-group.is-material-warm-wood > .floorplan-space,.floorplan-space-group.is-material-warm-wood .floorplan-subspace { fill:url(#mat-warm-wood); }
.floorplan-space-group.is-material-soft-wood > .floorplan-space,.floorplan-space-group.is-material-soft-wood .floorplan-subspace { fill:url(#mat-soft-wood); }
.floorplan-space-group.is-material-acoustic > .floorplan-space,.floorplan-space-group.is-material-acoustic .floorplan-subspace,.floorplan-space-group.is-material-carpet > .floorplan-space { fill:url(#mat-acoustic); }
.floorplan-space-group.is-material-carpet-wood > .floorplan-space,.floorplan-space-group.is-material-carpet-wood .floorplan-subspace { fill:url(#mat-carpet-wood); }
.floorplan-space-group.is-material-stone-wood > .floorplan-space,.floorplan-space-group.is-material-stone-wood .floorplan-subspace { fill:url(#mat-stone-wood); }
.floorplan-space-group.is-material-tile > .floorplan-space,.floorplan-space-group.is-material-clean > .floorplan-space { fill:url(#mat-tile); }
.floorplan-space-group.is-material-stone > .floorplan-space { fill:url(#mat-stone); }
.floorplan-space-group.is-material-concrete > .floorplan-space { fill:url(#mat-concrete); }
.floorplan-space-group.is-material-court > .floorplan-space { fill:url(#mat-court); }
.floorplan-space-group.is-material-rubber > .floorplan-space { fill:url(#mat-rubber); }
.floorplan-space-group.is-material-grass > .floorplan-space,.floorplan-space-group.is-material-grass-stone > .floorplan-space { fill:url(#mat-grass); }
.floorplan-space-group.is-material-technical > .floorplan-space { fill:url(#mat-technical); }
.floorplan-space-group.is-material-esports > .floorplan-space { fill:url(#mat-esports); }
.floorplan-space-group.is-material-studio > .floorplan-space { fill:url(#mat-studio); }
.floorplan-space-group.is-material-library-wood > .floorplan-space { fill:url(#mat-library-wood); }
.floorplan-space-group.is-material-cinema > .floorplan-space { fill:url(#mat-cinema); }
.floorplan-space-group.is-material-unfinished > .floorplan-space { fill:url(#mat-unfinished); }
.floorplan-space-group.is-material-deck > .floorplan-space { fill:url(#mat-warm-wood); }
.floorplan-subspace { stroke:rgba(225,232,227,.4); stroke-width:.42; }
.floorplan-subspace.is-bedroom { filter:brightness(1.08); }
.floorplan-subspace.is-personal { filter:saturate(.86) brightness(.94); }
.floorplan-subspace.is-personal-alt { filter:hue-rotate(9deg) brightness(.96); }
.floorplan-subspace.is-bath { fill:url(#mat-tile)!important; filter:brightness(.94) saturate(.75); }
.floorplan-subspace.is-storage { filter:brightness(.8); }
.floorplan-corridor-surface { fill:#485a4c!important; stroke:#c9a161; stroke-width:.52; filter:drop-shadow(0 1px 1px rgba(0,0,0,.42)); }
.floorplan-canvas.is-function .floorplan-corridor-surface { fill:#354943!important; stroke:#93a59b; }
.floorplan-door-assembly { pointer-events:none; }
.floorplan-door-gap { fill:none; stroke:#14251f; stroke-width:2.5; vector-effect:non-scaling-stroke; }
.floorplan-door-leaf { fill:none; stroke:#e1b76f; stroke-width:.62; stroke-linecap:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 1px rgba(235,186,98,.5)); }
.floorplan-door-swing { fill:none; stroke:#cfb98e; stroke-width:.34; stroke-dasharray:1 .65; vector-effect:non-scaling-stroke; }
.floorplan-window-bed { fill:none; stroke:#10201b; stroke-width:3.25; stroke-linecap:butt; vector-effect:non-scaling-stroke; pointer-events:none; }
.floorplan-window { fill:none; stroke:#8dd2da; stroke-width:1.45; stroke-linecap:butt; stroke-dasharray:6 1.4; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 2px rgba(95,189,201,.32)); pointer-events:none; }
.floorplan-room-window { fill:none; stroke:#80c4cb; stroke-width:1.05; vector-effect:non-scaling-stroke; pointer-events:none; }
.floorplan-room-window.is-lattice { stroke-dasharray:2.6 .7; }
.floorplan-room-window.is-screened { stroke:#719ba0; stroke-dasharray:1 1; }
.floorplan-room-window.is-sheer { stroke:#a5c8c4; stroke-dasharray:5 .6; }
.floorplan-room-window.is-panoramic { stroke-width:1.4; }
.floorplan-room-window.is-adjustable { stroke:#8aaeb8; stroke-dasharray:3 .5 .8 .5; }
.floorplan-furniture { fill:rgba(168,180,170,.28); stroke:rgba(226,232,225,.78); stroke-width:.34; filter:drop-shadow(0 .45px .45px rgba(0,0,0,.7)); }
.floorplan-furniture .fixture-detail { fill:none; stroke:rgba(239,225,190,.75); stroke-width:.26; }
.floorplan-furniture .is-screen,.floorplan-furniture .is-screen-wall,.floorplan-furniture .is-reaction-wall { fill:rgba(84,153,169,.45); stroke:#79c1ce; }
.floorplan-furniture .is-wardrobe,.floorplan-furniture .is-storage,.floorplan-furniture .is-locker,.floorplan-furniture .is-shelf,.floorplan-furniture .is-rack,.floorplan-furniture .is-equipment-rack { fill:rgba(92,79,57,.55); stroke:#c5ad7d; }
.floorplan-furniture .is-wc,.floorplan-furniture .is-bath,.floorplan-furniture .is-washer,.floorplan-furniture .is-dryer,.floorplan-furniture .is-sink,.floorplan-furniture .is-shower { fill:rgba(91,145,150,.42); stroke:#a8d0d1; }
.floorplan-trace { fill:rgba(202,166,98,.46); stroke:#dfbf82; stroke-width:.28; }
.floorplan-room-light-svg { opacity:0; pointer-events:none; transition:opacity .35s ease; }
.floorplan-space-group.is-occupied .floorplan-room-light-svg { opacity:.26; fill:#ffd88e; filter:blur(.35px); }
.floorplan-space-group.is-activity-training .floorplan-room-light-svg { fill:#7ac7dd; opacity:.3; }
.floorplan-space-group.is-activity-study .floorplan-room-light-svg { fill:#f2c97e; opacity:.28; }
.floorplan-space-group.is-activity-sleep .floorplan-room-light-svg { fill:#d79c69; opacity:.13; }
.floorplan-time-wash { fill:url(#plan-daylight); opacity:.22; mix-blend-mode:screen; pointer-events:none; }
#scene-root[data-daypart="dawn"] .floorplan-time-wash { fill:#a9c7bf; opacity:.12; }
#scene-root[data-daypart="day"] .floorplan-time-wash { fill:url(#plan-daylight); opacity:.24; }
#scene-root[data-daypart="dusk"] .floorplan-time-wash { fill:#d48d58; opacity:.15; }
#scene-root[data-daypart="night"] .floorplan-time-wash { fill:#11253a; opacity:.34; mix-blend-mode:multiply; }
#scene-root[data-daypart="night"] .floorplan-canvas { background:radial-gradient(circle at 50% 42%,#14262a,#071010 78%); }
#scene-root[data-daypart="night"] .floorplan-space-group:not(.is-occupied) { filter:brightness(.68) saturate(.72); }
#scene-root[data-daypart="night"] .floorplan-space-group.is-occupied .floorplan-room-light-svg { opacity:.42; filter:blur(.5px) drop-shadow(0 0 2px #e9b762); }
#scene-root[data-daypart="dusk"] .floorplan-space-group.is-occupied .floorplan-room-light-svg { opacity:.34; }

/* v2.1 spatial interaction: one activity instance drives people, furniture and light. */
.floorplan-space-group.is-activity-meal .floorplan-room-light-svg,
.floorplan-space-group.is-light-dining .floorplan-room-light-svg { fill:#f2b76f;opacity:.36; }
.floorplan-space-group.is-light-screen .floorplan-room-light-svg { fill:#64b9d2;opacity:.38;filter:blur(.45px) drop-shadow(0 0 2px #5bc7e5); }
.floorplan-space-group.is-light-study .floorplan-room-light-svg { fill:#efc478;opacity:.34; }
.floorplan-space-group.is-light-sleep .floorplan-room-light-svg { fill:#ad7d68;opacity:.12; }
.floorplan-person.is-phase-settling,
.floorplan-person.is-phase-arriving { transform:translate(-50%,-50%) scale(1.06); }
.floorplan-person.is-phase-wrapping_up,
.floorplan-person.is-phase-leaving { opacity:.86; }
.floorplan-room-detail dl .is-interaction { grid-column:1/-1;border-color:rgba(211,176,102,.28);background:rgba(168,124,62,.08); }
.floorplan-room-detail dl .is-interaction dd { color:#e6d5ad; }

.base-map-companion-flow { display:grid;gap:3px;margin:0 14px 10px;padding:10px 12px;border:1px solid rgba(220,181,104,.3);border-radius:9px;background:linear-gradient(120deg,rgba(177,126,55,.12),rgba(45,91,78,.16)); }
.base-map-companion-flow[hidden] { display:none; }
.base-map-companion-flow span { color:#cfad6d;font-size:10px;letter-spacing:.12em; }
.base-map-companion-flow strong { color:#f0e7d2;font-size:13px; }
.base-map-companion-flow small { color:#abc0b5;font-size:11px;line-height:1.45; }
.base-map-schedule-list article[data-spatial-phase="arriving"],
.base-map-schedule-list article[data-spatial-phase="settling"] { border-color:rgba(225,188,109,.42);background:rgba(170,126,59,.08); }

.scene-room-props { position:absolute;z-index:2;right:24px;bottom:86px;display:flex;max-width:44%;flex-wrap:wrap;justify-content:flex-end;gap:6px; }
.scene-room-props span { padding:5px 8px;border:1px solid rgba(185,207,194,.22);border-radius:999px;color:#d7e5dc;background:rgba(7,16,13,.68);box-shadow:0 4px 14px rgba(0,0,0,.18);font-size:10px;backdrop-filter:blur(8px); }
.scene-room-props span[data-state="gaming"],.scene-room-props span[data-state="cool"] { border-color:rgba(97,191,216,.4);color:#a9e0ee; }
.scene-room-props span[data-state="warm"],.scene-room-props span[data-state="set"] { border-color:rgba(232,187,102,.42);color:#efd49c; }
.scene-room-interaction { position:absolute;z-index:2;right:24px;bottom:48px;max-width:45%;margin:0;padding:7px 10px;border-left:2px solid rgba(225,181,95,.7);color:#dfd7c4;background:rgba(7,15,12,.62);font-size:11px;line-height:1.45; }
#scene-root[data-room-light="screen"] .scene-room-state::before { background:linear-gradient(145deg,rgba(73,163,192,.12),transparent 44%,rgba(10,24,29,.2)); }
#scene-root[data-room-light="study"] .scene-room-state::before,
#scene-root[data-room-light="dining"] .scene-room-state::before { background:radial-gradient(circle at 62% 38%,rgba(238,189,96,.16),transparent 38%),linear-gradient(180deg,transparent,rgba(8,16,12,.12)); }
#scene-root[data-room-light="sleep"] .scene-room-state::before { background:linear-gradient(180deg,rgba(7,13,24,.22),rgba(2,6,13,.46)); }
@media (max-width:720px) {
  .scene-room-props { right:12px;bottom:132px;max-width:58%;gap:4px; }
  .scene-room-props span { padding:4px 6px;font-size:9px; }
  .scene-room-interaction { right:12px;bottom:96px;max-width:58%;font-size:10px; }
}
.floorplan-label {
  min-width:0;
  max-width:112px;
  padding:1px 4px 2px;
  border:0;
  border-radius:1px;
  color:#ecf0eb;
  background:transparent;
  box-shadow:none;
  text-shadow:0 1px 2px #06100c,0 0 5px #06100c;
}
.floorplan-label strong { font-family:"Noto Serif SC","Songti SC",serif; font-size:clamp(8px,.69vw,11px); font-weight:500; letter-spacing:.05em; }
.floorplan-label.is-service,.floorplan-label.is-transit,.floorplan-label.is-future { background:transparent; color:#bac8c0; }
.floorplan-label.is-enterable { color:#ffe0a2; background:transparent; box-shadow:none; }
.floorplan-label.is-enterable::after { content:" · 进入"; color:#dcb876; font-size:7px; }
.floorplan-label.is-selected { border-bottom:1px solid #efbd6b; color:#fff1cf; }
.floorplan-room-detail { display:grid; grid-template-columns:minmax(220px,.85fr) minmax(320px,1.4fr); gap:22px; margin-top:10px; padding:13px 16px; border-top:1px solid rgba(132,155,144,.34); color:#dfe8e2; background:linear-gradient(90deg,rgba(19,35,29,.86),rgba(12,24,20,.7)); }
.floorplan-room-detail > div { display:grid; align-content:center; gap:2px; }.floorplan-room-detail span { color:#b99761; font-size:9px; letter-spacing:.14em; }.floorplan-room-detail strong { color:#f3ead7; font-family:"Noto Serif SC","Songti SC",serif; font-size:16px; }.floorplan-room-detail p { margin:2px 0 0; color:#9fb1a9; font-size:10px; line-height:1.45; }
.floorplan-room-detail dl { display:grid; align-content:center; gap:5px; margin:0; }.floorplan-room-detail dl div { display:grid; grid-template-columns:42px 1fr; gap:8px; }.floorplan-room-detail dt { color:#728a80; font-size:9px; }.floorplan-room-detail dd { margin:0; color:#c4d2cb; font-size:10px; line-height:1.4; }
.floorplan-room-detail.is-empty { grid-template-columns:90px 1fr; align-items:center; }.floorplan-room-detail.is-empty p { margin:0; }
.floorplan-person { filter:drop-shadow(0 3px 3px rgba(0,0,0,.7)); }.floorplan-person > i { box-shadow:0 0 0 2px rgba(10,24,19,.72),0 3px 8px rgba(0,0,0,.48); }
@media (max-width:720px) {
  .floorplan-label { max-width:94px; padding:1px 3px; }
  .floorplan-label strong { font-size:8px; }
  .floorplan-room-detail { min-width:700px; grid-template-columns:250px 1fr; gap:18px; padding:11px 14px; }
}

/* v2.1 viewport fill hotfix: preserve the calibrated 16:9 scene and extend its
   current artwork below the canvas instead of exposing an unrelated black slab. */
@media (min-width:860px) {
  .yunqi-terminal { max-height:calc(100dvh - 28px); }
  .scene-stage {
    min-height:calc(100dvh - 28px);
    isolation:isolate;
  }
  .scene-stage::before,
  .scene-stage::after {
    content:"";
    position:absolute;
    z-index:0;
    left:0;
    right:0;
    pointer-events:none;
  }
  .scene-stage::before {
    top:var(--scene-canvas-height,56.25vw);
    bottom:0;
    background-image:linear-gradient(rgba(7,12,11,.38),rgba(4,7,7,.86)),var(--scene-extension-image,linear-gradient(#111b18,#060909));
    background-position:center,center bottom;
    background-size:cover,100% auto;
    filter:blur(14px) saturate(.72) brightness(.62);
    transform:scale(1.055);
    transform-origin:center top;
  }
  .scene-stage::after {
    top:max(0px,calc(var(--scene-canvas-height,56.25vw) - 58px));
    bottom:0;
    background:linear-gradient(180deg,transparent 0,rgba(5,9,8,.7) 78px,rgba(3,6,6,.9) 100%);
  }
  .scene-canvas { z-index:1; }

  .companion-speech { max-width:540px; padding:14px 18px; font-size:20px; line-height:1.55; }
  .scene-room-status { max-width:420px; gap:5px; padding:12px 15px; }
  .scene-room-status small,
  .scene-room-status span { font-size:13px; line-height:1.42; overflow-wrap:anywhere; }
  .scene-room-status strong { font-size:17px; line-height:1.35; overflow-wrap:anywhere; }
  .scene-room-occupants i { font-size:12px; line-height:1.4; }
  .scene-room-props span { padding:6px 10px; font-size:13px; line-height:1.35; }
  .scene-room-interaction { max-width:52%; padding:8px 12px; font-size:14px; line-height:1.5; }
  .scene-event-stream > span { font-size:14px; }
  .scene-event-stream strong { font-size:clamp(17px,1vw,20px); }
  .scene-event-stream small { font-size:clamp(13px,.76vw,14px); }

  .residence-map {
    height:calc(100dvh - 28px);
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .residence-map > header,
  .building-tabs,
  .residence-legend { flex:0 0 auto; }
  .residence-floor-view {
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .floorplan-heading,
  .cutaway-heading,
  .floorplan-room-detail { flex:0 0 auto; }
  .floorplan-wrap {
    flex:1 1 auto;
    min-height:0;
    display:grid;
    place-items:center;
    overflow:hidden;
    padding:0;
    container-type:size;
  }
  .floorplan-canvas {
    width:min(100%,156.25cqh);
    height:auto;
    min-width:0;
    min-height:0;
    max-width:100%;
    max-height:100%;
    aspect-ratio:100/64;
  }
  .building-cutaway {
    flex:1 1 auto;
    min-height:0;
  }
}