/* === UNIFIED BUTTON SYSTEM === */
/* Native form controls don't inherit the page font by default, so without this
   reset <button>/<input>/<select>/<textarea> fall back to the UA font (Arial)
   instead of Geist - leaving many buttons visibly on the wrong typeface. */
button,
input,
select,
textarea {
  font-family: inherit;
}

.btn {
  padding: 0.625rem 1.125rem;
  font-size: var(--text-base); 
  line-height: 1.25rem;
  height: 38px;
  border-radius: var(--radius-sm); 
  border: none; 
  cursor: pointer; 
  font-weight: var(--weight-semibold); 
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:hover:not(:disabled) { 
  transform: translateY(-1px); 
  box-shadow: var(--shadow-md);
}
.btn:active:not(:disabled) { 
  transform: translateY(0); 
  box-shadow: var(--shadow-sm);
}
.btn-icon {
  width: 38px;
  padding: 0.5rem;
  gap: 0;
  align-items: center;
  justify-content: center;
}
.btn-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Primary - Bold action (full saturation) */
.btn-primary { 
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); 
  color: white;
  box-shadow: 0 1px 2px rgba(99, 102, 241, 0.08), 0 3px 8px rgba(99, 102, 241, 0.12), 0 0 0 1px rgba(99, 102, 241, 0.06);
}
.btn-primary:hover:not(:disabled) {
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.18), 0 4px 12px rgba(99, 102, 241, 0.15), 0 0 0 2px rgba(99, 102, 241, 0.12);
}

/* "New Image" primary CTA - Geist renders a touch lighter/smaller than the old
   Inter, so nudge the SIZE up for presence in the editor header, but keep the
   standard semibold button weight so it doesn't read heavier than its neighbours. */
#new-image-btn {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

/* Primary Muted - For snippet card Download buttons only (opacity-based) */
.btn-primary-muted {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); 
  color: white;
  opacity: 0.75;
  box-shadow: 0 1px 2px rgba(99, 102, 241, 0.08), 0 3px 8px rgba(99, 102, 241, 0.12), 0 0 0 1px rgba(99, 102, 241, 0.06);
  border: none;
}
.btn-primary-muted:hover:not(:disabled) {
  opacity: 1;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.18), 0 4px 12px rgba(99, 102, 241, 0.15), 0 0 0 2px rgba(99, 102, 241, 0.12);
  transform: translateY(-1px);
}
.btn-primary-muted:active:not(:disabled) {
  opacity: 0.75;
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(99, 102, 241, 0.08), 0 3px 8px rgba(99, 102, 241, 0.12);
}

/* Secondary - Outline style */
.btn-blue { 
  background: var(--bg-elevated);
  color: var(--primary);
  border: 1.5px solid rgba(99, 102, 241, 0.3);
  box-shadow: var(--shadow-sm);
}
.btn-blue:hover:not(:disabled) {
  background: var(--primary-subtle);
  border-color: var(--primary);
}

/* Tertiary - Subtle */
.btn-light-blue { 
  background: var(--primary-subtle);
  color: var(--primary-dark); 
  border: 1px solid rgba(99, 102, 241, 0.15);
  box-shadow: none;
}
.btn-light-blue:hover:not(:disabled) { 
  background: rgba(99, 102, 241, 0.12); 
  border-color: rgba(99, 102, 241, 0.25);
}

/* Success */
.btn-green {
  background: linear-gradient(135deg, var(--success-mid) 0%, var(--success-mid-dark) 100%);
  color: white;
  font-weight: var(--weight-bold);
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.12), 0 6px 16px rgba(16, 185, 129, 0.15);
}
.btn-green:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25), 0 8px 24px rgba(16, 185, 129, 0.18);
}

/* Warning */
.btn-amber { 
  background: linear-gradient(135deg, var(--warning-icon) 0%, var(--warning-icon) 100%); 
  color: white;
  box-shadow: 0 1px 3px rgba(251, 191, 36, 0.12), 0 6px 16px rgba(251, 191, 36, 0.15);
}
.btn-amber:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.25), 0 8px 24px rgba(251, 191, 36, 0.18);
}

/* Danger - Bold action (solid fill, mirrors .btn-primary) */
.btn-red {
  background: linear-gradient(135deg, var(--danger-dark) 0%, var(--danger-text) 100%);
  color: white;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.12), 0 6px 16px rgba(239, 68, 68, 0.15);
}
.btn-red:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25), 0 8px 24px rgba(239, 68, 68, 0.18);
}

/* Danger Outline - Ghost button for card actions (softened) */
.btn-red-outline { 
  background: transparent;
  color: var(--danger-dark); 
  border: 1px solid var(--danger-border);
  box-shadow: none;
  opacity: 0.85;
  padding: 0.375rem 0.75rem;
}
.btn-red-outline:hover:not(:disabled) {
  background: var(--danger-subtle);
  border-color: var(--danger-border);
  color: var(--danger-text);
  opacity: 1;
}

/* Ghost - Minimal */
.btn-gray { 
  background: var(--bg-secondary);
  color: var(--text-secondary); 
  border: var(--border-subtle);
  box-shadow: none;
}
.btn-gray:hover:not(:disabled) { 
  background: var(--bg-tertiary);
  border-color: rgba(15, 23, 42, 0.1);
}

.btn-white { 
  background: var(--bg-elevated); 
  color: var(--text-secondary); 
  border: var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
.btn-white:hover:not(:disabled) { 
  background: var(--bg-secondary);
  box-shadow: var(--shadow-md);
}

.btn-sm svg {
  transition: transform 0.2s ease;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-strong);
  transition: 0.3s;
  border-radius: 24px;
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--bg-elevated);
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider {
  background-color: var(--primary);
}
.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}
.toggle-switch input:focus + .toggle-slider {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.btn-sm {
  padding: 0.375rem 0.875rem;
  /* --text-base (14px) not --text-sm: Geist reads smaller than the old Inter,
     so small secondary buttons need a step up to stay legible. */
  font-size: var(--text-base);
  height: 32px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.btn-ghost:hover {
  background: var(--bg-secondary);
  color: var(--primary);
}

.btn-white-clean {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  padding: 0 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.btn-white-clean svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.btn-white-clean:hover {
  background: var(--bg-secondary);
  border-color: var(--border-strong);
}

.section-title {
  font-size: var(--text-xl); 
  font-weight: var(--weight-bold); 
  color: var(--text-primary); 
  letter-spacing: -0.02em;
}
.text-sm { font-size: var(--text-base); color: var(--text-secondary); }
.text-xs { font-size: var(--text-xs); }
.text-gray-500 { color: var(--text-secondary); }
.text-gray-400 { color: var(--text-tertiary); }
.canvas-container { 
  border: var(--border-subtle); 
  border-radius: var(--radius-md); 
  overflow: visible; 
  background: var(--surface-canvas); /* soft off-white, not harsh pure white */
  cursor: default; 
  transition: opacity 0.2s; 
  display: flex; 
  justify-content: center; 
  align-items: center;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  width: 100%;
  min-height: 420px;
}
#canvas-wrapper { 
  flex: 1 0 auto; 
  width: 100% !important; 
  min-height: 420px; 
  height: auto;
  margin: 0 0 1.5rem;
  display: flex; 
  justify-content: center; 
  align-items: center;
}
.canvas-viewport {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
  user-select: none;
}
.canvas-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.overlay-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.guide-layer { 
  pointer-events: auto; 
  z-index: 2;
  cursor: crosshair;
}
.guide-layer.interactive { pointer-events: auto; }
.guide-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px dashed transparent;
  pointer-events: none;
}
.guide-line.snap-line {
  border-top-color: var(--snap-line);
  opacity: 0.7;
}
.guide-line.detected-line {
  border-top: 3px dashed var(--success);
  cursor: pointer;
  pointer-events: auto;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.02));
}
.guide-label {
  position: absolute;
  left: 12px;
  top: -14px;
  background: var(--success-darker);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}
.guide-instructions {
  position: absolute;
  top: 12px;
  left: 16px;
  background: rgba(16, 185, 129, 0.12);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}
.vertical-split-preview-container {
  position: absolute;
  pointer-events: none;
  z-index: 10;
}
.vertical-split-preview {
  position: absolute;
  width: 2px;
  pointer-events: none;
}
.vertical-split-preview-existing {
  background: rgba(99, 102, 241, 0.9);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.5), 0 0 12px rgba(99, 102, 241, 0.35);
}
.vertical-split-preview-new {
  background: rgba(99, 102, 241, 0.35);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2);
}
.footer-overlay {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.55);
  border-top: 2px dashed var(--chrome-selection);
  color: var(--bg-secondary);
  display: flex;
  align-items: flex-start;
  padding: 10px 16px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
  pointer-events: none;
}
.footer-overlay .footer-label {
  background: var(--primary-dark);
  padding: 6px 10px;
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-sm);
}
.snippet-layer { 
  pointer-events: auto; 
  z-index: 3;
  cursor: crosshair;
}
.snippet-box { 
  position: absolute; 
  border: 2px solid var(--chrome-selection); 
  background: transparent; 
  border-radius: var(--radius-md); 
  box-shadow: 0 8px 20px var(--chrome-selection-shadow); 
  pointer-events: auto;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease, opacity 0.3s ease;
  will-change: top, height;
}
.snippet-box.excluded {
  border-color: var(--text-tertiary);
  background: rgba(15, 23, 42, 0.5);
  opacity: 0.4;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
  pointer-events: auto;
}
/* Number + Split control share one anchor per row: the number is the resting
   state and morphs into the pill on hover, so the two never sit side by side.
   Hidden on non-host columns of a split group. */
.snippet-overlay-bar {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  line-height: 1;
  /* Partially track zoom (var set per-render in canvas.js); anchored at the slice's
     top-left corner so the number + pill grow/shrink in place. Defaults to 1. */
  transform: scale(var(--overlay-scale, 1));
  transform-origin: top left;
}
.snippet-box.overlay-hidden .snippet-overlay-bar { display: none; }
/* Resting state: just the brand-colored number. Fades out as the pill takes its place. */
.snippet-label {
  display: inline-block;
  background: transparent;
  color: var(--primary);
  padding: 0;
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: 1;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.snippet-box.excluded .snippet-label { opacity: 0.6; }
.snippet-box.group-hovered:not(.excluded) .snippet-label { opacity: 0; }
/* Hover state: the number morphs into this solid brand-purple pill (white text + icon)
   with a soft glow so it stands out on any email; anchored to the same top-left point.
   It pops in (rises + scales up with a slight overshoot) so the change is unmistakable. */
.snippet-split-btn {
  position: absolute;
  top: 50%;
  left: -8px;
  transform: translateY(calc(-50% + 6px)) scale(0.8);
  transform-origin: 8px center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: var(--primary);
  border: none;
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-primary-glow);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease, transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease;
}
.snippet-split-btn svg { display: none; width: 16px; height: 16px; }
/* Once split (2+ columns), the icon appears. Symmetric 12px padding gives the icon
   real breathing room on the left while keeping the comfortable right spacing; the
   extra negative offset keeps the square lined up with the resting number. */
.snippet-split-btn.is-split { left: -12px; transform-origin: 12px center; padding: 8px 12px; }
.snippet-split-btn.is-split svg { display: block; }
.snippet-split-btn:hover { background: var(--primary-dark); }
.snippet-box.group-hovered .snippet-split-btn,
.snippet-split-btn:focus-visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
}
@media (hover: none) {
  .snippet-label { opacity: 0; }
  .snippet-split-btn { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; }
}
.snippet-box.excluded .snippet-split-btn { display: none; }
.resize-handle {
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}
.resize-handle::before {
  content: '';
  width: 36px;
  height: 4px;
  background: var(--bg-elevated);
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
  opacity: 0.9;
}
.resize-handle.handle-top { top: -10px; }
.resize-handle.handle-bottom { bottom: -10px; }
.footer-handle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.footer-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--primary);
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.footer-handle-layer:has(.footer-handle.snapped) .footer-line {
  opacity: 0.9;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.18);
}

.footer-handle {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--surface-white);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.07em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.28);
  cursor: ns-resize;
  pointer-events: auto;
  user-select: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.footer-handle-label {
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
}

.footer-handle:hover {
  box-shadow: 0 3px 14px rgba(99, 102, 241, 0.34);
  border-color: rgba(255, 255, 255, 0.35);
}

.footer-handle.snapped {
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.38), 0 0 0 3px rgba(99, 102, 241, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
}
.snippet-list { margin-top: 14px; max-height: 600px; overflow-y: auto; }
.snippet-card { 
  border: 1px solid rgba(15, 23, 42, 0.08); 
  border-radius: var(--radius-lg); 
  padding: 10px 20px; 
  transition: all 0.16s cubic-bezier(0.4, 0, 0.2, 1); 
  margin-bottom: 10px;
  background: var(--bg-elevated);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
}
.snippet-card:hover { 
  border-color: rgba(99, 102, 241, 0.25);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.06);
}
.snippet-card.snippet-card-active {
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.08);
  background: var(--primary-subtle);
}
.snippet-card.excluded {
  background: var(--bg-secondary);
  border-color: var(--border);
  opacity: 0.6;
}
.snippet-card.excluded .snippet-title {
  color: var(--text-tertiary);
}
.snippet-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
/* Title + size pill sit together on the left (no space-between gap); actions stay on the right. */
.snippet-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.snippet-title {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  font-size: var(--text-md);
  letter-spacing: -0.01em;
}
.snippet-subtitle { display: none; }
.snippet-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.snippet-actions > button {
  width: 0;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
  border-width: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.snippet-card:hover .snippet-actions > button,
.snippet-card .snippet-actions > button:focus-visible,
.snippet-card .snippet-actions > button.excluded {
  width: 32px;
  min-width: 32px;
  overflow: visible;
  opacity: 1;
  margin-left: 8px;
  padding: 0;
  border-width: 1px;
  pointer-events: auto;
}
.snippet-size-pill {
  white-space: nowrap;
  opacity: 1;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.06);
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  min-width: 68px;
  text-align: center;
}
.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--danger-text);
  padding: 0;
}
.icon-btn:hover {
  background: var(--danger-subtle);
  border-color: var(--danger-border);
  color: var(--danger-text);
  transform: translateY(-1px);
}
.icon-btn-primary {
  background: var(--primary-subtle);
  color: var(--primary);
  border: 1px solid rgba(99, 102, 241, 0.3);
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.1);
}
.icon-btn-primary:hover {
  background: var(--primary-subtle);
  color: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(99, 102, 241, 0.2);
}
.icon-btn-destructive {
  color: var(--danger-text);
}
.icon-btn-destructive:hover {
  background: var(--danger-subtle);
  border-color: var(--danger-border);
  color: var(--danger-text);
}
.icon-btn.toggle-exclude {
  color: var(--text-secondary);
}
.icon-btn.toggle-exclude:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.icon-btn.toggle-exclude.excluded {
  color: var(--danger);
  background: var(--danger-subtle);
  border-color: var(--danger-subtle);
}
.icon-btn.toggle-exclude.excluded:hover {
  background: var(--danger-subtle);
  border-color: var(--danger-border);
  color: var(--danger-dark);
}
/* Underline tabs (landing workspace + editor Snippets/Alt Text) */
.underline-tabs {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0;
}

.underline-tabs__indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
  transition: left 0.28s cubic-bezier(0.22, 1, 0.36, 1), width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}

.underline-tabs .tab-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 12px;
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: 1.25;
  letter-spacing: -0.01em;
  border: none;
  border-radius: 0;
  cursor: pointer;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-tertiary);
  transition: color 0.2s ease;
  white-space: nowrap;
}

.underline-tabs .tab-btn:hover:not(.active) {
  color: var(--text-secondary);
}

.underline-tabs .tab-btn.active {
  color: var(--text-primary);
}

/* Editor: segmented pill - sliding chip matches the capsule (not an underline) */
.segment-tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 2px;
  margin: 0;
  padding: 3px;
  background: rgba(99, 102, 241, 0.022);
  border: none;
  border-radius: var(--radius-pill);
}

.segment-tabs__indicator {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 0;
  height: calc(100% - 6px);
  border-radius: var(--radius-pill);
  background: var(--surface-white);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: left 0.28s cubic-bezier(0.22, 1, 0.36, 1), width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}

.editor-panel-tabs .tab-btn {
  position: relative;
  z-index: 1;
  padding: 6px 16px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-tertiary);
  transition: color 0.2s ease;
  white-space: nowrap;
}

.editor-panel-tabs .tab-btn:hover:not(.active) {
  color: var(--text-secondary);
}

.editor-panel-tabs .tab-btn.active {
  color: var(--text-primary);
}

.tab-btn { border: none; }
.tab-btn.active { color: var(--text-primary); }
.tab-btn:not(.active) { color: var(--text-secondary); }
.snippet-download-btn {
  width: 100%;
  height: 40px;
  margin-top: 4px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  color: var(--text-primary);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}
.snippet-download-btn:hover {
  border-color: rgba(99, 102, 241, 0.45);
  color: var(--primary);
  box-shadow: 0 8px 18px rgba(99, 102, 241, 0.12);
  transform: translateY(-1px);
}
.group-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.group-actions > button {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.snippet-card:hover .group-actions > button,
.snippet-card .group-actions > button:focus-visible,
.snippet-card .group-actions > button.excluded {
  opacity: 1;
}
.group-chip {
  background: var(--primary-subtle);
  color: var(--primary);
  border: 1px solid rgba(99, 102, 241, 0.3);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}
.child-stack {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.snippet-child-card {
  background: var(--bg-elevated);
}
.info-box { 
  background: var(--primary-subtle);
  border-radius: var(--radius-md); 
  padding: var(--spacing-lg);
  border: none;
  border-left: 3px solid var(--primary);
  box-shadow: var(--shadow-sm);
}
.info-button { 
  background: transparent; 
  border: none; 
  width: 24px; 
  height: 24px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
  color: var(--text-tertiary); 
  transition: all 0.2s; 
  padding: 0; 
}
.info-button:hover { color: var(--primary); transform: scale(1.1); }
.info-button-small { 
  background: transparent; 
  border: none; 
  width: 18px; 
  height: 18px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
  transition: all 0.2s; 
  padding: 0; 
}
.info-button { color: var(--primary); }
.info-button:hover { color: var(--primary-dark); transform: scale(1.15); }
.info-popup { 
  position: absolute; 
  left: 0; 
  top: 100%; 
  margin-top: var(--spacing-xs); 
  background: var(--primary-subtle);
  border: 1px solid rgba(99, 102, 241, 0.12);
  border-radius: var(--radius-md); 
  padding: var(--spacing-md); 
  box-shadow: var(--shadow-secondary); 
  z-index: 100; 
  min-width: 280px; 
  max-width: 320px; 
  animation: popupSlide 0.2s ease-out; 
}
@keyframes popupSlide { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.info-panel { 
  background: var(--primary-subtle);
  border-radius: var(--radius-md); 
  padding: var(--spacing-lg); 
  margin-bottom: var(--spacing-lg); 
  animation: slideDown 0.3s ease-out;
  border: none;
  border-left: 3px solid var(--primary);
  box-shadow: var(--shadow-sm);
}
@keyframes slideDown { from { opacity: 0; max-height: 0; padding: 0 var(--spacing-lg); } to { opacity: 1; max-height: 500px; padding: var(--spacing-lg); } }
@keyframes slideInNotif { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideOutNotif { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100px); } }

/* Export/compression progress now uses the unified toast (see js/shared/ui.js
   + .es-toast* in style.css). Reduced-motion: quiet the toast animations. */
@media (prefers-reduced-motion: reduce) {
  .es-toast { animation: none; }
  .es-toast__progress span { transition: none; }
}
@keyframes spinning { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spinning { animation: spinning 1s linear infinite; }

/* Klaviyo / export status card — tokenized, shares the toast icon language */
.klaviyo-status-card {
  margin-bottom: 10px;
  padding: var(--spacing-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.klaviyo-status-card__row { display: flex; align-items: flex-start; gap: 10px; }
.klaviyo-status-card__badge {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-base);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-subtle);
  color: var(--icon-info);
}
.klaviyo-status-card.is-loading   .klaviyo-status-card__badge { background: var(--primary-subtle); color: var(--icon-loading); }
.klaviyo-status-card.is-success   .klaviyo-status-card__badge { background: var(--primary); color: var(--surface-white); border-radius: var(--radius-pill); }
.klaviyo-status-card.is-error     .klaviyo-status-card__badge { background: var(--danger-subtle);  color: var(--danger-dark); }
.klaviyo-status-card.is-cancelled .klaviyo-status-card__badge { background: var(--bg-tertiary);    color: var(--text-secondary); }
.klaviyo-status-card__body { min-width: 0; flex: 1; }
.klaviyo-status-card__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.klaviyo-status-card__name {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.35;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.klaviyo-status-card__meta {
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
  margin-top: 3px;
}
.klaviyo-status-card__progress {
  margin-top: 8px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-tertiary);
  overflow: hidden;
}
.klaviyo-status-card__progress > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--primary);
  transition: width 0.2s ease;
}
.klaviyo-status-card__links {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: center;
  gap: 6px;
}
.klaviyo-status-card__action {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--primary-text);
  padding: 0 2px;
  cursor: pointer;
}
.klaviyo-status-card__action:hover { color: var(--primary-dark); }
.klaviyo-status-card__action:not(.klaviyo-status-card__action--primary):hover { text-decoration: underline; }
.klaviyo-status-card__action--primary {
  padding: 6px 11px;
  border-radius: var(--radius-base);
  background: var(--primary);
  color: var(--surface-white);
}
.klaviyo-status-card__action--primary:hover { background: var(--primary-dark); color: var(--surface-white); }
@media (prefers-reduced-motion: reduce) {
  .klaviyo-status-card__progress > span { transition: none; }
}
.tab-btn.has-tab-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tab-status-icon {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tab-status-icon.scanning {
  color: var(--primary);
  background: rgba(99, 102, 241, 0.10);
}
.tab-status-icon.complete {
  color: var(--primary);
  background: rgba(99, 102, 241, 0.10);
}
.disabled-group { opacity: 0.5; pointer-events: none; filter: grayscale(1); transition: opacity 0.3s; }
.pulse-highlight { animation: pulse-purple 1s ease; }
@keyframes pulse-purple { 
  0% { transform: scale(1); background: var(--primary); }
  50% { transform: scale(1.1); background: var(--primary-light); }
  100% { transform: scale(1); background: var(--primary); }
}
@keyframes btn-pulse-loop {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
.attention-grabber { animation: btn-pulse-loop 2s infinite; }
.handle-attention {
  background-color: var(--primary-light) !important;
  border: 2px solid white !important;
  z-index: 50 !important;
}
.handle-attention::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 0 rgba(129, 140, 248, 0.7);
  animation: pulse-ring-only 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
  z-index: -1;
  pointer-events: none;
}
@keyframes pulse-ring-only {
  0% { box-shadow: 0 0 0 0 rgba(129, 140, 248, 0.7); }
  70% { box-shadow: 0 0 0 20px rgba(129, 140, 248, 0); }
  100% { box-shadow: 0 0 0 0 rgba(129, 140, 248, 0); }
}

.info-title { 
  font-weight: var(--weight-semibold); 
  color: var(--primary-dark); 
  font-size: var(--text-md); 
  margin-bottom: var(--spacing-md);
  letter-spacing: -0.01em;
}
.info-list { font-size: var(--text-sm); color: var(--primary); list-style: none; }
.info-list li { margin-bottom: 0.25rem; }
.empty-state { 
  text-align: center; 
  padding: 4rem 1.5rem;
}
.empty-icon { 
  width: 88px; 
  height: 88px; 
  background: linear-gradient(135deg, var(--primary-subtle) 0%, var(--primary-subtle) 100%);
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin: 0 auto var(--spacing-lg);
  border: 1px solid rgba(99, 102, 241, 0.08);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.1), 0 2px 8px rgba(99, 102, 241, 0.06);
}
.empty-icon svg { 
  width: 44px; 
  height: 44px; 
  color: var(--primary); 
}
input[type="file"] { display: none; }
.hidden { display: none; }

/* Pro feature badge (shown to Free users on gated UI) */
.pro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-3xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 8px;
  color: var(--primary-dark);
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(99, 102, 241, 0.22);
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Tier gate badge (e.g. Growth+ on team features) - shown when a higher plan tier is required */
.plan-gate-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  font-size: var(--text-3xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  margin-left: 8px;
  color: var(--primary-dark);
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(99, 102, 241, 0.22);
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Near-limit usage warning banner (profile dropdown) */
.usage-warning-banner {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  line-height: 1.35;
  background: rgba(99, 102, 241, 0.10);
  border: 1px solid rgba(99, 102, 241, 0.18);
  color: var(--primary-dark);
}
.usage-warning-banner[data-variant="warn"] {
  background: rgba(99, 102, 241, 0.10);
  border-color: rgba(99, 102, 241, 0.18);
  color: var(--primary-dark);
}
.usage-warning-banner[data-variant="danger"] {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.22);
  color: var(--warning-text);
}

/* Profile dropdown: injected subscription/usage UI (via updateSubscriptionUI) */
.profile-stats-title {
  margin-bottom: 2px;
}

.profile-stats-title,
.upgrade-modal .upgrade-modal-volume-label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  line-height: 1.3;
}

.usage-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.3;
}

.usage-stat-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

.usage-stat-value {
  font-weight: var(--weight-bold);
  color: var(--primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.subscription-billing-link {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.subscription-billing-link:hover {
  color: var(--primary);
}

/* Granted plan: same area as billing link but plain text (no link) */
.subscription-billing-link.subscription-granted-label {
  text-decoration: none;
  cursor: default;
  font-weight: var(--weight-semibold);
}
.subscription-billing-link.subscription-granted-label:hover {
  color: var(--primary-dark);
}

/* Profile avatar wrapper: for positioning the Pro badge */
.profile-avatar-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

/* Profile circle: neutral slate so the Pro pill (primary) stands out */
#profile-avatar-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  background: linear-gradient(135deg, var(--text-secondary) 0%, var(--text-secondary) 100%) !important;
  color: var(--surface-white);
  font-family: inherit;
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  letter-spacing: 0;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
  cursor: pointer;
  overflow: hidden;
  vertical-align: middle;
}

#profile-avatar-btn #user-initials {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: inherit;
  pointer-events: none;
  user-select: none;
}

.avatar-pro-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 15px;
  padding: 0 5px;
  font-size: var(--text-3xs);
  font-weight: var(--weight-extrabold);
  line-height: 1;
  color: var(--surface-white);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border: 1.5px solid var(--surface-white);
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.35);
  pointer-events: none;
}

.avatar-pro-badge.hidden {
  display: none !important;
}

/* Export dropdown (Export Snippets button) */
#download-dropdown-menu .dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
#download-dropdown-menu .dropdown-item > svg {
  flex-shrink: 0;
  color: var(--text-tertiary);
  margin-top: 2px;
  transition: color 0.15s ease;
}
#download-dropdown-menu .dropdown-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#download-dropdown-menu .dropdown-item-text strong {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
#download-dropdown-menu .dropdown-item-desc {
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  color: var(--text-tertiary);
  line-height: 1.3;
}
#download-dropdown-menu .dropdown-item:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.08) 100%);
  color: var(--text-primary);
}
#download-dropdown-menu .dropdown-item:hover > svg {
  color: var(--success);
}
#download-dropdown-menu .dropdown-item:active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(5, 150, 105, 0.14) 100%);
}
#download-dropdown-menu .dropdown-item:focus-visible {
  outline: 2px solid rgba(16, 185, 129, 0.4);
  outline-offset: 1px;
}
/* Klaviyo option uses the bare brand mark (no tile); indigo accent appears on hover */
#download-dropdown-menu .klaviyo-brand-mark {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--text-primary);
  background: transparent;
  transition: color 0.15s ease;
}

#download-dropdown-menu .klaviyo-brand-mark svg {
  display: block;
  fill: currentColor;
  max-width: none;
}

#dropdown-klaviyo-send:hover {
  background: var(--primary-subtle);
  color: var(--text-primary);
}
#dropdown-klaviyo-send:hover .klaviyo-brand-mark {
  color: var(--primary-text);
}
#dropdown-klaviyo-send:active {
  background: var(--primary-subtle);
}

/* Brand-aware dropdown: Klaviyo action items fill with the brand tint on hover */
#download-dropdown-menu [data-brand-action="campaign"]:hover,
#download-dropdown-menu [data-brand-action="template"]:hover,
#download-dropdown-menu [data-brand-action="images"]:hover {
  background: var(--primary-subtle);
  border-color: rgba(var(--primary-tint-rgb), 0.4);
  color: var(--text-primary);
}
#download-dropdown-menu [data-brand-action="campaign"]:hover .klaviyo-brand-mark,
#download-dropdown-menu [data-brand-action="template"]:hover .klaviyo-brand-mark,
#download-dropdown-menu [data-brand-action="images"]:hover .klaviyo-brand-mark {
  color: var(--primary-text);
}
#download-dropdown-menu [data-brand-action="campaign"]:active,
#download-dropdown-menu [data-brand-action="template"]:active,
#download-dropdown-menu [data-brand-action="images"]:active {
  background: var(--primary-subtle);
}

/* Primary Klaviyo action (Campaign) - bordered card, leads on size not weight.
   Inset 10px each side so the card edges line up with the compression options. */
#download-dropdown-menu .dropdown-item-primary {
  width: calc(100% - 20px);
  align-items: center;
  padding: 9px 11px;
  margin: 0 10px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-base);
}
#download-dropdown-menu .dropdown-item-primary .dropdown-item-text strong {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
#download-dropdown-menu .dropdown-item-primary .dropdown-item-desc {
  color: var(--text-secondary);
}

/* Secondary Klaviyo actions (Template / Images) in compact grid */
#download-dropdown-menu .dropdown-klaviyo-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 0 10px;
}
#download-dropdown-menu .dropdown-klaviyo-secondary .dropdown-item {
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-base);
}
#download-dropdown-menu .dropdown-klaviyo-secondary .dropdown-item .dropdown-item-text strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}
#download-dropdown-menu .dropdown-klaviyo-secondary .dropdown-item .dropdown-item-desc {
  font-size: var(--text-xs);
  color: var(--text-tertiary-strong);
}
#download-dropdown-menu .dropdown-klaviyo-secondary .dropdown-item:hover {
  background: var(--primary-subtle);
  border-color: rgba(var(--primary-tint-rgb), 0.4);
}
#download-dropdown-menu .dropdown-klaviyo-secondary .dropdown-item .klaviyo-brand-mark {
  width: 18px;
  height: 18px;
}

/* Muted items (Individual / ZIP in brand-aware mode) */
#download-dropdown-menu .dropdown-item-muted {
  padding: 7px 12px;
}
#download-dropdown-menu .dropdown-item-muted .dropdown-item-text strong {
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--text-quaternary);
}
#download-dropdown-menu .dropdown-item-muted > svg {
  color: var(--border-strong);
  width: 14px;
  height: 14px;
}
#download-dropdown-menu .dropdown-item-muted:hover .dropdown-item-text strong {
  color: var(--text-secondary);
}
/* No-brand nudge - shown in the Send To section when no brand is selected */
#download-dropdown-menu .dropdown-item-nudge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  cursor: default;
}
#download-dropdown-menu .dropdown-item-nudge__icon { color: var(--text-tertiary); flex-shrink: 0; margin-top: 1px; }
#download-dropdown-menu .dropdown-item-nudge .dropdown-item-nudge__title {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
}
#download-dropdown-menu .dropdown-item-nudge .dropdown-item-desc { margin-top: 2px; }

/* Compression setting at the top of the export dropdown - a modifier that
   applies to every export action below. A divider (in markup) separates it
   from the Download Format / Send To actions, so it doesn't read as a third
   pick-one choice. */
#download-dropdown-menu .dropdown-compression {
  position: relative;
}
#download-dropdown-menu .dropdown-compression-head {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 10px 4px;
  margin-bottom: 2px;
}
#download-dropdown-menu .dropdown-compression-title {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
/* Hover/focus info affordance + popover explaining each mode */
#download-dropdown-menu .compression-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--text-tertiary);
  cursor: help;
  transition: color 0.15s ease;
}
#download-dropdown-menu .compression-info:hover,
#download-dropdown-menu .compression-info:focus { color: var(--primary); }
#download-dropdown-menu .compression-info:focus { outline: none; }
#download-dropdown-menu .compression-info:focus-visible {
  outline: 2px solid rgba(99, 102, 241, 0.4);
  outline-offset: 1px;
}
#download-dropdown-menu .compression-info svg { display: block; }
#download-dropdown-menu .compression-info-tip {
  position: absolute;
  top: 58px;
  left: 8px;
  right: 8px;
  z-index: 320;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-secondary);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s 0.15s;
}
#download-dropdown-menu .compression-info-tip strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}
#download-dropdown-menu .compression-info-tip .tip-row + .tip-row { margin-top: 6px; }
#download-dropdown-menu .compression-info-tip .tip-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--text-tertiary);
}
#download-dropdown-menu .dropdown-compression:has(.compression-info:hover) .compression-info-tip,
#download-dropdown-menu .dropdown-compression:has(.compression-info:focus) .compression-info-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 1s;
}
#download-dropdown-menu .dropdown-compression-options {
  display: flex;
  gap: 5px;
  padding: 0 10px 6px;
}
#download-dropdown-menu .dropdown-comp-opt {
  flex: 1;
  margin: 0;
  cursor: pointer;
  text-align: center;
}
#download-dropdown-menu .dropdown-comp-opt input[type="radio"] {
  display: none;
}
#download-dropdown-menu .dropdown-comp-opt span {
  display: block;
  padding: 6px 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-base);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
#download-dropdown-menu .dropdown-comp-opt:hover span {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
#download-dropdown-menu .dropdown-comp-opt input[type="radio"]:checked + span {
  background: var(--primary-subtle);
  border-color: rgba(99, 102, 241, 0.28);
  color: var(--primary);
  font-weight: var(--weight-semibold);
}
/* Advanced option once the monthly usage limit is reached (still clickable) */
#download-dropdown-menu .dropdown-comp-opt.compression-advanced-at-limit span,
#download-dropdown-menu .dropdown-comp-opt.compression-advanced-at-limit input[type="radio"]:checked + span {
  color: var(--danger);
  border-color: var(--danger-border);
}
/* Usage hint, only visible on Advanced for limited tiers */
#download-dropdown-menu .dropdown-compression .compression-usage-hint {
  padding: 0 10px;
  font-size: var(--text-2xs);
}
#download-dropdown-menu .dropdown-compression .compression-usage-hint.is-visible {
  margin-top: 6px;
}

/* Klaviyo brand modal - API key verification */
.klaviyo-brand-api-key-status {
  font-size: var(--text-xs);
  line-height: 1.4;
  margin: 6px 0 0;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.klaviyo-brand-api-key-status.hidden {
  display: none;
}
.klaviyo-brand-api-key-status--success {
  color: var(--success-darker);
  background: var(--success-subtle);
  border-left: 3px solid var(--success-border);
}
.klaviyo-brand-api-key-status--error {
  color: var(--danger-text);
  background: var(--danger-subtle);
  border-left: 3px solid var(--danger-border);
}
.klaviyo-brand-api-key-status--testing {
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-left: 3px solid var(--border-strong);
}

/* Klaviyo Send modal - audience load alerts */
.klaviyo-audience-alert {
  font-size: var(--text-xs);
  line-height: 1.45;
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: var(--radius-base);
}
.klaviyo-audience-alert.hidden {
  display: none;
}
.klaviyo-audience-alert--error {
  color: var(--danger-text);
  background: var(--danger-subtle);
  border-left: 3px solid var(--danger-border);
}
.klaviyo-audience-alert--warning {
  color: var(--warning-text, var(--warning-text));
  background: var(--warning, var(--warning));
  border-left: 3px solid var(--warning-border);
}
.klaviyo-audience-alert--success {
  color: var(--success-darker);
  background: var(--success-subtle);
  border-left: 3px solid var(--success-border);
}
.klaviyo-audience-alert strong {
  display: block;
  margin-bottom: 2px;
  font-size: var(--text-sm);
}
.klaviyo-audience-alert-action {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 4px 8px;
  border: 1px solid rgba(185, 28, 28, 0.25);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--danger-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  font-family: inherit;
}
.klaviyo-audience-alert--warning .klaviyo-audience-alert-action {
  border-color: rgba(120, 53, 15, 0.25);
  color: var(--warning-text, var(--warning-text));
}
.klaviyo-audience-alert-action:hover {
  background: rgba(250, 249, 246, 0.92);
}
@keyframes klaviyo-audience-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.klaviyo-audience-picker-disabled {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-base);
  background: var(--bg-secondary);
  padding: 7px 9px;
  min-height: 42px;
  box-sizing: border-box;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

/* Muted section header */
#download-dropdown-menu .dropdown-section-muted {
  padding: 10px 10px 2px;
  margin-bottom: 2px;
}
#download-dropdown-menu .dropdown-section-muted span {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--border-strong);
}

/* Alt text status in brand-aware dropdown */
#download-dropdown-menu .dropdown-alt-text-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  margin: 0 6px 8px;
  border-radius: var(--radius-lg);
  border: none;
  border-left: 3px solid var(--border);
  background: var(--surface-card);
}
#download-dropdown-menu .dropdown-alt-text-row[data-tone="warning"] {
  border-left-color: var(--warning-icon);
}
#download-dropdown-menu .dropdown-alt-text-row[data-tone="success"] {
  border-left-color: var(--success-border);
}
#download-dropdown-menu .dropdown-alt-text-message {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.2;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#download-dropdown-menu .dropdown-alt-text-action {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
#download-dropdown-menu .dropdown-alt-text-action:hover {
  text-decoration: underline;
}

#download-dropdown-menu .dropdown-alt-text-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#download-dropdown-menu .dropdown-alt-text-busy {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
}

/* Auto alt text extract toggle */
.auto-alt-text-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.auto-alt-text-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.auto-alt-text-toggle-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
}

.auto-alt-text-toggle-track {
  position: relative;
  width: 34px;
  height: 18px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  transition: background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}

.auto-alt-text-toggle-track::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-elevated);
  top: 1px;
  left: 1px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.auto-alt-text-toggle-input:checked + .auto-alt-text-toggle-track {
  background: rgba(var(--primary-tint-rgb), 0.14);
  border-color: rgba(var(--primary-tint-rgb), 0.28);
}

.auto-alt-text-toggle-input:checked + .auto-alt-text-toggle-track::after {
  transform: translateX(16px);
}

.auto-alt-text-toggle-input:focus-visible + .auto-alt-text-toggle-track {
  box-shadow: 0 0 0 2px rgba(var(--primary-tint-rgb), 0.25);
}

.auto-alt-text-tab-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
  padding: 7px 10px;
  background: var(--surface-card);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.auto-alt-text-tab-toggle {
  gap: 10px;
  min-width: 0;
}

.auto-alt-text-tab-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
}

.auto-alt-text-info-wrap {
  position: relative;
  flex-shrink: 0;
}

.auto-alt-text-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-tertiary);
  cursor: help;
}

.auto-alt-text-info-btn:hover,
.auto-alt-text-info-btn:focus-visible {
  color: var(--primary);
  background: rgba(var(--primary-tint-rgb), 0.08);
  outline: none;
}

.auto-alt-text-info-tooltip {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 20;
  width: 220px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: 1.5;
  font-weight: var(--weight-medium);
  text-align: left;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.auto-alt-text-info-tooltip::before {
  content: '';
  position: absolute;
  right: 8px;
  top: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid var(--border);
}

.auto-alt-text-info-tooltip::after {
  content: '';
  position: absolute;
  right: 9px;
  top: -5px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--bg-elevated);
}

.auto-alt-text-info-wrap:hover .auto-alt-text-info-tooltip,
.auto-alt-text-info-wrap:focus-within .auto-alt-text-info-tooltip {
  opacity: 1;
  visibility: visible;
}

#klaviyo-send-alt-text-panel .auto-alt-text-toggle-label {
  font-size: var(--text-xs);
}

#download-dropdown-menu .dropdown-auto-alt-wrap .auto-alt-text-toggle-label {
  font-size: var(--text-xs);
}

/* Dropdown container - enhanced prominence */
#download-dropdown-menu {
  background: var(--bg-elevated);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 12px 24px -2px rgba(0, 0, 0, 0.12),
    0 24px 48px -4px rgba(16, 185, 129, 0.1),
    0 0 0 1px rgba(16, 185, 129, 0.06);
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
/* Dropdown animation - override .hidden to use opacity/transform for smooth transitions */
#download-dropdown-menu.hidden {
  display: block !important;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  visibility: hidden;
}

/* Anonymous campaign usage progress (download dropdown) */
.campaign-progress-inner {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.campaign-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.campaign-progress-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  line-height: 1.25;
}

.campaign-progress-bar-track {
  width: 100%;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-tertiary);
  overflow: hidden;
}

.campaign-progress-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-pill);
  background: var(--success);
  transition: width 0.4s ease, background-color 0.2s ease;
}

.campaign-progress-bar-fill.near-limit {
  background: var(--warning-icon);
}

.campaign-progress-bar-fill.at-limit {
  background: var(--danger);
}

.campaign-progress-cta {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--primary);
  text-decoration: none;
}

.campaign-progress-cta:hover {
  text-decoration: underline;
}

.campaign-progress-separator {
  height: 1px;
  background: var(--bg-tertiary);
  margin: 6px 0 6px;
}

.brand-item {
  font-weight: var(--weight-normal);
}
.brand-item:hover {
  background-color: var(--bg-tertiary);
  color: var(--primary);
}
.brand-item.active {
  background-color: var(--primary-subtle);
  color: var(--primary);
  font-weight: var(--weight-semibold);
}
.brand-item.active:hover {
  background-color: var(--danger-wash);
}
.brand-item-state-icon {
  flex-shrink: 0;
  width: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}
.brand-item-state-icon .icon-check,
.brand-item-state-icon .icon-x { display: none; }
.brand-item:not(.active):hover .brand-item-state-icon { color: var(--text-tertiary); }
.brand-item:not(.active):hover .brand-item-state-icon .icon-check { display: block; }
.brand-item.active .brand-item-state-icon { color: var(--primary); }
.brand-item.active .brand-item-state-icon .icon-check { display: block; }
.brand-item.active:hover .brand-item-state-icon { color: var(--danger); opacity: 0.6; }
.brand-item.active:hover .brand-item-state-icon .icon-check { display: none; }
.brand-item.active:hover .brand-item-state-icon .icon-x { display: block; }
.brand-item.active:hover .brand-api-tag { background: var(--bg-tertiary); color: var(--text-secondary); }
.brand-item-edit-btn:hover {
  background-color: var(--border);
  color: var(--primary);
}

.brand-api-tag {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--primary);
  background: var(--primary-subtle);
  padding: 2px 6px;
  border-radius: 4px;
}

#landing-view { display: block; }
#editor-screen { display: none; }
.footer-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 1200px) {
  .footer-split-grid {
    grid-template-columns: 1fr;
  }
}
.exclusion-controls { 
  background: var(--primary-subtle);
  border: 1px solid rgba(99, 102, 241, 0.12);
  border-radius: var(--radius-md); 
  padding: var(--spacing-lg); 
  box-shadow: var(--shadow-secondary);
  position: relative;
}
.exclusion-title { 
  font-weight: var(--weight-semibold); 
  color: var(--text-primary); 
  margin-bottom: var(--spacing-md); 
  font-size: var(--text-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.input-group { display: flex; gap: var(--spacing-xs); align-items: center; flex-wrap: wrap; }
.input-group input { 
  padding: 0.625rem; 
  border: var(--border-subtle); 
  border-radius: var(--radius-sm); 
  width: 100px; 
  font-weight: var(--weight-medium);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color 0.2s;
}
.input-group input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.input-group label { font-size: var(--text-base); color: var(--text-secondary); font-weight: var(--weight-semibold); }

.slider-container { display: flex; flex-direction: column; gap: 0.5rem; }
.slider-container input[type="range"] { width: 100%; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.panel-meta { display: flex; align-items: center; gap: 10px; }
.panel-body { margin-top: 0.75rem; }
.panel-chevron { width: 18px; height: 18px; color: var(--text-tertiary); transition: transform 0.2s ease, color 0.2s ease; }
.panel-pill { background: var(--bg-elevated); border: 1px solid rgba(15, 23, 42, 0.08); color: var(--text-secondary); font-size: var(--text-xs); padding: 4px 10px; border-radius: var(--radius-pill); font-weight: var(--weight-semibold); }
.panel-collapsed { padding-bottom: 1rem; }
.panel-collapsed .panel-body { display: none; }
.panel-collapsed .panel-chevron { transform: rotate(0deg); color: var(--text-tertiary); opacity: 0.7; }
.panel-collapsed .panel-header { opacity: 0.65; }
/* Export settings drawer inside snippets card. Visibility is controlled by app.js (inline display on #export-settings-body); do not set display here to avoid ghost UI. */
.export-settings-drawer {
  background: color-mix(in srgb, var(--cream) 32%, white);
  border-radius: var(--radius-md);
  padding: 12px 1.25rem 8px;
  margin-top: 0;
  margin-bottom: 0;
  border: 1px solid rgba(15, 23, 42, 0.07);
}
.settings-drawer-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
#export-settings-body .input-group,
#export-settings-body .input-group input,
#export-settings-body .input-group label,
#export-settings-body .input-group span,
#export-settings-body .quality-label {
  font-size: var(--text-sm);
}
#export-settings-body .input-group input {
  height: 32px;
  line-height: 1.4;
}

.footer-lock-btn {
  width: 34px;
  height: 32px;
  padding: 0;
  flex-shrink: 0;
  gap: 0;
  line-height: 0;
  align-items: center;
  justify-content: center;
}

.footer-lock-btn #lock-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.footer-lock-btn svg {
  display: block;
  width: 16px;
  height: 16px;
}

.footer-lock-btn.is-locked {
  background: var(--header-chip-active);
  color: var(--primary);
  border-color: var(--chrome-selection-border);
  box-shadow: var(--shadow-sm);
}

.footer-lock-btn.is-locked:hover:not(:disabled) {
  background: var(--primary-subtle);
  border-color: var(--chrome-selection-border);
}

/* Compression Method: modest spacing above and below the toggle */
#export-settings-body .compression-method-group {
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 0;
  gap: 6px;
}
#export-settings-body .compression-method-group > span {
  margin-bottom: 0;
}
#export-settings-body .segmented-control {
  margin-top: 0;
  margin-bottom: 0;
}

/* Advanced compression usage hint (free tier, when Advanced is selected) */
.compression-usage-hint {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
  margin: 0;
  padding: 0;
  left: 0;
  text-align: left;
  opacity: 0;
  transition: opacity 0.2s ease;
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  white-space: nowrap;
}
.compression-usage-hint.is-visible {
  opacity: 1;
  max-height: 2em;
  margin-top: 6px;
}
.compression-usage-hint.is-warning {
  color: var(--warning-icon);
}
.compression-usage-hint.is-limit {
  color: var(--danger);
  font-weight: var(--weight-semibold);
}
.compression-usage-hint a {
  color: inherit;
  text-decoration: none;
}
.compression-usage-hint a:hover {
  text-decoration: underline;
}
/* Speed hint (shown when Fast compression is selected) */
.compression-speed-hint {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
  margin: 0;
  padding: 0;
  text-align: left;
  opacity: 0;
  transition: opacity 0.2s ease;
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  white-space: nowrap;
}
.compression-speed-hint.is-visible {
  opacity: 1;
  max-height: 2em;
  margin-top: 6px;
}

/* Advanced toggle option when limit reached (red text, still clickable) */
.segmented-control label.compression-advanced-at-limit span,
.segmented-control label.compression-advanced-at-limit input[type="radio"]:checked + span {
  color: var(--danger);
}

/* Snippets card header (clickable to toggle export drawer) */
.snippets-card-header {
  margin-bottom: 4px;
}
#export-settings-arrow {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  transition: transform 0.2s ease;
  display: inline-flex;
  align-items: center;
}
#export-settings-header.expanded #export-summary {
  display: none;
}

/* Wrapper for list + download controls; overlay sits on this when inactive.
   Min-height ensures the download dropdown (opens downward) is never cut off when there are only 1–2 snippets.
   JS raises this further for Klaviyo API brands (taller brand-aware menu) and the Klaviyo status card. */
#snippets-content-wrapper {
  position: relative;
  min-height: 320px;
  overflow: visible;
}

#snippets-card {
  overflow: visible;
}

/* Full-width primary Export button below export drawer */
#download-all {
  width: 100%;
  height: 46px;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--success-mid) 0%, var(--success-mid-dark) 100%);
  color: white;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  border: none;
  border-radius: var(--radius-base);
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.4);
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
#download-all:hover:not(:disabled) {
  filter: brightness(105%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -2px rgba(16, 185, 129, 0.5);
}
#download-all svg {
  flex-shrink: 0;
}

/* "Exports remaining" helper line - sits directly under the export button.
   Resting (anonymous + Free): brand indigo. Low / paid-near-cap: amber chip. */
.export-usage-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: calc(var(--spacing-xs) * -0.5) 0 var(--spacing-lg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--text-secondary);
}
/* Component-scoped override: the base rule's `display: flex` is declared after
   the global `.hidden { display: none }` (same specificity), so without this the
   element stays visible when hidden - showing a lone bolt icon for paid users. */
.export-usage-note.hidden {
  display: none;
}
.export-usage-note__icon {
  flex: 0 0 auto;
  color: var(--primary);
}
.export-usage-note__msg {
  min-width: 0;
}
.export-usage-note__msg strong {
  font-weight: var(--weight-semibold);
  color: var(--primary-text);
}
.export-usage-note__upgrade {
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: var(--weight-semibold);
  color: var(--primary-text);
  text-decoration: none;
}
.export-usage-note__upgrade:hover {
  text-decoration: underline;
}
.export-usage-note--low {
  color: var(--warning-text);
  background: var(--warning-subtle);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-base);
  padding: 8px 10px;
}
.export-usage-note--low .export-usage-note__icon {
  color: var(--warning-icon);
}
.export-usage-note--low .export-usage-note__msg strong {
  color: var(--warning-text);
}
.export-usage-note--low .export-usage-note__upgrade {
  color: var(--warning-amber);
}
.panel-activated .panel-meta { display: none; }
.panel-preupload { background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.05)); border: 1px solid rgba(99, 102, 241, 0.16); box-shadow: inset 0 1px 3px rgba(99, 102, 241, 0.1); padding: 12px 16px !important; }
.panel-preupload .panel-header { color: var(--text-secondary); }
.panel-preupload .panel-header svg { color: var(--text-secondary); }
.panel-preupload .panel-meta { display: flex; }
.panel-preupload .info-button-small { display: none; }
.inactive-block { position: relative; opacity: 0.55; pointer-events: none; filter: grayscale(0.1); }
.inactive-overlay { 
  position: absolute; 
  inset: 0; 
  display: none; 
  align-items: center; 
  justify-content: center; 
  gap: 8px;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.8), rgba(241, 245, 249, 0.8));
  color: var(--text-secondary); 
  font-weight: var(--weight-semibold); 
  font-size: var(--text-base); 
  text-align: center; 
  padding: 1rem; 
  border-radius: inherit;
}
.inactive-block .inactive-overlay { display: flex; }
.snippets-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 24px 24px 18px;
  background: var(--bg-primary);
  box-shadow: var(--shadow-primary);
  border: 1px solid rgba(15, 23, 42, 0.04);
  border-radius: var(--radius-lg);
}

/* Editor snippets panel: white shell, cream snippet rows */
body.editor-mode .snippets-section {
  background: var(--surface-white);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow-primary);
}

body.editor-mode .snippet-card {
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.07);
}

.empty-text-state {
  text-align: center;
  color: var(--text-tertiary);
  padding: 32px;
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(15, 23, 42, 0.1);
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.editor-mode .empty-text-state {
  border-color: rgba(15, 23, 42, 0.08);
}

body.editor-mode .snippet-card:hover {
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
}

body.editor-mode .snippet-card.snippet-card-active {
  background: var(--primary-subtle);
  box-shadow: 0 2px 5px rgba(99, 102, 241, 0.07);
}

body.editor-mode .snippet-card.excluded {
  background: var(--bg-secondary);
}

#klaviyo-send-campaign-fields {
  background: var(--surface-card);
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.editor-mode #snippets-content-wrapper.inactive-block .inactive-overlay {
  background: linear-gradient(
    135deg,
    rgba(252, 252, 251, 0.92),
    rgba(250, 249, 246, 0.92)
  );
}
.canvas-empty-state {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.25rem;
  background: linear-gradient(145deg, rgba(99, 102, 241, 0.03), rgba(148, 163, 184, 0.05));
  border: 1.5px dashed rgba(99, 102, 241, 0.2);
  border-radius: inherit;
  text-align: center;
}
.canvas-empty-state .upload-area {
  width: min(520px, 88%);
  padding: 4rem 3rem;
  background: var(--surface-white);
  border-radius: 14px;
  border: 1px solid rgba(99, 102, 241, 0.15);
  box-shadow: var(--shadow-lg);
}
.canvas-empty-state .upload-icon { width: 88px; height: 88px; box-shadow: 0 10px 26px rgba(99, 102, 241, 0.12), 0 4px 12px rgba(99, 102, 241, 0.08); }
.canvas-empty-state .upload-title { font-size: var(--text-2xl); }
.canvas-empty-state .upload-subtitle { color: var(--text-secondary); }

/* Compact Workflow Stepper */
.progress-dots { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  gap: 2rem;
  position: relative;
}

.progress-step { 
  display: flex; 
  align-items: baseline; 
  gap: 0.5rem; 
  font-size: var(--text-sm); 
  line-height: 1.25;
  color: var(--text-tertiary); 
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: var(--weight-medium);
  position: relative;
  white-space: nowrap;
}
.progress-step > span:not(.step-tooltip) {
  line-height: inherit;
}
.progress-step.active { color: var(--primary-text); font-weight: var(--weight-semibold); }
.progress-step.complete { color: var(--text-secondary); font-weight: var(--weight-medium); align-items: center; }
.progress-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto;
  height: auto;
  min-width: 0.65em;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: inherit;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: inherit;
  color: inherit;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-step.active .progress-dot {
  color: var(--primary-text);
  font-weight: var(--weight-bold);
}
.progress-step.complete .progress-dot {
  width: auto;
  min-width: 0;
  height: auto;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--success);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}
/* Skipped step (e.g. Set Footer when user went straight to splitting) */
.progress-step.skipped { color: var(--text-tertiary); }
.progress-step.skipped .progress-dot {
  width: auto;
  height: auto;
  min-width: 0;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.app-header .progress-dots {
  gap: 0.75rem;
}
.app-header .progress-dots::before {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  height: 2px;
  background: rgba(15, 23, 42, 0.08);
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
}
.app-header .progress-step {
  background: var(--header-progress-bg);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--header-chip-border);
  box-shadow: none;
  z-index: 1;
  gap: 0.45rem;
  align-items: baseline;
}
.app-header .progress-step.complete {
  align-items: center;
  background: var(--header-progress-bg);
  border-color: var(--header-chip-border);
}
.app-header .progress-step.active {
  background: var(--header-chip-active);
  border-color: rgba(var(--primary-tint-rgb), 0.14);
  box-shadow: none;
}

/* Header controls on white bar (login, undo, history, etc.) */
.app-header .btn-white,
.app-header .btn-gray {
  background: var(--header-chip-bg);
  border: 1px solid var(--header-chip-border);
  box-shadow: none;
}
.app-header .btn-white:hover:not(:disabled),
.app-header .btn-gray:hover:not(:disabled) {
  background: var(--header-chip-hover);
  box-shadow: none;
}

.app-header #progress-footer.clickable,
.app-header #progress-footer.attention-grabber {
  background: var(--header-chip-active);
  border-color: rgba(var(--primary-tint-rgb), 0.14);
  box-shadow: none;
}
.app-header #progress-footer.clickable:hover,
.app-header #progress-footer.clickable.attention-grabber:hover {
  background: var(--primary-subtle);
  border-color: rgba(var(--primary-tint-rgb), 0.22);
  box-shadow: none;
}

.app-header #profile-avatar-btn {
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.1),
    0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Clickable progress-footer step */
#progress-footer.clickable {
  cursor: pointer;
  background: var(--primary-subtle);
  border-color: rgba(var(--primary-tint-rgb), 0.28);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#progress-footer.clickable:hover,
#progress-footer.clickable.attention-grabber:hover {
  background: var(--primary-subtle);
  border-color: rgba(var(--primary-tint-rgb), 0.38);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--primary-tint-rgb), 0.14);
}
#progress-footer.clickable:active {
  transform: translateY(0);
}
#progress-footer.attention-grabber {
  background: var(--primary-subtle);
  animation: btn-pulse-loop 2s infinite;
  border-color: rgba(var(--primary-tint-rgb), 0.24);
  color: var(--primary-text);
  box-shadow: 0 2px 6px rgba(var(--primary-tint-rgb), 0.1);
}

/* Export step: pointer only when active (click opens export dropdown) */
#progress-download.active {
  cursor: pointer;
}

/* Step tooltips – delayed hover hints for each progress step */
.step-tooltip {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--surface-white);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: var(--text-xs);
  line-height: 1.55;
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  text-align: center;
  white-space: normal;
  width: 218px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.06);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
}
.step-tooltip strong {
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
.step-tooltip-optional {
  color: var(--primary);
  font-weight: var(--weight-semibold);
}
.step-tooltip-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  text-align: left;
}
.step-tooltip-list li {
  position: relative;
  padding-left: 1em;
}
.step-tooltip-list li + li {
  margin-top: 3px;
}
.step-tooltip-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: var(--weight-bold);
}
/* Upward-pointing arrow – border layer */
.step-tooltip::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid rgba(15, 23, 42, 0.07);
}
/* Upward-pointing arrow – fill layer */
.step-tooltip::after {
  content: '';
  display: block;
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--surface-white);
}
/* Edge adjustments: first step tooltip nudged right, last step nudged left */
#progress-upload .step-tooltip {
  left: 0;
  transform: translateX(0) translateY(6px);
}
#progress-upload .step-tooltip::before {
  left: 20px;
  transform: none;
}
#progress-upload .step-tooltip::after {
  left: 21px;
  transform: none;
}
#progress-download .step-tooltip {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(6px);
}
#progress-download .step-tooltip::before {
  left: auto;
  right: 20px;
  transform: none;
}
#progress-download .step-tooltip::after {
  left: auto;
  right: 21px;
  transform: none;
}
/* Visible state */
.progress-step.tooltip-visible .step-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#progress-upload.tooltip-visible .step-tooltip,
#progress-download.tooltip-visible .step-tooltip {
  transform: translateX(0) translateY(0);
}
/* Hide tooltips on mobile */
@media (max-width: 768px) {
  .step-tooltip {
    display: none;
  }
}

/* Floating Command Bar: premium capsule (Figma-style tool palette) */
#command-bar {
  position: fixed;
  top: 50%;
  left: 32px;
  transform: translateY(-50%);
  z-index: 100;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  padding: 12px 0;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
  opacity: 0.96;
}
#command-bar.hidden { display: none !important; }

#command-bar .zoom-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  text-align: center;
}
#command-bar .zoom-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: none;
  color: var(--text-secondary);
}
#command-bar .zoom-btn:hover:not(:disabled) {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--primary);
  box-shadow: none;
  transform: none;
}
#command-bar .zoom-level {
  min-width: 0;
  font-size: var(--text-sm);
}
#command-bar .snap-toggle-container {
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
  gap: 0;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
#command-bar .shortcuts-hint-container {
  position: relative;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
#command-bar .shortcuts-hint-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: transparent;
  color: var(--text-tertiary);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
#command-bar .shortcuts-hint-btn:hover {
  color: var(--primary);
  border-color: rgba(99, 102, 241, 0.22);
  background: rgba(99, 102, 241, 0.06);
}
#command-bar .shortcuts-popup {
  display: none;
  position: absolute;
  left: calc(100% + 16px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  white-space: nowrap;
  z-index: 200;
  min-width: 200px;
}
#command-bar .shortcuts-hint-container:hover .shortcuts-popup,
#command-bar .shortcuts-hint-btn:focus + .shortcuts-popup {
  display: block;
}
#command-bar .shortcuts-popup-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
#command-bar .shortcuts-popup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
#command-bar .shortcuts-popup-row kbd {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
#command-bar .shortcuts-popup-row span {
  font-weight: var(--weight-medium);
}
#command-bar .snap-text {
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  margin-bottom: 5px;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: color 0.2s ease;
  line-height: 1.2;
}
#command-bar .snap-toggle-container:has(.snap-toggle.active) .snap-text {
  color: var(--primary-text);
}
/* Vertical switch: clear off/on track contrast */
#command-bar .snap-toggle {
  width: 24px;
  height: 44px;
  border-radius: 22px;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.1);
}
#command-bar .snap-toggle::after {
  width: 18px;
  height: 18px;
  top: 2px;
  left: 2px;
  transform: none;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}
#command-bar .snap-toggle.active {
  background: rgba(var(--primary-tint-rgb), 0.14);
  border-color: rgba(var(--primary-tint-rgb), 0.28);
}
#command-bar .snap-toggle.active::after {
  transform: translateY(18px);
  box-shadow: 0 1px 3px rgba(var(--primary-tint-rgb), 0.18);
}
.zoom-controls { display: flex; gap: var(--spacing-xs); align-items: center; margin-bottom: var(--spacing-lg); justify-content: center; }
.zoom-btn { 
  width: 36px; 
  height: 36px; 
  border-radius: var(--radius-sm); 
  border: var(--border-subtle); 
  background: var(--bg-primary); 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-weight: var(--weight-semibold); 
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
}
.zoom-btn:hover:not(:disabled) { 
  background: var(--bg-secondary); 
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: var(--primary);
}
.zoom-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.zoom-level { 
  font-size: var(--text-base); 
  color: var(--text-secondary); 
  min-width: 60px; 
  text-align: center; 
  font-weight: var(--weight-semibold);
}

.snap-toggle-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-left: var(--spacing-md);
  padding-left: var(--spacing-md);
  border-left: 1px solid var(--border);
}

.snap-toggle-label {
  font-size: var(--text-base);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}

.snap-toggle {
  position: relative;
  width: 48px;
  height: 26px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.snap-toggle.active {
  background: rgba(var(--primary-tint-rgb), 0.14);
  border-color: rgba(var(--primary-tint-rgb), 0.28);
}

.snap-toggle::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--bg-elevated);
  top: 1px;
  left: 1px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.snap-toggle.active::after {
  transform: translateX(22px);
  box-shadow: 0 1px 3px rgba(var(--primary-tint-rgb), 0.18);
}
.quality-label { 
  font-size: var(--text-base); 
  color: var(--primary); 
  display: flex; 
  justify-content: space-between;
  font-weight: var(--weight-semibold);
}
.controls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
@media (max-width: 768px) { .controls-grid { grid-template-columns: 1fr; } }
/* Segmented Control for Radio Buttons */
.segmented-control {
  display: flex;
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: 4px;
  width: 100%;
  position: relative;
  border: 1px solid var(--border);
}

.segmented-control label {
  flex: 1;
  text-align: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
  margin: 0;
}

.segmented-control input[type="radio"] {
  display: none;
}

.segmented-control span {
  display: block;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.segmented-control input[type="radio"]:checked + span {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-sm);
}

.segmented-control label:hover span:not(.active) {
  color: var(--text-primary);
}

/* Guest crash-recovery (logged-out editor): restore banner + local-save pill */
.guest-restore-banner {
  position: fixed;
  top: calc(var(--header-height) + var(--spacing-sm));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  max-width: calc(100vw - var(--spacing-lg));
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--surface-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.guest-restore-banner__text { font-weight: var(--weight-medium); }
.guest-restore-banner__action {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-weight: var(--weight-semibold);
  color: var(--primary);
}
.guest-restore-banner__action:hover { text-decoration: underline; }
.guest-restore-banner__dismiss {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--text-tertiary);
}
.guest-restore-banner__dismiss:hover { color: var(--text-secondary); }

.guest-save-indicator {
  position: fixed;
  bottom: var(--spacing-md);
  left: var(--spacing-md);
  z-index: 2000;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--surface-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.guest-save-indicator.is-visible {
  opacity: 1;
  transform: translateY(0);
}