:root {
  --navy: #172a45;
  --blue: #234c78;
  --text: #1d2a3d;
  --muted: #718096;
  --line: #dce3ea;
  --control-height: 34px;
  --control-radius: 6px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: var(--text);
  background: #f4f6f8;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
h1, h2, h3, p { margin-top: 0; }

.eyebrow { margin: 0 0 9px; color: #60738d; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.button { min-height: var(--control-height); padding: 0 15px; border: 1px solid transparent; border-radius: var(--control-radius); font-size: 14px; font-weight: 600; white-space: nowrap; }
.button-primary { color: #fff; background: var(--blue); }
.button-primary:hover:not(:disabled) { background: #1a3e65; }
.button-secondary { border-color: #b8cadb; color: #315a86; background: #fff; }
.button-secondary:hover:not(:disabled) { border-color: #7e9bb8; background: #f1f6fa; }
.button-danger { color: #fff; background: #ad3e3e; }
.button-danger:hover:not(:disabled) { background: #913232; }
.counter { display: grid; width: var(--control-height); height: var(--control-height); place-items: center; border-radius: var(--control-radius); color: #4f637c; background: #edf1f5; font-size: 12px; font-weight: 650; }
.error-message { color: #b33b3b; }

.preparation-status.is-refreshing .status-spinner, .button.is-loading::before, .icon-button.is-loading::before, .result-loading::before { width: 14px; height: 14px; border: 2px solid #afc0d0; border-top-color: var(--blue); border-radius: 50%; content: ""; animation: app-spin .8s linear infinite; }
.button.is-loading { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.button-primary.is-loading::before { border-color: rgb(255 255 255 / 45%); border-top-color: #fff; }
@keyframes app-spin { to { transform: rotate(360deg); } }