:root{
  --ink:#0f1419; --panel:#161c24; --panel-2:#1e2732; --line:#2a3542;
  --txt:#e7edf3; --txt-dim:#8fa0b3; --txt-mute:#5f7285;
  --signal:#ff8c42; --signal-dim:#3a2a1c;
  --field:#0c1116;
  --mono:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Menlo,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:var(--txt);font-family:var(--sans)}
#app{display:flex;min-height:400px}

/* ---- control rail ---- */
#rail{width:340px;flex:0 0 340px;background:var(--panel);border-right:1px solid var(--line);
      display:flex;flex-direction:column;overflow-y:auto}
#rail header{padding:20px 22px 16px;border-bottom:1px solid var(--line)}
#rail header .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--signal);text-transform:uppercase}
#rail header h1{margin:6px 0 0;font-size:18px;font-weight:600;letter-spacing:-.01em}
#rail header p{margin:6px 0 0;font-size:12.5px;color:var(--txt-dim);line-height:1.5}

.sec{padding:16px 22px;border-bottom:1px solid var(--line)}
.sec > label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-mute);margin-bottom:9px}
.row{display:flex;gap:8px;align-items:center}
.row + .row{margin-top:10px}

input[type=text],input[type=number]{width:100%;background:var(--field);border:1px solid var(--line);color:var(--txt);
      font-family:var(--mono);font-size:12.5px;padding:9px 10px;border-radius:6px;outline:none}
input[type=text]:focus,input[type=number]:focus{border-color:var(--signal)}
input[type=number]{width:90px;flex:0 0 90px}
select{background:var(--field);border:1px solid var(--line);color:var(--txt);font-family:var(--mono);
      font-size:12.5px;padding:9px 8px;border-radius:6px;outline:none}
button.act{background:var(--signal);color:#1a0f06;border:none;font-weight:600;font-size:12.5px;
      padding:9px 12px;border-radius:6px;cursor:pointer;white-space:nowrap}
button.act:hover{filter:brightness(1.08)}
button.ghost{background:transparent;color:var(--txt-dim);border:1px solid var(--line);font-size:12px;
      padding:8px 11px;border-radius:6px;cursor:pointer}
button.ghost:hover{border-color:var(--signal);color:var(--txt)}

.hint{font-size:11.5px;color:var(--txt-mute);margin-top:8px;line-height:1.5}
.hint.warn{color:var(--signal)}

input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:var(--line);border-radius:3px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
      background:var(--signal);cursor:pointer;border:2px solid var(--panel)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--signal);
      cursor:pointer;border:2px solid var(--panel)}
input[type=color]{-webkit-appearance:none;width:34px;height:30px;padding:0;border:1px solid var(--line);
      border-radius:6px;background:none;cursor:pointer}
input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}

.valwrap{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.valwrap .k{font-size:12.5px;color:var(--txt-dim)}
.valwrap .v{font-family:var(--mono);font-size:12.5px;color:var(--txt)}

/* ---- theme toggle ---- */
.segmented{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.segmented button{flex:1;background:var(--field);color:var(--txt-dim);border:none;font-size:12.5px;
      padding:9px 10px;cursor:pointer;font-family:var(--sans)}
.segmented button + button{border-left:1px solid var(--line)}
.segmented button.on{background:var(--signal);color:#1a0f06;font-weight:600}

/* ---- embed/widget tabs ---- */
.tabs{display:flex;gap:6px;margin-bottom:10px}
.tabs button{background:transparent;color:var(--txt-dim);border:1px solid var(--line);font-size:11.5px;
      padding:6px 10px;border-radius:6px;cursor:pointer;font-family:var(--mono)}
.tabs button.on{border-color:var(--signal);color:var(--signal)}
.tabpane{display:none}
.tabpane.on{display:block}

/* ---- readout ---- */
#readout{margin-top:auto;padding:16px 22px;background:var(--panel-2);border-top:1px solid var(--line)}
#readout .line{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;padding:3px 0}
#readout .line .k{color:var(--txt-mute)}
#readout .line .v{color:var(--signal)}

/* ---- map ---- */
#mapwrap{flex:1;position:relative;min-width:0}
#map{position:absolute;inset:0;background:#0c1116}
.leaflet-container{background:#0c1116}

/* embed code box */
#embedbox,#widgetbox{width:100%;background:var(--field);border:1px solid var(--line);color:var(--txt-dim);
      font-family:var(--mono);font-size:11px;padding:10px;border-radius:6px;resize:vertical;min-height:74px;line-height:1.5}

@media(max-width:720px){
  #app{flex-direction:column}
  #rail{width:100%;flex:none;max-height:none;border-right:none;border-bottom:1px solid var(--line)}
  #mapwrap{flex:none;height:60vh;min-height:360px}
}