/* Human UI Craft canonical design tokens.
   Use as the design source of truth; ask the user about conflicting project requirements. */

:root {
  color-scheme: light dark;

  /* Typography */
  --hui-font-sans: "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hui-font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --hui-font-weight-regular: 400;
  --hui-font-weight-medium: 500;
  --hui-font-weight-semibold: 600;
  --hui-font-weight-bold: 700;
  --hui-text-caption-size: 0.75rem;
  --hui-text-caption-line: 1.125rem;
  --hui-text-body-small-size: 0.875rem;
  --hui-text-body-small-line: 1.25rem;
  --hui-text-body-size: 1rem;
  --hui-text-body-line: 1.5rem;
  --hui-text-title-size: 1.125rem;
  --hui-text-title-line: 1.625rem;
  --hui-text-heading-small-size: 1.25rem;
  --hui-text-heading-small-line: 1.75rem;
  --hui-text-heading-medium-size: 1.5rem;
  --hui-text-heading-medium-line: 2rem;
  --hui-text-heading-large-size: 2rem;
  --hui-text-heading-large-line: 2.5rem;
  --hui-text-display-size: 2.5rem;
  --hui-text-display-line: 2.75rem;

  /* Spacing: use semantic composition aliases in components. */
  --hui-space-0: 0;
  --hui-space-1: 0.25rem;
  --hui-space-2: 0.5rem;
  --hui-space-3: 0.75rem;
  --hui-space-4: 1rem;
  --hui-space-5: 1.25rem;
  --hui-space-6: 1.5rem;
  --hui-space-8: 2rem;
  --hui-space-10: 2.5rem;
  --hui-space-12: 3rem;
  --hui-space-16: 4rem;

  /* Geometry */
  --hui-radius-small: 0.5rem;
  --hui-radius-medium: 0.75rem;
  --hui-radius-large: 1rem;
  --hui-radius-xlarge: 1.125rem;
  --hui-radius-pill: 999px;
  --hui-border-thin: 1px;
  --hui-control-compact: 2.25rem;
  --hui-control-standard: 2.75rem;
  --hui-control-large: 3rem;
  --hui-hit-target-min: 2.75rem;
  --hui-content-measure: 70ch;
  --hui-workspace-reading-max: 80rem;
  --hui-workspace-data-max: 100rem;
  --hui-nav-wide: 14.75rem;
  --hui-nav-compact: 4.5rem;

  /* Motion */
  --hui-duration-instant: 0ms;
  --hui-duration-fast: 150ms;
  --hui-duration-standard: 200ms;
  --hui-duration-slow: 250ms;
  --hui-duration-spinner-cycle: 800ms;
  --hui-duration-skeleton-cycle: 1600ms;
  --hui-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --hui-ease-enter: cubic-bezier(0, 0, 0, 1);
  --hui-ease-exit: cubic-bezier(0.3, 0, 1, 1);

  /* Shared stacking contract */
  --hui-z-base: 0;
  --hui-z-raised: 2;
  --hui-z-sticky: 20;
  --hui-z-header: 40;
  --hui-z-navigation: 60;
  --hui-z-popover: 80;
  --hui-z-modal: 100;
  --hui-z-notification: 120;

  /* Theme pairs: light-dark() follows color-scheme without duplicate maps. */
  --hui-color-canvas: light-dark(#f7f5f2, #030303);
  --hui-color-surface: light-dark(#ffffff, #090909);
  --hui-color-surface-subtle: light-dark(#f7f3ee, #101010);
  --hui-color-surface-strong: light-dark(#eee8e1, #171717);
  --hui-color-text: light-dark(#1d1814, #f8f5f0);
  --hui-color-text-secondary: light-dark(#4f4841, #d6d0c9);
  --hui-color-text-tertiary: light-dark(#675f57, #aaa29a);
  --hui-color-border: light-dark(#ddd6cf, #292929);
  --hui-color-border-strong: light-dark(#b8afa6, #4a4744);
  --hui-color-control-border: light-dark(#8a7f74, #706a64);
  --hui-color-primary: #ff792f;
  --hui-color-primary-hover: light-dark(#ef681c, #ff8a4c);
  --hui-color-primary-strong: #ff541f;
  --hui-color-primary-highlight: #ffb06f;
  --hui-color-primary-glow: light-dark(rgb(255 121 47 / 16%), rgb(255 121 47 / 23%));
  --hui-color-on-primary: #2c1100;
  --hui-color-primary-soft: light-dark(#fff0e6, #32180a);
  --hui-color-primary-soft-text: light-dark(#963400, #ffc29f);
  --hui-color-secondary: light-dark(#825000, #f2b84b);
  --hui-color-secondary-hover: light-dark(#684000, #f6c96f);
  --hui-color-secondary-soft: light-dark(#fff3d6, #2b1d08);
  --hui-color-secondary-soft-text: light-dark(#754500, #f7ca72);
  --hui-color-link: light-dark(#a83b00, #ff9a61);
  --hui-color-success: light-dark(#216b45, #6dd69f);
  --hui-color-success-soft: light-dark(#e7f5ec, #10291d);
  --hui-color-warning: light-dark(#795000, #f2c15c);
  --hui-color-warning-soft: light-dark(#fff1d1, #2d210c);
  --hui-color-danger: light-dark(#9d3030, #e3a0a0);
  --hui-color-danger-soft: light-dark(#f9eaea, #2a1717);
  --hui-color-danger-action: light-dark(#8f2f2f, #7c3035);
  --hui-color-on-danger: #ffffff;
  --hui-color-info: light-dark(#6b4b68, #d6a8cf);
  --hui-color-info-soft: light-dark(#f4eaf2, #281b27);
  --hui-color-focus: light-dark(#a83b00, #ff9a61);
  --hui-color-overlay: light-dark(rgb(29 24 20 / 56%), rgb(0 0 0 / 82%));
  --hui-color-chart-grid: light-dark(#e3ddd6, #232323);
  --hui-color-chart-primary: light-dark(#d95000, #ff8a4c);
  --hui-color-chart-secondary: light-dark(#9a6400, #f2b84b);
  --hui-color-chart-positive: light-dark(#24784f, #6dd69f);
  --hui-color-chart-negative: light-dark(#b23a36, #ff8c86);
  --hui-color-skeleton: light-dark(#e9e3dc, #171717);
  --hui-color-skeleton-shine: light-dark(#fbf9f6, #252525);
  --hui-color-scrollbar-track: light-dark(#f2eee8, #101010);
  --hui-color-scrollbar-thumb: light-dark(#867b70, #706a64);
  --hui-color-scrollbar-thumb-hover: light-dark(#6f645a, #8a827a);
  --hui-color-scrollbar-thumb-active: light-dark(#584f47, #aaa29a);
  --hui-shadow-color-small: light-dark(rgb(73 49 27 / 8%), rgb(0 0 0 / 32%));
  --hui-shadow-color-medium: light-dark(rgb(73 49 27 / 13%), rgb(0 0 0 / 46%));
  --hui-shadow-color-large: light-dark(rgb(73 49 27 / 20%), rgb(0 0 0 / 58%));
  --hui-shadow-small: 0 1px 2px var(--hui-shadow-color-small);
  --hui-shadow-medium: 0 14px 36px var(--hui-shadow-color-medium);
  --hui-shadow-large: 0 24px 70px var(--hui-shadow-color-large);
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --hui-duration-fast: 0ms;
    --hui-duration-standard: 0ms;
    --hui-duration-slow: 0ms;
    --hui-duration-spinner-cycle: 1ms;
    --hui-duration-skeleton-cycle: 1ms;
  }
}

@font-face {
  font-family: Heebo;
  src: url("./Heebo.9332b4b204f289d6.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --canvas: var(--hui-color-canvas);
  --surface: var(--hui-color-surface);
  --subtle: var(--hui-color-surface-subtle);
  --strong: var(--hui-color-surface-strong);
  --text: var(--hui-color-text);
  --muted: var(--hui-color-text-tertiary);
  --border: var(--hui-color-border);
  --accent: var(--hui-color-primary);
  --positive: var(--hui-color-success);
  --negative: var(--hui-color-danger);
  font-family: var(--hui-font-sans);
  color-scheme: dark;
}
* {
  box-sizing: border-box;
  scrollbar-width: auto;
  scrollbar-color: var(--hui-color-scrollbar-thumb)
    var(--hui-color-scrollbar-track);
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-size: 14px;
  line-height: 20px;
}
button,
input,
select,
summary {
  font: inherit;
}
button,
input,
select {
  min-height: 44px;
  color: var(--text);
  background: var(--subtle);
  border: 1px solid var(--hui-color-control-border);
  border-radius: var(--hui-radius-small);
  padding: 8px 12px;
}
button,
summary {
  cursor: pointer;
}
button {
  font-weight: 600;
  transition: background var(--hui-duration-fast);
}
button:hover,
select:hover {
  background: var(--strong);
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
input[type="checkbox"] {
  min-height: 22px;
  min-width: 22px;
  accent-color: var(--accent);
}
a {
  color: var(--hui-color-link);
}
:focus-visible {
  outline: 2px solid var(--hui-color-focus);
  outline-offset: 3px;
}
[hidden] {
  display: none !important;
}
h1,
h2,
p {
  margin: 0;
}
h1 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}
h2 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}
.muted {
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
}
.workspace {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--hui-workspace-data-max);
  padding: 24px;
  margin: auto;
  display: grid;
  gap: 16px;
  min-width: 0;
}
.workspace > section {
  min-width: 0;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--hui-color-primary);
}
.brand,
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  background: var(--hui-color-primary-soft);
  color: var(--accent);
  border-radius: 12px;
  font-size: 24px;
}
.readonly,
.tag {
  font-size: 12px;
  line-height: 18px;
  border: 1px solid var(--border);
  border-radius: var(--hui-radius-pill);
  padding: 4px 10px;
  color: var(--hui-color-text-secondary);
  white-space: nowrap;
}
.environment {
  display: flex;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.environment label {
  position: relative;
  cursor: pointer;
}
.environment input {
  position: absolute;
  opacity: 0;
  min-width: 0;
}
.environment span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--muted);
}
.environment input:checked + span {
  color: var(--hui-color-primary-soft-text);
  background: var(--hui-color-primary-soft);
}
.environment input:focus-visible + span {
  outline: 2px solid var(--hui-color-focus);
}
.statusbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
}
.status-main { display: contents; }
.status-details { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.status-context { display: grid; gap: 4px; min-width: 0; margin-inline-start: auto; }
#connection { color: var(--hui-color-text-secondary); min-width: 0; }
#desk-exposure { font-variant-numeric: tabular-nums; }
#desk-exposure:empty { display: none; }
#connection:before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-inline-end: 8px;
  background: var(--hui-color-warning);
}
#connection[data-state="ready"]:before {
  background: var(--positive);
}
.tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--border);
}
.tabs button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 12px 0;
  color: var(--muted);
}
.tabs button[aria-selected="true"] {
  color: var(--text);
  border-color: var(--accent);
}
#dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}
.summary-shell { container-type: inline-size; min-width: 0; }
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 8px;
}
.metric {
  grid-column: span 2;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 4px;
  min-width: 0;
}
.metric h2 {
  min-height: var(--summary-label-height, 0px);
  font-size: 14px;
  line-height: 20px;
  color: var(--hui-color-text-secondary);
  font-weight: 400;
}
.metric strong {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.metric:last-child { grid-column: 2 / span 2; }
.metric h2 > span, .metric p > span { display: block; }
.metric p { min-height: var(--summary-note-height, 0px); }
.metric--total {
  border-color: var(--hui-color-border-strong);
  background: var(--subtle);
}
@container (min-width: 1100px) {
  .metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  .metric, .metric:last-child { grid-column: auto; }
  .metric strong { font-size: 24px; line-height: 32px; }
}
.metric strong,
#chart-current {
  display: inline-block;
}
.positive {
  color: var(--positive);
}
.negative {
  color: var(--negative);
}
.metric strong, #chart-current, .cell-money, .ohlc dd {
  transition: color var(--hui-duration-slow) ease-out;
}
.panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 16px;
  min-width: 0;
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.section-head > div {
  display: grid;
  gap: 4px;
}
.section-head label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chart-panel {
  position: relative;
  container-type: inline-size;
}
#chart {
  height: 360px;
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
}
.chart-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chart-tools button {
  background: transparent;
  border-color: var(--border);
}
.chart-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 16px;
}
.chart-heading { display: grid; gap: 4px; min-width: 0; }
.chart-header .chart-tools { grid-column: 2; grid-row: 1; }
.chart-value-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}
@container (min-width: 800px) {
  .chart-header { display: flex; }
  .chart-heading { display: flex; align-items: baseline; gap: 12px; }
  .chart-header .chart-tools { margin-inline-start: auto; }
}
#chart-current {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}
.ohlc {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px;
  background: var(--subtle);
  border-block: 1px solid var(--border);
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.ohlc-context {
  display: grid;
  gap: 4px;
  min-width: 140px;
}
.ohlc-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  flex: 1;
  margin: 0;
}
.ohlc-values > div {
  display: grid;
  gap: 4px;
}
.ohlc-values dt {
  font-size: 12px;
  color: var(--muted);
}
.ohlc-values dd {
  margin: 0;
  white-space: nowrap;
  font-weight: 600;
}
.chart-help {
  padding: 8px 0 12px;
}
.chart-extrema {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 0;
  font-variant-numeric: tabular-nums;
}
.chart-extrema dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.chart-extrema dd { display: grid; gap: 4px; margin: 4px 0 0; overflow-wrap: anywhere; }
.touch-hint {
  display: none;
}
.tape-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.tape-head h2 {
  font-size: 14px;
  line-height: 20px;
}
.fill-tape {
  display: block;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  touch-action: pan-y pinch-zoom;
  user-select: none;
}
.fill-track {
  display: flex;
  width: max-content;
  animation: fill-stream var(--tape-duration, 30s) linear infinite;
  animation-play-state: paused;
}
.fill-group {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  padding-inline-end: 8px;
}
.fill-group .fill-tile {
  flex: 0 0 var(--trade-card-width, 288px);
  width: var(--trade-card-width, 288px);
}
.fill-wrap { pointer-events: none; }
html[data-motion="running"] .fill-tape[data-in-view="true"] .fill-track {
  animation-play-state: running;
}
html[data-motion="running"] .fill-tape:focus-visible .fill-track,
html[data-motion="running"] .fill-tape[data-dragging="true"] .fill-track {
  animation-play-state: paused;
}
@media (hover: hover) and (pointer: fine) {
  html[data-motion="running"] .fill-tape:hover .fill-track { animation-play-state: paused; }
}
@keyframes fill-stream {
  from { transform: translateX(0); }
  to { transform: translateX(var(--tape-distance)); }
}
.tape-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.stream-signal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.stream-signal[data-state="connected"] {
  color: var(--hui-color-primary-soft-text);
}
.stream-signal i {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 16px;
}
.stream-signal b {
  --signal-delay: 0ms;
  width: 3px;
  height: 12px;
  border-radius: var(--hui-radius-pill);
  background: currentColor;
  transform-origin: center;
}
html[data-motion="running"] .recent-trades:has(.fill-tape[data-in-view="true"]) .stream-signal b {
  animation: stream-signal calc(var(--hui-duration-spinner-cycle) * 1.5) ease-in-out var(--signal-delay) infinite alternate;
}
.stream-signal b:nth-child(2) { --signal-delay: -300ms; }
.stream-signal b:nth-child(3) { --signal-delay: -600ms; }
.stream-signal b:nth-child(4) { --signal-delay: -900ms; }
@keyframes stream-signal {
  from { transform: scaleY(0.3); opacity: 0.55; }
  to { transform: scaleY(1); opacity: 1; }
}
.recent-trades {
  min-width: 0;
}
.fill-tile {
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--hui-color-border-strong);
  background: var(--surface);
  border-radius: var(--hui-radius-medium);
  padding: 16px;
  font-variant-numeric: tabular-nums;
}
.fill-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.closed-label { color: var(--hui-color-text-secondary); font-size: 12px; line-height: 18px; }
.closed-label::before { content: "✓"; margin-inline-end: 6px; }
.trade-index { color: var(--hui-color-primary-soft-text); background: var(--hui-color-primary-soft); border-radius: var(--hui-radius-pill); padding: 2px 8px; font-size: 12px; line-height: 18px; }
.trade-name { font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.fill-side { color: var(--hui-color-text-secondary); font-size: 12px; line-height: 18px; }
.trade-result { display: grid; gap: 4px; margin-block: 4px; padding-block: 12px; border-block: 1px solid var(--border); }
.trade-result > span, .fill-tile time { font-size: 12px; line-height: 18px; }
.fill-price { font-size: 20px; line-height: 28px; font-weight: 600; overflow-wrap: anywhere; }
.section-head .section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.open-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 12px;
  background: var(--subtle);
  border-radius: var(--hui-radius-small);
}
.open-empty > span {
  font-size: 24px;
  color: var(--positive);
}
.open-empty p {
  margin-top: 4px;
}
.history-count {
  margin-bottom: 12px;
}
/* Snapshot motion is decorative. Financial values move only on actual changes. */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse at 15% 20%, var(--hui-color-primary-soft), transparent 45%),
    radial-gradient(ellipse at 85% 75%, var(--hui-color-primary-soft), transparent 40%);
  animation: desk-atmosphere 14s ease-in-out infinite alternate;
  animation-play-state: paused;
  opacity: .7;
}
html[data-motion="running"] body::before { animation-play-state: running; }
.statusbar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 10px 12px;
  border: 1px solid var(--hui-color-border-strong);
  border-radius: var(--hui-radius-small);
  background: var(--surface);
}
.desk-time { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; padding-inline-start: 12px; border-inline-start: 1px solid var(--border); }
#desk-clock { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.desk-signal { position: relative; width: 24px; height: 24px; flex: 0 0 24px; }
.desk-signal i, .desk-signal b { position: absolute; border: 1px solid var(--accent); border-radius: 50%; inset: 0; }
.desk-signal i { animation: desk-ring 3s ease-out infinite; animation-play-state: paused; }
.desk-signal i:nth-child(2) { animation-delay: -1s; }
.desk-signal i:nth-child(3) { animation-delay: -2s; }
.desk-signal b { inset: 9px; background: var(--accent); box-shadow: 0 0 20px var(--hui-color-primary-soft); }
.metric, .chart-panel { position: relative; isolation: isolate; overflow: hidden; }
.metric > *, .statusbar > *, .status-main > *, .status-details > * { position: relative; z-index: 1; }
.metric::before, .chart-panel::before {
  content: ""; position: absolute; inset: 0 auto auto 0; width: 65%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--hui-color-primary-soft-text), transparent);
  animation: desk-edge 3.6s linear infinite; animation-play-state: paused;
  pointer-events: none; z-index: 2;
}
.metric::after, .statusbar::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 80%; pointer-events: none; z-index: 0;
  background: linear-gradient(110deg, transparent 15%, var(--hui-color-primary-soft) 50%, transparent 85%);
  animation: desk-sweep 5s ease-in-out infinite; animation-play-state: paused; opacity: .85;
}
.metric:nth-child(2)::before, .metric:nth-child(2)::after { animation-delay: -.8s; }
.metric:nth-child(3)::before, .metric:nth-child(3)::after { animation-delay: -1.6s; }
.metric:nth-child(4)::before, .metric:nth-child(4)::after { animation-delay: -2.4s; }
.metric:nth-child(5)::before, .metric:nth-child(5)::after { animation-delay: -3.2s; }
html[data-motion="running"] [data-live-surface][data-in-view="true"]::before,
html[data-motion="running"] [data-live-surface][data-in-view="true"]::after,
html[data-motion="running"] [data-live-surface][data-in-view="true"] .desk-signal i { animation-play-state: running; }
html:not([data-motion="running"]) .desk-signal b { background: var(--muted); border-color: var(--muted); box-shadow: none; }
#trades-table { min-width: 0; }
#trades-table table { min-width: 1060px; }
#trades-table .table-scroll { border: 1px solid var(--border); border-radius: var(--hui-radius-small); }
#trades-table th, #trades-table td { padding: 8px; }
#trades-table td { white-space: nowrap; }
#trades-table .position-trade { text-align: start; justify-items: start; margin-inline: 0; min-width: 224px; }
#trades-table .position-trade strong { font-size: 14px; line-height: 20px; }
#trades-table .position-evidence { color: var(--hui-color-warning); }
#trades-table .detail-row td { white-space: normal; }
#trades-table .detail-card dd { overflow-wrap: anywhere; }
#trades-table .pagination { margin-top: 8px; }
#trades-table .pagination > div:not(:has(button:enabled)) { display: none; }
@media (max-width: 760px) {
  #trades-table table { min-width: 0; table-layout: fixed; }
  #trades-table tr:not(.detail-row) > :is(th, td):not(:first-child):not(:nth-child(4)) { display: none; }
  #trades-table tr:not(.detail-row) > :first-child { width: 56%; }
  #trades-table tr:not(.detail-row) > :nth-child(4) { width: 44%; }
  #trades-table .position-trade { min-width: 0; max-width: 100%; padding-inline: 0; }
  #trades-table td, #trades-table .cell-money { white-space: normal; overflow-wrap: anywhere; }
  #trades-table .position-trade strong { overflow-wrap: anywhere; }
  #trades-table th, #trades-table td { padding: 8px 4px; }
}
@keyframes desk-atmosphere { from { transform: translate3d(-4%, -3%, 0); } to { transform: translate3d(5%, 5%, 0); } }
@keyframes desk-ring { 0% { transform: scale(.2); opacity: .95; } 100% { transform: scale(1); opacity: 0; } }
@keyframes desk-edge { from { transform: translateX(-100%); } to { transform: translateX(255%); } }
@keyframes desk-sweep { from { transform: translateX(-120%); } to { transform: translateX(180%); } }
@media (max-width: 760px) {
  .statusbar { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 6px 8px; }
  .desk-signal { width: 20px; height: 20px; }
  .desk-signal b { inset: 7px; }
  #connection { grid-column: 2; grid-row: 1; }
  .status-details { display: contents; }
  #desk-exposure { grid-column: 3; grid-row: 1; text-align: end; }
  .desk-time { grid-column: 3; grid-row: 2; padding-inline-start: 0; border-inline-start: 0; }
  .status-context { grid-column: 1 / -1; grid-row: 3; margin-inline-start: 0; padding-top: 6px; border-top: 1px solid var(--border); }
}
.notice {
  background: var(--hui-color-warning-soft);
  border: 1px solid var(--border);
  padding: 12px 16px;
  border-radius: 8px;
  color: var(--hui-color-warning);
  font-size: 12px;
}
.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.toolbar input {
  flex: 1;
  min-width: 0;
  max-width: 360px;
}
.table-scroll {
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
}
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
th,
td {
  text-align: center;
  vertical-align: middle;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
th {
  background: var(--subtle);
  font-size: 12px;
  position: sticky;
  top: 0;
  z-index: var(--hui-z-sticky);
  white-space: nowrap;
}
.th-cluster {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
th button {
  border: 0;
  background: transparent;
  padding: 8px;
  min-width: 44px;
  white-space: normal;
}
th .filter summary {
  display: grid;
  place-items: center;
  min-height: 44px;
  min-width: 44px;
  border: 1px solid transparent;
  border-radius: 8px;
  list-style: none;
}
.filter[open] summary,
.filter.active summary {
  background: var(--hui-color-primary-soft);
  color: var(--hui-color-primary-soft-text);
}
.filterbox {
  position: fixed;
  z-index: var(--hui-z-popover);
  width: 250px;
  max-width: calc(100vw - 24px);
  max-height: 65vh;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--hui-color-border-strong);
  border-radius: 12px;
  background: var(--strong);
  box-shadow: var(--hui-shadow-medium);
  text-align: start;
}
.filterbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  white-space: normal;
}
.filterbox input:not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
}
.filterbox .bounds {
  display: grid;
  gap: 8px;
}
.filterbox .buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cell-money {
  white-space: nowrap;
}
.cell-money small,
td small {
  display: block;
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
  margin-top: 4px;
}
.coin-button {
  border: 0;
  background: transparent;
  display: grid;
  gap: 4px;
  padding: 4px 8px;
  margin: auto;
}
.coin-button strong {
  font-weight: 600;
}
.coin-button span {
  font-size: 12px;
  color: var(--muted);
}
.status-pill {
  display: inline-block;
  font-size: 12px;
  color: var(--hui-color-text-secondary);
  background: var(--strong);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 8px;
}
.status-pill.open {
  color: var(--hui-color-primary-soft-text);
  background: var(--hui-color-primary-soft);
}
.detail-row > td {
  padding: 16px;
  background: var(--subtle);
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 8px;
}
.detail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.detail-card dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  margin: 0;
}
.detail-card :is(strong, dt, dd) { box-sizing: content-box; min-block-size: var(--detail-slot, 0px); }
.detail-card :is(strong, dt, dd) > span { display: block; }
.detail-card dt {
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}
.detail-card dd {
  margin: 0;
  padding-block-end: 8px;
  font-size: 16px;
  line-height: 24px;
  overflow-wrap: anywhere;
}
@media (min-width: 1200px) {
  .detail-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  color: var(--muted);
  font-size: 12px;
}
.pagination > div {
  display: flex;
  gap: 8px;
}
.empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--muted);
}
.loading-state {
  display: grid;
  justify-items: center;
  gap: 20px;
  padding: 32px 16px;
  text-align: center;
  overflow: hidden;
}
.loading-market {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 112px;
  block-size: 112px;
  isolation: isolate;
}
.loading-orbit {
  position: absolute;
  inset: 0;
  border: 1px solid var(--border);
  border-block-start-color: var(--accent);
  border-radius: 50%;
  animation: loading-orbit 2.4s linear infinite paused;
}
.loading-candles { display: flex; align-items: center; gap: 8px; block-size: 64px; }
.loading-candles i {
  position: relative;
  inline-size: 7px;
  block-size: 24px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleY(.65);
  animation: loading-candle 1.6s ease-in-out infinite alternate paused;
}
.loading-candles i::before {
  content: "";
  position: absolute;
  inset-block: -8px;
  inset-inline-start: 3px;
  inline-size: 1px;
  background: var(--hui-color-primary-soft-text);
  z-index: -1;
}
.loading-candles i:nth-child(2) { block-size: 36px; animation-delay: -.3s; }
.loading-candles i:nth-child(3) { block-size: 46px; animation-delay: -.6s; }
.loading-candles i:nth-child(4) { block-size: 30px; animation-delay: -.9s; }
.loading-candles i:nth-child(5) { block-size: 40px; animation-delay: -1.2s; }
.loading-scan {
  position: absolute;
  inset-inline: 16px;
  inset-block-start: 50%;
  block-size: 1px;
  background: var(--hui-color-primary-soft-text);
  opacity: .5;
  animation: loading-scan 2s ease-in-out infinite alternate paused;
}
.loading-copy { display: grid; gap: 4px; max-inline-size: 360px; }
.loading-copy strong { font-size: 18px; line-height: 26px; font-weight: 600; }
.loading-copy p { color: var(--hui-color-text-secondary); font-size: 14px; line-height: 20px; }
.loading-track {
  inline-size: 160px;
  block-size: 3px;
  border-radius: var(--hui-radius-small);
  background: var(--strong);
  overflow: hidden;
}
.loading-track span {
  display: block;
  inline-size: 40%;
  block-size: 100%;
  background: var(--accent);
  animation: loading-travel 1.8s ease-in-out infinite alternate paused;
}
.loading-state[data-active="true"] :is(.loading-orbit, .loading-candles i, .loading-scan, .loading-track span) { animation-play-state: running; }
@keyframes loading-orbit { to { transform: rotate(360deg); } }
@keyframes loading-candle { to { transform: scaleY(1) translateY(-4px); } }
@keyframes loading-scan { from { transform: translateY(-30px); } to { transform: translateY(30px); } }
@keyframes loading-travel { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.chart-empty {
  padding: 32px 12px;
  color: var(--muted);
}
.footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  padding: 4px 0 16px;
}
.sr-only,
.skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.skip:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  background: var(--strong);
  padding: 12px;
}
#login {
  display: flex;
  align-items: center;
  gap: 12px;
}
#login label {
  display: flex;
  align-items: center;
  gap: 12px;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: var(--hui-color-scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--hui-color-scrollbar-thumb);
  border: 3px solid var(--hui-color-scrollbar-track);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--hui-color-scrollbar-thumb-hover);
}
::-webkit-scrollbar-corner {
  background: var(--subtle);
}
@media (max-width: 760px) {
  .workspace {
    padding: 16px;
  }
  .header {
    align-items: flex-start;
  }
  .header-right {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .readonly {
    display: none;
  }
  .environment span {
    padding: 8px 12px;
  }
  .footer {
    flex-wrap: wrap;
  }
  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ohlc-context {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }
  .ohlc-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .ohlc {
    gap: 12px;
  }
  .tape-head {
    flex-wrap: wrap;
    gap: 4px;
  }
  .section-head {
    flex-wrap: wrap;
  }
  .tabs {
    gap: 20px;
  }
  .tabs button {
    font-size: 14px;
  }
  .brand {
    gap: 8px;
  }
  .brand h1 {
    font-size: 20px;
    line-height: 28px;
  }
  .brand .muted {
    display: none;
  }
  #chart {
    height: 280px;
  }
  .pagination {
    flex-wrap: wrap;
  }
  #login,
  #login label {
    flex-wrap: wrap;
  }
}
@media (hover: none) and (pointer: coarse) {
  .touch-hint { display: inline; }
  .pointer-hint { display: none; }
}
@media (max-width: 380px) {
  .workspace {
    padding: 12px;
  }
  .mark {
    display: none;
  }
  .header {
    gap: 8px;
  }
  .environment span {
    padding: 8px;
  }
  .metric {
    padding: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fill-wrap { display: none; }
  .fill-track { transform: translateX(var(--tape-shift, 0px)); }
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  * {
    scrollbar-color: auto;
  }
}