/* StickerHub direct editor: fixed LINE artboard + independent sticker layer. */

.sticker-editor {
  width: min(1440px, 98vw);
  height: min(920px, 96vh);
  max-height: 96vh;
}

.editor-head-actions,
.editor-foot-left,
.editor-foot-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.editor-shortcut-button,
.editor-stage-tool,
.editor-zoom-button,
.editor-zoom-readout {
  min-height: 36px;
  border: 1px solid #dbe5df;
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  color: #2b3b33;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.editor-shortcut-button { padding: 0 12px; }
.editor-body { grid-template-columns: minmax(0, 1.6fr) minmax(310px, .4fr); }

.editor-stage-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: block;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.76), rgba(238,243,240,.94) 58%, #e4ece7 100%);
}

.editor-stage-wrap:focus { outline: none; }
.editor-stage-wrap.space-pan-ready { cursor: grab; }
.editor-stage-wrap.is-panning { cursor: grabbing !important; user-select: none; }

.editor-stage-toolbar {
  position: sticky;
  z-index: 40;
  top: 12px;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 12px auto 0;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  border: 1px solid rgba(207, 221, 214, .94);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 28px rgba(21, 47, 34, .1);
  backdrop-filter: blur(12px);
}

.editor-stage-tool { padding: 0 10px; white-space: nowrap; }
.editor-stage-tool:hover,
.editor-stage-tool.active,
.editor-shortcut-button:hover {
  border-color: #83d8a5;
  color: #047b37;
  background: #effcf4;
}

/* View zoom exists for mouse-wheel navigation only. Hide the +/- controls so they can never be mistaken for sticker resize. */
.editor-stage-toolbar [data-editor-action="zoom-out"],
.editor-stage-toolbar [data-editor-action="zoom-in"],
.editor-stage-toolbar [data-editor-action="zoom-100"],
.editor-stage-toolbar .editor-toolbar-divider {
  display: none !important;
}

.editor-stage-toolbar [data-editor-action="fit-view"] {
  margin-left: 4px;
}

.editor-stage-toolbar [data-editor-action="fit-view"]::before {
  content: "มุมมอง · ";
  color: #69756f;
  font-weight: 700;
}

.editor-stage {
  position: relative;
  display: block;
  box-sizing: border-box;
  max-width: none;
  max-height: none;
  min-width: 100%;
  min-height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.editor-canvas-shell {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  overflow: visible;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e8eeeb 25%, transparent 25%),
    linear-gradient(-45deg, #e8eeeb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e8eeeb 75%),
    linear-gradient(-45deg, transparent 75%, #e8eeeb 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  outline: 2px solid rgba(55, 78, 67, .72);
  box-shadow: 0 20px 60px rgba(18, 45, 31, .18);
}

.editor-canvas-shell::before {
  content: "พื้นที่จริง LINE 370×320 px";
  position: absolute;
  z-index: 30;
  left: 0;
  top: -30px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(17, 35, 26, .9);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

#editorCanvas {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  touch-action: none;
  user-select: none;
}

.editor-safe-guide {
  position: absolute;
  z-index: 7;
  box-sizing: border-box;
  border: 1px dashed rgba(6, 153, 70, .68);
  border-radius: 2px;
  pointer-events: none;
}

.editor-artboard-label {
  position: absolute;
  z-index: 20;
  left: 8px;
  bottom: 8px;
  padding: 4px 7px;
  border-radius: 7px;
  background: rgba(13, 31, 22, .72);
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  pointer-events: none;
  backdrop-filter: blur(6px);
}

.editor-backdrop[data-editor-tool="select"] #editorCanvas { cursor: default; }
.editor-backdrop.is-moving-image #editorCanvas { cursor: grabbing; }
.editor-backdrop[data-editor-tool="crop"] #editorCanvas,
.editor-backdrop[data-editor-tool="picker"] #editorCanvas { cursor: crosshair; }
.editor-backdrop[data-editor-tool="eraser"] #editorCanvas { cursor: none; }
.editor-backdrop[data-editor-tool="pan"] #editorCanvas { cursor: grab; }

.editor-transform-box {
  position: absolute;
  z-index: 12;
  inset: auto;
  box-sizing: border-box;
  border: 1.5px solid #08c85a;
  transform-origin: center center;
  pointer-events: none;
}

.editor-transform-box.hidden { display: none; }

.transform-handle,
.transform-rotate-handle {
  position: absolute;
  z-index: 3;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 4px;
  background: #06c755;
  box-shadow: 0 1px 5px rgba(4, 90, 42, .28);
  pointer-events: auto;
  touch-action: none;
}

.transform-handle.nw { left: -9px; top: -9px; cursor: nwse-resize; }
.transform-handle.ne { right: -9px; top: -9px; cursor: nesw-resize; }
.transform-handle.se { right: -9px; bottom: -9px; cursor: nwse-resize; }
.transform-handle.sw { left: -9px; bottom: -9px; cursor: nesw-resize; }
.transform-rotate-line { position: absolute; left: 50%; top: -31px; width: 1px; height: 30px; background: #06c755; transform: translateX(-50%); }
.transform-rotate-handle { left: 50%; top: -43px; width: 17px; height: 17px; border-radius: 999px; transform: translateX(-50%); cursor: grab; }
.transform-rotate-handle:active { cursor: grabbing; }

.crop-selection {
  position: absolute;
  z-index: 16;
  display: none;
  box-sizing: border-box;
  border: 2px solid #06c755;
  background: rgba(6, 199, 85, .08);
  box-shadow: 0 0 0 9999px rgba(10, 22, 16, .43);
  pointer-events: auto;
  cursor: move;
  touch-action: none;
}

.crop-handle { position: absolute; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 3px; background: #06c755; box-shadow: 0 1px 4px rgba(4,90,42,.22); }
.crop-handle.nw { left: -7px; top: -7px; cursor: nwse-resize; }
.crop-handle.n { left: 50%; top: -7px; transform: translateX(-50%); cursor: ns-resize; }
.crop-handle.ne { right: -7px; top: -7px; cursor: nesw-resize; }
.crop-handle.e { right: -7px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.crop-handle.se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.crop-handle.s { left: 50%; bottom: -7px; transform: translateX(-50%); cursor: ns-resize; }
.crop-handle.sw { left: -7px; bottom: -7px; cursor: nwse-resize; }
.crop-handle.w { left: -7px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

.editor-brush-cursor {
  position: absolute;
  z-index: 18;
  display: none;
  border: 1.5px solid rgba(12,24,18,.78);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.55);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.editor-brush-cursor.visible.hovering { display: block; }

.editor-artboard-info .editor-status { font-variant-numeric: tabular-nums; line-height: 1.5; }
.editor-hint { padding: 9px 10px; border-radius: 10px; background: #f0f8f3; color: #52655b; line-height: 1.55; }
.editor-hint::after {
  content: "\Aย่อ/ขยายสติกเกอร์: ลากจุดเขียว 4 มุมของรูปโดยตรง · Artboard จะไม่เปลี่ยนขนาด";
  display: block;
  margin-top: 6px;
  color: #2c6b4a;
  font-weight: 750;
  white-space: pre-line;
}

.editor-shortcut-panel {
  position: absolute;
  z-index: 70;
  top: 70px;
  right: 20px;
  width: min(560px, calc(100% - 40px));
  padding: 14px;
  border: 1px solid #dce7e1;
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 24px 65px rgba(12,34,23,.22);
  backdrop-filter: blur(15px);
}
.editor-shortcut-panel.hidden { display: none; }
.editor-shortcut-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.editor-shortcut-head button { width:32px; height:32px; border:1px solid #dce7e1; border-radius:9px; background:#fff; cursor:pointer; }
.editor-shortcut-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; color:#4c5e54; font-size:12px; }
.editor-shortcut-grid kbd { display:inline-block; min-width:24px; margin-right:4px; padding:3px 6px; border:1px solid #d7e0db; border-bottom-width:2px; border-radius:6px; background:#f7faf8; color:#25372e; font:700 11px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; text-align:center; }

@media (max-width: 900px) {
  .sticker-editor { height: 98vh; max-height: 98vh; }
  .editor-body { grid-template-columns: 1fr; grid-template-rows: minmax(360px, 54vh) minmax(0, 1fr); }
  .editor-stage-wrap { min-height: 360px; }
  .editor-stage-toolbar { margin-inline: 8px; max-width: calc(100% - 16px); }
  .editor-panel { max-height: 34vh; }
}

@media (max-width: 640px) {
  .editor-head p { display: none; }
  .editor-shortcut-button { width:38px; padding:0; overflow:hidden; font-size:0; }
  .editor-shortcut-button::before { content:"?"; font-size:16px; }
  .editor-stage-toolbar { top:6px; margin-top:6px; }
  .editor-stage-tool { padding:0 8px; }
  .editor-shortcut-panel { top:62px; right:8px; width:calc(100% - 16px); }
  .editor-shortcut-grid { grid-template-columns:1fr; }
  .editor-foot { align-items:flex-start; }
}