:root {
  --bg: #0b0d10;
  --card: #14181e;
  --text: #f4f1ea;
  --muted: #8b91a1;
  --gold: #d7b56d;
  --up: #3dd68c;
  --down: #ff6b6b;
  --wait: #c8b07a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", "Noto Sans TC", sans-serif;
  min-height: 100%;
}
body { padding: env(safe-area-inset-top) 20px calc(20px + env(safe-area-inset-bottom)); }
.screen { max-width: 430px; margin: 0 auto; }
.status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  margin: 8px 0 18px;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--wait);
}
.dot.ok { background: var(--up); }
.dot.bad { background: var(--down); }
.clock { margin-left: auto; }
.gold-label {
  letter-spacing: 0.28em;
  font-size: 13px;
  color: var(--gold);
  font-weight: 600;
}
.instrument {
  color: var(--muted);
  font-size: 12px;
  margin: 2px 0 8px;
}
.direction {
  font-size: 34px;
  font-weight: 700;
  margin: 4px 0 16px;
}
.direction.up { color: var(--up); }
.direction.down { color: var(--down); }
.prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px;
}
.prices.prices-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.prices.prices-3 b { font-size: 22px; }
.prices div {
  background: var(--card);
  border-radius: 14px;
  padding: 14px 16px;
}
.prices b { display: block; font-size: 28px; font-variant-numeric: tabular-nums; }
.prices small { color: var(--muted); font-size: 12px; }
.sentence {
  font-size: 24px;
  line-height: 1.4;
  font-weight: 700;
  margin-bottom: 10px;
  white-space: pre-line;
}
.reason {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  min-height: 2.8em;
  margin-bottom: 20px;
  white-space: pre-line;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.grid div {
  background: var(--card);
  border-radius: 14px;
  padding: 12px 14px;
}
.grid span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.grid b { font-size: 22px; font-variant-numeric: tabular-nums; }
.more {
  margin-top: 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.more summary { cursor: pointer; color: var(--gold); margin-bottom: 8px; }
#details { white-space: pre-line; }
.book { margin-top: 8px; opacity: 0.85; }
.action {
  margin: 16px 0 10px;
  font-size: 16px;
  color: var(--text);
}
.notify-btn {
  width: 100%;
  border: 1px solid #2a3140;
  background: var(--card);
  color: var(--gold);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
}
.notify-btn.on { color: var(--up); }
.records-link { margin-top: 12px; text-align: center; }
.records-link a { color: var(--gold); text-decoration: none; font-size: 15px; }
.broker-status {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--wait);
}
.broker-grid { margin-bottom: 18px; }
.hidden { display: none; }