@import url("https://fonts.googleapis.com/css2?family=Play:wght@400;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  --bg: #05090d;
  --bg-2: #0d131a;
  --ink: #e9eef3;
  --ink-soft: #919da8;
  --accent: #208a55;
  --accent-2: #13961a;
  --accent-3: #7adcb4;
  --card: #12161d;
  --card-2: #151a22;
  --border: rgba(222, 233, 241, 0.14);
  --border-strong: #208a55;
  --shadow: 0 0 0 1px rgba(32, 138, 85, 0.26);
  --sidebar-bg: #10151b;
  --sidebar-border: rgba(222, 233, 241, 0.18);
  --sidebar-text: #f4f8fb;
  --mono: "Play", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: "Play", "IBM Plex Sans Condensed", ui-sans-serif, system-ui, sans-serif;
}

body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(113, 137, 162, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84, 104, 127, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 10% -8%, rgba(32, 138, 85, 0.16), transparent 42%),
    radial-gradient(circle at 92% 108%, rgba(47, 113, 178, 0.16), transparent 48%);
  background-size: 22px 22px, 22px 22px, 100% 100%, 100% 100%;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.018) 0,
    rgba(255, 255, 255, 0.018) 1px,
    transparent 1px,
    transparent 4px
  );
  opacity: 0.38;
}

::selection {
  background: rgba(32, 138, 85, 0.35);
  color: #ffffff;
}

.side-nav {
  background: linear-gradient(180deg, #10161d 0%, #0b1017 100%);
  border-right-color: rgba(92, 114, 134, 0.42);
}

.side-nav:hover {
  border-right-color: rgba(32, 138, 85, 0.56);
  box-shadow: 14px 0 28px rgba(0, 0, 0, 0.62);
}

.side-nav-logo {
  border-radius: 999px;
  border-color: #208a55;
  background: linear-gradient(180deg, #0c1515 0%, #0a1014 100%);
  color: #d8ffe9;
  box-shadow: inset 0 0 0 1px rgba(32, 138, 85, 0.32);
}

.side-nav-item {
  border-radius: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.12));
  border-color: rgba(219, 231, 241, 0.16);
}

.side-nav-item:hover {
  background: linear-gradient(90deg, rgba(32, 138, 85, 0.14), rgba(255, 255, 255, 0.12));
  border-color: rgba(32, 138, 85, 0.66);
}

.side-nav-item.is-active {
  background-color: #143a2a;
  background-image: linear-gradient(90deg, rgba(32, 138, 85, 0.24), rgba(18, 27, 34, 0.95));
  border-color: #208a55;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(32, 138, 85, 0.24);
}

.side-nav-theme .side-nav-icon {
  color: #72d8af;
}

.side-nav-divider {
  background: linear-gradient(90deg, rgba(32, 138, 85, 0), rgba(32, 138, 85, 0.7), rgba(32, 138, 85, 0));
}

.desk-bar {
  background: linear-gradient(180deg, #11161c 0%, #0e1319 100%);
  border-bottom: 1px solid rgba(32, 138, 85, 0.72);
}

.hero {
  border-bottom-color: rgba(32, 138, 85, 0.52);
}

.page-title,
.page-title-desc {
  color: #dbe7f2;
}

.page-title-prefix,
.eyebrow,
.desk-bar-prefix,
.desk-bar-title,
.index-filter-title,
.summary-role-label {
  color: #72d8af;
}

.btn,
.btn-mini,
.btn-range,
.btn-role,
.card,
.meta-card,
.summary-metric,
.kpi-card,
.desk-menu,
.table-wrap,
.table-wrap table,
.settings-panel,
.latency-hud,
.summary-card,
.summary-role-bar,
.summary-role-banner,
.chart,
.tab-button,
.index-chip,
.trades-role-pill {
  border-radius: 0;
}

.btn,
.btn-mini,
.btn-range,
.btn-role,
.index-chip,
.table-filters .btn {
  background: linear-gradient(180deg, #16202a 0%, #121a22 100%);
  border-color: rgba(211, 224, 236, 0.2);
  color: #e5edf5;
}

.btn:hover,
.btn-range:hover,
.btn-role:hover,
.index-chip:hover,
.table-filters .btn:hover {
  background: linear-gradient(180deg, #1a2731 0%, #15232d 100%);
  border-color: #208a55;
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.02);
}

.btn-range.is-active,
.btn-role.is-active,
.desk-menu-item.is-active,
.index-chip.is-active,
.tab-button.active {
  background: linear-gradient(180deg, rgba(32, 138, 85, 0.32) 0%, rgba(32, 138, 85, 0.14) 100%);
  border-color: #208a55;
  color: #eafff3;
  box-shadow: inset 0 0 0 1px rgba(32, 138, 85, 0.3);
}

.tab-button {
  border: 1px solid transparent;
  border-bottom-width: 2px;
}

.card,
.summary-card,
.summary-metric,
.kpi-card,
.meta-card,
.settings-panel {
  background: linear-gradient(180deg, #12171e 0%, #0f141b 100%);
  border-color: rgba(174, 190, 204, 0.24);
  box-shadow: inset 0 0 0 1px rgba(12, 16, 21, 0.5);
}

.card-title,
.summary-section-title {
  border-left: 0;
  border-top: 1px solid rgba(32, 138, 85, 0.7);
  background: linear-gradient(180deg, rgba(32, 138, 85, 0.92), rgba(32, 138, 85, 0.68));
  color: #f2fff9;
  padding: 6px 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-title {
  margin: -12px -14px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
}

.summary-section-title {
  margin: 8px 0;
}

.card-subtitle {
  color: #b8c6d4;
  letter-spacing: 0.08em;
  border-top: 1px solid rgba(32, 138, 85, 0.35);
  padding-top: 6px;
}

.summary-role-bar {
  background: linear-gradient(180deg, #131920 0%, #0f151c 100%);
  border-color: rgba(32, 138, 85, 0.44);
}

.summary-role-banner {
  background: rgba(32, 138, 85, 0.1);
  border-color: rgba(32, 138, 85, 0.45);
  color: #b9f2d8;
}

.desk-menu,
.table-wrap,
.table-wrap table {
  background: #10161d;
  border-color: rgba(116, 134, 151, 0.46);
}

.table-wrap table {
  border-collapse: separate;
  border-spacing: 0;
}

.table-wrap th {
  background: #13171c;
  color: #f4f8fc;
  border-top: 2px solid rgba(32, 138, 85, 0.85);
  border-bottom-color: rgba(175, 191, 206, 0.26);
}

.table-wrap th:not(:last-child),
.table-wrap td:not(:last-child) {
  border-right: 1px solid rgba(166, 183, 198, 0.22);
}

.table-wrap td {
  background: rgba(33, 39, 47, 0.92);
  border-bottom-color: rgba(164, 183, 201, 0.22);
}

.table-wrap tr:nth-child(even) td {
  background: rgba(25, 31, 38, 0.96);
}

.table-wrap tr:hover td,
.stress-row:hover {
  background: rgba(32, 138, 85, 0.17);
}

.table-filters label,
.trade-entry-form label,
.meta,
.subtitle,
.control-meta,
.index-filter-context,
.latency-hud-label,
.latency-hud-meta {
  color: #9eacba;
}

.table-filters select,
.table-filters input[type="date"],
.table-filters input[type="month"],
.table-filters input[type="number"],
.table-filters input[type="text"],
.table-filters textarea,
.trade-entry-form select,
.trade-entry-form input[type="date"],
.trade-entry-form input[type="month"],
.trade-entry-form input[type="number"],
.trade-entry-form input[type="text"],
.trade-entry-form textarea,
.control select,
.control input,
.control textarea {
  background: #0f161f;
  border-color: rgba(188, 205, 220, 0.22);
  color: #e3ecf5;
}

.table-filters select:focus,
.table-filters input[type="date"]:focus,
.table-filters input[type="month"]:focus,
.table-filters input[type="number"]:focus,
.table-filters input[type="text"]:focus,
.table-filters textarea:focus,
.trade-entry-form select:focus,
.trade-entry-form input[type="date"]:focus,
.trade-entry-form input[type="month"]:focus,
.trade-entry-form input[type="number"]:focus,
.trade-entry-form input[type="text"]:focus,
.trade-entry-form textarea:focus,
.control select:focus,
.control input:focus,
.control textarea:focus {
  border-color: #208a55;
  box-shadow: 0 0 0 1px rgba(32, 138, 85, 0.4);
  outline: none;
}

.chart {
  background-color: #0c141d;
  background-image:
    linear-gradient(rgba(126, 147, 168, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 102, 124, 0.08) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  border-top: 2px solid rgba(32, 138, 85, 0.72);
  border-color: rgba(32, 138, 85, 0.36);
}

.tabs {
  border-bottom-color: rgba(32, 138, 85, 0.45);
}

.tab-button {
  color: #a9b6c3;
}

.summary-role-bar {
  border-top: 2px solid rgba(32, 138, 85, 0.72);
}

.kpi-card .label,
.summary-card .label {
  color: #9babb9;
}

.kpi-card .value,
.summary-card .value,
.metric-value,
.badge-value-main {
  color: #edf4fb;
}

.kpi-card.positive .value,
.summary-metric .metric-value.positive,
.summary-metric .metric-sub.positive,
.table-wrap .positive,
.metric-hint.positive {
  color: #23b9a7;
}

.kpi-card.negative .value,
.summary-metric .metric-value.negative,
.summary-metric .metric-sub.negative,
.table-wrap .negative,
.metric-hint.negative {
  color: #ff5b63;
}