/* ====================== AI交易面板 - 2025手机优先美化版 ====================== */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
    background: #0d1117;
    color: #c9d1d9;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* 价格滚动条 */
.price-ticker {
    background: #000;
    padding: 10px 0;
    border-bottom: 2px solid #00ff41;
    position: sticky;
    top: 0;
    z-index: 1000;
    overflow: hidden;
}
.ticker-content {
    display: flex;
    gap: 24px;
    animation: scroll 45s linear infinite;
    font-size: 14px;
    white-space: nowrap;
}
@keyframes scroll {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
.ticker-item { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}
.ticker-symbol { 
    font-weight: bold; 
    color: #00ff41; 
}
.ticker-price { 
    color: #fff; 
}
.ticker-change.positive { 
    color: #00ff41; 
}
.ticker-change.negative { 
    color: #ff4444; 
}
.ticker-loading { 
    color: #666; 
}

/* 主容器 */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px;
}

/* 标题 */
.header {
    text-align: center;
    margin: 20px 0 30px;
}
.header h1 {
    font-size: 1.9em;
    color: #00ff41;
    text-shadow: 0 0 10px rgba(0,255,65,0.3);
}
.last-update {
    color: #888;
    font-size: 0.9em;
    margin-top: 8px;
}

/* 卡片通用 */
.card {
    background: rgba(13,17,23,0.95);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(0,255,65,0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.card h2 {
    color: #00ff41;
    margin-bottom: 16px;
    font-size: 1.35em;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,255,65,0.3);
}

/* 统计网格 - 手机自动2列 */
.account-grid,
.runtime-grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}
.stat-item,
.runtime-item {
    background: rgba(0,255,65,0.06);
    padding: 14px;
    border-radius: 12px;
    text-align: center;
}
.stat-label,
.runtime-label {
    color: #8b949e;
    font-size: 0.85em;
    margin-bottom: 6px;
}
.stat-value,
.runtime-value {
    font-size: 1.35em;
    font-weight: bold;
    color: #00ff41;
}

.two-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

/* 把原来的 768 改成 1024：平板仍然单列，只有大屏电脑才并排两列 */
@media (min-width: 1200px) {
    .two-column { 
        grid-template-columns: 1fr 1fr; 
    }
}



/* 列表容器基础样式 */
.positions-list,
.decisions-list,
.trades-table {
    min-height: 320px;
    max-height: 70vh;
    border: 1px solid rgba(0,255,65,0.2);
    border-radius: 12px;
    background: rgba(0,0,0,0.3);
}

/* ===================== */
/*      当前持仓样式      */
/* ===================== */

/* 当前持仓：竖向滚动 + 横向滚动（小屏） */
.positions-list {
    overflow-y: auto;
    overflow-x: auto;
}

/* 每条持仓是一行表格：宽度固定为 720px，小屏一定会超出，从而出现横向滚动条 */
.position-item {
    width: 720px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,255,65,0.15);
}
.position-item:last-child {
    border-bottom: none;
}

.position-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.position-coin { 
    font-size: 1.1em; 
    font-weight: bold; 
}
.position-side {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.78em;
    font-weight: bold;
}
.position-side.long { 
    background: #00ff41; 
    color: #000; 
}
.position-side.short { 
    background: #ff4444; 
    color: #fff; 
}

/* 数值部分统一 4 列网格，让字段更规整 */
.position-details { 
    display: grid; 
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px 12px; 
    font-size: 0.86em; 
    color: #8b949e; 
}
.position-details > div {
    text-align: center;
}

.position-pnl, 
.position-roe {
    grid-column: 1 / -1;
    font-weight: bold;
    margin-top: 4px;
}
.position-pnl.positive, 
.position-roe.positive { 
    color: #00ff41; 
}
.position-pnl.negative, 
.position-roe.negative { 
    color: #ff4444; 
}

/* ===================== */
/*      AI 决策日志       */
/* ===================== */

.decisions-list {
    padding: 12px;
    overflow-y: auto;
    overflow-x: hidden;
}

.decision-item {
    padding: 12px 4px;
    border-bottom: 1px solid rgba(0,255,65,0.15);
}
.decision-item:last-child {
    border-bottom: none;
}
.decision-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}
.decision-action { 
    font-weight: bold; 
    font-size: 1.05em; 
}
.decision-time { 
    color: #666; 
    font-size: 0.85em; 
}
.decision-reason { 
    color: #aaa; 
    margin: 6px 0; 
}
.decision-meta { 
    display: flex; 
    gap: 16px; 
    font-size: 0.85em; 
    color: #888; 
    margin-top: 8px;
}

/* ===================== */
/*    交易历史表格样式    */
/* ===================== */

/* 交易历史：竖向 + 横向都可滚动 */
.trades-table {
    overflow-x: auto;
    overflow-y: auto;
    padding: 0;
}

/* 一行一笔：固定宽度 720px，保证在手机上需要左右滑动 */
.trade-header,
.trade-item {
    display: grid;
    grid-template-columns: 80px 70px 90px 90px 70px 100px 150px;  /* 币种 / 方向 / 开仓价 / 平仓价 / 数量 / 盈亏 / 时间 */
    column-gap: 12px;
    align-items: center;
    font-size: 0.88em;
    padding: 10px 16px;
    width: 720px;          /* 关键：强制内容宽于多数手机屏 */
}

/* 表头单元 & 数据单元居中，保证严格对齐 */
.trade-header > * ,
.trade-item > * {
    text-align: center;
}

/* 表头样式 */
.trade-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #050809;
    border-bottom: 1px solid rgba(0,255,65,0.35);
    font-weight: 600;
    color: #9be59f;
}

/* 数据行样式 */
.trade-item {
    border-bottom: 1px solid rgba(0,255,65,0.15);
}
.trade-item:last-child {
    border-bottom: none;
}

.trade-item:hover { 
    background: rgba(0,255,65,0.05); 
}

.trade-coin { 
    font-weight: bold; 
    color: #00ff41; 
}

.trade-side {
    font-weight: 600;
}
.trade-side.long { 
    color: #00ff41; 
}
.trade-side.short { 
    color: #ff4444; 
}

.trade-pnl {
    font-weight: 600;
}
.trade-pnl.positive { 
    color: #00ff41; 
}
.trade-pnl.negative { 
    color: #ff4444; 
}

.trade-time {
    font-size: 0.8em;
    color: #8b949e;
}

/* 图表 */
.chart-container {
    height: 340px;
    margin-top: 16px;
    border-radius: 12px;
    overflow: hidden;
}

/* 页脚 */
.footer {
    text-align: center;
    padding: 30px 20px;
    color: #666;
    font-size: 0.9em;
    border-top: 1px solid rgba(0,255,65,0.2);
}

/* 加载 & 无数据 */
.loading, 
.no-data {
    text-align: center;
    padding: 50px 20px;
    color: #666;
}

/* 滚动条 */
::-webkit-scrollbar { 
    width: 6px; 
    height: 6px;
}
::-webkit-scrollbar-track { 
    background: #0d1117; 
}
::-webkit-scrollbar-thumb { 
    background: #00ff41; 
    border-radius: 3px; 
}

/* 手机端额外优化 */
@media (max-width: 480px) {
    .header h1 { 
        font-size: 1.6em; 
    }
    .card { 
        padding: 16px; 
        border-radius: 12px; 
    }
    .stat-value, 
    .runtime-value { 
        font-size: 1.2em; 
    }
    .ticker-content { 
        font-size: 13px; 
        gap: 14px; 
    }

    /* ✅ 1. 手机端所有模块/行等宽：跟卡片一样占满屏幕 */
    .position-item,
    .trade-header,
    .trade-item {
        width: 100%;          /* 原来是 720px，改成占满容器 */
        padding: 8px 12px;
        font-size: 0.8em;
    }

    /* ✅ 2. 内容不换行：一行显示，多余用省略号，保持等高 */
    .position-header,
    .position-details > div,
    .position-pnl,
    .position-roe,
    .decision-header,
    .decision-reason,
    .decision-meta,
    .trade-header > *,
    .trade-item > * {
        white-space: nowrap;        /* 不换行 */
        overflow: hidden;           /* 超出隐藏 */
        text-overflow: ellipsis;    /* 显示 ... */
    }

    /* 可选：交易表格列稍微压缩一点，适配窄屏 */
    .trade-header,
    .trade-item {
        grid-template-columns: 70px 60px 80px 80px 70px 90px 120px;
    }
}