:root { --ink:#112238; --muted:#607084; --line:#dce4eb; --teal:#006d77; --teal-dark:#004952; --paper:#fff; --bg:#eef4f6; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); } button,input { font:inherit; } button { cursor:pointer; }
.topbar { height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 22px; background:var(--paper); border-bottom:1px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:11px; letter-spacing:.02em; }.brand-mark { display:grid; place-items:center; width:41px; height:41px; border-radius:11px; color:#fff; background:linear-gradient(135deg,#007e89,#004952); font-size:11px; font-weight:800; }.brand strong,.brand small { display:block; }.brand strong { font-size:13px; }.brand small { color:var(--muted); font-size:12px; margin-top:1px; }.top-actions { display:flex; align-items:center; gap:12px; }.data-badge { background:#e6f5ee; color:#176842; border-radius:999px; font-size:12px; padding:7px 10px; }.admin-link { color:var(--teal-dark); font-size:14px; font-weight:700; text-decoration:none; }
.map-shell { position:relative; height:calc(100vh - 68px); min-height:610px; overflow:hidden; } #map { position:absolute; inset:0; }.map-card,.info-panel { background:rgba(255,255,255,.96); box-shadow:0 14px 36px rgba(18,43,61,.17); border:1px solid rgba(205,220,228,.9); border-radius:14px; }.map-card { position:absolute; z-index:3; }.search-card { top:18px; left:18px; width:min(375px,calc(100% - 36px)); padding:14px; }.card-title { margin:0 0 10px; font-size:14px; font-weight:800; }.parcel-search { display:grid; grid-template-columns:84px 1fr auto; gap:7px; }.parcel-search label,.zone-search label { display:grid; gap:4px; color:#425564; font-size:11px; font-weight:750; }.parcel-search input,.zone-search input { width:100%; min-width:0; padding:9px; border:1px solid #cdd9e1; border-radius:8px; outline-color:var(--teal); }.parcel-search button { align-self:end; border:0; border-radius:8px; padding:10px 11px; color:#fff; background:var(--teal); font-size:13px; font-weight:750; }.search-message { min-height:17px; margin:7px 0 0; color:#9a3b24; font-size:12px; line-height:1.35; }.zone-search { margin-top:7px; padding-top:8px; border-top:1px solid #edf1f3; }.search-results { display:none; list-style:none; margin:7px 0 0; padding:0; max-height:148px; overflow:auto; }.search-results.visible { display:block; }.search-results button { display:block; width:100%; text-align:left; background:transparent; border:0; padding:8px 4px; color:var(--ink); border-top:1px solid #edf1f3; }.search-results button:hover { color:var(--teal); }.search-results small { display:block; margin-top:2px; color:var(--muted); }
.controls-card { display:flex; flex-wrap:wrap; gap:6px; top:18px; right:18px; padding:8px; }.control-button { background:#fff; border:1px solid #ccd8df; border-radius:8px; padding:8px 10px; color:#334a5a; font-size:13px; }.control-button.active { color:#fff; border-color:var(--teal); background:var(--teal); }.legend-card { left:18px; bottom:34px; width:270px; }.legend-heading { display:flex; width:100%; border:0; padding:12px 14px; align-items:center; justify-content:space-between; background:transparent; color:var(--ink); font-weight:800; }.legend-list { max-height:230px; overflow:auto; border-top:1px solid #ecf0f2; padding:8px 14px 12px; }.legend-list.hidden { display:none; }.legend-item { display:flex; align-items:center; gap:8px; padding:4px 0; color:#3d5160; font-size:12px; }.legend-swatch { width:12px; height:12px; border:1px solid rgba(0,0,0,.28); border-radius:3px; flex:none; }.legend-item span:last-child { margin-left:auto; color:#83919b; }
.info-panel { position:absolute; z-index:4; top:18px; right:18px; width:min(390px,calc(100% - 36px)); max-height:calc(100% - 110px); overflow:auto; padding:24px 21px; transform:translateX(calc(100% + 32px)); transition:transform .25s ease; }.info-panel.open { transform:translateX(0); }.close-panel { position:absolute; top:9px; right:11px; border:0; color:#6b7a85; background:transparent; font-size:28px; line-height:1; }.eyebrow { margin:0 0 9px; color:#32747a; font-size:11px; font-weight:800; letter-spacing:.11em; }.info-panel h1,.admin-card h1 { margin:0; font-size:22px; line-height:1.25; }.info-subtitle,.muted { color:var(--muted); line-height:1.5; }.info-details { display:grid; gap:0; margin:18px 0 0; }.info-details div { display:grid; grid-template-columns:1fr auto; gap:12px; padding:9px 0; border-top:1px solid #edf1f2; }.info-details dt { color:var(--muted); font-size:13px; }.info-details dd { margin:0; font-size:13px; font-weight:700; text-align:right; }.analysis-section { margin-top:20px; padding-top:16px; border-top:1px solid #dfe8eb; }.section-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }.section-heading h2 { margin:0; font-size:15px; }.section-heading span { color:var(--muted); font-size:12px; }.overlay-list { display:grid; gap:0; list-style:none; margin:9px 0 0; padding:0; }.overlay-list li { display:grid; grid-template-columns:12px 1fr auto; gap:8px; align-items:start; padding:9px 0; border-top:1px solid #edf1f2; font-size:13px; }.overlay-list i { width:12px; height:12px; margin-top:3px; border:1px solid rgba(0,0,0,.25); border-radius:3px; }.overlay-list strong { font-size:13px; }.overlay-list small { grid-column:2 / 4; color:var(--muted); font-size:11px; }.zoning-grid { display:grid; gap:9px; margin-top:9px; }.zoning-grid article { padding:10px; border:1px solid #dce8eb; border-radius:9px; background:#f8fbfb; }.zoning-grid h3 { margin:0 0 8px; font-size:13px; }.zoning-grid dl { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:0; }.zoning-grid dt { color:var(--muted); font-size:10px; }.zoning-grid dd { margin:2px 0 0; font-size:12px; font-weight:750; }.disclaimer-inline { color:#647481; font-size:11px; line-height:1.4; }.disclaimer { position:absolute; z-index:2; bottom:0; left:50%; width:min(780px,calc(100% - 40px)); transform:translateX(-50%); margin:0; padding:7px 12px; color:#344956; background:rgba(255,255,255,.86); border-radius:10px 10px 0 0; text-align:center; font-size:11px; line-height:1.35; }
.admin-body { min-height:100vh; background:linear-gradient(160deg,#eaf5f5,#f7fafb 55%,#e9eff4); }.admin-shell { width:min(660px,calc(100% - 32px)); margin:0 auto; padding:38px 0 70px; }.back-link { display:inline-block; margin-bottom:20px; color:#1d6670; font-weight:750; text-decoration:none; }.admin-card { padding:30px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 18px 50px rgba(17,34,56,.11); }.auth-form { display:grid; gap:15px; margin-top:26px; }.auth-form label { display:grid; gap:6px; color:#344956; font-size:14px; font-weight:700; }.auth-form input { border:1px solid #cbd7df; border-radius:9px; padding:11px; }.auth-form button { margin-top:4px; }.upload-section { margin-top:25px; }.signed-in-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; color:#39724f; font-size:13px; }.text-button { border:0; color:#a12424; background:transparent; font-size:13px; }.drop-zone { display:grid; gap:5px; border:2px dashed #86b7be; border-radius:12px; padding:28px 18px; text-align:center; color:#155b65; cursor:pointer; }.drop-zone span { color:var(--muted); font-size:13px; }.drop-zone input { display:none; } #upload-button { width:100%; margin-top:13px; border:0; border-radius:9px; padding:10px 14px; color:white; background:var(--teal); font-weight:750; } #upload-button:disabled { cursor:not-allowed; background:#9aadb5; }.status-message { min-height:22px; margin:13px 0 0; color:#50616e; font-size:14px; line-height:1.45; }.status-message.error { color:#a12424; }.status-message.success { color:#177045; }
@media (max-width:680px) { .topbar { height:62px; padding:0 14px; }.data-badge { display:none; }.map-shell { height:calc(100vh - 62px); min-height:560px; }.search-card { top:12px; left:12px; width:calc(100% - 24px); }.parcel-search { grid-template-columns:70px 1fr auto; }.controls-card { top:166px; right:12px; left:12px; justify-content:flex-end; }.legend-card { left:12px; bottom:34px; width:220px; }.info-panel { top:auto; bottom:28px; right:12px; width:calc(100% - 24px); max-height:57%; transform:translateY(calc(100% + 45px)); }.info-panel.open { transform:translateY(0); }.disclaimer { display:none; }.admin-card { padding:24px 18px; } }