:root {
  --erd-bg: #f3f6fb;
  --erd-grid: #e5eaf2;
  --erd-panel-bg: #ffffff;
  --erd-panel-stroke: #25364a;
  --erd-header-bg: #0f4aa3;
  --erd-title: #ffffff;
  --erd-col: #1f2d3d;
  --erd-pk: #0f766e;
  --erd-fk: #7e22ce;
  --erd-edge: #334155;
  --erd-edge-soft: #64748b;
  --erd-label: #0f172a;
  --erd-main: #0b1220;
  --erd-sub: #334155;
  --erd-legend-bg: #ffffff;
  --erd-legend-stroke: #334155;
  --erd-legend-title: #0f172a;
  --erd-shadow-color: #9aa8bd;
  --erd-shadow-opacity: 0.45;
  --erd-title-size: clamp(14px, 0.45vw + 12px, 18px);
  --erd-col-size: clamp(11px, 0.35vw + 10px, 14px);
  --erd-key-size: clamp(10px, 0.3vw + 9px, 13px);
  --erd-label-size: clamp(10px, 0.3vw + 9px, 13px);
  --erd-main-size: clamp(20px, 1vw + 16px, 30px);
  --erd-sub-size: clamp(12px, 0.35vw + 11px, 15px);
  --erd-legend-title-size: clamp(13px, 0.35vw + 11px, 16px);
}

html[data-theme='dark'] {
  --erd-bg: #171b23;
  --erd-grid: #1f2836;
  --erd-panel-bg: #21262e;
  --erd-panel-stroke: #79c0ff;
  --erd-header-bg: #1a3b7e;
  --erd-title: #f0f6fc;
  --erd-col: #c4d0e0;
  --erd-pk: #7ad7e6;
  --erd-fk: #d2a2ff;
  --erd-edge: #79c0ff;
  --erd-edge-soft: #4da3ff;
  --erd-label: #dde6ef;
  --erd-main: #f0f6fc;
  --erd-sub: #c4d0e0;
  --erd-legend-bg: #21262e;
  --erd-legend-stroke: #79c0ff;
  --erd-legend-title: #f0f6fc;
  --erd-shadow-color: #000000;
  --erd-shadow-opacity: 0.6;
}

.bg { fill: var(--erd-bg); }
.grid { stroke: var(--erd-grid); stroke-width: 1; }
.panel { fill: var(--erd-panel-bg); stroke: var(--erd-panel-stroke); stroke-width: 1.5; }
.header { fill: var(--erd-header-bg); }
.title { fill: var(--erd-title); font: 700 var(--erd-title-size) 'Segoe UI', Arial, sans-serif; }
.col { fill: var(--erd-col); font: var(--erd-col-size) 'Segoe UI', Arial, sans-serif; }
.pk { fill: var(--erd-pk); font: 700 var(--erd-key-size) 'Segoe UI', Arial, sans-serif; }
.fk { fill: var(--erd-fk); font: 700 var(--erd-key-size) 'Segoe UI', Arial, sans-serif; }
.edge { stroke: var(--erd-edge); stroke-width: 2; fill: none; }
.edge-soft { stroke: var(--erd-edge-soft); stroke-width: 1.6; fill: none; stroke-dasharray: 5 4; }
.label { fill: var(--erd-label); font: var(--erd-label-size) 'Segoe UI', Arial, sans-serif; }
.main { fill: var(--erd-main); font: 700 var(--erd-main-size) 'Segoe UI', Arial, sans-serif; }
.sub { fill: var(--erd-sub); font: var(--erd-sub-size) 'Segoe UI', Arial, sans-serif; }
.legend-box { fill: var(--erd-legend-bg); stroke: var(--erd-legend-stroke); stroke-width: 1.2; }
.legend-title { fill: var(--erd-legend-title); font: 700 var(--erd-legend-title-size) 'Segoe UI', Arial, sans-serif; }

.erd-helper-text {
    text-align: center;
    color: var(--question-text);
}
.erd-lead {
    margin: 0 auto;
    max-width: 980px;
    text-align: center;
    color: var(--question-text);
    line-height: 1.5;
}
.erd-actions {
    margin-top: 0.75em;
    text-align: center;
}
.erd-actions a {
    margin: 0 0.5em;
}

.erd-page-wrap {
  justify-items: center;
  margin-top: 5em;
}

.erd-figure-wrap {
  margin-top: 1em;
  max-width: 100%;
  /* Small screens: allow scrolling */
  overflow: auto;
  /* Limit height on small screens to enable scroll */
  /* max-height: 70vh; */
}

.erd-figure-wrap svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Large screens: prevent scroll, let SVG fit naturally */
@media (max-width: 1024px) {
  .erd-figure-wrap {
    max-width: none;
    min-width: 1024px !important;
    overflow: visible;
    height: auto;
  }
}