.chart-feature-panel { position: absolute; z-index: 1100; top: 10px; inset-inline-start: 10px; width: min(350px, calc(100% - 20px)); max-height: calc(100% - 20px); overflow-y: auto; padding: 16px; border: 1px solid #dce3e8; border-radius: 10px; background: #fffffff7; color: #243f52; box-shadow: 0 5px 24px #0d24352b; font: 13px/1.55 "Segoe UI", "Microsoft YaHei", sans-serif; color-scheme: light; overscroll-behavior: contain; }
.chart-feature-panel[hidden], .chart-feature-picker[hidden] { display: none; }
.chart-feature-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.chart-feature-heading h2 { margin: 0; font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.chart-feature-close { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: #edf2f6; color: #446174; cursor: pointer; font: 22px/1 sans-serif; }
.chart-feature-coordinates { margin: 8px 0 12px; color: #778995; font-size: 10px; overflow-wrap: anywhere; }
.chart-feature-picker { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #dce4eb; border-radius: 7px; background: #f6f9fc; color: #29485e; font: inherit; }
.chart-feature-properties { display: grid; grid-template-columns: minmax(80px, .8fr) minmax(0, 1.2fr); margin: 0; }
.chart-feature-properties dt, .chart-feature-properties dd { padding: 8px 0; margin: 0; border-top: 1px solid #e9eef2; overflow-wrap: anywhere; white-space: pre-wrap; }
.chart-feature-properties dt { padding-inline-end: 12px; color: #748590; font-size: 11px; }
.chart-feature-properties dd { color: #243f52; }
@media (max-width: 700px) {
  .chart-feature-panel { top: auto; bottom: 0; inset-inline-start: 0; width: 100%; max-height: 55%; border-radius: 14px 14px 0 0; padding: 15px 18px max(15px, env(safe-area-inset-bottom)); }
}

.chart-feature-credit { display: block; padding-top: 12px; color: #8293a0; font-size: 10px; text-decoration: none; }

.chart-feature-credit[hidden] { display: none; }