/* ==================== 状态圆点 ==================== */
.dot{width:3px;height:12px;border-radius:2px;display:inline-block;flex-shrink:0}
.dot-r{background:var(--red)}.dot-g{background:var(--green)}.dot-y{background:var(--yellow)}.dot-gray{background:var(--text-mute)}.dot-blue{background:var(--blue)}

/* ==================== 段落标题 ==================== */
.sec{display:flex;align-items:center;gap:6px;color:var(--text-dim);font-size:13px;font-weight:600;margin:14px 0 8px}
.sec::before{content:'';width:3px;height:12px;background:var(--red);border-radius:2px;flex-shrink:0}
.sec .cnt{color:var(--text-mute);font-weight:400;margin-left:4px;font-size:11px}

/* ==================== 卡片 ==================== */
.card{background:var(--card-blur);backdrop-filter:var(--glass-blur) var(--glass-saturate);-webkit-backdrop-filter:var(--glass-blur) var(--glass-saturate);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-md);border:1px solid var(--border-subtle);transition:var(--transition)}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}
.card-title{font-size:15px;font-weight:600;color:var(--text-2);display:flex;align-items:center;gap:6px}
.card-title::before{content:'';width:3px;height:14px;background:var(--red);border-radius:2px;flex-shrink:0}
.card-action{font-size:12px;color:var(--blue);cursor:pointer}

/* ==================== KPI卡片 ==================== */
.kpi{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5);background:var(--card-blur);backdrop-filter:var(--glass-blur) var(--glass-saturate);-webkit-backdrop-filter:var(--glass-blur) var(--glass-saturate);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--border-subtle);transition:var(--transition)}
.kpi:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.kpi-label{font-size:12px;color:var(--text-dim)}
.kpi-value{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:24px;font-weight:700;color:var(--text);letter-spacing:-0.02em}
.kpi-sub{font-size:12px;color:var(--text-dim);display:flex;align-items:center;gap:var(--space-1)}

/* ==================== Hero大数字区 ==================== */
.hero{padding:var(--space-6) var(--space-5);background:var(--card-blur);backdrop-filter:var(--glass-blur) var(--glass-saturate);-webkit-backdrop-filter:var(--glass-blur) var(--glass-saturate);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-subtle)}
.hero-label{font-size:13px;color:var(--text-dim);margin-bottom:var(--space-2)}
.hero-value{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:42px;font-weight:800;letter-spacing:-0.03em;line-height:1.1}
.hero-sub{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3)}
.hero-sub-item{display:flex;align-items:baseline;gap:var(--space-2)}
.hero-sub-item .label{font-size:12px;color:var(--text-dim)}
.hero-sub-item .value{font-family:var(--font-num);font-size:16px;font-weight:600}

/* ==================== Pill标签 ==================== */
.pill{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-3);border-radius:var(--radius-pill);font-size:11px;font-weight:600;line-height:20px;transition:var(--transition)}
.pill-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.pill-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.pill-blue{background:var(--blue-bg);color:var(--blue);border:1px solid rgba(88,166,255,0.3)}
.pill-yellow{background:rgba(210,153,34,0.1);color:var(--yellow);border:1px solid rgba(210,153,34,0.3)}
.pill-gray{background:var(--card-2);color:var(--text-dim);border:1px solid var(--border-2)}

/* ==================== 表格 ==================== */
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{text-align:left;padding:var(--space-3) var(--space-4);color:var(--text-dim);font-weight:500;font-size:12px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card);z-index:1;white-space:nowrap}
.data-table th.num-col{text-align:right}
.data-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-subtle);transition:var(--transition-fast);white-space:nowrap}
.data-table td.num-col{text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.data-table tbody tr{transition:var(--transition-fast);cursor:pointer}
.data-table tbody tr:hover{background:var(--card-2)}
.data-table tbody tr.expanded{background:var(--card-2)}

.rw{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) 0;border-bottom:1px solid var(--border-subtle);transition:var(--transition-fast)}
.rw:hover{background:var(--card-2)}
.rw:last-child{border-bottom:none}

/* ==================== 持仓卡片 ==================== */
.pos-card{padding:var(--space-4);background:var(--card-blur);backdrop-filter:var(--glass-blur) var(--glass-saturate);-webkit-backdrop-filter:var(--glass-blur) var(--glass-saturate);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--border-subtle);transition:var(--transition);cursor:pointer}
.pos-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--border-2)}
.pos-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}
.pos-card-name{font-size:15px;font-weight:600;color:var(--text)}
.pos-card-code{font-size:12px;color:var(--text-dim);font-family:var(--font-num)}
.pos-card-price{font-family:var(--font-num);font-size:20px;font-weight:700}
.pos-card-detail{display:flex;justify-content:space-between;margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-subtle)}
.pos-card-detail-item{display:flex;flex-direction:column;gap:2px}
.pos-card-detail-item .label{font-size:11px;color:var(--text-mute)}
.pos-card-detail-item .value{font-family:var(--font-num);font-size:13px;font-weight:600;color:var(--text-2)}

/* ==================== 按钮 ==================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-size:14px;font-weight:600;border:none;cursor:pointer;transition:var(--transition);white-space:nowrap;-webkit-tap-highlight-color:transparent}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(0.98)}
.btn-buy{background:var(--red);color:#fff;box-shadow:0 2px 8px rgba(248,81,73,0.3)}
.btn-buy:hover{box-shadow:0 4px 16px rgba(248,81,73,0.4)}
.btn-sell{background:var(--green);color:#fff;box-shadow:0 2px 8px rgba(63,185,80,0.3)}
.btn-sell:hover{box-shadow:0 4px 16px rgba(63,185,80,0.4)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(88,166,255,0.3)}
.btn-secondary{background:var(--card-2);color:var(--text-2);border:1px solid var(--border-2)}
.btn-secondary:hover{background:var(--border-2)}
.btn-ghost{background:transparent;color:var(--text-dim)}
.btn-ghost:hover{background:var(--card-2);color:var(--text)}
.btn:disabled,.btn.disabled{opacity:0.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-lg{padding:var(--space-4) var(--space-8);font-size:16px;width:100%}

/* ==================== 指数栏 ==================== */
.index-bar{display:flex;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--card-blur);backdrop-filter:var(--glass-blur) var(--glass-saturate);-webkit-backdrop-filter:var(--glass-blur) var(--glass-saturate);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--border-subtle);margin-bottom:var(--space-4)}
.index-item{display:flex;flex-direction:column;gap:2px;flex:1}
.index-name{font-size:12px;color:var(--text-dim)}
.index-value{font-family:var(--font-num);font-size:18px;font-weight:700}
.index-change{font-family:var(--font-num);font-size:12px}

/* ==================== 五档盘口 ==================== */
.depth-box{display:flex;flex-direction:column;gap:1px;font-size:12px}
.depth-row{display:flex;justify-content:space-between;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);position:relative;overflow:hidden;transition:var(--transition-fast)}
.depth-row:hover{background:var(--card-2)}
.depth-row .depth-bg{position:absolute;right:0;top:0;bottom:0;opacity:0.08;border-radius:var(--radius-sm)}
.depth-row.ask .depth-bg{background:var(--green)}
.depth-row.bid .depth-bg{background:var(--red)}
.depth-row .depth-price{font-family:var(--font-num);font-weight:600;position:relative;z-index:1}
.depth-row .depth-vol{font-family:var(--font-num);color:var(--text-dim);position:relative;z-index:1}

/* ==================== K线 ==================== */
.kline-container{display:flex;align-items:flex-end;gap:2px;height:200px;padding:var(--space-3);overflow:hidden}
.kline-bar{flex:1;min-width:4px;display:flex;flex-direction:column;align-items:center;position:relative;height:100%;justify-content:flex-end}
.kline-wick{width:1px;background:var(--text-dim)}
.kline-body{width:100%;max-width:12px;border-radius:1px}
.kline-body.up{background:var(--red)}
.kline-body.down{background:var(--green)}
.kline-body.flat{background:var(--text-mute)}
.kline-mini{display:flex;align-items:flex-end;gap:1px;height:60px;padding:var(--space-2)}
.kline-mini .kline-body{max-width:6px}

/* ==================== 交易表单 ==================== */
.trade-form{display:flex;flex-direction:column;gap:var(--space-4)}
.trade-tabs{display:flex;gap:var(--space-2);margin-bottom:var(--space-3)}
.trade-tab{flex:1;padding:var(--space-3);text-align:center;border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:var(--transition);background:var(--card-2);color:var(--text-dim)}
.trade-tab.active.buy{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.trade-tab.active.sell{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.trade-input-group{display:flex;align-items:center;gap:var(--space-2)}
.trade-input-group input{flex:1;text-align:center;font-family:var(--font-num);font-size:16px;font-weight:600}
.step-btn{width:36px;height:36px;border-radius:var(--radius-md);background:var(--card-2);border:1px solid var(--border-2);color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:var(--transition-fast)}
.step-btn:hover{background:var(--border-2);color:var(--text)}
.step-btn:active{transform:scale(0.95)}
.quick-vol{display:flex;gap:var(--space-2);flex-wrap:wrap}
.quick-vol .btn{flex:1;padding:var(--space-2);font-size:12px}
.trade-summary{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);background:var(--card-2);border-radius:var(--radius-md)}
.trade-summary-row{display:flex;justify-content:space-between;font-size:13px}
.trade-summary-row .label{color:var(--text-dim)}
.trade-summary-row .value{font-family:var(--font-num);font-weight:600}

/* ==================== 右键菜单 ==================== */
.context-menu{position:fixed;display:none;background:var(--card-blur);backdrop-filter:var(--glass-blur) var(--glass-saturate);-webkit-backdrop-filter:var(--glass-blur) var(--glass-saturate);border-radius:var(--radius-md);box-shadow:var(--shadow-xl);border:1px solid var(--border-2);padding:var(--space-1);z-index:1000;min-width:140px}
.context-menu.show{display:block;animation:fadeIn 0.15s var(--ease)}
.context-menu-item{padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);cursor:pointer;font-size:13px;color:var(--text-2);transition:var(--transition-fast)}
.context-menu-item:hover{background:var(--card-2);color:var(--text)}

/* ==================== Toast ==================== */
.toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);padding:var(--space-3) var(--space-6);background:var(--card-blur);backdrop-filter:var(--glass-blur) var(--glass-saturate);-webkit-backdrop-filter:var(--glass-blur) var(--glass-saturate);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);border:1px solid var(--border-2);font-size:14px;z-index:2000;opacity:0;pointer-events:none;transition:var(--transition)}
.toast.show{opacity:1;top:90px}
.toast.success{color:var(--green);border-color:var(--green-border)}
.toast.error{color:var(--red);border-color:var(--red-border)}

.spinner{width:20px;height:20px;border:2px solid var(--border-2);border-top-color:var(--blue);border-radius:50%;animation:spin 0.8s linear infinite}

.expand-row{display:none;background:var(--bg)}
.expand-row.show{display:table-row}
.expand-row td{padding:var(--space-4) var(--space-5)}

/* ==================== 自选 ==================== */
.watchlist-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast)}
.watchlist-item:hover,.watchlist-item.active{background:var(--card-2)}
.watchlist-item .wl-name{font-size:13px;font-weight:500;color:var(--text)}
.watchlist-item .wl-code{font-size:11px;color:var(--text-dim);font-family:var(--font-num)}
.watchlist-item .wl-price{font-family:var(--font-num);font-size:14px;font-weight:600}

/* ==================== 策略卡片 ==================== */
.strategy-card{padding:var(--space-5);background:var(--card-blur);backdrop-filter:var(--glass-blur) var(--glass-saturate);-webkit-backdrop-filter:var(--glass-blur) var(--glass-saturate);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--border-subtle);transition:var(--transition)}
.strategy-card:hover{box-shadow:var(--shadow-lg)}
.strategy-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}
.strategy-name{font-size:15px;font-weight:600;color:var(--text)}
.strategy-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)}
.strategy-stat-item{display:flex;flex-direction:column;gap:2px}
.strategy-stat-item .label{font-size:11px;color:var(--text-mute)}
.strategy-stat-item .value{font-family:var(--font-num);font-size:16px;font-weight:700}

/* ==================== 工具类 ==================== */
.flex{display:flex}
.flex-col{display:flex;flex-direction:column}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-1{gap:var(--space-1)}
.gap-2{gap:var(--space-2)}
.gap-3{gap:var(--space-3)}
.gap-4{gap:var(--space-4)}
.flex-1{flex:1}
.text-sm{font-size:12px}
.text-dim{color:var(--text-dim)}
.text-mute{color:var(--text-mute)}
.font-bold{font-weight:700}
.font-600{font-weight:600}
.text-right{text-align:right}
.text-center{text-align:center}
.mt-2{margin-top:var(--space-2)}
.mt-4{margin-top:var(--space-4)}
.mb-2{margin-bottom:var(--space-2)}
.mb-4{margin-bottom:var(--space-4)}
.w-full{width:100%}
.hidden{display:none}