:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #242724; background: #f8f9f7; font-size: 14px; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1160px; margin: 0 auto; padding: 40px 28px 0; }
header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.6px; }
h2 { margin: 0 0 22px; font-size: 18px; }
.local, #filename, .download-hint { color: #646b64; font-size: 13px; }
.setup { border: 1px solid #dce0d9; padding: 22px; background: #fff; border-radius: 6px; }
.list-kind { display: flex; flex-wrap: wrap; gap: 8px 20px; border: 0; padding: 0; margin: 0 0 22px; }
.list-kind label { flex-direction: row; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.list-kind input { min-height: 0; margin: 0; accent-color: #28513a; }
.file-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
#filename { overflow-wrap: anywhere; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
button, .file-button { display: inline-flex; justify-content: center; align-items: center; border: 1px solid #cbd1c7; border-radius: 4px; background: #fff; padding: 9px 13px; font: inherit; font-weight: 500; cursor: pointer; color: inherit; min-height: 38px; }
button:hover, .file-button:hover { background: #f1f4ee; }
.file-row:has(.file-input:focus-visible) .file-button { outline: 2px solid #35694b; outline-offset: 3px; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.primary { background: #28513a; border-color: #28513a; color: white; }
.primary:hover:not(:disabled) { background: #1d402d; }
.text-button { padding: 5px 2px; min-height: 32px; border: 0; color: #475c4b; background: transparent; font-size: 13px; }
.text-button:hover { background: transparent; text-decoration: underline; }
.trip-row { display: flex; align-items: end; gap: 24px; margin-top: 24px; }
label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: 500; }
input, select, textarea { border: 1px solid #cbd1c7; border-radius: 4px; padding: 8px 10px; background: white; color: inherit; font: inherit; font-size: 14px; min-height: 38px; }
input[type="date"] { min-width: 158px; }
input[type="checkbox"] { min-height: 0; width: 16px; height: 16px; accent-color: #28513a; cursor: pointer; margin: 0; }
:focus-visible { outline: 2px solid #35694b; outline-offset: 3px; }
summary { cursor: pointer; font-size: 13px; color: #475c4b; padding: 10px 0; }
.optional-fields { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 8px; }
.status:empty { display: none; }
.status, .error { line-height: 1.6; margin: 18px 0; }
.status { color: #646b64; font-size: 13px; }
.error { color: #943520; border-left: 3px solid #c7684e; padding: 8px 12px; background: #fff5f1; white-space: pre-line; }
.filters { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin: 26px 0 18px; }
.filters select { max-width: 190px; }
.search { flex: 1; min-width: 180px; }
.check { flex-direction: row; align-items: center; gap: 7px; min-height: 38px; white-space: nowrap; }
.table-wrap { overflow-x: auto; border: 1px solid #dce0d9; border-radius: 5px; background: #fff; }
table { border-collapse: collapse; width: 100%; text-align: left; }
th { font-size: 12px; font-weight: 500; color: #646b64; background: #f1f3ee; }
.sort-button { border: 0; padding: 0; min-height: 24px; border-radius: 0; background: transparent; gap: 6px; font: inherit; white-space: nowrap; }
.sort-button:hover { background: transparent; color: #28513a; }
.sort-button span::after { content: '↕'; color: #8c9388; }
th[aria-sort="ascending"] .sort-button span::after { content: '↑'; color: #28513a; }
th[aria-sort="descending"] .sort-button span::after { content: '↓'; color: #28513a; }
td, th { padding: 13px 12px; border-bottom: 1px solid #e8ebe5; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:has(input:checked) { background: #f2f7ef; }
tbody tr:hover { background: #f5f7f2; }
.select-cell { width: 42px; padding-left: 18px; }
.person-name { font-weight: 500; white-space: nowrap; }
.address { min-width: 200px; max-width: 340px; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.5; }
.age { white-space: nowrap; }
.issue { color: #9b4329; font-size: 12px; display: block; margin-top: 5px; font-weight: 400; }
.empty { text-align: center; color: #646b64; padding: 32px; }
.download-bar { display: flex; align-items: center; gap: 16px; position: sticky; bottom: 0; padding: 18px 0; background: #f8f9f7; border-top: 1px solid #dce0d9; margin-top: 20px; }
.download-hint { margin-left: auto; }
dialog { border: 1px solid #cbd1c7; border-radius: 6px; padding: 26px; width: min(440px, calc(100% - 32px)); color: inherit; }
dialog::backdrop { background: #14251b55; }
dialog label { margin-top: 16px; }
.dialog-actions { display: flex; justify-content: end; gap: 12px; margin-top: 24px; }
[hidden] { display: none !important; }
@media (max-width: 700px) {
  main { padding: 24px 16px 0; }
  header { flex-direction: column; gap: 8px; margin-bottom: 20px; }
  .setup { padding: 16px; }
  .trip-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .optional-fields { flex-direction: column; }
  .filters { gap: 12px; }
  .filters > label { flex: 1 1 40%; min-width: 0; }
  .filters .search { flex-basis: 100%; order: -1; }
  .filters select { max-width: 100%; width: 100%; }
  .filters .check { flex-basis: 100%; }
  .download-bar { gap: 10px; flex-wrap: wrap; }
  .download-hint { order: 3; flex-basis: 100%; margin: 0; }
  .download-bar .primary { margin-left: auto; }
}