.trend-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 14px;
}
.trend-header {
  background: var(--primary);
  padding: 18px 16px;
  position: relative; overflow: hidden;
}
.trend-header::before {
  content:''; position:absolute; top:-40px; right:-40px;
  width:140px; height:140px;
  background:radial-gradient(circle,rgba(107,159,212,.25),transparent 70%);
  pointer-events:none;
}
.th-title { font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(16px,4vw,22px);font-weight:900;color:#fff;margin-bottom:6px; }
.th-rate {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-full);
  padding: 4px 12px;
  font-family: 'DM Mono', monospace;
  font-size: 14px; font-weight: 700; color: #fff;
}
.rate-up   { color: #ff8080; }
.rate-flat { color: #aaa; }
.rate-down { color: #7ec896; }

.trend-body { padding: 16px; }

/* ミニチャート */
.mini-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 60px;
  margin: 12px 0;
  padding: 0 4px;
  border-bottom: 2px solid var(--border);
}
.mc-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  position: relative;
  min-width: 0;
  cursor: default;
  transition: opacity .1s;
}
.mc-bar:hover { opacity: .8; }
.mc-bar::after {
  content: attr(data-label);
  position: absolute;
  bottom: -18px;
  left: 50%; transform: translateX(-50%);
  font-size:11px; color: var(--ink3); white-space: nowrap;
}
.mc-bar.past { background: var(--border2); }
.mc-bar.now  { background: var(--accent); }
.mc-bar.future { background: var(--green); opacity: .6; }

.chart-legend {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size:12px; color: var(--ink3);
  margin-bottom: 12px;
}
.legend-item { display: flex; align-items: center; gap: 4px; }
.legend-dot { width: 10px; height: 10px; border-radius: 2px; }

.factor-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 12px;
}
.factor-item {
  background: #fafaf8;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 12px;
}
.fi-label { font-size: 11px; color: var(--ink3); margin-bottom: 3px; }
.fi-val { font-size: 13px; font-weight: 700; color: var(--ink); }
.fi-val.up   { color: #c00; }
.fi-val.flat { color: var(--ink3); }
.fi-val.down { color: var(--green); }

.advice-banner {
  background: var(--green-light);
  border: 1px solid rgba(42,107,60,.25);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 14px;
  font-size: 13px; color: var(--green);
}
.ab-title { font-weight: 700; margin-bottom: 4px; }