:root {
  color-scheme: dark;
  --bg: #0b1020;
  --panel: #11182a;
  --panel-soft: #151e33;
  --text: #f4f7fb;
  --muted: #9ca9bd;
  --line: rgba(255,255,255,.09);
  --accent: #4fd1c5;
  --accent-2: #7dd3fc;
  --positive: #55d98b;
  --negative: #ff7b86;
  --warning: #f6c85f;
  --shadow: 0 22px 60px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; min-height:100vh; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:radial-gradient(circle at 85% 0%,rgba(79,209,197,.12),transparent 32rem),radial-gradient(circle at 10% 18%,rgba(125,211,252,.08),transparent 28rem),var(--bg); color:var(--text); }
a { color:inherit; text-decoration:none; }
.shell { width:min(1160px,calc(100% - 40px)); margin-inline:auto; }
.nav { display:flex; align-items:center; justify-content:space-between; min-height:76px; border-bottom:1px solid var(--line); }
.nav nav { display:flex; gap:24px; align-items:center; color:var(--muted); font-size:14px; }
.nav nav a:hover { color:var(--text); }
.brand { font-weight:750; letter-spacing:-.02em; }
.hero { padding:96px 0 70px; }
.eyebrow { color:var(--accent); letter-spacing:.16em; font-weight:800; font-size:12px; }
h1 { margin:18px 0 22px; font-size:clamp(48px,7vw,88px); line-height:.96; letter-spacing:-.055em; max-width:920px; }
h1 span { color:var(--muted); }
h2 { margin:10px 0 14px; font-size:clamp(28px,3vw,42px); letter-spacing:-.035em; }
.lead { color:var(--muted); max-width:760px; font-size:19px; line-height:1.7; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px; border-radius:12px; background:var(--accent); color:#071514; font-weight:800; box-shadow:0 12px 34px rgba(79,209,197,.15); border:0; cursor:pointer; }
.button.secondary { background:transparent; color:var(--text); border:1px solid var(--line); box-shadow:none; }
.button.small { min-height:36px; padding:0 13px; border-radius:9px; font-size:13px; }
.provider-row { margin-top:42px; display:flex; flex-wrap:wrap; gap:10px; }
.provider-row span { border:1px solid var(--line); background:rgba(255,255,255,.025); padding:9px 12px; border-radius:999px; color:var(--muted); font-size:13px; }
.provider-row b { color:var(--text); margin-left:5px; }
.grid { display:grid; gap:16px; }
.grid.three { grid-template-columns:repeat(3,1fr); }
.card { background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015)); border:1px solid var(--line); border-radius:20px; padding:26px; box-shadow:var(--shadow); }
.card-number { color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.14em; }
.card h2 { font-size:22px; }
.card p,.section p { color:var(--muted); line-height:1.7; }
.section { padding:100px 0 0; }
.section-heading { max-width:720px; margin-bottom:24px; }
.architecture { padding:34px; }
.flow { display:flex; gap:18px; flex-wrap:wrap; align-items:center; color:var(--muted); }
.flow strong { color:var(--text); }
.flow span { color:var(--accent); }
.divider { height:1px; background:var(--line); margin:26px 0; }
.split { display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:start; }
pre { margin:0; overflow:auto; border:1px solid var(--line); border-radius:18px; background:#080d18; padding:24px; color:#cdeef0; line-height:1.7; }
.footer { display:flex; justify-content:space-between; gap:20px; color:var(--muted); border-top:1px solid var(--line); padding:28px 0; margin-top:72px; font-size:13px; }
.footer-link { color:var(--accent-2); }

.dashboard-shell { width:min(1540px,calc(100% - 32px)); margin-inline:auto; }
.dashboard-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:34px 0 24px; }
.dashboard-header h1 { font-size:clamp(34px,5vw,58px); margin:8px 0 10px; }
.dashboard-header p { color:var(--muted); margin:0; }
.header-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.status-pill { border:1px solid var(--line); border-radius:999px; padding:10px 13px; color:var(--muted); white-space:nowrap; }
.status-dot { width:8px; height:8px; display:inline-block; border-radius:50%; background:var(--accent); margin-right:7px; box-shadow:0 0 16px rgba(79,209,197,.75); }
.status-pill.stale { border-color:rgba(246,200,95,.34); color:#f8daa0; }
.status-pill.stale .status-dot { background:var(--warning); box-shadow:0 0 16px rgba(246,200,95,.55); }
.warning { padding:14px 16px; border:1px solid rgba(246,200,95,.3); background:rgba(246,200,95,.08); border-radius:14px; color:#f8daa0; margin:0 0 16px; }
.health-strip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-bottom:12px; background:var(--line); }
.health-strip > div { background:rgba(17,24,42,.96); padding:13px 16px; display:flex; justify-content:space-between; gap:12px; align-items:center; min-width:0; }
.health-label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.health-strip strong { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.metrics { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; }
.metric { border:1px solid var(--line); border-radius:16px; padding:18px; background:linear-gradient(180deg,rgba(21,30,51,.98),rgba(17,24,42,.98)); min-width:0; }
.metric .label { font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); }
.metric .value { font-size:clamp(21px,2vw,27px); font-weight:800; margin-top:8px; letter-spacing:-.03em; overflow:hidden; text-overflow:ellipsis; }
.metric.positive .value { color:var(--positive); }
.metric.negative .value { color:var(--negative); }
.history-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(210px,280px); gap:18px; align-items:center; margin:18px 0; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,rgba(21,30,51,.92),rgba(17,24,42,.92)); }
.history-panel > div { min-width:0; }
.history-panel strong { display:block; margin-top:4px; font-size:15px; }
.history-panel p { color:var(--muted); margin:6px 0 0; line-height:1.5; font-size:13px; }
.history-panel label { display:grid; gap:7px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.history-kicker { color:var(--accent); font-size:11px; text-transform:uppercase; letter-spacing:.09em; font-weight:800; }
.leaderboards { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:18px 0; }
.ranking-card { background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.ranking-head { display:flex; justify-content:space-between; gap:12px; padding:13px 14px; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.ranking-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; transition:background .15s ease; }
.ranking-row:hover { background:rgba(255,255,255,.025); }
.ranking-row:last-child { border-bottom:0; }
.ranking-row > div { min-width:0; display:flex; flex-direction:column; gap:2px; }
.ranking-symbol { direction:rtl; text-align:left; }
.ranking-row span { color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; direction:rtl; text-align:left; }
.ranking-empty { padding:18px 14px; color:var(--muted); }
.quick-filters { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px; }
.filter-chip { border:1px solid var(--line); background:var(--panel); color:var(--muted); border-radius:999px; padding:8px 12px; cursor:pointer; font-size:12px; }
.filter-chip:hover { color:var(--text); border-color:rgba(79,209,197,.3); }
.filter-chip.active { background:rgba(79,209,197,.12); color:#b9fff8; border-color:rgba(79,209,197,.42); }
.toolbar { display:grid; grid-template-columns:minmax(240px,1.5fr) minmax(160px,.8fr) minmax(145px,.7fr) minmax(150px,.75fr) 110px auto auto auto; gap:8px; margin:10px 0 12px; align-items:center; }
input,select,button { font:inherit; }
input,select { width:100%; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:12px; min-height:44px; padding:0 13px; outline:none; }
input:focus,select:focus { border-color:rgba(79,209,197,.55); box-shadow:0 0 0 3px rgba(79,209,197,.06); }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:0 18px 48px rgba(0,0,0,.14); }
table { width:100%; border-collapse:separate; border-spacing:0; min-width:1680px; }
th,td { padding:13px 14px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; background:var(--panel); }
th:first-child,td:first-child,th:nth-child(2),td:nth-child(2) { text-align:left; }
th { position:sticky; top:0; background:#121a2d; color:var(--muted); font-size:11px; letter-spacing:.06em; text-transform:uppercase; z-index:4; }
th:first-child,td:first-child { position:sticky; left:0; z-index:3; min-width:96px; }
th:nth-child(2),td:nth-child(2) { position:sticky; left:96px; z-index:3; min-width:220px; max-width:280px; }
th:first-child,th:nth-child(2) { z-index:6; background:#121a2d; }
tbody tr:hover td { background:#151e33; }
.symbol { font-weight:800; color:var(--text); direction:rtl; text-align:left; }
.name { color:var(--muted); direction:rtl; overflow:hidden; text-overflow:ellipsis; }
.pos { color:var(--positive); }
.neg { color:var(--negative); }
.pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0 4px; color:var(--muted); }
.pagination-actions { display:flex; gap:8px; }
.page-button { min-height:40px; border-radius:10px; border:1px solid var(--line); padding:0 14px; background:var(--panel); color:var(--text); cursor:pointer; white-space:nowrap; }
.page-button:hover:not(:disabled) { border-color:rgba(79,209,197,.35); background:var(--panel-soft); }
.page-button:disabled { opacity:.35; cursor:not-allowed; }
.error { padding:18px; border:1px solid rgba(255,123,134,.25); background:rgba(255,123,134,.08); border-radius:14px; color:#ffc5ca; margin:16px 0; }

.history-dialog { width:min(560px,calc(100% - 32px)); padding:0; border:1px solid rgba(79,209,197,.28); border-radius:20px; background:#10182a; color:var(--text); box-shadow:0 34px 100px rgba(0,0,0,.55); }
.history-dialog::backdrop { background:rgba(4,8,18,.78); backdrop-filter:blur(5px); }
.history-dialog-card { padding:28px; }
.history-dialog h2 { margin:9px 0 12px; font-size:clamp(24px,4vw,34px); line-height:1.08; }
.history-dialog p { color:var(--muted); line-height:1.65; margin:0 0 14px; }
.history-dialog-eta { padding:13px 15px; border:1px solid rgba(246,200,95,.26); background:rgba(246,200,95,.07); border-radius:12px; color:#f7deb0 !important; }
.history-dialog-eta strong { color:#fff1c8; }
.history-dialog .button { margin-top:4px; width:100%; }

@media (max-width:1280px) {
  .toolbar { grid-template-columns:2fr 1fr 1fr 1fr; }
  .toolbar .button,.toolbar .page-button,#page-size { width:100%; }
  .metrics { grid-template-columns:repeat(4,1fr); }
  .health-strip { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1100px) {
  .leaderboards { grid-template-columns:repeat(2,1fr); }
  .health-strip { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
  .grid.three,.split { grid-template-columns:1fr; }
  .toolbar { grid-template-columns:1fr 1fr; }
  .history-panel { grid-template-columns:1fr; }
  .nav nav > a:not(.button) { display:none; }
  .hero { padding-top:68px; }
  .dashboard-header { flex-direction:column; }
  .header-actions { justify-content:flex-start; }
}
@media (max-width:560px) {
  .shell { width:min(100% - 24px,1160px); }
  .dashboard-shell { width:min(100% - 20px,1540px); }
  .metrics,.leaderboards,.toolbar,.health-strip { grid-template-columns:1fr; }
  .health-strip > div { min-height:48px; }
  .footer { flex-direction:column; }
  .dashboard-header { padding-top:24px; }
  .status-pill { white-space:normal; }
  th:nth-child(2),td:nth-child(2) { position:static; }
  .history-dialog-card { padding:22px; }
}