/* ============ Admin: Collapsible Category Sections ============ */
.coc-section-hdr td {
  padding: 12px 16px !important;
  background: #f0f0f1;
  border-top: 2px solid #2271b1;
  cursor: pointer;
  user-select: none;
}
.coc-section-hdr td:hover { background: #e5e5e6; }
.coc-section-hdr .coc-sec-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #1d2327;
  margin: 0;
  line-height: 1.4;
}
.coc-section-hdr .coc-sec-arrow {
  font-size: 12px;
  transition: transform .2s;
  display: inline-block;
  width: 16px;
  text-align: center;
}
.coc-section-hdr.coc-collapsed .coc-sec-arrow { transform: rotate(-90deg); }
.coc-section-hdr .coc-sec-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: 10px;
  background: #e0e0e0;
  color: #555;
  margin-left: auto;
}
.coc-section-hdr .coc-sec-badge.coc-badge-ok {
  background: #d1fae5;
  color: #065f46;
}
tr.coc-sec-row { transition: none; }
tr.coc-sec-row.coc-hidden { display: none !important; }

/* Compact inline field grid */
.coc-inline-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.coc-inline-fields label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
}
.coc-inline-fields input {
  width: 100%;
  max-width: 220px;
}
.coc-inline-fields .description {
  font-size: 11px;
  margin-top: 2px;
}

/* Conditional row (warp strength, text curve) */
tr.coc-conditional { transition: none; }
tr.coc-conditional.coc-hidden { display: none !important; }

/* Add-form collapsible sections (div-based) */
.coc-add-section { margin-bottom: 4px; }
.coc-add-sec-hdr {
  padding: 10px 14px;
  background: #f0f0f1;
  border-top: 2px solid #2271b1;
  font-size: 14px;
  font-weight: 600;
  color: #1d2327;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.coc-add-sec-hdr:hover { background: #e5e5e6; }
.coc-add-sec-hdr .coc-sec-arrow {
  font-size: 12px;
  transition: transform .2s;
  display: inline-block;
}
.coc-add-collapsed > .coc-add-sec-hdr .coc-sec-arrow { transform: rotate(-90deg); }
.coc-add-collapsed > .coc-add-sec-body { display: none; }
.coc-add-sec-body { padding: 8px 0; }

/* Static image preview thumbnails */
.coc-static-preview {
  display: block;
  margin-top: 6px;
  max-width: 120px;
  max-height: 80px;
  border-radius: 4px;
  border: 1px solid #ddd;
  object-fit: cover;
  background: #f9f9f9;
}

                                    /* ============ Shortcode Section Heading ============ */
                                    .coc-ext-shortcode-heading {
                                      font-size: 24px;
                                      font-weight: 500;
                                      color: #111827;
                                      margin: 0 0 16px 0;
                                      padding-top: 15px;
                                      line-height: 1.3;
                                    }

                                    /* ============ Figma-Style Design System ============ */
                                    :root {
                                      --color-primary: #0b3fc8;
                                      --color-primary-hover: #0932a3;
                                      --color-success: #10B981;
                                      --color-success-hover: #059669;
                                      --color-bg: #F9FAFB;
                                      --color-surface: #FFFFFF;
                                      --color-border: #E5E7EB;
                                      --color-border-hover: #D1D5DB;
                                      --color-text: #111827;
                                      --color-text-secondary: #6B7280;
                                      --color-text-tertiary: #9CA3AF;
                                      --radius: 10px;
                                      --radius-lg: 12px;
                                      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
                                      --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                                      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
                                    }

                                    .coc-ext-root {
                                      display: block;
                                      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Roboto', sans-serif;
                                      color: var(--color-text);
                                      line-height: 1.5;
                                      -webkit-font-smoothing: antialiased;
                                    }
                                    .coc-ext-hidden { display: none; }

                                    /* ============ Categories Grid ============ */
                                    .coc-ext-categories {
                                      display: grid;
                                      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                                      gap: 20px;
                                      padding: 8px 0;
                                    }

                                    .coc-ext-cat-card {
                                      cursor: pointer;
                                      border: 1px solid var(--color-border);
                                      border-radius: var(--radius-lg);
                                      overflow: hidden;
                                      background: var(--color-surface);
                                      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
                                    }

                                    .coc-ext-cat-card:hover,
                                    .coc-ext-cat-card:focus {
                                      border-color: var(--color-border-hover);
                                      box-shadow: var(--shadow-lg);
                                      transform: translateY(-2px);
                                      outline: none;
                                    }

                                    .coc-ext-cat-thumb {
                                      background: var(--color-bg) center/cover no-repeat;
                                      height: 310px;
                                      border-bottom: 1px solid var(--color-border);
                                    }

                                    .coc-ext-cat-meta {
                                      padding: 20px;
                                      display: flex;
                                      flex-direction: column;
                                      gap: 8px;
                                    }

                                    .coc-ext-cat-title-row {
                                      display: flex;
                                      align-items: center;
                                      gap: 10px;
                                      flex-wrap: wrap;
                                    }

                                    .coc-ext-cat-title {
                                      font-weight: 600;
                                      font-size: 16px;
                                      color: var(--color-text);
                                    }

                                    .coc-ext-style-pill {
                                      background: #EEF2FF;
                                      color: var(--color-primary);
                                      font-size: 10px;
                                      font-weight: 600;
                                      padding: 4px 8px;
                                      border-radius: 6px;
                                      text-transform: uppercase;
                                      letter-spacing: 0.5px;
                                    }

                                    .coc-ext-cat-desc {
                                      font-size: 14px;
                                      color: var(--color-text-secondary);
                                      line-height: 1.5;
                                    }

                                    /* ============ Unified Top Bar (Figma-style) ============ */
                                    .coc-ext-unified-bar {
                                      display: flex;
                                      justify-content: space-between;
                                      align-items: center;
                                      gap: 16px;
                                      padding: 12px 16px;
                                      background: var(--color-surface);
                                      border: 1px solid #C7C8C8;
                                      border-radius: var(--radius-lg);
                                      margin-bottom: 24px;
                                      box-shadow: var(--shadow-sm);
                                      flex-wrap: wrap;
                                    }

                                    @media (min-width: 1024px) {
                                      .coc-ext-unified-bar {
                                        flex-wrap: nowrap;
                                      }
                                    }

                                    .coc-ext-bar-left,
                                    .coc-ext-bar-right {
                                      display: flex;
                                      align-items: center;
                                      gap: 12px;
                                      flex-wrap: nowrap;
                                    }

                                    .coc-ext-bar-left {
                                      flex: 0 1 auto;
                                    }

                                    .coc-ext-bar-right {
                                      flex: 0 1 auto;
                                      margin-left: auto;
                                    }

                                    .coc-ext-bar-divider {
                                      width: 1px;
                                      height: 24px;
                                      background: var(--color-border);
                                    }

                                    /* Back Button */
                                    .coc-ext-backbtn {
                                      display: inline-flex;
                                      align-items: center;
                                      gap: 6px;
                                      background: transparent;
                                      color: var(--color-text-secondary);
                                      border: none;
                                      padding: 8px 12px;
                                      border-radius: var(--radius);
                                      font-weight: 500;
                                      font-size: 14px;
                                      cursor: pointer;
                                      transition: all 0.15s ease;
                                      margin: 0;
                                      white-space: nowrap;
                                      line-height: 1;
                                    }

                                    .coc-ext-backbtn:hover {
                                      background: var(--color-bg);
                                      color: var(--color-text);
                                    }

                                    .coc-ext-backbtn svg {
                                      width: 16px;
                                      height: 16px;
                                      flex-shrink: 0;
                                    }

                                    /* Select All Checkbox */
                                    .coc-ext-select-wrap {
                                      display: flex;
                                      align-items: center;
                                      gap: 8px;
                                      font-size: 14px;
                                      color: var(--color-text);
                                      font-weight: 500;
                                      cursor: pointer;
                                      user-select: none;
                                      padding: 8px 12px;
                                      border-radius: var(--radius);
                                      transition: background 0.15s ease;
                                      margin: 0;
                                      height: auto;
                                      white-space: nowrap;
                                    }

                                    .coc-ext-select-wrap:hover {
                                      background: var(--color-bg);
                                    }

                                    .coc-ext-select-wrap input[type="checkbox"] {
                                      width: 16px;
                                      height: 16px;
                                      cursor: pointer;
                                      accent-color: var(--color-primary);
                                      border-radius: 4px;
                                      margin: 0;
                                      flex-shrink: 0;
                                    }

                                    .coc-ext-select-wrap span {
                                      flex-shrink: 0;
                                    }

                                    .coc-ext-select-all {
                                      width: 16px;
                                      height: 16px;
                                      cursor: pointer;
                                      accent-color: var(--color-primary);
                                      border-radius: 4px;
                                      margin: 0;
                                      flex-shrink: 0;
                                    }

                                    /* Price Section */
                                    .coc-ext-price-group {
                                      display: flex;
                                      align-items: center;
                                      gap: 8px;
                                    }

                                    .coc-ext-price-label {
                                      font-weight: 500;
                                      color: var(--color-text-secondary);
                                      font-size: 13px;
                                      white-space: nowrap;
                                      display: flex;
                                      align-items: center;
                                      gap: 6px;
                                    }

                                    /* Info Icon Wrapper for Tooltip */
                                    .coc-ext-info-icon-wrapper {
                                      position: relative;
                                      display: inline-flex;
                                      align-items: center;
                                      cursor: help;
                                    }

                                    .coc-ext-info-icon {
                                      color: var(--color-text-tertiary);
                                      flex-shrink: 0;
                                      transition: color 0.15s ease;
                                    }

                                    .coc-ext-info-icon-wrapper:hover .coc-ext-info-icon {
                                      color: var(--color-primary);
                                    }

                                    /* Custom Tooltip */
                                    .coc-ext-info-icon-wrapper::before {
                                      content: attr(data-tooltip);
                                      position: absolute;
                                      bottom: calc(100% + 8px);
                                      left: 50%;
                                      transform: translateX(-50%);
                                      background: #ffffff;
                                      color: #374151;
                                      padding: 12px 16px;
                                      border-radius: 8px;
                                      font-size: 12px;
                                      line-height: 1.5;
                                      width: max-content;
                                      max-width: 320px;
                                      white-space: pre-line;
                                      text-align: left;
                                      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0,0,0,0.05);
                                      opacity: 0;
                                      visibility: hidden;
                                      transition: opacity 0.2s ease, visibility 0.2s ease;
                                      pointer-events: none;
                                      z-index: 1000;
                                      font-weight: 400;
                                    }

                                    /* Tooltip Arrow */
                                    .coc-ext-info-icon-wrapper::after {
                                      content: '';
                                      position: absolute;
                                      bottom: calc(100% + 2px);
                                      left: 50%;
                                      transform: translateX(-50%);
                                      border: 6px solid transparent;
                                      border-top-color: var(--color-text);
                                      opacity: 0;
                                      visibility: hidden;
                                      transition: opacity 0.2s ease, visibility 0.2s ease;
                                      pointer-events: none;
                                      z-index: 1001;
                                    }

                                    /* Show Tooltip on Hover */
                                    .coc-ext-info-icon-wrapper:hover::before,
                                    .coc-ext-info-icon-wrapper:hover::after {
                                      opacity: 1;
                                      visibility: visible;
                                    }

                                    .coc-ext-price-input-wrapper {
                                      display: flex;
                                      align-items: center;
                                      background: var(--color-bg);
                                      border: 1px solid var(--color-border);
                                      border-radius: var(--radius);
                                      overflow: hidden;
                                      transition: all 0.15s ease;
                                    }

                                    .coc-ext-price-input-wrapper:focus-within {
                                      border-color: var(--color-primary);
                                      box-shadow: 0 0 0 3px rgba(11, 63, 200, 0.1);
                                    }

                                    .coc-ext-price-dollar {
                                      display: flex;
                                      align-items: center;
                                      padding: 0 8px;
                                      color: var(--color-text-tertiary);
                                      font-weight: 500;
                                      font-size: 14px;
                                      user-select: none;
                                    }

                                    .coc-ext-price-input {
                                      border: none !important;
                                      padding: 6px 8px;
                                      width: 70px;
                                      outline: none;
                                      background: transparent;
                                      color: var(--color-text) !important;
                                      text-align: center;
                                      font-size: 14px !important;
                                      font-weight: 500;
                                    }

                                    .coc-ext-price-input::-webkit-outer-spin-button,
                                    .coc-ext-price-input::-webkit-inner-spin-button {
                                      -webkit-appearance: none;
                                      margin: 0;
                                    }

                                    .coc-ext-price-input[type="number"] {
                                      -moz-appearance: textfield;
                                      appearance: textfield;
                                    }

                                    /* Save Price Button */
                                    .coc-ext-save-price {
                                      background: var(--color-success) !important;
                                      color: white !important;
                                      padding: 6px 14px !important;
                                      font-size: 13px !important;
                                      font-weight: 500 !important;
                                      border: none !important;
                                      border-radius: var(--radius) !important;
                                      cursor: pointer;
                                      transition: all 0.15s ease;
                                      white-space: nowrap;
                                    }

                                    .coc-ext-save-price:hover {
                                      background: var(--color-success-hover) !important;
                                      transform: translateY(-1px);
                                    }

                                    /* Publish Button */
                                    .coc-ext-publish-selected {
                                      display: inline-flex;
                                      align-items: center;
                                      gap: 6px;
                                      background: #2563EB;
                                      color: white;
                                      border: none;
                                      padding: 8px 16px;
                                      border-radius: var(--radius);
                                      font-weight: 500;
                                      font-size: 14px;
                                      cursor: pointer;
                                      transition: all 0.15s ease;
                                    }

                                    .coc-ext-publish-selected:hover:not(:disabled) {
                                      background: var(--color-primary-hover);
                                      transform: translateY(-1px);
                                    }

                                    .coc-ext-publish-selected:disabled {
                                      opacity: 0.5;
                                      cursor: not-allowed;
                                      transform: none;
                                    }

                                    .coc-ext-publish-selected svg {
                                      width: 16px;
                                      height: 16px;
                                    }

                                    .coc-ext-publish {
                                      display: inline-flex;
                                      align-items: center;
                                      gap: 6px;
                                      background: var(--color-primary);
                                      color: white;
                                      border: none;
                                      padding: 8px 16px;
                                      border-radius: var(--radius);
                                      font-weight: 500;
                                      font-size: 14px;
                                      cursor: pointer;
                                      transition: all 0.15s ease;
                                    }

                                    .coc-ext-publish:hover:not(:disabled) {
                                      background: var(--color-primary-hover);
                                      transform: translateY(-1px);
                                    }

                                    .coc-ext-publish:disabled {
                                      opacity: 0.5;
                                      cursor: not-allowed;
                                      transform: none;
                                    }

                                    /* Trademark Check Button (Unified Bar) */
                                    .coc-ext-trademark-check-btn {
                                      display: inline-flex;
                                      align-items: center;
                                      gap: 6px;
                                      background: #eff6ff;
                                      color: #3b73ed;
                                      border: 1px solid #3b73ed;
                                      padding: 8px 16px;
                                      border-radius: var(--radius);
                                      font-weight: 500;
                                      font-size: 14px;
                                      cursor: pointer;
                                      transition: all 0.15s ease;
                                      white-space: nowrap;
                                    }

                                    .coc-ext-trademark-check-btn:hover:not(:disabled) {
                                      background: #EFF6FF7D;
                                      transform: translateY(-1px);
                                    }

                                    .coc-ext-trademark-check-btn:disabled {
                                      opacity: 0.5;
                                      cursor: not-allowed;
                                      transform: none;
                                    }

                                    .coc-ext-trademark-check-btn svg {
                                      width: 16px;
                                      height: 16px;
                                    }

                                    /* Trademark Check Button (Old) */
                                    .coc-ext-tm-selected {
                                      display: inline-flex;
                                      align-items: center;
                                      gap: 6px;
                                      background: #3B82F6;
                                      color: white;
                                      border: none;
                                      padding: 8px 16px;
                                      border-radius: var(--radius);
                                      font-weight: 500;
                                      font-size: 14px;
                                      cursor: pointer;
                                      transition: all 0.15s ease;
                                    }

                                    .coc-ext-tm-selected:hover:not(:disabled) {
                                      background: #2563EB;
                                      transform: translateY(-1px);
                                    }

                                    .coc-ext-tm-selected:disabled {
                                      opacity: 0.5;
                                      cursor: not-allowed;
                                    }

                                    /* ============ Dropzone ============ */
                                    .coc-ext-dropzone {
                                      position: relative;
                                      border: 2px dashed blue;
                                      border-radius: var(--radius-lg);
                                      padding: 60px 32px;
                                      text-align: center;
                                      background: #EFF6FF82;
                                      cursor: pointer;
                                      transition: all 0.2s ease;
                                      margin-bottom: 24px;
                                    }

                                    .coc-ext-dropzone:hover {
                                      border-color: var(--color-primary);
                                      background: #FAFAFF;
                                    }

                                    .coc-ext-dropzone.drag {
                                      background: #F0F0FF;
                                      border-color: var(--color-primary);
                                      box-shadow: 0 0 0 4px rgba(11, 63, 200, 0.1);
                                    }

                                    .coc-ext-file {
                                      position: absolute;
                                      inset: 0;
                                      opacity: 0;
                                      pointer-events: none;
                                    }

                                    .coc-ext-drop-icon {
                                      margin: 0 auto 16px;
                                      width: 48px;
                                      height: 48px;
                                      color: var(--color-text-tertiary);
                                    }

                                    .coc-ext-drop-icon svg {
                                      width: 100%;
                                      height: 100%;
                                    }

                                    .coc-ext-dropzone:hover .coc-ext-drop-icon {
                                      color: var(--color-primary);
                                    }

                                    .coc-ext-h1 {
                                      font-size: 20px;
                                      font-weight: 600;
                                      color: var(--color-text);
                                      margin-bottom: 8px;
                                    }

                                    .coc-ext-badge {
                                      display: inline-block;
                                      margin: 0 0 12px;
                                      background: #EEF2FF;
                                      color: var(--color-primary);
                                      border-radius: 6px;
                                      padding: 4px 12px;
                                      font-size: 12px;
                                      font-weight: 600;
                                      text-transform: uppercase;
                                      letter-spacing: 0.5px;
                                    }

                                    .coc-ext-sub {
                                      color: var(--color-text-secondary);
                                      font-size: 14px;
                                    }

                                    /* ============ Product Grid ============ */
                                    .coc-ext-grid {
                                      display: grid;
                                      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
                                      gap: 20px;
                                    }

                                    .coc-ext-item {
                                      border: 1px solid var(--color-border);
                                      border-radius: var(--radius-lg);
                                      background: var(--color-surface);
                                      overflow: hidden;
                                      position: relative;
                                      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
                                      cursor: pointer;
                                      display: flex;
                                      flex-direction: column;
                                      min-height: 0;
                                    }

                                    .coc-ext-item:hover {
                                      box-shadow: var(--shadow-lg);
                                      transform: translateY(-2px);
                                      border-color: var(--color-border-hover);
                                    }

                                    .coc-ext-item.coc-ext-error {
                                      border-color: #EF4444;
                                      background: #FEF2F2;
                                    }

                                    .coc-ext-item.coc-ext-error:hover {
                                      border-color: #DC2626;
                                      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
                                    }

                                    .coc-ext-thumb {
                                      height: 310px;
                                      background: var(--color-bg);
                                      display: flex;
                                      align-items: center;
                                      justify-content: center;
                                      overflow: hidden;
                                      border-bottom: 1px solid var(--color-border);
                                      position: relative;
                                      flex-shrink: 0;
                                    }

                                    .coc-ext-thumb img {
                                      width: 100%;
                                      height: 100%;
                                      object-fit: cover;
                                      transition: transform 0.3s ease;
                                    }

                                    .coc-ext-item:hover .coc-ext-thumb img {
                                      transform: scale(1.03);
                                    }

                                    .coc-ext-thumb.coc-ext-loading {
                                      position: relative;
                                    }

                                    .coc-ext-loading .coc-ext-spinner {
                                      width: 32px;
                                      height: 32px;
                                      border: 3px solid rgba(255,255,255,0.3);
                                      border-top-color: var(--color-primary);
                                      border-radius: 50%;
                                      animation: spin 0.8s linear infinite;
                                      position: absolute;
                                      top: 0;
                                      left: 0;
                                      right: 0;
                                      bottom: 0;
                                      margin: auto;
                                      z-index: 10;
                                    }

.coc-ext-loading img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

                                    .coc-ext-name {
                                      padding: 16px;
                                      font-size: 14px;
                                      color: var(--color-text);
                                      line-height: 1.4;
                                      font-weight: 500;
                                      flex: 1 1 auto;
                                      min-height: 0;
                                    }

.coc-ext-status-text {
  font-size: 12px;
  color: var(--color-primary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.coc-ext-status-text::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: 50%;
  animation: statusPulse 1s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

                                    @keyframes spin {
                                      to { transform: rotate(360deg); }
                                    }

                                    /* Checkbox */
                                    .coc-ext-check {
                                      position: absolute;
                                      top: 12px;
                                      left: 12px;
                                      z-index: 10;
                                      display: flex;
                                      align-items: center;
                                      background: rgba(255, 255, 255, 0.95);
                                      backdrop-filter: blur(10px);
                                      border: 1px solid var(--color-border);
                                      border-radius: 8px;
                                      padding: 6px 8px;
                                      box-shadow: var(--shadow-md);
                                      transition: all 0.15s ease;
                                    }

                                    .coc-ext-check:hover {
                                      background: white;
                                      box-shadow: var(--shadow-lg);
                                    }

                                    .coc-ext-check input {
                                      width: 16px;
                                      height: 16px;
                                      cursor: pointer;
                                      accent-color: var(--color-primary);
                                    }

                                    .coc-ext-select {
                                      width: 16px;
                                      height: 16px;
                                      cursor: pointer;
                                      accent-color: var(--color-primary);
                                      border-radius: 4px;
                                      margin: 0;
                                    }

                                    .coc-ext-select:disabled {
                                      opacity: 0.5;
                                      cursor: not-allowed;
                                    }

                                    /* Published Chip */
                                    .coc-ext-mini-chip {
                                      position: absolute;
                                      top: 12px;
                                      right: 12px;
                                      font-size: 11px;
                                      font-weight: 600;
                                      padding: 4px 10px;
                                      border-radius: 6px;
                                      background: #D1FAE5;
                                      color: #065F46;
                                      border: 1px solid #A7F3D0;
                                      box-shadow: var(--shadow-sm);
                                    }

                                    /* Progress Status */
                                    .coc-ext-status {
                                      padding: 12px 16px;
                                      border-top: 1px solid var(--color-border);
                                      display: grid;
                                      gap: 10px;
                                      background: var(--color-bg);
                                      margin-top: auto;
                                      flex-shrink: 0;
                                    }

                                    /* Published state - no green border, only progress bar is green */
                                    /* Green border removed - only progress bar shows green when published */

                                    /* Step Indicator Progress Bar */
                                    .coc-ext-progress {
                                      width: 100%;
                                      position: relative;
                                    }

                                    /* Step Indicators */
                                    .coc-ext-progress-steps {
                                      display: flex;
                                      justify-content: space-between;
                                      align-items: center;
                                      margin-top: 8px;
                                      position: relative;
                                      padding: 0 4px;
                                    }

                                    .coc-ext-progress-step {
                                      flex: 1;
                                      display: flex;
                                      flex-direction: column;
                                      align-items: center;
                                      gap: 4px;
                                      position: relative;
                                    }

                                    .coc-ext-progress-step::before {
                                      content: '';
                                      position: absolute;
                                      top: 8px;
                                      left: 50%;
                                      right: -50%;
                                      height: 2px;
                                      background: var(--color-border);
                                      z-index: 0;
                                    }

                                    .coc-ext-progress-step:last-child::before {
                                      display: none;
                                    }

                                    .coc-ext-progress-step.active::before {
                                      background: var(--color-primary);
                                    }

                                    .coc-ext-progress-step.completed::before {
                                      background: var(--color-success);
                                    }

                                    .coc-ext-step-dot {
                                      width: 16px;
                                      height: 16px;
                                      border-radius: 50%;
                                      background: var(--color-border);
                                      border: 2px solid var(--color-surface);
                                      position: relative;
                                      z-index: 1;
                                      transition: all 0.3s ease;
                                      flex-shrink: 0;
                                    }

                                    .coc-ext-progress-step.active .coc-ext-step-dot {
                                      background: var(--color-primary);
                                      border-color: var(--color-primary);
                                      box-shadow: 0 0 0 4px rgba(11, 63, 200, 0.1);
                                      animation: stepPulse 1.5s ease-in-out infinite;
                                    }

                                    .coc-ext-progress-step.completed .coc-ext-step-dot {
                                      background: var(--color-success);
                                      border-color: var(--color-success);
                                    }

                                    .coc-ext-progress-step.completed .coc-ext-step-dot::after {
                                      content: '✓';
                                      position: absolute;
                                      top: 50%;
                                      left: 50%;
                                      transform: translate(-50%, -50%);
                                      color: white;
                                      font-size: 10px;
                                      font-weight: bold;
                                      line-height: 1;
                                    }

                                    .coc-ext-step-label {
                                      font-size: 10px;
                                      color: var(--color-text-tertiary);
                                      text-align: center;
                                      white-space: nowrap;
                                      overflow: hidden;
                                      text-overflow: ellipsis;
                                      max-width: 100%;
                                      transition: color 0.3s ease;
                                    }

                                    .coc-ext-progress-step.active .coc-ext-step-label {
                                      color: var(--color-primary);
                                      font-weight: 600;
                                    }

                                    .coc-ext-progress-step.completed .coc-ext-step-label {
                                      color: var(--color-success);
                                    }


                                    .coc-ext-status-text {
                                      font-size: 13px;
                                      color: var(--color-text-secondary);
                                      font-weight: 500;
                                      text-align: center;
                                    }

                                    .coc-ext-item[data-published="1"] .coc-ext-status-text {
                                      color: var(--color-success);
                                      font-weight: 600;
                                    }

                                    @keyframes stepPulse {
                                      0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(11, 63, 200, 0.1); }
                                      50% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(11, 63, 200, 0.15); }
                                    }

                                    @keyframes slideInRight {
                                      from {
                                        transform: translateX(100%);
                                        opacity: 0;
                                      }
                                      to {
                                        transform: translateX(0);
                                        opacity: 1;
                                      }
                                    }

                                    /* ============ Modal ============ */
                                    .coc-ext-modal {
                                      position: fixed;
                                      inset: 0;
                                      background: rgba(0, 0, 0, 0.5);
                                      display: flex;
                                      align-items: center;
                                      justify-content: center;
                                      z-index: 9999;
                                      padding: 20px;
                                      backdrop-filter: blur(4px);
                                    }

                                    .coc-ext-modal-inner.no-scroll {
                                      background: var(--color-surface);
                                      border-radius: var(--radius-lg);
                                      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
                                      max-width: 1200px;
                                      width: 100%;
                                      max-height: 90vh;
                                      position: relative;
                                      display: grid;
                                      grid-template-columns: 45% 55%;
                                      grid-template-rows: minmax(0, 1fr);
                                      gap: 0;
                                      overflow: hidden;
                                    }

                                    .coc-ext-modal-inner.no-scroll .coc-ext-modal-body {
                                      display: contents;
                                    }

                                    .coc-ext-close {
                                      position: absolute;
                                      top: 24px;
                                      right: 24px;
                                      background: var(--color-surface);
                                      border: 1px solid var(--color-border);
                                      font-size: 20px;
                                      cursor: pointer;
                                      z-index: 20;
                                      color: var(--color-text-secondary);
                                      width: 36px;
                                      height: 36px;
                                      display: flex;
                                      align-items: center;
                                      justify-content: center;
                                      border-radius: var(--radius);
                                      transition: all 0.15s ease;
                                      box-shadow: var(--shadow-sm);
                                    }

                                    .coc-ext-close:hover {
                                      background: var(--color-bg);
                                      color: var(--color-text);
                                    }

                                    .coc-ext-modal-topbar { display: none; }

                                    /* Modal Left */
                                    .coc-ext-left {
                                      padding: 32px;
                                      display: flex;
                                      flex-direction: column;
                                      justify-content: flex-start;
                                      align-items: center;
                                      gap: 16px;
                                      background: var(--color-bg);
                                      border-right: 1px solid var(--color-border);
                                    }

                                    .coc-ext-main {
                                      width: 100%;
                                      max-width: 450px;
                                      margin-bottom: 0;
                                    }

                                    .coc-ext-main img {
                                      width: 100%;
                                      height: auto;
                                      border-radius: var(--radius);
                                      object-fit: contain;
                                    }

                                    .coc-ext-rail {
                                      display: flex;
                                      flex-wrap: wrap;
                                      gap: 10px;
                                      justify-content: center;
                                      width: 100%;
                                      max-width: 450px;
                                      padding: 4px 0 0;
                                    }

                                    .coc-ext-rail img {
                                      width: 60px;
                                      height: 60px;
                                      min-width: 60px;
                                      flex-shrink: 0;
                                      border-radius: var(--radius);
                                      cursor: pointer;
                                      border: 2px solid transparent;
                                      transition: all 0.15s ease;
                                      object-fit: cover;
                                      background: var(--color-surface);
                                    }

                                    .coc-ext-rail img:hover,
                                    .coc-ext-rail img.active {
                                      border-color: var(--color-primary);
                                    }

                                    .coc-ext-rail-thumb {
                                      width: 60px;
                                      height: 60px;
                                      min-width: 60px;
                                      flex-shrink: 0;
                                      border-radius: var(--radius);
                                      cursor: pointer;
                                      border: 2px solid transparent;
                                      transition: all 0.15s ease;
                                      object-fit: cover;
                                      background: var(--color-surface);
                                      display: block;
                                    }

                                    .coc-ext-rail-thumb:hover,
                                    .coc-ext-rail-thumb.active {
                                      border-color: var(--color-primary);
                                    }

                                    /* Rail item wrapper — hosts the thumb plus the
                                       cover badge and the "Set as cover" hover button. */
                                    .coc-ext-rail-item {
                                      position: relative;
                                      width: 60px;
                                      min-width: 60px;
                                      flex-shrink: 0;
                                    }

                                    .coc-ext-rail-item.is-cover .coc-ext-rail-thumb {
                                      border-color: #1652f0;
                                      box-shadow: 0 0 0 1px rgba(22, 82, 240, .35);
                                    }

                                    .coc-ext-cover-badge {
                                      position: absolute;
                                      top: 4px;
                                      left: 4px;
                                      padding: 2px 6px;
                                      font-size: 9px;
                                      font-weight: 700;
                                      letter-spacing: .06em;
                                      text-transform: uppercase;
                                      color: #fff;
                                      background: #1652f0;
                                      border-radius: 4px;
                                      box-shadow: 0 1px 2px rgba(11, 16, 32, .25);
                                      pointer-events: none;
                                      line-height: 1;
                                    }

                                    .coc-ext-static-badge {
                                      position: absolute;
                                      top: 4px;
                                      left: 4px;
                                      padding: 2px 6px;
                                      font-size: 9px;
                                      font-weight: 700;
                                      letter-spacing: .06em;
                                      text-transform: uppercase;
                                      color: #fff;
                                      background: rgba(31, 41, 55, .82);
                                      border-radius: 4px;
                                      pointer-events: none;
                                      line-height: 1;
                                    }

                                    .coc-ext-set-cover {
                                      position: absolute;
                                      inset: 0;
                                      width: 100%;
                                      height: 100%;
                                      display: flex;
                                      align-items: center;
                                      justify-content: center;
                                      padding: 0 4px;
                                      font-size: 10px;
                                      font-weight: 600;
                                      letter-spacing: .01em;
                                      text-align: center;
                                      color: #fff;
                                      background: rgba(11, 16, 32, .72);
                                      backdrop-filter: blur(2px);
                                      -webkit-backdrop-filter: blur(2px);
                                      border: 0;
                                      border-radius: var(--radius);
                                      cursor: pointer;
                                      opacity: 0;
                                      transition: opacity .15s ease;
                                      line-height: 1.2;
                                      font-family: inherit;
                                    }

                                    .coc-ext-rail-item:hover .coc-ext-set-cover {
                                      opacity: 1;
                                    }

                                    .coc-ext-set-cover:hover {
                                      background: #1652f0;
                                    }

                                    .coc-ext-set-cover:focus-visible {
                                      opacity: 1;
                                      outline: 2px solid #1652f0;
                                      outline-offset: 2px;
                                    }

                                    /* Modal Right */
                                    .coc-ext-right {
                                      padding: 32px;
                                      padding-top: 40px;
                                      display: flex;
                                      flex-direction: column;
                                      gap: 20px;
                                      background: var(--color-surface);
                                      overflow-y: auto;
                                      /* min-height:0 is required for overflow to actually engage
                                         inside a CSS grid / flex item (default is min-content). */
                                      min-height: 0;
                                      max-height: 90vh;
                                      scrollbar-width: thin;
                                      scrollbar-color: var(--color-border) transparent;
                                    }

                                    .coc-ext-left {
                                      /* Same min-height:0 fix so the left column never pushes the
                                         modal past its max-height when images are tall. */
                                      min-height: 0;
                                      max-height: 90vh;
                                      overflow-y: auto;
                                    }

                                    .coc-ext-right::-webkit-scrollbar {
                                      width: 8px;
                                    }

                                    .coc-ext-right::-webkit-scrollbar-track {
                                      background: transparent;
                                    }

                                    .coc-ext-right::-webkit-scrollbar-thumb {
                                      background: var(--color-border);
                                      border-radius: 4px;
                                    }

                                    .coc-ext-section {
                                      margin-bottom: 0;
                                      padding: 0;
                                    }

                                    .coc-ext-section:not(:last-child) {
                                      margin-bottom: 0;
                                      padding-bottom: 0;
                                    }

                                    .coc-ext-section:not(:first-child) {
                                      margin-top: 24px;
                                    }

                                    .coc-ext-label {
                                      display: block;
                                      font-size: 11px;
                                      font-weight: 600;
                                      color: var(--color-text-secondary);
                                      text-transform: uppercase;
                                      letter-spacing: 1px;
                                      margin-bottom: 8px;
                                      margin-top: 0;
                                    }

                                    .coc-ext-title {
                                      font-size: 18px;
                                      font-weight: 600;
                                      color: var(--color-text);
                                      line-height: 1.3;
                                      margin: 0;
                                      padding-right: 50px;
                                      word-wrap: break-word;
                                      overflow-wrap: break-word;
                                    }

                                    .coc-ext-tags {
                                      display: flex;
                                      flex-wrap: wrap;
                                      gap: 8px;
                                    }

                                    .coc-ext-tag-pill {
                                      background: var(--color-bg);
                                      color: var(--color-text-secondary);
                                      padding: 4px 8px;
                                      border-radius: 6px;
                                      font-size: 12px;
                                      font-weight: 500;
                                      border: 1px solid var(--color-border);
                                      transition: all 0.15s ease;
                                    }

                                    .coc-ext-tag-pill:hover {
                                      border-color: var(--color-primary);
                                      color: var(--color-primary);
                                      background: #EEF2FF;
                                    }

                                    .coc-ext-desc {
                                      font-size: 14px;
                                      line-height: 1.6;
                                      color: var(--color-text-secondary);
                                      word-wrap: break-word;
                                      overflow-wrap: break-word;
                                    }

                                    .coc-ext-desc-section {
                                      max-height: 280px;
                                      overflow-y: auto;
                                      padding-right: 8px;
                                    }

                                    .coc-ext-desc-section::-webkit-scrollbar {
                                      width: 6px;
                                    }

                                    .coc-ext-desc-section::-webkit-scrollbar-thumb {
                                      background: var(--color-border);
                                      border-radius: 3px;
                                    }

                                    /* Action Section (Modal Footer) */
                                    .action-section {
                                      margin-top: auto;
                                      padding-top: 20px;
                                      border-top: 1px solid var(--color-border);
                                      display: flex;
                                      flex-direction: column;
                                      gap: 12px;
                                    }

                                    .publish-btn {
                                      width: 100%;
                                      padding: 14px 24px;
                                      background: var(--color-primary);
                                      color: white;
                                      border: none;
                                      border-radius: var(--radius);
                                      font-weight: 600;
                                      font-size: 15px;
                                      cursor: pointer;
                                      transition: all 0.15s ease;
                                      box-shadow: var(--shadow-sm);
                                    }

                                    .publish-btn:hover:not(:disabled) {
                                      background: var(--color-primary-hover);
                                      transform: translateY(-1px);
                                      box-shadow: var(--shadow-md);
                                    }

                                    .publish-btn:disabled {
                                      opacity: 0.6;
                                      cursor: not-allowed;
                                      transform: none;
                                    }

                                    .publish-btn.coc-ext-published-btn {
                                      background: var(--color-success);
                                      cursor: default;
                                    }

                                    .publish-btn.coc-ext-published-btn:hover {
                                      background: var(--color-success);
                                      transform: none;
                                    }

                                    .coc-ext-publish-result {
                                      min-height: 0;
                                      transition: all 0.2s ease;
                                    }

                                    .coc-ext-note {
                                      font-size: 13px;
                                      color: var(--color-text-tertiary);
                                      padding: 12px;
                                      text-align: center;
                                      background: var(--color-bg);
                                      border-radius: var(--radius);
                                      border: 1px solid var(--color-border);
                                    }

                                    /* ============ Toast Notifications ============ */
                                    .coc-ext-publish-toast {
                                      position: fixed;
                                      top: 24px;
                                      right: 24px;
                                      z-index: 10000;
                                      padding: 14px 18px;
                                      border-radius: var(--radius);
                                      font-size: 14px;
                                      font-weight: 500;
                                      max-width: 400px;
                                      box-shadow: var(--shadow-lg);
                                      animation: slideInRight 0.3s ease;
                                    }

                                    @keyframes slideInRight {
                                      from {
                                        transform: translateX(400px);
                                        opacity: 0;
                                      }
                                      to {
                                        transform: translateX(0);
                                        opacity: 1;
                                      }
                                    }

                                    .coc-ext-publish-toast.success {
                                      background: #D1FAE5;
                                      color: #065F46;
                                      border: 1px solid #A7F3D0;
                                    }

                                    .coc-ext-publish-toast.error {
                                      background: #FEE2E2;
                                      color: #991B1B;
                                      border: 1px solid #FCA5A5;
                                    }

                                    .coc-ext-publish-toast code {
                                      background: rgba(0, 0, 0, 0.1);
                                      padding: 2px 6px;
                                      border-radius: 4px;
                                      font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
                                      font-size: 13px;
                                    }

                                    /* ============ Published Products ============ */
                                    .coc-pub-root ul,
                                    .coc-pub-root li {
                                      list-style: none;
                                      margin: 0;
                                      padding: 0;
                                    }

                                    .coc-pub-root .coc-ext-grid {
                                      display: grid !important;
                                      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
                                      gap: 20px;
                                      margin-top: 16px;
                                    }

                                    .coc-pub-root .coc-ext-item {
                                      border: 1px solid var(--color-border);
                                      border-radius: var(--radius-lg);
                                      background: var(--color-surface);
                                      overflow: hidden;
                                      box-shadow: var(--shadow-sm);
                                    }

                                    .coc-pub-root .coc-ext-item:hover {
                                      box-shadow: var(--shadow-lg);
                                      transform: translateY(-2px);
                                    }

                                    .coc-pub-root .coc-ext-thumb {
                                      height: 240px;
                                      background: var(--color-bg) center/cover no-repeat;
                                    }

                                    .coc-pub-root .coc-ext-name {
                                      padding: 16px;
                                      font-size: 14px;
                                      color: var(--color-text);
                                      border-top: 1px solid var(--color-border);
                                      font-weight: 500;
                                    }

                                    .coc-ext-sub-id {
                                      padding: 0 16px 16px;
                                      font-size: 12px;
                                      color: var(--color-text-tertiary);
                                      font-style: italic;
                                    }

                                    .coc-pub-root .button {
                                      border: 1px solid var(--color-border);
                                      background: var(--color-surface);
                                      color: var(--color-text-secondary);
                                      padding: 8px 14px;
                                      border-radius: var(--radius);
                                      font-size: 13px;
                                      text-decoration: none;
                                      font-weight: 500;
                                      transition: all 0.15s ease;
                                      display: inline-block;
                                      margin: 0 16px 16px;
                                    }

                                    .coc-pub-root .button:hover {
                                      border-color: var(--color-primary);
                                      color: var(--color-primary);
                                      background: #FAFAFF;
                                    }

                                    /* Paginator */
                                    .coc-pub-pager {
                                      display: flex;
                                      gap: 10px;
                                      align-items: center;
                                      margin-top: 16px;
                                      justify-content: center;
                                    }

                                    .coc-pub-page {
                                      padding: 8px 14px;
                                      border: 1px solid var(--color-border);
                                      border-radius: var(--radius);
                                      background: var(--color-surface);
                                      color: var(--color-text-secondary);
                                      font-size: 13px;
                                      text-decoration: none;
                                      font-weight: 500;
                                      transition: all 0.15s ease;
                                    }

                                    .coc-pub-page:hover {
                                      border-color: #4465e5;
                                      color: var(--color-primary);
                                    }

                                    .coc-pub-page.current {
                                      background: #E1EBF8;
                                      border-color: #E1EBF8;
                                      color: white;
                                    }

                                    .coc-pub-page.disabled {
                                      opacity: 0.4;
                                      pointer-events: none;
                                    }

                                    .coc-pub-hidden { visibility: hidden; }

                                    .coc-pub-empty {
                                      text-align: center;
                                      padding: 48px 24px;
                                      color: var(--color-text-tertiary);
                                      font-size: 15px;
                                    }

                                    /* ============ Admin Styles ============ */
                                    .coc-admin-row {
                                      display: flex;
                                      gap: 12px;
                                      align-items: center;
                                    }

                                    .coc-admin-bases {
                                      display: grid;
                                      gap: 20px;
                                    }

                                    .coc-admin-base {
                                      border: 1px solid var(--color-border);
                                      border-radius: var(--radius);
                                      padding: 16px;
                                      background: var(--color-surface);
                                    }

                                    .coc-admin-top {
                                      display: flex;
                                      gap: 12px;
                                      align-items: center;
                                      margin-bottom: 12px;
                                    }

                                    .coc-editor {
                                      display: block;
                                    }

                                    .coc-editor-mode {
                                      margin-bottom: 8px;
                                    }

                                    .coc-editor-mode label {
                                      display: flex;
                                      align-items: center;
                                      gap: 8px;
                                      font-weight: 600;
                                      color: var(--color-text);
                                    }

                                    .coc-canvas-toolbar {
                                      display: flex;
                                      align-items: center;
                                      gap: 6px;
                                      padding: 6px 10px;
                                      background: #f3f4f6;
                                      border: 1px solid #d1d5db;
                                      border-bottom: none;
                                      border-radius: 8px 8px 0 0;
                                      font-size: 13px;
                                    }

                                    .coc-canvas-toolbar .coc-zoom-label {
                                      font-weight: 600;
                                      min-width: 42px;
                                      text-align: center;
                                    }

                                    .coc-canvas-toolbar .coc-hint {
                                      font-size: 12px;
                                      color: #9ca3af;
                                    }

                                    .coc-canvas-container {
                                      position: relative;
                                      overflow: hidden;
                                      border: 2px solid #d1d5db;
                                      border-radius: 0 0 8px 8px;
                                      background: #1e1e1e;
                                    }

                                    .coc-controls {
                                      display: grid;
                                      gap: 8px;
                                    }

                                    .coc-controls.coc-controls-rect {
                                      display: flex;
                                      flex-wrap: wrap;
                                      gap: 10px;
                                      align-items: center;
                                      margin-top: 8px;
                                    }

                                    .coc-controls label {
                                      display: flex;
                                      align-items: center;
                                      gap: 6px;
                                      font-size: 13px;
                                      color: var(--color-text-secondary);
                                      font-weight: 500;
                                    }

                                    .coc-canvas {
                                      width: 100%;
                                      height: auto;
                                      display: block;
                                    }

                                    /* ============ Session Counter ============ */
                                    .coc-ext-session-counter {
                                      font-size: 13px;
                                      color: var(--color-text-secondary);
                                      padding: 6px 12px;
                                      background: var(--color-bg);
                                      border-radius: var(--radius);
                                      border: 1px solid var(--color-border);
                                      font-weight: 500;
                                    }

                                    .coc-ext-upload-counter {
                                      font-size: 13px;
                                      color: var(--color-text-secondary);
                                      padding: 6px 12px;
                                      background: var(--color-bg);
                                      border-radius: var(--radius);
                                      border: 1px solid var(--color-border);
                                      font-weight: 500;
                                      margin-left: 10px;
                                    }

                                    .coc-ext-upload-counter[style*="color: #dc2626"] {
                                      color: #dc2626 !important;
                                      border-color: #FCA5A5;
                                      background: #FEF2F2;
                                    }

                                    /* ============ Mobile Responsiveness ============ */
                                    @media (max-width: 768px) {
                                      .coc-ext-modal-inner.no-scroll {
                                        grid-template-columns: 1fr;
                                        max-height: 95vh;
                                        /* On mobile, scroll the whole modal as one unit so the
                                           publish button at the bottom of the right column is
                                           always reachable by scrolling. */
                                        overflow-y: auto;
                                      }

                                      /* Disable per-column scroll on mobile — let modal-inner scroll */
                                      .coc-ext-left,
                                      .coc-ext-right {
                                        max-height: none;
                                        overflow-y: visible;
                                      }

                                      .coc-ext-left {
                                        padding: 24px;
                                        border-right: none;
                                        border-bottom: 1px solid var(--color-border);
                                      }
                                      
                                      .coc-ext-left,
                                      .coc-ext-right {
                                        padding: 24px;
                                      }
                                      
                                      .coc-ext-main {
                                        max-width: 100%;
                                        margin-bottom: 16px;
                                      }
                                      
                                      .coc-ext-title {
                                        font-size: 17px;
                                        padding-right: 45px;
                                      }
                                      
                                      .coc-ext-desc {
                                        font-size: 14px;
                                      }
                                      
                                      .coc-ext-close {
                                        top: 16px;
                                        right: 16px;
                                        width: 32px;
                                        height: 32px;
                                        font-size: 18px;
                                      }
                                      
                                      /* Mobile progress bar adjustments */
                                      .coc-ext-progress-steps {
                                        gap: 4px;
                                      }
                                      
                                      .coc-ext-step-label {
                                        font-size: 9px;
                                      }
                                      
                                      .coc-ext-step-dot {
                                        width: 12px;
                                        height: 12px;
                                      }

                                      .coc-ext-unified-bar {
                                        flex-direction: column;
                                        align-items: stretch;
                                      }

                                      .coc-ext-bar-left,
                                      .coc-ext-bar-right {
                                        flex-direction: column;
                                        width: 100%;
                                      }

                                      .coc-ext-bar-divider {
                                        width: 100%;
                                        height: 1px;
                                      }

                                      .coc-ext-price-group {
                                        flex-wrap: wrap;
                                      }
                                      
                                      /* Tooltip mobile adjustments */
                                      .coc-ext-info-icon-wrapper::before {
                                        width: 240px;
                                        left: auto;
                                        right: 0;
                                        transform: none;
                                        font-size: 11px;
                                        padding: 8px 12px;
                                      }
                                      
                                      .coc-ext-info-icon-wrapper::after {
                                        left: auto;
                                        right: 8px;
                                        transform: none;
                                      }
                                    }

                                    @media (max-width: 480px) {
                                      .coc-ext-categories {
                                        grid-template-columns: 1fr;
                                      }

                                      .coc-ext-grid {
                                        grid-template-columns: 1fr;
                                      }
                                    }

                                    /* ============ Animations ============ */
                                    .coc-ext-item {
                                      animation: fadeInUp 0.3s ease-out;
                                    }

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

                                    /* Stagger animation for grid items */
                                    .coc-ext-item:nth-child(1) { animation-delay: 0s; }
                                    .coc-ext-item:nth-child(2) { animation-delay: 0.03s; }
                                    .coc-ext-item:nth-child(3) { animation-delay: 0.06s; }
                                    .coc-ext-item:nth-child(4) { animation-delay: 0.09s; }
                                    .coc-ext-item:nth-child(5) { animation-delay: 0.12s; }
                                    .coc-ext-item:nth-child(n+6) { animation-delay: 0.15s; }

                                    /* ============ Published Products Toolbar (Search & Filter) ============ */
                                    .coc-pub-root {
                                      position: relative;
                                      display: block;
                                      width: 100%;
                                    }

                                    .coc-pub-toolbar {
                                      display: flex;
                                      gap: 12px;
                                      margin-bottom: 24px;
                                      flex-wrap: wrap;
                                      align-items: center;
                                      background: var(--color-bg, #F9FAFB);
                                      padding: 16px;
                                      border-radius: var(--radius-lg, 12px);
                                      border: 1px solid var(--color-border, #E5E7EB);
                                    }

                                    .coc-pub-search-form {
                                      display: flex;
                                      gap: 10px;
                                      flex: 1;
                                      min-width: 280px;
                                    }

                                    .coc-pub-input {
                                      flex: 1;
                                      padding: 10px 12px;
                                      border: 1px solid var(--color-border, #E5E7EB);
                                      border-radius: var(--radius, 8px);
                                      font-size: 14px;
                                      outline: none;
                                      transition: border-color 0.2s;
                                      background: var(--color-surface, #FFFFFF);
                                      color: var(--color-text, #111827);
                                      height: 42px;
                                      box-sizing: border-box;
                                    }

                                    .coc-pub-input:focus {
                                      border-color: var(--color-primary, #6366F1);
                                      box-shadow: 0 0 0 3px rgba(11, 63, 200, 0.1);
                                    }

                                    .coc-pub-select {
                                      padding: 0 32px 0 12px;
                                      border: 1px solid var(--color-border, #E5E7EB);
                                      border-radius: var(--radius, 8px);
                                      font-size: 14px;
                                      outline: none;
                                      height: 42px;
                                      background: var(--color-surface, #FFFFFF) url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
                                      appearance: none;
                                      cursor: pointer;
                                      color: var(--color-text, #111827);
                                      min-width: 140px;
                                    }

                                    .coc-pub-btn {
                                      padding: 0 20px;
                                      height: 42px;
                                      background:#E1EBF8;
                                      color: #4465e5;
                                      border: none;
                                      border-radius: var(--radius, 8px);
                                      font-weight: 600;
                                      font-size: 14px;
                                      cursor: pointer;
                                      transition: background 0.2s;
                                      white-space: nowrap;
                                    }

                                    .coc-pub-btn:hover {
                                      background: #C6D8EE;
                                    }

                                    .coc-pub-reset {
                                      color: var(--color-text-secondary, #6B7280);
                                      text-decoration: none;
                                      font-size: 13px;
                                      font-weight: 500;
                                      padding: 0 8px;
                                      margin-left: auto; /* Pushes reset link to the far right on mobile */
                                    }

                                    .coc-pub-reset:hover {
                                      color: var(--color-text, #111827);
                                      text-decoration: underline;
                                    }

                                    /* ============ Equal Height Cards with Sticky Footer ============ */
                                    /* Force grid to stretch items */
                                    .coc-pub-root .coc-ext-grid {
                                      display: grid !important;
                                      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
                                      gap: 20px;
                                      align-items: stretch; /* Crucial for equal height */
                                    }

                                    /* Card acts as a flex column */
                                    .coc-pub-root .coc-ext-item {
                                      display: flex !important;
                                      flex-direction: column !important;
                                      height: 100% !important;
                                      border: 1px solid var(--color-border, #E5E7EB);
                                      border-radius: var(--radius-lg, 12px);
                                      background: var(--color-surface, #FFFFFF);
                                      overflow: hidden;
                                      box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0,0,0,0.05));
                                      transition: all 0.2s;
                                    }

                                    .coc-pub-root .coc-ext-item:hover {
                                      transform: translateY(-2px);
                                      box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1));
                                    }

                                    /* Image container fixed height to prevent flash */
                                    .coc-pub-root .coc-ext-thumb {
                                      height: 240px;
                                      width: 100%;
                                      background: var(--color-bg, #F9FAFB);
                                      flex-shrink: 0; /* Prevent shrinking */
                                      display: flex;
                                      align-items: center;
                                      justify-content: center;
                                      overflow: hidden;
                                    }

                                    .coc-pub-root .coc-ext-thumb img {
                                      width: 100%;
                                      height: 100%;
                                      object-fit: contain;
                                      display: block;
                                      transition: transform 0.3s;
                                    }

                                    /* Middle content area grows to fill empty space */
                                    .coc-pub-content-wrap {
                                      flex: 1 1 auto; /* Grow, Shrink, Auto basis */
                                      display: flex;
                                      flex-direction: column;
                                      padding: 16px;
                                    }

                                    .coc-pub-root .coc-ext-name {
                                      font-size: 15px;
                                      font-weight: 600;
                                      color: var(--color-text, #111827);
                                      line-height: 1.4;
                                      margin-bottom: 4px;
                                      padding: 0 !important;
                                      border: none !important; /* Remove old border */
                                    }

                                    .coc-pub-root .coc-ext-sub-id {
                                      font-size: 12px;
                                      color: var(--color-text-tertiary, #9CA3AF);
                                      padding: 0 !important; /* Override old padding */
                                    }

                                    /* Footer sticks to bottom */
                                    .coc-pub-footer {
                                      padding: 12px 16px 16px;
                                      background: var(--color-bg, #F9FAFB);
                                      border-top: 1px solid var(--color-border, #E5E7EB);
                                      margin-top: auto; /* Safety net */
                                      flex-shrink: 0;
                                    }

                                    .coc-pub-download-btn {
                                      display: flex;
                                      align-items: center;
                                      justify-content: center;
                                      gap: 8px;
                                      width: 100%;
                                      padding: 10px;
                                      background: var(--color-surface, #FFFFFF);
                                      border: 1px solid var(--color-border, #E5E7EB);
                                      border-radius: var(--radius, 8px);
                                      color: var(--color-text, #111827);
                                      font-size: 13px;
                                      font-weight: 600;
                                      text-decoration: none;
                                      transition: all 0.15s ease;
                                      box-sizing: border-box;
                                    }

                                    .coc-pub-download-btn:hover {
                                      border-color: var(--color-primary, #6366F1);
                                      color: var(--color-primary, #6366F1);
                                      background: #EEF2FF;
                                    }

                                    .coc-ext-retry-btn {
                                      background: #3B82F6;
                                      color: #fff;
                                      border: none;
                                      padding: 4px 8px;
                                      border-radius: 4px;
                                      font-size: 11px;
                                      cursor: pointer;
                                      white-space: nowrap;
                                      transition: all 0.15s ease;
                                      font-weight: 500;
                                    }

                                    .coc-ext-retry-btn:hover {
                                      background: #2563EB;
                                      transform: translateY(-1px);
                                    }

                                    /* Queue Badge Animation */
                                    @keyframes pulse {
                                      0%, 100% { opacity: 1; transform: scale(1); }
                                      50% { opacity: 0.8; transform: scale(1.05); }
                                    }

                                    #coc-queue-badge {
                                      display: inline-block;
                                      animation: pulse 2s infinite;
                                    }

                                    /* Publishing Notice */
                                    .coc-ext-publish-notice {
                                      margin-top: 16px;
                                      margin-bottom: 20px;
                                      padding: 12px 16px;
                                      background: #FEF3C7;
                                      border: 1px solid #FCD34D;
                                      border-radius: 8px;
                                      animation: slideDown 0.3s ease-out;
                                    }

                                    .coc-ext-publish-notice-complete {
                                      background: #D1FAE5;
                                      border-color: #10B981;
                                    }

                                    .coc-ext-publish-notice-content {
                                      display: flex;
                                      align-items: center;
                                      gap: 12px;
                                      flex-wrap: nowrap;
                                    }

                                    .coc-ext-publish-notice-icon {
                                      font-size: 20px;
                                      flex-shrink: 0;
                                      line-height: 1;
                                    }

                                    .coc-ext-publish-notice-text-wrapper {
                                      flex: 1;
                                      min-width: 0;
                                      display: flex;
                                      flex-direction: column;
                                      justify-content: center;
                                    }

                                    .coc-ext-publish-notice-text {
                                      font-size: 14px;
                                      color: #78350F;
                                      line-height: 1.5;
                                      margin-bottom: 4px;
                                    }

                                    .coc-ext-publish-notice-subtext {
                                      font-size: 13px;
                                      color: #92400E;
                                      line-height: 1.4;
                                    }

                                    .coc-ext-publish-notice-complete .coc-ext-publish-notice-text {
                                      color: #065F46;
                                      margin-bottom: 0;
                                      line-height: 1.5;
                                    }

                                    .coc-ext-publish-notice-complete .coc-ext-publish-notice-subtext {
                                      display: none;
                                    }

                                    .coc-ext-publish-notice-text strong {
                                      font-weight: 600;
                                    }

                                    .coc-ext-publish-notice-progress {
                                      font-size: 14px;
                                      font-weight: 600;
                                      color: #92400E;
                                      white-space: nowrap;
                                      flex-shrink: 0;
                                      line-height: 1;
                                    }

                                    .coc-ext-publish-notice-complete .coc-ext-publish-notice-progress {
                                      display: none;
                                    }

                                    .coc-ext-stage {
                                      display: block;
                                      width: 100%;
                                    }

                                    .coc-ext-stage.coc-ext-hidden {
                                      display: none;
                                    }

                                    @keyframes slideDown {
                                      from {
                                        opacity: 0;
                                        transform: translateY(-10px);
                                      }
                                      to {
                                        opacity: 1;
                                        transform: translateY(0);
                                      }
                                    }

                                    /* ============ Text-Only Personalization UI ============ */
                                    .coc-ext-text-only-ui {
                                      display: block;
                                      width: 100%;
                                      margin-top: 24px;
                                      padding: 24px;
                                      background: var(--color-surface);
                                      border: 1px solid var(--color-border);
                                      border-radius: var(--radius-lg);
                                      box-shadow: var(--shadow-sm);
                                    }

                                    .coc-ext-text-layout {
                                      display: grid;
                                      grid-template-columns: 1fr 1fr;
                                      gap: 32px;
                                      align-items: start;
                                    }

                                    @media (max-width: 968px) {
                                      .coc-ext-text-layout {
                                        grid-template-columns: 1fr;
                                        gap: 24px;
                                      }
                                    }

                                    /* Text Controls (Left Column) */
                                    .coc-ext-text-controls {
                                      display: flex;
                                      flex-direction: column;
                                      gap: 20px;
                                    }

                                    .coc-ext-text-control-group {
                                      display: flex;
                                      flex-direction: column;
                                      gap: 8px;
                                    }

                                    .coc-ext-text-label {
                                      font-size: 13px;
                                      font-weight: 600;
                                      color: var(--color-text);
                                      text-transform: uppercase;
                                      letter-spacing: 0.5px;
                                      display: flex;
                                      align-items: center;
                                      gap: 8px;
                                    }

                                    .coc-ext-text-input {
                                      width: 100%;
                                      padding: 12px;
                                      border: 1px solid var(--color-border);
                                      border-radius: var(--radius);
                                      font-size: 14px;
                                      font-family: inherit;
                                      color: var(--color-text);
                                      background: var(--color-surface);
                                      resize: vertical;
                                      min-height: 120px;
                                      transition: all 0.15s ease;
                                      box-sizing: border-box;
                                    }

                                    .coc-ext-text-input:focus {
                                      outline: none;
                                      border-color: var(--color-primary);
                                      box-shadow: 0 0 0 3px rgba(11, 63, 200, 0.1);
                                    }

                                    .coc-ext-text-input::placeholder {
                                      color: var(--color-text-tertiary);
                                    }

                                    .coc-ext-text-hint {
                                      font-size: 12px;
                                      color: var(--color-text-secondary);
                                      margin: 0;
                                      line-height: 1.4;
                                    }

                                    .coc-ext-font-select {
                                      width: 100%;
                                      padding: 10px 12px;
                                      border: 1px solid var(--color-border);
                                      border-radius: var(--radius);
                                      font-size: 14px;
                                      font-family: inherit;
                                      color: var(--color-text);
                                      background: var(--color-surface);
                                      cursor: pointer;
                                      transition: all 0.15s ease;
                                      appearance: none;
                                      background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                                      background-repeat: no-repeat;
                                      background-position: right 12px center;
                                      padding-right: 36px;
                                    }

                                    .coc-ext-font-select:focus {
                                      outline: none;
                                      border-color: var(--color-primary);
                                      box-shadow: 0 0 0 3px rgba(11, 63, 200, 0.1);
                                    }

.coc-ext-font-select option {
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.5;
}

                                    .coc-ext-color-picker-wrapper {
                                      display: flex;
                                      align-items: center;
                                      gap: 12px;
                                    }

                                    .coc-ext-color-picker {
                                      width: 60px;
                                      height: 42px;
                                      border: 1px solid var(--color-border);
                                      border-radius: var(--radius);
                                      cursor: pointer;
                                      padding: 2px;
                                      background: var(--color-surface);
                                      transition: all 0.15s ease;
                                    }

                                    .coc-ext-color-picker:hover {
                                      border-color: var(--color-primary);
                                    }

                                    .coc-ext-color-picker:focus {
                                      outline: none;
                                      border-color: var(--color-primary);
                                      box-shadow: 0 0 0 3px rgba(11, 63, 200, 0.1);
                                    }

                                    .coc-ext-color-text {
                                      flex: 1;
                                      padding: 10px 12px;
                                      border: 1px solid var(--color-border);
                                      border-radius: var(--radius);
                                      font-size: 14px;
                                      font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
                                      color: var(--color-text);
                                      background: var(--color-surface);
                                      transition: all 0.15s ease;
                                    }

                                    .coc-ext-color-text:focus {
                                      outline: none;
                                      border-color: var(--color-primary);
                                      box-shadow: 0 0 0 3px rgba(11, 63, 200, 0.1);
                                    }

                                    .coc-ext-color-text:invalid {
                                      border-color: #EF4444;
                                    }

/* Alignment Button Group */
.coc-ext-alignment-group {
  display: flex;
  gap: 4px;
  background: var(--color-bg);
  padding: 4px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.coc-ext-align-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: all 0.15s ease;
}

.coc-ext-align-btn:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.coc-ext-align-btn.active {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 2px 4px rgba(11, 63, 200, 0.3);
}

.coc-ext-align-btn svg {
  width: 18px;
  height: 18px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

                                    .coc-ext-line-height-value {
                                      font-weight: 600;
                                      color: var(--color-primary);
                                      font-size: 13px;
                                    }

                                    .coc-ext-line-height-slider {
                                      width: 100%;
                                      height: 6px;
                                      border-radius: 3px;
                                      background: var(--color-border);
                                      outline: none;
                                      -webkit-appearance: none;
                                      appearance: none;
                                      cursor: pointer;
                                      transition: background 0.15s ease;
                                    }

                                    .coc-ext-line-height-slider:hover {
                                      background: var(--color-border-hover);
                                    }

                                    .coc-ext-line-height-slider::-webkit-slider-thumb {
                                      -webkit-appearance: none;
                                      appearance: none;
                                      width: 18px;
                                      height: 18px;
                                      border-radius: 50%;
                                      background: var(--color-primary);
                                      cursor: pointer;
                                      border: 2px solid var(--color-surface);
                                      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                                      transition: all 0.15s ease;
                                    }

                                    .coc-ext-line-height-slider::-webkit-slider-thumb:hover {
                                      background: var(--color-primary-hover);
                                      transform: scale(1.1);
                                    }

                                    .coc-ext-line-height-slider::-moz-range-thumb {
                                      width: 18px;
                                      height: 18px;
                                      border-radius: 50%;
                                      background: var(--color-primary);
                                      cursor: pointer;
                                      border: 2px solid var(--color-surface);
                                      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                                      transition: all 0.15s ease;
                                    }

                                    .coc-ext-line-height-slider::-moz-range-thumb:hover {
                                      background: var(--color-primary-hover);
                                      transform: scale(1.1);
                                    }

                                    .coc-ext-create-text-product-btn {
                                      display: inline-flex;
                                      align-items: center;
                                      justify-content: center;
                                      gap: 8px;
                                      width: 100%;
                                      padding: 14px 24px;
                                      background: var(--color-primary);
                                      color: white;
                                      border: none;
                                      border-radius: var(--radius);
                                      font-weight: 600;
                                      font-size: 15px;
                                      cursor: pointer;
                                      transition: all 0.15s ease;
                                      box-shadow: var(--shadow-sm);
                                      margin-top: 8px;
                                    }

                                    .coc-ext-create-text-product-btn:hover:not(:disabled) {
                                      background: var(--color-primary-hover);
                                      transform: translateY(-1px);
                                      box-shadow: var(--shadow-md);
                                    }

                                    .coc-ext-create-text-product-btn:disabled {
                                      opacity: 0.6;
                                      cursor: not-allowed;
                                      transform: none;
                                    }

                                    .coc-ext-create-text-product-btn svg {
                                      width: 18px;
                                      height: 18px;
                                      display: inline-block;
                                      vertical-align: middle;
                                    }

                                    /* Text Preview (Right Column) */
                                    .coc-ext-text-preview {
                                      display: flex;
                                      flex-direction: column;
                                      gap: 12px;
                                      position: sticky;
                                      top: 24px;
                                    }

                                    .coc-ext-text-preview-header {
                                      font-size: 13px;
                                      font-weight: 600;
                                      color: var(--color-text-secondary);
                                      text-transform: uppercase;
                                      letter-spacing: 0.5px;
                                      text-align: center;
                                      padding-bottom: 8px;
                                      border-bottom: 1px solid var(--color-border);
                                    }

                                    .coc-ext-text-preview-canvas {
                                      width: 100%;
                                      height: auto;
                                      border: 1px solid var(--color-border);
                                      border-radius: var(--radius);
                                      background: var(--color-bg);
                                      box-shadow: var(--shadow-sm);
                                      display: block;
                                      max-width: 100%;
                                    }

                                    @media (max-width: 968px) {
                                      .coc-ext-text-preview {
                                        position: static;
                                      }
                                    }

/* ============ Text-Only Personalization v2: per-line, footer, divider ============ */

/* Per-line editor */
.coc-ext-text-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.coc-ext-text-line-row {
  display: grid;
  grid-template-columns: 22px 1fr auto auto auto auto auto auto;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.coc-ext-text-line-row:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(11, 63, 200, 0.08);
}

.coc-ext-text-line-row .coc-ext-line-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-align: center;
  user-select: none;
}

.coc-ext-text-line-row .coc-ext-line-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) - 2px);
  font-size: 14px;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s ease;
  box-sizing: border-box;
  min-width: 0;
}

.coc-ext-text-line-row .coc-ext-line-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.coc-ext-text-line-row .coc-ext-line-tog,
.coc-ext-text-line-row .coc-ext-line-up,
.coc-ext-text-line-row .coc-ext-line-down,
.coc-ext-text-line-row .coc-ext-line-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: calc(var(--radius) - 2px);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}

.coc-ext-text-line-row .coc-ext-line-tog:hover,
.coc-ext-text-line-row .coc-ext-line-up:hover,
.coc-ext-text-line-row .coc-ext-line-down:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.coc-ext-text-line-row .coc-ext-line-tog.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.coc-ext-text-line-row .coc-ext-line-del:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: #fef2f2;
}

.coc-ext-text-line-row .coc-ext-line-scale {
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: calc(var(--radius) - 2px);
  font-size: 12px;
  color: var(--color-text);
  cursor: pointer;
}

.coc-ext-text-line-row .coc-ext-line-up:disabled,
.coc-ext-text-line-row .coc-ext-line-down:disabled,
.coc-ext-text-line-row .coc-ext-line-del:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.coc-ext-add-line-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 12px;
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.coc-ext-add-line-btn:hover:not(:disabled) {
  background: rgba(11, 63, 200, 0.06);
}

.coc-ext-add-line-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-style: solid;
}

.coc-ext-text-lines-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  text-transform: none;
  letter-spacing: 0;
}

/* Letter spacing slider (reuses line-height slider visuals) */
.coc-ext-letter-spacing-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--color-border);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.coc-ext-letter-spacing-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-surface);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  cursor: pointer;
}
.coc-ext-letter-spacing-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-surface);
  cursor: pointer;
}
.coc-ext-letter-spacing-value {
  font-weight: 600;
  color: var(--color-primary);
  font-size: 13px;
}

/* Footer block */
.coc-ext-toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.coc-ext-footer-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.coc-ext-footer-text {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) - 2px);
  font-size: 13px;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  box-sizing: border-box;
}

.coc-ext-footer-text:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(11, 63, 200, 0.08);
}

.coc-ext-footer-style-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.coc-ext-tog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: calc(var(--radius) - 2px);
  color: var(--color-text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.coc-ext-tog-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.coc-ext-tog-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.coc-ext-inline-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.coc-ext-inline-label-text {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-right: 2px;
}

.coc-ext-inline-label select,
.coc-ext-inline-label input[type="color"] {
  height: 28px;
  padding: 0 4px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: calc(var(--radius) - 2px);
  font-size: 12px;
  cursor: pointer;
}

.coc-ext-inline-label input[type="color"] {
  width: 36px;
  padding: 2px;
}

/* Divider block */
.coc-ext-divider-hint {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}

.coc-ext-divider-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}

.coc-ext-divider-style-btn {
  padding: 8px 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: calc(var(--radius) - 2px);
  font-size: 12px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.12s ease;
}

.coc-ext-divider-style-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.coc-ext-divider-style-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.coc-ext-divider-decor-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.coc-ext-decor-char {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: calc(var(--radius) - 2px);
  font-size: 15px;
  cursor: pointer;
  color: var(--color-text);
  transition: all 0.12s ease;
}

.coc-ext-decor-char:hover {
  border-color: var(--color-primary);
}

.coc-ext-decor-char.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.coc-ext-decor-custom {
  flex: 1;
  min-width: 80px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: calc(var(--radius) - 2px);
  font-size: 13px;
  box-sizing: border-box;
}

.coc-ext-divider-sliders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-top: 8px;
  padding: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.coc-ext-slider-label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  gap: 4px;
}

.coc-ext-slider-label span {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

.coc-ext-slider-label input[type="range"] {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.coc-ext-slider-label input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-surface);
}

.coc-ext-slider-label input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-surface);
}

.coc-ext-slider-inline {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex: 1;
}

/* Effects */
.coc-ext-effect-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.coc-ext-effect-row + .coc-ext-effect-row {
  margin-top: 6px;
}

.coc-ext-effect-row input[type="color"] {
  width: 36px;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
}

.coc-ext-effect-row input[type="color"]:disabled,
.coc-ext-effect-row input[type="range"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Action row */
.coc-ext-text-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.coc-ext-text-action-row .coc-ext-create-text-product-btn {
  flex: 1;
  margin-top: 0;
}

.coc-ext-reset-text-btn {
  padding: 12px 18px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.coc-ext-reset-text-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

@media (max-width: 540px) {
  .coc-ext-text-line-row {
    grid-template-columns: 22px 1fr auto auto auto auto;
  }
  .coc-ext-text-line-row .coc-ext-line-up,
  .coc-ext-text-line-row .coc-ext-line-down {
    display: none;
  }
}

/* ============ Mockup Only Shortcode ============ */
.coc-mockup-only-root {
  display: block;
}

.coc-mockup-stage {
  padding: 24px 0;
}

.coc-mockup-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

.coc-mockup-backbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.15s ease;
}

.coc-mockup-backbtn:hover {
  background: var(--color-bg);
  border-color: var(--color-border-hover);
}

.coc-mockup-download-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.coc-mockup-download-all:hover:not(:disabled) {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.coc-mockup-download-all:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.coc-mockup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.coc-mockup-item {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.2s ease;
}

.coc-mockup-item:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.coc-mockup-thumb {
  position: relative;
  aspect-ratio: 1;
  background: var(--color-bg) center/cover no-repeat;
  overflow: hidden;
}

.coc-mockup-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.coc-mockup-item.loading .coc-mockup-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.coc-mockup-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: coc-spin 0.8s linear infinite;
}

@keyframes coc-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.coc-mockup-footer {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.coc-mockup-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.coc-mockup-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--color-success);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.coc-mockup-download-btn:hover {
  background: var(--color-success-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.coc-mockup-download-btn svg {
  width: 14px;
  height: 14px;
}

/* Mockup loading state */
.coc-mockup-item.loading .coc-mockup-download-btn {
  opacity: 0.5;
  pointer-events: none;
}

/* Status badge on mockup item */
.coc-mockup-status {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  z-index: 5;
}

.coc-mockup-status.ready {
  background: var(--color-success);
}

.coc-mockup-status.processing {
  background: var(--color-primary);
}