#edit-btn {
  display:none; /* revealed only for authenticated admins (editor.js auth check) */
  position:fixed; top:12px; right:12px; z-index:1000;
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.12); color:#fff; font-size:18px; line-height:1;
  cursor:pointer; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
#edit-btn.on { background:rgba(6,255,196,.22); border-color:#06ffc4; }

#markers { position:absolute; top:0; left:0; right:0; z-index:50; pointer-events:none; display:none; }
body.edit #markers { display:block; }
.vh-line { position:absolute; left:0; right:0; border-top:1px dashed rgba(6,255,196,.55); }
.vh-line b {
  position:absolute; left:8px; top:3px; font:600 12px/1 monospace; color:#06ffc4;
  background:rgba(0,0,0,.7); padding:3px 6px; border-radius:3px;
}

/* HUD */
#hud {
  position:fixed; top:62px; right:12px; z-index:1000; display:none;
  font:12px/1.5 monospace; color:#fff; background:rgba(0,0,0,.78);
  border:1px solid rgba(6,255,196,.35); border-radius:8px; padding:10px 12px;
  min-width:290px; max-height:calc(100vh - 80px); overflow-y:auto;
}
body.edit #hud { display:block; }
#hud h4 { font:700 9px/1 monospace; color:#06ffc4; letter-spacing:.12em; margin:8px 0 6px; text-transform:uppercase; }
#hud h4:first-child { margin-top:0; }

/* scroll readout */
#scroll-readout { color:#06ffc4; margin-bottom:8px; display:flex; align-items:center; gap:3px; }
#scroll-readout input[type=number] {
  width:40px; background:transparent; border:none; border-bottom:1px solid rgba(6,255,196,.5);
  color:#06ffc4; font:12px/1 monospace; text-align:center; outline:none; padding:0 1px;
  -moz-appearance:textfield;
}
#scroll-readout input::-webkit-inner-spin-button,
#scroll-readout input::-webkit-outer-spin-button { -webkit-appearance:none; }

/* page height row */
.pg-row { display:flex; align-items:center; gap:6px; margin-bottom:4px; font:11px/1 monospace; }
.pg-row span:first-child { flex:1; color:rgba(255,255,255,.7); }
.pg-row input { width:52px; background:transparent; border:none; border-bottom:1px solid rgba(6,255,196,.4); color:#06ffc4; font:11px/1 monospace; text-align:right; outline:none; -moz-appearance:textfield; }
.pg-row input::-webkit-inner-spin-button, .pg-row input::-webkit-outer-spin-button { -webkit-appearance:none; }
.pg-row .unit { color:rgba(6,255,196,.5); font:10px/1 monospace; }

/* layer cards */
#layer-list { margin-bottom:4px; }
.lcard { border:1px solid rgba(6,255,196,.18); border-radius:5px; margin-bottom:5px; overflow:hidden; }
.lcard-head { display:flex; align-items:center; gap:5px; padding:6px 7px; cursor:pointer; }
.lcard-head:hover { background:rgba(6,255,196,.07); }
.ltoggle { font-size:8px; color:rgba(6,255,196,.5); width:8px; flex-shrink:0; user-select:none; }
.lname-inp {
  flex:1; background:transparent; border:none; border-bottom:1px solid transparent;
  color:#fff; font:600 11px/1 monospace; outline:none; min-width:0; cursor:text;
}
.lname-inp:focus { border-bottom-color:rgba(6,255,196,.4); }
.lspeed-inp {
  width:38px; background:transparent; border:none; border-bottom:1px solid rgba(6,255,196,.4);
  color:#06ffc4; font:11px/1 monospace; text-align:right; outline:none; -moz-appearance:textfield;
}
.lspeed-inp::-webkit-inner-spin-button, .lspeed-inp::-webkit-outer-spin-button { -webkit-appearance:none; }
.spd-unit { font:10px/1 monospace; color:rgba(6,255,196,.45); }

.lcard-body { padding:7px 8px 6px; border-top:1px solid rgba(6,255,196,.1); display:none; }
.lcard.open .lcard-body { display:block; }

.ctrl-row { display:flex; align-items:center; gap:4px; margin-bottom:5px; }
.ctrl-lbl { width:44px; flex-shrink:0; font:700 9px/1 monospace; color:rgba(6,255,196,.6); text-transform:uppercase; letter-spacing:.06em; }
.ctrl-inp-n {
  width:42px; background:transparent; border:none; border-bottom:1px solid rgba(6,255,196,.3);
  color:#06ffc4; font:11px/1 monospace; text-align:right; outline:none; -moz-appearance:textfield;
}
.ctrl-inp-n::-webkit-inner-spin-button, .ctrl-inp-n::-webkit-outer-spin-button { -webkit-appearance:none; }
.ctrl-inp-t {
  flex:1; background:transparent; border:none; border-bottom:1px solid rgba(6,255,196,.3);
  color:#fff; font:10px/1 monospace; outline:none; min-width:0;
}
.ctrl-unit { font:10px/1 monospace; color:rgba(6,255,196,.4); flex-shrink:0; }
.icon-btn {
  background:transparent; border:1px solid rgba(6,255,196,.25); border-radius:3px;
  color:#fff; font-size:11px; padding:1px 5px; cursor:pointer; flex-shrink:0; line-height:1.4;
}
.icon-btn:hover { background:rgba(6,255,196,.1); }

.drag-handle { cursor:grab; font-size:13px; color:rgba(6,255,196,.35); flex-shrink:0; padding:0 3px; user-select:none; }
.drag-handle:active { cursor:grabbing; }
.lcard.dragging { opacity:.35; }
.lcard.drag-over-top { border-top:2px solid #06ffc4; }
.lcard.drag-over-bot { border-bottom:2px solid #06ffc4; }

.lcard-foot { display:flex; gap:4px; margin-top:6px; padding-top:5px; border-top:1px solid rgba(255,255,255,.06); }
.lcard-foot button {
  flex:1; padding:3px 4px; border-radius:3px; border:1px solid rgba(255,80,80,.3);
  background:transparent; color:rgba(255,100,100,.7); font:10px/1 monospace; cursor:pointer;
}
.lcard-foot button:hover { background:rgba(255,80,80,.08); }

.ctrl-sel {
  flex:1; background:#111; border:none; border-bottom:1px solid rgba(6,255,196,.3);
  color:#fff; font:10px/1 monospace; outline:none; cursor:pointer; padding:1px 2px;
}
.ctrl-sel option { background:#111; }

#add-layer-btn {
  width:100%; margin-bottom:8px; padding:5px 0; border-radius:4px;
  border:1px dashed rgba(6,255,196,.25); background:transparent;
  color:rgba(6,255,196,.55); font:11px/1 monospace; cursor:pointer;
}
#add-layer-btn:hover { background:rgba(6,255,196,.05); color:rgba(6,255,196,.85); }

#save-btn {
  width:100%; padding:5px 0; border-radius:4px;
  border:1px solid rgba(6,255,196,.5); background:rgba(6,255,196,.12);
  color:#06ffc4; font:600 11px/1 monospace; cursor:pointer; letter-spacing:.05em;
}
#save-btn:disabled { opacity:.4; cursor:default; }
#save-status { margin-top:6px; font:10px/1 monospace; color:#06ffc4; min-height:12px; }

body.edit #sky { outline:2px dashed rgba(255,40,140,.4); outline-offset:-2px; }
body.edit .img-layer { outline:1px dashed rgba(40,180,255,.4); outline-offset:-1px; }
body.edit .fan-wheel { outline:1px dashed rgba(255,200,40,.55); outline-offset:-1px; }

/* fan item rows in the HUD */
.fan-item { border:1px solid rgba(255,200,40,.18); border-radius:4px; padding:5px 6px 2px; margin-bottom:5px; }
.fan-thumb { width:18px; height:18px; object-fit:cover; border-radius:2px; flex-shrink:0; background:#222; }