/* 鍟嗗搧鏈熻揣鏈棩鏈熸潈鏌ヨ - 鏍峰紡 */
:root {
    --bg: #0f1923;
    --card: #1a2632;
    --border: #2a3a4a;
    --text: #e0e6ed;
    --text2: #8899aa;
    --accent: #409eff;
    --danger: #ef4444;
    --warning: #f59e0b;
    --soon: #3b82f6;
    --safe: #22c55e;
    --card-shadow: rgba(0,0,0,0.3);
    --modal-bg: rgba(0,0,0,0.65);
    --input-bg: rgba(0,0,0,0.2);
    --tag-bg: rgba(64,158,255,0.06);
    --tag-border: rgba(64,158,255,0.15);
    --header-bg: rgba(0,0,0,0.15);
}

/* Light theme */
[data-theme="light"] {
    --bg: #f0f2f5;
    --card: #ffffff;
    --border: #e0e4e8;
    --text: #1a202c;
    --text2: #718096;
    --accent: #3182ce;
    --danger: #e53e3e;
    --warning: #dd6b20;
    --soon: #3182ce;
    --safe: #38a169;
    --card-shadow: rgba(0,0,0,0.08);
    --modal-bg: rgba(0,0,0,0.4);
    --input-bg: rgba(0,0,0,0.04);
    --tag-bg: rgba(49,130,206,0.06);
    --tag-border: rgba(49,130,206,0.18);
    --header-bg: rgba(0,0,0,0.03);
}

/* 护眼主题（暖米色）：柔和暖色调，低饱和度，长时间观看不疲劳 */
[data-theme="eyecare"] {
    --bg: #F5F0E6;
    --card: #FDFAF3;
    --border: #E0D8C8;
    --text: #3D3529;
    --text2: #7A6F5E;
    --accent: #8B6914;
    --danger: #C75450;
    --warning: #B8860B;
    --soon: #5B7B8C;
    --safe: #5A8A5C;
    --card-shadow: rgba(61,53,41,0.08);
    --modal-bg: rgba(61,53,41,0.45);
    --input-bg: rgba(61,53,41,0.04);
    --tag-bg: rgba(139,105,20,0.06);
    --tag-border: rgba(139,105,20,0.15);
    --header-bg: rgba(61,53,41,0.04);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.5;
    transition: background 0.3s, color 0.3s;
}

#app {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 16px;
}

/* 澶撮儴 */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.app-header h1 {
    font-size: 22px;
    font-weight: 700;
    background: linear-gradient(135deg, #409eff, #67c23a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.app-header .subtitle {
    font-size: 13px;
    color: var(--text2);
    margin-top: 2px;
}

/* 鎸夐挳 */
.btn {
    padding: 8px 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-refresh { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-refresh:hover { opacity: 0.85; color: #fff; }

/* 页头「期权知识」链接按钮（a 标签复用 .btn 外观，刷新按钮下方整行） */
.btn-learn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }

/* 主题切换按钮 */
.btn-theme {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
    line-height: 1;
}

.btn-theme:hover {
    border-color: var(--accent);
    transform: scale(1.05);
}

.header-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    flex-shrink: 0;
}
.header-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.header-actions-row .btn-refresh { flex: 1; }

/* 鎽樿鏍?*/
.summary-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.stat-card {
    flex: 1;
    min-width: 100px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
    text-align: center;
    box-shadow: 0 1px 2px var(--card-shadow);
}

.stat-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.stat-label {
    font-size: 10px;
    color: var(--text2);
    margin-top: 0px;
}


/* 绛涢€夋爮 */
.filter-bar {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-item label {
    font-size: 13px;
    color: var(--text2);
    white-space: nowrap;
}

.search-input {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text);
    font-size: 13px;
    width: 200px;
    outline: none;
}

.search-input:focus { border-color: var(--accent); }

.range-btns {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.range-btn {
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text2);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
}

.range-btn:hover { border-color: var(--accent); color: var(--accent); }

.range-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.filter-info {
    margin-left: auto;
    font-size: 13px;
    color: var(--text2);
}

.filter-info strong { color: var(--accent); }

/* 鍒版湡鏃ュ垎缁?*/
.expiry-groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.expiry-group {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
}

.group-date {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.group-count {
    font-size: 12px;
    color: var(--text2);
    margin-left: auto;
}

/* 鏈棩鏍囩 */
.doom-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.doom-danger { color: var(--danger); }
.doom-danger.doom-badge { background: rgba(239,68,68,0.12); }
.doom-warning { color: var(--warning); }
.doom-warning.doom-badge { background: rgba(245,158,11,0.12); }
.doom-soon { color: var(--soon); }
.doom-soon.doom-badge { background: rgba(59,130,246,0.12); }
.doom-normal { color: var(--safe); }
.doom-normal.doom-badge { background: rgba(34,197,94,0.12); }

/* 鍟嗗搧鏍囩鍒楄〃 */
.commodity-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px;
}

.commodity-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    background: var(--tag-bg);
    border: 1px solid var(--tag-border);
    transition: all 0.15s;
}

.commodity-tag:hover {
    background: rgba(64,158,255,0.12);
    border-color: rgba(64,158,255,0.3);
}

.commodity-tag.clickable {
    cursor: pointer;
}

.commodity-tag.clickable:hover {
    background: rgba(64,158,255,0.18);
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(64,158,255,0.15);
}

.tag-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.tag-detail {
    display: flex;
    gap: 6px;
    font-size: 11px;
    color: var(--text2);
}

.tag-exchange {
    padding: 0 4px;
    background: var(--header-bg);
    border-radius: 3px;
}

.tag-count {
    opacity: 0.7;
}

/* 鍔犺浇鐘舵€?*/
.loading-state {
    text-align: center;
    padding: 80px 20px;
}

.spinner-lg {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

.spinner-sm {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-text {
    font-size: 15px;
    color: var(--text2);
}

.loading-sub {
    font-size: 12px;
    color: var(--text2);
    opacity: 0.5;
    margin-top: 4px;
}

/* 绌虹姸鎬?*/
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text2);
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.4;
}

/* 搴曢儴 */
.app-footer {
    text-align: center;
    padding: 24px 0 12px;
    font-size: 12px;
    color: var(--text2);
    opacity: 0.6;
    line-height: 1.8;
}
.footer-qq { opacity: 1; }
.footer-qq a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.5px;
}
.footer-qq a:hover { text-decoration: underline; }
.footer-qq a { cursor: pointer; }
.qq-tip { font-size: 11px; margin-left: 6px; color: var(--text2); }

.app-footer .visit-count {
    font-size: 11px;
    letter-spacing: 0.5px;
}

/* 响应式（基础） */
@media (max-width: 640px) {
    .app-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .filter-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .filter-info { margin-left: 0; }
    .search-input { width: 100%; }
    .commodity-list { gap: 6px; }
    .commodity-tag { padding: 5px 10px; }
    .modal-box { width: 95vw; }
}

/* ==================== 弹窗 ==================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--modal-bg);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    width: 520px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: modalIn 0.2s ease;
}

.modal-box.modal-wide {
    width: min(1400px, 96vw);
    max-height: 92vh;
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.modal-header h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    flex: 1;
}

.modal-subtitle {
    font-size: 13px;
    color: var(--text2);
}

/* 实时数据指示灯 */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #22c55e;
    background: rgba(34,197,94,0.12);
    padding: 1px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}
.live-dot {
    width: 6px; height: 6px;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
    animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
    50% { opacity: 0.5; box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}

/* 末日倒计时徽章：显示距离到期还有多少时间 */
.doom-countdown-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    color: #f59e0b;
    background: rgba(245,158,11,0.15);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}
.doom-countdown-badge.urgent {
    color: #ef4444;
    background: rgba(239,68,68,0.18);
    animation: doomPulse 1s ease-in-out infinite;
}
.doom-icon {
    font-size: 11px;
}
@keyframes doomPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Gamma爆发标记：⚡ 出现在高Gamma行权价旁 */
.gamma-badge {
    display: inline-block;
    font-size: 11px;
    margin-left: 2px;
    animation: gammaFlash 1.2s ease-in-out infinite;
    cursor: help;
}
@keyframes gammaFlash {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.15); }
}

/* 时间衰减加速器徽章：显示今日Theta衰减是平时的多少倍 */
.theta-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}
.theta-badge.theta-normal {
    color: #6b7280;
    background: rgba(107,114,128,0.12);
}
.theta-badge.theta-medium {
    color: #f59e0b;
    background: rgba(245,158,11,0.15);
}
.theta-badge.theta-high {
    color: #ef4444;
    background: rgba(239,68,68,0.15);
}
.theta-badge.theta-extreme {
    color: #dc2626;
    background: rgba(220,38,38,0.2);
    animation: thetaPulse 1s ease-in-out infinite;
}
.theta-badge.theta-expired {
    color: #6b7280;
    background: rgba(107,114,128,0.15);
}
@keyframes thetaPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.theta-icon { font-size: 10px; }

/* 末日盈亏模拟按钮 */
.sim-btn {
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
    border: 1px solid rgba(139,92,246,0.3);
}
.sim-btn.active {
    background: rgba(139,92,246,0.2);
    border-color: #8b5cf6;
}

/* 末日盈亏模拟说明条 */
.sim-hint-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(139,92,246,0.1);
    border: 1px solid rgba(139,92,246,0.25);
    border-radius: 5px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text);
}
.sim-hint-icon { font-size: 14px; }
.sim-hint-note {
    color: var(--text2);
    font-size: 11px;
}

/* 末日盈亏模拟盈亏显示 */
.call-price, .put-price {
    position: relative;
    vertical-align: middle;
}
.sim-pnl {
    display: block;
    font-size: 9px;
    font-weight: 500;
    padding: 1px 3px;
    border-radius: 3px;
    margin-top: 2px;
    line-height: 1.2;
    white-space: nowrap;
}
.sim-pnl.sim-profit {
    color: #16a34a;
    background: rgba(34,197,94,0.12);
}
.sim-pnl.sim-loss {
    color: #ef4444;
    background: rgba(239,68,68,0.12);
}
.sim-expiry {
    font-weight: 600;
}
.sim-theo {
    color: var(--accent);
    opacity: 0.8;
    margin-left: 4px;
}

/* 期权估值标记：低估绿色圆点 / 高估红色圆点 */
.val-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: 3px;
    vertical-align: middle;
    cursor: help;
}
.val-dot.val-under {
    background: #16a34a;
    box-shadow: 0 0 4px rgba(22,163,74,0.5);
    animation: valPulse 2s ease-in-out infinite;
}
.val-dot.val-over {
    background: #ef4444;
    box-shadow: 0 0 4px rgba(239,68,68,0.5);
    animation: valPulse 2s ease-in-out infinite;
}
@keyframes valPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
/* 估值标记对应的单元格背景 */
.call-price.val-under, .put-price.val-under {
    background: rgba(22,163,74,0.06);
}
.call-price.val-over, .put-price.val-over {
    background: rgba(239,68,68,0.06);
}

.modal-close {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: none;
    background: var(--header-bg);
    color: var(--text2);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.modal-close:hover {
    background: rgba(239,68,68,0.15);
    color: var(--danger);
}

.modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
    position: relative;
}

.loading-state.compact, .empty-state.compact {
    padding: 40px 20px;
}

/* ==================== T型报价表格 ==================== */
.table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.t-chain-table {
    width: 100%;
    min-width: 860px; /* 窄屏下保住 13 列可读性，配合 .table-wrap 横向滚动 */
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
}

.t-chain-table thead {
    background: var(--header-bg);
    position: sticky;
    top: 0;
    z-index: 1;
}

.t-chain-table th {
    padding: 8px 6px;
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
    color: var(--text2);
    text-align: center;
}

.t-chain-table td {
    padding: 6px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    white-space: nowrap;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* 分组表头 */
.th-group {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 8px;
    letter-spacing: 1px;
}

.th-call {
    color: var(--danger);
    background: rgba(239,68,68,0.06);
}

.th-put {
    color: var(--safe);
    background: rgba(34,197,94,0.06);
}

/* 行权价列 */
.th-strike {
    background: rgba(64,158,255,0.08) !important;
    color: var(--accent) !important;
    font-weight: 700;
    text-align: center;
    width: 80px;
}

.strike-cell {
    background: rgba(64,158,255,0.06);
    font-weight: 700;
    font-size: 13px;
    color: var(--accent);
    text-align: center;
    border-left: 2px solid rgba(64,158,255,0.2);
    border-right: 2px solid rgba(64,158,255,0.2);
}

/* 看涨侧 */
.call-cell {
    text-align: right;
    color: var(--text);
}

.call-price {
    font-weight: 700;
}

/* 看跌侧 */
.put-cell {
    text-align: left;
    color: var(--text);
}

.put-price {
    font-weight: 700;
}

.t-chain-table tbody tr:hover {
    background: rgba(64,158,255,0.05);
}

.t-chain-table tbody tr:hover .strike-cell {
    background: rgba(64,158,255,0.12);
}

/* ITM 实值期权背景 */
.call-cell.itm {
    background: rgba(239,68,68,0.07);
}

.put-cell.itm {
    background: rgba(34,197,94,0.07);
}

/* IV颜色标注：低IV=绿色(便宜/适合买入)，高IV=红色(贵/适合卖出) */
.iv-cell.iv-low {
    color: #16a34a;
    font-weight: 700;
    background: rgba(34,197,94,0.12);
}
.iv-cell.iv-slight-low {
    color: #22c55e;
    background: rgba(34,197,94,0.06);
}
.iv-cell.iv-slight-high {
    color: #f97316;
    background: rgba(249,115,22,0.06);
}
.iv-cell.iv-high {
    color: #ef4444;
    font-weight: 700;
    background: rgba(239,68,68,0.12);
}

/* IV列表头问号提示 */
.iv-legend-hint {
    font-size: 10px;
    color: var(--text2);
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 50%;
    padding: 0 3px;
    cursor: help;
}

/* IV颜色图例说明条 */
.iv-legend-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 10px;
    color: var(--text2);
    flex-wrap: wrap;
}
.iv-legend-title {
    font-weight: 600;
    color: var(--text);
}
.iv-legend-item {
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 500;
}
.val-legend-sep {
    color: var(--border);
    margin: 0 2px;
}
.iv-legend-low {
    color: #16a34a;
    background: rgba(34,197,94,0.12);
}
.iv-legend-slight-low {
    color: #22c55e;
    background: rgba(34,197,94,0.06);
}
.iv-legend-normal {
    color: var(--text);
    background: var(--input-bg);
    border: 1px solid var(--border);
}
.iv-legend-slight-high {
    color: #f97316;
    background: rgba(249,115,22,0.06);
}
.iv-legend-high {
    color: #ef4444;
    background: rgba(239,68,68,0.12);
}

/* ATM 平值行权价高亮 - 蓝色高亮 + 加粗 + ◀ 小三角标记 */
.strike-cell.atm {
    background: rgba(64,158,255,0.25) !important;
    font-weight: 900;
    font-size: 14px;
    position: relative;
    color: #4dabff;
    box-shadow: inset 0 0 0 2px rgba(64,158,255,0.5);
}

.strike-cell.atm::after {
    content: '◀';
    font-size: 10px;
    margin-left: 4px;
    color: #4dabff;
}

/* 最新价可点击按钮 */
.btn-detail-sm {
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(64,158,255,0.25);
    background: rgba(64,158,255,0.06);
    color: var(--accent);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: all 0.15s;
    min-width: 50px;
}

.btn-detail-sm:hover {
    background: rgba(64,158,255,0.2);
    border-color: var(--accent);
}

.call-price .btn-detail-sm {
    color: var(--danger);
    border-color: rgba(239,68,68,0.25);
    background: rgba(239,68,68,0.06);
}

.call-price .btn-detail-sm:hover {
    background: rgba(239,68,68,0.15);
    border-color: var(--danger);
}

.put-price .btn-detail-sm {
    color: var(--safe);
    border-color: rgba(34,197,94,0.25);
    background: rgba(34,197,94,0.06);
}

.put-price .btn-detail-sm:hover {
    background: rgba(34,197,94,0.15);
    border-color: var(--safe);
}

.text-up { color: var(--danger); font-weight: 600; }
.text-down { color: var(--safe); font-weight: 600; }

/* T型表涨跌幅列 */
.pct-cell {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pct-cell.text-up { color: var(--danger); }
.pct-cell.text-down { color: var(--safe); }

/* ==================== 分页 ==================== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 0 4px;
}

.page-btn {
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
}

.page-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.page-info {
    font-size: 12px;
    color: var(--text2);
}

/* ==================== 详情网格 ==================== */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 500px) {
    .detail-grid { grid-template-columns: 1fr; }
}

.detail-section h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 13px;
}

.detail-row span:first-child {
    color: var(--text2);
}

.detail-row .val {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

/* 涨跌幅高亮行 */
.detail-row-highlight {
    background: rgba(64,158,255,0.06);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 4px -10px;
}

.val-pct {
    font-size: 16px;
    font-weight: 700;
}

.val-pct.text-up { color: var(--danger); }
.val-pct.text-down { color: var(--safe); }

/* ==================== Light theme overrides ==================== */
[data-theme="light"] .app-header h1 {
    background: linear-gradient(135deg, #3182ce, #38a169);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .expiry-group {
    box-shadow: 0 1px 3px var(--card-shadow);
}

[data-theme="light"] .commodity-tag.clickable:hover {
    background: rgba(49,130,206,0.12);
    box-shadow: 0 2px 8px rgba(49,130,206,0.12);
}

[data-theme="light"] .t-chain-table tbody tr:hover {
    background: rgba(49,130,206,0.04);
}

[data-theme="light"] .call-cell.itm {
    background: rgba(229,62,62,0.06);
}

[data-theme="light"] .put-cell.itm {
    background: rgba(56,161,105,0.06);
}

[data-theme="light"] .modal-box {
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

[data-theme="light"] .filter-bar {
    box-shadow: 0 1px 3px var(--card-shadow);
}

/* ==================== 导航Tabs ==================== */
.modal-tabs {
    display: flex;
    gap: 4px;
    margin-left: 16px;
    flex-shrink: 0;
}
.tab-btn {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text2);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.tab-btn:hover { color: var(--text); background: var(--input-bg); }
.tab-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ==================== IV分析面板 ==================== */
.iv-panel { padding: 8px 0; }

/* IV分析说明条 */
.iv-intro {
    background: rgba(64,158,255,0.06);
    border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--text2);
    line-height: 1.6;
}
.iv-intro-icon {
    margin-right: 4px;
}

/* 图表描述文字 */
.iv-chart-desc {
    font-size: 11px;
    color: var(--text2);
    opacity: 0.7;
    margin-bottom: 8px;
    line-height: 1.4;
}
.iv-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.iv-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    text-align: center;
}
.iv-card-label { font-size: 12px; color: var(--text2); margin-bottom: 4px; }
.iv-card-value { font-size: 20px; font-weight: 700; color: var(--text); }
.iv-card-sub { font-size: 11px; color: var(--text2); margin-top: 2px; }
.iv-low { color: var(--safe) !important; }
.iv-high { color: var(--danger) !important; }
.iv-mid { color: var(--warning) !important; }

.iv-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 900px) {
    .iv-charts { grid-template-columns: 1fr; }
}
.iv-chart-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    position: relative;
    max-height: 300px;
}
.iv-chart-box h3 {
    font-size: 13px;
    color: var(--text2);
    margin-bottom: 6px;
    font-weight: 500;
}
.iv-chart-box canvas {
    width: 100% !important;
    max-height: 220px;
}

/* Skew到期月按钮 */
.skew-expiry-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.skew-btn {
    padding: 3px 8px;
    font-size: 11px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    color: var(--text2);
    cursor: pointer;
    transition: all 0.2s;
}
.skew-btn:hover { color: var(--text); background: var(--input-bg); }
.skew-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ==================== 盈亏计算器 ==================== */
.calc-panel {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    padding: 8px 0;
}
@media (max-width: 700px) {
    .calc-panel { grid-template-columns: 1fr; }
}
.calc-form {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.calc-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.calc-row label {
    font-size: 12px;
    color: var(--text2);
    font-weight: 500;
}
.calc-row input, .calc-row select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 13px;
    outline: none;
}
.calc-row input:focus, .calc-row select:focus {
    border-color: var(--accent);
}
.calc-result {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.calc-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 600px) {
    .calc-summary { grid-template-columns: repeat(2, 1fr); }
}
.calc-stat {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
}
.calc-stat-label { font-size: 11px; color: var(--text2); margin-bottom: 3px; }
.calc-stat-value { font-size: 16px; font-weight: 700; }
.calc-stat-hint { font-size: 10px; color: var(--text2); margin-top: 3px; opacity: 0.7; }

/* 计算器提示样式 */
.calc-hint {
    font-size: 11px;
    color: var(--text2);
    opacity: 0.7;
    margin-top: 2px;
    line-height: 1.3;
}
.strategy-desc {
    background: rgba(64,158,255,0.06);
    border-left: 2px solid var(--accent);
    padding: 6px 8px;
    border-radius: 0 4px 4px 0;
    margin-top: 4px;
    line-height: 1.4;
}
.hint-q {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 50%;
    cursor: help;
    vertical-align: middle;
    margin-left: 2px;
}
.calc-chart-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    position: relative;
    max-height: 280px;
}
.calc-chart-box h3 {
    font-size: 13px;
    color: var(--text2);
    margin-bottom: 6px;
    font-weight: 500;
}
.calc-chart-box canvas {
    width: 100% !important;
    max-height: 230px;
}
.calc-chart-note {
    font-size: 11px;
    color: var(--text2);
    margin: 0 0 8px 0;
    padding: 4px 8px;
    background: rgba(245,158,11,0.08);
    border-left: 3px solid var(--warning);
    border-radius: 0 4px 4px 0;
    line-height: 1.5;
}

/* 计算模式切换 */
.calc-mode-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    background: var(--bg);
    border-radius: 8px;
    padding: 3px;
}
.mode-btn {
    flex: 1;
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
}
.mode-btn:hover {
    background: var(--border);
}
.mode-btn.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(64,158,255,0.3);
}

/* 右键菜单 */
.ctx-menu {
    position: fixed;
    z-index: 99999;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    min-width: 200px;
    padding: 6px 0;
    animation: ctxFadeIn 0.15s ease;
}
@keyframes ctxFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.ctx-menu-header {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}
.ctx-menu-item {
    padding: 8px 14px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s;
}
.ctx-menu-item:hover {
    background: var(--hover-bg, rgba(64,158,255,0.1));
}

/* T型表行右键光标提示 */
.t-chain-table tbody tr {
    cursor: context-menu;
}

/* 右键提示条 */
.ctx-hint-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 8px;
    background: rgba(64,158,255,0.08);
    border: 1px solid rgba(64,158,255,0.2);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text2);
}
.ctx-hint-bar b {
    color: var(--accent);
}
.ctx-hint-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.ctx-hint-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text2);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.6;
}
.ctx-hint-close:hover {
    opacity: 1;
    color: var(--text);
}

/* ===== 异动雷达 + 热度排行 双栏 ===== */
.radar-hot-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 12px 0;
}
@media (max-width: 900px) {
    .radar-hot-row {
        grid-template-columns: 1fr;
    }
}

/* ===== 异动雷达 ===== */
.radar-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin: 0;
    overflow: hidden;
}
.radar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
}
.radar-title {
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}
.radar-icon {
    font-size: 12px;
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.radar-count {
    background: var(--danger);
    color: white;
    font-size: 10px;
    padding: 0px 5px;
    border-radius: 8px;
    font-weight: 500;
}
.radar-time {
    font-size: 11px;
    color: var(--text2);
}
.radar-batch {
    font-size: 10px;
    color: var(--accent, #3b82f6);
    background: rgba(59, 130, 246, 0.1);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    cursor: help;
}
.radar-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 10px;
    color: var(--text2);
    background: var(--input-bg);
    border-radius: 50%;
    cursor: help;
    margin-left: 4px;
}
.radar-hint:hover {
    background: var(--accent);
    color: white;
}
.radar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 4px;
    padding: 6px;
}
.radar-empty {
    padding: 20px 12px;
    text-align: center;
    color: var(--text-tertiary, #999);
    font-size: 13px;
}
.radar-empty-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.7;
}
.radar-card {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.radar-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.rc-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}
.rc-name {
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
}
.rc-badge {
    font-size: 9px;
    background: rgba(239,68,68,0.15);
    color: var(--danger);
    padding: 0px 3px;
    border-radius: 2px;
}
.rc-mid {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 2px;
}
.rc-type {
    font-size: 9px;
    padding: 0px 3px;
    border-radius: 2px;
    font-weight: 600;
}
.rc-type.call {
    background: rgba(239,68,68,0.2);
    color: #ef4444;
}
.rc-type.put {
    background: rgba(34,197,94,0.2);
    color: #22c55e;
}
.rc-strike {
    font-size: 11px;
    color: var(--text);
    font-weight: 500;
}
.rc-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rc-change {
    font-size: 11px;
    font-weight: 600;
}
.rc-change.up { color: #ef4444; }
.rc-change.down { color: #22c55e; }
.rc-tag {
    font-size: 9px;
    color: var(--warning);
    background: rgba(245,158,11,0.1);
    padding: 0px 3px;
    border-radius: 2px;
    white-space: nowrap;
}
/* 期货异动雷达标签样式 */
.rc-tag.tag-quick_rise { color: #ef4444; background: rgba(239,68,68,0.12); }
.rc-tag.tag-quick_drop { color: #22c55e; background: rgba(34,197,94,0.12); }
.rc-tag.tag-daily_high { color: #f97316; background: rgba(249,115,22,0.12); }
.rc-tag.tag-daily_low { color: #8b5cf6; background: rgba(139,92,246,0.12); }
.rc-tag.tag-limit_up { color: #dc2626; background: rgba(220,38,38,0.15); font-weight: 600; }
.rc-tag.tag-limit_down { color: #16a34a; background: rgba(22,163,74,0.15); font-weight: 600; }
.rc-price {
    font-size: 10px;
    color: var(--text-secondary);
    margin-left: auto;
}
.rc-vol {
    font-size: 9px;
    color: var(--text-secondary);
    margin-left: auto;
}
/* 热度排行专用 */
.rc-badge.hot-vol {
    background: rgba(59,130,246,0.15);
    color: var(--accent);
}
.rc-days-badge {
    font-size: 9px;
    padding: 0px 3px;
    border-radius: 2px;
    font-weight: 500;
}
.rc-days-badge.doom-0 { background: rgba(239,68,68,0.2); color: #ef4444; }
.rc-days-badge.doom-1 { background: rgba(245,158,11,0.2); color: #f59e0b; }
.rc-days-badge.doom-2, .rc-days-badge.doom-3 { background: rgba(59,130,246,0.2); color: #3b82f6; }

/* ========== 我的关注 ========== */
.fav-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}
.fav-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--header-bg);
}
.fav-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--warning);
}
.fav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
}
.fav-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--tag-bg);
    border: 1px solid var(--tag-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.fav-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.fav-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.fav-exchange {
    font-size: 10px;
    color: var(--text2);
}
.fav-expiry {
    font-size: 11px;
    color: var(--text2);
}
.fav-remove {
    background: none;
    border: none;
    color: var(--warning);
    font-size: 14px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    transition: transform 0.15s;
}
.fav-remove:hover {
    transform: scale(1.25);
}

/* 品种卡星标按钮 */
.tag-fav {
    background: none;
    border: none;
    font-size: 13px;
    color: var(--text2);
    opacity: 0.5;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: all 0.15s;
}
.tag-fav:hover {
    opacity: 1;
    transform: scale(1.2);
}
.tag-fav.active {
    color: var(--warning);
    opacity: 1;
}

/* ========== 末日期权筛选器 ========== */
.screener-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}
.screener-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    background: var(--header-bg);
    user-select: none;
}
.screener-header:hover {
    background: var(--input-bg);
}
.screener-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.screener-sub {
    font-size: 11px;
    color: var(--text2);
    margin-left: 8px;
}
.screener-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text2);
    font-size: 11px;
    padding: 2px 10px;
    cursor: pointer;
}
.screener-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.screener-body {
    border-top: 1px solid var(--border);
    padding: 10px 12px 12px;
}
.screener-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}
.screener-filter-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text2);
}
.screener-select {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 12px;
    padding: 3px 6px;
    cursor: pointer;
    outline: none;
}
.screener-input {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 12px;
    padding: 3px 8px;
    width: 90px;
    outline: none;
}
.screener-input:focus, .screener-select:focus {
    border-color: var(--accent);
}
.screener-loading, .screener-empty {
    text-align: center;
    padding: 20px 0;
    font-size: 12px;
    color: var(--text2);
}
.screener-table-wrap {
    overflow-x: auto;
}
.screener-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
}
.screener-table thead th {
    font-size: 11px;
    font-weight: 500;
    color: var(--text2);
    text-align: right;
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--card);
}
.screener-table thead th:first-child,
.screener-table thead th:nth-child(2),
.screener-table thead th:nth-child(3) {
    text-align: left;
}
.screener-table tbody td {
    padding: 5px 8px;
    text-align: right;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.screener-table tbody td:first-child,
.screener-table tbody td:nth-child(2),
.screener-table tbody td:nth-child(3) {
    text-align: left;
}
.screener-table tbody tr {
    cursor: pointer;
    transition: background 0.1s;
}
.screener-table tbody tr:hover {
    background: var(--input-bg);
}
.sc-name {
    font-weight: 600;
}
.sc-id {
    font-family: 'Consolas', monospace;
    font-size: 11px;
    color: var(--text2);
}
.sc-cost {
    font-weight: 600;
    color: var(--warning);
}
.sc-type-call { color: var(--danger); }
.sc-type-put { color: var(--safe); }
.sc-money {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
}
.sc-money.m-otm { background: rgba(139,148,158,0.15); color: var(--text2); }
.sc-money.m-atm { background: rgba(59,130,246,0.15); color: var(--soon); }
.sc-money.m-itm { background: rgba(245,158,11,0.15); color: var(--warning); }

/* ========== 持仓量分布图 ========== */
.oi-chart-section {
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.oi-chart-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}
.maxpain-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--warning);
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 5px;
    padding: 2px 8px;
    margin-left: auto;
}

/* ========== 人气榜浮动球 ========== */
.rank-float-ball {
    position: fixed;
    right: 16px;
    top: 55%;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    box-shadow: 0 4px 14px rgba(245,158,11,0.45);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    animation: rank-ball-float 3s ease-in-out infinite;
}
.rank-float-ball:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 20px rgba(245,158,11,0.65);
    animation-play-state: paused;
}
.rank-ball-icon {
    font-size: 18px;
    line-height: 1;
}
.rank-ball-text {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    letter-spacing: 1px;
}
@keyframes rank-ball-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@media (max-width: 640px) {
    .rank-float-ball { width: 48px; height: 48px; right: 10px; }
    .rank-ball-icon { font-size: 15px; }
    .rank-ball-text { font-size: 9px; }
}

/* ==================== 移动端适配（手机竖屏） ==================== */
@media (max-width: 640px) {
    #app { padding: 12px 10px; }
    .app-header h1 { font-size: 18px; }
    .app-header .subtitle { font-size: 12px; }

    /* 弹窗：占满屏幕，头部允许换行 */
    .modal-overlay { padding: 8px; }
    .modal-box, .modal-box.modal-wide { width: 100%; max-width: 100vw; max-height: 94vh; }
    .modal-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
        position: relative;
    }
    .modal-header h2 { font-size: 15px; flex: 1 1 auto; padding-right: 36px; }
    .modal-subtitle { flex: 1 1 100%; order: 3; font-size: 12px; }
    .modal-tabs {
        flex: 1 1 100%;
        order: 4;
        margin-left: 0;
        flex-wrap: wrap;
        gap: 6px;
    }
    .tab-btn { padding: 6px 10px; font-size: 12px; }
    .modal-close { position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; }
    .modal-body { padding: 10px 8px; }

    /* T型报价表：缩字号 + 横向滚动提示 */
    .t-chain-table { font-size: 11px; min-width: 780px; }
    .t-chain-table th { padding: 6px 4px; font-size: 10px; }
    .t-chain-table td { padding: 5px 4px; }
    .btn-detail-sm { min-width: 42px; padding: 2px 5px; font-size: 11px; }
    .table-wrap { -webkit-overflow-scrolling: touch; }

    /* 筛选器表格同样缩字号 */
    .screener-table { font-size: 11px; }
    .screener-table thead th, .screener-table tbody td { padding: 4px 6px; }
    .screener-table-wrap { -webkit-overflow-scrolling: touch; }

    /* 盈亏计算器/IV 面板内边距收紧 */
    .calc-form { padding: 10px; }
    .calc-summary { gap: 6px; }
    .calc-stat { padding: 8px; }
    .calc-stat-value { font-size: 14px; }
    .iv-summary { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .iv-card { padding: 8px 10px; }
    .iv-card-value { font-size: 16px; }

    /* 到期分组/雷达区域 */
    .radar-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .fav-list { padding: 8px; gap: 6px; }

    /* 页脚 */
    .app-footer { font-size: 11px; padding: 14px 8px; }
}

/* 超小屏微调 */
@media (max-width: 400px) {
    .stat-card { min-width: 84px; padding: 3px 4px; }
    .range-btn { padding: 4px 9px; }
    .t-chain-table { min-width: 720px; }
}

/* ========== 页头打赏金主榜（标语 + 前三大佬 + 今日鸣谢） ========== */
.glory-wrap {
    flex: 1;
    min-width: 0;
    max-width: 900px;
    margin: 0 20px;
}
.glory-slogan {
    font-size: 11px;
    font-weight: 700;
    color: #d97706;
    text-align: center;
    margin-bottom: 5px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.15s;
}
.glory-slogan:hover { color: #f97316; text-decoration: underline; }
.glory-banner {
    background: var(--card);
    border: 1px solid rgba(245,158,11,0.45);
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(245,158,11,0.12);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.glory-banner:hover {
    border-color: rgba(245,158,11,0.8);
    box-shadow: 0 4px 14px rgba(245,158,11,0.25);
}
.glory-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    border-bottom: 1px dashed rgba(245,158,11,0.3);
    white-space: nowrap;
    overflow: hidden;
}
.glory-label {
    font-size: 11px;
    font-weight: 700;
    color: #d97706;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}
.glory-medal {
    font-size: 12px;
    color: var(--text2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 170px;
}
.glory-medal b { color: var(--text); font-weight: 600; margin: 0 1px; }
.glory-medal i { font-style: normal; }
.glory-medal a { color: #1677ff; text-decoration: underline; }
.glory-medal a:hover { color: #f97316; }
.glory-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px;
}
.glory-scroll {
    flex: 1;
    min-width: 0;
    height: 20px;
    overflow: hidden;
}
.glory-scroll-inner {
    transition: transform 0.5s ease;
}
.glory-item {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: var(--text2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.glory-item b { color: #d97706; font-weight: 600; }
.glory-empty {
    flex: 1;
    font-size: 12px;
    color: var(--text2);
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* TOP3 三席全空时的招商占位：金色加粗，比今日榜空态更醒目 */
.glory-empty.glory-vacant {
    color: #d97706;
    font-weight: 600;
}
@media (max-width: 900px) {
    .glory-medal { max-width: 110px; }
}
@media (max-width: 640px) {
    /* 手机：页头已竖排，横幅占满全宽放标题下方 */
    .glory-wrap { margin: 0; max-width: 100%; width: 100%; }
    .glory-slogan { white-space: normal; font-size: 10px; }
    .glory-medal { max-width: 96px; }
    .glory-medal i, .glory-medal a { display: none; }  /* 小屏 TOP3 只显示名字不显示留言 */
}