/* ==========================================================================
   全局公共样式（PC）
   说明：所有 PC 页面通用样式集中于此；页面特有样式单独建文件
   ========================================================================== */

/* ---------- 基础重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    color: #333;
    background: #f4f6f9;
    -webkit-font-smoothing: antialiased;
}
a { color: #1e9fff; text-decoration: none; }
a:hover { color: #16b777; }
ul, ol { list-style: none; }
input, button, select, textarea { font-family: inherit; font-size: inherit; }

/* 等宽数字（金额、份数对齐） */
.num, .number {
    font-family: "SF Mono", "Consolas", "Menlo", monospace;
    font-variant-numeric: tabular-nums;
}

/* ---------- 顶部导航 ---------- */
.header {
    height: 56px;
    background: #2f4056;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.header .nav-wrap {
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
}
.header .logo {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-right: 40px;
}
.header .logo a { color: #fff; }
.header .nav { display: flex; gap: 8px; flex: 1; }
.header .nav a {
    color: #c7d0db;
    padding: 8px 14px;
    border-radius: 4px;
    transition: all .15s;
}
.header .nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.header .nav a.active { color: #fff; background: #16b777; }
.header .user-area { display: flex; align-items: center; gap: 12px; color: #c7d0db; }
.header .user-area a { color: #c7d0db; }
.header .user-area a:hover { color: #fff; }
/* 敏感信息开关（眼睛图标） */
.header .user-area .btn-eye { display: inline-flex; align-items: center; font-size: 17px; line-height: 1; }

/* ---------- 主体容器 ---------- */
.main { min-height: calc(100vh - 56px - 60px); padding: 20px 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- 页脚 ---------- */
.footer {
    height: 60px;
    background: #fff;
    border-top: 1px solid #eee;
    color: #999;
    font-size: 12px;
}
.footer .container { height: 100%; display: flex; align-items: center; justify-content: center; }

/* ---------- 卡片 ---------- */
.card {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    margin-bottom: 16px;
    overflow: hidden;
}
.card .card-head {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card .card-head .title { font-size: 16px; font-weight: 600; color: #2f4056; }
.card .card-body { padding: 20px; }

/* ---------- 工具条 ---------- */
.toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.toolbar .left { display: flex; align-items: center; gap: 10px; flex: 1; }
.toolbar .right { display: flex; align-items: center; gap: 10px; }
.toolbar .filter-item { display: flex; align-items: center; gap: 6px; }
.toolbar .filter-item label { color: #666; font-size: 13px; white-space: nowrap; }

/* ---------- 统计网格 ---------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.stat-box {
    background: #fff;
    border-radius: 6px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.stat-box .label { color: #888; font-size: 13px; margin-bottom: 8px; }
.stat-box .value { font-size: 24px; font-weight: 600; color: #2f4056; }
.stat-box .sub { color: #999; font-size: 12px; margin-top: 4px; }

/* ---------- 盈亏色（A股习惯：红涨绿跌） ---------- */
.text-up, .text-profit, .text-rise { color: #ff4d4f; }
.text-down, .text-loss, .text-fall { color: #52c41a; }
.text-muted { color: #999; }
.text-primary { color: #16b777; }
.text-warn { color: #ffb800; }
.text-strong { font-weight: 600; }

/* ---------- 策略卡片列表 ---------- */
.strategy-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.strategy-card {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    padding: 18px;
    transition: box-shadow .2s, transform .2s;
    cursor: pointer;
    border: 1px solid transparent;
}
.strategy-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .08); transform: translateY(-2px); border-color: #e6f5ec; }
.strategy-card .head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.strategy-card .name { font-size: 16px; font-weight: 600; color: #2f4056; }
.strategy-card .code { font-size: 12px; color: #999; margin-top: 2px; }
.strategy-card .price { text-align: right; }
.strategy-card .price .now { font-size: 20px; font-weight: 600; color: #2f4056; font-variant-numeric: tabular-nums; }
.strategy-card .price .change { font-size: 11px; margin-top: 2px; white-space: nowrap; }
.strategy-card .metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.strategy-card .metric .label { color: #999; font-size: 12px; margin-bottom: 2px; }
.strategy-card .metric .value { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.strategy-card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px dashed #f0f0f0; }
.strategy-card .foot .ops { display: flex; gap: 6px; }

/* ---------- 空状态 ---------- */
.empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #999;
}
.empty .empty-text { font-size: 14px; line-height: 22px; }

/* ---------- 详情字段表 ---------- */
.field-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.field-list .field { display: flex; flex-direction: column; gap: 4px; }
.field-list .field .label { color: #999; font-size: 12px; }
.field-list .field .value { font-size: 15px; font-weight: 500; color: #2f4056; font-variant-numeric: tabular-nums; }

/* ---------- 标签徽章 ---------- */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.4;
}
.badge-buy { background: #fff1f0; color: #ff4d4f; }
.badge-sell { background: #f6ffed; color: #52c41a; }
.badge-gray { background: #f5f5f5; color: #999; }

/* ---------- 表格内的对齐辅助 ---------- */
.layui-table td.num, .layui-table th.num { font-variant-numeric: tabular-nums; text-align: right; }
.layui-table .row-buy td.type-cell { color: #ff4d4f; }
.layui-table .row-sell td.type-cell { color: #52c41a; }
/* 类型列展示“网格买入/手动卖出”等，防止文字换行折行 */
.layui-table td.type-cell { white-space: nowrap; }

/* ---------- 分页容器 ---------- */
.pager { text-align: right; margin-top: 14px; }

/* ---------- 工具类 ---------- */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }
.hidden { display: none !important; }

/* ---------- 弹层（layer） ---------- */
/* 修复：弹层内 layui 表单下拉超出内容区底部时，被 .layui-layer-content 的 overflow:auto 裁剪（下拉被遮挡），改为可见 */
.layui-layer-page .layui-layer-content { overflow: visible; }

/* ---------- 表单控件（PC 轻量尺寸） ---------- */
/* 覆盖 layui 默认标签宽度（80px），避免 4 字中文标签换行 */
.layui-form-label {
    width: 96px;
    padding: 9px 12px;
    white-space: nowrap;
    color: #555;
}
.layui-input-block { margin-left: 110px; }

.layui-select-sm {
    height: 32px;
    line-height: 32px;
    padding: 0 28px 0 10px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    font-size: 13px;
    min-width: 160px;
}
.layui-select-sm:focus { border-color: #16b777; }
.layui-input-sm {
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    font-size: 13px;
}
.layui-input-sm:focus { border-color: #16b777; }

/* ---------- 日期区间 Tab（统计页通用） ---------- */
.range-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.range-tabs .range-tab {
    padding: 6px 16px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
    color: #666;
    font-size: 13px;
    cursor: pointer;
}
.range-tabs .range-tab:hover { border-color: #16b777; color: #16b777; }
.range-tabs .range-tab.active { background: #16b777; border-color: #16b777; color: #fff; }