/* Namespace: every class is prefixed with sn- to avoid collisions. */

.sn-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 20, 0.62);
  backdrop-filter: blur(4px);
  z-index: 10500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: sn-fade 0.18s ease;
}
.sn-backdrop[hidden] { display: none; }
/* .sn-modal sets display:flex for the column layout, which overrides
   the browser's default [hidden]{display:none}. Re-assert it explicitly
   so the step-2 modal is truly hidden while step-1 is showing. Without
   this both steps render side-by-side inside the flex backdrop. */
.sn-modal[hidden] { display: none !important; }
@keyframes sn-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sn-modal {
  width: min(1400px, 80vw);
  max-height: min(90vh, 880px);
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  animation: sn-rise 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes sn-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.sn-header {
  padding: 14px 22px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.sn-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.1px;
}
.sn-header .sn-subtitle {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 2px;
}
.sn-close {
  background: rgba(255, 255, 255, 0.18);
  border: none;
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 19px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.sn-close:hover { background: rgba(255, 255, 255, 0.28); }

.sn-body {
  flex: 1;
  overflow: auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  background: #f8f9fb;
}

/* Single-column body — used by the redesigned main step where the
   sidebar (warnings + spacing sliders) has been moved to the warning
   intro step, leaving the entire width for the two large previews. */
.sn-body.sn-body-single {
  grid-template-columns: 1fr;
}

/* ── Step 1: Warning / Intro Modal ───────────────────────────────────────
   Shown when the user first opens Super Nested. They must click Continue
   to advance to the actual packing modal (step 2). All "scary" things
   (scissors warning, slowness, beta, undo) live here. */
.sn-modal.sn-modal-warning {
  width: min(720px, 92vw);
  max-height: min(88vh, 820px);
}
.sn-warning-body {
  flex: 1;
  overflow-y: auto;
  padding: 26px 30px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sn-warning-illustration {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background: #f9fafb;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
}
.sn-warning-illustration img,
.sn-warning-illustration svg {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 300px;
  border-radius: 8px;
}
.sn-warning-headline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 12px;
}
.sn-warning-headline .sn-scissors {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}
.sn-warning-headline h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #7c2d12;
  line-height: 1.3;
}
.sn-warning-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #44403c;
}
.sn-warning-pills {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sn-warning-pill {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 13px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #374151;
}
.sn-warning-pill .sn-pill-icon {
  font-size: 16px;
  line-height: 1.2;
  flex-shrink: 0;
}
.sn-warning-pill strong { color: #111827; }
.sn-warning-pill.sn-pill-beta {
  background: #ecfeff;
  border-color: #67e8f9;
  color: #155e75;
}
.sn-warning-pill.sn-pill-beta strong { color: #0e7490; }
.sn-warning-pill.sn-pill-undo {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}
.sn-warning-pill.sn-pill-undo strong { color: #14532d; }
/* Both footers wrap their action buttons in an inner <div>. Without an
   explicit gap the Cancel and Continue / Apply buttons touch each other.
   10px gap lets them breathe without shifting the overall layout. */
.sn-warning-footer > div:last-child,
.sn-footer > div:last-child {
  display: flex;
  gap: 10px;
}
.sn-warning-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
}
.sn-warning-footer .sn-warning-step {
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
}

/* ── Spacing info badge inside the main step ─────────────────────────────
   We removed the slider controls; this read-only badge shows which
   gap/margin values were used (sourced from the builder's settings). */
.sn-spacing-info {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 12px;
  color: #4b5563;
  width: fit-content;
}
.sn-spacing-info .sn-spacing-key {
  font-weight: 700;
  color: #111827;
}
.sn-spacing-info .sn-spacing-divider {
  width: 1px;
  height: 14px;
  background: #d1d5db;
}

.sn-controls {
  padding: 22px;
  border-right: 1px solid #e5e7eb;
  background: #ffffff;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sn-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sn-group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0;
}
.sn-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: #1f2937;
  transition: all 0.15s;
}
.sn-option:hover { background: #f3f4f6; border-color: #d1d5db; }
.sn-option input[type="checkbox"] { cursor: pointer; margin: 0; }
.sn-option .sn-option-title { font-weight: 600; }
.sn-option .sn-option-hint { font-size: 11px; color: #6b7280; margin-top: 2px; }

.sn-slider-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.sn-slider-row label { font-size: 12px; color: #4b5563; font-weight: 500; }
.sn-slider-row input[type="range"] { width: 100%; }
.sn-slider-row .sn-value {
  font-size: 12px;
  color: #1f2937;
  font-weight: 700;
  min-width: 42px;
  text-align: right;
}

.sn-warning {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  line-height: 1.5;
}
.sn-warning strong { color: #78350f; }

/* Prominent pre-apply warning that replaces the old options panel. */
.sn-big-warning {
  background: linear-gradient(180deg, #fff7ed 0%, #fef3c7 100%);
  border: 1px solid #fbbf24;
  border-radius: 10px;
  padding: 14px 14px 12px;
  color: #78350f;
}
.sn-big-warning-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #7c2d12;
  margin-bottom: 10px;
}
.sn-big-warning-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sn-big-warning-list li {
  font-size: 12px;
  line-height: 1.5;
  color: #78350f;
}
.sn-big-warning-list strong {
  color: #7c2d12;
  font-weight: 700;
  display: block;
  margin-bottom: 1px;
}

.sn-preview-pane {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}
.sn-preview-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  flex: 1;
  min-height: 0;
}
.sn-preview-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.sn-preview-card h4 {
  margin: 0;
  padding: 10px 14px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sn-preview-card h4 .sn-badge {
  font-size: 11px;
  color: #6b7280;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.sn-preview-canvas-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  min-height: 0;
  background:
    linear-gradient(45deg, #f3f4f6 25%, transparent 25%),
    linear-gradient(-45deg, #f3f4f6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f3f4f6 75%),
    linear-gradient(-45deg, transparent 75%, #f3f4f6 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  background-color: #ffffff;
}
.sn-preview-canvas-wrap canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.sn-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sn-stat {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sn-stat-label {
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sn-stat-value {
  font-size: 19px;
  font-weight: 800;
  color: #111827;
  line-height: 1.1;
}
.sn-stat-value.sn-stat-good { color: #059669; }
.sn-stat-value.sn-stat-warn { color: #d97706; }
.sn-stat-delta {
  font-size: 11px;
  color: #6b7280;
  margin-top: 1px;
}

.sn-footer {
  padding: 14px 22px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.sn-footer-note {
  font-size: 12px;
  color: #6b7280;
}
.sn-btn {
  padding: 11px 20px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sn-btn-cancel {
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #374151;
}
.sn-btn-cancel:hover { background: #f9fafb; }
.sn-btn-apply {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  min-width: 190px;
  justify-content: center;
}
.sn-btn-apply:hover { filter: brightness(1.05); }
.sn-btn-apply:disabled {
  opacity: 0.55;
  cursor: wait;
}

.sn-btn-compute {
  background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
  color: #ffffff;
  min-width: 190px;
  justify-content: center;
  margin-right: 8px;
}
.sn-btn-compute:hover { filter: brightness(1.05); }

/* Pre-compute placeholder shown in the preview pane. */
.sn-preview-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 30px;
  background: #ffffff;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  text-align: center;
  min-height: 280px;
}
.sn-preview-placeholder[hidden] { display: none; }
.sn-placeholder-icon {
  font-size: 42px;
  opacity: 0.7;
}
.sn-placeholder-title {
  font-size: 16px;
  font-weight: 700;
  color: #374151;
}
.sn-placeholder-hint {
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
  max-width: 440px;
}
.sn-placeholder-hint strong { color: #1f2937; }

/* CORS / rectangular-fallback banner inside the preview pane. */
.sn-cors-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 8px;
  color: #78350f;
  font-size: 12px;
  line-height: 1.5;
}
.sn-cors-warning[hidden] { display: none; }
.sn-cors-icon { flex-shrink: 0; font-size: 16px; line-height: 1.2; }
.sn-cors-text strong { color: #7c2d12; }

.sn-busy {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: #374151;
  z-index: 2;
}
.sn-busy[hidden] { display: none; }
.sn-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #e5e7eb;
  border-top-color: #764ba2;
  border-radius: 50%;
  animation: sn-spin 0.7s linear infinite;
}
@keyframes sn-spin {
  to { transform: rotate(360deg); }
}

.sn-launch-btn {
  /* Styled to match existing floating buttons but distinct colour. */
  background: linear-gradient(135deg, #f97316 0%, #ec4899 100%) !important;
  color: #ffffff !important;
  border: none !important;
}
.sn-launch-btn:hover { filter: brightness(1.05); }

/* Toast for post-apply feedback. */
.sn-toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: #111827;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  z-index: 10600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  animation: sn-toast-in 0.2s ease;
}
@keyframes sn-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ─── UI v2 overrides (CONFIG.superNestedUiV2Enabled) ───────────────────────
   Activated when the backdrop element gets the sn-uiv2 class. All v2
   selectors are scoped under .sn-uiv2 so they have higher specificity
   than the legacy rules above and never match when the flag is off.
   Pure cosmetics — no functional changes. */

/* Step 1: unify the three warning cards (scissors / undo / beta) into
   one neutral palette so they read as a single information block
   instead of three competing alerts. Icons all sized identically.
   Headline and pills now share padding, font-size and font-weight. */
.sn-uiv2 .sn-warning-headline {
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  padding: 12px 14px;
  gap: 10px;
  align-items: center;
}
.sn-uiv2 .sn-warning-headline .sn-scissors {
  font-size: 18px;
}
.sn-uiv2 .sn-warning-headline h3 {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.45;
}
.sn-uiv2 .sn-warning-pill,
.sn-uiv2 .sn-warning-pill.sn-pill-undo,
.sn-uiv2 .sn-warning-pill.sn-pill-beta {
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  color: #1f2937;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
}
.sn-uiv2 .sn-warning-pill .sn-pill-icon {
  font-size: 18px;
}
.sn-uiv2 .sn-warning-pill strong,
.sn-uiv2 .sn-warning-pill.sn-pill-undo strong,
.sn-uiv2 .sn-warning-pill.sn-pill-beta strong {
  color: #111827;
  font-weight: 700;
}

/* Step 2: portrait aspect ratio for the main preview modal. Gang
   sheets are inherently tall (e.g. 22 in × 130 in, ~1:5.9 ratio).
   Making the modal itself portrait and compacting every non-preview
   element maximizes the preview canvas area so the previews feel
   large and readable, instead of tiny silhouettes adrift in a wide
   checker-board. */
.sn-uiv2 .sn-modal.sn-modal-main {
  width: min(960px, calc(100vw - 32px));
  height: min(92vh, 860px);
  max-height: min(92vh, 860px);
}

/* Compact everything around the previews so the preview area itself
   claims most of the vertical space. Header, stats, gap/margin pill,
   preview card header and footer are all trimmed. The Cancel / Apply
   footer keeps enough vertical padding so the previews never touch
   the buttons. */
.sn-uiv2 .sn-modal-main .sn-header {
  padding: 10px 16px;
}
.sn-uiv2 .sn-modal-main .sn-header h2 {
  font-size: 15px;
}
.sn-uiv2 .sn-modal-main .sn-header .sn-subtitle {
  display: none;
}
.sn-uiv2 .sn-preview-pane {
  padding: 14px 16px;
  gap: 10px;
}
.sn-uiv2 .sn-stats {
  gap: 6px;
}
.sn-uiv2 .sn-stat {
  padding: 7px 8px;
}
.sn-uiv2 .sn-stat-label {
  font-size: 9px;
}
.sn-uiv2 .sn-stat-value {
  font-size: 15px;
}
.sn-uiv2 .sn-stat-delta {
  font-size: 10px;
}
.sn-uiv2 .sn-preview-card h4 {
  padding: 7px 10px;
  font-size: 10px;
}
.sn-uiv2 .sn-preview-card h4 .sn-badge {
  font-size: 10px;
}
.sn-uiv2 .sn-modal-main .sn-footer {
  padding: 12px 16px;
  flex-wrap: wrap;
  align-items: center;
}
.sn-uiv2 .sn-modal-main .sn-footer > div:last-child {
  margin-left: auto;
  flex-shrink: 0;
}
.sn-uiv2 .sn-modal-main .sn-footer-note {
  max-width: 300px;
  line-height: 1.25;
}
.sn-uiv2 .sn-modal-main .sn-btn {
  white-space: nowrap;
}
.sn-uiv2 .sn-modal-main .sn-btn-apply {
  min-width: 180px;
}
/* Flatten the preview background: the checker pattern made the
   unused margin around each preview (caused by the sheet's extreme
   aspect ratio not matching the column) visually loud. A flat
   light-grey background lets the preview stand out as the focus. */
.sn-uiv2 .sn-preview-canvas-wrap {
  background-image: none;
  background-color: #f1f3f5;
  padding: 10px;
  overflow: auto;
  align-items: flex-start;
}

/* ─── Step 1 (Caution) — gpro redesign ─────────────────────────────
   Full visual redesign of the Step 1 modal based on a Claude-Design
   handoff (gpro/project/Caution Modal.html). The legacy header /
   illustration / 3-card layout is replaced by:
     * Purple radial-gradient header with a 36px warning glyph,
       the title "Un-nest layout", a glassmorphism Beta pill, and
       a circular close button.
     * A "Preview · Before & After" section with a checkerboard
       canvas split in two: a tidy 3×2 grid on the left, a chaotic
       overlapping grid on the right, an "Un-nest" arrow pill in
       the middle, BEFORE/AFTER labels, a "Super Nested" badge and
       an orange CROP corner-tag.
     * An amber warning card with a floating "Caution" pill anchored
       to its top-left, a 56px scissors icon, headline and subline.
     * A footer with a 2-pip step indicator, a Reversible · ⌘Z hint,
       and Cancel / Continue buttons.
   All rules are scoped under .sn-uiv2.sn-uiv2-caution so they only
   apply when the v2 flag is on. The legacy DOM (illustration PNG,
   sn-warning-headline, sn-warning-pills) is replaced by the JS at
   open time — see ensureModal(). */
.sn-uiv2.sn-uiv2-caution .sn-modal-warning {
  width: min(720px, 92vw);
  max-height: min(92vh, 880px);
  border-radius: 22px;
  border: 1px solid rgba(124, 92, 255, 0.12);
  box-shadow: 0 30px 80px -20px rgba(45, 27, 107, 0.35),
              0 12px 30px -10px rgba(45, 27, 107, 0.2);
  overflow: hidden;
}

/* Header — purple radial gradient with subtle highlight blobs. */
.sn-uiv2.sn-uiv2-caution .sn-modal-warning .sn-header {
  position: relative;
  padding: 20px 24px;
  color: #ffffff;
  background: radial-gradient(120% 200% at 0% 0%, #8e6bff 0%, #6b4aef 55%, #5a3bd6 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  border-radius: 0;
  border-bottom: none;
}
.sn-uiv2.sn-uiv2-caution .sn-modal-warning .sn-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(400px 120px at 80% 0%, rgba(255,255,255,0.18), transparent 70%),
    radial-gradient(300px 80px at 0% 100%, rgba(255,255,255,0.12), transparent 70%);
  pointer-events: none;
}
.snr-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.snr-tri-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  display: grid;
  place-items: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  flex-shrink: 0;
}
.snr-title-stack { display: flex; flex-direction: column; }
.sn-uiv2.sn-uiv2-caution .sn-modal-warning .sn-header h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
}
.snr-beta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.snr-beta-pill .snr-ldot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffe27a;
  box-shadow: 0 0 0 3px rgba(255, 226, 122, 0.25);
  animation: snrPulse 1.6s ease-in-out infinite;
}
@keyframes snrPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 226, 122, 0.25); }
  50%      { box-shadow: 0 0 0 5px rgba(255, 226, 122, 0.08); }
}
.sn-uiv2.sn-uiv2-caution .sn-modal-warning .sn-header .sn-subtitle {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  margin-top: 4px;
  opacity: 0.85;
  color: rgba(255,255,255,0.95);
  text-transform: none;
  letter-spacing: 0;
}
.sn-uiv2.sn-uiv2-caution .sn-modal-warning .sn-close {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.16);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.sn-uiv2.sn-uiv2-caution .sn-modal-warning .sn-close:hover {
  background: rgba(255,255,255,0.28);
}
.sn-uiv2.sn-uiv2-caution .sn-modal-warning .sn-close:active {
  transform: scale(0.95);
}

/* Body */
.sn-uiv2.sn-uiv2-caution .sn-warning-body {
  padding: 22px 24px 8px;
  display: block;
  gap: 0;
}

/* Preview section */
.snr-preview-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a839f;
  margin-bottom: 10px;
}
.snr-preview-label .snr-pdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7c5cff;
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.18);
  flex-shrink: 0;
}
.snr-preview {
  position: relative;
  border-radius: 14px;
  background: linear-gradient(180deg, #faf8ff 0%, #f3eeff 100%);
  border: 1px solid #e3dfee;
  padding: 18px;
  overflow: hidden;
}
.snr-illustration {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
  border-radius: 12px;
}
.snr-canvas {
  position: relative;
  border-radius: 12px;
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #eeeaf7 25%, transparent 25%),
    linear-gradient(-45deg, #eeeaf7 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eeeaf7 75%),
    linear-gradient(-45deg, transparent 75%, #eeeaf7 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  border: 1px solid #ece6f7;
  aspect-ratio: 16 / 7;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.snr-canvas::after {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #2a2440, #0e0a1c);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.snr-pane {
  position: relative;
  padding: 14px;
}
.snr-pane.snr-right { padding-left: 18px; }
.snr-grid-before {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 8px;
}
.snr-grid-before .snr-tile {
  background: #ffffff;
  border: 1.5px solid #e3dcf3;
  border-radius: 8px;
  display: grid;
  place-items: center;
  padding: 4px;
  position: relative;
}
.snr-grid-after {
  width: 100%;
  height: 100%;
  position: relative;
}
.snr-grid-after .snr-tile {
  position: absolute;
  background: #ffffff;
  border: 1.5px solid #e3dcf3;
  border-radius: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.snr-tile .snr-sticker {
  width: 78%;
  height: 78%;
  display: block;
  color: #5a3bd6;
}
.snr-corner-tag {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: #ff8a3d;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.snr-compare-label {
  position: absolute;
  top: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(15, 11, 31, 0.78);
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 6px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 2;
}
.snr-compare-label.snr-before { left: 18px; }
.snr-compare-label.snr-after {
  left: 50%;
  transform: translateX(calc(-50% + 60px));
  background: rgba(124, 92, 255, 0.9);
}
.snr-arrow-pill {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border: 1px solid #e3dfee;
  box-shadow: 0 6px 16px rgba(45, 27, 107, 0.15);
  color: #5a3bd6;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.snr-badge-tag {
  position: absolute;
  background: #6b4aef;
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 5px;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px rgba(124,92,255,0.35);
  right: 6%;
  bottom: 8%;
  text-transform: none;
}

/* Warning hero card */
.snr-warning {
  margin-top: 20px;
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  background:
    radial-gradient(600px 200px at 0% 0%, #fff1d2 0%, transparent 70%),
    linear-gradient(180deg, #fff6e3 0%, #ffeec8 100%);
  border: 1px solid #ffd98a;
  border-radius: 14px;
  color: #6e3500;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}
.snr-warning .snr-w-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #ffd98a;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #b15a00;
  box-shadow: 0 6px 16px -6px rgba(177, 90, 0, 0.35);
}
.snr-warning .snr-w-text { line-height: 1.3; }
.snr-warning .snr-w-text h4 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #7a3d00;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.snr-warning .snr-w-sub {
  margin: 6px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  color: #8b4a05;
  opacity: 0.85;
}
.snr-caution-tag {
  position: absolute;
  top: -10px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #b15a00;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  box-shadow: 0 4px 10px -2px rgba(177, 90, 0, 0.45);
  border: 1.5px solid #ffffff;
  z-index: 2;
}

/* Footer */
.sn-uiv2.sn-uiv2-caution .sn-warning-footer {
  margin-top: 18px;
  padding: 16px 24px 20px;
  border-top: 1px solid #f1eef8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
}
.snr-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #635c7a;
  font-size: 12.5px;
}
.snr-steps { display: inline-flex; gap: 5px; }
.snr-pip {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: #e3dfee;
}
.snr-pip.snr-active {
  background: linear-gradient(90deg, #7c5cff, #5a3bd6);
}
.snr-progress strong { color: #0f0b1f; font-weight: 600; }
.snr-divider {
  width: 1px;
  height: 14px;
  background: #e3dfee;
  margin: 0 4px;
}
.snr-reversible {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #635c7a;
  font-size: 12px;
  font-weight: 500;
}
.snr-reversible svg { color: #6b4aef; }
.snr-kbd {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: #2c2740;
  background: #ffffff;
  border: 1px solid #e3dfee;
  border-bottom-width: 2px;
  padding: 1px 5px;
  border-radius: 4px;
  margin: 0 1px;
}

/* Buttons (overrides on top of legacy .sn-btn) */
.sn-uiv2.sn-uiv2-caution .sn-warning-footer .sn-btn {
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 10px;
  letter-spacing: -0.005em;
}
.sn-uiv2.sn-uiv2-caution .sn-warning-footer .sn-btn-cancel {
  background: #ffffff;
  color: #2c2740;
  border: 1px solid #e3dfee;
}
.sn-uiv2.sn-uiv2-caution .sn-warning-footer .sn-btn-cancel:hover {
  border-color: #c9c1e0;
  background: #faf8ff;
}
.sn-uiv2.sn-uiv2-caution .sn-warning-footer .sn-btn-apply {
  color: #ffffff;
  background: linear-gradient(180deg, #7c5cff 0%, #6b4aef 100%);
  box-shadow: 0 8px 18px -6px rgba(107, 74, 239, 0.55),
              inset 0 1px 0 rgba(255,255,255,0.25);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.12s ease;
}
.sn-uiv2.sn-uiv2-caution .sn-warning-footer .sn-btn-apply:hover {
  transform: translateY(-1px);
}