:root {
  --u: min(0.520833vw, 0.925926vh);
  --bg: #0a0d0c;
  --panel: rgba(11, 18, 16, 0.95);
  --panel-soft: rgba(15, 23, 20, 0.9);
  --line: rgba(255, 255, 255, 0.07);
  --text: #f6f4ef;
  --muted: rgba(242, 234, 215, 0.76);
  --green: #008773;
  --green-light: #40a596;
  --gold: #7a5c00;
  --gold-bright: #d1a12a;
  --gold-soft: #f2ead7;
  --amber: #f08700;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body {
  min-height: 100vh;
  background: radial-gradient(circle at 31% 46%, rgba(64, 165, 150, 0.2), transparent 31%), var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans", sans-serif;
  display: grid;
  place-items: center;
}

.dashboard {
  width: min(calc(100vw - 2.4 * var(--u)), calc((100vh - 2.4 * var(--u)) * 16 / 9));
  height: min(calc(100vh - 2.4 * var(--u)), calc((100vw - 2.4 * var(--u)) * 9 / 16));
  padding: calc(2.8 * var(--u)) calc(3.2 * var(--u));
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: calc(1.6 * var(--u));
  animation: pixel-shift 96s ease-in-out infinite alternate;
}

.topbar, .rotation-meter, .hero-grid, .data-grid, .panel-head, .euribor-strip-head { display: grid; }
.topbar, .rotation-meter, .panel-head, .euribor-strip-head { align-items: center; }
.topbar { grid-template-columns: 1fr auto; }
.rotation-meter { grid-template-columns: auto 1fr auto; gap: calc(1.4 * var(--u)); }
.hero-grid, .data-grid { height: 100%; }
.hero-grid { grid-template-columns: 1.55fr 0.88fr; gap: calc(1.8 * var(--u)); }
.data-grid { grid-template-columns: 1.42fr 0.92fr; gap: calc(1.8 * var(--u)); }
.view-stage { position: relative; min-height: 0; }
.board-view {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(calc(1.2 * var(--u)));
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: none;
}
.board-view.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }

.panel {
  background: linear-gradient(180deg, rgba(15, 24, 21, 0.98), rgba(10, 16, 14, 0.96));
  border: 1px solid var(--line);
  border-radius: calc(1.3 * var(--u));
  overflow: hidden;
}

.brand, .hero-label, .panel-kicker, .chip-tenor, .rail-term, .axis-year, .grid-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.brand, .hero-label, .chip-tenor, .rail-term, .rotation-next { color: var(--muted); }
.panel-kicker { color: var(--gold-bright); font-size: calc(1.25 * var(--u)); font-weight: 600; }
.brand { font-size: calc(2.65 * var(--u)); font-weight: 700; }
.topbar-meta { display: flex; align-items: center; gap: calc(2 * var(--u)); font-size: calc(2.2 * var(--u)); }
.status-pill { display: inline-flex; align-items: center; gap: calc(0.9 * var(--u)); }
.status-dot {
  width: calc(1.3 * var(--u));
  height: calc(1.3 * var(--u));
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 calc(1.8 * var(--u)) rgba(209, 161, 42, 0.24);
  animation: breathe 2.6s infinite;
}
.status-dot.ok { background: var(--green-light); box-shadow: 0 0 calc(1.8 * var(--u)) rgba(64, 165, 150, 0.56); }

.rotation-track {
  height: calc(0.34 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.rotation-bar {
  width: 100%;
  height: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--green-light), var(--green));
}
.rotation-next { font-size: calc(1.45 * var(--u)); text-align: right; }

.hero-label, .hero-meta, .euribor-strip-note, .euribor-card-period, .grid-label, .delta, .rail-rate, .chip-rate, .hero-value, .rotation-next {
  font-variant-numeric: tabular-nums;
}
.hero-value, .rail-rate, .chip-rate { font-family: "IBM Plex Mono", monospace; }
.hero-value {
  display: flex;
  align-items: flex-start;
  gap: 0.08em;
  line-height: 0.88;
  text-shadow: 0 0 calc(2.4 * var(--u)) rgba(64, 165, 150, 0.2);
}
.hero-unit { font-size: 0.36em; color: var(--muted); transform: translateY(0.22em); }
.flash-up { animation: flash-up 1s ease; }
.flash-down { animation: flash-down 1s ease; }
.boot-rise { opacity: 0; transform: translateY(calc(1.1 * var(--u))); animation: rise 0.65s cubic-bezier(0.2, 0.9, 0.25, 1) forwards; animation-delay: calc(var(--stagger, 0) * 70ms); }

.stale .rotation-bar { background: linear-gradient(90deg, var(--amber), var(--gold-bright)); }
.stale .status-dot { background: var(--amber); box-shadow: 0 0 calc(1.6 * var(--u)) rgba(240, 135, 0, 0.48); }

@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes pixel-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(calc(0.25 * var(--u)), calc(-0.2 * var(--u))); }
  50% { transform: translate(calc(-0.4 * var(--u)), calc(0.15 * var(--u))); }
  75% { transform: translate(calc(0.18 * var(--u)), calc(0.35 * var(--u))); }
  100% { transform: translate(calc(-0.22 * var(--u)), calc(-0.3 * var(--u))); }
}
@keyframes flash-up { 0% { color: var(--green-light); text-shadow: 0 0 calc(2 * var(--u)) rgba(64, 165, 150, 0.52); } 100% { color: inherit; text-shadow: none; } }
@keyframes flash-down { 0% { color: var(--amber); text-shadow: 0 0 calc(1.6 * var(--u)) rgba(240, 135, 0, 0.4); } 100% { color: inherit; text-shadow: none; } }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }