/* Critical-path trade skeleton — token subset mirrors theme-dark/light.css (GitLab #416). */
:root,
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg-0: #0e0908;
  --ink: #fff7ee;
  --ink-subtle: rgba(255, 212, 168, 0.76);
  --line: rgba(255, 218, 171, 0.12);
  --bootstrap-panel-bg: rgba(34, 21, 17, 0.5);
  --bootstrap-shimmer: rgba(255, 212, 168, 0.14);
  --bootstrap-shimmer-soft: rgba(255, 212, 168, 0.1);
  --bootstrap-shimmer-block: rgba(255, 212, 168, 0.12);
}
:root[data-theme='light'] {
  color-scheme: light;
  --bg-0: #f4e0cb;
  --ink: #43261b;
  --ink-subtle: rgba(125, 77, 52, 0.76);
  --line: rgba(167, 108, 71, 0.18);
  --bootstrap-panel-bg: rgba(255, 255, 255, 0.72);
  --bootstrap-shimmer: rgba(125, 77, 52, 0.14);
  --bootstrap-shimmer-soft: rgba(125, 77, 52, 0.1);
  --bootstrap-shimmer-block: rgba(125, 77, 52, 0.12);
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg-0);
}
#trade-bootstrap-shell {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 16px 12px 120px;
  font-family: system-ui, sans-serif;
  color: color-mix(in srgb, var(--ink) 90%, transparent);
}
#trade-bootstrap-shell * {
  box-sizing: border-box;
}
.trade-bootstrap-title {
  height: 22px;
  width: 72px;
  border-radius: 14px;
  margin-bottom: 10px;
  background: var(--bootstrap-shimmer);
  animation: trade-bootstrap-pulse 1.2s ease-in-out infinite;
}
.trade-bootstrap-line {
  height: 14px;
  width: min(100%, 320px);
  border-radius: 14px;
  margin-bottom: 18px;
  background: var(--bootstrap-shimmer-soft);
  animation: trade-bootstrap-pulse 1.2s ease-in-out infinite;
}
.trade-bootstrap-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bootstrap-panel-bg);
  padding: 12px;
  margin-bottom: 12px;
}
.trade-bootstrap-grid {
  display: grid;
  gap: 12px;
  min-height: min(72vh, 640px);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .trade-bootstrap-grid {
    grid-template-columns: 24% 52% 24%;
  }
}
.trade-bootstrap-block {
  min-height: 280px;
  border-radius: 14px;
  background: var(--bootstrap-shimmer-block);
  animation: trade-bootstrap-pulse 1.2s ease-in-out infinite;
}
@keyframes trade-bootstrap-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.9;
  }
}