/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:            #f8fafc;
  --surface:       #ffffff;
  --surface2:      #f1f5f9;
  --border:        #e2e8f0;
  --border-subtle: #f1f5f9;
  --text:          #0f172a;
  --muted:         #64748b;
  --primary:       #2563eb;
  --primary-dk:    #1d4ed8;
  --green:         #16a34a;
  --red:           #dc2626;
  --radius:        0.5rem;
  --shadow:        0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  /* Aliases for simulator */
  --accent:        #2563eb;
  --bg-card:       #ffffff;
  --bg-input:      #f8fafc;
  --bg-hover:      #f1f5f9;
  --text-muted:    #64748b;
}

body.dark {
  --bg:            #0f172a;
  --surface:       #1e293b;
  --surface2:      #1e293b;
  --border:        #334155;
  --border-subtle: #253047;
  --text:          #f8fafc;
  --muted:         #94a3b8;
  /* Aliases */
  --bg-card:       #1e293b;
  --bg-input:      #0f172a;
  --bg-hover:      #253047;
  --text-muted:    #94a3b8;
  --green:         #22c55e;
}

body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; }
a { color: var(--primary); }
.muted { color: var(--muted); }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; gap: 1rem; }

/* ── Nav links (shared between header and top-nav) ──────────────────────── */
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 8px; }
.nav-link {
  padding: 6px 14px; border-radius: 8px; font-size: 0.9rem; font-weight: 500;
  color: var(--muted); text-decoration: none; transition: background .12s, color .12s;
}
.nav-link:hover { background: var(--surface2); color: var(--text); }
.nav-link.active { background: var(--primary); color: #fff; }

/* ── Standalone top-nav (simulator.php) ──────────────────────────────────── */
.top-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.nav-inner { display: flex; align-items: center; height: 4rem; gap: 1rem; }
.nav-logo {
  font-size: 1.25rem; font-weight: 700; text-decoration: none;
  background: linear-gradient(90deg, #2563eb, #1d4ed8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  flex-shrink: 0;
}
.top-nav .nav-links { margin-left: 0; }

/* ── Logo ─────────────────────────────────────────────────────────────────── */
.logo { display: flex; align-items: center; gap: .5rem; }
.logo-icon {
  background: linear-gradient(135deg, #2563eb, #1e40af);
  border-radius: .375rem; padding: .375rem;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.logo-icon-sm { padding: .25rem; }
.logo-text { font-size: 1.25rem; font-weight: 700;
  background: linear-gradient(90deg, #2563eb, #1d4ed8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.icon-btn { background: none; border: none; cursor: pointer; color: var(--text);
  display: flex; align-items: center; padding: .5rem; border-radius: var(--radius);
  transition: background .15s; }
.icon-btn:hover { background: var(--surface2); }

.btn { cursor: pointer; border-radius: var(--radius); font-size: .875rem; font-weight: 500;
  padding: 0 .75rem; height: 2rem; display: inline-flex; align-items: center; gap: .375rem;
  transition: background .15s, border-color .15s; border: 1px solid transparent; }
.btn-outline { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-outline:hover { background: var(--surface2); }
.btn-blue { background: #dbeafe; color: #1d4ed8; border-color: transparent; }
.btn-blue:hover { background: #bfdbfe; }

/* ── Main content ─────────────────────────────────────────────────────────── */
main { padding: 1.5rem 0; }
.page-intro { margin-bottom: 1.5rem; }
.page-intro h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: .5rem; }

/* ── Stat cards ───────────────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 768px) { .stats-grid { grid-template-columns: 1fr; } }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.5rem; }
.stat-label { font-size: .875rem; font-weight: 500; color: var(--muted);
  display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.stat-value { font-size: 1.5rem; font-weight: 700; margin-bottom: .25rem; }
.stat-sub { font-size: .75rem; color: var(--muted); }

/* ── Card ─────────────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 1.5rem; overflow: hidden; }
.card-header { padding: 1.5rem 1.5rem .75rem; }
.card-header h2 { font-size: 1.25rem; font-weight: 600; }
.card-header .muted { font-size: .875rem; margin-top: .25rem; }

.controls-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; }
.action-btns { display: flex; align-items: center; gap: .5rem; }

/* ── Token filters ────────────────────────────────────────────────────────── */
.token-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.token-btn {
  cursor: pointer; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); border-radius: .375rem; height: 2rem; padding: 0 .5rem;
  font-size: .75rem; font-weight: 500; transition: all .15s;
  display: inline-flex; align-items: center; gap: 5px;
}
.token-btn.active { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.token-btn:hover:not(.active) { background: var(--surface2); }
.reset-btn { color: #1d4ed8; border-color: transparent; background: none; }
.reset-btn:hover { background: var(--surface2); }

/* ── Filter panel ─────────────────────────────────────────────────────────── */
.filter-panel { padding: 1rem 1.5rem 1.5rem; border-top: 1px solid var(--border); background: var(--surface2); }
.filter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 768px) { .filter-grid { grid-template-columns: 1fr 1fr; } }
.filter-field { display: flex; flex-direction: column; gap: .375rem; }
.filter-field span { font-size: .75rem; font-weight: 500; }
.filter-field input, .filter-field select {
  height: 2rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); padding: 0 .75rem; font-size: .875rem;
}
.network-filter { margin-top: 1rem; }
.filter-label { font-size: .75rem; font-weight: 500; display: block; margin-bottom: .5rem; }
.network-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.chain-chip {
  cursor: pointer; border-radius: .25rem; padding: .125rem .5rem; font-size: .75rem;
  font-weight: 500; background: var(--surface); border: 1px solid var(--border);
  transition: all .15s;
}
.chain-chip.active { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }

/* ── Table ────────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: .75rem 1rem; text-align: left; font-size: .75rem; font-weight: 500;
  color: var(--muted); background: var(--surface2); border-bottom: 1px solid var(--border);
  white-space: nowrap; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th.text-right { text-align: right; }
th.apy-col { color: var(--primary); }
td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: .875rem; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface2); }

.sort-icon { font-size: .65rem; margin-left: .25rem; }
.apy-value { color: var(--green); font-weight: 600; }
.chain-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .375rem; }

/* ── Row logos ── */
.row-asset-wrap, .row-proto-wrap, .row-chain-wrap {
  display: inline-flex; align-items: center; gap: 6px;
}
.row-token-logo, .row-proto-logo {
  width: 20px; height: 20px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.row-chain-logo {
  width: 18px; height: 18px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
/* Negative percentage styling */
.pct-neg { color: var(--red, #ef4444); }

/* ── Filter button token logos ── */
.filter-token-logo {
  width: 16px; height: 16px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.sub-label { font-size: .7rem; color: var(--muted); }
.detail-btn { font-size: .75rem; color: var(--text); border: 1px solid var(--border);
  background: var(--surface); border-radius: var(--radius); padding: 0 .625rem; height: 2rem;
  cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; transition: background .15s; text-decoration: none; }
.detail-btn:hover { background: var(--surface2); }
.text-right { text-align: right; }

/* ── States ───────────────────────────────────────────────────────────────── */
.loading-state, .error-state, .empty-state {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  padding: 5rem 1rem; color: var(--muted); font-size: 1rem;
}
.spinner { width: 2rem; height: 2rem; border: 3px solid var(--border);
  border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-state { color: var(--red); }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem; border-top: 1px solid var(--border); font-size: .875rem; }
.page-btns { display: flex; gap: .25rem; }
.page-btn { width: 2rem; height: 2rem; border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius); cursor: pointer; font-size: .75rem; display: flex;
  align-items: center; justify-content: center; transition: background .15s; color: var(--text); }
.page-btn:hover:not(:disabled) { background: var(--surface2); }
.page-btn:disabled { opacity: .5; cursor: default; }
.page-btn.active { background: rgba(37,99,235,.1); font-weight: 700; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--border); background: var(--surface); padding: 1.5rem 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-credit { font-size: .875rem; }