:root {
  --bg: #131722; --panel: #1e222d; --border: #2a2e39;
  --text: #d1d4dc; --muted: #787b86; --accent: #2962ff;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 14px;
}
.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 10px 20px; background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: bold; font-size: 16px; }
.topbar nav a {
  color: var(--text); text-decoration: none; margin-right: 16px;
  padding: 4px 8px; border-radius: 4px;
}
.topbar nav a:hover { background: var(--border); }
main { padding: 16px 20px; max-width: 100%; margin: 0 auto; }
h1 { font-size: 20px; margin: 8px 0 4px; }
h2 { font-size: 16px; margin: 24px 0 8px; }
.meta { color: var(--muted); margin: 4px 0 16px; }
a { color: #6ea8fe; }
table.list {
  border-collapse: collapse; width: 100%; table-layout: auto; background: var(--panel);
  border: 1px solid var(--border);
}
table.list th, table.list td {
  padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left;
  white-space: normal; word-break: break-word;
}
table.list th { color: var(--muted); font-weight: normal; font-size: 12px; }
table.list td.num, table.list th.num { text-align: right; }
table.list td.score { font-weight: bold; color: #26a69a; }
.table-scroll { overflow-x: visible; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: #262b38; }
.empty { color: var(--muted); padding: 12px; background: var(--panel); border: 1px solid var(--border); }
.chip {
  display: inline-block; background: var(--border); border-radius: 10px;
  padding: 1px 8px; margin: 0 3px; font-size: 12px;
}
.chartbox { width: 100%; height: 420px; border: 1px solid var(--border); }
.chartbox.rsi { height: 150px; margin-top: 8px; }
.note { color: var(--muted); }

/* ---- summary cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0 20px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.card-label { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.card-value { font-size: 22px; font-weight: bold; }
.card-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.pos { color: #26a69a; }
.neg { color: #ef5350; }