/* Copied viewer styles (trimmed to essentials) */
:root { --bg:#0f1115; --bg-panel:#161a22; --text:#e6e8ef; --muted:#9aa3b2; --accent:#59c3c3; --border:#262b36; }
*{box-sizing:border-box}
html,body,#app{height:100%;margin:0;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;overflow:hidden;position:fixed;width:100%}
.app-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#12151c,#0f1115)}
.brand{display:flex;align-items:center;gap:10px}.logo{background:var(--accent);color:#021414;font-weight:800;padding:6px 10px;border-radius:6px;letter-spacing:1px}.title{font-weight:600;color:#f3f5fb}
.searchbar{position:relative;flex:1;display:flex;justify-content:center}
#search-input{width:min(720px,70%);padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:#0c0e12;color:var(--text)}
.suggestions{position:absolute;top:44px;width:min(720px,70%);background:#0c0e12;border:1px solid var(--border);border-radius:8px;overflow:hidden;display:none;z-index:5}
.suggestions .item{padding:8px 10px;cursor:pointer}.suggestions .item:hover{background:#151925}
.toolbar button{background:#151925;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 10px}
.toolbar button:hover{border-color:var(--accent);color:var(--accent)}
.sidebar{position:absolute;left:0;top:56px;bottom:0;width:360px;overflow-y:auto;background:var(--bg-panel);border-right:1px solid var(--border)}
#map{position:absolute;left:360px;right:0;top:56px;bottom:0}
.panel{padding:14px;border-bottom:1px solid var(--border)}.panel-title{font-weight:600;margin-bottom:8px;color:#f0f3fa}.panel-subtitle{font-size:12px;color:var(--muted);margin:6px 0}
.layer-controls .layer-item{display:flex;flex-direction:column;gap:6px;padding:8px 0;border-bottom:1px dashed var(--border)}
.slider-row{display:flex;align-items:center;gap:8px}.slider-row input[type=range]{width:100%}
.order-list{list-style:none;margin:8px 0 0;padding:0;border:1px dashed var(--border);border-radius:6px}
.order-list li{padding:8px 10px;border-bottom:1px dashed var(--border);cursor:grab}.order-list li:last-child{border-bottom:0}
.legend{display:flex;flex-direction:column;gap:8px}.legend .group{border:1px solid var(--border);border-radius:8px;padding:8px;background:#0e1117}
.legend .group .group-title{font-weight:600;color:var(--muted);margin-bottom:6px}.legend .item{display:flex;align-items:center;gap:8px;padding:4px 0}
.legend .swatch{width:16px;height:16px;border-radius:4px;border:1px solid #0008}.legend .label{font-size:13px;color:#e7ebf6}
.popup{position:absolute;pointer-events:auto;background:#0c0e12;border:1px solid var(--border);border-radius:8px;padding:8px 10px;z-index:10;min-width:220px;max-width:calc(100vw - 20px);word-wrap:break-word}.popup.hidden{display:none}
.popup .title{font-weight:600;margin-bottom:4px}.popup a{color:var(--accent);text-decoration:none}.popup a:hover{text-decoration:underline}
.aoi-tools .buttons{display:flex;gap:8px;flex-wrap:wrap}.aoi-tools .buttons button,.aoi-tools .buttons label.upload{background:#151925;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:6px 10px;cursor:pointer}
.aoi-tools .buttons input[type=file]{display:none}.aoi-summary{margin-top:10px;font-size:14px;color:#d8dbe6}.aoi-summary table{width:100%;border-collapse:collapse;font-size:13px}.aoi-summary th,.aoi-summary td{text-align:left;padding:6px;border-bottom:1px solid var(--border)}.aoi-summary .placeholder{color:var(--muted)}
.maplibregl-ctrl{background:#10131a!important;border:1px solid var(--border)!important;color:var(--text)!important}.maplibregl-ctrl button{background:transparent!important}
.maplibregl-popup-content{background:#0c0e12;color:var(--text);border:1px solid var(--border);border-radius:8px}
.geocode-marker{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #0c7bdc;box-shadow:0 0 0 3px rgba(12,123,220,.25)}
#export-symbology{background:#151925;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:6px 10px;cursor:pointer}
#export-symbology:hover{border-color:var(--accent);color:var(--accent)}

/* Mobile responsive */
@media (max-width: 768px) {
  .app-header { flex-wrap: wrap; height: auto; padding: 8px; }
  .brand { width: 100%; margin-bottom: 8px; }
  .title { display: none; }
  .searchbar { width: 100%; }
  #search-input { width: 100%; }
  .suggestions { width: 100%; top: auto; }
  .sidebar { width: 100%; top: 100px; bottom: 60%; z-index: 1; }
  #map { left: 0; top: 40%; }
}

@media (max-width: 480px) {
  .logo { padding: 4px 8px; font-size: 14px; }
  .sidebar { bottom: 70%; }
  #map { top: 30%; }
}