.curve-panel, .metric-panel, .data-panel, .data-side-panel, .history-panel { padding: calc(2.2 * var(--u)); }
.curve-panel, .data-panel, .history-panel { display: grid; grid-template-rows: auto 1fr; gap: calc(1.4 * var(--u)); }
.metric-panel, .data-side-panel { display: grid; align-content: start; gap: calc(1.2 * var(--u)); }
.metric-panel { grid-template-rows: auto auto auto auto 1fr; }
.data-side-panel { grid-template-rows: auto auto auto auto auto 1fr; }
.panel-head { grid-template-columns: 1fr auto; gap: calc(1.6 * var(--u)); }

#curve-svg, #euribor-history-svg { width: 100%; height: 100%; display: block; min-height: 0; }
.curve-area { fill: url(#curveAreaGradient); }
.curve-path {
  fill: none;
  stroke: url(#curveGradient);
  stroke-width: calc(0.72 * var(--u));
  filter: url(#curveGlow);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.euribor-history-area { fill: url(#euriborHistoryAreaGradient); }
.euribor-history-path { stroke: url(#euriborHistoryGradient); filter: url(#euriborHistoryGlow); }
.curve-dot { fill: var(--gold-soft); stroke: var(--gold-bright); stroke-width: calc(0.18 * var(--u)); }
.curve-dot.tail { fill: var(--gold-bright); stroke: var(--gold-soft); stroke-width: calc(0.24 * var(--u)); }
.axis-line { stroke: rgba(242, 234, 215, 0.2); stroke-width: calc(0.12 * var(--u)); }
.grid-line { stroke: var(--line); stroke-width: calc(0.09 * var(--u)); }
.axis-year {
  fill: rgba(246, 244, 239, 0.92);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: calc(1.65 * var(--u));
  font-weight: 500;
}
.grid-label {
  fill: rgba(242, 234, 215, 0.62);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: calc(1.52 * var(--u));
  font-weight: 500;
}
.endpoint-tag text, .history-mark text {
  fill: var(--gold-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: calc(1.78 * var(--u));
  font-weight: 500;
}
.endpoint-tag.tail text { fill: var(--gold-bright); }
.draw { animation: draw 1.9s ease forwards; }

.hero-label { font-size: calc(1.45 * var(--u)); }
.hero-meta { display: grid; gap: calc(0.45 * var(--u)); color: var(--muted); font-size: calc(1.95 * var(--u)); }
.hero-meta-compact { font-size: calc(1.7 * var(--u)); }
.hero-value { font-size: calc(13 * var(--u)); }
.hero-value-compact { font-size: calc(9.2 * var(--u)); }
.delta-ribbon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.delta-ribbon-grid.is-empty { grid-template-columns: 1fr; }
.delta-ribbon-hero .delta-ribbon-grid { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ribbon-cell { display: grid; gap: calc(0.25 * var(--u)); padding: calc(0.6 * var(--u)) calc(0.55 * var(--u)); border-left: 1px solid var(--line); }
.ribbon-cell:first-child { border-left: 0; }
.ribbon-tag { color: var(--gold-soft); font-size: calc(1.3 * var(--u)); letter-spacing: 0.18em; text-transform: uppercase; }
.ribbon-value { color: rgba(242, 234, 215, 0.7); font-family: "IBM Plex Mono", monospace; font-size: calc(2 * var(--u)); }
.ribbon-cell.up .ribbon-value { color: var(--green-light); }
.ribbon-cell.down .ribbon-value { color: var(--amber); }
.ribbon-empty {
  padding: calc(0.7 * var(--u)) 0;
  border-top: 1px solid var(--line);
  color: rgba(242, 234, 215, 0.46);
  font-size: calc(1 * var(--u));
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

.euribor-strip { display: grid; gap: calc(1.1 * var(--u)); margin-top: calc(0.4 * var(--u)); }
.euribor-strip-head { grid-template-columns: 1fr auto; gap: calc(1.2 * var(--u)); align-items: end; }
.euribor-strip-note, .euribor-card-period { font-size: calc(1.45 * var(--u)); color: var(--muted); }
.euribor-strip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(1.1 * var(--u)); }
.euribor-strip-tall { grid-template-rows: auto 1fr; min-height: 0; }
.euribor-strip-grid-tall { grid-template-rows: repeat(3, minmax(0, 1fr)); height: 100%; min-height: 0; }
.euribor-strip-grid-tall .euribor-card-main { align-content: space-between; }
.euribor-card, .euribor-card-empty {
  border: 1px solid var(--line);
  border-radius: calc(1.1 * var(--u));
  background: rgba(255, 255, 255, 0.025);
  padding: calc(1.25 * var(--u)) calc(1.35 * var(--u));
}
.euribor-card { display: grid; gap: calc(0.6 * var(--u)); }
.euribor-card-wide { grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: calc(1.6 * var(--u)); }
.euribor-card-main { display: grid; align-content: start; gap: calc(0.6 * var(--u)); min-width: 0; }
.chip-tenor { font-size: calc(1.6 * var(--u)); }
.chip-rate { font-size: calc(3.15 * var(--u)); }
.euribor-delta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(0.65 * var(--u)); margin-top: calc(0.25 * var(--u)); }
.euribor-delta-side { grid-template-columns: 1fr; min-width: calc(10 * var(--u)); margin-top: 0; align-content: center; }
.euribor-delta {
  display: grid;
  gap: calc(0.18 * var(--u));
  padding-top: calc(0.55 * var(--u));
  border-top: 1px solid var(--line);
  color: rgba(242, 234, 215, 0.7);
}
.euribor-delta-side .euribor-delta:first-child { padding-top: 0; border-top: 0; }
.euribor-delta span { font-size: calc(1.15 * var(--u)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); }
.euribor-delta strong { font-size: calc(1.7 * var(--u)); font-family: "IBM Plex Mono", monospace; font-weight: 500; }
.euribor-delta.up strong { color: var(--green-light); }
.euribor-delta.down strong { color: var(--amber); }

.data-panel { min-width: 0; }
.rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(1.05 * var(--u)); align-content: start; }
.rail-expanded { grid-template-columns: 1fr; grid-template-rows: repeat(10, minmax(0, 1fr)); height: 100%; gap: 0; align-content: stretch; }
.rail-card {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: calc(1.6 * var(--u));
  padding: calc(0.4 * var(--u)) calc(0.7 * var(--u));
  border-bottom: 1px solid var(--line);
}
.rail-card:last-child { border-bottom: 0; }
.rail-term { font-size: calc(1.6 * var(--u)); }
.rail-rate { font-size: calc(3.6 * var(--u)); }
.rail-card .delta-ribbon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rail-card .delta-ribbon-grid.is-empty { grid-template-columns: 1fr; }
.rail-card .ribbon-cell { justify-items: center; text-align: center; padding: calc(0.2 * var(--u)) calc(0.6 * var(--u)); }
.rail-card .ribbon-tag { font-size: calc(1.3 * var(--u)); }
.rail-card .ribbon-value { font-size: calc(2 * var(--u)); }
.rail-card .ribbon-empty { font-size: calc(1.5 * var(--u)); text-align: center; }

.data-side-panel .euribor-strip-grid { grid-template-columns: 1fr; }
.data-side-panel .chip-rate { font-size: calc(3.6 * var(--u)); }

.history-table-wrap { min-width: 0; min-height: 0; }
.history-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: "IBM Plex Mono", monospace;
  font-size: calc(1.45 * var(--u));
}
.history-table th, .history-table td {
  border-bottom: 1px solid var(--line);
  padding: calc(1.05 * var(--u)) calc(0.8 * var(--u));
  text-align: center;
}
.history-table thead th { color: var(--gold-soft); font-size: calc(1.18 * var(--u)); }
.history-table tbody th { color: var(--muted); }
.history-head-main, .history-head-sub { display: block; }
.history-head-main { text-transform: uppercase; letter-spacing: 0.12em; }
.history-head-sub { color: var(--muted); font-size: calc(0.92 * var(--u)); margin-top: calc(0.28 * var(--u)); }
.history-source {
  margin-left: calc(0.45 * var(--u));
  color: var(--amber);
  font-size: calc(0.85 * var(--u));
  vertical-align: super;
}
.history-cell.up { background: rgba(64, 165, 150, 0.08); color: var(--green-light); }
.history-cell.down { background: rgba(240, 135, 0, 0.08); color: #f2be6c; }

@keyframes draw { from { stroke-dashoffset: var(--dash); } to { stroke-dashoffset: 0; } }