:root {
  --interval-bg: #070b13;
  --interval-panel: #0c1422;
  --interval-line: #263650;
  --interval-text: #f7f8ff;
  --interval-muted: #91a0ba;
  --interval-cyan: #4fe7ff;
  --interval-green: #42efa3;
  --interval-gold: #ffbe32;
  --interval-purple: #8e68ff;
  --interval-red: #ff6685;
}

body[data-page="block-interval"] { background: var(--interval-bg); }
.interval-page { flex: 1 0 auto; min-width: 0; padding: clamp(16px, 2.4vw, 34px); }
.interval-shell {
  overflow: hidden;
  border: 1px solid rgba(79, 231, 255, .24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 86% 0%, rgba(79, 231, 255, .08), transparent 30%),
    #090f1a;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
.interval-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: clamp(18px, 2.5vw, 30px);
  border-bottom: 1px solid var(--interval-line);
}
.interval-eyebrow {
  color: var(--interval-cyan);
  font: 900 .66rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .17em;
}
.interval-head h1 {
  margin: 7px 0 5px;
  color: var(--interval-text);
  font-size: clamp(1.65rem, 3vw, 2.8rem);
  letter-spacing: -.04em;
}
.interval-head p { margin: 0; color: var(--interval-muted); font-size: .86rem; line-height: 1.5; }
.average-card {
  min-width: 220px;
  padding: 14px 16px;
  border: 1px solid rgba(66, 239, 163, .35);
  border-radius: 12px;
  background: rgba(66, 239, 163, .08);
  text-align: right;
}
.average-card small { display: block; color: #91a8a1; font-size: .59rem; letter-spacing: .08em; }
.average-card strong { display: block; margin-top: 3px; color: var(--interval-green); font-size: 2rem; }
.average-card span { color: #9babbd; font-size: .62rem; }
.chart-card {
  position: relative;
  min-height: 480px;
  margin: clamp(14px, 2vw, 24px);
  padding: clamp(12px, 1.7vw, 20px);
  border: 1px solid #24334d;
  border-radius: 14px;
  background: #0b1422;
}
.chart-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chart-meta span {
  padding: 7px 10px;
  border-radius: 999px;
  color: #aebcd1;
  background: #111f33;
  font-size: .68rem;
}
.chart-meta b { color: var(--interval-text); }
.chart-host { min-width: 0; overflow: hidden; }
.interval-svg { display: block; width: 100%; height: 340px; }
.interval-grid { stroke: rgba(154, 174, 205, .14); stroke-width: 1; }
.interval-reference { stroke: var(--interval-gold); stroke-width: 1.5; stroke-dasharray: 7 6; }
.interval-axis { fill: #70819b; font: 9px ui-monospace, SFMono-Regular, Consolas, monospace; }
.interval-line { fill: none; stroke: var(--interval-cyan); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.interval-area { fill: rgba(79, 231, 255, .07); }
.interval-dot { fill: var(--interval-green); opacity: .72; }
.interval-marker-line { stroke: rgba(247, 248, 255, .48); stroke-width: 1; stroke-dasharray: 3 4; }
.interval-marker-dot { fill: var(--interval-gold); stroke: #fff; stroke-width: 2; }
.interval-overlay { fill: transparent; cursor: crosshair; }
.chart-readout {
  display: block;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 5px 0 0 auto;
  padding: 9px 11px;
  border: 1px solid #354966;
  border-radius: 9px;
  color: #dbe5f3;
  background: rgba(8, 14, 24, .92);
  font: 850 .68rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.chart-note { margin: 11px 0 0; color: #7f8da4; font-size: .68rem; line-height: 1.5; }
.chart-note b { color: var(--interval-gold); }
.interval-status {
  margin: 0 clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px);
  padding: 10px 12px;
  border: 1px solid rgba(79, 231, 255, .18);
  border-radius: 10px;
  color: var(--interval-cyan);
  background: #0a1422;
  font-size: .72rem;
}
.interval-status[data-state="ready"] { color: var(--interval-green); }
.interval-status[data-state="error"] { color: var(--interval-red); border-color: rgba(255, 102, 133, .34); }
.model-boundary {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(142, 104, 255, .3);
  border-radius: 10px;
  color: #9eabc0;
  background: #0b1220;
  font-size: .7rem;
  line-height: 1.5;
}
.model-boundary strong { flex: 0 0 auto; color: #bcaaff; }

@media (max-width: 760px) {
  .interval-page { padding: 12px; }
  .interval-head { grid-template-columns: 1fr; }
  .average-card { min-width: 0; text-align: left; }
  .chart-card { min-height: 420px; margin: 10px; padding: 10px; }
  .interval-svg { width: 1120px; max-width: none; height: 300px; }
  .chart-host { overflow-x: auto; }
  .model-boundary { display: grid; }
}