:root {
  --si-bg: #0f1419;
  --si-chart-bg: #131722;
  --si-panel: #1b202a;
  --si-panel-soft: #161b24;
  --si-panel-raised: #1e222d;
  --si-field: #131722;
  --si-border: #2a2e39;
  --si-border-soft: #1e222d;
  --si-text: #d1d4dc;
  --si-text-strong: #e0e3eb;
  --si-muted: #787b86;
  --si-muted-soft: #6b7280;
  --si-blue: #2962ff;
  --si-blue-soft: rgba(41, 98, 255, 0.16);
  --si-green: #26a69a;
  --si-red: #ef5350;
  --si-orange: #f97316;
  --si-yellow: #f9a825;
  --si-radius: 8px;
  --si-radius-sm: 5px;
  --si-shadow-menu: 0 12px 32px rgba(0, 0, 0, 0.42);
  --si-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --si-mono: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, monospace;
}

body.dashboard-shell,
body.dashboard-chart {
  color: var(--si-text);
  font-family: var(--si-font);
}

body.dashboard-shell {
  background: var(--si-bg);
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--si-border);
  margin-bottom: 16px;
}

.app-title-group {
  min-width: 0;
}

.app-eyebrow {
  color: var(--si-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.app-topbar h1 {
  color: var(--si-text-strong);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

.app-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.app-nav a,
.app-nav button,
.app-nav .nav-link {
  align-items: center;
  background: var(--si-field);
  border: 1px solid var(--si-border);
  border-radius: var(--si-radius-sm);
  color: var(--si-muted);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--si-font);
  font-size: 12px;
  font-weight: 600;
  gap: 4px;
  line-height: 1;
  min-height: 28px;
  padding: 6px 10px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.app-nav a:hover,
.app-nav button:hover,
.app-nav .nav-link:hover {
  background: var(--si-panel-raised);
  border-color: #3a4050;
  color: var(--si-text);
  text-decoration: none;
}

.app-nav .active,
.app-nav a[aria-current="page"] {
  background: var(--si-blue-soft);
  border-color: rgba(41, 98, 255, 0.6);
  color: #dce6ff;
}

.app-nav .utility {
  background: transparent;
}

.app-nav-sep {
  background: var(--si-border);
  height: 20px;
  margin: 0 2px;
  width: 1px;
}

body.dashboard-chart #header.app-topbar {
  background: var(--si-panel-raised);
  border-bottom: 1px solid var(--si-border);
  height: 42px;
  margin-bottom: 0;
  padding: 0 12px;
}

body.dashboard-chart #header.app-topbar h1 {
  font-size: 14px;
}

body.dashboard-chart #header.app-topbar .app-nav a,
body.dashboard-chart #header.app-topbar .app-nav button {
  min-height: 24px;
  padding: 4px 9px;
}

.dashboard-shell .controls,
.dashboard-shell .filter-bar,
.dashboard-shell .stat-card,
.dashboard-shell .stat-box,
.dashboard-shell .sliders,
.dashboard-shell .table-wrap,
.dashboard-shell .info {
  background: var(--si-panel);
  border: 1px solid var(--si-border);
  border-radius: var(--si-radius);
}

.dashboard-shell input,
.dashboard-shell select,
.dashboard-shell button {
  font-family: var(--si-font);
}

.dashboard-shell input,
.dashboard-shell select {
  background: var(--si-field);
  border-color: var(--si-border);
  color: var(--si-text);
}

.dashboard-shell .stat-label,
.dashboard-shell .ctrl-group label {
  color: var(--si-muted);
  letter-spacing: 0.06em;
}

.dashboard-shell .stat-value,
.dashboard-shell .stat-val {
  color: var(--si-text-strong);
  letter-spacing: 0;
}

.dashboard-shell .stat-value.up,
.dashboard-shell .stat-val.up,
.dashboard-shell .cum-up {
  color: var(--si-green);
}

.dashboard-shell .stat-value.down,
.dashboard-shell .stat-val.down,
.dashboard-shell .cum-down {
  color: var(--si-red);
}

.dashboard-shell h2 {
  color: var(--si-text-strong);
  font-size: 14px;
  letter-spacing: 0;
}

.dashboard-shell table {
  border-color: var(--si-border);
  color: var(--si-text);
  font-variant-numeric: tabular-nums;
}

.dashboard-shell table th {
  background: var(--si-panel-raised);
  color: var(--si-muted);
  letter-spacing: 0.02em;
}

.dashboard-shell table td {
  color: var(--si-text);
}

.execution-page > .app-topbar {
  margin: 0 auto 16px auto;
  max-width: 960px;
  padding: 16px 16px 14px 16px;
}

@media (max-width: 768px) {
  .app-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .app-topbar h1 {
    font-size: 16px;
  }

  .app-nav {
    justify-content: flex-start;
    width: 100%;
  }

  .app-nav a,
  .app-nav button,
  .app-nav .nav-link {
    font-size: 11px;
    min-height: 26px;
    padding: 5px 8px;
  }

  .app-nav-sep {
    display: none;
  }

  body.dashboard-chart #header.app-topbar {
    align-items: flex-start;
    flex-direction: row;
    height: auto;
    min-height: 40px;
    padding: 5px 8px;
  }

  body.dashboard-chart #header.app-topbar .app-nav {
    justify-content: flex-end;
    width: auto;
  }
}