:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --border:#e5e7ef;
  --text:#111827;

  --leftW: 360px;
  --satW: 56%;
  --propH: 280px;

  --resizer: 8px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  background:var(--bg);
  color:var(--text);
}

#app{
  height:100vh;
  display:flex;
  overflow:hidden;
}

/* Left pane */
#leftPane{
  width:var(--leftW);
  min-width:260px;
  max-width:640px;
  display:flex;
  flex-direction:column;
  background:var(--card);
  border-right:1px solid var(--border);
}

.pane-title{
  font-weight:700;
  padding:12px 12px 8px 12px;
  border-bottom:1px solid var(--border);
  background:#fff;
}

#propPane{
  height:var(--propH);
  min-height:160px;
  display:flex;
  flex-direction:column;
}

#prop-list{
  padding:10px;
  overflow:auto;
  flex:1;
}

.prop-item{
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px;
  cursor:pointer;
  background:#fff;
  margin-bottom:10px;
}

.prop-item.active{
  outline:2px solid #bcd7ff;
  border-color:#86b7ff;
  background:#f3f8ff;
}

.prop-line1{
  font-size:13px;
  font-weight:700;
  margin-bottom:4px;
  line-height:1.2;
}

.prop-line2{
  font-size:12px;
  color:#5b6472;
}

/* Street pane */
#streetPane{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:180px;
  background:#fff;
}

.controls{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}

.control-row{
  display:grid;
  grid-template-columns: 60px 1fr 42px;
  gap:10px;
  align-items:center;
  margin:8px 0;
}

.control-row label{
  font-size:12px;
  color:#374151;
}

.control-row input[type="range"]{ width:100%; }
.val{
  font-variant-numeric: tabular-nums;
  font-size:12px;
  color:#374151;
  text-align:right;
}

.street-frame{
  flex:1;
  background:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.street-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Main pane */
#mainPane{
  flex:1;
  min-width:420px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Single banner */
#topBanner{
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.banner-left{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.banner-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.pill{
  border:1px solid var(--border);
  background:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-weight:700;
  font-size:13px;
}

.banner-item{
  display:flex;
  align-items:center;
  gap:10px;
}

.banner-item .lbl{
  font-size:12px;
  color:#374151;
  font-weight:700;
}

.banner-item input[type="range"]{
  width:180px;
}

/* Maps row */
#mapsRow{
  flex:1;
  display:flex;
  overflow:hidden;
}

#satBox{
  width:var(--satW);
  min-width:320px;
}

#roadBox{
  flex:1;
  min-width:320px;
}

.mapbox{
  background:#fff;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.map-frame{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#e9ecf3;
}

.map-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.map-frame canvas{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* Buttons */
.btn{
  border:1px solid var(--border);
  background:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  color:#111827;
  font-size:13px;
}

.btn:hover{ filter:brightness(0.98); }

.btn-ghost{
  background:#fff;
}

.btn-primary{
  background:#0b5fff;
  border-color:#0b5fff;
  color:#fff;
}

.btn-success{
  background:#047857;
  border-color:#047857;
  color:#fff;
}

.chk{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:13px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
}

/* Resizers */
.v-resizer{
  width:var(--resizer);
  cursor:col-resize;
  background:linear-gradient(to right, transparent, #d8dbe6, transparent);
}

.h-resizer{
  height:var(--resizer);
  cursor:row-resize;
  background:linear-gradient(to bottom, transparent, #d8dbe6, transparent);
}