* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body { margin: 0; color: var(--ink); font: 14px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; line-height: 1.2; }
h1 { font-size: 30px; letter-spacing: -1.2px; }
h2 { font-size: 18px; letter-spacing: -.5px; }
h3 { font-size: 15px; letter-spacing: -.25px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
a { color: inherit; }
img { display: block; max-width: 100%; }
svg { width: 21px; height: 21px; flex-shrink: 0; stroke-width: 1.65; }
button { border: 0; }
:focus-visible { outline: 3px solid #66845a; outline-offset: 3px; }
::selection { background: #d6e1cb; color: var(--ink); }
[hidden] { display: none !important; }
.eyebrow { font: 9px/1.5 var(--mono); letter-spacing: 1.3px; font-weight: 500; }
.field-label, form label, .panel-section > label { display: block; color: var(--ink); font-size: 12px; font-weight: 550; }
input:not([type=range]), select, textarea { display: block; width: 100%; min-height: 46px; margin-top: 7px; padding: 11px 12px; border: 1px solid #cbd3c4; border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 14px; }
input[aria-invalid=true] { border-color: var(--brick); }
.field-error { margin-top: 7px; color: var(--brick); font-size: 12px; line-height: 1.5; }
.form-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.muted { color: var(--muted); }
.read-only { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; }
.read-only svg { width: 13px; height: 13px; }
.full-width { width: 100%; }
.small { min-height: 44px !important; padding: 10px 16px !important; font-size: 12px !important; }
.spinner { animation: spin 1.1s linear infinite; }
html[data-reduced-motion=true] *, html[data-reduced-motion=true] *::before, html[data-reduced-motion=true] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}