:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #0d111b; color: #e8edf4; }
body { min-width: 0; }
.terminal { width: 100%; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) 240px; background: #0d111b; }
.chart-panel { min-height: 0; display: grid; grid-template-rows: 54px minmax(0, 1fr) 42px; }
.price-row { padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #222a37; background: #111722; }
.price-row > div { display: flex; align-items: center; gap: 10px; }
.pair-icon { width: 26px; height: 26px; display: grid; border-radius: 50%; background: linear-gradient(145deg,#f65c34,#8bac59); color: white; font-weight: 800; place-items: center; }
.price-row strong { font-size: 14px; }
.price-row small { color: #7f8998; font-size: 12px; }
.quote { flex-direction: column; align-items: flex-end !important; gap: 2px !important; }
.quote strong { font-size: 15px; }
.quote span { color: #7f8998; font-size: 11px; }
.quote span.up { color: #49c884; }
.quote span.down { color: #f2646a; }
.quote.is-tick { animation: quote-tick .7s ease-out; }
.canvas-wrap { position: relative; min-height: 0; overflow: hidden; background: #0d111b; }
#price-chart { width: 100%; height: 100%; display: block; }
.chart-state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 13px; background: #0d111b; color: #9ba4b2; transition: opacity .3s, visibility .3s; }
.chart-state span { width: 32px; height: 32px; border: 2px solid #2d3645; border-top-color: #9fc164; border-radius: 50%; animation: spin .8s linear infinite; }
.chart-state.is-hidden { visibility: hidden; opacity: 0; }
.chart-state.is-error span { display: none; }
.chart-state.is-error p { max-width: 260px; line-height: 1.5; text-align: center; }
.range-row { padding: 0 18px; display: flex; align-items: center; gap: 6px; border-top: 1px solid #222a37; color: #7f8998; font-size: 11px; }
.range-row button { min-width: 38px; padding: 6px 9px; border: 0; border-radius: 7px; background: transparent; color: #7f8998; font: inherit; cursor: pointer; transition: color .2s, background .2s, transform .2s; }
.range-row button:hover { background: #18202d; color: #d5dce6; }
.range-row button:active { transform: scale(.94); }
.range-row button.active { background: #202838; color: #aeca7c; }
.range-row button:focus-visible { outline: 2px solid #9fc164; outline-offset: 2px; }
.range-row button:disabled { cursor: wait; opacity: .65; }
.range-row a { margin-left: auto; color: #9fc164; }
.trades-panel { min-height: 0; overflow: hidden; border-top: 1px solid #303847; background: #0b0f16; }
.trades-title { height: 40px; padding: 0 18px; display: flex; align-items: center; gap: 12px; }
.trades-title strong { font-size: 13px; }
.trades-title span { color: #788292; font-size: 11px; }
.trade-head, .trade-row { display: grid; grid-template-columns: 1fr .8fr 1fr 1.15fr 1.25fr 1fr; align-items: center; }
.trade-head { height: 30px; padding: 0 18px; border-block: 1px solid #202735; color: #727d8d; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.trade-list { height: calc(100% - 70px); overflow: hidden; }
.trade-row { height: 34px; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.035); color: #aeb6c2; font-size: 11px; animation: trade-in .45s both; }
.trade-row .buy { color: #4bd18b; }
.trade-row .sell { color: #f36a70; }
.trade-row a { overflow: hidden; color: #8893a3; text-overflow: ellipsis; white-space: nowrap; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes quote-tick { 35% { filter: drop-shadow(0 0 10px currentColor); transform: translateY(-2px); } }
@keyframes trade-in { from { opacity: 0; transform: translateY(-7px); } }
@media (max-width: 480px) {
  .terminal { grid-template-rows: minmax(0, 1fr); }
  .trades-panel { display: none; }
  .chart-panel { grid-template-rows: 48px minmax(0, 1fr) 38px; }
  .price-row { padding: 0 10px; }
  .price-row small { display: none; }
  .price-row strong { font-size: 11px; }
  .pair-icon { width: 22px; height: 22px; font-size: 11px; }
  .range-row { padding: 0 10px; gap: 9px; font-size: 9px; }
  .range-row a { font-size: 0; }
  .range-row a::after { content: "↗"; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}