/* ================================================================
   PREVIEW - left panel: split container, viewport, meta strip,
             tint name display, action buttons
   Edit this file to change: preview layout, button styles,
   tint name size/color, empty-state hint
   ================================================================ */

/* ── Split container ── */
.split {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* ── Left panel ── */
.left {
  width: 44%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(128,238,192,.1);
}

/* ── Viewport (canvas area) ── */
.viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Checkered pattern shows image transparency clearly */
  background: repeating-conic-gradient(#030c14 0% 25%, #051018 0% 50%) 0 0 / 20px 20px;
}

.viewport.dragover { outline: 2px solid var(--ice); outline-offset: -3px; }

.viewport.dragover::after {
  content: 'Drop image here';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ice);
  background: rgba(0,8,18,.75);
}

/* ── Empty state ── */
.vp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  pointer-events: none;
  user-select: none;
}

.vp-empty-hint {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(128,238,192,.3);
  text-align: center;
  line-height: 1.75;
}

/* ── Preview canvas ── */
#pCanvas {
  max-width: calc(100% - 28px);
  max-height: calc(100% - 28px);
  display: none;
  position: relative;
  z-index: 1;
}

/* ── Meta strip ── */
.meta {
  flex-shrink: 0;
  border-top: 1px dashed var(--bd);
  padding: 16px 22px 18px;
  position: relative;
}

/* Large tint name - the dominant typographic moment in the panel */
.tint-name {
  font-weight: 800;
  font-size: clamp(24px, 5.5vw, 54px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  /* Faint when nothing is selected */
  color: rgba(128,238,192,.1);
  transition: color .2s;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-bottom: 0.15em;
}

.tint-name.active {
  color: var(--ice);
}

/* Category label (Standard Tint / Unique & Seasonal) */
.tint-cat {
  font-size: 11px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(128,238,192,.42);
  margin-top: 6px;
  margin-bottom: 16px;
}

.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Save PNG - filled primary */
.btn-save {
  background: var(--ice);
  border: none;
  border-radius: 4px;
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 8px 20px;
  cursor: pointer;
  transition: background .15s;
}

.btn-save:hover    { background: #C0EEFF; }
.btn-save:disabled { opacity: .18; cursor: default; }

/* Copy - solid outline secondary */
.btn-copy {
  background: transparent;
  border: 1px solid rgba(128,238,192,.2);
  border-radius: 4px;
  color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 8px 20px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.btn-copy:hover    { border-color: rgba(128,238,192,.45); color: var(--ice); background: rgba(128,238,192,.05); }
.btn-copy:disabled { opacity: .18; cursor: default; }

/* "Copied to clipboard" confirmation */
.copied {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ice);
  opacity: 0;
  transition: opacity .25s;
  margin-top: 10px;
}
.show { opacity: 1 !important; }

.storage-note {
  font-size: 11px;
  color: rgba(128,238,192,.3);
  margin-top: 10px;
}