/* 镜城之眼 · 网页版原型 — 明亮浅色主题（v0.9 浅色版，配色全换、布局不变） */
:root {
  --bg: #f2f6f3;                 /* 页面底色：浅青白 */
  --panel: rgba(255, 255, 255, .94);
  --line: #c9d8cf;               /* 边框：浅绿灰 */
  --line-bright: #0e9f5e;        /* 主强调绿（浅底可读） */
  --text: #1e2f28;               /* 正文：深绿黑 */
  --text-dim: #5d7a6c;           /* 次级文字 */
  --amber: #b45309;              /* 强调橙 */
  --red: #dc2626;
  --danger: #dc2626;
  --tag-person: #dc2626; --tag-place: #2563eb; --tag-item: #16a34a;
  --tag-action: #b45309; --tag-time: #6b7280; --tag-motive: #7c3aed;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Cascadia Mono", "JetBrains Mono", Consolas, "Microsoft YaHei", monospace;
  font-size: 28px;          /* 原 14px ×2 */
  line-height: 1.7;
  overflow: hidden;
}
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(0deg, rgba(20,60,45,.05) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.dim { color: var(--text-dim); font-size: .85em; }
.hidden { display: none !important; }

/* ---------- 顶栏 ---------- */
#topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: #e9f1ec;
  height: 76px;
}
.brand { font-weight: 700; letter-spacing: 3px; color: #0b7a4c; text-shadow: 0 1px 0 rgba(255,255,255,.6); white-space: nowrap; font-size: 30px; }
.brand .dim { letter-spacing: 1px; }
.objective { flex: 1; text-align: center; color: var(--amber); font-size: 26px; }
.stats { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.stat { border: 1px solid var(--line); padding: 5px 14px; border-radius: 6px; background: #fff; font-size: 24px; }

/* ---------- 按钮 ---------- */
.btn {
  background: #ffffff; color: var(--line-bright);
  border: 1px solid var(--line-bright); border-radius: 8px;
  padding: 10px 24px; font-family: inherit; font-size: 26px; cursor: pointer;
  transition: all .12s;
}
.btn:hover:not(:disabled) { background: var(--line-bright); color: #fff; box-shadow: 0 2px 10px rgba(14,159,94,.35); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.small { padding: 6px 18px; font-size: 24px; }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.danger:hover:not(:disabled) { background: var(--danger); color: #fff; }

/* ---------- 工作台 ---------- */
#workbench {
  display: flex; gap: 20px; padding: 20px;
  height: calc(100vh - 440px);
  min-height: 560px;
}
.window {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 2px 14px rgba(20, 60, 45, .08);
  display: flex; flex-direction: column; overflow: hidden;
}
.window-title {
  background: #dcebe2; padding: 10px 18px; font-size: 24px;
  color: #14532d; border-bottom: 1px solid var(--line);
  letter-spacing: 2px; flex: none;
}
#feed-panel { flex: 1.4; }
#side-panel { flex: 1; display: flex; flex-direction: column; gap: 20px; min-width: 560px; }
#chip-panel { flex: 1.1; min-height: 300px; }
#statement-panel { flex: 1; min-height: 300px; position: relative; }

/* ---------- 足迹面板 ---------- */
#feed-tabs { display: flex; gap: 8px; padding: 12px 16px 0; flex-wrap: wrap; }
#feed-tabs .tab {
  background: transparent; border: 1px solid var(--line); color: var(--text-dim);
  padding: 8px 20px; font-family: inherit; font-size: 24px; cursor: pointer; border-radius: 6px 6px 0 0;
}
#feed-tabs .tab.active { color: var(--line-bright); border-color: var(--line-bright); background: #fff; }
#feed-tabs .tab:hover:not(.active) { background: #f0f6f2; }
#feed-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.feed-entry { margin-bottom: 22px; }
.feed-entry .speaker { font-size: 24px; color: var(--amber); margin-bottom: 4px; }
.feed-entry .avatar { margin-right: 6px; }
.feed-entry .bubble {
  border-left: 3px solid var(--line-bright);
  padding: 8px 16px;
  background: rgba(14, 159, 94, .06); border-radius: 0 10px 10px 10px;
}
.file-card {
  border: 1px dashed var(--line-bright); border-radius: 8px; padding: 14px 20px;
  background: rgba(14, 159, 94, .05); margin-bottom: 16px; cursor: default;
}
.file-card .file-name { color: var(--amber); font-size: 24px; margin-bottom: 8px; }
.file-card .file-line { color: var(--text); white-space: pre-wrap; }
.panel-note { flex: none; padding: 10px 20px; font-size: 20px; color: var(--text-dim); border-top: 1px solid var(--line); }

/* ---------- 线索词锚点 ---------- */
.anchor {
  background: none; border: none; padding: 0 3px; margin: 0;
  color: var(--line-bright); text-decoration: underline dotted;
  font-family: inherit; font-size: inherit; cursor: pointer;
}
.anchor:hover { background: var(--line-bright); color: #fff; border-radius: 3px; }
.anchor.got { color: #9aa7a0; text-decoration: line-through; cursor: default; pointer-events: none; }

/* ---------- 词片库 ---------- */
#chip-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-wrap: wrap; gap: 14px; align-content: flex-start; }
.chip {
  padding: 8px 18px; border-radius: 8px; font-size: 24px; cursor: grab;
  border: 1px solid currentColor; background: #fff; user-select: none;
  box-shadow: 0 1px 4px rgba(20,60,45,.1);
}
.chip:hover { transform: translateY(-1px); }
.chip.selected { outline: 3px solid var(--line-bright); outline-offset: 2px; }
.chip.t-person { color: var(--tag-person); }
.chip.t-place { color: var(--tag-place); }
.chip.t-item { color: var(--tag-item); }
.chip.t-action { color: var(--tag-action); }
.chip.t-time { color: var(--tag-time); }
.chip.t-motive { color: var(--tag-motive); }
.chip .type-tag { font-size: 20px; opacity: .75; margin-right: 6px; }

/* ---------- 陈述卡 ---------- */
#statement-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.st-prompt { font-size: 22px; color: var(--text-dim); margin-bottom: 16px; }
.st-line { font-size: 28px; line-height: 2.1; }
.blank {
  display: inline-block; min-width: 160px; text-align: center;
  border-bottom: 2px dashed var(--line-bright);
  padding: 4px 14px; margin: 0 6px; cursor: pointer; border-radius: 4px;
  background: rgba(14,159,94,.05);
}
.blank.empty::after { content: "◻"; color: var(--text-dim); }
.blank.filled { background: rgba(14,159,94,.12); }
.blank.solved { border-bottom-style: solid; border-color: var(--line-bright); background: rgba(14,159,94,.18); }
.st-hint { margin-top: 16px; font-size: 22px; color: var(--text-dim); }
.st-actions { display: flex; gap: 14px; margin-top: 16px; align-items: center; }
.st-result { font-size: 22px; margin-top: 10px; }
.st-result.ok { color: var(--line-bright); }
.st-result.bad { color: var(--red); }
.shake { animation: shake .4s; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.lock-overlay {
  position: absolute; inset: 0; background: rgba(242,246,243,.88);
  display: flex; align-items: center; justify-content: center; z-index: 5;
}
.lock-box { text-align: center; color: var(--amber); font-size: 26px; }

/* ---------- 通讯器 ---------- */
#comms {
  position: fixed; left: 20px; bottom: 64px; width: 560px; height: 250px; z-index: 50;
}
#comms-body { flex: 1; overflow-y: auto; padding: 12px 20px; font-size: 24px; }
.msg { margin-bottom: 12px; }
.msg .from { color: var(--amber); font-size: 20px; }
.msg .txt { color: var(--text); }
.msg .caret::after { content: "▌"; animation: blink 1s steps(1) infinite; color: var(--line-bright); }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- 工具箱 ---------- */
#toolbar { position: fixed; right: 24px; bottom: 64px; z-index: 50; }
#btn-tool.pulse { animation: pulse 1.4s infinite; }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(14,159,94,.45); }
  50% { box-shadow: 0 0 0 12px rgba(14,159,94,0); }
}

/* ---------- 模态 ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(30,47,40,.38); z-index: 100;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.overlay .modal { pointer-events: auto; }
.modal { width: 780px; max-width: 94vw; max-height: 84vh; }
.modal-body { padding: 20px 26px; overflow-y: auto; }
.modal-body p { margin-bottom: 16px; white-space: pre-wrap; }
.modal-actions { padding: 16px 26px; border-top: 1px solid var(--line); display: flex; gap: 16px; justify-content: flex-end; }
.modal .window-title { cursor: move; user-select: none; }

/* 社工库 */
.tool-search { display: flex; gap: 14px; margin: 16px 0; }
#tool-input {
  flex: 1; background: #fff; color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; font-family: inherit;
  font-size: 24px;
}
#tool-input:focus { outline: none; border-color: var(--line-bright); }
#tool-input.drop-target {
  border-color: var(--amber);
  background: rgba(255, 237, 213, .6);
  box-shadow: 0 0 10px rgba(180,83,9,.25);
}
.tool-result-msg { color: var(--red); font-size: 24px; }
.profile-card { border: 1px solid var(--line-bright); border-radius: 8px; padding: 14px 22px; background: rgba(14,159,94,.05); }
.profile-card .p-name { color: var(--amber); font-size: 28px; margin-bottom: 10px; }
.profile-card .p-line { font-size: 24px; }

/* 抉择 */
.choice-opt {
  display: block; width: 100%; text-align: left; margin-bottom: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); padding: 16px 22px; font-family: inherit; cursor: pointer; font-size: 24px;
}
.choice-opt:hover { border-color: var(--line-bright); background: #f0f9f4; }
.choice-opt .opt-label { display: block; color: var(--line-bright); margin-bottom: 4px; }
.choice-opt .opt-detail { color: var(--text-dim); font-size: 20px; }

/* 终章 */
.epilogue-stats { display: flex; gap: 18px; flex-wrap: wrap; margin: 18px 0; }
.epilogue-stats .e-stat { border: 1px solid var(--line); border-radius: 8px; padding: 10px 22px; text-align: center; background: #fff; }
.epilogue-stats .e-val { color: var(--amber); font-size: 36px; }
.epilogue-stats .e-key { font-size: 20px; color: var(--text-dim); }

/* ---------- Toast ---------- */
#toast {
  position: fixed; top: 88px; left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--line-bright); color: var(--line-bright);
  padding: 12px 28px; border-radius: 8px; z-index: 200; font-size: 24px;
  box-shadow: 0 4px 16px rgba(20,60,45,.18);
}

/* ---------- 页脚 ---------- */
#footer {
  position: fixed; bottom: 0; left: 0; right: 0; height: 56px;
  border-top: 1px solid var(--line); background: #e9f1ec;
  display: flex; align-items: center; padding: 0 20px;
  font-size: 20px; color: var(--text-dim); z-index: 40;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: #b8cdc0; border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 拖拽交互 + 过渡 ---------- */
.chip { cursor: grab; transition: transform .1s, opacity .12s, box-shadow .12s; }
.chip:active { cursor: grabbing; }
.chip.dragging { opacity: .45; }
.chip:hover { box-shadow: 0 2px 10px rgba(14,159,94,.3); }
.blank { transition: background .12s, border-color .12s, box-shadow .12s; }
.blank:hover { background: rgba(14,159,94,.16); }
.blank.drop-target {
  border-color: var(--amber);
  background: rgba(255, 237, 213, .7);
  box-shadow: 0 0 12px rgba(180,83,9,.3);
}
.blank.filled.drop-target { background: rgba(255,237,213,.8); border-color: var(--amber); }
.st-note { margin-top: 12px; font-size: 20px; }

/* ---------- 多陈述卡 / 字典破解 ---------- */
.st-solved {
  font-size: 22px; color: var(--line-bright); margin-bottom: 10px;
  border: 1px dashed rgba(14,159,94,.5); border-radius: 6px; padding: 6px 12px;
  background: rgba(14,159,94,.05);
}
.tool-title { color: var(--amber); font-size: 28px; margin-bottom: 10px; }
.dict-frags { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0; }
.dict-frag { background: #fff; color: var(--text); border-color: var(--line); }
.dict-frag.selected {
  background: var(--line-bright); color: #fff;
  border-color: var(--line-bright); box-shadow: 0 2px 8px rgba(14,159,94,.4);
}
.dict-hint { font-size: 22px; margin-bottom: 14px; }
#btn-dict-submit { margin-top: 6px; }
.dict-frag { transition: transform .1s, opacity .12s; }
.dict-frag.dragging { opacity: .45; }
.dict-compose { margin: 16px 0 8px; }
.dict-slots { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.dict-slot {
  display: inline-block; min-width: 240px; text-align: center;
  border-bottom: 2px dashed var(--line-bright);
  padding: 8px 16px; border-radius: 6px; cursor: pointer;
  background: rgba(14,159,94,.05); color: var(--text-dim); font-size: 24px;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.dict-slot.filled { color: var(--line-bright); background: rgba(14,159,94,.14); }
.dict-slot:hover { background: rgba(14,159,94,.16); }
.dict-slot.drop-target {
  border-color: var(--amber);
  background: rgba(255,237,213,.7);
  box-shadow: 0 0 10px rgba(180,83,9,.3);
}

/* ---------- 选择型工具（钓鱼/端口扫描/木马/暗网） ---------- */
.sel-group { margin: 16px 0; }
.sel-group-title { color: var(--amber); font-size: 22px; margin-bottom: 10px; }
.sel-options { display: flex; flex-wrap: wrap; gap: 12px; }
.sel-opt {
  background: #fff; color: var(--text); border-color: var(--line);
  text-align: left; max-width: 100%;
}
.sel-opt.selected {
  background: var(--line-bright); color: #fff;
  border-color: var(--line-bright); box-shadow: 0 2px 8px rgba(14,159,94,.4);
}
#btn-sel-submit { margin-top: 14px; }

/* ---------- 镜城快讯（实时新闻框） ---------- */
#news-panel { position: fixed; right: 24px; bottom: 130px; width: 470px; height: 240px; z-index: 50; }
#news-body { flex: 1; overflow-y: auto; padding: 10px 14px; font-size: 20px; }
.news-empty { padding: 10px; }
.news-item { margin-bottom: 10px; padding: 4px 8px 4px 10px; border-left: 3px solid var(--line); border-radius: 0 4px 4px 0; background: rgba(14,159,94,.05); }
.news-item.impact { border-left-color: var(--amber); color: var(--text); }
.news-item.flavor { border-left-color: var(--line-bright); color: var(--text-dim); }
.news-item .news-time { font-size: 16px; margin-right: 6px; }
.news-tag {
  font-size: 14px; border: 1px solid currentColor; border-radius: 3px;
  padding: 0 5px; margin-right: 8px; white-space: nowrap;
}
.news-item.impact .news-tag { color: var(--amber); }
.news-item.flavor .news-tag { color: var(--line-bright); }
.live-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger); margin-left: 8px; vertical-align: middle;
  animation: blink 1.2s steps(1) infinite;
}

@media (max-width: 1300px) {
  body { overflow: auto; }
  #workbench { flex-direction: column; height: auto; }
  #side-panel { min-width: 0; }
  #comms { position: static; width: auto; margin: 0 20px 20px; }
  #toolbar { position: static; margin: 0 20px 20px; }
  #news-panel { position: static; width: auto; margin: 0 20px 20px; height: 220px; }
  #footer { position: static; }
}