{# 账户流水:资金/交易 Tab · 交易所账单 · SSE #}
<div class="card full account-ledger-card" id="account-ledger-root" data-account-ledger="1">
    <div class="account-ledger-head">
        <div>
            <h2 style="margin-bottom:4px">账户流水</h2>
            <p class="muted account-ledger-desc">拉取交易所资金账户与交易账户账单 · 时间跟随顶栏 UTC 预设 · 约 2 分钟自动同步</p>
        </div>
        <div class="account-ledger-head-actions">
            <span class="muted" id="account-ledger-sync">—</span>
            <button type="button" class="btn-sm" id="account-ledger-refresh">立即同步</button>
        </div>
    </div>
    <div class="account-ledger-tabs" role="tablist">
        <button type="button" class="account-ledger-tab active" data-ledger-account="funding" role="tab" aria-selected="true">资金账户</button>
        <button type="button" class="account-ledger-tab" data-ledger-account="trading" role="tab" aria-selected="false">交易账户</button>
    </div>
    <p class="muted account-ledger-status" id="account-ledger-status"></p>
    <div class="account-ledger-table-wrap panel-scroll">
        <table class="account-ledger-table" id="account-ledger-table">
            <thead>
                <tr>
                    <th>时间(北京)</th>
                    <th>币种</th>
                    <th>类型</th>
                    <th>变动</th>
                    <th>余额</th>
                    <th>合约/备注</th>
                </tr>
            </thead>
            <tbody id="account-ledger-tbody">
                <tr><td colspan="6" class="muted">加载中…</td></tr>
            </tbody>
        </table>
    </div>
    <div class="account-ledger-pager" id="account-ledger-pager">
        <button type="button" class="btn-sm" id="account-ledger-prev" disabled>上一页</button>
        <span class="muted" id="account-ledger-page-info">—</span>
        <button type="button" class="btn-sm" id="account-ledger-next" disabled>下一页</button>
    </div>
</div>
<style>
.account-ledger-card { grid-column: 1 / -1; }
.account-ledger-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.account-ledger-head-actions { display: flex; align-items: center; gap: 10px; }
.account-ledger-tabs {
  display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
}
.account-ledger-tab {
  border: 1px solid rgba(140,160,200,.35);
  background: transparent; color: #c5cbe0;
  border-radius: 6px; padding: 6px 14px; cursor: pointer; font-size: .9rem;
}
.account-ledger-tab.active {
  background: #1f3a5a; border-color: #3d6f9c; color: #e8f1ff;
}
.account-ledger-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.account-ledger-table th, .account-ledger-table td {
  padding: 8px 10px; border-bottom: 1px solid rgba(120,130,160,.2); text-align: left;
}
.account-ledger-table th { color: #9aa3bd; font-weight: 600; }
.account-ledger-amt-pos { color: #3ecf8e; }
.account-ledger-amt-neg { color: #f07178; }
.account-ledger-pager {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin-top: 12px;
}
.account-ledger-status { min-height: 1.2em; margin: 0 0 8px; }
.account-ledger-table-wrap { max-height: min(60vh, 560px); overflow: auto; }
</style>