/* Scoped additions; the existing docked panel/bottom sheet owns positioning. */
.koy-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.koy-tabs button { min-height: 44px; padding: 4px 1px; font-size: 11px; }
.trade-box { min-width: 0; }
.trade-note { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 8px 2px; overflow-wrap: anywhere; }
.trade-options { flex-wrap: wrap; }
.trade-options button { flex: 1 1 55px; min-height: 44px; padding: 4px; }
.trade-prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; font-size: 12px; }
.trade-prices > div { background: rgba(139,90,43,.08); border-radius: 6px; padding: 8px 4px; text-align: center; }
.trade-prices small, .trade-district small { display: block; margin-top: 4px; color: var(--muted); }
.trade-district { align-items: center; }
.trade-district > b { flex: 1; min-width: 0; text-align: center; font-size: 12px; }
.trade-district button { flex: 0 0 auto; min-height: 44px; padding: 4px; }
.trade-quote { flex-wrap: wrap; }
.trade-quote .grow { flex-basis: 180px; }
.trade-quote button { min-height: 44px; }
@media (max-width: 420px) {
  .trade-quote button { width: 100%; }
}