:root {
  color-scheme: light;
  --bg: #f7f7f4;
  --panel: #ffffff;
  --text: #222426;
  --muted: #6a7077;
  --border: #d7d9d2;
  --up: #c83f3f;
  --down: #21815a;
  --ma: #315a9f;
  --volume: #a7b1bf;
  --accent: #284e75;
  --signal: #1677ff;
  --signal-active: #f28c28;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, "Microsoft JhengHei", sans-serif;
  color: var(--text);
  background: var(--bg);
}
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
h1 { margin: 0 0 6px; font-size: 24px; font-weight: 600; }
p { margin: 0; color: var(--muted); }
.controls { display: flex; gap: 12px; flex-wrap: wrap; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
select {
  min-width: 180px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  color: var(--text);
}
.number-filter {
  width: 88px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  color: var(--text);
}
.capital-range { display: flex; align-items: center; gap: 5px; color: var(--muted); }
.toggle-control {
  display: flex;
  grid-template-columns: none;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 4px;
  color: var(--text);
  cursor: pointer;
}
.toggle-control input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.stock-query { display: flex; gap: 6px; }
.stock-query input {
  width: 132px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  color: var(--text);
}
.stock-query input:focus { border-color: var(--accent); outline: 2px solid rgba(40, 78, 117, 0.16); }
.stock-query button {
  padding: 0 14px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: white;
  cursor: pointer;
}
.stock-query button:hover { background: #1e3d5d; }
main { padding: 18px 28px 28px; }
.summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.summary > div {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.label { display: block; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
strong { font-size: 20px; font-weight: 600; }
.layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
aside, .chart-area {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}
aside { padding: 16px; max-height: 760px; overflow: auto; }
h2 { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.signal-list { display: grid; gap: 8px; }
.signal-button {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}
.signal-button:hover, .signal-button.is-active { border-color: var(--accent); background: #eef3f7; }
.signal-button span { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.chart-area { padding: 12px; position: relative; }
.chart-toolbar {
  position: absolute;
  top: 18px;
  right: 78px;
  z-index: 2;
  display: flex;
  gap: 4px;
}
.chart-toolbar button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
}
.chart-toolbar button:hover:not(:disabled) { border-color: var(--accent); background: #eef3f7; }
.chart-toolbar button:disabled { color: #aeb3b8; cursor: default; }
.chart-toolbar .chart-latest { width: 48px; font-size: 13px; }
#chart { width: 100%; height: 720px; display: block; }
.axis text { fill: var(--muted); font-size: 12px; }
.axis line, .axis path, .grid line { stroke: var(--border); }
.ma-line { fill: none; stroke: var(--ma); stroke-width: 2; }
.volume { fill: var(--volume); opacity: 0.55; }
.signal-arrow { fill: var(--signal); stroke: white; stroke-width: 2; stroke-linejoin: round; }
.signal-arrow.is-active { fill: var(--signal-active); }
.chart-interaction { cursor: crosshair; pointer-events: all; }
.crosshair { pointer-events: none; }
.crosshair-line { stroke: #4d5966; stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.75; }
.crosshair-dot { fill: #fff; stroke: var(--accent); stroke-width: 2; }
.chart-tooltip rect { fill: #202830; stroke: #4d5966; stroke-width: 1; opacity: 0.96; }
.chart-tooltip text { fill: #fff; font-size: 13px; }
.chart-tooltip text:first-of-type { font-weight: 700; }

@media (max-width: 900px) {
  .topbar { align-items: stretch; flex-direction: column; }
  .summary { grid-template-columns: 1fr; }
  .layout { grid-template-columns: 1fr; }
  aside { max-height: 320px; }
  #chart { height: 560px; }
}