/* ── Experimental v2 standalone mockup layout (admin preview via ?ver=2) ── */
.mk-v2 main { background: linear-gradient(to bottom right, #f8fafc, #eff6ff 45%, #f8fafc); }
.mk-v2-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 1024px) { .mk-v2-shell { grid-template-columns: minmax(0, 1fr) 420px; } }

.mk-v2-main { min-width: 0; }
.mk-v2-title {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: -0.022em; font-weight: 800; color: #0b1120;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.1; margin: 0 0 1rem;
}
.mk-v2-stage {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 1.5rem; overflow: hidden;
  box-shadow: 0 34px 70px -44px rgba(15, 23, 42, 0.4);
}
/* Drop the square viewer for a wider, shorter one so the stage fills the whole
   column (no gap next to the sidebar) and comfortably fits within the fold.
   Overrides the inline `aspect-ratio: 1` on the viewer element. */
.mk-v2-viewer > div {
  aspect-ratio: 3 / 2 !important;
  max-height: calc(100vh - 11rem);
}
.mk-v2-toolbar {
  padding: 0.85rem 1.1rem !important; border-bottom: 1px solid #f1f5f9 !important;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}

/* Canvas size-ratio control, docked in the viewer's bottom-right corner */
.mk-v2-ratio { position: absolute; bottom: 0.75rem; right: 0.75rem; z-index: 20; }
.mk-v2-ratio-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; height: 2rem; padding: 0 0.55rem 0 0.65rem;
  border-radius: 0.6rem; background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.35); color: #475569; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.01em; cursor: pointer; backdrop-filter: blur(4px);
  transition: color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mk-v2-ratio-btn:hover { color: #0b1120; border-color: #cbd5e1; box-shadow: 0 6px 16px -6px rgba(15, 23, 42, 0.45); }
/* Default mode: compact icon-only square button (matches the camera control) */
.mk-v2-ratio-btn--icon { width: 2rem; padding: 0; justify-content: center; }
.mk-v2-ratio-btn--icon .mk-v2-ratio-label,
.mk-v2-ratio-btn--icon .mk-v2-ratio-caret { display: none; }
.mk-v2-ratio-btn svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; }
.mk-v2-ratio-btn--icon svg { width: 1.05rem; height: 1.05rem; }
.mk-v2-ratio-caret { opacity: 0.7; }
.mk-v2-ratio-menu {
  position: absolute; right: 0; bottom: calc(100% + 0.4rem); min-width: 8.5rem;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem;
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.5); padding: 0.35rem;
  display: flex; flex-direction: column; gap: 0.12rem;
}
.mk-v2-ratio-menu[hidden] { display: none; }
.mk-v2-ratio-opt {
  width: 100%; text-align: left; padding: 0.45rem 0.6rem; border-radius: 0.5rem;
  font-size: 0.8rem; font-weight: 500; color: #334155; background: transparent; border: 0; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.mk-v2-ratio-opt:hover { background: #f1f5f9; }
.mk-v2-ratio-opt[aria-current="true"] { background: #eff6ff; color: #2563eb; font-weight: 600; }
.mk-v2-toolbar #preview-title {
  margin-right: auto; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: #94a3b8; font-weight: 700;
}

.mk-v2-sidebar { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 1024px) {
  /* padding-bottom reserves room so the Download menu (which opens downward at
     the bottom of the sidebar) isn't clipped by overflow-y:auto. The sidebar
     has no background of its own, so this is just page gradient — no visible gap. */
  .mk-v2-sidebar { position: sticky; top: 1.25rem; max-height: calc(100vh - 2.5rem); overflow-y: auto; padding-right: 2px; padding-bottom: 8.5rem; }
}
.mk-v2-eyebrow { display: inline-flex; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #2563eb; }
.mk-v2-sidebar-head { padding: 0.25rem 0.25rem 0; }
.mk-v2-sidebar-title {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800; letter-spacing: -0.02em; color: #0b1120; font-size: 1.35rem; margin: 0.25rem 0 0;
}

.mk-v2-panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 1.25rem; padding: 1.05rem 1.1rem 1.15rem; box-shadow: 0 22px 48px -44px rgba(15, 23, 42, 0.4); }
.mk-v2-panel-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #94a3b8; margin-bottom: 0.75rem; }
.mk-v2-area { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid #f1f5f9; }
.mk-v2-area:first-of-type { border-top: 0; }
.mk-v2-area-name { font-weight: 600; color: #0b1120; font-size: 0.95rem; }
.mk-v2-add { padding: 0.5rem 0.9rem !important; font-size: 0.82rem !important; }
.mk-v2-editlink { margin-top: 0.85rem; width: 100%; text-align: center; font-size: 0.82rem; font-weight: 600; color: #2563eb; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 0.75rem; padding: 0.55rem 0.75rem; cursor: pointer; transition: background-color .2s ease; }
.mk-v2-editlink:hover { background: #e0edff; }

/* Prominent Download, relocated to the bottom of the sidebar */
.mk-v2-download-container { position: relative; width: 100%; }
.mk-v2-download-container #download-btn {
  width: 100%; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1rem !important; font-size: 0.95rem !important;
  border-radius: 1rem !important; box-shadow: none !important;
}
.mk-v2-download-container #download-btn svg { width: 1.05rem; height: 1.05rem; }
.mk-v2-download-container #download-dropdown { width: 100%; }

/* Relocated 3D controls + camera-animation blocks, restyled as sidebar panels */
.mk-v2-controls, .mk-v2-anim {
  background: #fff !important; border: 1px solid #e5e7eb !important; border-radius: 1.25rem !important;
  padding: 0.9rem 1.1rem 1.1rem !important; box-shadow: 0 22px 48px -44px rgba(15, 23, 42, 0.4);
}
.mk-v2-sidebar .mk-v2-controls .grid.grid-cols-2 { grid-template-columns: 1fr; gap: 1.1rem; }

/* Design editor modal — canvas on the left, scrollable tools sidebar on the right */
.mk-v2-modal { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 0.75rem; }
.mk-v2-modal[hidden] { display: none; }
.mk-v2-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(4px); }
/* Match the main page content width (max-w-[1600px]); the sidebar stretches. */
.mk-v2-modal-panel { position: relative; width: min(1600px, calc(100vw - 2.5rem)); height: 94vh; display: flex; flex-direction: column; background: #fff; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 50px 90px -30px rgba(15, 23, 42, 0.65); }
.mk-v2-modal-close { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 20; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; color: #64748b; background: #f1f5f9; cursor: pointer; transition: background-color .2s ease, color .2s ease; border: 0; }
.mk-v2-modal-close:hover { background: #e2e8f0; color: #0b1120; }
.mk-v2-modal-body { flex: 1; min-height: 0; overflow: hidden; }
.mk-v2-editor { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; height: 100%; display: flex; flex-direction: column; }

/* Two-column editor: canvas (main) + tools (aside) */
@media (min-width: 860px) {
  .mk-v2-editor { flex-direction: row !important; }
}
.mk-v2-ed-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; flex: 1; }
.mk-v2-ed-main > header { flex-shrink: 0; }
/* Keep the tab strip visible: let the header row and the UV-toggle wrap instead
   of overflowing horizontally (the editor <section> is overflow-hidden, which
   was clipping the tabs on mockups with 3+ / long-named panels). */
.mk-v2-ed-main > header > div:first-child { flex-wrap: wrap; min-width: 0; }
/* Bigger, more prominent placeholder tabs */
.mk-v2-ed-main #dieline-toggle { flex-wrap: wrap; max-width: 100%; gap: 0.3rem; padding: 0.3rem; }
.mk-v2-ed-main #dieline-toggle button {
  font-size: 0.9rem !important; padding: 0.55rem 1.05rem !important; border-radius: 0.6rem !important;
}
.mk-v2-ed-main > .p-6 { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 1rem !important; }
/* Keep the editing surface strictly SQUARE (JS sets the fitted px size). The
   max-* + aspect-ratio are fallbacks; explicit width/height come from JS. */
.mk-v2-ed-main > .p-6 > div { max-width: 100% !important; max-height: 100% !important; aspect-ratio: 1 / 1 !important; margin: 0 auto; }

/* Separate Background & Texture onto their own lines (the .gap-4 grid only, so
   the text-layer Font/Size grid keeps its own layout) */
.mk-v2-ed-aside .grid.gap-4 { grid-template-columns: 1fr !important; gap: 1rem !important; }

/* ── Premium redesign of the Background / Texture controls ──
   Applies to BOTH the modal editor (editor-*) and the sidebar 3D controls
   (preview-*). Scoped to .mk-v2 so the live page is untouched. */

/* Group each control section into a soft "tool" card */
.mk-v2 .grid.gap-4 > div {
  background: #f8fafc; border: 1px solid #eef2f7; border-radius: 1rem; padding: 0.95rem 1rem 1rem;
}
/* Section labels → refined uppercase caption */
.mk-v2 .grid.gap-4 > div > span.block,
.mk-v2 .grid.gap-4 > div > label.block {
  font-size: 0.68rem !important; font-weight: 700 !important; letter-spacing: 0.09em !important;
  text-transform: uppercase !important; color: #64748b !important; margin-bottom: 0.7rem !important;
}

/* Solid / Gradient → segmented control on a soft track. We intentionally do NOT
   override the button background/colour: the editor toggles a .bg-blue-600 class
   and the sidebar sets it inline, and that active fill is how you see which one
   is open. We only reshape/resize the buttons. */
.mk-v2 [role="tablist"][aria-label="Background type"] {
  gap: 0.3rem; background: #eef2f7; border-radius: 0.75rem; padding: 0.28rem; margin-bottom: 0.85rem;
}
.mk-v2 .editor-bg-mode-btn, .mk-v2 .preview-bg-mode-btn {
  border-radius: 0.55rem !important; padding: 0.5rem 0.5rem !important;
  font-size: 0.85rem !important; font-weight: 600 !important;
}

/* Roomier swatch rows */
.mk-v2 #editor-bg-color-panel, .mk-v2 #editor-bg-gradient-panel,
.mk-v2 #preview-bg-color-panel, .mk-v2 #preview-bg-gradient-panel { gap: 0.55rem !important; align-items: center; }
.mk-v2 #editor-color-presets, .mk-v2 #editor-gradient-presets,
.mk-v2 #color-presets, .mk-v2 #gradient-presets { gap: 0.55rem !important; }

/* Bigger, cleaner round swatches (picker, presets, transparent, gradient stops).
   No border-color override — the presets use an inline blue hover border we want
   to keep. */
.mk-v2 #editor-color-presets > button,
.mk-v2 #editor-gradient-presets > button,
.mk-v2 #color-presets > button,
.mk-v2 #gradient-presets > button,
.mk-v2 #color-picker-wrapper,
.mk-v2 #transparent-bg-btn,
.mk-v2 #editor-bg-color-panel > div:first-child,
.mk-v2 #preview-bg-color-panel > div:first-child,
.mk-v2 #editor-bg-gradient-panel > div:not(#editor-gradient-presets),
.mk-v2 #preview-bg-gradient-panel > div:not(#gradient-presets) {
  width: 34px !important; height: 34px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1) !important;
}
/* Gradient direction picker — match the swatch size */
.mk-v2 #editor-gradient-direction, .mk-v2 #preview-gradient-direction {
  width: 34px !important; height: 34px !important; font-size: 1rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

/* Texture swatches — resize only; the active border+glow is set inline by JS so
   you can see (and disable) the current selection. */
.mk-v2 .texture-btn {
  width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important;
}
.mk-v2 [aria-label="Texture options"] { gap: 0.6rem !important; }

/* ── Narrow mobile: editor stacks vertically, modal scrolls ── */
@media (max-width: 859px) {
  /* The floating X overlaps the editor's Clear button here — hide it and rely
     on the Apply button / backdrop / Esc to close. */
  .mk-v2-modal-close { display: none; }
  .mk-v2-modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .mk-v2-editor { height: auto; min-height: 100%; }
  .mk-v2-ed-main { flex: 0 0 auto; }
  .mk-v2-ed-main > .p-6 { flex: 0 0 auto; }
  /* A simple width-based square that stays square regardless of selection */
  .mk-v2-ed-main > .p-6 > div {
    width: 100% !important; height: auto !important; max-height: none !important;
    aspect-ratio: 1 / 1 !important;
  }
}

.mk-v2-ed-aside { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (min-width: 860px) {
  .mk-v2-ed-aside { width: 480px; flex-shrink: 0; border-left: 1px solid #eef2f7; padding-top: 2.6rem; }
}
.mk-v2-ed-aside > .px-5 { border-top: 0 !important; }

/* Live 3D preview inside the modal sidebar */
.mk-v2-mini3d-wrap { margin: 0 1.25rem 0.5rem; }
.mk-v2-mini3d-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #64748b; margin-bottom: 0.5rem; }
.mk-v2-mini3d { position: relative; width: 100%; aspect-ratio: 1 / 1; background: linear-gradient(to bottom right, #f1f5f9, #e2e8f0); border: 1px solid #eef2f7; border-radius: 1rem; overflow: hidden; }
@media (min-width: 860px) {
  /* Above the Background/Texture controls on desktop; below them on mobile */
  .mk-v2-mini3d-wrap { order: -1; margin-top: 0; }
}

/* Clear, obvious "Apply" action so users don't rely on the X */
.mk-v2-apply {
  position: sticky; bottom: 0; z-index: 5; margin: 0.75rem; width: calc(100% - 1.5rem);
  justify-content: center; box-shadow: 0 -10px 20px -14px rgba(15, 23, 42, 0.5);
}

body.mk-v2-modal-open { overflow: hidden; }