/* Spectrum Command v3: one visual authority for shell, navigation and data surfaces. */
:root {
  --sp-bg: #080a12;
  --sp-bg-soft: #0d111d;
  --sp-surface: rgba(17, 23, 38, 0.88);
  --sp-surface-strong: #121827;
  --sp-surface-soft: rgba(25, 33, 52, 0.76);
  --sp-ink: #f7f8fc;
  --sp-muted: #9aa7bc;
  --sp-line: rgba(190, 204, 229, 0.14);
  --sp-line-strong: rgba(213, 224, 244, 0.24);
  --sp-a: #2dd4bf;
  --sp-b: #4f9cff;
  --sp-c: #ffb020;
  --sp-danger: #ff5f7d;
  --sp-positive: #36d399;
  --sp-radius-xl: 26px;
  --sp-radius-lg: 19px;
  --sp-radius-md: 13px;
  --sp-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
  --sp-shadow-high: 0 34px 100px rgba(0, 0, 0, 0.5);
}

body[data-view="market"] {
  --sp-a: #24d6bd;
  --sp-b: #4f9cff;
  --sp-c: #ffb020;
}

body[data-view="detail"] {
  --sp-a: #4f7cff;
  --sp-b: #9b6cff;
  --sp-c: #ff647e;
}

body[data-view="multi"] {
  --sp-a: #18c6d9;
  --sp-b: #7bdc65;
  --sp-c: #a76af4;
}

body[data-view="ml"] {
  --sp-a: #a66bff;
  --sp-b: #f25ec8;
  --sp-c: #31d2e5;
}

body[data-view="success"] {
  --sp-a: #25cf82;
  --sp-b: #28a8ff;
  --sp-c: #ffad24;
}

body[data-view="alarms"] {
  --sp-a: #ff5f7d;
  --sp-b: #ffad24;
  --sp-c: #7f6cff;
}

body[data-view="data"] {
  --sp-a: #9aa9c0;
  --sp-b: #31c8bf;
  --sp-c: #ff884d;
}

html {
  color-scheme: dark;
  background: var(--sp-bg);
}

body {
  min-width: 0;
  color: var(--sp-ink);
  background:
    radial-gradient(circle at 8% 2%, color-mix(in srgb, var(--sp-a) 20%, transparent), transparent 31rem),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--sp-b) 16%, transparent), transparent 38rem),
    radial-gradient(circle at 65% 100%, color-mix(in srgb, var(--sp-c) 10%, transparent), transparent 32rem),
    linear-gradient(145deg, #070910 0%, #0b101b 46%, #080b13 100%) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  transition: background 240ms ease;
}

body::before {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: 0.42 !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  box-shadow: none !important;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
}

body::after {
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  height: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, var(--sp-a), var(--sp-b) 34%, #a66bff 55%, var(--sp-c) 78%, var(--sp-danger)) !important;
  box-shadow: 0 0 28px color-mix(in srgb, var(--sp-a) 34%, transparent) !important;
}

::selection {
  color: #05070c;
  background: color-mix(in srgb, var(--sp-a) 76%, white);
}

/* Login is a distinct product surface, not a floating form on an empty page. */
.login-gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 42px);
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 14%, rgba(45, 212, 191, 0.2), transparent 29rem),
    radial-gradient(circle at 88% 18%, rgba(166, 107, 255, 0.18), transparent 32rem),
    radial-gradient(circle at 70% 92%, rgba(255, 176, 32, 0.12), transparent 26rem),
    linear-gradient(145deg, #080a12, #101625 52%, #090c14);
}

.login-stage {
  position: relative;
  width: min(1120px, 100%);
  min-height: min(690px, calc(100dvh - 52px));
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(360px, 0.84fr);
  overflow: hidden;
  border: 1px solid rgba(214, 227, 249, 0.17);
  border-radius: 36px;
  background: rgba(10, 14, 24, 0.86);
  box-shadow: 0 44px 150px rgba(0, 0, 0, 0.58);
  isolation: isolate;
}

.login-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.027) 1px, transparent 1px);
  background-size: 44px 44px;
}

.login-story {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: clamp(32px, 5vw, 70px);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.13), transparent 38%),
    linear-gradient(315deg, rgba(79, 156, 255, 0.14), transparent 40%),
    rgba(11, 17, 29, 0.7);
}

.login-story::before,
.login-story::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.login-story::before {
  top: -150px;
  right: -140px;
  width: 430px;
  height: 430px;
  border: 58px solid rgba(79, 156, 255, 0.1);
  border-top-color: rgba(45, 212, 191, 0.4);
  border-right-color: rgba(255, 176, 32, 0.34);
  transform: rotate(24deg);
}

.login-story::after {
  right: 8%;
  bottom: -110px;
  width: 250px;
  height: 250px;
  background: rgba(166, 107, 255, 0.14);
  filter: blur(40px);
}

.login-brand-row,
.login-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.login-brand-row > span:last-child,
.login-card-head > div:last-child {
  display: grid;
  gap: 2px;
}

.login-brand-row b {
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.login-brand-row small,
.login-card-head small {
  color: var(--sp-muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spectrum-seal {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  background: conic-gradient(#2dd4bf, #4f9cff, #a66bff, #ff5f7d, #ffb020, #2dd4bf);
  box-shadow: 0 0 34px rgba(45, 212, 191, 0.22);
}

.spectrum-seal::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: inherit;
  background: #0b101b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.spectrum-seal i {
  position: absolute;
  z-index: 1;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: white;
}

.spectrum-seal i:nth-child(1) { left: 21px; top: 7px; }
.spectrum-seal i:nth-child(2) { right: 7px; top: 21px; }
.spectrum-seal i:nth-child(3) { left: 21px; bottom: 7px; }
.spectrum-seal i:nth-child(4) { left: 7px; top: 21px; }

.login-story-copy {
  position: relative;
  z-index: 1;
  max-width: 590px;
}

.login-story-copy .eyebrow {
  margin-bottom: 18px;
  color: #5eead4;
}

.login-story-copy h2 {
  margin: 0;
  font-size: clamp(2.75rem, 5.2vw, 5.5rem);
  line-height: 0.94;
  letter-spacing: -0.075em;
}

.login-story-copy h2 em {
  color: transparent;
  background: linear-gradient(90deg, #2dd4bf, #4f9cff 48%, #ffb020);
  background-clip: text;
  -webkit-background-clip: text;
  font-style: normal;
}

.login-story-copy > p:last-child {
  max-width: 470px;
  margin-top: 22px;
  color: #b5c1d3;
  font-size: 0.96rem;
  line-height: 1.7;
}

.login-story-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.login-story-grid article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(224, 234, 250, 0.12);
  border-radius: 15px;
  background: rgba(5, 10, 19, 0.38);
  backdrop-filter: blur(14px);
}

.login-story-grid strong {
  color: #f8fbff;
  font-size: 1rem;
}

.login-story-grid span {
  overflow: hidden;
  color: var(--sp-muted);
  font-size: 0.69rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-color-track {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: 1.25fr 0.9fr 0.7fr 0.95fr 0.55fr;
  gap: 5px;
  height: 7px;
}

.login-color-track i:nth-child(1) { background: #2dd4bf; }
.login-color-track i:nth-child(2) { background: #4f9cff; }
.login-color-track i:nth-child(3) { background: #a66bff; }
.login-color-track i:nth-child(4) { background: #ffb020; }
.login-color-track i:nth-child(5) { background: #ff5f7d; }

.login-card {
  align-self: stretch;
  width: auto;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 68px);
  border: 0;
  border-left: 1px solid rgba(214, 227, 249, 0.13);
  border-radius: 0;
  background: rgba(14, 19, 31, 0.9);
  box-shadow: none;
  backdrop-filter: blur(26px);
}

.login-card::before,
.login-card::after {
  display: none;
}

.login-card-head {
  margin-bottom: 34px;
}

.login-card-head .eyebrow {
  margin: 0;
  color: #7dd3fc;
}

.login-card h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 3.1vw, 3rem);
  letter-spacing: -0.06em;
}

.login-card > p {
  max-width: 430px;
  margin: 0 0 30px;
  color: var(--sp-muted);
  line-height: 1.65;
}

.login-form {
  gap: 14px;
}

.login-form > div {
  gap: 7px;
}

.login-form input {
  min-height: 52px;
  padding-inline: 16px;
  border: 1px solid var(--sp-line-strong);
  border-radius: 14px;
  background: #0a0f1a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.login-form input:focus {
  border-color: #4f9cff;
  outline: 3px solid rgba(79, 156, 255, 0.15);
}

.login-form .primary {
  min-height: 52px;
  margin-top: 7px;
  color: #06090f;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(105deg, #2dd4bf, #4f9cff 58%, #a66bff);
  box-shadow: 0 18px 42px rgba(45, 212, 191, 0.17);
}

.login-feedback {
  margin-top: 14px;
  border-color: rgba(79, 156, 255, 0.2);
  background: rgba(79, 156, 255, 0.06);
}

.login-foot {
  margin-top: 20px;
  color: #7f8ea6;
}

/* Application shell uses nearly the full viewport without permanent menu rails. */
.shell {
  width: min(2520px, calc(100% - 24px));
  margin-inline: auto;
  padding: 12px 0 44px;
}

.tabs {
  display: none !important;
}

.hero {
  position: relative;
  min-height: 118px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: clamp(20px, 2.2vw, 30px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sp-a) 24%, var(--sp-line));
  border-radius: 28px;
  background:
    linear-gradient(108deg, color-mix(in srgb, var(--sp-a) 18%, #101725), color-mix(in srgb, var(--sp-b) 10%, #0d1422) 52%, color-mix(in srgb, var(--sp-c) 14%, #0b111d)) !important;
  box-shadow: var(--sp-shadow);
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--sp-a), var(--sp-b) 50%, var(--sp-c));
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -210px;
  right: clamp(140px, 19vw, 410px);
  width: 470px;
  height: 470px;
  border: 72px solid color-mix(in srgb, var(--sp-a) 9%, transparent);
  border-top-color: color-mix(in srgb, var(--sp-b) 28%, transparent);
  border-right-color: color-mix(in srgb, var(--sp-c) 22%, transparent);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.hero-spectrum {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  grid-template-columns: 44px 26px 62px 18px;
  gap: 5px;
  width: min(28vw, 310px);
  height: 5px;
}

.hero-spectrum i {
  border-radius: 0 0 99px 99px;
}

.hero-spectrum i:nth-child(1) { background: var(--sp-a); }
.hero-spectrum i:nth-child(2) { background: var(--sp-b); }
.hero-spectrum i:nth-child(3) { background: var(--sp-c); }
.hero-spectrum i:nth-child(4) { background: var(--sp-danger); }

.hero-identity {
  position: relative;
  z-index: 1;
  max-width: 980px;
}

.hero h1 {
  margin: 3px 0 7px;
  font-size: clamp(2rem, 3vw, 3.25rem);
  font-weight: 780;
  letter-spacing: -0.07em;
}

.hero-context {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sp-a);
}

.hero-context span:last-child {
  color: #b0bdd0;
}

.hero-context span:last-child::before {
  background: var(--sp-c);
  box-shadow: 0 0 14px color-mix(in srgb, var(--sp-c) 70%, transparent);
}

.hero-copy {
  max-width: 760px;
  color: #aab7ca;
}

.hero-actions {
  position: relative;
  z-index: 1;
  min-width: min(390px, 32vw);
  grid-template-columns: minmax(150px, 1fr) minmax(130px, 0.72fr);
  gap: 8px;
}

.hero-actions .status {
  grid-column: 1 / -1;
  justify-content: center;
  border-color: color-mix(in srgb, var(--sp-b) 24%, var(--sp-line));
  background: rgba(5, 9, 16, 0.42);
}

.primary {
  color: #05080e;
  border-color: transparent;
  background: linear-gradient(112deg, var(--sp-a), color-mix(in srgb, var(--sp-b) 74%, white));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--sp-a) 18%, transparent);
}

.secondary,
.compact-button,
.desktop-rail-top,
.desktop-rail-refresh,
.desktop-rail-symbol-row button {
  color: var(--sp-ink);
  border-color: color-mix(in srgb, var(--sp-b) 25%, var(--sp-line));
  background: color-mix(in srgb, var(--sp-b) 7%, rgba(8, 13, 22, 0.88));
}

button:not(:disabled) {
  transition: transform 150ms ease, border-color 150ms ease, filter 150ms ease, background-color 150ms ease;
}

button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--sp-a) 55%, var(--sp-line-strong));
  filter: brightness(1.06);
}

.primary:not(:disabled):hover,
.secondary:not(:disabled):hover,
.compact-button:not(:disabled):hover {
  transform: translateY(-1px);
}

/* Color is structural: cards and panels rotate through the active page triad. */
.cards {
  gap: 10px;
  margin: 12px 0;
}

.card {
  --card-accent: var(--sp-a);
  position: relative;
  min-height: 92px;
  padding: 14px 15px 13px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-accent) 24%, var(--sp-line));
  border-radius: var(--sp-radius-lg);
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--card-accent) 22%, transparent), transparent 62px),
    linear-gradient(145deg, color-mix(in srgb, var(--card-accent) 11%, #151d2e), #0f1522 72%) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

.cards > .card:nth-child(3n + 2) { --card-accent: var(--sp-b); }
.cards > .card:nth-child(3n) { --card-accent: var(--sp-c); }

.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  width: auto;
  height: 3px;
  background: linear-gradient(90deg, var(--card-accent), transparent 78%);
}

.card::after {
  content: "";
  position: absolute;
  top: -34px;
  right: -28px;
  width: 92px;
  height: 92px;
  border: 13px solid color-mix(in srgb, var(--card-accent) 13%, transparent);
  border-radius: 50%;
  background: transparent;
}

.card span,
.card small {
  color: #9aa9bd;
}

.card strong {
  color: color-mix(in srgb, var(--card-accent) 48%, white);
  font-size: clamp(1.22rem, 1.5vw, 1.65rem);
  letter-spacing: -0.04em;
}

.panel,
.insight,
.alarm {
  --panel-accent: var(--sp-a);
  position: relative;
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--panel-accent) 18%, var(--sp-line));
  border-radius: var(--sp-radius-xl);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel-accent) 7%, transparent), transparent 34%),
    linear-gradient(155deg, rgba(19, 26, 42, 0.92), rgba(10, 15, 25, 0.9)) !important;
  box-shadow: var(--sp-shadow);
  backdrop-filter: blur(22px) saturate(120%);
}

.view > .panel:nth-of-type(3n + 2),
.view > .grid:nth-of-type(3n + 2),
.view > .chart-grid:nth-of-type(3n + 2),
.grid > .panel:nth-child(3n + 2),
.chart-grid > .panel:nth-child(3n + 2) {
  --panel-accent: var(--sp-b);
}

.view > .panel:nth-of-type(3n),
.view > .grid:nth-of-type(3n),
.view > .chart-grid:nth-of-type(3n),
.grid > .panel:nth-child(3n),
.chart-grid > .panel:nth-child(3n) {
  --panel-accent: var(--sp-c);
}

.panel::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  width: auto;
  height: 2px;
  background: linear-gradient(90deg, var(--panel-accent), color-mix(in srgb, var(--panel-accent) 28%, transparent) 48%, transparent 88%);
}

.panel-head {
  min-height: 64px;
  padding: 14px 16px 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--panel-accent) 13%, var(--sp-line));
  background: linear-gradient(90deg, color-mix(in srgb, var(--panel-accent) 8%, rgba(14, 21, 34, 0.72)), rgba(10, 15, 25, 0.18));
}

.panel-head .eyebrow,
.eyebrow {
  color: var(--panel-accent, var(--sp-a));
  letter-spacing: 0.12em;
}

.panel-head h2 {
  letter-spacing: -0.035em;
}

.toolbar {
  position: sticky;
  top: 8px;
  z-index: 22;
  gap: 8px;
  margin-bottom: 13px;
  padding: 10px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--sp-a) 24%, var(--sp-line));
  border-radius: 17px;
  background: rgba(10, 15, 25, 0.94) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(24px);
}

.toolbar::before {
  height: 2px;
  background: linear-gradient(90deg, var(--sp-a), var(--sp-b), var(--sp-c));
}

label {
  color: #aab7ca;
  letter-spacing: 0.02em;
}

select,
input,
textarea {
  color: var(--sp-ink);
  border: 1px solid var(--sp-line-strong);
  border-radius: 11px;
  background: rgba(7, 11, 19, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

select:hover,
input:hover,
textarea:hover {
  border-color: color-mix(in srgb, var(--sp-b) 38%, var(--sp-line-strong));
}

select:focus,
input:focus,
textarea:focus,
button:focus-visible {
  border-color: var(--sp-a);
  outline: 3px solid color-mix(in srgb, var(--sp-a) 18%, transparent);
  outline-offset: 1px;
}

input[type="range"] {
  accent-color: var(--sp-a);
}

.status,
.badge,
.range-label,
.signal-pill,
.filter-flag {
  border-color: color-mix(in srgb, var(--sp-a) 20%, var(--sp-line));
  background: color-mix(in srgb, var(--sp-a) 6%, rgba(6, 10, 18, 0.82));
}

.table-wrap,
.table-shell {
  border-color: var(--sp-line);
  border-radius: 15px;
  background: rgba(7, 11, 19, 0.55);
}

table thead th {
  color: #c8d4e6;
  border-bottom-color: color-mix(in srgb, var(--panel-accent, var(--sp-a)) 22%, var(--sp-line));
  background: color-mix(in srgb, var(--panel-accent, var(--sp-a)) 8%, #111827);
}

table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.012);
}

table tbody tr:hover {
  background: color-mix(in srgb, var(--panel-accent, var(--sp-a)) 7%, transparent);
}

.chart-host,
.chart-svg,
.tv-chart-shell,
.history-chart,
.mini-chart {
  border-color: color-mix(in srgb, var(--panel-accent, var(--sp-b)) 16%, var(--sp-line));
  border-radius: 16px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    rgba(5, 9, 16, 0.52);
  background-size: 38px 38px, 38px 38px, auto;
}

.market-quick-panel {
  --panel-accent: var(--sp-b);
}

.market-quick-picker {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sp-b) 9%, transparent), transparent 56%);
}

.positive,
.up,
.success {
  color: #58e7ac;
}

.negative,
.down,
.danger {
  color: #ff7891;
}

/* The full navigation exists only inside this command layer. */
.command-orb {
  position: fixed;
  z-index: 70;
  left: auto;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: auto;
  min-width: 126px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 7px 11px 7px 7px;
  color: var(--sp-ink);
  border: 1px solid color-mix(in srgb, var(--sp-a) 46%, var(--sp-line-strong));
  border-radius: 99px;
  background: rgba(10, 15, 25, 0.9);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.5), 0 0 30px color-mix(in srgb, var(--sp-a) 16%, transparent);
  backdrop-filter: blur(22px) saturate(125%);
}

.command-orb::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(110deg, var(--sp-a), var(--sp-b), var(--sp-c));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.command-orb-wheel {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 0;
  background: conic-gradient(var(--sp-a), var(--sp-b), #a66bff, var(--sp-c), var(--sp-danger), var(--sp-a));
  box-shadow: 0 0 22px color-mix(in srgb, var(--sp-a) 24%, transparent);
}

.command-orb-wheel::after {
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #0a0f19;
}

.command-orb-label {
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.command-orb kbd,
.command-head kbd {
  color: #8e9bb0;
  border-color: var(--sp-line);
  background: rgba(255, 255, 255, 0.035);
}

body.command-open {
  overflow: hidden;
}

.command-menu {
  z-index: 90;
  align-items: center;
  padding: clamp(10px, 2vw, 24px);
  background: rgba(4, 6, 11, 0.76);
  backdrop-filter: blur(20px) saturate(118%);
}

.command-backdrop {
  background:
    radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--sp-a) 18%, transparent), transparent 34rem),
    radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--sp-c) 12%, transparent), transparent 30rem),
    rgba(3, 5, 9, 0.76);
}

.command-dialog {
  width: min(1540px, 100%);
  max-height: calc(100dvh - 40px);
  border: 1px solid color-mix(in srgb, var(--sp-a) 24%, var(--sp-line));
  border-radius: 30px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sp-a) 9%, transparent), transparent 32%),
    linear-gradient(315deg, color-mix(in srgb, var(--sp-c) 6%, transparent), transparent 35%),
    #0d1320;
  box-shadow: var(--sp-shadow-high);
}

.command-head {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--sp-line);
  background: rgba(8, 12, 21, 0.58);
}

.command-head h2 {
  font-size: clamp(1.45rem, 2vw, 2rem);
  letter-spacing: -0.05em;
}

.command-spectrum {
  grid-template-columns: 1.3fr 0.9fr 0.6fr 1fr 0.45fr;
  height: 7px;
  padding: 0;
  gap: 5px;
}

.command-spectrum i:nth-child(1) { background: var(--sp-a); }
.command-spectrum i:nth-child(2) { background: var(--sp-b); }
.command-spectrum i:nth-child(3) { background: #a66bff; }
.command-spectrum i:nth-child(4) { background: var(--sp-c); }
.command-spectrum i:nth-child(5) { background: var(--sp-danger); }

.command-workspace-grid {
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: 12px;
  padding: 12px;
}

.command-menu .desktop-rail {
  border: 1px solid var(--sp-line);
  border-radius: 20px;
  background: rgba(10, 15, 25, 0.72);
  box-shadow: none;
}

.command-menu .desktop-left-rail,
.command-menu .desktop-right-rail {
  gap: 10px;
}

.command-menu .desktop-rail-block,
.command-menu .desktop-rail-metric {
  border-color: color-mix(in srgb, var(--sp-a) 14%, var(--sp-line));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.024);
}

.command-menu .desktop-view-nav button,
.command-menu .desktop-section-nav button,
.command-menu .desktop-period-button {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.018);
}

.command-menu .desktop-view-nav button.active,
.command-menu .desktop-section-nav button.active,
.command-menu .desktop-period-button.active {
  border-color: color-mix(in srgb, var(--sp-a) 52%, transparent);
  background: linear-gradient(110deg, color-mix(in srgb, var(--sp-a) 17%, #111827), color-mix(in srgb, var(--sp-b) 8%, #111827));
}

.command-menu .desktop-view-nav button.active span,
.command-menu .desktop-period-button.active strong {
  color: var(--sp-a);
}

.command-menu .desktop-period-bar i {
  background: linear-gradient(90deg, var(--sp-a), var(--sp-b), var(--sp-c));
}

/* Responsive density is deliberately different for desktop, tablet and phone. */
@media (min-width: 1600px) {
  .shell {
    width: calc(100% - 32px);
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.32fr);
  }

  .cards {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .panel-head {
    padding-inline: 19px;
  }
}

@media (max-width: 980px) {
  .login-stage {
    grid-template-columns: minmax(0, 0.9fr) minmax(350px, 1.1fr);
  }

  .login-story {
    padding: 34px;
  }

  .login-story-copy h2 {
    font-size: clamp(2.5rem, 6.5vw, 4.2rem);
  }

  .login-story-grid {
    grid-template-columns: 1fr;
  }

  .login-story-grid article:nth-child(2),
  .login-story-grid article:nth-child(3) {
    display: none;
  }

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

  .hero-actions {
    width: 100%;
    min-width: 0;
  }

  .command-workspace-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  body::before {
    background-size: 36px 36px !important;
  }

  .login-gate {
    align-items: stretch;
    padding: 8px;
  }

  .login-stage {
    min-height: calc(100dvh - 16px);
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    border-radius: 24px;
  }

  .login-story {
    min-height: 178px;
    padding: 22px 20px 28px;
  }

  .login-story::before {
    top: -170px;
    right: -140px;
    transform: scale(0.72) rotate(24deg);
  }

  .login-story-copy {
    margin-top: 28px;
  }

  .login-story-copy .eyebrow,
  .login-story-copy > p:last-child,
  .login-story-grid {
    display: none;
  }

  .login-story-copy h2 {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 0.98;
  }

  .login-story-copy h2 br:nth-of-type(1) {
    display: none;
  }

  .login-card {
    justify-content: flex-start;
    padding: 26px 20px 24px;
    border-top: 1px solid var(--sp-line);
    border-left: 0;
  }

  .login-card-head {
    margin-bottom: 22px;
  }

  .login-card h1 {
    font-size: 1.9rem;
  }

  .login-card > p {
    margin-bottom: 22px;
    font-size: 0.86rem;
  }

  .shell {
    width: calc(100% - 12px);
    padding-top: 6px;
  }

  .hero {
    min-height: 0;
    gap: 14px;
    padding: 17px;
    border-radius: 20px;
  }

  .hero::after {
    opacity: 0.65;
    right: -210px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero-copy,
  .hero-context span:last-child {
    display: none;
  }

  .hero-actions {
    grid-template-columns: 1fr 1fr;
  }

  .hero-actions button {
    min-height: 38px;
    padding-inline: 9px;
    font-size: 0.72rem;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .card {
    min-height: 78px;
    padding: 11px;
    border-radius: 15px;
  }

  .card strong {
    font-size: 1.08rem;
  }

  .panel,
  .insight,
  .alarm {
    border-radius: 18px;
  }

  .panel-head {
    min-height: 54px;
    padding: 11px 12px;
  }

  .toolbar {
    position: relative;
    top: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 14px;
  }

  .command-orb {
    right: 11px;
    bottom: max(11px, env(safe-area-inset-bottom));
    min-width: 50px;
    width: 50px;
    min-height: 50px;
    padding: 6px;
  }

  .command-orb-wheel {
    width: 38px;
    height: 38px;
  }

  .command-orb-label,
  .command-orb > kbd {
    display: none;
  }

  .command-menu {
    align-items: stretch;
    padding: 6px;
  }

  .command-dialog {
    width: 100%;
    max-height: calc(100dvh - 12px);
    border-radius: 20px;
  }

  .command-head {
    padding: 14px 13px 11px;
  }

  .command-head-actions kbd {
    display: none;
  }

  .command-workspace-grid {
    gap: 8px;
    padding: 8px;
  }

  .command-menu .desktop-left-rail,
  .command-menu .desktop-right-rail {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }

  .command-menu .desktop-left-rail > *,
  .command-menu .desktop-right-rail > * {
    grid-area: auto !important;
  }

  .command-menu .desktop-right-rail .desktop-rail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 390px) {
  .login-story {
    min-height: 154px;
  }

  .login-story-copy {
    margin-top: 18px;
  }

  .login-story-copy h2 {
    font-size: 1.9rem;
  }

  .login-card-head {
    display: none;
  }

  .login-card h1 {
    margin-top: 0;
  }

  .hero-actions .status {
    font-size: 0.62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  button,
  .command-dialog {
    animation: none !important;
    transition: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Spectrum v3 chromatic system: every interactive and analytical surface     */
/* inherits the active view triad while success/risk semantics stay stable.   */
/* -------------------------------------------------------------------------- */

:root {
  --sp-chart-bg: #070b13;
  --sp-chart-grid: rgba(174, 194, 224, 0.105);
  --sp-chart-grid-strong: rgba(194, 211, 236, 0.27);
  --sp-warning: #ffb020;
  --sp-info: #65a5ff;
}

[data-spectrum-slot="a"] {
  --spectrum-accent: var(--sp-a);
  --spectrum-next: var(--sp-b);
  --spectrum-third: var(--sp-c);
}

[data-spectrum-slot="b"] {
  --spectrum-accent: var(--sp-b);
  --spectrum-next: var(--sp-c);
  --spectrum-third: var(--sp-a);
}

[data-spectrum-slot="c"] {
  --spectrum-accent: var(--sp-c);
  --spectrum-next: var(--sp-a);
  --spectrum-third: var(--sp-b);
}

body[data-view="market"] { --sp-chart-bg: #061018; }
body[data-view="detail"] { --sp-chart-bg: #090b18; }
body[data-view="multi"] { --sp-chart-bg: #071014; }
body[data-view="ml"] { --sp-chart-bg: #0c0917; }
body[data-view="success"] { --sp-chart-bg: #07110f; }
body[data-view="alarms"] { --sp-chart-bg: #120a12; }
body[data-view="data"] { --sp-chart-bg: #0a0f16; }

/* The command menu advertises all seven page identities at once. */
#desktopViewNav [data-open-view="market"] { --nav-a: #24d6bd; --nav-b: #4f9cff; --nav-c: #ffb020; }
#desktopViewNav [data-open-view="detail"] { --nav-a: #4f7cff; --nav-b: #9b6cff; --nav-c: #ff647e; }
#desktopViewNav [data-open-view="multi"] { --nav-a: #18c6d9; --nav-b: #7bdc65; --nav-c: #a76af4; }
#desktopViewNav [data-open-view="ml"] { --nav-a: #a66bff; --nav-b: #f25ec8; --nav-c: #31d2e5; }
#desktopViewNav [data-open-view="success"] { --nav-a: #25cf82; --nav-b: #28a8ff; --nav-c: #ffad24; }
#desktopViewNav [data-open-view="alarms"] { --nav-a: #ff5f7d; --nav-b: #ffad24; --nav-c: #7f6cff; }
#desktopViewNav [data-open-view="data"] { --nav-a: #9aa9c0; --nav-b: #31c8bf; --nav-c: #ff884d; }

#desktopViewNav [data-open-view] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--nav-a) 22%, var(--sp-line));
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--nav-c) 15%, transparent), transparent 42%),
    linear-gradient(105deg, color-mix(in srgb, var(--nav-a) 8%, #0c1320), color-mix(in srgb, var(--nav-b) 5%, #0a101b));
}

#desktopViewNav [data-open-view]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 8px 0;
  height: 2px;
  border-radius: 999px;
  opacity: 0.58;
  background: linear-gradient(90deg, var(--nav-a), var(--nav-b), var(--nav-c));
}

#desktopViewNav [data-open-view] > span {
  color: color-mix(in srgb, var(--nav-a) 72%, white);
  border-color: color-mix(in srgb, var(--nav-a) 30%, transparent);
  background: color-mix(in srgb, var(--nav-a) 12%, #0b111d);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-b) 11%, transparent);
}

#desktopViewNav [data-open-view]:hover,
#desktopViewNav [data-open-view].active {
  border-color: color-mix(in srgb, var(--nav-a) 58%, var(--nav-b));
  background:
    radial-gradient(circle at 94% 15%, color-mix(in srgb, var(--nav-c) 22%, transparent), transparent 46%),
    linear-gradient(105deg, color-mix(in srgb, var(--nav-a) 17%, #0d1623), color-mix(in srgb, var(--nav-b) 12%, #0b1220));
  box-shadow: inset 3px 0 0 var(--nav-a), 0 10px 22px rgba(0, 0, 0, 0.16);
}

#desktopViewNav [data-open-view].active > b {
  color: color-mix(in srgb, var(--nav-a) 35%, white);
}

#desktopSectionNav [data-rail-section]:nth-child(3n + 1) { --section-accent: var(--sp-a); }
#desktopSectionNav [data-rail-section]:nth-child(3n + 2) { --section-accent: var(--sp-b); }
#desktopSectionNav [data-rail-section]:nth-child(3n) { --section-accent: var(--sp-c); }

#desktopSectionNav [data-rail-section] {
  border-left: 2px solid color-mix(in srgb, var(--section-accent) 38%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--section-accent) 7%, transparent), transparent 76%);
}

#desktopSectionNav [data-rail-section].active {
  color: color-mix(in srgb, var(--section-accent) 52%, white);
  border-left-color: var(--section-accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--section-accent) 16%, transparent), transparent 86%);
}

/* Page chrome uses all three colors instead of a single accent line. */
.hero {
  border-color: color-mix(in srgb, var(--sp-a) 22%, var(--sp-line));
  background:
    radial-gradient(circle at 31% 16%, color-mix(in srgb, var(--sp-a) 17%, transparent), transparent 29%),
    radial-gradient(circle at 68% 120%, color-mix(in srgb, var(--sp-b) 14%, transparent), transparent 34%),
    linear-gradient(112deg, color-mix(in srgb, var(--sp-a) 7%, #111827), color-mix(in srgb, var(--sp-c) 7%, #111522)) !important;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto 22px 0 22px;
  top: auto;
  right: 22px;
  bottom: 0;
  left: 22px;
  width: auto;
  height: 3px;
  border: 0;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--sp-a), var(--sp-b) 52%, var(--sp-c));
  box-shadow: 0 0 22px color-mix(in srgb, var(--sp-b) 25%, transparent);
  transform: none;
}

.hero-context span:first-child { color: var(--sp-a); }
.hero-context span:last-child { color: color-mix(in srgb, var(--sp-c) 50%, #b9c7da); }

.hero-actions .status {
  border-color: color-mix(in srgb, var(--sp-c) 25%, var(--sp-line));
  background: linear-gradient(90deg, color-mix(in srgb, var(--sp-b) 7%, #080d16), color-mix(in srgb, var(--sp-c) 6%, #080d16));
}

.toolbar > div {
  --field-accent: var(--sp-a);
  position: relative;
  min-width: 0;
  padding: 7px 8px 8px;
  border: 1px solid color-mix(in srgb, var(--field-accent) 14%, transparent);
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--field-accent) 6%, rgba(12, 18, 29, 0.78)), rgba(7, 11, 19, 0.52));
}

.toolbar > div:nth-child(3n + 2) { --field-accent: var(--sp-b); }
.toolbar > div:nth-child(3n) { --field-accent: var(--sp-c); }

.toolbar > div::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  border-radius: 10px 0 0 10px;
  background: var(--field-accent);
}

.toolbar > div label {
  color: color-mix(in srgb, var(--field-accent) 52%, #c6d2e3);
}

.toolbar > div select,
.toolbar > div input {
  --field-accent-local: var(--field-accent);
  border-color: color-mix(in srgb, var(--field-accent) 22%, var(--sp-line));
}

select:focus,
input:focus,
textarea:focus,
button:focus-visible {
  border-color: var(--field-accent-local, var(--spectrum-accent, var(--sp-a)));
  outline-color: color-mix(in srgb, var(--field-accent-local, var(--spectrum-accent, var(--sp-a))) 22%, transparent);
}

/* Rotating surfaces make nested cards and panels visibly belong to the page. */
.panel[data-spectrum-slot],
.insight[data-spectrum-slot] {
  --panel-accent: var(--spectrum-accent);
}

.card[data-spectrum-slot] {
  --card-accent: var(--spectrum-accent);
}

.panel::after,
.insight::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -88px;
  right: 14px;
  width: 180px;
  height: 180px;
  pointer-events: none;
  border: 24px solid color-mix(in srgb, var(--panel-accent, var(--sp-a)) 5%, transparent);
  border-radius: 50%;
  opacity: 0.72;
}

.panel > *,
.insight > * {
  position: relative;
  z-index: 1;
}

.panel-head {
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--panel-accent) 82%, transparent);
}

.panel-head .badge,
.panel-head .status {
  color: color-mix(in srgb, var(--panel-accent) 46%, white);
  border-color: color-mix(in srgb, var(--panel-accent) 28%, var(--sp-line));
  background: color-mix(in srgb, var(--panel-accent) 8%, rgba(7, 11, 19, 0.84));
}

.card[data-tone="good"] { --status-color: var(--sp-positive); }
.card[data-tone="warn"] { --status-color: var(--sp-warning); }
.card[data-tone="bad"] { --status-color: var(--sp-danger); }
.card[data-tone="info"] { --status-color: var(--sp-info); }

.card-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.card-label::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--status-color, var(--card-accent));
  box-shadow: 0 0 13px color-mix(in srgb, var(--status-color, var(--card-accent)) 62%, transparent);
}

.card[data-tone="good"] .card-value { color: color-mix(in srgb, var(--sp-positive) 58%, white); }
.card[data-tone="warn"] .card-value { color: color-mix(in srgb, var(--sp-warning) 54%, white); }
.card[data-tone="bad"] .card-value { color: color-mix(in srgb, var(--sp-danger) 58%, white); }

/* Dense analytical sub-surfaces receive the same slot tokens. */
.candidate-tier[data-spectrum-slot],
.candidate-card[data-spectrum-slot],
.filter-learning-card[data-spectrum-slot],
.detail-metric[data-spectrum-slot],
.portfolio-model-card[data-spectrum-slot],
.portfolio-league-period[data-spectrum-slot],
.peer-insight-card[data-spectrum-slot],
.workflow-step[data-spectrum-slot],
.excel-guide > div[data-spectrum-slot] {
  --component-accent: var(--spectrum-accent);
  border-color: color-mix(in srgb, var(--component-accent) 25%, var(--sp-line)) !important;
  background:
    radial-gradient(circle at 94% 8%, color-mix(in srgb, var(--component-accent) 13%, transparent), transparent 44%),
    linear-gradient(145deg, color-mix(in srgb, var(--component-accent) 7%, #111827), rgba(8, 13, 22, 0.82)) !important;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--component-accent) 72%, transparent);
}

.detail-metric[data-spectrum-slot] > span,
.candidate-card[data-spectrum-slot] .candidate-rank,
.portfolio-model-card[data-spectrum-slot] .portfolio-model-rank,
.peer-insight-card[data-spectrum-slot] strong {
  color: color-mix(in srgb, var(--component-accent) 58%, white);
}

.portfolio-model-card[data-spectrum-slot].active,
.portfolio-model-card[data-spectrum-slot].recommended {
  border-color: color-mix(in srgb, var(--component-accent) 62%, white) !important;
  box-shadow: inset 4px 0 0 var(--component-accent), 0 14px 34px color-mix(in srgb, var(--component-accent) 13%, transparent);
}

.candidate-tier.tier-strong { --component-accent: var(--sp-positive); }
.candidate-tier.tier-good { --component-accent: var(--sp-b); }
.candidate-tier.tier-watch { --component-accent: var(--sp-c); }

/* Alarm cards keep signal meaning in a slim marker while their body rotates. */
.alarm[data-spectrum-slot] {
  --panel-accent: var(--spectrum-accent);
  --signal-color: var(--sp-b);
  border-color: color-mix(in srgb, var(--panel-accent) 32%, var(--sp-line)) !important;
  background:
    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--panel-accent) 14%, transparent), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel-accent) 7%, #101725), rgba(7, 12, 21, 0.86)) !important;
  box-shadow: inset 3px 0 0 var(--signal-color), 0 12px 28px rgba(0, 0, 0, 0.16) !important;
}

.alarm.good { --signal-color: var(--sp-positive); }
.alarm.warn { --signal-color: var(--sp-warning); }
.alarm.bad { --signal-color: var(--sp-danger); }

.alarm strong { color: color-mix(in srgb, var(--panel-accent) 60%, white) !important; }
.alarm p { color: color-mix(in srgb, var(--signal-color) 32%, #c6d1e2); }
.alarm-metrics b {
  border-color: color-mix(in srgb, var(--panel-accent) 18%, var(--sp-line));
  background: color-mix(in srgb, var(--panel-accent) 5%, rgba(5, 9, 16, 0.7));
}

/* Tables are data visualizations too: triadic columns, sortable state, rows. */
.table-wrap[data-spectrum-slot],
.table-shell[data-spectrum-slot] {
  --table-accent: var(--spectrum-accent);
  position: relative;
  border: 1px solid color-mix(in srgb, var(--table-accent) 25%, var(--sp-line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--table-accent) 5%, transparent), transparent 22%),
    rgba(5, 9, 16, 0.62);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--table-accent) 54%, transparent), 0 18px 34px rgba(0, 0, 0, 0.16);
  scrollbar-color: color-mix(in srgb, var(--table-accent) 52%, #202a3a) rgba(5, 9, 16, 0.7);
  scrollbar-width: thin;
}

.table-wrap::-webkit-scrollbar { width: 9px; height: 9px; }
.table-wrap::-webkit-scrollbar-track { background: rgba(5, 9, 16, 0.72); }
.table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid rgba(5, 9, 16, 0.72);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sp-a), var(--sp-b), var(--sp-c));
}

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

table th:nth-child(3n + 1),
table td:nth-child(3n + 1) { --column-accent: var(--sp-a); }
table th:nth-child(3n + 2),
table td:nth-child(3n + 2) { --column-accent: var(--sp-b); }
table th:nth-child(3n),
table td:nth-child(3n) { --column-accent: var(--sp-c); }

table thead th {
  position: sticky;
  z-index: 4;
  top: 0;
  color: color-mix(in srgb, var(--column-accent) 40%, #edf3fc);
  border-right: 1px solid color-mix(in srgb, var(--column-accent) 8%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--column-accent) 46%, var(--sp-line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--column-accent) 15%, #151d2c), color-mix(in srgb, var(--column-accent) 5%, #0c1320)) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--column-accent) 20%, transparent);
}

table th[data-sort-key] {
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

table th[data-sort-key]:hover,
table th[aria-sort="ascending"],
table th[aria-sort="descending"] {
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--column-accent) 28%, #172033), color-mix(in srgb, var(--column-accent) 10%, #0c1320)) !important;
  box-shadow: inset 0 -3px 0 var(--column-accent), inset 0 1px 0 color-mix(in srgb, var(--column-accent) 26%, transparent);
}

table tbody td {
  position: relative;
  border-right: 1px solid color-mix(in srgb, var(--column-accent) 5%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--column-accent) 8%, var(--sp-line));
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--column-accent) 2.8%, transparent), transparent 70%);
  transition: color 130ms ease, background-color 130ms ease, box-shadow 130ms ease;
}

table tbody tr:nth-child(even) td {
  background-color: rgba(255, 255, 255, 0.014);
}

table tbody tr:hover td {
  background-color: color-mix(in srgb, var(--column-accent) 7%, rgba(12, 18, 29, 0.88));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--column-accent) 12%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--column-accent) 12%, transparent);
}

table tbody td:first-child {
  color: color-mix(in srgb, var(--sp-a) 34%, white);
  font-weight: 760;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--sp-a) 34%, transparent);
}

table td.good,
table td.positive,
table td .good,
table td .positive { color: #59e8ad !important; }
table td.warn,
table td .warn { color: color-mix(in srgb, var(--sp-warning) 68%, white) !important; }
table td.bad,
table td.negative,
table td .bad,
table td .negative { color: #ff7a92 !important; }

.sub,
table td small {
  color: color-mix(in srgb, var(--column-accent, var(--sp-muted)) 16%, var(--sp-muted));
}

/* Charts inherit active-view colors and look interactive before hover. */
.chart-host[data-spectrum-slot] {
  --chart-accent: var(--spectrum-accent);
  border-color: color-mix(in srgb, var(--chart-accent) 25%, var(--sp-line));
  background:
    linear-gradient(color-mix(in srgb, var(--chart-accent) 3%, rgba(255, 255, 255, 0.018)) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--spectrum-next) 3%, rgba(255, 255, 255, 0.018)) 1px, transparent 1px),
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--chart-accent) 8%, transparent), transparent 32%),
    var(--sp-chart-bg);
  background-size: 38px 38px, 38px 38px, auto, auto;
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--chart-accent) 32%, transparent);
}

.chart-mark {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 120ms ease, filter 120ms ease, transform 120ms ease;
}

.chart-mark:hover,
.chart-mark:focus,
.chart-mark.chart-selected {
  opacity: 1 !important;
  filter: brightness(1.18) drop-shadow(0 0 5px color-mix(in srgb, var(--chart-accent, var(--sp-a)) 58%, transparent));
  transform: scale(1.025);
}

.chart-tooltip {
  color: #f8fbff;
  border-color: color-mix(in srgb, var(--chart-accent, var(--sp-a)) 34%, var(--sp-line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--chart-accent, var(--sp-a)) 13%, #0b111d), #080d16);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
}

.chart-empty,
.empty-state,
.empty-panel,
.detail.empty,
.feedback[data-spectrum-slot] {
  --empty-accent: var(--spectrum-accent, var(--sp-a));
  color: color-mix(in srgb, var(--empty-accent) 22%, #b9c6d8);
  border: 1px dashed color-mix(in srgb, var(--empty-accent) 29%, var(--sp-line));
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--empty-accent) 8%, rgba(8, 13, 22, 0.8)), rgba(8, 13, 22, 0.58)),
    repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--empty-accent) 3%, transparent) 9px 10px);
}

.status.good,
.badge.good,
.signal-pill.good,
.filter-flag.good,
.feedback.good {
  color: #67e8b4;
  border-color: color-mix(in srgb, var(--sp-positive) 34%, var(--sp-line));
  background: color-mix(in srgb, var(--sp-positive) 9%, rgba(7, 12, 20, 0.84));
}

.status.warn,
.badge.warn,
.signal-pill.warn,
.filter-flag.warn,
.feedback.warn {
  color: color-mix(in srgb, var(--sp-warning) 66%, white);
  border-color: color-mix(in srgb, var(--sp-warning) 33%, var(--sp-line));
  background: color-mix(in srgb, var(--sp-warning) 8%, rgba(7, 12, 20, 0.84));
}

.status.bad,
.badge.bad,
.signal-pill.bad,
.filter-flag.bad,
.feedback.bad {
  color: #ff8ca1;
  border-color: color-mix(in srgb, var(--sp-danger) 36%, var(--sp-line));
  background: color-mix(in srgb, var(--sp-danger) 9%, rgba(7, 12, 20, 0.84));
}

/* Data Center has a readable operation flow, not a stack of identical boxes. */
.data-guide {
  border-color: color-mix(in srgb, var(--sp-b) 24%, var(--sp-line));
  background:
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--sp-c) 16%, transparent), transparent 32%),
    linear-gradient(112deg, color-mix(in srgb, var(--sp-a) 9%, #111827), color-mix(in srgb, var(--sp-b) 9%, #101724)) !important;
  box-shadow: inset 4px 0 0 var(--sp-a), inset -4px 0 0 color-mix(in srgb, var(--sp-c) 62%, transparent);
}

.workflow-step.current {
  border-color: color-mix(in srgb, var(--component-accent, var(--sp-a)) 58%, white) !important;
  filter: none;
}

.workflow-step.complete {
  --component-accent: var(--sp-positive);
}

.workflow-step.locked {
  opacity: 0.58;
  filter: saturate(0.55);
}

.drop-zone,
.float-upload-card,
.excel-file-button,
.file-button {
  border-color: color-mix(in srgb, var(--sp-b) 26%, var(--sp-line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--sp-b) 7%, #101725), color-mix(in srgb, var(--sp-c) 4%, #080d16));
}

.drop-zone:hover,
.excel-file-button:hover,
.file-button:hover {
  border-color: color-mix(in srgb, var(--sp-c) 58%, var(--sp-b));
  background: linear-gradient(145deg, color-mix(in srgb, var(--sp-b) 12%, #111a2a), color-mix(in srgb, var(--sp-c) 8%, #0b111d));
}

/* Smaller screens keep color identity without turning each card into a poster. */
@media (max-width: 980px) {
  .toolbar > div {
    padding: 6px;
  }

  table thead th {
    position: relative;
    top: auto;
  }
}

@media (max-width: 700px) {
  .hero::after {
    inset-inline: 12px;
  }

  .panel::after,
  .insight::after {
    width: 120px;
    height: 120px;
    top: -68px;
    right: 8px;
  }

  .toolbar > div {
    border-radius: 10px;
  }

  .card::after {
    width: 68px;
    height: 68px;
    border-width: 10px;
  }

  .table-wrap {
    border-radius: 13px;
  }

  table thead th,
  table tbody td {
    padding-inline: 9px;
  }

  #desktopViewNav [data-open-view] {
    min-height: 40px;
  }
}

/* Telegram command center */
.telegram-center-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--view-b) 18%, transparent), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--view-a) 8%, var(--panel)), color-mix(in srgb, var(--view-c) 5%, var(--panel)));
}

.telegram-center-panel::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: 18px;
  bottom: -110px;
  border: 1px solid color-mix(in srgb, var(--view-b) 28%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.telegram-center-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(300px, 1.35fr) minmax(180px, .65fr);
  gap: 12px;
  align-items: stretch;
}

.telegram-bot-card,
.telegram-health-grid article {
  border: 1px solid color-mix(in srgb, var(--view-a) 24%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel-2) 90%, transparent);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}

.telegram-bot-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.telegram-orbit {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #06121a;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  background: linear-gradient(135deg, var(--view-a), var(--view-b));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--view-b) 24%, transparent);
}

.telegram-bot-card div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.telegram-bot-card strong,
.telegram-health-grid strong {
  color: var(--text);
}

.telegram-bot-card small,
.telegram-health-grid span {
  color: var(--muted);
  line-height: 1.45;
}

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

.telegram-health-grid article {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 74px;
  padding: 11px 12px;
}

.telegram-health-grid article:nth-child(2) {
  border-color: color-mix(in srgb, var(--view-b) 28%, var(--line));
}

.telegram-health-grid article:nth-child(3) {
  border-color: color-mix(in srgb, var(--view-c) 30%, var(--line));
}

.telegram-health-grid strong {
  font-size: .94rem;
  overflow-wrap: anywhere;
}

.telegram-actions {
  display: grid;
  gap: 7px;
  align-content: center;
}

.telegram-actions button {
  width: 100%;
}

.telegram-help {
  position: relative;
  z-index: 1;
  margin-top: 10px;
}

@media (max-width: 1040px) {
  .telegram-center-grid {
    grid-template-columns: 1fr 1.4fr;
  }

  .telegram-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr auto;
  }
}

@media (max-width: 680px) {
  .telegram-center-grid,
  .telegram-actions {
    grid-template-columns: 1fr;
  }

  .telegram-actions {
    grid-column: auto;
  }

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

  .telegram-health-grid article {
    min-height: 64px;
    padding: 9px;
  }

  .telegram-health-grid strong {
    font-size: .78rem;
  }
}