@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap";.app{min-height:100vh;height:100vh;background:var(--bg-dark);color:var(--text-main);font-family:var(--font-family);display:flex;flex-direction:column;overflow:hidden}.header{background:var(--bg-dark);border-bottom:1px solid var(--border-color);padding:8px 16px;display:flex;justify-content:space-between;align-items:center;z-index:10;height:48px}.header-left{display:flex;align-items:center;gap:16px}.header-center{flex:1;display:flex;justify-content:center;align-items:stretch;gap:24px}.header-center a,.header-center button{background:transparent;color:var(--text-muted);border:none;padding:0;font-family:var(--font-family);font-size:14px;font-weight:500;cursor:pointer;position:relative;transition:color .2s ease;text-decoration:none;display:flex;align-items:center;white-space:nowrap}.header-center a:hover,.header-center button:hover,.header-center a.active{color:var(--up-green)}.header-center a.active:after{content:"";position:absolute;bottom:-6px;left:0;right:0;height:2px;background:var(--up-green)}.logo{font-size:18px;font-weight:700;color:var(--up-green);letter-spacing:1px}.header-logo{height:26px;width:auto;display:block;flex-shrink:0}.header-right{display:flex;align-items:center;gap:12px}.subscribe-btn-header{background:transparent;color:var(--up-green);border:1px solid rgba(0,255,65,.35);padding:4px 10px;border-radius:4px;font-family:var(--font-family);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .2s ease}.subscribe-btn-header:hover{background:#00ff4114;border-color:var(--up-green)}.header-user{display:flex;align-items:center;gap:8px}.header-username{font-size:12px;color:#ffffff80;white-space:nowrap}.logout-btn{background:transparent;color:#474d57;border:1px solid #2b3139;padding:4px 10px;border-radius:4px;font-family:var(--font-family);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.logout-btn:hover{color:#ff4d4f;border-color:#ff4d4f66;background:#ff4d4f0f}.logs-drawer-button{background:transparent;color:#848e9c;border:1px solid #2b3139;padding:4px 10px;border-radius:4px;font-family:var(--font-family);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .2s ease}.logs-drawer-button:hover{color:var(--text-main);border-color:#fff3;background:#ffffff0a}.main-content{flex:1;display:grid;grid-template-columns:1fr 300px;grid-template-rows:1fr;gap:8px;padding:8px;overflow:hidden;min-height:0;max-height:calc(100vh - 150px)}.panel{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:4px;display:flex;flex-direction:column;overflow:hidden}.full-panel{flex:1;overflow:hidden}.panel-header{background:var(--bg-dark);padding:8px 12px;border-bottom:1px solid var(--border-color);font-weight:600;font-size:13px;color:var(--text-muted)}.panel-content{flex:1;overflow-y:auto}.bottom-panel{flex:0 0 auto;margin:0 8px 8px;height:180px;max-height:180px}.data-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border-dim)}.label{color:var(--text-muted);font-size:12px}.value{color:var(--text-main);font-weight:500;font-size:13px}.logs-drawer{position:fixed;right:0;top:0;bottom:0;width:400px;background:#1e2329;border-left:1px solid var(--border-color);z-index:1000;display:flex;flex-direction:column;box-shadow:-4px 0 12px #00000080}.drawer-header{padding:12px 16px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--text-main)}.drawer-content{flex:1;padding:16px;overflow-y:auto;font-size:12px}.log-line{padding:4px 0;border-bottom:1px solid var(--border-dim);color:var(--text-muted)}.okx-market-analysis{display:flex;flex-direction:column;flex:1;height:100%;overflow:hidden;background:var(--bg-dark)}.market-main-wrapper{display:flex;flex-direction:column;flex:1;overflow:hidden;gap:1px;background:var(--border-color)}.market-top-section{flex:1;display:flex;overflow:hidden;gap:1px;background:var(--border-color)}.chart-container-okx{flex:1;background:var(--bg-dark);min-width:0}.sidebar-okx{width:320px;background:var(--bg-dark);display:flex;flex-direction:column;border-left:1px solid var(--border-color);flex-shrink:0}.sidebar-tabs-header{display:flex;background:var(--bg-dark);border-bottom:1px solid var(--border-color)}.sidebar-tabs-header button{flex:1;padding:10px;background:transparent;border:none;color:var(--text-muted);font-size:13px;font-weight:500;cursor:pointer;position:relative;transition:all .2s}.sidebar-tabs-header button:hover{color:var(--text-main)}.sidebar-tabs-header button.active{color:var(--text-main);font-weight:600}.sidebar-tabs-header button.active:after{content:"";position:absolute;bottom:0;left:20%;right:20%;height:2px;background:var(--accent-white)}.sidebar-tab-content{flex:1;overflow:hidden}.clickable{cursor:pointer;transition:background .1s}.clickable:hover{background:#ffffff0d!important}@media (max-width: 1024px){.sidebar-okx{width:280px}.header-logo{height:26px}.header-center{gap:16px}}@media (max-width: 768px){.header{padding:0 8px;height:48px;gap:4px}.header-left{flex-shrink:0}.header-logo{height:22px}.header-center{gap:16px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;justify-content:flex-start;padding:0 8px;flex-shrink:1;min-width:0}.header-center::-webkit-scrollbar{display:none}.header-center a,.header-center button{font-size:12px;flex-shrink:0}.header-right{gap:6px;flex-shrink:0;flex:1;justify-content:flex-end}.subscribe-btn-header{padding:2px 8px;font-size:11px}.logs-drawer-button{display:none}.header-user{padding-left:8px;margin-left:0;gap:6px;border-left:1px solid var(--border-color)}.header-username{display:inline-block;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.logout-btn{padding:2px 8px;font-size:11px;height:28px}.market-main-wrapper,.market-top-section{flex-direction:column;overflow-y:auto;gap:0}.chart-container-okx{flex:none;height:50vh;min-height:350px;border-bottom:1px solid var(--border-color)}.sidebar-okx{width:100%!important;height:auto;border-left:none;flex:1}.sidebar-tab-content{height:400px}.logs-drawer{width:90%}.header-user span:first-child{font-size:14px}}@media (max-width: 375px){.header-right .logs-drawer-button{display:none}.header-center{gap:12px}}.connection-status{display:flex;align-items:center;gap:8px}.status-indicator{display:flex;align-items:center;gap:5px}.status-icon{font-size:10px!important;line-height:1!important;display:inline!important;height:auto}.status-text{font-size:12px;font-weight:500;text-transform:none;letter-spacing:0}.status-details{display:flex;align-items:center;margin-left:0}.detail-item{font-size:12px;color:#474d57}.toggle-button{background:transparent;color:#848e9c;border:1px solid #2b3139;padding:4px 10px;border-radius:4px;font-family:inherit;font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .2s ease;margin-left:0}.toggle-button:hover:not(:disabled){color:var(--text-main, #e2e8f0);border-color:#fff3;background:#ffffff0a}.toggle-button:disabled{opacity:.4;cursor:not-allowed}.status-connected .status-icon,.status-connected .status-text{color:#00ff41}.status-connecting .status-icon,.status-connecting .status-text,.status-reconnecting .status-icon,.status-reconnecting .status-text{color:#f0a040;animation:status-blink 1.2s ease-in-out infinite}.status-disconnected .status-icon,.status-disconnected .status-text{color:#474d57}.status-error .status-icon,.status-error .status-text{color:#f6465d}@keyframes status-blink{0%,to{opacity:1}50%{opacity:.4}}@media (max-width: 768px){.connection-status{gap:5px}.status-text{font-size:11px}.status-details{display:none}.toggle-button{padding:2px 8px;font-size:11px}}.instrument-info-bar{display:flex;align-items:center;padding:8px 20px;background:var(--bg-dark);border-bottom:1px solid var(--border-color);gap:40px;height:56px}.iib-instrument-main{display:flex;align-items:center;gap:20px}.iib-symbol-name{font-size:20px;font-weight:700;color:var(--text-main);margin:0}.iib-price-container{display:flex;flex-direction:column}.iib-last-price{font-size:18px;font-weight:700;line-height:1.2}.iib-last-price.up{color:var(--up-green)}.iib-last-price.down{color:var(--down-red)}.iib-usd-equivalent{font-size:12px;color:var(--text-muted)}.iib-info-stats{display:flex;gap:32px}.iib-stat-item{display:flex;flex-direction:column;gap:2px}.iib-stat-label{font-size:12px;color:var(--text-muted);white-space:nowrap}.iib-stat-value{font-size:13px;font-weight:500;color:var(--text-main)}.iib-stat-value.up{color:var(--up-green)}.iib-stat-value.down{color:var(--down-red)}.iib-symbol-wrapper{position:relative;-webkit-user-select:none;user-select:none}.iib-symbol-select{display:flex;align-items:center;gap:6px;background:transparent;color:var(--up-green);border:1px solid rgba(0,255,65,.3);padding:4px 10px;border-radius:4px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.iib-symbol-select:hover,.iib-symbol-select.open{border-color:var(--up-green);background:#00ff4114}.iib-arrow{flex-shrink:0;transition:transform .2s ease}.iib-symbol-select.open .iib-arrow{transform:rotate(180deg)}.iib-dropdown-list{position:absolute;top:calc(100% + 4px);left:0;min-width:100%;background:#0d0d0d;border:1px solid rgba(0,255,65,.3);border-radius:4px;list-style:none;margin:0;padding:4px 0;z-index:100;box-shadow:0 4px 12px #0009}.iib-dropdown-item{padding:7px 12px;font-size:13px;font-weight:500;color:var(--text-main);cursor:pointer;transition:background .15s}.iib-dropdown-item:hover{background:#00ff4126;color:var(--up-green)}.iib-dropdown-item.active{color:var(--up-green);font-weight:600}.iib-main-left{display:flex;align-items:center;gap:20px}.iib-toggle-btn{display:none;background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:8px;transition:transform .3s ease;font-size:14px}@media (max-width: 768px){.instrument-info-bar{flex-direction:column;height:auto;padding:10px 12px;gap:0;align-items:stretch;transition:all .3s ease}.iib-instrument-main{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.05)}.iib-toggle-btn{display:block}.iib-toggle-btn.active{transform:rotate(180deg);color:var(--up-green)}.iib-info-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#ffffff0d;border-radius:4px;margin-top:8px;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.iib-info-stats.hide{max-height:0;margin-top:0;opacity:0;transform:translateY(-10px)}.iib-info-stats.show{max-height:200px;margin-top:8px;opacity:1;transform:translateY(0)}.iib-stat-item{flex-direction:row;justify-content:space-between;align-items:center;background:var(--bg-dark);padding:6px 10px;min-height:32px;border-bottom:1px solid rgba(255,255,255,.03)}.iib-stat-label{font-size:11px;margin-bottom:0;color:var(--text-muted)}.iib-stat-value{font-size:12px;font-weight:600}.iib-price-container{align-items:flex-start;margin-left:15px}.iib-last-price{font-size:18px}}.order-book-container{display:flex;flex-direction:column;height:100%;background:var(--bg-dark);font-size:12px;color:var(--text-muted);overflow:hidden}.order-book-header{display:grid;grid-template-columns:1fr 1fr 1fr;padding:8px 12px;border-bottom:1px solid var(--border-color);font-weight:500}.col-amount,.col-total{text-align:right}.order-book-list{display:flex;flex-direction:column;overflow:hidden;flex:1}.order-book-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:2px 12px;position:relative;line-height:18px}.order-book-row:hover{background:#ffffff0d}.depth-bar{position:absolute;top:0;right:0;height:100%;z-index:0;opacity:.15;transition:width .3s ease}.ask .depth-bar{background-color:var(--down-red)}.bid .depth-bar{background-color:var(--up-green)}.order-book-row span{position:relative;z-index:1}.order-book-row .price{font-weight:500}.ask .price{color:var(--down-red)}.bid .price{color:var(--up-green)}.amount,.total{text-align:right;color:var(--text-main)}.current-price-display{padding:12px;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);display:flex;align-items:baseline;gap:8px;background:#ffffff05}.current-price-display .price{font-size:18px;font-weight:700}.current-price-display .price.up{color:var(--up-green)}.current-price-display .price.down{color:var(--down-red)}.usd-price{font-size:12px;color:var(--text-muted)}.trade-history-container{display:flex;flex-direction:column;height:100%;background:var(--bg-dark);font-size:12px;color:var(--text-muted);overflow:hidden}.trade-history-header{display:grid;grid-template-columns:1.2fr 1fr 1fr;padding:8px 12px;border-bottom:1px solid var(--border-color);font-weight:500}.col-amount,.col-time{text-align:right}.trade-history-list{flex:1;overflow-y:auto}.trade-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;padding:2px 12px;line-height:18px}.trade-row:hover{background:#ffffff0d}.trade-row.buy .price{color:var(--up-green)}.trade-row.sell .price{color:var(--down-red)}.trade-row .amount{text-align:right;color:var(--text-main)}.trade-row .time{text-align:right;color:var(--text-dim)}:root{--bg-dark: #000000;--bg-panel: #1a1a1a;--bg-card: #141414;--text-main: #ffffff;--text-muted: #888888;--text-dim: #555555;--accent-white: #ffffff;--accent-blue: #0066ff;--up-green: #00ff41;--down-red: #ff524d;--warning-yellow: #f3ba2f;--border-color: #262626;--border-light: #333333;--border-dim: rgba(255, 255, 255, .03);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .5);--shadow-md: 0 4px 12px rgba(0, 0, 0, .8);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;--font-mono: "Roboto Mono", "Monaco", "Consolas", monospace;line-height:1.5;font-weight:400;color-scheme:dark;color:var(--text-main);background-color:var(--bg-dark);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;display:flex;min-width:320px;min-height:100vh;background-color:var(--bg-dark)}#root{width:100%;height:100vh;overflow:hidden;position:relative}.okx-panel{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:2px;position:relative}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#333;border-radius:0}::-webkit-scrollbar-thumb:hover{background:#444}.num-mono{font-family:var(--font-mono)}::selection{background:var(--accent-blue);color:#fff}