:root {
  color-scheme: dark;
  --bg: #07090d;
  --bg-2: #0b1017;
  --panel: #101720;
  --panel-2: #121c27;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #e8edf5;
  --muted: #8f9cab;
  --soft: #c2cad5;
  --gold: #f7b733;
  --gold-2: #f4d06f;
  --cyan: #2bd6d6;
  --green: #35d07f;
  --red: #ff6078;
  --blue: #76a9ff;
  --violet: #a987ff;
  --shadow: rgba(0, 0, 0, 0.32);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans JP", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    linear-gradient(180deg, rgba(18, 25, 34, 0.96), rgba(7, 9, 13, 0.98)),
    radial-gradient(circle at 16% 0%, rgba(247, 183, 51, 0.12), transparent 36%),
    #07090d;
  color: var(--text);
  letter-spacing: 0;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: var(--gold-2);
  text-decoration: none;
}

a:hover {
  color: #ffffff;
}

.app-shell {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 18px 10px;
  border-right: 1px solid var(--line);
  background: rgba(5, 8, 12, 0.82);
  backdrop-filter: blur(16px);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(247, 183, 51, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(247, 183, 51, 0.18), rgba(43, 214, 214, 0.08)),
    #0d1219;
  color: #fff6d7;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 12px 28px var(--shadow);
}

.side-nav {
  display: grid;
  gap: 10px;
  width: 100%;
}

.side-nav__item {
  width: 42px;
  height: 42px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

#topSection,
#oiSection,
#intentSection,
#flowSection,
#scenarioSection,
#heatmapSection,
#priceSection {
  scroll-margin-top: 82px;
}

.side-nav__item.is-active,
.side-nav__item:hover {
  border-color: rgba(247, 183, 51, 0.28);
  background: rgba(247, 183, 51, 0.12);
  color: #fff1bd;
}

.terminal {
  width: min(1640px, 100%);
  margin: 0 auto;
  padding: 22px;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--gold-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.04;
}

h2 {
  font-size: 17px;
  line-height: 1.2;
}

.topbar__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.sticky-controls {
  position: sticky;
  top: 0;
  z-index: 16;
  display: grid;
  grid-template-columns: auto minmax(320px, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  justify-content: stretch;
  margin: -2px 0 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(7, 10, 15, 0.9);
  backdrop-filter: blur(18px);
}

.page-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(72px, 1fr));
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
}

.page-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
}

.page-chip span {
  display: none;
}

.page-chip strong {
  color: #dfe7f2;
  font-size: 12px;
  line-height: 1.08;
  white-space: nowrap;
}

.page-chip.is-active {
  border-color: rgba(43, 214, 214, 0.32);
  background: rgba(43, 214, 214, 0.11);
  box-shadow: inset 0 0 0 1px rgba(43, 214, 214, 0.1);
}

.page-chip.is-active span,
.page-chip.is-active strong {
  color: #d8ffff;
}

.instrument-switcher {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 1px;
  scrollbar-width: none;
}

.instrument-switcher::-webkit-scrollbar {
  display: none;
}

.instrument-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: auto;
  min-height: 34px;
  padding: 6px 10px 6px 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  cursor: pointer;
  text-align: left;
}

.instrument-chip span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(194, 202, 213, 0.78);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.instrument-chip strong {
  color: #e8edf5;
  font-size: 12px;
  line-height: 1.05;
  white-space: nowrap;
}

.instrument-chip.is-active {
  border-color: rgba(247, 183, 51, 0.42);
  background: rgba(247, 183, 51, 0.14);
  box-shadow: inset 0 0 0 1px rgba(247, 183, 51, 0.18);
}

.instrument-chip.is-active span {
  background: rgba(247, 183, 51, 0.22);
  color: #fff1bd;
}

.instrument-chip.is-active strong {
  color: #fff1bd;
}

.section-jump {
  position: static;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: -4px 0 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(7, 10, 15, 0.82);
  backdrop-filter: blur(16px);
  scrollbar-width: none;
}

.section-jump::-webkit-scrollbar {
  display: none;
}

.section-jump__item {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.section-jump__item.is-active,
.section-jump__item:hover {
  border-color: rgba(247, 183, 51, 0.28);
  background: rgba(247, 183, 51, 0.14);
  color: #fff1bd;
}

.timeframe-control .segmented__button {
  min-width: 46px;
  padding: 0 10px;
}

.segmented,
.chart-tabs {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.segmented__button,
.chart-tab,
.refresh-button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.segmented__button {
  padding: 0 14px;
}

.chart-tab {
  padding: 0 10px;
}

.segmented__button.is-active,
.chart-tab.is-active {
  background: rgba(247, 183, 51, 0.16);
  color: #fff1bd;
  box-shadow: inset 0 0 0 1px rgba(247, 183, 51, 0.22);
}

.refresh-button {
  padding: 0 14px;
  border: 1px solid rgba(43, 214, 214, 0.28);
  background: rgba(43, 214, 214, 0.08);
  color: #d7ffff;
}

.refresh-button:hover {
  border-color: rgba(43, 214, 214, 0.52);
}

.ticker-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.ticker-item,
.metric-tile,
.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(18, 27, 38, 0.94), rgba(12, 17, 24, 0.94));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.ticker-item {
  display: grid;
  gap: 4px;
  min-height: 78px;
  padding: 13px 14px;
}

.ticker-label,
.metric-label,
.panel-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.ticker-item strong {
  font-size: 20px;
  line-height: 1.1;
}

.ticker-item span:last-child {
  color: var(--muted);
  font-size: 12px;
}

.ticker-item.status strong {
  color: var(--gold-2);
}

.ticker-item.status.is-live strong {
  color: var(--green);
}

.ticker-item.status.is-error strong {
  color: var(--red);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.cot-date-tile,
#oiSummary {
  display: none !important;
}

.institution-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.8fr);
  gap: 10px;
  margin-bottom: 10px;
}

.intent-panel {
  display: grid;
  grid-template-columns: minmax(160px, 0.56fr) minmax(220px, 0.7fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.intent-verdict {
  color: #ffe2a0;
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 900;
  line-height: 1.04;
  overflow-wrap: anywhere;
  word-break: normal;
}

.intent-copy {
  color: var(--soft);
  font-size: 13px;
  line-height: 1.55;
}

.intent-meter-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.intent-meter {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.028);
}

.intent-meter span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.intent-meter strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
}

.intent-meter__track {
  height: 8px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}

.intent-meter__fill {
  display: block;
  height: 100%;
  width: var(--fill);
  border-radius: inherit;
  background: var(--fill-color);
}

.tape-panel {
  min-height: 196px;
}

.tape-list {
  display: grid;
  gap: 9px;
}

.tape-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.026);
}

.tape-row__tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 26px;
  border-radius: 6px;
  background: rgba(43, 214, 214, 0.88);
  color: #071017;
  font-size: 12px;
  font-weight: 900;
}

.tape-row__body strong {
  display: block;
  font-size: 13px;
}

.tape-row__body span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.tape-row__price {
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.decision-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.coinglass-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.ratio-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.28fr) minmax(260px, 0.34fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.ratio-panel .panel-head,
.ratio-panel .ratio-source {
  margin: 0;
}

.edge-flow-panel {
  display: grid;
  gap: 12px;
}

.edge-flow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.flow-head-copy {
  max-width: 760px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.edge-flow-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.9fr) minmax(300px, 1fr) minmax(340px, 1.25fr);
  gap: 10px;
}

.edge-source-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.edge-source-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(118, 169, 255, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(7, 10, 15, 0.36);
}

.edge-source-card.is-official {
  border-color: rgba(53, 208, 127, 0.24);
}

.edge-source-card.is-estimated {
  border-color: rgba(247, 183, 51, 0.25);
}

.edge-source-card span {
  color: var(--gold-2);
  font-size: 10px;
  font-weight: 1000;
  text-transform: uppercase;
}

.edge-source-card strong {
  overflow: hidden;
  color: #f8fbff;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edge-source-card em {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edge-flow-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.026);
}

.edge-flow-card--bias {
  border-color: rgba(247, 183, 51, 0.16);
  background:
    linear-gradient(180deg, rgba(247, 183, 51, 0.065), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.026);
}

.edge-flow-card--ratio {
  border-color: rgba(52, 221, 210, 0.15);
}

.edge-flow-card h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}

.edge-flow-card .ratio-source,
.edge-flow-card .ratio-bar,
.edge-flow-card .liquidation-stats {
  margin-top: 0;
}

.edge-flow-card--bias .bias-result {
  font-size: clamp(30px, 2.6vw, 42px);
}

.bias-read {
  margin: -2px 0 0;
  color: #dce8f7;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.55;
}

.edge-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.edge-action-row div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.edge-action-row span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 1000;
}

.edge-action-row strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-card-note {
  margin: -2px 0 0;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
  color: #dce8f7;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.flow-card-note.long {
  border-color: rgba(53, 208, 127, 0.22);
  color: #baf8d2;
}

.flow-card-note.short {
  border-color: rgba(255, 90, 122, 0.24);
  color: #ffc1cb;
}

.flow-card-note.wait {
  border-color: rgba(247, 183, 51, 0.24);
  color: #ffe2a0;
}

.edge-flow-card--liquidation .liquidation-summary {
  margin-top: 2px;
}

.scenario-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.9fr);
  gap: 10px;
  margin-bottom: 10px;
}

.scenario-panel {
  min-height: 548px;
}

.scenario-text-panel {
  display: grid;
  align-content: start;
}

.scenario-wrap {
  position: relative;
  width: 100%;
  height: min(490px, 52vh);
  min-height: 376px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.006)),
    #0a0f15;
}

#scenarioCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.scenario-list {
  display: grid;
  gap: 10px;
}

.scenario-guide {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(118, 169, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(53, 208, 127, 0.06), rgba(255, 96, 120, 0.04)),
    rgba(7, 10, 15, 0.45);
}

.scenario-guide.negative {
  border-color: rgba(255, 96, 120, 0.24);
}

.scenario-guide.positive {
  border-color: rgba(53, 208, 127, 0.24);
}

.scenario-guide__head {
  display: grid;
  gap: 5px;
}

.scenario-guide__head span,
.scenario-step span,
.scenario-evidence b {
  color: var(--gold-2);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
}

.scenario-guide__head strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.scenario-guide__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.scenario-step {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.scenario-step strong,
.scenario-step em {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.scenario-step strong {
  margin-top: 5px;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.scenario-step em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.scenario-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.scenario-evidence span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.scenario-evidence span.positive {
  background: rgba(53, 208, 127, 0.1);
  color: #9bf0c0;
}

.scenario-evidence span.warning {
  background: rgba(247, 183, 51, 0.1);
  color: #ffe2a0;
}

.scenario-evidence span.negative {
  background: rgba(255, 96, 120, 0.1);
  color: #ffb4c0;
}

.scenario-evidence em {
  color: inherit;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.scenario-guide p {
  margin: 0;
  color: var(--soft);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.scenario-phase-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.scenario-phase-strip span {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(118, 169, 255, 0.16);
  border-radius: 8px;
  background: rgba(7, 10, 15, 0.38);
}

.scenario-phase-strip b,
.scenario-phase-strip em {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.scenario-phase-strip b {
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.scenario-phase-strip em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.scenario-card {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.028);
}

.scenario-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.scenario-card strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
}

.scenario-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.48;
}

.scenario-card__level {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(247, 183, 51, 0.12);
  color: #ffe2a0;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.scenario-card.positive .scenario-card__level {
  background: rgba(53, 208, 127, 0.13);
  color: #9bf0c0;
}

.scenario-card.negative .scenario-card__level {
  background: rgba(255, 96, 120, 0.13);
  color: #ffb4c0;
}

.scenario-card.warning .scenario-card__level {
  background: rgba(247, 183, 51, 0.13);
  color: #ffe2a0;
}

.ratio-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ratio-hero div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.028);
}

.ratio-hero span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ratio-hero strong {
  font-size: 28px;
  line-height: 1;
}

.ratio-hero div:first-child strong {
  color: #8ff0bf;
}

.ratio-hero div:last-child strong {
  color: #ff9aaa;
}

.ratio-bar {
  display: flex;
  height: 18px;
  overflow: hidden;
  margin-top: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}

.ratio-bar__long {
  width: var(--long-width, 50%);
  background: linear-gradient(90deg, rgba(53, 208, 127, 0.85), rgba(43, 214, 214, 0.9));
}

.ratio-bar__short {
  flex: 1;
  background: linear-gradient(90deg, rgba(255, 96, 120, 0.82), rgba(169, 135, 255, 0.86));
}

.ratio-source {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.ratio-trend {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  background: rgba(2, 8, 14, 0.42);
}

.ratio-trend:empty {
  display: none;
}

.ratio-trend__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.ratio-trend__meta strong {
  color: #dce8f7;
  font-size: 12px;
}

.ratio-trend__meta strong.positive {
  color: #7ef0b3;
}

.ratio-trend__meta strong.negative {
  color: #ff8fa3;
}

.ratio-trend__meta em {
  color: var(--gold-2);
  font-style: normal;
}

.ratio-trend__spark {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 4px;
  height: 24px;
}

.ratio-trend__tick {
  display: block;
  min-height: 4px;
  height: var(--tick-height, 14px);
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, rgba(52, 221, 210, 0.95), rgba(54, 205, 126, 0.78));
  box-shadow: 0 0 10px rgba(52, 221, 210, 0.16);
}

.ratio-exchange-list {
  display: grid;
  gap: 5px;
}

.ratio-exchange-list--bars {
  gap: 7px;
}

.ratio-exchange-row {
  display: grid;
  grid-template-columns: minmax(78px, 1fr) 68px 68px;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.ratio-exchange-row.is-primary {
  outline: 1px solid rgba(255, 210, 88, 0.28);
  background: rgba(255, 210, 88, 0.055);
}

.ratio-exchange-row.is-unavailable {
  border: 1px dashed rgba(156, 172, 194, 0.16);
  background: rgba(255, 255, 255, 0.018);
  opacity: 0.82;
}

.ratio-exchange-row .long,
.ratio-exchange-row .short {
  display: block;
  padding: 3px 6px;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  font-style: normal;
}

.ratio-exchange-row .long {
  background: rgba(20, 136, 54, 0.78);
}

.ratio-exchange-row .short {
  background: rgba(139, 24, 31, 0.86);
}

.ratio-exchange-row--bars {
  grid-template-columns: minmax(92px, 0.55fr) minmax(170px, 1.45fr);
  min-height: 34px;
  padding: 7px;
}

.ratio-exchange-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ratio-exchange-name strong {
  overflow: hidden;
  color: #f7fbff;
  font-size: 12px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ratio-exchange-name small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ratio-exchange-bar {
  position: relative;
  display: grid;
  grid-template-columns: var(--long-width, 50%) 1fr;
  min-width: 0;
  height: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.035);
}

.ratio-exchange-bar--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(148, 163, 184, 0.12) 0 10px,
      rgba(148, 163, 184, 0.06) 10px 20px
    ),
    rgba(255, 255, 255, 0.025);
}

.ratio-exchange-placeholder {
  color: rgba(190, 204, 224, 0.76);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.ratio-exchange-row--bars .long,
.ratio-exchange-row--bars .short {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 5px;
  border-radius: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.ratio-exchange-row--bars .long {
  background: linear-gradient(90deg, rgba(20, 123, 47, 0.92), rgba(21, 150, 60, 0.86));
}

.ratio-exchange-row--bars .short {
  background: linear-gradient(90deg, rgba(133, 20, 28, 0.88), rgba(155, 27, 35, 0.92));
}

.ratio-exchange-note {
  padding: 8px 9px;
  border: 1px solid rgba(247, 183, 51, 0.18);
  border-radius: 7px;
  background: rgba(247, 183, 51, 0.055);
  color: #ffe2a0;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.45;
}

@media (max-width: 520px) {
  .ratio-exchange-row--bars {
    grid-template-columns: minmax(76px, 0.48fr) minmax(0, 1fr);
  }
}

.heatbook-panel {
  min-height: 482px;
}

.heatbook-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.heatbook-pair-control,
.heatbook-model-control,
.heatbook-mode-control {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.heatbook-pair-button,
.heatbook-model-button,
.heatbook-mode-button {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.heatbook-pair-button.is-active,
.heatbook-model-button.is-active,
.heatbook-mode-button.is-active {
  color: #ffffff;
  background: #0e67c8;
}

.heatbook-pair-button.is-active {
  color: #ffffff;
  background: #111111;
}

.heatbook-mode-button.is-prime.is-active {
  color: #171104;
  background: #fffaf0;
  box-shadow: 0 0 18px rgba(255, 232, 74, 0.78);
}

.heatbook-range-control {
  display: inline-flex;
  max-width: min(720px, 52vw);
  gap: 2px;
  padding: 3px;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  scrollbar-width: thin;
}

.heatbook-range-button {
  flex: 0 0 auto;
  min-width: 48px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.heatbook-range-button.is-active {
  color: #ffe8a8;
  background: rgba(244, 185, 66, 0.2);
  box-shadow: inset 0 0 0 1px rgba(244, 185, 66, 0.35);
}

.heatbook-palette-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.heatbook-palette-button {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  cursor: pointer;
}

.heatbook-palette-button.is-active {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.62), 0 0 0 4px rgba(14, 103, 200, 0.35);
}

.heatbook-palette-button--classic {
  background: linear-gradient(90deg, #4b005d, #304f93, #1aa2a1, #38c96d, #fff200);
}

.heatbook-palette-button--sunset {
  background: linear-gradient(90deg, #4b005d, #5d2e86, #d45d84, #ff9f7a, #ffe16a);
}

.heatbook-palette-button--spectrum {
  background: linear-gradient(90deg, #4b005d, #2456a4, #00a6c7, #3bd174, #fff200);
}

.heatbook-palette-button--shadow {
  background: linear-gradient(90deg, #1b163c, #234f7d, #2ba99e, #d0e54c, #fff7a8);
}

.heatbook-threshold {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 270px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.heatbook-threshold strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.heatbook-threshold input {
  width: 150px;
  accent-color: var(--accent);
}

.heatbook-map-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.heatbook-map-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.heatbook-pro-legend {
  justify-content: center;
  margin: 10px 0 8px;
}

.heatbook-wrap {
  position: relative;
  width: 100%;
  height: min(680px, 66vh);
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: #16001d;
}

#heatbookCanvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}

#heatbookCanvas:active {
  cursor: grabbing;
}

.heatbook-tooltip {
  position: absolute;
  z-index: 3;
  min-width: 206px;
  padding: 10px 12px;
  border: 1px solid rgba(140, 106, 255, 0.36);
  border-radius: 8px;
  background: rgba(16, 22, 34, 0.94);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
  pointer-events: none;
}

.heatbook-tooltip strong {
  display: block;
  margin-bottom: 7px;
  color: #ffffff;
  font-size: 13px;
}

.heatbook-tooltip span {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--soft);
  font-size: 12px;
  line-height: 1.6;
}

.heatbook-tooltip em {
  color: #ffffff;
  font-style: normal;
  font-weight: 900;
}

.heatbook-depth {
  display: block;
  margin-top: 12px;
}

.depth-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.depth-side {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.026);
}

.depth-side--above {
  border-color: rgba(47, 213, 126, 0.24);
  background: linear-gradient(180deg, rgba(47, 213, 126, 0.09), rgba(255, 255, 255, 0.02));
}

.depth-side--below {
  border-color: rgba(255, 86, 127, 0.24);
  background: linear-gradient(180deg, rgba(255, 86, 127, 0.09), rgba(255, 255, 255, 0.02));
}

.depth-side__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.depth-side__head span,
.depth-side__cue {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.depth-side__head strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.15;
}

.depth-side__head em {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.depth-side__cue {
  margin-bottom: 9px;
}

.depth-side__levels {
  display: grid;
  gap: 6px;
}

.depth-level {
  --depth-accent: var(--green);
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 7px;
  background: rgba(4, 9, 15, 0.36);
}

.depth-level--above {
  --depth-accent: var(--green);
}

.depth-level--below {
  --depth-accent: var(--red);
}

.depth-level--primary {
  border-color: color-mix(in srgb, var(--depth-accent) 36%, rgba(255, 255, 255, 0.06));
  background: color-mix(in srgb, var(--depth-accent) 12%, rgba(4, 9, 15, 0.46));
}

.depth-level__rank {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: #071017;
  background: var(--depth-accent);
  font-size: 11px;
  font-weight: 950;
}

.depth-level__main {
  min-width: 0;
}

.depth-level__main strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.depth-level__main span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.depth-level__amount {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.depth-level--primary .depth-level__amount {
  color: var(--depth-accent);
  font-size: 15px;
}

.depth-level__bar {
  grid-column: 2 / 4;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.depth-level__bar span {
  display: block;
  width: var(--depth-width);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--depth-accent), color-mix(in srgb, var(--depth-accent) 58%, #ffffff));
}

.depth-level--empty {
  grid-template-columns: 1fr;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.depth-row {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.028);
}

.depth-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.depth-row__price {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.depth-row__side {
  min-width: 44px;
  padding: 4px 6px;
  border-radius: 6px;
  color: #071017;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.depth-row__bar {
  height: 8px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}

.depth-row__fill {
  display: block;
  height: 100%;
  width: var(--depth-width);
  border-radius: inherit;
  background: var(--depth-color);
}

.depth-row__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.decision-panel {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(210px, 0.9fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.bias-result {
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  word-break: keep-all;
}

.bias-result.long {
  color: #8ff0bf;
}

.bias-result.short {
  color: #ff9aaa;
}

.bias-result.wait {
  color: #ffe2a0;
}

.bias-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(247, 183, 51, 0.24);
  border-radius: 8px;
  background: rgba(247, 183, 51, 0.12);
  color: #ffe2a0;
  font-size: 13px;
  font-weight: 900;
}

.reason-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.reason-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--soft);
  font-size: 12px;
  font-weight: 800;
}

.price-grid {
  grid-template-columns: 1fr;
}

.price-panel {
  min-height: 554px;
}

.price-wrap {
  height: min(500px, 52vh);
  min-height: 380px;
}

#priceMap {
  width: 100%;
  height: 100%;
  display: block;
}

.metric-tile {
  display: grid;
  align-content: space-between;
  min-height: 126px;
  padding: 16px;
}

.metric-value {
  display: block;
  margin-top: 12px;
  font-size: clamp(25px, 2.4vw, 36px);
  line-height: 1;
}

.metric-change {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  margin-top: 14px;
  padding: 0 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--soft);
  font-size: 12px;
  font-weight: 800;
}

.metric-change.positive {
  background: rgba(53, 208, 127, 0.13);
  color: #9bf0c0;
}

.metric-change.negative {
  background: rgba(255, 96, 120, 0.13);
  color: #ffb4c0;
}

.metric-change.warning {
  background: rgba(247, 183, 51, 0.13);
  color: #ffe2a0;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(320px, 0.9fr);
  gap: 10px;
  margin-bottom: 10px;
}

.flow-grid {
  grid-template-columns: 1fr;
}

.tradingview-panel {
  margin-top: 10px;
}

.tradingview-primary {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  order: 2;
}

.tradingview-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #9fc2f3;
  font-size: 12px;
  font-weight: 800;
}

.tradingview-meta-row span {
  min-width: 0;
}

.tradingview-meta-row span:first-child {
  color: #f8d36f;
}

.tradingview-wrap {
  position: relative;
  width: 100%;
  height: min(620px, 58vh);
  min-height: 430px;
  overflow: hidden;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: #0a0f15;
}

#tradingViewChart {
  width: 100%;
  height: 100%;
}

.tradingview-native-chart {
  width: 100%;
  height: 100%;
}

.live-price-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.live-price-canvas:active {
  cursor: grabbing;
}

.chart-panel.is-tv-primary .oi-chart-wrap {
  display: block;
  height: min(380px, 42vh);
  min-height: 300px;
  margin-top: 10px;
  overscroll-behavior: contain;
  background:
    linear-gradient(180deg, rgba(43, 214, 214, 0.045), rgba(43, 214, 214, 0) 30%),
    #0a0f15;
}

.chart-panel.is-tv-primary #chartLegend {
  display: flex;
}

.tradingview-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.content-grid.price-grid {
  grid-template-columns: 1fr;
}

.price-panel {
  grid-column: 1 / -1;
}

.content-grid--lower {
  grid-template-columns: minmax(330px, 0.85fr) minmax(0, 1.35fr);
}

.panel {
  min-width: 0;
  padding: 16px;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.chart-panel {
  min-height: 514px;
}

.oi-grid .chart-panel {
  grid-column: 1 / -1;
  order: 1;
}

.oi-grid .signal-panel {
  grid-column: 2;
  grid-row: 3;
  order: 5;
}

.oi-edge-flow-panel {
  grid-column: 1 / -1;
  grid-row: 2;
  order: 2;
}

.flow-grid .oi-edge-flow-panel {
  grid-row: auto;
  order: initial;
}

.oi-edge-panel {
  grid-column: 1;
  grid-row: 2;
  order: 2;
}

.oi-ratio-panel {
  grid-column: 2;
  grid-row: 2;
  order: 3;
  grid-template-columns: 1fr;
}

.oi-liquidation-panel {
  grid-column: 1 / -1;
  grid-row: 3;
  order: 4;
}

.chart-wrap {
  position: relative;
  width: 100%;
  height: min(460px, 48vh);
  min-height: 360px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)),
    #0a0f15;
}

.oi-exchange-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.oi-quality-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}

.oi-quality-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 74px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.oi-quality-card span,
.oi-quality-card em {
  overflow: visible;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}

.oi-quality-card strong {
  overflow: visible;
  color: #edf6ff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: clip;
  white-space: normal;
}

.oi-quality-card.live {
  border-color: rgba(43, 214, 214, 0.2);
}

.oi-quality-card.live strong {
  color: #7df7ff;
}

.oi-quality-card.warning {
  border-color: rgba(247, 183, 51, 0.24);
}

.oi-quality-card.warning strong {
  color: #ffe2a0;
}

.oi-quality-card.error {
  border-color: rgba(255, 96, 120, 0.26);
}

.oi-quality-card.error strong {
  color: #ffb4c0;
}

.oi-quality-card.muted strong {
  color: var(--soft);
}

.oi-exchange-tile {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 86px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.028);
}

.oi-exchange-tile span,
.oi-exchange-tile em {
  overflow: visible;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: clip;
  white-space: normal;
}

.oi-exchange-tile strong {
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.oi-exchange-tile b {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--soft);
  font-size: 10px;
  line-height: 20px;
}

.oi-exchange-tile.primary {
  border-color: rgba(247, 183, 51, 0.25);
}

.oi-exchange-tile.primary strong {
  color: #ffe2a0;
}

.oi-exchange-tile.live {
  border-color: rgba(43, 214, 214, 0.22);
}

.oi-exchange-tile.live strong {
  color: #9bf8ff;
}

.oi-exchange-tile.private {
  opacity: 0.78;
}

.price-wrap {
  height: min(560px, 58vh);
  min-height: 430px;
}

.oi-chart-wrap {
  height: min(820px, 78vh);
  min-height: 700px;
}

.calendar-page {
  display: grid;
  gap: 10px;
}

.calendar-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
}

.calendar-hero__copy {
  display: grid;
  gap: 8px;
  align-content: center;
}

.calendar-hero h2 {
  font-size: clamp(21px, 2.2vw, 30px);
}

.calendar-lead {
  max-width: 760px;
  margin: 0;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.65;
}

.calendar-source-card {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid rgba(43, 214, 214, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(43, 214, 214, 0.1), rgba(43, 214, 214, 0.025)),
    rgba(7, 10, 15, 0.36);
}

.calendar-source-card span,
.calendar-source-card em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.calendar-source-card strong {
  color: var(--cyan);
  font-size: 16px;
}

.calendar-controls {
  display: grid;
  gap: 10px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.012)),
    rgba(8, 12, 18, 0.92);
}

.calendar-control-group,
.calendar-filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.calendar-control-group::-webkit-scrollbar,
.calendar-filter-row::-webkit-scrollbar {
  display: none;
}

.calendar-day-tab,
.calendar-filter {
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  cursor: pointer;
}

.calendar-day-tab {
  display: grid;
  gap: 4px;
  align-items: center;
  min-width: 162px;
  min-height: 52px;
  padding: 7px 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(16, 23, 32, 0.82);
}

.calendar-day-tab__label,
.calendar-filter {
  font-size: 12px;
  font-weight: 800;
}

.calendar-day-tab__label {
  overflow: hidden;
  color: #dfe8f6;
  line-height: 1.1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-day-tab__meta {
  display: flex;
  gap: 4px;
  align-items: baseline;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.calendar-day-tab__meta b,
.calendar-day-tab__meta i {
  font-style: normal;
  font-weight: 900;
}

.calendar-day-tab__meta b {
  color: #9eb3d1;
}

.calendar-day-tab__meta em {
  color: var(--gold-2);
  font-style: normal;
  font-weight: 1000;
}

.calendar-day-tab__meta em.has-critical {
  color: #ff7087;
}

.calendar-day-tab__meta i {
  color: #7f91ab;
}

.calendar-day-tab.is-active .calendar-day-tab__label,
.calendar-day-tab:hover .calendar-day-tab__label {
  color: #fff6d7;
}

.calendar-day-tab.is-active .calendar-day-tab__meta b,
.calendar-day-tab:hover .calendar-day-tab__meta b {
  color: var(--gold-2);
}

.calendar-filter {
  min-width: 78px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.03);
}

.calendar-day-tab.is-active,
.calendar-day-tab:hover,
.calendar-filter.is-active,
.calendar-filter:hover {
  border-color: rgba(247, 183, 51, 0.42);
  background:
    linear-gradient(135deg, rgba(247, 183, 51, 0.2), rgba(255, 96, 120, 0.06)),
    rgba(16, 23, 32, 0.9);
  color: #fff1bd;
}

.calendar-risk-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.calendar-brief-card {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(120px, 0.45fr) minmax(260px, 1.1fr) minmax(110px, 0.36fr);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(255, 96, 120, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 96, 120, 0.095), rgba(247, 183, 51, 0.055), rgba(43, 214, 214, 0.028)),
    rgba(16, 23, 32, 0.86);
}

.calendar-brief-main,
.calendar-brief-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.calendar-brief-main {
  padding-left: 11px;
  border-left: 3px solid var(--gold);
}

.calendar-brief-card--critical .calendar-brief-main {
  border-left-color: var(--red);
}

.calendar-brief-card--critical .calendar-brief-main strong,
.calendar-brief-card--critical .calendar-brief-stat--wide strong {
  color: #ffbac5;
}

.calendar-brief-card--high .calendar-brief-main,
.calendar-brief-card--medium .calendar-brief-main {
  border-left-color: var(--gold);
}

.calendar-brief-card--low .calendar-brief-main {
  border-left-color: var(--green);
}

.calendar-brief-main span,
.calendar-brief-stat span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.calendar-brief-main strong,
.calendar-brief-stat strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-brief-main em,
.calendar-brief-stat em {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  overflow: hidden;
  color: var(--soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-brief-stat--wide strong {
  color: #fff1bd;
}

.calendar-risk-card {
  position: relative;
  display: grid;
  gap: 7px;
  min-height: 104px;
  padding: 13px 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
    rgba(16, 23, 32, 0.86);
}

.calendar-risk-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--cyan);
}

.calendar-risk-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.calendar-risk-card strong {
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
}

.calendar-risk-card em {
  overflow: hidden;
  color: var(--soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-risk-card--critical {
  border-color: rgba(255, 96, 120, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 96, 120, 0.14), rgba(255, 96, 120, 0.025)),
    rgba(16, 23, 32, 0.9);
}

.calendar-risk-card--critical::before {
  background: var(--red);
}

.calendar-risk-card--critical strong {
  color: #ffd8df;
}

.calendar-risk-card--high {
  border-color: rgba(247, 183, 51, 0.34);
  background:
    linear-gradient(135deg, rgba(247, 183, 51, 0.13), rgba(247, 183, 51, 0.024)),
    rgba(16, 23, 32, 0.9);
}

.calendar-risk-card--high::before {
  background: var(--gold);
}

.calendar-risk-card--high strong {
  color: #ffe8a8;
}

.calendar-risk-card--medium::before,
.calendar-risk-card--waiting::before {
  background: var(--gold-2);
}

.calendar-risk-card--next::before {
  background: var(--cyan);
}

.calendar-risk-card--market::before,
.calendar-risk-card--low::before {
  background: var(--green);
}

.calendar-risk-meter {
  grid-column: 1 / -1;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.calendar-risk-meter b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--gold), var(--red));
}

.calendar-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}

.calendar-summary-panel,
.calendar-list-panel {
  padding: 14px;
}

.calendar-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}

.calendar-focus-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 10px;
}

.calendar-focus-list {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.008)),
    rgba(7, 10, 15, 0.32);
}

.calendar-focus-list--day {
  border-color: rgba(255, 96, 120, 0.22);
}

.calendar-focus-list--week {
  border-color: rgba(43, 214, 214, 0.16);
}

.calendar-focus-head,
.calendar-focus-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.calendar-focus-head {
  min-height: 28px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.calendar-focus-head span {
  color: #ffbac5;
  font-size: 12px;
  font-weight: 900;
}

.calendar-focus-head strong {
  color: var(--soft);
  font-size: 12px;
}

.calendar-focus-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 58px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.026);
}

.calendar-focus-item--critical {
  border-color: rgba(255, 96, 120, 0.24);
}

.calendar-focus-item--us-important {
  border-color: rgba(247, 183, 51, 0.3);
  background:
    linear-gradient(90deg, rgba(247, 183, 51, 0.09), rgba(247, 183, 51, 0.018)),
    rgba(255, 255, 255, 0.026);
}

.calendar-focus-item--us-critical {
  border-color: rgba(255, 96, 120, 0.38);
  background:
    linear-gradient(90deg, rgba(255, 96, 120, 0.11), rgba(255, 96, 120, 0.022)),
    rgba(255, 255, 255, 0.026);
}

.calendar-focus-item--high {
  border-color: rgba(247, 183, 51, 0.22);
}

.calendar-focus-item--speech {
  border-color: rgba(43, 214, 214, 0.18);
}

.calendar-focus-flag {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055);
}

.calendar-focus-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.calendar-focus-line span {
  color: var(--gold-2);
  font-size: 11px;
  font-weight: 900;
}

.calendar-focus-body strong {
  overflow: hidden;
  color: #f5f7fb;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-focus-item--us-important .calendar-focus-body strong {
  color: #ffe1a3;
}

.calendar-focus-item--us-important .calendar-focus-line span {
  color: var(--gold-2);
}

.calendar-focus-item--us-critical .calendar-focus-body strong {
  color: #ffb6c2;
}

.calendar-focus-item--us-critical .calendar-focus-line span {
  color: #ff7087;
}

.calendar-focus-body em,
.calendar-focus-empty {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-focus-empty {
  display: grid;
  place-items: center;
  min-height: 72px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.calendar-watch-card {
  position: relative;
  display: grid;
  gap: 7px;
  min-height: 96px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.035);
}

.calendar-watch-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: rgba(194, 202, 213, 0.18);
}

.calendar-watch-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.calendar-watch-card--critical,
.calendar-event--critical {
  border-color: rgba(255, 96, 120, 0.34);
  background: rgba(255, 96, 120, 0.04);
}

.calendar-watch-card--critical::before {
  background: var(--red);
}

.calendar-watch-card--high,
.calendar-event--high {
  border-color: rgba(247, 183, 51, 0.26);
}

.calendar-watch-card--high::before {
  background: var(--gold);
}

.calendar-watch-card--speech,
.calendar-event--speech {
  border-color: rgba(43, 214, 214, 0.22);
}

.calendar-watch-card--speech::before {
  background: var(--cyan);
}

.calendar-event--critical {
  border-left-color: var(--red);
}

.calendar-event--us-important {
  border-color: rgba(247, 183, 51, 0.2);
  border-left-color: var(--gold);
  background:
    linear-gradient(90deg, rgba(247, 183, 51, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(255, 255, 255, 0.024);
}

.calendar-event--us-important .calendar-event__title-row strong {
  color: #ffe1a3;
}

.calendar-event--us-important .calendar-event__time strong {
  color: var(--gold-2);
}

.calendar-event--us-important .calendar-country {
  color: #fff1bd;
  background: rgba(247, 183, 51, 0.1);
}

.calendar-event--us-critical {
  border-color: rgba(255, 96, 120, 0.28);
  border-left-color: var(--red);
  background:
    linear-gradient(90deg, rgba(255, 96, 120, 0.075), rgba(255, 255, 255, 0.012)),
    rgba(255, 255, 255, 0.024);
}

.calendar-event--us-critical .calendar-event__title-row strong {
  color: #ffb6c2;
}

.calendar-event--us-critical .calendar-event__time strong {
  color: #ff7087;
}

.calendar-event--us-critical .calendar-country {
  color: #ffdce2;
  background: rgba(255, 96, 120, 0.12);
}

.calendar-event--high {
  border-left-color: var(--gold);
}

.calendar-event--speech {
  border-left-color: var(--cyan);
}

.calendar-watch-card strong {
  display: block;
  margin-top: 4px;
  color: #f5f7fb;
  font-size: 13px;
  line-height: 1.42;
}

.calendar-time {
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 900;
}

.calendar-watch-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.calendar-watch-meta span,
.calendar-watch-meta em,
.calendar-event__time span,
.calendar-event__meta span {
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.calendar-stars {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  color: rgba(247, 183, 51, 0.96);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
}

.calendar-stars--normal {
  color: rgba(194, 202, 213, 0.64);
}

.calendar-stars--speech {
  color: #74eeee;
}

.calendar-stars--critical {
  color: #ff92a4;
}

.calendar-impact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 8px !important;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.065) !important;
  color: var(--soft) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1;
  white-space: nowrap;
}

.calendar-impact--critical {
  background: rgba(255, 96, 120, 0.18) !important;
  color: #ffe1e6 !important;
}

.calendar-impact--high {
  background: rgba(247, 183, 51, 0.18) !important;
  color: #fff1bd !important;
}

.calendar-impact--speech {
  background: rgba(43, 214, 214, 0.14) !important;
  color: #dcffff !important;
}

.calendar-impact--normal {
  background: rgba(118, 169, 255, 0.12) !important;
  color: #dce8ff !important;
}

.calendar-timeline {
  display: grid;
  gap: 5px;
  margin-top: 10px;
}

.calendar-table-head {
  display: grid;
  grid-template-columns: 72px 74px minmax(0, 1fr) minmax(250px, 0.56fr);
  gap: 12px;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  color: #8192ab;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

.calendar-day-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 2px;
  padding: 7px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.calendar-day-heading strong {
  color: #fff1bd;
  font-size: 14px;
}

.calendar-day-heading span {
  color: var(--muted);
  font-size: 11px;
}

.calendar-event {
  position: relative;
  display: grid;
  grid-template-columns: 72px 74px minmax(0, 1fr) minmax(250px, 0.56fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-left: 2px solid rgba(194, 202, 213, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.028);
}

.calendar-event--soon {
  box-shadow: inset 0 0 0 1px rgba(255, 96, 120, 0.1);
}

.calendar-event--upcoming {
  background: rgba(43, 214, 214, 0.025);
}

.calendar-event--released {
  opacity: 0.86;
}

.calendar-event:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.045);
}

.calendar-event__time {
  display: grid;
  gap: 4px;
}

.calendar-event__time strong {
  color: #ffffff;
  font-size: 14px;
  line-height: 1;
}

.calendar-event__importance {
  display: flex;
  align-items: center;
  min-width: 0;
}

.calendar-event__main {
  min-width: 0;
}

.calendar-event__title-row {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.calendar-event__title-row strong {
  overflow: hidden;
  color: #edf4ff;
  font-size: 13px;
  line-height: 1.32;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-country {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-width: 56px;
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: #dce8ff;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.calendar-flag {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 28px;
  height: 18px;
  overflow: hidden;
  border-radius: 3px;
  background: #263141;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 2px 7px rgba(0, 0, 0, 0.18);
  vertical-align: -4px;
}

.calendar-flag > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.78);
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
}

.calendar-flag--us {
  background:
    linear-gradient(#b22234 0 8%, #fff 8% 16%, #b22234 16% 24%, #fff 24% 32%, #b22234 32% 40%, #fff 40% 48%, #b22234 48% 56%, #fff 56% 64%, #b22234 64% 72%, #fff 72% 80%, #b22234 80% 88%, #fff 88% 96%, #b22234 96%);
}

.calendar-flag--us::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 42%;
  height: 54%;
  background: #3c3b6e;
}

.calendar-flag--jp {
  background: #fff;
}

.calendar-flag--jp::before {
  content: "";
  position: absolute;
  inset: 4px 9px;
  border-radius: 50%;
  background: #bc002d;
}

.calendar-flag--cn {
  background: #de2910;
}

.calendar-flag--cn::before {
  content: "★";
  position: absolute;
  top: 1px;
  left: 3px;
  color: #ffde00;
  font-size: 9px;
  line-height: 1;
}

.calendar-flag--gb {
  background:
    linear-gradient(27deg, transparent 43%, #fff 43% 48%, #c8102e 48% 54%, #fff 54% 59%, transparent 59%),
    linear-gradient(153deg, transparent 43%, #fff 43% 48%, #c8102e 48% 54%, #fff 54% 59%, transparent 59%),
    linear-gradient(0deg, transparent 38%, #fff 38% 45%, #c8102e 45% 55%, #fff 55% 62%, transparent 62%),
    linear-gradient(90deg, transparent 35%, #fff 35% 43%, #c8102e 43% 57%, #fff 57% 65%, transparent 65%),
    #012169;
}

.calendar-flag--eu {
  background: #244aa5;
}

.calendar-flag--eu::before {
  content: "★";
  position: absolute;
  inset: 3px 0 0;
  color: #ffcc00;
  font-size: 9px;
  line-height: 1;
  text-align: center;
}

.calendar-flag--au,
.calendar-flag--nz {
  background: #012169;
}

.calendar-flag--au::before,
.calendar-flag--nz::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 45%;
  height: 50%;
  background:
    linear-gradient(27deg, transparent 42%, #fff 42% 48%, #c8102e 48% 54%, #fff 54% 60%, transparent 60%),
    linear-gradient(153deg, transparent 42%, #fff 42% 48%, #c8102e 48% 54%, #fff 54% 60%, transparent 60%),
    #012169;
}

.calendar-flag--au::after,
.calendar-flag--nz::after {
  content: "✦";
  position: absolute;
  right: 4px;
  bottom: 2px;
  color: #fff;
  font-size: 8px;
  line-height: 1;
}

.calendar-flag--ca {
  background: linear-gradient(90deg, #d52b1e 0 27%, #fff 27% 73%, #d52b1e 73%);
}

.calendar-flag--ca::before {
  content: "✦";
  position: absolute;
  inset: 4px 0 0;
  color: #d52b1e;
  font-size: 9px;
  line-height: 1;
  text-align: center;
}

.calendar-flag--de {
  background: linear-gradient(#000 0 33%, #dd0000 33% 66%, #ffce00 66%);
}

.calendar-flag--fr {
  background: linear-gradient(90deg, #0055a4 0 33%, #fff 33% 66%, #ef4135 66%);
}

.calendar-flag--it {
  background: linear-gradient(90deg, #009246 0 33%, #fff 33% 66%, #ce2b37 66%);
}

.calendar-flag--ch {
  background: #d52b1e;
}

.calendar-flag--ch::before {
  content: "";
  position: absolute;
  inset: 4px 12px;
  background: #fff;
}

.calendar-flag--ch::after {
  content: "";
  position: absolute;
  inset: 7px 7px;
  background: #fff;
}

.calendar-flag--tr {
  background: #e30a17;
}

.calendar-flag--tr::before {
  content: "★";
  position: absolute;
  top: 4px;
  left: 12px;
  color: #fff;
  font-size: 8px;
  line-height: 1;
}

.calendar-flag--us > span,
.calendar-flag--jp > span,
.calendar-flag--cn > span,
.calendar-flag--gb > span,
.calendar-flag--eu > span,
.calendar-flag--au > span,
.calendar-flag--nz > span,
.calendar-flag--ca > span,
.calendar-flag--de > span,
.calendar-flag--fr > span,
.calendar-flag--it > span,
.calendar-flag--ch > span,
.calendar-flag--tr > span {
  color: transparent;
}

.calendar-country--us {
  background: rgba(118, 169, 255, 0.18);
  color: #dbe8ff;
}

.calendar-country--japan {
  background: rgba(255, 96, 120, 0.16);
  color: #ffe1e6;
}

.calendar-country--europe {
  background: rgba(169, 135, 255, 0.18);
  color: #eee6ff;
}

.calendar-country--china {
  background: rgba(255, 96, 120, 0.13);
  color: #ffe2e7;
}

.calendar-country--australia,
.calendar-country--newzealand {
  background: rgba(53, 208, 127, 0.14);
  color: #dcffe9;
}

.calendar-country--canada {
  background: rgba(247, 183, 51, 0.14);
  color: #fff1bd;
}

.calendar-event__meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 7px;
}

.calendar-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.calendar-values span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px 7px;
  border-radius: 7px;
  background: rgba(7, 10, 15, 0.38);
}

.calendar-values em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.calendar-values strong {
  overflow: hidden;
  color: var(--soft);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-soon {
  background: rgba(255, 96, 120, 0.16) !important;
  color: #ffe1e6 !important;
}

.is-upcoming {
  background: rgba(43, 214, 214, 0.12) !important;
  color: #d8ffff !important;
}

.is-released {
  background: rgba(53, 208, 127, 0.12) !important;
  color: #ddffe9 !important;
}

.calendar-empty {
  display: grid;
  gap: 6px;
  place-items: center;
  min-height: 180px;
  color: var(--muted);
  text-align: center;
}

.calendar-empty strong {
  color: var(--soft);
}

#mainChart,
#priceMap {
  width: 100%;
  height: 100%;
  display: block;
}

#mainChart {
  cursor: crosshair;
  touch-action: none;
}

.tv-chart-layer {
  position: absolute;
  inset: 0;
  display: none;
}

.tv-chart-layer.is-ready {
  display: block;
}

.chart-tooltip {
  position: absolute;
  z-index: 2;
  min-width: 194px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(9, 13, 19, 0.94);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
  pointer-events: none;
  transform: translate(10px, -50%);
}

.chart-tooltip strong {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
}

.chart-tooltip span {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--soft);
  font-size: 12px;
}

.oi-target-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 6px;
  padding: 8px;
  border: 1px solid rgba(43, 214, 214, 0.18);
  border-radius: 8px;
  background: rgba(5, 11, 17, 0.78);
}

.oi-target-summary[hidden] {
  display: none;
}

.oi-target-summary__item {
  min-width: 0;
  padding: 8px 10px;
  border-left: 2px solid rgba(148, 163, 184, 0.45);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.026);
}

.oi-target-summary__item span,
.oi-target-summary__item em {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oi-target-summary__item strong {
  display: block;
  overflow: hidden;
  margin: 2px 0 1px;
  color: #f5f7fb;
  font-size: 16px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oi-target-summary__item--price {
  border-left-color: var(--gold);
}

.oi-target-summary__item--oi {
  border-left-color: var(--cyan);
}

.oi-target-summary__item--long {
  border-left-color: var(--green);
}

.oi-target-summary__item--short {
  border-left-color: var(--red);
}

.liquidation-panel {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.026);
}

.liquidation-panel__head,
.liquidation-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.edge-flow-card--liquidation .liquidation-summary {
  align-items: flex-start;
  min-height: 42px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.liquidation-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.liquidation-range-control {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
}

.liquidation-range-button {
  min-width: 38px;
  height: 28px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.liquidation-range-button.is-active {
  color: #ffe8a8;
  background: rgba(244, 185, 66, 0.18);
  box-shadow: inset 0 0 0 1px rgba(244, 185, 66, 0.32);
}

.liquidation-panel h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}

.liquidation-panel__head > span,
.liquidation-summary {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.liquidation-bars {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.liquidation-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.liq-stat {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.028);
}

.liq-stat span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.liq-stat strong {
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.liq-stat.long strong {
  color: #9bf0c0;
}

.liq-stat.short strong {
  color: #ff9aaa;
}

.liq-stat em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.liquidation-flow-wrap {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: #0a0f15;
}

#liquidationCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.liq-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.liq-row__head strong {
  display: block;
  color: var(--text);
  font-size: 13px;
}

.liq-row__head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.liq-row__bars {
  display: grid;
  gap: 5px;
}

.liq-bar {
  position: relative;
  display: grid;
  grid-template-columns: 96px 64px;
  justify-content: space-between;
  min-height: 20px;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.045);
}

.liq-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--liq-width);
  background: color-mix(in srgb, var(--liq-color) 78%, transparent);
  opacity: 0.78;
}

.liq-bar__price,
.liq-bar__amount {
  position: relative;
  z-index: 1;
  align-self: center;
  padding: 0 7px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.liq-bar__amount {
  text-align: right;
}

.liq-empty {
  color: var(--muted);
  font-size: 12px;
}

.liquidation-summary {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.liquidation-summary strong {
  color: #ffffff;
  font-size: 12px;
}

.oi-guide {
  display: none;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  gap: 10px;
  margin-top: 12px;
}

#intentSection,
.tape-panel,
#priceSection,
[data-scroll="#priceSection"] {
  display: none !important;
}

.oi-guide__read,
.oi-source-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.028);
}

.oi-guide__read {
  display: grid;
  gap: 6px;
}

.oi-guide__read span,
.oi-source-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.oi-guide__read strong {
  color: #fff1bd;
  font-size: 13px;
  line-height: 1.35;
}

.oi-guide__read em,
.oi-source-card em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.42;
}

.oi-source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.oi-exchange-table {
  display: grid;
  grid-column: 1 / -1;
  gap: 0;
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  background: rgba(4, 8, 14, 0.58);
}

.oi-exchange-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(90px, 0.7fr) minmax(120px, 0.8fr) minmax(120px, 0.8fr) minmax(160px, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 9px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.oi-exchange-row:first-child {
  border-top: 0;
}

.oi-exchange-row--head {
  min-height: 32px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.oi-exchange-row.is-primary {
  background: rgba(247, 183, 51, 0.055);
}

.oi-exchange-row span {
  min-width: 0;
  color: var(--soft);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.oi-exchange-row strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

.oi-exchange-row em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.32;
}

.oi-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
}

.oi-status.live {
  background: rgba(53, 208, 127, 0.16);
  color: #9bf0c0;
}

.oi-status.private {
  background: rgba(247, 183, 51, 0.13);
  color: #ffe2a0;
}

.oi-status.error {
  background: rgba(255, 96, 120, 0.14);
  color: #ffb4c0;
}

.oi-source-card {
  display: grid;
  gap: 5px;
}

.oi-source-card strong {
  color: #ffffff;
  font-size: 17px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.oi-source-card.live {
  border-color: rgba(43, 214, 214, 0.16);
}

.oi-source-card.live strong {
  color: #9bf8ff;
}

.oi-source-card.primary {
  border-color: rgba(247, 183, 51, 0.2);
}

.oi-source-card.primary strong {
  color: #ffe2a0;
}

.oi-source-card.supplemental {
  border-color: rgba(43, 214, 214, 0.16);
}

.oi-source-card.supplemental strong {
  color: #9bf8ff;
}

.oi-source-card.private {
  opacity: 0.78;
}

.oi-source-card.private strong {
  color: var(--muted);
}

.legend-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.price-level-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.price-level-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.028);
}

.price-level-card__top,
.price-level-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.price-level-card__tag {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.price-level-card__score {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.price-level-card strong {
  display: block;
  margin-top: 8px;
  color: #ffffff;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.price-level-card__meta {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(247, 183, 51, 0.26);
  border-radius: 8px;
  background: rgba(247, 183, 51, 0.12);
  color: #ffe4a5;
  font-size: 13px;
  font-weight: 900;
}

.score-pill.positive {
  border-color: rgba(53, 208, 127, 0.28);
  background: rgba(53, 208, 127, 0.13);
  color: #9bf0c0;
}

.score-pill.negative {
  border-color: rgba(255, 96, 120, 0.28);
  background: rgba(255, 96, 120, 0.13);
  color: #ffb4c0;
}

.score-pill.warning {
  border-color: rgba(247, 183, 51, 0.26);
  background: rgba(247, 183, 51, 0.13);
  color: #ffe2a0;
}

.radar {
  display: grid;
  gap: 11px;
}

.signal-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.signal-gauge {
  --value: 50%;
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background:
    conic-gradient(var(--gauge-color, var(--gold)) var(--value), rgba(255, 255, 255, 0.08) 0),
    #0b1118;
}

.signal-gauge::after {
  content: attr(data-score);
  position: absolute;
  inset: 9px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0d141d;
  color: var(--text);
  font-size: 17px;
  font-weight: 900;
}

.signal-copy strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.signal-copy span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.42;
}

.participant-list {
  display: grid;
  gap: 11px;
}

.participant-row {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr) 92px;
  gap: 12px;
  align-items: center;
}

.participant-name {
  min-width: 0;
  color: var(--soft);
  font-size: 12px;
  font-weight: 800;
}

.participant-value {
  text-align: right;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.net-bar {
  position: relative;
  height: 12px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

.net-bar::before {
  content: "";
  position: absolute;
  inset: 0 50% 0 auto;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.net-bar__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bar-width);
  border-radius: 6px;
  background: var(--bar-color);
}

.net-bar__fill.negative {
  right: 50%;
  left: auto;
}

.heatmap-table {
  overflow-x: auto;
}

.heatmap-table table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.heatmap-table th,
.heatmap-table td {
  height: 38px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  color: var(--soft);
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.heatmap-table th {
  color: var(--muted);
  font-weight: 800;
}

.heatmap-table th:first-child,
.heatmap-table td:first-child {
  text-align: left;
}

.heat-cell {
  border-radius: 6px;
  font-weight: 900;
}

.source-panel {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 8px;
}

.source-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.source-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.source-links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(247, 183, 51, 0.2);
  border-radius: 6px;
  background: rgba(247, 183, 51, 0.08);
  font-size: 12px;
  font-weight: 800;
}

.loading-sheen {
  position: relative;
  overflow: hidden;
}

.loading-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: translateX(-100%);
  animation: sheen 1.2s infinite;
}

@keyframes sheen {
  to {
    transform: translateX(100%);
  }
}

@media (max-width: 1180px) {
  .ticker-strip,
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .institution-grid,
  .scenario-grid,
  .decision-grid,
  .coinglass-grid,
  .content-grid,
  .price-grid,
  .content-grid--lower {
    grid-template-columns: 1fr;
  }

  .intent-panel,
  .decision-panel {
    grid-template-columns: 1fr;
  }

  .edge-flow-grid {
    grid-template-columns: 1fr;
  }

  .edge-source-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intent-meter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .source-panel {
    grid-template-columns: 1fr;
  }

  .source-links {
    justify-content: flex-start;
  }

  .sticky-controls {
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-content: stretch;
  }

  .page-switcher {
    grid-column: 1 / -1;
    width: max-content;
    max-width: 100%;
  }

  .instrument-switcher {
    grid-column: 1 / -1;
  }

  .timeframe-control {
    grid-column: 1 / -1;
  }

  .oi-guide {
    grid-template-columns: 1fr;
  }

  .oi-source-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .oi-exchange-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .oi-quality-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .oi-grid .chart-panel,
  .oi-grid .signal-panel,
  .oi-edge-flow-panel,
  .oi-edge-panel,
  .oi-ratio-panel,
  .oi-liquidation-panel {
    grid-column: 1;
    grid-row: auto;
  }

  .calendar-hero,
  .calendar-dashboard {
    grid-template-columns: 1fr;
  }

  .calendar-risk-strip {
    grid-template-columns: 1fr;
  }

  .calendar-brief-card {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.42fr);
  }

  .calendar-brief-stat--wide {
    grid-column: 1 / -1;
  }

  .calendar-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-focus-layout {
    grid-template-columns: 1fr;
  }

  .calendar-event {
    grid-template-columns: 72px 74px minmax(0, 1fr);
  }

  .calendar-table-head {
    display: none;
  }

  .calendar-values {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .depth-board {
    grid-template-columns: 1fr;
  }

  .depth-side {
    padding: 10px;
  }

  .depth-level {
    grid-template-columns: 24px minmax(0, 1fr) auto;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .side-nav {
    grid-auto-flow: column;
    width: auto;
  }

  .terminal {
    padding: 12px;
  }

  .topbar {
    display: grid;
    gap: 12px;
    margin-bottom: 10px;
  }

  h1 {
    font-size: 28px;
  }

  .topbar__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: stretch;
    gap: 8px;
  }

  .sticky-controls {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin: 0 -12px 8px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .page-switcher {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .instrument-switcher {
    grid-column: 1 / -1;
    margin: 0 -2px;
    padding: 0 2px 2px;
  }

  .instrument-chip {
    min-height: 34px;
    padding: 6px 10px 6px 7px;
  }

  .instrument-chip span {
    width: 21px;
    height: 21px;
  }

  .segmented {
    grid-auto-flow: column;
    width: 100%;
  }

  .timeframe-control {
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .topbar__controls > .segmented:not(.timeframe-control) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .segmented__button {
    width: auto;
    min-width: 0;
    padding: 0 6px;
    font-size: 11px;
  }

  .refresh-button {
    width: auto;
    min-width: 74px;
    padding: 0 12px;
  }

  .section-jump {
    margin: 0 -12px 10px;
    padding: 8px 12px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .calendar-page {
    gap: 10px;
  }

  .calendar-hero,
  .calendar-summary-panel,
  .calendar-list-panel {
    padding: 12px;
  }

  .calendar-hero {
    gap: 10px;
    padding: 10px 12px;
  }

  .calendar-hero h2 {
    font-size: 20px;
  }

  .calendar-lead {
    display: none;
  }

  .calendar-source-card {
    min-height: auto;
    padding: 8px 10px;
  }

  .calendar-source-card strong {
    font-size: 14px;
  }

  .calendar-controls {
    margin: 0 -12px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .calendar-risk-strip {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .calendar-brief-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
  }

  .calendar-brief-main,
  .calendar-brief-stat--wide {
    grid-column: 1 / -1;
  }

  .calendar-brief-main strong,
  .calendar-brief-stat strong {
    font-size: 16px;
  }

  .calendar-risk-card {
    min-height: 82px;
    padding: 11px 12px;
  }

  .calendar-risk-card strong {
    font-size: 20px;
  }

  .calendar-day-tab {
    grid-template-columns: 1fr;
    gap: 3px;
    min-width: 132px;
    min-height: 54px;
    padding: 6px 10px;
    text-align: left;
  }

  .calendar-day-tab__label {
    font-size: 13px;
  }

  .calendar-day-tab__meta {
    font-size: 11px;
  }

  .calendar-summary-grid {
    grid-template-columns: 1fr;
  }

  .calendar-focus-list {
    padding: 9px;
  }

  .calendar-focus-item {
    grid-template-columns: 32px minmax(0, 1fr);
    min-height: 56px;
  }

  .calendar-focus-flag {
    width: 32px;
    height: 32px;
  }

  .calendar-filter {
    min-height: 34px;
    min-width: 88px;
    padding: 0 12px;
  }

  .calendar-event {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 7px 9px;
    align-items: start;
    min-height: auto;
    padding: 10px;
  }

  .calendar-event__time {
    grid-row: 1 / span 3;
    grid-template-columns: 1fr;
    align-content: start;
    justify-content: start;
  }

  .calendar-event__importance {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
  }

  .calendar-event__main {
    grid-column: 2;
    grid-row: 2;
  }

  .calendar-event__title-row {
    align-items: flex-start;
  }

  .calendar-event__title-row strong {
    white-space: normal;
  }

  .calendar-values {
    grid-column: 2;
    grid-row: 3;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .calendar-values span {
    padding: 6px;
  }

  .ticker-strip,
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ticker-item {
    min-height: 66px;
    padding: 10px;
  }

  .ticker-item strong {
    font-size: 17px;
  }

  .ticker-label,
  .metric-label,
  .panel-note {
    font-size: 11px;
  }

  .metric-tile {
    min-height: 96px;
    padding: 12px;
  }

  .metric-value {
    margin-top: 8px;
    font-size: 22px;
  }

  .metric-change {
    min-height: 22px;
    margin-top: 9px;
    padding: 0 7px;
    font-size: 11px;
  }

  .decision-grid,
  .institution-grid,
  .scenario-grid,
  .coinglass-grid {
    grid-template-columns: 1fr;
  }

  .ratio-panel {
    grid-template-columns: 1fr;
  }

  .chart-wrap,
  .price-wrap,
  .tradingview-wrap,
  .scenario-wrap {
    height: 340px;
    min-height: 340px;
  }

  .oi-grid .chart-panel {
    display: flex;
    flex-direction: column;
  }

  .oi-grid .chart-panel .panel-head {
    order: 1;
  }

  .price-wrap,
  .tradingview-wrap,
  .scenario-wrap {
    height: 440px;
    min-height: 420px;
  }

  .scenario-phase-strip {
    grid-template-columns: 1fr 1fr;
  }

  .scenario-guide__steps {
    grid-template-columns: 1fr;
  }

  .scenario-guide {
    padding: 10px;
  }

  .oi-chart-wrap {
    order: 2;
    height: 700px;
    min-height: 680px;
  }

  #chartLegend {
    order: 4;
  }

  .oi-exchange-strip {
    order: 5;
  }

  .oi-quality-strip {
    order: 6;
  }

  .oi-guide {
    order: 7;
  }

  .oi-target-summary {
    order: 3;
  }

  .panel-head {
    display: grid;
  }

  .panel-actions {
    display: grid;
    justify-content: stretch;
  }

  .chart-tabs {
    grid-auto-flow: column;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .chart-tab {
    width: 100%;
  }

  .signal-row {
    grid-template-columns: 72px minmax(0, 1fr);
    padding: 10px;
  }

  .edge-flow-head {
    flex-direction: column;
  }

  .edge-flow-grid {
    grid-template-columns: 1fr;
  }

  .edge-source-strip {
    grid-template-columns: 1fr;
  }

  .edge-source-card strong,
  .edge-source-card em {
    white-space: normal;
  }

  .liq-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .liquidation-panel__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .liquidation-head-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .liquidation-range-control {
    width: 100%;
    overflow-x: auto;
  }

  .liquidation-range-button {
    flex: 1 0 42px;
  }

  .liq-bar {
    grid-template-columns: 88px 58px;
  }

  .liquidation-stats,
  .oi-source-grid {
    grid-template-columns: 1fr;
  }

  .oi-exchange-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .oi-quality-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .oi-quality-card {
    min-height: 64px;
  }

  .oi-exchange-tile {
    min-height: 78px;
  }

  .oi-exchange-tile strong {
    font-size: 16px;
  }

  .oi-exchange-table {
    gap: 8px;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .oi-exchange-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.028);
  }

  .oi-exchange-row--head {
    display: none;
  }

  .oi-exchange-row span:first-child,
  .oi-exchange-row span:last-child {
    grid-column: 1 / -1;
  }

  .liquidation-flow-wrap {
    height: 280px;
  }

  .heatbook-head-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .heatbook-range-control {
    width: 100%;
    max-width: 100%;
  }

  .heatbook-range-button {
    min-width: 52px;
  }

  .heatbook-pair-control,
  .heatbook-model-control,
  .heatbook-mode-control {
    width: 100%;
    overflow-x: auto;
  }

  .heatbook-pair-button,
  .heatbook-model-button,
  .heatbook-mode-button {
    flex: 1 0 auto;
    min-width: 72px;
  }

  .heatbook-palette-control,
  .heatbook-map-toggle {
    width: 100%;
    justify-content: flex-start;
  }

  .heatbook-threshold {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
  }

  .heatbook-threshold input {
    width: min(44vw, 180px);
  }

  .signal-gauge {
    width: 64px;
    height: 64px;
  }

  .signal-gauge::after {
    inset: 8px;
    font-size: 14px;
  }

  .participant-row {
    grid-template-columns: 1fr 76px;
    gap: 8px;
  }

  .participant-row .net-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .intent-meter-grid {
    grid-template-columns: 1fr;
  }

  .heatbook-wrap {
    height: 470px;
    min-height: 470px;
  }

  .heatbook-depth {
    grid-template-columns: 1fr;
  }

  .price-level-summary {
    grid-template-columns: 1fr;
  }

  .scenario-card__top {
    display: grid;
    gap: 7px;
  }

  .tape-row {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .tape-row__price {
    grid-column: 2;
  }
}

.chart-panel.is-tv-primary .oi-chart-wrap {
  display: block;
  order: 3;
  height: min(380px, 42vh);
  min-height: 300px;
}

.chart-panel.is-tv-primary #chartLegend {
  order: 5;
  display: flex;
}

.chart-panel.is-tv-primary .oi-exchange-strip {
  order: 6;
}

.chart-panel.is-tv-primary .oi-quality-strip {
  order: 7;
}

.chart-panel.is-tv-primary .oi-guide {
  order: 8;
}

.chart-panel.is-tv-primary .oi-target-summary {
  order: 4;
}

@media (max-width: 760px) {
  .chart-panel.is-tv-primary .oi-chart-wrap {
    height: 330px;
    min-height: 330px;
  }

  .oi-target-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
  }

  .oi-target-summary__item {
    padding: 7px 8px;
  }

  .oi-target-summary__item strong {
    font-size: 14px;
  }
}

.chart-panel.is-tv-primary .tradingview-primary {
  gap: 6px;
  margin: 6px 0 4px;
}

.chart-panel.is-tv-primary .tradingview-wrap {
  height: clamp(360px, 44vh, 520px);
  min-height: 360px;
}

.chart-panel.is-tv-primary .oi-chart-wrap {
  height: clamp(250px, 30vh, 320px);
  min-height: 250px;
  margin-top: 4px;
}

@media (min-width: 1024px) {
  .chart-panel.is-tv-primary .tradingview-wrap {
    height: clamp(240px, 26vh, 300px);
    min-height: 240px;
  }

  .chart-panel.is-tv-primary .oi-chart-wrap {
    height: clamp(280px, 28vh, 330px);
    min-height: 280px;
  }
}

@media (max-width: 760px) {
  .chart-panel.is-tv-primary .tradingview-primary {
    gap: 5px;
    margin: 4px 0;
  }

  .tradingview-meta-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px;
    font-size: 11px;
    line-height: 1.25;
  }

  .tradingview-meta-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chart-panel.is-tv-primary .tradingview-wrap {
    height: clamp(300px, 40vh, 360px);
    min-height: 300px;
  }

  .chart-panel.is-tv-primary .oi-target-summary {
    order: 4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin: 5px 0 2px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .chart-panel.is-tv-primary .oi-chart-wrap {
    order: 3;
    height: clamp(320px, 42vh, 380px);
    min-height: 320px;
    margin-top: 2px;
  }

  .chart-panel.is-tv-primary #chartLegend {
    order: 5;
  }

  .oi-target-summary__item {
    min-height: 48px;
    padding: 7px 8px;
  }

  .oi-target-summary__item span {
    font-size: 10px;
  }

  .oi-target-summary__item strong {
    font-size: 14px;
    line-height: 1.15;
  }

  .oi-target-summary__item em {
    display: none;
  }

  .chart-tooltip {
    display: none !important;
  }
}

/* Economic calendar: readable watch board + quiet full timeline */
.calendar-page {
  gap: 12px;
}

.calendar-controls {
  gap: 9px;
  padding: 10px;
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(7, 10, 15, 0.94);
}

.calendar-control-group {
  gap: 7px;
}

.calendar-filter-row {
  gap: 7px;
}

.calendar-day-tab {
  min-width: 134px;
  min-height: 46px;
  padding: 8px 10px;
  border-color: rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(17, 24, 34, 0.88);
}

.calendar-day-tab__label {
  color: #f5f7fb;
  font-size: 12px;
}

.calendar-day-tab__meta {
  gap: 6px;
  align-items: center;
}

.calendar-day-tab__meta b,
.calendar-day-tab__meta em,
.calendar-day-tab__meta i {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.052);
  color: #aebed5;
  font-size: 10px;
  line-height: 1;
}

.calendar-day-tab__meta b {
  color: #ffe4a3;
  background: rgba(247, 183, 51, 0.105);
}

.calendar-day-tab__meta em.has-critical {
  color: #ffdce2;
  background: rgba(255, 96, 120, 0.16);
}

.calendar-day-tab.is-active,
.calendar-day-tab:hover {
  border-color: rgba(247, 183, 51, 0.46);
  background:
    linear-gradient(180deg, rgba(247, 183, 51, 0.18), rgba(247, 183, 51, 0.045)),
    rgba(18, 23, 31, 0.94);
}

.calendar-filter {
  min-width: 86px;
  min-height: 34px;
  padding: 0 12px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #c4d1e4;
  font-size: 11px;
}

.calendar-filter.is-active,
.calendar-filter:hover {
  border-color: rgba(43, 214, 214, 0.45);
  background: rgba(43, 214, 214, 0.12);
  color: #ddffff;
}

.calendar-brief-card {
  grid-template-columns: minmax(210px, 0.75fr) minmax(110px, 0.32fr) minmax(280px, 1fr) minmax(90px, 0.25fr);
  padding: 12px 14px;
  border-color: rgba(247, 183, 51, 0.18);
  background:
    linear-gradient(90deg, rgba(247, 183, 51, 0.075), rgba(43, 214, 214, 0.035)),
    rgba(13, 19, 27, 0.92);
}

.calendar-brief-main {
  padding-left: 10px;
}

.calendar-brief-main strong,
.calendar-brief-stat strong {
  font-size: 16px;
}

.calendar-brief-main em,
.calendar-brief-stat em {
  font-size: 11px;
}

.calendar-risk-meter {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
}

.calendar-summary-panel,
.calendar-list-panel {
  min-width: 0;
  padding: 13px;
}

.calendar-summary-panel .panel-head,
.calendar-list-panel .panel-head {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.calendar-summary-panel h2,
.calendar-list-panel h2 {
  font-size: 17px;
}

.calendar-focus-layout {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.calendar-focus-list {
  gap: 8px;
  min-width: 0;
  min-height: 100%;
  padding: 10px;
  border-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
    rgba(8, 12, 18, 0.72);
}

.calendar-focus-list--today {
  border-color: rgba(247, 183, 51, 0.28);
}

.calendar-focus-list--tomorrow {
  border-color: rgba(43, 214, 214, 0.22);
}

.calendar-focus-list--week {
  border-color: rgba(118, 169, 255, 0.18);
}

.calendar-focus-head {
  min-height: 38px;
}

.calendar-focus-head div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.calendar-focus-head em {
  color: var(--gold-2);
  font-size: 10px;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
}

.calendar-focus-head span {
  overflow: hidden;
  color: #f5f7fb;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-focus-head strong {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(247, 183, 51, 0.1);
  color: #ffe8ac;
  font-size: 11px;
}

.calendar-focus-item {
  grid-template-columns: 36px minmax(0, 1fr);
  min-height: 64px;
  padding: 9px 10px;
  border-color: rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.024);
}

.calendar-focus-item--us-important {
  border-color: rgba(247, 183, 51, 0.22);
  background:
    linear-gradient(90deg, rgba(247, 183, 51, 0.075), rgba(255, 255, 255, 0.012)),
    rgba(255, 255, 255, 0.022);
}

.calendar-focus-item--us-critical {
  border-color: rgba(255, 96, 120, 0.35);
  background:
    linear-gradient(90deg, rgba(255, 96, 120, 0.105), rgba(255, 255, 255, 0.012)),
    rgba(255, 255, 255, 0.022);
}

.calendar-focus-line span {
  color: #ffe0a0;
}

.calendar-focus-body strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.36;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.calendar-focus-body em {
  font-size: 10px;
}

.calendar-focus-empty {
  min-height: 82px;
  border: 1px dashed rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.015);
  color: #8d9bb1;
}

.calendar-timeline {
  gap: 6px;
}

.calendar-table-head {
  grid-template-columns: 70px 68px minmax(0, 1fr) minmax(300px, 0.58fr);
  padding: 0 10px;
  color: #798aa2;
}

.calendar-day-heading {
  margin: 12px 0 3px;
  padding: 9px 4px 7px;
}

.calendar-day-heading strong {
  color: #f5f7fb;
}

.calendar-day-heading span {
  color: #8fa1ba;
}

.calendar-event {
  grid-template-columns: 70px 68px minmax(0, 1fr) minmax(300px, 0.58fr);
  gap: 10px;
  min-height: 56px;
  padding: 9px 11px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.022);
}

.calendar-event__time strong {
  font-size: 13px;
}

.calendar-event__title-row {
  gap: 9px;
}

.calendar-event__title-row strong {
  font-size: 13px;
  line-height: 1.35;
}

.calendar-event--us-important .calendar-event__title-row strong {
  color: #ffdfa0;
}

.calendar-event--us-critical .calendar-event__title-row strong {
  color: #ff8ea1;
}

.calendar-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.calendar-values span {
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  background: rgba(7, 10, 15, 0.36);
}

.calendar-values em {
  color: #7f90a9;
  font-size: 10px;
}

.calendar-values strong {
  color: #edf4ff;
  font-size: 12px;
}

.calendar-event--us-critical .calendar-stars {
  color: #ff8ea1;
}

@media (max-width: 1180px) {
  .calendar-focus-layout {
    grid-template-columns: 1fr;
  }

  .calendar-summary-grid {
    grid-template-columns: 1fr;
  }

  .calendar-brief-card {
    grid-template-columns: minmax(0, 1fr) minmax(130px, 0.42fr);
  }
}

@media (max-width: 720px) {
  .calendar-controls {
    gap: 8px;
    margin: 0 -12px;
    padding: 9px 12px;
  }

  .calendar-day-tab {
    min-width: 128px;
    min-height: 48px;
  }

  .calendar-day-tab__meta {
    gap: 4px;
  }

  .calendar-day-tab__meta b,
  .calendar-day-tab__meta em,
  .calendar-day-tab__meta i {
    padding: 0 5px;
    font-size: 9px;
  }

  .calendar-brief-card {
    grid-template-columns: 1fr;
  }

  .calendar-brief-main,
  .calendar-brief-stat,
  .calendar-brief-stat--wide {
    grid-column: 1;
  }

  .calendar-summary-panel,
  .calendar-list-panel {
    padding: 11px;
  }

  .calendar-focus-head span {
    white-space: normal;
  }

  .calendar-focus-head {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 6px;
  }

  .calendar-focus-head strong {
    max-width: 100%;
  }

  .calendar-event {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 7px 9px;
  }

  .calendar-event__title-row {
    display: grid;
    gap: 6px;
  }

  .calendar-country {
    width: max-content;
  }

  .calendar-values {
    grid-column: 2;
    grid-template-columns: 1fr;
  }
}

/* Calendar redesign: priority board first, full timeline second */
.calendar-page {
  gap: 14px;
}

.calendar-controls {
  gap: 8px;
  padding: 10px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(6, 9, 14, 0.96);
}

.calendar-control-group,
.calendar-filter-row {
  gap: 7px;
}

.calendar-day-tab {
  min-width: 150px;
  min-height: 48px;
  padding: 8px 10px;
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.035);
}

.calendar-day-tab__label {
  color: #f2f6ff;
  font-size: 12px;
  line-height: 1.25;
}

.calendar-day-tab__meta {
  gap: 5px;
  align-items: center;
  font-size: 10px;
}

.calendar-day-tab__meta b,
.calendar-day-tab__meta i {
  min-height: 17px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: #9fb0c8;
  font-style: normal;
}

.calendar-day-tab__meta b {
  color: #ffe2a1;
  background: rgba(247, 183, 51, 0.12);
}

.calendar-day-tab.is-active,
.calendar-day-tab:hover {
  border-color: rgba(247, 183, 51, 0.48);
  background: rgba(247, 183, 51, 0.12);
}

.calendar-filter {
  min-width: 74px;
  min-height: 34px;
  padding: 0 13px;
  color: #c8d4e6;
  font-size: 11px;
}

.calendar-filter.is-active,
.calendar-filter:hover {
  border-color: rgba(43, 214, 214, 0.5);
  background: rgba(43, 214, 214, 0.12);
  color: #e5ffff;
}

.calendar-status-bar {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) repeat(2, minmax(120px, 0.45fr)) minmax(280px, 1.25fr);
  gap: 8px;
  padding: 10px;
}

.calendar-status-item {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.024);
}

.calendar-status-item span {
  color: #8ea0bb;
  font-size: 10px;
  font-weight: 900;
}

.calendar-status-item strong {
  color: #f7fbff;
  font-size: 17px;
  line-height: 1.15;
}

.calendar-status-item em {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  overflow: hidden;
  color: #adc0da;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-status-item--source {
  border-color: rgba(43, 214, 214, 0.2);
}

.calendar-status-item--source strong {
  color: var(--cyan);
}

.calendar-status-item--next {
  border-color: rgba(247, 183, 51, 0.18);
}

.calendar-status-item--next strong {
  color: #ffe3a5;
}

.calendar-summary-panel,
.calendar-list-panel {
  padding: 14px;
}

.calendar-summary-panel .panel-head,
.calendar-list-panel .panel-head {
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.calendar-summary-panel h2,
.calendar-list-panel h2 {
  font-size: 18px;
}

.calendar-focus-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.calendar-focus-list {
  gap: 8px;
  min-width: 0;
  min-height: 100%;
  padding: 10px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(7, 11, 17, 0.62);
}

.calendar-focus-list--today {
  border-color: rgba(247, 183, 51, 0.32);
}

.calendar-focus-list--tomorrow {
  border-color: rgba(43, 214, 214, 0.24);
}

.calendar-focus-list--week {
  border-color: rgba(118, 169, 255, 0.2);
}

.calendar-focus-head {
  min-height: 36px;
  padding-bottom: 7px;
}

.calendar-focus-head div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.calendar-focus-head em {
  color: var(--gold-2);
  font-size: 10px;
  font-style: normal;
  font-weight: 1000;
}

.calendar-focus-head span {
  overflow: hidden;
  color: #f5f8ff;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-focus-head strong {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(247, 183, 51, 0.1);
  color: #ffe8ac;
  font-size: 11px;
}

.calendar-focus-item {
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 60px;
  padding: 8px 9px;
  border-color: rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.022);
}

.calendar-focus-item--us-important {
  border-color: rgba(247, 183, 51, 0.24);
  background: rgba(247, 183, 51, 0.045);
}

.calendar-focus-item--us-critical {
  border-color: rgba(255, 96, 120, 0.38);
  background: rgba(255, 96, 120, 0.07);
}

.calendar-focus-body strong {
  display: -webkit-box;
  overflow: hidden;
  color: #f7fbff;
  font-size: 13px;
  line-height: 1.34;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.calendar-focus-item--us-important .calendar-focus-body strong {
  color: #ffe0a3;
}

.calendar-focus-item--us-critical .calendar-focus-body strong {
  color: #ff9caf;
}

.calendar-focus-line span {
  color: var(--gold-2);
  font-size: 11px;
  font-weight: 1000;
}

.calendar-focus-body em,
.calendar-focus-empty,
.calendar-focus-more {
  overflow: hidden;
  color: #8ea0b8;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-focus-more {
  padding: 7px 9px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  text-align: center;
}

.calendar-focus-empty {
  display: grid;
  place-items: center;
  min-height: 74px;
  border: 1px dashed rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
}

.calendar-flag {
  width: 30px;
  height: 21px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    0 8px 18px rgba(0, 0, 0, 0.22);
}

.calendar-flag > span {
  font-size: 7px;
  line-height: 1;
}

.calendar-flag:not(.calendar-flag--us):not(.calendar-flag--jp):not(.calendar-flag--cn):not(.calendar-flag--gb):not(.calendar-flag--eu):not(.calendar-flag--au):not(.calendar-flag--nz):not(.calendar-flag--ca):not(.calendar-flag--de):not(.calendar-flag--fr):not(.calendar-flag--it):not(.calendar-flag--ch):not(.calendar-flag--tr) {
  display: inline-grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
}

.calendar-flag:not(.calendar-flag--us):not(.calendar-flag--jp):not(.calendar-flag--cn):not(.calendar-flag--gb):not(.calendar-flag--eu):not(.calendar-flag--au):not(.calendar-flag--nz):not(.calendar-flag--ca):not(.calendar-flag--de):not(.calendar-flag--fr):not(.calendar-flag--it):not(.calendar-flag--ch):not(.calendar-flag--tr) > span {
  position: static;
  color: #d8e6ff;
}

.calendar-timeline {
  display: grid;
  gap: 6px;
}

.calendar-table-head,
.calendar-event {
  display: grid;
  grid-template-columns: 72px 76px minmax(0, 1fr) minmax(260px, 0.54fr);
  gap: 10px;
  align-items: center;
}

.calendar-table-head {
  padding: 0 11px;
  color: #7f90a8;
  font-size: 10px;
  font-weight: 900;
}

.calendar-day-heading {
  margin: 13px 0 3px;
  padding: 8px 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.calendar-day-heading strong {
  color: #f6f9ff;
  font-size: 14px;
}

.calendar-day-heading span {
  color: #8495ac;
  font-size: 10px;
}

.calendar-event {
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.018);
}

.calendar-event--high,
.calendar-event--us-important {
  border-left-color: rgba(247, 183, 51, 0.76);
}

.calendar-event--critical,
.calendar-event--us-critical {
  border-left-color: rgba(255, 96, 120, 0.9);
}

.calendar-event__time {
  display: grid;
  gap: 4px;
}

.calendar-event__time strong {
  color: #f5f8ff;
  font-size: 13px;
}

.calendar-event__time span {
  width: max-content;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #93a4bb;
  font-size: 10px;
  font-weight: 900;
}

.calendar-event__time .is-soon {
  background: rgba(255, 96, 120, 0.16);
  color: #ffb3c0;
}

.calendar-event__time .is-upcoming {
  background: rgba(247, 183, 51, 0.13);
  color: #ffe0a0;
}

.calendar-event__title-row {
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.calendar-country {
  flex: 0 0 auto;
  gap: 6px;
  padding: 3px 7px 3px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: #d5dfef;
  font-size: 11px;
  font-weight: 900;
}

.calendar-event__title-row strong {
  overflow: hidden;
  color: #eaf2ff;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event--us-important .calendar-event__title-row strong {
  color: #ffe0a2;
}

.calendar-event--us-critical .calendar-event__title-row strong {
  color: #ff9caf;
}

.calendar-stars {
  min-height: auto;
  color: rgba(247, 183, 51, 0.92);
  font-size: 13px;
  letter-spacing: 0;
}

.calendar-stars--normal {
  color: rgba(194, 202, 213, 0.55);
}

.calendar-stars--critical {
  color: #ff7e94;
}

.calendar-focus-item--rank-0,
.calendar-focus-item--rank-1,
.calendar-focus-item--rank-2 {
  border-color: rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.018);
}

.calendar-focus-item--rank-2.calendar-focus-item--us-important {
  border-color: rgba(247, 183, 51, 0.16);
  background: rgba(247, 183, 51, 0.018);
}

.calendar-focus-item--rank-0 .calendar-focus-body strong,
.calendar-focus-item--rank-1 .calendar-focus-body strong,
.calendar-focus-item--rank-2 .calendar-focus-body strong,
.calendar-focus-item--rank-2.calendar-focus-item--us-important .calendar-focus-body strong {
  color: #d9e4f3;
  font-weight: 850;
}

.calendar-focus-item--rank-0 .calendar-focus-line span,
.calendar-focus-item--rank-1 .calendar-focus-line span,
.calendar-focus-item--rank-2 .calendar-focus-line span {
  color: #b6c2d4;
}

.calendar-focus-item--rank-2 .calendar-stars {
  color: rgba(247, 183, 51, 0.58);
}

.calendar-focus-item--rank-0 .calendar-stars,
.calendar-focus-item--rank-1 .calendar-stars {
  color: rgba(184, 195, 210, 0.44);
}

.calendar-focus-item--rank-3 {
  border-color: rgba(247, 183, 51, 0.24);
  background:
    linear-gradient(90deg, rgba(247, 183, 51, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(255, 255, 255, 0.022);
}

.calendar-focus-item--rank-3 .calendar-focus-body strong {
  color: #ffe1a3;
  font-weight: 920;
}

.calendar-focus-item--rank-3 .calendar-focus-line span,
.calendar-focus-item--rank-3 .calendar-stars {
  color: rgba(247, 183, 51, 0.9);
}

.calendar-focus-item--rank-3.calendar-focus-item--us-critical {
  border-color: rgba(255, 96, 120, 0.42);
  background:
    linear-gradient(90deg, rgba(255, 96, 120, 0.12), rgba(255, 255, 255, 0.012)),
    rgba(255, 255, 255, 0.022);
}

.calendar-focus-item--rank-3.calendar-focus-item--us-critical .calendar-focus-body strong {
  color: #ffadbc;
  font-weight: 950;
}

.calendar-focus-item--rank-3.calendar-focus-item--us-critical .calendar-focus-line span,
.calendar-focus-item--rank-3.calendar-focus-item--us-critical .calendar-stars {
  color: #ff7e94;
}

.calendar-event--rank-0,
.calendar-event--rank-1,
.calendar-event--rank-2 {
  border-color: rgba(255, 255, 255, 0.055);
  border-left-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.014);
}

.calendar-event--rank-2.calendar-event--us-important,
.calendar-event--rank-2.calendar-event--high {
  border-color: rgba(255, 255, 255, 0.055);
  border-left-color: rgba(247, 183, 51, 0.32);
  background: rgba(247, 183, 51, 0.014);
}

.calendar-event--rank-0 .calendar-event__title-row strong,
.calendar-event--rank-1 .calendar-event__title-row strong,
.calendar-event--rank-2 .calendar-event__title-row strong,
.calendar-event--rank-2.calendar-event--us-important .calendar-event__title-row strong {
  color: #d7e1ef;
  font-weight: 850;
}

.calendar-event--rank-2 .calendar-stars {
  color: rgba(247, 183, 51, 0.56);
}

.calendar-event--rank-0 .calendar-stars,
.calendar-event--rank-1 .calendar-stars {
  color: rgba(184, 195, 210, 0.43);
}

.calendar-event--rank-3 {
  border-color: rgba(247, 183, 51, 0.14);
  border-left-color: rgba(247, 183, 51, 0.48);
  background: rgba(247, 183, 51, 0.018);
}

.calendar-event--rank-3 .calendar-event__title-row strong {
  color: #ffe1a3;
  font-weight: 900;
}

.calendar-event--rank-3 .calendar-stars {
  color: rgba(247, 183, 51, 0.86);
}

.calendar-event--rank-3.calendar-event--us-critical {
  border-color: rgba(255, 96, 120, 0.24);
  border-left-color: rgba(255, 96, 120, 0.95);
  background: rgba(255, 96, 120, 0.052);
}

.calendar-event--rank-3.calendar-event--us-critical .calendar-event__title-row strong {
  color: #ffadbc;
  font-weight: 950;
}

.calendar-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.calendar-value {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 7px;
  background: rgba(6, 9, 14, 0.42);
}

.calendar-value em {
  color: #7788a0;
  font-size: 10px;
}

.calendar-value strong {
  overflow: hidden;
  color: #edf4ff;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-value.is-empty strong {
  color: #687891;
}

.calendar-value.has-result {
  border-color: rgba(43, 214, 214, 0.18);
  background: rgba(43, 214, 214, 0.045);
}

.calendar-value.has-result strong {
  color: #dfffff;
}

@media (max-width: 1180px) {
  .calendar-status-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-focus-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .calendar-controls {
    margin: 0 -12px;
    padding: 9px 12px;
  }

  .calendar-day-tab {
    min-width: 138px;
  }

  .calendar-status-bar {
    grid-template-columns: 1fr;
    padding: 9px;
  }

  .calendar-status-item strong {
    font-size: 16px;
  }

  .calendar-summary-panel,
  .calendar-list-panel {
    padding: 11px;
  }

  .calendar-focus-head {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 6px;
  }

  .calendar-focus-head span {
    white-space: normal;
  }

  .calendar-table-head {
    display: none;
  }

  .calendar-event {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 8px 9px;
    align-items: start;
  }

  .calendar-event__importance {
    grid-column: 1;
    grid-row: 2;
  }

  .calendar-event__main {
    grid-column: 2;
    grid-row: 1;
  }

  .calendar-event__title-row {
    display: grid;
    gap: 6px;
  }

  .calendar-event__title-row strong {
    white-space: normal;
  }

  .calendar-values {
    grid-column: 2;
    grid-template-columns: 1fr;
  }
}