{# 实例数据统计:上方期权复盘 KPI/分组,下方资金曲线 #}
<div class="card ods-page full" id="options-data-stats" data-source-type="option_spot">
    <style>
        .ods-page{grid-column:1/-1}
        .ods-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
        .ods-head h2{margin:0;font-size:1.05rem}
        .ods-section{margin-bottom:22px}
        .ods-section-title{font-weight:650;font-size:.9rem;margin-bottom:4px}
        .ods-section-desc{font-size:.72rem;opacity:.7;margin:0 0 12px}
        .ods-kpi-row{
          display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
          gap:8px;margin-bottom:12px;
        }
        .ods-kpi-tile{
          border:1px solid rgba(127,127,127,.22);border-radius:10px;
          padding:10px 12px;background:rgba(0,0,0,.2);min-width:0;
        }
        .ods-kpi-label{font-size:.7rem;opacity:.7;margin-bottom:4px}
        .ods-kpi-value{font-size:.95rem;font-weight:650;letter-spacing:.01em;word-break:break-all}
        .ods-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
        .ods-stat-card{
          border:1px solid rgba(127,127,127,.22);border-radius:10px;
          padding:10px 12px;background:rgba(0,0,0,.16);font-size:.76rem;
        }
        .ods-stat-card-title{
          font-weight:650;margin-bottom:8px;font-size:.78rem;
          padding-bottom:6px;border-bottom:1px solid rgba(127,127,127,.18);
        }
        .ods-stat-row{
          display:flex;justify-content:space-between;align-items:baseline;gap:10px;
          padding:5px 0;border-bottom:1px solid rgba(127,127,127,.1);
        }
        .ods-stat-row:last-child{border-bottom:none;padding-bottom:0}
        .ods-stat-key{opacity:.9;min-width:0;overflow:hidden;text-overflow:ellipsis}
        .ods-stat-val{flex-shrink:0;font-variant-numeric:tabular-nums;opacity:.85}
        .ods-curve-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
        .ods-range-btn{
          font-size:.76rem;padding:4px 10px;border-radius:6px;cursor:pointer;
          border:1px solid rgba(127,127,127,.3);background:transparent;color:inherit;
        }
        .ods-range-btn.active{border-color:rgba(90,160,255,.7);background:rgba(90,160,255,.12)}
        .ods-curve-meta{font-size:.72rem;opacity:.75;margin-left:auto}
        .ods-curve-wrap{
          border:1px solid rgba(127,127,127,.22);border-radius:10px;
          padding:12px 10px 8px;background:rgba(0,0,0,.14);
        }
        .ods-curve-svg{width:100%;height:240px;display:block}
        .ods-pnl-pos{color:#3dd68c}
        .ods-pnl-neg{color:#f07178}
        @media (max-width:900px){.ods-kpi-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
        @media (max-width:640px){
          .ods-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
          .ods-curve-svg{height:200px}
        }
    </style>

    <div class="ods-head">
        <h2>数据统计</h2>
        <span class="muted" id="ods-status" style="font-size:.72rem"></span>
        <button type="button" class="btn-secondary" id="ods-reload-btn" style="font-size:.76rem;padding:4px 10px">刷新</button>
    </div>

    <section class="ods-section" aria-labelledby="ods-review-heading">
        <div class="ods-section-title" id="ods-review-heading">期权复盘统计</div>
        <p class="ods-section-desc">与「期权复盘」页统计同源;复盘页内统计仍保留。</p>
        <div id="ods-kpi" class="ods-kpi-row"></div>
        <div id="ods-stats-groups" class="ods-stats-grid"></div>
    </section>

    <section class="ods-section" aria-labelledby="ods-curve-heading">
        <div class="ods-section-title" id="ods-curve-heading">资金曲线</div>
        <p class="ods-section-desc">现金余额(交易账户+资金账户,不含权利金与浮盈);后台定时采样。</p>
        <div class="ods-curve-toolbar">
            <button type="button" class="ods-range-btn active" data-range="today">今日</button>
            <button type="button" class="ods-range-btn" data-range="7d">7日</button>
            <button type="button" class="ods-range-btn" data-range="30d">30日</button>
            <button type="button" class="ods-range-btn" data-range="all">全部</button>
            <span class="ods-curve-meta" id="ods-curve-meta">—</span>
        </div>
        <div class="ods-curve-wrap">
            <svg id="ods-curve-svg" class="ods-curve-svg" viewBox="0 0 640 240" preserveAspectRatio="none" role="img" aria-label="资金曲线"></svg>
        </div>
    </section>
</div>
<script src="/static/options_data_stats.js?v=1"></script>