/* ── App layout (mobile-first, flex column fills dvh) ────────────────── */
.editor {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: var(--mh-bg);
  overflow: hidden;
  padding-top: env(safe-area-inset-top, 0);
}

/* ── 3D Viewer ───────────────────────────────────────────────────────── */
.viewer {
  position: relative;
  flex: 0 0 auto;
  height: 180px;
  background: linear-gradient(180deg, #f1faf5 0%, #ffffff 100%);
  border-bottom: 1px solid var(--mh-border);
  overflow: hidden;
  transition: height .22s cubic-bezier(.16,.84,.44,1);
}
.viewer.is-hidden {
  height: 0;
  border-bottom: 0;
}
.viewer__canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.viewer__controls {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  z-index: 2;
}

.viewer__expand {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--mh-text-secondary);
  backdrop-filter: blur(4px);
  z-index: 3;
  transition: background-color .15s, color .15s, transform .12s;
}
.viewer__expand:active {
  background: var(--mh-green);
  color: #fff;
  transform: scale(0.92);
}

/* Fullscreen 3D preview */
.preview-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: linear-gradient(180deg, #eaf6f0 0%, #ffffff 60%, #f5fbf8 100%);
  display: flex;
  flex-direction: column;
  animation: fadeIn .2s ease-out;
}
.preview-modal[hidden] { display: none; }
.preview-modal__canvas {
  flex: 1;
  display: block;
  width: 100%;
  min-height: 0;
  touch-action: none;
}
.preview-modal__top {
  position: absolute;
  top: env(safe-area-inset-top, 0);
  left: 0;
  right: 56px;
  display: flex;
  gap: 6px;
  padding: 12px;
  z-index: 2;
}
.preview-modal__close {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top, 0));
  right: 8px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--mh-text);
  border: 1px solid var(--mh-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 3;
  transition: background-color .15s, transform .12s;
}
.preview-modal__close:active {
  background: var(--mh-border-soft);
  transform: scale(0.92);
}
.preview-modal__hint {
  position: absolute;
  bottom: calc(20px + env(safe-area-inset-bottom, 0));
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  border-radius: 14px;
  pointer-events: none;
  animation: previewHintIn 3s ease-out forwards;
  white-space: nowrap;
}
@keyframes previewHintIn {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}


/* ── Body-part tabs ──────────────────────────────────────────────────── */
.parts {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px 0 0;
  background: var(--mh-surface);
  border-bottom: 1px solid var(--mh-border);
}

/* Layer mode toggle — sticky-left, never scrolls with tabs */
.parts__mode {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  background: var(--mh-border-soft);
  border-radius: 14px;
  padding: 2px;
  margin: 6px 6px 6px 8px;
  gap: 2px;
}
.parts__mode-btn {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--mh-text-secondary);
  transition: background-color .15s, color .15s;
  white-space: nowrap;
}
.parts__mode-btn.is-active {
  background: var(--mh-surface);
  color: var(--mh-green);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.parts__scroll {
  flex: 1;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  padding: 6px 8px;
}
.parts__scroll::-webkit-scrollbar { display: none; }
.parts__tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mh-text-secondary);
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.parts__tab.is-active {
  background: var(--mh-surface-soft);
  color: var(--mh-green);
}
.parts__layer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  margin-right: 6px;
  border-radius: 14px;
  font-size: 11px;
  color: var(--mh-text-secondary);
  border: 1px solid var(--mh-border-strong);
}
.parts__layer[aria-pressed="true"] {
  background: var(--mh-green);
  color: #fff;
  border-color: var(--mh-green);
}
.parts.is-hidden { display: none; }

/* ── Canvas area ─────────────────────────────────────────────────────── */
.canvas-wrap {
  position: relative;
  flex: 1 1 auto;
  background:
    linear-gradient(45deg, #ececec 25%, transparent 25%),
    linear-gradient(-45deg, #ececec 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ececec 75%),
    linear-gradient(-45deg, transparent 75%, #ececec 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-color: #f5f5f5;
  overflow: hidden;
  touch-action: none;
}
.canvas-stage {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  touch-action: none;
  will-change: transform;
}
.pixel-canvas {
  position: absolute;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}
.pixel-canvas--preview { pointer-events: none; }

.part-outline {
  position: absolute;
  top: 0; left: 0;
  width: 64px; height: 64px;
  pointer-events: none;
  overflow: visible;
}

.canvas-cursor {
  position: absolute;
  top: 0; left: 0;
  width: 56px;
  height: 56px;
  pointer-events: none;
  display: none;
  z-index: 6;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
  will-change: transform;
}
.canvas-cursor.is-visible { display: block; }
.canvas-cursor__ring {
  fill: rgba(0, 189, 110, 0.15);
  stroke: var(--mh-green);
  stroke-width: 2.2;
}
.canvas-cursor__inner {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.5;
  opacity: .9;
}
.canvas-cursor__cross {
  stroke: var(--mh-green);
  stroke-width: 2.2;
  stroke-linecap: round;
}
/* tool-specific tints */
.canvas-wrap[data-tool="eraser"] .canvas-cursor__ring  { stroke: #ff5858; fill: rgba(255,88,88,0.12); }
.canvas-wrap[data-tool="eraser"] .canvas-cursor__cross { stroke: #ff5858; }
.canvas-wrap[data-tool="picker"] .canvas-cursor__ring  { stroke: var(--mh-blue); fill: rgba(55,141,241,0.12); }
.canvas-wrap[data-tool="picker"] .canvas-cursor__cross { stroke: var(--mh-blue); }
.canvas-wrap[data-tool="fill"]   .canvas-cursor__ring  { stroke: #f5a623; fill: rgba(245,166,35,0.12); }
.canvas-wrap[data-tool="fill"]   .canvas-cursor__cross { stroke: #f5a623; }

/* leader line: connects finger to the offset cursor */
.canvas-leader {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  display: none;
}
.canvas-leader.is-visible { display: block; }
.canvas-leader line {
  stroke: var(--mh-green);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  opacity: .55;
}
.canvas-wrap[data-tool="eraser"] .canvas-leader line { stroke: #ff5858; }
.canvas-wrap[data-tool="picker"] .canvas-leader line { stroke: var(--mh-blue); }
.canvas-wrap[data-tool="fill"]   .canvas-leader line { stroke: #f5a623; }

.canvas-hud {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.9);
  border-radius: 16px;
  font-size: 11px;
  color: var(--mh-text-secondary);
  font-variant-numeric: tabular-nums;
  z-index: 5;
}

/* ── Floating undo/redo (prominent action group) ─────────────────────── */
.canvas-undoredo {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 6px;
  z-index: 5;
}
.float-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mh-surface);
  color: var(--mh-text);
  border: 1px solid var(--mh-border-strong);
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  transition: background-color .15s, color .15s, transform .12s;
}
.float-btn:not(:disabled):active {
  background: var(--mh-green);
  color: #fff;
  border-color: var(--mh-green);
  transform: scale(0.94);
}
.float-btn:disabled {
  opacity: .35;
  color: var(--mh-text-disabled);
}

/* ── Palette (inline HSV picker + recent strip) ─────────────────────── */
.palette {
  flex: 0 0 auto;
  background: var(--mh-surface);
  border-top: 1px solid var(--mh-border);
  padding: 6px 8px 6px;
}
.palette__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.palette__sv {
  position: relative;
  width: 100%;
  height: 70px;
  border-radius: 6px;
  cursor: crosshair;
  touch-action: none;
  overflow: hidden;
  border: 1px solid var(--mh-border-strong);
}
.palette__sv-cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.45);
  pointer-events: none;
}
.palette__hue {
  position: relative;
  width: 100%;
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(to right,
    #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%,
    #00f 67%, #f0f 83%, #f00 100%);
  touch-action: none;
  cursor: crosshair;
  border: 1px solid var(--mh-border-strong);
}
.palette__hue-cursor {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 22px;
  margin-left: -4px;
  margin-top: -11px;
  border: 2px solid #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.45);
  pointer-events: none;
}

.palette__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.palette__current {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
  background: #000;
}
.palette__recent {
  flex: 1;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.palette__recent::-webkit-scrollbar { display: none; }

.swatch {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.15);
  cursor: pointer;
  position: relative;
  transition: transform .12s;
}
.swatch:active { transform: scale(0.92); }

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.toolbar {
  flex: 0 0 auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--mh-surface);
  border-top: 1px solid var(--mh-border);
  padding: 4px;
  gap: 2px;
}
.toolbar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 8px;
  color: var(--mh-text-secondary);
  transition: background-color .15s, color .15s;
}
.toolbar__btn:active { background: rgba(0,0,0,.06); }
.toolbar__btn.is-active {
  background: var(--mh-surface-soft);
  color: var(--mh-green);
}
.toolbar__btn--toggle[aria-pressed="true"] {
  background: var(--mh-surface-soft);
  color: var(--mh-green);
}
.toolbar__btn--action:active {
  background: rgba(255, 88, 88, 0.12);
  color: var(--mh-red);
}
.toolbar__btn:disabled { color: var(--mh-text-disabled); background: none; }

/* ── Bottom actions ──────────────────────────────────────────────────── */
.actions {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0));
  background: var(--mh-surface);
  border-top: 1px solid var(--mh-border);
}
.actions .mh-btn {
  flex: 1;
  min-width: 0;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  height: 38px;
}
.actions .mh-btn--primary { flex: 1.2; font-weight: 600; }

/* ── Overlay (image-on-skin) ─────────────────────────────────────────── */
.overlay-parts {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--mh-border);
  margin-bottom: 4px;
}
.overlay-parts::-webkit-scrollbar { display: none; }
.overlay-parts__btn {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 14px;
  background: transparent;
  color: var(--mh-text-secondary);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.overlay-parts__btn.is-active {
  background: var(--mh-surface-soft);
  color: var(--mh-green);
}

.overlay-stage {
  position: relative;
  width: 100%;
  max-width: 240px;
  margin: 8px auto 0;
  aspect-ratio: 1;
  border: 1px solid var(--mh-border);
  border-radius: 8px;
  background:
    linear-gradient(45deg, #ececec 25%, transparent 25%),
    linear-gradient(-45deg, #ececec 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ececec 75%),
    linear-gradient(-45deg, transparent 75%, #ececec 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-color: #f5f5f5;
  overflow: hidden;
  touch-action: none;
}
.overlay-stage canvas {
  position: absolute;
  inset: 0;
  margin: auto;
  image-rendering: pixelated;
  pointer-events: none;
}
.overlay-image {
  position: absolute;
  touch-action: none;
  cursor: move;
  border: 1px dashed var(--mh-blue);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
}

.overlay-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.overlay-slider {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--mh-text-secondary);
}
.overlay-slider input[type="range"] { width: 100%; accent-color: var(--mh-green); }

/* ── Load-skin cards ─────────────────────────────────────────────────── */
.modal__subtitle {
  margin: 14px 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--mh-text-secondary);
}
.preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (min-width: 480px) {
  .preset-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 600px) {
  .preset-grid { grid-template-columns: repeat(5, 1fr); }
}
.preset-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: var(--mh-surface);
  border: 1px solid var(--mh-border-strong);
  border-radius: 10px;
  text-align: center;
  transition: border-color .15s, background-color .15s, transform .12s;
  min-width: 0;
}
.preset-card:active {
  background: var(--mh-surface-soft);
  border-color: var(--mh-green);
  transform: scale(0.96);
}
.preset-card__preview {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f1faf5 0%, #e7f4ed 100%);
  border-radius: 8px;
  overflow: hidden;
}
.preset-card__preview canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  width: 40px;
  height: 40px;
}
.preset-card__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--mh-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.preset-card__sub {
  font-size: 9px;
  color: var(--mh-text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.load-options { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

/* ── Saved slots ──────────────────────────────────────────────────────── */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (min-width: 480px) { .slot-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 600px) { .slot-grid { grid-template-columns: repeat(5, 1fr); } }

.slot-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: var(--mh-surface);
  border: 1px solid var(--mh-border-strong);
  border-radius: 10px;
  text-align: center;
  transition: border-color .15s, background-color .15s, transform .12s;
  min-width: 0;
}
.slot-card:active {
  background: var(--mh-surface-soft);
  border-color: var(--mh-green);
  transform: scale(0.96);
}
.slot-card__preview {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f1faf5 0%, #e7f4ed 100%);
  border-radius: 8px;
  overflow: hidden;
  font-size: 22px;
}
.slot-card__preview--save {
  background: var(--mh-surface-soft);
  color: var(--mh-green);
}
.slot-card__preview canvas {
  image-rendering: pixelated;
  width: 40px;
  height: 40px;
}
.slot-card__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--mh-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.slot-card__date {
  font-size: 9px;
  color: var(--mh-text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.slot-card__delete {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--mh-text-secondary);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s, color .15s, transform .12s;
}
.slot-card__delete:hover,
.slot-card__delete.is-armed {
  background: var(--mh-red);
  color: #fff;
}
.slot-card--save {
  background: linear-gradient(180deg, var(--mh-surface) 0%, var(--mh-surface-soft) 100%);
  border-color: var(--mh-green);
  border-style: dashed;
}
/* The save card's label ("Сохранить текущий") is longer than a stored slot's
   name — let it wrap to two lines instead of truncating with an ellipsis. */
.slot-card--save .slot-card__name {
  white-space: normal;
  line-height: 1.2;
}

/* ── Save-as input ────────────────────────────────────────────────────── */
.save-label {
  display: block;
  margin: 10px 0 4px;
  font-size: 12px;
  color: var(--mh-text-secondary);
}
.save-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--mh-r-input);
  border: 1px solid var(--mh-border-strong);
  background: var(--mh-surface);
  font-size: 14px;
}
.save-input:focus {
  outline: none;
  border-color: var(--mh-green);
}

/* ── Restore banner (autosave) ────────────────────────────────────────── */
.restore-banner {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0));
  left: 50%;
  transform: translateX(-50%);
  z-index: 250;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  border-radius: 22px;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  animation: restoreIn .25s ease-out;
  max-width: calc(100% - 24px);
}
.restore-banner[hidden] { display: none; }
.restore-banner__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.restore-banner__btn {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 14px;
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.restore-banner__btn--primary {
  background: var(--mh-green);
}
.restore-banner__btn--close {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
@keyframes restoreIn {
  from { transform: translate(-50%, -16px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}

/* ── Animation chooser ───────────────────────────────────────────────── */
.anim-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
@media (min-width: 480px) {
  .anim-grid { grid-template-columns: repeat(4, 1fr); }
}
.anim-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px;
  background: var(--mh-surface);
  border: 1px solid var(--mh-border-strong);
  border-radius: 10px;
  text-align: center;
  transition: background-color .15s, border-color .15s, transform .12s;
}
.anim-cell:active {
  background: var(--mh-surface-soft);
  border-color: var(--mh-green);
  transform: scale(0.96);
}
.anim-cell.is-active {
  background: var(--mh-surface-soft);
  border-color: var(--mh-green);
}
.anim-cell__icon { font-size: 22px; line-height: 1; }
.anim-cell__name { font-size: 12px; font-weight: 600; color: var(--mh-text); }

/* ── Sticker library ─────────────────────────────────────────────────── */
.sticker-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 8px 0;
  scrollbar-width: none;
  margin: 4px 0 6px;
  border-bottom: 1px solid var(--mh-border);
}
.sticker-tabs::-webkit-scrollbar { display: none; }
.sticker-tabs__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 16px;
  background: transparent;
  color: var(--mh-text-secondary);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.sticker-tabs__btn.is-active {
  background: var(--mh-surface-soft);
  color: var(--mh-green);
}

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-height: 50dvh;
  overflow-y: auto;
  padding: 4px 2px 8px;
}
@media (min-width: 480px) {
  .sticker-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 600px) {
  .sticker-grid { grid-template-columns: repeat(6, 1fr); }
}
.sticker-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: var(--mh-surface);
  border: 1px solid var(--mh-border-strong);
  border-radius: 8px;
  transition: border-color .15s, background-color .15s, transform .12s;
  min-width: 0;
}
.sticker-cell:active {
  background: var(--mh-surface-soft);
  border-color: var(--mh-green);
  transform: scale(0.94);
}
.sticker-cell__img {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(45deg, #ececec 25%, transparent 25%),
    linear-gradient(-45deg, #ececec 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ececec 75%),
    linear-gradient(-45deg, transparent 75%, #ececec 75%) #f5f5f5;
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  border-radius: 4px;
}
.sticker-cell__img canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  width: 36px;
  height: 36px;
}

/* Wardrobe cells are bigger — hair/face/costume previews need detail
   to be readable, unlike the dense sticker grids. */
#wardrobeGrid {
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 480px) {
  #wardrobeGrid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 600px) {
  #wardrobeGrid { grid-template-columns: repeat(5, 1fr); }
}
#wardrobeGrid .sticker-cell__img {
  width: 64px;
  height: 64px;
}
#wardrobeGrid .sticker-cell__img canvas {
  width: 60px;
  height: 60px;
}
#wardrobeGrid .sticker-cell__name {
  font-size: 11px;
}
.sticker-cell__name {
  font-size: 10px;
  color: var(--mh-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.load-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--mh-surface);
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-r-card);
  text-align: left;
  transition: border-color .15s, background-color .15s;
}
.load-card:active { background: var(--mh-surface-soft); border-color: var(--mh-green); }
.load-card__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--mh-border-soft);
  color: var(--mh-text);
  font-size: 22px;
}
.load-card__icon--steve { background: #00aeae; color: #fff; }
.load-card__icon--alex  { background: #d4823a; color: #fff; }
.load-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.load-card__title { font-size: 14px; font-weight: 600; color: var(--mh-text); }
.load-card__sub   { font-size: 12px; color: var(--mh-text-secondary); }

/* ── Export cards ────────────────────────────────────────────────────── */
.export-options { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.export-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 14px;
  padding: 12px 14px;
  background: var(--mh-surface);
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-r-card);
  text-align: left;
  transition: border-color .15s, background-color .15s;
}
.export-card:active { background: var(--mh-surface-soft); border-color: var(--mh-green); }
.export-card__icon {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  background: var(--mh-green);
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .5px;
}
.export-card__title { font-size: 15px; font-weight: 600; color: var(--mh-text); }
.export-card__sub   { font-size: 12px; color: var(--mh-text-secondary); }

/* ── Download gate (timer + ad) ───────────────────────────────────────── */
.dl-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 14px;
}
.dl-spinner {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--mh-border);
  border-top-color: var(--mh-green);
  animation: dlSpin 0.9s linear infinite;
}
@keyframes dlSpin { to { transform: rotate(360deg); } }
.dl-head__title { font-size: 16px; font-weight: 600; color: var(--mh-text); }
.dl-head__sub   { font-size: 12px; color: var(--mh-text-secondary); margin-top: 2px; }

.dl-progress {
  height: 6px;
  background: var(--mh-border-soft);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.dl-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--mh-green) 0%, #5ad17e 100%);
  border-radius: 3px;
}
.dl-countdown {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--mh-text);
  margin: 4px 0 16px;
}
.dl-countdown__num {
  display: inline-block;
  min-width: 28px;
  font-size: 22px;
  font-weight: 700;
  color: var(--mh-green);
  font-variant-numeric: tabular-nums;
  vertical-align: -2px;
}

.dl-ad {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  flex: 1;             /* fills available height in fullscreen modal */
  min-height: 0;
}
.dl-ad__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--mh-text-disabled);
  margin-bottom: 4px;
  text-align: center;
}
.dl-ad__frame {
  flex: 1;
  min-height: 250px;
  background: var(--mh-bg);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dl-ad__placeholder {
  text-align: center;
  font-size: 13px;
  color: var(--mh-text-disabled);
  line-height: 1.6;
}
.dl-ad__placeholder small { font-size: 11px; }
/* РСЯ-контейнер занимает весь фрейм; сам блок Яндекс подгоняет под ширину */
.dl-ad__rtb { width: 100%; height: 100%; }

/* ── Done check ───────────────────────────────────────────────────────── */
.dl-done {
  text-align: center;
  padding: 18px 0 12px;
}
.dl-done__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--mh-surface-soft);
  color: var(--mh-green);
  animation: dlCheckPop .35s cubic-bezier(.18, 1.4, .6, 1);
}
@keyframes dlCheckPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.dl-done__title { font-size: 18px; font-weight: 700; color: var(--mh-text); }
.dl-done__sub   { font-size: 13px; color: var(--mh-text-secondary); margin-top: 4px; }
.dl-share-cta {
  margin-top: 22px;
  padding: 0 22px;
  height: 44px;
  text-transform: none;
  font-size: 14px;
}

/* Кнопка-счётчик на месте таймера (как dlfile.php сайта):
   серая с «Подождите: N сек.» → после отсчёта зелёная и кликабельная */
.dl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 340px;
  margin: 2px auto 14px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--mh-r-card);
  background: var(--mh-green);
  color: #fff;
  cursor: pointer;
  font: inherit;
  transition: background .2s ease, color .2s ease;
}
.dl-btn[disabled] {
  background: var(--mh-border);
  color: var(--mh-text-secondary);
  cursor: default;
}
.dl-btn__icon { display: flex; flex: 0 0 auto; }
.dl-btn__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
  text-align: left;
}
.dl-btn__label { font-size: 15px; font-weight: 700; }
.dl-btn__timer,
.dl-btn__sub { font-size: 12px; opacity: .85; }

/* Спиннер после отсчёта: зелёный круг с галочкой вместо вращения */
.dl-spinner.is-ready {
  animation: none;
  border-color: var(--mh-green);
  background: var(--mh-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/20px 20px no-repeat;
}

.modal__actions--center { justify-content: center; }

/* ── Tablet portrait — center the column instead of stretching it ────── */
/* This range sits between phone (vertical stack) and desktop (3-col grid).
   The bare stack would blow the palette/toolbar/actions out to full width
   while leaving the 3D preview tiny. Cap and center the editor, and give the
   viewer + colour picker more breathing room so it reads as intentional. */
@media (min-width: 600px) and (max-width: 63.999em) and (orientation: portrait) {
  .editor {
    max-width: 680px;
    margin-inline: auto;
    border-inline: 1px solid var(--mh-border);
  }
  .viewer { height: 260px; }
  .palette__sv { height: 150px; }
}

/* ── Desktop tweaks ──────────────────────────────────────────────────── */
@media (min-width: 64em) {
  .editor {
    display: grid;
    grid-template-columns: 360px 1fr 280px;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "viewer canvas palette"
      "parts  canvas toolbar"
      "actions actions actions";
    gap: 0;
  }
  .viewer       { grid-area: viewer; height: 100%; max-height: none; border-right: 1px solid var(--mh-border); border-bottom: 0; }
  .parts        { grid-area: parts; flex-direction: column; align-items: stretch; border-right: 1px solid var(--mh-border); border-bottom: 0; }
  .parts__scroll { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
  .parts__tab   { width: 100%; text-align: left; }
  .canvas-wrap  { grid-area: canvas; }
  .palette      { grid-area: palette; display: flex; flex-direction: column; border-left: 1px solid var(--mh-border); border-top: 0; }
  /* Fill the tall palette column with the SV picker — previously a short 70px
     box that left a large empty gap below the recent-colors row, and made
     value selection imprecise. */
  .palette__main { flex: 1 1 auto; min-height: 0; }
  .palette__sv   { flex: 1 1 auto; height: auto; min-height: 180px; }
  .palette__swatches { flex-wrap: wrap; }
  .toolbar      { grid-area: toolbar; grid-auto-flow: row; grid-auto-rows: 44px; grid-auto-columns: auto; border-left: 1px solid var(--mh-border); border-top: 1px solid var(--mh-border); }
  .actions      { grid-area: actions; }
}