/* ============================================
   《监控里是谁》原型 · 全局皮肤 v0.2
   依据：桌面《监控里是谁》活动各幕细化 6 份施工图（2026-09-24 拍板版）
   第一幕：场景即入口（02 克制版为底 + AI 版红色电子钟持续走时）
   第二~四幕：电脑 95% + 外围 5% 值班室（"网页套网页"）
   铁律：禁用宋体（游戏字体偏好 2026-09-21）；手写体用楷体；无廉价惊吓
   ============================================ */

:root {
  /* 色板对齐活动宣传页（virtualoverapp.com/cms/286490/canju.html）：
     深蓝黑底 + 暗金 + 旧纸 + 印章红（2026-09-24 用户拍板"活动页同款风格"） */
  --bg: #0c1420;            /* 深蓝黑底 */
  --bg-deep: #060b14;       /* 最深底 */
  --panel: #131e30;         /* 面板 */
  --panel-2: #1a2740;       /* 卡片 */
  --line: rgba(212,169,90,.28);          /* 金色细线 */
  --line-hi: rgba(212,169,90,.55);
  --txt: #e6dfc9;           /* 米白主文字 */
  --txt-dim: #a8987a;       /* 次级暖灰 */
  --txt-faint: #7d7156;     /* 弱化 */
  --gold: #d4a95a;          /* 暗金 · 主强调 */
  --gold-dim: #b8903f;
  --gold-bright: #eec26a;   /* 亮金 */
  --warn: #c8302a;          /* 亮红 */
  --warn-2: #9d1a1a;        /* 印章红 */
  --info: #7b93b8;          /* 系统蓝（压灰） */
  --ok: #62c25a;            /* 记录成功绿（活动页同款） */
  --ink: #1e1a12;           /* 旧纸上的墨 */
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --hand: "Ma Shan Zheng", "Kaiti SC", "STKaiti", "楷体", "PingFang SC", serif;
  --title: "ZCOOL QingKe HuangYou", "STKaiti", "PingFang SC", sans-serif;   /* 黄油体标题 */
  --sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --west: "Cinzel", "Times New Roman", serif;                                /* 西文装饰 */

  /* 场景色（第一幕） */
  --wall: #0f1a2b;
  --wall-2: #16233a;
  --shade: #0a1220;
  --metal: #4a555c;
  --wood: #3a2e28;
  --wood-2: #4e3d34;
  --lamp: #eec26a;
  --screen: #d9e2e9;
  --led: #c8302a;
  --led-deep: #6b0f0f;
  --paper: #ede0c2;         /* 旧纸米黄 */
  --paper-2: #e3d3ad;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--bg-deep); }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* 细颗粒噪点：屏幕质感（AI 版施工图：轻微像素颗粒） */
body::after {
  content: "";
  position: fixed; inset: 0;
  opacity: 0.045;
  pointer-events: none;
  z-index: 9998;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

a { color: inherit; }
button { font-family: inherit; }

/* ============================================================
   一、第一幕 · 值班室场景（施工图 02 §三 构图）
   固定 16:9 场景板，JS 按视口等比缩放居中（中心裁切，不拉伸）
   皮肤：活动宣传页同款——深蓝黑 + 暗金 + 旧纸 + 印章红（2026-09-24 拍板）
   ============================================================ */
.room {
  position: fixed; inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, #131e30 0%, #0c1420 55%, #060b14 100%);
  overflow: hidden;
  z-index: 1;
}
.room::after { /* 金色网格：活动页质感 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 88px, rgba(212,169,90,0.045) 88px 89px),
    repeating-linear-gradient(90deg, transparent 0 88px, rgba(212,169,90,0.045) 88px 89px);
  mask-image: radial-gradient(110% 95% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(110% 95% at 50% 40%, #000 30%, transparent 78%);
}
.scene {
  position: absolute; left: 50%; top: 50%;
  width: 1600px; height: 900px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  /* AI 生成值班室底图（room_001 商用版，局部编辑后） */
  background: #0a1220 url(img/room.jpg) center/cover no-repeat;
}

/* 后墙/地板/窗户/桌子/台灯：场景图中已有，全部隐藏 */
.scene .wall, .scene .floor, .sc-window, .sc-desk, .sc-lamp { display: none; }

/* ---- 左侧窗户（x4-31% y8-52%）：金色窗框 ---- */
.sc-window {
  position: absolute; left: 4%; top: 8%; width: 27%; height: 44%;
  border: 2px solid rgba(212,169,90,0.5);
  outline: 5px solid #0a1220;
  background: linear-gradient(180deg, #0a1420 0%, #0d1b2c 45%, #101c2a 100%);
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,169,90,0.18);
}
.sc-window .mullion-v { position: absolute; left: 33%; right: 0; top: 0; bottom: 0; border-left: 3px solid rgba(212,169,90,0.22); }
.sc-window .mullion-v2 { position: absolute; left: 66%; right: 0; top: 0; bottom: 0; border-left: 3px solid rgba(212,169,90,0.22); }
.sc-window .mullion-h { position: absolute; left: 0; right: 0; top: 49%; border-top: 3px solid rgba(212,169,90,0.22); }
.sc-window .stars {
  position: absolute; inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(255,255,255,0.65) 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 12%, rgba(255,255,255,0.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 30%, rgba(255,255,255,0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 42%, rgba(255,255,255,0.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 18%, rgba(255,255,255,0.45) 50%, transparent 51%);
}
.sc-window .city {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background:
    linear-gradient(175deg, transparent 0%, transparent 62%, #06090d 62.5%, #06090d 100%);
  background-size: 46px 100%;
  opacity: 0.95;
}
.sc-window .city::after { /* 远处暖色灯点 */
  content: ""; position: absolute; left: 8%; right: 6%; bottom: 18%; height: 2px;
  background: radial-gradient(1px 1px at 10% 0, rgba(255,190,110,0.8) 50%, transparent 51%),
              radial-gradient(1px 1px at 32% 0, rgba(255,190,110,0.6) 50%, transparent 51%),
              radial-gradient(1px 1px at 55% 0, rgba(255,190,110,0.7) 50%, transparent 51%),
              radial-gradient(1px 1px at 78% 0, rgba(255,190,110,0.5) 50%, transparent 51%);
  background-size: 14px 2px;
  opacity: 0.8;
}
.sc-window .moon {
  position: absolute; right: 12%; top: 14%;
  width: 34px; height: 34px; border-radius: 50%;
  background: #d9d5c8;
  box-shadow: 0 0 26px rgba(217,213,200,0.3);
}
.sc-window .moon::after {
  content: ""; position: absolute; left: -7px; top: -5px;
  width: 32px; height: 32px; border-radius: 50%;
  background: #0d1620;
}
/* 玻璃上的室内反光 */
.sc-window .glare {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.055) 0%, transparent 22%);
}

/* ---- 墙上红色 LED 电子钟（持续走时，紧迫感核心；精确对齐场景图原时钟位 67.5-74.8%）---- */
.sc-led {
  position: absolute; left: 67.4%; top: 19%;
  width: 9.8%; padding: 6px 0 7px;
  background: linear-gradient(180deg, #131e30 0%, #07090b 100%);
  border: 1px solid rgba(212,169,90,0.4);
  border-radius: 3px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55), inset 0 0 12px rgba(0,0,0,0.5);
}
.sc-led .t {
  font-family: var(--mono);
  font-size: 16px; letter-spacing: 2px;
  color: var(--led);
  text-shadow: 0 0 8px rgba(179,56,56,0.8), 0 0 22px rgba(179,56,56,0.35);
}
.sc-led .d {
  font-family: var(--mono);
  font-size: 8px; color: #5d2626;
  letter-spacing: 1px;
  margin-top: 2px;
}

/* ---- 馆内信息大屏（精确套在场景图墙上黑屏面板上，融入场景质感）---- */
.sc-board {
  position: absolute; left: 45.3%; top: 11.4%; width: 17%; height: 21.8%;
  /* 模拟图中挂壁屏幕：颗粒噪点 + 深蓝黑底 + 上亮下暗的屏面微光 */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 28%, rgba(32,48,70,0.45) 0%, transparent 55%),
    linear-gradient(180deg, #0b121c 0%, #070c13 55%, #0a1018 100%);
  border: 1px solid rgba(212,169,90,0.5);
  border-radius: 2px;
  cursor: zoom-in;
  /* 画框厚度感：内框线 + 框内侧金色斜面 + 内暗角，轻外影贴墙 */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.55),
    inset 0 0 0 3px rgba(212,169,90,0.28),
    inset 0 0 26px rgba(0,0,0,0.62),
    0 2px 6px rgba(0,0,0,0.22);
  transition: filter 0.2s;
  /* 贴合墙面极轻微的透视（图中面板近正对，只做微倾） */
  transform: perspective(1400px) rotateY(-1.2deg) rotateZ(-0.35deg);
  transform-origin: 50% 50%;
}
.sc-board:hover { filter: brightness(1.05); }
.sc-board .screen {
  position: absolute; inset: 0;
  background: transparent; /* 透出 board 的屏面微光底 */
  padding: 12px 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* 玻璃反光：台灯在屏幕右下方，光斑+反光从右下打来 */
.sc-board .screen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(34% 26% at 80% 64%, rgba(255,255,255,0.05) 0%, transparent 70%),
    linear-gradient(300deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.02) 15%, transparent 28%);
}
.sc-board .l1 {
  font-size: 11px; color: var(--gold); letter-spacing: 3px;
  text-shadow: 0 0 6px rgba(201,168,106,0.35);
  display: flex; justify-content: space-between;
}
.sc-board .l1 .lv {
  color: var(--warn-2); border: 1px solid rgba(154,62,69,0.7);
  padding: 0 6px; letter-spacing: 2px;
}
.sc-board .body {
  margin-top: 7px; font-size: 10.5px; line-height: 1.55; color: #aebdc9;
  text-shadow: 0 0 5px rgba(90,130,170,0.35); /* 屏幕字符微光 */
}
.sc-board .body b { color: #dce5ec; font-weight: 500; }
.sc-board .foot {
  margin-top: auto; font-size: 9.5px; color: rgba(212,169,90,0.6);
  letter-spacing: 1px;
  border-top: 1px solid rgba(212,169,90,0.14);
  padding-top: 5px;
}
/* 扫描线 */
.sc-board .screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,0.024) 2px 3px);
}

/* ---- 房门 + 门禁灯（透明容器对齐场景图门框；可点进入门外场馆，悬停柔光+金色标签）---- */
.sc-door {
  position: absolute; left: 81%; top: 7.2%; width: 16.3%; height: 68.4%;
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.6s ease;
}
.sc-door:hover { background: radial-gradient(55% 60% at 50% 45%, rgba(238,194,106,0.12), transparent 78%); }
.sc-door::before { display: none; } /* 门板嵌线：图中已有 */
.sc-door::after {
  content: "离开值班室"; position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
  font-size: 14px; letter-spacing: 4px; color: rgba(238,194,106,0.95); white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8); opacity: 0; transition: opacity 0.25s;
}
.sc-door:hover::after { opacity: 1; }
.sc-door .handle { display: none; }
.sc-door .lock {
  position: absolute; left: 89.6%; top: 51%;
  width: 26px; height: 34px;
  background: transparent; border: none;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
}
.sc-door .lock .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3f8f5f;
  box-shadow: 0 0 8px rgba(63,143,95,0.7);
  transition: background 0.6s, box-shadow 0.6s;
}
.sc-door .lock.red .dot {
  background: var(--warn-2);
  box-shadow: 0 0 8px rgba(154,62,69,0.8);
}

/* ---- 长条值班桌（x7-94% y64-100%）---- */
.sc-desk {
  position: absolute; left: 7%; right: 6%; bottom: 0; height: 36%;
  background:
    linear-gradient(180deg, #3a312a 0%, #2a231d 40%, #1c1712 100%);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -6px 30px rgba(0,0,0,0.45);
}
.sc-desk::before { /* 桌面纹理 */
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(92deg, transparent 0 70px, rgba(0,0,0,0.06) 70px 71px),
    linear-gradient(180deg, rgba(238,194,106,0.07) 0%, transparent 8%);
}
.sc-desk .edge {
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent 3%, rgba(212,169,90,0.4) 18%, rgba(212,169,90,0.4) 82%, transparent 97%);
  opacity: 0.8;
}

/* ---- 桌面物件：日志本（透明热区对齐场景图深蓝皮合上本子 x35.7-51.1% y62-78.7%；无框，悬停柔光）---- */
.sc-log {
  position: absolute; left: 35.6%; top: 67.8%; width: 22.4%; height: 10.9%;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.6s ease;
  box-shadow: none;
}
.sc-log:hover { background: radial-gradient(65% 70% at 50% 50%, rgba(238,194,106,0.16), transparent 78%); }
.sc-log .page, .sc-log .sticker { display: none; }
.sc-log::after {
  content: "值班日志"; position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%);
  font-size: 14px; letter-spacing: 4px; color: rgba(238,194,106,0.95); white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8); opacity: 0; transition: opacity 0.25s;
}
.sc-log:hover::after { opacity: 1; }

/* ---- 值班手册（透明热区对齐场景图桌面最左摊开笔记本 x16.5-35.5% y66.5-81.5%；无框，悬停柔光）---- */
.sc-manual {
  position: absolute; left: 16.5%; top: 66.5%; width: 19%; height: 15%;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.6s ease;
  box-shadow: none;
}
.sc-manual:hover { background: radial-gradient(70% 70% at 50% 50%, rgba(238,194,106,0.16), transparent 80%); }
.sc-manual::before, .sc-manual .tag { display: none; }
.sc-manual::after {
  content: "值班手册"; position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%);
  font-size: 14px; letter-spacing: 4px; color: rgba(238,194,106,0.95); white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8); opacity: 0; transition: opacity 0.25s;
}
.sc-manual:hover::after { opacity: 1; }

/* ---- 茶杯（透明热区对齐场景图白瓷茶杯；无框，悬停柔光）---- */
.sc-cup {
  position: absolute; left: 49.8%; top: 66.5%; width: 8.3%; height: 11.2%;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.6s ease;
  box-shadow: none;
}
.sc-cup:hover { background: radial-gradient(70% 70% at 50% 50%, rgba(238,194,106,0.16), transparent 80%); }
.sc-cup .tea { display: none; } /* 图中茶杯已有茶水，只保留蒸汽动画层 */
.sc-cup::after {
  content: "茶杯"; position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%);
  font-size: 14px; letter-spacing: 4px; color: rgba(238,194,106,0.95); white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8); opacity: 0; transition: opacity 0.2s;
}
.sc-cup:hover::after { opacity: 1; }
.sc-cup .steam {
  position: absolute; left: 35%; top: -20%; width: 2px; height: 14px;
  background: rgba(255,255,255,0.3);
  animation: steam 2.6s ease-in-out infinite;
}
.sc-cup .steam:nth-child(3) { left: 60%; animation-delay: 1.3s; }
.sc-cup.burst .steam { height: 22px; background: rgba(255,255,255,0.45); animation-duration: 1.2s; }
@keyframes steam {
  0% { opacity: 0; transform: translateY(6px) scaleY(0.6); }
  40% { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(-16px) scaleY(1.2); }
}

/* ---- 电脑终端（透明热区对齐场景图电脑；主流程入口；无框，悬停柔光）---- */
.sc-pc {
  position: absolute; left: 56.1%; top: 52.7%; width: 20.5%; height: 19.8%;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  transition: background 0.6s ease;
  z-index: 3;
}
.sc-pc:hover { background: radial-gradient(60% 60% at 50% 50%, rgba(238,194,106,0.16), transparent 76%); }
.sc-pc .monitor, .sc-pc .power, .sc-pc .stand, .sc-pc .kb { display: none; }
.sc-pc::after {
  content: "馆务终端"; position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%);
  font-size: 14px; letter-spacing: 4px; color: rgba(238,194,106,0.95); white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8); opacity: 0; transition: opacity 0.2s;
}
.sc-pc:hover::after { opacity: 1; }
/* 开场可点物件依次点亮（发现性引导，一次性演出） */
.sc-log.hint, .sc-manual.hint, .sc-cup.hint, .sc-pc.hint {
  background: radial-gradient(60% 60% at 50% 50%, rgba(238,194,106,0.32), transparent 78%);
  transition: background 0.8s ease;
}
@keyframes pcscan { 0% { background-position: 0 -100%; } 100% { background-position: 0 200%; } }

/* ---- 桌灯（x87-94% y54-80%）：暖金灯光 ---- */
.sc-lamp {
  position: absolute; left: 87.5%; top: 54%; width: 6.5%; height: 26%;
  pointer-events: none;
}
.sc-lamp .pole {
  position: absolute; left: 50%; bottom: 4%; width: 3px; height: 72%;
  background: #0d1626;
  border-left: 1px solid rgba(212,169,90,0.25);
}
.sc-lamp .head {
  position: absolute; left: 18%; top: 6%; width: 64%; height: 12%;
  background: linear-gradient(180deg, #1a2740 0%, #0d1626 100%);
  border: 1px solid rgba(212,169,90,0.4);
  border-radius: 3px 3px 1px 1px;
  transform: rotate(-8deg);
}
.sc-lamp .head::after {
  content: ""; position: absolute; left: 14%; bottom: 0; width: 72%; height: 26px;
  background: radial-gradient(50% 80% at 50% 100%, rgba(238,194,106,0.35) 0%, transparent 70%);
}

/* ---- 身份条 HUD（右上角，开场演出后淡入）---- */
.hud {
  position: absolute; right: 1.5%; top: 1.5%;
  border: 1px solid rgba(212,169,90,0.4);
  background: rgba(12,20,32,0.9);
  padding: 7px 12px;
  font-size: 11.5px; color: var(--txt-dim);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transition: opacity 1s;
  z-index: 6;
  letter-spacing: 1px;
}
.hud.show { opacity: 1; }
.hud b { font-family: var(--mono); color: var(--gold); font-weight: 400; }
.hud .warn { color: var(--warn); }

/* ---- 开场演出 ---- */
.fadein { position: absolute; inset: 0; background: #04060a; z-index: 20; opacity: 1; transition: opacity 1.2s ease; pointer-events: none; }
.fadein.off { opacity: 0; }
.guide {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
  font-family: var(--title);
  font-size: 15px; letter-spacing: 5px; color: rgba(238,194,106,0.6);
  text-shadow: 0 0 12px rgba(238,194,106,0.25);
  z-index: 8; opacity: 0; transition: opacity 1.2s;
  pointer-events: none;
}
.guide.show { opacity: 1; }

/* ---- 场景物件近景（统一"推近+压暗"语言，施工图 02 §十四）---- */
.focus {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(5,8,12,0.6);
  backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  animation: focusin 0.28s ease;
}
@keyframes focusin { from { opacity: 0; } to { opacity: 1; } }
.focus .fx {
  position: absolute; right: 18px; top: 14px;
  font-size: 22px; color: var(--txt-dim); cursor: pointer;
  padding: 4px 10px; z-index: 5;
}
.focus .fx:hover { color: var(--txt); }
.focus-body { position: relative; max-width: 92vw; max-height: 88vh; overflow: auto; }

/* ============================================================
   二、电脑近景 · 登录（施工图 02 §九~十一）
   ============================================================ */
.pc-focus {
  position: fixed; inset: 0; z-index: 100;
  background:
    radial-gradient(100% 80% at 50% 42%, rgba(27,34,44,0.92) 0%, rgba(9,13,18,0.97) 75%);
  display: flex; align-items: center; justify-content: center;
}
.pc-frame {
  position: relative;
  width: min(88vw, 1200px);
  background: #0a0d11;
  border: 10px solid #171c22;
  border-radius: 4px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.7), 0 0 60px rgba(123,156,182,0.06);
}
.pc-frame .bezel { position: absolute; left: 0; right: 0; bottom: -30px; height: 26px; background: #171c22; }
.pc-frame .bezel::after {
  content: ""; position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
  width: 90px; height: 34px; background: linear-gradient(90deg, #101419 0%, #1b2128 50%, #101419 100%);
}
.login-wrap { position: relative; min-height: 560px; background: linear-gradient(180deg, #0c131b 0%, #080d13 100%); }
.login-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--txt-dim); letter-spacing: 1px;
}
.login-top .brand { color: var(--gold); letter-spacing: 2px; }
.login-top .clock { font-family: var(--mono); color: var(--txt); }
.login-card {
  width: 420px; max-width: 86%;
  margin: 60px auto 0;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: 7px;
  padding: 30px 30px 26px;
}
.login-card .t { font-size: 15px; letter-spacing: 3px; margin-bottom: 22px; color: var(--txt); }
.login-card label { display: block; font-size: 12px; color: var(--txt-dim); margin: 12px 0 6px; letter-spacing: 2px; }
.login-card input {
  width: 100%; padding: 10px 12px;
  background: var(--bg-deep);
  border: 1px solid var(--line-hi);
  color: var(--txt);
  font-family: var(--mono); font-size: 16px; letter-spacing: 3px;
}
.login-card input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 12px rgba(201,168,106,0.15); }
.login-card input[readonly] { color: var(--txt-dim); cursor: default; }
.login-card .err { font-size: 12.5px; color: var(--warn); min-height: 20px; margin-top: 8px; }
.login-card .btn {
  width: 100%; margin-top: 16px; text-align: center;
  background: rgba(201,168,106,0.07);
}
.login-card .btn.ok { background: rgba(127,174,127,0.15); border-color: var(--ok); color: var(--ok); }
.login-foot {
  display: flex; justify-content: space-between; align-items: center;
  width: 420px; max-width: 86%; margin: 14px auto 0;
  font-size: 11.5px; color: var(--txt-faint);
}
.login-foot .sysset { cursor: pointer; letter-spacing: 1px; }
.login-foot .sysset:hover { color: var(--txt-dim); text-decoration: underline; text-underline-offset: 3px; }
.login-foot .back { cursor: pointer; letter-spacing: 1px; }
.login-foot .back:hover { color: var(--txt-dim); }

/* 系统设置抽屉（施工图 02 §十一） */
.setdrawer {
  position: absolute; right: 4%; top: 56px;
  width: 340px; max-width: 90%;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  padding: 18px;
  z-index: 5;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6);
  animation: focusin 0.2s ease;
}
.setdrawer h3 { font-size: 13px; letter-spacing: 2px; color: var(--gold); margin-bottom: 14px; font-weight: 500; }
.setdrawer .row { margin-bottom: 14px; }
.setdrawer .row label { display: block; font-size: 11.5px; color: var(--txt-dim); margin-bottom: 5px; letter-spacing: 1px; }
.setdrawer .row input {
  width: 100%; padding: 8px 10px;
  background: var(--bg-deep); border: 1px solid var(--line-hi);
  color: var(--txt); font-family: var(--mono); font-size: 14px;
}
.setdrawer .row input:focus { outline: none; border-color: var(--gold); }
.setdrawer .row .sync { font-size: 12px; color: var(--txt-faint); font-family: var(--mono); }
.setdrawer .btn { width: 100%; text-align: center; }

/* 登录成功黑屏转场 */
.boot {
  position: fixed; inset: 0; z-index: 200; background: #04060a;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  font-family: var(--mono); font-size: 15px; color: var(--txt-dim); letter-spacing: 2px;
}
.boot .v { color: var(--gold); }
.boot .cursor { width: 10px; height: 18px; background: var(--txt); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.15; } }

/* ============================================================
   三、第二~四幕 · 系统外壳（电脑 95% + 外围 5% 值班室）
   ============================================================ */
.monitor-shell {
  position: fixed; inset: 0; z-index: 1;
  background:
    radial-gradient(1.5px 1.5px at 8% 20%, rgba(200,48,42,0.8) 50%, transparent 51%),
    radial-gradient(30% 20% at 92% 12%, rgba(26,39,64,0.6) 0%, transparent 70%),
    linear-gradient(180deg, #131e30 0%, #060b14 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* 外围 5% 的暗部值班室暗示：LED 钟一角 + 桌沿 */
.monitor-shell::before {
  content: ""; position: absolute; right: 1.2%; top: 2.5%;
  width: 52px; height: 34px;
  background: linear-gradient(180deg, #131e30, #07090b);
  border: 1px solid rgba(212,169,90,0.4); border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.monitor-shell::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3%;
  background: linear-gradient(180deg, #241e18, #120e0a);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
}
.rim-led {
  position: fixed; right: 1.45%; top: 2.8%; z-index: 2;
  font-family: var(--mono); font-size: 11px; color: var(--led);
  text-shadow: 0 0 7px rgba(179,56,56,0.7);
  letter-spacing: 1px; pointer-events: none;
}
.monitor {
  position: relative;
  width: min(95vw, 1720px);
  height: min(93vh, 920px);
  background: #0c1420;
  border: 7px solid #0a1220;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(212,169,90,0.45), 0 24px 80px rgba(0,0,0,0.65), 0 0 44px rgba(212,169,90,0.05);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* 系统顶栏（施工图二 §二：约 7%~9%） */
.sys-top {
  display: flex; align-items: center; gap: 18px;
  padding: 8px 16px;
  background: linear-gradient(180deg, #1a2740 0%, #0c1420 100%);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--txt-dim);
  flex-shrink: 0;
}
.sys-top .brand { color: var(--gold); letter-spacing: 2px; }
.sys-top .sp { flex: 1; }
.sys-top .clock { font-family: var(--mono); color: var(--txt); letter-spacing: 1px; }
.sys-top .user { font-family: var(--mono); }
.sys-top .user b { color: var(--gold); font-weight: 400; }

/* 主体：左模块导航 + 内容 */
.sys-main { flex: 1; display: flex; overflow: hidden; }
.sys-side {
  width: 148px; flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 10px 0;
}
.sys-side a {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  font-size: 13px; color: var(--txt-dim);
  text-decoration: none; letter-spacing: 1px;
  position: relative;
  transition: background 0.12s, color 0.12s;
}
.sys-side a:hover { background: rgba(255,255,255,0.03); color: var(--txt); }
.sys-side .side-sep { height: 1px; background: var(--line); margin: 10px 12px; }
.sys-side a.side-exit { font-size: 12px; color: var(--txt-faint); letter-spacing: 2px; }
.sys-side a.side-exit:hover { color: var(--gold); background: rgba(201,168,106,0.05); }
.sys-side a.cur { color: var(--gold); background: rgba(201,168,106,0.07); border-right: 2px solid var(--gold); }
.sys-side a .dot {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--warn-2);
  box-shadow: 0 0 6px rgba(154,62,69,0.8);
}
.sys-side a .seen {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: var(--txt-faint);
}
.sys-content { flex: 1; overflow-y: auto; padding: 20px 22px 80px; position: relative; }
.sys-content h2.page-t {
  font-family: var(--title);
  font-size: 20px; letter-spacing: 4px; color: var(--gold-bright);
  margin-bottom: 4px; font-weight: 400;
}
.sys-content .page-sub { font-size: 12px; color: var(--txt-faint); margin-bottom: 18px; letter-spacing: 1px; }

/* 模块切换的旧网页加载感 */
.loading-flash { position: fixed; inset: 0; z-index: 90; background: rgba(4,6,10,0.6); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--txt-faint); letter-spacing: 2px; }

/* 终局暗红通知条（施工图四 §三） */
.finale-bar {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 18px;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(154,62,69,0.16) 0%, rgba(20,27,37,0.9) 70%);
  border: 1px solid rgba(212,101,95,0.55);
  border-left: 3px solid var(--warn);
  animation: barin 0.5s ease;
}
@keyframes barin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.finale-bar .t { font-size: 13.5px; color: var(--txt); letter-spacing: 1px; }
.finale-bar .t .st { color: var(--warn); letter-spacing: 2px; }
.finale-bar .cd { font-family: var(--mono); font-size: 14px; color: var(--warn); white-space: nowrap; }
.finale-bar .btn { flex-shrink: 0; padding: 6px 16px; font-size: 13px; letter-spacing: 2px; }

/* 馆方首次通知 */
.first-notice {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 420px; max-width: 88%;
  background: var(--panel-2);
  border: 1px solid var(--line-hi);
  padding: 26px 24px;
  z-index: 30;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.first-notice h3 { font-size: 14px; letter-spacing: 2px; color: var(--gold); margin-bottom: 12px; font-weight: 500; }
.first-notice p { font-size: 13.5px; color: var(--txt); line-height: 1.9; }
.first-notice .btn { margin-top: 18px; width: 100%; text-align: center; }

/* 系统建议（轻引导） */
.sys-hint { font-size: 12px; color: var(--txt-faint); margin-bottom: 14px; letter-spacing: 1px; }
.sys-hint .lk { color: var(--gold-dim); }

/* ===== 通用组件（沿用 v0.1，幕二~四共用） ===== */
.notice-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  padding: 28px 26px;
}
.notice-card .tag {
  display: inline-block;
  font-size: 12px; color: var(--warn);
  border: 1px solid rgba(212,101,95,0.5);
  padding: 1px 10px; letter-spacing: 2px; margin-bottom: 14px;
}
.notice-card h1 { font-size: 22px; font-weight: 600; letter-spacing: 2px; margin-bottom: 6px; }
.notice-card .meta { font-family: var(--mono); font-size: 13px; color: var(--txt-dim); margin-bottom: 16px; }
.notice-card .body { color: var(--txt); max-width: 620px; }
.notice-card .body p { margin-bottom: 10px; }

.btn {
  display: inline-block;
  padding: 10px 26px;
  border: 1px solid var(--gold-dim);
  background: transparent;
  color: var(--gold);
  font-size: 14px; letter-spacing: 3px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  user-select: none;
}
.btn:hover { background: rgba(201,168,106,0.1); border-color: var(--gold); box-shadow: 0 0 18px rgba(201,168,106,0.15); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn.ghost { color: var(--txt-dim); border-color: var(--line-hi); }
.btn.ghost:hover { color: var(--txt); border-color: var(--txt-dim); background: rgba(255,255,255,0.03); box-shadow: none; }
.btn.warn { color: var(--warn); border-color: rgba(212,101,95,0.5); }
.btn.warn:hover { background: rgba(212,101,95,0.08); border-color: var(--warn); box-shadow: 0 0 18px rgba(212,101,95,0.12); }
.btn[disabled] { opacity: 0.4; cursor: default; pointer-events: none; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }

/* 表格 */
.rec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rec-table th {
  text-align: left; font-weight: 500; font-size: 12px; letter-spacing: 1px;
  color: var(--txt-dim); padding: 8px 10px; border-bottom: 1px solid var(--line-hi);
  background: var(--panel);
}
.rec-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rec-table tr:hover td { background: rgba(255,255,255,0.02); }
.rec-table .mono { font-family: var(--mono); font-size: 13px; }
.rec-table .empty { color: var(--txt-faint); }
.rec-table tr.odd-row { background: rgba(154,62,69,0.07); }
.rec-table tr.odd-row td:first-child { border-left: 3px solid var(--warn-2); }
.rec-table tr.hl-row td { background: rgba(201,168,106,0.1); }
.rec-table tr.hl-row td:first-child { border-left: 3px solid var(--gold); }
.rec-table .note { font-size: 12px; color: var(--txt-faint); }
.table-wrap { overflow-x: auto; }
.table-foot { font-size: 12px; color: var(--txt-faint); margin-top: 10px; letter-spacing: 1px; }

/* 日志条目 */
.log-line { font-family: var(--mono); font-size: 13px; color: var(--txt-dim); padding: 5px 8px; border-left: 2px solid transparent; }
.log-line .t { color: var(--txt-faint); margin-right: 10px; }
.log-line.hi { color: var(--warn); border-left-color: var(--warn); background: rgba(212,101,95,0.06); }
.log-line.you { color: var(--gold); border-left-color: var(--gold); background: rgba(201,168,106,0.06); }
.log-line .ok { color: var(--ok); }
/* D-0913 hover 轻高亮（施工图二 §6.4） */
.log-line .me { cursor: default; transition: color 0.15s, text-shadow 0.15s; }
.log-line .me:hover { color: var(--gold); text-shadow: 0 0 8px rgba(201,168,106,0.5); }

/* 文本块 */
.panel-block { border: 1px solid var(--line); background: var(--panel); padding: 20px; margin-bottom: 16px; }
.panel-block h2 { font-size: 16px; letter-spacing: 2px; color: var(--gold); font-weight: 500; margin-bottom: 12px; }
.panel-block h3 { font-size: 14px; color: var(--txt); font-weight: 500; margin: 14px 0 6px; }
.panel-block p { margin-bottom: 10px; color: var(--txt); }
.panel-block .dim { color: var(--txt-dim); font-size: 13px; }
.panel-block .faint { color: var(--txt-faint); font-size: 12px; }
.panel-block .mono { font-family: var(--mono); font-size: 13px; color: var(--txt-dim); }

/* 信：展柜灯光下（旧纸档案感） */
.letter {
  max-width: 460px; margin: 8px auto 14px;
  padding: 30px 26px;
  background: linear-gradient(180deg, #ede0c2 0%, #e3d3ad 100%);
  color: var(--ink);
  font-family: var(--hand);
  font-size: 19px; line-height: 2.2; letter-spacing: 2px;
  text-align: center;
  box-shadow: 0 0 40px rgba(212,169,90,0.15);
  position: relative;
}
.letter .no {
  position: absolute; right: 10px; bottom: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 1px;
}
/* 内心灰字（施工图三 §八）：无边框、低对比、慢慢浮现 */
.innervoice {
  max-width: 420px; margin: 18px auto 0;
  font-size: 14px; color: var(--txt-dim);
  letter-spacing: 2px; line-height: 2;
  animation: ivfade 3s ease forwards;
}
@keyframes ivfade { from { opacity: 0; } to { opacity: 1; } }

/* 照片背面 */
.photo-back {
  max-width: 380px; margin: 10px auto; padding: 22px;
  background: #ede0c2; color: var(--ink);
  border: 1px dashed #b8903f;
  font-family: var(--hand);
  font-size: 16px; letter-spacing: 2px; text-align: center;
}

/* 群聊 */
.chat-list { display: flex; flex-direction: column; gap: 12px; max-width: 680px; }
.chat-msg { max-width: 78%; padding: 8px 14px; font-size: 14px; }
.chat-msg .who { font-size: 12px; color: var(--txt-faint); margin-bottom: 2px; }
.chat-msg .who .t { font-family: var(--mono); color: var(--txt-faint); margin-left: 6px; }
.chat-msg.left { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); }
.chat-msg.right { align-self: flex-end; background: rgba(201,168,106,0.12); border: 1px solid var(--gold-dim); }
.chat-day { text-align: center; font-size: 12px; color: var(--txt-faint); margin: 16px 0 4px; letter-spacing: 2px; }
.chat-void { font-size: 13px; color: var(--txt-faint); margin-top: 20px; letter-spacing: 1px; animation: ivfade 2.4s ease forwards; }

/* 谜题交互 */
.puzzle-box { border: 1px dashed var(--gold-dim); background: rgba(201,168,106,0.04); padding: 18px; margin: 14px 0; }
.puzzle-box .q { color: var(--gold); font-size: 14px; letter-spacing: 1px; margin-bottom: 10px; }
.puzzle-box input[type="text"], .puzzle-box input[type="password"] {
  background: var(--bg-deep);
  border: 1px solid var(--line-hi);
  color: var(--txt);
  font-family: var(--mono);
  font-size: 16px; letter-spacing: 3px;
  padding: 10px 14px; width: 100%; max-width: 320px;
}
.puzzle-box input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 12px rgba(201,168,106,0.2); }
.puzzle-box .in-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.puzzle-box .in-row input { flex: 1; min-width: 160px; max-width: 300px; width: auto; }
.puzzle-box .feedback { font-size: 13px; margin-top: 8px; min-height: 20px; }
.puzzle-box .feedback.err { color: var(--warn); }
.puzzle-box .feedback.ok { color: var(--ok); }

/* 监控片段排序 */
.clip-row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.clip {
  flex: 1 1 150px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 12px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  min-height: 130px;
  position: relative;
}
.clip .code { font-family: var(--mono); color: var(--gold-dim); font-size:12px; display: block; margin-bottom: 6px; }
.clip:hover { border-color: var(--gold-dim); background: var(--panel-2); }
.clip.picked { border-color: var(--gold); background: rgba(201,168,106,0.1); }
.clip.picked::after {
  content: attr(data-order);
  position: absolute; top: 8px; right: 10px;
  font-family: var(--mono); font-size: 18px; color: var(--gold);
}
.clip.shake { animation: shake 0.4s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-4px); }
}
/* 监控画面帧（AI 生成监控图 + 滤镜 + 噪点） */
.frame {
  position: relative; height: 74px; margin-bottom: 8px;
  background: #05080c; border: 1px solid #141a22; overflow: hidden;
}
.frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.frame img.cctv {
  filter: grayscale(1) brightness(0.75) contrast(1.28);
}
.frame .noise { /* 噪点盖在图片上 */
  z-index: 1;
}
.frame .ts {
  position: absolute; left: 4px; top: 3px;
  font-family: var(--mono); font-size: 10px; color: rgba(217,226,233,0.8);
  text-shadow: 0 0 4px rgba(0,0,0,0.8); z-index: 2;
}
.frame .rec { position: absolute; right: 4px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); animation: blink 1.4s steps(1) infinite; z-index: 2; }
.frame .noise {
  position: absolute; inset: 0; opacity: 0.16; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.frame .lost {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: #04060a;
}
.frame .lost .l1 { font-family: var(--mono); font-size: 11px; color: #6b7a88; letter-spacing: 2px; }
.frame .lost .l2 { font-family: var(--mono); font-size: 9px; color: #414c58; letter-spacing: 1px; }

/* 签名比对 */
.sig-compare { position: relative; margin: 16px auto; max-width: 460px; }
.sig-compare .sig { display: block; width: 100%; border: 1px solid var(--line); background: #f2ecdd; }
.sig-compare .overlay { position: absolute; inset: 0; opacity: 0.5; transition: opacity 0.08s; }
.sig-compare input[type="range"] { width: 100%; margin-top: 10px; accent-color: var(--gold); }
.sig-compare .cap { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--txt-faint); margin-bottom: 6px; letter-spacing: 1px; }

/* 调查笔记 */
.note-drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 320px; max-width: 86vw;
  background: var(--panel);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 500;
  display: flex; flex-direction: column;
}
.note-drawer.open { transform: translateX(0); }
.note-drawer .hd { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--gold); letter-spacing: 2px; }
.note-drawer .hd .cnt { float: right; font-family: var(--mono); color: var(--txt-dim); }
.note-drawer .list { flex: 1; overflow-y: auto; padding: 14px 16px; }
/* 当前目标：按进度给一句指引（硬核模式不显示） */
.note-drawer .list .goal {
  font-size: 12.5px; color: #c9b684; line-height: 1.8;
  border-bottom: 1px dashed rgba(201,168,106,0.3);
  padding: 2px 2px 10px; margin-bottom: 10px; letter-spacing: 1px;
}
.note-drawer .list .goal .g {
  display: block; font-size: 10px; color: rgba(201,168,106,0.6);
  letter-spacing: 3px; margin-bottom: 2px;
}
.note-drawer .list .item {
  font-size: 13px; color: var(--txt-dim); padding: 9px 0; border-bottom: 1px dashed var(--line);
  cursor: default; transition: color 0.12s;
}
.note-drawer .list .item:hover { color: var(--txt); }
.note-drawer .list .item .t { font-family: var(--mono); font-size: 11px; color: var(--txt-faint); display: block; margin-bottom: 2px; letter-spacing: 1px; }
.note-drawer .list .empty { color: var(--txt-faint); font-size: 13px; letter-spacing: 1px; }
.note-fab {
  position: fixed; right: 14px; bottom: 14px; z-index: 499;
  border: 1px solid var(--gold-dim); background: var(--panel); color: var(--gold);
  font-size: 12px; letter-spacing: 2px; padding: 8px 14px; cursor: pointer;
}
.note-fab:hover { border-color: var(--gold); }
.note-fab .n { font-family: var(--mono); margin-left: 6px; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 46px; transform: translateX(-50%) translateY(8px);
  background: var(--panel-2); border: 1px solid var(--line-hi); color: var(--txt);
  font-size: 13px; padding: 9px 20px; letter-spacing: 1px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 9999;
  max-width: 86vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   四、第四幕 · 终局
   ============================================================ */
/* 操作日志确认页 */
.confirm-log { max-width: 560px; margin: 30px auto; }
.confirm-log .say { font-size: 13.5px; color: var(--txt-dim); margin-top: 16px; letter-spacing: 1px; }

/* 终局选择页 */
.finale-wrap { display: flex; gap: 24px; align-items: flex-start; }
.finale-evidence { flex: 0 0 35%; }
.finale-choices { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.ev-item {
  font-size: 12.5px; color: var(--txt-dim);
  padding: 9px 12px; border-left: 2px solid var(--line-hi);
  background: rgba(255,255,255,0.015);
  margin-bottom: 8px; line-height: 1.6;
}
.ev-item .k { font-size: 11px; color: var(--txt-faint); letter-spacing: 2px; display: block; margin-bottom: 2px; }
.ev-item.gold { border-left-color: var(--gold-dim); }
.ev-item.gold .k { color: var(--gold-dim); }

/* 处理方案卡片（施工图四 §六） */
.choice-card {
  display: block; width: 100%; text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 16px 18px 14px;
  cursor: pointer;
  color: var(--txt);
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
  position: relative;
}
.choice-card .t { font-size: 15px; letter-spacing: 2px; margin-bottom: 4px; }
.choice-card .sub { font-size: 12.5px; color: var(--txt-dim); }
.choice-card .hint {
  font-size: 12px; color: var(--txt-faint);
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.25s, opacity 0.25s, margin 0.25s;
  letter-spacing: 1px;
}
.choice-card:hover { border-color: var(--gold-dim); transform: translateX(4px); }
.choice-card:hover .hint { max-height: 40px; opacity: 1; margin-top: 6px; }
.choice-card.danger { border-color: rgba(212,101,95,0.35); }
.choice-card.danger .t { color: var(--warn); }
.choice-card.danger:hover { border-color: var(--warn); background: rgba(212,101,95,0.05); }
.choice-card.dark { border-color: rgba(107,155,214,0.3); }
.choice-card.dark .t { color: var(--info); }
.choice-card.dark:hover { border-color: var(--info); background: rgba(107,155,214,0.05); }
.choice-card.evidence { border-color: rgba(201,168,106,0.35); }
.choice-card.evidence .t { color: var(--gold); }
.choice-card.evidence:hover { border-color: var(--gold); background: rgba(201,168,106,0.05); }
/* hover 时其余卡片变暗 */
.choice-group:hover .choice-card:not(:hover) { opacity: 0.55; }
.finale-foot { margin-top: 20px; font-size: 11.5px; color: var(--txt-faint); letter-spacing: 2px; }
/* 隐藏结局小字（施工图四 §十一：接近背景色） */
.hidden-hint {
  margin-top: 26px; font-size: 12px; letter-spacing: 2px;
  color: rgba(92,101,117,0.28);
  cursor: pointer; transition: color 0.3s;
  display: inline-block;
}
.hidden-hint:hover { color: var(--txt-faint); }

/* 危险操作页（选项2） */
.danger-page { max-width: 520px; margin: 30px auto; text-align: center; }
.danger-page .rec {
  border: 1px solid rgba(212,101,95,0.4);
  background: rgba(212,101,95,0.04);
  padding: 18px; font-family: var(--mono); font-size: 14px;
  color: var(--warn); margin: 16px 0; letter-spacing: 1px;
}
.danger-page .rec .dim { color: var(--txt-dim); }
.danger-page .hint-under { font-size: 11.5px; color: var(--txt-faint); letter-spacing: 1px; min-height: 18px; margin-top: 4px; }
.danger-page .sync {
  position: fixed; right: 18px; top: 14px; z-index: 60;
  font-family: var(--mono); font-size: 12px; color: var(--txt-dim); letter-spacing: 1px;
  animation: syncfade 2.2s ease forwards;
}
@keyframes syncfade { 0% { opacity: 0; } 25% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* 上传进度 */
.upload { max-width: 460px; margin: 40px auto; text-align: center; }
.upload .bar { height: 3px; background: var(--line); margin-top: 14px; position: relative; overflow: hidden; }
.upload .bar i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--txt-dim); transition: width 0.3s;
}
.upload .pct { font-family: var(--mono); font-size: 13px; color: var(--txt-dim); margin-top: 8px; letter-spacing: 2px; }

/* ============================================================
   五、结局演出（施工图四 §十二：黑屏时间跳切 + 克制静态场景）
   ============================================================ */
.end-stage {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg-deep);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
.end-black {
  position: fixed; inset: 0; z-index: 110;
  background: #04060a;
  display: flex; align-items: center; justify-content: center;
  animation: endblack 3s ease forwards;
}
.end-black span {
  font-size: 16px; color: var(--txt-dim); letter-spacing: 6px;
  animation: ivfade 2s ease forwards;
}
@keyframes endblack { 0%, 60% { opacity: 1; } 100% { opacity: 0; pointer-events: none; } }
.end-scene {
  position: relative; max-width: 620px; width: 90%;
  padding: 30px;
  border: 1px solid var(--line);
  background: var(--panel);
  text-align: left;
  animation: ivfade 2.4s ease forwards;
}
.end-scene.plain { background: transparent; border: none; }
.end-scene .kicker { font-size: 12px; color: var(--txt-faint); letter-spacing: 3px; margin-bottom: 14px; }
.end-scene p { font-size: 15px; color: var(--txt-dim); line-height: 2.1; margin-bottom: 12px; }
.end-scene p b { color: var(--txt); font-weight: 500; }
.end-scene p.faint { font-size: 12.5px; color: var(--txt-faint); }
.end-scene .hand { font-family: var(--hand); font-size: 17px; color: var(--txt); letter-spacing: 1px; }
.end-scene .paper {
  background: linear-gradient(180deg, #ede0c2, #e3d3ad);
  color: var(--ink); font-family: var(--hand);
  padding: 22px; font-size: 16px; letter-spacing: 2px; line-height: 2.1;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.end-name {
  margin-top: 26px; text-align: center;
  font-family: var(--title);
  font-size: 24px; letter-spacing: 10px; color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(238,194,106,0.3);
  animation: ivfade 2.6s ease forwards;
}
.end-actions {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 120;
  animation: ivfade 1.5s ease forwards;
}
.end-actions .btn { background: rgba(11,16,22,0.85); }
/* 成就一览（探索成就 + 结局收集进度） */
.end-actions .ach { text-align: center; }
.end-actions .ach .ach-line { font-size: 11px; color: var(--txt-faint); letter-spacing: 3px; margin-bottom: 8px; }
.end-actions .ach .ach-badges { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.end-actions .ach .ach-b { font-size: 12px; color: #4a515c; letter-spacing: 1.5px; }
.end-actions .ach .ach-b.on { color: var(--gold); text-shadow: 0 0 8px rgba(201,168,106,0.45); }
.end-actions .ach-btns { display: flex; gap: 16px; }

/* 监控雪花结局 */
.snow {
  position: fixed; inset: 0; z-index: 105;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  animation: snowin 2s ease forwards;
}
@keyframes snowin { from { opacity: 0; } to { opacity: 0.55; } }

/* 窗外泛白（隐藏结局） */
.dawn { position: fixed; inset: 0; z-index: 105; background: linear-gradient(180deg, #24354e 0%, #0c1420 100%); animation: ivfade 3s ease forwards; }

/* ============================================================
   六、移动端
   ============================================================ */
.rotate-hint {
  display: none;
  position: fixed; left: 50%; top: 10px; transform: translateX(-50%);
  z-index: 9997;
  font-size: 12px; color: var(--txt-dim); letter-spacing: 2px;
  background: rgba(20,27,37,0.9); border: 1px solid var(--line);
  padding: 6px 14px;
}
@media (max-width: 900px) {
  .sys-side { width: 118px; }
  .sys-side a { font-size: 12px; padding: 8px 10px; }
  .sys-content { padding: 16px 14px 80px; }
}
@media (max-width: 640px) {
  .rotate-hint { display: block; }
  .sys-side { width: 96px; }
  .sys-side a { font-size: 11px; padding: 7px 8px; letter-spacing: 0; }
  .sys-content { padding: 12px 10px 80px; }
  .rec-table { font-size: 12.5px; }
  .rec-table td, .rec-table th { padding: 6px 7px; }
  .finale-wrap { flex-direction: column; }
  .finale-evidence { flex: none; width: 100%; }
  .login-card { margin-top: 40px; padding: 22px 18px; }
  .note-drawer { width: 78vw; }
  .clip-row { flex-direction: column; }
  .monitor { width: 97vw; height: 95vh; }
  .rim-led { display: none; }
  .monitor-shell::before { display: none; }
}

/* ---- 桌角邀请函（透明热区，电脑右、灯左空隙；无框，悬停柔光） ---- */
.sc-ticket {
  position: absolute; left: 77.5%; top: 68%; width: 8%; height: 6%;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.6s ease;
  box-shadow: none;
}
.sc-ticket:hover { background: radial-gradient(70% 70% at 50% 50%, rgba(238,194,106,0.16), transparent 80%); }
.sc-ticket::after {
  content: "邀请函"; position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%);
  font-size: 14px; letter-spacing: 4px; color: rgba(238,194,106,0.95); white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8); opacity: 0; transition: opacity 0.25s;
}
.sc-ticket:hover::after { opacity: 1; }

/* ---- 邀请函近景 ---- */
.ticket-view { text-align: center; }
.ticket-img { display: block; width: min(84vw, 720px); margin: 0 auto 14px; border-radius: 4px; box-shadow: 0 8px 30px rgba(0,0,0,0.55); }
.ticket-view .dim { font-size: 13px; color: var(--txt-faint); letter-spacing: 2px; }