@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0,0");

:root {
  color-scheme: light;
  --bg: #f7faf8;
  --paper: #ffffff;
  --panel: #edf4f1;
  --soft: #f4f8f6;
  --ink: #17211d;
  --muted: #5f6f68;
  --line: #d7e2dd;
  --accent: #006b5b;
  --on-accent: #ffffff;
  --accent-container: #cdeee5;
  --on-accent-container: #00201a;
  --secondary-container: #d8ebe5;
  --surface-container-low: #f4f8f6;
  --surface-container: #edf4f1;
  --surface-container-high: #e4eeea;
  --green: #146c2e;
  --green-container: #c8f2cf;
  --red: #ba1a1a;
  --red-container: #ffdad6;
  --amber: #7a5900;
  --amber-container: #ffdea8;
  --shadow-1: 0 1px 2px rgba(23, 33, 29, .08), 0 1px 3px 1px rgba(23, 33, 29, .06);
  --shadow-2: 0 2px 6px rgba(23, 33, 29, .10), 0 4px 10px 2px rgba(23, 33, 29, .05);
}
* { box-sizing: border-box; }
body {
  background:
    linear-gradient(180deg, rgba(205, 238, 229, .56), rgba(247, 250, 248, 0) 360px),
    var(--bg) !important;
  color: var(--ink) !important;
  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0;
}
main {
  width: min(1280px, calc(100% - 32px)) !important;
  padding: 22px 0 56px !important;
}
h1 {
  color: var(--ink);
  font-size: clamp(32px, 4.8vw, 56px) !important;
  font-weight: 500 !important;
  line-height: 1.06 !important;
}
h2 {
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.2;
}
h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
}
p, li, td, input, select, textarea, button {
  font-size: 15px;
}
.muted, th, label {
  color: var(--muted) !important;
}
a {
  color: var(--accent) !important;
}
header {
  background: rgba(255, 251, 255, .88) !important;
  border: 1px solid rgba(0, 107, 91, .10) !important;
  border-radius: 28px !important;
  box-shadow: var(--shadow-1);
  padding: 24px !important;
  backdrop-filter: blur(18px);
}
.nav {
  gap: 8px !important;
  padding: 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--surface-container-high) !important;
}
.pill {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px;
  min-height: 40px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--on-accent-container) !important;
  text-decoration: none;
  font-weight: 500 !important;
}
.pill::before {
  font-family: "Material Symbols Rounded";
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
  content: "radio_button_unchecked";
}
.pill[href*="index"]::before { content: "home"; }
.pill[href*="latest"], .pill[href*="report"] { }
.pill[href*="latest"]::before { content: "monitoring"; }
.pill[href*="archive"]::before { content: "inventory_2"; }
.pill[href*="trades"]::before { content: "receipt_long"; }
.pill[href*="disclaimer"]::before { content: "gavel"; }
.pill[href*="json"]::before, .pill[href*="snapshot"]::before { content: "data_object"; }
.pill[href*="dashboard"]::before, .pill[href*="desk"]::before { content: "dashboard"; }
.pill:hover, .pill:focus-visible {
  background: rgba(0, 107, 91, .10) !important;
}
.pill:first-child {
  background: var(--accent-container) !important;
}
.panel, .card, .report, .trade, .stat, article, table, .hero, .asset, .empty {
  border: 1px solid var(--line) !important;
  border-radius: 24px !important;
}
.panel, .card, .report, .trade, .stat, article, table, .hero {
  background: rgba(255, 251, 255, .94) !important;
  box-shadow: var(--shadow-1);
}
.asset, .empty {
  background: var(--surface-container-low) !important;
}
.card, .panel, .report, .trade, .stat, .hero, article {
  padding: clamp(16px, 2.2vw, 24px) !important;
}
.stats {
  gap: 14px !important;
}
.stat .value, .value, .price {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500 !important;
}
button {
  border: 0 !important;
  border-radius: 999px !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  background: var(--secondary-container) !important;
  color: #1d192b !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}
button.primary {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
}
button.danger {
  background: var(--red-container) !important;
  color: var(--red) !important;
}
button:hover, button:focus-visible {
  box-shadow: var(--shadow-1) !important;
  filter: none !important;
}
input, select, textarea {
  border: 1px solid #79747e !important;
  border-radius: 12px !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  min-height: 48px !important;
  padding: 10px 14px !important;
}
textarea {
  min-height: 96px !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  outline: 3px solid rgba(0, 107, 91, .16);
  outline-offset: 1px;
}
label {
  gap: 7px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
}
.badge {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--accent-container) !important;
  color: var(--on-accent-container) !important;
  padding: 4px 10px !important;
  font-weight: 700 !important;
}
.green {
  color: var(--green) !important;
}
.red {
  color: var(--red) !important;
}
.amber {
  color: var(--amber) !important;
}
blockquote {
  background: var(--accent-container) !important;
  color: var(--on-accent-container) !important;
  border-left: 0 !important;
  border-radius: 20px !important;
}
code {
  color: var(--on-accent-container);
  background: var(--accent-container);
  border: 0;
  border-radius: 8px;
  padding: 2px 6px;
}
.links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--secondary-container);
  color: #1d192b !important;
  text-decoration: none;
  font-weight: 500;
}
.links a::before {
  font-family: "Material Symbols Rounded";
  content: "open_in_new";
  font-size: 18px;
}
table {
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
}
th, td {
  border-color: var(--line) !important;
}
.row, .kv div, .trade-head {
  border-color: var(--line) !important;
}
@media (max-width: 700px) {
  main {
    width: min(100% - 20px, 1280px) !important;
    padding-top: 12px !important;
  }
  header {
    border-radius: 24px !important;
  }
  .nav {
    justify-content: flex-start !important;
    width: 100%;
    border-radius: 24px !important;
  }
  .pill {
    flex: 1 1 auto;
    justify-content: center;
  }
}