/* GENERATED by scripts/sync-market.mjs from legacy/cot-v2/public/css — do not edit here. */
.mkt { font-size: 16px; line-height: normal; }
.mkt {--bg: #0b0d10; --bg-alt: #0e1014; --surface: #12151a; --surface-2: #1a1d23;
  --border: #262b33; --border-soft: #1d2128; --text: #f4f1ea; --text-2: #aeb3ba;
  --muted: #9aa0a8; --accent: #e3b341; --accent-ink: #14110a; --up: #3fb68b; --down: #e0605e;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  
  --panel: var(--surface); --panel-2: var(--surface-2); --gold: var(--accent); --gold-soft: var(--accent);
  --long: var(--up); --short: var(--down); --grid: var(--border-soft);
  --r-btn: 10px; --r-card: 14px;}
.mkt, .mkt * {box-sizing: border-box;}
.mkt {margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans);}
.mkt {padding: 20px 16px 60px; max-width: 1680px; margin: 0 auto; overflow-x: hidden;}
.mkt a {color: inherit;}
.mkt button, .mkt input, .mkt select {font: inherit;}
.mkt :where(a, button, select, input, [tabindex]):focus-visible {outline: 2px solid var(--accent); outline-offset: 2px;}
.mkt .sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}
.mkt .icon {display: block; flex: none;}
.mkt .topline {display: flex; align-items: center; gap: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--border); padding-bottom: 14px; min-width: 0;}
.mkt .brand {display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; opacity: .9; transition: opacity .2s; flex: none;}
.mkt .brand:hover, .mkt .brand:focus-visible {opacity: 1;}
.mkt .brand-crop {display: block; overflow: hidden; height: 30px; width: 181px;}
.mkt .brand-crop img {display: block; height: 30px; width: auto; max-width: none;}
.mkt .switch {position: relative; display: inline-flex; isolation: isolate; padding: 3px; border: 1px solid var(--border); border-radius: calc(var(--r-btn) + 3px); background: var(--bg-alt); flex: none;}
.mkt .switch a {position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 96px; padding: 0 14px; border-radius: var(--r-btn); color: var(--text-2); text-decoration: none; font: 600 12.5px var(--mono); letter-spacing: .6px; text-transform: uppercase; transition: color .2s;}
.mkt .switch a:hover {color: var(--text);}
.mkt .switch a[aria-current='page'] {background: var(--accent); color: var(--accent-ink);}
.mkt .switch-pill {position: absolute; top: 3px; left: 3px; width: 96px; height: 44px; border-radius: var(--r-btn); border: 1px solid rgb(227 179 65 / .25); background: rgb(227 179 65 / .08); z-index: -1; pointer-events: none; opacity: 0; transition: opacity .22s, transform .22s ease-out;}
@media (hover: hover){
.mkt .switch:has(a:not([aria-current='page']):hover) .switch-pill {opacity: 1;}
.mkt .switch:has(a:nth-of-type(2):hover) .switch-pill {transform: translateX(96px);}
}
.mkt .switch a .icon {width: 16px; height: 16px;}
.mkt .status {display: flex; align-items: center; gap: 12px; margin-left: auto; font: 12px var(--mono); color: var(--muted); min-width: 0;}
.mkt .status b {color: var(--text); font-weight: 600;}
.mkt .icon-btn {display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; justify-content: center; background: transparent; border: 1px solid var(--border); color: var(--text); font: 12px var(--mono); padding: 0 12px; border-radius: var(--r-btn); cursor: pointer;}
.mkt .icon-btn:hover {border-color: var(--accent); color: var(--accent);}
.mkt .icon-btn:disabled {opacity: .4; cursor: default;}
.mkt .icon-btn .icon {width: 18px; height: 18px;}
.mkt .icon-btn[aria-busy='true'] .icon {animation: spin 1s linear infinite;}
@keyframes spin{ to { transform: rotate(360deg); } }
.mkt .updated {font: 11px/18px var(--mono); color: var(--muted); margin: -8px 0 14px; min-height: 18px;}
.mkt .updated.warn {color: var(--accent);}
.mkt .tabs {display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap;}
.mkt .tab {font: 600 12px var(--mono); padding: 0 14px; min-height: 44px; border-radius: var(--r-btn); border: 1px solid var(--border); background: var(--panel); color: var(--muted); cursor: pointer; letter-spacing: .5px;}
.mkt .tab:hover {color: var(--text); border-color: rgb(227 179 65 / .35);}
.mkt .tab[aria-pressed='true'] {color: var(--accent); border-color: var(--accent); background: rgb(227 179 65 / .1);}
.mkt .tab .code {opacity: .6;}
.mkt .market-select {display: none; position: relative; margin-bottom: 16px;}
.mkt .market-select select {appearance: none; width: 100%; min-height: 48px; padding: 0 44px 0 14px; border-radius: var(--r-btn); border: 1px solid var(--accent); background: var(--panel); color: var(--text); font: 600 14px var(--mono); letter-spacing: .5px;}
.mkt .market-select .icon {position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--accent); pointer-events: none;}
.mkt #app {min-height: 100vh;}
.mkt .panel {background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px 20px; margin-bottom: 16px; min-width: 0;}
.mkt .panel h2 {margin: 0 0 14px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;}
.mkt .panel h2 .tag {color: var(--gold-soft);}
.mkt .drag-handle {cursor: grab; color: var(--muted); font-size: 13px; user-select: none; display: inline-block;}
.mkt .drag-handle:active {cursor: grabbing;}
.mkt .draggable-panel.dragging {opacity: .4; border: 1px dashed var(--gold);}
.mkt .loading, .mkt .err {font: 13px var(--mono); color: var(--muted);}
.mkt .err {color: var(--short);}
.mkt .h180 {height: 180px;}
.mkt .h280 {height: 280px;}
.mkt .h320 {height: 320px;}
.mkt .h400 {height: 400px;}
.mkt .h440 {height: 440px;}
.mkt canvas {width: 100% !important;}
.mkt .tip {display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; margin: -4px 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: help; vertical-align: middle; flex: none; position: relative;}
.mkt .tip::before {content: ''; position: absolute; inset: -11px;}
.mkt .tip .icon {width: 16px; height: 16px;}
.mkt .tip:hover, .mkt .tip[aria-expanded='true'] {color: var(--accent);}
.mkt .tip-layer {position: fixed; z-index: 50; max-width: min(320px, calc(100vw - 24px)); padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font: 13px/1.5 var(--sans); letter-spacing: 0; text-transform: none; box-shadow: 0 8px 24px rgb(0 0 0 / .35);}
.mkt .tip-layer[hidden] {display: none;}
.mkt .tip-layer b {display: block; font: 600 11px var(--mono); letter-spacing: .6px; color: var(--accent); margin-bottom: 4px; text-transform: none;}
.mkt .footer {font: 11px/1.6 var(--mono); color: var(--muted); text-align: center; margin-top: 24px;}
.mkt .social-links {display: flex; justify-content: center; gap: 12px; margin-top: 18px;}
.mkt .social-links a {display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--muted); transition: color .15s;}
.mkt .social-links a:hover, .mkt .social-links a:focus-visible {color: var(--accent);}
.mkt .social-links svg {width: 22px; height: 22px;}
@media (max-width: 767px){
.mkt {padding: 12px 12px 48px;}
.mkt .topline {gap: 8px; padding-bottom: 10px; margin-bottom: 12px; flex-wrap: nowrap;}
.mkt .brand-crop {width: 30px;}
.mkt .switch a {min-width: 0; padding: 0 10px; min-height: 44px; font-size: 11.5px; letter-spacing: .3px;}
.mkt .switch a .icon {display: none;}
.mkt .switch-pill {display: none;}
.mkt .status {gap: 6px;}
.mkt .status .rd-label {display: none;}
.mkt .icon-btn .btn-text {display: none;}
.mkt .icon-btn {padding: 0; width: 44px;}
.mkt .tabs {display: none;}
.mkt .market-select {display: block;}
.mkt .updated {margin: 0 0 12px;}
.mkt .panel {padding: 14px 12px; border-radius: 14px;}
}
@media (prefers-reduced-motion: reduce){
.mkt, .mkt *, .mkt *::before, .mkt *::after {transition: none !important; animation: none !important;}
}

.mkt[data-mkt-root] { max-width: 1232px; padding: 20px 32px 60px; }
@media (max-width: 800px) { .mkt[data-mkt-root] { padding: 12px 24px 48px; } }