* { box-sizing: border-box; }
html { font-family: var(--font-sans); font-size: var(--text-base); color: var(--color-text); background: var(--color-bg); }
body { margin: 0; line-height: 1.5; }
a { color: var(--color-brand); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.lab-bar { background: var(--color-text); color: var(--color-bg); font-size: var(--text-sm); padding: var(--space-2) var(--space-4); }
.lab-bar a { color: var(--color-bg); }
.site-header { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--color-border); }
.logo { font-weight: 700; font-size: var(--text-lg); color: var(--color-text); text-decoration: none; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
main { max-width: 960px; margin: 0 auto; padding: var(--space-6) var(--space-4); }
h1 { font-size: var(--text-2xl); line-height: 1.2; }
h2 { font-size: var(--text-xl); }
.site-footer { border-top: 1px solid var(--color-border); padding: var(--space-6) var(--space-4); font-size: var(--text-sm); color: var(--color-muted); }
.site-footer ul { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; padding: 0; }
.btn { display: inline-block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-base); text-decoration: none; border: 1px solid var(--color-border); background: var(--color-bg); cursor: pointer; }
.btn-primary { background: var(--color-brand); color: var(--color-brand-ink); border-color: var(--color-brand); }
.card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-bg); }
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); max-width: 420px; }
.field input, .field select { font: inherit; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-muted); border-radius: var(--radius-sm); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--color-border); }
img, svg { max-width: 100%; height: auto; }