/* ─── backdrop ─────────────────────────────────────────── */
html,body{
  height:100%;
  margin:0;
  display:flex;
  font:13px/1 "Lucida Grande",sans-serif;
}
body{
  background:#C0C0C0;
  background-image:repeating-linear-gradient(0deg,#D8D8D8 0 2px,#C0C0C0 2px 4px);
}

/* ─── sidebar ──────────────────────────────────────────── */
#sidebar{
  width:320px;
  display:flex;
  flex-direction:column;
  background:#EEEEEE;
  border-right:1px solid #888;
}

header{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px;
  background:linear-gradient(#FAFAFA,#E5E5E5);
  border-bottom:1px solid #999;
}

/* logo */
#logoBox{
  width:100px;height:100px;margin:0 auto 6px;
  background:#EEE;
  display:flex;align-items:center;justify-content:center;
}
#logoBox img{max-width:90%;max-height:90%;object-fit:contain}

/* header rows */
.hdr{display:flex;gap:6px;align-items:center}
.hdr input,.hdr select{
  flex:1;padding:2px 4px;border:1px solid #666;border-radius:4px;background:#FFF;font:inherit;
}
.hdr select{min-width:100px}
.btnWide{width:90px}

/* detail slider */
#detailRange{flex:1;accent-color:#248AFF}
#detailVal{width:60px;text-align:right;font-size:11px}

/* generate LED */
#genLed{
  width:10px;height:10px;border-radius:50%;
  border:1px solid #555;background:#333;
}
#genLed.on{background:#0F0;box-shadow:0 0 4px #0F0}

/* ─── palette list ─────────────────────────────────────── */
#palette{flex:1;overflow-y:auto;padding:8px 10px}
.rowPal{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.rowPal.sel{background:#CFE8FF;border-radius:4px}
.swatch{width:18px;height:18px;border:1px solid #555;border-radius:4px;cursor:pointer}

.hz{width:46px;padding:2px 3px;font-size:11px;text-align:right;border:1px solid #666;border-radius:3px}
.hzLabel{font-size:11px;white-space:nowrap}

.btn{
  width:24px;height:18px;font-size:12px;
  border:1px solid #666;border-radius:3px;background:#DDD;cursor:pointer;
}
.btn.active{background:linear-gradient(#54B0FF,#248AFF);color:#FFF;border-color:#248AFF}

/* ─── switch buttons ───────────────────────────────────── */
.switchBtn{
  width:22px;height:18px;font-size:11px;
  border:1px solid #666;background:#DDD;cursor:pointer;border-radius:3px;
}
.switchBtn.on{background:#54B0FF;color:#FFF;border-color:#248AFF}

/* rnd switch visual feedback */
#rndSw{width:34px}
#rndSw.flash{animation:rflash .12s 2}
@keyframes rflash{0%,100%{background:#DDD}50%{background:#54B0FF;color:#FFF}}

/* Random-map button flash */
#randBtn.flash{animation:mflash .15s 2}
@keyframes mflash{0%,100%{background:#DDD}50%{background:#54B0FF;color:#FFF}}

/* ─── canvas ───────────────────────────────────────────── */
#wrap{flex:1;position:relative;background:#D7D7D7;border-left:1px solid #888}
#canvas,#trail{position:absolute;inset:0}
#canvas{cursor:crosshair}
#trail{pointer-events:none}