/* \u591a\u7a7a\u6584\u00b7\u9152\u9986 \u4e3b\u9898 */
:root {
  --bg: #1f1611;
  --panel: #2a1f17;
  --paper: #f5ecd7;
  --ink: #3b2a1a;
  --accent: #8b1a1a;
  --muted: #9b8a72;
  --line: #3d2c1f;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
  background: var(--bg); color: var(--paper); min-height: 100vh;
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand h1 { margin: 0; font-size: 22px; letter-spacing: 4px; }
.logo { font-size: 26px; }
.subtitle { color: var(--muted); }
.clock { font-family: monospace; color: var(--muted); }
.layout {
  display: grid; grid-template-columns: 280px minmax(0, 1fr) 360px; gap: 16px;
  padding: 16px; height: calc(100vh - 60px);
  transition: grid-template-columns 0.2s;
}
/* K 线模式：左栏隐藏, 中间占大块 */
.layout.kline-mode {
  grid-template-columns: 0px minmax(0, 1fr) 360px !important;
}
.layout.kline-mode .left { display: none !important; }
.layout.kline-mode .center { width: 100% !important; min-width: 0 !important; }
.layout.kline-mode .center .tab-pane { width: 100% !important; min-width: 0 !important; }
.layout.kline-mode .center .bb-by-symbol-controls { width: 100% !important; }
.layout.kline-mode .center .blackboard-list { width: 100% !important; min-width: 0 !important; }
.layout.kline-mode #kline-chart { width: 100% !important; min-width: 0 !important; }
section { background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 12px; }
.left, .center, .right { display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.left > section, .right > section { flex: 0 0 auto; }
.right .messages { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.messages-list, .blackboard-list, .market-list { overflow-y: auto; }
h2 { margin: 0 0 8px; font-size: 14px; color: var(--accent); letter-spacing: 2px;
  border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.npc-card {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center;
  padding: 8px; border: 1px solid transparent; border-radius: 4px;
}
.npc-card:hover { border-color: var(--line); background: rgba(255,255,255,0.02); }
.npc-avatar { font-size: 26px; }
.npc-name { font-weight: bold; }
.npc-persona { font-size: 11px; color: var(--muted); }
.npc-focus .tag { display: inline-block; margin: 2px 2px 0 0; padding: 1px 6px;
  font-size: 10px; background: var(--accent); color: var(--paper); border-radius: 8px; }
.market-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; font-size: 11px; }
.market-list .sym { color: var(--muted); }
.market-list .px { font-family: monospace; }
.market-list .up { color: #d4a373; }
.market-list .down { color: #6b8e9b; }

/* 单品种视图（今日行情大字号） */
.market-single-cell { display: block !important; padding: 8px 6px; text-align: center; border-bottom: 1px dashed rgba(0,0,0,0.06); }
.market-single-cell .ms-sym { font-size: 14px; color: var(--muted); margin-bottom: 2px; letter-spacing: 1px; }
.market-single-cell .ms-px { font-size: 28px; font-family: 'Courier New', monospace; font-weight: 600; color: var(--text); }
.market-single-cell .ms-chg { font-size: 16px; font-weight: 600; margin-top: 2px; }
.market-single-cell .ms-chg.up { color: #c8553d; }
.market-single-cell .ms-chg.down { color: #4a7c7e; }
.market-single-cell .ms-time { font-size: 10px; color: var(--muted); margin-top: 4px; }
.market-single.market-list { display: block; }
.market-empty { padding: 10px; color: var(--muted); text-align: center; font-size: 12px; }

/* 按品种视图（中间区单张大图） */
.bb-by-symbol-controls {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  background: var(--bg);
  font-size: 13px; color: var(--paper);
}
.bb-by-symbol-controls label { display: flex; align-items: center; gap: 6px; }
.bb-by-symbol-controls select {
  background: var(--bg); color: var(--paper); border: 1px solid var(--line);
  border-radius: 4px; padding: 4px 6px; font-family: inherit; font-size: 13px;
}
.blackboard-list {
  /* 整块占满中间区高度，单图 */
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: stretch; justify-content: stretch;
  padding: 16px; min-width: 0;
}
#kline-chart {
  width: 100%;
  height: 100%;
  min-height: 520px;
  min-width: 0;
  flex: 1 1 auto;
}
#trend-image-wrap {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.bb-card { background: var(--paper); color: var(--ink); padding: 6px; border-radius: 4px; max-width: 100%; }
.bb-card img { max-width: 100%; max-height: calc(100vh - 220px); display: block; object-fit: contain; }
.bb-card .meta { font-size: 11px; color: var(--ink); margin-top: 4px; }
.kline-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kline-wrap img { max-width: 100%; max-height: calc(100vh - 220px); background: var(--paper); border: 1px solid var(--line); border-radius: 4px; object-fit: contain; }
.messages-list { display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.msg { padding: 6px 8px; border-left: 3px solid var(--line); }
.msg.user { border-color: #d4a373; background: rgba(212,163,115,0.08); }
.msg.system { border-color: var(--muted); font-style: italic; color: var(--muted); }
.msg .who { font-size: 12px; color: var(--accent); margin-bottom: 2px; }
.msg .time { font-size: 10px; color: var(--muted); margin-left: 6px; }
.msg .body { font-size: 14px; line-height: 1.6; }
.composer textarea {
  width: 100%; background: var(--bg); color: var(--paper); border: 1px solid var(--line);
  border-radius: 4px; padding: 8px; font-family: inherit; resize: vertical;
}
.composer-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
button.primary, button.ghost {
  background: var(--accent); color: var(--paper); border: none; border-radius: 4px;
  padding: 6px 12px; cursor: pointer; font-family: inherit;
}
button.ghost { background: transparent; border: 1px solid var(--line); font-size: 11px; padding: 2px 8px; }
button:hover { opacity: 0.85; }
.hint { font-size: 11px; color: var(--muted); }

/* ===== Modal ===== */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal.hidden { display: none; }
.modal-card { background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 20px; min-width: 360px; max-width: 480px;
  position: relative; color: var(--paper); }
.modal-card h2 { margin-top: 0; }
.modal-close { position: absolute; top: 8px; right: 8px;
  background: transparent; border: none; color: var(--paper); font-size: 16px;
  cursor: pointer; }

/* ===== Settings form ===== */
.form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.form-row label { font-size: 12px; color: var(--muted); letter-spacing: 1px; }
.form-row input, .form-row select {
  background: var(--bg); color: var(--paper); border: 1px solid var(--line);
  border-radius: 4px; padding: 8px; font-family: inherit; font-size: 13px;
}
.form-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }

/* ===== Settings status dot on gear button ===== */
#settings-btn { position: relative; }
#settings-btn::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
#settings-btn.configured::after { background: #6b8e9b; }

/* ===== K 线 tab ===== */
.kline-controls {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  background: var(--bg);
  font-size: 13px; color: var(--paper);
}
.kline-controls label { display: flex; align-items: center; gap: 6px; }
.kline-controls select {
  background: var(--bg); color: var(--paper); border: 1px solid var(--line);
  border-radius: 4px; padding: 4px 6px; font-family: inherit; font-size: 13px;
}
.kline-canvas {
  padding: 16px; min-height: 420px;
  display: flex; align-items: center; justify-content: center;
}
.kline-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kline-wrap img {
  max-width: 100%; height: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
}
.kline-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.kline-tag {
  display: inline-block; padding: 2px 8px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  color: var(--paper);
}
.kline-time { font-size: 11px; color: var(--muted); }
.kline-loading { color: var(--muted); font-size: 13px; }
.kline-error { color: #c0392b; font-size: 13px; }