:root {
    color-scheme: light;
    --ink: #1c1b19;
    --muted: #6f6a62;
    --line: #ddd9d0;
    --paper: #f6f5f2;
    --app: #e7e4de;
    --accent: #0e6b62;
    --accent-ink: #083f3b;
    --select: #d7efec;
    --danger: #8d2b2b;
    --shadow: 0 1px 2px rgba(28, 27, 25, 0.06);
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  body {
    font: 13px/1.4 var(--f-ui);
    color: var(--ink);
    background: var(--app);
    display: grid;
    grid-template-columns: 340px 1fr;
    grid-template-rows: 1fr auto;
    height: 100vh;
    overflow: hidden;
  }
  aside {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border-right: 1px solid var(--line);
  }
  main {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    min-width: 0;
    min-height: 0;
  }
  footer {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    background: #fff;
    padding: 6px 12px;
    color: var(--muted);
    font-size: 12px;
  }
  footer.error { color: var(--danger); }
  header.top { padding: 14px 14px 8px; }
  h1 { font-size: 16px; font-weight: 650; margin: 0; letter-spacing: -0.01em; }
  #fileLabel { margin: 2px 0 0; color: var(--muted); }
  .toolbar, .options { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; align-items: center; }
  button, select, input[type="search"] {
    font: inherit;
    color: inherit;
    background: #fff;
    border: 1px solid #cfcabe;
    border-radius: 0;
    padding: 5px 10px;
  }
  button { cursor: pointer; box-shadow: var(--shadow); }
  button:hover:not(:disabled) { border-color: #b7b2a6; }
  button:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
  button:focus-visible, select:focus-visible, input:focus-visible, .row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }
  #downloadBtn.emphasis:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  #deleteBtn:not(:disabled) { color: var(--danger); }
  .options label { display: flex; align-items: center; gap: 6px; color: var(--muted); }
  .options select { color: var(--ink); }
  #search { margin: 0 14px 8px; width: calc(100% - 28px); }
  .note, .toast {
    margin: 0 14px 8px;
    padding: 8px 10px;
    background: #fff8e8;
    border: 1px solid #ead9a8;
    border-radius: 0;
    color: #5c4a1e;
  }
  .toast { background: #eef6f5; border-color: #c5e0dc; color: var(--accent-ink); }
  .list { flex: 1; overflow: auto; min-height: 80px; padding: 0 6px 8px; }
  .row {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 6px;
    align-items: start;
    width: 100%;
    text-align: left;
    padding: 5px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    user-select: none;
  }
  .row:hover { background: #eeeae3; }
  .row.selected { background: var(--select); box-shadow: inset 3px 0 0 var(--accent); }
  .mark { width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28); }
  .chev { width: 16px; margin-top: 1px; color: var(--muted); font-size: 11px; }
  .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .subline { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .detail {
    border-top: 1px solid var(--line);
    padding: 10px 14px 12px;
    max-height: 320px;
    overflow: auto;
    background: #fff;
  }
  .detail h2 { margin: 0 0 4px; font-size: 13px; }
  .detail p { margin: 0 0 6px; }
  .field { display: flex; flex-direction: column; gap: 3px; margin: 8px 0; }
  .field span { color: var(--muted); font-size: 12px; }
  .field input, .field textarea {
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: #fff;
    border: 1px solid #cfcabe;
    border-radius: 0;
    padding: 5px 8px;
  }
  .field textarea { min-height: 68px; resize: vertical; }
  .leaflet-div-icon.map-label-wrap {
    background: transparent;
    border: 0;
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
  }
  .map-label {
    display: inline-block;
    transform: translate(10px, -16px);
    max-width: 220px;
    padding: 1px 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.92);
    color: #1c1b19;
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(28, 27, 25, 0.28);
    font: 600 12px/1.3 var(--f-ui);
    pointer-events: none;
  }
  .map-label.is-on { outline: 2px solid var(--accent); background: #fff; }
  .leaflet-div-icon.vertex-wrap { background: transparent; border: 0; }
  .vertex-wrap .vertex {
    display: block;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--accent);
    box-shadow: 0 1px 2px rgba(28, 27, 25, 0.35);
    cursor: grab;
  }
  .vertex-wrap .vertex.is-on { background: var(--accent); }
  .vertex-wrap .vertex.mid {
    width: 10px;
    height: 10px;
    border-width: 1px;
    background: rgba(255, 255, 255, 0.92);
    cursor: copy;
  }
  .muted { color: var(--muted); }
  .pair { display: grid; grid-template-columns: 88px 1fr; gap: 4px 8px; margin-top: 6px; }
  .pair b { font-weight: 600; color: var(--muted); }
  .hint { margin: 0; padding: 8px 14px 12px; color: var(--muted); font-size: 12px; }
  #map { height: 100%; width: 100%; background: #c5cdd4; }
  #map[data-basemap="none"] { background: #e4e0d8; }
  .empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 500;
    pointer-events: none;
  }
  .empty[hidden] { display: none; }
  .card {
    pointer-events: auto;
    max-width: 380px;
    margin: 16px;
    padding: 18px 18px 16px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(28, 27, 25, 0.12);
    text-align: center;
  }
  .card p { margin: 0 0 12px; }
  main.dropping #map { outline: 3px dashed var(--accent); outline-offset: -10px; }
  .leaflet-container { font: inherit; }
  @media (max-width: 800px) {
    body { grid-template-columns: 1fr; grid-template-rows: minmax(220px, 42vh) minmax(0, 1fr) auto; }
    aside { grid-column: 1; grid-row: 2; border-right: 0; border-top: 1px solid var(--line); }
    main { grid-column: 1; grid-row: 1; }
    footer { grid-column: 1; grid-row: 3; }
  }

/* Sheet Set shell; geometry handles retain their functional circles. */
:root { --ink: var(--navy); --muted: var(--ink3); --line: var(--minor); --paper: var(--sheet); --app: var(--margin); --accent: var(--navy); --accent-ink: var(--navy); --select: var(--band); --shadow: none; }
body { grid-template-rows: auto minmax(0, 1fr) auto; font: 400 15px/1.4 var(--f-ui); height: 100dvh; }
.site-strip { grid-column: 1 / -1; grid-row: 1; flex-wrap: wrap; }
body > aside, body > main { grid-row: 2; }
body > footer { grid-row: 3; }
h1.title { font-size: 24px; }
.row { border-bottom: 1px solid var(--minor); }
.note { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.toast { background: var(--success-bg); border-color: var(--success); color: var(--success); }
button:focus-visible, select:focus-visible, input:focus-visible, .row:focus-visible { outline-color: var(--focus); }
@media (max-width: 800px) {
 body { grid-template-rows: auto minmax(190px, 35dvh) minmax(0, 1fr) auto; }
 body > main { grid-row: 2; } body > aside { grid-row: 3; } body > footer { grid-row: 4; }
 .site-strip .brand { width: 100%; min-height: 40px; }
 .site-strip .crumb, .site-strip .end { min-height: 36px; padding: 0 10px; }
}