:root {
  --bar: #00536a; --bar-text: #fff; --accent: #0b5ed7; --border: #cfd6dc; --bg: #fff; --muted: #5a6670;
  --panel-w: 340px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; font: 14px/1.4 system-ui, "Segoe UI", Roboto, sans-serif; color: #1c2329; background: var(--bg); }
button { font: inherit; cursor: pointer; }

#notice { background: #fff3cd; color: #4d3b00; padding: 6px 12px; display: flex; gap: 12px; align-items: center; justify-content: space-between; border-bottom: 1px solid #e6d28a; }
#notice[hidden] { display: none; }
#notice button { background: none; border: 0; font-size: 20px; line-height: 1; }

#topbar { background: var(--bar); color: var(--bar-text); display: flex; align-items: center; gap: 12px; padding: 6px 12px; }
#topbar h1 { font-size: 18px; margin: 0; font-weight: 600; white-space: nowrap; }
#panel-toggle { background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.5); border-radius: 4px; padding: 2px 8px; font-size: 18px; }
#search-box { position: relative; margin-left: auto; width: min(360px, 50vw); }
#search { width: 100%; padding: 6px 10px; border: 0; border-radius: 4px; font: inherit; }
#search-results { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 0; list-style: none; background: #fff; color: #1c2329; border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.2); max-height: 50vh; overflow: auto; }
#search-results[hidden] { display: none; }
#search-results li { padding: 6px 10px; cursor: pointer; }
#search-results li:hover, #search-results li[aria-selected=true] { background: #e7f0fe; }
#search-results small { color: var(--muted); }

#main { flex: 1; display: flex; min-height: 0; }
#panel { width: var(--panel-w); flex: none; border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; background: #f6f8f9; }
body.panel-closed #panel { display: none; }
#tabs { display: flex; border-bottom: 1px solid var(--border); }
#tabs button { flex: 1; padding: 8px 4px; border: 0; background: transparent; border-bottom: 3px solid transparent; }
#tabs button[aria-selected=true] { border-bottom-color: var(--accent); font-weight: 600; background: #fff; }
#panel section { overflow: auto; padding: 10px 12px; flex: 1; }
#panel section[hidden] { display: none; }
#panel h2 { font-size: 15px; margin: 0 0 8px; }

#tab-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
button.theme { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 4px; border: 2px solid var(--border); border-radius: 4px; background: #fff; text-align: center; }
button.theme img { width: 100%; height: 80px; object-fit: cover; }
button.theme.current { border-color: var(--accent); }
#tab-themes .credit { grid-column: 1 / -1; margin: 0; font-size: 11px; color: var(--muted); }

ul.layers { list-style: none; margin: 0; padding: 0; }
ul.layers li { border-bottom: 1px solid var(--border); padding: 4px 0; }
ul.layers .row { display: flex; align-items: center; gap: 6px; }
ul.layers .row label { flex: 1; word-break: break-word; }
button.expand { border: 0; background: transparent; font-size: 16px; color: var(--muted); }
button.expand[aria-expanded=true] { transform: rotate(180deg); }
.legend { padding: 4px 0 6px 22px; }
.legend[hidden] { display: none; }
.legend label { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; color: var(--muted); }
.legend img { max-width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--border); }
.bg-option { display: block; padding: 6px 0; }

#map-wrap { position: relative; flex: 1; min-width: 0; }
#map { position: absolute; inset: 0; }
body.measuring #map { cursor: crosshair; }
#toolbar { position: absolute; top: 8px; right: 8px; z-index: 5; display: flex; gap: 4px; }
#toolbar button { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 5px 9px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
#toolbar button[aria-pressed=true] { background: var(--accent); color: #fff; border-color: var(--accent); }

#result { position: absolute; left: 8px; bottom: 28px; z-index: 6; width: min(380px, calc(100% - 16px)); max-height: 55%; overflow: auto; background: #fff; border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 3px 14px rgba(0,0,0,.3); padding: 8px 12px; }
#result[hidden] { display: none; }
#result-close { position: absolute; top: 2px; right: 6px; border: 0; background: none; font-size: 22px; line-height: 1; }
#result h3 { font-size: 14px; margin: 4px 24px 4px 0; padding-bottom: 2px; border-bottom: 2px solid var(--bar); }
#result h4 { font-size: 13px; margin: 6px 0 2px; }
#result table { border-collapse: collapse; width: 100%; margin-bottom: 6px; }
#result th { text-align: left; font-weight: 600; vertical-align: top; padding: 1px 8px 1px 0; white-space: nowrap; color: var(--muted); }
#result td { padding: 1px 0; word-break: break-word; }

.measure-tip { background: rgba(0,0,0,.75); color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 12px; white-space: nowrap; pointer-events: none; }
.measure-tip.done { background: var(--accent); }

#statusbar { display: flex; gap: 18px; padding: 3px 12px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); background: #f6f8f9; flex-wrap: wrap; }
#statusbar [hidden] { display: none; }
#legal { margin-left: auto; }

.ol-scale-line { left: auto; right: 8px; bottom: 8px; background: rgba(0,60,80,.55); }

@media (max-width: 760px) {
  #panel { position: absolute; z-index: 10; top: 0; bottom: 0; left: 0; width: min(var(--panel-w), 90vw); }
  #main { position: relative; }
  #topbar h1 { display: none; }
  #search-box { width: auto; flex: 1; }
  #toolbar { flex-direction: column; }
}