:root{
  --bg:#ffffff;
  --fg:#111111;
  --muted:#6b7280;
  --border:#e5e7eb;
  --card:#ffffff;
  --link:#111111;
  --max: 980px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; line-height:1.35}
a{color:var(--link);text-decoration:underline}
header{border-bottom:1px solid var(--border); background:#fff}
.wrap{max-width:var(--max); margin:0 auto; padding:24px}
h1{font-size:28px;margin:0 0 6px 0}
h2{font-size:18px;margin:22px 0 10px 0}
p{margin:8px 0;color:var(--muted)}
.nav{display:flex; gap:14px; align-items:center; margin-top:8px}
.nav a{color:var(--muted); text-decoration:none}
.nav a:hover{color:var(--fg); text-decoration:underline}
.grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:12px; margin-top:16px}
.card{border:1px solid var(--border); border-radius:10px; padding:14px; background:var(--card)}
.card h3{margin:0 0 4px 0; font-size:16px}
.badge{display:inline-block; border:1px solid var(--border); border-radius:999px; padding:2px 8px; font-size:12px; color:var(--muted); margin-right:8px}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.btns{display:flex; gap:8px; flex-wrap:wrap}
button{border:1px solid var(--border); background:#fff; border-radius:10px; padding:9px 12px; font-size:14px; cursor:pointer}
button:hover{border-color:#cbd5e1}
.small{font-size:12px;color:var(--muted)}
.hr{height:1px;background:var(--border);margin:14px 0}
.form{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.field{border:1px solid var(--border); border-radius:10px; padding:12px}
label{display:flex; justify-content:space-between; gap:10px; font-weight:600}
.hint{margin-top:6px; color:var(--muted); font-size:12px}
input[type="text"], input[type="date"], input[type="number"], select, textarea{
  width:100%; border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:14px; margin-top:8px;
}
textarea{min-height:120px; resize:vertical}
footer{border-top:1px solid var(--border); margin-top:30px}
.kv{display:grid; grid-template-columns: 220px 1fr; gap:10px; padding:10px 0}
.kv div:first-child{color:var(--muted)}

/* Accessibility improvements */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus indicators */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid #0284c7;
  outline-offset: 2px;
}

/* Ensure minimum touch target size (WCAG 2.5.5) */
button, a.button-like {
  min-height: 44px;
  min-width: 44px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --border: #000000;
    --muted: #000000;
  }
  button, input, textarea, select {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Error states */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: #ef4444;
  border-width: 2px;
}

/* Disabled states */
button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}