/* ── Logo Studio — Apple-tier glass panel ── */
#ls-fab {
  position: fixed; left: 18px; bottom: 18px; z-index: 119;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(13, 27, 42, 0.85); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px; padding: 10px 16px;
  font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.02em; cursor: pointer;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s var(--ease, ease), background 0.2s;
}
#ls-fab:hover { transform: translateY(-2px); background: rgba(16, 31, 51, 0.95); }
#ls-fab .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal, #20B2AA); box-shadow: 0 0 10px rgba(32,178,170,0.8); }

#ls-panel {
  position: fixed; left: 18px; bottom: 74px; z-index: 129;
  width: 360px; max-width: calc(100vw - 36px);
  max-height: calc(100vh - 100px); overflow-y: auto;
  background: rgba(13, 27, 42, 0.92); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  padding: 18px; font-family: 'Montserrat', sans-serif;
  transform: translateY(12px) scale(0.98); opacity: 0; visibility: hidden;
  pointer-events: none; transition: transform 0.25s var(--ease, ease), opacity 0.2s, visibility 0.25s;
}
#ls-panel.open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; pointer-events: auto; }

#ls-panel h3 { margin: 0 0 4px; font-size: 15px; font-weight: 800; letter-spacing: 0.01em; }
#ls-panel .sub { margin: 0 0 14px; font-size: 11px; color: rgba(255,255,255,0.55); }
#ls-panel .sec { margin-bottom: 16px; }
#ls-panel .sec-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal-light, #A7E5E3); margin-bottom: 8px; }

/* upload zone */
#ls-drop {
  border: 1.5px dashed rgba(255,255,255,0.25); border-radius: 12px;
  padding: 18px 12px; text-align: center; font-size: 11.5px; color: rgba(255,255,255,0.65);
  cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
#ls-drop:hover, #ls-drop.over { border-color: var(--teal, #20B2AA); background: rgba(32,178,170,0.08); }
#ls-drop b { color: #fff; }

/* preview + crop */
#ls-stage { position: relative; border-radius: 12px; overflow: hidden; background: #0A1522; border: 1px solid rgba(255,255,255,0.1); touch-action: none; }
#ls-stage img { display: block; width: 100%; height: auto; }
#ls-crop {
  position: absolute; border: 1.5px solid var(--teal, #20B2AA);
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
  cursor: move; box-sizing: border-box;
}
#ls-crop .h { position: absolute; width: 14px; height: 14px; border: 2.5px solid var(--teal, #20B2AA); background: #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
#ls-crop .h.nw { left: -8px; top: -8px; cursor: nwse-resize; }
#ls-crop .h.ne { right: -8px; top: -8px; cursor: nesw-resize; }
#ls-crop .h.sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
#ls-crop .h.se { right: -8px; bottom: -8px; cursor: nwse-resize; }

/* slot tabs */
#ls-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
#ls-tabs .ls-tab {
  flex: 1; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7); border-radius: 9px; padding: 8px 4px;
  font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.02em; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#ls-tabs .ls-tab.on { background: var(--teal, #20B2AA); border-color: var(--teal, #20B2AA); color: var(--navy, #0D1B2A); }

/* sliders */
#ls-panel input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,0.18); outline: none; margin: 6px 0 2px;
}
#ls-panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--teal, #20B2AA); border: 2px solid #fff; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
#ls-panel .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
#ls-panel .row label { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.8); white-space: nowrap; }
#ls-panel .row .val { font-size: 11px; color: var(--teal-light, #A7E5E3); font-weight: 700; min-width: 34px; text-align: right; }

/* buttons */
#ls-panel .btns { display: flex; gap: 8px; margin-top: 14px; }
#ls-panel .btn-ls {
  flex: 1; border: none; border-radius: 10px; padding: 11px 10px; font-size: 12px; font-weight: 700;
  font-family: 'Montserrat', sans-serif; cursor: pointer; transition: transform 0.15s, opacity 0.15s;
}
#ls-panel .btn-ls:active { transform: scale(0.97); }
#ls-panel .btn-ls.primary { background: var(--teal, #20B2AA); color: var(--navy, #0D1B2A); }
#ls-panel .btn-ls.ghost { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.15); }
#ls-panel .btn-ls.warn { background: rgba(236,103,101,0.15); color: #EC6765; border: 1px solid rgba(236,103,101,0.35); }
#ls-panel .btn-ls:disabled { opacity: 0.4; cursor: not-allowed; }
#ls-panel .hint { font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 8px; line-height: 1.5; }

@media (max-width: 760px) {
  #ls-fab { bottom: 88px; }
  #ls-panel { left: 12px; bottom: 148px; }
}