/* MAPEXA 1.8 · Juniper — shared, editable design tokens. No remote assets. */
:root {
  --ink: #173c34;
  --green: #214f42;
  --dark: #102f29;
  --muted: #60736a;
  --paper: #f6f4ee;
  --bg: #f6f4ee;
  --lime: #dce8b7;
  --line: #dce2d7;
  --copper: #a46c42;
  --soft: #edf1e5;
  --yes: #316843;
  --no: #9b4832;
  --unknown: #80652b;
  --radius-small: 10px;
  --radius-panel: 20px;
  --shadow-soft: 0 8px 32px rgb(23 60 52 / 5%);
  font-synthesis: none;
}
body { font-family: Vazirmatn, Tahoma, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: #dce8b7; color: #102f29; }
button, input, select, textarea { font-family: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button, a, input, select, textarea, summary { scroll-margin-block: 24px; }
button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #9b743d;
  outline-offset: 3px;
}
button:disabled { cursor: default; }
.button { min-height: 44px; border-radius: 11px; font-size: 13px; }
.button.primary { background: var(--green); border-color: var(--green); color: #fff; }
.button.primary:hover { background: #153c32; border-color: #153c32; }
.button.light { background: var(--lime); color: var(--dark); border-color: var(--lime); }
.button.small { min-height: 40px; font-size: 12px; }
.quiet, small { color: var(--muted); }
.error { color: #9b4832; }
.brand-mark { border-radius: 13px 13px 13px 3px; }
.brand-mark svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.mx-skip { position: fixed; top: -100px; right: 20px; padding: 12px 18px; background: #fff; color: var(--ink); z-index: 200; border-radius: 10px; }
.mx-skip:focus { top: 10px; }
.mx-label { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.mx-label::before { content: ''; width: 22px; height: 1px; background: var(--copper); }
.mx-home-link { display: inline-flex; align-items: center; min-height: 40px; font-size: 12px; text-decoration: none; }
.backup-parts-dialog { padding: 28px; max-width: min(650px, 92vw); overflow: auto; }
.backup-parts-dialog button { padding: 12px 18px; border: 1px solid var(--line); background: var(--paper); border-radius: 9px; font: inherit; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}