:root {
  --bg: #07090c;
  --panel: #10151b;
  --panel2: #161d25;
  --line: #243040;
  --text: #e8e3d6;
  --dim: #8a948f;
  --amber: #f2c14e;
  --red: #ff3b30;
  --green: #7dd3a0;
  --sky: #9cc9e8;
  --mono: ui-monospace, Menlo, Consolas, 'Courier New', monospace;
  --sans: system-ui, -apple-system, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.6; }
body { min-height: 100vh; -webkit-tap-highlight-color: transparent; }
a { color: var(--amber); }
h1, h2, h3 { margin: 0 0 .5em; font-weight: 700; letter-spacing: .02em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
.dim { color: var(--dim); font-size: .88rem; }
.mono { font-family: var(--mono); }
.hidden { display: none !important; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row > .grow { flex: 1; }
.stack > * + * { margin-top: 10px; }

/* 表單 */
label { display: block; font-size: .85rem; color: var(--dim); margin: 10px 0 4px; }
input, textarea, select {
  width: 100%; background: #0a0e13; color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font: inherit; outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--amber); }
textarea { min-height: 80px; resize: vertical; }
input[type=checkbox] { width: auto; }
input[type=range] { padding: 0; }
.btn {
  appearance: none; border: 1px solid var(--line); background: var(--panel2); color: var(--text);
  padding: 9px 14px; border-radius: 8px; font: inherit; font-size: .92rem; cursor: pointer; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--amber); color: #1a1405; border-color: var(--amber); font-weight: 700; }
.btn.danger { border-color: #6b2a26; color: #ffb3ad; }
.btn.small { padding: 5px 10px; font-size: .82rem; }
.btn:disabled { opacity: .45; pointer-events: none; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.card + .card { margin-top: 12px; }
.tag { display: inline-block; font-family: var(--mono); font-size: .72rem; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--line); color: var(--dim); }
.tag.red { color: var(--red); border-color: #5a1f1c; }
.tag.amber { color: var(--amber); border-color: #5b4818; }
.tag.green { color: var(--green); border-color: #1f4a33; }

/* Toast / Modal */
#toast {
  position: fixed; left: 50%; bottom: calc(84px + var(--safe-b)); transform: translateX(-50%) translateY(20px);
  background: #000c; color: #fff; padding: 9px 16px; border-radius: 20px; font-size: .9rem; opacity: 0;
  transition: .25s; pointer-events: none; z-index: 99; max-width: 88vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.modal { position: fixed; inset: 0; background: #000b; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; width: 100%; max-width: 520px; max-height: 88vh; overflow: auto; position: relative; }
.modal-x { position: absolute; top: 6px; right: 10px; background: none; border: 0; color: var(--dim); font-size: 26px; cursor: pointer; }

/* ---------- 監視器 ---------- */
.monitor {
  position: relative; aspect-ratio: 4 / 3; background: #0b110d; border-radius: 10px; overflow: hidden;
  border: 1px solid #1d2a22; box-shadow: inset 0 0 60px #000, 0 0 0 4px #0c0f13;
}
.monitor .bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(.5) contrast(1.15) brightness(.85); animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -1%); } }
.monitor .noise {
  position: absolute; inset: -50%; opacity: .09; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-5%,3%)} 40%{transform:translate(4%,-4%)} 60%{transform:translate(-3%,5%)} 80%{transform:translate(5%,2%)} 100%{transform:translate(0,0)} }
.monitor .scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.25) 0 2px, transparent 2px 4px); }
.monitor .vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.75) 100%); animation: flick 5s infinite; }
@keyframes flick { 0%,96%,100% { opacity: 1; } 97% { opacity: .7; } 98% { opacity: 1; } 99% { opacity: .85; } }
.monitor .hud { position: absolute; inset: 0; z-index: 2; padding: 10px 12px; font-family: var(--mono); font-size: .78rem; color: #e9f5ec; text-shadow: 0 0 4px #000; pointer-events: none; }
.hud .rec { position: absolute; top: 10px; left: 12px; display: flex; align-items: center; gap: 6px; }
.hud .rec i { width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .15; } }
.hud .camname { position: absolute; top: 10px; right: 12px; }
.hud .ts { position: absolute; bottom: 10px; right: 12px; }
.hud .corner { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(233,245,236,.7); }
.hud .c1 { top: 32px; left: 12px; border-right: 0; border-bottom: 0; }
.hud .c2 { top: 32px; right: 12px; border-left: 0; border-bottom: 0; }
.hud .c3 { bottom: 32px; left: 12px; border-right: 0; border-top: 0; }
.hud .c4 { bottom: 32px; right: 12px; border-left: 0; border-top: 0; }
.monitor .caption {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 40px 14px 34px; font-size: .92rem; line-height: 1.55;
  background: linear-gradient(transparent, rgba(0,0,0,.82) 40%); max-height: 70%; overflow: auto;
}
.monitor.empty .caption { color: var(--dim); }
.cam-pin .bg { filter: grayscale(.85) contrast(1.25) brightness(.8) sepia(.15); border-radius: 50%; }
.cam-pin::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at center, transparent 55%, #000 80%); }
.cam-street .bg { filter: grayscale(.4) contrast(1.1) hue-rotate(-10deg) brightness(.9); }
.cam-car .bg { filter: grayscale(.2) contrast(1.15) saturate(.8); transform: scale(1.15); }
.cam-drone .bg { filter: saturate(.7) contrast(1.05); }
.cam-hidden .bg { filter: grayscale(1) contrast(1.4) brightness(.75); }
.cam-wide .bg { filter: grayscale(.3) contrast(1.05) sepia(.2); }
.monitor.glitch .bg { animation: kenburns 24s infinite alternate, glitchy .4s steps(2) 3; }
@keyframes glitchy { 0% { transform: translate(6px,0) skewX(4deg); filter: hue-rotate(90deg) contrast(2); } 100% { transform: none; } }

.camrow { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: none; }
.camrow::-webkit-scrollbar { display: none; }
.camrow button { flex: none; font-family: var(--mono); font-size: .75rem; background: #0c1116; color: var(--dim); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.camrow button.on { color: var(--amber); border-color: var(--amber); }

/* 懷疑值 */
.susp { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .8rem; }
.susp .bar { flex: 1; height: 8px; background: #0a0e13; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.susp .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--amber) 60%, var(--red)); transition: width .8s; }

/* 時間軸 */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { border-left: 2px solid var(--line); padding: 2px 0 14px 14px; position: relative; cursor: pointer; }
.timeline li::before { content: ''; position: absolute; left: -6px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--panel2); border: 2px solid var(--line); }
.timeline li.on::before { background: var(--amber); border-color: var(--amber); }
.timeline li.glitch::before { background: var(--red); border-color: var(--red); }
.timeline .t { font-family: var(--mono); font-size: .75rem; color: var(--dim); }
.timeline .h { font-weight: 600; }
.diary { font-family: 'Georgia', 'Songti TC', 'Noto Serif TC', serif; background: #e9e1cc; color: #2a2418; border-radius: 6px; padding: 12px 14px; font-size: .92rem; transform: rotate(-.4deg); box-shadow: 0 4px 12px #0008; }
.diary .dim { color: #6e6450; }

/* Discord 引導 */
.dc-card { display: flex; gap: 12px; align-items: flex-start; background: #161a33; border: 1px solid #3b4280; border-radius: 12px; padding: 14px; text-align: left; color: var(--text); }
.dc-card .dc-ico { font-size: 1.6rem; line-height: 1; }
.dc-card .dc-sub { color: #b9bfe8; font-size: .88rem; margin-top: 2px; }
.dc-btn { background: #5865f2; border-color: #5865f2; color: #fff; font-weight: 700; }