/*
 * Bfacai 综合量化终端 全局样式表
 * 版本: v3.8.7 (正式封版)
 * 更新日期: 2026-09-09
 * 变更说明: 
 * 1. 【持仓列表盈亏列四级阶梯色彩体系】：
 *    - [-3.0%, +10.0%] 保持当前沉稳灰白不刺眼 (.pnl-neutral)；
 *    - > +10.0% 积极浅绿 #34d399 (.pnl-profit-high)；
 *    - [-10.0%, -3.0%) 温和提示黄 #fbbf24 (.pnl-loss-mid)；
 *    - <= -10.0% 严正警示红 #f87171 (.pnl-loss-severe)；
 * 2. 【资金细项同级样式】：现金与挂单资金纯白粗体，占位符中性化对齐；
 * 3. 继承 v3.8.1 核心 ETF 与在途风控闭环。
 */
/* 全局样式重置与核心变量定义 */
:root {
    --bg-main: #06090e;
    --card-bg: rgba(13, 20, 32, 0.45);
    --card-border: rgba(255, 255, 255, 0.07);
    --card-border-focus: rgba(99, 102, 241, 0.4);
    
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    --color-primary: #6366f1; /* 炫彩紫 */
    --color-primary-glow: rgba(99, 102, 241, 0.2);
    --color-success: #10b981; /* 极客绿 */
    --color-danger: #ef4444; /* 警示红 */
    --color-warning: #f59e0b; /* 警告黄 */
    
    --font-sans: 'Outfit', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

html {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-sans);
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    overflow-x: clip;
    position: relative;
    line-height: 1.5;
}

/* 全局背景光效容器 (纯净裁剪，彻底杜绝横向滚动溢出) */
.bg-glow-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.bg-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(130px);
    pointer-events: none;
    opacity: 0.25;
}

.bg-glow-1 {
    top: -100px;
    left: -100px;
    background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
}

.bg-glow-2 {
    bottom: -100px;
    right: -100px;
    background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
}

/* 页面主容器 (严格物理居中与自适应) */
.app-container {
    max-width: 1400px;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-height: 100vh;
    box-sizing: border-box;
    align-self: center;
    position: relative;
    z-index: 1;
}

/* 头部导航区域 */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.8rem;
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    position: relative;
    z-index: 1000;
    overflow: visible;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.logo-icon {
    font-size: 1.8rem;
    background: linear-gradient(135deg, #a78bfa, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px var(--color-primary-glow));
}

.brand-text h1 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.brand-text p {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.system-status-bar {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-size: 0.85rem;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-divider {
    width: 1px;
    height: 16px;
    background: var(--card-border);
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--text-muted);
    display: inline-block;
}

.dot.online {
    background-color: var(--color-success);
    box-shadow: 0 0 8px var(--color-success);
    animation: pulse 2s infinite;
}

.dot.offline {
    background-color: var(--color-danger);
    box-shadow: 0 0 8px var(--color-danger);
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.refresh-counter {
    color: var(--text-muted);
    min-width: 86px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
}

.refresh-counter span {
    font-weight: 600;
    color: var(--color-primary);
    width: 22px;
    text-align: right;
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* 全局极细暗黑滚动条 (杜绝原生粗白滚动条) */
.table-wrapper,
.modal-body,
.log-preview-container,
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* 主内容网格布局 */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
}

/* 玻璃卡片基础容器 */
.card {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4);
}

.card-header {
    margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 0.8rem;
}

.position-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h2 {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: linear-gradient(to right, #ffffff, var(--text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 资产监控区 */
.balance-card {
    grid-column: span 12;
}

.balance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.balance-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1.2rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.balance-item .label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.balance-item .value {
    font-size: 1.6rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
}

.main-balance {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(59, 130, 246, 0.05));
    border-color: rgba(99, 102, 241, 0.25);
}

.main-balance .value {
    color: var(--text-primary);
}

.pnl-item .value.up {
    color: var(--color-success);
    text-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.pnl-item .value.down {
    color: var(--color-danger);
    text-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

/* 持仓卡片区 */
.position-card {
    grid-column: span 12;
}

.table-wrapper {
    overflow-x: auto;
    width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
}

th {
    color: var(--text-secondary);
    font-weight: 500;
    padding: 1rem;
    border-bottom: 2px solid var(--card-border);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

td {
    padding: 1.1rem 1rem;
    border-bottom: 1px solid var(--card-border);
}

tr:last-child td {
    border-bottom: none;
}

tr {
    transition: background 0.2s ease;
}

tr:hover td {
    background: rgba(255, 255, 255, 0.015);
}

.empty-row {
    text-align: center;
    color: var(--text-secondary);
    padding: 3rem 0;
}

/* 持仓表格元素修饰 */
.symbol-cell {
    font-weight: 700;
    color: #fff;
    font-family: 'Outfit', sans-serif;
}

.badge {
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
}

.badge.long {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge.short {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-danger);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.number-cell {
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
}

.pnl-cell.up {
    color: var(--color-success);
    font-weight: 600;
}

.pnl-cell.down {
    color: var(--color-danger);
    font-weight: 600;
}

/* 操作按钮列 */
.action-buttons {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.btn-sm {
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
}

.btn-warning-sm {
    background: linear-gradient(135deg, var(--color-warning), #d97706);
    color: #fff;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2);
}

.btn-warning-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.35);
}

.btn-danger-sm {
    background: linear-gradient(135deg, var(--color-danger), #b91c1c);
    color: #fff;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

.btn-danger-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35);
}

/* 页脚样式 */
.app-footer {
    text-align: center;
    padding: 2rem 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    border-top: 1px solid var(--card-border);
    margin-top: 2rem;
}

/* 弹窗 Toast */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
}

.toast {
    background: rgba(13, 20, 32, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--color-primary);
    padding: 0.9rem 1.5rem;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

.toast.show {
    transform: translateX(0);
}

.toast.toast-success {
    border-left-color: var(--color-success);
}

.toast.toast-danger {
    border-left-color: var(--color-danger);
}

/* 响应式调整 */
@media (max-width: 1024px) {
    .balance-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .app-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .balance-grid {
        grid-template-columns: 1fr;
    }
    .app-container {
        padding: 1rem;
    }
}

/* ==================== 设置页面专属样式 ==================== */
.btn-settings-icon {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    font-family: var(--font-sans);
}

.btn-settings-icon:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    margin-bottom: 5rem; /* 为底部保存栏留出空间 */
}

.settings-card {
    grid-column: span 6;
}

@media (max-width: 1024px) {
    .settings-card {
        grid-column: span 12;
    }
}

.header-subtitle {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.settings-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.settings-section {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 1.2rem;
}

.settings-section h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
    border-left: 3px solid var(--color-primary);
    padding-left: 0.5rem;
}

.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-title-row h3 {
    margin-bottom: 0;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.form-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: var(--font-sans);
    transition: all 0.3s ease;
    width: 100%;
}

.form-group input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.25);
    background: rgba(0, 0, 0, 0.45);
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon input {
    padding-right: 2.5rem;
}

.eye-icon {
    position: absolute;
    right: 0.8rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.95rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.eye-icon:hover {
    opacity: 1;
}

/* 按钮通用 */
.btn {
    padding: 0.65rem 1.2rem;
    font-size: 0.85rem;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), #4f46e5);
    color: #fff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
}

.btn-secondary-sm {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
    border-radius: 6px;
}

.btn-secondary-sm:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.settings-actions-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

/* 通知指示灯 */
.status-indicator {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.status-indicator .dot {
    width: 6px;
    height: 6px;
    background-color: var(--text-muted);
}

.status-indicator.active {
    color: var(--color-success);
    border-color: rgba(16, 185, 129, 0.2);
    background: rgba(16, 185, 129, 0.05);
}

.status-indicator.active .dot {
    background-color: var(--color-success);
    box-shadow: 0 0 6px var(--color-success);
}

/* 日志预览区 */
.log-preview-card {
    grid-column: span 12;
}

.log-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.log-preview-container {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1rem;
    height: 180px;
    overflow: hidden;
}

.log-screen {
    height: 100%;
    overflow-y: auto;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.6;
}

/* 底部保存条 */
.settings-save-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(13, 20, 32, 0.8);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
}

.save-tip {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .settings-save-bar {
        flex-direction: column;
        gap: 0.8rem;
        text-align: center;
        padding: 1rem;
    }
}

/* ==================== 日志大图页面专属样式 ==================== */
.logs-page-body {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.logs-app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 1.5rem;
    gap: 1rem;
}

.logs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1024px) {
    .logs-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

.logs-control-panel {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.control-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.control-item label {
    white-space: nowrap;
}

.checkbox-item {
    cursor: pointer;
    user-select: none;
}

.checkbox-item input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.form-select {
    padding: 0.45rem 1.8rem 0.45rem 0.85rem;
    cursor: pointer;
    border-radius: 6px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.btn-primary-sm {
    background: linear-gradient(135deg, var(--color-primary), #4f46e5);
    color: #fff;
    padding: 0.45rem 1rem;
    font-size: 0.8rem;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary-sm:hover {
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.35);
    transform: translateY(-1px);
}

.logs-main-screen {
    flex: 1;
    min-height: 0; /* 允许 flex item 缩减 */
    display: flex;
    flex-direction: column;
}

.log-board-wrapper {
    flex: 1;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1.2rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.log-board {
    flex: 1;
    overflow-y: auto;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 0.85rem;
    color: #e2e8f0;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 0.5rem;
}

/* 结构化日志行 */
.log-line-item {
    padding: 3px 6px;
    border-radius: 4px;
    word-break: break-all;
    white-space: pre-wrap;
    display: flex;
    gap: 0.8rem;
}

.log-line-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.log-time {
    color: #64748b;
    font-weight: 600;
    flex-shrink: 0;
}

.log-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    flex-shrink: 0;
    text-align: center;
    width: 65px;
    display: inline-block;
}

.log-message-text {
    flex: 1;
}

/* 日志级别着色主题 */
.log-info {
    color: #94a3b8;
}
.log-info .log-badge {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.log-warning, .log-warn {
    color: #f59e0b;
}
.log-warning .log-badge, .log-warn .log-badge {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.log-error {
    color: #ef4444;
}
.log-error .log-badge {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    animation: flash-error 2s infinite;
}

@keyframes flash-error {
    0% { background: rgba(239, 68, 68, 0.15); }
    50% { background: rgba(239, 68, 68, 0.3); }
    100% { background: rgba(239, 68, 68, 0.15); }
}

/* ==================== 设置表格专用样式 ==================== */
.settings-table td {
    padding: 0.85rem 0.8rem;
    font-size: 0.85rem;
}

.config-type-name {
    font-weight: 600;
    color: var(--text-primary);
}

.settings-table .badge {
    padding: 0.2rem 0.45rem;
    font-size: 0.7rem;
}

#val-api-key, #val-testnet-key, #val-tg-summary, #val-dd-summary {
    color: var(--text-secondary);
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==================== 模态弹窗 (Modal) 样式 ==================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 12, 0.45);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.modal-overlay.show,
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-container {
    background: rgba(13, 20, 32, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 16px;
    width: 480px;
    max-width: 90%;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.modal-overlay.show .modal-container,
.modal-overlay.active .modal-container {
    transform: scale(1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.modal-close {
    font-size: 1.45rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.modal-close:hover {
    color: #ffffff;
    transform: scale(1.15);
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* 提示修改未保存标签 */
.modified-tag {
    font-size: 0.7rem;
    color: var(--color-warning);
    margin-left: 0.4rem;
    font-style: italic;
    background: rgba(245, 158, 11, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(245, 158, 11, 0.2);
    display: inline-block;
}

/* ==================== 导航 Tab 及行情观察视图新增样式 ==================== */
.app-nav {
    display: flex;
    gap: 0.4rem;
    padding: 0;
    background: transparent;
    border: none;
    backdrop-filter: none;
    align-self: center;
}

.scanner-card {
    grid-column: span 12;
}


.nav-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    padding: 0.55rem 1.3rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-sans);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.nav-btn:hover:not(:disabled):not(.active) {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.nav-btn.active {
    background: var(--color-primary-glow);
    color: #fff;
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.2);
}

/* 行情观察打分与趋势修饰 */
.trend-long {
    color: var(--color-success);
    font-weight: 600;
}

.trend-short {
    color: var(--color-danger);
    font-weight: 600;
}

.score-high {
    color: #fbbf24; /* 金黄色 */
    font-weight: 700;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
}

.score-medium {
    color: #a78bfa; /* 紫色 */
    font-weight: 600;
}

.score-low {
    color: var(--text-muted);
}

.status-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    display: inline-block;
}

.status-badge.status-none {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.status-badge.status-real {
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.25);
    box-shadow: 0 0 6px rgba(99, 102, 241, 0.1);
}

.status-badge.status-sim {
    background: rgba(245, 158, 11, 0.12);
    color: #fde047;
    border: 1px solid rgba(245, 158, 11, 0.25);
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.1);
}

.status-badge.status-real-pos {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-success);
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.15);
    font-weight: 700;
}

.status-badge.status-sim-pos {
    background: rgba(16, 185, 129, 0.08);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.15);
    font-weight: 700;
}

.btn-secondary-light-sm {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-secondary-light-sm:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}
/* ==================== SVG 收益曲线图专有样式 ==================== */
.pnl-chart-dot {
    cursor: pointer;
    transition: all 0.2s ease;
}

.pnl-chart-dot:hover {
    fill: #fff !important;
    r: 6px !important;
    filter: drop-shadow(0 0 8px var(--color-primary));
}

.chart-axis-text {
    font-family: 'Outfit', var(--font-sans);
    font-size: 11px;
    fill: var(--text-secondary);
    text-anchor: middle;
}

.chart-tooltip-text {
    font-family: 'Outfit', var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    fill: #fff;
    text-anchor: middle;
}

/* ==================== 视图 6 策略管理专有样式 ==================== */

/* 毛玻璃 Switch 启停开关 */
.switch-container {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}

.switch-container input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-secondary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
}

input:checked + .switch-slider {
    background-color: rgba(99, 102, 241, 0.25);
    border-color: var(--color-primary);
}

input:checked + .switch-slider:before {
    transform: translateX(22px);
    background-color: var(--color-primary);
    box-shadow: 0 0 10px var(--color-primary);
}

/* 策略编辑操作按钮 */
.btn-edit-params {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.btn-edit-params:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
}

/* Modal 遮罩层 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 12, 0.45);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.modal-overlay.show,
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Modal 弹窗卡片 */
.modal-card {
    background: rgba(13, 20, 32, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 90%;
    max-width: 550px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(99, 102, 241, 0.15);
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.show .modal-card,
.modal-overlay.active .modal-card {
    transform: scale(1);
}

/* 弹窗头部 */
.modal-header {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: linear-gradient(to right, #ffffff, #a5b4fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.modal-close-btn:hover {
    color: var(--color-danger);
}

/* 弹窗主体 */
.modal-body {
    padding: 1.5rem;
    max-height: 70vh;
    overflow-y: auto;
}

/* 参数网格 */
.strategy-params-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}

.param-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.param-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

.param-name {
    color: var(--text-primary);
    font-weight: 600;
}

.param-desc {
    color: var(--text-muted);
    font-size: 0.75rem;
    max-width: 65%;
    text-align: right;
}

.param-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.param-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    color: var(--text-primary);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.param-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: rgba(0, 0, 0, 0.45);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.2);
}

/* 弹窗页脚 */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    border-top: 1px solid var(--card-border);
    padding-top: 1.2rem;
    margin-top: 1.5rem;
}

.btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 0.55rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.btn-save-params {
    background: var(--color-primary);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 0.55rem 1.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save-params:hover {
    background: #4f46e5;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    transform: translateY(-1px);
}

/* ==================== 视图 4 回测模块专有样式 ==================== */

.status-badge.status-running {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.25);
    position: relative;
    overflow: hidden;
}

.status-badge.status-running::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

.status-badge.status-success {
    background: rgba(16, 185, 129, 0.12);
    color: var(--color-success);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.status-badge.status-failed {
    background: rgba(239, 68, 68, 0.12);
    color: var(--color-danger);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* 进度条外壳 */
.progress-bar-container {
    width: 80px;
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: inline-block;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), #60a5fa);
    width: 0%;
    transition: width 0.3s ease;
}

/* select下拉选项贴合暗黑风格 */
select.param-input option {
    background-color: #0d1420;
    color: var(--text-primary);
}

/* ==========================================================================
   现货专区 (Spot) & 美股代币专属样式
   ========================================================================== */
.category-filter-bar {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.category-pill-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
}

.category-pill-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.category-pill-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 0 12px var(--color-primary-glow);
}

.badge-stock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-crypto {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.3);
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* 快捷交易挂件 */
.trade-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.8rem;
    align-items: flex-end;
}

.trade-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.trade-form-group label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.trade-input {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.85rem;
}

.trade-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* 行情观察雷达小卡片 */
.scanner-tag-high {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-success);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    font-size: 0.75rem;
}


/* ==================== 下拉二级导航 Dropdown Nav 样式 ==================== */
.app-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: none;
    box-shadow: none;
}

.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.55rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
}

.nav-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.nav-btn.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(59, 130, 246, 0.15));
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.4);
    font-weight: 600;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.2);
}

.nav-arrow {
    font-size: 0.65rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.nav-dropdown:hover .nav-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 120px;
    background: rgba(13, 21, 39, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    padding: 0.35rem;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: block;
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.dropdown-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.dropdown-item.active {
    color: #818cf8;
    background: rgba(99, 102, 241, 0.18);
    font-weight: 600;
}

/* ==================== 标的代码 Hover 微卡片 (TradingView 联动) ==================== */
.code-tooltip-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.code-symbol-link {
    font-size: 0.88rem;
    font-weight: 600;
    color: #f8fafc;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.code-symbol-link:hover {
    color: #60a5fa;
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
}

.code-tooltip {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 260px;
    max-width: 360px;
    background: #0d1522 !important; /* 100% 纯深色不透明实色背景 */
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.88);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    transition-delay: 0.25s; /* 移出时延迟 250ms 消失，保证鼠标从容移入浮层 */
    pointer-events: none;
    white-space: normal;
    text-align: left;
}

/* 桥接伪元素防止移入间隙失焦 */
.code-tooltip::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 10px;
}

.code-tooltip-container:hover .code-tooltip,
.code-tooltip:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s;
}

/* 第 1 行：中文名字 (股票代码) - 整体可点击直达 TradingView */
.code-tooltip a.tv-link {
    color: #93c5fd;
    font-weight: 600;
    font-size: 0.86rem;
    text-decoration: none;
    display: block;
    margin-bottom: 0.3rem;
    line-height: 1.4;
    cursor: pointer;
    transition: color 0.15s ease;
}

.code-tooltip a.tv-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* 第 2 行：英文全称 (弱化小字) */
.code-tooltip .tooltip-en {
    color: #94a3b8;
    font-size: 0.74rem;
    line-height: 1.35;
    margin-bottom: 0.25rem;
}

/* 第 3 行：赛道和购买理由 (弱化小字) */
.code-tooltip .tooltip-sub {
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.35;
}

.placeholder-card {
    grid-column: span 12;
    text-align: center;
    padding: 3.5rem 2rem;
    background: var(--card-bg);
    border: 1px dashed var(--card-border);
    border-radius: 16px;
}

.placeholder-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.8rem;
}

.placeholder-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}

/* =============================================================================
   v3.0 顶级金融视觉设计系统 (Design Tokens & Micro-typography)
   ============================================================================= */

/* 1. 金融等宽数字排版 */
.number-cell, .font-mono, td.number-cell, .tabular-nums {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: 0.2px;
}

/* 2. 盈亏四级阶梯色彩与字重体系 (中性降噪与风控告警) */
.pnl-neutral, .pnl-profit {
    color: #e2e8f0 !important; /* -3.0% <= 收益率 <= +10.0% 沉稳中性灰白 */
    font-weight: 400 !important;
}
.pnl-profit-high {
    color: #34d399 !important; /* > +10.0% 积极浅绿 */
    font-weight: 500 !important;
}
.pnl-loss-mid, .pnl-loss-mild {
    color: #fbbf24 !important; /* <-3.0% 且 > -10.0% 温和提示黄 */
    font-weight: 500 !important;
}
.pnl-loss-severe {
    color: #f87171 !important; /* <= -10.0% 严正警示红 */
    font-weight: 600 !important;
}

/* 分组行微通透背景与轻微上下间距 */
.group-header-row td {
    background: rgba(255, 255, 255, 0.035) !important;
    font-weight: 600;
    font-size: 0.76rem;
    color: #94a3b8;
    padding: 0.55rem 1rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    letter-spacing: 0.5px;
}

tr.group-header-row:hover td {
    background: rgba(255, 255, 255, 0.045) !important;
}

.fixed-table {
    table-layout: fixed;
    width: 100%;
}

.fixed-table th,
.fixed-table td {
    padding: 0.85rem 0.5rem;
    box-sizing: border-box;
}

.table-wrapper {
    overflow-x: hidden;
    width: 100%;
}

.group-title-base,
.group-title-main,
.group-title-exempt,
.group-title-cash {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    white-space: nowrap !important;
}

.group-title-base {
    color: #818cf8 !important;
}

.group-title-main {
    color: #60a5fa !important;
}

.group-title-exempt {
    color: #c084fc !important;
}

.group-title-cash {
    color: #34d399 !important;
}

/* 操作列悬浮唤醒 (Hover to Reveal) */
.action-buttons-cell {
    opacity: 0.3;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

tr:hover .action-buttons-cell,
.action-buttons-cell:hover,
.action-buttons-cell:focus-within {
    opacity: 1;
}

/* 3. 上盈下损风控状态类 */
.risk-text-muted {
    color: #64748b;
    font-size: 0.74rem;
}
.risk-near-sl {
    color: #ef4444 !important;
    font-weight: 600;
}
.risk-near-tp {
    color: #34d399 !important;
    font-weight: 600;
}
.risk-locked {
    color: #60a5fa !important;
    font-weight: 500;
}

/* 4. 50/50 哑铃模型进度条与中轴刻度线 */
.dumbbell-track-container {
    position: relative;
    width: 100%;
    margin-top: 0.3rem;
}

.dumbbell-track-wrapper {
    position: relative;
    height: 8px;
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
    display: flex;
}

.dumbbell-50-mark {
    position: absolute;
    left: 50%;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: rgba(255, 255, 255, 0.45);
    z-index: 5;
    pointer-events: none;
    transform: translateX(-50%);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

.dumbbell-50-label {
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    font-size: 0.68rem;
    color: var(--text-muted);
    pointer-events: none;
    font-family: var(--font-sans);
}

/* 5. 6+3 席位容量点阵车位可视化 */
.seat-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    margin-left: 6px;
    vertical-align: middle;
}

.seat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.seat-dot.active-main {
    background: #60a5fa;
    border-color: #93c5fd;
    box-shadow: 0 0 5px rgba(96, 165, 250, 0.6);
}

.seat-dot.active-exempt {
    background: #c084fc;
    border-color: #e9d5ff;
    box-shadow: 0 0 5px rgba(192, 132, 252, 0.6);
}

.seat-dot.warning {
    background: #f87171;
    border-color: #fca5a5;
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.8);
}

/* 6. 价格微呼吸变动提示 */
@keyframes flash-up {
    0% { background-color: rgba(16, 185, 129, 0.2); }
    100% { background-color: transparent; }
}

@keyframes flash-down {
    0% { background-color: rgba(239, 68, 68, 0.2); }
    100% { background-color: transparent; }
}

.price-flash-up {
    animation: flash-up 0.5s ease-out;
}

.price-flash-down {
    animation: flash-down 0.5s ease-out;
}

/* 7. 行级悬停操作区唤醒 */
tbody tr .action-buttons {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

tbody tr:hover .action-buttons {
    opacity: 1;
}

/* 8. 平仓防呆气泡确认 (Popconfirm) */
.popconfirm-bubble {
    position: absolute;
    right: 1rem;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(99, 102, 241, 0.15);
    z-index: 100;
    font-size: 0.78rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 175px;
    animation: popconfirm-fade 0.2s ease-out;
}

@keyframes popconfirm-fade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.popconfirm-msg {
    color: #f8fafc;
    font-weight: 500;
}

.popconfirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

/* 9. 操作列专用按钮样式 */
.btn-ghost-sm {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-ghost-sm:hover {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.05);
}

.btn-ghost-danger {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-ghost-danger:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
}

.btn-action-risk {
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-action-risk:hover {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.5);
    color: #c7d2fe;
}

/* 美股 4 栏去重资金总览与盈亏分析网格 */
.equity-balance-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

.pnl-metrics-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 1200px) {
    .equity-balance-grid,
    .pnl-metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .equity-balance-grid,
    .pnl-metrics-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =============================================================================
   美股开仓交易舱弹窗样式 (Equity Order Modal System)
   ============================================================================= */

.prototype-wrapper {
    width: 100%;
    max-width: 470px;
    background: rgba(13, 20, 32, 0.88);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    overflow: visible;
}

.proto-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 1.3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px 16px 0 0;
}

.proto-header-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.proto-header h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #f8fafc;
    margin: 0;
}

.market-status-tag {
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: normal;
}

/* 美股时钟状态微呼吸圆点规范 */
.market-status-tag .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.market-status-tag .dot.market-open {
    background-color: #10b981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}
.market-status-tag .dot.market-closed {
    background-color: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}

/* 顶部资金显示 (纯空格间隔，无圆点小零碎) */
.header-fund-info {
    font-size: 0.76rem;
    color: #94a3b8;
    font-family: 'JetBrains Mono', 'Outfit', monospace;
    text-align: right;
    line-height: 1.3;
}

.proto-body {
    padding: 1.25rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem; /* 统一所有大行之间的垂直呼吸间距 */
}

/* 确保各行无额外 margin 干扰 */
.symbol-price-grid,
.order-type-tabs,
.form-group,
.dual-calc-bar,
.tpsl-frameless-container {
    margin: 0;
}

/* 标的代码输入与名字/现价展示行 (严格对齐，右列宽度锁定防变形) */
.symbol-price-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    width: 100%;
}

.input-block {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: relative;
    min-width: 0; /* 允许网格项收缩，禁止被子元素撑大 */
    width: 100%;
}

.block-label {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
    height: 1.1rem;
    line-height: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.symbol-input-box {
    position: relative;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    padding: 0 0.85rem;
    height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.symbol-input-box:focus-within {
    border-color: rgba(99, 102, 241, 0.65) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18), 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    background: rgba(0, 0, 0, 0.42) !important;
}

.symbol-input-field {
    width: 100%;
    background: transparent;
    border: none;
    color: #60a5fa;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', 'Outfit', sans-serif;
    outline: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0;
}

.symbol-input-field::placeholder {
    color: #475569;
    font-size: 0.82rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* 全量美股搜索下拉菜单 */
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: none;
    max-height: 220px;
    overflow-y: auto;
    margin-top: 4px;
}

.autocomplete-item {
    padding: 0.6rem 0.85rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.12s;
    overflow: hidden;
    white-space: nowrap;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover, .autocomplete-item.active {
    background: rgba(99, 102, 241, 0.2);
}

.item-sym {
    font-weight: 700;
    color: #60a5fa;
    font-size: 0.86rem;
    font-family: 'JetBrains Mono', monospace;
    flex-shrink: 0;
    margin-right: 8px;
}

.item-name {
    font-size: 0.75rem;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* 右列：大字现价与阻尼呼吸 */
.price-box-wrapper {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.live-price-val {
    font-size: 1.35rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: #f8fafc;
    line-height: 1;
    letter-spacing: -0.5px;
    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.live-price-val.flash-up {
    color: #34d399 !important;
    text-shadow: 0 0 10px rgba(52, 211, 153, 0.4);
}

.live-price-val.flash-down {
    color: #f87171 !important;
    text-shadow: 0 0 10px rgba(248, 113, 113, 0.4);
}

/* 订单类型切换 Tab */
.order-type-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    padding: 0.2rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.order-tab {
    flex: 1;
    text-align: center;
    padding: 0.45rem 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.order-tab.active {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    font-weight: 600;
}

/* 表单输入组与双层 Focus Ring */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.75rem;
    color: #94a3b8;
}

.form-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    padding: 0.6rem 3.5rem 0.6rem 0.85rem;
    color: #f8fafc;
    font-size: 0.92rem;
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    outline: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-input:focus {
    border-color: rgba(99, 102, 241, 0.65) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18), 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    background: rgba(0, 0, 0, 0.42) !important;
}

.form-input.input-error {
    border-color: rgba(239, 68, 68, 0.65) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18) !important;
}

/* 市价单只读态：沉稳暗底、防误触、文字优雅浅灰 */
.form-input.input-readonly-market {
    background: rgba(0, 0, 0, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
    cursor: default;
    box-shadow: none !important;
}
.form-input.input-readonly-market::placeholder {
    color: #64748b;
    font-size: 0.8rem;
    font-family: 'Noto Sans SC', sans-serif;
}

.input-suffix {
    position: absolute;
    right: 0.85rem;
    font-size: 0.76rem;
    color: #64748b;
    font-family: 'Outfit', sans-serif;
    pointer-events: none;
}

.action-link-brand {
    color: #818cf8;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.action-link-brand:hover {
    color: #a5b4fc;
}

.dual-calc-bar {
    display: flex;
    gap: 0.75rem;
}

/* 止损价格组合行与微胶囊 (50/100/200) */
.sl-input-combo {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.sl-capsules {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
    width: 120px;
    justify-content: flex-end;
}

.sl-capsule-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    padding: 0.55rem 0;
    width: 36px;
    text-align: center;
    font-size: 0.72rem;
    font-family: 'JetBrains Mono', monospace;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.18s ease;
    line-height: 1;
}

.sl-capsule-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.38);
    color: #a5b4fc;
}

.sl-capsule-btn.active {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.65);
    color: #c7d2fe;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.32);
    font-weight: 600;
}

/* 止盈止损二维三列严格对齐矩阵 */
.tpsl-frameless-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.1rem;
}

.tpsl-header-row {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    width: fit-content;
}

.tpsl-header-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.tpsl-content-stream {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
}

.tpsl-content-stream.show {
    display: flex;
}

/* 止损标签三列对齐容器 */
.sl-label-grid {
    display: flex;
    align-items: baseline;
    font-size: 0.75rem;
    color: #94a3b8;
}

.sl-label-title {
    flex-shrink: 0;
    width: 70px;
}

.sl-label-mid {
    flex: 1;
    text-align: right;
    padding-right: 0.5rem;
}

.sl-label-right {
    width: 120px;
    text-align: right;
    color: #64748b;
    font-size: 0.72rem;
    flex-shrink: 0;
}

/* 止盈标签三列对齐容器 */
.tp-label-grid {
    display: flex;
    align-items: baseline;
    font-size: 0.75rem;
    color: #94a3b8;
}

.tp-label-title {
    flex-shrink: 0;
    width: 70px;
}

.tp-label-mid {
    flex: 1;
    text-align: right;
    padding-right: 0.5rem;
}

.tp-label-right {
    width: 120px;
    text-align: right;
    flex-shrink: 0;
    font-size: 0.74rem;
}

.pnl-hint-pure {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.2px;
    color: #94a3b8;
}

.pl-ratio-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

/* 状态与风控提示舱 (核心：固定高度占位，不管有没有报错，空间始终锁死，弹窗零抖动) */
.alert-status-zone {
    min-height: 20px;
    line-height: 20px;
    font-size: 0.74rem;
    padding: 0 0.2rem;
    font-family: 'Outfit', 'Noto Sans SC', sans-serif;
    color: transparent; /* 默认透明占位 */
    transition: color 0.18s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alert-status-zone.show-warning {
    color: #f59e0b; /* 琥珀黄警告文案平滑透出 */
}

.alert-status-zone.show-error {
    color: #ef4444; /* 警示红错误文案平滑透出 */
}

/* 动态提交按钮 */
.btn-submit-order {
    width: 100%;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    border: none;
    border-radius: 9px;
    padding: 0.8rem 1rem;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(59, 130, 246, 0.32);
    transition: all 0.2s ease;
}

.btn-submit-order:hover:not(:disabled) {
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.48);
    transform: translateY(-1px);
}

.btn-submit-order:disabled {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #64748b !important;
    box-shadow: none !important;
    cursor: not-allowed;
    transform: none;
}

/* 现金不足时的弱化双通道纯文本按钮 (无下划线，悬停微亮) */
.deficit-action-row {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.4rem 0;
    font-size: 0.74rem;
}

.deficit-action-link {
    color: #818cf8;
    text-decoration: none !important; /* 彻底移除下划线 */
    cursor: pointer;
    font-size: 0.74rem;
    font-family: 'Noto Sans SC', 'JetBrains Mono', sans-serif;
    transition: color 0.15s ease;
}

.deficit-action-link:hover {
    color: #a5b4fc; /* 悬停柔亮浅紫，干净通透 */
    text-decoration: none !important; /* 严禁出现下划线 */
}

.deficit-action-sgov {
    color: #38bdf8;
}

.deficit-action-sgov:hover {
    color: #7dd3fc; /* 悬停柔亮冰蓝 */
    text-decoration: none !important;
}

/* ==========================================================================
   v3.7 在途风控与平仓管理 专属视觉规范
   ========================================================================== */

/* 0. 持仓卡片取消独立滚动（跟随整页自然滚动，彻底消除灰色滚动条边框） */
.position-card {
    padding: 0 !important;
    overflow: visible !important;
}

#wrapper-equity-positions,
#wrapper-equity-orders {
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box;
    scrollbar-width: none !important; /* Firefox 隐藏滚动条 */
    -ms-overflow-style: none !important; /* IE 10+ 隐藏滚动条 */
}

#wrapper-equity-positions::-webkit-scrollbar,
#wrapper-equity-orders::-webkit-scrollbar,
.position-card::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 1. 持仓与委托订单 双 Tab 控件 */
.equity-card-tabs-cluster {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.equity-tab-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 500;
    padding: 0.45rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.equity-tab-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.equity-tab-btn.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    font-weight: 600;
}

.btn-danger-outline-sm {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #ef4444;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-danger-outline-sm:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
}

/* 2. 无框化纯文本关闭按钮 */
.modal-close-btn-frameless {
    background: transparent !important;
    border: none !important;
    color: #94a3b8;
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.modal-close-btn-frameless:hover {
    color: #ffffff !important;
    transform: scale(1.15);
}

/* 3. 弹窗内标的与行情展示 */
.header-pos-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.header-pos-num {
    font-family: 'JetBrains Mono', monospace;
    color: #f8fafc;
    font-weight: 600;
}

.symbol-price-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    margin-bottom: 1rem;
}

.symbol-left-col {
    display: flex;
    flex-direction: column;
}

.symbol-main-code {
    font-size: 1.2rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: #60a5fa;
    line-height: 1.2;
}

.symbol-sub-name {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.symbol-right-col {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.symbol-main-price {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: #f8fafc;
    line-height: 1.2;
    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.symbol-sub-cost {
    font-size: 0.74rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    margin-top: 0.15rem;
}

.symbol-cost-pnl {
    margin-left: 0.4rem;
    font-weight: 500;
}

.flash-up,
.symbol-main-price.flash-up {
    color: #10b981 !important;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.45) !important;
}

.flash-down,
.symbol-main-price.flash-down {
    color: #ef4444 !important;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.45) !important;
}

/* 4. 订单类型 Tab */
.order-type-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 8px;
    padding: 3px;
    gap: 4px;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.order-type-tabs .order-tab {
    flex: 1;
    text-align: center;
    padding: 0.48rem 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.order-type-tabs .order-tab:hover {
    color: var(--text-primary);
}

.order-type-tabs .order-tab.active {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-weight: 600;
}

/* 5. 输入块与微胶囊 */
.input-block {
    margin-bottom: 0.95rem;
}

.block-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: #cbd5e1;
    margin-bottom: 0.35rem;
}

.highlight-avail-num {
    color: #60a5fa;
    font-family: 'JetBrains Mono', monospace;
}

.input-with-capsules {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
}

.capsules-match-open {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.btn-capsule-open-style {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-family: 'JetBrains Mono', monospace;
    padding: 0.38rem 0.45rem;
    min-width: 44px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
}

.btn-capsule-open-style:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0 0.8rem;
    height: 42px;
    min-width: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-wrapper:focus-within {
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);
}

.input-wrapper.error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.35) !important;
}

.input-wrapper.disabled {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    cursor: not-allowed;
}

.input-field {
    background: transparent;
    border: none;
    color: #f8fafc;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    width: 100%;
    outline: none;
}

.input-field:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

.input-suffix {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    margin-left: 0.4rem;
}

/* 6. 预计盈亏与总额 */
.estimate-panel {
    margin: 1rem 0 0.6rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0 0.2rem;
}

.estimate-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}

.estimate-label {
    color: var(--text-muted);
}

.estimate-val {
    color: #f8fafc;
    font-family: 'JetBrains Mono', monospace;
}

.pnl-hint-subtle {
    font-size: 0.74rem;
    font-family: 'JetBrains Mono', monospace;
}

.pl-ratio-inline {
    font-size: 0.74rem;
    color: var(--text-muted);
}

/* 7. 操作大按钮与错误内化 (Button-Feedback) */
.btn-submit-action {
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit-action.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.32);
}

.btn-submit-action.danger:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45);
    transform: translateY(-1px);
}

.btn-submit-action.primary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.32);
}

.btn-submit-action.primary:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
    transform: translateY(-1px);
}

.btn-submit-action:disabled {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    cursor: not-allowed;
    transform: none;
}

/* 8. 委托订单 8 列表格与撤单按钮 */
.btn-row-cancel {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.32);
    color: #ef4444;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-row-cancel:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
}

/* 9. 【视觉走查整改 T-4/T-5】持仓与委托表格基准垂直对齐与居中轴心精准统驭 */
#equity-positions-table th:first-child,
#equity-positions-table td:first-child,
#equity-orders-table th:first-child,
#equity-orders-table td:first-child {
    padding-left: 1.5rem !important;
}

/* 委托订单表格末列保持 1.5rem 右对齐 */
#equity-orders-table th:last-child,
#equity-orders-table td:last-child {
    padding-right: 1.5rem !important;
}

/* 止盈止损列：表头与下方风控内容居中对齐，两行文本形成独立居中卡片块 */
#equity-positions-table th:nth-child(9) {
    text-align: center !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

#equity-positions-table td:nth-child(9) {
    text-align: center !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.risk-guard-cell-block {
    display: inline-block;
    text-align: left;
}

/* 操作列：表头与按钮组绝对垂直居中对齐 */
#equity-positions-table th:last-child {
    text-align: center !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

#equity-positions-table td:last-child {
    text-align: center !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

#equity-positions-table .action-buttons-cell {
    justify-content: center !important;
}

/* 止盈止损单元格点击穿透与未设置占位符 */
.clickable-risk-cell {
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.clickable-risk-cell:hover {
    background-color: rgba(99, 102, 241, 0.08) !important;
}

.clickable-risk-cell:hover .risk-guard-cell-block {
    filter: brightness(1.2);
}

.clickable-risk-cell:hover .risk-empty-placeholder {
    color: #94a3b8 !important;
    text-shadow: 0 0 8px rgba(148, 163, 184, 0.4);
}

.risk-empty-placeholder {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: normal;
    display: inline-block;
    user-select: none;
    transition: color 0.2s ease;
}