.ml-station-charts {
  --chart-border: rgba(15, 23, 42, .12);
  --chart-muted: #64748b;
  --chart-text: #0f172a;
  --chart-accent: #002050;
  display: grid;
  gap: 14px;
}
.ml-station-charts-status {
  padding: 14px 16px;
  border: 1px solid var(--chart-border);
  border-radius: 14px;
  background: #f8fafc;
  color: var(--chart-muted);
  font-size: .92rem;
}
.ml-station-charts-status[hidden] { display: none; }
.ml-station-charts-status.is-error { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.ml-station-chart-picker {
  padding: 14px;
  border: 1px solid var(--chart-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15,23,42,.045);
}
.ml-station-chart-picker-label { display:block; margin:0 0 9px; color:var(--chart-text); font-size:.85rem; font-weight:850; }
.ml-station-chart-select {
  display:none; width:100%; min-height:44px; padding:9px 12px;
  border:1px solid rgba(15,23,42,.16); border-radius:12px; background:#fff;
  color:var(--chart-text); font:inherit; font-weight:750;
}
.ml-station-chart-tabs { display:flex; flex-wrap:wrap; gap:7px; }
.ml-station-chart-tab {
  border:1px solid rgba(21,130,199,.18); border-radius:999px; padding:7px 11px;
  background:#f4f9fc; color:#315166; cursor:pointer; font-size:.78rem; font-weight:800;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
.ml-station-chart-tab:hover { border-color:rgba(21,130,199,.45); transform:translateY(-1px); }
.ml-station-chart-tab.is-active { background:var(--chart-accent); border-color:var(--chart-accent); color:#fff; }
.ml-station-chart-card {
  padding: 16px 16px 9px;
  background: #fff;
  border: 1px solid var(--chart-border);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .055);
  overflow: hidden;
}
.ml-station-chart-head { text-align:center; margin:0 0 6px; padding:0 8px; }
.ml-station-chart-head h3 { margin:0; color:var(--chart-text); font-size:1.12rem; }
.ml-station-chart-head p { margin:4px 0 0; color:var(--chart-muted); font-size:.84rem; }
.ml-station-chart-wrap { position:relative; width:100%; height:420px; }
.ml-station-chart-card canvas { width:100% !important; height:100% !important; }
.ml-station-chart-actions { display:flex; justify-content:center; margin-top:4px; }
.ml-station-chart-reset {
  border:0; padding:7px 13px; border-radius:999px; cursor:pointer;
  background:#eef6fb; color:#0c6fa7; font-size:.78rem; font-weight:850;
}
.ml-station-chart-reset:hover { background:#dceff9; }
.ml-station-chart-reset:disabled { opacity:.55; cursor:wait; }
.ml-station-chart-help { margin:5px 0 0; text-align:center; color:var(--chart-muted); font-size:.73rem; }
@media (max-width: 760px) {
  .ml-station-chart-tabs { display:none; }
  .ml-station-chart-select { display:block; }
  .ml-station-chart-card { padding:13px 7px 8px; border-radius:16px; }
  .ml-station-chart-wrap { height:330px; }
  .ml-station-chart-head h3 { font-size:1rem; }
  .ml-station-chart-head p { font-size:.77rem; }
}
@media (max-width: 420px) {
  .ml-station-chart-picker { padding:11px; }
  .ml-station-chart-wrap { height:300px; }
}

/* v2.2: touch UX and chart export */
.ml-station-chart-wrap { touch-action: pan-y pinch-zoom; }
.ml-station-chart-actions { gap: 8px; flex-wrap: wrap; }
.ml-station-chart-export {
  border: 1px solid rgba(21,130,199,.18);
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  background: #fff;
  color: #0c6fa7;
  font-size: .78rem;
  font-weight: 850;
}
.ml-station-chart-export:hover { background:#eef6fb; border-color:rgba(21,130,199,.35); }
@media (max-width: 760px) {
  .ml-station-chart-select { min-height: 48px; font-size: 16px; }
  .ml-station-chart-reset,
  .ml-station-chart-export { min-height: 42px; padding: 9px 14px; }
  .ml-station-chart-wrap { height: 350px; }
}
@media (max-width: 420px) {
  .ml-station-chart-wrap { height: 325px; }
  .ml-station-chart-actions { margin-top: 8px; }
}