/* Layout helpers */
.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns:repeat(2, 1fr); }
.grid-3 { grid-template-columns:repeat(3, 1fr); }
.grid-auto-fill { grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
.grid-auto-fill-wide { grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); }

.row { display:flex; gap:12px; flex-wrap:wrap; }
.row-center { align-items:center; }
.row-between { justify-content:space-between; }
.row-end { justify-content:flex-end; }

.stack { display:flex; flex-direction:column; gap:12px; }
.stack-lg { gap:20px; }
.stack-sm { gap:6px; }

.muted { color:var(--text2); }
.strong { font-weight:700; }
.small { font-size:12px; }
.mono { font-family:'JetBrains Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }

.section-heading { font-size:14px; font-weight:800; letter-spacing:-.1px; margin:0 0 12px; }
.divider { height:1px; background:var(--border); margin:12px 0; }

.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.card-title { font-size:13px; font-weight:800; letter-spacing:-.1px; }

/* Page container */
#content-area { min-height:calc(100vh - 140px); overflow-x:hidden; padding:10px 20px 60px; }

/* Table base */
.data-table-wrap { overflow-x:auto; margin-bottom:16px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); -webkit-overflow-scrolling:touch; }
.data-table { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; }
.data-table th { background:var(--bg); padding:10px 12px; text-align:left; font-weight:700; font-size:11px; color:var(--text2); border-bottom:2px solid var(--border); cursor:pointer; user-select:none; white-space:nowrap; position:sticky; top:0; z-index:3; text-transform:uppercase; letter-spacing:.4px; }
[data-theme="dark"] .data-table th { background:#1c2129; }
.data-table th:hover { color:var(--accent); }
.data-table th.sorted { color:var(--accent); }
.data-table td { padding:8px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table tr:hover td { background:rgba(var(--accent-rgb),.03); }
.data-table tr:nth-child(even) td { background:rgba(0,0,0,.01); }
.data-table tr:nth-child(even):hover td { background:rgba(var(--accent-rgb),.04); }
.data-table .num { text-align:right; font-variant-numeric:tabular-nums; font-family:'JetBrains Mono',monospace; font-size:11.5px; }
.data-table .positive { color:var(--green); font-weight:700; }
.data-table .negative { color:var(--red); font-weight:700; }

[data-theme="dark"] .data-table tr:nth-child(even) td { background:rgba(255,255,255,.015); }

@media (max-width: 768px) {
  #content-area { padding:10px 14px 60px; }
}

/* Pagination */
.pager { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:12px; }
.pager button { padding:4px 10px; font-size:12px; border:1px solid var(--border); background:var(--surface); border-radius:6px; cursor:pointer; color:var(--text2); font-weight:600; }
.pager button:hover:not(:disabled) { color:var(--accent); border-color:var(--accent); }
.pager button:disabled { opacity:.4; cursor:not-allowed; }
.pager .current { color:var(--accent); border-color:var(--accent); background:rgba(var(--accent-rgb),.08); }
.pager .info { font-size:11.5px; color:var(--text2); margin:0 8px; }