:root {
  --bg-page: #0e0b18;
  --bg-surface: #16122a;
  --text-primary: #ccc;
  --text-muted: #ccc;
  --text-muted2: #888;
  --text-on-surface: #ccc;
  --text-label: #888;
  --text-empty: #666;
  --border: #2a2540;
  --border-light: #2a2540;
  --accent: #7c5cbf;
  --accent-hover: #6a4da8;
  --btn-secondary: #666;
  --btn-secondary-hover: #555;
  --tooltip-bg: rgba(0,0,0,.85);
  --tooltip-text: #fff;
  --controls-text: #aaa;
}
body.theme-light {
  --bg-page: #f5f0eb;
  --bg-surface: #fff;
  --text-primary: #333;
  --text-muted: #555;
  --text-muted2: #888;
  --text-on-surface: #333;
  --text-label: #999;
  --text-empty: #bbb;
  --border: #f0ebe5;
  --border-light: #f0ebe5;
  --accent: #7c5cbf;
  --accent-hover: #6a4da8;
  --btn-secondary: #999;
  --btn-secondary-hover: #777;
  --tooltip-bg: rgba(0,0,0,.85);
  --tooltip-text: #fff;
  --controls-text: #555;
}
body.theme-gold {
  --bg-page: #120e0a;
  --bg-surface: #1a1410;
  --text-primary: #e0d8c8;
  --text-muted: #c4b8a8;
  --text-muted2: #9a8a78;
  --text-on-surface: #e0d8c8;
  --text-label: #9a8a78;
  --text-empty: #6a5a48;
  --border: #3a2a1a;
  --border-light: #3a2a1a;
  --accent: #c49a6c;
  --accent-hover: #e0bb8a;
  --btn-secondary: #5a4a38;
  --btn-secondary-hover: #7a6a58;
  --tooltip-bg: rgba(10,8,6,.92);
  --tooltip-text: #e0d8c8;
  --controls-text: #9a8a78;
}

.fbc-chart {
  position: relative;
}

.fbc-chart *,
.fbc-chart *::before,
.fbc-chart *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.fbc-chart h1 {
  margin: 20px 0 5px;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--text-muted);
}

.fbc-chart .subtitle {
  color: var(--text-muted2);
  font-size: 0.85rem;
  margin-bottom: 15px;
}

.fbc-chart .chart-controls {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 10px;
}

.fbc-chart .chart-controls label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  color: var(--controls-text);
  cursor: pointer;
}

.fbc-chart .chart-controls input {
  cursor: pointer;
}

.fbc-chart .chart-svg-wrap {
  position: relative;
  display: inline-block;
}

.fbc-chart .chart-svg-wrap svg {
  display: block;
  max-width: 90vw;
  height: auto;
}

.fbc-chart .astro-glyph {
  font-family: 'Segoe UI', 'Apple Symbols', sans-serif;
}

.fbc-chart #tooltip {
  position: fixed;
  pointer-events: none;
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 0.75rem;
  line-height: 1.3;
  z-index: 1000;
  opacity: 0;
  transition: opacity .12s;
  max-width: 200px;
}

.fbc-chart #tooltip.show {
  opacity: 1;
}

.fbc-chart #tooltip .name {
  font-weight: 600;
}

.fbc-chart #tooltip .detail {
  opacity: .85;
}

.fbc-chart .chart-main {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.fbc-chart .chart-info {
  background: var(--bg-surface);
  border-radius: 8px;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
  padding: 18px;
  width: 280px;
  min-height: 200px;
  flex-shrink: 0;
  font-size: 0.85rem;
  line-height: 1.5;
}

.fbc-chart .chart-info .ip-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-on-surface);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border-light);
}

.fbc-chart .chart-info .ip-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
}

.fbc-chart .chart-info .ip-row .ip-label {
  color: var(--text-label);
}

.fbc-chart .chart-info .ip-row .ip-val {
  color: var(--text-on-surface);
  font-weight: 500;
  text-align: right;
}

.fbc-chart .chart-info .ip-empty {
  color: var(--text-empty);
  text-align: center;
  padding: 60px 10px;
  font-size: 0.8rem;
}

.fbc-chart .chart-info .ip-section {
  font-weight: 600;
  color: #555;
  margin-top: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
}

.fbc-chart .chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: center;
  margin: 8px 0 5px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.fbc-chart .legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fbc-chart .legend-item .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.fbc-chart #data-status {
  font-size: 0.8rem;
  color: var(--text-muted2);
  margin: 5px 0;
}

.fbc-chart .load-section {
  margin: 10px 0;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.fbc-chart .load-section input[type="file"] {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.fbc-chart .load-section button {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 5px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}

.fbc-chart .load-section button:hover {
  background: var(--accent-hover);
}

.fbc-chart .load-section button.secondary {
  background: var(--btn-secondary);
}

.fbc-chart .load-section button.secondary:hover {
  background: var(--btn-secondary-hover);
}

/* ── FBC page integration (chart panel, sidebar, theme select, mobile) ──── */

.chart-details-right {
  display: flex;
  justify-content: center;
}

.chart-panel {
  display: flex;
  flex-direction: row;
  gap: 16px;
  position: relative;
  background-color: #050508;
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTAiIGhlaWdodD0iMjUwIj48Y2lyY2xlIGN4PSIxOTYiIGN5PSI5OCIgcj0iMC42IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMzApIi8+PGNpcmNsZSBjeD0iMTk5IiBjeT0iMTU4IiByPSIxLjIiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC42OSkiLz48Y2lyY2xlIGN4PSIyOCIgY3k9IjEzNiIgcj0iMC44IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNDEpIi8+PGNpcmNsZSBjeD0iNDUiIGN5PSIxNTEiIHI9IjAuNCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjIwKSIvPjxjaXJjbGUgY3g9IjY3IiBjeT0iMTEyIiByPSIwLjgiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC40MCkiLz48Y2lyY2xlIGN4PSIyNiIgY3k9IjIxNyIgcj0iMS4wIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzYpIi8+PGNpcmNsZSBjeD0iMjQzIiBjeT0iMTkwIiByPSIwLjQiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4yMCkiLz48Y2lyY2xlIGN4PSIyMDUiIGN5PSI2NCIgcj0iMC41IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMjUpIi8+PGNpcmNsZSBjeD0iMTc3IiBjeT0iMTgzIiByPSIwLjUiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4yNikiLz48Y2lyY2xlIGN4PSIxNDYiIGN5PSIxNjUiIHI9IjAuNiIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjMxKSIvPjxjaXJjbGUgY3g9IjI0MiIgY3k9IjI0OSIgcj0iMC44IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMzgpIi8+PGNpcmNsZSBjeD0iMjkiIGN5PSI4MyIgcj0iMS4wIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNjApIi8+PGNpcmNsZSBjeD0iNjYiIGN5PSIyMjAiIHI9IjAuNSIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjI1KSIvPjxjaXJjbGUgY3g9IjE0MCIgY3k9IjU0IiByPSIxLjIiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC41NykiLz48Y2lyY2xlIGN4PSIxMTciIGN5PSIxNTkiIHI9IjAuOCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjM5KSIvPjxjaXJjbGUgY3g9IjE0MCIgY3k9Ijc3IiByPSIwLjgiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC40MikiLz48Y2lyY2xlIGN4PSI5MSIgY3k9IjIxMCIgcj0iMC42IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMzEpIi8+PGNpcmNsZSBjeD0iMTAzIiBjeT0iMTQwIiByPSIwLjkiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC40NSkiLz48Y2lyY2xlIGN4PSI5NiIgY3k9Ijc1IiByPSIwLjUiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4yNSkiLz48Y2lyY2xlIGN4PSI5NSIgY3k9IjQ3IiByPSIwLjYiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4yOSkiLz48Y2lyY2xlIGN4PSIyMiIgY3k9IjE2OSIgcj0iMC43IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMzQpIi8+PGNpcmNsZSBjeD0iNDIiIGN5PSI1MyIgcj0iMC41IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMjUpIi8+PC9zdmc+"),
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIj48Y2lyY2xlIGN4PSIxNTMiIGN5PSI4NCIgcj0iMC40IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMjIpIi8+PGNpcmNsZSBjeD0iMzUiIGN5PSIxNTgiIHI9IjAuNCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjIyKSIvPjxjaXJjbGUgY3g9IjEwNiIgY3k9IjUiIHI9IjAuNCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjIxKSIvPjxjaXJjbGUgY3g9IjI3IiBjeT0iMTA1IiByPSIwLjgiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4zOSkiLz48Y2lyY2xlIGN4PSI4MiIgY3k9IjEwOSIgcj0iMC40IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMjIpIi8+PGNpcmNsZSBjeD0iMTY0IiBjeT0iMTE3IiByPSIwLjQiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4yMSkiLz48Y2lyY2xlIGN4PSIzNyIgY3k9IjExNCIgcj0iMC42IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMjgpIi8+PGNpcmNsZSBjeD0iNjEiIGN5PSIyNyIgcj0iMS4xIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNTUpIi8+PGNpcmNsZSBjeD0iMTQ3IiBjeT0iMTU0IiByPSIwLjUiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4yMykiLz48Y2lyY2xlIGN4PSIxMzUiIGN5PSIxMDEiIHI9IjAuNyIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjM3KSIvPjxjaXJjbGUgY3g9Ijg0IiBjeT0iMTUzIiByPSIwLjUiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4yNCkiLz48Y2lyY2xlIGN4PSIxMjYiIGN5PSI1NiIgcj0iMC42IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMjkpIi8+PGNpcmNsZSBjeD0iMTczIiBjeT0iMTU4IiByPSIxLjMiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC43NikiLz48Y2lyY2xlIGN4PSI0NyIgY3k9Ijc2IiByPSIwLjUiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4yNSkiLz48Y2lyY2xlIGN4PSI5MiIgY3k9IjE1NiIgcj0iMS4yIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuNzYpIi8+PGNpcmNsZSBjeD0iMTEwIiBjeT0iMTc3IiByPSIwLjUiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4yNCkiLz48Y2lyY2xlIGN4PSI3NCIgY3k9IjE3MiIgcj0iMC40IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMjEpIi8+PGNpcmNsZSBjeD0iODkiIGN5PSIxMzQiIHI9IjAuOCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjQyKSIvPjwvc3ZnPg==");
  background-repeat: repeat, repeat;
  background-position: 0 0, 80px 60px;
  background-size: 250px 250px, 180px 180px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0 1.5rem 0 1.5rem;
  width: 100%;
  overflow: hidden;
}

.chart-panel .chart-container {
  flex: 1;
  min-width: 0;
}

.chart-panel .chart-controls {
  display: none;
}

.chart-sidebar {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}

.chart-sidebar .sidebar-spacer {
  flex: 1;
  min-height: 0;
}

.chart-sidebar .sidebar-rightstack {
  display: contents;
}

.chart-sidebar .sidebar-theme {
  order: -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-label);
}

.chart-sidebar .chart-panel-summary {
  order: 1;
}

.chart-sidebar #theme-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-on-surface);
  padding: 0.3rem 1.6rem 0.3rem 0.6rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}

.chart-panel .fbc-chart {
  position: relative;
  z-index: 1;
}

.chart-sidebar .chart-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-surface);
  border-radius: 8px;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
  padding: 18px;
  width: 280px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.chart-sidebar .chart-info .ip-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-on-surface);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border-light);
}

.chart-sidebar .chart-info .ip-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
}

.chart-sidebar .chart-info .ip-row .ip-label {
  color: var(--text-label);
}

.chart-sidebar .chart-info .ip-row .ip-val {
  color: var(--text-on-surface);
  font-weight: 500;
  text-align: right;
}

.chart-sidebar .chart-info .ip-empty {
  color: var(--text-empty);
  text-align: center;
  padding: 40px 10px;
  font-size: 0.8rem;
}

.chart-sidebar .chart-info .ip-section {
  font-weight: 600;
  color: #555;
  margin-top: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
}

.chart-sidebar .chart-panel-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-top: 10px;
}

.chart-panel-summary .cps-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: #ccc;
}

.chart-panel-summary .cps-birth {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 0.3em;
  font-size: 0.72rem;
  color: #888;
  line-height: 1.4;
}
.chart-panel-summary .cps-birth .cps-bd:not(:last-child)::after {
  content: "·";
  margin-left: 0.3em;
}

@media (max-width: 960px) {
  .chart-panel { flex-direction: column; padding: 0 0.75rem; }
  .chart-sidebar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 7px;
    width: auto;
    padding: 10px 0;
  }
  .chart-sidebar .sidebar-spacer { display: none; }
  .chart-sidebar .sidebar-rightstack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 3 1 0;
    min-width: 0;
  }
  .chart-sidebar .sidebar-rightstack .sidebar-theme {
    order: 0;
    justify-content: flex-start;
  }
  .chart-sidebar .sidebar-rightstack .chart-panel-summary {
    order: 0;
    padding-top: 0;
    padding-left: 0;
    min-width: 0;
    width: 100%;
    align-items: stretch;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .chart-sidebar .sidebar-rightstack .chart-panel-summary .cps-name,
  .chart-sidebar .sidebar-rightstack .chart-panel-summary .cps-birth {
    min-width: 0;
    width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .chart-sidebar .sidebar-rightstack .chart-panel-summary .cps-birth {
    flex-direction: column;
    gap: 0;
  }
  .chart-sidebar .sidebar-rightstack .chart-panel-summary .cps-birth .cps-bd::after {
    content: none;
  }
  @media (max-width: 420px) {
    .chart-sidebar .sidebar-rightstack .chart-panel-summary .cps-name {
      font-size: 0.75rem;
    }
    .chart-sidebar .sidebar-rightstack .chart-panel-summary .cps-birth {
      font-size: 0.62rem;
    }
  }
  .chart-sidebar .chart-info {
    flex: 7 1 0;
    width: auto;
    min-width: 0;
  }
}