:root {
  /* Base Canvas Layers */
  --bg-main: #1C1718;          /* Deepest warm velvet espresso base */
  --bg-card: #251F21;          /* Solid dark plum container backing */
  --bg-input: #2F2629;         /* Inside option container slots */

  /* The 10 Unique Smart Pastels Applied to Features */
  --c-1-rose: #D0A0A3;      /* 1. Rose Quartz (Active selectors & primary headers) */
  --c-2-blossom: #ECCBC9;   /* 2. Soft Blossom Pink (Primary buttons) */
  --c-3-sunset: #FFCBBC;    /* 3. Sunset Peach Blush (Active toggles) */
  --c-4-sage: #A3B899;      /* 4. Sage Mint (Dropzone outline) */
  --c-5-lilac: #D4C5D9;     /* 5. Muted Lilac (Watermark upload action border) */
  --c-6-mint: #C2D5C0;      /* 6. Mint Glaze (Success states) */
  --c-7-butter: #F5E6C4;    /* 7. Butter Yellow (Premium tier strings) */
  --c-8-frost: #C5E3E7;     /* 8. Frost Blue (Dropdown frames) */
  --c-9-lavender: #A6959E;  /* 9. Lavender Grey (Inactive context descriptions) */
  --c-10-orchid: #E5D4ED;   /* 10. Soft Orchid Pink (Icon vector masks) */

  /* High Contrast Ivory */
  --c-ivory: #F9EEE2;       /* Warm Milk Ivory (Main legible label text) */

  --text-main: var(--c-ivory);
  --text-muted: var(--c-9-lavender);
  --accent: var(--c-2-blossom);
  --border-radius: 20px;
}

/* 1. EXECUTE CODE SANITIZATION & GARBAGE COLLECTION */
html, body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important; /* Completely eliminates horizontal page shifting */
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background-color: var(--bg-main) !important;
  font-family: 'Quicksand', sans-serif;
  color: var(--text-main);
  line-height: 1.6;
}

*, *:before, *:after {
  box-sizing: inherit !important;
}

/* 2. ENFORCE ABSOLUTE MOBILE CENTERING MATRIX */
.main-wrapper, .app-container, #app, main, .container {
  width: 100% !important;
  max-width: 420px !important; /* Strict responsive phone envelope footprint */
  margin: 0 auto !important;   /* Dead center horizontal alignment lock */
  padding: 0 16px !important;
  display: flex !important;
  flex-direction: column !important;
  float: none !important;
  position: relative !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  gap: 20px !important;
}

/* 3. ANTI-OVERLAP DOM NATURAL DOCUMENT FLOW */
.settings-panel, .card, .setting-row, .toggle-row, .control-group {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 12px !important; /* Guarantees strict, clean vertical spacing between every feature */
  box-sizing: border-box !important;
}

/* 4. COMPLETE 10-PASTEL SYSTEM MAPPING & CONTRAST LOCK */

/* Base Card Panels */
.app-interface, .seo-matrix article, .review-card, .faq-item, .queue-container, .modal-content {
  background-color: var(--bg-card) !important;
  border-radius: var(--border-radius) !important;
  padding: 1.5rem !important;
  border: 1px solid rgba(208, 160, 163, 0.15) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
}

/* Inside Settings Rows */
.setting-row, .toggle-row {
  background-color: var(--bg-input) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Core Typography Labels */
label, span, .setting-label, p, blockquote, figcaption, summary {
  color: var(--c-ivory) !important;
  opacity: 1 !important;
  font-family: 'Quicksand', sans-serif !important;
  margin: 0;
}

h1, h2, h3, .card-title, .settings-title {
  color: var(--c-1-rose) !important;
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700;
  margin: 0;
}

/* Muted context descriptions */
.status-text, .file-count, .setting-muted-text, #wm-file-status {
  color: var(--c-9-lavender) !important;
  font-size: 0.85rem;
}

/* 5. SLIM COMPACT UPGRADE BANNER */
.promo-banner {
  padding: 6px 12px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--c-2-blossom), var(--c-3-sunset)) !important;
  box-shadow: 0 0 12px rgba(255, 203, 188, 0.45) !important;
  width: 100% !important;
  margin: 8px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}

.promo-banner, .promo-banner * {
  color: #1C1718 !important; /* Dark ink for contrast */
  font-size: 12px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  text-decoration: none !important;
}

/* Interactive Elements */

/* Primary Action Buttons */
.primary-btn, .action-btn {
  background-color: var(--c-2-blossom) !important;
  color: #1C1718 !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
  width: 100% !important;
  font-family: inherit !important;
}

.primary-btn:hover, .action-btn:hover {
  transform: translateY(-2px) !important;
}

/* Secondary Buttons */
.secondary-btn {
  background: transparent !important;
  border: 1px solid var(--c-2-blossom) !important;
  color: var(--c-2-blossom) !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

/* Dropzone */
.upload-zone {
  border: 2px dashed var(--c-4-sage) !important;
  background-color: rgba(163, 184, 153, 0.05) !important;
  padding: 2rem !important;
  text-align: center !important;
  border-radius: var(--border-radius) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
}

/* Toggles */
.toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle input { opacity: 0; width: 0; height: 0; }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.1);
  transition: .4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 2px;
  background-color: var(--c-9-lavender);
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--c-3-sunset) !important;
}

input:checked + .slider:before {
  transform: translateX(20px);
  background-color: #1C1718;
}

#toggle-auto-captioning:checked + .slider {
  background-color: var(--c-8-frost) !important;
  border-color: var(--c-8-frost) !important;
}

#row-auto-captioning:hover .setting-label {
  color: var(--c-8-frost) !important;
}

/* Success / Render Complete */
.queue-row.completed {
  border-left: 4px solid var(--c-6-mint) !important;
}

/* Premium Indicators */
.premium-option.locked {
  color: var(--c-7-butter) !important;
  font-style: italic;
}

/* Dropdowns */
.pastel-select {
  background-color: var(--bg-input) !important;
  color: var(--c-ivory) !important;
  border: 1px solid var(--c-8-frost) !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
  outline: none !important;
  font-family: inherit !important;
  cursor: pointer !important;
}

/* Watermark Upload Label */
.watermark-upload-row label {
  border: 1px dashed var(--c-5-lilac) !important;
  color: var(--c-5-lilac) !important;
}

/* Testimonial Overflow Control */
.reviews-grid {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  display: flex !important;
  gap: 16px !important;
  padding-bottom: 8px !important;
  scroll-snap-type: x mandatory;
}

.review-card {
  flex: 0 0 280px !important;
  scroll-snap-align: start !important;
}

/* Icon Vector Fill */
svg path, svg rect {
  /* Some items use orchid pink */
}

/* Modal Specifics */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(4px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.modal-overlay.active {
  display: flex;
}

/* Final UI Refinements */
.brand-logo-container {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}

.brand-name {
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  background: linear-gradient(to right, var(--c-ivory), var(--c-2-blossom));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Quicksand', sans-serif !important;
}

.setting-row-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.watermark-upload-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 4px !important;
}

.upload-label {
  font-size: 13px !important;
  padding: 6px 12px !important;
  background: var(--bg-input) !important;
  border: 1px dashed var(--c-5-lilac) !important;
  color: var(--c-5-lilac) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.upload-label:hover {
  background: rgba(212, 197, 217, 0.1) !important;
}

.queue-status-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

#queueETA {
  color: var(--c-3-sunset) !important;
  font-weight: 600 !important;
}

.see-more-btn {
  color: var(--c-1-rose) !important;
  cursor: pointer !important;
  font-size: 12px !important;
  display: block !important;
  margin-top: 4px !important;
}

.modal-close-btn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  background: var(--bg-input) !important;
  border: 1px solid var(--c-1-rose) !important;
  color: var(--c-1-rose) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100 !important;
}

.whop-container {
  margin: 1.5rem 0 !important;
  min-height: 200px !important;
}

#queueContainer {
  display: none; /* Hidden by default, shown by app.js */
}

/* 10-Color Accent Mapping Summary */
/* 1. Rose: h1,h2,h3, .see-more, modal close */
/* 2. Blossom: Primary Buttons, Upgrade Banner */
/* 3. Sunset: Active Toggles, Upgrade Banner, ETA */
/* 4. Sage: Dropzone Border */
/* 5. Lilac: Watermark Upload action */
/* 6. Mint: Success state */
/* 7. Butter: Premium labels */
/* 8. Frost: Dropdown outlines */
/* 9. Lavender: Muted text, Slider inactive */
/* 10. Orchid: (Can be used for icon accents) */

.what-is-this {
  font-size: 11px !important;
  color: #A6959E !important; /* Muted Lavender Grey */
  text-decoration: underline !important;
  cursor: pointer !important;
  margin-top: 2px !important;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.what-is-this:hover {
  opacity: 1 !important;
  color: #ECCBC9 !important; /* Pastel Pink Highlight */
}
.custom-help-overlay {
  display: none;
  position: fixed !important;
  top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important;
  background: rgba(28, 23, 24, 0.85) !important;
  z-index: 99999 !important;
  align-items: center; justify-content: center;
}
.custom-help-content {
  background: #251F21 !important; /* Dark Plum Backing */
  border: 1px solid rgba(208, 160, 163, 0.3) !important;
  padding: 20px !important;
  border-radius: 16px !important;
  width: 90% !important; max-width: 360px !important;
  position: relative !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
}
.custom-help-content h4 {
  color: #F9EEE2 !important; /* Cream Ivory */
  margin: 0 0 8px 0 !important; font-size: 16px !important;
}
.custom-help-content p {
  color: #A6959E !important; font-size: 13px !important; line-height: 1.4 !important; margin: 0 !important;
}
.custom-help-close {
  position: absolute !important; top: 12px !important; right: 16px !important;
  color: #ECCBC9 !important; font-size: 20px !important; cursor: pointer !important;
}