/*
 * SellCopy visual theme — warm mint surfaces, deep green typography and
 * chartreuse actions.  This file only overrides presentation; page structure
 * and application behavior continue to live in the existing modules.
 */
:root {
  --ink: #103f36;
  --muted: #6f7f78;
  --paper: #f6f8f1;
  --green: #103f36;
  --lime: #c8ff2e;
  --coral: #8daf35;
  --line: #dce8de;
  --theme-card: #ffffff;
  --theme-soft: #f0f6ee;
  --theme-border: #d7e5d9;
  --theme-shadow: 0 16px 42px rgba(16, 63, 54, .08);
}

body {
  background: var(--paper);
  color: var(--ink);
}

/* Wider desktop canvas: let every main section use more of the viewport while
 * retaining comfortable gutters and the existing mobile layout. */
.shell {
  max-width: 1480px;
  padding-left: clamp(22px, 2.5vw, 42px);
  padding-right: clamp(22px, 2.5vw, 42px);
}

/* Desktop section alignment: the product and model studios intentionally use
 * the full shell width. Match the other front-page modules to those same left
 * and right edges without changing any spacing inside their cards or forms. */
@media (min-width: 761px) {
  main > .shell:not(.model-studio),
  main > .trust > .shell,
  main > .workspace > .shell,
  main > .video-studio > .shell,
  main > .pricing > .shell {
    padding-left: 0;
    padding-right: 0;
  }
}

.glow.a { background: #c8ff2e; opacity: .22; }
.glow.b { background: #cdebd5; opacity: .28; }
.brand i { color: #709224; }

.cta,
.generate,
.plans .popular button {
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 5px 0 #9fc42b;
}

.preview,
.library-grid article,
.plans article {
  border-color: var(--theme-border);
  box-shadow: 0 12px 32px rgba(16, 63, 54, .06);
}

.trust,
.pricing { background: #edf3e9; }
.feature-grid .pink { background: #f2f8ec; }
.feature-grid .purple { background: #edf6ef; }
.feature-grid .sky { background: #f6f8ed; }
.feature-grid i { color: var(--green) !important; }

/* Copy studio */
.workspace {
  background: var(--paper) !important;
  color: var(--ink) !important;
  box-shadow: 0 0 0 100vmax var(--paper);
  clip-path: inset(0 -100vmax);
}
.workspace .eyebrow,
.workspace h2 { color: var(--ink) !important; }
.workspace .credit {
  background: var(--lime) !important;
  color: var(--ink) !important;
  border-radius: 999px;
  padding: 10px 15px;
}
.workspace .credit b { color: var(--ink) !important; }
.workspace form,
.workspace .results {
  border: 1px solid var(--theme-border);
  border-radius: 18px;
  box-shadow: var(--theme-shadow);
}
.workspace input,
.workspace textarea,
.workspace select {
  border-color: var(--theme-border);
  border-radius: 10px;
  background: #fff;
}

/* Shared image studios */
body #product-ai-image.rebuilt-product-studio,
body #model-ai-image.model-studio,
body #product-copy-ai-image {
  background: var(--paper) !important;
  box-shadow: 0 0 0 100vmax var(--paper) !important;
  clip-path: inset(0 -100vmax);
}

body #product-ai-image .panel,
body #model-ai-image .panel,
body #product-copy-ai-image .panel {
  background: var(--theme-card) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 22px !important;
  box-shadow: var(--theme-shadow);
}

/* Give the two primary image studios a calm inner frame. Runtime module styles
 * intentionally flatten their horizontal padding, so restore balanced gutters
 * here and leave a little more breathing room below the result area. */
body #product-ai-image .panel,
body #model-ai-image .panel {
  box-sizing: border-box;
  padding: clamp(30px, 2.7vw, 42px) !important;
  padding-bottom: clamp(40px, 3.2vw, 52px) !important;
}

body #product-ai-image .panel-head,
body #model-ai-image .panel-head {
  margin-bottom: clamp(22px, 2vw, 30px);
}

body #product-ai-image .image-grid,
body #model-ai-image .image-grid {
  gap: clamp(22px, 2.2vw, 34px) !important;
}

/* The product studio is rebuilt after first paint and receives its own module
 * rules. Pin its final panel geometry to the model studio so both frames keep
 * exactly the same horizontal and bottom breathing room. */
body section#product-ai-image.rebuilt-product-studio > .panel {
  box-sizing: border-box !important;
  width: 100% !important;
  padding: clamp(30px, 2.7vw, 42px) !important;
  padding-bottom: clamp(40px, 3.2vw, 52px) !important;
}

body #product-ai-image h2,
body #model-ai-image h2,
body #product-copy-ai-image h2,
body #product-ai-image label,
body #model-ai-image label,
body #product-copy-ai-image label {
  color: var(--ink) !important;
}

body #product-ai-image .image-badge,
body #model-ai-image .image-badge,
body #product-copy-ai-image .image-badge {
  background: var(--lime) !important;
  color: var(--ink) !important;
  border-radius: 999px !important;
  padding: 9px 13px !important;
}

body #product-ai-image .drop-zone,
body #model-ai-image .drop-zone,
body #product-copy-ai-image .drop-zone,
body #product-ai-image .product-carousel-frame,
body #product-ai-image .clean-carousel,
body #model-ai-image .model-demo-carousel {
  background: #f8fbf5 !important;
  border-color: #c9ddca !important;
}

body #product-ai-image input,
body #product-ai-image textarea,
body #product-ai-image select,
body #model-ai-image input,
body #model-ai-image textarea,
body #model-ai-image select,
body #product-copy-ai-image input,
body #product-copy-ai-image textarea,
body #product-copy-ai-image select {
  border-color: var(--theme-border) !important;
  background: #fff !important;
  color: var(--ink) !important;
  border-radius: 10px !important;
}

/* Upload, generation and tab actions */
body #product-ai-image .model-upload-button,
body #product-ai-image .product-upload-button,
body #product-ai-image .clean-upload-button,
body #product-ai-image .base-tab-photo-upload,
body #product-ai-image .generate-image,
body #product-ai-image .tab-action,
body #model-ai-image .model-upload-button,
body #model-ai-image .base-tab-photo-upload,
body #model-ai-image .model-unified-upload-button,
body #model-ai-image .generate-image,
body #model-ai-image .model-tab-action,
body #product-copy-ai-image .model-upload-button,
body #product-copy-ai-image .base-tab-photo-upload,
body #product-copy-ai-image .model-unified-upload-button,
body #product-copy-ai-image .product-tab-upload-button,
body #product-copy-ai-image .rebuilt-replace-uploads > div > button,
body #product-copy-ai-image .generate-image,
body #product-copy-ai-image .tab-action {
  background: var(--lime) !important;
  color: var(--ink) !important;
  border: 0 !important;
  border-radius: 11px !important;
  box-shadow: 0 8px 18px rgba(154, 194, 36, .22) !important;
}

body #product-ai-image .product-image-tabs button,
body #model-ai-image .model-image-tabs button,
body #product-copy-ai-image .model-image-tabs button,
body #product-ai-image .product-ratio-flat button,
body #product-ai-image .tab-ratios button,
body #model-ai-image .model-ratio-flat button,
body #model-ai-image .model-tab-ratios button,
body #product-copy-ai-image .model-ratio-flat button,
body #product-copy-ai-image .model-tab-ratios button,
body #model-ai-image .model-mode-control button,
body #product-copy-ai-image .model-mode-control button,
body #product-ai-image .mode-control button {
  border-color: var(--theme-border) !important;
  background: #fff !important;
  color: #557168 !important;
}

body #product-ai-image .product-image-tabs button.active,
body #model-ai-image .model-image-tabs button.active,
body #product-copy-ai-image .model-image-tabs button.active,
body #product-ai-image .product-ratio-flat button.selected,
body #product-ai-image .tab-ratios button.selected,
body #model-ai-image .model-ratio-flat button.selected,
body #model-ai-image .model-tab-ratios button.selected,
body #product-copy-ai-image .model-ratio-flat button.selected,
body #product-copy-ai-image .model-tab-ratios button.selected,
body #model-ai-image .model-mode-control button.selected,
body #product-copy-ai-image .model-mode-control button.selected,
body #product-ai-image .mode-control button.selected {
  border-color: #9fc92d !important;
  background: var(--lime) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 1px #9fc92d !important;
}

body #product-ai-image .product-type-grid label,
body #model-ai-image .model-type-grid label,
body #product-copy-ai-image .model-type-grid label,
body #product-ai-image .generation-type-grid label {
  border-color: var(--theme-border) !important;
  background: var(--theme-soft) !important;
}

body #product-ai-image .clean-cases-button,
body #model-ai-image .model-tab-examples-button,
body #product-copy-ai-image .model-tab-examples-button,
body #model-ai-image .model-pose-picker {
  border-color: #afc7b2 !important;
  background: #f7faf5 !important;
  color: var(--green) !important;
}

/* Video studio */
body .video-studio {
  background: var(--paper) !important;
  box-shadow: 0 0 0 100vmax var(--paper) !important;
}
.video-panel {
  background: rgba(255, 255, 255, .92) !important;
  border-color: var(--theme-border) !important;
  border-radius: 22px !important;
  box-shadow: var(--theme-shadow);
}
.video-head h2,
.video-form label,
.video-options b,
.video-result h3 { color: var(--ink) !important; }
.video-head p:last-child,
.video-ratio-note,
.video-result p { color: var(--muted) !important; }
.video-badge {
  background: var(--lime) !important;
  color: var(--ink) !important;
}
.video-drop-zone,
.video-result-preview {
  border-color: #c7ddc9 !important;
  background: #f8fbf5 !important;
  color: var(--green) !important;
}
.video-upload-icon { background: #e9f3e6 !important; color: var(--green); }
.video-form textarea {
  border-color: var(--theme-border) !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
}
.video-choice button {
  border-color: var(--theme-border) !important;
  background: #fff !important;
  color: #587067 !important;
}
.video-choice button.selected {
  border-color: #9fc92d !important;
  background: var(--lime) !important;
  color: var(--ink) !important;
}
.generate-video {
  background: var(--lime) !important;
  color: var(--ink) !important;
  box-shadow: 0 8px 18px rgba(154, 194, 36, .22);
}
.video-result {
  border-color: var(--theme-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px rgba(16, 63, 54, .05);
}
.video-result-play { background: rgba(200, 255, 46, .94) !important; }
.video-result-play svg { fill: var(--ink) !important; }
.video-result a {
  background: var(--lime) !important;
  color: var(--ink) !important;
}

@media (max-width: 760px) {
  .shell {
    padding-left: 18px;
    padding-right: 18px;
  }

  body #product-ai-image .panel,
  body #model-ai-image .panel,
  body #product-copy-ai-image .panel,
  .video-panel { border-radius: 16px !important; }

  body section#product-ai-image.rebuilt-product-studio > .panel,
  body #model-ai-image .panel {
    padding: 22px 20px 30px !important;
  }
}

/* primary-image-actions-pointer-v1 */
body #model-ai-image .model-tab-pane[data-tab="base"] .generate-image:not(:disabled),
body #model-ai-image .model-tab-pane[data-tab="base"] .model-tab-action:not(:disabled),
body #product-copy-ai-image .model-tab-pane[data-tab="base"] .generate-image:not(:disabled),
body #product-copy-ai-image .model-tab-pane[data-tab="base"] .model-tab-action:not(:disabled) {
 cursor: pointer !important;
}