/* ── FULL SCREEN MODAL OVERLAY ── */
#tpl-editor-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #1a1a2a;
  color: #e8eaf8; /* piksel editörü, çoğu tasarım aracı gibi moddan bağımsız her zaman koyu */
  flex-direction: column;
}
#tpl-editor-modal.active { display: flex; }

/* ── TOP MENUBAR ── */
#tpl-menubar {
  display: flex;
  align-items: center;
  height: 40px;
  background: #111120;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 0 .75rem;
  gap: .5rem;
  flex-shrink: 0;
  user-select: none;
}
#tpl-menubar .tpl-logo {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--font-display,'Space Grotesk',sans-serif);
  font-size: .8rem; font-weight: 700;
  color: #a78bfa;
  letter-spacing: -.01em;
  margin-right: .5rem;
}
#tpl-menubar .tpl-logo svg { flex-shrink: 0; }
.tpl-menu-btn {
  height: 28px; padding: 0 .6rem;
  background: transparent; border: none;
  border-radius: 6px; color: rgba(255,255,255,.7);
  font-family: var(--font-ui,'Inter',sans-serif);
  font-size: .72rem; font-weight: 600;
  cursor: pointer; transition: background .12s, color .12s;
  white-space: nowrap; letter-spacing: .01em;
}
.tpl-menu-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.tpl-menu-btn.danger { color: #f04a4a; }
.tpl-menu-btn.danger:hover { background: rgba(240,74,74,.12); }
#tpl-menubar-spacer { flex: 1; }
#tpl-done-btn {
  height: 28px; padding: 0 1rem;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  border: none; border-radius: 7px; color: #fff;
  font-family: var(--font-display,'Space Grotesk',sans-serif);
  font-size: .75rem; font-weight: 700;
  cursor: pointer; transition: opacity .15s;
  display: flex; align-items: center; gap: .35rem;
  letter-spacing: .02em;
}
#tpl-done-btn:hover { opacity: .88; }
#tpl-done-btn:disabled { opacity: .4; cursor: not-allowed; }
#tpl-close-btn {
  width: 28px; height: 28px; padding: 0;
  background: transparent; border: none;
  border-radius: 6px; color: rgba(255,255,255,.5);
  font-size: 1rem; cursor: pointer; line-height: 1;
  transition: background .12s, color .12s;
  display: flex; align-items: center; justify-content: center;
}
#tpl-close-btn:hover { background: rgba(240,74,74,.18); color: #f04a4a; }

/* ── SECONDARY TOOLBAR (tool options) ── */
#tpl-options-bar {
  display: flex;
  align-items: center;
  height: 36px;
  background: #14141f;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 0 .5rem;
  gap: .5rem;
  flex-shrink: 0;
}
.tpl-opt-label {
  font-size: .6rem; font-weight: 700; color: rgba(255,255,255,.38);
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
}
.tpl-opt-sep { width: 1px; height: 20px; background: rgba(255,255,255,.08); margin: 0 .2rem; flex-shrink: 0; }
.tpl-opt-slider {
  -webkit-appearance: none; appearance: none;
  width: 80px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.15); outline: none; cursor: pointer;
}
.tpl-opt-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px;
  border-radius: 50%; background: #a78bfa; cursor: pointer;
  border: 2px solid rgba(255,255,255,.25);
}
.tpl-opt-slider::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: #a78bfa; cursor: pointer; border: 2px solid rgba(255,255,255,.25);
}
.tpl-opt-val {
  font-size: .65rem; font-family: var(--font-mono,'JetBrains Mono',monospace);
  color: rgba(255,255,255,.55); min-width: 2rem; text-align: left;
}
.tpl-opt-check {
  display: flex; align-items: center; gap: .3rem;
  font-size: .68rem; color: rgba(255,255,255,.6);
  cursor: pointer; font-weight: 500; user-select: none;
}
.tpl-opt-check input { accent-color: #a78bfa; width: 12px; height: 12px; cursor: pointer; }
.tpl-opt-check:hover { color: #fff; }

/* ── MAIN EDITOR AREA ── */
#tpl-editor-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── LEFT TOOLS PANEL ── */
#tpl-left-panel {
  width: 48px;
  background: #111120;
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .4rem 0;
  gap: .15rem;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
#tpl-left-panel::-webkit-scrollbar { width: 0; }

.tpl-tool {
  width: 36px; height: 36px;
  background: transparent; border: 1px solid transparent;
  border-radius: 7px; color: rgba(255,255,255,.55);
  cursor: pointer; transition: all .12s;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  flex-shrink: 0;
}
.tpl-tool:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); }
.tpl-tool.active {
  background: rgba(124,58,237,.25);
  border-color: #7c3aed;
  color: var(--accent2);
}
.tpl-tool-label {
  font-size: .38rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  line-height: 1; opacity: .7;
}
.tpl-tool-sep {
  width: 28px; height: 1px;
  background: rgba(255,255,255,.07);
  margin: .2rem 0; flex-shrink: 0;
}

/* ── TEK-BUTON ARAÇ MENÜSÜ ── */
#tpl-tools-wrap { position: relative; flex-shrink: 0; }
#tpl-tools-btn {
  width: 40px; height: 48px;
  background: rgba(124,58,237,.16);
  border: 1px solid rgba(124,58,237,.45);
  border-radius: 9px; color: var(--accent2,#a78bfa);
  cursor: pointer; transition: all .12s;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  position: relative;
}
#tpl-tools-btn:hover { background: rgba(124,58,237,.3); }
#tpl-tools-btn .tpl-tool-label { opacity: .92; }
.tpl-tools-btn-caret {
  position: absolute; right: 3px; bottom: 1px;
  font-size: .5rem; opacity: .65; line-height: 1;
}

#tpl-tools-flyout {
  position: fixed; z-index: 2600;
  display: none;
  background: #16162a;
  border: 1px solid rgba(124,58,237,.45);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  padding: .55rem;
  width: 226px;
}
#tpl-tools-flyout.open { display: block; animation: tplFlyIn .12s ease; }
@keyframes tplFlyIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.tpl-tools-flyout-title {
  font-size: .58rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: rgba(255,255,255,.4);
  padding: .1rem .2rem .5rem;
}
.tpl-tools-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
}
.tpl-tools-grid .tpl-tool { width: 100%; height: 42px; }

/* Active color swatch in left panel */
#tpl-active-color-swatch {
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 2px solid rgba(255,255,255,.25);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: .3rem;
  transition: border-color .12s;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
#tpl-active-color-swatch:hover { border-color: rgba(255,255,255,.55); }

/* ── CENTER: CANVAS AREA ── */
#tpl-canvas-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1a1a2a;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 32px 32px;
  /* DÜZELTME: overflow:hidden zoom yapınca büyüyen tuvali kaydırmayı (pan)
     tamamen engelliyordu — zoom çalışıyordu ama büyüyen kısmı görmenin/
     ulaşmanın hiçbir yolu yoktu. Artık kaydırılabilir. */
  overflow: auto;
  position: relative;
  min-width: 0;
}
#tpl-canvas-wrap {
  position: relative;
  image-rendering: pixelated;
  /* DÜZELTME: flex'in align/justify-center'ı, overflow:auto ile birlikte
     tuval küçükken ortalar ama büyüyünce kaydırmayı engelliyordu
     (taşan kısmın bir tarafına asla ulaşılamıyordu). margin:auto bu
     sorunu olmadan hem ortalamayı hem serbest kaydırmayı sağlıyor. */
  margin: auto;
  flex-shrink: 0;
}
#tpl-checkerboard {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(45deg, #2a2a3a 25%, transparent 25%),
    linear-gradient(-45deg, #2a2a3a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #2a2a3a 75%),
    linear-gradient(-45deg, transparent 75%, #2a2a3a 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
  pointer-events: none;
}
/* The actual drawing canvas inside the editor */
#tpl-draw-canvas {
  /* Tek parmak = çiz; kaydırma/zoom iki parmakla JS'te yönetiliyor */
  touch-action: none;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: crosshair;
  position: relative;
  z-index: 2;
}
#tpl-grid-overlay {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
#tpl-grid-overlay.visible { opacity: 1; }

/* Canvas controls */
#tpl-canvas-controls {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: .4rem;
  background: rgba(10,10,20,.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
  padding: .25rem .6rem;
}
.tpl-zoom-btn {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: none;
  color: rgba(255,255,255,.7); cursor: pointer; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.tpl-zoom-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
#tpl-zoom-label {
  font-size: .65rem; font-family: var(--font-mono,'JetBrains Mono',monospace);
  color: rgba(255,255,255,.6); min-width: 3rem; text-align: center;
}
#tpl-coords-label {
  font-size: .6rem; font-family: var(--font-mono,'JetBrains Mono',monospace);
  color: rgba(255,255,255,.4); min-width: 6rem; text-align: center;
}

/* ── RIGHT PANEL ── */
#tpl-right-panel {
  width: 220px;
  background: #111120;
  border-left: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}

/* Right panel sections */
.tpl-rpanel-section {
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.tpl-rpanel-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: .45rem .65rem .35rem;
  cursor: pointer; user-select: none;
}
.tpl-rpanel-hdr-title {
  font-size: .58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.4);
}
.tpl-rpanel-hdr-arrow {
  font-size: .55rem; color: rgba(255,255,255,.3);
  transition: transform .15s;
}
.tpl-rpanel-hdr-arrow.open { transform: rotate(90deg); }
.tpl-rpanel-body { padding: 0 .65rem .6rem; }

/* Navigation preview */
#tpl-nav-preview-wrap {
  width: 100%; aspect-ratio: 1;
  background: #0a0a14;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,.07);
  margin-top: .35rem;
}
#tpl-nav-canvas {
  width: 100%; height: 100%;
  image-rendering: pixelated;
  display: block;
}
#tpl-nav-viewport {
  position: absolute; border: 1px solid #a78bfa;
  background: rgba(167,139,250,.08);
  pointer-events: none;
}

/* Color palette */
#tpl-palette-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin-top: .4rem;
}
.tpl-psw {
  aspect-ratio: 1;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset;
  transition: transform .1s, border-color .1s;
}
.tpl-psw:hover { transform: scale(1.15); }
.tpl-psw.sel {
  border-color: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset, 0 0 6px rgba(255,255,255,.4);
}

/* Brush preview */
#tpl-brush-preview-wrap {
  margin-top: .4rem;
  display: flex; align-items: center; gap: .6rem;
}
#tpl-brush-preview {
  width: 36px; height: 36px;
  background: #0a0a14; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#tpl-brush-preview-dot {
  border-radius: 2px;
  transition: all .15s;
}
.tpl-brush-info {
  font-size: .65rem; color: rgba(255,255,255,.5);
  font-family: var(--font-mono,'JetBrains Mono',monospace);
  line-height: 1.6;
}

/* Layers */
#tpl-layer-list { margin-top: .35rem; display: flex; flex-direction: column; gap: 3px; }
.tpl-layer-row {
  display: flex; align-items: center; gap: .4rem;
  padding: .35rem .4rem; border-radius: 6px;
  background: rgba(124,58,237,.18); border: 1px solid rgba(124,58,237,.35);
  cursor: pointer;
}
.tpl-layer-thumb {
  width: 24px; height: 24px; border-radius: 4px;
  background: #0a0a14; border: 1px solid rgba(255,255,255,.1);
  image-rendering: pixelated; flex-shrink: 0;
}
.tpl-layer-name {
  font-size: .72rem; font-weight: 600; color: var(--accent2);
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tpl-layer-vis {
  width: 16px; height: 16px; font-size: 16px; color: rgba(255,255,255,.5);
  cursor: pointer; flex-shrink: 0; display: inline-flex;
}

/* Stats section */
#tpl-stats-wrap { margin-top: .35rem; display: flex; flex-direction: column; gap: .3rem; }
.tpl-stat-row {
  display: flex; align-items: center; justify-content: space-between;
}
.tpl-stat-lbl { font-size: .62rem; color: rgba(255,255,255,.4); }
.tpl-stat-val {
  font-size: .65rem; font-weight: 600;
  font-family: var(--font-mono,'JetBrains Mono',monospace);
  color: rgba(255,255,255,.75);
}

/* Scrollable colors section */
#tpl-right-colors-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
#tpl-right-colors-scroll::-webkit-scrollbar { width: 4px; }
#tpl-right-colors-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

/* ── RESULT POPUP (kept from original but restyled) ── */
#tpl-result-popup {
  display: none; position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
}
#tpl-result-popup.show { display: flex; }
#tpl-result-box {
  background: #1a1a2e; border: 1px solid rgba(124,58,237,.4);
  border-radius: 18px; padding: 1.8rem; width: 380px; max-width: 94vw;
  display: flex; flex-direction: column; gap: 1rem;
  box-shadow: 0 24px 64px rgba(0,0,0,.8);
}
#tpl-result-title {
  font-family: var(--font-display,'Space Grotesk',sans-serif);
  font-size: 1.05rem; font-weight: 700;
  background: linear-gradient(135deg,#a78bfa,#e879f9);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
#tpl-result-preview {
  width: 100%; border-radius: 10px; border: 1px solid rgba(255,255,255,.1);
  max-height: 200px; object-fit: contain; background: #0a0a14;
}
.tpl-dl-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(135deg,#7c3aed,#c026d3);
  color: #fff; text-decoration: none; border: none;
  border-radius: 10px; padding: .75rem 1rem;
  font-family: var(--font-display,'Space Grotesk',sans-serif);
  font-size: .88rem; font-weight: 700; cursor: pointer; transition: opacity .15s;
}
.tpl-dl-btn:hover { opacity: .88; }
.tpl-dl-btn.secondary {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.8); font-size: .78rem; padding: .55rem 1rem;
}
#tpl-upload-status {
  font-size: .72rem; font-family: var(--font-mono,'JetBrains Mono',monospace);
  color: rgba(255,255,255,.5); text-align: center; min-height: 1rem;
}
#tpl-upload-status.ok  { color: #00d4a0; }
#tpl-upload-status.err { color: #f04a4a; }

/* ── CANVAS.rclick-erase cursor ── */
#tpl-draw-canvas.rclick-erase { cursor: cell; }

/* ── Mobile ── */
@media (max-width: 600px) {
  #tpl-right-panel { width: 160px; }
  #tpl-left-panel { width: 40px; }
  .tpl-tool { width: 32px; height: 32px; }
  #tpl-options-bar { overflow-x: auto; }
  #tpl-menubar { overflow-x: auto; }
  #tpl-menubar::-webkit-scrollbar { height: 0; }
}
/* Telefon: paneller alta/üste yatay şerit olarak taşınır —
   eskiden sağ panel (palet dahil) tamamen gizleniyordu ve
   telefonda renk seçmek imkânsızdı */
@media (max-width: 480px) {
  #tpl-editor-body { flex-direction: column; }
  #tpl-left-panel {
    width: 100%; height: 46px;
    flex-direction: row; justify-content: flex-start;
    padding: 0 .3rem; gap: .2rem;
    overflow-x: auto; overflow-y: hidden;
    border-right: none; border-bottom: 1px solid rgba(255,255,255,.06);
  }
  #tpl-left-panel::-webkit-scrollbar { height: 0; }
  #tpl-tools-btn { width: 42px; height: 40px; }
  #tpl-canvas-area { min-height: 0; }
  #tpl-right-panel {
    display: flex; width: 100%; height: 172px; flex-shrink: 0;
    border-left: none; border-top: 1px solid rgba(255,255,255,.06);
  }
  #tpl-right-colors-scroll {
    display: flex; flex-direction: row; gap: .5rem;
    overflow-x: auto; overflow-y: hidden; width: 100%;
  }
  .tpl-rpanel-section { min-width: 172px; flex-shrink: 0; }
  /* Dar ekranda önce renkler: navigasyon ve katman bölümleri gizli */
  .tpl-rpanel-section:has(#tpl-section-nav),
  .tpl-rpanel-section:has(#tpl-section-layers) { display: none; }
}

/* ══════════════════════════════════════════════════════════
   GELİŞMİŞ RESİM İÇE AKTARMA DİYALOĞU
══════════════════════════════════════════════════════════ */
#tpl-import-popup {
  display: none; position: fixed; inset: 0; z-index: 3200;
  background: rgba(0,0,0,.78);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: 1rem;
}
#tpl-import-popup.show { display: flex; }
#tpl-import-box {
  background: #16162a; border: 1px solid rgba(124,58,237,.4);
  border-radius: 18px; width: 640px; max-width: 96vw; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.8);
}
.tpl-imp-header {
  display: flex; align-items: center; gap: .5rem;
  padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.07);
  color: #a78bfa; flex-shrink: 0;
}
.tpl-imp-header h3 {
  flex: 1; margin: 0;
  font-family: var(--font-display,'Space Grotesk',sans-serif);
  font-size: 1rem; font-weight: 700; color: #e8eaf8;
}
.tpl-imp-x {
  width: 28px; height: 28px; border: none; background: transparent;
  color: rgba(255,255,255,.5); border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tpl-imp-x:hover { background: rgba(240,74,74,.18); color: #f04a4a; }
.tpl-imp-body {
  display: flex; gap: 1.1rem; padding: 1.1rem 1.2rem; overflow: auto;
}
.tpl-imp-preview-wrap {
  position: relative; flex-shrink: 0;
  width: 260px; height: 260px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  background: #0a0a14;
}
.tpl-imp-checker {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(45deg,#23233a 25%,transparent 25%),
    linear-gradient(-45deg,#23233a 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#23233a 75%),
    linear-gradient(-45deg,transparent 75%,#23233a 75%);
  background-size: 14px 14px;
  background-position: 0 0,0 7px,7px -7px,-7px 0;
}
#tpl-import-preview {
  position: relative; z-index: 1;
  max-width: 100%; max-height: 100%;
  image-rendering: pixelated;
}
.tpl-imp-controls {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: .85rem;
}
.tpl-imp-field { display: flex; flex-direction: column; gap: .4rem; }
.tpl-imp-field > label {
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: rgba(255,255,255,.4);
}
.tpl-imp-seg { display: flex; gap: 4px; }
.tpl-imp-seg button {
  flex: 1; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.6); font-size: .72rem; font-weight: 600;
  cursor: pointer; transition: all .12s;
}
.tpl-imp-seg button:hover { background: rgba(255,255,255,.1); color: #fff; }
.tpl-imp-seg button.active {
  background: rgba(124,58,237,.3); border-color: #7c3aed; color: #fff;
}
.tpl-imp-check {
  display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; color: rgba(255,255,255,.75);
  cursor: pointer; user-select: none;
}
.tpl-imp-check input { width: 15px; height: 15px; accent-color: #a78bfa; cursor: pointer; }
.tpl-imp-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.15); outline: none; cursor: pointer;
}
.tpl-imp-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: #a78bfa; cursor: pointer; border: 2px solid rgba(255,255,255,.25);
}
.tpl-imp-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #a78bfa; cursor: pointer; border: 2px solid rgba(255,255,255,.25);
}
.tpl-imp-info {
  font-size: .68rem; color: rgba(255,255,255,.45);
  font-family: var(--font-mono,'JetBrains Mono',monospace);
  margin-top: auto; padding-top: .2rem;
}
.tpl-imp-footer {
  display: flex; justify-content: flex-end; gap: .6rem;
  padding: .9rem 1.2rem; border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.tpl-imp-btn {
  height: 38px; padding: 0 1.2rem; border-radius: 10px; cursor: pointer;
  font-family: var(--font-display,'Space Grotesk',sans-serif);
  font-size: .82rem; font-weight: 700; border: none;
  transition: opacity .15s, background .12s;
}
.tpl-imp-btn.secondary {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.8);
}
.tpl-imp-btn.secondary:hover { background: rgba(255,255,255,.12); }
.tpl-imp-btn.primary { background: linear-gradient(135deg,#7c3aed,#c026d3); color: #fff; }
.tpl-imp-btn.primary:hover { opacity: .9; }

@media (max-width: 560px) {
  .tpl-imp-body { flex-direction: column; align-items: center; }
  .tpl-imp-preview-wrap { width: 200px; height: 200px; }
}