/*
 * QazFin static AVDS adapter.
 * Source: @sgeo/ui-kit@4.7.0 tokens/variables.css
 * sourceSha: 79342b07b061938c14101a213d1dd0c7a412d689
 * upstream sha256: b3135d07c6935c570910782ef4d513cda34d3405c36e69f6a292e0b0c8595772
 */
:root {
  color-scheme: light;
  --avds-background: 216 20% 97%;
  --avds-foreground: 220 25% 10%;
  --avds-border: 216 12% 86%;
  --avds-card: 0 0% 100%;
  --avds-muted: 216 12% 92%;
  --avds-muted-foreground: 216 10% 42%;
  --avds-primary: 210 70% 36%;
  --avds-success: 170 55% 31%;
  --avds-warning: 34 78% 38%;
  --avds-destructive: 0 62% 43%;
  --avds-font-sans: "IBM Plex Sans", Inter, "Helvetica Neue", Arial, sans-serif;
  --avds-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --avds-radius: .4375rem;
  --shell: 82rem;
}

* { box-sizing: border-box; }
html { background: hsl(var(--avds-background)); }
body {
  margin: 0;
  color: hsl(var(--avds-foreground));
  background: hsl(var(--avds-background));
  font: 15px/1.45 var(--avds-font-sans);
}
a { color: inherit; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid hsl(var(--avds-primary) / .28); outline-offset: 2px; }
.shell { width: min(var(--shell), 100%); margin-inline: auto; padding-inline: 1.5rem; }

.topbar { border-bottom: 1px solid hsl(var(--avds-border)); background: hsl(var(--avds-background) / .96); }
.topbar__inner { min-height: 3.75rem; display: flex; align-items: center; gap: 1.5rem; }
.brand { font-size: 1.22rem; font-weight: 720; text-decoration: none; }
.nav { display: flex; align-items: stretch; gap: .25rem; }
.nav a { min-height: 2.75rem; display: inline-flex; align-items: center; padding: .5rem .75rem; color: hsl(var(--avds-muted-foreground)); text-decoration: none; border-radius: calc(var(--avds-radius) - .1rem); }
.nav a:hover, .nav a[aria-current="page"] { color: hsl(var(--avds-foreground)); background: hsl(var(--avds-muted)); }
.runtime { margin-left: auto; color: hsl(var(--avds-muted-foreground)); font-size: .82rem; }
.runtime[data-state="ok"] { color: hsl(var(--avds-success)); }
.runtime[data-state="error"] { color: hsl(var(--avds-destructive)); }

main { padding-block: 2rem 4rem; }
.page-header { display: grid; gap: .5rem; margin-bottom: 1.5rem; max-width: 58rem; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.04; letter-spacing: -.035em; }
.page-header p { color: hsl(var(--avds-muted-foreground)); font-size: 1.05rem; max-width: 68ch; }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid hsl(var(--avds-border)); border-radius: var(--avds-radius); background: hsl(var(--avds-card)); margin-bottom: 1rem; }
.metric { min-width: 0; padding: 1rem 1.125rem; }
.metric + .metric { border-left: 1px solid hsl(var(--avds-border)); }
.metric__label { display: block; color: hsl(var(--avds-muted-foreground)); font-size: .76rem; }
.metric__value { display: block; margin-top: .2rem; font: 650 1.65rem/1.1 var(--avds-font-mono); overflow-wrap: anywhere; }
.metric__note { display: block; margin-top: .25rem; color: hsl(var(--avds-muted-foreground)); font-size: .72rem; }

.surface { border: 1px solid hsl(var(--avds-border)); border-radius: var(--avds-radius); background: hsl(var(--avds-card)); margin-top: 1rem; overflow: hidden; }
.surface__header { padding: .9rem 1rem; border-bottom: 1px solid hsl(var(--avds-border)); display: flex; gap: 1rem; align-items: end; justify-content: space-between; }
.surface__header h2 { font-size: 1rem; }
.surface__header p { margin-top: .2rem; color: hsl(var(--avds-muted-foreground)); font-size: .8rem; }
.surface__body { padding: 1rem; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .55fr); gap: 1rem; align-items: start; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .72rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid hsl(var(--avds-border)); }
th { color: hsl(var(--avds-muted-foreground)); background: hsl(var(--avds-muted) / .55); font-size: .7rem; font-weight: 650; white-space: nowrap; }
td { font-size: .82rem; }
td[data-numeric] { text-align: right; font-family: var(--avds-font-mono); font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
.mono { font-family: var(--avds-font-mono); }

.state { padding: 1rem; border: 1px solid hsl(var(--avds-border)); border-radius: var(--avds-radius); color: hsl(var(--avds-muted-foreground)); }
.state[data-state="error"] { color: hsl(var(--avds-destructive)); border-color: hsl(var(--avds-destructive) / .3); }
.state[data-state="loading"] { color: hsl(var(--avds-primary)); }
.state strong { display: block; color: hsl(var(--avds-foreground)); margin-bottom: .25rem; }

.filters { display: flex; gap: .5rem; flex-wrap: wrap; }
.filters input, .filters select { min-height: 2.75rem; border: 1px solid hsl(var(--avds-border)); border-radius: calc(var(--avds-radius) - .1rem); background: hsl(var(--avds-card)); color: hsl(var(--avds-foreground)); padding: .55rem .7rem; }

.footer { border-top: 1px solid hsl(var(--avds-border)); color: hsl(var(--avds-muted-foreground)); }
.footer__inner { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .78rem; }

@media (max-width: 62rem) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(3) { border-left: 0; border-top: 1px solid hsl(var(--avds-border)); }
  .metric:nth-child(4) { border-top: 1px solid hsl(var(--avds-border)); }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 44rem) {
  .shell { padding-inline: .85rem; }
  .topbar__inner { gap: .5rem; min-height: 3.25rem; }
  .nav { margin-left: auto; overflow-x: auto; }
  .nav a { min-height: 2.75rem; padding-inline: .55rem; font-size: .78rem; white-space: nowrap; }
  .runtime { display: none; }
  main { padding-block: 1.25rem 3rem; }
  .page-header { margin-bottom: 1rem; }
  .page-header p { font-size: .92rem; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric { padding: .8rem; }
  .metric__value { font-size: 1.2rem; }
  .surface__header { align-items: start; flex-direction: column; }
  .footer__inner { align-items: flex-start; flex-direction: column; padding-block: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; }
}