/* Только переменные --emax-* из @emax/design-system. Свои цвета не задаём. */
body { margin: 0; background: var(--emax-bg); color: var(--emax-text); font-family: var(--emax-font-body); }
a { color: var(--emax-teal); }
h1, h2 { font-family: var(--emax-font-display); }
h1 { margin: 8px 0; font-size: 1.75rem; }
h2 { margin: 0 0 12px; font-size: 1.1rem; }
.site-header, .page, .site-footer { box-sizing: border-box; max-width: 860px; margin: 0 auto; padding: var(--emax-space-4); }
.site-header { display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: var(--emax-space-2); color: var(--emax-text); font-family: var(--emax-font-display); font-weight: 700; font-size: 19px; text-decoration: none; }
.logo-drop { fill: var(--emax-teal); }
.logo-spark { fill: var(--emax-coral); }
.theme-toggle { width: 36px; height: 36px; background: var(--emax-surface); border: 1px solid var(--emax-border); border-radius: var(--emax-radius-input); color: var(--emax-text); cursor: pointer; }
.lead, .breadcrumbs, .chart-caption { color: var(--emax-muted); }
.breadcrumbs { font-size: 0.9rem; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--emax-space-2); margin: var(--emax-space-4) 0; }
.tile, .card, .table-wrap { background: var(--emax-surface); border: 1px solid var(--emax-border); border-radius: var(--emax-radius-card); }
.tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px var(--emax-space-3); color: var(--emax-text); text-decoration: none; }
.tile-code, .tile .change { color: var(--emax-muted); font-size: 0.8rem; }
.tile-value { font-family: var(--emax-font-display); font-weight: 600; font-size: 1.05rem; }
.change { white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.rates-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.rates-table th, .rates-table td { padding: 10px var(--emax-space-3); border-bottom: 1px solid var(--emax-border); text-align: left; }
.rates-table tr:last-child td { border-bottom: none; }
.rates-table th { color: var(--emax-muted); font-weight: 600; font-size: 0.8rem; }
.rates-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hero { display: flex; flex-direction: column; gap: 6px; margin: var(--emax-space-4) 0; padding: 20px 22px; background: var(--emax-teal); border-radius: var(--emax-radius-hero); color: var(--emax-on-accent); }
.hero-label { font-size: 0.85rem; }
.hero-value { font-family: var(--emax-font-display); font-weight: 700; font-size: 1.6rem; }
.card { margin: var(--emax-space-4) 0; padding: var(--emax-space-4); }
.chart { display: block; width: 100%; height: 160px; }
.chart polyline { fill: none; stroke: var(--emax-teal); stroke-width: 2; }
.chart-caption { margin: var(--emax-space-2) 0 0; font-size: 0.85rem; }
section:not(.card) > h2 { margin-top: var(--emax-space-5); }
.site-footer { border-top: 1px solid var(--emax-border); color: var(--emax-muted); font-size: 0.85rem; }
@media (max-width: 480px) {
  .tile { padding: 10px; }
  .tile-value { font-size: 0.9rem; }
  .rates-table th, .rates-table td { padding: 10px var(--emax-space-2); }
  .wide-only { display: none; }
}