:root{
  --bg:#0b0f17; --panel:#0f1522; --muted:#8aa0c2; --txt:#e6f0ff;
  --pri:#00e0ff; --ok:#25d366; --warn:#ffb020; --alert:#ff5470;
  --card:#121a2a; --chip:#132238; --bd:#1b2435; --shadow: rgba(0,0,0,.35);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: Inter, "SF Pro Text", "PingFang SC", "Microsoft Yahei", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1200px 600px at 80% -10%,rgba(0,224,255,.08),transparent 60%),
              radial-gradient(1000px 500px at -10% 120%,rgba(255,84,112,.06),transparent 60%),
              var(--bg);
  color:var(--txt); font:14px/1.6 var(--sans);
}
body, .signal-card {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", Arial, sans-serif;
}
/* /assets/app.css 里加 */
.cards .card .reason {
  white-space: pre-wrap;
  word-break: break-word;
}

.topbar{
  position:sticky; top:0; z-index:10; backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; border-bottom:1px solid var(--bd); background:rgba(11,15,23,.6);
}
.brand{font-weight:700; letter-spacing:.5px}
.status{display:flex; align-items:center; gap:8px; color:var(--muted)}
.sep{opacity:.5; margin:0 2px}
.dot{width:10px; height:10px; display:inline-block; border-radius:50%}
.dot.red{background:#ff5470}.dot.green{background:#25d366}.dot.yellow{background:#ffb020}

.container{max-width:1200px; margin:16px auto; padding:0 12px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width: 960px){.grid-2{grid-template-columns:1fr}}

.panel{
  background:linear-gradient(180deg, rgba(19,34,56,.7), rgba(11,15,23,.8));
  border:1px solid var(--bd); border-radius:16px; box-shadow:0 10px 30px var(--shadow);
  overflow:hidden; min-height:160px;
}
.panel-title{
  padding:12px 14px; border-bottom:1px solid var(--bd);
  background:linear-gradient(90deg, rgba(0,224,255,.10), transparent);
  font-weight:600; color:#bfe9ff
}
.cards{padding:12px}
.cards.live{max-height:280px; overflow:auto}

.card{
  background:var(--card); border:1px solid var(--bd); border-radius:14px;
  padding:12px; margin-bottom:10px; position:relative;
}
.card .head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.card .title{font-weight:700; letter-spacing:.2px}
.badge{font-size:12px; padding:2px 8px; border-radius:999px; background:var(--chip); border:1px solid var(--bd); color:#cbe0ff}
.badge.ok{border-color:rgba(37,211,102,.35); color:#9ff0c3}
.badge.warn{border-color:rgba(255,176,32,.35); color:#ffd28c}
.badge.alert{border-color:rgba(255,84,112,.35); color:#ff9aab}
.meta{display:flex; flex-wrap:wrap; gap:8px; color:#a9bfdc; margin:6px 0 4px}
.meta .chip{background:var(--chip); border:1px solid var(--bd); border-radius:10px; padding:2px 8px}
.reason{font-family:var(--sans); color:#d5e7ff; white-space:pre-wrap}

.ghost{
  background:transparent; color:var(--txt); border:1px solid var(--bd);
  padding:6px 10px; border-radius:10px; cursor:pointer
}
.ghost:hover{border-color:#2a3b5e}
.more{padding:8px 12px; border-top:1px solid var(--bd); text-align:center}

.foot{opacity:.7; text-align:center; padding:24px 0; color:#9db5d6}

/* 做多信号字体绿色 */
.card.side-long {
  color: #0f0; /* 绿色，可换成 #00cc00 更柔和 */
}

/* 做空信号字体红色 */
.card.side-short {
  color: #f00; /* 红色，可换成 #ff3333 更柔和 */
}

/* 小滚动条 */
.cards::-webkit-scrollbar{height:8px;width:8px}
.cards::-webkit-scrollbar-thumb{background:#1d2a45;border-radius:8px}
.card.side-long  { color:#0a8a0a; }   /* 或者只给标题/要点着色 */
.card.side-short { color:#c62828; }