:root { font-family: system-ui, -apple-system, Segoe UI, Arial, sans-serif; color: #152437; }
html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; }
.topbar { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 10;
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px;
  background:rgba(255,255,255,.96); border-radius:14px; box-shadow:0 3px 15px #162d4833;
  font-size:14px; }
.topbar span { color:#496178; font-size:12px; text-align:right; }
.hint { position:absolute; z-index:10; left:14px; bottom:max(22px, env(safe-area-inset-bottom));
  right:14px; text-align:center; background:#fffef0; color:#725b16; padding:8px 12px;
  border-radius:10px; font-size:12px; box-shadow:0 2px 9px #0002; pointer-events:none; }
.hint[hidden] { display:none; }
.parcel { position:absolute; z-index:20; left:10px; right:10px; bottom:max(12px, env(safe-area-inset-bottom));
  padding:16px; background:#fff; border-radius:17px; box-shadow:0 2px 22px #0f223955;
  max-height:55vh; overflow:auto; }
.hidden { display:none; }
.close { position:absolute; top:8px; right:12px; padding:0 6px; border:0; background:transparent; color:#586981;
  font-size:29px; cursor:pointer; }
.subheading { font-size:12px; color:#587086; }
.kad { font-weight:750; font-size:21px; margin-top:3px; margin-bottom:12px; word-break:break-word; }
.prop { padding:8px 0; border-top:1px solid #e7edf1; font-size:14px; }
.prop span { display:block; color:#6d8193; font-size:12px; margin-bottom:3px; }
.fine { padding-top:10px; font-size:11px; color:#7b8795; line-height:1.3; }
.maplibregl-ctrl-attrib { font-size:10px!important; }

/* Administrator-only basemap selector and compulsory Google credits. */
.basemap-picker { position:absolute; top:calc(max(12px, env(safe-area-inset-top)) + 65px);
  left:12px; z-index:14; display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.95); padding:7px 10px; border-radius:12px;
  box-shadow:0 3px 12px #162d4830; font-size:12px; }
.basemap-picker label { color:#43596c; }
.basemap-picker select { border:1px solid #b5c6d3; border-radius:7px; background:#fff;
  color:#142b40; padding:6px 5px; font:inherit; font-weight:600; max-width:160px; }
.google-credits { position:absolute; z-index:14;
  left:12px; bottom:calc(14px + env(safe-area-inset-bottom));
  max-width:calc(100% - 90px); font-size:11px; line-height:1.25;
  padding:5px 7px; border-radius:6px; color:#102132;
  background:rgba(255,255,255,.93); box-shadow:0 1px 5px #0004; }
.google-credits.raised { bottom:calc(min(55vh, 320px) + 25px + env(safe-area-inset-bottom)); }
.basemap-picker.hidden, .google-credits.hidden { display:none; }

.kad-search {position:absolute;z-index:16;top:calc(max(12px,env(safe-area-inset-top)) + 68px);right:12px;display:flex;gap:5px;background:#fff;padding:6px;border-radius:12px;box-shadow:0 3px 12px #162d4830;max-width:calc(100% - 24px)}
.kad-search input {width:min(42vw,220px);min-width:90px;padding:7px;border:1px solid #becad3;border-radius:7px;font-size:13px}
.kad-search button,.export-buttons button {border:0;border-radius:8px;background:#1766ac;color:white;padding:8px 10px;font-weight:600;cursor:pointer}
.export-settings{border-top:1px solid #e7edf1;padding-top:10px;font-size:13px}
.export-settings>label{display:block;margin-bottom:5px;color:#475a69}
.export-settings>select{width:100%;padding:8px;border-radius:7px;border:1px solid #b4c5d2;background:white;color:#142b40}
.export-settings>.rural-label{margin:10px 0;color:#475a69}
.export-settings>.rural-label.hidden{display:none}
.export-buttons{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
.coords-preview{max-height:180px;overflow:auto;white-space:pre;font-size:12px;background:#f1f5f8;padding:8px;border-radius:8px}
@media (max-width:600px){.basemap-picker{top:calc(max(12px,env(safe-area-inset-top)) + 119px)}.parcel{max-height:60vh}}

.download-ready{display:flex;flex-direction:column;gap:7px;padding:10px;background:#eef5fc;border:1px solid #b9d3ec;border-radius:10px;margin:10px 0;font-size:13px;color:#173b59}
.download-ready.hidden{display:none}
.download-ready a{display:block;text-align:center;background:#1666ac;color:white;text-decoration:none;border-radius:8px;padding:11px;font-weight:700}
.download-ready small{color:#506a80}