/* Image Studio — editor-specific styles.
   The Studio shell (.studio / .st-*) supplies the chrome; these rules add the
   zoomable canvas stage, layer handles, import dropzone and inspector widgets.
   All colours derive from the shared --st-* variables so dark mode just works. */

/* ---- Stage area ---- */
.is-stagewrap { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }

.is-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; background: var(--st-panel);
  border: 1px solid var(--st-line); border-radius: 8px; flex: 0 0 auto;
}
.is-zoom { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; color: var(--st-ink-soft); }
.is-tb-spacer { flex: 1; }
.is-tb-info { color: var(--st-ink-soft); font-size: 12px; }

.is-stage-host {
  flex: 1; min-height: 280px; overflow: auto;
  border: 1px solid var(--st-line); border-radius: 8px;
  background:
    repeating-conic-gradient(var(--st-line-soft) 0% 25%, transparent 0% 50%) 50% / 22px 22px,
    var(--st-bg);
  display: flex;
}
.is-stage-host.drop { outline: 2px dashed var(--st-accent); outline-offset: -4px; }

.is-stage-pad { margin: auto; padding: 24px; }
.is-stage {
  position: relative; box-shadow: 0 6px 28px rgba(10, 18, 40, 0.22);
  overflow: hidden;
}
.is-stage.is-transparent {
  background:
    repeating-conic-gradient(#cfd4de 0% 25%, #ffffff 0% 50%) 50% / 18px 18px !important;
}

/* ---- Layers ---- */
.is-layer { position: absolute; transform-origin: center center; }
.is-layer:not(.locked) { cursor: move; }
.is-layer.sel { outline: 1.5px solid var(--st-accent); outline-offset: 0; }
.is-layer.locked { cursor: default; }

.is-l-image, .is-l-svg { width: 100%; height: 100%; overflow: hidden; }
.is-l-image img, .is-l-svg svg { display: block; pointer-events: none; }
.is-l-line { overflow: visible; }
.is-l-text, .is-l-panel {
  display: flex; align-items: flex-start; line-height: 1.2; overflow: hidden;
  word-break: break-word; white-space: pre-wrap;
}
.is-l-panel { align-items: flex-start; justify-content: flex-start; }
.is-l-text[contenteditable="true"] { outline: 1px dashed var(--st-accent); cursor: text; }
.is-l-scalebar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.is-scalebar-bar { width: 100%; border-radius: 1px; }
.is-scalebar-label { margin-top: 3px; line-height: 1; }

/* ---- Handles ---- */
.is-handle {
  position: absolute; width: 12px; height: 12px; background: var(--st-accent);
  border: 2px solid #fff; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  z-index: 5;
}
.is-resize { right: -7px; bottom: -7px; cursor: nwse-resize; }
.is-rotate { left: 50%; top: -22px; transform: translateX(-50%); border-radius: 50%; cursor: grab; }
.is-rotate::after {
  content: ""; position: absolute; left: 50%; top: 12px; width: 1px; height: 10px;
  background: var(--st-accent); transform: translateX(-50%);
}

/* ---- Import dropzone ---- */
.is-dropzone {
  border: 2px dashed var(--st-line); border-radius: 12px; padding: 30px 20px;
  text-align: center; cursor: pointer; background: var(--st-panel);
  transition: border-color .15s, background .15s; margin-bottom: 14px;
}
.is-dropzone:hover, .is-dropzone.drop { border-color: var(--st-accent); background: color-mix(in srgb, var(--st-accent) 6%, var(--st-panel)); }
.is-drop-ico { font-size: 34px; }
.is-drop-title { font-weight: 650; margin-top: 6px; }
.is-drop-sub { color: var(--st-ink-soft); font-size: 12px; margin-top: 4px; }
.is-sub-h { margin: 16px 0 8px; font-size: 13px; font-weight: 650; }

/* ---- Inspector widgets ---- */
.is-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.is-anno-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.is-anno-grid .st-btn { width: 100%; }

.is-layers { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.is-layer-row {
  display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px;
  cursor: pointer; font-size: 12.5px;
}
.is-layer-row:hover { background: var(--st-line-soft); }
.is-layer-row.sel { background: color-mix(in srgb, var(--st-accent) 16%, transparent); }
.is-layer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-eye, .is-lock { background: none; font-size: 13px; line-height: 1; padding: 2px; opacity: .8; }
.is-eye:hover, .is-lock:hover { opacity: 1; }

.is-slider { display: block; margin-bottom: 8px; }
.is-slider-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--st-ink-soft); margin-bottom: 2px; }
.is-slider input[type="range"] { width: 100%; }
.is-val { font-variant-numeric: tabular-nums; }

.is-export-preview {
  display: flex; justify-content: center; align-items: center; padding: 10px;
  background:
    repeating-conic-gradient(var(--st-line-soft) 0% 25%, transparent 0% 50%) 50% / 18px 18px,
    var(--st-bg);
  border-radius: 8px; min-height: 80px;
}
.is-export-preview img { box-shadow: 0 3px 14px rgba(10,18,40,.18); }