:root {
  color-scheme: light;
  --za-paper: #f6f5f4;
  --za-surface: #ffffff;
  --za-ink: #111111;
  --za-muted: #615d59;
  --za-subtle: #757575;
  --za-line: rgba(0, 0, 0, .08);
  --za-line-strong: rgba(0, 0, 0, .14);
  --za-blue: #0075de;
  --za-blue-hover: #0069c7;
  --za-blue-soft: #e6f3fe;
  --za-blue-text: #005cae;
  --za-warn-soft: #fff3cf;
  --za-warn-text: #805900;
  --za-key-field-bg: #fff8e7;
  --za-key-field-border: #f2c36c;
  --za-key-field-text: #69451b;
  --za-danger: #c53422;
  --za-danger-soft: #fdeae7;
  --za-neutral-soft: #efeeec;
  --za-font-sans: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --za-font: var(--za-font-sans);
  --za-type-page: 700 1.875rem/2.5rem var(--za-font-sans);
  --za-type-record: 700 1.625rem/2.25rem var(--za-font-sans);
  --za-type-panel: 700 1.375rem/1.875rem var(--za-font-sans);
  --za-type-section: 700 1.25rem/1.75rem var(--za-font-sans);
  --za-type-card: 600 1.125rem/1.625rem var(--za-font-sans);
  --za-type-list: 600 1rem/1.5rem var(--za-font-sans);
  --za-type-body-strong: 600 .9375rem/1.5rem var(--za-font-sans);
  --za-type-body: 400 .9375rem/1.5rem var(--za-font-sans);
  --za-type-control: 500 .9375rem/1.375rem var(--za-font-sans);
  --za-type-label: 500 .875rem/1.375rem var(--za-font-sans);
  --za-type-caption: 400 .8125rem/1.25rem var(--za-font-sans);
  --za-type-status: 600 .8125rem/1.25rem var(--za-font-sans);
  --za-type-metric: 700 1.375rem/1.875rem var(--za-font-sans);
  --za-radius-card: 12px;
  --za-radius-control: 8px;
  --za-radius-small: 4px;
  --za-focus: 0 0 0 2px rgba(0, 117, 222, .22);
  font-family: var(--za-font);
}

* { box-sizing: border-box; }
html { background: var(--za-paper); }
body { margin: 0; color: var(--za-ink); background: var(--za-paper); font-size: 15px; line-height: 1.6; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden], .hidden { display: none !important; }

.za-card {
  background: var(--za-surface);
  border: 1px solid var(--za-line);
  border-radius: var(--za-radius-card);
}

.za-button {
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: var(--za-radius-control);
  color: #fff;
  background: var(--za-blue);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  text-align: center;
}
.za-button:hover { background: var(--za-blue-hover); }
.za-button-secondary { color: var(--za-blue-text); background: var(--za-blue-soft); }
.za-button-secondary:hover { color: var(--za-blue-text); background: #d5ebfc; }
.za-button-tertiary { color: var(--za-ink); background: transparent; border-color: var(--za-line-strong); }
.za-button-tertiary:hover { background: var(--za-neutral-soft); }
.za-button-danger { color: var(--za-danger); background: var(--za-danger-soft); }

.za-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--za-line-strong);
  border-radius: var(--za-radius-control);
  outline: none;
  color: var(--za-ink);
  background: var(--za-surface);
}
.za-input:focus { border-color: var(--za-blue); box-shadow: var(--za-focus); }

.za-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 10px;
  border-radius: 9999px;
  color: var(--za-blue-text);
  background: var(--za-blue-soft);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.za-key-field {
  border-color: var(--za-key-field-border) !important;
  color: var(--za-key-field-text);
  background: var(--za-key-field-bg) !important;
}
.za-key-field-control {
  padding: 8px;
  border: 1px solid var(--za-key-field-border);
  border-radius: var(--za-radius-control);
  color: var(--za-key-field-text);
  background: var(--za-key-field-bg);
}
.za-key-field input,
.za-key-field select,
.za-key-field textarea,
.za-key-field-control input,
.za-key-field-control select,
.za-key-field-control textarea {
  color: var(--za-ink);
  background: var(--za-surface);
}
.za-badge-warning { color: var(--za-warn-text); background: var(--za-warn-soft); }
.za-badge-danger { color: var(--za-danger); background: var(--za-danger-soft); }
.za-badge-neutral { color: var(--za-muted); background: var(--za-neutral-soft); }

:focus-visible { outline: 2px solid var(--za-blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}