/* cosmic-trading.css v4 — 实时行情 + K线 + 深度可视化 */

.trading-hero{padding:24px 16px 8px;text-align:center;position:relative}
.trading-hero .section-label{font-size:.7rem;color:#4a8fff;letter-spacing:4px;text-transform:uppercase}
.trading-hero h2{font-size:1.6rem;color:#fff;margin:4px 0;font-weight:700}
.trading-live-dot{position:absolute;top:28px;right:16px;display:flex;align-items:center;gap:6px;font-size:.65rem;color:rgba(255,255,255,.4)}
.tld-circle{width:6px;height:6px;border-radius:50%;background:#00ff88;animation:tld-pulse 1.5s infinite}
@keyframes tld-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,255,136,.4)}50%{opacity:.7;box-shadow:0 0 0 4px rgba(0,255,136,0)}}

/* 资产选择+价格 */
.trading-asset-bar{display:flex;align-items:center;gap:12px;padding:0 16px 12px;flex-wrap:wrap}
.trading-asset-bar select{flex:0 0 auto;min-width:140px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 12px;color:#fff;font-size:.85rem;outline:none}
.trading-asset-bar select option{background:#0d1117;color:#fff}
.trading-price-group{display:flex;align-items:baseline;gap:10px}
.trading-current-price{font-family:'Orbitron',monospace;font-size:2rem;color:#4a8fff;font-weight:700;transition:color .3s}
.trading-current-price .tcp-unit{font-size:.7rem;color:rgba(255,255,255,.3);font-family:'Noto Sans SC',sans-serif}
.trading-change{font-size:.8rem;font-weight:600;padding:2px 8px;border-radius:4px}
.trading-change.up{color:#00ff88;background:rgba(0,255,136,.08)}
.trading-change.down{color:#ff2d78;background:rgba(255,45,120,.08)}

/* 价格闪烁动画 */
.price-flash-up{animation:pfUp .5s}
.price-flash-down{animation:pfDown .5s}
@keyframes pfUp{0%{color:#00ff88;text-shadow:0 0 10px rgba(0,255,136,.5)}100%{color:#4a8fff;text-shadow:none}}
@keyframes pfDown{0%{color:#ff2d78;text-shadow:0 0 10px rgba(255,45,120,.5)}100%{color:#4a8fff;text-shadow:none}}

/* K线区 */
.kline-section{padding:0 16px 16px}
.kline-header{display:flex;justify-content:flex-end;margin-bottom:6px}
.kline-periods{display:flex;gap:4px}
.kline-period-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.4);padding:3px 10px;border-radius:4px;font-size:.65rem;cursor:pointer;font-family:'Orbitron',monospace;transition:all .2s}
.kline-period-btn.active{background:rgba(74,143,255,.15);color:#4a8fff;border-color:rgba(74,143,255,.3)}
#klineCanvas{width:100%;border-radius:8px;background:rgba(0,0,0,.2)}

/* 双栏布局 */
.trading-main-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px 16px}
@media(max-width:700px){.trading-main-grid{grid-template-columns:1fr}}

/* 订单簿面板 */
.order-book-panel{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px;overflow:hidden}
.obp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.obp-title{font-size:.78rem;color:rgba(255,255,255,.5);font-weight:600}
.obp-spread{font-size:.65rem;color:rgba(255,255,255,.25);font-family:'Orbitron',monospace}
.ob-col-header{display:grid;grid-template-columns:1fr 50px 60px;gap:4px;font-size:.6rem;color:rgba(255,255,255,.2);text-transform:uppercase;letter-spacing:.5px;padding:0 4px 4px;border-bottom:1px solid rgba(255,255,255,.04)}
.ob-asks-wrap,.ob-bids-wrap{font-size:.72rem;min-height:60px}
.ob-row{display:grid;grid-template-columns:1fr 50px 60px;gap:4px;padding:2px 4px;cursor:pointer;transition:background .15s;position:relative}
.ob-row:hover{background:rgba(255,255,255,.04)}
.ob-price{font-family:'Orbitron',monospace;font-size:.7rem}
.ob-price.bid{color:#00d4ff}
.ob-price.ask{color:#9d4edd}
.ob-qty{color:rgba(255,255,255,.4);text-align:right}
.ob-depth-bar{height:100%;position:relative}
.ob-depth-fill{position:absolute;right:0;top:0;bottom:0;border-radius:2px;opacity:.2;transition:width .4s}
.ob-depth-fill.bid{background:#00d4ff}
.ob-depth-fill.ask{background:#9d4edd}
.ob-spread-bar{text-align:center;font-size:.65rem;color:rgba(255,255,255,.3);padding:4px 0;border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);font-family:'Orbitron',monospace}
.ob-empty{text-align:center;padding:16px;color:rgba(255,255,255,.15);font-size:.7rem}

/* 订单簿行闪烁 */
.ob-flash-up{animation:obUp .4s}
.ob-flash-down{animation:obDown .4s}
@keyframes obUp{0%{background:rgba(0,255,136,.12)}100%{background:transparent}}
@keyframes obDown{0%{background:rgba(255,45,120,.12)}100%{background:transparent}}

/* 下单面板 */
.trade-form-panel{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px}
.trade-tabs{display:flex;gap:0;margin-bottom:12px;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.trade-tab{flex:1;padding:8px;text-align:center;font-size:.78rem;cursor:pointer;transition:all .2s;color:rgba(255,255,255,.5)}
.trade-tab.active-buy{background:rgba(0,212,255,.1);color:#00d4ff;font-weight:600}
.trade-tab.active-sell{background:rgba(157,78,221,.1);color:#9d4edd;font-weight:600}

.trade-field{margin-bottom:8px}
.trade-field label{display:block;font-size:.6rem;color:rgba(255,255,255,.3);margin-bottom:2px;text-transform:uppercase;letter-spacing:.5px}
.trade-field input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 10px;color:#fff;font-size:.85rem;font-family:'Orbitron',monospace;outline:none;box-sizing:border-box}
.trade-field input:focus{border-color:#4a8fff}
.trade-field input::placeholder{color:rgba(255,255,255,.15)}

.trade-summary{background:rgba(255,255,255,.02);border-radius:8px;padding:8px 10px;margin:8px 0}
.trade-summary .ts-row{display:flex;justify-content:space-between;font-size:.7rem;padding:2px 0}
.trade-summary .ts-row .ts-label{color:rgba(255,255,255,.3)}
.trade-summary .ts-row .ts-value{color:#fff;font-family:'Orbitron',monospace}

.trade-submit{width:100%;padding:10px;border:none;border-radius:10px;font-size:.85rem;font-weight:600;cursor:pointer;transition:opacity .2s}
.trade-submit.buy-btn{background:linear-gradient(135deg,#00d4ff,#0088ff);color:#fff}
.trade-submit.sell-btn{background:linear-gradient(135deg,#9d4edd,#7c3aed);color:#fff}
.trade-submit:disabled{opacity:.4;cursor:not-allowed}
.trade-submit:active{opacity:.8}

/* 底部双栏 */
.trading-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px 24px}
@media(max-width:700px){.trading-bottom-grid{grid-template-columns:1fr}}

/* 最近成交面板 */
.recent-trades-panel{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px}
.rtp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.rtp-title{font-size:.78rem;color:rgba(255,255,255,.5);font-weight:600}
.rtp-live{font-size:.6rem;color:#00ff88}
.rt-col-header{display:grid;grid-template-columns:1fr 50px 60px;gap:4px;font-size:.6rem;color:rgba(255,255,255,.2);text-transform:uppercase;letter-spacing:.5px;padding:0 4px 4px;border-bottom:1px solid rgba(255,255,255,.04)}
.rt-list{max-height:240px;overflow-y:auto}
.rt-row{display:grid;grid-template-columns:1fr 50px 60px;gap:4px;padding:2px 4px;font-size:.72rem}
.rt-price{font-family:'Orbitron',monospace;font-size:.7rem}
.rt-price.bid{color:#00d4ff}
.rt-price.ask{color:#9d4edd}
.rt-qty{color:rgba(255,255,255,.4);text-align:right}
.rt-time{color:rgba(255,255,255,.2);text-align:right;font-size:.65rem}

/* 我的挂单面板 */
.my-orders-panel{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px}
.mop-title{font-size:.78rem;color:rgba(255,255,255,.5);font-weight:600;margin-bottom:8px}

.mo-item{background:rgba(255,255,255,.03);border-radius:8px;padding:10px;margin-bottom:6px}
.mo-item .mo-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.mo-item .mo-asset{font-size:.78rem;color:#fff;font-weight:600}
.mo-item .mo-type{font-size:.6rem;padding:2px 6px;border-radius:4px;font-weight:600}
.mo-item .mo-type.buy{background:rgba(0,212,255,.12);color:#00d4ff}
.mo-item .mo-type.sell{background:rgba(157,78,221,.12);color:#9d4edd}
.mo-item .mo-details{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;font-size:.68rem}
.mo-item .mo-detail-label{color:rgba(255,255,255,.25)}
.mo-item .mo-detail-value{color:#fff;font-family:'Orbitron',monospace;font-size:.65rem}
.mo-item .mo-cancel{margin-top:6px;padding:5px 10px;border:1px solid rgba(255,45,120,.25);background:transparent;color:#ff2d78;border-radius:6px;font-size:.65rem;cursor:pointer;transition:all .2s}
.mo-item .mo-cancel:hover{background:rgba(255,45,120,.1)}

.trading-login-prompt{text-align:center;padding:60px 20px}
.trading-login-prompt p{color:rgba(255,255,255,.5);margin:12px 0}
.trading-login-btn{background:linear-gradient(135deg,#00d4ff,#0088ff);color:#fff;border:none;border-radius:10px;padding:10px 28px;font-size:.85rem;cursor:pointer}

/* 滚动条 */
.rt-list::-webkit-scrollbar{width:3px}
.rt-list::-webkit-scrollbar-track{background:transparent}
.rt-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}