/* Cover preview */

.cover-preview-wrap { display:none; width:100%; max-width:1080px; margin:0 auto; animation:fadeUp .45s ease both; }
.cover-preview-wrap.on { display:block; }
.cover-preview-stage {
  position:relative;
  width:min(100%, 1040px);
  margin:0 auto;
  padding:22px 24px 18px;
  background:linear-gradient(180deg,#f8f4ee,#ede4d8);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 24px 54px rgba(14,14,15,.10);
}
.cover-preview-guide-view { display:block; }
.cover-preview-guide-view.is-hidden { display:none; }
.cover-preview-canvas {
  position:relative;
  width:min(100%, 94%);
  margin:0 auto;
  aspect-ratio: 12.75 / 9.25;
  min-height:260px;
  overflow:hidden;
  border-radius:6px;
  background:
    linear-gradient(180deg,rgba(31,35,46,.88),rgba(25,28,40,.94)),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:auto,26px 26px,26px 26px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 16px 34px rgba(14,14,15,.12);
}
.cover-preview-art {
  position:absolute;
  inset:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:100% 100%;
  opacity:0;
  transition:opacity .2s ease;
}
.cover-preview-art img {
  display:none;
  width:100%;
  height:100%;
  object-fit:fill;
}
.cover-preview-canvas.has-art .cover-preview-art img { display:block; }
.cover-preview-canvas.has-art .cover-preview-art { opacity:1; }
.cover-preview-gridline {
  position:absolute;
  top:0;
  bottom:0;
  width:0;
  border-left:2px dashed rgba(20,20,20,.82);
  pointer-events:none;
}
.cover-preview-gridline.trim { border-left-color:rgba(20,20,20,.78); }
.cover-preview-gridline.hinge { border-left-color:rgba(186, 120, 38, .88); border-left-style:solid; border-left-width:1px; }
.cover-preview-gridline.spine { border-left-color:rgba(20,20,20,.9); }
.cover-preview-safe {
  position:absolute;
  border:2px dashed rgba(211, 55, 55, .94);
  box-sizing:border-box;
  pointer-events:none;
  background:transparent;
}
.cover-preview-safe.back,
.cover-preview-safe.front,
.cover-preview-safe.recommended { border-color:rgba(211, 55, 55, .94); }
.cover-preview-safe.spine {
  border-color:rgba(20,20,20,.55);
  border-width:1px;
  background:transparent;
}
.cover-preview-safe.trimbox {
  border-color:rgba(20,20,20,.86);
  border-width:2px;
}
.cover-preview-barcode {
  position:absolute;
  box-sizing:border-box;
  border:1px dashed rgba(70,70,70,.85);
  background:
    linear-gradient(180deg,rgba(255,255,255,.95),rgba(246,246,246,.94));
  box-shadow:0 8px 18px rgba(14,14,15,.12);
  pointer-events:none;
}
.cover-preview-barcode::before {
  content:'';
  position:absolute;
  inset:8px 10px 18px 10px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(15,15,15,.94) 0 2px,
      rgba(255,255,255,1) 2px 3px,
      rgba(15,15,15,.92) 3px 5px,
      rgba(255,255,255,1) 5px 7px
    );
  opacity:.92;
}
.cover-preview-barcode::after {
  content:'Barcode zone';
  position:absolute;
  left:50%;
  bottom:6px;
  transform:translateX(-50%);
  font:600 9px/1 'DM Mono',monospace;
  letter-spacing:.06em;
  color:rgba(44,44,44,.78);
  text-transform:uppercase;
  white-space:nowrap;
}
.cover-preview-label { display:none; }
.cover-preview-legend {
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  margin-top:14px;
  width:min(100%, 94%);
  margin-left:auto;
  margin-right:auto;
  color:var(--warm-dark);
  font-size:12px;
}
.cover-preview-legend span { display:inline-flex; align-items:center; gap:8px; }
.cover-preview-legend i {
  display:inline-block;
  width:12px;
  height:12px;
  border:2px solid currentColor;
  border-radius:2px;
}
.cover-preview-legend .trim { color:rgb(28, 28, 28); }
.cover-preview-legend .hinge { color:rgb(186, 120, 38); }
.cover-preview-legend .safe { color:rgb(211, 55, 55); }
.cover-preview-legend .spine { color:rgb(28, 28, 28); }
.cover-preview-legend .barcode { color:rgb(62, 62, 62); }
.cover-preview-legend .barcode i { background:#fff; }
.cover-preview-meta {
  margin-top:12px;
  width:min(100%, 94%);
  margin-left:auto;
  margin-right:auto;
  font:11px/1.5 'DM Mono',monospace;
  color:var(--muted);
}

.cover-preview-actions {
  display:flex;
  justify-content:center;
  margin-top:14px;
}

.cover-print-view { display:none; }
.cover-print-view.on { display:block; }
.cover-print-canvas {
  position:relative;
  width:min(100%, 94%);
  margin:0 auto;
  aspect-ratio: var(--cover-print-ratio, 12.25 / 8.75);
  min-height:260px;
  overflow:hidden;
  border-radius:6px;
  background:#fff;
  box-shadow:
    inset 0 0 0 1px rgba(20,20,20,.08),
    0 16px 34px rgba(14,14,15,.12);
}
.cover-print-canvas img {
  position:absolute;
  display:block;
  width:var(--cover-print-image-width, 100%);
  height:var(--cover-print-image-height, 100%);
  left:var(--cover-print-image-left, 0);
  top:var(--cover-print-image-top, 0);
  max-width:none;
}

.cover-preview-issues {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:8;
}

.cover-preview-issue {
  position:absolute;
  box-sizing:border-box;
  border:2px solid rgba(224, 73, 73, .96);
  background:rgba(224, 73, 73, .12);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;
  min-width:6px;
  min-height:6px;
}

.cover-preview-issue.warning {
  border-color:rgba(214, 155, 42, .96);
  background:rgba(214, 155, 42, .14);
}

.cover-preview-issue.area-barcode {
  border-color:rgba(75, 75, 75, .95);
  background:rgba(255,255,255,.18);
}

.cover-preview-issue-label {
  position:absolute;
  left:50%;
  top:-24px;
  transform:translateX(-50%);
  padding:3px 7px;
  border-radius:999px;
  background:rgba(18,22,29,.92);
  color:#fff;
  font:600 10px/1 'DM Mono',monospace;
  letter-spacing:.02em;
  white-space:nowrap;
  box-shadow:0 6px 12px rgba(0,0,0,.18);
}

.cover-preview-issue.area-barcode .cover-preview-issue-label {
  background:rgba(60,60,60,.92);
}

/* Margin badge */

.mbadge { display:none; position:absolute; top:16px; right:16px; font-size:11px; padding:5px 11px; border-radius:3px; font-weight:500; }

.mbadge.ok     { display:block; background:rgba(58,138,90,.1);  color:var(--success); border:1px solid rgba(58,138,90,.2); }

.mbadge.danger { display:block; background:rgba(212,88,58,.1);  color:var(--danger);  border:1px solid rgba(212,88,58,.2); }

/* Share strip */

.share-strip { display:none; position:absolute; top:16px; left:16px; align-items:center; gap:8px; background:rgba(247,244,239,.96); border:1px solid var(--border); border-radius:4px; padding:6px 12px; font-size:11px; backdrop-filter:blur(4px); }

.share-strip.on { display:flex; }

.share-url { font-family:'DM Mono',monospace; color:var(--muted); font-size:10px; }

.scopy { background:var(--ink); color:var(--paper); border:none; border-radius:2px; font-size:10px; padding:3px 8px; cursor:pointer; font-family:'DM Sans',sans-serif; }

.watermark { position:absolute; bottom:68px; left:50%; transform:translateX(-50%); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:rgba(200,169,110,.35); font-family:'DM Mono',monospace; pointer-events:none; white-space:nowrap; }

@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

.scene { animation:fadeUp .5s ease both; }