/* /us: keep every instrument, but make the market readable before it becomes exhaustive. */
.page-us #us-board {
  position: relative;
  overflow: hidden;
  padding: 28px 30px 26px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--panel), color-mix(in srgb, var(--accent) 5%, var(--panel)));
  box-shadow: 0 22px 54px rgba(31, 71, 122, .10);
}
.page-us #us-board::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  transform: scaleX(.04);
  transform-origin: left;
  background: linear-gradient(90deg, transparent, var(--accent) 18%, transparent 82%);
  animation: us-current-line 720ms cubic-bezier(.16, 1, .3, 1) 100ms forwards;
}
.page-us #us-board > header { margin-bottom: 20px; }
.page-us #us-board > header h1 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.03em; }

.page-us :is(#board, #uso-grid, #commodity-board, #smm-grid, #dcb-grid) {
  gap: 12px;
}
.page-us #board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-us :is(#uso-grid, #smm-grid, #dcb-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-us #commodity-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.page-us :is(#board, #commodity-board, #smm-grid, #dcb-grid) > .tile,
.page-us #uso-grid > .kro-card {
  min-height: 164px;
  padding: 21px 22px;
  border: 0;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(31, 71, 122, .07);
}
.page-us :is(#board, #commodity-board, #smm-grid, #dcb-grid) > a.tile:hover,
.page-us #uso-grid > .kro-card:hover {
  z-index: 1;
  background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
  box-shadow: 0 16px 32px rgba(31, 71, 122, .10);
  transform: translateY(-2px);
}
.page-us :is(#commodity-board, #smm-grid, #dcb-grid) .tile-value,
.page-us #uso-grid .kro-price { font-size: clamp(25px, 2.3vw, 34px); }
.page-us :is(#commodity-board, #smm-grid, #dcb-grid) .tile-foot { margin-top: 4px; }

@keyframes us-current-line {
  from { transform: scaleX(.04); filter: blur(5px); opacity: .35; }
  to { transform: scaleX(1); filter: blur(0); opacity: 1; }
}

@media (max-width: 980px) {
  .page-us :is(#uso-grid, #smm-grid, #dcb-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .page-us #us-board { padding: 22px 18px 18px; }
  .page-us #us-board > header { margin-bottom: 16px; }
  .page-us :is(#board, #uso-grid, #commodity-board, #smm-grid, #dcb-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .page-us :is(#board, #commodity-board, #smm-grid, #dcb-grid) > .tile,
  .page-us #uso-grid > .kro-card { min-height: 144px; padding: 15px; border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-us #us-board::before { animation: none; transform: none; filter: none; opacity: 1; }
}